网页设计毕业论文-2014

1、大连东软信息学院毕业设计（论文）毕业设计（论文）系系 所：所： 专专 业：业： 学生姓名：学生姓名： 学生学号：学生学号： 指导教师：指导教师： 导师职称：导师职称： 蜂鸟摄影网的设计与制作蜂鸟摄影网的设计与制作完成日期：完成日期： 大连东软信息学院Dalian Neusoft University of Information大连东软信息学院毕业设计（论文） 摘要I蜂鸟摄影网的设计与制作摘 要随着现代化互联网的普及与发展，电子商务已经越来越深入人们的生活。而在近些年，威客类网站越来越受到人们的关注，基于 HTML 技术和 CSS 技术，开发出为人们提供摄影服务的威客型网站。在本网站中，用户可

2、以方便快捷的查询本地城市的摄影服务机构，最近的摄影活动以及查看本地的风景图片，查看电子书信息的详细资料，然后根据各人的不同需求选择不同的电子书信息。通过对网页技术的研究，对 HTML 技术的调研，以及对 CSS+DIV，Photoshop 的了解，综合这几项技术，从而产生了整体的网页结构。在主页运用 CSS 技术，可以有效的对网页的布局，字体，颜色，背景等做一些方便的改变，只要对相应的代码做一些简单的修改和操作，就可以改变整个工程中的不同部分，或者页数不同的网页的外观和格式。并具有良好的可扩展性和可移植性信息平台。关键词：关键词：电子书，网络，HTML，CSS大连东软信息学院毕业设计（论文）

3、AbstractIIDesign and Fabrication of a Hummingbird Photography NetAbstractAlong with the popularization and development of the modernization of the Internet, electronic commerce has been more and more important in peoples life. In recent years, Witkey websites, more and more peoples attention, HTML t

4、echnology and CSS technology based on the development of Witkey website, offering the service for the people. In this website, photography services users can easily query the local city, photographic activities recently and view the local landscape pictures, view detailed information on electronic i

5、nformation, and then choose a different book information according to the different needs of.Through the research on webpage technology, research on HTML technology, as well as the CSS+DIV, Photoshop know, this integrated several technology, resulting in the webpage of the whole structure. In the pa

6、ge using CSS technology, can effectively on the webpage layout, font, color, background, do some convenient change, as long as the corresponding code to do some simple modification and operation, can change the whole project in the different parts of, or pages of different webpage appearance and for

7、mat. And has good scalability and portability of the information platform.Key Words:E-book, network, HTML, CSS大连东软信息学院毕业设计（论文） 目录I目 录摘 要.IABSTRACT.II第 1 章绪 论 .11.1 课题研究主要内容 .11.2 课题研究的背景.11.3 课题的研究意义 .1第 2 章相关技术与工具介绍 .22.1 网站开发工具.22.2 CSS 技术介绍.3第 3 章网站总体规划与设计 .43.1 网站主题与内容设计.43.2 网页色调选择.43.3 网站功能结构图

8、.5第 4 章网站的制作与实施 .64.1 素材的准备与制作.64.1.1 网站首页的框图.64.1.2 二级网页的框图.74.1.3 三级网页的框图.74.2 LOGO的设计与实现 .84.3 导航条的实现 .94.4 左侧边栏的实现.104.5 主体的实现.114.6 编写代码.124.6.1 CSS 链接.12大连东软信息学院毕业设计（论文） 目录II4.6.2 CSS 整站控制代码.124.6.3 使用的字体.134.6.4 首行缩进.134.6.5 高效实用的标签.13第 5 章系统测试.145.1 网站测试需求.145.2 网站测试目的.145.3 网站性能测试.145.4 测试结

9、果.14第 6 章总结.16参考文献.17致 谢.18大连东软信息学院毕业设计（论文） 目录1第 1 章绪 论1.11.1 课题研究主要内容课题研究主要内容在大连蜂鸟摄影网站这一类威客型网站中，最重要的是大众的使用体验，在网站首页一目了然的为大众展示可为大众提供服务的当地相关商家机构，相关活动和当地的风景。从版面设计来看,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 1.21.2 课题研究的背景课题研究的背景威客网站作为一种新型的互联网应用，对于个人和社会都有着积极的意义。但是，目前威客网站在我国发展的还不成熟。随着威客概念的普及，以及威客网站

10、模式的逐步成熟，威客网站的发展空间将最终被打开。威客类网站自年开始发展以来，受到人们广泛关注，但近十年来，威客网站遇到越来越多的瓶颈，这里有着各种各样的原因，例如：信用系统，支付系统，交易模式等等，此网站基于目前威客行业的瓶颈问题，提出新的解决方式。1.31.3 课题的研究意义课题的研究意义本课题的研究基于近年来威客类型网站的日益壮大，大量的威客型网站的建立说明了在电商的世界里，威客型网站所占比重会越来越大，我相信在不久的将来，威客型网站会突破种种瓶颈问题，获得大众的认可，得到更多的市场空间，会为大众的生活带来翻天覆地的改变。本课题的研究方向是为大众提供摄影服务的一种威客型网站，在本课题中，首

11、次提出线上线下相结合的方式，大胆尝试新型的运营模式。首先在网站中体现的不仅仅是服务项目，也为大众提供与摄影相关的一些经验交流。旨在为大众提供一个在摄影行业具有综合影响力的新型网站。大连东软信息学院毕业设计（论文）2第 2 章相关技术与工具介绍2.12.1 网站开发工具网站开发工具蜂鸟摄影网的开发工具用到了 Adobe Dreamweaver 和 Adobe Photoshop，下面详细介绍一下这两款软件：Adobe Dreamweaver，简称“DW”，是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发

12、工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Adobe Dreamweaver 使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。它有 Mac 和 Windows 系统的版本。随 Macromedia 被 Adobe 收购后，Adobe 也开始计划开发 Linux 版本的Dreamweaver 了。 Dreamweaver 自 MX 版本开始，使用了 Opera 的排版引擎Presto 作为网页预览。Adobe Photoshop，简称“PS”，是 Adobe 公司旗下最为出名的图像处理软件之一。从功能上看，Photoshop 可分

13、为图像编辑、图像合成、校色调色及特效制作部分。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。Photoshop 提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是 Photoshop 中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜

14、色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 特效制作在 Photoshop 中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由Photoshop 特效完成。而各种特效字的制作更是很多美术设计师热衷于 Photoshop 的研究的原因。大连东软信息学院毕业设计（论文）32.2.2 2 CSSCSS 技术介绍技术介绍CSS 和 HTML 一样，是一个非常基础性的规范，是任何一个 Web 站点设计过程中都离不开的“基础技术” ，因此无论是作为设计师，还是开发人员，都离不开这项武器。CSS 的思想就是首

15、先指定对什么“对象”进行设置，然后指定该对对象的那个方面的属性进行设置，最后给出该设置的“值” 。因此，概括的说.CSS 就是由“对象” 、“属性”和“值”三部分组成。CSS 按其位置可以分成三种：(1)内嵌样式(Inline Style) (2)内部样式表 (Internal Style Sheet) (3)外部样式表(Externa Style Sheet)大连东软信息学院毕业设计（论文）4第 3 章网站总体规划与设计3.13.1 网站主题与内容设计网站主题与内容设计本课题采用的技术是 DIV+CSS，DIV+CSS 具备以下优点对各接口业务的进程，通过统一的命令形式进行控制。(1)DIV

16、+CSS 有利于搜索引擎爬虫：一般而言相同网页页面 html 文件 table 布局字节大于 DIV+CSS 布局的字节，所以可以节约搜索引擎爬虫爬行下载页面内容时间。 (2)重构页面修改方便（DIV+CSS 改版方便）：一般 DIV+CSS 页面都是 html 和CSS 文件分开的也就是说一个网页的内容与表现形式的分离，一般修改小小部分的CSS 文件里 CSS 样式属性就可以修改真站的样式版面，如背景颜色、字体颜色、网站宽度等具有 table 不具备的方便性。 (3)DIV+CSS 页面增加网页打开速度：这里是特性决定了他们的性能，因为DIV+CSS 页面是 DIV 的 html 和 CSS

17、 文件分开的，而浏览器打开该网页的时候是同时下载 html 和 CSS，所以可以提高网页打开速度，而 table 还有个特性就是浏览器打开的时候必须是浏览器下载以开始，并结束后才显示该块的内容，而 DIV的 html 是边加载边将内容呈现到浏览器上，DIV+CSS 网站大大增强用户体验作用。大家都知道网页多等 1 秒钟都会降低浏览者等待时间。3.2 网页色调选择网页色调选择网站主色调为灰色，如图 3.1 为网站所用色卡。图 3.1 网站背景所用色卡大连东软信息学院毕业设计（论文）5从页面所展示出来的色调来看,整个页面的色调都以浅灰色为主,其调子是比较的柔美，且十分的高雅。其主色调以及其背景的颜

18、色是比较的近似于明度中的白色，且又非常浅的灰调，而其辅色调又为灰调子，其在明度上比其主色调要稍微的深些。灰色属于是一种中性色，它介于黑色与白色之间，可以让人感觉到中庸、平凡、温和、谦让、中立，以及高雅，因此它也被人称作高级灰，是一种可以经久不衰、同时也十分的耐看的颜色。不管是哪一种色彩，只有在其中加入灰色，此色彩都能显得十分的含蓄且柔和。然而灰色在给我们以高品味、含蓄、精致，以及耐人寻味的同时，同样也会给人以颓废、苍凉、消极、沮丧、沉闷的感觉，如果我们在设计的时候搭配不当，就容易使页面显得比较的灰暗。3.3 网站功能结构图网站功能结构图网站功能结构图，如图 3.2 所示 图 3.2 网站功能结

19、构图大连东软信息学院毕业设计（论文）6第 4 章网站的制作与实施4.1 素材的准备与制作素材的准备与制作在页面布局当中，要充分考虑页面的排版，色彩搭配，以及需要的特点等。在整个站点中重复实现某些页面设计风格。重复的成分可能是某种字体、标题 logo、导航菜单、页面的空白边设置、贯穿页面的特定厚度的线条等。首先设计出网站首页的框图，二级页面框图，三级页面框图，之后设计代码，实现框图内容，合理运用符合整体网站风格的色彩。4.1.1 网站首页的框图网站首页的框图首页框图包含了网站 Logo，Banner 设计，导航条，用户登录区域，图片展示，本地会员摄影服务机构，本地会员摄影师，本地会员摄影外拍活动

20、等，总体背景颜色以灰色为主。如图 4.1 为网站首页框图。 如图 4.1 为网站首页框图大连东软信息学院毕业设计（论文）74.1.2 二级网页的框图二级网页的框图二级页面的设计在大体上与首页统一，包括网站的 Logo，色彩的运用等，这种设计风格是为了避免二级页面和首页的风格分离，使得整个网站看起来不协调。但是为了吸引浏览者的观赏兴趣，又不能完全与首页的设计风格一致。如图 4.2 为二级网页的设局图。 图 4.2 二级网页设计图4.1.34.1.3 三级网页的框图三级网页的框图三级网页也是最简洁的网页之一，除了网页头部和一级、二级页面之外，大部分的风格并没有改变，只是将中部的盒子变大，对本会员的

21、图片进行了展示。如图 4.3 为三级页面设计图。大连东软信息学院毕业设计（论文）8 图 4.3 三级页面设计图4.2 Logo 的设计与实现的设计与实现Logo 的设计很简单，主要通过 Photoshop 软件进行画面大小设计，背景颜色设计，字体设计等。Logo 的背景为白色，所以此处为网站实际截图，如图 4.4 所示。 图 4.4 为 Logo 设计图大连东软信息学院毕业设计（论文）94.3 导航条的实现导航条的实现导航条所用到的技术就是无序列表，通过 CSS 技术对其颜色等属性进行更改即可展现出效果。如图 4.5 为网页导航条部分展示。图 4.5 导航条展示其中导航条的部分 CSS 代码为

22、：其中第一部分，在#box1 中设置了平铺的背景图像，第二部分#box1 ul 设置了的列表的样式与定位；第三部分#box1 li 对列表的盒子、边框和浮动进行了设置；第四部分为#box1 a 文字；第五部分设置了鼠标放在上面的效果显示。大连东软信息学院毕业设计（论文）104.4 左侧边栏的实现左侧边栏的实现接下来实现左边栏的样式设计，要点是一组圆角框的实现方法。首先在 Fireworks软件中制作一个圆角框。如图 4.6 所示图 4.6 左侧边栏的实现其主要代码为：上面的代码就是网站左边栏的 HTML 代码。大连东软信息学院毕业设计（论文）114.5 主体的实现主体的实现该网页主题主要是对盒

23、子进行设置，主体部分涉及整体布局设计以及一些文字元素的设置。如图 4.7 所示为网页主体示意图。 图 4.7 网页主体其主要代码如图 4.8 所示：图 4.8 网站主题所用代码大连东软信息学院毕业设计（论文）12CSS 中的 center 代码实现了活动图片和活动内容，采用了两个盒子模型，左侧显示图片，右侧显示活动内容，并设置了 padding 值，可以使得模型变得整齐，好看。4.6 编写代码编写代码4.6.14.6.1 CSSCSS 链接链接在大连蜂鸟摄影网站的实现中，均采用单独的外部 CSS 文件对整个网站进行整体控制，可以有效减少代码容量，方便的对整站进行演示控制外部 CSS 的链接代码

24、如图 4.9 所示。图 4.9 外部 CSS 链接代码4.6.24.6.2 CSSCSS 整站控制代码整站控制代码我们在外部 CSS 中编写代码对整站进行控制。CSS 代码如图 4.10 所示。图 4.10 所示为网站 banner，center，footer 的 CSS 代码大连东软信息学院毕业设计（论文）134.6.34.6.3 使用的字体使用的字体在浏览者对页面进行浏览的时候，12px 的文字是最适合人们进行阅读的文字大小，也是网站中看上去最漂亮的字体大小，如图 4.11 所示图 4.11 正文字体的大小4.6.44.6.4 首行缩进首行缩进对于我们中国人来说，自古以来的习惯就是在每一段

25、的开头错进两个字，在 CSS代码中也可以同样的控制语句，在 CSS 代码中的控制语句，如图 4.12 所示。图 4.12 首行缩进 2 字4.6.54.6.5 高效实用的标签高效实用的标签在自己制作整个网站的过程中，总结了很多经验，更多的是利用标签来进行控制，大量减少了新命名的标签，例如：在首页的导航条，活动列表中用到的标签，在首页的右侧本站会员 TOP 列表中均采用了 ul。在各个小盒子的文字中也得到充分应用，可以控制字体的大小，在 CSS 中可以单独设置 h3 部分的文字属性等。以上都是在网页制作的过程中会经常用到的代码。大连东软信息学院毕业设计（论文）14第 5 章系统测试5.1 网站测

26、试需求网站测试需求 并不是意味着网页做完后就大功告成，往往在这时候会出现问题。所以就要在这个时刻对网页进行测试。测试需要本地计算机在 Win7 的系统下进行测试操作。测试环境：Intel（R） Core(TM)2 Duo CPU T94002.0GHz 安装内存：2.00G测试系统：microsoft Windows 7测试浏览器： IE8.0 Firefox5.2 网站测试目的网站测试目的 测试目的无外乎考虑两种情况。一是在浏览者的角度去看待这个网页，身为浏览者，总是不希望在打开浏览器后发现该网页的 logo 位置跑动，盒子出现重叠现象。也没人希望看到一个网站打开之后什么也不见了，往页面下面

27、一拖都缩成一团；对于电子书网站的制作人来说，一定希望这个网站可以以一个十分美好的形象呈现在大家的面前的。无论从哪个方向考虑，测试的目的就在于吧一个好的网站展现在大家的面前，没有任何遗漏的失误存在。如果在测试阶段发现问题，要及时的去修改更新。5.3 网站性能测试网站性能测试通过运用 IE 浏览器来进行网站的测试，不同的浏览器会使网页呈现的效果是不一样的。蜂鸟摄影网使用的是 IE 浏览器和 Firefox 两大浏览器共同来调试这个网站。首先是在 IE 浏览器中测试该网站，打开网页后首先看是否有篡位，图像位置更改等现象，之后用鼠标划过导航条，看是否有颜色更改的效果。随即点入二级页面，看是否能正常连接

28、到二级网页，如果正常，再一次顺查上述的问题。当网页顺利三级页面之后首先确定的是三级页面中的图片有没有发生偏移或者走出网页的显现，随后应该再次检查导航条的运作是否正常，最后通过点击导航条来进入每一个二级页面，查看二级页面的超链接是否会因为鼠标触碰的情况下是否发生变化。还得注意当进入各个页面时字体大小，字体颜色以及字体的行高有没有发生变化。在 Firefox 中也需要这样的测试，测试过程和 IE 中的过程相同。5.4 测试结果测试结果经过了重重测试，可以说网站是做完了，在测试中未发现有任何错位的情况发生，大连东软信息学院毕业设计（论文）15也没有字体等问题的发生，蜂鸟摄影网在 WINDOWS XP

29、 系统中，WINDOWS VISTA系统中，以及 WINSOWS 7 的系统下，在 IE8.0 与 Firefox 浏览器中均显示正常，测试成功。大连东软信息学院毕业设计（论文）16第 6 章总结本文主要研究的蜂鸟摄影网站的设计与实现。本次论文主要研究的内容主要包括：（1）对此次毕业设计进行了详尽的需求分析。（2）概要的设计了网站的功能模块，分析了本网站的设计特点。（3）详细的介绍了该平台要实现的功能，构建了电子书网站。通过本次网站的制作，在期间发现了不少问题。例如，网站 logo 的制作。需要重新熟悉 Photoshop 软件的应用；本网站没有用到 Flash 动画的设计，只是做到了前台的操

30、作，影响了网页整体的美感；在对网站结构划分过程中出现了大量的更改最初计划，浪费了不少时间。但在制作网站期间，同时也收获了不少。巩固了 Dreamweaver 软件、Photoshop 软件、CSS+DIV、HTML 等各项技术。增强了自己动手的能力，培养了创新能力和审美观念。规划一个网站的整体结构并没有想象的那么轻松。首先要考虑到网站整体分为几个部分，为了是网站布局合理，特意参考了网上热门的几大网站。经过深思熟虑后才确定了网站的基本轮廓。网站的布局确定下来后，再设计网页的基本框架和颜色搭配。最初的想法是颜色鲜明对比，对浏览者有一定的视觉冲击，但后来经过考虑，把原来的方案改成了风格统一，颜色不超

31、过 5 种。因为颜色过多，会因为自己技术不过关对浏览者造成视觉疲劳、眼花缭乱。虽然制作这个网站运用了大量的时间，也遇到了很多的问题，不过通过这次毕业设计的制作，让我收获到了很多。不仅熟悉了各项技术，还锻炼了我的耐心。我不会忘记自己艰苦奋斗的这段时间。虽然疲惫，但也总算没有白费。看到自己的成果也得到了些许的欣慰。大连东软信息学院毕业设计（论文）17参考文献1 袁磊, 陈伟卫.网页设计与制作教程M，北京：清华大学出版社，2008.10. （参考了第 9 页到第 40 页，第 167 到 254 页）2 曾顺.精通 CSS+DIV 网页样式与布局M.北京: 人民邮政出版社,2007.（参考了第 80

32、 页到第 123 页） 3 李烨. 别具光芒 CSS+DIV 网页布局与美化M.北京:机械工业出版社,2005.（参考了第 23 页到第 56 页）4 希亚,霍尔茨施莱格,陈黎夫CSS 禅意花园 The zen of CSS designM北京：人民邮电出版社，2002.3.（参考了第 5 页到第 26 页，第 60 到 129 页）5 迈耶（美）.CSS 权威指南M.北京：中国电力出版社.2008.（参考了第 46 页到第 52 页）6 Elizabeth Castro （美）. HTML, XHTML, and CSS, Sixth Edition . Peachpit Press . 2

33、007.（参考了第 34 页到第 69 页）7 前沿科技曾顺编著.精通 JavaScript + jQueryM北京:人民邮电出版社,2008.9.（参考了第 15 页到第 98 页）8 谭振林.超越 CSS：Web 设计艺术的精髓.北京：人民教育出版社,2008.1.（参考了第 78 页到第 105 页）9 胡崧.flash 中文版标准教程 CS4M.北京：中国青年出版社，2010.2.（参考了第 28 页）10 李超编译.CSS 网站布局实录M.北京：北京科学出版社,2007.10（参考了第 35 页到第 78 页） 。大连东软信息学院毕业设计（论文）18致 谢在整个毕业设计的各个阶段我都得到了陈伟卫老师、崔艳清老师的悉心指导和耐心帮助。导师具有渊博的专业知识、严谨的治学态度，精益求精的工作作风。很庆幸这三年来我遇到了如此多的良师益友，无论在学习上、生活上，还是工作上，都给予了我无私的帮助和热心的照顾，让我在一个充满温馨的高尚师德，严于律己、宽以待人的崇高风范中成长，朴实无华、平易近人的人格魅力对本人影响深远。不仅使本人树立了远大的学习目标、掌握了基本的研究方法，还使本人明白了许多为人处事的道理。本次论文从选题到完成