網頁的版面配置 許明宗.

Presentation on theme: "網頁的版面配置 許明宗."— Presentation transcript:

1 網頁的版面配置 許明宗

2 大綱 版面配置 使用表格進行版面配置 使用框架進行版面配置

3 版面配置 美化網頁，加強網站的功能，需要透過好的網頁版面配置來達成 簡單的網頁配置可以透過適當的「網頁元件使用」以及「網頁內容編排」來達成
要達到更佳的網頁版面配置，則需要透過表格、圖層、框架或是CSS等提供的功能來達成

4 版面配置 比例 像素 百分比 主要應用於框架中 指的是佔瀏覽器視窗的比例
寬度、列高的設定值為顯示比例的分子，分母為所有高框架的寬度、列高分子的加總 像素 指的是元件的像素大小 桌面設定為1028*768，最大的視窗大約可以容納大小為950*550像素的元件 不會隨瀏覽器視窗的大小而變動 百分比 指的是佔瀏覽器視窗的百分比

5 表格 「一般表格」 vs. 「版面配置表格」 表格的建立 儲存格的選取及增刪欄列 表格工具列的使用 版面配置表格 表格內容屬性設定
儲存格內容屬性設定

6 「一般表格」 vs. 「版面配置表格」 一般表格 版面配置表格 一般常見的規則表格
架構網頁版面配置，利用表格版面配置，可以快速的得到好的具有專業外觀的網頁配置

7 一般表格

8 版面配置表格

9 表格的建立 新增表格 快速修改表格 加入（背景）圖片及文字 表格標題 「一般工具列 / 新增表格」 「表格 / 插入 / 表格」 手繪表格
網頁的表格受限於HTML語言，無法像word一樣自由調整表格 使用滑鼠拖曳 刪除表格線段（合併儲存格） 加入（背景）圖片及文字 表格標題

10 儲存格的選取及增刪欄列 選取儲存格 增加欄列 刪除欄列 整（多）欄及整（多）列的選取 「Alt」鍵：單一儲存格的選取
「Shift」鍵：連續儲存格的選取 「Ctrl」鍵：不連續儲存格的選取 增加欄列 「表格 / 插入 /列或欄」 刪除欄列 「表格 / 刪除儲存格」

11 表格工具列的使用 分割與合併儲存格 垂直對齊 平均分配列高或欄寬 自動套用格式 向右或向下填滿

12 版面配置表格 繪製版面配置表格 繪製版面配置儲存格 修改表格

13 表格內容屬性設定 版面配置工具 大小 版面配置 對齊，儲存格與邊框距離、間距，高度、寬度 框線 大小、色彩 背景

14 儲存格與邊框距離、間距

15 儲存格內容屬性設定 一般儲存格 對齊 合併 標題 不換行 框線 背景

16 儲存格內容屬性設定 (con’t) 版面配置表格的儲存格 框線 頁首、頁尾 角落

17 框架 框架與框架頁 框架頁的建立 屬性設定 編輯網頁內容 超連結 內置框架

18 框架與框架頁 將一個網頁（瀏覽器視窗）切割成不同的區域，以放置不同的網頁內容 每一個分割的區域稱為一個框架，所有框架的集合就稱為框架頁。
框架的精神在於讓每個框架具有不同的功能，能顯示出不同的網頁內容 上面框架多為網站的LOGO 左邊框架多為網站的功能選項（超連結）

19 框架頁的建立 建立框架頁 指定框架網頁的來源 調整框架的版面配置 分割與刪除框架 儲存所有的網頁
在一般工具列中的「建立新的網頁」選項中選擇「網頁」  「網頁範本」視窗  選擇「框架頁」標籤  選擇框架頁的樣式 指定框架網頁的來源 設定 vs. 新增 調整框架的版面配置 分割與刪除框架 儲存所有的網頁

20 屬性設定 框架屬性 框架頁屬性 「框架 / 框架內容」 「框架 / 框架內容」  「框架頁」 名稱：用於建立超連結時使用
框架大小：比例、像素、百分比 邊界：元件距離邊框的大小 「在瀏覽器中可以調整大小」及「框架捲動軸」 框架頁屬性 「框架 / 框架內容」  「框架頁」 框架間距（寬度）及顯示框線

21 編輯網頁內容 設定及編輯替代頁面 在新的視窗編輯網頁 更改框架頁的內容 瀏覽器不支援框架時 在「沒有框架」模式中，編輯網頁
框架頁編輯網頁太擁擠，或需要檢視HTML碼時 「框架 / 在新的視窗中開啟頁面」，或是「視窗 / 在新視窗開啟」 更改框架頁的內容 「框架 / 框架內容」  「框架頁」

22 超連結 框架的名稱 指定目標框架 設定預設的目標框架 「網頁內容」  「一般」標籤  「預設目標框架」

23 內置框架

24 內置框架 (cont’d) 「插入 / 內置框架」 設定內置框架 選取「內置框架」  「格式 / 內容」 名稱、初始網頁及標題 框架大小
邊界 捲軸樣式 替代文字