| 在上周的專(zhuān)欄文章中,我討論了Yahoo! Developer Network,集中論述了在Yahoo! User Interface (YUI) Library(用戶(hù)界面庫)中可用的JavaScript特性(最重要的就是日歷)。我想再花一點(diǎn)時(shí)間涉入YUI庫中另一個(gè)提供了CSS工具的領(lǐng)域。這些工具使你能夠很輕松地將以CSS為基礎的設計與Web應用相結合。 瀏覽器支持 CSS工具的一個(gè)主要特性就是它的分級提供了對A級瀏覽器的完美支持。分級瀏覽器支持純粹是一個(gè)Yahoo!的分級,在它的網(wǎng)站上你可以看到完整的說(shuō)明,它主要描述了在當今市場(chǎng)上的瀏覽器中,CSS的良好表現。 在這個(gè)在線(xiàn)表格中,瀏覽器被分為三個(gè)級別的瀏覽器支持(A、C和X)。A級是最高的支持級別。通過(guò)充分發(fā)揮現代Web標準的強大性能,YUI庫發(fā)現,A級體驗提供了高級的功能性和可視保真度。支持類(lèi)別和相關(guān)文件使你能夠切身體會(huì )到哪里支持CSS,但是它應該在每一種瀏覽器中都可用(通過(guò)可能的降級)。 可重復使用的CSS YUI庫中包括了三個(gè)CSS領(lǐng)域或特性,涉及格式化、字型介紹和以網(wǎng)格為基礎的(列和行)版式。網(wǎng)站上用這些術(shù)語(yǔ)來(lái)描述這三個(gè)元素: - Page Grids:使你能夠在所用模版容量范圍內,嵌入一到四列的網(wǎng)格。
- Fonts:提供跨瀏覽器的排版標準化和控制器。一般來(lái)說(shuō),它在完全支持用戶(hù)(在瀏覽器內)對字體進(jìn)行調整的同時(shí),還提供了一致的字體和行高。
- Reset:提供跨瀏覽器的HTML元素默認賦值的標準化。它也去除了瀏覽器中的共同默認表達,如對要強調元素使用粗體,這樣是為了幫助保證對所有的字體的定義都是有意圖的,并且元素始終用的是它們的語(yǔ)義含義,而不是習慣上的視覺(jué)表達。
在被安裝了以后,YUI庫下載中的每一個(gè)元素都可以在Web服務(wù)器的以下目錄/文件中獲得: - Page Grids: build\grids\grids.css
- Fonts: build\fonts\fonts.css
- Reset: build\reset\reset.css
你可以在自己的Web服務(wù)器上安裝這些基礎目錄或者將它們置于你的站點(diǎn)內,以便根據需要引用它們。CSS的一個(gè)重要特性(除了免費之外)就是,它在發(fā)布之前,已經(jīng)經(jīng)過(guò)了徹底的檢驗和調試。讓我們來(lái)更仔細地看一下實(shí)際操作中的CSS工具。 | | <a target="_blank"><img src="http://image.360doc.com/DownloadImg/10587/269473_2.gif" WIDTH=468 HEIGHT=60 BORDER=0 ></a> | 有網(wǎng)格的頁(yè)面版式 以網(wǎng)格為基礎的版式幾乎是所有站點(diǎn)設計或頁(yè)面版式的動(dòng)力。過(guò)去,這一點(diǎn)常常通過(guò)HTML表格來(lái)完成,但是CSS為頁(yè)面版式提供了巨大的力量和靈活性。頁(yè)面網(wǎng)格提供的代碼可以根據你的要求,利用列和行來(lái)建立頁(yè)面。 在頁(yè)面網(wǎng)格最基本的級別上,它提供了七種Web頁(yè)面模版,其中六種定義了詳細的主要內容/工具條版式;第七個(gè)模版定義了一個(gè)沒(méi)有工具條的版式,主要內容占據了整個(gè)頁(yè)面寬度。這些模版的名稱(chēng)如下: - yui-t1:包含一個(gè)位于左側寬度為160px的工具條和一個(gè)寬度為570px的主要區域。
- yui-t2:包含一個(gè)位于左側寬度為180px的工具條和一個(gè)寬度為550px的主要區域。
- yui-t3:包含一個(gè)位于左側寬度為300px的工具條和一個(gè)寬度為430px的主要區域。
- yui-t4:包含一個(gè)位于右側寬度為180px的工具條和一個(gè)寬度為550px的主要區域。
- yui-t5:包含一個(gè)位于右側寬度為240px的工具條和一個(gè)寬度為490px的主要區域。
- yui-t6:包含一個(gè)位于右側寬度為300px的工具條和一個(gè)寬度為430px的主要區域。
- yui-t7:包含一個(gè)寬度為750px的主要區域,沒(méi)有工具條。
你可以結合(或編輯,如果你夠大膽)這些模版來(lái)達到你的目的。列表A用第一種版式來(lái)安排一個(gè)頁(yè)面的格局(注意:CSS工具安裝在Web服務(wù)器的默認目錄中)。 列表A <html><head> <title>Yahoo CSS Tools Example 1</title> <link rel="stylesheet" type="text/css" href="build/grids/grids.css"> </head> <body> <div id="doc" class="yui-t2"> <div id="hd">Page Header</div> <div id="bd"> <div id="yui-main"> <div class="yui-b">Main Area</div> </div><div class="yui-b">Left Column</div> </div> <div id="ft">Page Footer</div> </div></body></html> HTML頁(yè)面上的幾個(gè)注釋?zhuān)?/p> - 版式被賦予整個(gè)頁(yè)面——主div標簽被分配為yui-t2類(lèi)。這說(shuō)明采用的是第二種模版。
- 頁(yè)面被分為頁(yè)眉、主體和頁(yè)腳區域。頁(yè)眉被賦予標識符hd,主體為bd,頁(yè)腳為ft。
- 頁(yè)面的主體被分為左區域(如果模版支持的話(huà))和主區域。兩者都被分配為yui-b類(lèi),但是主區域在它的div標簽中被附上了yui-main的標識符屬性。
|