PPT課件-網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)教程

1、第02章 創(chuàng)建和管理站點(diǎn) 在建立網(wǎng)站之前，首先應(yīng)設(shè)計(jì)和規(guī)劃好整個站點(diǎn)，繼而才能進(jìn)行具體的網(wǎng)頁制作過程。創(chuàng)建好一個本地站點(diǎn)后，可以進(jìn)行管理站點(diǎn)操作，還可以創(chuàng)建文檔并將其保存在站點(diǎn)文件夾中。本章將主要介紹使用不同的方法創(chuàng)建和管理站點(diǎn)的方法，創(chuàng)建不同類型文檔的方法以及網(wǎng)頁制作的常用操作。本章知識點(diǎn) 創(chuàng)建本地站點(diǎn) 管理本地站點(diǎn) 網(wǎng)頁文檔的基本操作 設(shè)置文檔視圖 2.1 創(chuàng)建和管理本地站點(diǎn) 在Dreamweaver CS4中，可以創(chuàng)建本地站點(diǎn)，本地站點(diǎn)也就是在本地計(jì)算機(jī)中創(chuàng)建的站點(diǎn)，所有的站點(diǎn)內(nèi)容都保存在本地計(jì)算機(jī)中，本地計(jì)算機(jī)可以看成是網(wǎng)絡(luò)中的站點(diǎn)服務(wù)器。創(chuàng)建本地站點(diǎn)后，可以管理創(chuàng)建的站點(diǎn)，并且可以再

2、次編輯創(chuàng)建的站點(diǎn)。在創(chuàng)建站點(diǎn)之前，可以先規(guī)劃好站點(diǎn)，明確創(chuàng)建站點(diǎn)的方向并采用的方法，同時也是確定本地站點(diǎn)所要實(shí)現(xiàn)的功能。 站點(diǎn)的簡介 規(guī)劃站點(diǎn) 創(chuàng)建本地站點(diǎn) 管理本地站點(diǎn) 創(chuàng)建本地站點(diǎn)文件2.1.1 站點(diǎn)的簡介網(wǎng)站建立在互聯(lián)網(wǎng)基礎(chǔ)之上，是以計(jì)算機(jī)、網(wǎng)絡(luò)和通信技術(shù)為依托，通過一臺或多臺安裝了系統(tǒng)程序、服務(wù)程序及相關(guān)應(yīng)用程序的計(jì)算機(jī)，向訪問者提供相應(yīng)的服務(wù)?；ヂ?lián)網(wǎng)中包括無數(shù)的網(wǎng)站和客戶端瀏覽器，網(wǎng)站宿主于網(wǎng)站服務(wù)器中，它通過存儲和解析網(wǎng)頁內(nèi)容，向各種客戶端瀏覽器提供信息瀏覽服務(wù)。通過客戶端瀏覽器打開網(wǎng)站中的某個網(wǎng)頁時，網(wǎng)站服務(wù)軟件會在完成對網(wǎng)頁內(nèi)容的解析工作后，將解析的結(jié)構(gòu)回饋給網(wǎng)絡(luò)中要求訪問該網(wǎng)

3、頁的瀏覽器，該流程如圖所示。2.1.2 規(guī)劃站點(diǎn) 規(guī)劃時要明確網(wǎng)站的主題，搜集需要的信息等。規(guī)劃站點(diǎn)主要是規(guī)劃站點(diǎn)的結(jié)構(gòu)。創(chuàng)建站點(diǎn)既可以創(chuàng)建一個網(wǎng)站，又可以創(chuàng)建一個本地網(wǎng)頁文件的存儲地址，規(guī)劃好站點(diǎn)后即可開始創(chuàng)建站點(diǎn)。2.1.3 創(chuàng)建本地站點(diǎn) 在創(chuàng)建站點(diǎn)之前，一般在本地將整個網(wǎng)絡(luò)完成，然后再將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.3 創(chuàng)建本地站點(diǎn) 在創(chuàng)建站點(diǎn)之前，一般在本地將整個網(wǎng)絡(luò)完成，然后再將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.3 創(chuàng)建本地站點(diǎn) 在創(chuàng)建站點(diǎn)之前，一般在本地將整個網(wǎng)絡(luò)完成，然后再

4、將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.4 管理本地站點(diǎn)創(chuàng)建好本地站點(diǎn)后，可以進(jìn)行一些基本的編輯操作，例如重新編輯本地站點(diǎn)保存位置、名稱、刪除創(chuàng)建的本地站點(diǎn)等。選擇【站點(diǎn)】|【管理站點(diǎn)】命令，打開【管理站點(diǎn)】對話框，如圖所示。在該對話框中顯示了創(chuàng)建的本地站點(diǎn)。2.1.5 創(chuàng)建本地站點(diǎn)文件 創(chuàng)建好本地站點(diǎn)后，可以根據(jù)需要創(chuàng)建各欄目文件夾和文件，對于創(chuàng)建好的站點(diǎn)，也可以進(jìn)行再次編輯，或刪除和復(fù)制這些站點(diǎn)。2.2 網(wǎng)頁文檔的基本操作 創(chuàng)建了本地站點(diǎn)后，就可以創(chuàng)建文檔并將保存在站點(diǎn)文件夾中。Dreamweaver CS4提供了多種創(chuàng)建文檔的方法，可以創(chuàng)建

5、一個新的空白HTML文檔，或使用模板創(chuàng)建新文檔。同時，還提供了功能強(qiáng)大的【新建文檔】對話框來滿足用戶創(chuàng)建不同類型的文檔的需求。 創(chuàng)建空白網(wǎng)頁文檔 打開和保存網(wǎng)頁文檔 設(shè)置網(wǎng)頁文檔屬性 設(shè)置網(wǎng)頁文檔頭部信息2.2.1 創(chuàng)建空白網(wǎng)頁文檔 要使用Dreamweaver CS4創(chuàng)建空白網(wǎng)頁文檔，可以選擇【文件】【新建】命令，或按下Ctrl+N鍵，打開【新建文檔】對話框，如圖所示。在左側(cè)的列表框中選擇【空白頁】選項(xiàng)，在【頁面類型】列表框中選擇HTML選項(xiàng)，在【布局】列表框中選擇【無】選項(xiàng)，單擊【創(chuàng)建】按鈕，即可創(chuàng)建一個空白網(wǎng)頁文檔。創(chuàng)建的網(wǎng)頁文檔如圖所示。2.2.2 打開和保存網(wǎng)頁文檔 網(wǎng)頁的設(shè)計(jì)不僅涉

6、及各種軟件的操作技術(shù)，還關(guān)聯(lián)到設(shè)計(jì)者對生活的理解和體驗(yàn)。網(wǎng)頁設(shè)計(jì)就是要把適合的信息傳達(dá)給適合的觀眾，要設(shè)計(jì)出一個既好看又實(shí)用的網(wǎng)頁，就必須要遵循一些必要的原則。1.3 Dreamweaver CS4基礎(chǔ) Dreamewaver系列軟件集合了網(wǎng)頁制作和網(wǎng)站管理于一身的【所見即所得】的網(wǎng)頁制作軟件，它強(qiáng)大的功能和清晰的操作界面?zhèn)涫軓V大網(wǎng)頁制作用戶的歡迎。Dreamewaver CS4作為Dreamewaver系列中的最新版本，在增強(qiáng)了面向?qū)I(yè)人士的基本工具和可視技術(shù)外，同時提供了功能強(qiáng)大、開放式且基于標(biāo)準(zhǔn)的開發(fā)模式，可以輕而易舉地制作出跨平臺和瀏覽器的動感效果網(wǎng)頁。 Dreamweaver CS4

7、簡介 Dreamweaver CS4的改進(jìn) Dreamweaver CS4的工作界面1.3.1 Dreamweaver CS4簡介 Dreamweaver CS4是Adobe公司最新推出的網(wǎng)頁制作軟件，用于對網(wǎng)站、網(wǎng)頁和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)，廣泛用于網(wǎng)頁制作和網(wǎng)站管理。1.3.2 Dreamweaver CS4的改進(jìn) Dreamweaver CS4相交之前Dreamweaver系列產(chǎn)品，有了很大地改進(jìn)，使用了全新的工作界面，使得插入網(wǎng)頁元素更加方便，并且針對CSS樣式表，與前幾款系列產(chǎn)品相比，使用Dreamweaver CS4的CSS樣式表，可以創(chuàng)建新的CSS規(guī)則，并對每個屬性所

8、適合的層疊樣式提供簡單明確的解釋。下面主要介紹了Dreamweaver CS4的一些新增功能。1.3.3Dreamweaver CS4的工作界面 Dreamweaver CS4的工作界面秉承了Dreamweaver系列產(chǎn)品一貫的簡潔、高效和易用性，多數(shù)功能都能在工作界面中很方便地找到。工作界面主要由【文檔】窗口(設(shè)計(jì)區(qū))、菜單欄、狀態(tài)欄、面板組和【屬性】面板組成，如圖所示。第02章 創(chuàng)建和管理站點(diǎn) 在建立網(wǎng)站之前，首先應(yīng)設(shè)計(jì)和規(guī)劃好整個站點(diǎn)，繼而才能進(jìn)行具體的網(wǎng)頁制作過程。創(chuàng)建好一個本地站點(diǎn)后，可以進(jìn)行管理站點(diǎn)操作，還可以創(chuàng)建文檔并將其保存在站點(diǎn)文件夾中。本章將主要介紹使用不同的方法創(chuàng)建和管理

9、站點(diǎn)的方法，創(chuàng)建不同類型文檔的方法以及網(wǎng)頁制作的常用操作。本章知識點(diǎn) 創(chuàng)建本地站點(diǎn) 管理本地站點(diǎn) 網(wǎng)頁文檔的基本操作 設(shè)置文檔視圖 2.1 創(chuàng)建和管理本地站點(diǎn) 在Dreamweaver CS4中，可以創(chuàng)建本地站點(diǎn)，本地站點(diǎn)也就是在本地計(jì)算機(jī)中創(chuàng)建的站點(diǎn)，所有的站點(diǎn)內(nèi)容都保存在本地計(jì)算機(jī)中，本地計(jì)算機(jī)可以看成是網(wǎng)絡(luò)中的站點(diǎn)服務(wù)器。創(chuàng)建本地站點(diǎn)后，可以管理創(chuàng)建的站點(diǎn)，并且可以再次編輯創(chuàng)建的站點(diǎn)。在創(chuàng)建站點(diǎn)之前，可以先規(guī)劃好站點(diǎn)，明確創(chuàng)建站點(diǎn)的方向并采用的方法，同時也是確定本地站點(diǎn)所要實(shí)現(xiàn)的功能。 站點(diǎn)的簡介 規(guī)劃站點(diǎn) 創(chuàng)建本地站點(diǎn) 管理本地站點(diǎn) 創(chuàng)建本地站點(diǎn)文件2.1.1 站點(diǎn)的簡介網(wǎng)站建立在互聯(lián)

10、網(wǎng)基礎(chǔ)之上，是以計(jì)算機(jī)、網(wǎng)絡(luò)和通信技術(shù)為依托，通過一臺或多臺安裝了系統(tǒng)程序、服務(wù)程序及相關(guān)應(yīng)用程序的計(jì)算機(jī)，向訪問者提供相應(yīng)的服務(wù)?；ヂ?lián)網(wǎng)中包括無數(shù)的網(wǎng)站和客戶端瀏覽器，網(wǎng)站宿主于網(wǎng)站服務(wù)器中，它通過存儲和解析網(wǎng)頁內(nèi)容，向各種客戶端瀏覽器提供信息瀏覽服務(wù)。通過客戶端瀏覽器打開網(wǎng)站中的某個網(wǎng)頁時，網(wǎng)站服務(wù)軟件會在完成對網(wǎng)頁內(nèi)容的解析工作后，將解析的結(jié)構(gòu)回饋給網(wǎng)絡(luò)中要求訪問該網(wǎng)頁的瀏覽器，該流程如圖所示。2.1.2 規(guī)劃站點(diǎn) 規(guī)劃時要明確網(wǎng)站的主題，搜集需要的信息等。規(guī)劃站點(diǎn)主要是規(guī)劃站點(diǎn)的結(jié)構(gòu)。創(chuàng)建站點(diǎn)既可以創(chuàng)建一個網(wǎng)站，又可以創(chuàng)建一個本地網(wǎng)頁文件的存儲地址，規(guī)劃好站點(diǎn)后即可開始創(chuàng)建站點(diǎn)。2.1

11、.3 創(chuàng)建本地站點(diǎn) 在創(chuàng)建站點(diǎn)之前，一般在本地將整個網(wǎng)絡(luò)完成，然后再將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.3 創(chuàng)建本地站點(diǎn) 在創(chuàng)建站點(diǎn)之前，一般在本地將整個網(wǎng)絡(luò)完成，然后再將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.3 創(chuàng)建本地站點(diǎn) 在創(chuàng)建站點(diǎn)之前，一般在本地將整個網(wǎng)絡(luò)完成，然后再將站點(diǎn)上傳到Web服務(wù)器上。創(chuàng)建本地站點(diǎn)可以使用向?qū)?chuàng)建也可以使用高級面板創(chuàng)建。2.1.4 管理本地站點(diǎn)創(chuàng)建好本地站點(diǎn)后，可以進(jìn)行一些基本的編輯操作，例如重新編輯本地站點(diǎn)保存位置、名稱、刪除創(chuàng)建的本地站點(diǎn)等。選擇【站點(diǎn)】|【

12、管理站點(diǎn)】命令，打開【管理站點(diǎn)】對話框，如圖所示。在該對話框中顯示了創(chuàng)建的本地站點(diǎn)。2.1.5 創(chuàng)建本地站點(diǎn)文件 創(chuàng)建好本地站點(diǎn)后，可以根據(jù)需要創(chuàng)建各欄目文件夾和文件，對于創(chuàng)建好的站點(diǎn)，也可以進(jìn)行再次編輯，或刪除和復(fù)制這些站點(diǎn)。2.2 網(wǎng)頁文檔的基本操作 創(chuàng)建了本地站點(diǎn)后，就可以創(chuàng)建文檔并將保存在站點(diǎn)文件夾中。Dreamweaver CS4提供了多種創(chuàng)建文檔的方法，可以創(chuàng)建一個新的空白HTML文檔，或使用模板創(chuàng)建新文檔。同時，還提供了功能強(qiáng)大的【新建文檔】對話框來滿足用戶創(chuàng)建不同類型的文檔的需求。 創(chuàng)建空白網(wǎng)頁文檔 打開和保存網(wǎng)頁文檔 設(shè)置網(wǎng)頁文檔屬性 設(shè)置網(wǎng)頁文檔頭部信息2.2.1 創(chuàng)建空白

13、網(wǎng)頁文檔 要使用Dreamweaver CS4創(chuàng)建空白網(wǎng)頁文檔，可以選擇【文件】【新建】命令，或按下Ctrl+N鍵，打開【新建文檔】對話框，如圖所示。在左側(cè)的列表框中選擇【空白頁】選項(xiàng)，在【頁面類型】列表框中選擇HTML選項(xiàng)，在【布局】列表框中選擇【無】選項(xiàng)，單擊【創(chuàng)建】按鈕，即可創(chuàng)建一個空白網(wǎng)頁文檔。創(chuàng)建的網(wǎng)頁文檔如圖所示。2.2.2 打開和保存網(wǎng)頁文檔 在使用Dreamweaver CS4制作網(wǎng)頁時，創(chuàng)建好所需類型的網(wǎng)頁文檔后，可以對網(wǎng)頁文檔進(jìn)行適當(dāng)?shù)木庉嫴僮?，打開和保存文檔是最常用的命令。2.2.3 設(shè)置網(wǎng)頁文檔屬性 網(wǎng)頁文檔的屬性主要包括頁面標(biāo)題、背景圖像、背景顏色、文本和鏈接顏色、邊

14、距等。其中，【頁面標(biāo)題】確定和命名了文檔的名稱，【背景圖像】和【背景顏色】決定了文檔顯示的外觀，【文本顏色】和【鏈接顏色】幫助站點(diǎn)訪問者區(qū)別文本和超文本鏈接等。2.2.4 設(shè)置網(wǎng)頁文檔頭部信息 每一個網(wǎng)頁都是由HTML腳本所組成的*.html文件，一個完整的HTML網(wǎng)頁文件包含head和body兩個部分，head部分包括許多不可見的信息，例如語言編碼、版權(quán)聲明、關(guān)鍵字等。2.3 設(shè)置視圖在Dreamweaver CS4中，可以根據(jù)需要切換【設(shè)計(jì)】、【代碼】和【拆分】等視圖，還可以使用標(biāo)尺和網(wǎng)格來精確定位網(wǎng)頁文檔中的元素。此外，還延續(xù)了先前產(chǎn)品中的跟蹤圖像功能，可以參照跟蹤圖像設(shè)計(jì)網(wǎng)頁文檔內(nèi)容。

15、 切換文檔視圖 使用可視化助理 使用跟蹤圖像2.3.1 切換文檔視圖 文檔窗口顯示了當(dāng)前文檔，選擇【查看】命令，在下拉菜單中文檔視圖，可以選擇【設(shè)計(jì)】視圖、【代碼】視圖、【拆分代碼】視圖、【代碼】和【設(shè)計(jì)】視圖。此外，還可以使用【實(shí)時視圖】和【實(shí)時代碼】視圖 2.3.2 使用可視化助理 Dreamweaver CS4提供了【標(biāo)尺】和【網(wǎng)格】功能，用于輔助設(shè)計(jì)網(wǎng) 頁文檔。【標(biāo)尺】功能可以輔助測量、組織和規(guī)劃布局?！揪W(wǎng)格】功能可以絕對定位的網(wǎng)頁元素在移動時自動靠齊網(wǎng)格，還可以通過指定網(wǎng)格設(shè)置更改網(wǎng)格或控制靠齊行為。2.3.3 使用跟蹤圖像 在Dreamweaver CS4中，使用跟蹤圖像功能可以載

16、入某個網(wǎng)頁的布局(或圖片)，然后借助該網(wǎng)頁的布局來安排正在制作的網(wǎng)頁布局。選擇【查看】|【跟蹤圖像】|【載入】命令，打開【選擇圖像源文件】對話框，如圖所示。 第03章 規(guī)劃網(wǎng)頁布局 構(gòu)建好本地站點(diǎn)后，可以開始規(guī)劃網(wǎng)頁布局。表格和框架是常用的布局工具，表格在網(wǎng)頁中不僅可以排列數(shù)據(jù)，還可以對頁面中的圖像、文本、動畫等元素進(jìn)行準(zhǔn)確的定位，是頁面顯得整齊有序、分類明確，便于瀏覽。使用表格布局網(wǎng)頁，在不同平臺和不同分辨率的瀏覽器中都能保持原有的布局。使用框架規(guī)劃網(wǎng)頁，可以把網(wǎng)頁分成幾個部分，每個部分都是一個獨(dú)立的HTML頁。本章主要介紹使用表格和框架規(guī)劃網(wǎng)頁布局。本章知識點(diǎn) 使用表格 編輯表格 使用框架

17、 設(shè)置框架屬性3.1 表格的基礎(chǔ)知識 網(wǎng)頁向?yàn)g覽者提供的信息是多樣化的，例如文字、圖像、Flash動畫等。如何使這些網(wǎng)頁元素在網(wǎng)頁中的合理位置上顯示出來，使網(wǎng)頁變得有條理和美觀，是設(shè)計(jì)人員在著手設(shè)計(jì)網(wǎng)頁之前必須考慮的事情。表格的作用就在于幫助設(shè)計(jì)者高效、準(zhǔn)確地定位各種網(wǎng)頁數(shù)據(jù)，直觀、鮮明地表達(dá)設(shè)計(jì)者的思想。認(rèn)識表格表格模式 插入表格 3.1.1 認(rèn)識表格表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對文本和圖形進(jìn)行布局的工具。表格由一行或多行組成，每行又由一個或多個單元格組成。當(dāng)選定了表格或表格中有插入點(diǎn)時，Dreamweaver會顯示表格寬度和每個表格列的列寬。寬度旁邊是表格標(biāo)題菜單與列標(biāo)題菜單

18、的箭頭。使用這些菜單可以快速訪問與表格相關(guān)的常用命令?？梢詥⒂没蚪脤挾群筒藛巍Ｈ绻达@示表格的寬度或列的寬度，則說明沒有在HTML代碼中指定該表格或列的寬度。如果出現(xiàn)兩個數(shù)，則說明【設(shè)計(jì)】視圖中顯示的表格可視寬度與【HTML】代碼中指定的寬度不一致。當(dāng)拖動表格的右下角來調(diào)整表格的大小，或者添加到單元格中的內(nèi)容比該單元格的設(shè)置寬度大時，會出現(xiàn)這種情況。3.1.2 表格模式 在網(wǎng)頁文檔中，表格是用于整理復(fù)雜的數(shù)據(jù)內(nèi)容，安排網(wǎng)頁文檔的整體布局。利用表格來設(shè)計(jì)網(wǎng)頁的布局，可以不受網(wǎng)頁形態(tài)的限制，并在不同分辨率下維持原有的頁面布局。典型的利用表格設(shè)計(jì)的網(wǎng)頁如圖所示。3.1.3 插入表格 Dreamwe

19、aver CS4中，表格可以用于制作簡單的圖表，使用表格來顯示數(shù)據(jù)，可以更加方便地進(jìn)行查看、修改以及分析等目的。表格不僅可以為頁面進(jìn)行宏觀的布局，還可以使頁面中的文本、圖像等元素更有條理。插入表格后，還可以在表格中插入嵌套表格。3.2 編輯表格 創(chuàng)建表格后，可以對表格進(jìn)行編輯，包括合并和拆分單元格、添加和刪除單元格、設(shè)置單元格和表格屬性等，并且可以導(dǎo)入和導(dǎo)出表格。 選擇表格 表格的基本操作 表格的其他操作 【擴(kuò)展表格模式】3.2.1 選擇表格 要對網(wǎng)頁元素進(jìn)行編輯或設(shè)置，首先需要選擇表格。在Dreamewaver CS4中，可以一次選擇整個表、行或列，也可以選擇連續(xù)的單元格。3.2.2 表格的

20、基本操作 在HTML頁中的表格，可以設(shè)置表格單元格的屬性來改變外觀，也可以對網(wǎng)頁中的表格及單元格進(jìn)行調(diào)整大小、添加及刪除行列、合并拆分單元格等操作。3.2.3 表格的其他操作 對于插入的表格，除了上述的一些基本操作外，還可以設(shè)置排序表格，導(dǎo)入和導(dǎo)出表格。3.2.4 【擴(kuò)展表格模式】 【擴(kuò)展表格模式】會臨時向網(wǎng)頁文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框以使編輯操作更加容易。使用該模式，可以選擇表格中的項(xiàng)目或者精確地放置插入點(diǎn)，從而避免無意中選中該圖像或表格單元格。3.3 使用框架在網(wǎng)絡(luò)帶寬十分有限的情況下，如何提高網(wǎng)頁的下載速度，是設(shè)計(jì)網(wǎng)頁時必須考慮的問題。如果多個網(wǎng)頁擁有相同的

21、導(dǎo)航區(qū)，只是內(nèi)容有所不同，則可以考慮使用框架來設(shè)計(jì)網(wǎng)頁布局。這樣瀏覽者在查看不同內(nèi)容時，便無需每次都下載整個頁面，而可以保持導(dǎo)航部分不變，只下載網(wǎng)頁中需要更新的內(nèi)容部分即可，從而能夠極大提高網(wǎng)頁的下載速度。這樣的網(wǎng)頁也稱為框架頁，其最典型的應(yīng)用便是當(dāng)前十分流行的各種論壇。 框架的概念 使用框架布局網(wǎng)頁文檔3.3.1 框架的概念 框架頁面通過框架將網(wǎng)頁分成多個獨(dú)立的區(qū)域，在每個區(qū)域可以單獨(dú)顯示不同的網(wǎng)頁，每個區(qū)域可以獨(dú)立翻滾。正是基于框架頁面的這種特點(diǎn)，使用框架可以極大豐富網(wǎng)頁設(shè)計(jì)的自由度，在不同的頁面部分設(shè)置不同的網(wǎng)頁屬性，尤其是對于頁面間的鏈接，可以使頁面的結(jié)構(gòu)變化自如。3.3.2 使用框架

22、布局網(wǎng)頁文檔 使用框架布局網(wǎng)頁文檔最方便的方法就是創(chuàng)建框架網(wǎng)頁文檔，此外，對于普通的HTML網(wǎng)頁文檔，也可以應(yīng)用框架。3.4 編輯框架 創(chuàng)建好框架后，可以對框架進(jìn)行適當(dāng)?shù)木庉嫴僮?，主要包括選擇框架、設(shè)置框架屬性。要注意的是框架并不是在所有瀏覽器中都可以顯示的，對于不能顯示的瀏覽器，就需要在標(biāo)簽中輸入提示信息。 框架的基本操作 設(shè)置框架和設(shè)置框架集屬性 處理瀏覽器不能顯示的頁面3.4.1 框架的基本操作 編輯框架的操作主要包括創(chuàng)建嵌套框架、選擇框架以及設(shè)置框架的屬性等。3.4.2 設(shè)置框架和設(shè)置框架集屬性 在制作網(wǎng)頁的過程中，在框架的【屬性】面板中可以定義框架名稱、源文件、頁邊距等屬性；在框架集

23、的【屬性】面板中可以定義框架集邊線顏色、寬度等屬性。3.4.3 處理瀏覽器不能顯示的頁面 如果瀏覽器不支持框架，則無法顯示框架集和框架文檔內(nèi)容。在Dreamweaver CS4中，可以在框架集文件中創(chuàng)建位于和標(biāo)記之間的提示信息，如果當(dāng)前瀏覽器不能顯示框架文檔內(nèi)容，將顯示和標(biāo)記之間的提示信息。第04章 使用CSS樣式精美的網(wǎng)頁離不開CSS技術(shù)，使用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的控制。CSS樣式的全名為Cascading Style Sheet，它可以定義HTML標(biāo)簽，按列表的語法將許多文字、圖片、表格、表單、圖層等設(shè)計(jì)加以格式設(shè)定。在HTML語法中，

24、常常需要使用到一些設(shè)定顏色、字體大小或框線粗細(xì)之類的標(biāo)簽，而CSS在開始制作網(wǎng)頁時就將這些設(shè)定做好，不需要在制作網(wǎng)頁文檔時再反復(fù)寫入同樣的標(biāo)簽。本章知識點(diǎn) CSS樣式的概念 在網(wǎng)頁文檔中使用CSS樣式 編輯CSS樣式 設(shè)置CSS樣式4.1 CSS樣式的概念 CSS樣式是Cascading Style Sheets(層疊樣式單)的簡稱，也可以稱為【級聯(lián)樣式表】，它是一種網(wǎng)頁制作的新技術(shù)，利用它可以對網(wǎng)頁中的文本進(jìn)行精確的格式化控制。 CSS樣式簡介 CSS規(guī)則 4.1.1 CSS樣式簡介 CSS，是用來控制一個網(wǎng)頁文檔中的某文本區(qū)域外觀的一組格式屬性。使用CSS能夠簡化網(wǎng)頁代碼，加快下載速度，減

25、少上傳的代碼數(shù)量，從而可以避免重復(fù)操作。CSS樣式表是對HTML語法的一次重達(dá)革新，它位于文檔的區(qū)，作用范圍由CLASS或其他任何符合CSS規(guī)范的文本來設(shè)置。對于其他現(xiàn)有的文檔，只要其中的CSS樣式符合規(guī)范，Dreamweaver就能識別它們。4.1.2 CSS規(guī)則 CSS規(guī)則由兩部分組成：選擇器和聲明(大多數(shù)情況下為包含多個聲明的代碼塊)。選擇器是標(biāo)識已設(shè)置格式元素的術(shù)語，例如 p、h1、類名稱或ID，而聲明塊則用于定義樣式屬性。例如下面CSS規(guī)則中，h1 是選擇器，大括號()之間的所有內(nèi)容都是聲明塊。4.2 在網(wǎng)頁文檔中使用CSS樣式 在Dreamweaver CS4中，可以創(chuàng)建一個CSS

26、樣式，然后應(yīng)用于到網(wǎng)頁文檔的某個部分，完成文本的格式化。 創(chuàng)建CSS樣式 【CSS樣式】面板表格的其他操作 新建CSS規(guī)則 應(yīng)用CSS樣式4.2.1 創(chuàng)建CSS樣式表 在Dreamweaver CS4中，可以很方便地創(chuàng)建、編輯CSS樣式表定義，并且不需要直接編輯CSS代碼，即使不懂CSS層疊樣式表定義語法的用戶，也能輕松完成定義。Dreamweaver CS4提供了功能非常強(qiáng)大的CSS樣式編輯器，不但可以在頁面中直接插入CSS樣式定義，還可以創(chuàng)建、編輯獨(dú)立的CSS樣式表文件。4.2.2 【CSS樣式】面板 使用【CSS樣式】面板可以跟蹤影響當(dāng)前所選頁面元素的CSS規(guī)則和屬性，也可以跟蹤網(wǎng)頁文檔

27、可用的所有規(guī)則和屬性。 選擇【窗口】|【CSS樣式】命令，打開【CSS樣式】面板。在該面板頂部的有【全部】和【正在】兩種模式，單擊相應(yīng)的按鈕，即可在兩種模式之間切換，并且可以在這兩種模式下進(jìn)行修改CSS屬性操作。4.2.3 新建CSS規(guī)則創(chuàng)建一個CSS規(guī)則后，可以用來自動完成HTML標(biāo)簽的格式設(shè)置或者class或ID屬性所標(biāo)識的文本范圍的格式設(shè)置。將光標(biāo)移至網(wǎng)頁文檔中，選擇【格式】|【CSS樣式】|【新建】命令，打開【新建CSS規(guī)則】對話框，如圖所示。4.2.4 應(yīng)用CSS樣式 新建CSS規(guī)則樣式后，就可以利用該樣式快速設(shè)置頁面上的網(wǎng)頁元素樣式，使網(wǎng)站具有統(tǒng)一的風(fēng)格了。在Dreamweaver

28、 CS4中，要對文檔指定元素應(yīng)用CSS樣式，可以在【屬性】面板中設(shè)定、在標(biāo)簽處設(shè)定、在【標(biāo)簽檢查器】面板組的【屬性】面板中和右擊文檔選擇快捷菜單設(shè)定。4.3 編輯CSS樣式 新建好CSS樣式后，如果要對CSS樣式進(jìn)行編輯等操作。對CSS樣式的編輯操作主要包括修改CSS樣式屬性、設(shè)置CSS樣式首選參數(shù)以及鏈接和導(dǎo)入CSS樣式。 設(shè)置CSS樣式首選參數(shù) 修改CSS樣式 移動CSS規(guī)則 鏈接和導(dǎo)入CSS樣式 4.3.1 設(shè)置CSS樣式首選參數(shù) CSS樣式首選參數(shù)用于定義在Dreamweaver中編寫CSS樣式的代碼的方式。選擇【編輯】|【首選參數(shù)】命令，打開【首選參數(shù)】對話框，在【分類】列表框中選擇

29、【CSS樣式】選項(xiàng)，打開該選項(xiàng)對話框，如圖所示。4.3.2 修改CSS樣式 CSS樣式表通常包含一個或多個規(guī)則?？梢栽凇綜SS樣式】面板中修改已經(jīng)創(chuàng)建的CSS樣式表中的各個規(guī)則，也可以直接在CSS樣式表中操作。4.3.3 移動CSS規(guī)則在Dreamweaver CS4中的CSS規(guī)則，可以很方便地移動到不同位置，例如將規(guī)則在文檔間移動、從文檔頭移動到外部樣式表、在外部CSS文件之間移動等等。如果移動的CSS規(guī)則與目標(biāo)樣式表中的規(guī)則沖突，系統(tǒng)會打開一個【存在同名規(guī)則】對話框，將移動的規(guī)則放在目標(biāo)樣式表中緊靠沖突規(guī)則的旁邊。4.3.4 鏈接和導(dǎo)入CSS樣式單擊【CSS樣式】面板中的【附加樣式表】按鈕

30、，打開【鏈接外部樣式表】對話框，如圖所示。第04章 制作基本網(wǎng)頁(一)文本與圖像是網(wǎng)頁制作中最重要的兩大元素。文本組成了大部分網(wǎng)頁的結(jié)構(gòu)；而圖像在頁面中的恰當(dāng)運(yùn)用，不僅使得網(wǎng)頁更加美觀，而且令網(wǎng)頁表達(dá)信息更加直觀，吸引了瀏覽者。本章主要介紹了在通常網(wǎng)頁制作過程中如添加并設(shè)置各種文本、圖像元素。通過本章知識的學(xué)習(xí)，用戶可以掌握各種編輯網(wǎng)頁文本與圖像的方法，包括設(shè)置文本的格式、使用統(tǒng)一樣式、添加按鈕、插入背景照片、創(chuàng)建鼠標(biāo)指針經(jīng)過圖像、導(dǎo)航條等。本章知識點(diǎn) 插入文本 編輯文本 插入圖像 編輯圖像 制作鼠標(biāo)特效5.1 在網(wǎng)頁中插入文本 文本時網(wǎng)頁中最常見也是運(yùn)用最廣泛的元素之一，是網(wǎng)頁內(nèi)容的核心部分

31、。在網(wǎng)頁中輸入文本與在其他應(yīng)用軟件，例如Word、Excel等文字處理軟件中添加文本一樣方便，可以直接輸入文本，也可以從其他文檔中復(fù)制文本，還可以插入水平線和特殊字符等。 插入文本 插入水平線和日期 編輯文本5.1.1 插入文本 在Dreamweaver CS4中輸入文本是非常簡單的，其輸入方式與其他文本處理軟件中的文本輸入方式十分類似，可以直接輸入文本內(nèi)容，也可以復(fù)制、粘帖文本內(nèi)容。 5.1.2 插入水平線和日期 水平線對于信息的組織很有用，在頁面中，可以使用一條或多條水平線來可視化分隔文本和對象，使用段落更加分明和更具層次感。插入日期對象，可以以任何格式插入當(dāng)前的日期(可以包括時間)，并且

32、在每次保存文件時都會自動更新該日期。5.1.3 編輯文本 對于插入的文本，可以進(jìn)行相應(yīng)的編輯，使枯燥的文本更顯生動。編輯文本的操作主要指設(shè)置文本的基本格式，例如文本字體、字體顏色、對齊方式等。5.2 插入圖像圖像是網(wǎng)頁上最常用的對象之一，制作精美的圖像可以大大增強(qiáng)網(wǎng)頁的視覺效果。圖像所蘊(yùn)涵的信息量對于網(wǎng)頁而言越加顯得重要。在網(wǎng)頁中插入圖像通常是用于添加圖形界面(例如按鈕)、創(chuàng)建具有視覺感染力的內(nèi)容(例如照片、背景等)或交互式設(shè)計(jì)元素(例如鼠標(biāo)指針經(jīng)過圖像或圖像地圖)。 網(wǎng)頁中的圖像格式 在網(wǎng)頁中插入圖像5.2.1 網(wǎng)頁中的圖像格式圖像是網(wǎng)頁中非常重要的內(nèi)容。在Dreamweaver CS4中，

33、可以在頁面中插入圖像，并利用軟件自帶的功能設(shè)置各種圖像效果，例如導(dǎo)航欄、鏈接和鼠標(biāo)經(jīng)過效果等。網(wǎng)頁中常用的圖像文件格式有JPEG(JPG)、GIF和PNG3種，這3種圖像格式具體介紹如下。 GIF(圖形交換格式)：GIF文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導(dǎo)航條、按鈕、圖標(biāo)或其他具有統(tǒng)一色彩和色調(diào)的圖像。 JPEG(聯(lián)合圖像專家組標(biāo)準(zhǔn))：JPEG文件格式是用于攝影或連續(xù)色調(diào)圖像的高級圖片文件格式，這種格式的圖片可以包含數(shù)百萬種顏色。 PNG(可移植網(wǎng)絡(luò)圖形)：PNG文件格式是一種替代GIF格式的無專利權(quán)限制的格式，這種格式的圖片具備對索引色、灰度、真彩

34、色圖像以及alpha通道透明的支持。5.2.2 在網(wǎng)頁中插入圖像 如果網(wǎng)頁中的內(nèi)容全是密密麻麻的文字，很容易產(chǎn)生厭煩感，往往不能吸引瀏覽者的眼球。所以任何精美的網(wǎng)頁中可能沒有文本，但不可能沒有圖像等多媒體元素，這足見圖像在網(wǎng)頁中的作用。在網(wǎng)頁中適當(dāng)?shù)夭迦雸D像可以使網(wǎng)頁增色不少，更重要是可以借此直觀地向?yàn)g覽者表達(dá)信息。5.3 編輯圖像在網(wǎng)頁中插入圖像后，可以進(jìn)行設(shè)置圖像屬性、對齊方式等編輯操作，這些編輯操作可以直接影響網(wǎng)頁的整體效果。 設(shè)置圖像屬性 使用圖像編輯器5.3.1 設(shè)置圖像屬性 設(shè)置圖片屬性，主要包括設(shè)置圖片的大小、對齊方式、邊距等操作。5.3.2 使用圖像編輯器 圖像編輯器，主要分為

35、內(nèi)部圖像編輯器和外部圖像編輯器。第06章 制作基本網(wǎng)頁(二)在前面章節(jié)中已經(jīng)介紹了插入圖像和文本元素來制作最基本的網(wǎng)頁文檔。隨著網(wǎng)絡(luò)的發(fā)展，多媒體在網(wǎng)絡(luò)上得到了更廣泛的應(yīng)用，因此，對網(wǎng)頁設(shè)計(jì)頁提出了更高地要求。在Dreamweaver CS4中，可以快速、方便地為網(wǎng)頁添加聲音、影片等多媒體內(nèi)容，使網(wǎng)頁更加生動。本章主要介紹了在網(wǎng)頁文檔中中插入導(dǎo)航條、跳轉(zhuǎn)菜單和多媒體內(nèi)容，然后針對一些特殊網(wǎng)頁，介紹了制作網(wǎng)頁鼠標(biāo)特效和滾動條的方法。本章知識點(diǎn) 創(chuàng)建導(dǎo)航條 插入多媒體內(nèi)容 制作鼠標(biāo)特效 創(chuàng)建滾動條6.1 創(chuàng)建導(dǎo)航條 導(dǎo)航條是由一個或多個圖像組成，它的顯示隨著動作的改變而改變，因此，在使用導(dǎo)航條命令

36、之前，應(yīng)首先創(chuàng)建一個用于導(dǎo)航條的圖像集。根據(jù)鼠標(biāo)的動作，【導(dǎo)航條】的圖像通常有以下4種狀態(tài)。 插入導(dǎo)航條 編輯導(dǎo)航條 6.1.1 插入導(dǎo)航條 要在網(wǎng)頁文檔中插入導(dǎo)航條，單擊【插入】工具欄中的【常用】選項(xiàng)卡，打開【常用】插入欄，單擊【圖像】按鈕右邊的下拉箭頭，在彈出的菜單中選擇【導(dǎo)航條】命令，打開【插入導(dǎo)航條】對話框，如圖所示。6.1.2 編輯導(dǎo)航條 用戶在文檔創(chuàng)建導(dǎo)航條后，選擇【修改】|【導(dǎo)航條】命令，打開【修改導(dǎo)航條】對話框，如圖所示。在該對話框中可以添加圖像，或從導(dǎo)航條中刪除圖像。用于更改圖像或圖像組、更改單擊項(xiàng)目時所打開的文件、選擇在不同的窗口或框架中打開文件以及重新排序圖像。6.2 插

37、入多媒體內(nèi)容在網(wǎng)頁文檔中的插入多媒體內(nèi)容主要包括Flash動畫、音頻文件、視頻文件，插入這些對象可以增強(qiáng)網(wǎng)頁的互動性。 插入Flash動畫 插入Flashpaper 插入FLV文件 插入聲音 插入其他媒體對象6.2.1 插入Flash動畫 目前，F(xiàn)lash動畫使網(wǎng)頁上最流行的動畫格式，被大量用于網(wǎng)頁中。在Dreamweaver中，F(xiàn)lash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內(nèi)容加入到一個文件中，并能制作較好的動畫效果，同時還使用了優(yōu)化的算法將多媒體數(shù)據(jù)進(jìn)行壓縮，是文件變得很小，因此，非常適合在網(wǎng)上傳播。6.2.2 插入Flashpaper在瀏覽器中打開包含F(xiàn)lashPape

38、r文檔的頁面時，可以瀏覽FlashPaper文檔中的所有頁面，并且不需要加載新的Web頁。要在網(wǎng)頁文檔中插入FlashPaper，將光標(biāo)移至要插入Flash文本的位置，選擇【插入】|【媒體】|FlashPaper命令，打開【插入FlashPaper】對話框，如圖所示。6.2.3 插入FLV文件 FLV文件也就是視頻文件，在Dreamweaver中插入一個顯示FLV文件的SWF組件，當(dāng)在瀏覽器中查看時，該組件顯示所選的FLV文件以及一組播放控件。6.2.4 插入聲音 現(xiàn)在瀏覽器能支持的多媒體文件越來越多，文件也越來越小，但表現(xiàn)的效果卻越來越好。在網(wǎng)頁中，可以插入聲音文件，并可以在瀏覽器中播放。6

39、.2.5 插入其他媒體對象 在Dreamweaver CS4中，除了可以插入SWF和FLV文件之外，還可以在網(wǎng)頁文檔中插入QuickTime或Shockwave 影片、Java applet、ActiveX控件或其它音頻或視頻對象。如果插入了媒體對象的輔助功能屬性，則可以在HTML代碼中設(shè)置輔助功能屬性并編輯這些值。6.3 鼠標(biāo)特效和滾動條在我們?yōu)g覽一些網(wǎng)頁時，比如騰訊公司的QQ空間，個人博客等相對于比較個性的網(wǎng)頁時，顯示的鼠標(biāo)并不時我們通常情況下的形狀，有的是卡通形象，有的是動畫形象，甚至有些鼠標(biāo)還添加了三維效果。在Dreamweaver CS4中，通過在【代碼】視圖中添加代碼，同樣可以制作

40、出變化多彩的鼠標(biāo)特效。而使用滾動條，可以使一些重要或較長的信息滾動顯示，這樣既可以充分顯示信息，也可以不使網(wǎng)頁顯得生動自然。 創(chuàng)建鼠標(biāo)特效 創(chuàng)建滾動條6.3.1 創(chuàng)建鼠標(biāo)特效 要創(chuàng)建鼠標(biāo)特效，可以在【代碼】視圖中輸入正確的代碼創(chuàng)建特效，還可以使用記事本創(chuàng)建鼠標(biāo)特效。6.3.2 創(chuàng)建滾動條滾動條在Dreamweaver中是不常用到的元素，但在網(wǎng)頁中經(jīng)常能看到一些滾動信息，要在Dreamweaver中創(chuàng)建滾動條，可以在【代碼】視圖中輸入正卻的代碼，添加滾動條。打開一個網(wǎng)頁文檔，將光標(biāo)移至要插入滾動條的位置，選擇【查看】|【代碼】視圖，切換到【代碼】視圖中，在【代碼】視圖中輸入如下代碼：暫無滾動信息

41、第07章 應(yīng)用超鏈接和層網(wǎng)站都是由許多網(wǎng)頁組成的，網(wǎng)頁之間通常又是通過超鏈接方式相互建立關(guān)聯(lián)的。超鏈接的應(yīng)用范圍很廣，利用它不僅可以鏈接到其他網(wǎng)頁，還可以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網(wǎng)頁內(nèi)部進(jìn)行鏈接或是發(fā)送E-mail等。使用層，可以定位在頁面上的任意位置，可以并存、重疊層，可以在層上插入文本、圖像、表單等對象。本章主要介紹了創(chuàng)建各種超鏈接的方法以及使用層的方法。本章知識點(diǎn) 超鏈接簡介 創(chuàng)建超鏈接 創(chuàng)建圖像地圖 使用spry布局對象 層的簡介 使用層 設(shè)置層的屬性7.1 認(rèn)識超鏈接 超鏈接是網(wǎng)頁中最重要的組成部分。超鏈接的應(yīng)用范圍很廣，利用它不僅可以鏈接到其他網(wǎng)頁，

42、還可以鏈接到其他圖像文件、多媒體文件及下載程序，也可以利用它在網(wǎng)頁內(nèi)部進(jìn)行鏈接或是發(fā)送E-mail等。在Dreamweaver CS4中，可以將文檔中的任何文字及任意位置的圖片設(shè)置為超鏈接。 超鏈接簡介 絕對路徑和相對路徑7.1.1 超鏈接簡介 超鏈接與URL及網(wǎng)頁文件的存放路徑是緊密相關(guān)的。URL可以簡單地稱為網(wǎng)址，顧名思義，就是Internet文件在網(wǎng)上的地址，定義超鏈接其實(shí)就是指定一個URL地址來訪問它指向的Internet 資源。URL(Uniform Resoure Locator，統(tǒng)一資源定位器)是指Internet文件在網(wǎng)上的地址，是使用數(shù)字和字母按一定順序排列來確定的Inter

43、net地址，由訪問方法、服務(wù)器名、端口號，以及文檔位置組成。格式為Access-method :/ server-name:port / document-location。7.1.2 絕對路徑和相對路徑 從作為鏈接起點(diǎn)的文檔到作為鏈接目標(biāo)的文檔之間的文件路徑，對于創(chuàng)建鏈接至關(guān)重要。一般來說，鏈接路徑可以分為絕對路徑與相對路徑兩類。7.2 創(chuàng)建超鏈接在網(wǎng)頁文檔中的插入多媒體內(nèi)容主要包括Flash動畫、音頻文件、視頻文件，插入這些對象可以增強(qiáng)網(wǎng)頁的互動性。 插入Flash動畫 插入Flashpaper 插入FLV文件 插入聲音 插入其他媒體對象7.2.1 創(chuàng)建各種超鏈接 在對超級鏈接有著一定初步

44、了解的基礎(chǔ)上，將分類介紹各種超級鏈接的方法，包括創(chuàng)建文本超鏈接、圖像超鏈接、錨點(diǎn)鏈接、E-mail鏈接和圖形熱點(diǎn)鏈接。7.2.2 創(chuàng)建各種超鏈接 在對超級鏈接有著一定初步了解的基礎(chǔ)上，將分類介紹各種超級鏈接的方法，包括創(chuàng)建文本超鏈接、圖像超鏈接、錨點(diǎn)鏈接、E-mail鏈接和圖形熱點(diǎn)鏈接。7.2.3 創(chuàng)建圖像地圖 圖像地圖也是超鏈接的一種類型。當(dāng)圖片比較大，或是要創(chuàng)建鏈接的區(qū)域是不規(guī)則區(qū)域，或是只給圖片中部分區(qū)域創(chuàng)建鏈接，在這些情況下，可以將圖片分為幾個區(qū)(又稱為【熱點(diǎn)】)，單擊不同的區(qū)域可以打開不同的鏈接，這樣的鏈接就稱為圖形熱點(diǎn)鏈接。在圖像的【屬性】面板中可以方便地創(chuàng)建圖形熱點(diǎn)鏈接。7.3

45、管理超鏈接 超鏈接是網(wǎng)頁中不可缺少的一部分，通過超鏈接可以使各個網(wǎng)頁鏈接起來，使網(wǎng)站中眾多的網(wǎng)頁構(gòu)成一個有機(jī)的整體，通過管理網(wǎng)頁中的超鏈接，可以對網(wǎng)頁進(jìn)行相應(yīng)的管理。管理超鏈接主要包括更新超鏈接、修改超鏈接和測試超鏈接。 自動更新超鏈接 修改超鏈接 測試鏈接7.3.1 自動更新超鏈接 在站點(diǎn)內(nèi)移動或重命名文檔時，Dreamweaver會自動更新指向該文檔的鏈接，將整個站點(diǎn)存儲在本地磁盤上時，自動更新鏈接功能最適用，但要注意的是，Dreamweaver不會更改遠(yuǎn)程文件夾中的相應(yīng)文件。為了加快更新速度，Dreamweaver會創(chuàng)建一個緩存文件，用來存儲跟本地文件夾有關(guān)的所有鏈接信息，在添加、刪除或

46、更改指向本地站點(diǎn)上的文件的鏈接時，該緩存文件會以可見方式進(jìn)行更新 7.3.2 修改超鏈接除了自動更新鏈接外，還可以手動修改所有創(chuàng)建的超鏈接，以指向其他位置。要手動更改所有創(chuàng)建的超鏈接，打開一個網(wǎng)頁文檔，選擇【站點(diǎn)】|【改變站點(diǎn)鏈接范圍的鏈接】命令，打開【更改整個站點(diǎn)鏈接】對話框，如圖所示。7.3.3 測試連接在Dreamweaver中常見的超鏈接是不能顯示鏈接對象的，但可以在網(wǎng)頁文檔中打開鏈接頁面。測試鏈接。要測試鏈接，首先選中要測試的鏈接，選擇【修改】|【打開鏈接頁面】命令，或者按下Ctrl鍵，雙擊選中的超鏈接，即可在新窗口中打開鏈接網(wǎng)頁文檔，如圖所示。7.4 認(rèn)識層層在Dreamweave

47、r CS4指的是帶有CSS樣式的Div或Span代碼，用于網(wǎng)頁元素的精確定位。由于一個頁面中可以擁有多個層，而不同的層之間可以相互重疊，通過設(shè)置透明度來決定每個層是否可見或者可見的程度，因而層可用來實(shí)現(xiàn)許多特效。例如新浪、163等許多網(wǎng)站都采用層來定位廣告和分屏顯示。 創(chuàng)建層 層的基本操作 轉(zhuǎn)換表格和層 設(shè)置層參數(shù) 7.4.1 創(chuàng)建層 要在網(wǎng)頁文檔中創(chuàng)建層，創(chuàng)建完一個層后，在【代碼】視圖中會自動插入HTML標(biāo)簽。層的常用標(biāo)簽有和兩種，默認(rèn)是使用標(biāo)簽來創(chuàng)建層。7.4.2 層的基本操作 使用【AP元素】面板中，可以管理網(wǎng)頁文檔中的AP元素，防止重疊，更改AP元素的可見性，嵌套或堆疊AP元素等。7.

48、4.3 轉(zhuǎn)換表格和層 要改變網(wǎng)頁中各元素的布局，最方便的方法就時將元素置于層內(nèi)，然后通過移動層來改變網(wǎng)頁的布局。要使用這種方法改變網(wǎng)頁布局，首先要將表格轉(zhuǎn)換為層。Dreamweaver CS3允許使用層來創(chuàng)建布局，然后將層轉(zhuǎn)換為表格，以使網(wǎng)頁能夠在瀏覽器中正確瀏覽；也可以將網(wǎng)頁中的表格轉(zhuǎn)換為層。7.4.4 設(shè)置層參數(shù) 在【首選參數(shù)】對話框可以設(shè)置層參數(shù)。選擇【編輯】|【首選參數(shù)】命令，打開【首選參數(shù)】對話框，在【分類】列表框中選擇【AP元素】選項(xiàng)，打開該選項(xiàng)對話框，如圖所示。7.5 使用Spry布局對象 Spry框架是一個JavaScript庫，使用它可以創(chuàng)建更豐富的網(wǎng)頁。有了Spry，可以使

49、用HTML、CSS和一些JavaScript將XML數(shù)據(jù)合并到HTML文檔中、創(chuàng)建構(gòu)建、向各種網(wǎng)頁元素添加不同種類的效果等。 使用Spry菜單欄 使用Spry選項(xiàng)卡面板 使用Spry折疊面板 使用Spry可折疊面板7.5.1 使用Spry菜單欄 Srpy菜單欄是一組添加鏈接的菜單按鈕。當(dāng)瀏覽網(wǎng)頁時，將光標(biāo)懸停在某個菜單按鈕上時，可以顯示相應(yīng)的子菜單，使用菜單欄可以在有限的空間里顯示大量導(dǎo)航信息，在瀏覽網(wǎng)頁時，可以全面的了解站點(diǎn)包含信息，無需深入瀏覽網(wǎng)站。7.5.2 使用Spry選項(xiàng)卡面板 Spry選項(xiàng)卡面板是一組面板，可以將內(nèi)容存儲到緊湊的空間中。訪問站點(diǎn)時，可以單擊所需訪問的面板上的選項(xiàng)卡來

50、顯示或隱藏存儲在選項(xiàng)卡面板中的內(nèi)容。單擊不同的選項(xiàng)卡時，會打開相應(yīng)的面板，單只能同時打開一個面板。7.5.3 使用Spry折疊面板 Spry折疊式構(gòu)件是一組可以折疊的面板，可以將大量的內(nèi)容存儲到緊湊的空間中。當(dāng)訪問站點(diǎn)時，可以單擊該面板上的選項(xiàng)卡來顯示或隱藏存儲在折疊面板中的內(nèi)容。當(dāng)單擊不同的選項(xiàng)卡時，相應(yīng)的折疊面板會展開或收縮，但同時只能有一個面板處于可見狀態(tài)。7.5.4 使用Spry可折疊面板 使用Spry可折疊面板，可以將內(nèi)容存儲到緊湊的空間中，單擊相應(yīng)的選項(xiàng)卡，可以顯示或隱藏可折疊面板中的內(nèi)容。第08章 行為和表單 行為是一系列使用JavaScript程序預(yù)定義的頁面特效工具，是Jav

51、aScript在Dreamweaer中內(nèi)置的程序庫。利用行為，可以制作處各式各樣的特素效果，例如播放聲音、彈出菜單等。使用表單，可以制作交互性網(wǎng)頁文檔，例如問卷調(diào)查、注冊表等，并且，動態(tài)頁面中的表單內(nèi)容，可以進(jìn)行上傳、驗(yàn)證等操作。本章主要介紹了Dreamweaver CS4內(nèi)置行為的使用方法以及使用表單的方法。本章知識點(diǎn) 行為的基礎(chǔ)知識 使用行為 更改行為 表單的概念 插入表單對象 編輯表單對象8.1 行為的基礎(chǔ)知識 行為是指在網(wǎng)頁中進(jìn)行的一系列動作，通過這些動作，可以實(shí)現(xiàn)用戶同網(wǎng)頁的交互，也可以通過動作使某個任務(wù)被執(zhí)行。在Dreamweaver中，行為由事件和動作兩個基本元素組成。通常動作是

52、一段JavaScript代碼，利用這些代碼可以完成相應(yīng)的任務(wù)；事件則由瀏覽器定義，事件可以被附加到各種頁面元素上，也可以被附加到HTML標(biāo)記中，并且一個事件總是針對頁面元素或標(biāo)記而言的。 行為的概念 【行為】面板8.1.1 行為的概念行為是Dreamweaver CS4中重要的一個部分，通過行為，可以方便地制作出許多網(wǎng)頁效果，極大地提高了工作效率。行為由兩個部分組成，即事件和動作，通過事件的響應(yīng)進(jìn)而執(zhí)行對應(yīng)的動作。在網(wǎng)頁中，事件是瀏覽器生成的消息，表明該頁的訪問者執(zhí)行了某種操作。例如，當(dāng)訪問者將鼠標(biāo)指針移動到某個鏈接上時，瀏覽器為該鏈接生成一個onMouseOver事件。不同的頁元素定義了不同

53、的事件。在大多數(shù)瀏覽器中，onMouseOver和onClick是與鏈接關(guān)聯(lián)的事件，而onLoad是與圖像和文檔的body部分關(guān)聯(lián)的事件。事件由瀏覽器定義、產(chǎn)生與執(zhí)行。以下時Dreamweaver CS4中的一些主要事件，其中，NS代表Netscape Navigator瀏覽器，IE代表Internet Explorer瀏覽器，后面的數(shù)值為可支持此事件的最低版本號。8.1.2 【行為】面板在【行為】面板中可以將Dreamweaver CS4內(nèi)置的行為附加到頁面元素，并且可以修改以前所附加行為的參數(shù)。選擇【窗口】|【行為】命令，打開【標(biāo)簽檢查器】面板，默認(rèn)打開的是【行為】選型卡面板，如圖所示。8

54、.2 使用內(nèi)置行為Dreamweaver CS4內(nèi)置了許多種行為動作，基本可以滿足網(wǎng)頁設(shè)計(jì)的需要。還可以連接到Macromedia Exchange Web站點(diǎn)以及第三方開發(fā)人員站點(diǎn)上找到更多的動作，或者自己編寫行為動作。 圖像類操作行為 控制類行為 導(dǎo)航欄和狀態(tài)欄行為 檢查類行為 其他常用行為 8.2.1 圖像類操作行為 圖像操作類行為主要是與圖像元素有關(guān)的行為，包括預(yù)先載入圖像、交換圖像和恢復(fù)交換圖像。8.2.2 控制類行為 控制類行為主要是與控制有關(guān)的行為，包括拖動層行為和顯示-隱藏元素行為。8.2.3 導(dǎo)航欄和狀態(tài)欄行為 在Dreamweaver CS4中的導(dǎo)航欄和狀態(tài)欄行為也是常用行

55、為。導(dǎo)航類行為主要是與導(dǎo)航有關(guān)的行為，例如設(shè)置導(dǎo)航欄圖像等。狀態(tài)欄行為主要可以在瀏覽器窗口中的狀態(tài)欄顯示文本消息，用于優(yōu)化網(wǎng)頁細(xì)節(jié)。8.2.4 檢查類行為 檢查類行為主要是與檢查、檢測有關(guān)的行為，例如可以使用這類行為來檢查瀏覽器、檢查插件和檢查表單等。8.2.5 其他常用行為 除了前面介紹的一些行為外，還可以使用以下一些常用行為，例如調(diào)用JavaScript和改變屬性行為等。8.3 表單概述 表單在網(wǎng)頁中時提供給訪問者填寫信息的區(qū)域，從而可以收集客戶端信息，使網(wǎng)頁更加具有交互的功能。一般將表單設(shè)置在一個HTML文檔中，訪問者填寫相關(guān)信息后提交表單，表單內(nèi)容會自動從客戶端的瀏覽器傳送到服務(wù)器上，

56、經(jīng)過服務(wù)器上的ASP或CGI等程序處理后，再將訪問者所需的信息傳送到客戶端的瀏覽器上。幾乎所有網(wǎng)站都應(yīng)用了表單，例如搜索欄、論壇和訂單等。 表單的概念 表單對象8.3.1 表單的概念 表單是由窗體和控件組成的，一個表單一般包含用戶填寫信息的輸入框和提交按鈕等，這些輸入框和按鈕叫做控件。 表單用標(biāo)記來創(chuàng)建的，再標(biāo)記之間的部分都屬于表單的內(nèi)容。標(biāo)記具有action、method和target屬性。8.3.2 表單對象 在Dreamweaver CS4中，表單輸入類型稱為表單對象?？梢栽诰W(wǎng)頁中插入表單并創(chuàng)建各種表單對象。 要在網(wǎng)頁文檔中插入表單對象，可以單擊【插入】工具欄上的【表單】選項(xiàng)卡，打開【表

57、單】插入欄，如圖所示。單擊相應(yīng)的表單對象按鈕，即可插入表單。8.4 插入表單介紹了表單的基礎(chǔ)知識后，可以在網(wǎng)頁文檔中插入表單對象。插入各種表單對象的方法都是相同的，可以單擊【表單】插入欄上的表單對象按鈕插入表單，也可以選擇【插入】|【表單】命令，在彈出的級聯(lián)菜單中選擇要插入的表單對象命令，會打開相應(yīng)的對話框，設(shè)置對話框后，即可插入表單。不同的表單對象，設(shè)置的屬性也有所區(qū)別，下面主要介紹常用表單的作用和屬性設(shè)置。 插入文本域?qū)ο?插入按鈕表單對象 插入列表和菜單8.4.1 插入文本域?qū)ο?文本域是一個重要的表單對象，可以輸入相關(guān)信息，例如用戶名、密碼等。隱藏域在瀏覽器中是不被顯示出來的文本域，主

58、要用于實(shí)現(xiàn)瀏覽器同服務(wù)器在后臺隱藏地交換信息。8.4.2 插入按鈕表單對象 按鈕表單對象包括按鈕、單選按鈕、單選按鈕組、復(fù)選框和復(fù)選框組。主要用于控制對表單的操作。當(dāng)輸入完表單數(shù)據(jù)后，可以單擊表單按鈕，提交服務(wù)器處理；如果對輸入的數(shù)據(jù)不滿意，需要重新設(shè)置時，可以單擊表單按鈕，重新輸入；還可以通過表單按鈕來完成其他任務(wù)。復(fù)選框和單選按鈕是預(yù)定義選擇對象的表單對象?？梢栽谝唤M復(fù)選框中選擇多個選項(xiàng)；單選按鈕也可以組成一個組使用，提供互相排斥的選項(xiàng)值，在單選按鈕組內(nèi)只能選擇一個選項(xiàng)。8.4.3 插入列表和菜單 列表和菜單也是預(yù)定義選擇對象的表單對象，使用它們可以在有限的空間內(nèi)提供多個選項(xiàng)。列表也稱為【

59、滾動列表】，提供一個滾動條，允許訪問者瀏覽多個選項(xiàng)，并進(jìn)行多重選擇。菜單也稱為【下拉列表框】，僅顯示一個選項(xiàng)，該項(xiàng)也是活動選項(xiàng)，訪問者只能從菜單中選擇一項(xiàng)。 第09章 使用模板和庫 在進(jìn)行批量網(wǎng)頁制作的過程中，很多頁面都會使用到相同的圖片、文字或布局。為了避免不必要的重復(fù)操作，減少用戶的工作量，可以使用Dreamweaver CS4提供的模板和庫功能，將具有相同布局結(jié)構(gòu)的頁面制作成模板，將相同的元素制作為庫項(xiàng)目，以便隨時調(diào)用。本章將主要介紹在Dreamweaver CS4中創(chuàng)建與編輯模板和庫的方法。本章知識點(diǎn) 使用模板 編輯模板 使用模板創(chuàng)建網(wǎng)頁文檔 使用庫項(xiàng)目9.1 使用模板 在Dreamw

60、eaver CS4中有多種創(chuàng)建模板的方法，可以創(chuàng)建空白模板，也可以創(chuàng)建基于現(xiàn)存文檔的模板，除此之外，還可以將現(xiàn)有的HTML文檔另存為模板，然后根據(jù)需要加以修改。 創(chuàng)建模板 管理模板 定義模板區(qū)域 設(shè)置模板參數(shù)9.1.1 創(chuàng)建模板 模板也是一個HTML文檔，只不過在HTML文檔中增加了模板標(biāo)記。在Dreamweaver CS4中，模板的擴(kuò)展名為.dwt，并存放在本地站點(diǎn)的Templates文件夾中。模板文件夾只有在創(chuàng)建模板的時候才會由系統(tǒng)自動生成。9.1.2 管理模板 創(chuàng)建好模板后，模板會在【資源】面板中顯示，在該面板中，可以管理模板，主要包括刪除、修改、重命名模板等操作。選擇【窗口】|【資源】