大连东软信息学院

电子商务网页综合大作业设计（论文）

论文题目：嫣雨坊的网页设计与制作

系 所： 专 业： 学生姓名： 学生学号： 指导教师： 导师职称： 完成日期：

大连东软信息学院

Dalian Neusoft University of Information

大连东软信息学院毕业设计（论文） 摘要

嫣雨坊的网页设计与制作

摘 要

在时光飞逝的今天，我们再不仅仅是通过书籍报纸等途径来收知消息，伴随着互联网的飞速发展，人们可以足不出户就知天下大事国际新闻，互联网成为人们得知消息和新闻的重要来源，正因为有了互联网人们的生活也发生了巨大的改变，所以网站的建设就成为了互联网极为重要的事，我所设计的网站是想通过互联网这个大平台，让更多人去了解和介绍鲜花的寓意，因为互联网这个大平台，可以充分展示每一个细节。

我这次的设计的网站是嫣雨坊鲜花网站，也许有很大一部分人会设计电影的影评，明星的主页，我则不同，我设计是一个鲜花网站，鲜花早已不是当年被植物的生殖器官，在现在人们把它当作求爱的一种象征，爱的表达，促进感情的一种手段，所以我决定做这个网站来为那些相促进感情，又不知送什么花的朋友一些建议，通过这个网站能使用最少的时间来明确找出最适合自己的。

网页的制作都是通过HTML语言设计的，因为对其他的编程软件不是十分了解，所以制作了一个静态网站，在WINDOWS的系统中进行调试和展示效果。

关键词：互联网，鲜花，HTML，编程

I

大连东软信息学院毕业设计（论文） Abstract

Webpage design and manufacture of Yan rain

Abstract

The time flies today, we not only through books, newspapers and other ways to receive that message, along with the rapid development of the Internet, people can remain within doors can know the world events of international news, the Internet become important sources of news and news, it is because of the Internet, people's life has undergone tremendous changes, and so on the construction site of the Internet has become extremely important thing, I design the website is to through the platform of Internet, let more people to understand the meaning and flowers, because the Internet platform, can fully display each detail.

I designed this website is Yan rain flowers website, maybe there are a lot of people will design a movie, star home, I was different, I design is a flower, flowers had not had to be the reproductive organs of plants, now people have a it as a symbol for love, the expression of love, a way to promote feelings, so I decided to do the site promotion for those feelings, and I do not know what to send flowers friend some advice, through this website can clearly with the least amount of time to find the most suitable for their own.

Webpage production are designed by HTML language, because of other programming software is not very understanding, so making a static website, debug and display in the WINDOWS system.

Keywords: Internet, Flower, HTML, Programming

II

大连东软信息学院毕业设计（论文） 目录

目 录

摘 要 ......................................................................... 错误！未定义书签。 ABSTRACT............................................................................................ I 第1章 绪 论 .................................................................................. - 1 -

1.1 网站的背景 ................................................................................................. - 1 - 1.2 网站的目的 ................................................................................................. - 1 - 1.3 网站的意义 ................................................................................................. - 1 -

第2章 网页的分析与设计 ............................................................... 2

2.1 网站主题 ..................................................................................................... - 2 - 2.2 页面的相关设计 ......................................................................................... - 2 -

2.2.1 Logo的设计 ......................................................................................................... - 2 - 2.2.2 导航条的设计 ...................................................................................................... - 2 - 2.2.3 背景与图片的设计 .............................................................................................. - 3 - 2.2.4 字体的相关搭配 .................................................................................................. - 4 -

2.3网站布局 ...................................................................................................... - 5 -

2.3.1 一级页面的设计 .................................................................................................. - 5 - 2.3.2 二级页面的设计 .................................................................................................. - 5 - 2.3.3 三级页面的设计 .................................................................................................. - 6 - 2.3.4 其他页面的设计 .................................................................................................. - 6 -

24框线图的设计 ...................................................................................................8

第3章 网站的实现 ........................................................................... 9

3.1 网站的制作与实现 ....................................................................................... 10

3.1.1 一级页面的实现 .....................................................................................................11 3.1.2 二级页面的实现 .................................................................................................... 12 3.1.3 三级页面的实现 ................................................................................................ - 11 - 3.1.4 其他页面的实现 .................................................................................................... 14

III

大连东软信息学院毕业设计（论文） 目录

3.1.5 重点页面的实现 .................................................................................................... 15

3.2 链接的使用 ................................................................................................... 16 3.3编写代码 .................................................................................................... - 17 -

3.3.1 外部CSS ............................................................................................................ - 17 - 3.3.2 导航条代码的引用 ............................................................................................ - 17 - 3.3.3 其他代码的编写 .................................................................................................... 19

第4章 网站测试 ......................................................................... - 19 -0 第5章 结 论 .................................................................................... 21 参考文献 ........................................................................................ - 21 - 致 谢..................................................................................................... 23

IV

大连东软信息学院毕业设计（论文）

第1章 绪 论

1.1 网站的背景

伴随着现代人生活越来伴随着现代人生活越来越快的节奏，人们对身边的生活细节越来越不注重，那些美好的事物都是神奇的大自然创造的，身边的花花草草，也许我们并不了解，也不太去欣赏他们突破重重困难的绽放，也并不了解他们独特的含义，所以想通过本论文，来介绍那些美丽的花朵的含义，例如鲜花的来历鲜花是被子植物（被子植物门植物，又称有花植物）的繁殖器官，生物学功能的是结合雄性精的细泡与雌性软的细泡以产生种子。这一项程始于传粉，然后通过风吹或蜜蜂蝴蝶的采蜜形成受精。鲜花早以不是从前那作为植物的生殖器官，现在早已成为节日聚会不可缺少的一部分。

1.2 网站的目的

我想通过这个网站让更多人了解花朵并不仅仅是表达爱意的一种，更是大自然给我们的一种惊喜，让我从它们受精到发育到品种的变异一点一点演变成我们现在看到的样子，例如玫瑰为例，属于蔷薇的一种，原产地是中国，玫瑰作为农作物时，其花朵主要的目的用于食品及提炼香精玫瑰精油，精油主要用于化妆品，食品，精细化工等工业，通过网页介绍花朵并不仅仅是观赏品，也可以有别的用处，也希望通过本网址呼吁人们要呵护花朵，它们来到我们面前是养殖人员多么不容易的种植培养。

1.3 网站的意义

我们只看见花朵娇艳美丽的一面，谁知道它们是经历了怎样的历程才变成现在人见人爱的模样，一朵小花，要从一个种子慢慢生根发芽，突破泥土的束缚，在风雨中长大，成长到小蜜蜂蝴蝶的采蜜进行受粉，我们只爱它们绽放那一刻，所以，我想通过本网站的介绍，让跟多的人了解它们，爱护它们，它不仅仅是原来植物的生殖器官，现在更是爱的一种表示，就拿玫瑰为例，我们现在提到玫瑰就是爱情的象征，恋人门之间拿它来作为爱的一种表示，也可以称为订情之花，所以现在鲜花早已成为生活中不可替代的一部分了，古人更是有“碧荷生幽泉，朝日艳且鲜，秋花冒绿水，密叶罗青烟”这样的佳作。

- 1 -

大连东软信息学院毕业设计（论文）

第2章 网页的分析与设计

2.1 网站主题

嫣雨坊网页设计与制作的主题是以玫瑰，菊花，康乃馨，郁金香等花卉主题的，通过介绍各中花卉的代表寓意和品种介绍，让那些苦恼于送花的朋友得到更好的帮助。同时也给那些对花朵一无所知的人普及知识，让大家并不盲目的去选购。

2.2 页面的相关设计

2.2.1 Logo的设计

图2.1 网站Logo

如图3.1所示，Logo是以网站的名称命名的，“嫣雨坊”一个富有诗情画意的名字，logo的上方是通过绝对定位来实现的，英文寓意甜蜜小屋，希望看到网站的每个人都能有一间甜蜜的小屋，而在“嫣雨坊”下方是通过span标签来设置的，在Logo的最右边是一个类似叶子的东西来衬托标题。

2.2.2 导航条的设计

图2.2 网站导航条

图2.3 网站导航条点击后

如图2.2所示，整个导航条是以圆角的形式呈现的，而导航条的前端是黑色的，在鼠标滑动过变成橘黄色，黑色是一种特殊的色彩，它本身无刺激性，具有包容性，会配合其他色彩增加刺激，黑是消极色，也是严肃的色彩，但却是一种很重要的补色之一，所以犹豫对黑色配合俏皮有活力的橙色来调节呆板的导航条。而进去的导航条我使用了庄重的白色搭配大海的蓝色，这样使页面看着没有首页那么呆板，又多了一点俏皮。

- 2 -

大连东软信息学院毕业设计（论文）

2.2.3 背景与图片的设计

图2.4 背景图片

背景图我采用了渐变的纯色，白，深灰，浅灰，因为本身花朵的图片颜色已经反差够明显了，所以使用纯色的背景可以缓解一下疲惫的视力，还有一个的原因是，灰色的含义是，诚恳，考究，没有色相和纯度，只有明度，介于黑色和白色之间，既没有黑色的忧郁，也没有白色的明亮，所以纯在于两者之间，背景图是通过photoshop软件的调色板调出来的，自己调出来的颜色比较相当。整个网站都以白灰为主色调穿插链接的。不使用复杂的颜色回到最初的自己是我想阐述给大家的理念。

- 3 -

大连东软信息学院毕业设计（论文）

图2.5圆角图片

如图2.5圆角图片所示，图片是使用Photoshop修饰变成圆角图片，圆润的的图角给人的视觉感觉不那么生硬，比较包容，没有给人那种压迫感，其圆角和背景图的搭配也比较符合视觉感觉。

图2.6白色边框图片

如图2.6白色边框图片，这种折叠的效果是我想给观看我网站的浏览者一种像在看相框照片一样的感觉，就通过使用边框的颜色，来给浏览者一种逼真的感觉，就像图片相在框里一样，从细节关注浏览者的感觉。

2.2.4 字体的相关搭配

整个网站的字体由黑色为主黑由于圆角背景是白色的，所以要用黑色的字才能让整个网站更加简洁更加清晰，而且黑色的字又与大的背景图片相呼应。让浏览网页的人一目了然；在大的盒子里面我选择庄重的黑色还大段的段落介绍各种花卉的寓意，以表示我对大自然给我们的惊喜表示尊重，在大段的文字介绍后，我用灰色的字体来分段介绍各花卉的具体含义，为缓解视觉疲劳，从而达到放松的作用。在浏览网站时，没有那种因为图片凌乱的烦躁感。让浏览者清晰简洁的浏览。

- 4 -

大连东软信息学院毕业设计（论文）

2.3网站布局

在制作网站的前期必须要有一个网站布局图，在Adobe Photoshop中设计中制作了嫣雨坊的布局如图2.7，图2.8，图2.9所示。

2.3.1 一级页面的设计

如图2.7所示是嫣雨坊一级页面的布局图：

在首页的布局我采用了九个盒子来定位，分别为Logo一个盒子，导航条，大张图片，小盒子里包括图片和介绍文字，在设计这样的布局不仅使网页内容丰富，更不让网页看着杂乱无章。在浏览网页时，所有的图片都有超链接，连贯性很好。

图2.7 首页的布局图

2.3.2 二级页面的设计

如图2.8所示是嫣雨坊二级页面的布局图：二级页面的设计布局是通过八个盒子控制的，在网页的上方有导航条，导航条下方是对花卉具体介绍的大图片，大图片的下方是由一个个小盒子的图片超链接，图片下方是介绍鲜花的文字，在下方是具体介绍寓意

- 5 -

大连东软信息学院毕业设计（论文）

和颜色代表的含义，而在网页的最下方是一个长方形盒子，包含着版权信息，因为配和首页的主色调，所以二级页面也采用了灰色渐变的纯色背景，这样看起来比较统一搭配。不会显得那么唐突。

图2.8 二级页面的布局图

2.3.3 三级页面的设计

如图2.9所示是嫣雨坊三级页面的布局图：

网站的三级页面是通过一个一个图片构造而成，这样的页面设计最主要的目的是凸显鲜花的五彩缤纷，三级页面不在仅仅是首页和二级页面单调的纯色，而是通过另一种丰富多彩的颜色来诠释着花的海洋，在花朵的海洋里可以尽情的释放激情。

- 6 -

大连东软信息学院毕业设计（论文）

图2.9 三级页面的布局图

2.3.4 其他页面的设计

如图2.10所示是嫣雨坊其他页面的布局图：

在网页其他的页面设计布局里，也使用了在网也的最上方，一个大盒子包含着导航条，在导航条的下方，图片和段落的文字介绍，不同的图片搭配不同的花语含义，这样简单大方的结构，可以时浏览网页者不那么不清晰。

图2.10 其他页面的布局图

- 7 -

大连东软信息学院毕业设计（论文）

2.4框线图的设计

在做网站之前，通过设计与比较，最终确定网站的框线图如图2.4所示。嫣雨坊的首页包括对花卉总体的简单介绍，二级页面则是把想要介绍的花卉分为具体的，康乃馨，玫瑰，郁金香，菊花等品种的花卉作为具体的介绍，三级页面，是把各种花卉的图片，和段落的描述更为具体，具体表述到每种花卉的颜色代表的具体含义。也希望通过框线图把网站的总体一目了然。

首页 二级页面 二级页面 三级页面 图2.11 框线图

- 8 -

大连东软信息学院毕业设计（论文）

第3章 网站的实现

3.1 网站的制作与实现

3.1.1 一级页面的实现

首页的Logo是通过用绝对定位来控制图片的位置，文字与图片之间有一定距离，而logo的文字则通过标题大小控制文字的大小，

SWEET HOUSE

导航条则是使用nav-bg1，nav-bg2两张图片来组成，当鼠标划过时，导航条的背景黑色变成橘色在导航条下方，用了一个大盒子把使用photoshop软件修改图片的大小控制在所设定的盒子里，另外在包在盒子里面的图片加了文字，使用小段的文字来介绍盒子里的图片，让文字和是图片的搭配更有美感，使用em，br等代码来控制文字的大小，和排列位置，还增加了超链接让文字能链接，让整个网页更连贯性，通过文字上的链接可以在跳转别的二级页面。

在图片的下方是介绍网站的主要内容，使用了三个盒子分别把图片文字分成三栏，这样再看网址的时候能更简洁看出玫瑰，百合，郁金香，的三种花卉的分类，在各个盒子里，盒子的上部分是图片可以通过图片跳转到下一个，实现更多跳转的目的，而在图片的下方这是大段的文字，文字上面的标题通过

标签控制大小，段落文字则通过

标签来控制。

再往下看是文字地下的更多是使用的标签来控制，通过此按钮则可以跳转到三级页面，在网页既美观又实用，网站在下面是版权信息，也是footer，作为网站的最底部可以使网站有一个很好的收尾作用。

首页没有使用更多复杂的盒子作为设计，因为我想通过使用简洁大方的代码，清晰的线条让看到网站的每一个人有着清晰的思路，让浏览页面的时候不会有太多的压迫感从而放弃看网页的想法，只有最简单的东西才能让人的印象更为深刻。

首页的展示图如图3.1.所示。

- 9 -

大连东软信息学院毕业设计（论文）

图3.1 首页设计图

3.1.2 二级页面的实现

如图3.2在网页最上方是一个蓝色的蝴蝶结，在蝴蝶结里面我使用photoshop软在对在图片里加的“嫣雨坊。”网站的名称，在蓝色蝴蝶结两面是导航条，做为二级页面的导航条我选择了灰色作为文字的颜色，在鼠标划过时，文字变为忧郁的蓝色，每个文字中间插入了小星星作为点缀，是导航条不在那么呆板，在下面使用一个图片作为超链接二阶页面主要介绍花朵的展示，通过使用浪线来将一个盒子间隔开，也起到美观的作用，在下面是四个盒子分别是介绍本页面花卉的品种图片，在图片中添加超链接，鼠标点击是可以进入下一个页面，通过点击页面可以对三级页面的浏览，在下面分为两个盒子，盒子中使用段落的文字介绍花卉，其花卉的含义寓意都可以在里面查看，在下面是一个盒子，同样使用段落文字介绍花卉的来源，也添加了超链接方便欣赏到下一页。同样页面的最下方的盒子里也是版权信息。

二级页面的展示图如图3.2所示。

- 10 -

大连东软信息学院毕业设计（论文）

参考文献

[1] 袁磊．网页设计与制作教程[M]，清华大学出版社，2008，10 [2] 温谦．别具光芒[M]，人民邮政大学出版社，2012，12

[3] 刘西杰．网页制作从入门到精通[M]，人民交通出版社，2011，4

[4] 温国锋．网页制作与网站建设完全学习手册[M]，经济科学出版社，2007，5 [5] 方宁.Photoshop+Dreamweaver网页与网站制作[M]，中国电力出版社，2003，6 [6] 戚安邦．网页制作书籍 教程 教程大全[M]，南开大学出版社，2008，2 [7] 沈建明．HTML、CSS网页制作从入门到精通[M]，人民出版社，2003，[8] 景新梅．网站制作与管理[J]，中国计算机报，2005，7 [9] 刘树立．网站的制作[M]，北京大学出版社，2006，3

[10] 马丁·鲁斯摩尔．网页建设图书，中国人民出版社[M]，2003，4

- 21 -

4 大连东软信息学院毕业设计（论文）

致 谢

时光转眼飞逝，还记得我是那个懵懂刚进入大学的无知少年，一转眼我已经在这所美丽的大学已经就读三年整，时间真是如流水，这三年是在各位老师的帮助下才得以顺利毕业，三年的时光快乐即美好，都说不读大学会是人生中的一种缺憾，在这所人文学院里，我的成长和学习的知识，都是不可多得的财富。

在嫣雨坊的网页设计与制作中，首先我要感谢我的指导老师，从网站的最开始选题到设计到中期的修改和指导，在老师循循善诱的教导下，独立的完成了网站和论文的撰写，老师的耐心我依然铭记于心，我会不断的努力做到更好。

最后是多我在大学三年的总结，这三年里迷茫过，也无助过，但在老师和同学们的帮助下，我从新找到了我的目标，老师的关爱，同学们的友谊，是我最大的财富，同学们之间也许吵闹过，但开心的那一部分是无可替代的，所以这三年的时光即珍惜也盼望着慢慢过，嫣雨坊网站的设计不仅是一份毕业作业，更是为了展示我这三年的学习成果，感谢各位老师，帮助过我的同学。

- 22 -

大连东软信息学院毕业设计（论文）

大连东软信息学院

毕业设计（论文）原创承诺书

1、本人承诺：所提交的毕业设计（论文）是认真学习理解学校的《毕业设计（论文）工作规范》后，在教师的指导下，独立地完成了任务书中规定的内容，不弄虚作假，不抄袭别人的工作内容。

2、本人在毕业设计（论文）中引用他人的观点和研究成果，均在文中加以注释或以参考文献形式列出，对本文的研究工作做出重要贡献的个人和集体均已在文中注明。

3、在毕业设计（论文）中对侵犯任何方面知识产权的行为，由本人承担相应的法律责任。

4、本人完全了解学校关于保存、使用毕业设计（论文）的规定，即：按照学校要求提交论文和相关材料的印刷本和电子版本；同意学校保留毕业设计（论文）的复印件和电子版本，允许被查阅和借阅；学校可以采用影印、缩印或其他复制手段保存毕业设计（论文），可以公布其中的全部或部分内容。

5、本人完全了解《毕业（设计）论文工作规范》关于“学生毕业设计（论文）出现购买、他人代写、或者抄袭、剽窃等作假情形的，取消其学位申请资格；已经获得学位的，依法撤销其学位。取消学位申请资格或者撤销学位者，从处理决定之日起3年内，学校不再接受学生学位申请”的规定内容。

6、本人完全了解《学生手册》中关于在“毕业设计（论文）等环节中被认定抄袭他人成果者”不授予学士学位，并且“毕业学年因违纪受处分影响学位的学生不授予学士学位，并且无学士学位申请资格”的规定内容。

以上承诺的法律结果、不能正常毕业及其他不可预见的后果由学生本人承担！

学生本人签字：

年 月 日

- 23 -

本文来源：https://www.bwwdw.com/article/li08.html