2016年鲜花满屋-售花网店设计.doc

网站建设课程设计说明书(论文)
网站建设课程设计任务书
2010 —2011 学年第二学期
专业班级：09计算机网络与技术 课程名称： 网页设计
学号： 092601093 姓 名： 宗洋
完成期限：自 2011年 11 月 1 日至 2011 年 11 月 17日
课程设计题目： 鲜花满屋 售花网店
设计目的：随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业宣传的工具。为了进一步加深、巩固所学专业课程（《网站设计》）的基本理论知识，进一步培养自己综合分析问题和解决问题的能力，使自己能够通过本次课程设计而得到全面的锻炼。
功能定位：以网络平台充分体现本网站的功能性在目标顾客访问网站的同时收集公司的目标顾客潜在顾客的资料以及进行的交流沟通和商业往来信息；对顾客提供相关产品及周边；拓宽销售渠道；帮助公司改进营销方法和营销策略使公司能系统了解市场和把握市场更好满足市场需求。
一、设计的任务：完成网站中各个模块功能的设计和实现。
二、开发工具：Macromedia DreamweaverCS5 PhotoshopCS5
三、要参考资料：
[1]胡海等著，网页设计梦工厂DREAMWEAVER篇.北京：清华大学出版社.2008
[2] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7
[3]曾顺，精通css+div网页样式与布局.北京：人民邮电出版社.2007
[4]邓文渊等，网页制作彻底研究.北京：人民邮电出版社，2002
[5] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社2003.7
指导教师（签字）： 侯仕平 教研室主任（签字）：

网站建设课程设计说明书

课 题：　 　网店建设
姓 名：　 宗 洋 　
学 号： 092601093
年级专业：　 计算机网络技术
班 级： 09普专计算机网络技术
指导老师：　　 　 侯仕平 　　　
院 系：　　 国际学院 　

提交日期：2011年11月
I

摘 要
本网站使用Macromedia Dreamweaver进行开发，结合Photoshop等软件一起制作。本网站包含关于本站、作品介绍、最新动态、周边商城等的设计与实现。首先对网站的需求进行了分析，建立网站工作流程图。然后划分网站的功能模块，最后详细描述了各个功能模块实现的方法，并给出相应代码。
本网站结合Dreamweaver所学的知识，构建的一个实例网站，首先是网站的首页以及网站各个模块的组成，接着设计网站的主要体系结构，然后结和各个模块进行详细分析。
本网站主要是用来介绍和推广‘鲜花满屋’这家网售花店的产品和活动。

关键字：Dreamweaver ，Photoshop，网站设计，鲜花满屋

网页设计课程设计说明书

目 录

1、前言 2
2、需求分析 2
2.1 市场分析 2
2.2 技术可行性分析 2
2.3 性能需求 3
3、功能模块的关系图 3
3
4、网站介绍 4
4.1分析架构 4
4.2 设计分析 4
4.3 排版构架 5
4.4 模块分析 6
4.4.1 Banner图片 7
4.4.2 导航菜单 7
4.4.3 鲜花导购 8
4.4.4 主体内容 9
5、整体调整 9
6、总结 9
7、致 谢 9
参考文献 9

1、前言
随着社会发展，人类的生产生活越来越离不开网络，网络已经影响到地球上的每家每户。网络的规模也逐渐增大。网络的元素也随之而增加，有的利用其通信，有的利用其作为商业用途，在网络上进行出售、收购、宣传等用途。从而使得网络越来越成为现今社会上必不可少的元素，而网站就是这个网络里的一个很大的元素。本网站结合自己所学的知识，构建的一个实例网站，首先介绍网站的功能，接着设计网站的主要体系结构，然后结和各个模块进行详细分析。
2、需求分析
2.1 市场分析
金融危机为外资企业入驻中国网上花店行业创造了条件，国际许多网上花店企业已经看中在中国低成本拓展市场的机会，随着外资投入逐步加大，中国国内企业改革重组迅速加快。同时新的行业制度等政策的颁布和实施将促使我国网上花店行业洗牌，企业兼并重组将在政策的促使下大力发展。随着国内环保经济的发展，低碳已经成为“十二五规划”中的主题，网上花店行业的产业升级已经迫在眉睫。
　　尚普咨询通过科学的市场分析建议投资者加强对网上花店行业企业的筛选，选择行业龙头企业、长期增长的企业、具有良好赢利模式的企业，关注网上花店行业子行业关注网上花店行业上下游企业，优化客户结构，针对网上花店行业需求进行新产品开发。

2.2 技术可行性分析
这个网站是基于Dreamweaver来开发的。运用了Photoshop、并参考了多方面的书籍的情况下完成的。通过它来构建一个在线的网站，实现在互联网上使用的网络的绝大部分功能，本网站在技术上是可以达到的。

2.3 性能需求
设备需求：PC机，WindoesXP/Win7操作系统，利用Dreamweaver，photoshop
3、功能模块的关系图

图3-1 系统模块图

4、网站介绍
4.1分析架构
本网站的网上商店主要以出售鲜花为主这种类型的网站的特点就是绚丽，让人感觉琳琅满目而美丽大方。结合花店的主题，因此采用粉色为主的色调。又考虑到鲜花的各式各样，因此站点还包涵鲜花导购等小知识，效果图如4-1所示。

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

图4-3页面框架
中的各个部分采用了HTML代码中的各个v id="category">ding: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中建立Banner文件后导入一张玫瑰的图片，在使用渐变效果，让他跟背景颜色自然过度。
Banner图片添加文字，重点在于醒目、大方、又能配合整个网站的特点，文字采用阴影和描边的效果，最后给整个图片添加一个白色的边框，便得到了banner图片，如图4-5所示。

图4-5 banner图片
4.4.2 导航菜单
导航菜单采用项目列表的方式，将rgin: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块中必须含有用户登录的菜单，代码如下：
class="text">x; margin:0px;
}
#login p{
margin:0px; text-align:left;
padding:5px 0px 0px 25px;
}
#login p input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#login form input.text{
border-bottom:1px solid #000000;
border-left:none; border-right:none;
border-top:none;
padding0px; width:90px;
}
#login form input.btn{
border:1px solid #000000;
background-color:#ffeff0;
height:17px; padding:0px;
}
#login p a:link, #login p a:visited{
color:#333333;
text-decoration:none;
}
#login p a:hover{
color:#000088;
text-decoration:underline;
}
用户登录的做法，简历一个PSD文件，使用页面的粉红色作为背景颜色，在背景图片上设置树叶的形状，添加阴影效果，最后添加文字，最终效果如下图4-8

图4-8 小标题
4.4.4 主体内容
页面的主体部分主要以鲜花的图片展示和价格为主，各个板块的设置方法都大同小异。块的整体依然采用左浮动的固定宽度板式[1]，代码如下：
#main{
float:left;
width:518px;
margin:1px 0px 0px 2px
}
位于最上方的是“本站快讯”，其实它的结构就是几张图片，显示出网站最近的新品、折扣和酬宾等相关信息，代码如下：
href="xinhua.html">

站快讯
接下来“鲜花推荐”与“新品上市”都是花的图片展示，考虑项目列表自动换行方面的便利，用幻灯片效果的做法[2]，直接对图片进行排版，代码如下：