g37dreamweaver cs6網(wǎng)頁設(shè)計立體化教程課件第7章

第7章?模板、庫、表單和行為的應(yīng)用DreamweaverCS6網(wǎng)頁設(shè)計立體化教程（微課版）高等教育立體化精品系列規(guī)劃教材7.1課堂案例：制作“客戶交流”網(wǎng)頁7.3課堂案例：制作“會員注冊”網(wǎng)頁內(nèi)容導(dǎo)航7.1.1創(chuàng)建模板7.1.2編輯模板7.1.3應(yīng)用與管理模板7.5項目實訓(xùn)7.6課后練習(xí)7.7技巧提升7.4課堂案例：制作“品牌展廳”網(wǎng)頁7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁7.1.1創(chuàng)建模板通過“新建”菜單可以輕松創(chuàng)建空白模板，其方法為：選擇【文件】/【新建】菜單命令，打開“新建文檔”對話框，選擇左側(cè)的“空模板”選項，在“模板類型”列表框中選擇“HTML模板”選項，在“布局”的列表框中選擇“<無>”選項。最后單擊按鈕即可創(chuàng)建一個空白的模板文件。1.創(chuàng)建空白模板7.1.1創(chuàng)建模板2.將網(wǎng)頁另存為模板打開“khjl.html”網(wǎng)頁文件，選擇【文件】/【另存為模板】菜單命令。打開“另存為模板”對話框，在“站點”下拉列表框中選擇“qlqxsite”選項，在“另存為”文本框中輸入“khjl”，單擊按鈕即可。7.1.2編輯模板1.創(chuàng)建可編輯區(qū)域?qū)⒉迦朦c定位到需要的位置，選擇【插入】/【模板對象】/【可編輯區(qū)域】菜單命令，或在“插入”面板中選擇“常用”工具欄，單擊“模板”下拉按鈕，在打開的下拉列表中選擇“可編輯區(qū)域”選項。打開“新建可編輯區(qū)域”對話框，在“名稱”文本框中輸入“嵌套表格”，單擊按鈕。此時插入點所在的單元格將出現(xiàn)創(chuàng)建的可編輯區(qū)域。7.1.2編輯模板2.更改可編輯區(qū)域名稱單擊“嵌套表格”可編輯區(qū)域的藍(lán)色底紋標(biāo)簽并將其選擇，在“屬性”面板的“名稱”文本框中將內(nèi)容修改為“導(dǎo)航欄目”，選擇“嵌套表格”可編輯區(qū)域中的“嵌套表格”文本，直接修改為“導(dǎo)航欄目”即可。7.1.2編輯模板3.取消可編輯區(qū)域標(biāo)簽創(chuàng)建的可編輯區(qū)域默認(rèn)會顯示藍(lán)色底紋的標(biāo)簽，如果不需要該對象，可將其取消。方法為：選擇可編輯區(qū)域內(nèi)的標(biāo)簽，然后選擇【修改】/【模板】/【刪除模板標(biāo)記】菜單命令即可。7.1.2編輯模板4.創(chuàng)建重復(fù)區(qū)域重復(fù)區(qū)域可以通過重復(fù)特定的項目來控制網(wǎng)頁布局效果。在模板中創(chuàng)建重復(fù)區(qū)域的方法為：選擇模板中需設(shè)置為重復(fù)區(qū)域的對象，或?qū)⒉迦朦c定位到要創(chuàng)建重復(fù)區(qū)域的位置，然后選擇【插入】/【模板對象】/【重復(fù)區(qū)域】菜單命令，打開“新建重復(fù)區(qū)域”對話框。在“名稱”文本框中輸入重復(fù)區(qū)域的名稱后，單擊按鈕即可。7.1.2編輯模板5.創(chuàng)建重復(fù)表格將插入點定位到需創(chuàng)建重復(fù)表格的位置，選擇【插入】/【模板對象】/【重復(fù)表格】菜單命令，打開“插入重復(fù)表格”對話框。在上方設(shè)置表格屬性，包括表格行列數(shù)、邊距、間距、寬度和邊框等，在下方的“起始行”和“結(jié)束行”文本框中指定表格中的哪些行包含在重復(fù)區(qū)域中，在“區(qū)域名稱”文本框中輸入重復(fù)表格名稱，完成后單擊按鈕即可。7.1.2編輯模板6.創(chuàng)建可選區(qū)域在模板文件中選擇需設(shè)置為可選區(qū)域的對象，然后選擇【插入】/【模板對象】/【可選區(qū)域】菜單命令，打開“新建可選區(qū)域”對話框。在“基本”選項卡的“名稱”文本框中輸入可選區(qū)域的名稱，單擊選中復(fù)選框可使可選區(qū)域在默認(rèn)狀態(tài)下為顯示狀態(tài)。單擊“高級”選項卡，單擊選中單選項，在右側(cè)的下拉列表框中可選擇已創(chuàng)建的模板參數(shù)名稱，完成后單擊按鈕即可。7.1.2編輯模板7.創(chuàng)建可編輯的可選區(qū)域可選區(qū)域是無法編輯的，要想對可選區(qū)域進(jìn)行編輯，則可以創(chuàng)建可編輯的可選區(qū)域?qū)ο螅浞椒椋涸谀０逦募性O(shè)置模板參數(shù)，將插入點定位到需創(chuàng)建可編輯可選區(qū)域的位置，然后選擇【插入】/【模板對象】/【可編輯的可選區(qū)域】菜單命令，打開“新建可選區(qū)域”對話框，按照設(shè)置可選區(qū)域的方法進(jìn)行設(shè)置，完成后單擊按鈕即可。7.1.3應(yīng)用與管理模板1.基于模板新建網(wǎng)頁選擇【文件】/【新建】菜單命令，打開“新建文檔”對話框，在對話框左側(cè)選擇“模板中的頁”選項，在“站點”列表框中選擇“qlqxsite”選項，并在右側(cè)的列表框中選擇“khjl”選項，單擊按鈕。此時將根據(jù)該模板創(chuàng)建網(wǎng)頁，當(dāng)鼠標(biāo)指針移動到網(wǎng)頁中的非可編輯區(qū)域時將變?yōu)榻脿顟B(tài)，表示不能對該內(nèi)容進(jìn)行編輯。7.1.3應(yīng)用與管理模板2.更新模板內(nèi)容選擇【修改】/【模板】/【更新頁面】菜單命令。打開“更新頁面”對話框，在“查看”下拉列表框中選擇“整個站點”選項，在右側(cè)的下拉列表框中選擇“qlqxsite”選項，單擊選

中復(fù)選框，然后依次單擊按鈕和按鈕，此時“khjl.html”網(wǎng)頁底部的標(biāo)簽信息將自動更新。7.1.3應(yīng)用與管理模板3.刪除模板打開“文件”面板，在其中展開“Templates”文件夾，在其中選擇需要刪除的模板文件，然后按【Delete】鍵刪除即可。如果站點中包含了通過該模板創(chuàng)建的一個或多個網(wǎng)頁，則刪除模板時Dreamweaver會打開提示對話框，單擊按鈕表示確認(rèn)模板的刪除。7.1.3應(yīng)用與管理模板4.脫離模板脫離模板可以使基于該模板創(chuàng)建的網(wǎng)頁中的所有區(qū)域都能編輯，從而使得網(wǎng)頁設(shè)計更加方便和自主。脫離模板的方法為：打開基于模板創(chuàng)建的網(wǎng)頁，然后選擇【修改】/【模板】/【從模板中分離】菜單命令即可將網(wǎng)頁脫離模板，此時將鼠標(biāo)指針移到網(wǎng)頁中的任意位置都不會出現(xiàn)禁用狀態(tài)，表示可以對這些對象進(jìn)行編輯。7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁7.3課堂案例：制作“會員注冊”網(wǎng)頁內(nèi)容導(dǎo)航7.2.1認(rèn)識“資源”面板7.2.2創(chuàng)建庫文件7.2.3應(yīng)用庫文件7.2.4編輯庫文件7.2.5更新庫文件7.2.6分離庫文件7.5項目實訓(xùn)7.6課后練習(xí)7.7技巧提升7.4課堂案例：制作“品牌展廳”網(wǎng)頁7.1課堂案例：制作“客戶交流”網(wǎng)頁7.2.1認(rèn)識“資源”面板“資源”面板是庫文件的載體。選擇【窗口】/【資源】菜單命令即可打開“資源”面板，單擊左側(cè)的“庫”按鈕，此時面板中顯示的便是庫文件資源的相關(guān)內(nèi)容。7.2.2創(chuàng)建庫文件1.將已有元素創(chuàng)建為庫文件如果某些網(wǎng)頁中已經(jīng)包含了可以創(chuàng)建為庫文件的元素，則可將其直接轉(zhuǎn)換為庫文件，并保存在“資源”面板中，其方法為：選擇需要創(chuàng)建為庫文件的對象，選擇【修改】/【庫】/【增加對象到庫】菜單命令，在“資源”面板中修改創(chuàng)建的庫文件名稱即可。7.2.2創(chuàng)建庫文件2.通過“資源”面板新建庫文件單擊“資源”面板下方的“新建庫項目”按鈕，在“資源”面板中將創(chuàng)建的庫文件名稱更改為“product”，單擊下方的“編輯”按鈕，此時將打開庫文件頁面，在其中創(chuàng)建出需要的庫文件內(nèi)容，保存庫文件并將其關(guān)閉，此時在“資源”面板中將看到創(chuàng)建的庫文件效果。7.2.3應(yīng)用庫文件將插入點定位到空白單元格中，打開“資源”面板，選擇列表框中的“product”選項，單擊按鈕。此時網(wǎng)頁中將插入選擇的庫文件內(nèi)容，且無法對其進(jìn)行編輯。7.2.4編輯庫文件創(chuàng)建的庫文件可隨時進(jìn)行修改，只需在“資源”面板中選擇需要修改的庫文件選項，然后單擊下方的“編輯”按鈕，或直接雙擊庫文件選項，在打開的庫文件頁面中進(jìn)行修改，完成后保存并關(guān)閉頁面即可。7.2.5更新庫文件編輯了庫文件后，所有網(wǎng)頁中添加的庫文件對象可通過更新來自動修改，從而提高網(wǎng)頁制作的效率。更新庫文件的方法為：選擇【修改】/【庫】/【更新頁面】菜單命令，打開“更新頁面”對話框，選擇“查看”下拉列表框中的“整個站點”選項，并在右側(cè)的下拉列表框中選擇庫文件所在的站點，單擊選中復(fù)選框，然后單擊按鈕即可。7.2.6分離庫文件添加到網(wǎng)頁中的庫文件不允許被編輯，只有通過對庫文件自身的內(nèi)容進(jìn)行修改并更新網(wǎng)頁的操作來實現(xiàn)編輯。但如果想對網(wǎng)頁中的某個庫文件進(jìn)行單獨修改，則可采用分離庫文件的方式來實現(xiàn)，其方法為：選擇網(wǎng)頁中需分離的庫文件，單擊“屬性”面板中的按鈕，或在網(wǎng)頁中的庫文件上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“從源文件中分離”命令，在打開的提示對話框中單擊按鈕即可。7.3課堂案例：制作“會員注冊”網(wǎng)頁7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁內(nèi)容導(dǎo)航7.3.1表單的基礎(chǔ)操作7.3.2在表單中添加各種元素7.5項目實訓(xùn)7.6課后練習(xí)7.7技巧提升7.4課堂案例：制作“品牌展廳”網(wǎng)頁7.1課堂案例：制作“客戶交流”網(wǎng)頁7.3.1表單的基礎(chǔ)操作制作表單頁面之前首先要創(chuàng)建表單，然后才能在表單區(qū)域內(nèi)添加表單對象。在Dreamweaver中組成表單的元素很有多，如文本字段、復(fù)選框、單選項、按鈕、列表和菜單等。1.表單的組成7.3.1表單的基礎(chǔ)操作將插入點定位到空白的單元格中，選擇【插入】/【表單】/【表單】菜單命令，或打開“插入”面板，切換到“表單”插入欄，選擇下方的“表單”選項，此時插入點處將顯示邊框為紅色虛線的表單區(qū)域。2.創(chuàng)建表單7.3.1表單的基礎(chǔ)操作要想利用表單頁面收集用戶信息，即通過單擊“提交”按鈕將表單內(nèi)容匯總到服務(wù)器上，就需要對表單屬性進(jìn)行設(shè)置，其方法為：選擇插入的表單或?qū)⒉迦朦c定位到表單區(qū)域中，利用“屬性”面板設(shè)置即可。3.設(shè)置表單屬性7.3.2在表單中添加各種元素將插入點定位到表單區(qū)域，在“插入”面板中選擇“文本字段”選項。打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“user”和“用戶名：”，單擊按鈕，在插入的文本字段的“用戶名：”文本右側(cè)插入若干空格，選擇文本字段表單元素，在“屬性”面板中將字符寬度和最多字符數(shù)均設(shè)置為“16”，并將初始值設(shè)置為“請輸入會員名稱”即可。1.添加單行文本字段7.3.2在表單中添加各種元素在“插入”面板中選擇“文本字段”選項。打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“password”和“密碼：”，單擊按鈕，選擇插入的文本對象，在“屬性”面板中將字符寬度和最多字符數(shù)均設(shè)置為“16”，單擊選中“類型”欄中的單選項，并將初始值設(shè)置為“請設(shè)置密碼”即可。2.添加密碼字段7.3.2在表單中添加各種元素在“插入”面板中選擇“文本字段”選項。打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“impression”和“公司印象：”，單擊按鈕，選擇插入的文本對象，在“屬性”面板中將字符寬度和行數(shù)分別設(shè)置為“32”和“3”，單擊選中“類型”欄中的單選項，并將初始值設(shè)置為“簡述對本公司產(chǎn)品的印象”即可。3.添加多行文本字段7.3.2在表單中添加各種元素在表單中添加隱藏域的方法為：將插入點定位到需插入隱藏域的位置，在“插入”面板中選擇“隱藏域”選項，此時將直接在網(wǎng)頁表單區(qū)域插入一個隱藏域，選擇該對象后，在“屬性”面板中設(shè)置其ID名稱并賦予相應(yīng)的值即可。4.添加隱藏域7.3.2在表單中添加各種元素在“插入”面板中選擇“復(fù)選框”選項，打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“shoes”和“鞋”，單擊按鈕。5.添加復(fù)選框7.3.2在表單中添加各種元素在表單中定位插入點，在“插入”面板中選擇“復(fù)選框組”選項，打開“復(fù)選框組”對話框。在列表框左側(cè)的“標(biāo)簽”欄中選擇某個選項后可更改復(fù)選框名稱，單擊上方的“添加”按鈕可增加組中的復(fù)選框。設(shè)置完成后單擊按鈕即可在表單中創(chuàng)建復(fù)選框組。6.添加復(fù)選框組7.3.2在表單中添加各種元素單選按鈕適合在多項中選擇其中一項的情況，如性別、職位等信息就可以利用單選按鈕來設(shè)置。在Dreamweaver中添加單選按鈕的方法為：在表單中定位插入點，在“插入”面板中選擇“單選按鈕”選項，打開“輸入標(biāo)簽輔助功能屬性”對話框，在其中設(shè)置ID和標(biāo)簽名稱后，單擊按鈕即可在表單中添加單選按鈕。7.添加單選按鈕7.3.2在表單中添加各種元素在“插入”面板中選擇“單選按鈕組”選項，打開“單選按鈕組”對話框，將列表框中“標(biāo)簽”欄下方的選項名稱分別更改為名稱，單擊兩次“添加”按鈕，在單選按鈕組中再添加兩個單選按鈕，繼續(xù)在“標(biāo)簽”欄中將新增的選項分別更改名稱，單擊按鈕。8.添加單選按鈕組7.3.2在表單中添加各種元素在“插入”面板中選擇“選擇（列表/菜單）”選項，打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“sex”和“性別：”，單擊按鈕。選擇插入的菜單，在“屬性”面板中單擊按鈕，打開“列表值”對話框，利用“添加”按鈕添加兩個名稱為“男”和“女”的項目標(biāo)簽，單擊按鈕。9.添加菜單7.3.2在表單中添加各種元素在“插入”面板中選擇“選擇（列表/菜單）”選項，打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“papers”和“選擇證件：”，單擊按鈕。選擇插入的列表（此時呈菜單樣式顯示），在“屬性”面板中單擊按鈕，打開“列表值”對話框，利用“添加”按鈕添加4個項目標(biāo)簽，單擊按鈕。10.添加列表7.3.2在表單中添加各種元素在“插入”面板中選擇“文件域”選項，打開“輸入標(biāo)簽輔助功能屬性”對話框，分別在“ID”文本框和“標(biāo)簽”文本框中輸入“head”和“上傳頭像：”，單擊按鈕。插入文件域，該對象由標(biāo)簽、文本框和按鈕組成，選擇文件域，利用“屬性”模板設(shè)置字符寬度和最多字符數(shù)分別為“42”和“40”。11.添加文件域7.3.2在表單中添加各種元素在“插入”面板中選擇“按鈕”選項。打開“輸入標(biāo)簽輔助功能屬性”對話框，在“ID”文本框中輸入“submit”，單擊按鈕。在其“屬性”面板的“值”文本框中輸入“提交”文本，在“動作”欄中單擊選中單選項，完成“提交”按鈕的創(chuàng)建。12.添加按鈕7.3.2在表單中添加各種元素在“插入”面板中選擇“圖像域”選項，打開“選擇圖像域文件”對話框，在其中選擇提供的“button.png”圖像素材，單擊按鈕。打開“輸入標(biāo)簽輔助功能屬性”對話框，在“ID”文本框中輸入“reset”，單擊按鈕。13.添加圖像域7.3.2在表單中添加各種元素在“插入”面板中選擇“字段集”選項，打開“字段集”對話框，在“標(biāo)簽”文本框中輸入“基本信息”，單擊按鈕。14.添加字段集7.4課堂案例：制作“品牌展廳”網(wǎng)頁7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁內(nèi)容導(dǎo)航7.4.1關(guān)于行為的基礎(chǔ)知識7.4.2常用行為的使用方法7.5項目實訓(xùn)7.6課后練習(xí)7.7技巧提升7.3課堂案例：制作“會員注冊”網(wǎng)頁7.1課堂案例：制作“客戶交流”網(wǎng)頁7.4.1關(guān)于行為的基礎(chǔ)知識行為是指在某種事件的觸發(fā)下，通過特定的過程以達(dá)到某種目的或?qū)崿F(xiàn)某種效果的方式。如瀏覽網(wǎng)頁時單擊某超鏈接（事件），瀏覽器將在此觸發(fā)事件下打開一個窗口（目的），這就是一個完整的行為。Dreamweaver中的行為由動作和事件兩部分組成，動作控制什么時候執(zhí)行行為，事件則控制執(zhí)行行為的內(nèi)容。不同的瀏覽器包含不同事件，其中大部分事件在各個瀏覽器中都被支持。1.行為的組成與事件的作用7.4.1關(guān)于行為的基礎(chǔ)知識選擇【窗口】/【行為】菜單命令或按【Shift+F4】組合鍵即可打開“行為”面板。2.認(rèn)識“行為”面板7.4.1關(guān)于行為的基礎(chǔ)知識添加行為是指將某個行為附加到指定的對象上，此對象可以是一個圖像、一段文本、一個超鏈接，也可以是整個網(wǎng)頁。添加行為的方法為：選擇需添加行為的對象，打開“行為”面板，單擊“添加行為”按鈕，在打開的下拉列表中選擇需要的行為選項，并在打開的對話框中設(shè)置行為屬性。完成后繼續(xù)在“行為”面板中已添加行為左側(cè)的列表框中設(shè)置事件即可。3.添加行為7.4.1關(guān)于行為的基礎(chǔ)知識添加行為后，可根據(jù)實際需要對行為進(jìn)行修改，其方法為：在“行為”面板的列表框中選擇要修改的行為，雙擊右側(cè)的行為名稱，在打開的對話框中重新進(jìn)行設(shè)置，單擊按鈕即可。3.修改行為7.4.1關(guān)于行為的基礎(chǔ)知識對于無用的行為，可利用“行為”面板及時將其刪除，以便更好地管理其他行為內(nèi)容。刪除行為的方法主要有以下幾種。4.刪除行為利用按鈕刪除：在“行為”面板列表框中選擇需刪除的行為，單擊上方的“刪除事件”按鈕。利用快捷鍵刪除：在“行為”面板列表框中選擇需刪除的行為，直接按【Delete】鍵。利用快捷菜單刪除：在“行為”面板列表框中選擇需刪除的行為，在其上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除行為”命令。7.4.2常用行為的使用方法在“行為”面板中單擊“添加行為”按鈕，在打開的下拉列表中選擇“彈出信息”選項，打開“彈出信息”對話框，在“消息”文本框中輸入需要顯示的文本內(nèi)容，完成后單擊按鈕。1.彈出信息7.4.2常用行為的使用方法在“行為”面板中單擊“添加行為”按鈕，在打開的下拉列表中選擇“打開瀏覽器窗口”選項，打開“打開瀏覽器窗口”對話框，單擊“要顯示的URL”文本框右側(cè)的按鈕，打開“選擇文件”對話框，在其中設(shè)置瀏覽器窗口顯示的內(nèi)容，然后單擊按鈕返回“打開瀏覽器窗口”對話框，將設(shè)置窗口寬度和窗口高度，單擊按鈕。選擇“行為”面板中已添加行為左側(cè)的事件選項，單擊出現(xiàn)的下拉按鈕，在打開的下拉列表中選擇“onClick”選項。2.打開瀏覽器窗口7.4.2常用行為的使用方法打開表單網(wǎng)頁，在表單區(qū)域中選擇需添加行為的表單或表單對象，在“行為”面板中單擊“添加行為”按鈕，在打開的下拉列表中選擇“檢查表單”選項，打開“檢查表單”對話框，按需要進(jìn)行設(shè)置后單擊按鈕即可。3.檢查表單7.4.2常用行為的使用方法在“行為”面板中單擊“添加行為”按鈕，在打開的下拉列表中選擇“交換圖像”選項，打開“交換圖像”對話框，在“圖像”列表框中選擇“圖像“big””選項，單擊“設(shè)定原始檔為”文本框右側(cè)的按鈕。打開“選擇圖像源文件”對話框，選擇提供的“1-2.jpg”圖像文件，單擊按鈕，返回“交換圖像”對話框，撤銷選中復(fù)選框，單擊按鈕，在“行為”面板中將所添加行為的事件更改為“onClick”。4.交換圖像7.4.2常用行為的使用方法在“行為”面板中單擊“添加行為”按鈕，在打開的下拉列表中選擇【效果】/【顯示/漸隱】菜單命令。打開“顯示/漸隱”對話框，分別將“漸隱自”和“漸隱到”文本框中的數(shù)值設(shè)置為“50”和“100”，單擊按鈕，在“行為”面板中將所添加行為的事件更改為“onMouseMove”。5.效果7.5項目實訓(xùn)7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁內(nèi)容導(dǎo)航7.5.1制作“合作交流”網(wǎng)頁7.5.2制作“在線留言”網(wǎng)頁7.5.3制作“登錄”板塊7.6課后練習(xí)7.7技巧提升7.3課堂案例：制作“會員注冊”網(wǎng)頁7.1課堂案例：制作“客戶交流”網(wǎng)頁7.4課堂案例：制作“品牌展廳”網(wǎng)頁7.5.1制作“合作交流”網(wǎng)頁本實訓(xùn)的目標(biāo)是通過模板來快速制作合作交流頁面，制作時可先創(chuàng)建模板，然后再應(yīng)用模板。本實訓(xùn)的最終效果如右圖所示。1.實訓(xùn)目標(biāo)7.5.1制作“合作交流”網(wǎng)頁在同一網(wǎng)站的不同頁面中，往往有許多相同的版塊，如網(wǎng)站Logo、Banner和版權(quán)區(qū)等，這些內(nèi)容應(yīng)盡量利用模板來設(shè)計。使用模板時一定要注意以下問題。模板文件決不允許出現(xiàn)錯誤內(nèi)容，包括錯誤的文字、圖像和超鏈接等，否則將直接影響整個網(wǎng)站的專業(yè)性。非固定版塊不用模板設(shè)計，否則非但不能提高效率，修改內(nèi)容時還會增加無謂的工作量和操作力度。

2.專業(yè)背景7.5.1制作“合作交流”網(wǎng)頁根據(jù)實訓(xùn)要求，本實訓(xùn)可先創(chuàng)建模板，然后對模板進(jìn)行編輯，最后通過創(chuàng)建的模板創(chuàng)建網(wǎng)頁頁面。3.操作思路7.5.2制作“在線留言”網(wǎng)頁本實訓(xùn)的目標(biāo)是制作“在線留言”網(wǎng)頁，該頁面的主要信息包括留言者的姓名、郵箱、單位、聯(lián)系電話、留言性質(zhì)、留言內(nèi)容等，參考效果如下圖所示。1.實訓(xùn)目標(biāo)7.5.2制作“在線留言”網(wǎng)頁在實際工作中制作表單頁面時需注意以下幾個方面，從而提高表單制作的專業(yè)水平。制作表單頁面前需先插入一個表單，然后向表單中添加各種表單對象，如果沒有插入表單而直接插入表單對象，Dreamweaver會彈出對話框詢問用戶是否添加表單。不要對表單對象進(jìn)行統(tǒng)一的命名，而應(yīng)根據(jù)實際需要進(jìn)行不同的設(shè)置，否則可能會出現(xiàn)選擇混亂。但有時也需要將名稱設(shè)置相同，如分別添加了兩個單選按鈕，如果名稱不一樣則會出現(xiàn)兩個都可選中的情況，如果將兩個對象設(shè)置為相同的名稱，則在網(wǎng)頁中將只能選中一個。很多表單頁面僅需收集用戶的一些文字信息，如用戶名、密碼、聯(lián)系方式、出生年月等，如需用戶提供一些文件信息，如單獨的個人簡歷、照片等，則可在表單中添加文件域，讓用戶可以通過單擊文件域按鈕來向表單中添加附加文件。2.專業(yè)背景7.5.2制作“在線留言”網(wǎng)頁完成本實訓(xùn)需要通過文本字段、單選按鈕組、按鈕等表單對象的添加來完成制作。其操作思路如下圖所示。3.操作思路7.5.3制作“登錄”板塊本實訓(xùn)的目標(biāo)是完善“蓉錦大學(xué)”網(wǎng)站“首頁”網(wǎng)頁的登錄板塊，要求實現(xiàn)頁面數(shù)據(jù)與后臺的交互，參考效果如下圖所示。1.實訓(xùn)目標(biāo)7.5.3制作“登錄”板塊網(wǎng)站中的各種登錄頁面不僅可以為網(wǎng)站服務(wù)器提供用戶登錄的數(shù)據(jù)，使管理者及時獲取網(wǎng)站訪問量等數(shù)據(jù)，它也是網(wǎng)站能否吸引用戶的關(guān)鍵頁面之一。越來越多的大型網(wǎng)站把登錄頁面和首頁放在一起設(shè)計，由此可見登錄頁面的重要性。一個出彩的登錄界面將提升網(wǎng)站的品質(zhì)，賦予網(wǎng)站獨特的氣質(zhì)，登錄界面也是一個發(fā)揮情感化設(shè)計，提升用戶體驗，拉近與用戶之間距離的重要手段。一般來講，注意以下幾點可使設(shè)計的登錄界面受到用戶歡迎。登錄界面簡潔大方通過精美的質(zhì)感體現(xiàn)登錄界面合理設(shè)計背景2.專業(yè)背景7.5.3制作“登錄”板塊完成本實訓(xùn)可先創(chuàng)建表單，然后向表單中添加各種元素，最后使用行為檢查表單。其操作思路如下圖所示。3.操作思路7.6課后練習(xí)7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁內(nèi)容導(dǎo)航練習(xí)1：制作“航班查詢”網(wǎng)頁練習(xí)2：制作“論壇注冊”網(wǎng)頁7.5項目實訓(xùn)7.7技巧提升7.3課堂案例：制作“會員注冊”網(wǎng)頁7.1課堂案例：制作“客戶交流”網(wǎng)頁7.4課堂案例：制作“品牌展廳”網(wǎng)頁練習(xí)1：制作“航班查詢”網(wǎng)頁本練習(xí)要求制作“航班查詢”網(wǎng)頁，主要通過列表/菜單、按鈕來完成，完成后的效果如右圖所示。練習(xí)2：制作“論壇注冊”網(wǎng)頁本練習(xí)要求打開“l(fā)untan_zc.html”網(wǎng)頁文件，根據(jù)所學(xué)的知識，制作一個論壇用戶注冊頁面，參考效果如右圖所示。7.7技巧提升7.2課堂案例：制作“產(chǎn)品介紹”網(wǎng)頁內(nèi)容導(dǎo)航1．表單制作技巧2．使用Spry驗證表單結(jié)構(gòu)3．調(diào)用JavaScript4．設(shè)置預(yù)先載入圖像5．獲取更多網(wǎng)絡(luò)行為7.5項目實訓(xùn)7.6課后練習(xí)7.3課堂案例：制作“會員注冊”網(wǎng)頁7.1課堂案例：制作“客戶交流”網(wǎng)頁7.4課堂案例：制作“品牌展廳”網(wǎng)頁技巧提升1.表單制作技巧設(shè)計表單時，如果表單結(jié)構(gòu)較為復(fù)雜或表單元素的位置排列和布局不如人意，利用單元格來分隔不同的表單元素，以實現(xiàn)復(fù)雜的表單布局，從而設(shè)計出布局合理、外觀精美的表單.如希望制作個性化的按鈕效果，可為按鈕創(chuàng)建一個專門的CSS樣式規(guī)則，通過在CSS樣式規(guī)則中設(shè)置按鈕文本樣式、背景和邊框等屬性來修飾按鈕；也可以直接使用表單對象中的圖像域來代替按鈕，這樣就可以將任何一副圖像作為按鈕來使用。選擇【