html 和 javascript、css 語(yǔ)言PHOTOSHOP和網(wǎng)頁(yè)制作軟件Dreamweaver、還有Flash 、Firewokks、FrontPage等。動(dòng)態(tài)網(wǎng)頁(yè)要涉及的多媒體知識(shí)，涉及到的多媒體軟件會(huì)。

一、引導(dǎo)用戶進(jìn)行下一步操作　　網(wǎng)站建立好不是為了讓用戶漫無(wú)目的的瀏覽，而是要引導(dǎo)用戶最終訪問(wèn)網(wǎng)站的目標(biāo)頁(yè)面，以淘寶客網(wǎng)站為例，最終目的是使用戶點(diǎn)擊商品鏈接進(jìn)入淘寶店鋪，那么就要在合理的位置出現(xiàn)“點(diǎn)擊查看詳細(xì)”、“點(diǎn)擊進(jìn)行購(gòu)買(mǎi)”的提示信息，在文字鏈接上當(dāng)鼠標(biāo)移上去時(shí)也要彈出提示“點(diǎn)擊查看詳細(xì)”的字樣，告訴用戶這里是可以點(diǎn)擊的，在產(chǎn)品內(nèi)容頁(yè)旁邊要列出推薦出產(chǎn)品或是相關(guān)產(chǎn)品，引導(dǎo)用戶瀏覽的目標(biāo)頁(yè)面信息。制作頁(yè)面時(shí)要考慮，在哪些地方用戶可能會(huì)要想看更詳細(xì)的信息，或是會(huì)產(chǎn)生購(gòu)買(mǎi)的行為，在這些地方都要出現(xiàn)明確的引導(dǎo)kama提示?！　《?、導(dǎo)航系統(tǒng)不要使用flash或是js等不利于搜索引擎爬行的方式　　很多網(wǎng)站為了追求效果而使用flash、圖片等來(lái)設(shè)計(jì)導(dǎo)航菜單，這些方式雖然視覺(jué)效果很棒，但是對(duì)于網(wǎng)站優(yōu)化來(lái)說(shuō)是非常不利的，導(dǎo)航系統(tǒng)是有效幫助搜索引擎蜘蛛順利爬行整個(gè)網(wǎng)站頁(yè)面的有利通道，如果在這個(gè)地方設(shè)置障礙，會(huì)直接影響網(wǎng)站的優(yōu)化?！　∪⒕W(wǎng)站地圖的設(shè)計(jì)　　網(wǎng)站地圖可以幫助用戶快速了解網(wǎng)站內(nèi)容，幫助搜索引擎順利爬行到網(wǎng)站主要頁(yè)面，如果是一個(gè)中小型的網(wǎng)站建議在網(wǎng)站地圖上可以讀取出全部的內(nèi)容頁(yè)鏈接，這樣每更新一篇文章，搜索引擎蜘蛛就可以快速的抓取到，大大提高網(wǎng)站頁(yè)面的收錄量，如果是規(guī)模較大的網(wǎng)站，也要將重要欄目的內(nèi)容頁(yè)讀取出來(lái)?！?四、如何讓用戶時(shí)刻清晰的知道自己正處在網(wǎng)站的哪個(gè)位置　　要做到這一點(diǎn)，需要良好的面包屑導(dǎo)航和主導(dǎo)航(也就是頁(yè)面頂部導(dǎo)航)系統(tǒng)一起來(lái)完成，主導(dǎo)航中當(dāng)前分類應(yīng)該是高亮來(lái)顯示在主導(dǎo)航中l(wèi)ist1這個(gè)欄目名應(yīng)是高亮顯示的，面包屑導(dǎo)航應(yīng)該是這樣：首頁(yè) > list1 > 內(nèi)容標(biāo)題,這里的內(nèi)容標(biāo)題的顏色也是有區(qū)分的，這樣無(wú)論用戶從哪里頁(yè)面進(jìn)來(lái)，都會(huì)很清晰的知道自己正處于網(wǎng)站中的哪個(gè)位置?，F(xiàn)在很多CMS系統(tǒng)在內(nèi)容頁(yè)面包屑導(dǎo)航處都是只讀取到了欄目名，沒(méi)有讀取出內(nèi)容頁(yè)標(biāo)題，建議自行修該一下程序，將內(nèi)容頁(yè)標(biāo)題讀取出來(lái)，這樣做不僅能提高網(wǎng)站的用戶體驗(yàn)，還非常有利于內(nèi)容頁(yè)關(guān)鍵詞的優(yōu)化?！　∥?、面包屑導(dǎo)航要設(shè)計(jì)的簡(jiǎn)潔、易于識(shí)別　　面包屑導(dǎo)航是幫助用戶判斷當(dāng)前位置的最好方法，所以一定要設(shè)計(jì)的易于識(shí)別，可以通過(guò)字體顏色改變、字體加粗、字號(hào)加大等方式與頁(yè)面中的其他文字區(qū)分出來(lái)，不要在這里設(shè)計(jì)太多花哨的東西，有一些網(wǎng)站把面包屑導(dǎo)航設(shè)計(jì)在了欄目右邊，或是獨(dú)出心裁設(shè)計(jì)到了內(nèi)容頁(yè)里面，這些都不是好的方式，就是簡(jiǎn)簡(jiǎn)單單，能使人一目了然知道自己處在哪個(gè)位置就可以了。

下面我們就來(lái)看一看詳細(xì)的介紹。 　　第一步：網(wǎng)站的規(guī)劃與設(shè)計(jì) 　　電子商務(wù)網(wǎng)站是個(gè)較復(fù)雜的系統(tǒng)，一開(kāi)始就要想好需要有的功能，網(wǎng)站的規(guī)劃也是建所有網(wǎng)站都需要做的事情，在規(guī)劃設(shè)計(jì)中需要對(duì)網(wǎng)站進(jìn)行整體的分析，明確網(wǎng)站的建設(shè)目標(biāo)，確定網(wǎng)站的訪問(wèn)對(duì)象，網(wǎng)站提供的內(nèi)容與服務(wù)，網(wǎng)站的域名，logo，網(wǎng)站風(fēng)格和網(wǎng)站目錄分類等內(nèi)容，這一步也是網(wǎng)站建設(shè)成功的前提，因?yàn)樗械慕ㄔO(shè)步驟都是按規(guī)劃設(shè)計(jì)進(jìn)行實(shí)施的。 　　第二步：站點(diǎn)的建設(shè) 　　網(wǎng)站規(guī)劃設(shè)計(jì)以后，就開(kāi)始進(jìn)入網(wǎng)站的建設(shè)階段，這一階段主要有域名注冊(cè)，網(wǎng)站配置，網(wǎng)頁(yè)制作和網(wǎng)站測(cè)試的四個(gè)部分。除了網(wǎng)站測(cè)試，需要在其他三項(xiàng)完成之后才能進(jìn)行之外，域名注冊(cè)，網(wǎng)站配置和網(wǎng)頁(yè)制作相對(duì)獨(dú)立，可以同時(shí)進(jìn)行。 　　第三步：網(wǎng)站發(fā)布 　　等建設(shè)完成之后，網(wǎng)站就可以在因特網(wǎng)中發(fā)布，正式上線之后，也就是用戶可以通過(guò)域名直接對(duì)我的網(wǎng)站進(jìn)行訪問(wèn)了。 　　第四步：管理與維護(hù) 　　網(wǎng)站的管理維護(hù)雖然是最好一個(gè)步驟，但是實(shí)際上從頭至尾，只要網(wǎng)站沒(méi)有停止運(yùn)行，就一直在對(duì)網(wǎng)站進(jìn)行管理維護(hù)，所以這一步，也是最為復(fù)雜的一步，網(wǎng)站管理主要是對(duì)網(wǎng)站進(jìn)行安全，性能和內(nèi)容上三個(gè)方面的管理。

嚴(yán)格說(shuō)，大中型公司會(huì)把網(wǎng)頁(yè)制作團(tuán)隊(duì)分為：網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)（美工）、前端交互設(shè)計(jì)（前端）、軟件程序開(kāi)發(fā)（程序）。單說(shuō)前端，你可以百度一下“前端設(shè)計(jì)”，了解一下這個(gè)職位是干嘛的。下面引用一小段：【前端設(shè)計(jì)師是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開(kāi)始受到重視的時(shí)間不超過(guò)5年。但是，隨著Web2.0概念的普及和W3C組織的推廣，網(wǎng)站重構(gòu)的影響力正以驚人的速度增長(zhǎng)。XHTML+CSS布局、DHTML和Ajax像一陣旋風(fēng)，鋪天蓋地地席卷而來(lái)，包括新浪、搜狐、網(wǎng)易、騰訊、淘寶等在內(nèi)的各種規(guī)模的IT企業(yè)都對(duì)自己的網(wǎng)站進(jìn)行了重構(gòu)?！恳虼?，從技術(shù)上說(shuō)，前端設(shè)計(jì)師要至少掌握html極其相關(guān)平臺(tái)屬性、css極其相關(guān)兼容語(yǔ)法、javascript極其相關(guān)框架、ajax極其相關(guān)語(yǔ)言（php或asp或json等）——如果是Flash，你還要懂得ActionScript。你要用html寫(xiě)頁(yè)面，用css做樣式，用javascript做交互，用ajax優(yōu)化交互——一切的一切，提供符合標(biāo)準(zhǔn)的html頁(yè)面（兼容性好、標(biāo)簽/命名語(yǔ)義化、符合W3C規(guī)范、符合SEO規(guī)范、符合或遵循網(wǎng)頁(yè)柵格系統(tǒng)），鏈接美工和程序。從軟件上說(shuō)，你至少要懂得一款作圖工具（切圖、優(yōu)化壓縮圖片、校正圖片）、一款編碼工具（組織代站點(diǎn)結(jié)構(gòu)、書(shū)寫(xiě)管理代碼、或者使用SVN類似的版本控制協(xié)作）、一寫(xiě)前端效率插件工具（壓縮css或js、調(diào)整json數(shù)據(jù)、調(diào)整優(yōu)化正則表達(dá)式、制作地址欄圖標(biāo)、制作APP圖標(biāo)、制作視網(wǎng)膜圖像等）——一切的一切，效率工作，嚴(yán)謹(jǐn)風(fēng)格。從個(gè)人職業(yè)修養(yǎng)上說(shuō)，你需要建立良好的工作習(xí)慣和技能提升方法——一切的一切，好好學(xué)習(xí)，天天向上。前端設(shè)計(jì)師，說(shuō)起來(lái)，是一個(gè)技能綜合度比較高的職業(yè)，首先說(shuō)，你應(yīng)該懂?dāng)?shù)學(xué)，一些最基本的交互和計(jì)算都是離不開(kāi)數(shù)學(xué)的，比較炫酷和提升用戶體驗(yàn)的設(shè)計(jì)，通常也都和數(shù)學(xué)息息相關(guān)（圓周率、隨機(jī)數(shù)、時(shí)分秒換算等等），由數(shù)學(xué)的靈活運(yùn)用，還可以實(shí)現(xiàn)物理上的一些東西（滑動(dòng)、晃動(dòng)、彈跳、模擬重力等）。做好前端，說(shuō)的直接一點(diǎn)差不多就是【寫(xiě)的一手好腳本】——作圖有美工，編程有程序——前端設(shè)計(jì)，就是把圖片轉(zhuǎn)換為可嵌套程序使用的標(biāo)準(zhǔn)HTML頁(yè)面，并站在UEDer（用戶體驗(yàn)設(shè)計(jì)師）的角度去設(shè)計(jì)和制作良好的交互方法。職業(yè)生涯是一個(gè)長(zhǎng)期的過(guò)程，所謂千里之行始于足下，實(shí)習(xí)階段，你所學(xué)習(xí)的并不是如何如何做自己的東西，而是學(xué)習(xí)團(tuán)隊(duì)協(xié)作、資源管理和學(xué)習(xí)方法。好比新兵入伍，不會(huì)讓你直接去參與大型的活動(dòng)，而是乖乖訓(xùn)練，尋找自己的優(yōu)勢(shì)，探索學(xué)習(xí)團(tuán)隊(duì)協(xié)作，找到提升自我的突破口，為以后的發(fā)展提供一個(gè)良好的工作習(xí)慣和處事方法。需要說(shuō)的一點(diǎn)是，大部分學(xué)校的教程都是較老的技術(shù)教程，在實(shí)際的工作中根本用不上?？梢哉f(shuō)，實(shí)習(xí)，差不多是帶你進(jìn)階自己的技能。當(dāng)你工作一段時(shí)間后會(huì)很明顯的發(fā)現(xiàn)，原來(lái)學(xué)些學(xué)的那些東西到了實(shí)際工作中差不多也就是剛?cè)腴T(mén)，各個(gè)公司各個(gè)團(tuán)隊(duì)都有自己的代碼管理方法和工作流程，實(shí)習(xí)中，你應(yīng)該嘗試去接受和學(xué)習(xí)，公司通常更懂得如何把你的勞動(dòng)變?yōu)榻疱X(qián)，你的價(jià)值體現(xiàn)也在于此——工資和物價(jià)無(wú)關(guān)，和你的含金量有關(guān)。經(jīng)驗(yàn)之談，聊聊而已。

網(wǎng)站建設(shè) 是一個(gè)綜合性的技巧，小說(shuō)網(wǎng)站也不例外，這個(gè)就像種菜,并不是說(shuō)看個(gè)操作流程就一定會(huì)種菜，還要土壤，水肥，氣候，直接間接的相關(guān)知識(shí)都做足夠的了解，才能真正去操作。那些速成的教程，僅僅是表面皮毛而已，真的去模仿會(huì)出現(xiàn)各種各樣的問(wèn)題，而且是從未了解過(guò)的，出了問(wèn)題會(huì)覺(jué)得 前所未有的茫然，特別是那些教程又是毫無(wú)責(zé)任而言的,不可能去給解決問(wèn)題，最終還是要一個(gè)好的服務(wù)商。以十幾年的企業(yè)網(wǎng)建運(yùn)維網(wǎng)商系統(tǒng)經(jīng)驗(yàn)，網(wǎng)站=域名+服務(wù)器空間+網(wǎng)站程序+售后服務(wù)，網(wǎng)站就像一個(gè)家：【域名】：網(wǎng)址 就相當(dāng)于你家的住址?！究臻g】：就是你蓋房子的基礎(chǔ) 土地 環(huán)境 等?！境绦颉浚壕褪悄慵业闹黧w框架,是整個(gè)家的運(yùn)轉(zhuǎn)中心?！灸０濉浚壕W(wǎng)站的美化 就是你家的裝修,當(dāng)然因人而異有人不裝修原汁原味也可以?！揪S護(hù)】：技術(shù)性維護(hù)就像您安居樂(lè)業(yè)的保安和堅(jiān)實(shí)后盾?！厩趧凇浚菏钦麄€(gè)家可以穩(wěn)定持續(xù)運(yùn)轉(zhuǎn)極其重要的部分，家里所有的東西都要靠你的勤奮去填充，增加，讓大家覺(jué)著你家很好 很充實(shí)。這就是一個(gè)完美網(wǎng)站的所有，有能力和經(jīng)驗(yàn)的可以全部自己做好,沒(méi)有相關(guān)經(jīng)驗(yàn)的部分可以找專業(yè)的技術(shù)團(tuán)隊(duì)協(xié)助。有一個(gè)非常直接的真理：用合適的成本，找合適的人，去做合適的事...這是大自然發(fā)展的規(guī)律。

　　一、一般先考查一下 面試者的知識(shí)技能如： 熟悉HTML語(yǔ)言，熟練使用Dreamweaver、Fireworks、Flash、Photoshop等相關(guān)工具，有良好美感，了解Java Script等腳本語(yǔ)言，良好的設(shè)計(jì)風(fēng)格與表達(dá)能力。　　(1）信息收集：分析任務(wù)要求，擬定信息搜索的渠道與方法，系統(tǒng)地進(jìn)行調(diào)查、分析、研究；　　(2）靈活性：為了適應(yīng)實(shí)際情況，迅速調(diào)整策略、目標(biāo)、計(jì)劃、方法或行為，并能立即行動(dòng)；　　(3）思維能力：能夠發(fā)現(xiàn)事件的多種可能的原因和行為的不同后果，找出復(fù)雜事物之間的聯(lián)系，逐步排除不太相關(guān)的信息，對(duì)問(wèn)題進(jìn)行準(zhǔn)確定位?！　《⒁粋€(gè)單位去應(yīng)聘求職，給人的第一印象非常重要，所以穿著打扮還是要注意的。有的男同學(xué)為了給人好的印象，常?；ù髢r(jià)錢(qián)買(mǎi)了一套西服西褲，其實(shí)這種方式大可不必。因?yàn)槟憔褪且粋€(gè)初出茅廬的學(xué)生，樸實(shí)無(wú)華才是最基本的特性，打扮得太專業(yè)就不太像學(xué)生了。所以說(shuō)衣服的穿著最重要的就是干凈整潔，不能邋里邋遢的求職應(yīng)聘，最基本的要求就是長(zhǎng)衣、長(zhǎng)褲配皮鞋就可以。　　除了衣服的穿著以外，面部的干凈整潔也非常重要。首先你在應(yīng)聘以前，首先要對(duì)自己的頭發(fā)進(jìn)行修剪。對(duì)于男生來(lái)說(shuō)頭發(fā)不能擋住額頭，兩側(cè)的頭發(fā)不能遮住耳朵，后面的頭發(fā)不要碰到襯衣的領(lǐng)子。因?yàn)樘L(zhǎng)的頭發(fā)容易弄臟白襯衫的衣領(lǐng)。對(duì)于女生來(lái)說(shuō)最好也把頭發(fā)剪短，如果喜歡留長(zhǎng)發(fā)的話，應(yīng)聘的時(shí)候最好把它用卡子或發(fā)箍給編起來(lái)。另外對(duì)于男生來(lái)說(shuō)，把胡子剃干凈也非常重要。不要以為留胡子可以給人一種老成持重的感覺(jué)，有的時(shí)候反而給人家一種蓬頭垢面的感覺(jué)。

一、引導(dǎo)用戶進(jìn)行下一步操作　　網(wǎng)站建立好不是為了讓用戶漫無(wú)目的的瀏覽，而是要引導(dǎo)用戶最終訪問(wèn)網(wǎng)站的目標(biāo)頁(yè)面，以淘寶客網(wǎng)站為例，最終目的是使用戶點(diǎn)擊商品鏈接進(jìn)入淘寶店鋪，那么就要在合理的位置出現(xiàn)“點(diǎn)擊查看詳細(xì)”、“點(diǎn)擊進(jìn)行購(gòu)買(mǎi)”的提示信息，在文字鏈接上當(dāng)鼠標(biāo)移上去時(shí)也要彈出提示“點(diǎn)擊查看詳細(xì)”的字樣，告訴用戶這里是可以點(diǎn)擊的，在產(chǎn)品內(nèi)容頁(yè)旁邊要列出推薦出產(chǎn)品或是相關(guān)產(chǎn)品，引導(dǎo)用戶瀏覽的目標(biāo)頁(yè)面信息。制作頁(yè)面時(shí)要考慮，在哪些地方用戶可能會(huì)要想看更詳細(xì)的信息，或是會(huì)產(chǎn)生購(gòu)買(mǎi)的行為，在這些地方都要出現(xiàn)明確的引導(dǎo)kama提示?！　《?dǎo)航系統(tǒng)不要使用flash或是js等不利于搜索引擎爬行的方式　　很多網(wǎng)站為了追求效果而使用flash、圖片等來(lái)設(shè)計(jì)導(dǎo)航菜單，這些方式雖然視覺(jué)效果很棒，但是對(duì)于網(wǎng)站優(yōu)化來(lái)說(shuō)是非常不利的，導(dǎo)航系統(tǒng)是有效幫助搜索引擎蜘蛛順利爬行整個(gè)網(wǎng)站頁(yè)面的有利通道，如果在這個(gè)地方設(shè)置障礙，會(huì)直接影響網(wǎng)站的優(yōu)化?！　∪⒕W(wǎng)站地圖的設(shè)計(jì)　　網(wǎng)站地圖可以幫助用戶快速了解網(wǎng)站內(nèi)容，幫助搜索引擎順利爬行到網(wǎng)站主要頁(yè)面，如果是一個(gè)中小型的網(wǎng)站建議在網(wǎng)站地圖上可以讀取出全部的內(nèi)容頁(yè)鏈接，這樣每更新一篇文章，搜索引擎蜘蛛就可以快速的抓取到，大大提高網(wǎng)站頁(yè)面的收錄量，如果是規(guī)模較大的網(wǎng)站，也要將重要欄目的內(nèi)容頁(yè)讀取出來(lái)?！?四、如何讓用戶時(shí)刻清晰的知道自己正處在網(wǎng)站的哪個(gè)位置　　要做到這一點(diǎn)，需要良好的面包屑導(dǎo)航和主導(dǎo)航(也就是頁(yè)面頂部導(dǎo)航)系統(tǒng)一起來(lái)完成，主導(dǎo)航中當(dāng)前分類應(yīng)該是高亮來(lái)顯示在主導(dǎo)航中l(wèi)ist1這個(gè)欄目名應(yīng)是高亮顯示的，面包屑導(dǎo)航應(yīng)該是這樣：首頁(yè) > list1 > 內(nèi)容標(biāo)題,這里的內(nèi)容標(biāo)題的顏色也是有區(qū)分的，這樣無(wú)論用戶從哪里頁(yè)面進(jìn)來(lái)，都會(huì)很清晰的知道自己正處于網(wǎng)站中的哪個(gè)位置。現(xiàn)在很多CMS系統(tǒng)在內(nèi)容頁(yè)面包屑導(dǎo)航處都是只讀取到了欄目名，沒(méi)有讀取出內(nèi)容頁(yè)標(biāo)題，建議自行修該一下程序，將內(nèi)容頁(yè)標(biāo)題讀取出來(lái)，這樣做不僅能提高網(wǎng)站的用戶體驗(yàn)，還非常有利于內(nèi)容頁(yè)關(guān)鍵詞的優(yōu)化。　　五、面包屑導(dǎo)航要設(shè)計(jì)的簡(jiǎn)潔、易于識(shí)別　　面包屑導(dǎo)航是幫助用戶判斷當(dāng)前位置的最好方法，所以一定要設(shè)計(jì)的易于識(shí)別，可以通過(guò)字體顏色改變、字體加粗、字號(hào)加大等方式與頁(yè)面中的其他文字區(qū)分出來(lái)，不要在這里設(shè)計(jì)太多花哨的東西，有一些網(wǎng)站把面包屑導(dǎo)航設(shè)計(jì)在了欄目右邊，或是獨(dú)出心裁設(shè)計(jì)到了內(nèi)容頁(yè)里面，這些都不是好的方式，就是簡(jiǎn)簡(jiǎn)單單，能使人一目了然知道自己處在哪個(gè)位置就可以了。

研究網(wǎng)頁(yè)柵格系統(tǒng)前，來(lái)看一組數(shù)據(jù)： 網(wǎng)站 首頁(yè)頁(yè)面寬度 px Yahoo! 950 淘寶 950 MySpace 960 新浪 950 網(wǎng)易 960 Live Search 958 搜狐 950 優(yōu)酷 960 AOL 960 上面列舉的都是Alexa全球排名前100的站點(diǎn)，它們的首頁(yè)寬度為950px/960px. 除了微軟的Live Search, 這些站點(diǎn)有個(gè)共同特點(diǎn)：頁(yè)面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門(mén)戶型網(wǎng)站。 再來(lái)看看Google, YouTube, Facebook, Flickr!, eBay等知名站點(diǎn)，它們的首頁(yè)寬度沒(méi)什么固定規(guī)律，共同的特點(diǎn)是：功能專一，頁(yè)面結(jié)構(gòu)相對(duì)簡(jiǎn)單。 根據(jù)上面的簡(jiǎn)單分析可以認(rèn)為：當(dāng)搭建頁(yè)面結(jié)構(gòu)復(fù)雜的門(mén)戶型網(wǎng)站時(shí)，開(kāi)發(fā)工程師們不約而同地都選擇將頁(yè)面寬度定為950px/960px. 這是一件很有趣的事情，為什么要選擇這個(gè)寬度呢？這個(gè)寬度值究竟有什么魔力？ 神奇的960 設(shè)計(jì)師們對(duì)蘋(píng)果情有獨(dú)衷。在 1024 x 768 的分辨率下，打開(kāi)Firefox： 自然狀態(tài)下，F(xiàn)irefox窗體的大小約為 974 x 650. 減掉左右兩邊7px的邊框，網(wǎng)頁(yè)的實(shí)際大小為上圖中的紅色部分，高寬為 960 x 650. 有趣的960就這樣出現(xiàn)了。是的，可以認(rèn)為一切就這么簡(jiǎn)單。柵格系統(tǒng)最早出現(xiàn)在平面設(shè)計(jì)領(lǐng)域，設(shè)計(jì)師們愛(ài)用蘋(píng)果，蘋(píng)果下瀏覽器的默認(rèn)寬度為960px, 于是960就這么“自然”地出現(xiàn)了。 數(shù)字背后的奧妙 上面的“自然”出現(xiàn)，細(xì)究自然是不讓人信服的。蘋(píng)果系統(tǒng)的設(shè)計(jì)者們?cè)跊](méi)有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有奧妙。 科學(xué)界有很多問(wèn)題都可以歸結(jié)到數(shù)學(xué)問(wèn)題上，我們也從數(shù)學(xué)著手： 960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數(shù)倍： 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480 共26種（26 = 7 * 2 * 2 - 2, 減去2是去掉1和960自身），我們標(biāo)記為： N(960) = N(2^6 * 3 * 5) = 26 根據(jù)上面的算法，可以得到： N(360) = N(2^3 * 3^2 * 5) = 22 N(480) = N(2^5 * 3 * 5) = 22 N(720) = N(2^4 * 3^2 * 5) = 28 N(750) = N(2 * 3 * 5^3) = 14 N(800) = N(2^5 * 5^2) = 16 N(960) = N(2^6 * 3 * 5) = 26 N(1000) = N(2^3 * 5^3) = 14 N(1024) = N(2^10) = 9 N(1440) = N(2^6 * 3^2 * 5) = 34 N(1920) = N(2^7 * 3 * 5) = 30 根據(jù)直覺(jué)（嚴(yán)格證明也不難，不過(guò)還是留給數(shù)學(xué)系的學(xué)生去證明吧），我們得到一個(gè)有趣的結(jié)論： 要使得N(width)最大，width的取值有兩個(gè)系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可組合的寬度值就越多。對(duì)柵格系統(tǒng)來(lái)說(shuō)，這意味著越靈活！ 目前絕大多數(shù)顯示器都支持 1024 x 768 及其以上分辨率。為了有效的利用屏幕寬度同時(shí)保證柵格的靈活度，可以看出960是非常合適的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁(yè)柵格系統(tǒng)中的最佳寬度了。（也許不久的將來(lái)，將會(huì)流行1440）首先澄清一個(gè)應(yīng)用場(chǎng)景問(wèn)題。研究(1)中指出，對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站，不少設(shè)計(jì)師們喜歡采用960固定寬度布局。但要注意的是，960并不是萬(wàn)能鑰匙，大部分網(wǎng)站沒(méi)有也不需要柵格系統(tǒng)。Amazon采用的是寬度自適應(yīng)布局，最大限度的呈現(xiàn)信息。Google更是簡(jiǎn)簡(jiǎn)單單，主題部分就一個(gè)列表。eBay的頁(yè)面非常簡(jiǎn)潔，商品頁(yè)面寬度自適應(yīng)，信息自然流暢，噪音少，購(gòu)物很踏實(shí)。類似的站點(diǎn)還有很多，對(duì)于這些站點(diǎn)來(lái)說(shuō)，寬度自適應(yīng)布局更受青睞。有個(gè)很有意思的網(wǎng)站是Yahoo!, 看起來(lái)是固定寬度布局，實(shí)際上在CSS中只要去掉一行，就能搖身一變自適應(yīng)寬度了：以下為引用的內(nèi)容：#page { width: 70em;}為什么Yahoo!最后選擇了定寬布局呢?這很可能是因?yàn)槎▽挷季直葘挾茸赃m應(yīng)布局更容易控制。對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站來(lái)說(shuō)，可維護(hù)性和可擴(kuò)展性非常重要。Yahoo!是以信息展示為主的門(mén)戶型網(wǎng)站，960的寬度對(duì)于信息的閱讀比較友善(Joe Clark寫(xiě)了一篇屏幕閱讀時(shí)有關(guān)行長(zhǎng)的有趣文章)。種種因素使得Yahoo!最后采用了定寬布局(Tommy Olsson總結(jié)了每種布局設(shè)計(jì)的優(yōu)缺點(diǎn))。這里將只關(guān)注定寬布局，適用的場(chǎng)景是搭建復(fù)雜的門(mén)戶型網(wǎng)站。對(duì)于寬度自適應(yīng)布局和相應(yīng)的柵格系統(tǒng)，暫不討論(根據(jù)實(shí)現(xiàn)的技術(shù)手段不同，寬度自適應(yīng)布局又分為流體布局和彈性布局。我個(gè)人蠻喜歡彈性布局，以后有時(shí)間再研究)。好了，已經(jīng)將范圍縮小到定寬布局的網(wǎng)頁(yè)柵格系統(tǒng)，那我們開(kāi)始吧。并不遙遠(yuǎn)的750 還記得800×600的顯示器不?雖然才時(shí)隔幾年，感覺(jué)卻好像是上個(gè)世紀(jì)的事了。Mark Boulton做了最早的探索：將750分割成均等的6份，這就形成了柵格系統(tǒng)，稍加組合劃分就形成了兩欄布局和三欄布局。Mark Boulton還研究了Gutter(垂直欄之間的間隙)對(duì)柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細(xì)闡述。幾個(gè)術(shù)語(yǔ)和一個(gè)公式一個(gè)標(biāo)準(zhǔn)的柵格系統(tǒng)，包括以下部分：將Flowline的總寬度標(biāo)記為W, Column的寬度標(biāo)記為c, Gutter寬度標(biāo)記為g, Margin的寬度標(biāo)記為m, Column的個(gè)數(shù)標(biāo)記為N, 我們可以得到以下公式：W = c * N + g * (N - 1) + 2 * m一般來(lái)說(shuō)，Gutter的寬度是Margin的兩倍，上面的公式可以簡(jiǎn)化為：W = c * N + g * (N - 1) + g = (c + g) * N將c+g標(biāo)記為C, 公式變得非常簡(jiǎn)單：W = C * N上面的公式就是柵格系統(tǒng)的基礎(chǔ)，很簡(jiǎn)單吧。950的來(lái)歷具體應(yīng)用時(shí)，Margin其實(shí)是一個(gè)空白邊，從視覺(jué)上看并不屬于總寬度。不少柵格設(shè)計(jì)里習(xí)慣性地設(shè)定Gutter為10px, 這樣Margin就是5px. 當(dāng)W為960，分割成6列時(shí)，柵格如下圖：上圖的處理是左右Margin各為5px. 也可以將Margin集中放在一邊，比如右邊：無(wú)論Margin放在何處(這只影響技術(shù)實(shí)現(xiàn)，不影響設(shè)計(jì))，我們真正要關(guān)注的是去除Margin之后的部分：這就是我們要真正關(guān)注的950!將W的含義變?yōu)槿コ齅argin的總寬度，公式變化為：W = N * C - g將上面的公式實(shí)例化一下：950 = 12 * 80 - 10950 = 16 * 60 - 10950 = 24 * 40 - 10這就形成了960蛋糕的三種常見(jiàn)切法。12 x 8016 x 6024 x 40上面三種切法，N越大，靈活度越高?？梢愿鶕?jù)網(wǎng)頁(yè)的實(shí)際復(fù)雜度來(lái)選用對(duì)應(yīng)的切法。在960 Grid System首頁(yè)中，展示了12 x 80的應(yīng)用：我們來(lái)看下 研究(1)中開(kāi)頭列舉的網(wǎng)站的柵格應(yīng)用情況。Yahoo!是很標(biāo)準(zhǔn)的 24 x 40 柵格：淘寶網(wǎng)目前只有商城上部分使用了柵格系統(tǒng)(大的兩欄布局遵守了 24 x 40 的柵格化，主體部分使用的另一套740的柵格劃分)：網(wǎng)易很不錯(cuò)，采用的是 16 x 60 的柵格系統(tǒng)：研究(1)中的其它站點(diǎn)都沒(méi)有真正嚴(yán)格地采用柵格系統(tǒng)。柵格系統(tǒng)的優(yōu)勢(shì)上面的“發(fā)現(xiàn)”是讓人有點(diǎn)沮喪的。目前嚴(yán)格采用柵格系統(tǒng)的站點(diǎn)非常少，為什么我們還要努力的讓網(wǎng)頁(yè)柵格化呢?柵格系統(tǒng)具有以下優(yōu)勢(shì)：能大大提高網(wǎng)頁(yè)的規(guī)范性。在柵格系統(tǒng)下，頁(yè)面中所有組件的尺寸都是有規(guī)律的。這對(duì)于大型網(wǎng)站的開(kāi)發(fā)和維護(hù)來(lái)說(shuō)，能節(jié)約不少成本?；跂鸥襁M(jìn)行設(shè)計(jì)，可以讓整個(gè)網(wǎng)站各個(gè)頁(yè)面的布局保持一致。這能增加頁(yè)面的相似度，提升用戶體驗(yàn)。對(duì)于設(shè)計(jì)師們來(lái)說(shuō)，靈活地運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特的設(shè)計(jì)。(詳見(jiàn)《超越CSS》一書(shū))對(duì)于大型網(wǎng)站來(lái)說(shuō)，我相信柵格化將是一種潮流和趨勢(shì)。下面討論柵格系統(tǒng)中的黃金分割。黃金分割黃金分割可以歸結(jié)為數(shù)學(xué)問(wèn)題：對(duì)于長(zhǎng)度為1的線段，將其分成兩部分 x 和 1 - x, 使得：x / 1 = (1 - x) / x化為簡(jiǎn)單的二次方程：x^2 + x - 1 = 0正數(shù)解為：x = (sqrt(5) - 1) / 2 ~= 0.618這就是黃金分割。這個(gè)比例不僅僅出現(xiàn)在諸如繪畫(huà)、雕塑、音樂(lè)、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計(jì)等方面也有著不可忽視的作用。 (這是個(gè)自然界的魔數(shù)，類似的還有真空光速、普朗克常數(shù)、精細(xì)結(jié)構(gòu)等等，感興趣的Google吧)在平面設(shè)計(jì)領(lǐng)域，黃金分割點(diǎn)被廣泛采用。比如下面這種圖：數(shù)一數(shù)上面有多少黃金分割?對(duì)于960柵格，實(shí)際寬度是950. 兩欄布局時(shí)，黃金分割為：對(duì)于 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數(shù)比例為 9 : 15. 但實(shí)際使用時(shí)，因?yàn)檎瓩诮?jīng)常用來(lái)做導(dǎo)航或放輔助信息，并不需要350px這么寬。因此實(shí)際情況下經(jīng)常被采用的布局是：上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應(yīng)用。高度方向上的柵格還記得研究(1)中那張紅紅的很刺眼的圖嗎?注意高度值560也是很神奇的。N(560) = N(2^4 * 5 * 7) = 18560 / 960 ~= 0.583N(560)比較大，同時(shí)可以讓高寬比接近黃金分割。針對(duì)560, 我們采用 14 x 40 柵格：這樣，我們就在寬度和高度兩個(gè)方向上都實(shí)現(xiàn)了柵格化。淘寶的首頁(yè)目前尚未嚴(yán)格遵守柵格系統(tǒng)，如果重構(gòu)的話，寬度方向可以考慮采用下面的柵格布局（只考慮頁(yè)面主體部分，忽略高度的比例）：（圖1） 紛亂的高度世界我們來(lái)看下圖1左上角。左上角部分目前的寬度為256px, 重構(gòu)的話可以將寬度縮小到230px以符合柵格（不可避免的要調(diào)整內(nèi)容，比如人氣寶貝中將只能放下3張圖片）。來(lái)仔細(xì)看下高度方向：（圖2）高度方向的布局是：90 : 117 : 100, 第一個(gè)間隔是8, 總高度為325. 很明顯，高度方向沒(méi)有任何柵格化的跡象。實(shí)際上，即便是嚴(yán)格遵守柵格系統(tǒng)的Yahoo!首頁(yè)，高度方向上也沒(méi)有嚴(yán)格柵格化。這究竟是為何？一切皆有可能我們縮小關(guān)注點(diǎn)：（圖3）上圖中，圖像的大小是70 x 70, 剛好是24列960柵格系統(tǒng)兩列的寬度。對(duì)于右邊的文字，采取了如下樣式：font-size: 12px;line-height: 150%; /* 12 x 150% = 18px */中文字體是宋體，line-height的計(jì)算值是18px. 注意圖3中文字部分可視區(qū)域的高度為65, 上下各有4px和1px的間隙。為什么會(huì)產(chǎn)生這么奇怪的間隙呢？我們來(lái)看下圖：（圖4）從上圖中我們可以得知，12px的宋體中文字，實(shí)際高度只有11px. line-height減去11多出來(lái)的高度，則“均勻”分布在上下間隙中（如果多出來(lái)的高度為偶數(shù)，則上下均分；為奇數(shù)時(shí)，上面比下面多1px）。這樣，對(duì)于70px的高度來(lái)說(shuō)，要布局4行文字時(shí)，假設(shè)行高多出來(lái)的上半部分為x, 下半部分為y, 在最理想的情況下，應(yīng)該滿足以下公式：11 * 4 + 4 * x + 3 * y = 70x = y 或 x = y + 1不難推出，x最理想的整數(shù)解為4. 從而line-height為 4 + 11 + 3 = 18. 因此：對(duì)于24列960柵格系統(tǒng)來(lái)說(shuō)，如果要在高度方向上實(shí)現(xiàn)柵格，font-size為12px時(shí)，line-height的最佳取值是18px(150%).追求完美點(diǎn)話，還可以將文字部分margin-top: -1px, 使得65上下的間隙為3和2.至此，我們可以初步判斷：高度方向上是有可能?chē)?yán)格柵格化的。一切皆有可能！然而，現(xiàn)實(shí)總那么殘酷（圖5）上圖中的標(biāo)題高度為22, 這在24列960柵格系統(tǒng)中是無(wú)法對(duì)齊的。而且總高度為100, 在24列960柵格系統(tǒng)中也不存在（110才可以）?；蛟S高度方向上我們可以細(xì)化行寬為20, 但依舊沒(méi)法解決上面兩個(gè)問(wèn)題（22是明顯不能解決的，而對(duì)于100px的高度，也無(wú)法通過(guò)細(xì)化行寬來(lái)解決?？蛇x高度永遠(yuǎn)是10的奇數(shù)倍，如果進(jìn)一步細(xì)化，小于10后，會(huì)變得非常繁瑣，沒(méi)什么實(shí)際應(yīng)用價(jià)值）寬度世界里會(huì)好些嗎（圖6）上面是Yahoo!首頁(yè)上的兩個(gè)小模塊，我都不想去標(biāo)注模塊里面的布局寬度了（因?yàn)橐稽c(diǎn)都不符合24列960柵格系統(tǒng)）。寬度世界里，和高度世界一樣充滿希望但現(xiàn)實(shí)卻殘酷無(wú)比。銀彈是不存在的柵格系統(tǒng)是美好的。但如果我們一味地追求將所有設(shè)計(jì)都柵格化（必須承認(rèn)我曾有這個(gè)幻想），則立刻會(huì)陷入地獄一般的黑暗中。這篇文章中的艱難嘗試（我分析了20多個(gè)小模塊），讓我突然醒悟到一個(gè)粒度問(wèn)題：任何設(shè)計(jì)都有適用范圍，超出最佳適用范圍，強(qiáng)行使用只會(huì)帶來(lái)無(wú)盡的煩惱。對(duì)于柵格系統(tǒng)（這里指所有柵格系統(tǒng)，包括多種柵格系統(tǒng)混合使用的情景）來(lái)說(shuō)，我覺(jué)得以下場(chǎng)景非常適合：頁(yè)面的總體寬度布局，比如兩欄、三欄等布局一些固定區(qū)塊的尺寸，比如廣告圖片的尺寸區(qū)塊之間的間距，可以參考柵格系統(tǒng)的槽寬（Gutter）一些可以柵格化的小區(qū)域，比如圖3中的例子，暗合柵格往往能簡(jiǎn)化布局上的考慮除了上面這些應(yīng)用場(chǎng)景，強(qiáng)行使用柵格系統(tǒng)，往往會(huì)束手束腳，適得其反。這篇文章的目的，就是嘗試用最啰嗦最費(fèi)神貌似很科學(xué)實(shí)際很無(wú)聊的分析來(lái)指出柵格系統(tǒng)應(yīng)用時(shí)的粒度問(wèn)題。在粒度問(wèn)題上達(dá)成一致后，下一篇中我們將討論柵格系統(tǒng)的技術(shù)實(shí)現(xiàn)，最后一篇?jiǎng)t討論柵格系統(tǒng)的壓軸好戲：模塊化開(kāi)發(fā)。前三篇文章中，明確了柵格系統(tǒng)的設(shè)計(jì)細(xì)節(jié)和適用范圍。這一篇將集中討論960柵格系統(tǒng)的技術(shù)實(shí)現(xiàn)。Blueprint的實(shí)現(xiàn)Blueprint是一個(gè)完整的CSS框架，柵格系統(tǒng)是它的一部分功能。我們來(lái)看demo頁(yè)面：以上三欄布局的代碼為：<style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="container"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>上面是基本功能，Blueprint還支持append-n, prepend-m, border等“高級(jí)”功能，這些就不細(xì)說(shuō)了

　　為了能讓網(wǎng)站設(shè)計(jì)正常的運(yùn)行于各種瀏覽器平臺(tái)，網(wǎng)站設(shè)計(jì)師們不得不想盡辦法處理好網(wǎng)站建設(shè)中的瀏覽器兼容問(wèn)題。正是因?yàn)榫W(wǎng)站設(shè)計(jì)當(dāng)中的這一需要產(chǎn)生了一項(xiàng)新技術(shù)— CSS Hack。 CSS Hack 就是針對(duì)不同瀏覽器寫(xiě)出不同的 CSS code 的過(guò)程，主要用來(lái)解決目前各類瀏覽器無(wú)法標(biāo)準(zhǔn)解析CSS樣式，導(dǎo)致同一網(wǎng)站設(shè)計(jì)頁(yè)面在不同瀏覽器下出現(xiàn)顯示效果不一致的兼容問(wèn)題。 針對(duì)不同瀏覽器，可以將CSS Hack 網(wǎng)站設(shè)計(jì)代碼整理如下： 　　1、針對(duì)I E 系列瀏覽器的網(wǎng)站設(shè)計(jì)代碼 針對(duì) IE 6 的專屬 CSS Hack 網(wǎng)站設(shè)計(jì)代碼 #id{ _display: block; } 也就是在網(wǎng)站設(shè)計(jì)CSS屬性前加一個(gè)小劃線就好。 針對(duì) IE 7 的專屬 CSS Hack 網(wǎng)站設(shè)計(jì)代碼 #id{ *display: block; } 即在網(wǎng)站設(shè)計(jì)CSS屬性前加上一個(gè)星號(hào)即可 針對(duì) IE 8 的專屬 CSS Hack 網(wǎng)站設(shè)計(jì)代碼 #id{ margin-top: 10px 9; /*IE8*/ } 如上所示，解決辦法為在網(wǎng)站設(shè)計(jì)CSS屬性后分號(hào)前加上空格與斜線并加入一個(gè)數(shù)字9即可 ?！　?、針對(duì)火狐的CSS Hack 網(wǎng)站設(shè)計(jì)代碼 火狐可謂是最標(biāo)準(zhǔn)的瀏覽器之一了，網(wǎng)站設(shè)計(jì)技術(shù)只要稍稍不到位就能體現(xiàn)得淋漓盡致，所以不少網(wǎng)站設(shè)計(jì)師也很頭痛，其實(shí)想要解決火狐的兼容性除了要把網(wǎng)站設(shè)計(jì)的基礎(chǔ)知識(shí)扎牢之外只要將CSS代碼寫(xiě)入到下圖 @-moz-document url-prefix（）{ } 里面就行了 @-moz-document url-prefix() { #id{ display: block; } } ?！　?、針對(duì) Safari 的CSS Hack 網(wǎng)站設(shè)計(jì)代碼 Safari是蘋(píng)果計(jì)算機(jī)的最新作業(yè)系統(tǒng)Mac OS X中新的瀏覽器，用來(lái)取代之前的Internet Explorer for Mac，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。 @media screen and (-webkit-min-device-pixel-ratio:0) { #id { display: block; } } 兼容性做法和火狐相近?！　?、針對(duì) Opera 的CSS Hack 網(wǎng)站設(shè)計(jì)代碼 Opera即Opera Software ASA，是臺(tái)式機(jī)、各種設(shè)備和移動(dòng)網(wǎng)絡(luò)瀏覽器市場(chǎng)的商業(yè)領(lǐng)袖，因快速、小巧和比其他瀏覽器更佳的標(biāo)準(zhǔn)兼容性獲得了國(guó)際上的最終用戶和業(yè)界媒體的承認(rèn)，并在網(wǎng)上受到很多人的推崇。 @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #id { display: block; } } 這個(gè)世界上必然不會(huì)存在絕對(duì)完美的事物，因此運(yùn)用以上方法讓我們的網(wǎng)站設(shè)計(jì)更好的與各種瀏覽器兼容的時(shí)候其實(shí)已經(jīng)違反了網(wǎng)站制作的W3C標(biāo)準(zhǔn)。