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