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

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

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

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

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

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

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

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

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

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

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