淺談網頁設計與制作中的頁面布局

代娟娟

當今社會，互聯網的發展日新月異，網頁設計已經成為熱門領域，理所當然網頁設計與制作成為大中專院校計算機專業的一門必修課。網頁設計中，頁面布局是第一步，也是非常重要的內容之一，是制作網頁的最基本的技能，因此學會網頁的頁面布局是重中之重。下面簡單介紹兩種常用的網頁頁面布局的方法及兩種方法的優缺點的比較。

一、利用表格布局網頁

表格是網頁設計與制作的一個重要的組成部分，是最常見的網頁布局元素之一。在表格布局方面，通過設置表格及單元格的屬性，對頁面中的元素進行準確定位。下面以筆者所在學校學生上課時做的網頁“學院網站”為例來說明表格布局網頁的步驟。

第一，選擇[插入]菜單欄中[表格]命令來插入需要的表格。并對表格的參數進行設置。這里需要設置參數為“5行1列”，并在[屬性]面板中設置對齊方式為“居中對齊”。

第二，用和第一步相同的方法在第一行嵌入一個l行2列的表格，在第二行嵌入一個l行8列的表格。

第三，在第一行的嵌入表格中插入站點文件夾“images”中的圖片。然后分別在第二行、第三行表格中插入圖片。

第四，在第四行嵌入一個1行6列的表格，在嵌入表格中分別插入圖片。

第五，在第五行插入文字：關于我們l聯系我們I常見問題I站點地圖I隱私策略I用戶協議I法律聲明l誠聘英才I友情鏈接。并設置顏色為：#C C C C C C。

第六，最后設置所有表格的邊框粗細為“0”。

第七，按下F12鍵，保存網頁文件，同時打開瀏覽器查看網頁內容。

利用表格進行網頁頁面布局，可以對網頁元素進行準確定位，可以使布局更加合理。靈活地使用表格的背景、框線等屬性可以使網頁更加美觀。

二、利用框架布局頁面

1.框架的概念

框架是把瀏覽器窗口分成若干個區域，每個區域可以顯示不同的網頁文件。每個框架都是瀏覽器窗口中的一個獨立區域，在這個區域中可以顯示一個單獨的網頁而不影響其他區域中的顯示內容。使用框架可以非常方便地完成導航工作。

2.利用框架進行網頁頁面布局的步驟

下面以筆者所在學校學生課堂制作的“旅游景點介紹”為例，說明如何利用框架布局頁面。

第一，選擇[文件]菜單欄中的[新建]命令，創建一個新的頁面。

第二，選擇[插入]工具欄中[布局]任務欄中的[框架]命令，選擇下拉菜單中其中一種框架類型，如“上方固定，左側嵌套”類型。

第三，彈出[標簽輔助功能屬性]對話框，采用默認的每一個框架標題，單擊“確定”按鈕，創建框架集頁面。

第四，選擇[文件]菜單中的[保存全部]，保存框架文件及框架集文件。分別命名為“topframe.html”“leflframe.html”“mainframe.html”及“框架示例html”。

第五，單擊菜單“窗口”中的[框架]，顯示[框架]面板，在[框架]面板中，選中“mainFrame”，在[屬性]面板中將“滾動”設為“自動”。

第六，在頂部的框架中插入圖像。在左側的框架中插入一個7行1列的表格，在表格中輸入文字。

第七，在左框架的表格中選中文字，分別設置文字的超鏈接。

第八，按下F12鍵，打開瀏覽器查看網頁內容。

這個例子用框架布局整個頁面，但在框架里又嵌套了表格，這就實現了框架和表格有機結合，讓頁面布局更加靈活。

三、表格和框架的優缺點

表格是用于劃分頁面區域的。使用表格布局頁面的好處是：表格方便排列有規律、結構均勻；使用表格會使頁面結構清晰、布局整齊；表格可被絕大部分的瀏覽器所支持，具有很好的兼容性。表格的缺點是容易產生垃圾代碼，影響頁面下載時間，靈活性不大，難于修改。

框架則是用于分割瀏覽器窗口的，框架可以將一個頁面拓展為多個頁面，每個頁面都可以顯示不同的網頁。框架的優點是支持滾動條，方便導航。框架的缺點是：難以實現在不同框架中精確地對齊各個頁面元素；保存時不方便，應用范圍有限；兼容性不好，并不是所有瀏覽器都提供良好的框架支持。

使用表格和框架對網頁進行布局，各有利弊。初學者要根據不同網頁頁面的要求做出良好判斷。

四、小結

隨著互聯網的飛速發展，人們對網站的要求也日益增高。要想設計出更為優秀的網頁，頁面的布局將是一項長期的任務。

（作者單位：臨汾高級技工學校）