基于Web標(biāo)準(zhǔn)的網(wǎng)站前臺(tái)設(shè)計(jì)

蘇晨 高斐 陳梅

摘要：隨著社會(huì)和網(wǎng)絡(luò)技術(shù)的發(fā)展，對(duì)網(wǎng)站前臺(tái)的設(shè)計(jì)與制作也越來(lái)越多。文章論述了符合網(wǎng)站前臺(tái)制作的Web標(biāo)準(zhǔn)，并從Web標(biāo)準(zhǔn)出發(fā)，通過(guò)HTML代碼實(shí)現(xiàn)網(wǎng)站前臺(tái)的內(nèi)容和結(jié)構(gòu)，通過(guò)CSS代碼實(shí)現(xiàn)相關(guān)內(nèi)容的樣式，通過(guò)JavaScript代碼實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)效果，以一個(gè)真實(shí)案例說(shuō)明了對(duì)網(wǎng)站前臺(tái)的制作實(shí)現(xiàn)過(guò)程，體現(xiàn)了Web標(biāo)準(zhǔn)的優(yōu)勢(shì)。

關(guān)鍵詞：網(wǎng)站前臺(tái)；Web標(biāo)準(zhǔn)；HTML；CSS

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）03-0191-02

Abstract：With the development of society and Network， the design and implementation of the front end website is increasing. The paper discusses the Web standard met the design and implementation of the front end website. Proceed from the Web standard，the content and structure of the front end website are realized by means of HTML code； the style of the interrelated content is realized by means of CSS code； the dynamic effect is realized by means of JavaScript code. The implementation process of the front end website is explained using a true case. The advantage on Web standard is showed.

Key words：front end website； Web standard； HTML； CSS

1 概述

而網(wǎng)站前臺(tái)是指展現(xiàn)給訪問(wèn)者的所有頁(yè)面，是面向網(wǎng)站訪問(wèn)用戶而言，通俗的說(shuō)也就是給訪問(wèn)網(wǎng)站的人看的內(nèi)容和頁(yè)面，用戶可以通過(guò)對(duì)網(wǎng)站前臺(tái)的訪問(wèn)來(lái)瀏覽公開發(fā)布的內(nèi)容，如企業(yè)或公司概況介紹、新聞信息、產(chǎn)品信息、企業(yè)聯(lián)系方式、提交留言等內(nèi)容。近年來(lái)，隨著社會(huì)和網(wǎng)絡(luò)的發(fā)展，網(wǎng)站前臺(tái)制作的需求越來(lái)越大，所以網(wǎng)站前臺(tái)的實(shí)現(xiàn)問(wèn)題也越來(lái)越重要。

對(duì)于簡(jiǎn)單的網(wǎng)站前臺(tái)的制作，網(wǎng)頁(yè)部分的內(nèi)容實(shí)現(xiàn)可以通過(guò)Dreamweaver軟件的可視化視圖方式來(lái)實(shí)現(xiàn)，但是這種實(shí)現(xiàn)方式存在著很多問(wèn)題，比如在預(yù)覽網(wǎng)頁(yè)時(shí)網(wǎng)頁(yè)元素會(huì)出現(xiàn)錯(cuò)位、不能靈活地控制網(wǎng)頁(yè)元素的樣式等方面的問(wèn)題等。

2 Web標(biāo)準(zhǔn)

隨著科技的發(fā)展，在越來(lái)越開放的環(huán)境中，各個(gè)相互關(guān)聯(lián)的事物要能夠協(xié)同工作，就必須遵守一些共同的標(biāo)準(zhǔn)來(lái)工作?！癢eb標(biāo)準(zhǔn)”也是互聯(lián)網(wǎng)領(lǐng)域中的標(biāo)準(zhǔn)，但它并不是一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。而網(wǎng)頁(yè)的相關(guān)技術(shù)走入實(shí)用階段僅短短十幾年的時(shí)間，就發(fā)生了很多重要的變化，其中最重要的一點(diǎn)是“Web標(biāo)準(zhǔn)”這一理念被廣泛地接受。

網(wǎng)頁(yè)的構(gòu)成主要由三部分：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括JavaScript等。在這三部分中，決定了XHTML和XML來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，CSS實(shí)現(xiàn)網(wǎng)頁(yè)的表現(xiàn)樣式，JavaScript來(lái)控制網(wǎng)頁(yè)的行為。而且這三部分被明確后，產(chǎn)生了一個(gè)重要的思想，那就是三者的分離，這樣會(huì)對(duì)網(wǎng)頁(yè)的制作帶來(lái)很大好處。比如在確定網(wǎng)頁(yè)內(nèi)容的情況下，如果只想改變內(nèi)容的表現(xiàn)形式，那就無(wú)需改變HTML代碼，只需改變CSS代碼即可，這樣可以隨時(shí)在不改變HTML結(jié)構(gòu)的情況下來(lái)修改網(wǎng)頁(yè)的樣式。所以在網(wǎng)站前臺(tái)的實(shí)現(xiàn)過(guò)程中，借助相關(guān)的軟件平臺(tái)，遵循Web標(biāo)準(zhǔn)來(lái)書寫（X）HTML和CSS代碼實(shí)現(xiàn)頁(yè)面的內(nèi)容和樣式，是一種好的選擇。

3 整體設(shè)計(jì)思路

在進(jìn)行網(wǎng)站前臺(tái)的制作之前，首先要了解客戶需求，明確客戶做網(wǎng)站的目的，及客戶的業(yè)務(wù)方向，根據(jù)客戶的要求及其要實(shí)現(xiàn)的功能等，確定界面的色調(diào)與布局等。其次，根據(jù)這些需求，設(shè)計(jì)網(wǎng)站的首頁(yè)，用Photoshop先設(shè)計(jì)大致的首頁(yè)界面。制作出首頁(yè)的頁(yè)面圖后，跟客戶進(jìn)行第二次溝通，征求客戶對(duì)頁(yè)面效果圖的意見，并按溝通結(jié)果進(jìn)行修改，直到客戶滿意為止。第三，在客戶對(duì)首頁(yè)設(shè)計(jì)效果圖滿意的情況下，開始切片，完成對(duì)圖片的整理。第四，按照Web標(biāo)準(zhǔn)，書寫代碼，包括使用（X）HTML、DIV+CSS、JavaScript等完成前臺(tái)界面的內(nèi)容結(jié)構(gòu)及其樣式。實(shí)現(xiàn)子頁(yè)時(shí)，也要跟客戶做簡(jiǎn)單溝通，如果沒有特別要求，要跟首頁(yè)的風(fēng)格一致。第五，在需要加入特效的位置加入特效，并測(cè)試瀏覽器的兼容性。

4 頁(yè)面的制作與實(shí)現(xiàn)

正如以上所講，在網(wǎng)站前臺(tái)的制作過(guò)程中，基本上需要五個(gè)主要步驟，其中最重要的部分是第四和第五部分的制作實(shí)現(xiàn)。下面以一個(gè)具體的真實(shí)案例——天津吉爾祥鋼鐵銷售網(wǎng)站，來(lái)說(shuō)明網(wǎng)站前臺(tái)的代碼制作實(shí)現(xiàn)過(guò)程。

1） 準(zhǔn)備工作

首先根據(jù)客戶要求設(shè)計(jì)并制作出頁(yè)面效果圖，并將所用到的圖片和Flash動(dòng)畫等素材準(zhǔn)備好，放入相應(yīng)的文件夾中。然后使用Notepad、VS、TopStyle等軟件工具，書寫（X）HTML、DIV+CSS、JavaScript等代碼實(shí)現(xiàn)頁(yè)面效果。

2） 頁(yè)頭內(nèi)容的代碼實(shí)現(xiàn)

在該鋼鐵銷售公司的網(wǎng)站中，頁(yè)頭的內(nèi)容包括了公司的Logo、Banner、導(dǎo)航條以及Flash動(dòng)畫等。在實(shí)現(xiàn)頁(yè)頭內(nèi)容的過(guò)程中，首先根據(jù)內(nèi)容書寫HTML代碼，實(shí)現(xiàn)對(duì)基本內(nèi)容的添加，其中的Logo及其“聯(lián)系我們”部分代碼如下圖1所示。從圖1中的代碼可以看出，該部分內(nèi)容的HTML代碼部分主要是通過(guò)DIV盒子來(lái)實(shí)現(xiàn)的，在此基礎(chǔ)上，再書寫CSS樣式表代碼來(lái)實(shí)現(xiàn)對(duì)各個(gè)DIV內(nèi)容的樣式添加。

有關(guān)導(dǎo)航條部分是通過(guò)

和
• 代碼實(shí)現(xiàn)的，并將其放在
  盒子中，如圖2所示。

  3） 頁(yè)面中間部分內(nèi)容的實(shí)現(xiàn)

  在頁(yè)面中間的內(nèi)容部分，通過(guò)將內(nèi)容分為兩欄來(lái)實(shí)現(xiàn)，也就是所謂的布局模式中的1-2-1布局。頁(yè)面布局模式圖如圖3所示。

  其中圖4中的主要內(nèi)容部分，主要包括網(wǎng)站的各種鋼管的現(xiàn)貨資源，在側(cè)邊欄中主要包括對(duì)公司的簡(jiǎn)單介紹以及具體聯(lián)系方式和地址等。這兩欄也是通過(guò)書寫

  標(biāo)記將所要的內(nèi)容寫入，然后再通過(guò)添加CSS樣式表來(lái)實(shí)現(xiàn)相應(yīng)的樣式。其中的HTML代碼部分省略，現(xiàn)將CSS樣式表的部分代碼內(nèi)容摘錄如圖5所示。產(chǎn)品展示部分是圖片動(dòng)態(tài)滾動(dòng)效果，是通過(guò)JavaScript代碼實(shí)現(xiàn)的，該部分的代碼省略。

  4） 頁(yè)腳內(nèi)容的代碼實(shí)現(xiàn)

  頁(yè)腳內(nèi)容相對(duì)較少，實(shí)現(xiàn)起來(lái)也相對(duì)容易些。該頁(yè)腳中的內(nèi)容只包含兩行文字，所以對(duì)該部分內(nèi)容來(lái)說(shuō)，HTML代碼不是最重要的，重要的是CSS樣式表的代碼書寫，其中的部分代碼如圖5所示。

  5） 頁(yè)面的整體調(diào)整

  在各個(gè)部分的內(nèi)容和樣式實(shí)現(xiàn)后，對(duì)整個(gè)頁(yè)面代碼進(jìn)行調(diào)整和測(cè)試，使整個(gè)頁(yè)面能在各個(gè)主流瀏覽器下都能正確顯示，經(jīng)過(guò)測(cè)試和代碼的調(diào)整，該頁(yè)面均能在火狐和IE瀏覽器中有相同的顯示效果。

  5 結(jié)論

  從以上鋼鐵銷售網(wǎng)站的實(shí)現(xiàn)過(guò)程可以看到，在書寫代碼實(shí)現(xiàn)網(wǎng)站時(shí)，由于遵從了Web標(biāo)準(zhǔn)，所以使網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)和表現(xiàn)樣式實(shí)現(xiàn)了分離。從而在不改變HTML結(jié)構(gòu)和內(nèi)容的前提下，能很容易地設(shè)計(jì)出多種不同的表現(xiàn)形式，并且可以隨時(shí)修改樣式，提高了網(wǎng)站制作的便利性，并有利于網(wǎng)站的后期維護(hù)。

  總之，在網(wǎng)站前臺(tái)的制作實(shí)現(xiàn)過(guò)程中，按照Web標(biāo)準(zhǔn)來(lái)書寫代碼可以充分體驗(yàn)結(jié)構(gòu)和表現(xiàn)分離帶來(lái)的好處。

  參考文獻(xiàn)：

  [1] 溫謙.CSS網(wǎng)頁(yè)設(shè)計(jì)[M].北京：人民郵電出版社，2016：2-5.

  [2] 未來(lái)科技.CSS+DIV網(wǎng)頁(yè)樣式布局從入門到精通[M].北京：水利水電出版社，2017：237.

  [3] 陸凌牛.HTML 5與CSS 3權(quán)威指南[M]. 北京.機(jī)械工業(yè)出版社，2011：3-6.

  存入我的閱覽室