網(wǎng)站重構(gòu)與Web標(biāo)準(zhǔn)設(shè)計(jì)
網(wǎng)站重構(gòu) & Web標(biāo)準(zhǔn)設(shè)計(jì)（相關(guān)知識(shí)）
前言
網(wǎng)站重構(gòu)能夠?qū)崿F(xiàn)加快網(wǎng)頁解析的速度，實(shí)現(xiàn)信息跨平臺(tái)的可用性以及更加良好的用戶體驗(yàn)，網(wǎng)站重構(gòu)以高效開發(fā)與簡單維護(hù)降低服務(wù)器成本，最重要的是它便于改版，實(shí)現(xiàn)與未來兼容。
Web標(biāo)準(zhǔn)就是實(shí)現(xiàn)網(wǎng)站重構(gòu)的一種方法，所謂Web標(biāo)準(zhǔn), Web標(biāo)準(zhǔn)并不是指某一個(gè)單一的標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。一般指網(wǎng)站重構(gòu)采用基于XHTML語言的網(wǎng)站設(shè)計(jì)標(biāo)記語言，Web標(biāo)準(zhǔn)中典型的布局應(yīng)用模“DIV+CSS”。
優(yōu)秀網(wǎng)頁設(shè)計(jì)師
經(jīng)常有人會(huì)問做為一個(gè)優(yōu)秀網(wǎng)頁設(shè)計(jì)師要具備哪些方面的知識(shí)以及技能？
1.掌握一款良好的圖形圖形處理軟件（例如：Photoshop，F(xiàn)ireworks ，AI...）
2.掌握可視化編輯工具或者編輯器（例如：TopStyle，Dreamweaver ，EditPlus...）
3.掌握最基本的實(shí)質(zhì)性知識(shí)，也就是網(wǎng)頁的三層結(jié)構(gòu)Xhtml,CSS,Javascript(結(jié)構(gòu)，表現(xiàn)，行為)
4.掌握網(wǎng)站據(jù)有分析策劃的能力
5.掌握具有美術(shù)的一些基礎(chǔ)配色知識(shí)最起碼不要讓網(wǎng)頁的顏色太難看
6.掌握一款網(wǎng)絡(luò)動(dòng)畫軟件（例如Flash）
如果你可以達(dá)到以上的要求，可以說的上你算一個(gè)網(wǎng)頁設(shè)計(jì)師，不要認(rèn)為一個(gè)網(wǎng)頁設(shè)計(jì)師只會(huì)用PS做出一張圖片然后用PS直接分割另存為html頁面的就是網(wǎng)頁設(shè)計(jì)師，一個(gè)會(huì)用Dreamweaver可視化軟件做出一個(gè)垃圾網(wǎng)站（傳統(tǒng)的table+gif技術(shù)實(shí)現(xiàn)的網(wǎng)站）的就叫網(wǎng)頁設(shè)計(jì)師。
身為一個(gè)網(wǎng)頁設(shè)計(jì)師接觸的知識(shí)和技術(shù)是非常多的，掌握幾款我們開發(fā)效率提高的軟件固然很重要，但是最中要的并不是工具本身，而是我們學(xué)習(xí)工具駕馭工具的一種思想。
思想是工具的靈魂，就像我們的計(jì)算機(jī)軟件是計(jì)算機(jī)硬件的靈魂一樣，沒有了軟件，計(jì)算機(jī)的硬件即使再好也沒有任何作用，如同廢鐵，所以我們在學(xué)習(xí)的時(shí)候要明確我們的最終目是什么，我們要學(xué)的是這門技術(shù)的思想而不是去重視實(shí)現(xiàn)這門技術(shù)的一種應(yīng)用工具。當(dāng)然思想與工具都很重要，但是他們最大的區(qū)別在于，學(xué)會(huì)了思想我們可以選擇很多不同的工具來實(shí)現(xiàn)這門技術(shù)，例如我們用Dreamweaver，EditPlus，甚至記事本等都可以實(shí)現(xiàn)我們想要的技術(shù)，工具最大的作用在于可以提高我們的工作效率，這是工具最重要的作用。所以我們不要走錯(cuò)的方向。
例如我們?nèi)绻胩幚硪粡垐D片的時(shí)候我們?nèi)绻麤]有一些美術(shù)基礎(chǔ)我們怎么可能設(shè)計(jì)出好的作品呢，知識(shí)PS這個(gè)工具放在你的面前給你用，你會(huì)嗎，如果說一個(gè)人連RGB，CMYK，色彩的三個(gè)屬性：色相，飽和度，明暗度的話你還這么去用PS，天空是藍(lán)色的你非要搞成黑色，你覺得合適嗎？
例如你要做一個(gè)動(dòng)畫你連最基礎(chǔ)動(dòng)畫是如何產(chǎn)生的原理都不懂你要這么去制作動(dòng)畫呢，就是你做出來了，有會(huì)不什么效果呢。
由此可見思想的重要性，我們無論在學(xué)習(xí)什么，主要要掌握最核心的思想，如果沒有學(xué)好思想工具在你面前就是廢物，沒有任何作用，如果我們能掌握核心思想在去駕馭工具為我所用，這樣才能達(dá)到事半功倍的效果。
掌握學(xué)習(xí)的思想
學(xué)習(xí)是一種思想，一種不斷思考，一種不斷實(shí)踐，一種不斷創(chuàng)新的過程……
學(xué)習(xí)沒有捷徑，只有勤奮，努力，實(shí)踐，思考……
如何學(xué)習(xí)Web知識(shí)
學(xué)習(xí)任何一門技能的時(shí)候，首先要明確思想，只有明確了思想才能夠少有很多彎路，初學(xué)者學(xué)習(xí)Web標(biāo)準(zhǔn)，首先就要明確一點(diǎn)，到底什么是Web標(biāo)準(zhǔn)，如果錯(cuò)誤的理解了Web標(biāo)準(zhǔn)的思想，很難學(xué)好Web標(biāo)準(zhǔn)。
給初學(xué)者的建議：初學(xué)者很容易犯的錯(cuò)誤就是把Web標(biāo)準(zhǔn)理解為Div+CSS，以為DIV的作用就是簡單的替代表格去做表格以前做的事情，于是乎許多采用新技術(shù)的網(wǎng)站開始了DIV+CSS制作網(wǎng)頁，當(dāng)打開頁面代碼的時(shí)候，看到整個(gè)頁面基本都是采用了DIV標(biāo)簽，給每個(gè)DIV標(biāo)簽都指定一個(gè)class，這是對Web標(biāo)準(zhǔn)的一種濫用方式。Web標(biāo)準(zhǔn)的思想是實(shí)現(xiàn)結(jié)構(gòu)，表現(xiàn)，行為的分離，不只是簡單的把table換成DIV，因?yàn)閐iv+css只是應(yīng)用在網(wǎng)站的大塊不去上，并不是所有的元素都是用Div標(biāo)簽，嚴(yán)格的說法應(yīng)該是采用Xhtml+CSS對網(wǎng)站進(jìn)行重構(gòu)，最終制作出符合Web標(biāo)準(zhǔn)的網(wǎng)站，如果要學(xué)好web標(biāo)準(zhǔn)的思想，首先要做的就是拋棄傳統(tǒng)的表格布局思想。那么接下來我就會(huì)給大家先講思想課，讓大家更好的了解究竟什么是web標(biāo)準(zhǔn)的思想。
DIV+CSS不等于Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：
結(jié)構(gòu)（Structure）
表現(xiàn)（Presentation）
行為（Behavior）
對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3CDOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（EuropeanComputer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。
我們通過W3c技術(shù)架構(gòu)可以看到Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，我們在布局方面用到Xhtml+CSS，那麼有此可見DIV+CSS是根本不等于Web標(biāo)準(zhǔn)的。采用Xhtml+CSS對網(wǎng)站進(jìn)行制作，只是現(xiàn)階段一個(gè)良好的解決方案，當(dāng)然也有其他的一些技術(shù)。
W3C（World Wide Web Consortium）
W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個(gè)非贏利組織，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來定制。W3C會(huì)員（大約500名會(huì)員）包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團(tuán)體用戶、研究實(shí)驗(yàn)室、標(biāo)準(zhǔn)制定機(jī)構(gòu)和政府部門，一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達(dá)成共識(shí)。
Web標(biāo)準(zhǔn)組織（W3C）于1998年發(fā)起，目的是說服Netscape、Microsoft和其他瀏覽器生產(chǎn)商徹底支持標(biāo)準(zhǔn)。他采用從容進(jìn)行、堅(jiān)持和策略性的方法，最終使得瀏覽器生產(chǎn)商同意引進(jìn)一系列標(biāo)準(zhǔn)。通過共同的標(biāo)準(zhǔn)協(xié)同工作，是Web 向前發(fā)展必需的觀點(diǎn)。
我們了解了以上幾點(diǎn)是很重要的，現(xiàn)在我們就明白了我們是在學(xué)習(xí)標(biāo)準(zhǔn)，那么是在學(xué)習(xí)誰的標(biāo)準(zhǔn)呢，無可厚非我們是在學(xué)習(xí)W3C推薦的Web標(biāo)準(zhǔn)，而不是為了IE瀏覽器學(xué)的標(biāo)準(zhǔn)，注意是推薦，W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個(gè)非贏利組織，他沒有強(qiáng)迫你一定要使用，雖然是推薦標(biāo)準(zhǔn)，但是已經(jīng)成為了全世界公認(rèn)的標(biāo)準(zhǔn)，為什么呢，因?yàn)閣eb方面的技術(shù)離不開W3C，很多Web技術(shù)都是W3C研究出來的。
Netscape and Internet Explorer
早在1997年，有一個(gè)通用的慣例，Netscape瀏覽器使用Javascript，IE使用Jscript（一種類似于Javasrcipt的腳本語言）。Javasrcipt只能運(yùn)行在Netscape，而微軟的ActiveX和Jscript只能運(yùn)行在IE。只能為不同的瀏覽器采用不同的代碼去適應(yīng)，這些事情是為3.0版本瀏覽器做的，1997年下半年的時(shí)候，Netscape和IE都推出了4.0版本瀏覽器，他們各自吹噓自己的瀏覽器有強(qiáng)大的Dhtml（動(dòng)態(tài)的html），但他們的瀏覽器完全不兼容，更不用說不知名的瀏覽器了，而且Netscape和IE跟他們3.0的版本也無法兼容，想讓自己的網(wǎng)站在幾個(gè)不同版本的瀏覽器中同時(shí)使用的話就要做幾個(gè)不同的版本，每個(gè)功能都要做幾個(gè)不同的版本去適應(yīng)不同的瀏覽器，開發(fā)成本至少增加了25%；所以一些開發(fā)者限制他們的網(wǎng)站只適應(yīng)其中一個(gè)版本的瀏覽器。而且網(wǎng)站隨時(shí)面臨著過時(shí)的命運(yùn)和被淘汰的怪圈。
在Web傳統(tǒng)網(wǎng)站的舊時(shí)代，Web非?；靵y，許多東西都沒有真正意義上的一個(gè)標(biāo)準(zhǔn)，當(dāng)時(shí)的網(wǎng)景和IE的瀏覽器大戰(zhàn)就是個(gè)最好的例子，當(dāng)時(shí)的瀏覽器沒有統(tǒng)一的標(biāo)準(zhǔn)，大家都各有自己私有的標(biāo)準(zhǔn)，加上當(dāng)時(shí)的瀏覽器支持非常劣質(zhì)的CSS1.0，所以在當(dāng)時(shí)沒有一個(gè)有效的方法可以解決瀏覽器之間的兼容性問題，就是這個(gè)時(shí)候DavidSiegel利用Table和透明的GIF布局技術(shù)出現(xiàn)了，并引起了一片新的網(wǎng)站布局浪潮。也就是我們所說的傳統(tǒng)網(wǎng)站。
看了這些我想大家應(yīng)該了解為什么要遵循標(biāo)準(zhǔn)進(jìn)行開發(fā)了吧，我們的日常生活中也一樣例如電視機(jī)的大小都有標(biāo)準(zhǔn)，我們的銀行卡也有一定標(biāo)準(zhǔn)，如果世界都是沒有一個(gè)相對的標(biāo)準(zhǔn)的話會(huì)變成什么樣，這個(gè)大家去思考。
瀏覽器內(nèi)核
通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因。
主流瀏覽器內(nèi)核
Trident：IE瀏覽器使用的內(nèi)核,該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到目前的IE7。Trident實(shí)際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計(jì)的相當(dāng)成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器涌現(xiàn)（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。
Geckos： Netcape6開始采用的內(nèi)核，后來的Mozilla FireFox也采用了該內(nèi)核，Geckos的特點(diǎn)是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
Presto： 目前Opera采用的內(nèi)核，該內(nèi)核在2003年的Opera7中首次被使用，該款引擎的特點(diǎn)就是渲染速度的優(yōu)化達(dá)到了極致，也是目前公認(rèn)網(wǎng)頁瀏覽速度最快的瀏覽器內(nèi)核，然而代價(jià)是犧牲了網(wǎng)頁的兼容性。
Webkit：Safari瀏覽器使用的內(nèi)核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)的開發(fā)。所以Webkit也是自由軟件，同時(shí)開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器還是比較安全的瀏覽器。(Google的Chrome瀏覽器也是采用Webkit)
注意，犧牲了網(wǎng)頁的兼容性是說犧牲不好的網(wǎng)頁兼容，因?yàn)镺pera瀏覽器以開始就對標(biāo)準(zhǔn)支持的非常良好，所以對寫法要求比較嚴(yán)格，那些不符合標(biāo)準(zhǔn)的網(wǎng)站在Opera下自然也就不能運(yùn)行。
微軟屬下的MSN網(wǎng)站曾被指排擠Opera用者，迫使他們改用微軟產(chǎn)品。
2001年10月，在WindowsXP推出后不久，MSN即對主頁作出重大更新，Opera用者指無法進(jìn)入MSN主頁，微軟指“該主頁轉(zhuǎn)用了XHTML標(biāo)準(zhǔn)，Opera無法進(jìn)入是因?yàn)樗恢С諼HTML”，但Opera方面則反駁，指Opera瀏覽器更切合標(biāo)準(zhǔn)，并以W3CValidator證明，MSN的主頁并非使用正確的編碼，要求微軟“在指責(zé)其他人以前，請先看看自己是否尊重公開標(biāo)準(zhǔn)”，并在網(wǎng)站有關(guān)的新聞稿頁面，另制作了一個(gè)標(biāo)準(zhǔn) XHTML版本來“還擊”，IE6無法正確顯示，而Netscape6和Opera則可以。微軟有見于此，便停止排擠Opera用者，但隨后微軟也有在其主頁上“做手腳”，刻意對Opera及MozillaFirefox等用者使用錯(cuò)誤的CSS，令MSN無法在其他瀏覽器上顯示
現(xiàn)代瀏覽器
瀏覽器兼容性
下面我們來看一下瀏覽器對css的兼容表
（弱弱的說下，這上面的opera不是最新版本，opera粉絲們不要磚頭砸我 ）
通過以上的圖片我們可以大概看到各個(gè)瀏覽器對CSS支持的程度，可見IE瀏覽器的性能是最差的，當(dāng)然IE也在慢慢向標(biāo)準(zhǔn)靠攏，最起碼IE7要比IE6和IE5好很多，有很多朋友會(huì)遇到一個(gè)問題，為什么我的頁面效果在IE下正常了，在FF和OP其他瀏覽器中都不正常了，很簡單，那就是你沒有符合標(biāo)準(zhǔn)，你首先選擇一個(gè)對標(biāo)準(zhǔn)本身就支持不好的瀏覽器，我們試著想一下，用一個(gè)對標(biāo)準(zhǔn)支持不好的瀏覽器開發(fā)標(biāo)準(zhǔn)，最終的結(jié)果就是在不標(biāo)準(zhǔn)的IE瀏覽器中正常了，其他符合Web標(biāo)準(zhǔn)對CSS支持良好的瀏覽器都不正常了，這種思路本身就是錯(cuò)誤的，所以在我們開發(fā)的時(shí)候首先要選擇一款符合標(biāo)準(zhǔn)的瀏覽器，例如firefox,opera,safari,ie7(ie瀏覽器在css支持上是這些瀏覽器中最差的).正常呢我們最起碼真確認(rèn)我們做的是符合標(biāo)準(zhǔn)的，最后我們在通過一些辦法去修復(fù)那些對標(biāo)準(zhǔn)支持不好的瀏覽器IE6,這樣最終才能做到兼容的效果。
關(guān)于CSS hack
相信大多數(shù)朋友為了解決瀏覽器兼容的問題，首先想到了css hack，很多css技術(shù)網(wǎng)站也在介紹csshack，這里我要提醒大家，我們做為只是了解下就可以，沒有必要深入，為什么呢，我來簡單說明下，現(xiàn)在瀏覽器基本對標(biāo)準(zhǔn)支持都非常好了，我們只要注意文檔的良好結(jié)構(gòu)，基本上可以1個(gè)csshack都不去使用，因?yàn)槲覀儾恍枰タ紤]ie5了，ie6雖然說對css支持不是很好，但是他畢竟支持css2，有些地方雖然不正確但是我們可以通過一些技巧對他進(jìn)行修復(fù)我們可以用ie特有的
<!--[if IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
條件注釋語句對ie6進(jìn)行修復(fù)，還有一些csshack告訴你如何修復(fù)mac版本的ie5的bug，這些都沒有必要了，因?yàn)閕e在mac機(jī)器上早就停止開發(fā)了，我們要了解技術(shù)是不斷更新的，以前流行的css hack在今天由于瀏覽器對標(biāo)準(zhǔn)支持良好我們完全可以拋棄了，就連瀏覽器官方都推薦大家不要去使用css hack。
瀏覽器的一些看法
很多人也在討論關(guān)于firefox和其他一些瀏覽器的問題，說這些瀏覽器很垃圾很不好，在ie下正常的效果，在firefox那是因?yàn)槟銇y用的web標(biāo)準(zhǔn)，是你的問題不是瀏覽器的問題，那是因?yàn)槟隳胕e錯(cuò)誤的bug理解成對的，把本身對web標(biāo)準(zhǔn)支持好的瀏覽器當(dāng)成錯(cuò)的，更有寫人說了Firefox用的人不到1%或這10%，我們不需要做管他們，做為一個(gè)設(shè)計(jì)師和開發(fā)人員，我只能說你說的話非常不負(fù)責(zé)，你可以去跑到你老板哪里說老板我們1%-10%的潛在用戶可以不要了好嗎，你的老板會(huì)笑這跟你說：行，不就百分之10%，不要就不要了。如果可以你就可以不考慮了，再說了現(xiàn)在firefox也不至10%吧，我以自己的網(wǎng)站為例，2008-06-17到2008-06-30用firefox訪問我網(wǎng)站的用戶占了21%，7月分到現(xiàn)在是占有了19%，有時(shí)間聽別人說不如自己去測試下就清楚了，不要把自己的能力不足找一些理由說瀏覽器有問題所以我們不要支持，當(dāng)然ie也是用的瀏覽器，因?yàn)樗容^流行所以bug會(huì)很快被找出來，如果是普通用戶的話，他們要的是服務(wù)，選擇什么樣的瀏覽器無所謂只要能達(dá)到我的要求，我們不會(huì)去管瀏覽器是什么東西，國內(nèi)的許國網(wǎng)站不支持firefox，opera以及其他的瀏覽器，那不是其他瀏覽器的問題，那是開發(fā)人員的問題，國外基本都支持符合標(biāo)準(zhǔn)的瀏覽器，做為開發(fā)人員如果說其他的瀏覽器不好，那他真的就是流氓了，還有要說明一點(diǎn)許多人用的遨游，tt，世界之窗那不算是瀏覽器，那只是ie瀏覽器的皮膚和外加一些插件調(diào)用用ie的內(nèi)核，沒有ie這些都用不了，國人目前還沒有自己的瀏覽器，ie7現(xiàn)在也越來越標(biāo)準(zhǔn)了，但是還是沒有完全支持標(biāo)準(zhǔn)，希望以后會(huì)越來越好。
希望我的這篇文章可以給大家?guī)韼椭蠹矣X得有問題的地方可以隨時(shí)跟我交流，多多支持標(biāo)準(zhǔn)瀏覽器！??！
網(wǎng)站重構(gòu)能夠?qū)崿F(xiàn)加快網(wǎng)頁解析的速度，實(shí)現(xiàn)信息跨平臺(tái)的可用性以及更加良好的用戶體驗(yàn)，網(wǎng)站重構(gòu)以高效開發(fā)與簡單維護(hù)降低服務(wù)器成本，最重要的是它便于改版，實(shí)現(xiàn)與未來兼容。
Web標(biāo)準(zhǔn)就是實(shí)現(xiàn)網(wǎng)站重構(gòu)的一種方法，所謂Web標(biāo)準(zhǔn), Web標(biāo)準(zhǔn)并不是指某一個(gè)單一的標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。一般指網(wǎng)站重構(gòu)采用基于XHTML語言的網(wǎng)站設(shè)計(jì)標(biāo)記語言，Web標(biāo)準(zhǔn)中典型的布局應(yīng)用模“DIV+CSS”。
優(yōu)秀網(wǎng)頁設(shè)計(jì)師
經(jīng)常有人會(huì)問做為一個(gè)優(yōu)秀網(wǎng)頁設(shè)計(jì)師要具備哪些方面的知識(shí)以及技能？
1.掌握一款良好的圖形圖形處理軟件（例如：Photoshop，F(xiàn)ireworks ，AI...）
2.掌握可視化編輯工具或者編輯器（例如：TopStyle，Dreamweaver ，EditPlus...）
3.掌握最基本的實(shí)質(zhì)性知識(shí)，也就是網(wǎng)頁的三層結(jié)構(gòu)Xhtml,CSS,Javascript(結(jié)構(gòu)，表現(xiàn)，行為)
4.掌握網(wǎng)站據(jù)有分析策劃的能力
5.掌握具有美術(shù)的一些基礎(chǔ)配色知識(shí)最起碼不要讓網(wǎng)頁的顏色太難看
6.掌握一款網(wǎng)絡(luò)動(dòng)畫軟件（例如Flash）
如果你可以達(dá)到以上的要求，可以說的上你算一個(gè)網(wǎng)頁設(shè)計(jì)師，不要認(rèn)為一個(gè)網(wǎng)頁設(shè)計(jì)師只會(huì)用PS做出一張圖片然后用PS直接分割另存為html頁面的就是網(wǎng)頁設(shè)計(jì)師，一個(gè)會(huì)用Dreamweaver可視化軟件做出一個(gè)垃圾網(wǎng)站（傳統(tǒng)的table+gif技術(shù)實(shí)現(xiàn)的網(wǎng)站）的就叫網(wǎng)頁設(shè)計(jì)師。
身為一個(gè)網(wǎng)頁設(shè)計(jì)師接觸的知識(shí)和技術(shù)是非常多的，掌握幾款我們開發(fā)效率提高的軟件固然很重要，但是最中要的并不是工具本身，而是我們學(xué)習(xí)工具駕馭工具的一種思想。
思想是工具的靈魂，就像我們的計(jì)算機(jī)軟件是計(jì)算機(jī)硬件的靈魂一樣，沒有了軟件，計(jì)算機(jī)的硬件即使再好也沒有任何作用，如同廢鐵，所以我們在學(xué)習(xí)的時(shí)候要明確我們的最終目是什么，我們要學(xué)的是這門技術(shù)的思想而不是去重視實(shí)現(xiàn)這門技術(shù)的一種應(yīng)用工具。當(dāng)然思想與工具都很重要，但是他們最大的區(qū)別在于，學(xué)會(huì)了思想我們可以選擇很多不同的工具來實(shí)現(xiàn)這門技術(shù)，例如我們用Dreamweaver，EditPlus，甚至記事本等都可以實(shí)現(xiàn)我們想要的技術(shù)，工具最大的作用在于可以提高我們的工作效率，這是工具最重要的作用。所以我們不要走錯(cuò)的方向。
例如我們?nèi)绻胩幚硪粡垐D片的時(shí)候我們?nèi)绻麤]有一些美術(shù)基礎(chǔ)我們怎么可能設(shè)計(jì)出好的作品呢，知識(shí)PS這個(gè)工具放在你的面前給你用，你會(huì)嗎，如果說一個(gè)人連RGB，CMYK，色彩的三個(gè)屬性：色相，飽和度，明暗度的話你還這么去用PS，天空是藍(lán)色的你非要搞成黑色，你覺得合適嗎？
例如你要做一個(gè)動(dòng)畫你連最基礎(chǔ)動(dòng)畫是如何產(chǎn)生的原理都不懂你要這么去制作動(dòng)畫呢，就是你做出來了，有會(huì)不什么效果呢。
由此可見思想的重要性，我們無論在學(xué)習(xí)什么，主要要掌握最核心的思想，如果沒有學(xué)好思想工具在你面前就是廢物，沒有任何作用，如果我們能掌握核心思想在去駕馭工具為我所用，這樣才能達(dá)到事半功倍的效果。
掌握學(xué)習(xí)的思想
學(xué)習(xí)是一種思想，一種不斷思考，一種不斷實(shí)踐，一種不斷創(chuàng)新的過程……
學(xué)習(xí)沒有捷徑，只有勤奮，努力，實(shí)踐，思考……
如何學(xué)習(xí)Web知識(shí)
學(xué)習(xí)任何一門技能的時(shí)候，首先要明確思想，只有明確了思想才能夠少有很多彎路，初學(xué)者學(xué)習(xí)Web標(biāo)準(zhǔn)，首先就要明確一點(diǎn)，到底什么是Web標(biāo)準(zhǔn)，如果錯(cuò)誤的理解了Web標(biāo)準(zhǔn)的思想，很難學(xué)好Web標(biāo)準(zhǔn)。
給初學(xué)者的建議：初學(xué)者很容易犯的錯(cuò)誤就是把Web標(biāo)準(zhǔn)理解為Div+CSS，以為DIV的作用就是簡單的替代表格去做表格以前做的事情，于是乎許多采用新技術(shù)的網(wǎng)站開始了DIV+CSS制作網(wǎng)頁，當(dāng)打開頁面代碼的時(shí)候，看到整個(gè)頁面基本都是采用了DIV標(biāo)簽，給每個(gè)DIV標(biāo)簽都指定一個(gè)class，這是對Web標(biāo)準(zhǔn)的一種濫用方式。Web標(biāo)準(zhǔn)的思想是實(shí)現(xiàn)結(jié)構(gòu)，表現(xiàn)，行為的分離，不只是簡單的把table換成DIV，因?yàn)閐iv+css只是應(yīng)用在網(wǎng)站的大塊不去上，并不是所有的元素都是用Div標(biāo)簽，嚴(yán)格的說法應(yīng)該是采用Xhtml+CSS對網(wǎng)站進(jìn)行重構(gòu)，最終制作出符合Web標(biāo)準(zhǔn)的網(wǎng)站，如果要學(xué)好web標(biāo)準(zhǔn)的思想，首先要做的就是拋棄傳統(tǒng)的表格布局思想。那么接下來我就會(huì)給大家先講思想課，讓大家更好的了解究竟什么是web標(biāo)準(zhǔn)的思想。
DIV+CSS不等于Web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：
結(jié)構(gòu)（Structure）
表現(xiàn)（Presentation）
行為（Behavior）
對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3CDOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（EuropeanComputer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。
我們通過W3c技術(shù)架構(gòu)可以看到Web標(biāo)準(zhǔn)是一系列標(biāo)準(zhǔn)的集合，我們在布局方面用到Xhtml+CSS，那麼有此可見DIV+CSS是根本不等于Web標(biāo)準(zhǔn)的。采用Xhtml+CSS對網(wǎng)站進(jìn)行制作，只是現(xiàn)階段一個(gè)良好的解決方案，當(dāng)然也有其他的一些技術(shù)。
W3C（World Wide Web Consortium）
W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個(gè)非贏利組織，像HTML、XHTML、CSS、XML的標(biāo)準(zhǔn)就是由W3C來定制。W3C會(huì)員（大約500名會(huì)員）包括生產(chǎn)技術(shù)產(chǎn)品及服務(wù)的廠商、內(nèi)容供應(yīng)商、團(tuán)體用戶、研究實(shí)驗(yàn)室、標(biāo)準(zhǔn)制定機(jī)構(gòu)和政府部門，一起協(xié)同工作，致力在萬維網(wǎng)發(fā)展方向上達(dá)成共識(shí)。
Web標(biāo)準(zhǔn)組織（W3C）于1998年發(fā)起，目的是說服Netscape、Microsoft和其他瀏覽器生產(chǎn)商徹底支持標(biāo)準(zhǔn)。他采用從容進(jìn)行、堅(jiān)持和策略性的方法，最終使得瀏覽器生產(chǎn)商同意引進(jìn)一系列標(biāo)準(zhǔn)。通過共同的標(biāo)準(zhǔn)協(xié)同工作，是Web 向前發(fā)展必需的觀點(diǎn)。
我們了解了以上幾點(diǎn)是很重要的，現(xiàn)在我們就明白了我們是在學(xué)習(xí)標(biāo)準(zhǔn)，那么是在學(xué)習(xí)誰的標(biāo)準(zhǔn)呢，無可厚非我們是在學(xué)習(xí)W3C推薦的Web標(biāo)準(zhǔn)，而不是為了IE瀏覽器學(xué)的標(biāo)準(zhǔn)，注意是推薦，W3C組織是對網(wǎng)絡(luò)標(biāo)準(zhǔn)制定的一個(gè)非贏利組織，他沒有強(qiáng)迫你一定要使用，雖然是推薦標(biāo)準(zhǔn)，但是已經(jīng)成為了全世界公認(rèn)的標(biāo)準(zhǔn)，為什么呢，因?yàn)閣eb方面的技術(shù)離不開W3C，很多Web技術(shù)都是W3C研究出來的。
Netscape and Internet Explorer
早在1997年，有一個(gè)通用的慣例，Netscape瀏覽器使用Javascript，IE使用Jscript（一種類似于Javasrcipt的腳本語言）。Javasrcipt只能運(yùn)行在Netscape，而微軟的ActiveX和Jscript只能運(yùn)行在IE。只能為不同的瀏覽器采用不同的代碼去適應(yīng)，這些事情是為3.0版本瀏覽器做的，1997年下半年的時(shí)候，Netscape和IE都推出了4.0版本瀏覽器，他們各自吹噓自己的瀏覽器有強(qiáng)大的Dhtml（動(dòng)態(tài)的html），但他們的瀏覽器完全不兼容，更不用說不知名的瀏覽器了，而且Netscape和IE跟他們3.0的版本也無法兼容，想讓自己的網(wǎng)站在幾個(gè)不同版本的瀏覽器中同時(shí)使用的話就要做幾個(gè)不同的版本，每個(gè)功能都要做幾個(gè)不同的版本去適應(yīng)不同的瀏覽器，開發(fā)成本至少增加了25%；所以一些開發(fā)者限制他們的網(wǎng)站只適應(yīng)其中一個(gè)版本的瀏覽器。而且網(wǎng)站隨時(shí)面臨著過時(shí)的命運(yùn)和被淘汰的怪圈。
在Web傳統(tǒng)網(wǎng)站的舊時(shí)代，Web非?；靵y，許多東西都沒有真正意義上的一個(gè)標(biāo)準(zhǔn)，當(dāng)時(shí)的網(wǎng)景和IE的瀏覽器大戰(zhàn)就是個(gè)最好的例子，當(dāng)時(shí)的瀏覽器沒有統(tǒng)一的標(biāo)準(zhǔn)，大家都各有自己私有的標(biāo)準(zhǔn)，加上當(dāng)時(shí)的瀏覽器支持非常劣質(zhì)的CSS1.0，所以在當(dāng)時(shí)沒有一個(gè)有效的方法可以解決瀏覽器之間的兼容性問題，就是這個(gè)時(shí)候DavidSiegel利用Table和透明的GIF布局技術(shù)出現(xiàn)了，并引起了一片新的網(wǎng)站布局浪潮。也就是我們所說的傳統(tǒng)網(wǎng)站。
看了這些我想大家應(yīng)該了解為什么要遵循標(biāo)準(zhǔn)進(jìn)行開發(fā)了吧，我們的日常生活中也一樣例如電視機(jī)的大小都有標(biāo)準(zhǔn)，我們的銀行卡也有一定標(biāo)準(zhǔn)，如果世界都是沒有一個(gè)相對的標(biāo)準(zhǔn)的話會(huì)變成什么樣，這個(gè)大家去思考。
瀏覽器內(nèi)核
通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因。
主流瀏覽器內(nèi)核
Trident：IE瀏覽器使用的內(nèi)核,該內(nèi)核程序在1997年的IE4中首次被采用，是微軟在Mosaic代碼的基礎(chǔ)之上修改而來的，并沿用到目前的IE7。Trident實(shí)際上是一款開放的內(nèi)核，其接口內(nèi)核設(shè)計(jì)的相當(dāng)成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器涌現(xiàn)（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。
Geckos： Netcape6開始采用的內(nèi)核，后來的Mozilla FireFox也采用了該內(nèi)核，Geckos的特點(diǎn)是代碼完全公開，因此，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
Presto： 目前Opera采用的內(nèi)核，該內(nèi)核在2003年的Opera7中首次被使用，該款引擎的特點(diǎn)就是渲染速度的優(yōu)化達(dá)到了極致，也是目前公認(rèn)網(wǎng)頁瀏覽速度最快的瀏覽器內(nèi)核，然而代價(jià)是犧牲了網(wǎng)頁的兼容性。
Webkit：Safari瀏覽器使用的內(nèi)核。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)的開發(fā)。所以Webkit也是自由軟件，同時(shí)開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器還是比較安全的瀏覽器。(Google的Chrome瀏覽器也是采用Webkit)
注意，犧牲了網(wǎng)頁的兼容性是說犧牲不好的網(wǎng)頁兼容，因?yàn)镺pera瀏覽器以開始就對標(biāo)準(zhǔn)支持的非常良好，所以對寫法要求比較嚴(yán)格，那些不符合標(biāo)準(zhǔn)的網(wǎng)站在Opera下自然也就不能運(yùn)行。
微軟屬下的MSN網(wǎng)站曾被指排擠Opera用者，迫使他們改用微軟產(chǎn)品。
2001年10月，在WindowsXP推出后不久，MSN即對主頁作出重大更新，Opera用者指無法進(jìn)入MSN主頁，微軟指“該主頁轉(zhuǎn)用了XHTML標(biāo)準(zhǔn)，Opera無法進(jìn)入是因?yàn)樗恢С諼HTML”，但Opera方面則反駁，指Opera瀏覽器更切合標(biāo)準(zhǔn)，并以W3CValidator證明，MSN的主頁并非使用正確的編碼，要求微軟“在指責(zé)其他人以前，請先看看自己是否尊重公開標(biāo)準(zhǔn)”，并在網(wǎng)站有關(guān)的新聞稿頁面，另制作了一個(gè)標(biāo)準(zhǔn) XHTML版本來“還擊”，IE6無法正確顯示，而Netscape6和Opera則可以。微軟有見于此，便停止排擠Opera用者，但隨后微軟也有在其主頁上“做手腳”，刻意對Opera及MozillaFirefox等用者使用錯(cuò)誤的CSS，令MSN無法在其他瀏覽器上顯示
現(xiàn)代瀏覽器
瀏覽器兼容性
下面我們來看一下瀏覽器對css的兼容表
（弱弱的說下，這上面的opera不是最新版本，opera粉絲們不要磚頭砸我 ）
通過以上的圖片我們可以大概看到各個(gè)瀏覽器對CSS支持的程度，可見IE瀏覽器的性能是最差的，當(dāng)然IE也在慢慢向標(biāo)準(zhǔn)靠攏，最起碼IE7要比IE6和IE5好很多，有很多朋友會(huì)遇到一個(gè)問題，為什么我的頁面效果在IE下正常了，在FF和OP其他瀏覽器中都不正常了，很簡單，那就是你沒有符合標(biāo)準(zhǔn)，你首先選擇一個(gè)對標(biāo)準(zhǔn)本身就支持不好的瀏覽器，我們試著想一下，用一個(gè)對標(biāo)準(zhǔn)支持不好的瀏覽器開發(fā)標(biāo)準(zhǔn)，最終的結(jié)果就是在不標(biāo)準(zhǔn)的IE瀏覽器中正常了，其他符合Web標(biāo)準(zhǔn)對CSS支持良好的瀏覽器都不正常了，這種思路本身就是錯(cuò)誤的，所以在我們開發(fā)的時(shí)候首先要選擇一款符合標(biāo)準(zhǔn)的瀏覽器，例如firefox,opera,safari,ie7(ie瀏覽器在css支持上是這些瀏覽器中最差的).正常呢我們最起碼真確認(rèn)我們做的是符合標(biāo)準(zhǔn)的，最后我們在通過一些辦法去修復(fù)那些對標(biāo)準(zhǔn)支持不好的瀏覽器IE6,這樣最終才能做到兼容的效果。
關(guān)于CSS hack
相信大多數(shù)朋友為了解決瀏覽器兼容的問題，首先想到了css hack，很多css技術(shù)網(wǎng)站也在介紹csshack，這里我要提醒大家，我們做為只是了解下就可以，沒有必要深入，為什么呢，我來簡單說明下，現(xiàn)在瀏覽器基本對標(biāo)準(zhǔn)支持都非常好了，我們只要注意文檔的良好結(jié)構(gòu)，基本上可以1個(gè)csshack都不去使用，因?yàn)槲覀儾恍枰タ紤]ie5了，ie6雖然說對css支持不是很好，但是他畢竟支持css2，有些地方雖然不正確但是我們可以通過一些技巧對他進(jìn)行修復(fù)我們可以用ie特有的
<!--[if IE 6]>
<link href="css/layoutIE6.css" rel="stylesheet" type="text/css" />
<![endif]-->
條件注釋語句對ie6進(jìn)行修復(fù)，還有一些csshack告訴你如何修復(fù)mac版本的ie5的bug，這些都沒有必要了，因?yàn)閕e在mac機(jī)器上早就停止開發(fā)了，我們要了解技術(shù)是不斷更新的，以前流行的css hack在今天由于瀏覽器對標(biāo)準(zhǔn)支持良好我們完全可以拋棄了，就連瀏覽器官方都推薦大家不要去使用css hack。
瀏覽器的一些看法
很多人也在討論關(guān)于firefox和其他一些瀏覽器的問題，說這些瀏覽器很垃圾很不好，在ie下正常的效果，在firefox那是因?yàn)槟銇y用的web標(biāo)準(zhǔn)，是你的問題不是瀏覽器的問題，那是因?yàn)槟隳胕e錯(cuò)誤的bug理解成對的，把本身對web標(biāo)準(zhǔn)支持好的瀏覽器當(dāng)成錯(cuò)的，更有寫人說了Firefox用的人不到1%或這10%，我們不需要做管他們，做為一個(gè)設(shè)計(jì)師和開發(fā)人員，我只能說你說的話非常不負(fù)責(zé)，你可以去跑到你老板哪里說老板我們1%-10%的潛在用戶可以不要了好嗎，你的老板會(huì)笑這跟你說：行，不就百分之10%，不要就不要了。如果可以你就可以不考慮了，再說了現(xiàn)在firefox也不至10%吧，我以自己的網(wǎng)站為例，2008-06-17到2008-06-30用firefox訪問我網(wǎng)站的用戶占了21%，7月分到現(xiàn)在是占有了19%，有時(shí)間聽別人說不如自己去測試下就清楚了，不要把自己的能力不足找一些理由說瀏覽器有問題所以我們不要支持，當(dāng)然ie也是用的瀏覽器，因?yàn)樗容^流行所以bug會(huì)很快被找出來，如果是普通用戶的話，他們要的是服務(wù)，選擇什么樣的瀏覽器無所謂只要能達(dá)到我的要求，我們不會(huì)去管瀏覽器是什么東西，國內(nèi)的許國網(wǎng)站不支持firefox，opera以及其他的瀏覽器，那不是其他瀏覽器的問題，那是開發(fā)人員的問題，國外基本都支持符合標(biāo)準(zhǔn)的瀏覽器，做為開發(fā)人員如果說其他的瀏覽器不好，那他真的就是流氓了，還有要說明一點(diǎn)許多人用的遨游，tt，世界之窗那不算是瀏覽器，那只是ie瀏覽器的皮膚和外加一些插件調(diào)用用ie的內(nèi)核，沒有ie這些都用不了，國人目前還沒有自己的瀏覽器，ie7現(xiàn)在也越來越標(biāo)準(zhǔn)了，但是還是沒有完全支持標(biāo)準(zhǔn)，希望以后會(huì)越來越好。
希望我的這篇文章可以給大家?guī)韼椭蠹矣X得有問題的地方可以隨時(shí)跟我交流，多多支持標(biāo)準(zhǔn)瀏覽器！??！
