使用頁框標記 <FRAMESET> 可以組合多個獨立頁面，
以連結方式，組合在同一頁面中，
當需要修改時, 只需修改原始檔,
其它有用到該 html 的頁面, 就會即時更新
今天來學習 DW 如何製作頁框
使用頁框組是現有頁面分割出數個框架,
而不是在頁面中用插入(如表格用法)的方式。
這裡要示範的是將頁面分割出 4 個頁框, 分別連結出
1-top.html 2-left.html, 3-main.html, 4-bottom.html
首先我們開一個新的html
1. (勾選) - 視覺輔助 - 頁框邊框
也可從下拉亠功能表中設定
檢視 -> 視覺輔助 -> 頁框邊框
出現邊框
2. 從邊框可拉出水平或垂直分割 (四個邊框皆可)
水平
程式碼變化
垂直
程式碼變化
3. 依需求拉出上中下, 三區塊,
拖曳框線位置, 可改變頁框大小
完成圖
4. 現在對中間的 frame 再分割為左右 2 frame
a. 將游標放置在分割的frame上
b. 修改 - 頁框組 - 向左分割頁框
c. 完成分割了。
程式碼
5. 過程中要刪除多餘頁框,
只要將框線, 拖曳出頁框邊框之外即可。
6. 檔案 - 儲存頁框組
儲存時須注意, 單擊頁框的邊框, 儲存頁框組。
若點擊至頁框內部區域, 則儲存頁框對應的頁面。
7. 每個頁框都可以連結一個網頁,
讓多個網頁能夠同時在一個視窗中呈現出來,
現在設定頁框組的網頁來源。
a. 開啟頁框面板
視窗 -> 頁框
b. 點擊上方頁框, 選取 1-top.html, 就完成了
c. 同理, 完成其它連結
d. 程式碼
8.加入頁框的網頁, 預設情況下會呈現出頁框的邊框,
我們可以調整邊框, 捲動, 大小等屬性, 讓頁框符合需求
8.1首先設定每列頁框高
a. 設定 top 邊框 否 - 列 110 px
b. bottom 列 = 30 px
c. 中間頁框, 則設單位為 相對(代表其它固定大小的區塊)
程式碼
8.2 設定欄寬
a. 左側 邊框 否 - 列 230 px
b. 右側, 單位為 相對
完成圖
9. 設定頁框名稱
頁框面板 -點擊 上方頁框, 設定 id
完成 left,main, bottom
此動作將 frame 設定 id 值
原程式碼
設定後
frame 介紹完了,
有沒有注意到 frameset 是放在 head 之後, body 之前呢?
頁框組裡 body 是沒有內容的
但是當瀏覽器不支援框架時，
則 可用<noframes> 會 框住 body , 在body 中註記說明,
那時會顯示 <NOFRAMES> 與 </NOFRAMES>之間的內容，
而不是一片空白。
若瀏覽器支援框架，那麼它不會理會 <noframes>。
0 意見:
張貼留言