HTML CSS網(wǎng)頁設(shè)計與布局從入門到精通目錄

時間：2023-02-10 15:36:02 | 來源：營銷百科

時間：2023-02-10 15:36:02 來源：營銷百科

HTML CSS網(wǎng)頁設(shè)計與布局從入門到精通目錄：第1部分　HTML基礎(chǔ)篇

第1章　網(wǎng)頁設(shè)計基礎(chǔ)知識　3

1.1　基礎(chǔ)概念　3

1.2　網(wǎng)頁與HTML語言　4

1.3Web標準：結(jié)構(gòu)、表現(xiàn)與行為　5

1.3.1　標準的重要性　5

1.3.2　'Web標準'概述　6

1.4　初步理解網(wǎng)頁設(shè)計與開發(fā)的過程　7

1.4.1　基本任務(wù)與角色　7

1.4.2　明確網(wǎng)站定位　8

1.4.3　收集信息和素材　8

1.4.4　策劃欄目內(nèi)容　8

1.4.5　設(shè)計頁面方案　9

1.4.6　制作頁面　9

1.4.7　實現(xiàn)后臺功能　9

1.4.8　整合與測試網(wǎng)站　10

1.5　與設(shè)計相關(guān)的技術(shù)因素　10

1.6　本章小結(jié)　12

第2章　HTML網(wǎng)頁文檔結(jié)構(gòu)　13

2.1　HTML簡介　13

2.1.1　創(chuàng)建第一個HTML文件13

2.1.2　HTML文件結(jié)構(gòu)　15

2.2　簡單的HTML案例　16

2.3　網(wǎng)頁源文件的獲取　18

2.3.1　直接查看源文件　19

2.3.2　保存網(wǎng)頁　19

2.4　輔助：利用Dreamweaver快速建立基本文檔　20

2.5　本章小結(jié)　24

第3章　用HTML設(shè)置文本和圖像　25

3.1　文本排版　25

3.1.1　實現(xiàn)段落與段內(nèi)換行(p和br)　25

3.1.2　設(shè)置標題(h1～h6)　27

3.1.3　使文字水平居中(center)　27

3.1.4　設(shè)置文字段落的縮進(blockquote)　29

3.2　設(shè)置文字列表　29

3.2.1　建立無序列表(ul)　29

3.2.2　建立有序列表(ol)　30

3.3　HTML標記與HTML屬性　31

3.3.1　用align屬性控制段落的水平位置　31

3.3.2　用bgcolor屬性設(shè)置背景顏色　32

3.3.3　設(shè)置文字的特殊樣式　34

3.3.4　設(shè)置文字的大小和顏色(font)　35

3.4　忘記過時的HTML標記和屬性　35

3.5　特殊文字符號　36

3.6　在網(wǎng)頁中使用圖像(img)　38

3.6.1　網(wǎng)頁中的圖片格式　38

3.6.2　一個簡單的圖片網(wǎng)頁　38

3.6.3　使用路徑　39

3.7　用width和height屬性設(shè)置圖片的尺寸　41

3.8　用alt屬性為圖像設(shè)置替換文本　43

3.9　輔助：利用Dreamweaver設(shè)置文本和圖像　43

3.10　輔助：利用Dreamweaver代碼視圖提高效率　47

3.10.1　代碼提示　47

3.10.2　代碼折疊　49

3.10.3　使用拆分視圖對代碼快速定位　49

3.11　本章小結(jié)　50

第4章　用HTML建立超鏈接(a)　51

4.1　設(shè)置基本文字超鏈接　51

4.1.1　URL的格式　51

4.1.2　URL的類型　52

4.2　設(shè)置頁面內(nèi)部的特定目標的鏈接　53

4.3　設(shè)置圖片的超鏈接　54

4.4　設(shè)置電子郵件鏈接　54

4.5　設(shè)置以新窗口顯示鏈接頁面　55

4.6　創(chuàng)建熱點區(qū)域　55

4.6.1　用HTML建立熱點區(qū)域(map和area)　56

4.6.2　輔助：利用Dreamweaver精確定位熱點區(qū)域　57

4.7　框架之間的鏈接　59

4.7.1　建立框架與框架集(frame和frameset)　59

4.7.2　用cols屬性將窗口分為左右兩部分　60

4.7.3　用rows屬性將窗口分為上中下三部分　60

4.7.4　框架的嵌套　61

4.7.5　用src屬性在框架中插入網(wǎng)頁　61

4.7.6　用src屬性在框架之間鏈接　62

4.7.7　創(chuàng)建嵌入式框架(iframe)　64

4.8　鏈接增多后網(wǎng)站的組織結(jié)構(gòu)與維護　65

4.9　本章小結(jié)　66

第5章　用HTML創(chuàng)建表格　67

5.1　表格基本結(jié)構(gòu)(table)　67

5.2合并單元格68

5.2.1　用colspan屬性左右合并單元格　68

5.2.2　用rowspan屬性上下合并單元格　69

5.3　用align屬性設(shè)置對齊方式　70

5.4　用bgcolor屬性設(shè)置表格背景色和邊框顏色　71

5.5　用cellpadding屬性和cellspacing屬性設(shè)定距離　72

5.6　完整的表格標記(thead、tbody和tfoot)　73

5.7　需要拋棄的方法：用表格進行頁面布局　75

5.8　本章小結(jié)　78

第2部分　CSS基礎(chǔ)篇

第6章　(X)HTML與CSS概述　81

6.1　HTML與XHTML　81

6.1.1　追根溯源　81

6.1.2　DOCTYPE(文檔類型)的含義與選擇　82

6.1.3　XHTML與HTML的重要區(qū)別　83

6.2　(X)HTML與CSS　84

6.2.1　CSS標準　85

6.2.2　傳統(tǒng)HTML的缺點　85

6.2.3　CSS的引入　86

6.2.4　如何編輯CSS　88

6.2.5　瀏覽器與CSS　89

6.3　本章小結(jié)　90

第7章　CSS核心基礎(chǔ)　91

7.1　構(gòu)造CSS規(guī)則　91

7.2　基本CSS選擇器92

7.2.1　標記選擇器　92

7.2.2　類別選擇器　93

7.2.3　ID選擇器　95

7.3　在HTML中使用CSS的方法　96

7.3.1　行內(nèi)樣式　96

7.3.2　內(nèi)嵌式　97

7.3.3　鏈接式　98

7.3.4　導(dǎo)入樣式　99

7.3.5　各種方式的優(yōu)先級問題　100

7.4　本章小結(jié)　102

第8章　手工編寫與借助工具　103

8.1　從零開始　103

8.2　設(shè)置標題　104

8.3　控制圖片　105

8.4　設(shè)置正文　106

8.5　設(shè)置整體頁面　106

8.6　對段落進行分別設(shè)置　107

8.7　完整代碼　108

8.8　CSS的注釋　109

8.9　輔助：使用Dreamweaver創(chuàng)建頁面　109

8.10　輔助：在Dreamweaver中新建CSS規(guī)則　110

8.11　輔助：在Dreamweaver中編輯CSS規(guī)則　112

8.12　為圖像創(chuàng)建CSS規(guī)則　114

8.13　本章小結(jié)　116

第9章　CSS的高級特性　117

9.1　復(fù)合選擇器　117

9.1.1　'交集'選擇器　117

9.1.2　'并集'選擇器　118

9.1.3后代選擇器120

9.2　CSS的繼承特性　122

9.2.1　繼承關(guān)系　122

9.2.2　CSS繼承的運用　123

9.3　CSS的層疊特性　125

9.4　本章小結(jié)　126

第10章　用CSS設(shè)置文本樣式　127

10.1　長度單位　127

10.2　顏色定義　128

10.3　準備頁面　129

10.4　設(shè)置文字的字體　129

10.5　設(shè)置文字的傾斜效果　130

10.6　設(shè)置文字的加粗效果　131

10.7　英文字母大小寫轉(zhuǎn)換　132

10.8　控制文字的大小　133

10.9　文字的裝飾效果　133

10.10　設(shè)置段落首行縮進　134

10.11　設(shè)置字詞間距　135

10.12　設(shè)置段落內(nèi)部的文字行高　136

10.13　設(shè)置段落之間的距離　136

10.14　控制文本的水平位置　137

10.15　設(shè)置文字與背景的顏色　138

10.16　設(shè)置段落的垂直對齊方式　138

10.16.1　使用line-height屬性進行設(shè)置　138

10.16.2　更通用的解決方案　139

10.17　本章小結(jié)　140

第11章　用CSS設(shè)置圖像效果　141

11.1　設(shè)置圖片邊框　141

11.1.1　基本屬性　141

11.1.2　為不同的邊框分別設(shè)置樣式　142

11.2　圖片縮放　144

11.3　圖文混排　145

11.3.1　文字環(huán)繞　145

11.3.2　設(shè)置圖片與文字的間距　146

11.4　案例——八大行星科普網(wǎng)頁　147

11.5　設(shè)置圖片與文字的對齊方式　150

11.5.1　橫向?qū)R方式　150

11.5.2　縱向?qū)R方式　151

11.6　本章小結(jié)　154

第12章　用CSS設(shè)置背景顏色與圖像　155

12.1　設(shè)置背景顏色　155

12.2　設(shè)置背景圖像　156

12.3　設(shè)置背景圖像平鋪　157

12.4　設(shè)置背景圖像位置　159

12.5　設(shè)置背景圖片位置固定　162

12.6　設(shè)置標題的圖像替換　163

12.7　使用滑動門技術(shù)的標題　166

12.8　本章小結(jié)　168

第3部分　CSS高級篇

第13章CSS盒子模型171

13.1　'盒子'與'模型'的概念探究　171

13.2　邊框(border)　172

13.2.1　設(shè)置邊框樣式(border-style)　173

13.2.2　屬性值的簡寫形式　174

13.2.3　邊框與背景　176

13.3　設(shè)置內(nèi)邊距(padding)　177

13.4　設(shè)置外邊距(margin)　178

13.5　盒子之間的關(guān)系　179

13.5.1　HTML與DOM　180

13.5.2　標準文檔流　183

13.5.3　div標記與span標記　184

13.6　盒子在標準流中的定位原則　187

13.6.1　行內(nèi)元素之間的水平margin　187

13.6.2　塊級元素之間的豎直margin　188

13.6.3　嵌套盒子之間的margin　189

13.6.4　margin屬性可以設(shè)置為負值　191

13.7　思考題　192

13.8　本章小結(jié)　196

第14章　盒子的浮動與定位　197

14.1　盒子的浮動　197

14.1.1　準備代碼　197

14.1.2　案例1——設(shè)置第1個浮動的div　199

14.1.3　案例2——設(shè)置第2個浮動的div　199

14.1.4　案例3——設(shè)置第3個浮動的div　199

14.1.5　案例4——改變浮動的方向　200

14.1.6　案例5——再次改變浮動的方向　200

14.1.7　案例6——全部向左浮動　201

14.1.8　案例7——使用clear屬性清除浮動的影響　202

14.1.9　案例8——擴展盒子的高度　203

14.2　盒子的定位　204

14.2.1　靜態(tài)定位(static)　204

14.2.2　相對定位(relative)　205

14.2.3　絕對定位(absolute)　209

14.2.4　固定定位(fixed)　214

14.3　z-index空間位置　214

14.4　盒子的display屬性　215

14.5　本章小結(jié)　216

第15章　用CSS設(shè)置表格樣式　217

15.1　控制表格　217

15.1.1　表格中的標記　217

15.1.2　設(shè)置表格的邊框　219

15.1.3　確定表格的寬度　222

15.1.4　其他與表格相關(guān)的標記　223

15.2　美化表格　224

15.2.1　搭建HTML結(jié)構(gòu)　224

15.2.2　整體設(shè)置　225

15.2.3　設(shè)置單元格樣式　226

15.2.4　斑馬紋效果　227

15.2.5　設(shè)置列樣式　227

15.3　設(shè)置鼠標指針經(jīng)過時整行變色提示的表格　232

15.3.1　在Firefox和IE 7中實現(xiàn)鼠標指針經(jīng)過時整行變色　232

15.3.2　在IE 6中實現(xiàn)鼠標指針經(jīng)過時整行變色　233

15.3.3　最終合并代碼　234

15.4　輔助：使用jQuery實現(xiàn)更多效果　236

15.4.1　用jQuery實現(xiàn)斑馬紋效果　237

15.4.2　用jQuery實現(xiàn)'前3行'特殊樣式　239

15.4.3　用jQuery實現(xiàn)漸變背景色表格效果　240

15.4.4　用jQuery實現(xiàn)鼠標指針經(jīng)過變色效果　241

15.5　案例——日歷　241

15.5.1　搭建HTML結(jié)構(gòu)　241

15.5.2　設(shè)置整體樣式和表頭樣式　244

15.5.3　設(shè)置日歷單元格樣式　245

15.6　本章小結(jié)　248

第16章　用CSS設(shè)置鏈接與導(dǎo)航菜單　249

16.1　豐富的超鏈接特效　250

16.2　創(chuàng)建按鈕式超鏈接　252

16.3　制作熒光燈效果的菜單　253

16.3.1HTML框架254

16.3.2　設(shè)置容器的CSS樣式254

16.3.3　設(shè)置菜單項的CSS樣式　255

16.4　控制鼠標指針　257

16.5　設(shè)置項目列表樣式　257

16.5.1　列表的符號　258

16.5.2　圖片符號　260

16.6　創(chuàng)建簡單的導(dǎo)航菜單　261

16.6.1　簡單的豎直排列菜單　261

16.6.2　橫豎自由轉(zhuǎn)換菜單　264

16.7　設(shè)置圖片翻轉(zhuǎn)效果　265

16.8　應(yīng)用滑動門技術(shù)的玻璃效果菜單　266

16.8.1　基本思路　266

16.8.2　設(shè)置菜單整體效果　267

16.8.3　使用'滑動門'技術(shù)設(shè)置玻璃材質(zhì)背景　268

16.8.4　進一步解決的問題　269

16.9　鼠標指針經(jīng)過時給圖片增加邊框　270

16.10　本章小結(jié)　272

第17章　用CSS建立表單　273

17.1　表單的用途和原理　273

17.2　表單輸入類型　274

17.2.1　文本輸入框　274

17.2.2　單選按鈕　274

17.2.3　復(fù)選按鈕　275

17.2.4　密碼輸入框　275

17.2.5　按鈕　276

17.2.6　多行文本框　277

17.2.7　列表框　277

17.3　CSS與表單　278

17.3.1　表單中的元素　278

17.3.2　像文字一樣的按鈕　281

17.3.3　多彩的下拉菜單　283

17.4　案例——'數(shù)獨'游戲網(wǎng)頁　284

17.4.1　搭建基本表格　285

17.4.2　設(shè)置表格樣式　286

17.4.3　加入文本輸入框　287

17.4.4　設(shè)置文本輸入框的樣式　287

17.5　對齊文本框和旁邊的圖像按鈕　289

17.6　本章小結(jié)　290

第18章　網(wǎng)頁樣式綜合案例——靈活的電子相冊　291

18.1　搭建框架　291

18.2　陣列模式　293

18.3　單列模式　298

18.4　改進陣列模式　301

18.5　IE 6兼容　304

18.6　雙向聯(lián)動模式　306

18.6.1　在Firefox中實現(xiàn)　306

18.6.2　IE 6兼容　311

18.6.3　改變方向　312

18.7　本章小結(jié)　314

第4部分　CSS布局篇

第19章　固定寬度布局剖析與制作　317

19.1　向報紙學(xué)習(xí)排版思想　317

19.2　CSS排版觀念　319

19.2.1　兩列布局　320

19.2.2　三列布局　320

19.2.3　多列布局　321

19.2.4　布局結(jié)構(gòu)的表達式與結(jié)構(gòu)圖　321

19.3　圓角框　325

19.3.1　準備圖像　325

19.3.2　搭建HTML結(jié)構(gòu)　326

19.3.3　放置背景圖像　328

19.3.4　設(shè)置樣式并修復(fù)缺口　329

19.4　單列布局　330

19.4.1　放置第一個圓角框　331

19.4.2　設(shè)置圓角框的CSS樣式331

19.4.3　放置其他圓角框　334

19.5　'1-2-1'固定寬度布局　335

19.5.1　準備工作　336

19.5.2　絕對定位法　337

19.5.3　浮動法　339

19.6　'1-3-1'固定寬度布局　341

19.7　'1-((1-2) 1)-1'固定寬度布局　343

19.8　本章小結(jié)　344

第20章　變寬度網(wǎng)頁布局剖析與制作　345

20.1　'1-2-1'變寬度網(wǎng)頁布局　345

20.1.1　'1-2-1'等比例變寬布局　345

20.1.2　'1-2-1'單列變寬布局　348

20.2　'1-3-1'寬度適應(yīng)布局　352

20.2.1　'1-3-1'三列寬度等比例布局　352

20.2.2　'1-3-1'單側(cè)列寬度固定的變寬布局　352

20.2.3　'1-3-1'中間列寬度固定的變寬布局　353

20.2.4　進一步的思考　355

20.2.5　'1-3-1'雙側(cè)列寬度固定的變寬布局　356

20.2.6　'1-3-1'中列和側(cè)列寬度固定的變寬布局　358

20.3　變寬布局方法總結(jié)　359

20.4　分列布局背景色問題　360

20.4.1　設(shè)置固定寬度布局的列背景色　360

20.4.2　設(shè)置特殊寬度變化布局的列背景色　364

20.4.3　設(shè)置單列寬度變化布局的列背景色　364

20.5　CSS排版與傳統(tǒng)的表格方式排版的分析　365

20.6　瀏覽器的兼容性問題　368

20.7　CSS布局頁面的調(diào)試技巧　368

20.7.1　技巧1：設(shè)置背景色或者邊框，確定錯誤范圍　369

20.7.2　技巧2：刪除無關(guān)代碼，暴露核心矛盾　369

20.7.3　技巧3：先用Firefox調(diào)試，然后使它兼容IE　369

20.7.4　技巧4：善于利用工具，提高調(diào)試效率　370

20.7.5　技巧5：善于提問，尋求幫助　370

20.8　本章小結(jié)　370

第21章　網(wǎng)頁布局綜合案例——兒童用品網(wǎng)上商店　371

21.1　案例概述　371

21.2　內(nèi)容分析　372

21.3　HTML結(jié)構(gòu)設(shè)計　374

21.4　原型設(shè)計　377

21.5　頁面方案設(shè)計　380

21.6　布局設(shè)計　383

21.6.1　整體樣式設(shè)計　383

21.6.2　頁頭部分　384

21.6.3　內(nèi)容部分　386

21.6.4　頁腳部分　389

21.7　細節(jié)設(shè)計　389

21.7.1　頁頭部分　389

21.7.2　內(nèi)容部分　395

21.7.3　左側(cè)的主要內(nèi)容列　395

21.7.4　右邊欄　398

21.8　CSS布局的優(yōu)點　402

21.9　交互效果設(shè)計　403

21.9.1　次導(dǎo)航欄　403

21.9.2　主導(dǎo)航欄　404

21.9.3　賬號區(qū)　404

21.9.4　圖像邊框　405

21.9.5　產(chǎn)品分類　407

21.10　遵從Web標準的設(shè)計流程　407

21.11　從'網(wǎng)頁'到'網(wǎng)站'　408

21.11.1　歷史回顧　408

21.11.2　不完善的辦法　408

21.11.3　服務(wù)器出場　409

21.11.4　CMS出現(xiàn)　409

21.11.5　具體操作　409

21.12　 本章小結(jié)　410

附錄A　網(wǎng)站發(fā)布與管理　411

A.1　在Internet上建立自己的Web站點　411

A.1.1　制作網(wǎng)站內(nèi)容　411

A.1.2　申請域名　411

A.1.3　信息發(fā)布　411

A.2　租用虛擬主機空間412

A.2.1　了解基本的技術(shù)名詞　412

A.2.2　選擇和租用虛擬主機　413

A.3　向服務(wù)器上傳網(wǎng)站內(nèi)容　414

A.3.1　使用Dreamweaver上傳文件　414

A.3.2　使用IE瀏覽器上傳文件　415

A.3.3　使用專業(yè)FTP工具上傳文件　416

A.4　網(wǎng)站管理　418

A.4.1　修改密碼　418

A.4.2　集團郵箱管理　419

A.4.3　注意事項　420

附錄B　CSS英文小字典　421