网页的版面配置.ppt

网页的版面配置 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望大綱版面配置使用表格進行版面配置使用框架進行版面配置版面配置n美化網頁，加強網站的功能，需要透過好的網頁版面配置來達成n簡單的網頁配置可以透過適當的網頁元件使用以及網頁內容編排來達成n要達到更佳的網頁版面配置，則需要透過表格、圖層、框架或是CSS等提供的功能來達成版面配置n比例n主要應用於框架中n指的是佔瀏覽器視窗的比例n寬度、列高的設定值為顯示比例的分子，分母為所有高框架的寬度、列高分子的加總n像素n指的是元件的像素大小n桌面設定為1028*768，最大的視窗大約可以容納大小為950*550像素的元件n不會隨瀏覽器視窗的大小而變動n百分比n指的是佔瀏覽器視窗的百分比表格l一般表格 vs.版面配置表格l表格的建立l儲存格的選取及增刪欄列l表格工具列的使用l版面配置表格l表格內容屬性設定l儲存格內容屬性設定一般表格 vs.版面配置表格l一般表格一般常見的規則表格l版面配置表格架構網頁版面配置，利用表格版面配置，可以快速的得到好的具有專業外觀的網頁配置一般表格版面配置表格表格的建立l新增表格一般工具列/新增表格表格/插入/表格手繪表格l快速修改表格網頁的表格受限於HTML語言，無法像word一樣自由調整表格使用滑鼠拖曳刪除表格線段（合併儲存格）l加入（背景）圖片及文字l表格標題儲存格的選取及增刪欄列l選取儲存格整（多）欄及整（多）列的選取Alt鍵：單一儲存格的選取Shift鍵：連續儲存格的選取Ctrl鍵：不連續儲存格的選取l增加欄列表格/插入/列或欄l刪除欄列表格/刪除儲存格表格工具列的使用l分割與合併儲存格l垂直對齊l平均分配列高或欄寬l自動套用格式l向右或向下填滿版面配置表格l繪製版面配置表格l繪製版面配置儲存格l修改表格表格內容屬性設定l版面配置工具l大小l版面配置對齊，儲存格與邊框距離、間距，高度、寬度l框線大小、色彩l背景儲存格與邊框距離、間距儲存格內容屬性設定l一般儲存格對齊合併標題不換行框線背景儲存格內容屬性設定(cont)l版面配置表格的儲存格框線頁首、頁尾角落框架n框架與框架頁n框架頁的建立n屬性設定n編輯網頁內容n超連結n內置框架框架與框架頁n將一個網頁（瀏覽器視窗）切割成不同的區域，以放置不同的網頁內容n每一個分割的區域稱為一個框架，所有框架的集合就稱為框架頁。n框架的精神在於讓每個框架具有不同的功能，能顯示出不同的網頁內容q上面框架多為網站的LOGOq左邊框架多為網站的功能選項（超連結）框架頁的建立n建立框架頁q在一般工具列中的建立新的網頁選項中選擇網頁 網頁範本視窗 選擇框架頁標籤 選擇框架頁的樣式n指定框架網頁的來源q設定 vs.新增n調整框架的版面配置n分割與刪除框架n儲存所有的網頁屬性設定n框架屬性q框架/框架內容n名稱：用於建立超連結時使用n框架大小：比例、像素、百分比n邊界：元件距離邊框的大小n在瀏覽器中可以調整大小及框架捲動軸n框架頁屬性q框架/框架內容 框架頁n框架間距（寬度）及顯示框線編輯網頁內容n設定及編輯替代頁面q瀏覽器不支援框架時q在沒有框架模式中，編輯網頁n在新的視窗編輯網頁q框架頁編輯網頁太擁擠，或需要檢視HTML碼時q框架/在新的視窗中開啟頁面，或是視窗/在新視窗開啟n更改框架頁的內容q框架/框架內容 框架頁超連結n框架的名稱n指定目標框架n設定預設的目標框架q網頁內容 一般標籤 預設目標框架內置框架內置框架(contd)n插入/內置框架n設定內置框架q選取內置框架 格式/內容q名稱、初始網頁及標題q框架大小q邊界q捲軸樣式q替代文字