《web网页设计毕业论文.docx》由会员分享，可在线阅读，更多相关《web网页设计毕业论文.docx（30页珍藏版）》请在三一办公上搜索。
1、信孕多德成德免&簿九伊麻孕人拿毕业论文（设计）导师： 院系: 专业: 学号： 姓名：题目:Web标准化网页设计教务处制目录摘要1第一章概述21.1 HTML21.2 HTML语言的产生21.3层叠样式表31.4项目介绍41.5页面设计规划4第二章网站制作前期准备52.1软件的准备52.2软件的应用62.3 Fireworks 的应用82.4 Dreamweaver 的应用9第三章CSS样式建站113.1 CSS排版与普通排版的区别113.2 DIV+CSS样式页面布局123.3 CSS样式表133.4 CSS色彩及颜色基础知识153.5两种方法设置对象颜色样式163.6文字颜色控制一样163.
2、7 RGB颜色给出了四种方法之一173.8 CSS盒子模型17第四章网站后期特效194.1 网站特效194.2本网站的特效19五.结论与总结21参考文献22致 谢23摘要随着信息技术的发展，信息技术使用传递速度突破了时间和地 域性的局限，网络化与全球化成为一种不可避免的世界趋势。然而网 页制作并不是一个简单的过程，期间要运用好多技术，包括图像设计 和处理、网页动画的制作和网页版面的网页布局编辑等。随着网页制 作技术的不断发展和完善，产生了众多网页制作与网站建设软件。目 前使用最多的是较为常用的Dreamweaver、Flash、Fireworks这三个 软件，也就是人们俗称的建站“三剑客”，其
3、中Dreamweaver是网页 制作的核心。相对于一个网站页面的标准化，美观化是更为重要的，CSS是最主 要的表现标准化的语言。在本论文将通过对网友需求的了解和对其他 网站的参考，在网页设计与制作中着重使用CSS+DIV样式布局来标准 化美观化网页，最终成功完成一个CSS样式网站。用一段话来概括网站标准化的作用就是；1. 确保任何网站文档都能够长期有效简化代码、降低建设成本；2. 让网站更容易使用，能适应更多不同用户和更多网路设备的需求；3. 确保所有应用都能够持续准确的执行；【关键词】：Dreamweaver、CSS、DIV、网页设计标准化、Html。第一章概述1.1 HTML从1993到如
4、今的发展，同时针对其以后的发展进行评测。HTML 语言作为网络语言的标准，在计算机的发展史中有着不可或缺的地位。 所以在HTML上的成就也决定着一个时代的发展。1.2 HTML语言的产生HTML的全称是Hypertext Markup Language （超文本标记语言） HTML是用于描述网页文档的标记语言。现在我们常常习惯于用数字来 描述HTML的版本例如：HTML5，但是最初的时候我们并没有HTML1，而 是1993年IETF团队的一个草案，并不是成型的标准。两年之后，在 1995年HTML有了第二版，当时是作为RFC1866发布的。有了以上的两 个历史版本，HTML的发展可谓突飞猛进。
5、1996年HTML3.2成为W3C推 荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相 继成为W3C的推荐标准。而在2000年基于HTML4.01的ISO，HTML成 为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这 期间虽然有点小的改动但大方向上终归没有什么变化。从1993-2000 之间短的7年时间，HTML语言有着很大的发展，基于诸多人的努力， 终于产生了我们现在用的HTML语言。1.3层叠样式表从1990年代初HTML被发明开始样式表就以各种形式出现或不同的 浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调 节网页的显示方式。一开始样式表
6、是给读者用的，最初的HTML版本只 含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML 的成长，为了满足设计师们的要求，HTML获得了很多显示功能。随着 这些功能的增加定义样式的语言越来越没有意义了。1994年哈坤利 提出了 CSS的最初建议。伯特-波斯（Bert Bos）当时正在设计一个 叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些 样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS 中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地 方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作 者的样式。这种层叠的方式使作者和读
7、者都可以灵活地加入自己的设 计，混合个人的爱好。哈坤于1994年在芝加哥的一次会议上第一次 展示了 CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C 刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈 坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的 主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的 第一版本被出版。1997年初，W3C内部组织了专门管CSS的工作小组， 其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到 的一些问题，其结果是1998年5月出版的第二版要求。到2004年为 止，第三版还未出版。* 199
8、6年W3C正式推出了 CSS1.* 1998年W3C正式推出了 CSS2.* CSS2.1是W3C现在正在推荐使用的.* CSS3现在还处于开发中.1.4项目介绍本网站是一个可以在线交流、提供顾客服务，以及在线下载的渠道; 对开发设计人员而言，本类网站就是使一些功能模块，通过网页的形 式将前台和后台结合起来。每一个完整的网站，都要划分为四个组成 部分：结构、内容、服务、功能。网站是为了展现企业形象、介绍产 品和服务、体现企业发展战略的重要途径。本论文着重介绍网站前台页面总设计，总体页面设计以满足网友需 求为主要目的，以页面运行速度为首要考虑因素，尽量避免过多的运 用图片，使页面大方美观展现企业
9、形象。1.5页面设计规划根据网友的需求。初步规划网站为一种风格和色系，其着重体现简 约的风格，整体页面选用蓝色，但其又不会显单调，因为主要为网站 增加了三种特效，分别是网站背景改变特效（7中背景颜色随意改） 鼠标特效（鼠标气泡特效）页面特效（窗口飘洒的雪花），分为LOGO 与片头页面栏、导航栏、公告栏、合作伙伴栏、和资源下载等模块， 以及下级子界面。第二章网站制作前期准备2.1软件的准备在网页的设计过程中，因人而宣，每个人使用的软件也许不同，比 如较有名的网站设计软件有Macromedia公司出品的网页设计“三剑 客”、有微软的Frontpage 、还有国产的“东方网页王”等等。在 这里，我们
10、主要要说的是Macromedia公司出品的“三剑客”。这“三 剑客包括 Dreamweaver，Fireworks 和 Flash ，其中，Dreamweaver 是 网页编辑软件，Fireworks是图形/图像处理软件，Flash是矢量动画 编辑软件。当然，到今天为止，Macromedia公司出品的这个“三剑客” 都已经是2004版，估计最新版也应该很快出,Macromedia公司一向以 其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也 不例外，是Macromedia公司专门为网页设计、制作开发的系列软件套 件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计 动画网页的
11、最佳工具。Dreamweaver采用“所见即所得”的直观设计模式，充分尊重设 计人员的原始意识和想象力。她成功地将网页设计功能中的技术实现 部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由 Dreamweaver自动完成。另外，还有一点值得说明的是， Dreamweaver可以控制和删除冗余代码，减小网页文件的大小。从而 能够快速上传和下载。Fireworks的独特之处在于它能够优化、切 分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用 的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形， 并且具有所有其他图形处理工具的诸多优点。Fireworks的最大优
12、势就在于它在任何时候可以从任何阶段开始 设计工作，这样既可以节约时间又可以对产品进行扩展。另外， Fireworks中的诸多功能都是面向WEB应用的，因此对于WEB设计新 手来说也很容易学习的。Flash是比较另类、超前的一种网页动画制作软件，它不仅能够 满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有 的便利。Flash提供了广泛的平台支持，它不需要任何编程工作就能 够制作出精彩的动态效果。由于Flash采用矢量图形格式来制作动 画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储 空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。在我设计我的网站的过程中我选择了
13、Dreamwear和Fireworks和 Photoshop三种软件。因为自己相对于其它的软件来说，这三个还算是 比较熟悉的。2.2软件的应用在本网站中我主要应用PS制作了网站的效果图，下面我们来看下PS的界面，认识了解PS：（标题栏：标题栏左边显示photoshop的标志和软件名称。右边三个 图标分别是最小化、最大化和关闭按钮。图2-1菜单栏：photoshop菜单栏包括文件、编辑、图像等9个菜单工具属性栏：主要用来显示工具箱中所选用工具的一些延展的选 项。选择不同的工具时出现的相应选项也是不同的，具体内容在工具 箱介绍中详细讲解。工具箱：对图像的修饰以及绘图等工具，都从工具箱中调用。几 乎
14、每种工具都有相应键盘快捷键，工具箱很想画家的画箱。调板窗：用来存放不常用的调板。调板在其中只显示名称，点击 后才出现整个调板，这样可以有效利用空间。防止调板过多挤占了图 像的空间。浮动调板：用来安放制作需要的各种常用调板，也可以称为浮动面 板。这就是PS的工作界面，下面我将用PS制作网站的PSD效果图，在 图中我一共建了七个分组（底部组，合作伙伴组，产品分类组，最新 动态组，产品公告组，top组，会员中心组）组下又分好多图层，及其 单独的背景图层。效果图如下：图2-2图2-32.3 Fireworks 的应用网站中主要运用Fireworks进行了网站所需素材的切片，下面我们也来认识下本软件的工
15、作界面:图2-4图2-52.4 Dreamweaver 的应用Dreamweaver版本具有强大的站点管理功能，内置FTP软件可以直 接上传主页；所见即所得的页面编辑方式；支持Styles Sheet样式表 单，创造丰富的页面效果；支持Layer层，并可使用Timeline时间轴 制作动态网页；内置Behavior行为，为网页增加交互功能；提供模板 和库可以加速页面的生成和制作；支持外部插件，提供无限的扩展能 力。如图:图2-6图2-7可以看出其具备以下特点：（1、灵活的编写方式2、可视化编辑界面3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证5、强大的WEB站点管
16、理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性8、丰富的媒体支持能力9、超强的扩展能力第三章CSS样式建站3.1 CSS排版与普通排版的区别习stylez- 不用CSS排版 图3-1第一种方法是结构表现相分离，内容部分代码简单吧，如果还有 更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个 比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人， 至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就 知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单 了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有 点像Flas
17、h软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码 不复杂，网页文件体积小能较快被客户端下载了。3.2 DIV+CSS样式页面布局DIV+CSS是Web标准中一种新的做网站的布局方式，是一种新的排 版理念，完全有别于传统的表格布局排版习惯。DIV+CSS样式具有比 表格更大的优势，它能够实现页面内容和外观样式的分离，可以对相 的DIV标记中的ID进行控制，使浏览者更快地浏览网页。采用DIV+CSS 样式进行页面布局时，首先应将页面在整体上进行div 标记分块，然 后各个块进行CSS定位，最后再向各个块中添加相应的内容。页面布 局
18、的样式是多变的，他可以根据网站的信息划分和排列进行布局划分。 采用DIV+CSS样式布局网站时，比较常用的是二分栏和三分栏。下面 列出分栏布局页面设计需要注意的几点以供参考：（1）页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超 出页面如何显示；页面居中，考虑页面是否要居中显示。（2）整体布局的DIV嵌套关系。除首页外，其他网页中可能用到 的可重复元素有Header、Footer和SideBar，经常变换的只有MainBody 里的内容，而且页面宽度是固定的，因此要在所有的元素外面做一个 外框。#lef本网站示例代码：.zhong ( width:1024px; margin:0 auto
19、;top height:73px;background:url(images/bg_1.gif) repeat-x;padding:0 24px;.top_left float: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;3.3 CSS样式表1. 链入外部样式表链入外部样式表是把样式表保存为一样式表文件，然后在页面中用 标记链接到这个样式
20、表文件，这个标记必须放到页面的 区内，如下:&hellip.上面这个例子表示浏览器从mystyle.css文件中以文档格式读出 定义的样式表。rel二stylesheet是指在页面中使用这个外部的样式表 type二text/css是指文件的类型是样式表文本。href=” mystyle.css” 是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸 张，语音合成设备，盲文阅读设备等。一个外部样式表文件可以应用于多个页面。当你改变这个样式表 文件的时候，所有页面的样式都随之而改变。在制作大量相同样式页 面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后 的修改、编辑，浏览
21、时也减少了重复下载代码。样式表文件可以用任何文本编辑器(例如：记事本)打开并编辑， 一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标 记，mystyle.css这个文件的内容如下：hr color: siennap margin-left: 20pxbody background-image: url(images/back40.g i f)/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的 背景图片为images目录下的back40.gif文件*/2.内部样式表内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中 了，样式表是用标记插入的，从下例
22、中可以看出标记的用法：hr color: siennap margin-left: 20pxbody background-image: url(images/back40.g i f)注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽 略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了 避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而 不让它显示：3-4 CSS色彩及颜色基础知识这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、 边框颜色2、颜色规范与颜色规定：网
23、页使用RGB模式颜色网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于 有区别、有动感（特别是超链接中运用）、美观之用，同时颜色也是 各种各样网页的样式表现元素之一，了解CSS字体颜色。传统的html 颜色与w3c标准下的css颜色对比和DIV CSS运用颜色CSS color颜 色语法：color:#000000;Css样式中color后直接加RGB颜色值（#FFFFFF 、 #000000 、 #F00）RGB颜色值在实际布局时候确定，可以使用Photoshop （简称PS） 拾取工具进行获取获得。3.5两种方法设置对象颜色样式1、在DIV标签内使用color颜色样式2、在CSS选
24、择器中使用color颜色样式CSS代码：.divcss5color:#00F /*设置对象divcss5内文字为蓝色*/扩展阅读：这里运用了 CSS注释对此样式设置说明，了解CSS注释：3、DIV+CSS颜色样式完整案例：Css 代码：.divcss5color:#00F/*设置对象divcss5内文字为蓝色*/HTML代码：标签内使用color css样式 红色 外部样式表设置对象color颜色 蓝色 3.6文字颜色控制一样传统html和css文字颜色相同使用“color： + “RGB颜色取值” 即可，如颜色为黑色字即对应设置CSS属性选择器内添加 “color:#000;即可。传统设置背
25、景颜色使用“bgcolor=颜色取值”，而CSS中用background:+颜色取值。例如：设置背景为黑色，传统Html设置，即 在标签内加bgcolor=#000即可实现颜色为黑色背景，如果在W3C中即 在对应CSS始终选择器中始终加入background:#。实现。传统 “border color=取值”，CSS 中“border-color:”+ 颜色取 值。例如:在传统html直接在table标签加入“border color=#000” 即可，在现在CSS中设置“border-color:#000;”即可让边框颜色为 黑色，同时记得设置中包括宽度和样式（虚线、实现）DIV+CSS颜色
26、 值扩展知识：颜色值是一个关键字或一个数字的RGB规范。3.7 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（）;3.8 CSS盒子模型在网页设计中常听的属性
27、名：内容（content）、填充（padding）、边 框（border）、边界（margin）， CSS盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日 常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容 就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身；边界则说明 盒子摆放的时候的注意事项：不能全部堆在一起，要留一定空隙保持 通风，同时为了方便取出。在网页设计上，内容常指文字、图片等元 素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， CSS盒子具有弹性，里面的东西大过盒
28、子本身最多把它撑大，但它不会 损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚 度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的 厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它 东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不 同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空 往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下 图：MARGIN边界ROX图3-1盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料度。第四章网站后期特效4.1网站特效网页特效是用
29、程序代码在网页中实现的特殊效果或者特殊的功能 的一种技术，是用网页脚本(javascript,vbscript)来编写制作动态特 殊效果。它为网页活跃了网页的气氛，有时候会起到一定的亲切力。 而 JavaScript 是一种基于对象(Object)和事件驱动(Event Driven) 并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、 Java脚本语言(Java小程序)一起实现在一个Web页面中连接多个对 象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是 通过嵌入或调入到标准的HTML语言中实现的。它的出现弥补了 HTML 语言的缺陷，它是Java与HTML折衷
30、的选择。也含有以下特点：1、是一种脚本编写语言.2、基于对象的语言。3、简单性4、安全性5、动态性的6、跨平台性4.2本网站的特效本网站后期运用了三个特效效果，分别是：背景特效，鼠标特效， 窗口特效下面我们来看下特效前与特效后的效果：图4-1特效后:图4-2到此本网站制作完成，还是向前面说的那样，本网站规划为一种风 格和色系，其着重体现简约的风格，整体页面选用蓝色，但其又不会 显单调，不敢说高端大气上档次，但内涵还是有的。五.结论与总结经过以上总共五个章节的阐述，本网站的研究的课题基本解决。经 过一段时间的努力，网站也终于开发完成，达到了预期目标以及功能， 可以满足用户对网站要求。而网站标准的
31、目的就是：1.提供最多利益给最多的网站用户2.确 保任何网站文挡都能够长期有效3.简化代码、降低建设成本4.让网站 更容易使用，能适应更多不同用户和更多网路设备5.当浏览器版本更 新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你 的网站用户来说，网站标准就是最佳体验。网页版式设计的布局合理 化布局不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更 应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主 题。要通过网页页面结构的分割和造型空间的确立，合理安排组成网页 各元素的合理位置。使页面内容和形式有机统一
32、，要具有整体美感。总之，在这次毕业设计中，能够将网络理论应用到实际当中，解决 具体问题，了解更多网站需要的相关元素。这是大学三年来所学知识 的综合运用，切实感受到设计的苦与乐。在这里希望各位老师提出意 见和建议，我定会努力学习改进，争取做出更大的进步。参考文献1XML基础与实践教程王震江，马宏清华大学出版社2HTML、CSS、JavaScript整合详解王津涛北京机械工业出 版社3CSS网页设计标准教程温谦人民邮电出版社4Photoshop+CoreIDRAW平面设计创作教程周建国人民邮电 出版社5精通DIV+CSS网页样式布局曾静娜 人民邮电出版社6CSS+DIV网页设计开发技术与实例应用孔
33、璐国防工业出版社致 谢在本次论文设计过程中，感谢我的学校，给了我学习的机会，在 学习中，老师从选题指导、论文框架到细节修改，都给予了细致的指 导，提出了很多宝贵的意见与建议，老师以其严谨求实的治学态度、 高度的敬业精神、兢兢业业、孜孜以求的工作作风和大胆创新的进取 精神对我产生重要影响。她渊博的知识、开阔的视野和敏锐的思维给 了我深深的启迪。这篇论文是在钟园园老师的精心指导和大力支持下 才完成的。感谢所有授我以业的老师，没有这些年知识的积淀，我没有这么大 的动力和信心完成这篇论文。感恩之余，诚恳地请各位老师对我的论 文多加批评指正，使我及时完善论文的不足之处。谨以此致谢，最后我要向百忙之中抽时间对本文进行审阅的各位老 师表示衷心的感谢。毕业论文（设计）成绩评定评语：指导老师评语成绩：指导老师:年月日答辩小组名单：答辩评语：答辩成绩：评语长：答辩小组组年月日院系审 查审查人：毕业论意（公印章）年见月 日文 领 导 小 组备注月日审查人：（公印章）年
