1 / 16

DreamWeaver MX (VI)

DreamWeaver MX (VI). 林偉川. 網頁框架. 可分列分割及欄分割 方法一 檔案 / 開新檔案於一般之頁框組點選之 <frameset ></frameset> 方法二 檔案 / 開新檔案開一空白的 HTML 網頁點插入面板之頁框點選之 方法三 開一空白的 HTML 網頁點插入 / 頁框. 網頁框架觀念. 有 body 就沒有 frameset Frame 要有邊框 網頁框架分割時要有比例或像素點

washi
Download Presentation

DreamWeaver MX (VI)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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%”“ > <frame src=“XX" name="topFrame" > <frame src=“YYY" name="mainFrame"> </frameset>

  5. HTML網頁框架範例 New8.htm • <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>

  6. 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>

  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> </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 圖層時間軸範例

More Related