DreamWeaver MX (VI) 林偉川
網頁框架 可分列分割及欄分割 方法一 方法二 方法三 檔案/開新檔案於一般之頁框組點選之<frameset ></frameset> 方法二 檔案/開新檔案開一空白的HTML網頁點插入面板之頁框點選之 方法三 開一空白的HTML網頁點插入/頁框
網頁框架觀念 有body就沒有frameset Frame要有邊框 網頁框架分割時要有比例或像素點 DreamWeaver將自動對建立的頁框命名, 通常比較大的稱為mainFrame, 其他則以在頁框組中的位置來命名, 例如: topFrame, leftFrame, bottomFrame
HTML網頁框架範例 列分割 <frameset rows=“*,*”“ > 或 <frameset rows=“30%,70%”“ > <frame src=“XX" name="topFrame" > <frame src=“YYY" name="mainFrame"> </frameset> 欄分割 <frameset cols="*,*"" > 或 <frameset cols=“30%,70%”“ >
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
HTML網頁框架範例 <html> <head><title>新網頁1</title></head> <body> <a href=“http://tw.yahoo.com” target=_self>kimo</a><p> <a href="http://www.hinet.net" target=upper>hinet</a><p> <a href="http://www.fetnet.net" target=bottom>fetnet</a><p> <a href="http://www.seed.net.tw" target=_blank>seednet new page</a> </body> </html>
HTML網頁框架結果
另一用DreamWeaver提供之方法 開一左右頁框 左邊插入一表格每個儲存格分別加超連結 儲存為Menu.htm 整個頁框存檔為index10.htm 以IE開啟之
Chapter 28 網頁框架範例
Chapter 28 網頁框架範例過程 先建立三個HTML檔案分別為a1.htm, menu.htm, index7.htm (空白網頁) 開一空白網頁檔插入網頁框架並設定有邊框,邊框寬度 修改此網頁框架連結之各個檔案 將此網頁框架存檔
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>
Chapter 28 網頁框架範例
圖層觀念 圖層編號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軸個數 視窗 / 其他 / 圖層 或 視窗 / 其他 / 時間軸
圖層範例
圖層與時間軸互動 開一空白網頁檔並加入圖層及一表格影像 選某圖層於時間軸上按右鍵 / 增加物件 將此圖層於時間軸上拉長 於時間軸上按右鍵 / 增加關鍵影格 拉動此圖層以形成移動軌跡 不斷增加關鍵影格 並拉動此圖層直到回到原點 於自動播放及重複打勾 存此網頁檔
Chapter 30 圖層時間軸範例