Web前端設(shè)計(jì)與制作（HTML CSS jQuery）

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