第六次上課：頁框製作

■頁框分割前的準備

1.為了讓頁框可以區分清楚分別編輯left.html，main.html，top.html設定背景顏色

2. 為了讓左邊選單超連結測試有無成功分別編輯m1 ~ m5.html打字做記號(m1.m2.m3.m4.m5.然後再利用檔案/全部儲存

■頁框分割

1.開啟Dreamweaver 8

2.管理網站/匯入/94****.ste

3.建立新檔案/HTML,版面/頁框/選擇自己要的框架樣式

(另一個方法:從範本建立/頁框組/選擇自己要的框架樣式)

4. 視窗/頁框

5.選取top.原始檔:file://c…..(絕對路徑) top.html

陸續完成

main.原始檔:file://c….(絕對路徑) main.html

left.原始檔:file://c…..(絕對路徑) left.html

6.選取視窗輔助的最外圍

7.檔案/全部儲存/frameset.html/覆蓋原來的檔案

★頁框分割完成圖

8.按F12以瀏覽器預覽

■頁框調整

1.設定頁框組的屬性(left.htm--捲動:自動)及調整頁框大小(若無法看到頁框框線則執行檢視/視覺輔助/頁框邊框打勾)

2.執行檔案/全部儲存

■選單製作

1.製作左選單(因為表格不會動.故在表格外增加圖層.以利移動)將滑鼠移至left.html.版面/圖層->拉好圖層

2.選工具列版面/表格; 5x1,邊框:0 , 寬度:90百分比 /確定

3.改變表格大小(注意不要比圖層大)

4.表格內填入 m1 .反白m1.屬性面版超連結選 m1.html. 目標:mainFrame

5.分別完成m1.htm……..m5.html的超連結及目標視窗

6.檔案/全部儲存, 按F12預覽測試頁框連結有無錯誤

★觀念-絕對路徑及相對路徑

絕對路徑：個人電腦的路徑，例如〝file:///C:/www/index.html〞就是連結到個人電腦硬碟C槽中的www資料夾裡的index.htm檔。當您使用這種路徑時，全世界就只有您的個人電腦能夠讀取連結的檔案，其他人連上網將無法讀取。

相對路徑：檔案與檔案彼此間的相對位置，例如〝images/button.gif〞就是連結images資料夾中的button.gif檔。只要同時將網頁與image資料夾上傳到網路上，所有的人皆可以正確讀取，因此我們製作網頁時是採取相對路徑