HTML CSS DIV網(wǎng)頁設(shè)計與布局目錄

時間：2023-02-18 16:24:01 | 來源：營銷百科

時間：2023-02-18 16:24:01 來源：營銷百科

HTML CSS DIV網(wǎng)頁設(shè)計與布局目錄：第一篇　認識網(wǎng)站和網(wǎng)頁

第1章　認識網(wǎng)站開發(fā)　2

1.1　認識網(wǎng)站開發(fā)　2

1.1.1　網(wǎng)頁設(shè)計概述　2

1.1.2　網(wǎng)頁構(gòu)成元素　2

1.1.3　網(wǎng)站建設(shè)流程　3

1.1.4　網(wǎng)站開發(fā)軟件　4

1.2　HTML基本概念　5

1.2.1　HTML簡介　6

1.2.2　HTML基本結(jié)構(gòu)　6

1.3　一個簡單的HTML實例　6

1.3.1　編寫HTML代碼　6

1.3.2　運行HTML文件查看效果　8

1.4　HTML基本標(biāo)記　8

1.4.1　文件類型標(biāo)記　8

1.4.2　HTML頭標(biāo)記　9

1.4.3　HTML主體標(biāo)記　9

1.4.4　頁面標(biāo)題　9

1.5　小結(jié)　10

本章習(xí)題　10

第二篇　HTML學(xué)習(xí)篇

第2章　網(wǎng)頁文字和圖片　12

2.1　文字格式　12

2.1.1　設(shè)置文字大小　12

2.1.2　設(shè)置字體　13

2.1.3　設(shè)置字體顏色　15

2.1.4　加粗與斜體　18

2.1.5　下劃線與刪除線　19

2.1.6　上標(biāo)與下標(biāo)　20

2.1.7　等寬字　21

2.2　與文字排版相關(guān)的元素　21

2.2.1　文本縮進　21

2.2.2　換行　22

2.2.3　段落　23

2.2.4　段落居中　23

2.2.5　預(yù)定義格式　24

2.2.6　水平分隔線　25

2.3　文字閃爍　26

2.4　設(shè)置網(wǎng)頁背景顏色　27

2.5　在網(wǎng)頁中插入圖像　28

2.6　設(shè)置背景圖片　29

2.7　小結(jié)　30

本章習(xí)題　30

上機指導(dǎo)　31

實驗一：練習(xí)使用FONT元素來設(shè)置文字的大小、顏色和字體　31

實驗二：練習(xí)使用與文字排版相關(guān)的元素來設(shè)置文字的段落的樣式　31

實驗三：練習(xí)使用BACKGROUND屬性來設(shè)置網(wǎng)頁的背景圖片　32

第3章　超鏈接　34

3.1　創(chuàng)建超鏈接　34

3.1.1　超鏈接標(biāo)記　34

3.1.2　鏈接地址　35

3.1.3　打開鏈接的方式　37

3.2　錨點　37

3.2.1　創(chuàng)建錨點　38

3.2.2　鏈接到本頁錨點　38

3.2.3　鏈接到其他網(wǎng)頁的錨點　39

3.3　圖像的超鏈接　40

3.3.1　將整個圖像設(shè)為超鏈接　40

3.3.2　設(shè)置圖像熱點區(qū)域　41

3.4　小結(jié)　43

本章習(xí)題　43

上機指導(dǎo)　44

實驗一：練習(xí)使用A標(biāo)記創(chuàng)建一個以新窗口打開的超鏈接　44

實驗二：練習(xí)使用A標(biāo)記創(chuàng)建一個鏈接到其他網(wǎng)頁的錨點鏈接　44

實驗三：練習(xí)使用A標(biāo)記設(shè)置一個矩形的圖像熱點區(qū)域　46

第4章　表格　47

4.1　創(chuàng)建表格　47

4.2　表格屬性　48

4.2.1　表格寬度　48

4.2.2　表格高度　49

4.2.3　表格背景圖片　51

4.2.4　單元格間距　52

4.2.5　表格內(nèi)單元格與文字的距離　54

4.3　表格邊框　55

4.3.1　邊框?qū)挾取?5

4.3.2　邊框顏色　57

4.3.3　亮邊框顏色　58

4.3.4　暗邊框顏色　58

4.4　設(shè)置表格行的對齊方式　59

4.4.1　垂直對齊方式　59

4.4.2　水平對齊方式　60

4.5　行和列的合并　61

4.5.1　列的合并　62

4.5.2　行的合并　63

4.6　表格結(jié)構(gòu)　64

4.6.1　表頭　64

4.6.2　主體　65

4.6.3　表尾　66

4.7　表格標(biāo)題　68

4.8　表格嵌套　69

4.9　小結(jié)　70

本章習(xí)題　71

上機指導(dǎo)　72

實驗一：練習(xí)使用TABLE元素創(chuàng)建一個表格　72

實驗二：練習(xí)使用TABLE元素中的各種屬性創(chuàng)建一個課程表　73

實驗三：練習(xí)使用TABLE元素創(chuàng)建嵌套表格　74

第5章　多媒體、滾動字幕和列表　76

5.1多媒體元素76

5.1.1　插入多媒體元素　76

5.1.2　循環(huán)播放　77

5.1.3　自動播放　77

5.1.4　隱藏多媒體元素　78

5.2　插入背景音樂　80

5.3　滾動字幕　80

5.3.1　添加滾動字幕　81

5.3.2　滾動方向　81

5.3.3　滾動方式　82

5.3.4　滾動字幕背景顏色　83

5.3.5　滾動速度　84

5.3.6　滾動延遲　84

5.3.7　滾動次數(shù)　86

5.3.8　滾動字幕空白空間　86

5.3.9　設(shè)置鼠標(biāo)經(jīng)過效果　87

5.4　無序列表　88

5.4.1　無序列表結(jié)構(gòu)　88

5.4.2　無序列表的列表項樣式　89

5.5　有序列表　90

5.5.1　有序列表結(jié)構(gòu)　91

5.5.2　有序列表的列表項樣式　92

5.6　嵌套列表　93

5.7　定義列表　94

5.8　目錄列表　96

5.9　菜單列表　96

5.10　小結(jié)　98

本章習(xí)題　98

上機指導(dǎo)　99

實驗一：練習(xí)使用EMBED元素插入一個多媒體元素　99

實驗二：練習(xí)使用MARQUEE元素添加一個滾動字幕　100

實驗三：練習(xí)使用UL元素和OL元素創(chuàng)建一個嵌套列表　100

第6章　表單　102

6.1　添加表單　102

6.1.1　鏈接跳轉(zhuǎn)　102

6.1.2　鏈接跳轉(zhuǎn)方式　103

6.1.3　表單名稱　103

6.2　輸入標(biāo)簽　104

6.2.1　文本框　104

6.2.2　密碼框　105

6.2.3　單選框　105

6.2.4　復(fù)選框　107

6.2.5　提交按鈕　107

6.2.6　重置按鈕　108

6.2.7　圖像按鈕　109

6.2.8　文件域　110

6.2.9　隱藏域　111

6.3　下拉列表　112

6.4　文本域　113

6.5　小結(jié)　114

本章習(xí)題　114

上機指導(dǎo)　115

實驗一：練習(xí)使用FORM元素插入一個表單　115

實驗二：練習(xí)在表單元素中添加不同的表單控件　116

實驗三：練習(xí)使用在表單元素中添加下拉列表　117

第7章　框架　118

7.1　創(chuàng)建框架　118

7.2　分割窗口　118

7.2.1　上下分割　118

7.2.2　左右分割　121

7.2.3　窗口的嵌套　122

7.3　設(shè)置框架邊框　123

7.3.1　設(shè)置框架邊框顯示或隱藏　123

7.3.2　設(shè)置框架邊框?qū)挾取?24

7.3.3　設(shè)置框架邊框顏色　125

7.4　框架屬性　126

7.4.1　設(shè)置框架滾動條顯示　126

7.4.2　固定框架　126

7.4.3　不支持框架標(biāo)記　128

7.5　在框架中使用鏈接　128

7.6　浮動框架　132

7.6.1　插入浮動框架　132

7.6.2　浮動框架大小　133

7.6.3　浮動框架對齊方式　133

7.6.4　浮動框架頁面的鏈接　134

7.7　小結(jié)　135

本章習(xí)題　136

上機指導(dǎo)　137

實驗一：練習(xí)使用FRAMESET元素創(chuàng)建一個框架　137

實驗二：練習(xí)使用FRAMESET元素創(chuàng)建一個嵌套框架　138

實驗三：練習(xí)使用IFRAME元素創(chuàng)建一個浮動框架　138

第三篇　CCS學(xué)習(xí)篇

第8章　認識CSS　141

8.1　CSS簡介　141

8.2CSS樣式表的設(shè)置方法　141

8.2.1　內(nèi)聯(lián)樣式表　141

8.2.2內(nèi)部樣式表142

8.2.3　外部樣式表　143

8.2.4　引用多個樣式表　144

8.2.5　使用@import引用外部樣式表　145

8.2.6　CSS注釋　146

8.3　選擇符　147

8.3.1　類型選擇符　147

8.3.2　類選擇符　148

8.3.3　ID選擇符　151

8.3.4　包含選擇符　152

8.3.5　選擇符分組　156

8.3.6　通用選擇符　157

8.3.7　子選擇符　159

8.3.8　相鄰選擇符　161

8.3.9　屬性選擇符　162

8.4　偽類和偽元素　166

8.4.1　超鏈接的偽類　167

8.4.2　偽元素　168

8.5　CSS優(yōu)先級　169

8.6　CSS中的單位　172

8.6.1　顏色單位　172

8.6.2　長度單位　172

8.6.3　時間單位　173

8.6.4　角度單位　173

8.6.5　頻率單位　173

8.7　小結(jié)　173

本章習(xí)題　173

上機指導(dǎo)　175

實驗一：練習(xí)使用CSS內(nèi)部樣式表設(shè)置網(wǎng)頁樣式　175

實驗二：練習(xí)使用CSS外部樣式表設(shè)置網(wǎng)頁樣式　175

實驗三：練習(xí)使用CSS偽類設(shè)置超鏈接的樣式　176

第9章　設(shè)置文字和文本樣式　178

9.1　設(shè)置文字樣式　178

9.1.1　字體設(shè)置　178

9.1.2　設(shè)置文字大小　179

9.1.3　設(shè)置粗體　181

9.1.4　設(shè)置文字顏色　181

9.1.5　設(shè)置斜體　183

9.1.6　綜合設(shè)置　183

9.2　設(shè)置文本樣式　184

9.2.1　設(shè)置陰影效果　185

9.2.2　大小寫轉(zhuǎn)換　185

9.2.3　文本縮進　187

9.2.4　文本的水平對齊方式　188

9.2.5　文本的垂直對齊方式　189

9.2.6　設(shè)置文本流入方向　191

9.2.7　設(shè)置文本修飾　192

9.3　空白與換行　193

9.3.1　空格的處理方式　194

9.3.2　字內(nèi)換行　195

9.4　設(shè)置間距　197

9.4.1　行間距　197

9.4.2　字間距　199

9.4.3　詞間距　201

9.5　小結(jié)　203

本章習(xí)題　203

上機指導(dǎo)　203

實驗一：練習(xí)使用font屬性綜合設(shè)置文字樣式　204

實驗二：練習(xí)使用不同的屬性設(shè)置文本的樣式　204

實驗三：練習(xí)使用不同的屬性設(shè)置文本的間距　205

第10章　設(shè)置背景、邊框、邊距和補白　206

10.1　背景顏色　206

10.2　背景圖像　207

10.2.1　設(shè)置背景圖像　207

10.2.2　設(shè)置固定背景圖像　209

10.2.3　設(shè)置背景圖像平鋪方式　210

10.2.4　背景圖像定位　213

10.3　邊框　215

10.3.1　設(shè)置邊框樣式　215

10.3.2　設(shè)置不同的邊框樣式　217

10.3.3　設(shè)置邊框?qū)挾取?18

10.3.4　設(shè)置不同的邊框?qū)挾取?20

10.3.5　設(shè)置邊框顏色　222

10.3.6　設(shè)置不同的邊框顏色　224

10.3.7　綜合設(shè)置邊框效果　225

10.4　邊距　226

10.4.1　設(shè)置上邊距　227

10.4.2　設(shè)置下邊距　227

10.4.3　設(shè)置左邊距　228

10.4.4　設(shè)置右邊距　229

10.4.5　綜合設(shè)置邊距　230

10.5　補白　231

10.5.1　設(shè)置頂端補白　231

10.5.2　設(shè)置底部補白　232

10.5.3　設(shè)置左側(cè)補白　233

10.5.4　設(shè)置右側(cè)補白　234

10.5.5　綜合設(shè)置補白　234

10.6　小結(jié)　235

本章習(xí)題　235

上機指導(dǎo)　235

實驗一：練習(xí)使用背景圖像屬性綜合設(shè)置背景圖像的樣式　237

實驗二：練習(xí)使用邊框?qū)傩跃C合設(shè)置元素邊框的樣式　237

實驗三：練習(xí)使用margin屬性和padding屬性綜合設(shè)置元素的邊距和補白　238

第11章　設(shè)置表格、列表和滾動條樣式　240

11.1　表格　240

11.1.1　合并表格邊框　240

11.1.2　定義表格邊框間距　242

11.1.3　定義表格標(biāo)題位置　244

11.1.4　設(shè)置表格布局　246

11.2　列表　248

11.2.1　設(shè)置列表符號樣式　248

11.2.2　使用圖片設(shè)置列表樣式　251

11.2.3　列表符號顯示位置　252

11.2.4　綜合設(shè)置列表樣式　253

11.3　滾動條　254

11.3.1　設(shè)置滾動條顏色　254

11.3.2　設(shè)置滾動條亮邊框顏色　255

11.3.3　設(shè)置滾動條暗邊框顏色　256

11.3.4　設(shè)置滾動條方向箭頭顏色　257

11.3.5　設(shè)置滾動條基準(zhǔn)色　258

11.4　小結(jié)　260

本章習(xí)題　260

上機指導(dǎo)　260

實驗一：練習(xí)使用CSS中的表格屬性設(shè)置表格的樣式　261

實驗二：練習(xí)使用CSS中的列表屬性設(shè)置列表的樣式　261

實驗三：練習(xí)使用CSS中的滾動條屬性設(shè)置滾動條的樣式　262

第四篇　布局學(xué)習(xí)篇

第12章　控制元素布局　265

12.1　塊級元素和內(nèi)聯(lián)元素　265

12.1.1　塊級元素和內(nèi)聯(lián)元素的概念　265

12.1.2　div元素和span元素　265

12.2　定位　267

12.2.1　定位方式　267

12.2.2　偏移　268

12.2.3　綜合運用　268

12.2.4　定位元素的層疊次序　272

12.3　浮動　273

12.3.1　浮動的概念　274

12.3.2　設(shè)置浮動　274

12.3.3　清除浮動　275

12.4　溢出與剪切　276

12.4.1　溢出內(nèi)容的設(shè)置　277

12.4.2　設(shè)置水平方向超出范圍的處理方式　278

12.4.3　設(shè)置垂直方向超出范圍的處理方式　279

12.4.4　內(nèi)容的剪切　281

12.5　對象的顯示與隱藏　282

12.6　小結(jié)　283

本章習(xí)題　283

上機指導(dǎo)　284

實驗一：練習(xí)使用定位設(shè)置元素的位置　284

實驗二：練習(xí)使用浮動設(shè)置元素的位置　285

實驗三：練習(xí)使用清除浮動清除元素的浮動效果　286

第13章　網(wǎng)頁布局與設(shè)計技巧　287

13.1　網(wǎng)頁布局　287

13.1.1　網(wǎng)頁大小　287

13.1.2　網(wǎng)頁欄目劃分　288

13.1.3　表格布局　289

13.1.4　CSS布局　292

13.2　CSS布局技巧　293

13.2.1　一欄布局　293

13.2.2　二欄布局　295

13.2.3　多欄布局　296

13.3　小結(jié)　298

本章習(xí)題　298

上機指導(dǎo)　299

實驗一：利用表格設(shè)計網(wǎng)頁　299

實驗二：利用CSS設(shè)計網(wǎng)頁　300

實驗三：利用CSS對網(wǎng)頁進行布局　301

第14章　網(wǎng)頁布局綜合案例——寶貝屋網(wǎng)上商店　302

14.1　案例分析　302

14.2　內(nèi)容分析　303

14.3　原型設(shè)計　303

14.4　布局設(shè)計　305

14.4.1　整體樣式設(shè)計　305

14.4.2　頁頭部分　306

14.4.3　內(nèi)容部分　310

14.4.4　頁腳部分　315

14.5　交互效果設(shè)計　316

14.5.1　頂部導(dǎo)航欄　316

14.5.2　主導(dǎo)航欄　317

14.5.3　賬號區(qū)　317

14.5.4　圖像邊框　317

14.5.5　產(chǎn)品分類　318

14.6　小結(jié)　318