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