網(wǎng)站設(shè)計(jì)中的WEB標(biāo)準(zhǔn)總結(jié)!
下面是我們從事這個(gè)網(wǎng)站建設(shè)行業(yè)多年的一些經(jīng)驗(yàn)總結(jié),希望拋磚引玉。
1、必備工具
其實(shí)web標(biāo)準(zhǔn)并不是很復(fù)雜的技術(shù),實(shí)現(xiàn)web標(biāo)準(zhǔn)的工具也很簡(jiǎn)單,說(shuō)白了,只要可以進(jìn)行純文本編輯的軟件,都可以作為代碼編寫(xiě)的gon工具。例如記事本、UltraEdit甚至CuteFTP的編輯器(象我這種懶人有時(shí)候就用那玩藝兒直接在線編輯,汗)。
而另一些較專業(yè)軟件會(huì)提供高亮顯示代碼(前面提到的UltraEdit也具有此項(xiàng)功能)、代碼提示、自動(dòng)閉合標(biāo)簽等等功能,使用起來(lái)會(huì)大大提高工作效率。如DreamWeaver、MS Expression、EditPlus等等,這些編輯軟件目前是絕對(duì)的主流,無(wú)論是初學(xué)者上手容易還是專業(yè)人士提高效率都是不錯(cuò)的選擇。
再說(shuō)說(shuō)瀏覽器環(huán)境,目前一臺(tái)機(jī)器同時(shí)裝IE、Firefox、Opera、Safari已經(jīng)不是難事,而IE7 Standalone和MultipleIE的問(wèn)世也讓IE7和低版本IE并存成為可能。推薦瀏覽器環(huán)境——本機(jī)安裝IE7、FF、Opera、Safari,同時(shí)安裝MultipleIE。從我個(gè)人的使用經(jīng)驗(yàn),IE7 Standalone存在一定的缺陷,有可能導(dǎo)致本機(jī)安裝的IE6無(wú)法正常使用。
除了編輯器以外,還有就是必不可少的調(diào)試工具啦,首推當(dāng)然是Firefox下的Firebug!IE下目前還沒(méi)有與之相當(dāng)?shù)恼{(diào)試工具,比較好的有IE development toobar、IE Debugbar等等,不過(guò)和Firebug完全不是一個(gè)檔次的東西,只能說(shuō)勉強(qiáng)湊合用。
2、必備的HTML/XHTML基礎(chǔ)
說(shuō)到基礎(chǔ),其實(shí)正是我最想談的。從論壇許多的帖子也可以看出來(lái),大多數(shù)問(wèn)題的產(chǎn)生是由于制作者本身基礎(chǔ)的不牢固。而HTML/XHTML作為基礎(chǔ)中的基礎(chǔ),更是許多人的薄弱環(huán)節(jié)。然而很多人還是喜歡一上來(lái)就問(wèn)布局或者Hack這些技巧方面的問(wèn)題,其實(shí)很多問(wèn)題如果本人的基礎(chǔ)牢固了,幾乎不能被稱之為問(wèn)題。
web標(biāo)準(zhǔn)必備的HTML/XHTML基礎(chǔ),大致有幾個(gè)方面:
1、每個(gè)標(biāo)簽的語(yǔ)義,這一點(diǎn)是網(wǎng)頁(yè)標(biāo)準(zhǔn)的根本。而整個(gè)網(wǎng)頁(yè)標(biāo)準(zhǔn)化幾乎都是圍繞著這一點(diǎn)而來(lái)的,明確了語(yǔ)義,才能選擇合適的標(biāo)簽;明確了語(yǔ)義,才能構(gòu)建可讀性良好的結(jié)構(gòu)。例如
就是網(wǎng)站最高等級(jí)的標(biāo)題,它不應(yīng)該放在層級(jí)之下;例如 和,主要用于表單元素分組,不應(yīng)該因?yàn)樗莻€(gè)漂亮的邊框就用來(lái)表現(xiàn)新聞列表。
2、每個(gè)標(biāo)簽的初始樣式,現(xiàn)在有很多重置標(biāo)簽樣式就是針對(duì)這一點(diǎn),因?yàn)槊總€(gè)標(biāo)簽在不同瀏覽器下的初始樣式是不同的,而重置樣式是為了更好地實(shí)現(xiàn)網(wǎng)頁(yè)兼容性。從我個(gè)人的角度來(lái)說(shuō),不推薦初學(xué)者一上來(lái)就了解如何重置樣式,而應(yīng)該從了解標(biāo)簽的初始樣式入手,先了解了這些,才能明白每一行重置樣式的代碼的真正含義。
3、標(biāo)簽的正確嵌套規(guī)則,同時(shí)還必須了解的是哪些標(biāo)簽屬于塊元素,而哪些屬于行內(nèi)元素。這是即使是高手也會(huì)經(jīng)常忽略的方面,例如本人(^_^)。今天看到http://bbs.blueidea.com/thread-2834342-1-1.html這個(gè)帖子的時(shí)候,才意識(shí)到,原來(lái)之前對(duì)dt、dd的嵌套規(guī)則理解有誤,二者不能一視同仁。HTML/XHTML的嵌套規(guī)則并不算簡(jiǎn)單,常用的標(biāo)簽不過(guò)三十個(gè)上下,就有大約二十種不同的嵌套規(guī)則,稍不留神就會(huì)出錯(cuò)。雖然不嚴(yán)格遵循并不會(huì)影響頁(yè)面的表現(xiàn),但養(yǎng)成一個(gè)良好的習(xí)慣是很重要的,它往往能決定你在這條路上可以走多遠(yuǎn)。
4、標(biāo)簽的屬性。這個(gè)又要分為兩方面,一是符合標(biāo)準(zhǔn)的常用屬性及對(duì)應(yīng)的值,例如的summary屬性、的scope屬性、的for屬性等等;二是標(biāo)準(zhǔn)強(qiáng)制要求的屬性,例如圖片的alt屬性、form的action屬性、textfield的col屬性和row屬性等等。
HTML/XHTML基礎(chǔ),雖然可以分開(kāi)成多個(gè)方面講,但實(shí)際關(guān)于它們的知識(shí)往往是綜合在一起的,大多數(shù)相關(guān)的手冊(cè)幾乎都有詳盡的介紹。對(duì)于這方面知識(shí)的學(xué)習(xí),除了看相關(guān)手冊(cè)外,多把自己的網(wǎng)頁(yè)拿去w3c做校驗(yàn)也是不錯(cuò)的方法。
3、必須了解的CSS知識(shí)
CSS是標(biāo)準(zhǔn)化最吸引人的地方,也是時(shí)下討論最多的話題,市面上的相關(guān)書(shū)籍也在web標(biāo)準(zhǔn)類里占據(jù)壓倒性的比重,甚至有些人(包括一些用人單位)認(rèn)為CSS就是網(wǎng)頁(yè)標(biāo)準(zhǔn)。這種過(guò)于夸大CSS作用的觀點(diǎn)固然是錯(cuò)誤的,但CSS對(duì)于網(wǎng)頁(yè)標(biāo)準(zhǔn)的重要性卻也可見(jiàn)一斑。
CSS相關(guān)的知識(shí)、技巧很多,從知識(shí)的必備性方面來(lái)講,以下幾個(gè)方面是我認(rèn)為最重要的:
1、布局。布局是表現(xiàn)層技術(shù)的基礎(chǔ),任何表現(xiàn)層的東西都是基于布局之上的。利用CSS布局的方法有很多種,例如float、絕對(duì)定位、負(fù)margin等等。每一種布局都有著各自的優(yōu)勢(shì)和局限性,從適性最廣來(lái)講顯然是float最佳,也最為常用,但清除浮動(dòng)往往是讓人頭疼的問(wèn)題。絕對(duì)定位的網(wǎng)頁(yè)抗壓性好,但自由度低,而且渲染效率最差。負(fù)margin是最不破壞文檔流的辦法,但在對(duì)負(fù)值支持不佳的IE下往往會(huì)有靈異表現(xiàn)。關(guān)于布局方面的知識(shí),建議看一下webflash的《徹底弄懂CSS盒子模式》系列文章,個(gè)人認(rèn)為相關(guān)知識(shí)的文章尚無(wú)出其右者。
2、IE下的Haslayout渲染模式。其實(shí)hack是許多標(biāo)準(zhǔn)工程師所深惡痛絕的東西,但在瀏覽器兼容性要求越來(lái)越高的今天,hack卻往往是一種無(wú)奈之舉。而深入了解IE的Haslayout渲染模式,就會(huì)明白許多hack的來(lái)由,以及許多兼容性問(wèn)題的產(chǎn)生之源。推薦閱讀——譯文On having layout。然而HasLayout問(wèn)題之多,絕非一兩篇文章所能概括,通過(guò)閱讀文章,了解其中的原理,再舉一反三,很多問(wèn)題就會(huì)迎刃而解了。
3、符合標(biāo)準(zhǔn)的CSS規(guī)則。關(guān)于這一點(diǎn),我可以不負(fù)責(zé)任地說(shuō),數(shù)以千萬(wàn)計(jì)的網(wǎng)站,其CSS完全符合標(biāo)準(zhǔn)的,所占比重不會(huì)超過(guò)1%。這并不是一個(gè)悲觀的估計(jì),即使是w3c推薦的一些網(wǎng)站,例如ESPN,他們的CSS也時(shí)常會(huì)通不過(guò)校驗(yàn)。CSS的許多規(guī)則的確令CSSer們非常不適,例如background和color,這兩個(gè)屬性絕大多數(shù)人都是分開(kāi)來(lái)使用的,而w3c標(biāo)準(zhǔn)卻規(guī)定兩者必須“生則同生,死則同死”。還有就是各個(gè)瀏覽器的專有屬性,在實(shí)現(xiàn)一些效果時(shí)是最簡(jiǎn)單有效的。這種時(shí)候我們往往會(huì)選擇放棄標(biāo)準(zhǔn),但暫時(shí)的放棄不意味著無(wú)視。今天知道我們哪些行為是錯(cuò)誤的,以及為什么要用錯(cuò)誤的方法,明天改正起來(lái)就不會(huì)太難。
4、提高網(wǎng)站性能的技巧,如有助于SEO的以圖代字、用盡量少和小容量的圖片實(shí)現(xiàn)圓角表格、用background-position實(shí)現(xiàn)圖片切換以提高渲染效率等等。從對(duì)網(wǎng)站的幫助角度來(lái)看,這些技巧遠(yuǎn)比瀏覽器hack更值得掌握。
5、了解一點(diǎn)js知識(shí)。這個(gè)和CSS關(guān)系不是那么密切,但經(jīng)??吹胶芏嗳算@牛角尖,用js可以非常簡(jiǎn)單實(shí)現(xiàn)的效果,非要用CSS去勉強(qiáng)實(shí)現(xiàn)。例如將子菜單放在鏈接里,通過(guò):hover觸發(fā)。又比如多列等高布局的實(shí)現(xiàn)。這已經(jīng)是行為層的范疇了,為什么還非要用表現(xiàn)層來(lái)實(shí)現(xiàn)呢?當(dāng)然這里并不是說(shuō)所有CSS不容易實(shí)現(xiàn)的都往js里扔,而是要了解一下雙方的技術(shù)特點(diǎn),合理地選用最佳方案。
4、必備的網(wǎng)站樣式管理技巧
1、規(guī)范化的命名與合理的代碼重用性,也就是ID和class。對(duì)不起,這里又要老生常談一下,因?yàn)樽蛱靹倓傆挚吹揭粋€(gè)通篇沒(méi)有用一個(gè)ID的網(wǎng)站。ID和class是屬于結(jié)構(gòu)層的,不過(guò)CSS的調(diào)用卻幾乎都要通過(guò)ID和class來(lái)實(shí)現(xiàn)。但是,ID和class不僅僅是為了調(diào)用CSS樣式而存在的。恰恰相反,是良好的ID和class構(gòu)建的結(jié)構(gòu)給了CSS大展身手的舞臺(tái)。搞反了彼此關(guān)系,其實(shí)還是表現(xiàn)主導(dǎo)結(jié)構(gòu)的思路,也就和滿屏幕的table沒(méi)有本質(zhì)區(qū)別。理清了ID、class和CSS的關(guān)系,再來(lái)談命名,命名其實(shí)只有一個(gè)基本原則,就是結(jié)構(gòu)化。當(dāng)然,在結(jié)構(gòu)化之余,body、框架、模塊之間的命名如能以某種形式加以區(qū)別(我個(gè)人習(xí)慣是加不同前綴),會(huì)讓代碼更加清晰。
2、樣式文件的管理,也就是如何存儲(chǔ)網(wǎng)站的樣式文件。如果是一個(gè)很小的網(wǎng)站,把所有樣式存在一個(gè)文件中也是沒(méi)有問(wèn)題的。但大網(wǎng)站的CSS往往幾十上百k,全部存在一個(gè)文件里不但影響網(wǎng)頁(yè)加載,也不利于修改維護(hù)。如何分割CSS,需要事先做好規(guī)劃,無(wú)論是按欄目按功能還是按層級(jí),要根據(jù)自己網(wǎng)站的特點(diǎn)。
5、其他
傳誠(chéng)信期待大家繼續(xù)補(bǔ)充……
選擇我們,優(yōu)質(zhì)服務(wù),不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證
?(配送雙線獨(dú)立ip空間,國(guó)際A級(jí)BGP機(jī)房,99.5% 的主機(jī)在線時(shí)間)
2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
-----------------------------------------------------------------------------------------------------
我們的與眾不同之處:
????? 免費(fèi)網(wǎng)絡(luò)營(yíng)銷 顧問(wèn):我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營(yíng)銷顧問(wèn)服務(wù),您需要了解關(guān)于如何開(kāi)展網(wǎng)絡(luò)營(yíng)銷,電子商務(wù) ,網(wǎng)站設(shè)計(jì) 等的事宜,歡迎隨時(shí)聯(lián)系我們。
???? ?seo友好的網(wǎng)站管理系統(tǒng):除了優(yōu)質(zhì)的網(wǎng)站空間,網(wǎng)站管理系統(tǒng),和網(wǎng)站設(shè)計(jì) 外,我們的網(wǎng)站管理系統(tǒng)更是seo友好的,包括:自定義欄目名,Google Sitemap自動(dòng)生成,靜態(tài)頁(yè)面生成等等,讓您的網(wǎng)站。
???? ?免費(fèi)網(wǎng)絡(luò)營(yíng)銷培訓(xùn):如何更好的投放網(wǎng)絡(luò)廣告,如何提高網(wǎng)絡(luò)廣告的投資回報(bào),如何發(fā)帖子,
???? ?如何優(yōu)化網(wǎng)站,我們有豐富的經(jīng)驗(yàn)開(kāi)放給您!祝君成功!
聯(lián)系我們: 010-62199213?? 62122723-808 ? ? 賈先生
傳誠(chéng)信北京 網(wǎng)站建設(shè) 網(wǎng)站: saddlebargains.com ?點(diǎn)擊查看 經(jīng)典 網(wǎng)站案例 !
北京網(wǎng)站建設(shè) 2010年網(wǎng)站建設(shè)套餐及優(yōu)惠!
下面是我們從事這個(gè)網(wǎng)站建設(shè)行業(yè)多年的一些經(jīng)驗(yàn)總結(jié),希望拋磚引玉。1、必備工具其實(shí)web標(biāo)準(zhǔn)并不是很復(fù)雜的技術(shù),實(shí)現(xiàn)web標(biāo)準(zhǔn)的工具也很簡(jiǎn)單,......
新聞發(fā)布系統(tǒng)功能前臺(tái)具有新聞欄目自動(dòng)生成、瀏覽和查詢的功能。后臺(tái)具有新聞內(nèi)容的增、刪、改和管理員密碼修改功能,新聞內(nèi)容支持文本和圖象。平臺(tái)W......
基本上,企業(yè)網(wǎng)站建設(shè)制作時(shí),無(wú)論在網(wǎng)站的架構(gòu)、內(nèi)容或是圖文資料的呈現(xiàn),有三種層面的人應(yīng)該加以思考,分別是:企業(yè)本身企業(yè)是網(wǎng)站的所有人,也是網(wǎng)......
SI中文網(wǎng)站建站參考方案 一、 首頁(yè)(仿照dooshion.com這個(gè)網(wǎng)站的首頁(yè)) Flash新聞?wù)故?,小圖片+文字描述,點(diǎn)......
1.1 微信營(yíng)銷定位“天上人間休閑浴場(chǎng)”作為北京市領(lǐng)頭洗浴休閑品牌.秉承將更優(yōu)質(zhì)更完善更高雅的休閑體驗(yàn)、為娛樂(lè)之城貢獻(xiàn)綿薄之力的理念,微信無(wú)......
什么是適應(yīng)性網(wǎng)站?如何定義。自適應(yīng)或“響應(yīng)式”網(wǎng)站可適應(yīng)所有屏幕尺寸和所有分辨率。無(wú)論使用哪種設(shè)備,網(wǎng)站都將顯示并通過(guò)調(diào)整其格式來(lái)提供對(duì)相同......
1、企業(yè)外貿(mào)網(wǎng)站的整體色調(diào)要和企業(yè)形象全面吻合,我們見(jiàn)過(guò)很多的外貿(mào)網(wǎng)站格調(diào)和企業(yè)形象格調(diào)不合,用戶訪問(wèn)網(wǎng)站的時(shí)候往往會(huì)造成對(duì)你企業(yè)的形象思維......
網(wǎng)站設(shè)計(jì)是您想要考慮的最重要因素之一。如果網(wǎng)站設(shè)計(jì)不符合規(guī)劃或以任何方式給用戶帶來(lái)負(fù)面體驗(yàn),那么您將失去可能影響銷售和廣告收入的流量。 雖然......
橫版網(wǎng)站的設(shè)計(jì)手法,在近年來(lái)的網(wǎng)頁(yè)設(shè)計(jì)上越來(lái)越受歡迎,雖然此種設(shè)計(jì)方式并不一定適合每一種網(wǎng)站主題,不過(guò)此類的水平版面設(shè)計(jì)也可說(shuō)是提供了網(wǎng)頁(yè)設(shè)......
北京時(shí)間6月5日消息據(jù)國(guó)外媒體報(bào)道Web設(shè)計(jì)公司Nclud聯(lián)合創(chuàng)始人、品牌體驗(yàn)主管馬丁·林雷恩(Martin Ringlein)當(dāng)......
云計(jì)算的上升 作為專職網(wǎng)站建設(shè)者,我們都很熟悉網(wǎng)站托管服務(wù)商。一些很棒,一些就比較困難,但不管怎樣,每一個(gè)在線的網(wǎng)站都要求一定形式的托管。最......
您需要我們?yōu)槟峁┚W(wǎng)站建設(shè)一站式服務(wù)嗎?
請(qǐng)留下您的建站需求及聯(lián)系方式,我們將在24小時(shí)內(nèi)與您取得聯(lián)系。
或致電:010-62199213 13910505354
提交您的需求
建站咨詢電話
010-62199213
24小時(shí)業(yè)務(wù)經(jīng)理
13260067129(劉先生) / 13910505354(賈先生)