Transcript CH09 Div設定以靈活頁面

第九章 Div設定以靈活頁面「頁框」頁面設計
課前指引
和表格比起來，AP元素更是頁面排版的重要工具，雖然表格可
讓頁面資料排列整齊，但卻無法讓我們自由移動頁面上任何資
料的位置，而AP元素的出現，剛好可以解決這方面的問題，藉
由AP元素可自由移動及縮放的特性，讓網頁的編排邁入了一個
全新的領域，從此我們可和美工軟體一樣的來設計頁面效果。
章節大綱
9-1 建立AP Div及內容
9-5 AP元素排版技巧
9-2 網頁藍圖
9-6 巢狀AP元素
9-3 以AP元素面板管理AP元素
9-7 以Div標籤規畫區塊
9-4 AP元素屬性設定
9-8 應用範例-上頁框/左頁框的
頁面設計
備註：可依進度點選小節
9-1 建立AP Div及內容
建立AP元素
1.新增空白網頁
2.「插入」面板切換到「版面」類別
3.點選此圖示
3
在頁面上拖曳繪製AP元素
繪製完成的AP元素
4
建立完成的AP元素，可以在頁面上自由的縮
放及移動，不過在操作前要先點取AP元素的
邊框；反之若要刪除AP元素時，只要點取AP
元素後再按下「Delete」鍵即可。
點選AP元素邊框後，可移動AP元素
、調整大小或刪除，另外，各位可
以看到標籤，上面會顯示AP元素的
相關資訊
5
如果是使用功能表指令「插入/版面物件/AP
Div」來建立AP元素，則會在頁面上建立一
個寬高為200×115的AP Div。
不過這個寬高預設值是可更改的，我們可以
將AP元素預設的寬度及高度調整成常用的尺
寸，如此可以節省調整圖層尺寸的時間。
請各位執行「編輯/偏好設定」指令，並在如
下的視窗中設定AP元素的寬高。
6
1.先點取「AP元素」項目
2.在此重新設定新預設寬度及高度
7
建立AP元素內容
大部份的網頁元素（如文字、表格、圖片等
）都可以放在AP元素中，同時藉由AP元素
能自由移動的特性來編排頁面，各位只要先
將游標放在AP元素內，此時再按照各個元素
的建立方式來加入即可。
1.新增空白網頁
如果在AP元素建立之前，頁面上已經有其他
的網頁元素存在時，我們也可以利用剪下、
複製及貼上的方式將其重新放置在AP元素之
中。
8
不過在設計時一般都會將所有的網頁元素搭
配使用，我們可先在AP元素中建立表格，接
著再對每一個儲存格內加入文字或圖片，這
樣就同時具有AP元素自由移動及表格整齊排
列的優點，如圖中的連結按鈕設計。
1.先在AP元素內建立表格
2.再對每一個儲存格加入圖片
9
將表格轉換成AP Div
1.先點選整個表格
2.執行功能表上的「修改/
轉換/表格到AP Div」指令
10
1.可以預先勾選要顯示的工具
2.按此鈕確定
表格已轉換成AP元素
11
9-2 網頁藍圖
開啟空白網頁，執行「修改/頁面屬性」指令
12
1.點選「影像藍圖」項目
3.設定影像的透明度50%
2.按此鈕，選擇「layout.jpg」影像
4.按此鈕確定
13
加入網頁藍圖的畫面（此影像位於最底層，所以不能進行任何的編輯）
各位可以根據藍
圖影像在頁面上
建立AP元素
14
9-3 以AP元素面板管理AP元素
顯示AP元素清單
1.先在頁面上繪製第一個AP元素
3.在面板上出現2個AP Div元素
2.再繼續繪製第二個圖層
15
變更AP元素的上下順序
1.先點選apDiv2元素不放
2.將他拖曳到apDiv1元素
的下方
影像的上下順序
也跟著對調
<範例檔：09_04ok.html>
16
調整Z軸索引值
Z軸索引值與圖層上下順序
的關係圖
17
點選此AP元素，將它的Z軸數值由「2」更換成「0」
瞧！影像順序
跟著更換了
18
元素的顯示及隱藏
點取此位置可設定AP元素的顯示或隱藏狀態
19
AP元素的顯示狀態設定
20
避免AP元素重疊
勾選此項後，此時AP元素無論怎麼移動，都無法產生重疊（只能沿其他
元素的邊緣移動）
21
因此，當我們在執行「表格轉換為AP元素」
功能時，其視窗畫面就會詢問是否要使用「
防止AP元素重疊」，各位可以在此先勾選，
或是到AP元素面板中再行啟用都是可以的。
勾選是否啟用「避免重
疊」功能
22
9-4 AP元素屬性設定
設定AP元素的尺寸及位置
圖層高度
圖層寬度
利用屬性面板可進行調整
23
設定AP Div背景
同時指定背景影像及背景顏色時，會以背景影像為優先顯示
24
AP Div的溢位
顯示AP元素的寬與
高數值為200×100
從屬性面板的「溢位」功能進行調整
<範例檔：09_06.html>
25
各種溢位效果說明如下，請先設定後再使用瀏
覽器來觀看設定效果。
設定「隱藏」的預覽效果
設定「捲軸」的預覽效果
26
設定AP Div名稱
AP元素的預設名稱，點選
這裡，可以變更AP元素的
名稱
27
2.瞧！在AP元素面板
也一併變更
1.由此變更為易於辨
識的名稱
28
檢視AP元素屬性
游標移到AP元素邊框，則會顯示邊框屬性資訊
游標移到AP元素內部，會顯示相關屬性資訊
29
AP Div的CSS樣式設定
1.點選AP元素
2.開啟「CSS樣式」面板，點選元素名稱
3.按下此鈕編輯樣式
<範例檔：09_08.html>
30
1.切換到「邊框」分類
2.設定邊框的樣式
3.按下「確定」鈕
31
瞧！AP元素加入了邊框
<範例檔：09_08ok.html>
32
9-5 AP元素排版技巧
尺規、格線及導引線
尺規
尺規單位
水平尺規
垂直尺規
33
格線
2.頁面上立即顯示
格線
1.執行「檢視/格線
/顯示格線」指令
34
至於格線內容，則請執行「檢視/格線/格線設定
」指令，然後從視窗中進行設定。
可設定格線顏色
設定是否顯示及貼齊
格線
設定格線的外觀
樣式
設定每條格線之間的距離
35
導引線
導引線預設的顏色是綠色，
調為暗紅色是為了易於識別
36
繪製導引線時需藉助頁面上的尺規，當尺規顯示
以後，我們可以在水平尺規上按住往下拖曳（垂
直尺規則是往右拖曳），這時所看到的綠色線條
就是導引線，綠色是導引線的預設顏色，另外在
拖曳的過程中也會同時顯示導引線的座標位置。
由上方的水平尺規往下拖曳，就會
顯示導引線及其座標資訊
37
至於導引線的其他功能可由「檢視/導引線」中
的功能清單來選用，我們以附表為各位作個整理
。
38
元素的對齊
只要利用「Shift」鍵先複選多個AP元素，
Dreamweaver會以最後選取的元素來做為對
齊的依據，當各位選取完成後，再執行功能
表中的「修改/排列順序」指令，接著就可從
清單中的「靠左對齊」、「靠右對齊」、「
靠齊上緣」及「靠齊下緣」等擇一方式進行
對齊。
另外功能清單中的「設定成同寬度」與「設
定成同高度」功能，則可以同時將所選取的
AP元素調整成相同的寬度或高度，但同樣是
以「最後選取」的AP元素做為調整的依據。
39
40
9-6 巢狀AP元素
建立巢狀AP元素
建立2個AP元素
按住「Ctrl」鍵，將apDiv1拖曳到apDiv2上方
41
建立完成的巢狀
AP元素
42
巢狀AP元素應用
1.在頁面上建立如圖的3個AP元素，並命名成如圖的名稱，於green及
shadow元素內輸入英文字母
2.按此鈕分別為green及shadow兩個AP元素設定字體樣式
<範例檔：09_09.html>
43
將green及shadow兩個AP元素設為group的子AP元素
將2個AP元素重疊，並做些許的位移，
就能產生出如圖的陰影效果
<範例檔：09_09ok.html>
44
當要移動陰影文字時，只需拖曳父元素
(group)，整個陰影文字就會一併移動了。
移動父元素時，裡面
所包含的子元素就會
一併移動
45
9-7 以Div標籤規畫區塊
插入Div標籤
表頭(header)
網頁主要內容，又分成
左右兩欄(contentLeft、
contentRight)
頁尾(footer)
高雄市府政文化局網址：
http://www.khcc.gov.tw/home01.aspx?ID=1http://www.ntch.edu.tw/
46
1.開啟空白網頁
2.由此按下「插入Div
標籤」鈕
47
1.點選此項，使插入在插入點上
2.輸入標題區的ID名稱
3.按此鈕確定
由此設定CSS規則，或是稍後再做設定
48
1標題區的區塊已經建立
，將輸入點放在區塊中
2.按此鈕再插入Div標籤
1.設定插在header標籤之後
3.按此鈕確定
2.輸入內容區的標籤名稱
49
1.內容區已顯示在標題區
之下
2.再按此鈕
1.選擇在「content」標
籤之後
3.按此鈕確定
2.輸入頁尾的標籤名稱
50
顯現規劃的三大區塊
<範例檔：09_11ok.html>
51
將三大區塊劃分出來之後，接下來我們要在「
content」的區塊範圍內，插入「contentleft」及
「contentright」兩個標籤。
1.將插入點放在「
content」標籤之中
2.按此鈕插入標籤
<範例檔：09_12.html>
52
1.設定在「content」標籤
開始後
3.按此鈕確定
2.輸入內容左側的標籤名稱
瞧！「contentleft」標籤
已正確插入在「content
」的標籤內
53
接下來，我們還要在「contentleft」標籤之後插
入「contentright」標籤。
1.輸入點放在「contentleft」之中
2.按此鈕
54
1.選擇在「contentleft」標籤後
3.按此鈕確定
2.輸入標籤名稱
55
瞧！「contentright」
正確地顯示在「
contentleft」之後，且
位在「content」的標
籤之中
<範例檔：09_12ok.html>
56
以CSS設定Div標籤大小與底色
1.將輸入點放在表頭當中
2.開啟CSS樣式面板，按下此鈕新增樣式
<範例檔：09_13.html>
57
3.按此鈕確定
1.選此項
2.輸入選取器名稱
58
1.切換到「背景」
2.下拉設定背景色
1.切換到方框
2.由此設定表頭的寬
度與高度
3.按此鈕確定
59
為表頭的Div標籤加入底色及大小的設定
60
在設定「contentleft」及「contentright」的CSS
樣式時，可在「方框」的類別中將「Float」分
別設為「left」及「right」，這樣左右的兩個標
籤就可以分別靠左和靠右對齊了。
設定contentright
時，請選擇「rirht
」，「clear」則
選擇「none」
61
編修Div標籤的CSS樣式
1.新增的CSS規則會顯示於此，點選要編修的規則
<範例檔：09_13ok.html>
2.按此鈕即可編修該樣式
62
標籤中插入網頁元素
Dreamweaver中看到的效果
瀏覽器上看到的效果
63
9-8 應用範例-上頁框/左頁框的頁面設計
這部份要設計的是位於頁框架構中的「上頁
框」與「左頁框」的頁框畫面，在「上頁框
」中要擺放的是網頁橫幅影像，而在「左頁
框」中要放置的則是具有導覽功能的連結按
鈕。
64
左方頁框畫面設計
以「frame_left_back.jpg」影像做為背景
在「班級網站」中新建left.html網頁
65
加入導覽按鈕
2.在網頁中拖曳出AP元素
1.點選「繪製AP Div」按鈕
66
1.點選在AP元素中
2.「插入」面板切換到「常用」標籤，按下「滑鼠變換影像」鈕
67
1.設定如畫面所示
2.按下「確定」鈕
68
完成第一個按鈕設定
其他導覽按鈕的設定內容如下：
69
依序將以上的按鈕加入後，請將按鈕排列成
如圖下的效果。
70
上方頁框畫面設計
請新增一個空白頁面「top.htm」，並且以「
frame_top_back.jpg」影像來做為背景，同
時將重覆效果設定為「no-repeat」。
71
加入網頁橫幅
2.繪製一AP Div
1.按此鈕
72
2.在AP元素內插入「banner001.png」
1.按下此鈕，在AP Div中新增影像檔
73
本章結束
Q&A討論時間
74