HTML和中文DreamweaverMX2004實(shí)用教程第9章

1、第9章 模板、資源面板與綜合實(shí)例 本章要點(diǎn)9.1 “商品介紹”模板 9.2 “商品介紹”網(wǎng)頁(yè) 9.3 修改“商品介紹”模板 9.4 為“自我介紹”網(wǎng)頁(yè)配色 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 9.7 發(fā)布“日本旅游”網(wǎng)站 習(xí)題 99.1 “商品介紹”模板在Dreamweaver中制作“商品介紹”模板的顯示效果如圖9-1-1所示。 圖9-1-1 “商品介紹”模板的顯示效果9.1 “商品介紹”模板模板就是網(wǎng)頁(yè)的樣板，它有可編輯區(qū)和不可編輯區(qū)。不可編輯區(qū)的內(nèi)容是不可以改變的，通常為標(biāo)題欄、網(wǎng)頁(yè)圖標(biāo)、框架結(jié)構(gòu)、鏈接文字和導(dǎo)航欄等。可編輯區(qū)的內(nèi)容可以改變，通常為具體的文字

2、和圖像內(nèi)容，例如，“商品介紹”欄和“商品圖像”欄。通常在一個(gè)網(wǎng)站中有成百上千的頁(yè)面，而且每個(gè)頁(yè)面的布局也常常相同，尤其是同一層次的頁(yè)面，只有具體文字或圖像內(nèi)容不同。將這樣的網(wǎng)頁(yè)定義為模板后，相同的部分都被鎖定，只有一部分內(nèi)容可以編輯，避免了對(duì)無(wú)需改動(dòng)部分的誤操作。9.1.1 創(chuàng)建新模板創(chuàng)建新模板可以采用如下兩種方法。（1）執(zhí)行“文件”“新建”菜單命令，調(diào)出“新建文檔”對(duì)話框，選中“類別”欄內(nèi)“模板頁(yè)”選項(xiàng)，再選中“模板頁(yè)”欄內(nèi)的“HTML模板”選項(xiàng)，如圖9-1-2所示。然后單擊“創(chuàng)建”按鈕，即可創(chuàng)建一個(gè)新模板。 9.1 “商品介紹”模板 圖9-1-2 “新建文檔”對(duì)話框中的“模板”選項(xiàng)9.1

3、“商品介紹”模板 編輯完成后，執(zhí)行“文件”“另存為模板”菜單命令，調(diào)出“另存模板”對(duì)話框，如圖9-1-3所示。在“另存為”文本框中輸入要保存的模板名稱后，單擊“保存”按鈕，即可保存該模板。（2）單擊“插入”（模板）欄中的“創(chuàng)建模板”按鈕，彈出“另存模板”對(duì)話框，如圖9-1-3所示。然后，在“站點(diǎn)”下拉列表框內(nèi)選擇本地站點(diǎn)的名稱，再在“另存為”文本框內(nèi)輸入模板的名稱，最后單擊“保存”按鈕，即可完成模板的保存。 圖9-1-3 “另存模板”對(duì)話框9.1 “商品介紹”模板 9.1.2 將已有的HTML文件創(chuàng)建為模板（1）打開(kāi)一個(gè)已有的HTML文件，如圖9-1-4所示。 圖9-1-4 打開(kāi)一個(gè)已有的HT

4、ML文件9.1 “商品介紹”模板 （2）定義可編輯區(qū)域：將光標(biāo)置于需要增加可編輯區(qū)的地方（右下部分），在“插入”（常用）欄中的“模板”快捷菜單中單擊“可編輯區(qū)域”按鈕，彈出“新建可編輯區(qū)域”對(duì)話框，如圖9-1-5所示。在“名稱”文本框中輸入可編輯區(qū)域的名稱，例如，“HTML實(shí)例名稱”，然后單擊“確定”按鈕，這樣就新建了一個(gè)名稱為“HTML實(shí)例名稱”的可編輯區(qū)，如圖9-1-6所示。 圖9-1-5 “新建可編輯區(qū)域”對(duì)話框 圖9-1-6 可編輯區(qū)域內(nèi)顯示出它的名稱9.1 “商品介紹”模板 （3）執(zhí)行“文件”“另存為模板”菜單命令，調(diào)出“另存模板”對(duì)話框，如圖9-1-3所示。然后，在“站點(diǎn)”下拉列表

5、框內(nèi)選擇本地站點(diǎn)的名稱，再在“另存為”文本框內(nèi)輸入模板的名稱，最后單擊“保存”按鈕，即可完成模板的保存。 9.2 “商品介紹”網(wǎng)頁(yè) 在“商品介紹”模板的基礎(chǔ)上制作的“商品介紹”網(wǎng)頁(yè)的顯示效果如圖9-2-1所示。在利用模板創(chuàng)建新的網(wǎng)頁(yè)時(shí)，只需將模板調(diào)出，在可編輯區(qū)域插入內(nèi)容即可。當(dāng)更新網(wǎng)頁(yè)時(shí)，只需將模板調(diào)出，在可編輯區(qū)域內(nèi)更換新內(nèi)容即可。在對(duì)網(wǎng)站進(jìn)行改版時(shí)，因?yàn)榫W(wǎng)站的頁(yè)面非常多，如果分別修改每一頁(yè)，無(wú)疑工作量非常大，但如果使用了模板，只要修改模板，所有應(yīng)用模板的頁(yè)面都可以自動(dòng)更新。修改已有的HTML文件，也可套用已有的模板。 9.2 “商品介紹”網(wǎng)頁(yè) 圖9-2-1 “商品介紹”網(wǎng)頁(yè)的顯示效果9.

6、2 “商品介紹”網(wǎng)頁(yè) 9.2.1 使用模板創(chuàng)建新網(wǎng)頁(yè)（1）執(zhí)行“文件”“新建”菜單命令，調(diào)出“新建文檔”對(duì)話框，在該對(duì)話框中打開(kāi)“模板”選項(xiàng)卡，“新建文檔”對(duì)話框變?yōu)椤皬哪０逍陆ā睂?duì)話框。在“模板用于”列表框內(nèi)選擇站點(diǎn)的名稱，在右邊的列表框內(nèi)選擇一個(gè)模板的名稱，即可在“預(yù)覽”欄內(nèi)看到模板的縮略圖，如圖9-2-2所示。 圖9-2-2 “從模板新建”對(duì)話框9.2 “商品介紹”網(wǎng)頁(yè) （2）如果選中了“當(dāng)模板沒(méi)改變時(shí)更新頁(yè)面”復(fù)選框，將來(lái)模板被修改后，所有應(yīng)用該模板的頁(yè)面將會(huì)自動(dòng)更新。單擊“創(chuàng)建”按鈕，即可創(chuàng)建用選定模板制作的網(wǎng)頁(yè)。（3）可以在該網(wǎng)頁(yè)的可編輯區(qū)域內(nèi)插入相應(yīng)的內(nèi)容，即可完成網(wǎng)頁(yè)的制作。另

7、外，新建一個(gè)網(wǎng)頁(yè)文檔后，執(zhí)行“修改”“模板”“套用模板到頁(yè)面”菜單命令，調(diào)出“選擇模板”對(duì)話框，如圖9-2-3所示。再選擇新模板，單擊“選定”按鈕，也可應(yīng)用模板制作網(wǎng)頁(yè)。 圖9-2-3 “選擇模板”對(duì)話框9.2 “商品介紹”網(wǎng)頁(yè) 9.2.2 在已有的頁(yè)面內(nèi)使用新模板（1）在已建立模板的站點(diǎn)中創(chuàng)建一個(gè)新網(wǎng)頁(yè)。（2）執(zhí)行“窗口”“資源”菜單命令，調(diào)出“資源”面板，單擊該面板中的“模板”按鈕，選中模板的名稱，此時(shí)的“資源”面板如圖9-2-4所示。 圖9-2-4 “資源”面板 9.2 “商品介紹”網(wǎng)頁(yè) （3）用鼠標(biāo)拖曳模板圖案到頁(yè)面中或單擊“資源”面板中的“應(yīng)用”按鈕。（4）如果打開(kāi)一個(gè)使用了模板的頁(yè)

8、面，而且該模板與新模板的可編輯區(qū)域的名稱完全相同時(shí)，則頁(yè)面內(nèi)可編輯區(qū)域的內(nèi)容會(huì)自動(dòng)替換或插入到新模板中名稱相同的可編輯區(qū)域內(nèi)，生成新的網(wǎng)頁(yè)。（5）如果打開(kāi)一個(gè)使用了模板的頁(yè)面，而且該模板與新模板中可編輯區(qū)域的名稱不相同時(shí)，或者打開(kāi)的頁(yè)面沒(méi)使用模板，則系統(tǒng)會(huì)彈出一個(gè)如圖9-2-5所示的對(duì)話框，要求用戶選擇將頁(yè)面的內(nèi)容放到新模板的哪個(gè)可編輯區(qū)域中。單擊選擇可編輯區(qū)域的名稱后，再在下邊的列表框中選擇可編輯區(qū)域名稱，然后單擊“確定”按鈕即可完成替換。 9.2 “商品介紹”網(wǎng)頁(yè) 圖9-2-5 “不一致的區(qū)域名稱”對(duì)話框9.3 修改“商品介紹”模板 模板可以更新，例如，改變可編輯區(qū)域和不可編輯區(qū)域，改變可

9、編輯區(qū)域的名稱以及更換頁(yè)面的內(nèi)容等。更新模板后，系統(tǒng)可以將由該模板生成的頁(yè)面自動(dòng)更新。當(dāng)然也可以不自動(dòng)更新，以后由用戶手動(dòng)更新。對(duì)“商品介紹”模板進(jìn)行修改后，“商品介紹”網(wǎng)頁(yè)的顯示效果如圖9-3-1所示。 圖9-3-1 修改后“商品介紹”網(wǎng)頁(yè)的顯示效果9.3 修改“商品介紹”模板 9.3.1 修改模板更新網(wǎng)頁(yè)1自動(dòng)更新（1）采用前面介紹的方法，打開(kāi)要更新的模板，進(jìn)行模板更新，例如，改變頁(yè)面布局、增加可編輯區(qū)域以及刪除可編輯區(qū)域等。（2）然后保存模板，此時(shí)會(huì)彈出“更新模板文件”對(duì)話框，如圖9-3-2所示。提示用戶是否更新使用了該模板的網(wǎng)頁(yè)。單擊“不更新”按鈕，則不自動(dòng)更新，待以后進(jìn)行手動(dòng)更新。（

10、3）按住Ctrl鍵的同時(shí)選中要更新的網(wǎng)頁(yè)名稱，再單擊“更新”按鈕，即可自動(dòng)完成對(duì)選定文件的更新。同時(shí)會(huì)彈出一個(gè)“更新頁(yè)面”對(duì)話框，它的“狀態(tài)”欄中會(huì)列出更新的文件名稱、檢測(cè)文件的個(gè)數(shù)以及更新文件的個(gè)數(shù)等信息，如圖9-3-3所示。（4）在該對(duì)話框中的“查看”下拉列表框內(nèi)選擇“整個(gè)站點(diǎn)”列表項(xiàng)，則其右邊會(huì)出現(xiàn)一個(gè)新的下拉列表框。在新的下拉列表框內(nèi)選擇站點(diǎn)名稱，單擊“開(kāi)始”按鈕，即可對(duì)選定的站點(diǎn)進(jìn)行檢測(cè)和更新，并給出類似于圖9-3-3所示的檢測(cè)報(bào)告。 9.3 修改“商品介紹”模板 圖9-3-2 “更新模板文件”對(duì)話框 圖9-3-3 “更新頁(yè)面”對(duì)話框 9.3 修改“商品介紹”模板 2手動(dòng)更新（1）采

11、用前面介紹的方法，打開(kāi)要更新的頁(yè)面。（2）執(zhí)行“修改”“模板”“更新當(dāng)前頁(yè)面”菜單命令，即可將打開(kāi)的頁(yè)面按更新后的模板進(jìn)行更新。（3）如果要更新所有和模板相關(guān)聯(lián)的頁(yè)面，則執(zhí)行“修改”“模板”“更新頁(yè)面”菜單命令，調(diào)出“更新頁(yè)面”對(duì)話框。在“查看”下拉列表框內(nèi)選擇“文件使用”選項(xiàng)，則其右邊會(huì)出現(xiàn)一個(gè)新的下拉列表框。在新的下拉列表框內(nèi)選擇模板名稱，單擊“開(kāi)始”按鈕，即可更新使用該模板的所有網(wǎng)頁(yè)，并給出類似于圖9-3-3所示的檢測(cè)信息報(bào)告。9.3.2 關(guān)于模板的其他操作1將頁(yè)面與模板分離如果希望頁(yè)面不再受模板的約束，可以執(zhí)行“修改”“模板”“從模板中分離”菜單命令，使該頁(yè)面與模板分離。分離后頁(yè)面的任

12、何部分都可以自由編輯，并且修改模板后，該頁(yè)面也不會(huì)再受影響。2輸出沒(méi)有模板標(biāo)記的站點(diǎn)執(zhí)行“修改”“模板”“不代標(biāo)記導(dǎo)出”菜單命令，將彈出“導(dǎo)出為無(wú)模板標(biāo)記的站點(diǎn)”對(duì)話框，如圖9-3-4所示。單擊“瀏覽”按鈕，選擇輸出路徑，單擊“確定”按鈕，即可輸出沒(méi)有模板標(biāo)記的站點(diǎn)。 9.3 修改“商品介紹”模板 圖9-3-4 “導(dǎo)出為無(wú)模板標(biāo)記的站點(diǎn)”對(duì)話框9.4 為“自我介紹”網(wǎng)頁(yè)配色 配色是網(wǎng)頁(yè)制作中的一個(gè)關(guān)鍵步驟。雖然配色不像Dreamweaver中的其他操作那樣有較強(qiáng)的技術(shù)性，但是配色也是不可缺少的一部分。使用Dreamweaver中的“配色”命令，用戶不用對(duì)配色進(jìn)行專門學(xué)習(xí)就可以制作出配色非常協(xié)調(diào)

13、的頁(yè)面。使用“配色”命令對(duì)“自我介紹”網(wǎng)頁(yè)進(jìn)行配色，配色后的網(wǎng)頁(yè)顯示效果如圖9-4-1所示。 圖9-4-1 重新配色后“自我介紹”網(wǎng)頁(yè)的顯示效果9.4 為“自我介紹”網(wǎng)頁(yè)配色 9.4.1 設(shè)置配色方案執(zhí)行“命令”“設(shè)定配色方案”菜單命令，調(diào)出“設(shè)定配色方案命令”對(duì)話框，如圖9-4-2所示。利用該對(duì)話框可以方便地設(shè)置配色方案，并且可以即時(shí)預(yù)覽配色效果。從“背景”列表中選擇一種背景色，從“文本和鏈接”列表中選擇一種文字和鏈接色彩，右側(cè)可以預(yù)覽配色效果。選擇完畢后單擊“確定”按鈕，即可應(yīng)用選取的配色方案；也可以先單擊“應(yīng)用”按鈕，預(yù)覽應(yīng)用后的效果。 圖9-4-2 “設(shè)定配色方案命令”對(duì)話框9.4 為

14、“自我介紹”網(wǎng)頁(yè)配色 9.4.2 網(wǎng)頁(yè)的配色原則網(wǎng)頁(yè)的色彩是樹(shù)立網(wǎng)站形象的關(guān)鍵之一，應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好地表達(dá)出預(yù)想的內(nèi)涵呢？這里介紹一些簡(jiǎn)單的配色知識(shí)。1色彩的基本知識(shí)（1）紅，黃，藍(lán)是三原色，其他的色彩都可以用這3種顏色按不同比例而成。網(wǎng)頁(yè)HTML標(biāo)記中的色彩表達(dá)即是用這3種顏色的數(shù)值表示，例如，紅色是color（255,0,0），用十六進(jìn)制的可表示為FF0000。白色的十六進(jìn)制表達(dá)是FFFFFF。在HTML代碼中經(jīng)?？吹降摹癰gColor=#FFFFFF”屬性就是指背景色為白色。（2）顏色分非彩色和彩色兩類。非彩色是指黑、白和灰系統(tǒng)色。彩色是指所有色彩。（3）任

15、何色彩都有飽和度和亮度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬(wàn)種色彩。網(wǎng)頁(yè)制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說(shuō)，在一般情況下，彩色頁(yè)面比完全黑白頁(yè)面更加吸引人。 9.4 為“自我介紹”網(wǎng)頁(yè)配色 通常的做法是：主要文字內(nèi)容用非彩色（黑色），邊框、背景以及圖片用彩色。這樣做的效果可使頁(yè)面整體不單調(diào)，看主要內(nèi)容也不會(huì)眼花。非彩色的搭配：黑白是最基本和最簡(jiǎn)單的搭配，白字黑底，黑底白字都非常清晰明了?；疑侨f(wàn)能色，可以和任何彩色搭配，也可以幫助兩種對(duì)立的色彩和諧過(guò)渡。如果你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對(duì)不會(huì)太差。2

16、網(wǎng)頁(yè)配色的知識(shí)進(jìn)階（1）色環(huán)：將色彩按“紅”“黃”“綠”“藍(lán)”“紅”依次過(guò)度漸變，就可以得到一個(gè)色彩環(huán)。色彩環(huán)的兩端是暖色和寒色，當(dāng)中是中型色。（2）色彩的心理感覺(jué)：不同的顏色會(huì)給瀏覽者不同的心理感受。 紅色：是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動(dòng)、憤怒、熱情或活力的感覺(jué)。 綠色：介于冷暖兩種色彩的中間，具有和睦、寧?kù)o、健康及安全的感覺(jué)。 它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。 橙色：也是一種激奮的色彩，具有輕快、歡欣、熱烈、溫馨及時(shí)尚的效果。 黃色：具有快樂(lè)、希望、智慧和輕快的個(gè)性，它的明度最高。 9.4 為“自我介紹”網(wǎng)頁(yè)配色 藍(lán)色：是最具涼爽、清新和專業(yè)的色彩。它和白色混合，

17、能體現(xiàn)柔順、淡雅及浪漫的氣氛（像天空的色彩）。 白色：具有潔白、明快、純真、清潔的感受。 黑色：具有深沉、神秘、寂靜、悲哀及壓抑的感受。 灰色：具有中庸、平凡、溫和、謙讓、中立和高雅的感覺(jué)。每種色彩在飽和度和透明度上略微變化就會(huì)產(chǎn)生不同的感覺(jué)。以綠色為例，黃綠色有青春，旺盛的視覺(jué)意境，而藍(lán)綠色則顯得幽寧，陰深。（3）網(wǎng)頁(yè)色彩搭配的原理 色彩的鮮明性：網(wǎng)頁(yè)的色彩要鮮艷，容易引人注目。 色彩的獨(dú)特性：要有與眾不同的色彩，使得瀏覽者的印象強(qiáng)烈。 色彩的合適性：即色彩和要表達(dá)的內(nèi)容氣氛相適合（如用粉色體現(xiàn)女性站點(diǎn)的柔性）。 色彩的聯(lián)想性：不同色彩會(huì)產(chǎn)生不同的聯(lián)想（藍(lán)色想到天空，黑色想到黑夜，紅色想到喜

18、事等），選擇色彩要和網(wǎng)頁(yè)的內(nèi)涵相關(guān)聯(lián)。 9.4 為“自我介紹”網(wǎng)頁(yè)配色 3網(wǎng)頁(yè)色彩掌握的過(guò)程隨著網(wǎng)頁(yè)制作經(jīng)驗(yàn)的積累，用色有這樣的一個(gè)趨勢(shì)：“單色”“五彩繽紛”“標(biāo)準(zhǔn)色”“單色”一開(kāi)始因?yàn)槿狈夹g(shù)和知識(shí)，只能制作出簡(jiǎn)單的網(wǎng)頁(yè)，色彩單一；在有一定基礎(chǔ)和材料后，希望制作一個(gè)漂亮的網(wǎng)頁(yè)，將自己收集的最好的圖片，最滿意的色彩堆砌在頁(yè)面上，但是時(shí)間一長(zhǎng)，卻發(fā)現(xiàn)色彩雜亂，沒(méi)有個(gè)性和風(fēng)格；第三次重新定位網(wǎng)站，選擇好切合自己的色彩，推出的站點(diǎn)往往比較成功；當(dāng)最后設(shè)計(jì)理念和技術(shù)達(dá)到頂峰時(shí)，則又返樸歸真，用單一色彩甚至非彩色就可以設(shè)計(jì)出簡(jiǎn)潔精美的站點(diǎn)。4網(wǎng)頁(yè)色彩搭配的技巧（1）用一種色彩：這里是指先選定一種色彩，然

19、后調(diào)整亮度和飽和度（說(shuō)得通俗些就是將色彩變淡或則加深），產(chǎn)生新的色彩，用于網(wǎng)頁(yè)。這樣的頁(yè)面看起來(lái)色彩統(tǒng)一，有層次感。（2）用兩種色彩：先選定一種色彩，然后選擇它的對(duì)比色，這樣制作的整個(gè)頁(yè)面色彩豐富但不花哨。（3）用一個(gè)色系：簡(jiǎn)單地說(shuō)就是用一個(gè)感覺(jué)的色彩，例如，淡藍(lán)、淡黃及淡綠，或者土黃、土灰及土藍(lán)。確定色彩的方法因人而宜。 9.4 為“自我介紹”網(wǎng)頁(yè)配色 （4）用黑色和一種彩色：例如大紅的字體配黑色的邊框，會(huì)感覺(jué)很“跳”。（5）在網(wǎng)頁(yè)配色中，需要注意以下兩個(gè)問(wèn)題。 不要將所有顏色都用到，盡量控制在3種色彩以內(nèi)。 背景和前文的對(duì)比盡量要大（絕對(duì)不要用花紋繁復(fù)的圖案作背景），以便突出主要文字內(nèi)容。

20、剛開(kāi)始制作網(wǎng)頁(yè)的用戶可能更習(xí)慣于用一些漂亮的圖片做自己網(wǎng)頁(yè)的背景，但是，更多地瀏覽一下大型商業(yè)網(wǎng)站，會(huì)發(fā)現(xiàn)大型網(wǎng)站更多運(yùn)用的是白色、藍(lán)色、黃色或其他顏色的搭配，使得網(wǎng)頁(yè)顯得典雅、溫馨又不失活潑。更重要的是，這種做法使瀏覽者大大加快了網(wǎng)頁(yè)的加載速度，配合網(wǎng)站豐富的內(nèi)容，使整個(gè)網(wǎng)站更具有吸引力。那么如何搭配顏色才能使主頁(yè)更加絢麗多彩呢？常常遇到的問(wèn)題其實(shí)主要是背景顏色和字體顏色的搭配問(wèn)題：達(dá)到既不顯得呆板，又不至于過(guò)于亮麗而造成過(guò)強(qiáng)刺激的視覺(jué)效果。一般說(shuō)來(lái)，普通的底色應(yīng)柔和些，素一些，淡一些，配上黑字，讀起來(lái)自然、流暢。而為了追求醒目的視覺(jué)效果（如標(biāo)題），可以使用較深的顏色，然后配上對(duì)比鮮明的字體

21、，如白字、黃字或籃字。其實(shí)底色與字體的合理搭配要?jiǎng)龠^(guò)用背景圖畫，因?yàn)楸尘皥D畫太花哨，有種不安靜的感覺(jué)，而純色給人感覺(jué)較好。 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 將“照相館”網(wǎng)頁(yè)中的“汽車”圖像添加到庫(kù)以后，“資源”面板的顯示效果如圖9-5-1所示。圖9-5-1 添加“汽車”圖像庫(kù)項(xiàng)目后的“資源”面板“資源”面板是用來(lái)保存和管理當(dāng)前站點(diǎn)或收藏夾中網(wǎng)頁(yè)資源的面板。資源包括存儲(chǔ)在站點(diǎn)中的各種對(duì)象（也叫元素），例如，圖像、影片、模板或Flash文件等。 圖9-5-1 添加“汽車”圖像庫(kù)項(xiàng)目后的“資源”面板 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 9.5.1 “資源”面板1“資源”面板的作用“資源”面板是用于保存和

22、管理當(dāng)前站點(diǎn)或收藏夾中網(wǎng)頁(yè)資源的面板。資源包括存儲(chǔ)在站點(diǎn)中的各種元素（也叫對(duì)象），例如，模板、圖像或影片文件等。必須先定義一個(gè)本地站點(diǎn)，然后才能在“資源”面板中查看資源。執(zhí)行“窗口”“資源”菜單命令，可調(diào)出“資源”面板，如圖9-5-1所示。2“資源”面板的特點(diǎn)“資源”面板分為4部分，它們的特點(diǎn)如下。（1）元素預(yù)覽窗口：位于“資源”面板的上邊，用于顯示選定元素的內(nèi)容。（2）元素列表框：位于元素預(yù)覽窗口的下邊，用于顯示該站點(diǎn)內(nèi)元素的名稱。（3）分類欄：位于“資源”面板內(nèi)的左邊，包括9個(gè)按鈕。將鼠標(biāo)指針移到按鈕處，即可顯示該按鈕的名稱，從上至下分別為：“圖像”、“顏色”、“URLs”、“Flash”

23、、“Shockwave”、“影片”、“腳本”、“模板”和“庫(kù)”。單擊相應(yīng)的按鈕即可切換“資源”面板顯示的元素類型。（4）應(yīng)用工具欄：位于“資源”面板內(nèi)的底部。單擊元素分類欄中不同的圖標(biāo)按鈕時(shí)，應(yīng)用工具欄中會(huì)出現(xiàn)一些不同的按鈕。 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 3“資源”面板應(yīng)用工具欄中按鈕的作用（1）“插入”按鈕：?jiǎn)螕粼摪粹o，可將選中的素材插入到當(dāng)前網(wǎng)頁(yè)的光標(biāo)處。（2）“刷新站點(diǎn)列表”按鈕：?jiǎn)螕粼摪粹o后，可以刷新站點(diǎn)列表。（3）“編輯”圖標(biāo)按鈕：?jiǎn)螕粼摪粹o，可調(diào)出相應(yīng)的窗口，對(duì)選中素材進(jìn)行編輯。（4）“新建模板”按鈕：?jiǎn)螕粼摪粹o后，可以在“資源”面板內(nèi)新建一個(gè)模板。（5）“應(yīng)用”按鈕：?jiǎn)螕粼摪?/p>

24、鈕，可以應(yīng)用選中的元素。例如，在單擊“顏色”按鈕后，再選中一種顏色，則單擊該按鈕，即可應(yīng)用選中的顏色。（6）“添加到收藏夾”按鈕：?jiǎn)螕粼摪粹o可將網(wǎng)頁(yè)中選中的內(nèi)容放置到收藏夾中。若要查看收藏夾的內(nèi)容，可單擊“資源”面板上邊的“收藏”單選項(xiàng)。（7）“從收藏夾中刪除”按鈕：?jiǎn)螕粼摪粹o可將在收藏夾中選中的內(nèi)容從收藏夾中刪除。（8）“刪除”按鈕：?jiǎn)螕粼摪粹o可刪除在“站點(diǎn)資源”面板中選中的內(nèi)容。例如，選中模板列表框內(nèi)的模板圖標(biāo)和默認(rèn)的名稱，再單擊默認(rèn)的名稱后，可以修改模板的名稱。在選中模板圖標(biāo)的情況下，單擊“刪除”按鈕，即可刪除選中的模板圖標(biāo)。 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 （9）“新建收藏夾的文件夾”

25、按鈕：?jiǎn)螕粼摪粹o可在收藏夾中新建一個(gè)文件夾。9.5.2 創(chuàng)建庫(kù)項(xiàng)目和引用庫(kù)項(xiàng)目1創(chuàng)建庫(kù)項(xiàng)目庫(kù)在“資源”面板內(nèi)，存儲(chǔ)有庫(kù)部件，庫(kù)部件就是一些對(duì)象的集合，這些庫(kù)部件是網(wǎng)站各網(wǎng)頁(yè)經(jīng)常要使用的內(nèi)容。在創(chuàng)建網(wǎng)頁(yè)時(shí)，只需將庫(kù)中的庫(kù)部件插入網(wǎng)頁(yè)即可。將頁(yè)面中的對(duì)象（可以是文字、圖像、表格以及表單等）放入庫(kù)中，即在庫(kù)中形成一個(gè)庫(kù)項(xiàng)目。創(chuàng)建庫(kù)項(xiàng)目可按照下述方法進(jìn)行操作。（1）執(zhí)行“窗口”“資源”菜單命令，調(diào)出“資源”面板。單擊“資源”面板左邊的“庫(kù)”按鈕，進(jìn)入“資源”（庫(kù)）面板。用鼠標(biāo)將網(wǎng)頁(yè)中的對(duì)象（不能是不可編輯區(qū)域中的對(duì)象）拖曳到“資源”（庫(kù)）面板下邊的元素列表框內(nèi)，可以在“資源”面板的元素預(yù)覽窗口中顯示該

26、對(duì)象的內(nèi)容。（2）選中“資源”（庫(kù)）面板中元素列表框內(nèi)對(duì)象（即庫(kù)項(xiàng)目）的名字，再次單擊該對(duì)象的名稱，接著就可以更改對(duì)象的名稱。用這種方法也可更改模板元素的名稱。（3）如果只想在“資源”（庫(kù)）面板中創(chuàng)建一個(gè)庫(kù)項(xiàng)目，而不想使選中的對(duì)象成為庫(kù)項(xiàng)目的一個(gè)引用對(duì)象，則可以在執(zhí)行上述操作時(shí)，按住Ctrl鍵。 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 （4）要?jiǎng)h除庫(kù)項(xiàng)目，可選中元素列表框中的庫(kù)項(xiàng)目，再單擊庫(kù)管理器右下角的“刪除”按鈕即可。刪除庫(kù)項(xiàng)目后，它在頁(yè)面內(nèi)的引用不會(huì)丟失。例如，打開(kāi)一個(gè)網(wǎng)頁(yè)文檔，將其中的一幅圖像拖曳到“資源”（庫(kù)）面板的元素列表框中，該圖像將自動(dòng)轉(zhuǎn)變?yōu)閹?kù)項(xiàng)目。選中對(duì)象的名稱后，再單擊對(duì)象的名稱，

27、即可更改對(duì)象的名稱。2引用庫(kù)項(xiàng)目（1）使用庫(kù)項(xiàng)目在網(wǎng)頁(yè)內(nèi)創(chuàng)建引用：利用庫(kù)項(xiàng)目在頁(yè)面內(nèi)創(chuàng)建庫(kù)項(xiàng)目引用對(duì)象的操作方法如下。 將光標(biāo)移到網(wǎng)頁(yè)內(nèi)要插入“資源”（庫(kù)）面板內(nèi)對(duì)象（即庫(kù)項(xiàng)目引用對(duì)象）的位置。 打開(kāi)“資源”（庫(kù)）面板，選中元素列表框中的一個(gè)庫(kù)項(xiàng)目對(duì)象，將它拖曳到網(wǎng)頁(yè)頁(yè)面的光標(biāo)處。也可以在選中對(duì)象的情況下，單擊“資源”（庫(kù)）面板左下角的“插入”按鈕。 如果只想在頁(yè)面內(nèi)創(chuàng)建一個(gè)對(duì)象，而不建立它與庫(kù)項(xiàng)目的引用關(guān)系，則可以在執(zhí)行上述操作時(shí)按住Ctrl鍵。 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 （2）庫(kù)項(xiàng)目引用的屬性欄：網(wǎng)頁(yè)頁(yè)面中引用的對(duì)象會(huì)用特定顏色進(jìn)行標(biāo)記。選中一個(gè)該對(duì)象后，它的“屬性”欄如圖9-5-2

28、所示。“屬性”欄中的“Src”文字給出了庫(kù)的名稱和路經(jīng)，其擴(kuò)展名為“.lbi”。說(shuō)明此對(duì)象是這個(gè)庫(kù)的一個(gè)庫(kù)項(xiàng)目的引用對(duì)象。 圖9-5-2 庫(kù)項(xiàng)目引用對(duì)象的“屬性”欄9.5 添加“汽車”圖像庫(kù)項(xiàng)目 9.5.3 修改庫(kù)項(xiàng)目和更新頁(yè)面1編輯頁(yè)面中庫(kù)項(xiàng)目的引用在選中頁(yè)面中由庫(kù)項(xiàng)目產(chǎn)生的對(duì)象（即庫(kù)項(xiàng)目引用）時(shí)，單擊庫(kù)項(xiàng)目引用屬性欄內(nèi)的“從源文件中分離”按鈕，以后即可隨意對(duì)該對(duì)象進(jìn)行編輯，但會(huì)使應(yīng)用庫(kù)項(xiàng)目建立的對(duì)象與庫(kù)項(xiàng)目的引用關(guān)系斷開(kāi)。以后修改庫(kù)項(xiàng)目不會(huì)影響對(duì)象的變化。2編輯庫(kù)項(xiàng)目（1）選中頁(yè)面中由庫(kù)項(xiàng)目產(chǎn)生的對(duì)象，單擊庫(kù)項(xiàng)目引用“屬性”欄內(nèi)的“打開(kāi)”按鈕或雙擊該庫(kù)項(xiàng)目圖標(biāo)，打開(kāi)選定的庫(kù)項(xiàng)目的編輯窗口和

29、庫(kù)項(xiàng)目對(duì)象，可以在該編輯窗口內(nèi)修改庫(kù)項(xiàng)目對(duì)象。（2）修改完庫(kù)項(xiàng)目對(duì)象后，執(zhí)行“文件”“保存”菜單命令，進(jìn)行庫(kù)項(xiàng)目的保存。此時(shí)會(huì)彈出“更新庫(kù)項(xiàng)目”對(duì)話框，如圖9-5-3所示，提示用戶是否更新網(wǎng)站。 圖9-5-3 “更新庫(kù)項(xiàng)目”對(duì)話框 9.5 添加“汽車”圖像庫(kù)項(xiàng)目 （3）單擊“更新”按鈕，即可開(kāi)始更新。更新后，頁(yè)面內(nèi)由庫(kù)項(xiàng)目產(chǎn)生的對(duì)象即會(huì)隨之改變。然后，屏幕會(huì)顯示“更新頁(yè)面”對(duì)話框，如圖9-5-4所示。它與圖9-3-3所示的對(duì)話框基本一樣，只是“更新”欄中選中的是“庫(kù)項(xiàng)目”復(fù)選框。 圖9-5-4 “更新頁(yè)面”對(duì)話框9.5 添加“汽車”圖像庫(kù)項(xiàng)目 3編輯庫(kù)項(xiàng)目如果將庫(kù)中的一些項(xiàng)目刪除或更名，則頁(yè)面

30、內(nèi)使用庫(kù)項(xiàng)目建立的對(duì)象就會(huì)成為一般的對(duì)象，不再與庫(kù)的項(xiàng)目有引用關(guān)系。要利用這些對(duì)象重新建立庫(kù)項(xiàng)目，可在選中對(duì)象的情況下，單擊庫(kù)項(xiàng)目引用“屬性”欄內(nèi)的“重新創(chuàng)建”按鈕，即可重建原來(lái)的庫(kù)項(xiàng)目。如果要修改包含動(dòng)作的對(duì)象，則會(huì)使對(duì)象的行為丟失，因?yàn)橹挥幸徊糠中袨榇a在部件中。此時(shí)只能斷開(kāi)對(duì)象與庫(kù)項(xiàng)目的引用關(guān)系，重新修改對(duì)象的行為，再將對(duì)象拖曳到庫(kù)中生成新的庫(kù)項(xiàng)目。新的庫(kù)項(xiàng)目的名稱要和原庫(kù)項(xiàng)目的名稱相同。4更新網(wǎng)站在“更新頁(yè)面”對(duì)話框中的“查看”下拉列表框內(nèi)選擇“整個(gè)站點(diǎn)”列表項(xiàng)，右邊會(huì)出現(xiàn)一個(gè)新的下拉列表框，并激活“開(kāi)始”按鈕。在新的下拉列表框內(nèi)選擇站點(diǎn)名稱，單擊“開(kāi)始”按鈕，即可對(duì)選定的站點(diǎn)進(jìn)行檢測(cè)

31、和更新，并給出檢測(cè)信息報(bào)告。 9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 從本實(shí)例開(kāi)始，通過(guò)下面兩節(jié)，將介紹一個(gè)網(wǎng)站從策劃到制作再到發(fā)布的整個(gè)過(guò)程。制作一個(gè)網(wǎng)站不像制作一個(gè)網(wǎng)頁(yè)那樣簡(jiǎn)單，其中不僅要用到制作網(wǎng)頁(yè)的各種知識(shí)，還需要對(duì)站點(diǎn)構(gòu)成、頁(yè)面布局以及圖像處理等知識(shí)有充分的了解。在Dreamweaver中制作的“日本旅游”網(wǎng)站中的主頁(yè)在瀏覽器中的顯示效果如圖9-6-1所示。單擊網(wǎng)頁(yè)底部圖像導(dǎo)航欄中的任意一個(gè)名稱，即可鏈接到相應(yīng)的子頁(yè)面。部分子頁(yè)面的顯示效果如圖9-6-2所示。 圖9-6-1 “日本旅游”網(wǎng)站的主頁(yè)9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 9.6.1 規(guī)劃站點(diǎn)在制作網(wǎng)站之前，應(yīng)該首先對(duì)站點(diǎn)有個(gè)整

32、體的規(guī)劃，這樣做的好處是能夠很好地把握站點(diǎn)的結(jié)構(gòu)，有利于以后的更新和修改工作。站點(diǎn)結(jié)構(gòu)一般有以下幾種形式。（1）按類型劃分：它的特點(diǎn)是將不同格式的文件分別保存。將網(wǎng)頁(yè)文件保存在站點(diǎn)的根目錄下，其他元素分別保存在相應(yīng)的目錄中。一般情況下，頁(yè)面數(shù)量小于30個(gè)的小型網(wǎng)站多采用此結(jié)構(gòu)（個(gè)別情況例外）。 9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 圖9-6-2 “日本旅游”網(wǎng)站中的部分子頁(yè)面 9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 （2）按欄目劃分：如果一個(gè)網(wǎng)站有多個(gè)欄目，可以為每一個(gè)欄目建立一個(gè)目錄。在每個(gè)子欄目的目錄下采用“按類型劃分”的方法進(jìn)行規(guī)劃。網(wǎng)站結(jié)構(gòu)較復(fù)雜，且頁(yè)面數(shù)量較多的站點(diǎn)大多采用此結(jié)構(gòu)。（3）按

33、更新時(shí)間劃分：將主頁(yè)及主要頁(yè)面保存在根目錄下，然后根據(jù)新頁(yè)面（新加入的頁(yè)面）的時(shí)間建立文件夾并進(jìn)行更新。這種結(jié)構(gòu)適用于信息量比較大，更新比較多的網(wǎng)站。（4）綜合方法劃分：在根目錄和各子目錄下分別采用上述兩個(gè)或兩個(gè)以上劃分方法的網(wǎng)站。大型商業(yè)網(wǎng)站多采用此結(jié)構(gòu)。9.6.2 商業(yè)網(wǎng)站制作前的準(zhǔn)備工作1網(wǎng)站策劃首先，在做網(wǎng)站前應(yīng)給要做的網(wǎng)站一個(gè)準(zhǔn)確的定位。給網(wǎng)站定位，明確建站目地是第一步要做的。2信息收集在明確建站目的和網(wǎng)站定位以后，開(kāi)始收集相關(guān)的意見(jiàn)。這一步是前期策劃中最為關(guān)鍵的一步，因?yàn)樽鼍W(wǎng)站一定是為公司服務(wù)的，所以收集意見(jiàn)和想法是最為必要的。 9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 （4）參考網(wǎng)站：

34、標(biāo)明本欄目參考了哪些網(wǎng)站，或可以參考哪些網(wǎng)站，并說(shuō)明參考其他網(wǎng)站的哪些優(yōu)點(diǎn)，哪些地方是在建設(shè)過(guò)程當(dāng)中應(yīng)該注意的。（5）附錄：用于記錄這個(gè)文檔的歷史修改過(guò)程以及改了哪些內(nèi)容。5在Photoshop中制作效果圖通過(guò)策劃、信息收集、策劃，對(duì)網(wǎng)站已經(jīng)有了一個(gè)系統(tǒng)的規(guī)劃。在完成這些工作后，就可以開(kāi)始制作網(wǎng)頁(yè)了。商業(yè)網(wǎng)站和個(gè)人網(wǎng)站的區(qū)別是，商業(yè)網(wǎng)站在制作主頁(yè)之前應(yīng)該先在Photoshop中制作一個(gè)效果圖。例如，在制作“實(shí)例4-5互聯(lián)網(wǎng)公司”網(wǎng)頁(yè)之前，在Photoshop中制作的網(wǎng)頁(yè)效果圖的顯示效果如圖9-6-3所示。 制作效果圖時(shí)，可以根據(jù)頁(yè)面中各個(gè)欄目及圖像的位置分別使用不同的圖層，然后將各個(gè)圖像元素分別保存為較小的圖像，作為網(wǎng)頁(yè)中使用的圖像、背景圖或按鈕。 9.6