裝飾公司網(wǎng)站的設(shè)計及制作

陳穎博 張麗

摘 ?要：本次網(wǎng)站項目采用了wampServer 服務(wù)器、webstorm編輯器、phpstorm編輯器、Avcode切圖軟件，使用了apache mysql 以及ECS服務(wù)器的運(yùn)行環(huán)境，語言包括HTML5、CSS3、PHP、Less、Sql語句，網(wǎng)站首先采用ps以及CorelDraw進(jìn)行l(wèi)ogo的制作，Avcode和Fireworks設(shè)計網(wǎng)站前端的界面，在線配色器對網(wǎng)站進(jìn)行配色，下來網(wǎng)站的前端界面采用webstorm開發(fā)完成后，利用phpstorm開發(fā)后臺。

關(guān)鍵詞：在線客服;公告輪詢;后臺數(shù)據(jù)

一、網(wǎng)站設(shè)計

網(wǎng)站前端界面的設(shè)計是一個網(wǎng)站整站開發(fā)中的一個重要的環(huán)節(jié)，本次網(wǎng)站開發(fā)前端界面首先使用了Avcode軟件進(jìn)行前端的界面切圖，利用fireworks軟件進(jìn)行網(wǎng)站的靜態(tài)頁面的設(shè)計和制作，WebStorm是本次網(wǎng)站的代碼編輯軟件。利用Html5 CSS3以及jQuery Less實現(xiàn)了網(wǎng)站前端界面的全部特效和部分效果。網(wǎng)站前端界面的Logo使用PhotoShop進(jìn)行設(shè)計CD進(jìn)行制作，Icon使用了Iconfont進(jìn)行設(shè)計和取材，網(wǎng)站的字體使用Font Awesome字體庫利用H5中的功能引入。

（一）功能設(shè)計

尚品銘居飾官網(wǎng)

網(wǎng)站的前端特效常見有前端的輪播圖、按鈕特效、圖片特效等，本次論文采用H5? C3? jQuery來完成上述的前端特效，輪播圖利用jQuery和CSS3實現(xiàn)了首頁的焦點圖，導(dǎo)航欄等網(wǎng)頁其余特效都適當(dāng)?shù)牟扇×薺Query和CSS3實現(xiàn)。為了保證網(wǎng)頁對于瀏覽器的兼容性，項目采取了響應(yīng)式開發(fā)。

（二）前端設(shè)計

網(wǎng)頁的布局是一個老生常談的問題，一般網(wǎng)頁的布局基礎(chǔ)的是采取position定位，設(shè)置padding 或者margin外邊距等CSS2的方法來實現(xiàn)網(wǎng)頁圖片的網(wǎng)格化布局或者居中布局、start布局等效果，為了網(wǎng)站的健壯性和網(wǎng)頁布局的便捷，本次網(wǎng)站的布局大量的使用了flex布局，網(wǎng)格化布局采用了給予父盒子（display：flex;flex-wrap：wrap;）子盒子采用了（flex：0 1 50%）的方式，實現(xiàn)了子盒子在父盒子中自適應(yīng)的布局，而網(wǎng)站中的cons在父盒子中實現(xiàn)排列的布局，我這里使用了給予父盒子（display：flex;flex-wrap：wrap;），子盒子給予了（justify-content：space-between;），這里的wrap是什么？Flex-wrap是CSS3中新增的布局方式，簡單好用，不會出CSS2布局中出現(xiàn)的脫離文檔流浮動等問題。且對于移動端，webkit核心瀏覽器等使用這種布局方式是非常不錯的。wrap字面理解是換行的意思。所以flex-wrap就是用來指示是否換行的意思，我們父盒子默認(rèn)都是（flex-wrap：nowrap;）不換行的，所以我們在平常的開發(fā)中如果子盒子的溢出，父盒子會被擠下去，或者擠出去，導(dǎo)致布局混亂，但是我們這里采用給予一級父盒子換行給于二級父盒子justifiy進(jìn)行布局，可以很巧妙地實現(xiàn)新的網(wǎng)格布局。

二、網(wǎng)站開發(fā)

為了實現(xiàn)網(wǎng)站相應(yīng)的功能本次網(wǎng)站開發(fā)使用了一定的Api。分別是網(wǎng)站的地圖，qq客服，微信留言這三個功能。

（一）關(guān)鍵技術(shù)及工具介紹

1.百度地圖api介紹

我們的地圖使用了百度地圖的api，再進(jìn)行優(yōu)化和樣式的改造，過程中地圖的icon等出現(xiàn)問題，最后發(fā)現(xiàn)是地圖中本來使用的icon地址過于陳舊，使用了新的百度地圖icon地址鏈接過去然后在JavaScript中進(jìn)行修改就行了（http：//map.baidu.com/image/us_mk_ icon.png）。

2.微信留言功能介紹

微信實時留言是利用了網(wǎng)上的server醬服務(wù)器，采用了別人的服務(wù)器和自己微信的sdk。功能我自己寫了一個jQuery版本的ajax，實現(xiàn)了自己的手機(jī)和server醬服務(wù)器鏈接，，這樣就實現(xiàn)了網(wǎng)站用戶實時留言，我可以實時接收的效果。當(dāng)然自己寫的ajax代碼可能健壯性不夠好。后續(xù)會繼續(xù)修改，此處不過多贅述。

3. websocket輪詢功能及工具介紹

我們知道，輪詢就是每隔特定的時間間隔，由瀏覽器對服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的HTTP request模式帶來很明顯的缺點——瀏覽器需要不斷地向服務(wù)器發(fā)出請求，然而HTTP request的header是非常長的，里面包含的有用數(shù)據(jù)可能只是一個很小的值，這樣會占用很多的帶寬。我們平常使用輪詢進(jìn)行聊天室、行情分析、在線游戲等，本次使用輪詢實現(xiàn)網(wǎng)站公告的實時更新考慮了三個方面，輪詢有長輪詢、短輪詢、ajax輪詢、基于websocket協(xié)議的輪詢。

三、結(jié)束語

本次網(wǎng)站采用阿里云Ecs服務(wù)器和域名實現(xiàn)了在線訪問的效果。Ecs使用cmd命令安裝了寶塔面板，上傳文件和與本機(jī)對接采用了Putty。網(wǎng)站后臺功能采用了websocket協(xié)議和ajax，php等實現(xiàn)網(wǎng)站的后臺以及前端網(wǎng)站公告的實時輪詢。

參考文獻(xiàn)：

[1] Nicholas C.Zakas.JavaScript高級程序設(shè)計[M]，人民郵電出版社.

[2] amesEdwards [澳].CameronAdams JavaScript精粹（修訂版POD）[M]，人民郵電出版社.

作者簡介：

陳穎博（通訊作者），碩士，講師，安康學(xué)院電子與信息工程學(xué)院，研究方向：教育數(shù)據(jù)分析

張麗 安康學(xué)院電子與信息工程學(xué)院數(shù)字媒體技術(shù)專業(yè)本科生。