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页面框架
<div id="container">
<div id="banner"></div>
<div id="globallink"></div>
<div id="left"></div>
<div id="main"></div>
</div>
上图中的各个部分采用了HTML代码中的各个<div>对应的id。其中#banner块对应页面上的banner图片，#globallink则是网站的导航菜单栏，#left包涵登录系统以及鲜花的分类信息，#main块则主要包括本站快讯、鲜花推荐、新品上市和鲜花导购等，其中#left与#main页面的主体块，他们的子块关系如图4-4所示。

图4-4#left与#main页面的框架
这两个部分在整个页面中占主体部位置，设计的时候细节比较关键，直接决定着真个页面是否吸引人，相应的代码框架如下：
<div id="left">
<div id="login"></div>
<div id="category"></div>
<div id="main"></div>
<div id="latest"></div>
<div id="recommend"></div>
<div id="new"></div>
<div id="tips"></div>
</div>
4.4 模块分析
在确定页面的各个块与子块后，便可以对网页的各个部分进行设计了，本网页的整体上设置粉红色背景，采用固定宽度剧居中的板式，代码如下。
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中建立Banner文件后导入一张玫瑰的图片，在使用渐变效果，让他跟背景颜色自然过度。
Banner图片添加文字，重点在于醒目、大方、又能配合整个网站的特点，文字采用阴影和描边的效果，最后给整个图片添加一个白色的边框，便得到了banner图片，如图4-5所示。

图4-5 banner图片
4.4.2 导航菜单
导航菜单采用项目列表的方式，将<ul>标记与<li>标记进行相应的设置，使得菜单能显示到同一行上面，代码如下：
<div id="globallink">
<ul>
<li><a href="#">关于本店</a></li>
<li><a href="#">鲜花礼品</a></li>
<li><a href="#">绿色植物</a></li>
<li><a href="#">花之物语</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">返回首页</a></li>
</ul>
<br>
</div>
这里为超链接添加背景变换的效果，如图4-6所示。

图4-6背景变幻
背景变换的代码如下
#globallink{
margin:0px; padding: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块中必须含有用户登录的菜单，代码如下：
<div id="login">
<form>
<p>用户: <input type="text" class="text"></p>
<p>密码: <input type="text" class="text"></p>
<p><input type="button" class="btn" value="登录"> <input type="button" class="btn" value="注册"> <a href="#">忘记密码</a></p>
</form>
</div>
在#login中没有用户登录的字样，因此用图片代替，
#login{
background:url(login.jpg) no-repeat;
padding:55px 0px 10px 0px;
}
#login form{
padding:0px; 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;
padding:0px; 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
}
位于最上方的是“本站快讯”，其实它的结构就是几张图片，显示出网站最近的新品、折扣和酬宾等相关信息，代码如下：
<div id="latest">
<a href="xinhua.html">
<img src="new1.jpg"></a>
<a href="youhuei.html">
<img src="new2.jpg"></a>
<a href="#"><img src="new3.jpg"></a>
</div>

#latest{
background:url(latest.jpg) no-repeat;
padding:35px 0px 0px 0px;
}
#latest img{
border:none;
padding-left:1px;
}
效果如图4-9所示

图4-9 本站快讯
接下来“鲜花推荐”与“新品上市”都是花的图片展示，考虑项目列表自动换行方面的便利，用幻灯片效果的做法[2]，直接对图片进行排版，代码如下：
</div>
<div id="new">
<ul>
<li><a href="#"><img src="flower9.jpg"><br>粉色迷情</a></li>
<li><a href="#"><img src="flower10.jpg"><br>海岸的幽雅</a></li>
<li><a href="#"><img src="flower11.jpg"><br>百年地中海</a></li>
<li><a href="#"><img src="flower12.jpg"><br>爱要说出口</a></li>
</ul>
<br>&nbsp;
</div>
CSS文件代码：
#recommend br,#new br, #tips br{
display:block;
clear:both;
margin:0px; padding:0px;
}
#recommend ul, #new ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 8px;
}
#recommend ul li, #new ul li{
text-align:center;
float:left;
width:125px;
}
#recommend ul li img, #new ul li img{
border:none;
margin:5px 0px 3px 0px;
padding:0px;
}
#recommend ul li a:link,#recommend ul li a:visited, #new ul li a:link,#new ul li a:visited{
color:#666666;
text-decoration:none;
}
#recommend ul li a:hover, #new ul li a:hover{
color:#d20005;
text-decoration:underline;
}
效果如图4-10所示

图4-10 鲜花展示
内容部分是最下端的“鲜花导购”，主要是鲜花的一些常识，需要以文字的形式进行项目列表的排版，要求项目列表分成两列显示，HTML框架如下[3]
<div id="tips">
<ul>
<li><a href="huayu-7.html">各种鲜花所代表的含义</a></li>
<li><a href="huayu-7.html">花的喜怒哀乐与人的各种感觉</a></li>
<li><a href="#">养花与养生之道</a></li>
<li><a href="#">每天清晨的第一缕阳光</a></li>
<li><a href="#">花香的味道</a></li>
<li><a href="#">世界各地关于送花的习俗</a></li>
<li><a href="xinhua.html">种花与送花</a></li>
<li><a href="huayu-7.html">手捧一束鲜花的等待</a></li>
</ul>
<br>&nbsp;
</div>
想要将项目列表分成两列显示其实十分简单，只要给<li>指定一个宽度即可。
指定宽度后项目列表便会自动按照宽度进行换行，显示效果如图4-11所示。[4]
#tips{
background:url(tips.jpg) no-repeat;
margin:5px 0px 0px 0px;
padding:35px 0px 0px 0px;
background-color:#FFFFFF;
}
#tips ul{
list-style:none;
margin:0px;
padding:5px 5px 5px 30px;
}
#tips ul li{
background:url(icon2.gif) no-repeat 5px 6px;
padding:1px 0px 1px 12px;
float:left;
width:220px; /* 指定宽度 */
}
#tips ul li a:link,#tips ul li a:visited{
color:#222222;
text-decoration:none;
}
#tips ul li a:hover{
color:#d20005;
text-decoration:underline;
}

图4-11 鲜花导购

5、 整体调整
通过对所有子模块的排版，整个网购网站的首页基本做完，最后必须对整体页面进行查看，细节上做小的调整[5]。
最终页面在IE8中显示的效果如图5-1所示。

图5-1 在IE8中的预览效果

6、总结
至此，本论文从设计到实现展示了一个简单的网站系统。从宏观上分析，功能不过于首页介绍、banner等几个最常用的功能。同时，在网站的实现过程中首要的是对需求的分析。然后，是对页面的设计，只要设计好页面，就做好了网站的基础在此看来，做一个好的网站首先要设计一个好的框架。接下来是对各个功能模块的具体设计，其实网站的建设方法都大体类似。总之，从设计到实现这个网站建设，可以学到一些网站建设的通用知识，为以后建设一些大型网站打下基础。
该网站结合所学知识，构建一个淘宝交易的简单网站，首先介绍网站的功能与页面，接着设计网站的体系结构，然后针对具体功能模块进行详细分析

7、致 谢
时将近半个月的时间终于将这篇课程设计写完了，在写作过程中遇到了无数的困难和障碍，都在同学和老师的帮助下度过了。尤其要强烈感谢我的指导老师侯仕平老师，他对我进行了无私的指导和帮助，不厌其烦的帮助进行论文的修改和改进。在侯仕平老师的精心指导下完成了本次课程设计，他丰富的专业知识、博爱的胸怀、谦逊的品质和严谨细致、一丝不苟的作风是我工作、学习中的榜样；他循循善诱的教导和不拘一格的思路给予我无尽的启迪。通过这短短半个月的毕业设计环节，我无论在基础理论知识、软件操作技能、还是独立思考问题能力方面都有了长足的进步，与此同时，老师还经常教育我一些为人处事的道理，使我在增长知识的同时也收获了许多人生哲理，在此谨对老师致以衷心的感谢！本论文从选题、编程设计到毕业论文整个过程都倾注了老师的心血，再一次向他表示衷心的感谢和诚挚的敬意！同时要感谢我感谢我的同学和朋友，在我写论文的过程中给予我了很多你问素材，还在课程设计的撰写和排版灯过程中提供热情的帮助。在写作过程中我还学到了团队精神的重要性，无论做什么事，都不能脱离团体。希望在以后的学习或工作中，能够有一个比较严谨、缜密的态度来对待。而且，时时保持一颗清醒的头脑，一个灵活的创新头脑。
本文引用了数位学者的研究文献，如果没有各位学者的研究成果的帮助和启发，我将很难完成本篇论文的写作。
由于我的学术水平有限，所写写作难免有不足之处，恳请各位老师和学友批评和指正！
再次感谢大家！！谢谢！！！

参考文献
[1]胡海等著，网页设计梦工厂DREAMWEAVER篇.北京：清华大学出版社.2008
[2] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7
[3]曾顺，精通css+div网页样式与布局.北京：人民邮电出版社.2007
[4]邓文渊等，网页制作彻底研究.北京：人民邮电出版社，2002
[5] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7

17