鲜花满屋 售花网店设计.docx

1、鲜花满屋 售花网店设计网站建设课程设计任务书2010 2011 学年第二学期专业班级：09计算机网络与技术 课程名称： 网页设计 学号： 092601093 姓 名： 宗洋 完成期限：自 2011年 11 月 1 日至 2011 年 11 月 17日 课程设计题目： 鲜花满屋 售花网店 设计目的：随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业宣传的工具。为了进一步加深、巩固所学专业课程（网站设计）的基本理论知识，进一步培养自己综合分析问题和解决问题的能力，使自己能够通过本次课程设计而得到全面的锻炼。 功能定位：以网络平台充分体现本网站的功能性在目标顾客访问网站的同时收集

2、公司的目标顾客潜在顾客的资料以及进行的交流沟通和商业往来信息；对顾客提供相关产品及周边；拓宽销售渠道；帮助公司改进营销方法和营销策略使公司能系统了解市场和把握市场更好满足市场需求。一、设计的任务：完成网站中各个模块功能的设计和实现。 二、开发工具：Macromedia DreamweaverCS5 PhotoshopCS5 三、要参考资料： 1胡海等著，网页设计梦工厂DREAMWEAVER篇.北京：清华大学出版社.20082 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.73曾顺，精通css+div网页样式与布局.北京：人民邮电出版社.20074邓文渊等，网页制作彻底研究.北京：

3、人民邮电出版社，20025 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7指导教师（签字）： 侯仕平 教研室主任（签字）： 网站建设课程设计说明书课 题： 网店建设 姓 名： 宗 洋 学 号： 092601093 年级专业： 计算机网络技术 班 级： 09普专计算机网络技术 指导老师： 侯仕平 院 系： 国际学院 提交日期：2011年11月摘 要本网站使用Macromedia Dreamweaver进行开发，结合Photoshop等软件一起制作。本网站包含关于本站、作品介绍、最新动态、周边商城等的设计与实现。首先对网站的需求进行了分析，建立网站工作流程图。然后划分网站的功能模块

4、，最后详细描述了各个功能模块实现的方法，并给出相应代码。本网站结合Dreamweaver所学的知识，构建的一个实例网站，首先是网站的首页以及网站各个模块的组成，接着设计网站的主要体系结构，然后结和各个模块进行详细分析。本网站主要是用来介绍和推广鲜花满屋这家网售花店的产品和活动。关键字：Dreamweaver ，Photoshop，网站设计，鲜花满屋 目 录1、前言 22、需求分析 22.1 市场分析 22.2 技术可行性分析 22.3 性能需求 33、功能模块的关系图 3 34、网站介绍 44.1分析架构 44.2 设计分析 44.3 排版构架 54.4 模块分析 64.4.1 Banner图

5、片 74.4.2 导航菜单 74.4.3 鲜花导购 84.4.4 主体内容 95、整体调整 96、总结 97、致 谢 9参考文献 91、前言随着社会发展，人类的生产生活越来越离不开网络，网络已经影响到地球上的每家每户。网络的规模也逐渐增大。网络的元素也随之而增加，有的利用其通信，有的利用其作为商业用途，在网络上进行出售、收购、宣传等用途。从而使得网络越来越成为现今社会上必不可少的元素，而网站就是这个网络里的一个很大的元素。本网站结合自己所学的知识，构建的一个实例网站，首先介绍网站的功能，接着设计网站的主要体系结构，然后结和各个模块进行详细分析。2、需求分析2.1 市场分析金融危机为外资企业入驻

6、中国网上花店行业创造了条件，国际许多网上花店企业已经看中在中国低成本拓展市场的机会，随着外资投入逐步加大，中国国内企业改革重组迅速加快。同时新的行业制度等政策的颁布和实施将促使我国网上花店行业洗牌，企业兼并重组将在政策的促使下大力发展。随着国内环保经济的发展，低碳已经成为“十二五规划”中的主题，网上花店行业的产业升级已经迫在眉睫。尚普咨询通过科学的市场分析建议投资者加强对网上花店行业企业的筛选，选择行业龙头企业、长期增长的企业、具有良好赢利模式的企业，关注网上花店行业子行业，关注网上花店行业上下游企业，优化客户结构，针对网上花店行业需求进行新产品开发。 2.2 技术可行性分析这个网站是基于Dr

7、eamweaver来开发的。运用了Photoshop、并参考了多方面的书籍的情况下完成的。通过它来构建一个在线的网站，实现在互联网上使用的网络的绝大部分功能，本网站在技术上是可以达到的。2.3 性能需求设备需求：PC机，WindoesXP/Win7操作系统，利用Dreamweaver，photoshop3、功能模块的关系图 图3-1 系统模块图4、网站介绍4.1分析架构本网站的网上商店主要以出售鲜花为主，这种类型的网站的特点就是绚丽，让人感觉琳琅满目而美丽大方。结合花店的主题，因此采用粉色为主的色调。又考虑到鲜花的各式各样，因此站点还包涵鲜花导购等小知识，效果图如4-1所示。图4-1网站首页4

8、.2 设计分析 该网站的文字内容并不是很多，主要页面都是商品的展示，包括各式各样的鲜花图片以及售价，左侧的导航将鲜花进行各方面的分类，便于顾客的分类查询。 页面整体上实用粉红色调，图片的边框都是使用红色系，各个小标题偶尔试用绿色作为点缀，别有一番风味。主体部分的内容大部分分为推荐商品、鲜花报价、新品上市和鲜花的导购等，各个栏目都采用白色背景，让页面在红火的色调下不失高雅，整洁与大方。 左侧的登录系统和鲜花的导购的文字主要采用黑色，目的在于清晰，让顾客能够快速找到想要购买的商品。4.3 排版构架 整个网页构架十分简单，包括banner图片，导航条，左侧的导购信息，以及主题部分的鲜花展示等，因此采

9、用最基本的网页构架，如图4-3所示。图4-3页面框架 上图中的各个部分采用了HTML代码中的各个对应的id。其中#banner块对应页面上的banner图片，#globallink则是网站的导航菜单栏，#left包涵登录系统以及鲜花的分类信息，#main块则主要包括本站快讯、鲜花推荐、新品上市和鲜花导购等，其中#left与#main页面的主体块，他们的子块关系如图4-4所示。图4-4#left与#main页面的框架 这两个部分在整个页面中占主体部位置，设计的时候细节比较关键，直接决定着真个页面是否吸引人，相应的代码框架如下： 4.4 模块分析 在确定页面的各个块与子块后，便可以对网页的各个部分

10、进行设计了，本网页的整体上设置粉红色背景，采用固定宽度剧居中的板式，代码如下。body background-color:#ffd8d9; margin:1px 0px 0px 0px; padding:0px; font-size:12px; font-family:Arial, Helvetica, sans-serif;#container position:relative; margin:0px auto 0px auto; width:700px; text-align:left; 4.4.1 Banner图片 本网页banner图片的制作十分简单，在photoshop中建立Ban

11、ner文件后导入一张玫瑰的图片，在使用渐变效果，让他跟背景颜色自然过度。Banner图片添加文字，重点在于醒目、大方、又能配合整个网站的特点，文字采用阴影和描边的效果，最后给整个图片添加一个白色的边框，便得到了banner图片，如图4-5所示。图4-5 banner图片4.4.2 导航菜单 导航菜单采用项目列表的方式，将标记与标记进行相应的设置，使得菜单能显示到同一行上面，代码如下： 关于本店 鲜花礼品 绿色植物 花之物语 会员中心 联系我们 返回首页 这里为超链接添加背景变换的效果，如图4-6所示。图4-6背景变幻 背景变换的代码如下#globallink margin:0px; paddi

12、ng:0px;#globallink ul list-style:none; padding:0px; margin:0px;#globallink li float:left; text-align:center; width:100px; #globallink a display:block; padding:9px 6px 11px 6px; background:url(button1.jpg) no-repeat; margin:0px;#globallink a:link, #globallink a:visited color:#630002; text-decoration:none;#globallink a:hover color:#FFFFFF; text-decoration:underline; background:url(button1_bg.jpg) no-repeat;图4-7 导航条4.4.3 鲜花导购 考虑到实际购物的网站需要保存顾客的信息，以便顺利的进行交易，因此在#left块中必须含有用户登录的菜单，代码如下： 用户: 密码: 忘记密码