web网页设计毕业论文.docx

web网页设计毕业论文.docx

《web网页设计毕业论文.docx》由会员分享，可在线阅读，更多相关《web网页设计毕业论文.docx（20页珍藏版）》请在冰豆网上搜索。

web网页设计毕业论文

导师：

院系：

专业：

学号：

姓名：

题目：

Web标准化网页设计

摘要

随着信息技术的发展，信息技术使用传递速度突破了时间和地域性的局限，网络化与全球化成为一种不可避免的世界趋势。

然而网页制作并不是一个简单的过程，期间要运用好多技术，包括图像设计和处理、网页动画的制作和网页版面的网页布局编辑等。

随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。

目前使用最多的是较为常用的Dreamweaver、Flash、Fireworks这三个软件，也就是人们俗称的建站“三剑客”，其中Dreamweaver是网页制作的核心。

相对于一个网站页面的标准化，美观化是更为重要的，CSS是最主要的表现标准化的语言。

在本论文将通过对网友需求的了解和对其他网站的参考，在网页设计与制作中着重使用CSS+DIV样式布局来标准化美观化网页，最终成功完成一个CSS样式网站。

用一段话来概括网站标准化的作用就是；

1.确保任何网站文档都能够长期有效简化代码、降低建设成本；

2.让网站更容易使用，能适应更多不同用户和更多网路设备的需求；

3.确保所有应用都能够持续准确的执行；

【关键词】：

Dreamweaver、CSS、DIV、网页设计标准化、Html。

第一章概述

1.1HTML

从1993到如今的发展，同时针对其以后的发展进行评测。

HTML语言作为网络语言的标准，在计算机的发展史中有着不可或缺的地位。

所以在HTML上的成就也决定着一个时代的发展。

1.2HTML语言的产生

HTML的全称是Hypertext Markup Language（超文本标记语言）HTML是用于描述网页文档的标记语言。

现在我们常常习惯于用数字来描述HTML的版本例如：

HTML5，但是最初的时候我们并没有HTML1,而是1993年IETF团队的一个草案，并不是成型的标准。

两年之后，在1995年HTML有了第二版，当时是作为RFC1866发布的。

有了以上的两个历史版本，HTML的发展可谓突飞猛进。

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被发明开始样式表就以各种形式出现或不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。

一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。

但随着HTML的成长，为了满足设计师们的要求，HTML获得了很多显示功能。

随着这些功能的增加定义样式的语言越来越没有意义了。

1994年哈坤·利提出了CSS的最初建议。

伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。

当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。

在CSS中，一个文件的样式可以从其它的样式表中继承下来。

读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。

这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合个人的爱好。

哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。

当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。

哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。

1996年底，CSS已经完成。

1996年12月CSS要求的第一版本被出版。

1997年初，W3C内部组织了专门管CSS的工作小组，其负责人是克里斯·里雷。

这个工作组开始讨论第一版中没有涉及到的一些问题，其结果是1998年5月出版的第二版要求。

到2004年为止，第三版还未出版。

*1996年W3C正式推出了CSS1.

*1998年W3C正式推出了CSS2.

*CSS2.1是W3C现在正在推荐使用的.

*CSS3现在还处于开发中.

1.4项目介绍

本网站是一个可以在线交流、提供顾客服务，以及在线下载的渠道；对开发设计人员而言，本类网站就是使一些功能模块，通过网页的形式将前台和后台结合起来。

每一个完整的网站，都要划分为四个组成部分：

结构、内容、服务、功能。

网站是为了展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。

本论文着重介绍网站前台页面总设计，总体页面设计以满足网友需求为主要目的，以页面运行速度为首要考虑因素，尽量避免过多的运用图片，使页面大方美观展现企业形象。

1.5页面设计规划

根据网友的需求。

初步规划网站为一种风格和色系，其着重体现简约的风格，整体页面选用蓝色，但其又不会显单调，因为主要为网站增加了三种特效，分别是网站背景改变特效（7中背景颜色随意改）鼠标特效（鼠标气泡特效）页面特效（窗口飘洒的雪花），分为LOGO与片头页面栏、导航栏、公告栏、合作伙伴栏、和资源下载等模块，以及下级子界面。

第二章网站制作前期准备

2.1软件的准备

在网页的设计过程中，因人而宜，每个人使用的软件也许不同，比如较有名的网站设计软件有Macromedia公司出品的网页设计“三剑客”、有微软的Frontpage 、还有国产的“东方网页王”等等。

在这里，我们主要要说的是Macromedia公司出品的“三剑客”。

这“三剑客包括Dreamweaver，Fireworks和Flash ，其中，Dreamweaver 是网页编辑软件，Fireworks是图形/图像处理软件，Flash 是矢量动画编辑软件。

当然，到今天为止，Macromedia公司出品的这个“三剑客”都已经是2004版，估计最新版也应该很快出，Macromedia公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。

Dreamweaver 采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。

她成功地将网页设计功能中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由Dreamweaver自动完成。

另外，还有一点值得说明的是，Dreamweaver 可以控制和删除冗余代码，减小网页文件的大小。

从而能够快速上传和下载。

 Fireworks 的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。

它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。

Fireworks 的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。

另外，Fireworks 中的诸多功能都是面向WEB应用的，因此对于WEB设计新手来说也很容易学习的。

Flash 是比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。

Flash 提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果。

由于Flash 采用矢量图形格式来制作动画，因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。

在我设计我的网站的过程中我选择了Dreamwear和Fireworks和Photoshop三种软件。

因为自己相对于其它的软件来说，这三个还算是比较熟悉的。

2.2软件的应用

在本网站中我主要应用PS制作了网站的效果图，下面我们来看下PS的界面，认识了解PS：

（标题栏:

标题栏左边显示photoshop的标志和软件名称。

右边三个图标分别是最小化、最大化和关闭按钮。

图2-1

菜单栏:

photoshop菜单栏包括文件、编辑、图像等9个菜单

工具属性栏:

主要用来显示工具箱中所选用工具的一些延展的选项。

选择不同的工具时出现的相应选项也是不同的，具体内容在工具箱介绍中详细讲解。

工具箱:

对图像的修饰以及绘图等工具，都从工具箱中调用。

几乎每种工具都有相应键盘快捷键，工具箱很想画家的画箱。

调板窗:

用来存放不常用的调板。

调板在其中只显示名称，点击后才出现整个调板，这样可以有效利用空间。

防止调板过多挤占了图像的空间。

浮动调板:

用来安放制作需要的各种常用调板,也可以称为浮动面板。

这就是PS的工作界面，下面我将用PS制作网站的PSD效果图，在图中我一共建了七个分组（底部组，合作伙伴组，产品分类组，最新动态组，产品公告组，top组，会员中心组）组下又分好多图层，及其单独的背景图层。

效果图如下：

图2-2

图2-3

2.3Fireworks的应用

网站中主要运用Fireworks进行了网站所需素材的切片，下面我们也来认识下本软件的工作界面：

图2-4

图2-5

2.4Dreamweaver的应用

Dreamweaver版本具有强大的站点管理功能，内置FTP软件可以直接上传主页；所见即所得的页面编辑方式；支持StylesSheet样式表单，创造丰富的页面效果；支持Layer层，并可使用Timeline时间轴制作动态网页；内置Behavior行为，为网页增加交互功能；提供模板和库可以加速页面的生成和制作；支持外部插件，提供无限的扩展能力。

如图：

图2-6

图2-7

可以看出其具备以下特点：

（1、灵活的编写方式

2、可视化编辑界面

3、功能更多的CSS支持——CSS可视化设计、CSS检查工具

4、动态跨浏览器验证

5、强大的WEB站点管理功能

6、内建的图形编辑引擎

7、Dreamweaver的集成特性

8、丰富的媒体支持能力

9、超强的扩展能力

第三章CSS样式建站

3.1CSS排版与普通排版的区别

图3-1

第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：

我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。

这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。

如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。

3.2DIV+CSS样式页面布局

DIV+CSS是Web标准中一种新的做网站的布局方式，是一种新的排版理念，完全有别于传统的表格布局排版习惯。

DIV+CSS样式具有比表格更大的优势，它能够实现页面内容和外观样式的分离，可以对相的DIV标记中的ID进行控制，使浏览者更快地浏览网页。

采用DIV+CSS样式进行页面布局时，首先应将页面在整体上进行

2、在CSS选择器中使用color颜色样式CSS代码：

.divcss5{color:

#00F}

/*设置对象divcss5内文字为蓝色*/

扩展阅读：

这里运用了CSS注释对此样式设置说明，了解CSS注释：

3、DIV+CSS颜色样式完整案例：

Css代码：

.divcss5{color:

#00F} 

/* 设置对象divcss5内文字为蓝色 */ 

HTML代码：

 标签内使用color css样式 

#F00"> 红色