本書(shū)是按照教育部高等學(xué)校計(jì)算機(jī)基礎(chǔ)課程教學(xué)指導(dǎo)委員會(huì)提出的《關(guān)于進(jìn)一步加強(qiáng)高校計(jì)算機(jī)基礎(chǔ)教學(xué)的意見(jiàn)》中有關(guān)“網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)”課程的教學(xué)要求及人才培養(yǎng)的要求，針對(duì)高等學(xué)校文科（藝術(shù)類(lèi)）學(xué)生特點(diǎn)組織編寫(xiě)的。

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

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

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

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

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

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

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

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

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

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

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

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

由于作者水平有限，書(shū)中難免有疏漏和不妥之處，敬請(qǐng)讀者批評(píng)指正。如對(duì)本書(shū)有任何意見(jiàn)和建議，可通過(guò)電子郵件sunna_07@163.com與作者聯(lián)系。

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

編 者

2015年10月

前言
第1章 網(wǎng)頁(yè)設(shè)計(jì)概述 1
1.1 計(jì)算機(jī)網(wǎng)絡(luò)基礎(chǔ) 1
1.1.1 因特網(wǎng)和萬(wàn)維網(wǎng) 2
1.1.2 超文本標(biāo)記語(yǔ)言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)頁(yè) 6
1.2.1 網(wǎng)頁(yè)的概念 6
1.2.2 網(wǎng)站的結(jié)構(gòu) 7
1.3 網(wǎng)頁(yè)的基本元素 8
1.3.1 文本 9
1.3.2 圖像 9
1.3.3 音頻 10
1.3.4 視頻 11
1.3.5 動(dòng)畫(huà) 12
1.3.6 超鏈接 12
1.4 網(wǎng)頁(yè)設(shè)計(jì)與制作方法 13
1.4.1 網(wǎng)頁(yè)制作的基本方法 13
1.4.2 網(wǎng)頁(yè)設(shè)計(jì)與制作工具 13
1.5 瀏覽器的兼容性 14
1.6 本章小結(jié) 14
第2章 網(wǎng)站規(guī)劃與頁(yè)面布局 15
2.1 網(wǎng)頁(yè)設(shè)計(jì)概述 15
2.1.1 網(wǎng)頁(yè)設(shè)計(jì)的目標(biāo) 15
2.1.2 網(wǎng)站分類(lèi) 15
2.1.3 網(wǎng)頁(yè)設(shè)計(jì)流程 16
2.2 網(wǎng)站風(fēng)格 18
2.2.1 保持頁(yè)面風(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)頁(yè)布局 21
2.4 網(wǎng)頁(yè)色彩運(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)頁(yè)設(shè)計(jì)工具——Photoshop 28
3.1 Photoshop簡(jiǎn)介 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 打開(kāi)圖像 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 圖層種類(lèi) 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)記語(yǔ)言HTML與HTML5 62
4.1 HTML概述 62
4.1.1 HTML的由來(lái) 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的書(shū)寫(xiě)格式 67
4.2.6 HTML塊級(jí)元素與內(nèi)聯(lián)元素 68
4.3 文本內(nèi)容 68
4.3.1 段落：＜p＞ 68
4.3.2 標(biāo)題：＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞、＜h6＞ 69
4.3.3 ＜pre＞標(biāo)簽 69
4.3.4 列表 70
4.3.5 換行：＜br＞ 72
4.3.6 水平線 73
4.3.7 層標(biāo)簽：＜div＞ 73
4.3.8 ＜span＞標(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 ＜audio＞標(biāo)簽的屬性 77
4.4.4 視頻 77
4.4.5 ＜video＞標(biāo)簽的屬性 78
4.5 超鏈接 79
4.5.1 文字添加鏈接 79
4.5.2 修改鏈接的窗口打開(kāi)方式 79
4.5.3 給鏈接添加提示文字 80
4.5.4 錨 80
4.5.5 電子郵件鏈接 81
4.6 表格 81
4.6.1 定義和用法 81
4.6.2 表格標(biāo)題 82
4.6.3 表頭和表尾 82
4.6.4 ＜tr＞、＜th＞和＜td＞ 82
4.6.5 合并單元格 83
4.7 表單 83
4.7.1 表單的定義 83
4.7.2 文本框 84
4.7.3 文本域（多行文本） 85
4.7.4 標(biāo)簽 85
4.7.5 密碼框 85
4.7.6 單選按鈕 86
4.7.7 復(fù)選框 86
4.7.8 下拉框 86
4.7.9 按鈕 87
4.7.10 文件上傳 87
4.7.11 隱藏字段 87
4.8 HTML5表單新特性 87
4.8.1 input類(lèi)型——email 88
4.8.2 input類(lèi)型——url 88
4.8.3 input類(lèi)型——number 88
4.8.4 input類(lèi)型——range 89
4.8.5 input類(lèi)型——datepickers（日期選擇器） 89
4.8.6 input類(lèi)型——search 90
4.9 HTML5表單新屬性 90
4.9.1 autocomplete屬性 90
4.9.2 autofocus屬性 90
4.9.3 min、max和step屬性 90
4.9.4 placeholder屬性 91
4.9.5 required屬性 91
4.10 其他HTML5元素 92
4.10.1 布局元素 92
4.10.2 畫(huà)布 93
4.10.3 數(shù)據(jù)列表 94
4.10.4 拖放 95
4.11 HTML綜合應(yīng)用 95
4.11.1 頁(yè)面代碼 96
4.11.2 聲明文檔類(lèi)型 98
4.11.3 文件頭部分 98
4.11.4 頁(yè)面的主體部分 98
4.12 本章小結(jié) 100
第5章 可視化網(wǎng)頁(yè)制作工具——Dreamweaver 102
5.1 Dreamweaver基礎(chǔ) 102
5.1.1 Dreamweaver簡(jiǎn)介 102
5.1.2 Dreamweaver的工作區(qū) 103
5.1.3 Dreamweaver CC 2014新增功能 107
5.2 站點(diǎn)管理 108
5.2.1 創(chuàng)建站點(diǎn) 108
5.2.2 管理站點(diǎn) 110
5.2.3 管理站點(diǎn)中的文件 110
5.3 新建HTML文檔 111
5.3.1 創(chuàng)建新的空白文檔 111
5.3.2 以其他方式創(chuàng)建文檔 113
5.4 設(shè)置頁(yè)面屬性 113
5.5 文件頭內(nèi)容 115
5.6 文本 116
5.6.1 文本 116
5.6.2 字符 117
5.6.3 段落 117
5.6.4 標(biāo)題 118
5.6.5 列表 118
5.7 圖像 119
5.7.1 插入圖像 119
5.7.2 圖像設(shè)置 119
5.8 超鏈接 120
5.8.1 文字超鏈接 120
5.8.2 電子郵件鏈接 121
5.9 表格 121
5.9.1 插入表格 121
5.9.2 表格屬性 122
5.9.3 表格的其他操作 123
5.10 多媒體應(yīng)用 124
5.10.1 HTML5音頻 124
5.10.2 HTML5視頻 125
5.10.3 Flash SWF（視頻） 125
5.11 表單 126
5.11.1 表單 126
5.11.2 標(biāo)簽 127
5.11.3 文本域 127
5.11.4 電子郵件 129
5.11.5 密碼 129
5.11.6 單選按鈕 129
5.11.7 復(fù)選框 130
5.11.8 下拉列表 131
5.11.9 Url 131
5.11.10 Tel 131
5.11.11 搜索 131
5.11.12 數(shù)字 132
5.11.13 范圍 132
5.11.14 顏色 132
5.11.15 日期和時(shí)間 133
5.11.16 按鈕 134
5.11.17 文件 134
5.11.18 圖像按鈕 134
5.11.19 隱藏 134
5.12 結(jié)構(gòu) 134
5.13 在Dreamweaver中插入jQuery UI 134
5.14 在Dreamweaver中使用CSS 135
5.15 網(wǎng)頁(yè)制作綜合應(yīng)用 136
5.15.1 新建站點(diǎn)和文檔 136
5.15.2 設(shè)置body的樣式 136
5.15.3 header區(qū)域 137
5.15.4 主體區(qū)域 141
5.15.5 footer區(qū)域 144
5.16 本章小結(jié) 145
第6章 CSS應(yīng)用基礎(chǔ) 146
6.1 CSS概述 146
6.1.1 CSS簡(jiǎn)介 146
6.1.2 CSS的優(yōu)點(diǎn) 146
6.1.3 CSS3 147
6.2 引入CSS 148
6.2.1 在頁(yè)面中引入CSS 148
6.2.2 CSS的優(yōu)先級(jí) 150
6.3 CSS語(yǔ)法 151
6.3.1 CSS基本語(yǔ)法 151
6.3.2 選擇器 151
6.3.3 值的不同寫(xiě)法 153
6.3.4 CSS高級(jí)語(yǔ)法 153
6.4 CSS樣式 154
6.4.1 背景 154
6.4.2 文本 156
6.4.3 字體 156
6.4.4 鏈接 158
6.4.5 列表 158
6.4.6 表格 159
6.4.7 CSS尺寸 161
6.5 CSS盒模型 162
6.5.1 內(nèi)邊距 163
6.5.2 外邊距 164
6.5.3 邊框 165
6.6 CSS定位 166
6.6.1 CSS定位概述 166
6.6.2 相對(duì)定位 167
6.6.3 絕對(duì)定位 167
6.6.4 浮動(dòng) 168
6.7 CSS3新特性 169
6.7.1 邊框 169
6.7.2 背景 170
6.7.3 文本效果 172
6.7.4 字體 172
6.7.5 過(guò)渡 172
6.7.6 多列 173
6.8 CSS綜合應(yīng)用 174
6.8.1 引用外部樣式表 174
6.8.2 設(shè)置全局樣式 175
6.8.3 header樣式 176
6.8.4 主體區(qū)域 179
6.8.5 aside區(qū)域 179
6.8.6 section區(qū)域 180
6.8.7 footer區(qū)域 182
6.9 本章小結(jié) 183
第7章 JavaScript應(yīng)用基礎(chǔ) 184
7.1 JavaScript概述 184
7.1.1 JavaScript的優(yōu)點(diǎn) 184
7.1.2 常用的JavaScript庫(kù) 185
7.2 JavaScript基本語(yǔ)法 185
7.2.1 引入JavaScript 185
7.2.2 JavaScript變量和數(shù)據(jù)類(lèi)型 186
7.2.3 JavaScript注釋 187
7.2.4 JavaScript語(yǔ)句 187
7.2.5 JavaScript函數(shù)和作用域 188
7.2.6 JavaScript對(duì)象 190
7.2.7 DOM 190
7.3 jQuery 194
7.3.1 jQuery簡(jiǎn)介 194
7.3.2 引入jQuery 194
7.3.3 jQuery語(yǔ)法和選擇器 194
7.3.4 jQuery事件 196
7.3.5 jQuery DOM 196
7.4 JavaScript綜合應(yīng)用 199
7.4.1 HTML代碼 200
7.4.2 CSS樣式 201
7.4.3 JavaScript代碼 201
7.4.4 使用jQuery插件 204
7.4.5 圖片輪播在頁(yè)面中的應(yīng)用 205
7.5 本章小結(jié) 205
參考資料 206

1. 人工智能算法與實(shí)踐 [主編　梁琨　張翼英]
2. 數(shù)據(jù)清洗 [黃源　劉智楊　孫大松]
3. 電路設(shè)計(jì)與PCB制作實(shí)操教程 [主編 周永宏]
4. 電路與電子技術(shù)Ⅰ—數(shù)字電子技術(shù) [主編 鄭玉珍 王淑琴]
5. Java編程基礎(chǔ)案例式教程 [主編 陳艷華 唐春蘭]
6. Python語(yǔ)言同步案例習(xí)題精解 [主編 肖朝暉]
7. Web用戶(hù)界面設(shè)計(jì)與制作 [主編 趙娟]
8. Unity應(yīng)用開(kāi)發(fā)與實(shí)戰(zhàn)（微課版） [主 編 程永恒]
9. 文學(xué)基礎(chǔ)與影視欣賞 [楊華軻 朱偉利 畢雪燕 羅玲誼]
10. 大學(xué)計(jì)算機(jī)基礎(chǔ)與計(jì)算思維 [主編 閔笛 汪瑩]
11. 大學(xué)計(jì)算機(jī)信息素養(yǎng)（第二版） [主編 盧山]
12. 大學(xué)計(jì)算機(jī)基礎(chǔ)實(shí)驗(yàn)指導(dǎo)及習(xí)題解析 [主編 閔笛 李明]
13. 大學(xué)計(jì)算機(jī)信息素養(yǎng)實(shí)驗(yàn)指導(dǎo)（第二版） [主編 盧山]
14. 計(jì)算機(jī)應(yīng)用基礎(chǔ)教程（Windows 10+Office 2019） [主編 聶長(zhǎng)浪 賀秋芳 李久仲]
15. 計(jì)算機(jī)應(yīng)用基礎(chǔ)（Windows 7+Office 2016） [主編 王洪平 楊華]
16. 計(jì)算機(jī)信息素養(yǎng)基礎(chǔ) [主編 陳艷 秦凱 黃海玉]
17. 計(jì)算機(jī)基礎(chǔ)與應(yīng)用 [主編 秦凱 梁寧玉 王毅]
18. 大學(xué)計(jì)算機(jī)基礎(chǔ)上機(jī)實(shí)踐教程（第六版） [主編 何振林 羅奕]
19. C語(yǔ)言程序設(shè)計(jì)（微課版） [主編　夏啟壽]
20. 大學(xué)計(jì)算機(jī)基礎(chǔ)教程實(shí)驗(yàn)指導(dǎo)與測(cè)試題集 [主編 饒拱維 吳華光 巫滿(mǎn)秀]
21. 計(jì)算機(jī)組成原理 [主編 史士英 唐為方]
22. 大學(xué)計(jì)算機(jī)基礎(chǔ)教程（Windows 10+Office 2016） [主編 饒拱維 郭其標(biāo) 房宜汕]
23. 新編高等學(xué)校英語(yǔ)應(yīng)用能力考試（A級(jí)）教程（第二版） [主編 洪金梅 邵毅 向雙豐]
24. 模擬電子技術(shù)（第二版） [主編 羅桂娥]
25. 大學(xué)計(jì)算機(jī)基礎(chǔ)教程（第二版） [主編 安志遠(yuǎn) 崔巖]
26. 畫(huà)法幾何及工程制圖習(xí)題集（第二版） [主 編 烏 云 蘇日娜]
27. 大學(xué)生就業(yè)指導(dǎo) [主編　于斌　唐敬仙　岳習(xí)新]
28. 數(shù)據(jù)通信與計(jì)算機(jī)網(wǎng)絡(luò)（第三版） [主 編 季福坤 錢(qián)文光]
29. Excel高級(jí)應(yīng)用實(shí)驗(yàn)指導(dǎo) [主編 盧山]
30. 管理信息系統(tǒng)（第三版） [王欣 編著]