項(xiàng)目引入：本項(xiàng)目主要講解Dreamweaver的基礎(chǔ)知識(shí)和基本操作。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以認(rèn)識(shí)和了解Dreamweaver工作區(qū)的構(gòu)成，學(xué)會(huì)創(chuàng)建網(wǎng)站框架以及管理站點(diǎn)的方法，為以后的網(wǎng)站設(shè)計(jì)和制作打下堅(jiān)實(shí)的基礎(chǔ)。項(xiàng)目1初識(shí)Dreamweaver了解Dreamweaver工作區(qū)的構(gòu)成掌握創(chuàng)建網(wǎng)站框架的方法和流程掌握站點(diǎn)的管理方法項(xiàng)目目標(biāo)掌握“在線留言網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“時(shí)尚美發(fā)網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“有機(jī)蔬菜網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)對(duì)Dreamweaver的興趣提升獨(dú)立創(chuàng)建和管理站點(diǎn)的自信心素養(yǎng)目標(biāo)任務(wù)1.1工作區(qū)開(kāi)始屏幕不同風(fēng)格的工作區(qū)多文檔的編輯界面“插入”面板任務(wù)實(shí)踐—在線留言網(wǎng)頁(yè)1.1.1開(kāi)始屏幕啟動(dòng)DreamweaverCC2019后，首先看到的是開(kāi)始屏幕，在其中可以選擇新建文檔的類型或打開(kāi)已有的文檔等。選擇“編輯>首選項(xiàng)”命令，彈出“首選項(xiàng)”對(duì)話框，取消勾選“顯示開(kāi)始屏幕”復(fù)選框。單擊“應(yīng)用”按鈕完成設(shè)置，單擊“關(guān)閉”按鈕，關(guān)閉對(duì)話框。再次啟動(dòng)DreamweaverCC2019時(shí)將不再顯示開(kāi)始屏幕。開(kāi)始頁(yè)面“首選參數(shù)”對(duì)話框1.1.2不同風(fēng)格的工作區(qū)選擇“窗口>工作區(qū)布局”命令，彈出子菜單，選擇“標(biāo)準(zhǔn)”或“開(kāi)發(fā)人員”命令可切換工作區(qū)風(fēng)格，工作區(qū)會(huì)發(fā)生相應(yīng)的改變?！肮ぷ鞑季帧泵?.1.3多文檔編輯界面DreamweaverCC2019提供了多文檔的編輯界面，將多個(gè)文檔整合在一起，方便用戶在各個(gè)文檔之間切換。用戶可以單擊文檔窗口上方的選項(xiàng)卡切換到相應(yīng)的文檔。通過(guò)多文檔的編輯界面，用戶可以同時(shí)編輯多個(gè)文檔。多文檔編輯界面1.1.4插入面板“插入”面板包括“HTML”“表單”“模板”“Bootstrap組件”“jQueryMobile”“jQueryUI”“收藏夾”7個(gè)選項(xiàng)卡，不同功能的按鈕分門(mén)別類地放在不同的選項(xiàng)卡中。在DreamweaverCC2019中，“插入”面板可以菜單和選項(xiàng)卡兩種方式顯示。如果需要切換為菜單樣式，可用鼠標(biāo)右鍵單擊“插入”面板的選項(xiàng)卡區(qū)域，在彈出的快捷菜單中選擇“顯示為菜單”命令。插入面板任務(wù)實(shí)踐——在線留言網(wǎng)頁(yè)使用“打開(kāi)”命令打開(kāi)文件，使用“頁(yè)面屬性”對(duì)話框改變鏈接文字的狀態(tài)，熟悉CSS功能的使用方法。效果圖任務(wù)1.2創(chuàng)建網(wǎng)站框架站點(diǎn)管理器定義新站點(diǎn)創(chuàng)建文件夾創(chuàng)建和保存網(wǎng)頁(yè)任務(wù)實(shí)踐—時(shí)尚美發(fā)網(wǎng)頁(yè)1.2.1站點(diǎn)管理器站點(diǎn)管理器的主要功能包括新建站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)，以及導(dǎo)入或?qū)С稣军c(diǎn)。若要管理站點(diǎn)，必須打開(kāi)“管理站點(diǎn)”對(duì)話框。“文件”面板“桌面”列表“管理站點(diǎn)”面板1.2.2定義新站點(diǎn)在DreamweaverCC2019中，站點(diǎn)通常包含兩部分，即本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。本地站點(diǎn)是本地計(jì)算機(jī)上的一組文件，遠(yuǎn)程站點(diǎn)是遠(yuǎn)程Web服務(wù)器上的一個(gè)位置。用戶將本地站點(diǎn)中的文件發(fā)布到網(wǎng)絡(luò)上的遠(yuǎn)程站點(diǎn)，使其他人可以訪問(wèn)它們。1.2.3創(chuàng)建文件夾站點(diǎn)建立好之后，需要先在站點(diǎn)管理器中規(guī)劃站點(diǎn)文件夾。（1）在“文件”面板中選擇站點(diǎn)。（2）通過(guò)以下兩種方法新建文件夾。①單擊“文件”面板右上方的按鈕，在彈出的菜單中選擇“文件>新建文件夾”命令。②在“文件”面板中，在站點(diǎn)上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建文件夾”命令。（3）輸入新文件夾的名稱1.2.4創(chuàng)建和保存網(wǎng)頁(yè)在標(biāo)準(zhǔn)的DreamweaverCC2019環(huán)境下，創(chuàng)建和保存網(wǎng)頁(yè)的操作步驟如下。（1）選擇“文件>新建”命令，或按Ctrl+N組合鍵，彈出“新建文檔”對(duì)話框，選擇“新建文檔”選項(xiàng)，在“文檔類型”列表中選擇“</>HTML”選項(xiàng)，在“框架”區(qū)域選擇“無(wú)”選項(xiàng)卡。（2）設(shè)置完成后，單擊“創(chuàng)建”按鈕，彈出文檔窗口，新文檔在該窗口中打開(kāi)。根據(jù)需要在文檔窗口中選擇不同的視圖設(shè)計(jì)網(wǎng)頁(yè)任務(wù)實(shí)踐—時(shí)尚美發(fā)網(wǎng)頁(yè)使用“打開(kāi)”命令打開(kāi)文件，使用組合鍵復(fù)制并粘貼文件，使用“新建”命令新建文件，使用“保存”命令保存文件。效果圖打開(kāi)站點(diǎn)編輯站點(diǎn)復(fù)制站點(diǎn)刪除站點(diǎn)導(dǎo)出和導(dǎo)入站點(diǎn)任務(wù)實(shí)踐—有機(jī)蔬菜網(wǎng)頁(yè)任務(wù)1.3管理站點(diǎn)1.3.1打開(kāi)站點(diǎn)當(dāng)要修改某個(gè)網(wǎng)站的內(nèi)容時(shí)，首先要打開(kāi)站點(diǎn)。具體操作步驟如下。（1）啟動(dòng)DreamweaverCC2019。（2）選擇“窗口>文件”命令，或按F8鍵，彈出“文件”面板，在“桌面”下拉列表中選擇要打開(kāi)的站點(diǎn)，打開(kāi)站點(diǎn)。打開(kāi)站點(diǎn)選擇站點(diǎn)1.3.2編輯站點(diǎn)如果要修改站點(diǎn)的一些設(shè)置，就需要編輯站點(diǎn)。例如，修改站點(diǎn)的默認(rèn)圖像文件夾的路徑。1.3.3復(fù)制站點(diǎn)復(fù)制站點(diǎn)可省去重復(fù)建立多個(gè)結(jié)構(gòu)相同的站點(diǎn)的操作步驟，從而提高工作效率。在“管理站點(diǎn)”對(duì)話框中可以復(fù)制站點(diǎn)，具體操作步驟如下。（1）在“管理站點(diǎn)”對(duì)話框中選擇要復(fù)制的站點(diǎn)。（2）單擊“復(fù)制當(dāng)前選定的站點(diǎn)”按鈕進(jìn)行復(fù)制。（3）雙擊新復(fù)制的站點(diǎn)，彈出“站點(diǎn)設(shè)置對(duì)象”對(duì)話框，在“站點(diǎn)名稱”文本框中可以更改新站點(diǎn)的名稱。1.3.4刪除站點(diǎn)刪除站點(diǎn)只是刪除DreamweaverCC2019同本地站點(diǎn)間的關(guān)系，而本地站點(diǎn)包含的文件和文件夾仍然保存在磁盤(pán)原來(lái)的位置。換句話說(shuō)，刪除站點(diǎn)后，雖然站點(diǎn)文件夾保存在計(jì)算機(jī)中，但DreamweaverCC2019中已經(jīng)不存在此站點(diǎn)。例如，按下列步驟刪除站點(diǎn)后，“管理站點(diǎn)”對(duì)話框中不存在該站點(diǎn)的名稱。在“管理站點(diǎn)”對(duì)話框中刪除站點(diǎn)的具體操作步驟如下。（1）在“管理站點(diǎn)”對(duì)話框中選擇要?jiǎng)h除的站點(diǎn)。（2）單擊“刪除當(dāng)前選定的站點(diǎn)”按鈕即可刪除選擇的站點(diǎn)。1.3.5導(dǎo)出和導(dǎo)入站點(diǎn)如果要在計(jì)算機(jī)之間移動(dòng)站點(diǎn)，或者與其他用戶共同設(shè)計(jì)站點(diǎn)，可通過(guò)DreamweaverCC2019的導(dǎo)出和導(dǎo)入站點(diǎn)功能實(shí)現(xiàn)，方法為先將站點(diǎn)導(dǎo)出為“.ste”格式的文件，然后在其他計(jì)算機(jī)上將其導(dǎo)入DreamweaverCC2019中。導(dǎo)出導(dǎo)入任務(wù)實(shí)踐—有機(jī)蔬菜網(wǎng)頁(yè)使用“站點(diǎn)管理”命令創(chuàng)建站點(diǎn)，使用“頁(yè)面屬性”命令設(shè)置頁(yè)面的屬性。效果圖項(xiàng)目引入：文本是網(wǎng)頁(yè)設(shè)計(jì)中最基本的元素。本項(xiàng)目主要講解文本的輸入和編輯、水平線與網(wǎng)格的設(shè)置。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以充分利用文本工具和相關(guān)命令在網(wǎng)頁(yè)中輸入、編輯文本內(nèi)容，設(shè)置水平線與網(wǎng)格，還可以運(yùn)用豐富的字體和多樣的編排手段表示網(wǎng)頁(yè)的內(nèi)容。項(xiàng)目2文本掌握輸入和編輯文本的方法掌握設(shè)置頁(yè)邊距和插入換行符的方法掌握水平線的設(shè)置方法掌握顯示和隱藏網(wǎng)格的方法項(xiàng)目目標(biāo)掌握“陶瓷博物館網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“休閑度假村網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)對(duì)網(wǎng)頁(yè)設(shè)計(jì)中文本編排的興趣提高對(duì)網(wǎng)頁(yè)設(shè)計(jì)中字體和布局的審美素養(yǎng)目標(biāo)任務(wù)2.1編輯文本格式輸入文本設(shè)置文本屬性輸入連續(xù)的空格設(shè)置或隱藏不可見(jiàn)元素設(shè)置頁(yè)邊距插入換行符任務(wù)實(shí)踐—陶瓷博物館網(wǎng)頁(yè)2.1.1輸入文本使用DreamweaverCC2019編輯網(wǎng)頁(yè)時(shí)，如果要添加文本，首先應(yīng)將光標(biāo)移動(dòng)到文檔窗口中的編輯區(qū)域，單擊，然后直接輸入文本即可，就像在其他文本編輯器中一樣。例如，打開(kāi)一個(gè)網(wǎng)頁(yè)文檔，在文檔中單擊，將光標(biāo)置于其中，然后輸入文本。輸入文字后的效果圖2.1.2設(shè)置文本屬性利用“屬性”面板可以方便地修改選中文本的字體、字號(hào)、顏色、對(duì)齊方式等，以獲得預(yù)期的效果。選擇“窗口>屬性”命令，或按Ctrl+F3組合鍵，彈出“屬性”面板，在HTML和CSS“屬性”面板中都可以設(shè)置文本的屬性。“屬性”面板2.1.3輸入連續(xù)空格在默認(rèn)狀態(tài)下，DreamweaverCC2019只允許用戶輸入一個(gè)空格。若要輸入連續(xù)空格，則需要進(jìn)行設(shè)置或特定操作。（1）選擇“編輯>首選項(xiàng)”命令，彈出“首選項(xiàng)”對(duì)話框。（2）在“首選項(xiàng)”對(duì)話框左側(cè)的“分類”列表中選擇“常規(guī)”選項(xiàng)，在右側(cè)的“編輯選項(xiàng)”選項(xiàng)組中選擇“允許多個(gè)連續(xù)的空格”復(fù)選框，單擊“應(yīng)用”按鈕完成設(shè)置，單擊“關(guān)閉”按鈕關(guān)閉對(duì)話框。此時(shí)，用戶可連續(xù)按Space鍵在文檔編輯區(qū)內(nèi)輸入多個(gè)空格。2.1.4顯示或隱藏不可見(jiàn)元素顯示或隱藏某些不可見(jiàn)元素的具體操作步驟如下。（1）選擇“編輯>首選項(xiàng)”命令，彈出“首選項(xiàng)”對(duì)話框。（2）在“首選項(xiàng)”對(duì)話框左側(cè)的“分類”列表中選擇“不可見(jiàn)元素”選項(xiàng)，根據(jù)需要選擇或取消選擇右側(cè)的多個(gè)復(fù)選框，以實(shí)現(xiàn)不可見(jiàn)元素的顯示或隱藏，單擊“應(yīng)用”按鈕完成設(shè)置，單擊“關(guān)閉”按鈕關(guān)閉對(duì)話框。2.1.5設(shè)置頁(yè)邊距按照文章的書(shū)寫(xiě)規(guī)則，正文與頁(yè)面四周需要留有一定的距離，這個(gè)距離叫作頁(yè)邊距。網(wǎng)頁(yè)設(shè)計(jì)也遵循這樣的規(guī)則，在默認(rèn)狀態(tài)下，HTML文件的上、下、左、右邊距不為0。修改頁(yè)邊距的具體操作步驟如下。（1）選擇“文件>頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話框。（2）在對(duì)話框的“左邊距”“右邊距”“上邊距”“下邊距”“邊距寬度”“邊距高度”文本框中輸入相應(yīng)的數(shù)值可以調(diào)整邊距?！绊?yè)面屬性”對(duì)話框2.1.6插入換行符為段落插入換行符有以下幾種方法。①選擇“插入”面板的“HTML”選項(xiàng)卡，單擊“字符”展開(kāi)式按鈕，在彈出的菜單中選擇“換行符”命令。②按Shift+Enter組合鍵。③選擇“插入>HTML>字符>換行符”命令。任務(wù)實(shí)踐—陶瓷博物館網(wǎng)頁(yè)效果圖使用“頁(yè)面屬性”命令設(shè)置頁(yè)面外觀、網(wǎng)頁(yè)標(biāo)題效果，使用“首選項(xiàng)”命令設(shè)置允許多個(gè)連續(xù)的空格。任務(wù)2.2水平線與網(wǎng)格水平線網(wǎng)格任務(wù)實(shí)踐—休閑度假村網(wǎng)頁(yè)1．創(chuàng)建水平線（1）選擇“插入”面板的“HTML”選項(xiàng)卡，單擊“水平線”按鈕。（2）選擇“插入>HTML>水平線”命令。2．修改水平線在文檔窗口中選中水平線，選擇“窗口>屬性”命令，彈出“屬性”面板，可以根據(jù)需要對(duì)水平線的屬性進(jìn)行修改。2.2.1水平線“屬性”面板使用網(wǎng)格可以更加方便地定位網(wǎng)頁(yè)元素，在進(jìn)行網(wǎng)頁(yè)布局時(shí)，網(wǎng)格具有至關(guān)重要的作用。1．顯示和隱藏網(wǎng)格2．設(shè)置網(wǎng)頁(yè)元素與網(wǎng)格對(duì)齊3．修改網(wǎng)格的疏密4．修改網(wǎng)格線的顏色和線型2.2.2網(wǎng)格任務(wù)實(shí)踐—休閑度假村網(wǎng)頁(yè)使用“水平線”命令在網(wǎng)頁(yè)中插入水平線，使用“屬性”面板取消水平線的陰影，使用代碼改變水平線的顏色。效果圖項(xiàng)目實(shí)踐—有機(jī)果蔬網(wǎng)頁(yè)使用“頁(yè)面屬性”命令設(shè)置頁(yè)面外觀、網(wǎng)頁(yè)標(biāo)題效果，使用“首選項(xiàng)”命令設(shè)置允許多個(gè)連續(xù)的空格，使用“CSS設(shè)計(jì)器”面板設(shè)置文字的字體、大小和行距。

效果圖課后習(xí)題—國(guó)畫(huà)展覽館網(wǎng)頁(yè)使用“屬性”面板設(shè)置文字的大小、顏色及字體。效果圖項(xiàng)目引入：圖像和多媒體是網(wǎng)頁(yè)中的重要元素，在網(wǎng)頁(yè)中的應(yīng)用非常廣泛。本項(xiàng)目主要講解圖像和多媒體在網(wǎng)頁(yè)中的應(yīng)用方法和技巧，通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以設(shè)計(jì)、制作出更加美觀、生動(dòng)、豐富且具有動(dòng)感和吸引力的網(wǎng)頁(yè)。項(xiàng)目3圖像和多媒體掌握在網(wǎng)頁(yè)中插入和編輯圖像的方法掌握多媒體在網(wǎng)頁(yè)中的應(yīng)用方法和技巧項(xiàng)目目標(biāo)掌握“環(huán)球旅游網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“物流運(yùn)輸網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)解決實(shí)際問(wèn)題的能力培養(yǎng)團(tuán)隊(duì)協(xié)作意識(shí)和技能，提升與他人合作的能力素養(yǎng)目標(biāo)任務(wù)3.1圖像的基本操作網(wǎng)頁(yè)中的圖像格式在網(wǎng)頁(yè)中插入圖像設(shè)置圖像屬性給圖像添加文字說(shuō)明跟蹤圖像任務(wù)實(shí)踐—環(huán)球旅游網(wǎng)頁(yè)3.1.1網(wǎng)頁(yè)中的圖像格式網(wǎng)頁(yè)中常用的圖像格式有JPEG、GIF、PNG這3種，但大多數(shù)瀏覽器只支持JPEG和GIF兩種圖像格式。為了保證網(wǎng)頁(yè)的加載速度，網(wǎng)站設(shè)計(jì)者常使用JPEG和GIF這兩種壓縮格式的圖像。3.1.2在網(wǎng)頁(yè)中插入圖像要在DreamweaverCC2019文檔中插入的圖像必須位于當(dāng)前站點(diǎn)文件夾內(nèi)或遠(yuǎn)程站點(diǎn)文件夾內(nèi)，否則圖像不能正確顯示。所以在建立站點(diǎn)時(shí)，網(wǎng)站設(shè)計(jì)者通常會(huì)創(chuàng)建一個(gè)名為“images”的文件夾，并將需要的圖像復(fù)制到其中。“選擇圖像源文件”對(duì)話框3.1.3設(shè)置圖像屬性插入圖像后，“屬性”面板中會(huì)顯示該圖像的屬性。插入圖像后的“屬性”面板3.1.4給圖像添加文字說(shuō)明當(dāng)圖像不能在瀏覽器中正常顯示時(shí)，網(wǎng)頁(yè)中圖像的位置就變成空白區(qū)域。為了讓瀏覽者在圖像不能正常顯示時(shí)也能了解圖像的信息，常為網(wǎng)頁(yè)的圖像設(shè)置“替換”屬性，將圖像的說(shuō)明文字輸入“替換”文本框中?！皩傩浴泵姘逍Ч麍D3.1.5跟蹤圖像在工程設(shè)計(jì)過(guò)程中，一般先在圖像處理軟件中勾畫(huà)出工程藍(lán)圖，然后在此基礎(chǔ)上反復(fù)修改，最終得到一幅完美的設(shè)計(jì)圖。制作網(wǎng)頁(yè)時(shí)也應(yīng)采用工程設(shè)計(jì)的方法，先在圖像處理軟件中繪制網(wǎng)頁(yè)的藍(lán)圖，將其添加到網(wǎng)頁(yè)的背景中，按設(shè)計(jì)方案對(duì)號(hào)入座，等網(wǎng)頁(yè)制作完畢后，再將藍(lán)圖刪除。DreamweaverCC2019利用“跟蹤圖像”功能來(lái)實(shí)現(xiàn)上述網(wǎng)頁(yè)設(shè)計(jì)方式。任務(wù)實(shí)踐—環(huán)球旅游網(wǎng)頁(yè)使用“Image”按鈕插入圖像，使用“CSS設(shè)計(jì)器”面板控制圖像的水平邊距。效果圖任務(wù)3.2多媒體在網(wǎng)頁(yè)中的應(yīng)用插入Flash動(dòng)畫(huà)插入FLV文件插入Animate作品插入HTML5Video插入音頻插入插件任務(wù)實(shí)踐—物流運(yùn)輸網(wǎng)頁(yè)3.2.1插入Flash動(dòng)畫(huà)DreamweaverCC2019提供了在文檔中插入Flash動(dòng)畫(huà)的功能，雖然Flash中使用的文件類型有Flash源文件（擴(kuò)展名為“.fla”）、FlashSWF文件（擴(kuò)展名為“.swf”）、Flash模板文件（擴(kuò)展名為“.swt”），但DreamweaverCC2019只支持FlashSWF文件（擴(kuò)展名為“.swf”），因?yàn)樗荈lash源文件（擴(kuò)展名為“.fla”）的壓縮版本，已進(jìn)行了優(yōu)化，便于在網(wǎng)絡(luò)上查看。3.2.2插入FLV文件FLV全稱FlashVideo。在網(wǎng)頁(yè)中可以輕松添加FLV文件，而無(wú)須使用Flash創(chuàng)作工具。但在操作之前必須有一個(gè)經(jīng)過(guò)編碼的FLV文件。使用Dreamweaver插入一個(gè)顯示FLV文件的SWF（ShockWaveFlash）組件，當(dāng)在瀏覽器中查看時(shí)，此組件會(huì)顯示所選的FLV文件以及一組播放控件。3.2.3插入Animate作品Animate是Adobe公司出品的用于制作HTML5動(dòng)畫(huà)的可視化工具。使用該軟件可以在網(wǎng)頁(yè)中輕而易舉地插入動(dòng)畫(huà)效果，而不需要編寫(xiě)煩瑣復(fù)雜的代碼。3.2.4插入HTML5Video使用DreamweaverCC2019可以在網(wǎng)頁(yè)中插入HTML5Video。HTML5Video元素提供了一種將視頻嵌入網(wǎng)頁(yè)中的標(biāo)準(zhǔn)方式。“屬性”面板3.2.5插入音頻1．插入背景音樂(lè)HTML提供了背景音樂(lè)標(biāo)簽<bgsound></bgsound>，使用該標(biāo)簽可以為網(wǎng)頁(yè)添加背景音樂(lè)。2．插入音樂(lè)插入音樂(lè)和插入背景音樂(lè)的效果不同，插入音樂(lè)后可以在頁(yè)面中看到播放器的外觀，如播放、暫停、定位和音量等按鈕。3．嵌入音樂(lè)上面介紹了背景音樂(lè)及音樂(lè)的插入，下面來(lái)講解如何嵌入音樂(lè)。嵌入音樂(lè)和插入音樂(lè)相同，只不過(guò)嵌入音樂(lè)播放器要比插入音樂(lè)播放器多幾個(gè)按鈕。3.2.6插入插件利用“插件”按鈕，可以在網(wǎng)頁(yè)中插入AIV、MPG、MOV、MP4等格式的視頻文件，也可以插入音頻文件。在網(wǎng)頁(yè)中插入插件的方與嵌入音樂(lè)的方法一樣，具體操作步驟如下。（1）在文檔窗口的“設(shè)計(jì)”視圖中，將光標(biāo)置于想要插入插件的位置。（2）通過(guò)以下幾種方法啟用“插件”命令。①在“插入”面板“HTML”選項(xiàng)卡中單擊“插件”按鈕。②選擇“插入>HTML>插件”命令。任務(wù)實(shí)踐—物流運(yùn)輸網(wǎng)頁(yè)使用“FlashSWF”按鈕在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)效果，使用“屬性”面板設(shè)置動(dòng)畫(huà)背景透明。效果圖項(xiàng)目實(shí)踐—時(shí)尚先生網(wǎng)頁(yè)使用“Image”按鈕插入圖像。效果圖課后習(xí)題——五谷雜糧網(wǎng)頁(yè)使用“FlashSWF”按鈕，插入Flash動(dòng)畫(huà)效果。效果圖項(xiàng)目引入：本項(xiàng)目主要講解超鏈接（包括文本超鏈接、圖像超鏈接、電子郵件超鏈接和“鼠標(biāo)經(jīng)過(guò)圖像”超鏈接等）的概念和創(chuàng)建方法。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以熟練掌握網(wǎng)站超鏈接的創(chuàng)建與使用方法，并能精心設(shè)計(jì)網(wǎng)站的超鏈接。項(xiàng)目4超鏈接掌握創(chuàng)建文本超鏈接的方法和技巧掌握創(chuàng)建電子郵件超鏈接的方法和技巧掌握創(chuàng)建圖像超鏈接的方法和技巧掌握創(chuàng)建“鼠標(biāo)經(jīng)過(guò)圖像”超鏈接的方法和技巧項(xiàng)目目標(biāo)掌握“建筑模型網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“獅立地板網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)對(duì)超鏈接設(shè)置和應(yīng)用的興趣，激發(fā)主動(dòng)學(xué)習(xí)的動(dòng)力培養(yǎng)在超鏈接設(shè)置中積極探索、勇于嘗試新的設(shè)計(jì)方案和方法的精神素養(yǎng)目標(biāo)任務(wù)4.1文本超鏈接創(chuàng)建文本超鏈接文本超鏈接的狀態(tài)電子郵件超鏈接任務(wù)實(shí)踐—建筑模型網(wǎng)頁(yè)創(chuàng)建文本超鏈接的方法非常簡(jiǎn)單，主要是在文本的“屬性”面板中指定要鏈接文件。指定要鏈接文件的方法有以下3種。1．直接輸入要鏈接文件的路徑和文件名。2．使用“瀏覽文件”按鈕指定要鏈接文件。3．使用“指向文件”圖標(biāo)指定要鏈接文件。4.1.1創(chuàng)建文本超鏈接一個(gè)未被訪問(wèn)過(guò)的文本超鏈接與一個(gè)被訪問(wèn)過(guò)的文本超鏈接在形式上應(yīng)該有所區(qū)別，以提示文本超鏈接所指示的網(wǎng)頁(yè)是否被看過(guò)。4.1.2文本超鏈接的狀態(tài)每當(dāng)瀏覽者單擊包含電子郵件超鏈接的網(wǎng)頁(yè)對(duì)象時(shí)，系統(tǒng)就會(huì)打開(kāi)郵件處理工具（如微軟公司的OutlookExpress），并且自動(dòng)將收信人地址設(shè)為網(wǎng)站設(shè)計(jì)者的E-mail地址，方便瀏覽者給網(wǎng)站發(fā)送反饋信息。1．利用“屬性”面板建立電子郵件超鏈接2．利用“電子郵件鏈接”對(duì)話框建立電子郵件超鏈接4.1.3電子郵件超鏈接任務(wù)實(shí)踐—建筑模型網(wǎng)頁(yè)使用“電子郵件鏈接”按鈕制作電子郵件超鏈接，使用“瀏覽文件”按鈕制作下載文件超鏈接。效果圖任務(wù)4.2圖像超鏈接創(chuàng)建圖像超鏈接“鼠標(biāo)經(jīng)過(guò)圖像”超鏈接任務(wù)實(shí)踐—獅立地板網(wǎng)頁(yè)4.2.1圖像超鏈接建立圖像超鏈接的操作步驟如下。（1）在文檔窗口中選擇圖像。（2）在“屬性”面板中單擊“鏈接”選項(xiàng)右側(cè)的“瀏覽文件”按鈕，為圖像添加文檔相對(duì)路徑的鏈接。（3）在“替換”文本框中可輸入替換文字。設(shè)置替換文字后，當(dāng)圖像不能下載時(shí)，會(huì)在圖像的位置顯示替換文字；當(dāng)瀏覽者將鼠標(biāo)指針指向圖像時(shí)也會(huì)顯示替換文字。（4）按F12鍵預(yù)覽網(wǎng)頁(yè)?！笆髽?biāo)經(jīng)過(guò)圖像”超鏈接是一種常用的互動(dòng)技術(shù)，當(dāng)鼠標(biāo)指針經(jīng)過(guò)圖像時(shí)，圖像會(huì)隨之發(fā)生變化。一般“鼠標(biāo)經(jīng)過(guò)圖像”效果由兩幅大小相等的圖像實(shí)現(xiàn)，一幅稱為主圖像，另一幅稱為次圖像。主圖像是首次載入網(wǎng)頁(yè)時(shí)顯示的圖像，次圖像是當(dāng)鼠標(biāo)指針經(jīng)過(guò)時(shí)顯示的另一幅圖像。“鼠標(biāo)經(jīng)過(guò)圖像”超鏈接經(jīng)常應(yīng)用于網(wǎng)頁(yè)中的按鈕上。4.2.2“鼠標(biāo)經(jīng)過(guò)圖像”超鏈接任務(wù)實(shí)踐—獅立地板網(wǎng)頁(yè)使用“鼠標(biāo)經(jīng)過(guò)圖像”按鈕制作導(dǎo)航條。效果圖項(xiàng)目實(shí)踐—恒選地產(chǎn)網(wǎng)頁(yè)使用熱點(diǎn)工具為圖像添加熱點(diǎn)圖像，使用“屬性”面板為熱點(diǎn)創(chuàng)建超鏈接。效果圖課后習(xí)題——溫泉度假網(wǎng)頁(yè)使用“鼠標(biāo)經(jīng)過(guò)圖像”按鈕制作導(dǎo)航條。效果圖項(xiàng)目引入：在制作網(wǎng)頁(yè)時(shí)，使用表格不僅可以列舉數(shù)據(jù)，還可以進(jìn)行頁(yè)面元素定位。很多網(wǎng)頁(yè)都是用表格進(jìn)行布局的，這是因?yàn)楸砀裨趦?nèi)容的組織、頁(yè)面中文本和圖像的位置控制方面都很有優(yōu)勢(shì)。本項(xiàng)目主要講解表格的操作方法和制作技巧。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以熟練地掌握數(shù)據(jù)表格的編輯方法及應(yīng)用表格對(duì)頁(yè)面進(jìn)行合理布局的方法。

項(xiàng)目5表格掌握插入表格的方法掌握設(shè)置表格屬性的方法和技巧掌握在表格內(nèi)添加元素的方法掌握網(wǎng)頁(yè)中數(shù)據(jù)表格的編輯方法項(xiàng)目目標(biāo)掌握“風(fēng)季租車網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“典藏博物館網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)靈活應(yīng)變的能力增強(qiáng)實(shí)踐能力和創(chuàng)新精神素養(yǎng)目標(biāo)任務(wù)5.1表格的簡(jiǎn)單操作插入表格設(shè)置表格屬性在表格內(nèi)添加元素任務(wù)實(shí)踐—風(fēng)季租車網(wǎng)頁(yè)5.1.1插入表格要將相關(guān)數(shù)據(jù)有序地組織在一起，必須先插入表格。插入表格的具體操作步驟如下。（1）在文檔窗口中將光標(biāo)置于合適的位置。（2）通過(guò)以下幾種方法打開(kāi)“Table”對(duì)話框。①選擇“插入>Table”命令。②單擊“插入”面板“HTML”選項(xiàng)卡中的“Table”按鈕。③按Ctrl+Alt+T組合鍵。（3）根據(jù)需要設(shè)置新建表格的大小、行列數(shù)等，單擊“確定”按鈕完成表格的新建。5.1.2設(shè)置表格屬性插入表格后，通過(guò)選擇不同的表格對(duì)象，可以在“屬性”面板中看到它們的各項(xiàng)屬性，修改這些屬性可以得到不同風(fēng)格的表格。表格的“屬性”面板單元格、行、列的“屬性”面板5.1.3在表格內(nèi)添加元素建立表格后，可以在表格中添加各種網(wǎng)頁(yè)元素，如文本、圖像等。1．輸入文字在單元格中輸入文字有以下幾種方法。①單擊任意一個(gè)單元格并直接輸入文本，此時(shí)單元格會(huì)隨文本的輸入自動(dòng)擴(kuò)展。②粘貼在其他文字編輯軟件中復(fù)制的帶有格式的文本。5.1.3在表格內(nèi)添加元素2．插入其他網(wǎng)頁(yè)元素（1）嵌套表格。將光標(biāo)置入單元格內(nèi)并插入表格，即可實(shí)現(xiàn)表格嵌套。（2）插入圖像。在表格中插入圖像有以下幾種方法。①將光標(biāo)置入單元格中，單擊“插入”面板“HTML”選項(xiàng)卡中的“Image”按鈕。②將光標(biāo)置入單元格中，選擇“插入>Image”命令。③將光標(biāo)置入單元格中，將“插入”面板“HTML”選項(xiàng)卡中的“Image”按鈕拖曳到單元格內(nèi)。④從資源管理器、站點(diǎn)管理器或桌面上直接將圖像文件拖曳到一個(gè)需要插入圖像的單元格內(nèi)。任務(wù)實(shí)踐—風(fēng)季租車網(wǎng)頁(yè)使用“Table”按鈕插入表格進(jìn)行頁(yè)面布局，使用“Image”按鈕插入圖像。效果圖任務(wù)5.2網(wǎng)頁(yè)中的數(shù)據(jù)表格導(dǎo)出和導(dǎo)入表格的數(shù)據(jù)表格排序任務(wù)實(shí)踐—典藏博物館網(wǎng)頁(yè)1．將網(wǎng)頁(yè)內(nèi)的表格數(shù)據(jù)導(dǎo)出選擇“文件>導(dǎo)出>表格”命令，彈出圖所示的“導(dǎo)出表格”對(duì)話框，根據(jù)需要設(shè)置參數(shù)，單擊“導(dǎo)出”按鈕，彈出“表格導(dǎo)出為”對(duì)話框，輸入保存導(dǎo)出的數(shù)據(jù)的文件名稱，單擊“保存”按鈕，完成表格數(shù)據(jù)的導(dǎo)出。5.2.1導(dǎo)出和導(dǎo)入表格的數(shù)據(jù)“導(dǎo)出表格”對(duì)話框2．在其他網(wǎng)頁(yè)中導(dǎo)入表格式數(shù)據(jù)首先要打開(kāi)“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框，然后根據(jù)需要進(jìn)行選項(xiàng)設(shè)置，最后單擊“確定”按鈕，完成設(shè)置。要打開(kāi)“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框，可以選擇“文件>導(dǎo)入>表格式數(shù)據(jù)”命令。5.2.1導(dǎo)出和導(dǎo)入表格的數(shù)據(jù)“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框日常工作中，常常需要對(duì)無(wú)序的表格內(nèi)容進(jìn)行排序，以便瀏覽者可以快速找到所需的數(shù)據(jù)。使用表格排序功能可以解決這一難題。將光標(biāo)置入要排序的表格中，然后選擇“編輯>表格>排序表格”命令，彈出“排序表格”對(duì)話框。根據(jù)需要設(shè)置相應(yīng)的選項(xiàng)，單擊“應(yīng)用”按鈕或“確定”按鈕，完成設(shè)置。5.2.2表格排序“排序表格”對(duì)話框任務(wù)實(shí)踐—典藏博物館網(wǎng)頁(yè)使用“表格式數(shù)據(jù)”命令導(dǎo)入外部表格式數(shù)據(jù)，使用“屬性”面板改變表格的寬度、高度和背景顏色。效果圖項(xiàng)目實(shí)踐—布藝沙發(fā)網(wǎng)頁(yè)使用“頁(yè)面屬性”命令設(shè)置頁(yè)邊距和網(wǎng)頁(yè)標(biāo)題，使用“Table”按鈕插入表格，使用“Image”按鈕插入圖像，使用“CSS設(shè)計(jì)器”面板控制圖像的間距布藝沙發(fā)。

效果圖課后習(xí)題——綠色糧倉(cāng)網(wǎng)頁(yè)使用“表格式數(shù)據(jù)”命令導(dǎo)入外部表格式數(shù)據(jù)，使用“排序表格”命令對(duì)表格中的數(shù)據(jù)進(jìn)行排序。效果圖項(xiàng)目引入：本項(xiàng)目主要介紹ASP的基礎(chǔ)知識(shí)和操作，包括ASP服務(wù)器的安裝、ASP語(yǔ)法基礎(chǔ)、數(shù)組的創(chuàng)建與應(yīng)用、流程控制語(yǔ)句及ASP內(nèi)置對(duì)象等。通過(guò)對(duì)本項(xiàng)目的學(xué)習(xí)，學(xué)生可以掌握ASP的基本操作。項(xiàng)目6ASP掌握ASP服務(wù)器的運(yùn)行環(huán)境及安裝IIS的方法掌握ASP語(yǔ)法基礎(chǔ)及數(shù)組的創(chuàng)建與應(yīng)用方法掌握VBScript選擇語(yǔ)句和循環(huán)語(yǔ)句掌握Request請(qǐng)求和相應(yīng)對(duì)象的方法掌握Server對(duì)象項(xiàng)目目標(biāo)掌握“節(jié)能環(huán)保網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“乒乓球俱樂(lè)部網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)激發(fā)對(duì)ASP技術(shù)的學(xué)習(xí)興趣通過(guò)合作項(xiàng)目培養(yǎng)團(tuán)隊(duì)合作意識(shí)培養(yǎng)學(xué)習(xí)的耐心和細(xì)心素養(yǎng)目標(biāo)任務(wù)6.1ASP基礎(chǔ)ASP服務(wù)器的安裝ASP語(yǔ)法基礎(chǔ)數(shù)組的創(chuàng)建與應(yīng)用流程控制語(yǔ)句任務(wù)實(shí)踐—節(jié)能環(huán)保網(wǎng)頁(yè)6.1.1ASP服務(wù)器的安裝ASP的主要功能是把腳本語(yǔ)言、HTML、組件和Web數(shù)據(jù)庫(kù)訪問(wèn)功能有機(jī)地結(jié)合在一起，形成一個(gè)能在服務(wù)器端運(yùn)行的應(yīng)用程序，該應(yīng)用程序可根據(jù)來(lái)自瀏覽器端的請(qǐng)求生成相應(yīng)的HTML文件并將其返回給瀏覽器。使用ASP可以創(chuàng)建以HTML網(wǎng)頁(yè)為用戶界面，并能夠與數(shù)據(jù)庫(kù)進(jìn)行交互的Web應(yīng)用程序。1．ASP的運(yùn)行環(huán)境2．安裝IIS6.1.2ASP語(yǔ)法基礎(chǔ)1．ASP文件結(jié)構(gòu)ASP文件是以“.asp”為擴(kuò)展名的。2．聲明腳本語(yǔ)言在編寫(xiě)ASP程序時(shí)，可以聲明ASP文件所使用的腳本語(yǔ)言，以通知Web服務(wù)器文件是使用何種腳本語(yǔ)言來(lái)編寫(xiě)程序的。3．ASP與HTMLASP程序包含在“<%”“%>”中，并在瀏覽器打開(kāi)網(wǎng)頁(yè)時(shí)產(chǎn)生動(dòng)態(tài)內(nèi)容。它與HTML標(biāo)簽互相協(xié)作，構(gòu)成動(dòng)態(tài)網(wǎng)頁(yè)。ASP程序可以出現(xiàn)在HTML文件中的任意位置，同時(shí)，在ASP程序中也可以嵌入HTML標(biāo)簽。6.1.3數(shù)組的創(chuàng)建與應(yīng)用數(shù)組是有序數(shù)據(jù)的集合。數(shù)組中所有元素的數(shù)據(jù)類型相同，用一個(gè)統(tǒng)一的數(shù)組名和下標(biāo)可以唯一地確定數(shù)組中的元素，下標(biāo)放在緊跟數(shù)組名的括號(hào)中。有一個(gè)下標(biāo)的數(shù)組稱為一維數(shù)組，有兩個(gè)下標(biāo)的數(shù)組稱為二維數(shù)組，以此類推。數(shù)組的最大維數(shù)為60。1．創(chuàng)建數(shù)組在VBScript中，數(shù)組有兩種類型：固定數(shù)組和動(dòng)態(tài)數(shù)組。2．應(yīng)用數(shù)組函數(shù)數(shù)組函數(shù)用于操作數(shù)組。數(shù)組函數(shù)主要包括LBound函數(shù)、UBound函數(shù)、Split函數(shù)和Erase函數(shù)。6.1.4流程控制語(yǔ)句在VBScript中，有順序結(jié)構(gòu)、選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)3種基本程序控制結(jié)構(gòu)。順序結(jié)構(gòu)是程序設(shè)計(jì)中最基本的結(jié)構(gòu)，在程序運(yùn)行時(shí)，編譯器總是按照先后順序執(zhí)行程序中的所有命令。通過(guò)選擇結(jié)構(gòu)和循環(huán)結(jié)構(gòu)可以改變執(zhí)行順序。本小節(jié)介紹VBScript選擇語(yǔ)句和循環(huán)語(yǔ)句。任務(wù)實(shí)踐—節(jié)能環(huán)保網(wǎng)頁(yè)使用“拆分”按鈕和“設(shè)計(jì)”按鈕切換視圖，使用Now函數(shù)顯示當(dāng)前系統(tǒng)日期和時(shí)間。 效果圖任務(wù)6.2ASP內(nèi)置對(duì)象Request對(duì)象Response對(duì)象Session對(duì)象Application對(duì)象Server對(duì)象ObjectContext對(duì)象任務(wù)實(shí)踐—乒乓球俱樂(lè)部網(wǎng)頁(yè)6.2.1Request對(duì)象在客戶端/服務(wù)器結(jié)構(gòu)中，當(dāng)客戶端Web頁(yè)面向網(wǎng)站服務(wù)器傳遞信息時(shí)，ASP能夠通過(guò)Request對(duì)象獲取客戶端提交的全部信息。這些信息包括客戶端請(qǐng)求的HTTP頭信息、在網(wǎng)站服務(wù)器端存放的客戶端瀏覽器的Cookies數(shù)據(jù)、附于URL之后的字符串信息、頁(yè)面中表單傳送的數(shù)據(jù)以及客戶端的驗(yàn)證字段等。6.2.2Response對(duì)象Response對(duì)象用來(lái)訪問(wèn)所創(chuàng)建并返回客戶端的響應(yīng)。可以使用Response對(duì)象控制發(fā)送給用戶的信息，如直接發(fā)送信息給瀏覽器、重定向?yàn)g覽器到另一個(gè)URL或設(shè)置Cookies的值。Response對(duì)象提供了標(biāo)識(shí)服務(wù)器和性能的HTTP變量、發(fā)送給瀏覽器的信息和任何將在Cookies中存儲(chǔ)的信息。Response對(duì)象只有一個(gè)數(shù)據(jù)集合——Cookies，該集合用于設(shè)置希望放置在客戶端瀏覽器上的Cookies的值。Response對(duì)象的Cookies數(shù)據(jù)集合用于當(dāng)前響應(yīng)中，將Cookies值發(fā)送到客戶端瀏覽器，該數(shù)據(jù)集合訪問(wèn)方式為只寫(xiě)。6.2.3Session對(duì)象用戶可以使用Session對(duì)象存儲(chǔ)特定會(huì)話所需的信息。這樣，當(dāng)用戶在應(yīng)用程序的Web頁(yè)面之間跳轉(zhuǎn)時(shí)，存儲(chǔ)在Session對(duì)象中的變量不會(huì)丟失，而是在整個(gè)用戶會(huì)話中一直存在。當(dāng)用戶請(qǐng)求來(lái)自應(yīng)用程序的Web頁(yè)面時(shí)，如果該用戶還沒(méi)有會(huì)話，則Web服務(wù)器將自動(dòng)創(chuàng)建一個(gè)Session對(duì)象。當(dāng)會(huì)話過(guò)期或被放棄后，服務(wù)器將終止該會(huì)話。6.2.4Application對(duì)象ASP程序是在Web服務(wù)器上運(yùn)行的，在Web站點(diǎn)中創(chuàng)建一個(gè)基于ASP的應(yīng)用程序之后，可以通過(guò)Application對(duì)象在ASP應(yīng)用程序的所有用戶之間共享信息。也就是說(shuō)，Application對(duì)象中包含的數(shù)據(jù)可以在整個(gè)Web站點(diǎn)中被所有用戶使用，并且可以在網(wǎng)站運(yùn)行期間持久保存。利用Application對(duì)象可以實(shí)現(xiàn)統(tǒng)計(jì)網(wǎng)站的在線人數(shù)、創(chuàng)建多用戶游戲以及創(chuàng)建多用戶聊天室等功能。6.2.5Server對(duì)象Server對(duì)象提供對(duì)服務(wù)器上的方法和屬性的訪問(wèn)，大多數(shù)方法和屬性是作為實(shí)用程序的功能提供的。6.2.6ObjectContext對(duì)象ObjectContext對(duì)象是一個(gè)以組件為主的事務(wù)處理系統(tǒng)，可以保證事務(wù)成功完成。ObjectContext對(duì)象允許程序在網(wǎng)頁(yè)中直接配合微軟事務(wù)服務(wù)器（MicrosoftTransactionServer，MTS）使用，從而管理或開(kāi)發(fā)高效率的Web服務(wù)器應(yīng)用程序。事務(wù)是一個(gè)操作序列，這些序列可以視為一個(gè)整體。如果其中的某一個(gè)操作沒(méi)有完成，所有與該操作相關(guān)的內(nèi)容都應(yīng)該取消。事務(wù)用于對(duì)數(shù)據(jù)庫(kù)進(jìn)行可靠的操作。任務(wù)實(shí)踐—乒乓球俱樂(lè)部網(wǎng)頁(yè)使用“代碼檢查器”窗口編寫(xiě)代碼，使用Request對(duì)象獲取表單數(shù)據(jù)。效果圖項(xiàng)目實(shí)踐—挖掘機(jī)網(wǎng)頁(yè)使用Request對(duì)象的Form數(shù)據(jù)集合獲取表單數(shù)據(jù)。效果圖課后習(xí)題——建筑信息咨詢網(wǎng)頁(yè)用Response對(duì)象的Write方法使用函數(shù)“Now”顯示當(dāng)前系統(tǒng)日期和時(shí)間。效果圖項(xiàng)目引入：通過(guò)CSS樣式可以將網(wǎng)頁(yè)制作得更加絢麗多彩。本項(xiàng)目主要對(duì)CSS樣式進(jìn)行講解。通過(guò)對(duì)本項(xiàng)目的學(xué)習(xí)，學(xué)生可以輕松、有效地對(duì)頁(yè)面的整體布局、顏色、字體、鏈接、背景，以及同一頁(yè)面的不同部分、不同頁(yè)面的外觀和格式等效果進(jìn)行精確控制。項(xiàng)目7CSS樣式了解CSS選擇器的類型、CSS樣式的創(chuàng)建與應(yīng)用方法掌握CSS屬性的設(shè)置方法熟練使用“CSS過(guò)渡效果”面板項(xiàng)目目標(biāo)掌握“山地車網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“羽毛球運(yùn)動(dòng)網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)對(duì)網(wǎng)頁(yè)布局、顏色、字體等方面的審美能力激發(fā)對(duì)CSS技術(shù)的學(xué)習(xí)興趣素養(yǎng)目標(biāo)任務(wù)7.1CSS樣式概述“CSS設(shè)計(jì)器”面板

CSS選擇器的類型7.1.1“CSS設(shè)計(jì)器”面板使用“CSS設(shè)計(jì)器”面板可以創(chuàng)建、編輯和刪除CSS樣式，并且可以將外部樣式表附加到文檔中。1．打開(kāi)“CSS設(shè)計(jì)器”面板2．CSS的功能“CSS設(shè)計(jì)器”面板7.1.2CSS選擇器的類型CSS選擇器可分為類選擇器、標(biāo)簽選擇器、ID選擇器、復(fù)合選擇器等。同級(jí)別聲明嵌套式聲明任務(wù)7.2CSS樣式的創(chuàng)建與應(yīng)用創(chuàng)建CSS樣式應(yīng)用CSS樣式創(chuàng)建和附加外部樣式7.2.1創(chuàng)建CSS樣式使用“CSS設(shè)計(jì)器”面板可以創(chuàng)建類選擇器、標(biāo)簽選擇器、ID選擇器和復(fù)合選擇器等。7.2.2應(yīng)用CSS樣式創(chuàng)建自定義樣式后，要為不同的網(wǎng)頁(yè)元素應(yīng)用不同的樣式，具體操作步驟如下。（1）在文檔編輯窗口中選擇網(wǎng)頁(yè)元素。（2）根據(jù)選擇器的類型使用不同的應(yīng)用方法。7.2.3創(chuàng)建和附加外部樣式如果不同網(wǎng)頁(yè)的不同HTML元素需要使用同一樣式，則可通過(guò)附加外部樣式來(lái)實(shí)現(xiàn)。首先創(chuàng)建一個(gè)外部樣式，然后在不同網(wǎng)頁(yè)的不同HTML元素中附加定義好的外部樣式。1．創(chuàng)建外部樣式2．附加外部樣式任務(wù)7.3編輯CSS樣式網(wǎng)站設(shè)計(jì)者有時(shí)需要修改應(yīng)用于文檔的內(nèi)部樣式和外部樣式，如果修改內(nèi)部樣式，則會(huì)自動(dòng)重新設(shè)置受它控制的所有HTML元素的格式；如果修改外部樣式文件，則會(huì)自動(dòng)重新設(shè)置與它鏈接的所有HTML文件。任務(wù)7.4CSS屬性布局屬性文本屬性邊框?qū)傩员尘皩傩匀蝿?wù)實(shí)踐—山地車網(wǎng)頁(yè)7.4.1布局屬性“布局”選項(xiàng)組用于控制網(wǎng)頁(yè)中塊元素的大小、邊距、填充和位置屬性等。7.4.2文本屬性“文本”選項(xiàng)組用于控制網(wǎng)頁(yè)中文本的字體、字號(hào)、顏色、行距、首行縮進(jìn)、對(duì)齊方式、陰影等。7.4.3邊框?qū)傩浴斑吙颉边x項(xiàng)組用于控制塊元素的邊框粗細(xì)、樣式、顏色及圓角。7.4.4背景屬性“背景”選項(xiàng)組用于為網(wǎng)頁(yè)元素添加背景圖像或背景顏色。任務(wù)實(shí)踐—山地車網(wǎng)頁(yè)使用“Table”按鈕插入表格，使用CSS屬性設(shè)置鏈接效果。效果圖任務(wù)7.5過(guò)渡效果“CSS過(guò)渡效果”面板創(chuàng)建CSS過(guò)渡效果任務(wù)實(shí)踐—羽毛球運(yùn)動(dòng)網(wǎng)頁(yè)7.5.1“CSS過(guò)渡效果”面板在“CSS過(guò)渡效果”面板中可以新建、刪除和編輯CSS過(guò)渡效果。在創(chuàng)建CSS過(guò)渡效果時(shí)，需要為元素指定過(guò)渡效果類。如果在創(chuàng)建效果類之前已選擇元素，則過(guò)渡效果類會(huì)自動(dòng)應(yīng)用于選定的元素。7.5.2創(chuàng)建CSS過(guò)渡效果任務(wù)實(shí)踐—羽毛球運(yùn)動(dòng)網(wǎng)頁(yè)使用“CSS設(shè)計(jì)器”面板設(shè)置文字的字體、顏色，使用“CSS過(guò)渡效果”面板設(shè)置文字的變色效果。效果圖項(xiàng)目實(shí)踐——電商網(wǎng)頁(yè)使用“CSS設(shè)計(jì)器”面板改變文字的大小和行距。效果圖課后習(xí)題——鮮花速遞網(wǎng)頁(yè)效果圖使用“CSS設(shè)計(jì)器”面板設(shè)置文字的字體、顏色及大小，使用“CSS過(guò)渡效果”面板為文字添加陰影效果。項(xiàng)目引入：模板的功能就是把網(wǎng)頁(yè)布局和內(nèi)容分離。在布局設(shè)計(jì)好之后，可以將其保存為模板，這樣相同布局的頁(yè)面就可以通過(guò)模板來(lái)創(chuàng)建，從而極大地提高工作效率。本項(xiàng)目主要講解模板和庫(kù)的創(chuàng)建方法和應(yīng)用技巧。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以更加輕松地完成網(wǎng)站的更新、維護(hù)工作。第8章模板和庫(kù)掌握創(chuàng)建和編輯模板的方法掌握管理模板的方法掌握創(chuàng)建庫(kù)項(xiàng)目的方法掌握向頁(yè)面添加庫(kù)項(xiàng)目的方法項(xiàng)目目標(biāo)掌握“時(shí)尚前沿網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“鮮果批發(fā)網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)對(duì)模板和庫(kù)創(chuàng)建方法的學(xué)習(xí)熱情，激發(fā)對(duì)網(wǎng)頁(yè)設(shè)計(jì)工作的興趣通過(guò)嘗試不同的布局和功能，培養(yǎng)創(chuàng)新能力培養(yǎng)責(zé)任感，提高自我管理的能力素養(yǎng)目標(biāo)創(chuàng)建空模板創(chuàng)建可編輯區(qū)域管理模板任務(wù)實(shí)踐—時(shí)尚前沿網(wǎng)頁(yè)任務(wù)8.1模板8.1.1創(chuàng)建空模板創(chuàng)建空模板有以下幾種方法。①在打開(kāi)的文檔窗口中單擊“插入”面板“模板”選項(xiàng)卡中的“創(chuàng)建模板”按鈕，將當(dāng)前文檔轉(zhuǎn)換為模板文檔。②在“資源”面板中單擊“模板”按鈕，此時(shí)的列表為模板列表，單擊下方的“新建模板”按鈕，創(chuàng)建空模板，此時(shí)新的模板添加到“資源”面板的模板列表中，為該模板設(shè)置名稱。③在“資源”面板的模板列表中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建模板”命令。8.1.2創(chuàng)建可編輯區(qū)域創(chuàng)建可編輯區(qū)域的具體操作步驟如下。（1）打開(kāi)任意一個(gè)文件。（2）將光標(biāo)放置在要插入可編輯區(qū)域的位置，在“插入”面板“模板”選項(xiàng)卡中單擊“可編輯區(qū)域”按鈕，彈出“新建可編輯區(qū)域”對(duì)話框，在“名稱”文本框中輸入可編輯區(qū)域的名稱。（3）單擊“確定”按鈕，即可在網(wǎng)頁(yè)中插入可編輯區(qū)域。（4）選擇“文件>另存為模板”命令，彈出“另存模板”對(duì)話框，在對(duì)話框中的“另存為”文本框中輸入模板的名稱，在“站點(diǎn)”下拉列表中選擇保存的站點(diǎn)。（5）單擊“保存”按鈕，即可將該文件保存為模板。8.1.3管理模板1．刪除模板刪除模板的具體操作步驟如下。（1）在“資源”面板中單擊左側(cè)的“模板”按鈕。（2）單擊模板的名稱以選擇該模板。（3）單擊“資源”面板底部的“刪除”按鈕，然后確認(rèn)刪除該模板。8.1.3管理模板2．修改模板當(dāng)更改模板時(shí)，DreamweaverCC2019將提示更新基于該模板的文檔，具體操作步驟如下。（1）在“資源”面板中單擊左側(cè)的“模板”按鈕。（2）在模板列表中執(zhí)行下列操作之一。①單擊要編輯的模板名稱。②選擇要編輯的模板，然后單擊“資源”面板底部的“編輯”按鈕。（3）根據(jù)需要修改模板的內(nèi)容。任務(wù)實(shí)踐—時(shí)尚前沿網(wǎng)頁(yè)使用“創(chuàng)建模板”按鈕創(chuàng)建模板，使用“可編輯區(qū)域”“重復(fù)區(qū)域”按鈕創(chuàng)建可編輯區(qū)域和重復(fù)區(qū)域。效果圖任務(wù)8.2庫(kù)創(chuàng)建庫(kù)項(xiàng)目向頁(yè)面添加庫(kù)項(xiàng)目任務(wù)實(shí)踐—鮮果批發(fā)網(wǎng)頁(yè)8.2.1創(chuàng)建庫(kù)項(xiàng)目庫(kù)項(xiàng)目可以包含文檔的<body>標(biāo)簽中的任意元素，包括文本、表格、表單、JavaApplet、插件、ActiveX元素、導(dǎo)航條、圖像等。庫(kù)項(xiàng)目只是一個(gè)對(duì)網(wǎng)頁(yè)元素的引用，源文件必須保存在指定的位置。1．基于選定內(nèi)容創(chuàng)建庫(kù)項(xiàng)目2．創(chuàng)建空白庫(kù)項(xiàng)目8.2.2向頁(yè)面添加庫(kù)項(xiàng)目當(dāng)向頁(yè)面添加庫(kù)項(xiàng)目時(shí)，將把實(shí)際內(nèi)容以及對(duì)該庫(kù)項(xiàng)目的引用一起插入文檔中。此時(shí)，無(wú)須提供原項(xiàng)目就可以正常顯示。在頁(yè)面中插入庫(kù)項(xiàng)目的具體操作步驟如下。（1）將光標(biāo)置于文檔窗口中的合適位置。（2）選擇“窗口>資源”命令，彈出“資源”面板。單擊左側(cè)的“庫(kù)”按鈕，進(jìn)入“庫(kù)”版塊。任務(wù)實(shí)踐—鮮果批發(fā)網(wǎng)頁(yè)添加庫(kù)項(xiàng)目，使用庫(kù)中注冊(cè)的項(xiàng)目制作網(wǎng)頁(yè)文檔。效果圖項(xiàng)目實(shí)踐—電子吉他網(wǎng)頁(yè)使用“創(chuàng)建模板”按鈕創(chuàng)建模板，使用“可編輯區(qū)域”“重復(fù)區(qū)域”按鈕創(chuàng)建可編輯區(qū)域和重復(fù)區(qū)域。效果圖課后習(xí)題——婚禮策劃網(wǎng)頁(yè)添加庫(kù)項(xiàng)目，使用庫(kù)中注冊(cè)的項(xiàng)目制作網(wǎng)頁(yè)文檔。效果圖項(xiàng)目引入：表單的出現(xiàn)使網(wǎng)頁(yè)從單向的信息傳遞發(fā)展到能夠與用戶交互，而且交互性越來(lái)越強(qiáng)。本項(xiàng)目主要講解表單的使用方法和應(yīng)用技巧。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以利用表單輸入信息或進(jìn)行選擇，使用單行文本域、密碼文本域、單選按鈕、復(fù)選框、滾動(dòng)列表、文件域、按鈕等表單對(duì)象，將表單相應(yīng)的信息提交給服務(wù)器進(jìn)行處理。使用表單可以實(shí)現(xiàn)網(wǎng)上投票、網(wǎng)站注冊(cè)、信息發(fā)布、網(wǎng)上交易等功能。項(xiàng)目9表單掌握創(chuàng)建表單的方法掌握設(shè)置表單屬性的方法掌握在表單中插入文本域的方法掌握在表單中插入單選按鈕和復(fù)選框的方法掌握在表單中插入下拉列表、滾動(dòng)列表、文件域和按鈕的方法掌握HTML5表單元素的應(yīng)用方法項(xiàng)目目標(biāo)掌握“用戶登錄界面”的關(guān)鍵制作步驟掌握“傳統(tǒng)文化網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“健康測(cè)試網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“鑫飛越航空網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)激發(fā)對(duì)表單的使用方法和應(yīng)用技巧的學(xué)習(xí)興趣通過(guò)相互合作，培養(yǎng)團(tuán)隊(duì)合作精神素養(yǎng)目標(biāo)任務(wù)9.1表單的使用創(chuàng)建表單表單的屬性插入文本域任務(wù)實(shí)踐—用戶登錄界面9.1.1創(chuàng)建表單在文檔中插入表單的具體操作步驟如下。（1）在文檔窗口中，將光標(biāo)置于希望插入表單的位置。（2）插入表單，文檔窗口中出現(xiàn)一個(gè)用來(lái)指示表單區(qū)域的紅色虛線輪廓?！氨韱巍毙Ч麍D9.1.2表單的屬性在在文檔窗口中選擇表單，“屬性”面板中出現(xiàn)圖所示的表單屬性。表單“屬性”面板9.1.3插入文本域單行文本域通常提供單字或短語(yǔ)響應(yīng)，如姓名或地址。若要在表單中插入單行文本域，需要先將光標(biāo)置于表單輪廓內(nèi)需要插入單行文本域的位置，然后插入單行文本域。任務(wù)實(shí)踐—用戶登錄界面使用“插入”面板“HTML”選項(xiàng)卡中的按鈕插入表格，使用“表單”選項(xiàng)卡中的按鈕插入文本域并設(shè)置相應(yīng)的屬性。效果圖任務(wù)9.2插入單選按鈕和復(fù)選框插入單選按鈕插入單選按鈕組插入復(fù)選框任務(wù)實(shí)踐—傳統(tǒng)文化網(wǎng)頁(yè)9.2.1插入單選按鈕插入單選按鈕有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“單選按鈕”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)單選按鈕。②選擇“插入>表單>單選按鈕”命令，文檔窗口的表單中出現(xiàn)一個(gè)單選按鈕。單選按鈕的“屬性”面板，用戶可以根據(jù)需要設(shè)置當(dāng)前單選按鈕的各項(xiàng)屬性。

“單選按鈕”效果圖9.2.2插入單選按鈕組先將光標(biāo)放在表單輪廓內(nèi)需要插入單選按鈕組的位置，然后打開(kāi)“單選按鈕組”對(duì)話框。打開(kāi)“單選按鈕組”對(duì)話框有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“單選按鈕組”按鈕。②選擇“插入>表單>單選按鈕組”命令?！皢芜x按鈕組”效果圖“單選按鈕組”對(duì)話框9.2.3插入復(fù)選框插入復(fù)選框有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“復(fù)選框”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)復(fù)選框。②選擇“插入>表單>復(fù)選框”命令，文檔窗口的表單中出現(xiàn)一個(gè)復(fù)選框?！皬?fù)選框”效果圖任務(wù)實(shí)踐—傳統(tǒng)文化網(wǎng)頁(yè)使用“表單”選項(xiàng)卡中的單選按鈕為頁(yè)面添加單選按鈕。效果圖任務(wù)9.3插入下拉列表、滾動(dòng)列表、文件域和按鈕插入下拉列表和滾動(dòng)列表創(chuàng)建文件域插入圖像按鈕插入普通按鈕插入提交按鈕插入重置按鈕任務(wù)實(shí)踐—健康測(cè)試網(wǎng)頁(yè)1.插入下拉列表2.插入滾動(dòng)列表9.3.1插入下拉列表和滾動(dòng)列表“下拉菜單”效果圖“滾動(dòng)列表”效果圖9.3.2插入文件域插入文件域有以下幾種方法。①將光標(biāo)置于表單中，單擊“插入”面板“表單”選項(xiàng)卡中的“文件”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)文件域。②選擇“插入>表單>文件”命令，文檔窗口的表單中出現(xiàn)一個(gè)文件域。文件域的“屬性”面板，用戶可以根據(jù)需要設(shè)置當(dāng)前文件域的各項(xiàng)屬性。“文件域”效果圖9.3.3插入圖像按鈕插入圖像按鈕有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“圖像按鈕”按鈕。②選擇“插入>表單>圖像按鈕”命令。圖像按鈕的“屬性”面板，用戶可以根據(jù)需要設(shè)置當(dāng)前圖像按鈕的各項(xiàng)屬性?！斑x擇圖像源文件”對(duì)話框9.3.4插入普通按鈕插入普通按鈕有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“按鈕”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)按鈕。②選擇“插入>表單>按鈕”命令，文檔窗口的表單中出現(xiàn)一個(gè)按鈕。按鈕“屬性”面板9.3.5插入提交按鈕插入提交按鈕有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“‘提交’按鈕”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)提交按鈕。②選擇“插入>表單>‘提交’按鈕”命令，文檔窗口的表單中出現(xiàn)一個(gè)提交按鈕?！疤峤弧卑粹o“屬性”面板9.3.6插入“重置”按鈕插入重置按鈕有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“‘重置’按鈕”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)重置按鈕。②選擇“插入>表單>‘重置’按鈕”命令，文檔窗口的表單中出現(xiàn)一個(gè)重置按鈕。“重置”按鈕“屬性”面板任務(wù)實(shí)踐—健康測(cè)試網(wǎng)頁(yè)使用“選擇”按鈕插入下拉列表，使用“屬性”面板設(shè)置下拉列表的屬性。效果圖任務(wù)9.4創(chuàng)建HTML5表單元素插入電子郵件文本域插入U(xiǎn)rl文本域插入Tel文本域插入搜索文本域插入數(shù)字文本域插入范圍文本域插入顏色文本域插入月表單插入周表單插入日期表單插入時(shí)間表單插入日期時(shí)間表單插入日期時(shí)間（當(dāng)?shù)兀┍韱?.4.1插入電子郵件文本域插入電子郵件文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“電子郵件”按鈕，可在文檔窗口中添加電子郵件文本域。②選擇“插入>表單>電子郵件”命令，文檔窗口的表單中出現(xiàn)一個(gè)電子郵件文本域。電子郵件文本域“屬性”面板9.4.2插入U(xiǎn)rl文本域插入U(xiǎn)rl文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“Url”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)Url文本域。②選擇“插入>表單>Url”命令，文檔窗口的表單中出現(xiàn)一個(gè)Url文本域。URL文本域“屬性”面板9.4.3插入Tel文本域插入Tel文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“Tel”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)Tel文本域。②選擇“插入>表單>Tel”命令，文檔窗口的表單中出現(xiàn)一個(gè)Tel文本域。Tel文本域“屬性”面板9.4.4插入搜索文本域插入搜索文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“搜索”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)搜索文本域。②選擇“插入>表單>搜索”命令，文檔窗口的表單中出現(xiàn)一個(gè)搜索文本域。搜索文本域“屬性”面板9.4.5插入數(shù)字文本域插入數(shù)字文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“數(shù)字”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)數(shù)字文本域。②選擇“插入>表單>數(shù)字”命令，文檔窗口的表單中出現(xiàn)一個(gè)數(shù)字文本域。數(shù)字文本域“屬性”面板9.4.6插入范圍文本域插入范圍文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“范圍”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)范圍文本域。②選擇“插入>表單>范圍”命令，文檔窗口的表單中出現(xiàn)一個(gè)范圍文本域。范圍文本域“屬性”面板9.4.7插入顏色文本域插入顏色文本域有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“顏色”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)顏色文本域。②選擇“插入>表單>顏色”命令，文檔窗口的表單中出現(xiàn)一個(gè)顏色文本域。顏色“屬性”面板9.4.8插入月表單插入月表單有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“月”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)月表單。②選擇“插入>表單>月”命令，文檔窗口的表單中出現(xiàn)一個(gè)月表單。月表單“屬性”面板9.4.9插入周表單插入周表單有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“周”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)周表單。②選擇“插入>表單>周”命令，文檔窗口的表單中出現(xiàn)一個(gè)周表單。周表單“屬性”面板9.4.10插入日期表插入日期表單有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“日期”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)日期表單。②選擇“插入>表單>日期”命令，文檔窗口的表單中出現(xiàn)一個(gè)日期表單。日期表單“屬性”面板9.4.11插入時(shí)間表單插入時(shí)間表單有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“時(shí)間”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)時(shí)間表單。②選擇“插入>表單>時(shí)間”命令，文檔窗口的表單中出現(xiàn)一個(gè)時(shí)間表單。時(shí)間表單“屬性”面板9.4.12插入日期時(shí)間表單插入日期時(shí)間表單有以下幾種方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“日期時(shí)間”按鈕，文檔窗口的表單中出現(xiàn)一個(gè)日期時(shí)間表單。②選擇“插入>表單>日期時(shí)間”命令，文檔窗口的表單中出現(xiàn)一個(gè)日期時(shí)間表單。日期時(shí)間表單“屬性”面板9.4.13插入日期時(shí)間（當(dāng)?shù)兀┍韱尾迦肴掌跁r(shí)間（當(dāng)?shù)兀┍韱斡幸韵聨追N方法。①單擊“插入”面板“表單”選項(xiàng)卡中的“日期時(shí)間（當(dāng)?shù)兀卑粹o，文檔窗口的表單中出現(xiàn)一個(gè)日期時(shí)間（當(dāng)?shù)兀┍韱?。②選擇“插入>表單>日期時(shí)間（當(dāng)?shù)兀泵睿臋n窗口的表單中出現(xiàn)一個(gè)日期時(shí)間（當(dāng)?shù)兀┍韱?。日期時(shí)間（當(dāng)?shù)兀┍韱巍皩傩浴泵姘迦蝿?wù)實(shí)踐—鑫飛越航空網(wǎng)頁(yè)使用“表單”選項(xiàng)卡中的按鈕插入日期表單。效果圖項(xiàng)目實(shí)踐——房屋評(píng)估網(wǎng)頁(yè)使用“文本”按鈕插入單行文本域，使用“圖像按鈕”按鈕插入圖像按鈕，使用“單選按鈕”按鈕插入單選按鈕。效果圖課后習(xí)題—智能掃地機(jī)器人網(wǎng)頁(yè)使用“表單”按鈕插入表單，使用“Table”按鈕插入表格，進(jìn)行頁(yè)面布局，使用“圖像按鈕”按鈕插入圖像按鈕，使用“復(fù)選框”按鈕插入復(fù)選框，使用“文本”按鈕插入單行文本域，使用“Tel”按鈕插入Tel文本域。效果圖項(xiàng)目引入：行為是Dreamweaver預(yù)置的JavaScript程序庫(kù)，每個(gè)行為包括一個(gè)動(dòng)作和一個(gè)事件。任何一個(gè)動(dòng)作都需要一個(gè)事件激活，兩者相輔相成。動(dòng)作是一段已編輯好的JavaScript代碼，這些代碼在特定事件被激發(fā)時(shí)執(zhí)行。本項(xiàng)目主要講解行為和動(dòng)作的使用方法。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以在網(wǎng)頁(yè)中熟練使用行為和動(dòng)作，使制作的網(wǎng)頁(yè)更加生動(dòng)、精彩。項(xiàng)目10行為了解“行為”面板掌握行為的使用方法掌握動(dòng)作的使用方法和技巧項(xiàng)目目標(biāo)掌握“品牌商城網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)持續(xù)學(xué)習(xí)、獨(dú)立思考的能力培養(yǎng)實(shí)踐能力和專注力素養(yǎng)目標(biāo)任務(wù)10.1行為概述“行為”面板使用行為10.1.1“行為”面板一般使用“行為”面板為網(wǎng)頁(yè)元素指定動(dòng)作和事件。選擇“窗口>行為”命令，或按Shift+F4組合鍵，彈出“行為”面板。“行為”面板10.1.2使用行為1．將行為附加到網(wǎng)頁(yè)元素上10.1.2使用行為2．將行為附加到文本上任務(wù)10.2動(dòng)作打開(kāi)瀏覽器窗口轉(zhuǎn)到URL設(shè)置容器的文本設(shè)置狀態(tài)欄文本設(shè)置文本域文字跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單開(kāi)始任務(wù)實(shí)踐—品牌商城網(wǎng)頁(yè)10.2.1打開(kāi)瀏覽器窗口使用“打開(kāi)瀏覽器窗口”動(dòng)作可以在一個(gè)新的窗口中打開(kāi)指定的URL，還可以指定新窗口的屬性、特征和名稱?！按蜷_(kāi)瀏覽器窗口”對(duì)話框10.2.2轉(zhuǎn)到URL“轉(zhuǎn)到URL”動(dòng)作的功能是在當(dāng)前窗口或指定的框架中打開(kāi)一個(gè)新頁(yè)面。此動(dòng)作尤其適用于通過(guò)一次單擊操作更改兩個(gè)或多個(gè)框架的內(nèi)容。“轉(zhuǎn)到URL”對(duì)話框10.2.3設(shè)置容器的文本使用“設(shè)置容器的文本”動(dòng)作的具體操作步驟如下。（1）單擊“插入”面板“HTML”選項(xiàng)卡中的“Div”按鈕，在文檔窗口中生成一個(gè)div容器。選中該div容器，在“屬性”面板的“DivID”文本框中輸入名稱。（2）在文檔窗口中選擇一個(gè)對(duì)象，如文字、圖像、按鈕等，打開(kāi)“行為”面板。（3）在“行為”面板中單擊“添加行為”按鈕，并從彈出的菜單中選擇“設(shè)置文本>設(shè)置容器的文本”命令，彈出“設(shè)置容器的文本”對(duì)話框。（4）如果不是默認(rèn)事件，則單擊該事件，出現(xiàn)下拉按鈕，單擊該下拉按鈕，彈出包含全部事件的下拉列表，可根據(jù)需要選擇相應(yīng)的事件。（5）按F12鍵瀏覽網(wǎng)頁(yè)效果。10.2.4設(shè)置狀態(tài)欄文本使用“設(shè)置狀態(tài)欄文本”動(dòng)作的具體操作步驟如下。（1）選擇一個(gè)對(duì)象，如文字、圖像、按鈕等，打開(kāi)“行為”面板。（2）在“行為”面板中單擊“添加行為”按鈕，并從彈出的菜單中選擇“設(shè)置文本>設(shè)置狀態(tài)欄文本”命令，彈出“設(shè)置狀態(tài)欄文本”對(duì)話框。對(duì)話框中只有一個(gè)“消息”選項(xiàng)，可以設(shè)置在狀態(tài)欄中顯示的消息。消息要簡(jiǎn)明扼要，否則瀏覽器將把溢出的消息截?cái)唷Ｔ趯?duì)話框中根據(jù)需要輸入狀態(tài)欄消息或相應(yīng)的JavaScript代碼，單擊“確定”按鈕完成設(shè)置。（3）如果不是默認(rèn)事件，在“行為”面板中展開(kāi)該動(dòng)作的下拉列表，選擇相應(yīng)的事件。（4）按F12鍵瀏覽網(wǎng)頁(yè)效果。10.2.5設(shè)置文本域文字使用“設(shè)置文本域文字”動(dòng)作的具體操作步驟如下。（1）若文檔中沒(méi)有文本域?qū)ο?，則要先創(chuàng)建文本域。先選擇“插入>表單>文本區(qū)域”命令，在頁(yè)面中創(chuàng)建文本區(qū)域。然后在“屬性”面板的“Name”文本框中輸入該文本域的名稱，該名稱在網(wǎng)頁(yè)中應(yīng)是唯一的。（2）選擇文本域并打開(kāi)“行為”面板。（3）在“行為”面板中單擊“添加行為”按鈕，并從彈出的菜單中選擇“設(shè)置文本>設(shè)置文本域文字”命令，彈出“設(shè)置文本域文字”對(duì)話框。（4）如果不是默認(rèn)事件，則單擊該事件，出現(xiàn)下拉按鈕，單擊該下拉按鈕，彈出包含全部事件的下拉列表，可根據(jù)需要選擇相應(yīng)的事件。（5）按F12鍵瀏覽網(wǎng)頁(yè)效果。10.2.6跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是鏈接的一種形式，與真正的鏈接相比，跳轉(zhuǎn)菜單可以節(jié)省很大的空間。跳轉(zhuǎn)菜單從表單中的菜單發(fā)展而來(lái)，可通過(guò)“行為”面板中的“跳轉(zhuǎn)菜單”命令進(jìn)行添加?！疤D(zhuǎn)菜單”對(duì)話框10.2.7跳轉(zhuǎn)菜單開(kāi)始“跳轉(zhuǎn)菜單開(kāi)始”動(dòng)作與“跳轉(zhuǎn)菜單”動(dòng)作關(guān)聯(lián)密切?！疤D(zhuǎn)菜單開(kāi)始”將“前往”按鈕和跳轉(zhuǎn)菜單關(guān)聯(lián)起來(lái)，單擊“前往”按鈕將打開(kāi)在跳轉(zhuǎn)菜單中選擇的鏈接。通常情況下，跳轉(zhuǎn)菜單不需要“前往”按鈕。但是如果跳轉(zhuǎn)菜單出現(xiàn)在一個(gè)框架中，而跳轉(zhuǎn)菜單項(xiàng)鏈接到其他框架中的頁(yè)，則通常需要使用“前往”按鈕，以允許訪問(wèn)者重新選擇已在跳轉(zhuǎn)菜單中選擇的菜單項(xiàng)。“跳轉(zhuǎn)菜單開(kāi)始”對(duì)話框任務(wù)實(shí)踐—品牌商城網(wǎng)頁(yè)使用“交換圖像”命令制作鼠標(biāo)指針經(jīng)過(guò)圖像時(shí)圖像發(fā)生變化的效果。效果圖項(xiàng)目實(shí)踐—婚戒網(wǎng)頁(yè)使用“打開(kāi)瀏覽器窗口”命令制作指定大小和屬性的彈出窗口。效果圖課后習(xí)題——愛(ài)在七夕網(wǎng)頁(yè)使用“打開(kāi)瀏覽器窗口”命令制作指定大小的彈出窗口。效果圖項(xiàng)目引入：在DreamweaverCC2019中插入的網(wǎng)頁(yè)內(nèi)容及動(dòng)作都會(huì)自動(dòng)轉(zhuǎn)換為代碼。本項(xiàng)目主要講解網(wǎng)頁(yè)代碼的使用方法和應(yīng)用技巧。通過(guò)對(duì)這些內(nèi)容的學(xué)習(xí)，學(xué)生可以直接編寫(xiě)或修改代碼，實(shí)現(xiàn)Web頁(yè)面的交互效果。項(xiàng)目11網(wǎng)頁(yè)代碼了解網(wǎng)頁(yè)代碼掌握使用標(biāo)簽庫(kù)插入標(biāo)簽的方法掌握常用的HTML標(biāo)簽掌握調(diào)用HTML事件過(guò)程的法項(xiàng)目目標(biāo)掌握“品質(zhì)狂歡節(jié)網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“土特產(chǎn)網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)對(duì)網(wǎng)頁(yè)代碼的探索精神培養(yǎng)將相關(guān)知識(shí)運(yùn)用到實(shí)際操作中的應(yīng)用能力素養(yǎng)目標(biāo)任務(wù)11.1網(wǎng)頁(yè)代碼概述代碼提示功能使用標(biāo)簽庫(kù)插入標(biāo)簽任務(wù)實(shí)踐—品質(zhì)狂歡節(jié)網(wǎng)頁(yè)11.1.1代碼提示功能代碼提示是網(wǎng)站設(shè)計(jì)者在文檔窗口中編寫(xiě)或修改代碼的有效工具。只要在“代碼”視圖的相應(yīng)標(biāo)簽間按<鍵，就會(huì)出現(xiàn)標(biāo)簽列表，在標(biāo)簽內(nèi)按Space鍵，就會(huì)出現(xiàn)關(guān)于該標(biāo)簽常用屬性、方法、事件的代碼提示列表?！按a”視圖11.1.2使用標(biāo)簽庫(kù)插入標(biāo)簽在DreamweaverCC2019中，標(biāo)簽庫(kù)里有一組特定類型的標(biāo)簽，它包含DreamweaverCC2019應(yīng)如何設(shè)置標(biāo)簽格式的信息。標(biāo)簽庫(kù)提供了DreamweaverCC2019用于代碼提示、目標(biāo)瀏覽器檢查、標(biāo)簽選擇器和其他代碼功能的標(biāo)簽信息。使用標(biāo)簽庫(kù)編輯器可以添加和刪除標(biāo)簽庫(kù)、標(biāo)簽和屬性，設(shè)置標(biāo)簽庫(kù)的屬性以及編輯標(biāo)簽和屬性。“標(biāo)簽庫(kù)編輯器”對(duì)話框任務(wù)實(shí)踐—品質(zhì)狂歡節(jié)網(wǎng)頁(yè)使用“頁(yè)面屬性”命令改變頁(yè)面的邊距和標(biāo)題，使用“IFRAME”按鈕制作浮動(dòng)框架效果。效果圖任務(wù)11.2常用的HTML標(biāo)簽HTML是一種超文本標(biāo)記語(yǔ)言，HTML文件是能夠被網(wǎng)絡(luò)瀏覽器讀取并生成網(wǎng)頁(yè)的文件。常用的HTML標(biāo)簽有以下幾種。6．圖形標(biāo)簽7．鏈接標(biāo)簽8．表單標(biāo)簽9．滾動(dòng)標(biāo)簽10．載入網(wǎng)頁(yè)背景音樂(lè)標(biāo)簽1．文件結(jié)構(gòu)標(biāo)簽2．排版標(biāo)簽3．列表標(biāo)簽4．表格標(biāo)簽5．框架任務(wù)11.3調(diào)用HTML事件過(guò)程前面已經(jīng)介紹了基本的事件及其觸發(fā)條件，本書(shū)講解在代碼中調(diào)用事件過(guò)程的方法。調(diào)用事件過(guò)程有3種方法，下面以在按鈕上單擊彈出歡迎對(duì)話框?yàn)槔榻B調(diào)用事件過(guò)程的方法。1．通過(guò)名稱調(diào)用事件過(guò)程2．通過(guò)for、event屬性調(diào)用事件過(guò)程3．通過(guò)控件屬性調(diào)用事件過(guò)程任務(wù)實(shí)踐—土特產(chǎn)網(wǎng)頁(yè)切換到“代碼”視圖，手動(dòng)輸入代碼實(shí)現(xiàn)禁止?jié)L動(dòng)和禁止右擊效果。效果圖項(xiàng)目實(shí)踐—活動(dòng)詳情頁(yè)使用“頁(yè)面屬性”命令添加頁(yè)面標(biāo)題，使用“IFRAME”按鈕制作浮動(dòng)框架效果。效果圖課后習(xí)題—機(jī)電設(shè)備網(wǎng)頁(yè)使用“頁(yè)面屬性”命令添加頁(yè)面標(biāo)題，使用“IFRAME”按鈕制作浮動(dòng)框架效果。效果圖項(xiàng)目引入：文化藝術(shù)網(wǎng)站是指專業(yè)的文化和藝術(shù)類網(wǎng)站，其利用一張張網(wǎng)頁(yè)弘揚(yáng)我國(guó)文化和藝術(shù)，滿足群眾日益增長(zhǎng)的文化需求，促進(jìn)社會(huì)各界的文化和藝術(shù)交流。本項(xiàng)目以兩個(gè)類型的文化藝術(shù)網(wǎng)頁(yè)為例，講解文化藝術(shù)網(wǎng)頁(yè)的設(shè)計(jì)方法和制作技巧。項(xiàng)目12文化藝術(shù)網(wǎng)頁(yè)掌握文化藝術(shù)網(wǎng)頁(yè)的設(shè)計(jì)流程掌握文化藝術(shù)網(wǎng)頁(yè)的布局思路掌握文化藝術(shù)網(wǎng)頁(yè)的制作方法項(xiàng)目目標(biāo)掌握“戲曲藝術(shù)網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“國(guó)畫(huà)藝術(shù)網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)激發(fā)對(duì)藝術(shù)的熱情傳承傳統(tǒng)文化，推動(dòng)文化藝術(shù)的繁榮素養(yǎng)目標(biāo)任務(wù)12.1文化藝術(shù)網(wǎng)頁(yè)概述隨著人們對(duì)精神生活的重視和審美品位的不斷提升，文化藝術(shù)逐漸成為提升生活質(zhì)量和情感表達(dá)的重要載體。文化藝術(shù)網(wǎng)頁(yè)匯集了豐富多彩的內(nèi)容，涵蓋繪畫(huà)、雕塑、戲劇、音樂(lè)、舞蹈、手工藝等多種藝術(shù)形式，既有傳統(tǒng)文化的傳承與保護(hù)，也有當(dāng)代藝術(shù)的創(chuàng)新與突破。通過(guò)詳細(xì)的藝術(shù)作品介紹、專題文章、視頻展示等內(nèi)容，用戶可以深入了解不同藝術(shù)流派的歷史淵源及其發(fā)展脈絡(luò)。

任務(wù)12.2戲曲藝術(shù)網(wǎng)頁(yè)任務(wù)分析任務(wù)效果任務(wù)制作

12.2.1任務(wù)分析京劇是我國(guó)傳統(tǒng)戲曲藝術(shù)的精華，集音樂(lè)、舞蹈、文學(xué)、武術(shù)于一體。本任務(wù)是設(shè)計(jì)制作戲曲藝術(shù)網(wǎng)頁(yè)，要求通過(guò)設(shè)計(jì)詳細(xì)地展現(xiàn)京劇歷史、行當(dāng)、經(jīng)典劇目，并且可以播放名家名段的視頻等。通過(guò)這個(gè)平臺(tái)，訪問(wèn)者不僅能夠深入了解和欣賞京劇藝術(shù)，還能促進(jìn)京劇文化的傳播與傳承，激發(fā)更多人對(duì)這門(mén)傳統(tǒng)藝術(shù)的興趣。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，將背景設(shè)計(jì)成干凈整潔的淺色背景并搭配毛筆筆觸，體現(xiàn)出戲曲的傳承和精神。導(dǎo)航條放在頁(yè)面頂部，便于訪問(wèn)者對(duì)網(wǎng)頁(yè)進(jìn)行瀏覽。中間部分使用獨(dú)特的京劇人物圖像，使頁(yè)面更加生動(dòng)直觀，通過(guò)圖像和文字的設(shè)計(jì)編排，展現(xiàn)戲曲風(fēng)格和文化特色。右側(cè)和下方設(shè)計(jì)了最新動(dòng)態(tài)、戲曲新聞和相關(guān)知識(shí)欄目。整個(gè)頁(yè)面充滿了中國(guó)傳統(tǒng)戲曲文化的氣息。

12.2.2任務(wù)效果本任務(wù)使用“屬性”面板設(shè)置單元格的寬度、高度和文字顏色，制作導(dǎo)航條；使用“Image”按鈕為頁(yè)面添加圖像；使用“CSS設(shè)計(jì)器”面板設(shè)置文字行距和文字大小。效果圖

12.2.3任務(wù)制作1．制作導(dǎo)航條和焦點(diǎn)圖區(qū)域2．制作內(nèi)容區(qū)域3．制作底部區(qū)域

任務(wù)12.3國(guó)畫(huà)藝術(shù)網(wǎng)頁(yè)任務(wù)分析任務(wù)設(shè)計(jì)任務(wù)制作

12.3.1任務(wù)分析國(guó)畫(huà)是我國(guó)傳統(tǒng)繪畫(huà)的代表，具有悠久的歷史和獨(dú)特的藝術(shù)風(fēng)格。本任務(wù)是設(shè)計(jì)制作國(guó)畫(huà)藝術(shù)網(wǎng)頁(yè)，旨在展示國(guó)畫(huà)的魅力與多樣性，網(wǎng)頁(yè)內(nèi)容包含國(guó)畫(huà)歷史、技法、名家作品賞析以及繪畫(huà)教學(xué)資源。訪問(wèn)者可以通過(guò)該網(wǎng)頁(yè)深入了解國(guó)畫(huà)的文化內(nèi)涵、傳統(tǒng)技藝和當(dāng)代發(fā)展，欣賞不同風(fēng)格和流派的優(yōu)秀作品，并有機(jī)會(huì)參與在線藝術(shù)交流和學(xué)習(xí)。該網(wǎng)頁(yè)能激發(fā)更多人對(duì)國(guó)畫(huà)藝術(shù)的興趣，為中華傳統(tǒng)藝術(shù)的發(fā)展注入新的活力。在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，將背景設(shè)計(jì)為傳統(tǒng)水墨畫(huà)的黑白顏色形式；通過(guò)對(duì)國(guó)畫(huà)信息的展示充分表現(xiàn)國(guó)畫(huà)的藝術(shù)美感；整個(gè)網(wǎng)頁(yè)圖像豐富多樣，充滿特色。

12.3.2任務(wù)設(shè)計(jì)本任務(wù)使用“Image”按鈕插入網(wǎng)頁(yè)logo，使用“頁(yè)面屬性”命令改變頁(yè)面文字的大小、顏色和邊距，使用“CSS設(shè)計(jì)器”面板設(shè)置頁(yè)面背景圖像和文字行距等，使用“屬性”面板設(shè)置單元格的寬和高。效果圖

12.3.3任務(wù)制作1．設(shè)置背景圖像、制作導(dǎo)航條和焦點(diǎn)圖區(qū)域2．制作國(guó)畫(huà)名家介紹區(qū)域3．制作名作欣賞區(qū)域和底部效果

項(xiàng)目實(shí)踐—書(shū)法藝術(shù)網(wǎng)頁(yè)效果圖使用“頁(yè)面屬性”命令設(shè)置頁(yè)面字體、大小\顏色和頁(yè)邊距，使用“屬性”面板設(shè)置單元格背景顏色、寬度和高度，使用“CSS設(shè)計(jì)器”面板設(shè)置文字的顏色、大小和行距。

課后習(xí)題—詩(shī)詞藝術(shù)網(wǎng)頁(yè)效果圖使用“頁(yè)面屬性”命令設(shè)置頁(yè)面字體、大小、顏色和頁(yè)邊距，使用“CSS設(shè)計(jì)器”面板設(shè)置單元格背景圖像，以及文字的顏色、大小和行距，使用“屬性”面板設(shè)置單元格的寬度和高度。項(xiàng)目引入：隨著旅游行業(yè)蓬勃發(fā)展，旅游網(wǎng)站受到廣泛關(guān)注。根據(jù)旅游公司的市場(chǎng)定位和產(chǎn)品特點(diǎn)，旅游休閑網(wǎng)頁(yè)表現(xiàn)出了不同的類型和特色。本項(xiàng)目以兩個(gè)旅游休閑網(wǎng)頁(yè)為例，講解旅游休閑網(wǎng)頁(yè)的設(shè)計(jì)方法和制作技巧。項(xiàng)目13旅游休閑網(wǎng)頁(yè)了解旅游休閑網(wǎng)頁(yè)的功能掌握旅游休閑網(wǎng)頁(yè)的設(shè)計(jì)流程掌握旅游休閑網(wǎng)頁(yè)的布局掌握旅游休閑網(wǎng)頁(yè)的制作方法項(xiàng)目目標(biāo)掌握“滑雪運(yùn)動(dòng)網(wǎng)頁(yè)”的關(guān)鍵制作步驟掌握“戶外運(yùn)動(dòng)網(wǎng)頁(yè)”的關(guān)鍵制作步驟技能目標(biāo)培養(yǎng)包容與開(kāi)放的心態(tài)培養(yǎng)勇于挑戰(zhàn)的精神培養(yǎng)環(huán)保意識(shí)素養(yǎng)目標(biāo)任務(wù)13.1旅游休閑網(wǎng)頁(yè)概述隨著人們生活水平的日益提高，旅游已成為人們休閑、娛樂(lè)的首選方式之一。一波又一波的旅游熱潮使旅游行業(yè)蓬勃發(fā)展，而通過(guò)互聯(lián)網(wǎng)進(jìn)行宣傳也成為旅游行業(yè)的一項(xiàng)重要舉措。因此，越來(lái)越多的旅游網(wǎng)站建立起來(lái)，豐富多彩的網(wǎng)頁(yè)內(nèi)容不僅為旅游者提供了了解外界及旅行社情況的窗口，而且為旅行社提供了網(wǎng)上報(bào)名、網(wǎng)上預(yù)訂的信息。良好的交流環(huán)境使得旅游行業(yè)滿足更多的用戶需求成為可能，也為用戶尋找更好的旅游產(chǎn)品提供了良好的契機(jī)。

任務(wù)13.2滑雪運(yùn)動(dòng)網(wǎng)頁(yè)任務(wù)分析任務(wù)效果任務(wù)制作

13.2.1任務(wù)分析雪上運(yùn)動(dòng)浪漫而又刺激。不分年齡，男女老少皆可在雪場(chǎng)上盡情享受滑雪的樂(lè)趣，感受到這項(xiàng)運(yùn)動(dòng)帶來(lái)的無(wú)窮快樂(lè)。本任務(wù)是為滑雪場(chǎng)設(shè)計(jì)網(wǎng)頁(yè)，目的是突出滑雪的刺激和樂(lè)趣，吸引更多消費(fèi)者。在網(wǎng)頁(yè)制作過(guò)程中，將網(wǎng)頁(yè)的背景設(shè)計(jì)為美麗的雪山，充滿激情的運(yùn)動(dòng)員在滑雪，勾起人對(duì)滑雪運(yùn)動(dòng)的無(wú)限向往，網(wǎng)頁(yè)的色彩搭配清爽怡人，整體色調(diào)符合滑雪運(yùn)動(dòng)的特色，頂部