《網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程》 教案 項(xiàng)目5 制作框架網(wǎng)頁；項(xiàng)目6 使用CSS美化網(wǎng)頁效果；項(xiàng)目7 使用Div+CSS制作網(wǎng)頁

PAGEPAGE0廣東省×××職業(yè)技術(shù)學(xué)校學(xué)科教案本TeachingPlan20年———20年學(xué)年度學(xué)期The(1st/2na)SemesteroftheAcademicYearfrom20to20________________________________________________________________網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程學(xué)校（School）網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程學(xué)科（Subject）_______________________________年級（Grade）______________________________________________________________教師（Teacher）_______________________________重慶大學(xué)出版社制

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

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