Download presentation
Presentation is loading. Please wait.
1
DreamWeaver MX (VI) 林偉川
2
網頁框架 可分列分割及欄分割 方法一 方法二 方法三
檔案/開新檔案於一般之頁框組點選之<frameset ></frameset> 方法二 檔案/開新檔案開一空白的HTML網頁點插入面板之頁框點選之 方法三 開一空白的HTML網頁點插入/頁框
3
網頁框架觀念 有body就沒有frameset Frame要有邊框 網頁框架分割時要有比例或像素點
DreamWeaver將自動對建立的頁框命名, 通常比較大的稱為mainFrame, 其他則以在頁框組中的位置來命名, 例如: topFrame, leftFrame, bottomFrame
4
HTML網頁框架範例 列分割 <frameset rows=“*,*”“ > 或 <frameset rows=“30%,70%”“ > <frame src=“XX" name="topFrame" > <frame src=“YYY" name="mainFrame"> </frameset> 欄分割 <frameset cols="*,*"" > 或 <frameset cols=“30%,70%”“ >
5
HTML網頁框架範例 <html>
<head><title>新網頁1</title></head> <frameset rows="30%,40%,30%" border=12 bordercolor=red> <frame name=upper> <frame src="new5.htm" name=middle> <frame name=bottom> </frameset> </html> New8.htm
6
HTML網頁框架範例 <html>
<head><title>新網頁1</title></head> <body> <a href=“ target=_self>kimo</a><p> <a href=" target=upper>hinet</a><p> <a href=" target=bottom>fetnet</a><p> <a href=" target=_blank>seednet new page</a> </body> </html>
7
HTML網頁框架結果
8
另一用DreamWeaver提供之方法 開一左右頁框 左邊插入一表格每個儲存格分別加超連結 儲存為Menu.htm
整個頁框存檔為index10.htm 以IE開啟之
9
Chapter 28 網頁框架範例
10
Chapter 28 網頁框架範例過程 先建立三個HTML檔案分別為a1.htm, menu.htm, index7.htm (空白網頁)
開一空白網頁檔插入網頁框架並設定有邊框,邊框寬度 修改此網頁框架連結之各個檔案 將此網頁框架存檔
11
Chapter 28 網頁框架HTML <frameset rows="54,*" cols="*" framespacing="3" frameborder="yes" border="3" bordercolor="#0000FF"> <frame src="a1.htm" name="topFrame" scrolling="NO" noresize > <frameset rows="*" cols="144,*" framespacing="3" frameborder="yes" border="3" bordercolor="#66FF33"> <frame src="menu.htm" name="leftFrame" scrolling="NO" noresize> <frame src=“index7.htm" name="mainFrame"> </frameset>
12
Chapter 28 網頁框架範例
13
圖層觀念 圖層編號Layer1 … <div id="Layer1" style="position:absolute; left:246px; top:75px; width:282px; height:268px; z-index:1; <img src="11.gif" width="200" height="243"></div> 圖層顯示 Default 可於瀏覽器顯示 Inherit巢狀圖層結構 Visible巢狀圖層結構中不論上一層設定為何皆可顯示 Hidden巢狀圖層結構中不論上一層設定為何皆要隱藏 圖層溢位 Visible 超過圖層設定範圍部分全部顯示 Hidden 不顯示超出圖層設定範圍的內容 Scroll不管圖層內容大小皆加上捲軸 Auto根據圖層內容大小自動在圖層設定是否添加捲軸 好幾個圖層會有Z軸個數 視窗 / 其他 / 圖層 或 視窗 / 其他 / 時間軸
14
圖層範例
15
圖層與時間軸互動 開一空白網頁檔並加入圖層及一表格影像 選某圖層於時間軸上按右鍵 / 增加物件 將此圖層於時間軸上拉長
於時間軸上按右鍵 / 增加關鍵影格 拉動此圖層以形成移動軌跡 不斷增加關鍵影格 並拉動此圖層直到回到原點 於自動播放及重複打勾 存此網頁檔
16
Chapter 30 圖層時間軸範例
Similar presentations
