網(wǎng)頁制作項目實訓(xùn)教程 教案 項目7 使用Div+CSS制作網(wǎng)頁

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

《網(wǎng)頁制作項目實訓(xùn)教程》目錄注意：①按住Ctrl鍵后單擊每個任務(wù)即可跳轉(zhuǎn)到對應(yīng)的教案②單擊注意：①按住Ctrl鍵后單擊每個任務(wù)即可跳轉(zhuǎn)到對應(yīng)的教案②單擊按鈕可返回目錄③頁面設(shè)置參數(shù)為：紙張：B5頁邊距左：1.5頁邊距右：1.5任務(wù)1HYPERLINK活動2制作導(dǎo)航欄任務(wù)2HYPERLINK的內(nèi)容”文字刪除，完成頁頭的布局操作。6、依次單擊“插入”->“布局對象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對話框，在“插入”項第1個下拉列表框中選擇“在標(biāo)簽之后”，在第2個下拉列表框中選擇“<divid=”top”>”，在“ID”名框中輸入“banner”，其余參照4-5步操作，完成banner與其他部分的布局。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)1活動2制作導(dǎo)航欄課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.進一步鞏固項目列表的使用2.靈活運用所學(xué)知識完成導(dǎo)航欄的制作教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.Div+CSS網(wǎng)頁布局思想的運用。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開活動1中完成的“index.html”文件，完成導(dǎo)航欄及頁頭部分的制作，完成后以原文件名保存。二、師生討論案例實現(xiàn)思路1、教師展示案例效果2、分析討論案例實現(xiàn)思路3、教師小結(jié)三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、在DreamweaverCS6軟件中打開“index.html”文件，在“CSS樣式”面板中單擊“全部”按鈕，在“所有規(guī)則”框中雙擊“#top”，打開“#top的CSS規(guī)則定義”對話框，將背景顏色清除，并設(shè)置下邊框樣式。2、依次單擊“插入”->“布局對象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標(biāo)簽之后”，在第2個下拉列表框中選擇“<divid=”top”>”，在“ID”名框中輸入“nav”，然后單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中單擊“確定”按鈕，打開“#nav的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。3、將“此處顯示id"nav"的內(nèi)容”文字刪除，然后依次單擊“插入”->“布局對象”->“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標(biāo)簽之后”，在第2個下拉列表框中選擇“<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”選項卡，然后單擊“項目列表”按鈕，將選擇的文字轉(zhuǎn)換為項目列表，并為輸入的文字分別加空鏈接。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)容討論：如何實現(xiàn)該案例效果演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)2活動1新聞列表部分布局操作課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.靈活運用所學(xué)知識對新聞列表部分進行布局操作教學(xué)重點1教學(xué)難點1輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.文字導(dǎo)航的制作思路。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開任務(wù)1中完成的“index.html”文件，完成新聞列表部分的布局操作及左側(cè)部分的制作，完成后以原文件名保存。二、師生討論案例實現(xiàn)思路1、教師展示案例效果2、分析討論案例實現(xiàn)思路3、教師小結(jié)三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、在DreamweaverCS6軟件中打開“index.html”文件，將“CSS樣式”面板切換到“全部”選項卡，在“所有規(guī)則”框中雙擊“#news”，打開“#news的CSS規(guī)則定義”對話框，將背景顏色清除。2、依次單擊“插入”“布局對象”“Div標(biāo)簽”菜單命令，打開的“插入Div標(biāo)簽”對話框，在“插入”項第1個下拉列表框中選擇“在開始標(biāo)簽之后”，在第2個下拉列表框中選擇“<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)簽”對話框，在“插入”項第1個下拉列表框中選擇“在結(jié)束標(biāo)簽之前”，在第2個下拉列表框中選擇“<divid=”news”>”，在“ID”名框中輸入“right”，然后單擊“確定”按鈕。5、選擇“此處顯示id"right"的內(nèi)容”文字，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中單擊“確定”按鈕，打開“#news#right的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)2活動2制作新聞列表課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.進一步鞏固項目列表的使用2.靈活運用所學(xué)知識完成新聞列表的制作教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.Div+CSS網(wǎng)頁布局思想的運用。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開活動1中完成的“index.html”文件，完成新聞列表的制作，完成后以原文件名保存。二、師生討論案例實現(xiàn)思路1、教師展示案例效果2、分析討論案例實現(xiàn)思路3、教師小結(jié)三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、在DreamweaverCS6軟件中打開“index.html”文件，將“此處顯示id"right"的內(nèi)容”文字刪除，輸入新聞列表區(qū)的標(biāo)題文字“品牌資訊”。2、選擇輸入的標(biāo)題文字“品牌資訊”，將“屬性”面板切換到“HTML”選項卡，在“格式”下拉列表框中選擇“標(biāo)題3”。3、按回車鍵，依次輸入如效果圖所示的10條新聞標(biāo)題文字，并為每條新聞標(biāo)題文字添加空鏈接，然后選擇輸入的10條新聞標(biāo)題文字，在“屬性”面板中單擊“項目列表”按鈕，將其轉(zhuǎn)換為項目列表。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)容討論：如何實現(xiàn)該案例效果演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)3活動1制作夏季新品區(qū)課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.進一步鞏固所學(xué)知識2.靈活運用所學(xué)知識完成夏季新品區(qū)的制作教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.新聞列表的制作思路。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開任務(wù)2中完成的“index.html”文件，完成夏季新品區(qū)的制作，完成后以原文件名保存。二、師生討論案例實現(xiàn)思路1、教師展示案例效果2、分析討論案例實現(xiàn)思路3、教師小結(jié)三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、在DreamweaverCS6軟件中打開“index.html”文件，將“CSS樣式”面板切換到“全部”選項卡，在“所有規(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個產(chǎn)品相關(guān)信息的添加。6、選擇<dl></dl>標(biāo)簽對中的內(nèi)容，執(zhí)行拷貝操作，并修改圖片與文字，完成其余5個產(chǎn)品相關(guān)信息的添加。7、切換到“設(shè)計”視圖，在標(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個產(chǎn)品圖片，在“標(biāo)簽選擇器”中確認“<dl>”被選擇，然后在“屬性”面板的“類”下拉列表框中選擇“first”，給第1個產(chǎn)品的<dl>標(biāo)簽添加“first”類屬性；用同樣的方法給第4個產(chǎn)品的<dl>標(biāo)簽添加“first”類屬性。13、在第2個產(chǎn)品標(biāo)題文字中單擊鼠標(biāo)，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中單擊“確定”按鈕，打開“#productdl.desca的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。14、在第2個產(chǎn)品標(biāo)題文字中單擊鼠標(biāo)，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中的“選擇器名稱”框中輸入“#productdl.desca:hover”，然后單擊“確定”按鈕，打開“#productdl.desca:hover的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。15、在第2個產(chǎn)品的“查看詳情”文字中單擊鼠標(biāo)，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中單擊“確定”按鈕，打開“#productdl.morea的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。16、在第2個產(chǎn)品的“查看詳情”文字中單擊鼠標(biāo)，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中的“選擇器名稱”框中輸入“#productdl.morea:hover”，然后單擊“確定”按鈕，打開“#productdl.morea:hover的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。布置任務(wù)：讓學(xué)生明確本次課的內(nèi)容討論：如何實現(xiàn)該案例效果演示：教師演示活動實施過程實訓(xùn)活動：學(xué)生練習(xí)及點評作業(yè)布置填寫提交實訓(xùn)報告和實訓(xùn)表格預(yù)習(xí)作業(yè)：預(yù)習(xí)下一節(jié)內(nèi)容教學(xué)后記

教學(xué)課題任務(wù)3活動2制作分類導(dǎo)航區(qū)課題類型理論+實作課時安排2上課時間教學(xué)目標(biāo)1.進一步鞏固所學(xué)知識2.靈活運用所學(xué)知識完成分類導(dǎo)航區(qū)的制作教學(xué)重點1、2教學(xué)難點2輔助資源課件、多媒體、網(wǎng)絡(luò)復(fù)習(xí)引入1.圖文列表的制作思路。教學(xué)手段教學(xué)過程師生互動活動設(shè)計課件討論實作課件舉例討論課件實作一、教師布置活動要求如下圖所示，打開活動1中完成的“index.html”文件，完成分類導(dǎo)航區(qū)的制作，完成后以原文件名保存。二、師生討論案例實現(xiàn)思路1、教師展示案例效果2、分析討論案例實現(xiàn)思路3、教師小結(jié)三、教師演示活動實施過程并讓學(xué)生完成活動任務(wù)1、在DreamweaverCS6軟件中打開“index.html”文件，將“CSS樣式”面板切換到“全部”選項卡，在“所有規(guī)則”框中雙擊“#category”，打開“#category的CSS規(guī)則定義”對話框，將背景顏色清除。2、在分類導(dǎo)航區(qū)布局區(qū)域單擊鼠標(biāo)，輸入標(biāo)題文字“產(chǎn)品分類”，然后按回車鍵另起一行，輸入英文標(biāo)題文字“Category”。選擇相應(yīng)的標(biāo)題文字，在“屬性”面板中將標(biāo)題文字“產(chǎn)品分類”設(shè)置為“標(biāo)題3”格式，將英文標(biāo)題文字“Category”設(shè)置為“標(biāo)題4”格式。3、在英文標(biāo)題文字“Category”后面單擊鼠標(biāo)，再按回車鍵另起一行。依次單擊“插入”->“HTML”->“文本對象”->“定義列表”菜單命令，在頁面插入定義列表，然后依次單擊“插入”“圖像”菜單命令，插入“cate-1.png”圖片，并給圖片添加空鏈接。4、在插入的圖片后面單擊鼠標(biāo)，按回車鍵另起一行，輸入文字“女童專區(qū)”，并給輸入的標(biāo)題文字添加空鏈接。然后在“標(biāo)簽選擇器”中單擊“<dl>”，選擇<dl></dl>標(biāo)簽對中的內(nèi)容，在“代碼”視圖中執(zhí)行拷貝操作，并修改圖片與文字，完成其余3個分類信息的添加。5、切換到“設(shè)計”視圖，參照活動1相關(guān)操作完成分類導(dǎo)航區(qū)標(biāo)題文字“產(chǎn)品分類”與英文標(biāo)題文字“Category”的樣式設(shè)置。6、在“女童專區(qū)”文本中單擊鼠標(biāo)，在“標(biāo)簽選擇器”中單擊“<dl>”，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中單擊“確定”按鈕，打開“#categorydl的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。7、在“女童專區(qū)”文本中單擊鼠標(biāo)，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中單擊“確定”按鈕，打開“#categorydldda的CSS規(guī)則定義”對話框，按要求設(shè)置CSS樣式。8、在“女童專區(qū)”文本中單擊鼠標(biāo)，在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕，在打開的“新建CSS規(guī)則”對話框中的“選擇器名稱”