鲜花满屋 售花网店设计Word下载.docx
- 文档编号:13953793
- 上传时间:2022-10-15
- 格式:DOCX
- 页数:20
- 大小:1.57MB
鲜花满屋 售花网店设计Word下载.docx
《鲜花满屋 售花网店设计Word下载.docx》由会员分享,可在线阅读,更多相关《鲜花满屋 售花网店设计Word下载.docx(20页珍藏版)》请在冰豆网上搜索。
完成网站中各个模块功能的设计和实现。
二、开发工具:
MacromediaDreamweaverCS5PhotoshopCS5
三、要参考资料:
[1]胡海等著,网页设计梦工厂DREAMWEAVER篇.北京:
清华大学出版社.2008
[2]网站建设教程/金旭亮,吴彬.北京:
高等教育出版社,2003.7
[3]曾顺,精通css+div网页样式与布局.北京:
人民邮电出版社.2007
[4]邓文渊等,网页制作彻底研究.北京:
人民邮电出版社,2002
[5]网站建设教程/金旭亮,吴彬.北京:
指导教师(签字):
侯仕平教研室主任(签字):
网站建设课程设计说明书
课题:
网店建设
姓名:
宗洋
学号:
092601093
年级专业:
计算机网络技术
班级:
09普专计算机网络技术
指导老师:
侯仕平
院系:
国际学院
提交日期:
2011年11月
摘要
本网站使用MacromediaDreamweaver进行开发,结合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.1Banner图片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页面框架
<
divid="
container"
>
banner"
/div>
globallink"
<
left"
main"
上图中的各个部分采用了HTML代码中的各个<
div>
对应的id。
其中#banner块对应页面上的banner图片,#globallink则是网站的导航菜单栏,#left包涵登录系统以及鲜花的分类信息,#main块则主要包括本站快讯、鲜花推荐、新品上市和鲜花导购等,其中#left与#main页面的主体块,他们的子块关系如图4-4所示。
图4-4#left与#main页面的框架
这两个部分在整个页面中占主体部位置,设计的时候细节比较关键,直接决定着真个页面是否吸引人,相应的代码框架如下:
<
login"
category"
latest"
recommend"
new"
tips"
4.4模块分析
在确定页面的各个块与子块后,便可以对网页的各个部分进行设计了,本网页的整体上设置粉红色背景,采用固定宽度剧居中的板式,代码如下。
body{
background-color:
#ffd8d9;
margin:
1px0px0px0px;
padding:
0px;
font-size:
12px;
font-family:
Arial,Helvetica,sans-serif;
}
#container{
position:
relative;
0pxauto0pxauto;
width:
700px;
text-align:
left;
4.4.1Banner图片
本网页banner图片的制作十分简单,在photoshop中建立Banner文件后导入一张玫瑰的图片,在使用渐变效果,让他跟背景颜色自然过度。
Banner图片添加文字,重点在于醒目、大方、又能配合整个网站的特点,文字采用阴影和描边的效果,最后给整个图片添加一个白色的边框,便得到了banner图片,如图4-5所示。
图4-5banner图片
4.4.2导航菜单
导航菜单采用项目列表的方式,将<
ul>
标记与<
li>
标记进行相应的设置,使得菜单能显示到同一行上面,代码如下:
<
ahref="
#"
关于本店<
/a>
/li>
鲜花礼品<
绿色植物<
花之物语<
会员中心<
联系我们<
返回首页<
/ul>
br>
这里为超链接添加背景变换的效果,如图4-6所示。
图4-6背景变幻
背景变换的代码如下
#globallink{
#globallinkul{
list-style:
none;
#globallinkli{
float:
center;
100px;
#globallinka{
display:
block;
9px6px11px6px;
background:
url(button1.jpg)no-repeat;
#globallinka:
link,#globallinka:
visited{
color:
#630002;
text-decoration:
hover{
#FFFFFF;
underline;
url(button1_bg.jpg)no-repeat;
图4-7导航条
4.4.3鲜花导购
考虑到实际购物的网站需要保存顾客的信息,以便顺利的进行交易,因此在#left块中必须含有用户登录的菜单,代码如下:
form>
<
p>
用户:
inputtype="
text"
class="
/p>
密码:
button"
btn"
value="
登录"
注册"
忘记密码<
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 鲜花满屋 售花网店设计 鲜花 满屋 售花网店 设计