靜態(tài)網(wǎng)頁設計制作 教案 第4章 文本與圖像

靜態(tài)網(wǎng)頁設計制作STYLEREFbt1a項目四STYLEREFbt1b文本與圖像項目四文本與圖像思政目標體會傳統(tǒng)文化設計作品的構圖精髓，善于發(fā)現(xiàn)和融合特色元素。充分發(fā)揮創(chuàng)造力，主動拓寬自己的視野，避免思維局限性技能目標學會在網(wǎng)頁中插入文本并設置文本屬性學會在網(wǎng)頁中插入日期學會創(chuàng)建各種鏈接并管理鏈接學會使用熱點制作圖像映射項目導讀所謂圖文并茂，相得益彰，文字和圖像具有一種相互補充的視覺關系。頁面上文字太多，就顯得沉悶，缺乏生氣；頁面上圖像太多，缺少文字，勢必會減少頁面的信息容量。因此，最理想的效果是文字與圖像的密切配合，互為襯托，既能活躍頁面，又使頁面有豐富的內容。本章將介紹網(wǎng)頁中文本與圖像的相關操作。合理地在網(wǎng)頁中運用這些操作，可以更生動直觀、形象地表現(xiàn)設計主題，增強頁面的視覺效果。任務1在網(wǎng)頁中插入文本任務引入在設計網(wǎng)頁的過程中，小明發(fā)現(xiàn)有許多需要輸入文本的地方，而且這些文本的樣式各不相同，有的還需要進行編號，輸入日期，那么在網(wǎng)頁中要如何插入文本，如何設置文本屬性和創(chuàng)建列表項，如何插入日期呢？知識準備網(wǎng)頁作為一種傳播信息的媒體，文字是傳遞信息的最重要的媒介。從網(wǎng)頁最初的純文字界面發(fā)展至今，文字仍是其他任何元素無法取代的網(wǎng)頁元素。這首先是因為文字信息符合人類的閱讀習慣，其次是文字所占存儲空間小，節(jié)省了下載和瀏覽時間。在制作網(wǎng)頁的時候，文本的創(chuàng)建與編輯占據(jù)了制作工作的很大部分時間。能否對各種文本控制手段運用自如，是決定網(wǎng)頁設計是否美觀、富有創(chuàng)意，以及提高工作效率的關鍵。一、插入文本在Dreamweaver2021中輸入文本有以下幾種方法：（1）直接在Dreamweaver的文檔窗口光標所在位置輸入文本內容。（2）在其他的應用程序或文檔中復制文本，然后切換回Dreamweaver文檔窗口，將光標插入到要放置文本的地方，執(zhí)行“編輯”/“粘貼”或“選擇性粘貼”命令。利用Dreamweaver2021的粘貼選項，可以保留所有源格式設置，也可以只粘貼文本，還可以指定粘貼文本的方式。（3）執(zhí)行“文件”/“導入”命令導入其他文檔中的文本，如XML和表格式數(shù)據(jù)。（4）從支持文本拖放功能的應用程序中拖放文本到Dreamweaver2021的文檔窗口。此外，Dreamweaver2021集成了Extract面板，允許用戶上傳和查看CreativeCloud中的PSD文件。使用此面板，用戶還可以將PSD復合中的CSS、文本、圖像、字體、顏色、漸變和度量值提取到文檔中。案例——直接輸入文本首先打開一個需要添加文本的網(wǎng)頁，然后在網(wǎng)頁中直接輸入文本。（1）打開文件。執(zhí)行“文件”｜“打開”命令，在彈出的“打開”對話框中選擇一個制作好的頁面，如圖4-1所示。（2）輸入文本。刪除div標簽中的占位文本，然后單擊，布局塊中隨即出現(xiàn)閃動的光標，表示輸入文字的起始位置。選擇合適的輸入法，即可在網(wǎng)頁中輸入文字了，如圖4-2所示。（3）保存文件。執(zhí)行“文件”｜“保存”命令保存文件。在瀏覽器中的頁面效果如圖4-3所示。圖4-1打開頁面圖4-2輸入文本圖4-3頁面效果二、設置文本屬性網(wǎng)頁中的文字主要包括標題、信息、文本鏈接等幾種主要形式。良好的文本格式，能夠充分體現(xiàn)文檔要表述的意圖，激發(fā)讀者的閱讀興趣。在文檔中構建豐富的字體、多種的段落格式以及賞心悅目的文本效果，對于一個專業(yè)的網(wǎng)站來說，是必不可少的要求之一。文本的大部分格式設置都可以通過屬性設置面板實現(xiàn)。執(zhí)行“窗口”/“屬性”命令，即可打開屬性設置面板，如圖4-4所示。圖4-4文本屬性設置面板打開屬性面板之后，切換到HTML屬性面板，即可設置HTML格式，如圖4-1所示。該面板中各個選項的功能簡要介紹如下：格式：設置所選文本的段落樣式?！盁o”是系統(tǒng)的默認設置，從光標所在行的左邊開始輸入文本，沒有對應的HTML標識；“段落”表示將文本內容設置為一個段落；“標題1”到“標題6”用于設置不同級別的標題；“預先格式化的”用于預定義一個段落，使用該格式，可以在文本中插入多個空格，從而可以任意調整文本內容的位置。ID：為所選內容分配一個ID。如果已聲明過ID，則該下拉列表中將列出文檔中所有未使用的已聲明ID。類：顯示應用于當前所選文本的類樣式。如果沒有對所選內容應用任何樣式，則彈出菜單顯示“無”。如果對所選內容應用了多個樣式，則彈出菜單顯示為空白。使用“類”彈出菜單可執(zhí)行以下操作：（1）選擇“無”，刪除當前所選樣式。（2）選擇要應用于所選內容的樣式。（3）選擇“重命名”，可以重命名當前選定文本采用的樣式。（4）選擇“附加樣式表”，彈出“使用現(xiàn)有的CSS文件”對話框。鏈接：創(chuàng)建所選文本的超文本鏈接。有以下幾種方式：（1）單擊“瀏覽文件”按鈕瀏覽站點中的文件。（2）直接鍵入文件URL。（3）將“指向文件”按鈕拖到“文件”面板中要鏈接的文件。（4）將文件從“文件”面板拖到“鏈接”文本框中。：將文本字體設置為粗體。：將文本字體設置為斜體。：項目列表。選擇需要建立列表的文本，并單擊該按鈕，即可建立無序列表。：編號列表，用于建立有序列表。：刪除內縮區(qū)塊，減少文本右縮進。：內縮區(qū)塊，增加文本右縮進。標題：為超級鏈接指定文本工具提示。在瀏覽器中，將鼠標指針移到超級鏈接上時，顯示指定的提示文本。目標：指定鏈接文件打開的方式。（1）_blank：將鏈接文件加載到一個新的、未命名的瀏覽器窗口。（2）new：將鏈接文件始終顯示在同一個新的瀏覽器窗口。（3）_parent：將鏈接文件加載到該鏈接所在框架的父框架集或父窗口中。如果包含鏈接的框架不是嵌套的，則鏈接文件加載到整個瀏覽器窗口中。（4）_self：將鏈接文件加載到該鏈接所在的同一框架或窗口中。此目標是默認的，因此通常不需要指定它。（5）_top：將鏈接文件加載到整個瀏覽器窗口，從而刪除所有框架。：單擊此按鈕彈出“頁面屬性”對話框，對頁面屬性進行設置。：將光標放置在任意列表位置，則該按鈕變?yōu)榭捎茫瑔螕粼摪粹o，即可打開列表屬性設置窗口，進行相應的設置。單擊屬性面板左上角的按鈕，即可使用CSS規(guī)則格式化文本，如圖4-5所示。圖4-5CSS規(guī)則屬性目標規(guī)則：顯示當前選中文本應用的規(guī)則，或在CSS屬性面板中正在編輯的規(guī)則。使用“目標規(guī)則”下拉菜單中的命令，可以創(chuàng)建新的內聯(lián)樣式，或將現(xiàn)有類應用于所選文本。使用“目標規(guī)則”可以執(zhí)行以下操作：（1）將插入點放在已應用CSS規(guī)則的文本塊中，可以查看文本塊應用的CSS規(guī)則。（2）在“目標規(guī)則”下拉列表中選擇一個規(guī)則，即可應用于當前選中的文本。（3）通過CSS屬性面板中的選項對已創(chuàng)建的規(guī)則進行更改。編輯規(guī)則：單擊該按鈕可以打開“CSS設計器”面板。CSS和設計器：單擊該按鈕可以打開“CSS設計器”面板，并在當前視圖中顯示目標規(guī)則的屬性。字體：設置目標規(guī)則的字體。如果字體列表中沒有需要的字體，可以單擊字體下拉列表中的“管理字體”命令，在彈出的“管理字體”對話框中的“自定義字體堆?！边x項卡中設置需要的字體列表，如圖4-6所示。圖4-6“管理字體”對話框字體堆棧是CSSfont-family聲明中的字體列表。單擊按鈕添加字體堆棧，然后在“可用字體”列表中選中需要的字體后，單擊按鈕，即可將字體添加到字體列表中。使用排序按鈕和可以排列字體在字體堆棧中的排序。Dreamweaver2021支持EOT、WOFF、TTF和SVG類型的Web字體。在“管理字體”對話框中，可以在字體列表添加AdobeEdge和Web字體。在頁面中使用AdobeEdge字體時，將添加額外的腳本標簽以引用JavaScript文件。顯示頁面時，此文件將字體直接從CreativeCloud服務器下載到瀏覽器的緩存，即使用戶計算機上有該字體也會下載。大小：設置目標規(guī)則的字體大小。Dreamweaver2021預置了18種字號。：設置目標規(guī)則中的字體顏色。三、創(chuàng)建列表項在編輯網(wǎng)頁時，常常需要對同級或不同級的多個項目進行編號或排列，以顯示多個項目之間的層次關系，或使文本布局更有條理，這就需要用到列表。在Dreamweaver中，可以創(chuàng)建項目列表和編號列表，列表還可以被嵌套。項目列表（也稱為無序列表），用不同的符號及縮進的多少區(qū)分不同的層次；編號列表（也稱為有序列表），通過數(shù)字及縮進區(qū)分不同的層次。案例——文檔中創(chuàng)建列表下面通過一個實例來說明如何在文檔中創(chuàng)建列表。（1）新建一個文檔。在文檔窗口中輸入需要列表的文本，如圖4-7（a）所示。（2）用鼠標選擇除“李白文集”以外的其他項內容，單擊屬性設置面板中的“無序列表”按鈕，則所有項目的左側都會顯示一個“●”符號。所有項目都被當作無序列表的第一層，如圖4-7（b）所示。（3）選擇“山中問答”和“軍行”兩項，單擊屬性設置面板中的“縮進”按鈕，這兩項左側的“●”符號變成了“○”符號，表示它們在列表的第二層。同樣的方法，設置其他項，最終效果如圖4-7（c）所示。設置編號列表的方法與設置項目列表的方法相似。繼續(xù)使用上例。（1）用鼠標選擇除“李白文集”以外的其他內容，單擊屬性設置面板中的“編號列表”按鈕，則所有項目左側都會顯示數(shù)字，作為有序列表的第一層，如圖4-8（a）所示。（2）選擇“山中問答”和“軍行”兩項，單擊屬性設置面板中的“縮進”按鈕，這兩項左側會按順序顯示數(shù)字，表示它們是列表的第二層。同樣的方法，設置其他項，結果如圖4-8（b）所示。（a）（b）（c）（a）（b）圖4-7設置項目列表圖4-8設置編號列表此外，還可以將編號列表和項目列表混排。例如，在設置好編號列表后，如果選擇列表的第二層，如“山中問答”和“軍行”兩項，單擊屬性設置面板中的“無序列表”按鈕，則這兩項左邊的數(shù)字編號會變?yōu)轫椖烤幪?，用同樣的方法將下面兩首詩的第二層變?yōu)轫椖烤幪枺鐖D4-9所示。圖4-9編號列表、項目列表混排四、插入日期在網(wǎng)頁中，經(jīng)常會看到顯示有日期，且日期自動更新。Dreamweaver2021提供了插入日期的功能，可以用多種格式在文檔中插入當前時間，同時日期自動更新。插入日期的步驟如下：（1）將插入點放在文檔中需要插入日期的位置。（2）切換到“插入”面板中的“HTML”面板。（3）單擊“日期”按鈕，此時出現(xiàn)“插入日期”對話框，如圖4-10所示。在對話框中可以選擇星期、日期、時間的顯示方式。如果讀者希望插入的日期在每次保存文檔時自動進行更新，可以選中對話框中的“儲存時自動更新”復選框。圖4-10“插入日期”對話框（4）單擊“確定”按鈕，即可在文檔中插入當前的日期。案例——插入日期下面通過一個簡單的例子演示在文檔中插入日期的操作方法。（1）將插入點放在文檔中需要插入日期的位置，即“松鶴延年”下面，如圖4-11所示。（2）打開“HTML”插入面板，單擊面板中的“日期”按鈕，彈出“插入日期”對話框，如圖4-12所示。（3）在對話框中選擇星期、日期、時間的顯示方式。本例僅設置日期，且日期格式為“1974年3月7日”。（4）選中對話框中的“儲存時自動更新”復選框。（5）單擊“確定”按鈕，此時就在文檔中插入了當前的日期，如圖4-13所示。圖4-11插入日期前的效果圖4-12“插入日期”對話框圖4-13最終效果任務2在網(wǎng)頁中插入圖像任務引入除了在網(wǎng)頁中插入文本之外，小明發(fā)現(xiàn)圖像也是很常見的元素，而且有些圖像還具有翻轉效果，那么要如何在網(wǎng)頁中插入圖像，如何修改圖像屬性和尺寸，如何創(chuàng)建翻轉圖像，如何設置頁面的背景圖像呢？知識準備圖像在網(wǎng)頁中的作用是無可替代的。圖像不僅可以修飾網(wǎng)頁，使網(wǎng)頁美觀、圖文并茂，而且一幅合適的圖片，常常有勝過洋洋灑灑數(shù)篇文字的效果。一、關于圖像雖然存在很多種圖形文件格式，但網(wǎng)頁中通常只使用3種，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。由于PNG文件具有較大的靈活性，并且文件較小，所以它幾乎對任何類型的Web圖形都是最適合的。但是某些較低版本的瀏覽器只能部分支持PNG圖像的顯示。常用的圖形文件格式介紹如下：GIF（圖形交換格式）：文件最多使用256種顏色，最適合顯示色調不連續(xù)或具有大面積單一顏色的圖像，例如導航條、按鈕、圖標、徽標或其他具有統(tǒng)一色彩和色調的圖像。JPEG（聯(lián)合圖像專家組標準）：這種格式的文件可以包含數(shù)百萬種顏色，是用于攝影或連續(xù)色調圖像的高級格式。隨著JPEG文件品質的提高，文件的大小和下載時間也會隨之增加。通常可以通過壓縮JPEG文件，在圖像品質和文件大小之間達到良好平衡。PNG（可移植網(wǎng)絡圖形）：這是一種替代GIF格式的無專利權限制的格式，它包括對索引色、灰度、真彩色圖像以及alpha通道透明的支持。PNG文件可保留所有原始層、矢量、顏色和效果信息（例如陰影），并且在任何時候所有元素都是完全可編輯的。在Dreamweaver文檔中，可以插入GIF、JPG和PNG圖像。這些圖像不僅可以直接放在頁面上，也可以放在表格、表單中。在插入圖像時，還能直接對圖像做一些修改，例如在屬性面板中為圖像添加超鏈接、改變圖像的尺寸、對圖像進行優(yōu)化；還可以通過Dreamweaver的行為創(chuàng)建翻轉圖像、導航條或圖像地圖等交互式圖片。使用Dreamweaver的“首選項”對話框還可以指定首選圖像編輯器，提高整個工作流程的效率。設置首選圖像編輯器可以讓用戶在使用Dreamweaver的同時啟用指定的編輯器編輯圖像。如果將Fireworks設置為首選圖像編輯器，則利用Fireworks修改完圖像后，只需要簡單地單擊鼠標，就可以自動更新Dreamweaver中的圖像文件。二、插入圖像圖像通常用于制作圖形界面（例如導航按鈕）、具有視覺感染力的內容（例如照片）或交互式設計元素（例如鼠標經(jīng)過圖像或圖像地圖）。在Dreamweaver文件中插入圖像時，Dreamweaver會自動在網(wǎng)頁的HTML源代碼中生成對該圖像文件的引用。為了確保此引用的正確性，該圖像文件必須保存在當前站點目錄中。如果所用的圖像不在當前站點目錄中，Dreamweaver將詢問是否將其復制到當前站點目錄下。在Dreamweaver2021中插入圖像，可以執(zhí)行“插入”｜“圖像”菜單命令，也可以單擊“插入”｜“HTML”面板上的“圖像”按鈕。案例——插入圖像下面通過插入圖像和文字的示例，讓讀者了解插入圖像的具體步驟。插入圖像和文字后的效果如圖4-14所示。（1）新建一個文檔，單擊文檔工具欄上的“設計”按鈕，切換到“設計”視圖。（2）單擊屬性面板中的“居中對齊”按鈕，然后在“設計”視圖空白處單擊，光標將在中間位置顯示。（3）執(zhí)行“插入”｜“Image”命令，或單擊“插入”面板中“HTML”子面板上的“圖像”按鈕，彈出“選擇圖像源文件”對話框。（4）在“選擇圖像源文件”對話框中選擇要插入的圖像，如圖4-15所示。然后單擊“確定”。該圖像出現(xiàn)在文檔中。圖4-14插入圖像與文本的效果圖4-15“選擇圖像源文件”對話框（5）輸入詩文《黃鶴樓》。（6）保存文件，并用瀏覽器打開文件，得到如圖4-14所示的效果。三、圖像的屬性將圖像插入文檔后，Dreamweaver2021會自動按照圖像的原始大小顯示，這可能與需要的尺寸不一致，通常還要對圖像的一些屬性進行調整，如大小、位置等。這就要通過圖像的屬性面板實現(xiàn)。選中一個圖像，對應的屬性面板如圖4-16所示。圖4-16圖像的屬性設置面板該圖像屬性設置面板的各個參數(shù)介紹如下：“ID”：可以使用腳本語言（如JavaScript、VBScript）引用的唯一名稱?！皩挕保河糜谠O置圖像的寬度。“高”：用于設置圖像的高度。調整圖片大小后，“寬”和“高”右側會出現(xiàn)兩個按鈕。單擊“重置為原始大小”按鈕，可以取消修改圖片尺寸。單擊“提交圖像大小”按鈕，則修改圖片尺寸。“圖像源文件（Src）”：用于設置圖像文件的路徑?！版溄印保河糜谠O置圖像鏈接的網(wǎng)頁文件的地址?！疤鎿Q”：用于設置圖像的說明性內容，當網(wǎng)頁中的圖片不顯示時，將顯示這里指定的文本?！邦悺保河糜谠O置應用到圖像的CSS樣式的名稱?！暗貓D”及下面的4個按鈕：用于制作映射圖的熱點工具，詳細內容會在本章的5.1.7節(jié)中介紹。“目標”：用于設置圖像打開的鏈接文件顯示的位置。_blank表示打開一個新的窗口顯示鏈接文件；new表示始終在同一個新窗口中顯示鏈接文件；_parent表示使用包含超級鏈接的父窗口顯示鏈接的文件；_self表示使用超級鏈接所在的窗口或框架顯示鏈接文件，該項是默認值；_top表示將鏈接的文件顯示在整個瀏覽器窗口中，而不是所有框架?！霸肌保河糜谠O置當前圖像原始的PNG或PSD圖像文件。：打開在“外部編輯器”首選參數(shù)中指定的圖像處理軟件，編輯當前選中的圖像。：用于打開“圖像優(yōu)化”預覽對話框，并優(yōu)化圖像。：從原始更新。如果對原始圖像文件進行了修改，當前頁面上的Web圖像與原始圖像不同步，單擊該按鈕，圖像將自動更新，以反映對原始圖像所做的任何更改。：用于修剪圖片，刪去圖片中不需要的部分。：重新取樣，調整圖片大小后此按鈕可用。增加或減少像素以提高調整大小后的圖片質量。四、修改圖像尺寸修改圖像的尺寸，是指調整圖像在文檔中顯示的寬度和高度。在Dreamweaver的“設計”視圖中可以可視化的形式調整圖片的大小，圖片的文件大小不發(fā)生變化。在Dreamweaver中，圖像的寬度和高度默認單位為像素（Pixel）?？梢酝ㄟ^圖像屬性面板設置圖像的寬度和高度，也可以直接拖動鼠標改變圖像的大小。調整圖像大小時，屬性面板上的“寬”和“高”區(qū)域顯示該元素當前的寬度和高度。用鼠標拖動調整圖像的大小，執(zhí)行以下步驟：（1）在“文檔”窗口中選擇一個圖像。圖像的底部、右側及右下角出現(xiàn)調整大小的手柄。如果未出現(xiàn)調整大小手柄，則單擊要調整大小的圖像以外的部分，然后重新選擇，或在標簽選擇器中單擊相應的標簽選擇該圖像。（2）執(zhí)行下列操作調整圖像的大小：若要調整圖像的寬度，拖動左側或右側的選擇控制點。若要調整圖像的高度，拖動底部或頂部的選擇控制點。若要同時調整圖像的寬度和高度，拖動四個頂角的選擇控制點。若要在調整圖像尺寸時保持元素的比例（寬高比），在按住Shift鍵的同時拖動頂角的選擇控制點。以可視化方式最小可以將元素大小調整到8×8像素。若要將元素的寬度和高度調整到更小的尺寸（例如1×1像素），在屬性面板對應的域中輸入數(shù)值。默認情況下，寬度和高度約束比例縮放。單擊“切換尺寸約束”按鈕，該按鈕圖標變?yōu)?，即可取消約束比例，單獨縮放圖片的寬度和高度。若要將已調整大小的元素返回到原始尺寸，在屬性面板中刪除“寬”和“高”中的值，或者直接單擊“重置為原始大小”按鈕。五、創(chuàng)建翻轉圖像翻轉圖像就是當鼠標指針經(jīng)過圖片時，圖片會變成另外一張。一個翻轉圖像其實是由兩張圖片組成的：初始圖像（頁面加載時顯示的圖像）和翻轉圖像（鼠標經(jīng)過初始圖像時顯示的圖像）。組成翻轉圖像的兩幅圖像必須具有相同的尺寸。如果尺寸不同，Dreamweaver2021會自動將第二幅圖像的尺寸調整成與第一幅相同大小。案例——創(chuàng)建翻轉圖像下面通過創(chuàng)建一個翻轉圖像的示例，介紹創(chuàng)建翻轉圖像的具體操作，最終的效果如圖4-17和圖4-18所示。圖4-17翻轉圖像效果（翻轉前）圖4-18翻轉圖像效果（翻轉后）（1）在文檔窗口中，將光標置于要插入翻轉圖像的位置。（2）執(zhí)行“插入”｜“HTML”｜“鼠標經(jīng)過圖像”命令，或單擊“插入”|“HTML”面板上的“鼠標經(jīng)過圖像”按鈕，如圖4-19所示，此時會彈出“插入鼠標經(jīng)過圖像”對話框，如圖4-20所示。圖4-19插入圖像菜單圖4-20“插入鼠標經(jīng)過圖像”對話框（3）在“圖像名稱”欄中輸入翻轉圖像的名稱。（4）在“原始圖像”欄中輸入初始圖像的路徑，或者單擊“瀏覽”按鈕，從彈出的對話框中瀏覽選擇所需圖像文件。（5）在“鼠標經(jīng)過圖像”欄中輸入翻轉圖像的路徑，或者單擊“瀏覽”按鈕，從彈出的對話框中瀏覽選擇圖像文件。（6）選中“預載鼠標經(jīng)過圖像”復選框，可以將圖像預先加載到瀏覽器的緩存中，加快圖像顯示速度。（7）在“替換文本”文本框中輸入圖像的簡短描述。當網(wǎng)頁中的圖像不顯示時，顯示指定的替換文本。（8）單擊“確定”按鈕保存文件，完成翻轉圖像的創(chuàng)建。按F12鍵在瀏覽器中預覽翻轉圖效果。六、設置背景圖像若要定義頁面的背景色和背景圖像，可以使用“頁面屬性”對話框。如果同時使用背景圖像和背景顏色，下載圖像時會先出現(xiàn)顏色，然后圖像覆蓋顏色。如果背景圖像包含透明像素，則背景顏色透過背景圖像顯示出來。案例——設置背景圖像下面通過一個簡單實例演示背景圖像的創(chuàng)建過程，最終的效果如圖4-21所示。具體制作步驟如下：（1）新建一個空白的HTML文件，執(zhí)行“文件”｜“頁面屬性”命令，或在“設計”視圖中單擊鼠標右鍵，在彈出的上下文菜單中執(zhí)行“頁面屬性”命令，彈出“頁面屬性”對話框，如圖4-22所示。圖4-21背景圖像效果圖4-22“頁面屬性”對話框（2）設置背景圖像。單擊“瀏覽”按鈕，然后瀏覽并選擇圖像；或者直接在“背景圖像”文本框中輸入背景圖像的路徑。（3）保存文件完成背景圖像制作，在瀏覽器中觀察創(chuàng)建的結果。如果背景圖像的尺寸不足以填滿整個窗口，Dreamweaver會自動平鋪背景圖像，如圖4-8所示。若要防止背景圖像平鋪，可以在“頁面屬性”對話框的“重復”下拉列表中選擇“不重復”，或使用CSS樣式表禁用圖像平鋪。案例——禁用圖像平鋪下面