《網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程》課件

1、項(xiàng)目1網(wǎng)頁設(shè)計(jì)制作入門由淺入深簡章易懂貼近實(shí)際WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程CONTENTS任務(wù)1 使用DW CS6創(chuàng)建第一個(gè)網(wǎng)頁任務(wù)2 制作文本網(wǎng)頁任務(wù)3 制作包含列表的網(wǎng)頁任務(wù)1使用DW CS6創(chuàng)建第一個(gè)網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)：創(chuàng)建與修改站點(diǎn)；制作第一個(gè)網(wǎng)頁文檔。活動(dòng)1 創(chuàng)建與修改站點(diǎn)1-11、創(chuàng)建一個(gè)名稱為“項(xiàng)目1”的本地站點(diǎn)，站點(diǎn)文件夾為D盤。2、修改“項(xiàng)目1”站點(diǎn)文件夾為桌面上的“Task1-1”文件夾?；顒?dòng)要求活動(dòng)1 創(chuàng)建與修改站點(diǎn)1-1啟動(dòng)Dreamweaver CS6軟件（1）雙擊桌面上的Dreamweav

2、er CS6圖標(biāo)，啟動(dòng)軟件，如下圖所示。知識窗歡迎界面 活動(dòng)1 創(chuàng)建與修改站點(diǎn)1-1（2）在“歡迎界面”中單擊“新建”欄下的“HTML”按鈕，新建一個(gè)HTML網(wǎng)頁文件，進(jìn)入新的窗口界面，如下圖所示。文檔標(biāo)簽 菜單欄 文檔工具欄 文檔窗口 工作區(qū)切換器 標(biāo)簽選擇器 屬性面板 狀態(tài)欄 面板組 活動(dòng)1 創(chuàng)建與修改站點(diǎn)1-1詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施主要是熟悉Dreamweaver CS6的軟件界面，通過活動(dòng)實(shí)施過程，熟悉站點(diǎn)的創(chuàng)建與修改操作，并能理解站點(diǎn)的作用?；顒?dòng)評價(jià)活動(dòng)2 制作第一個(gè)網(wǎng)頁文檔1-2新建一個(gè)網(wǎng)頁文件，輸入兩行文字，并將網(wǎng)頁文件以“task1-1-2.html”為文件名保存到“

3、項(xiàng)目1”站點(diǎn)根目錄下。效果如下圖所示。活動(dòng)要求活動(dòng)2 制作第一個(gè)網(wǎng)頁文檔1-21、Dreamweaver CS6的三種編輯模式Dreamweaver CS6有三種編輯模式，分別是：代碼、拆分、設(shè)計(jì)，如下圖所示。知識窗三種編輯模式切換按鈕 活動(dòng)2 制作第一個(gè)網(wǎng)頁文檔1-22、網(wǎng)頁的基本結(jié)構(gòu)網(wǎng)頁的基本結(jié)構(gòu)由三部分組成：聲明、頭部、主體，如下圖所示?；顒?dòng)2 制作第一個(gè)網(wǎng)頁文檔1-2（1）網(wǎng)頁文檔類型聲明使用來聲明網(wǎng)頁的文檔類型，用來告訴瀏覽器使用什么樣的HTML或XHTML規(guī)范來解析網(wǎng)頁，它存在于頁面的第一行，不區(qū)分大小寫。（2）網(wǎng)頁的頭部：定義文檔的頭部。標(biāo)簽內(nèi)包含、等標(biāo)簽。：提供有關(guān)頁面的元信息

4、（針對搜索引擎和更新頻度的描述和關(guān)鍵詞等），寫在標(biāo)簽內(nèi)。 ：設(shè)置頁面的編碼格式UTF-8。 ：告訴搜索引擎站點(diǎn)制作的作者。 ：告訴搜索引擎網(wǎng)站的關(guān)鍵字。 ：告訴搜索引擎網(wǎng)站的內(nèi)容。：該標(biāo)簽用于定義文檔的標(biāo)題。寫在標(biāo)簽內(nèi)。HTML筆記：網(wǎng)頁標(biāo)題為“HTML筆記”，在瀏覽器標(biāo)題欄上顯示。（3）網(wǎng)頁的主體：定義網(wǎng)頁文檔的主體。活動(dòng)2 制作第一個(gè)網(wǎng)頁文檔1-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施使用Dreamweaver CS6制作第一個(gè)網(wǎng)頁并成功在瀏覽器中看查運(yùn)行結(jié)果，通過操作掌握Dreamweaver CS6網(wǎng)頁制作的基本操作，包含網(wǎng)頁文件的新建與保存、網(wǎng)頁標(biāo)題修改及內(nèi)容的添加、如何在瀏覽器中運(yùn)行網(wǎng)頁

5、結(jié)果等。活動(dòng)評價(jià)任務(wù)2制作文本網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)：使用標(biāo)題、段落等文本網(wǎng)頁標(biāo)簽制作詩詞賞析頁面；使用特殊字符對頁面進(jìn)行簡單排版操作?；顒?dòng)1 制作詩詞賞析頁面2-1如下圖所示，完成詩詞賞析頁面的制作，完成后以“task1-2.html”為文件名保存?；顒?dòng)要求活動(dòng)1 制作詩詞賞析頁面2-11、標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽表示一段文字的標(biāo)題，共劃分六級標(biāo)題，從1級到6級，逐級字體減小。如下圖所示。在Dreamweaver CS6中，單擊“格式”-“段落格式”菜單命令，在打開的子菜單中選擇“標(biāo)題1”“標(biāo)題6”中的一個(gè)，或者在“屬性”面板的“格式”下拉列表框中選擇“標(biāo)題1”“標(biāo)題6”中的一個(gè)，都可在網(wǎng)頁中

6、插入相對應(yīng)的標(biāo)題標(biāo)簽。知識窗活動(dòng)1 制作詩詞賞析頁面2-12、段落與換行標(biāo)簽（1）段落標(biāo)簽在設(shè)計(jì)模式下，按回車鍵即可自動(dòng)添加段落標(biāo)簽。（2）換行標(biāo)簽在設(shè)計(jì)模式下，按Shift+回車鍵，即可添加換行標(biāo)簽。花籃的花兒香 聽我來唱一唱 唱一唱來到了南泥灣 南泥灣好地方 好地方花籃的花兒香 聽我來唱一唱 唱一唱來到了南泥灣 南泥灣好地方 好地方活動(dòng)1 制作詩詞賞析頁面2-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施通過本次活動(dòng)，掌握網(wǎng)頁中文字的輸入操作，并能力正確設(shè)置標(biāo)題格式，以及在網(wǎng)頁中輸入文字時(shí)段落與換行符的使用?；顒?dòng)評價(jià)活動(dòng)2 對詩詞賞析頁面進(jìn)行簡單排版2-2如下圖所示，打開“task1-2.html”文

7、件，對詩詞賞析頁面進(jìn)行簡單排版操作?；顒?dòng)要求活動(dòng)2 對詩詞賞析頁面進(jìn)行簡單排版2-21、粗體標(biāo)簽粗體標(biāo)簽主要用于文字加粗，可以通過以下兩種方法給網(wǎng)頁文字添加粗體標(biāo)簽：在“代碼”視圖模式中，在需要設(shè)置加粗效果的文字兩端添加標(biāo)簽。在“設(shè)計(jì)”視圖模式中，選擇要設(shè)置加粗效果的文字，在“屬性”面板中單擊“粗體”按鈕（快捷鍵為：Ctrl + B），如下圖所示。2、斜體標(biāo)簽斜體標(biāo)簽主要用于文字傾斜顯示，可以通過以下兩種方法給網(wǎng)頁文字添加斜體標(biāo)簽：在“代碼”視圖模式中，在需要設(shè)置傾斜效果的文字兩端添加標(biāo)簽。在“設(shè)計(jì)”視圖模式中，選擇要設(shè)置傾斜效果的文字，在“屬性”面板中單擊“斜體”按鈕（快捷鍵為：Ctrl +

8、 I），如下圖所示。知識窗“粗體”按鈕 “斜體”按鈕 活動(dòng)2 對詩詞賞析頁面進(jìn)行簡單排版2-23、特殊符號網(wǎng)頁中常見的特殊符號如下表所示：注意：每個(gè)符號后面都必須以分號作為結(jié)束，不可省略。4、水平線標(biāo)簽水平線主要用于分隔網(wǎng)頁內(nèi)容，使網(wǎng)頁內(nèi)容顯示更清晰?；顒?dòng)2 對詩詞賞析頁面進(jìn)行簡單排版2-2詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施通過本次活動(dòng)，掌握如何在網(wǎng)頁插入特殊字符、如何插入水平線、如何在網(wǎng)頁中添加有效空格，掌握如何通過“屬性”面板設(shè)置網(wǎng)頁中的文字格式，如加粗、斜體等，在通過“屬性”面板設(shè)置網(wǎng)頁中的文字格式時(shí)，注意與Word相應(yīng)功能進(jìn)行對比。活動(dòng)評價(jià)任務(wù)3制作包含列表的網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)

9、：使用項(xiàng)目列表制作樹形菜單；使用編號列表制作在線考試試卷?；顒?dòng)1 制作樹形菜單3-1如下圖所示，完成樹形菜單的制作，完成后以“task1-3-1.html”為文件名保存?；顒?dòng)要求活動(dòng)1 制作樹形菜單3-11、項(xiàng)目列表項(xiàng)目列表，也稱無序列表，列表項(xiàng)之間無順序之分，每個(gè)列表項(xiàng)前均有一個(gè)項(xiàng)目符號，如下圖所示。2、項(xiàng)目列表的設(shè)置項(xiàng)目列表可以通過“屬性”面板進(jìn)行設(shè)置，如下圖所示。知識窗無序列表 桔子 香蕉 蘋果活動(dòng)1 制作樹形菜單3-13、項(xiàng)目列表的類型項(xiàng)目列表的類型可以通過type屬性設(shè)置列表顯示符號的類型，如下圖所示。disc：實(shí)心圓點(diǎn)square：實(shí)心方框circle：空心圓點(diǎn)type=circl

10、e 時(shí)的無序列表： 桔子 香蕉 蘋果活動(dòng)1 制作樹形菜單3-1詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施通過本次活動(dòng)，掌握網(wǎng)頁制作中項(xiàng)目列表的使用，通過本次活動(dòng)的操作練習(xí)，學(xué)會(huì)如何將文本轉(zhuǎn)換為項(xiàng)目列表，學(xué)會(huì)如何通過“屬性”面板中的相關(guān)工具按鈕對項(xiàng)目列表進(jìn)行操作，以及項(xiàng)目列表類型的設(shè)置操作?；顒?dòng)評價(jià)活動(dòng)2 制作在線考試試卷3-2如下圖所示，完成在線考試試卷的制作，完成后以“task1-3-2.html”為文件名保存?；顒?dòng)要求活動(dòng)2 制作在線考試試卷3-21、編號列表編號列表，也稱有序列表，以數(shù)字或字母作為列表項(xiàng)符號，如下圖所示。知識窗 桔子 香蕉 蘋果 活動(dòng)2 制作在線考試試卷3-22、編號列表的類型編號

11、列表的類型可以通過type屬性設(shè)置列表顯示編號的類型，如下圖所示。1：數(shù)字A：大寫英文a：小寫英文i：小寫羅馬字符I：大寫羅馬字符type=1 時(shí)的有序列表：桔子香蕉蘋果type=a 時(shí)的有序列表：桔子香蕉蘋果活動(dòng)2 制作在線考試試卷3-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施通過本次活動(dòng)，掌握網(wǎng)頁制作中編號列表的使用，通過本次活動(dòng)的操作練習(xí)，學(xué)會(huì)如何將文本或者項(xiàng)目列表轉(zhuǎn)換為編號列表，學(xué)會(huì)如何通過“屬性”面板中的相關(guān)工具按鈕對編號列表進(jìn)行操作，以及編號列表類型的設(shè)置操作。活動(dòng)評價(jià)項(xiàng)目2制作包含圖片與超鏈接的網(wǎng)頁由淺入深簡章易懂貼近實(shí)際WANGYE ZHIZUO XIANGMU SHIXUN JIAO

12、CHENG網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程CONTENTS任務(wù)1 制作圖文混排網(wǎng)頁任務(wù)2 制作多媒體網(wǎng)頁任務(wù)3 制作包含超鏈接的網(wǎng)頁任務(wù)1制作圖文混排網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)：在網(wǎng)頁中使用圖片；制作圖書介紹頁。活動(dòng)1 在網(wǎng)頁中使用圖片1-11、創(chuàng)建一個(gè)名稱為“項(xiàng)目2-1”的本地站點(diǎn)，本地站點(diǎn)文件夾為D盤下的“Task2-1”文件夾，默認(rèn)圖像文件夾路徑設(shè)置為D:Task2-1images。2、如下圖所示，新建一個(gè)網(wǎng)頁文件，輸入文字、添加圖片和各種圖像對象并設(shè)置網(wǎng)頁的背景，最后將網(wǎng)頁文件以“task2-1-1.html”為文件名保存到“項(xiàng)目2-1”站點(diǎn)根目錄下?；顒?dòng)要求活動(dòng)1 在網(wǎng)頁中使用圖片1-11、直

13、接添加圖片圖片在網(wǎng)頁中的第1種使用方法是直接添加，網(wǎng)頁中能添加的圖片文件格式比較多，常見的格式有以下3種：JPG（全稱是Joint Photographic Experts Group，聯(lián)合圖像專家組）是一種高效壓縮的圖片格式，其優(yōu)點(diǎn)是顏色豐富，文件容量小，下載速度快，缺點(diǎn)是不具透明效果。GIF（全稱是Graphics Interchange Format，可交換的圖像格式）是目前大量使用的網(wǎng)頁圖片格式之一，其優(yōu)點(diǎn)是文件容量小，可以透明顯示，還可以支持動(dòng)畫，缺點(diǎn)是表現(xiàn)的顏色比JPG格式少得多。PNG（全稱是Portable Network Graphics，便攜網(wǎng)絡(luò)圖像）結(jié)合了JPG和GIF的

14、優(yōu)點(diǎn)，不僅具有JPG處理精美圖片的優(yōu)勢，而且具有GIF能透明顯示的特點(diǎn)，因此應(yīng)用較廣泛，逐漸成為網(wǎng)頁圖片的主要格式。如下圖所示：知識窗 JPG格式 GIF格式 PNG格活動(dòng)1 在網(wǎng)頁中使用圖片1-12、插入圖像占位符圖片在網(wǎng)頁中的第2種使用方法是插入圖像占位符，在網(wǎng)頁文檔中添加圖片時(shí)，如果圖片不確定或者還沒設(shè)計(jì)出來，但可以確定圖片的位置、尺寸時(shí)，可以先在該位置上插入臨時(shí)的“圖像占位符”進(jìn)行占位；然后等圖片確定后再進(jìn)行替換，如下圖所示：活動(dòng)1 在網(wǎng)頁中使用圖片1-13、創(chuàng)建鼠標(biāo)經(jīng)過圖像圖片在網(wǎng)頁中的第3種使用方法是創(chuàng)建鼠標(biāo)經(jīng)過圖像，鼠標(biāo)經(jīng)過圖像由原始圖像和鼠標(biāo)經(jīng)過圖像兩部分組成，當(dāng)鼠標(biāo)光標(biāo)在圖片

15、范圍之外時(shí)顯示原始圖像，當(dāng)鼠標(biāo)光標(biāo)經(jīng)過圖片時(shí)顯示鼠標(biāo)經(jīng)過圖像。如下圖所示：活動(dòng)1 在網(wǎng)頁中使用圖片1-14、將圖片設(shè)置為網(wǎng)頁的背景圖片在網(wǎng)頁中的第4種使用方法是將圖片設(shè)置為網(wǎng)頁的背景，依次單擊“修改”-“頁面屬性”菜單命令（或按Ctrl+J鍵），選擇一張圖片作為網(wǎng)頁的背景，如下圖所示，其中“重復(fù)”選項(xiàng)分為以下4種：no-repeat：圖片作為網(wǎng)頁背景不重復(fù)只顯示1次；repeat：圖片作為網(wǎng)頁背景在x軸、y軸即水平、垂直方向重復(fù)顯示，為默認(rèn)選項(xiàng)；repeat-x：圖片作為網(wǎng)頁背景在x軸即水平方向重復(fù)顯示；repeat-y：圖片作為網(wǎng)頁背景在y軸即垂直方向重復(fù)顯示。活動(dòng)1 在網(wǎng)頁中使用圖片1-1

16、詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施在制作網(wǎng)頁過程中，要注意選取具有代表性、較清晰、大小適宜的圖片，如果圖片素材還沒確定可以采用圖像占位符預(yù)留出位置，鼠標(biāo)經(jīng)過圖像盡量選取兩張大小基本一致的圖片，將圖片設(shè)置為網(wǎng)頁的背景時(shí)可以選取一張較小、可重復(fù)的圖片加快網(wǎng)頁打開速度。活動(dòng)評價(jià)活動(dòng)2 制作圖書介紹頁1-2如下圖所示，完成圖書介紹網(wǎng)頁的制作，完成后以“task2-1-2.html”為文件名保存到“項(xiàng)目2-1”站點(diǎn)根目錄下。活動(dòng)要求活動(dòng)2 制作圖書介紹頁1-21、圖片的HTML標(biāo)簽，如下圖所示。 “”代表圖片，是單標(biāo)簽，以 / 結(jié)束；“src”代表圖片的存放路徑；“alt”代表替換文本，用來設(shè)置當(dāng)前鼠標(biāo)移

17、到圖片上時(shí)所顯示的提示文本；“width”代表圖片的寬度，默認(rèn)單位是像素；“height”代表圖片的高度，默認(rèn)單位是像素；“align”代表圖片的對齊方式，常見的值可以設(shè)置為：top（頂端）、bottom（底部）、middle（中間）、left（左對齊）、right（右對齊）；“hspace”代表圖片左側(cè)和右側(cè)的水平邊距，默認(rèn)單位是像素；“vspace”代表圖片頂部和底部的垂直邊距，默認(rèn)單位是像素。知識窗活動(dòng)2 制作圖書介紹頁1-22、圖片的簡單編輯網(wǎng)頁中的圖片除了可以通過HTML標(biāo)簽進(jìn)行設(shè)置以外，也可以通過屬性欄中各個(gè)選項(xiàng)進(jìn)行處理，同時(shí)還有一些內(nèi)置工具可以對圖片進(jìn)行簡單編輯，如下圖所示： 裁

18、剪：先選中圖像，再單擊該按鈕，在彈出的對話框中選“確定”，圖片上會(huì)出現(xiàn)選框，選框以外的區(qū)域是被裁剪掉的，用鼠標(biāo)拖動(dòng)選框的控點(diǎn)可以調(diào)整大小。亮度和對比度：點(diǎn)擊后在出現(xiàn)的對話框中拖動(dòng)滑塊可以調(diào)整圖片的明暗以及對比度。銳化：可使圖片的棱角更加分明，增加圖片的清晰度。裁剪亮度和對比度銳化活動(dòng)2 制作圖書介紹頁1-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施初學(xué)者制作圖文混排的網(wǎng)頁時(shí)，要學(xué)會(huì)對圖片進(jìn)行簡單的大小、亮度、銳度等調(diào)整，同時(shí)注意調(diào)整圖片和文字的對齊方式，對于文字、圖片較多的復(fù)雜網(wǎng)頁，后面還需要學(xué)習(xí)表格、DIV、CSS等美化排版網(wǎng)頁的知識?；顒?dòng)評價(jià)任務(wù)2制作多媒體網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)：在網(wǎng)頁中添加

19、音頻與視頻、在網(wǎng)頁中添加Flash動(dòng)畫?；顒?dòng)1 在網(wǎng)頁中添加音頻與視頻2-11、創(chuàng)建一個(gè)名稱為“項(xiàng)目2-2”的本地站點(diǎn)，本地站點(diǎn)文件夾為D盤下的“Task2-2”文件夾，默認(rèn)圖像文件夾路徑設(shè)置為D:Task2-2images。2、如下圖所示，完成音樂頁面的制作，完成后以“task2-2-1.html”為文件名保存到“項(xiàng)目2-2”站點(diǎn)根目錄下?；顒?dòng)要求活動(dòng)1 在網(wǎng)頁中添加音頻與視頻2-11、網(wǎng)頁中常用的音頻文件格式MP3格式：是一種壓縮格式，能以較小的比特率、較大的壓縮比達(dá)到近科（“近科”改為“近乎”）完美的CD音質(zhì)，網(wǎng)頁中如果需要播放MP3文件，用戶需要安裝必要插件，如QuickTime、Wi

20、ndows Meadia Player。WAV格式：具有較好的聲音品質(zhì)，大多數(shù)瀏覽器都支持此格式，因此不要求安裝插件。但WAV文件一般容量比較大，在網(wǎng)頁制作中受到一定限制，必要時(shí)可以將WAV格式轉(zhuǎn)化為MP3格式進(jìn)行壓縮。MIDI格式：一般用于樂器類的音頻文件，大多數(shù)瀏覽器都支持此格式，不要求安裝插件。MIDI文件不能錄制并且必須使用特殊的硬件和軟件在計(jì)算機(jī)上進(jìn)行合成。知識窗活動(dòng)1 在網(wǎng)頁中添加音頻與視頻2-12、網(wǎng)頁中添加音頻文件的方法在網(wǎng)頁中添加音頻文件的方法有兩種：一是背景音樂，二是插件形式。（1）為網(wǎng)頁添加背景音樂音頻文件可以以背景音樂的形式添加到網(wǎng)頁中，在預(yù)覽網(wǎng)頁時(shí)背景音樂會(huì)自動(dòng)播放，

21、其HTML標(biāo)簽如下圖所示?！啊贝肀尘耙魳?，是單標(biāo)簽，以 / 結(jié)束；“src”代表音頻文件的存放路徑；“l(fā)oop”代表音頻文件循環(huán)播放次數(shù)，可以輸入具體數(shù)值，例如數(shù)值等于“3”代表音頻文件會(huì)播放3次隨后停止，如果數(shù)值等于“-1”代表無限循環(huán)播放?；顒?dòng)1 在網(wǎng)頁中添加音頻與視頻2-1（2）通過插件添加音頻在Dreamweaver CS6還可以通過插件的方法在網(wǎng)頁文檔中添加音頻，在預(yù)覽頁面中會(huì)出現(xiàn)一個(gè)播放控件，通過該控件可以進(jìn)行暫停、播放、停止、調(diào)整音量等操作，其HTML標(biāo)簽如下圖所示?！啊贝聿寮?，是雙標(biāo)簽，以開始，結(jié)束；“src”代表音頻文件的存放路徑；“width”代表音頻控件的寬度，默認(rèn)單

22、位是像素；“height”代表音頻控件的高度，默認(rèn)單位是像素；“autostart”代表瀏覽網(wǎng)頁時(shí)音頻文件是否會(huì)自動(dòng)播放，如果值等于“true”那么音頻文件會(huì)自動(dòng)播放；如果值等于“false”那么音頻文件不會(huì)自動(dòng)播放，需要手動(dòng)播放；如果沒有“autostart”屬性，則默認(rèn)會(huì)自動(dòng)播放。值得注意的是，該屬性在IE瀏覽器下才起作用?；顒?dòng)1 在網(wǎng)頁中添加音頻與視頻2-13、網(wǎng)頁中添加視頻文件的方法瀏覽器可以播放的視頻格式有MP4、MOV、AVI、FLV等，可以通過插件方式添加視頻，其添加方法、HTML標(biāo)簽和音頻類似。此外，有FLV是Flash的視頻文件，在網(wǎng)頁中以SWF組件顯示，將光標(biāo)移至要插入FL

23、V視頻的位置，選擇“插入”菜單中選擇“媒體”中的FLV命令，打開“插入FLV”對話框，分為兩種視頻類型，主要區(qū)別如下：累進(jìn)式下載視頻：將FLV文件下載到網(wǎng)頁瀏覽者的硬盤上，然后進(jìn)行播放，如圖1所示：流視頻：對FLV視頻內(nèi)容進(jìn)行流式處理，緩沖一定時(shí)間確保流暢后在網(wǎng)頁上播放該部分內(nèi)容，如圖2所示： 圖1 圖2活動(dòng)1 在網(wǎng)頁中添加音頻與視頻2-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施通過該活動(dòng)，同學(xué)們掌握了制作豐富多彩的多媒體網(wǎng)頁技術(shù)，網(wǎng)頁中不僅單純有文字、圖片，而且還有令人賞心悅目的音頻、視頻，但要添加音頻、視頻過程中要注意文件格式、大小、瀏覽器兼容性等問題，保證網(wǎng)頁能正常瀏覽。活動(dòng)評價(jià)活動(dòng)2 在網(wǎng)頁中

24、添加Flash動(dòng)畫2-2如下圖所示，完成Flash動(dòng)畫和設(shè)置SWF文件透明背景效果頁面的制作，完成后分別以“task2-2-2.html”、“task2-2-3.html”為文件名保存到站點(diǎn)為“項(xiàng)目2-2”的“Task2-2”根文件夾中?；顒?dòng)要求活動(dòng)2 在網(wǎng)頁中添加Flash動(dòng)畫2-2在Dreamweaver CS6中，F(xiàn)lash動(dòng)畫將聲音、圖像和動(dòng)畫等內(nèi)容加入到一個(gè)文件中，能制作出炫酷的動(dòng)畫效果，而且文件容量較小，是網(wǎng)頁制作中上最流行的多媒體插件之一。Flash動(dòng)畫主要有兩種格式：.fla格式：Flash軟件創(chuàng)建的源文件，只能在Flash軟件中打開和編輯，不能在Dreamweaver或?yàn)g覽器

25、中打開。要在Dreamweave進(jìn)行添加Flash動(dòng)畫，需要在Flash軟件中將Flash源文件導(dǎo)出為.swf格式的文件。.swf格式：Flash軟件導(dǎo)出的電影文件，可以在瀏覽器中播放，也可以在Dreamweaver中預(yù)覽，但不能進(jìn)行編輯。.swf格式文件可以用Adobe Flash Player打開，瀏覽器必須安裝Adobe Flash Player插件。在Dreamweaver CS6中，其主要屬性如下圖所示。Flash ID：可以輸入SWF影片文件唯一的名稱；寬和高：默認(rèn)單位像素，設(shè)置SWF影片文件的尺寸；文件：指定SWF影片文件的路徑；循環(huán)：選中則連續(xù)播放，不選只播放一次停止；自動(dòng)播放

26、：選中瀏覽網(wǎng)頁時(shí)則會(huì)自動(dòng)播放該影片；垂直邊距、水平邊距：設(shè)置影片上下、左右空白區(qū)域的像素?cái)?shù)；品質(zhì)：有低品質(zhì)、自動(dòng)低品質(zhì)、自動(dòng)高品質(zhì)、高品質(zhì)4個(gè)選項(xiàng)；比例：設(shè)置SWF影片文件顯示的尺寸，有（默認(rèn)）全部顯示、無邊框、嚴(yán)格匹配3種選項(xiàng)；對齊：設(shè)置SWF影片文件在網(wǎng)頁中的對齊方式；Wmode：設(shè)置SWF影片文件是否透明顯示，默認(rèn)是不透明顯示。知識窗活動(dòng)2 在網(wǎng)頁中添加Flash動(dòng)畫2-2詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施通過該活動(dòng)，同學(xué)們簡單掌握了在網(wǎng)頁中插入Flash內(nèi)容和設(shè)置Flash文件的方法，F(xiàn)lash在網(wǎng)頁中常用于制作網(wǎng)頁導(dǎo)航條、廣告條、動(dòng)畫等，可以使網(wǎng)頁更炫酷生動(dòng)?；顒?dòng)評價(jià)任務(wù)3制作包含超鏈

27、接的網(wǎng)頁本任務(wù)可以分解為3個(gè)活動(dòng)：制作文字超鏈接、制作圖片熱點(diǎn)超鏈接、制作錨點(diǎn)鏈接?；顒?dòng)1 制作文字超鏈接3-1為網(wǎng)頁素材“task2-3-1.html”中的文本“華南地區(qū)”、“華東地區(qū)”、“華北地區(qū)”分別設(shè)定超鏈接，鏈接的網(wǎng)頁文件分別為“hndq.html”、“hddq.html”、“hbdq.html”，頁面打開目標(biāo)為新建頁面?；顒?dòng)要求活動(dòng)1 制作文字超鏈接3-1文本超鏈接是分配了目標(biāo)URL的字或短語，它可以通過“屬性”面板進(jìn)行設(shè)置，如下圖所示。知識窗點(diǎn)擊左邊的指向圖標(biāo)或右邊的瀏覽圖標(biāo)選取被鏈接目標(biāo)文本格式設(shè)置區(qū)活動(dòng)1 制作文字超鏈接3-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施通過本次活動(dòng)，掌握

28、文字超鏈接的創(chuàng)建方法，并能夠根據(jù)實(shí)際情況，設(shè)置超鏈接打開方式?；顒?dòng)評價(jià)活動(dòng)2 制作圖片熱點(diǎn)超鏈接3-2為網(wǎng)頁素材“task2-3-1.html”中的 “中國氣候類型”圖片設(shè)置4個(gè)熱點(diǎn)超鏈接，鏈接的網(wǎng)頁文件分別為“hndq.html”、“hddq.html”、“hxdq.html”、“hbdq.html”，頁面打開目標(biāo)為新建頁面?；顒?dòng)要求活動(dòng)2 制作圖片熱點(diǎn)超鏈接3-2圖片超鏈接是為整個(gè)圖片分配默認(rèn)超鏈接，也可以為圖片分配一個(gè)或多個(gè)熱點(diǎn)，即在圖片中劃分多個(gè)區(qū)域分配超鏈接，它可以通過“屬性”面板進(jìn)行設(shè)置，如下圖所示。（對整張圖片設(shè)置超鏈接，操作方法與以上設(shè)置文本超鏈接相同，這里就不再贅述）知識窗點(diǎn)

29、擊左邊的指向圖標(biāo)或右邊的瀏覽圖標(biāo)選取被鏈接目標(biāo)熱點(diǎn)形狀可以是圓形、矩形、不規(guī)則圖形?；顒?dòng)2 制作圖片熱點(diǎn)超鏈接3-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施通過本次活動(dòng)，掌握圖片熱點(diǎn)超鏈接的創(chuàng)建方法，在創(chuàng)建圖片熱點(diǎn)鏈接時(shí)，熱區(qū)的劃分可以是矩形、圓形及不規(guī)則的多邊開，對于劃分好的熱區(qū)可以再一次進(jìn)行調(diào)整操作?；顒?dòng)評價(jià)活動(dòng)3 制作錨點(diǎn)鏈接3-3在網(wǎng)頁適當(dāng)位置添加錨點(diǎn)命名，為“頁面導(dǎo)航列表”中的氣候類型設(shè)置錨點(diǎn)鏈接，完成后瀏覽時(shí)，可以通過點(diǎn)擊導(dǎo)航列表中的氣候類型，精準(zhǔn)定位到網(wǎng)頁中相應(yīng)段落?；顒?dòng)要求活動(dòng)3 制作錨點(diǎn)鏈接3-3錨點(diǎn)鏈接（也叫書簽鏈接）常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁，通過點(diǎn)擊命名錨點(diǎn)，不僅讓我們能指

30、向文檔，還能指向頁面里的特定段落，更能當(dāng)作“精準(zhǔn)鏈接”的便利工具，讓鏈接對象接近焦點(diǎn)，便于瀏覽者查看網(wǎng)頁內(nèi)容。它可以通過菜單欄中的命令來使用，如下圖所示。知識窗錨記命名可以使用字母、數(shù)字或字母與數(shù)字的混合形式輸入?；顒?dòng)3 制作錨點(diǎn)鏈接3-3詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施通過本次活動(dòng)，掌握錨記超鏈接的創(chuàng)建方法，在網(wǎng)頁中添加錨記超鏈接時(shí)，需先設(shè)置錨點(diǎn)，再設(shè)置錨記超鏈接，錨記超鏈接以“#”號開頭?；顒?dòng)評價(jià)項(xiàng)目3使用表格排版網(wǎng)頁由淺入深簡章易懂貼近實(shí)際WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程CONTENTS任務(wù)1 使用表格制作簡單校園新聞網(wǎng)頁任

31、務(wù)2 使用表格布局電子商務(wù)系新聞主頁任務(wù)1使用表格制作簡單校園新聞網(wǎng)頁本任務(wù)可以分解為2個(gè)活動(dòng)：表格基本操作；使用表格制作新聞網(wǎng)頁?；顒?dòng)1 表格基本操作1-1如下圖所示，使用表格完成比賽成績表的制作?；顒?dòng)要求活動(dòng)1 表格基本操作1-11、表格的構(gòu)成表格最基本的單位是單元格，由單元格組成行和列。單元格之間的間隔稱為單元格間距；單元格內(nèi)容與單元格邊框之間的間隔稱為單元格邊距（或填充）。表格邊框有明暗之分，可以設(shè)置粗細(xì)、顏色等屬性。單元格邊框也有明暗之分，可以設(shè)置顏色，但不可設(shè)置粗細(xì)屬性。如下圖所示是一個(gè)5行5列的表格。知識窗單元格行列單元格填充表格邊框單元格間距框單元格邊框活動(dòng)1 表格基本操作1-

32、12、表格的屬性如下圖所示，下面對表格“屬性”面板中的相關(guān)參數(shù)進(jìn)行說明：ID：指定表格的ID，以便在腳本中引用該表格。行：指定表格中的行數(shù)。列：指定表格中的列數(shù)。寬：指定表格的寬度。可選擇單位為像素，或占瀏覽器窗口寬度的百分比。填充：指定單元格內(nèi)容與單元格邊框間的距離。單位為像素。間距：指定相鄰單元格間的間隔。單位為像素。對齊：選擇表格相對于同一段落中的其他元素的顯示位置。邊框：指定表格邊框的寬度。單位為像素。類：對該表格應(yīng)用CSS類。清除列寬：從表格中刪除所有明確指定的列寬。清除行高：從表格中刪除所有明確指定的行高。將表格寬度轉(zhuǎn)換成像素：將表格中每列的寬度和整個(gè)表格的寬度都設(shè)為以像素為單位。

33、將表格寬度轉(zhuǎn)換成百分比：將表格中每列的寬度和整個(gè)表格的寬度都設(shè)為以百分比為單位。ID 清除列寬 將表格寬度轉(zhuǎn)換成像素 對齊 類清除行高 將表格寬度轉(zhuǎn)換成百分比 活動(dòng)1 表格基本操作1-13、表格的編輯（1）選擇表格選擇整個(gè)表格主要有以下幾種操作方法。單擊表格左上角或單擊表格中任一個(gè)單元格的邊框，如下方左圖所示。 將光標(biāo)移到表格內(nèi)，單擊文檔窗口左下角的標(biāo)簽“”，如上方右圖所示。選擇表格的行（或列）把光標(biāo)放在需要選擇的行左邊（或列上方）時(shí)，光標(biāo)變成黑色箭頭，單擊鼠標(biāo)左鍵，選中該行（或列），如下圖所示。 活動(dòng)1 表格基本操作1-1（2）合并與拆分單元格合并單元格選擇要合并的幾個(gè)單元格后，可以采取以下

34、幾種方法進(jìn)行合并單元格操作。單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“合并單元格”選項(xiàng)，如下方左圖所示。單擊“屬性”面板左下角“合并單元格”按鈕，如下方右圖所示。拆分單元格選擇要拆分的單元格后，可以采取以下幾種方法進(jìn)行拆分操作。單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“拆分單元格”選項(xiàng)，如下方左圖所示。單擊“屬性”面板左下角“拆分單元格”按鈕，如下方右圖所示。 活動(dòng)1 表格基本操作1-1（3）增加或刪除行（或列）增加行（或列）把光標(biāo)移到需要增加行（或列）的下面（右側(cè)）后，有以下幾種方法增加行（或列）：點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“插入行（或列）”選項(xiàng)，如下方左圖所

35、示。選擇 “修改”菜單欄下的“表格”選項(xiàng)，選擇“插入行（或列）”選項(xiàng)。刪除行（或列）把光標(biāo)移到需要?jiǎng)h除的行（或列）后，有以下幾種方法刪除該行（或列）：點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格”欄下的“刪除行（或列）”選項(xiàng)，如上方右圖所示。選擇 “修改”菜單欄下的“表格”選項(xiàng)，選擇“刪除行（或列）”選項(xiàng)?；顒?dòng)1 表格基本操作1-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施表格的基本操作類似于Word文檔中表格的操作，有基礎(chǔ)的同學(xué)會(huì)很快熟悉，但是都需要多操作多練習(xí)。活動(dòng)評價(jià)活動(dòng)2 使用表格制作簡單新聞網(wǎng)頁1-21、新建一個(gè)網(wǎng)頁文件，按要求插入表格。2、把素材中的文字、圖片合理布局到網(wǎng)頁中，并將網(wǎng)頁文件以“ta

36、sk3-1-2.html”為文件名保存到“項(xiàng)目3”站點(diǎn)根目錄下，最終效果如下圖所示?；顒?dòng)要求活動(dòng)2 使用表格制作簡單新聞網(wǎng)頁1-2單元格的屬性如下圖所示，下面對單元格“屬性”面板中的相關(guān)參數(shù)進(jìn)行說明：類：對該單元格應(yīng)用CSS類。ID：指定單元格的ID，以便在腳本中引用該單元格。鏈接：指定單元格內(nèi)對象的超鏈接地址。目標(biāo)：指定鏈接對象打開的位置。水平：設(shè)置單元格內(nèi)容在水平方向上的對齊方式。垂直：設(shè)置單元格內(nèi)容在垂直方向上的對齊方式。寬和高：設(shè)置被選擇單元格的寬和高。不換行：防止換行，從而使給定單元格中的所有文本都在一行上。標(biāo)題：將所選單元格格式設(shè)置為表格標(biāo)題單元格。背景顏色：設(shè)置單元格的背景顏色。

37、合并（拆分）按鈕：將所選單元格、行或列合并（拆分）為一個(gè)（兩個(gè)或多個(gè)）單元格。知識窗活動(dòng)2 使用表格制作簡單新聞網(wǎng)頁1-2詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施簡單的網(wǎng)頁只包含文字和圖片等幾種基本元素，使用表格進(jìn)行布局，操作難度較小，設(shè)置“對齊方式”等屬性就可以合理排布這些元素，效果明顯。活動(dòng)評價(jià)任務(wù)2使用表格布局電子商務(wù)系新聞主頁本任務(wù)可以分解為2個(gè)活動(dòng)：使用表格進(jìn)行整體布局；使用表格嵌套完成主頁布局?；顒?dòng)1 使用表格進(jìn)行整體布局2-1如下圖所示，完成基本主頁布局的制作，完成后以“task3-2-1.html”為文件名保存?；顒?dòng)要求活動(dòng)1 使用表格進(jìn)行整體布局2-11、網(wǎng)頁布局制作網(wǎng)頁首先要進(jìn)行基

38、本的網(wǎng)頁布局，以下是最為常用的頁面布局類型：上下型布局：上下排列網(wǎng)頁標(biāo)題和內(nèi)容，如下圖A所示。 左右型布局：左右排列網(wǎng)頁的導(dǎo)航欄和內(nèi)容，如下圖B所示。 “同”字型結(jié)構(gòu)布局：布局結(jié)構(gòu)與漢字“同”相似，如下圖C所示。 “國”字型布局：布局結(jié)構(gòu)與漢字“國”相似，如下圖D所示，是一些大型網(wǎng)站喜歡的布局類型。T型布局：布局結(jié)構(gòu)與英文大寫字母“T”相似，如下圖E所示，初學(xué)者容易上手。 POP布局：頁面布局像一張宣傳海報(bào)，以一張精美圖片作為頁面的設(shè)計(jì)中心。Flash布局：整個(gè)或大部分幅面的網(wǎng)頁是一個(gè)Flash動(dòng)畫。知識窗A B CD E 活動(dòng)1 使用表格進(jìn)行整體布局2-12、表格標(biāo)簽表格和單元格分別都有很多

39、屬性，有相同相似的，也有不同的。表格中的基本標(biāo)簽有、。一般描述整個(gè)表格屬性的標(biāo)簽放在中，描述單元格屬性的標(biāo)簽放在（行）、中。標(biāo)簽從屬關(guān)系由左向右依次遞減 。一個(gè)表格的代碼如下圖所示?；顒?dòng)1 使用表格進(jìn)行整體布局2-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施內(nèi)容較多的網(wǎng)頁，應(yīng)先構(gòu)思出整個(gè)頁面的布局，再動(dòng)手用表格搭建布局，最后填充內(nèi)容。切忌沒有規(guī)劃的隨意堆砌內(nèi)容?；顒?dòng)評價(jià)活動(dòng)2 使用表格嵌套完成主頁布局2-2在已完成的“活動(dòng)一”基礎(chǔ)上增加圖片、文字等對象，細(xì)化板塊結(jié)構(gòu)，最終完成整個(gè)主頁的制作，如下圖所示，并以文件名“task3-2-2.html”另存到“項(xiàng)目3”站點(diǎn)根目錄下。活動(dòng)要求活動(dòng)2 使用表格嵌套完

40、成主頁布局2-2表格的嵌套在復(fù)雜表格的布局中，一般不建議使用單元格的拆分和合并來實(shí)現(xiàn)，這樣對后期布局的修改往往會(huì)造成不利的影響。建議通過表格的嵌套或更好的Div布局來進(jìn)行。嵌套表格是指在表格的單元格中再插入表格，其寬度受所在單元格的寬度限制，可以很好地控制表格內(nèi)各個(gè)對象的位置。但嵌套層次不建議太多，否則有可能讓布局頁面過于復(fù)雜，可讀性差，還可能影響網(wǎng)頁的瀏覽速度。如下圖所示就是兩個(gè)表格的嵌套，從標(biāo)簽上很容易看出，表格2是嵌套在表格1內(nèi)的。知識窗活動(dòng)2 使用表格嵌套完成主頁布局2-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施表格的嵌套適用于內(nèi)容豐富，結(jié)構(gòu)復(fù)雜的網(wǎng)頁布局。但是嵌套操作有難度，鼠標(biāo)常常會(huì)選擇不

41、到需要操作的對象，所以請大家多使用標(biāo)簽進(jìn)行選擇?；顒?dòng)評價(jià)項(xiàng)目4制作包含表單的網(wǎng)頁由淺入深簡章易懂貼近實(shí)際WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程CONTENTS任務(wù)1 制作登錄表單任務(wù)2 制作調(diào)查問卷表單任務(wù)1制作登錄表單本任務(wù)分解為2個(gè)活動(dòng)：了解表單元素；使用表單制作QQ郵箱登錄頁?；顒?dòng)1 了解表單元素 1-1了解表單以及表單中常用的文本域、按鈕等表單元素的添加、屬性設(shè)置等使用方法；利用表單元素制作一個(gè)留言板頁面，效果如下圖所示?；顒?dòng)要求活動(dòng)1 了解表單元素 1-11、表單表單在頁面顯示的是一個(gè)紅色虛線框，如下圖所示，我們可以把它理解成

42、一個(gè)容器，我們可以向里面添加進(jìn)各種表單元素。在實(shí)際使用中，表單有時(shí)候可以不需要單獨(dú)添加，因?yàn)楫?dāng)我們在頁面中添加第一個(gè)表單元素時(shí)，系統(tǒng)也會(huì)自動(dòng)創(chuàng)建一個(gè)表單。知識窗活動(dòng)1 了解表單元素 1-12、表單屬性的設(shè)置表單屬性設(shè)置界面如下圖所示，常用屬性設(shè)置項(xiàng)目的含義是：動(dòng)作：指定用來處理表單數(shù)據(jù)的文件。方法：用于設(shè)置表單數(shù)據(jù)提交給服務(wù)器的方法，兩種方法有所區(qū)別。POST：是將表單數(shù)據(jù)嵌入到HTTP請求中傳輸，傳輸?shù)臄?shù)據(jù)量沒有限制，可用于長表單。GET：將數(shù)據(jù)附加到請求頁的URL中，傳輸?shù)淖址麛?shù)量有限制，是默認(rèn)的方式。編碼類型：用于指定提交給服務(wù)器的數(shù)據(jù)使用的編碼類型，默認(rèn)使用：application/x

43、-www-form-urlencoded，如果要?jiǎng)?chuàng)建文件上傳表單，則使用：multipart/form-data?；顒?dòng)1 了解表單元素 1-13、文本域文本域是表單中的一個(gè)基本元素，應(yīng)用的非常廣泛，用戶可以利用它輸入文本類的信息，如用戶名、密碼、留言等，輸入的內(nèi)容可以是字符、數(shù)字等符號。文本域包括：單行、多行、密碼三種類型，以適合不同的需求，三種類型之間可以互相轉(zhuǎn)換。 文本域的屬性欄設(shè)置如下圖所示： 文本域：設(shè)置該文本域在系統(tǒng)中的名稱，這個(gè)名字必須是唯一的。字符寬度：設(shè)置文本輸入框顯示時(shí)的寬度。最多字符數(shù)：設(shè)置在文本框中可以輸入的最大字符數(shù)。初始值：設(shè)置文本域在默認(rèn)初始狀態(tài)下顯示的字符信息。禁

44、用：勾選此項(xiàng)，文本域處于禁止?fàn)顟B(tài)，文本框呈灰色。只讀：勾選此項(xiàng)，文本域內(nèi)容只可查看，無法修改，可用于一些特殊情況下展示信息使用。類型：可設(shè)置文本域在三種狀態(tài)間轉(zhuǎn)換。默認(rèn)為單行，用于輸入少量的文本信息；設(shè)置為密碼狀態(tài)時(shí)，文本框中輸入的字符會(huì)被隱藏，呈現(xiàn)項(xiàng)目符號或星號；設(shè)置為多行時(shí)，文本框變?yōu)槎嘈校藭r(shí)文本字段轉(zhuǎn)成文本區(qū)域表單，可用于輸入較多文本內(nèi)容時(shí)使用，行數(shù)可以在屬性中設(shè)置。活動(dòng)1 了解表單元素 1-14、按鈕表單按鈕是一個(gè)非常重要的表單元素，當(dāng)用戶在輸入完數(shù)據(jù)后單擊按鈕可以將數(shù)據(jù)提交給服務(wù)器處理。按鈕的屬性欄參數(shù)設(shè)置如上圖所示： 值：可設(shè)置按鈕中的提示文字，默認(rèn)的有“提交”和“重置”，隨“動(dòng)

45、作”選項(xiàng)設(shè)置自動(dòng)變化，也可設(shè)置成其它信息動(dòng)作：該選項(xiàng)有三個(gè)參數(shù)選擇，選擇“提交表單”則可將表單信息上傳給服務(wù)器；選擇“重設(shè)表單”可以重置表單數(shù)據(jù)；如果想設(shè)置按鈕實(shí)現(xiàn)其它功能，可選擇“無”，再另外設(shè)置按鈕所關(guān)聯(lián)的腳本或程序?；顒?dòng)1 了解表單元素 1-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施在本次活動(dòng)中，小白順利地完成留言板的制作，并且知道可以通過設(shè)置“字符寬度”參數(shù)來調(diào)節(jié)文本框的顯示寬度以使網(wǎng)面中前后框的邊緣可以對齊一致，使頁面更加協(xié)調(diào)美觀?；顒?dòng)評價(jià)活動(dòng)2 制作QQ郵箱登錄頁1-2創(chuàng)建一個(gè)模擬QQ郵箱登錄頁面，效果如下圖所示，并將頁面以文件名：task4-1-2.html保存?；顒?dòng)要求活動(dòng)2 制作QQ

46、郵箱登錄頁1-21、密碼輸入表單制作在網(wǎng)頁制作過程中，在賬號登錄、用戶注冊等環(huán)節(jié)都會(huì)使用到密碼輸入項(xiàng)，在Dreamweave CS6中提供了幾種可以制作密碼輸入對象的工具，如文本字段、spry驗(yàn)證密碼，下面分別進(jìn)行介紹。（1）文本字段作密碼輸入項(xiàng)選中添加的文本域，在屬性欄中設(shè)置類型為“密碼”，如下圖所示： 當(dāng)設(shè)置文本域?yàn)槊艽a模式時(shí)，在框內(nèi)的字符顯示為小數(shù)點(diǎn)。這種方法制作密碼輸入框的特點(diǎn)是方法簡單，但對密碼的驗(yàn)證功能較少，只能限制密碼最大的位數(shù)。知識窗活動(dòng)2 制作QQ郵箱登錄頁1-2（2）用“spry 驗(yàn)證密碼”作密碼輸入項(xiàng)“spry 驗(yàn)證密碼”對象的密碼驗(yàn)證功能比前面方法要復(fù)雜一些，它的屬性欄

47、如下圖所示，通過合理設(shè)置參數(shù)，可以實(shí)現(xiàn)密碼位數(shù)控制、內(nèi)容控制、錯(cuò)誤信息提示等功能。屬性欄中參數(shù)設(shè)置介紹如下：最大/最小字符：設(shè)置密碼域中可輸入的總的最小字符數(shù)和最大字符數(shù)。最大/最小字母數(shù)：設(shè)定密碼中包含的小寫字母的個(gè)數(shù)范圍。最大/最小數(shù)字?jǐn)?shù)：設(shè)定密碼中包含的字?jǐn)?shù)的個(gè)數(shù)范圍。最大/最小大寫字母數(shù)：設(shè)定密碼中包含的大寫字母的個(gè)數(shù)范圍。最大/最小特殊字符數(shù)：設(shè)定密碼中包含的特殊字符的個(gè)數(shù)范圍。利用以上這幾個(gè)參數(shù)，用戶可以根據(jù)需要設(shè)定密碼的一些特殊要求，以達(dá)到強(qiáng)化密碼復(fù)雜性的目的，當(dāng)不符合要求時(shí)系統(tǒng)可以給出提示信息。活動(dòng)2 制作QQ郵箱登錄頁1-2“驗(yàn)證”選項(xiàng)設(shè)置何時(shí)對輸入的密碼進(jìn)行驗(yàn)證，可根需要設(shè)

48、置，它們的含義如下：Onblur：用戶離開輸入框。Onchange：輸入框內(nèi)容有修改。Onsubit：用戶提交信息。預(yù)覽狀態(tài)：可設(shè)置密碼域在不同狀態(tài)下的提示信息，點(diǎn)擊按鈕，選擇“強(qiáng)度無效”時(shí)可出現(xiàn)如下圖所示的選項(xiàng)及出現(xiàn)紅色字體的提示信息，此信息是當(dāng)用戶輸入的密碼不符合強(qiáng)度要求時(shí)系統(tǒng)自動(dòng)提示的，內(nèi)容可以修改；同樣在另外幾種狀態(tài)下也有相應(yīng)的提示信息出現(xiàn)。活動(dòng)2 制作QQ郵箱登錄頁1-22、復(fù)選框可以讓用戶在預(yù)先定義好的一個(gè)選項(xiàng)中進(jìn)行選擇。選中矩形的復(fù)選框，可以在屬性欄中設(shè)置屬性參數(shù)，如下圖所示： 選定值：設(shè)置選擇后的參數(shù)值。初始狀態(tài)：設(shè)置默認(rèn)打開頁面時(shí)選項(xiàng)的狀態(tài)，默認(rèn)是未選中狀態(tài)。活動(dòng)2 制作QQ

49、郵箱登錄頁1-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施出于安全性的考慮，網(wǎng)站一般要求輸入密碼時(shí)不直接顯示內(nèi)容，這時(shí)可以通過將密碼輸入框設(shè)置為密碼格式，則輸入內(nèi)容顯示為*號，如果對密碼的位數(shù)、格式等還有特別要求，則需要通過設(shè)置屬性欄中的相關(guān)參數(shù)實(shí)現(xiàn)?；顒?dòng)評價(jià)任務(wù)2制作調(diào)查問卷表單本任務(wù)分成兩個(gè)部分完成：制作調(diào)查問卷表單（一）；制作調(diào)查問卷表單（二）。活動(dòng)1 制作調(diào)查問卷表單（一）2-1了解掌握單選按鈕組、spry驗(yàn)證文本域等表單元素的添加、屬性設(shè)置的方法；制作調(diào)查問卷頁面，完成后效果如下圖所示，并將頁面以文件名：task4-2-1.html為文件名保存?；顒?dòng)要求活動(dòng)1 制作調(diào)查問卷表單（一）2-11、

50、單選按鈕組單選按鈕一般都是成組使用，可以讓用戶在預(yù)先定義好的可選項(xiàng)中選擇一項(xiàng)，這樣可以使收集的信息規(guī)范，便于信息的統(tǒng)計(jì)。單選按鈕組添加對話框如下圖所示，根據(jù)需求單擊+號或-號可增添加或刪除選項(xiàng)，設(shè)置好每一個(gè)項(xiàng)的標(biāo)簽符和值，每項(xiàng)的值不能相同。知識窗活動(dòng)1 制作調(diào)查問卷表單（一）2-12、spry驗(yàn)證文本域spry 驗(yàn)證文本域是帶有驗(yàn)證功能的文本域，它可以作為有特殊格式要求的文本輸入項(xiàng)使用。點(diǎn)擊spry驗(yàn)證文本域?qū)傩詸谥小邦愋汀卑粹o，彈出多種數(shù)據(jù)類型選項(xiàng)，根據(jù)“類型”項(xiàng)選擇的不同，“格式”項(xiàng)會(huì)出現(xiàn)相對應(yīng)的選項(xiàng)，用戶可以選擇和設(shè)置，如下圖所示：同時(shí)，在“預(yù)覽狀態(tài)”項(xiàng)可以設(shè)置不同狀態(tài)下的提示信息，如選

51、擇“無效格式”選項(xiàng)，文本框右邊會(huì)出現(xiàn)紅色文字的提示信息“格式無效”，如下圖所示，信息可以根據(jù)需要進(jìn)行修改。活動(dòng)1 制作調(diào)查問卷表單（一）2-13、復(fù)選框組如果需要在用戶在預(yù)先定義好的多個(gè)選項(xiàng)中進(jìn)行選擇，則可以使用復(fù)選框組，用戶可以從中選擇一項(xiàng)或多項(xiàng)。根據(jù)需求單擊+號或-號可增添加或刪除選項(xiàng)，設(shè)置好每一個(gè)項(xiàng)的標(biāo)簽符和值（注意各復(fù)選框所設(shè)定的值不允許相同），如下圖所示?；顒?dòng)1 制作調(diào)查問卷表單（一）2-1詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施網(wǎng)頁中除了可以通過文本框收集用戶輸入的信息外，還可以通過用戶對選項(xiàng)框進(jìn)行選擇來收集信息，當(dāng)需要在多個(gè)選項(xiàng)中選擇一個(gè)對象時(shí)，可以采用單選按鈕組來實(shí)現(xiàn)，若是需要在選項(xiàng)中

52、選擇多個(gè)對象時(shí)，可以使用復(fù)選框組實(shí)現(xiàn)。要注意在設(shè)置各標(biāo)簽的值時(shí)，須保證各選項(xiàng)不相同?；顒?dòng)評價(jià)活動(dòng)2 制作調(diào)查問卷表單（二）2-2了解文件域、選擇（列表/菜單）等表單元素的添加、屬性設(shè)置的方法；完善上一節(jié)中制作的調(diào)查問卷頁面，完成后效果如下圖所示，并將頁面以文件名：task4-2-2.html為文件名保存。活動(dòng)要求活動(dòng)2 制作調(diào)查問卷表單（二）2-21、列表與菜單列表與菜單均可以從預(yù)先定義的選項(xiàng)中選擇所需的對象，兩者適用于不同的情況。（1）菜單：在瀏覽器顯示時(shí)，只顯示一個(gè)可選項(xiàng)，效果如下圖所示： （2）列表：在瀏覽器中顯示時(shí)，顯示一個(gè)多行的滾動(dòng)列表，用戶可從列表中選擇1個(gè)或多個(gè)頂目，效果如下圖所

53、示：知識窗活動(dòng)2 制作調(diào)查問卷表單（二）2-22、文件域當(dāng)頁面中需要實(shí)現(xiàn)文件上傳功能時(shí)，可以使用文件域。文件域由一個(gè)文本框和一個(gè)“瀏覽”按鈕組成，可使用該按鈕選擇定位需要上傳的文件。文件域需要使用POST方法將文件從客戶端上傳到服務(wù)器?；顒?dòng)2 制作調(diào)查問卷表單（二）2-2詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施列表與菜單也是網(wǎng)頁中收集信息的一種方式，它和上一節(jié)中所學(xué)習(xí)的單選按鈕組與復(fù)選框組具有相似的功能，但在顯示界面有所不同，菜單類型是選擇一項(xiàng)，列表類型是可以選擇多個(gè)對象的。根據(jù)項(xiàng)目的特點(diǎn)，小白考慮后決定在“就讀專業(yè)“這個(gè)項(xiàng)目使用“菜單”項(xiàng)這種網(wǎng)頁元素來實(shí)現(xiàn)專業(yè)的選擇功能?；顒?dòng)評價(jià)項(xiàng)目5制作框架網(wǎng)頁由

54、淺入深簡章易懂貼近實(shí)際WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程CONTENTS任務(wù)1 利用框架制作成語故事集首頁任務(wù)1利用框架制作成語故事集首頁本任務(wù)可以分解為1個(gè)活動(dòng)：利用框架制作成語故事集頁面。活動(dòng)1 利用框架制作成語故事集首頁1-1運(yùn)用素材網(wǎng)頁“Y5-01A.html”、“Y5-01B.html”、“Y5-01C.html”、“Y5-01D.html”、“Y5-01E.html”、“Y5-01F.html”、“Y5-01G.html”制作一個(gè)關(guān)于成語故事的框架網(wǎng)頁，要求網(wǎng)頁有標(biāo)題，故事的題目以導(dǎo)航的形式表現(xiàn)，最終效果如下圖所示?；顒?dòng)

55、要求活動(dòng)1 利用框架制作成語故事集首頁1-11、框架網(wǎng)頁的創(chuàng)建依次單擊“插入”-“HTML”-“框架”菜單命令，在展開的下級菜單中可以根據(jù)需要選取合適的框架集，如下圖所示，這樣相應(yīng)的框架網(wǎng)頁就創(chuàng)建完成了。知識窗活動(dòng)1 利用框架制作成語故事集首頁1-12、框架網(wǎng)頁的保存每個(gè)框架包含一個(gè)文件，因此一個(gè)框架集會(huì)包含多個(gè)文件，在保存網(wǎng)頁時(shí)，要將整個(gè)網(wǎng)頁文檔都保存下來，下面我們以“上方及左側(cè)嵌套”框架為例介紹框架網(wǎng)頁的保存方法。（1）選擇“文件”-“保存全部”命令，整個(gè)框架邊框會(huì)出現(xiàn)一個(gè)陰影框，同時(shí)會(huì)彈出 “另存為”對話框，我們將其命名為“index.html”，表示整個(gè)框架集的名稱。（2）單擊“保存”

56、按鈕，彈出第二個(gè)“另存為”對話框，右邊框架內(nèi)側(cè)出現(xiàn)陰影，命名為“main.htlm”，表示右邊框架即主框架的文件名。（3） 單擊“保存”按鈕，依次彈出第3個(gè)和第4個(gè)“另存為”對話框，分別命名為“l(fā)eft.html” 和“top.html”，表示左邊框架和上方框架的文件名。如下圖所示?；顒?dòng)1 利用框架制作成語故事集首頁1-13、框架網(wǎng)頁的鏈接要在題目框架中使用鏈接打開正文框架中的文檔，必須設(shè)置鏈接目標(biāo)，在“屬性”面板中的“鏈接”下拉列表中選擇鏈接文檔應(yīng)在其中顯示的框架或窗口，如下圖所示。_blank：打開一個(gè)新窗口顯示目標(biāo)網(wǎng)頁。 _parent：目標(biāo)網(wǎng)頁的內(nèi)容在父框架窗口中顯示。 _self：目

57、標(biāo)網(wǎng)頁的內(nèi)容在當(dāng)前所在框架窗口中顯示。 _top：目標(biāo)網(wǎng)頁的內(nèi)容在最頂層框架窗口中顯示。mainFrame、leftFrame、topFrame：目標(biāo)網(wǎng)頁的內(nèi)容在新建的框架中顯示。活動(dòng)1 利用框架制作成語故事集首頁1-1詳細(xì)操作步驟請參閱教材。活動(dòng)實(shí)施本活動(dòng)主要介紹了框架網(wǎng)頁的制作，操作相對簡單。這里要特別注意的是，保存文件時(shí)產(chǎn)生的文件數(shù)量總是比設(shè)計(jì)的框架數(shù)量多1個(gè)，這個(gè)多出的文件可以稱之為“首頁”文件，即瀏覽框架類網(wǎng)頁時(shí)打開的文件。此外保存時(shí)建議對各框架文件進(jìn)行標(biāo)識性命名，如左框架文件可以命名為“l(fā)eft.html”，右框架文件可以命名為“right.html”，這樣可以避免在編輯時(shí)產(chǎn)生混淆

58、，提高工作效率。活動(dòng)評價(jià)項(xiàng)目6使用CSS美化網(wǎng)頁效果由淺入深簡章易懂貼近實(shí)際WANGYE ZHIZUO XIANGMU SHIXUN JIAOCHENG網(wǎng)頁制作項(xiàng)目實(shí)訓(xùn)教程CONTENTS任務(wù)1 初識CSS 任務(wù)2 使用CSS美化文本與圖像任務(wù)3 使用CSS布局網(wǎng)頁任務(wù)4 使用CSS設(shè)置背景任務(wù)1初識CSS本任務(wù)可以分解為2個(gè)活動(dòng)：使用行內(nèi)樣式美化網(wǎng)頁；使用內(nèi)嵌樣式表美化網(wǎng)頁?；顒?dòng)1 使用行內(nèi)樣式美化網(wǎng)頁1-1對網(wǎng)頁文件“task6-1.html”的主標(biāo)題進(jìn)行CSS樣式的設(shè)置及應(yīng)用，文件另存為task6-1-1.html，效果如下圖所示?；顒?dòng)要求活動(dòng)1 使用行內(nèi)樣式美化網(wǎng)頁1-11、CSS的設(shè)

59、置啟動(dòng)Dreamweaver CS6，按【Shift+F11】組合鍵或【窗口】菜單的【CSS樣式】可打“CSS樣式”面板設(shè)置CSS樣式表，如下圖所示。知識窗活動(dòng)1 使用行內(nèi)樣式美化網(wǎng)頁1-12、CSS的分類CSS層疊樣式表按可以分為三種：內(nèi)聯(lián)樣式表（行內(nèi)樣式表）、嵌入樣式表和外部樣式表。內(nèi)聯(lián)式樣式表：是在現(xiàn)有HTML元素的基礎(chǔ)上，用style屬性把特殊的樣式直接加入到那些控制信息的標(biāo)記中。嵌入式樣式表：通常包含在HTML，文檔的頭部，即head元素中，并且有一個(gè)專門的元素style來標(biāo)記這種樣式表。外部式樣式表：是指將樣式表作為一個(gè)獨(dú)立的文件保存在計(jì)算機(jī)上，這個(gè)文件以“.css”作為文件的擴(kuò)展

60、名。樣式在樣式表文件中定義和在嵌入式樣式表中的定義是一樣的，只是不再需要style元素。 在Dreamweaver CS6中，內(nèi)聯(lián)樣式表（行內(nèi)樣式表）可以直接通過屬性面板的CSS樣式屬性中的“目標(biāo)規(guī)則”-“新內(nèi)聯(lián)樣式”進(jìn)行創(chuàng)建，如圖A所示。內(nèi)嵌樣式表和外部樣式表一般都通過點(diǎn)擊“CSS樣式”面板的新建按鈕來創(chuàng)建，如圖所示。A B 活動(dòng)1 使用行內(nèi)樣式美化網(wǎng)頁1-1詳細(xì)操作步驟請參閱教材?；顒?dòng)實(shí)施使用行內(nèi)樣式美化網(wǎng)頁是HTML應(yīng)用CSS的第一種方法。使用HTML屬性style，將屬性和值放在style屬性中即可，適用于樣式?jīng)]有可復(fù)用性的場合。在實(shí)驗(yàn)操作中注意與直接設(shè)置HTML元素屬性的效果對比學(xué)習(xí)