網(wǎng)頁(yè)制作-清華大學(xué)

第12章網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)12.1Dreamweaver8.0簡(jiǎn)介12.2創(chuàng)建與編輯本地站點(diǎn)12.3網(wǎng)頁(yè)文件的基本操作12.4簡(jiǎn)單網(wǎng)頁(yè)的制作實(shí)例12.5本章小結(jié)

本章重點(diǎn)：Dreamweaver8.0的基本組成。如何創(chuàng)建和規(guī)劃一個(gè)本地站點(diǎn)。如何創(chuàng)建和編輯一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。12．1Dreamweaver8.0簡(jiǎn)介

2005年4月Macromedia公司被著名的軟件公司Adobe收購(gòu)，Dreamweaver8.0是Macromedia公司最后發(fā)布的集網(wǎng)頁(yè)設(shè)計(jì)、代碼開(kāi)發(fā)、網(wǎng)站創(chuàng)建和管理于一體的軟件。它保留了Dreamweaver早期版本的各種優(yōu)點(diǎn)，提供了可視化的布局工具、快速的web應(yīng)用程序開(kāi)發(fā)，以及廣泛的代碼編輯和ASP/JSP/ASP.NET/PHP等動(dòng)態(tài)網(wǎng)頁(yè)的支持，并可以實(shí)現(xiàn)完整的數(shù)據(jù)庫(kù)的編寫(xiě)。也就是說(shuō)Dreamweaver8.0不僅可以輕松設(shè)計(jì)網(wǎng)站前臺(tái)的頁(yè)面，而且也可以方便地實(shí)現(xiàn)網(wǎng)站后臺(tái)的各種復(fù)雜功能。12.1.1Dreamweaver8.0的啟動(dòng)方式 啟動(dòng)Dreamweaver8.0與啟動(dòng)一般軟件的方法相同，其過(guò)程依次是選擇WindowsXP操作系統(tǒng)中的【開(kāi)始】|【所有程序】|【Macromedia】|【MacromediaDreamweaver8.0】命令。 也可雙擊桌面上的快捷方式圖標(biāo)，便可啟動(dòng)Dreamweaver8.0，隨即可看到Dreamweaver8.0全新的工作界面。12.1.2Dreamweaver8.0的工作環(huán)境 Dreamweaver8.0新的工作區(qū)環(huán)境比早期的版本更加靈活、方便、實(shí)用。啟動(dòng)Dreamweaver8.0以后首先看到的是起始頁(yè)，如圖12-1所示。設(shè)計(jì)者可以在起始頁(yè)中選擇【打開(kāi)最近項(xiàng)目】、【創(chuàng)建新項(xiàng)目】和【從范例創(chuàng)建】等選項(xiàng)組中的相應(yīng)的操作，常用的選項(xiàng)組的具體意義如下。（1）【打開(kāi)最近項(xiàng)目】選項(xiàng)組：?jiǎn)螕簟敬蜷_(kāi)最近項(xiàng)目】下的文件名稱，可以直接打開(kāi)最近編輯過(guò)的網(wǎng)頁(yè)文件。（2）【創(chuàng)建新項(xiàng)目】選項(xiàng)組：?jiǎn)螕簟緞?chuàng)建新項(xiàng)目】下的相應(yīng)命令，可以創(chuàng)建不同的網(wǎng)頁(yè)文件。如單擊【HTML】選項(xiàng)，將創(chuàng)建一個(gè)靜態(tài)網(wǎng)頁(yè)文件；單擊【ASPVBScript】選項(xiàng)，將創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)；單擊【CSS】選項(xiàng)，將創(chuàng)建一個(gè)CSS樣式表文件。圖12-1Dreamweaver8.0起始頁(yè)示意圖（3）【從范例創(chuàng)建】選項(xiàng)組：可以參考Dreamweaver8.0預(yù)置的范例創(chuàng)建新的網(wǎng)頁(yè)文檔。單擊【創(chuàng)建新項(xiàng)目】下的【HTML】選項(xiàng)后，屏幕顯示的是工作區(qū)窗口，此時(shí)系統(tǒng)打開(kāi)一個(gè)名為Untitled的空白文檔，在網(wǎng)頁(yè)文件文檔窗口中設(shè)計(jì)者可以完成網(wǎng)頁(yè)的設(shè)計(jì)。工作區(qū)窗口由標(biāo)題欄、菜單欄、工具欄、網(wǎng)頁(yè)文檔編輯區(qū)、狀態(tài)欄和面板組等基本部分組成，如圖12-2所示。圖12-2Dreamweaver8.0的工作環(huán)境

工作區(qū)窗口各部分功能如下。1．標(biāo)題欄標(biāo)題欄是顯示當(dāng)前網(wǎng)頁(yè)的標(biāo)題信息，當(dāng)前被編輯網(wǎng)頁(yè)文件的文件名會(huì)在括號(hào)里顯示。用標(biāo)題欄左邊和右邊的窗口控制按鈕，可以完成窗口的【最大化】、【最小化】、【移動(dòng)】、【還原】、【關(guān)閉】等操作。2．菜單欄菜單欄是設(shè)計(jì)者選擇操作命令的地方。菜單欄的選項(xiàng)依次為【文件】、【編輯】、【查看】、【插入】、【修改】、【文本】、【命令】、【站點(diǎn)】、【窗口】和【幫助】。浮動(dòng)面板上的各項(xiàng)操作基本上都有菜單操作命令與之相對(duì)應(yīng)，在以后的章節(jié)中會(huì)逐一介紹主要的菜單操作命令。3．插入欄 無(wú)論多么精美的網(wǎng)頁(yè)，其基本組成元素?zé)o非是些圖片、文字以及多媒體特效，這些網(wǎng)頁(yè)元素可以利用插入欄中的工具來(lái)置放到網(wǎng)頁(yè)上。用插入欄可以插入網(wǎng)頁(yè)設(shè)計(jì)中的一些最常用的元素，如圖像、文本、特殊字符、Flash動(dòng)畫(huà)等等。插入欄在菜單欄下方，選擇【窗口】|【插入】命令，可顯示或隱藏插入欄，快捷鍵CTRL+F2是顯示或隱藏插入欄的切換開(kāi)關(guān)，如圖12-2所示。其中默認(rèn)的9個(gè)選項(xiàng)分別為：常用、布局、表單、文本、HTML、應(yīng)用程序、Flash元素、收藏夾、顯示為制表符，單擊【顯示為制表符】選項(xiàng)，可以改變插入欄的顯示方式。3．文檔工具欄 在文檔窗口中有一個(gè)文檔工具欄。文檔工具欄最左邊的是代碼視圖和設(shè)計(jì)視圖的切換按鈕。利用切換按鈕可在【代碼】、【設(shè)計(jì)】、【代碼和設(shè)計(jì)】的三種視圖方式之間切換，改變網(wǎng)頁(yè)的編輯方式。設(shè)計(jì)者在編輯網(wǎng)頁(yè)的過(guò)程中可隨時(shí)了解相應(yīng)的HTML代碼，或者在編寫(xiě)HTML代碼時(shí)方便地看到網(wǎng)頁(yè)的設(shè)計(jì)效果。中間【標(biāo)題】文本框可輸入當(dāng)前網(wǎng)頁(yè)名稱，如果當(dāng)前網(wǎng)頁(yè)文檔已經(jīng)有了一個(gè)標(biāo)題，則該標(biāo)題將顯示在該文本框中。右邊是一些文檔常用的工具按鈕，如圖12-3所示。圖12-3文檔工具欄文檔工具欄中主要的工具按鈕功能如下。（1） 沒(méi)有瀏覽器/檢查錯(cuò)誤：可以檢查跨瀏覽器兼容性。（2） 驗(yàn)證標(biāo)記：可以驗(yàn)證當(dāng)前文檔或選定的標(biāo)簽。（3） 文件管理：?jiǎn)螕暨@個(gè)按鈕可以在下拉菜單中實(shí)現(xiàn)對(duì)文件只讀屬性的編輯；本地站點(diǎn)和服務(wù)器端文件的上傳和下載；以及方便團(tuán)隊(duì)工作的設(shè)計(jì)備注等菜單命令。（4） 在瀏覽器中預(yù)覽和調(diào)試：?jiǎn)螕暨@個(gè)按鈕可以在下拉菜單中實(shí)現(xiàn)網(wǎng)頁(yè)預(yù)覽（可用功能鍵F12代替），以及選擇用來(lái)預(yù)覽網(wǎng)頁(yè)的瀏覽器等工作。（5） 刷新設(shè)計(jì)視圖：在【代碼】視圖中更改代碼后，單擊該按鈕可以刷新文檔的【設(shè)計(jì)】視圖。

（6） 視圖選項(xiàng)：?jiǎn)螕暨@個(gè)按鈕可以在下拉菜單中實(shí)現(xiàn)一些人性化的功能，可以為【代碼】視圖和【設(shè)計(jì)】視圖設(shè)置選項(xiàng)，如視圖顯示的位置，HTML代碼高亮度顯示，語(yǔ)法顏色提示和代碼縮進(jìn)方式，行號(hào)提示與頁(yè)面排版標(biāo)記顯示等等。（7） 可視化助理：可以使用不同的可視化助理來(lái)設(shè)計(jì)頁(yè)面。4．編輯區(qū)網(wǎng)頁(yè)文件的編輯區(qū)域是Dreamweaver8.0的文檔窗口的中間部分。啟動(dòng)Dreamweaver8.0時(shí)，就創(chuàng)建了一個(gè)空白的網(wǎng)頁(yè)文件等待編輯，網(wǎng)頁(yè)編輯區(qū)的大小可以通過(guò)用鼠標(biāo)拖曳編輯區(qū)右面邊框線來(lái)調(diào)整，或者單擊編輯區(qū)右面邊框線上的按鈕，完成最大化或還原網(wǎng)頁(yè)編輯區(qū)的操作。 5．狀態(tài)欄 狀態(tài)欄是顯示當(dāng)前網(wǎng)頁(yè)的有關(guān)信息。在狀態(tài)欄中自左至右分別是：標(biāo)簽選擇器、頁(yè)面編輯工具、視窗設(shè)置菜單、頁(yè)面信息框等，如圖12-5所示，它們特點(diǎn)和功能如下。

1)標(biāo)簽選擇器 在編輯網(wǎng)頁(yè)時(shí)，當(dāng)設(shè)計(jì)者將光標(biāo)置于網(wǎng)頁(yè)某個(gè)位置，便會(huì)在標(biāo)記選擇器中顯示相應(yīng)的HTML標(biāo)簽，單擊HTML標(biāo)簽則可選擇網(wǎng)頁(yè)中相對(duì)應(yīng)的編輯對(duì)象。右擊某個(gè)HTML標(biāo)簽，選擇快捷菜單中的相應(yīng)的命令，可對(duì)HTML標(biāo)簽作進(jìn)一步的編輯。圖12-5狀態(tài)欄示意圖2)頁(yè)面編輯工具 選取工具：?jiǎn)螕粼摴ぞ吆螅梢杂檬髽?biāo)選取網(wǎng)頁(yè)文檔中的元素。 手形工具：?jiǎn)螕粼摴ぞ吆螅梢栽凇疚臋n】窗口中移動(dòng)當(dāng)前文檔。 縮放工具：該工具與【設(shè)置顯示比例】彈出式菜單可以縮放文檔的顯示比例。3)窗設(shè)置菜單 在【視窗設(shè)置】菜單中顯示當(dāng)前文檔窗口的大小都是以像素為單位的，這個(gè)窗口尺寸是動(dòng)態(tài)顯示的，用鼠標(biāo)拖動(dòng)文檔窗口邊框改變窗口大小時(shí)，顯示的窗口尺寸也會(huì)隨之改變。單擊視窗設(shè)置框右邊的小按鈕，在彈出的下拉菜單中選擇【編輯大小】命令，可以定制窗口的大小尺寸，如圖12-6所示。4）頁(yè)面信息框 顯示網(wǎng)頁(yè)容量、傳輸速率和該網(wǎng)頁(yè)在Internet上完全下載的時(shí)間（系統(tǒng)默認(rèn)的連接速度為56.0kb/s）。例如，表示當(dāng)前網(wǎng)頁(yè)文檔大小為25KB，下載時(shí)間約為4秒。將連接速度改為當(dāng)前主流產(chǎn)品的速度56kb/s，便可關(guān)注當(dāng)前正在編輯的網(wǎng)頁(yè)下載所需的時(shí)間，如圖12-6所示。圖12-6狀態(tài)欄參數(shù)選擇對(duì)話框6．浮動(dòng)面板和浮動(dòng)面板組 Dreamweaver8.0默認(rèn)的浮動(dòng)面板組有以下4個(gè)。（1）【CSS】浮動(dòng)面板組包含【CSS樣式】和【層】2個(gè)浮動(dòng)面板，主要功能是網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)頁(yè)格式化的工具。（2）【應(yīng)用程序】浮動(dòng)面板組包含【數(shù)據(jù)庫(kù)】、【綁定】、【服務(wù)器行為】、【組件】4個(gè)浮動(dòng)面板，主要提供動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)和數(shù)據(jù)庫(kù)管理的工具。（3）【標(biāo)簽檢查器】浮動(dòng)面板組包含【屬性】和【行為】2個(gè)浮動(dòng)面板，主要功能是查看和修改網(wǎng)頁(yè)元素的屬性，將JavaScript（客戶端）行為附加到頁(yè)面元素上。（4）【文件】浮動(dòng)面板組包含【站點(diǎn)】、【資源】和【代碼片斷】3個(gè)浮動(dòng)面板，主要功能是查看和管理站點(diǎn)中的各種文件資源。常用的浮動(dòng)面板組的操作方法如下。（1）展開(kāi)和折疊浮動(dòng)面板組：Dreamweaver8.0的每個(gè)浮動(dòng)面板組都具有展開(kāi)與折疊的功能，單擊面板左上角的三角標(biāo)記即可展開(kāi)與折疊浮動(dòng)面板組，如圖12-7所示。（2）移動(dòng)浮動(dòng)面板組：將鼠標(biāo)指向浮動(dòng)面板組左上角的標(biāo)簽，當(dāng)鼠標(biāo)指針變成4個(gè)方向箭頭時(shí)便可移動(dòng)浮動(dòng)面板組。利用這種方法可將浮動(dòng)面板組拖離浮動(dòng)面板組停靠區(qū)，或?qū)⒏?dòng)面板組拖入浮動(dòng)面板組停靠區(qū)。（3）重新組合浮動(dòng)面板：選中浮動(dòng)面板組中某個(gè)選項(xiàng)卡，單擊浮動(dòng)面板組右上角的按鈕打開(kāi)下拉式菜單，并在級(jí)聯(lián)菜單中選擇與當(dāng)前浮動(dòng)面板組合的浮動(dòng)面板組，可重新組合浮動(dòng)面板，如圖12-8所示。圖12-7展開(kāi)和折疊的浮動(dòng)面板組圖12-8浮動(dòng)面板組的級(jí)聯(lián)菜單（4）浮動(dòng)面板組的其他操作：選中浮動(dòng)面板組中的某個(gè)選項(xiàng)卡，單擊浮動(dòng)面板組右上角的按鈕，打開(kāi)下拉式菜單，選擇【重命名面板組】命令，可在彈出的重命名面板組的對(duì)話框中給面板組的定制一個(gè)個(gè)性化的名字，如圖12-9所示；在下拉式菜單中選擇【最大化面板組】和【關(guān)閉面板組】命令，便可完成對(duì)面板組的相應(yīng)操作。圖12-9重命名面板組對(duì)話框7．屬性面板 屬性面板又稱屬性檢查器，位于網(wǎng)頁(yè)文件編輯區(qū)下方，是用來(lái)顯示、設(shè)置和修改網(wǎng)頁(yè)中當(dāng)前選中元素的屬性的重要工具。選擇【窗口】|【屬性】命令可顯示或隱藏屬性面板，快捷鍵CTRL+F3是顯示或隱藏屬性面板的切換開(kāi)關(guān)。當(dāng)某個(gè)頁(yè)面元素的屬性被修改后，可以直接在編輯窗口中預(yù)覽到元素被修改后的結(jié)果，真正實(shí)現(xiàn)了交互式面對(duì)面地修改網(wǎng)頁(yè)元素功能。 對(duì)于選擇文字、表格、層、表單等不同的元素，屬性面板的設(shè)置內(nèi)容也會(huì)相應(yīng)有所不同。另外，為了不過(guò)多地遮擋網(wǎng)頁(yè)編輯窗口，設(shè)計(jì)者還可根據(jù)需要單擊屬性面板右下角的三角形按鈕，展開(kāi)和折疊屬性面板，如圖12-10所示的是圖像屬性面板（折疊），如圖12-11所示的是表格屬性面板（展開(kāi)）。屬性面板的具體使用方法將在后面章節(jié)逐一介紹。 在Dreamweaver8.0中，打開(kāi)和關(guān)閉浮動(dòng)面板的操作除了在浮動(dòng)面板組中完成外，還可以選擇【窗口】中的相關(guān)命令或按相應(yīng)的快捷鍵來(lái)完成。用功能鍵F4可顯示或隱藏全部浮動(dòng)面板組。圖12-10圖像屬性面板（折疊）圖12-11表格屬性面板（展開(kāi)）12．2創(chuàng)建與編輯本地站點(diǎn)創(chuàng)建網(wǎng)站的步驟一般有以下幾步驟。（1）規(guī)劃站點(diǎn)：了解建站的目的，收集各種有關(guān)的資料。確定站點(diǎn)的主題、風(fēng)格、網(wǎng)站要提供的服務(wù)和網(wǎng)頁(yè)要表達(dá)的主要內(nèi)容。（2）創(chuàng)建站點(diǎn)的基本結(jié)構(gòu)：在計(jì)算機(jī)中創(chuàng)建本地站點(diǎn)的根文件夾以及存放各種資料的子文件夾，配置好所有系統(tǒng)的參數(shù)和站點(diǎn)測(cè)試路徑。（3）網(wǎng)頁(yè)設(shè)計(jì)：充分利用收集到的各種資料，合理地運(yùn)用Dreamweaver8.0提供的技術(shù)，最完美地設(shè)計(jì)出能表達(dá)網(wǎng)站中心思想的網(wǎng)頁(yè)頁(yè)面。12.2.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn)的操作步驟如下。（1）選擇【站點(diǎn)】|【新建站點(diǎn)】命令，打開(kāi)【站點(diǎn)定義】對(duì)話框，如圖12-12所示。在【基本】選項(xiàng)卡的站點(diǎn)名稱文本框中輸入站點(diǎn)名稱，本例輸入Mysite。（2）單擊【高級(jí)】標(biāo)簽，在【高級(jí)】選項(xiàng)卡中設(shè)置本地站點(diǎn)的參數(shù)，如圖12-13所示。（3）在對(duì)話框左側(cè)的【分類】列表中顯示了站點(diǎn)設(shè)置的多類選擇，從中選定不同選項(xiàng)后，其右側(cè)選項(xiàng)卡中將顯示不同的設(shè)置內(nèi)容，選擇【本地信息】選項(xiàng)可設(shè)置本地站點(diǎn)。（4）在【站點(diǎn)名稱】文本框中輸入當(dāng)前編輯的站點(diǎn)名稱。本例可用“Mysite”作為站點(diǎn)的名稱。設(shè)計(jì)者可能會(huì)創(chuàng)建多個(gè)站點(diǎn)，站點(diǎn)名稱是站點(diǎn)的標(biāo)識(shí)，便于Dreamweaver8.0對(duì)各個(gè)站點(diǎn)分別管理。站點(diǎn)名稱可以是不包括：“\”、“/”、“：”、“；”、“*”、“？”、“〉”、“〈”、“|”符號(hào)的其它字符。（5）在【本地根文件夾】文本框中輸入本地站點(diǎn)所對(duì)應(yīng)的本地根文件夾，指明當(dāng)前創(chuàng)建的網(wǎng)頁(yè)所在的位置。單擊文本框右側(cè)的按鈕 ，可用瀏覽的方式輸入本地站點(diǎn)的路徑。若在文件列表區(qū)域右擊鼠標(biāo)，可利用快捷菜單新建一個(gè)文件夾，并可將其指定為本地根文件夾。（6）選中【自動(dòng)刷新本地文件列表】復(fù)選框后，當(dāng)設(shè)計(jì)者將文件復(fù)制到站點(diǎn)有關(guān)的文件夾中時(shí)，系統(tǒng)會(huì)自動(dòng)更新站點(diǎn)文件列表。如果不選該復(fù)選框，則要單擊站點(diǎn)管理器窗口中的【刷新】按鈕，才能自動(dòng)更新站點(diǎn)的文件列表。（7）在【默認(rèn)圖像文件夾】文本框中輸入本地站點(diǎn)中所對(duì)應(yīng)的圖像文件夾，指明當(dāng)前創(chuàng)建的網(wǎng)頁(yè)所用圖片的位置。單擊文本框右側(cè)的按鈕 ，可用瀏覽的方式輸入本地站點(diǎn)中圖像文件夾的路徑。（8）在【鏈接相對(duì)于】選項(xiàng)中，選擇【文檔】選項(xiàng)，可創(chuàng)建從一個(gè)文檔到同一站點(diǎn)上另一個(gè)文檔的超鏈接，也就是使用文檔相對(duì)路徑創(chuàng)建超鏈接；選擇【站點(diǎn)根目錄】選項(xiàng)，必須從站點(diǎn)的根文件夾到文檔的路徑創(chuàng)建超鏈接，而且一定要在下一步中指定HTTP地址。注意：【站點(diǎn)根目錄】相對(duì)路徑提供了從站點(diǎn)的根文件夾到文檔的路徑。如果在處理使用多個(gè)服務(wù)器的大型Web站點(diǎn)，或者在使用承載有多個(gè)不同站點(diǎn)的服務(wù)器，則可能需要使用這些類型的路徑。一般情況下，應(yīng)使用文檔相對(duì)路徑。圖12-12站點(diǎn)定義對(duì)話框9）在【HTTP地址】文本框中，輸入當(dāng)前網(wǎng)頁(yè)將要使用的網(wǎng)址。如果設(shè)計(jì)者已經(jīng)申請(qǐng)了域名，可在此文本框中輸入申請(qǐng)好的域名。如網(wǎng)站的網(wǎng)址是：http//00 可將此網(wǎng)址輸入到【HTTP地址】的文本框中。（10）選中【緩存】這個(gè)復(fù)選框后，Dreamweaver8.0會(huì)給這個(gè)本地站點(diǎn)設(shè)置一個(gè)緩存，以提高站點(diǎn)管理的速度。（11）完成以上設(shè)置后單擊【確定】按鈕，新的本地站點(diǎn)就創(chuàng)建完畢了圖12-13本地站點(diǎn)參數(shù)設(shè)置對(duì)話框

12．2．2本地站點(diǎn)中的文件操作 選擇【窗口】|【文件】命令，可以打開(kāi)【文件】浮動(dòng)面板，并選擇當(dāng)前的本地站點(diǎn)和【本地視圖】選項(xiàng)，就可以對(duì)本地站點(diǎn)下的文件進(jìn)行操作，完成選擇、添加新文件和文件夾，剪切、拷貝、粘貼、復(fù)制、刪除、重命名文件等操作，具體操作方法如下。 1.在本地站點(diǎn)中新建文件夾 在本地站點(diǎn)中新建文件夾可打開(kāi)【文件】浮動(dòng)面板，單擊【文件】面板右上角的菜單按鈕，選擇【文件】|【新建】|【新建文件夾】命令，然后在本地文件列表中命名新建的文件夾，便可完成新建子文件夾的操作。 2.在本地站點(diǎn)中新建文件 與在本地站點(diǎn)中新建文件夾一樣，若要在站點(diǎn)中新建文件，可打開(kāi)【文件】浮動(dòng)面板，選擇【文件】|【新建】|【新建文件】命令，然后在本地文件列表中命名新建的文件，這樣便可完成新的網(wǎng)頁(yè)文件的創(chuàng)建。 3.在站點(diǎn)中選擇多個(gè)文件 打開(kāi)【文件】浮動(dòng)面板，然后在本地文件列表中選擇多個(gè)文件，操作方法如下。 （1）單擊第一個(gè)文件，按住Shift鍵，然后單擊最后一個(gè)要選擇的文件，可選擇一組連續(xù)的文件。 （2）按住Ctrl鍵，然后單擊要選擇的文件，可選擇一組不連續(xù)的文件。 在本地站點(diǎn)中剪切、拷貝、粘貼、復(fù)制、刪除、重命名 打開(kāi)【文件】浮動(dòng)面板，然后在本地文件列表中可完成文件剪切、拷貝、粘貼、復(fù)制、刪除、重命名操作。可先選中要操作的文件，右擊選中的對(duì)象，在快捷菜單中選擇【編輯】選項(xiàng)中相應(yīng)的命令，或按相應(yīng)的快捷鍵便可完成相應(yīng)的文件操作。12.3網(wǎng)頁(yè)文件的基本操作12.3．1創(chuàng)建、打開(kāi)和保存網(wǎng)頁(yè)文件 網(wǎng)頁(yè)的創(chuàng)建、打開(kāi)和保存是制作網(wǎng)頁(yè)的最基本操作，以下就先來(lái)介紹這些基本操作。1．創(chuàng)建HTML文檔創(chuàng)建空白文檔有2種方法。（1）啟動(dòng)Dreamweaver8.0，在起始頁(yè)的【創(chuàng)建新項(xiàng)目】中選擇【HTML】選項(xiàng)，可直接創(chuàng)建一個(gè)空白頁(yè)面，等待編輯。（2）在Dreamweaver8.0已啟動(dòng)或正在使用的情況下，選擇【文件】|【新建】命令，可打開(kāi)【新建文檔】對(duì)話框，在【常規(guī)】選項(xiàng)卡的【類別】中選擇【基本頁(yè)】，如圖12-14所示，并單擊【創(chuàng)建】按鈕確認(rèn)。 用第二種方法來(lái)創(chuàng)建新文檔時(shí)，Dreamweaver8.0會(huì)啟動(dòng)一個(gè)新網(wǎng)頁(yè)窗口，可在當(dāng)前窗口中編輯新網(wǎng)頁(yè)。原來(lái)窗口中仍然顯示以前的網(wǎng)頁(yè)內(nèi)容，此時(shí)原窗口被切換到后臺(tái)。可以通過(guò)單擊Dreamweaver8.0窗口左上角的標(biāo)簽，進(jìn)行兩個(gè)Dreamweaver8.0窗口的切換?；蜻x擇Dreamweaver8.0的【窗口】菜單，完成相應(yīng)的窗口的切換。2．打開(kāi)已建的HTML文檔打開(kāi)已建的HTML文檔的常用方法有3種。（1）在Windows操作系統(tǒng)的資源管理器中選中要打開(kāi)的文件圖標(biāo)，右擊鼠標(biāo)，然后從快捷菜單中選擇【使用Dreamweaver8.0編輯】命令，便可打開(kāi)該文檔。（2）在Dreamweaver8.0已啟動(dòng)的情況下，選擇【文件】|【打開(kāi)】命令，這時(shí)會(huì)出現(xiàn)【打開(kāi)】對(duì)話框，選擇需要打開(kāi)的文件，單擊【打開(kāi)】按鈕，便可打開(kāi)該文檔。（3）在【文件】浮動(dòng)面板的本地視圖中雙擊要打開(kāi)的文件圖標(biāo)，便可打開(kāi)該文件。用上述3種方法打開(kāi)文件時(shí)，系統(tǒng)會(huì)在新的Dreamweaver8.0網(wǎng)頁(yè)編輯窗口中打開(kāi)指定的文件。如果該文件已被打開(kāi)，則會(huì)自動(dòng)切換到該文件的窗口。3．保存指定文件保存指定文件的常用方法有3種。（1）若在網(wǎng)頁(yè)文件編輯區(qū)同時(shí)打開(kāi)了多個(gè)Dreamweaver8.0的窗口，應(yīng)切換到要保存文件的網(wǎng)頁(yè)編輯窗口，然后選擇【文件】|【保存】命令，或按Ctrl+S快捷鍵，保存文件。（2）若希望當(dāng)前文檔以另外的路徑和文件名保存，則可選擇【文件】|【另存為】命令，然后在【保存為】對(duì)話框中，輸入正確的路徑和文件名，保存當(dāng)前文件。（3）在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，有時(shí)會(huì)同時(shí)打開(kāi)了多個(gè)Dreamweaver8.0文檔窗口，編輯多個(gè)網(wǎng)頁(yè)文件。若希望保存全部文件，可選擇菜單【文件】|【保存全部】命令，則可保存所有打開(kāi)的Dreamweaver8.0窗口中正在編輯的文件。若某些窗口中的文件尚未保存過(guò)，則會(huì)出現(xiàn)【保存為】對(duì)話框，輸入該文件的路徑和名稱，然后單擊【保存】按鈕，即可將其保存。圖12-14【新建文檔】對(duì)話框4．關(guān)閉文件 切換到要關(guān)閉的文檔編輯窗口，選擇【文件】|【關(guān)閉】菜單命令，關(guān)閉文件。若文件尚未保存，則會(huì)出現(xiàn)提示對(duì)話框，提示要保存文件。單擊【是】按鈕則保存文件，單擊【否】按鈕則不保存文件，單擊【取消】按鈕，則放棄關(guān)閉操作。 12．3．2設(shè)置網(wǎng)頁(yè)的頁(yè)面屬性 在創(chuàng)建新網(wǎng)頁(yè)時(shí)，默認(rèn)的頁(yè)面總是以白色為背景，沒(méi)有背景圖像、沒(méi)有標(biāo)題。制作一個(gè)網(wǎng)頁(yè)頁(yè)面時(shí)，一般需要先對(duì)網(wǎng)頁(yè)的頁(yè)面標(biāo)題、背景圖像和顏色、文本和超級(jí)鏈接的顏色、文件的文字解碼方式和文件中各元素的顏色等屬性進(jìn)行設(shè)置。選擇【修改】|【頁(yè)面屬性】命令，打開(kāi)【頁(yè)面屬性】對(duì)話框，如圖12-15所示。設(shè)計(jì)者可對(duì)網(wǎng)頁(yè)頁(yè)面的各項(xiàng)參數(shù)進(jìn)行設(shè)置，各項(xiàng)參數(shù)具體意義如下。圖12-15 頁(yè)面屬性設(shè)置對(duì)話框

1．外觀 在【分類】列表中選擇【外觀】選項(xiàng)，主要參數(shù)意義如下。（1）在【頁(yè)面字體】下拉列表中選擇網(wǎng)頁(yè)上主要的文字字體。（2）在【大小】下拉列表中選擇網(wǎng)頁(yè)上主要的文字的大小。（3）在【文本顏色】下拉列表中選擇網(wǎng)頁(yè)上文字的顏色。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)就會(huì)以設(shè)置好文字的【頁(yè)面字體】、【大小】和【文本顏色】輸入文本，要改變網(wǎng)頁(yè)文本的格式可以在屬性面板中完成。（4）在【背景顏色】文本框中，設(shè)置頁(yè)面的背景顏色。如果同時(shí)使用背景圖像和背景顏色，下載圖像時(shí)會(huì)出現(xiàn)顏色，然后圖像覆蓋顏色。如果背景圖像包含任何透明像素，則背景顏色會(huì)透過(guò)背景圖像顯示出來(lái)。（5）在【背景圖像】文本框中，輸入頁(yè)面背景圖片的路徑和文件名?；蛘邌螕粑谋究蛴疫叺摹緸g覽】按鈕，在打開(kāi)的【選擇圖像源】對(duì)話框中選擇背景圖片的路徑和文件名，如圖12-16所示。選中文件后按【確認(rèn)】按鈕確認(rèn)。（6）在【重復(fù)】下拉表中選擇設(shè)置背景圖像的顯示方式，通常選【重復(fù)】選項(xiàng)。（7）在【左邊距】、【右邊距】、【上邊距】和【下邊距】文本框中，設(shè)置整個(gè)頁(yè)面到瀏覽器左、右側(cè)邊緣和頂部、底部邊緣的距離，通常設(shè)置為0。2．鏈接 在【分類】列表中選擇【鏈接】選項(xiàng)，如圖12-17所示。主要參數(shù)意義如下。（1）在【鏈接字體】、【大小】和【鏈接顏色】文本框中，設(shè)置網(wǎng)頁(yè)文件中默認(rèn)的超鏈接文本的字體、大小和顏色。（2）在【變換圖像鏈接】、【訪問(wèn)過(guò)的鏈接】、【活動(dòng)鏈接】和【下劃線樣式】文本框中，設(shè)置網(wǎng)頁(yè)文件中超鏈接的樣式。3．標(biāo)題 在【分類】列表中選擇【標(biāo)題】選項(xiàng)，可在對(duì)話窗口中設(shè)置頁(yè)面標(biāo)題的字體，字體大小等參數(shù)。標(biāo)題的設(shè)置可以幫助站點(diǎn)訪問(wèn)者在瀏覽該網(wǎng)頁(yè)時(shí)明了所查看的內(nèi)容。如果不給頁(yè)面加標(biāo)題，頁(yè)面會(huì)在瀏覽器窗口、書(shū)簽列表和歷史記錄列表中顯示為無(wú)標(biāo)題文檔圖12-16圖片文件選擇對(duì)話框圖12-17設(shè)置中超鏈接屬性4．標(biāo)題／編碼 在【分類】列表中選擇【標(biāo)題／編碼】選項(xiàng)，可指定用于制作網(wǎng)頁(yè)頁(yè)面時(shí)所用語(yǔ)言的文檔編碼類型，以及指定要用于該編碼類型的Unicode標(biāo)準(zhǔn)化表單，如圖12-18所示。主要參數(shù)意義如下。（1）在【標(biāo)題】文本框中，輸入當(dāng)前網(wǎng)頁(yè)文檔的標(biāo)題。（2）在【文檔類型】下拉列表中指定文檔類型。可從菜單中選擇“XHTML1.0Transitional”或“XHTML1.0Strict”，使HTML文檔與XHTML兼容。（3）在【編碼】下拉式菜單中，設(shè)置用于文檔中的字符編碼方式。圖12-18設(shè)置【標(biāo)題／編碼】屬性5．跟蹤圖像 在【分類】列表中選擇【跟蹤圖像】選項(xiàng)后，可在對(duì)話窗口中設(shè)置頁(yè)面的跟蹤圖像，所謂跟蹤圖像是指設(shè)計(jì)時(shí)作為參考的圖像。該圖像只供參考，當(dāng)文檔在瀏覽器中顯示時(shí)并顯示該圖像。（1）在【跟蹤圖像】文本框中，輸入頁(yè)面跟蹤圖像的路徑和文件名?；蛘邌螕粑谋究蛴疫叺摹緸g覽】按鈕，在打開(kāi)的【選擇圖像源】對(duì)話框中選擇跟蹤圖像的路徑和文件名。選中文件后按【確認(rèn)】按鈕確認(rèn)。（2）在【圖像透明度】中，可設(shè)置跟蹤圖像的透明度。頁(yè)面屬性設(shè)置完畢后，單擊【確認(rèn)】按鈕確認(rèn)。12.3.3設(shè)置網(wǎng)頁(yè)元素的顏色 在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，經(jīng)常要對(duì)頁(yè)面背景、文字、鏈接、激活的鏈接設(shè)置顏色。一種顏色可以由色調(diào)、亮度、飽和度來(lái)定義，也可以由其所含的紅、綠、藍(lán)（RGB）色的比例所對(duì)應(yīng)的值來(lái)定義。例如在Dreamweaver8.0中對(duì)文字設(shè)置顏色，可選擇【文本】|【顏色】命令，打開(kāi)【顏色】對(duì)話框，如圖12-19所示。在這個(gè)對(duì)話框中可以選擇【基本顏色】，也可以通過(guò)右側(cè)的色板和滑塊來(lái)選擇新的顏色，并把選中的新顏色添加到【自定義顏色】中去。還可以用Dreamweaver8.0中顏色的工具“吸管”來(lái)檢測(cè)選取顏色。 在HTML語(yǔ)言中，顏色可用16進(jìn)制數(shù)制表示，其范圍是000000H~~FFFFFFH。Windows操作系統(tǒng)中，在256色模式下顯示的顏色在網(wǎng)頁(yè)制作中被稱為安全色（實(shí)際上，只有216個(gè)顏色是Web安全色）。如果顏色超出該范圍，在不同的瀏覽平臺(tái)上可能顯示不同的顏色，從而可能會(huì)破壞網(wǎng)頁(yè)的整體效果。圖12-19顏色對(duì)話框圖12-20顏色選取窗口12.3.4網(wǎng)頁(yè)文本的編輯1．網(wǎng)頁(yè)中文本輸入網(wǎng)頁(yè)中文本輸入的方法如下：（1）頁(yè)面文本輸入還可以選擇【文件】|【導(dǎo)入】|【導(dǎo)入Word文檔】命令，直接導(dǎo)入Word文檔。（2）在文字處理軟件的窗口中選定需要的文本，按Ctrl+C快捷鍵將選中的文本復(fù)制到剪貼板，然后再切換到Dreamweaver8.0網(wǎng)頁(yè)編輯窗口，按Ctrl+V快捷鍵將選中的文本粘貼到指定的位置。（3）直接從鍵盤上輸入西文字符或利用中文操作系統(tǒng)的某種漢字輸入法輸入漢字。2．設(shè)置漢字的字體列表 在網(wǎng)頁(yè)設(shè)計(jì)時(shí)，若需要輸入漢字，應(yīng)先定義該漢字的字體列表。所謂字體列表就是設(shè)計(jì)者經(jīng)常要用的多種字體的一個(gè)組合列表。Dreamweaver8.0預(yù)先已經(jīng)定義了一個(gè)默認(rèn)的字體列表，設(shè)計(jì)者可根據(jù)自己的需要將經(jīng)常要用的字體添加到字體列表中去。將各種漢字字體添加到字體列表中去的操作方法如下。（1）選擇【文本】|【字體】|【編輯字體列表】命令，在【可用字體】列表中選擇字體，并用按鈕將選中的字體移到【選擇的字體】列表中候選；用按鈕刪除【選擇的字體】列表中候選的字體，如圖12-21所示。圖12-21編輯字體列表對(duì)話框（2）在【字體列表】編輯對(duì)話框中，可用加號(hào)按鈕增加或用減號(hào)按鈕去除一種字體。所選擇的字體必須已經(jīng)安裝在計(jì)算機(jī)系統(tǒng)內(nèi)才能使用，否則系統(tǒng)會(huì)使用默認(rèn)字體顯示（一般為宋體）。 在設(shè)置【頁(yè)面屬性】的【頁(yè)面字體】和設(shè)置【屬性】面板的【字體】時(shí)，都可以編輯字體列表。3．輸入網(wǎng)頁(yè)中的空格 在編輯網(wǎng)頁(yè)中文字時(shí)，常常要在文檔中插入空格。插入空格的操作方法有以下3種。（1）將漢字輸入方式設(shè)置為全角方式，按空格鍵可輸入空格。（2）在【屬性】面板中，選擇【格式】下拉列表中的【預(yù)先格式化的】選項(xiàng)，然后就可在編輯網(wǎng)頁(yè)時(shí)輸入空格。（3）按Shift+Ctrl+Space鍵插入空格。每按一次快捷鍵可插入一個(gè)空格。4．文本換行 在網(wǎng)頁(yè)文字編輯時(shí)，文本的換行有如下幾種方法。（1）自動(dòng)換行：在輸入文字時(shí)，一行長(zhǎng)度超過(guò)了文檔窗口的顯示范圍，則后面輸入的文字將自動(dòng)換到下一行。自動(dòng)換行的好處在于不管瀏覽器的窗口大小，網(wǎng)頁(yè)文字都將按照窗口大小自動(dòng)換行。（2）按Enter鍵換行：輸入文字后按Enter鍵換行，則文字分成段，上下段之間空一行。（3）按Shift+Enter鍵換行：輸入文字后按Shift+Enter鍵換行，則文字分行不成段，上下行之間無(wú)空行。（4）用特殊字符換行：?jiǎn)螕簟静迦搿繖诘摹疚谋尽窟x項(xiàng)，在【文本】選項(xiàng)卡中單擊按鈕，可實(shí)現(xiàn)與按Shift+Enter鍵相同的換行效果。5．文本的屬性設(shè)置 網(wǎng)頁(yè)中的文本有各種表現(xiàn)形式，文本的各種變化形式在Dreamweaver8.0的文本【屬性】面板中就可以很方便地完成其設(shè)置，如圖12-22所示。文本的【屬性】面板是Dreamweaver8.0的默認(rèn)的屬性面板，其中各項(xiàng)參數(shù)的意義如下：（1）在【格式】下拉式列表中，設(shè)置當(dāng)前文本段落的格式。（2）在【樣式】下拉式列表中，顯示當(dāng)前應(yīng)用于所選文本的樣式。如果沒(méi)有對(duì)所選內(nèi)容應(yīng)用過(guò)任何樣式，則下拉式菜單顯示【無(wú)CSS樣式】。如果已對(duì)所選內(nèi)容應(yīng)用了多個(gè)樣式，則下拉式菜單是空的。單擊【CSS】按鈕可以打開(kāi)【CSS】面板。圖12-22文本的屬性面板（3）是文字加粗、斜體、左對(duì)齊、居中、右對(duì)齊等格式化的按鈕。（4）在【鏈接】下拉式列表中，為選定文本設(shè)置的超鏈接地址。是鏈接定位器，用于創(chuàng)建超級(jí)鏈接。是用瀏覽的方式選定被鏈接的文檔。（5）在【字體】下拉列表框中設(shè)置選中文字的字體。在【大小】下拉式列表中，設(shè)置選中文字的大小。在框中可選擇文字的顏色，或在右邊的文本框中直接輸入表示顏色的帶“#”號(hào)的16進(jìn)制數(shù)字。（6）是設(shè)置無(wú)序項(xiàng)目符號(hào)、有序項(xiàng)目符號(hào)、左縮進(jìn)、右縮進(jìn)的格式化按鈕。（7）在【目標(biāo)】下拉式列表中，選擇被鏈接文件的窗口打開(kāi)方式。該下拉菜單中的4種顯示方式如下。_blank：在新的瀏覽器窗口中顯示鏈接的目標(biāo)文檔。_parent：將鏈接文件加載到包含該鏈接的父框架集或窗口中。如果包含鏈接的框架不是嵌套的，則鏈接文件加載到整個(gè)瀏覽器窗口中。_self：在同一框架或本窗口中顯示鏈接的目標(biāo)文檔。_top：將鏈接文件加載到整個(gè)瀏覽器窗口中，并由此刪除所有框架。（8）展開(kāi)或折疊屬性面板的切換按鈕。（9）是HTML標(biāo)記編輯器。是幫助信息按鈕。對(duì)網(wǎng)頁(yè)中文本設(shè)置屬性時(shí)，只需先選定要進(jìn)行屬性設(shè)置的文本，然后在文本的【屬性】面板中選擇相應(yīng)的參數(shù)完成屬性設(shè)置。12.3.5網(wǎng)頁(yè)圖像的編輯1．網(wǎng)頁(yè)圖像格式簡(jiǎn)介 圖像文件有各種各樣的格式，在用Dreamweaver8.0設(shè)計(jì)網(wǎng)頁(yè)時(shí)主要用到三種格式的圖像文件，它們是GIF、JPEG和PNG。（1）GIF（GraphicsInterchangeFormat）是圖像交換格式的簡(jiǎn)稱。它采用圖像無(wú)損壓縮方式，可以較好的解決跨平臺(tái)的兼容性問(wèn)題。它只支持256種顏色的色彩，對(duì)色彩要求不高的地方可采用這種圖像格式。另外，GIF文件還支持動(dòng)畫(huà)格式，它是通過(guò)在一個(gè)動(dòng)畫(huà)文件中包含多幀畫(huà)面來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。GIF文件體積較小，在網(wǎng)頁(yè)上被大量使用。（2）JPEG（JointPhotographicExpertsGroup）是聯(lián)合圖像專家組的簡(jiǎn)稱。主要用于處理分辨率較高色彩豐富的圖像，它可以提供上百萬(wàn)種顏色，由于采用了特殊的壓縮算法，在圖像失真很小的情況下對(duì)圖像進(jìn)行高效的壓縮，從而在網(wǎng)絡(luò)中減少了下載的時(shí)間。（3）PNG（PortableNetworkGraphic）是便攜網(wǎng)絡(luò)圖像的簡(jiǎn)稱。PNG格式是一種替代GIF格式的無(wú)專利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及alpha通道透明的支持，F(xiàn)ireworksMX生成的文件就是PNG格式的文件，它保留所有原始層、矢量、顏色和效果信息（例如陰影），并且在任何時(shí)候所有元素都是完全可編輯的。這種圖像的格式受到W3C組織的大力推薦，在網(wǎng)絡(luò)上已得到廣泛的應(yīng)用。 如果設(shè)計(jì)者在網(wǎng)頁(yè)中插入了圖像，當(dāng)網(wǎng)頁(yè)頁(yè)面被瀏覽時(shí)，系統(tǒng)就會(huì)調(diào)用位于站點(diǎn)中的圖像文件。為了保證圖像調(diào)用是正確的，該圖像文件應(yīng)先復(fù)制到當(dāng)前站點(diǎn)之中，這樣就可以避免圖像瀏覽時(shí)出錯(cuò)。2．插入網(wǎng)頁(yè)圖像的方法 在網(wǎng)頁(yè)中插入圖像的操作方法如下。（1）將鼠標(biāo)指針移到網(wǎng)頁(yè)中圖像的插入位置上。（2）選擇【插入】|【圖像】命令，或單擊【插入】欄中【常用】選項(xiàng)卡的按鈕，在打開(kāi)的【選擇圖像源】對(duì)話框中，選擇圖像文件的路徑和文件名，如圖12-16所示。（3）在對(duì)話框中，單擊【文件系統(tǒng)】單選按鈕，直接在本地硬盤上選擇圖像文件，或者單擊【數(shù)據(jù)源】單選按鈕，從數(shù)據(jù)庫(kù)中選取圖像文件。（4）選中圖像文件后，可以在對(duì)話框的右邊用預(yù)覽方式顯示圖像。（5）在對(duì)話框下面的URL文本框中，會(huì)顯示當(dāng)前選中的圖像文件的URL地址。（6）在【相當(dāng)于】下拉式列表框中，如果選擇【文檔】命令，要插入圖像的網(wǎng)頁(yè)文檔應(yīng)該先保存在本地站點(diǎn)中，此時(shí)圖像文件是以相對(duì)路徑插入網(wǎng)頁(yè)文檔；如果選擇【站點(diǎn)根目錄】命令，則圖像文件是以基于站點(diǎn)根目錄的路徑插入網(wǎng)頁(yè)文檔。（7）按【確認(rèn)】按鈕確認(rèn)，便可在網(wǎng)頁(yè)中插入圖片。如果要插入圖像的網(wǎng)頁(yè)文件是新建的還未保存過(guò)的文件，系統(tǒng)會(huì)提示設(shè)計(jì)者應(yīng)先保存該文件，如圖12-23所示。注意： 在創(chuàng)建完新網(wǎng)頁(yè)時(shí)，應(yīng)先設(shè)置網(wǎng)頁(yè)頁(yè)面屬性，接著馬上就將該網(wǎng)頁(yè)保存在本地站點(diǎn)下。然后再在網(wǎng)頁(yè)上插入圖像文件，此時(shí)圖像文件以相對(duì)路徑插入。一定要注意，圖像文件不要以絕對(duì)路徑插入，否則可能在瀏覽該網(wǎng)頁(yè)時(shí)發(fā)生圖像文件路徑的錯(cuò)誤，導(dǎo)致圖像不能顯示。 如果所選的圖像文件不在本地站點(diǎn)中，Dreamweaver8.0會(huì)顯示如圖12-24所示的提示對(duì)話框。單擊【是】按鈕，則將選中的圖像文件保存在本地站點(diǎn)的文件夾中；如果不想把選中的圖像文件保存在本地站點(diǎn)的文件夾中，則單擊【否】按鈕。圖12-23提示信息對(duì)話框圖12-24提示信息對(duì)話框3．圖像的屬性設(shè)置 在網(wǎng)頁(yè)編輯窗口中選中插入的圖像，在Dreamweaver8.0屬性面板中顯示的信息都是該圖像屬性，如圖12-25所示。圖像的屬性面板中各項(xiàng)參數(shù)的意義如下。（1）在【圖像】文本框中可以設(shè)置該圖像的名稱（2）在【寬】和【高】文本框中設(shè)置的是該圖像的寬度和高度。插入圖像后，Dreamweaver8.0會(huì)自動(dòng)給出圖片原來(lái)的寬度和高度。這時(shí)若調(diào)整圖片的寬度和高度，可以放大或縮小圖片的顯示尺寸。但改變的只是圖像在瀏覽器中顯示的尺寸，圖像文件本身并沒(méi)有任何變化。不要指望用Dreamweaver8.0來(lái)縮小圖像尺寸，來(lái)提高頁(yè)面下載速度。單擊【寬】和【高】文本框右邊的按鈕，可將【寬】和【高】的值重設(shè)為圖像的原始大小。圖12-25在網(wǎng)頁(yè)中插入的圖像及其圖像【屬性】面板（3）在【源文件】文本框中輸入插入圖像的路徑和文件名稱?？蓡螕粑谋究蛴疫叺膱D標(biāo)，以瀏覽的方式得到圖像文件的路徑和名稱。（4）在【鏈接】文本框中設(shè)置圖像超級(jí)鏈接的URL地址，此時(shí)該圖像被設(shè)置為一個(gè)超級(jí)鏈接的源端點(diǎn)。（5）在【替代】文本框可輸入圖像的說(shuō)明文字。當(dāng)瀏覽者瀏覽頁(yè)面時(shí)，在圖像位置上將先顯示【替代】文本框中的文字。這樣在圖像沒(méi)顯示出來(lái)之前，瀏覽者就能知道圖像所要顯示的內(nèi)容。（6）單擊【編輯】區(qū)中的按鈕，可在Dreamweaver8.0中編輯當(dāng)前的圖像。選中要編輯的圖像后，【編輯】區(qū)中6個(gè)按鈕的功能如下。①單擊按鈕，打開(kāi)外部編輯器Fireworks進(jìn)行圖像編輯。設(shè)計(jì)者也可以右擊圖像，在快捷菜單中選擇【編輯方式Fireworks】命令；或按住Ctrl鍵，然后雙擊圖像，也能打開(kāi)Fireworks進(jìn)行圖像編輯。②單擊按鈕，打開(kāi)【優(yōu)化】對(duì)話框，對(duì)當(dāng)前圖像完成優(yōu)化處理。③單擊按鈕，可調(diào)整裁剪控制點(diǎn)直到當(dāng)前圖像的區(qū)域符合所需大小，在裁剪邊界框內(nèi)部雙擊或按Enter鍵裁剪所選區(qū)域，從當(dāng)前圖像中刪除不需要的區(qū)域。

④單擊按鈕，可對(duì)已調(diào)整大小的圖像進(jìn)行重新取樣，提高圖像在新的大小和形狀下的品質(zhì)。

⑤單擊按鈕，可調(diào)整圖像的亮度和對(duì)比度設(shè)置。

⑥單擊按鈕，可調(diào)整圖像的清晰度。

（7）在【地圖】中可標(biāo)注和創(chuàng)建客戶端圖像地圖。選擇創(chuàng)建熱點(diǎn)的工具，可建立圖像的多個(gè)超鏈接的熱點(diǎn)，具體操作方法在下一章中介紹。（8）在【垂直邊距和水平邊距】?jī)蓚€(gè)文本框中設(shè)置圖片四周空出的尺寸。（9）在【目標(biāo)】下拉列表中指定圖像超鏈接的目標(biāo)文件的顯示方式。如果圖像無(wú)鏈接，此項(xiàng)設(shè)置無(wú)效。（10）在【低品質(zhì)源】文本框中指定另一個(gè)圖像，這個(gè)圖像一般是原圖的低品質(zhì)替換圖形。在原圖沒(méi)有顯示出來(lái)之前先顯示這幅圖，讓瀏覽者能大體了解圖形的內(nèi)容。（11）