第一组：婚纱工作室分析.doc

JavaScript程序设计 信息工程系 二〇一六年一月 一、任务要求与Amazeui，中国首个开源 HTML5 跨屏前端框架后台管理提供对前台信息的管理或图片的添加、修改、删除、搜索）及对预约和在线咨询的应答。线留言或预约时的验证，图片展示特效，以及图片查看时的显示文字管理使用在线编辑器录入 工作任务 计划完成时间 负责人 对网站框架进行部署、完成后台的作品展示的管理界面和留言的管理界面 2016年1月1日 对网站框架进行部署、完成后台预约服务的管理界面 2016年1月14日 何谊清 完成前台首页的界面以及前台预约服务的表单界面 2016年1月14日 张景胜 网站数据的采集以及前台作品展示的界面 2016年1月14日 陈玉莲 网页所需素材的收集以及留言板的界面 2016年1月14日 黄炳贵 2.2网站文件说明 说明：本网站主要的目录为：Admin文件夹（包含后台管理界面的模板文件和后台管理界面的框架文件），Home文件夹（包含前台管理界面的模板文件和前台管理界面的框架文件）， Public文件夹（包含样式表文件、自定义字体文件、图片、JavaScript文件、jQuery文件、基于jQuery开发的插件），目录树结构具体如下图所示： 图 2.2.1 网站目录树结构 说明：在Admin文件夹下，模板文件是存放在View文件夹下，该文件夹下又分为Admin文件夹（存放模板文件）和Public文件夹（存放框架文件），Admin文件夹下有message.html（留言管理页面）、product.html（作品展示管理页面）、service.html（预约服务管理页面），Public文件夹下有base.html（后台管理框架页面），后台管理界面目录树结构具体如下图所示： 图 2.2.2 后台管理界面目录树结构 说明：在Home文件夹下，模板文件是存放在View文件夹下，该文件夹下又分为Index文件夹（存放模板文件）和Public文件夹（存放框架文件），Index文件夹下有index.html（工作室介绍信息页面）、message.html（留言页面）、product.html（作品展示页面）、service.html（预约服务页面），Public文件夹下有base.html（后台管理框架页面），前台管理界面目录树结构具体如下图所示： 图 2.2.3 前台管理界面 说明：在Public文件夹下，有css文件夹（存放样式表文件），fonts文件夹（自定义字体文件）、images文件夹（存放图片文件）、js文件夹（JavaScript文件、jQuery文件、基于jQuery开发的插件）。在css文件夹下有admin.min.css（前端框架样式表，amazeui框架源码文件）、amazeui.min.css（前台管理界面样式表，amazeui框架源码文件）、wd.css（自定义样式表文件）；在js文件夹下有amazeui.ie8polyfill.min.js（兼容IE 8以下的浏览器脚本，amazeui框架源码文件）、amazeui.min.js（前端框架脚本，amazeui框架源码文件）、jquery.min.js（JavaScript库）、kinercode.js（原生JavaScript生成验证码图片插件）、wd.js（自定义函数、插件、调用插件的脚本）、wookmark.min.js（基于jQuery开发的瀑布流插件）、zoom.min.js（基于jQuery开发的图片预览插件）、zzsc.js（利用最新的HTML5技术开发的跳动的时间插件）。 图 2.2.4 资源目录结构 2.3网站主要界面的实现 作品展示页面 当用户预览作品展示页面时，由于不同的分辨率或者不同大小的图片会带来影响，所以本页面引入了瀑布流插件，当用户点击某一张图片时是可以进行上一张、下一张的预览。附图如下： 图 大分辨率预览 图 中分辨率预览 图 小分辨率预览 图 图片预览 页面的主要HTML代码如下： div class=brand-list id=brand-waterfall ul class=am-list gallery id=tiles lia href=images/wd1.jpgimg src=images/wd1.jpg alt=/a/li lia href=images/wd1.jpgimg src=images/wd2.jpg alt=/a/li … …(省略) /ul /div 引入瀑布流插件，添加执行瀑布流的容器id为tiles，添加gallery即可 script type=text/