本書(shū)面向Web前端開(kāi)發(fā)的讀者，采用全新流行的Web標(biāo)準(zhǔn)，以Web前端開(kāi)發(fā)技術(shù)三要素（HTML5、CSS3、JavaScript）等前端技術(shù)，由淺入深、完整詳細(xì)地講解采用手寫(xiě)編碼編寫(xiě)符合W3C標(biāo)準(zhǔn)、兼容多種瀏覽器的代碼。本書(shū)共分12章，主要內(nèi)容包括：網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)、HTML概述、編輯網(wǎng)頁(yè)文檔、網(wǎng)頁(yè)布局與交互、CSS基礎(chǔ)、CSS盒模型、使用CSS修飾常見(jiàn)的網(wǎng)頁(yè)元素、使用CSS設(shè)置鏈接與導(dǎo)航、Div+CSS布局頁(yè)面、網(wǎng)頁(yè)行為語(yǔ)言――JavaScript、珠寶商城前臺(tái)頁(yè)面和珠寶商城后臺(tái)管理頁(yè)面。本書(shū)內(nèi)容緊扣國(guó)家對(duì)高等學(xué)校培養(yǎng)高級(jí)應(yīng)用型、復(fù)合型人才的技能水平和知識(shí)結(jié)構(gòu)的要求，以珠寶商城項(xiàng)目案例的開(kāi)發(fā)思路為主線，采用模塊分解、任務(wù)驅(qū)動(dòng)、子任務(wù)實(shí)現(xiàn)和代碼設(shè)計(jì)四層結(jié)構(gòu)，通過(guò)對(duì)模塊中每個(gè)任務(wù)相應(yīng)知識(shí)點(diǎn)的講解，引導(dǎo)讀者學(xué)習(xí)網(wǎng)頁(yè)制作、設(shè)計(jì)、規(guī)劃的基本知識(shí)以及項(xiàng)目開(kāi)發(fā)、測(cè)試的完整流程。

教授，現(xiàn)就職于北京信息職業(yè)技術(shù)學(xué)院（東校區(qū)）軟件工程系。我社老作者，具有多年寫(xiě)作經(jīng)驗(yàn)，在我社出版過(guò)30多本教材。

目    錄
第1章  網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 1
1．1  萬(wàn)維網(wǎng)WWW 1
1．1．1  WWW和瀏覽器的基本概念 1
1．1．2  網(wǎng)址 2
1．1．3  超文本 3
1．1．4  超文本標(biāo)記語(yǔ)言HTML 3
1．1．5  HTTP 3
1．1．6  搜索引擎 4
1．2  網(wǎng)站與網(wǎng)頁(yè)的基本概念 4
1．2．1  網(wǎng)站、網(wǎng)頁(yè)和主頁(yè) 4
1．2．2  靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè) 5
1．3  網(wǎng)站的規(guī)劃與設(shè)計(jì) 5
1．4  定位網(wǎng)站的主題和名稱 6
1．4．1  網(wǎng)站主題的確定 6
1．4．2  網(wǎng)站名稱的確定 6
1．5  確定網(wǎng)站的CI形象 7
1．6  網(wǎng)站內(nèi)容的設(shè)計(jì) 7
1．6．1  設(shè)計(jì)網(wǎng)站的欄目 8
1．6．2  確定網(wǎng)站的目錄結(jié)構(gòu) 8
1．6．3  設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu) 9
1．7  網(wǎng)頁(yè)的基本元素 10
1．8  網(wǎng)頁(yè)布局結(jié)構(gòu) 11
1．9  常見(jiàn)的網(wǎng)頁(yè)編輯工具 12
1．10  Web標(biāo)準(zhǔn) 13
1．10．1  什么是Web標(biāo)準(zhǔn) 13
1．10．2  建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn) 14
1．10．3  理解表現(xiàn)和結(jié)構(gòu)相分離 14
習(xí)題1 15
第2章  HTML概述 16
2．1  HTML簡(jiǎn)介 16
2．1．1  Web技術(shù)發(fā)展歷程 16
2．1．2  HTML5的特性 16
2．1．3  HTML5元素 17
2．2  HTML語(yǔ)法基礎(chǔ) 17
2．2．1  HTML語(yǔ)法結(jié)構(gòu) 18
2．2．2  HTML編寫(xiě)規(guī)范 18
2．2．3  HTML5文檔結(jié)構(gòu) 19
2．3  創(chuàng)建HTML文檔 20
2．4  搭建支持HTML5的瀏覽器環(huán)境 21
2．5  網(wǎng)頁(yè)頭部標(biāo)簽 22
2．5．1  ＜title＞標(biāo)簽 22
2．5．2  ＜meta＞標(biāo)簽 22
2．5．3  ＜link＞標(biāo)簽 23
2．5．4  ＜script＞標(biāo)簽 23
2．5．5  案例―制作珠寶商城頁(yè)面摘要信息 23
2．6  注釋 24
2．7  特殊符號(hào) 24
習(xí)題2 25
第3章  編輯網(wǎng)頁(yè)文檔 26
3．1  文字與段落排版 26
3．1．1  段落標(biāo)簽＜p＞…＜/p＞ 26
3．1．2  強(qiáng)制換行標(biāo)簽＜br/＞ 26
3．1．3  標(biāo)題標(biāo)簽＜h#＞…＜/h#＞ 27
3．1．4  水平線標(biāo)簽＜hr/＞ 28
3．1．5  縮排標(biāo)簽＜blockquote＞…＜/blockquote＞ 29
3．1．6  案例―制作珠寶商城關(guān)于我們頁(yè)面 29
3．2  超鏈接 30
3．2．1  超鏈接簡(jiǎn)介 30
3．2．2  超鏈接的應(yīng)用 30
3．2．3  案例―制作珠寶商城服務(wù)指南及下載頁(yè)面 32
3．3  圖像 33
3．3．1  Web圖像的格式及使用要點(diǎn) 33
3．3．2  圖像標(biāo)簽＜img＞ 34
3．3．3  圖像超鏈接 35
3．3．4  設(shè)置網(wǎng)頁(yè)背景圖像 35
3．3．5  圖文混排 36
3．4  列表 37
3．4．1  無(wú)序列表 37
3．4．2  有序列表 38
3．4．3  定義列表 39
3．4．4  嵌套列表 40
習(xí)題3 41
第4章  網(wǎng)頁(yè)布局與交互 42
4．1  表格 42
4．1．1  表格的結(jié)構(gòu) 42
4．1．2  表格的基本語(yǔ)法 42
4．1．3  表格的屬性 43
4．1．4  不規(guī)范表格 45
4．1．5  表格數(shù)據(jù)的分組 46
4．1．6  使用表格實(shí)現(xiàn)頁(yè)面局部布局 48
4．2  使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局 49
4．3  ＜div＞標(biāo)簽 53
4．4  ＜span＞標(biāo)簽 53
4．4．1  基本語(yǔ)法 53
4．4．2  ＜span＞標(biāo)簽與＜div＞標(biāo)簽的區(qū)別 54
4．4．3  使用＜div＞標(biāo)簽和＜span＞標(biāo)簽布局網(wǎng)頁(yè)內(nèi)容 54
4．5  表單 55
4．5．1  表單的工作機(jī)制 55
4．5．2  表單標(biāo)簽＜form＞…＜/form＞ 55
4．5．3  表單元素 56
4．5．4  案例―制作珠寶商城會(huì)員注冊(cè)表單 59
4．5．5  使用表格布局表單 61
習(xí)題4 62
第5章  CSS基礎(chǔ) 64
5．1  CSS簡(jiǎn)介 64
5．1．1  什么是CSS 64
5．1．2  CSS的發(fā)展歷史 64
5．1．3  CSS3的特點(diǎn) 65
5．1．4  CSS編寫(xiě)規(guī)則 65
5．1．5  CSS的工作環(huán)境 67
5．2  HTML與CSS 67
5．2．1  傳統(tǒng)HTML的缺點(diǎn) 67
5．2．2  CSS的優(yōu)勢(shì) 68
5．2．3  CSS的局限性 68
5．3  CSS語(yǔ)法基礎(chǔ) 68
5．3．1  CSS樣式規(guī)則 69
5．3．2  基本選擇符 69
5．3．3  復(fù)合選擇符 71
5．3．4  通配符選擇符 73
5．3．5  特殊選擇符 74
5．4  CSS的屬性單位 76
5．4．1  長(zhǎng)度、百分比單位 76
5．4．2  色彩單位 77
5．5  網(wǎng)頁(yè)中引用CSS的方法 78
5．5．1  行內(nèi)樣式 78
5．5．2  內(nèi)部樣式表 79
5．5．3  鏈入外部樣式表 80
5．5．4  導(dǎo)入外部樣式表 81
5．5．5  案例―制作珠寶商城客服中心頁(yè)面 82
5．6  文檔結(jié)構(gòu) 84
5．6．1  文檔結(jié)構(gòu)的基本概念 84
5．6．2  繼承 85
5．6．3  樣式表的層疊、特殊性與重要性 86
5．6．4  元素類型 88
5．6．5  案例―制作珠寶商城特色禮品局部頁(yè)面 89
習(xí)題5 92
第6章  CSS盒模型 93
6．1  盒模型的概念 93
6．2  邊框、外邊距與內(nèi)邊距 94
6．2．1  邊框 94
6．2．2  外邊距 97
6．2．3  內(nèi)邊距 99
6．2．4  案例―盒模型的演示 99
6．3  盒模型的尺寸 101
6．3．1  盒模型的寬度與高度 101
6．3．2  塊級(jí)元素與行級(jí)元素寬度和高度的區(qū)別 101
6．4  盒子的margin疊加問(wèn)題 102
6．4．1  行級(jí)元素之間的水平margin疊加 102
6．4．2  塊級(jí)元素之間的垂直margin疊加 103
6．5  盒模型綜合案例―珠寶商城頂部?jī)?nèi)容 105
6．6  盒子的定位 108
6．6．1  定位屬性 108
6．6．2  定位方式 109
6．7  浮動(dòng)與清除浮動(dòng) 113
6．7．1  浮動(dòng) 114
6．7．2  清除浮動(dòng) 117
6．8  綜合案例―珠寶商城市場(chǎng)團(tuán)隊(duì)簡(jiǎn)介頁(yè)面 118
6．8．1  頁(yè)面布局規(guī)劃 118
6．8．2  頁(yè)面的制作過(guò)程 119
習(xí)題6 122
第7章  使用CSS修飾常見(jiàn)的網(wǎng)頁(yè)元素 124
7．1  設(shè)置字體樣式 124
7．1．1  字體類型 124
7．1．2  字體大小 124
7．1．3  字體粗細(xì) 125
7．1．4  字體傾斜 125
7．1．5  設(shè)置字體樣式綜合案例 125
7．2  設(shè)置文本樣式 126
7．2．1  文本水平對(duì)齊方式 126
7．2．2  行高 127
7．2．3  文本的修飾 127
7．2．4  段落首行縮進(jìn) 127
7．2．5  首字下沉 127
7．2．6  文本的截?cái)?128
7．2．7  文本換行 128
7．2．8  文本的顏色 128
7．2．9  文本的背景顏色 129
7．2．10  設(shè)置文本樣式綜合案例 129
7．3  設(shè)置圖像樣式 130
7．3．1  圖像縮放 131
7．3．2  圖像邊框 132
7．3．3  背景圖像 133
7．3．4  背景重復(fù) 133
7．3．5  背景圖像定位 134
7．3．6  背景圖像大小 136
7．4  設(shè)置表格樣式 137
7．4．1  常用的CSS表格屬性 137
7．4．2  案例―使用隔行換色表格制作暢銷商品銷量排行榜 140
7．5  設(shè)置表單樣式 142
7．5．1  使用CSS修飾常用的表單元素 142
7．5．2  案例―制作珠寶商城會(huì)員注冊(cè)頁(yè)面 146
7．6  綜合案例―制作珠寶商城網(wǎng)購(gòu)空間頁(yè)面 149
7．6．1  頁(yè)面布局規(guī)劃 149
7．6．2  頁(yè)面的制作過(guò)程 150
習(xí)題7 152
第8章  使用CSS設(shè)置鏈接與導(dǎo)航 154
8．1  使用CSS設(shè)置鏈接 154
8．1．1  設(shè)置文字鏈接的外觀 154
8．1．2  圖文鏈接 157
8．1．3  按鈕式鏈接 157
8．2  使用CSS設(shè)置列表 159
8．2．1  表格布局的缺點(diǎn) 159
8．2．2  列表布局的優(yōu)勢(shì) 160
8．2．3  CSS列表屬性 160
8．2．4  圖文信息列表 165
8．3  創(chuàng)建導(dǎo)航菜單 169
8．3．1  普通的超鏈接導(dǎo)航菜單 169
8．3．2  縱向列表模式的導(dǎo)航菜單 170
8．3．3  橫向列表模式的導(dǎo)航菜單 174
8．4  綜合案例―使用CSS修飾頁(yè)面和制作導(dǎo)航菜單 177
8．4．1  制作珠寶商城網(wǎng)購(gòu)學(xué)堂主頁(yè) 177
8．4．2  制作珠寶商城網(wǎng)購(gòu)學(xué)堂欄目頁(yè) 186
習(xí)題8 190
第9章  Div+CSS布局頁(yè)面 191
9．1  Div+CSS布局理念 191
9．1．1  認(rèn)識(shí)Div+CSS布局 191
9．1．2  正確理解Web標(biāo)準(zhǔn) 191
9．1．3  將頁(yè)面用Div分塊 192
9．2  典型的CSS布局樣式 193
9．2．1  兩列布局樣式 193
9．2．2  三列布局樣式 196
9．3  綜合案例―制作珠寶商城博客頁(yè)面 200
9．4  綜合案例―制作珠寶商城網(wǎng)絡(luò)服務(wù)中心頁(yè)面 209
9．4．1  頁(yè)面布局規(guī)劃 209
9．4．2  頁(yè)面的制作過(guò)程 210
習(xí)題9 216
第10章  網(wǎng)頁(yè)行為語(yǔ)言―JavaScript 218
10．1  JavaScript概述 218
10．2  在網(wǎng)頁(yè)中調(diào)用JavaScript 218
10．3  JavaScript基本交互方法 219
10．3．1  信息對(duì)話框 219
10．3．2  選擇對(duì)話框 220
10．3．3  提示對(duì)話框 221
10．4  表單對(duì)象與交互性 222
10．5  制作網(wǎng)頁(yè)特效 226
10．5．1  制作網(wǎng)頁(yè)Tab選項(xiàng)卡切換效果 226
10．5．2  循環(huán)滾動(dòng)的圖文字幕 229
10．5．3  幻燈片廣告 232
10．5．4  制作二級(jí)縱向列表模式的導(dǎo)航菜單 234
習(xí)題10 237
第11章  珠寶商城前臺(tái)頁(yè)面 239
11．1  網(wǎng)站的開(kāi)發(fā)流程 239
11．1．1  規(guī)劃站點(diǎn) 239
11．1．2  網(wǎng)站制作 241
11．1．3  測(cè)試網(wǎng)站 241
11．1．4  發(fā)布站點(diǎn) 241
11．2  設(shè)計(jì)首頁(yè)布局 241
11．2．1  創(chuàng)建站點(diǎn)目錄 241
11．2．2  頁(yè)面布局規(guī)劃 242
11．3  制作首頁(yè) 242
11．4  制作產(chǎn)品列表頁(yè) 253
11．5  制作產(chǎn)品明細(xì)頁(yè) 256
11．6  制作查看購(gòu)物車頁(yè) 262
習(xí)題11 265
第12章  珠寶商城后臺(tái)管理頁(yè)面 267
12．1  制作后臺(tái)管理登錄頁(yè) 267
12．2  制作查詢商品頁(yè) 271
12．3  制作添加商品頁(yè) 280
12．4  制作會(huì)員管理頁(yè) 283
12．5  欄目的整合 285
習(xí)題12 286
參考文獻(xiàn) 287