成都網(wǎng)站建設(shè)關(guān)于技術(shù)原理的講解

網(wǎng)站建設(shè)師在做項目之前必須了解網(wǎng)頁背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計和交互是可以實現(xiàn)的、哪些是不可以的。同時技術(shù)原理也決定了我們需要如何配合前端工程師來完成一些復(fù)雜的交互。其實在過去網(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)站設(shè)計最主流的交互方式還是鼠標和鍵盤。來讓我們看看鼠標有什么結(jié)構(gòu)吧！我們對鼠標的使用無外乎移動、左鍵、右鍵、拖拽四種方式。我們在頁面中的大部分操作都是通過鼠標左鍵點擊完成的，所以網(wǎng)頁也是點擊的藝術(shù)。右鍵一般會喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應(yīng)用程序也會將右鍵自定義設(shè)計一些操作和交互。與鼠標發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個狀態(tài)吧（前端術(shù)語是：超鏈接標簽的CSS四個偽類）。

按鈕與文字的不同狀態(tài)

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

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

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

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

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

靜態(tài)網(wǎng)頁

了解完基本技術(shù)背景、鼠標的交互之后，讓我們來聊點真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由HTML編譯的，我們在服務(wù)器上存儲的網(wǎng)頁代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標記語言?！俺谋尽笔钦f這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對于沒有編程的人來說可能會很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語，瀏覽器會將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用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對多平臺支持很好，所以適應(yīng)移動端為王的當(dāng)今時代。H5甚至還可以變成游戲、Webapp（在網(wǎng)頁上如本地程序一樣工作的網(wǎng)站，比如藍湖等）、多媒體等多種形式?？墒怯捎趇E瀏覽器這類不支持HTML5效果的瀏覽器在用戶中占比還很高，所以造成了HTML5發(fā)展的制約。瀏覽器可以理解為一個代碼閱讀器，由于它對HTML5代碼的翻譯工作不好就會造成所謂“兼容性”的問題。比如HTML5中可以通過代碼給一個DiV添加投影，那么在某些瀏覽器中就顯示不了這個效果。不難理解為什么有程序員會穿著 i hate iE字樣的T恤了吧。在每次做完一個網(wǎng)站項目時，測試工程師都會用Chrome、Safari、Firefox、Opera、iE、Edge等多個瀏覽器測試網(wǎng)站的兼容性，這時通常讓前端工程師非常頭疼。因為代碼動一發(fā)牽全身，經(jīng)常這個好了那個又不行了。但是針對這種問題也有一些解決方案，比如減少對用戶占比不高瀏覽器的支持、對不好搞的瀏覽器單獨加載特定的適配代碼等。道高一尺魔高一丈呀。

其他前端語言

有了HTML這個骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大：所有用戶都需要重復(fù)地來服務(wù)器下載代碼和圖片等資源進行“握手”，而且很多HTML代碼都是重復(fù)的，造成了資源的浪費。比如，如果我網(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ù)器資源。另外，由于網(wǎng)站需要一些交互效果，比如點擊特效和菜單特效等，那么需要前端工程師使用Javas cript代碼來配合。Javas cript是一種比較短小精悍的語言，構(gòu)建一些基于瀏覽器的特效非常順手。所以目前主流的網(wǎng)站配置是HTML5+CSS3+JS代碼的組合，當(dāng)然為了兼容那些低端瀏覽器也可能使用HTML4+CSS+JS的套餐。這取決于我們的主要目標用戶群在使用什么樣的瀏覽器。當(dāng)然，我講這些并不是要求您去學(xué)習(xí)HTML、CSS、JS代碼然后進行前端開發(fā)，因為在現(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。

動態(tài)網(wǎng)頁

了解完靜態(tài)網(wǎng)頁還不夠，現(xiàn)在讓我們談?wù)劸W(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)頁的語言，當(dā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

我們經(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刪除，保留一半的動作。

視差滾動

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

以上就是從事成都網(wǎng)站建設(shè)的成都創(chuàng)新互聯(lián)公司的網(wǎng)站建設(shè)工程師為大家?guī)淼挠嘘P(guān)網(wǎng)站建設(shè)的相關(guān)技術(shù)解決內(nèi)容，希望大家能夠喜歡，如果大家對網(wǎng)站建設(shè)還有什么想要了解的，大家可以關(guān)注成都創(chuàng)新互聯(lián)官方公眾號“創(chuàng)新互聯(lián)π”在其中留言，我們會根據(jù)大家的需求在近期的文章為大家及時更新。

新聞標題：成都網(wǎng)站建設(shè)關(guān)于技術(shù)原理的講解
當(dāng)前地址：http://www.muchs.cn/news21/316721.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站內(nèi)鏈、用戶體驗、網(wǎng)站策劃、手機網(wǎng)站建設(shè)、定制網(wǎng)站

廣告

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