代娟娟

當(dāng)今社會(huì)，互聯(lián)網(wǎng)的發(fā)展日新月異，網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)成為熱門領(lǐng)域，理所當(dāng)然網(wǎng)頁(yè)設(shè)計(jì)與制作成為大中專院校計(jì)算機(jī)專業(yè)的一門必修課。網(wǎng)頁(yè)設(shè)計(jì)中，頁(yè)面布局是第一步，也是非常重要的內(nèi)容之一，是制作網(wǎng)頁(yè)的最基本的技能，因此學(xué)會(huì)網(wǎng)頁(yè)的頁(yè)面布局是重中之重。下面簡(jiǎn)單介紹兩種常用的網(wǎng)頁(yè)頁(yè)面布局的方法及兩種方法的優(yōu)缺點(diǎn)的比較。

一、利用表格布局網(wǎng)頁(yè)

表格是網(wǎng)頁(yè)設(shè)計(jì)與制作的一個(gè)重要的組成部分，是最常見的網(wǎng)頁(yè)布局元素之一。在表格布局方面，通過(guò)設(shè)置表格及單元格的屬性，對(duì)頁(yè)面中的元素進(jìn)行準(zhǔn)確定位。下面以筆者所在學(xué)校學(xué)生上課時(shí)做的網(wǎng)頁(yè)“學(xué)院網(wǎng)站”為例來(lái)說(shuō)明表格布局網(wǎng)頁(yè)的步驟。

第一，選擇[插入]菜單欄中[表格]命令來(lái)插入需要的表格。并對(duì)表格的參數(shù)進(jìn)行設(shè)置。這里需要設(shè)置參數(shù)為“5行1列”，并在[屬性]面板中設(shè)置對(duì)齊方式為“居中對(duì)齊”。

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

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

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

第五，在第五行插入文字：關(guān)于我們l聯(lián)系我們I常見問(wèn)題I站點(diǎn)地圖I隱私策略I用戶協(xié)議I法律聲明l誠(chéng)聘英才I友情鏈接。并設(shè)置顏色為：#C C C C C C。

第六，最后設(shè)置所有表格的邊框粗細(xì)為“0”。

第七，按下F12鍵，保存網(wǎng)頁(yè)文件，同時(shí)打開瀏覽器查看網(wǎng)頁(yè)內(nèi)容。

利用表格進(jìn)行網(wǎng)頁(yè)頁(yè)面布局，可以對(duì)網(wǎng)頁(yè)元素進(jìn)行準(zhǔn)確定位，可以使布局更加合理。靈活地使用表格的背景、框線等屬性可以使網(wǎng)頁(yè)更加美觀。

二、利用框架布局頁(yè)面

1.框架的概念

框架是把瀏覽器窗口分成若干個(gè)區(qū)域，每個(gè)區(qū)域可以顯示不同的網(wǎng)頁(yè)文件。每個(gè)框架都是瀏覽器窗口中的一個(gè)獨(dú)立區(qū)域，在這個(gè)區(qū)域中可以顯示一個(gè)單獨(dú)的網(wǎng)頁(yè)而不影響其他區(qū)域中的顯示內(nèi)容。使用框架可以非常方便地完成導(dǎo)航工作。

2.利用框架進(jìn)行網(wǎng)頁(yè)頁(yè)面布局的步驟

下面以筆者所在學(xué)校學(xué)生課堂制作的“旅游景點(diǎn)介紹”為例，說(shuō)明如何利用框架布局頁(yè)面。

第一，選擇[文件]菜單欄中的[新建]命令，創(chuàng)建一個(gè)新的頁(yè)面。

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

第三，彈出[標(biāo)簽輔助功能屬性]對(duì)話框，采用默認(rèn)的每一個(gè)框架標(biāo)題，單擊“確定”按鈕，創(chuàng)建框架集頁(yè)面。

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

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

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

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

第八，按下F12鍵，打開瀏覽器查看網(wǎng)頁(yè)內(nèi)容。

這個(gè)例子用框架布局整個(gè)頁(yè)面，但在框架里又嵌套了表格，這就實(shí)現(xiàn)了框架和表格有機(jī)結(jié)合，讓頁(yè)面布局更加靈活。

三、表格和框架的優(yōu)缺點(diǎn)

表格是用于劃分頁(yè)面區(qū)域的。使用表格布局頁(yè)面的好處是：表格方便排列有規(guī)律、結(jié)構(gòu)均勻；使用表格會(huì)使頁(yè)面結(jié)構(gòu)清晰、布局整齊；表格可被絕大部分的瀏覽器所支持，具有很好的兼容性。表格的缺點(diǎn)是容易產(chǎn)生垃圾代碼，影響頁(yè)面下載時(shí)間，靈活性不大，難于修改。

框架則是用于分割瀏覽器窗口的，框架可以將一個(gè)頁(yè)面拓展為多個(gè)頁(yè)面，每個(gè)頁(yè)面都可以顯示不同的網(wǎng)頁(yè)。框架的優(yōu)點(diǎn)是支持滾動(dòng)條，方便導(dǎo)航?？蚣艿娜秉c(diǎn)是：難以實(shí)現(xiàn)在不同框架中精確地對(duì)齊各個(gè)頁(yè)面元素；保存時(shí)不方便，應(yīng)用范圍有限；兼容性不好，并不是所有瀏覽器都提供良好的框架支持。

使用表格和框架對(duì)網(wǎng)頁(yè)進(jìn)行布局，各有利弊。初學(xué)者要根據(jù)不同網(wǎng)頁(yè)頁(yè)面的要求做出良好判斷。

四、小結(jié)

隨著互聯(lián)網(wǎng)的飛速發(fā)展，人們對(duì)網(wǎng)站的要求也日益增高。要想設(shè)計(jì)出更為優(yōu)秀的網(wǎng)頁(yè)，頁(yè)面的布局將是一項(xiàng)長(zhǎng)期的任務(wù)。

（作者單位：臨汾高級(jí)技工學(xué)校）