HTML+CSS網頁開發技術精解

HTML+CSS網頁開發技術精解

圖像元素的對齊屬性align 元素的浮動屬性float 元素的定位屬性position

圖書信息

HTML+CSS網頁開發技術精解

吳玉中 等 編著
ISBN 978-7-121-14938-2
2012年1月出版
定價:59.80元(含光碟1張)
16開
424頁
從學到會,以練求精

內容簡介

本書學習的三大技術是Web標準的主要組成部分,在Web標準中,HTML/XHTML負責頁面結構,CSS負責樣式表現,JavaScript負責動態行為。本書不僅僅將筆墨局限於語法講解上,每一個知識點均相應配以一個實例,通過邊分析代碼邊查看結果,以一種可視化的方式來學習語言,避免了單純學習語法的枯燥與乏味,使讀者易於接受。
本書共21章,由5部分組成,由淺入深地介紹了HTML、CSS、JavaScript。第1部分講述了HTML的基礎知識,包括教你如何編寫HTML,如何運用這些標記在Web頁面中生成特殊效果。第2部分介紹了(X)HTML與CSS概述,並對CSS的各個語法標記的套用進行了實例講解。第3部分介紹了盒子模型的概念、盒子的浮動與定位方式、CSS與DIV的布局方法。第4部分介紹了JavaScript語法基礎、JavaScript程式、JavaScript標識符和變數、JavaScript運算符和表達式、JavaScript中事件的分析、JavaScript中的不同對象。第5部分採用最流行的CSS+DIV布局的方法,綜合講述了網站的製作全過程。
本書注重基礎、講究實用、選材精當、深入淺出,本書可作為從事網頁設計與製作、網站開發、網頁編程等行業人員參考,也可以作為普通高校計算機及相關專業教材、高職高專和社會培訓班的教材。

前 言

近年來,隨著網路信息技術的廣泛套用,網際網路正逐步改變著人們的生活方式和工作方式。越來越多的個人、企業等紛紛建立自己的網站,利用網站來宣傳推廣自己。人們的工作、生活和交流方式發生了巨大的改變,網頁技術已經成為當代青年學生必備的知識技能。目前大部分製作網頁的方式都是運用可視化的網頁編輯軟體,這些軟體的功能相當強大,使用非常方便。而今天,Internet領域已經改變了太多,用軟體點幾下、拖幾下即可完成整個網站的方法已經完全不適用。
早期只需要使用HTML即可單獨完成前台網頁製作,而今天一個專業網頁設計者需要學習整個Web標準體系才能完成規範的前台網頁製作。在Web標準中,HTML/XHTML負責頁面結構,CSS負責樣式表現,JavaScript負責動態行為。本書集合這3種技術帶領初學者入門,相比複雜的後台技術而言,初學者學習前台技術將更加簡單、直觀。

本書主要內容

本書從初學者的角度出發,展現網頁製作獨特的魅力,使技術學習不再枯燥、教條。網頁製作中融入了很多設計的理念,很多讀者會發現,原來冷冰凍的代碼竟能如此有趣。本書不僅將筆墨局限於語法講解上,還通過一個個鮮活、典型的實戰案例來達到學以致用的目的。從本書的目錄可見一斑,每個語法都有相應的案例,在本書的最後還有綜合案例。本書共21章,由5部分組成,由淺入深地介紹了HTML、CSS、 JavaScript。
第1篇 HTML篇
本部分由第1章至第9章組成,主要講述了HTML的基礎知識,教你如何編寫HTML,如何運用這些標記在Web頁面中生成特殊效果,並且對每章節的屬性和方法進行了詳細的解析,同時還運用了大量的案例加以說明。
第2篇 CSS基礎篇
本部分由第10章至第16章組成。在本部分中,首先,介紹了(X)HTML與CSS概述。然後,用充分的案例來講述CSS的各個語法標記的套用。
第3篇 CSS布局篇
本部分由第17章至第19章組成。在本部分中,介紹了盒子模型的概念、盒子的浮動與定位方式、CSS與DIV的布局方法。
第4篇 JavaScript篇
本部分由第20章組成。在本部分中,主要介紹了JavaScript語法基礎、JavaScript程式、JavaScript標識符和變數、JavaScript運算符和表達式、JavaScript中事件的分析、JavaScript中的不同對象。
第5篇 綜合案例篇
本部分由第21章組成,採用最流行的CSS+DIV布局的方法,綜合講述了網站的製作全過程。
學習流程圖

本書主要特點

完善的知識結構
本書從網頁製作的實際角度出發,將所有HTML、CSS和JavaScript元素進行歸類,每個標記的語法、屬性和參數都有完整詳細的說明,信息量大,知識結構完善。
實例眾多,步驟詳細
每一個知識點均相應配以一個案例,通過邊分析代碼邊查看結果,以一種可視化的方式來學習語言,避免了單純學習語法的枯燥與乏味,使讀者易於接受。所有案例都具有代表性,著重解決網頁相關工作中的實際問題。
由淺入深,循序漸進
本書的編排採用循序漸進的方式,適合初學者逐步掌握複雜的頁面前台製作。本書在編排上,不僅章與章之間遵循由淺入深的原則,每一章中的節與節之間也同樣遵循這一原則。這樣,本書就更接近於一本完整的學習教材。
圖文並茂,重點突出
書中每個實例的演示效果都用圖片的方式展示出來,做到明確直觀。讀者無須自己進行編碼,也可以看到相應的運行結果或者顯示效果。在不便上機操作的情況下,讀者也可以根據書中的實例和效果圖進行分析和比較。
每章最後配有習題,讓讀者總結提高,如果自己不能解答的話,我們還給出了答案,以加強學習。

本書讀者對象

專業的網頁製作人員。
廣大的網頁設計愛好者。
網頁程式代碼編寫人員。
專業的網頁維護人員。
培訓機構、高等院校及職業院校的學生。
從事網頁代碼最佳化的工作人員。
擁有個人站點的站長。
本書是集體的結晶,除了署名外,另外參加編寫和提供素材的還有鄧靜靜、李銀修、劉宇星、鄧方方、張禮明、孫良軍楊建偉李曉民、孫良志、劉中華、晁輝、陳石送、孫啟雲、王方等。參加本書編寫的人員均為從事網頁教學工作的資深教師和大型商業網站建設經驗的資深網頁設計師,有著豐富的教學經驗和網頁設計經驗。由於時間所限,書中疏漏之處在所難免,懇請廣大讀者朋友批評指正。

目 錄

第1篇 HTML篇
第1章 網頁標識語言HTML基礎 2
1.1 HTML語言概述 3
1.1.1 認識HTML語言 3
1.1.2 HTML語言的發展歷史 3
1.2 HTML檔案的基本結構 4
1.2.1 HTML檔案結構 4
1.2.2 編寫HTML檔案的注意事項 4
1.3 編寫簡單的HTML實例 5
1.3.1 使用記事本手工編寫HTML頁面 5
1.3.2 使用Dreamweaver輔助編寫HTML頁面 6
1.4 課後習題 7
第2章 頁面基本元素 8
2.1 頁面頭部元素<head> 9
2.2 頁面標題元素<title> 9
2.3 元信息元素<meta> 10
2.3.1 元信息元素名稱屬性name、content 10
2.3.2 元信息元素的附加屬性http-equiv 11
2.3.3 設定頁面關鍵字 12
2.3.4 設定頁面說明 12
2.3.5 定義頁面的跳轉 13
2.3.6 定義頁面的作者信息 14
2.3.7 定義頁面的版權資訊 14
2.4 頁面主體元素<body> 15
2.4.1 主體元素的背景屬性BGCOLOR 15
2.4.2 主體元素的背景圖片屬性background 16
2.4.3 主體元素的文本屬性text 16
2.4.4 未訪問過的連結屬性link 17
2.4.5 激活的連結屬性alink 19
2.4.6 已訪問過的連結屬性vlink 19
2.4.7 IE瀏覽器中的左邊界屬性leftmargin 20
2.4.8 IE瀏覽器中的上邊界屬性topmargin 21
2.4.9 主體元素的背景圖片滾動屬性bgproperties 21
2.5 創建樣式元素<style> 23
2.6 腳本元素<script> 24
2.7 課後習題 25
第3章 網頁文本與段落信息組織 26
3.1 文本基本標記 28
3.1.1 字型屬性face 28
3.1.2 字號屬性size 29
3.1.3 顏色屬性color 30
3.2 標題元素<H1~H6> 31
3.3 段落元素<p> 32
3.4 文本的間隔和布局 33
3.4.1 換行元素<br> 33
3.4.2 縮進元素<blockquote> 34
3.4.3 保留格式元素<pre> 35
3.4.4 取消換行元素<nobr> 36
3.4.5 引用元素<q> 37
3.5 水平分隔線元素<hr> 38
3.5.1 粗細屬性size 38
3.5.2 陰影屬性noshade 39
3.5.3 寬度屬性width 40
3.5.4 對齊屬性align 41
3.5.5 顏色屬性color 42
3.6 文本的樣式設定 43
3.6.1 放大元素<big> 43
3.6.2 縮小元素<small> 44
3.6.3 斜體顯示元素<i>、<em>和<cite> 45
3.6.4 加粗的強調元素<strong>和<b> 46
3.6.5 下標元素<sub> 47
3.6.6 上標元素<sup> 47
3.7 課後習題 49
第4章 列表的建立和使用 50
4.1 使用無序列表 51
4.1.1 無序列表標記ul 51
4.1.2 無序列表的類型type 52
4.1.3 選單列表標記menu 53
4.1.4 目錄列表dir 54
4.2 使用有序列表 55
4.2.1 有序列表標記ol 56
4.2.2 有序列表的類型type 56
4.2.3 有序列表的起始數值start 58
4.3 列表條目元素<li> 59
4.3.1 項目符號的類型屬性type 59
4.3.2 條目編號屬性value 60
4.4 定義列表元素<dl> 61
4.5 課後習題 62
第5章 網頁圖像和多媒體信息組織 64
5.1 圖像元素<img> 65
5.1.1 圖像元素的路徑屬性src 65
5.1.2 代替圖片的文本屬性alt 66
5.1.3 圖像元素的寬度、高度屬性width、height 67
5.1.4 圖像元素的框線屬性border 68
5.1.5 圖像元素的對齊屬性align 69
5.1.6 圖像元素的垂直邊距屬性vSpace 71
5.1.7 圖像元素的水平邊距屬性hspace 72
5.2 使用背景音樂 73
5.2.1 背景音樂的路徑屬性src 73
5.2.2 背景音樂的重複屬性loop 74
5.3 滾動標籤marquee 75
5.3.1 滾動標記marquee 75
5.3.2 滾動方向direction 76
5.3.3 滾動方式behavior 77
5.3.4 滾動次數loop 78
5.3.5 滾動速度scrollamount 79
5.3.6 滾動延遲scrolldelay 80
5.3.7 滾動區域的背景顏色bgcolor 81
5.3.8 滾動背景寬度width和高度height 82
5.3.9 設定空白空間hspace、vspace 83
5.4 多媒體標籤 84
5.5 課後習題 85
第6章 超連結的建立 86
6.1 超連結基礎 87
6.2 連結元素<a> 87
6.2.1 指定路徑屬性href 87
6.2.2 顯示連結目標屬性target 88
6.3 設定不同的連結目標 88
6.3.1 設定頁面內部的特定目標的連結 88
6.3.3 設定圖片的超連結 91
6.3.4 設定電子郵件連結 91
6.4 圖像熱區連結 92
6.5 課後習題 93
第7章 用表格排列組織網頁元素 95
7.1 表格元素的結構 96
7.1.1 表格<table> 96
7.1.2 行<tr> 97
7.1.3 單元格<td> 97
7.2 <table>元素的屬性 98
7.2.1 框線屬性border 98
7.2.2 水平對齊屬性align 100
7.2.3 高度屬性height 101
7.2.4 寬度屬性width 102
7.2.5 框線顏色屬性bordercolor 103
7.2.6 框線亮邊線屬性bordercolorlight 104
7.2.7 框線暗邊線屬性bordercolordark 105
7.2.8 背景顏色屬性bgcolor 106
7.2.9 背景圖片屬性background 107
7.2.10 單元格間距屬性cellspacing 108
7.2.11 單元格補白屬性cellspadding 109
7.3 <tr>元素的屬性 110
7.3.1 水平對齊屬性align 110
7.3.2 垂直對齊屬性valign 111
7.3.3 背景顏色屬性bgcolor 112
7.3.4 框線顏色屬性bordercolor 113
7.3.5 框線暗邊線屬性bordercolordark 114
7.3.6 框線亮邊線屬性bordercolorlight 115
7.4 <td>元素的屬性 116
7.4.1 寬度屬性width 116
7.4.2 高度屬性height 117
7.4.3 背景顏色屬性bgcolor 118
7.4.4 背景圖片屬性background 119
7.4.5 水平對齊屬性align 120
7.4.6 垂直對齊屬性valign 121
7.4.7 框線顏色屬性bordercolor 122
7.4.8 合併列屬性colspan 123
7.4.9 合併行屬性rowspan 124
7.5 表格中使用的其他元素 125
7.5.1 表格標題元素<caption> 126
7.5.2 表格頭行元素<thead> 127
7.5.3 表主體元素<tbody> 129
7.5.4 表格行尾元素<tfoot> 130
7.6 課後習題 132
第8章 用表單創建互動式網頁 133
8.1 表單元素form 134
8.1.1 處理動作action 134
8.1.2 表單名稱name 134
8.1.3 傳送方法method 135
8.1.4 編碼方式enctype 136
8.1.5 目標顯示方式target 137
8.2 表單控制項<input> 138
8.2.1 文字欄位text 138
8.2.2 密碼域password 140
8.2.3 單選按鈕radio 141
8.2.4 複選框checkbox 142
8.2.5 普通按鈕button 143
8.2.6 提交按鈕submit 145
8.2.7 重置按鈕reset 146
8.2.8 圖像域image 147
8.2.9 隱藏域hidden 148
8.2.10 檔案域file 149
8.3 選擇列表條目元素<option> 151
8.4 選擇列表元素<select> 152
8.4.1 高度屬性size 152
8.4.2 多項選擇屬性multiple 154
8.5 文本區域元素<textarea> 155
8.6 課後習題 156
第9章 創建框架結構網頁 158
9.1 框架簡介 159
9.2 框架集元素<frameset> 159
9.2.1 水平分割視窗rows 159
9.2.2 垂直分割視窗cols 160
9.2.3 框線屬性frameborder 161
9.2.4 框線寬度framespacing 162
9.2.5 框線顏色bordercolor 163
9.3 框架內容元素<frame> 164
9.3.1 框架頁面源檔案src 164
9.3.2 框架名稱name 165
9.3.3 框架視窗的尺寸noresize 166
9.3.4 框架框線與頁面內容的水平邊距marginwidth 167
9.3.5 框架框線與頁面內容的垂直邊距marginheight 168
9.3.6 設定框架滾動條scrolling 169
9.3.7 不支持框架標記NOFRAMES 171
9.4 浮動框架元素<iframe> 171
9.4.1 浮動框架的頁面源檔案src 172
9.4.2 浮動框架的寬度width和高度height 172
9.4.3 浮動框架對齊方式align 173
9.4.4 框架框線與頁面內容的水平邊距marginwidth 174
9.4.5 框架框線與頁面內容的垂直邊距marginheight 175
9.4.6 設定浮動框架是否顯示滾動條scrolling 175
9.4.7 浮動框架的框線frameborder 176
9.5 課後習題 177
第2篇 CSS基礎篇
第10章 (X)HTML與CSS概述 180
10.1 HTML與XHTML 181
10.1.1 什麼是XHTML 181
10.1.2 DOCTYPE聲明 181
10.1.3 XHTML與HTML的重要區別 182
10.2 何謂Web標準 184
10.3 (X)HTML與CSS 184
10.3.1 CSS標準 184
10.3.2 傳統HTML的缺點 185
10.3.3 如何編輯CSS 186
10.4 課後習題 187
第11章 CSS語言基礎 188
11.1 CSS基本語法 189
11.2 基本CSS選擇器 189
11.2.1 標籤選擇器 189
11.2.2 類選擇器 190
11.2.3 ID選擇器 191
11.3 在HTML中添加CSS的方法 193
11.3.1 在標籤中加入樣式 193
11.3.2 在HTML文檔中植入CSS樣式 194
11.3.3 連結外部樣式 194
11.3.4 導入樣式 195
11.3.5 在腳本內添加CSS樣式 195
11.4 課後習題 196
第12章 用CSS設定文本樣式 197
12.1 文字樣式的設定 198
12.1.1 字型font-family 198
12.1.2 字號font-size 198
12.1.3 文字傾斜效果font-style 200
12.1.4 文字加粗font-weight 201
12.1.5 字型變體font-variant 202
12.2 文本的排版 203
12.2.1 調整字母間距letter-spacing 204
12.2.2 調整單詞間距word-spacing 205
12.2.3 添加文字修飾text-decoration 206
12.2.4 設定文本排列方式text-align 207
12.2.5 設定段落縮進text-indent 208
12.2.6 調整行高line-height 209
12.2.7 轉換英文大小寫text-transform 210
12.2.8 垂直對齊屬性vertical-align 211
12.3 課後習題 212
第13章 用CSS設定網頁圖片和背景 214
13.1 設定圖片框線 215
13.1.1 基本屬性 215
13.1.2 設定不同的框線樣式 216
13.2 圖片縮放 217
13.3 圖文混排 219
13.3.1 文字環繞 219
13.3.2 設定圖片與文字的間距 220
13.4 設定網頁的背景 221
13.4.1 背景顏色background-color 221
13.4.2 背景圖像background-image 222
13.5 設定背景圖像的屬性 224
13.5.1 背景圖片重複background-repeat 224
13.5.2 背景圖片滾動屬性background-attachment 225
13.5.3 背景圖片定位background-position 226
13.6 課後習題 227
第14章 CSS中的濾鏡 229
14.1 不透明度alpha 230
14.2 動感模糊blur 232
14.3 對顏色進行透明處理chroma 233
14.4 設定陰影dropShadow 235
14.5 對象的翻轉flipH、flipV 236
14.6 發光效果glow 237
14.7 灰度處理gray 238
14.8 反相invert 239
14.9 X光片效果xray 240
14.10 波形濾鏡wave 242
14.11 課後習題 243
第15章 用CSS設定表格和表單樣式 244
15.1 控制表格元素的顯示 245
15.1.1 框線合併屬性border-collapse 245
15.1.2 表格框線間距屬性border-spacing 246
15.1.3 表格標題位置屬性caption-side 247
15.1.4 表格布局屬性table-layout 248
15.2 美化表格 249
15.2.1 隔行換色的斑馬紋表格 250
15.2.2 通過mouse事件製作變色的單元格 251
15.3 CSS與表單 252
15.3.1 表單中的元素 252
15.3.2 改變按鈕的背景顏色和文字顏色 253
15.3.3 用dl、dd、dt替換table實現表單布局 254
15.3.4 設計文本框的樣式 255
15.3.5 改變下拉選單顏色 256
15.4 課後習題 258
第16章 用CSS設定連結與導航選單 259
16.1 連結標籤 260
16.2 創建按鈕式超連結 261
16.3 控制滑鼠指針 262
16.4 設定項目列表樣式 263
16.4.1 列表符號類型list-style-type 263
16.4.2 列表符號的混用 265
16.4.3 列表圖像屬性list-style-image 267
16.4.4 標籤位置屬性list-style-position 268
16.4.5 列表綜合屬性list-style 269
16.5 創建簡單的導航選單 270
16.5.1 簡單的豎直排列選單 270
16.5.2 橫豎自由轉換選單 272
16.6 滑鼠指針移上時圖片漸變的效果 273
16.7 課後習題 274
第3篇 CCS布局篇
第17章 css盒子模型 278
17.1 “盒子”與“模型”的概念 279
17.2 框線border 280
17.2.1 框線寬度border-width 280
17.2.2 框線顏色border-color 281
17.2.3 框線樣式border-style 282
17.3 設定內邊距padding 284
17.3.1 頂部屬性padding-top 284
17.3.2 右側屬性padding-right 285
17.3.3 底部屬性padding-bottom 286
17.3.4 左側屬性padding-left 287
17.4 設定外邊距margin 288
17.4.1 頂部邊界屬性margin-top 288
17.4.2 右側邊界屬性margin-right 289
17.4.3 底部邊界屬性margin-bottom 290
17.4.4 左側邊界屬性margin-left 291
17.5 課後習題 292
第18章 盒子的浮動與定位 293
18.1 盒子的浮動 294
18.1.1 元素的浮動屬性float 294
18.1.2 清除浮動屬性clear 298
18.2 元素的定位 299
18.2.1 元素的定位屬性position 299
18.2.2 上邊偏移屬性top、下邊偏移屬性bottom 300
18.2.3 左邊偏移屬性left、右邊偏移屬性right 302
18.3 盒子的定位 303
18.3.1 絕對定位(absolute) 303
18.3.2 固定定位(fixed) 306
18.3.3 相對定位(relative) 308
18.3.4 靜態定位(static) 309
18.4 z-index空間位置 310
18.5 課後習題 312
第19章 CSS+DIV布局方法 314
19.1 CSS布局理念 315
19.1.1 將頁面用DIV分塊 315
19.1.2 設計各塊的位置 315
19.1.3 用CSS定位 316
19.2 固定寬度布局 317
19.2.1 兩列布局 318
19.2.2 三列布局 319
19.2.3 多列布局 321
19.3 圓角框 322
19.4 變寬度網頁布局製作 324
19.5 課後習題 327
第4篇 JavaScript篇
第20章 JavaScript基礎 330
20.1 JavaScript起步 332
20.1.1 JavaScript簡介 332
20.1.2 JavaScript實例 333
20.1.3 JavaScript放置位置 334
20.2 JavaScript程式 335
20.2.1 語句和語句塊 335
20.2.2 函式 339
20.2.3 常用系統函式 340
20.2.4 訊息對話框 343
20.2.5 注釋 344
20.3 標識符和變數 344
20.3.1 關於命名的規定 344
20.3.2 JavaScript的數據類型 345
20.3.3 變數 346
20.3.4 轉義字元 347
20.4 運算符和表達式 348
20.4.1 算術運算符和表達式 348
20.4.2 賦值運算符和表達式 350
20.4.3 關係運算符和表達式 350
20.4.4 邏輯運算符和表達式 351
20.4.5 條件運算符和表達式 352
20.5 對象 353
20.5.1 對象屬性的使用 353
20.5.2 對象方法的使用 354
20.5.3 瀏覽器的內部對象 354
20.6 事件編程 357
20.6.1 事件簡介 357
20.6.2 onFocus事件 358
20.6.3 滑鼠事件 359
20.6.4 單擊事件 360
20.6.5 頁面載入和離開 360
20.7 課後習題 361
第5篇 綜合案例篇
第21章 網站頁面製作綜合案例 364
21.1 案例概述 365
21.2 內容分析 366
21.3 HTML結構設計 366
21.4 頁面方案設計 368
21.5 定義頁面的整體樣式 370
21.6 製作頁面頭部 372
21.6.1 製作頁面頭部的結構 372
21.6.2 定義頁面頭部的樣式 372
21.7 製作左側導航 374
21.7.1 製作左側導航部分的結構 374
21.7.2 定義左側導航的樣式 375
21.8 製作“聯繫我們”部分 376
21.8.1 製作“聯繫我們”部分的結構 376
21.8.2 定義“聯繫我們”內容的樣式 376
21.9 製作“公司介紹”部分 377
21.9.1 製作“公司介紹”部分結構 377
21.9.2 定義“公司介紹”部分的樣式 378
21.10 製作“圖片展示”和“新聞動態” 379
21.10.1 製作頁面結構 379
21.10.2 定義頁面樣式 379
21.11 製作“酒店訂購”部分 380
21.11.1 製作頁面結構 380
21.11.2 定義頁面樣式 381
21.12 製作底部著作權部分 381
21.13 課後習題 382
附錄A HTML標籤索引表 383
附錄B CSS常用樣式速查表 388
附錄C JavaScript語法手冊 393
附錄D 課後習題答案 400

相關詞條

熱門詞條

聯絡我們