婚纱商城”手机自适应网站开发
目录
一、引言 1
二、手机自适应网站需求分析 1
（一）需求分析 1
（二）可行性分析 1
三、网站设计开发技术选用 2
（一）HTML5 2
（二）JavaScript 2
（三）MyEclipse 2
（四）Mysql 2
（五）Tomcat 2
四、系统分析与设计 3
（一）模块设计 3
（二）数据库设计 4
1．数据的描述 4
2．数据库结构 4
五、自适应网站设计与实现 6
（一）手机自适应网页前台设计 6
（二）“婚纱商城”手机自适应网站实现 7
1．首页栏目 7
2．作品展示栏目 7
3．服务套系栏目 8
4．新闻动态栏目 8
5．在线留言栏目 9
6．关于本网栏目 9
7．内景作品详情 10
（三）自适应设计的相关代码简介 10
总结 12
致谢 13
参考文献 14
一、引言
从2015年第37次《中国互联网络发展状况统计报告》得出手机浏览网页成为主流。一般网页在手机上浏览出现的不稳定，给用户带来诸多不便。为了解决网页出现不稳定因数，实现用户浏览网页舒适。本课题主要从页面内容和利用主流技术来建设手机自适应网页，来展示自适应网页更好的呈现在手机，达到用户需求。
“婚纱商城”手机自适应网站采用DW进行网页建设，Viewport（视区概念）对手机自适应的布局。网站前台主要展示婚纱商城的婚纱展示和新闻动态。网站后台的搭建主要是运用对MySQL的数据库搭建，利用MyEclipse,Tomcat,JDK对数据库的管理实现对婚纱商城的商品和新闻的增删。
二、手机自适应网站需求分析
（一）需求分析
手机广泛的使用，人们可以在午休、在电车、在各种休息的时候都可以打开手机浏览网页，观看自己喜欢的各类信息。很多网站打开是很多类容全部挤在一起，需要用户手动的去放大，使客户体
*好棒文|www.hbsrm.com +Q: ^3^5^1^9^1^6^0^7^2^*
验不舒适。更多的网站是手机打开是内容特别多，不便客户浏览观看。手机自适应网站是解决了这一类问题设计的，网站网页必须要自适应用户所的手机，类容必须简洁、布局清晰方便用户去观看。
本课题是拿“婚纱商城”手机自适应网站，来呈现自适应网站的类容与布局，达到用户的需求。
（二）可行性分析
手机自适应网站用的开发坏境简单，适合更多人去制作与开发。如表21：
表21自适应网站开发坏境图
名称
内容
开发的系统
Windows 7、windows 8
开发的编辑器
Dreamweaver cs5
Submlie Text2
MyEclipse6.5
开发的浏览器
IE浏览器、Chrome浏览器、QQ浏览器
开发的数据库
SQL Server数据库 MySQL5.5数据库
开发的服务器有
Apache 服务器
三、网站设计开发技术选用
（一）HTML5
html5 (Web Hypertext Application Technology Working Group)。HTML5相对于以往的HTML标准规范，HTML5增加了新的元素和功能来创建更好的页面结构。HTML5的好处主要是程序员可以直接在网页上调试，省去很多时间，方便使用者更好的使用。
（二）JavaScript
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，采用对网页类容添加各种CSS等等，来时网页内容丰富。往往JavaScript是直接嵌套在网页类容，来实现功能方便在HTML里调试。本网站的建设过程中多次应用JavaScript实现特效。JavaScript优点有减少网络传输、方便操纵HTML对象、支持分布式运算。
（三）MyEclipse
MyEclipse平台是Eclipse的插件，支持代码编写、配置、测试以及除错。MyEclipse有非常完善的支持HTML、CSS、SQL等软件还具备完善的编码、调试、测试等功能。“婚纱商城”手机自适应网站就是采用MyEclipse、Tomcat和JDK的配置里编码、测试、发布完成的。还有值得介绍的是MyEclipse的bin文件夹下和src文件夹下分别存放着该工程的.class和Java文件。这是很多学过的人并不知道。
（四）Mysql
MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言。MySQL由于其占系统内存小、速度快、成本低廉，并且是开源等特点一般中小型企业主要选择的开发软件。所以很多人都是采用MySQL作为网站的数据库。“婚纱商城”手机自适应网站就是以MySQL作为数据库，通过Navicat for MySQL作为用户管理页面进行对数据库的管理。从而实现对数据的增删。
（五）Tomcat
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，通常在中小型企业得到普遍的运用，Tomcat 实际上运行JSP页面和Servlet。“婚纱商城”手机自适应网站就是通过Tomact的Servlet来运行在网页上显示结果。
四、系统分析与设计
（一）模块设计
手机自适应网站的模块设计应简洁明白方便用户观看。此处以“婚纱商城”手机自适应网站的模块设计首页后台页面布局。下面主要介绍婚纱商城首页模块设计。网站首页栏目结构如图41所示。
图41 网站首页模块图
（1）手机自适应的页面布局分为上中下，调理清晰。以下是“婚纱商城”手机自适应网站展现所有页面布局。首页包含LOGO、导航、banner、底部,布局如图42所示：
图 42首页设计示意图
（2）网站二级页面是新闻动态页面。通过婚纱首页导航可进入新闻列表页面。主要作用是显示近期网页的一些新闻动态，起三级页面导航作用。三级页面跟二级差别不大把列表内容改成类容详情。布局如图43所示:
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/799.html
