《網(wǎng)頁設(shè)計(jì)與制作（活頁式）》 教案全套 傅偉 項(xiàng)目1-8 網(wǎng)頁設(shè)計(jì)與制作 - 婚慶網(wǎng)站首頁

《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)設(shè)計(jì)課程名稱：網(wǎng)頁設(shè)計(jì)與制作授課年級：20年級授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱項(xiàng)目一網(wǎng)頁基礎(chǔ)計(jì)劃課時(shí)課時(shí)內(nèi)容分析網(wǎng)頁設(shè)計(jì)中每個(gè)細(xì)節(jié)都是重要的，如同一個(gè)顏色的色值要相同、元素要進(jìn)行規(guī)則處理、圓角按鈕的大小要一樣等。細(xì)節(jié)上處理得恰當(dāng)，當(dāng)設(shè)計(jì)的產(chǎn)品受到質(zhì)疑時(shí)，可以詳盡地說明細(xì)節(jié)設(shè)計(jì)的原因，使人信服。完美的網(wǎng)頁設(shè)計(jì)需要巨大努力和付出，培養(yǎng)細(xì)心耐心的品質(zhì)至關(guān)重要。教學(xué)目標(biāo)了解網(wǎng)頁基礎(chǔ)知識。熟悉網(wǎng)頁設(shè)計(jì)語言。掌握網(wǎng)頁制作工具的使用方法。重點(diǎn)及措施教學(xué)重點(diǎn)：能夠安裝網(wǎng)頁制作工具；能夠使用網(wǎng)頁制作工具設(shè)計(jì)簡單頁面措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：網(wǎng)頁基礎(chǔ)知識，網(wǎng)頁設(shè)計(jì)語言措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程任務(wù)1.1信息與信息技術(shù)1.1.1認(rèn)識網(wǎng)頁與網(wǎng)站內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：什么是網(wǎng)頁和網(wǎng)站？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：網(wǎng)頁是Internet中基本的信息單位，是由超文本標(biāo)記語言（HyperTextMarkupLanguage，HTML）或者其他語言編寫的。網(wǎng)站是一個(gè)或多個(gè)網(wǎng)頁的集合。網(wǎng)站是指通過瀏覽器在Internet上訪問的頁面。網(wǎng)站可以用于發(fā)布自己想要公開的信息，也可以用于提供相關(guān)的網(wǎng)絡(luò)服務(wù)，同樣可以獲取自己需要的信息或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)者先將整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后分別制作各個(gè)網(wǎng)頁，大多數(shù)網(wǎng)站都會為瀏覽者提供一個(gè)主頁，最后將其他網(wǎng)頁與主頁鏈接起來。知識點(diǎn)講解講解網(wǎng)頁的概念：教師展示PPT，對網(wǎng)頁的概念進(jìn)行具體講解。網(wǎng)頁是Internet中基本的信息單位，是由超文本標(biāo)記語言（HyperTextMarkupLanguage，HTML）或者其他語言編寫的。中國知網(wǎng)：/學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解網(wǎng)站概念：教師展示PPT，講解網(wǎng)站概念。網(wǎng)站是一個(gè)或多個(gè)網(wǎng)頁的集合。網(wǎng)站是指通過瀏覽器在Internet上訪問的頁面。網(wǎng)站可以用于發(fā)布自己想要公開的信息，也可以用于提供相關(guān)的網(wǎng)絡(luò)服務(wù)，同樣可以獲取自己需要的信息或者享受網(wǎng)絡(luò)服務(wù)。網(wǎng)站設(shè)計(jì)者先將整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后分別制作各個(gè)網(wǎng)頁，大多數(shù)網(wǎng)站都會為瀏覽者提供一個(gè)主頁，最后將其他網(wǎng)頁與主頁鏈接起來。中國大學(xué)MOOC：/生自主提問，教師對疑難問題進(jìn)行解答。講解網(wǎng)頁的特點(diǎn)教師展示PPT，講解網(wǎng)頁的特點(diǎn)。學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解網(wǎng)站分類：教師展示PPT，講解網(wǎng)站分類。網(wǎng)站有很多不同的分類方法，例如，按照其使用的技術(shù)可分為靜態(tài)網(wǎng)站和動(dòng)態(tài)網(wǎng)站；按照網(wǎng)站的性質(zhì)可以分為企業(yè)網(wǎng)站、政府網(wǎng)站、教育網(wǎng)站和個(gè)人網(wǎng)站；按照網(wǎng)站的作用可以分為搜索引擎網(wǎng)站、社區(qū)論壇網(wǎng)站、在線翻譯網(wǎng)站、軟件下載網(wǎng)站和音樂欣賞網(wǎng)站等。直觀的網(wǎng)站分類方法是按網(wǎng)站的主題進(jìn)行分類。主題是網(wǎng)站的題材，它決定網(wǎng)站的內(nèi)容，體現(xiàn)網(wǎng)站代表的形象。一般常見的題材有公司企業(yè)、休閑娛樂、教育培訓(xùn)、電腦網(wǎng)絡(luò)、文化藝術(shù)、交通旅游等，而每一個(gè)題材又可以繼續(xù)劃分。學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解網(wǎng)站的特征教師展示PPT，講解網(wǎng)站的特征。學(xué)生自主提問，教師對疑難問題進(jìn)行解答。1.1.2網(wǎng)頁的組成元素內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁有哪些組成要素？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：網(wǎng)頁包含了許多元素，如文本、圖像、動(dòng)畫、音頻、視頻等，使得內(nèi)容豐富，引人入勝。知識點(diǎn)講解講解文本、圖像、動(dòng)畫、音頻、視頻、（1）教師展示PPT，講解網(wǎng)頁的特點(diǎn)。新華網(wǎng)：/index.htm1.文本文本是指網(wǎng)頁中敘述性的文字，是理想的網(wǎng)頁信息載體與交流工具，網(wǎng)頁中主要信息一般都以文本為主，與圖像相比，文本雖然不如圖像那樣容易被瀏覽者注意，但卻能簡明扼要地表達(dá)出主題。2.圖像圖像是指網(wǎng)頁中插入的具有說明性的圖片。圖像擁有豐富的色彩和表現(xiàn)形式，能夠表達(dá)更加豐富的內(nèi)容和含義，并且具有文本無法達(dá)到的視覺效果。添加適量的圖像可以使制作的網(wǎng)頁圖文并茂，展現(xiàn)出更好的活力和表現(xiàn)力。在網(wǎng)頁中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的圖像文件，其中使用廣泛的是GIF和JPEG兩種格式。3.動(dòng)畫動(dòng)畫在網(wǎng)頁中的作用是有效地吸引瀏覽者更多的注意，在設(shè)計(jì)網(wǎng)頁時(shí)可以在頁面中加入動(dòng)畫使頁面更加生動(dòng)。在網(wǎng)頁中使用的動(dòng)畫主要有GIF和Flash兩種方式。GIF動(dòng)畫主要用在對動(dòng)畫效果要求不高的網(wǎng)頁中，如在網(wǎng)頁中制作友情鏈接的網(wǎng)站Logo時(shí)，通常都使用GIF動(dòng)畫，且播放不需要插件。Flash動(dòng)畫適用于品質(zhì)優(yōu)良，大型的、復(fù)雜的網(wǎng)頁，在瀏覽器中播放Flash動(dòng)畫需要安裝Flash播放插件。4.音頻音頻是多媒體網(wǎng)頁重要的組成部分。在為網(wǎng)頁添加聲音效果時(shí)應(yīng)充分考慮其格式、文件大小、品質(zhì)和用途等因素。另外，不同的瀏覽器對聲音文件的處理方法有所不同，它們彼此之間有可能不兼容。網(wǎng)絡(luò)的音頻文件格式很多，常用的有MP3、MIDI、WAV等。5.視頻視頻能夠豐富網(wǎng)頁內(nèi)容，越來越多的視頻文件被應(yīng)用到網(wǎng)頁中，使得網(wǎng)頁效果更加精彩且富有動(dòng)感。常見的視頻文件格式有MP4和FLV。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。1.1.3靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：什么是靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：靜態(tài)網(wǎng)頁使用HTML語言，每個(gè)網(wǎng)頁都有一個(gè)固定的URL（UniformResourceLocators，統(tǒng)一資源定位符），以.htm、.html、.shtml等常見形式為后綴。靜態(tài)網(wǎng)頁中包含文本、圖像、動(dòng)畫、音頻、視頻等網(wǎng)頁元素。靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。動(dòng)態(tài)網(wǎng)頁是指與靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁技術(shù)，以.aspx、.asp、.jsp、.php、.pert、.cgi等形式為后綴。動(dòng)態(tài)網(wǎng)頁的顯示內(nèi)容可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生改變，也可以與后臺數(shù)據(jù)庫交互，實(shí)現(xiàn)用戶注冊、登錄、聊天、留言等功能。知識點(diǎn)講解講解靜態(tài)網(wǎng)頁（1）教師展示PPT，對靜態(tài)網(wǎng)頁進(jìn)行具體講解。靜態(tài)網(wǎng)頁使用HTML語言，每個(gè)網(wǎng)頁都有一個(gè)固定的URL（UniformResourceLocators，統(tǒng)一資源定位符），以.htm、.html、.shtml等常見形式為后綴。靜態(tài)網(wǎng)頁中包含文本、圖像、動(dòng)畫、音頻、視頻等網(wǎng)頁元素。靜態(tài)網(wǎng)頁的交互性較差，在功能方面有較大的限制。靜態(tài)網(wǎng)頁可以出現(xiàn)各種動(dòng)態(tài)的效果，如GIF格式的動(dòng)畫、Flash、滾動(dòng)字幕等，這些“動(dòng)態(tài)效果”只是視覺上的。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解靜態(tài)網(wǎng)頁（1）教師展示PPT，對靜態(tài)網(wǎng)頁進(jìn)行具體講解。動(dòng)態(tài)網(wǎng)頁是指與靜態(tài)網(wǎng)頁相對的一種網(wǎng)頁技術(shù)，以.aspx、.asp、.jsp、.php、.pert、.cgi等形式為后綴。動(dòng)態(tài)網(wǎng)頁的顯示內(nèi)容可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫操作的結(jié)果而發(fā)生改變，也可以與后臺數(shù)據(jù)庫交互，實(shí)現(xiàn)用戶注冊、登錄、聊天、留言等功能。動(dòng)態(tài)網(wǎng)頁具有以下特征交互性自動(dòng)更新針對性（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)1.2網(wǎng)頁設(shè)計(jì)語言內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：什么是HTML？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：HTML稱為超文本標(biāo)記語言。超文本指頁面內(nèi)可以包含圖片、鏈接、音樂、視頻等非文字的元素。標(biāo)記語言主要由標(biāo)簽屬性、標(biāo)簽以及元素構(gòu)成，網(wǎng)頁中包含的對象是由相應(yīng)HTML標(biāo)簽指示出來的。HTML不像其他語言一樣被編譯為指令，它只提供一些語法標(biāo)簽，后由瀏覽器編譯生成相應(yīng)的頁面。知識點(diǎn)講解講解HTML（1）教師展示PPT，對HTML具體講解。HTML稱為超文本標(biāo)記語言。超文本指頁面內(nèi)可以包含圖片、鏈接、音樂、視頻等非文字的元素。標(biāo)記語言主要由標(biāo)簽屬性、標(biāo)簽以及元素構(gòu)成，網(wǎng)頁中包含的對象是由相應(yīng)HTML標(biāo)簽指示出來的。HTML不像其他語言一樣被編譯為指令，它只提供一些語法標(biāo)簽，后由瀏覽器編譯生成相應(yīng)的頁面。HTML編輯環(huán)境HTML代碼既可以在記事本中編寫，也可以在其他任何文本編輯器中編寫，但在保存時(shí)要保存為.html或.htm格式。HTML寫成的網(wǎng)頁文件只有通過瀏覽器才能進(jìn)行解析。文檔結(jié)構(gòu)HTML文檔是由一系列的元素和標(biāo)簽組成的。元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文件中的位置，標(biāo)簽用“<標(biāo)簽名字屬性>”來表示，標(biāo)簽以“<>”開始，以“</>”結(jié)束。HTML文檔分為<head>（文檔頭）和<body>（文檔體）兩部分，在文檔頭中對文檔進(jìn)行了一些必要的定義，文檔體中是要顯示的各種文檔信息。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解實(shí)例1HTML文檔代碼<html></html>在文檔的外層，文檔中的所有文本和標(biāo)簽都包含其中，它表示該文檔是以HTML編寫的。<head></head>是HTML文檔的頭部標(biāo)簽，在瀏覽器窗口中，頭部信息是不被顯示在正文中的。在此標(biāo)簽中可以插入其他標(biāo)簽，用以說明文件的標(biāo)題和整個(gè)文件的一些公共屬性。<title>和</title>是嵌套在<head>標(biāo)簽中的，標(biāo)簽之間的文本是文檔標(biāo)題，這些文本作為瀏覽器窗口的標(biāo)題欄內(nèi)容被顯示。<body></body>標(biāo)簽之間的文本是正文，正文中的內(nèi)容作為網(wǎng)頁內(nèi)容顯示在瀏覽器中。以上標(biāo)簽在文檔中都是唯一的，<head>標(biāo)簽和<body>標(biāo)簽是嵌套在<html>標(biāo)簽中的。任務(wù)1.3網(wǎng)頁制作工具1.3.1網(wǎng)頁設(shè)計(jì)工具內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁設(shè)計(jì)工具有哪些？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：1.Dreamweaver。2.SublimeText3.EditPlus知識點(diǎn)講解講解網(wǎng)頁設(shè)計(jì)工具（1）教師展示PPT，對網(wǎng)頁設(shè)計(jì)工具進(jìn)行具體講解。1.DreamweaverAdobeDreamweaver（DW，夢想編織者）是用于網(wǎng)頁設(shè)計(jì)與制作的開發(fā)工具，它可以制作出跨平臺和瀏覽器的網(wǎng)頁。Dreamweaver是“所見即所得”的網(wǎng)頁編輯器，如果改變網(wǎng)頁位置或檔案名稱，Dreamweaver會自動(dòng)更新所有鏈接。在Dreamweaver中使用HTML代碼、HTML屬性標(biāo)簽和一般語法的搜尋及置換功能，可以提升網(wǎng)頁設(shè)計(jì)的效率。2.SublimeTextSublimeText是功能強(qiáng)大的代碼編輯器，能夠進(jìn)行網(wǎng)頁設(shè)計(jì)。它的主要功能有拼寫檢查、書簽、完整的PythonAPI、Goto功能、即時(shí)項(xiàng)目切換、多選擇、多窗口等，具有體積小、運(yùn)行速度快、文本功能強(qiáng)大、支持編譯功能且可在控制臺看到輸出等優(yōu)勢。3.EditPlusEditPlus是功能強(qiáng)大、界面美觀的文本編輯器，它的主要功能有Hex查看器、HTML工具欄、用戶工具、行號、標(biāo)尺、URL高亮顯示、自動(dòng)完成、剪貼畫、列選擇、搜索和替換、拼寫檢查器、自定義鍵盤快捷方式等。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。1.3.2網(wǎng)頁美化工具內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁美化工具有哪些？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：Photoshop，Mockplus，AdobeIllustrator知識點(diǎn)講解講解網(wǎng)頁美化工具（1）教師展示PPT，對網(wǎng)頁美化工具進(jìn)行具體講解。1.PhotoshopPhotoshop是一款優(yōu)秀而強(qiáng)大的圖形圖像處理軟件，可以對圖像進(jìn)行各種變換，如放大、縮小、旋轉(zhuǎn)、傾斜、鏡像、透視等，可以進(jìn)行復(fù)制、去除斑點(diǎn)、修補(bǔ)、修飾圖像的殘損等操作。此外，它具有的強(qiáng)大功能已經(jīng)完全涵蓋了網(wǎng)頁設(shè)計(jì)的需要。2.MockplusMockplus支持平臺有Windows和Mac平臺，它是一款高效簡單的界面設(shè)計(jì)工具，是比較流行的一款國產(chǎn)界面原型設(shè)計(jì)工具。軟件提供了封裝好的3000多個(gè)圖標(biāo)以及200多個(gè)組件，學(xué)習(xí)成本低，無需代碼參與。它的主要特色是豐富的圖標(biāo)及組件、拖曳實(shí)現(xiàn)交互界面等。3.AdobeIllustratorAdobeIllustrator是應(yīng)用于出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫的軟件。它是一款非常好的圖片處理工具，廣泛應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等，并可以提供較高的精度和控制。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。1.3.3Dreamweaver工作環(huán)境內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：Dreamweaver的特點(diǎn)？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：Dreamweaver在操作方法、界面風(fēng)格等方面突出人性化設(shè)計(jì)，能夠進(jìn)行多任務(wù)工作，使用者可以根據(jù)個(gè)人喜好和工作方式，重新排列面板和面板組，自定義工作區(qū)。。知識點(diǎn)講解講解Dreamweaver工作環(huán)境（1）教師展示PPT，對Dreamweaver工作環(huán)境具體講解。1.工作界面1）菜單欄Dreamweaver有10個(gè)菜單，包括“文件”“編輯”“查看”“插入”“修改”“格式”“命令”“站點(diǎn)”“窗口”“幫助”，單擊這些菜單可以打開其子菜單。其他菜單打開后也有類似效果。Dreamweaver的菜單功能極其豐富，能夠完成各種功能操作。2）插入欄插入欄位于菜單欄下方，包含用于創(chuàng)建和插入對象（如表格、圖像）的按鈕。當(dāng)鼠標(biāo)指針移動(dòng)到一個(gè)按鈕時(shí)，會出現(xiàn)一個(gè)工具提示，其中含有該按鈕的名稱。當(dāng)需要插入某一元素時(shí)，可根據(jù)選項(xiàng)卡的名稱來選擇。3）文檔工具欄文檔工具欄在插入欄下方，其中包含一些按鈕，可以實(shí)現(xiàn)在代碼視圖、設(shè)計(jì)視圖及拆分視圖間的切換。文檔工具欄還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的常用命令和選項(xiàng)。4）文檔窗口文檔窗口會顯示當(dāng)前打開或編輯的文檔，可以選擇“代碼”“拆分”或“設(shè)計(jì)”視圖。窗口頂部選項(xiàng)卡顯示的是當(dāng)前編輯的文檔的文件名。當(dāng)有多個(gè)文檔被打開時(shí)，可以通過選項(xiàng)卡在文檔間進(jìn)行切換。5）狀態(tài)欄狀態(tài)欄顯示當(dāng)前文檔的有關(guān)信息，如頁面大小、下載頁面的大小和速度等。6）屬性面板屬性面板位于文檔編輯區(qū)下方，顯示文檔窗口中被選中對象的屬性，可以通過修改面板中的數(shù)據(jù)，改變被選中對象的屬性。7）功能面板功能面板包括當(dāng)前打開的各種功能面板，可以折疊或移動(dòng)。Dreamweaver的工作界面主要由“菜單欄”“插入欄”“文檔工具欄”“文檔窗口”“狀態(tài)欄”“屬性面板”和“功能面板”組成，2.調(diào)整界面在網(wǎng)頁制作過程中，往往需要變換工作界面的布局，使用者可以通過移動(dòng)面板或面板組來創(chuàng)建新的工作界面。單擊標(biāo)題欄上的“設(shè)計(jì)器”按鈕，可以選擇任意一種預(yù)設(shè)的工作界面。1）顯示/隱藏面板使用F4鍵，可以顯示或隱藏包括屬性面板在內(nèi)的所有面板。利用“窗口”菜單可以打開所有面板。2）移動(dòng)面板拖動(dòng)面板標(biāo)簽或是拖動(dòng)面板組的標(biāo)題欄，可以移動(dòng)面板或面板組。移動(dòng)時(shí)，看到藍(lán)色顯示的區(qū)域，表示可以在該區(qū)域內(nèi)移動(dòng)和放置。如果拖動(dòng)到的區(qū)域不是放置區(qū)域，則被移動(dòng)的面板或面板組將在窗口中浮動(dòng)。3）關(guān)閉面板單擊面板或面板組的按鈕，在打開的菜單中選擇“關(guān)閉”或“關(guān)閉標(biāo)簽組”命令。3.選擇視圖模式Dreamweaver的視圖模式默認(rèn)為“設(shè)計(jì)”視圖，可以通過視圖按鈕進(jìn)行切換。（1）代碼視圖代碼視圖是用于編輯HTML、JavaScript等代碼的手工編碼環(huán)境。對于代碼使用熟練的操作者，可以直接在此視圖中輸入代碼，實(shí)現(xiàn)網(wǎng)頁的編輯制作。（2）拆分視圖拆分視圖文檔窗口分為左右部分，分別顯示“設(shè)計(jì)”和“代碼”兩個(gè)視圖，可對比查看。（3）設(shè)計(jì)視圖設(shè)計(jì)視圖用于可視化頁面布局、內(nèi)容編輯和應(yīng)用程序開發(fā)的編輯環(huán)境。視圖中顯示的文檔形式與瀏覽器中查看的頁面內(nèi)容基本一致，可以在編輯時(shí)顯示動(dòng)態(tài)內(nèi)容。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。1.3.4Dreamweaver基本操作內(nèi)容學(xué)習(xí)知識點(diǎn)講解講解實(shí)例2新建和保存空白頁步驟1：打開軟件步驟2：新建文檔步驟3：保存網(wǎng)頁講解實(shí)例3設(shè)置默認(rèn)瀏覽器及瀏覽網(wǎng)頁步驟1：設(shè)置默認(rèn)瀏覽器步驟2：打開網(wǎng)頁步驟3保存并預(yù)覽網(wǎng)頁項(xiàng)目小結(jié)本項(xiàng)目主要介紹了網(wǎng)頁的基礎(chǔ)知識,具體內(nèi)容如下。網(wǎng)頁基礎(chǔ)知識:介紹了網(wǎng)頁與網(wǎng)站的概念、網(wǎng)頁的組成元素、靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁。網(wǎng)頁設(shè)計(jì)語言:介紹了HTML基礎(chǔ)知識,并通過實(shí)例講解HTML的文檔結(jié)構(gòu)。網(wǎng)頁制作工具:介紹了網(wǎng)頁設(shè)計(jì)工具、網(wǎng)頁美化工具、Dreamweaver工作環(huán)境和Dreamweaver基本操作。通過本項(xiàng)目的學(xué)習(xí),掌握網(wǎng)頁與網(wǎng)站的基礎(chǔ)知識,學(xué)習(xí)HTML基礎(chǔ)知識,了解網(wǎng)頁制作工具，逐步掌握網(wǎng)頁設(shè)計(jì)的基本概念,為下一步的學(xué)習(xí)打下基礎(chǔ)。項(xiàng)目實(shí)訓(xùn)實(shí)訓(xùn)1實(shí)訓(xùn)名稱HTML文檔結(jié)構(gòu)實(shí)訓(xùn)目標(biāo)正確書寫HTML基本代碼實(shí)訓(xùn)實(shí)施在記事本中輸入如下代碼，修改后綴名為“.html”，在瀏覽器中顯示“HelloWorld！”實(shí)訓(xùn)2實(shí)訓(xùn)名稱使用Dreamweaver新建網(wǎng)頁實(shí)訓(xùn)目標(biāo)新建和預(yù)覽網(wǎng)頁實(shí)訓(xùn)實(shí)施步驟1：新建網(wǎng)頁打開Dreamweaver軟件，選擇“文件”→“新建”命令，新建空白網(wǎng)頁。步驟2：預(yù)覽網(wǎng)頁選擇“編輯”→“首選參數(shù)”→“在瀏覽器中預(yù)覽”命令，添加InternetExplorer瀏覽器。選擇“文件”→“打開”命令，打開Index網(wǎng)頁。步驟3：設(shè)置頁面屬性選擇“修改”→“頁面屬性”命令，設(shè)置頁面標(biāo)題為“我的主頁”。設(shè)置HTML中的外觀背景為灰色。（作品點(diǎn)評）教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評，指出代碼中容易出現(xiàn)bug的地方，并給與解答。布置作業(yè)完成教師布置的作業(yè)。預(yù)習(xí)下章內(nèi)容。項(xiàng)目測評1.網(wǎng)頁與網(wǎng)站能夠正確描述網(wǎng)頁與網(wǎng)站的關(guān)系2.網(wǎng)頁特點(diǎn)能夠描述網(wǎng)頁的五個(gè)特點(diǎn)3.網(wǎng)站特征能夠正確描述網(wǎng)站特征4.網(wǎng)頁基本組成元素能夠掌握網(wǎng)頁中不同元素的概念5.靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁能夠區(qū)分靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁6.網(wǎng)頁設(shè)計(jì)語言能夠正確寫出實(shí)例1代碼并運(yùn)行7.Dreamweaver工作環(huán)境熟悉Dreamweaver工作界面能夠移動(dòng)面板、關(guān)閉面板能夠使用代碼視圖能夠使用拆分視圖能夠使用設(shè)計(jì)視圖8.Dreamweaver基本操作能夠完成實(shí)例2能夠完成實(shí)例39.課后習(xí)題能夠完成課后習(xí)題10.課堂表現(xiàn)能夠遵守紀(jì)律，完成學(xué)習(xí)任務(wù)教學(xué)后記《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)設(shè)計(jì)課程名稱：網(wǎng)頁設(shè)計(jì)與制作授課年級：20年級授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱項(xiàng)目二HTML5簡介計(jì)劃課時(shí)課時(shí)內(nèi)容分析用戶對網(wǎng)頁的直觀感受，決定了整個(gè)網(wǎng)頁達(dá)到的效果。網(wǎng)頁信息閱讀的舒適感、顏色配色要在第一時(shí)間直接地傳遞給用戶，因此網(wǎng)頁設(shè)計(jì)的設(shè)計(jì)細(xì)節(jié)有三方面：用戶的閱讀效率、視覺舒適度和網(wǎng)頁的品質(zhì)感。熟練掌握網(wǎng)頁設(shè)計(jì)技巧，培養(yǎng)動(dòng)手操作能力，才能設(shè)計(jì)出優(yōu)秀的網(wǎng)頁。教學(xué)目標(biāo)了解HTML5的優(yōu)勢。掌握標(biāo)簽的使用。掌握文本控制標(biāo)簽和圖像標(biāo)簽的使用方法。重點(diǎn)及措施教學(xué)重點(diǎn)：正確使用頭部相關(guān)標(biāo)簽；正確使用標(biāo)題標(biāo)簽；正確使用圖像標(biāo)簽措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：標(biāo)簽，文本控制標(biāo)簽，圖像標(biāo)簽措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程任務(wù)2.1HTML5的優(yōu)勢內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：HTML5相較于以前的版本有什么優(yōu)勢？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：HTML5是HTML的傳遞和延續(xù)。從HTML4.0、XHTML再到HTML5，從某種意義上講，這是HTML的更新與規(guī)范過程。HTML5并沒有給用戶帶來多大的沖擊，其他版本的大部分標(biāo)簽在HTML5版本中依然適用。相比于其他版本的HTML，HTML5的優(yōu)勢主要體現(xiàn)在兼容、合理、易用和新增標(biāo)簽。知識點(diǎn)講解講解HTML5的優(yōu)勢（1）教師展示PPT，對靜態(tài)網(wǎng)頁進(jìn)行具體講解。1.兼容HTML5并不是對之前HTML語言的顛覆性革新，它的核心理念是保持與過去技術(shù)完美銜接，因此HTML5有很好的兼容性。例如，實(shí)例1的代碼中缺少結(jié)束標(biāo)簽</p>，在HTML5中并沒有把這種情況作為錯(cuò)誤來處理，而是在允許這種寫法的同時(shí)，定義了一些可以省略結(jié)束標(biāo)簽</p>的標(biāo)簽。2.合理HTML5中新增的很多標(biāo)簽、屬性都是根據(jù)實(shí)際開發(fā)中已經(jīng)存在的各類網(wǎng)頁標(biāo)簽進(jìn)行提煉和歸納，通過這樣的方式讓HTML5的標(biāo)簽結(jié)構(gòu)更加合理。例如，W3C（WorldWideWebConsortium,萬維網(wǎng)聯(lián)盟）分析了上百萬的頁面，發(fā)現(xiàn)很多網(wǎng)頁制作人員使用<divid="header">來定義網(wǎng)頁的頭部區(qū)域，于是在HTML5中添加了一個(gè)<header>標(biāo)簽。3.易用HTML5作為當(dāng)下流行的標(biāo)簽語言，嚴(yán)格遵循“簡單至上”的原則，主要體現(xiàn)在簡化的字符集聲明、簡化的DOCTYPE、簡單而強(qiáng)大的API和以瀏覽器原生能力替代復(fù)雜的JavaScript代碼。為了易于使用，HTML5的規(guī)范比以前更加細(xì)致、精確。4.新增標(biāo)簽HTML5新增了許多特性，比如新的語義標(biāo)簽、新的表單控件、強(qiáng)大的圖像支持等。新增內(nèi)容豐富了HTML5實(shí)現(xiàn)的功能，比如在游戲開發(fā)中可以實(shí)現(xiàn)更多的互動(dòng)。實(shí)例1缺少</p>標(biāo)簽（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)2.2HTML5的結(jié)構(gòu)內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：XHTML文檔和HTML5的結(jié)構(gòu)有什么不同？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在其他版本的HTML中，各瀏覽器對HTML的支持不統(tǒng)一，這就造成同一個(gè)頁面在不同瀏覽器中可能顯示不同的樣式。HTML5通過詳細(xì)分析各個(gè)瀏覽器所具有的功能，制定了一個(gè)通用的標(biāo)準(zhǔn)，并要求瀏覽器支持這個(gè)標(biāo)準(zhǔn)。知識點(diǎn)講解講解實(shí)例2新建XHTML文檔和實(shí)例3新建HTML5文檔格式（1）教師展示PPT，對實(shí)例2新建XHTML文檔和實(shí)例3新建HTML5文檔格式進(jìn)行具體講解。實(shí)例2新建XHTML文檔實(shí)例3新建HTML5文檔通過對比可以看出，HTML5的結(jié)構(gòu)相較于XHTML的結(jié)構(gòu)簡潔明了。除上述的文檔結(jié)構(gòu)標(biāo)簽外，HTML5還簡化了<meta>標(biāo)簽，讓定義字符編碼的格式變得更加簡單。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)2.3標(biāo)簽概述2.3.1標(biāo)簽的分類內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：什么是標(biāo)簽？是商場衣服上那個(gè)標(biāo)簽嗎？是超市貨架上的標(biāo)簽嗎？HTML中的標(biāo)簽是怎樣的？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在HTML5頁面中，帶有“<>”符號的元素被稱為HTML標(biāo)簽，如上面提到的<html><head><body>都是HTML標(biāo)簽。HTML標(biāo)簽是放在“<>”符號中表示某個(gè)功能的編碼命令，也稱為HTML元素。知識點(diǎn)講解講解標(biāo)簽的分類（1）教師展示PPT，對標(biāo)簽的分類進(jìn)行具體講解。根據(jù)標(biāo)簽的組成特點(diǎn)，通常將HTML標(biāo)簽分為兩大類，分別是雙標(biāo)簽和單標(biāo)簽。1.雙標(biāo)簽雙標(biāo)簽也被稱為體標(biāo)簽，是指由開始和結(jié)束兩個(gè)標(biāo)簽符號組成的標(biāo)簽。雙標(biāo)簽的基本語法格式如下：<標(biāo)簽名>內(nèi)容<標(biāo)簽名>2.單標(biāo)簽單標(biāo)簽也被稱為空標(biāo)簽，是指用一個(gè)標(biāo)簽符號即可完整地描述某個(gè)功能的標(biāo)簽，其基本語法格式如下：<標(biāo)簽名/> 3.注釋標(biāo)簽在HTML5中還有一種特殊的標(biāo)簽——注釋標(biāo)簽，該標(biāo)簽就是一種特殊功能的單標(biāo)簽。如果需要在HTML5文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。注釋標(biāo)簽的語法格式如下：<!--注釋語句-->需要注意的是，注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML5文檔內(nèi)容的一部分，注釋標(biāo)簽可以被用戶上傳到計(jì)算機(jī)上，用戶查看源代碼時(shí)也可以看到注釋標(biāo)簽。提示查看網(wǎng)頁源文件的方式打開網(wǎng)頁后，右擊網(wǎng)頁空白處，彈出快捷菜單，選擇“查看源文件”命令，搜狗瀏覽器如下：谷歌瀏覽器如下Edge瀏覽器如下火狐瀏覽器如下（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.3.2標(biāo)簽的關(guān)系內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：標(biāo)簽之前都有什么關(guān)系？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：標(biāo)簽的關(guān)系主要有嵌套關(guān)系和并列關(guān)系兩種。知識點(diǎn)講解講解標(biāo)簽的關(guān)系（1）教師展示PPT，對標(biāo)簽的關(guān)系進(jìn)行具體講解。1.嵌套關(guān)系嵌套關(guān)系也稱為包含關(guān)系，可以簡單地理解為一個(gè)雙標(biāo)簽里面包含其他的標(biāo)簽。例如，在HTML5的結(jié)構(gòu)代碼中，<html>標(biāo)簽和<head>標(biāo)簽（或<body>標(biāo)簽）就是嵌套關(guān)系。需要注意的是，在標(biāo)簽的嵌套過程中，必須先結(jié)束最靠近內(nèi)容的標(biāo)簽，再按照由內(nèi)到外的順序依次關(guān)閉標(biāo)簽。在嵌套關(guān)系的標(biāo)簽中，通常把最外層的標(biāo)簽稱為父級標(biāo)簽，里面的標(biāo)簽稱為子級標(biāo)簽。只有雙標(biāo)簽才能作為父級標(biāo)簽。2.并列關(guān)系并列關(guān)系也稱為兄弟關(guān)系，是指兩個(gè)標(biāo)簽處于同一級別，并且沒有包含關(guān)系，例如，在HTML5的結(jié)構(gòu)代碼中，<head>標(biāo)簽和<body>標(biāo)簽就是并列關(guān)系。在HTML標(biāo)簽中，無論是單標(biāo)簽還是雙標(biāo)簽，都可以擁有并列關(guān)系。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.3.3標(biāo)簽屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：如何讓HTML標(biāo)簽提供更多的信息？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：HTML5制作網(wǎng)頁時(shí)，如果想讓HTML標(biāo)簽提供更多的信息。例如，希望標(biāo)題文本的字體為“微軟雅黑”并且居中顯示，段落文本中的某些名詞顯示為其他顏色加以突出，用戶僅僅依靠HTML標(biāo)簽的默認(rèn)顯示樣式是不夠的，這時(shí)可以通過為HTML標(biāo)簽設(shè)置屬性的方式來增加更多的樣式。。知識點(diǎn)講解講解標(biāo)簽屬性（1）教師展示PPT，對標(biāo)簽屬性進(jìn)行具體講解。HTML標(biāo)簽設(shè)置屬性的基本語法格式如下：<標(biāo)簽名屬性1=“屬性值1”屬性2=“屬性值2”…>內(nèi)容</標(biāo)簽名> 在上面的語法中，標(biāo)簽可以擁有多個(gè)屬性，屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面。屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。其中<p></p>標(biāo)簽用于定義段落文本，align為屬性名，center為屬性值，表示文本居中對齊，對于<p>標(biāo)簽還可以設(shè)置文本左對齊或右對齊，對應(yīng)的屬性值分別為left和right。需要注意的是，大多數(shù)屬性都有默認(rèn)值。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.3.4頭部相關(guān)標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：頭部相關(guān)標(biāo)簽有什么用？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：網(wǎng)頁制作時(shí)，經(jīng)常需要設(shè)置頁面的基本信息，如頁面的標(biāo)題、作者、與其他文檔的關(guān)系等。為此HTML5提供了一系列的標(biāo)簽，這些標(biāo)簽通常都寫在<head>標(biāo)簽中，被稱為頭部相關(guān)標(biāo)簽。知識點(diǎn)講解講解頭部相關(guān)標(biāo)簽（1）教師展示PPT，對頭部相關(guān)標(biāo)簽進(jìn)行具體講解。1.設(shè)置頁面標(biāo)題標(biāo)簽<title><title>標(biāo)簽用于定義HTML5頁面的標(biāo)題，即給網(wǎng)頁取一個(gè)名字，該標(biāo)簽必須位于<head>標(biāo)簽之中。一個(gè)HTML5文檔只能包含一對<title></title>標(biāo)簽，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中，如“蘇軾全集”。2.定義頁面元信息標(biāo)簽<meta/><meta/>標(biāo)簽用于定義頁面的元信息（元信息不會顯示在頁面中），可重復(fù)出現(xiàn)在<head>頭部標(biāo)簽中。在HTML5中，<meta/>標(biāo)簽是一個(gè)單標(biāo)簽，本身不包含任何內(nèi)容，僅僅表示網(wǎng)頁的相關(guān)信息。通過<meta/>標(biāo)簽的兩組屬性，可以定義頁面的相關(guān)參數(shù)。例如，為搜索引擎提供網(wǎng)頁的關(guān)鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁的刷新時(shí)間等。<meta/>標(biāo)簽的基本語法格式如下：<metaname="名稱"content="值"/><metahttp-equiv="名稱"content="值"/>在<meta/>標(biāo)簽中使用name和content屬性可以為搜索引擎提供信息，其中name屬性用于提供搜索內(nèi)容的名稱，content屬性提供對應(yīng)的搜索內(nèi)容值。在<meta/>標(biāo)簽中使用http-equiv和content屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關(guān)的參數(shù)標(biāo)準(zhǔn)。其中，http-equiv屬性提供參數(shù)類型，content屬性提供對應(yīng)的參數(shù)值。默認(rèn)會發(fā)送<metahttp-equiv="Content-Type"content="text/html"/>，通知瀏覽器發(fā)送的文件類型是HTML。具體應(yīng)用如下。①設(shè)置網(wǎng)頁關(guān)鍵字，name屬性的值為keywords，用于定義搜索內(nèi)容名稱為網(wǎng)頁關(guān)鍵字，content屬性的值用于定義關(guān)鍵字的具體內(nèi)容，多個(gè)關(guān)鍵字內(nèi)容之間可以用逗號分隔，如“蘇軾,蘇東坡,蘇軾全集,蘇東坡全集,蘇軾詞,宋詞,水調(diào)歌頭,東坡居士”。②設(shè)置網(wǎng)頁描述，name屬性的值為description，用于定義搜索內(nèi)容名稱為網(wǎng)頁描述，content屬性的值用于定義描述的具體內(nèi)容，如“蘇軾（1037年1月8日—1101年8月24日）,字子瞻,又字和仲,號東坡居士，世稱蘇東坡,漢族,眉州眉山（今屬四川省眉山市）人,祖籍河北欒城,北宋文學(xué)家,書法家,畫家?！雹墼O(shè)置網(wǎng)頁作者，name屬性的值為author，用于定義搜索內(nèi)容名稱為網(wǎng)頁作者，content屬性的值用于定義具體的作者信息，如“蘇軾”。④設(shè)置字符集，http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=gbk，兩個(gè)屬性值中間用分號隔開，用于說明當(dāng)前文檔類型為HTML，字符集為gbk（中文編碼）。常用的國際化字符集編碼格式是utf-8，常用的國內(nèi)中文字符集編碼格式是gbk和gb2312。當(dāng)用戶使用的字符集編碼與當(dāng)前瀏覽器不匹配時(shí)，網(wǎng)頁內(nèi)容就會出現(xiàn)亂碼。⑤設(shè)置頁面自動(dòng)刷新與跳轉(zhuǎn)，http-equiv屬性的值為refresh，content屬性的值為數(shù)值和url，用分號隔開，用于指定在特定的時(shí)間后跳轉(zhuǎn)至目標(biāo)頁面，該時(shí)間默認(rèn)以秒為單位。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)2.4文本控制標(biāo)簽2.4.1頁面格式化標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：怎么對網(wǎng)頁內(nèi)容進(jìn)行排版？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：一篇結(jié)構(gòu)清晰的文章通常會通過標(biāo)題、段落、分隔線等進(jìn)行結(jié)構(gòu)排列，HTML5網(wǎng)頁也不例外，為了使網(wǎng)頁中的文字有條理地顯示出來，HTML5提供了相應(yīng)的頁面格式化標(biāo)簽，如標(biāo)題標(biāo)簽、段落標(biāo)簽、水平線標(biāo)簽和換行標(biāo)簽。知識點(diǎn)講解講解標(biāo)題標(biāo)簽（1）教師展示PPT，對標(biāo)題標(biāo)簽進(jìn)行具體講解。標(biāo)題標(biāo)簽的基本語法格式如下：<hnalign="對齊方式">標(biāo)題文本</hn>為了使網(wǎng)頁更具有語義化（語義化是指賦予普通網(wǎng)頁文本特殊的含義），我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽，HTML5提供了6個(gè)等級的標(biāo)題，即<hl>、<h2>、<h3>、<h4>、<h5>和<h6>。默認(rèn)情況下標(biāo)題文字是加粗左對齊顯示的，并且從<h1>到<h6>標(biāo)題字號依次遞減。如果想讓標(biāo)題文字右對齊或居中對齊，就需要使用align屬性設(shè)置對齊方式。align屬性的使用注意：1）一個(gè)頁面中只能使用一個(gè)<h1>標(biāo)簽，常常被用在網(wǎng)站的logo部分。2）由于<h>標(biāo)簽擁有特殊的語義，要選擇恰當(dāng)?shù)臉?biāo)簽來構(gòu)建文檔結(jié)構(gòu)。3）HTML5中不建議使用<h>標(biāo)簽的align對齊屬性，一般使用CSS樣式設(shè)置。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解段落標(biāo)簽（1）教師展示PPT，對段落標(biāo)簽進(jìn)行具體講解。在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標(biāo)簽。在網(wǎng)頁中使用<p>標(biāo)簽來定義段落。<p>標(biāo)簽是HTML5文檔中常見的標(biāo)簽，默認(rèn)情況下，文本在一個(gè)段落中會根據(jù)瀏覽器窗口的大小自動(dòng)換行。<p>標(biāo)簽的基本語法格式如下：<palign="對齊方式">段落文本</p>在上面的語法中，align屬性為<p>標(biāo)簽的可選屬性，和標(biāo)題標(biāo)簽<h>一樣，同樣可以使用align屬性設(shè)置段落文本的對齊方式。通過實(shí)例9來演示段落標(biāo)簽<p>的用法。第8行、第9行代碼分別為<h2>標(biāo)簽和<p>標(biāo)簽添加align的“center”屬性值，設(shè)置居中對齊。第10行代碼中的<p>標(biāo)簽為段落標(biāo)簽的默認(rèn)對齊方式。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解水平線標(biāo)簽（1）教師展示PPT，對水平線標(biāo)簽進(jìn)行具體講解。在網(wǎng)頁中我們常常會看到一些水平線將段落與段落之間隔開，使文檔結(jié)構(gòu)清晰，層次分明。水平線可以通過<hr/>標(biāo)簽來定義，基本語法格式如下：<hr屬性="屬性值"/><hr/>是單標(biāo)簽，在網(wǎng)頁中輸入一個(gè)<hr/>，即添加了一條默認(rèn)樣式的水平線。此外通過為<hr/>標(biāo)簽設(shè)置屬性和屬性值，可以更改水平線樣式。第9行代碼將<hr/>標(biāo)簽設(shè)置了不同的顏色、對齊方式、粗細(xì)和寬度值。第14行代碼修改了<hr/>標(biāo)簽的顏色。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解換行標(biāo)簽（1）教師展示PPT，對換行標(biāo)簽進(jìn)行具體講解。在Word軟件中，按Enter鍵可以將一段文字換行顯示，但在網(wǎng)頁中，如果想要將某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽<br/>。第8行代碼在文本里面顯示是在同一行，但是使用了<br/>標(biāo)簽，而第9行、第10行代碼在文本中是換行顯示的，采用了按Enter鍵的方式換行。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.4.2文本樣式標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：如何對文本進(jìn)行排版？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：文本樣式標(biāo)簽可以設(shè)置一些文字效果（如字體、加粗、顏色），讓網(wǎng)頁中的文字樣式變得更加豐富。知識點(diǎn)講解講解文本樣式標(biāo)簽（1）教師展示PPT，對文本樣式標(biāo)簽進(jìn)行具體講解。文本樣式標(biāo)簽可以設(shè)置一些文字效果（如字體、加粗、顏色），讓網(wǎng)頁中的文字樣式變得更加豐富，其基本語法格式如下：<font屬性="屬性值">文本內(nèi)容</font>第1個(gè)段落中的文本設(shè)置為默認(rèn)段落樣式，第2~4個(gè)段落文本分別使用<font>標(biāo)簽設(shè)置了不同的文本樣式。其效果如圖2-19所示。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.4.3文本格式化標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：什么是文本格式標(biāo)簽？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下畫線等一些特殊顯示的文本效果，為此HTML5提供了專門的文本格式化標(biāo)簽，使文字以特殊的方式顯示。。知識點(diǎn)講解講解動(dòng)態(tài)網(wǎng)頁（1）教師展示PPT，對文本格式化標(biāo)簽進(jìn)行具體講解。第8行代碼設(shè)置段落文本正常顯示，第9~13行代碼分別給段落文本應(yīng)用不同的文本格式化標(biāo)簽，使文字產(chǎn)生特殊的顯示效果。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.4.4文本語義標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：什么是文本語義標(biāo)簽？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：文本語義標(biāo)簽主要用于向?yàn)g覽器和開發(fā)者描述標(biāo)簽的意義，它是供機(jī)器識別的標(biāo)簽，瀏覽者只能看到顯示樣式的差異。有些文本語義標(biāo)簽可以突出文本內(nèi)容的層次關(guān)系，方便搜索引擎查找，提高瀏覽器的解析速度。在HTML5中，文本語義標(biāo)簽有很多。知識點(diǎn)講解講解<time>標(biāo)簽（1）教師展示PPT，對<time>標(biāo)簽進(jìn)行具體講解。<time>標(biāo)簽用于定義時(shí)間或日期，可以代表24小時(shí)中的某一時(shí)間。<time>標(biāo)簽不會在瀏覽器中呈現(xiàn)任何特殊效果，但是該元素能夠以機(jī)器可讀的方式對日期和時(shí)間進(jìn)行編碼，用戶能夠?qū)⑸仗嵝鸦蚱渌录砑拥饺粘瘫碇?，搜索引擎也能夠生成更智能的搜索結(jié)果。<time>標(biāo)簽有以下兩個(gè)屬性。datetime屬性，用于定義相應(yīng)的時(shí)間或日期。取值為具體時(shí)間（如9:00）或具體日期（如2020-09-01），不定義該屬性時(shí)，由文本的內(nèi)容給定日期或時(shí)間。pubdate屬性，用于定義<time>標(biāo)簽中的文檔（或article元素）發(fā)布日期。取值一般為“pubdate”。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解<mark>標(biāo)簽（1）教師展示PPT，對<mark>標(biāo)簽進(jìn)行具體講解。<mark>標(biāo)簽的主要功能是在文本中高亮顯示某些字符，該標(biāo)簽的用法與<em>標(biāo)簽和<strong>標(biāo)簽有相似之處，但是使用<mark>標(biāo)簽在突出顯示樣式時(shí)更隨意靈活。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解<cite>標(biāo)簽（1）教師展示PPT，對<cite>標(biāo)簽進(jìn)行具體講解。<cite>標(biāo)簽可以創(chuàng)建一個(gè)引用，用于對文檔引用參考文獻(xiàn)的說明，一旦在文檔中使用了該標(biāo)簽，被標(biāo)注的文檔內(nèi)容將以斜體的樣式展示在頁面中，以區(qū)別于段落中的其他字符。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.4.5特殊字符標(biāo)簽內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：特殊字符標(biāo)簽有什么用？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在瀏覽網(wǎng)頁時(shí)常常會看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。在網(wǎng)頁上顯示這些包含特殊字符的文本時(shí)，需要特殊字符標(biāo)簽。知識點(diǎn)講解講解常用的特殊字符標(biāo)簽（1）教師展示PPT，對常用的特殊字符標(biāo)簽進(jìn)行具體講解。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)2.5圖像標(biāo)簽2.5.1常見的圖像格式內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：常見的圖像格式有哪些？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：GIF格式、PNG格式、JPG格式。知識點(diǎn)講解講解常見的圖像格式（1）教師展示PPT，對常見的圖像格式進(jìn)行具體講解。1.GIF格式GIF格式突出的特點(diǎn)是支持動(dòng)畫，同時(shí)GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量沒有損失。再加上GIF支持透明，因此很適合在瀏覽器上使用，但GIF只能處理256種顏色，因此在網(wǎng)頁制作中GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對單一的圖像。2.PNG格式PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。它的優(yōu)勢是體積小，支持透明（全透明、半透明、全不透明），并且顏色過渡更平滑，但PNG不支持動(dòng)畫。其中PNG-8和GIF類似，只能支持256種顏色。3.JPG格式JPG所能顯示的顏色比GIF和PNG-8豐富，可以用于保存超過256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會造成一些圖像數(shù)據(jù)的丟失。JPG是特別為照片圖像設(shè)計(jì)的文件格式，網(wǎng)頁制作過程中類似于照片的圖像，比如橫幅廣告（banner）、商品圖片、較大的插圖等都可以保存為JPG格式。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.5.2圖像標(biāo)簽及常用屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：網(wǎng)頁中如何插入圖像？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽。知識點(diǎn)講解講解圖像標(biāo)簽及常用屬性（1）教師展示PPT，對圖像標(biāo)簽及常用屬性進(jìn)行具體講解。在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽，接下來將詳細(xì)介紹圖像標(biāo)簽<img/>和與它相關(guān)的屬性。圖像標(biāo)簽的基本語法格式如下：<imgsrc="圖像url"/>在上面的語法中，src屬性指定圖像文件的路徑和文件名，是<img/>標(biāo)簽的必需屬性。要想在網(wǎng)頁中靈活地使用圖像，除src屬性外，HTML還為<img/>標(biāo)簽提供了常用屬性。1.alt屬性有時(shí)頁面中的圖像可能無法正常顯示，如圖片加載錯(cuò)誤，瀏覽器版本過低等。因此，為頁面上的圖像添加替換文本是個(gè)很好的方式，在圖像無法顯示時(shí)告訴用戶該圖片的信息，這就需要使用圖像的alt屬性。2.width和height屬性通常情況下，如果不為<img/>標(biāo)簽設(shè)置寬度和高度屬性，圖片會按照它的原始尺寸顯示。通過width和height屬性可以自定義圖片的寬度和高度。通常我們只設(shè)置其中的一個(gè)屬性，另一個(gè)屬性則會依據(jù)前一個(gè)屬性將原圖等比例縮放顯示。如果同時(shí)設(shè)置兩個(gè)屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會變形或失真。3.border屬性網(wǎng)頁默認(rèn)情況下圖像是沒有邊框的，通過border屬性可以為圖像添加邊框，設(shè)置邊框的寬度。通過實(shí)例18來演示使用border、width和height屬性同時(shí)對圖像進(jìn)行修飾。4.vspace和hspace屬性在網(wǎng)頁中，由于排版需要，有時(shí)候還需要調(diào)整圖像的邊距。HTML5中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。5.align屬性圖文混排是網(wǎng)頁中很常見的排版方式，默認(rèn)情況下圖像的底部會與文本的第一行文字對齊。注意：（1）網(wǎng)頁制作中并不建議圖像標(biāo)簽<img/>直接使用border、vspace、hspace及align屬性，而是用CSS樣式替代。（2）網(wǎng)頁制作中裝飾性的圖像不直接插入<img/>標(biāo)簽，一般通過CSS設(shè)置背景圖像來實(shí)現(xiàn)。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。2.5.3相對路徑和絕對路徑內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：計(jì)算機(jī)中文件的位置怎么表示？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：文件在計(jì)算機(jī)中的位置是通過路徑來表示的，網(wǎng)頁中的路徑通常分為絕對路徑和相對路徑兩種。知識點(diǎn)講解講解相對路徑和絕對路徑（1）教師展示PPT，對相對路徑和絕對路徑進(jìn)行具體講解。1.絕對路徑絕對路徑就是網(wǎng)頁上的文件或目錄在硬盤上的真正路徑，如實(shí)例20所示的圖片路徑即為絕對路徑。實(shí)例20絕對路徑C:＼Users＼Administrator＼Desktop＼網(wǎng)頁設(shè)計(jì)與制作＼項(xiàng)目二案例＼實(shí)例19使用align屬性2.相對路徑相對路徑就是相對于當(dāng)前文件的路徑。相對路徑?jīng)]有盤符，通常是以網(wǎng)頁文件為起點(diǎn)，通過層級關(guān)系描述目標(biāo)圖像的位置。相對路徑的設(shè)置分為以下3種。（1）圖像文件和網(wǎng)頁文件位于同一個(gè)文件夾中，只需輸入圖像文件的名稱即可，如<imgsrc="logo.gif"/>。（2）圖像文件位于HTML文件的下一級文件夾，上下級文件之間用“/”隔開，如<imgsrc="img/img01/logo.gif"/>。（3）圖像文件位于HTML文件的上一級文件夾中，在文件名之前加入“../”，如果在上兩級文件夾中，則需要使用“../../”，依此類推，如<imgsrc="../logo.gif"/>。網(wǎng)頁中并不推薦使用絕對路徑，因?yàn)榫W(wǎng)頁制作完成之后需要將所有的文件上傳到服務(wù)器，此時(shí)圖像文件可能在服務(wù)器的C盤，也有可能在D盤、E盤中；可能在A文件夾中，也有可能在B文件夾中，這樣就會造成圖片路徑錯(cuò)誤，網(wǎng)頁無法正常顯示。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。項(xiàng)目小結(jié)本項(xiàng)目主要介紹了HTML5的優(yōu)勢和標(biāo)簽的概念，具體內(nèi)容如下。HTML5的優(yōu)勢：介紹了HTML5的三個(gè)優(yōu)勢和新增標(biāo)簽。HTML5的結(jié)構(gòu)：介紹了XHTML文檔和HTML5文檔的不同。標(biāo)簽概述：介紹了標(biāo)簽的分類、標(biāo)簽的關(guān)系、標(biāo)簽屬性和頭部相關(guān)標(biāo)簽。文本控制標(biāo)簽：介紹了頁面格式化標(biāo)簽、文本樣式標(biāo)簽、文本格式化標(biāo)簽和文本語義標(biāo)簽。圖像標(biāo)簽：介紹了常見的圖像格式、圖像標(biāo)簽及常用屬性、相對路徑和絕對路徑。通過本項(xiàng)目的學(xué)習(xí)，了解HTML5文檔的優(yōu)勢和結(jié)構(gòu)，掌握標(biāo)簽概念，熟練使用相關(guān)的標(biāo)簽為網(wǎng)頁添加文本樣式和圖片效果。項(xiàng)目實(shí)訓(xùn)實(shí)訓(xùn)3實(shí)訓(xùn)名稱HTML5文檔結(jié)構(gòu)實(shí)訓(xùn)目標(biāo)正確編寫HTML5文檔基本代碼實(shí)訓(xùn)實(shí)施請編寫HTML5文檔基本代碼，在瀏覽器中顯示“這是HTML5文檔”，網(wǎng)頁標(biāo)題設(shè)為“首頁”。實(shí)訓(xùn)4實(shí)訓(xùn)名稱使用標(biāo)題標(biāo)簽1實(shí)訓(xùn)目標(biāo)使用標(biāo)題標(biāo)簽設(shè)置六級標(biāo)題實(shí)訓(xùn)實(shí)施使用標(biāo)題標(biāo)簽，在瀏覽器中顯示6種不同字號的標(biāo)題。實(shí)訓(xùn)5實(shí)訓(xùn)名稱使用標(biāo)題標(biāo)簽2實(shí)訓(xùn)目標(biāo)使用標(biāo)題標(biāo)簽的屬性實(shí)訓(xùn)實(shí)施使用標(biāo)題標(biāo)簽，顯示4種不同字號的標(biāo)題，標(biāo)題內(nèi)容分別設(shè)置為默認(rèn)對齊、左對齊、居中對齊和右對齊。實(shí)訓(xùn)6實(shí)訓(xùn)名稱使用文本樣式標(biāo)簽實(shí)訓(xùn)目標(biāo)使用<font>標(biāo)簽實(shí)訓(xùn)實(shí)施編寫HTML5代碼，輸出《靜夜思》，要求第一句文本是默認(rèn)樣式的文本，第二句文本是2號藍(lán)色文本，第三句文本是5號紅色文本，第四句文本是7號綠色文本，且字體是宋體。（作品點(diǎn)評）教師對學(xué)生的提交的上機(jī)測試作品進(jìn)行點(diǎn)評，指出代碼中容易出現(xiàn)bug的地方，并給與解答。布置作業(yè)完成教師布置的作業(yè)。預(yù)習(xí)下章內(nèi)容。項(xiàng)目測評1.HTML5的優(yōu)勢能夠舉例說明2.HTML5全新的結(jié)構(gòu)能夠正確解釋文檔標(biāo)簽的含義3.標(biāo)簽的分類能夠正確使用單標(biāo)簽和雙標(biāo)簽4.標(biāo)簽的關(guān)系能夠正確使用嵌套關(guān)系和并列關(guān)系5.標(biāo)題標(biāo)簽?zāi)軌蚝侠硎褂貌煌笮〉臉?biāo)題標(biāo)簽6.文本樣式標(biāo)簽?zāi)軌蚴褂?lt;font>標(biāo)簽7.<time>標(biāo)簽?zāi)軌蚴褂?lt;time>標(biāo)簽8.<img/>標(biāo)簽?zāi)軌蚴褂?lt;img/>標(biāo)簽9.課后習(xí)題能夠完成課后習(xí)題10.課堂表現(xiàn)能夠遵守紀(jì)律，完成學(xué)習(xí)任務(wù)教學(xué)后記《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)設(shè)計(jì)課程名稱：網(wǎng)頁設(shè)計(jì)與制作授課年級：20年級授課學(xué)期：20學(xué)年第一學(xué)期教師姓名：老師

20年月日課題名稱項(xiàng)目三CSS樣式計(jì)劃課時(shí)課時(shí)內(nèi)容分析設(shè)計(jì)出美觀、大方、簡潔和高訪問量的網(wǎng)站僅通過HTML5實(shí)現(xiàn)是非常困難的，HTML5僅定義了網(wǎng)頁結(jié)構(gòu)，對于文本樣式?jīng)]有過多涉及。這就需要一種能有效控制網(wǎng)頁布局、字體、顏色、背景和其他圖文效果的技術(shù)。采用CSS技術(shù)制作網(wǎng)頁，能對網(wǎng)頁的頁面布局、字體、顏色、背景等實(shí)現(xiàn)精準(zhǔn)的控制。本項(xiàng)目將通過實(shí)例介紹使用CSS樣式美化網(wǎng)頁的方法。教學(xué)目標(biāo)掌握CSS樣式的使用方法。掌握CSS語法。掌握CSS選擇器的使用。重點(diǎn)及措施教學(xué)重點(diǎn)：使用CSS美化文本；使用CSS美化頁面措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：CSS樣式的優(yōu)點(diǎn)，CSS常用選擇器措施：通過上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過程任務(wù)3.1CSS基礎(chǔ)知識3.1.1初識CSS樣式內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：為什么要用CSS樣式修飾網(wǎng)頁？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：CSS的語法簡單，編寫較容易。應(yīng)用CSS技術(shù)，可以減少程序代碼數(shù)量、提高網(wǎng)頁加載速度。熟練掌握CSS技術(shù)，可統(tǒng)一網(wǎng)站風(fēng)格，讓網(wǎng)頁更容易維護(hù)。CSS文件是文本文件，它包含了一些CSS標(biāo)簽，CSS文件必須使用CSS為文件名后綴。通過簡單地更改CSS文件，可以改變網(wǎng)頁的整體表現(xiàn)形式，降低網(wǎng)頁設(shè)計(jì)的難度。知識點(diǎn)講解講解使用CSS修飾段落（1）教師展示PPT，對使用CSS修飾段落進(jìn)行具體講解。CSS可以給網(wǎng)頁文字設(shè)置不同的字體樣式，即建立一個(gè)CSS規(guī)則。如果想改變整個(gè)網(wǎng)頁上所有出現(xiàn)的顏色、尺寸、字體，只需要修改一些CSS規(guī)則即可。CSS文件是純文本格式文件。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。3.1.2HTML和CSS的對比內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：同樣是排版網(wǎng)頁，對比HTML和CSS有何不同？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：CSS樣式具有很多優(yōu)點(diǎn)，如可以大大縮減頁面代碼，提高頁面瀏覽速度。CSS結(jié)構(gòu)清晰，容易被搜索引擎抓取到內(nèi)容。知識點(diǎn)講解講解動(dòng)態(tài)網(wǎng)頁（1）教師展示PPT，對靜態(tài)網(wǎng)頁進(jìn)行具體講解。1.HTML的缺點(diǎn)在網(wǎng)頁設(shè)計(jì)與制作中，只依賴HTML標(biāo)簽樣式已經(jīng)不能滿足網(wǎng)頁設(shè)計(jì)者的需求，HTML的缺點(diǎn)表現(xiàn)在以下4個(gè)方面。（1）維護(hù)困難：修改某個(gè)特殊標(biāo)簽格式耗時(shí)較長，尤其對整個(gè)網(wǎng)站而言，后期修改和維護(hù)成本較高。（2）標(biāo)簽不足：HTML本身標(biāo)簽非常少，很多標(biāo)簽都是為網(wǎng)頁內(nèi)容服務(wù)的，而關(guān)于內(nèi)容樣式標(biāo)簽，如文字間距、段落縮進(jìn)，很難在HTML中找到。（3）網(wǎng)頁體積大：由于沒有對各種風(fēng)格樣式進(jìn)行控制，HTML頁面往往體積過大，占用寬度。（4）定位困難：在整體布局頁面時(shí)，HTML對各個(gè)模塊的位置調(diào)整缺乏靈活，過多的<table>標(biāo)簽將會導(dǎo)致頁面的復(fù)雜和后期維護(hù)的困難。2.CSS樣式的優(yōu)點(diǎn)CSS樣式具有很多優(yōu)點(diǎn)，如可以大大縮減頁面代碼，提高頁面瀏覽速度。CSS結(jié)構(gòu)清晰，容易被搜索引擎抓取到內(nèi)容。其優(yōu)點(diǎn)表現(xiàn)在以下5個(gè)方面。（1）豐富的樣式定義：CSS提供了豐富的文檔樣式外觀，可以設(shè)置文本和背景屬性；允許為任何元素創(chuàng)建邊框，設(shè)置元素邊框與其他元素間的距離；允許隨意改變文本的大寫和小寫方式、修飾方式等效果。（2）易于使用和修改：CSS可以將樣式定義在HTML元素的style屬性中，也可以定義在header部分，還可以寫在一個(gè)專門的CSS文件中(即CSS樣式表)，將所有的樣式聲明統(tǒng)一存放，進(jìn)行統(tǒng)一管理。如果要修改樣式，只需在樣式列表中修改。（3）多頁面應(yīng)用：CSS樣式表可以單獨(dú)存放在一個(gè)CSS文件中，這樣可以在多個(gè)頁面中使用同一個(gè)CSS樣式表。CSS樣式表不屬于任何頁面文件，在任何頁面文件中都可以引用，這樣可以實(shí)現(xiàn)多個(gè)頁面風(fēng)格的統(tǒng)一。（4）層疊：對一個(gè)元素多次設(shè)置同一個(gè)樣式，最后一次設(shè)置的屬性值有效。在瀏覽器中看到的將是最后一次設(shè)置的樣式效果。（5）頁面壓縮：在使用HTML定義頁面時(shí)需要大量或重復(fù)的表格和各種規(guī)格的文字樣式，這樣會產(chǎn)生大量的HTML標(biāo)簽，從而使頁面文件的大小增加，而使用CSS可以減少頁面文件體積，加載頁面時(shí)可提升速度。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。3.1.4CSS語法和樣式表分類內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：CSS樣式表分類分為幾類？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：行內(nèi)樣式表，內(nèi)部樣式表，外部樣式表。知識點(diǎn)講解講解CSS語法（1）教師展示PPT，對CSS語法進(jìn)行具體講解。CSS語法格式由若干樣式規(guī)則組成，這些樣式規(guī)則可以應(yīng)用到不同的元素或文檔中來定義它們顯示的外觀。每一條樣式規(guī)則都由選擇器（selector）、屬性（property）和屬性值（value）三部分組成。selector有多種形式，既可以是文檔中的HTML標(biāo)簽，如<body><table><p>標(biāo)簽等，也可以是XML文檔中的標(biāo)簽。property是選擇器制定的標(biāo)簽所包含的屬性。value是選擇器的多個(gè)屬性，屬性和屬性值為一組，組與組之間需要用分號隔開。CSS語法格式為：selector{propertyl：valuel；property2：value2；}2.CSS樣式規(guī)則下面給出一條樣式規(guī)則，如p{color：red}。該樣式規(guī)則的選擇器為p，為段落標(biāo)簽<p>提供樣式，color為段落文字的顏色屬性，red為屬性值。此樣式表示標(biāo)簽<p>指定的段落文字為紅色。如果要為段落設(shè)置多種樣式，則可以使用下列語句：p{font-family："隸書"；color：red；font-size：40px；font-weight：bold}3.樣式表分類CSS的應(yīng)用樣式有行內(nèi)樣式表、內(nèi)部樣式表（內(nèi)嵌樣式表）和外部樣式表3類。（1）行內(nèi)樣式表當(dāng)需要對某個(gè)特定標(biāo)簽進(jìn)行單獨(dú)設(shè)置時(shí)使用行內(nèi)樣式表，應(yīng)用到各個(gè)頁面。在所修飾的標(biāo)簽內(nèi)加<style>屬性，如果后續(xù)為多條樣式規(guī)則，多條樣式規(guī)則用分號分開。（2）內(nèi)部樣式表內(nèi)部樣式表與網(wǎng)頁內(nèi)容位于同一個(gè)文件中，在<head>標(biāo)簽中的<style>標(biāo)簽中。這種方式便于在同一頁面中修改樣式，但是不能徹底實(shí)現(xiàn)頁面內(nèi)容與樣式的分離，不利于在多頁面間共享復(fù)用代碼。（3）外部樣式表外部樣式表是指CSS代碼單獨(dú)寫在一個(gè)或多個(gè)CSS文件中，需要時(shí)在<head>中通過<link/>標(biāo)簽引用，加載頁面時(shí)沒有加載樣式表，需要用到樣式表時(shí)才去尋找相應(yīng)的樣式。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)3.2CSS樣式代碼3.2.1CSS常用選擇器內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：CSS中選擇器有什么用？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：HTML5中的所有標(biāo)簽都是通過不同的CSS選擇器進(jìn)行控制的。根據(jù)CSS選擇器用途可把選擇器分為標(biāo)簽選擇器、類選擇器和ID選擇器。每個(gè)選擇器代碼可以一次聲明多個(gè)，也可以將選擇器聲明多個(gè)。。知識點(diǎn)講解講解動(dòng)態(tài)網(wǎng)頁（1）教師展示PPT，對標(biāo)簽選擇器進(jìn)行具體講解。HTML5文檔是由多個(gè)不同標(biāo)簽組成的，而CSS選擇器就是聲明這些標(biāo)簽所用的樣式，例如，p選擇器用于聲明頁面中所有<p>標(biāo)簽的樣式風(fēng)格，同樣也可以通過h1選擇器來聲明頁面中所有<h1>標(biāo)簽的風(fēng)格。標(biāo)簽選擇器的規(guī)則自動(dòng)應(yīng)用于文檔中對應(yīng)的標(biāo)簽，能夠?qū)ζ鋵傩赃M(jìn)行重新定義，同時(shí)會影響到網(wǎng)頁中所有此類標(biāo)簽元素。標(biāo)簽選擇器使用簡單、明確且通用性強(qiáng)，但針對性較差。1）格式TagName{property：value}其中，TagName表示標(biāo)簽名稱，如<p><h1>等標(biāo)簽；property表示CSS屬性；value表示CSS屬性值。2）用途通過一個(gè)具體標(biāo)簽來命名，可以對文檔中每一個(gè)出現(xiàn)該標(biāo)簽的地方應(yīng)用樣式定義。這種做法通常用于設(shè)置整個(gè)網(wǎng)站中都會出現(xiàn)的基本樣式。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解類選擇器（1）教師展示PPT，對類選擇器進(jìn)行具體講解。在一個(gè)頁面中，使用標(biāo)簽選擇器會控制該頁面中所有此標(biāo)簽的顯示樣式，如果需要將此類標(biāo)簽中的其中一個(gè)標(biāo)簽重新設(shè)定，此時(shí)僅使用標(biāo)簽選擇器是無法達(dá)到效果的，還需要使用類選擇器。通過類選擇器設(shè)置樣式，可以將同一種樣式定義為一個(gè)類，在CSS中，類選擇器使用符號“.”開頭。類選擇器有別于ID選擇器，屬性值可以重復(fù)在多個(gè)元素中使用，例如，class屬性可以在<div>和<p>標(biāo)簽中使用。1）格式.classValue{property：value}其中，classValue是選擇器的名稱，具體名稱由CSS制定者命名。如果一個(gè)標(biāo)簽具有class屬性且class屬性值為classValue，那么該標(biāo)簽的呈現(xiàn)樣式由該選擇器指定。在定義類選擇器時(shí)，需要在classValue前面加一個(gè)句點(diǎn)“.”表示標(biāo)簽名稱，如<p><h1>等HTML標(biāo)簽；property表示CSS屬性；value表示CSS屬性值。說明：定義選擇器時(shí)需要使用英文的“.”符號加在選擇器的前面。2）用途下面定義了兩個(gè)類選擇器，分別為rd和se。類的名稱可以是任意英文字符串或是英文開頭與數(shù)字的結(jié)合，一般情況下，其使用功能及效果的簡要縮寫語法格式為：.rd{color：red}.se{font-size：3px}（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解ID選擇器（1）教師展示PPT，對ID選擇器進(jìn)行具體講解。ID選擇器與類選擇器類似，都是針對特定屬性的屬性值匹配。ID選擇器是使用HTML標(biāo)簽的ID屬性值作為選擇器名，并以“#”開頭進(jìn)行標(biāo)識。ID屬性類似于身份證，是HTML元素的唯一標(biāo)識，頁面內(nèi)不能有重復(fù)的ID標(biāo)識屬性。對應(yīng)的ID選擇器一般用于修飾對應(yīng)ID標(biāo)識的HTML標(biāo)簽內(nèi)容，實(shí)際應(yīng)用中常和<div>標(biāo)簽配合使用，表示修飾對應(yīng)ID標(biāo)識的某個(gè)<div>區(qū)塊。1）格式#idValue{property：value}其中，#idValue是選擇器的名稱，可以由CSS定義者自己命名。如果某標(biāo)簽具有ID屬性，并且該屬性值為idValue，那么該標(biāo)簽的呈現(xiàn)樣式可以由該ID選擇器制定。正常情況下，ID屬性值在文檔中具有唯一性。2）用途在頁面中具有ID屬性的標(biāo)簽才能夠使用ID選擇器定義樣式，所以與類選擇器相比，使用ID選擇器具有一定的局限性。類選擇器與ID選擇器的主要區(qū)別有：類選擇器可以給任意數(shù)量的標(biāo)簽定義樣式，而ID選擇器在頁面的標(biāo)簽中只能使用一次；ID選擇器比類選擇器具有更高的優(yōu)先級，即當(dāng)ID選擇器與類選擇器發(fā)生沖突時(shí)，優(yōu)先使用ID選擇器。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。3.2.2CSS選擇器聲明內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：CSS選擇器聲明有哪些方式？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：集體聲明，多重嵌套聲明。知識點(diǎn)講解講解集體聲明（1）教師展示PPT，對集體聲明進(jìn)行具體講解。在一個(gè)頁面中，有時(shí)不同種類的標(biāo)簽樣式要保持一致。例如，<p>標(biāo)簽和<h1>標(biāo)簽要保持一致，此時(shí)可以共同使用類選擇器，還可以使用集體聲明。集體聲明就是在聲明各種CSS選擇器時(shí)，風(fēng)格相同的CSS選擇器同時(shí)聲明。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解多重嵌套聲明（1）教師展示PPT，對多重嵌套聲明進(jìn)行具體講解。在CSS控制HTML標(biāo)簽樣式時(shí)，可以使用多重嵌套聲明，對指定位置的HTML標(biāo)簽進(jìn)行修飾，表示嵌套的選擇器間用空格隔開。例如，當(dāng)<p>與</p>之間包含<a>和</a>標(biāo)簽時(shí)，可以使用多重嵌套聲明。超鏈接顯示為紅色字體，大小為30px，其原因是使用了多重嵌套聲明。當(dāng)<p>與</p>之間包含<a>和</a>標(biāo)簽時(shí)，就可以使用嵌套標(biāo)簽進(jìn)行聲明，表示<p>標(biāo)簽下面的<a>標(biāo)簽的CSS屬性樣式。同樣的道理，不僅可以嵌套標(biāo)簽本身，類選擇器和ID選擇器都可以進(jìn)行嵌套。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。3.2.3CSS屬性單位內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：CSS屬性單位有哪些？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：CSS顏色單位，CSS長度單位。知識點(diǎn)講解講解CSS顏色單位（1）教師展示PPT，對CSS顏色單位進(jìn)行具體講解。CSS有很多設(shè)置字體與背景顏色參數(shù)的樣式，包括命名顏色、RGB顏色及十六進(jìn)制顏色等。1）命名顏色CSS中可以直接用英文單詞命名與之相對應(yīng)的顏色，這種方法的優(yōu)點(diǎn)是簡單、直接、容易掌握。此處預(yù)設(shè)了16種顏色及其衍生色，這16種顏色是CSS規(guī)范推薦的，主流的瀏覽器能夠識別它們。2）RGB顏色如果要使用十進(jìn)制表示顏色，則需要使用RGB顏色。用十進(jìn)制表示顏色，最大值為255，最小值為0。要使用RGB顏色，必須使用rgb(R，G，B)，其中R、G、B分別表示紅、綠、藍(lán)的十進(jìn)制值，通過這3個(gè)值的組合便可以形成不同的顏色，例如，rgb(255，0，0)表示紅色，rgb(0，255，0)表示綠色，rgb(0，0，0)表示黑色，rgb(255，255，255)表示白色。RGB設(shè)置方法一般分為兩種：百分比設(shè)置和直接用數(shù)值設(shè)置。例如，為<p>標(biāo)簽設(shè)置顏色，兩種語法格式為：p{color：rgb(123，0，25)}p{color：rgb(45%，0%，25%)}3）十六進(jìn)制顏色十六進(jìn)制顏色是常用的定義方式，是由0~9和A~F組成的。十六進(jìn)制顏色的基本語法格式為：#RRGGBB其中，R表示紅色，G表示綠色，B表示藍(lán)色。而RR、GG、BB最大值為FF，表示十進(jìn)制中的255；最小值為00，表示十進(jìn)制中的0，例如，#FF0000表示紅色，#00FF00表示綠色，#0000FF表示藍(lán)色，#000000表示黑色，#FFFFFF表示白色。其他顏色是通過紅、綠、藍(lán)三種基本顏色組合而成的。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解CSS長度單位（1）教師展示PPT，對CSS長度單位進(jìn)行具體講解。為保證頁面元素能夠在瀏覽器中完全顯示并且布局合理，就需要設(shè)定元素間的間距和元素本身的邊界等，這就離不開長度單位的使用。CSS中長度單位分為絕對單位和相對單位兩類。絕對單位：用于設(shè)定絕對位置，主要有英寸(in)、厘米(cm)、毫米(mm)、磅(pt)和pica(pc)。其中，英寸是國外常用的度量單位；厘米用于設(shè)定距離比較大的頁面元素框；毫米用于設(shè)定比較精確的元素距離和大??；磅一般用于設(shè)定文字的大小。相對單位：指在度量時(shí)需要參照其他頁面元素的單位值。使用相對單位所度量的實(shí)際距離可能會隨著這些單位值的改變而改變。CSS提供了三種相對單位：em、ex和px。其中px也叫像素，是目前廣泛使用的一種單位。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。任務(wù)3.3使用CSS樣式美化文本3.3.1設(shè)置字體屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：字體有哪些屬性？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：字體，字體大小，字體風(fēng)格。知識點(diǎn)講解講解字體（1）教師展示PPT，對字體進(jìn)行具體講解。字體font-family屬性用于制定文字字體類型，如宋體、黑體、隸書等，即在網(wǎng)頁中展示不同的字體。1）格式{font-family：name}{font-family：cursive|fantasy|monospace|serif|sans-serif}從語法格式上可以看出，font-family有兩種聲明方式。第一種方式是使用name字體名稱，按優(yōu)先順序排列，以逗號隔開，如果字體名稱包含空格，則應(yīng)使用引號括起，這種聲明方式比較常用；第二種方式是使用所列出的字體序列名稱，如果使用fantasy序列，則將提供默認(rèn)字體序列。font-family屬性值可以是一組值，即一次定義多個(gè)字體，當(dāng)瀏覽器讀取字體時(shí)，會按照字體排列的先后順序來決定使用哪種字體。若瀏覽器在計(jì)算機(jī)上找不到第一種字體，則自動(dòng)讀取第二種字體；若第二種字體也找不到，則自動(dòng)讀取第三種字體，依此類推。當(dāng)定義的所有字體都找不到時(shí)，會選用計(jì)算機(jī)系統(tǒng)的默認(rèn)字體。2）說明在字體顯示時(shí)，如果指定了一種特殊字體類型，而在瀏覽器或者操作系統(tǒng)中該類型不能正確獲取，則可以通過font-family屬性預(yù)設(shè)多種字體類型。font-family屬性預(yù)設(shè)字體類型時(shí)，每種字體之間使用逗號隔開。當(dāng)前面的字體類型不能正確顯示時(shí)，系統(tǒng)將自動(dòng)選擇后一種字體類型，依此類推。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解字體大?。?）教師展示PPT，對字體大小進(jìn)行具體講解。網(wǎng)頁中的標(biāo)題通常使用突出的字體顯示，用于引人注意。多種字體合理搭配形成的網(wǎng)頁，既吸引眼球，又能提高閱讀速度。CSS中通常使用font-size設(shè)置文字大小。1）格式{font-size：數(shù)值|inherit|xx-small|x-small|small|medium|large|...}從語法格式上可以看出，font-size可以通過數(shù)值來定義字體大小，如font-size：10px表示定義的字體大小為10px，還可以通過medium等參數(shù)定義字體的大小。對于font-size的屬性值，當(dāng)使用絕對值時(shí)要注意加上單位，當(dāng)沒有單位時(shí)瀏覽器會默認(rèn)以px為單位。這里的取值除使用px以外，還可以使用in(英寸)、cm(厘米)、mm(毫米)、pt(點(diǎn))、pc(皮卡)。另外，字號大小的取值還有一些關(guān)鍵字，分別為xx-small(極小)、x-small(較小)、small(小)、medium(標(biāo)準(zhǔn)大小)、large(大)、x-large(較大)、xx-large(極大)。網(wǎng)頁中文字被設(shè)置成不同的大小，其設(shè)置采用了絕對值、關(guān)鍵字和百分比等形式。font-size字體大小為200%時(shí)，其比較對象是上一級標(biāo)簽中的10pt。同樣，還可以使用inherit值，直接繼承上一級標(biāo)簽的字體大小。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解字體風(fēng)格（1）教師展示PPT，對字體風(fēng)格進(jìn)行具體講解。CSS通常使用font-style定義字體風(fēng)格，即字體的顯示樣式，如斜體，其語法格式為：{font-style：normal|italic|oblique|inherit}（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。講解字體加粗（1）教師展示PPT，對字體加粗進(jìn)行具體講解。通過設(shè)置字體粗細(xì)，可以使文字顯示不同的外觀。CSS中通常使用font-weight定義字體的粗細(xì)程度，其語法格式為：{font-weight：100-900|bold|bolder|lighter|normal；} font-weight屬性有五個(gè)有效值，分別是100~900、bold、bolder、lighter、normal。如果沒有設(shè)置該屬性，則使用默認(rèn)值normal。屬性值設(shè)置為100~900，值越大，加粗的程度就越高。（2）學(xué)生自主提問，教師對疑難問題進(jìn)行解答。3.3.2設(shè)置段落屬性內(nèi)容學(xué)習(xí)分組討論對新課進(jìn)行講解前，先讓學(xué)生分組討論以下問題：段落屬性有哪些？請小組代表對以上問題發(fā)表見解。教師對上述問題進(jìn)行解釋：答案：字符間隔，水平對齊，文本縮進(jìn)