關於本書

Dreamweaver CS5 提供強大的網頁設計功能，不管是從

事美工繪圖或程式設計工作者，都可以使用 Dreamweaver

CS5 製作出高水準的網頁作品。本書沒有繁雜的理論敘述，

完全以實作為前提，讓使用者可以在最短的時間學會動畫的

設計和製作。

關於本書的內容摘要，說明如下：

01.認識網頁設計：網頁設計概念和認識視窗環境

02.邂逅文字影像：文字與影像的組合

03.連結網路世界：超連結的應用

04.影音媒體素材：加入各種影音素材

05.表格版面配置：使用表格設計和美化版面

06.頁框版面設計：頁框和頁框組的使用技巧

07.圖層動態效果：使用 AP元素製作動態效果

08.樣式美化版面：使用 CSS設計和美化版面

09.組件互動選單：Spry選單組件應用

10.擴充功能應用：行為和組件的應用

11.動態網頁應用：製作動態網頁和使用線上工具

12.範本與伺服器：範本應用與上傳網頁

張仁川 2011.01

6-2

DREAMWEAVER CS5 | 創意網頁設計白皮書

6-1 認識頁框

頁框可以將瀏覽器視窗分割為多個區域，每個區域都可以獨立顯示 HTML 文件。

以下的頁面組由 3 個頁框組而成合，內容說明如下：

• 上頁框：放置網站圖示或橫幅。

• 主頁框：放置主要內容。

• 右頁框：放置選單和相關連結。

上頁框 6-1a.htm

主頁框 6-1b.htm 右頁框 6-1c.htm

頁框組 6-1.htm

6-3

影音媒體素材

表格版面配置

頁框版面設計

04

05

06

6-2 頁框的應用

頁框的用途最常用來做導覽之用，如此就可以不需要在每個頁面放置導覽列，節

省網頁製作時間和方便後續的維護作業。並具有以下的優點：

• 瀏覽者的瀏覽器不需要每個頁面都重新載入用於導覽的相關圖片。

• 每個頁框都有獨立的捲軸 ( 如果內容超出頁框範圍 )，可以分別捲動頁框。

• 方便導覽， 將導覽列放置於上頁框，瀏覽者不需回到頂端才能使用導覽列。頁框在使用時，需注意以下事項：

• 不同頁框中的元件不容易對齊。

• 測試導覽需耗費很多時間。

• 含頁框的 URL 不會在瀏覽器顯示，瀏覽者不容易將頁面加入書籤。

6-10

DREAMWEAVER CS5 | 創意網頁設計白皮書

6-4 頁框的原始檔

建立頁框組之後，除了直接編輯頁框的內容，也可以指定頁框的原始檔，將現有的

文件開啟在頁框。

1STEP 執行「檔案 -開新檔案」指令，選取 [固定左頁框組 ]樣本。

7-22

DREAMWEAVER CS5 | 創意網頁設計白皮書

12STEP 預覽網頁，將滑鼠指標移到影像範圍，顯示說明文字。

13STEP 滑鼠指標離開影像範圍，說明文字自動隱藏。

7-23

樣式美化版面

組件互動選單

07

08

09

圖層動態效果

1STEP 開啟 7-6.html檔案，網頁內容由多個 AP元素組成。

7-6 將AP元素轉換為表格

有些瀏覽器對 AP 元素的支援並不完整，有可能無法正常顯示網頁的內容。為了確

保網頁和瀏覽器的相容性，將 AP 元素轉換成表格，可以兼顧靈活度與相容性。

8-49

圖層動態效果

樣式美化版面

組件互動選單

07

08

09

8-12 CSS泡泡按鈕

將按鈕套用 CSS樣式，指標移動到按鈕，呈現泡泡放大效果。

本範例相關的影像：btn資料夾，連結的樣式表：bubble.css。

8-50

DREAMWEAVER CS5 | 創意網頁設計白皮書

1STEP 新增空白 HTML文件，將文件存檔。

2STEP 在 CSS樣式面板，按 [附加樣式表 ]圖示。

3STEP 按「瀏覽」鈕選取 bubble.css，選取 [連結 ]選項，按 [確定 ]鈕結束。

4STEP 在 CSS樣式面板會顯示連結的樣式表。

8-51

圖層動態效果

樣式美化版面

組件互動選單

07

08

09

5STEP 執行「插入 -版面物件 -Div標籤」指令，設定以下內容，按 [確定 ]鈕。

插入：選取 [在插入點上 ]。

類別：選取 [bubblewrap]。

6STEP 文件視窗顯示以下的內容。

7STEP 將插入點置於標籤內，執行「插入 -影像」指令，依序插入按鈕。

8STEP 選取每一個按鈕，在屬性面板設定連結：#，邊框：0。

8-52

DREAMWEAVER CS5 | 創意網頁設計白皮書

9STEP 將插入點置於第 1個按鈕左側，在屬性面板按一下 [項目清單 ]圖示。

10STEP 執行「修改 -頁面屬性」指令，設定網頁的背景色彩。

9-4

DREAMWEAVER CS5 | 創意網頁設計白皮書

9-2 Spry選單列

Spry選單列可以用來建立垂直或水平導覽選單，瀏覽者將指標停留在按鈕上就會

顯示子選單。在有限的頁面，展示更多的導覽資訊，讓使用者快速檢視網站內容。

1STEP 新增空白頁面，並將頁面存檔。

在插入面板，按一下 [Spry選單列 ]圖示。

9-5

圖層動態效果

樣式美化版面

組件互動選單

07

08

09

2STEP 選取 [水平 ]選項，按 [確定 ]鈕。

3STEP 參考下圖，在屬性面板編輯第 1層選單的文字和連結。

按 [+]鈕：新增選單項目，按 [-]鈕：移除選單項目。

4STEP 參考下圖，在屬性面板編輯第 2層選單的文字和連結。

按 [+]鈕：新增選單項目，按 [-]鈕：移除選單項目。

9-6

DREAMWEAVER CS5 | 創意網頁設計白皮書

5STEP 參考下圖，在屬性面板編輯第 3層選單的文字和連結。

按 [+]鈕：新增選單項目，按 [-]鈕：移除選單項目。

6STEP 儲存網頁，會顯示以下對話方塊，提醒您上傳網頁時，請一併包含

SpryAssets 資料夾的內容，才可以正常執行組件的動作。

9-7

圖層動態效果

樣式美化版面

組件互動選單

07

08

09

7STEP 預覽網頁，測試 Spry選單列的動作。

9-13

圖層動態效果

樣式美化版面

組件互動選單

07

08

09

9-4 Spry可收合面板

Spry可收合式面板可以使用標籤將面板內容收合，以顯示更多的內容。