I Do婚庆网站说明书.docx
《I Do婚庆网站说明书.docx》由会员分享，可在线阅读，更多相关《I Do婚庆网站说明书.docx（25页珍藏版）》请在冰点文库上搜索。
IDo婚庆网站说明书
黄河水利职业技术学院
毕业设计
IDo婚庆网站设计说明书
学生姓名：
汪丹丹学号：
**********
指导教师：
陈萱职称：
副教授
专业：
电子商务1001
系（部）：
管理系
2012年12月25日
IDo婚庆网站设计说明书
汪丹丹
（黄河水利职业技术学院，河南开封475003）
摘要：
IDo婚庆网站是静态页面与动态页面相结合的全面的网站系统。
通过该网站向浏览者展示公司的全部产品和服务信息，浏览者也可以通过网站与公司在线交流沟通。
网站页面设计简洁大方、内容编排得当、观赏性与实用性并存。
关键词：
IDo婚庆网站页面设计栏目布局
一、设计背景与设计意义
（一）设计背景
《中国结婚产业发展调查报告》显示，我国最近5年来平均每年全国有811.36万对新人登记结婚，其中仅城镇新人在婚礼上的消费就达4183亿人民币。
目前全国每年结婚新人近1000万对，仅北京市2011年就有17万对新人注册结婚。
新婚人群愿意把积蓄的31%用于婚庆有关的消费。
近年来，我国婚庆消费处在不断地增长之中，婚庆产业虽然发展迅速，但也存在着一定的问题。
中国婚庆公司品牌成长还处在蹒跚学步阶段。
市场的良莠不齐、诚信缺失，是许多新人对新婚消费充满不信任。
因此，从行业规律看，婚庆市场洗牌在即，其市场有待于创新开发，要形成规模化、有序化、全方位的婚庆市场，走品牌化的道路。
其次，婚庆行业作为一个新兴行业目前发展到了一个瓶颈阶段，由于网络的发展，婚庆网站已经成为了婚庆市场的另一个战场，用好的网站来宣传自己的产品是非常好的销售模式。
所以本次毕业设计，我所选的题目是设计网上婚庆公司。
主要任务是根据相关资料及老师要求设计出一个美好的婚庆网站。
（二）设计意义
俗话说：
世上最美好的容颜是新娘的笑脸，人间最美好的时光是拜天地的那一刻。
由此可见：
“执子之手，与子偕老”的承诺需要一个美好而隆重的仪式作为凭证。
现在正值婚庆高峰，几乎天天可以看到一对对的新人在这美好的季节里结成眷属。
但新人们或多或少都有那么一些因工作，因时间而无法将自己的婚礼办得唯美时尚。
而随着网络技术的发展，许多人们都通过网络来安排婚礼事务，所以在网上开设婚庆公司，既可以让新人省时省力，又可以为他们提供多项选择。
ＩＤｏ婚庆网站,就是一个可在线浏览婚庆新闻、婚庆习俗、婚庆案例、婚庆产品、留言交流等功能的网站系统；在信息化的今天,用户甚至可以足不出户就能把自己的婚礼计划得十分缜密。
只要通过我们的网站，用户就能达到自己想要的结婚效果，享受到结婚带来的乐趣！
二、设计内容
（一）设计目标
1.充分利用互联网的强大优势资源把企业的产品或服务信息24×7的发送给世界的各个角落，客户可以通过网站随时较全面的了解企业动态；
2.从销售的角度来看，减少交易的中间环节，降低成本，同时也起到宣传的作用；
3.方便与客户互动来往，交流沟通，节省时间提高效率；
4.网站建设后，再进行有效的网络营销推广，可以进一步的主动抢占市场先机。
（二）设计要求
1.logo、flash及导航的设计，要求简单大方又要紧扣网站主题，体现该网站的特色。
2.网站首页要求内容编排得当、页面设计美观、观赏性与实用性并存，能够体现网站的首页所能实现的基本功能。
3.后台设计要清晰明了，方便管理员对产品展示、新闻动态等信息和服务的及时更新和管理。
三、相关技术与开发工具介绍
该网站的建设主要用到了Microsfotdreamwear、Adobephotoshop和Flash等网页设计工具，另外，还用到了大量的Asp语言、Javascript语言、Access、Div+Css对网站进行优化设计。
以下是主要设计工具的介绍：
Microsfotdreamwear是一款可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash等媒体格式和动态HTML。
Adobephotoshop是由美国Adobe公司开发的图象设计及处理软件，以其强大的功能备受用户的青睐。
它是一个集图像扫描、编辑修改、图像制作、广告创意、图像合成、图像输入/输出、网页制作于一体的专业图形处理软件。
Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。
Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。
四、网站的需求分析
（一）功能需求分析
首页功能需求：
通过主页版块设置，浏览者可以初步对网站的结构和主要内容有所了解，也使浏览者对该网站的创意设计有所肯定，让浏览者更加方便快捷的了解熟悉网站信息，将大体的网站情况一目了然的展示给浏览者。
二级页面功能需求：
通过二级页面将网站内容更加条理、更加详细、更加方便的展现给浏览者。
二级页面中将每个版块的内容具体化、深入化、详细化，让浏览者更加深入了解网站的相关服务和信息。
（二）结构化需求分析
1.数据流程
在数据流程图中，IDo婚庆公司后台处于顶层数据流程最高级，其次是该网站的前台，前台为浏览者客提供各类婚庆信息。
顶层数据流图如图4-1所示:
提供信息提供服务
图4-1顶层数据流图
2.软件结构
制作网站过程中，需要使用ASP语言设计一部分的动态页面，使用dreamweaver来制作部分html静态网页，这样可以优化系统性能。
使用Photoshop来对图片进行美化修饰使其符合网站的整体色彩、风格效果。
利用flash来进行部分动画制作，插入网站中。
使其更加生动，更具吸引力。
（三）用户界面需求
用户界面的一致性很关键，界面的结构必须清晰且所有的术语要保持一致。
遵循对比原则，在浅色背景上使用深色文字，在深色背景上使用浅色文字。
用户界面必须清晰明了，与其他模块区分开来。
界面对象在视觉上、感觉上和行为上应与其在现实中的表现一致。
弹出菜单不应该是唯一的功能来源，要实现多功能的整合应用。
界面的切换、布局很重要。
用户要能够自由快速的对界面上每一项做出选择，并且所有选择都是可逆的。
此外，为了让网站更具有吸引力还需插入一些简单的flash动画或制作技术含量较高的动态网站。
（四）管理员界面需求
管理员界面结构要简单清晰便于管理员管理登陆。
后台管理功能包括对前台显示模块的内容管理，以及对后台管理员的添加与删除的管理等。
后台设计合理可以方便管理员对网站新闻信息、产品信息等进行及时更新，使公司能够用最少的时间办最多的事情。
五、网站总体设计
（一）网站框架及布局设计
网站的整体色彩以白色和淡灰色为主，色彩的搭配符合婚庆气息，给人一种清新淡雅、纯洁脱俗的感觉，更容易让不同风格的顾客接受。
主页中的各个模块的布局主要是使用CSS实现。
主页布局如图5-1所示采用上中下结构，上方为logo、banner、设为首页和加入收藏等，中间是导航和flash,下方分左中右结构，左面是成功案例和联系我们，中间部分为企业简介、新闻动态和友情链接，右面是产品展示，最下方为版权信息。
页面基本上每个图标，每个关键字都设有链接。
网站的整体设计美观、大气，布局合理。
Logo
设为首页、加入收藏、联系我们
首页关于我们新闻动态荣誉证书产品展示成功案例在线留言人才招聘联系我们
Flash
成功案例：
关于我们：
产品展示：
联系我们：
新闻动态：
友情链接：
版权信息
图5-1主页布局
（二）网站的总体栏目设计
作为一个婚庆网站，主要目的是希望能够及时的向新人传递婚礼的相关服务和信息。
这就要求我们所设计的网站的界面必须具备以下栏目：
关于我们（企业简介、总裁致辞、成长历程、组织机构、服务团队、联系我们）、新闻动态（行业新闻、IDO资讯、婚礼讲堂、潮流风尚）、荣誉证书、产品展示（婚纱造型、婚品定制、场地布置、摄影摄像、主持司仪）、成功案例、在线留言、友情链接及后台管理登录。
如图5-2、5-3所示：
图5-2网站前台栏目结构图
图5-3网站后台栏目结构图
（三）数据库设计
网站中的数据库采用Access设计，数据库名为data.mdb,包括下5-4、5-5图中的30个表及其对应关系：
图5-4表
图5-5表之间的关系
（四）网站特色设计
1.logo的设计新颖独特，给人耳目一新的感觉，体现出IDo婚庆网站的独特之处。
如图5-6所示左侧以囍字幻化的新郎新娘形象具体的表现了一对新人，红红的囍字则散发着喜庆的气氛；右侧IDo表明这对新人的心声及信誓，被设计成婚礼钻戒的O字母更是使人眼前一亮。
图5-6logo
2.flash设计采用图片轮播的效果展示网站的主要产品信息，给浏览者视觉冲击力，起到宣传的作用。
3.各页面在线交流功能的设计，给网站与浏览者创造了一个很好的网络条件，浏览者可以通过QQ了解企业的更多信息和服务。
六、网站详细设计
（一）首页设计
首页布局简洁，并有所创意，将所有版块项目都整齐排列，这样既可以赏心悦目，又可以让浏览者不产生视觉上的疲劳。
通过主要板块的设置是浏览者初步对IDo婚庆网站结构有所了解，让浏览者更加方便快捷的熟悉IDo婚庆网站！
将大体的新闻动态、产品展示、成功案例等一目了然的展现给浏览者。
如图6-1所示：
图6-1网站首页设计图
1.栏目设计
首页栏目主要包括首页、关于我们、新闻动态、荣誉证书、产品展示、成功案例、在线留言、人才招聘、联系我们九大模块。
还有其他一些小栏目，诸如友情链接、版权信息等。
2.logo及banner设计
采用灰白渐变色条状banner为背景，logo居左，右边则是服务热线、设为首页和加入收藏。
logo的设计新颖独特，体现出IDo婚庆网站的独特之处。
如图6-2所示：
图6-2logo及banner设计图
3.导航设计
导航设计上采用淡灰色条状为背景，黑色字体居中，分隔符都为白色，加上凹凸设计，给人以简明大方的感觉。
如图6-3所示：
图6-3导航设计
4.风格与色彩搭配
主要采用浅灰色和白色作为整个首页的基调，辅助色为绿色和红色，体现生机活力和喜庆的气氛。
5.特效与代码
在本网页的右上方，浏览者可以把本网站设为首页，或是加入收藏，以便操作。
使用flash制作图片轮播的效果。
当打开该网页时导航栏下的图片将自动轮转，循环播放图片。
在左下方的联系我们一栏中，添设了在线QQ联系，方便浏览者沟通交流。
6.友情链接
在此栏目中，为友情链接网址，通过链接可以直接访问相关网站，如百合婚礼、佳丽摄影、重庆婚庆、费加罗策划、花海阁、喜事网等，如图6-4所示：
图6-4友情链接
7.版权信息
图6-5版权信息
（二）二级页面设计
二级页面设计采用简单明了的布局，将每个板块的内容具体化、深入化、详细化。
让感兴趣的浏览者详细了解IDo婚庆网站。
可以方便浏览者及时快捷的与我们公司取得联系，获取最新的动态。
1.各二级页面的栏目设计
（1）关于我们：
网页顶部仍由logo、导航、flash构成。
网页的左侧为关于我们的子目录，包括企业简介、总裁致辞、成长历程、组织机构、服务团队、联系我们六个板块，右侧为企业简介。
显示公司的一些简介，扩充了浏览者对公司的了解，增加用户对公司的信任感。
如图6-6所示：
图6-6关于我们
（2）新闻动态：
发布网站的一些最新新闻动态，包括行业新闻、IDO资讯、婚礼讲堂和潮流风尚四个板块。
如图6-7所示：
图6-7新闻动态
（3）荣誉证书：
主要显示公司所获得的各种荣誉证书，用以证明公司在婚庆行业的实力，增加信誉度和说服力。
如图6-8所示：
图6-8荣誉证书
（4）产品展示：
显示公司目前的一些服务产品及项目信息，可以让用户拥有更多的选择权。
由婚纱造型（婚纱礼服、首饰发饰、婚礼跟妆）、婚品定制（婚车、请柬、蛋糕、礼炮、新娘捧花）、场地布置（场地选址、场地布置、色系风格）、摄像摄影（摄影师、婚纱影像、婚礼全程跟拍）、主持司仪（金牌司仪、银牌司仪、铜牌司仪）等构成。
如图6-9所示：
图6-9产品展示
（5）成功案例：
展示公司举办的成功婚庆典礼图片，显示公司之前的一些婚庆实例，使浏览者从中可以感受到在本公司可以享受到的服务，并且对自己以后的婚庆有一个基本的认识。
如图6-10所示：
图6-10成功案例
（6）在线留言：
用户可以在留言板上留言，也可以查看别人的留言。
留言板给公司与浏览者的交流创造了一个很好的网络条件。
由我要留言、查看留言两个板块构成。
如图6-11所示：
图6-11在线留言
（7）人才招聘：
由人才招聘、人才策略两个板块构成。
设计了在线求职，方便浏览者求职。
如图6-12所示：
图6-12人才招聘
（8）联系我们：
提供了公司地址、联系方式等，方便浏览者访问。
给其带来更大的方便，也使浏览者与公司的沟通更加及时。
如图6-13所示：
图6-13联系我们
2.导航设计
与首页相同，导航设计上依旧采用浅灰色条状图片为背景，设计简单，给人以眼目一新的感觉，在二级页面中添加一些小的导航栏，采用绿色和白色搭配的风格，体现网站偏向生机活力、自然亲切的特点。
3.风格与色彩搭配
二级页面在风格色彩上采用与首页一致的色调，以灰白色为主，辅助色为绿色和红色，体现生机活力和喜庆的气氛。
页面的设计效果也与首页保持一致。
4.首页与二级页面之间的链接
在导航栏完成首页与二级页面之间的链接。
再点击链接文字时将会在文字四周出现虚线框。
在导航栏中，每一个链接都能与二级页面进行链接，使浏览者更方便的浏览。
5.二级页面与二级页面之间的链接
图6-14二级页面与二级页面之间的链接
在二级页面中，往往都能看到图6-14上的文字，在点击上一页或下一页时，将会进入下一个子网页，从而完成子网页之间的链接。
以上情况在本网页上屡见不鲜。
当鼠标移动到文字或图片上时变成小手状态时，就意味着该字体或图片存在一个链接，可以使您链接到新的网页。
在导航栏中，每一个栏目都对应着一个链接，每一个链接到的网页中，都存在的新的链接，使浏览者用起来方便，看起来舒心。
（三）后台管理设计
1.数据库备份
数据库是辅助于后台管理的，数据库的作用是非常强大，在设计过程当中可以运用数据库来备份数据库，以免数据的丢失。
数据库备份图如图6-15所示:
图6-15数据库备份图
2.后台整体框架
网站后台的内容分为2部分，左侧是各类导航，右侧是版权信息和要修改的内容。
后台整体框架如图6-16所示:
图6-16后台整体框架
3.后台特色
后台当中最有特色的部分就是产品管理这一板块，各类产品信息都可以通过这个模块来添加和修改。
在这个模块分为四部分，产品类别、产品管理、添加产品、审核产品。
后台特色板块如图6-17所示:
图6-17后台特色板块
（四）基本操作流程
1.前台操作流程
对前台的操作主要从网站的首页开始浏览，首页中向大家展示的也是这个网站的重点内容，可以通过点击首页的导航来实现各个页面的跳转，导航包括：
关于我们、新闻动态、荣誉证书、产品展示、成功案例、人才招聘、在线留言、联系我们等。
点击这些内容就可以跳转到相应的二级页面。
点击左侧的产品系列按钮还可以跳转到各类产品的页面。
前台操作流程图如图6-18所示:
图6-18前台操作流程图
2.后台操作流程
进入后台时直接在前台首页网址的基础之上添加admin/login,回车之后出现登陆界面。
输入账号：
admin；密码：
admin，输入系统给出的验证码，然后点击登录按钮。
进入后台可以根据自己的需要，在后台对页面进行相应的修改等一系列的操作。
后台管理登录窗口如图6-19所示:
图6-19后台管理登录窗口
后台管理操作流程图：
图6-20后台管理流程图
七、网站优化推广
（一）网站优化
1.关键字的相关优化：
选取适当的关键字，关键字密度要把握好。
2.网站内容的更新：
网站内容更新要及时准确，保证是公司的最新动态。
3.网站的友情链接交换：
要选择质量好，PR值高的网站交换链接。
4.页面、细节的调整：
要及时对网站的页面和细节进行更新和调整。
5.网站内链的建设：
网站的内链建设要清晰明了、方便准确。
（二）网站推广
1.论坛推广：
在一些本地比较知名、人气旺的论坛去宣传，特别是针对性比较强的论坛，宣传效果会更好。
2.企业博客推广：
建立公司企业博客，特别实用于婚庆公司网站，需要注意的是博客平台选择以及博客内容更新，要及时准确。
3.XX互动社区推广：
这里主要指的是XX的几个重要产品：
分别是XX百科、知道及贴吧，众所周知，他们在XX权重极高，合理用好这三个XX的产品，可以借力发力，会有意想不到的收获。
4.QQ群推广：
加入本地的新人QQ群或者自己建立结婚QQ群，让更多的本地新人加入进来，要成为QQ群的活跃分子及活动发起者，另外，要利用好QQ群邮件这一很好的宣传手段。
5.竞价广告：
这里说的竞价广告主要指XX及google广告，在设置广告前多看看别家的广告内容是什么，自己的标题要怎么写，描述要怎么写，才有针对性。
6.搜索引擎优化：
首先要选好关键词，其次标题描述要精练而又要与关键词相照应，然后网站内容、层次分明，内链清晰，最后加强网站外链，不求多，只求精。
7.本地门户网站推广：
寻找本地知名婚庆类网站投放广告或合作举办活动，来增加网站的知名度。
八、网站的更新维护
网站维护是网站建设中极其重要的部分，也是最容易被忽略的部分。
不进行维护的网站，很快就会因内容陈旧，信息过时而无人问津，或因技术原因而无法运行。
这是目前网站建设中最大的弊病。
简单地说：
建好了网站，只是企业开展电子商务的第一步，要真正让网站发挥作用，网站更新维护是极为重要的。
所谓网站维护，即是要经常对网站内容进行更新维护。
（一）不断充实网站内容，使之始终同步反映该网站的最新动态。
（二）及时回复访问者的留言和Email信件。
（三）不断增加网上在线服务功能。
（四）关注访问者在网上的活动。
（五）重视网上宣传，包括友情链接、网络广告等。
九、结论
这次制作毕业设计的过程，对我来说是一个将所学知识从书本运用到实际操作的初次体验。
通过这次的制作与设计让我了解了一个网站形成的基本过程和基本纲领构架，加深了我对网页设计技术的认识，以及对dreamweaver、photoshop、flash等设计与制作网站的工具有了更多的了解，得到了深入的理解同时更熟练地使用这些工具。
相信这些知识都将对我的工作带来很大的帮助。
在这次的毕业设计中使我得学习了比以前更多的知识，如何提高自己的学习和操作能力。
这次设计由于时间、条件和个人能力的限制，加之设计经验的不足，在网站的整体设计及各模块功能可能设计的不完全，有待于进一步的完善和改进。
这些情况希望能在今后的不断学习与应用中把它扩充得更加丰富，以适应不同层次使用者的需求。
参考文献
[1]周洪政.网页梦工厂DreamweaverMX实例与操作[M].北京:
希望电子出版社,2010
[2]杨晓钟.网站设计与开发[M].北京:
机械工业出版社，2005-06
[3]祈大鹏.dreamweavercs4实用教程[M].北京：
电子工业出版社，2010
[4]沈大林.DreamweaverFlashFireworks三合一教程[M].北京：
电子工业出版社，2001
[5]刘卫东.编著网站建立与维护[M].天津：
南开大学出版社出版,2002
升级会员 