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

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

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

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

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

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

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

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

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