網站建設師在做項目之前必須了解網頁背后的技術原理，技術決定了哪些設計和交互是可以實現的、哪些是不可以的。同時技術原理也決定了我們需要如何配合前端工程師來完成一些復雜的交互。其實在過去網頁前端工程師和設計師是一個崗位，就叫做網頁美工，這個職位需要在完成視覺設計后把頁面做成靜態網頁交給下面的環節。隨著分工越來越細致，產生了網站設計師和前端工程師兩個工種。但是網站設計師不可以脫離技術局限天花亂墜地去設計。

　　基于鼠標的交互

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

按鈕與文字的不同狀態

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

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

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

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

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

靜態網頁

了解完基本技術背景、鼠標的交互之后，讓我們來聊點真格的。我們一般看到的網頁都是靜態網頁。靜態網頁是由HTML編譯的，我們在服務器上存儲的網頁代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標記語言。“超文本”是說這種語言內可以包含文字元素以及調用圖片、鏈接、音樂等非文字元素。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等多個瀏覽器測試網站的兼容性，這時通常讓前端工程師非常頭疼。因為代碼動一發牽全身，經常這個好了那個又不行了。但是針對這種問題也有一些解決方案，比如減少對用戶占比不高瀏覽器的支持、對不好搞的瀏覽器單獨加載特定的適配代碼等。道高一尺魔高一丈呀。

其他前端語言

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

動態網頁

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

主流后臺編譯語言：PHP ASP JSP CGi

我們經常看到網站中會有動畫，那么動畫實現的原理一般有如下這么幾個：第一，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刪除，保留一半的動作。

視差滾動

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

以上就是從事成都網站建設的成都創新互聯公司的網站建設工程師為大家帶來的有關網站建設的相關技術解決內容，希望大家能夠喜歡，如果大家對網站建設還有什么想要了解的，大家可以關注成都創新互聯官方公眾號“創新互聯π”在其中留言，我們會根據大家的需求在近期的文章為大家及時更新。

新聞標題：成都網站建設關于技術原理的講解
當前地址：http://m.newbst.com/news21/316721.html

成都網站建設公司_創新互聯，為您提供網站營銷、網站內鏈、用戶體驗、網站策劃、手機網站建設、定制網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯