前言：
來上海激動的第一個項目，無論是公司還是自己都有很多的不足。第一次做娛樂型的門戶網站，對web標準的掌控能力的確是個很大的挑戰。說實話，這一個項目對于web標準的使用自己只能給自己打65分，分數之所以那么低，項目時間短是一個原因，美工的設計稿比較差是個原因，自己對大型娛樂型的網站的網頁框架的設計不足也是個原因。正是因為分數這么低，所以項目的總結就顯的特別重要。不斷的總結，不斷的改進，不斷的完善。我很高興，因為我依然走在“好好學習，天天向上”的路上……

正文：
美工和策劃都生活在烏托邦
不要急著馬上動手，美工給過來的頁面一定會隱藏著很多不合理的地方。把頁面打印出來，看！根據以前的經驗把這些不合理的地方找出來，標記出來，和策劃進行商討和改進。不合理的地方可以通過一下方式查找出來——對一個地方問一下：這地方的文字（或者圖片、記錄、信息塊）如果很長怎么辦？如果很短怎么辦？如果沒有怎么辦？如果很多怎么辦？如果很少怎么辦？如果有權限怎么辦？如果沒有權限怎么辦？……多考慮一些情況下的顯示和展現方式。

唯一不變的只有改變
即使經過策劃重新改進和商討的版本也一定會隱藏很多的不合理的地方，所以動手開始頁面設計之前，一定要注意為即將使用的框架預留變更的可能性和可行性。頁面設計也是軟件開發的一部份，自然會遵循軟件開發的一句神語——唯一不變的只有改變！

網頁設計框架
如何避免大量重復的工作，不再為做了一遍又一遍的東西浪費時間和精力？Framework，框架。編程有編程的框架，網頁設計也可以有網頁設計的框架（例如yahoo的yui框架）。所以將常用的、通用的東西集合到框架里面去，將是種成熟的做法。我正在試著搭建一個符合web標準的網頁設計用的框架，但是自己能力的確有限，加上后期項目時間太緊，所以這次項目中雖然開頭設計了一部份，但是后來終究沒有完成和使用。如果有高人有相同的想法，歡迎指教。如果對網頁設計框架有興趣，但是還不是很了解的朋友，推薦看一篇文章 《Frameworks for Designers》

建設健壯的頁面
因為美工和策劃都生活在烏托邦，所以他們的設計很多都太理想了，工工整整煞是好看。但是很多的時候，數據并不都是那么工整和漂亮。所以頁面的布局還需要通過css去強制限制。確保布局在異常狀態下不會混亂。
鑒于這個比較重要，而且不是一句話兩句話就可以很明了的說明白，所以我決定以后單獨為此寫一篇文章，敬請關注我的博客(YES!B/S!)

id和class到底要用哪一個？
首先要明白id和class的各自的優缺點。這樣才能根據他們的各自的特點進行使用。
id的優點（class的缺點）：id寫在css用"#"選擇器，class寫在css中用"."選擇器。"#"選擇器的優先級高于"."選擇器大約10倍，所以當你需要提升優先級的時候，id標簽，或者id容器內的標簽將是很容易和有效的。而class標簽，或者class容器內的標簽將可能導致優先級的提升失敗。
id的缺點（class的優點）：id應該是唯一的，所以它的可復用性是很差的，而class是可以復用的。所以如果一塊東西是多個頁面，甚至一個頁面都會使用多次的，那么一定要使用class來作為樣式選擇器。id是唯一的，當一個控件的id的產生是不可控的，那么這個id選擇器將失去意義，但是任何一個控件即使是動態產生的，他的cssClass仍然是可定制的，所以當你的這個標簽需要用服務器端控件替代的時候，而服務器端控件的id是不確定的，那么請使用class選擇器，這樣只要將服務器端控件的cssClass設為你class選擇器的名稱即可。（當然，這個還需要大量的經驗的積累，項目做的多了就會逐步的改進）

padding和margin到底要用哪一個？
padding和margin可以讓一塊區域的外觀顯示完全一樣。所以可能讓很多人認為padding和margin是可以互換的。其實它們的差別很大，而且選擇哪個需要認真和慎重地考慮。我認為對容器使用padding還是對容器內的標簽使用margin的原則：當隱藏這個容器或者容器內的標簽時（現實項目中其實經常需要將某個部件隱藏、顯示），對整體布局影響最小為益。
對于padding再說一句：ie6，ie7（FF）對帶有padding樣式的標簽的寬度的解析是不一樣的。ie6的標簽寬度不包含padding-left和padding-right的值，而ie7和ff則是包含的。例如一個div的width設置100px，padding設為10px，而在ie6中它要占據的寬度是120px（包含10個padding-left和10個padding-right），而在ie7和ff中則占據100px的寬度。因為ie7和ff會認為100已經包含了20px的padding。

min-height和height
如果你只需要兼容ie6那么你完全不需要注意min-height這個樣式，因為ie6根本就不支持這個樣式。但是當你的頁面需要照顧到ie7和ff的時候，這個樣式一定要注意。因為很多在ie6下設置了height=固定值的樣式，當容器被里面的東西撐的大于這個高度的時候，ie7和ff是不會自適應高度的。從而導致布局的混亂。要想在ie6，ie7和ff中都可以自適應高度，正確的做法是設置min-height和用cssHack設置height。例如：
min-height:600px;
_height:600px;
這樣，在容器里面的東西很少的時候，它顯示固定高度600px，但當里面的東西很多的時候，它也會自適應的增長高度。
對于height的設置一定要特別注意，如果是布局用的容器的height則需要特別的注意，否則在ff中會導致無法浮起，從而使布局混亂。

找把順手的斧頭
共欲善其事，必先厲其器。頁面搭建的工作量是很大的。所以為了提高工作效率，找一個適合自己的開發工具是很有必要的。
自從Macromedia被Adobe收購以后，我就不再使用Dreamweaver了。因為對web標準支持的不是特別好。我比較喜歡的web開發工具是editplus，配置好符合自己習慣的自動完成功能，作為輕量級的頁面開發工具，開發效率還是很高的。重量級的開發工具，我比較喜歡Microsoft Office SharePoint Designer 2007。習慣editplus開發web的朋友可以很好的過渡過來，他的智能提示和可配置的自動完成功能可以很好的提高效率。再加上它有站點的概念，所以批量替換和修改比editplus要方便很多。一些editplus和Microsoft Office SharePoint Designer 2007的使用心得和技巧我也會在以后的日子里陸續的匯總，請你訂閱我的播客，以便盡快得知。謝謝。

flash是個婊子
雖然很強悍，而且很流行，但是我對它一直沒有好感（因為我不會 ^-^）。網上問的最多的就是如何讓含有flash的網頁通過w3c的xhtml驗證。其實很簡單，就是使用object標簽。但是如果你的頁面需要在Microsoft Visual Studio 2005打開再次進行工作，那么請不要讓頁面包含flash的object標簽。因為他會讓你的Microsoft Visual Studio 2005虛脫。出現非常令人費解的問題——沒有辦法打開設計模式，back和del鍵不能使用，只能打字，不能刪除。反正flash就像個婊子，讓你的Microsoft Visual Studio 2005墮落。（在我們開發團隊多臺電腦出現此問題。但是依然不能排除是我們的Microsoft Visual Studio 2005或者電腦環境的問題。如果是我們的問題，我對flash的誤解表示真心的抱歉——“你不是個婊子，你是個處女！比銀光（silverlight）還處！”）

排隊，排隊！
多列布局的網頁十分多見，別的不說，就是現在我使用的博客園的這個風格就是個兩列的布局。左面的side，右面的是main。依照大家的閱讀習慣，html里面當然應該先寫左面的side，然后再寫右面的main。其實，這樣做是不合理的。因為瀏覽器的解析是從上到下的。先解析出來的先顯示，后解析出來的后顯示。而左面的導航欄并不是用戶急于想看到的，用戶急于想看到的是main里面的文章的內容。所以正確的寫法是側邊欄寫在下面，網頁主題寫在上面，然后利用float樣式，讓它們出現在左邊或者右邊。

What's your Name? "AD"?拉出去砍了！
如果你的這塊區域要顯示廣告，所以你就把這個div命名為“divAD”，ok，沒有問題，命名很準確，而且采用了駝峰式。但是為什么很多瀏覽器下看不到你的廣告？很簡單，因為他們被屏蔽了。被誰？瀏覽器、殺毒軟件、甚至防火墻。很多東西都很樂意強奸這些廣告。把你的東西命名為“AD”或者“banner”就如同在臉上寫上“我是免費（女支）女”一樣。絕對有很多東西樂意搞你。“牡丹”、“芙蓉”、“秦操（《大內密探零零發》）”，隨便選，反正還是換個名字吧。

Short Live the "Button" Tag
當初我剛發現button標簽的時候高興了一陣，這個標簽好呀！里面可以包含很多其他的標簽來構成不同的按鈕樣式(例如按鈕圖片可以這樣寫(<button><img src="a.gif" alt="圖片說明" /></button>)，而且，點擊的時候還有“偏移量”這樣華麗的動態。所以，我在這次項目中使用了。但是后來發現，當需要把這些華麗的圖片按鈕button替換成服務器端控件時，問題出來了。因為vs2005中沒有什么控件打到前臺是button標簽（采用控件編程實現的方法除外）。“imageButton”?不是，他打到前臺不是button，而且，他也不是你想想中的是img，他打到前臺是type為image的input。這點讓程序員們很無措。所以，我決定以后不再采用button標簽。“Butoon”標簽，在我這里還真是個短命的種。


圖片按鈕！img or input?
美工真的是生活在童話里，它們將頁面設計的花里胡哨，到處都是漸變和色彩絢麗的按鈕，以至于，我的電腦一打開他們發過來的psd文件就一定會死機。他們上網好像用的從來都是光纖，不知道一個按鈕圖片就有50多k，需要下載多長時間。不過，也沒有辦法呀。中國的美工也是靠花哨吃飯的。所以網頁上從來都沒有系統默認樣式的按鈕，從來都是圖片按鈕。問題是作為網頁設計師，你需要決定將這些按鈕圖片用何種標簽表現出來。網頁標簽的種類合適與否決定著程序員在后期開發中工作效率，所以選擇使用何種標簽是要經過慎重考慮的。圖片嘛？自然是img拉。但是如果，這個圖片按鈕需要處理一些服務器端代碼，那么img將是不合適的。所以圖片按鈕，如果用服務器端控件的話，一定是imageButton。而imageButton打到前臺解析出來是type為image的input。所以，如果進行服務器端處理的圖片按鈕還是用type為image的input吧。這樣程序員就知道直接拉imageButton了。

“a君請過來!” A君：“誰是a君？”
css是大小寫敏感的，所以 #divTest 不會為一個id為divtest的div渲染效果。“為什么沒有效果呀！”，找啊找，找啊找，“媽的！原來你是小寫的！”順便說一個我在此次項目中犯的一個很小但是后果很嚴重的錯誤。因為大意，我開始將video（視頻）寫成了“vedio”。而且很多的樣式都含有video或者Video單詞。后來發現這個問題，就用批量替換將vedio替換成video。而且是不care大小寫的那種批量替換。后果可想而知呀～～、

這是什么？——? /*緇旀牕鎮滈幒鎺戝灙閻ㄥ嫯顫嬫０鎴濆灙鐞?/?
這是什么？如果我告訴你這是注釋你相信嗎？不對吧，css的注釋后面應該是"*/"結尾吧。是呀，我本來寫的也是像“/*中文注釋*/”這樣的，但是vs2005將我的中文變成了該死的亂碼，而且還把后面的那個注釋用的“*”也變成了亂碼！結果，有一天，我發現，我大批的樣式都失效了。（圖是“亂馬”表示“亂碼”）

版本控制失敗！輕則令人抓狂！重則吐血身亡！
當項目很小的時候，版本控制不那么重要，但是當項目越大的時候，版本控制就越重要了。如果版本控制失敗！輕則令人抓狂！重則吐血身亡！
所以一開始不要怕麻煩，還有盡量使用vss或者smc這樣的工具進行控制。不要為了一次的方便而破壞版本的控制流程。如果要維護多處的時候，那么混亂的程度將是你不可想象的。


相關文章鏈接：《播客》項目總結——項目管理方面

---

keyword:css總結,padding和margin,margin,padding,css padding,css margin,版本控制,css亂碼,css大小寫敏感,button標簽,圖片按鈕,屏蔽廣告,cs排隊,flash出問題,網頁制作工具,健壯的網頁,css布局混亂,css布局,div css布局,css網站布局,css布局總結,網頁設計框架,網頁框架,網頁框架代碼,網頁框架結構,網頁制作框架,網頁框架設計欣賞,唯一不變的只有改變

轉載于:https://www.cnblogs.com/JustinYoung/archive/2007/09/17/project-summarize-web-standard.html

總結

以上是生活随笔為你收集整理的《播客》项目总结——web标准页面设计方面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。