国产精品一区电影_国产男女无遮挡猛进猛出_日本丰满熟妇videossex8k_中文字幕无码乱人伦,久久综合伊人77777麻豆,亚洲最大在线观看,无码人妻久久一区二区三区app

網頁設計背后的技術原理，你知道嗎？

作者：龍 時間：2018-07-30 瀏覽：

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

1. 基于鼠標的交互

在不久的未來，個人電腦可能通過多點觸控、語音交互等方式與我們交互，但目前網站設計最主流的交互方式還是鼠標和鍵盤。來讓我們看看鼠標有什么結構吧！我們對鼠標的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標左鍵點擊完成的，所以網頁也是點擊的藝術。右鍵一般會喚起右鍵菜單，但是很多網站與網頁應用程序也會將右鍵自定義設計一些操作和交互。與鼠標發生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態吧（前端術語是：超鏈接標簽的 CSS 四個偽類）。

Link

Link 是指超鏈接正常的時候的狀態。一般超鏈接需要與普通文字區別開來，比如換一種顏色或者加下劃線。當然下劃線還有一個作用就是方便弱視群體區分超鏈接與普通文字。Link 默認都是藍色的（色值：#72ACE3），但是為了增強網站的品牌性我們也可以把鏈接顏色更換成另一種顏色?？傊欢ㄒ谛问缴吓c普通文字產生差別才可以。

Visited

Visited 是超鏈接被點擊以后的狀態。比如新浪網新聞非常多，所以點擊完一個新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網使用了 Visited 屬性，點擊后的新聞顏色就不一樣了，方便用戶區別自己哪些新聞還沒有瀏覽。

Hover

Hover 是超鏈接鼠標經過狀態。這個狀態是連接中最為重要的狀態。其實不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應該設置 Hover 屬性，也就是鼠標懸停時的狀態。一般來說變換顏色和放大是 Hover 狀態的基本方式。

Active

Active 是指超鏈接的激活狀態。點擊后超鏈接可以通過 CSS 加載一個狀態。

同樣的鏈接樣式也可以應用在圖片、按鈕、表單之上。點擊、鼠標懸停、鼠標按下都可以設計成不同的樣式，方便用戶通過鼠標感知這個物體是被我按下去的，這種給用戶的暗示我們也叫做「點擊感」。當然按鈕會和鏈接稍有不同，按鈕除了具備正常和鼠標懸停等狀態，還有一種狀態叫不可點擊。這種狀態將按鈕置灰，提示用戶這個功能因為條件不滿足不可以點擊。好了，您可以舉出幾個點擊感 Web 設計的例子嗎？

2. 靜態網頁

了解完基本技術背景、鼠標的交互之后，讓我們來聊點真格的。我們一般看到的網頁都是靜態網頁。靜態網頁是由 HTML 編譯的，我們在服務器上存儲的網頁代碼基本都是 HTML 格式。HTML 全稱是 HyperText Markup Language，即超文本標記語言?！赋谋尽故钦f這種語言內可以包含文字元素以及調用圖片、鏈接、音樂等非文字元素。HTML語言對于沒有編程的人來說可能會很頭疼，但是它已經是所有編程代碼中最簡單的一種了。別緊張，你可以把它當做摩爾代碼，它是服務器和瀏覽器之間的密語，瀏覽器會將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用 HTML語言寫一段文字會是什么樣呢？

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

3. 其他前端語言

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

4. 動態網頁

了解完靜態網頁還不夠，現在讓我們談談網站如何動起來。動態網頁不是說它有狂拽酷炫的動畫，而是動態網頁會隨著時間、內容和數據庫的調用而產生動態的網頁。比如今天看到的新聞網站和昨天的新聞肯定不一樣了，可是網站首頁的 HTML 代碼并不需要人去手工修改，而是讓小編通過后臺錄入新聞、上傳圖片就好了。小編上傳后臺的過程就會輸入數據庫，而動態網頁又是調取數據庫內容顯示給用戶的一種形式。動態網頁會隨時調取數據庫中的信息給用戶，而對用戶來說似乎靜態網頁和動態網頁長得都是一樣的。那么最傻瓜的判斷方式是看網址結尾，靜態網頁結尾是 html 或 htm，而動態網頁由于使用了高級網頁編程技術，結尾則是 Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi 都是動態網頁的語言，當然有的時候為了讓網站效率提升也會使用偽靜態結構，結尾和靜態網頁就一致了，但是實際上是會在用戶訪問前調取一遍數據庫的。同時動態網頁的網址會有一個特點，含有？符號。動態語言目前最火的是 Php，較早而現在比較少見的是 Asp、Cgi，最安全的是 Jsp，所以很多銀行采用 JSP 編譯。了解完這些，我們基本就弄清楚網站的運行原理了。

5. 雪碧圖

我們經常看到網站中會有動畫，那么動畫實現的原理一般有如下這么幾個：第一，HTML5 視頻播放；這種方式缺點就是不兼容低端瀏覽器。第二，Flash Player 播放器播放；這種方式的缺點是Flash安全性很低而且效率慢。第三，動畫使用 Gif 格式；這種方式的問題是動畫長度不夠，并且這個格式僅僅支持透明和不透明兩級屬性。那么像 Google 首頁 Doodle 的動畫是怎么實現的呢？這種技術叫做：雪碧圖。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精靈，它是一種 CSS 圖像合并技術。它本身調用的圖片是支持多級透明的 PNG 格式，然后把動畫并排排列出來。比如一個卡通人物的動畫每幀寬度是100px，那么就把它的動作1 動作2 動作3 動作4 并排放在一張寬度是400px的 PNG 圖片里。然后代碼在一個100px的寬度框子內背景圖調用這張 png，我們就看到了動作1，然后過一秒鐘代碼會悄悄移動100px我們就看到了動作2。由于速度很快就讓我們看到了連續動畫。雪碧圖也有自身的缺點：如果幀數太多，會消耗很大的內存。所以幀數一定要控制少。如果你的動作設計了12幀，那么我建議你可以試試將2、4、6、8、10刪除，保留一半的動作。

6. 視差滾動

視差滾動是一種運動速率不一樣的設計效果，用以實現空間感。比如密爾沃基警察局官網就大量運用了視差滾動效果。其實現原理是，代碼判定網頁滾動，滾動時頁面中三層圖片運動速率和位移距離不同。這樣給人造成的視覺體驗仿佛是我們在物理現實中看到的空間感一樣。視差滾動已經不是什么高新技術，如果你的網站比較適合視差滾動，請大膽設計并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準備的就是運動速率不同的分層靜態 PSD 文件。