精通DIV+CSS網頁樣式與布局

精通DIV+CSS網頁樣式與布局

31816.2.1

基本信息

內容簡介

精通DIV+CSS網頁樣式與布局精通DIV+CSS網頁樣式與布局

隨著web 2.0大潮的席捲而來,傳統的表格布局模式逐漸被div+css的設計模式所取代。使用div搭建框架,使用css定製、改善網頁的顯示效果,已經成為一個網頁設計的標準化模式。對於網頁設計人員來說,div+css已經成為必須掌握的技術。

《精通div+css網頁樣式與布局》一共18個章節,前面14章,全面介紹div+css的基本語法和概念,內容包括:開發網站的基礎知識,html和xhtml的相關技術,css的基本語法,css定義字型、連結、圖片、表格、表單等樣式,css濾鏡的使用,CSS定位與div布局,javascript、xml、ajax與css的結合使用,以及css開發中常見問題的解決方法等。在最後的4章中,給出了“娛樂資訊網”、“設計公司網站”、“旅遊酒店網站”和“新聞網站”4個案例。

《精通div+css網頁樣式與布局》採用了“語法講述+案例分析+實訓+上機題”的方式進行講解,通過學習,可以掌握一些實用的div+css的知識,還能學到javascript和ajax等的擴展知識。

《精通div+css網頁樣式與布局》適合從事網頁設計人員(尤其是美工)、web開發人員閱讀。《精通div+css網頁樣式與布局》也可作為高等院校相關專業的參考用書,特別是《精通div+css網頁樣式與布局》的案例,能幫助閱讀者輕易完成課程設計等工作。

目錄

《精通div+css網頁樣式與布局》

第1章 開發網站,我們需要做些什麼 1

1.1 網站需要什麼 1

1.1.1 需要html檔案 1

1.1.2 需要div來“圈地” 2

1.1.3 需要css來定義樣式 2

1.1.4 需要javascript 3

1.1.5 需要空間和域名 4

1.2 通過dreamweaver開發div+css程式 4

1.2.1 安裝dreamweaver 5

1.2.2 使用dreamweaver 5

1.2.3 dreamweaver的三種工作方式 6

1.2.4 通過dreamweaver在html頁面中開發div 7

1.2.5 通過dreamweaver開發css程式 9

1.2.6 在div里引入css效果 10

1.3 一個簡單的網頁需要包含什麼 11

1.3.1 head部分 11

1.3.2 body部分 11

1.3.3 編寫注釋 12

1.4 開發一個網站的總體流程 13

.1.4.1 美工先用photoshop給出效果 13

1.4.2 通過切圖,得到素材 14

1.4.3 搭建div 14

1.4.4 搭建css和js效果 15

1.4.5 測試網頁 15

1.5 網站的建設標準和布局方式 16

1.5.1 網站的建設標準 16

1.5.2 頁面布局 17

1.6 上機題 21

第2章 html和xhtml 22

2.1 html基礎 22

2.1.1 html概述 22

2.1.2 html基礎結構 23

2.2 html標籤 24

2.2.1 基本標籤 24

2.2.2 格式標籤 26

2.2.3 文本標籤 28

2.2.4 超鏈標籤 29

2.2.5 圖像標籤 30

2.2.6 表格標籤 31

2.2.7 分區標籤 33

2.3 xhtml介紹 35

2.3.1 什麼是xhtml 35

2.3.2 html轉換成xhtml的方法 36

2.4 實訓——綜合各種標籤的網頁 39

2.5 上機題 42

第3章 css基礎知識介紹 44

3.1 css的概念 44

3.2 css的基本語法 45

3.2.1css選擇器45

3.2.2 選擇器聲明 48

3.2.3 css的繼承 50

3.3 css的四種引入方式 51

3.4 css的常見問題 52

3.4.1 讓css適用所有瀏覽器 53

3.4.2 css注釋與字元編碼控制 54

3.5 css里的單位和值 55

3.5.1 顏色 55

3.5.2 長度單位 57

3.5.3 通過url引入外部資源 59

3.6 實訓——css基本語法的演練 60

3.7 上機題 62

第4章 通過css控制字型樣式 66

4.1 通過css控制文本樣式 66

4.1.1 定義文字顏色 66

4.1.2 通過css設定字型 67

4.1.3 字型粗細與斜體 69

4.1.4 定義字型大小和行高 71

4.1.5 下劃線、頂劃線、刪除線 72

4.2 用css控制字間距和對齊方式 74

4.2.1 設定字間距 74

4.2.2 控制對齊方式 75

4.3 通過css定義樣式表 76

4.3.1 通過css定義無序列表的效果 77

4.3.2 通過css定義排序列表的樣式 77

4.4 實訓——css字型樣式綜合演練 79

4.4 上機題 82

第5章 通過css定義連結樣式 86

5.1 針對連結的css基本概念 86

5.1.1 css偽類別 86

5.1.2 用偽類定義動態超連結 87

5.2 定義豐富的超鏈特效 89

5.2.1 給連結添加提示文字 89

5.2.2 按鈕式超連結 90

5.2.3 為超鏈添加背景圖效果 91

5.3 用css定義針對超鏈的滑鼠特效 93

5.3.1 用css設計滑鼠的箭頭 93

5.3.2 定義滑鼠的變幻效果 95

5.4 實訓——用css美化超連結 96

5.5 上機題 101

第6章 通過css定義圖片樣式 104

6.1 css定義圖片樣式 104

6.1.1 定義圖片框線 104

6.1.2 定義圖片大小 106

6.1.3 通過css保證圖片不變形 107

6.1.4 定義圖片的對齊方式 109

6.2 通過css設定文字和圖片互動的效果 112

6.2.1 設定文字環繞的效果 112

6.2.2 浮動廣告 114

6.3 實訓——用css設計圖文並茂的效果 115

6.4 通過css設定背景顏色 118

6.4.1 設定頁面背景色 118

6.4.2 通過背景色給頁面分塊 119

6.5 通過css處理背景圖像樣式 121

6.5.1 設定頁面背景圖樣式 121

6.5.2 設定背景圖重複的效果 121

6.5.3 定義背景圖片的位置 122

6.5.4 固定背景圖片 123

6.6 實訓——實現美食資訊網的選單部分 124

6.7 上機題 126

第7章 通過css設定表格的樣式 131

7.1 表格基礎 131

7.2 用css設定表格的樣式 132

7.2.1 設定表格的顏色 132

7.2.2 設定表格的框線樣式 133

7.2.3 設定隔行變色的單元格樣式 135

7.2.4 設定大小和對齊方式 136

7.3 實訓——用css搭建一個綜合效果的表格 138

7.4 上機題 142

第8章 通過css定義表單樣式 146

8.1 認識表單元素 146

8.1.1 輸入域標籤[input] 146

8.1.2 文本域標籤[textarea] 147

8.1.3 選擇域標籤[select]和[option] 148

8.1.4 表單各元素在網頁中的用法 148

8.2 通過css設定各元素的外觀 149

8.2.1 用css修飾表單元素的背景色 149

8.2.2 用css改變表單元素的框線樣式 152

8.2.3 用css修改表單文字的樣式 153

8.3 實訓——css定義表單樣式練習 156

8.4 上機題 161

第9章 css濾鏡的套用 164

9.1 濾鏡概述 164

9.2 通道(alpha) 165

9.3 模糊(blur) 166

9.4 運動模糊(motionblur) 167

9.5 透明色(chroma) 169

9.6翻轉變換(flip) 169

9.7 光暈(glow) 170

9.8 灰度(gray) 172

9.9 反色(invert) 173

9.10 遮罩(mask) 173

9.11 陰影(shadow) 175

9.12 x射線(x-ray) 176

9.13 浮雕紋理(emboss和engrave) 177

9.14 波浪(wave) 179

9.15 上機題 180

第10章 css定位與div布局 184

10.1 盒子模型 184

10.1.1 盒子模型的概念 184

10.1.2 content 185

10.1.3 border 185

10.1.4 padding 188

10.1.5 margin 190

10.2 元素的定位 193

10.2.1 定位方式 193

10.2.2 css的定位原理 194

10.2.3 利用float定位 199

10.2.4 利用css堆元素定位 201

10.3 塊元素和行內元素 203

10.3.1 塊元素 203

10.3.2 行內元素 204

10.4 實訓——用css定位頁面的布局 205

10.5 上機題 210

第11章 用javascript搭建動態效果 214

11.1 javascript概述 214

11.1.1 javascript概述 214

11.1.2 javascript嵌入html文檔 215

11.2 用javascript設定圖片的效果 216

11.2.1 實現相冊效果 216

11.2.2 實現圖片滑動切換效果 220

11.3 針對選單的效果 223

11.3.1 用javascript實現頁簽效果 223

11.3.2 用javascript實現下拉式選單 225

11.3.3 用javascript實現滑輪式選單效果 228

11.4 針對文字的效果 229

11.4.1 文字的打字效果 229

11.4.2 帶提示文字的javascript特效 231

11.5 上機題 234

第12章 div+css布局綜述 236

12.1 布局方式 236

12.1.1 用div將頁面分塊 236

12.1.2 設計各塊的位置 237

12.1.3 用css將分布的div定位 237

12.2 css排版樣式 239

12.2.1 設計上中下版式的樣式 239

12.2.2 設計固定寬度且居中的樣式 241

12.2.3 設計左中右版式的樣式 244

12.2.4 設計塊的背景色及背景圖片 247

12.2.5 內容分類顯示版式 248

12.3 實訓——構建一個上下結構的頁面 251

12.4 實訓——構建一個左中右結構的頁面 255

12.5 上機題 258

第13章 css、xml和ajax綜合使用方式 266

13.1XML基礎266

13.1.1 xml的特點 266

13.1.2 xml的結構和基本語法 267

13.2 xml與css的綜合套用 269

13.2.1 在xml里連結css檔案 270

13.2.2 通過xml和css,搭建具有圖文並茂效果的案例 271

13.3 ajax與css的綜合套用 273

13.3.1 ajax概述 273

13.3.2 ajax與css的綜合套用 274

13.4 實訓——xml與css結合的練習 279

13.5 實訓——ajax與css結合的練習 283

13.6 上機題 285

第14章 解決css開發中的常見問題 288

14.1 解決瀏覽器不兼容的問題 288

14.1.1 解決字型大小不兼容的問題 288

14.1.2 解決div里的float懸浮問題 290

14.1.3 容器高度的限定問題 292

14.2 解決html和css的中文編碼問題 295

14.2.1 css與html頁面的默認編碼問題 295

14.2.2 css中文注釋“標”的問題 297

第15章 娛樂入口網站 299

15.1 網站頁面效果分析299

15.1.1 首頁效果分析 299

15.1.2 “店鋪”頁面的效果分析 301

15.1.3 網站檔案綜述 302

15.2 規劃首頁的布局 302

15.2.1 搭建首頁頁頭部分的div 302

15.2.2 搭建“第一列”部分的div 304

15.2.3 搭建“標籤導航”部分的div305

15.2.4 搭建“新進店鋪”部分的div 306

15.2.5 搭建“最新資訊”部分的div 307

15.2.6 搭建“第三列”部分的div 309

15.2.7 搭建頁腳部分的div 310

15.2.8 首頁css效果分析 310

15.3 店鋪頁面 311

15.3.1 商鋪資料部分的div 311

15.3.2 商鋪推薦部分的div 313

第16章 旅遊酒店網站 316

16.1 網站頁面效果分析316

16.1.1 首頁效果分析 316

16.1.2 “酒店推薦”頁面的效果分析 317

16.1.3 網站檔案綜述 318

16.2 規劃首頁的布局 318

16.2.1 搭建首頁頁頭部分的div 319

16.2.2 搭建“推薦景點”部分的div 319

16.2.3 搭建“最新新聞”部分的div 320

16.2.4 搭建“遊玩指南”部分的div 321

16.2.5 搭建“線上訂票”部分的div 322

16.2.6 搭建“熱門旅遊專題”部分的div 324

16.2.7 搭建頁腳部分的div 324

16.2.8 首頁css效果分析 326

16.3 酒店推薦頁面 326

16.3.1 酒店推薦列表部分的div 326

16.3.2 推薦酒店列表部分的div 328

第17章 設計公司網站 331

17.1 網站頁面效果分析331

17.1.1 首頁效果分析 331

17.1.2 “設計理念”頁面的效果分析 333

17.1.3 網站檔案綜述 333

17.2 規劃首頁的布局 334

17.2.1 搭建首頁頁頭部分的div 334

17.2.2 搭建“網站廣告”部分的div 335

17.2.3 搭建“公司介紹”部分的div336

17.2.4 搭建“設計服務”部分的div 336

17.2.5 搭建“預約登記”部分的div 338

17.2.6 搭建頁腳部分的div 340

17.2.7 首頁css效果分析 340

17.3 設計理念頁面 341

17.3.1 設計理念介紹的div 341

17.3.2 業務分類部分的div 343

第18章 新聞網站 345

18.1 網站頁面效果分析345

18.1.1 首頁效果分析 345

18.1.2 “新聞內容”頁面的效果分析 346

18.1.3 網站檔案綜述 347

18.2 規劃首頁的布局 348

18.2.1 搭建首頁頁頭部分的div 348

18.2.2 搭建“深度新聞”部分的div 349

18.2.3 搭建“會議活動”部分的div 350

18.2.4 搭建“大圖新聞”部分的div 351

18.2.5 搭建“新聞報導”部分的div 351

18.2.6 搭建“名人部落格”部分的div 352

18.2.7 搭建頁腳部分的div 353

18.2.8 首頁css效果分析 354

18.3 新聞內容頁面 355

18.3.1 分類列表部分的div 355

18.3.2 新聞文章部分的div 356

相關詞條

相關搜尋

熱門詞條

聯絡我們