维纳斯精致婚纱摄影网
目录
一、引言 1
（一）选题简介 1
（二）选题背景 1
二、开发工具的介绍 1
三、网站前台规划 1
（一）网站主体规划 1
（二）网页框架结构 2
四、网站设计与实现 4
（一）首页设计与实现 4
（二）子页布局的设计与实现 6
五、后台需求分析 14
（一）功能需求 14
六、数据库设计与实现 14
（一）数据库的需求分析 14
七、系统设计 16
（一）系统结构设计 16
（二）系统公共设计类如下： 19
八．系统实现 19
（一）前台登录注册界面 19
（三）用户预约与添加购物车 22
（四）婚纱展示 24
（五）后台登录 25
（六）场地信息管理 27
（七）婚纱信息管理 30
（八）订单管理 31
总结 33
致谢 34
参考文献 34
一、引言
（一）选题简介
本网站主要有婚纱摄影作品的展示、场地的介绍，店铺的介绍等几个方面让消费者更详细更快捷更方便的了解维纳斯婚纱，运用div+css技术制作整个前后台的页面，利用jQuery技术和js技术美化网站，制作前台的动态效果，结合javaweb与数据库所学的知识来制作前后台，前台：用户登录登出与注册、内容展示、提交留言、会员用户可以预约看中的拍摄景地，后台负责添加删除修改拍摄景地信息等功能。
（二）选题背景
网店比起实体店能够让客户更快捷的了解维纳斯婚纱， *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
人们可以通过网络了解店里有哪些婚纱和摄影场地，遇见中意景地的可提前预约。可以节约客户的时间，也能让更过人知道维纳斯婚纱店。
二、开发工具的介绍
维纳斯精致婚纱摄影网站的开发使用了MyEclispe6.5（开发平台）+tomcat(服务器)+JDK，SQL server 2008 (数据库软件)，Dreamweaver8.0(开发工具)及Photoshop等软件。具体的工具介绍如下：
Dreamweaver8.0，它能够更快、更智能化的工作，能快速从一个工作环境切换到下一个环境，是Macromedia公司出品的一款网页编辑工具。它使每一个网页设计者和开发者编写出理想的效果。
MyEclipse6.5它的主要功能就是用于后台的开发，是一款功能强大且应用广泛的一款软件。
Photoshop是一款平面设计用软件，主要用于做位图,照片处理,婚纱后期处理等方面，是专业人士的理想选择。
SQL Server 2008是一款提供了强大的安全性、可靠性和拓展性的软件。由于它使用方便、可靠性高并且有着强大的功能，深受网站开发者的喜爱。
三、网站前台规划
（一）网站主体规划
网页的一级子页面包括时尚婚纱、摄影基地、甜蜜炫耀、关于我们、更多资讯。二级子页面包括幸福婚纱照、精英团队、品牌荣誉、品质服务、合作客户、地理位置、婚纱资讯、客户留言、新闻资讯。具体如图3-1所示：
图3-1网站功能结构图
（二）网页框架结构
1.首页
（1）头部设计
头部分为两部分logo与导航，导航分别依次为首页，时尚婚纱，摄影基地，甜蜜炫耀，关于我们，更多资讯。方便用户寻找想要的内容。
（2）主体内容设计
首页的整体布局以简约大方为主，给用户以新颖的感觉。头部包含了logo和导航，左侧内容是一对新人的结婚照十分的唯美。右侧内容包含时尚婚纱的图片链接，新闻资讯的滚动显示，摄影基地和甜蜜炫耀的链接。具体框架如图3-2所示：
logo
导航
新人图片
相关链接
版权及底部导航
图3-2首页布局框架
2.子页
子页有两种布局模式，top部分包括logo、导航条。具体框架如图3-3和图3-4所示:
图片
logo
导航
图片
二级导航与联系方式
主体内容
版权及底部导航
图3-3第一种子页布局
图片
Logo
导航
图片
主体内容
版权及底部导航
图3-4第二种子页布局
（三）DIV+CSS布局
网站的布局在制作网站时十分重要。我主要使用Dreamweaver编辑器创建HTML页面和CSS样式页面。在HTML中利用DIV+CSS编写框架，然后链接css样式使网页能够展现自己想要的效果并且通过浏览功能在浏览器上查看自己编写的页面是否变形或窜位。Dreamweaver生成的代码拥有良好的可读性，设计者能够轻易掌握代全局代码并且加以修改。这样很大的提高了网页的编辑速度。
与table布局相比较，DIV＋CSS布局采用以“块”为结构的定位形式，实现分层定位，也方便了修改。在页面中寻找错误的时候也快捷些。根据层中的id名，到CSS里找到相应的id，在不会破坏页面其他部分的情况下完善效果。
四、网站设计与实现
（一）首页设计与实现
1.首页div结构与css样式
#all{}里嵌套了三个层分别是#head{}，#content{}，#footer{}。
#head{}里放置了一个table，里面是logo与导航的排列。
#footer{}放置底部链接和版权代码如下
#content{}内嵌套了#left{}和#right{}两个层，设置样式为左飘，使其并列显示。
#right{}内嵌套了三个层分别为#r1{},#r2{},#r3{}。
#r2{}内是一个用css样式设置的一个列滚动效果，鼠标移动到滚动文字，文字会暂停。代码如下所示：
#r2
#r3
图4-1首页结构样式图
3.实现效果
首页以咖啡色为主色调，导航内容分为首页、时尚婚纱、摄影基地、甜蜜炫耀 、关于我们、更多资讯这几个模块。首页面的主体部分采用分割式的方法，左侧是一对新人的唯美婚纱照，增加了审美效果。右侧分为时尚婚纱的图片链接，新闻的显示列表及其滚动特效，摄影基地及其链接，甜蜜炫耀及其链接。具体效果如图4-2所示：
一、引言 1
（一）选题简介 1
（二）选题背景 1
二、开发工具的介绍 1
三、网站前台规划 1
（一）网站主体规划 1
（二）网页框架结构 2
四、网站设计与实现 4
（一）首页设计与实现 4
（二）子页布局的设计与实现 6
五、后台需求分析 14
（一）功能需求 14
六、数据库设计与实现 14
（一）数据库的需求分析 14
七、系统设计 16
（一）系统结构设计 16
（二）系统公共设计类如下： 19
八．系统实现 19
（一）前台登录注册界面 19
（三）用户预约与添加购物车 22
（四）婚纱展示 24
（五）后台登录 25
（六）场地信息管理 27
（七）婚纱信息管理 30
（八）订单管理 31
总结 33
致谢 34
参考文献 34
一、引言
（一）选题简介
本网站主要有婚纱摄影作品的展示、场地的介绍，店铺的介绍等几个方面让消费者更详细更快捷更方便的了解维纳斯婚纱，运用div+css技术制作整个前后台的页面，利用jQuery技术和js技术美化网站，制作前台的动态效果，结合javaweb与数据库所学的知识来制作前后台，前台：用户登录登出与注册、内容展示、提交留言、会员用户可以预约看中的拍摄景地，后台负责添加删除修改拍摄景地信息等功能。
（二）选题背景
网店比起实体店能够让客户更快捷的了解维纳斯婚纱， *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
人们可以通过网络了解店里有哪些婚纱和摄影场地，遇见中意景地的可提前预约。可以节约客户的时间，也能让更过人知道维纳斯婚纱店。
二、开发工具的介绍
维纳斯精致婚纱摄影网站的开发使用了MyEclispe6.5（开发平台）+tomcat(服务器)+JDK，SQL server 2008 (数据库软件)，Dreamweaver8.0(开发工具)及Photoshop等软件。具体的工具介绍如下：
Dreamweaver8.0，它能够更快、更智能化的工作，能快速从一个工作环境切换到下一个环境，是Macromedia公司出品的一款网页编辑工具。它使每一个网页设计者和开发者编写出理想的效果。
MyEclipse6.5它的主要功能就是用于后台的开发，是一款功能强大且应用广泛的一款软件。
Photoshop是一款平面设计用软件，主要用于做位图,照片处理,婚纱后期处理等方面，是专业人士的理想选择。
SQL Server 2008是一款提供了强大的安全性、可靠性和拓展性的软件。由于它使用方便、可靠性高并且有着强大的功能，深受网站开发者的喜爱。
三、网站前台规划
（一）网站主体规划
网页的一级子页面包括时尚婚纱、摄影基地、甜蜜炫耀、关于我们、更多资讯。二级子页面包括幸福婚纱照、精英团队、品牌荣誉、品质服务、合作客户、地理位置、婚纱资讯、客户留言、新闻资讯。具体如图3-1所示：
图3-1网站功能结构图
（二）网页框架结构
1.首页
（1）头部设计
头部分为两部分logo与导航，导航分别依次为首页，时尚婚纱，摄影基地，甜蜜炫耀，关于我们，更多资讯。方便用户寻找想要的内容。
（2）主体内容设计
首页的整体布局以简约大方为主，给用户以新颖的感觉。头部包含了logo和导航，左侧内容是一对新人的结婚照十分的唯美。右侧内容包含时尚婚纱的图片链接，新闻资讯的滚动显示，摄影基地和甜蜜炫耀的链接。具体框架如图3-2所示：
logo
导航
新人图片
相关链接
版权及底部导航
图3-2首页布局框架
2.子页
子页有两种布局模式，top部分包括logo、导航条。具体框架如图3-3和图3-4所示:
图片
logo
导航
图片
二级导航与联系方式
主体内容
版权及底部导航
图3-3第一种子页布局
图片
Logo
导航
图片
主体内容
版权及底部导航
图3-4第二种子页布局
（三）DIV+CSS布局
网站的布局在制作网站时十分重要。我主要使用Dreamweaver编辑器创建HTML页面和CSS样式页面。在HTML中利用DIV+CSS编写框架，然后链接css样式使网页能够展现自己想要的效果并且通过浏览功能在浏览器上查看自己编写的页面是否变形或窜位。Dreamweaver生成的代码拥有良好的可读性，设计者能够轻易掌握代全局代码并且加以修改。这样很大的提高了网页的编辑速度。
与table布局相比较，DIV＋CSS布局采用以“块”为结构的定位形式，实现分层定位，也方便了修改。在页面中寻找错误的时候也快捷些。根据层中的id名，到CSS里找到相应的id，在不会破坏页面其他部分的情况下完善效果。
四、网站设计与实现
（一）首页设计与实现
1.首页div结构与css样式
#all{}里嵌套了三个层分别是#head{}，#content{}，#footer{}。
#head{}里放置了一个table，里面是logo与导航的排列。
#footer{}放置底部链接和版权代码如下
#content{}内嵌套了#left{}和#right{}两个层，设置样式为左飘，使其并列显示。
#right{}内嵌套了三个层分别为#r1{},#r2{},#r3{}。
#r2{}内是一个用css样式设置的一个列滚动效果，鼠标移动到滚动文字，文字会暂停。代码如下所示：
#r2
#r3
图4-1首页结构样式图
3.实现效果
首页以咖啡色为主色调，导航内容分为首页、时尚婚纱、摄影基地、甜蜜炫耀 、关于我们、更多资讯这几个模块。首页面的主体部分采用分割式的方法，左侧是一对新人的唯美婚纱照，增加了审美效果。右侧分为时尚婚纱的图片链接，新闻的显示列表及其滚动特效，摄影基地及其链接，甜蜜炫耀及其链接。具体效果如图4-2所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1714.html
