本書(shū)為校企合作教材，采取“工程過(guò)程項(xiàng)目化”的編寫(xiě)模式進(jìn)行編寫(xiě)，從實(shí)際案例入手，讓讀者在學(xué)習(xí)CSS+DIV應(yīng)用技術(shù)的同時(shí)掌握其精髓。

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

最后通過(guò)一個(gè)綜合的、商業(yè)化強(qiáng)的網(wǎng)站進(jìn)行實(shí)戰(zhàn)訓(xùn)練，提高了本書(shū)C “工學(xué)結(jié)合、項(xiàng)目實(shí)戰(zhàn)”的特色。

前 言

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

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

全書(shū)共分6個(gè)單元，單元一主要介紹靜態(tài)網(wǎng)頁(yè)的開(kāi)發(fā)環(huán)境、網(wǎng)頁(yè)制作和設(shè)計(jì)中的基本概念、網(wǎng)頁(yè)類型、網(wǎng)頁(yè)基本構(gòu)成元素，重點(diǎn)介紹了行級(jí)標(biāo)簽和塊級(jí)標(biāo)簽的使用。單元二主要介紹表單的基本語(yǔ)法，各種表單元素的使用。單元三主要介紹表格的基本用法，其中包括跨行跨列的表格、使用表格實(shí)現(xiàn)圖文布局，同時(shí)還介紹了框架的使用。單元四主要介紹了用CSS設(shè)置文字、背景等樣式屬性，同時(shí)重點(diǎn)介紹了盒子模型，以及浮動(dòng)和清除屬性等。單元五介紹CSS+DIV實(shí)現(xiàn)典型頁(yè)面局部布局，并詳細(xì)介紹了典型布局的例子。單元六介紹了一個(gè)用CSS+DIV頁(yè)面布局技術(shù)布局網(wǎng)頁(yè)的綜合實(shí)戰(zhàn)，介紹了商城網(wǎng)站的布局方法，通過(guò)綜合實(shí)戰(zhàn)訓(xùn)練學(xué)生技能，進(jìn)一步提高學(xué)生應(yīng)用實(shí)踐能力，體現(xiàn)了“做中學(xué)、學(xué)中產(chǎn)”的實(shí)訓(xùn)教學(xué)思想。

本書(shū)采取“工程過(guò)程項(xiàng)目化”的編寫(xiě)模式進(jìn)行編寫(xiě)，將團(tuán)隊(duì)多年教學(xué)經(jīng)驗(yàn)完全融入到教材中，采用“引入項(xiàng)目場(chǎng)景提出工作問(wèn)題，通過(guò)實(shí)例項(xiàng)目訓(xùn)練，解決工作問(wèn)題并掌握相應(yīng)的技術(shù)和方法，然后回到工作場(chǎng)景完成場(chǎng)景項(xiàng)目”的內(nèi)容組織形式，實(shí)現(xiàn)了示例和項(xiàng)目相結(jié)合，尤其最后一單元通過(guò)一個(gè)綜合的、商業(yè)化強(qiáng)的網(wǎng)站進(jìn)行實(shí)戰(zhàn)訓(xùn)練，提高了本書(shū)“工學(xué)結(jié)合、項(xiàng)目實(shí)戰(zhàn)”特色，本書(shū)的編寫(xiě)得到了企業(yè)工程師深度參與和技術(shù)支持，內(nèi)容更加標(biāo)準(zhǔn)、規(guī)范。

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

本書(shū)由朱翠苗、鄭廣成、沈蘊(yùn)梅、金靜梅、庾佳、孫偉、孔小兵（企業(yè)）、袁順利（企業(yè)）等編寫(xiě)，朱翠苗負(fù)責(zé)統(tǒng)稿并擔(dān)任主編，根據(jù)典型項(xiàng)目設(shè)計(jì)內(nèi)容載體，項(xiàng)目開(kāi)發(fā)流程組織教材內(nèi)容，教材具有實(shí)戰(zhàn)性、可操作性、新穎性、通俗性和項(xiàng)目過(guò)程化的特點(diǎn)，更加激發(fā)學(xué)生學(xué)習(xí)興趣和主動(dòng)性。

由于時(shí)間倉(cāng)促，再加上編者水平有限，書(shū)中難免有錯(cuò)誤和疏漏之處，敬請(qǐng)廣大讀者批評(píng)指正。

編 者

2014年3月

前言

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

1. CSS+DIV頁(yè)面布局技術(shù) [主編 朱翠苗]