基于HTML5的Web前端開(kāi)發(fā)

李小遐

摘要：HTML是互聯(lián)網(wǎng)底層的標(biāo)記語(yǔ)言，它把世界上幾乎所有的網(wǎng)站都連接在一起。隨著網(wǎng)頁(yè)技術(shù)突飛猛進(jìn)的發(fā)展，人們對(duì)網(wǎng)頁(yè)功能的要求越來(lái)越高，HTML5以代碼更加干凈和更加容易編寫等優(yōu)勢(shì)，將成為Web前端開(kāi)發(fā)的基本標(biāo)準(zhǔn)，因此也是網(wǎng)頁(yè)設(shè)計(jì)師們必備的一項(xiàng)技能。

關(guān)鍵詞：Web前端 網(wǎng)頁(yè)設(shè)計(jì) HTML HTML5

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-5349（2017）23-0198-01

一、什么是HTML

HTML即超文本標(biāo)記語(yǔ)言。超文本是一種文本，點(diǎn)擊它后便可以從一個(gè)文件跳到另一個(gè)文件，也就是指網(wǎng)頁(yè)之間相互連接的功能。標(biāo)記是一種標(biāo)記符，對(duì)普通文檔進(jìn)行布局及按常規(guī)格式設(shè)置，從字面上解釋就是被標(biāo)上標(biāo)記符的普通文檔。語(yǔ)言是指HTML，實(shí)際上是一種可以編程的語(yǔ)言。如今HTML多用于Web前臺(tái)開(kāi)發(fā)，它是網(wǎng)頁(yè)構(gòu)成的基礎(chǔ)，我們見(jiàn)到的所有網(wǎng)頁(yè)都離不開(kāi)HTML。通常一個(gè)網(wǎng)頁(yè)要對(duì)應(yīng)多個(gè)HTML文檔，其后綴名為HTML或HTM。HTML以文字為基礎(chǔ)的語(yǔ)言，不需要特定的開(kāi)發(fā)環(huán)境，可以直接在Windows自帶的記事本中編寫，HTML程序也不需要什么特定的運(yùn)行環(huán)境，可以使用Windows自帶的IE或者其他瀏覽器運(yùn)行。

二、關(guān)于HTML5

不同版本的HTML總體來(lái)說(shuō)相同之處多于不同之處，但是它們對(duì)一些類型的內(nèi)容會(huì)使用不同的標(biāo)記符。隨著網(wǎng)頁(yè)技術(shù)的發(fā)展，腳本標(biāo)記語(yǔ)言經(jīng)歷了HTML4、XHTML和HTML5。HTML4是一種穩(wěn)定并被廣泛接受的代碼集，如果比較看重瀏覽器的兼容性，HTML4則是一種比較理想的選擇。XHTML是一種非常嚴(yán)謹(jǐn)并用XML創(chuàng)建的符合HTML4標(biāo)準(zhǔn)的語(yǔ)言，它與所有支持HTML4的瀏覽器兼容。HTML5是在HTML4的基礎(chǔ)上增加了一些新功能的代碼集，尤其是在應(yīng)用程序的處理和多媒體方面有了巨大的改進(jìn)，在網(wǎng)頁(yè)的性能表現(xiàn)及網(wǎng)頁(yè)結(jié)構(gòu)的優(yōu)化上，從整體布局到細(xì)節(jié)處理更加簡(jiǎn)便與靈活，它使腳本代碼更加干凈也更容易編寫。

從廣義上來(lái)說(shuō)，HTML5包含了HTML5、CSS和JavaScript三個(gè)部分。網(wǎng)頁(yè)設(shè)計(jì)師通過(guò)HTML5語(yǔ)言把想要用戶瀏覽的文本、圖片或者音視頻等內(nèi)容呈現(xiàn)到頁(yè)面。CSS是一種用來(lái)為HTML文檔添加樣式的計(jì)算機(jī)語(yǔ)言，其作用是用來(lái)布局和美化頁(yè)面的外觀，比如可以設(shè)置網(wǎng)頁(yè)文本的字體、間距、邊距和頁(yè)面背景等屬性，可以幫助各個(gè)頁(yè)面保持整體格式的統(tǒng)一，因此當(dāng)要開(kāi)發(fā)有很多網(wǎng)頁(yè)的網(wǎng)站時(shí)，CSS會(huì)為開(kāi)發(fā)者帶來(lái)很大的便利。JavaScript是一種腳本編程語(yǔ)言，但與Java沒(méi)有任何關(guān)系，其主要功能是為網(wǎng)頁(yè)或者應(yīng)用程序提供特效功能，用戶瀏覽網(wǎng)頁(yè)時(shí)看到的自動(dòng)更換的圖片或者新聞標(biāo)題，再或者鼠標(biāo)滑過(guò)頁(yè)面時(shí)背景顏色的更換等效果，通常都是JavaScript編程語(yǔ)言的功勞。

三、基于HTML5的網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)

Web前臺(tái)設(shè)計(jì)主要是用戶瀏覽頁(yè)面部分的設(shè)計(jì)，比如所瀏覽頁(yè)面的整體風(fēng)格、顏色、頁(yè)面布局等，應(yīng)該說(shuō)Web前臺(tái)設(shè)計(jì)是網(wǎng)站設(shè)計(jì)的一種直觀的表現(xiàn)形式，其設(shè)計(jì)過(guò)程可從以下四個(gè)方面考慮。

（1）網(wǎng)頁(yè)展示內(nèi)容設(shè)計(jì)，即頁(yè)面要表現(xiàn)的主題和需要實(shí)現(xiàn)的功能。首先需要弄清楚客戶的需求，其次是在滿足客戶需求的基礎(chǔ)上要考慮站點(diǎn)的類型和性質(zhì)，比如，站點(diǎn)是屬于資訊類的還是形象類的，資訊類網(wǎng)站一般提供的瀏覽信息量大，包含的頁(yè)面數(shù)量眾多，制作前必須考慮到頁(yè)面分配、頁(yè)面之間的結(jié)構(gòu)合理性以及界面親和度等方面的設(shè)計(jì)，但是對(duì)展示中小企業(yè)形象類的網(wǎng)站，所需的容量相對(duì)較小，需要實(shí)現(xiàn)的頁(yè)面功能也較為簡(jiǎn)單，因此頁(yè)面設(shè)計(jì)主要就是通過(guò)美工來(lái)突出企業(yè)形象。

（2）弄清楚頁(yè)面設(shè)計(jì)的任務(wù)后，接下來(lái)就是如何實(shí)現(xiàn)，即制作網(wǎng)頁(yè)。首先需要對(duì)站點(diǎn)進(jìn)行規(guī)劃，可以在紙上繪制草圖來(lái)完成版面布局，將文字、圖片甚至動(dòng)畫排放在頁(yè)面指定的位置上，確定出頁(yè)面的大體輪廓，然后在計(jì)算機(jī)上編制HTML5腳本代碼將設(shè)計(jì)藍(lán)圖變?yōu)楝F(xiàn)實(shí)，當(dāng)然也可以借助可視化的開(kāi)發(fā)工具，如Dreamweaver、Fireworks等，但是可視化開(kāi)發(fā)工具自身會(huì)產(chǎn)生大量不必要的HTML代碼，這樣會(huì)為以后的頁(yè)面維護(hù)埋下隱患，因此一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)者應(yīng)該在掌握HTML語(yǔ)言的基礎(chǔ)上，進(jìn)一步熟練使用可視化開(kāi)發(fā)工具，從而達(dá)到快速制作網(wǎng)頁(yè)和優(yōu)化網(wǎng)頁(yè)的目的。

（3）網(wǎng)頁(yè)的整體效果至關(guān)重要。在設(shè)計(jì)中要注意各個(gè)頁(yè)面構(gòu)成元素的搭配效果，頁(yè)面上的元素必須通過(guò)點(diǎn)、線、面的組合與搭配來(lái)構(gòu)造整個(gè)頁(yè)面，遵循統(tǒng)一、連貫、分割、對(duì)比及和諧五大原則設(shè)計(jì)，如果將各個(gè)元素孤立、分散進(jìn)行設(shè)計(jì)，會(huì)使頁(yè)面呈現(xiàn)出凌亂的畫面效果，上述原則具體實(shí)現(xiàn)就需要使用CSS技術(shù)。除此之外，色彩的運(yùn)用也非常關(guān)鍵，設(shè)計(jì)者可以先確定一種主題色，當(dāng)然要選擇能最佳表現(xiàn)頁(yè)面主題的色調(diào)，之后再根據(jù)綜合考慮頁(yè)面的其他元素，采用相似色或反差色來(lái)完成整個(gè)頁(yè)面的配色方案。

（4）頁(yè)面的優(yōu)化。網(wǎng)頁(yè)優(yōu)化是網(wǎng)頁(yè)制作后期重要環(huán)節(jié)，它把握的好壞會(huì)影響到瀏覽速度和網(wǎng)頁(yè)的用戶體驗(yàn)度，決定著用戶對(duì)網(wǎng)站的直接印象。例如，一般來(lái)說(shuō)文字和圖片是網(wǎng)頁(yè)中最大的構(gòu)成元素，那么使用CSS樣式表指定文字的樣式就顯得非常必要。至于圖片的優(yōu)化，要在保證瀏覽質(zhì)量的前提下，將圖片的大小降到最低，可以成倍地提高網(wǎng)頁(yè)的下載速度，也可以利用圖像處理軟件將大圖切成若干個(gè)小塊，分別進(jìn)行優(yōu)化，其文件類型可以是GIF或者JPEG。

四、結(jié)語(yǔ)

優(yōu)秀的網(wǎng)頁(yè)其實(shí)可以看成是一種藝術(shù)品，頁(yè)面所產(chǎn)生的視覺(jué)效果與人的感受能達(dá)成共鳴，從而提升網(wǎng)頁(yè)的用戶體驗(yàn)。當(dāng)然，除去網(wǎng)頁(yè)制作的技術(shù)手段，更多的還需要依靠設(shè)計(jì)師的靈感和創(chuàng)新，這也是網(wǎng)頁(yè)設(shè)計(jì)能否成功的關(guān)鍵。

責(zé)任編輯：孫 瑤