PART 1 實(shí)例入門篇

Chapter 01 準(zhǔn)備工作與創(chuàng)建站點(diǎn)

1.1 相關(guān)知識介紹

雖然Dreamweaver 8 這款專業(yè)的 HTML 編輯器為用戶提供了手工編寫 HTML 代碼和可視化編輯界面兩種創(chuàng)作Web頁的方式，使用戶不需要掌握復(fù)雜的源代碼語言就可開發(fā)出專業(yè)的網(wǎng)頁，但是，作為網(wǎng)頁制作者仍然需要了解相關(guān)的網(wǎng)絡(luò)知識，否則無法充分感受Dreamweaver 8所帶來的方便與快捷。

1.1.1 IP地址與域名

萬維網(wǎng)上連接著數(shù)百萬臺計(jì)算機(jī)，如果想同某臺計(jì)算機(jī)通信，就必須知道該機(jī)的地址。萬維網(wǎng)是通過IP地址來標(biāo)識網(wǎng)上每臺計(jì)算機(jī)的，如同用房間號標(biāo)識房間一樣。IP地址由4個(gè)字節(jié)的數(shù)字組成，可以標(biāo)識232臺計(jì)算機(jī)。要讓萬維網(wǎng)用戶記住計(jì)算機(jī)的IP地址實(shí)屬不易，因此，人們給每臺計(jì)算機(jī)賦予一個(gè)由英文字母和數(shù)字組成的主機(jī)名，這就是域名。由于計(jì)算機(jī)只識別IP地址，因此當(dāng)用戶使用域名時(shí)，萬維網(wǎng)上的域名服務(wù)器還要將其解析為IP地址。

域名是分層的。頂級域分為兩類，分別為地理和機(jī)構(gòu)，如cn表示中國、jp表示日本、com表示商業(yè)機(jī)構(gòu)、edu表示教育機(jī)構(gòu)、net表示網(wǎng)絡(luò)機(jī)構(gòu)、org表示非贏利組織等。得到頂級域的管理權(quán)后，可以將其管理依次向下分為二級域和三級域，一般在三級域下是主機(jī)名。比如，通過域名www.sina.com.cn可以知道，要訪問的計(jì)算機(jī)是sina.com.cn域下的www服務(wù)器。

1.1.2 本地計(jì)算機(jī)和Internet服務(wù)器

所謂Internet服務(wù)器是指提供Internet服務(wù)的計(jì)算機(jī)，它可提供WWW服務(wù)、FTP服務(wù)、E-mail服務(wù)等，我們現(xiàn)在談的主要是WWW服務(wù)器。WWW服務(wù)器通常是指安裝了Internet信息服務(wù)軟件的計(jì)算機(jī)，它以客戶機(jī)/服務(wù)器模式運(yùn)行，主要用于存儲瀏覽者所瀏覽的Web站點(diǎn)的頁面及處理瀏覽者上傳信息的服務(wù)器程序。常見的Web服務(wù)器軟件包括Microsoft的IIS和PWS。

對于瀏覽網(wǎng)頁的瀏覽者來說，他們使用的計(jì)算機(jī)被稱為本地計(jì)算機(jī)。本地計(jì)算機(jī)和Internet服務(wù)器間通過撥號等多種方式進(jìn)行連接，實(shí)現(xiàn)相互之間的通信。本地計(jì)算機(jī)的瀏覽者只需在瀏覽器軟件的地址欄中輸入WWW服務(wù)器的名稱，就可輕松實(shí)現(xiàn)對網(wǎng)頁的瀏覽。

1.1.3 瀏覽器

萬維網(wǎng)（Web）的用戶要想“閱讀”網(wǎng)頁中的信息，就必須安裝瀏覽器。瀏覽器安裝在客戶端，是用來查看萬維網(wǎng)中超文本的一種工具。常用的Web瀏覽器有Netscape 公司的Netscape Navigator和微軟公司的Microsoft Internet Explorer（IE）。

雖然Netscape Navigator和Microsoft Internet Explorer是不同公司的瀏覽器軟件，但界面和功能大致相同。Netscape瀏覽器界面如圖1-1、圖1-2所示，Microsoft瀏覽器界面如圖1-3、圖1-4所示。

下面介紹瀏覽器的界面。IE瀏覽器窗口包括標(biāo)題欄、菜單欄、地址欄、常用工具欄和瀏覽區(qū)幾個(gè)部分，如圖1-5所示。其中，用戶經(jīng)常使用的是地址欄、常用工具欄和瀏覽區(qū)三個(gè)部分。

地址欄：通過在地址欄中輸入U(xiǎn)RL地址，用戶可以打開世界各地的網(wǎng)頁。

常用工具欄：將常用的菜單命令以按鈕的形式顯示。用戶通過單擊按鈕便可完成最基本的操作，如向前或向后翻頁、刷新網(wǎng)頁、打開默認(rèn)主頁、停止下載網(wǎng)頁、打印網(wǎng)頁等。

瀏覽區(qū)：顯示用戶正瀏覽的網(wǎng)頁內(nèi)容。

1.1.4 上傳和下載

將資源從Internet服務(wù)器復(fù)制到本地計(jì)算機(jī)的過程稱為下載。而將資源從本地計(jì)算機(jī)復(fù)制到Internet服務(wù)器的過程稱為上傳。

在日常生活中進(jìn)行上傳和下載的工作很多。比如，瀏覽網(wǎng)頁的過程就是一個(gè)下載過程。當(dāng)瀏覽者在瀏覽器上輸入網(wǎng)址后，就將請求發(fā)送到WWW服務(wù)器。WWW服務(wù)器接到請求后，將網(wǎng)頁下載到瀏覽者的本地計(jì)算機(jī)，這樣，瀏覽者就可以看到要瀏覽的網(wǎng)頁了。

除了下載信息外，我們還常將本地計(jì)算機(jī)資源上傳到網(wǎng)上，讓大家共享。文件的上傳和下載可利用專用工具進(jìn)行操作，如CUTEFTP等。Dreamweaver 8內(nèi)置了強(qiáng)大的FTP功能，幫助用戶實(shí)現(xiàn)站點(diǎn)文件的上傳和下載。

1.1.5 超文本

超文本不同于普通文本，是一種使用戶與計(jì)算機(jī)之間進(jìn)行密切交流的文本顯示技術(shù)。超文本技術(shù)是通過對有關(guān)詞匯做鏈接，使用戶輕松地在相關(guān)網(wǎng)頁中查看信息的一種技術(shù)。通常超級鏈接的文本帶有下劃線或與其他文字的顏色不同，當(dāng)用戶將鼠標(biāo)放到超文本上時(shí)，鼠標(biāo)呈手形圖案，文字的顏色也發(fā)生改變。當(dāng)用戶單擊超文本后，文本的顏色會(huì)改變。

1.1.6 HTML與HTTP

在Web服務(wù)中，信息一般是使用HTML格式以超文本和超媒體方式傳送的，所使用的Internet協(xié)議是HTTP協(xié)議。

HTML的全稱是Hypertext Markup Language，即超文本標(biāo)記語言，是用于WWW上文檔的格式化語言。使用HTML語言可以創(chuàng)建超文本文檔，該文檔可以從一個(gè)平臺移植到另一個(gè)平臺。HTML文件是帶有嵌入代碼的ASCII文本文件，這種嵌入代碼由標(biāo)記表示，它用來表示格式化和超文本鏈接。HTML文件的內(nèi)容通過一個(gè)頁面展示出來，不同頁面通過超鏈接關(guān)聯(lián)起來。

HTTP的全稱是Hypertext Transfer Protocol，即超文本傳輸協(xié)議。HTTP協(xié)議是用于訪問WWW上信息的客戶機(jī)/服務(wù)器協(xié)議。HTTP協(xié)議建立在TCP/IP協(xié)議的應(yīng)用層之上，其實(shí)現(xiàn)過程一般包括：客戶端與指定的服務(wù)器建立連接；由客戶端提出請求并發(fā)送到服務(wù)器；服務(wù)器收到客戶端的請求后，取得相關(guān)對象并發(fā)送到客戶端；在客戶端接受完對象后，關(guān)閉連接。

1.1.7 統(tǒng)一資源定位符

URL即統(tǒng)一資源定位符，是唯一一種能標(biāo)識Internet上計(jì)算機(jī)、目錄和文件位置的命名規(guī)則。URL通常也稱為URL地址、網(wǎng)站地址或網(wǎng)址，其一般形式可以表示為：【方式】://【主機(jī)名】:【端口】/【目錄】/.../【文件名】。

【方式】：指定訪問該資源所使用的Internet協(xié)議，常用協(xié)議如下。

◎ http：超文本傳輸協(xié)議

◎ ftp：文件傳輸協(xié)議

◎ mailto：電子郵件地址

◎ news：網(wǎng)絡(luò)新聞組

◎ telnet：遠(yuǎn)程登錄服務(wù)

◎ file：本地文件

【主機(jī)名】：指定Web服務(wù)器的IP地址或域名地址。IP地址是唯一標(biāo)識網(wǎng)絡(luò)上某一主機(jī)的地址，它將計(jì)算機(jī)標(biāo)識為一個(gè)32位地址，可以用帶句點(diǎn)的十進(jìn)制數(shù)來表示。域名地址也稱為DNS地址，它由四個(gè)部分組成，常用形式為“機(jī)器名．單位名．單位類別．國別”。

【端口】：指定Web服務(wù)器在該主機(jī)上所使用的TCP端口，默認(rèn)端口是80，通常不需要指定，只有當(dāng)Web服務(wù)器不使用默認(rèn)端口時(shí)才需要指定端口。

【目錄】：可以是Web服務(wù)器上信息資源所在的目錄。

【文件名】：由基本文件名和擴(kuò)展名兩部分組成，如index.htm等。

1.1.8 Web頁與Web站點(diǎn)

Web頁就是World Wide Web文檔，通常稱為網(wǎng)頁。Web頁一般由相關(guān)的文本、圖像、聲音、動(dòng)畫、視頻以及腳本命令等組成，位于特定計(jì)算機(jī)的特定目錄中，其位置可以根據(jù)URL確定。

一般的Web站點(diǎn)由一組相關(guān)的Web頁和其他文件組成，這些文件存儲在Web服務(wù)器上。當(dāng)用戶訪問一個(gè)Web站點(diǎn)時(shí)，該站點(diǎn)中有一個(gè)頁面總是被首先打開，該頁面稱為首頁或主頁。用戶在瀏覽器中輸入要瀏覽網(wǎng)頁的URL地址，打開相應(yīng)的Web頁。

Web頁的名稱由用戶任意命名，一般用表示網(wǎng)頁功能的英文單詞命名。每一個(gè)站點(diǎn)必須有一個(gè)主頁，主頁的名稱規(guī)定為 index.htm、index.html、index.asp、default.asp、default.htm或default.html。用戶在瀏覽器中瀏覽主頁時(shí)，URL地址可以只寫協(xié)議和Web服務(wù)器的名字，主頁名可以忽略。比如，瀏覽新浪網(wǎng)的主頁時(shí)，只要在瀏覽器的地址欄輸入http://www.sina.com.cn，即可自動(dòng)打開新浪網(wǎng)的首頁。

1.1.9 靜態(tài)網(wǎng)頁與動(dòng)態(tài)網(wǎng)頁

靜態(tài)網(wǎng)頁是標(biāo)準(zhǔn)的HTML文件，其文件擴(kuò)展名是．htm或．html。它可以包含HTML標(biāo)記、文本、Java小程序、客戶端腳本以及客戶端ActiveX控件，但這種網(wǎng)頁不包含任何服務(wù)器端腳本，該頁中的每一行HTML代碼都是在上傳到Web服務(wù)器前由網(wǎng)頁設(shè)計(jì)人員編寫的，在上傳到Web服務(wù)器后便不再發(fā)生任何更改，所以稱之為靜態(tài)網(wǎng)頁。

靜態(tài)網(wǎng)頁可以包含翻轉(zhuǎn)圖像、GIF動(dòng)畫或FIash影片等，具有很強(qiáng)的動(dòng)感效果。此處所說的靜態(tài)網(wǎng)頁是指在發(fā)送到瀏覽器時(shí)不再進(jìn)行修改的Web頁，其最終內(nèi)容是由設(shè)計(jì)人員事先確定的。

靜態(tài)網(wǎng)頁的處理流程如圖1-6所示。

（1）當(dāng)用戶單擊Web頁上的某個(gè)鏈接時(shí)，瀏覽器向Web服務(wù)器發(fā)送請求。

（2）Web服務(wù)器收到該請求后，通過文件擴(kuò)展名．htm或．html判斷出是HTML文件請求，并從磁盤或存儲器中獲取相關(guān)的HTML文件。

（3）Web服務(wù)器將HTML文件發(fā)送到瀏覽器，由瀏覽器對該HTML文件進(jìn)行解讀，并將結(jié)果顯示在瀏覽器窗口中。

動(dòng)態(tài)網(wǎng)頁不是指網(wǎng)頁上有動(dòng)態(tài)的效果，而是指具有瀏覽者與后臺服務(wù)器進(jìn)行信息交互的能力以及自動(dòng)更新網(wǎng)頁中信息的能力。因此由網(wǎng)頁設(shè)計(jì)人員編寫，上傳到Web服務(wù)器后可以被修改的網(wǎng)頁，稱為動(dòng)態(tài)網(wǎng)頁。動(dòng)態(tài)網(wǎng)頁的執(zhí)行過程如圖1-7所示。

（1） 瀏覽器向Web服務(wù)器發(fā)送一個(gè)請求，要求服務(wù)器上的某個(gè)動(dòng)態(tài)網(wǎng)頁對上傳的數(shù)據(jù)進(jìn)行處理。

（2） Web服務(wù)器收到該請求，運(yùn)行動(dòng)態(tài)網(wǎng)頁中的應(yīng)用程序。

（3） 若動(dòng)態(tài)網(wǎng)頁的命令需要對后臺數(shù)據(jù)庫進(jìn)行操作，還要通過數(shù)據(jù)庫驅(qū)動(dòng)程序啟動(dòng)數(shù)據(jù)庫。服務(wù)器通過數(shù)據(jù)庫操作指令處理數(shù)據(jù)庫。

（4） 服務(wù)器將處理結(jié)果以靜態(tài)網(wǎng)頁的方式下傳到用戶瀏覽器端。

（5） 用戶端的瀏覽器對該靜態(tài)網(wǎng)頁進(jìn)行解釋，并將結(jié)果顯示在瀏覽器窗口中。

動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁之間的區(qū)別在于：動(dòng)態(tài)網(wǎng)頁中的某些腳本只能在Web服務(wù)器上運(yùn)行，而靜態(tài)網(wǎng)頁中的任何腳本都不能在Web服務(wù)器上運(yùn)行；動(dòng)態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁文件擴(kuò)展名不同，對于動(dòng)態(tài)網(wǎng)頁來說，其文件擴(kuò)展名不再是．htm或．html，而是與所使用的Web應(yīng)用開發(fā)技術(shù)有關(guān)，例如，使用ASP技術(shù)時(shí)文件擴(kuò)展名是．a(chǎn)sp等。

當(dāng)Web服務(wù)器接收到對靜態(tài)網(wǎng)頁的請求時(shí)，服務(wù)器將該頁發(fā)送到請求瀏覽器，而不進(jìn)行進(jìn)一步的處理；當(dāng)Web服務(wù)器接收到對動(dòng)態(tài)網(wǎng)頁的請求時(shí)，它將做出不同的反應(yīng)，首先將該頁傳遞給一個(gè)稱為應(yīng)用程序服務(wù)器的特殊軟件擴(kuò)展，然后由這個(gè)特殊軟件負(fù)責(zé)完成頁。應(yīng)用服務(wù)器軟件與Web服務(wù)器軟件通常在同一臺計(jì)算機(jī)上安裝、運(yùn)行。使用不同的Web開發(fā)技術(shù)創(chuàng)建動(dòng)態(tài)網(wǎng)頁時(shí)，所用的應(yīng)用程序服務(wù)器軟件也是各不相同的。

1.2 網(wǎng)上安家

做網(wǎng)站的目的是希望其他用戶能通過萬維網(wǎng)查看自己發(fā)布的信息，因此，站點(diǎn)的所有網(wǎng)頁制作完成后，就需要將其上傳到Web服務(wù)器，即在萬維網(wǎng)上安個(gè)“家”。這項(xiàng)工作可通過三種方式實(shí)現(xiàn)。

◎ 自行購買和建設(shè)服務(wù)器主機(jī)，然后向網(wǎng)絡(luò)接入服務(wù)提供商申請連接Internet的專線和網(wǎng)址。但服務(wù)器主機(jī)和專線的租金很貴，一般的小公司和個(gè)人不使用此方法。

◎ 自行購買和建設(shè)服務(wù)器主機(jī)，但不租用專線，服務(wù)器放在網(wǎng)絡(luò)接入服務(wù)提供商處托管，通過撥號、寬帶等方式上網(wǎng)傳送網(wǎng)站。目前大多數(shù)企業(yè)采用這種方式。

◎ 租用網(wǎng)絡(luò)接入服務(wù)提供商提供的主機(jī)硬盤空間，由網(wǎng)絡(luò)接入服務(wù)提供商負(fù)責(zé)硬件和技術(shù)人員的費(fèi)用，以及連接Internet的專線月租。這是最簡單的方式，一般小公司和個(gè)人用戶多采用此方法。

1.3 Dreamweaver 8 的概述

Dreamweaver 8 是一款專業(yè)的 HTML 編輯器，用于對 Web 站點(diǎn)、Web 頁和 Web 應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。無論用戶喜歡手工編寫 HTML 代碼時(shí)的駕馭感，還是偏愛可視化的編輯環(huán)境， Dreamweaver 都會(huì)為用戶提供眾多功能強(qiáng)大的工具，使用戶擁有更加完美的 Web 創(chuàng)作體驗(yàn)。特別是Dreamweaver 8無需用戶掌握復(fù)雜的源代碼語言，就可開發(fā)出專業(yè)的網(wǎng)絡(luò)應(yīng)用程序。

Dreamweaver 8具有如下特點(diǎn)：

◎ 簡潔高效的設(shè)計(jì)和開發(fā)界面

◎ 增強(qiáng)的源代碼編輯功能

◎ 動(dòng)態(tài)數(shù)據(jù)庫開發(fā)

1.3.1 簡潔高效的設(shè)計(jì)和開發(fā)界面

Dreamweaver 8的操作環(huán)境簡潔明快，可大大提高設(shè)計(jì)效率。

1．友善的開始頁面

啟動(dòng)Dreamweaver 8后首先看到的畫面是開始頁面，如圖1-8所示。供用戶選擇新建文件的類型，或打開已有的文檔等。

對于老用戶可能不需要開始頁面，可執(zhí)行菜單【編輯】→【首選參數(shù)】命令，彈出【首選參數(shù)】對話框，取消勾選【顯示起始頁】復(fù)選框，如圖1-9所示。單擊【確定】按鈕完成設(shè)置。再次啟動(dòng)Dreamweaver 8，將不再顯示開始頁面。

2．不同風(fēng)格的界面

Dreamweaver 8的操作界面新穎淡雅，布局緊湊，為用戶提供了一個(gè)輕松、愉悅的開發(fā)環(huán)境。

第一次運(yùn)行Dreamweaver 8，會(huì)彈出如圖1-10所示的對話框，讓用戶選擇操作界面的風(fēng)格。用戶可選擇【設(shè)計(jì)器】單選項(xiàng)，選擇設(shè)計(jì)風(fēng)格。以后再運(yùn)行Dreamweaver 8，將使用此風(fēng)格的界面。

若用戶想修改操作界面的風(fēng)格，切換到自己熟悉的開發(fā)環(huán)境，可執(zhí)行菜單【窗口】→【工作區(qū)布局】命令，彈出其子菜單，如圖1-11所示。在子菜單中執(zhí)行【編碼器】或【設(shè)計(jì)器】命令，選擇一種界面風(fēng)格，頁面會(huì)發(fā)生相應(yīng)的改變。

3．伸縮自如的功能面板

在文檔編輯窗口的右側(cè)和下方與面板交界的框線中央各有一個(gè)箭頭，單擊箭頭便可隱藏或展開面板，如圖1-12所示。

如果用戶覺得工作區(qū)不夠大，可以將鼠標(biāo)放在文檔編輯窗口右側(cè)與面板交界的框線處，當(dāng)鼠標(biāo)光標(biāo)呈雙向箭頭時(shí)，拖動(dòng)鼠標(biāo)調(diào)整工作區(qū)的大小，如圖1-13所示。若用戶需要更大的工作區(qū)，可以將面板隱藏。

4．多文檔的編輯界面

Dreamweaver 8提供了多文檔的編輯界面，將多個(gè)文檔整合在一起，方便用戶在各個(gè)文檔之間切換，如圖1-14所示。用戶可以單擊文檔編輯窗口上方的標(biāo)簽，切換到相應(yīng)的文檔中。通過多文檔的編輯界面，用戶可以同時(shí)編輯多個(gè)文檔。

5．新穎的插入控制面板

Dreamweaver 8的【插入】面板在菜單欄的下方，如圖1-15所示。

【插入】面板包括常用、布局、表單、文本、HTML、應(yīng)用程序、FIash元素、收藏夾八個(gè)標(biāo)簽，不同功能的按鈕分門別類地放在不同的標(biāo)簽中。在Dreamweaver 8中，【插入】面板可按菜單和標(biāo)簽兩種方式顯示。如果需要菜單樣式，可用鼠標(biāo)右鍵單擊【插入】面板的標(biāo)簽，在彈出的菜單中執(zhí)行【顯示為菜單】命令，如圖1-16所示，更改后效果如圖1-17所示。如果需要標(biāo)簽樣式，可單擊【常用】按鈕上的黑色三角形，在下拉菜單中執(zhí)行【顯示為制表符】命令，如圖1-18所示，更改后效果如圖1-19所示。

【插入】面板中將一些相關(guān)的按鈕組合成菜單，當(dāng)按鈕右側(cè)有黑色箭頭時(shí)，表示其為展開式菜單，如圖1-20所示。

用戶可將自己常用的按鈕定義在【插入】面板中的【收藏夾】分類中。定義【收藏夾】分類中按鈕的操作步驟如下。

（1）選擇【插入】面板中的【收藏夾】分類，用鼠標(biāo)右鍵單擊面板，在彈出的菜單中執(zhí)行【自定義收藏夾】命令，如圖1-21所示。

（2）彈出【自定義收藏夾對象】對話框。在【可用對象】欄中選擇標(biāo)簽類別，然后單擊【添加】按鈕 ，將所選的對象添加到【收藏夾對象】欄中。按照相同的方法可以添加多個(gè)對象到【收藏夾對象】欄中，如圖1-22所示。

（3）設(shè)置完成后單擊【確定】按鈕，返回【插入】面板。【收藏夾】分類的顯示效果如圖1-23所示。

6．更完整的CSS功能

傳統(tǒng)的HTML所提供的樣式及排版功能非常有限，因此，現(xiàn)在復(fù)雜的網(wǎng)頁版面主要靠CSS樣式來實(shí)現(xiàn)。而CSS樣式表的功能較多，語法比較復(fù)雜，需要一種工具軟件對復(fù)雜的CSS源代碼進(jìn)行整理，并適時(shí)地提供輔助說明。Dreamweaver 8提供了方便有效的CSS功能。

【屬性】控制面板提供了CSS功能。通過【屬性】控制面板中【樣式】選項(xiàng)的下拉列表，對所選的對象應(yīng)用樣式或創(chuàng)建和編輯樣式，如圖1-24所示。若某些文字應(yīng)用了自定義樣式，當(dāng)用戶調(diào)整這些文字的屬性時(shí)會(huì)自動(dòng)生成新的CSS樣式。

【頁面屬性】按鈕也提供了CSS功能。單擊【頁面屬性】按鈕，彈出【頁面屬性】對話框，如圖1-25所示。可以在【下劃線樣式】選項(xiàng)的下拉列表中設(shè)置超鏈接的樣式，這個(gè)設(shè)置會(huì)自動(dòng)轉(zhuǎn)化成CSS樣式，如圖1-26所示。

Dreamweaver 8除了提供如圖1-27所示的【CSS樣式】控制面板外，還提供如圖1-28所示的【CSS屬性】控制面板。【CSS屬性】控制面板可使用戶輕松查看規(guī)則的屬性設(shè)置，并可快速修改嵌入在當(dāng)前文檔或通過附加的樣式表鏈接的CSS 樣式。可編輯的網(wǎng)格使用戶可以更改顯示的屬性值，對選擇所作的更改都將立即應(yīng)用，用戶可以在操作的同時(shí)預(yù)覽效果。

1.3.2 增強(qiáng)的源代碼編輯功能

由于網(wǎng)絡(luò)的廣泛應(yīng)用，Dreamweaver 8將數(shù)據(jù)庫技術(shù)和網(wǎng)站技術(shù)有機(jī)地整合在一起。如果用戶只是用于一般的網(wǎng)頁美術(shù)設(shè)計(jì)，代碼編輯功能不是很重要，但如果用戶是程序設(shè)計(jì)師，需要開發(fā)動(dòng)態(tài)網(wǎng)站，那么源代碼和程序代碼的編輯就顯得非常重要。

1．源代碼的顯示與查找

在程序代碼視圖中，選擇一段源代碼后單擊鼠標(biāo)右鍵，在彈出的菜單中執(zhí)行【所選區(qū)域】命令，在彈出的子菜單中可以看到新的菜單命令，包括代碼的縮進(jìn)顯示、大小寫的轉(zhuǎn)換等，如圖1-29所示。

為了方便程序員修改代碼，Dreamweaver 8提供了查找與替換功能，讓用戶在代碼中輕松查找和替換要修改的字符串。例如，將代碼中所有名為“style”的CSS樣式替換成名為“style2”的CSS樣式，如圖1-30所示。

2．學(xué)習(xí)使用代碼

Dreamweaver 8的【參考】控制面板為用戶提供了標(biāo)記語言、編程語言和 CSS 樣式的快速參考工具，如圖1-31所示。

3．查看和編輯代碼的工具

Dreamweaver 8提供【標(biāo)簽選擇器】、【標(biāo)簽編輯器】、【標(biāo)簽檢查器】和【代碼片段】控制面板幫助用戶查看和編輯代碼。

在【代碼】視圖中單擊鼠標(biāo)右鍵，在彈出的菜單中執(zhí)行【插入標(biāo)簽】命令，彈出【標(biāo)簽選擇器】控制面板，如圖1-32所示。

使用【標(biāo)簽編輯器】控制面板，可以直接對代碼標(biāo)簽進(jìn)行編輯。在【代碼】視圖中單擊鼠標(biāo)右鍵，在彈出的菜單中執(zhí)行【編輯標(biāo)簽】命令，彈出【標(biāo)簽編輯器】對話框。例如在代碼“meta”上單擊鼠標(biāo)右鍵，即彈出如圖1-33所示的對話框。

利用【標(biāo)簽檢查器】控制面板可以修改對象的屬性。執(zhí)行菜單【窗口】→【標(biāo)簽檢查器】命令，啟用【標(biāo)簽】控制面板，如圖1-34所示。

Dreamweaver 8提供了豐富的系統(tǒng)自帶代碼片斷，可直接應(yīng)用于文檔中，提高代碼編輯的效率。執(zhí)行菜單【窗口】→【代碼片斷】命令，彈出【代碼片斷】控制面板，如圖1-35所示。

用戶可以將自己編寫的代碼打包，以備今后使用。單擊【文檔】工具欄的【代碼】按鈕 ，切換到【代碼】視圖。單擊【代碼片斷】控制面板下方的【新建代碼片斷文件夾】按鈕 ，創(chuàng)建一個(gè)新的文件夾，用以保存新建的代碼片斷。然后選擇要打包的備用代碼，啟用【代碼片斷】對話框，輸入代碼的名稱和描述信息，選擇代碼片斷類型和預(yù)覽類型，單擊【確定】按鈕完成設(shè)置，效果如圖1-36所示。

【代碼片斷】對話框如圖1-37所示，啟用【代碼片斷】對話框有以下幾種方法。

◎ 用鼠標(biāo)右鍵單擊選定的代碼，在彈出的菜單中執(zhí)行【創(chuàng)建新代碼片斷】命令。

◎ 單擊【代碼片斷】控制面板下方的【新建代碼片斷】按鈕 創(chuàng)建新的代碼片斷。

【名稱】選項(xiàng)：可以在文本框中輸入代碼片斷的名稱。代碼片斷名稱不能包含斜線（/ 或 \）、特殊字符或雙引號等無效的字符。

【描述】選項(xiàng)：為可選項(xiàng)，在文本框中輸入代碼片斷的描述性文字。描述性文字可以使其他小組成員更易于使用代碼片斷。

【代碼片斷類型】選項(xiàng)組：包含【環(huán)繞選定內(nèi)容】和【插入塊】兩個(gè)單選項(xiàng)。如果選擇【環(huán)繞選定內(nèi)容】單選項(xiàng)，則將代碼添加到【前插入】或【后插入】文本框中。【前插入】文本框表示在當(dāng)前選定內(nèi)容之前輸入或粘貼需要插入的代碼，【后插入】文本框表示在當(dāng)前選定內(nèi)容之后輸入或粘貼需要插入的代碼；如果選擇【插入塊】單選項(xiàng)，則通過輸入或粘貼用戶的代碼來插入。

【預(yù)覽類型】選項(xiàng)組：包含【設(shè)計(jì)】和【代碼】兩個(gè)單選項(xiàng)。

1.3.3 動(dòng)態(tài)數(shù)據(jù)庫開發(fā)

Dreamweaver 8在開發(fā)動(dòng)態(tài)數(shù)據(jù)庫網(wǎng)站方面并沒有太大的變化，它提供的服務(wù)器行為支持ColdFusion、ASP、ASP.NET、JSP 和 PHP 文檔類型，在ASP.NET和ColdFusion方面做了改進(jìn)，重要的服務(wù)器行為方面并沒有變化。

1．在ASP.NET的支持方面加強(qiáng)的功能

◎ 支持最新的ASP.NET 1.1版本。

◎ 使用．NET的核心技術(shù)，加快了ASP.NET的DataSets、DataGrids、DataLists對象對復(fù)雜數(shù)據(jù)的顯示和處理速度。

◎ 支持自定義標(biāo)簽。

2．在JSP的支持方面加強(qiáng)的功能

◎ 支持JSP標(biāo)簽庫。

◎ 完整地整合JavaBean，在服務(wù)器行為控制面板可以顯示JavaBean所有的方法和屬性。

3．在ColdFusion的支持方面加強(qiáng)的功能

◎ 支持最新的ColdFusion 6.1版本。

◎ 支持實(shí)時(shí)服務(wù)器除錯(cuò)。

◎ 內(nèi)建ColdFusion MX Developer，支援ColdFusion Component。

◎ 最佳的ColdFusion工作流程，包括程序代碼片段的快捷鍵、無間斷的文檔編輯和自動(dòng)檢查。

1.3.4 新增功能

Dreamweaver 8的新增功能如下：

◎ 縮放工具和輔助線

◎ 可視化 XML 數(shù)據(jù)綁定

◎ 新的 CSS 樣式面板

◎ CSS 布局的可視化

◎ 代碼折疊

◎ “編碼”工具欄

◎ 后臺文件傳輸

◎ “插入 FIash 視頻”命令

1.4 Dreamweaver 8的工作界面

Dreamweaver 8的工作區(qū)將多個(gè)文檔集中到一個(gè)窗口中，不僅降低了系統(tǒng)資源的占用，還可以更加方便地操作文檔。Dreamweaver 8的工作窗口由五部分組成，分別是【插入】控制面板、【文檔】工具欄、【文檔】窗口、控制面板組和【屬性】控制面板，如圖1-38所示。

1.4.1 插入面板

【插入】面板包含用于將各種類型的網(wǎng)頁元素插入到文檔中的按鈕，如圖像按鈕、表格按鈕和層按鈕等。每個(gè)按鈕都是一段 HTML 代碼，允許用戶在插入時(shí)設(shè)置不同的屬性。【插入】面板如圖1-39所示。

1.4.2 文檔工具欄

【文檔】工具欄包含提供各種文檔窗口視圖的按鈕，如【代碼】視圖按鈕 、【拆分】視圖按鈕 和【設(shè)計(jì)】視圖按鈕 。還包含各種查看按鈕和一些常用操作按鈕，如【在瀏覽器中預(yù)覽/調(diào)試】按鈕 等，如圖1-40所示。

1.4.3 文檔窗口

【文檔】窗口顯示用戶當(dāng)前創(chuàng)建和編輯的文檔內(nèi)容，如圖1-41所示。

1.4.4 控制面板組

控制面板組是分組在某個(gè)標(biāo)題下面的相關(guān)控制面板的集合。若要展開一個(gè)控制面板組，可以單擊組名稱左側(cè)的展開箭頭 ，還可以從【窗口】菜單中選擇要展開的面板組或面板。若要取消停靠一個(gè)控制面板組，可以拖動(dòng)該組標(biāo)題條左側(cè)的手柄，如圖1-42所示。

1.4.5 屬性控制面板

【屬性】控制面板又稱為屬性檢查器，用于查看和更改所選網(wǎng)頁元素或文本的各種屬性，如圖1-43所示。每種網(wǎng)頁元素具有不同的屬性，因此【屬性】控制面板中顯示的內(nèi)容會(huì)因所選對象的不同而變化。

1.5 創(chuàng)建網(wǎng)站框架

所謂站點(diǎn)，可以看作是一系列文檔的組合，這些文檔通過各種鏈接建立邏輯關(guān)聯(lián)。用戶在建立網(wǎng)站前必須要建立站點(diǎn)，修改某網(wǎng)頁內(nèi)容時(shí)，也必須打開站點(diǎn)，然后修改站點(diǎn)內(nèi)的網(wǎng)頁。在Dreamweaver 中，站點(diǎn)一詞是下列任意一項(xiàng)的簡稱。

◎ Web 站點(diǎn)：從訪問者的角度來看，Web 站點(diǎn)是一組位于服務(wù)器上的網(wǎng)頁，使用 Web 瀏覽器訪問該站點(diǎn)的訪問者可以對其進(jìn)行瀏覽。

◎ 遠(yuǎn)程站點(diǎn)：從創(chuàng)作者的角度來看，遠(yuǎn)程站點(diǎn)服務(wù)器上組成 Web 站點(diǎn)的文件。

◎ 本地站點(diǎn)：與遠(yuǎn)程站點(diǎn)上的文件對應(yīng)的本地磁盤上的文件。通常，先在本地磁盤上編輯文件，然后將它們上傳到遠(yuǎn)程站點(diǎn)服務(wù)器上。

◎ Dreamweaver 站點(diǎn)定義：本地站點(diǎn)的一組定義特性，以及有關(guān)本地站點(diǎn)和遠(yuǎn)程站點(diǎn)對應(yīng)方式的信息。

在做任何工作之前應(yīng)該制定工作計(jì)劃并畫出工作流程，建立網(wǎng)站也是如此。在動(dòng)手建立站點(diǎn)之前，需要先調(diào)查研究，記錄客戶所需的服務(wù)，然后以此規(guī)劃出網(wǎng)站的功能結(jié)構(gòu)圖（即設(shè)計(jì)草圖）及其設(shè)計(jì)風(fēng)格以體現(xiàn)站點(diǎn)的主題。另外，還要規(guī)劃站點(diǎn)導(dǎo)航系統(tǒng)，避免瀏覽者在網(wǎng)頁上迷失方向，找不到要瀏覽的內(nèi)容。

1.5.1 站點(diǎn)管理器

站點(diǎn)管理器的主要功能包括新建站點(diǎn)、編輯站點(diǎn)、復(fù)制站點(diǎn)、刪除站點(diǎn)以及導(dǎo)入或?qū)С稣军c(diǎn)。若要管理站點(diǎn)，必須打開【管理站點(diǎn)】對話框。

啟用【管理站點(diǎn)】對話框有以下幾種方法。

◎ 執(zhí)行菜單【站點(diǎn)】→【管理站點(diǎn)】命令。

◎ 執(zhí)行菜單【窗口】→【文件】命令，啟用【文件】控制面板，選中【文件】選項(xiàng)卡，如圖1-44所示。單擊控制面板左側(cè)的下拉列表，執(zhí)行【管理站點(diǎn)】命令，如圖1-45所示。

在【管理站點(diǎn)】對話框中，通過【新建】、【編輯】、【復(fù)制】和【刪除】按鈕，可以新建一個(gè)站點(diǎn)、修改選擇的站點(diǎn)、復(fù)制選擇的站點(diǎn)、刪除選擇的站點(diǎn)。通過對話框的【導(dǎo)出】、【導(dǎo)入】按鈕，可以將站點(diǎn)導(dǎo)出為 XML 文件，然后再將其導(dǎo)入到 Dreamweaver。這樣，用戶就可以在不同的計(jì)算機(jī)和產(chǎn)品版本之間移動(dòng)站點(diǎn)，或者與其他用戶共享，如圖1-46所示。

在【管理站點(diǎn)】對話框中，選擇一個(gè)具體的站點(diǎn)，然后單擊【完成】按鈕，就會(huì)在【文件】控制面板的【文件】選項(xiàng)卡中出現(xiàn)站點(diǎn)管理器的縮略圖。單擊面板右側(cè)的【展開以顯示本地和遠(yuǎn)端站點(diǎn)】按鈕 ，展開站點(diǎn)管理器，如圖1-47所示。再單擊按鈕 ，又回到站點(diǎn)管理器的縮略圖。

站點(diǎn)管理器由四部分組成，每部分的主要功能如下。

下拉菜單：包括對站點(diǎn)進(jìn)行管理的所有命令。

工具欄：包括查看遠(yuǎn)程站點(diǎn)、測試服務(wù)器站點(diǎn)、站點(diǎn)地圖，刷新站點(diǎn)，在本地機(jī)和遠(yuǎn)程服務(wù)器間上傳或下載站點(diǎn)，在本地機(jī)和遠(yuǎn)程服務(wù)器間存回或取出文件，連接到遠(yuǎn)端的Web服務(wù)器主機(jī)，選擇和修改所有站點(diǎn)等功能。

左側(cè)窗口：顯示站點(diǎn)地圖或遠(yuǎn)程站點(diǎn)與測試服務(wù)器站點(diǎn)的文件。

右側(cè)窗口：顯示本地機(jī)所定義的站點(diǎn)文件和文件夾。

1.5.2 創(chuàng)建文件夾

建立站點(diǎn)前，要先在站點(diǎn)管理器中規(guī)劃站點(diǎn)文件夾。

新建文件夾的具體操作步驟如下。

（1）在站點(diǎn)管理器的右側(cè)窗口中單擊選擇站點(diǎn)。

（2）通過以下幾種方法新建文件夾。

◎ 執(zhí)行菜單【文件】→【新建文件夾】命令。

◎ 用鼠標(biāo)右鍵單擊站點(diǎn)，在彈出的菜單中執(zhí)行【新建文件夾】命令。

（3）輸入新文件夾的名稱。

一般情況下，若站點(diǎn)不復(fù)雜，可直接將網(wǎng)頁存放在站點(diǎn)的根目錄下，并在站點(diǎn)根目錄中，按照資源的種類建立不同的文件夾存放不同的資源。例如，image文件夾存放站點(diǎn)中的圖像文件，media文件夾存放站點(diǎn)的多媒體文件等。若站點(diǎn)復(fù)雜，需要根據(jù)實(shí)現(xiàn)不同功能的板塊，在站點(diǎn)根目錄中，按板塊創(chuàng)建子文件夾存放不同的網(wǎng)頁，這樣可以方便網(wǎng)站設(shè)計(jì)者修改網(wǎng)站。

1.5.3 定義新站點(diǎn)

建立好站點(diǎn)文件夾后就可定義新站點(diǎn)了。在Dreamweaver 8中，站點(diǎn)通常包含兩部分，本地站點(diǎn)和遠(yuǎn)程站點(diǎn)。本地站點(diǎn)是本地計(jì)算機(jī)上的一組文件，遠(yuǎn)程站點(diǎn)是遠(yuǎn)程 Web 服務(wù)器上的一個(gè)位置。用戶將本地站點(diǎn)中的文件發(fā)布到網(wǎng)絡(luò)上的遠(yuǎn)程站點(diǎn)，使公眾可以訪問它們。在Dreamweaver中創(chuàng)建 Web站點(diǎn)，通常先在本地磁盤上創(chuàng)建本地站點(diǎn)，然后創(chuàng)建遠(yuǎn)程站點(diǎn)，再將這些網(wǎng)頁的副本上傳到一個(gè)遠(yuǎn)程Web 服務(wù)器，使公眾可以訪問它們。本節(jié)只介紹如何創(chuàng)建本地站點(diǎn)。

1．創(chuàng)建本地站點(diǎn)的步驟

（1）執(zhí)行菜單【站點(diǎn)】→【管理站點(diǎn)】命令，啟用【管理站點(diǎn)】對話框，如圖1-48所示。

（2）在對話框中單擊【新建】按鈕，在彈出的菜單中執(zhí)行菜單【站點(diǎn)】命令，彈出【未命名站1的站點(diǎn)定義為】對話框。在對話框中，通過【基本】選項(xiàng)卡建立不同的站點(diǎn)。對于熟練的設(shè)計(jì)者而言，通常在對話框【高級】選項(xiàng)卡的【本地信息】分類中，根據(jù)需要設(shè)置站點(diǎn)。如圖1-49所示。

2．本地站點(diǎn)主要選項(xiàng)的作用

【本地信息】選項(xiàng)：表示定義或修改本地站點(diǎn)。

【站點(diǎn)名稱】選項(xiàng)：在文本框中輸入用戶自定的站點(diǎn)名稱。

【本地根文件夾】選項(xiàng)：在文本框中輸入本地磁盤中存儲站點(diǎn)文件、模板和庫項(xiàng)目的文件夾的名稱，或者單擊文件夾圖標(biāo) 查找到該文件夾。

【自動(dòng)刷新本地文件列表】選項(xiàng)：指定每次將文件復(fù)制到本地站點(diǎn)時(shí)，Dreamweaver 是否自動(dòng)刷新本地文件列表。若沒有勾選此復(fù)選框，則將文件復(fù)制到本地站點(diǎn)時(shí)不會(huì)自動(dòng)刷新本地文件列表，但可通過單擊【文檔】工具欄中的【刷新設(shè)計(jì)視圖】按鈕手動(dòng)刷新面板。

【默認(rèn)圖像文件夾】選項(xiàng)：在文本框中輸入此站點(diǎn)的默認(rèn)圖像文件夾的路徑，或者單擊文件夾圖標(biāo) 查找到該文件夾。例如，將非站點(diǎn)圖像添加到網(wǎng)頁中時(shí)，圖像會(huì)自動(dòng)添加到當(dāng)前站點(diǎn)的默認(rèn)圖像文件夾中。

【區(qū)分大小寫的鏈接】選項(xiàng)：勾選此復(fù)選框，則使用區(qū)分大小寫的鏈接進(jìn)行檢查。

【啟用緩存】選項(xiàng)：指定是否創(chuàng)建本地緩存以提高鏈接和站點(diǎn)管理任務(wù)的速度。若勾選此復(fù)選框，則創(chuàng)建本地緩存。

1.5.4 創(chuàng)建和保存網(wǎng)頁

創(chuàng)建站點(diǎn)后，需要?jiǎng)?chuàng)建網(wǎng)頁來組織要展示的內(nèi)容。合理的網(wǎng)頁名稱非常重要，一般網(wǎng)頁文件名稱應(yīng)容易理解，能反映網(wǎng)頁的內(nèi)容。

在網(wǎng)站中有一個(gè)特殊的網(wǎng)頁是首頁，每個(gè)網(wǎng)站必須有一個(gè)首頁。每當(dāng)在IE瀏覽器的地址欄中輸入網(wǎng)站地址，如在IE瀏覽器的地址欄中輸入www.sina.com.cn時(shí)會(huì)自動(dòng)打開新浪網(wǎng)的首頁。一般情況下，首頁的文件名為index.htm、index.html、index.asp、default.asp、default.htm或default.html。

在標(biāo)準(zhǔn)的Dreamweaver環(huán)境下，建立和保存網(wǎng)頁的操作步驟如下。

（1）執(zhí)行菜單【文件】→【新建】命令，啟用【新建文檔】對話框。此時(shí)，【常規(guī)】選項(xiàng)卡已被選定，在【類別】選項(xiàng)框中選擇【基本頁】選項(xiàng)，在【基本頁】選項(xiàng)框中選擇【HTML】選項(xiàng)，創(chuàng)建空白網(wǎng)頁，設(shè)置如圖1-50所示。

（2）設(shè)置完成后，單擊【創(chuàng)建】按鈕，彈出【文檔】窗口，新文檔在該窗口中打開。根據(jù)需要在【文檔】窗口中選擇不同的視圖設(shè)計(jì)網(wǎng)頁，如圖1-51所示。

【文檔】窗口中有三種視圖方式，三種視圖方式的作用如下。

【代碼】視圖：對于有編程經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)用戶，可在【代碼】視圖中查看、修改和編寫網(wǎng)頁代碼，以實(shí)現(xiàn)特殊的網(wǎng)頁效果，【代碼】視圖的效果如圖1-52所示。

【設(shè)計(jì)】視圖：以所見即所得的方式顯示所有網(wǎng)頁元素，【設(shè)計(jì)】視圖的效果如圖1-53所示。

【拆分】視圖：將文檔窗口分為上下兩部分，上部分是代碼部分，顯示代碼；下部分是設(shè)計(jì)部分，顯示網(wǎng)頁元素及其在頁面中的布局。在此視圖中，網(wǎng)頁設(shè)計(jì)用戶通過在設(shè)計(jì)部分單擊網(wǎng)頁元素的方式，快速地定位到要修改的網(wǎng)頁元素代碼的位置，進(jìn)行代碼的修改，或在【屬性】面板中修改網(wǎng)頁元素的屬性。【拆分】視圖的效果如圖1-54所示。

（3）設(shè)計(jì)完成后，執(zhí)行菜單【文件】→【保存】命令，彈出【另存為】對話框。在【文件名】選項(xiàng)的文本框中輸入網(wǎng)頁的名稱，如圖1-55所示，單擊【保存】按鈕，將該文檔保存在站點(diǎn)文件夾中。

1.5.5 在站點(diǎn)地圖中創(chuàng)建網(wǎng)頁

在站點(diǎn)地圖中，各網(wǎng)頁文件間的鏈接關(guān)系以樹狀的形式顯示出來。站點(diǎn)地圖是理想的站點(diǎn)結(jié)構(gòu)布局工具，利用它用戶可以快速地設(shè)置整個(gè)站點(diǎn)結(jié)構(gòu)，然后創(chuàng)建站點(diǎn)地圖的圖形圖像。但是，站點(diǎn)地圖僅適用于本地站點(diǎn)。對于遠(yuǎn)程站點(diǎn)，必須將其站點(diǎn)內(nèi)容復(fù)制到本地磁盤上的一個(gè)文件夾中，并設(shè)置為本地站點(diǎn)后才能查看和使用站點(diǎn)地圖。站點(diǎn)地圖的界面如圖1-56所示。

在站點(diǎn)地圖中，可以選擇網(wǎng)頁、打開網(wǎng)頁進(jìn)行編輯、向站點(diǎn)添加新頁、創(chuàng)建文件之間的鏈接以及更改網(wǎng)頁標(biāo)題等操作。

在站點(diǎn)地圖中新建網(wǎng)頁的具體操作步驟如下。

（1）在站點(diǎn)地圖中用鼠標(biāo)右鍵單擊主頁或主頁下的某個(gè)網(wǎng)頁文件，在彈出的菜單中執(zhí)行【鏈接到新文件】命令，如圖1-57所示。

（2）在打開的【鏈接到新文件】對話框中填寫新文件的名稱、新文件的標(biāo)題以及原文件的鏈接文字信息，如圖1-58所示。

（3）單擊【確定】按鈕，關(guān)閉【鏈接到新文件】對話框。【站點(diǎn)管理器】文件列表窗口會(huì)自動(dòng)添加一個(gè)鏈接到j(luò)ieshao.html的空白網(wǎng)頁Iianxi.html，如圖1-59所示。

（4）打開網(wǎng)頁jieshao.html，會(huì)看到文件中有一個(gè)鏈接到Iianxi.html網(wǎng)頁的鏈接文字“聯(lián)系我們”，如圖1-60所示。

（5）如果想改變新文件Iianxi.html在站點(diǎn)中的位置，還可以在【站點(diǎn)管理器】文件列表窗口中，按住鼠標(biāo)左鍵將Iianxi.html拖動(dòng)到其他的文件夾中。如圖1-61所示，將Iianxi.html拖動(dòng)到“tupian”文件夾中。

這時(shí)，系統(tǒng)會(huì)彈出【更新文件】對話框，詢問是否更新文件中的鏈接，如圖1-62所示。單擊【更新】按鈕，完成鏈接更新。

1.5.6 在文件列表中創(chuàng)建網(wǎng)頁

除了可以在站點(diǎn)地圖中新建網(wǎng)頁外，還可以在文件列表窗口中新建網(wǎng)頁，具體操作步驟如下。

（1）在文件列表窗口的“tupian”文件夾上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中執(zhí)行【新建文件】命令，在“tupian”文件夾內(nèi)添加一個(gè)新網(wǎng)頁，將其命名為“fengjing.html”，如圖1-63所示。

（2）在站點(diǎn)地圖中，用鼠標(biāo)右鍵單擊jieshao.html文件，在彈出的菜單中執(zhí)行【鏈接到已有文件】命令，如圖1-64所示。

（3）彈出【選定HTML文件】對話框，在對話框中選擇剛建立的fengjing.html文件，如圖1-65所示，單擊【確定】按鈕，將其與jieshao.html文件鏈接，效果如圖1-66所示。

完成操作后， jieshao.html文件中出現(xiàn)一個(gè)與fengjing.html文件鏈接的鏈接文本，如圖1-67所示。

步驟（2）中建立的鏈接還可以在站點(diǎn)地圖中實(shí)現(xiàn)。在站點(diǎn)地圖中，將鼠標(biāo)放在jieshao.html文件的【鏈接】圖標(biāo) 上，按住鼠標(biāo)左鍵拖曳圖標(biāo)到右側(cè)文件列表的fengjing.html文件中，如圖1-68所示。

完成操作后，將jieshao.html文件與fengjing.html文件建立鏈接。在jieshao.html文件中，同樣會(huì)出現(xiàn)如圖1-67所示的鏈接文本。

1.6 管理站點(diǎn)文件和文件夾

前面介紹了在站點(diǎn)文件夾列表中創(chuàng)建文件和文件夾的方法。當(dāng)站點(diǎn)結(jié)構(gòu)發(fā)生變化時(shí)，還需要對站點(diǎn)文件和文件夾進(jìn)行移動(dòng)和重命名等操作。下面介紹如何在【文件】控制面板中的站點(diǎn)文件夾列表中對站點(diǎn)文件和文件夾進(jìn)行管理。

1.6.1 重命名文件和文件夾

修改文件或文件夾名稱的具體操作步驟如下。

（1）執(zhí)行菜單【窗口】→【文件】命令，啟用【文件】控制面板，在其中選擇要重命名的文件或文件夾。

（2）通過以下幾種方法激活文件或文件夾的名稱。

◎ 單擊文件名，稍停片刻，再次單擊文件名。

◎ 用鼠標(biāo)右鍵單擊文件或文件夾圖標(biāo)，在彈出的菜單中執(zhí)行【編輯】→【重命名】命令。

（3）輸入新名稱，按【Enter】鍵。

1.6.2 移動(dòng)文件和文件夾

移動(dòng)文件或文件夾的具體操作步驟如下。

（1）執(zhí)行菜單【窗口】→【文件】命令，啟用【文件】控制面板，在其中選擇要移動(dòng)的文件或文件夾。

（2）通過以下幾種方法移動(dòng)文件或文件夾。

◎ 復(fù)制該文件或文件夾，然后粘貼在新位置。

◎ 將該文件或文件夾直接拖曳到新位置。

（3）【文件】控制面板會(huì)自動(dòng)刷新，可以看到該文件或文件夾在新位置上。

1.6.3 刪除文件和文件夾

刪除文件或文件夾有以下幾種方法。

◎ 執(zhí)行菜單【窗口】→【文件】命令，啟用【文件】控制面板，在其中選擇要?jiǎng)h除的文件或文件夾，按【Delete】鍵進(jìn)行刪除。

◎ 用鼠標(biāo)右鍵單擊要?jiǎng)h除的文件或文件夾，從彈出的菜單中執(zhí)行【編輯】→【刪除】命令。

1.7 管理站點(diǎn)

在建立站點(diǎn)后，可以對站點(diǎn)進(jìn)行打開、修改、復(fù)制、刪除、導(dǎo)入、導(dǎo)出等操作。

1.7.1 打開站點(diǎn)

當(dāng)要修改某個(gè)網(wǎng)站的內(nèi)容時(shí)，首先要打開站點(diǎn)。打開站點(diǎn)就是在各站點(diǎn)間進(jìn)行切換，打開站點(diǎn)的具體操作步驟如下。

（1）啟動(dòng)Dreamweaver 8。

（2）執(zhí)行菜單【窗口】→【文件】命令，啟用【文件】控制面板。在其中選擇要打開的站點(diǎn)名，如圖1-69所示。打開后的站點(diǎn)，如圖1-70所示。

1.7.2 編輯站點(diǎn)

有時(shí)用戶需要修改站點(diǎn)的某些設(shè)置，就需要編輯站點(diǎn)。例如，修改站點(diǎn)默認(rèn)的圖像文件夾路徑，其具體的操作步驟如下。

（1）執(zhí)行菜單【站點(diǎn)】→【管理站點(diǎn)】命令，啟用【管理站點(diǎn)】對話框。

（2）在對話框中，選擇要編輯的站點(diǎn)名，單擊【編輯】按鈕，彈出【站點(diǎn)定義為】對話框。根據(jù)需要進(jìn)行修改，如圖1-71所示，設(shè)置完成，單擊【確定】按鈕回到【管理站點(diǎn)】對話框。

（3）如果不需要修改其他站點(diǎn)，可單擊【完成】按鈕關(guān)閉【管理站點(diǎn)】對話框。

1.7.3 復(fù)制站點(diǎn)

復(fù)制站點(diǎn)可省去重復(fù)建立多個(gè)結(jié)構(gòu)相同站點(diǎn)的操作，從而提高工作效率。在【管理站點(diǎn)】對話框中可以復(fù)制站點(diǎn)，其具體操作步驟如下。

（1）在【管理站點(diǎn)】對話框左側(cè)的站點(diǎn)列表中選擇要復(fù)制的站點(diǎn)，單擊【復(fù)制】按鈕進(jìn)行復(fù)制。

（2）用鼠標(biāo)雙擊新復(fù)制的站點(diǎn)，彈出的【站點(diǎn)定義為】對話框中更改新站點(diǎn)的名稱。

1.7.4 刪除站點(diǎn)

刪除站點(diǎn)只是刪除Dreamweaver同本地站點(diǎn)間的關(guān)系，而本地站點(diǎn)包含的文件和文件夾仍然保存在磁盤原來的位置上。換句話說，刪除站點(diǎn)后，雖然站點(diǎn)文件夾保存在計(jì)算機(jī)中，但在Dreamweaver中已經(jīng)不存在此站點(diǎn)。例如，按下列步驟刪除站點(diǎn)后，該站點(diǎn)的名稱在【管理站點(diǎn)】對話框中就不存在了。

在【管理站點(diǎn)】對話框中刪除站點(diǎn)的具體操作步驟如下。

（1）在【管理站點(diǎn)】對話框左側(cè)的站點(diǎn)列表中選擇要?jiǎng)h除的站點(diǎn)。

（2）單擊【刪除】按鈕即可刪除選擇的站點(diǎn)。

1.7.5 導(dǎo)入和導(dǎo)出站點(diǎn)

如果在計(jì)算機(jī)之間移動(dòng)站點(diǎn)，或者與其他用戶共同設(shè)計(jì)站點(diǎn)，可通過 Dreamweaver的導(dǎo)入和導(dǎo)出站點(diǎn)功能實(shí)現(xiàn)。導(dǎo)出站點(diǎn)功能是將站點(diǎn)導(dǎo)出為．ste文件，然后在其他計(jì)算機(jī)上將其導(dǎo)入到Dreamweaver中。

1．導(dǎo)出站點(diǎn)

（1）執(zhí)行菜單【站點(diǎn)】→【管理站點(diǎn)】命令，啟用【管理站點(diǎn)】對話框。在對話框中，選擇要導(dǎo)出的站點(diǎn)，單擊【導(dǎo)出】按鈕，彈出【導(dǎo)出站點(diǎn)】對話框。

（2）在該對話框中瀏覽并選擇保存該站點(diǎn)的路徑，如圖1-72所示。單擊【保存】按鈕，保存擴(kuò)展名為．ste的文件。

（3）單擊【完成】按鈕，關(guān)閉【管理站點(diǎn)】對話框，完成導(dǎo)出站點(diǎn)的設(shè)置。

2．導(dǎo)入站點(diǎn)

（1）執(zhí)行菜單【站點(diǎn)】→【管理站點(diǎn)】命令，啟用【管理站點(diǎn)】對話框。

（2）在對話框中，單擊【導(dǎo)入】按鈕，彈出【導(dǎo)入站點(diǎn)】對話框，瀏覽并選定要導(dǎo)入的站點(diǎn)，如圖1-73所示。單擊【打開】按鈕，站點(diǎn)被導(dǎo)入，如圖1-74所示。

（3）單擊【完成】按鈕，關(guān)閉【管理站點(diǎn)】對話框，完成導(dǎo)入站點(diǎn)的設(shè)置。

1.8 設(shè)置頁面屬性

1.8.1設(shè)置網(wǎng)頁的標(biāo)題

HTML 頁面的標(biāo)題可以幫助站點(diǎn)瀏覽者理解所查看網(wǎng)頁的內(nèi)容，并在瀏覽者的歷史記錄和書簽列表中標(biāo)識頁面。文檔的文件名是通過保存文件命令保存的網(wǎng)頁文件，而頁面標(biāo)題是瀏覽者瀏覽網(wǎng)頁時(shí)瀏覽器標(biāo)題欄中顯示的信息。

更改頁面標(biāo)題的具體操作步驟如下。

（1）執(zhí)行菜單【修改】→【頁面屬性】命令，啟用【頁面屬性】對話框。

（2）在對話框的【分類】選項(xiàng)框中，選中【標(biāo)題/編碼】選項(xiàng)。在對話框右側(cè)【標(biāo)題】選項(xiàng)的文本框中，輸入頁面標(biāo)題，如圖1-75所示，單擊【確定】按鈕，完成設(shè)置。

1.8.2 設(shè)置網(wǎng)頁的默認(rèn)格式

當(dāng)制作新網(wǎng)頁時(shí)，頁面都有一些默認(rèn)的屬性，比如網(wǎng)頁的標(biāo)題、網(wǎng)頁邊界、文字編碼、文字顏色、超鏈接的顏色等。若修改網(wǎng)頁的頁面屬性，可執(zhí)行菜單【修改】→【頁面屬性】命令，啟用【頁面屬性】對話框，如圖1-76所示。對話框中各選項(xiàng)的作用如下。

【外觀】選項(xiàng)組：設(shè)置網(wǎng)頁背景色、背景圖像、網(wǎng)頁文字的字體、字號、顏色和網(wǎng)頁邊界。

【鏈接】選項(xiàng)組：設(shè)置鏈接文字的格式。

【標(biāo)題】選項(xiàng)組：為標(biāo)題1至標(biāo)題6指定標(biāo)題標(biāo)簽的字號和顏色。

【標(biāo)題/編碼】選項(xiàng)組：設(shè)置網(wǎng)頁的標(biāo)題和網(wǎng)頁的文字編碼。一般情況下，將網(wǎng)頁的文字編碼設(shè)定為簡體中文（GB2312）編碼。

【跟蹤圖像】選項(xiàng)組：一般在復(fù)制網(wǎng)頁時(shí)，若想使原網(wǎng)頁的圖像作為復(fù)制網(wǎng)頁的參考圖像，可使用跟蹤圖像的方式實(shí)現(xiàn)。跟蹤圖像僅作為復(fù)制網(wǎng)頁的設(shè)計(jì)參考圖像，在瀏覽器中并不顯示出來。

1.9 網(wǎng)頁文件頭設(shè)置

網(wǎng)頁的所有元素都由HTML代碼標(biāo)記表示，一個(gè)完整的HTML網(wǎng)頁文件包含head和body兩個(gè)部分，如圖1-77所示。其中head部分包含許多在網(wǎng)頁中不可見的頭信息，例如語言編碼、搜索關(guān)鍵字、版權(quán)聲明、作者信息、網(wǎng)頁描述等，均在meta標(biāo)簽內(nèi)。body部分包含的則是網(wǎng)頁中可見的內(nèi)容。

在Dreamweaver 8中，網(wǎng)頁文件頭信息大部分都可在meta標(biāo)簽中設(shè)置。執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【Meta】命令，啟用【META】對話框，如圖1-78所示。

對話框中各選項(xiàng)的作用如下。

【屬性】選項(xiàng)：包括“名稱”和“HTTP-equivalent”兩個(gè)選項(xiàng)。設(shè)定關(guān)鍵字、描述信息時(shí)可選擇“名稱”選項(xiàng)；設(shè)定定時(shí)刷新網(wǎng)頁時(shí)，選擇“HTTP-equivalent”選項(xiàng)。

【值】選項(xiàng)：表示meta標(biāo)簽的信息類型。有些值是已經(jīng)定義好的，如關(guān)鍵字的值為keywords，刷新的值為refresh等。

【內(nèi)容】選項(xiàng)：表示meta標(biāo)簽的實(shí)際信息。如設(shè)置關(guān)鍵字時(shí)輸入具體的關(guān)鍵字信息，設(shè)置網(wǎng)頁的刷新間隔時(shí)輸入具體的時(shí)間。

下面介紹如何設(shè)置網(wǎng)頁的文件頭信息，以及它們所起的作用。

1.9.1 插入搜索關(guān)鍵字

在WWW上通過搜索引擎查找資料時(shí)，搜索引擎自動(dòng)讀取網(wǎng)頁中meta標(biāo)簽的內(nèi)容。所以網(wǎng)頁中的搜索關(guān)鍵字非常重要，它可以間接地宣傳網(wǎng)站，提高訪問量。但搜索關(guān)鍵字并不是字?jǐn)?shù)越多越好，因?yàn)橛行┧阉饕嫦拗扑饕年P(guān)鍵字或字符的數(shù)目，當(dāng)超過了限制的數(shù)目時(shí)，它將忽略所有的關(guān)鍵字，所以最好只使用幾個(gè)精選的關(guān)鍵字。一般情況下，關(guān)鍵字是對網(wǎng)頁的主題、內(nèi)容、風(fēng)格或作者等內(nèi)容的概括。

設(shè)置網(wǎng)頁搜索關(guān)鍵字的具體操作步驟如下。

（1）選中文檔窗口中的【代碼】視圖，將鼠標(biāo)光標(biāo)放在<head>標(biāo)簽中，執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【關(guān)鍵字】命令，啟用【關(guān)鍵字】對話框，如圖1-79所示。

（2）在【關(guān)鍵字】對話框中輸入相應(yīng)的中文或英文關(guān)鍵字，但注意關(guān)鍵字間要用半角的逗號分隔。例如，設(shè)定關(guān)鍵字為“瀏覽”時(shí)，【關(guān)鍵字】對話框的設(shè)置如圖1-80所示，單擊【確定】按鈕，完成設(shè)置。

（3）此時(shí)，觀察【代碼】視圖，發(fā)現(xiàn)<head>標(biāo)簽內(nèi)多了下述代碼。

<meta name="keywords" content="瀏覽" />

同樣，還可以通過meta標(biāo)簽實(shí)現(xiàn)設(shè)置搜索關(guān)鍵字，具體操作步驟如下。

執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【Meta】命令，啟用【META】對話框。在【屬性】選項(xiàng)的下拉列表中選擇“名稱”，在【值】選項(xiàng)的文本框中輸入“keywords”，在【內(nèi)容】選項(xiàng)的文本框中輸入關(guān)鍵字信息，如圖1-81所示。設(shè)置完成后，單擊【確定】按鈕，在【代碼】視圖中可查看相應(yīng)的html標(biāo)記。

1.9.2 插入作者和版權(quán)信息

要設(shè)置網(wǎng)頁的作者和版權(quán)信息，可執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【Meta】命令，啟用【META】對話框。在【值】選項(xiàng)的文本框中輸入“/x.Copyright”，在【內(nèi)容】選項(xiàng)的文本框中輸入作者名稱和版權(quán)信息，如圖1-82所示，設(shè)置完成后單擊【確定】按鈕。

此時(shí)，在【代碼】視圖中的<head>標(biāo)簽內(nèi)可以查看相應(yīng)的html標(biāo)記。

<meta name="/x.Copyright" content="作者：汪慶洋 版權(quán)歸 齊市一中所有" />

1.9.3 設(shè)置刷新時(shí)間

要指定載入頁面刷新或者轉(zhuǎn)到其他頁面的時(shí)間，可設(shè)置文件頭部的刷新時(shí)間項(xiàng)，具體操作步驟如下。

（1）選中文檔窗口中的【代碼】視圖，將鼠標(biāo)光標(biāo)放在<head>標(biāo)簽中，執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【刷新】命令，啟用【刷新】對話框，如圖1-83所示。

【刷新】對話框中各選項(xiàng)的作用如下。

【延遲】選項(xiàng)：設(shè)置瀏覽器刷新頁面之前需要等待的時(shí)間，以秒為單位。若要瀏覽器在完成載入后立即刷新頁面，則在文本框中輸入“ 0”。

【操作】選項(xiàng)組：指定在規(guī)定的延遲時(shí)間后，瀏覽器是轉(zhuǎn)到另一個(gè) URL 還是刷新當(dāng)前頁面。若要打開另一個(gè) URL 而不刷新當(dāng)前頁面，應(yīng)單擊【瀏覽】按鈕，選擇要載入的頁面。

如果想顯示在線人員列表或浮動(dòng)框架中的動(dòng)態(tài)文檔，那么可以指定瀏覽器定時(shí)刷新當(dāng)前打開網(wǎng)頁。因?yàn)樗梢詫?shí)時(shí)地反映在線或離線用戶，以及動(dòng)態(tài)文檔實(shí)時(shí)改變的信息。

（2）在【刷新】對話框中設(shè)置刷新時(shí)間。

例如，要將網(wǎng)頁設(shè)定為每隔1分鐘自動(dòng)刷新，則【刷新】對話框的設(shè)置如圖1-84所示。

此時(shí)，在【代碼】視圖中的<head>標(biāo)簽內(nèi)可以查看相應(yīng)的html標(biāo)記。

<meta http-equiv="refresh" content="60" />

同樣，還可以通過meta標(biāo)簽實(shí)現(xiàn)對刷新時(shí)間的設(shè)置，具體設(shè)置如圖1-85所示。

如果想設(shè)置瀏覽引導(dǎo)主頁10秒后，自動(dòng)打開主頁，可在引導(dǎo)主頁的【刷新】對話框中進(jìn)行如圖1-86所示的設(shè)置。

1.9.4 設(shè)置說明信息

搜索引擎也可通過讀取meta 標(biāo)簽的說明內(nèi)容來查找信息，說明信息主要是設(shè)計(jì)者對網(wǎng)頁內(nèi)容的詳細(xì)說明，而關(guān)鍵字可以讓搜索引擎盡快搜索到網(wǎng)頁。設(shè)置網(wǎng)頁說明信息的具體操作步驟如下。

（1）選中文檔窗口中的【代碼】視圖，將鼠標(biāo)光標(biāo)放在<head>標(biāo)簽中，執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【說明】命令，啟用【說明】對話框。

（2）在【說明】對話框中設(shè)置說明信息。

例如，在網(wǎng)頁中設(shè)置為設(shè)計(jì)者提供“利用ASP腳本，按用戶需求進(jìn)行查詢”的說明信息，對話框中的設(shè)置如圖1-87所示。

此時(shí)，在【代碼】視圖中的<head>標(biāo)簽內(nèi)可以查看相應(yīng)的html標(biāo)記。

<meta name="description" content="利用ASP腳本，按用戶需求進(jìn)行查詢" />

同樣，還可以通過meta標(biāo)簽實(shí)現(xiàn)，具體設(shè)置如圖1-88所示。

1.9.5 設(shè)置某頁面中所有鏈接的基準(zhǔn)鏈接

基準(zhǔn)鏈接類似于相對路徑，若要設(shè)置網(wǎng)頁文檔中所有鏈接都以某個(gè)鏈接為基準(zhǔn)，可添加一個(gè)基本鏈接，但其他網(wǎng)頁的鏈接與此頁的基準(zhǔn)鏈接無關(guān)。設(shè)置基準(zhǔn)鏈接的具體操作如下。

（1）選中文檔窗口中的【代碼】視圖，將鼠標(biāo)光標(biāo)放在<head>標(biāo)簽中，執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【基礎(chǔ)】命令，彈出【基礎(chǔ)】對話框。

（2）在【基礎(chǔ)】對話框中設(shè)置【Href】和【目標(biāo)】兩個(gè)選項(xiàng)。這兩個(gè)選項(xiàng)的作用如下。

【Href】選項(xiàng)：設(shè)置頁面中所有鏈接的基準(zhǔn)鏈接。

【目標(biāo)】選項(xiàng)：指定所有鏈接的文檔應(yīng)在哪個(gè)框架或窗口中打開。

例如，當(dāng)前頁面中的所有鏈接都是以“http://www.sina.com”為基準(zhǔn)鏈接，而不是本服務(wù)器的URL地址，則【基礎(chǔ)】對話框中的設(shè)置如圖1-89所示。

此時(shí)，在【代碼】視圖中的<head>標(biāo)簽內(nèi)可以查看相應(yīng)的html標(biāo)記。

<base target="空白(_B)" />

一般情況下，在網(wǎng)頁的頭部插入基準(zhǔn)鏈接不帶有普遍性，只是針對個(gè)別網(wǎng)頁而言。當(dāng)個(gè)別網(wǎng)頁需要臨時(shí)改變服務(wù)器域名和IP地址時(shí)，才在其文件頭部插入基準(zhǔn)鏈接。當(dāng)需要大量、長久地改變鏈接時(shí)，最好在站點(diǎn)管理器中完成。

1.9.6 設(shè)置當(dāng)前文件與其他文件的關(guān)聯(lián)性

<head> 部分的<Iink >標(biāo)簽可以定義當(dāng)前文檔與其他文件之間的關(guān)系，它與 <body> 部分中文檔之間的 HTML 鏈接是不一樣的，其具體操作步驟如下。

（1）選中文檔窗口中的【代碼】視圖，將鼠標(biāo)光標(biāo)放在<head>標(biāo)簽中，執(zhí)行菜單【插入】→【HTML】→【文件頭標(biāo)簽】→【鏈接】命令，彈出【鏈接】對話框，如圖1-90所示。

（2）在【鏈接】對話框中設(shè)置相應(yīng)的選項(xiàng)。對話框中各選項(xiàng)的作用如下。

【Href】選項(xiàng)：用于定義與當(dāng)前文件相關(guān)聯(lián)文件的 URL。它并不表示通常HTML 意義上的鏈接文件，鏈接元素中指定的關(guān)系更復(fù)雜。

【ID】選項(xiàng)：為鏈接指定一個(gè)唯一的標(biāo)識符。

【標(biāo)題】選項(xiàng)：用于描述關(guān)系。該屬性與鏈接的樣式表有特別的關(guān)系。

【Rel】選項(xiàng)：指定當(dāng)前文檔與【Href】選項(xiàng)中文檔之間的關(guān)系。其值包括替代、樣式表、開始、下一步、上一步、內(nèi)容、索引、術(shù)語、版權(quán)、章、節(jié)、小節(jié)、附錄、幫助和書簽。若要指定多個(gè)關(guān)系，則用空格將各個(gè)值隔開。

【Rev】選項(xiàng)：指定當(dāng)前文檔與 【Href】選項(xiàng)中文檔之間的相反關(guān)系，與【Rel】選項(xiàng)相對。其值與【Rel】選項(xiàng)的相同。

1.10 設(shè)置鏈接文字的顏色

案例效果：Ch01\效果\鏈接文字的顏色\ index.htm。

制作要點(diǎn)：使用CSS樣式為文字添加鏈接顏色。

01 按快捷鍵【Ctrl+O】，打開光盤中的“Ch01\素材\鏈接文字的顏色\ index.htm”文件，如圖1-91所示。

02 執(zhí)行菜單【窗口】→【CSS樣式】命令，彈出【CSS樣式】面板，如圖1-92所示。

03單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ，彈出【新建CSS規(guī)則】對話框，如圖1-93所示。在【選擇器類型】選項(xiàng)組中選擇【高級】單選項(xiàng)，在【選擇器】選項(xiàng)的下拉列表中選擇【a:Iink】，在【定義在】選項(xiàng)組中選擇【僅對該文檔】單選項(xiàng)，單擊【確定】按扭，彈出【a:Iink的CSS規(guī)則定義】對話框。

04在對話框中選擇【分類】選項(xiàng)框中的【類型】選項(xiàng)，如圖1-94所示。在【大小】選項(xiàng)的數(shù)值框中輸入“25”，將【顏色】選項(xiàng)設(shè)為“白色（#FFFFFF）”，在【修飾】選項(xiàng)組中勾選【無】復(fù)選框，單擊【確定】按鈕，完成CSS樣式的設(shè)置。

05單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ，彈出【新建CSS規(guī)則】對話框，如圖1-95所示。在【選擇器類型】選項(xiàng)組中選擇【高級】單選項(xiàng)，在【選擇器】選項(xiàng)的下拉列表中選擇【a:visited】，在【定義在】選項(xiàng)組中選擇【僅對該文檔】單選項(xiàng)，單擊【確定】按扭，彈出【a:visited 的CSS規(guī)則定義】對話框。參照步驟（4）的方法在對話框中進(jìn)行設(shè)置，如圖1-96所示，單擊【確定】按鈕，完成CSS樣式的設(shè)置。

06 單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ，彈出【新建CSS規(guī)則】對話框，如圖1-97所示。在【選擇器類型】選項(xiàng)組中選擇【高級】單選項(xiàng)，在【選擇器】選項(xiàng)的下拉列表中選擇【a:hover】，在【定義在】選項(xiàng)組中選擇【僅對該文檔】單選項(xiàng)，單擊【確定】按扭，彈出【a:hover 的CSS規(guī)則定義】對話框。

07 在對話框中選擇【分類】選項(xiàng)框中的【類型】選項(xiàng)，如圖1-98所示。在【大小】選項(xiàng)的下拉列表中選擇“24”，在【樣式】選項(xiàng)的下拉列表中選擇【斜體】，將【顏色】選項(xiàng)設(shè)為“綠色（#CCFF00）”，在【修飾】選項(xiàng)組中勾選【下劃線】復(fù)選框，單擊【確定】按鈕，完成CSS樣式的設(shè)置。

08 單擊【CSS樣式】面板下方的【新建CSS規(guī)則】按鈕 ，彈出【新建CSS規(guī)則】對話框，如圖1-99所示。在【選擇器類型】選項(xiàng)組中選擇【高級】單選項(xiàng)，在【選擇器】選項(xiàng)的下拉列表中選擇【a:active】，在【定義在】選項(xiàng)中選擇【僅對該文檔】單選項(xiàng)，單擊【確定】按扭，彈出【a:active 的CSS規(guī)則定義】對話框。

09在對話框中將【顏色】選項(xiàng)設(shè)為“綠色（#BED5A9）”，在【修飾】選項(xiàng)組中勾選【下劃線】復(fù)選框，如圖1-100所示，單擊【確定】按鈕，完成CSS樣式的設(shè)置。

10 選中文字“藻類植物”，如圖1-101所示。執(zhí)行菜單【窗口】→【屬性】命令，彈出【屬性】面板，在【鏈接】選項(xiàng)的文本框中輸入“#”，如圖1-102所示，按【Enter】鍵，完成文字的鏈接。用相同的方式，為其他文字制作鏈接。

11 按快捷鍵【F12】預(yù)覽，效果如圖1-103所示。

1.11 改變頁面的標(biāo)題

案例效果：Ch01\效果\改變頁面標(biāo)題\index.htm。

制作要點(diǎn)：通過頁面屬性對話框改變頁面標(biāo)題。

01 按快捷鍵【Ctrl+O】，打開光盤中的“Ch01\素材\改變頁面標(biāo)題\index.htm”文件，如圖1-104所示。

02 執(zhí)行菜單【修改】→【頁面屬性】命令，彈出【頁面屬性】對話框，如圖1-105所示。

03 選擇【分類】選項(xiàng)框中的【標(biāo)題/編碼】選項(xiàng)，在【標(biāo)題】選項(xiàng)的文本框中輸入“=禮品專賣=”，其他選項(xiàng)為默認(rèn)值，如圖1-106所示。單擊【確定】按鈕，效果如圖1-107所示。

04 按快捷鍵【F12】預(yù)覽，效果如圖1-108所示。

1.12 改變頁面的背景顏色

案例效果：Ch01\效果\改變頁面顏色\ index.htm。

制作要點(diǎn)：通過頁面屬性對話框改變頁面顏色。

01 按快捷鍵【Ctrl+O】，打開光盤中的“Ch01\素材\改變頁面顏色\ index.htm”文件，如圖1-109所示。

02 執(zhí)行菜單【修改】→【頁面屬性】命令，彈出【頁面屬性】對話框，如圖1-110所示。

03 將【背景顏色】選項(xiàng)設(shè)為“米色（#F4E5BC）”，如圖1-111所示。單擊【確定】按鈕，完成背景顏色的設(shè)置。

04 按快捷鍵【F12】保存并預(yù)覽網(wǎng)頁，效果如圖1-112所示。