HTML+CSS網頁設計與布局課堂實錄

內容簡介

本書緊密圍繞網頁設計師在網頁製作過程中的實際需要和應該掌握的技術，全面地介紹了使用HTML、CSS進行網頁設計和製作的各方面內容和技巧。本書不只注重語法講解，還通過一個個鮮活、典型的實戰案例來幫助讀者達到學以致用的目的。每個廈頁催語法都有相應的實例，每章後面又配有綜合小實例，各章均配有習題，力求達到理論知識與實踐操作完美結合的效果。

本書可作為普通高校、高職高專計算機及相關專業教材，並可供從事網頁設計與製作、網站開發、網頁編程等行業人員參考。

圖書目錄

第1篇?HTML篇

第1課?HTML入門

1.1?什麼是HTML 2

1.2?HTML檔案的基本結構 2

1.2.1?HTML檔案結構匙企酷 2

1.2.2?編寫HTML檔案注意事項 3

1.3?HTML檔案編寫方法 4

1.3.1?課堂小實例——使巴影駝乘用記事本故海兆編寫

HTML頁面 4

1.3.2?課堂小實例——使用Dreamweaver

編寫HTML頁面 5

1.4?HTML頁面主體常用設定 5

1.4.1?課堂小實例——定義網頁背

景色（bgcolor） 5

1.4.2?課堂小實例——設定背

景圖片（background） 6

1.4.3?課堂小實例——設定文字顏色（text） 7

1.4.4?課堂小實例——設定連結文字屬性 8

1.4.5?課堂小實例——設定頁面邊距 10

1.5?頁面頭部元素<head>和<!DOCTYPE> 10

1.6 ?頁面標題元素<title> 11

1.7?元信息元素<meta> 11

1.7.1?課堂小實例——設定頁面描述 12

1.7.2?課堂小實例——定義頁面的搜尋方式 12

1.7.3?課堂小實例——定義頁面的跳轉 13

1.7.4?課堂小實例——設定頁面關鍵字 14

1.8?綜合實戰——創建基本的HTML檔案 14

1.9?課後練習 15

1.10?本課小結 16

第2課?用HTML設定文字與段落格式

2.1?插入其他標記 18

2.1.1?課堂小實例——輸入空格符號 18

2.1.2?輸入特殊符號 19

2.2?設定文字的格式 19

2.2.1?課堂小實例——設定字型（face） 19

2.2.2?課堂小實例——設定字號（size） 20

2.2.3?設定鑽夜文字顏色（color） 21

2.2.4?設定粗體、斜體、下劃線

（b、strong、em、u） 22

2.2.5?設定上標與下標（sup、sub） 23

2.2.6?多種標題樣式的使用

（<h1>～<h6>） 24

2.3?設定段落的排版與換行 24

2.3.1?給文字進行分段（p） 25

2.3.2?段落的對齊屬性（align） 25

2.3.3?不換行標記頁她翻（nobr） 26

2.3.4?換行標記（br） 27

2.4?水平線標記 28

2.4.1?插入水平線（hr） 28

2.4.2?設定水平線寬度與高度屬性

（width、size） 29

2.4.3?設定水平線的顏色（color） 30

2.4.4?設定水平線的對齊方式（align） 31

2.4.5?水平線去掉陰影（noshade） 31

2.5?設定滾動文字 32

2.5.1?滾動文字標籤——marquee 32

2.5.2?滾動方向屬性——direction 33

2.5.3?滾動方式屬性——behavior 34

2.5.4?滾動速度屬性——scrollamount 35

2.5.5?滾動延遲屬性——scrolldelay 36

2.5.6?滾動循環屬性——loop 37

2.5.7?滾動範圍屬性——width、height 37

2.5.8?滾動背景顏色屬照紙戶促性——bgcolor 38

2.5.9?滾動空間屬性——hspace、vspace 39

2.6?綜合實例——設定頁面文本及段落 40

2.7?課後練習 42

2.8?本課小結 42

第3課?用HTML創建精彩的圖像和多媒體頁面

3.1?網頁中常見的圖像格式 44

3.2?插入圖像並設定圖像屬性 44

3.2.1?圖像標記：img 44

3.2.2?課堂小實例——設定圖像高度

（height） 45

3.2.3?課堂小實例——設定圖像寬度

（width） 46

3.2.4?課堂小實例——設定圖像的框線

（border） 46

3.2.5?課堂小實例——設定圖像水平間距

（hspace） 47

3.2.6?課堂小實例——設定圖像垂直間距

（vspace） 48

3.2.7?課堂小實例——設定圖像的對齊方式

（align） 49

3.2.8?課堂小實例——設定圖像的替代文字

（alt） 50

3.3?添加多媒體檔案 51

3.3.1?課堂小實例——添加多媒體檔案標記

（embed） 52

3.3.2?課堂小實例——設定自動運行

（autostart） 52

3.4?添加背景音樂 53

3.4.1?課堂小實例——設定背景音樂

（bgsound） 53

3.4.2?課堂小實例——設定循環播放次數

（loop） 54

3.5?綜合實例 55

3.5.1?實例1——創建多媒體網頁 55

3.5.2?實例2——創建圖文混合排版網頁 56

3.6?課後練習 57

3.7?本課小結 58

第4課?用HTML創建超連結

4.1?連結和路徑 60

4.1.1?超連結的基本概念 60

4.1.2?課堂小實例——路徑url 60

4.1.3?課堂小實例——HTTP路徑 61

4.1.4?課堂小實例——FTP路徑 62

4.1.5?課堂小實例——郵件路徑 62

4.2?連結元素<a> 63

4.2.1?課堂小實例——指定路徑href 63

4.2.2?顯示連結目標屬性target 64

4.2.3?連結的熱鍵屬性accesskey 65

4.3?創建圖像的超連結 67

4.3.1?課堂小實例——創建連結區域元素

<map> 67

4.3.2?連結區域的名稱屬性name 67

4.3.3?定義滑鼠敏感區元素<area> 68

4.3.4?連結的路徑屬性href、nohref 69

4.3.5?滑鼠敏感區坐標屬性coords 70

4.4?下載檔案 71

4.5?實戰套用——給網頁添加連結 72

4.6?課後練習 74

4.7?本課小結 75

第5課?使用HTML創建強大的表格

5.1?創建並設定表格屬性 77

5.1.1?課堂小實例——表格的基本標記

（table、tr、td） 77

5.1.2?課堂小實例——表格寬度和高度

（width、height） 78

5.1.3?課堂小實例——表格的標題

（caption） 78

5.1.4?課堂小實例——表格的表頭（th） 79

5.1.5?課堂小實例——表格對齊方式

（align） 80

5.1.6?表格的框線寬度（border） 81

5.1.7?表格框線顏色（bordercolor） 82

5.1.8?單元格間距（cellspacing） 83

5.1.9?單元格邊距（cellpadding） 83

5.1.10?表格的背景色（bgcolor） 85

5.1.11?表格的背景圖像（background） 86

5.2?表格的結構標記 87

5.2.1?課堂小實例——設計表頭樣式

（thead） 87

5.2.2?課堂小實例——設計表主體樣式

（tbody） 88

5.2.3?課堂小實例——設計表尾樣式

（tfoot） 88

5.3?綜合實例——使用表格排版網頁 90

5.4?課後練習 94

5.5?本課小結 94

第6課?創建交換式表單

6.1?表單元素<form> 96

6.1.1?課堂小實例——動作屬性（action） 96

6.1.2?課堂小實例——傳送數據方式屬性

（method） 96

6.1.3?課堂小實例——名稱屬性（name） 97

6.2?表單的控制項<input> 97

6.2.1?課堂小實例——文本域text 98

6.2.2?課堂小實例——密碼區域password 99

6.2.3?課堂小實例——提交按鈕submit 100

6.2.4?課堂小實例——復位按鈕reset 100

6.2.5?課堂小實例——圖像按鈕image 101

6.2.6?課堂小實例——單擊按鈕button 102

6.2.7?課堂小實例——複選框checkbox 102

6.2.8?課堂小實例——單選按鈕radio 103

6.2.9?課堂小實例——隱藏區域hidden 104

6.3?綜合實戰——用戶註冊表單頁

面實例 105

6.4?課後練習 109

6.5?本課小結 110

第7課?HTML 5的新特性

7.1?認識HTM?5 112

7.2?HTML?5的新特性 114

7.3?HTML?5與HTML?4的區別 115

7.3.1?HTML?5的語法變化 115

7.3.2?HTML?5中的標記方法 115

7.3.3?HTML?5語法中的3個要點 116

7.3.4?HTML?5與HTML?4在搜尋引擎

最佳化的對比 116

7.4?HTML?5新增的元素和廢除的元素 117

7.4.1?課堂小實例——新增的結構元素 117

7.4.2?課堂小實例——新增的塊級的

語義元素 118

7.4.3?課堂小實例——新增的行內的

語義元素 120

7.4.4?課堂小實例——新增的嵌入多媒體

元素與互動性元素 123

7.4.5?課堂小實例——新增的input

元素的類型 124

7.4.6?廢除的元素 125

7.5?新增的屬性和廢除的屬性 126

7.5.1?新增的屬性 126

7.5.2?廢除的屬性 127

7.6?課後練習 129

7.7?本課小結 129

第8課?HTML 5的結構

8.1?新增的主體結構元素 131

8.1.1?課堂小實例——article元素 131

8.1.2?課堂小實例——section元素 132

8.1.3?課堂小實例——nav元素 133

8.1.4?課堂小實例——aside元素 136

8.2?新增的非主體結構元素 136

8.2.1?課堂小實例—— header元素 136

8.2.2?課堂小實例——hgroup元素 137

8.2.3?課堂小實例——footer元素 138

8.2.4?課堂小實例——address元素 139

8.3?課後練習 140

8.4?本課小結 141

第2篇?CSS篇

第9課?CSS基礎知識

9.1?CSS 3介紹 143

9.1.1?CSS基本概念 143

9.1.2?CSS的優點 143

9.1.3?CSS 3功能 144

9.1.4?CSS 3發展歷史 145

9.2?在HTML?5中使用CSS的方法 145

9.2.1?行內樣式 145

9.2.2?內嵌樣式 146

9.2.3?連結樣式 146

9.2.4?導入樣式 147

9.2.5?優先權問題 147

9.3?選擇器類型 148

9.3.1　課堂小實例——標籤選擇器 148

9.3.2　課堂小實例——類選擇器 148

9.3.3　課堂小實例——ID選擇器 149

9.4?編輯和瀏覽CSS 151

9.4.1?手工編寫CSS 151

9.4.2?Dreamweaver編寫CSS 151

9.5?使用Dreamweaver設定CSS樣式 152

9.5.1?設定文本樣式 152

9.5.2?設定背景樣式 153

9.5.3?設定區塊樣式 155

9.5.4?設定方框樣式 156

9.5.5?設定框線樣式 157

9.5.6?設定列表樣式 158

9.5.7?設定定位樣式 159

9.5.8?設定擴展樣式 161

9.5.9?過渡樣式的定義 161

9.6?實戰套用——對網頁添加CSS樣式 161

9.7?課後練習 164

9.8?本課小結 164

第10課?CSS控制網頁文本和段落樣式

10.1　通過CSS控制文本樣式 166

10.1.1　課堂小實例——字型font-family 166

10.1.2　課堂小實例——字號font-size 167

10.1.3　課堂小實例——加粗字型

font-weight 168

10.1.4　課堂小實例——字型風格

font-style 169

10.1.5　課堂小實例——小寫字母轉為

大寫字母font-variant 170

10.2　通過CSS控制段落格式 171

10.2.1?課堂小實例——單詞間隔

word-spacing 171

10.2.2?課堂小實例——字元間隔

letter-spacing 171

10.2.3?課堂小實例——文字修飾

text-decoration 172

10.2.4?課堂小實例——垂直對齊方式

vertial-align 173

10.2.5?課堂小實例——文本轉換

text-transform 173

10.2.6?課堂小實例——水平對齊方式

text-align 174

10.2.7?課堂小實例——文本縮進

text-indent 175

10.2.8?課堂小實例——文本行高

line-height 175

10.2.9?課堂小實例——處理空白

white-space 176

10.3?濾鏡 177

10.3.1?課堂小實例——不透明度alpha 178

10.3.2?課堂小實例——動感模糊blur 179

10.3.3?課堂小實例——對顏色進行

透明處理chroma 180

10.3.4?課堂小實例——設定陰影

DropShadow 181

10.3.5?課堂小實例——對象的翻轉

flipH、flipV 182

10.3.6?課堂小實例——發光效果glow 182

10.3.7?課堂小實例——灰度處理gray 183

10.3.8?課堂小實例——反相invert 184

10.3.9?課堂小實例——X光片效果xray 184

10.3.10?課堂小實例——波形濾鏡wave 184

10.4?實戰套用——CSS字型樣式

綜合演練 185

10.5?課後練習 187

10.6?本課小結 188

第11課?用CSS設計圖片和背景

11.1　設定網頁的背景 190

11.1.1　課堂小實例——背景顏色 190

11.1.2　課堂小實例——背景圖片 190

11.2　設定背景圖片的樣式 191

11.2.1?課堂小實例——背景圖片重複 191

11.2.2?課堂小實例——背景圖片附屬檔案 192

11.2.3?課堂小實例——背景圖片定位 193

11.3　設定網頁圖片的樣式 195

11.3.1　課堂小實例——設定圖片框線 195

11.3.2　課堂小實例——圖文混合排版 197

11.4?實戰套用 198

11.4.1?實戰1——給圖片添加框線 198

11.4.2?實戰2——圖文繞排效果 199

11.5?課後練習 201

11.6?本課小結 202

第12課?用CSS製作實用的選單和網站導航

12.1?列表的使用 204

12.2?列表樣式控制 204

12.2.1?課堂小實例——ul無序列表 204

12.2.2?課堂小實例——ol有序列表 205

12.2.3?課堂小實例——dl定義列表 207

12.2.4?更改列表項目樣式 208

12.3　橫排導航 209

12.3.1　課堂小實例——文本導航 209

12.3.2　課堂小實例——標籤式導航 211

12.4　課堂小實例——豎排導航 213

12.5?實戰套用 214

12.5.1?實戰1——實現背景變換的

導航選單 214

12.5.2?實戰2——利用CSS製作橫嚮導航 215

12.5.3?實戰3——用背景圖片實現

CSS柱狀圖表 216

12.5.4?實戰4——樹形導航選單 217

12.6?課後練習 220

12.7?本課小結 220

第13課?CSS盒子模型與定位

13.1　“盒子”與“模型”的概念 222

13.2　border 222

13.2.1?課堂小實例——框線樣式

（border-style） 223

13.2.2?屬性值的簡寫形式 224

13.2.3　課堂小實例——框線與背景 225

13.3　課堂小實例——設定內邊距

(Padding） 226

13.4　課堂小實例——設定外邊距

（margin） 227

13.5　盒子的定位 228

13.5.1　靜態定位（static） 229

13.5.2　課堂小實例——相對定位

（relative） 229

13.5.3　課堂小實例——絕對定位

（absolute） 230

13.5.4　課堂小實例——固定定位

（fixed） 232

13.6　盒子的浮動 233

13.6.1　準備代碼 233

13.6.2　案例——設定第1個浮動的div 234

13.7　課後練習 236

13.8　本課小結 236

第14課?CSS+DIV布局方法

14.1　CSS布局模型 238

14.1.1?關於CSS布局 238

14.1.2?流動布局模型 238

14.1.3?浮動布局模型 240

14.1.4?層布局模型 242

14.1.5?高度自適應 244

14.2?CSS布局理念 245

14.2.1?將頁面用div分塊 245

14.2.2?設計各塊的位置 246

14.2.3?用CSS定位 246

14.3　常見的布局類 247

14.3.1?課堂小實例——一列固定寬度 247

14.3.2?課堂小實例——一列自適應 248

14.3.3?課堂小實例——兩列固定寬度 249

14.3.4?課堂小實例——兩列寬度自適應 250

14.3.5?課堂小實例——兩列右列寬度

自適應 251

14.3.6?課堂小實例——三列浮動中間

寬度自適應 252

14.3.7?課堂小實例——三行二列居中

高度自適應布局 253

14.4?課後練習 255

14.5?本課小結 255

第3篇?綜合案例篇

第15課?設計製作企業網站

15.1?企業網站設計概述 257

15.1.1?企業網站分類 257

15.1.2?企業網站主要功能 258

15.1.3?頁面配色與風格設計 259

15.1.4?排版構架 260

15.2?各部分設計 261

15.2.1　頁面的通用規則 261

15.2.2?製作網站導航部分 262

15.2.3?製作header右側部分 265

15.2.4?製作歡迎部分 272

15.2.5?製作景點新聞部分 275

15.2.6?製作景點介紹部分 279

15.2.7?製作景點展示部分 282

15.2.8?製作底部著作權部分 288

附錄A?CSS屬性一覽表

附錄B?HTML常用標籤

HTML+CSS網頁設計與布局課堂實錄

基本介紹

內容簡介

圖書目錄

相關詞條

熱門詞條