HTMLCSS第18章典型實(shí)例(一).ppt

第19章 典型實(shí)例（一）,實(shí)例是用在網(wǎng)頁(yè)中經(jīng)常要用到的例子來(lái)說(shuō)明之前講過(guò)的所有知識(shí)。讓知識(shí)實(shí)戰(zhàn)化，讓繁瑣的知識(shí)點(diǎn)聚集在一起，做出有趣的頁(yè)面效果。,19.1 制作文本內(nèi)容效果,文本內(nèi)容效果是指頁(yè)面中文本內(nèi)容的效果。這里將用不同的實(shí)例來(lái)編寫(xiě)網(wǎng)頁(yè)中文本內(nèi)容的效果。這里的實(shí)例分為兩大部分，一種是用和標(biāo)簽屬性來(lái)制作的文本內(nèi)容效果，一種是用div+CSS來(lái)制作的文本內(nèi)容效果。,19.2 制作列表效果,列表效果是通過(guò)列表來(lái)實(shí)現(xiàn)的。無(wú)論是使用有序列表還是無(wú)序列表都可以制作出整潔有序的新聞列表。本節(jié)將會(huì)通過(guò)有序列表和無(wú)序列表來(lái)做出整潔有序的新聞列表。還會(huì)通過(guò)使用自定義列表來(lái)做出網(wǎng)站地圖功能。,制作有序新聞列表 制作無(wú)序新聞列表 制作自定義網(wǎng)站地圖,19.3 制作留言版表單效果,制作留言版表單效果，必須通過(guò)表單+CSS才可以做出好看的表單效果。這里將會(huì)使用兩者結(jié)合來(lái)制作一個(gè)表單，不過(guò)純粹是一個(gè)留言版的表單效果，沒(méi)有任何的數(shù)據(jù)提交。,19.4 制作圖片展示效果,圖片展示效果是在網(wǎng)站中經(jīng)常被用來(lái)展示產(chǎn)品的。這里將通過(guò)兩種方法來(lái)展示圖片頁(yè)面的效果。一種是用table制作圖片展示效果，一種是用div+CSS制作圖片展示效果。,19.5 制作圖片滾動(dòng)效果,圖片滾動(dòng)效果，是在網(wǎng)站應(yīng)用中很常見(jiàn)的一種圖片顯示效果，可以讓更多的圖片展示在有限的空間里面。這里將展示圖片滾動(dòng)的兩種方法，分別為：左右滾動(dòng)和上下滾動(dòng)。,19.6 制作文字滾動(dòng)效果,文字滾動(dòng)效果和圖片滾動(dòng)效果應(yīng)用在結(jié)構(gòu)上是基本一樣的。這里將通過(guò)兩種方法，分別介紹制作左右滾動(dòng)的文字效果和上下滾動(dòng)的文字效果。,18.7 使用div、id和其他幫手,div、id是制作網(wǎng)站的好幫手。正確地使用div、id，能編寫(xiě)出極其緊湊的XHTML。div可以是結(jié)構(gòu)化標(biāo)記的好幫手，而id則是一種令人驚訝的工具，再加上巧妙地利用CSS，便可以向網(wǎng)站添加復(fù)雜而又精巧的行為。 div是英文division的簡(jiǎn)寫(xiě)，有分割、區(qū)域、分組的意思。在制作網(wǎng)站時(shí)，使用div來(lái)對(duì)網(wǎng)站內(nèi)容進(jìn)行劃分區(qū)域，是一個(gè)很好的做法。比如，當(dāng)網(wǎng)頁(yè)分割成幾部分時(shí)，就變成了幾個(gè)區(qū)域了，對(duì)這幾個(gè)分割出來(lái)的區(qū)域用div進(jìn)行控制，便可以達(dá)到很好的控制和布局。通常在使用中，設(shè)計(jì)師會(huì)用div來(lái)對(duì)頁(yè)面中的內(nèi)容進(jìn)行樣式的設(shè)置和布局。這是一個(gè)非常好用的標(biāo)簽。 有了div，當(dāng)然就少不了id和class。這二者是用來(lái)和CSS樣式綁定的。在前面，也對(duì)二者進(jìn)行過(guò)解說(shuō)，在id和class之間的使用，取決于id具有唯一性，使用id的樣式，在頁(yè)面里只可以出現(xiàn)一次，而class的樣式，在頁(yè)面里可以被反復(fù)使用。這二者在CSS中，有著標(biāo)識(shí)的作用。但在使用中，必須考慮好要用哪種進(jìn)行標(biāo)識(shí)，不然就會(huì)變成之前所說(shuō)的誤用和濫用了。,18.8 語(yǔ)義標(biāo)記和可用性,在前面的內(nèi)容中，已經(jīng)不斷地提到標(biāo)記文檔的語(yǔ)義。在實(shí)例中也可以看到語(yǔ)義標(biāo)簽+CSS的強(qiáng)大，比起使用標(biāo)簽，這些語(yǔ)義標(biāo)簽使用起來(lái)更為整潔和方便。在示例18.3中，列表標(biāo)簽通過(guò)結(jié)構(gòu)化，帶來(lái)了比使用標(biāo)簽實(shí)現(xiàn)相同效果更整潔更實(shí)用的代碼，這就是語(yǔ)義標(biāo)記的好處。而這樣整潔的代碼，可以在別的頁(yè)面被重復(fù)使用，只需要修改或添加其中的樣式即可，這樣就大大提高了代碼的重復(fù)使用性。 在后面第19章的實(shí)例中，將會(huì)有很多使用標(biāo)簽制作的例子和語(yǔ)義標(biāo)簽+CSS的例子，通過(guò)比較，就可以明白語(yǔ)義標(biāo)記的好處和可用性了。,18.9 小結(jié),本章學(xué)習(xí)了XHTML模塊，通過(guò)學(xué)習(xí)，可以了解到XHTML模塊化的原因和大致上分成的模塊。這對(duì)代碼的管理、規(guī)范使用都是有很大的幫助的。 本章除了學(xué)習(xí)XHTML模塊，還學(xué)習(xí)了XHTML結(jié)構(gòu)化，通過(guò)對(duì)結(jié)構(gòu)化的學(xué)習(xí)，可以了解到在網(wǎng)頁(yè)制作中，應(yīng)該重視標(biāo)簽的語(yǔ)義。又通過(guò)結(jié)構(gòu)化標(biāo)簽來(lái)實(shí)現(xiàn)標(biāo)簽的樣式，利用XHTML重構(gòu)網(wǎng)站，使網(wǎng)站更加整潔，并且可用性高。 在本章可以看到，幾乎沒(méi)有了表格的蹤影，因?yàn)槭褂肵HTML重構(gòu)網(wǎng)站，就是為了擺脫以前什么都依賴于表格的做法。在重構(gòu)網(wǎng)站中，設(shè)計(jì)師們不再依賴表格來(lái)制作網(wǎng)站，這是一個(gè)好的現(xiàn)象。