中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

(2). 簡(jiǎn)單易理解的嵌套層次

1. 布局最好可視化，能通過(guò) IDE 操作，局部運(yùn)用table
2. table布局的弊端：不符語(yǔ)義性、解析慢、重用性

學(xué)業(yè)啟蒙時(shí)代習(xí)字本上的方格子，辦黑板報(bào)也先用三角尺來(lái)畫(huà)格子，這些少年時(shí)的記憶都直觀地給了我們這樣的印象，規(guī)整的格子是來(lái)排版布局的最好輔助�；ヂ�(lián)網(wǎng)發(fā)展初期的網(wǎng)頁(yè)也是用表格（table）來(lái)進(jìn)行布局的，這個(gè)時(shí)期的Web設(shè)計(jì)人員直接在IDE的可視化視圖下就可以完成頁(yè)面的排版布局。隨著技術(shù)的深入發(fā)展，table布局方式的弊端也逐步暴露出來(lái)——語(yǔ)義性差不利于搜索引擎，整個(gè)table全部加載完才顯示出來(lái)導(dǎo)致瀏覽器解析緩慢，代碼不夠精簡(jiǎn)冗余度高等。網(wǎng)頁(yè)設(shè)計(jì)制作人員開(kāi)始使用更專(zhuān)業(yè)的方式來(lái)進(jìn)行網(wǎng)頁(yè)布局——(X)HTML來(lái)標(biāo)記數(shù)據(jù)組織結(jié)構(gòu)，CSS設(shè)置外觀樣式。這種新的方式克服了table布局時(shí)代的一些缺陷，也對(duì)網(wǎng)頁(yè)制作人員有了更高的要求，需要專(zhuān)業(yè)的代碼編寫(xiě)知識(shí)甚至一些復(fù)雜的技巧。比如，為實(shí)現(xiàn)三列等高自適應(yīng)的布局，有些重構(gòu)人員通過(guò)運(yùn)用復(fù)雜的標(biāo)簽嵌套，配合一些奇異的CSS hack方式來(lái)最終實(shí)現(xiàn)效果。

在提供給其他專(zhuān)業(yè)背景人員使用的公用樣式模板中，我們也推薦使用CSS進(jìn)行布局，但那些復(fù)雜的嵌套方式則是不可取的。這對(duì)于使用者來(lái)說(shuō)不易理解，也難以使用。簡(jiǎn)單易理解的嵌套層次是必要的，甚至，為了給使用者帶來(lái)方便，我們還可以對(duì)web標(biāo)準(zhǔn)進(jìn)行一些折衷——鑒于table布局的直觀和在IDE可視化視圖里可以直接進(jìn)行操作，我們可以在局部范圍使用一些小的table來(lái)實(shí)現(xiàn)多列的布局。如下圖例：

整體框架布局采用CSS控制，在局部的小模塊里，使用table（圖中紅色部分所示，實(shí)際運(yùn)用中邊框不可見(jiàn)）來(lái)實(shí)現(xiàn)多列的布局，其他地方，web標(biāo)準(zhǔn)推薦使用什么就采用什么標(biāo)簽。這樣，一定程度保持了語(yǔ)義性（實(shí)際上，頁(yè)面語(yǔ)義性標(biāo)簽對(duì)于搜索引擎的引導(dǎo)作用會(huì)越來(lái)越小，隨著搜索引擎越來(lái)越智能化，分詞技術(shù)、數(shù)據(jù)挖掘技術(shù)的進(jìn)一步發(fā)展，搜索引擎完全可以脫離頁(yè)面標(biāo)記而直接從文本內(nèi)容來(lái)分析頁(yè)面。語(yǔ)義化更大的作用將會(huì)體現(xiàn)在方便數(shù)據(jù)共享(例如RSS、微格式等)和利于代碼維護(hù)。個(gè)人觀點(diǎn)，接受有風(fēng)險(xiǎn)，參考須謹(jǐn)慎），分散的小表格克服了瀏覽器對(duì)于大的table解析緩慢的弊端，這些僅供實(shí)現(xiàn)多列布局的table也不會(huì)影響代碼重用而造成代碼冗余。

對(duì)于一些網(wǎng)頁(yè)元素，根據(jù)其特點(diǎn)揚(yáng)長(zhǎng)避短靈活地運(yùn)用，才能最大程度地裨益我們的項(xiàng)目。

設(shè)計(jì)開(kāi)發(fā)人員的專(zhuān)業(yè)水準(zhǔn)

3. 設(shè)計(jì)風(fēng)格統(tǒng)一，保持一致性

設(shè)計(jì)師主導(dǎo)著網(wǎng)頁(yè)的視覺(jué)風(fēng)格，他們充分發(fā)揮聰明才智使用戶(hù)界面好用又好看。但任何創(chuàng)造性的工作，也都需要遵循一定的范式。書(shū)法家潑墨揮毫筆走龍蛇，看似漫不經(jīng)心，實(shí)則章法井然法度森然，鈐印題款都有講究；音樂(lè)家作曲，靈感噴涌如滔滔江水綿綿不絕，音符的組織卻必須符合韻律節(jié)拍；詩(shī)人情感迸發(fā)，花間一壺酒，筆下三千言，但好的詩(shī)作往往也需要講求平仄格律。設(shè)計(jì)師在設(shè)計(jì)模板樣式的時(shí)候，也要有一定規(guī)范。對(duì)于字體、字號(hào)，常用顏色，以及模塊的邊框、間距等，要有整體規(guī)劃，保持一致性，同一元素在不同頁(yè)面的風(fēng)格保持統(tǒng)一。只有這樣，負(fù)責(zé)代碼編寫(xiě)的重構(gòu)人員才能對(duì)元素樣式進(jìn)行抽象化，提煉出可以重用的部分編寫(xiě)高效代碼。這些規(guī)范一定是設(shè)計(jì)師與重構(gòu)開(kāi)發(fā)人員在長(zhǎng)期的交流探討中逐步完善的，有一定跨專(zhuān)業(yè)的知識(shí)對(duì)于兩者的合作將大有益處——請(qǐng)永遠(yuǎn)記住，你不是一個(gè)人在戰(zhàn)斗。

4. 合理拆分樣式，巧妙組合運(yùn)用

網(wǎng)頁(yè)模板的設(shè)計(jì)風(fēng)格確定了，剩下就要靠頁(yè)面工程師來(lái)把設(shè)計(jì)圖稿實(shí)現(xiàn)成精良的網(wǎng)頁(yè)了�？剂烤W(wǎng)頁(yè)重構(gòu)品質(zhì)的各項(xiàng)指標(biāo)之中，包括瀏覽器兼容性、代碼的易擴(kuò)展和可重用性。要做好這些，必須對(duì)抽象出來(lái)的頁(yè)面元素樣式進(jìn)行合理拆分，區(qū)分哪些樣式可以作為全局公用，哪些需局部定義，并運(yùn)用樣式的繼承覆蓋原則進(jìn)行優(yōu)化。

(1). 樣式拆分組合的理論依據(jù)

1. class=“cRed textLeft ”
   class屬性可以賦值為多個(gè)類(lèi)選擇器名稱(chēng)，中間用空格分隔，這多個(gè)類(lèi)定義的樣式可以同時(shí)作用于標(biāo)簽元素。依據(jù)這一特性，可以在CSS里定義時(shí)對(duì)樣式進(jìn)行拆分打散，在(X)HTML里調(diào)用樣式類(lèi)時(shí)再將其組合使用。例如，有些常用的字號(hào)和顏色可以單獨(dú)進(jìn)行全局定義，在具體模塊的類(lèi)“newsList”中定義其他除字體和顏色之外的樣式屬性，用class調(diào)用樣式的時(shí)候再組合多個(gè)選擇器進(jìn)行賦值 class=“newsList f14px cRed”。這樣，顏色和字號(hào)屬性在全局范圍內(nèi)就可以多次使用，提高了樣式的復(fù)用率，松散耦合的樣式也更利于擴(kuò)展。而且，同一屬性進(jìn)行最少次數(shù)的定義，一定程度也優(yōu)化了CSS性能。
2. 樣式的繼承覆蓋原則，選擇器優(yōu)先級(jí)算法
   在對(duì)樣式進(jìn)行全局公用或局部特殊定義時(shí)，考慮最多的是樣式的繼承覆蓋原則。對(duì)于最普遍的樣式進(jìn)行全局定義，在需要個(gè)性化定義的地方再對(duì)全局樣式進(jìn)行覆蓋，可以很大地提高CSS效率。這正是辯證唯物主義關(guān)于矛盾普遍性和特殊性關(guān)系的典型實(shí)踐。例如，為改善CSS的瀏覽器兼容性而定義的reset文件作為全局樣式，將元素在各個(gè)瀏覽器中表現(xiàn)不同的默認(rèn)樣式進(jìn)行了初始化，在頁(yè)面的具體模塊中需要個(gè)性定制元素樣式的地方再對(duì)初始化的樣式進(jìn)行覆蓋。要有效地利用繼承和覆蓋原則，關(guān)于選擇器優(yōu)先級(jí)的算法必須熟練掌握。id選擇器、類(lèi)選擇器、標(biāo)簽選擇器以及行內(nèi)樣式的優(yōu)先級(jí)權(quán)重是不一樣的，特別是這些選擇器進(jìn)行組合運(yùn)用的時(shí)候。

本文從公用樣式模板的設(shè)計(jì)制作為例，詳解了一個(gè)項(xiàng)目從實(shí)際需求到技術(shù)要求的分析過(guò)程，以需求為主導(dǎo)，不放棄專(zhuān)業(yè)追求的理念貫徹其中，未涉及具體的技術(shù)實(shí)現(xiàn)細(xì)節(jié)，旨在提供一種思考問(wèn)題的思路，希望能給大家提供借鑒。

附錄：

原文：http://www.ued163.com/?p=597

本文鏈接：http://m.95time.cn/tech/web/2009/7009.asp　

出處：163 UED Team
責(zé)任編輯：bluehearts

上一頁(yè) 公用樣式模板的設(shè)計(jì)制作 [5] 下一頁(yè)

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。