基于Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站網(wǎng)頁設(shè)計與實現(xiàn)

劉秀芹

摘要： Web標(biāo)準(zhǔn)是網(wǎng)站建設(shè)發(fā)展的必然趨勢，它可以實現(xiàn)網(wǎng)頁中結(jié)構(gòu)、表現(xiàn)、行為三者相分離，取得比傳統(tǒng)表格模式更好地訪問性能，以及降低維護(hù)成本。該文詳細(xì)分析了Web標(biāo)準(zhǔn)及其構(gòu)成，并以鍋泰吉企業(yè)網(wǎng)站為例，論述了基于Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站建設(shè)的策略，以及設(shè)計和實現(xiàn)的過程。

關(guān)鍵詞：Web標(biāo)準(zhǔn)；XHTML；CSS；DIV；企業(yè)網(wǎng)站

中圖分類號：TP312 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2013）09-2125-03

隨著網(wǎng)絡(luò)環(huán)境的不斷改善和網(wǎng)民數(shù)量的不斷增加，互聯(lián)網(wǎng)已經(jīng)成長為一個新型的媒體傳播平臺。對于企業(yè)來說，互聯(lián)網(wǎng)已經(jīng)成為必不可少的宣傳和營銷平臺，而企業(yè)網(wǎng)站則是完成企業(yè)宣傳和營銷目的的有效方式之一。傳統(tǒng)的基于表格布局的網(wǎng)頁設(shè)計已經(jīng)不能滿足Web標(biāo)準(zhǔn)下表現(xiàn)與內(nèi)容相分離的要求，因而越來越多的企業(yè)網(wǎng)站采用Web標(biāo)準(zhǔn)下基于CSS+XHTML布局的網(wǎng)頁設(shè)計，這樣也更有利于網(wǎng)站后期的改版和維護(hù)。

1 Web標(biāo)準(zhǔn)及其組成

1.1 什么是Web標(biāo)準(zhǔn)

隨著行業(yè)的不斷發(fā)展和規(guī)范，W3C（World Wide Web Consortium）和其他標(biāo)準(zhǔn)化組織制定了Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)標(biāo)準(zhǔn)主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。

1.2 Web標(biāo)準(zhǔn)的組成

Web標(biāo)準(zhǔn)由三大部分構(gòu)成：結(jié)構(gòu)、表現(xiàn)和行為。

1）結(jié)構(gòu)：

結(jié)構(gòu)用于對網(wǎng)站數(shù)據(jù)的分類及整合，主要技術(shù)包括可擴(kuò)展標(biāo)記語言（The Extensible Markup Language，XML）和可擴(kuò)展超文本標(biāo)記語言（The Extensible HyperText Markup Language，XHTML）。其中XML是一種允許用戶對自己的標(biāo)記語言進(jìn)行定義的源語言，具有強(qiáng)大的數(shù)據(jù)轉(zhuǎn)換能力，將來可以替代超文本置標(biāo)語言（HTML）。XHTML結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性，表現(xiàn)方式與HTML類似，不過語法上更加嚴(yán)格。

2）表現(xiàn)：

表現(xiàn)用于信息在瀏覽器上的顯示控制，主要技術(shù)是層疊樣式表（Cascading Style Sheet，CSS）。CSS用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計，與XHTML負(fù)責(zé)的結(jié)構(gòu)相分離。目前遵循的是CSS2，CSS對已經(jīng)被結(jié)構(gòu)化的信息進(jìn)行顯示上的控制，包含版式、顏色、大小等樣式控制。

3）行為：

行為用于用戶對網(wǎng)頁文檔的交互操作，主要技術(shù)包括文檔對象模型（Document Object Model，DOM）和ECMAScript。DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關(guān)系。ECMAScript用于實現(xiàn)具體的界面上對象的交互操作，主要是JavaScript技術(shù)。

2 Web標(biāo)準(zhǔn)下的網(wǎng)頁開發(fā)流程

第一步：語義結(jié)構(gòu)定義。在這一步我們需要根據(jù)網(wǎng)頁設(shè)計圖，進(jìn)一步分析所需要的DIV層塊，以及層塊之間的相互關(guān)系。為訪問速度的考慮，嵌套的DIV層塊最好不要超過3層。

第二步：網(wǎng)頁內(nèi)容添加。在定義好的DIV語義結(jié)構(gòu)中，根據(jù)網(wǎng)頁設(shè)計圖在對應(yīng)的DIV層塊中添加網(wǎng)頁內(nèi)容，其中包括文字、列表、表單、表單域、圖像等。

第三步：CSS美好網(wǎng)頁。使用CSS進(jìn)行頁面布局，如加入背景、邊框；進(jìn)一步使用CSS設(shè)置相關(guān)屬性，如字體、大小、對齊等。

第四步：添加動態(tài)元素。需要根據(jù)網(wǎng)頁設(shè)計圖的要求，利用JavaScript腳本語言完成動態(tài)元素的添加，其中包括焦點圖、導(dǎo)航菜單及其他動態(tài)效果。

3 Web標(biāo)準(zhǔn)在企業(yè)網(wǎng)站建設(shè)中的應(yīng)用

本文以鍋泰吉企業(yè)網(wǎng)站平臺為例，展示基于Web標(biāo)準(zhǔn)的企業(yè)網(wǎng)站建設(shè)。

3.1 結(jié)構(gòu)布局

1）文檔頭的編寫

文檔頭位于文檔的頭部，主要包括文檔說明和head標(biāo)記。這部分內(nèi)容并不會顯示在網(wǎng)頁上，但能影響到網(wǎng)頁的全局設(shè)置和后期搜索引擎查找。我們保留自動生成的DOCTYPE說明和xmlns名字空間。Head區(qū)還定義了編碼語言、設(shè)計者、版權(quán)信息、關(guān)鍵詞、描述。Head區(qū)代碼如下：

2）結(jié)構(gòu)布局

根據(jù)案例網(wǎng)頁設(shè)計圖如圖1，網(wǎng)頁總體劃分為左、右、下三個區(qū)塊，左、右邊區(qū)塊可以根據(jù)需要進(jìn)一步嵌套區(qū)塊，整體布局結(jié)構(gòu)代碼如下：

3.2 內(nèi)容添加

根據(jù)需要在區(qū)塊中添加所需要的元素，如圖片、文本、列表、表單、圖片列表等。左邊區(qū)塊嵌套logo區(qū)塊、menu區(qū)塊、vip區(qū)塊，以及添加兩個帶有超鏈接的圖片。右邊區(qū)塊嵌套banner區(qū)塊、nav菜單區(qū)塊、二級菜單nav2區(qū)塊、圖片列表區(qū)塊，添加圖片等。XHTML提供了豐富的標(biāo)簽用于排版，選擇合適的標(biāo)簽可以節(jié)省很多的代碼，讓進(jìn)一步的樣式設(shè)置更容易。

3.3 樣式設(shè)置

1）CSS reset

XHTML標(biāo)簽在瀏覽器里有默認(rèn)的樣式，但不同瀏覽器的默認(rèn)樣式之間會有差別。在切換頁面的時候，瀏覽器的默認(rèn)樣式往往會給我們帶來麻煩，影響開發(fā)效率。所以解決的方法就是，通過重新定義標(biāo)簽樣式“覆蓋”瀏覽器的CSS默認(rèn)屬性。這就是CSS reset。根據(jù)筆者自己的習(xí)慣，采用如下CSS reset代碼：

2）區(qū)塊布局

當(dāng)然整個網(wǎng)頁的設(shè)計不可能經(jīng)過三步一次完成，設(shè)計過程往往是個螺旋式上升和完善的過程。每個具體細(xì)節(jié)部分的代碼在此不再一一贅述。

3.4 動態(tài)效果添加

JavaScript是一種基于對象且事件驅(qū)動的客戶端腳本語言，常用來給網(wǎng)頁添加動態(tài)效果和功能，比如案例網(wǎng)頁中的焦點圖功能和二級彈出導(dǎo)航菜單功能。一個完整的 JavaScript 實現(xiàn)是由以下 3 個不同部分組成的：核心（ECMAScript）、文檔對象模型和瀏覽器對象模型。

為提高JavaScript的兼容性，需要充分考慮各種瀏覽器解釋JavaScript時的不同效果，需要設(shè)計時對不同瀏覽器的解釋分別加以判斷和處理。

4 結(jié)束語

Web標(biāo)準(zhǔn)是目前國際上正在推廣的網(wǎng)站標(biāo)準(zhǔn)，Web標(biāo)準(zhǔn)中典型的應(yīng)用模式是“CSS+XHTML”，XHTML負(fù)責(zé)結(jié)構(gòu)，CSS負(fù)責(zé)表現(xiàn)，摒棄了HTML4.0中的表格定位方式，做到網(wǎng)站設(shè)計代碼更加規(guī)范，減少了網(wǎng)絡(luò)帶寬資源浪費(fèi)，加快了網(wǎng)站訪問速度，也充分考慮了對于用戶和搜索引擎的友好度。筆者在設(shè)計鍋泰吉企業(yè)網(wǎng)站時，充分遵循了Web2.0標(biāo)準(zhǔn)，做到了結(jié)構(gòu)、表現(xiàn)、行為的相分離。當(dāng)然要學(xué)好Web標(biāo)準(zhǔn)還需要我們不斷的實踐。

參考文獻(xiàn)：

[1] 葉青.網(wǎng)頁開發(fā)手記：HTML+CSS+JavaScript[M].北京：電子工業(yè)出版社，2011.

[2] 趙清華.基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用研究[J].現(xiàn)代計算機(jī)，2010（5）.

[3] 侯靜.基于Web標(biāo)準(zhǔn)的高校網(wǎng)站建設(shè)與實現(xiàn)[J].中山大學(xué)學(xué)報，2009（3）.

[4] 余躍泓.Web標(biāo)準(zhǔn)下的CSS+DIV布局初探[J].計算機(jī)光盤軟件與應(yīng)用，2012（10）.