|
１).整理一個(gè)良好的文件夾結(jié)構(gòu)
腳本，樣式表，界面的圖片，圖片內(nèi)容，等等，都需要分開(kāi)存放。如果一個(gè)小網(wǎng)站，你也許可以把這些東西雜糅到一起，但在大型站點(diǎn)中，找到你需要的內(nèi)容變得更為重要。
２).給你的文件使用有規(guī)則、良好的命名規(guī)范
沒(méi)有什么比按名字 “gd_l3.jpg”尋找一塊圖片更為糟糕。你怎樣做即基本是個(gè)人的事，但我覺(jué)得使用通用命名描述性文件名的前綴會(huì)有更大的幫助。比如：我可能會(huì)給頭部 的每張圖片加上前綴'header_'，每一個(gè)背景加上'bg_'，頭部菜單中的背景可能稱(chēng)為'header_bg_menu.jpg'。
前綴有一個(gè)好 處，當(dāng)您的文件按名稱(chēng)排序，他們都出現(xiàn)在一起。
３).使用Subversion
這是被我們的開(kāi)發(fā)人員逼得，但幸虧我們用了 它！Subversion可以跟蹤文件和檔案的變更，同時(shí)可以防止覆蓋其他設(shè)計(jì)者/開(kāi)發(fā)者在同一個(gè)項(xiàng)目中的文件。這需要一些時(shí)間來(lái)適應(yīng)，但即使沒(méi)有開(kāi)發(fā)者 使用它的原因，在HTML / CSS的設(shè)計(jì)上用它也是值得的。還不知道Subversion？趕緊去使用吧。
４).在你寫(xiě)HTML和CSS深入思考寫(xiě)法
很容易寫(xiě)出垃圾HTML和CSS代碼，而且很難清除它們來(lái)獲得原先版本。經(jīng)過(guò)4個(gè)重設(shè)計(jì)，我仍然使用很多相同的CSS文件，必須規(guī)劃地清理不再使用的或者帶來(lái)混淆布局定義CSS類(lèi)。通過(guò)大量的意見(jiàn)，甚至可能是多個(gè)樣式表，并確保你有良好的命名風(fēng)格！
５).早點(diǎn)開(kāi)始瀏覽器差異兼容工作
我在FlashDen這方面的工作聽(tīng)失誤的，至 今我們已經(jīng)為此付出了很大的代價(jià)。我最初的布局設(shè)計(jì)在IE7上，直到我們完成整個(gè)網(wǎng)站才發(fā)現(xiàn)忽略了IE6。之后我們已經(jīng)加入IE瀏覽器條件式，和CSS Hack和其他解決方法。在你建立一個(gè)龐大的站點(diǎn)時(shí)候，在頁(yè)面上只有少量元素時(shí)候可以更輕松的處理瀏覽器兼容性，，所以不要重蹈覆轍！
7. 確�？梢院�(jiǎn)單的擴(kuò)展你的樣式表
網(wǎng)站越大，設(shè)計(jì)師就越有可能看到或修改每一個(gè)單獨(dú)頁(yè)面。如果你是一個(gè)大型網(wǎng)站上唯一設(shè)計(jì)師 – 比如我 – 你可能不想在每個(gè)頁(yè)面上重定義。因此，多花精力在樣式表上，可以通過(guò)默認(rèn)的屬性讓頁(yè)面看起來(lái)不錯(cuò)。
１).確保你定義了<input>，<strong>等元素的默認(rèn)樣式。
這樣的頁(yè)面可以自動(dòng)呈現(xiàn)的不錯(cuò)。如果你想指望別人做<strong>這樣的事情，那么不可避免的會(huì)和其他頁(yè)面產(chǎn)生差異
２).創(chuàng)建可讓開(kāi)發(fā)人員重復(fù)使用的元素
比如在FlashDen上我們有一個(gè)CSS表類(lèi)稱(chēng)為“general_table”，可以確保一個(gè)不錯(cuò)的填充數(shù)據(jù)時(shí)候使用的樣式。當(dāng)我有機(jī)會(huì)設(shè)計(jì)網(wǎng)頁(yè)樣式時(shí)候，我可以使用個(gè)性的表和數(shù)據(jù)高亮呈現(xiàn)的類(lèi)型，但是很少會(huì)有開(kāi)發(fā)人員吧頁(yè)面制作成全能的樣式去使用。
３).請(qǐng)確保您的網(wǎng)頁(yè)布局有一個(gè)不錯(cuò)的結(jié)構(gòu)，即使他里面只有文字。
總是會(huì)有些網(wǎng)頁(yè)還沒(méi)能往里面添加圖像，可能看起來(lái)有點(diǎn)沉悶。通過(guò)使用諸如標(biāo)題樣式，工具條等等，你可以確保他們也很美觀，并且有一定的視覺(jué)風(fēng)格。有關(guān)FlashDen在大多數(shù)例子中，我們文本塊總結(jié)如下：
<fieldset>
<legend>Heading</legend>
Content
</fieldset>
默認(rèn)情況下，文字外面包圍著一個(gè)漂亮的邊框和標(biāo)題。這樣很容易和開(kāi)發(fā)人員協(xié)調(diào)工作，文字和表現(xiàn)有了不錯(cuò)的分離，使之看起來(lái)更具可讀性。我們同時(shí)也有一 個(gè)側(cè)邊欄組件，僅僅把文字內(nèi)容額外包起來(lái)，但是這能使網(wǎng)頁(yè)看起來(lái)更加直觀。經(jīng)過(guò)設(shè)計(jì)師的設(shè)計(jì)，每一個(gè)頁(yè)面基本都是優(yōu)化過(guò)的，但是他們可能不是那么健壯，它 仍然看起來(lái)很專(zhuān)業(yè)和統(tǒng)一。
原文：http://www.boxui.com/?p=1423
本文鏈接：http://www.95time.cn/design/doc/2010/7906.asp 
出處：盒子UI
責(zé)任編輯：bluehearts
上一頁(yè) 大型網(wǎng)站設(shè)計(jì)和維護(hù)的技巧 [3] 下一頁(yè)
|
第 1 頁(yè) 
第 4 頁(yè) 大型網(wǎng)站設(shè)計(jì)和維護(hù)的技巧 [4]
