巧學巧用HTML CSS JavaScript制作網(wǎng)頁

第一部分 HTML
第1章 從零起步 1
1.1 網(wǎng)絡的基本概念 1
1.2 網(wǎng)頁概述 3
1.2.1 網(wǎng)頁技術 3
1.2.2 網(wǎng)頁分類 3
1.3 HTML簡介 3
1.3.1 什么是HTML 4
1.3.2 創(chuàng)建第一個HTML文件 4
1.3.3 HTML文件結構 7
1.3.4 熱身運動 8
實例1.1 注釋標記 9
實例1.2 標題標記 9
實例1.3 設置文字顏色 10
實例1.4 藍色粗斜字體 11
實例1.5 插入圖片標記 12
1.4 網(wǎng)頁源文件的獲取 12
1.4.1 直接查看源文件 13
1.4.2 保存網(wǎng)頁 13
第2章 HTML文件中文字的使用 15
2.1 對文字的編排 15
2.1.1 文字排版的簡單操作 15
實例2.1 文字的普通顯示 15
實例2.2 HTML編排標記的加入 16
2.1.2 文字單行顯示 17
實例2.3 不換行標記的使用 17
2.1.3 文字居中顯示 18
實例2.4 所有文字居中顯示 18
2.1.4 文字段落的縮進 19
實例2.5 文字段落的縮進 19
2.1.5 文字內容的原始版面顯示 20
實例2.6 原始版面 20
2.1.6 標記屬性的應用 21
實例2.7 段落的居中對齊 21
實例2.8 標題文字的位置控制 22
實例2.9 body 標記中的設置背景圖片屬性 23
實例2.10 水平分割線標記及其相關屬性 24
實例2.11 noshade屬性的使用 25
實例2.12 屬性的就近原則 26
2.2 多種多樣的網(wǎng)頁文字 27
2.2.1 不同的文字格式 27
實例2.13 文字字體樣式、顏色的設置 27
2.2.2 對文字格式的進一步應用 28
實例2.14 多種特定顯示方式的HTML標記的綜合使用 28
2.2.3 關于技術專業(yè)符號的顯示 30
實例2.15 特殊字符的應用 30
實例2.16 上、下標標記的使用 30
2.2.4 滾動字幕 31
實例2.17 滾動字幕的制作 31
2.3 文字列表的使用 33
2.3.1 序列提綱 33
實例2.18 編號列表的制作 33
實例2.19 改變編號序號 34
實例2.20 從特定序號開始 35
2.3.2 非序列提綱 36
實例2.21 非編號列表的制作 36
實例2.22 改變標號樣式 37
實例2.23 3種不同非編號列表的比較 38
2.3.3 說明式列表標記 39
實例2.24 說明式列表標記的使用 39
2.3.4 列表標記之間的套用 40
實例2.25 標記間的相互套用 41
第3章 HTML文件中圖片的使用 43
3.1 網(wǎng)頁中的圖片格式 43
3.2 絢麗多姿的網(wǎng)頁 43
3.2.1 一個簡單的圖片網(wǎng)頁 43
實例3.1 圖片的插入 44
3.2.2 圖片標記屬性的應用 45
實例3.2 圖片寬度和高度的控制 45
實例3.3 圖片邊框的控制 46
3.2.3 圖片與文字的結合 47
實例3.4 控制圖片左右的空白區(qū)域大小 47
實例3.5 控制圖片上下的空白區(qū)域大小 48
實例3.6 控制文字相對于圖片基線居于上、中、下的位置 49
實例3.7 無align屬性控制的情況下讓文字分別顯示于圖片的左右
兩側 50
實例3.8 文字相對圖片居右顯示 51
實例3.9 文字相對圖片居左顯示 52
3.2.4 優(yōu)化圖片的顯示速度 52
實例3.10 低分辨率顯示圖片 53
實例3.11 文字代替圖片的顯示 53
3.2.5 圖片的滾動 55
實例3.12 圖片從右到左滾動顯示的制作 55
實例3.13 圖片兩端來回滾動顯示的制作 56
3.3 實戰(zhàn) 56
實例3.14 一個簡單網(wǎng)頁的制作 57
第4章 超鏈接的建立 59
4.1 老馬未必識途 59
4.1.1 路徑問題的引出 59
實例4.1 一個普通的圖片網(wǎng)頁 59
4.1.2 相對路徑和絕對路徑的應用 60
4.2 超鏈接的建立 62
4.2.1 文字的超鏈接 62
實例4.2 文字超鏈接的建立 62
4.2.2 能表達點擊與否信息的超鏈接 63
實例4.3 文字鏈接顏色的設置 63
4.2.3 特定目標的鏈接 64
實例4.4 特定目標的鏈接 64
4.2.4 圖片的超鏈接 66
實例4.5 圖片超鏈接的建立 66
4.2.5 熱點區(qū)域 67
實例4.6 圓形熱點區(qū)域的制作 67
實例4.7 矩形熱點區(qū)域的制作 68
實例4.8 多邊形熱點區(qū)域的制作 69
4.2.6 以新窗口顯示鏈接頁面 69
實例4.9 打開新窗口 69
4.3 超鏈接的其他應用 70
4.3.1 URL地址的鏈接 70
實例4.10 HTTP協(xié)議的鏈接 70
實例4.11 FTP站點的鏈接 71
實例4.12 BBS站點的鏈接 72
4.3.2 電子郵件的鏈接制作 73
實例4.13 郵件的鏈接 73
4.4 網(wǎng)頁的自動更新 73
實例4.14 網(wǎng)頁自動更新鏈接 73
4.5 Dreamweaver中超鏈接的建立 74
4.5.1 Dreamweaver簡介 74
4.5.2 使用Dreamweaver打開一個HTML文檔 75
4.5.3 在Dreamweaver中新建一個文檔 76
4.5.4 圖片的插入 76
4.5.5 超鏈接的建立 77
4.5.6 使用Dreamweaver來制作圖片的熱點區(qū)域 78
第5章 表格的應用 81
5.1 表格的建立 81
5.1.1 一個最簡單的表格 81
實例5.1 一個最簡單的表格 81
5.1.2 多單元表格 82
實例5.2 創(chuàng)建3行2列的表格 82
5.2 各種表格樣式 83
5.2.1 表格邊框的設置 83
實例5.3 表格邊框的設置 83
5.2.2 表格高寬的控制 84
實例5.4 表格高寬的設置 84
5.2.3 表格相關顏色的設置 85
實例5.5 表格邊框以及背景顏色的設置 85
5.2.4 表格的水平位置 86
實例5.6 表格水平位置的控制 86
5.2.5 表格行的控制 87
實例5.7 表格單行高度的設置 88
實例5.8 利用align屬性控制每一行中內容的水平位置 89
實例5.9 利用valign屬性控制每一行中內容的垂直位置 90
5.2.6 單元格的設置 91
實例5.10 分別設置表格單元格的邊框以及背景顏色 91
實例5.11 利用align、valign屬性控制每一單元格中內容的水平和
垂直位置 92
5.2.7 標題標記 93
實例5.12 為表格設置名稱和表格內容以標題文字進行顯示 93
5.2.8 表格中單元格的合并 94
實例5.13 水平合并相鄰的兩個單元格 94
實例5.14 垂直合并相鄰的3個單元格 95
實例5.15 水平、垂直合并單元格的混合使用 97
5.2.9 表格中圖片的應用 98
實例5.16 在單元格中插入圖片以及設置單元格的背景圖像 98
5.2.10 表格的嵌套 99
實例5.17 表格的嵌套 99
5.3 利用表格來布局網(wǎng)頁 100
實例5.18 使用表格布局網(wǎng)頁 102
5.4 在Dreamweaver中表格的使用 103
5.4.1 Dreamweaver中表格的創(chuàng)建 103
5.4.2 空字符的自動生成 105
實例5.19 空字符的存在 105
5.4.3 表格的屬性設置 107
5.5 實戰(zhàn) 110
5.5.1 網(wǎng)頁的初步設計 111
5.5.2 切片的制作 111
5.5.3 表格的制作 113
5.6 網(wǎng)頁布局視圖 115
5.6.1 布局視圖的切換 115
5.6.2 布局視圖的創(chuàng)建 116
5.6.3 布局表格的修改 116
5.6.4 布局視圖的屬性設置 117
5.6.5 布局視圖的實際應用 118
5.7 圖層技術 120
5.7.1 圖層的創(chuàng)建 120
5.7.2 創(chuàng)建嵌套層 121
5.7.3 層的屬性設置 121
5.7.4 層的狀態(tài)顯示 122
5.7.5 圖層的實際應用 122
5.7.6 層與表格的互換 123
第6章 窗口框架的應用 125
6.1 網(wǎng)頁中的網(wǎng)頁 125
6.1.1 窗口框架的建立 125
實例6.1 將窗口水平分為兩部分 125
實例6.2 將窗口垂直分為三部分 126
實例6.3 窗口的水平及垂直混合分割 127
6.1.2 子窗口的邊框設置 128
實例6.4 將窗口邊框加粗 128
實例6.5 隱藏所有邊框 129
實例6.6 隱藏子窗口邊框 129
6.1.3 子窗口的設置 130
實例6.7 在子窗口中插入網(wǎng)頁 130
6.1.4 窗口滾動條的設置 131
實例6.8 在右子窗口中不顯示滾動條 131
6.1.5 窗口邊框的拖動 131
6.1.6 窗口的導航顯示 132
實例6.9 在子窗口中加入顯示導航信息的網(wǎng)頁 132
實例6.10 在上層窗口中顯示網(wǎng)頁 133
6.2 神奇的iframe標記 135
6.2.1 iframe窗口 135
實例6.11 在iframe窗口中顯示所鏈接的網(wǎng)頁 135
6.2.2 直接設置網(wǎng)頁 136
實例6.12 在iframe窗口中直接顯示網(wǎng)頁 136
6.2.3 引用多媒體文件 137
實例6.13 在iframe窗口中播放Flash電影文件 137
6.3 在Dreamweaver中創(chuàng)建窗口框架 138
6.3.1 窗口框架的創(chuàng)建 138
6.3.2 混合窗口的創(chuàng)建 139
6.3.3 框架屬性的設置 141
6.3.4 使用Dreamweaver在子窗口中插入網(wǎng)頁 141
第7章 HTML中多媒體文件的使用 145
7.1 多媒體的鏈接 145
實例7.1 音樂文件以及影視文件的鏈接 145
7.2 將多媒體嵌入網(wǎng)頁 146
實例7.2 音樂文件的嵌入 146
實例7.3 影視文件的嵌入 147
7.3 在網(wǎng)頁中加入背景音樂 148
實例7.4 網(wǎng)頁背景音樂的制作 148
7.4 其他多媒體文件的插入 149
7.4.1 Flash電影文件的插入 149
7.4.2 Flash按鈕的制作 151
7.4.3 Flash文本的制作 152
第二部分 CSS
第8章 CSS初步 153
8.1 CSS的概念 153
8.2 CSS的應用 153
8.2.1 CSS的優(yōu)點 154
8.2.2 熱身運動 154
實例8.1 CSS的樣式聲明 154
實例8.2 CSS樣式的選擇性使用 155
第9章 文字的設置 159
9.1 尺度單位 159
9.2 掌控文字 160
9.2.1 文字的字體設置 160
實例9.1 同時設置多種字體 160
9.2.2 文字的字體效果 161
實例9.2 設置斜體樣式 161
9.2.3 文字的粗細控制 162
實例9.3 控制文字的粗細 162
9.2.4 文字的大小控制 163
實例9.4 控制文字的大小 164
實例9.5 設置粗斜體樣式 165
9.2.5 文字的加線效果 166
實例9.6 文字的加線效果 166
9.2.6 英文字母的大小寫轉換 167
實例9.7 英文字母大小寫的相互轉換 167
實例9.8 小寫字母轉換為大寫字母 168
9.3 精細排版 169
9.3.1 段落的首行縮進 169
實例9.9 控制首行縮進 169
實例9.10 控制首行凸出 170
9.3.2 字符間距 171
實例9.11 控制字符間距 171
9.3.3 段落行距 172
實例9.12 控制段落行距 172
9.3.4 段落的位置控制 173
實例9.13 控制段落水平位置 173
實例9.14 控制段落垂直位置 175
實例9.15 化學方程式和數(shù)學式 176
9.4 矩形模塊化 177
9.4.1 立體按鈕的制作 177
實例9.16 立體按鈕 177
9.4.2 模塊邊界的設置 178
實例9.17 分別設置模塊周圍的空白區(qū)域 178
實例9.18 統(tǒng)一設置模塊周圍的空白區(qū)域 179
9.4.3 模塊邊框的設置 179
實例9.19 模塊邊框寬度的設置 180
實例9.20 模塊邊框顏色的設置 181
實例9.21 模塊邊框樣式的設置 183
實例9.22 模塊邊框的統(tǒng)一設置 184
9.4.4 模塊內邊界的設置 185
實例9.23 設置模塊邊界與模塊內容的間距 185
9.5 列表中的圖像符號 186
實例9.24 圖像符號 186
實例9.25 設置各種序列符號 187
第10章 背景的設置 189
10.1 顏色的設置方法擴充 189
10.1.1 以顏色名稱設置 189
10.1.2 以十六進制數(shù)設置 189
10.1.3 以RGB函數(shù)設置 190
10.2 背景顏色的設置 190
10.2.1 文字的顏色設置 190
實例10.1 紅色的文字 190
10.2.2 網(wǎng)頁以及文字背景顏色的設置 191
實例10.2 紅色的網(wǎng)頁背景，黃色的文字背景 191
10.3 背景圖片的設置 192
10.3.1 網(wǎng)頁以及文字的圖片背景設置 192
實例10.3 設置網(wǎng)頁的圖片背景以及文字的圖片背景 192
10.3.2 背景圖片的并排設置 193
實例10.4 背景圖片的橫向平鋪 193
實例10.5 背景圖片的縱向平鋪 194
實例10.6 只顯示單個背景圖片 194
10.3.3 圖片的固定設置 195
實例10.7 固定背景圖片 195
10.3.4 圖片的定位設置 196
實例10.8 控制背景圖片的位置 197
第11章 美化網(wǎng)頁 199
11.1 超鏈接的多樣化 199
11.1.1 鏈接顏色的設置 199
實例11.1 鏈接顏色的設置 199
11.1.2 鏈接字體的變化 200
實例11.2 鏈接字體的變化 200
11.1.3 鏈接的下劃線設置 201
實例11.3 去除鏈接文字的下劃線 201
11.2 華麗的滾動條 202
實例11.4 立體滾動條的制作 202
11.3 代表不同意義的光標樣式 203
實例11.5 變換光標樣式 203
第12章 區(qū)域與層的概念 207
12.1 區(qū)域的概念 207
12.1.1 區(qū)域的定義 207
實例12.1 制作3個相鄰的區(qū)域 207
12.1.2 區(qū)域的定位 208
實例12.2 區(qū)域的定位 208
實例12.3 區(qū)域的相對位置 209
實例12.4 區(qū)域的默認位置 210
12.2 網(wǎng)頁中組件的分段管理 211
實例12.5 分段顯示不同的文字字體 211
實例12.6 分段顯示不同的文字背景 213
12.3 層的概念 214
實例12.7 區(qū)域的重疊 215
實例12.8 改變區(qū)域的重疊順序 216
12.3.1 三維空間的建立 217
實例12.9 圖片和文字的層次建立 217
12.3.2 文字的立體以及陰影效果 218
實例12.10 文字的立體效果 218
實例12.11 文字的陰影效果 219
第13章 CSS與HTML的結合方式 221
13.1 HTML的內部定義 221
13.1.1 在HTML標記內的直接定義 221
實例13.1 在標記內直接定義 221
13.1.2 對HTML標記的直接定義 222
實例13.2 對標記直接定義 222
13.1.3 利用class屬性的選擇性定義 223
實例13.3 class屬性的選擇性定義 223
13.1.4 利用id屬性的選擇性定義 224
實例13.4 id屬性的選擇性定義 224
13.1.5 結構化定義 225
實例13.5 結構化定義 225
13.2 HTML的外部定義 226
實例13.6 以嵌入方式調用CSS文件 226
實例13.7 以鏈接方式調用CSS文件 227
13.3 CSS的調用順序 228
實例13.8 CSS的調用順序 228
13.4 CSS中的繼承性質 229
13.4.1 標記中的包含繼承 229
實例13.9 包含繼承 230
實例13.10 定義沖突 230
13.4.2 標記中的相互繼承 231
實例13.11 上下選擇符 231
實例13.12 一次定義三組標記 232
13.5 在Dreamweaver中使用CSS 233
13.5.1 調用自定義的樣式表 233
13.5.2 編輯CSS樣式表 234
13.5.3 創(chuàng)建CSS樣式表 235
13.5.4 在Dreamweaver中使用CSS樣式 236
第14章 CSS中的濾鏡 237
14.1 什么是濾鏡 237
14.2 帶有濾鏡效果的圖片網(wǎng)頁 237
14.2.1 alpha濾鏡 237
實例14.1 圓形透明漸層效果 238
實例14.2 矩形透明漸層效果 239
實例14.3 多參數(shù)的混合使用 240
14.2.2 blur濾鏡 241
實例14.4 動態(tài)模糊效果 241
14.2.3 filph濾鏡和filpv濾鏡 242
實例14.5 翻轉圖片 243
14.2.4 gray濾鏡 244
實例14.6 黑白圖片 244
14.2.5 invert濾鏡 245
實例14.7 底片效果 245
14.2.6 xrey濾鏡 246
實例14.8 X光效果 246
實例14.9 黑白效果、底片效果、X光效果的相互比較 247
14.2.7 波浪效果 248
實例14.10 波浪效果 248
14.2.8 chroma濾鏡 249
實例14.11 設置透明色 249
14.2.9 dropshadow濾鏡 250
實例14.12 陰影效果 250
14.2.10 glow、mask和shadow濾鏡 251
實例14.13 光暈效果 252
實例14.14 印章效果 253
實例14.15 陰影動態(tài)效果 254
14.3 濾鏡的轉換 255
14.3.1 漸變轉化濾鏡 255
實例14.16 控制文字、圖片的顯示 256
實例14.17 控制文字、圖片的轉換 258
實例14.18 控制文字和圖片的相互轉換 260
14.3.2 動作轉換濾鏡 261
實例14.19 設置文字、圖片的動作轉換效果 262
實例14.20 設置文字、圖片相互轉換的動作效果 264
實例14.21 網(wǎng)頁的動作轉換效果 265
第三部分 JavaScript
第15章 JavaScript初識 269
15.1 JavaScript的基本概念 269
15.1.1 JavaScript語言的特點 269
實例15.1 問候語句 270
實例15.2 調用JavaScript文件 271
15.1.2 JavaScript的數(shù)據(jù)結構 272
實例15.3 使用while語句制作標題文字 275
實例15.4 使用for語句制作標題文字 276
實例15.5 圖像的交叉顯示 277
實例15.6 顯示不同的文字 278
15.2 JavaScript中函數(shù)的使用 279
15.2.1 有參函數(shù) 279
實例15.7 斜桿的遞加 279
15.2.2 無參函數(shù) 280
實例15.8 當前時間的獲取 280
15.3 JavaScript中的對象 281
實例15.9 個人信息的設置 282
15.4 行為 284
15.4.1 JavaScript中的行為 284
實例15.10 彈出新窗口 285
實例15.11 屏蔽對圖片的操作 286
實例15.12 全屏顯示窗口 287
15.4.2 Dreamweaver中行為的應用 287
第16章 JavaScript中的時間對象 291
16.1 時間對象的方法 291
16.2 時間對象的實際應用 292
16.2.1 時間的顯示 292
實例16.1 顯示當前時間 292
16.2.2 日期的顯示 294
實例16.2 顯示當前日期 294
16.2.3 進站及停留時間的顯示 295
實例16.3 顯示停留時間 295
16.2.4 倒計時的制作 297
實例16.4 以2005年元月1日為基準倒計時 297
第17章 JavaScript中的文字對象 301
17.1 文字對象的屬性和方法 301
17.2 文字對象的實際應用 302
17.2.1 計算字符串長度 302
實例17.1 計算字符串長度 302
17.2.2 string對象其他方法的應用 303
實例17.2 其他方法的應用 303
17.2.3 字符的檢索以及替換 305
實例17.3 字符的檢索以及替換 305
第18章 JavaScript中的圖片應用 309
18.1 圖像對象的屬性 309
18.2 圖像對象的實際應用 309
18.2.1 濾鏡的動態(tài)效果 310
實例18.1 alpha濾鏡的動態(tài)效果 310
實例18.2 wave濾鏡的動態(tài)效果 311
18.2.2 圖片的閃爍效果 312
實例18.3 圖片的閃爍效果 312
18.2.3 數(shù)組的使用 313
實例18.4 圖片的自動切換 313
18.2.4 圖片的預先載入 315
第19章 JavaScript在表單中的應用 317
19.1 表單總覽 317
19.1.1 單行文本框 317
實例19.1 一個輸入框 317
19.1.2 密碼文本框 318
實例19.2 一個密碼框 318
19.1.3 單選框 319
實例19.3 兩個單選框 319
19.1.4 復選框 320
實例19.4 多個復選框 320
19.1.5 傳送按鈕和清除按鈕 321
實例19.5 傳送按鈕和清除按鈕 321
19.1.6 圖片按鈕 322
實例19.6 圖片按鈕 322
19.1.7 按鈕 322
實例19.7 普通按鈕的制作 322
19.1.8 下拉列表框 323
實例19.8 下拉列表框 323
實例19.9 列表選項平鋪 324
19.1.9 多行文本框 325
實例19.10 多行文本框 325
19.2 表單的實際應用 326
19.2.1 計算器的制作 326
實例19.11 計算器的制作 326
19.2.2 通過數(shù)組訪問菜單 329
實例19.12 注冊信息的統(tǒng)一顯示 329
19.2.3 表單數(shù)據(jù)的檢測 331
實例19.13 信息檢測 331
第20章 JavaScript中窗口對象的應用 335
20.1 窗口對象的方法 335
20.2 窗口對象的實際應用 336
20.2.1 打開新窗口 336
實例20.1 打開新窗口 336
實例20.2 在打開的新窗口中只加入狀態(tài)欄 337
20.2.2 打開多個新窗口 338
實例20.3 打開3個不同的窗口 338
20.2.3 全屏顯示 339
實例20.4 全屏顯示 339
實例20.5 窗口的定位 340
實例20.6 無標題欄的全屏顯示 341
20.2.4 打開窗口的動態(tài)變化 341
實例20.7 打開窗口的動態(tài)變化 342
20.2.5 窗口內邊框的設置 343
實例20.8 設置窗口內邊框為紅色實線 343
20.2.6 關閉窗口 344
實例20.9 關閉窗口 344
實例20.10 新窗口的關閉 345
20.2.7 窗口焦點的控制 346
實例20.11 控制窗口的焦點 346
實例20.12 cookie的使用 347
20.2.8 輸入和輸出對話框的使用 349
實例20.13 進入網(wǎng)站的口令設置 349
第21章 JavaScript中其他對象的應用 353
21.1 瀏覽器信息的獲取 353
實例21.1 瀏覽器信息 353
實例21.2 判斷瀏覽器類別 354
21.2 網(wǎng)頁信息的獲取 355
實例21.3 返回、前進按鈕 355
實例21.4 鏈接地址信息 356
21.3 首頁和收藏夾的設置 357
實例21.5 設置為首頁和加入收藏夾 358
21.4 瀏覽器狀態(tài)欄的信息顯示 359
實例21.6 狀態(tài)欄信息顯示 359
21.5 隨機顯示文字 360
實例21.7 隨機顯示文字 360
21.6 JavaScript腳本 361
21.6.1 靜止浮動層的制作 361
21.6.2 跟隨鼠標的文字 363
21.6.3 動態(tài)下拉菜單的制作 365
附錄 網(wǎng)頁效果80例 369