另一用DreamWeaver提供之方法 - 林伟川.PPT

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%”“ frame src=“XX name=topFrame frame src=“YYY name=mainFrame /frameset HTML網頁框架範例 html headtitle新網頁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 HTML網頁框架範例 html headtitle新網頁1/title/head body a href=“” target=_selfkimo/ap a href= target=upperhinet/ap a href= target=bottomfetnet/ap a href=.tw target=_blankseednet 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 /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軸個數 視窗 / 其他 / 圖層 或 視窗 / 其他 / 時間軸 圖層範例 圖層與時間軸互動 開一空白網頁檔並加入圖層及一表格影像 選某圖層於時間軸上按右鍵 / 增加物件 將此圖層於時間軸上拉長 於時間軸上