XHTML+CSS網頁布局與美化案例教程

《XHTML+CSS網頁布局與美化案例教程》是2010年由高等教育出版社出版的圖書

基本介紹

• 中文名：XHTML+CSS網頁布局與美化案例教程
• 作者：陳承歡
• 出版時間：2010年8月1日
• 出版社：高等教育出版社
• 頁數：394 頁
• ISBN：9787040302363
• 定價：38.5 元
• 開本：16 開
• 裝幀：平裝

內容簡介

《XHTML+CSS網頁布局與美化案例教程》圍繞18個真實的網頁設計任務展開。教學任務以完成網頁設計任務為主線，其主要目的是讓讀者了解並使用Web標準，熟悉XHTML和CSS，學會套用CSS美化網頁與網頁元素，掌握使用XHTML+CSS布局網頁的方法。教學實施以“體驗網頁的布局與美化－網頁元素的套用與美化－網頁的布局與美化”為主線劃分為9個單元（體驗網頁的布局與美化、文本與列表的美化、圖像與背景的套用與美化、超級連結與導航欄的美化、表格的套用與美化、表單的套用與美化、兩列式網頁的布局與美化、三列式網頁的布局與美化、多列式網頁的布局與美化）。

《XHTML+CSS網頁布局與美化案例教程》以訓練網頁的布局與美化技能為中心，在完成多個難易程度不同的網頁設計任務過程中，逐步體會網頁布局與美化的各種技巧，掌握XHTML和CSS的理論知識，熟悉CSS在美化與布局網頁方面的優勢，學會遵循Web標準設計網頁，逐步形成套用CSS美化和布局網頁的專業能力。

《XHTML+CSS網頁布局與美化案例教程》可以作為各相關專業的網頁布局與美化教材，也可以作為培訓教材和開發網站的參考書。

目錄

單元1 體驗網頁的布局與美化

教學要點

1.1 前導訓練

【任務1-1-1】創建本地站點

【任務1-1-2】建立網頁0101.html

【任務1-1-3】準備網頁0102.html且瀏覽其效果

【任務1-1-4】準備網頁0103.html且瀏覽其效果

【任務1-1-5】準備網頁0104.html且瀏覽其效果

1.2 操作實戰

【任務1-2-1】體驗網頁中結構與表現的分離

【任務1-2-2】體驗符合web標準的網頁設計規則

【任務1-2-3】體驗DreamweaVerCS3對CSS的支持

【任務1-2-4】體驗CSS的盒模型

【任務1-2-5】體驗CSS的選擇符及屬性設定

【任務1-2-6】體驗CSS屬性值的縮寫

【任務1-2-7】體驗DreamweaverCS3中CSS的屬性設定

【任務1-2-8】體驗使用xHTML+CSS布局網頁

1.3 拓展實踐

【任務1-3】分析網頁index0102.html

1.4 技術點睛

1.4.1 盒模型尺寸的計算實例分析

1.4.2 盒模型的兼容性問題

1.5 知識拓展

單元2 文本與列表的美化

教學要點

2.1 前導訓練

準備工作

【任務2-1-1】創建網頁0201.html

【任務2-1-2】創建網頁0202.html

【任務2-1-3】創建網頁0203.html

【任務2-1-4】創建網頁0204.html

2.2 操作實戰

【任務2-2】創建網頁index0201.html

2.3 拓展實踐

【任務2-3】創建網頁index0202.html

2.4 技術點睛

2.4.1 設定段落首字下沉效果

2.4.2 控制列表項行內顯示

2.4.3 控制列表符號的個性化顯示

2.4.4 套用CSS樣式實現列表的截字效果

2.4.5 利用定義列表實現圖像切換和選項卡切換

2.5 知識拓展

單元3 圖像與背景的套用與美化

教學要點

3.1 前導訓練

準備工作

【任務3-1-1】創建網頁0301.html

【任務3-1-2】創建網頁0302.html

【任務3-1-3】創建網頁0303

【任務3-1-4】創建網頁0304.html

3.2 操作實戰創建網頁index0301.html

3.3 拓展實踐創建網頁index0302.html

3.4 技術點睛

3.4.1 圖文混排布局

3.4.2 製作全圖排版網頁

3.4.3 實現“圖片替代文本效果

3.4.4 利用CSS Sprites原理合成圖片

3.4.5 利用背景圖像實現圓布局

3.4.6 利用CSS樣式控制圓角布局

3.4.7 利用CSS樣式設定圖像的陰影效果

3.5 知識拓展

單元4 超級連結與導航欄的美化

教學要點

4.1 前導訓練

準備工作

【任務4-1-1】創建網頁0401.html

【任務4-1-2】創建網頁0402.html

【任務4-1-3】創建網頁0403.html

【任務4-1-4】創建網頁0404.html

4.2 操作實戰創建網頁index0401.html

4.3 拓展實踐創建網頁index0402.html

4.4 技術點睛

4.4.1 利用CSS樣式定義各種不同形式的超級連結

4.4.2 利用定義列表製作垂直導航欄

4.4.3 利用CSS樣式實現水平導航欄及分隔小豎條

4.4.4 利用背景圖像製作立體導航選單

4.4.5 實現導航欄選單自動伸縮和超級連結的懸停交換效果

4.5 知識拓展

單元5 表格的套用與美化

教學要點

5.1 前導訓練

準備工作

【任務5-1-1】創建網頁0501.hmal

【任務5-1-2】創建網頁0502.html

【任務5-1-3】創建網頁0503.html

5.2 操作實戰創建網頁index0501.html

5.3 拓展實踐創建網頁index0502.html

5.4 技術點睛套用JavaScript代碼在網頁中插人Hash動畫

5.5 知識拓展

單元6 表單的套用與美化

教學要點

6.1 前導訓練

準備工作

【任務6-1-1】創建網頁0601.html

【任務6-1-2】創建網頁0602.html

【任務6-1-3】創建網頁0603.html

【任務6-1-4】創建網頁0604.html

6.2 操作實戰創建網頁index0601.html

6.3 拓展實踐

【任務6-3-1】創建網頁index0602.html

【任務6-3-2】創建網頁index0603.html

6.4 技術點睛表單按鈕與單行文本域的美化

6.5 知識拓展

單元7 兩列式網頁的布局與美化

教學要點

7.1 前導訓練

準備工作

【任務7-1-1】創建網頁0701.html

【任務7-1-2】創建網頁0702.html

【任務7-1-3】創建網頁0703.html

7.2 操作實戰創建網頁index0701.html

7.3 拓展實踐創建網頁index0702.html

7.4 技術點睛

7.4.1 網頁的單列式布局與元素的自適應

7.4.2 網頁元素的嵌套布局

7.4.3 網頁的兩列式布局

7.5 知識拓展

7.5.1 如何使用CSS的定位屬性控制元素的位置

7.5.2 CSS布局網頁的基本布局模型及各自的特點

7.5.3 浮動清除屬性clear的取值及其含義

單元8 三列式網頁的布局與美化

教學要點

8.1 前導訓練

準備工作

【任務8-1-1】創建網頁0801.html

【任務8-1-2】創建網頁0802.html

【任務8-1-3】創建網頁0803.html

8.2 操作實戰創建網頁index0801.html

8.3 拓展實踐創建網頁index0802.html

8.4 技術點睛三列式網頁布局

8.5 知識拓展

單元9 多列式網頁的布局與美化

教學要點

9.1 前導訓練

準備工作

【任務9-1-1】創建網頁0901.html

【任務9-1-2】創建網頁0902.html

【任務9-1-3】創建網頁0903.html

9.2 操作實戰創建網頁index0901.html

9.3 拓展實踐創建網頁indeXt09012.html

9.4 技術點睛多行多列式網頁布局

9.5 知識拓展

參考文獻