隨著Internet應(yīng)用的飛速發(fā)展，大多數(shù)高校在大學(xué)生學(xué)習(xí)了計(jì)算機(jī)應(yīng)用基礎(chǔ)課程之后開(kāi)設(shè)了網(wǎng)頁(yè)設(shè)計(jì)課程。但教學(xué)內(nèi)容會(huì)根據(jù)學(xué)生專業(yè)不同而有所調(diào)整：為文科與藝術(shù)類學(xué)生所授偏向網(wǎng)頁(yè)設(shè)計(jì)知識(shí)；為理工科學(xué)生所授偏向編程知識(shí)。實(shí)際上，若同時(shí)講授網(wǎng)頁(yè)設(shè)計(jì)與編程知識(shí)，不但可以讓學(xué)生更好地進(jìn)行網(wǎng)站開(kāi)發(fā)工作，而且也符合未來(lái)藝工專業(yè)融合的學(xué)科發(fā)展方向。基于此，我們?yōu)楦叩仍盒５膹V大師生編寫(xiě)了本書(shū)。


本書(shū)從基礎(chǔ)入手，立足Zui新國(guó)際標(biāo)準(zhǔn)，重視能力培養(yǎng)，著重案例實(shí)踐；在形式上力爭(zhēng)語(yǔ)言簡(jiǎn)潔、內(nèi)容充實(shí)、排版活潑，學(xué)生學(xué)完本書(shū)后能夠掌握必備的網(wǎng)站設(shè)計(jì)知識(shí)。



由于HTML5是業(yè)界認(rèn)可的Zui新標(biāo)準(zhǔn)，因此W3C（萬(wàn)維網(wǎng)聯(lián)盟）組織不再推薦使用的一些標(biāo)簽如框架（ 標(biāo)簽），本書(shū)不再涉及。樣式設(shè)計(jì)采用了Zui新的CSS3，但由于篇幅原因，本書(shū)只講解常用的樣式屬性。為了兼顧不同專業(yè)的學(xué)生，只講解JavaScript語(yǔ)言網(wǎng)頁(yè)設(shè)計(jì)所需的程序設(shè)計(jì)基礎(chǔ)內(nèi)容。



本書(shū)采用的是目前主流的布局技術(shù)DIV+CSS布局，這種技術(shù)具備三大優(yōu)點(diǎn)：寫(xiě)代碼容易，效率高；方便修改，尤其是通過(guò)修改樣式文件快速改變網(wǎng)站外觀；代碼量少，省帶寬，適合SEO（搜索引擎優(yōu)化）。



本書(shū)由長(zhǎng)期從事網(wǎng)頁(yè)設(shè)計(jì)與編程課程教學(xué)的一線教師編寫(xiě)而成，全書(shū)共分8章：第1章~第6章是靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)，內(nèi)容包括網(wǎng)頁(yè)、網(wǎng)站和HTML基礎(chǔ)，HTML5標(biāo)簽，表格和表單，CSS3樣式，DIV+CSS布局；第7章和第8章是JavaScript編程基礎(chǔ)，主要內(nèi)容包括JavaScript語(yǔ)法基礎(chǔ)以及如何用JavaScript來(lái)實(shí)現(xiàn)與網(wǎng)頁(yè)元素的交互。學(xué)完本書(shū)所有內(nèi)容后既可以設(shè)計(jì)靜態(tài)網(wǎng)頁(yè)，又能設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁(yè)。精心設(shè)計(jì)的案例確保讀者在完成上機(jī)實(shí)驗(yàn)后能快速掌握必要的知識(shí)點(diǎn)，每章都附有形式多樣的習(xí)題供讀者自行測(cè)評(píng)，書(shū)中附錄給出了習(xí)題答案。



網(wǎng)站開(kāi)發(fā)的工具多種多樣，目前比較流行的開(kāi)發(fā)平臺(tái)有Adobe Dreamweaver、Sublime、MSCode、HBuilder、WebStorm等。每個(gè)平臺(tái)都有自己的獨(dú)特之處，但在代碼提示、輔助糾錯(cuò)方面WebStorm稍勝一籌，故我們推薦使用WebStorm。對(duì)于喜歡可視化環(huán)境的讀者，可以選擇Dreamweaver。
為了方便讀者學(xué)習(xí)，我們提供了教材的電子課件和案例代碼（可在中國(guó)鐵道出版社有限公司官網(wǎng)http://www.tdpress.com/51eds/下載），每章習(xí)題的答案參見(jiàn)附錄B。
在學(xué)習(xí)本書(shū)的過(guò)程中，應(yīng)注意以下幾點(diǎn)：



1．重視對(duì)HTML、CSS和JavaScript內(nèi)容的理解



雖然代碼提示和可視化開(kāi)發(fā)環(huán)境使很多代碼可以自動(dòng)完成，但還是建議讀者盡量理解網(wǎng)頁(yè)元素、樣式和JavaScript的真正含義。例如，標(biāo)簽和樣式的完整英文單詞意思，JavaScript語(yǔ)言中標(biāo)識(shí)符的英文含義，只有這樣才能加深理解，使用時(shí)信手拈來(lái)，更精確地控制網(wǎng)頁(yè)的實(shí)際顯示效果。
2．重點(diǎn)學(xué)習(xí)方法并應(yīng)用于實(shí)際



在學(xué)習(xí)案例時(shí)要舉一反三，將更多的知識(shí)點(diǎn)訴諸實(shí)踐。只有掌握了方法，遇到新需求時(shí)才能靈活應(yīng)對(duì)，例如，掌握了盒子的布局原理后，任意格局的設(shè)計(jì)就會(huì)像搭積木一樣得心應(yīng)手；看到了別人設(shè)計(jì)網(wǎng)站的效果后會(huì)想到用什么方法加以實(shí)現(xiàn)。



3．一些輔助知識(shí)和技術(shù)也是必須要掌握的
學(xué)習(xí)本書(shū)時(shí)我們假定讀者掌握了計(jì)算機(jī)基礎(chǔ)知識(shí)，如文件系統(tǒng)、圖片處理、視頻處理等必備知識(shí)，否則有的讀者會(huì)對(duì)諸如路徑參數(shù)的設(shè)置、圖片視頻格式及壓縮等知識(shí)點(diǎn)難以理解。若想進(jìn)一步提高網(wǎng)頁(yè)設(shè)計(jì)水平，需要選擇進(jìn)階教材進(jìn)一步學(xué)習(xí)。



本書(shū)是我們?cè)诟咝ｉL(zhǎng)期教學(xué)實(shí)踐的經(jīng)驗(yàn)積累，編者投入了巨大的心血并建設(shè)了課程的數(shù)字化教學(xué)資源。



本書(shū)由耿增民任主編，洪穎、邵熹雯、呂超任副主編。具體編寫(xiě)分工為：洪穎編寫(xiě)第1章和第6章，邵熹雯編寫(xiě)第2章和第5章，呂超編寫(xiě)第3章和第4章，耿增民編寫(xiě)第7章和第8章。全書(shū)由耿增民策劃、統(tǒng)稿、定稿。



網(wǎng)頁(yè)設(shè)計(jì)技術(shù)發(fā)展日新月異，由于編者水平有限，加之時(shí)間倉(cāng)促，書(shū)中疏漏與不妥之處在所難免，敬請(qǐng)廣大讀者批評(píng)指正。



編 者



2020年10月