《WEB前端開發(fā)案例教程》教學(xué)教案(上)

1、WEB前端開發(fā)案例教程教學(xué)教案（上）課程名稱任務(wù)、項(xiàng)目、課題名稱教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)網(wǎng)頁設(shè)計(jì)基礎(chǔ)網(wǎng)頁的相關(guān)知識(shí)網(wǎng)站設(shè)計(jì)流程掌握網(wǎng)頁的相關(guān)知識(shí)了解網(wǎng)站設(shè)計(jì)流程網(wǎng)頁相關(guān)概念網(wǎng)站設(shè)計(jì)流程WEB前端開發(fā)（1）課次課時(shí)12學(xué)時(shí)教學(xué)活動(dòng)及主要環(huán)節(jié)導(dǎo)入新課：（2分鐘）1有無制作過網(wǎng)頁？2以前學(xué)過的網(wǎng)頁課程？課程介紹：(10分鐘)本學(xué)期主要學(xué)習(xí)如下內(nèi)容：1）HTML52）DreamweaverCC2018網(wǎng)頁制作編輯軟件的使用3）CSS的使用4)DIV+CSS網(wǎng)頁布局考試方法：平時(shí)成績（40）+期末考試（60）平時(shí)40分：到課率10分+提交實(shí)驗(yàn)作業(yè)10分+上課表現(xiàn)10分+作品10分新授：一、網(wǎng)頁展

2、示與認(rèn)識(shí)（展示百度、淘寶官網(wǎng)，歷屆學(xué)生的優(yōu)秀作品）10分鐘）（動(dòng)手操作，任意打開一個(gè)網(wǎng)頁，查看網(wǎng)頁源代碼學(xué)生一起操作，實(shí)現(xiàn)教學(xué)做一體化）在學(xué)習(xí)創(chuàng)建網(wǎng)站、制作網(wǎng)頁之前，我們先瀏覽幾個(gè)網(wǎng)站，對(duì)這些網(wǎng)站的主頁進(jìn)行分析，了解優(yōu)秀網(wǎng)頁的布局結(jié)構(gòu)、色彩搭配、導(dǎo)航欄的設(shè)計(jì)、動(dòng)畫效果等。二、相關(guān)概念（15分鐘）1、IP地址和域名2、URL：統(tǒng)一資源定位符3、HTTP：超文本傳輸協(xié)議，提供一種發(fā)布和接收HTML頁面的方法。4、網(wǎng)站、網(wǎng)頁與主頁：主頁通常用index.htm或index.html表示。15、HTML:超文本標(biāo)記語言，在網(wǎng)頁空白位置單擊鼠標(biāo)右鍵，選擇“查看源文件”命令即可查看網(wǎng)頁源代碼。（學(xué)生操作）

3、6.WEB標(biāo)準(zhǔn)：包括結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）、表現(xiàn)標(biāo)準(zhǔn)(CSS)和行為標(biāo)準(zhǔn)(JAVASCRIPT).三、HTML5概述（13分鐘）HTML5主要優(yōu)勢(shì)：（1）良好的移植性（2）更直觀的結(jié)構(gòu)。（3）內(nèi)容和樣式分離。（4）新的表單元素。（5）更方便地嵌入音頻和視頻。（6）矢量圖繪制。（演示canvas畫布）四、常用的瀏覽器（5分鐘）三大瀏覽器：IE、火狐FireFox、谷歌Chrome（推薦使用）。總結(jié)：（5分鐘）本節(jié)介紹與網(wǎng)頁有關(guān)的一些基本常識(shí)和基本概念，介紹HTML的基本工作原理，以及常用的網(wǎng)頁制作工具、網(wǎng)頁設(shè)計(jì)流程等。作業(yè)：理解IP地址、域名、URL、HTTP、HTML的概念。預(yù)習(xí)：DW工具的使用

4、課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）Dreamweaver工具的使用課次課時(shí)22學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)Dreamweaver工具的使用新建HTML5頁面熟悉Dreamweaver操作界面掌握新建HTML5頁面的方法掌握新建HTML5頁面的方法Dreamweaver工具的使用教學(xué)活動(dòng)及主要環(huán)節(jié)2復(fù)習(xí)提問（5分鐘）URL/HTTP/HTML的含義導(dǎo)入新課：（3分鐘）制作網(wǎng)頁的工具很多（Hbuilder、VScode等課下可自行了解，大同小異），Dreamweaver就是其中一種，它提供的可視化設(shè)計(jì)環(huán)境可非常方便地創(chuàng)建和編輯網(wǎng)頁.因此本節(jié)介紹該軟件的基本使用。）（超星平臺(tái)利

5、用“隨機(jī)選人”功能，學(xué)生回答問題。新授：一、DreamweaverCC2018界面介紹（2分鐘）1、初始化設(shè)置（10分鐘）（學(xué)生跟隨教師一起操作）工作區(qū)布局設(shè)置字體選擇菜單欄中的【編輯】【首選項(xiàng)】選項(xiàng)，分類列表中選擇“字體”，右側(cè)設(shè)置“代碼視圖”合適的字號(hào)大小。設(shè)置界面分類列表中選擇“界面”，更改可應(yīng)用程序主題和代碼主題更改主瀏覽器和次瀏覽器分類列表中選擇“實(shí)時(shí)預(yù)覽”，主瀏覽器快捷鍵F122、界面介紹（15分鐘）（教師演示知識(shí)點(diǎn)涉及的具體操作）菜單欄：文件、編輯、站點(diǎn)、窗口工具欄：“格式化源代碼”按鈕、“應(yīng)用注釋”按鈕、“刪除注釋”按鈕3浮動(dòng)面板：“文件”面板二、新建HTML5頁面（15分鐘）

6、（學(xué)生跟隨教師一起操作）“文件”“新建”，打開“新建文檔”對(duì)話框，單擊“創(chuàng)建”按鈕。（演示后讓學(xué)生總結(jié)，確保每一個(gè)同學(xué)都會(huì)新建網(wǎng)頁文件）在標(biāo)記中寫入一個(gè)段落標(biāo)記，輸入內(nèi)容“這是我的第一個(gè)網(wǎng)頁文件”。F12再瀏覽器預(yù)覽。（注：因電腦設(shè)置，部分電腦按Fn+F12預(yù)覽）小結(jié)：（5分鐘）熟悉DW界面構(gòu)成、DW的運(yùn)行環(huán)境，會(huì)創(chuàng)建最簡單的網(wǎng)頁文件并運(yùn)行。作業(yè)：實(shí)訓(xùn)一超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）HTML標(biāo)記及其屬性課次課時(shí)32學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)HTML文檔的基本結(jié)構(gòu)HTML標(biāo)記HTML標(biāo)記屬性了解HTML文檔的基本結(jié)構(gòu)掌握HTML標(biāo)記的基本語法格式掌握HTML標(biāo)

7、記屬性規(guī)則HTML標(biāo)記的基本語法格式HTML標(biāo)記屬性規(guī)則教學(xué)活動(dòng)及主要環(huán)節(jié)4復(fù)習(xí)提問（5分鐘）使用DW創(chuàng)建網(wǎng)頁文件的步驟？（一名學(xué)生回答，其余同學(xué)用電腦操作）導(dǎo)入新課：（3分鐘）第一節(jié)課我們了解了如何查看網(wǎng)頁源代碼，HTML標(biāo)記語言構(gòu)成了網(wǎng)頁的具體內(nèi)容，因此了解和掌握HTML語言也是非常必要的，因此本章學(xué)習(xí)HTML語言的使用。新授：三、HTML文檔的基本結(jié)構(gòu)（20分鐘）一個(gè)WEB頁對(duì)應(yīng)于一個(gè)HTML文件，通常以.html或.htm為擴(kuò)展名。HTML文檔的基本結(jié)構(gòu)如下：（學(xué)生觀察自己新建好的網(wǎng)頁文件基本結(jié)構(gòu)）這里是網(wǎng)頁的標(biāo)題這是頁面上顯示的內(nèi)容，網(wǎng)頁的主體部分（教師講解每一部分標(biāo)記的內(nèi)容）1:用

8、來標(biāo)識(shí)HTML文檔。2:頭部標(biāo)記，提供一些與WEB頁有關(guān)的特定信息。例如網(wǎng)頁的標(biāo)題、定義樣式表、插入腳本等。3:用于定義網(wǎng)頁的標(biāo)題。4:主體標(biāo)記，包括WEB頁的具體內(nèi)容，包括文字、圖形、超鏈接以及其他各種HTML對(duì)象。四、HTML的基本語法1標(biāo)記（15分鐘）標(biāo)記的格式：受標(biāo)記影響的內(nèi)容標(biāo)記的規(guī)則：標(biāo)記以結(jié)束。標(biāo)記一般由開始標(biāo)記和結(jié)束標(biāo)記組成。結(jié)束標(biāo)記前有/符號(hào)。少數(shù)標(biāo)記只有開始標(biāo)記，無結(jié)束標(biāo)記。如.5標(biāo)記不區(qū)分大小寫，但一般用小寫?？梢酝瑫r(shí)使用多個(gè)標(biāo)記共同作用，各標(biāo)記之間的順序任意。（超星選人功能，學(xué)生總結(jié)回答）2標(biāo)記的屬性（15分鐘）屬性的規(guī)則：所有屬性必須在開始標(biāo)記里，不同屬性間用空格隔開

9、。每個(gè)屬性都有默認(rèn)值，值放在相應(yīng)的屬性后，用等號(hào)分隔；用雙引號(hào)括起來，雙引號(hào)可省略。屬性之間順序任意。小結(jié)：（5分鐘）（教師提問）HTML文檔的基本結(jié)構(gòu)HTML標(biāo)記HTML標(biāo)記屬性作業(yè)：實(shí)訓(xùn)二超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）HTML文本標(biāo)記課次課時(shí)42學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)HTML文本標(biāo)記理解HTML文本標(biāo)記的作用、掌握其使用HTML文本標(biāo)記HTML文本標(biāo)記教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)提問：（5分鐘）HTML文檔的基本頁面結(jié)構(gòu)？（超星平臺(tái)利用“隨機(jī)選人”功能，學(xué)生回答問題）導(dǎo)入新課：（3分鐘）6網(wǎng)頁中出現(xiàn)最多的元素的文本元素和圖像元素，這些內(nèi)容如何顯示在瀏覽器中

10、的呢？這節(jié)課我們來介紹一下常用的HTML文本標(biāo)記。新授：（教師通過古詩案例貫穿講解段落標(biāo)記、換行標(biāo)記、標(biāo)題標(biāo)記、水平線標(biāo)記、字體樣式標(biāo)記、特殊字符標(biāo)記，實(shí)現(xiàn)教學(xué)做一體化）五、段落標(biāo)記align屬性：用于設(shè)置段落的對(duì)齊方式。六、換行標(biāo)記單標(biāo)記格式：文本注意：需要產(chǎn)生多個(gè)空行，可以連續(xù)使用多個(gè)標(biāo)記實(shí)現(xiàn)。七、標(biāo)題標(biāo)記標(biāo)識(shí)文檔中的標(biāo)題和副標(biāo)題，其中n是1到6的數(shù)字；表示1到6級(jí)標(biāo)題。align屬性：設(shè)置對(duì)齊方式,left(默認(rèn))、center、right。說明：瀏覽器在解釋標(biāo)題標(biāo)記符時(shí)，會(huì)自動(dòng)改變文本的大小并將字體設(shè)為黑體，同時(shí)自動(dòng)將內(nèi)容設(shè)置為一個(gè)段落。四、水平線標(biāo)記單標(biāo)記添加水平線可以使文字隔開，起

11、到修飾頁面的作用。五、字體樣式標(biāo)記符粗體：,斜體:,刪除線：,下劃線：,六、特殊字符如果用戶需要在網(wǎng)頁中顯示某些特殊字符，如：>；：<；&:&；空格： ；注意：轉(zhuǎn)義字符輸入時(shí)，必須區(qū)分大小寫。7小結(jié)：標(biāo)題標(biāo)記段落標(biāo)記水平線標(biāo)記換行標(biāo)記字體樣式標(biāo)記特殊字符（超星平臺(tái)利用“隨機(jī)選人”功能，學(xué)生回答問題）作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）HTML列表標(biāo)記課次課時(shí)52學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)HTML列表標(biāo)記：無序列表、有序列表、自定義列表、列表的嵌套理解HTML列表標(biāo)記的作用、掌握其使用HTML列表標(biāo)記：無序列表、有序列表、自定義列表列表的

12、嵌套教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)提問：（3分鐘）HTML標(biāo)題標(biāo)記有哪些？（超星平臺(tái)利用“隨機(jī)選人”功能，學(xué)生回答問題）導(dǎo)入新課：（2分鐘）列表是一種最常用的組織信息的方式，HTML提供了用于實(shí)現(xiàn)列表的標(biāo)記。列表樣式有無序列表、有序列表、自定義列表，這節(jié)課我們來學(xué)習(xí)一下HTML列表標(biāo)記。新授：（教師通過案例講解有序列表、無序列表、列表的嵌套、自定義列表，實(shí)現(xiàn)教學(xué)做一體化）八、有序列表（10分鐘）常用格式：列表項(xiàng)1列表項(xiàng)2列表項(xiàng)38說明：type屬性用來設(shè)置數(shù)字序列樣式。屬性值可以為：1(默認(rèn)值),A,a,I,i。Start屬性設(shè)置序列的起始值，可以是任意整數(shù)。（10九、無序列表(unorderedli

13、st)分鐘）常用格式：列表項(xiàng)1列表項(xiàng)2列表項(xiàng)3說明：type屬性用來設(shè)置項(xiàng)目符號(hào)的類型。屬性值可以為：disc(默認(rèn)值),circle,square,分別表示實(shí)心圓點(diǎn)、空心圓點(diǎn)和方塊。（學(xué)生獨(dú)立思考，做完找老師簽字）十、列表嵌套（10分鐘）有序列表和無序列表自身可以嵌套，彼此之間也可以進(jìn)行嵌套。參考課本25頁。課堂練習(xí)：列表嵌套的案例（10分鐘）十一、自定義列表（10分鐘）自定義列表項(xiàng)前沒有任何項(xiàng)目符號(hào)。語法如下：標(biāo)題1數(shù)據(jù)1數(shù)據(jù)2標(biāo)題2數(shù)據(jù)1數(shù)據(jù)2小結(jié)：（3分鐘）有序列表無序列表9列表的嵌套自定義列表（超星平臺(tái)利用“隨機(jī)選人”功能，學(xué)生回答問題）作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WE

14、B前端開發(fā)（1）HTML超鏈接標(biāo)記課次課時(shí)62學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)HTML超鏈接標(biāo)記HTML超鏈接的類型絕對(duì)URL與相對(duì)URL理解HTML超鏈接標(biāo)記的作用、掌握其使用HTML超鏈接標(biāo)記HTML超鏈接的類型絕對(duì)URL與相對(duì)URL教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)提問：HTML列表標(biāo)記有幾種？導(dǎo)入新課：超鏈接是所有網(wǎng)站都具有的重要特征，通過超鏈接我們可以實(shí)現(xiàn)網(wǎng)頁之間的鏈接，接下來我們一起來學(xué)習(xí)超鏈接的相關(guān)知識(shí)。（將簡單學(xué)院官網(wǎng)首頁設(shè)置超鏈接效果）新授：一、創(chuàng)建超鏈接超鏈接(hyperlink):是實(shí)現(xiàn)不同頁面之間或者不同網(wǎng)站之間信息瀏覽的主要手段。包括頁面鏈接、錨點(diǎn)鏈接、電子郵件鏈接。創(chuàng)建超鏈

15、接需要使用標(biāo)記符。它的基本屬性是href，用于指定鏈接的目標(biāo)。通過為href指定不同的值，可以創(chuàng)建出不同類型的超鏈接。title屬性設(shè)置鼠標(biāo)指向超鏈接時(shí)顯示的文字。在文字和圖像上都可以創(chuàng)建超鏈接。target屬性用于設(shè)置打開新的鏈接時(shí)是否在新的窗口打開。二什么是URL（教師演示，學(xué)生動(dòng)手操作，實(shí)現(xiàn)教學(xué)做一體化）URL(UniversalResourceLocator,統(tǒng)一資源定位器)是表示W(wǎng)EB上資源的一種方法。10例如，在指定Internet資源時(shí)，可以使用絕對(duì)路徑，也可以使用相對(duì)路徑。即絕對(duì)URL和相對(duì)URL.絕對(duì)URL：是指Internet上資源的完整地址，包括協(xié)議名、計(jì)算機(jī)域名和文檔名

16、。/haoserver/wn.htm相對(duì)URL：是指Internet上資源相對(duì)于當(dāng)前頁面的地址，它包含從當(dāng)前頁面指向目的頁面位置的路徑。使用相對(duì)URL時(shí)用./表示上一級(jí)目錄。注意：用戶在編寫網(wǎng)頁時(shí)，通常使用的都是相對(duì)URL.三創(chuàng)建頁面鏈接頁面鏈接是最常見的超鏈接，單擊頁面鏈接時(shí)可跳轉(zhuǎn)到相應(yīng)的網(wǎng)頁。如果超連接的目標(biāo)網(wǎng)頁位于同一站點(diǎn)，則可以使用相對(duì)URL;如果超鏈接的目標(biāo)網(wǎng)頁位于其他位置，則需要指定絕對(duì)URL.格式：超鏈接的文字超鏈接示例這是一個(gè)超鏈接鏈接到百度說明：超鏈接默認(rèn)有下劃線，并且顯示為藍(lán)色。使用超鏈接時(shí)，一定要確保href屬性所指定的頁面在指定位置是存在的。若鏈接的網(wǎng)頁文件不在當(dāng)前目錄

17、中，則需指定路徑。鏈接到上一級(jí)目錄中的文件11這是一個(gè)超鏈接鏈接到下一級(jí)目錄web中的文件這是一個(gè)超鏈接鏈接到同一級(jí)不同目錄web中的文件這是一個(gè)超鏈接四創(chuàng)建電子郵件鏈接使用如下格式可鏈接到指定的電子郵件。當(dāng)用戶指向電子郵件的超鏈接時(shí)，會(huì)默認(rèn)啟動(dòng)OutlookExpress.小結(jié)：創(chuàng)建超鏈接URL:絕對(duì)URL、相對(duì)URL創(chuàng)建頁面超鏈接創(chuàng)建電子郵件鏈接作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）HTML圖像標(biāo)記課次課時(shí)72學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)復(fù)習(xí)演示：1HTML圖像標(biāo)記常用的圖像格式為圖像創(chuàng)建超鏈接理解HTML圖像標(biāo)記的作用、掌握其使用HTML圖像標(biāo)記常用的圖像

18、格式為圖像創(chuàng)建超鏈接為圖像創(chuàng)建超鏈接教學(xué)活動(dòng)及主要環(huán)節(jié)為頁面與頁面之間創(chuàng)建超鏈接？導(dǎo)入新課：圖像是所有網(wǎng)站都具有的重要特征，如何在網(wǎng)頁中插入圖像呢？新授：一Web頁圖像格式常用的有GIF.JPEG.PNG三種標(biāo)準(zhǔn)的位圖格式。12GIF格式GIF格式可以高度壓縮圖像，但它只能包含最多256種顏色，不適于表現(xiàn)真彩色照片或具有漸變色的圖片。GIF格式可以支持動(dòng)畫效果。JPEG格式它支持的顏色數(shù)幾乎沒有限制，因此適用于使用真彩色或平滑過渡色的照片和圖片。PNG格式PortableNetworksGraphics,可移植的網(wǎng)絡(luò)圖形格式，是近年來新出現(xiàn)的一種圖像格式。.二插入圖像使用標(biāo)記img在網(wǎng)頁中插入

19、圖像。HTML代碼如下：無標(biāo)題文檔在西藏自助旅行，為高原神奇的風(fēng)景如癡如醉的同時(shí)。說明屬性的含義(學(xué)生自行查閱HTML5文檔，超星選人進(jìn)行知識(shí)分享)三建立圖像超鏈接：使用標(biāo)記也可創(chuàng)建圖像的超鏈接。13小結(jié)：HTML圖像標(biāo)記常用的圖像格式為圖像創(chuàng)建超鏈接課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）HTML5結(jié)構(gòu)元素課次課時(shí)82學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)掌握HTML5結(jié)構(gòu)元素理解HTML5結(jié)構(gòu)元素的使用HTML5結(jié)構(gòu)元素HTML5結(jié)構(gòu)元素的應(yīng)用教學(xué)活動(dòng)及主要環(huán)節(jié)導(dǎo)入新課：HTML5中新增了幾個(gè)結(jié)構(gòu)元素，這些元素的作用與塊元素非常相似，通過運(yùn)用這些結(jié)構(gòu)元素，可以讓網(wǎng)頁的整體結(jié)構(gòu)更加直觀

20、和明確、更加具有語義化和更具有現(xiàn)代風(fēng)格。新授：一、header元素header元素為頁面或頁面中某一個(gè)區(qū)塊的頁眉，通常是一些引導(dǎo)和導(dǎo)航信息。它可以包含頁面標(biāo)題、logo圖片，搜索表單等。語法格式：標(biāo)題二、nav元素nav元素定義頁面的導(dǎo)航鏈接部分區(qū)域，引用nav元素可以讓頁面元素的語義更加明確。通常nav元素用于以下幾種場(chǎng)合。傳統(tǒng)的導(dǎo)航條。側(cè)邊欄導(dǎo)航。內(nèi)頁導(dǎo)航。翻頁導(dǎo)航。三、section元素section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁面的內(nèi)容進(jìn)行分塊，表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題。Section元素通常用于有文章的章節(jié)、頁眉、頁腳或文檔中的其他部分。14四、article元素artic

21、le元素用來定義獨(dú)立的內(nèi)容，該元素定義的內(nèi)容可獨(dú)立于其它的內(nèi)容使用。它可以是一篇博客或報(bào)刊中的文章、一篇論壇帖子、一段用戶評(píng)或獨(dú)立的插件等。五、aside元素aside元素通常用來表示當(dāng)前頁面的附屬信息部分，它可以包含我們當(dāng)前頁面或者主題內(nèi)容相關(guān)的一些引用，如側(cè)邊欄、廣告、目錄、索引、Web應(yīng)用、鏈接、當(dāng)前頁內(nèi)容簡介等，有別與我們主要內(nèi)容。六、footer元素footer元素用于定義頁面或區(qū)域的頁腳，可以為網(wǎng)站的版權(quán)信息、作者、日期及聯(lián)系信息。一個(gè)頁面中可以包含多個(gè)footer元素，也可以在section元素或article元素中使用footer元素。小結(jié)：header元素nav元素secti

22、on元素article元素aside元素footer元素課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）HTML5分組元素、HTML5頁面交互元素、HTML5語義元素課次課時(shí)92學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)掌握HTML5分組元素、HTML5頁面交互元素、HTML5語義元素理解HTML5分組元素、HTML5頁面交互元素、HTML5語義元素的使用HTML5分組元素、HTML5頁面交互元素、HTML5語義元素HTML5分組元素、HTML5頁面交互元素、HTML5語義元素的應(yīng)用教學(xué)活動(dòng)及主要環(huán)節(jié)導(dǎo)入新課：分組元素用于對(duì)頁面元素進(jìn)行分組。我們熟悉的div、p、ol、ul都是分組元素標(biāo)記，本節(jié)來看

23、3個(gè)新加的分組元素，分別是figure元素、figcaption元素和hgroup元素。新授：（操作課本案例，在操作的過程中，更好理解分組元素的意義）七、figure元素和figcaption元素15figure元素用來定義一塊獨(dú)立內(nèi)容，該內(nèi)容如果被刪除也不會(huì)對(duì)周圍的內(nèi)容有影響。它可以用來表示圖片、圖表、音頻、視頻，代碼等。figcaption元素用于為figure元素組添加標(biāo)題。八、hgroup元素hgroup元素用于對(duì)網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。它常與h1h6元素組合使用。通常，將hgroup元素放在header元素中。九、details和summary元素details元

24、素用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。summary元素經(jīng)常與details元素配合使用，作為details元素的第一個(gè)子元素，用于為details定義標(biāo)題。十、progress元素progress元素定義運(yùn)行中的任務(wù)進(jìn)度（進(jìn)程）。如Windows系統(tǒng)中軟件的安裝、文件的復(fù)制等場(chǎng)景的進(jìn)度。progress元素的常用屬性值有兩個(gè)，具體如下。（1）value：已經(jīng)完成的工作量。（2）max：總共有多少工作量。十一、meter元素meter元素用于表示指定范圍內(nèi)的數(shù)值。如磁盤使用情況、查詢結(jié)果、或投票比例等，都可以使用meter元素。屬性highlowmaxminoptimumvalue說明定義度量的

25、值位于哪個(gè)點(diǎn)被界定為高的值定義度量的值位于哪個(gè)點(diǎn)被界定為低的值定義最大值，默認(rèn)值是1定義最小值，默認(rèn)值是0定義什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好定義度量的值十二、time元素time元素用來定義公歷的時(shí)間（24小時(shí)制）或日期。time元素不會(huì)在任何瀏覽器中呈現(xiàn)任何特殊效果。但能夠以機(jī)器可讀的方式對(duì)日期和時(shí)間進(jìn)行編碼。十三、mark元素16mark元素的主要功能是高亮顯示文本或字符，以引起用戶注意。其用法與strong類似，但是mark元素更隨意靈活。十四、cite元素cite元素用來表示它所包含的文本對(duì)某個(gè)參考

26、文獻(xiàn)的引用，比如書籍或者雜志的標(biāo)題。被引用的文本將以斜體顯示，以和其他見容區(qū)分。小結(jié)：figure元素和figcaption元素hgroup元素details和summary元素progress元素meter元素課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）引入CSS的方法課次課時(shí)102學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)CSS樣式表的概念樣式表的創(chuàng)建及引用掌握CSS樣式表的概念掌握樣式表的創(chuàng)建及使用方法樣式表的創(chuàng)建及使用方法樣式表的創(chuàng)建及使用方法教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)演示：1.為頁面與頁面之間創(chuàng)建超鏈接？導(dǎo)入新課：網(wǎng)頁如何變得美觀？新授：一CSS概述：CSS（CascadingStyleS

27、heets）層疊樣式表。是一種格式化網(wǎng)頁的標(biāo)準(zhǔn)格式，它擴(kuò)展了HTML的功能，使網(wǎng)頁設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁格式。HTML+CSS:html沒有裝修的房子css裝修房子的過程（美化）精美的頁面CSS樣式表是由一系列樣式選擇器和CSS屬性組成的，它支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩?、列表屬性及精確定位網(wǎng)頁元素等屬性，從而大大增進(jìn)了網(wǎng)頁的格式化能力。二HTML中引入CSS的方法（例子演示）17（1）行內(nèi)式行內(nèi)式即在標(biāo)記的style屬性中設(shè)定CSS樣式，這種方式本質(zhì)上沒有體現(xiàn)出CSS的優(yōu)勢(shì)，因此不推薦使用。例如：這是一行文本(2)嵌入式：即內(nèi)部樣式表嵌入式將對(duì)頁面中各種元素的設(shè)置

28、寫在之間。例如：h1color:white;background-color:blue(3)鏈接式:外部樣式表最常用的方式例：小結(jié)：CSS概述行內(nèi)式內(nèi)嵌式外鏈?zhǔn)阶鳂I(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS選擇器（1）課次課時(shí)112學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)CSS選擇器：標(biāo)記選擇器、類選擇器、ID選擇器掌握CSS選擇器：標(biāo)記選擇器、類選擇器、ID選擇器CSS選擇器：標(biāo)記選擇器、類選擇器、ID選擇器CSS選擇器的使用方法教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)演示：如何通過外鏈?zhǔn)竭M(jìn)行樣式設(shè)置？（操作演示）導(dǎo)入新課：18什么是CSS選擇器呢？新授：1.標(biāo)記選擇器（body,h1,h2

29、,h6,p,ul,ol,dl,table,td,tr.）h1屬性：值;屬性：值;屬性：值;屬性：值;h2屬性：值;屬性：值;屬性：值;屬性：值;p屬性：值;屬性：值;屬性：值;屬性：值;2.類別選擇器（類選擇器）.class屬性：值;屬性：值;Class為選擇器類別的名稱（名稱不能是中文，最好是英文單詞或拼音）CSS類別選擇器.title1background-color:#0CF;color:#fff;.title2background-color:#9C0;color:#f00;這是第一段的內(nèi)容。19這是第二段的內(nèi)容。3.ID選擇器(代表唯一)#onebackground-color:#0

30、CF;color:#fff;width:200px;height:200px;#twobackground-color:#9C0;color:#f00;width:200px;height:200px;這是第一個(gè)塊的內(nèi)容。這是第二個(gè)塊的內(nèi)容。注意：CSS樣式的優(yōu)先規(guī)則：行內(nèi)樣式ID樣式類別樣式標(biāo)記樣式小結(jié)：標(biāo)記選擇器類選擇器ID選擇器作業(yè)：課下鞏固復(fù)習(xí)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS選擇器（2）課次課時(shí)122學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)CSS選擇器：交集選擇器、并集擇器、后代選擇器、通配符選擇器掌握CSS選擇器：交集選擇器、并集擇器、后代選擇器、通配符選擇器CSS選擇器：

31、交集選擇器、并集擇器、后代選擇器、通配符選擇器20教學(xué)難點(diǎn)CSS選擇器的使用方法教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)演示：類選擇器如何進(jìn)行樣式的書寫？（操作演示）導(dǎo)入新課：上節(jié)課學(xué)習(xí)了基本的CSS選擇器，除了這些選擇器還有哪些選擇器呢？新授：（操作課本案例，在操作的過程中，更好理解選擇器的意義）一、交集選擇器交集選擇器由兩個(gè)選擇器構(gòu)成，第一個(gè)是標(biāo)記選擇器，第二個(gè)是類選擇器，表示二者各自元素范圍的交集。兩個(gè)選擇器之間不能有空格。其語法格式如下：標(biāo)記名稱.類名稱屬性：屬性值；屬性：屬性值；.二、并集選擇器如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式，并集選擇器由各

32、個(gè)選擇器通過逗號(hào)連接而成，任何形式的選擇器（標(biāo)記選擇器、類選擇器、ID選擇器等），都可以作為并集選擇器的一部分。h1,h2,pfont-size:24px;color:blue;三、后代選擇器后代選擇器也叫包含選擇器，用于對(duì)容器對(duì)象中的子對(duì)象進(jìn)行控制，使其他容器對(duì)象中的同名子對(duì)象不受影響。后代選擇器書寫時(shí)將容器對(duì)象寫在前面，子對(duì)象寫在后面，中間用空格分隔。若容器對(duì)象有多層時(shí)，則分層依次書寫。pstrongfont-size:24px;color:red;四、通配符選擇器通配符選擇器用“*”表示，它是所有選擇器作用范圍最廣的，能匹配頁面中的所有元素。其基本語法格式如下：*屬性：屬性值；屬性：屬性

33、值；.小結(jié)：交集選擇器并集選擇器后代選擇器21通配符選擇器作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS常用文本屬性課次課時(shí)132學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)CSS常用文本屬性：字體、字號(hào)、粗細(xì)、傾斜、文本裝飾、顏色、對(duì)齊方式、首行縮進(jìn)、行高掌握CSS常用文本屬性及使用方法CSS常用文本屬性：字體、字號(hào)、粗細(xì)、傾斜、文本裝飾、顏色、對(duì)齊方式、首行縮進(jìn)、行高CSS常用文本屬性的應(yīng)用教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)演示：后代選擇器如何進(jìn)行樣式的書寫？（操作演示）導(dǎo)入新課：學(xué)習(xí)HTML時(shí)，可以使用文本樣式標(biāo)記及其屬性控制文本的顯示樣式，但是這種方式繁瑣且不利于代碼的共享和移植。為

34、此，CSS提供了相應(yīng)的文本設(shè)置屬性。使用CSS可以更輕松方便的控制文本樣式。新授：（案例演示）一CSS字體樣式屬性（通過案例將字體樣式屬性進(jìn)行演示）（1）font-size:字號(hào)大小font-size屬性用于設(shè)置字號(hào)，一般用像素（px）表示。(2)font-family:字體font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等?？梢酝瑫r(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。（3）font-weight:字體粗細(xì)font-weight屬性用于定義字體的粗細(xì)。(4)font-style:字體風(fēng)格font-sty

35、le屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。22italic：瀏覽器會(huì)顯示斜體的字體樣式。oblique：瀏覽器會(huì)顯示傾斜的字體樣式。二CSS文本外觀屬性（通過案例將字體外觀屬性進(jìn)行演示）使用HTML可以對(duì)文本外觀進(jìn)行簡單的控制，但是效果并不理想。為此CSS提供了一系列的文本外觀樣式屬性，具體如下：(1)color:文本顏色color屬性用于定義文本的顏色，其取值方式有如下3種：預(yù)定義的顏色值，如red，green，blue等。十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，最常用。RGB代

36、碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。(2)letter-spacing:字間距l(xiāng)etter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。(3)word-spacing:單詞間距word-spacing屬性用于定義英文單詞之間的間距，對(duì)中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。(4)line-height:行間距，即行高。line-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字

37、符的垂直間距，一般稱為行高。(5)text-transform:文本轉(zhuǎn)換text-transform屬性用于控制英文字符的大小寫，其可用屬性值如下：none：不轉(zhuǎn)換（默認(rèn)值）。capitalize：首字母大寫。uppercase：全部字符轉(zhuǎn)換為大寫。lowercase：全部字符轉(zhuǎn)換為小寫。(6)text-decoration:文本裝飾text-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下：none：沒有裝飾（正常文本默認(rèn)值）。23underline：下劃線。overline：上劃線。line-through：刪除線。(7)text-align:水平對(duì)

38、齊方式text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊。center：居中對(duì)齊。(8)text-indent:首行縮進(jìn)text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,建議使用em作為設(shè)置單位。(9)white-space:空白符處理使用HTML制作網(wǎng)頁時(shí)，不論源代碼中有多少空格，在瀏覽器中只會(huì)顯示一個(gè)字符的空白。在CSS中，使用white-space屬性可設(shè)置空白符的處理方式，其屬性值如下：no

39、rmal：常規(guī)（默認(rèn)值），文本中的空格、空行無效，滿行后自動(dòng)換行。pre：預(yù)格式化，按文檔的書寫格式保留空格、空行原樣顯示。nowrap：空格空行無效，強(qiáng)制文本不能換行，除非遇到換行標(biāo)記。內(nèi)容超出元素的邊界也不換行，若超出瀏覽器頁面則會(huì)自動(dòng)增加滾動(dòng)條。小結(jié)：CSS文本屬性：字體字號(hào)粗細(xì)傾斜文本裝飾顏色對(duì)齊方式首行縮進(jìn)作業(yè)：超星作業(yè)24課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS的高級(jí)特性課次課時(shí)142學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)CSS的層疊性、繼承性和優(yōu)先級(jí)理解CSS的層疊性、繼承性和優(yōu)先級(jí)CSS的層疊性、繼承性和優(yōu)先級(jí)CSS優(yōu)先級(jí)教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)提問：上節(jié)課學(xué)習(xí)的常用

40、文本屬性有哪些？導(dǎo)入新課：(案例演示我很調(diào)皮，猜猜我是什么顏色？)CSS的高級(jí)特性是指CSS的層疊性、繼承性和優(yōu)先級(jí)等。對(duì)于網(wǎng)頁設(shè)計(jì)師來說，應(yīng)深刻理解這些特性。新授：（案例演示）pfont-family:方正隸變簡體;.onecolor:#00F;#twofont-size:68px;spancolor:#FF0;giveyousomecolortoseesee(通過案例講解樣式的優(yōu)先級(jí)，同學(xué)們動(dòng)手操作，實(shí)現(xiàn)教學(xué)做一體化)一、層疊性所謂層疊性是指多種CSS樣式的疊加。例如，當(dāng)使用內(nèi)嵌式CSS樣式定義標(biāo)記字號(hào)大小為12像素，外部樣式表定義標(biāo)記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種

41、樣式產(chǎn)生了疊加。二、繼承性25所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)記會(huì)繼承父標(biāo)記的某些樣式，如文本顏色和字號(hào)等。例如，定義頁面主體標(biāo)記body的文本顏色為黑色，那么頁面中所有的文本都將顯示為黑色，這是因?yàn)槠渌麡?biāo)記都是body標(biāo)記的子標(biāo)記。注意：當(dāng)為body元素設(shè)置字號(hào)屬性時(shí)，標(biāo)題文本不會(huì)采用這個(gè)樣式。因?yàn)闃?biāo)題標(biāo)記h1h6有默認(rèn)的字號(hào)樣式。三、CSS優(yōu)先級(jí)定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)問題。根據(jù)規(guī)定，樣式表的優(yōu)先級(jí)別從高到低為：行內(nèi)樣式、嵌入式和外部樣式表。也就是最接近目標(biāo)元素的樣式優(yōu)先級(jí)越高，即就近原則。(根據(jù)案例效果同學(xué)們自行總結(jié)，找學(xué)生代表分

42、享總結(jié))小結(jié)：層疊性繼承性優(yōu)先級(jí)作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS的高級(jí)特性（1）課次課時(shí)152學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)屬性選擇器、關(guān)系選擇器理解屬性選擇器、關(guān)系選擇器屬性選擇器、關(guān)系選擇器屬性選擇器、關(guān)系選擇器教學(xué)活動(dòng)及主要環(huán)節(jié)導(dǎo)入新課：使用高級(jí)選擇選擇器可以方便的定位于指定的元素，而不用使用額外的class或id，通過這種方式也可以讓我們的代碼和樣式更加簡潔、靈活、易控制。新授：（案例演示）一、屬性選擇器屬性選擇器可以通過元素的屬性來選擇元素。本節(jié)將介紹CSS3新增的3種屬性選擇器：Eatt=val、Eatt$=val、Eatt*=val。26

43、(通過案例講解屬性選擇器的使用，同學(xué)們動(dòng)手操作，實(shí)現(xiàn)教學(xué)做一體化)1.Eatt=val屬性選擇器Eatt=val屬性選擇器，是指選擇名稱為E，att屬性值以val開頭的元素。如pid=txt是指id屬性值以txt字符串為前綴的p標(biāo)記。E可以省略，如果省略則表示可以匹配滿足條件的任意元素。2.Eatt$=val屬性選擇器Eatt$=val屬性選擇器，是指選擇名稱為E，att屬性值以val結(jié)尾的元素。如pid$=txt是指id屬性值以txt字符串為后綴的p標(biāo)記。E可以省略，如果省略則表示可以匹配滿足條件的任意元素。3.Eatt*=val屬性選擇器Eatt*=val屬性選擇器，是指選擇名稱為E，at

44、t屬性值包含val的元素。如pid*=txt是指id屬性值包含txt字符串的p標(biāo)記。E可以省略，如果省略則表示可以匹配滿足條件的任意元素。二、關(guān)系選擇器本節(jié)介紹3個(gè)關(guān)系選擇器，分別是子代選擇器（）、相鄰兄弟選擇器（+）、普通兄弟選擇器（）。1.子代選擇器（）子代選擇器主要用于選擇某元素的第一級(jí)子元素，而且必須是第一級(jí)子元素。前面學(xué)習(xí)過的（后代選擇器用于選擇某元素的子元素，只要是子元素都可以。實(shí)例演示）2.相鄰兄弟選擇器（+）和普通兄弟選擇器（）相鄰兄弟選擇器（+）和普通兄弟選擇器（）統(tǒng)稱兄弟選擇器。相鄰兄弟選擇器用“+”連接兩個(gè)元素，這兩個(gè)元素有相同的父元素，并且第二個(gè)元素緊跟第一個(gè)元素。普通

45、兄弟選擇器用“”（連接兩個(gè)元素，這兩個(gè)元素有相同的父元素，第二個(gè)元素不必緊跟第一個(gè)元素。實(shí)例演示）小結(jié)：屬性選擇器關(guān)系選擇器作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS的高級(jí)特性（2）課次課時(shí)162學(xué)時(shí)教學(xué)內(nèi)容結(jié)構(gòu)化偽類選擇器27教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)理解結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器結(jié)構(gòu)化偽類選擇器教學(xué)活動(dòng)及主要環(huán)節(jié)導(dǎo)入新課：CSS3常用的結(jié)構(gòu)化偽類選擇器有很多，本節(jié)將詳細(xì)介紹這些選擇器。新授：（案例演示）（設(shè)置無序列表不同列表項(xiàng)樣式的例子講解不同的結(jié)構(gòu)化偽類選擇器）一、結(jié)構(gòu)化偽類選擇器1:root選擇器:root選擇器用于選擇文檔的根元素。在HTML中，文檔的根

46、元素為html元素。因此:root選擇器定義的樣式，對(duì)本文檔內(nèi)所有元素生效。2:not選擇器:not選擇器又被稱為否定選擇器，可以選擇除了某個(gè)元素之外的所有元素。3:empty選擇器:empty選擇器用于來選擇沒有內(nèi)容的元素。4:target選擇器:target選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素。當(dāng)用戶單擊了超鏈接，而且此鏈接地址為本頁面內(nèi)的目標(biāo)位置，:target選擇器樣式起作用。5:onlychild選擇器only-child選擇器用于匹配屬于父元素中唯一子元素的元素。也就是說，匹配元素的父元素中僅有一個(gè)子元素，而且是一個(gè)唯一的子元素。6:firstchild選擇器、:lastchild選

47、擇器、:nthchild（n）選擇器、:nthlastchild（n）選擇器。:first-child選擇器和:last-child選擇器分別用于選擇父元素中的第一個(gè)或者最后一個(gè)子元素。如果父元素內(nèi)子元素較多，我們可以用:nth-child（n）選擇器和:nth-last-child（n）選擇器分別來選擇第n個(gè)或者倒數(shù)第n個(gè)元素。n可以為數(shù)值，也可以為odd（奇數(shù)）或even（偶（數(shù)），odd和even分別代表子元素中第奇數(shù)個(gè)子元素和第偶數(shù)個(gè)子元素。案例演示）7:nthoftype（n）選擇器、:nthlastoftype（n）選擇器。:nth-of-type（n）選擇器、:nth-last-

48、of-type（n）選擇器分別用于選擇父元素的特定類型的第n個(gè)子元素或倒數(shù)第n個(gè)子元素。二、偽元素選擇器偽元素選擇器，是針對(duì)CSS中已經(jīng)定義好的偽元素使用的選擇器。常用的偽元素有:before28選擇器和:after選擇器。在最新的CSS3標(biāo)準(zhǔn)中，偽元素選擇器的格式改為雙冒號(hào)，這兩個(gè)元素可以寫為:before、:after，但只兼容IE9以上的現(xiàn)代瀏覽器。如果為了往下兼容，可以使用單冒號(hào)格式。1:before選擇器:before選擇器用于在元素內(nèi)部所有子元素之前插入內(nèi)容，插入的內(nèi)容必須用content屬性值來設(shè)定。其語法格式如下：標(biāo)記名稱：beforecontent:屬性值;2:after選擇

49、器:after選擇器用于在元素內(nèi)部所有子元素之后插入內(nèi)容，用法與:after選擇器相同。小結(jié)：結(jié)構(gòu)化偽類選擇器偽元素選擇器作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）盒子模型課次課時(shí)172學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)盒子模型概念盒子大小計(jì)算方式盒子模型的相關(guān)屬性理解盒子模型概念掌握盒子大小計(jì)算方式掌握盒子模型的相關(guān)屬性盒子模型的相關(guān)屬性盒子大小計(jì)算方式教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)提問：CSS的高級(jí)特性包含？導(dǎo)入新課：互動(dòng)盒子模型？（生活中的盒子對(duì)比）盒子模型是CSS網(wǎng)頁布局的基礎(chǔ)，只有掌握了盒子模型的各種規(guī)律和特征，才可以更好地控制網(wǎng)頁中各個(gè)元素所呈現(xiàn)的效果。新授：一認(rèn)識(shí)盒

50、子模型29所謂盒子模型就是把HTML頁面中的元素看作是一個(gè)矩形的盒子，也就是一個(gè)盛裝內(nèi)容的容、器。每個(gè)矩形都由元素的內(nèi)容、內(nèi)邊距（padding）邊框(border)和外邊距(margin)組成。二盒子大小計(jì)算方式一個(gè)盒子實(shí)際所占有的寬度（或高度）是由“內(nèi)容+內(nèi)邊距+邊框+外邊距”組成的。（后跟習(xí)題見PPT）三盒子模型的相關(guān)屬性1邊框（border）屬性邊框（border）屬性設(shè)置方式如下：border-top：上邊框?qū)挾葮邮筋伾玝order-right：右邊框?qū)挾葮邮筋伾玝order-bottom：下邊框?qū)挾葮邮筋伾玝order-left：左邊框?qū)挾葮邮筋伾羲膫€(gè)邊框具有相同的寬度、樣式和顏

51、色，則可以一個(gè)次設(shè)置如下：border：邊框?qū)挾葮邮筋伾⒁猓哼吙驅(qū)挾?、樣式和顏色屬性的順序可以隨意。2內(nèi)邊距（padding）屬性內(nèi)邊距用于設(shè)置盒子中內(nèi)容與邊框之間的距離，也常常稱為內(nèi)填充。其設(shè)置方法類似于padding屬性的設(shè)置，其設(shè)置方式如下：30padding-top：上內(nèi)邊距大小padding-right：右內(nèi)邊距大小padding-bottom：下內(nèi)邊距大小padding-left：左內(nèi)邊距大小若四個(gè)內(nèi)邊距具有相同的大小，則可以一個(gè)次設(shè)置如下：padding：內(nèi)邊距大小3外邊距（margin）屬性網(wǎng)頁是由多個(gè)盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子

52、設(shè)置外邊距。外邊距用于設(shè)置盒子與其它盒子之間的距離。其設(shè)置方法類似于內(nèi)邊距（paddding）屬性的設(shè)置，其設(shè)置方式如下：margin-top：上外邊距大小margin-right：右外邊距大小margin-bottom：下外邊距大小margin-left：左外邊距大小若四個(gè)外邊距具有相同的大小，則可以一次設(shè)置如下：margin：外邊距大小小結(jié)：認(rèn)識(shí)盒子模型盒子大小計(jì)算方式盒子模型相關(guān)屬性作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）CSS背景屬性課次課時(shí)182學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)設(shè)置背景顏色設(shè)置背景圖像綜合設(shè)置CSS背景理解如何設(shè)置背景顏色理解如何設(shè)置背景圖像

53、能夠綜合設(shè)置CSS背景綜合設(shè)置CSS背景綜合設(shè)置CSS背景教學(xué)活動(dòng)及主要環(huán)節(jié)31復(fù)習(xí)提問：盒子模型的屬性有哪些？導(dǎo)入新課：網(wǎng)頁能通過背景顏色或背景圖像給人留下第一印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果，所以在網(wǎng)頁設(shè)計(jì)中，控制背景顏色和圖像是一個(gè)很重要的步驟。新授：（案例演示）一設(shè)置背景顏色格式：backgroundcolor：#RRGGBB或#rgb(r,g,b)或預(yù)定義的顏色值。修改h3標(biāo)題的CSS樣式，設(shè)置標(biāo)題行的背景色和標(biāo)題文字的顏色的樣式。文件名：4-3.html。h3background-color:#0080FF;/*設(shè)置標(biāo)題行背景色*/color:#fff;/*設(shè)

54、置標(biāo)題行文字顏色*/text-align:center;/*設(shè)置標(biāo)題水平居中*/height:30px;/*設(shè)置標(biāo)題的高度*/line-height:30px;/*設(shè)置標(biāo)題的行高，使文字垂直居中*/瀏覽網(wǎng)頁，效果圖如圖4-3所示。圖4-3設(shè)置了標(biāo)題行的背景色.二設(shè)置背景圖像格式：backgroundimage：#RRGGBB或#rgb(r,g,b)或預(yù)定義的顏色值。繼續(xù)修改4-3，添加body的CSS樣式，設(shè)置網(wǎng)頁的背景圖像。文件名：4-4.html。bodybackground-image:url(bodybg.jpg);瀏覽網(wǎng)頁，效果圖如圖4-4所示。32圖4-4設(shè)置了網(wǎng)頁的背景圖像默認(rèn)情

55、況下，背景圖像自動(dòng)沿著水平和豎直兩個(gè)方向平鋪，充滿整個(gè)網(wǎng)頁。.三綜合設(shè)置背景圖像格式：background：url(“圖像”)平鋪定位繼續(xù)修改4-4，修改body的CSS樣式，設(shè)置網(wǎng)頁的背景圖像。文件名：4-5.html。bodybackground:url(school1.jpg)no-repeatrightbottom;瀏覽網(wǎng)頁，效果圖如圖4-5所示。圖4-5設(shè)置網(wǎng)頁的背景圖像在網(wǎng)頁的右下方若修改為如下代碼：bodybackground:url(school1.jpg)no-repeat;則默認(rèn)背景圖像在網(wǎng)頁左上角出現(xiàn)一次。若修改為如下代碼：bodybackground:url(schoo

56、l1.jpg)no-repeatleftbottom;則背景圖像在網(wǎng)頁左下角出現(xiàn)一次。若修改為如下代碼：bodybackground:url(school1.jpg)no-repeatrighttop;33則背景圖像在網(wǎng)頁右上角出現(xiàn)一次。若修改為如下代碼：bodybackground:url(school1.jpg)no-repeatleftcenter;則背景圖像在網(wǎng)頁左側(cè)垂直居中位置出現(xiàn)一次。若修改為如下代碼：bodybackground:url(school1.jpg)repeat-x;則背景圖像沿上方X軸平鋪。若修改為如下代碼：bodybackground:url(school1.jp

57、g)repeat-y;則背景圖像沿左側(cè)Y軸平鋪。若修改為如下代碼：bodybackground:url(school1.jpg)no-repeat40px50px;則背景圖像不平鋪，距離左側(cè)40px，距離上方50px。小結(jié)：設(shè)置背景顏色設(shè)置背景圖像綜合設(shè)置CSS背景作業(yè)：超星作業(yè)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）元素的類型與轉(zhuǎn)換課次課時(shí)192學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)塊元素、行內(nèi)元素元素的轉(zhuǎn)換塊元素間的外邊距理解塊元素、行內(nèi)元素掌握元素的轉(zhuǎn)換理解塊元素間的外邊距元素的轉(zhuǎn)換塊元素間的外邊距34教學(xué)活動(dòng)及主要環(huán)節(jié)復(fù)習(xí)提問：設(shè)置元素的CSS背景使用什么屬性？導(dǎo)入新課：互動(dòng)塊元

58、素？行內(nèi)元素？HTML提供了豐富的標(biāo)記，用于組織頁面結(jié)構(gòu)。為了使頁面結(jié)構(gòu)組織更加輕松、合理，HTML標(biāo)記被定義成了不同的類型，一般分為塊標(biāo)記和行內(nèi)標(biāo)記，也稱塊元素和行內(nèi)元素。新授：（案例演示）一、塊元素塊元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是：每個(gè)塊元素通常都會(huì)占據(jù)一整行或多行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。標(biāo)記是最典型的塊元素。二、行內(nèi)元素行內(nèi)元素也稱為內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)是：不必在新的一行開始，同時(shí)，也不強(qiáng)迫其他元素在新的一行顯示。一個(gè)行內(nèi)元素通常會(huì)和它前后的其他行內(nèi)元素顯示在同一行中，它們不占據(jù)獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐

59、結(jié)構(gòu)，一般不可以設(shè)置寬度、高度和對(duì)齊等屬性，常用于控制頁面中的特殊文本的樣式。標(biāo)記是最典型的行內(nèi)元素。三元素的轉(zhuǎn)換網(wǎng)頁是由多個(gè)塊元素和行內(nèi)元素構(gòu)成的盒子排列而成的。使用display屬性對(duì)元素的類型進(jìn)行轉(zhuǎn)換。display屬性常用的屬性值及含義如下：inline：行內(nèi)元素block：塊元素inline-block：行內(nèi)塊元素，可以對(duì)其設(shè)置寬高和對(duì)齊等屬性，但是該元素不會(huì)獨(dú)占一行。none：元素被隱藏、不顯示。四塊元素間的垂直外邊距當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則它們之間的垂直間距不是兩者的和，而是兩者

60、中的較大者。小結(jié)：35塊元素、行內(nèi)元素元素的轉(zhuǎn)換塊元素間的外邊距作業(yè)：鞏固復(fù)習(xí)課程名稱任務(wù)、項(xiàng)目、課題名稱WEB前端開發(fā)（1）列表樣式設(shè)置課次課時(shí)202學(xué)時(shí)教學(xué)內(nèi)容教學(xué)目標(biāo)教學(xué)重點(diǎn)教學(xué)難點(diǎn)CSS控制列表樣式CSS控制超鏈接樣式案例制作：學(xué)院新聞塊頁面制作掌握CSS控制列表樣式掌握CSS控制超鏈接樣式CSS控制列表樣式、CSS控制超鏈接樣式CSS控制超鏈接樣式教學(xué)活動(dòng)及主要環(huán)節(jié)36復(fù)習(xí)提問：設(shè)置元素的CSS背景使用什么屬性？導(dǎo)入新課：網(wǎng)站頁面中新聞塊的制作方法，需要包含什么內(nèi)容，展示學(xué)院官網(wǎng)通知公告塊（小組為單位討論，派小組代表分享知識(shí)）新授：（案例演示：學(xué)院官網(wǎng)導(dǎo)航條）一CSS控制列表樣式使用