HTML+CSS+JavaScript網(wǎng)頁設(shè)計教程（高職）
定 價：39 元
- 作者：孟憲寧
- 出版時間：2020/3/1
- ISBN：9787560655864
- 出 版 社：西安電子科技大學(xué)出版社
- 中圖法分類：TP312
- 頁碼：280
- 紙張：膠版紙
- 版次：1
- 開本：16K
本書是作者根據(jù)多年的教學(xué)和網(wǎng)站設(shè)計經(jīng)驗，按照學(xué)習(xí)網(wǎng)頁設(shè)計技術(shù)的規(guī)律，精心設(shè)計編寫的，書中代碼均符合最新的Web開發(fā)規(guī)范。本書由淺入深，完整而詳細(xì)地介紹了HTML、CSS和JavaScript這三種網(wǎng)頁設(shè)計技術(shù)，在講解基本規(guī)范的同時，給出了實用性強的案例，可以使讀者在掌握基本規(guī)范的同時，學(xué)習(xí)到實用的網(wǎng)頁設(shè)計技術(shù)。
本書內(nèi)容系統(tǒng)、全面，
在互聯(lián)網(wǎng)時代，一個好的網(wǎng)頁，不僅要有良好的視覺效果，其內(nèi)容和表現(xiàn)形式更要符合Web標(biāo)準(zhǔn)。傳統(tǒng)的網(wǎng)頁設(shè)計通常是網(wǎng)頁的內(nèi)容和表現(xiàn)形式交織在一起，這就造成了網(wǎng)頁源代碼可讀性不高、后期維護難度大等問題。使用HTML+CSS+JavaScript設(shè)計網(wǎng)頁，可將網(wǎng)頁內(nèi)容、表現(xiàn)形式和行為相分離，一方面便于在設(shè)計網(wǎng)頁過程中分工合作，另一方面既可以提高代碼復(fù)用度，又可以提高代碼的可讀性和可維護性。
本書是作者根據(jù)多年的教學(xué)經(jīng)驗以及實際的網(wǎng)站(網(wǎng)頁)設(shè)計經(jīng)驗，在翻閱了眾多網(wǎng)頁設(shè)計教材的基礎(chǔ)上，博采眾長，精心編寫的。本書采用最新的Web開發(fā)標(biāo)準(zhǔn)，既可以使用簡單的記事本工具，也可以使用WebStorm、DreamWeaver等流行的專業(yè)網(wǎng)頁設(shè)計工具，由淺入深、系統(tǒng)而全面地介紹HTML、CSS和JavaScript的基本知識和實用技巧，對于當(dāng)前流行的HTML 5.0和CSS的相關(guān)技術(shù)也進行了講解。本書在講解基本知識點的基礎(chǔ)上，精心編寫了實際網(wǎng)站設(shè)計中應(yīng)用的案例，理論知識系統(tǒng)而全面，案例豐富而實用。
本書除第6章外，每章后都附有較為豐富的練習(xí)題以及精心設(shè)計的實踐題，讀者只要認(rèn)真學(xué)習(xí)本書中的內(nèi)容，并完成練習(xí)題和實踐題，就能夠基本掌握網(wǎng)頁設(shè)計技術(shù)。
全書共6章，各章內(nèi)容安排如下：
第1章 網(wǎng)頁設(shè)計綜述，主要介紹Web工作原理、常用的瀏覽器、開發(fā)網(wǎng)頁的常用工具、基本的術(shù)語；對HTML、CSS和JavaScript做了簡單介紹；實現(xiàn)了一個簡單的仿百度首頁的網(wǎng)頁，從而讓讀者對網(wǎng)頁設(shè)計有一個直觀的認(rèn)識。
第2章 HTML，介紹了HTML的基本語法；分析了一個完整網(wǎng)頁的組成部分；重點介紹HTML文檔頭部的相關(guān)標(biāo)簽，并對段落、文本格式化、列表、超鏈接、圖像與多媒體、表單、表格、框架等網(wǎng)頁設(shè)計中要用到的HTML標(biāo)簽做了詳細(xì)介紹。
第3章 CSS，介紹了在網(wǎng)頁中如何引用CSS樣式、CSS樣式的基本語法格式；重點介紹了CSS選擇器；詳細(xì)介紹了CSS文本樣式，盒子模型，浮動與定位，以及樣式的繼承、層疊和優(yōu)先級的概念；給出了一個騰訊網(wǎng)首頁的搜索案例，讓讀者能夠把所學(xué)的HTML和CSS技術(shù)學(xué)以致用。
第4章 JavaScript，介紹了在網(wǎng)頁中如何引入JavaScript代碼，并介紹了在Chrome瀏覽器中調(diào)試JavaScript代碼的基本技巧；詳細(xì)介紹了JavaScript的標(biāo)識符、變量、基本數(shù)據(jù)類型、運算符和表達(dá)式，以及順序、分支和循環(huán)的語法格式及編程思想，對JavaScript控制網(wǎng)頁行為要用到的函數(shù)和事件也做了詳細(xì)介紹；介紹了如何使用DOM模型來控制網(wǎng)頁元素的表現(xiàn)行為以及如何使用BOM模型來實現(xiàn)網(wǎng)頁和瀏覽器之間的交互；使用JavaScript技術(shù)，實現(xiàn)了騰訊網(wǎng)首頁的下拉菜單以及搜索框提示文字的更新顯示功能。
第5章 網(wǎng)頁設(shè)計綜合案例，通過實現(xiàn)騰訊網(wǎng)首頁案例，將前幾章所學(xué)的HTML、CSS和JavaScript技術(shù)進行綜合應(yīng)用。通過這個綜合案例，讀者可以掌握符合Web開發(fā)規(guī)范的網(wǎng)頁設(shè)計技術(shù)。
第6章 拓展知識，對設(shè)計一個豐富多彩的網(wǎng)頁所需要的配色、版式設(shè)計，以及切片工具和技術(shù)等進行介紹，并結(jié)合具體的網(wǎng)站實例，給讀者簡單展示了一個網(wǎng)站的設(shè)計流程。
本書由孟憲寧、趙春霞、包燕編著，孟憲寧負(fù)責(zé)本書的組織設(shè)計，并完成了前4章的編寫，趙春霞完成了第5章“網(wǎng)頁設(shè)計綜合案例”的編寫，包燕完成了第6章“拓展知識”的編寫。
在本書編寫過程中，苗彩霞、高桂霞等幾位老師提供了部分案例和試題，在此一并表示感謝！
由于水平有限，書中難免存在不足，敬請廣大讀者批評指正，并誠懇歡迎大家提出寶貴意見。E-mail：113769283@qq.com。
第1章 網(wǎng)頁設(shè)計綜述 1
1.1 Web起源 1
1.2 Web工作原理 1
1.3 瀏覽器 2
1.4 網(wǎng)頁開發(fā)工具 3
1.5 基本概念 3
1.6 網(wǎng)頁開發(fā)技術(shù)簡介 5
1.6.1 HTML簡介 5
1.6.2 CSS簡介 6
1.6.3 JavaScript簡介 8
1.7 一個簡單的網(wǎng)頁 9
1.7.1 準(zhǔn)備工作 9
1.7.2 編寫HTML代碼 10
1.7.3 設(shè)計CSS樣式 11
1.7.4 添加CSS樣式后網(wǎng)頁的
顯示效果 12
練習(xí)與實踐 12
第2章 HTML 14
2.1 HTML基本語法 14
2.1.1 雙標(biāo)簽 14
2.1.2 單標(biāo)簽 14
2.1.3 屬性 15
2.1.4 注釋 15
2.2 HTML文檔基本結(jié)構(gòu) 16
2.3 HTML文檔頭部相關(guān)標(biāo)簽 17
2.3.1 頁面標(biāo)題標(biāo)簽
17
2.3.2 元信息標(biāo)簽<meta />17
2.3.3 其他標(biāo)簽 18
2.4 段落與文本格式化 19
2.4.1 <span>標(biāo)簽 19
2.4.2 樣式標(biāo)簽 20
2.4.3 段落標(biāo)簽<p>21
2.4.4 換行標(biāo)簽<br /> 22
2.4.5 水平分割線標(biāo)簽<hr />22
2.4.6 內(nèi)容居中標(biāo)簽<center>23
2.4.7 預(yù)格式化標(biāo)簽
<pre> 23
2.4.8 標(biāo)題標(biāo)簽<h1>～<h6>25
2.4.9<div>和<span>標(biāo)簽 25
2.5 列表 26
2.5.1 無序列表標(biāo)簽<ul>26
2.5.2 有序列表標(biāo)簽<ol>27
2.5.3 自定義列表標(biāo)簽<dl>29
2.6 超鏈接 30
2.6.1 超鏈接標(biāo)簽<a> 30
2.6.2 路徑的表示方法 30
2.6.3 網(wǎng)頁內(nèi)跳轉(zhuǎn) 31
2.7 圖像與多媒體 32
2.7.1 圖像 32
2.7.2 圖像映射 32
2.7.3 音頻和視頻 35
2.7.4 插入Flash文件 37
2.8 表單 37
2.8.1 表單標(biāo)簽<form>37
2.8.2 信息輸入標(biāo)簽<input /> 38
2.8.3 HTML 5.0新增的表單輸入類型 40
2.8.4 下拉列表標(biāo)簽<select> 43
2.8.5 多行文本輸入標(biāo)簽<textarea> 45
2.8.6 域和域標(biāo)題 45
2.9 表格 46
2.9.1 表格標(biāo)簽 46
2.9.2 行標(biāo)簽<tr>49
2.9.3 單元格標(biāo)簽<td>50
2.10 框架 51
2.10.1 框架集標(biāo)簽<frameset>52
2.10.2 框架定義標(biāo)簽<frame /> 52
2.10.3 浮動框架標(biāo)簽<iframe>54
2.11 HTML 5.0結(jié)構(gòu)元素 56
練習(xí)與實踐 58
第3章 CSS 62
3.1 CSS基礎(chǔ) 62
3.2 引用CSS樣式 63
3.2.1 行內(nèi)樣式 63
3.2.2 內(nèi)部樣式 63
3.2.3 外部樣式 65
3.3 CSS選擇器 66
3.3.1 標(biāo)簽選擇器 66
3.3.2 id選擇器 67
3.3.3 類選擇器 68
3.3.4 屬性選擇器 70
3.3.5 后代選擇器 72
3.3.6 關(guān)系選擇器 73
3.3.7 普通兄弟選擇器(~) 74
3.3.8 相鄰兄弟選擇器(+) 75
3.3.9 結(jié)構(gòu)性偽類選擇器 76
3.3.10 偽類選擇器 79
3.3.11 通配符選擇器 81
3.3.12 并集選擇器 81
3.4 CSS文本樣式 82
3.4.1 字體樣式屬性：font-family 82
3.4.2 字號屬性：font-size 83
3.4.3 字體粗細(xì)屬性：font-weight 86
3.4.4 字體風(fēng)格屬性：font-style 88
3.4.5 綜合字體樣式屬性：font 88
3.4.6 其他常用的文本樣式屬性 89
3.5 盒子模型 93
3.5.1 盒子模型概述 94
3.5.2 盒子模型的相關(guān)屬性 95
3.5.3 盒子的內(nèi)邊距 98
3.5.4 盒子的外邊距 100
3.6 背景屬性 101
3.6.1 設(shè)置背景顏色 102
3.6.2 設(shè)置背景圖片 103
3.6.3 綜合設(shè)置背景圖片 105
3.7 繼承、層疊和優(yōu)先級 106
3.7.1 繼承 106
3.7.2 層疊和優(yōu)先級 107
3.8 浮動與定位 110
3.8.1 浮動(float) 110
3.8.2 定位 116
3.9 案例：騰訊網(wǎng)首頁搜索框布局 121
3.9.1 左、中、右三欄居中布局 122
3.9.2 左側(cè)的騰訊Logo圖片 124
3.9.3 中間的搜索框 124
3.9.4 右側(cè)的三個按鈕 128
練習(xí)與實踐 129
第4章 JavaScript 133
4.1 JavaScript概述 133
4.1.1 使用
<script>標(biāo)簽直接嵌入
JavaScript代碼 133
4.1.2 引入外部JavaScript代碼 134
4.2 標(biāo)識符、變量和數(shù)據(jù)類型 135
4.2.1 標(biāo)識符 135
4.2.2 變量 136
4.2.3 基本數(shù)據(jù)類型 136
4.2.4 復(fù)合數(shù)據(jù)類型：數(shù)組 139
4.2.5 JavaScript對象和this關(guān)鍵字 141
4.3 運算符與表達(dá)式 143
4.3.1 賦值運算符 143
4.3.2 算術(shù)運算符 143
4.3.3 位運算符 144
4.3.4 比較運算符 144
4.3.5 邏輯運算符 145
4.3.6 條件運算符(三元運算符) 145
4.4 流程控制 146
4.4.1 順序結(jié)構(gòu) 146
4.4.2 分支結(jié)構(gòu) 146
4.4.3 循環(huán)結(jié)構(gòu) 151
4.5 函數(shù) 156
4.5.1 定義函數(shù) 157
4.5.2 調(diào)用函數(shù) 157
4.6 事件 159
4.6.1 表單事件 161
4.6.2 鼠標(biāo)事件 165
4.6.3 鍵盤事件 167
4.7 DOM 168
4.7.1 獲取HTML元素 169
4.7.2 讀取或修改HTML元素的屬性 170
4.8 BOM 175
4.8.1 history對象 176
4.8.2 navigator對象 178
4.8.3 screen對象 179
4.8.4定時器 180
4.9 案例：騰訊網(wǎng)首頁搜索框下拉菜單 185
4.9.1 獲取指定的HTML元素對象 186
4.9.2 設(shè)置HTML對象的響應(yīng)事件 186
4.9.3 實現(xiàn)下拉菜單的鼠標(biāo)移入移出
效果 187
4.9.4 實現(xiàn)下拉菜單的鼠標(biāo)點擊效果 187
練習(xí)與實踐 188
第5章 網(wǎng)頁設(shè)計綜合案例 192
5.1 網(wǎng)站介紹及定位 192
5.2 準(zhǔn)備工作 192
5.2.1 建立站點 192
5.2.2 素材準(zhǔn)備 194
5.3 網(wǎng)頁布局分析 195
5.3.1 網(wǎng)頁整體布局 196
5.3.2 標(biāo)簽頁圖標(biāo)和文字顯示 197
5.3.3 定義公共樣式 197
5.3.4 定義頁面大小 198
5.3.5 浮動效果的實現(xiàn) 198
5.4 頭部分析與實現(xiàn) 198
5.4.1 效果圖分析 198
5.4.2 頭部布局分析 199
5.4.3 左側(cè)的騰訊Logo圖片 199
5.4.4 中間的搜索框代碼實現(xiàn) 200
5.4.5 右側(cè)三個QQ功能按鈕的實現(xiàn) 207
5.5 導(dǎo)航部分分析與實現(xiàn) 209
5.5.1 效果圖分析 209
5.5.2 導(dǎo)航部分布局整體設(shè)計 209
5.5.3 導(dǎo)航部分的CSS樣式分析與
設(shè)計 213
5.6 廣告部分分析與實現(xiàn) 217
5.6.1 效果圖分析 217
5.6.2 廣告部分布局分析與實現(xiàn) 217
5.6.3 廣告部分樣式分析與實現(xiàn) 218
5.6.4 廣告部分動態(tài)效果實現(xiàn) 219
5.7 主體部分分析與實現(xiàn) 221
5.7.1 效果圖分析 221
5.7.2 要聞部分和今日話題部分的
分析與實現(xiàn) 222
5.7.3 右側(cè)快速鏈接部分的分析與
實現(xiàn) 225
練習(xí)與實踐 230
第6章 拓展知識 231
6.1 網(wǎng)頁配色 231
6.1.1 色彩概述 231
6.1.2 色彩的基本特性 232
6.1.3 網(wǎng)頁配色的基本概念 234
6.1.4 網(wǎng)頁配色技巧 242
6.1.5 網(wǎng)頁色彩搭配的原則 245
6.2 網(wǎng)頁版式設(shè)計 245
6.2.1 網(wǎng)頁元素的組成 246
6.2.2 網(wǎng)頁設(shè)計的構(gòu)成要素 246
6.2.3 網(wǎng)頁版式設(shè)計的布局分類 249
6.3 切片工具 257
6.3.1 切片的屬性設(shè)置 257
6.3.2 切片工具的使用 258
6.4 案例：本源食品有限公司網(wǎng)站頁面的
設(shè)計與制作 264
6.4.1 網(wǎng)站定位 264
6.4.2 搜集資料 264
6.4.3 網(wǎng)站規(guī)劃 265
6.4.4 設(shè)計網(wǎng)站 266
6.4.5 網(wǎng)站制作 270
6.4.6 網(wǎng)站發(fā)布 271</pre>
書單推薦
