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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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