HTML語言的網(wǎng)頁制作技巧與方法

青華

摘要：隨著社會的進(jìn)步，時(shí)代的發(fā)展，科學(xué)技術(shù)水平的不斷提高，計(jì)算機(jī)技術(shù)已經(jīng)深入到人們的生產(chǎn)生活，網(wǎng)絡(luò)在人們的日常交流中起著非常重要的作用。隨著時(shí)間的推移，信息化時(shí)代逐漸開啟，網(wǎng)頁的制作成為當(dāng)下計(jì)算機(jī)網(wǎng)絡(luò)發(fā)展的重要發(fā)展課題，關(guān)于探究網(wǎng)頁如何進(jìn)行制作，實(shí)現(xiàn)怎樣的目標(biāo)，以及如何獲取更多的用戶瀏覽，對于目前的科學(xué)技術(shù)發(fā)展非常重要。大部分高職院校的網(wǎng)頁制作課程都是以HTML語言為基礎(chǔ)，如果讓學(xué)生對該語言更加了解，那么網(wǎng)頁制作課程將不再會是學(xué)生的困難。

關(guān)鍵詞：HTML；網(wǎng)頁制作；制作技巧

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2017）30-0209-02

就目前而言，制作網(wǎng)頁的方式有多種，大致上可以分成利用不同的語言來對網(wǎng)頁制作進(jìn)行劃分，以及結(jié)合簡單編程工具的利用來直接編寫。無論采取哪種方式，都必須借助于HTML語言才能夠?qū)崿F(xiàn)網(wǎng)頁的制作。在網(wǎng)頁的制作過程中，往往會產(chǎn)生很多的問題，需要同時(shí)考慮到網(wǎng)頁設(shè)計(jì)的理論基礎(chǔ)知識以及設(shè)計(jì)的實(shí)用性，最重要的是要符合大多數(shù)用戶的使用習(xí)慣。以下從HTML語言的網(wǎng)頁制作技巧與方法進(jìn)行簡單分析，探究高職院校開展網(wǎng)頁制作課程的內(nèi)容和主要教學(xué)方式，希望能夠給以后學(xué)生進(jìn)行網(wǎng)頁制作學(xué)習(xí)的過程提供更多的幫助。

1 用HTML語言制作網(wǎng)頁的特點(diǎn)和好處

對于當(dāng)前的HTML語言應(yīng)用來講，其主要能夠?qū)崿F(xiàn)網(wǎng)頁的設(shè)計(jì)，以及跨平臺區(qū)域下網(wǎng)頁超文本語言的表達(dá)。就目前的HTML 網(wǎng)頁編程來看，網(wǎng)頁制作必須以HTML 語言為基礎(chǔ)來進(jìn)行刻畫，不然就會導(dǎo)致網(wǎng)頁內(nèi)容無法在正常的瀏覽器中顯示出來。而且現(xiàn)在的很多以HTML語言為基礎(chǔ)的網(wǎng)頁編寫，都是在經(jīng)過簡單的語言設(shè)計(jì)來實(shí)現(xiàn)的。HTML語言作為網(wǎng)頁開發(fā)的基礎(chǔ)工具，在實(shí)現(xiàn)各種網(wǎng)頁資源的整合時(shí)有著關(guān)鍵作用，同時(shí)結(jié)合文本的內(nèi)容來實(shí)現(xiàn)各類模塊的定制，，再經(jīng)過瀏覽器將這些內(nèi)容拆分，就能夠在最終的網(wǎng)頁中呈現(xiàn)出來。HTML語言的編寫非常簡單，具有非常豐富的功能。例如用HTML語言來編寫的電商網(wǎng)站，往往能夠展示出更多的色彩，動畫特效更加豐富。普通電商網(wǎng)站則沒有這種優(yōu)勢，在顯示效果上更為單一。通過構(gòu)建基礎(chǔ)網(wǎng)絡(luò)框架來搭建的電商網(wǎng)站，能夠吸引更多的客源。

HTML語言具有較為豐富的擴(kuò)展性，學(xué)生在進(jìn)行該語言的學(xué)習(xí)時(shí)，能夠通過不同內(nèi)容的擴(kuò)展來更加深入地了解到網(wǎng)頁制作過程的意義。HTML 語言所編寫的內(nèi)容通過超文本的形式進(jìn)行呈現(xiàn)，能夠?qū)崿F(xiàn)不同文本形式內(nèi)容的編譯，學(xué)生能夠根據(jù)自己的理解，以及對教師課堂教學(xué)內(nèi)容的把握，來進(jìn)行深入探索和實(shí)踐，制作出符合自己使用習(xí)慣或者自己意愿的網(wǎng)頁內(nèi)容。以網(wǎng)頁文檔內(nèi)容為基礎(chǔ)實(shí)現(xiàn)編譯，對于目前的網(wǎng)頁制作來講非常重要，能夠在自由的空間內(nèi)任意發(fā)揮，這對于HTML語言教學(xué)是非常有利的。HTML 語言對于網(wǎng)頁制作語言來講具有重要的作用，因此高職院校的教師在進(jìn)行網(wǎng)頁制作指導(dǎo)教學(xué)時(shí)，應(yīng)該首先引導(dǎo)學(xué)生進(jìn)行該類語言的學(xué)習(xí)，給以后的網(wǎng)頁制作教學(xué)打下堅(jiān)實(shí)的基礎(chǔ)，幫助學(xué)生熟練掌握HTML語言。

2 HTML語言常用的幾種技巧方法

2.1 制作網(wǎng)頁要有目的性

在網(wǎng)頁的制作過程中，首先要明確網(wǎng)頁制作的目的，應(yīng)該是基于哪種任務(wù)，需要獲得哪一類的用戶。在了解用戶正常需求的前提下，才能夠進(jìn)行網(wǎng)頁基礎(chǔ)內(nèi)容的制作。高職院校的教師在進(jìn)行HTML 語言網(wǎng)頁制作教學(xué)時(shí)，首先要讓學(xué)生明確該觀點(diǎn)，讓他們了解到網(wǎng)頁制作的基礎(chǔ)流程，對不同的用戶采用不同的針對性方案，才能夠給網(wǎng)頁制作很好的下手。學(xué)生在自主學(xué)習(xí)的過程中，要遵循老師的教導(dǎo)，認(rèn)真分析制作網(wǎng)頁的意義所在，首先明確網(wǎng)頁制作的目的，以及自己要基于哪種出發(fā)點(diǎn)進(jìn)行網(wǎng)頁制作，針對不同的用戶群出發(fā)，學(xué)生就可以實(shí)現(xiàn)更加具體的網(wǎng)頁基礎(chǔ)設(shè)計(jì)。

2.2 網(wǎng)頁要簡潔、大方

在網(wǎng)頁制作設(shè)計(jì)的過程中，不僅僅要考慮到網(wǎng)頁設(shè)計(jì)的美觀大方，同時(shí)也應(yīng)該從網(wǎng)頁設(shè)計(jì)的實(shí)用性出發(fā)，更加貼近用戶的使用習(xí)慣。通常來講，網(wǎng)頁設(shè)計(jì)的內(nèi)容要簡潔利落，讓用戶在網(wǎng)頁中實(shí)現(xiàn)不同內(nèi)容的交互。如果網(wǎng)頁中存在過多的功能，反而會給用戶帶來很大的困擾，在使用過程中難以發(fā)揮該網(wǎng)頁真正的價(jià)值，這樣的網(wǎng)頁設(shè)計(jì)和制作是非常失敗的。因此學(xué)生在進(jìn)行以HTML 語言為基礎(chǔ)的網(wǎng)頁基礎(chǔ)設(shè)計(jì)實(shí)踐時(shí)，必須能夠考慮到網(wǎng)頁設(shè)計(jì)的關(guān)鍵所在，才能夠在網(wǎng)頁的設(shè)計(jì)交互時(shí)不會發(fā)生混淆。網(wǎng)頁設(shè)計(jì)的根本目的在于其實(shí)用性，能夠讓更多的用戶有使用的價(jià)值，而不是在網(wǎng)頁的交互過程中產(chǎn)生資源的浪費(fèi)。同時(shí)網(wǎng)頁的背景顏色不應(yīng)該過于鮮明，否則就會直接影響到用戶的觀感，這對網(wǎng)頁的利用來講是非常不利的。網(wǎng)頁設(shè)計(jì)的課程教學(xué)，教師應(yīng)該讓學(xué)生從網(wǎng)頁瀏覽的內(nèi)容出發(fā)，充分結(jié)合有效的技術(shù)投資方案，在網(wǎng)頁瀏覽中有更好的效果，讓用戶將更多的目光投放在網(wǎng)頁瀏覽的有效信息中，按照網(wǎng)頁瀏覽的順序進(jìn)行內(nèi)容的調(diào)整。

2.3 巧妙的使用字體

利用HTML語言進(jìn)行網(wǎng)頁的制作時(shí)，必須有效利用網(wǎng)頁字體的使用。教師要指導(dǎo)學(xué)生了解網(wǎng)頁制作的具體過程，讓他們知道網(wǎng)頁字體對于用戶瀏覽觀感的重要意義。并且網(wǎng)頁字體要符合大部分瀏覽器用戶的使用習(xí)慣，如果瀏覽器中沒有對應(yīng)的字體，那么學(xué)生在通過HTML語言制作網(wǎng)頁的過程中，就不會顯示出對應(yīng)的字體。在這種情況下，教師可以指導(dǎo)學(xué)生通過添加第三方字體來實(shí)現(xiàn)字體標(biāo)簽的排列，這種簡單的顯示方式對于字體順序的設(shè)計(jì)是非常重要的，能夠幫助學(xué)生實(shí)現(xiàn)進(jìn)一步的學(xué)習(xí)。

2.4 在網(wǎng)頁中進(jìn)行合理的命名注釋

在進(jìn)行網(wǎng)頁內(nèi)容的設(shè)計(jì)時(shí)，教師要能夠知道學(xué)生實(shí)現(xiàn)不同網(wǎng)頁的命名，利用簡單的網(wǎng)頁基礎(chǔ)結(jié)構(gòu)，將簡單的頁面給進(jìn)行不同程度的指示，學(xué)生可以通過在代碼段添加一些注釋，來給網(wǎng)頁實(shí)現(xiàn)更加準(zhǔn)確的命名。如果是教師指導(dǎo)學(xué)生進(jìn)行團(tuán)隊(duì)合作設(shè)計(jì)，學(xué)生就應(yīng)該盡量減少網(wǎng)頁命名的差異，利用基礎(chǔ)網(wǎng)頁結(jié)構(gòu)的鋪墊來實(shí)現(xiàn)優(yōu)化管理。這種簡單的鏈接方式對于以后的網(wǎng)頁優(yōu)化設(shè)計(jì)有著非常重要的作用。網(wǎng)頁注釋的規(guī)則要盡量以英文和普通符號為主，減少中文的使用，否則容易導(dǎo)致網(wǎng)頁鏈接失效。對于網(wǎng)頁內(nèi)容的設(shè)計(jì)安排，學(xué)生要在網(wǎng)頁制作中盡量保持以簡潔為基礎(chǔ)，實(shí)現(xiàn)不同內(nèi)容功能的擴(kuò)展。因?yàn)檫@樣才能夠讓用戶瀏覽網(wǎng)頁時(shí)，通過搜索引擎搜索出的內(nèi)容更加符合實(shí)際需要，更加吸引用戶的眼球，將網(wǎng)頁的主體以鮮明的形象表現(xiàn)出來，符合網(wǎng)頁設(shè)計(jì)的結(jié)構(gòu)。endprint

2.5 合理利用表格來進(jìn)行頁面布局

通過網(wǎng)頁的布局內(nèi)容來實(shí)現(xiàn)材料的匯聚，表格就是網(wǎng)頁設(shè)計(jì)頁面布局的直接表現(xiàn)形式，能夠給網(wǎng)頁內(nèi)容的突出展現(xiàn)帶來很好的作用。實(shí)現(xiàn)網(wǎng)頁資源利用的調(diào)整，在原有頁面布局的基礎(chǔ)上合理安排網(wǎng)頁的層次結(jié)構(gòu)，給用戶以美的享受。學(xué)生在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，往往很難考慮到這些問題，因此教師必須在網(wǎng)頁布局的課堂教學(xué)中逐步進(jìn)行引導(dǎo)，利用表格來促進(jìn)頁面布局的實(shí)現(xiàn)。利用不同元素來形成良好的視覺效果，在適當(dāng)位置安排一些空白，更多的展現(xiàn)出網(wǎng)頁布局的主體所在，讓網(wǎng)頁布局更加鮮明。不要將太多的功能添加到網(wǎng)頁中，這樣就有可能會對網(wǎng)頁設(shè)計(jì)的整體效果造成破壞，網(wǎng)頁設(shè)計(jì)布局存在嚴(yán)重問題。例如，教師在指導(dǎo)學(xué)生學(xué)習(xí)時(shí)，可以讓剛開始進(jìn)行HTML語言學(xué)習(xí)的學(xué)生利用表格來完成頁面布局。學(xué)生遇到HTML語言制作網(wǎng)頁不懂的情況下，完全可以通過表格來形成簡單的框架結(jié)構(gòu)。因?yàn)轫撁娌季滞m合新手來入門，學(xué)生在不清楚網(wǎng)頁布局的特點(diǎn)時(shí)，利用表格來布局顯然更不容易出錯(cuò)。

2.6 減少多余的動畫

利用HTML 語言進(jìn)行網(wǎng)頁的設(shè)計(jì)，gif圖片是必不可少的重要組成部分，但是高職院校的學(xué)生在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)，要盡量避免過多的gif圖片使用。因?yàn)檫^多的gif圖片會給網(wǎng)頁的觀感帶來很大的影響，嚴(yán)重破壞用戶的網(wǎng)頁體驗(yàn)，同樣的gif圖片和靜態(tài)圖片相比會帶走很大一部分視線，這對于用戶的網(wǎng)頁瀏覽是非常不利的。例如在學(xué)生在編寫教育網(wǎng)站時(shí)，如果加入過多的gif動畫，就會給人們一種不嚴(yán)謹(jǐn)?shù)母杏X，這對于教育網(wǎng)站的設(shè)計(jì)是非常不利的，會給學(xué)生帶來很大的影響。教師完全可以否決gif圖片在教育類網(wǎng)站上的設(shè)計(jì)方案。

3 結(jié)束語

無論采取哪種方式進(jìn)行網(wǎng)頁制作，都離不開HTML語言的應(yīng)用。因此在高職院校的教學(xué)中，教師要能夠引導(dǎo)學(xué)生進(jìn)行以HTML語言為基礎(chǔ)的網(wǎng)頁制作教學(xué)，制作出更加符合用戶使用習(xí)慣的網(wǎng)頁。從整體上提高用戶體驗(yàn)，某些具有突出特色的網(wǎng)頁制作技巧具有明顯的網(wǎng)頁制作效果。本文主要結(jié)合HTML語言在網(wǎng)頁制作中的應(yīng)用，指出一些簡單的網(wǎng)頁制作技巧，希望能夠給高職院校的網(wǎng)頁制作教學(xué)提供幫助，促進(jìn)學(xué)生進(jìn)行更多的網(wǎng)頁制作實(shí)踐，提高學(xué)習(xí)效率。

參考文獻(xiàn)：

[1] 朱向富.HTML語言的網(wǎng)頁制作方法和技巧[J].電子技術(shù)與軟件工程，2016（19）：67.

[2] 張鐵紅，邵波.淺談HTML語言的網(wǎng)頁制作方法與技巧[J].通訊世界，2016（1）：189.

[3] 馬俊華，張秀瓊.淺談HTML與網(wǎng)頁制作[J].計(jì)算機(jī)光盤軟件與應(yīng)用2012（20）：252-253.

[4] 蔡惠斌.HTML語言與圖書館HomePage的制作[J].大學(xué)圖書館學(xué)報(bào)，2012（4）：45-49.endprint