本投影片（下稱教用資源）僅授權給採用教用資源相關之旗標書籍為教科書之授課老師（下稱老師）專用，老師為教學使用之目的，得摘錄、編輯、重製教用資源（但使用量不得超過各該教用資源內容之 80%）以製作為輔助教學之教學投影片，並於授課時搭配旗標書籍公開播放，但不得為網際網路公開傳輸之遠距教學、網路教學等之使用；除此之外，老師不得再授權予任何第三人使用，並不得將依此授權所製作之教學投影片之相關著作物移作他用。

著作權所有 © 旗標出版股份有限公司

第 14 章在網頁中任意擺放 網頁元素

2

14-1 建立 AP Div 來擺放網頁元素認識 AP Div

3

建立 AP Div

4

在 AP Div 中加入網頁元素

5

在 AP Div 中加入網頁元素

6

選取與調整 AP Div

選取 AP Div

7

調整 AP Div 的大小與位置

8

調整 AP Div 的大小與位置

9

使用「 AP 元素」面板管理 AP Div

10

更改 AP Div 的名稱

11

更改 AP Div 的 Z 軸順序

12

更改 AP Div 的 Z 軸順序

13

建立巢狀 AP Div 方法 1 ：

14

建立巢狀 AP Div 方法 2 ：

15

建立巢狀 AP Div

16

AP Div 的顯示與隱藏

17

AP Div 的顯示與隱藏

18

AP Div 的顯示與隱藏

19

AP Div 的顯示與隱藏

20

14-2 設定 AP Div 的屬性AP Div 的「屬性」面板

21

AP Div 的「顯示」屬性 Default ：依瀏覽器的預設值來顯示 AP Div ( 預設為此項 ) 。

Inherit ：沿用父 AP Div 的顯示狀態 , 若沒有父 AP Div, 預設會顯示出來 ( 大多數瀏覽器 , 例如 IE 的預設值都是採用 inherit) 。

Visible ：不管父 AP Div 的顯示狀態如何 , 強制顯示 AP Div 。

Hidden ：不管父 AP Div 的顯示狀態如何 , 強制隱藏 AP Div 。

22

AP Div 的「顯示」屬性若將這些屬性與 AP 元素面板的操作做對照 , 如下所示：

23

AP Div 的「溢位」屬性

24

AP Div 的「溢位」屬性

25

AP Div 的「溢位」屬性 visible ：自動將 AP Div 放大至可顯示完整 AP

Div 內容的狀態 , 因此會顯示出全部的內容。

26

AP Div 的「溢位」屬性 hidden ：僅顯示 AP Div 內的部份 , 隱藏超出

AP Div 以外的內容。

27

AP Div 的「溢位」屬性 scroll ：不論內容是否超出 , 都會為 AP Div 加上捲軸。

28

AP Div 的「溢位」屬性 auto ：自動依 AP Div 與內容的關係來決定是否要顯示捲軸 , 只有溢位時出現捲軸；反之則不會出現。本例我們就將溢位設為 auto, 你可開啟 Ch14-03.html 來檢視捲軸的效果。

29

設定 AP Div 的 CSS 屬性

30

設定 AP Div 的 CSS 屬性

31

14-3 將 AP Div 變成相對定位

32

14-3 將 AP Div 變成相對定位

33

14-3 將 AP Div 變成相對定位

34

14-3 將 AP Div 變成相對定位