第九章 Div 設定以靈活頁面-「頁框」頁面設計

第九章 第九章 DivDiv 設定以靈活頁面設定以靈活頁面 --「頁框」頁面設計 「頁框」頁面設計

課前指引和表格比起來， AP 元素更是頁面排版的重要工具，雖然表格可讓頁面資料排列整齊，但卻無法讓我們自由移動頁面上任何資料的位置，而 AP 元素的出現，剛好可以解決這方面的問題，藉由AP 元素可自由移動及縮放的特性，讓網頁的編排邁入了一個全新的領域，從此我們可和美工軟體一樣的來設計頁面效果。

章節大綱

備註：可依進度點選小節

9-1 建立 AP Div 及內容

9-2 網頁藍圖

9-3 以 AP 元素面板管理 AP 元素

9-4 AP 元素屬性設定

9-5 AP 元素排版技巧

9-6 巢狀 AP 元素

9-7 以 Div 標籤規畫區塊

9-8 應用範例 - 上頁框 / 左頁框的 頁面設計

3

9-1 建立 AP Div 及內容

建立 AP 元素

  3. 點選此圖示

1. 新增空白網頁 2. 「插入」面板切換到「版面」類別

4

在頁面上拖曳繪製 AP 元素

繪製完成的 AP 元素

5

建立完成的 AP 元素，可以在頁面上自由的縮放及移動，不過在操作前要先點取 AP 元素的邊框；反之若要刪除 AP 元素時，只要點取AP 元素後再按下「 Delete 」鍵即可。

點選 AP 元素邊框後，可移動 AP 元素、調整大小或刪除，另外，各位可以看到標籤，上面會顯示 AP 元素的相關資訊

6

如果是使用功能表指令「插入 / 版面物件 /AP Div 」來建立 AP 元素，則會在頁面上建立一個寬高為 200×115 的 AP Div 。不過這個寬高預設值是可更改的，我們可以將 AP 元素預設的寬度及高度調整成常用的尺寸，如此可以節省調整圖層尺寸的時間。請各位執行「編輯 / 偏好設定」指令，並在如下的視窗中設定 AP 元素的寬高。

7

2. 在此重新設定新預設寬度及高度

1. 先點取「 AP 元素」項目

8

建立 AP 元素內容

大部份的網頁元素（如文字、表格、圖片等）都可以放在 AP 元素中，同時藉由 AP 元素能自由移動的特性來編排頁面，各位只要先將游標放在 AP 元素內，此時再按照各個元素的建立方式來加入即可。如果在 AP 元素建立之前，頁面上已經有其他的網頁元素存在時，我們也可以利用剪下、複製及貼上的方式將其重新放置在 AP 元素之中。

1. 新增空白網頁

9

不過在設計時一般都會將所有的網頁元素搭配使用，我們可先在 AP 元素中建立表格，接著再對每一個儲存格內加入文字或圖片，這樣就同時具有 AP 元素自由移動及表格整齊排列的優點，如圖中的連結按鈕設計。

1. 先在 AP 元素內建立表格 2. 再對每一個儲存格加入圖片

10

將表格轉換成 AP Div

1. 先點選整個表格 

2. 執行功能表上的「修改 /轉換 / 表格到 AP Div 」指令

11

1. 可以預先勾選要顯示的工具

2. 按此鈕確定

表格已轉換成 AP 元素

12

9-2 網頁藍圖

開啟空白網頁，執行「修改 / 頁面屬性」指令

13

4. 按此鈕確定

1. 點選「影像藍圖」項目 2. 按此鈕，選擇「 layout.jpg 」影像

3. 設定影像的透明度 50%

14

  各位可以根據藍圖影像在頁面上建立 AP 元素

加入網頁藍圖的畫面（此影像位於最底層，所以不能進行任何的編輯）

15

9-3 以 AP 元素面板管理 AP 元素 顯示 AP 元素清單

2. 再繼續繪製第二個圖層

1. 先在頁面上繪製第一個 AP 元素 3. 在面板上出現 2 個 AP Div 元素

16

變更 AP 元素的上下順序

1. 先點選 apDiv2 元素不放 2. 將他拖曳到 apDiv1 元素的下方

< 範例檔：09_04ok.html>

影像的上下順序也跟著對調

17

調整 Z 軸索引值

Z軸索引值與圖層上下順序的關係圖

18

點選此 AP 元素，將它的 Z軸數值由「 2 」更換成「 0 」

瞧！影像順序跟著更換了

19

元素的顯示及隱藏

點取此位置可設定 AP 元素的顯示或隱藏狀態

20

AP 元素的顯示狀態設定

21

避免 AP 元素重疊

勾選此項後，此時 AP 元素無論怎麼移動，都無法產生重疊（只能沿其他元素的邊緣移動）

22

因此，當我們在執行「表格轉換為 AP 元素」功能時，其視窗畫面就會詢問是否要使用「防止 AP 元素重疊」，各位可以在此先勾選，或是到 AP 元素面板中再行啟用都是可以的。

勾選是否啟用「避免重疊」功能

23

9-4 AP 元素屬性設定

設定 AP 元素的尺寸及位置

圖層高度  圖層寬度   利用屬性面板可進行調整

24

設定 AP Div 背景

同時指定背景影像及背景顏色時，會以背景影像為優先顯示

25

AP Div 的溢位

顯示 AP 元素的寬與高數值為 200×100  

從屬性面板的「溢位」功能進行調整< 範例檔： 09_06.html>

26

各種溢位效果說明如下，請先設定後再使用瀏覽器來觀看設定效果。

設定「隱藏」的預覽效果 設定「捲軸」的預覽效果

27

設定 AP Div 名稱

AP 元素的預設名稱，點選這裡，可以變更 AP 元素的名稱

28

2.瞧！在 AP 元素面板也一併變更   

 1. 由此變更為易於辨識的名稱

29

檢視 AP 元素屬性

游標移到 AP 元素內部，會顯示相關屬性資訊

游標移到 AP 元素邊框，則會顯示邊框屬性資訊

30

AP Div 的 CSS 樣式設定

3. 按下此鈕編輯樣式 < 範例檔：09_08.html>

1. 點選 AP 元素 2.開啟「 CSS 樣式」面板，點選元素名稱

31

 3. 按下「確定」鈕

1. 切換到「邊框」分類 2. 設定邊框的樣式

32

瞧！ AP 元素加入了邊框

< 範例檔：09_08ok.html>

33

9-5 AP 元素排版技巧

尺規、格線及導引線 尺規

 水平尺規 

垂直尺規

尺規單位

34

格線

2. 頁面上立即顯示格線  1. 執行「檢視 / 格線 / 顯示格線」指令

35

至於格線內容，則請執行「檢視 / 格線 / 格線設定」指令，然後從視窗中進行設定。

設定格線的外觀樣式

可設定格線顏色

設定是否顯示及貼齊格線

設定每條格線之間的距離

36

導引線

導引線預設的顏色是綠色，調為暗紅色是為了易於識別

37

繪製導引線時需藉助頁面上的尺規，當尺規顯示以後，我們可以在水平尺規上按住往下拖曳（垂直尺規則是往右拖曳），這時所看到的綠色線條就是導引線，綠色是導引線的預設顏色，另外在拖曳的過程中也會同時顯示導引線的座標位置。

由上方的水平尺規往下拖曳，就會顯示導引線及其座標資訊

38

至於導引線的其他功能可由「檢視 /導引線」中的功能清單來選用，我們以附表為各位作個整理。

39

元素的對齊

只要利用「 Shift 」鍵先複選多個 AP 元素， Dreamweaver 會以最後選取的元素來做為對齊的依據，當各位選取完成後，再執行功能表中的「修改 / 排列順序」指令，接著就可從清單中的「靠左對齊」、「靠右對齊」、「靠齊上緣」及「靠齊下緣」等擇一方式進行對齊。另外功能清單中的「設定成同寬度」與「設定成同高度」功能，則可以同時將所選取的AP 元素調整成相同的寬度或高度，但同樣是以「最後選取」的 AP 元素做為調整的依據。

40

41

9-6 巢狀 AP 元素

建立巢狀 AP 元素

建立 2 個 AP 元素

按住「 Ctrl 」鍵，將 apDiv1 拖曳到 apDiv2 上方

42

建立完成的巢狀AP 元素

43

巢狀 AP 元素應用

1. 在頁面上建立如圖的 3 個 AP 元素，並命名成如圖的名稱，於green 及 shadow 元素內輸入英文字母

< 範例檔： 09_09.html>

2. 按此鈕分別為 green 及 shadow兩個 AP 元素設定字體樣式

44

將 green 及 shadow兩個 AP 元素設為 group 的子 AP元素

< 範例檔：09_09ok.html>

將 2 個 AP 元素重疊，並做些許的位移，就能產生出如圖的陰影效果

45

當要移動陰影文字時，只需拖曳父元素(group) ，整個陰影文字就會一併移動了。

移動父元素時，裡面所包含的子元素就會一併移動

46

9-7 以 Div 標籤規畫區塊

插入 Div 標籤

表頭 (header)   網頁主要內容，又分成左右兩欄(contentLeft 、 contentRight) 

頁尾 (footer)

高雄市府政文化局網址： http://www.khcc.gov.tw/home01.aspx?ID=1http://www.ntch.edu.tw/

47

1.開啟空白網頁 2. 由此按下「插入 Div標籤」鈕

48

由此設定 CSS 規則，或是稍後再做設定

1. 點選此項，使插入在插入點上 3. 按此鈕確定

2.輸入標題區的 ID名稱

49

1 標題區的區塊已經建立，將輸入點放在區塊中 2. 按此鈕再插入 Div 標籤

1. 設定插在 header 標籤之後

3. 按此鈕確定 2.輸入內容區的標籤名稱

50

1. 內容區已顯示在標題區之下

2. 再按此鈕

1. 選擇在「 content 」標籤之後

3. 按此鈕確定 2.輸入頁尾的標籤名稱

51

顯現規劃的三大區塊

< 範例檔： 09_11ok.html>

52

將三大區塊劃分出來之後，接下來我們要在「 content 」的區塊範圍內，插入「 contentleft 」及「 contentright 」兩個標籤。

1. 將插入點放在「 content 」標籤之中 2. 按此鈕插入標籤

< 範例檔： 09_12.html>

53

1. 設定在「 content 」標籤開始後

3. 按此鈕確定 2.輸入內容左側的標籤名稱

瞧！「 contentleft 」標籤已正確插入在「 content 」的標籤內

54

接下來，我們還要在「 contentleft 」標籤之後插入「 contentright 」標籤。

1.輸入點放在「 contentleft 」之中 2. 按此鈕

55

 2.輸入標籤名稱

1. 選擇在「 contentleft 」標籤後 3. 按此鈕確定

56

瞧！「 contentright 」正確地顯示在「 contentleft 」之後，且位在「 content 」的標籤之中

< 範例檔：09_12ok.html>

57

以 CSS 設定 Div 標籤大小與底色

 2.開啟 CSS 樣式面板，按下此鈕新增樣式

< 範例檔： 09_13.html>

1. 將輸入點放在表頭當中

58

3. 按此鈕確定 1. 選此項  2.輸入選取器名稱

59

1. 切換到「背景」 2. 下拉設定背景色

1. 切換到方框 2. 由此設定表頭的寬度與高度 3. 按此鈕確定

60

為表頭的 Div 標籤加入底色及大小的設定

61

在設定「 contentleft 」及「 contentright 」的CSS 樣式時，可在「方框」的類別中將「 Float 」分別設為「 left 」及「 right 」，這樣左右的兩個標籤就可以分別靠左和靠右對齊了。

設定 contentright時，請選擇「 rirht 」，「 clear 」則選擇「 none 」

62

編修 Div 標籤的 CSS 樣式

2. 按此鈕即可編修該樣式 < 範例檔：09_13ok.html>

1. 新增的 CSS 規則會顯示於此，點選要編修的規則

63

標籤中插入網頁元素

Dreamweaver 中看到的效果

瀏覽器上看到的效果

64

9-8 應用範例 - 上頁框 / 左頁框的頁面設計 這部份要設計的是位於頁框架構中的「上頁框」與「左頁框」的頁框畫面，在「上頁框」中要擺放的是網頁橫幅影像，而在「左頁框」中要放置的則是具有導覽功能的連結按鈕。

65

左方頁框畫面設計

在「班級網站」中新建 left.html 網頁

以「 frame_left_back.jpg 」影像做為背景

66

加入導覽按鈕

1. 點選「繪製 AP Div 」按鈕 2. 在網頁中拖曳出 AP 元素

67

2. 「插入」面板切換到「常用」標籤，按下「滑鼠變換影像」鈕

1. 點選在 AP 元素中

68

 2. 按下「確定」鈕

1. 設定如畫面所示

69

其他導覽按鈕的設定內容如下：

完成第一個按鈕設定

70

依序將以上的按鈕加入後，請將按鈕排列成如圖下的效果。

71

上方頁框畫面設計

請新增一個空白頁面「 top.htm 」，並且以「 frame_top_back.jpg 」影像來做為背景，同時將重覆效果設定為「 no-repeat 」。

72

加入網頁橫幅

2. 繪製一 AP Div 1. 按此鈕

731. 按下此鈕，在 AP Div 中新增影像檔

2. 在 AP 元素內插入「 banner001.png 」

74

Q&A討論時間

本章結束