網(wǎng)頁(yè)制作精品教程完整版教學(xué)課件-整套教程電子講義(最全最新)

1、第1章 網(wǎng)頁(yè)基礎(chǔ)知識(shí) 網(wǎng)頁(yè)相關(guān)知識(shí)簡(jiǎn)介 認(rèn)識(shí)網(wǎng)頁(yè)構(gòu)成 網(wǎng)站建設(shè)流程 1.1 網(wǎng)頁(yè)相關(guān)知識(shí)簡(jiǎn)介 1.1.1 因特網(wǎng) 因特網(wǎng)（Internet），又叫國(guó)際互聯(lián)網(wǎng)，它是目前世界上最大的計(jì)算機(jī)網(wǎng)絡(luò)，將無(wú)數(shù)廣域網(wǎng)、局域網(wǎng)及單機(jī)按照一定的通訊協(xié)議組織在一起，方便了計(jì)算機(jī)之間的信息傳遞。第2章 Dreamweaver 8入門(mén) 熟悉Dreamweaver 8工作界面 網(wǎng)站創(chuàng)建與管理 基本頁(yè)面屬性設(shè)置 2.1 熟悉Dreamweaver 8工作界面 啟動(dòng)Dreamweaver 8后，在起始頁(yè)的“創(chuàng)建新項(xiàng)目”列中單擊第一項(xiàng)“HTML”，將會(huì)創(chuàng)建一個(gè)“.html”格式的新文檔，并進(jìn)入Dreamweaver 8工作界

2、面。2.1.1 標(biāo)題欄和菜單欄 標(biāo)題欄上顯示軟件名稱、文檔標(biāo)題和程序窗口控制按鈕（“最小化窗口”按鈕 、“最大化窗口”按鈕 和“關(guān)閉窗口”按鈕 ） 。菜單欄中幾乎集中了Dreamweaver 的全部操作命令，利用這些命令可以編輯網(wǎng)頁(yè)、管理站點(diǎn)以及設(shè)置操作界面等。 2.1.2 “插入”欄 “插入”欄包含各種類型的對(duì)象按鈕（如圖像、表格和層等），通過(guò)單擊這些按鈕，可將相應(yīng)的對(duì)象插入到文檔中。2.1.3 文檔標(biāo)簽與“文檔”工具欄 文檔標(biāo)簽顯示了網(wǎng)頁(yè)文檔名稱；“文檔”工具欄用于切換網(wǎng)頁(yè)視圖，設(shè)置網(wǎng)頁(yè)標(biāo)題，檢查瀏覽器支持等。 2.1.4 狀態(tài)欄 狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息。

3、 范例1 利用狀態(tài)欄中標(biāo)簽選擇單元格 在制作網(wǎng)頁(yè)時(shí)，往往會(huì)使用一些像素值非常小的圖片作為裝飾，而要選中這些小圖片或小圖片所在的單元格就有些困難了，下面我們就來(lái)看看如何利用“標(biāo)簽選擇器”來(lái)選中這些小單元格（具體操作見(jiàn)視頻2-1）。 2.1.5 浮動(dòng)面板 在Dreamweaver中，大多數(shù)操作都是通過(guò)面板實(shí)現(xiàn)的?！皩傩浴泵姘逦挥谖臋n窗口的下方，主要用于查看或編輯所選對(duì)象的屬性。除“屬性”面板外，Dreamweaver 8還提供了眾多面板，如“文件”面板、“歷史記錄”面板等。 如要打開(kāi)或關(guān)閉某個(gè)面板，可單擊“窗口”菜單下的相應(yīng)選項(xiàng)。 范例2 練習(xí)面板基本操作 在了解了面板的種類和作用后，下面來(lái)看看如

4、何打開(kāi)新的面板、隱藏面板，以及完全關(guān)閉面板等（具體操作見(jiàn)視頻2-2）。 2.2 網(wǎng)站創(chuàng)建與管理 2.2.1 確定站點(diǎn)目錄結(jié)構(gòu) 為便于以后管理和維護(hù)網(wǎng)站，在開(kāi)始創(chuàng)建網(wǎng)頁(yè)之前，最好先確定站點(diǎn)的目錄結(jié)構(gòu)。它主要包括兩項(xiàng)任務(wù)，一是在本地磁盤(pán)上創(chuàng)建用來(lái)保存網(wǎng)站內(nèi)容（包括網(wǎng)頁(yè)文件和圖像、動(dòng)畫(huà)等）的文件夾，該文件夾被稱為站點(diǎn)根文件夾；為便于管理站點(diǎn)中的內(nèi)容，還要在站點(diǎn)文件夾中創(chuàng)建若干子文件夾，以存放不同類型的文件。 范例3 在Dreamweaver中定義“火百合”站點(diǎn) 為便于管理和編輯站點(diǎn)，在創(chuàng)建網(wǎng)頁(yè)之前，首先要在Dreamweaver中定義站點(diǎn)。定義站點(diǎn)可以將本地磁盤(pán)中的站點(diǎn)同Dreamweaver建立一

5、定的關(guān)聯(lián)，可以使用Dreamweaver上傳或下載站點(diǎn)內(nèi)容（具體操作見(jiàn)視頻2-3）。 2.2.2 網(wǎng)頁(yè)文檔基本操作 1新建文檔 Dreamweaver中的文檔也就是網(wǎng)頁(yè)，創(chuàng)建新網(wǎng)頁(yè)的方法有多種，下面使用“文件”菜單創(chuàng)建網(wǎng)頁(yè)。 選擇“文件”“新建”菜單，打開(kāi)“新建文檔”對(duì)話框。 2保存文檔 新建或編輯網(wǎng)頁(yè)文檔后，需要保存文檔，才能使所做的設(shè)置生效。 選擇“文件”“保存”菜單，彈出“另存為”對(duì)話框 選擇保存位置 輸入文件名 單擊“保存”按鈕 3預(yù)覽文檔 對(duì)網(wǎng)頁(yè)進(jìn)行編輯或修改后，可在瀏覽器中預(yù)覽其效果。打開(kāi)文檔后，單擊文檔工具欄中的 按鈕，在彈出的菜單中選擇“預(yù)覽在IExplore 7.0”菜單項(xiàng)4

6、打開(kāi)和關(guān)閉文檔 如要打開(kāi)某站點(diǎn)中現(xiàn)有的網(wǎng)頁(yè)文檔，可以選擇“文件”“打開(kāi)”菜單，在彈出的“打開(kāi)”對(duì)話框中選擇要打開(kāi)的文件，然后單擊“打開(kāi)”按鈕。選擇目標(biāo)文件所在文件夾 關(guān)閉文件的操作相當(dāng)簡(jiǎn)單，只需單擊相應(yīng)文件右上方的“關(guān)閉”按鈕 。 單擊選擇文件 單擊“打開(kāi)”按鈕 范例4 利用“文件”面板創(chuàng)建網(wǎng)頁(yè)使用“文件”面板，可以非常方便地管理站點(diǎn)和站點(diǎn)中的文件。下面看一下在“文件”面板中創(chuàng)建和命名文檔的方法（具體操作見(jiàn)視頻2-4）。 2.2.3 網(wǎng)頁(yè)文件命名規(guī)則 為便于日后的維護(hù)和管理，網(wǎng)站中所有文件和文件夾的命名最好遵循一定的規(guī)則。首先，靜態(tài)的首頁(yè)文件一般命名為“index.html”或“index.h

7、tm”。如果是包含程序代碼的動(dòng)態(tài)頁(yè)面，比如ASP文件，則命名為“index.asp”?？傊缶Y名與網(wǎng)頁(yè)本身所使用的技術(shù)是對(duì)應(yīng)的。 2.3 基本頁(yè)面屬性設(shè)置 2.3.1 指定網(wǎng)頁(yè)文檔標(biāo)題和邊距 在瀏覽網(wǎng)頁(yè)時(shí)，可以看到瀏覽器上端都會(huì)有表示網(wǎng)頁(yè)特征或歡迎詞之類的標(biāo)題。在Dreamweaver中，可以在“文檔工具欄”中的“標(biāo)題”文本框中直接輸入網(wǎng)頁(yè)標(biāo)題，也可以在“頁(yè)面屬性”對(duì)話框的“標(biāo)題/編碼”類別中進(jìn)行設(shè)置。 另外，利用“頁(yè)面屬性”對(duì)話框，可以隨意調(diào)整網(wǎng)頁(yè)的上、下、左、右邊距，如果想取消這些邊距，可以把邊距值設(shè)定為“0”。2.3.2 指定網(wǎng)頁(yè)背景顏色和背景圖像 指定網(wǎng)頁(yè)背景顏色的方法非常簡(jiǎn)單，只需

8、在“頁(yè)面屬性”對(duì)話框中單擊“背景顏色”后的顏色按鈕，然后在彈出的調(diào)色板中單擊選擇相應(yīng)顏色就可以了。如果用戶喜歡的話，也可以將圖像設(shè)置為網(wǎng)頁(yè)背景 （具體操作見(jiàn)視頻2.3.2）。 2.3.3 為網(wǎng)頁(yè)設(shè)置文本和鏈接屬性 通過(guò)設(shè)置“頁(yè)面屬性”對(duì)話框中的“頁(yè)面字體”、“大小”和“文本顏色”，可以設(shè)置網(wǎng)頁(yè)中文本的屬性。另外，要設(shè)置鏈接文本的屬性，可以在“頁(yè)面屬性”對(duì)話框左側(cè)的分類列表中選擇“鏈接”選項(xiàng)，然后在右側(cè)設(shè)置各項(xiàng)參數(shù)。 范例5 為“movie”網(wǎng)頁(yè)設(shè)置頁(yè)面屬性 通過(guò)前面的學(xué)習(xí)，相信大家對(duì)基本頁(yè)面屬性的設(shè)置已經(jīng)有了個(gè)大概的認(rèn)識(shí)。本節(jié)通過(guò)編輯“movie”網(wǎng)頁(yè)，來(lái)使讀者進(jìn)一步掌握網(wǎng)頁(yè)頁(yè)面屬性的設(shè)置方法

9、（具體操作見(jiàn)視頻2-5）。 第2章 Dreamweaver 8入門(mén) 熟悉Dreamweaver 8工作界面 網(wǎng)站創(chuàng)建與管理 基本頁(yè)面屬性設(shè)置 2.1 熟悉Dreamweaver 8工作界面 啟動(dòng)Dreamweaver 8后，在起始頁(yè)的“創(chuàng)建新項(xiàng)目”列中單擊第一項(xiàng)“HTML”，將會(huì)創(chuàng)建一個(gè)“.html”格式的新文檔，并進(jìn)入Dreamweaver 8工作界面。2.1.1 標(biāo)題欄和菜單欄 標(biāo)題欄上顯示軟件名稱、文檔標(biāo)題和程序窗口控制按鈕（“最小化窗口”按鈕 、“最大化窗口”按鈕 和“關(guān)閉窗口”按鈕 ） 。菜單欄中幾乎集中了Dreamweaver 的全部操作命令，利用這些命令可以編輯網(wǎng)頁(yè)、管理站點(diǎn)以及

10、設(shè)置操作界面等。 2.1.2 “插入”欄 “插入”欄包含各種類型的對(duì)象按鈕（如圖像、表格和層等），通過(guò)單擊這些按鈕，可將相應(yīng)的對(duì)象插入到文檔中。2.1.3 文檔標(biāo)簽與“文檔”工具欄 文檔標(biāo)簽顯示了網(wǎng)頁(yè)文檔名稱；“文檔”工具欄用于切換網(wǎng)頁(yè)視圖，設(shè)置網(wǎng)頁(yè)標(biāo)題，檢查瀏覽器支持等。 2.1.4 狀態(tài)欄 狀態(tài)欄位于文檔窗口底部，它提供了與當(dāng)前文檔相關(guān)的一些信息。 范例1 利用狀態(tài)欄中標(biāo)簽選擇單元格 在制作網(wǎng)頁(yè)時(shí)，往往會(huì)使用一些像素值非常小的圖片作為裝飾，而要選中這些小圖片或小圖片所在的單元格就有些困難了，下面我們就來(lái)看看如何利用“標(biāo)簽選擇器”來(lái)選中這些小單元格（具體操作見(jiàn)視頻2-1）。 2.1.5 浮動(dòng)

11、面板 在Dreamweaver中，大多數(shù)操作都是通過(guò)面板實(shí)現(xiàn)的?！皩傩浴泵姘逦挥谖臋n窗口的下方，主要用于查看或編輯所選對(duì)象的屬性。除“屬性”面板外，Dreamweaver 8還提供了眾多面板，如“文件”面板、“歷史記錄”面板等。 如要打開(kāi)或關(guān)閉某個(gè)面板，可單擊“窗口”菜單下的相應(yīng)選項(xiàng)。 范例2 練習(xí)面板基本操作 在了解了面板的種類和作用后，下面來(lái)看看如何打開(kāi)新的面板、隱藏面板，以及完全關(guān)閉面板等（具體操作見(jiàn)視頻2-2）。 2.2 網(wǎng)站創(chuàng)建與管理 2.2.1 確定站點(diǎn)目錄結(jié)構(gòu) 為便于以后管理和維護(hù)網(wǎng)站，在開(kāi)始創(chuàng)建網(wǎng)頁(yè)之前，最好先確定站點(diǎn)的目錄結(jié)構(gòu)。它主要包括兩項(xiàng)任務(wù)，一是在本地磁盤(pán)上創(chuàng)建用來(lái)保存

12、網(wǎng)站內(nèi)容（包括網(wǎng)頁(yè)文件和圖像、動(dòng)畫(huà)等）的文件夾，該文件夾被稱為站點(diǎn)根文件夾；為便于管理站點(diǎn)中的內(nèi)容，還要在站點(diǎn)文件夾中創(chuàng)建若干子文件夾，以存放不同類型的文件。 范例3 在Dreamweaver中定義“火百合”站點(diǎn) 為便于管理和編輯站點(diǎn)，在創(chuàng)建網(wǎng)頁(yè)之前，首先要在Dreamweaver中定義站點(diǎn)。定義站點(diǎn)可以將本地磁盤(pán)中的站點(diǎn)同Dreamweaver建立一定的關(guān)聯(lián)，可以使用Dreamweaver上傳或下載站點(diǎn)內(nèi)容（具體操作見(jiàn)視頻2-3）。 2.2.2 網(wǎng)頁(yè)文檔基本操作 1新建文檔 Dreamweaver中的文檔也就是網(wǎng)頁(yè)，創(chuàng)建新網(wǎng)頁(yè)的方法有多種，下面使用“文件”菜單創(chuàng)建網(wǎng)頁(yè)。 選擇“文件”“新建”

13、菜單，打開(kāi)“新建文檔”對(duì)話框。 2保存文檔 新建或編輯網(wǎng)頁(yè)文檔后，需要保存文檔，才能使所做的設(shè)置生效。 選擇“文件”“保存”菜單，彈出“另存為”對(duì)話框 選擇保存位置 輸入文件名 單擊“保存”按鈕 3預(yù)覽文檔 對(duì)網(wǎng)頁(yè)進(jìn)行編輯或修改后，可在瀏覽器中預(yù)覽其效果。打開(kāi)文檔后，單擊文檔工具欄中的 按鈕，在彈出的菜單中選擇“預(yù)覽在IExplore 7.0”菜單項(xiàng)4打開(kāi)和關(guān)閉文檔 如要打開(kāi)某站點(diǎn)中現(xiàn)有的網(wǎng)頁(yè)文檔，可以選擇“文件”“打開(kāi)”菜單，在彈出的“打開(kāi)”對(duì)話框中選擇要打開(kāi)的文件，然后單擊“打開(kāi)”按鈕。選擇目標(biāo)文件所在文件夾 關(guān)閉文件的操作相當(dāng)簡(jiǎn)單，只需單擊相應(yīng)文件右上方的“關(guān)閉”按鈕 。 單擊選擇文件

14、單擊“打開(kāi)”按鈕 范例4 利用“文件”面板創(chuàng)建網(wǎng)頁(yè)使用“文件”面板，可以非常方便地管理站點(diǎn)和站點(diǎn)中的文件。下面看一下在“文件”面板中創(chuàng)建和命名文檔的方法（具體操作見(jiàn)視頻2-4）。 2.2.3 網(wǎng)頁(yè)文件命名規(guī)則 為便于日后的維護(hù)和管理，網(wǎng)站中所有文件和文件夾的命名最好遵循一定的規(guī)則。首先，靜態(tài)的首頁(yè)文件一般命名為“index.html”或“index.htm”。如果是包含程序代碼的動(dòng)態(tài)頁(yè)面，比如ASP文件，則命名為“index.asp”。總之，后綴名與網(wǎng)頁(yè)本身所使用的技術(shù)是對(duì)應(yīng)的。 2.3 基本頁(yè)面屬性設(shè)置 2.3.1 指定網(wǎng)頁(yè)文檔標(biāo)題和邊距 在瀏覽網(wǎng)頁(yè)時(shí)，可以看到瀏覽器上端都會(huì)有表示網(wǎng)頁(yè)特征或

15、歡迎詞之類的標(biāo)題。在Dreamweaver中，可以在“文檔工具欄”中的“標(biāo)題”文本框中直接輸入網(wǎng)頁(yè)標(biāo)題，也可以在“頁(yè)面屬性”對(duì)話框的“標(biāo)題/編碼”類別中進(jìn)行設(shè)置。 另外，利用“頁(yè)面屬性”對(duì)話框，可以隨意調(diào)整網(wǎng)頁(yè)的上、下、左、右邊距，如果想取消這些邊距，可以把邊距值設(shè)定為“0”。2.3.2 指定網(wǎng)頁(yè)背景顏色和背景圖像 指定網(wǎng)頁(yè)背景顏色的方法非常簡(jiǎn)單，只需在“頁(yè)面屬性”對(duì)話框中單擊“背景顏色”后的顏色按鈕，然后在彈出的調(diào)色板中單擊選擇相應(yīng)顏色就可以了。如果用戶喜歡的話，也可以將圖像設(shè)置為網(wǎng)頁(yè)背景 （具體操作見(jiàn)視頻2.3.2）。 2.3.3 為網(wǎng)頁(yè)設(shè)置文本和鏈接屬性 通過(guò)設(shè)置“頁(yè)面屬性”對(duì)話框中的“

16、頁(yè)面字體”、“大小”和“文本顏色”，可以設(shè)置網(wǎng)頁(yè)中文本的屬性。另外，要設(shè)置鏈接文本的屬性，可以在“頁(yè)面屬性”對(duì)話框左側(cè)的分類列表中選擇“鏈接”選項(xiàng)，然后在右側(cè)設(shè)置各項(xiàng)參數(shù)。 范例5 為“movie”網(wǎng)頁(yè)設(shè)置頁(yè)面屬性 通過(guò)前面的學(xué)習(xí)，相信大家對(duì)基本頁(yè)面屬性的設(shè)置已經(jīng)有了個(gè)大概的認(rèn)識(shí)。本節(jié)通過(guò)編輯“movie”網(wǎng)頁(yè)，來(lái)使讀者進(jìn)一步掌握網(wǎng)頁(yè)頁(yè)面屬性的設(shè)置方法（具體操作見(jiàn)視頻2-5）。 第3章 編輯網(wǎng)頁(yè)內(nèi)容 文本的輸入與格式設(shè)置 插入圖像和動(dòng)畫(huà) 制作超鏈接3.1 文本的輸入與格式設(shè)置 3.1.1 輸入文本 在Dreamweaver中輸入文本的方法非常簡(jiǎn)單，只要將光標(biāo)定位在網(wǎng)頁(yè)的某個(gè)位置，然后輸入文字就

17、可以了。 另外，可以利用剪貼板將外部文本拷貝到網(wǎng)頁(yè)中，然后設(shè)置其格式和各種屬性。 3.1.2 設(shè)置文本段落和字符格式 Dreamweaver中的文本格式設(shè)置與標(biāo)準(zhǔn)字處理程序（如Word）類似。用戶可以利用“屬性”面板為文本設(shè)置默認(rèn)格式化樣式（段落、標(biāo)題 1、標(biāo)題 2等），或者直接設(shè)置所選文本的字體、大小、顏色、粗體、斜體、對(duì)齊方式和列表方式等。1設(shè)置字體列表 Dreamweaver中自帶的字體有限，一般滿足不了大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)者的需求。我們可以通過(guò)設(shè)置字體列表來(lái)解決這一問(wèn)題。 選擇字體 單擊添加字體 2設(shè)置文本字體及大小 學(xué)會(huì)設(shè)置字體列表后，就可以隨心所欲地設(shè)置文本的字體了。下面就來(lái)學(xué)習(xí)在屬性面

18、板中設(shè)置文本字體及大小的方法。 拖動(dòng)鼠標(biāo)選中文本 設(shè)置字體、大小等屬性 3設(shè)置段落縮進(jìn) 通過(guò)設(shè)置段落縮進(jìn)格式，可以更好地布局文檔。將光標(biāo)置于需要設(shè)置段落縮進(jìn)的任意段落中，然后在屬性面板的“格式”下拉列表中選擇“段落”選項(xiàng)，單擊“文本凸出”按鈕 可使段落凸出，單擊“文本縮進(jìn)”按鈕可使段落縮進(jìn)。 4設(shè)置列表項(xiàng) 列表分為項(xiàng)目列表和編號(hào)列表，項(xiàng)目列表常應(yīng)用在“列舉”類型的文本中，編號(hào)列表常應(yīng)用在“條款”類型的文本中，這種方式使得文本更直觀、明了。 選中所要設(shè)置的文本，然后單擊屬性面板上的“項(xiàng)目列表”按鈕 ，即可設(shè)置列表項(xiàng)。 范例1 設(shè)置“公司介紹”網(wǎng)頁(yè)文本在學(xué)習(xí)了文本的輸入和格式設(shè)置方法后，下面通過(guò)一

19、個(gè)小例子來(lái)練習(xí)和鞏固一下這些知識(shí)（具體操作見(jiàn)視頻3-1）。 3.1.3 插入水平線和特殊字符 1水平線 水平線對(duì)于組織信息和區(qū)分版塊很有幫助。要插入水平線，可以選擇“插入”“HTML”“水平線”菜單。 2插入特殊字符 要插入特殊符號(hào)，可以選擇“插入”“HTML”“特殊字符”菜單，然后在彈出的菜單中選擇相應(yīng)的特殊字符。 如果在“特殊字符”菜單下沒(méi)有找到需要的字符，可以通過(guò)選擇該菜單中最下面的“其他字符”命令打開(kāi)“插入其他字符”對(duì)話框。 3.2 插入圖像和動(dòng)畫(huà) 3.2.1 插入并設(shè)置圖像屬性 在Dreamweaver中插入圖像的方法非常簡(jiǎn)單，在確定圖像插入點(diǎn)后，單擊“常用”插入欄中的“圖像”按鈕，

20、打開(kāi)“選擇圖像源文件”對(duì)話框，從中選擇要插入的圖像，然后單擊“確定”按鈕即可。3.2.2 插入flash動(dòng)畫(huà) 確定插入點(diǎn)后，單擊“常用”插入欄中的“媒體：Flash”按鈕 ，在彈出的“選擇文件”對(duì)話框中選擇一個(gè)擴(kuò)展名為.swf的Flash動(dòng)畫(huà)，單擊“確定”按鈕，F(xiàn)lash動(dòng)畫(huà)就被插入到了頁(yè)面中。3.2.3 應(yīng)用透明flash動(dòng)畫(huà) 假如我們?yōu)榫W(wǎng)頁(yè)、某個(gè)表格或某個(gè)單元格指定了一張很漂亮的背景圖像，而當(dāng)我們?cè)趩卧裰杏植迦胍粋€(gè)Flash動(dòng)畫(huà)的時(shí)候，由于Flash動(dòng)畫(huà)的背景顏色會(huì)遮蓋掉背景圖像，這樣就看不到漂亮的背景圖像了。那么如何使背景圖像能夠正常顯示呢？答案就是設(shè)法將Flash動(dòng)畫(huà)的背景顏色改成透

21、明（具體操作見(jiàn)視頻3.2.3）。 范例2 在“火百合”主頁(yè)中插入圖像和動(dòng)畫(huà)在學(xué)習(xí)了圖像和動(dòng)畫(huà)的應(yīng)用后，下面通過(guò)一個(gè)例子來(lái)練習(xí)一下這方面的知識(shí)（具體操作見(jiàn)視頻3-2）。 3.3 制作超鏈接 3.3.1 常規(guī)鏈接 常規(guī)超級(jí)鏈接包括內(nèi)部超級(jí)鏈接和外部超級(jí)鏈接，內(nèi)部超級(jí)鏈接是指目標(biāo)文件位于站點(diǎn)內(nèi)部的鏈接；外部超級(jí)鏈接可實(shí)現(xiàn)網(wǎng)站與網(wǎng)站之間的跳轉(zhuǎn)，也就是從本網(wǎng)站跳轉(zhuǎn)到其他網(wǎng)站。 1內(nèi)部鏈接 內(nèi)部鏈接的設(shè)置非常靈活，在選中要設(shè)置鏈接的對(duì)象后，可以在屬性面板的“鏈接”文本框中直接輸入要鏈接到的網(wǎng)址或網(wǎng)頁(yè)名稱；也可以單擊屬性面板上“鏈接”文本框后的文件夾圖標(biāo) ，在彈出的“選擇文件”對(duì)話框中選擇要鏈接到的文件；還

22、有一種方法是單擊并拖動(dòng)“屬性”面板上“鏈接”文本框后的 按鈕到“文件”面板中的文件上。 2外部鏈接 外部鏈接只能采用一種方法設(shè)置，就是在選中對(duì)象后，在“屬性”面板的“鏈接”文本框中輸入要鏈接到的網(wǎng)址。3.3.2 圖片鏈接和下載鏈接 設(shè)置圖片鏈接和下載鏈接的方法非常簡(jiǎn)單，選中要設(shè)置為鏈接的文字或圖片后，只要在“屬性”面板的“鏈接”文本框中將鏈接目標(biāo)設(shè)置為圖像文件或壓縮文件就可以了。 3.3.3 電子郵件鏈接 有些網(wǎng)站上留有電子郵件地址，單擊該地址可打開(kāi)“Outlook Express”的“新郵件”窗口。這是一種特殊類型的鏈接，又叫電子郵件鏈接，下面看看此類鏈接的設(shè)置方法。 3.3.4 熱點(diǎn)鏈接

23、如何為一張圖片設(shè)置多個(gè)鏈接呢？這就用到了熱點(diǎn)。使用熱點(diǎn)工具可以將一張圖片劃分成多個(gè)區(qū)域，并為這些區(qū)域分別設(shè)置鏈接。 范例3 為“火百合”網(wǎng)頁(yè)設(shè)置鏈接在學(xué)習(xí)了超鏈接的設(shè)置方法后，下面通過(guò)一個(gè)例子，來(lái)進(jìn)一步鞏固前面所學(xué)知識(shí)（具體操作見(jiàn)視頻3-3）。 第4章 構(gòu)建網(wǎng)頁(yè)布局 使用表格使用框架4.1 使用表格 所謂表格就是由一個(gè)或多個(gè)單元格構(gòu)成的集合，表格中橫向的多個(gè)單元格稱為行，垂直的多個(gè)單元格稱為列。行與列的交叉區(qū)域稱為單元格，網(wǎng)頁(yè)中的元素通常都被放置在這些單元格中，以使其“各安其位”。 此處表示未明確設(shè)置單元格的寬度 此處顯示了表格的寬度。如果只顯示一個(gè)“”符號(hào)，表示未明確設(shè)置表格寬度 4.1.1

24、 創(chuàng)建表格 在Dreamweaver中創(chuàng)建表格的方法非常簡(jiǎn)單，確定插入點(diǎn)后，單擊“常用”插入欄中的“表格”按鈕，打開(kāi)“表格”對(duì)話框。設(shè)置各項(xiàng)參數(shù)后，單擊“確定”按鈕，便可插入表格。 4.1.2 選擇表格和單元格 在Dreamweaver中選擇表格的方法非常簡(jiǎn)單，只需用鼠標(biāo)單擊表格邊框線即可。要選擇某個(gè)單元格，可首先將光標(biāo)放置在該單元格內(nèi)，然后按【CtrlA】組合鍵或者單擊“標(biāo)簽選擇器”中對(duì)應(yīng)的“”標(biāo)簽。要選擇某行或某列，可將光標(biāo)置于該行的左側(cè)或該列的頂部，當(dāng)光標(biāo)形狀變?yōu)楹谏^ 或 時(shí)單擊鼠標(biāo)。4.1.3 設(shè)置表格和單元格的屬性 選中表格后，使用屬性面板可以修改表格的行、列、寬、高，以及填充、

25、間距等。 在單元格中單擊，屬性面板中將顯示相應(yīng)單元格的屬性。1設(shè)置表格和單元格的寬度與高度 制作網(wǎng)頁(yè)時(shí)，很多情況下都需要改變表格和單元格的寬度與高度，通過(guò)拖動(dòng)邊框或在屬性面板的“寬”和“高”文本框中直接輸入數(shù)值，就可以非常方便地改變表格和單元格的寬度與高度。設(shè)置表格高度 設(shè)置單元格“寬”和“高” 2為表格和單元格設(shè)置背景顏色及背景圖像 為表格和單元格設(shè)置背景顏色及背景圖像的方法相當(dāng)簡(jiǎn)單。 將光標(biāo)置于單元格中 單擊“背景”文本框后的文件夾圖標(biāo)選擇文件 范例1 使用表格構(gòu)建“火百合”主頁(yè)布局 在第3章的范例2中介紹圖像的插入方法時(shí)，由于還沒(méi)有講到表格，所以給出的是現(xiàn)成的表格。下面將結(jié)合表格與圖像的

26、應(yīng)用來(lái)看一下“火百合”主頁(yè)的具體制作方法（具體操作見(jiàn)視頻4-1）。 范例2 制作細(xì)線表格在Dreamweaver中，有多種方法可以制作細(xì)線表格，下面我們講解一種最簡(jiǎn)單也是最常用的方法，就是通過(guò)設(shè)置表格的間距和背景顏色來(lái)制作細(xì)線表格（具體操作見(jiàn)視頻4-2）。 4.1.4 合并與拆分單元格 1合并單元格 所謂合并單元格，就是將相鄰的幾個(gè)單元格合并成一個(gè)單元格。 拖動(dòng)鼠標(biāo)選中要合并的單元格單擊“合并所選單元格，使用跨度”按鈕2拆分單元格 拆分單元格表示將一個(gè)單元格拆分成多個(gè)單元格，下面繼續(xù)在前面的文檔中操作，也就是將前面合并的單元格拆分開(kāi)來(lái)，具體操作如下。 在要拆分的單元格中單擊單擊“拆分單元格為行

27、或列”按鈕打開(kāi)“拆分單元格”對(duì)話框，設(shè)置各項(xiàng)參數(shù)后單擊“確定”按鈕 4.1.5 在表格中添加或刪除行或列在使用表格布局網(wǎng)頁(yè)時(shí)，往往需要在創(chuàng)建好的表格中添加或刪除行或列。 在要添加行或列的單元格中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”“插入行或列”菜單 在打開(kāi)的“插入行或列”對(duì)話框中設(shè)置各項(xiàng)后單擊“確定”按鈕 4.1.6 格式化表格 在使用表格顯示數(shù)據(jù)信息時(shí)，為便于瀏覽者閱讀，往往需要為單元格設(shè)置不同的背景顏色。常用的方法如下。選中表格后，選擇“命令”“格式化表格”菜單 在“格式化表格”對(duì)話框中設(shè)置各項(xiàng)后，單擊“確定”按鈕 范例3 制作嵌套表格 所謂嵌套表格，就是在一個(gè)大表格的某個(gè)單元格里

28、插入一個(gè)新的表格，我們看到的絕大多數(shù)網(wǎng)頁(yè)都是由多個(gè)表格相互嵌套進(jìn)行網(wǎng)頁(yè)布局的。 本節(jié)通過(guò)制作“火百合”網(wǎng)站中的“產(chǎn)品展示”頁(yè)面來(lái)看看嵌套表格的應(yīng)用和制作方法（具體操作見(jiàn)視頻4-3）。 范例4 制作圓角表格 在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到圓角表格，這使得整個(gè)網(wǎng)頁(yè)看起來(lái)更加柔和、美觀。制作圓角表格的方法有很多，下面就以制作下圖左側(cè)的表格為例，具體講解一下此類表格的制作方法（具體操作見(jiàn)視頻4-4）。 4.2 使用框架 4.2.1 關(guān)于框架和框架集 在框架網(wǎng)頁(yè)中，瀏覽器窗口被劃分成了若干區(qū)域，每個(gè)區(qū)域稱為一個(gè)框架。每個(gè)框架可顯示不同的文檔內(nèi)容，彼此之間互不干擾。 框架網(wǎng)頁(yè)由框架集定義，框架集是特殊的HTML

29、文件，它定義一組框架的布局和屬性，包括框架的數(shù)目、大小和位置，以及在每個(gè)框架中初始顯示的頁(yè)面URL。 4.2.2 創(chuàng)建框架集 用戶可以直接創(chuàng)建框架集，也可以在普通頁(yè)面中加載預(yù)定義的框架集。其中，直接創(chuàng)建框架集的方法與創(chuàng)建普通頁(yè)面的方法相似。選擇“文件”“新建”菜單，打開(kāi)“新建文檔”對(duì)話框在“類別”列表中選擇“框架集”選項(xiàng)，右側(cè)將顯示系統(tǒng)預(yù)定義的框架集類型，選擇其中一種，然后單擊“創(chuàng)建”按鈕4.2.3 框架和框架集的基本操作 1認(rèn)識(shí)“框架”面板 利用“框架”面板可以對(duì)框架和框架集進(jìn)行操作，選擇“窗口”“框架”菜單，可以打開(kāi)“框架”面板。 2選擇框架和框架集 在文檔窗口中選擇框架的方法為，按住【A

30、lt】鍵，然后在要選擇的框架內(nèi)單擊，被選中的框架邊線將顯示為虛線。 如要選擇框架集，單擊該框架集上的任意邊框即可，此時(shí)框架集的所有邊框都呈虛線顯示。 利用“框架”面板選擇框架時(shí)，直接在面板中相應(yīng)區(qū)域單擊即可。選擇框架集時(shí)，在面板中單擊框架集的邊框即可。 4.2.4 框架及框架集的屬性設(shè)置 1設(shè)置框架屬性 選中框架后，屬性面板上將顯示相應(yīng)框架的屬性。 顯示框架源文件的保存路徑選擇是否顯示框架的邊框設(shè)置框架滾動(dòng)條的屬性2設(shè)置框架集屬性 選中框架集，屬性面板中將顯示框架集的屬性。 該面板中各參數(shù)的含義同框架屬性面板基本相同，不同的是在“行”或“列”文本框中可設(shè)置框架的行高或列寬，在“單位”下拉列表框

31、中可選擇具體單位。 4.2.5 保存框架和框架集 1保存框架2保存框架集 3保存框架集中的所有文檔 范例5 制作框架網(wǎng)頁(yè)娛樂(lè)天地 該例制作了一個(gè)名為“娛樂(lè)天地”的網(wǎng)頁(yè)，它首先利用框架將頁(yè)面劃分成了若干區(qū)域。另外，在局部布局中也用到了表格（具體操作見(jiàn)視頻4-5）。 第5章 樣式表的應(yīng)用 認(rèn)識(shí)樣式表 定義樣式表樣式表的高級(jí)應(yīng)用5.1 認(rèn)識(shí)樣式表 5.1.1 熟悉“CSS樣式”面板 在Dreamweaver 8中，我們可以借助“CSS樣式”面板來(lái)新建、刪除、編輯和應(yīng)用樣式，以及附加外部樣式表等。 5.1.2 CSS樣式的存在方式 CSS樣式以下面兩種方式存在于網(wǎng)頁(yè)中： 外部CSS樣式表：為了增強(qiáng)CS

32、S樣式的通用性，我們可以創(chuàng)建擴(kuò)展名為.css的樣式表文件。利用“CSS樣式”面板可將該文件鏈接到站點(diǎn)中的一個(gè)或多個(gè)網(wǎng)頁(yè)中，從而使用戶可以直接應(yīng)用其中定義的樣式。 內(nèi)部（或嵌入式）CSS樣式表：是一系列包含在HTML文檔head部分的、style標(biāo)簽內(nèi)的CSS樣式。5.2 定義樣式表 5.2.1 CSS樣式的分類 根據(jù)應(yīng)用對(duì)象的不同，CSS樣式被分成了以下三類。 （1）類樣式（2）標(biāo)簽樣式 （3）選擇器樣式 5.2.2 定義樣式的步驟 對(duì)于類樣式而言，當(dāng)我們修改了所選文本的字體、大小、顏色等屬性后，系統(tǒng)會(huì)自動(dòng)創(chuàng)建相應(yīng)的樣式。此外，也可以在“CSS樣式”面板中單擊“新建CSS規(guī)則”按鈕 ，直接創(chuàng)建

33、類樣式和其他兩種樣式。 范例1 為“火百合”網(wǎng)頁(yè)中的表格定義邊線樣式 在了解了定義樣式的步驟后，本節(jié)通過(guò)一個(gè)實(shí)例來(lái)學(xué)習(xí)一下類樣式的定義和應(yīng)用方法（具體操作見(jiàn)視頻5-1）。 范例2 為“火百合”網(wǎng)頁(yè)定義“body”樣式 在樣式類型中，最常用的就是標(biāo)簽樣式，本節(jié)通過(guò)為“火百合”網(wǎng)頁(yè)定義“body”樣式，來(lái)看看標(biāo)簽樣式的定義和應(yīng)用（具體操作見(jiàn)視頻5-2）。 范例3 為“火百合”網(wǎng)頁(yè)定義鏈接樣式 “鏈接”是網(wǎng)站中不可缺少的組成元素，本節(jié)通過(guò)為“pro_b.html”網(wǎng)頁(yè)中的鏈接文本定義樣式，來(lái)看看高級(jí)樣式的設(shè)置方法（具體操作見(jiàn)視頻5-3）。 范例4 鏈接外部樣式 我們?cè)凇胺独?”中曾創(chuàng)建了一個(gè)名為“s

34、2.css”的樣式文件，下面來(lái)看看如何將其鏈接到網(wǎng)站中的其他頁(yè)面（具體操作見(jiàn)視頻5-4）。 5.3 樣式表的高級(jí)應(yīng)用 范例5 為“火百合”網(wǎng)頁(yè)設(shè)置列表樣式 所謂列表樣式，就是為網(wǎng)頁(yè)中的列表文本設(shè)置的樣式。本節(jié)通過(guò)為“火百合”網(wǎng)頁(yè)左側(cè)的鏈接文本設(shè)置列表樣式，來(lái)看一下此類樣式的設(shè)置方法（具體操作見(jiàn)視頻5-5）。 范例6 為“火百合”網(wǎng)頁(yè)中的圖片設(shè)置陰影 很多人都知道Photoshop擁有強(qiáng)大的濾鏡功能，但很少有人知道Dreamweaver中的CSS濾鏡。應(yīng)用CSS濾鏡可設(shè)置漸變、透明、陰影等效果。本例使用CSS濾鏡中的“Shadow”屬性來(lái)給圖像添加陰影（具體操作見(jiàn)視頻5-6）。 范例7 在同一個(gè)

35、網(wǎng)頁(yè)中設(shè)置兩種鏈接樣式 有時(shí)候可能會(huì)遇到這種情況，你制作了一個(gè)網(wǎng)頁(yè)，其中有很多鏈接文本，你想用不同的鏈接樣式來(lái)區(qū)分這些鏈接文本，也就是設(shè)置兩個(gè)不同樣式的鏈接，那么如何設(shè)置呢？下面通過(guò)給LZG站點(diǎn)中的“index_a.html”網(wǎng)頁(yè)添加一個(gè)鏈接樣式來(lái)講解此類樣式的設(shè)置方法（具體操作見(jiàn)視頻5-7）。 第5章 樣式表的應(yīng)用 認(rèn)識(shí)樣式表 定義樣式表樣式表的高級(jí)應(yīng)用5.1 認(rèn)識(shí)樣式表 5.1.1 熟悉“CSS樣式”面板 在Dreamweaver 8中，我們可以借助“CSS樣式”面板來(lái)新建、刪除、編輯和應(yīng)用樣式，以及附加外部樣式表等。 5.1.2 CSS樣式的存在方式 CSS樣式以下面兩種方式存在于網(wǎng)頁(yè)中

36、： 外部CSS樣式表：為了增強(qiáng)CSS樣式的通用性，我們可以創(chuàng)建擴(kuò)展名為.css的樣式表文件。利用“CSS樣式”面板可將該文件鏈接到站點(diǎn)中的一個(gè)或多個(gè)網(wǎng)頁(yè)中，從而使用戶可以直接應(yīng)用其中定義的樣式。 內(nèi)部（或嵌入式）CSS樣式表：是一系列包含在HTML文檔head部分的、style標(biāo)簽內(nèi)的CSS樣式。5.2 定義樣式表 5.2.1 CSS樣式的分類 根據(jù)應(yīng)用對(duì)象的不同，CSS樣式被分成了以下三類。 （1）類樣式（2）標(biāo)簽樣式 （3）選擇器樣式 5.2.2 定義樣式的步驟 對(duì)于類樣式而言，當(dāng)我們修改了所選文本的字體、大小、顏色等屬性后，系統(tǒng)會(huì)自動(dòng)創(chuàng)建相應(yīng)的樣式。此外，也可以在“CSS樣式”面板中單擊

37、“新建CSS規(guī)則”按鈕 ，直接創(chuàng)建類樣式和其他兩種樣式。 范例1 為“火百合”網(wǎng)頁(yè)中的表格定義邊線樣式 在了解了定義樣式的步驟后，本節(jié)通過(guò)一個(gè)實(shí)例來(lái)學(xué)習(xí)一下類樣式的定義和應(yīng)用方法（具體操作見(jiàn)視頻5-1）。 范例2 為“火百合”網(wǎng)頁(yè)定義“body”樣式 在樣式類型中，最常用的就是標(biāo)簽樣式，本節(jié)通過(guò)為“火百合”網(wǎng)頁(yè)定義“body”樣式，來(lái)看看標(biāo)簽樣式的定義和應(yīng)用（具體操作見(jiàn)視頻5-2）。 范例3 為“火百合”網(wǎng)頁(yè)定義鏈接樣式 “鏈接”是網(wǎng)站中不可缺少的組成元素，本節(jié)通過(guò)為“pro_b.html”網(wǎng)頁(yè)中的鏈接文本定義樣式，來(lái)看看高級(jí)樣式的設(shè)置方法（具體操作見(jiàn)視頻5-3）。 范例4 鏈接外部樣式 我們

38、在“范例2”中曾創(chuàng)建了一個(gè)名為“s2.css”的樣式文件，下面來(lái)看看如何將其鏈接到網(wǎng)站中的其他頁(yè)面（具體操作見(jiàn)視頻5-4）。 5.3 樣式表的高級(jí)應(yīng)用 范例5 為“火百合”網(wǎng)頁(yè)設(shè)置列表樣式 所謂列表樣式，就是為網(wǎng)頁(yè)中的列表文本設(shè)置的樣式。本節(jié)通過(guò)為“火百合”網(wǎng)頁(yè)左側(cè)的鏈接文本設(shè)置列表樣式，來(lái)看一下此類樣式的設(shè)置方法（具體操作見(jiàn)視頻5-5）。 范例6 為“火百合”網(wǎng)頁(yè)中的圖片設(shè)置陰影 很多人都知道Photoshop擁有強(qiáng)大的濾鏡功能，但很少有人知道Dreamweaver中的CSS濾鏡。應(yīng)用CSS濾鏡可設(shè)置漸變、透明、陰影等效果。本例使用CSS濾鏡中的“Shadow”屬性來(lái)給圖像添加陰影（具體操作

39、見(jiàn)視頻5-6）。 范例7 在同一個(gè)網(wǎng)頁(yè)中設(shè)置兩種鏈接樣式 有時(shí)候可能會(huì)遇到這種情況，你制作了一個(gè)網(wǎng)頁(yè)，其中有很多鏈接文本，你想用不同的鏈接樣式來(lái)區(qū)分這些鏈接文本，也就是設(shè)置兩個(gè)不同樣式的鏈接，那么如何設(shè)置呢？下面通過(guò)給LZG站點(diǎn)中的“index_a.html”網(wǎng)頁(yè)添加一個(gè)鏈接樣式來(lái)講解此類樣式的設(shè)置方法（具體操作見(jiàn)視頻5-7）。 第6章 制作高級(jí)網(wǎng)頁(yè)效果 應(yīng)用交互式圖像 應(yīng)用多媒體 應(yīng)用行為 6.1 應(yīng)用交互式圖像 6.1.1 鼠標(biāo)經(jīng)過(guò)圖像 要制作鼠標(biāo)經(jīng)過(guò)圖像，需要用到兩張大小相同，而內(nèi)容不同的圖像。其中一張作為原始圖像，在頁(yè)面打開(kāi)的時(shí)候就顯示；另一張則作為鼠標(biāo)經(jīng)過(guò)圖像，在鼠標(biāo)經(jīng)過(guò)的時(shí)候替換原

40、始圖像顯示出來(lái)。本例中用到的兩張圖像位于網(wǎng)站“car”的圖像文件夾“images”中（具體操作見(jiàn)視頻6.1.1）。 范例1 為“macaco”網(wǎng)頁(yè)制作交互式導(dǎo)航條 導(dǎo)航條在網(wǎng)站中起著不可替代的作用，它把網(wǎng)站中的各個(gè)頁(yè)面連接起來(lái)，每一個(gè)網(wǎng)站都有自己的導(dǎo)航條。利用與制作鼠標(biāo)經(jīng)過(guò)圖像類似的方法，可制作具有可變效果的導(dǎo)航條（具體操作見(jiàn)視頻6-1）。 6.2 應(yīng)用多媒體 6.2.1 在頁(yè)面中嵌入音樂(lè)文件 網(wǎng)頁(yè)中可以應(yīng)用多種格式的音樂(lè)文件，如MID（樂(lè)器數(shù)字接口）格式、WAV（Waveform擴(kuò)展名）格式、AIF（音頻交換文件格式，即AIFF）格式、MP3（運(yùn)動(dòng)圖像專家組音頻，即MPEG-音頻層-3）格式

41、、WMA（Windows Media Audio）、RA或RAM（Real Audio）格式等。 范例2 為“火百合”主頁(yè)添加背景音樂(lè) 通過(guò)上一節(jié)的學(xué)習(xí)，相信大家已經(jīng)掌握了在網(wǎng)頁(yè)中插入音頻文件的方法。但是，很多時(shí)候需要將插入的音頻文件隱藏，那么如何實(shí)現(xiàn)呢？下面通過(guò)為網(wǎng)頁(yè)設(shè)置背景音樂(lè)來(lái)看看如何隱藏網(wǎng)頁(yè)中的音頻文件（具體操作見(jiàn)視頻6-2）。 范例3 在“cat”網(wǎng)頁(yè)中嵌入視頻 除了插入音樂(lè)文件外，在Dreamweaver中還可以非常容易地插入Shockwave影片、Applet和視頻文件等其他媒體元素。下面以在“cat”網(wǎng)頁(yè)中插入視頻文件為例，來(lái)看看插入視頻文件的具體方法（具體操作見(jiàn)視頻6-3）。

42、 6.3 應(yīng)用行為 6.3.1 認(rèn)識(shí)行為 行為能夠幫助用戶輕松使用JavaScript。應(yīng)用行為時(shí)需要先選中要應(yīng)用行為的對(duì)象，然后在“行為”面板的動(dòng)作列表中選擇效果，并在打開(kāi)的窗口中設(shè)置效果，最后指定設(shè)定的動(dòng)作在什么情況下發(fā)生，也就是指定事件。 6.3.2 認(rèn)識(shí)“行為”面板 為文檔添加行為，需要使用“行為”面板，下面我們來(lái)認(rèn)識(shí)一下“行為”面板。選擇“窗口”“行為”菜單，或按【Shift+F4】組合鍵，即可打開(kāi)“行為”面板。 范例4 應(yīng)用“打開(kāi)瀏覽器窗口”行為 應(yīng)用“打開(kāi)瀏覽器窗口”行為，可通過(guò)單擊目標(biāo)文字或圖片，打開(kāi)固定大小的窗口，下面通過(guò)一個(gè)實(shí)例，來(lái)看看“打開(kāi)瀏覽器窗口”行為在網(wǎng)頁(yè)中的具體應(yīng)

43、用（具體操作見(jiàn)視頻6-4）。 范例5 為“pegiun”網(wǎng)頁(yè)制作下拉菜單 有些內(nèi)容較多的網(wǎng)站經(jīng)常需要用到下拉菜單，使用“顯示-隱藏層”行為就可以輕松實(shí)現(xiàn)該功能，本節(jié)以“pegiun”網(wǎng)頁(yè)為例，來(lái)講述下拉菜單的制作方法（具體操作見(jiàn)視頻6-5）。 范例6 設(shè)置狀態(tài)欄文本 如果為自己的網(wǎng)頁(yè)設(shè)置一些比較有個(gè)性的狀態(tài)欄文本，那一定很吸引人，下面我們就來(lái)給pegiun網(wǎng)頁(yè)設(shè)置狀態(tài)欄文本（具體操作見(jiàn)視頻6-6）。 6.3.3 安裝插件 除了Dreamweaver內(nèi)置的行為外，讀者還可以到macromedia或其他網(wǎng)站上去下載并安裝第三方行為。雙擊安裝文件 顯示“擴(kuò)展功能免責(zé)聲明”，單擊“接受”按鈕顯示提示框

44、，單擊“確定”按鈕第7章 模板和庫(kù)的應(yīng)用 使用模板 使用庫(kù)項(xiàng)目7.1 使用模板 7.1.1 創(chuàng)建模板文檔 模板文檔一般分為可編輯區(qū)域和不可編輯區(qū)域。模板文檔中設(shè)定為可編輯區(qū)域的部分可以在其他文檔中像一般構(gòu)成要素一樣進(jìn)行修改；而設(shè)定為不可編輯區(qū)域的部分，則不能在其他文檔中進(jìn)行修改。 創(chuàng)建模板文檔的方法有兩種，一種是新建空白模板文檔，然后編輯內(nèi)容；還有一種是將普通網(wǎng)頁(yè)文檔保存為模板。 7.1.2 模板的區(qū)域類型 除了在模板中定義可編輯區(qū)域外，還可通過(guò)選擇“插入”“模板對(duì)象”菜單來(lái)定義其他幾種類型的區(qū)域。可選區(qū)域：如果在模板中指定了這類區(qū)域，則在基于模板的文檔中可顯示或隱藏該區(qū)域。要為在文檔中顯示內(nèi)

45、容設(shè)置條件時(shí)，可使用可選區(qū)域。重復(fù)區(qū)域：重復(fù)區(qū)域是可以根據(jù)需要在基于模板的頁(yè)面中復(fù)制任意次數(shù)的模板部分。重復(fù)區(qū)域通常用于表格，但也可以為其他頁(yè)面元素定義重復(fù)區(qū)域。7.1.3 基于模板創(chuàng)建文檔 創(chuàng)建模板以后，就可以在該模板的基礎(chǔ)上創(chuàng)建網(wǎng)頁(yè)文檔了。 打開(kāi)“新建文檔”對(duì)話框，選擇“模板”選項(xiàng)卡選擇要應(yīng)用的模板所在站點(diǎn)選擇要應(yīng)用的模板單擊“創(chuàng)建”按鈕顯示模板預(yù)覽效果范例1 制作“服裝展示”網(wǎng)頁(yè)模板 前面講了將現(xiàn)有網(wǎng)頁(yè)保存為模板的方法，本節(jié)我們以“服裝展示”網(wǎng)頁(yè)模板的創(chuàng)建為例，來(lái)學(xué)習(xí)新建并編輯模板文檔的方法。（具體操作見(jiàn)視頻7-1）。 范例2 利用模板制作網(wǎng)頁(yè) 創(chuàng)建模板以后，就可以在模板的基礎(chǔ)上創(chuàng)建新文

46、檔了，本節(jié)我們采用范例1中創(chuàng)建的模板來(lái)制作“雪紡上衣”網(wǎng)頁(yè)（具體操作見(jiàn)視頻7-2）。7.2 使用庫(kù)項(xiàng)目 7.2.1 什么是庫(kù)項(xiàng)目 庫(kù)項(xiàng)目是一種特殊類型的Dreamweaver文件，我們可以將當(dāng)前網(wǎng)頁(yè)中的任意頁(yè)面元素定義為庫(kù)項(xiàng)目，如圖像、表格、文本、聲音和Flash影片等。 創(chuàng)建庫(kù)項(xiàng)目的好處是可以在多個(gè)頁(yè)面中重復(fù)使用它們，每當(dāng)更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，所有使用了該項(xiàng)目的頁(yè)面都將同時(shí)更新。 7.2.2 創(chuàng)建庫(kù)項(xiàng)目 首先在文檔窗口中選擇需要保存為庫(kù)項(xiàng)目的對(duì)象，然后選擇“修改”“庫(kù)”“增加對(duì)象到庫(kù)”菜單，即可將所選對(duì)象添加到庫(kù)中。剛剛創(chuàng)建的庫(kù)項(xiàng)目名稱處于可編輯狀態(tài)，將默認(rèn)名刪除，重新輸入新名稱并按【En

47、ter】鍵確認(rèn)即可重命名庫(kù)項(xiàng)目。 范例3 創(chuàng)建“top”庫(kù)項(xiàng)目 一般情況下，網(wǎng)站中的每個(gè)網(wǎng)頁(yè)都要包含網(wǎng)站標(biāo)志和導(dǎo)航條，下面我們就將“dress”網(wǎng)站中的網(wǎng)站標(biāo)志和導(dǎo)航條定義為“庫(kù)”項(xiàng)目（具體操作見(jiàn)視頻7-3）。 7.2.3 插入庫(kù)項(xiàng)目 將庫(kù)項(xiàng)目插入到文檔中的操作非常簡(jiǎn)單，只需在“資源”面板的庫(kù)窗口中將庫(kù)項(xiàng)目拖入到文檔的適當(dāng)位置即可。此外，也可以選中庫(kù)中的項(xiàng)目，然后單擊“資源”面板底部的“插入”按鈕，將庫(kù)項(xiàng)目插入到文檔中。 普通對(duì)象與庫(kù)項(xiàng)目選中狀態(tài)對(duì)比7.2.4 編輯庫(kù)項(xiàng)目 要編輯庫(kù)項(xiàng)目，可在“資源”面板中雙擊庫(kù)項(xiàng)目，Dreamweaver會(huì)在網(wǎng)頁(yè)編輯窗口中打開(kāi)該庫(kù)項(xiàng)目。 編輯庫(kù)項(xiàng)目后保存庫(kù)項(xiàng)目

48、時(shí)，系統(tǒng)會(huì)自動(dòng)打開(kāi)“更新庫(kù)項(xiàng)目”對(duì)話框，詢問(wèn)用戶是否更新使用了庫(kù)項(xiàng)目的網(wǎng)頁(yè)。通常情況下，應(yīng)單擊“更新”按鈕，接下來(lái)系統(tǒng)將顯示“更新頁(yè)面”對(duì)話框，其中顯示了更新情況。 范例4 在“服裝展示”網(wǎng)頁(yè)中應(yīng)用庫(kù)項(xiàng)目 在學(xué)完了庫(kù)項(xiàng)目的應(yīng)用及編輯后，緊接著通過(guò)一個(gè)實(shí)例來(lái)練習(xí)一下庫(kù)項(xiàng)目的應(yīng)用（具體操作見(jiàn)視頻7-4）。 第8章 表單及表單對(duì)象的應(yīng)用 表單的應(yīng)用 表單對(duì)象的應(yīng)用驗(yàn)證表單數(shù)據(jù) 8.1 表單的應(yīng)用 8.1.1 認(rèn)識(shí)表單 在Dreamweaver的“插入”欄中有一個(gè)“表單”類別，選擇該類別，可插入的表單對(duì)象快捷按鈕將顯示在“插入”欄中。 8.1.2 插入表單 表單對(duì)象只有添加到表單中才能正常運(yùn)行，所以在

49、應(yīng)用表單對(duì)象前需要先在頁(yè)面中插入表單，下面我們就來(lái)學(xué)習(xí)如何在頁(yè)面中插入表單。 單擊“表單”插入欄中的“表單”按鈕 插入表單 8.2 表單對(duì)象的應(yīng)用 8.2.1 文本字段 文本字段是最常見(jiàn)的表單對(duì)象之一，在文本字段中可輸入任何類型的文本內(nèi)容，像姓名、地址、E-mail或稍長(zhǎng)一些的個(gè)人介紹等字段。8.2.2 隱藏域 隱藏域用來(lái)存儲(chǔ)非用戶輸入信息。例如，當(dāng)用戶登錄某些頁(yè)面時(shí)需輸入用戶名和密碼，登錄成功后，會(huì)在其他頁(yè)面顯示用戶名，此時(shí)即可使用隱藏域來(lái)顯示用戶名。 8.2.3 按鈕 對(duì)表單而言，按鈕是不可缺少的元素，它能夠控制表單的內(nèi)容，如“提交”或“重設(shè)”。單擊“提交”按鈕可將表單中的內(nèi)容發(fā)送到服務(wù)器

50、，單擊“重設(shè)”按鈕可清除表單中現(xiàn)有的內(nèi)容。 范例1 制作留言頁(yè)面 本例通過(guò)制作一個(gè)包含表單、文本域和按鈕的留言頁(yè)面，來(lái)練習(xí)和鞏固一下表單對(duì)象在網(wǎng)頁(yè)制作中的應(yīng)用（具體操作見(jiàn)視頻8-1）。 8.2.4 復(fù)選框 復(fù)選框允許用戶在一組選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)，常用于制作調(diào)查類欄目。 “復(fù)選框”的應(yīng)用 “復(fù)選框”的屬性面板8.2.5 單選按鈕和單選按鈕組 單選按鈕允許用戶在多個(gè)選項(xiàng)中選擇一個(gè)，不能進(jìn)行多項(xiàng)選擇。有時(shí)候需要一次添加多個(gè)單選按鈕，此時(shí)可用單選按鈕組來(lái)代替，單選按鈕組相當(dāng)于多個(gè)名稱相同的單選按鈕，除創(chuàng)建方法不同外，它們之間沒(méi)有任何區(qū)別。 單擊“單選按鈕組”按鈕 ，彈出“單選按鈕組”對(duì)話框8.2

51、.6 列表和菜單 除復(fù)選框和單選按鈕外，在遇到需要制作選項(xiàng)時(shí)，還可以使用“列表/菜單”。在擁有較多選項(xiàng)，且網(wǎng)頁(yè)空間又比較有限的情況下，“列表/菜單”將是最好的選擇。 “列表/菜單”對(duì)象的屬性面板8.2.7 圖像域 使用圖像域可以用一些漂亮的圖像按鈕來(lái)代替Dreamweaver自帶的按鈕，從而使網(wǎng)站更美觀。單擊“圖像域”按鈕，彈出“選擇圖像源文件”對(duì)話框選擇要添加的圖像，然后單擊“確定”按鈕，添加圖像域圖像域?qū)傩悦姘?.2.8 文件域 “文件域”可以使瀏覽者選擇本地計(jì)算機(jī)上的文件，并將該文件上傳到服務(wù)器上。“文件域”的外觀與文本域類似，只是后面多了一個(gè)“瀏覽”按鈕。瀏覽者可以單擊該按鈕來(lái)選擇要上

52、傳的文件，或者直接在文本框中輸入要上傳文件的路徑。 范例2 制作“商品訂購(gòu)”頁(yè)面 至此，前面已介紹了所有表單對(duì)象，在實(shí)際制作網(wǎng)頁(yè)時(shí)，這些表單對(duì)象很少單獨(dú)使用，一個(gè)表單中通常會(huì)包含各種類型的表單對(duì)象。本節(jié)我們來(lái)制作一個(gè)完整的表單網(wǎng)頁(yè)實(shí)例（具體操作見(jiàn)視頻8-2）。 8.3 驗(yàn)證表單數(shù)據(jù) 使用Dreamweaver中的行為可以添加用于檢查指定文本域中內(nèi)容的JavaScript代碼，以確保瀏覽者輸入了符合要求的數(shù)據(jù)。 添加行為打開(kāi)“檢查表單”對(duì)話框，設(shè)置各項(xiàng)后單擊“確定”按鈕即可添加行為第9章 動(dòng)態(tài)網(wǎng)頁(yè)制作入門(mén) 創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)測(cè)試環(huán)境 數(shù)據(jù)庫(kù)相關(guān)知識(shí) 發(fā)布網(wǎng)站9.1 創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)測(cè)試環(huán)境 9.1.1 動(dòng)

53、態(tài)網(wǎng)頁(yè)工作原理 動(dòng)態(tài)網(wǎng)頁(yè)一般使用“HTML+數(shù)據(jù)庫(kù)+ASP”或“HTML+數(shù)據(jù)庫(kù)+PHP”或“HTML+數(shù)據(jù)庫(kù)+JSP”等來(lái)實(shí)現(xiàn)，本節(jié)以“HTML+數(shù)據(jù)庫(kù)+ASP”技術(shù)為例，簡(jiǎn)單介紹一下動(dòng)態(tài)網(wǎng)頁(yè)的工作原理。 9.1.2 在Windows XP中安裝IIS 要制作動(dòng)態(tài)網(wǎng)頁(yè)，首先需要有一個(gè)測(cè)試服務(wù)器。在Windows XP操作系統(tǒng)下，只要安裝了IIS，即可將自己的電腦設(shè)置為測(cè)試服務(wù)器。在安裝Windows XP時(shí)，默認(rèn)狀態(tài)下是不會(huì)安裝IIS的，所以需要單獨(dú)安裝。 范例1 設(shè)置“pegiun”為IIS默認(rèn)網(wǎng)站 安裝了IIS后，還需要進(jìn)行簡(jiǎn)單的設(shè)置才能用于測(cè)試網(wǎng)頁(yè)，下面我們就來(lái)看看具體的設(shè)置方法。在開(kāi)

54、始操作之前，請(qǐng)先將本書(shū)“素材與實(shí)例dreamweaver”中的“pegiun”文件夾拷貝到本地磁盤(pán)中（具體操作見(jiàn)視頻9-1）。 9.2 數(shù)據(jù)庫(kù)相關(guān)知識(shí) 數(shù)據(jù)庫(kù)（DataBase）是以一定組織形式存放在計(jì)算機(jī)存儲(chǔ)介質(zhì)上的相互關(guān)聯(lián)的數(shù)據(jù)集合。數(shù)據(jù)庫(kù)看起來(lái)像是一個(gè)表格，按照行或列來(lái)表示信息。表的每一行稱為一個(gè)“記錄”，每一列稱為一個(gè)“字段”，字段和記錄是數(shù)據(jù)庫(kù)中最基本的術(shù)語(yǔ)。 范例2 創(chuàng)建數(shù)據(jù)庫(kù)“mydb” 本節(jié)將使用Access 2000創(chuàng)建數(shù)據(jù)庫(kù)，以保存用戶個(gè)人信息及留言內(nèi)容。當(dāng)然，要使用Access 2000，必須首先安裝該軟件。Access的安裝過(guò)程非常簡(jiǎn)單，在安裝Office辦公軟件時(shí)默認(rèn)

55、狀態(tài)下會(huì)安裝Access。本例中，我們將創(chuàng)建一個(gè)包含5個(gè)字段的數(shù)據(jù)庫(kù)，它們分別是編號(hào)、昵稱、留言、日期和時(shí)間（具體操作見(jiàn)視頻9-2）。 典型范例 制作留言板 1創(chuàng)建動(dòng)態(tài)站點(diǎn) 在開(kāi)始網(wǎng)頁(yè)制作之前，需要先創(chuàng)建站點(diǎn)，動(dòng)態(tài)網(wǎng)站更是如此。本節(jié)我們以“pegiun”網(wǎng)站為例來(lái)看一下動(dòng)態(tài)站點(diǎn)的創(chuàng)建方法（具體操作見(jiàn)視頻9-3）。 2制作留言列表頁(yè)面 （1）創(chuàng)建數(shù)據(jù)庫(kù)連接 利用Dreamweaver中的“數(shù)據(jù)庫(kù)”面板可以非常容易地連接服務(wù)器和數(shù)據(jù)庫(kù)（具體操作見(jiàn)視頻9-4）。 （2）創(chuàng)建記錄集 記錄集就是數(shù)據(jù)庫(kù)表中各條記錄的集合，此處創(chuàng)建記錄集的目的就是讀取數(shù)據(jù)庫(kù)中的內(nèi)容。以前創(chuàng)建記錄集需要手動(dòng)編寫(xiě)SQL語(yǔ)句?，F(xiàn)

56、在好了，使用Dreamweaver提供的“綁定”面板，只需在彈出菜單中選擇數(shù)據(jù)庫(kù)連接和表即可輕松創(chuàng)建（具體操作見(jiàn)視頻9-5）。 （3）設(shè)置動(dòng)態(tài)文本 動(dòng)態(tài)文本是指需要從數(shù)據(jù)庫(kù)中讀取，而不是直接輸入到網(wǎng)頁(yè)中的文本。使用Dreamweaver提供的“服務(wù)器行為”面板，可以輕松設(shè)置動(dòng)態(tài)文本，不需要再一個(gè)個(gè)地插入（具體操作見(jiàn)視頻9-6）。 3制作留言頁(yè)面 留言板肯定要具有留言功能，本節(jié)我們就來(lái)看看如何使用Dreamweaver來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的留言功能。第8章的范例1制作了一個(gè)留言界面，本節(jié)我們就在它的基礎(chǔ)上開(kāi)始留言功能的制作（具體操作見(jiàn)視頻9-7）。 9.3 發(fā)布網(wǎng)站 網(wǎng)站制作好后，需要申請(qǐng)一個(gè)域名和主機(jī)空

57、間，并將制作好的網(wǎng)站上傳到空間上，這樣別人才能通過(guò)Internet訪問(wèn)你的網(wǎng)站。此外，為了讓瀏覽者能順利訪問(wèn)你的網(wǎng)站，在將站點(diǎn)上傳到主機(jī)空間之前，最好對(duì)其進(jìn)行測(cè)試，主要包括網(wǎng)站兼容性和鏈接測(cè)試。 9.3.1 網(wǎng)頁(yè)兼容性測(cè)試 通過(guò)兼容性測(cè)試，可以查出文檔中是否含有瀏覽器不支持的標(biāo)簽或?qū)傩缘?，如EMBED標(biāo)簽、marquee標(biāo)簽等。如果這些元素不被瀏覽器支持，在瀏覽器中會(huì)顯示不完全或功能運(yùn)行不正常，當(dāng)然也會(huì)影響網(wǎng)頁(yè)的質(zhì)量。 9.3.2 檢查并修復(fù)網(wǎng)頁(yè)鏈接 1檢查頁(yè)面鏈接 2檢查站點(diǎn)中某部分的鏈接 3檢查站點(diǎn)范圍的鏈接 9.3.3 設(shè)置站點(diǎn)遠(yuǎn)程信息 申請(qǐng)好主機(jī)和域名后，服務(wù)商會(huì)為我們提供登錄虛擬空間

58、所用的IP地址、登錄帳戶名稱和密碼。必須把這些信息設(shè)置到Dreamweaver對(duì)應(yīng)的站點(diǎn)中，才能通過(guò)Dreamweaver內(nèi)置的站點(diǎn)管理功能上傳或下載站點(diǎn)文件。 9.3.4 上傳或下載文件 與服務(wù)器成功連接后，如果要從本地站點(diǎn)向服務(wù)器中上傳文件，可直接單擊“文件”面板中的“上傳文件”按鈕 ，此時(shí)系統(tǒng)會(huì)首先打開(kāi)提示對(duì)話框，詢問(wèn)用戶是否上傳整個(gè)站點(diǎn)。如果單擊“確定”按鈕，系統(tǒng)將開(kāi)始上傳文件并顯示上傳進(jìn)度提示對(duì)話框。單擊“詳細(xì)”前面的小黑三角，將顯示詳細(xì)的上傳信息列表。 第10章 Fireworks 8入門(mén) 初識(shí)Fireworks 8矢量圖形繪制與編輯10.1 初識(shí)Fireworks 8 Firew

59、orks 8同Dreamweaver 8的啟動(dòng)過(guò)程類似。啟動(dòng)Fireworks 8后，系統(tǒng)會(huì)首先顯示起始頁(yè)。 在起始頁(yè)的“新建”列中單擊“Fireworks文件”后，將打開(kāi)“新建文檔”對(duì)話框。設(shè)置各項(xiàng)參數(shù)后單擊“確定”按鈕，將進(jìn)入Fireworks 8的操作界面。 10.1.1 工具欄 Fireworks 8的工具欄包括“主要”工具欄和“修改”工具欄。默認(rèn)狀態(tài)下，工具欄是關(guān)閉的，選擇“窗口”“工具欄”菜單下的相應(yīng)選項(xiàng)，可打開(kāi)相應(yīng)的工具欄。 “主要”工具欄 “修改”工具欄 10.1.2 工具面板 默認(rèn)狀態(tài)下，“工具”面板位于工作界面的左側(cè)，其中的工具被分成6個(gè)類別：選擇、位圖、矢量、網(wǎng)頁(yè)（Web

60、）、顏色和視圖。如果某個(gè)工具圖標(biāo)的右下角有一個(gè)小黑三角符號(hào)，單擊并按住鼠標(biāo)不放將打開(kāi)該工具的同位工具組。10.1.3 屬性面板 “屬性”面板是一個(gè)上下文關(guān)聯(lián)面板，它用來(lái)顯示或設(shè)置當(dāng)前工具、對(duì)象或文檔的屬性。默認(rèn)情況下，“屬性”面板位于工作區(qū)底部。單擊此按鈕可展開(kāi)或折疊屬性面板單擊此按鈕可以半高或全高方式顯示屬性面板10.1.4 文檔編輯窗口 顧名思義，文檔編輯窗口主要用于編輯文檔。Fireworks 8的多文檔編輯界面可以使用戶同時(shí)打開(kāi)和瀏覽多個(gè)文檔，單擊窗口左上方的文檔標(biāo)簽可以在各個(gè)文檔之間切換。 標(biāo)尺網(wǎng)格“幀的播放”工具欄 視圖控制欄10.1.5 控制面板 默認(rèn)情況下，F(xiàn)ireworks中