本書為校企合作教材，采取“工程過程項目化”的編寫模式進行編寫，從實際案例入手，讓讀者在學習CSS+DIV應用技術的同時掌握其精髓。

各案例與實例按照由淺入深、由易到難的順序編排，即使是初學者也可以輕松掌握CSS+DIV技術的布局方式，制作出精美實用的網頁作品。

最后通過一個綜合的、商業化強的網站進行實戰訓練，提高了本書C “工學結合、項目實戰”的特色。

前 言

CSS+DIV頁面布局技術目前已成為頁面設計核心技術，采用CSS+DIV布局技術具有縮減頁面代碼、提高頁面的瀏覽速度和穩定性、頁面設計結構清晰、易被搜索引擎搜索等優勢。但很多讀者反映CSS類的圖書偏重基礎理論介紹，案例簡單，學習之后很難在實際工作中應用。近年來，CSS+DIV頁面布局技術類課程在高職院校和本科院校普遍開設，但是此類教材卻寥寥無幾，尤其是高職高專教材幾乎空白，很難滿足教學需要，鑒于這種情況，教材編寫小組決定編寫該教材，力圖幫助讀者在CSS學習中快速進入實戰狀態，給專業教師一手參考資料，幫助讀者提高頁面設計技能。

本書得到蘇州吉耐特信息科技有限公司、太倉智博軟件科技有限公司大力支持，是一本校企合作教材，從實際案例入手，重點講解典型的布局技術和方法，讓讀者在學習CSS+DIV應用技術的同時掌握其精髓。各案例與實例按照由淺入深、由易到難的順序編排，即使是初學者也可以輕松掌握CSS+DIV技術的布局方式，制作出精美實用的網頁作品。

全書共分6個單元，單元一主要介紹靜態網頁的開發環境、網頁制作和設計中的基本概念、網頁類型、網頁基本構成元素，重點介紹了行級標簽和塊級標簽的使用。單元二主要介紹表單的基本語法，各種表單元素的使用。單元三主要介紹表格的基本用法，其中包括跨行跨列的表格、使用表格實現圖文布局，同時還介紹了框架的使用。單元四主要介紹了用CSS設置文字、背景等樣式屬性，同時重點介紹了盒子模型，以及浮動和清除屬性等。單元五介紹CSS+DIV實現典型頁面局部布局，并詳細介紹了典型布局的例子。單元六介紹了一個用CSS+DIV頁面布局技術布局網頁的綜合實戰，介紹了商城網站的布局方法，通過綜合實戰訓練學生技能，進一步提高學生應用實踐能力，體現了“做中學、學中產”的實訓教學思想。

本書采取“工程過程項目化”的編寫模式進行編寫，將團隊多年教學經驗完全融入到教材中，采用“引入項目場景提出工作問題，通過實例項目訓練，解決工作問題并掌握相應的技術和方法，然后回到工作場景完成場景項目”的內容組織形式，實現了示例和項目相結合，尤其最后一單元通過一個綜合的、商業化強的網站進行實戰訓練，提高了本書“工學結合、項目實戰”特色，本書的編寫得到了企業工程師深度參與和技術支持，內容更加標準、規范。

本書主要定位高職高專CSS+DIV布局技術類課程教學使用，也可以作為應用型本科和職業中專的參考教材，還可以作為工程技術人員的參考用書。

本書由朱翠苗、鄭廣成、沈蘊梅、金靜梅、庾佳、孫偉、孔小兵（企業）、袁順利（企業）等編寫，朱翠苗負責統稿并擔任主編，根據典型項目設計內容載體，項目開發流程組織教材內容，教材具有實戰性、可操作性、新穎性、通俗性和項目過程化的特點，更加激發學生學習興趣和主動性。

由于時間倉促，再加上編者水平有限，書中難免有錯誤和疏漏之處，敬請廣大讀者批評指正。

編 者

2014年3月

前言

單元一 HTML的基本標簽 1
1.1 工作場景導入 1
1.2 技術與知識準備 2
1.2.1 HTML文件的基本結構 2
1.2.2 編輯工具 4
1.2.3 網頁的摘要信息 7
1.2.4 塊級標簽 10
1.2.5 行級標簽 19
1.2.6 注釋和特殊符號 25
1.2.7 W3C標準 26
1.3 工作場景訓練 29
1.3.1 實現工作場景1的任務 29
1.3.2 實現工作場景2的任務 30
1.3.3 實現工作場景3的任務 31
1.4 重點問題分析 32
1.5 小結 33
單元二 表單應用 34
2.1 工作場景導入 34
2.2 技術與知識準備 35
2.2.1 表單的基本語法 35
2.2.2 表單元素的介紹 36
2.3 工作場景訓練 41
2.4 重點問題分析 42
2.5 小結 42
單元三 表格應用和布局 43
3.1 工作場景導入 43
3.2 技術與知識準備 44
3.2.1 表格基礎 44
3.2.2 跨行和跨列的表格 46
3.2.3 表格的高級用法 50
3.2.4 表格的其他用法 56
3.2.5 框架技術 58
3.3 工作場景訓練 63
3.3.1 實現工作場景1的任務 63
3.3.2 實現工作場景2的任務 64
3.3.3 實現工作場景3的任務 66
3.4 重點問題分析 68
3.5 小結 69
單元四 CSS樣式表 70
4.1 工作場景導入 70
4.2 技術與知識準備 71
4.2.1 CSS基礎 71
4.2.2 常用的樣式修飾 77
4.2.3 盒子模型 90
4.3 工作場景訓練 111
4.3.1 實現工作場景1的任務 111
4.3.2 實現工作場景2的任務 112
4.3.3 實現工作場景3的任務 113
4.4 重點問題分析 116
4.5 小結 116
單元五 CSS+DIV實現典型頁面局部布局 117
5.1 工作場景導入 117
5.2 技術與知識準備 118
5.2.1 div-ul-li實現橫向導航菜單 118
5.2.2 div-dl-dt-dd實現圖文混排 122
5.3 工作場景訓練 128
5.3.1 實現工作場景1的任務 128
5.3.2 實現工作場景2的任務 130
5.4 重點問題分析 132
5.5 小結 133
單元六 CSS+DIV頁面布局實例 134
6.1 分塊制作商城網站首頁 134
6.1.1 利用Dreamweaver搭建站點 134
6.1.2 制作商城網站首頁的總體布局 137
6.1.3 實現頂部布局 140
6.1.4 實現左部商品分類 143
6.1.5 實現中部主題布局 145
6.1.6 實現右部布局 147
6.1.7 實現底部信息 149
6.2 制作商城分支頁—注冊頁面 150
6.3 制作商城分支頁—登錄頁面 154
6.4 制作商城分支頁—商品具體介紹頁面 156
6.5 建立頁面之間的鏈接和進行兼容測試 158
6.5.1 建立頁面間的鏈接 158
6.5.2 網頁的兼容性測試 158
參考文獻 160

1. CSS+DIV頁面布局技術 [主編 朱翠苗]