第九章利用表格來排列網頁 第九章利用表格來排列網頁 9-1 表格的功用 9-2 欄 列與儲存格的編輯 9-3 表格的其他設定 1/117 2/117 9-1 表格的功用 9-1-1 認識表格 9-1-2 表格的置入 9-1-3 手繪表格的功能 9-1-4 新增的版面配置來分隔網頁 表格的功用 不論您的網頁內容簡單或複雜, 表格都是不可少的元素, 有不少網頁設計師甚至不會直接在網頁中輸入文字, 而都是透過表格來分隔版面, 再一一輸入文字 圖片等網頁元件 也就是所有的網頁元素都放在表格中 這麼作做的目的, 當然是因為透過表格來排列網頁, 也就是進行網頁排版的工作 3/117 4/117 9-1-1 認識表格 若您經常使用文書處理軟體, 那對表格應該有基本的認識, 可以直接跳到第二節開始動手實作在 FrontPage 中加入表格 本單元先來看看表格的定義, 認識表格的基本元素 表格主要是由三項元素所形成, 分別是直排的欄 橫排的列以及儲存格 直排的為欄 橫排為列而表格中所形成的每個格子則稱為儲存格 每個表格都少不了欄 列和儲存格這三項元素, 而透過不同的欄 列形成大大小小不同的表格, 而儲存格列的數量也因此而變化 底下用實際的表格來說明, 底下是一個六欄 三列的表格, 共有 18 個儲存格 認識表格 一個均等的表格中, 儲存格的數量就是欄與列相乘, 如上表六欄三列的表格相乘即有 18 個儲存格 不相乘的表格儲存格就不是如此了 例如 : 下表六欄四列的表格, 但每一列的欄數都不相同, 這時儲存格的數量就不是相乘了 5/117 6/117 1
橫為欄直為列 不均等的表格 7/117 8/117 9-1-2 表格的置入 認識表格的基本元素後, 底下看看如何在 FrontPage 中插入表格 此部分的操作和 Word 相同, 有兩種方式可以在網頁中置入表格, 分別是 : 使用工具列的 插入表格 工具圖示 執行功能表的 表格 / 插入表格 指令 使用插入表格工具圖示 在一般工具列上, 準備了插入表格工具圖示, 讓您可以快速在網頁中插入表格 底下就來看看怎麼操作 使用工具列圖示插入的表格, 一定是對稱的表格, 而且預設會顯示表格框線 當您點選工具圖示時雖然所出現的表格方框只有 4X5, 不過繼續向右拖曳就會展開表格方框, 來達到您所希望的欄 列數 9/117 10/117 從工具列插入表格 拖曳設定表格大小 11/117 12/117 2
透過功能表來操作 可進一步做細部設定 透過工具列可以馬上動手插入表格, 不過無法針對表格的內容逐一進行設定 因此, 多數人還是透過功能表來插入表格, 才能一次設定表格的內容 底下來看看插入表格的操作步驟 回到網頁中, 綠色框線的三欄 三列表格已經置入網頁中 插入表格對話框中有不少表格的設定項, 關於設定項的使用在本章的第二節會在說明 現在您對表格的設定應有基本的了解認識了, 後續常用的設定會在再慢慢說明 表格可不是設定之後就無法修改的, 選取表格後按下滑鼠右鍵執行 表格 / 內容 就可以在此開啟表格內容視窗來修改既有表格的內容 13/117 14/117 框線色彩也可以設定 設定完成 15/117 16/117 設定好的表格也可以進行修改 9-1-3 手繪表格的功能 手繪表格的功能, 是想讓您可以自己畫出希望的表格欄 列, 而不需要插入制式的表格 不過說實話, 隨著表格功能的不斷增強, 再配合版面配置工具, 只要善用儲存格的合併 刪除等功能, 就可以製作出很漂亮的不規則表格, 手繪表格對初學者而言反而不太容易掌握 因此筆者建議您, 除非對表格的設定非常有把握, 再來使用手繪表格功能製作出不規則表單會比較洽當恰當 開啟此功能請執行功能表項 表格 / 手繪表格 17/117 18/117 3
表格也可以手繪 直接利用滑鼠拖曳 19/117 20/117 繪置表格實際得按住滑鼠左鍵不放 畫直線亦同 21/117 22/117 在版面配置模式版面配置模式中可看儲存格大小 畫錯用橡皮擦擦掉 23/117 24/117 4
9-1-4 新增的版面配置來分隔網頁 版面配置表格是 FrontPage2003 新增的功能, 主要是用來分隔網頁的空間, 讓使用者無須透過框架, 就製作出不同版面的表格 筆者提過不少網頁設計師習慣在網頁中加上表格再輸入文字並加入物件, 而不會直接在網頁中作業 除了有助於網頁文件的位置規劃外, 也有助於物件的對齊 當然, 這也是因為框架的使用其實有其缺點, 最大的問題就是得將不同的網頁存成框架網頁組, 這對於版面複雜的網頁實在是太容易搞混了 而版面配置就是將最常用的表格先畫好, 再讓您進行套用 在版面配置表格及儲存格工作窗格中, 可以加入新表格 儲存格, 也可插入版面配置表格以及版面配置儲存格 而下方也會顯示預設的版面配置表格範本, 直接套用此種表格 新增的版面配置來分隔網頁 滑鼠左鍵雙點工作窗格中的表格版面配置樣式, 原本空白網頁就會加上版面配置表格, 同時工作窗格的 顯示版面配置工具 也會呈現被選取的狀態 版面配置表格會顯示網頁的尺寸 不過預設的版面配置表格, 並不會自動調整到於網頁內容同樣大小, 選取版面配置表格後可以透過工作窗格來重新設定表格的大小, 而當您所選取的是個別儲存格, 則是設定個別儲存格大小 例如筆者所置入的版面配置表格的大小為 563X458 不過新增的版面只是版面的延伸, 並非原本版面配置表格的範圍, 就如同你您把表格旁邊的空間畫出來, 還必須加上表格的欄 列才會是完整的表格 25/117 26/117 利用版面配置功能可分配網頁空間 800x600 的數值 27/117 28/117 可以自行設定表格 格線要手動設定 29/117 30/117 5
9-2 欄 列與儲存格的編輯 9-2-1 表格與儲存格的選取 9-2-2 表格內容設定 9-2-3 儲存格內容設定 9-2-4 表格的調整 欄 列與儲存格的編輯 第一節中認識了 FrontPage 中置入表格的方法, 插入表格 手繪表格和版面配置表格, 不論哪一種表格後續編輯的方法都大同小異 表格的編輯主要分為表格的設定 欄 列的操作以及儲存格的操作 31/117 32/117 9-2-1 表格與儲存格的選取 表格的選取 和修改文字一樣, 當要修改的是整段的文字, 那直接在段落格式中設定, 若要修改的對象是特定文字, 那必須得選取文字後再來進行設定 表格也是相同, 當要進行設定時, 必須分別選取目標對象, 表格 欄 列或是儲存格 不論您要選取的是整個表格 欄 列或是個別儲存格, 都可以透過滑鼠來進行選取 當然您必須對選取這個動作相當熟悉才能馬上選到正確的目標, 底下先來看看如何利用指令選取 33/117 34/117 利用功能表來選取表格 被選取的表格會呈現反白狀態 35/117 36/117 6
儲存格的選取 可單獨選取儲存格 儲存格的選取方式有三種, 第一種和選取整個表格相同, 都是透過功能表的指令來完成 另外二種則是利用滑鼠以及鍵盤來完成, 底下先來利用功能表選取 另外二個選取儲存格的方法, 一個是利用滑鼠, 另一個則是利用鍵盤 使用滑鼠選取時, 先將滑鼠游標移到欲選取的儲存格中, 按住滑鼠左鍵不放進行拖曳, 就可以選取多個儲存格 利用鍵盤來選取, 同樣得先將滑鼠游標移到欲選取的儲存格中, 按住 Shift 鍵不放, 移動鍵盤的方向鍵向左右或上下移動, 即可選取多個儲存格 37/117 38/117 被選取的儲存格會呈現反白狀態 按 Shift 建可一次選取多個 39/117 40/117 欄 列的選取 可一次選取多欄 清楚如何選取表格和儲存格之後, 再來看看欄和列的選取 選取欄 列時使用滑鼠來進行選取的動作, 會比執行功能表指令快, 也來的得簡單 當您要選取特定欄時, 將滑鼠游標移到表格該欄的上方, 這時滑鼠游標會變成向下黑箭頭圖示, 按下滑鼠左鍵, 該欄就被選取了 41/117 42/117 7
也可一次選取多列 9-2-2 表格內容設定 表格和文字 段落等和其他元件一樣, 都有不同的屬性設定方法, 文字透過文字格式對話框來設定而表格自然可以透過表格內容對話視窗來進行設定 再在前面介紹表格的新增方式時, 就曾開啟此對話視窗, 底下一一介紹這個對話視窗中不同的設定項, 以及其操作方式與結果 43/117 44/117 插入表格對話視窗 版面配置工具 版面配置表格是 FrontPage 在表格中新增的功能, 當然是應用在網頁排版中 版面配置工具會顯示每個儲存格的長度和寬度, 讓使用者可以調整表格的大小 預設值是 根據表格內容自動啟用版面配置工具, 一般製作表格時不會出現, 因為表格會自動依據網頁的空間來製作, 而手繪表格和版面配置表格時即會啟用此功能 建議若您對表格不是相當熟悉, 那不要先使用版面配置工具或是版面配置表格等設定, 那可能會讓您對表格的編輯更兼混淆 所以此項目的預設值是讓系統判斷, 當您執行相關操作時, 才會開啟工具 45/117 46/117 大小 版面配置 設定表格的欄 列數, 在此輸入表格的總欄以及總列數, 來完成表格的新增工作 這裡的設定是表格對應用網頁的位置設定, 設定項目包括對齊方式 文繞圖 儲存格與邊框距離以及儲存格的間距 先從大家較為熟悉的對齊方式開始說明 對齊方式是設定表格在網頁中的對齊方式, 預設的對齊方式是靠左對齊, 還可以設定為置中對齊和靠右對齊 這裡的對齊所設定的是整個表格與網頁文件版面的對齊 下圖為預設的對齊方式 47/117 48/117 8
文字靠右效果 文字靠左效果 49/117 50/117 不同距離有不同效果 框線大小也會有影響 51/117 52/117 一般都使用固定像素 框線 53/117 這裡的選項是用來設定表格框線的屬性, 包括框線的大小 色彩和亮度 大小 : 設定框線的粗細, 數字越大框線越粗 色彩 : 設定框線的色彩, 點選時可以透過調色盤選擇顏色, 或是自訂色彩 亮框線 暗框線 : 這兩個是對應的框線, 為了讓表格看出來有所謂陰影的效果, 亮框線是表格上面的線條而暗框線則是表格右方和下方的線條 54/117 9
暗框線會有立體效果 摺疊表格框線的效果 55/117 56/117 背景 背景圖片不要太多 在此設定的是整個表格的背景, 您可以在色彩中設定表格的背景色, 或是使用既有的圖片作為表格的背景 表格設定背景圖檔的步驟, 和之前設定圖檔的動作類似, 只要透過瀏覽來點選圖檔即可 下圖分別是在表格中加入背景色和圖檔的效果 當您要在表格中設定背景色和圖檔時, 還得一併考量表格文字的顏色以及表格框線的色彩, 三者的色彩必須要搭配網頁表格才會好看, 而文字的色彩必須要比表格背景更凸顯, 否則反而看不清楚文字的內容 57/117 58/117 設定 9-2-3 儲存格內容設定 這裡只有一項 設定成新表格的預設值, 他它會幫您把剛剛的設定值記下來, 下次要加入新的表格時就會使用這次的格式作為預設值 如果您打算將目前表格的設定作為整個網站的設定, 那可以設為預設值, 後續製作網站表格就可以省去不少時間 當然, 若您有將表格的設定設為樣式, 或是後續打算將其設定為 CSS, 那就無須更改這個設定項目 表格的設定項都在表格內容對話框中設定, 而儲存格的設定項目自然就得在儲存格內容對話框中進行變更 這樣才能一一的設定個別儲存格的屬性 要開啟儲存格內容設定視窗, 可以執行功能表項 表格 / 表格內容 / 儲存格 指令, 當然這時滑鼠游標必須置入要設定的儲存格中, 或選取特定儲存格 59/117 60/117 10
從功能表中進行 儲存格內容對話視窗 61/117 62/117 版面配置 設定表格對齊方式 在版面配置中主要是設定儲存格文字的對齊方式, 儲存格的大小, 以及長寬 水平對齊方式 : 設定儲存格內資料的水平對齊方式, 對齊方式包括靠左 靠右 置中 左右對齊和符號間 水平對齊是讓文字和儲存格的對齊, 所以若您設定置中對齊, 文字會放在橫向的中間 垂直對齊方式 : 設定儲存格內的資料垂直對齊的方式, 設定對齊方式後文字相對或上下移動來進行對齊 對齊方式有靠上 靠下 置中和基線 上下合併 : 讓儲存格可以上下合併, 也就是上下兩列的儲存格合併為一列 左右合併 : 上下合併是讓兩列儲存格合成一列, 左右合併則是讓兩欄儲存格合併為一欄 63/117 64/117 合併儲存格 框線 儲存格的框線色彩和表格相同, 可以分別設定色彩 亮框線與暗框線 色彩 : 設定所選取儲存格的框線色彩 亮框線和暗框線 : 分別設定儲存格上側和右下測框線不同的色彩, 營造陰影的效果 65/117 66/117 11
設定框線 設定之後的效果 67/117 68/117 背景 設定背景圖片 設定儲存格的背景, 可以透過色彩來選定儲存格的背景顏色, 或是勾選 使用背景圖片 使用現成的圖檔來作為儲存格的背景 同樣當您設定儲存格的背景色彩時, 必須要考量表格的背景色彩 表格的框線 儲存格的框線以及文字的色彩 表格項目中色彩設定相當多, 建議當您表格設定了色彩後, 就不要額外設定儲存格的色彩或背景, 否則表格看起來反而顯得複雜 69/117 70/117 設定之後的效果 9-2-4 表格的調整 介紹了相當多表格的設定項, 您是否會覺得奇怪, 表格欄 列的增加 刪除, 這些常見的編輯動作怎麼沒有介紹呢? 將表格欄 列的增刪列在表格的調整中, 和調整欄寬 列高一起說明, 這樣會比較清楚 71/117 72/117 12
表格欄寬 列高的調整 利用滑鼠來調整表格 當您設定表格或是儲存格時, 對話框有都有相對應的設定, 讓您手動調整表格的列數 欄數以及高度和寬度, 不論是使用百分比或是像素都可以在此調整 不過這種調整方式實在太麻煩了, 直接使用滑鼠拖曳就可以啦 73/117 74/117 虛線會隨滑鼠移動 移動完成放開滑鼠左鍵即可 75/117 76/117 更改列高方式亦同 表格欄 列的增刪 要在表格中插入欄 列, 必須要先進行選取, 這樣才能確定要增加的欄以及或列會新增在哪個位置 如果您沒有選取特定的欄位, 會在表格末端進行新增的動作 77/117 78/117 13
可以在表格中再插入一欄 新增的欄位 79/117 80/117 從功能表中插入欄或列 插入欄或列的對話視窗 81/117 82/117 不需要的欄列可刪除 刪除後的結果 83/117 84/117 14
儲存格的增刪 插入儲存格 說明了欄 列和增加之後, 底下來看看儲存格的增加和刪除 和欄 列不同的是, 當您新增一個欄或是刪除一個列時, 變動的會是整個表格, 原本五欄的表格變成四欄, 或是原本四列的表格新增為六列 但是當您進行儲存格的增刪時, 所影響的是特定儲存格 原本五欄三列的表格, 再在新增和刪除一個儲存格後, 同樣是五欄三列的表格, 只是表格會呈現不對稱的狀態 看過底下的操作說明您應該就會了解瞭解 85/117 86/117 只有在儲存格內才可以輸入資料 刪除儲存格方法也相同 87/117 88/117 刪除後的結果 9-3 表格的其他設定 9-3-1 儲存格的分割與合併 9-3-2 自動套用格式 9-3-3 平均分配欄寬與列高 9-3-4 巢狀表格的建立 89/117 90/117 15
表格的其他設定 9-3-1 儲存格的分割與合併 在表格功能表中除了表格和儲存格的編輯指定指令, 包括增加 刪除之外, 還有幾個好用的設定指令 包括儲存格的分割與合併 表格的自動格式設定 欄寬和列高的自動分配等, 以及巢狀表格的建立 多數的表格都固定是幾欄幾列, 可是您一定會有需要特定欄的時候, 這時重劃一個表格有點麻煩, 而且儲存格之間也無法對齊 所以比較洽當恰當的做法是進行儲存格合併或分割的動作 91/117 92/117 儲存格的合併 儲存格可以進行合併 儲存格的合併會將特定儲存格併成一個儲存格 例如當您要在表格的開頭第一行打上大大的標題時, 就可以將第一列的所有欄位合併為一個儲存格, 這樣這一行儲存格的寬度就等於表格中其他特定行的儲存格加起來的寬度 93/117 94/117 合併後的結果 分割儲存格 分割儲存格也是類似的指令, 他它可以將所選取的特定儲存格分割為幾個列或是幾個欄 底下沿用上一個範例繼續說明 選取剛剛合併的儲存格來進行分割的動作 95/117 96/117 16
針對單一儲存格在進行分割 設定分割數目 97/117 98/117 分割後的結果 同樣也可以設定分割的數量 99/117 100/117 分割完成後的結果 9-3-2 自動套用格式 FrontPage 中有準備好的佈景主題, 來替網站加上新妝 表格中也有類似的功能, 設定後表格會自動換個面孔顯示, 這就是套用表格功能表中的 自動套用格式 在自動套用格式中, 準備了各式各樣不同的表格樣式可以選擇, 隨著網頁內容的配色來挑選合適的格式設定 101/117 102/117 17
可以套用表格樣式來美化表格 有許多樣式可供選擇 103/117 104/117 未勾選的就不會套用此格式 不會套用到整個表格而是特定項目 框線 : 套用自動格式樣式中的表格框線樣式 字型 : 套用自動格式樣式中的表格字型樣式設定, 表格中的文字字型會自動調整 網底 : 自動格式樣式中的網底設定, 若樣式有設定網底則是表格的背景就會新增網底 色彩 : 表格的其他色彩設定, 例如背景色 自動調整 : 自動依據表格的內容來調整設定, 建議不要選取 標題列 : 若該表格有標題列, 則套用標題列樣式 首欄 : 在表格的首欄也就是第一欄套用表格樣式中的樣式 末列 : 在表格的最後一列套用表格樣式中的樣式 末欄 : 在表格的最後一欄套用表格樣式中的樣式 105/117 106/117 套用樣式後的表格 9-3-3 平均分配欄寬與列高 平均分配欄寬和列高會依據表格來長度和寬度來平均分配, 前面提過 FrontPage 新版會自動根據文字的多寡來調整表格的欄寬, 因此若表格的第一列每一欄的文字字數不同, 這時表格的欄寬就會有差異 但對多數人而言, 為了視覺上的美觀會希望表格的欄寬一樣, 特別是字數差異不多的欄, 這時就可以利用 平均分配欄寬 功能, 將表格的寬度平均分配給表格中的每一欄 107/117 108/117 18
自動平均分配的設定 先選取欄位 平均分配列高則是將表格的高度平均分配給每一列, 不過這個功能使用的比較少, 因為當您變更文字或段落的列高和間距時, 列高就會自動調整而有所不同 下圖的表格中, 可以明顯的看出四個欄位的寬度並不相等 109/117 110/117 平均之後表格會變的比較整齊 設定完成 111/117 112/117 自動調整成內容大小 另一個也是自動調整欄寬的功能是 自動調整成內容大小, 不過這個功能並不常用 因為他它會依據表格中文字的多寡來設定欄寬 也就是文字有多少欄寬就差不多有多寬 這樣設定實在不太好看, 也因此不常用 9-3-4 巢狀表格的建立 最後一項要介紹的不是特定工具, 而是表格的特殊功能, 也就是 巢狀表格 所謂巢狀表格就是在一個表格中, 可以加入小表格 例如您可以在大表格的一個儲存格中加入另一個表格, 這也就是所謂的巢狀表格 若您使用表格來進行網頁的排版, 那巢狀表格的功能就會常常使用 因為最外面的大表格是用來劃分網頁的不同區域 而隨著不同區域的特性, 再利用不同的表格來進行網頁資料的排列 113/117 114/117 19
在表格中可以再插入表格 巢狀表格新增完成 115/117 116/117 新增後的結果 117/117 20