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

1、第19章 典型實(shí)例（一）,實(shí)例是用在網(wǎng)頁中經(jīng)常要用到的例子來說明之前講過的所有知識(shí)。讓知識(shí)實(shí)戰(zhàn)化，讓繁瑣的知識(shí)點(diǎn)聚集在一起，做出有趣的頁面效果。,19.1 制作文本內(nèi)容效果,文本內(nèi)容效果是指頁面中文本內(nèi)容的效果。這里將用不同的實(shí)例來編寫網(wǎng)頁中文本內(nèi)容的效果。這里的實(shí)例分為兩大部分，一種是用和標(biāo)簽屬性來制作的文本內(nèi)容效果，一種是用div+CSS來制作的文本內(nèi)容效果。,19.2 制作列表效果,列表效果是通過列表來實(shí)現(xiàn)的。無論是使用有序列表還是無序列表都可以制作出整潔有序的新聞列表。本節(jié)將會(huì)通過有序列表和無序列表來做出整潔有序的新聞列表。還會(huì)通過使用自定義列表來做出網(wǎng)站地圖功能。,制作有序新聞列表

2、制作無序新聞列表 制作自定義網(wǎng)站地圖,19.3 制作留言版表單效果,制作留言版表單效果，必須通過表單+CSS才可以做出好看的表單效果。這里將會(huì)使用兩者結(jié)合來制作一個(gè)表單，不過純粹是一個(gè)留言版的表單效果，沒有任何的數(shù)據(jù)提交。,19.4 制作圖片展示效果,圖片展示效果是在網(wǎng)站中經(jīng)常被用來展示產(chǎn)品的。這里將通過兩種方法來展示圖片頁面的效果。一種是用table制作圖片展示效果，一種是用div+CSS制作圖片展示效果。,19.5 制作圖片滾動(dòng)效果,圖片滾動(dòng)效果，是在網(wǎng)站應(yīng)用中很常見的一種圖片顯示效果，可以讓更多的圖片展示在有限的空間里面。這里將展示圖片滾動(dòng)的兩種方法，分別為：左右滾動(dòng)和上下滾動(dòng)。,19.

3、6 制作文字滾動(dòng)效果,文字滾動(dòng)效果和圖片滾動(dòng)效果應(yīng)用在結(jié)構(gòu)上是基本一樣的。這里將通過兩種方法，分別介紹制作左右滾動(dòng)的文字效果和上下滾動(dòng)的文字效果。,18.7 使用div、id和其他幫手,div、id是制作網(wǎng)站的好幫手。正確地使用div、id，能編寫出極其緊湊的XHTML。div可以是結(jié)構(gòu)化標(biāo)記的好幫手，而id則是一種令人驚訝的工具，再加上巧妙地利用CSS，便可以向網(wǎng)站添加復(fù)雜而又精巧的行為。 div是英文division的簡寫，有分割、區(qū)域、分組的意思。在制作網(wǎng)站時(shí)，使用div來對網(wǎng)站內(nèi)容進(jìn)行劃分區(qū)域，是一個(gè)很好的做法。比如，當(dāng)網(wǎng)頁分割成幾部分時(shí)，就變成了幾個(gè)區(qū)域了，對這幾個(gè)分割出來的區(qū)域用d

4、iv進(jìn)行控制，便可以達(dá)到很好的控制和布局。通常在使用中，設(shè)計(jì)師會(huì)用div來對頁面中的內(nèi)容進(jìn)行樣式的設(shè)置和布局。這是一個(gè)非常好用的標(biāo)簽。 有了div，當(dāng)然就少不了id和class。這二者是用來和CSS樣式綁定的。在前面，也對二者進(jìn)行過解說，在id和class之間的使用，取決于id具有唯一性，使用id的樣式，在頁面里只可以出現(xiàn)一次，而class的樣式，在頁面里可以被反復(fù)使用。這二者在CSS中，有著標(biāo)識(shí)的作用。但在使用中，必須考慮好要用哪種進(jìn)行標(biāo)識(shí)，不然就會(huì)變成之前所說的誤用和濫用了。,18.8 語義標(biāo)記和可用性,在前面的內(nèi)容中，已經(jīng)不斷地提到標(biāo)記文檔的語義。在實(shí)例中也可以看到語義標(biāo)簽+CSS的強(qiáng)大

5、，比起使用標(biāo)簽，這些語義標(biāo)簽使用起來更為整潔和方便。在示例18.3中，列表標(biāo)簽通過結(jié)構(gòu)化，帶來了比使用標(biāo)簽實(shí)現(xiàn)相同效果更整潔更實(shí)用的代碼，這就是語義標(biāo)記的好處。而這樣整潔的代碼，可以在別的頁面被重復(fù)使用，只需要修改或添加其中的樣式即可，這樣就大大提高了代碼的重復(fù)使用性。 在后面第19章的實(shí)例中，將會(huì)有很多使用標(biāo)簽制作的例子和語義標(biāo)簽+CSS的例子，通過比較，就可以明白語義標(biāo)記的好處和可用性了。,18.9 小結(jié),本章學(xué)習(xí)了XHTML模塊，通過學(xué)習(xí)，可以了解到XHTML模塊化的原因和大致上分成的模塊。這對代碼的管理、規(guī)范使用都是有很大的幫助的。 本章除了學(xué)習(xí)XHTML模塊，還學(xué)習(xí)了XHTML結(jié)構(gòu)化，通過對結(jié)構(gòu)化的學(xué)習(xí)，可以了解到在網(wǎng)頁制作中，應(yīng)該重視標(biāo)簽的語義。又通過結(jié)構(gòu)化標(biāo)簽來實(shí)現(xiàn)標(biāo)簽的樣式，利用XHTML重構(gòu)網(wǎng)站，使網(wǎng)站更加整潔，并且可用性高。 在本章可以看到，幾乎沒有了表格的蹤影，因?yàn)槭褂肵HTML重構(gòu)網(wǎng)站，就是為了擺脫以前什么都依賴于表格的做法。在重構(gòu)網(wǎng)站中，設(shè)計(jì)師們不再依賴表格來