網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程

前言

隨著互聯(lián)網(wǎng)的發(fā)展和普及，網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)技術(shù)逐漸成為一項(xiàng)重要的知識(shí)技能。大到開(kāi)發(fā)大型的Web應(yīng)用程序，小到制作個(gè)人網(wǎng)站甚至是個(gè)人博客，都需要網(wǎng)頁(yè)設(shè)計(jì)的知識(shí)。而網(wǎng)頁(yè)設(shè)計(jì)與制作技術(shù)正處于不斷的發(fā)展過(guò)程中，如今，基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)方法已經(jīng)逐漸取代了表格布局的傳統(tǒng)方法。目前很多網(wǎng)站已經(jīng)應(yīng)用Web標(biāo)準(zhǔn)對(duì)網(wǎng)站進(jìn)行重構(gòu)，許多網(wǎng)頁(yè)設(shè)計(jì)師開(kāi)始學(xué)習(xí)并應(yīng)用Web標(biāo)準(zhǔn)。這就要求改變傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)的學(xué)習(xí)內(nèi)容和方法，而基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的學(xué)習(xí)內(nèi)容強(qiáng)調(diào)對(duì)HTML和CSS代碼知識(shí)的掌握，對(duì)學(xué)習(xí)者提出了更高的要求。本書(shū)為網(wǎng)頁(yè)設(shè)計(jì)的初級(jí)和中級(jí)讀者編寫(xiě)，從零開(kāi)始，由淺入深，全面介紹：DIV+CSS網(wǎng)頁(yè)設(shè)計(jì)方法的常用知識(shí)點(diǎn)。知識(shí)點(diǎn)的介紹采用實(shí)例驅(qū)動(dòng)的方法，根據(jù)編者多年的教學(xué)實(shí)踐經(jīng)驗(yàn)，精心準(zhǔn)備了大量的實(shí)例貫穿整個(gè)介紹過(guò)程，讓讀者既能形象地掌握各知識(shí)點(diǎn)的基礎(chǔ)知識(shí)，又能迅速了解各知識(shí)點(diǎn)的具體應(yīng)用方法，從而能夠活學(xué)活用、舉一反三。本書(shū)不包括美工方面的內(nèi)容，美工方面的內(nèi)容可以在讀者對(duì)網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí)了解后再進(jìn)行學(xué)習(xí)。本書(shū)具有以下特點(diǎn)。（1）學(xué)習(xí)內(nèi)容的綜合性強(qiáng)。網(wǎng)頁(yè)設(shè)計(jì)的綜合性很強(qiáng)，需要學(xué)習(xí)的知識(shí)點(diǎn)很多。例如，網(wǎng)頁(yè)設(shè)計(jì)的三劍客每個(gè)都可以寫(xiě)一本書(shū)。為了能讓讀者在一本書(shū)中掌握設(shè)計(jì)網(wǎng)頁(yè)所需要了解的基本知識(shí)，使讀者通過(guò)本書(shū)學(xué)習(xí)設(shè)計(jì)出專業(yè)的網(wǎng)頁(yè)，書(shū)中內(nèi)容注重知識(shí)的綜合應(yīng)用。特別是最后一章的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例，把全書(shū)前面各章的內(nèi)容都綜合展示了出來(lái)。（2）實(shí)例驅(qū)動(dòng)的知識(shí)講解方法。書(shū)中每個(gè)知識(shí)點(diǎn)的講解都從實(shí)例開(kāi)始，先介紹實(shí)例實(shí)現(xiàn)的功能和網(wǎng)頁(yè)效果，然后介紹實(shí)例的實(shí)現(xiàn)方法，最后再總結(jié)實(shí)例中涉及的知識(shí)點(diǎn)。這種實(shí)例的講解方式，可以讓讀者更容易接受，學(xué)習(xí)效果也更好。

內(nèi)容概要

本書(shū)遵循Web標(biāo)準(zhǔn)，系統(tǒng)介紹應(yīng)用HTML和CSS兩個(gè)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)的知識(shí)和技巧，并介紹網(wǎng)頁(yè)制作常用的軟件。本書(shū)分為4篇：HTML篇、CSS基礎(chǔ)篇、CSS布局篇和提高篇。HTML篇介紹HTML標(biāo)記及網(wǎng)頁(yè)相關(guān)基礎(chǔ)知識(shí)；CSS基礎(chǔ)篇介紹CSS的基本思想、CSS的簡(jiǎn)單應(yīng)用實(shí)例；CSS布局篇集中介紹用CSS+DIV的網(wǎng)頁(yè)布局方法；提高篇介紹網(wǎng)頁(yè)設(shè)計(jì)中需要使用的軟件Fireworks和Flash，以及網(wǎng)頁(yè)設(shè)計(jì)中常用的Javascript技術(shù)，最后一章為一個(gè)綜合實(shí)例，用一個(gè)完整的例子展示了設(shè)計(jì)一個(gè)專業(yè)網(wǎng)頁(yè)的全過(guò)程。    本書(shū)按照實(shí)例驅(qū)動(dòng)的方式編寫(xiě)，每個(gè)知識(shí)點(diǎn)的學(xué)習(xí)以實(shí)例的形式進(jìn)行講解，便于讀者理解。本書(shū)內(nèi)容循序漸進(jìn)、深入淺出，強(qiáng)調(diào)網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范化，通過(guò)本書(shū)學(xué)習(xí)可以使讀者掌握基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)制作方法。    本書(shū)可作為高等院校各專業(yè)“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程的教材，也可供網(wǎng)頁(yè)設(shè)計(jì)、制作和開(kāi)發(fā)人員參考使用。

書(shū)籍目錄

第1篇　HTML篇　第1章　網(wǎng)頁(yè)設(shè)計(jì)概述　　1.1　基礎(chǔ)知識(shí)　　　1.1.1　網(wǎng)頁(yè)和網(wǎng)站　　　1.1.2　瀏覽器和服務(wù)器　　　1.1.3　網(wǎng)頁(yè)的基本元素　　　1.1.4　靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)　　1.2　Web標(biāo)準(zhǔn)　　　1.2.1　對(duì)標(biāo)準(zhǔn)的理解　　　1.2.2　Web標(biāo)準(zhǔn)：結(jié)構(gòu)、表現(xiàn)和行為　　1.3　網(wǎng)站整體制作流程　　　1.3.1　前期策劃　　　1.3.2　頁(yè)面細(xì)化及實(shí)施　　　1.3.3　后期維護(hù)　　1.4　靜態(tài)頁(yè)面制作流程　　1.5　影響設(shè)計(jì)的技術(shù)因素　　本章小結(jié)　　習(xí)題　第2章　HTML基礎(chǔ)　　2.1　第一個(gè)HTML頁(yè)面　　2.2　標(biāo)準(zhǔn)HTML件結(jié)構(gòu)　　2.3　HTML文本標(biāo)記　　　2.3.1　分段與換行　　　2.3.2　設(shè)置標(biāo)題　　　2.3.3　設(shè)置文字水平居中　　2.4　文字列表　　　2.4.1　有序列表標(biāo)記　　　2.4.2　無(wú)序列表標(biāo)記　　2.5　HTML屬性　　　2.5.1　align屬性　　　2.5.2　bgcolor屬性　　2.6　特殊字符的表示方法　　2.7　滾動(dòng)字幕　　2.8　輔助：利用Dreamweaver設(shè)置文本　　本章小結(jié)　　習(xí)題　第3章　圖片　　3.1　圖片格式　　3.2　在網(wǎng)頁(yè)中使用圖片　　3.3　圖片路徑　　3.4　輔助：利用Dreamweaver設(shè)置圖片　　　3.4.1　插入圖片　　　S.4.2　設(shè)置圖片屬性　　本章小結(jié)　　習(xí)題　第4章　超鏈接　　4.1　設(shè)置文字鏈接　　4.2　target和title屬性　　4.3　設(shè)置錨點(diǎn)鏈接　　4.4　圖片超鏈接　　4.5　創(chuàng)建熱點(diǎn)區(qū)域　　　4.5.1　用HTML建立熱點(diǎn)區(qū)域　　　4.5.2　輔助：利用Dreamweaver設(shè)置熱點(diǎn)區(qū)域　　本章小結(jié)　　習(xí)題　第5章　表格　　5.1　表格的基本結(jié)構(gòu)　　5.2　表格屬性　　　5.2.1　表格的寬和高　　　5.2.2　表格對(duì)齊方式　　　5.2.3　表格邊框　　　5.2.4　背景顏色與背景圖像　　　5.2.5　單元格的間距與邊距　　　5.2.6　合并單元格　　5.3　表格的結(jié)構(gòu)標(biāo)記　　5.4　表格布局實(shí)例　　本章小結(jié)　　習(xí)題　第6章　框架　　6.1　創(chuàng)建框架和框架集　　6.2　框架頁(yè)面中鏈接的打開(kāi)方式　　6.3　定義嵌入式框架　本章小結(jié)　習(xí)題　……第2篇　CSS基礎(chǔ)篇第3篇　CSS布局篇第4篇　提高篇參考文獻(xiàn)

章節(jié)摘錄

插圖：文本和圖片：是網(wǎng)頁(yè)的基本元素，最樸素的網(wǎng)頁(yè)也需要有文字或圖片來(lái)表達(dá)它的內(nèi)容。超鏈接：又分為“文字鏈接”和“圖片鏈接”，只要瀏覽者單擊帶鏈接的文字或圖片，就可以自動(dòng)鏈接上對(duì)應(yīng)的其他文件，這樣才讓浩如煙海的網(wǎng)頁(yè)能連接成一個(gè)整體，這也正是網(wǎng)絡(luò)的魅力所在。動(dòng)畫(huà)：又分為兩種，一種是GIF格式的動(dòng)畫(huà)，一種是Flash格式的動(dòng)畫(huà)。活動(dòng)的內(nèi)容總是比靜止的要吸引人的注意力，所以精彩的動(dòng)畫(huà)讓網(wǎng)頁(yè)變得更加魅力四射。表單：是一種可以在瀏覽者與服務(wù)器之間進(jìn)行信息“交流”的工具，使用表單可以完成用戶注冊(cè)、搜索、論壇、發(fā)送電子郵件等交互功能。音／視頻：隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，網(wǎng)站上面已經(jīng)不再僅僅是單調(diào)的MIDI背景音樂(lè)，而豐富多彩的網(wǎng)絡(luò)電視、網(wǎng)絡(luò)音樂(lè)等已經(jīng)開(kāi)始成為網(wǎng)絡(luò)新潮流。靜態(tài)網(wǎng)頁(yè)就是純粹的HTML頁(yè)面，網(wǎng)頁(yè)的內(nèi)容是固定的、不變的。網(wǎng)頁(yè)一經(jīng)編寫(xiě)完成，其顯示效果就確定了。動(dòng)態(tài)網(wǎng)頁(yè)是內(nèi)容根據(jù)具體情況變化的網(wǎng)頁(yè)，它一般根據(jù)網(wǎng)頁(yè)的輸人參數(shù)和數(shù)據(jù)庫(kù)中內(nèi)容的變化而變化。前面所講網(wǎng)頁(yè)元素表單即是為實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)而設(shè)計(jì)的。如果在某位用戶登錄后，要出現(xiàn)一個(gè)網(wǎng)頁(yè)，顯示“你好，用戶”，如張三登錄后可以看到一個(gè)網(wǎng)頁(yè)顯示“你好，張三”，而李四登錄后見(jiàn)到的內(nèi)容是“你好，李四”。如果要滿足上面的要求，需要做兩個(gè)靜態(tài)頁(yè)面，但如果有1萬(wàn)個(gè)用戶甚至10萬(wàn)個(gè)用戶的時(shí)候，顯然不可能提前做好那么多的頁(yè)面，這就需要應(yīng)用動(dòng)態(tài)頁(yè)面技術(shù)來(lái)實(shí)現(xiàn)這樣的功能。靜態(tài)頁(yè)面技術(shù)是動(dòng)態(tài)頁(yè)面技術(shù)的基礎(chǔ)，本書(shū)主要介紹靜態(tài)頁(yè)面的設(shè)計(jì)方法，為了給讀者學(xué)習(xí)動(dòng)態(tài)頁(yè)面設(shè)計(jì)技術(shù)打下基礎(chǔ)，本書(shū)注重介紹靜態(tài)頁(yè)面的程序代碼，因?yàn)閯?dòng)態(tài)頁(yè)面技術(shù)需要設(shè)計(jì)者能夠從代碼角度理解網(wǎng)頁(yè)。

編輯推薦

《網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程》：原理與技術(shù)的完美結(jié)合，教學(xué)與科研的最新成果，語(yǔ)言精練，實(shí)例豐富，可操作性強(qiáng)，實(shí)用性突出。

圖書(shū)封面

評(píng)論、評(píng)分、閱讀與下載

---

    網(wǎng)頁(yè)設(shè)計(jì)實(shí)例教程 PDF格式下載

---