电子商务网页综合大作业设计论文Word格式文档下载.docx

1、 Internet, Flower, HTML, Programming目 录摘 要 错误!未定义书签。Abstract I第1章绪 论 - 1 -1.1 网站的背景 - 1 -1.2 网站的目的 - 1 -1.3 网站的意义 - 1 -第2章网页的分析与设计 22.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 三级页面

2、的设计 - 6 - 2.3.4 其他页面的设计 - 6 -24框线图的设计 8第3章网站的实现 93.1 网站的制作与实现 103.1.1 一级页面的实现 113.1.2 二级页面的实现 123.1.3 三级页面的实现 - 11 -3.1.4 其他页面的实现 143.1.5 重点页面的实现 153.2 链接的使用 163.3编写代码 - 17 -3.3.1 外部CSS - 17 -3.3.2 导航条代码的引用 - 17 -3.3.3 其他代码的编写 19第4章网站测试 - 19 -0第5章结 论 21参考文献 - 21 -致 谢 23第1章绪 论1.1 网站的背景伴随着现代人生活越来伴随着现代

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

4、让我从它们受精到发育到品种的变异一点一点演变成我们现在看到的样子，例如玫瑰为例，属于蔷薇的一种，原产地是中国，玫瑰作为农作物时，其花朵主要的目的用于食品及提炼香精玫瑰精油，精油主要用于化妆品，食品，精细化工等工业，通过网页介绍花朵并不仅仅是观赏品，也可以有别的用处，也希望通过本网址呼吁人们要呵护花朵，它们来到我们面前是养殖人员多么不容易的种植培养。1.3 网站的意义我们只看见花朵娇艳美丽的一面，谁知道它们是经历了怎样的历程才变成现在人见人爱的模样，一朵小花，要从一个种子慢慢生根发芽，突破泥土的束缚，在风雨中长大，成长到小蜜蜂蝴蝶的采蜜进行受粉，我们只爱它们绽放那一刻，所以，我想通过本网站的介绍

5、，让跟多的人了解它们，爱护它们，它不仅仅是原来植物的生殖器官，现在更是爱的一种表示，就拿玫瑰为例，我们现在提到玫瑰就是爱情的象征，恋人门之间拿它来作为爱的一种表示，也可以称为订情之花，所以现在鲜花早已成为生活中不可替代的一部分了，古人更是有“碧荷生幽泉，朝日艳且鲜，秋花冒绿水，密叶罗青烟”这样的佳作。第2章网页的分析与设计2.1 网站主题嫣雨坊网页设计与制作的主题是以玫瑰，菊花，康乃馨，郁金香等花卉主题的，通过介绍各中花卉的代表寓意和品种介绍，让那些苦恼于送花的朋友得到更好的帮助。同时也给那些对花朵一无所知的人普及知识，让大家并不盲目的去选购。2.2 页面的相关设计2.2.1 Logo的设计图

6、2.1 网站Logo如图3.1所示，Logo是以网站的名称命名的，“嫣雨坊”一个富有诗情画意的名字，logo的上方是通过绝对定位来实现的，英文寓意甜蜜小屋，希望看到网站的每个人都能有一间甜蜜的小屋，而在“嫣雨坊”下方是通过span标签来设置的，在Logo的最右边是一个类似叶子的东西来衬托标题。2.2.2 导航条的设计图2.2 网站导航条图2.3 网站导航条点击后如图2.2所示，整个导航条是以圆角的形式呈现的，而导航条的前端是黑色的，在鼠标滑动过变成橘黄色，黑色是一种特殊的色彩，它本身无刺激性，具有包容性，会配合其他色彩增加刺激，黑是消极色，也是严肃的色彩，但却是一种很重要的补色之一，所以犹豫对

7、黑色配合俏皮有活力的橙色来调节呆板的导航条。而进去的导航条我使用了庄重的白色搭配大海的蓝色，这样使页面看着没有首页那么呆板，又多了一点俏皮。2.2.3 背景与图片的设计图2.4 背景图片背景图我采用了渐变的纯色，白，深灰，浅灰，因为本身花朵的图片颜色已经反差够明显了，所以使用纯色的背景可以缓解一下疲惫的视力，还有一个的原因是，灰色的含义是，诚恳，考究，没有色相和纯度，只有明度，介于黑色和白色之间，既没有黑色的忧郁，也没有白色的明亮，所以纯在于两者之间，背景图是通过photoshop软件的调色板调出来的，自己调出来的颜色比较相当。整个网站都以白灰为主色调穿插链接的。不使用复杂的颜色回到最初的自己

8、是我想阐述给大家的理念。图2.5圆角图片如图2.5圆角图片所示，图片是使用Photoshop修饰变成圆角图片，圆润的的图角给人的视觉感觉不那么生硬，比较包容，没有给人那种压迫感，其圆角和背景图的搭配也比较符合视觉感觉。图2.6白色边框图片如图2.6白色边框图片，这种折叠的效果是我想给观看我网站的浏览者一种像在看相框照片一样的感觉，就通过使用边框的颜色，来给浏览者一种逼真的感觉，就像图片相在框里一样，从细节关注浏览者的感觉。2.2.4 字体的相关搭配整个网站的字体由黑色为主黑由于圆角背景是白色的，所以要用黑色的字才能让整个网站更加简洁更加清晰，而且黑色的字又与大的背景图片相呼应。让浏览网页的人一

9、目了然；在大的盒子里面我选择庄重的黑色还大段的段落介绍各种花卉的寓意，以表示我对大自然给我们的惊喜表示尊重，在大段的文字介绍后，我用灰色的字体来分段介绍各花卉的具体含义，为缓解视觉疲劳，从而达到放松的作用。在浏览网站时，没有那种因为图片凌乱的烦躁感。让浏览者清晰简洁的浏览。2.3网站布局在制作网站的前期必须要有一个网站布局图，在Adobe Photoshop中设计中制作了嫣雨坊的布局如图2.7，图2.8，图2.9所示。2.3.1 一级页面的设计如图2.7所示是嫣雨坊一级页面的布局图：在首页的布局我采用了九个盒子来定位，分别为Logo一个盒子，导航条，大张图片，小盒子里包括图片和介绍文字，在设计

10、这样的布局不仅使网页内容丰富，更不让网页看着杂乱无章。在浏览网页时，所有的图片都有超链接，连贯性很好。图2.7 首页的布局图2.3.2 二级页面的设计如图2.8所示是嫣雨坊二级页面的布局图：二级页面的设计布局是通过八个盒子控制的，在网页的上方有导航条，导航条下方是对花卉具体介绍的大图片，大图片的下方是由一个个小盒子的图片超链接，图片下方是介绍鲜花的文字，在下方是具体介绍寓意和颜色代表的含义，而在网页的最下方是一个长方形盒子，包含着版权信息，因为配和首页的主色调，所以二级页面也采用了灰色渐变的纯色背景，这样看起来比较统一搭配。不会显得那么唐突。 图2.8 二级页面的布局图2.3.3 三级页面的设

11、计如图2.9所示是嫣雨坊三级页面的布局图：网站的三级页面是通过一个一个图片构造而成，这样的页面设计最主要的目的是凸显鲜花的五彩缤纷，三级页面不在仅仅是首页和二级页面单调的纯色，而是通过另一种丰富多彩的颜色来诠释着花的海洋，在花朵的海洋里可以尽情的释放激情。图2.9 三级页面的布局图2.3.4 其他页面的设计如图2.10所示是嫣雨坊其他页面的布局图：在网页其他的页面设计布局里，也使用了在网也的最上方，一个大盒子包含着导航条，在导航条的下方，图片和段落的文字介绍，不同的图片搭配不同的花语含义，这样简单大方的结构，可以时浏览网页者不那么不清晰。 图2.10 其他页面的布局图2.4框线图的设计在做网站

12、之前，通过设计与比较，最终确定网站的框线图如图2.4所示。嫣雨坊的首页包括对花卉总体的简单介绍，二级页面则是把想要介绍的花卉分为具体的，康乃馨，玫瑰，郁金香，菊花等品种的花卉作为具体的介绍，三级页面，是把各种花卉的图片，和段落的描述更为具体，具体表述到每种花卉的颜色代表的具体含义。也希望通过框线图把网站的总体一目了然。图2.11 框线图第3章网站的实现3.1 网站的制作与实现3.1.1 一级页面的实现首页的Logo是通过用绝对定位来控制图片的位置，文字与图片之间有一定距离，而logo的文字则通过标题大小控制文字的大小， a href=index.html嫣雨坊/h1spanSWEET HOUS

13、E/div导航条则是使用nav-bg1，nav-bg2两张图片来组成，当鼠标划过时，导航条的背景黑色变成橘色在导航条下方，用了一个大盒子把使用photoshop软件修改图片的大小控制在所设定的盒子里，另外在包在盒子里面的图片加了文字，使用小段的文字来介绍盒子里的图片，让文字和是图片的搭配更有美感，使用em，br等代码来控制文字的大小，和排列位置，还增加了超链接让文字能链接，让整个网页更连贯性，通过文字上的链接可以在跳转别的二级页面。在图片的下方是介绍网站的主要内容，使用了三个盒子分别把图片文字分成三栏，这样再看网址的时候能更简洁看出玫瑰，百合，郁金香，的三种花卉的分类，在各个盒子里，盒子的上部

14、分是图片可以通过图片跳转到下一个，实现更多跳转的目的，而在图片的下方这是大段的文字，文字上面的标题通过标签控制大小，段落文字则通过标签来控制。再往下看是文字地下的更多是使用2.html class=buttonRead More的标签来控制，通过此按钮则可以跳转到三级页面，在网页既美观又实用，网站在下面是版权信息，也是footer，作为网站的最底部可以使网站有一个很好的收尾作用。首页没有使用更多复杂的盒子作为设计，因为我想通过使用简洁大方的代码，清晰的线条让看到网站的每一个人有着清晰的思路，让浏览页面的时候不会有太多的压迫感从而放弃看网页的想法，只有最简单的东西才能让人的印象更为深刻。首页的展

15、示图如图3.1.所示。图3.1 首页设计图3.1.2 二级页面的实现如图3.2在网页最上方是一个蓝色的蝴蝶结，在蝴蝶结里面我使用photoshop软在对在图片里加的“嫣雨坊。”网站的名称，在蓝色蝴蝶结两面是导航条，做为二级页面的导航条我选择了灰色作为文字的颜色，在鼠标划过时，文字变为忧郁的蓝色，每个文字中间插入了小星星作为点缀，是导航条不在那么呆板，在下面使用一个图片作为超链接二阶页面主要介绍花朵的展示，通过使用浪线来将一个盒子间隔开，也起到美观的作用，在下面是四个盒子分别是介绍本页面花卉的品种图片，在图片中添加超链接，鼠标点击是可以进入下一个页面，通过点击页面可以对三级页面的浏览，在下面分为

16、两个盒子，盒子中使用段落的文字介绍花卉，其花卉的含义寓意都可以在里面查看，在下面是一个盒子，同样使用段落文字介绍花卉的来源，也添加了超链接方便欣赏到下一页。同样页面的最下方的盒子里也是版权信息。二级页面的展示图如图3.2所示。图3.2 二级页面设计图3.1.3 三级页面的实现如图3.3第一种三级页面： 则是对各种花卉的更具体得介绍，采用的技术是一个大盒子里面有十二个正方体的小盒子，让各种花卉的图片可以更具体的展示，在CSS中设置大盒子的背景图片：background-image:url（./images/tu.jpg）;使用的图通过photoshop软件调出的纯色的渐变，可以使大盒子看起来不在

17、那么单调可以增加内容，在小盒子里使用liindex1.htmlimg src=images/1.jpg width=200 height=/玫瑰花语在古希腊神话中，玫瑰集爱与美于一身，既是美神的化身，又溶进了爱神的血液。可以说，在世界范围内，玫瑰是用来表达爱情的通用语言/li等代码来控制段落和丰富网址内容，在一个又一个的小盒子的排列中组成了网站精彩丰富的内容。在网站的下边有段落的文字来更具体介绍花卉的属性，所控制的盒子代码是horSeparator，整个网页由最外面的大盒子，里面包括了七个小盒子的构图而成。三级页面的展示图如图3.3所示。图3.3 三级页面的设计图图3.4 三级页面的设计图3.

18、1.4 其他页面的实现如图3.4在第二个三级页面中，导航条使用灰色的背景图在CSS中通过background-image:url（./images/title.png）;等代码来控制灰色背景图，因为整个网站都是有灰色的背景为主色调，导航条文字是灰色，当鼠标滑动时会变成橘黄的，下面图片也同样使用photoshop软件对图片的大小进行剪裁，在文字上面听过标题h2开控制标题大小，段落文字使用 currentHomesecondindex2.htmlthirdindex3.htmlfourthindex4.htmlfifth/nav图片及其超链接如下图： 图3.6 图片超链接图片超链接代码：按钮及其超

19、链接如下图：图3.7 图片超链接按钮超链接代码如下：index-5.htmlp class=more paddingTopMore图片文字及其超链接如下图：图3.8 图片超链接date粉色玫瑰3.3编写代码3.3.1 外部CSS“嫣雨坊”网站是通过代码link rel=stylesheet href=css/style.css type=text/css media=all链接外部样式表，来对网站内部的html代码进行编辑定位等应用操作。3.3.2 导航条代码的引用在一个网站浏览中，首先看的就是整个网站的导航条，在首页的导航条中，我使用了nav标签来控制导航条的盒子，其展示的代码如下：图3.7 效果图3.3.3 其他代码的编写（1）正文字体大小及颜色在浏览者浏览网站时，14px、#000的字是最适合浏览者阅读的字体和颜色，14px也是在网站浏览上和阅读文字段落上最为合适视力的，字体大小及颜色设置的代码如下所示： Margin-bottom:16px; color:#000;（2）列表样式的设置“嫣雨坊网”的站多处使用了列表，为了让列表的样式更加美观，对列表进行了去点儿的代码设置，列表样式设置的代码如下所示： List-style-type:none;（3）首行缩进设置在看一篇文章的时候