IDo婚庆网站答辩.ppt

LOGOI Do婚婚庆网站网站设计说明明书n班班 级：电子商务级：电子商务100100班班n学学 生：汪丹丹生：汪丹丹n学学 号：号：20100301162010030116n指导老师：陈萱指导老师：陈萱n一、设计背景与设计意义一、设计背景与设计意义n二、设计内容二、设计内容n三、相关技术与开发工具介绍三、相关技术与开发工具介绍n四、网站需求分析四、网站需求分析n五、网站总体设计五、网站总体设计n六、网站详细设计六、网站详细设计n七、网站优化推广七、网站优化推广 n八、网站的更新维护八、网站的更新维护 n九、总结九、总结 n参考文献参考文献一、设计背景与设计意义一、设计背景与设计意义（一）设计背景（一）设计背景u近年来，我国婚庆消费处在不断地增长之中，婚庆产业虽然近年来，我国婚庆消费处在不断地增长之中，婚庆产业虽然发展迅速，但也存在着一定的问题。中国婚庆公司品牌成长发展迅速，但也存在着一定的问题。中国婚庆公司品牌成长还处在蹒跚学步阶段。市场的良莠不齐、诚信缺失，是许多还处在蹒跚学步阶段。市场的良莠不齐、诚信缺失，是许多新人对新婚消费充满不信任。因此，从行业规律看，婚庆市新人对新婚消费充满不信任。因此，从行业规律看，婚庆市场洗牌在即，其市场有待于创新开发，要形成规模化、有序场洗牌在即，其市场有待于创新开发，要形成规模化、有序化、全方位的婚庆市场，走品牌化的道路。化、全方位的婚庆市场，走品牌化的道路。u其次，婚庆行业作为一个新兴行业目前发展到了一个瓶颈阶其次，婚庆行业作为一个新兴行业目前发展到了一个瓶颈阶段，由于网络的发展，婚庆网站已经成为了婚庆市场的另一段，由于网络的发展，婚庆网站已经成为了婚庆市场的另一个战场，用好的网站来宣传自己的产品是非常好的销售模式。个战场，用好的网站来宣传自己的产品是非常好的销售模式。一、设计背景与设计意义一、设计背景与设计意义(二二)设计意义设计意义u俗话说：世上最美好的容颜是新娘的笑脸，人间最美好的俗话说：世上最美好的容颜是新娘的笑脸，人间最美好的时光是拜天地的那一刻。由此可见：时光是拜天地的那一刻。由此可见：“执子之手，与子偕执子之手，与子偕老老”的承诺需要一个美好而隆重的仪式作为凭证。现在正的承诺需要一个美好而隆重的仪式作为凭证。现在正值婚庆高峰，几乎天天可以看到一对对的新人在这美好的值婚庆高峰，几乎天天可以看到一对对的新人在这美好的季节里结成眷属。但新人们或多或少都有那么一些因工作，季节里结成眷属。但新人们或多或少都有那么一些因工作，因时间而无法将自己的婚礼办得唯美时尚。而随着网络技因时间而无法将自己的婚礼办得唯美时尚。而随着网络技术的发展，许多人们都通过网络来安排婚礼事务，所以在术的发展，许多人们都通过网络来安排婚礼事务，所以在网上开设婚庆公司，既可以让新人省时省力，又可以为他网上开设婚庆公司，既可以让新人省时省力，又可以为他们提供多项选择。们提供多项选择。u婚庆网站婚庆网站,就是一个可在线浏览婚庆新闻、婚庆就是一个可在线浏览婚庆新闻、婚庆习俗、婚庆案例、婚庆产品、留言交流等功能的网站系统；习俗、婚庆案例、婚庆产品、留言交流等功能的网站系统；在信息化的今天在信息化的今天,用户甚至可以足不出户就能把自己的婚礼用户甚至可以足不出户就能把自己的婚礼计划得十分缜密。只要通过我们的网站，用户就能达到自计划得十分缜密。只要通过我们的网站，用户就能达到自己想要的结婚效果，享受到结婚带来的乐趣！己想要的结婚效果，享受到结婚带来的乐趣！二、二、设计内容设计内容（一）设计目标（一）设计目标u1、充分利用互联网的强大优势资源把公司的产品或服务信息、充分利用互联网的强大优势资源把公司的产品或服务信息247的发送给世界的各个角落，客户可以通过网站随时较全面的发送给世界的各个角落，客户可以通过网站随时较全面的了解企业；的了解企业；u2、从销售的角度来看，减少交易的中间环节，降低成本，同时也、从销售的角度来看，减少交易的中间环节，降低成本，同时也起到宣传的作用。起到宣传的作用。u3、方便与客户互动来往，交流沟通，节省时间提高效率；、方便与客户互动来往，交流沟通，节省时间提高效率；u4、网站建设后，再进行有效的网络营销推广，可以进一步的主动、网站建设后，再进行有效的网络营销推广，可以进一步的主动抢占市场先机。抢占市场先机。（二）设计要求（二）设计要求u1、logo、flash及导航的设计要求简单大方又要紧扣网站主题，及导航的设计要求简单大方又要紧扣网站主题，体现该网站的特色。体现该网站的特色。u2、网站首页要求内容编排得当、页面设计美观、观赏性与实用性、网站首页要求内容编排得当、页面设计美观、观赏性与实用性并存，能够体现网站的首页所能实现的基本功能。并存，能够体现网站的首页所能实现的基本功能。u3、后台设计要清晰明了，方便管理员对产品信息、新闻动态等信、后台设计要清晰明了，方便管理员对产品信息、新闻动态等信息和服务的及时更新和管理。息和服务的及时更新和管理。三、相关技术与开发工具介绍三、相关技术与开发工具介绍u该网站的建设主要用到了该网站的建设主要用到了Microsfot dreamwear、Adobe photoshop和和Flash等网页设计工具。等网页设计工具。u另外，还涉及了大量的另外，还涉及了大量的Asp语言、语言、Javascript语言、语言、Access、Div+Css。四、网站的需求分析四、网站的需求分析（一）功能需求分析（一）功能需求分析u首页功能需求：通过主页版块设置，浏览者可以初步对网站首页功能需求：通过主页版块设置，浏览者可以初步对网站的结构和主要内容有所了解，也使浏览者对该网站的创意的结构和主要内容有所了解，也使浏览者对该网站的创意设计有所肯定，让浏览者更加方便快捷的了解熟悉网站信设计有所肯定，让浏览者更加方便快捷的了解熟悉网站信息，将大体的网站情况一目了然的展示给浏览者。息，将大体的网站情况一目了然的展示给浏览者。u二级页面功能需求：通过二级页面将网站内容更加条理、更二级页面功能需求：通过二级页面将网站内容更加条理、更加详细、更加方便的展现给浏览者。二级页面中将每个版加详细、更加方便的展现给浏览者。二级页面中将每个版块的内容具体化、深入化、详细化，让浏览者更加深入了块的内容具体化、深入化、详细化，让浏览者更加深入了解网站的相关服务和信息。解网站的相关服务和信息。四、网站的需求分析四、网站的需求分析（二）结构化需求分析（二）结构化需求分析1、数据流程、数据流程顶层数据流图顶层数据流图2、软件结构、软件结构uASP语言语言 动态页面动态页面uDreamweaver html静态网页静态网页uPhotoshop 美化图片美化图片uFlash 动画制作动画制作I Do婚婚庆网网站站企企业后台后台浏览者者提供信息提供信息提供服提供服务四、网站的需求分析四、网站的需求分析（三）用户界面需求（三）用户界面需求u用户界面的结构必须清晰且所有的术语要保持一致。遵循对用户界面的结构必须清晰且所有的术语要保持一致。遵循对比原则，界面对象在视觉上、感觉上和行为上应与其在现实比原则，界面对象在视觉上、感觉上和行为上应与其在现实中的表现一致。中的表现一致。（四）管理员界面需求（四）管理员界面需求u管理员界面结构要简单清晰便于管理员登陆。后台设计合理管理员界面结构要简单清晰便于管理员登陆。后台设计合理可以方便管理员对网站新闻信息、产品信息等进行及时更新，可以方便管理员对网站新闻信息、产品信息等进行及时更新，使公司能够用最少的时间办最多的事情。使公司能够用最少的时间办最多的事情。五、五、网站总体设计网站总体设计（一）网站框架及布局设计（一）网站框架及布局设计u网站的整体色彩以白色和淡灰色为主，色彩的搭配符合婚庆网站的整体色彩以白色和淡灰色为主，色彩的搭配符合婚庆气息，给人一种清新淡雅、纯洁脱俗的感觉，更容易让不气息，给人一种清新淡雅、纯洁脱俗的感觉，更容易让不同风格的顾客接受。同风格的顾客接受。u主页中的各个模块的布局主要是使用主页中的各个模块的布局主要是使用div+css实现。实现。u主页布局采用上中下结构，上方为主页布局采用上中下结构，上方为logo、banner、设为、设为首页和加入收藏等，中间是导航和首页和加入收藏等，中间是导航和flash,下方分左中右结下方分左中右结构，左面是成功案例和联系我们，中间部分为企业简介、构，左面是成功案例和联系我们，中间部分为企业简介、新闻动态和友情链接，右面是产品展示，最下方为版权信新闻动态和友情链接，右面是产品展示，最下方为版权信息。息。u页面基本上每个图标，每个关键字都设有链接。网站的整体页面基本上每个图标，每个关键字都设有链接。网站的整体设计美观、大气，布局合理。设计美观、大气，布局合理。五、五、网站总体设计网站总体设计Logo设为首页、加入收藏、联系我们 首页 关于我们 新闻动态 荣誉证书 产品展示 成功案例 在线留言 人才招聘 联系我们Flash成功案例：关于我们：产品展示：联系我们：新闻动态：友情链接：版权信息图5-1主页布局主页布局主页布局草图草图五、五、网站总体设计网站总体设计（二）网站的总体栏目设计（二）网站的总体栏目设计I DO婚庆首页关于我们新闻动态荣誉证书功成案例人才招聘产品展示联系我们在线留言行业新闻婚礼讲堂IDO资讯婚纱造型潮流风尚婚品定制场地布置摄像摄影主持司仪企业简介总裁致辞成长历程组织机构服务团队联系我们网站前台栏目结构图网站前台栏目结构图I Do婚庆网站管理后台系统管理企业信息产品管理成功案例新闻管理留言管理荣誉管理人才管理友情链接网网站后台站后台栏目目结构构图五、五、网站总体设计网站总体设计（三）数据库设计（三）数据库设计u网站中的数据库采用网站中的数据库采用AccessAccess设计，数据库名为设计，数据库名为data.mdbdata.mdb,包包括下面图中的括下面图中的3030个表及其对应关系：个表及其对应关系：表表表之表之间的的关关系系五、五、网站总体设计网站总体设计(四四)网站特色网站特色u1 1、logologo的设计新颖独特，给人以耳目一新的感觉，体现出的设计新颖独特，给人以耳目一新的感觉，体现出I I DoDo婚庆网站的独特之处。如图所示左侧以囍字幻化的新郎新婚庆网站的独特之处。如图所示左侧以囍字幻化的新郎新娘形象具体的表现了一对新人，红红的囍字则散发着喜庆的娘形象具体的表现了一对新人，红红的囍字则散发着喜庆的气氛；右侧气氛；右侧I DoI Do表明这对新人的心声及信誓，被设计成婚钻表明这对新人的心声及信誓，被设计成婚钻戒的戒的O O字母更是使人眼前一亮。字母更是使人眼前一亮。u2 2、flashflash设计采用图片轮播的效果展示网站的主要产品信息，设计采用图片轮播的效果展示网站的主要产品信息，给浏览者视觉冲击力，起到宣传的作用。给浏览者视觉冲击力，起到宣传的作用。u3 3、各页面在线交流功能的设计，给网站与浏览者的交流创造、各页面在线交流功能的设计，给网站与浏览者的交流创造了一个很好的网络条件，浏览者可以通过了一个很好的网络条件，浏览者可以通过QQQQ了解网站的最新了解网站的最新信息和服务。信息和服务。六、网站详细设计六、网站详细设计（一）首页设计（一）首页设计u首页布局简洁，并有所创意，将所有版块项目都整齐排列，这首页布局简洁，并有所创意，将所有版块项目都整齐排列，这样既可以赏心悦目，又可以让浏览者不产生视觉上的疲劳。样既可以赏心悦目，又可以让浏览者不产生视觉上的疲劳。六、网站详细设计六、网站详细设计网站首页设计图网站首页设计图六、网站详细设计六、网站详细设计1 1、栏目设计、栏目设计u网站栏目主要包括首页、关于我们、新闻动态、荣誉证书、网站栏目主要包括首页、关于我们、新闻动态、荣誉证书、产品展示、成功案例、在线留言、人才招聘、联系我们九产品展示、成功案例、在线留言、人才招聘、联系我们九大模块。还有其他一些小栏目，诸如友情链接、版权信息大模块。还有其他一些小栏目，诸如友情链接、版权信息等。等。2 2、logologo及及bannerbanner设计设计u采用灰白渐变色条状采用灰白渐变色条状banner为背景，为背景，logo居左，右边则居左，右边则是服务热线、设为首页和加入收藏。是服务热线、设为首页和加入收藏。logo的设计新颖独特，的设计新颖独特，体现出体现出I Do婚庆网站的独特之处。婚庆网站的独特之处。六、网站详细设计六、网站详细设计3、导航设计、导航设计u导航设计上采用淡灰色条状为背景，黑色字体居中，分隔符导航设计上采用淡灰色条状为背景，黑色字体居中，分隔符都为白色，加上凹凸设计，给人以简单大方的感觉。都为白色，加上凹凸设计，给人以简单大方的感觉。4、风格与色彩搭配、风格与色彩搭配u主要采用浅灰色和白色作为整个首页的基调，辅助色为绿色主要采用浅灰色和白色作为整个首页的基调，辅助色为绿色和红色，体现生机活力和喜庆的气氛。和红色，体现生机活力和喜庆的气氛。六、网站详细设计六、网站详细设计5、特效与代码、特效与代码u在本网页的右上方，浏览者可以把本网站设为首页，或是加在本网页的右上方，浏览者可以把本网站设为首页，或是加入收藏入收藏，以便操作。，以便操作。u使用使用flash制作图片轮播的效果。当打开该网页时导航栏下制作图片轮播的效果。当打开该网页时导航栏下的图片将自动轮转，循环播放图片。的图片将自动轮转，循环播放图片。u在各页面的左下方联系我们一栏中，添设了在线在各页面的左下方联系我们一栏中，添设了在线QQ联系，联系，方便浏览者沟通交流。方便浏览者沟通交流。6、友情链接、友情链接u在此栏目中，为友情链接网址，通过链接可以直接访问相关在此栏目中，为友情链接网址，通过链接可以直接访问相关网站，如百合婚礼、佳丽摄影、重庆婚庆、费加罗策划、网站，如百合婚礼、佳丽摄影、重庆婚庆、费加罗策划、花海阁、喜事网等。花海阁、喜事网等。六、网站详细设计六、网站详细设计7、版权信息、版权信息（二）二级页面设计（二）二级页面设计u二二级级页页面面设设计计采采用用简简单单明明了了的的布布局局，将将每每个个板板块块的的内内容容具具体体化化、深深入入化化、详详细细化化。让让感感兴兴趣趣的的浏浏览览者者详详细细了了解解I Do婚婚庆庆网网站站。可可以方便浏览者及时快捷的与我们公司取得联系，获取最新的动态。以方便浏览者及时快捷的与我们公司取得联系，获取最新的动态。1 1、各二级页面的栏目设计、各二级页面的栏目设计u关关于于我我们们：企企业业简简介介总总裁裁致致辞辞成成长长历历程程组组织织机机构构服服务务团团队队联系我们联系我们公司地址及公司地址及联系方式系方式logo六、网站详细设计六、网站详细设计六、网站详细设计六、网站详细设计u新闻动态新闻动态：行业新闻：行业新闻 I DO资讯资讯婚礼讲堂婚礼讲堂潮流风尚潮流风尚六、网站详细设计六、网站详细设计u荣誉证书荣誉证书 六、网站详细设计六、网站详细设计u产品展示：产品展示：u婚纱造型（婚纱礼服婚纱造型（婚纱礼服首饰发饰首饰发饰婚礼跟妆）婚礼跟妆）u婚品定制（婚车婚品定制（婚车请柬请柬蛋糕蛋糕礼炮礼炮新娘捧花）新娘捧花）u场地布置（场地选址场地布置（场地选址场地布置场地布置色系风格）色系风格）u摄像摄影（摄影师摄像摄影（摄影师婚纱影像婚纱影像婚礼全程跟拍）婚礼全程跟拍）u主持司仪（金牌司仪主持司仪（金牌司仪银牌司仪银牌司仪铜牌司仪）铜牌司仪）六、网站详细设计六、网站详细设计u成功案例成功案例：六、网站详细设计六、网站详细设计u在线留言：在线留言：我要留言我要留言查看留言查看留言六、网站详细设计六、网站详细设计u人才招聘：人才招聘：人才招聘人才招聘人才策略人才策略六、网站详细设计六、网站详细设计u联系我们联系我们：六、网站详细设计六、网站详细设计2 2、导航设计、导航设计u与首页相同，导航设计上依旧采用浅灰色与首页相同，导航设计上依旧采用浅灰色条状图片为背景，设计简单，给人以眼目一条状图片为背景，设计简单，给人以眼目一新的感觉。另外，在二级页面中添加一些小新的感觉。另外，在二级页面中添加一些小的导航栏，采用绿色和白色搭配的风格，体的导航栏，采用绿色和白色搭配的风格，体现网站偏向生机活力、自然亲切的特点。现网站偏向生机活力、自然亲切的特点。3 3、风格与色彩搭配、风格与色彩搭配u二级页面在风格色彩上采用与首页一致的二级页面在风格色彩上采用与首页一致的 色调，页面的设计效果也与首页保持一致。色调，页面的设计效果也与首页保持一致。4 4、首页与二级页面之间的链接、首页与二级页面之间的链接u 在导航栏完成首页与二级页面之间的链接。再点击链接文在导航栏完成首页与二级页面之间的链接。再点击链接文字时将会在文字四周出现虚线框。在导航栏中，每一个链接字时将会在文字四周出现虚线框。在导航栏中，每一个链接都能与二级页面进行链接，使浏览者更方便的浏览。都能与二级页面进行链接，使浏览者更方便的浏览。小导航小导航六、网站详细设计六、网站详细设计5 5、二级页面与二级页面之间的链接、二级页面与二级页面之间的链接u在二级页面中，往往都能看到下图中的文字，在点击上一在二级页面中，往往都能看到下图中的文字，在点击上一页或下一页时，将会进入下一个子网页，从而完成子网页页或下一页时，将会进入下一个子网页，从而完成子网页之间的链接。当鼠标移动到文字或图片上时变成小手状态之间的链接。当鼠标移动到文字或图片上时变成小手状态时，就意味着该字体或图片存在一个链接，可以使您链接时，就意味着该字体或图片存在一个链接，可以使您链接到新的网页。到新的网页。u在导航栏中，每一个栏目都对应着一个链接，每一个链接在导航栏中，每一个栏目都对应着一个链接，每一个链接到的网页中，都存在的新的链接，使浏览者用起来方便，到的网页中，都存在的新的链接，使浏览者用起来方便，看起来舒心。看起来舒心。六、网站详细设计六、网站详细设计（三）后台管理设计（三）后台管理设计1、数据库备份、数据库备份六、网站详细设计六、网站详细设计2、后台整体框架、后台整体框架后台后台导航航显示要修改的信息显示要修改的信息版权信息版权信息前后台前后台跳转链接及后台登陆前后台跳转链接及后台登陆版权信息版权信息六、网站详细设计六、网站详细设计3、后台特色、后台特色八、网站优化与推广八、网站优化与推广（四）基本操作流程（四）基本操作流程1、前台操作流程、前台操作流程关于我们新闻动态荣誉证书成功案例人才招聘产品展示联系我们在线留言开始登录网站首页浏览各二级页面退出八、网站优化与推广八、网站优化与推广（2）、后台操作流程）、后台操作流程开始登录中心管理员身份认证管理员Yes系统管理企业信息产品管理成功案例新闻管理留言管理荣誉管理人才管理友情链接结果退出后台结束No进行相关的操作后台登后台登陆界面界面后台操作流程图后台操作流程图七、七、网站优化推广网站优化推广（一）网站优化（一）网站优化u1、关键字的相关优化：选取适当的关键字，关键字密度要把握好。、关键字的相关优化：选取适当的关键字，关键字密度要把握好。u2、网站内容的更新：网站内容更新要及时准确，保证是公司的最新动态。、网站内容的更新：网站内容更新要及时准确，保证是公司的最新动态。u3、网站的友情链接交换：要选择质量好，、网站的友情链接交换：要选择质量好，PR值高的网站交换链接。值高的网站交换链接。u4、页面、细节的调整：要及时对网站的页面和细节进行更新和调整。、页面、细节的调整：要及时对网站的页面和细节进行更新和调整。u5、网站内链的建设：网站的内链建设要、网站内链的建设：网站的内链建设要清晰明了、清晰明了、方便准确。方便准确。七、七、网站优化推广网站优化推广（二）网站推广（二）网站推广u1.论坛推广论坛推广u2.企业博客推广企业博客推广u3.百度互动社区推广百度互动社区推广u4.QQ群推广群推广u5.竞价广告竞价广告 u6.搜索引擎优化搜索引擎优化u7.本地门户网站推广本地门户网站推广八、网站的更新维护八、网站的更新维护u1、不断充实网站内容，使之始终同步反映该网站的最新动态。、不断充实网站内容，使之始终同步反映该网站的最新动态。u2、及时回复访问者的留言和、及时回复访问者的留言和Email信件。信件。u3、不断增加网上在线服务功能。、不断增加网上在线服务功能。u4、关注访问者在网上的活动。、关注访问者在网上的活动。u5、重视网上宣传，包括友情链接、网络广告等。、重视网上宣传，包括友情链接、网络广告等。九、结论九、结论u通通过过这这次次网网站站的的制制作作与与设设计计让让我我了了解解了了一一个个网网站站形形成成的的基基本本过过程程和和基本纲领构架，加深了我对网页设计技术的认识。基本纲领构架，加深了我对网页设计技术的认识。u加加深深了了我我对对dreamweaverdreamweaver、psps、flashflash等等网网站站设设计计与与制制作作的的工工具具了了解解和运用。和运用。u这这次次设设计计由由于于时时间间、条条件件和和个个人人能能力力的的限限制制，加加之之设设计计经经验验的的不不足足，在在网网站站的的整整体体设设计计及及各各模模块块功功能能可可能能设设计计的的不不完完全全，有有待待于于进进一一步步的完善和改进，以适应不同层次使用者的需求。的完善和改进，以适应不同层次使用者的需求。参考文献参考文献u1 周洪政周洪政.网页梦工厂网页梦工厂Dreamweaver MX实例与操作实例与操作M.北京北京:希望电子出版社希望电子出版社,2010 u2 杨晓钟杨晓钟.网站设计与开发网站设计与开发M.北京北京:机械工业出版社，机械工业出版社，2005-06 u3 祈大鹏祈大鹏.dreamweaver cs4 实用教程实用教程M.北京：电子工业出版社，北京：电子工业出版社，2010u4 沈大林沈大林.Dreamweaver Flash Fireworks三合一教程三合一教程M.北京：电子工业出版社，北京：电子工业出版社，2001 u5 刘卫东刘卫东.编著网站建立与维护编著网站建立与维护M.天津：南开大学出版社出版天津：南开大学出版社出版,2002LOGO谢谢！谢谢！