網(wǎng)站建設(shè)師在做項(xiàng)目之前必須了解網(wǎng)頁(yè)背后的技術(shù)原理，技術(shù)決定了哪些設(shè)計(jì)和交互是可以實(shí)現(xiàn)的、哪些是不可以的。同時(shí)技術(shù)原理也決定了我們需要如何配合前端工程師來(lái)完成一些復(fù)雜的交互。其實(shí)在過(guò)去網(wǎng)頁(yè)前端工程師和設(shè)計(jì)師是一個(gè)崗位，就叫做網(wǎng)頁(yè)美工，這個(gè)職位需要在完成視覺(jué)設(shè)計(jì)后把頁(yè)面做成靜態(tài)網(wǎng)頁(yè)交給下面的環(huán)節(jié)。隨著分工越來(lái)越細(xì)致，產(chǎn)生了網(wǎng)站設(shè)計(jì)師和前端工程師兩個(gè)工種。但是網(wǎng)站設(shè)計(jì)師不可以脫離技術(shù)局限天花亂墜地去設(shè)計(jì)。
下面讓我們來(lái)了解網(wǎng)站的基本存儲(chǔ)原理：在您的電腦C盤保存一個(gè)叫l(wèi)ogo.jpg的圖片，然后在瀏覽器打開(kāi)這個(gè)網(wǎng)址：C:\logo.jpg你看到了什么？對(duì)，就是這張圖片。這就是網(wǎng)站的原理：網(wǎng)站的資源和文件存儲(chǔ)在一個(gè)類似我們電腦的東西里，那就是服務(wù)器。我們通過(guò)域名來(lái)調(diào)取網(wǎng)中不同的頁(yè)面和文件，如果服務(wù)器關(guān)機(jī)了那么網(wǎng)站也就癱瘓了。每次當(dāng)我們通過(guò)瀏覽器訪問(wèn)網(wǎng)站時(shí)，敲擊一個(gè)網(wǎng)址，這時(shí)這個(gè)域名會(huì)轉(zhuǎn)向一個(gè)IP地址，這個(gè)IP地址就是服務(wù)器所在的門牌號(hào)碼。找到了以后，我們的瀏覽器會(huì)從服務(wù)器上下載網(wǎng)站的代碼并把代碼翻譯成我們能看懂的界面，比如文字、邊框、表格等實(shí)際上都是代碼的形式。瀏覽器還會(huì)把網(wǎng)站中所需要的圖片、視頻等單獨(dú)下載到緩存里。當(dāng)我們通過(guò)表單輸入用戶名和密碼時(shí)，我們的信息就會(huì)上傳到服務(wù)器中，服務(wù)器處理完（比如登陸成功這個(gè)信息）然后再下發(fā)給我們的瀏覽器。所以平時(shí)我們?cè)L問(wèn)網(wǎng)站時(shí)，我們的電腦和瀏覽器要通過(guò)互聯(lián)網(wǎng)與服務(wù)器進(jìn)行多次“握手”。當(dāng)然老“握手”會(huì)造成加載速度變慢，于是我們聰明的瀏覽器會(huì)把已經(jīng)下載過(guò)的資源緩存下來(lái)，避免浪費(fèi)。這個(gè)機(jī)制就是“cookies”：瀏覽器會(huì)自動(dòng)存儲(chǔ)你訪問(wèn)過(guò)的網(wǎng)址、網(wǎng)站圖片、視頻、表單信息等。
基于鼠標(biāo)的交互
在不久的未來(lái)，個(gè)人電腦可能通過(guò)多點(diǎn)觸控、語(yǔ)音交互等方式與我們交互，但目前網(wǎng)站設(shè)計(jì)最主流的交互方式還是鼠標(biāo)和鍵盤。來(lái)讓我們看看鼠標(biāo)有什么結(jié)構(gòu)吧！我們對(duì)鼠標(biāo)的使用無(wú)外乎移動(dòng)、左鍵、右鍵、拖拽四種方式。我們?cè)陧?yè)面中的大部分操作都是通過(guò)鼠標(biāo)左鍵點(diǎn)擊完成的，所以網(wǎng)頁(yè)也是點(diǎn)擊的藝術(shù)。右鍵一般會(huì)喚起右鍵菜單，但是很多網(wǎng)站與網(wǎng)頁(yè)應(yīng)用程序也會(huì)將右鍵自定義設(shè)計(jì)一些操作和交互。與鼠標(biāo)發(fā)生交互的主要是超鏈接與按鈕。那么讓我們來(lái)了解一下超鏈接的四個(gè)狀態(tài)吧（前端術(shù)語(yǔ)是：超鏈接標(biāo)簽的CSS四個(gè)偽類）。
按鈕與文字的不同狀態(tài)
Link是指超鏈接正常的時(shí)候的狀態(tài)。一般超鏈接需要與普通文字區(qū)別開(kāi)來(lái)，比如換一種顏色或者加下劃線。當(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è)新聞后用戶可能不知道自己看過(guò)沒(méi)看過(guò)這條新聞了。所以新浪網(wǎng)使用了Visited屬性，點(diǎn)擊后的新聞?lì)伾筒灰粯恿耍奖阌脩魠^(qū)別自己哪些新聞還沒(méi)有瀏覽。
Hover：是超鏈接鼠標(biāo)經(jīng)過(guò)狀態(tài)。這個(gè)狀態(tài)是連接中最為重要的狀態(tài)。其實(shí)不只超鏈接，按鈕和圖片以及視頻等一切可交互的元素都應(yīng)該設(shè)置Hover屬性，也就是鼠標(biāo)懸停時(shí)的狀態(tài)。一般來(lái)說(shuō)變換顏色和放大是Hover狀態(tài)的基本方式。
Active：是指超鏈接的激活狀態(tài)。點(diǎn)擊后超鏈接可以通過(guò)CSS加載一個(gè)狀態(tài)。
同樣的鏈接樣式也可以應(yīng)用在圖片、按鈕、表單之上。點(diǎn)擊、鼠標(biāo)懸停、鼠標(biāo)按下都可以設(shè)計(jì)成不同的樣式，方便用戶通過(guò)鼠標(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)頁(yè)
了解完基本技術(shù)背景、鼠標(biāo)的交互之后，讓我們來(lái)聊點(diǎn)真格的。我們一般看到的網(wǎng)頁(yè)都是靜態(tài)網(wǎng)頁(yè)。靜態(tài)網(wǎng)頁(yè)是由HTML編譯的，我們?cè)诜?wù)器上存儲(chǔ)的網(wǎng)頁(yè)代碼基本都是HTML格式。HTML全稱是HyperText Markup Language，即超文本標(biāo)記語(yǔ)言?！俺谋尽笔钦f(shuō)這種語(yǔ)言內(nèi)可以包含文字元素以及調(diào)用圖片、鏈接、音樂(lè)等非文字元素。HTML語(yǔ)言對(duì)于沒(méi)有編程的人來(lái)說(shuō)可能會(huì)很頭疼，但是它已經(jīng)是所有編程代碼中最簡(jiǎn)單的一種了。別緊張，你可以把它當(dāng)做摩爾代碼，它是服務(wù)器和瀏覽器之間的密語(yǔ)，瀏覽器會(huì)將這些密語(yǔ)翻譯成我們能看懂的色彩和鏈接等。那么如果我們用HTML語(yǔ)言寫(xiě)一段文字會(huì)是什么樣呢？
模擬代碼編譯過(guò)程
沒(méi)錯(cuò)，代碼就是這么一點(diǎn)一點(diǎn)編起來(lái)的。在任何網(wǎng)站空白處右鍵點(diǎn)擊查看網(wǎng)頁(yè)源代碼你就可以看到網(wǎng)頁(yè)的HTML代碼啦。HTML這種代碼是由一個(gè)國(guó)際組織 - W3C發(fā)布和維護(hù)的。W3C創(chuàng)建于1994年，是網(wǎng)站國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。W3C已經(jīng)發(fā)布了HTML的諸多版本，其中影響最深遠(yuǎn)的是HTML4版本。而HTML5簡(jiǎn)稱H5則可以說(shuō)是劃時(shí)代的版本了。H5的標(biāo)簽更加接近現(xiàn)代，并且本身可以播放視頻，這就可以淘汰掉Flash插件了。（Flash插件帶來(lái)了比如系統(tǒng)漏洞、加載速度過(guò)慢等問(wèn)題）同時(shí)H5對(duì)多平臺(tái)支持很好，所以適應(yīng)移動(dòng)端為王的當(dāng)今時(shí)代。H5甚至還可以變成游戲、Webapp（在網(wǎng)頁(yè)上如本地程序一樣工作的網(wǎng)站，比如藍(lán)湖等）、多媒體等多種形式?？墒怯捎贗E瀏覽器這類不支持HTML5效果的瀏覽器在用戶中占比還很高，所以造成了HTML5發(fā)展的制約。瀏覽器可以理解為一個(gè)代碼閱讀器，由于它對(duì)HTML5代碼的翻譯工作不好就會(huì)造成所謂“兼容性”的問(wèn)題。比如HTML5中可以通過(guò)代碼給一個(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ì)這種問(wèn)題也有一些解決方案，比如減少對(duì)用戶占比不高瀏覽器的支持、對(duì)不好搞的瀏覽器單獨(dú)加載特定的適配代碼等。道高一尺魔高一丈呀。
其他前端語(yǔ)言
有了HTML這個(gè)骨架，加上圖片和多媒體后，網(wǎng)站的發(fā)展速度就更快了。但是服務(wù)器的損耗很大：所有用戶都需要重復(fù)地來(lái)服務(wù)器下載代碼和圖片等資源進(jìn)行“握手”，而且很多HTML代碼都是重復(fù)的，造成了資源的浪費(fèi)。比如，如果我網(wǎng)站的頭部都是黃色的、鏈接都是藍(lán)色的，那么每個(gè)頁(yè)面都會(huì)啰嗦這幾句代碼。這個(gè)問(wèn)題沒(méi)多久就被一種嶄新的代碼解決了：CSS技術(shù)。CSS是層疊樣式表的意思：我們可以理解為現(xiàn)在把網(wǎng)站的樣式（顏色、大小、位置等樣式信息）也就是CSS和網(wǎng)站的內(nèi)容（文字、圖片、鏈接等內(nèi)容信息）也就是HTML完全分開(kāi)，并且一個(gè)網(wǎng)站可以下載一份CSS然后不同頁(yè)面都調(diào)取這份CSS的緩存，那么就節(jié)省了服務(wù)器資源。另外，由于網(wǎng)站需要一些交互效果，比如點(diǎn)擊特效和菜單特效等，那么需要前端工程師使用Javas cript代碼來(lái)配合。Javas cript是一種比較短小精悍的語(yǔ)言，構(gòu)建一些基于瀏覽器的特效非常順手。所以目前主流的網(wǎng)站配置是HTML5+CSS3+JS代碼的組合，當(dāng)然為了兼容那些低端瀏覽器也可能使用HTML4+CSS+JS的套餐。這取決于我們的主要目標(biāo)用戶群在使用什么樣的瀏覽器。當(dāng)然，我講這些并不是要求您去學(xué)習(xí)HTML、CSS、JS代碼然后進(jìn)行前端開(kāi)發(fā)，因?yàn)樵诂F(xiàn)代互聯(lián)網(wǎng)公司里已經(jīng)有專業(yè)的前端工程師了。我們了解這些主要是要理解前端工程師的工作以便更好地配合他們。
動(dòng)態(tài)網(wǎng)頁(yè)
了解完靜態(tài)網(wǎng)頁(yè)還不夠，現(xiàn)在讓我們談?wù)劸W(wǎng)站如何動(dòng)起來(lái)。動(dòng)態(tài)網(wǎng)頁(yè)不是說(shuō)它有狂拽酷炫的動(dòng)畫(huà)，而是動(dòng)態(tài)網(wǎng)頁(yè)會(huì)隨著時(shí)間、內(nèi)容和數(shù)據(jù)庫(kù)的調(diào)用而產(chǎn)生動(dòng)態(tài)的網(wǎng)頁(yè)。比如今天看到的新聞網(wǎng)站和昨天的新聞肯定不一樣了，可是網(wǎng)站首頁(yè)的HTML代碼并不需要人去手工修改，而是讓小編通過(guò)后臺(tái)錄入新聞、上傳圖片就好了。小編上傳后臺(tái)的過(guò)程就會(huì)輸入數(shù)據(jù)庫(kù)，而動(dòng)態(tài)網(wǎng)頁(yè)又是調(diào)取數(shù)據(jù)庫(kù)內(nèi)容顯示給用戶的一種形式。動(dòng)態(tài)網(wǎng)頁(yè)會(huì)隨時(shí)調(diào)取數(shù)據(jù)庫(kù)中的信息給用戶，而對(duì)用戶來(lái)說(shuō)似乎靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)長(zhǎng)得都是一樣的。那么最傻瓜的判斷方式是看網(wǎng)址結(jié)尾，靜態(tài)網(wǎng)頁(yè)結(jié)尾是html或htm，而動(dòng)態(tài)網(wǎng)頁(yè)由于使用了高級(jí)網(wǎng)頁(yè)編程技術(shù)，結(jié)尾則是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是動(dòng)態(tài)網(wǎng)頁(yè)的語(yǔ)言，當(dāng)然有的時(shí)候?yàn)榱俗尵W(wǎng)站效率提升也會(huì)使用偽靜態(tài)結(jié)構(gòu)，結(jié)尾和靜態(tài)網(wǎng)頁(yè)就一致了，但是實(shí)際上是會(huì)在用戶訪問(wèn)前調(diào)取一遍數(shù)據(jù)庫(kù)的。同時(shí)動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)址會(huì)有一個(gè)特點(diǎn)，含有？符號(hào)。動(dòng)態(tài)語(yǔ)言目前最火的是Php，較早而現(xiàn)在比較少見(jiàn)的是Asp、Cgi，最安全的是Jsp，所以很多銀行采用JSP編譯。了解完這些，我們基本就弄清楚網(wǎng)站的運(yùn)行原理了。
主流后臺(tái)編譯語(yǔ)言：PHP ASP JSP CGI
我們經(jīng)?？吹骄W(wǎng)站中會(huì)有動(dòng)畫(huà)，那么動(dòng)畫(huà)實(shí)現(xiàn)的原理一般有如下這么幾個(gè)：第一，HTML5視頻播放；這種方式缺點(diǎn)就是不兼容低端瀏覽器。第二，F(xiàn)lash Player播放器播放；這種方式的缺點(diǎn)是Flash安全性很低而且效率慢。第三，動(dòng)畫(huà)使用Gif格式；這種方式的問(wèn)題是動(dòng)畫(huà)長(zhǎng)度不夠，并且這個(gè)格式僅僅支持透明和不透明兩級(jí)屬性。那么像Google首頁(yè)Doodle的動(dòng)畫(huà)是怎么實(shí)現(xiàn)的呢？這種技術(shù)叫做：雪碧圖。CSS雪碧 即CSS Sprite，也有人叫CSS精靈，它是一種CSS圖像合并技術(shù)。它本身調(diào)用的圖片是支持多級(jí)透明的PNG格式，然后把動(dòng)畫(huà)并排排列出來(lái)。比如一個(gè)卡通人物的動(dòng)畫(huà)每幀寬度是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，然后過(guò)一秒鐘代碼會(huì)悄悄移動(dòng)100px我們就看到了動(dòng)作2。由于速度很快就讓我們看到了連續(xù)動(dòng)畫(huà)。雪碧圖也有自身的缺點(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)頁(yè)滾動(dòng)，滾動(dòng)時(shí)頁(yè)面中三層圖片運(yùn)動(dòng)速率和位移距離不同。這樣給人造成的視覺(jué)體驗(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è)的石家莊尚武科技公司的網(wǎng)站建設(shè)工程師為大家?guī)?lái)的有關(guān)網(wǎng)站建設(shè)的相關(guān)技術(shù)解決內(nèi)容，希望大家能夠喜歡，如果大家對(duì)網(wǎng)站建設(shè)還有什么想要了解的，大家可以關(guān)注石家莊尚武科技官方公眾號(hào)“尚武科技π”在其中留言，我們會(huì)根據(jù)大家的需求在近期的文章為大家及時(shí)更新。
睿億網(wǎng)絡(luò)用心服務(wù)的團(tuán)隊(duì)，竭誠(chéng)為您服務(wù) 
客服不能及時(shí)回復(fù)您，您可點(diǎn)擊QQ進(jìn)行交談 
