《新編網(wǎng)頁(yè)制作三劍客培訓(xùn)教程》課件第7章

第7章使用Dreamweaver模板快速建站7.1認(rèn)識(shí)模板7.2應(yīng)用模板7.3管理模板7.4上機(jī)實(shí)訓(xùn)7.1認(rèn)識(shí)模板7.1.1什么是模板7.1.2什么是嵌套模板7.1.3什么是模板區(qū)域7.1.4識(shí)別模板和基于模板的網(wǎng)頁(yè)7.1.1什么是模板

1.模板的概念模板是一種特殊類型的文檔(.dwt文檔)，用于設(shè)計(jì)“固定的”頁(yè)面布局，然后便可以基于模板創(chuàng)建網(wǎng)頁(yè)，創(chuàng)建的網(wǎng)頁(yè)會(huì)繼承模板的頁(yè)面布局。也就是說(shuō)模板是要?jiǎng)?chuàng)建的網(wǎng)頁(yè)的基礎(chǔ)。在創(chuàng)建模板的時(shí)候，可以指定哪些區(qū)域保持不變(不可編輯)，哪些區(qū)域可以進(jìn)行修改(可編輯區(qū)域)。2.模板的作用使用模板可以一次更新成百上千個(gè)頁(yè)面，從而大大提高網(wǎng)站開(kāi)發(fā)效率。從模板創(chuàng)建的網(wǎng)頁(yè)與該模板保持連接狀態(tài)(除非分離該網(wǎng)頁(yè))?？梢孕薷哪０宀⒘⒓锤禄谠撃０宓乃芯W(wǎng)頁(yè)中的設(shè)計(jì)布局。7.1.1什么是模板

3.模板技術(shù)與框架結(jié)構(gòu)的區(qū)別 優(yōu)點(diǎn)：建站效率高、網(wǎng)站運(yùn)行穩(wěn)定、便于頻繁更新網(wǎng)站內(nèi)容、修改布局后只上傳框架集網(wǎng)頁(yè)，主頁(yè)訪問(wèn)速度慢、主題頁(yè)訪問(wèn)速度快。 缺點(diǎn)：網(wǎng)頁(yè)內(nèi)容不容易實(shí)現(xiàn)居中對(duì)齊、網(wǎng)頁(yè)不能精確布局。模板的本質(zhì)是在制作網(wǎng)頁(yè)時(shí)先設(shè)計(jì)出一個(gè)模板，再通過(guò)模板創(chuàng)建不同的網(wǎng)頁(yè)，修改模板時(shí)可以自動(dòng)更新基于模板的網(wǎng)頁(yè)。在網(wǎng)頁(yè)瀏覽時(shí)不依賴模板文件。 優(yōu)點(diǎn)：建站效率高、網(wǎng)站運(yùn)行穩(wěn)定、修改布局后必須上傳所有網(wǎng)頁(yè)，主頁(yè)訪問(wèn)速度與主題頁(yè)相同；網(wǎng)頁(yè)能精確布局、可以實(shí)現(xiàn)所有效果。 缺點(diǎn)：如果模板與基于模板的網(wǎng)頁(yè)存放目錄級(jí)別不同時(shí)，容易產(chǎn)生錯(cuò)誤；不便于頻繁更新網(wǎng)站內(nèi)容；如果模板文件進(jìn)行了結(jié)構(gòu)性的修改，很有可能造成模板不能更新網(wǎng)頁(yè)，從而給網(wǎng)站更新帶來(lái)很多麻煩。7.1.2什么是嵌套模板

嵌套模板是指其設(shè)計(jì)和可編輯區(qū)域都基于另一個(gè)模板的模板。嵌套模板對(duì)于控制共享許多設(shè)計(jì)元素的站點(diǎn)頁(yè)面很有用，但在各頁(yè)之間有些差異。例如，基本模板中可能包含更寬廣的設(shè)計(jì)區(qū)域，并且可以由站點(diǎn)的許多內(nèi)容提供者使用，而嵌套模板可以進(jìn)一步定義站點(diǎn)內(nèi)特定部分頁(yè)面中的可編輯區(qū)域，適合制作具有多級(jí)目錄跳轉(zhuǎn)的網(wǎng)站，不同的欄目之間既有完全相同的區(qū)域，又有個(gè)性化區(qū)域。7.1.3什么是模板區(qū)域1.可編輯區(qū)域可編輯區(qū)域控制基于模板的頁(yè)面中有哪些區(qū)域可以編輯。也就是說(shuō)，當(dāng)在模板文件中創(chuàng)建了可編輯區(qū)域后，在通過(guò)模板生成的網(wǎng)頁(yè)中只有這些可編輯區(qū)域才能在Dreamweaver中修改。7.1.3什么是模板區(qū)域2.可選區(qū)域可選區(qū)域是模板中的區(qū)域，在編輯基于模板的網(wǎng)頁(yè)時(shí)可將其設(shè)置為顯示或隱藏，如圖7-3所示。插入可選區(qū)域以后，既可以為模板參數(shù)設(shè)置特定的值，也可以為模板區(qū)域定義條件語(yǔ)句(If...else語(yǔ)句)?？梢允褂煤?jiǎn)單的“真或假”操作，也可以定義比較復(fù)雜的條件語(yǔ)句和表達(dá)式。如有必要，可以在以后對(duì)這個(gè)可選區(qū)域進(jìn)行修改。模板用戶可以根據(jù)定義的條件在其創(chuàng)建的基于模板的網(wǎng)頁(yè)文檔中編輯參數(shù)并控制是否顯示可選區(qū)域。7.1.4識(shí)別模板和基于模板的網(wǎng)頁(yè)1.在設(shè)計(jì)視圖中識(shí)別模板在【設(shè)計(jì)】視圖中，可編輯區(qū)域出現(xiàn)在【文檔】窗口的預(yù)設(shè)高亮顏色的矩形外框中。每個(gè)區(qū)域的左上角都會(huì)出現(xiàn)一個(gè)小的標(biāo)簽，其中顯示該區(qū)域的名稱。通過(guò)查看【文檔】窗口中的標(biāo)題欄，可以識(shí)別模板文件。模板文件的標(biāo)題欄中包含“<<模板>>”字樣，并且模板文件的擴(kuò)展名為.dwt。7.1.4識(shí)別模板和基于模板的網(wǎng)頁(yè)2.在【設(shè)計(jì)】視圖中識(shí)別基于模板的網(wǎng)頁(yè)在【設(shè)計(jì)】視圖的基于模板的網(wǎng)頁(yè)文檔中，【文檔】窗口中的可編輯區(qū)域四周會(huì)顯示預(yù)設(shè)高亮顏色的矩形外框。每個(gè)區(qū)域的左上角都會(huì)出現(xiàn)一個(gè)小的標(biāo)簽，其中顯示該區(qū)域的名稱。除可編輯區(qū)域的外框之外，整個(gè)頁(yè)面周圍也會(huì)顯示其他顏色的外框，右上角給出該文檔的基礎(chǔ)模板的名稱，如圖7-6所示。這一高亮矩形提醒相應(yīng)網(wǎng)頁(yè)文檔是基于某個(gè)模板的，不能更改可編輯區(qū)域之外的內(nèi)容。7.2應(yīng)用模板7.2.1創(chuàng)建模板7.2.2使用可編輯區(qū)域7.2.3使用可選區(qū)域7.2.4使用重復(fù)區(qū)域7.2.5創(chuàng)建嵌套模板7.2.1創(chuàng)建模板1.基于現(xiàn)有網(wǎng)頁(yè)文檔創(chuàng)建模板可以基于現(xiàn)有網(wǎng)頁(yè)文檔創(chuàng)建模板，這種方法適用于已經(jīng)有現(xiàn)成的布局好的網(wǎng)頁(yè)，希望將設(shè)計(jì)布局應(yīng)用到模板中。7.2.1創(chuàng)建模板(1)打開(kāi)要另存為模板的文檔(“ch5\5.5.2-1.html”)，執(zhí)行下列操作之一。 在菜單欄中選擇【文件】→【另存為模板】命令。 在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【創(chuàng)建模板】命令。 在【插入】工具欄的【常用】選項(xiàng)卡中，單擊【模板】按鈕右側(cè)的下三角按鈕，從彈出的菜單中選擇【創(chuàng)建模板】命令，如圖7-7所示，彈出【另存模板】對(duì)話框。圖7-7選擇【創(chuàng)建模板】命令7.2.1創(chuàng)建模板(2)從【站點(diǎn)】下拉列表框中選擇一個(gè)用來(lái)保存模板的站點(diǎn)，然后在【另存為】對(duì)話框中為模板輸入一個(gè)唯一的名稱“aoyun0”。(3)單擊【保存】按鈕，Dreamweaver將模板文件以“DWT”格式保存在站點(diǎn)本地根文件夾中的“Templates”文件夾中，如圖7-9所示。如果該“Templates”文件夾在站點(diǎn)中尚不存在，Dreamweaver將在保存新建模板時(shí)自動(dòng)創(chuàng)建該文件夾。圖7-9【文件】面板圖7-9【文件】面板

7.2.1創(chuàng)建模板2.在資源面板中創(chuàng)建空白模板在資源面板中創(chuàng)建空白模板的操作步驟如下。(1)在【資源】面板(在菜單欄中選擇【窗口】→【資源】命令或單擊【文件】面板中的【資源】選項(xiàng)卡，即可打開(kāi)【資源】面板)中，單擊面板左側(cè)的【模板】圖標(biāo)。(2)單擊【資源】面板底部的【新建模板】按鈕(或在右鍵快捷中選擇菜單【新建模板】命令)，一個(gè)新的、無(wú)標(biāo)題模板將添加到【資源】面板的模板列表中，如圖7-10所示。圖7-9【文件】面板圖7-10【資源】面板7.2.1創(chuàng)建模板3.在文件菜單中創(chuàng)建空白模板在文件菜單中創(chuàng)建空白模板的操作步驟如下。(1)在菜單欄中選擇【文件】→【新建】命令，彈出【新建文檔】對(duì)話框，如圖7-11所示。圖7-9【文件】面板圖7-11【新建文檔】對(duì)話框7.2.1創(chuàng)建模板(3)在菜單欄中選擇【文件】→【保存】命令，可能會(huì)彈出【警告】對(duì)話框，如圖7-12所示。

(4)單擊【確定】按鈕后，彈出【另存模板】對(duì)話框進(jìn)行保存即可。圖7-9【文件】面板圖7-12【警告】對(duì)話框7.2.2使用可編輯區(qū)域1.創(chuàng)建模板創(chuàng)建模板的操作步驟如下。(1)在【文件】面板中打開(kāi)“ch5\5.5.2-1.html”網(wǎng)頁(yè)。(2)在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【創(chuàng)建模板】命令，彈出【另存模板】對(duì)話框，如圖7-13所示。圖7-9【文件】面板圖7-13【另存模板】對(duì)話框7.2.2使用可編輯區(qū)域(3)在【另存為】文本框中輸入“jx”保存，彈出【提示】對(duì)話框，如圖7-14所示。圖7-9【文件】面板圖7-14【提示】對(duì)話框7.2.2使用可編輯區(qū)域(4)單擊【是】按鈕，網(wǎng)頁(yè)“5.5.2-1.html”就被另存為“jx.dwt”模板文件。(5)選中圖片上面單元格中的文本，如圖7-15所示，將其刪除(保持插入點(diǎn)在文本所在單元格中)。圖7-9【文件】面板圖7-15選中文本7.2.2使用可編輯區(qū)域(6)在【插入】工具欄的【常用】選項(xiàng)卡中單擊【模板】按鈕，在彈出的菜單中選擇【可編輯區(qū)域】命令，如圖7-16所示，彈出【新建可編輯區(qū)域】對(duì)話框。圖7-9【文件】面板圖7-16選擇【可編輯區(qū)域】命令7.2.2使用可編輯區(qū)域(7)在【名稱】文本框中輸入“文本”，單擊【確定】按鈕，插入“文本”可編輯區(qū)域。(8)將圖片刪除，選中圖片所在的表格，重復(fù)步驟(4)～(6)，插入“圖片”可編輯區(qū)域，如圖7-18所示。(9)在菜單欄中選擇【文件】→【保存】命令保存模板，并關(guān)閉模板文件。圖7-9【文件】面板圖7-18插入的“圖片”可編輯區(qū)域7.2.2使用可編輯區(qū)域2.通過(guò)模板生成基于模板的網(wǎng)頁(yè)通過(guò)模板生成基于模板的網(wǎng)頁(yè)的操作步驟如下。(1)在【資源】面板(在菜單欄中選擇【窗口】→【資源】命令，即可打開(kāi)【資源】面板)中，右擊“jx”模板文件，在彈出的右鍵快捷菜單中選擇【從模板新建】命令，如圖7-19所示，創(chuàng)建一個(gè)基于模板“jx.dwt”的網(wǎng)頁(yè)。圖7-19選擇【從模板新建】命令7.2.2使用可編輯區(qū)域(2)在網(wǎng)頁(yè)中的“文本”可編輯區(qū)域[1972年的慕尼黑奧運(yùn)會(huì)(小獵狗)]和“圖片”可編輯區(qū)域(20.jpg)中插入相應(yīng)內(nèi)容，保存網(wǎng)頁(yè)為“ch7\1972.html”，并關(guān)閉網(wǎng)頁(yè)。(3)重復(fù)步驟(1)～(2)分別創(chuàng)建基于模板“jx.dwt”的其他奧運(yùn)吉祥物的網(wǎng)頁(yè)，如圖7-20所示。圖7-20創(chuàng)建其他奧運(yùn)吉祥物的網(wǎng)頁(yè)7.2.2使用可編輯區(qū)域3.通過(guò)模板修改導(dǎo)航鏈接通過(guò)模板修改導(dǎo)航鏈接的操作步驟如下。(1)關(guān)閉所有已經(jīng)打開(kāi)編輯的基于模板的網(wǎng)頁(yè)，在【文件】面板打開(kāi)模板文件“Templates\jx.dwt”。7.2.2使用可編輯區(qū)域(2)選中鏈接文字“1972年的慕尼黑奧運(yùn)會(huì)(小獵狗)”，在【屬性】面板中將鏈接指向到通過(guò)此模板生成的“1972.html”網(wǎng)頁(yè)文件，如圖7-21所示。(3)重復(fù)步驟(2)將左側(cè)導(dǎo)航欄鏈接全部修改到通過(guò)模板創(chuàng)建的相應(yīng)網(wǎng)頁(yè)上。圖7-21修改鏈接7.2.2使用可編輯區(qū)域4.保存模板將修改更新到所有基于模板的網(wǎng)頁(yè)上保存模板的操作步驟如下。(1)在菜單欄中選擇【文件】→【保存】命令，彈出【更新模板文件】對(duì)話框，如圖7-22所示。圖7-22【更新模板文件】對(duì)話框7.2.2使用可編輯區(qū)域(2)單擊對(duì)話框中的【更新】按鈕，彈出【更新頁(yè)面】對(duì)話框，并顯示更新過(guò)程，根據(jù)網(wǎng)頁(yè)多少所需的更新時(shí)間也不盡相同，最后顯示【完成】字樣，即更新完畢，如圖7-23所示。(3)關(guān)閉模板文件，打開(kāi)第一個(gè)網(wǎng)頁(yè)進(jìn)行瀏覽。圖7-23【更新頁(yè)面】對(duì)話框

7.2.3使用可選區(qū)域下面仍以“奧運(yùn)吉祥物網(wǎng)站”為例，說(shuō)明可選區(qū)域的用法。(1)打開(kāi)模板文件“Templates\jx.dwt”，選中“圖片”可編輯區(qū)域中的“表格”，如圖7-24所示，按<Ctrl>+<C>組合鍵將其復(fù)制到剪貼板上。圖7-24選中“圖片”可編輯區(qū)域中的“表格”7.2.3使用可選區(qū)域(2)單擊“圖片”可編輯區(qū)域中的標(biāo)題“圖片”，將可編輯區(qū)域選中，按<Delete>鍵將其刪除。(3)按<Ctrl>+<V>組合鍵將刪除的表格粘貼到原來(lái)位置。選中表格以后在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【可編輯的可選區(qū)域】命令，彈出【新建可選區(qū)域】對(duì)話框，在【名稱】文本框中輸入“圖片可選”，如圖7-25所示，單擊【確定】按鈕。圖7-25【新建可選區(qū)域】對(duì)話框7.2.3使用可選區(qū)域(4)單擊“If圖片可選”外面的可編輯區(qū)域標(biāo)題“EditRegion4”，選中可編輯區(qū)域“EditRegion4”，在【屬性】面板的【名稱】文本框中輸入【圖片】，如圖7-26所示。(5)保存模板文件，并更新此前基于模板生成的網(wǎng)頁(yè)后，關(guān)閉模板文件。圖7-26可編輯區(qū)域的【屬性】面板7.2.3使用可選區(qū)域(5)保存模板文件，并更新此前基于模板生成的網(wǎng)頁(yè)后，關(guān)閉模板文件。(6)在菜單欄中選擇【文件】→【新建】命令，彈出【新建文檔】對(duì)話框，如圖7-27所示。在對(duì)話框中選擇【模板中的頁(yè)】圖標(biāo)，在【站點(diǎn)】列表框中選擇“站點(diǎn)實(shí)例”，在【站點(diǎn)“站點(diǎn)實(shí)例”的模板】列表框中選擇“jx”模板后，單擊【創(chuàng)建】按鈕，將創(chuàng)建一個(gè)基于模板“jx”的網(wǎng)頁(yè)。圖7-27【新建文檔】對(duì)話框7.2.4使用重復(fù)區(qū)域

如果用一個(gè)具有重復(fù)區(qū)域的模板生成了網(wǎng)頁(yè)，那么網(wǎng)頁(yè)中重復(fù)區(qū)域部分就會(huì)出現(xiàn)控制按鈕組，如圖7-31所示?！局貜?fù)區(qū)域】各選項(xiàng)的意義如下。 單擊【增項(xiàng)】按鈕增加一個(gè)重復(fù)區(qū)域。 單擊【刪除】按鈕刪除已選的重復(fù)區(qū)域。 單擊【向下箭頭】按鈕將一個(gè)重復(fù)區(qū)域向下移動(dòng)一格。 單擊【向上箭頭】按鈕將一個(gè)重復(fù)區(qū)域向上移動(dòng)一格。7.2.5創(chuàng)建嵌套模板

創(chuàng)建嵌套模板最簡(jiǎn)單的方法是將基于模板生成的網(wǎng)頁(yè)另存為模板即可。其具體操作步驟如下。(1)在【資源】面板的【模板】列表框中右擊要作為創(chuàng)建新網(wǎng)頁(yè)文檔基礎(chǔ)的模板，然后從右鍵快捷菜單中選擇【從模板新建】命令。(2)在菜單欄中選擇【文件】→【另存模板】命令，將新網(wǎng)頁(yè)文檔另存為嵌套模板。(3)在【另存為】對(duì)話框中輸入模板名稱，然后單擊【確定】按鈕。7.3管理模板7.3.1編輯、更新和刪除模板文件7.3.2在現(xiàn)有網(wǎng)頁(yè)中應(yīng)用或刪除模板7.3.1編輯、更新和刪除模板文件1.重命名模板(1)單擊模板的名稱，選中該模板。(2)再次單擊模板的名稱以便使文本可選，然后輸入一個(gè)新名稱。(3)在【資源】面板中的另一個(gè)區(qū)域中單擊使更改生效。(4)系統(tǒng)彈出【警告】對(duì)話框，詢問(wèn)用戶是否要更新基于此模板的文檔。(5)單擊【更新】按鈕，更新站點(diǎn)中所有基于此模板的文檔。2.打開(kāi)編輯模板在【資源】面板中，雙擊模板的名稱或單擊模板的名稱使其選中后，單擊【編輯】按鈕即可打開(kāi)模板進(jìn)行編輯。7.3.1編輯、更新和刪除模板文件3.手動(dòng)更新基于模板的文檔手動(dòng)更新可以更新站點(diǎn)的所有頁(yè)面，也可以只更新特定的頁(yè)面。在編輯模板之后進(jìn)行保存時(shí)，系統(tǒng)會(huì)提示更新。如果用戶未單擊【更新】按鈕，便失去了自動(dòng)更新的機(jī)會(huì)，這種情況下用戶可以使用手動(dòng)更新。(1)在菜單欄中選擇【修改】→【模板】→【更新頁(yè)面】命令，彈出【更新頁(yè)面】對(duì)話框，如圖7-32所示。(2)單擊【開(kāi)始】按鈕即可。圖7-32【更新頁(yè)面】對(duì)話框7.3.1編輯、更新和刪除模板文件4.刪除模板要?jiǎng)h除模板文件可以執(zhí)行如下操作之一。 在【資源】面板中，單擊面板左側(cè)的【模板】圖標(biāo)，單擊模板的名稱以選擇該模板文件，單擊面板底部的【刪除】按鈕，然后確認(rèn)要?jiǎng)h除該模板。 在【資源】面板中，單擊模板的名稱以選擇該模板文件，按<Delete>鍵，然后確認(rèn)要?jiǎng)h除該模板。 在【文件】面板中“Templates”文件夾下，單擊模板的名稱以選擇該模板文件，按<Delete>鍵，然后確認(rèn)要?jiǎng)h除該模板。7.3.2在現(xiàn)有網(wǎng)頁(yè)中應(yīng)用或刪除模板1.將模板應(yīng)用于現(xiàn)有文檔(1)打開(kāi)要應(yīng)用模板的文檔。(2)在菜單欄中選擇【修改】→【模板】→【應(yīng)用模板到頁(yè)】命令，彈出【選擇模板】對(duì)話框，如圖7-33所示。(3)從【模板】列表框中選擇一個(gè)模板并單擊【選定】按鈕。圖7-33【選擇模板】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例1.實(shí)訓(xùn)目的綜合利用前面所講內(nèi)容制作“奧運(yùn)之旅”網(wǎng)站，介紹歷屆奧運(yùn)會(huì)徽、奧運(yùn)火炬、奧運(yùn)吉祥物和奧運(yùn)獎(jiǎng)牌的一些情況，網(wǎng)站主頁(yè)最終效果如圖7-34所示。本實(shí)訓(xùn)最終效果文件見(jiàn)“站點(diǎn)實(shí)例”(WebDemo\aoyun)，所用素材見(jiàn)“站點(diǎn)實(shí)例”(WebDemo\AY_Media\)。7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例2.實(shí)訓(xùn)分析從網(wǎng)站整體效果來(lái)看，這是一個(gè)典型的具有2級(jí)目錄導(dǎo)航的網(wǎng)站。實(shí)現(xiàn)2級(jí)目錄導(dǎo)航可以通過(guò)嵌套框架或嵌套模板來(lái)實(shí)現(xiàn)，這里作者通過(guò)1個(gè)基本模板和4個(gè)嵌套模板(1個(gè)欄目1個(gè))來(lái)實(shí)現(xiàn)。3.實(shí)訓(xùn)步驟(1)啟動(dòng)Dreamweaver軟件，在【文件】面板中右擊【站點(diǎn)】，在彈出的右鍵快捷菜單中選擇【新建文件夾】命令，在站點(diǎn)根目錄下創(chuàng)建“aoyun”文件夾。(2)在【資源】面板中單擊【模板】圖標(biāo)，在彈出的菜單中選擇【新建模板】命令，如圖7-39所示，創(chuàng)建一個(gè)模板文件并改名為“aoyunB”(作為基本模板)。

7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(1)啟動(dòng)Dreamweaver軟件，在【文件】面板中右擊【站點(diǎn)】，在彈出的右鍵快捷菜單中選擇【新建文件夾】命令，在站點(diǎn)根目錄下創(chuàng)建“aoyun”文件夾。(2)在【資源】面板中單擊【模板】圖標(biāo)，在彈出的菜單中選擇【新建模板】命令，如圖7-39所示，創(chuàng)建一個(gè)模板文件并改名為“aoyunB”(作為基本模板)。圖7-39【資源】面板圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(3)雙擊“aoyunB”使其進(jìn)入編輯狀態(tài)，并進(jìn)入【設(shè)計(jì)】視圖。(4)在菜單欄中選擇【修改】→【頁(yè)面屬性】命令，彈出【頁(yè)面屬性】對(duì)話框，如圖7-40所示。設(shè)置【文本顏色】為“黑色”、【背景顏色】為淺“藍(lán)色”、【上邊距】為“2像素”、其他邊距為“0像素”。圖7-39【資源】面板圖7-40【頁(yè)面屬性】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(5)在菜單欄中選擇【插入記錄】→【表格】命令，插入一個(gè)表格(1行，1列，760像素寬，0邊框，0邊距和1間距)，【表格】對(duì)話框中的表格屬性設(shè)置如圖7-41所示。圖7-39【資源】面板圖7-41【表格】對(duì)話框中的表格屬性設(shè)置7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(6)在【CSS】面板中單擊【新建樣式表規(guī)則】按鈕，彈出【新建CSS規(guī)則】對(duì)話框，設(shè)置相關(guān)選項(xiàng)為“【類】、【table_bk】、【僅對(duì)該文檔】”，如圖7-42所示。圖7-39【資源】面板圖7-42【新建CSS規(guī)則】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(7)單擊【確定】按鈕，彈出【table_bk的CSS規(guī)則定義】對(duì)話框，在【分類】列表框中選擇【邊框】選項(xiàng)，設(shè)置為“【實(shí)線】、【1像素】、【黑色】”，如圖7-43所示。圖7-39【資源】面板圖7-43【table_bk的CSS規(guī)則定義】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(8)單擊【確定】按鈕關(guān)閉對(duì)話框。在【文檔】窗口選中表格，在【屬性】面板的【類】下拉列表框中選擇剛才定義的“table_bk”類規(guī)則，并在【對(duì)齊】下拉列表框中選擇【居中對(duì)齊】，如圖7-44所示。圖7-39【資源】面板圖7-44【屬性】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(9)將插入點(diǎn)定位在步驟(5)～(8)建立的黑邊表格中，在菜單欄中選擇【插入記錄】→【表格】命令，插入一個(gè)表格(5行，1列，寬760像素，0邊框，0邊距和1間距)，如圖7-45所示。圖7-39【資源】面板圖7-45插入一個(gè)表格7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(10)在第一行插入圖片文件“AY_Media\top_1.jpg”，第二行插入Flash動(dòng)畫(huà)文件“AY_Media\top.swf”。(11)在第三行插入一個(gè)表格(1行，7列，寬760像素，0邊框，0邊距和1間距)，拖動(dòng)鼠標(biāo)同時(shí)選中7個(gè)單元格，在【屬性】面板中將其【背景顏色】定義為“深藍(lán)色”，除第一個(gè)單元格外每個(gè)單元格都插入圖片文件“AY_Media\anniu.gif”，并分別輸入“主頁(yè)”、“奧運(yùn)會(huì)徽”、“奧運(yùn)火炬”、“奧運(yùn)吉祥物”、“奧運(yùn)獎(jiǎng)牌”和“聯(lián)系我們”，如圖7-46所示。圖7-39【資源】面板圖7-46插入的1行7列表格與輸入的相關(guān)文字7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(12)將插入點(diǎn)定位在第四行單元格中，在【屬性】面板的【垂直】下拉列表框中選擇【頂端】選項(xiàng)。在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【可編輯區(qū)域】命令，彈出【新建可編輯區(qū)域】對(duì)話框，在【名稱】文本框中輸入“主頁(yè)(可編輯)”，如圖7-47所示。圖7-39【資源】面板圖7-47【新建可編輯區(qū)域】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(13)單擊【確定】按鈕，插入一個(gè)可編輯區(qū)域，將可編輯區(qū)域內(nèi)部自動(dòng)生成的文字“主頁(yè)(可編輯)”刪除。(14)將插入點(diǎn)定位在第五行單元格中，在【屬性】面板的【水平】下拉列表框中選擇【居中對(duì)齊】選項(xiàng)、在【背景顏色】【拾色器】中選擇“深藍(lán)色”。在單元格中輸入“教育技術(shù)教研室數(shù)字媒體應(yīng)用組@2008年2月18日”(作為本站的版權(quán)信息欄)。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(15)在【CSS樣式】面板中單擊【新建CSS規(guī)則】按鈕，添加一個(gè)名稱為“xx”、【僅對(duì)該文檔】的【類】樣式，在其【類型】選項(xiàng)區(qū)中將【大小】設(shè)置為“11像素”、【行高】設(shè)置為“20像素”、【顏色】設(shè)置為“白色”，并在【修飾】選項(xiàng)區(qū)中勾選【無(wú)】復(fù)選框，【XX的CSS規(guī)則定義】對(duì)話框設(shè)置如圖7-48所示，單擊【確定】按鈕。圖7-39【資源】面板圖7-48【XX的CSS規(guī)則定義】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(16)將第五行單元格中文字“教育技術(shù)教研室數(shù)字媒體應(yīng)用組@2008年2月18日”選中，在【屬性】面板的【樣式】下拉列表框中選擇“xx”選項(xiàng)，基本模板aoyun_B.dwt最終效果如圖7-49所示。圖7-39【資源】面板圖7-49基本模板aoyun_B.dwt最終效果7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(17)在【CSS樣式】面板中新建名稱為“a:link”的【高級(jí)】規(guī)則，【類型】選項(xiàng)區(qū)中屬性設(shè)置為：【大小】“12像素”、【顏色】“白色”。(18)在【CSS樣式】面板中新建名稱為“a:visited”的【高級(jí)】規(guī)則，【類型】選項(xiàng)區(qū)中屬性設(shè)置為：【大小】“12像素”、【顏色】“淺黃色”。(19)在【CSS樣式】面板中新建名稱為“a:hover”的【高級(jí)】規(guī)則，【類型】選項(xiàng)區(qū)中屬性設(shè)置為：【大小】“12像素”、【顏色】“紅色”；【背景】選項(xiàng)區(qū)中屬性設(shè)置為：【背景顏色】“黃色”。(20)在【CSS樣式】面板中新建名稱為“a:active”的【高級(jí)】規(guī)則，【類型】選項(xiàng)區(qū)中屬性設(shè)置為：【大小】“12像素”、【顏色】“紅色”。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(21)在【CSS樣式】面板中新建名稱為“text”的【類】規(guī)則，【區(qū)塊】選項(xiàng)區(qū)中屬性設(shè)置為：【文字縮進(jìn)】“2字體高”。最后，模板中的【CSS樣式】面板如圖7-50所示。圖7-39【資源】面板圖7-50【CSS樣式】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(22)關(guān)閉基本模板文件“aoyun_B.dwt”，在菜單欄中選擇【文件】→【新建】命令，彈出【新建文檔】對(duì)話框，單擊【模板中的頁(yè)】圖標(biāo)，在【站點(diǎn)】列表框中選擇【站點(diǎn)實(shí)例】選項(xiàng)，在【站點(diǎn)“站點(diǎn)實(shí)例”的模板】列表框中選擇“aoyun_B”選項(xiàng)，如圖7-51所示，單擊【創(chuàng)建】按鈕，創(chuàng)建基于模板的空白網(wǎng)頁(yè)。圖7-39【資源】面板圖7-51【新建文檔】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(23)按<Ctrl>+<S>組合鍵將網(wǎng)頁(yè)保存到“aoyun\aoyun_index.html”。(24)打開(kāi)“AY_Media\主頁(yè)內(nèi)容.txt”文件，將其文字內(nèi)容復(fù)制到可編輯區(qū)域中。將標(biāo)題以外的段落選中，在【屬性】面板中應(yīng)用“text”樣式，最后效果如圖7-52所示。圖7-39【資源】面板圖7-52主頁(yè)最后效果7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(25)保存主頁(yè)“aoyun_index.html”。在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【創(chuàng)建嵌套模板】命令，彈出【另存模板】對(duì)話框，命名為“aoyun_huihui”，如圖7-53所示，單擊【保存】按鈕。(26)彈出【要更新鏈接嗎？】對(duì)話框，單擊【是】按鈕，創(chuàng)建第一個(gè)欄目“奧運(yùn)會(huì)徽”的嵌套模板“aoyun_huihui”。圖7-39【資源】面板圖7-53【另存模板】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(27)將“主頁(yè)(可編輯區(qū))”中的文字全部刪除(包括“空格”“回車”等)。(28)在【插入】工具欄的【常用】選項(xiàng)卡中單擊【表格】按鈕，插入一個(gè)表格(1行，2列，寬760像素，0邊框，12邊距和0間距)。(29)在【屬性】面板的【垂直】下拉列表框中選擇【頂端】選項(xiàng)，并將左側(cè)單元格【背景顏色】設(shè)置為“深藍(lán)色”，如圖7-54所示。圖7-39【資源】面板圖7-54嵌套模板設(shè)置效果7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(30)在左側(cè)單元格中插入一個(gè)表格(13行，2列，寬225像素，0邊框，0邊距和0間距)。將第一行的2個(gè)單元格合并，并在其中輸入“奧運(yùn)會(huì)徽”，在其他各行的左側(cè)單元格中分別插入圖片文件“AY_Media\anniu.gif”，右側(cè)輸入相應(yīng)文字內(nèi)容(素材見(jiàn)“AY_Media\huihui\奧運(yùn)會(huì)徽.txt”)，嵌套模板導(dǎo)航欄如圖7-55所示。圖7-39【資源】面板圖7-55嵌套模板導(dǎo)航欄7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(31)將插入點(diǎn)定位在右側(cè)單元格中，在菜單欄中選擇【插入記錄】→【模板對(duì)象】→【可編輯區(qū)域】命令，插入一個(gè)名為“會(huì)徽(可編輯)”的可編輯區(qū)域，并將藍(lán)色邊框里的文字“會(huì)徽(可編輯)”刪除。(32)保存并關(guān)閉“奧運(yùn)會(huì)徽”的欄目嵌套模板“aoyun_huihui.dwt”。(33)按步驟(22)～(24)方法，利用嵌套模板“aoyun_huihui.dwt”創(chuàng)建網(wǎng)頁(yè)“aoyun_huihui_3.html”并保存在“aoyun”文件夾中。(34)在“會(huì)徽(可編輯)”區(qū)域中插入一個(gè)表格(1行，2列，寬480像素，0邊框，8邊距和0間距)。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(35)在上一步所建表格的左側(cè)插入圖片“AY_Media\huihui\bnay1904(03).jpg”，并在右側(cè)輸入第3屆奧運(yùn)會(huì)徽有關(guān)解釋(素材見(jiàn)“AY_Media\huihui\奧運(yùn)會(huì)徽.txt”)?！皧W運(yùn)會(huì)徽”主題頁(yè)面可編輯區(qū)域如圖7-56所示。(36)選中文字段落，在【屬性】面板中的【樣式】下拉列表框中選擇“text”選項(xiàng)。圖7-39【資源】面板圖7-56“奧運(yùn)會(huì)徽”主題頁(yè)面可編輯區(qū)域7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(37)重復(fù)步驟(33)～(36)，通過(guò)“aoyun_huihui.dwt”嵌套模板創(chuàng)建其他11屆“奧運(yùn)會(huì)徽”的主題頁(yè)面。(38)關(guān)閉所有主題頁(yè)面，打開(kāi)“aoyun_huihui.dwt”嵌套模板，選中導(dǎo)航欄第一行“第3屆圣路易斯博覽會(huì)中‘日常節(jié)目’”，在【屬性】面板中將其指向“aoyun_huihui_3.html”，并保證【目標(biāo)】窗口保持為空或?yàn)椤綺self】(目的是在當(dāng)前窗口中顯示目標(biāo)網(wǎng)頁(yè))。(39)重復(fù)步驟(38)將其他11屆奧運(yùn)會(huì)徽添加到相應(yīng)主題網(wǎng)頁(yè)的鏈接。圖7-39【資源】面板7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(40)選擇<Ctrl>+<S>組合鍵保存“aoyun_huihui.dwt”嵌套模板，彈出【更新模板文件】(基于模板的網(wǎng)頁(yè)文件)對(duì)話框，如圖7-57所示。圖7-39【資源】面板圖7-57【更新模板文件】對(duì)話框7.4上機(jī)實(shí)訓(xùn)——“奧運(yùn)之旅”綜合實(shí)例3.實(shí)訓(xùn)步驟(41)關(guān)閉所有打開(kāi)文件，打開(kāi)主頁(yè)“aoyun_index.html”，在【插入】工具欄的【常用】選項(xiàng)卡中單擊【模板】按鈕，在彈出的菜單中選擇【創(chuàng)建嵌套模板】命令，彈出【另存模板