鲜花满屋 售花网店设计毕业设计Word格式文档下载.docx
- 文档编号:5844421
- 上传时间:2023-05-05
- 格式:DOCX
- 页数:22
- 大小:1.57MB
鲜花满屋 售花网店设计毕业设计Word格式文档下载.docx
《鲜花满屋 售花网店设计毕业设计Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《鲜花满屋 售花网店设计毕业设计Word格式文档下载.docx(22页珍藏版)》请在冰点文库上搜索。
指导教师(签字):
侯仕平教研室主任(签字):
网站建设课程设计说明书
课题:
网店建设
姓名:
宗洋
学号:
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="
登录"
注册"
忘记密码<
/form>
在#login中没有用户登录的字样,因此用图片代替,
#login{
url(login.jpg)no-repeat;
55px0px10px0px;
#loginform{
#loginp{
5px0px0px25px;
#loginpinput{
#loginforminput.text{
border-bottom:
1pxsolid#000000;
border-left:
border-right:
border-top:
90px;
#loginforminput.btn{
border:
#ffeff0;
height:
17px;
#loginpa:
link,#loginpa:
#333333;
#000088;
用户登录的做法,简历一个PSD文件,使用页面的粉红色作为背景颜色,在背景图片上设置树叶的形状,添加阴影效果,最后添加文字,最终效果如下图4-8
图4-8小标题
4.4.4主体内容
页面的主体部分主要以鲜花的图片展示和价格为主,各个板块的设置方法都大同小异。
块的整体依然采用左浮动的固定宽度板式[1],代码如下:
#main{
518px;
1px0px0px2px
位于最上方的是“本站快讯”,其实它的结构就是几张图片,显示出网站最近的新品、折扣和酬宾等相关信息,代码如下:
xinhua.html"
imgsrc="
new1.jpg"
youhuei.html"
new2.jpg"
new3.jpg"
#latest{
url(latest.jpg)no-repeat;
35px0px0px0px;
#latestimg{
padding-left:
1px;
效果如图4-9所示
图4-9本站快讯
接下来“鲜花推荐”与“新品上市”都是花的图片展示,考虑项目列表自动换行方面的便利,用幻灯片效果的做法[2],直接对图片进行排版,代码如下:
flower9.jpg"
粉色迷情<
flower10.jpg"
海岸的幽雅<
flower11.jpg"
百年地中海<
flower12.jpg"
爱要说出口<
&
nbsp;
CSS文件代码:
#recommendbr,#newbr,#tipsbr{
clear:
both;
#recommendul,#newul{
5px5px5px8px;
#recommendulli,#newulli{
125px;
#recommendulliimg,#newulliimg{
5px0px3px0px;
#recommendullia:
link,#recommendullia:
visited,#newullia:
link,#newullia:
#666666;
hover,#newullia:
#d20005;
效果如图4-10所示
图4-10鲜花展示
内容部分是最下端的“鲜花导购”,主要是鲜花的一些常识,需要以文字的形式进行项目列表的排版,要求项目列表分成两列显示,HTML框架如下[3]
huayu-7.html"
各种鲜花所代表的含义<
花的喜怒哀乐与人的各种感觉<
养花与养生之道<
每天清晨的第一缕阳光<
花香的味道<
世界各地关于送花的习俗<
种花与送花<
手捧一束鲜花的等待<
想要将项目列表分成两列显示其实十分简单,只要给<
指定一个宽度即可。
指定宽度后项目列表便会自动按照宽度进行换行,显示效果如图4-11所示。
[4]
#tips{
url(tips.jpg)no-repeat;
5px0px0px0px;
#tipsul{
5px5px5px30px;
#tipsulli{
url(icon2.gif)no-repeat5px6px;
1px0px1px12px;
220px;
/*指定宽度*/
#tipsullia:
link,#tipsullia:
#222222;
图4-11鲜花导购
5、整体调整
通过对所有子模块的排版,整个网购网站的首页基本做完,最后必须对整体页面进行查看,细节上做小的调整[5]。
最终页面在IE8中显示的效果如图5-1所示。
图5-1在IE8中的预览效果
6、总结
至此,本论文从设计到实现展示了一个简单的网站系统。
从宏观上分析,功能不过于首页介绍、banner等几个最常用的功能。
同时,在网站的实现过程中首要的是对需求的分析。
然后,是对页面的设计,只要设计好页面,就做好了网站的基础在此看来,做一个好的网站首先要设计一个好的框架。
接下来是对各个功能模块的具体设计,其实网站的建设方法都大体类似。
总之,从设计到实现这个网站建设,可以学到一些网站建设的通用知识,为以后建设一些大型网站打下基础。
该网站结合所学知识,构建一个淘宝交易的简单网站,首先介绍网站的功能与页面,接着设计网站的体系结构,然后针对具体功能模块进行详细分析
7、致谢
时将近半个月的时间终于将这篇课程设计写完了,在写作过程中遇到了无数的困难和障碍,都在同学和老师的帮助下度过了。
尤其要强烈感谢我的指导老师侯仕平老师,他对我进行了无私的指导和帮助,不厌其烦的帮助进行论文的修改和改进。
在侯仕平老师的精心指导下完成了本次课程设计,他丰富的专业知识、博爱的胸怀、谦逊的品质和严谨细致、一丝不苟的作风是我工作、学习中的榜样;
他循循善诱的教导和不拘一格的思路给予我无尽的启迪。
通过这短短半个月的毕业设计环节,我无论在基础理论知识、软件操作技能、还是独立思考问题能力方面都有了长足的进步,与此同时,老师还经常教育我一些为人处事的道理,使我在增长知识的同时也收获了许多人生哲理,在此谨对老师致以衷心的感谢!
本论文从选题、编程设计到毕业论文整个过程都倾注了老师的心血,再一次向他表示衷心的感谢和诚挚的敬意!
同时要感谢我感谢我的同学和朋友,在我写论文的过程中给予我了很多你问素材,还在课程设计的撰写和排版灯过程中提供热情的帮助。
在写作过程中我还学到了团队精神的重要性,无论做什么事,都不能脱离团体。
希望在以后的学习或工作中,能够有一个比较严谨、缜密的态度来对待。
而且,时时保持一颗清醒的头脑,一个灵活的创新头脑。
本文引用了数位学者的研究文献,如果没有各位学者的研究成果的帮助和启发,我将很难完成本篇论文的写作。
由于我的学术水平有限,所写写作难免有不足之处,恳请各位老师和学友批评和指正!
再次感谢大家!
!
谢谢!
参考文献
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 鲜花满屋 售花网店设计毕业设计 鲜花 满屋 售花网店 设计 毕业设计
![提示](https://static.bingdoc.com/images/bang_tan.gif)