Web前端設計與制作（HTML CSS jQuery）

第1篇網頁基礎知識
第1章網頁布局基礎31.1Web前端技術概述3
1.1.1萬維網與W3C3
1.1.2關于Web前端技術4
1.1.3網站與網頁4
1.2認識HTML5
1.2.1關于HTML5
1.2.2HTML結構文件6
1.3CSS樣式7
1.3.1關于CSS的調用7
1.3.2關于選擇器10
1.3.3框模型介紹12
1.3.4CSS的定位13
1.4關于網頁布局15
1.4.1網頁布局的相關技術15
1.4.2網頁布局的流程16
1.4.3網頁布局的HTML技術17
1.5DIV CSS頁面布局基礎17
1.5.1單欄式布局設計17
1.5.2二欄式布局設計19
1.5.3三欄式布局設計21
1.6任務拓展24
1.7本章小結24
習題25
第2章網頁圖文排版26
2.1設計圖文版面26〖2〗〖4〗Web前端設計與制作——HTML CSS jQuery目錄〖3〗2.1.1制作網頁文字版面26
2.1.2制作網頁圖片版面34
2.1.3制作網頁圖文混排版面37
2.2插入多媒體44
2.2.1制作滾動的文本和圖片頁面44
2.2.2制作背景音樂頁面49
2.2.3制作視頻混排頁面55
2.2.4制作動畫混排頁面59
2.3任務拓展62
2.4本章小結63
習題63
第3章鏈接與導航設計64
3.1關于超鏈接64
3.1.1理解超鏈接64
3.1.2理解路徑65
3.1.3創(chuàng)建文件鏈接65
3.2利用文字實現(xiàn)超級鏈接66
3.2.1制作面包屑導航66
3.2.2制作水平欄導航67
3.2.3制作書簽導航70
3.3利用圖片實現(xiàn)超級鏈接74
3.3.1制作圖片水平欄導航74
3.3.2制作圖像局部導航75
3.4關于其他鏈接76
3.4.1下載文件的鏈接77
3.4.2電子郵件鏈接78
3.5任務拓展80
3.6本章小結80
習題80
第4章網頁欄目設計82
4.1關于網頁欄目82
4.1.1網站欄目的含義82
4.1.2網站欄目的策劃82
4.2常用欄目設計83
4.2.1制作簡易式欄目83
4.2.2制作典型式欄目87
4.3TAB式欄目設計91
4.4視頻欄目設計93
4.5滾動式欄目設計95
4.5.1制作左右滾動式欄目96
4.5.2制作上下滾動式欄目102
4.6任務拓展105
4.7本章小結105
習題105
第5章表單頁面設計106
5.1表單概述106
5.1.1表單的概念106
5.1.2創(chuàng)建表單106
5.1.3表單元素107
5.1.4表單布局112
5.2搜索表單設計113
5.2.1表單及其作用113
5.2.2制作百度搜索頁面114
5.3跟帖評論表單設計116
5.3.1表單及其作用116
5.3.2制作跟帖評論頁面116
5.4注冊表單設計120
5.4.1表單及其作用120
5.4.2制作賬戶注冊頁面122
5.5任務拓展128
5.6本章小結128
習題129
第6章框架網頁設計130
6.1關于框架網頁130
6.2制作導航框架頁131
6.2.1關于導航框架131
6.2.2制作導航框架131
6.3制作綜合框架頁135
6.3.1關于框架的嵌套135
6.3.2制作綜合框架135
6.4制作浮動框架頁139
6.4.1關于浮動框架139
6.4.2制作浮動框架140
6.5任務拓展142
6.6本章小結142
習題143
第7章應用jQuery144
7.1關于jQuery144
7.1.1jQuery的概念144
7.1.2jQuery的原理與運行機制144
7.1.3jQuery運行環(huán)境145
7.2利用jQuery設計網站導航146
7.2.1制作普通下拉菜單147
7.2.2制作級聯(lián)菜單150
7.3利用jQuery設計Tab選項卡153
7.3.1橫向選項卡設計153
7.3.2縱向選項卡設計155
7.4利用jQuery設計圖片效果158
7.4.1制作圖片切換效果158
7.4.2制作圖片滾動效果161
7.5任務拓展163
7.6本章小結164
習題164
第8章移動產品網頁設計165
8.1了解jQuery Mobile165
8.1.1關于jQuery Mobile165
8.1.2安裝jQuery Mobile166
8.2創(chuàng)建第一個移動產品網站167
8.2.1制作單容器頁面結構網站167
8.2.2制作多容器頁面結構網站170
8.2.3制作可折疊內容頁面174
8.3網站導航欄設計177
8.3.1制作導航工具欄177
8.3.2制作固定導航欄181
8.4使用布局網格185
8.4.1兩列布局185
8.4.2三列布局186
8.4.3多行多列布局186
8.5創(chuàng)建列表視圖190
8.5.1制作文字列表190
8.5.2制作圖文列表194
8.6表單設計196
8.7任務拓展203
8.8本章小結204
習題204
第2篇項 目 開 發(fā)
第9章企業(yè)宣傳網站——舒適家居網2079.1客戶需求207
9.2網站分析207
9.2.1網頁主題分析207
9.2.2網頁風格定位208
9.3網站搭建209
9.3.1建立網站結構209
9.3.2建立網站主頁210
9.4技術準備210
9.4.1網頁DIV區(qū)域劃分210
9.4.2網頁效果圖切片212
9.5添加網頁結構和樣式214
9.5.1建立網頁主體輪廓214
9.5.2建立網頁內容區(qū)域215
9.5.3建立網頁頁腳區(qū)域220
9.6常規(guī)添加Flash動畫220
9.7本章小結221
第10章彩宇商貿公司網站222
10.1客戶需求222
10.2網站分析222
10.2.1網頁主題分析222
10.2.2網頁風格定位223
10.3網站技術準備224
10.3.1網頁效果圖切片224
10.3.2網頁DIV區(qū)域劃分225
10.4添加網頁結構和樣式227
10.4.1建立網頁主體227
10.4.2建立網頁頁頭區(qū)域228
10.4.3建立網頁內容區(qū)域231
10.4.4建立網頁頁腳區(qū)域236
10.5利用jQuery添加網頁特效237
10.6本章小結238
第11章弘葉美容美發(fā)公司網站239
11.1客戶需求239
11.2網站分析239
11.2.1網頁主題分析239
11.2.2網頁風格定位240
11.3網站技術準備240
11.3.1網頁效果圖切片241
11.3.2網頁DIV區(qū)域劃分242
11.4添加網頁結構和樣式243
11.4.1建立網頁主體243
11.4.2建立網頁頁頭區(qū)域244
11.4.3建立網頁內容區(qū)域245
11.4.4建立網頁頁腳區(qū)域249
11.5利用jQuery添加網頁特效249
11.6本章小結250
參考文獻251