網(wǎng)頁布局技術(shù)比較與應(yīng)用優(yōu)化

摘要本文介紹了目前網(wǎng)頁布局使用的幾種主要技術(shù):表格技術(shù)、框架技術(shù)、圖像處理軟件技術(shù)、CSS+DIV技術(shù)，在對這幾種技術(shù)進(jìn)行比較的基礎(chǔ)上，提出了優(yōu)化應(yīng)用的方案。

關(guān)鍵詞網(wǎng)頁布局技術(shù);比較;優(yōu)化

網(wǎng)頁布局是開發(fā)網(wǎng)絡(luò)教育資源工作的基礎(chǔ)，目前常見的網(wǎng)頁布局技術(shù)有表格技術(shù)、框架技術(shù)、圖像處理技術(shù)和CSS+DIV技術(shù)，在實(shí)踐中諸多布局技術(shù)讓我們眼花繚亂，如何有效利用這些技術(shù)快捷地布局出優(yōu)美的網(wǎng)頁呢?

網(wǎng)頁布局技術(shù)

一、表格技術(shù)

表格即＜table＞...＜/table＞標(biāo)簽本來是用于對數(shù)據(jù)輸出格式進(jìn)行控制，后來被用于網(wǎng)頁布局，表格由于使用簡單而且靈活，是最早也是使用最廣泛的網(wǎng)頁布局技術(shù)。表格標(biāo)簽主要包含的標(biāo)簽有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup，通過對表格單元格的合并與拆分以及表格中套表格等，得到需要的布局，如圖1所示。最后在單元格中添加文字、圖形等元素，完成網(wǎng)頁制作，如圖2所示。

二、框架技術(shù)

框架即＜frame＞...＜/frame＞標(biāo)簽，它可以把屏幕分割開來的“區(qū)域”，如果網(wǎng)頁要布局成圖3的框架集中所提供的樣式，可以使用框架來實(shí)現(xiàn)。網(wǎng)絡(luò)課程布局就常采用“頂部和嵌套的左側(cè)框架”，如圖4所示。

框架中還有一個(gè)＜iframe＞標(biāo)記比較常用，但它只適用于IE，它的作用是在一個(gè)網(wǎng)頁中間插入一個(gè)框窗以顯示另一個(gè)文件。這一技術(shù)特別適合用來做網(wǎng)絡(luò)課程布局。

三、圖像處理軟件技術(shù)

Photosho、Fireworks等圖像處理軟件都提供了“切片”工具實(shí)現(xiàn)把圖形轉(zhuǎn)換為網(wǎng)頁布局。首先是在圖像處理軟件中繪制出布局圖，然后使用 切出需要實(shí)現(xiàn)交互(或者鏈接)的區(qū)域(如圖5所示)，最后轉(zhuǎn)儲為WEB格式文件。另外一種方法是把制作好的布局圖插入到Dreamweaver中，然后使用等熱點(diǎn)工具進(jìn)行交互(或者鏈接)的區(qū)域(如圖6所示)的切割。

四、CSS+DIV

CSS+DIV是網(wǎng)站標(biāo)準(zhǔn)(或稱“WEB標(biāo)準(zhǔn)”)中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格(table)布局方式的區(qū)別，XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格布局技術(shù)，而是采用CSS+DIV的方式實(shí)現(xiàn)各種布局。

CSS(Cascading Style Sheet)稱為層疊樣式表，它是用于控制網(wǎng)頁樣式，并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記語言，使用CSS目的是為了使HTML語言能夠更好適應(yīng)頁面美工設(shè)計(jì);DIV元素是用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素，DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。

網(wǎng)頁布局技術(shù)比較

一、應(yīng)用的靈活性

表格技術(shù)曾經(jīng)是最常用的網(wǎng)頁布局技術(shù)，它使用簡單而且靈活，通過表格的嵌套，可以進(jìn)行比較復(fù)雜的網(wǎng)頁布局。框架技術(shù)由于其提供了固定的布局樣式，所以適合布局一些特殊格式的網(wǎng)頁，例如網(wǎng)絡(luò)課程的布局常使用這一技術(shù)。很明顯，使用圖像處理技術(shù)布局的網(wǎng)頁優(yōu)美而緊湊，但需要具有較好的美工已經(jīng)使用圖像處理軟件的能力，非常適合復(fù)雜布局。CSS+DIV使用也比較簡單，可以進(jìn)行復(fù)雜的布局，由于相對于其他技術(shù)其缺乏直觀性，在復(fù)雜布局時(shí)，會感到比較困難。

二、布局的重構(gòu)性

無論是表格還是框架、圖形處理技術(shù)，最終生成的網(wǎng)頁布局文件是布局格式控制和網(wǎng)頁內(nèi)容混在一起，這樣當(dāng)遇到需要對網(wǎng)頁布局進(jìn)行比較大的改動甚至重新布局(稱為重構(gòu))時(shí)，以上這些技術(shù)的改動就顯得異常困難，甚至要重新制作頁面。而CSS+DIV技術(shù)布局和內(nèi)容表現(xiàn)是一個(gè)分離體，使用float和position屬性就可以輕松移動各個(gè)塊，是實(shí)現(xiàn)讓用戶動態(tài)選擇界面的功能。

三、網(wǎng)頁瀏覽

利用表格布局的網(wǎng)頁在下載的時(shí)候必須等整個(gè)表格內(nèi)容都下載完畢之后才會一次性顯示出來，而利用DIV塊的CSS布局的頁面就科學(xué)多了，各個(gè)子塊可以分別下載顯示，從而提高了頁面下載速度，搜索引擎的排名也會因此而提高。

但是，CSS+DIV布局網(wǎng)頁在IE瀏覽器里正常顯示的頁面，到火狐瀏覽器(FireFox)中卻可能面目全非，CSS+DIV還有待于各個(gè)瀏覽器廠商的進(jìn)一步支持。

網(wǎng)頁布局技術(shù)應(yīng)用優(yōu)化

一、網(wǎng)頁布局元素分類

根據(jù)WEB制作標(biāo)準(zhǔn)，我們可以把網(wǎng)頁布局中的元素分為三大類。

1.輔助布局設(shè)計(jì)元素。

輔助布局設(shè)計(jì)元素是指DIV、SPAN等，其主要功能是用來布局整個(gè)頁面，靈活使用這些元素的各種屬性，可以布局出豐富多彩的頁面。

2.結(jié)構(gòu)化元素或叫信息元素。

包括TABLE、UL、PRE、CODE類元素，它們是一種信息顯示與整理方式，例如TABLE用來顯示表格信息、UL用來顯示列化信息。

3.其他元素。

包括a、meta這樣的完全為了實(shí)現(xiàn)一些功能，添加關(guān)鍵字的META keyword，實(shí)現(xiàn)鏈接的a等。

二、網(wǎng)頁布局技術(shù)應(yīng)用優(yōu)化

首先網(wǎng)頁布局要符合WEB制作標(biāo)準(zhǔn)，即使用CSS+DIV，而不使用表格布局。但是如果純粹CSS+DIV的布局比較麻煩，尤其是DIV里面嵌套DIV，對于這種復(fù)雜的布局可以使用DIV嵌套TABLE。

這樣優(yōu)化的、符合標(biāo)準(zhǔn)的布局設(shè)計(jì)思路是，使用CSS+DIV等布局元素來制作頁面的設(shè)計(jì)布局，定位，色塊，圖片等，使用TABLE、UL等這樣的元素來顯示頁面中需要展示數(shù)據(jù)。■

(作者單位:1 廣州大學(xué)教育學(xué)院;2 廣東順德胡錦超職業(yè)技術(shù)學(xué)校)