網頁設計背後的(de)技術原理(lǐ)，你知道嗎？

作者：龍 時(shí)間：2018-07-30 浏覽：

網頁設計師在做(zuò)項目之前必須了(le)解網頁背後的(de)技術原理(lǐ)，技術決定了(le)哪些設計和(hé)交互是可(kě)以實現的(de)、哪些是不可(kě)以的(de)。同時(shí)技術原理(lǐ)也(yě)決定了(le)我們需要如何配合前端工程師來(lái)完成一些複雜(zá)的(de)交互。其實在過去網頁前端工程師和(hé)設計師是一個(gè)崗位，就叫做(zuò)網頁美(měi)工，這(zhè)個(gè)職位需要在完成視覺設計後把頁面做(zuò)成靜态網頁交給下(xià)面的(de)環節。随著(zhe)分(fēn)工越來(lái)越細緻，産生了(le)網頁設計師和(hé)前端工程師兩個(gè)工種。但是網頁設計師不可(kě)以脫離技術局限天花亂墜地去設計。下(xià)面讓我們來(lái)了(le)解網站的(de)基本存儲原理(lǐ)：在您的(de)電腦(nǎo) C盤保存一個(gè)叫 logo.jpg 的(de)圖片，然後在浏覽器打開這(zhè)個(gè)網址：C:logo.jpg 你看到了(le)什(shén)麽？對(duì)，就是這(zhè)張圖片。這(zhè)就是網站的(de)原理(lǐ)：網站的(de)資源和(hé)文件存儲在一個(gè)類似我們電腦(nǎo)的(de)東西裏，那就是服務器。我們通(tōng)過域名來(lái)調取網中不同的(de)頁面和(hé)文件，如果服務器關機了(le)那麽網站也(yě)就癱瘓了(le)。每次當我們通(tōng)過浏覽器訪問網站時(shí)，敲擊一個(gè)網址，這(zhè)時(shí)這(zhè)個(gè)域名會轉向一個(gè) IP地址，這(zhè)個(gè) IP地址就是服務器所在的(de)門牌号碼。找到了(le)以後，我們的(de)浏覽器會從服務器上下(xià)載網站的(de)代碼并把代碼翻譯成我們能看懂(dǒng)的(de)界面，比如文字、邊框、表格等實際上都是代碼的(de)形式。浏覽器還(hái)會把網站中所需要的(de)圖片、視頻(pín)等單獨下(xià)載到緩存裏。當我們通(tōng)過表單輸入用(yòng)戶名和(hé)密碼時(shí)，我們的(de)信息就會上傳到服務器中，服務器處理(lǐ)完（比如登錄成功這(zhè)個(gè)信息）然後再下(xià)發給我們的(de)浏覽器。所以平時(shí)我們訪問網站時(shí)，我們的(de)電腦(nǎo)和(hé)浏覽器要通(tōng)過互聯網與服務器進行多(duō)次「握手」。當然老「握手」會造成加載速度變慢(màn)，于是我們聰明(míng)的(de)浏覽器會把已經下(xià)載過的(de)資源緩存下(xià)來(lái)，避免浪費。這(zhè)個(gè)機制就是「cookies」：浏覽器會自動存儲你訪問過的(de)網址、網站圖片、視頻(pín)、表單信息等。

1. 基于鼠标的(de)交互

在不久的(de)未來(lái)，個(gè)人(rén)電腦(nǎo)可(kě)能通(tōng)過多(duō)點觸控、語音(yīn)交互等方式與我們交互，但目前網站設計最主流的(de)交互方式還(hái)是鼠标和(hé)鍵盤。來(lái)讓我們看看鼠标有什(shén)麽結構吧！我們對(duì)鼠标的(de)使用(yòng)無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的(de)大(dà)部分(fēn)操作都是通(tōng)過鼠标左鍵點擊完成的(de)，所以網頁也(yě)是點擊的(de)藝術。右鍵一般會喚起右鍵菜單，但是很多(duō)網站與網頁應用(yòng)程序也(yě)會将右鍵自定義設計一些操作和(hé)交互。與鼠标發生交互的(de)主要是超鏈接與按鈕。那麽讓我們來(lái)了(le)解一下(xià)超鏈接的(de)四個(gè)狀态吧（前端術語是：超鏈接标簽的(de) CSS 四個(gè)僞類）。

Link

Link 是指超鏈接正常的(de)時(shí)候的(de)狀态。一般超鏈接需要與普通(tōng)文字區(qū)别開來(lái)，比如換一種顔色或者加下(xià)劃線。當然下(xià)劃線還(hái)有一個(gè)作用(yòng)就是方便弱視群體區(qū)分(fēn)超鏈接與普通(tōng)文字。Link 默認都是藍色的(de)（色值：#72ACE3），但是爲了(le)增強網站的(de)品牌性我們也(yě)可(kě)以把鏈接顔色更換成另一種顔色。總之一定要在形式上與普通(tōng)文字産生差别才可(kě)以。

Visited

Visited 是超鏈接被點擊以後的(de)狀态。比如新浪網新聞非常多(duō)，所以點擊完一個(gè)新聞後用(yòng)戶可(kě)能不知道自己看過沒看過這(zhè)條新聞了(le)。所以新浪網使用(yòng)了(le) Visited 屬性，點擊後的(de)新聞顔色就不一樣了(le)，方便用(yòng)戶區(qū)别自己哪些新聞還(hái)沒有浏覽。

Hover

Hover 是超鏈接鼠标經過狀态。這(zhè)個(gè)狀态是連接中最爲重要的(de)狀态。其實不隻超鏈接，按鈕和(hé)圖片以及視頻(pín)等一切可(kě)交互的(de)元素都應該設置 Hover 屬性，也(yě)就是鼠标懸停時(shí)的(de)狀态。一般來(lái)說變換顔色和(hé)放大(dà)是 Hover 狀态的(de)基本方式。

Active

Active 是指超鏈接的(de)激活狀态。點擊後超鏈接可(kě)以通(tōng)過 CSS 加載一個(gè)狀态。

同樣的(de)鏈接樣式也(yě)可(kě)以應用(yòng)在圖片、按鈕、表單之上。點擊、鼠标懸停、鼠标按下(xià)都可(kě)以設計成不同的(de)樣式，方便用(yòng)戶通(tōng)過鼠标感知這(zhè)個(gè)物(wù)體是被我按下(xià)去的(de)，這(zhè)種給用(yòng)戶的(de)暗示我們也(yě)叫做(zuò)「點擊感」。當然按鈕會和(hé)鏈接稍有不同，按鈕除了(le)具備正常和(hé)鼠标懸停等狀态，還(hái)有一種狀态叫不可(kě)點擊。這(zhè)種狀态将按鈕置灰，提示用(yòng)戶這(zhè)個(gè)功能因爲條件不滿足不可(kě)以點擊。好了(le)，您可(kě)以舉出幾個(gè)點擊感 Web 設計的(de)例子嗎？

2. 靜态網頁

了(le)解完基本技術背景、鼠标的(de)交互之後，讓我們來(lái)聊點真格的(de)。我們一般看到的(de)網頁都是靜态網頁。靜态網頁是由 HTML 編譯的(de)，我們在服務器上存儲的(de)網頁代碼基本都是 HTML 格式。HTML 全稱是 HyperText Markup Language，即超文本标記語言。「超文本」是說這(zhè)種語言内可(kě)以包含文字元素以及調用(yòng)圖片、鏈接、音(yīn)樂(yuè)等非文字元素。HTML語言對(duì)于沒有編程的(de)人(rén)來(lái)說可(kě)能會很頭疼，但是它已經是所有編程代碼中最簡單的(de)一種了(le)。别緊張，你可(kě)以把它當做(zuò)摩爾代碼，它是服務器和(hé)浏覽器之間的(de)密語，浏覽器會将這(zhè)些密語翻譯成我們能看懂(dǒng)的(de)色彩和(hé)鏈接等。那麽如果我們用(yòng) HTML語言寫一段文字會是什(shén)麽樣呢(ne)？

沒錯，代碼就是這(zhè)麽一點一點編起來(lái)的(de)。在任何網站空白處右鍵點擊查看網頁源代碼你就可(kě)以看到網頁的(de) HTML 代碼啦。HTML 這(zhè)種代碼是由一個(gè)國際組織——W3C 發布和(hé)維護的(de)。W3C 創建于1994年，是網站國際中立性技術标準機構。W3C 已經發布了(le) HTML 的(de)諸多(duō)版本，其中影(yǐng)響最深遠(yuǎn)的(de)是 HTML4版本。而 HTML5 簡稱 H5 則可(kě)以說是劃時(shí)代的(de)版本了(le)。H5 的(de)标簽更加接近現代，并且本身可(kě)以播放視頻(pín)，這(zhè)就可(kě)以淘汰掉 Flash 插件了(le)。（Flash插件帶來(lái)了(le)比如系統漏洞、加載速度過慢(màn)等問題）同時(shí) H5 對(duì)多(duō)平台支持很好，所以适應移動端爲王的(de)當今時(shí)代。H5 甚至還(hái)可(kě)以變成遊戲、Webapp（在網頁上如本地程序一樣工作的(de)網站，比如藍湖等）、多(duō)媒體等多(duō)種形式。可(kě)是由于 IE浏覽器這(zhè)類不支持 HTML5 效果的(de)浏覽器在用(yòng)戶中占比還(hái)很高(gāo)，所以造成了(le) HTML5 發展的(de)制約。浏覽器可(kě)以理(lǐ)解爲一個(gè)代碼閱讀器，由于它對(duì) HTML5 代碼的(de)翻譯工作不好就會造成所謂「兼容性」的(de)問題。比如 HTML5 中可(kě)以通(tōng)過代碼給一個(gè) DIV添加投影(yǐng)，那麽在某些浏覽器中就顯示不了(le)這(zhè)個(gè)效果。不難理(lǐ)解爲什(shén)麽有程序員(yuán)會穿著(zhe) i hate IE 字樣的(de)T恤了(le)吧。在每次做(zuò)完一個(gè)網站項目時(shí)，測試工程師都會用(yòng) Chrome、Safari、Firefox、Opera、IE、Edge 等多(duō)個(gè)浏覽器測試網站的(de)兼容性，這(zhè)時(shí)通(tōng)常讓前端工程師非常頭疼。因爲代碼動一發牽全身，經常這(zhè)個(gè)好了(le)那個(gè)又不行了(le)。但是針對(duì)這(zhè)種問題也(yě)有一些解決方案，比如減少對(duì)用(yòng)戶占比不高(gāo)浏覽器的(de)支持、對(duì)不好搞的(de)浏覽器單獨加載特定的(de)适配代碼等。道高(gāo)一尺魔高(gāo)一丈呀。

3. 其他(tā)前端語言

有了(le) HTML 這(zhè)個(gè)骨架，加上圖片和(hé)多(duō)媒體後，網站的(de)發展速度就更快(kuài)了(le)。但是服務器的(de)損耗很大(dà)：所有用(yòng)戶都需要重複地來(lái)服務器下(xià)載代碼和(hé)圖片等資源進行「握手」，而且很多(duō) HTML 代碼都是重複的(de)，造成了(le)資源的(de)浪費。比如，如果我網站的(de)頭部都是黃(huáng)色的(de)、鏈接都是藍色的(de)，那麽每個(gè)頁面都會啰嗦這(zhè)幾句代碼。這(zhè)個(gè)問題沒多(duō)久就被一種嶄新的(de)代碼解決了(le)：CSS技術。CSS 是層疊樣式表的(de)意思：我們可(kě)以理(lǐ)解爲現在把網站的(de)樣式（顔色、大(dà)小、位置等樣式信息）也(yě)就是 CSS 和(hé)網站的(de)内容（文字、圖片、鏈接等内容信息）也(yě)就是 HTML 完全分(fēn)開，并且一個(gè)網站可(kě)以下(xià)載一份 CSS 然後不同頁面都調取這(zhè)份 CSS 的(de)緩存，那麽就節省了(le)服務器資源。另外，由于網站需要一些交互效果，比如點擊特效和(hé)菜單特效等，那麽需要前端工程師使用(yòng) Javas cript 代碼來(lái)配合。Javas cript 是一種比較短小精悍的(de)語言，構建一些基于浏覽器的(de)特效非常順手。所以目前主流的(de)網站配置是 HTML5+CSS3+JS 代碼的(de)組合，當然爲了(le)兼容那些低端浏覽器也(yě)可(kě)能使用(yòng) HTML4+CSS+JS 的(de)套餐。這(zhè)取決于我們的(de)主要目标用(yòng)戶群在使用(yòng)什(shén)麽樣的(de)浏覽器。當然，我講這(zhè)些并不是要求您去學習(xí) HTML、CSS、JS 代碼然後進行前端開發，因爲在現代互聯網公司裏已經有專業的(de)前端工程師了(le)。我們了(le)解這(zhè)些主要是要理(lǐ)解前端工程師的(de)工作以便更好地配合他(tā)們。

4. 動态網頁

了(le)解完靜态網頁還(hái)不夠，現在讓我們談談網站如何動起來(lái)。動态網頁不是說它有狂拽酷炫的(de)動畫(huà)，而是動态網頁會随著(zhe)時(shí)間、内容和(hé)數據庫的(de)調用(yòng)而産生動态的(de)網頁。比如今天看到的(de)新聞網站和(hé)昨天的(de)新聞肯定不一樣了(le)，可(kě)是網站首頁的(de) HTML 代碼并不需要人(rén)去手工修改，而是讓小編通(tōng)過後台錄入新聞、上傳圖片就好了(le)。小編上傳後台的(de)過程就會輸入數據庫，而動态網頁又是調取數據庫内容顯示給用(yòng)戶的(de)一種形式。動态網頁會随時(shí)調取數據庫中的(de)信息給用(yòng)戶，而對(duì)用(yòng)戶來(lái)說似乎靜态網頁和(hé)動态網頁長(cháng)得(de)都是一樣的(de)。那麽最傻瓜的(de)判斷方式是看網址結尾，靜态網頁結尾是 html 或 htm，而動态網頁由于使用(yòng)了(le)高(gāo)級網頁編程技術，結尾則是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是動态網頁的(de)語言，當然有的(de)時(shí)候爲了(le)讓網站效率提升也(yě)會使用(yòng)僞靜态結構，結尾和(hé)靜态網頁就一緻了(le)，但是實際上是會在用(yòng)戶訪問前調取一遍數據庫的(de)。同時(shí)動态網頁的(de)網址會有一個(gè)特點，含有？符号。動态語言目前最火的(de)是 Php，較早而現在比較少見的(de)是 Asp、Cgi，最安全的(de)是 Jsp，所以很多(duō)銀行采用(yòng) JSP 編譯。了(le)解完這(zhè)些，我們基本就弄清楚網站的(de)運行原理(lǐ)了(le)。

5. 雪(xuě)碧圖

我們經常看到網站中會有動畫(huà)，那麽動畫(huà)實現的(de)原理(lǐ)一般有如下(xià)這(zhè)麽幾個(gè)：第一，HTML5 視頻(pín)播放；這(zhè)種方式缺點就是不兼容低端浏覽器。第二，Flash Player 播放器播放；這(zhè)種方式的(de)缺點是Flash安全性很低而且效率慢(màn)。第三，動畫(huà)使用(yòng) Gif 格式；這(zhè)種方式的(de)問題是動畫(huà)長(cháng)度不夠，并且這(zhè)個(gè)格式僅僅支持透明(míng)和(hé)不透明(míng)兩級屬性。那麽像 Google 首頁 Doodle 的(de)動畫(huà)是怎麽實現的(de)呢(ne)？這(zhè)種技術叫做(zuò)：雪(xuě)碧圖。CSS 雪(xuě)碧即 CSS Sprite，也(yě)有人(rén)叫 CSS 精靈，它是一種 CSS 圖像合并技術。它本身調用(yòng)的(de)圖片是支持多(duō)級透明(míng)的(de) PNG 格式，然後把動畫(huà)并排排列出來(lái)。比如一個(gè)卡通(tōng)人(rén)物(wù)的(de)動畫(huà)每幀寬度是100px，那麽就把它的(de)動作1 動作2 動作3 動作4 并排放在一張寬度是400px的(de) PNG 圖片裏。然後代碼在一個(gè)100px的(de)寬度框子内背景圖調用(yòng)這(zhè)張 png，我們就看到了(le)動作1，然後過一秒鐘(zhōng)代碼會悄悄移動100px我們就看到了(le)動作2。由于速度很快(kuài)就讓我們看到了(le)連續動畫(huà)。雪(xuě)碧圖也(yě)有自身的(de)缺點：如果幀數太多(duō)，會消耗很大(dà)的(de)内存。所以幀數一定要控制少。如果你的(de)動作設計了(le)12幀，那麽我建議(yì)你可(kě)以試試将2、4、6、8、10删除，保留一半的(de)動作。

6. 視差滾動

視差滾動是一種運動速率不一樣的(de)設計效果，用(yòng)以實現空間感。比如密爾沃基警察局官網就大(dà)量運用(yòng)了(le)視差滾動效果。其實現原理(lǐ)是，代碼判定網頁滾動，滾動時(shí)頁面中三層圖片運動速率和(hé)位移距離不同。這(zhè)樣給人(rén)造成的(de)視覺體驗仿佛是我們在物(wù)理(lǐ)現實中看到的(de)空間感一樣。視差滾動已經不是什(shén)麽高(gāo)新技術，如果你的(de)網站比較适合視差滾動，請大(dà)膽設計并和(hé)前端工程師提需求，相信前端工程師可(kě)以滿足你的(de)要求。我們需要準備的(de)就是運動速率不同的(de)分(fēn)層靜态 PSD 文件。