巢状页框组的分配方式.PPT

第10章 加入頁框以多元化網頁 頁框的觀念 建立頁框網頁 組合頁框畫面 頁框的調整 內置頁框 頁框的觀念 A與B二個頁面該如何顯示於同一個頁框呢？ 答案就是利用「超連結」，我們在原本的「menu.htm」頁面中建立可以連結到A與B等頁面的超連結，使用者可以根據想要瀏覽的主題點取顯示。 取消頁框的輔助功能 各種頁框建立方式 設定頁框名稱 先將「leftFrame」改為「left」。 再利用相同方式將「topFrame」與「mainFrame」改為「top」與「main」。 儲存頁框組檔案(1) 儲存頁框組檔案(2) 1.將「left.html」置入左頁框 儲存頁框組檔案(3) 2.將「top.html」置入上頁框 儲存頁框組檔案(4) 3.將「main-1.html」置入主頁框 調整頁框尺寸(1) 手動拖曳調整 以手動方式來拖曳調整是最直接的方式，只要我們將滑鼠游標移到頁框邊線上時就可以進行調整。 調整頁框尺寸(2) 使用數值設定 1.設定左頁框的寬度 2.設定上頁框的高度 調整頁框尺寸(3) 頁框的寬高尺寸單位 巢狀頁框組的觀念(1) 單一頁框組的分配方式 1.畫面中只有二個頁框時 因為二個頁框的分配方式很單純，所以只需要一個頁框組就可以了。 2.畫面中有三個頁框時 不論畫面上有幾個頁框，只要分配方式相同（水平或垂直），也都只需要一個頁框組就夠了，圖中是以水平分配方式為例。 巢狀頁框組的觀念(2) 巢狀頁框組的分配方式 如果頁面上的頁框分配方式同時具有水平及垂直時，就要使用巢狀頁框組了。 巢狀頁框組的觀念(3) 頁框與連結目標的關係 1.若是將連結目標指定為「_self」，會在目前頁框顯示連結網頁。 2.若是將連結目標指定為「_top」，會在目前瀏覽器視窗顯示連結網頁，並取代所有頁框。千萬別誤以為是變更上層頁框連結哦！ 頁框的其他設定(1) 框線的顏色及寬度 頁框的其他設定(2) 捲軸的啟動 利用程式碼建立(1) 新增內置頁框 繼續在iframe標籤中輸入其他語法內容，其中「src=”top.html”」是指要將「top.htm」頁面顯示在內置頁框中，而「width=”300”」與「height=”150”」則是設定內置頁框的寬高尺寸。 利用程式碼建立(2) 利用圖層來移動內置頁框 利用程式碼建立(3) 內置頁框的語法參數 底下列出iframe語法中的參數設定，供各位在設計時的參考。 應用範例-「組合頁框」的頁面設計(1) 在這應用範例中，利用頁框的功能將前面所設計的各個頁面組合起來，以完成整個網站頁面的製作。 應用範例-「組合頁框」的頁面設計(2) 建立框架頁面 應用範例-「組合頁框」的頁面設計(3) 設定各頁框的連結顯示頁面 應用範例-「組合頁框」的頁面設計(4) 設定導覽按鈕的連結目標 10-4 頁框的調整 外部網站頁會在該視窗顯示，並取代原本所有頁框。 預覽網頁中，按下此圖示連結剛才設定的外部網站。 10-4 頁框的調整 1.點選頁框組邊框 2.指定要設定的頁框 3.從屬性面板中設定框線樣式 10-4 頁框的調整 2.再選取捲軸的啟動方式 1.先點選要設定捲軸的頁框 該頁框出現捲軸 10-5 內置頁框 1.新增一個空白檔案，並將檔名儲存為「iframe.html」。 2.點選插入列「IFRAME」圖示鈕 10-5 內置頁框 自動切換為「分割」畫面，接下來必須手動輸入程式碼。 10-5 內置頁框 輸入程式碼的過程，會自動辨讀可能要輸入的關鍵字，並以選單方式列出，可直接點選程式碼。 請完成程式碼的部分，如畫面。 10-5 內置頁框 2.在頁面建立新的AP元素 1.按下AP Div鈕 這個就是內置頁框 按下此鈕，切換到「設計」模式。 10-5 內置頁框 開啟瀏覽器預覽，即可得到這樣的效果。 將內置頁框拖曳到AP元素中 10-5 內置頁框 設定內置頁框的對齊方式。 align 設定是否顯示框線。 Frameborder 設定是否在內置頁框中使用捲軸。 Scrolling 設定在內置頁框中左右及上下的空白。 Marginwidth及Marginheight 設定內置頁框的寬度與高度。 Width及Height 設定內置頁框的名稱。 Name 設定內置頁框內容的來源頁面。 Src 作用 參數名稱 10-5 內置頁框 10-5 內置頁框 點選此鈕，建立新頁框網頁。 10-5 內置頁框 將頁框名稱設定如圖 由屬性面板來變更頁框名稱 新建立網頁 10-5 內置頁框 news.html 主頁框「main」 left.html 左頁框「left」 top.html 上頁框「top」 頁框原始檔 頁框名稱 2.按下此鈕，指是頁框原始檔。 1.先點選其中一個頁框 10-5