Web前端開發(fā)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-教案全套 劉錫冬 任務(wù)01-10 網(wǎng)站設(shè)計(jì)與開發(fā)起步-網(wǎng)頁中插入視頻和音頻

《網(wǎng)頁設(shè)計(jì)與開發(fā)》課程教案-32-網(wǎng)頁設(shè)計(jì)與開發(fā)教案授課專業(yè)：XXXX專業(yè)課程性質(zhì)：專業(yè)基礎(chǔ)課學(xué)時(shí)數(shù)：64學(xué)時(shí)目錄課程基本信息 2任務(wù)01網(wǎng)站設(shè)計(jì)與開發(fā)起步 4子任務(wù)01-1網(wǎng)站設(shè)計(jì)與開發(fā)起步 4子任務(wù)01-2制作第一個(gè)網(wǎng)頁 8任務(wù)02網(wǎng)頁的藍(lán)圖——簡單布局 12子任務(wù)02-1使用CSS裝飾網(wǎng)頁 12子任務(wù)02-2巧用選擇器調(diào)兵遣將 16子任務(wù)02-3使用盒模型劃分頁面 20子任務(wù)02-4使用BFC隔離空間 26任務(wù)03網(wǎng)頁的藍(lán)圖——復(fù)雜布局 30子任務(wù)03-1浮動(dòng)布局兩欄式頁面 30子任務(wù)03-2DIV+CSS布局網(wǎng)上商城首頁 34子任務(wù)03-3網(wǎng)格布局網(wǎng)站商城首頁 38任務(wù)04向網(wǎng)頁中插入圖像和文本 44子任務(wù)04-1網(wǎng)站首頁中圖像的應(yīng)用 44子任務(wù)04-2網(wǎng)站首頁中文本的應(yīng)用 49任務(wù)05向網(wǎng)站首頁添加導(dǎo)航 54子任務(wù)05-1頁面中超鏈接的使用 54子任務(wù)05-2一級(jí)導(dǎo)航菜單的設(shè)計(jì)開發(fā) 58子任務(wù)05-3二級(jí)彈出式菜單的定位 61任務(wù)06網(wǎng)頁中列表的應(yīng)用 65子任務(wù)06-1認(rèn)識(shí)列表 65子任務(wù)06-2使用列表制作多級(jí)導(dǎo)航 70任務(wù)07使用彈性盒布局二級(jí)導(dǎo)航菜單 74任務(wù)08網(wǎng)頁中表格元素的應(yīng)用 78任務(wù)09網(wǎng)頁中表單元素的應(yīng)用 83任務(wù)10網(wǎng)頁中插入視頻和音頻 88

課程基本信息課程名稱網(wǎng)頁設(shè)計(jì)與開發(fā)授課專業(yè)云計(jì)算技術(shù)與應(yīng)用專業(yè)群內(nèi)所有專業(yè)課程類型專業(yè)基礎(chǔ)課程開課學(xué)期大學(xué)一年級(jí)第一學(xué)期授課學(xué)時(shí)64學(xué)時(shí)課程定位《網(wǎng)頁設(shè)計(jì)與開發(fā)》是云計(jì)算技術(shù)與應(yīng)用專業(yè)群“平臺(tái)+模塊”人才培養(yǎng)體系中的平臺(tái)課程，是專業(yè)群內(nèi)軟件技術(shù)專業(yè)、大數(shù)據(jù)技術(shù)與應(yīng)用專業(yè)、云計(jì)算技術(shù)與應(yīng)用、物聯(lián)網(wǎng)應(yīng)用技術(shù)、人工智能技術(shù)服務(wù)專業(yè)等所有專業(yè)的專業(yè)基礎(chǔ)課。本課程立足云計(jì)算技術(shù)與應(yīng)用專業(yè)群內(nèi)各專業(yè)人才培養(yǎng)方案，面向“Web前端開發(fā)工程師”的初級(jí)職業(yè)崗位需求，注重培養(yǎng)學(xué)生的工匠精神和團(tuán)隊(duì)合作意識(shí)，圍繞著一個(gè)實(shí)際項(xiàng)目——網(wǎng)上商城的設(shè)計(jì)與開發(fā)的需求來選擇課程內(nèi)容，真實(shí)模擬企業(yè)中一個(gè)網(wǎng)站開發(fā)的全過程。針對(duì)職業(yè)能力的培養(yǎng)要求以及實(shí)際項(xiàng)目的工作過程，課程設(shè)計(jì)了10個(gè)教學(xué)任務(wù)，每個(gè)教學(xué)任務(wù)又包含一個(gè)或多個(gè)子任務(wù)，共4學(xué)分，64個(gè)課時(shí)。先修課程無后續(xù)課程JavaScript程序設(shè)計(jì)、Javaweb程序設(shè)計(jì)、微信小程序開發(fā)等（不同專業(yè)有所差異）課程內(nèi)容《網(wǎng)頁設(shè)計(jì)與開發(fā)》課程是云計(jì)算技術(shù)與應(yīng)用專業(yè)群學(xué)生的專業(yè)基礎(chǔ)課程，內(nèi)容涵蓋HTML5常用標(biāo)簽、CSS樣式表、盒子模型、DIV+CSS布局、網(wǎng)格布局、超鏈接、列表、表格、表單等知識(shí)點(diǎn)。主要分為以下幾個(gè)項(xiàng)目，根據(jù)不同專業(yè)生源情況部分項(xiàng)目可選：項(xiàng)目1認(rèn)識(shí)網(wǎng)站和網(wǎng)頁項(xiàng)目2網(wǎng)頁的藍(lán)圖——簡單布局項(xiàng)目3網(wǎng)頁的藍(lán)圖——復(fù)雜布局項(xiàng)目4向網(wǎng)頁中插入圖像和文本項(xiàng)目5向網(wǎng)站首頁添加導(dǎo)航項(xiàng)目6網(wǎng)頁中列表的應(yīng)用項(xiàng)目7使用彈性盒布局二級(jí)導(dǎo)航菜單（可選）項(xiàng)目8網(wǎng)頁中表格元素的應(yīng)用 項(xiàng)目9網(wǎng)頁中表單元素的應(yīng)用項(xiàng)目10網(wǎng)頁中插入視頻和音頻選用教材教材：《Web前端開發(fā)項(xiàng)目教程（HTML5+CSS3+JavaScript）（微課版）》，劉錫冬王愛華薛現(xiàn)偉主編，人民郵電出版社該教材為云計(jì)算產(chǎn)業(yè)技術(shù)與應(yīng)用專業(yè)群“平臺(tái)+模塊”項(xiàng)目化教學(xué)改革的成果之一。教材配有教輔平臺(tái)，平臺(tái)提供課前預(yù)習(xí)、課中互動(dòng)、課后作業(yè)等功能，微課視頻、題庫等資源豐富，適合開展線上+線下混合式教學(xué)。主要參考資源：W3school在線教程/資源平臺(tái)職教云平臺(tái)：/cms/courseDetails/index.htm?classId=30acdee8067b4045b352984abf1fcd70授課方式線上+線下混合式教學(xué)

任務(wù)01網(wǎng)站設(shè)計(jì)與開發(fā)起步子任務(wù)01-1網(wǎng)站設(shè)計(jì)與開發(fā)起步教案名稱子任務(wù)1-1網(wǎng)站設(shè)計(jì)與開發(fā)起步計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)網(wǎng)站和網(wǎng)頁的基本概念和工作原理、各種常見主流瀏覽器以及Chrome瀏覽器下的開發(fā)者工具的使用。并且深入理解網(wǎng)頁標(biāo)準(zhǔn)化的意義，將Web標(biāo)準(zhǔn)作為我們網(wǎng)站開發(fā)人員共同遵循的準(zhǔn)則，來指導(dǎo)我們后續(xù)的開發(fā)工作。知識(shí)目標(biāo)1.了解網(wǎng)站設(shè)計(jì)開發(fā)的基本概念；2.理解Web標(biāo)準(zhǔn)；能力目標(biāo)1.能夠分析、規(guī)劃網(wǎng)站結(jié)構(gòu)；2.能夠在Chrome瀏覽器下查看網(wǎng)站結(jié)構(gòu)；素質(zhì)目標(biāo)1.具有互聯(lián)網(wǎng)從業(yè)人員的法治思維；2.樹立科技興國的志向；3.樹立標(biāo)準(zhǔn)意識(shí)，遵守項(xiàng)目開發(fā)規(guī)范；4.具有網(wǎng)站開發(fā)的軟件工程觀。教學(xué)重點(diǎn)規(guī)劃網(wǎng)站的目錄結(jié)構(gòu)教學(xué)難點(diǎn)網(wǎng)站開發(fā)設(shè)計(jì)的基本概念信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】查找資料了解基本概念：網(wǎng)站、網(wǎng)頁、瀏覽器完成教學(xué)平臺(tái)問卷：1.是否學(xué)習(xí)過HTML?如果學(xué)習(xí)過了解多少？2.是否能夠熟練操作電腦軟件？【課中】課程簡介1.課程的地位和作用：專業(yè)群平臺(tái)課，對(duì)接Web前端開發(fā)工程師崗位需求2.課程的主要學(xué)習(xí)內(nèi)容：HTML5+CSS33.課程的教學(xué)方式：項(xiàng)目化教學(xué)4.項(xiàng)目的考核方式：過程化考核（平時(shí)小項(xiàng)目+期末綜合項(xiàng)目）課程導(dǎo)入網(wǎng)頁展示與認(rèn)識(shí)（瀏覽百度官網(wǎng)、門戶網(wǎng)站、小米網(wǎng)上商城、Apple官網(wǎng)、學(xué)校官網(wǎng)等網(wǎng)站）（10分鐘）小組討論：從網(wǎng)站布局結(jié)構(gòu)、色彩搭配、導(dǎo)航欄的設(shè)計(jì)、用戶體驗(yàn)等對(duì)網(wǎng)站主頁進(jìn)行分析討論引出本門課程的任務(wù)：完成網(wǎng)上商城網(wǎng)站首頁及內(nèi)部主要頁面任務(wù)提出在學(xué)習(xí)網(wǎng)頁開發(fā)技術(shù)之前需要了解網(wǎng)站在互聯(lián)網(wǎng)上的工作原理以及網(wǎng)站開發(fā)人員必須要遵循的萬維網(wǎng)WWW標(biāo)準(zhǔn)，認(rèn)識(shí)各種常用瀏覽器，學(xué)會(huì)使用瀏覽器的開發(fā)者工具查看網(wǎng)站的結(jié)構(gòu)。（5分鐘）知識(shí)點(diǎn)講解一、相關(guān)概念（15分鐘）同學(xué)分享課前查閱資料獲取的信息：網(wǎng)站、網(wǎng)頁、瀏覽器的概念網(wǎng)頁：網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺(tái)，它可以存放在世界上任何一臺(tái)計(jì)算機(jī)中，是萬維網(wǎng)（WorldWideWeb，全球廣域網(wǎng)，簡稱web）中的一個(gè)頁面。網(wǎng)站是域名、空間服務(wù)器、域名解析、網(wǎng)站程序、數(shù)據(jù)庫等的集合，涉及到一系列軟硬件技術(shù)，近年來隨著云計(jì)算技術(shù)的迅猛發(fā)展，租用云服務(wù)器搭建虛擬主機(jī)使得網(wǎng)站建設(shè)更加普及和大眾化。網(wǎng)頁要通過網(wǎng)頁瀏覽器來閱讀。二、網(wǎng)頁的標(biāo)準(zhǔn)化（15分鐘）小組討論：手機(jī)數(shù)據(jù)接口有標(biāo)準(zhǔn)、視頻格式有標(biāo)準(zhǔn)，網(wǎng)頁需不需要標(biāo)準(zhǔn)呢？全球的網(wǎng)頁設(shè)計(jì)人員和瀏覽器制造商之間有一個(gè)共同的web標(biāo)準(zhǔn)，遵守這個(gè)標(biāo)準(zhǔn)的網(wǎng)頁，在所有遵守W3C（萬維網(wǎng)聯(lián)盟）標(biāo)準(zhǔn)的瀏覽器上都可以獲得一致的表現(xiàn)可以完全不必?fù)?dān)心瀏覽器兼容問題。Web標(biāo)準(zhǔn)下的網(wǎng)頁設(shè)計(jì)（結(jié)構(gòu)、表現(xiàn)、行為的分離）項(xiàng)目實(shí)踐在Chrome瀏覽器下，在地址欄中輸入http：//，打開網(wǎng)站首頁，同時(shí)按F12，進(jìn)入調(diào)試狀態(tài)，點(diǎn)擊source菜單，查看該網(wǎng)站的目錄結(jié)構(gòu)。（20分鐘）項(xiàng)目拓展查看百度、淘寶等大型網(wǎng)站的網(wǎng)站目錄結(jié)構(gòu)，并思考，網(wǎng)站部署在哪里？是不是一個(gè)網(wǎng)站只能部署在一臺(tái)服務(wù)器上？（20分鐘）小結(jié)每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，并分享?！菊n后】完成教學(xué)平臺(tái)作業(yè)：在網(wǎng)上搜索“中華魯商”、“魯商博物館”等圖文信息，下載到本地后分類保存，并截圖提交至教學(xué)平臺(tái)。通過瀏覽不同類型的網(wǎng)站，使學(xué)生體會(huì)互聯(lián)網(wǎng)時(shí)代媒體傳播的特點(diǎn)，建立網(wǎng)站開發(fā)從業(yè)人員的法治思維。互聯(lián)網(wǎng)起源于1969年的美國，改變了人類的生活方式。引導(dǎo)學(xué)生正確上網(wǎng)，立科技興國的志向，發(fā)揮網(wǎng)絡(luò)價(jià)值。我們從一開始就要樹立標(biāo)準(zhǔn)意識(shí)，從細(xì)微處做起，遵守項(xiàng)目開發(fā)規(guī)范?！安环e硅步，無以至千里”養(yǎng)成良好的學(xué)習(xí)習(xí)慣是邁向成功的第一步。

子任務(wù)01-2制作第一個(gè)網(wǎng)頁教案名稱子任務(wù)01-2制作第一個(gè)網(wǎng)頁計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)通過完成一個(gè)“魯商文化博物館”的網(wǎng)頁來理解并掌握HTML5文檔的基本語法結(jié)構(gòu)，熟悉記事本及HbuilderX編輯器的使用，并且通過實(shí)踐解決簡單的技術(shù)問題。知識(shí)目標(biāo)1.掌握html5文檔的基本格式2.理解web標(biāo)準(zhǔn)能力目標(biāo)1.學(xué)會(huì)使用HBuilderX編輯簡單網(wǎng)頁2.能夠使用HBuilderX發(fā)布網(wǎng)頁素質(zhì)目標(biāo)1.堅(jiān)持文化自信，樹立民族自信心2.樹立標(biāo)準(zhǔn)意識(shí)，遵守項(xiàng)目開發(fā)規(guī)范3.弘揚(yáng)魯商文化“仁智合一”的核心價(jià)值觀教學(xué)重點(diǎn)HTML5文檔的基本模板教學(xué)難點(diǎn)HTML5中的常見標(biāo)簽及屬性應(yīng)用信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】同學(xué)們已經(jīng)在網(wǎng)上搜索了“中華魯商”、“魯商博物館”等圖文素材，了解了什么是魯商文化?！菊n中】課程導(dǎo)入（10分鐘）教師通過教學(xué)平臺(tái)的作業(yè)模塊展示同學(xué)下載的“魯商文化博物館”主題的圖文素材，并點(diǎn)評(píng)。同學(xué)分享什么是魯商文化。任務(wù)提出（5分鐘）本次課我們分別嘗試使用記事本和Hbuilder網(wǎng)頁編輯器，在這兩種編輯環(huán)境下書寫并理解HTML5文檔的基本格式，使用簡單標(biāo)記將我們搜集到的圖文素材放入網(wǎng)頁中，并最終在瀏覽器中瀏覽生成的網(wǎng)頁，完成我們的第一個(gè)網(wǎng)頁！知識(shí)點(diǎn)講解（30分鐘）一、選擇合適的HTML編輯器記事本：初學(xué)者學(xué)習(xí)寫HTML文件時(shí)經(jīng)常會(huì)用到的一個(gè)工具，因?yàn)榫W(wǎng)頁本身就是超鏈接文本文件，在記事本中鍵入HTML代碼后，在“文件”菜單選擇“另存為”命令，將文檔保存為.htm或者.html擴(kuò)展名的文件，使用瀏覽器打開就可以瀏覽網(wǎng)頁了。HBuilderX：是DCloud推出的一款支持HTML5的Web開發(fā)集成開發(fā)環(huán)境，官方自述為“輕如編輯器、強(qiáng)如IDE的合體版本”，體積小、靈活，而且由我國的前端開發(fā)人員編寫，使用方便。二、在HbuilderX中創(chuàng)建網(wǎng)頁分析討論（15分鐘）1.<!DOCTYPE>什么意思？2.HTML文檔的結(jié)構(gòu)也分為head和body，是否可以嵌套？3.文本和圖片放在哪一部分中？4.繪制出HTML5模板的DOM樹結(jié)構(gòu)（即標(biāo)簽的層次結(jié)構(gòu)）知識(shí)點(diǎn)講解（30分鐘）HTML文檔頭部標(biāo)記<head></head>通常<title></title>、<meta/>、<link/>等標(biāo)記可以放在head部分。1.<title></title>設(shè)置頁面標(biāo)題2.<meta/>用于定義頁面中的信息，例如文檔的關(guān)鍵字、作者及描述等，在頭部可以包含任意數(shù)量的<meta/>標(biāo)記3.<link/>引用外部文件HTML文檔主體標(biāo)記<body></body>HTML文檔主體標(biāo)記<body></body>用于定義頁面所要顯示的內(nèi)容，除使用腳本添加的特效之外，瀏覽器頁面所顯示的所有文本、圖像、音頻和視頻等元素都必須位于<body></body>標(biāo)記之間。一個(gè)HTML文檔最多使用一對(duì)<body></body>標(biāo)記，這對(duì)標(biāo)記必須在<head></head>標(biāo)記之后。在body中常用的標(biāo)記有<h1>~<h6>、<p>、<hr>、<br>、<img>、<div>等。引導(dǎo)答疑（20分鐘）項(xiàng)目實(shí)踐（30分鐘）參照以下代碼，在HBuilder中測試title、h2、p等標(biāo)簽的作用，嘗試完成自己的第一個(gè)網(wǎng)頁——魯商文化文字簡介。引導(dǎo)答疑（20分鐘）根據(jù)實(shí)踐中出現(xiàn)地問題有針對(duì)性地解決。小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，并分享?！菊n后】平臺(tái)提交作業(yè)：完成魯商文化主題網(wǎng)頁后，將網(wǎng)頁截圖以及代碼上傳至云平臺(tái)。盡可能嘗試你會(huì)使用的所有標(biāo)簽。魯商文化作為中國歷史上最早形成的中華文化體系，是山東獨(dú)特的商業(yè)文化,深受儒家文化的影響，始終秉承“仁智合一”的價(jià)值觀，有著獨(dú)特的價(jià)值體系?！肮び破涫?，必先利其器”效率高的工具會(huì)起到事半功倍的效果。HBuilder是由國內(nèi)創(chuàng)業(yè)公司DCloud（數(shù)字天堂）推出的一款Web集成開發(fā)環(huán)境，面向中國用戶永久免費(fèi)，絲毫不遜色于國外的眾多前端編輯器。樹立民族自信心。HTML5標(biāo)準(zhǔn)規(guī)范由W3C組織在2014年創(chuàng)建。而創(chuàng)建的成員就包括我們國家的華為、騰訊等十幾個(gè)公司。這說明我們國家的科技實(shí)力正越來越強(qiáng)。提升同學(xué)們民族自豪感?！暗嗡梢源┦变傅沃K可以磨損大石，不是由于它力量強(qiáng)大，而是由于晝夜不舍的滴墜。精益求精，提高審美情趣。

任務(wù)02網(wǎng)頁的藍(lán)圖——簡單布局子任務(wù)02-1使用CSS裝飾網(wǎng)頁教案名稱子任務(wù)02-1使用CSS裝飾網(wǎng)頁計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)三種樣式表的用法。絕大多數(shù)頁面元素都有自己的樣式屬性，這些樣式屬性集合到一起就構(gòu)成了樣式表。知識(shí)目標(biāo)1.理解DIV+CSS網(wǎng)頁布局2.掌握三種CSS樣式表能力目標(biāo)1.學(xué)會(huì)使用DIV+CSS進(jìn)行簡單的頁面布局2.學(xué)會(huì)根據(jù)需要使用三種CSS樣式表素質(zhì)目標(biāo)1.了解并應(yīng)用“分而治之”的思想2.具備精益求精的工匠精神3.弘揚(yáng)社會(huì)主義核心價(jià)值觀和正能量教學(xué)重點(diǎn)三種CSS樣式表教學(xué)難點(diǎn)DIV+CSS網(wǎng)頁布局信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法案例引申法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)02-1：使用CSS裝飾網(wǎng)頁并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）做前端頁面首先要樹立一種“模塊化”思維，就像給報(bào)紙雜志排版一樣，確定好各板塊的大小和位置，再考慮內(nèi)部細(xì)節(jié)。網(wǎng)頁開發(fā)要從大局著手，先學(xué)習(xí)如何擺放這些板塊。任務(wù)提出（10分鐘）我們想將代表不同版塊的大小不一的板塊呈現(xiàn)在網(wǎng)頁中，那么如何才能控制這些頁面元素的外觀呢？DIV+CSS網(wǎng)頁布局知識(shí)點(diǎn)學(xué)習(xí)CSS樣式表（共計(jì)100分鐘）CSS（CascadingStyleSheets，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組樣式設(shè)置規(guī)則，用于控制Web頁面的外觀。樣式表實(shí)現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊(duì)開發(fā)1.CSS樣式表簡介—樣式規(guī)則2.樣式表分類根據(jù)樣式代碼的位置，樣式表有三種使用方法：內(nèi)嵌樣式表外部樣式表行內(nèi)樣式表2.1內(nèi)嵌樣式表使用情境:如果開發(fā)人員只定義當(dāng)前網(wǎng)頁的樣式，可使用內(nèi)嵌樣式表。內(nèi)嵌的樣式表“嵌”在網(wǎng)頁的<head></head>標(biāo)記符內(nèi)。嵌入的樣式表中的樣式只能在當(dāng)前網(wǎng)頁上使用。使用格式：教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（10分鐘）【頭腦風(fēng)暴】在html5中type屬性不再是必需的嗎？<link>標(biāo)簽中的type="text/css"可以省略嗎？2.2外部樣式表使用情境：當(dāng)要在站點(diǎn)多個(gè)網(wǎng)頁上一致地應(yīng)用相同樣式時(shí)，可使用外部樣式表。在外部樣式表中定義樣式，并鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果需要更新樣式，只需在外部樣式表中修改一次，而該更新會(huì)反映到所有與該樣式表相鏈接的網(wǎng)頁上。使用格式：教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（15分鐘）【頭腦風(fēng)暴】如果希望一個(gè)網(wǎng)站中多個(gè)頁面的樣式保持一致，如何解決？2.3內(nèi)聯(lián)樣式表（行內(nèi)樣式）使用情境：如果某個(gè)頁面某個(gè)元素有特殊樣式，可以直接把CSS代碼添加到HTML的標(biāo)記中，即作為HTML標(biāo)記的屬性標(biāo)記存在。通過這種方法，可以很簡單地對(duì)某個(gè)元素單獨(dú)定義樣式。使用格式：教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（10分鐘）分析討論（10分鐘）內(nèi)嵌、內(nèi)聯(lián)和外部樣式有什么優(yōu)勢和劣勢？如何平衡內(nèi)嵌和外部樣式？項(xiàng)目實(shí)踐（20分鐘）分別使用三種樣式表，自行設(shè)計(jì)古詩鑒賞網(wǎng)頁，請(qǐng)嘗試使用所有你會(huì)用的標(biāo)記以及樣式。古詩——將進(jìn)酒作者：李白君不見黃河之水天上來，奔流到海不復(fù)回。君不見高堂明鏡悲白發(fā)，朝如青絲暮成雪。人生得意須盡歡，莫使金樽空對(duì)月。天生我材必有用，千金散盡還復(fù)來。總結(jié)分享（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容。自由分享自己操作過程中遇到的問題和解決辦法，并分享實(shí)驗(yàn)心得。【課后】平臺(tái)提交作業(yè)：將上次課完成的“魯商文化”主題網(wǎng)頁使用CSS美化，并提交到教學(xué)平臺(tái)。軟件工程中常使用這種“分而治之”的思想，即無論多么復(fù)雜的系統(tǒng)，都可以解構(gòu)成小的模塊。同樣，網(wǎng)站開發(fā)時(shí)，無論網(wǎng)頁有多么復(fù)雜的需求和功能，我們都可以將其拆分解構(gòu)成容易實(shí)現(xiàn)的最小單元。平時(shí)我們也可以使用“分而治之”的思想來管理我們的生活和工作。代碼書寫要遵循規(guī)范，小的拼寫錯(cuò)誤可能會(huì)導(dǎo)致頁面崩潰，要養(yǎng)成嚴(yán)謹(jǐn)細(xì)致的工匠精神。內(nèi)容是事物的存在基礎(chǔ)，而形式則是它的表現(xiàn)方式。同一種內(nèi)容在不同條件下可以采取不同的形式。內(nèi)容和形式的辯證關(guān)系對(duì)我們的實(shí)踐活動(dòng)具有重要的方法論意義。古詩詞是中華文化的瑰寶，蘇軾的這首詞氣勢豪放，隨口誦讀即可感受到古代文人境界之宏大。

子任務(wù)02-2巧用選擇器調(diào)兵遣將教案名稱子任務(wù)2-2巧用選擇器調(diào)兵遣將計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)選擇器的用法，從最基本的元素選擇器、class/id選擇器，到交、并、子代、后代，以及其它更豐富的選擇器，定位頁面上的任意元素變得愈發(fā)簡單。知識(shí)目標(biāo)1.理解選擇器2.掌握三種基本選擇器的用法3.掌握擴(kuò)展選擇器的用法能力目標(biāo)1.學(xué)會(huì)使用三種基本選擇器2.靈活運(yùn)用擴(kuò)展選擇器快速命中頁面元素素質(zhì)目標(biāo)1.增強(qiáng)法律意識(shí)，樹立法治觀念2.培養(yǎng)精益求精，科學(xué)嚴(yán)謹(jǐn)?shù)墓そ尘?.培養(yǎng)自主建構(gòu)知識(shí)體系的能力教學(xué)重點(diǎn)基本選擇器和擴(kuò)展選擇器的應(yīng)用教學(xué)難點(diǎn)選擇器的優(yōu)先級(jí)信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)02-2：巧用選擇器調(diào)兵遣將并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（10分鐘）思考：頁面越復(fù)雜，網(wǎng)頁代碼中HTML標(biāo)記就越多，而且同一個(gè)標(biāo)記也會(huì)被多次使用，那么在CSS樣式表中如何準(zhǔn)確地找到其中某一個(gè)標(biāo)記，并設(shè)置其樣式呢？引入：在樣式規(guī)則中，選擇器的功能就是用來選取需設(shè)置樣式的元素的。任務(wù)提出（10分鐘）萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）為Web開發(fā)人員提供了各種各樣的選擇器，從最基本的元素選擇器、class/id選擇器，到交、并、子代、后代，以及其它更豐富的選擇器，定位頁面上的任意元素變得愈發(fā)簡單。知識(shí)點(diǎn)講練（共45分鐘）1.基本選擇器的用法——標(biāo)記名選擇器標(biāo)記名選擇器也稱為類型選擇器，就是用HTML的標(biāo)記名稱作為選擇器，為頁面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。用標(biāo)記名選擇器定義的樣式表對(duì)頁面中該類型的所有標(biāo)記都有效。教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共15分鐘）【頭腦風(fēng)暴】如果希望多個(gè)標(biāo)簽都使用同樣樣式，怎么辦？2.基本選擇器的用法——class類選擇器使用類選擇符可以為多個(gè)相同類型或不同類型的標(biāo)記指定相同的樣式不同類型的標(biāo)記也可以使用同一個(gè)類名，使用類選擇器可以為多個(gè)不同類型的標(biāo)記指定相同的樣式。class類選擇器必須以“.”開頭class類選擇器名稱區(qū)分大小寫，若是定義樣式時(shí)使用選擇器.First，引用樣式時(shí)使用class="first"，則樣式引用無效。教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共15分鐘）【頭腦風(fēng)暴】如果某個(gè)標(biāo)記的各部分內(nèi)容樣式并不相同，怎么辦？基本選擇器的用法——ID選擇器大部分HTML標(biāo)記都可使用標(biāo)準(zhǔn)屬性id為該標(biāo)記指定一個(gè)唯一標(biāo)識(shí)。id選擇器必須以“#”開頭，“#”與id屬性值之間不能有空格。同一頁面中每個(gè)標(biāo)記的id屬性值都必須唯一，一個(gè)id值只對(duì)應(yīng)一個(gè)標(biāo)記，方便腳本中對(duì)象的獲取。id選擇器比類選擇器具有更高的優(yōu)先級(jí)，即當(dāng)id選擇器與類選擇器在樣式定義上發(fā)生沖突時(shí)，優(yōu)先使用id選擇器定義的樣式。教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共15分鐘）【頭腦風(fēng)暴】Id選擇器重復(fù)使用了會(huì)如何？分析討論（10分鐘）在實(shí)際項(xiàng)目中，頁面元素?cái)?shù)量多，層次復(fù)雜，當(dāng)基本選擇器不能夠完全符合需求時(shí)，怎么辦？知識(shí)點(diǎn)自主學(xué)習(xí)（20分鐘）擴(kuò)展選擇器觀看微課視頻擴(kuò)展選擇器部分，并思考以下問題：1.后代選擇題和子代選擇器有什么異同？2.通用選擇器通常用在什么場合？3.并集選擇器什么時(shí)候使用？交流分享（15分鐘）同學(xué)主動(dòng)交流或者分小組交流項(xiàng)目實(shí)踐（30分鐘）完成民法典中部分章節(jié)的頁面修飾。閱讀給定html代碼，并添加樣式，使用合適的選擇器，使之呈現(xiàn)指定的頁面效果。小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充。【課后】平臺(tái)提交作業(yè)：繼續(xù)美化“中華魯商文化”主題網(wǎng)頁，可以通過自主學(xué)習(xí)加入圖片。代碼編寫過程中，注意代碼的精簡，遵循Web開發(fā)規(guī)范，培養(yǎng)學(xué)生精益求精，科學(xué)嚴(yán)謹(jǐn)?shù)墓そ尘?。公民身份信息的唯一性，做遵紀(jì)守法、誠實(shí)守信的好公民，大數(shù)據(jù)時(shí)代對(duì)于公民信息的可追溯性。引導(dǎo)學(xué)生自主學(xué)習(xí)，主動(dòng)思考，自主建構(gòu)知識(shí)體系。通過項(xiàng)目實(shí)踐，了解民法典的歷史地位以及部分章節(jié)內(nèi)容，樹立法治意識(shí)。

子任務(wù)02-3使用盒模型劃分頁面教案名稱子任務(wù)02-3使用盒模型劃分頁面計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)盒模型及其樣式屬性的應(yīng)用。盒模型也是所有塊級(jí)元素的抽象，擁有所有塊級(jí)元素的共性，樣式屬性適用于所有塊級(jí)元素。知識(shí)目標(biāo)1.理解行內(nèi)元素和塊級(jí)元素及其轉(zhuǎn)換2.掌握盒子模型及常用樣式屬性3.掌握行內(nèi)元素及其樣式屬性能力目標(biāo)1.學(xué)會(huì)靈活轉(zhuǎn)換元素的顯示方式2.能夠使用盒模型進(jìn)行頁面布局素質(zhì)目標(biāo)1.了解并應(yīng)用“分而治之”的思想2.具備精益求精的工匠精神3.弘揚(yáng)社會(huì)主義核心價(jià)值觀和正能量教學(xué)重點(diǎn)盒子模型的樣式屬性教學(xué)難點(diǎn)塊級(jí)元素和行內(nèi)元素的區(qū)別和轉(zhuǎn)換信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)02-3使用盒模型劃分頁面并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（10分鐘）思考：DIV+CSS網(wǎng)頁布局的基本流程就是先在頁面上使用塊級(jí)元素劃分內(nèi)容區(qū)域，然后再用CSS進(jìn)行定位，最后再在相應(yīng)的區(qū)域內(nèi)添加具體內(nèi)容。塊級(jí)元素的大小和位置決定了該內(nèi)容塊在網(wǎng)頁上的占位。我們已經(jīng)能夠在樣式表中為頁面中的指定元素規(guī)定樣式規(guī)則，如何這些塊級(jí)元素按照美工事先設(shè)計(jì)好的版式排列在網(wǎng)頁上呢？微課視頻中主要講述了哪些內(nèi)容？分享交流3分鐘任務(wù)提出（10分鐘）頁面布局時(shí)要在樣式表中對(duì)頁面中指定“盒子”的大小、位置、內(nèi)外邊距等做出精確的設(shè)置，就需要用到盒模型?！绢^腦風(fēng)暴】是不是所有的元素都是盒子？知識(shí)點(diǎn)講解（10分鐘）HTML元素按呈現(xiàn)效果可分為塊級(jí)元素和行內(nèi)元素兩大類。分析討論（15分鐘）1.列舉我們學(xué)過的元素分別是哪一類？2.兩類元素是否可以轉(zhuǎn)換？知識(shí)點(diǎn)講解（10分鐘）行內(nèi)元素和塊級(jí)元素在實(shí)際項(xiàng)目中可以根據(jù)需要進(jìn)行相互轉(zhuǎn)換，可以通過指定display樣式屬性的取值來決定元素的顯示方式。行內(nèi)塊元素。兼具行內(nèi)元素和塊級(jí)元素的特點(diǎn)，在內(nèi)部類似于block元素，比如它擁有block元素的高寬值，也可以設(shè)定自己的padding（內(nèi)填充），border（邊框）與margin（外邊距），而外部的排列方式又類似行內(nèi)元素，即水平在一行內(nèi)排列，不是像塊級(jí)元素一樣從上到下排列。教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共10分鐘）知識(shí)點(diǎn)講做（40分鐘）塊級(jí)元素的盒子模型1.盒子的寬度和高度CSS樣式規(guī)則中使用width和height規(guī)定盒子的寬高注意：標(biāo)準(zhǔn)盒子模型的width和height僅指塊級(jí)元素的內(nèi)容區(qū)域大小教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共10分鐘）2.盒子的邊框教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共10分鐘）3.盒子的內(nèi)填充屬性padding并非實(shí)體，是透明留白，沒有修飾屬性。不同瀏覽器對(duì)于頁面元素的默認(rèn)padding和margin取值是不相同的，為了保證統(tǒng)一的頁面效果，通常采用*{padding:0;margin:0;}將頁面元素的默認(rèn)內(nèi)外邊距置零。padding值不允許為負(fù)值，可四邊分別設(shè)置，順時(shí)針方向，也可一次賦值。容器盒子內(nèi)填充使用固定值，段落內(nèi)填充使用相對(duì)值。所以當(dāng)拖動(dòng)瀏覽器窗口改變其寬度時(shí)，段落文字的內(nèi)填充會(huì)隨之發(fā)生變化（這時(shí)<p>標(biāo)記的父元素為<div>），而容器盒子的內(nèi)填充不會(huì)發(fā)生變化。教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共10分鐘）項(xiàng)目實(shí)踐（20分鐘）民俗話節(jié)氣之立秋頭腦風(fēng)暴（10分鐘）如何使盒子在頁面窗口居中？項(xiàng)目實(shí)踐（30分鐘）完成以下單列布局小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：瀏覽“學(xué)習(xí)強(qiáng)化”網(wǎng)站首頁，畫出單欄式頁面布局，并使用HTML+CSS實(shí)現(xiàn)。在前端頁面排版中，要有精益求精的工匠精神事物不是絕對(duì)的，是可以相互轉(zhuǎn)換的。在軟件項(xiàng)目開發(fā)過程中，時(shí)刻牢記精益求精的工匠精神在軟件項(xiàng)目開發(fā)過程中，時(shí)刻牢記精益求精的工匠精神在立秋時(shí)節(jié)到來時(shí)引導(dǎo)學(xué)生熟悉中國傳統(tǒng)文化，感受大自然的四季更替，體會(huì)到古代先賢的偉大智慧。從弘揚(yáng)正能量的網(wǎng)站中汲取能量。

子任務(wù)02-4使用BFC隔離空間教案名稱子任務(wù)2-4使用BFC隔離空間計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)BFC（塊級(jí)格式化上下文），用于將元素和外部真正隔離開，從而保證一個(gè)環(huán)境中的元素不會(huì)影響到其他環(huán)境中的布局，用于解決頁面排版中出現(xiàn)例如垂直盒子外邊距合并等問題。知識(shí)目標(biāo)1.理解垂直外邊距合并的原理2.掌握BFC布局及其觸發(fā)方法3.掌握BFC布局解決外邊距合并問題的方法能力目標(biāo)1.能夠熟練應(yīng)用BFC解決外邊距合并的問題2.能夠使用BFC解決其他實(shí)際問題素質(zhì)目標(biāo)1.提高自主探究能力2.培養(yǎng)精益求精的工匠精神3.培養(yǎng)通過現(xiàn)象發(fā)現(xiàn)本質(zhì)的職業(yè)素質(zhì)教學(xué)重點(diǎn)BFC布局及其觸發(fā)方法教學(xué)難點(diǎn)使用BFC解決排版中出現(xiàn)的實(shí)際問題信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)02-4使用BFC隔離空間并完成教學(xué)平臺(tái)的課前自測題【課中】作業(yè)點(diǎn)評(píng)（10分鐘）教師點(diǎn)評(píng)作業(yè)，指出作業(yè)中出現(xiàn)的問題課程導(dǎo)入（5分鐘）隨著我們?cè)O(shè)計(jì)的頁面板塊越來越多，相鄰盒子設(shè)置垂直外邊距后，在頁面表現(xiàn)出的效果往往和自己預(yù)想的值有一定偏差，為什么呢？大多數(shù)情況下是相鄰盒子之間相互影響導(dǎo)致的，如何避免這種影響呢？如果將元素和外部真正隔離開，從而保證一個(gè)環(huán)境中的元素不會(huì)影響到其他環(huán)境中的布局。任務(wù)提出（10分鐘）發(fā)現(xiàn)問題：外邊距合并如何解決？分析討論（10分鐘）知識(shí)點(diǎn)講解（15分鐘）1.BFC（BlockFormattingContext），塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域，決定了塊級(jí)元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。在可視化布局的時(shí)候，BFC提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定的規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會(huì)影響到其他環(huán)境中的布局。（1）同一個(gè)BFC內(nèi)的兩個(gè)相鄰塊級(jí)元素的外邊距合并，但不同

BFC外邊距不合并；（2）BFC的區(qū)域不會(huì)與外部浮動(dòng)元素重疊；（3）計(jì)算BFC高度的時(shí)候，浮動(dòng)元素也會(huì)參與計(jì)算；（4）BFC元素是一個(gè)獨(dú)立的容器，外面的元素不會(huì)影響里面的元素，里面的元素也不會(huì)影響外面的元素。分析討論觸發(fā)BFC的方法BFC就是讓元素形成一個(gè)獨(dú)立的空間，空間內(nèi)的元素不會(huì)影響到外面，那么如何才能讓元素形成這樣一個(gè)空間呢？為元素設(shè)置CSS屬性。常用的觸發(fā)BFC方法：（1）設(shè)置包含塊overflow屬性值為hidden；（3）設(shè)置子元素display屬性值為:inline-block；教學(xué)示例（教師演示講解）學(xué)生同步實(shí)踐（共30分鐘）項(xiàng)目實(shí)踐BFC經(jīng)常用于頁面布局，請(qǐng)完成如圖所示單欄布局。要求：頁面分為三大版塊，他們之間垂直距離設(shè)置大一些，為20px，主體部分內(nèi)部有三個(gè)小版塊，他們之間垂直距離小一點(diǎn)，設(shè)為10px。思路：使用BFC布局隔離，版塊之間不會(huì)發(fā)生垂直外邊距合并。小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：細(xì)化“學(xué)習(xí)強(qiáng)國“網(wǎng)站首頁頁面布局，并在平臺(tái)提交從成熟的項(xiàng)目中汲取經(jīng)驗(yàn)，培養(yǎng)學(xué)生知識(shí)發(fā)現(xiàn)、總結(jié)、內(nèi)化、提升的自我建構(gòu)能力培養(yǎng)通過現(xiàn)象發(fā)現(xiàn)本質(zhì)的職業(yè)素質(zhì)培養(yǎng)學(xué)生發(fā)現(xiàn)問題、解決問題的能力

任務(wù)03網(wǎng)頁的藍(lán)圖——復(fù)雜布局子任務(wù)03-1浮動(dòng)布局兩欄式頁面教案名稱子任務(wù)03-1浮動(dòng)布局兩欄式頁面計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)學(xué)習(xí)盒子的浮動(dòng)布局，為盒子應(yīng)用float屬性設(shè)置浮動(dòng)，浮動(dòng)后的盒子將脫離標(biāo)準(zhǔn)流。知識(shí)目標(biāo)1.理解浮動(dòng)布局2.掌握浮動(dòng)屬性float的用法3.掌握清除浮動(dòng)屬性clear的用法能力目標(biāo)1.能夠熟練應(yīng)用浮動(dòng)屬性完成圖文混排效果2.能夠熟練應(yīng)用浮動(dòng)屬性完成多個(gè)板塊水平排列效果3.能夠清除頁面排版中浮動(dòng)對(duì)其它元素的影響素質(zhì)目標(biāo)1.提高自主探究能力2.培養(yǎng)精益求精的工匠精神3.培養(yǎng)軟件架構(gòu)的模塊化思維教學(xué)重點(diǎn)浮動(dòng)屬性float的用法教學(xué)難點(diǎn)解決浮動(dòng)應(yīng)用中出現(xiàn)的各類問題，例如高度塌陷等信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)03-1浮動(dòng)布局兩欄式頁面并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）瀏覽百度新聞頁面，觀察頁面布局思考：網(wǎng)頁中兩個(gè)板塊水平排列的布局非常常見，僅僅使用簡單的盒子羅列能得到這樣的效果嗎？任務(wù)提出（10分鐘）大多數(shù)網(wǎng)頁由于內(nèi)容比較復(fù)雜，特別是網(wǎng)站首頁，為了在有限的空間內(nèi)展示更多的信息，往往都會(huì)按照左中右或者左右的結(jié)構(gòu)進(jìn)行排版。兩欄式布局是在傳統(tǒng)桌面網(wǎng)站中最常見的一種布局方式，將有限的空間劃分為若干橫縱結(jié)合的板塊，有助于頁面內(nèi)容的組織和展示。頁面布局如下：知識(shí)點(diǎn)講解（30分鐘）元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)文檔流的控制，向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂Ｔ氐母?dòng)屬性float用法：選擇器{float:屬性值;}常用的float屬性值有三個(gè)：left：元素向左浮動(dòng)right:元素向右浮動(dòng)none:元素不浮動(dòng)（默認(rèn)值）教師演示講解學(xué)生同步實(shí)踐分析討論（20分鐘）出現(xiàn)以下情況的原因？如何解決？高度塌陷的原因父元素中的所有子元素均設(shè)置浮動(dòng)父元素沒有定義高度解決方案使用空標(biāo)記清除浮動(dòng)使用after偽對(duì)象清除浮動(dòng)使用overflow屬性清除浮動(dòng)項(xiàng)目實(shí)踐（20分鐘）學(xué)生完成以上布局，教師引導(dǎo)答疑小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：將課堂項(xiàng)目提交至云平臺(tái)激發(fā)學(xué)生愛黨愛國的熱情，關(guān)心黨和民族的未來發(fā)展，為國家建設(shè)貢獻(xiàn)自己的力量。培養(yǎng)軟件架構(gòu)的模塊化思維培養(yǎng)學(xué)生發(fā)現(xiàn)問題、解決問題的能力當(dāng)日事，當(dāng)日畢，只爭朝夕。

子任務(wù)03-2DIV+CSS布局網(wǎng)上商城首頁教案名稱子任務(wù)03-2DIV+CSS布局網(wǎng)上商城首頁計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)參照小米網(wǎng)上商城首頁，使用DIV+CSS進(jìn)行頁面布局。通過該項(xiàng)目學(xué)習(xí)復(fù)雜頁面的布局方法。知識(shí)目標(biāo)1.理解版心的概念2.掌握通欄多列式網(wǎng)頁布局的設(shè)計(jì)方法能力目標(biāo)1.能夠熟練應(yīng)用HTML5+CSS3按需進(jìn)行網(wǎng)站首頁布局2.能夠解決網(wǎng)頁布局過程中遇到的高度塌陷等常見問題素質(zhì)目標(biāo)1.提高審美情趣和創(chuàng)新能力2.激發(fā)學(xué)生科技報(bào)國的志向3.培養(yǎng)軟件工程中的模塊化思維教學(xué)重點(diǎn)DIV+CSS的布局方式教學(xué)難點(diǎn)浮動(dòng)以及如何解決浮動(dòng)帶來的問題信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)03-2DIV+CSS布局網(wǎng)上商城首頁并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）瀏覽京東、小米、華為等網(wǎng)上商城，我們發(fā)現(xiàn)實(shí)際網(wǎng)頁的布局要復(fù)雜多了，特別是商城類網(wǎng)站，需要將大量信息呈現(xiàn)在首頁上，大多數(shù)網(wǎng)頁是兩欄的甚至多欄的，而且是長頁面，那么怎么才能做出這樣的頁面布局呢？任務(wù)提出（5分鐘）如何完成該類網(wǎng)頁的布局？知識(shí)點(diǎn)講解（30分鐘）1.網(wǎng)頁布局的流程第一步就是要先根據(jù)美工的效果圖確定頁面的版心，版心在屏幕中占據(jù)的寬度是多少；第二步要分析頁面中的行模塊，也就是每一個(gè)BFC區(qū)域，還要確定好每個(gè)行模塊中的列模塊；第三步在html文檔中寫出各個(gè)頁面元素；第四步通過DIV+CSS調(diào)整頁面中的每個(gè)元素的外觀效果。2.常見網(wǎng)頁布局——通欄多列式布局教師引導(dǎo)學(xué)生完成強(qiáng)調(diào)：版心的用法項(xiàng)目實(shí)踐（50分鐘）學(xué)生自主完成，教師答疑小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容?！菊n后】平臺(tái)提交作業(yè)：完成小米網(wǎng)上商城網(wǎng)站首頁布局，并在平臺(tái)提交“小米”公司創(chuàng)始人雷軍，用他的創(chuàng)業(yè)史激勵(lì)同學(xué)們努力學(xué)習(xí)；小米也增強(qiáng)了民族自豪感，堅(jiān)定了同學(xué)們?yōu)榭萍紙?bào)國的志向。培養(yǎng)web前端開發(fā)工程師的模塊化思維不畏困難，學(xué)會(huì)常見的錯(cuò)誤排查方法和解決方案，并不斷總結(jié)。在代碼編寫中，往往很小的錯(cuò)誤就會(huì)導(dǎo)致全局崩潰，要從細(xì)節(jié)做起。

子任務(wù)03-3網(wǎng)格布局網(wǎng)站商城首頁教案名稱子任務(wù)3-3網(wǎng)格布局網(wǎng)站商城首頁計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)了使用網(wǎng)格布局復(fù)雜的網(wǎng)頁。它將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格，任意組合不同的網(wǎng)格可以做出各種各樣的布局，使以前只能通過復(fù)雜的CSS框架實(shí)現(xiàn)的效果變得更簡單了。知識(shí)目標(biāo)1.理解網(wǎng)格布局2.掌握網(wǎng)格容器的設(shè)置及其屬性3.掌握子元素的屬性能力目標(biāo)1.學(xué)會(huì)使用CSSGrid網(wǎng)格進(jìn)行靈活的頁面布局2.能夠靈活選用網(wǎng)格布局的樣式屬性素質(zhì)目標(biāo)1.提高自主探究能力2.培養(yǎng)學(xué)生集體主義精神3.正確處理個(gè)人和集體的關(guān)系教學(xué)重點(diǎn)使用網(wǎng)格布局進(jìn)行頁面布局教學(xué)難點(diǎn)解決網(wǎng)格布局中出現(xiàn)的各種問題信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)03-3網(wǎng)格布局網(wǎng)站商城首頁并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）我們通過標(biāo)準(zhǔn)流、浮動(dòng)以及其他CSS屬性已經(jīng)完成了網(wǎng)上商城首頁的頁面布局，但是利用現(xiàn)有的知識(shí)在構(gòu)建復(fù)雜的web頁面時(shí)還有很多不足，例如盒子的水平居中、浮動(dòng)元素的控制、列寬的分配等等。還有沒有其他更好的布局方式呢？答案是有的。任務(wù)提出（5分鐘）瀏覽小米商城網(wǎng)站首頁，觀察商品陳列部分，是否像網(wǎng)格一般有秩序？本任務(wù)我們將學(xué)習(xí)另外一種強(qiáng)大的布局模式——CSSGrid布局。它引入了二維網(wǎng)格布局系統(tǒng)，其最大的優(yōu)勢是可以將頁面分為多個(gè)網(wǎng)格，任意組合成不同的形式，進(jìn)而做出各種各樣的布局，對(duì)多列區(qū)域的布局特別有效。知識(shí)點(diǎn)講解網(wǎng)頁布局的原理（10分鐘）我們可以假想一個(gè)容器，里面有若干子元素，子元素按照網(wǎng)格的形式排列，網(wǎng)格線就是構(gòu)成網(wǎng)格所有的線條。一個(gè)兩行五列的布局，就會(huì)有3條行網(wǎng)格線，6條列網(wǎng)格線，網(wǎng)格線編號(hào)遵循從左到右、從上到下，由1號(hào)開始開始，n行有n+1根水平網(wǎng)格線，m列有m+1根垂直網(wǎng)格線。相鄰兩條平行的網(wǎng)格線之間所形成的區(qū)域用來擺放子元素，子元素之間可以有間距。2.網(wǎng)格布局中對(duì)父元素的操作（40分鐘）（1）設(shè)置網(wǎng)格容器方法：在元素上聲明display:grid，這樣就能觸發(fā)渲染引擎的網(wǎng)格布局算法，創(chuàng)建一個(gè)網(wǎng)格容器，這個(gè)元素的所有直系子元素都會(huì)自動(dòng)成為網(wǎng)格元素。（2）劃分網(wǎng)格線網(wǎng)格線是構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線，它們既可以是垂直的（列網(wǎng)格線），也可以是水平的（行網(wǎng)格線），這些線條構(gòu)成了布局的基礎(chǔ)模板，任意兩條線之間的空間就是一個(gè)網(wǎng)格軌道。在畫線過程中，需要根據(jù)行和列兩個(gè)維度分別進(jìn)行設(shè)置，由行線和列線所分隔出來的區(qū)域用來擺放子元素。grid-template-columnsgrid-template-rowsgrid-templategrid-auto-rows和minmax()教師引導(dǎo)講解，學(xué)生同步練習(xí)（15分鐘）（3）添加網(wǎng)格間距網(wǎng)格間距的設(shè)置在實(shí)際開發(fā)中是可選的，主要根據(jù)網(wǎng)頁設(shè)計(jì)的需求而定。在兩個(gè)網(wǎng)格單元之間的網(wǎng)格橫向間距或網(wǎng)格縱向間距可使用grid-column-gap和grid-row-gap屬性來創(chuàng)建，或者直接使用兩個(gè)合并的縮寫形式grid-gap。3.網(wǎng)格布局中對(duì)子元素的操作（30分鐘）子元素跨行跨列有的子元素需要占據(jù)多個(gè)網(wǎng)格單元，要確定具體占位，可以利用之前在父容器中所指定的網(wǎng)格線編號(hào)來定位，直接①grid-column-start：規(guī)定從哪一列開始顯示項(xiàng)目。②grid-column-end：規(guī)定在哪一條列線上停止顯示項(xiàng)目，或跨越多少列。③grid-row-start：規(guī)定從哪行開始顯示項(xiàng)目。④grid-row-end：規(guī)定在哪條行線上停止顯示項(xiàng)目，或者橫跨多少行。通過設(shè)置起始行、結(jié)束行和起始列、結(jié)束列來給子元素劃定它所要擺放的區(qū)域。教師引導(dǎo)講解，學(xué)生同步練習(xí)（15分鐘）項(xiàng)目實(shí)踐（40分鐘）使用網(wǎng)格布局改進(jìn)子任務(wù)3-2中完成的頁面效果小結(jié)每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，以及操作中出現(xiàn)的問題?！菊n后】平臺(tái)提交項(xiàng)目實(shí)踐作業(yè)預(yù)習(xí)微課視頻任務(wù)04-1技術(shù)的更新迭代速度是非?？斓?，作為軟件從業(yè)人員，我們要始終保持學(xué)習(xí)的熱情，具備學(xué)習(xí)的能力。培養(yǎng)學(xué)生模塊化思維和審美情趣。要正確處理整體和部分的關(guān)系。整體是部分的有機(jī)統(tǒng)一、集合。集合中的各個(gè)部分不是單純地疊加或機(jī)械地堆積在一起的，而是以一定的結(jié)構(gòu)形式互相聯(lián)系、相互作用著的。引申到每個(gè)人都是集體的一員，個(gè)人利益和集體利益沖突時(shí)，個(gè)人服從集體。培養(yǎng)學(xué)生集體主義精神。子元素也是可以調(diào)整的。但是要在有限的空間內(nèi)調(diào)整。個(gè)人的自由要在一定的規(guī)章制度下。沒有絕對(duì)的自由不積硅步，無以致千里在代碼編寫時(shí)，要有大局意識(shí)，層次清楚，符合規(guī)范，養(yǎng)成良好的編碼習(xí)慣。

任務(wù)04向網(wǎng)頁中插入圖像和文本子任務(wù)04-1網(wǎng)站首頁中圖像的應(yīng)用教案名稱子任務(wù)04-1網(wǎng)站首頁中圖像的應(yīng)用計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)學(xué)習(xí)如何在網(wǎng)頁中插入圖像信息，同時(shí)按照效果圖的要求對(duì)圖像進(jìn)行精確的樣式設(shè)置。知識(shí)目標(biāo)1.掌握img標(biāo)記及其屬性的用法2.掌握常見圖像樣式的使用能力目標(biāo)1.能夠向網(wǎng)頁中添加圖像2.能夠按需調(diào)整圖像的樣式素質(zhì)目標(biāo)1.堅(jiān)持總體國家安全觀2.堅(jiān)持精益求精的專業(yè)精神3.堅(jiān)持實(shí)事求是的精神教學(xué)重點(diǎn)img標(biāo)簽及其屬性教學(xué)難點(diǎn)熟練調(diào)整圖像的樣式信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)04-1網(wǎng)站首頁中圖像的應(yīng)用并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（10分鐘）瀏覽網(wǎng)易新聞頁面，圖片新聞和文字新聞給我們的感受有何不同？瀏覽有中國、沙特、伊朗三國領(lǐng)導(dǎo)人合影的圖文信息頁面。討論：通過中國促使沙特和伊朗恢復(fù)外交關(guān)系來分析中國民美國在國際中起的作用有什么不同？討論：能用于裝飾美化圖像的特征有哪些？新聞圖片允許ps嗎？引出本門課程的任務(wù)：在網(wǎng)頁中如何顯示出圖像，如何調(diào)整能顯示出來中意的圖像外觀任務(wù)提出（5分鐘）在商城首頁中布局顯示輪播圖中的圖片、在商品展示中顯示商品圖片。知識(shí)點(diǎn)講解（20分鐘）1.插入圖像<img>標(biāo)簽用于在HTML頁面中嵌入一個(gè)圖像，嚴(yán)格地講，是使用<img>標(biāo)簽在頁面里創(chuàng)建了一塊區(qū)域，用以容納被引用的圖像?；靖袷剑?lt;imgsrc="圖像URL"alt="替代文本"[其它可選屬性]/><img/>標(biāo)記是單標(biāo)記，是行內(nèi)元素，用于在當(dāng)前行中插入一幅圖像，圖像前后的文本默認(rèn)與圖像底部對(duì)齊。src屬性指定圖像路徑及文件名，常見的web端顯示圖像格式有jpg、gif或png格式。（1）絕對(duì)路徑絕對(duì)路徑一般是指帶有盤符的路徑或完整的網(wǎng)絡(luò)地址。例如“D:\myweb\img\logo.gif”或者“/images/logo.gif”（2）相對(duì)路徑相對(duì)路徑不帶有盤符，通常是以當(dāng)前HTML網(wǎng)頁文件為起點(diǎn)，通過層級(jí)關(guān)系描述目標(biāo)圖像的位置。分析討論（10分鐘）對(duì)文本設(shè)置的對(duì)齊屬性對(duì)圖片起作用嗎？圖片默認(rèn)是什么類型的元素？可以調(diào)整改變嗎？學(xué)生實(shí)踐驗(yàn)證討論結(jié)果知識(shí)點(diǎn)講解（20分鐘）2.CSS圖像樣式已知容器盒子大小為100px*100px，圖片大小200px*200px討論：如何使圖片大小和盒子匹配？討論：如何實(shí)現(xiàn)圓形圖片？思考多個(gè)inline-block或者incline元素之間的間隙是因?yàn)榇a中有空格，在頁面上表現(xiàn)為一個(gè)字符大小的縫隙，將多個(gè)img標(biāo)記寫在一行就可以解決這個(gè)問題。多個(gè)inline-block或者incline元素之間的間隙是因?yàn)榇a中有空格，在頁面上表現(xiàn)為一個(gè)字符大小的縫隙，將多個(gè)img標(biāo)記寫在一行就可以解決這個(gè)問題。項(xiàng)目實(shí)踐（30分鐘）根據(jù)商城首頁布局圖，完成頁面效果的開發(fā)小結(jié)（5分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，以及操作中出現(xiàn)的問題?！菊n后】平臺(tái)提交項(xiàng)目實(shí)踐作業(yè)預(yù)習(xí)微課視頻任務(wù)04-2通過和學(xué)生一起觀看中國促使沙特和伊朗恢復(fù)外交關(guān)系的圖片新聞，引導(dǎo)學(xué)生關(guān)心世界局勢，了解總體國家安全觀，在國際變幻中不斷提高政治判斷力。網(wǎng)站上新聞圖片的真實(shí)性是第一位的，網(wǎng)上的各種ps偽造亂改圖片是侵權(quán)行為，要堅(jiān)決抵制。事物是可以相互轉(zhuǎn)換的抓住事物的本質(zhì)不以規(guī)矩不成方圓，在現(xiàn)實(shí)生活中也是如此。培訓(xùn)學(xué)生主動(dòng)發(fā)現(xiàn)問題，并分析問題解決問題的能力項(xiàng)目越復(fù)雜，越要細(xì)心、有耐心、有恒心，遇到錯(cuò)誤及時(shí)調(diào)試不積硅步，無以致千里。知識(shí)不斷積累才能量變達(dá)到質(zhì)變。

子任務(wù)04-2網(wǎng)站首頁中文本的應(yīng)用教案名稱子任務(wù)4-2網(wǎng)站首頁中文本的應(yīng)用計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)學(xué)習(xí)如何在網(wǎng)頁中插入文本信息，同時(shí)按照效果圖的要求對(duì)文本和段落進(jìn)行精確的樣式設(shè)置。知識(shí)目標(biāo)1.掌握各類文本標(biāo)記及其屬性的用法2.掌握文本標(biāo)記的樣式能力目標(biāo)1.能夠向網(wǎng)頁中添加文本2.能夠熟練調(diào)整文本的樣式素質(zhì)目標(biāo)1.學(xué)習(xí)并弘揚(yáng)科學(xué)家精神2.培養(yǎng)學(xué)生的法治意識(shí)3.培養(yǎng)精益求精的工匠精神教學(xué)重點(diǎn)各類文本標(biāo)簽及其屬性教學(xué)難點(diǎn)熟練調(diào)整文本的樣式信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)04-2網(wǎng)站首頁中文本的應(yīng)用并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（10分鐘）向?qū)W生展示具有代表性的幾個(gè)網(wǎng)頁，指出頁面文字搭配的優(yōu)缺點(diǎn)；小組討論：頁面最適合的字體大??？最普遍的字體？頁面字體需要自動(dòng)調(diào)整嗎？引出本次課程的任務(wù)：在頁面中設(shè)置字體、大小、字體單位、顏色等。任務(wù)提出（5分鐘）在商城首頁添加各模塊標(biāo)題文字、各商品名稱、規(guī)格和價(jià)格等文字信息。知識(shí)點(diǎn)講解（30分鐘）一、插入文本用合適語義的標(biāo)簽對(duì)文本數(shù)據(jù)進(jìn)行結(jié)構(gòu)化是網(wǎng)站架構(gòu)的基本技能。常用的文本標(biāo)記有標(biāo)題標(biāo)簽<h1>~<h6>、段落標(biāo)簽<p>、換行標(biāo)簽<br>、水平線標(biāo)簽<hr>、強(qiáng)調(diào)文本標(biāo)簽<strong>、<em>等，不同瀏覽器對(duì)不同文本標(biāo)簽有自己默認(rèn)的呈現(xiàn)樣式。塊級(jí)文本標(biāo)記行內(nèi)文本標(biāo)記特殊字符討論：你能列舉哪些學(xué)習(xí)過的文本標(biāo)記？塊級(jí)文本——標(biāo)題標(biāo)記<h1>~<h6>2.塊級(jí)文本——段落標(biāo)記<p>3.行內(nèi)文本標(biāo)記<span>分析討論（10分鐘）以上效果如何實(shí)現(xiàn)？二、CSS文本和字體樣式應(yīng)用字體樣式CSS文本和字體樣式應(yīng)用文本樣式項(xiàng)目實(shí)踐（30分鐘）完成新華網(wǎng)評(píng)圖文頁面。小結(jié)（5分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容?！菊n后】平臺(tái)提交作業(yè)：把添加好文字的商城首頁代碼和運(yùn)行效果圖上交到平臺(tái)：商城首頁添加導(dǎo)航文字、各模塊標(biāo)題文字、各商品名稱、規(guī)格和價(jià)格等文字信息。具備家國情懷，培養(yǎng)愛國意識(shí)，提升公民道德修養(yǎng)中華民族是一個(gè)歷史優(yōu)秀的偉大民族，有著璀璨的文化，中國古代歷法、二十四節(jié)氣、茶文化都是非常值得我們學(xué)習(xí)和傳承的。網(wǎng)頁上文字的排版需要認(rèn)真準(zhǔn)確、美觀大方，培養(yǎng)學(xué)生精益求精的職業(yè)精神?？茖W(xué)家精神：胸懷祖國、服務(wù)人民的愛國精神，勇攀高峰、敢為人先的創(chuàng)新精神，追求真理、嚴(yán)謹(jǐn)治學(xué)的求實(shí)精神，淡泊名利、潛心研究的奉獻(xiàn)精神，集智攻關(guān)、團(tuán)結(jié)協(xié)作的協(xié)同精神，甘為人梯、獎(jiǎng)掖后學(xué)的育人精神向科學(xué)家學(xué)習(xí)！向科學(xué)家致敬！言論自由有邊界，網(wǎng)絡(luò)表達(dá)須謹(jǐn)慎。

任務(wù)05向網(wǎng)站首頁添加導(dǎo)航子任務(wù)05-1頁面中超鏈接的使用教案名稱子任務(wù)05-1頁面中超鏈接的使用計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)網(wǎng)頁中各種超鏈接的實(shí)現(xiàn)方法，學(xué)習(xí)<a>標(biāo)記及其屬性在網(wǎng)頁中的基本應(yīng)用。知識(shí)目標(biāo)1.掌握<a>標(biāo)記及其屬性的用法2.掌握不同類型超鏈接的屬性設(shè)置方法能力目標(biāo)1.能夠熟練為網(wǎng)頁添加內(nèi)部鏈接和外部鏈接2.能夠設(shè)置錨點(diǎn)鏈接素質(zhì)目標(biāo)1.培養(yǎng)創(chuàng)新創(chuàng)業(yè)能力和團(tuán)隊(duì)意識(shí)2.培養(yǎng)辯證思維能力3.培養(yǎng)學(xué)生終身學(xué)習(xí)的意識(shí)教學(xué)重點(diǎn)不同類型超鏈接的用法教學(xué)難點(diǎn)頁面內(nèi)部的錨點(diǎn)鏈接信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)05-1頁面中超鏈接的使用并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入Web的最初目的就是提供一種簡單的方式來訪問、閱讀和瀏覽文本文檔。網(wǎng)絡(luò)上所有可用的網(wǎng)頁都擁有一個(gè)獨(dú)一無二的URL地址，要訪問某個(gè)頁面，只需在瀏覽器地址欄中鍵入該頁面的地址即可。但是，用戶很難每次都通過輸入一個(gè)長URL來訪問某個(gè)文檔，超鏈接可以將任意文檔與URL地址相關(guān)聯(lián)，只要激活鏈接就可以跳轉(zhuǎn)到目標(biāo)文檔。在互聯(lián)網(wǎng)中超鏈接是各個(gè)網(wǎng)頁之間的橋梁，一個(gè)網(wǎng)站內(nèi)部的頁面必須通過超鏈接連接起來。進(jìn)入網(wǎng)站時(shí)用戶首先看到的是首頁，如果想從首頁跳轉(zhuǎn)到其子頁面或者其他網(wǎng)站，就需要在首頁相應(yīng)的位置添加超鏈接。任務(wù)提出導(dǎo)航是頁面中必不可少的一部分，也是整個(gè)網(wǎng)頁的核心。不同網(wǎng)站的導(dǎo)航效果千變?nèi)f化，請(qǐng)從小米網(wǎng)上商城網(wǎng)站中尋找不同類型的超鏈接方式，他們的區(qū)別和聯(lián)系有哪些？討論分享（10分鐘）知識(shí)點(diǎn)講解（20分鐘）創(chuàng)建超鏈接的語法形式<ahref="跳轉(zhuǎn)目標(biāo)"target="目標(biāo)窗口的彈出方式"title=”介紹信息”>文本或圖像</a><a>標(biāo)記是雙標(biāo)記，行內(nèi)標(biāo)記，用于定義超鏈接。分析討論1.圖片鏈接教學(xué)引導(dǎo)學(xué)生同步實(shí)踐（共15分鐘）2.郵件鏈接（現(xiàn)在比較少用，更多的被即時(shí)通訊方式取代）3.下載鏈接下載鏈接在點(diǎn)擊后可以下載文件、圖片、音視頻等，實(shí)現(xiàn)方法是將href屬性的值設(shè)為被下載資源的路徑，然后再添加download屬性。<ahref="./img/1.jpg"download="picture.jpg">下載</a><ahref="./img/1.jpg"download>下載</a>download屬性是HTML5中<a>標(biāo)簽新增的屬性。download屬性值為“picture.jpg”，這表示圖片下載后命名為“picture.jpg”，download屬性沒有值，表明下載后圖片的文件名為資源文件的文件名，即“1.jpg”。在以前的版本中，<a>標(biāo)記加上href屬性其實(shí)就可以實(shí)現(xiàn)下載，但是對(duì)于.jpg、.pdf等瀏覽器可以直接打開的文件則直接在瀏覽器中打開預(yù)覽，加上了download屬性后，瀏覽器會(huì)強(qiáng)制進(jìn)行文件下載，下載的文件名就是download所命名的文件名。4.空鏈接當(dāng)不確定鏈接地址是哪里時(shí)，可以將href的屬性值寫成#，點(diǎn)擊后會(huì)回到本網(wǎng)頁的頂部，通常用于網(wǎng)站測試階段。5.錨點(diǎn)鏈接如何創(chuàng)建錨標(biāo)記呢？分兩個(gè)步驟：1.使用<a>標(biāo)簽中的id屬性創(chuàng)建錨標(biāo)記，例如：<aid=“marker”>錨點(diǎn)</a>2.在href屬性中使用該標(biāo)記<ahref="#marker">熱點(diǎn)文字</a>若要鏈接到其它文檔的指定位置，定義了錨點(diǎn)之后，使用<ahref="文檔URL#marker">熱點(diǎn)文字</a>項(xiàng)目實(shí)踐完成大學(xué)生創(chuàng)業(yè)計(jì)劃書的網(wǎng)頁版，分別實(shí)現(xiàn)外部鏈接、錨點(diǎn)鏈接、下載鏈接、郵件鏈接等鏈接形式。點(diǎn)擊返回可以返回頁首。小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：繼續(xù)完成大學(xué)生創(chuàng)業(yè)計(jì)劃書網(wǎng)頁，平臺(tái)提交。講解超鏈接的多種不同分類，讓學(xué)生體驗(yàn)學(xué)習(xí)要從不同角度對(duì)同一事物進(jìn)行認(rèn)識(shí)，找出其中的聯(lián)系與區(qū)別，從而發(fā)現(xiàn)規(guī)律，以便更好的拓展與應(yīng)用。生活中、學(xué)習(xí)中都要學(xué)會(huì)多方面看待問題，如果遇到困難和瓶頸，學(xué)會(huì)轉(zhuǎn)換思路，可能問題就會(huì)迎刃而解。提升學(xué)生職業(yè)精神。體會(huì)互聯(lián)網(wǎng)技術(shù)對(duì)人們生活發(fā)生的改變，激發(fā)學(xué)生不放棄學(xué)習(xí)、終身學(xué)習(xí)的激情。善于分享，樂于分享培養(yǎng)創(chuàng)新創(chuàng)業(yè)能力和團(tuán)隊(duì)意識(shí)

子任務(wù)05-2一級(jí)導(dǎo)航菜單的設(shè)計(jì)開發(fā)教案名稱子任務(wù)05-2一級(jí)導(dǎo)航菜單的設(shè)計(jì)開發(fā)計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)偽類在超鏈接的應(yīng)用以及<a>標(biāo)記的display屬性對(duì)于導(dǎo)航菜單排列方式的影響，在此基礎(chǔ)上制作出網(wǎng)頁上常見的水平導(dǎo)航菜單和垂直導(dǎo)航菜單。知識(shí)目標(biāo)1.掌握偽類的用法2.掌握偽類在超鏈接中的應(yīng)用3.掌握超鏈接標(biāo)記的display屬性能力目標(biāo)1.能夠熟練設(shè)置超鏈接不同狀態(tài)的樣式2.能夠根據(jù)需要靈活設(shè)置行內(nèi)超鏈接或者塊級(jí)超鏈接3.能夠熟練制作水平導(dǎo)航菜單和垂直導(dǎo)航菜單素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生樂于分享、團(tuán)結(jié)協(xié)作、共同進(jìn)步的大格局2.提高審美情趣3.培養(yǎng)在實(shí)踐中創(chuàng)新的能力教學(xué)重點(diǎn)偽類在超鏈接中的應(yīng)用教學(xué)難點(diǎn)行內(nèi)超鏈接以及塊級(jí)超鏈接在導(dǎo)航菜單中的靈活應(yīng)用信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)05-2一級(jí)導(dǎo)航菜單的設(shè)計(jì)開發(fā)并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）網(wǎng)頁中導(dǎo)航欄對(duì)于用戶體驗(yàn)來說是至關(guān)重要的，尤其是頂部導(dǎo)航欄和左側(cè)導(dǎo)航欄，因?yàn)榇蠖鄶?shù)用戶都有從左到右，從上到下的瀏覽習(xí)慣。當(dāng)我們進(jìn)入一個(gè)新的網(wǎng)站，通常最先看到的就是頂部導(dǎo)航或者左側(cè)導(dǎo)航。所以導(dǎo)航欄及其內(nèi)部超鏈接的樣式設(shè)計(jì)是網(wǎng)站開發(fā)者需要重點(diǎn)關(guān)注的地方。任務(wù)提出（10分鐘）瀏覽小米網(wǎng)上商城官網(wǎng)，找到里面的主要導(dǎo)航部分，并分析用到的技術(shù)手段。分析討論（10分鐘）討論：分別用到了哪些我們學(xué)習(xí)過的技術(shù)？查看源碼后，是否印證了你的猜想？知識(shí)點(diǎn)講解1.控制超鏈接外觀——偽類（10分鐘）偽類選擇器——偽類并不是真正意義上的類，它的名稱是由系統(tǒng)定義的，通常由標(biāo)記名、類名或id名加“:”構(gòu)成。分析討論偽類和類有什么區(qū)別？教師演示偽類的使用學(xué)生同步訓(xùn)練（共15分鐘）項(xiàng)目實(shí)踐（40分鐘）完成以上導(dǎo)航菜單小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充。【課后】平臺(tái)提交作業(yè)：學(xué)會(huì)分析源碼是軟件開發(fā)人員的必備技能。很多的開源軟件源碼都是公開的，便于全球的技術(shù)愛好者共享。培養(yǎng)學(xué)生樂于分享、團(tuán)結(jié)協(xié)作、共同進(jìn)步的大格局。提升項(xiàng)目制作中的美觀度，培養(yǎng)學(xué)生審美情趣了解更多的互聯(lián)網(wǎng)企業(yè)，激發(fā)學(xué)生科技興國的學(xué)習(xí)激情。

子任務(wù)05-3二級(jí)彈出式菜單的定位教案名稱子任務(wù)05-3二級(jí)彈出式菜單的定位計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容本子項(xiàng)目主要學(xué)習(xí)基于定位布局的二級(jí)彈出式菜單的制作方法。知識(shí)目標(biāo)1.理解元素的定位2.掌握固定定位、絕對(duì)定位、相對(duì)定位的用法能力目標(biāo)1.能夠根據(jù)頁面元素的位置決定使用哪種定位方式2.能夠熟練應(yīng)用固定定位、絕對(duì)定位和相對(duì)定位素質(zhì)目標(biāo)1.培養(yǎng)精益求精的工匠精神2.樹立迎難而上的決心3.培養(yǎng)開發(fā)工程師代碼簡潔、注釋清楚的職業(yè)素養(yǎng)教學(xué)重點(diǎn)絕對(duì)定位和相對(duì)定位的用法教學(xué)難點(diǎn)絕對(duì)定位的使用信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)05-3二級(jí)彈出式菜單的定位并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（10分鐘）如果網(wǎng)站需要展示的信息比較多，一級(jí)菜單中還需要進(jìn)一步分類，那么就需要進(jìn)一步設(shè)計(jì)二級(jí)菜單，實(shí)現(xiàn)鼠標(biāo)在主導(dǎo)航上懸停，二級(jí)菜單就會(huì)彈出，鼠標(biāo)移走，二級(jí)菜單隱藏的效果?？墒嵌?jí)菜單的位置往往由一級(jí)菜單決定，彈出后覆蓋網(wǎng)頁中原有的內(nèi)容，而之前學(xué)過的普通流中的元素位置受前后元素位置影響，是不能隨便移動(dòng)的；浮動(dòng)元素可以向左或向右移動(dòng)，但是只能移到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹梗膊荒軡M足要求。那么，如何定位二級(jí)菜單呢？任務(wù)提出（10分鐘）瀏覽小米網(wǎng)上商城官網(wǎng)，找到里面的二級(jí)彈出式菜單部分，并觀察其特點(diǎn)。討論：1.二級(jí)菜單的位置由誰決定？2.二級(jí)菜單顯示的時(shí)候影響頁面中其他元素嗎？知識(shí)點(diǎn)講解（20分鐘）1.定位屬性position元素的定位屬性主要包括定位方法、邊偏移和層疊等級(jí)。position屬性用于定義元素的定位模式，其基本語法格式如下： 選擇器{position:屬性值;}position屬性的常用值有四個(gè)，分別表示不同的定位模式，具體如下：static：自動(dòng)定位（默認(rèn)定位方式）relative：相對(duì)定位，相對(duì)于其原文檔流的位置進(jìn)行定位absolute：絕對(duì)定位，相對(duì)于其上一個(gè)已經(jīng)定位的父元素進(jìn)行定位fixed：固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位2.邊偏移通過邊偏移屬性top、bottom、left或right，來精確定義定位元素的位置，其取值為不同單位的數(shù)值或百分比，具體解釋如下：top：頂端偏移量，定義元素相對(duì)于其父元素上邊線的距離bottom：底部偏移量，定義元素相對(duì)于其父元素下邊線的距離left：左側(cè)偏移量，定義元素相對(duì)于其父元素左邊線的距離right：右側(cè)偏移量，定義元素相對(duì)于其父元素右邊線的距離項(xiàng)目演示分析討論（15分鐘）1.參照物？2.偏移后在文檔流中是否占據(jù)位置？學(xué)生同步實(shí)踐分析討論（15分鐘）1.參照物？2.偏移后在文檔流中是否占據(jù)位置？學(xué)生同步實(shí)踐頭腦風(fēng)暴二級(jí)菜單的參照物是誰？在文檔流中是否占據(jù)位置？項(xiàng)目實(shí)踐小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：完成小米網(wǎng)上商城首頁的二級(jí)彈出式菜單培養(yǎng)學(xué)生發(fā)現(xiàn)問題、分析問題的能力，進(jìn)一步提升職業(yè)能力不積硅步，無以致千里。樹立迎難而上的決心和信心。培養(yǎng)web前端開發(fā)工程師代碼簡潔、注釋清晰的職業(yè)素養(yǎng)

任務(wù)06網(wǎng)頁中列表的應(yīng)用子任務(wù)06-1認(rèn)識(shí)列表教案名稱子任務(wù)06-1認(rèn)識(shí)列表計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)學(xué)習(xí)列表及其樣式屬性的用法，列表經(jīng)常用于展示條目類信息、圖文混排信息，以及導(dǎo)航菜單有秩序的圖文信息。知識(shí)目標(biāo)1.掌握無序列表、有序列表、定義列表的用法2.掌握列表樣式的設(shè)置能力目標(biāo)1.能夠使用列表展示數(shù)據(jù)2.能夠使用列表進(jìn)行圖文混排3.能夠使用列表制作導(dǎo)航菜單素質(zhì)目標(biāo)1.注重愛國主義教育和傳統(tǒng)文化教育2.培養(yǎng)學(xué)生歸納和總結(jié)的能力3.培養(yǎng)學(xué)生的社會(huì)主義法治意識(shí)教學(xué)重點(diǎn)列表的語法教學(xué)難點(diǎn)使用列表制作導(dǎo)航菜單信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)06-1認(rèn)識(shí)列表并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）如果頁面信息比較多，還是僅僅使用前面學(xué)過的標(biāo)記的話代碼的可讀性不強(qiáng)，HTML給我們提供了列表標(biāo)記，可以在大量數(shù)據(jù)分類呈現(xiàn)的時(shí)候使用，例如新聞版塊或者復(fù)雜的導(dǎo)航菜單等。任務(wù)提出（10分鐘）瀏覽學(xué)習(xí)強(qiáng)國網(wǎng)站，大量文本信息是如何展示的？尤其是以下圖文混排頁面如何使文字更加有秩序？更加美觀？知識(shí)點(diǎn)講解1.無序列表（10分鐘）定義無序列表的基本語法格式如下：<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ul><ul></ul>標(biāo)記用于定義無序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項(xiàng)，每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。學(xué)生同步實(shí)踐（5分鐘）2.有序列表（10分鐘）有序列表即為有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列。定義有序列表的基本語法格式如下：<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li></ol>在上面的語法中，<ol></ol>標(biāo)記用于定義有序列表，<li></li>為具體的列表項(xiàng)，和無序列表類似，每對(duì)<ol></ol>中也至少應(yīng)包含一對(duì)<li></li>。學(xué)生同步實(shí)踐（5分鐘）3.CSS控制列表樣式教師引導(dǎo)學(xué)生觀看微課自學(xué)學(xué)生同步實(shí)踐分析討論1.樣式屬性是否可以改變顏色？2.樣式屬性是否可以隨意改變形狀？課外學(xué)習(xí)：網(wǎng)頁中的各類開源圖標(biāo)庫項(xiàng)目實(shí)踐討論：你知道百度熱搜的由來嗎？小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：模擬完成以上網(wǎng)頁，教學(xué)平臺(tái)提交列表是一種有秩序的信息表現(xiàn)形式，在我們今天高度發(fā)達(dá)的文明社會(huì)中，講文明，懂禮貌，識(shí)大局，懂規(guī)矩，遵守社會(huì)公共秩序。通過瀏覽學(xué)習(xí)強(qiáng)國網(wǎng)站，培養(yǎng)學(xué)生愛黨愛國的情操，樹立正確的價(jià)值觀。祖國大好河山在心中優(yōu)秀的文學(xué)作品希望同學(xué)們課后多閱讀，遠(yuǎn)離網(wǎng)絡(luò)垃圾文學(xué)培養(yǎng)學(xué)生自主探索的能力

子任務(wù)06-2使用列表制作多級(jí)導(dǎo)航教案名稱子任務(wù)06-2使用列表制作多級(jí)導(dǎo)航計(jì)劃學(xué)時(shí)2學(xué)時(shí)教學(xué)內(nèi)容本子任務(wù)主要學(xué)習(xí)如何通過列表嵌套實(shí)現(xiàn)多級(jí)導(dǎo)航菜單，綜合應(yīng)用了定位、列表、超鏈接、文本和圖像等多個(gè)知識(shí)點(diǎn)和技能點(diǎn)。知識(shí)目標(biāo)1.掌握列表的嵌套及其樣式能力目標(biāo)1.學(xué)會(huì)使用列表制作多級(jí)導(dǎo)航菜單2.能夠熟練設(shè)置多級(jí)列表的樣式素質(zhì)目標(biāo)1.培養(yǎng)學(xué)生主動(dòng)分析問題、解決問題的能力2.培養(yǎng)精益求精的工匠精神3.培養(yǎng)學(xué)生的創(chuàng)新思維教學(xué)重點(diǎn)列表的嵌套及其樣式設(shè)置教學(xué)難點(diǎn)定位、列表、超鏈接等多個(gè)元素的綜合應(yīng)用信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】觀看微課視頻——子任務(wù)06-2使用列表制作多級(jí)導(dǎo)航并完成教學(xué)平臺(tái)的課前自測題【課中】課程導(dǎo)入（5分鐘）我們?cè)谶M(jìn)行網(wǎng)站首頁的設(shè)計(jì)時(shí)，經(jīng)常會(huì)苦于內(nèi)容太多，空間太小，特別是對(duì)于商城類網(wǎng)站，既要能夠盡可能多地展示內(nèi)容，還要清晰簡潔、層次分明，便于引導(dǎo)用戶訪問，這就需要對(duì)原有的導(dǎo)航菜單進(jìn)行擴(kuò)充，使之能夠容納更多的信息，多級(jí)導(dǎo)航菜單就應(yīng)運(yùn)而生了。任務(wù)提出（10分鐘）瀏覽小米網(wǎng)上商城的首頁，觀察二級(jí)導(dǎo)航菜單效果。思考：我們已經(jīng)能夠使用絕對(duì)定位控制二級(jí)菜單的出現(xiàn)位置，但是更細(xì)節(jié)的部分，例如處理多級(jí)菜單內(nèi)部復(fù)雜的層級(jí)關(guān)系，如何實(shí)現(xiàn)？分析討論（10分鐘）通過列表+超鏈接+CSS組合應(yīng)用，我們可以實(shí)現(xiàn)二級(jí)導(dǎo)航菜單，如果想加子菜單，繼續(xù)嵌套u(yù)l/ol標(biāo)記及子標(biāo)記就可以了。知識(shí)點(diǎn)講解1.水平二級(jí)導(dǎo)航菜單制作（40分鐘）首先，在body中按照菜單項(xiàng)的層級(jí)添加列表元素。然后，進(jìn)行CSS樣式的設(shè)置。（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對(duì)主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對(duì)定位，下拉菜單容器設(shè)置成絕對(duì)定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級(jí)下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。教師引導(dǎo)，學(xué)生實(shí)踐2.豎直伸縮型二級(jí)菜單制作（20分鐘）在上一個(gè)案例的基礎(chǔ)上學(xué)生自主完成。教師引導(dǎo)答疑項(xiàng)目實(shí)踐使用列表完成網(wǎng)上商城首頁左側(cè)導(dǎo)航菜單的二級(jí)導(dǎo)航效果，正常情況下導(dǎo)航菜單背景顏色為#455159，鼠標(biāo)放上背景色為#ff6700，二級(jí)導(dǎo)航菜單可在圖示文本的基礎(chǔ)上加上圖片。小結(jié)（10分鐘）每位同學(xué)使用云記事本總結(jié)本次課的主要內(nèi)容，修訂課前自測題。教師補(bǔ)充?！菊n后】平臺(tái)提交作業(yè)：將小米官網(wǎng)的二級(jí)導(dǎo)航菜單完成后提交。從不同角度看待同一個(gè)事物，會(huì)得到不同的結(jié)論。在html中列表標(biāo)記經(jīng)常會(huì)用于導(dǎo)航。培養(yǎng)學(xué)生主動(dòng)分析問題、解決問題的能力只有堅(jiān)持學(xué)習(xí)、持續(xù)學(xué)習(xí),不斷攀登知識(shí)高峰,才能淬煉成鋼,書寫絢爛無悔的青春在中國，雷軍已經(jīng)成為了一個(gè)傳奇人物，在被問及公司使命時(shí)，雷軍援引日本小說家田中芳樹的作品《銀河英雄傳說》中的一句話作答——“我們的征途是星辰大海?！弊鳛槿蚴謾C(jī)市場中一個(gè)不被看好的民族品牌，小米的定位時(shí)以公道的價(jià)格提供優(yōu)質(zhì)的國產(chǎn)商品。準(zhǔn)確的定位成就了雷軍以及小米的輝煌。

任務(wù)07使用彈性盒布局二級(jí)導(dǎo)航菜單教案名稱子項(xiàng)目07-1使用彈性盒布局二級(jí)導(dǎo)航菜單計(jì)劃學(xué)時(shí)4學(xué)時(shí)教學(xué)內(nèi)容1.彈性盒布局的概念2.彈性容器的常用屬性設(shè)置3.使用彈性盒子進(jìn)行頁面布局并進(jìn)行樣式設(shè)置4.根據(jù)需要選擇合適的頁面布局方式知識(shí)目標(biāo)1.掌握彈性盒布局的概念2.掌握彈性容器的常用屬性設(shè)置能力目標(biāo)1.學(xué)會(huì)使用彈性盒子進(jìn)行頁面布局并進(jìn)行樣式設(shè)置2.能夠根據(jù)需要選擇合適的頁面布局方式素質(zhì)目標(biāo)1.提高自主探究能力2.培養(yǎng)學(xué)生創(chuàng)新意識(shí)3.培養(yǎng)堅(jiān)持不懈的職業(yè)精神教學(xué)重點(diǎn)使用彈性盒子進(jìn)行頁面布局并進(jìn)行樣式設(shè)置教學(xué)難點(diǎn)根據(jù)需要選擇合適的頁面布局方式信息化教學(xué)資源職教云教學(xué)平臺(tái)“網(wǎng)頁設(shè)計(jì)與開發(fā)”課程設(shè)計(jì)欄目教學(xué)環(huán)境教學(xué)做一體化機(jī)房的計(jì)算機(jī)需安裝配置HBuilderX開發(fā)環(huán)境和Google瀏覽器，網(wǎng)絡(luò)狀況良好，可登錄網(wǎng)上學(xué)習(xí)平臺(tái)教學(xué)方法任務(wù)驅(qū)動(dòng)法、討論法、教練式教學(xué)法思政融入方法體驗(yàn)探究法、情景引入法教學(xué)活動(dòng)及主要環(huán)節(jié)思政元素融入【課前】1.觀看微課視頻——子任務(wù)07使用彈性盒布局二級(jí)導(dǎo)航2.瀏覽常見網(wǎng)站的頁面布局（學(xué)校官網(wǎng)、百度、淘寶等），分析并思考用已經(jīng)學(xué)習(xí)的知識(shí)能否實(shí)現(xiàn)？【課中】課程導(dǎo)入什么是CSS3彈性盒子？有什么功能？（10分鐘）CSS彈性盒子布局是CSS3的模塊之一，定義了一種針對(duì)用戶界面設(shè)計(jì)而優(yōu)化的CSS盒子模型。在彈性布局模型中，彈性容器的子元素可以在行或者列上排列，也可以“彈性伸縮”其尺寸，既可以增加尺寸以填滿未使用的空間，也可以收縮尺寸以避免父元素溢出。例如上個(gè)子任務(wù)中左側(cè)導(dǎo)航二級(jí)子菜單的個(gè)數(shù)不固定，就可以將子菜單設(shè)置成“可伸縮”的彈性盒子，從而動(dòng)態(tài)改變子菜單的寬度大小。知識(shí)點(diǎn)講解一、設(shè)置CSS3彈性盒子（15分鐘）同學(xué)根據(jù)微課視頻學(xué)習(xí)：彈性盒子及設(shè)置父級(jí)盒子屬性方法1.彈性盒子由彈性容器（Flexcontainer）和彈性子元素（Flexitem）組成。2.設(shè)置父級(jí)盒子的display屬性的值為flex或inline-flex可將其定義為彈性容器，彈性容器內(nèi)包含一個(gè)或多個(gè)彈性子元素。彈