装饰公司网站的设计及制作

陈颖博 张丽

摘  要：本次网站项目采用了wampServer 服务器、webstorm编辑器、phpstorm编辑器、Avcode切图软件，使用了apache mysql 以及ECS服务器的运行环境，语言包括HTML5、CSS3、PHP、Less、Sql语句，网站首先采用ps以及CorelDraw进行logo的制作，Avcode和Fireworks设计网站前端的界面，在线配色器对网站进行配色，下来网站的前端界面采用webstorm开发完成后，利用phpstorm开发后台。

关键词：在线客服;公告轮询;后台数据

一、网站设计

网站前端界面的设计是一个网站整站开发中的一个重要的环节，本次网站开发前端界面首先使用了Avcode软件进行前端的界面切圖，利用fireworks软件进行网站的静态页面的设计和制作，WebStorm是本次网站的代码编辑软件。利用Html5 CSS3以及jQuery Less实现了网站前端界面的全部特效和部分效果。网站前端界面的Logo使用PhotoShop进行设计CD进行制作，Icon使用了Iconfont进行设计和取材，网站的字体使用Font Awesome字体库利用H5中的功能引入。

（一）功能设计

尚品铭居饰官网

网站的前端特效常见有前端的轮播图、按钮特效、图片特效等，本次论文采用H5  C3  jQuery来完成上述的前端特效，轮播图利用jQuery和CSS3实现了首页的焦点图，导航栏等网页其余特效都适当的采取了jQuery和CSS3实现。为了保证网页对于浏览器的兼容性，项目采取了响应式开发。

（二）前端设计

网页的布局是一个老生常谈的问题，一般网页的布局基础的是采取position定位，设置padding 或者margin外边距等CSS2的方法来实现网页图片的网格化布局或者居中布局、start布局等效果，为了网站的健壮性和网页布局的便捷，本次网站的布局大量的使用了flex布局，网格化布局采用了给予父盒子（display：flex;flex-wrap：wrap;）子盒子采用了（flex：0 1 50%）的方式，实现了子盒子在父盒子中自适应的布局，而网站中的cons在父盒子中实现排列的布局，我这里使用了给予父盒子（display：flex;flex-wrap：wrap;），子盒子给予了（justify-content：space-between;），这里的wrap是什么？Flex-wrap是CSS3中新增的布局方式，简单好用，不会出CSS2布局中出现的脱离文档流浮动等问题。且对于移动端，webkit核心浏览器等使用这种布局方式是非常不错的。wrap字面理解是换行的意思。所以flex-wrap就是用来指示是否换行的意思，我们父盒子默认都是（flex-wrap：nowrap;）不换行的，所以我们在平常的开发中如果子盒子的溢出，父盒子会被挤下去，或者挤出去，导致布局混乱，但是我们这里采用给予一级父盒子换行给于二级父盒子justifiy进行布局，可以很巧妙地实现新的网格布局。

二、网站开发

为了实现网站相应的功能本次网站开发使用了一定的Api。分别是网站的地图，qq客服，微信留言这三个功能。

（一）关键技术及工具介绍

1.百度地图api介绍

我们的地图使用了百度地图的api，再进行优化和样式的改造，过程中地图的icon等出现问题，最后发现是地图中本来使用的icon地址过于陈旧，使用了新的百度地图icon地址链接过去然后在JavaScript中进行修改就行了（http：//map.baidu.com/image/us_mk_ icon.png）。

2.微信留言功能介绍

微信实时留言是利用了网上的server酱服务器，采用了别人的服务器和自己微信的sdk。功能我自己写了一个jQuery版本的ajax，实现了自己的手机和server酱服务器链接，，这样就实现了网站用户实时留言，我可以实时接收的效果。当然自己写的ajax代码可能健壮性不够好。后续会继续修改，此处不过多赘述。

3. websocket轮询功能及工具介绍

我们知道，轮询就是每隔特定的时间间隔，由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request模式带来很明显的缺点——浏览器需要不断地向服务器发出请求，然而HTTP request的header是非常长的，里面包含的有用数据可能只是一个很小的值，这样会占用很多的带宽。我们平常使用轮询进行聊天室、行情分析、在线游戏等，本次使用轮询实现网站公告的实时更新考虑了三个方面，轮询有长轮询、短轮询、ajax轮询、基于websocket协议的轮询。

三、结束语

本次网站采用阿里云Ecs服务器和域名实现了在线访问的效果。Ecs使用cmd命令安装了宝塔面板，上传文件和与本机对接采用了Putty。网站后台功能采用了websocket协议和ajax，php等实现网站的后台以及前端网站公告的实时轮询。

参考文献：

[1] Nicholas C.Zakas.JavaScript高级程序设计[M]，人民邮电出版社.

[2] amesEdwards [澳].CameronAdams JavaScript精粹（修订版POD）[M]，人民邮电出版社.

作者简介：

陈颖博（通讯作者），硕士，讲师，安康学院电子与信息工程学院，研究方向：教育数据分析

张丽 安康学院电子与信息工程学院数字媒体技术专业本科生。