Dreamweaver網頁版面技法與互動效果

學會了網頁的完整內容編輯並有能力完成網站後，最需要進一步學習的專業即是網頁進階版面整合編排技巧，包括與Photoshop設計的版型切割整合，範本、頁框、內頁框等進階頁面編排方法；而一個完美的網頁版面編排是絕對少不了CSS樣式與DIV，CSS樣式於文字與版型上的應用，以及Spry效果、Spry版面元件與DIV（AP元素、DIV標籤）的靈活運用等，都是本課程帶領您進入專業領域的學習重點，也將是為進階學習CSS排版的必備基礎；最後搭配互動性高的擴充元件應用方式，並加上以實際完整網站建置範例，讓您即學即用。

有Dreamweaver使用經驗(上過USDWF)

1. 進階影像切割與版面設計整合

   　1-1 專業影像式表格－影像切割與圖片影像表格

   　1-2 自動符合瀏覽器視窗大小的影像表格

   　1-3 影像表格與頁面應用

   　1-4 影像表格與內頁版面應用

2. CSS樣式基礎設定應用

   　2-1基本HTML標籤

   　2-2 Dreamweaver中的CSS設定

   　2-3自訂新增CSS樣式

   　2-4 CSS套用與編輯

   　2-5 固定網頁文字大小

   　2-6 段落文字確實左右齊行

   　2-7 CSS串連共用

   　2-8 背景CSS應用─頁面背景影像固定

   　2-9 頁面浮水印背景

   　2-10 頁面漸層背景

   　2-11 CSS背景與頁面版型應用

3. 進階頁面編排解決方案─範本、頁框、內嵌頁框

   　3-1 超快速建置網站技巧－由範本建構網站

   　3-2 頁框與版面設計應用

   　3-3 最專業局部捲動區內容－內嵌頁框與版面應用

   　3-4 連結瀏覽頁面於固定區域內

4. AP元素與行為效果

   　4-1 用AP元素（div）跨出網站編輯限制

   　4-2 快速簡易局部捲動內容─AP元素（div）溢位設定應用

   　4-3 套用呼叫JavaScript行為

   　4-4 套用彈出訊息行為

   　4-5 套用開啟瀏覽器視窗行為

   　4-6 套用調換影像行為

   　4-7 互動替換圖片效果應用

   　4-8 套用拖曳AP元素（div）行為

   　4-9 套用顯示隱藏元素行為

   　4-10 互動式瀏覽內容

   　4-11 影像圖片按鈕式彈出選單

5. Spry效果

   　5-1 各式Spry效果

   　5-2 Spry效果─震動應用

   　5-3 Spry效果─出現／淡出應用

   　5-4 Spry Widget元件─選單列Widget

   　5-5 Spry Widget元件─標籤面板Widget

   　5-6 Spry Widget元件─可收合面板Widget

   　5-7 Spry Widget元件─折疊式Widget面板

6. 安裝與使用Dreamweaver擴充元件

   　6-1 取得與安裝擴充元件

   　6-2 保持固定位置廣告

   　6-3 AP元素（div）捲出捲入

   　6-4 插入IFrame頁面

   　6-5 局部捲動內容

   　6-6 電子布告欄與IFrame

7. 完整網站實例整合應用

   　7-1 切割網站首頁並儲存出初步網頁

   　7-2 切割網站內頁並儲存出初步內頁版型

   　7-3 儲存出其他單元內頁所需內容

   　7-4 整理首頁版面與加入特定互動元件效果

   　7-5 整理內頁版面成最佳狀態

   　7-6 整理準備好所有網站單元頁面並完成網站