本書是按照教育部高等學校計算機基礎課程教學指導委員會提出的《關于進一步加強高校計算機基礎教學的意見》中有關“網頁設計基礎”課程的教學要求及人才培養(yǎng)的要求，針對高等學校文科（藝術類）學生特點組織編寫的。

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

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

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

按照以上思路，全書內容共分為7章。

第1章“網頁設計概述”介紹了網頁及網站設計的基礎知識——Internet與網頁的關系、網絡協(xié)議與網頁關系、網站與網頁的關系、網頁的基本元素、網頁設計工具等，還介紹了不同瀏覽器對網頁的兼容性導致網頁顯示效果的區(qū)別。

第2章“網站規(guī)劃與頁面布局”介紹了網頁設計的目標，網頁設計的流程，如何設定網頁風格，如何為網頁設計合適的色彩等內容，并且以一個個人網站為例，詳細描述了網頁設計的過程。

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

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

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

第6章“CSS應用基礎”介紹了CSS的概念、CSS的使用方法、CSS的基本語法，以及如何使用CSS樣式進行美化，使第4章中只具備基礎結構性元素的網頁變得和Photoshop設計圖的效果類似。

第7章“JavaScript應用基礎”介紹了JavaScript的基本概念、JavaScript基本語法以及目前應用最廣泛的JavaScript庫——jQuery的基本用法，還詳細講解了一個圖片輪播的綜合應用實例。

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

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

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

編 者

2015年10月

前言
第1章 網頁設計概述 1
1.1 計算機網絡基礎 1
1.1.1 因特網和萬維網 2
1.1.2 超文本標記語言HTML 2
1.1.3 統(tǒng)一資源定位符URL 3
1.1.4 超文本傳輸協(xié)議（HTTP） 5
1.1.5 瀏覽器 5
1.2 網站與網頁 6
1.2.1 網頁的概念 6
1.2.2 網站的結構 7
1.3 網頁的基本元素 8
1.3.1 文本 9
1.3.2 圖像 9
1.3.3 音頻 10
1.3.4 視頻 11
1.3.5 動畫 12
1.3.6 超鏈接 12
1.4 網頁設計與制作方法 13
1.4.1 網頁制作的基本方法 13
1.4.2 網頁設計與制作工具 13
1.5 瀏覽器的兼容性 14
1.6 本章小結 14
第2章 網站規(guī)劃與頁面布局 15
2.1 網頁設計概述 15
2.1.1 網頁設計的目標 15
2.1.2 網站分類 15
2.1.3 網頁設計流程 16
2.2 網站風格 18
2.2.1 保持頁面風格的一致性 18
2.2.2 協(xié)調運用顏色 19
2.2.3 均衡分割版式 19
2.2.4 適當選擇線條和形狀 19
2.2.5 選擇合適的字體 20
2.2.6 適當美化和去除冗余 21
2.3 網頁布局 21
2.4 網頁色彩運用 22
2.4.1 色彩基本理論 22
2.4.2 色彩的情感 24
2.4.3 色彩選擇技巧 24
2.5 綜合應用 25
2.6 本章小結 27
第3章 網頁設計工具——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 工具面板的使用實例 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 圖層操作實例 43
3.6 其他常用操作 43
3.6.1 旋轉和變換 43
3.6.2 標尺和參考線 45
3.6.3 圖像調整 47
3.6.4 濾鏡 50
3.7 綜合應用 51
3.7.1 使用柵格做布局規(guī)劃 51
3.7.2 設計Header部分 52
3.7.3 設計主體區(qū)域 55
3.7.4 設計Footer部分 60
3.8 本章小結 61
第4章 超文本標記語言HTML與HTML5 62
4.1 HTML概述 62
4.1.1 HTML的由來 63
4.1.2 HTML的定義 63
4.1.3 HTML的特點 63
4.1.4 HTML的發(fā)展史 63
4.1.5 HTML5 64
4.2 HTML文檔的基本組成 64
4.2.1 聲明 65
4.2.2 標簽 65
4.2.3 標簽 65
4.2.4 主體內容 67
4.2.5 HTML的書寫格式 67
4.2.6 HTML塊級元素與內聯(lián)元素 68
4.3 文本內容 68
4.3.1 段落：＜p＞ 68
4.3.2 標題：＜h1＞、＜h2＞、＜h3＞、＜h4＞、＜h5＞、＜h6＞ 69
4.3.3 ＜pre＞標簽 69
4.3.4 列表 70
4.3.5 換行：＜br＞ 72
4.3.6 水平線 73
4.3.7 層標簽：＜div＞ 73
4.3.8 ＜span＞標簽 73
4.3.9 轉義字符 74
4.3.10 其他 75
4.4 多媒體內容 75
4.4.1 圖像 75
4.4.2 音頻 76
4.4.3 ＜audio＞標簽的屬性 77
4.4.4 視頻 77
4.4.5 ＜video＞標簽的屬性 78
4.5 超鏈接 79
4.5.1 文字添加鏈接 79
4.5.2 修改鏈接的窗口打開方式 79
4.5.3 給鏈接添加提示文字 80
4.5.4 錨 80
4.5.5 電子郵件鏈接 81
4.6 表格 81
4.6.1 定義和用法 81
4.6.2 表格標題 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 標簽 85
4.7.5 密碼框 85
4.7.6 單選按鈕 86
4.7.7 復選框 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類型——email 88
4.8.2 input類型——url 88
4.8.3 input類型——number 88
4.8.4 input類型——range 89
4.8.5 input類型——datepickers（日期選擇器） 89
4.8.6 input類型——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 畫布 93
4.10.3 數據列表 94
4.10.4 拖放 95
4.11 HTML綜合應用 95
4.11.1 頁面代碼 96
4.11.2 聲明文檔類型 98
4.11.3 文件頭部分 98
4.11.4 頁面的主體部分 98
4.12 本章小結 100
第5章 可視化網頁制作工具——Dreamweaver 102
5.1 Dreamweaver基礎 102
5.1.1 Dreamweaver簡介 102
5.1.2 Dreamweaver的工作區(qū) 103
5.1.3 Dreamweaver CC 2014新增功能 107
5.2 站點管理 108
5.2.1 創(chuàng)建站點 108
5.2.2 管理站點 110
5.2.3 管理站點中的文件 110
5.3 新建HTML文檔 111
5.3.1 創(chuàng)建新的空白文檔 111
5.3.2 以其他方式創(chuàng)建文檔 113
5.4 設置頁面屬性 113
5.5 文件頭內容 115
5.6 文本 116
5.6.1 文本 116
5.6.2 字符 117
5.6.3 段落 117
5.6.4 標題 118
5.6.5 列表 118
5.7 圖像 119
5.7.1 插入圖像 119
5.7.2 圖像設置 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 多媒體應用 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 標簽 127
5.11.3 文本域 127
5.11.4 電子郵件 129
5.11.5 密碼 129
5.11.6 單選按鈕 129
5.11.7 復選框 130
5.11.8 下拉列表 131
5.11.9 Url 131
5.11.10 Tel 131
5.11.11 搜索 131
5.11.12 數字 132
5.11.13 范圍 132
5.11.14 顏色 132
5.11.15 日期和時間 133
5.11.16 按鈕 134
5.11.17 文件 134
5.11.18 圖像按鈕 134
5.11.19 隱藏 134
5.12 結構 134
5.13 在Dreamweaver中插入jQuery UI 134
5.14 在Dreamweaver中使用CSS 135
5.15 網頁制作綜合應用 136
5.15.1 新建站點和文檔 136
5.15.2 設置body的樣式 136
5.15.3 header區(qū)域 137
5.15.4 主體區(qū)域 141
5.15.5 footer區(qū)域 144
5.16 本章小結 145
第6章 CSS應用基礎 146
6.1 CSS概述 146
6.1.1 CSS簡介 146
6.1.2 CSS的優(yōu)點 146
6.1.3 CSS3 147
6.2 引入CSS 148
6.2.1 在頁面中引入CSS 148
6.2.2 CSS的優(yōu)先級 150
6.3 CSS語法 151
6.3.1 CSS基本語法 151
6.3.2 選擇器 151
6.3.3 值的不同寫法 153
6.3.4 CSS高級語法 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 內邊距 163
6.5.2 外邊距 164
6.5.3 邊框 165
6.6 CSS定位 166
6.6.1 CSS定位概述 166
6.6.2 相對定位 167
6.6.3 絕對定位 167
6.6.4 浮動 168
6.7 CSS3新特性 169
6.7.1 邊框 169
6.7.2 背景 170
6.7.3 文本效果 172
6.7.4 字體 172
6.7.5 過渡 172
6.7.6 多列 173
6.8 CSS綜合應用 174
6.8.1 引用外部樣式表 174
6.8.2 設置全局樣式 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 本章小結 183
第7章 JavaScript應用基礎 184
7.1 JavaScript概述 184
7.1.1 JavaScript的優(yōu)點 184
7.1.2 常用的JavaScript庫 185
7.2 JavaScript基本語法 185
7.2.1 引入JavaScript 185
7.2.2 JavaScript變量和數據類型 186
7.2.3 JavaScript注釋 187
7.2.4 JavaScript語句 187
7.2.5 JavaScript函數和作用域 188
7.2.6 JavaScript對象 190
7.2.7 DOM 190
7.3 jQuery 194
7.3.1 jQuery簡介 194
7.3.2 引入jQuery 194
7.3.3 jQuery語法和選擇器 194
7.3.4 jQuery事件 196
7.3.5 jQuery DOM 196
7.4 JavaScript綜合應用 199
7.4.1 HTML代碼 200
7.4.2 CSS樣式 201
7.4.3 JavaScript代碼 201
7.4.4 使用jQuery插件 204
7.4.5 圖片輪播在頁面中的應用 205
7.5 本章小結 205
參考資料 206

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