網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)在網(wǎng)站建設(shè)中的研究與應(yīng)用經(jīng)驗(yàn)分析

楊瑞梅

(重慶應(yīng)用技術(shù)職業(yè)學(xué)院，重慶 401520)

網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)在網(wǎng)站建設(shè)中的研究與應(yīng)用經(jīng)驗(yàn)分析

楊瑞梅

(重慶應(yīng)用技術(shù)職業(yè)學(xué)院，重慶 401520)

網(wǎng)絡(luò)技術(shù)不斷發(fā)展，網(wǎng)站建設(shè)量也隨之增加，促進(jìn)了網(wǎng)絡(luò)企業(yè)的發(fā)展。網(wǎng)站承載著較多的信息，應(yīng)用了多種技術(shù)，可以給人們提供多樣化的信息。網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)是網(wǎng)站建設(shè)的基礎(chǔ)，對網(wǎng)站整體效果具有很大影響。方便、簡潔的網(wǎng)頁設(shè)計(jì)，不僅可以加強(qiáng)搜索引擎管理與工程管理，還可以提高網(wǎng)站的兼容性，促進(jìn)網(wǎng)站后期維護(hù)工作的開展。

網(wǎng)頁標(biāo)準(zhǔn)化；網(wǎng)站建設(shè)；應(yīng)用經(jīng)驗(yàn)

1 概述

1.1 定義

Web標(biāo)準(zhǔn)是引導(dǎo)網(wǎng)站建設(shè)和實(shí)踐的主要操作方法，主要由網(wǎng)頁設(shè)計(jì)技術(shù)規(guī)范、設(shè)計(jì)原理內(nèi)容及網(wǎng)站設(shè)計(jì)各方面定義等組成，給人們提供了網(wǎng)頁設(shè)計(jì)參考。從Web特點(diǎn)上分析，網(wǎng)頁標(biāo)準(zhǔn)與內(nèi)容規(guī)范具有一致性，不僅可以指導(dǎo)萬維網(wǎng)，還可以將部分內(nèi)容擴(kuò)展到互聯(lián)網(wǎng)，對網(wǎng)絡(luò)服務(wù)器管理與設(shè)計(jì)等內(nèi)容均產(chǎn)生了巨大影響。經(jīng)過分析發(fā)現(xiàn)，網(wǎng)頁標(biāo)準(zhǔn)主要由網(wǎng)頁開發(fā)工具、習(xí)慣用法、廠商獨(dú)有技術(shù)及非標(biāo)準(zhǔn)、標(biāo)準(zhǔn)發(fā)布等因素組成。網(wǎng)絡(luò)標(biāo)準(zhǔn)化設(shè)計(jì)的核心就是區(qū)分網(wǎng)頁與文檔。網(wǎng)頁一般從美學(xué)角度上給人們呈現(xiàn)較強(qiáng)的內(nèi)容，可以實(shí)現(xiàn)文檔內(nèi)容向美學(xué)的擴(kuò)展，滿足了廣大讀者群體的實(shí)際需求，由文檔結(jié)構(gòu)、行為與表現(xiàn)等內(nèi)容組成。結(jié)構(gòu)式語言標(biāo)準(zhǔn)主要由HTML和XML組成，表現(xiàn)語言為CSS，行為標(biāo)準(zhǔn)包含了用戶模型。

1.2 網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)使用的優(yōu)勢

第一，從使用者角度分析。網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)符合使用者的使用習(xí)慣，設(shè)計(jì)出的網(wǎng)站更加方便快捷，而且操作速度較快。簡而言之，Web標(biāo)準(zhǔn)設(shè)計(jì)的網(wǎng)頁是標(biāo)準(zhǔn)的原始結(jié)構(gòu)，可以方便用戶進(jìn)行相關(guān)信息的搜索，而且可以及時(shí)對相關(guān)信息進(jìn)行評估，索引較準(zhǔn)確。網(wǎng)頁良好的標(biāo)準(zhǔn)就是是否缺少CSS的支持，同時(shí)可有序的展示信息，給用戶提供較多的便利，能夠使用不同設(shè)備進(jìn)行操作。

第二，對使用者而言比較高效。Web標(biāo)準(zhǔn)化實(shí)現(xiàn)了內(nèi)容與樣式的分離，可以多次使用一個(gè)設(shè)計(jì)，而且必須要重新代碼，減少了不必要代碼的冗余，提高了網(wǎng)站開發(fā)速度。同時(shí)網(wǎng)頁標(biāo)準(zhǔn)化還可以實(shí)現(xiàn)腳本復(fù)用操作，此種操作方式不僅減少了工作量，同時(shí)還減輕了維護(hù)成本，只需結(jié)合網(wǎng)站建設(shè)需求，對某處代碼進(jìn)行改變即可得到理想的網(wǎng)站效果。

第三，從服務(wù)器角度分析，降低了服務(wù)器成本。隨著內(nèi)容、行為與表現(xiàn)的分離，實(shí)現(xiàn)了CSS樣式多次復(fù)用操作，減少了市場固定網(wǎng)站設(shè)計(jì)編輯器產(chǎn)生的冗余代碼問題，尤其是將其應(yīng)用到大型網(wǎng)站建設(shè)中，可以調(diào)用CSS樣式表。用戶首次訪問網(wǎng)頁時(shí)可以單獨(dú)調(diào)用一個(gè)CSS樣式表，進(jìn)而將CSS樣式保存在本地緩存中，可以利用訪問調(diào)用方式使用該樣式網(wǎng)頁，進(jìn)而方便了本地讀取操作。同時(shí)節(jié)省了大量的帶寬，減輕了硬件處理任務(wù)量和服務(wù)器負(fù)荷，實(shí)際應(yīng)用質(zhì)量較高，延長了服務(wù)器使用壽命。

2 網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)在網(wǎng)站建設(shè)中的具體應(yīng)用

2.1 使用正確的結(jié)構(gòu)化標(biāo)記

進(jìn)行網(wǎng)站建設(shè)的基礎(chǔ)性工作就是從網(wǎng)頁本質(zhì)精確定義HTML。網(wǎng)頁就是使用特定結(jié)構(gòu)利用一定內(nèi)容組成的頁面，可以供瀏覽者瀏覽，因此只有規(guī)范數(shù)學(xué)，HTML才能建設(shè)高質(zhì)量的網(wǎng)站。第一，合理選擇 。添加合理的 ，說明XHTML或使用HTML的版本，然后，瀏覽器可根據(jù)版本定義文檔類型及頁面代碼。經(jīng)過分析，XHTML1.0主要由框架型、過渡型及嚴(yán)格型組成，一般過渡型較容易被人們接受。 在Web標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中具有很大作用，只有確定正確的文檔類型，才能正常的解析并打開，進(jìn)而完整詳細(xì)的呈現(xiàn)網(wǎng)頁內(nèi)容。第二，設(shè)定空間名稱。在建設(shè)網(wǎng)站的時(shí)候，需要給文檔擬定一個(gè)合理的編輯，提醒該文檔的所屬者，例如代碼。第三，合理設(shè)置文檔元信息。合理設(shè)計(jì)文檔元信息可以精確的描述網(wǎng)頁內(nèi)容，并給其配置name屬性，設(shè)定描述網(wǎng)頁的關(guān)鍵詞，進(jìn)而方便用戶的搜索。一般設(shè)計(jì)時(shí)，可以實(shí)現(xiàn)文件頭http-equov屬性與content的結(jié)合，然后構(gòu)建網(wǎng)頁語言與編碼信息。

2.2 采用CSS設(shè)計(jì)網(wǎng)頁的具體應(yīng)用

CSS表示層疊樣式表單，是一種表現(xiàn)XML或HTML文件樣式的計(jì)算機(jī)語言。第一，CSS語法。CSS規(guī)則主要由一條或多條聲明及選擇器構(gòu)成，每條聲明中均由一個(gè)值與屬性組成。例如，h2{color：green；font-size：12px;}，此例子中，表示將h2單元中的文字顏色定義為綠色，將字體設(shè)置為12像素。h2表示選擇器，font-size與color均為屬性，green和12px表示值。第二，CSS選擇器。CSS選擇器主要由類選擇器、標(biāo)簽選擇器等組成，進(jìn)行實(shí)際設(shè)計(jì)時(shí)，可以結(jié)合需求合理選擇，養(yǎng)成良好的編程習(xí)慣。經(jīng)過分析發(fā)現(xiàn)，很多設(shè)計(jì)人員選用選擇器時(shí)，要將全部區(qū)域劃分為若干個(gè)Div，然后結(jié)合需求，選擇ID選擇器和Div樣式，此種操作不符合編程習(xí)慣，而且會(huì)出現(xiàn)很多問題。在實(shí)際編輯中，必須區(qū)分ID選擇器與類選擇器，為了所有文檔XHTML標(biāo)簽均為CSS樣式，在操作中不能重復(fù)使用ID選擇器。如果選擇XHTML文檔時(shí)使用了ID選擇器，就會(huì)將CSS樣式指定給特定的標(biāo)簽。第三，目前在科學(xué)技術(shù)的帶動(dòng)下，智能手機(jī)和平板電腦逐漸普及，給用戶提供了多種類別的瀏覽器。但是由于不同瀏覽器對web標(biāo)準(zhǔn)的默認(rèn)值不同，因此，在編輯或創(chuàng)建CSS時(shí)，可以使用Adobe Dream weaver中的測試工具，對不同瀏覽器的兼容性進(jìn)行測試。同時(shí)還要合理使用Css Hsck，根據(jù)不同瀏覽器的特點(diǎn)，書寫各種樣式的CSS，進(jìn)而符合不同瀏覽器的瀏覽需求，滿足用戶需求。

2.3 使用DIV+CSS方法進(jìn)行頁面布局

傳統(tǒng)HTML代碼編寫中，主要利用表格完成頁面布局。實(shí)際設(shè)計(jì)時(shí)，為了營造較強(qiáng)的頁面布局效果，會(huì)嵌套大量的表格，因此導(dǎo)致HTML文檔結(jié)構(gòu)較混亂，這種大量操作不僅讓文檔中含有較多的表格，而且頁面節(jié)數(shù)不斷增加，將頁面與表格雜糅在一起。隨著Web的出現(xiàn)，將

3 Web標(biāo)準(zhǔn)化設(shè)計(jì)中容易出現(xiàn)的問題

第一，DIV+CSS為Web標(biāo)準(zhǔn)。此種問題在實(shí)際設(shè)計(jì)中很容易被人們誤解，實(shí)際上DIV+CSS只是進(jìn)行網(wǎng)站編寫的一種技術(shù)手段，但不能涵蓋所有Web標(biāo)準(zhǔn)。Web標(biāo)準(zhǔn)不僅可實(shí)現(xiàn)HTML到XHTML的轉(zhuǎn)變，而且結(jié)構(gòu)較清晰，實(shí)現(xiàn)了內(nèi)容的分離，但DIV+CSS僅僅可實(shí)現(xiàn)此種思想。實(shí)際分析可以發(fā)現(xiàn)，較多符合標(biāo)準(zhǔn)頁面要求的設(shè)計(jì)均使用DIV+CSS制作。

第二，Web標(biāo)準(zhǔn)不使用表格。實(shí)現(xiàn)Web標(biāo)準(zhǔn)并不是不使用

第三，將通過驗(yàn)證作為網(wǎng)頁設(shè)計(jì)的主要目的。為了規(guī)范Web標(biāo)準(zhǔn)的推廣應(yīng)用，W3W官方網(wǎng)站中給予了代碼效驗(yàn)操作，可以了解設(shè)計(jì)網(wǎng)頁是否符合Web標(biāo)準(zhǔn)。但是，需要注意的是，W3W效驗(yàn)的提供，僅僅可以幫助更多的網(wǎng)站設(shè)計(jì)者及時(shí)對XHTML代碼的書寫規(guī)范程度進(jìn)行分析，CSS屬于CSS2范疇。代碼標(biāo)準(zhǔn)只是實(shí)現(xiàn)網(wǎng)頁標(biāo)準(zhǔn)化的基礎(chǔ)，并不能表示實(shí)現(xiàn)了標(biāo)準(zhǔn)化。通常設(shè)計(jì)完成后，還要從網(wǎng)頁結(jié)構(gòu)、多種設(shè)備及瀏覽速度等了解網(wǎng)頁設(shè)計(jì)的目的。

[1] 朱雙六. 網(wǎng)頁設(shè)計(jì)無障礙標(biāo)準(zhǔn)應(yīng)用[J]. 信息技術(shù)與標(biāo)準(zhǔn)化，2015，(04)：126.

[2] 黃麗達(dá). 關(guān)于網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)在網(wǎng)站建設(shè)中的研究及應(yīng)用探討[J]. 數(shù)字技術(shù)與應(yīng)用，2014，(03)：99-100.

[3] 張建淳. 標(biāo)準(zhǔn)化網(wǎng)頁界面的交互設(shè)計(jì)模式研究[J]. 藝術(shù)與設(shè)計(jì)(理論)，2014，(07)：47-49.

[4] 李克鋒. 探析網(wǎng)頁標(biāo)準(zhǔn)化設(shè)計(jì)在網(wǎng)站建設(shè)中的研究與應(yīng)用[J]. 電子技術(shù)與軟件工程， 2014，(05)：50-51.

Analysis of research and application of webpage standardization design in website construction

YANG Rui-mei

(Chongqing Vocational College of Applied Technology, Chongqing 401520, China)

With the development of network technology, the construction of website has been increasing, which has promoted the development of network enterprise. Website carries more information with application of a variety of technologies, which can provide people with a variety of information. Webpage standardization design is the basis of standardized construction, which has a great impact on overall effect of the website. Convenient and concise webpage design, can not only strengthen the search engine management and project management, but also can improve the compatibility of the site and promote the post-maintenance.

Webpage standardization; Website construction; Application experience

2016-09-23

楊瑞梅(1982-)，女，學(xué)士，講師。

TP393

B

1674-8646(2016)23-0140-02