一個平臺的搭建，在了解了網(wǎng)站的不同類別后，讓我們來看看組成一個網(wǎng)站需要哪些部分吧。網(wǎng)站是由不同網(wǎng)頁通過超鏈接連接而成的，而不同網(wǎng)頁也是由不同模塊組成的。我們設(shè)計的是一個像蜘蛛網(wǎng)一樣的網(wǎng)絡(luò)，而不是一張海報。所以我們在設(shè)計網(wǎng)站時要格外考慮從用戶角度出發(fā)看到的網(wǎng)站，而不能孤立地把它想象成一個平面作品。
1. 網(wǎng)站制作首頁
訪問一個網(wǎng)站時第一個我們觸及的就是網(wǎng)站首頁。首頁別名叫作 Index 或者 Default，是索引和目錄的意思。在網(wǎng)站發(fā)展的前期階段，網(wǎng)站并不是富媒體，而是類似于一本書一樣：首頁類似書籍的目錄，需要查看哪個子網(wǎng)頁就點擊鏈接即可進入。到了現(xiàn)在，網(wǎng)站首頁仍然是引導用戶進入不同區(qū)域的一個「目錄」，這個目錄除了導航功能外也要露出一部分內(nèi)容給用戶來吸引點擊，露出的部分一定要有一個「更多」按鈕來指引用戶找到二級頁面。
△ 首頁原型圖
2. 網(wǎng)站制作二級頁面
在邏輯上，首頁是一級頁面，從首頁點擊進入的頁面均為二級頁面。二級頁面之后還有三級頁面等級別。從點擊的概率上來說，自然是越靠前訪問量越高，頁面層級越深越不容易被用戶找到。一般網(wǎng)站有三級頁面，就是為了避免用戶迷失。為此還會在頁面中加入面包屑導航。面包屑導航就是在頁面第一屏出現(xiàn)的諸如 首頁 > 體育 > NBA頻道，這樣的超鏈接結(jié)構(gòu)，方便用戶理解自己在哪里，并且點擊可以回到其他頁面。
△ 二級頁面原型圖
3. 底層頁
在網(wǎng)站結(jié)構(gòu)中最后提供用戶實質(zhì)資訊的頁面就是底層頁。比如，在門戶網(wǎng)站首頁或二級頁面中我們點擊感興趣的標題后，在底層頁中才會看到全部的資訊。待用戶閱讀完底層頁的信息后可以順勢在左側(cè)或右側(cè)的側(cè)欄尋找用戶可能感興趣的相關(guān)內(nèi)容；在底側(cè)可以看到網(wǎng)友的評論；底側(cè)也會有分享按鈕、贊功能等；如果側(cè)欄用戶轉(zhuǎn)化率比較差，最底部還可以再次出現(xiàn)推薦相關(guān)資訊的功能?？傊?，在用戶閱讀完自己喜歡的資訊后，要繼續(xù)吸引用戶順勢閱讀其他的資訊或者回到頻道。
△ 底層頁原型圖
4. 廣告
門戶類網(wǎng)站如何盈利？廣告是變現(xiàn)方法之一。網(wǎng)站的廣告一般由負責運營需求的設(shè)計師負責，但是也可能由頻道設(shè)計師、產(chǎn)品側(cè)設(shè)計師來完成。在網(wǎng)站中常見到的廣告圖形式就是 banner。banner 一般尺寸巨大，在網(wǎng)站之中非常顯眼。因此也不一定是外部廣告，也有內(nèi)部活動、推薦資訊等。那么 banner 圖的尺寸有固定嗎？答案是沒有。Banner 的寬度有兩種，一種是滿屏（1920PX）、一種是基于安全距離的滿尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px為基準的用戶屏幕，加上瀏覽器本身與插件和底部工具條等距離，留給網(wǎng)站的一屏高度大概為900px，所以 banner 不可以做得很高，否則第一屏信息會顯示得不夠。你可能會說，那就讓用戶往下拉啊。但是在網(wǎng)站的訪問用戶之中，第二屏觸及到的用戶比第一屏會少很多。也就是很多用戶可能點擊網(wǎng)站后就會跳走或者關(guān)閉，那么第一屏的信息真的非常重要了，可謂是寸土寸金。所以我們的 banner 不應該占據(jù)過大的區(qū)域。比如站酷網(wǎng)的 Banner 區(qū)域為1380x350px。那么除了首頁巨大的 banner 廣告位，網(wǎng)站還有哪些廣告形式呢？
網(wǎng)站制作對聯(lián)廣告
在門戶網(wǎng)站中我們經(jīng)常會看到網(wǎng)站左右安全區(qū)域之外會有個隨屏幕滾動的像「對聯(lián)」一樣的廣告，通常 banner 也會是一個廣告內(nèi)容，并且居中會彈出由 HTML5 技術(shù)或 Flash 技術(shù)制作出來的彈窗廣告。這種廣告一般組合售賣，也就是說一進網(wǎng)站你就會被全面轟炸，無法不注意到這個廣告的存在。這種廣告點擊進入還有配合的專題頁等，可見需要設(shè)計師配合的地方非常多。
△ 對聯(lián)廣告形式
網(wǎng)站制作信息流廣告
信息流廣告是埋在信息流中的一種廣告形式。這種形式利用了格式塔原理，用戶會不自覺地閱讀起廣告的內(nèi)容，原因是因為它的形式和其他信息一樣。比如朋友圈、知乎、Facebook 都采用了信息流廣告，信息流廣告的效果非常強，但是會犧牲一定的用戶體驗。信息流廣告的尺寸與信息流相同。
△ 網(wǎng)站制作知識:知乎APP中信息流中的廣告
以上從廣告的形式上簡單介紹了三種常見的網(wǎng)站廣告形式，如果我們在閱讀需求時看到了 cpm、pv 等單詞是什么意思呢？他們是廣告的收費模式。cpm 是指按照廣告 pv 來收費，cps 是指按照用戶消費收費，cpa 是指按照用戶注冊數(shù)收費，cpc 是指按照用戶點擊付費。針對不同的收費模式，在設(shè)計時也會采取不同策略來增強廣告需要達到的目的。
5. 網(wǎng)站制作Footer
在網(wǎng)站具體的頁面設(shè)計中，底部會有一個區(qū)域我們稱之為 footer。一般 footer 的顏色都會比上邊內(nèi)容區(qū)域要暗，因為 footer 的信息在邏輯的級別上是次要的。footer 區(qū)域的主要功能是版權(quán)聲明、聯(lián)系方式、友情鏈接、備案號等信息。在設(shè)計時一定要降級處理，不要讓 footer 變得特別明顯。
五、網(wǎng)站制作技術(shù)原理
網(wǎng)頁設(shè)計師在做項目之前必須了解網(wǎng)頁背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計和交互是可以實現(xiàn)的、哪些是不可以的。同時技術(shù)原理也決定了我們需要如何配合前端工程師來完成一些復雜的交互。其實在過去網(wǎng)頁前端工程師和設(shè)計師是一個崗位，就叫做網(wǎng)頁美工，這個職位需要在完成視覺設(shè)計后把頁面做成靜態(tài)網(wǎng)頁交給下面的環(huán)節(jié)。隨著分工越來越細致，產(chǎn)生了網(wǎng)頁設(shè)計師和前端工程師兩個工種。但是網(wǎng)頁設(shè)計師不可以脫離技術(shù)局限天花亂墜地去設(shè)計。下面讓我們來了解網(wǎng)站的基本存儲原理：在您的電腦 C盤保存一個叫 logo.jpg 的圖片，然后在瀏覽器打開這個網(wǎng)址：C:\logo.jpg 你看到了什么？對，就是這張圖片。這就是網(wǎng)站的原理：網(wǎng)站的資源和文件存儲在一個類似我們電腦的東西里，那就是服務器。我們通過域名來調(diào)取網(wǎng)中不同的頁面和文件，如果服務器關(guān)機了那么網(wǎng)站也就癱瘓了。每次當我們通過瀏覽器訪問網(wǎng)站時，敲擊一個網(wǎng)址，這時這個域名會轉(zhuǎn)向一個 IP地址，這個 IP地址就是服務器所在的門牌號碼。找到了以后，我們的瀏覽器會從服務器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實際上都是代碼的形式。瀏覽器還會把網(wǎng)站中所需要的圖片、視頻等單獨下載到緩存里。當我們通過表單輸入用戶名和密碼時，我們的信息就會上傳到服務器中，服務器處理完（比如登錄成功這個信息）然后再下發(fā)給我們的瀏覽器。所以平時我們訪問網(wǎng)站時，我們的電腦和瀏覽器要通過互聯(lián)網(wǎng)與服務器進行多次「握手」。當然老「握手」會造成加載速度變慢，于是我們聰明的瀏覽器會把已經(jīng)下載過的資源緩存下來，避免浪費。這個機制就是「cookies」：瀏覽器會自動存儲你訪問過的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。
△ 基于鼠標的手勢操作
1. 網(wǎng)站制作：基于鼠標的交互
在不久的未來，個人電腦可能通過多點觸控、語音交互等方式與我們交互，但目前網(wǎng)站設(shè)計最主流的交互方式還是鼠標和鍵盤。來讓我們看看鼠標有什么結(jié)構(gòu)吧！我們對鼠標的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標左鍵點擊完成的，所以網(wǎng)頁也是點擊的藝術(shù)。右鍵一般會喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應用程序也會將右鍵自定義設(shè)計一些操作和交互。與鼠標發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態(tài)吧（前端術(shù)語是：超鏈接標簽的 CSS 四個偽類）。
△ 按鈕與文字的不同狀態(tài)
Link網(wǎng)站超鏈接
Link 是指超鏈接正常的時候的狀態(tài)。一般超鏈接需要與普通文字區(qū)別開來，比如換一種顏色或者加下劃線。當然下劃線還有一個作用就是方便弱視群體區(qū)分超鏈接與普通文字。Link 默認都是藍色的（色值：#72ACE3），但是為了增強網(wǎng)站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產(chǎn)生差別才可以。
Visited
Visited 是超鏈接被點擊以后的狀態(tài)。比如新浪網(wǎng)新聞非常多，所以點擊完一個新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網(wǎng)使用了 Visited 屬性，點擊后的新聞顏色就不一樣了，方便用戶區(qū)別自己哪些新聞還沒有瀏覽。
Hover
Hover 是超鏈接鼠標經(jīng)過狀態(tài)。這個狀態(tài)是連接中最為重要的狀態(tài)。其實不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應該設(shè)置 Hover 屬性，也就是鼠標懸停時的狀態(tài)。一般來說變換顏色和放大是 Hover 狀態(tài)的基本方式。Active
Active 是指超鏈接的激活狀態(tài)。點擊后超鏈接可以通過 CSS 加載一個狀態(tài)。同樣的鏈接樣式也可以應用在圖片、按鈕、表單之上。點擊、鼠標懸停、鼠標按下都可以設(shè)計成不同的樣式，方便用戶通過鼠標感知這個物體是被我按下去的，這種給用戶的暗示我們也叫做「點擊感」。當然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標懸停等狀態(tài)，還有一種狀態(tài)叫不可點擊。這種狀態(tài)將按鈕置灰，提示用戶這個功能因為條件不滿足不可以點擊。好了，您可以舉出幾個點擊感 Web 設(shè)計的例子嗎？
2. 靜態(tài)網(wǎng)頁
了解完基本技術(shù)背景、鼠標的交互之后，讓我們來聊點真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由 HTML 編譯的，我們在服務器上存儲的網(wǎng)頁代碼基本都是 HTML 格式。HTML 全稱是 HyperText Markup Language，即超文本標記語言?！赋谋尽故钦f這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對于沒有編程的人來說可能會很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當做摩爾代碼，它是服務器和瀏覽器之間的密語，瀏覽器會將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用 HTML語言寫一段文字會是什么樣呢？
△ 模擬代碼編譯過程
沒錯，代碼就是這么一點一點編起來的。在任何網(wǎng)站空白處右鍵點擊查看網(wǎng)頁源代碼你就可以看到網(wǎng)頁的 HTML 代碼啦。HTML 這種代碼是由一個國際組織——W3C 發(fā)布和維護的。W3C 創(chuàng)建于1994年，是網(wǎng)站國際中立性技術(shù)標準機構(gòu)。W3C 已經(jīng)發(fā)布了 HTML 的諸多版本，其中影響最深遠的是 HTML4版本。而 HTML5 簡稱 H5 則可以說是劃時代的版本了。H5 的標簽更加接近現(xiàn)代，并且本身可以播放視頻，這就可以淘汰掉 Flash 插件了。（Flash插件帶來了比如系統(tǒng)漏洞、加載速度過慢等問題）同時 H5 對多平臺支持很好，所以適應移動端為王的當今時代。H5 甚至還可以變成游戲、Webapp（在網(wǎng)頁上如本地程序一樣工作的網(wǎng)站，比如藍湖等）、多媒體等多種形式?？墒怯捎?IE瀏覽器這類不支持 HTML5 效果的瀏覽器在用戶中占比還很高，所以造成了 HTML5 發(fā)展的制約。瀏覽器可以理解為一個代碼閱讀器，由于它對 HTML5 代碼的翻譯工作不好就會造成所謂「兼容性」的問題。比如 HTML5 中可以通過代碼給一個 DIV添加投影，那么在某些瀏覽器中就顯示不了這個效果。不難理解為什么有程序員會穿著 i hate IE 字樣的T恤了吧。在每次做完一個網(wǎng)站項目時，測試工程師都會用 Chrome、Safari、Firefox、Opera、IE、Edge 等多個瀏覽器測試網(wǎng)站的兼容性，這時通常讓前端工程師非常頭疼。因為代碼動一發(fā)牽全身，經(jīng)常這個好了那個又不行了。但是針對這種問題也有一些解決方案，比如減少對用戶占比不高瀏覽器的支持、對不好搞的瀏覽器單獨加載特定的適配代碼等。道高一尺魔高一丈呀。
3. 其他前端語言
有了 HTML 這個骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務器的損耗很大：所有用戶都需要重復地來服務器下載代碼和圖片等資源進行「握手」，而且很多 HTML 代碼都是重復的，造成了資源的浪費。比如，如果我網(wǎng)站的頭部都是黃色的、鏈接都是藍色的，那么每個頁面都會啰嗦這幾句代碼。這個問題沒多久就被一種嶄新的代碼解決了：CSS技術(shù)。CSS 是層疊樣式表的意思：我們可以理解為現(xiàn)在把網(wǎng)站的樣式（顏色、大小、位置等樣式信息）也就是 CSS 和網(wǎng)站的內(nèi)容（文字、圖片、鏈接等內(nèi)容信息）也就是 HTML 完全分開，并且一個網(wǎng)站可以下載一份 CSS 然后不同頁面都調(diào)取這份 CSS 的緩存，那么就節(jié)省了服務器資源。另外，由于網(wǎng)站需要一些交互效果，比如點擊特效和菜單特效等，那么需要前端工程師使用 Javas cript 代碼來配合。Javas cript 是一種比較短小精悍的語言，構(gòu)建一些基于瀏覽器的特效非常順手。所以目前主流的網(wǎng)站配置是 HTML5+CSS3+JS 代碼的組合，當然為了兼容那些低端瀏覽器也可能使用 HTML4+CSS+JS 的套餐。這取決于我們的主要目標用戶群在使用什么樣的瀏覽器。當然，我講這些并不是要求您去學習 HTML、CSS、JS 代碼然后進行前端開發(fā)，因為在現(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。
△ 主流形式：HTML + CSS + JS
4. 動態(tài)網(wǎng)頁
了解完靜態(tài)網(wǎng)頁還不夠，現(xiàn)在讓我們談談網(wǎng)站如何動起來。動態(tài)網(wǎng)頁不是說它有狂拽酷炫的動畫，而是動態(tài)網(wǎng)頁會隨著時間、內(nèi)容和數(shù)據(jù)庫的調(diào)用而產(chǎn)生動態(tài)的網(wǎng)頁。比如今天看到的新聞網(wǎng)站和昨天的新聞肯定不一樣了，可是網(wǎng)站首頁的 HTML 代碼并不需要人去手工修改，而是讓小編通過后臺錄入新聞、上傳圖片就好了。小編上傳后臺的過程就會輸入數(shù)據(jù)庫，而動態(tài)網(wǎng)頁又是調(diào)取數(shù)據(jù)庫內(nèi)容顯示給用戶的一種形式。動態(tài)網(wǎng)頁會隨時調(diào)取數(shù)據(jù)庫中的信息給用戶，而對用戶來說似乎靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁長得都是一樣的。那么最傻瓜的判斷方式是看網(wǎng)址結(jié)尾，靜態(tài)網(wǎng)頁結(jié)尾是 html 或 htm，而動態(tài)網(wǎng)頁由于使用了高級網(wǎng)頁編程技術(shù)，結(jié)尾則是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是動態(tài)網(wǎng)頁的語言，當然有的時候為了讓網(wǎng)站效率提升也會使用偽靜態(tài)結(jié)構(gòu)，結(jié)尾和靜態(tài)網(wǎng)頁就一致了，但是實際上是會在用戶訪問前調(diào)取一遍數(shù)據(jù)庫的。同時動態(tài)網(wǎng)頁的網(wǎng)址會有一個特點，含有？符號。動態(tài)語言目前最火的是 Php，較早而現(xiàn)在比較少見的是 Asp、Cgi，最安全的是 Jsp，所以很多銀行采用 JSP 編譯。了解完這些，我們基本就弄清楚網(wǎng)站的運行原理了。
△ 主流后臺編譯語言：PHP ASP JSP CGI
5. 雪碧圖
我們經(jīng)?？吹骄W(wǎng)站中會有動畫，那么動畫實現(xiàn)的原理一般有如下這么幾個：第一，HTML5 視頻播放；這種方式缺點就是不兼容低端瀏覽器。第二，F(xiàn)lash Player 播放器播放；這種方式的缺點是Flash安全性很低而且效率慢。第三，動畫使用 Gif 格式；這種方式的問題是動畫長度不夠，并且這個格式僅僅支持透明和不透明兩級屬性。那么像 Google 首頁 Doodle 的動畫是怎么實現(xiàn)的呢？這種技術(shù)叫做：雪碧圖。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精靈，它是一種 CSS 圖像合并技術(shù)。它本身調(diào)用的圖片是支持多級透明的 PNG 格式，然后把動畫并排排列出來。比如一個卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的 PNG 圖片里。然后代碼在一個100px的寬度框子內(nèi)背景圖調(diào)用這張 png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續(xù)動畫。雪碧圖也有自身的缺點：如果幀數(shù)太多，會消耗很大的內(nèi)存。所以幀數(shù)一定要控制少。如果你的動作設(shè)計了12幀，那么我建議你可以試試將2、4、6、8、10刪除，保留一半的動作。
△ 雪碧圖
6. 視差滾動
視差滾動是一種運動速率不一樣的設(shè)計效果，用以實現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運用了視差滾動效果。其實現(xiàn)原理是，代碼判定網(wǎng)頁滾動，滾動時頁面中三層圖片運動速率和位移距離不同。這樣給人造成的視覺體驗仿佛是我們在物理現(xiàn)實中看到的空間感一樣。視差滾動已經(jīng)不是什么高新技術(shù)，如果你的網(wǎng)站比較適合視差滾動，請大膽設(shè)計并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準備的就是運動速率不同的分層靜態(tài) PSD 文件。深圳網(wǎng)站制作公司博納網(wǎng)絡(luò)編輯整理。
△ 運用了視差滾動效果的密爾沃基警察局官網(wǎng)（milwaukeepolicenews.com）
