HTML CSS網(wǎng)頁設(shè)計(jì)詳解圖書目錄

時(shí)間：2023-02-21 01:22:01 | 來源：營(yíng)銷百科

時(shí)間：2023-02-21 01:22:01 來源：營(yíng)銷百科

HTML CSS網(wǎng)頁設(shè)計(jì)詳解圖書目錄：第1篇 頁面制作入門篇

第1章 了解網(wǎng)頁2

1.1 什么是網(wǎng)頁 2

1.1.1 網(wǎng)頁的概述 2

1.1.2 靜態(tài)網(wǎng)頁 3

1.1.3 動(dòng)態(tài)網(wǎng)頁 4

1.1.4 開發(fā)動(dòng)態(tài)頁面和靜態(tài)頁面的聯(lián)系 5

1.2 開發(fā)網(wǎng)頁的工具 7

1.2.1 HTML頁面的開發(fā)工具 7

1.2.2 動(dòng)態(tài)頁面的開發(fā)工具 8

1.3 使用網(wǎng)頁瀏覽器 9

1.3.1 網(wǎng)頁瀏覽器的工作原理 9

1.3.2 常用的兩種瀏覽器 10

1.4 HTML、XML和XHTML語言 11

1.4.1 超文本標(biāo)記語言HTML 11

1.4.2 可擴(kuò)展標(biāo)識(shí)語言XML 12

1.4.3 可擴(kuò)展超文本標(biāo)識(shí)語言XHTML 12

1.5 編寫一個(gè)簡(jiǎn)單的頁面 13

1.6 小結(jié) 14

1.7 本章習(xí)題 14

第2章 通過學(xué)習(xí)他人的網(wǎng)頁了解HTML能做什么 16

2.1 用記事本打開一個(gè)頁面 16

2.2 初識(shí)HTML 18

2.2.1 HTML語法18

2.2.2 HTML文檔的結(jié)構(gòu) 19

2.3 HTML文檔基本結(jié)構(gòu)標(biāo)簽的作用 21

2.3.1 給頁面一個(gè)聲明--樣本代碼 21

2.3.2 踏出制作頁面的第一步--開始標(biāo)簽html 22

2.3.3 頁面的'腦袋'--頭標(biāo)簽和頭標(biāo)簽的對(duì)象 22

2.3.4 給頁面起名字--標(biāo)題標(biāo)簽title 25

2.3.5 頁面的'身體'--主體標(biāo)簽body 26

2.3.6 美化HTML文檔 27

2.4 案例：制作第一個(gè)頁面 27

2.5 小結(jié) 29

2.6 本章習(xí)題 29

第3章 動(dòng)手在網(wǎng)頁中寫些什么 31

3.1 新舊方法對(duì)比 31

3.2 文本的排版格式 33

3.2.1 寫一行換一行 33

3.2.2 在頁面文本中空格 34

3.2.3 文本的段落要對(duì)齊 36

3.3 文本的屬性樣式 38

3.3.1 不一樣的文本字體大小 39

3.3.2 奇妙的特殊符號(hào) 41

3.3.3 給文本加標(biāo)注 42

3.4 整齊的文本列表 43

3.4.1 無序列表 43

3.4.2 有序列表 44

3.4.3 定義列表 45

3.4.4 列表嵌套 46

3.5 制作一則通知 48

3.6 小結(jié) 50

3.7 本章習(xí)題 50

第4章 將圖像放入頁面中 52

4.1 圖像的基礎(chǔ)知識(shí) 52

4.1.1 最常用的圖像--位圖 53

4.1.2 在頁面中常用的位圖格式 53

4.1.3 奇妙的矢量圖 54

4.1.4 圖像的分辨率 55

4.1.5 認(rèn)識(shí)一些網(wǎng)頁中常用的BANNER尺寸 55

4.2 用圖像編織美麗的頁面 56

4.2.1 理解圖像路徑 56

4.2.2 像編輯文本對(duì)齊一樣在頁面中對(duì)齊圖像 57

4.2.3 圖像與文本的對(duì)齊方式 58

4.2.4 控制圖像與文本的距離 60

4.3 讓圖像變得更美觀 61

4.3.1 修改圖像的寬度和高度 61

4.3.2 不一樣的改變--給圖像添加邊框 62

4.3.3 獨(dú)樹一幟的水平線 63

4.4 改變頁面的背景 64

4.5 案例：把寵物的照片放到網(wǎng)頁上去 65

4.6 小結(jié) 67

4.7 本章習(xí)題 67

第5章 讓網(wǎng)頁變得更絢麗 69

5.1 了解計(jì)算機(jī)語言下的顏色描述 69

5.2 讓頁面絢麗多彩 70

5.2.1 改變頁面背景顏色 70

5.2.2 改變頁面文本字體顏色 71

5.3 不尋常的圖像應(yīng)用 72

5.3.1 會(huì)動(dòng)的GIF圖像 72

5.3.2 圖像的透明通道 73

5.3.3 帶有透明通道圖像的應(yīng)用 75

5.4 案例：修飾普通頁面 77

5.5 小結(jié) 78

5.6 本章習(xí)題 78

第6章 頁面鏈接 81

6.1 何為頁面鏈接 81

6.1.1 初識(shí)頁面鏈接 82

6.1.2 理解鏈接地址 83

6.2鏈接的基本知識(shí) 84

6.2.1 基本的文本鏈接 84

6.2.2 基本的圖像鏈接 85

6.2.3 郵箱地址鏈接 86

6.2.4 在同一頁面中快速查找信息 87

6.3 提高頁面鏈接的友好度 89

6.3.1 美觀鏈接的狀態(tài) 90

6.3.2 特殊的鏈接方式 92

6.3.3 熱點(diǎn)圖像區(qū)域的鏈接 93

6.4 在新窗口中顯示鏈接窗口 96

6.5 案例：制作普通鏈接的主頁 96

6.6 小結(jié) 99

6.7 本章習(xí)題 99

第2篇 頁面制作提高篇

第7章 CSS規(guī)則 104

7.1 如何學(xué)習(xí)CSS 104

7.2 CSS基本的規(guī)則寫法 107

7.2.1 基本的樣式表的寫法 107

7.2.2 使用類class和標(biāo)志id鏈接樣式表 108

7.2.3 創(chuàng)建選擇器 109

7.2.4 應(yīng)用CSS樣式表 113

7.3 用CSS來修飾頁面文本 115

7.3.1 修飾頁面文本字體 115

7.3.2 文本的字號(hào) 116

7.3.3 文本段落行高 117

7.3.4 禁止文本自動(dòng)換行 119

7.4 給頁面對(duì)象添加顏色 120

7.5 案例：使用CSS制作個(gè)人頁面 121

7.6 小結(jié) 123

7.7 本章習(xí)題 124

第8章 表格 126

8.1 理解頁面中的表格 126

8.2 普通表格的應(yīng)用 126

8.2.1 制作普通表格 127

8.2.2 表格的基本屬性 128

8.2.3 合并單元格 130

8.2.4 表格標(biāo)題 132

8.2.5 拆分表格 132

8.2.6 設(shè)置表格的列 133

8.3 修飾單元格 135

8.3.1 通過CSS修飾單元格的邊框 135

8.3.2 合并相鄰單元格 137

8.4 編輯單元格中的內(nèi)容 138

8.4.1 單元格中文本與單元格大小 138

8.4.2 修飾單元格中的內(nèi)容 139

8.5 案例：制作球賽積分表 140

8.6 小結(jié) 143

8.7 本章習(xí)題 144

第9章 創(chuàng)建框架結(jié)構(gòu)的頁面 146

9.1 創(chuàng)建窗口框架頁面 146

9.1.1 創(chuàng)建窗口框架的frameset和frame標(biāo)簽 147

9.1.2 橫向分割窗口 147

9.1.3 縱向分割窗口 148

9.1.4框架的嵌套 149

9.1.5 將頁面放入窗口框架中 150

9.2 修飾框架的細(xì)節(jié) 151

9.2.1 給無法處理框架的瀏覽器注釋說明 151

9.2.2 固定框架的位置 152

9.2.3 框架中設(shè)置滾動(dòng)條 152

9.3 修改框架邊框的樣式 153

9.3.1 判定邊框是否顯示 153

9.3.2 改變邊框的表現(xiàn)效果 154

9.3.3 邊框的邊距 155

9.4 框架集中頁面之間的鏈接 156

9.4.1 在指定的框架中打開鏈接 156

9.4.2 框架內(nèi)的錨點(diǎn)鏈接 159

9.5 靈活的iframe框架 160

9.6 案例：制定自己的鏈接主頁 161

9.7 小結(jié) 163

9.8 本章習(xí)題 164

第10章 當(dāng)CSS樣式表遇到層 166

10.1 理解塊級(jí)的意義 166

10.2 頁面中的層 167

10.2.1 行span和層div 168

10.2.2層的基本定位 168

10.2.3 層的疊加 170

10.3 框模型 171

10.3.1 理解框模型 171

10.3.2 空距padding屬性 173

10.3.3 邊框border的擴(kuò)展屬性 175

10.3.4 邊距（margin） 176

10.3.5 框模型的溢出 177

10.4 定制層的display屬性 178

10.5 CSS Hack 180

10.6 案例：簡(jiǎn)單的CSS DIV 182

10.7 小結(jié) 184

10.8 本章習(xí)題 184

第11章 進(jìn)一步討論頁面布局的方法 187

11.1 頁面中的定位 187

11.1.1 靜態(tài)定位 187

11.1.2相對(duì)位置188

11.1.3 絕對(duì)定位 189

11.1.4 固定定位 190

11.2 浮動(dòng)層 190

11.3 CSS的新奇技術(shù)以及未來發(fā)展 192

11.3.1 圖像替換技術(shù) 193

11.3.2 CSS 3.0的新發(fā)展 195

11.3.3 實(shí)現(xiàn)圓角框模型 195

11.4 案例：有效地管理頁面布局 196

11.5 小結(jié) 202

11.6 本章習(xí)題 202

第3篇 動(dòng)感頁面篇

第12章 神奇的表單 206

12.1表單的工作原理 208

12.1.1 script標(biāo)簽 208

12.1.2 創(chuàng)建表單 208

12.1.3 表單域 210

12.2 通過表單展示不一樣的頁面 210

12.2.1 input對(duì)象下的多種表單表現(xiàn)形式 210

12.2.2 text文本框的樣式表單 211

12.2.3 password輸入密碼的樣式表單 212

12.2.4 checkbox復(fù)選框的樣式表單 213

12.2.5 radio單選按鈕的樣式表單 214

12.2.6 submit提交數(shù)據(jù)的樣式表單 215

12.2.7 hidden隱藏域的樣式表單 216

12.2.8 image樣式的表單 217

12.2.9 file上傳文件的樣式表單 217

12.3 textarea對(duì)象的表單 218

12.4 select對(duì)象的表單 219

12.5 表單域集合 222

12.6 案例：制作一個(gè)精美的由表單構(gòu)成

的頁面 222

12.7 小結(jié) 227

12.8 本章習(xí)題 227

第13章 在網(wǎng)頁中加入神奇的效果 230

13.1 什么是腳本語言 230

13.1.1 初識(shí)VBScript 230

13.1.2 學(xué)習(xí)JavaScript的起步 231

13.2 JavaScript和Java的區(qū)別 233

13.3 JavaScript的基本語法 233

13.3.1 JavaScript中的標(biāo)識(shí)符和保留關(guān)鍵字 234

13.3.2 JavaScript語法的特殊規(guī)則 235

13.4 JavaScript的數(shù)據(jù)類型 235

13.4.1 常量 236

13.4.2 變量 236

13.4.3 數(shù)據(jù)類型轉(zhuǎn)換 237

13.4.4運(yùn)算符238

13.4.5 表達(dá)式 239

13.5 流程控制 240

13.5.1 順序結(jié)構(gòu) 240

13.5.2 選擇結(jié)構(gòu) 241

13.5.3 循環(huán)結(jié)構(gòu) 243

13.6 了解函數(shù) 245

13.7 案例：一個(gè)使用基本語法的

JavaScript例子 247

13.8 小結(jié) 250

13.9 本章習(xí)題 250

第14章 JavaScript入門 253

14.1 了解一下何為'對(duì)象' 253

14.1.1 JavaScript對(duì)象概述 253

14.1.2 DOM介紹 255

14.2 JavaScript中的數(shù)組 256

14.2.1 定義和操作數(shù)組 256

14.2.2 多維數(shù)組 259

14.3 內(nèi)部對(duì)象 259

14.3.1 Math對(duì)象 260

14.3.2 Date對(duì)象 260

14.3.3 String對(duì)象 260

14.4 window對(duì)象 261

14.4.1 window對(duì)象屬性 261

14.4.2 window對(duì)象方法 264

14.4.3 window對(duì)象事件 267

14.5 document對(duì)象 269

14.5.1 document對(duì)象屬性 269

14.5.2 document對(duì)象方法 269

14.5.3 document對(duì)象事件 270

14.6 案例：一個(gè)運(yùn)用JavaScript實(shí)現(xiàn)的動(dòng)態(tài)頁面 272

14.7 小結(jié) 275

14.8 本章習(xí)題 276

第15章 了解制作頁面的工具 278

15.1 可視化編輯頁面工具--Dreamweaver 278

15.1.1 了解Dreamweaver CS6的界面 278

15.1.2 Dreamweaver的菜單 280

15.2 神奇的'美工筆'--Photoshop 280

15.2.1 了解Photoshop的界面 280

15.2.2 Photoshop的使用技巧 281

15.3 網(wǎng)頁中的動(dòng)畫--Flash 283

15.3.1 認(rèn)識(shí)Flash文件 283

15.3.2 在頁面中放入Flash文件 283

15.3.3 制作Flash的軟件 286

15.3.4 Flash 8的菜單 287

15.3.5 Flash 8的主要功能 287

15.3.6 Flash的常用交互技巧 287

15.4 案例：使用Dreamweaver制作頁面 289

15.5 小結(jié) 291

15.6 本章習(xí)題 291

第4篇 頁面實(shí)戰(zhàn)篇

第16章 綜合案例1：制作主流網(wǎng)站界面 294

16.1 構(gòu)思基礎(chǔ)的布局 294

16.2 設(shè)計(jì)基礎(chǔ)模塊的樣式表 295

16.3 完善網(wǎng)站的子模塊 297

16.3.1 網(wǎng)站的導(dǎo)航欄 297

16.3.2 頁面的側(cè)欄 298

16.4 最終頁面 300

16.5 小結(jié) 301

第17章 綜合案例2：設(shè)計(jì)復(fù)雜頁面 302

17.1 頁面的框架布局 302

17.1.1 定位頁面的內(nèi)容 302

17.1.2 頁面初級(jí)布局的代碼 303

17.2 細(xì)化頁面的局部 304

17.2.1 intro部分 304

17.2.2 頁面的左側(cè)部分 306

17.2.3 頁面的右側(cè)欄主體部分和頁腳 309

17.3 小結(jié) 312

第18章 綜合案例3：制作英文網(wǎng)站 313

18.1 分析效果圖 313

18.2 切圖 314

18.2.1 制作首頁的切圖 315

18.2.2 二級(jí)頁面的切圖 316

18.3 制作站點(diǎn)首頁頭部 317

18.3.1 首頁頭部的信息和基礎(chǔ)樣式的制作 317

18.3.2 首頁頭部的分析 318

18.3.3 首頁頭部結(jié)構(gòu)的制作 318

18.3.4 首頁頭部CSS代碼的編寫 319

18.4 制作首頁的主體部分 321

18.4.1 分析主體部分效果圖 321

18.4.2 制作主體左側(cè)部分的結(jié)構(gòu) 322

18.4.3 制作主體左側(cè)部分的樣式 324

18.4.4 制作主體中間部分的結(jié)構(gòu) 327

18.4.5 制作主體中間部分的樣式 328

18.4.6 制作主體右側(cè)部分的結(jié)構(gòu) 331

18.4.7 制作主體右側(cè)部分的樣式 332

18.5 制作首頁的底部 334

18.6 二級(jí)頁面的制作 336

18.6.1 分析二級(jí)頁面的效果圖 336

18.6.2 制作二級(jí)頁面中間內(nèi)容部分的結(jié)構(gòu) 336

18.6.3 制作二級(jí)頁面中間內(nèi)容部分的樣式 337

18.6.4 制作二級(jí)頁面右側(cè)部分的結(jié)構(gòu) 339

18.6.5 制作二級(jí)頁面右側(cè)部分的樣式 340

18.8 小結(jié) 341

第19章 綜合案例4：使用Dreamweaver制作中文網(wǎng)站 342

19.1 分析效果圖 342

19.2 制作首頁的切圖 343

19.3 制作站點(diǎn)首頁頭部 345

19.3.1 首頁頭部的信息和基礎(chǔ)樣式的制作 345

19.3.2 首頁頭部的分析 348

19.3.3 首頁頭部logo和banner部分的制作 348

19.3.4 導(dǎo)航列表的制作 351

19.4 制作首頁的主體部分 354

19.4.1 分析主體部分效果圖 354

19.4.2 制作主體部分的父元素 355

19.4.3 制作主體左側(cè)部分的樣式 356

19.4.4 制作主體右側(cè)內(nèi)容中'關(guān)于我們'的部分 359

19.4.5 制作'今日新聞'部分 362

19.4.6 制作'證券點(diǎn)撥'和'證券時(shí)評(píng)'部分 364

19.4.7 制作'合作伙伴'部分 366

19.5 制作首頁的底部 368

19.6 二級(jí)頁面的制作 369

19.7 小結(jié) 371

附錄1 HTML 4.0快速參考 372

附錄2 CSS中支持的顏色名稱 387^[2]