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

1、第9章 模板、資源面板與綜合實(shí)例 本章要點(diǎn)9.1 “商品介紹”模板 9.2 “商品介紹”網(wǎng)頁 9.3 修改“商品介紹”模板 9.4 為“自我介紹”網(wǎng)頁配色 9.5 添加“汽車”圖像庫項(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)頁的樣板，它有可編輯區(qū)和不可編輯區(qū)。不可編輯區(qū)的內(nèi)容是不可以改變的，通常為標(biāo)題欄、網(wǎng)頁圖標(biāo)、框架結(jié)構(gòu)、鏈接文字和導(dǎo)航欄等。可編輯區(qū)的內(nèi)容可以改變，通常為具體的文字

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

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

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

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

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

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

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

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

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

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

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

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

14、“自我介紹”網(wǎng)頁配色 9.4.2 網(wǎng)頁的配色原則網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好地表達(dá)出預(yù)想的內(nèi)涵呢？這里介紹一些簡單的配色知識。1色彩的基本知識（1）紅，黃，藍(lán)是三原色，其他的色彩都可以用這3種顏色按不同比例而成。網(wǎng)頁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ǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機(jī)構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面比完全黑白頁面更加吸引人。 9.4 為“自我介紹”網(wǎng)頁配色 通常的做法是：主要文字內(nèi)容用非彩色（黑色），邊框、背景以及圖片用彩色。這樣做的效果可使頁面整體不單調(diào)，看主要內(nèi)容也不會眼花。非彩色的搭配：黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了?；疑侨f能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實(shí)在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。2

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

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

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

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

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

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

22、管理當(dāng)前站點(diǎn)或收藏夾中網(wǎng)頁資源的面板。資源包括存儲在站點(diǎn)中的各種元素（也叫對象），例如，模板、圖像或影片文件等。必須先定義一個(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”、“影片”、“腳本”、“模板”和“庫”。單擊相應(yīng)的按鈕即可切換“資源”面板顯示的元素類型。（4）應(yīng)用工具欄：位于“資源”面板內(nèi)的底部。單擊元素分類欄中不同的圖標(biāo)按鈕時(shí)，應(yīng)用工具欄中會出現(xiàn)一些不同的按鈕。 9.5 添加“汽車”圖像庫項(xiàng)目 3“資源”面板應(yīng)用工具欄中按鈕的作用（1）“插入”按鈕：單擊該按鈕，可將選中的素材插入到當(dāng)前網(wǎng)頁的光標(biāo)處。（2）“刷新站點(diǎn)列表”按鈕：單擊該按鈕后，可以刷新站點(diǎn)列表。（3）“編輯”圖標(biāo)按鈕：單擊該按鈕，可調(diào)出相應(yīng)的窗口，對選中素材進(jìn)行編輯。（4）“新建模板”按鈕：單擊該按鈕后，可以在“資源”面板內(nèi)新建一個(gè)模板。（5）“應(yīng)用”按鈕：單擊該按

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

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

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

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

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

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

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

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

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

33、更新時(shí)間劃分：將主頁及主要頁面保存在根目錄下，然后根據(jù)新頁面（新加入的頁面）的時(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)站定位以后，開始收集相關(guān)的意見。這一步是前期策劃中最為關(guān)鍵的一步，因?yàn)樽鼍W(wǎng)站一定是為公司服務(wù)的，所以收集意見和想法是最為必要的。 9.6 綜合實(shí)例：“日本旅游”網(wǎng)站 （4）參考網(wǎng)站：

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