前 言

本書從頭到尾地講解了如何規(guī)劃、設(shè)計(jì)和制作一個(gè)簡單的個(gè)人網(wǎng)站，這是一個(gè)從概念到代碼的過程。通過講述構(gòu)建這個(gè)網(wǎng)站的策略性步驟，提供了適合于大多數(shù)項(xiàng)目的工作流程實(shí)例。讀者可以觀察網(wǎng)站是怎樣從無到有創(chuàng)建起來的。

其中涉及到網(wǎng)頁的基本原理、網(wǎng)頁設(shè)計(jì)的基本要素、網(wǎng)頁制作的工具、HTML語言（HTML5）、CSS等，還包括如何使用JavaScript實(shí)現(xiàn)網(wǎng)頁的一些特效。需要特別指出的是，由于HTML5不推薦使用Flash動(dòng)畫，本書并沒有安排專門的章節(jié)講解Adobe Flash軟件的應(yīng)用和動(dòng)畫的制作。

按照以上思路，全書內(nèi)容共分為7章。

第1章“網(wǎng)頁設(shè)計(jì)概述”介紹了網(wǎng)頁及網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)——Internet與網(wǎng)頁的關(guān)系、網(wǎng)絡(luò)協(xié)議與網(wǎng)頁關(guān)系、網(wǎng)站與網(wǎng)頁的關(guān)系、網(wǎng)頁的基本元素、網(wǎng)頁設(shè)計(jì)工具等，還介紹了不同瀏覽器對(duì)網(wǎng)頁的兼容性導(dǎo)致網(wǎng)頁顯示效果的區(qū)別。

第2章“網(wǎng)站規(guī)劃與頁面布局”介紹了網(wǎng)頁設(shè)計(jì)的目標(biāo)，網(wǎng)頁設(shè)計(jì)的流程，如何設(shè)定網(wǎng)頁風(fēng)格，如何為網(wǎng)頁設(shè)計(jì)合適的色彩等內(nèi)容，并且以一個(gè)個(gè)人網(wǎng)站為例，詳細(xì)描述了網(wǎng)頁設(shè)計(jì)的過程。

第3章“網(wǎng)頁設(shè)計(jì)工具——Photoshop”介紹了如何應(yīng)用Photoshop進(jìn)行網(wǎng)頁的設(shè)計(jì)。其中包括Photoshop的基礎(chǔ)知識(shí)，以及Photoshop在網(wǎng)頁設(shè)計(jì)時(shí)的常見應(yīng)用，通過大量的實(shí)例使讀者掌握Photoshop在網(wǎng)頁設(shè)計(jì)中的實(shí)際使用。以第2章中的網(wǎng)站規(guī)劃為基礎(chǔ)展開設(shè)計(jì)，詳細(xì)描述了在Photoshop中設(shè)計(jì)網(wǎng)頁效果圖的步驟。

第4章“超文本標(biāo)記語言HTML與HTML5”包括HTML概述以及HTML5的介紹， HTML文檔的基本組成，如何在網(wǎng)頁中添加文字、圖像、音頻、視頻、表格、表單等內(nèi)容，如何使用HTML5的canvas元素在網(wǎng)頁中畫圖，在最后一節(jié)詳細(xì)展示了一個(gè)使用HTML5編寫網(wǎng)頁的例子。

第5章“可視化網(wǎng)頁制作工具——Dreamweaver”包括Dreamweaver概述，Dreamweaver的工作界面介紹以及Dreamweaver CC 2014的新功能，如何在Dreamweaver中新建和管理站點(diǎn)，如何在網(wǎng)頁中添加文字、圖像、音頻、視頻、超鏈接、表格、表單等內(nèi)容，并展示了如何不手寫代碼而盡量使用Dreamweaver提供的功能完成第4章中的例子。

第6章“CSS應(yīng)用基礎(chǔ)”介紹了CSS的概念、CSS的使用方法、CSS的基本語法，以及如何使用CSS樣式進(jìn)行美化，使第4章中只具備基礎(chǔ)結(jié)構(gòu)性元素的網(wǎng)頁變得和Photoshop設(shè)計(jì)圖的效果類似。

第7章“JavaScript應(yīng)用基礎(chǔ)”介紹了JavaScript的基本概念、JavaScript基本語法以及目前應(yīng)用最廣泛的JavaScript庫——jQuery的基本用法，還詳細(xì)講解了一個(gè)圖片輪播的綜合應(yīng)用實(shí)例。

本書的一部分參考資料來源于網(wǎng)絡(luò)，無法一一查明原作者，有些無法準(zhǔn)確列明出處，敬請(qǐng)諒解。感謝每一位具有共享精神的互聯(lián)網(wǎng)信息提供者。

由于作者水平有限，書中難免有疏漏和不妥之處，敬請(qǐng)讀者批評(píng)指正。如對(duì)本書有任何意見和建議，可通過電子郵件[email protected]與作者聯(lián)系。

本書是網(wǎng)站前端開發(fā)的入門書籍，適合剛接觸前端開發(fā)的設(shè)計(jì)人員和高等院校的本科生。

目 錄
前言

第1章 網(wǎng)頁設(shè)計(jì)概述 1
1.1 計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ) 1
1.1.1 因特網(wǎng)和萬維網(wǎng) 2
1.1.2 超文本標(biāo)記語言HTML 2
1.1.3 統(tǒng)一資源定位符URL 3
1.1.4 超文本傳輸協(xié)議（HTTP） 5
1.1.5 瀏覽器 5
1.2 網(wǎng)站與網(wǎng)頁 6
1.2.1 網(wǎng)頁的概念 6
1.2.2 網(wǎng)站的結(jié)構(gòu) 7
1.3 網(wǎng)頁的基本元素 8
1.3.1 文本 9
1.3.2 圖像 9
1.3.3 音頻 10
1.3.4 視頻 11
1.3.5 動(dòng)畫 12
1.3.6 超鏈接 12
1.4 網(wǎng)頁設(shè)計(jì)與制作方法 13
1.4.1 網(wǎng)頁制作的基本方法 13
1.4.2 網(wǎng)頁設(shè)計(jì)與制作工具 13
1.5 瀏覽器的兼容性 14
1.6 本章小結(jié) 14
第2章 網(wǎng)站規(guī)劃與頁面布局 15
2.1 網(wǎng)頁設(shè)計(jì)概述 15
2.1.1 網(wǎng)頁設(shè)計(jì)的目標(biāo) 15
2.1.2 網(wǎng)站分類 15
2.1.3 網(wǎng)頁設(shè)計(jì)流程 16
2.2 網(wǎng)站風(fēng)格 18
2.2.1 保持頁面風(fēng)格的一致性 18
2.2.2 協(xié)調(diào)運(yùn)用顏色 19
2.2.3 均衡分割版式 19
2.2.4 適當(dāng)選擇線條和形狀 19
2.2.5 選擇合適的字體 20
2.2.6 適當(dāng)美化和去除冗余 21
2.3 網(wǎng)頁布局 21
2.4 網(wǎng)頁色彩運(yùn)用 22
2.4.1 色彩基本理論 22
2.4.2 色彩的情感 24
2.4.3 色彩選擇技巧 24
2.5 綜合應(yīng)用 25
2.6 本章小結(jié) 27
第3章 網(wǎng)頁設(shè)計(jì)工具——Photoshop 28
3.1 Photoshop簡介 28
3.1.1 Photoshop CC 2014工作界面 28
3.1.2 Photoshop CC 2014新特性 31
3.2 Photoshop文件操作 31
3.2.1 新建圖像 31
3.2.2 打開圖像 32
3.2.3 保存圖像 32
3.3 Photoshop工具面板 32
3.3.1 工具面板的基本用法 32
3.3.2 工具面板的使用實(shí)例 34
3.4 控制面板 39
3.5 圖層 39
3.5.1 圖層的基本概念 39
3.5.2 圖層種類 40
3.5.3 “圖層”面板 41
3.5.4 常用的圖層操作 42
3.5.5 圖層操作實(shí)例 43
3.6 其他常用操作 43
3.6.1 旋轉(zhuǎn)和變換 43
3.6.2 標(biāo)尺和參考線 45
3.6.3 圖像調(diào)整 47
3.6.4 濾鏡 50
3.7 綜合應(yīng)用 51
3.7.1 使用柵格做布局規(guī)劃 51
3.7.2 設(shè)計(jì)Header部分 52
3.7.3 設(shè)計(jì)主體區(qū)域 55
3.7.4 設(shè)計(jì)Footer部分 60
3.8 本章小結(jié) 61
第4章 超文本標(biāo)記語言HTML與HTML5 62
4.1 HTML概述 62
4.1.1 HTML的由來 63
4.1.2 HTML的定義 63
4.1.3 HTML的特點(diǎn) 63
4.1.4 HTML的發(fā)展史 63
4.1.5 HTML5 64
4.2 HTML文檔的基本組成 64
4.2.1 聲明 65
4.2.2 標(biāo)簽 65
4.2.3 標(biāo)簽 65
4.2.4 主體內(nèi)容 67
4.2.5 HTML的書寫格式 67
4.2.6 HTML塊級(jí)元素與內(nèi)聯(lián)元素 68
4.3 文本內(nèi)容 68
4.3.1 段落：

68
4.3.2 標(biāo)題：

、

、

、

、

、

69
4.3.3

標(biāo)簽	69

4.3.4  列表	70

4.3.5  換行：

	72

4.3.6  水平線	73

4.3.7  層標(biāo)簽：
	73

4.3.8  標(biāo)簽	73

4.3.9  轉(zhuǎn)義字符	74

4.3.10  其他	75

4.4  多媒體內(nèi)容	75

4.4.1  圖像	75

4.4.2  音頻	76

4.4.3  

		

1. Java Web項(xiàng)目化設(shè)計(jì)實(shí)踐教程 [邱云 曾陳萍]
2. Python數(shù)據(jù)分析 [主編　馮志輝　趙磊　李放]
3. 大學(xué)信息技術(shù) [曾翰穎 編著]
4. 多維視域下的高校籃球教學(xué)創(chuàng)新研究 [張利超 李寧 著]
5. 創(chuàng)新創(chuàng)業(yè)訓(xùn)練實(shí)踐教程 [主編 王日華 陳武 黃喆誠]
6. 實(shí)用運(yùn)籌學(xué) [主編　邢育紅　于晉臣]
7. 電子技術(shù)（第二版） [主編 覃愛娜 李飛]
8. 勞動(dòng)爭議處理實(shí)務(wù) [主編 王秀卿 羅靜]
9. 語音識(shí)別理論與實(shí)踐 [主編　莫宏偉]
10. 武術(shù)基礎(chǔ)教程 [主編 李代勇 謝志民]
11. 畫法幾何與機(jī)械制圖習(xí)題集（多學(xué)時(shí)） [主編 趙軍]
12. 機(jī)械設(shè)計(jì)基礎(chǔ)（第二版） [主編 田亞平 李愛姣]
13. 畫法幾何與機(jī)械制圖 [主編 趙軍]
14. C語言程序設(shè)計(jì)習(xí)題與實(shí)驗(yàn)指導(dǎo)（第二版） [主編 甄增榮 張賓]
15. C語言程序設(shè)計(jì)（第二版） [主編 甄增榮 田云霞]
16. Unity3D虛擬現(xiàn)實(shí)應(yīng)用開發(fā)實(shí)踐 [主 編 劉龍]
17. 面向?qū)ο蟪绦蛟O(shè)計(jì) [主編 張勇 張平華 趙小龍]
18. 網(wǎng)絡(luò)營銷 [主編 夏薇薇 劉婷 尚潔]
19. 數(shù)據(jù)庫技術(shù)與應(yīng)用實(shí)踐教程（SQL Server 2019） [主 編 嚴(yán)暉 周肆清]
20. 功能材料制備與表征實(shí)驗(yàn)指導(dǎo)書 [龔偉平 趙軍峰 梅海娟 等編著]
21. 信號(hào)與系統(tǒng)（第二版） [主編 張宇]
22. Python 語言程序設(shè)計(jì)實(shí)踐指導(dǎo) [主編　張雙獅]
23. 基于.NET Core框架的分布式系統(tǒng)架構(gòu)設(shè)計(jì) [湯佳 著]
24. 體育舞蹈教程 [主編 劉偉 陳志明 曾明]
25. 線性代數(shù)導(dǎo)學(xué)篇 [主編 史昱]
26. 信息技術(shù)基礎(chǔ)實(shí)訓(xùn)與習(xí)題指導(dǎo)（Windows7+Office2016） [主編 周金容 唐天國]
27. 高等數(shù)學(xué)導(dǎo)學(xué)篇（下冊(cè)） [主編 李文婧 胡雷 尹金生]
28. 高等數(shù)學(xué)導(dǎo)學(xué)篇（上冊(cè)） [主編 李文婧 胡雷 尹金生]
29. 高等數(shù)學(xué)（下冊(cè)） [主編 李愛芹 胡雷 尹金生]
30. 高等數(shù)學(xué)（上冊(cè)） [主編 李愛芹 胡雷 尹金生]