基于Web標準的網站前臺設計

蘇晨 高斐 陳梅

摘要：隨著社會和網絡技術的發展，對網站前臺的設計與制作也越來越多。文章論述了符合網站前臺制作的Web標準，并從Web標準出發，通過HTML代碼實現網站前臺的內容和結構，通過CSS代碼實現相關內容的樣式，通過JavaScript代碼實現頁面的動態效果，以一個真實案例說明了對網站前臺的制作實現過程，體現了Web標準的優勢。

關鍵詞：網站前臺；Web標準；HTML；CSS

中圖分類號：TP37 文獻標識碼：A 文章編號：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 概述

而網站前臺是指展現給訪問者的所有頁面，是面向網站訪問用戶而言，通俗的說也就是給訪問網站的人看的內容和頁面，用戶可以通過對網站前臺的訪問來瀏覽公開發布的內容，如企業或公司概況介紹、新聞信息、產品信息、企業聯系方式、提交留言等內容。近年來，隨著社會和網絡的發展，網站前臺制作的需求越來越大，所以網站前臺的實現問題也越來越重要。

對于簡單的網站前臺的制作，網頁部分的內容實現可以通過Dreamweaver軟件的可視化視圖方式來實現，但是這種實現方式存在著很多問題，比如在預覽網頁時網頁元素會出現錯位、不能靈活地控制網頁元素的樣式等方面的問題等。

2 Web標準

隨著科技的發展，在越來越開放的環境中，各個相互關聯的事物要能夠協同工作，就必須遵守一些共同的標準來工作。“Web標準”也是互聯網領域中的標準，但它并不是一個標準，而是一系列標準的集合。而網頁的相關技術走入實用階段僅短短十幾年的時間，就發生了很多重要的變化，其中最重要的一點是“Web標準”這一理念被廣泛地接受。

網頁的構成主要由三部分：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括JavaScript等。在這三部分中，決定了XHTML和XML來實現網頁的結構和內容，CSS實現網頁的表現樣式，JavaScript來控制網頁的行為。而且這三部分被明確后，產生了一個重要的思想，那就是三者的分離，這樣會對網頁的制作帶來很大好處。比如在確定網頁內容的情況下，如果只想改變內容的表現形式，那就無需改變HTML代碼，只需改變CSS代碼即可，這樣可以隨時在不改變HTML結構的情況下來修改網頁的樣式。所以在網站前臺的實現過程中，借助相關的軟件平臺，遵循Web標準來書寫（X）HTML和CSS代碼實現頁面的內容和樣式，是一種好的選擇。

3 整體設計思路

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

4 頁面的制作與實現

正如以上所講，在網站前臺的制作過程中，基本上需要五個主要步驟，其中最重要的部分是第四和第五部分的制作實現。下面以一個具體的真實案例——天津吉爾祥鋼鐵銷售網站，來說明網站前臺的代碼制作實現過程。

1） 準備工作

首先根據客戶要求設計并制作出頁面效果圖，并將所用到的圖片和Flash動畫等素材準備好，放入相應的文件夾中。然后使用Notepad、VS、TopStyle等軟件工具，書寫（X）HTML、DIV+CSS、JavaScript等代碼實現頁面效果。

2） 頁頭內容的代碼實現

在該鋼鐵銷售公司的網站中，頁頭的內容包括了公司的Logo、Banner、導航條以及Flash動畫等。在實現頁頭內容的過程中，首先根據內容書寫HTML代碼，實現對基本內容的添加，其中的Logo及其“聯系我們”部分代碼如下圖1所示。從圖1中的代碼可以看出，該部分內容的HTML代碼部分主要是通過DIV盒子來實現的，在此基礎上，再書寫CSS樣式表代碼來實現對各個DIV內容的樣式添加。

有關導航條部分是通過

和
• 代碼實現的，并將其放在
  盒子中，如圖2所示。

  3） 頁面中間部分內容的實現

  在頁面中間的內容部分，通過將內容分為兩欄來實現，也就是所謂的布局模式中的1-2-1布局。頁面布局模式圖如圖3所示。

  其中圖4中的主要內容部分，主要包括網站的各種鋼管的現貨資源，在側邊欄中主要包括對公司的簡單介紹以及具體聯系方式和地址等。這兩欄也是通過書寫

  標記將所要的內容寫入，然后再通過添加CSS樣式表來實現相應的樣式。其中的HTML代碼部分省略，現將CSS樣式表的部分代碼內容摘錄如圖5所示。產品展示部分是圖片動態滾動效果，是通過JavaScript代碼實現的，該部分的代碼省略。

  4） 頁腳內容的代碼實現

  頁腳內容相對較少，實現起來也相對容易些。該頁腳中的內容只包含兩行文字，所以對該部分內容來說，HTML代碼不是最重要的，重要的是CSS樣式表的代碼書寫，其中的部分代碼如圖5所示。

  5） 頁面的整體調整

  在各個部分的內容和樣式實現后，對整個頁面代碼進行調整和測試，使整個頁面能在各個主流瀏覽器下都能正確顯示，經過測試和代碼的調整，該頁面均能在火狐和IE瀏覽器中有相同的顯示效果。

  5 結論

  從以上鋼鐵銷售網站的實現過程可以看到，在書寫代碼實現網站時，由于遵從了Web標準，所以使網頁內容結構和表現樣式實現了分離。從而在不改變HTML結構和內容的前提下，能很容易地設計出多種不同的表現形式，并且可以隨時修改樣式，提高了網站制作的便利性，并有利于網站的后期維護。

  總之，在網站前臺的制作實現過程中，按照Web標準來書寫代碼可以充分體驗結構和表現分離帶來的好處。

  參考文獻：

  [1] 溫謙.CSS網頁設計[M].北京：人民郵電出版社，2016：2-5.

  [2] 未來科技.CSS+DIV網頁樣式布局從入門到精通[M].北京：水利水電出版社，2017：237.

  [3] 陸凌牛.HTML 5與CSS 3權威指南[M]. 北京.機械工業出版社，2011：3-6.

  存入我的閱覽室