網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目7：使用表格排版

布局網(wǎng)頁(yè)P(yáng)roject7項(xiàng)目7職場(chǎng)情境網(wǎng)站站點(diǎn)創(chuàng)建完成后，就該對(duì)表格有一個(gè)進(jìn)一步的了解了，此項(xiàng)學(xué)習(xí)對(duì)小艾來(lái)說(shuō)非常的陌生，她非?？是笥幸粋€(gè)人能夠幫助她對(duì)表格進(jìn)行相關(guān)知識(shí)的了解，從她身邊路過(guò)的同事凱程看到后，經(jīng)過(guò)詢(xún)問(wèn)，凱程告訴她表格是網(wǎng)頁(yè)排版設(shè)計(jì)的常用工具，表格在網(wǎng)頁(yè)中不僅可以用來(lái)排列數(shù)據(jù)，而且可以對(duì)頁(yè)面中的圖像、文本等元素進(jìn)行準(zhǔn)確的定位，使得頁(yè)面在形式上既豐富多彩又有條理，從而使頁(yè)面顯得更加整齊有序。本項(xiàng)目主要講述表格的創(chuàng)建、表格屬性的設(shè)置、表格的基本操作、表格的排序和導(dǎo)入表格式數(shù)據(jù)等。接下來(lái)，大家就跟隨小艾一同走進(jìn)Dreamweaver中的表格世界吧，和小艾一起進(jìn)行相關(guān)內(nèi)容的學(xué)習(xí)，在網(wǎng)頁(yè)設(shè)計(jì)的道路上展現(xiàn)自己的才華，好了，下面我們就一起來(lái)進(jìn)行學(xué)習(xí)和進(jìn)步吧！學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握插入表格和表格元素的方法掌握選擇表格元素的方法。掌握對(duì)表格基本操作的方法。掌握排序及整理表格內(nèi)容的方法。〓技能目標(biāo)〓學(xué)會(huì)插入表格。學(xué)會(huì)選擇表格元素。學(xué)會(huì)對(duì)表格的基本操作。學(xué)會(huì)對(duì)標(biāo)內(nèi)容進(jìn)行整理?！刭|(zhì)目標(biāo)〓打牢基礎(chǔ)、建萬(wàn)丈高樓，每一磚、每一個(gè)螺絲都是整個(gè)主體的關(guān)鍵。要想真正的掌握所學(xué)知識(shí)，就要了解實(shí)踐操作的重要性。CONTENTS任務(wù)1掌握插入表格和表格元素目錄任務(wù)2掌握選擇表格元素任務(wù)3掌握表格的基本操作任務(wù)4掌握排序及整理表格內(nèi)容綜合實(shí)戰(zhàn)—圖像中插入表格課后習(xí)題綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建表格布局網(wǎng)頁(yè)任務(wù)1掌握插入表格和表格元素在AdobeDreamweaver中，表格可以用于安排網(wǎng)頁(yè)文檔的整體布局，起著非常重要的作用。活動(dòng)1掌握插入表格在Dreamweaver中，表格可以用于制作簡(jiǎn)單的圖表，還可以用于安排網(wǎng)頁(yè)文檔的整體布局，起著非常重要的作用。在網(wǎng)頁(yè)中插入表格的方法非常簡(jiǎn)單，新建一個(gè)網(wǎng)頁(yè)文檔，將其進(jìn)行儲(chǔ)存后，執(zhí)行菜單欄中的“插入/Table”命令，打開(kāi)“Table”對(duì)話(huà)框，在對(duì)話(huà)框中將“行數(shù)”設(shè)置為2、“列”設(shè)置為1、“表格寬度”設(shè)置為“1024像素”、“邊框粗細(xì)”為0、“單元格邊距”為0、“單元格間距”為0，如圖所示。設(shè)置完畢單擊“確定”按鈕，插入表格，如圖

所示。實(shí)踐經(jīng)驗(yàn)：如果沒(méi)有明確指定單元格間距和單元格邊距的值，大多數(shù)瀏覽器都將單元格邊距設(shè)置為1，單元格間距設(shè)置為2來(lái)顯示表格。若要確保瀏覽器不顯示表格中的邊距和間距，可以將單元格邊距和間距設(shè)置為0。大多數(shù)瀏覽器按邊框設(shè)置為1顯示表格。任務(wù)1掌握插入表格和表格元素活動(dòng)2掌握設(shè)置表格屬性創(chuàng)建完表格后可以根據(jù)實(shí)際需要對(duì)表格的屬性進(jìn)行設(shè)置，如寬度、邊框、對(duì)齊等，也可只對(duì)某些單元格進(jìn)行設(shè)置。設(shè)置表格屬性之前首先要選中表格，在“屬性”面板中將顯示表格的屬性，并進(jìn)行相應(yīng)的設(shè)置。再不選取表格的情況下，單擊“屬性”面板中的“頁(yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”對(duì)話(huà)框，設(shè)置“上邊距”為0，“頁(yè)面字體”為“宋體”、“大小”為14px、“文本顏色”為“黑色”，如圖所示。之后選擇創(chuàng)建的表格，在“屬性”面板中設(shè)置各項(xiàng)參數(shù)，如圖所示。任務(wù)1掌握插入表格和表格元素活動(dòng)3掌握添加內(nèi)容到單元格表格建立以后，就可以向表格中添加各種元素了，如文本、圖像、表格等。在表格中添加文本就像在文檔中操作一樣，除了直接輸入文本，還可以先利用其他文本編輯器編輯文本，然后將文本拷貝到表格里，這也是在文檔中添加文本的一種簡(jiǎn)潔而快速的方法。將光標(biāo)置于單元格中，執(zhí)行菜單欄中的“插入/Image”命令，選擇一個(gè)素材圖像將其插入到第一行中，設(shè)置第二行的“高度”為100、“垂直”為“頂端”，如圖所示。將光標(biāo)放置到第二行中執(zhí)行菜單欄中的“插入/Table”命令，插入一個(gè)“寬度”為80%的3行2列表格，將其居中后設(shè)置每個(gè)單元格的高度都為30，，在每個(gè)單元格中分別輸入相應(yīng)的文字，如圖

所示。將光標(biāo)放置到單元格內(nèi)，設(shè)置“水平”為“居中對(duì)齊”，如圖所示。任務(wù)2掌握選擇表格元素活動(dòng)1掌握選擇表格要想對(duì)表格進(jìn)行編輯，那么首先選擇它，主要通過(guò)以下4種方法選取整個(gè)表格。將光標(biāo)置于表格的左上角，按住鼠標(biāo)的左鍵不放，拖曳鼠標(biāo)指針到表格的右下角，將整個(gè)表格中的單元格選中，單擊鼠標(biāo)的右鍵，在彈出的菜單中選擇“表格/選擇表格”命令，如圖所示。單擊表格邊框線(xiàn)的任意位置，即可選中表格，如圖所示。處理表格時(shí)經(jīng)常要選擇表格中的一個(gè)或多個(gè)單元格，或者選擇整行、整列單元格，這時(shí)可以根據(jù)具體情況使用不同的方法選擇單元格。任務(wù)2掌握選擇表格元素將光標(biāo)置于表格內(nèi)任意位置，執(zhí)行菜單欄中的“編輯/表格/選擇表格”命令，如圖所示。將光標(biāo)置于表格內(nèi)任意位置，單擊文檔窗口左下角的<table>標(biāo)簽，如圖

所示。任務(wù)2掌握選擇表格元素選擇表格的行與列也有兩種方法。鼠標(biāo)位于要選擇的行首或列頂，鼠標(biāo)指針形狀變?yōu)楹诩^時(shí)，單擊鼠標(biāo)左鍵即可選中行或列，如圖和圖

所示。活動(dòng)2掌握選擇行或列任務(wù)2掌握選擇表格元素按住鼠標(biāo)左鍵不放從左至右或者從上至下拖曳，即可選中行或者列，如圖和圖所示。任務(wù)2掌握選擇表格元素選擇表格中的單元格有兩種方式，一種是選擇單個(gè)單元格，另一種是選擇多個(gè)單元格。有如下多種方法。

按住“Ctrl”鍵，然后單擊要選中的單元格即可。

將光標(biāo)移到要選中的單元格中并單擊釋放，按住“Ctrl＋A”組合鍵，即可選中該單元格。

將光標(biāo)置于要選中的單元格中，執(zhí)行菜單欄中的“編輯/全選”命令，即可選中該單元格。

將光標(biāo)置于要選擇的單元格內(nèi)，單擊文檔窗口左下角的<td>標(biāo)簽可以將單元格選中。

按住“Shift”鍵不放并單擊選擇多個(gè)單元格中的第一個(gè)和最后一個(gè)，可以選擇多個(gè)相鄰的單元格，如圖所示。

按住“Ctrl”鍵不放單擊并選擇多個(gè)單元格，可以選擇多個(gè)相鄰或不相鄰的單元格，如所示?；顒?dòng)3掌握選擇單元格任務(wù)3掌握表格的基本操作創(chuàng)建了表格后，用戶(hù)要根據(jù)網(wǎng)頁(yè)設(shè)置對(duì)表格進(jìn)行處理，例如選擇表格和單元格、調(diào)整表格單元格的大小、添加或刪除行或列、拆分單元格、剪切/復(fù)制和粘貼單元格等，熟練掌握表格的基本操作，可以提高制作網(wǎng)頁(yè)的速度?；顒?dòng)1掌握調(diào)整表格高度和寬度在文檔中插入表格后，若想改變表格的高度和寬度可先選中該表格，在出現(xiàn)3個(gè)控制點(diǎn)后將鼠標(biāo)移動(dòng)到控制點(diǎn)上，當(dāng)鼠標(biāo)指針變成如圖下面三個(gè)圖所示的形狀時(shí)，按鼠標(biāo)左鍵并拖動(dòng)即可改變表格的高度和寬度，此時(shí)的高度與寬度的數(shù)值不是精確的。任務(wù)3掌握表格的基本操作活動(dòng)2掌握添加或刪除行或列可以執(zhí)行菜單欄中的“編輯/表格”命令中的子菜單命令，增加或減少行與列。增加行與列有以下方法。將光標(biāo)置于相應(yīng)的單元格中，執(zhí)行菜單欄中的“編輯/表格/插入行”命令，即可插入一行。將光標(biāo)置于相應(yīng)的位置，執(zhí)行菜單欄中的“編輯/表格/插入列”命令，即可在相應(yīng)的位置插入一列。將光標(biāo)置于相應(yīng)的位置，執(zhí)行“編輯/表格/插入行或列”命令，彈出“插入行或列”對(duì)話(huà)框，在對(duì)話(huà)框中進(jìn)行相應(yīng)的設(shè)置，如圖所示。單擊“確定”按鈕，即可在應(yīng)的位置插入行或列，如圖。任務(wù)3掌握表格的基本操作刪除行或列有以下幾種方法。

選中要?jiǎng)h除的行或列，執(zhí)行菜單欄中“編輯/表格/刪除行（刪除列）”命令，即可刪除行或列，如圖所示。

選中要?jiǎng)h除的行或列，按“Delete”鍵或按“BackSpace”鍵也可刪除行或列。任務(wù)3掌握表格的基本操作在使用表格的過(guò)程中，有時(shí)需要拆分單元格以達(dá)到自己所需的效果。拆分單元格就是將選中的表格單元格拆分為多行或多列，具體操作步驟如下。課堂實(shí)操—通過(guò)拆分單元格命令拆出1行3列任務(wù)3掌握表格的基本操作活動(dòng)3掌握合并單元格合并單元格就是將選中表格單元格的內(nèi)容合并到一個(gè)單元格。要合并單元格，首先將要合并的單元格選中，然后執(zhí)行菜單欄中的“編輯/表格/合并單元格”命令，將多個(gè)單元格合并成一個(gè)單元格如圖所示?；蜻x中單元格后單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“表格/合并單元格”選項(xiàng)，將多個(gè)單元格合并成一個(gè)單元格。實(shí)踐經(jīng)驗(yàn)：選擇多個(gè)相連的單元格后在“屬性”面板中單擊“合并所選單元格，使用跨度”按鈕

，它往往是創(chuàng)建復(fù)雜表格的重要步驟。操作起來(lái)簡(jiǎn)單方便。素養(yǎng)小課堂知識(shí)的積累可以更加增進(jìn)自己學(xué)習(xí)的信心，遇事不要?dú)怵H，要有克服各種困難的信心，只有充分而正確的運(yùn)用對(duì)學(xué)習(xí)的信心，才能將各個(gè)基礎(chǔ)知識(shí)中進(jìn)行積累，將其運(yùn)用到今后的工作和生活中，任何一項(xiàng)大的工程都是由無(wú)數(shù)個(gè)細(xì)小的結(jié)構(gòu)構(gòu)成，知道了這個(gè)道理就要認(rèn)真學(xué)好每一個(gè)網(wǎng)頁(yè)的小知識(shí)點(diǎn)，只有這樣才能最終完成一項(xiàng)宏偉的網(wǎng)頁(yè)作品。

任務(wù)3掌握表格的基本操作活動(dòng)4掌握清除表格的寬度/高度可用來(lái)清除單元格中多余的空白，讓行寬與列高和單元格的內(nèi)容剛好吻合，例如插入的圖片或鍵入的文字比單元格稍微小一點(diǎn)，此時(shí)就需要對(duì)表格進(jìn)行清除寬度和高度的操作。選擇整個(gè)表格，在屬性欄中單擊“清除列寬”按鈕

，此時(shí)會(huì)發(fā)現(xiàn)表格寬度會(huì)自動(dòng)與圖像相吻合，如圖所示。任務(wù)3掌握表格的基本操作活動(dòng)4掌握清除表格的寬度/高度選擇整個(gè)表格，在屬性欄中單擊“清除行高”按鈕

，此時(shí)會(huì)發(fā)現(xiàn)表格寬度會(huì)自動(dòng)與圖像相吻合，如圖所示。任務(wù)3掌握表格的基本操作活動(dòng)5掌握調(diào)整邊距/間距/邊框邊距、間距及邊框等距離是屬于表格的整體設(shè)置，因此設(shè)置前要先選取整個(gè)表格。之后在“屬性”面板中設(shè)置“CellPad”為0、“CellSpace”為6、“Border”為6，效果如圖所示。任務(wù)4掌握排序及整理表格內(nèi)容活動(dòng)1掌握導(dǎo)入成績(jī)單為了更加快速而有效地處理網(wǎng)頁(yè)中的表格和內(nèi)容，Dreamweaver提供了多種自動(dòng)處理功能，包括導(dǎo)入表格數(shù)據(jù)和排序表格等。Dreamweaver中導(dǎo)入表格式數(shù)據(jù)功能夠根據(jù)素材來(lái)源的結(jié)構(gòu)，為網(wǎng)頁(yè)自動(dòng)建立相應(yīng)的表格，并自動(dòng)生成表格數(shù)據(jù)。因此，當(dāng)遇到大篇幅的表格內(nèi)容編排，而手頭又擁有相關(guān)表格式素材時(shí)，便可使網(wǎng)頁(yè)編排工作輕松得多。在文本文件中的數(shù)據(jù)，我們可以將其快速的導(dǎo)入到網(wǎng)頁(yè)文檔中，下面通過(guò)實(shí)例講述如何導(dǎo)入表格數(shù)據(jù)。打開(kāi)需要導(dǎo)入成績(jī)單的網(wǎng)頁(yè)文檔，如圖所示。將文檔中的表格進(jìn)行居中對(duì)齊，效果如圖所示。任務(wù)4掌握排序及整理表格內(nèi)容將鼠標(biāo)指針?lè)胖玫降?行第2列中，在“屬性”面板中設(shè)置“垂直”為“頂端”，按“Enter”鍵進(jìn)行換行，效果如圖所示。執(zhí)行菜單欄中的“文件/“導(dǎo)入/表格式數(shù)據(jù)”命令，彈出“導(dǎo)入表格式數(shù)據(jù)”對(duì)話(huà)框，如圖所示。任務(wù)4掌握排序及整理表格內(nèi)容在對(duì)話(huà)框中單擊“數(shù)據(jù)文件”文本框右邊的“瀏覽”按鈕，彈出“打開(kāi)”對(duì)話(huà)框，在對(duì)話(huà)框中選擇數(shù)據(jù)文件，如圖所示。單擊“打開(kāi)”按鈕，添加到文本框中，在對(duì)話(huà)框中的“定界符”下拉列表中選擇“Tab”選項(xiàng)，“表格寬度”選中“匹配內(nèi)容”單選按鈕，如圖

所示。實(shí)踐經(jīng)驗(yàn)：在導(dǎo)入數(shù)據(jù)表格時(shí)注意定界符必須要根據(jù)文檔中的符號(hào)進(jìn)行對(duì)應(yīng)，否則可能會(huì)造成表格格式的混亂。任務(wù)4掌握排序及整理表格內(nèi)容單擊“確定”按鈕，導(dǎo)入表格式數(shù)據(jù)，導(dǎo)入后將表格居中，效果如圖所示。保存文檔，按F12鍵在瀏覽器中預(yù)覽，效果如圖

所示。任務(wù)4掌握排序及整理表格內(nèi)容活動(dòng)2掌握排序表格排序表格的主要功能是針對(duì)具有格式數(shù)據(jù)的表格而言，并根據(jù)表格列表中的數(shù)據(jù)來(lái)排序的。導(dǎo)入的數(shù)據(jù)以學(xué)號(hào)進(jìn)行了排序，下面我們就將當(dāng)前的數(shù)據(jù)重新進(jìn)行一下排序，按照名次進(jìn)行重新的排序，選中表格，執(zhí)行菜單欄中的“編輯/表格/排序表格”命令，彈出“排序表格”對(duì)話(huà)框，在對(duì)話(huà)框中將“排序按”設(shè)置為“列8”，“順序”設(shè)置為“按數(shù)字順序”，在下拉列表中選擇“升序”，如圖所示。設(shè)置完畢單擊“確定”按鈕，對(duì)表格進(jìn)行重新排序，如圖

所示。實(shí)踐經(jīng)驗(yàn)：如果表格中含有合并或拆分的單元格，則無(wú)法使用表格排序功能。綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建表格布局網(wǎng)頁(yè)實(shí)戰(zhàn)訓(xùn)練要求掌握新建文檔并進(jìn)行保存創(chuàng)建表格調(diào)整表格大小插入圖片鍵入文字并設(shè)置文字實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目7/Images/7-5_01、7-5_02、7-5_03、7-5_04、7-5_05、7-5_06，如圖所示。任務(wù)單項(xiàng)目編號(hào)7-1項(xiàng)目名稱(chēng)綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建表格布局網(wǎng)頁(yè)時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)中通過(guò)布局表格制作網(wǎng)頁(yè)的一般流程課堂實(shí)踐：設(shè)計(jì)主題，新建、插入表格、嵌套表格、設(shè)置文本大小顏色，設(shè)置以背景形式插入圖片、鍵入或復(fù)制粘貼文字，完成一個(gè)網(wǎng)頁(yè)文字區(qū)域的制作?？己藰?biāo)準(zhǔn)：新建文檔并進(jìn)行儲(chǔ)存。10分插入表格。10分嵌套表格10以背景形式插入圖片10鍵入文字10內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建表格布局網(wǎng)頁(yè)實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目7/7-5，如圖所示。綜合實(shí)戰(zhàn)—圖像中插入表格實(shí)戰(zhàn)訓(xùn)練要求掌握新建文檔并進(jìn)行保存創(chuàng)建表格調(diào)整表格大小插入圖片鍵入文字并設(shè)置文字實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目7/Images/7-6_01、7-6_02、7-6_03、7-6_04，如圖所示。任務(wù)單項(xiàng)目編號(hào)7-2項(xiàng)目名稱(chēng)綜合實(shí)戰(zhàn)—圖像中插入表格

時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)中通過(guò)布局表格制作網(wǎng)頁(yè)的一般流程課堂實(shí)踐：簡(jiǎn)潔音樂(lè)主題，新建、插入表格、嵌套表格、設(shè)置文本大小顏色，設(shè)置以背景形式插入圖片、鍵入或復(fù)制粘貼文字，完成一個(gè)網(wǎng)頁(yè)文字區(qū)域的制作。考核標(biāo)準(zhǔn)：新建文檔并進(jìn)行儲(chǔ)存。10分插入表格、嵌套表格。10分以背景形式插入圖片10分鍵入文字10分設(shè)置對(duì)齊文字和表格10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—圖像中插入表格實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目7/7-6，如圖所示。課后習(xí)題一．判斷題1.()表格中垂直的排行稱(chēng)為「行」，水平的排行稱(chēng)為「列」。2.()表格中的每一個(gè)方格，一般稱(chēng)之為「單元格」。3.()要?jiǎng)?chuàng)建名次數(shù)據(jù)時(shí)，可使用排序表格功能。4.()表格和表格之間的距離，稱(chēng)為「邊距」。5.()Dreamweaver必須借助其它軟件才能美化表格格式。6.()插入表格后，單元格中還可以再插入表格。

二．選擇題1.()下行何者不是表格所具有的功能？(A)調(diào)整行寬行高(B)單元格的拆分與合并(C)自由移動(dòng)表格(D)排序表格數(shù)據(jù)

2.()導(dǎo)入表格式數(shù)據(jù)支持哪些文件格式？(A)純文字文件(B)Excel檔(C)Word檔(D)以上皆是

3.()要導(dǎo)入Excel的數(shù)據(jù)時(shí)，可執(zhí)行：(A)“導(dǎo)入/Excel文件”(B)“文件/附加/Excel文件”(C)“文件/讀取/Excel文件”(D)“文件/導(dǎo)入/Excel文件”

4.()新建表格時(shí)，下行何者無(wú)法做設(shè)置？(A)設(shè)置表格顏色(B)設(shè)置表格寬度(C)設(shè)置單元格邊距(D)設(shè)置行行數(shù)

課后習(xí)題

5.()想要重設(shè)表格的行數(shù)及行數(shù)，必須從哪里做設(shè)置？(A)屬性面板(B)插入面板(C)文件面板(D)表格面板

三．填充題1.表格的寬度有

及

兩種設(shè)置。2.執(zhí)行菜單欄中的“文件/導(dǎo)入/

”命令，可以導(dǎo)入txt格式的文字文件。3.若要讓表格數(shù)據(jù)依序排行，可使用

功能。4.要對(duì)單元格進(jìn)行不連續(xù)選取時(shí)，必要搭配

鍵來(lái)選取。網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目8：掌握運(yùn)用插入

及創(chuàng)建鏈接Project8項(xiàng)目8職場(chǎng)情境文本與表格在網(wǎng)頁(yè)的學(xué)習(xí)中已經(jīng)完成了，一個(gè)能夠吸引人的網(wǎng)頁(yè)單單靠表格的布局精彩的文字是不能夠成為一個(gè)合格的網(wǎng)頁(yè)的，在網(wǎng)頁(yè)中創(chuàng)建鏈接、插入圖像、插入多媒體，這些能夠吸引人的圖像和視頻能夠把當(dāng)前的網(wǎng)頁(yè)襯托的更加非富多彩，如何才能在網(wǎng)頁(yè)中創(chuàng)建鏈接、插入圖像等操作是小艾非常想要知道的，在她對(duì)著計(jì)算機(jī)發(fā)呆的時(shí)候，凱程來(lái)到了她的身邊，告訴小艾，超級(jí)鏈接、漂亮的圖片才是網(wǎng)頁(yè)的靈魂，圖像有著豐富的色彩和表現(xiàn)形式，恰當(dāng)?shù)乩脠D像可以加深用戶(hù)對(duì)網(wǎng)站的印象。這些圖像是文本的說(shuō)明及解釋?zhuān)梢允刮谋厩逦鬃x、更加具有吸引力，目前的網(wǎng)頁(yè)也不再是單一的文本，圖像、聲音和動(dòng)畫(huà)等多媒體技術(shù)更多地應(yīng)用到了網(wǎng)頁(yè)之中。在網(wǎng)絡(luò)中，超級(jí)鏈接是將所有數(shù)據(jù)串連起來(lái)的基礎(chǔ)。借由超級(jí)鏈接，就可隨心所欲的暢游網(wǎng)絡(luò)世界而不受時(shí)空的限制，如果把網(wǎng)站比喻為住家，那么超級(jí)鏈接就是四通八達(dá)的道路系統(tǒng)，將整個(gè)網(wǎng)絡(luò)世界架構(gòu)起來(lái)。接下來(lái)，大家就跟隨小艾一同走進(jìn)Dreamweaver中的插入圖像、鼠標(biāo)經(jīng)過(guò)圖像、插入多媒體及其創(chuàng)建超級(jí)鏈接。和小艾一起進(jìn)行相關(guān)內(nèi)容的學(xué)習(xí)，在網(wǎng)頁(yè)設(shè)計(jì)的道路上展現(xiàn)自己的才華，好了，下面我們就一起來(lái)進(jìn)行學(xué)習(xí)和進(jìn)步吧！。Project8項(xiàng)目8學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在網(wǎng)頁(yè)中插入圖像的方法。掌握以背景的方式插入圖像。掌握如何在Dreamweaver中編輯圖像。掌握鼠標(biāo)經(jīng)過(guò)圖像的方法。掌握插入聲音及視頻。掌握插入超級(jí)鏈接。掌握檢查鏈接的方法。〓技能目標(biāo)〓學(xué)會(huì)插入圖像。學(xué)會(huì)以背景的方式插入圖像。學(xué)會(huì)編輯圖像。學(xué)會(huì)插入超級(jí)鏈接學(xué)會(huì)創(chuàng)建文件下載鏈接〓素質(zhì)目標(biāo)〓要學(xué)會(huì)將各個(gè)元素在網(wǎng)頁(yè)的整體中進(jìn)行運(yùn)用，要知道螺絲雖小可定萬(wàn)斤的道理。不要只會(huì)學(xué)不會(huì)用，要做到實(shí)踐與知識(shí)共同進(jìn)步。對(duì)自己要有信心，信心是萬(wàn)事開(kāi)頭的基石，要做到有信心、有能力的全新工作者。CONTENTS任務(wù)1掌握網(wǎng)頁(yè)中插入圖像目錄任務(wù)2掌握Dreamweaver中圖片編輯任務(wù)3掌握插入鼠標(biāo)經(jīng)過(guò)圖像任務(wù)4掌握插入聲音及多媒體綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建鼠標(biāo)經(jīng)過(guò)并設(shè)置鏈接課后習(xí)題任務(wù)5了解超鏈接概念任務(wù)6掌握各種鏈接方式任務(wù)1掌握網(wǎng)頁(yè)中插入圖像圖像是網(wǎng)頁(yè)構(gòu)成中最重要的元素之一，美觀的圖像會(huì)為網(wǎng)站增添生命力，同時(shí)也加深用戶(hù)對(duì)網(wǎng)站風(fēng)格的印象?；顒?dòng)1掌握插入圖像在Dreamweaver中創(chuàng)建表格并設(shè)置表格的寬度與高度后，將光標(biāo)放置到其中的一個(gè)單元格，執(zhí)行菜單欄中的“插入/Image”命令，打開(kāi)“選擇圖像源文件”對(duì)話(huà)框，在對(duì)話(huà)框中找到需要插入的圖像，如圖所示。設(shè)置完畢單擊“確定”按鈕，會(huì)將選擇的圖像插入到鼠標(biāo)指針?biāo)诘谋砀裰?，如圖所示。將鼠標(biāo)指針?lè)胖玫降?行中，再次選擇一個(gè)圖像將其插入到表格中，如圖所示。。任務(wù)1掌握網(wǎng)頁(yè)中插入圖像在Dreamweaver中插入的圖像不但可以直接插入，還可以以背景的形式插入，此時(shí)圖像就相當(dāng)于單元格中的背景，在單元格中還可以再次插入圖像和文本，背景插入過(guò)程如下。課堂實(shí)操—通過(guò)background插入背景圖片任務(wù)1掌握網(wǎng)頁(yè)中插入圖像圖像是網(wǎng)頁(yè)構(gòu)成中最重要的元素之一，美觀的圖像會(huì)為網(wǎng)站增添生命力，同時(shí)也加深用戶(hù)對(duì)網(wǎng)站風(fēng)格的印象?；顒?dòng)2掌握將圖像設(shè)置為整個(gè)網(wǎng)頁(yè)的背景背景圖像有“單一圖像”及“拼貼”二種效果類(lèi)型，雖然使用“拼貼”方式的圖像文檔容量小，不過(guò)效果卻較為單調(diào)。若要強(qiáng)調(diào)站點(diǎn)的風(fēng)格，則可以考慮“單一圖像”。默認(rèn)情況下被當(dāng)成網(wǎng)頁(yè)背景的圖像是以“拼貼”方式顯示的，在“屬性”面板中單擊“頁(yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”面板，單擊“背景圖像”后面的“瀏覽”按鈕，可以選擇作為背景的圖像，如圖所示。設(shè)置完成單擊“確定”按鈕，可以看到當(dāng)前網(wǎng)頁(yè)的背景以背景圖像進(jìn)行顯示，如圖所示。任務(wù)1掌握網(wǎng)頁(yè)中插入圖像在預(yù)設(shè)情況下Dreamweaver會(huì)將指定的圖像文件自動(dòng)拼貼填滿(mǎn)網(wǎng)頁(yè)畫(huà)面，不過(guò)各位也可以根據(jù)頁(yè)面效果的需要來(lái)調(diào)整拼貼模式，在“屬性”面板中單擊“頁(yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”面板，在這里可以設(shè)置圖像顯示的不同方式，如圖所示。。下表8-1就是各種拼貼模式的效果說(shuō)明，一起來(lái)了解拼貼方式。設(shè)置類(lèi)型圖像排列方式畫(huà)面預(yù)覽No-repeat不重復(fù)不會(huì)將圖像圖片拼貼填滿(mǎn)整個(gè)網(wǎng)頁(yè)畫(huà)面，所以只會(huì)在左上角看到背景圖像。Repeat重復(fù)會(huì)將圖像圖片以拼貼方式填滿(mǎn)整個(gè)網(wǎng)頁(yè)畫(huà)面。Repeat-x水平重復(fù)會(huì)將圖像圖片以水平方式進(jìn)行拼貼，所以只會(huì)在頁(yè)面最上方看到背景圖像。Repeat-y垂直重復(fù)會(huì)將圖像圖片以垂直方式進(jìn)行拼貼，所以只會(huì)在頁(yè)面最左方看到背景圖像。任務(wù)2掌握Dreamweaver中圖片編輯雖然圖片及效果在網(wǎng)站設(shè)計(jì)初期就已經(jīng)決定好，不過(guò)最后在利用Dreamweaver進(jìn)行整合時(shí)，還是有可能做一些修改或調(diào)整，以配合整個(gè)網(wǎng)頁(yè)的風(fēng)格。要調(diào)整或編修圖片屬性，通常都是通過(guò)“屬性”面板來(lái)處理，以下針對(duì)Dreamweaver所提供的各項(xiàng)功能來(lái)為各位做個(gè)說(shuō)明?；顒?dòng)1掌握調(diào)整圖片大小圖片加入到Dreamweaver后，如果發(fā)現(xiàn)圖片尺寸需要縮小，可以透過(guò)以下方式做修正。點(diǎn)擊插入的圖片后，在“屬性”面板中改變圖片的尺寸來(lái)做修正，如圖所示。選擇插入的圖像后，將鼠標(biāo)放置到圖像的右下角控制點(diǎn)上，按下鼠標(biāo)進(jìn)行拖曳，此時(shí)可以看到圖像會(huì)跟隨拖曳來(lái)改變大小，即可選中表格，如所示。任務(wù)2掌握Dreamweaver中圖片編輯為圖片加上邊框可強(qiáng)化圖像效果，不過(guò)必須新增CSS樣式才能加入圖片邊框，還可以通過(guò)“CSS設(shè)計(jì)器”面板來(lái)完成。課堂實(shí)操—通過(guò)CSS設(shè)計(jì)器為圖片添加邊框任務(wù)2掌握Dreamweaver中圖片編輯活動(dòng)2掌握加入方塊陰影圖片除了可以添加邊框以外，各位也可以輕松為圖片加入陰影喔！只要在“box-shadow”的屬性上設(shè)置陰影的垂直/水平偏移值、模糊半徑、擴(kuò)散半徑或色彩，如圖所示。此時(shí)只要就可以透過(guò)“實(shí)時(shí)視圖”功能看到效果，如圖所示。此陰影不需要再通過(guò)繪圖軟件來(lái)處理。任務(wù)2掌握Dreamweaver中圖片編輯活動(dòng)3掌握設(shè)置圖片對(duì)齊當(dāng)段落文字及圖片并存時(shí)，如果希望文字能夠沿著圖片右側(cè)或左側(cè)依序排列，那么可利用鼠標(biāo)右鍵來(lái)選擇“對(duì)齊”的方式，如圖為選擇“右對(duì)齊”；還可以在“CSS設(shè)計(jì)器”中進(jìn)行對(duì)齊設(shè)置，選擇圖片后，在“屬性”中選擇“布局”按鈕

，在下來(lái)列表中設(shè)置“float”，以此來(lái)設(shè)置對(duì)其方式，如圖所示。任務(wù)2掌握Dreamweaver中圖片編輯選擇“左對(duì)齊”或“右對(duì)齊”的方式后，會(huì)形成文繞圖的編排效果，這是一般網(wǎng)頁(yè)上?？吹降木幣欧绞剑Ч鐖D所示。。任務(wù)3掌握插入鼠標(biāo)經(jīng)過(guò)圖像在Dreamweaver中插入圖像還可以通過(guò)鼠標(biāo)經(jīng)過(guò)時(shí)改變?yōu)榱硪粡垐D片，插入過(guò)程如下：。課堂實(shí)操—通過(guò)鼠標(biāo)經(jīng)過(guò)圖像命令設(shè)置鼠標(biāo)經(jīng)過(guò)效果任務(wù)3掌握插入鼠標(biāo)經(jīng)過(guò)圖像實(shí)踐經(jīng)驗(yàn)：如果覺(jué)得在Dreamweaver根據(jù)切片創(chuàng)建表格的方法比較麻煩，我們可以在“將優(yōu)化結(jié)果儲(chǔ)存為”對(duì)話(huà)框中，設(shè)置“格式”為HTML和圖像，如圖所示。之后在Dreamweaver中直接將HTML直接打開(kāi)，然后在對(duì)圖像進(jìn)行鼠標(biāo)經(jīng)過(guò)的圖像替換即可。素養(yǎng)小課堂萬(wàn)丈高樓是由每一塊磚組成的，缺少任意的一塊，建設(shè)的高樓就不會(huì)穩(wěn)，就有倒塌的危險(xiǎn)。網(wǎng)頁(yè)制作就是運(yùn)用了這個(gè)道理，匯聚之前學(xué)過(guò)的小知識(shí)，將其運(yùn)用到整體的網(wǎng)頁(yè)制作中，要知道每個(gè)小知識(shí)都是網(wǎng)頁(yè)不可或缺組成部分。任務(wù)4掌握插入聲音及多媒體在網(wǎng)頁(yè)中可以添加各種不同格式的聲音文件，但在加入聲音文件之前要考慮用途、文件大小、聲音品質(zhì)和瀏覽器差別等因素，多媒體文件是當(dāng)前網(wǎng)頁(yè)中更離不開(kāi)一項(xiàng)內(nèi)容?；顒?dòng)1掌握關(guān)于音頻文件格式音頻文件格式常見(jiàn)的特點(diǎn)有：要在計(jì)算機(jī)內(nèi)播放或是處理音頻文件，也就是要對(duì)聲音文件進(jìn)行數(shù)、模轉(zhuǎn)換，這個(gè)過(guò)程同樣由采樣和量化構(gòu)成，人耳所能聽(tīng)到的聲音，最低的頻率是20Hz，最高頻率是20KHz，20KHz以上人耳是聽(tīng)不到的，因此音頻文件格式的最大帶寬是20KHz，故而采樣速率需要介于40~50KHz之間，而且對(duì)每個(gè)樣本需要更多的量化比特?cái)?shù)。音頻數(shù)字化的標(biāo)準(zhǔn)是每個(gè)樣本16位-96dB的信噪比，采用線(xiàn)性脈沖編碼調(diào)制PCM，每一量化步長(zhǎng)都具有相等的長(zhǎng)度。在音頻文件的制作中，正是采用這一標(biāo)準(zhǔn)。音頻格式日新月異，常見(jiàn)的音頻格式包括：CD格式、WAVE（*.WAV）、AIFF、AU、MP3、MIDI、WMA、RealAudio、VQF、OggVorbis、AAC、APE。任務(wù)4掌握插入聲音及多媒體通過(guò)提示，可以在代碼視圖中插入代碼。在輸入某些字符時(shí)，將顯示一個(gè)列表，列出完成條目所需要的選項(xiàng)。下面通過(guò)代碼提示講述背景音樂(lè)的插入，具體操作步驟如下。課堂實(shí)操—通過(guò)bgsound插入背景音樂(lè)任務(wù)4掌握插入聲音及多媒體實(shí)踐經(jīng)驗(yàn)：瀏覽器可能需要某種附加的音頻支持來(lái)播放聲音，因此，具有不同插件的不同瀏覽器所播放聲音的效果通常會(huì)有所不同任務(wù)4掌握插入聲音及多媒體活動(dòng)1掌握插入HTML5VideoHTML5目前是網(wǎng)頁(yè)發(fā)展的趨勢(shì)，將HTML5的視頻輕松添加到網(wǎng)站上，可讓網(wǎng)站具有娛樂(lè)效果。目前HTML5支持的格式包括*.ogg、*.mp4、*.m4v、*.webm、*.ogv、*.3gp等格式，打開(kāi)一個(gè)網(wǎng)頁(yè)后，將鼠標(biāo)指針?lè)胖玫街虚g的一個(gè)表格中，設(shè)置“水平”為“居中對(duì)齊”、“垂直”為“居中”，如圖所示。執(zhí)行菜單欄中“插入/HTML/HTML5Video”命令，頁(yè)面自動(dòng)加入此對(duì)象，請(qǐng)點(diǎn)選該對(duì)象后，在“屬性”面板中的“源”后面單擊“瀏覽”按鈕，如圖所示。任務(wù)4掌握插入聲音及多媒體單擊后，系統(tǒng)會(huì)打開(kāi)“選擇視頻”對(duì)話(huà)框，找到一個(gè)“.mp4”格式的視頻，如圖所示。選擇視頻后單擊“確定”按鈕，就可以將視頻插入到網(wǎng)頁(yè)中，此時(shí)在“屬性”面板中設(shè)置視頻的尺寸、是否自動(dòng)播放、重復(fù)、以及是否顯示控件等內(nèi)容，如圖所示。保存文檔，按F12鍵在瀏覽器中預(yù)覽，效果如圖所示。任務(wù)5了解超鏈接概念超級(jí)鏈接是從一個(gè)網(wǎng)頁(yè)或文件到另一個(gè)網(wǎng)頁(yè)或文件的鏈接，包括圖像或多媒體文件，還可以指向電子郵件地址或程序。當(dāng)網(wǎng)站訪(fǎng)問(wèn)者單擊超級(jí)鏈接時(shí)，將根據(jù)目標(biāo)的類(lèi)型執(zhí)行相應(yīng)的操作，即在Web瀏覽器中打開(kāi)或運(yùn)行。要正確創(chuàng)建鏈接，就必須了解鏈接與被鏈接文檔之間的路徑。每個(gè)網(wǎng)頁(yè)都有一個(gè)唯一的地址，稱(chēng)為統(tǒng)一資源定位符（URL）。當(dāng)在網(wǎng)頁(yè)中創(chuàng)建內(nèi)部鏈接時(shí)，一般不會(huì)指定鏈接文檔的完整URL，而是指定一個(gè)相對(duì)當(dāng)前文檔或站點(diǎn)根文件夾的相對(duì)路徑。路徑可分為絕對(duì)路徑和相對(duì)路徑。一．了解絕對(duì)路徑絕對(duì)路徑是包括服務(wù)器規(guī)范在內(nèi)的完全路徑。不管源文件在什么位置，通過(guò)絕對(duì)路徑都可以非常精確地將目標(biāo)文檔找到，除非它的位置發(fā)生變化，否則鏈接不會(huì)失敗。采用絕對(duì)路徑的好處是，它同鏈接的源端點(diǎn)無(wú)關(guān)。只要網(wǎng)站的地址不變，則無(wú)論文檔在站點(diǎn)中如何移動(dòng)，都可以正常實(shí)現(xiàn)跳轉(zhuǎn)而不會(huì)發(fā)生錯(cuò)誤。另外，如果希望鏈接到其他站點(diǎn)上的文件，就必須使用絕對(duì)路徑。采用絕對(duì)路徑的缺點(diǎn)在于，這種方式的鏈接不利于測(cè)試。如果在站點(diǎn)中使用絕對(duì)路徑，那么要想測(cè)試鏈接是否有效，就必須在Internet服務(wù)器端對(duì)鏈接進(jìn)行測(cè)試。二.了解相對(duì)路徑相對(duì)路徑也叫文檔相對(duì)路徑，對(duì)于大多數(shù)的本地鏈接來(lái)說(shuō)，是最適用的路徑。在當(dāng)前文檔與所鏈接的文檔處于同一文件夾內(nèi)時(shí)，文檔相對(duì)路徑特別有用。文檔相對(duì)路徑還可用來(lái)鏈接到其他文件夾中的文檔，方法是利用文件夾的層次結(jié)構(gòu)，指定從當(dāng)前文檔到所鏈接文檔的路徑。任務(wù)6掌握各種鏈接方式超級(jí)鏈接功能不只是用來(lái)鏈接網(wǎng)址及頁(yè)面，它還包括電子郵件、文件下載及錨點(diǎn)鏈接等其它形式的鏈接效果。也因此要先了解各種超級(jí)鏈接的功能，才能根據(jù)需求選用適合的超級(jí)鏈接?；顒?dòng)1掌握網(wǎng)站內(nèi)部鏈接內(nèi)部鏈接的作用是鏈接到網(wǎng)站中的其它頁(yè)面，讓瀏覽者可以瀏覽到網(wǎng)站中的其它頁(yè)面數(shù)據(jù)。1.掌握創(chuàng)建文字鏈接文字超級(jí)鏈接是最基本的鏈接方式，請(qǐng)先輸入如圖中的內(nèi)容。輸入鏈接文字時(shí)請(qǐng)?jiān)诿拷M文字間加入空白及分隔線(xiàn)，這樣不僅看起來(lái)美觀，同時(shí)也可避免點(diǎn)選時(shí)的困擾。新建一個(gè)網(wǎng)頁(yè)文檔，輸入六組鏈接文字，將第一組文字進(jìn)行選取，在“屬性”欄中“鏈接”后面的“瀏覽文件”按鈕

，如圖所示。單擊此按鈕后，彈出“選擇文件”對(duì)話(huà)框，在對(duì)話(huà)框中選擇文字對(duì)應(yīng)的網(wǎng)頁(yè)，如圖所示。單擊“確定”按鈕，完成文字的鏈接創(chuàng)建，效果如圖所示。任務(wù)6掌握各種鏈接方式2.掌握使用“插入”面板中的超級(jí)鏈接功能接下來(lái)我們來(lái)練習(xí)如何透過(guò)“插入”面板來(lái)插入超級(jí)鏈接，新建空白文檔，在“插入”面板中選擇“HTML”后，單擊“Hyperlink”按鈕，如圖8-52所示。單擊后彈出“Hyperlink”對(duì)話(huà)框，輸入文本后，在“鏈接”后面設(shè)置鏈接的文件，如圖8-53所示。設(shè)置完畢單擊“確定”按鈕，完成文字鏈接的創(chuàng)建，如圖8-54所示。任務(wù)6掌握各種鏈接方式3.掌握創(chuàng)建超級(jí)鏈接圖片當(dāng)瀏覽網(wǎng)頁(yè)時(shí)，鼠標(biāo)經(jīng)過(guò)圖像時(shí)，會(huì)出現(xiàn)一個(gè)手形圖標(biāo)，提示瀏覽者這是帶鏈接的圖像。此時(shí)單擊鼠標(biāo)，會(huì)打開(kāi)所鏈接的網(wǎng)頁(yè)，這就是圖像超級(jí)鏈接。運(yùn)用圖片來(lái)創(chuàng)建超級(jí)鏈接的做法和文字相同，都是通過(guò)“屬性”面板來(lái)設(shè)置，在打開(kāi)的網(wǎng)頁(yè)文檔中選擇一個(gè)需要?jiǎng)?chuàng)建連接的圖像，之后在“屬性”欄中“鏈接”后面的“瀏覽文件”按鈕

，選擇一個(gè)鏈接文檔即可，如圖所示。任務(wù)6掌握各種鏈接方式網(wǎng)站外部鏈接是指要連到其它網(wǎng)址，目前有很多網(wǎng)站都會(huì)互相交換鏈接，以擴(kuò)大網(wǎng)站的曝光率。不論是文字或圖片，在創(chuàng)建網(wǎng)站外部鏈接時(shí)的做法都一樣。這里我們要鏈接到可進(jìn)行搜索的百度首頁(yè)，“/”網(wǎng)站，如圖所示。活動(dòng)2掌握網(wǎng)站外部鏈接任務(wù)6掌握各種鏈接方式電子郵件鏈接提供了一個(gè)方便的通訊管道，除了信件及電話(huà)以外，幾乎所有的商業(yè)網(wǎng)站，都有提供電子郵件的鏈接，以做為服務(wù)的一部份?；顒?dòng)3掌握電子郵件鏈接1.掌握通過(guò)創(chuàng)建文字來(lái)設(shè)置郵箱打開(kāi)一個(gè)文檔，在單元格空白處點(diǎn)擊后，執(zhí)行菜單欄中的“插入/HTML/電子郵件鏈接”命令，也可以在“插入”面板中直接點(diǎn)擊“電子郵件鏈接”按鈕，彈出“電子郵件鏈接”對(duì)話(huà)框，設(shè)置“文本”和“電子郵件”，如圖所示。設(shè)置完畢單擊“確定”按鈕，即可創(chuàng)建郵件的鏈接，如圖所示。任務(wù)6掌握各種鏈接方式電子郵件鏈接提供了一個(gè)方便的通訊管道，除了信件及電話(huà)以外，幾乎所有的商業(yè)網(wǎng)站，都有提供電子郵件的鏈接，以做為服務(wù)的一部份。活動(dòng)3掌握電子郵件鏈接2.掌握通過(guò)圖片設(shè)置郵箱各位也可以在圖片上直接創(chuàng)建電子郵件鏈接，不過(guò)鏈接要在電子郵件地址前面加上“mailto：”而非“http：//”，選擇圖片后，設(shè)置郵箱鏈接地址，如圖所示。任務(wù)6掌握各種鏈接方式在廣告郵件非常泛濫的今天，一些沒(méi)有信件主旨的郵件很容易被認(rèn)為是廣告郵件而刪除，為了避免誤刪的情形發(fā)生，各位可以在電子郵件鏈接中另外加上郵件的「信件主題”，這樣在收信時(shí)，就會(huì)知道這是一封瀏覽者表達(dá)意見(jiàn)的郵件了。請(qǐng)?jiān)陔娮余]件鏈接的后面加上「?subject=讀者意見(jiàn)”文字，而完整的寫(xiě)法為「mailto:caopeiqiangcr@163.com?subject=讀者意見(jiàn)”，其中的「讀者意見(jiàn)”四個(gè)字是本節(jié)中的范例，各位可以視需要自行改成其它的文字，如圖所示。任務(wù)6掌握各種鏈接方式如果要在網(wǎng)站中提供下載資料，就需要為文件提供下載鏈接，如果超級(jí)鏈接指向的不是一個(gè)網(wǎng)頁(yè)文件，而是其他文件例如zip、mp3、exe文件等，在網(wǎng)頁(yè)文檔中點(diǎn)擊圖片或選擇文本后，在“屬性”欄中“鏈接”后面的“瀏覽文件”按鈕

，如圖所示。單擊此按鈕后，彈出“選擇文件”對(duì)話(huà)框，在對(duì)話(huà)框中選擇需要下載的文件，如圖所示。單擊“確定”按鈕，完成下載鏈接的創(chuàng)建，儲(chǔ)存后按“F12”，在網(wǎng)頁(yè)中點(diǎn)擊就可以完成下載，效果如圖所示?；顒?dòng)4掌握文件下載鏈接任務(wù)6掌握各種鏈接方式圖像地圖是一種網(wǎng)頁(yè)導(dǎo)覽結(jié)構(gòu)，它能在單一圖像上創(chuàng)建許多的鏈接區(qū)域。因此可以設(shè)計(jì)一張導(dǎo)覽圖像，然后利用圖像地圖的功能，在上面創(chuàng)建多個(gè)鏈接區(qū)域，如此即可讓頁(yè)面風(fēng)格完整呈現(xiàn)，又可同時(shí)兼顧導(dǎo)覽鏈接的功能。圖像地圖的鏈接區(qū)域有“矩形”、“圓形”及“多邊形”三個(gè)外形可以選用，各位可以從屬性面板上做選擇。打開(kāi)一個(gè)網(wǎng)頁(yè)文檔選擇其中的圖像后，在“屬性”欄中選擇“矩形熱點(diǎn)工具”

，在圖像中的“國(guó)際線(xiàn)路”區(qū)域創(chuàng)建矩形熱點(diǎn)區(qū)域，如圖所示。之后創(chuàng)建鏈接的方法與文字和圖像一樣，這里我們直接在“鏈接”文本框中輸入“#”，將其作為空鏈接，選擇“圓形熱點(diǎn)工具”

或“多邊形熱點(diǎn)工具”

，創(chuàng)建熱區(qū)并設(shè)置空鏈接，如圖所示。活動(dòng)5掌握?qǐng)D像地圖創(chuàng)建熱區(qū)鏈接任務(wù)6掌握各種鏈接方式拓展知識(shí)前面為各位介紹了軟件中的各種超級(jí)鏈接創(chuàng)建方式，不過(guò)還沒(méi)就此結(jié)束，因?yàn)镈reamweaver還可進(jìn)一步的替超級(jí)鏈接文字加上“下劃線(xiàn)樣式”及“顏色”等效果樣式，讓超級(jí)鏈接與頁(yè)面風(fēng)格更具一致性?；顒?dòng)1取消鏈接底線(xiàn)和設(shè)置超級(jí)鏈接的文字格式1.取消鏈接底線(xiàn)超級(jí)鏈接文字上的底線(xiàn)可算是超級(jí)鏈接的商標(biāo)，不過(guò)這個(gè)底線(xiàn)是可以依據(jù)頁(yè)面風(fēng)格的需要而取消的，請(qǐng)?jiān)凇皩傩浴睓谥袉螕簟绊?yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”對(duì)話(huà)框，透過(guò)“鏈接”下的“下劃線(xiàn)樣式”來(lái)做設(shè)置。設(shè)置完畢單擊“確定”按鈕，此時(shí)會(huì)將原來(lái)的下劃線(xiàn)隱藏，如圖所示。樣式名稱(chēng)作用始終有下劃線(xiàn)在超級(jí)鏈接文字上使用下劃線(xiàn)效果。始終無(wú)下劃線(xiàn)在超級(jí)鏈接文字上不使用下劃線(xiàn)效果。僅在變換圖像時(shí)顯示下劃線(xiàn)平時(shí)不顯示底線(xiàn)，當(dāng)鼠標(biāo)移過(guò)時(shí)才顯示底線(xiàn)。變換圖像時(shí)隱藏下劃線(xiàn)平時(shí)會(huì)顯示底線(xiàn)，當(dāng)鼠標(biāo)移過(guò)時(shí)才隱藏底線(xiàn)。任務(wù)6掌握各種鏈接方式2.超級(jí)鏈接的文字格式Dreamweaver將頁(yè)面上的超級(jí)鏈接文字分為四種使用狀態(tài)，并且還可以對(duì)這四種狀態(tài)分別設(shè)置不同的文字顏色，好讓瀏覽者可以根據(jù)顏色來(lái)判斷頁(yè)面的瀏覽情形，請(qǐng)?jiān)凇皩傩浴睓谥袉螕簟绊?yè)面屬性”按鈕，打開(kāi)“頁(yè)面屬性”對(duì)話(huà)框，我們要在“鏈接”分類(lèi)中作設(shè)置，如圖所示。設(shè)置名稱(chēng)作用鏈接顏色鼠標(biāo)點(diǎn)選鏈接文字前的文字顏色。變換圖像鏈接鼠標(biāo)移過(guò)文字上方時(shí)的文字顏色。已訪(fǎng)問(wèn)鏈接鏈接過(guò)后的文字顏色。活動(dòng)的鏈接當(dāng)鼠標(biāo)點(diǎn)選超級(jí)鏈接文字時(shí)所顯示的文字顏色。任務(wù)6掌握各種鏈接方式活動(dòng)2快速創(chuàng)建超級(jí)鏈接與刪除超級(jí)鏈接1.快速創(chuàng)建超級(jí)鏈接只要是在頁(yè)面上創(chuàng)建過(guò)的鏈接，要再使用時(shí)就從“屬性”面板中的“鏈接”清單直接選用即可，如圖所示。2.刪除超級(jí)鏈接如果要去除文字或圖片上的超級(jí)鏈接時(shí)，只要將“屬性”面板上的鏈接信息刪除就可以了，如圖所示。任務(wù)6掌握各種鏈接方式拓展知識(shí)超鏈接是網(wǎng)頁(yè)中不可缺少的一部分，通過(guò)超鏈接可以使網(wǎng)站中眾多的網(wǎng)頁(yè)構(gòu)成一個(gè)有機(jī)整體。通過(guò)管理網(wǎng)頁(yè)中的超鏈接，也可以對(duì)網(wǎng)頁(yè)進(jìn)行相應(yīng)的管理。1.自動(dòng)更新鏈接每當(dāng)在本地站點(diǎn)內(nèi)移動(dòng)或重命名文檔時(shí)，Dreamweaver可更新起自及指向該文檔的鏈接，當(dāng)將整個(gè)站點(diǎn)儲(chǔ)存在本地硬盤(pán)上時(shí)，自動(dòng)更新鏈接功能最適合用，Dreamweaver不更改遠(yuǎn)程文件夾中的文件。執(zhí)行菜單欄中的“編輯/首選項(xiàng)”命令，打開(kāi)“首選項(xiàng)”對(duì)話(huà)框，在對(duì)話(huà)框中的“分類(lèi)”列表中選擇“常規(guī)”選項(xiàng)，如圖所示。在“文檔選項(xiàng)”區(qū)域，從“移動(dòng)文件時(shí)更新鏈接”下拉列表框中選擇“總是”或“提示”。若選擇“總是”，則每當(dāng)移動(dòng)或重命名選定的文檔時(shí)，Dreamweaver將自動(dòng)更新起自和指向該文檔的所有鏈接；如果選擇“提示”，則在移動(dòng)文檔時(shí)，Dreamweaver將顯示“更新文件”對(duì)話(huà)框，在對(duì)話(huà)框中列出此更改影響到的所有文件。任務(wù)6掌握各種鏈接方式拓展知識(shí)超鏈接是網(wǎng)頁(yè)中不可缺少的一部分，通過(guò)超鏈接可以使網(wǎng)站中眾多的網(wǎng)頁(yè)構(gòu)成一個(gè)有機(jī)整體。通過(guò)管理網(wǎng)頁(yè)中的超鏈接，也可以對(duì)網(wǎng)頁(yè)進(jìn)行相應(yīng)的管理。2.在站點(diǎn)范圍內(nèi)更改鏈接除了每次移動(dòng)或重命名文件時(shí)讓Dreamweaver自動(dòng)更新鏈接外，還可以手動(dòng)更改所有鏈接，使它們指向其他位置。打開(kāi)一個(gè)當(dāng)前站點(diǎn)中的文檔，執(zhí)行菜單欄中的“站點(diǎn)/站點(diǎn)選項(xiàng)/改變站點(diǎn)范圍的鏈接”，彈出“更改整個(gè)站點(diǎn)鏈接”對(duì)話(huà)框，單擊“確定”，即可更改整個(gè)站點(diǎn)范圍內(nèi)的鏈接”，如圖所示。任務(wù)6掌握各種鏈接方式拓展知識(shí)超鏈接是網(wǎng)頁(yè)中不可缺少的一部分，通過(guò)超鏈接可以使網(wǎng)站中眾多的網(wǎng)頁(yè)構(gòu)成一個(gè)有機(jī)整體。通過(guò)管理網(wǎng)頁(yè)中的超鏈接，也可以對(duì)網(wǎng)頁(yè)進(jìn)行相應(yīng)的管理。3.檢查站點(diǎn)中的鏈接錯(cuò)誤要檢查網(wǎng)站的鏈接，可以利用“鏈接檢查器”面板，執(zhí)行菜單欄中的“窗口/結(jié)果/鏈接檢查器”，彈出“鏈接檢查器”面板，單擊“檢查鏈接”按鈕

，會(huì)彈出需要檢查的鏈接內(nèi)容，只要根據(jù)提示選擇就可以了，如圖所示。在“顯示”后面的下拉列表中可以查看需要進(jìn)行鏈接檢查的文件，如圖所示。綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建鼠標(biāo)經(jīng)過(guò)并設(shè)置鏈接實(shí)戰(zhàn)訓(xùn)練要求打開(kāi)圖像創(chuàng)建切片新建文檔進(jìn)行保存創(chuàng)建表格插入背景圖嵌入表格設(shè)置大小插入鼠標(biāo)經(jīng)過(guò)插入圖片設(shè)置鏈接實(shí)戰(zhàn)素材素材文件：素材/項(xiàng)目8/Beijing、導(dǎo)航，如圖所示。任務(wù)單項(xiàng)目編號(hào)8項(xiàng)目名稱(chēng)綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建鼠標(biāo)經(jīng)過(guò)并設(shè)置鏈接

時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)制作中通過(guò)創(chuàng)建切片及布局表格并制作網(wǎng)頁(yè)中鼠標(biāo)經(jīng)過(guò)效果和創(chuàng)建鏈接的一般流程課堂實(shí)踐：設(shè)計(jì)主題，打開(kāi)文檔創(chuàng)建切片、新建、插入表格、嵌套表格、設(shè)置文本大小顏色，設(shè)置以背景形式插入圖片、插入鼠標(biāo)經(jīng)過(guò)，設(shè)置鏈接。完成一個(gè)導(dǎo)航區(qū)域的制作?？己藰?biāo)準(zhǔn)：打開(kāi)文檔創(chuàng)建切片。10分新建文檔插入表格。10分嵌套表格10分以背景形式插入圖片10分設(shè)置鏈接10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—?jiǎng)?chuàng)建鼠標(biāo)經(jīng)過(guò)并設(shè)置鏈接實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目8/zhsz，如圖所示。課后習(xí)題一．判斷題1.()鏈接到其它網(wǎng)站的超級(jí)鏈接，是屬于外部鏈接。2.()鏈接外部網(wǎng)站時(shí)，網(wǎng)址前面的“HTTP://”可有可無(wú)。3.()圖像地圖功能可以在同一張圖像上創(chuàng)建多組超級(jí)鏈接。4.()超級(jí)鏈接的文字顏色可以自由設(shè)置。5.()由“插入”面板可以插入超級(jí)鏈接或電子郵件。6.()所鏈接下載的文件若屬于.jpg、.gif或是.png等圖片格式，瀏覽器會(huì)將鏈接的圖片直接顯示于窗口中。7.()若希望對(duì)方下載后再開(kāi)啟文件時(shí)，就必須將下載的文件壓縮成ZIP或RAR等壓縮檔格式。8.()因特網(wǎng)中，超級(jí)鏈接是將所有數(shù)據(jù)串連起來(lái)的基礎(chǔ)。9.()插入Dreamweaver網(wǎng)頁(yè)中的圖像，無(wú)法再進(jìn)行尺寸大小的調(diào)整。10.()圖像邊框的顏色必須使用CSS設(shè)計(jì)工器才可做變更。11.()使用LOOP參數(shù)，可設(shè)置音樂(lè)是否循環(huán)播放。12.()HTML5音頻可支持*.mp3的格式。

二．選擇題1.()電子郵件鏈接的前面要加上：(A)ftp:(B)http:(C)mailto:(D)file:。2.()要在新窗口顯示鏈接網(wǎng)頁(yè)時(shí)，要將鏈接目標(biāo)設(shè)置為：(A)_top(B)_blank(C)_parent(D)_self。3.()要取消超級(jí)鏈接的下劃線(xiàn)效果時(shí)，可執(zhí)行：(A)“鏈接/屬性”(B)“設(shè)置/超級(jí)鏈接”(C)“超級(jí)鏈接/設(shè)置”(D)“修改/頁(yè)面屬性”。何作用？課后習(xí)題4.()下列何者不是圖像地圖所提供的鏈接造型？ (A)星形(B)矩形(C)圓形(D)多邊形5.()鏈接到網(wǎng)站中的其它網(wǎng)頁(yè)，稱(chēng)之為： (A)外部鏈接(B)內(nèi)部鏈接(C)電子郵件鏈接(D)文件下載鏈接6.()Dreamweaver中預(yù)設(shè)置圖像編輯器是哪一套軟件？(A)Photoshop(B)Firework(C)PhotoImpact(D)PaintShopPro7.()對(duì)于圖像的編輯，下列何者說(shuō)明有誤？(A)可做裁切(B)可設(shè)置亮度對(duì)比(C)可對(duì)圖像做最佳化處理(D)可加入負(fù)片效果8.()下列何者不是HTML5視頻所能支持的格式？

(A)mpg(B)ogg(C)mp4(D)m4v三．問(wèn)答題1.請(qǐng)列舉4種鏈接類(lèi)型。

2.請(qǐng)簡(jiǎn)述圖像地圖的功能。

3.請(qǐng)說(shuō)明替代文字有何作用？網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目9：使用表單Project9項(xiàng)目9職場(chǎng)情境根據(jù)之前學(xué)習(xí)的內(nèi)容，小艾已經(jīng)可以制作一個(gè)屬于自己的網(wǎng)頁(yè)了，內(nèi)容雖然很豐富，但是始終感覺(jué)像少了點(diǎn)什么，沒(méi)錯(cuò)！就是少了一些關(guān)于網(wǎng)頁(yè)中的交互內(nèi)容，有就是表單，正在犯愁如何能夠添加時(shí)，凱程站在后面突然說(shuō)，小艾！你是不是想要在網(wǎng)頁(yè)中添加可用于交互的一些內(nèi)容呀？，小艾說(shuō)，對(duì)呀！你是怎么知道的呢？凱程說(shuō)，看你做的網(wǎng)頁(yè)，好像就缺這個(gè)部分的內(nèi)容了，哈哈！讓我來(lái)告訴你如何了解和添加你需要的內(nèi)容吧。這個(gè)內(nèi)容就是表單，在網(wǎng)站中，表單是實(shí)現(xiàn)網(wǎng)頁(yè)上數(shù)據(jù)傳輸?shù)幕A(chǔ)，其作用就是實(shí)現(xiàn)訪(fǎng)問(wèn)者與網(wǎng)站之間的交互功能。利用表單，可以根據(jù)訪(fǎng)問(wèn)者輸入的信息，自動(dòng)生成頁(yè)面反饋給訪(fǎng)問(wèn)者，還可以為網(wǎng)站收集訪(fǎng)問(wèn)者輸入的信息。表單可以包含允許進(jìn)行交互的各種對(duì)象，包括文本域、列表框、復(fù)選框、單選按鈕、圖像域、按鈕以及其他表單對(duì)象，操作起來(lái)也非常的簡(jiǎn)單。好了，下面我們就一起來(lái)進(jìn)行學(xué)習(xí)和進(jìn)步吧！。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在網(wǎng)頁(yè)中表單創(chuàng)建的方法。掌握表單對(duì)象添加的方法?！寄苣繕?biāo)〓學(xué)會(huì)創(chuàng)建表單。學(xué)會(huì)插入表單對(duì)象?！刭|(zhì)目標(biāo)〓了解網(wǎng)頁(yè)設(shè)計(jì)的行業(yè)規(guī)范，在制作網(wǎng)頁(yè)時(shí)能規(guī)避違規(guī)的行為，形成良好的行為規(guī)范。懂得團(tuán)隊(duì)協(xié)作的重要性，不要凸顯個(gè)人主義。CONTENTS任務(wù)1了解表單的創(chuàng)建目錄任務(wù)2掌握表單對(duì)象的添加綜合實(shí)戰(zhàn)—會(huì)員登記表課后習(xí)題任務(wù)1了解表單的創(chuàng)建Dreamweaver作為一種可視化的網(wǎng)頁(yè)設(shè)計(jì)軟件，現(xiàn)在我們學(xué)習(xí)它的表單，只需學(xué)習(xí)到表單在頁(yè)面中的界面設(shè)計(jì)這部分即可，至于后續(xù)的程序處理部分，還要交給專(zhuān)門(mén)的程序設(shè)計(jì)師。?；顒?dòng)1了解表單一個(gè)完整的表單設(shè)計(jì)應(yīng)該很明確地分為兩個(gè)部分：表單對(duì)象部分和應(yīng)用程序部分，它們分別由網(wǎng)頁(yè)設(shè)計(jì)師和程序設(shè)計(jì)師來(lái)設(shè)計(jì)完成。其過(guò)程是這樣的，首先由網(wǎng)頁(yè)設(shè)計(jì)師制作出一個(gè)可以讓瀏覽者輸入各項(xiàng)資料的表單頁(yè)面，這部分屬于在顯示器上可以看到的內(nèi)容，此時(shí)的表單只是一個(gè)外殼而已，不具有真正工作的能力，需要后臺(tái)程序的支持。接著由程序設(shè)計(jì)師通過(guò)ASP或者CGI程序，來(lái)編寫(xiě)處理各項(xiàng)表單資料和反饋信息等操作所需的程序，這部分瀏覽者雖然看不見(jiàn)，但卻是表單處理的核心。表單用<form></form>標(biāo)記來(lái)創(chuàng)建，在<form></form>標(biāo)記之間的部分都屬于表單的內(nèi)容。<form>標(biāo)記具有action、method和target屬性。action的值是處理程序的程序名，如<formaction="URL">，如果這個(gè)屬性是空值（""），則當(dāng)前文檔的URL將被使用，當(dāng)用戶(hù)提交表單時(shí)，服務(wù)器將執(zhí)行這個(gè)程序。method屬性用來(lái)定義處理程序從表單中獲得信息的方式，可取GET或POST中的一個(gè)。GET方式是處理程序從當(dāng)前html文檔中獲取數(shù)據(jù)，這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。POST方式傳送的數(shù)據(jù)比較大，它使當(dāng)前的html文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式傳送大得多。target屬性用來(lái)指定目標(biāo)窗口或目標(biāo)幀?？蛇x當(dāng)前窗口_self、父級(jí)窗口_parent、頂層窗口_top和空白窗口_blank。任務(wù)1了解表單的創(chuàng)建活動(dòng)2了解創(chuàng)建表單使用表單必須具備的條件有兩個(gè)：一個(gè)是含有表單元素的網(wǎng)頁(yè)文檔，另一個(gè)是具備服務(wù)器端的表單處理應(yīng)用程序或客戶(hù)端腳本程序，它能夠處理用戶(hù)輸入到表單中的信息。下面創(chuàng)建一個(gè)基本的表單，新建一個(gè)空白文檔并插入一個(gè)1行1列的表格，將“寬”為800、“高”為400，如圖9-1所示。將光標(biāo)置于文檔中要插入表單的位置，執(zhí)行“插入/表單/表單”命令，執(zhí)行命令后，頁(yè)面中就會(huì)出現(xiàn)紅色的虛線(xiàn)，這些虛線(xiàn)就是表單,如圖所示。實(shí)踐經(jīng)驗(yàn)：執(zhí)行命令后，如果看不到紅色虛線(xiàn)表單，執(zhí)行菜單欄中的“查看/設(shè)計(jì)視圖選項(xiàng)/可視化助理/不可見(jiàn)元素”命令，可以看到插入的表單。任務(wù)1了解表單的創(chuàng)建活動(dòng)3了解表單屬性的設(shè)置選中表單，在“屬性”面板中，設(shè)置表單的屬性，如圖所示。在表單的“屬性”面板中可以設(shè)置以下參數(shù)。ID：輸入標(biāo)識(shí)該表單的唯一名稱(chēng)。Action：指定處理該表單的動(dòng)態(tài)頁(yè)或腳本的路徑?？梢栽凇癆ction”文本框中輸入完整的路徑，也可以單擊文件夾圖標(biāo)瀏覽應(yīng)用程序。如果讀者并沒(méi)有相關(guān)程序支持的話(huà)，也可以使用“E-Mail”的方式來(lái)傳輸表單信息，這種方式需要在“Action”文本框中鍵入“mailto:電子郵件地址”的內(nèi)容，比如“mailto:jsxson@”，表示提交的信息將會(huì)發(fā)送到作者的郵箱中。Method：在“Method”下拉列表中，選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的傳送方式，包括3個(gè)選項(xiàng)。讀者可以選擇速度快但攜帶數(shù)據(jù)量小的“GET”方法，或者數(shù)據(jù)量大的POST方法。一般情況下應(yīng)該使用“POST”方法，這在數(shù)據(jù)保密方面也有好處。任務(wù)1了解表單的創(chuàng)建POST：使用“HTTPpost”方法發(fā)送數(shù)據(jù)；此方法將單個(gè)消息中的數(shù)據(jù)發(fā)送給服務(wù)器。GET：使用“HTTPget”方法發(fā)送數(shù)據(jù)，此方法將表單域內(nèi)容放置在“URL”查詢(xún)字符串中?！澳J(rèn)”：用瀏覽器默認(rèn)的方式，一般默認(rèn)為“GET”。Enctype：用來(lái)設(shè)置發(fā)送數(shù)據(jù)的MIME編碼類(lèi)型，一般情況下應(yīng)選擇“application/x-www-form-urlencoded”。Target：使用“目標(biāo)”下拉列表指定一個(gè)窗口，這個(gè)窗口中顯示應(yīng)用程序或者腳本程序，將表單處理完成后所顯示的結(jié)果。_blank：反饋網(wǎng)頁(yè)將在新開(kāi)窗口里打開(kāi)。_parent：反饋網(wǎng)頁(yè)將在副窗口里打開(kāi)。_self：反饋網(wǎng)頁(yè)將在原窗口里打開(kāi)。_top：反饋網(wǎng)頁(yè)將在頂層窗口里打開(kāi)。AcceptCharset：客戶(hù)端通過(guò)發(fā)送該協(xié)商建議服務(wù)端使用該字符集來(lái)發(fā)送響應(yīng)結(jié)果?！癠TF-8”是沒(méi)有國(guó)家的編碼,也就是獨(dú)立于任何一種語(yǔ)言,任何語(yǔ)言都可以使用。Class：在“Class”下拉列表中選擇要定義的表單樣式。素養(yǎng)小課堂人與人之間是需要相互溝通的，的無(wú)論是學(xué)習(xí)還是工作，必要的溝通是不可少的，好的溝通能讓彼此少走很多的彎路，一項(xiàng)任務(wù)的實(shí)施如果沒(méi)有必要的溝通，得到的結(jié)果是非?？膳碌?。就像一個(gè)網(wǎng)頁(yè)如果沒(méi)有交互功能的存在，是沒(méi)有辦法收錄相關(guān)內(nèi)容信息的，所以說(shuō)工作或?qū)W習(xí)時(shí)要多和任務(wù)方進(jìn)行有效的溝通，以此來(lái)讓自己的工作更加的順利、更加的圓滿(mǎn)。任務(wù)2掌握表單對(duì)象的添加創(chuàng)建表單后，就可以向表單中添加各種表單對(duì)象了，下面將分別介紹各種表單對(duì)象的添加。課堂實(shí)操—通過(guò)文本命令添加文本域文本域接受任何類(lèi)型的輸入內(nèi)容。文本域可以是單行或多行顯示，也可以是密碼域的方式顯示，在這種情況下，輸入文本將被替換為星號(hào)或項(xiàng)目符號(hào)，以避免旁觀者看到。單行文本域主要用于單行信息的輸入，創(chuàng)建單行文本域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)單選按鈕命令添加單選按鈕單選按鈕只允許從多個(gè)選項(xiàng)中選擇一個(gè)選項(xiàng)。單選按鈕通常成組地使用，在同一個(gè)組中的所有單選按鈕必須具有相同的名稱(chēng)。插入單選按鈕的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)復(fù)選框命令添加復(fù)選框復(fù)選框允許用戶(hù)在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，每個(gè)復(fù)選框都是獨(dú)立的，所以必須有一個(gè)唯一的名稱(chēng)。插入復(fù)選框的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)復(fù)選框命令添加復(fù)選框拓展知識(shí)表單中除了可以文本域和單選按鈕以外，還可以添加復(fù)選擇域、文件域、日期域、圖像按鈕域、Tel域、電子郵件域、文本區(qū)域和按鈕等操作。復(fù)選框允許用戶(hù)在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，每個(gè)復(fù)選框都是獨(dú)立的，所以必須有一個(gè)唯一的名稱(chēng)。插入復(fù)選框的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)選擇命令添加選擇域選擇域使訪(fǎng)問(wèn)者可以從列表中選擇一個(gè)或多個(gè)項(xiàng)目。當(dāng)空間有限，但需要顯示許多項(xiàng)目時(shí)，選擇域非常有用。如果想要對(duì)返回給服務(wù)器的值予以控制，也可以使用選擇域。選擇域與文本域不同，在文本域中用戶(hù)可以隨心所欲地鍵入任何信息，甚至包括無(wú)效的數(shù)據(jù)，而使用選擇域則可以設(shè)置某個(gè)菜單返回的確切值?？梢栽诒韱沃胁迦雰煞N類(lèi)型的選擇域：一種是用戶(hù)單擊時(shí)下拉的菜單；另一種是顯示可供用戶(hù)從中選擇的可滾動(dòng)項(xiàng)目列表的菜單。添加選擇域的具體操作步驟如下。。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)文件命令添加文件域可以創(chuàng)建文件域，文件域使瀏覽者可以選擇其計(jì)算機(jī)上的文件，如字處理文檔或圖像文件，并將該文件上傳到服務(wù)器。文件域的外觀與文本域類(lèi)似，只是文件域還包含一個(gè)“瀏覽”按鈕。瀏覽者可以手動(dòng)輸入要上傳的文件的路徑，也可以使用“瀏覽”按鈕選擇文件。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)日期命令和圖像按鈕命令添加日期域和圖像按鈕域在Dreamweaver中，可以使用指定的圖像作為按鈕。如果使用圖像來(lái)執(zhí)行任務(wù)而不是提交數(shù)據(jù)，則需要將某種行為附加到表單對(duì)象上。創(chuàng)建圖像域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)Tel命令添加Tel域Tel是一種全球最新的頂級(jí)域名，通過(guò)DNS能夠讓你直接在互聯(lián)網(wǎng)上存儲(chǔ)、更新和發(fā)布聯(lián)系信息、網(wǎng)絡(luò)鏈接、住宅電話(huà)、辦公電話(huà)、手機(jī)、電子郵件、即時(shí)通信軟件等，同時(shí)完全擁有你發(fā)布的信息，保護(hù)私人數(shù)據(jù)，僅限授權(quán)人查看。插入Tel域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)電子郵件命令添加電子郵件域電子郵件域可以在網(wǎng)頁(yè)中添加電子郵件文本區(qū)，插入電子郵件域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)文本區(qū)域命令添加文本區(qū)域?qū)τ谛枰顚?xiě)大量的文本信息，諸如：個(gè)人意見(jiàn)或是討論文本…等，就可以選擇文本區(qū)域來(lái)操作。插入文本區(qū)域的具體操作步驟如下。任務(wù)2掌握表單對(duì)象的添加課堂實(shí)操—通過(guò)提交或重置按鈕命令添加按鈕按鈕控制表單操作，使用表單按鈕，可以將輸入表單的數(shù)據(jù)提交到服務(wù)器，或者重置該表單。對(duì)表單而言，按鈕是非常重要的，它能夠控制對(duì)表單內(nèi)容的操作，如“提交”或“重置”按鈕。要將表單內(nèi)容發(fā)送到遠(yuǎn)端服務(wù)器上，使用“提交”按鈕；要清除現(xiàn)有的表單內(nèi)容，使用“重置”按鈕。插入按鈕的具體操作步驟如下。綜合實(shí)戰(zhàn)—會(huì)員登記表實(shí)戰(zhàn)訓(xùn)練要求處理圖像制作表頭新建文檔進(jìn)行保存創(chuàng)建表格插入嵌入表格設(shè)置大小插入圖片插入表單插入表單組件實(shí)戰(zhàn)素材素材文件（素材/項(xiàng)目9/001）如圖所示。任務(wù)單項(xiàng)目編號(hào)9項(xiàng)目名稱(chēng)綜合實(shí)戰(zhàn)—會(huì)員登記表

時(shí)間地點(diǎn)目的：實(shí)踐網(wǎng)頁(yè)設(shè)計(jì)中通過(guò)插入表單及表單組件制作網(wǎng)頁(yè)會(huì)員登記表的一般流程課堂實(shí)踐：設(shè)計(jì)主題，處理圖像制作表頭、新建保存、插入表格、插入表單，嵌套表格、設(shè)置文本大小顏色，插入表單組件并進(jìn)行設(shè)置。完成一個(gè)會(huì)員登記的制作。考核標(biāo)準(zhǔn)：處理表頭圖像。10分新建文檔插入表格。10分嵌套表格10分插入表單10分插入并設(shè)置表單組件10分內(nèi)容可粘貼：評(píng)價(jià)評(píng)分：指導(dǎo)教師簽字：綜合實(shí)戰(zhàn)—會(huì)員登記表實(shí)戰(zhàn)效果圖效果文件：源文件/項(xiàng)目9/zhsz-djb，如圖所示。課后習(xí)題一．判斷題1.()所有表單組件都要在表單域內(nèi)加入與設(shè)置。2.()在設(shè)置單選按鈕時(shí)，每一組選項(xiàng)按鈕中的名稱(chēng)(Name)都要相同。3.()表單信息必須通過(guò)服務(wù)器主機(jī)的程序及數(shù)據(jù)庫(kù)軟件，才能變成可處理的信息內(nèi)容。4.()可以使用圖像作為表單信息的傳送按鈕。5.()在表單創(chuàng)建的過(guò)程中，可以運(yùn)用表格來(lái)加強(qiáng)排版效果。

二．選擇題1.()具有單選功能的表單組件是？(A)文本(B)復(fù)選框(C)單選按鈕(D)文本區(qū)域2.()下列何者可將表單中的相關(guān)文本框內(nèi)容進(jìn)行分類(lèi)？(A)域集(B)組文本框(C)文本框組合(D)文本框組3.()下列何者的輸入信息會(huì)以星號(hào)或●符號(hào)來(lái)傳送？(A)文本(B)文本區(qū)域(C)Tel(D)密碼4.()具有復(fù)選功能的表單組件是？(A)復(fù)選框(B)文本區(qū)域(C)單選按鈕(D)密碼5.()下面那個(gè)表單組件具有清除填寫(xiě)信息的作用？(A)送出按鈕(B)重置按鈕(C)按鈕網(wǎng)頁(yè)設(shè)計(jì)與制作——項(xiàng)目10：使用CSS美化

和布局網(wǎng)頁(yè)P(yáng)roject10項(xiàng)目10職場(chǎng)情境網(wǎng)頁(yè)的大體制作完畢后，剩余的美化及進(jìn)一步的布局會(huì)讓網(wǎng)頁(yè)看起來(lái)更加的漂亮大氣，能夠完成這方面的工作，一個(gè)網(wǎng)頁(yè)基本就算完成了，而這一點(diǎn)恰恰是小艾最缺失的，所以她專(zhuān)門(mén)找到了同事凱程，想讓他好好為自己講一講關(guān)于美化和細(xì)致布局方面的知識(shí)，凱程非常細(xì)致的為小艾解說(shuō)了關(guān)于網(wǎng)頁(yè)中CSS樣式及布局網(wǎng)頁(yè)方面的知識(shí)。CSS樣式是網(wǎng)頁(yè)排版的重要核心，它讓設(shè)計(jì)師從頁(yè)面效果的困擾中得到解脫。雖然它是一套代碼，但是在Dreamweaver的環(huán)境下，使用CSS不需要記憶代碼及寫(xiě)程序，只要從對(duì)話(huà)框中設(shè)置即可。精美的網(wǎng)頁(yè)離不開(kāi)CSS技術(shù)。采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。使用CSS樣式可以制作出更加復(fù)雜和精巧的網(wǎng)頁(yè)，網(wǎng)頁(yè)的維護(hù)和更新也更加容易和方便。本章主要介紹DIV與CSS概念、CSS樣式的基本概念和語(yǔ)法、CSS樣式設(shè)置和CSS定位。本次項(xiàng)目將會(huì)針對(duì)CSS樣式的各種類(lèi)型及應(yīng)用范圍做解說(shuō)，讓各位可以熟悉CSS功能的應(yīng)用。好了，下面我們就一起來(lái)進(jìn)行學(xué)習(xí)和進(jìn)步吧！。學(xué)習(xí)目標(biāo)〓知識(shí)目標(biāo)〓掌握在網(wǎng)頁(yè)中DIV與CSS布局的方法。掌握CSS基本知識(shí)。掌握設(shè)置CSS樣式〓技能目標(biāo)〓學(xué)會(huì)CSS基礎(chǔ)。學(xué)會(huì)CSS樣式?！刭|(zhì)目標(biāo)〓做人要講誠(chéng)信，不能在誠(chéng)信中有缺失，讓本該要合作的人遠(yuǎn)離你。懂得了做事不是靠嘴，而是要靠自己辛勤的付出和努力。要學(xué)會(huì)與人分享，在團(tuán)隊(duì)中不要以為自己是最牛的，要學(xué)會(huì)謙虛、學(xué)會(huì)謙讓。CONTENTS任務(wù)1了解DIV與CSS簡(jiǎn)介目錄任務(wù)2了解CSS基本知識(shí)任務(wù)3掌握設(shè)置CSS樣式任務(wù)4掌握在CSS設(shè)計(jì)器中定義頁(yè)面內(nèi)CSS樣式任務(wù)5掌握外部樣式表鏈接任務(wù)6掌握以Div標(biāo)簽規(guī)劃區(qū)塊綜合實(shí)戰(zhàn)—設(shè)置區(qū)塊和方框樣式制作文字介紹課后習(xí)題任務(wù)1了解DIV與CSS簡(jiǎn)介Dreamweaver中CSS布局的網(wǎng)頁(yè)，<DIV>與<Span>都是常用的標(biāo)記，利用這兩個(gè)標(biāo)記，加上CSS對(duì)其樣式的控制，可以很方便地實(shí)現(xiàn)網(wǎng)頁(yè)的布局?；顒?dòng)1了解DIV概述DIV是CSS中的定位技術(shù)，在Dreamweaver中將其進(jìn)行了可視化操作。文本、圖像和表格等元素只能固定其位置，不能互相疊加在一起，使用DIV功能，可以將其放置在網(wǎng)頁(yè)中的任何位置，還可以按順序排放網(wǎng)頁(yè)文檔中的其他構(gòu)成元素。層體現(xiàn)了網(wǎng)頁(yè)技術(shù)從二維空間向三維空間的一種延伸。DIV的功能主要有以下兩個(gè)方面。重疊排放網(wǎng)頁(yè)中的元素：利用DIV，可以實(shí)現(xiàn)不同的圖像重疊排列，而且可以隨意改變排放的順序。精確的定位：?jiǎn)螕鬌IV上方的四邊形控制手柄，將其拖動(dòng)到指定位置，就可以改變層的位置。如果要精確定位APDIV在頁(yè)面中的位置，可以在DIV的屬性面板中輸入精確的數(shù)值坐標(biāo)。如果將DIV的坐標(biāo)值設(shè)置為負(fù)數(shù)，DIV會(huì)在頁(yè)面中消失。任務(wù)1了解DIV與CSS簡(jiǎn)介Dreamweaver中CSS布局的網(wǎng)頁(yè)，<DIV>與<Span>都是常用的標(biāo)記，利用這兩個(gè)標(biāo)記，加上CSS對(duì)其樣式的控制，可以很方便地實(shí)現(xiàn)網(wǎng)頁(yè)的布局?；顒?dòng)2了解DIV與SPAN的區(qū)別DIV和SPAN元素最大的特點(diǎn)是默認(rèn)都沒(méi)有對(duì)元素內(nèi)的對(duì)象進(jìn)行任何格式化渲染。主要用于應(yīng)用樣式表（共同點(diǎn)）。兩者最明顯的區(qū)別在于DIV是塊元素，而SPAN是行內(nèi)元素（也稱(chēng)作內(nèi)嵌元素）。所謂塊元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需另起一行。塊元素和行內(nèi)元素也不是一成不變的，通過(guò)定義CSS的display屬性值可以互相轉(zhuǎn)化。＜span＞SPAN標(biāo)記有一個(gè)重要而實(shí)用的特性，即它什么事也不會(huì)做，它的唯一目的就是圍繞HTML代碼中的其他元素，這樣就可以為它們指定樣式了。還有一個(gè)標(biāo)識(shí)符具有類(lèi)似的功能，＜DIV＞DIV也被用來(lái)在HTML文件中建立邏輯部分。但與＜DIV＞SPAN不同，＜DIV＞工作于文本塊一級(jí)，它在它所包含的HTML元素的前面及后面都引入了行分隔。任務(wù)1了解DIV與CSS簡(jiǎn)介活動(dòng)3了解DIV與CSS布局優(yōu)勢(shì)掌握基于CSS的網(wǎng)頁(yè)布局方式，是實(shí)現(xiàn)Web標(biāo)準(zhǔn)的基礎(chǔ)。在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變網(wǎng)頁(yè)的外觀和格式。采用CSS布局有以下優(yōu)點(diǎn)。

大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度，縮減帶寬成本。

結(jié)構(gòu)清晰，容易被搜索引擎搜索到。

縮短改版時(shí)間，只要簡(jiǎn)單地修改幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)。

強(qiáng)大的字體控制和排版能力。CSS非常容易編寫(xiě)，可以像編寫(xiě)HTML代碼一樣輕松地編寫(xiě)CSS。

提高易用性，使用CSS可以結(jié)構(gòu)化HTML，如<p>標(biāo)記只用來(lái)控制段落，<heading>標(biāo)記只用來(lái)控制標(biāo)題，<table>標(biāo)記只用來(lái)表現(xiàn)格式化的數(shù)據(jù)等。

表現(xiàn)和內(nèi)容相分離，將設(shè)計(jì)部分分離出來(lái)放在一個(gè)獨(dú)立樣式文件中。

更方便搜索引擎的搜索，用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)記，搜索引擎將更有效地搜索到內(nèi)容。table的布局中，垃圾代碼會(huì)很多，一些修飾的樣式及布局的代碼混合一起，很不直觀。而DIV更能體現(xiàn)樣式和結(jié)構(gòu)相分離，結(jié)構(gòu)的重構(gòu)性強(qiáng)。

可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新。不用再一頁(yè)一頁(yè)地更新?？梢詫⒄军c(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。任務(wù)2了解CSS基本知識(shí)活動(dòng)1了解CSS的基本概念在制作網(wǎng)頁(yè)時(shí)，對(duì)文本的格式化是一件很繁瑣的工作。利用CSS樣式（CascadingStyleSheets）。不僅可以控制一篇文檔中的文本格式，而且可以控制多篇文檔的文本格式。因此使用CSS樣式表定義頁(yè)面文字，將會(huì)使工作量大大減小。一些好的CSS樣式表的建立，使我們可以更進(jìn)一步對(duì)頁(yè)面及文本格式進(jìn)行精確定制。CSS的全名是CascadingStyleSheets，一般稱(chēng)為串聯(lián)式樣式表，其作用是為了加強(qiáng)網(wǎng)頁(yè)上的排版效果。因?yàn)樵诰W(wǎng)頁(yè)設(shè)計(jì)初期，由于HTML代碼上的不足，使得網(wǎng)頁(yè)上的排版效果一直無(wú)法達(dá)到令人滿(mǎn)意的境界，也因?yàn)檫@個(gè)緣故才會(huì)在HTML之后繼續(xù)開(kāi)發(fā)CSS代碼。由于CSS是用來(lái)補(bǔ)充HTML的格式，而非用來(lái)取代HTML，因此CSS的所有功能，都是擺放在畫(huà)面效果的設(shè)計(jì)，讓HTML代碼只單純負(fù)責(zé)頁(yè)面的內(nèi)容結(jié)構(gòu)。所以各位在頁(yè)面上進(jìn)行內(nèi)容編輯時(shí)（包含文字、表格、窗體等），都還是使用HTML代碼來(lái)創(chuàng)建頁(yè)面結(jié)構(gòu)，等到需要套用一些樣式效果時(shí)才使用CSS樣式。另外，設(shè)計(jì)者也可以將CSS樣式儲(chǔ)存成一個(gè)獨(dú)立文件，再讓這個(gè)樣式文件同時(shí)套用到多個(gè)網(wǎng)頁(yè)上，如此一來(lái)會(huì)讓網(wǎng)頁(yè)風(fēng)格的設(shè)計(jì)更加簡(jiǎn)單方便。任務(wù)2了解CSS基本知識(shí)活動(dòng)2了解CSS的基本語(yǔ)法現(xiàn)在首先討論在HTML頁(yè)面內(nèi)直接引用樣式表的方法。這個(gè)方法必須把樣式表信息包括在<style>和</style>標(biāo)記中，為了使樣式表在整個(gè)頁(yè)面中產(chǎn)生作用，應(yīng)把該組標(biāo)記及其內(nèi)容放到<head>和</head>中去。例如，若要設(shè)置HTML頁(yè)面中所有H1標(biāo)題字顯示為藍(lán)色，其代碼如下：樣式表的基本語(yǔ)法如下：任務(wù)2了解CSS基本知識(shí)在使用樣式表過(guò)程中，經(jīng)常會(huì)有幾個(gè)標(biāo)志用到同一個(gè)屬性，例如規(guī)定HTML頁(yè)面中凡是粗體字、斜體字、1號(hào)標(biāo)題字則顯示為紅色，按照上面介紹的方法應(yīng)書(shū)寫(xiě)為：顯然這樣書(shū)寫(xiě)十分麻煩，引進(jìn)分組的概念會(huì)使其變得簡(jiǎn)潔明了，可以寫(xiě)成：用逗號(hào)分隔各個(gè)HTML標(biāo)志，把3行代碼合并成1行。此外，同一個(gè)HTML標(biāo)志，可以定義多種屬性，例如，規(guī)定把H1～H6各級(jí)標(biāo)題定義為紅色黑體字，帶下畫(huà)線(xiàn)，則應(yīng)寫(xiě)為：任務(wù)3掌握設(shè)置CSS樣式控制網(wǎng)頁(yè)元素外觀的CSS樣式用來(lái)定義字體、顏色、邊距和字間距等屬性，可以使用Dreamweaver來(lái)對(duì)所有的CSS屬性進(jìn)行設(shè)置。CSS屬性被分為9大類(lèi)，即類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位、擴(kuò)展和過(guò)濾，下面分別對(duì)其進(jìn)行介紹。課堂實(shí)操—通過(guò)新建CSS規(guī)則創(chuàng)建CSS規(guī)則定義在Dreamweaver中創(chuàng)建CSS規(guī)則定義可以在“類(lèi)”、“ID”、“標(biāo)簽”、“復(fù)合內(nèi)容”4個(gè)方面進(jìn)行創(chuàng)建，這里我們按照“標(biāo)簽”進(jìn)行創(chuàng)建。具體步驟如下；實(shí)踐經(jīng)驗(yàn)：在“規(guī)則定義”下拉列表中有兩個(gè)選項(xiàng)，如果選擇“(僅對(duì)該文檔)”選項(xiàng)，則所定義的CSS樣式為內(nèi)部CSS樣式，CSS樣式代碼都會(huì)自動(dòng)添加到頂部的<style>與</style>標(biāo)簽之間。如果選擇“(新建樣式表文件)”選項(xiàng)，則可以直接創(chuàng)建外部樣式表文件，并將CSS樣式定義在該外部CSS樣式表文件中。如果已經(jīng)鏈接了外部CSS樣式文件，在該下拉列表中還將出現(xiàn)所鏈接的外部CSS樣式文件。任務(wù)3掌握設(shè)置CSS樣式拓展知識(shí)在CSS樣式定義對(duì)話(huà)框中可以對(duì)不同的分類(lèi)進(jìn)行詳細(xì)的設(shè)置。1。設(shè)置文本樣式在CSS樣式定義對(duì)話(huà)框左側(cè)的“分類(lèi)”列表框中選擇“類(lèi)型”選項(xiàng)，在右側(cè)可以設(shè)置CSS樣式的類(lèi)型參數(shù)，如圖所示?！邦?lèi)型”中的各選項(xiàng)參數(shù)含義如下。Font-family：用于設(shè)置當(dāng)前樣式所使用的字體。Font-size：定義文本大小?？梢酝ㄟ^(guò)選擇數(shù)字和度量單位來(lái)選擇特定的大小，也可以選擇相對(duì)大小。Font-style：將“正常”、“斜體”或“偏斜體”指定為字體樣式。默認(rèn)設(shè)置是“正?！?。Line-height：設(shè)置文本所在行的高度。該設(shè)置傳統(tǒng)上稱(chēng)為“前導(dǎo)”。選擇“正?！弊詣?dòng)計(jì)算字