PAGEPAGE0廣東省×××職業技術學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20________________________________________________________________網頁制作項目實訓教程學校（School）網頁制作項目實訓教程學科（Subject）_______________________________年級（Grade）______________________________________________________________教師（Teacher）_______________________________重慶大學出版社制

《網頁制作項目實訓教程》目錄注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊按鈕可返回目錄③頁面設置參數為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2使用內嵌樣式表美化網頁任務2HYPERLINK的內容”文字刪除，插入“top.jpg”圖片，完成頂部導航欄的布局制作。6、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在標簽之后”，在第2個下拉列表框中選擇“<divid=”nav”>”，在“ID”名框中輸入“banner”，然后單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#banner的CSS規則定義”對話框，按要求設置CSS樣式，然后單擊“確定”按鈕，并將“此處顯示id"banner"的內容”文字刪除，插入“banner.jpg”圖片，完成banner部分的布局制作。7、參照第6步，完成“#main”與“#bottom”兩個區域的布局操作，按要求完成相應CSS樣式設置，并在“#bottom”中插入“bottom.jpg”圖片。8、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標簽之后”，在第2個下拉列表框中選擇“<divid=”main”>”，在“ID”名框中輸入“left”，然后單擊“確定”按鈕。9、選擇“此處顯示id"left"的內容”文字，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#main#left的CSS規則定義”對話框，按要求設置CSS樣式，將“此處顯示id"left"的內容”文字刪除，并在其中插入圖片“con-left.jpg”。10、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在結束標簽之前”，在第2個下拉列表框中選擇“<divid=”main”>”，在“ID”名框中輸入“right”，然后單擊“確定”按鈕。11、選擇“此處顯示id"right"的內容”文字，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#main#right的CSS規則定義”對話框，按要求設置CSS樣式，將“此處顯示id"right"的內容”文字刪除，并在其中插入圖片“con-right.jpg”。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：盒子模型的屬性；外邊距；內邊距演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務3活動2使用Div+CSS制作圖片展示頁課題類型理論+實作課時安排2上課時間教學目標1.了解什么是塊級元素，什么是行內元素2.掌握與Div+CSS布局網頁相關CSS屬性：display、float、clear、overflow。教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.盒子模型的相關屬性。2.外邊距（margin）與內邊距（padding）。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求使用Div+CSS完成圖片展示頁的制作，如下圖所示，完成后以“task6-3-2.html”為文件名保存到“task6-3”文件夾。二、師生討論學習新知識1、標準文檔流標準文檔流指的是元素排版布局過程中，元素會默認自動從左往右，從上往下的流式排列方式。并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。標準文檔流分兩類：塊級元素（blocklevel）：以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿，占有獨立空間，如div標簽就是一個通用的塊級元素。行內元素（inline）：各個元素之間橫向排列，到最右端自動折行，標簽本身不占有獨立的區域，僅僅在其他元素的基礎上指定了一定的范圍，如span標簽就是一個通用的行內元素。2、display屬性用于指定HTML標簽的顯示方式，常用的屬性值有3個：block、inline、none。3、float屬性用于定義元素的浮動方向，其屬性值有3個：left 、right、none。4、clear屬性用于規定元素的哪一側不允許其他浮動元素，常用于清除浮動帶來的影響和擴展盒子高度，其屬性值有4個：left、right、both 、none。5、overflow屬性用于處理盒子中的內容溢出，overflow需要必須配合width屬性使用，其屬性值有4個：visible、hidden、scroll、auto。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6并新建一個HTML文檔，切換至“設計”視圖，更改文檔標題為“2019最新主題樣片”，以“task6-3-2.html”為文件名保存到“task6-3”文件夾。2、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”下拉列表框中選擇“在插入點”，在“ID”框中輸入“content”，然后單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框“規則定義”下拉列表框中選擇“僅限該文檔”，然后單擊“確定”按鈕，打開“#content的CSS規則定義”對話框，按要求設置CSS樣式。3、刪除“此處顯示id"content"的內容”文字，輸入“最新主題樣片”，并將其設置為“標題3”格式。4、將光標定位到“最新主題樣片”文字中，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contenth3的CSS規則定義”對話框，按要求設置CSS樣式。5、切換到“代碼”視圖，在“最新主題樣片”文字兩端添加<span>標簽。再切換到“設計”視圖，將光標定位到“最新主題樣片”文字中，單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contenth3span的CSS規則定義”對話框，按要求設置CSS樣式。6、在“最新主題樣片”文字后面單擊，然后按回車鍵另起一行，插入“pic-1.jpg”圖片，并為圖片添加空鏈接，按回車鍵另起一行，插入“pic-2.jpg”圖片，并為圖片添加空鏈接，重復上述操作，將其余10張圖片插入到頁面中。選擇剛剛插入的所有圖片，在“屬性”面板單擊“項目列表”按鈕將其轉換為項目列表。7、選擇任意一張圖片，在“標簽選擇器”中單擊“<ul>”按鈕，在“CSS樣式面板”中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contentul的CSS規則定義”對話框，按要求設置CSS樣式。8、選擇任意一張圖片，在“標簽選擇器”中單擊“<li>”按鈕，在“CSS樣式面板”中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contentulli的CSS規則定義”對話框，按要求設置CSS樣式。9、選擇任意一張圖片，在“標簽選擇器”中單擊“<li>”按鈕，在“CSS樣式面板”中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框的“選擇器名稱”框中輸入“#contentulli.first”，然后單擊“確定”按鈕，打開“#contentulli.first的CSS規則定義”對話框，按要求設置CSS樣式。10、選擇第1張圖，在“標簽選擇器”中單擊“<li>”按鈕，在“屬性”面板中“類”下拉列表框中選擇“first”。參照同樣的方法設置第5張圖與第9張圖。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：標準文檔流；display屬性；float屬性；clear屬性；overflow屬性演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務4活動1使用CSS設置背景課題類型理論+實作課時安排2上課時間教學目標1.掌握與背景與關的CSS樣式2.靈活運用背景重復CSS屬性控制網頁效果教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.標準文檔流：塊級元素、行內元素。2.與Div+CSS布局網頁相關的CSS屬性：display、float、clear、overflow。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求結合背景相關CSS樣式，完成“支付寶-我的應用”的制作，如下圖所示，完成后以“task6-4-1.html”為文件名保存到“task6-4”文件夾。二、師生討論學習新知識1、CSS背景CSS背景屬性用于定義HTML元素的背景，可在DreamweaverCS6的“CSS規則定義”對話框的“背景”選項卡中進行CSS背景設置。CSS背景包含以下幾個常用屬性：背景顏色（background-color）：用于設置網頁元素的背景顏色。背景圖像（background-image）：用于設置網頁元素的背景圖像。背景重復（background-repeat）：用于控制圖像平鋪的方式和方向。背景定位（background-position）：用于控制圖像在背景中的位置。2、背景重復（background-repeat）用于控制圖像平鋪的方式和方向，屬性值有4個：repeat、no-repeat 、repeat-x、repeat-y 。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6并新建一個HTML文檔，切換至“設計”視圖，更改文檔標題為“支付寶-我的應用”，以“task6-4-1.html”為文件名保存到“task6-4”文件夾。2、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”下拉列表框中選擇“在插入點”，在“ID”框中輸入“content”，然后單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框“規則定義”下拉列表框中選擇“僅限該文檔”，然后單擊“確定”按鈕，打開“#content的CSS規則定義”對話框，按要求設置CSS樣式。3、刪除“此處顯示id"content"的內容”文字，輸入“我的應用（8）”與“占位”文字，選擇輸入的文字并將其設置為“標題3”格式，選擇“占位”文字并為其添加空鏈接。4、將光標定位到“我的應用（8）”文字中，在“標簽選擇器”中單擊“<h3>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contenth3的CSS規則定義”對話框，按要求設置CSS樣式。5、將光標定位到“占位”文字中，在“標簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contenth3a的CSS規則定義”對話框，按要求設置CSS樣式。6、將光標定位到“占位”文字中，在“標簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#contenth3a:hover”，然后單擊“確定”按鈕，打開“#contenth3a:hover的CSS規則定義”對話框，按要求設置CSS樣式。7、刪除“占位”兩個字。在“我的應用（8）”文字后面單擊鼠標，然后按回車鍵另起一行，輸入“轉賬到支付寶”并添加空鏈接。參照同樣的方法輸入其他文字并添加空鏈接。8、選擇“轉賬到支付寶”~“醫院掛號”這8行文字，在“屬性”面板中單擊“項目列表”將其轉換為項目列表。9、在“轉賬到支付寶”文字中單擊鼠標，在“標簽選擇器”中單擊“<ul>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contentul的CSS規則定義”對話框，按要求設置CSS樣式。10、在“轉賬到支付寶”文字中單擊鼠標，在“標簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#contentullia的CSS規則定義”對話框，按要求設置CSS樣式。11、在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#contentullia.list-1”，然后單擊“確定”按鈕，打開“#contentullia.list-1的CSS規則定義”對話框，按要求設置CSS樣式。12、在“轉賬到支付寶”文字中單擊鼠標，在“標簽選擇器”中單擊“<a>”按鈕，在“屬性”面板中“類”下拉列表框中選擇“list-1”。參照同樣的方法設置其他7個應用列表的樣式13、在“轉賬到支付寶”文字中單擊鼠標，在“標簽選擇器”中單擊“<a>”按鈕，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#contentullia:hover”，然后單擊“確定”按鈕，打開“#contentullia:hover的CSS規則定義”對話框，按要求設置CSS樣式。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：CSS背景；背景重復演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務4活動2制作淘寶登錄頁面課題類型理論+實作課時安排2上課時間教學目標1.了解background屬性的使用2.靈活運用背景CSS樣式制作淘寶登錄頁面教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.CSS背景樣式。2.背景重復（background-repeat）。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求結合背景相關CSS樣式，完成淘寶登錄頁面制作，如下圖所示，完成后以“task6-4-2.html”為文件名保存到“task6-4”文件夾。二、師生討論學習新知識1、背景（background）如果需要同時設置多個背景屬性，可以使用background簡寫背景樣式，如下圖所示。三、教師演示活動實施過程并讓學生完成活動任務1、打開DreamweaverCS6并新建一個HTML文檔，切換至“設計”視圖，更改文檔標題為“淘寶網-淘！我喜歡”，以“task6-4-2.html”為文件名保存到“task6-4”文件夾。2、在“屬性”面板中單擊“頁面屬性”按鈕，打開“頁面屬性”對話框，按要求在“外觀”選項卡中設置相應屬性。3、使用Div+CSS對淘寶登錄頁面進行布局操作。4、使用ul、li制作登錄表單。5、使用CSS對表單進行美化操作。詳細制作過程參考教材相關操作步驟。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果閱讀知識窗：background屬性演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記廣東省×××職業技術學校學科教案本TeachingPlan20年———20年學年度學期The(1st/2na)SemesteroftheAcademicYearfrom20to20________________________________________________________________網頁制作項目實訓教程學校（School）網頁制作項目實訓教程學科（Subject）_______________________________年級（Grade）______________________________________________________________教師（Teacher）_______________________________重慶大學出版社制

《網頁制作項目實訓教程》目錄注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②注意：①按住Ctrl鍵后單擊每個任務即可跳轉到對應的教案②單擊按鈕可返回目錄③頁面設置參數為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務1HYPERLINK活動2制作導航欄任務2HYPERLINK的內容”文字刪除，完成頁頭的布局操作。6、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在標簽之后”，在第2個下拉列表框中選擇“<divid=”top”>”，在“ID”名框中輸入“banner”，其余參照4-5步操作，完成banner與其他部分的布局。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務1活動2制作導航欄課題類型理論+實作課時安排2上課時間教學目標1.進一步鞏固項目列表的使用2.靈活運用所學知識完成導航欄的制作教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.Div+CSS網頁布局思想的運用。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開活動1中完成的“index.html”文件，完成導航欄及頁頭部分的制作，完成后以原文件名保存。二、師生討論案例實現思路1、教師展示案例效果2、分析討論案例實現思路3、教師小結三、教師演示活動實施過程并讓學生完成活動任務1、在DreamweaverCS6軟件中打開“index.html”文件，在“CSS樣式”面板中單擊“全部”按鈕，在“所有規則”框中雙擊“#top”，打開“#top的CSS規則定義”對話框，將背景顏色清除，并設置下邊框樣式。2、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標簽之后”，在第2個下拉列表框中選擇“<divid=”top”>”，在“ID”名框中輸入“nav”，然后單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#nav的CSS規則定義”對話框，按要求設置CSS樣式。3、將“此處顯示id"nav"的內容”文字刪除，然后依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標簽之后”，在第2個下拉列表框中選擇“<divid=”nav”>”，在“類”名框中輸入“logo”，然后單擊“確定”按鈕。4、選擇“此處顯示class"logo"的內容”文字，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#top#nav.logo的CSS規則定義”對話框，按要求設置CSS樣式，將“此處顯示class"logo"的內容”文字刪除，并在其中插入Logo圖片“logo.png”。5、在logo區域的后面單擊鼠標，將光標定位到logo區域的后面，輸入“網站首頁”文字，然后按回車鍵，輸入“關于我們”，按同樣方法，依次輸入“產品中心”、“店鋪展示”、“品牌資訊”、“加盟中心”。6、選擇剛剛輸入的文字，在“屬性”面板中單擊“HTML”按鈕，切換到“HTML”選項卡，然后單擊“項目列表”按鈕，將選擇的文字轉換為項目列表，并為輸入的文字分別加空鏈接。7、在任一輸入的文字中單擊鼠標，在“標簽選擇器”中單擊“ul”，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#top#navul的CSS規則定義”對話框，按要求設置CSS樣式。8、在任一輸入的文字中單擊鼠標，在“標簽選擇器”中單擊“li”，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#top#navulli的CSS規則定義”對話框，按要求設置CSS樣式。9、在任一輸入的文字中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#top#navullia的CSS規則定義”對話框，按要求設置CSS樣式。10、在任一輸入的文字中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#top#navullia:hover”，然后單擊“確定”按鈕，打開“#top#navullia:hover的CSS規則定義”對話框，按要求設置CSS樣式。11、在“CSS樣式”面板的“所有規則”框中雙擊“#banner”，打開“#banner的CSS規則定義”對話框，將背景顏色清除，按要求設置背景樣式。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務2活動1新聞列表部分布局操作課題類型理論+實作課時安排2上課時間教學目標1.靈活運用所學知識對新聞列表部分進行布局操作教學重點1教學難點1輔助資源課件、多媒體、網絡復習引入1.文字導航的制作思路。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開任務1中完成的“index.html”文件，完成新聞列表部分的布局操作及左側部分的制作，完成后以原文件名保存。二、師生討論案例實現思路1、教師展示案例效果2、分析討論案例實現思路3、教師小結三、教師演示活動實施過程并讓學生完成活動任務1、在DreamweaverCS6軟件中打開“index.html”文件，將“CSS樣式”面板切換到“全部”選項卡，在“所有規則”框中雙擊“#news”，打開“#news的CSS規則定義”對話框，將背景顏色清除。2、依次單擊“插入”“布局對象”“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標簽之后”，在第2個下拉列表框中選擇“<divid=”news”>”，在“ID”名框中輸入“left”，然后單擊“確定”按鈕。3、選擇“此處顯示id"left"的內容”文字，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#news#left的CSS規則定義”對話框，按要求設置CSS樣式，將“此處顯示id"left"的內容”文字刪除，并在其中插入圖片“news-left.jpg”。4、依次單擊“插入”->“布局對象”->“Div標簽”菜單命令，打開的“插入Div標簽”對話框，在“插入”項第1個下拉列表框中選擇“在結束標簽之前”，在第2個下拉列表框中選擇“<divid=”news”>”，在“ID”名框中輸入“right”，然后單擊“確定”按鈕。5、選擇“此處顯示id"right"的內容”文字，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#news#right的CSS規則定義”對話框，按要求設置CSS樣式。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務2活動2制作新聞列表課題類型理論+實作課時安排2上課時間教學目標1.進一步鞏固項目列表的使用2.靈活運用所學知識完成新聞列表的制作教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.Div+CSS網頁布局思想的運用。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開活動1中完成的“index.html”文件，完成新聞列表的制作，完成后以原文件名保存。二、師生討論案例實現思路1、教師展示案例效果2、分析討論案例實現思路3、教師小結三、教師演示活動實施過程并讓學生完成活動任務1、在DreamweaverCS6軟件中打開“index.html”文件，將“此處顯示id"right"的內容”文字刪除，輸入新聞列表區的標題文字“品牌資訊”。2、選擇輸入的標題文字“品牌資訊”，將“屬性”面板切換到“HTML”選項卡，在“格式”下拉列表框中選擇“標題3”。3、按回車鍵，依次輸入如效果圖所示的10條新聞標題文字，并為每條新聞標題文字添加空鏈接，然后選擇輸入的10條新聞標題文字，在“屬性”面板中單擊“項目列表”按鈕，將其轉換為項目列表。4、在標題文字“品牌資訊”中單擊鼠標，將光標定位到標題中，在“CSS樣式”面板中的“所有規則”列表框中選擇“#news#right”，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#news#righth3的CSS規則定義”對話框，按要求設置CSS樣式。5、在任一新聞標題中單擊鼠標，在“標簽選擇器”中單擊“<ul>”，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#news#rightul的CSS規則定義”對話框，按要求設置CSS樣式。6、在任一新聞標題中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#news#rightullia的CSS規則定義”對話框，按要求設置CSS樣式。7、在任一新聞標題中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#news#rightullia:hover”，如所示，然后單擊“確定”按鈕，打開“#news#rightullia:hover的CSS規則定義”對話框，按要求設置CSS樣式。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務3活動1制作夏季新品區課題類型理論+實作課時安排2上課時間教學目標1.進一步鞏固所學知識2.靈活運用所學知識完成夏季新品區的制作教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.新聞列表的制作思路。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開任務2中完成的“index.html”文件，完成夏季新品區的制作，完成后以原文件名保存。二、師生討論案例實現思路1、教師展示案例效果2、分析討論案例實現思路3、教師小結三、教師演示活動實施過程并讓學生完成活動任務1、在DreamweaverCS6軟件中打開“index.html”文件，將“CSS樣式”面板切換到“全部”選項卡，在“所有規則”框中雙擊“#product”，打開“#product的CSS規則定義”對話框，將背景顏色清除。2、在夏季新品區布局區域單擊鼠標，輸入標題文字“夏季新品”，然后按回車鍵另起一行，輸入英文標題文字“Summer”。選擇相應的標題文字，在“屬性”面板中將標題文字“夏季新品”設置為“標題3”格式，將英文標題文字“Summer”設置為“標題4”格式。3、在英文標題文字“Summer”后面單擊鼠標，再按回車鍵另起一行。依次單擊“插入”->“HTML”->“文本對象”->“定義列表”菜單命令，在頁面插入定義列表，然后依次單擊“插入->“圖像”菜單命令，插入“pic-1.jpg”圖片，并給圖片添加空鏈接。4、在插入的圖片后面單擊鼠標，按回車鍵另起一行，輸入產品標題文字“兒童裝迪士尼女童T恤2019夏天新款圓領短袖洋氣親子裝”，并給輸入的產品標題文字添加空鏈接。再按回車鍵另起一行，輸入“查看詳情”，并添加空鏈接。切換到“代碼”視圖。5、將“查看詳情”行的<dt></dt>標簽對改為<dd></dd>標簽對，并分別給dt、dd標簽添加class屬性值。完成第1個產品相關信息的添加。6、選擇<dl></dl>標簽對中的內容，執行拷貝操作，并修改圖片與文字，完成其余5個產品相關信息的添加。7、切換到“設計”視圖，在標題文字“夏季新品”中單擊鼠標，將光標定位到標題中，在“CSS樣式”面板中的“所有規則”列表框中選擇“#product”，然后單擊“CSS樣式”面板中的“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#producth3的CSS規則定義”對話框，按要求設置CSS樣式。8、在英文標題文字“Summer”中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#producth4的CSS規則定義”對話框，按要求設置CSS樣式。9、單擊選擇任一產品圖片，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#productdl.picaimg的CSS規則定義”對話框，按要求設置CSS樣式。10、在任一產品中單擊鼠標，在“標簽選擇器”中單擊“<dl>”，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#productdl的CSS規則定義”對話框，按要求設置CSS樣式。11、在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#productdl.first”，然后單擊“確定”按鈕，打開“#productdl.first的CSS規則定義”對話框，按要求設置CSS樣式。12、單擊第1個產品圖片，在“標簽選擇器”中確認“<dl>”被選擇，然后在“屬性”面板的“類”下拉列表框中選擇“first”，給第1個產品的<dl>標簽添加“first”類屬性；用同樣的方法給第4個產品的<dl>標簽添加“first”類屬性。13、在第2個產品標題文字中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#productdl.desca的CSS規則定義”對話框，按要求設置CSS樣式。14、在第2個產品標題文字中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#productdl.desca:hover”，然后單擊“確定”按鈕，打開“#productdl.desca:hover的CSS規則定義”對話框，按要求設置CSS樣式。15、在第2個產品的“查看詳情”文字中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中單擊“確定”按鈕，打開“#productdl.morea的CSS規則定義”對話框，按要求設置CSS樣式。16、在第2個產品的“查看詳情”文字中單擊鼠標，在“CSS樣式”面板中單擊“新建CSS規則”按鈕，在打開的“新建CSS規則”對話框中的“選擇器名稱”框中輸入“#productdl.morea:hover”，然后單擊“確定”按鈕，打開“#productdl.morea:hover的CSS規則定義”對話框，按要求設置CSS樣式。布置任務：讓學生明確本次課的內容討論：如何實現該案例效果演示：教師演示活動實施過程實訓活動：學生練習及點評作業布置填寫提交實訓報告和實訓表格預習作業：預習下一節內容教學后記教學課題任務3活動2制作分類導航區課題類型理論+實作課時安排2上課時間教學目標1.進一步鞏固所學知識2.靈活運用所學知識完成分類導航區的制作教學重點1、2教學難點2輔助資源課件、多媒體、網絡復習引入1.圖文列表的制作思路。教學手段教學過程師生互動活動設計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開活動1中完成的“index.html”文件，完成分類導航區的制作，完成后以原文件名保存。二、師生討論案例實現思路1、教師展示案例效果2、分析討論案例實現思路3、教師小結三、教師演示活動實施過程并讓學生完成活動任務1、在DreamweaverCS6軟件中打開“index.html”文件，將“CSS樣式”面板切換到“全部”選項卡，在“所有規則”框中雙擊“#category”，打開“#category的CSS規則定義”對話框，將背景顏色清除。2、在分類導航區布局區域單擊鼠標，輸入標題文字“產品分類”，然后按回車鍵另起一行，輸入英文標題文字“Category”。選