目錄
第1章開發網站，我們需要做些什麼 1
1.1網站需要什麼 1
1.1.1 需要HTML文件 1
1.1.2 需要DIV來“圈地” 2
1.1.3 需要CSS來定義樣式 2
1.1.4 需要JavaScript 3
1.1.5 需要空間和域名 3
1.2通過Dreamweaver開發DIV+CSS程序 4
1.2.1 安裝Dreamweaver 5
1.2.2 使用Dreamweaver 5
1.2.3 Dreamweaver的三種工作方式 6
1.2.4 通過Dreamweaver在HTML頁麵裏開發DIV 7
1.2.5 通過Dreamweaver開發CSS程序 8
1.2.6 在DIV裏引入CSS效果 9
1.3一個簡單的網頁需要包含什麼 11
1.3.1 head部分 11
1.3.2 body部分 11
1.3.3 編寫注釋 12
1.4開發一個網站的總體流程 13
1.4.1 美工先用Photoshop給齣效果 13
1.4.2 通過切圖，得到素材 14
1.4.3 搭建DIV 14
1.4.4 搭建CSS和JS效果 15
1.4.5 測試網頁 15
1.5網站的建設標準和布局方式 15
1.5.1 網站的建設標準 16
1.5.2 頁麵布局 16
1.6上機題 20
第2章HTML和XHTML 21
2.1HTML基礎 21
2.1.1 HTML概述 21
2.1.2 HTML基礎結構 22
2.2HTML標簽 23
2.2.1 基本標簽 23
2.2.2 格式標簽 25
2.2.3 文本標簽 27
2.2.4 超鏈標簽 28
2.2.5 圖像標簽 29
2.2.6 錶格標簽 30
2.2.7 分區標簽 32
2.3HTML 5簡介 34
2.3.1 HTML 5的齣現 34
2.3.2 使用HTML 5的必要性 35
2.3.3 HTML 5的新特性 36
2.4XHTML介紹 40
2.4.1 什麼是XHTML 40
2.4.2 HTML轉換成XHTML的方法 41
2.5實訓——綜閤各種標簽的網頁 44
2.6上機題 47
第3章CSS基礎知識介紹 49
3.1CSS入門 49
3.1.1 CSS的曆史 50
3.1.2 CCS3簡介 50
3.1.3 CCS3新增的功能 51
3.2CSS的基本語法 53
3.2.1 CSS選擇器 53
3.2.2 選擇器聲明 56
3.2.3 CSS 3新增的選擇器 58
3.2.4 CSS的繼承 62
3.3CSS的4種引入方式 63
3.4CSS裏的單位和值 64
3.4.1 顔色 64
3.4.2 CSS 3中新增的顔色 66
3.4.3 長度單位 69
3.4.4 通過URL引入外部資源 71
3.5實訓 CSS基本語法的演練 73
3.6上機題 75
第4章通過CSS控製字體樣式 79
4.1通過CSS控製文本樣式 79
4.1.1 定義文字顔色 79
4.1.2 通過CSS設置字體 80
4.1.3 字體粗細與斜體 82
4.1.4 定義字體大小和行高 84
4.1.5 下劃綫、頂劃綫、刪除綫 85
4.2用CSS控製字間距和對齊方式 86
4.2.1 設置字間距 87
4.2.2 控製對齊方式 87
4.3通過CSS定義樣式錶 89
4.3.1 通過CSS定義無序列錶的效果 89
4.3.2 通過CSS定義排序列錶的樣式 90
4.4CSS 3新增的文本屬性 91
4.5實訓——CSS字體樣式綜閤演練 96
4.6上機題 99
第5章通過CSS定義鏈接樣式 103
5.1針對鏈接的CSS基本概念 103
5.1.1 CSS僞類彆 103
5.1.2 用僞類定義動態超鏈接 104
5.2定義豐富的超鏈特效 106
5.2.1 給鏈接添加提示文字 106
5.2.2 按鈕式超鏈接 107
5.2.3 為超鏈添加背景圖效果 108
5.3用CSS定義針對超鏈的鼠標特效 110
5.3.1 用CSS設計鼠標的箭頭 110
5.3.2 定義鼠標的變幻效果 112
5.4實訓——用CSS美化超鏈接 113
5.5上機題 118
第6章通過CSS定義圖片樣式 121
6.1CSS定義圖片樣式 121
6.1.1 定義圖片邊框 121
6.1.2 定義圖片大小 123
6.1.3 通過CSS保證圖片不變形 124
6.1.4 定義圖片的對齊方式 126
6.2通過CSS設置文字和圖片交互的效果 129
6.2.1 設置文字環繞的效果 129
6.2.2 浮動廣告 131
6.3CSS 3新增的邊框屬性 132
6.4實訓——用CSS設計圖文並茂的效果 136
6.5通過CSS設置背景顔色 138
6.5.1 設置頁麵背景色 139
6.5.2 通過背景色給頁麵分塊 140
6.6通過CSS處理背景圖像樣式 141
6.6.1 設置頁麵背景圖樣式 141
6.6.2 設置背景圖重復的效果 141
6.6.3 定義背景圖片的位置 142
6.6.4 固定背景圖片 143
6.7CSS 3新增的背景屬性 144
6.8實訓——實現美食資訊網的菜單部分 148
6.9上機題 150
第7章通過CSS設置錶格的樣式 153
7.1錶格基礎 153
7.2用CSS設置錶格的樣式 154
7.2.1 設置錶格的顔色 154
7.2.2 設置錶格的邊框樣式 155
7.2.3 設置隔行變色的單元格樣式 157
7.2.4 設置大小和對齊方式 158
7.3實訓——用CSS搭建一個綜閤效果的錶格 160
7.4上機題 163
第8章通過CSS定義錶單樣式 167
8.1認識錶單元素 167
8.1.1 輸入域標簽<input> 167
8.1.2 文本域標簽<textarea> 168
8.1.3 選擇域標簽<select>和<option> 169
8.1.4 錶單各元素在網頁中的用法 169
8.2通過CSS設置各元素的外觀 170
8.2.1 用CSS修飾錶單元素的背景色 170
8.2.2 用CSS改變錶單元素的邊框樣式 173
8.2.3 用CSS修改錶單文字的樣式 174
8.3實訓——CSS定義錶單樣式練習 177
8.4上機題 181
第9章CSS濾鏡的應用 184
9.1濾鏡概述 184
9.2通道（Alpha） 185
9.3模糊（Blur） 186
9.4運動模糊（MotionBlur） 187
9.5透明色（Chroma） 189
9.6翻轉變換（Flip） 189
9.7光暈（Glow） 190
9.8灰度（Gray） 192
9.9反色（Invert） 193
9.10遮罩（Mask） 193
9.11陰影（Shadow） 195
9.12X射綫（X-ray） 196
9.13浮雕紋理（Emboss和Engrave） 197
9.14波浪（Wave） 198
9.15上機題 200
第10章CSS定位與DIV布局 203
10.1盒子模型 203
10.1.1 盒子模型的概念 203
10.1.2 CONTENT 204
10.1.3 BORDER 204
10.1.4 PADDING 207
10.1.5 MARGIN 208
10.2元素的定位 212
10.2.1 定位方式 212
10.2.2 CSS的定位原理 212
10.2.3 利用float定位 218
10.2.4 利用CSS堆元素定位 220
10.3塊元素和行內元素 221
10.3.1 塊元素 222
10.3.2 行內元素 223
10.4CSS 3新增的彈性盒模型 224
10.5CSS 3新增的多列布局 234
10.6實訓——用CSS定位頁麵的布局 239
10.7上機題 243
第11章用JavaScript搭建動態效果 247
11.1JavaScript概述 247
11.1.1 JavaScript的基本語法 247
11.1.2 JavaScript嵌入HTML文檔 248
11.2用JavaScript設置圖片的效果 249
11.2.1 實現相冊效果 249
11.2.2 實現圖片滑動切換效果 253
11.3針對菜單的效果 256
11.3.1 用JavaScript實現頁簽效果 256
11.3.2 用JavaScript實現下拉式菜單 258
11.3.3 用JavaScript實現滑輪式菜單效果 260
11.4針對文字的效果 262
11.4.1 文字的打字效果 262
11.4.2 帶提示文字的JavaScript特效 264
11.5上機題 266
第12章DIV+CSS布局綜述 269
12.1布局方式 269
12.1.1 用DIV將頁麵分塊 269
12.1.2 設計各塊的位置 270
12.1.3 用CSS將分布的DIV定位 270
12.2CSS排版樣式 272
12.2.1 設計上中下版式的樣式 272
12.2.2 設計固定寬度且居中的樣式 274
12.2.3 設計左中右版式的樣式 277
12.2.4 設計塊的背景色及背景圖片 280
12.2.5 內容分類顯示版式 281
12.3實訓——構建一個上下結構的頁麵 284
12.4實訓——構建一個左中右結構的頁麵 288
12.5上機題 291
第13章CSS、XML和Ajax綜閤使用方式 297
13.1XML基礎 297
13.1.1 XML的特點 297
13.1.2 XML的結構和基本語法 298
13.2XML與CSS的綜閤應用 300
13.2.1 在XML裏鏈接CSS文件 301
13.2.2 通過XML和CSS，搭建具有圖文並茂效果的案例 302
13.3Ajax與CSS的綜閤應用 304
13.3.1 Ajax概述 304
13.3.2 Ajax與CSS的綜閤應用 304
13.4實訓——XML與CSS結閤的練習 309
13.5實訓——Ajax與CSS結閤的練習 313
13.6上機題 316
第14章解決CSS開發中的常見問題 319
14.1解決瀏覽器不兼容的問題 319
14.1.1 解決字體大小不兼容的問題 319
14.1.2 解決DIV裏的float懸浮問題 321
14.1.3 容器高度的限定問題 323
14.2解決HTML和CSS的中文編碼問題 325
14.2.1 CSS與HTML頁麵的默認編碼問題 325
14.2.2 CSS中文注釋“標”的問題 327
第15章娛樂門戶網站 330
15.1網站頁麵效果分析 330
15.1.1 首頁效果分析 330
15.1.2 “店鋪”頁麵的效果分析 332
15.1.3 網站文件綜述 333
15.2規劃首頁的布局 333
15.2.1 搭建首頁頁頭部分的DIV 333
15.2.2 搭建“第一列”部分的DIV 335
15.2.3 搭建“標簽導航”部分的DIV 336
15.2.4 搭建“新進店鋪”部分的DIV 337
15.2.5 搭建“最新資訊”部分的DIV 338
15.2.6 搭建“第三列”部分的DIV 339
15.2.7 搭建頁腳部分的DIV 339
15.2.8 首頁CSS效果分析 340
15.3店鋪頁麵 341
15.3.1 商鋪資料部分的DIV 341
15.3.2 商鋪推薦部分的DIV 342
第16章旅遊酒店網站 345
16.1網站頁麵效果分析 345
16.1.1 首頁效果分析 345
16.1.2 “酒店推薦”頁麵的效果分析 346
16.1.3 網站文件綜述 347
16.2規劃首頁的布局 347
16.2.1 搭建首頁頁頭部分的DIV 348
16.2.2 搭建“推薦景點”部分的DIV 348
16.2.3 搭建“最新新聞”部分的DIV 349
16.2.4 搭建“遊玩指南”部分的DIV 350
16.2.5 搭建“在綫訂票”部分的DIV 351
16.2.6 搭建“熱門旅遊專題”部分的DIV 352
16.2.7 搭建頁腳部分的DIV 352
16.2.8 首頁CSS效果分析 354
16.3酒店推薦頁麵 354
16.3.1 酒店推薦列錶部分的DIV 354
16.3.2 推薦酒店列錶部分的DIV 356
第17章設計公司網站 359
17.1網站頁麵效果分析 359
17.1.1 首頁效果分析 359
17.1.2 “設計理念”頁麵的效果分析 361
17.1.3 網站文件綜述 361
17.2規劃首頁的布局 362
17.2.1 搭建首頁頁頭部分的DIV 362
17.2.2 搭建“網站廣告”部分的DIV 363
17.2.3 搭建“公司介紹”部分的DIV 364
17.2.4 搭建“設計服務”部分的DIV 364
17.2.5 搭建“預約登記”部分的DIV 366
17.2.6 搭建“頁腳部分”的DIV 368
17.2.7 首頁CSS效果分析 368
17.3設計理念頁麵 369
17.3.1 設計理念介紹的DIV 369
17.3.2 業務分類部分的DIV 371
第18章新聞網站 373
18.1網站頁麵效果分析 373
18.1.1 首頁效果分析 373
18.1.2 “新聞內容”頁麵的效果分析 374
18.1.3 網站文件綜述 375
18.2規劃首頁的布局 376
18.2.1 搭建首頁頁頭部分的DIV 376
18.2.2 搭建“深度新聞”部分的DIV 377
18.2.3 搭建“會議活動”部分的DIV 378
18.2.4 搭建“大圖新聞”部分的DIV 378
18.2.5 搭建“新聞報道”部分的DIV 379
18.2.6 搭建“名人博客”部分的DIV 380
18.2.7 搭建頁腳部分的DIV 380
18.2.8 首頁CSS效果分析 381
18.3新聞內容頁麵 382
18.3.1 分類列錶部分的DIV 382
18.3.2 新聞文章部分的DIV 384
附錄 網站模闆 387
· · · · · · (收起)