網頁制作技術（三劍客）第3章動態網頁制作技術實例集錦網頁制作技術（三劍客）第3章動態網頁制作技術實例集錦1本章的實例將大量使用到Dreamweaver的高級功能，如圖層、行為、CSS、時間軸等操作較為復雜的組件，本章將不再對第2章的基礎知識進行講解，如遇到不理解的操作可翻閱第二章的對應內容，接下來的實例將會讓讀者充分感受到網頁制作的魅力以及DreamweaverCS3的強大功能。課程描述本章的實例將大量使用到Dreamweaver的高級功能，如圖2掌握層與行為的關系即使用方法

理解CSS的基本用法了解時間軸的創建及簡單用法理解CSS濾鏡理解spry的各種用法了解Dreamweaver擴展的安裝和用法

本章知識點掌握層與行為的關系即使用方法本章知識點3訓練任務使用層與行為制作可移動對話框使用css制作新聞閱讀頁使用時間軸制作動態詩卷使用CSS濾鏡制作圖片特效使用spay制作漸隱菜單Dreamweaver擴展的安裝與使用訓練任務使用層與行為制作可移動對話框使用css制作新聞閱讀頁4制作可移動對話框F任務一打開源文件制作可移動對話框F任務一打開源文件5操作要點參照教材熟悉CSS-P（層）的屬性面板的各個功能。層擁有著最高的優先級（表格無法約束層，即表格中無法控制層，但層中可以插入表格，并控制表格），也可將其理解為網頁中的網頁，圖層的另一個特點在于它可放置在網頁中的任何一個位置，因為其定位是使用的坐標，以實現一些特殊的效果。層的定位分為“絕對定位”和“相對定位”兩種，使用“繪制層”功能繪制的層為絕對定位，當鼠標光標處于某元素的某一位置時，使用“插入記錄→布局對象→APDIV”，插入的層只需注意一下其屬性就會注意到，該層沒有“左”和“上”兩個參數，只要保持著兩個參數為空，那么這個圖層就是相對于插入點相對定位的。層與層之間可以嵌套，方法為，將鼠標插入點放在一個圖層中時，使用菜單操作“插入記錄→布局對象→APDIV”插入的層稱為第一個圖層的子圖層，子圖層的定位是隨著父圖層的改變而改變。“行為”需要配合觸發條件才能夠執行，常用的觸發條件有：onMouseOver（鼠標移動到目標上觸發）onClick（鼠標單擊觸發）onload（打開網頁時觸發）onDbClick（鼠標雙擊觸發）。操作要點參照教材熟悉CSS-P（層）的屬性面板的各個功能。6使用css制作新聞閱讀頁F任務二打開源文件使用css制作新聞閱讀頁F任務二打開源文件7操作要點本例通過制作一個新聞閱讀頁來介紹了Dreamweaver內置的CSS編輯功能，那么到底CSS是什么呢？CSS是層疊樣式表(CascadingStyleSheets)的縮寫，其主要功能為將原本用來指定網頁中元素樣式格式的語句寫入到一個外部樣式文件中，從而實現了網頁內容與表現得分離，舉一個簡單的例子：假如網站中有100個網頁，全部都是黑色背景，藍色的表格邊框，那要是把所有的背景都改成白色，或者表格邊框修改為紅色的話豈不是要修改100次？有人會想到模版，那如果連網頁的布局結構都完全不同只是單純的對應元素的外形，那模版就無能為力了，這里就要用到CSS層疊樣式表（后面均簡稱CSS），把對網頁背景顏色以及表格邊框顏色的規定寫入到一個CSS文件中，然后在所有的網頁中調用這個CSS樣式文件，那么，以后只要想對這兩個部分進行修改，只需要打開這個CSS文件，修改一下參數，那么所有的對應網頁就都會自動應用新的設置，非常高效強大。操作要點本例通過制作一個新聞閱讀頁來介紹了Dreamweav8F任務三打開源文件

時間軸制作動態詩卷F任務三打開源文件時間軸制作動態詩卷9

本例通過制作會動的詩卷講解了時間軸的創建于使用方法，該功能較為復雜，下面詳細解釋一下時間軸屬性面板的各個功能，●“時間軸”：當前時間軸，點擊下拉菜單可選擇其他時間軸。●“幀編號”：指示幀的序號。“后退”和“前進”按鈕之間的數字是當前幀。●“fps”：控制動畫的持續時間。默認為每秒15幀，通過該速度來計算時間軸的播放時間。●“動畫條”：顯示每個對象的動畫的持續時間。一行可以包含表示不同對象的多個條。不同的動畫條無法控制同一幀中的同一對象。●“關鍵幀”：是動畫條中已經為對象指定屬性（如位置）的幀。Dreamweaver會計算關鍵幀之間幀的中間值。小圓標記表示關鍵幀。●“自動播放”：選中后當前頁面在載入時自動開始播放時間軸。●“循環”：選中后頁面在打開時當前時間軸可以無限循環播放。

操作要點

本例通過制作會動的詩卷講解了時間軸的創建于使用方法，該功能10使用CSS濾鏡制作圖片特效F任務四打開源文件使用CSS濾鏡制作圖片特效F任務四打開源文件11

本例介紹了幾個Dreamweaver自帶的無參數濾鏡效果，他們的共同特點就是無需設置任何參數就可以直接使用，效果也很明顯，在制作網站時將這些CSS樣式放在一個文件中，并在需要這些功能的網頁中加載該CSS樣式文件，就可以輕松的使用這些濾鏡效果了，省去很多處理圖片的時間。操作要點

本例介紹了幾個Dreamweaver自帶的無參數濾鏡效果，12使用spay制作漸隱菜單F任務五打開源文件使用spay制作漸隱菜單F任務五打開源文件13

本例中使用的是DreamweaverCS3默認支持的7種效果中的兩種，他們的用法基本上大同小異，但他們所能應用的元素卻略有不同，下面列出各種效果的常用應用對象。●增大/收縮：可以應用在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素增大縮小。●擠壓：可以應用在圖層在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素被擠壓成很小尺寸。●顯示/漸隱：可以應用在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素淡入淡出。●晃動：可以應用在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素左右晃動幾下。●滑動：可以應用在圖層（DIV）元素上，效果為目標DIV上滑或者下滑。●遮簾：可以應用在圖層（DIV）元素上，效果為目標DIV向上或下被遮蔽制定的高度或百分比，用法基本同“滑動功能”。●高亮顏色：可以應用在圖層（DIV）、圖片（IMAGE）元素上（圖片無效果），效果為目標DIV背景色改變。操作要點

本例中使用的是DreamweaverCS3默認支持的7種效14DWCS擴展的安裝與使用F任務六DWCS擴展的安裝與使用F任務六15

本例使用自己安裝的擴展插件制作了一個簡單的收藏夾鏈接，由于Dreamweaver的擴展插件多得數不勝數，插件功能、適用軟件版本、用法各不相同，所以本例僅僅起到一個提示的目的，讓讀者知道插件的用處以及如何安裝，具體需要什么功能，讀者可根據需要自行下載，基本上大多數的插件都是免費提供使用的，僅有一小部分收費，由于并不是所有插件都有漢化版本，因此需要讀者有一點英文基礎，只要略懂英文，憑借插件的簡單介紹就可以明白使用方法了。操作要點

本例使用自己安裝的擴展插件制作了一個簡單的收藏夾鏈接，由于16層的特性都有哪些？除了層，還有那些元素適合應用各種“行為”？討論研究一下軟件提供的其他CSS都有什么效果實驗一下系統提供的其他SPAY插件效果，討論一下他們都適合應用于那些地方。上網搜索一下DW的擴展插件，下載一些免費的效果應用于網站上。討論層的特性都有哪些？討論17本章主要講解了層（APDIV）、時間軸、行為、CSS濾鏡等高級功能，以及Spry控件這一DreamweaverCS3的最新功能，通過這些功能，讀者可以制作出各種各樣的特殊網頁效果，為自己的網站增加各種視覺體驗，但這些功能使用上比較復雜，需要讀者多多練習才能做到融會貫通，熟練使用在網頁制作過程中。本章小結本章主要講解了層（APDIV）、時間軸、行為、CSS濾鏡等18網頁制作技術（三劍客）第3章動態網頁制作技術實例集錦網頁制作技術（三劍客）第3章動態網頁制作技術實例集錦19本章的實例將大量使用到Dreamweaver的高級功能，如圖層、行為、CSS、時間軸等操作較為復雜的組件，本章將不再對第2章的基礎知識進行講解，如遇到不理解的操作可翻閱第二章的對應內容，接下來的實例將會讓讀者充分感受到網頁制作的魅力以及DreamweaverCS3的強大功能。課程描述本章的實例將大量使用到Dreamweaver的高級功能，如圖20掌握層與行為的關系即使用方法

理解CSS的基本用法了解時間軸的創建及簡單用法理解CSS濾鏡理解spry的各種用法了解Dreamweaver擴展的安裝和用法

本章知識點掌握層與行為的關系即使用方法本章知識點21訓練任務使用層與行為制作可移動對話框使用css制作新聞閱讀頁使用時間軸制作動態詩卷使用CSS濾鏡制作圖片特效使用spay制作漸隱菜單Dreamweaver擴展的安裝與使用訓練任務使用層與行為制作可移動對話框使用css制作新聞閱讀頁22制作可移動對話框F任務一打開源文件制作可移動對話框F任務一打開源文件23操作要點參照教材熟悉CSS-P（層）的屬性面板的各個功能。層擁有著最高的優先級（表格無法約束層，即表格中無法控制層，但層中可以插入表格，并控制表格），也可將其理解為網頁中的網頁，圖層的另一個特點在于它可放置在網頁中的任何一個位置，因為其定位是使用的坐標，以實現一些特殊的效果。層的定位分為“絕對定位”和“相對定位”兩種，使用“繪制層”功能繪制的層為絕對定位，當鼠標光標處于某元素的某一位置時，使用“插入記錄→布局對象→APDIV”，插入的層只需注意一下其屬性就會注意到，該層沒有“左”和“上”兩個參數，只要保持著兩個參數為空，那么這個圖層就是相對于插入點相對定位的。層與層之間可以嵌套，方法為，將鼠標插入點放在一個圖層中時，使用菜單操作“插入記錄→布局對象→APDIV”插入的層稱為第一個圖層的子圖層，子圖層的定位是隨著父圖層的改變而改變。“行為”需要配合觸發條件才能夠執行，常用的觸發條件有：onMouseOver（鼠標移動到目標上觸發）onClick（鼠標單擊觸發）onload（打開網頁時觸發）onDbClick（鼠標雙擊觸發）。操作要點參照教材熟悉CSS-P（層）的屬性面板的各個功能。24使用css制作新聞閱讀頁F任務二打開源文件使用css制作新聞閱讀頁F任務二打開源文件25操作要點本例通過制作一個新聞閱讀頁來介紹了Dreamweaver內置的CSS編輯功能，那么到底CSS是什么呢？CSS是層疊樣式表(CascadingStyleSheets)的縮寫，其主要功能為將原本用來指定網頁中元素樣式格式的語句寫入到一個外部樣式文件中，從而實現了網頁內容與表現得分離，舉一個簡單的例子：假如網站中有100個網頁，全部都是黑色背景，藍色的表格邊框，那要是把所有的背景都改成白色，或者表格邊框修改為紅色的話豈不是要修改100次？有人會想到模版，那如果連網頁的布局結構都完全不同只是單純的對應元素的外形，那模版就無能為力了，這里就要用到CSS層疊樣式表（后面均簡稱CSS），把對網頁背景顏色以及表格邊框顏色的規定寫入到一個CSS文件中，然后在所有的網頁中調用這個CSS樣式文件，那么，以后只要想對這兩個部分進行修改，只需要打開這個CSS文件，修改一下參數，那么所有的對應網頁就都會自動應用新的設置，非常高效強大。操作要點本例通過制作一個新聞閱讀頁來介紹了Dreamweav26F任務三打開源文件

時間軸制作動態詩卷F任務三打開源文件時間軸制作動態詩卷27

本例通過制作會動的詩卷講解了時間軸的創建于使用方法，該功能較為復雜，下面詳細解釋一下時間軸屬性面板的各個功能，●“時間軸”：當前時間軸，點擊下拉菜單可選擇其他時間軸。●“幀編號”：指示幀的序號。“后退”和“前進”按鈕之間的數字是當前幀。●“fps”：控制動畫的持續時間。默認為每秒15幀，通過該速度來計算時間軸的播放時間。●“動畫條”：顯示每個對象的動畫的持續時間。一行可以包含表示不同對象的多個條。不同的動畫條無法控制同一幀中的同一對象。●“關鍵幀”：是動畫條中已經為對象指定屬性（如位置）的幀。Dreamweaver會計算關鍵幀之間幀的中間值。小圓標記表示關鍵幀。●“自動播放”：選中后當前頁面在載入時自動開始播放時間軸。●“循環”：選中后頁面在打開時當前時間軸可以無限循環播放。

操作要點

本例通過制作會動的詩卷講解了時間軸的創建于使用方法，該功能28使用CSS濾鏡制作圖片特效F任務四打開源文件使用CSS濾鏡制作圖片特效F任務四打開源文件29

本例介紹了幾個Dreamweaver自帶的無參數濾鏡效果，他們的共同特點就是無需設置任何參數就可以直接使用，效果也很明顯，在制作網站時將這些CSS樣式放在一個文件中，并在需要這些功能的網頁中加載該CSS樣式文件，就可以輕松的使用這些濾鏡效果了，省去很多處理圖片的時間。操作要點

本例介紹了幾個Dreamweaver自帶的無參數濾鏡效果，30使用spay制作漸隱菜單F任務五打開源文件使用spay制作漸隱菜單F任務五打開源文件31

本例中使用的是DreamweaverCS3默認支持的7種效果中的兩種，他們的用法基本上大同小異，但他們所能應用的元素卻略有不同，下面列出各種效果的常用應用對象。●增大/收縮：可以應用在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素增大縮小。●擠壓：可以應用在圖層在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素被擠壓成很小尺寸。●顯示/漸隱：可以應用在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素淡入淡出。●晃動：可以應用在圖層（DIV）、圖片（IMAGE）元素上，效果為目標元素左右晃動幾下。●滑動：可以應用在圖層（DIV）元素上，效果為目標DIV上滑或者下滑。●遮簾：可以應用在圖層（DIV）元素上，效果為目標DIV向上或下被遮蔽制定的高度或百分比，用法基本同“滑動功能”。●高亮顏色：可以應用在圖層（DIV）、圖片（IMAG