淺談HTML與網頁制作

摘要：HTML是構成網頁的最主要的基本的腳本代碼，其具有制作簡單，功能強大，支持不同數據格式的文件嵌入的特點。近年來儼然人們與網站的交互變得越來越多。因此，網頁在制作的過程中就不僅只是需要考慮到實現(xiàn)功能這個簡單的事實了，涉及到各種各樣的領域。通過多個領域的結合與扎實的編程基礎方能制作出完美的網頁。

關鍵詞：HTML；關系；網頁制作

中圖分類號：TP393 文獻標識碼：A 文章編號：1007-9599 （2012） 20-0000-02

1 引言

進入二十一世紀，互聯(lián)網的普及使得人們的網絡生活變得越來越豐富多彩，而網頁也成為了人們溝通與交流的另一種渠道。經過兩年來的初步的學習和在一些簡單項目中的實戰(zhàn)，對于網頁的制作有了一些初步的了解與認知。

2 HTML與網頁制作的關系

HTML是構成網頁的基本語言，由它構成了最基本的靜態(tài)網頁，即它只是將網站的最終效果呈現(xiàn)出來，但是不能夠實現(xiàn)動態(tài)的交互功能。它將后來的整個構造框架大致搭建了出來，后續(xù)一切動態(tài)效果，數據的更新都是在此基礎之上來不斷實現(xiàn)與完善。

社會的需求顯然也不僅局限于是靜態(tài)的而已；信息的快速更新，內容的形式多種多樣化，用戶的感官上感受等等已經讓傳統(tǒng)的靜態(tài)頁面不能夠滿足需求。它能夠支持不同的語言文件的嵌入成為了它的另一個優(yōu)點，在HTML中嵌入Flash、JavaScript、多媒體等豐富了頁面內容，使其可用性不斷增強。

當今，網頁的制作是不采用原始的全部用HTML語言來編寫整個頁面，而是采用當今比價流行的CSS樣式與DIV的結合來完成整個網站的外觀制作。這就意味著在傳統(tǒng)的HTML的許多屬性不會在使用甚至已經廢除某些屬性。這種稱之為盒子模型的做法使得內容與效果基本上完全分開制作，彼此相交之處變得尤為不多。

3 網頁的制作

新推出的HTML5版本的確功能更加強大，但現(xiàn)在大部分網頁制作者還是采用HTML4.01版本，加之這兩者的基本元素區(qū)別不大，所以一般還是用這個標準來進行網頁制作。

如何做出一個完美的網頁，這是在實現(xiàn)過程中的一個核心問題。首先是要考慮網頁的外觀設計，其次是后期代碼的是實現(xiàn)。

3.1 前期設計的主要因素。第一個要素—外觀，首先必須清楚明白用戶不是技術人員，所以在技術上的炫耀對于這一類人群來說大可不必，他們的重點是最終能夠實實在在看到的效果，而不是看你的技術是多么強悍。顯而易知，感官體驗成為他們評判網頁的好壞的主要標準。即這個頁面是否足夠漂亮，特效是否很新穎，足夠新奇。作為主要消費者來說，我們的一切設計原則必須以他們的使用體驗為基準。而實際情況是從一個專業(yè)人士的眼光來看這顯然和制作者本身的感受是背道而馳。所以設計時需要不斷調查市場用戶需求，從人的視聽元素方面來考慮。即文字，背景，按鈕，圖標，顏色，導航條，影像等方面?，F(xiàn)在最常用的則是在網頁中插入JavaScript來獲得不同特效的效果和實現(xiàn)更好的人機交互界面。在外觀上需要考慮的另一個方面就版式的設計，它與其他廣告海報之類的是一個原理，需要合理的布局來考慮視覺上的效果，同時又有效的將網頁需要表現(xiàn)的內容呈現(xiàn)出來（一個網頁在用戶眼中最多停留幾秒鐘，需要考慮如何將最有用的信息在第一時間傳遞給用戶，來吸引他們的眼球）。第二個要考慮的因素就是設計這個網站的主題思想。主題鮮明更容易吸引客戶，這就需要從客戶的心理方面來考慮在不同類型主題面前，客戶更想看到什么樣的風格，同時能夠言簡意賅的向客戶傳達出網站的思想。而形式與內容同一頁是必不可少的，只有這兩者互相彌補與融合才能達到最終的效果。第三個因素則是要合理布局，能夠使設計的網站在盡快的時間內顯示出它應有的一切，而不是讓一個客戶進行長時間的等待。這會讓客戶從心理產生反感的情緒。最后巧用多媒體來豐富網頁內容，使其看起來更加多元化，實現(xiàn)更好人機交互，讓用戶覺得更加舒適與有趣。

3.2 后期制作需考慮的方面。后期網頁的設計也是一個不可或缺的一部，正如一張房屋的圖紙設計，拋開其他因素，如果永遠只能夠呈現(xiàn)在紙上，不能夠存在于現(xiàn)實之中。那等同于一張廢紙，一無是處。

后期的網頁制作需要一些編程基礎和對于基礎HTML語言的了解以及掌握。

首先是是要將網頁的效果圖和設計素材準備好。其次按照效果圖用HTML實現(xiàn)頁面布局，然后將素材放進網頁中，并添加鏈接或別的功能，最后邊做邊預覽效果，即時修改（在各個瀏覽器中不斷測試）。這就是制作一個網頁的大致流程。

眾所周知，在當今這個時代，由于商業(yè)的原因，出現(xiàn)了各種不同的瀏覽器，而html中標簽效果在各個不同的瀏覽器中的預覽效果中是迥異的，作為前臺人員在編寫過程中，標簽與屬性的使用就的使大部分能夠呈現(xiàn)一樣的效果。

從現(xiàn)在來看大部分網頁設計是使用Div與CSS相結合的樣式來實現(xiàn)一個網頁，不使用其他方案，主要是由于這個樣式來更加簡單合理，其次，當網頁被使用是，如果用其他標簽來寫或許會造成在瀏覽的時候部分元素而顯示不出的結果，同時它被搜索到的概率會降低。

如果借用盒子模型來編寫時，雖然方便，但是有利也有弊，其主要原因是DIV是層，容易浮動，所以在編寫好后預覽時讓人最頭疼的會是錯位很嚴重。

另一個就是使用外部CSS很簡潔，方便。但是在實際過程中隨著代碼量的增加，它里面有些元素會繼承父類的，一般很難檢查到；例如：

ul{

font-size：18px；}

.ly1{

color：#666666；}

• 這是最外層的文本
  • 這是第一層的文本
    • 這是第二層的文本

這里的每一個列表都會繼承上一層的屬性，即使定義單獨樣式，也會毫無明顯效果。解決這類問題的方法是，重新定義相關屬性來覆蓋繼承值或默認值。同時，要有清晰的嵌套結構和合理的命名，便于問題的發(fā)現(xiàn)和解決。

網頁內容需要隨時更新，所以外部CSS的使用使其變得很高效，在引用外部css的時候有個小技巧就是在href元素后面加一個“？V=5536”類似的標志，這樣確保在瀏覽器運行時自動識別并獲取新的頁面[5]。例如：