DW網(wǎng)頁設(shè)計(jì)教學(xué)—單元6 創(chuàng)建與應(yīng)用模板和庫

1、操作演練操作演練1.2技術(shù)提升技術(shù)提升1.3操作準(zhǔn)備操作準(zhǔn)備1.1考核評價(jià)考核評價(jià)1.4操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備1.1操作準(zhǔn)備操作準(zhǔn)備6.1操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練1.2操作演練操作演練6.2技術(shù)提升技術(shù)提升1.3技術(shù)提升技術(shù)提升1.3技術(shù)提升技術(shù)提升6.3考核評價(jià)考核評價(jià)1.4考核評價(jià)考核評價(jià)6.4 使用使用Dreamweaver CS4提供的模板和庫功能，提供的模板和庫功能，將具有相同版面結(jié)構(gòu)的頁面制作成模板，再通過模將具有相同版面結(jié)構(gòu)的頁面制作成模板，

2、再通過模板來創(chuàng)建其他頁面。板來創(chuàng)建其他頁面。 也可以將相同的頁面元素制作成庫項(xiàng)目，并存也可以將相同的頁面元素制作成庫項(xiàng)目，并存儲在庫文件中以便隨時(shí)調(diào)用。儲在庫文件中以便隨時(shí)調(diào)用。教學(xué)目標(biāo)教學(xué)目標(biāo)（1 1）學(xué)會制作用來生成模板的網(wǎng)頁，并將現(xiàn)有的網(wǎng)頁另存為模板）學(xué)會制作用來生成模板的網(wǎng)頁，并將現(xiàn)有的網(wǎng)頁另存為模板（2 2）學(xué)會正確編輯模板，掌握定義與修改可編輯區(qū)域、可選區(qū)域的方法）學(xué)會正確編輯模板，掌握定義與修改可編輯區(qū)域、可選區(qū)域的方法（3 3）熟悉用模板生成新網(wǎng)頁的操作方法，并能對新網(wǎng)頁進(jìn)行編輯加工）熟悉用模板生成新網(wǎng)頁的操作方法，并能對新網(wǎng)頁進(jìn)行編輯加工（4 4）能熟練地修改網(wǎng)頁模板及其屬性

3、，并同步更新該模板生成的網(wǎng)頁）能熟練地修改網(wǎng)頁模板及其屬性，并同步更新該模板生成的網(wǎng)頁（5 5）學(xué)會創(chuàng)建庫項(xiàng)目，并且能修改庫項(xiàng)目，更新包含庫項(xiàng)目的網(wǎng)頁）學(xué)會創(chuàng)建庫項(xiàng)目，并且能修改庫項(xiàng)目，更新包含庫項(xiàng)目的網(wǎng)頁（6 6）學(xué)會創(chuàng)建代碼片斷，并在網(wǎng)頁插入已有的代碼片斷）學(xué)會創(chuàng)建代碼片斷，并在網(wǎng)頁插入已有的代碼片斷（7 7）理解模板和庫的作用）理解模板和庫的作用教學(xué)方法教學(xué)方法任務(wù)驅(qū)動法、理論實(shí)踐一體化、講練結(jié)合任務(wù)驅(qū)動法、理論實(shí)踐一體化、講練結(jié)合課時(shí)建議課時(shí)建議6 6課時(shí)（包含考核評價(jià)）課時(shí)（包含考核評價(jià)）1準(zhǔn)備素材準(zhǔn)備素材 在本地硬盤（例如在本地硬盤（例如D盤）中創(chuàng)建一個(gè)文件夾盤）中創(chuàng)建一個(gè)文件夾“

4、網(wǎng)頁設(shè)計(jì)與制作案例網(wǎng)頁設(shè)計(jì)與制作案例”，將光盤中的，將光盤中的“單元單元6”（包括所有子文件夾以及文件）拷貝到該文件夾（包括所有子文件夾以及文件）拷貝到該文件夾中。中。 2創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn) 使用創(chuàng)建站點(diǎn)向?qū)?chuàng)建名稱為使用創(chuàng)建站點(diǎn)向?qū)?chuàng)建名稱為“單元單元6”的本的本地站點(diǎn)。地站點(diǎn)。 創(chuàng)建網(wǎng)頁文檔創(chuàng)建網(wǎng)頁文檔060101.html，保存在文件夾，保存在文件夾“6-1”中，該網(wǎng)頁主體結(jié)構(gòu)主要應(yīng)用中，該網(wǎng)頁主體結(jié)構(gòu)主要應(yīng)用Div+CSS進(jìn)行布局，進(jìn)行布局，局部結(jié)構(gòu)應(yīng)用了項(xiàng)目列表和定義列表進(jìn)行布局。局部結(jié)構(gòu)應(yīng)用了項(xiàng)目列表和定義列表進(jìn)行布局。 網(wǎng)頁網(wǎng)頁060101.html還應(yīng)用了還應(yīng)用了CSS樣式對文字

5、、標(biāo)樣式對文字、標(biāo)題、圖片和超鏈接進(jìn)行美化。題、圖片和超鏈接進(jìn)行美化。 該網(wǎng)頁為左右結(jié)構(gòu)，通過浮動方式實(shí)現(xiàn)左右布局，該網(wǎng)頁為左右結(jié)構(gòu)，通過浮動方式實(shí)現(xiàn)左右布局，網(wǎng)頁的左側(cè)版塊為左浮動，右側(cè)版塊為右浮動。網(wǎng)頁的左側(cè)版塊為左浮動，右側(cè)版塊為右浮動。 CSS樣式文件中的樣式定義詳見教材配套光盤樣式文件中的樣式定義詳見教材配套光盤對應(yīng)的樣式文件。對應(yīng)的樣式文件?！救蝿?wù)任務(wù)6-1】創(chuàng)建網(wǎng)頁模板和基本模板的網(wǎng)頁創(chuàng)建網(wǎng)頁模板和基本模板的網(wǎng)頁【任務(wù)描述任務(wù)描述】（1）利用網(wǎng)頁）利用網(wǎng)頁“060101.html”創(chuàng)建網(wǎng)頁模板創(chuàng)建網(wǎng)頁模板“060101.dwt”。（2）將網(wǎng)頁模板）將網(wǎng)頁模板“060101.dwt

6、”中的標(biāo)題文字中的標(biāo)題文字“辦公設(shè)備辦公設(shè)備” 定義為可編輯區(qū)域。定義為可編輯區(qū)域。（3）將網(wǎng)頁模板）將網(wǎng)頁模板“060101.dwt”中的圖像中的圖像“2010060901.jpg” 定義為可編輯區(qū)域。定義為可編輯區(qū)域。（4）將網(wǎng)頁模板）將網(wǎng)頁模板“060101.dwt”中的區(qū)域中的區(qū)域“”、“”、“ ”定義為可編輯區(qū)域。定義為可編輯區(qū)域。（5）將區(qū)域）將區(qū)域“ ”的標(biāo)簽的標(biāo)簽“background”和區(qū)域和區(qū)域“”的標(biāo)簽的標(biāo)簽“bgcolor” 定義為可編輯的標(biāo)簽屬性。定義為可編輯的標(biāo)簽屬性。（6）將區(qū)域）將區(qū)域“” 定義為可編輯的可選區(qū)域。定義為可編輯的可選區(qū)域。 （7）創(chuàng)建基于網(wǎng)頁模板

7、）創(chuàng)建基于網(wǎng)頁模板“060101.dwt”的網(wǎng)頁的網(wǎng)頁“060102.html”。（8）修改和更新模板）修改和更新模板“060101.dwt”的屬性。的屬性。（9）編輯與更新網(wǎng)頁）編輯與更新網(wǎng)頁“060102.html”的內(nèi)容。的內(nèi)容。（10）對網(wǎng)頁模板）對網(wǎng)頁模板“060101.dwt”進(jìn)行必要的修改，然后進(jìn)行必要的修改，然后更新由該模板生成的網(wǎng)頁文檔更新由該模板生成的網(wǎng)頁文檔“060102.html”。 網(wǎng)頁網(wǎng)頁“060102.html”的瀏覽效果如圖的瀏覽效果如圖6-3所示。所示。圖圖6-36-3網(wǎng)頁網(wǎng)頁060102.html060102.html的瀏覽效果的瀏覽效果【任務(wù)實(shí)施任務(wù)實(shí)施】

8、6.2.1創(chuàng)建與編輯網(wǎng)頁模板創(chuàng)建與編輯網(wǎng)頁模板 （1）在）在Dreamweaver CS4主窗口中，單擊菜單主窗口中，單擊菜單【文文 件件】【另存為模板另存為模板】，彈出，彈出【另存模板另存模板】對話框。對話框。 （2）在）在【另存模板另存模板】對話框中的對話框中的“站點(diǎn)站點(diǎn)”下拉列表下拉列表 框選擇模板保存的站點(diǎn)，本項(xiàng)目選擇框選擇模板保存的站點(diǎn)，本項(xiàng)目選擇“單元單元6”。 在在“現(xiàn)存的模板現(xiàn)存的模板”列表框中顯示了當(dāng)前站點(diǎn)中的所列表框中顯示了當(dāng)前站點(diǎn)中的所有模板，由于本站點(diǎn)暫時(shí)沒有創(chuàng)建模板，所以顯示有模板，由于本站點(diǎn)暫時(shí)沒有創(chuàng)建模板，所以顯示“（沒有模板）（沒有模板）”。 在在“描述描述”文

9、本框中輸入對模板的說明文字。文本框中輸入對模板的說明文字。 在在“另存為另存為”文本框中輸入模板的名稱，這里輸文本框中輸入模板的名稱，這里輸入入“0601”。（3）設(shè)置完畢后，在）設(shè)置完畢后，在【另存為模板另存為模板】對話框中，單擊對話框中，單擊【保存保存】按鈕，彈出一個(gè)如圖按鈕，彈出一個(gè)如圖6-5所示的所示的“要更新鏈接要更新鏈接嗎嗎”提示信息對話框。提示信息對話框。 如果在該對話框中單擊如果在該對話框中單擊【是是】按鈕，則當(dāng)前網(wǎng)頁按鈕，則當(dāng)前網(wǎng)頁會被轉(zhuǎn)換成模板，同時(shí)系統(tǒng)將自動在所選擇站點(diǎn)的根會被轉(zhuǎn)換成模板，同時(shí)系統(tǒng)將自動在所選擇站點(diǎn)的根目錄下創(chuàng)建目錄下創(chuàng)建“Templates”文件夾，并將

10、創(chuàng)建的模板文文件夾，并將創(chuàng)建的模板文件保存在該文件夾中。件保存在該文件夾中。1打開網(wǎng)頁模板文件打開網(wǎng)頁模板文件 打開當(dāng)前站點(diǎn)文件夾打開當(dāng)前站點(diǎn)文件夾“Templates”中模板文中模板文件件“060101.dwt”。2定義可編輯區(qū)域定義可編輯區(qū)域 （1）定義文字為可編輯區(qū)域）定義文字為可編輯區(qū)域 （2）定義圖像為可編輯區(qū)域）定義圖像為可編輯區(qū)域 （3）定義區(qū)域）定義區(qū)域“ ”為可編輯區(qū)域?yàn)榭删庉媴^(qū)域（4）定義區(qū)域）定義區(qū)域“”為可編輯為可編輯區(qū)域區(qū)域（5）定義區(qū)域）定義區(qū)域“”為可編輯為可編輯區(qū)域區(qū)域（6）將區(qū)域）將區(qū)域“”的標(biāo)的標(biāo)簽簽“background”定義為可編輯的標(biāo)簽屬性定義為可編輯

11、的標(biāo)簽屬性（7）將區(qū)域）將區(qū)域“”的標(biāo)簽的標(biāo)簽“bgcolor”定義為可編輯的標(biāo)簽屬性定義為可編輯的標(biāo)簽屬性 （1）選擇要設(shè)置為可編輯的可選區(qū)域的區(qū)域）選擇要設(shè)置為可編輯的可選區(qū)域的區(qū)域“”。 （2）在）在Dreamweaver CS4主界面中，單擊菜單命令主界面中，單擊菜單命令【插入插入】【模板對象模板對象】【可編輯的可選區(qū)域可編輯的可選區(qū)域】。 （3）在）在【新建可選區(qū)域新建可選區(qū)域】對話框?qū)υ捒颉盎净尽边x項(xiàng)卡的選項(xiàng)卡的“名稱名稱”文文本框中輸入該可編輯的可選區(qū)域的名稱。本框中輸入該可編輯的可選區(qū)域的名稱。 （4）切換到）切換到“基本基本”選項(xiàng)卡，然后單擊選項(xiàng)卡，然后單擊【確定確定】按

12、鈕，即可定按鈕，即可定義一個(gè)可編輯的可選區(qū)域。義一個(gè)可編輯的可選區(qū)域。 設(shè)置完成后，頁面中可編輯的可選區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽設(shè)置完成后，頁面中可編輯的可選區(qū)域有藍(lán)色標(biāo)簽，標(biāo)簽上是可選區(qū)域的名稱上是可選區(qū)域的名稱“If OptionalRegion1”。 4修改可編輯區(qū)域修改可編輯區(qū)域 （1）單擊網(wǎng)頁模板中可編輯區(qū)域左上角的標(biāo)簽，如）單擊網(wǎng)頁模板中可編輯區(qū)域左上角的標(biāo)簽，如“EditRegion1”，選中該可編輯區(qū)域。，選中該可編輯區(qū)域。 （2）在）在“可編輯區(qū)域可編輯區(qū)域”屬性面板中輸入一個(gè)新的名稱，屬性面板中輸入一個(gè)新的名稱，按回車鍵確認(rèn)。按回車鍵確認(rèn)。 5修改可選區(qū)域修改可選區(qū)域 可選區(qū)域設(shè)

13、置完成后，如果需要對可選區(qū)域的名可選區(qū)域設(shè)置完成后，如果需要對可選區(qū)域的名稱及其他參數(shù)進(jìn)行修改，可以先選中可選區(qū)域，然后稱及其他參數(shù)進(jìn)行修改，可以先選中可選區(qū)域，然后單擊如圖單擊如圖6-16所示的可選區(qū)域所示的可選區(qū)域“屬性屬性”面板中的面板中的【編編輯輯】按鈕，彈出如圖按鈕，彈出如圖6-14所示的對話框，重新修改其所示的對話框，重新修改其名稱或設(shè)置其參數(shù)即可。名稱或設(shè)置其參數(shù)即可。1應(yīng)用網(wǎng)頁模板創(chuàng)建網(wǎng)頁文檔應(yīng)用網(wǎng)頁模板創(chuàng)建網(wǎng)頁文檔 （1）在）在Dreamweaver CS4主界面中，單擊菜單主界面中，單擊菜單【文文 件件】【新建新建】，彈出，彈出【新建文檔新建文檔】對話框，在對話框，在【新建

14、新建文檔文檔】對話框中依次單擊選擇對話框中依次單擊選擇【模板中的頁模板中的頁】【單元單元6】【0601】選項(xiàng)。選項(xiàng)。 （2）單擊）單擊【創(chuàng)建創(chuàng)建】按鈕，這樣將基于該模板創(chuàng)建一按鈕，這樣將基于該模板創(chuàng)建一 個(gè)新的網(wǎng)頁。個(gè)新的網(wǎng)頁。 （3）將新創(chuàng)建的基于此模板的網(wǎng)頁保存在站點(diǎn)根文件夾）將新創(chuàng)建的基于此模板的網(wǎng)頁保存在站點(diǎn)根文件夾下的文件夾下的文件夾“6-1”中，命名為中，命名為“060102.html”，然后預(yù)，然后預(yù)覽其效果。覽其效果。2修改和更新網(wǎng)頁模板屬性修改和更新網(wǎng)頁模板屬性（1）顯示或隱藏可選區(qū)域）顯示或隱藏可選區(qū)域（2）設(shè)置可編輯標(biāo)簽屬性的屬性值）設(shè)置可編輯標(biāo)簽屬性的屬性值3、編輯與更

15、新基于網(wǎng)頁模板創(chuàng)建的網(wǎng)頁、編輯與更新基于網(wǎng)頁模板創(chuàng)建的網(wǎng)頁060102.html （1）在）在“文檔文檔”工具欄中將網(wǎng)頁標(biāo)題修改為工具欄中將網(wǎng)頁標(biāo)題修改為“手機(jī)通手機(jī)通訊訊 - 易購網(wǎng)易購網(wǎng)”。 （2）將網(wǎng)頁中的標(biāo)題文字）將網(wǎng)頁中的標(biāo)題文字“辦公設(shè)備辦公設(shè)備”修改為修改為“手機(jī)手機(jī)通訊通訊”。（3）將網(wǎng)頁中的圖像）將網(wǎng)頁中的圖像“images/img01/ 2010060901.jpg”修改為修改為“images/img02/ 2010060902.jpg”。（4）在網(wǎng)頁）在網(wǎng)頁060102.html的區(qū)域的區(qū)域“ ”、“”、“”分別輸入文字、插入圖像和設(shè)置超鏈接。分別輸入文字、插入圖像和設(shè)置

16、超鏈接。 保存網(wǎng)頁保存網(wǎng)頁060102.html，其瀏覽效果如圖，其瀏覽效果如圖6-3所示。所示。 （1）刪除區(qū)域）刪除區(qū)域“”的可編的可編輯的可選區(qū)域模板標(biāo)記。輯的可選區(qū)域模板標(biāo)記。 （2）定義區(qū)域）定義區(qū)域“”為可選為可選區(qū)域。區(qū)域。 （3）單擊）單擊“標(biāo)準(zhǔn)標(biāo)準(zhǔn)”工具欄中的工具欄中的【保存保存】按鈕按鈕 ，彈出如，彈出如圖圖6-20所示的所示的【更新模板文件更新模板文件】對話框，在該對話框中單對話框，在該對話框中單擊擊【更新更新】按鈕，系統(tǒng)開始更新模板文件，并且會彈出如按鈕，系統(tǒng)開始更新模板文件，并且會彈出如圖圖6-21所示的所示的【更新頁面更新頁面】對話框。對話框。 （4）在）在【更新頁

17、面更新頁面】對話框中選中復(fù)選框?qū)υ捒蛑羞x中復(fù)選框“顯示記顯示記錄錄”，該對話框變成如圖，該對話框變成如圖6-22示的形式，在其下方示的形式，在其下方“狀態(tài)狀態(tài)”列表框中顯示檢查文件數(shù)、更新文件數(shù)等詳列表框中顯示檢查文件數(shù)、更新文件數(shù)等詳細(xì)的更新信息。細(xì)的更新信息。（5）在）在【更新頁面更新頁面】對話框中設(shè)置相應(yīng)的參數(shù)，在對話框中設(shè)置相應(yīng)的參數(shù)，在“查看查看”下拉列表框中如果選擇下拉列表框中如果選擇“整個(gè)站點(diǎn)整個(gè)站點(diǎn)”，則要，則要選擇需要更新的站點(diǎn)（如選擇需要更新的站點(diǎn)（如“單元單元6”），然后單擊），然后單擊【完完成成】按鈕，對基于模板創(chuàng)建的網(wǎng)頁進(jìn)行更新，如圖按鈕，對基于模板創(chuàng)建的網(wǎng)頁進(jìn)行更新

18、，如圖6-23所示。所示。 （6）更新完成后，單擊該對話框中的）更新完成后，單擊該對話框中的【關(guān)閉關(guān)閉】按鈕，按鈕，更新頁面操作結(jié)束。更新頁面操作結(jié)束?！救蝿?wù)任務(wù)6-2】創(chuàng)建包含庫項(xiàng)目和代碼片斷的網(wǎng)頁創(chuàng)建包含庫項(xiàng)目和代碼片斷的網(wǎng)頁060202.html【任務(wù)描述任務(wù)描述】 （1）將網(wǎng)頁中的版權(quán)信息區(qū)域定義為庫項(xiàng)目）將網(wǎng)頁中的版權(quán)信息區(qū)域定義為庫項(xiàng)目footer060201.lbi。 （2）將網(wǎng)頁）將網(wǎng)頁060201.html中的友情鏈接區(qū)域轉(zhuǎn)中的友情鏈接區(qū)域轉(zhuǎn) 換為庫項(xiàng)目換為庫項(xiàng)目friend-link060201.lbi。 （3）在網(wǎng)頁）在網(wǎng)頁060202.html中對應(yīng)位置插入庫項(xiàng)中對應(yīng)位

19、置插入庫項(xiàng) 目目footer060201.lbi和和friend-link060201.lbi。 （4）將網(wǎng)頁）將網(wǎng)頁060201.html中頂部導(dǎo)航欄分別定義為代中頂部導(dǎo)航欄分別定義為代碼片斷碼片斷topmenu和和topnav。 （5）在網(wǎng)頁）在網(wǎng)頁060202.html中對應(yīng)位置，分別插入代碼中對應(yīng)位置，分別插入代碼片碼片碼topmenu和和topnav。 網(wǎng)頁網(wǎng)頁060202.html的瀏覽效果如圖的瀏覽效果如圖6-24所示。所示。【任務(wù)實(shí)施任務(wù)實(shí)施】6.3.1創(chuàng)建庫項(xiàng)目創(chuàng)建庫項(xiàng)目1使用使用【新建文檔新建文檔】對話框創(chuàng)建庫對話框創(chuàng)建庫 （1）在）在Dreamweaver CS4主界面中

20、，單擊菜單命令主界面中，單擊菜單命令【文件文件】【新建新建】，在彈出的，在彈出的【新建文檔新建文檔】對話對話 框中選擇框中選擇“空白頁空白頁”“庫項(xiàng)目庫項(xiàng)目”，如圖，如圖6-25所示。然所示。然后單擊后單擊【創(chuàng)建創(chuàng)建】按鈕，創(chuàng)建一個(gè)空白網(wǎng)頁。按鈕，創(chuàng)建一個(gè)空白網(wǎng)頁。 （2）保存庫項(xiàng)目文件。）保存庫項(xiàng)目文件。 （3）鏈接外部樣式文件。）鏈接外部樣式文件。 （4）在庫項(xiàng)目中插入）在庫項(xiàng)目中插入Div標(biāo)簽與輸入文字內(nèi)容。標(biāo)簽與輸入文字內(nèi)容。 （5）保存庫文件。）保存庫文件。（1）打開文件夾）打開文件夾“6-2”中網(wǎng)頁文檔中網(wǎng)頁文檔“060201.html”。（2）選中該網(wǎng)頁文檔中的友情鏈接區(qū)域）選中

21、該網(wǎng)頁文檔中的友情鏈接區(qū)域“”。（3）在）在Dreamweaver CS4主界面中，單擊菜單命令主界面中，單擊菜單命令【修改修改】【庫庫】【增加對象到庫增加對象到庫】，如圖，如圖6-27所所 示，將選中的示，將選中的Div區(qū)域轉(zhuǎn)化為庫文件。區(qū)域轉(zhuǎn)化為庫文件。 此時(shí)會出現(xiàn)如圖此時(shí)會出現(xiàn)如圖6-28所示所示“提示信息提示信息”對話框，在對話框，在該對話框中單擊該對話框中單擊【確定確定】按鈕，庫項(xiàng)目的內(nèi)容隨按鈕，庫項(xiàng)目的內(nèi)容隨 即會出現(xiàn)在即會出現(xiàn)在“資源資源”面板中，等待輸入新的庫文件面板中，等待輸入新的庫文件 名稱。名稱。 （4）Dreamweaver CS4會把庫項(xiàng)目文件保存在本地站點(diǎn)根會把庫項(xiàng)

22、目文件保存在本地站點(diǎn)根文件夾下的文件夾下的“Library”子文件夾中，如果本地站點(diǎn)沒有該文子文件夾中，如果本地站點(diǎn)沒有該文件夾，件夾，Dreamweaver CS4會自動生成這個(gè)子文件夾。會自動生成這個(gè)子文件夾。 1在網(wǎng)頁在網(wǎng)頁060202.html中對應(yīng)位置插入庫項(xiàng)目中對應(yīng)位置插入庫項(xiàng)目footer060201.lbi （1）打開網(wǎng)頁文檔）打開網(wǎng)頁文檔060202.html，將光標(biāo)置于，將光標(biāo)置于“”之前。之前。 （2）在）在Dreamweaver CS4主界面，單擊菜單命令主界面，單擊菜單命令【窗口窗口】 【資源資源】，切換到，切換到“資源資源”面板，也可以在面板，也可以在“文件文件”面

23、板中面板中 直接單擊直接單擊“資源資源”選項(xiàng)卡切換到選項(xiàng)卡切換到“資源資源”面板。面板。 （3）在）在“資源資源”面板中單擊左側(cè)的面板中單擊左側(cè)的【庫庫】按鈕，顯示本站點(diǎn)所按鈕，顯示本站點(diǎn)所 有的庫項(xiàng)目文件，選中要插入的庫項(xiàng)目有的庫項(xiàng)目文件，選中要插入的庫項(xiàng)目“friend-link060201”， 單擊該面板中左下角的單擊該面板中左下角的【插入插入】按鈕，即可插入一個(gè)庫項(xiàng)目。按鈕，即可插入一個(gè)庫項(xiàng)目。 2在網(wǎng)頁在網(wǎng)頁060202.html中對應(yīng)位置插入庫項(xiàng)目中對應(yīng)位置插入庫項(xiàng)目friend-link060201.lbi 將光標(biāo)置于前面所插入的將光標(biāo)置于前面所插入的“友情鏈接友情鏈接”之后，在

24、之后，在“資資源源”面板中選中要插入的庫項(xiàng)目面板中選中要插入的庫項(xiàng)目“footer060201”，然后單，然后單擊該面板中左下角的擊該面板中左下角的【插入插入】按鈕，即可在網(wǎng)頁中按鈕，即可在網(wǎng)頁中060202.html插入另一個(gè)庫項(xiàng)目。插入另一個(gè)庫項(xiàng)目。 保存網(wǎng)頁保存網(wǎng)頁060202.html，預(yù)覽網(wǎng)頁所插入的，預(yù)覽網(wǎng)頁所插入的2個(gè)庫項(xiàng)目個(gè)庫項(xiàng)目的效果。的效果。（1）打開）打開【代碼片斷代碼片斷】面板面板 在在Dreamweaver CS4主界面中，單擊菜單命令主界面中，單擊菜單命令【窗口窗口】【代碼片斷代碼片斷】，打開如圖，打開如圖6-35所示所示 的的【代碼片斷代碼片斷】面板。面板。（2）

25、新建代碼片斷文件夾）新建代碼片斷文件夾（3）創(chuàng)建代碼片斷）創(chuàng)建代碼片斷 1在網(wǎng)頁在網(wǎng)頁060202.html中對應(yīng)位置插入代碼片碼中對應(yīng)位置插入代碼片碼topmenu 打開網(wǎng)頁文檔打開網(wǎng)頁文檔060202.html，切換到，切換到【代碼代碼】視視 圖，將光標(biāo)置于圖，將光標(biāo)置于Div標(biāo)簽標(biāo)簽“”的之的之 后，然后在后，然后在【代碼片斷代碼片斷】面板選擇文件夾面板選擇文件夾“06”中的中的“topmenu”，單擊，單擊【代碼片斷代碼片斷】面板左下角的面板左下角的【插插 入入】按鈕，這樣代碼片斷按鈕，這樣代碼片斷“topmenu”便插入到光標(biāo)便插入到光標(biāo) 所在位置。所在位置。 2在網(wǎng)頁在網(wǎng)頁0602

26、02.html中對應(yīng)位置插入代碼片碼中對應(yīng)位置插入代碼片碼topnav 在網(wǎng)頁文檔在網(wǎng)頁文檔060202.html的的【代碼代碼】視圖中，將視圖中，將光標(biāo)置于光標(biāo)置于Div標(biāo)簽標(biāo)簽“”與與“”之間，然后在之間，然后在【代碼代碼片斷片斷】面板文件夾面板文件夾“06”中的中的“topnav”位置單擊右鍵，位置單擊右鍵，在彈出的快捷菜單中單擊菜單命令在彈出的快捷菜單中單擊菜單命令【插入插入】，如圖，如圖6-39所示，這樣代碼片斷所示，這樣代碼片斷“topnav”便插入到光標(biāo)所在便插入到光標(biāo)所在位置。位置。 保存網(wǎng)頁文檔保存網(wǎng)頁文檔060202.html，其瀏覽效果如圖，其瀏覽效果如圖6-24所示。所

27、示?！究己巳蝿?wù)描述考核任務(wù)描述】 教材配套光盤中已提供了考核評價(jià)項(xiàng)目所需的教材配套光盤中已提供了考核評價(jià)項(xiàng)目所需的 起點(diǎn)網(wǎng)頁文件起點(diǎn)網(wǎng)頁文件0603.html、CSS樣式表文件樣式表文件0603.css 和網(wǎng)頁素材，請完成以下操作。和網(wǎng)頁素材，請完成以下操作。 （1）將網(wǎng)頁）將網(wǎng)頁0603.html中的區(qū)域中的區(qū)域“ ”和和“”定義為庫項(xiàng)目，名稱分別為：定義為庫項(xiàng)目，名稱分別為：l“nav_bottom060301.lbi” l“nav_bottom060302.lbi”（2）將網(wǎng)頁）將網(wǎng)頁0603.html另存為網(wǎng)頁模板，名稱為另存為網(wǎng)頁模板，名稱為“0603.dwt”， 該模板中不包括庫項(xiàng)

28、目該模板中不包括庫項(xiàng)目“nav_bottom060301.lbi”和和“nav_bottom060302.lbi”中的內(nèi)容。中的內(nèi)容。（3）在網(wǎng)頁模板）在網(wǎng)頁模板0603.dwt中將當(dāng)前位置導(dǎo)航欄的文字中將當(dāng)前位置導(dǎo)航欄的文字“湖湖 南南”、區(qū)域、區(qū)域“ ”和區(qū)和區(qū)“ ”定義為可編輯定義為可編輯 區(qū)域，名稱分別為：區(qū)域，名稱分別為：l“EditRegion060301”l“EditRegion060302”l“EditRegion060303”（4）在網(wǎng)頁模板）在網(wǎng)頁模板0603.dwt中將區(qū)域中將區(qū)域“ ”定義為可定義為可編輯的可選區(qū)域，名稱為編輯的可選區(qū)域，名稱為“OptionalRegi

29、on060301”。（5）在網(wǎng)頁模板）在網(wǎng)頁模板0603.dwt中將區(qū)域中將區(qū)域“”的背的背景顏色定義為可編輯的標(biāo)簽屬性。景顏色定義為可編輯的標(biāo)簽屬性。（6）創(chuàng)建基于網(wǎng)頁模板）創(chuàng)建基于網(wǎng)頁模板0603.dwt的網(wǎng)頁的網(wǎng)頁060301.html，設(shè)置網(wǎng)頁區(qū)域，設(shè)置網(wǎng)頁區(qū)域“”的背景顏色為的背景顏色為“#f2f2f2”，在該網(wǎng)頁的，在該網(wǎng)頁的區(qū)域中區(qū)域中“ ”分別插入庫項(xiàng)目分別插入庫項(xiàng)目“nav_bottom060301.lbi”和和“nav_bottom060302.lbi”，可編輯的可選，可編輯的可選區(qū)域區(qū)域OptionalRegion060301設(shè)置為隱藏，其最終瀏覽效果如圖設(shè)置為隱藏，其最終瀏覽效果如圖6-40所示。所示。圖圖6-406-40網(wǎng)頁網(wǎng)頁060301.html060301.html的最終瀏覽效果的最終瀏覽效果 （7）創(chuàng)建基于網(wǎng)頁模板）創(chuàng)建基于網(wǎng)頁模板0603.dwt的網(wǎng)頁的網(wǎng)頁060302.html，設(shè)置網(wǎng)，設(shè)置網(wǎng)頁區(qū)域頁區(qū)域“”的的 背景顏色為背景顏色為“#f2f2f2”，在該網(wǎng)頁的區(qū)域中，在該網(wǎng)頁的區(qū)域中“ ”分別插入庫項(xiàng)目分別插入庫項(xiàng)目“nav _bottom060