計(jì)算機(jī)網(wǎng)頁設(shè)計(jì)與制作第5章

第5章DreamweaverDreamweaver是目前最常用的一種所見即所得的網(wǎng)頁制作與站點(diǎn)管理工具，它能將網(wǎng)頁界面自動(dòng)翻譯成對應(yīng)的HTML標(biāo)記語言，它是針對專業(yè)網(wǎng)頁設(shè)計(jì)師的可視化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)、跨越瀏覽器的充滿動(dòng)感的網(wǎng)頁。Dreamweaver支持最新的DHML和CSS標(biāo)準(zhǔn)，采用多種先進(jìn)技術(shù)，能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)態(tài)效果的網(wǎng)頁。不但可以輕松地制作出美觀的網(wǎng)頁，而且可以生成精練、高效的HTML源代碼，這也是多數(shù)專業(yè)網(wǎng)頁制作者的希望和要求。它與Fireworks、Flash合稱為DreamTeam(夢之隊(duì))，被譽(yù)為網(wǎng)站設(shè)計(jì)三劍客，在網(wǎng)頁制作、網(wǎng)頁圖形處理和矢量動(dòng)畫三個(gè)網(wǎng)絡(luò)創(chuàng)作的主要領(lǐng)域占據(jù)了一定的優(yōu)勢地位。本章主要介紹Dreamweaver的使用和相關(guān)操作，通過學(xué)習(xí)使大家輕松地創(chuàng)建網(wǎng)站、設(shè)計(jì)網(wǎng)頁。5.1Dreamweaver簡介5.1.1Dreamweaver的特點(diǎn)1.網(wǎng)頁編輯器的發(fā)展隨著互聯(lián)網(wǎng)(Internet)的日益普及，HTML技術(shù)的不斷發(fā)展和完善，出現(xiàn)了眾多網(wǎng)頁編輯器。在互聯(lián)網(wǎng)發(fā)展的初期，設(shè)計(jì)網(wǎng)頁需要專業(yè)人員使用HTML語言編寫，隨著Windows操作系統(tǒng)的廣泛應(yīng)用，出現(xiàn)了很多所見即所得的網(wǎng)頁編輯器，也稱為可視化網(wǎng)頁編輯器。這些網(wǎng)頁編輯器具有形象直觀、使用方便、容易上手等特點(diǎn)，很快普及開來，但它也存在如下弱點(diǎn)：（１）難以精確達(dá)到與瀏覽器完全一致的顯示效果。也就是說在所見即所得網(wǎng)頁編輯器中制作的網(wǎng)頁放到瀏覽器中是很難完全達(dá)到用戶真正想要的效果，這一點(diǎn)在結(jié)構(gòu)復(fù)雜一些的網(wǎng)頁（如分幀結(jié)構(gòu)、動(dòng)態(tài)網(wǎng)頁結(jié)構(gòu)）中便可暴露出來。（２）頁面原始代碼的難以控制。比如在所見即所得編輯器中制作一張表格只要幾分鐘，但調(diào)整它使之完全符合要求可能需要幾十分鐘，甚至更多的時(shí)間。而相比之下，用HTML編輯器，就不存在這個(gè)問題，因?yàn)樗械腍TML代碼都在用戶的監(jiān)控下產(chǎn)生，但是由于需要輸入和調(diào)試大量代碼，決定了它的工作效率極低。如何實(shí)現(xiàn)兩者的完美結(jié)合，產(chǎn)生既干凈、準(zhǔn)確的HTML代碼，又具備所見即所得的高效率、直觀性，一直是網(wǎng)頁設(shè)計(jì)者的愿望，如今Dreamweaver實(shí)現(xiàn)了這個(gè)夢想。2.Dreamweaver特點(diǎn)（1）最佳的制作效率（2）網(wǎng)站管理（3）無可比擬的控制能力（4）所見即所得（5）夢幻模板和XML（6）全方位的呈現(xiàn)

5.1.2Dreamweaver界面組成1.DreamweaverMX界面Dreamweaver安裝過程和其他常規(guī)軟件一樣，安裝完成后，在桌面上建有快捷圖標(biāo)，在開始菜單中也有相應(yīng)的菜單選項(xiàng)，雙擊桌面上的快捷方式或在開始菜單中選擇“程序→MacromediaDreamweaver

ＭＸ→DreamweaverMX”即可打開程序，首次運(yùn)行時(shí)，會(huì)出現(xiàn)工作區(qū)設(shè)置對話框，如圖5.1所示。

圖5.1工作區(qū)設(shè)置對話框

DreamweaverMX2004提供了將全部元素置于一個(gè)窗口中的集成工作區(qū)。在集成工作區(qū)中，全部窗口和面板集成在一個(gè)應(yīng)用程序窗口中。可以從中選擇一種工作區(qū)布局。如果您以后想更改工作區(qū)，可以使用編輯菜單“參數(shù)選擇”對話框切換到一種不同的工作區(qū)。工作區(qū)選定以后，單擊“確定按鈕”，出現(xiàn)Dreamweaver主界面，如圖5.2所示。第一次啟動(dòng)后，會(huì)出現(xiàn)一個(gè)由主窗口和若干浮動(dòng)面板所組成的工作界面，空白的主窗口就是網(wǎng)頁文檔窗口，浮動(dòng)面板是編輯網(wǎng)頁過程中要用到的工具。為了避免影響工作，經(jīng)常會(huì)關(guān)閉一些，只留下使用頻率最高的對象面板和屬性面板，組成Dreamweaver通常的工作界面。

圖5.2Dreamweaver

MX主界面

主界面的組成如下。（1）標(biāo)題欄。顯示正在設(shè)計(jì)的網(wǎng)頁的標(biāo)題名稱。（2）菜單欄。顯示DreamweaverMX的所有菜單命令。（3）插入菜單欄。顯示在文檔中插入的對象按鈕。包括１２大類選項(xiàng)卡，如果當(dāng)前文檔中包含服務(wù)器代碼（如ASP），還會(huì)出現(xiàn)附加的選項(xiàng)卡（4）插入對象工具欄。用于插入像表格、層以及圖片之類的常用對象，各個(gè)按鈕的功能如下。（5）文檔視圖欄。用于切換不同的顯示方式，包括代碼視圖、設(shè)計(jì)與代碼混合視圖、設(shè)計(jì)視圖、活動(dòng)數(shù)據(jù)視圖等。（6）常用工具欄。Windows標(biāo)準(zhǔn)工具欄。（7）文檔窗口。顯示設(shè)計(jì)的網(wǎng)頁或代碼，是網(wǎng)頁設(shè)計(jì)的工作窗口。在窗口的下面右側(cè)顯示窗口的大小和文檔的大小，以及下載該頁面大約需要的時(shí)間。（8）屬性窗口。顯示被選定的對象的屬性。如圖5.3所示為文本屬性對話框。圖5.3文本屬性

（9）浮動(dòng)面板。是分組在某個(gè)標(biāo)題下面的相關(guān)面板的集合。若要展開一個(gè)面板組，請單擊組名稱左側(cè)的展開箭頭；若要取消?？恳粋€(gè)面板組，請拖動(dòng)該組標(biāo)題條左邊緣的手柄。顯示網(wǎng)頁編輯過程中用到的一些參考信息、導(dǎo)航指示。可以根據(jù)需要顯示或者隱藏。如圖5.4所示為文件浮動(dòng)面板。使用戶可以管理文件和文件夾，無論它們是

Dreamweaver

站點(diǎn)的一部分還是在遠(yuǎn)程服務(wù)器上。“文件”面板還使用戶訪問本地磁盤上的全部文件，類似于

Windows資源管理器。

圖5.4文件浮動(dòng)面板

２．常用選項(xiàng)卡插入菜單欄中的常用選項(xiàng)卡，是我們在網(wǎng)頁設(shè)計(jì)中使用最多的，各個(gè)按鈕的功能如下。超級鏈接。在當(dāng)前的光標(biāo)處或當(dāng)前選定的內(nèi)容后面插入一個(gè)超級鏈接。電子郵件鏈接。在當(dāng)前的光標(biāo)處或當(dāng)前選定的內(nèi)容后面插入電子郵件鏈接。命名錨記。在插入點(diǎn)處設(shè)置一個(gè)命名標(biāo)記（aname=），彈出一個(gè)對話框，可以為該標(biāo)記輸入一個(gè)名稱。表格。在當(dāng)前光標(biāo)處插入一個(gè)表格。層。在文檔中生成新的層，帶有DIV標(biāo)簽。通過拖動(dòng)層的邊框確定層的位置，通過拖動(dòng)邊框上的黑點(diǎn)改變層的大小。圖像。在插入點(diǎn)處插入圖片。圖像占位符。在當(dāng)前光標(biāo)處插入一個(gè)占位符。將出現(xiàn)一個(gè)對話框，為占位符指定名稱和尺寸。FireworksHTML。在光標(biāo)處放置一個(gè)由Fireworks生成的HTML文檔。Flash。在光標(biāo)處放置一個(gè)由Flash生成的SWF文檔。鼠標(biāo)經(jīng)過圖像。用于指定兩個(gè)定義鼠標(biāo)經(jīng)過圖像的圖像文件。即鼠標(biāo)移過時(shí)發(fā)生改變的圖形。

導(dǎo)航條。插入一組在站點(diǎn)中導(dǎo)航的圖像。水平線。在光標(biāo)處插入一條水平線。日期。在光標(biāo)處插入日期。彈出一個(gè)對話框，指定日期格式，并指明是否自動(dòng)更新日期。數(shù)據(jù)表格。在光標(biāo)處創(chuàng)建一個(gè)表格。注釋。在HTML中的插入點(diǎn)處放置一條注釋。如果處于“設(shè)計(jì)”視圖中，則會(huì)出現(xiàn)一個(gè)對話框，輸入注釋文本。標(biāo)簽選擇器。從分類標(biāo)簽的層次結(jié)構(gòu)樹中選擇一個(gè)要插入的標(biāo)簽

3.視圖方式網(wǎng)頁文檔窗口有四種視圖方式，可以從不同側(cè)面顯示網(wǎng)頁。（1）設(shè)計(jì)視圖默認(rèn)方式就是設(shè)計(jì)視圖，在該模式下可以設(shè)計(jì)可視化網(wǎng)頁。（2）代碼視圖單擊視圖工具欄上的代碼視圖按鈕，網(wǎng)頁文檔窗口切換為源代碼視圖，如圖5.5所示。實(shí)際上空白網(wǎng)頁也并不是空的，可以在源代碼視圖中看到一些HTML代碼。

圖5.5代碼視圖

（3）代碼視圖和設(shè)計(jì)視圖單擊視圖工具欄上的按鈕

，切換到源代碼和設(shè)計(jì)視圖，如圖所示。在這種視圖狀態(tài)下，文檔窗口一分為二，上面是源代碼窗口，下面是可視化的編輯區(qū)域，這種視圖的優(yōu)點(diǎn)是在修改源代碼的同時(shí)可以動(dòng)態(tài)地看到修改的結(jié)果。

（4）活動(dòng)數(shù)據(jù)視圖使用“活動(dòng)數(shù)據(jù)視圖”之后，用戶不必反復(fù)作瀏覽器檢查就可以在編輯模式中查看到服務(wù)器端的即時(shí)數(shù)據(jù)。

5.2建立網(wǎng)站

DreamweaverMX是一個(gè)站點(diǎn)創(chuàng)建和管理工具，因此使用它不僅可以創(chuàng)建單獨(dú)的文檔，還可以創(chuàng)建完整的Web站點(diǎn)。創(chuàng)建Web站點(diǎn)的第一步是規(guī)劃。為了達(dá)到最佳效果，在創(chuàng)建任何Web站點(diǎn)頁面之前，應(yīng)對站點(diǎn)的結(jié)構(gòu)進(jìn)行設(shè)計(jì)和規(guī)劃。決定要?jiǎng)?chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及頁是如何互相連接起來的。5.2.1使用站點(diǎn)向?qū)Ы⒕W(wǎng)站啟動(dòng)DreamweaverMX2004：選擇“站點(diǎn)”“新建站點(diǎn)”（即從“站點(diǎn)”菜單選擇“新建站點(diǎn)”）。

出現(xiàn)“站點(diǎn)定義”對話框，如圖5.7所示。

圖5.7站點(diǎn)定義

如果對話框顯示的是“高級”選項(xiàng)卡，則單擊“基本”。出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋€(gè)界面，要求為站點(diǎn)輸入一個(gè)名稱。在文本框中，輸入一個(gè)名稱以在DreamweaverMX中標(biāo)識(shí)該站點(diǎn)。該名稱可以是任何所需的名稱。單擊“下一步”。出現(xiàn)向?qū)У南乱粋€(gè)界面，如圖所示。詢問是否要使用服務(wù)器技術(shù)。選擇“否”選項(xiàng)，指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒有動(dòng)態(tài)頁。

單擊“下一步”，出現(xiàn)站點(diǎn)位置對話框，如圖所示。選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器（推薦）”的選項(xiàng)。

在站點(diǎn)開發(fā)過程中有多種處理文件的方式，初學(xué)網(wǎng)頁制作的朋友請選擇此選項(xiàng)。

單擊“下一步”，出現(xiàn)向?qū)У南乱粋€(gè)界面，詢問如何連接到遠(yuǎn)程服務(wù)器。從彈出式菜單中選擇“無”。

也可以稍后設(shè)置有關(guān)遠(yuǎn)程站點(diǎn)的信息。目前，本地站點(diǎn)信息對于開始創(chuàng)建網(wǎng)頁已經(jīng)足夠了。單擊“下一步”，該向?qū)У南乱粋€(gè)屏幕將出現(xiàn)，其中顯示用戶的設(shè)置概要，如圖所示。

單擊“完成”完成設(shè)置。隨即出現(xiàn)“管理站點(diǎn)”對話框，顯示您的新站點(diǎn)。單擊“完成”關(guān)閉“管理站點(diǎn)”對話框。

5.2.2站點(diǎn)管理1.站點(diǎn)管理器站點(diǎn)管理器的主要功能就是管理網(wǎng)站，也是Dreamweaver中最重要的窗口。它很象Windows中的資源管理器，一方面它具有管理本地站點(diǎn)的能力，包括建立文件、文件夾，給文件、文件夾改名等操作，還可以管理本地站點(diǎn)的結(jié)構(gòu)；另一方面，它可以管理遠(yuǎn)端站點(diǎn)，包括文件上傳和文件更新等。在站點(diǎn)管理器中無論移動(dòng)、復(fù)制任何文件，如果涉及超級鏈接，系統(tǒng)都會(huì)自動(dòng)更新。如圖5.11所示。

圖5.11站點(diǎn)管理器浮動(dòng)界面

2.在站點(diǎn)內(nèi)建立文件夾根據(jù)站點(diǎn)規(guī)劃，我們要在站點(diǎn)文件夾內(nèi)創(chuàng)建不同的子文件夾，分別放置不同欄目的各種信息和素材。站點(diǎn)建好后，系統(tǒng)自動(dòng)打開站點(diǎn)管理器，也就是“站點(diǎn)”（Site）窗口，如圖5.11所示。在站點(diǎn)中創(chuàng)建文件夾操作如下。（1）在窗口中選中剛才建立的網(wǎng)站的文件夾。C:\inetpub\wwwroot\myweb。（2）右單擊文件夾Myweb，在彈出的快捷菜單中，選擇“新建文件夾”。（3）在對話框中輸入文件夾名稱，如：zh。（4）重復(fù)上面的步驟，再建立其他的文件夾，分別命名為wzh和wsh。最終建成的目錄結(jié)構(gòu)如圖5.12所示。

圖5.12新建的站點(diǎn)結(jié)構(gòu)

3.建立新網(wǎng)頁在站點(diǎn)中建立新網(wǎng)頁的方法如下。①先選擇文件夾（網(wǎng)頁建在此文件夾內(nèi)），如\myweb\zh。②再選擇“文件”菜單命令，或在右窗格單擊鼠標(biāo)右鍵，選擇“新建文件”。③在文件的名稱區(qū)域輸入網(wǎng)頁文件名稱，如：index.htm。4．站點(diǎn)文檔的修改站點(diǎn)建好以后，一般還需要對站點(diǎn)的內(nèi)容進(jìn)行適當(dāng)?shù)男薷?，包括?chuàng)建文件夾、創(chuàng)建文檔、文檔的移動(dòng)、復(fù)制與刪除等。（1）文件的復(fù)制如同大多數(shù)文件管理器一樣，在站點(diǎn)中可以通過剪切、復(fù)制和粘貼操作，對文件或文件夾進(jìn)行復(fù)制。方法如下：

①在文件列表中選中要復(fù)制的文件（或文件夾）。②選擇“編輯”菜單中的“復(fù)制”命令。③打開目標(biāo)文件夾。④選擇“編輯”菜單中的“粘貼”命令。

（2）文檔的移動(dòng)①在文件列表中選中要移動(dòng)的文件（或文件夾）。②選擇“編輯”菜單中的“剪切”命令。③打開目標(biāo)文件夾。④選擇“編輯”菜單中的“粘貼”命令。經(jīng)過移動(dòng)或復(fù)制操作，文件位置發(fā)生了變化，其中的鏈接關(guān)系也應(yīng)發(fā)生相應(yīng)的變化。這時(shí)Dreamweaver會(huì)打開如圖5.13所示的對話框，提示是否要更新文件中的鏈接信息。從列表中選擇要更新的文件，單擊“更新”按鈕，則更新文件中的鏈接信息。這個(gè)操作對保證網(wǎng)頁文件中的鏈接信息正常是至關(guān)重要的，不可輕易放棄。

圖5.13更新鏈接對話框

（3）刪除文件在站點(diǎn)中刪除文件或文件夾很簡單，操作如下：選中文件或文件夾。選擇“編輯/刪除”命令，或按下“Del”鍵。出現(xiàn)提示對話框，詢問是否要真正刪除文件或文件夾，確認(rèn)后即可從站點(diǎn)中刪除文件或文件夾。與刪除站點(diǎn)不同，對文件或文件夾的刪除操作，會(huì)從磁盤上真正刪除相應(yīng)的文件或文件夾。

5.3網(wǎng)頁編輯

5.3.1新建網(wǎng)頁創(chuàng)建自己的頁面，可以使用

DreamweaverMX起始頁創(chuàng)建新頁，或者選擇“文件”菜單中的“新建”命令，彈出如下對話框。如圖5.14所示。

圖5.14新建文檔

從各種預(yù)先設(shè)計(jì)的頁面布局中選擇一種。比如：選擇“基本頁”HTML，單擊“創(chuàng)建”按鈕。DreamweaverMX即展開工作區(qū)界面（一個(gè)空白頁）。用戶可以在這個(gè)空白頁添加表格和輸入文本進(jìn)行編輯。如果要向頁面添加圖片或其它元素，應(yīng)先保存這個(gè)空白頁。選擇“文件”菜單中的“另存為”，在“另存為”對話框中，瀏覽到站點(diǎn)本地根文件夾下，填入文件名，保存退出。

5.3.2輸入文本1.添加文本在網(wǎng)頁中插入文字、圖像等，都是通過單擊對象面板上的圖標(biāo)，并在其屬性面板上設(shè)置相應(yīng)的參數(shù)來完成的。在網(wǎng)頁中添加文本通常使用以下兩種方法：在文檔窗口直接輸入文本或者從其他應(yīng)用程序中將文本復(fù)制、粘貼到網(wǎng)頁上。如果文字不多，直接輸入最簡單，大量的文字采用復(fù)制、粘貼的方法比較快捷、方便。

2.格式化段落（1）文本屬性面板文本格式的設(shè)置是通過其屬性面板來進(jìn)行的，文本屬性面板如圖所示。面板中的項(xiàng)目與Word中的功能相似。

（2）定義段落輸入文本后按Enter鍵，或者將光標(biāo)定位在文本中，在屬性面板的“格式”下拉菜單中選擇“段落”，會(huì)自動(dòng)生成一個(gè)段落。段落中的文本根據(jù)瀏覽器窗口的大小自動(dòng)換行，段落之間自動(dòng)加一空行。（3）設(shè)置標(biāo)題將光標(biāo)定位在文字中，打開屬性面板中的“格式”下拉菜單，選擇“標(biāo)題1”、“標(biāo)題2”……等即可。（4）段落對齊段落對齊即段落在瀏覽器窗口中水平位置的對齊方式。將光標(biāo)定位在段落中（多個(gè)段落需全部選中），在屬性面板上單擊“左對齊”、“居中”或“右對齊”按鈕即可。

（5）首行縮進(jìn)在Dreamweaver中按Tab和空格鍵，都不能使段落的首行縮進(jìn)，必須使用特殊的設(shè)置。將光標(biāo)定位在首行開始處，單擊“插入”面板中的“特殊字符”選項(xiàng)卡，單擊“不換行空格”按鈕，即可插入空格，實(shí)現(xiàn)首行縮進(jìn)。（6）段落縮進(jìn)段落縮進(jìn)可以讓整段文本相對于瀏覽器邊界縮進(jìn)一段距離，使文字在頁面中不要太靠邊。方法是將網(wǎng)頁的段落全部選中，在屬性面板（7）輸入空格①在編輯網(wǎng)頁的時(shí)候，有時(shí)根據(jù)排版要求或其它原因需要輸入空格，Dreamweaver提供了對中文輸入的最好的支持。首先進(jìn)行設(shè)置：單擊“編輯”菜單中的“參數(shù)選擇”選項(xiàng)下的“常規(guī)”，勾選“允許多個(gè)連續(xù)的空格”，直接敲空格鍵即可輸入空格（半格）。②或通過將輸入法調(diào)整到全角模式敲空格鍵，每敲一次，輸入一個(gè)空格。方法是：打開中文輸入法（以智能ABC為例），按“Shift+Space”切換到全角狀態(tài)，如圖：

再敲空格鍵就可以自如的輸入空格了。（8）設(shè)置文本格式選中一段文字，在屬性面板上，可以設(shè)置和修改文本的各種屬性：格式、字號、顏色和風(fēng)格（加粗、傾斜）。也可以選擇“文本”（Text）菜單命令進(jìn)行設(shè)置。（9）網(wǎng)頁中字體的顏色如果要改變字體的顏色，單擊屬性面板上的顏色按鈕，會(huì)出現(xiàn)Dreamweaver的調(diào)色板，如圖5.16所示。面板上顯示的216種顏色是網(wǎng)絡(luò)安全色。安全色是指顯卡運(yùn)行模式為256色，在Windows操作系統(tǒng)中，各種常見瀏覽器均可以顯示的顏色（Web-safe）。只要十六進(jìn)制的顏色值是成雙的數(shù)值，如：00，33，66，99，CC，或FF，都屬于網(wǎng)絡(luò)安全色。但I(xiàn)E瀏覽器不能很好地顯示#0033FF，#3300FF，#00FF33和#33FF00幾種顏色。

（10）在列表中增加字體在屬性面板上設(shè)置字體時(shí)，如果下拉菜單中沒有中文字體，就需要添加字體，方法如下：①選擇“文本字體編輯字體列表”，打開“編輯字體列表”對話框，如圖5.17所示。②在“可用字體”列表中選擇需要的字體，如方正舒體。③單擊按鈕，字體出現(xiàn)在“選中字體”和“字體列表”窗口中。④單擊“+”按鈕，再重復(fù)上兩個(gè)步驟，可繼續(xù)添加更多的字體。⑤在“字體列表”中選中字體，單擊“－”按鈕可從列表中刪除字體。⑥添加完成后，單擊“確定”鍵。圖5.17編輯字體列表

3.設(shè)置網(wǎng)頁的標(biāo)題和背景顏色點(diǎn)擊“修改”菜單選“頁面屬性”。系統(tǒng)彈出頁面屬性對話框，如圖5.18所示。

圖5.18頁面屬性

在標(biāo)題輸入框填入標(biāo)題“西安簡介”。設(shè)置背景顏色：網(wǎng)頁背景可以是圖片，也可以是某種顏色。如果背景要設(shè)為圖片，點(diǎn)擊背景圖象“瀏覽”按鈕，系統(tǒng)彈出圖片選擇對話框，選中背景圖片文件，單擊確定按鈕即可。另外在該對話框中可以進(jìn)行超級鏈接相關(guān)設(shè)置?，F(xiàn)在流行的網(wǎng)頁設(shè)計(jì)配色，采用黑、白、灰這些無彩色作基調(diào)，采用一種精確的有彩色作為主色調(diào)，大多使用一種顏色的漸變，讓人感覺只有一種有彩色，顏色漸變可以在Photoshop、Fireworks中處理。

5.3.3文字網(wǎng)頁制作實(shí)例本例的任務(wù)是制作一個(gè)文字網(wǎng)頁。通過該網(wǎng)頁的制作，使同學(xué)們熟悉文字網(wǎng)頁的制作過程，掌握在網(wǎng)頁中如何添加文字、設(shè)置文本的各種屬性，如何修飾文字和格式化段落等內(nèi)容。制作步驟如下：（1）新建網(wǎng)頁打開站點(diǎn)管理器，在MYweb站點(diǎn)的zh目錄下新建一個(gè)網(wǎng)頁文件，命名為h1.htm。雙擊文件圖標(biāo)，在文檔窗口打開h1.htm文件。（2）添加文本。在網(wǎng)頁上輸入以下的文本。

西安簡介西安，現(xiàn)陜西省省會(huì)，古稱長安，面積兩千兩百多平方公里。地處關(guān)中平原，南依秦嶺，北臨渭河，屬熱溫帶氣候，四季分明，雨量適宜，自然條件優(yōu)越。是世界和中國歷史文化名城，西北地區(qū)政治、經(jīng)濟(jì)、文化中心。這是一座古老的都市。從1百萬年前的“藍(lán)田猿人”到6,000年前的“半坡先民”，都曾在這塊土地上繁衍生息。它是中國建都最早、歷時(shí)最長、規(guī)模最大的城市，先后有周、秦、漢、唐等十三個(gè)王朝在此建都，贏得“秦中自古帝王州”的美名。它又是著名的“絲綢之路”的起點(diǎn)，早已成為國際商貿(mào)中心、中西文明薈萃之地、古中國對外開放的象征，被列入“世界四大文明古都”之一。西安素有“天然歷史博物館”之稱，有被譽(yù)為“世界第八大奇跡”的秦始皇兵馬俑、“人類精神財(cái)富的瑰寶”的碑林、世界保存最完整的明代古城墻和舉世聞名的唐朝名僧玄奘譯經(jīng)藏經(jīng)地----大雁塔。（3）格式化段落。選中第一行文字“西安簡介”，在屬性面板上單擊“居中對齊”按鈕；將光標(biāo)定位在首行開始處，單擊“插入”面板中的“字符”選項(xiàng)卡，單擊“不換行空格”按鈕若干次，實(shí)現(xiàn)首行縮進(jìn)。（4）修飾文字。選中第一行文字“西安簡介”，在屬性面板上設(shè)置字體為“幼圓”、字號為“7”。打開顏色面板，選擇文字顏色為（#FF0000）。其它文本保持不變。（5）保存、瀏覽網(wǎng)頁。選擇“文件”菜單下的“保存”命令，或按“Ctrl+S”鍵保存網(wǎng)頁，再按F12鍵，用IE瀏覽器觀看網(wǎng)頁，效果如圖5.19所示。

5.19文字網(wǎng)頁效果

5.3.4插入圖像1.網(wǎng)頁中圖像的格式Dreamweaver支持的圖像格式有三種：JPEG、GIF和PNG。JPEG（JPG）是一種壓縮率高、圖像質(zhì)量好的圖像格式，適用于色彩豐富的照片；GIF格式適用于色調(diào)簡單（小于256色）的圖像，壓縮比很高；而PNG格式的圖像綜合了前兩類圖像的優(yōu)點(diǎn)，特別適合應(yīng)用于網(wǎng)頁上，但對瀏覽器要求較高。2.插入圖像插入圖像操作步驟如下。①把光標(biāo)定位在要插入圖像的地方。②將對象面板切換到“常用”格式，單擊面板上的圖標(biāo)。③

在打開的窗口中找到要插入的圖像，單擊“確定”。如圖5.20所示。

圖5.20插入圖片實(shí)例

④

如果要插入的圖像文件位于站點(diǎn)以外的文件夾中，系統(tǒng)會(huì)出現(xiàn)如圖5.21所示的對話框，提示需要將圖像拷貝到站點(diǎn)內(nèi)。請注意，一定要單擊“是”按鈕，將圖像保存在站點(diǎn)內(nèi)的文件夾中。否則，網(wǎng)頁上傳到遠(yuǎn)端站點(diǎn)后，會(huì)找不到圖像，出現(xiàn)斷開的鏈接，導(dǎo)致圖像不能正常顯示。

圖5.21插入的圖像文件信息提示

3.設(shè)置圖像屬性當(dāng)選中一幅插入的圖片時(shí)，將會(huì)出現(xiàn)如圖所示圖像屬性面板，用戶可對圖像進(jìn)行格式設(shè)置。圖像屬性面板中的參數(shù)說明如下：

替代（T）：在這里輸入圖片說明文字。瀏覽網(wǎng)頁時(shí)，鼠標(biāo)移動(dòng)到圖片上，就會(huì)出現(xiàn)這些說明文字。如果圖片沒有被下載，圖片位置上會(huì)顯示替換文字。邊框（B）：用于設(shè)置圖片邊框的寬度，但顏色不能修改。圖片上沒有鏈接時(shí)邊框?yàn)楹谏?，添加鏈接后，邊框顏色與頁面超級鏈接的顏色一致。源文件（S）：顯示當(dāng)前圖片文件的位置和名稱。對齊（A）：設(shè)置圖片相對文字的對齊方式。

對齊方式：與文字一樣，是圖片在網(wǎng)頁中的布局方式，有左對齊、居中和右對齊。鏈接（L）：在其后的文本框中輸入連接資源的URL或單擊后邊的文件夾圖標(biāo)，選擇連接對象，可設(shè)置圖像鏈接。圖像：在其下的文本框中可為圖像命名。寬（W）、高（H）：用于設(shè)置圖像的大小。垂直邊距（V）、水平邊距（H）：設(shè)置圖像的上邊距和左邊距。4.插入輪替圖像輪替圖像實(shí)際上是在同一位置插入兩幅圖像。正常情況顯示一種圖像，當(dāng)鼠標(biāo)移到圖像上時(shí)，則顯示出另一幅圖像。使用輪替圖像建立鏈接會(huì)產(chǎn)生動(dòng)態(tài)按鈕的效果。插入輪替圖像前，一定要準(zhǔn)備兩幅大小一樣、畫面不同的圖像。插入輪替圖像操作如下：（1）單擊“插入”面板中的“常用”選項(xiàng)卡中的“鼠標(biāo)經(jīng)過圖像”圖標(biāo)。（2）系統(tǒng)彈出如圖5.23所示的對話框，在“原始圖像”文本框中輸入第一幅圖像的路徑和名稱，在“鼠標(biāo)經(jīng)過圖像”文本框中輸入第二幅圖像的路徑和名稱，在“按下時(shí)，轉(zhuǎn)到URL”文本框中輸入想要連接html文件或URL，單擊“確定”，完成圖像插入。圖5.23插入輪替圖像

插入輪替圖像后，在瀏覽器中將鼠標(biāo)移到圖像上，圖像立刻發(fā)生變化，效果如圖5.24所示。

(a)原來的圖像(b)鼠標(biāo)移入圖像后圖5.24輪替圖像5.3.5插入其他對象在網(wǎng)頁編輯中還可以添加一些其他對象，使用對象面板或菜單命令都能夠?qū)崿F(xiàn)。下面主要介紹使用對象面板插入對象的方法。1.插入換行符段落中的文字是自動(dòng)換行的，換行的位置取決于訪問者瀏覽器的寬度。如果要在段落中強(qiáng)制換行（不空一行），就要插入一個(gè)換行符。插入換行符可使用如下方法：（1）將光標(biāo)移到要插入換行符的位置。（2）選擇“插入”面板中的“字符”選項(xiàng)卡上的圖標(biāo)。2.插入特殊字符如果要輸入鍵盤上沒有的符號，就需要插入特殊字符。操作如下：①

單擊“插入”面板中的“字符”選項(xiàng)卡，打開字符面板如圖5.25所示。②將光標(biāo)移到想插入字符的位置單擊即可。圖5.25“插入面板”中的“字符”選項(xiàng)卡

3.插入水平線在網(wǎng)頁編輯中使用水平線可以分割網(wǎng)頁內(nèi)容，使文檔結(jié)構(gòu)清晰明白。在網(wǎng)頁中合理放置幾條水平線，可使一篇內(nèi)容繁雜的文檔變得層次分明，便于閱讀。插入水平線步驟如下：①將光標(biāo)移到想插入水平線的地方。②單擊“插入”面板的“常用”選項(xiàng)卡中的“水平線”圖標(biāo)。插入水平線后，可在其屬性面板對其修改?？尚薷牡膮?shù)有寬度、高度（單位為像素或百分比）及對齊方式。

4.插入日期在網(wǎng)頁上插入日期的操作：①將光標(biāo)移到想插入日期的地方。②單擊“插入”面板的“常用”選項(xiàng)卡中的“日期”圖標(biāo)，并在出現(xiàn)的對話框中選擇日期格式。5.3.6網(wǎng)頁整體設(shè)置1.調(diào)整網(wǎng)頁視圖尺寸設(shè)計(jì)網(wǎng)頁時(shí)，要求在文檔窗口看到的效果，與瀏覽器中顯示的效果越接近越好，因此需要把文檔窗口的尺寸設(shè)置成與瀏覽器的顯示窗口一樣大。由于訪問者使用的個(gè)人電腦顯示器的分辨率設(shè)置因人而異，有640×480，也有800×600或更高的，設(shè)計(jì)的頁面符合每種顯示器是不可能的，所以要選擇一種能滿足大多數(shù)瀏覽者使用的顯示分辨率。當(dāng)前，采用800×600分辨率的瀏覽器最多，因此我們制作的網(wǎng)頁應(yīng)該適應(yīng)800×600的分辨率。設(shè)置網(wǎng)頁視圖尺寸的方法是：在文檔窗口的狀態(tài)欄上單擊“窗口大小”欄旁的黑色的小三角，就會(huì)出現(xiàn)視圖尺寸調(diào)整列表，如圖5.26所示，可在該列表中選擇一種。

圖5.26調(diào)整文檔窗口大小

2.設(shè)置網(wǎng)頁屬性網(wǎng)頁屬性包括：頁面標(biāo)題、背景圖像或背景顏色、文本和鏈接顏色等等。頁面標(biāo)題是用來識(shí)別網(wǎng)頁的；背景圖像或背景顏色在一定程度上決定了網(wǎng)頁的整體外觀；文本顏色就是普通文本的顏色，而鏈接顏色可以讓用戶清楚地區(qū)別普通文本和超級鏈接，以及哪些鏈接已經(jīng)訪問過，哪些還沒有訪問。有兩種方法可以打開頁面屬性對話框：即選擇“修改”菜單下的“頁面屬性”命令或在文檔窗口單擊右鍵，在彈出的快捷菜單中選擇“頁面屬性”。打開的頁面屬性對話框如圖5.27所示。

圖5.27頁面屬性對話框

（1）在“標(biāo)題”欄輸入標(biāo)題文本，瀏覽時(shí)這些文本將顯示在瀏覽器窗口的標(biāo)題欄上。（2）在“背景圖像”項(xiàng)中為網(wǎng)頁選擇一個(gè)背景圖片。（3）在“背景”項(xiàng)設(shè)置背景顏色，單擊顏色塊，選取顏色。（4）網(wǎng)頁文本顏色：在“文本”、“鏈接”、“訪問過的鏈接”和“活動(dòng)鏈接”四項(xiàng)中，可以設(shè)置普通文字的顏色、超級鏈接的顏色、已經(jīng)訪問過的鏈接的顏色、正在訪問的鏈接的顏色。（5）設(shè)置頁邊距

頁邊距指的是網(wǎng)頁內(nèi)容與瀏覽器邊框之間的距離，可以在“左邊界”、“頂部邊界”、“邊界寬度”和“邊界高度”四區(qū)域設(shè)置網(wǎng)頁內(nèi)容與瀏覽器左、右邊框及上、下邊框的距離。（6）

在“文檔編碼”項(xiàng)中可以選擇編碼，默認(rèn)為“簡體中文(GB2312)”。如果預(yù)計(jì)的瀏覽對象包括有大陸以外地區(qū)的人，就必須認(rèn)真對待選擇編碼問題。

5.4超級鏈接作為網(wǎng)站肯定有很多的頁面，如果頁面之間彼此是獨(dú)立的，那么網(wǎng)頁就好比是孤島，這樣的網(wǎng)站是無法運(yùn)行的。為了建立起網(wǎng)頁之間的聯(lián)系我們必須使用超級鏈接。稱為“超級鏈接”，是因?yàn)樗裁炊寄苕溄?，如：網(wǎng)頁、下載文件、網(wǎng)站地址、郵件地址……等等。下邊我們就來討論怎樣在網(wǎng)頁中創(chuàng)建超級鏈接5.4.1超級鏈接概述超級鏈接是網(wǎng)頁的靈魂，集中體現(xiàn)了WWW的魅力。有了它Web（萬維網(wǎng)）才能夠迅速地推廣和應(yīng)用。1.鏈接的概念超級鏈接是指站點(diǎn)內(nèi)不同網(wǎng)頁之間、站點(diǎn)與Web之間的鏈接關(guān)系，它可以使站點(diǎn)內(nèi)的網(wǎng)頁成為有機(jī)的整體，還能夠使不同站點(diǎn)之間建立聯(lián)系。超級鏈接由兩部分組成：鏈接載體（源端點(diǎn)）和鏈接目標(biāo)（目標(biāo)端點(diǎn)）。

圖5.28超級鏈接示意圖

根據(jù)鏈接載體的特點(diǎn)，一般把鏈接分為文本鏈接與圖像鏈接兩大類。文本鏈接是指用文本作鏈接載體，簡單實(shí)用；圖像鏈接則用圖像作為鏈接載體，它能使網(wǎng)頁美觀、生動(dòng)活潑，它既可以指向單個(gè)的鏈接，也可以根據(jù)圖像不同的區(qū)域建立多個(gè)鏈接。2.鏈接的類型按鏈接目標(biāo)分類，可以將超級鏈接分為以下幾種類型：內(nèi)部鏈接：同一網(wǎng)站文檔之間的鏈接。外部鏈接：不同網(wǎng)站文檔之間的鏈接。錨點(diǎn)鏈接：同一網(wǎng)頁或不同網(wǎng)頁中指定位置的鏈接。E-mail鏈接：打開填寫電子郵件的鏈接。

3.關(guān)于文檔路徑要正確創(chuàng)建超級鏈接，必須了解鏈接與被鏈接文檔之間的路徑。每個(gè)網(wǎng)頁甚至每個(gè)獨(dú)立的網(wǎng)頁元素（圖像、聲音、動(dòng)畫、視頻等），都有一個(gè)唯一的地址，稱為統(tǒng)一資源定位符（URL）。然而，當(dāng)我們創(chuàng)建內(nèi)部鏈接時(shí)，一般不會(huì)用文檔完整的URL，而是用相對于當(dāng)前文檔或站點(diǎn)根文件夾的相對路徑。Dreamweaver允許使用的三種文檔路徑類型：（1）絕對路徑：就是被鏈接文檔的完整URL，包括所使用的傳輸協(xié)議（對于網(wǎng)頁通常是http://）。例如，/support/Dreamweaver/contents.html就是一個(gè)絕對路徑。在創(chuàng)建外部鏈接時(shí)，必須使用絕對路徑。（2）文檔相對路徑：以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接文檔經(jīng)由的路徑。例如，Dreamweaver/contents.html就是一個(gè)文檔相對路徑。內(nèi)部鏈接（同一網(wǎng)站內(nèi)）使用相對路徑比較方便。與同文件夾內(nèi)的文件鏈接只寫文件名即可，要與上一級文件夾里的文件鏈接，在文件名前加上“../”。（3）根相對路徑：是指從站點(diǎn)根文件夾到被鏈接文檔經(jīng)由的路徑，以斜杠開頭，例如，/support/tips.html就是站點(diǎn)根文件夾下的support子文件夾中的一個(gè)文件（tips.html）的根相對路徑。使用根相對路徑，是指定站點(diǎn)內(nèi)文檔鏈接的好方法，因?yàn)楫?dāng)我們移動(dòng)一個(gè)包含根相對鏈接的文檔時(shí)，無須對原有的鏈接進(jìn)行修改

5.4.2創(chuàng)建超級鏈接創(chuàng)建超級鏈接的一般方法，就是選擇鏈接載體（文本或圖像），指向鏈接目標(biāo)。下面我們以文本為鏈接載體，介紹在Dreamweaver中如何創(chuàng)建各種類型的超級鏈接。1.創(chuàng)建一般鏈接（1）鏈接內(nèi)部網(wǎng)頁鏈接內(nèi)部網(wǎng)頁即在本站點(diǎn)內(nèi)部進(jìn)行鏈接，方法是：①選中想要建立鏈接的文本。②

在屬性面板中單擊黃色文件夾圖標(biāo)，在彈出的對話框里選中相應(yīng)的網(wǎng)頁文件就完成了。做好超級鏈接屬性面板出現(xiàn)鏈接文件顯示。如圖5.29所示，

圖5.29建立超級鏈接

（2）鏈接到外部網(wǎng)站鏈接外部網(wǎng)站的關(guān)鍵，是在“鏈接”域正確輸入外部網(wǎng)站的網(wǎng)址（URL）：①選擇鏈接文字。②在屬性面板的“鏈接”域輸入網(wǎng)站的完整的URL（一定要包括Http://），如鏈接到“雅虎中國”站，就要輸入“雅虎中國”的網(wǎng)址http//。③

為了在新窗口中顯示外部網(wǎng)站，在“目標(biāo)”域中選擇_blank。設(shè)置完成的屬性面板如圖5.30所示。圖5.30設(shè)置鏈接目標(biāo)載入位置

“目標(biāo)”下拉列表參數(shù)含義如下：_blank：被鏈接文檔在新窗口中打開。_parent：將被鏈接文件載入到父框架集或包含該鏈接的框架窗口中。_self：被鏈接文件在與該鏈接相同的框架或窗口中打開（默認(rèn)窗口）。_top：將被鏈接文件載入到整個(gè)瀏覽器窗口并刪除所有框架。

（3）創(chuàng)建E-mail鏈接E-mail鏈接是這樣一種鏈接，當(dāng)訪問者單擊該鏈接時(shí)，他將要彈出一個(gè)Email地址以發(fā)送電子郵件（如網(wǎng)站管理員或版主）。建立Email鏈接有兩種方法：1）使用對象面板①把光標(biāo)置于目標(biāo)位置，或選定顯示為電子郵件鏈接的文本。②

在“插入”面板的“常用”選項(xiàng)卡上單擊電子郵件鏈接圖標(biāo)。出現(xiàn)對話框，如圖所示。③在對話框的“文本”編輯框中輸入作為電子郵件鏈接顯示在文檔中的文本。④在E-Mail框中輸入E-mail地址。2）使用屬性面板①在文檔窗口選擇要成為鏈接的文本或圖像。②

在屬性面板的“鏈接”

框中，輸入mailto：電子郵件地址。如圖所示。

2.錨點(diǎn)鏈接如果網(wǎng)頁很長，瀏覽時(shí)就要不斷地拖動(dòng)滾動(dòng)條，要找到需要的內(nèi)容很不容易。如果在該網(wǎng)頁或者另外的頁面上建立目錄，訪問者單擊目錄上的條目，就可以自動(dòng)跳到相應(yīng)位置，找到需要的內(nèi)容，這樣的方式就要靠錨點(diǎn)鏈接來實(shí)現(xiàn)。建立錨點(diǎn)鏈接一般要為分兩步：（1）設(shè)置錨點(diǎn)設(shè)置錨點(diǎn)的步驟入下。①把光標(biāo)置于想要設(shè)置錨點(diǎn)的地方。②

選擇“插入”菜單下的“命名錨記”選項(xiàng)，或者單擊“插入”面板中“常用”選項(xiàng)卡中的“命名錨記”圖標(biāo)，出現(xiàn)對話框，如圖所示。③

在“插入命名錨點(diǎn)”對話框的錨點(diǎn)名文本框中輸入錨點(diǎn)名。單擊“確定”按鈕。

（2）創(chuàng)建錨點(diǎn)鏈接創(chuàng)建錨點(diǎn)鏈接的步驟是：①選擇要建立鏈接的文本或圖像，比如網(wǎng)頁中有“大雁塔介紹”的文本處。②

在屬性面板的“鏈接”編輯框中輸入“#”和錨點(diǎn)名，如：#大雁塔，或者單擊文件鏈接指針，將指針直接拖拽到錨點(diǎn)位置，如圖5.34所示。

圖5.34創(chuàng)建錨點(diǎn)鏈接

5.4.3圖像鏈接以圖像作為鏈接載體，可以使超級鏈接更加生動(dòng)活潑。最簡單的圖像鏈接就是以一幅圖像為鏈接觸發(fā)點(diǎn)（載體），復(fù)雜一些的可用兩幅圖像（輪替圖像）或更多的圖像（導(dǎo)航條）作觸發(fā)點(diǎn)，此外，就是用一幅圖像中的某些區(qū)域作觸發(fā)點(diǎn)來創(chuàng)建超級鏈接，稱為“熱點(diǎn)鏈接”。1.用圖像創(chuàng)建鏈接在圖像（包括輪替圖像）上建立超級鏈接的方法，與以文字為載體基本相同。不同的就是首先要選中建立鏈接的圖像，在圖像上建立超級鏈接的步驟如下。（1）選中要建立鏈接的圖像（或輪替圖像）。（2）在圖像屬性面板上的“鏈接”編輯框中輸入鏈接目標(biāo)的URL，或按瀏覽按鈕選取想要鏈接的目標(biāo)。設(shè)置好的圖像屬性如圖5.35所示。

圖5.35在圖像上建立鏈接

2.使用導(dǎo)航條導(dǎo)航條在網(wǎng)站中是必不可少的，它的功能是為訪問者導(dǎo)航，是一種常用的超級鏈接形式。導(dǎo)航條是橫向或縱向排列的文字或圖片，把鼠標(biāo)放上去，有時(shí)文字會(huì)變色、圖片會(huì)翻轉(zhuǎn)等。（1）創(chuàng)建導(dǎo)航條創(chuàng)建導(dǎo)航條至少需要“一般狀態(tài)圖像”、“鼠標(biāo)經(jīng)過圖像”、“按下圖像”和“按下鼠標(biāo)經(jīng)過圖像”四幅圖像，應(yīng)事先處理好備用。創(chuàng)建導(dǎo)航條步驟如下。①將光標(biāo)放到要?jiǎng)?chuàng)建導(dǎo)航條的位置。②單擊“插入”面板中“常用”選項(xiàng)卡上的導(dǎo)航條按鈕，彈出插入導(dǎo)航條對話框，如圖所示。③

在對話框中按順序依次設(shè)置參數(shù)：

在“項(xiàng)目名稱”后的文本框中為項(xiàng)目命名，這里取名“My_Item1”。通過瀏覽或直接在文本框中輸入的方法，分別選擇“一般狀態(tài)圖像”、“鼠標(biāo)經(jīng)過圖像”、“按下圖像”和“按下鼠標(biāo)經(jīng)過圖像”四幅圖像。在“按下時(shí)，前往的URL”文本框中輸入鏈接目標(biāo)的URL。在“插入”的下拉菜單中選擇導(dǎo)航條排列方式（水平、垂直）。選中“使用表格”項(xiàng)，利用表格來限制導(dǎo)航條的樣式。④單擊“+”號按鈕，添加第二個(gè)項(xiàng)目。在所有項(xiàng)目添加完成后，單擊“確定”按鈕完成設(shè)置。導(dǎo)航條的每一個(gè)項(xiàng)目并非必準(zhǔn)備四種圖片，通常只用兩幅或三幅圖片，前兩幅圖片一定要不同，如果設(shè)定三種狀態(tài)，后兩種可以使用同樣的圖片。

（2）修改導(dǎo)航條雖然可以使用插入面板插入導(dǎo)航條，但是不能使用屬性面板修改它的屬性，只能選擇菜單命令。方法是：選擇“修改”菜單下的“導(dǎo)航條”命令，在出現(xiàn)的導(dǎo)航條修改面板上修改或重新設(shè)置導(dǎo)航條的參數(shù)（唯一不能修改導(dǎo)航條的排列順序）。3.創(chuàng)建影像地圖與熱區(qū)鏈接影像地圖（ImageMap）也是一種以圖像為載體的超鏈接，它是一幅被劃分為若干“熱區(qū)”（hotspots）的圖像，單擊“熱區(qū)”時(shí)可觸發(fā)超級鏈接。建立圖像熱區(qū)鏈接分以下兩個(gè)步驟完成。（1）創(chuàng)建熱區(qū)①在網(wǎng)頁中插入一幅圖像，并將其選中。②單擊屬性面板右下角的擴(kuò)展箭頭，顯示影像地圖制作工具，如圖5.37所示。③

根據(jù)圖像形狀選擇工具，拖拽鼠標(biāo)在圖像上畫出熱區(qū)（矩形、圓形或多邊形）。

圖5.37屬性面板上的影象地圖制作工具

（2）建立熱區(qū)鏈接熱區(qū)創(chuàng)建好后，立即彈出圖像熱區(qū)屬性面板，如下圖所示。在“鏈接”后的文本框輸入要鏈接的文檔（也可以通過單擊面板上的文件夾圖標(biāo)，瀏覽并選取要鏈接的文件），在“替代”框內(nèi)輸入圖形熱區(qū)替代文本，熱區(qū)的鏈接就設(shè)置好了。

5.5創(chuàng)建表格表格可以規(guī)范數(shù)據(jù)，使網(wǎng)頁變得整齊。在網(wǎng)頁制作中表格還有另一個(gè)用途，就是為網(wǎng)頁排版。表格也是對象面板上的一個(gè)對象，因此，對表格的操作也象其他對象一樣。一張表格橫向叫行，縱向叫列，行列交叉部分就叫做單元格。單元格中的內(nèi)容和邊框之間的距離叫邊距，單元格和單元格之間的距離叫間距，整張表格的邊緣叫做邊框。

5.5.1創(chuàng)建表格1.插入表格在網(wǎng)頁中插入表格步驟如下。①將光標(biāo)定位在要插入表格的地方。②

單擊“插入”面板中“常用”選項(xiàng)卡上的插入表格按鈕，彈出插入表格對話框上的按鈕。③

在打開的表格對話框中，設(shè)置表格行、列數(shù)及單元格邊距、單元格間距、表格寬度等，如圖5.39所示。當(dāng)“邊框”中輸入“0”時(shí)，在

瀏覽器窗口將不會(huì)看到表格。圖5.39插入表格對話框

2.導(dǎo)入表格數(shù)據(jù)當(dāng)數(shù)據(jù)以文件形式存放在磁盤上，就可以直接通過導(dǎo)入數(shù)據(jù)而創(chuàng)建一表格。方法是：單擊“常用”選項(xiàng)卡上的表格數(shù)據(jù)圖標(biāo)，或者選擇“文件”菜單下的“導(dǎo)入”下的“表格式數(shù)據(jù)”命令，在出現(xiàn)的“導(dǎo)入表格數(shù)據(jù)”對話框中，選擇要導(dǎo)入的、保存為.txt的數(shù)據(jù)文件。

3．表格基本操作（1）添加表格內(nèi)容將光標(biāo)置于要添加內(nèi)容的單元格內(nèi)，插入圖片或輸入文字。（2）改變表格大小改變表格大小有兩種方法：其一是在屬性面板上修改參數(shù)；其二是將鼠標(biāo)放在表格邊框上，當(dāng)光標(biāo)變?yōu)殡p向箭頭時(shí)拖動(dòng)鼠標(biāo)即可。（3）添加行與列將光標(biāo)置于某行或列，右擊鼠標(biāo)，在出現(xiàn)的快捷菜單中選擇“表格”下的“插入行/插入列”命令，將會(huì)在當(dāng)前行（列）的上邊（前邊）插入一新行（列）。（4）刪除行與列選擇行或列，按“Del”鍵，或右擊鼠標(biāo)選擇相應(yīng)的命令。

5.5.2設(shè)置表格屬性表格中有兩個(gè)重要的元素，就是整體表格和單元格，它們有各自的屬性面板，可以分別設(shè)置參數(shù)。1.選擇表格（1）選擇整個(gè)表格選中整個(gè)表格較方便的方法是將光標(biāo)置于表格內(nèi)，再按下“Ctrl+A”鍵，也可以將光標(biāo)放在左上角的單元格內(nèi)，拖動(dòng)光標(biāo)到右下角的單元格。（2）選擇表格中的行或列要選中表格的某行（列），可將光標(biāo)移到該行（列）的左（上）側(cè)邊框線處，當(dāng)光標(biāo)變成黑色實(shí)心箭頭時(shí)單擊鼠標(biāo)即可。（3）單元格的選擇單擊某個(gè)單元格，則該單元格被選中；按下Ctrl鍵的同時(shí)單擊單元格，可選取不連續(xù)的單元格，而按下Shift鍵的同時(shí)單擊單元格，可選取連續(xù)的單元格。

2.設(shè)置表格整體屬性當(dāng)選中整個(gè)表格后，表格屬性面板如圖所示，可以設(shè)置表格參數(shù)。

3.設(shè)置行、列和單元格屬性選中行、列或單元格后，在屬性面板上設(shè)置相應(yīng)的屬性，如圖所示。

4.改變表格外觀用預(yù)先設(shè)計(jì)好的樣式來格式化表格，可使表格的外觀變得美觀、漂亮。方法是：①選定整個(gè)表格，然后選擇“命令”菜單下的“格式化表格”命令。②出現(xiàn)“格式化表格”對話框，如圖5.42所示，從左邊的列表框內(nèi)選擇一個(gè)設(shè)計(jì)方案，表格被更新并顯示出設(shè)計(jì)示例。③要進(jìn)一步自定義設(shè)計(jì)，可對“行顏色”、“第一行”和“最左列”等選項(xiàng)進(jìn)行修改。修改表格邊框?qū)挾龋凇斑吙颉庇蜉斎霐?shù)值。如不想顯示表格線，則輸入0。④

單擊“應(yīng)用”或“確定”，即可對表格應(yīng)用選定的設(shè)計(jì)。

圖5.42格式化表格

5.5.3用表格排版網(wǎng)頁中插入了許多頁面元素，如文字、圖片、動(dòng)畫、表格等，但是它們在網(wǎng)頁中的位置是不固定的。例如，文字段落會(huì)根據(jù)瀏覽器的大小自動(dòng)換行。因此網(wǎng)頁的外觀效果取決于瀏覽器窗口大小和顯示分辨率。用表格排版可以固定頁面元素，使網(wǎng)頁內(nèi)容的布局相對穩(wěn)定。我們可以把表格看成是一個(gè)架子，東西放在架子上位置就固定了。單純利用表格排版是一項(xiàng)技巧性很強(qiáng)的工作，特別是頁面內(nèi)容較多時(shí)，需要更多的經(jīng)驗(yàn)。1.表格排版原則（1）使用表格排版，應(yīng)當(dāng)把網(wǎng)頁中的所有頁面元素都放入表格中，而不是在網(wǎng)頁的某個(gè)局部使用表格。（2）在網(wǎng)頁內(nèi)容較多的情況下，通常使用一個(gè)大表格劃分出頁面布局的區(qū)域，在某個(gè)內(nèi)容較多的區(qū)域中再嵌套表格進(jìn)行局部排版。外部的大表格一定使用象素作單位，表格寬度是絕對寬度，這樣才能保證網(wǎng)頁布局的穩(wěn)定。而嵌套的表格應(yīng)該使用百分比作單位，對于大表格相對穩(wěn)定。

（3）網(wǎng)頁排版沒有固定的方法，依據(jù)制作人員的排版經(jīng)驗(yàn)和習(xí)慣。但通常采用表格疊加的方法較好。比如建三個(gè)表格，第一個(gè)表格放網(wǎng)頁的標(biāo)題圖片，第二個(gè)表格放網(wǎng)頁的主要內(nèi)容，在這個(gè)表格中可以拆分表格或再嵌套表格，第三個(gè)表格中可以放置網(wǎng)頁的版權(quán)聲明和聯(lián)系地址等內(nèi)容。用表格疊加法排版比用表格拆分法更容易些，因?yàn)閷为?dú)的表格進(jìn)行操作，設(shè)置表格寬度和高度時(shí)不容易造成沖突。另外，網(wǎng)頁下載時(shí)，用表格疊加法排版的網(wǎng)頁比拆分法排版的網(wǎng)頁下載更快，因?yàn)闉g覽器是將表格結(jié)構(gòu)分析清楚后才進(jìn)行顯示的。2.新的排版手段現(xiàn)在DreamweaverMX提供了更多、更便利的排版工具，例如，可以利用層和結(jié)構(gòu)視圖排版。在頁面內(nèi)容不多的情況下，采用層技術(shù)進(jìn)行網(wǎng)頁布局排版更容易。如果頁面內(nèi)容較多，情況復(fù)雜，可以使用結(jié)構(gòu)視圖進(jìn)行排版。

網(wǎng)頁設(shè)計(jì)中很重要的一項(xiàng)工作就是網(wǎng)頁排版，定位網(wǎng)頁元素是頁面布局排版中不可缺少的工作。利用表格排版技巧性強(qiáng)、不易掌握。其實(shí)，在Dreamweaver中利用層，就可以實(shí)現(xiàn)用鼠標(biāo)任意拖動(dòng)頁面元素的夢想。把網(wǎng)頁元素放入層中，不僅可以定位還可以控制元素的疊放順序（前、后）、對齊、排列以及其顯示屬性（顯示/隱藏），甚至可以作簡單的動(dòng)畫。層（Layer）是一種

HTML頁面元素，您可以將它定位在頁面上的任意位置。層可以包含文本、圖像或其它

HTML文檔。層的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維?？梢允鬼撁嫔显剡M(jìn)行重疊和復(fù)雜的布局。

5.6層

5.6.1層的操作我們首先看一個(gè)層的實(shí)例。

圖5.43層的實(shí)例在上圖中有兩個(gè)層，分別是兩幅圖片。通過周圍的黑色調(diào)整柄拖動(dòng)控制層的大小，拖動(dòng)層左上角的選擇柄可以移動(dòng)層的位置，在層中可以插入其他任何元素包括圖片文字鏈接表格等，一個(gè)頁面中可以畫出很多的層，這些層都會(huì)列在層面板中。Dreamweaver的層就是網(wǎng)頁元素的容器，可以把層想象為一個(gè)帶小輪子的平板車，把網(wǎng)頁元素放到層中，就可以在頁面中移動(dòng)到任意位置，在層中可以放置文本、圖像、表單、插件，甚至還可以包含其它層（嵌套）。1.創(chuàng)建層在“插入”面板的“常用”選項(xiàng)卡中單擊“描繪層”按鈕，按住鼠標(biāo)左鍵在文檔窗口中拖拽，就創(chuàng)建出一個(gè)層，如圖5.44所示。

圖5.44在文檔窗口拖拽出層

2.層的操作（1）選擇層要對層進(jìn)行移動(dòng)、調(diào)整等操作之前，首先要選擇層。單擊層邊界，層的四周將出現(xiàn)帶有八個(gè)黑色控制點(diǎn)的黑線框，表明該層已經(jīng)已被選中。如果要選取多個(gè)層，可按下鍵盤上的Ctrl鍵再逐一單擊各層。（2）移動(dòng)層選擇要移動(dòng)的層，將光標(biāo)移動(dòng)到層的邊框上，當(dāng)光標(biāo)變成移動(dòng)箭頭，用鼠標(biāo)拖拽至目的地釋放鼠標(biāo)左鍵即可。（3）調(diào)整層大小選中要調(diào)整的層，將光標(biāo)移到層周邊的控制點(diǎn)，待光標(biāo)變成雙向箭頭時(shí)，拖拽即可。如果要精確調(diào)整層的大小，可通過層的屬性面板進(jìn)行設(shè)置。（4）激活層激活層即所謂當(dāng)前層。只有當(dāng)一個(gè)層被激活，才能對其進(jìn)行插入其它對象等操作。

3.層面板當(dāng)頁面中使用多個(gè)層時(shí)，其管理難度就增加了，這時(shí)可以利用層面板方便管理。選擇“窗口”菜單下的“其他”選項(xiàng)下的“層”命令或按F2鍵可打開層面板，如圖5.45所示。

圖3.45層面板

在層面板上可以設(shè)置以下參數(shù)。（1）改變層的可見性在層面板中要隱藏層（圖中的Layer1），先選擇該層，再單擊眼睛圖標(biāo)（睜開的眼睛表示層可見）即可。（2）改變層的堆疊順序在層面板中要改變層的順序，在Z列單擊數(shù)字并填入新的數(shù)據(jù)。如果發(fā)生層重疊，數(shù)字大的層在上面。

5.6.2層與表格的互相轉(zhuǎn)換使用層能夠更方便、精確地定位頁面元素，所以，在層中插入網(wǎng)頁元素，通過移動(dòng)，合理地進(jìn)行網(wǎng)頁排版布局，最后還可以把頁面的層布局轉(zhuǎn)換成表格布局，便于不支持使用層的瀏覽器瀏覽。如果要修改頁面布局，只要把表格布局再轉(zhuǎn)換層布局，又可以用鼠標(biāo)拖動(dòng)的方法重新布局排版。（1）把層轉(zhuǎn)換為表格①將層按一定順序排列（不允許有重迭）。②選中要轉(zhuǎn)化為表格的層。③選擇“修改”“轉(zhuǎn)換”“層到表格”命令。（2）把表格轉(zhuǎn)換為層①選取要轉(zhuǎn)化為層的表格。②

選擇“修改”“轉(zhuǎn)換”“表格到層”命令。5.7框

架

在瀏覽網(wǎng)頁的時(shí)候，我們常常會(huì)遇到這樣的一種導(dǎo)航結(jié)構(gòu)。就是超級連接做在左邊，單擊以后鏈接的目標(biāo)出現(xiàn)在右面?；蛘咴谏线厗螕翩溄又赶虻哪繕?biāo)，頁面出現(xiàn)在下面。要做出這樣的效果，必須使用框架。

5.7.1創(chuàng)建框架1．框架的結(jié)構(gòu)框架可以把瀏覽器窗口分成幾個(gè)獨(dú)立的部分，每部分顯示單獨(dú)的頁面，頁面的內(nèi)容是互相聯(lián)系的。如三框架網(wǎng)頁，頂端框架顯示網(wǎng)頁標(biāo)題，下面左右兩個(gè)框架，左邊顯示導(dǎo)航欄，右邊顯示超鏈接目標(biāo)。單擊左邊框架導(dǎo)航欄中的欄目按鈕，在右邊框架里顯示超級鏈接的對象。內(nèi)容非常多的網(wǎng)頁不宜采用框架式結(jié)構(gòu)，所以大網(wǎng)站中，幾乎所有的網(wǎng)頁都不是框架式網(wǎng)頁?？蚣苁骄W(wǎng)頁是由N+1個(gè)網(wǎng)頁組成的，N是框架數(shù)。例如：一個(gè)三框架的框架式網(wǎng)頁一共有4個(gè)網(wǎng)頁。N個(gè)網(wǎng)頁中只有一個(gè)是真正的框架網(wǎng)頁——框架集網(wǎng)頁。比如要打開一個(gè)框架網(wǎng)頁，就要雙擊框架集網(wǎng)頁（沒有網(wǎng)頁內(nèi)容只包含框架結(jié)構(gòu)）的名字。其他幾個(gè)網(wǎng)頁是各個(gè)框架中的內(nèi)容網(wǎng)頁，單擊內(nèi)容網(wǎng)頁的名字只能打開一個(gè)單獨(dú)的網(wǎng)頁。單個(gè)框架、框架集與內(nèi)容網(wǎng)頁的關(guān)系如圖5.46所示。

圖3.46框架結(jié)構(gòu)

框架（Frames）由框架集（Frameset）和單個(gè)框架（Frame）兩部分組成?？蚣芗且粋€(gè)定義框架結(jié)構(gòu)的網(wǎng)頁，包括網(wǎng)頁內(nèi)框架的數(shù)目、每個(gè)框架的大小、框架內(nèi)網(wǎng)頁的來源和框架的其它屬性等。單個(gè)框架包含在框架集中，是框架集的一部分，每個(gè)框架中都放置一個(gè)內(nèi)容網(wǎng)頁，組合起來就是瀏覽者看到的框架式網(wǎng)頁。2.創(chuàng)建框架創(chuàng)建框架總是要從一個(gè)已有的網(wǎng)頁上開始，其創(chuàng)建方法為：①新建一個(gè)普通網(wǎng)頁，命名后將其打開。②將對象面板切換到“框架”面板。③在面板上選擇一種預(yù)設(shè)置的框架結(jié)構(gòu)，網(wǎng)頁將按選擇的框架形式拆分。注意：每一種框架結(jié)構(gòu)中的淺藍(lán)色部分表示當(dāng)前打開的網(wǎng)頁。

3.編輯框架式網(wǎng)頁雖然框架式網(wǎng)頁把屏幕分割成幾個(gè)窗口，每個(gè)框架（窗口）中放置一個(gè)普通的網(wǎng)頁，但是編輯框架式網(wǎng)頁時(shí)，要把整個(gè)文檔窗口當(dāng)作一個(gè)網(wǎng)頁來編輯，插入的網(wǎng)頁元素根據(jù)所在位置分別處于不同框架的網(wǎng)頁中，框架的大小可以隨意修改。（1）改變框架大小當(dāng)要改變框架的大小時(shí)，可將光標(biāo)移到框架線處，用鼠標(biāo)光標(biāo)拖拽框架邊框即可隨意改變框架大小。（2）刪除框架用鼠標(biāo)把框架邊框拖拽到父框架的邊框上，可刪除框架。應(yīng)注意框架是不可以合并的。4．保存框架由于框架式網(wǎng)頁有多個(gè)網(wǎng)頁文件，所以保存框架式網(wǎng)頁要謹(jǐn)慎小心。保存框架式文件需要注意以下幾種情況：（1）首次保存框架網(wǎng)頁對于新創(chuàng)建的框架，應(yīng)選擇“文件”菜單下的“保存全部”命令。系統(tǒng)首先保存框架集文件（Frameset），然后依次保存各個(gè)框架頁（Frame），直到所有框架頁保存完為止。被保存的框架頁由黑白相間的選擇線包圍起來，很容易識(shí)別，如圖5.47所示。

如果框架網(wǎng)頁是在已建好的網(wǎng)頁中創(chuàng)建的（框架結(jié)構(gòu)中的淺蘭色部分），則保存已有網(wǎng)頁時(shí)按原來的名字保存，不會(huì)出現(xiàn)“另存為”對話框（不要以為少存了一個(gè)網(wǎng)頁）

（2）保存已經(jīng)存在的框架當(dāng)編輯已經(jīng)存在的框架頁文件時(shí)，可根據(jù)需要選擇保存的頁面。（1）保存所有框架頁文件：選擇“文件”菜單下的“保存全部”命令。（2）只保存框架集文件（Frameset）：選擇“文件”菜單下的“框架另存為模板”命令。（3）保存當(dāng)前網(wǎng)頁：選擇“文件”菜單下的“保存框架”命令

圖5.47保存框架網(wǎng)頁

5．框架屬性設(shè)置（1）選擇框架在頁面中加入框架，就相當(dāng)于把文檔窗口分成了幾個(gè)小窗口，每個(gè)窗口（框架）都有自己的屬性。因此，為了設(shè)置框架的屬性，必須先選中框架。選擇框架最簡單方法是，按住鍵盤上的Alt鍵，單擊文檔窗口中的某個(gè)框架，即可選擇該框架。當(dāng)一個(gè)框架被選擇時(shí)，它的邊框帶有點(diǎn)化線樣的輪廓。（2）設(shè)置框架屬性選中框架后，就可以對框架屬性進(jìn)行設(shè)置，包括框架名稱、源文件、空白邊距、滾動(dòng)條、重置大小和邊框?qū)傩缘取?/p>

5.7.2在框架中使用超級鏈接在框架式網(wǎng)頁中制作超級鏈接時(shí)，一定要設(shè)置鏈接的目標(biāo)屬性，即確定鏈接的目標(biāo)文檔顯示窗口問題。當(dāng)將某框架中的一段文本或一幅圖像鏈接到一目標(biāo)時(shí)，則其屬性面板的“目標(biāo)”編輯框相對于普通頁面將有所變化，除了原有的_blank、_parent、_self和_top外，還包括各框架的名子。如圖5.48所示的框架，其屬性面板的“目標(biāo)”編輯框中的項(xiàng)目內(nèi)容和含義如下：_blank：目標(biāo)內(nèi)容顯示在新窗口中。_parent：目標(biāo)內(nèi)容顯示在父框架集或包含該鏈接的框架窗口中。_self：目標(biāo)內(nèi)容顯示在原窗口中（默認(rèn)窗口無須指定）。_top：目標(biāo)內(nèi)容顯示在整個(gè)瀏覽器窗口并刪除所有框架。_mainFrame：目標(biāo)內(nèi)容顯示在名為mainFrame的框架中。_leftFrame：目標(biāo)內(nèi)容顯示在名為leftFrame的框架中。_MainFrame：目標(biāo)內(nèi)容顯示在名為MainFrame的框架中。

圖5.48不同的目標(biāo)框架

5.7.3制作如圖框架式網(wǎng)頁我們通過一個(gè)實(shí)例制作過程，來了解框架網(wǎng)頁制作過程，以左右框架結(jié)構(gòu)為例。(1)單擊“文件”菜單中的“新建”，彈出“新建文檔”對話框如圖5.49所示。

圖5.49新建文檔對話框

（2）確定后，即可將當(dāng)前文檔設(shè)置為左右型的框架頁面。如圖5.50所示。從右側(cè)浮動(dòng)“框架”面板可以知道，左框架名為：leftFrame，右框架名為：mainFrame，當(dāng)然您可以通過框架屬性面板對框架重新命名，如圖5.51所示。

圖5.50建立框架

圖5.51框架面板

（3）保存框架。選擇“文件”菜單，單擊“保存全部”。系統(tǒng)彈出對話框。這時(shí)，保存的是一個(gè)框架結(jié)構(gòu)文件，我們按照慣例都命名為main.htm，直到三個(gè)頁面保存完畢。（4）單擊左側(cè)框架使之選中，在其中插入一個(gè)6行1列的表格，在表格中插入鏈接文字。（5）下面我們要實(shí)現(xiàn)單擊左邊的超級鏈接，對應(yīng)的頁面出現(xiàn)在右邊。在左邊的頁面中做超級鏈接，指向一個(gè)已經(jīng)存在的頁面。注意做好鏈接以后，要在目標(biāo)欄中設(shè)置為mainFrame。如圖所示。

（6）在左側(cè)導(dǎo)航條中，將文字與相應(yīng)的網(wǎng)頁建立起超級鏈接。例如：“第一張圖片”鏈接圖片文件夾中第一張圖片。單擊屬性面板“目標(biāo)”項(xiàng)的下拉菜單，選擇mainframe。創(chuàng)建完成后，保存文檔，然后在瀏覽器中瀏覽制作的框架頁面，如圖所示。

框架有很多優(yōu)點(diǎn)，但是若理解不很透徹，容易搞混。如果網(wǎng)站頁面不多，可以創(chuàng)建一個(gè)不使用框架的Web頁面來完成框架的功能。例如，如果想讓導(dǎo)航條顯示在頁面的左側(cè)或頂部，既可以使用框架頁面，也可以在每一頁包含該導(dǎo)航條而不使用框架。

5.8使用CSS樣式

5.8.1CSS樣式1．CSS樣式簡介CSS是CascadingStyleSheets，即“層疊樣式表”的簡稱。利用CSS樣式不僅可以對網(wǎng)頁中的文本進(jìn)行精確的格式化控制，如：設(shè)置字體、字號、顏色、背景、字符間距、行距、段落縮進(jìn)等，還可以設(shè)置網(wǎng)頁的背景顏色或圖片，設(shè)置各種鏈接動(dòng)態(tài)效果（改變顏色、不出現(xiàn)下劃線等）。如果把CSS樣式保存為外部文件（CSS樣式表），采用外部鏈接方式，可以控制多個(gè)網(wǎng)頁。與HTML格式不同的是，對CSS樣式進(jìn)行修改時(shí)，應(yīng)用該樣式的文本格式會(huì)自動(dòng)發(fā)生改變。目前使用CSS樣式來控制網(wǎng)頁外觀已經(jīng)逐漸成為主流。CSS樣式有三種類型：（1）自定義樣式與Word中使用的樣式類似，可以在任何文本上應(yīng)用自定義CSS樣式。如果網(wǎng)頁中應(yīng)用了“自定義樣式”，在其HTML代碼中會(huì)出現(xiàn)class=""的字樣，引號內(nèi)是使用的自定義樣式的名字。（2）HTML標(biāo)記樣式對現(xiàn)有HTML標(biāo)記的重新定義。創(chuàng)建或改變這類樣式時(shí)，所有應(yīng)用該標(biāo)記的文本會(huì)自動(dòng)更新。如：利用CSS重新定義Paragraph，標(biāo)記<p>代表的格式。（3）樣式選擇器：是一種特殊類型的樣式，專門設(shè)置鏈接文字的格式屬性。樣式選擇器共有四種：a:link：正常狀態(tài)下鏈接文字的樣式。a:active：當(dāng)前被激活的鏈接的樣式。a:visited：已訪問過的鏈接的樣式。a:hover：鼠標(biāo)放置在鏈接文字上的文字樣式。其中最后一種a:hover最常用也最有用。對文本的手工格式化會(huì)覆蓋CSS樣式，所以應(yīng)用CSS樣式之前，應(yīng)刪除手工設(shè)置的HTML格式或HTML樣式。

2創(chuàng)建CSS樣式創(chuàng)建、編輯和應(yīng)用CSS樣式都要依賴CSS樣式面板，單擊“窗口”菜單中的“CSS樣式”命令，打開CSS樣式面板，如圖所示。

1.創(chuàng)建CSS樣式網(wǎng)頁中的CSS樣式有兩種形式，一種是將CSS樣式直接插入在網(wǎng)頁HTML代碼中，該CSS樣式只對當(dāng)前網(wǎng)頁有效；另一種是將CSS樣式保存為一個(gè)單獨(dú)的文件——CSS樣式表，用鏈接的方式應(yīng)用于網(wǎng)頁。因?yàn)镃SS樣式表是獨(dú)立的，所以一個(gè)CSS樣式文件可以控制多個(gè)網(wǎng)頁。創(chuàng)建CSS樣式的過程實(shí)際上就是確定CSS樣式的形式、類型、格式的過程。單擊CSS樣式面板下角的新建樣式按鈕，打開“新建樣式”對話框，如圖所示

（1）確定CSS樣式的形式在對話框下方的“定義在”項(xiàng)中，選擇“新建樣式表文件”（缺省）是建立單獨(dú)的CSS樣式文件，選擇“僅對該文檔”是在當(dāng)前網(wǎng)頁中插入CSS樣式。如果選擇“新建樣式表文件”，則會(huì)彈出保存文件對話框，要輸入CSS樣式表的文件名和保存路徑。（2）選擇樣式類型“新建樣式”對話框中的“類型”項(xiàng)用于選擇樣式類型?！皠?chuàng)建自定義樣式”：建立自定義樣式，對話框如圖5.55所示，此時(shí)要在“名稱”項(xiàng)中修改自定義樣式的名稱。“重定義HTML標(biāo)簽”：建立HTML標(biāo)記樣式，則：“名稱”項(xiàng)變?yōu)椤皹?biāo)簽”，如圖5.56所示，要在對話框中選擇樣式的標(biāo)記。

圖5.56選擇HTML標(biāo)簽樣式

圖5.57設(shè)置樣式選擇器

“使用CSS選擇器”：創(chuàng)建樣式選擇器，“標(biāo)簽”項(xiàng)又變?yōu)椤斑x擇器”項(xiàng)，如圖5.57所示，可以在四種選項(xiàng)中選擇。（3）設(shè)置CSS樣式的格式單擊“確定”后，會(huì)彈出樣式設(shè)定對話框如圖所示，在這里可以完成創(chuàng)建CSS樣式的格式設(shè)置。左側(cè)的“分類”窗口為樣式的類型，選擇一種類型后，在“類型”一側(cè)設(shè)置相應(yīng)的參數(shù)。

5.8.2編輯CSS樣式文件1．編輯CSS單擊CSS面板上的編輯按鈕，打開CSS樣式表編輯窗口，如圖所示。這個(gè)窗口包括了編輯CSS樣式表的所有操作。如果樣式列表中沒有CSS樣式文件，可以選擇“鏈接”或“新建”；如果列表中有CSS樣式文件，選擇后可以單擊“編輯”、“復(fù)制”、“刪除”，對樣式文件進(jìn)行相應(yīng)的編輯；只是不能復(fù)制鏈接的樣式文件，完成編輯后單擊“完成”確認(rèn)。

單擊樣式表編輯窗口中的“編輯”按鈕，會(huì)彈出另一個(gè)對話框，如圖5.60所示，左側(cè)的列表框中列出了樣式表文件中所有的CSS樣式。單擊“新建”可以在CSS樣式表中添加新樣式，在列表中選擇一個(gè)CSS樣式，可以對其進(jìn)行“編輯”、“復(fù)制”或“刪除”操作。完成編輯操作后，單擊“保存”按鈕，將結(jié)果保存到CSS樣式表中。

2．快速操作CSS樣式單擊CSS面板上右上方的擴(kuò)展按鈕，會(huì)彈出一個(gè)如圖所示菜單。菜單中的分割線將命令分為三個(gè)部分，上部為樣式操作命令，中部為樣式文件操作命令，下部為面板操作。當(dāng)選擇一個(gè)CSS樣式，再選擇菜單上半部分的編輯命令，可以直接對選中的CSS樣式進(jìn)行編輯。分割線下面的一組命令可以對整個(gè)CSS樣式表文件進(jìn)行編輯。

3．鏈接外部CSS樣式文件使用CSS樣式最有效的方法，就是建立外部CSS樣式表文件。在網(wǎng)頁中只要鏈接這個(gè)樣式表文件，就可以直接應(yīng)用其中的CSS樣式。這樣只要在樣式表中設(shè)置一次CSS樣式，所有的網(wǎng)頁都可以共享，極大地簡化了網(wǎng)頁制作過程。如果在樣式表中修改了CSS樣式，則應(yīng)用了該樣式的網(wǎng)頁隨之自動(dòng)更新，使用CSS樣式表文件，簡單、方便、快捷。5.8.3在網(wǎng)頁中應(yīng)用CSS樣式1．使用方法在三種CSS樣式類型中，HTML標(biāo)記樣式和樣式選擇器是自動(dòng)應(yīng)用于網(wǎng)頁的，應(yīng)用CSS樣式主要指的是應(yīng)用自定義樣式。應(yīng)用自定義CSS樣式的步驟如下。（1）將光標(biāo)放置在要應(yīng)用樣式的區(qū)域。（2）打開CSS面板，在CSS面板上選擇要應(yīng)用的自定義樣式。（3）單擊“應(yīng)用”按鈕，使“應(yīng)用”項(xiàng)處于選中狀態(tài)。

2．應(yīng)用實(shí)例下面通過一個(gè)實(shí)際例子來介紹怎樣應(yīng)用CSS樣式來修飾網(wǎng)頁。通過介紹，使同學(xué)們掌握CSS樣式的相關(guān)操作。操作步驟如下：（1）創(chuàng)建外部CSS樣式表文件在CSS面板上單擊新建按鈕，打開“新建樣式”對話框，如圖，在“名稱”欄中輸入CSS樣式的名稱如：.y2；在“類型”項(xiàng)中選擇“創(chuàng)建自定義樣式”；在“定義在”項(xiàng)中選擇“新建樣式文件”，單擊“確定”。

在彈出的對話框，如圖所示。輸入CSS樣式文件名稱：aaa，選擇保存路徑：“C：/Inetpub/wwwroot/fileweb/aaa.css”，單擊“保存”。

（2）編輯CSS樣式單擊“保存”按鈕后，建立了CSS樣式表文件后，彈出CSS樣式設(shè)置窗口，我們可以設(shè)置自定義樣式.y2的格式，如圖所示，單擊“確定”。

添加新樣式：創(chuàng)建了樣式文件后，就可以繼續(xù)向文件中添加其他新的樣式。例如，想再新建一個(gè)HTML標(biāo)記樣式，操作如下：單擊CSS面板上的新建按鈕，在彈出的“新建樣式”對話框的“類型”項(xiàng)中選擇“重定義HTML標(biāo)簽”，并在“標(biāo)簽”項(xiàng)中選擇p，在CSS樣式格式設(shè)置對話框中，設(shè)置具體參數(shù)。（1）鏈接CSS樣式文件將樣式表文件與網(wǎng)頁相鏈接的方法是：在站點(diǎn)中打開想使用樣式的網(wǎng)頁文件，再單擊CSS面板上的按鈕，彈出對話框，如圖所示。在打開的對話框中，選擇樣式文件目錄下的CSS樣式文件“aaa.css”，單擊“選擇”按鈕，將外部的CSS樣式表鏈接到當(dāng)前網(wǎng)頁。

（4）應(yīng)用CSS樣式修飾網(wǎng)頁文本將光標(biāo)放在標(biāo)題中，在屬性面板上選擇“格式”項(xiàng)中的“標(biāo)題1”。將光標(biāo)定位在正文段落中，在屬性面板上選擇“格式”項(xiàng)中的“段落”。用光標(biāo)選中最后一行字，單擊CSS面板上的樣式y(tǒng)2。經(jīng)過上述操作，網(wǎng)頁中的文本變?yōu)镃SS樣式表中設(shè)置的樣式格式。（5）設(shè)置鏈接效果下面的操作將設(shè)置動(dòng)態(tài)的超級鏈接效果。頁面中有鏈接的文字變?yōu)榧t色，沒有下劃線，當(dāng)鼠標(biāo)移動(dòng)到鏈接上時(shí)，文字變?yōu)樗{(lán)色，并帶有下劃線。①設(shè)置鏈接文字樣式新建CSS樣式，選擇“重定義HTML標(biāo)簽”類型，在“標(biāo)簽”項(xiàng)中輸入a，在“定義在”項(xiàng)中選擇“僅對該文檔”，如圖5.66所示。

圖5.66新建標(biāo)記型CSS樣式

單擊“確定”，在彈出的“樣式定義”對話框中，設(shè)置顏色為#CC3366，并且選中“修飾”項(xiàng)最下面的“無”，如圖所示。設(shè)置后單擊“確定”按鈕。

②設(shè)置鏈接效果新建CSS樣式，選擇CSS選擇器類型，在“選擇”項(xiàng)中選擇a：hover，在Define項(xiàng)中選擇“僅對該文檔”，如圖所示。

單擊“確定”，在彈出的“樣式定義”對話框中，設(shè)置顏色為藍(lán)色，并選中“修飾”項(xiàng)最上面的“下劃線”，如圖所示。

在上面的操作中，如果建立樣式時(shí)不選擇“僅對該文檔”，則所創(chuàng)建的樣式保存在CSS樣式表文件中，其他鏈接了該樣式表的網(wǎng)頁，會(huì)自動(dòng)應(yīng)用這些樣式，獲得同樣的效果。經(jīng)過上述操作，網(wǎng)頁外觀發(fā)生了改變。

5.9行為

一般說來，動(dòng)態(tài)網(wǎng)頁是通過JavaScript或基于JavaScript的DHTML代碼來實(shí)現(xiàn)的。包含JavaScript腳本的網(wǎng)頁，還能夠?qū)崿F(xiàn)用戶與頁面的簡單交互。但是編寫腳本既復(fù)雜又專業(yè)需要專門學(xué)習(xí)，幸運(yùn)的是Dreamweaver提供了一種稱為“Behavior”（行為）的機(jī)制。雖然行為（Behavior）也是基于JavaScript來實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁和交互的，但卻不需書寫任何代碼。在可視化環(huán)境中按幾個(gè)按鈕，填幾個(gè)選項(xiàng)就可以實(shí)現(xiàn)豐富的動(dòng)態(tài)頁面效果，實(shí)現(xiàn)人與頁面的簡單交互。為實(shí)現(xiàn)網(wǎng)頁動(dòng)態(tài)效果，Dreamweaver還提供了另一個(gè)途徑——使用時(shí)間線，一個(gè)類似視頻編輯的功能，可以很方便地實(shí)現(xiàn)一些簡單的動(dòng)畫效果。此外，插入Flash動(dòng)畫、插入Java小程序是實(shí)現(xiàn)動(dòng)態(tài)效果最簡單、最直接的手段。本節(jié)主要介紹怎樣