XHTML+CSS網(wǎng)頁(yè)布局與美化案例教程

前言

　　Web標(biāo)準(zhǔn)是由W3C（World Wide Web Consortium）組織和其他標(biāo)準(zhǔn)組織制定的一套規(guī)范集合。如今，Web標(biāo)準(zhǔn)逐漸被業(yè)內(nèi)人士接受和推行，很多網(wǎng)站都在采用Web標(biāo)準(zhǔn)進(jìn)行開發(fā)與重構(gòu)。Web標(biāo)準(zhǔn)能夠?qū)崿F(xiàn)網(wǎng)站內(nèi)容、結(jié)構(gòu)與表現(xiàn)的分離，使XHTML文檔具有良好的語(yǔ)義化結(jié)構(gòu)。遵循Web標(biāo)準(zhǔn)開發(fā)網(wǎng)站可以使網(wǎng)頁(yè)的代碼更為簡(jiǎn)潔，網(wǎng)站維護(hù)和改版更加方便，更容易被搜索引擎搜索到，降低了網(wǎng)站的開發(fā)與維護(hù)成本，提高了網(wǎng)站的易用性；文件下載與頁(yè)面顯示速度更快，網(wǎng)頁(yè)內(nèi)容能被更多的用戶和更多的設(shè)備所訪問；用戶還能夠通過樣式定制自己喜愛的表現(xiàn)頁(yè)面?！　￠_發(fā)網(wǎng)站時(shí)遵循和使用Web標(biāo)準(zhǔn)的關(guān)鍵是使用XHTML+CSS方式布局與美化網(wǎng)頁(yè)，即使用結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言XHTML設(shè)計(jì)網(wǎng)頁(yè)的結(jié)構(gòu)，使用XHTML+CSS布局方式替代傳統(tǒng)的表格布局方式，使用表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言CSS控制網(wǎng)頁(yè)的表現(xiàn)。XHTML和CSS分工合作、相互協(xié)作完成網(wǎng)頁(yè)的布局與美化，XHTML主要負(fù)責(zé)搭建頁(yè)面框架，CSS主要負(fù)責(zé)控制頁(yè)面顯示效果?！　”緯哂腥缦绿厣！　。?）遵循技能形成規(guī)律、合理設(shè)計(jì)教學(xué)內(nèi)容　　教學(xué)實(shí)施以“體驗(yàn)網(wǎng)頁(yè)的布局與美化一網(wǎng)頁(yè)元素的應(yīng)用與美化一網(wǎng)頁(yè)的布局與美化”為主線劃分為9個(gè)單元。第l階段只包含1個(gè)單元：體驗(yàn)網(wǎng)頁(yè)的布局與美化，教學(xué)重點(diǎn)是掌握XHTML和CSS的基本知識(shí)，體驗(yàn)使用XHTML+CSS方式布局與美化網(wǎng)頁(yè)的優(yōu)勢(shì)。第2階段包含5個(gè)單元：文本與列表的美化、圖像與背景的應(yīng)用與美化、超級(jí)鏈接與導(dǎo)航欄的美化、表格的應(yīng)用與美化以及表單的應(yīng)用與美化，教學(xué)重點(diǎn)是熟悉網(wǎng)頁(yè)元素的應(yīng)用，掌握使用CSS美化網(wǎng)頁(yè)元素的方法和技巧。第3階段包含3個(gè)單元：兩列式網(wǎng)頁(yè)的布局與美化、三列式網(wǎng)頁(yè)的布局與美化以及多列式網(wǎng)頁(yè)的布局與美化，教學(xué)重點(diǎn)是綜合應(yīng)用XHTML+CSS布局與美化網(wǎng)頁(yè)，全面掌握網(wǎng)頁(yè)布局的各種方法和技巧?！　。?）遵循學(xué)生認(rèn)知規(guī)律、科學(xué)設(shè)置教學(xué)環(huán)節(jié)　　面向教學(xué)全過程設(shè)置必要的教學(xué)單元，其設(shè)置遵循由局部到整體、由簡(jiǎn)單到復(fù)雜、由具體到抽象的認(rèn)知規(guī)律，每個(gè)單元都設(shè)置了5個(gè)教學(xué)環(huán)節(jié)，即前導(dǎo)訓(xùn)練、操作實(shí)戰(zhàn)、拓展實(shí)踐、技術(shù)點(diǎn)睛、知識(shí)拓展。每個(gè)單元圍繞2個(gè)網(wǎng)頁(yè)設(shè)計(jì)任務(wù)展開，第1個(gè)網(wǎng)頁(yè)設(shè)計(jì)任務(wù)在前導(dǎo)訓(xùn)練和操作實(shí)踐2個(gè)環(huán)節(jié)完成。為了降低網(wǎng)頁(yè)設(shè)計(jì)的復(fù)雜度和難度，將一個(gè)完整網(wǎng)頁(yè)合理地分割為多個(gè)局部結(jié)構(gòu)，在前導(dǎo)訓(xùn)練環(huán)節(jié)完成那些相對(duì)簡(jiǎn)單的局部網(wǎng)頁(yè)設(shè)計(jì)，重點(diǎn)訓(xùn)練網(wǎng)頁(yè)元素的應(yīng)用與美化，網(wǎng)頁(yè)局部結(jié)構(gòu)的布局；在操作實(shí)戰(zhàn)階段將網(wǎng)頁(yè)的局部結(jié)構(gòu)整合為一個(gè)完整的網(wǎng)頁(yè)，重點(diǎn)訓(xùn)練完整網(wǎng)頁(yè)的布局。第2個(gè)網(wǎng)頁(yè)設(shè)計(jì)任務(wù)在拓展實(shí)踐環(huán)節(jié)完成。技術(shù)點(diǎn)睛環(huán)節(jié)主要?dú)w納相關(guān)技術(shù)要點(diǎn)，綜合講述網(wǎng)頁(yè)布局與美化的常用技術(shù)。知識(shí)拓展環(huán)節(jié)主要?dú)w納相關(guān)知識(shí)要點(diǎn)，使讀者系統(tǒng)掌握相關(guān)理論知識(shí)。

內(nèi)容概要

　　《XHTML+CSS網(wǎng)頁(yè)布局與美化案例教程（附光盤1張）》圍繞18個(gè)真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)任務(wù)展開。教學(xué)任務(wù)以完成網(wǎng)頁(yè)設(shè)計(jì)任務(wù)為主線，其主要目的是讓讀者了解并使用Web標(biāo)準(zhǔn)，熟悉XHTML和CSS，學(xué)會(huì)應(yīng)用CSS美化網(wǎng)頁(yè)與網(wǎng)頁(yè)元素，掌握使用XHTML+CSS布局網(wǎng)頁(yè)的方法。教學(xué)實(shí)施以“體驗(yàn)網(wǎng)頁(yè)的布局與美化－網(wǎng)頁(yè)元素的應(yīng)用與美化－網(wǎng)頁(yè)的布局與美化”為主線劃分為9個(gè)單元（體驗(yàn)網(wǎng)頁(yè)的布局與美化、文本與列表的美化、圖像與背景的應(yīng)用與美化、超級(jí)鏈接與導(dǎo)航欄的美化、表格的應(yīng)用與美化、表單的應(yīng)用與美化、兩列式網(wǎng)頁(yè)的布局與美化、三列式網(wǎng)頁(yè)的布局與美化、多列式網(wǎng)頁(yè)的布局與美化）?！　　禭HTML+CSS網(wǎng)頁(yè)布局與美化案例教程（附光盤1張）》以訓(xùn)練網(wǎng)頁(yè)的布局與美化技能為中心，在完成多個(gè)難易程度不同的網(wǎng)頁(yè)設(shè)計(jì)任務(wù)過程中，逐步體會(huì)網(wǎng)頁(yè)布局與美化的各種技巧，掌握XHTML和CSS的理論知識(shí)，熟悉CSS在美化與布局網(wǎng)頁(yè)方面的優(yōu)勢(shì)，學(xué)會(huì)遵循Web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)，逐步形成應(yīng)用CSS美化和布局網(wǎng)頁(yè)的專業(yè)能力。　　《XHTML+CSS網(wǎng)頁(yè)布局與美化案例教程（附光盤1張）》可以作為各相關(guān)專業(yè)的網(wǎng)頁(yè)布局與美化教材，也可以作為培訓(xùn)教材和開發(fā)網(wǎng)站的參考書。

書籍目錄

單元1 體驗(yàn)網(wǎng)頁(yè)的布局與美化教學(xué)要點(diǎn)1.1 前導(dǎo)訓(xùn)練【任務(wù)1-1-1】創(chuàng)建本地站點(diǎn)【任務(wù)1-1-2】建立網(wǎng)頁(yè)0101.html【任務(wù)1-1-3】準(zhǔn)備網(wǎng)頁(yè)0102.html且瀏覽其效果【任務(wù)1-1-4】準(zhǔn)備網(wǎng)頁(yè)0103.html且瀏覽其效果【任務(wù)1-1-5】準(zhǔn)備網(wǎng)頁(yè)0104.html且瀏覽其效果1.2 操作實(shí)戰(zhàn)【任務(wù)1-2-1】體驗(yàn)網(wǎng)頁(yè)中結(jié)構(gòu)與表現(xiàn)的分離【任務(wù)1-2-2】體驗(yàn)符合web標(biāo)準(zhǔn)的網(wǎng)頁(yè)設(shè)計(jì)規(guī)則【任務(wù)1-2-3】體驗(yàn)DreamweaVerCS3對(duì)CSS的支持【任務(wù)1-2-4】體驗(yàn)CSS的盒模型【任務(wù)1-2-5】體驗(yàn)CSS的選擇符及屬性設(shè)置【任務(wù)1-2-6】體驗(yàn)CSS屬性值的縮寫【任務(wù)1-2-7】體驗(yàn)DreamweaverCS3中CSS的屬性設(shè)置【任務(wù)1-2-8】體驗(yàn)使用xHTML+CSS布局網(wǎng)頁(yè)1.3 拓展實(shí)踐【任務(wù)1-3】分析網(wǎng)頁(yè)index0102.html1.4 技術(shù)點(diǎn)睛1.4.1 盒模型尺寸的計(jì)算實(shí)例分析1.4.2 盒模型的兼容性問題1.5 知識(shí)拓展單元2 文本與列表的美化教學(xué)要點(diǎn)2.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)2-1-1】創(chuàng)建網(wǎng)頁(yè)0201.html【任務(wù)2-1-2】創(chuàng)建網(wǎng)頁(yè)0202.html【任務(wù)2-1-3】創(chuàng)建網(wǎng)頁(yè)0203.html【任務(wù)2-1-4】創(chuàng)建網(wǎng)頁(yè)0204.html2.2 操作實(shí)戰(zhàn)【任務(wù)2-2】創(chuàng)建網(wǎng)頁(yè)index0201.html2.3 拓展實(shí)踐【任務(wù)2-3】創(chuàng)建網(wǎng)頁(yè)index0202.html2.4 技術(shù)點(diǎn)睛2.4.1 設(shè)置段落首字下沉效果2.4.2 控制列表項(xiàng)行內(nèi)顯示2.4.3 控制列表符號(hào)的個(gè)性化顯示2.4.4 應(yīng)用CSS樣式實(shí)現(xiàn)列表的截字效果2.4.5 利用定義列表實(shí)現(xiàn)圖像切換和選項(xiàng)卡切換2.5 知識(shí)拓展單元3 圖像與背景的應(yīng)用與美化教學(xué)要點(diǎn)3.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)3-1-1】創(chuàng)建網(wǎng)頁(yè)0301.html【任務(wù)3-1-2】創(chuàng)建網(wǎng)頁(yè)0302.html【任務(wù)3-1-3】創(chuàng)建網(wǎng)頁(yè)0303【任務(wù)3-1-4】創(chuàng)建網(wǎng)頁(yè)0304.html3.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0301.html3.3 拓展實(shí)踐創(chuàng)建網(wǎng)頁(yè)index0302.html3.4 技術(shù)點(diǎn)睛3.4.1 圖文混排布局3.4.2 制作全圖排版網(wǎng)頁(yè)3.4.3 實(shí)現(xiàn)“圖片替代文本效果3.4.4 利用CSS Sprites原理合成圖片3.4.5 利用背景圖像實(shí)現(xiàn)圓布局3.4.6 利用CSS樣式控制圓角布局3.4.7 利用CSS樣式設(shè)置圖像的陰影效果3.5 知識(shí)拓展單元4 超級(jí)鏈接與導(dǎo)航欄的美化教學(xué)要點(diǎn)4.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)4-1-1】創(chuàng)建網(wǎng)頁(yè)0401.html【任務(wù)4-1-2】創(chuàng)建網(wǎng)頁(yè)0402.html【任務(wù)4-1-3】創(chuàng)建網(wǎng)頁(yè)0403.html【任務(wù)4-1-4】創(chuàng)建網(wǎng)頁(yè)0404.html4.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0401.html4.3 拓展實(shí)踐創(chuàng)建網(wǎng)頁(yè)index0402.html4.4 技術(shù)點(diǎn)睛4.4.1 利用CSS樣式定義各種不同形式的超級(jí)鏈接4.4.2 利用定義列表制作垂直導(dǎo)航欄4.4.3 利用CSS樣式實(shí)現(xiàn)水平導(dǎo)航欄及分隔小豎條4.4.4 利用背景圖像制作立體導(dǎo)航菜單4.4.5 實(shí)現(xiàn)導(dǎo)航欄菜單自動(dòng)伸縮和超級(jí)鏈接的懸停交換效果4.5 知識(shí)拓展單元5 表格的應(yīng)用與美化教學(xué)要點(diǎn)5.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)5-1-1】創(chuàng)建網(wǎng)頁(yè)0501.hmal【任務(wù)5-1-2】創(chuàng)建網(wǎng)頁(yè)0502.html【任務(wù)5-1-3】創(chuàng)建網(wǎng)頁(yè)0503.html5.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0501.html5.3 拓展實(shí)踐創(chuàng)建網(wǎng)頁(yè)index0502.html5.4 技術(shù)點(diǎn)睛應(yīng)用JavaScript代碼在網(wǎng)頁(yè)中插人Hash動(dòng)畫5.5 知識(shí)拓展單元6 表單的應(yīng)用與美化教學(xué)要點(diǎn)6.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)6-1-1】創(chuàng)建網(wǎng)頁(yè)0601.html【任務(wù)6-1-2】創(chuàng)建網(wǎng)頁(yè)0602.html【任務(wù)6-1-3】創(chuàng)建網(wǎng)頁(yè)0603.html【任務(wù)6-1-4】創(chuàng)建網(wǎng)頁(yè)0604.html6.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0601.html6.3 拓展實(shí)踐【任務(wù)6-3-1】創(chuàng)建網(wǎng)頁(yè)index0602.html【任務(wù)6-3-2】創(chuàng)建網(wǎng)頁(yè)index0603.html6.4 技術(shù)點(diǎn)睛表單按鈕與單行文本域的美化6.5 知識(shí)拓展單元7 兩列式網(wǎng)頁(yè)的布局與美化教學(xué)要點(diǎn)7.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)7-1-1】創(chuàng)建網(wǎng)頁(yè)0701.html【任務(wù)7-1-2】創(chuàng)建網(wǎng)頁(yè)0702.html【任務(wù)7-1-3】創(chuàng)建網(wǎng)頁(yè)0703.html7.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0701.html7.3 拓展實(shí)踐創(chuàng)建網(wǎng)頁(yè)index0702.html7.4 技術(shù)點(diǎn)睛7.4.1 網(wǎng)頁(yè)的單列式布局與元素的自適應(yīng)7.4.2 網(wǎng)頁(yè)元素的嵌套布局7.4.3 網(wǎng)頁(yè)的兩列式布局7.5 知識(shí)拓展7.5.1 如何使用CSS的定位屬性控制元素的位置7.5.2 CSS布局網(wǎng)頁(yè)的基本布局模型及各自的特點(diǎn)7.5.3 浮動(dòng)清除屬性clear的取值及其含義單元8 三列式網(wǎng)頁(yè)的布局與美化教學(xué)要點(diǎn)8.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)8-1-1】創(chuàng)建網(wǎng)頁(yè)0801.html【任務(wù)8-1-2】創(chuàng)建網(wǎng)頁(yè)0802.html【任務(wù)8-1-3】創(chuàng)建網(wǎng)頁(yè)0803.html8.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0801.html8.3 拓展實(shí)踐創(chuàng)建網(wǎng)頁(yè)index0802.html8.4 技術(shù)點(diǎn)睛三列式網(wǎng)頁(yè)布局8.5 知識(shí)拓展單元9 多列式網(wǎng)頁(yè)的布局與美化教學(xué)要點(diǎn)9.1 前導(dǎo)訓(xùn)練準(zhǔn)備工作【任務(wù)9-1-1】創(chuàng)建網(wǎng)頁(yè)0901.html【任務(wù)9-1-2】創(chuàng)建網(wǎng)頁(yè)0902.html【任務(wù)9-1-3】創(chuàng)建網(wǎng)頁(yè)0903.html9.2 操作實(shí)戰(zhàn)創(chuàng)建網(wǎng)頁(yè)index0901.html9.3 拓展實(shí)踐創(chuàng)建網(wǎng)頁(yè)indeXt09012.html9.4 技術(shù)點(diǎn)睛多行多列式網(wǎng)頁(yè)布局9.5 知識(shí)拓展參考文獻(xiàn)

章節(jié)摘錄

　　（2）文字大小　　當(dāng)不顯式定義網(wǎng)頁(yè)的字體大小時(shí)，網(wǎng)頁(yè)文檔標(biāo)準(zhǔn)字體大小的默認(rèn)值為16px，并且在不同瀏覽器中顯示的效果是一致的?？紤]到網(wǎng)頁(yè)的可讀性將字體大小的默認(rèn)值設(shè)置為16px，但是16px的字體大小容易破壞頁(yè)面布局，影響頁(yè)面的美觀度。在實(shí)際設(shè)計(jì)中，習(xí)慣適當(dāng)減小字體大小，目前國(guó)內(nèi)很多網(wǎng)站都將正文字體的大小設(shè)置為12px。由于屏幕分辨率越來越大，現(xiàn)在有些網(wǎng)站將正文字體大小設(shè)置為14px?！　《x字體大小有多種方法，包括使用數(shù)值大小、關(guān)鍵字、百分比等。其中使用數(shù)值大小表示字體大小時(shí)，需要使用長(zhǎng)度單位，如px、pt、em、ex等，一般常用的是像素（px）?！　、偈褂孟袼兀╬x）為單位的字體大小定義示例代碼如下：　　p（font-size：12px；）　　目前許多網(wǎng)站都選用像素作為字體大小的單位，常用的字體大小有9px、10px、12px、14px、16px、18px、24px、36px等。對(duì)于圖文混排的網(wǎng)頁(yè)，使用像素更容易實(shí)現(xiàn)圖文協(xié)調(diào)顯示，因?yàn)閳D像也是以像素為單位的。

圖書封面

評(píng)論、評(píng)分、閱讀與下載

---

    XHTML+CSS網(wǎng)頁(yè)布局與美化案例教程 PDF格式下載

---