網頁設計

DreamweaverCS3精通篇第十二章APDiv的應用概要：

Dreamweaver將帶有絕對位置的所有div標簽視為AP元素（分配有絕對位置的元素）。AP元素（絕對定位元素）是分配有絕對位置的HTML頁面元素，具體地說，就是div標簽或其它任何標簽。AP元素可以包含文本、圖像或其它任何可放置到HTML文檔正文中的內容。通過Dreamweaver，我們可以使用AP元素來設計頁面的布局。本章節主要通過三個活動，分別介紹了APDiv的創建及基本操作，表格和AP元素的相互轉換，以及AP元素的綜合應用。

了解APDiv的概念，掌握插入APDiv的基本方法，掌握設置APDiv參數和屬性的基本方法教學目標：知識要點：APDiv、APDiv參數、APDiv屬性活動一：APDiv的創建及基本操作準備知識：（1）APDiv概述（2）插入APDiv和插入嵌套APDiv（3）設置AP元素參數和屬性“屬性”面板

活動一：APDiv的創建及基本操作準備知識：（4）選取AP元素

①選取單個AP元素方法一：單擊文檔窗口中的AP元素標記，如

“div#apDiv1”

方法二：單擊AP元素左上角的“回”形選擇柄。如果選擇柄不可見，可在AP元素內的任何地方單擊使之可見方法三：單擊AP元素的邊框。方法四：在沒有AP元素選中的情況下，按

Shift鍵在AP元素內單擊。方法五：單擊“AP元素”面板中相應的AP元素名稱。

APDiv標記“div#Layer1”

活動一：APDiv的創建及基本操作

選擇柄活動一：APDiv的創建及基本操作準備知識：（4）選取AP元素

②選取多個AP元素方法一：按住Shift鍵在AP元素內或AP元素的邊框上單擊，選取多個AP元素。方法二：按住Shift鍵單擊“AP元素”面板中多個AP元素的名稱。選中多個AP元素時，最后被選中的AP元素的邊框和選擇柄將以藍色突出顯示。（5）調整AP元素的大小（6）移動AP元素（7）對齊AP元素（8）防止AP元素重疊

“防止重疊”選項

活動引導：一、建立站點及網頁。二、制作首頁。三、創建APDiv。四、創建嵌套APDiv。活動一：APDiv的創建及基本操作活動一：APDiv的創建及基本操作網頁效果

活動小結:

在本活動中我們通過在網頁中創建AP元素及嵌套AP元素，并結合行為中的“顯示—隱藏元素”動作，來實現彈出效果。在上述活動中我們分別使用了兩種方法來創建層，即鼠標直接繪制或使用菜單命令實現。在創建時注意這兩種層的區別。活動一：APDiv的創建及基本操作活動二：表格和AP元素的相互轉換掌握表格和AP元素的相互轉換的方法。教學目標：知識要點：表格、AP元素。

準備知識：

在布局頁面時，由于AP元素比表格更容易處理和操縱，因此也可以使用APDiv來進行頁面布局。目前AP元素能被大多數的瀏覽器所支持。如果需要支持4.0版之前的瀏覽器，需要將AP元素轉換為表格。文件中的表格被轉換為AP元素后，表格內的內容將放入AP元素中。每個表格單元格都將轉換為獨立的AP元素，而空單元格不被轉換。強烈建議不要將AP元素轉換為表格，因為這樣做會產生帶有大量空白單元格的表格，同時會急劇增加代碼量。由于表格單元格不能重疊，因此Dreamweaver無法從重疊的AP元素創建表格。如果要將AP元素轉換為表格，那么這些AP元素不能出現重疊現象。在繪制AP元素時可以通過“防止重疊”選項來限制AP元素的移動和定位。活動二：表格和AP元素的相互轉換活動引導：一、將AP元素轉換為表格。二、將表格轉換為AP元素。活動二：表格和AP元素的相互轉換活動二：表格和AP元素的相互轉換網頁效果

活動小結:

在本活動中我們主要練習了表格與AP元素之間的相互轉換。在執行轉換命令時，要注意轉換前后的區別。活動二：表格和AP元素的相互轉換活動三：AP元素的綜合應用

掌握APDiv與行為及時間軸結合的綜合應用。教學目標：知識要點：APDiv與行為結合制作下拉菜單，APDiv與時間軸結合。準備知識：（1）APDiv與行為的結合。（2）APDiv與時間軸的結合。活動三：AP元素的綜合應用活動引導：一、制作飄動廣告。二、制作下拉菜單。三、制作分頁，完成網頁間的鏈接。活動三：AP元素的綜合應用活動三：AP元素的綜合應用

網頁效果

活動小結:

在本活動中，我們站點中的網頁制作飄動廣告和下拉菜單。下拉菜單的制作原理和前一個活動相同，即應用了“顯示—隱藏元素”行為。特別要注意的是菜單的對齊。除了上述通過“屬性”面板中的參數設置外，更直觀的方法是直接用鼠標選取相AP元素進行拖曳移動。活動三：AP元素的綜合應用第十二章實驗：制作“電影頻道”實驗要求：一、建立站點目錄mysitelx，并將站點指定至站點目錄。二、完成首頁頁面布局設計。三、制作飄動廣告及文字提示效果。四、制作下拉菜單。五、制作分頁，并完成分頁的鏈接。注意：本實驗提供的樣例僅供參考，也許你能設計出別具一格的網頁第十二章實驗：制作“電影頻道”網頁效果

第十三章行為概要：網頁中的很多動態效果可以通過行為來實現。Dreamweaver附帶了很多內置的行為，即使是那些不懂Java的入門者也能輕松的制作動態網頁。行為是在某一對象上因為某一事件而觸發某一動作的綜合描述。它是被用來動態響應用戶操作、改變當前頁面效果或是執行特定任務的一種方法。本章主要通過三個活動的展開，說明了行為的概念，闡述了給對象附加行為的基本方法及如何修改行為的觸發事件，詳細介紹了Dreamweaver內置的多個常用動作的具體應用方法。其中“行為”面板中“建議不再使用”行為，即從Dreamweaver9開始已被棄用的行為將不做介紹。此外，前面章節已經介紹過的“檢查表單”、“顯示－隱藏元素”和“拖動AP元素”也將不重復介紹。活動一：初識行為

了解行為的基本原理，包括行為的概念和行為的特點，了解不同網頁元素附加的動作種類。

教學目標：知識要點：行為的概念、行為的特點、附加行為。準備知識：（1）行為概述（2）可附加行為的常見網頁元素（3）行為的觸發事件（4）應用行為活動一：初識行為活動引導：

一、新建站點及相關網頁。二、制作首頁。三、應用行為。活動一：初識行為活動一：初識行為網頁效果

活動小結:

在本活動中，我們應用了內置行為中的“彈出信息”動作，在我們首頁打開時彈出消息框。當然，這種效果使用JavaScript也可以實現。但我們利用這個行為，即使我們不懂代碼的編寫，也同樣可以完成這樣的消息框。活動一：初識行為活動二：行為綜合應用一

掌握“打開瀏覽器窗口”、“調用JavaScript”、“交換圖像”、“恢復交換圖像”、“改變屬性”、“效果”、“時間軸”、“設置文本”行為的方法。

教學目標：知識要點：

“打開瀏覽器窗口”、“調用JavaScript”、“交換圖像”、“恢復交換圖像”、“改變屬性”、“效果”、“時間軸”、“設置文本”。準備知識：

（1）“打開瀏覽器窗口”（2）“調用JavaScript”（3）“交換圖像”和“恢復交換圖像”（4）“改變屬性”（5）“效果”（6）“時間軸”（7）“設置文本“（8）“彈出信息”活動二：行為綜合應用一活動引導：一、添加“打開瀏覽器窗口”行為。二、添加“調用JavaScript”

行為。三、添加“交換圖像”和“恢復交換圖像”行為。四、添加“改變屬性”行為。五、添加“效果”行為。六、添加“時間軸”行為。七、添加“設置文本”行為。活動二：行為綜合應用一活動二：行為綜合應用一

網頁效果

活動小結:

在本活動中，我們主要練習了在網頁中添加“打開瀏覽器窗口”、“調用JavaScript”、“交換圖像”、“恢復交換圖像”、“改變屬性”、“效果”、“時間軸”、“設置文本”行為的方法。“打開瀏覽器窗口”往往可以用在網站的消息提示方面。“調用JavaScript”除了上述例子外，不同的JavaScript命令，會產生不同的效果。活動二：行為綜合應用一活動三：行為綜合應用二

掌握“檢查插件”、“預先載入圖像”、“設置導航條圖像”、“跳轉菜單”和“跳轉菜單開始”、“轉到URL”

行為的方法。教學目標：知識要點：

“檢查插件”、“預先載入圖像”、“設置導航條圖像”、“跳轉菜單”和“跳轉菜單開始”、“轉到URL”。準備知識：

（1）檢查插件（2）“預先載入圖像”

（3）“設置導航條圖像”（4）“跳轉菜單”和“跳轉菜單開始”（5）“轉到URL”活動三：行為綜合應用二活動引導：一、添加“設置導航欄圖像”行為。二、添加“跳轉菜單”和“跳轉菜單開始”行為三、添加“檢查插件”行為。四、添加“預先載入圖像”行為。五、添加“轉到URL”行為。活動三：行為綜合應用二活動三：行為綜合應用二網頁效果活動小結:

在本活動中我們在網頁中插入了“檢查插件”、“預先載入圖像”、“設置導航條圖像”、“跳轉菜單”、“轉到URL”五種行為。行為的加入，可以使我們的頁面內容更豐富，功能性更強。活動三：行為綜合應用二第十三章實驗：制作“茶文化”網站

實驗要求：一、建立站點目錄mysitelx，并將站點指定至站點目錄。二、制作站點首頁。三、在首頁中加入多個行為。四、制作分頁，使用導航條鏈接各頁面。注意：本實驗提供的樣例僅供參考，也許你能設計出別具一格的網頁第十三章實驗：制作“茶文化”網站網頁效果第十四章編輯源代碼概要：

Dreamweaver提供的編輯環境是“所見即所得”的可視化編輯環境，用戶在制作網頁時不需要編寫代碼。但是，如果用戶需要創建一些特殊的網頁效果，插入腳本以及遇到了一些在可視化環境中無法解決的問題，則需要手動編寫HTML代碼。本章主要本章節主要通過三個活動，分別了介紹了快速編輯源代碼的方法，闡述了導入Word和Excel文檔，整理HTML源代碼以及設置源代碼參數的方法。活動一：快速編輯源代碼

掌握設置快速編輯源代碼的方法，其中包括“插入HTML”、“編輯標簽”和“環繞標簽”。教學目標：知識要點：

插入HTML、編輯標簽、環繞標簽。準備知識：（1）快速標簽編輯器概述①“插入HTML”：插入新的HTML代碼。②“編輯標簽”：編輯已有標簽。③“環繞標簽”：用一個新標簽包圍當前選定元素。（2）插入HTML（3）編輯標簽（4）環繞標簽

活動一：快速編輯源代碼活動引導：

一、建立站點及網頁。二、制作標題欄。三、制作廣告欄。四、制作內容區域。五、制作版權欄。活動一：快速編輯源代碼活動一：快速編輯源代碼網頁效果

活動小結:

在本活動中，我們采用對當前網頁設置快速編輯源代碼的方法，在網頁中快速插入HTML，編輯標簽以及設置環繞標簽，來豐富我們的網頁。活動一：快速編輯源代碼活動二：導入Word和Excel文檔

掌握在網頁中導入Word和Excel文檔的方法。教學目標：知識要點：導入Word、Excel文檔。準備知識：（1）導入Word文檔執行“文件”|“導入”|“Word文檔”命令，在彈出的“打開”對話框中選取.doc的文檔即可。（2）導入Excel文檔執行“文件”|“導入”|“Excel文檔”命令，在彈出的“打開”對話框中選取.doc的文檔即可。活動二：導入Word和Excel文檔活動引導：一、導入word文檔，制作分頁“新款車型”。二、導入Excel文檔，制作分頁“最新報價”。三、完成網頁間的鏈接。活動二：導入Word和Excel文檔活動二：導入Word和Excel文檔網頁效果

活動小結:

在本活動中我們主要通過導入Word和Excel文檔，制作站點中的分頁。由于這一特性，我們可以方便的完成Word和Excel文檔與網頁間的相互轉換。活動二：導入Word和Excel文檔活動三：設置源代碼參數選項以及整理源代碼

掌握Dreamweaver的源代碼參數選項的設置方法。了解標簽嵌套、冗余代碼的概念，掌握整理HTML源代碼方法。教學目標：知識要點：

首選參數、標簽嵌套、冗余代碼、整理HTML源代碼。準備知識：準備知識：（1）設置源代碼參數①概述:Dreamweaver提供的編輯環境是“所見即所得”的可視化編輯環境，用戶在制作網頁時不需要編寫代碼。但是，如果用戶需要創建一些特殊的網頁效果，插入腳本以及遇到了一些在可視化環境中無法解決的問題，則需要手動編寫HTML代碼。在編寫代碼之前設置源代碼的相關參數，可以為具體編寫工作提供便利。執行“編輯”|“首選參數”命令，在彈出的“首選參數”對話框中即可設置源代碼的相關參數

活動三：設置源代碼參數選項以及整理源代碼“代碼改寫”

準備知識：（1）設置源代碼參數

②代碼改寫:在彈出的“首選參數”對話框的分類選項中選取“代碼改寫”，即可設置相關的屬性。

“代碼改寫”：控制修改的內容。如果有需要修改的內容，則

Dreamweaver將在打開HTML文檔時修改其HTML源代碼。“代碼格式”

活動三：設置源代碼參數選項以及整理源代碼活動三：設置源代碼參數選項以及整理源代碼準備知識：（1）設置源代碼參數③代碼格式選項設置:在彈出的“首選參數”對話框的分類選項中選取“代碼格式”，即可設置相關的屬性，

“代碼格式”：控制常見HTML格式選項。在該選項的面板中可以設置代碼縮進、換行、大小寫等顯示的格式。

“代碼格式”

活動三：設置源代碼參數選項以及整理源代碼準備知識：（1）設置源代碼參數④代碼提示選項設置:在彈出的“首選參數”對話框的分類選項中選取“代碼提示”，即可設置相關的屬性。

“代碼提示”：設置代碼提示的顯示與否及是否自動添加結束標簽。

建議將該面板的中的選項都勾選，便于編寫代碼。“代碼提示”

活動三：設置源代碼參數選項以及整理源代碼準備知識：（1）設置源代碼參數

⑤代碼顏色顯示選項設置：在彈出的“首選參數”對話框的分類選項中選取“代碼顏色”，即可設置