●第1章網站規劃和網頁設計基礎1
1.1萬維網WWW1
1.1.1WWW和瀏覽器的基本概念1
1.1.2網址2
1.1.3超文本3
1.1.4超文本標記語言HTML3
1.1.5HTTP3
1.1.6搜索引擎4
1.2網站與網頁的基本概念4
1.2.1網站、網頁和主頁4
1.2.2靜態網頁和動態網頁5
1.3網站的規劃與設計5
1.4定位網站的主題和名稱6
1.4.1網站主題的確定6
1.4.2網站名稱的確定6
1.5確定網站的CI形像7
1.6網站內容的設計7
1.6.1設計網站的欄目8
1.6.2確定網站的目錄結構8
1.6.3設計網站的鏈接結構9
1.7網頁素10
1.8網頁布局結構11
1.9常見的網頁編輯工具12
1.10Web標準13
1.10.1什麼是Web標準13
1.10.2建立Web標準的優點14
1.10.3理解表現和結構相分離14
習題115
第2章HTML概述16
2.1HTML簡介16
2.1.1Web技術發展歷程16
2.1.2HTML5的特性16
2.1.3HT素17
2.2HTML語法基礎17
2.2.1HTML語法結構18
2.2.2HTML編寫規範18
2.2.3HTML5文檔結構19
2.3創建HTML文檔20
2.4搭建支持HTML5的瀏覽器環境21
2.5網頁頭部標簽22
2.5.1<title>標簽22
2.5.2<meta>標簽22
2.5.3<link>標簽23
2.5.4<script>標簽23
2.5.5案例—制作珠寶商城頁面摘要信息23
2.6注釋24
2.7特殊符號24
習題225
第3章編輯網頁文檔26
3.1文字與段落排版26
3.1.1段落標簽<p>…</p>26
3.1.2強制換行標簽<br/>26
3.1.3標題標簽<h#>…</h#>27
3.1.4水平線標簽<hr/>28
3.1.5縮排標簽<blockquote>…</blockquote>29
3.1.6案例—制作珠寶商城關於我們頁面29
3.2超鏈接30
3.2.1超鏈接簡介30
3.2.2超鏈接的應用30
3.2.3案例—制作珠寶商城服務指南及下載頁面32
3.3圖像33
3.3.1Web圖像的格式及使用要點33
3.3.2圖像標簽<img>34
3.3.3圖像超鏈接35
3.3.4設置網頁背景圖像35
3.3.5圖文混排36
3.4列表37
3.4.1無序列表37
3.4.2有序列表38
3.4.3定義列表39
3.4.4嵌套列表40
習題341
第4章網頁布局與交互42
4.1表格42
4.1.1表格的結構42
4.1.2表格的基本語法42
4.1.3表格的屬性43
4.1.4不規範表格45
4.1.5表格數據的分組46
4.1.6使用表格實現頁面局部布局48
4.2使素構建網頁布局49
4.3<div>標簽53
4.4<span>標簽53
4.4.1基本語法53
4.4.2<span>標簽與<div>標簽的區別54
4.4.3使用<div>標簽和<span>標簽布局網頁內容54
4.5表單55
4.5.1表單的工作機制55
4.5.2表單標簽<form>…</form>55
4.5.素56
4.5.4案例—制作珠寶商城會員注冊表單59
4.5.5使用表格布局表單61
習題462
第5章CSS基礎64
5.1CSS簡介64
5.1.1什麼是CSS64
5.1.2CSS的發展歷史64
5.1.3CSS3的特點65
5.1.4CSS編寫規則65
5.1.5CSS的工作環境67
5.2HTML與CSS67
5.2.1傳統HTML的缺點67
5.2.2CSS的優勢68
5.2.3CSS的局限性68
5.3CSS語法基礎68
5.3.1CSS樣式規則69
5.3.2基本選擇符69
5.3.3復合選擇符71
5.3.4通配符選擇符73
5.3.5特殊選擇符74
5.4CSS的屬性單位76
5.4.1長度、百分比單位76
5.4.2色彩單位77
5.5網頁中引用CSS的方法78
5.5.1行內樣式78
5.5.2內部樣式表79
5.5.3鏈入外部樣式表80
5.5.4導入外部樣式表81
5.5.5案例—制作珠寶商城客服中心頁面82
5.6文檔結構84
5.6.1文檔結構的基本概念84
5.6.2繼承85
5.6.3樣式表的層疊、特殊性與重要性86
5.素類型88
5.6.5案例—制作珠寶商城特色禮品局部頁面89
習題592
第6章CSS盒模型93
6.1盒模型的概念93
6.2邊框、外邊距與內邊距94
6.2.1邊框94
6.2.2外邊距97
6.2.3內邊距99
6.2.4案例—盒模型的演示99
6.3盒模型的尺寸101
6.3.1盒模型的寬度與高度101
6.3.素素寬度和高度的區別101
6.4盒子的margin疊加問題102
6.4.素之間的水平margin疊加102
6.4.素之間的垂直margin疊加103
6.5盒模型綜合案例—珠寶商城頂部內容105
6.6盒子的定位108
6.6.1定位屬性108
6.6.2定位方式109
6.7浮動與清除浮動113
6.7.1浮動114
6.7.2清除浮動117
6.8綜合案例—珠寶商城市場團隊簡介頁面118
6.8.1頁面布局規劃118
6.8.2頁面的制作過程119
習題6122
第7章使用CSS修飾常見素124
7.1設置字體樣式124
7.1.1字體類型124
7.1.2字體大小124
7.1.3字體粗細125
7.1.4字體傾斜125
7.1.5設置字體樣式綜合案例125
7.2設置文本樣式126
7.2.1文本水平對齊方式126
7.2.2行高127
7.2.3文本的修飾127
7.2.4段落首行縮進127
7.2.5首字下沉127
7.2.6文本的截斷128
7.2.7文本換行128
7.2.8文本的顏色128
7.2.9文本的背景顏色129
7.2.10設置文本樣式綜合案例129
7.3設置圖像樣式130
7.3.1圖像縮放131
7.3.2圖像邊框132
7.3.3背景圖像133
7.3.4背景重復133
7.3.5背景圖像定位134
7.3.6背景圖像大小136
7.4設置表格樣式137
7.4.1常用的CSS表格屬性137
7.4.2案例—使用隔行換色表格制作暢銷商品銷量排行榜140
7.5設置表單樣式142
7.5.1使用CSS修飾常用素142
7.5.2案例—制作珠寶商城會員注冊頁面146
7.6綜合案例—制作珠寶商城網購空間頁面149
7.6.1頁面布局規劃149
7.6.2頁面的制作過程150
習題7152
第8章使用CSS設置鏈接與導航154
8.1使用CSS設置鏈接154
8.1.1設置文字鏈接的外觀154
8.1.2圖文鏈接157
8.1.3按鈕式鏈接157
8.2使用CSS設置列表159
8.2.1表格布局的缺點159
8.2.2列表布局的優勢160
8.2.3CSS列表屬性160
8.2.4圖文信息列表165
8.3創建導航菜單169
8.3.1普通的超鏈接導航菜單169
8.3.2縱向列表模式的導航菜單170
8.3.3橫向列表模式的導航菜單174
8.4綜合案例—使用CSS修飾頁面和制作導航菜單177
8.4.1制作珠寶商城網購學堂主頁177
8.4.2制作珠寶商城網購學堂欄目頁186
習題8190
第9章Div+CSS布局頁面191
9.1Div+CSS布局理念191
9.1.1認識Div+CSS布局191
9.1.2正確理解Web標準191
9.1.3將頁面用Div分塊192
9.2典型的CSS布局樣式193
9.2.1兩列布局樣式193
9.2.2三列布局樣式196
9.3綜合案例—制作珠寶商城博客頁面200
9.4綜合案例—制作珠寶商城網絡服務中心頁面209
9.4.1頁面布局規劃209
9.4.2頁面的制作過程210
習題9216
第10章網頁行為語言—JavaScript218
10.1JavaScript概述218
10.2在網頁中調用JavaScript218
10.3JavaScript基本交互方法219
10.3.1信息對話框219
10.3.2選擇對話框220
10.3.3提示對話框221
10.4表單對像與交互性222
10.5制作網頁特效226
10.5.1制作網頁Tab選項卡切換效果226
10.5.2循環滾動的圖文字幕229
10.5.3幻燈片廣告232
10.5.4制作二級縱向列表模式的導航菜單234
習題10237
第11章珠寶商城前臺頁面239
11.1網站的開發流程239
11.1.1規劃站點239
11.1.2網站制作241
11.1.3測試網站241
11.1.4發布站點241
11.2設計首頁布局241
11.2.1創建站點目錄241
11.2.2頁面布局規劃242
11.3制作首頁242
11.4制作產品列表頁253
11.5制作產品明細頁256
11.6制作查看購物車頁262
習題11265
第12章珠寶商城後臺管理頁面267
12.1制作後臺管理登錄頁267
12.2制作查詢商品頁271
12.3制作添加商品頁280
12.4制作會員管理頁283
12.5欄目的整合285
習題12286
參考文獻287
本書面向Web前端開發的讀者,采用全新流行的Web標準,以Web前端開發技術三要素(HTML5、CSS3、JavaScript)等前端技術,由淺入深、完整詳細地講解采用手寫編碼編寫符合W3C標準、兼容多種瀏覽器的代碼。本書共分12章,主要內容包括:網站規劃和網頁設計基礎、HTML概述、編輯網頁文檔、網頁布局與交互、CSS基礎、CSS盒模型、使用CSS修飾常見素、使用CSS設置鏈接與導航、Div+CSS布局頁面、網頁行為語言——JavaScript、珠寶商城前臺頁面和珠寶商城後臺管理頁面。本書內容緊扣國家對高等學校培養不錯應用型、復合型人纔的技能水平和知識結構的要求,以珠寶商城項目案例的開發思路為主線,采用模塊分解、任務驅動、子任務實現和代碼設計四層結構,通過對模塊中每個任務相應知識點的講解,引導讀者學習網頁制作、設計、規劃的基本知識以及項目開發、測試的完整流程。