web网页设计毕业论文

1、web网页设计毕业论文 # i傅学多能傷律筠的九侈疑发乂孝毕业论文（设计）导师：院系:专业:学号：姓名：题目:Web标准化网页设计教务处制九江职业大学毕业设计（论文）九江职业大学毕业设计（论文） # 目录TOC o 1-5 h z摘要1 HYPERLINK l bookmark4 o Current Document 第一章概述2HTML21.2HTML语言的产生21.3层叠样式表3 HYPERLINK l bookmark6 o Current Document 项目介绍4 HYPERLINK l bookmark8 o Current Document 页面设计规划4 HYPERLINK

2、l bookmark10 o Current Document 第二章网站制作前期准备5 HYPERLINK l bookmark12 o Current Document 2.1软件的准备52.2软件的应用62.3Fireworks的应用8Dreamweaver的应用9 HYPERLINK l bookmark16 o Current Document 第三章CSS样式建站11 HYPERLINK l bookmark18 o Current Document CSS排版与普通排版的区别11DIV+CSS样式页面布局12CSS样式表13CSS色彩及颜色基础知识15 HYPERLINK l b

3、ookmark38 o Current Document 3.5两种方法设置对象颜色样式16 HYPERLINK l bookmark50 o Current Document 文字颜色控制一样16 HYPERLINK l bookmark52 o Current Document RGB颜色给出了四种方法之一17CSS盒子模型17第四章网站后期特效19 HYPERLINK l bookmark60 o Current Document 网站特效19 HYPERLINK l bookmark62 o Current Document 本网站的特效19 HYPERLINK l bookmark6

4、4 o Current Document 五.结论与总结21 HYPERLINK l bookmark66 o Current Document 参考文献22致谢23九江职业大学毕业设计（论文）九江职业大学毕业设计（论文）第 页共24页第 页共24页摘要随着信息技术的发展，信息技术使用传递速度突破了时间和地域性的局限，网络化与全球化成为一种不可避免的世界趋势。然而网页制作并不是一个简单的过程，期间要运用好多技术，包括图像设计和处理、网页动画的制作和网页版面的网页布局编辑等。随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。目前使用最多的是较为常用的Dreamweaver、Fl

5、ash、Fireworks这三个软件，也就是人们俗称的建站“三剑客”，其中Dreamweaver是网页制作的核心。相对于一个网站页面的标准化，美观化是更为重要的，css是最主要的表现标准化的语言。在本论文将通过对网友需求的了解和对其他网站的参考，在网页设计与制作中着重使用CSS+DIV样式布局来标准化美观化网页，最终成功完成一个CSS样式网站。用一段话来概括网站标准化的作用就是；确保任何网站文档都能够长期有效简化代码、降低建设成本；让网站更容易使用，能适应更多不同用户和更多网路设备的需求；确保所有应用都能够持续准确的执行；【关键词】：Dreamweaver、CSS、DIV、网页设计标准化、Ht

6、ml。第一章概述HTML从1993到如今的发展，同时针对其以后的发展进行评测。HTML语言作为网络语言的标准，在计算机的发展史中有着不可或缺的地位。所以在HTML上的成就也决定着一个时代的发展。1.2HTML语言的产生HTML的全称是HypertextMarkupLanguage（超文本标记语言）HTML是用于描述网页文档的标记语言。现在我们常常习惯于用数字来描述HTML的版本例如：HTML5，但是最初的时候我们并没有HTML1，而是1993年IETF团队的一个草案，并不是成型的标准。两年之后，在1995年HTML有了第二版，当时是作为RFC1866发布的。有了以上的两个历史版本，HTML的发

7、展可谓突飞猛进。1996年HTML3.2成为W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。而在2000年基于HTML4.01的ISO,HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。从1993-2000之间短的7年时间，HTML语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。层叠样式表从1990年代初HTML被发明开始样式表就以各种形式出现或不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读

8、者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师们的要求，HTML获得了很多显示功能。随着这些功能的增加定义样式的语言越来越没有意义了。1994年哈坤利提出了CSS的最初建议。伯特波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，

9、混合个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。1997年初，W3C内部组织了专门管CSS的工作小组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的一些问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。1996年W3C正式推出了CSS1.1998年W3C正式推出

10、了CSS2.CSS2.1是W3C现在正在推荐使用的.CSS3现在还处于开发中.1.4项目介绍本网站是一个可以在线交流、提供顾客服务，以及在线下载的渠道；对开发设计人员而言，本类网站就是使一些功能模块，通过网页的形式将前台和后台结合起来。每一个完整的网站，都要划分为四个组成部分：结构、内容、服务、功能。网站是为了展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。本论文着重介绍网站前台页面总设计，总体页面设计以满足网友需求为主要目的，以页面运行速度为首要考虑因素，尽量避免过多的运用图片，使页面大方美观展现企业形象。1.5页面设计规划根据网友的需求。初步规划网站为一种风格和色系，其着重体现简

11、约的风格，整体页面选用蓝色，但其又不会显单调，因为主要为网站增加了三种特效，分别是网站背景改变特效（7中背景颜色随意改）鼠标特效（鼠标气泡特效）页面特效（窗口飘洒的雪花），分为LOGO与片头页面栏、导航栏、公告栏、合作伙伴栏、和资源下载等模块，以及下级子界面。第二章网站制作前期准备2.1软件的准备在网页的设计过程中，因人而宜，每个人使用的软件也许不同，比如较有名的网站设计软件有Macromedia公司出品的网页设计“三剑客”、有微软的Frontpage、还有国产的“东方网页王”等等。在这里，我们主要要说的是Macromedia公司出品的“三剑客”。这“三剑客包括Dreamweaver，Fire

12、works和Flash，其中，Dreamweaver是网页编辑软件，Fireworks是图形/图像处理软件，Flash是矢量动画编辑软件。当然，到今天为止，Macromedia公司出品的这个“三剑客”都已经是2004版，估计最新版也应该很快出Macromedia公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。Dreamweaver采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能中的

13、技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweaver自动完成。另外，还有一点值得说明的是，Dreamweaver可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。Fireworks的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。九江职业大学毕业设计（论文）九江职业大学毕业设计（论文）第 页共24页第 页共24页Fireworks的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节

14、约时间又可以对产品进行扩展。另外，Fireworks中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。Flash是比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。Flash提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。由于Flash采用矢量图形格式来制作动画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。在我设计我的网站的过程中我选择了Dreamwear和Fireworks和Photoshop三种软件。因为自己相

15、对于其它的软件来说，这三个还算是比较熟悉的。2.2软件的应用在本网站中我主要应用ps制作了网站的效果图，下面我们来看下PS的界面，认识了解PS：（标题栏：标题栏左边显示photoshop的标志和软件名称。右边三个图标分别是最小化、最大化和关闭按钮。图2-1菜单栏：photoshop菜单栏包括文件、编辑、图像等9个菜单工具属性栏：主要用来显示工具箱中所选用工具的一些延展的选项。选择不同的工具时出现的相应选项也是不同的，具体内容在工具箱介绍中详细讲解。工具箱：对图像的修饰以及绘图等工具，都从工具箱中调用。几乎每种工具都有相应键盘快捷键，工具箱很想画家的画箱。调板窗：用来存放不常用的调板。调板在其中

16、只显示名称，点击后才出现整个调板，这样可以有效利用空间。防止调板过多挤占了图像的空间。浮动调板：用来安放制作需要的各种常用调板，也可以称为浮动面板。这就是PS的工作界面，下面我将用PS制作网站的PSD效果图，在图中我一共建了七个分组（底部组，合作伙伴组，产品分类组，最新动态组，产品公告组，top组，会员中心组）组下又分好多图层，及其单独的背景图层。效果图如下：图2-2九江职业大学毕业设计（论文）Q2*-：*出耳:帀九江职业大学毕业设计（论文）Q2*-：*出耳:帀第 页共24页第 #页共24页*0上聞MilMi；E；HiriM-iirfW-k.n-M-.*-.口.-rEzL肚#J.亠4応图2-3

17、Fireworks的应用网站中主要运用Fireworks进行了网站所需素材的切片，下面我们也来认识下本软件的工作界面：口A口Se&口OfBB11图24九江职业大学毕业设计（论文）九江职业大学毕业设计（论文）第 页共24页第 页共24页图2-5Dreamweaver的应用Dreamweaver版本具有强大的站点管理功能，内置FTP软件可以直接上传主页；所见即所得的页面编辑方式；支持StylesSheet样式表单，创造丰富的页面效果；支持Layer层，并可使用Timeline时间轴制作动态网页；内置Behavior行为，为网页增加交互功能；提供模板和库可以加速页面的生成和制作；支持外部插件，提供无

18、限的扩展能力。如图:E鼻谒W(:1-pitp/k1flm-OqftHVTP：-Sf-4-Ui=uIT甲4，grII卜上亠Q血Jfe；图2-6图2-7可以看出其具备以下特点：（1、灵活的编写方式2、可视化编辑界面3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性8、丰富的媒体支持能力9、超强的扩展能力第三章CSS样式建站3.1CSS排版与普通排版的区别!-?photoListimgheight:80;width:100;margin:5p)cauto;divid=photoLis不用C

19、S5排版图3-1第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件,九江职业大学毕业设计（论文）九江职业大学毕业设计（论文）这样动画文件就不大了，把这种想法移到css网页设计中，就是代码不复杂，网页文件体积小能

20、较快被客户端下载了。DIV+CSS样式页面布局DIV+CSS是Web标准中一种新的做网站的布局方式，是一种新的排版理念，完全有别于传统的表格布局排版习惯。DIV+CSS样式具有比表格更大的优势，它能够实现页面内容和外观样式的分离，可以对相的DIV标记中的ID进行控制，使浏览者更快地浏览网页。采用DIV+CSS样式进行页面布局时，首先应将页面在整体上进行div标记分块，然后各个块进行CSS定位，最后再向各个块中添加相应的内容。页面布局的样式是多变的，他可以根据网站的信息划分和排列进行布局划分。采用DIV+CSS样式布局网站时，比较常用的是二分栏和三分栏。下面列出分栏布局页面设计需要注意的几点以供

21、参考：（1）页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；页面居中，考虑页面是否要居中显示。（2）整体布局的DIV嵌套关系。除首页外，其他网页中可能用到的可重复元素有Header、Footer和SideBar，经常变换的只有MainBody里的内容，而且页面宽度是固定的，因此要在所有的元素外面做一个外框。而本网站运用了1-2-1布局方式，方式如图：#navigation#search#left九江职业大学毕业设计(论文)九江职业大学毕业设计（论文）第 页共24页第 页共24页#lef本网站示例代码：.zhongwidth:1024px;margin:0auto;tophe

22、ight:73px;background:url(images/bg_1.gif)repeat-x;padding:024px;.top_leftfloat:left;margin-top:14px;.top_nonefloat:none;margin-top:30px;margin-left:50px;margin-right:50px;.top_rightfloat:right;margin-top:14px;margin-right:20px;CSS样式表链入外部样式表链入外部样式表是把样式表保存为一样式表文件，然后在页面中用标记链接到这个样式表文件，这个标记必须放到页面的head区内，

23、如下:&hellip.上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=stylesheet是指在页面中使用这个外部的样式表type二text/css是指文件的类型是样式表文本。href二mystyle.css是文件所在的位置media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件的时候，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。样式表文件可以用任何文本编辑器(例如

24、：记事本)打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：hrcolor:siennapmargin-left:20pxbodybackground-image:url(images/back40.gif)/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/2.内部样式表内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看tB标记的用法：hrcolor:siennapmargin-left:20p

25、xbodybackground-image:url(images/back40.gif)注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：CSS色彩及颜色基础知识这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色2、颜色规范与颜色规定：网页使用RGB模式颜色网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感（特别是超链接中运用）

26、、美观之用，同时颜色也是各种各样网页的样式表现元素之一，了解CSS字体颜色。传统的html颜色与w3c标准下的css颜色对比和DIVCSS运用颜色CSScolor颜色语法：color:#000000;Css样式中color后直接加RGB颜色值（#FFFFFF、#000000、#F00）RGB颜色值在实际布局时候确定，可以使用Photoshop（简称PS）拾取工具进行获取获得。九江职业大学毕业设计（论文）九江职业大学毕业设计（论文）第 页共24页第 页共24页3.5两种方法设置对象颜色样式1、在DIV标签内使用color颜色样式2、在CSS选择器中使用color颜色样式CSS代码：.divcss

27、5color:#00F/*设置对象divcss5内文字为蓝色*/扩展阅读：这里运用了CSS注释对此样式设置说明，了解CSS注释： HYPERLINK /rumen/r32.shtml /rumen/r32.shtml3、DIV+CSS颜色样式完整案例：Css代码：.divcss5color:#00F/*设置对象divcss5内文字为蓝色*/HTML代码：标签内使用colorcss样式 HYPERLINK 红色v/p外部样式表设置对象color颜色 HYPERLINK 蓝色3.6文字颜色控制一样传统html和css文字颜色相同使用“color：”+“RGB颜色取值”即可，如颜色为黑色字即对应设置

28、CSS属性选择器内添加“color:#000;”即可。传统设置背景颜色使用“bgcolor二颜色取值”，而CSS中用background:+颜色取值。例如：设置背景为黑色，传统Html设置，即在标签内加bgcolor二#000即可实现颜色为黑色背景，如果在W3C中即在对应CSS始终选择器中始终加入background:#。实现。传统“bordercolor二取值”，CSS中“border-color:+颜色取值。例如：在传统html直接在table标签加入“bordercolor二#000即可，在现在CSS中设置“border-color:#000;即可让边框颜色为黑色，同时记得设置中包括宽度

29、和样式（虚线、实现）DIV+CSS颜色值扩展知识：颜色值是一个关键字或一个数字的RGB规范。RGB颜色给出了四种方法之一1、#rrggbb（如，#00cc00）（强烈推荐使用此表示颜色取值）2、#的RGB（如，井0c0）3、RGB（十中，x,x）的x是一个包容性的0和255之间的整数（如的RGB（0,204,0）4、RGB（Y%,Y%,Y%），其中y是一个包容性的数量介于0.0和100.0（女口的RGB（0%，80%，0%）本网站色彩示例代码：bodycolor:#687f96;font-size:12px;background-image:url（）;CSS盒子模型在网页设计中常听的属性名：

30、内容（content）、填充（padding）、边框（border）、边界（margin），CSS盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏九江职业大学毕业设计（论文）九江职业大学毕业设计(论文)第 页共24页第 页共24页而添加的泡沫或者其它抗震的辅料；边框就是盒子本身；边界则说明盒子摆放的时候的注意事项：不能全部堆在一起，要留一定空隙保持通风，同时为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）

31、，与现实生活中盒子不同的是，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图：MARGIN边界ROX图3-1盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅

32、料度。4.1网站特效网页特效是用程序代码在网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特殊效果。它为网页活跃了网页的气氛，有时候会起到一定的亲切力。而JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中连接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。也含有以下特点：1、是一种脚本编写语言.2、基于对象的语言。3、简单性4、安全性5、动态性的6、跨平台性4.2本网站的特效本网站后期运用了三个特效效果，分别是：背景特效，鼠标特效，窗口特效下面我们来看下特效前与特效后的效果：图4-1特效后:TWO图4-2到此本网站制作完成，还是向前面说的那样，本网站规划为一种风格和色系，其着重体现简约的风格，整体页面选用蓝色，但其又不会显单调，不敢说高端大气上档次，但内涵还是有的。九江职业大学毕业设计（论文）九江职业大学毕业设计（论文）第 #页共24页第 页共2