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

　　基于鼠標(biāo)的交互

在不久的未來，個(gè)人電腦可能通過多點(diǎn)觸控、語音交互等方式與我們交互，但目前網(wǎng)站設(shè)計(jì)最主流的交互方式還是鼠標(biāo)和鍵盤。來讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧！我們對(duì)鼠標(biāo)的使用無外乎移動(dòng)、左鍵、右鍵、拖拽四種方式。我們?cè)陧撁嬷械拇蟛糠植僮鞫际峭ㄟ^鼠標(biāo)左鍵點(diǎn)擊完成的，所以網(wǎng)頁也是點(diǎn)擊的藝術(shù)。右鍵一般會(huì)喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁應(yīng)用程序也會(huì)將右鍵自定義設(shè)計(jì)一些操作和交互。與鼠標(biāo)發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來了解一下超鏈接的四個(gè)狀態(tài)吧（前端術(shù)語是：超鏈接標(biāo)簽的CSS四個(gè)偽類）。

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

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

Visited是超鏈接被點(diǎn)擊以后的狀態(tài)。比如新浪網(wǎng)新聞非常多，所以點(diǎn)擊完一個(gè)新聞后用戶可能不知道自己看過沒看過這條新聞了。所以新浪網(wǎng)使用了Visited屬性，點(diǎn)擊后的新聞?lì)伾筒灰粯恿?，方便用戶區(qū)別自己哪些新聞還沒有瀏覽。

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

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

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

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

了解完基本技術(shù)背景、鼠標(biāo)的交互之后，讓我們來聊點(diǎn)真格的。我們一般看到的網(wǎng)頁都是靜態(tài)網(wǎng)頁。靜態(tài)網(wǎng)頁是由HTML編譯的，我們?cè)诜?wù)器上存儲(chǔ)的網(wǎng)頁代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標(biāo)記語言。“超文本”是說這種語言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂等非文字元素。HTML語言對(duì)于沒有編程的人來說可能會(huì)很頭疼，但是它已經(jīng)是所有編程代碼中最簡單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語，瀏覽器會(huì)將這些密語翻譯成我們能看懂的色彩和鏈接等。那么如果我們用HTML語言寫一段文字會(huì)是什么樣呢？

模擬代碼編譯過程

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

其他前端語言

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

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

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

主流后臺(tái)編譯語言：PHP ASP JSP CGi

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

視差滾動(dòng)

視差滾動(dòng)是一種運(yùn)動(dòng)速率不一樣的設(shè)計(jì)效果，用以實(shí)現(xiàn)空間感。比如密爾沃基警察局官網(wǎng)就大量運(yùn)用了視差滾動(dòng)效果。其實(shí)現(xiàn)原理是，代碼判定網(wǎng)頁滾動(dòng)，滾動(dòng)時(shí)頁面中三層圖片運(yùn)動(dòng)速率和位移距離不同。這樣給人造成的視覺體驗(yàn)仿佛是我們?cè)谖锢憩F(xiàn)實(shí)中看到的空間感一樣。視差滾動(dòng)已經(jīng)不是什么高新技術(shù)，如果你的網(wǎng)站比較適合視差滾動(dòng)，請(qǐng)大膽設(shè)計(jì)并和前端工程師提需求，相信前端工程師可以滿足你的要求。我們需要準(zhǔn)備的就是運(yùn)動(dòng)速率不同的分層靜態(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)容，希望大家能夠喜歡，如果大家對(duì)網(wǎng)站建設(shè)還有什么想要了解的，大家可以關(guān)注成都創(chuàng)新互聯(lián)官方公眾號(hào)“創(chuàng)新互聯(lián)π”在其中留言，我們會(huì)根據(jù)大家的需求在近期的文章為大家及時(shí)更新。

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

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

廣告

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