1、山西轻工职业技术学院毕业论文Web 标准化网站设计教学系: 信 息 工 程 系 专业班级： 网 络 技 术 0931 学生姓名： 魏 杰 指导老师姓名: 徐 秋 菊 山西轻工职业技术学院二一二年二月二十九日山西轻工职业技术学院毕业论文1Web 标准化网站设计摘 要制作一个网页需要用到很多技术，包括图像设计和处理、网页动画的制作和网页版面的网页布局编辑等。随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。目前使用最多的是Dreamweaver、Flash 、 Fireworks 这三个软件， 其中是网页制作的核心。 然而一个 Web 页面的标准化更为重要， CSS 是最主要的表
2、现标准语言。在本论文将通过对企业需求的了解和对其他企业网站的参考，在网页设计与制作中着重使用 CSS+DIV 样式布局来标准化网页，最终成功完成一个虚拟的跨国公司网站。用一段话来概括网站标准化的作用就是：1.确保任何网站文档都能够长期有效简化代码、降低建设成本；2.让网站更容易使用，能适应更多不同用户和更多网路设备的需求；3.确保所有应用都能够持续准确的执行。 关键词：Dreamweaver，CSS，DIV ，网页设计标准化，Html山西轻工职业技术学院毕业论文1目 录摘 要.11.绪论11.1 项目介绍.11.2 页面设计规划.11.3 页面代码编写.21.4 后期整合.22.网站标准化 D
3、IV+CSS 22.1 web 标准的概念 22.1.1WEB 标准 .22.1.2 结构标准语言32.1.3 表现标准语言32.1.4 行为标准32.2 建立网站标准的目的42.3 DIV+CSS .52.3.1 DIV+CSS 的概念52.3.2 DIV+CSS 的使用方法 52.3.3 CSS 盒子模型 .53标准网站开发环境.73.1 网页设计工具.73.1.1 网页制作工具Dreamweaver CS5 .73.1.2 图像处理工具Fireworks CS5 .73.1.3 动画制作工具Flash CS5 .73.2 网页开发语言73.2.1 静态页与布局HTML、CSS+DIV 7
4、3.3.2 动态效果实现JS 84网站制作.84.1 设计分析94.1.1 设计流程.94.1.2 设计理念.94.2 主频道页面设计104.2.1 设计流程.104.2.1 设计理念104.3 英文版设计115. 页面制作实例115.1 审图并制定代码生成方案115.2 主要页面设计13山西轻工职业技术学院毕业论文25.3 从页头制作谈图片处理21结论与总结.23参考文献.24致 谢.25山西轻工职业技术学院毕业论文11.绪论随着信息技术的发展，信息技术使用传递速度突破了时间和地域的局限，网络化与全球化成为一种不可避免的世界趋势。现在各个公司都有自己的网站，而公司的网站就是公司在互联网上进行
5、产品推广和形象宣传的平台，公司网站相当于一个企业的网络名片。本篇论文将针对页面设计和网站标准化，以跨国公司网站建设为主要案例来进行论述。1.1 项目介绍公司网站是一个可以发布企业信息、提供顾客服务，以及在线销售的渠道；对开发设计人员而言，企业网站就是使一些功能模块，通过网页的形式将前台和后台结合起来。每一个完整的企业网站，都要划分为四个组成部分：结构、内容、服务、功能。公司网站是为了展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。本论文着重介绍网站前台页面总设计，总体页面设计以满足客户需求为主要目的，以页面运行速度为首要考虑因素，尽量避免过多的运用图片，使页面大方美观展现企业形象。1
6、.2 页面设计规划根据企业的需求。初步规划为两种风格和色系，第一种着重体现公司简约的风格，整体页面选用蓝色，第二种着重体现公司大气的风格，整体页面选用灰色偏蓝色。经过反复探讨研究后，选定第二种灰色偏蓝色方案。主要分为公告栏、前沿技术和资源下载等模块，以及英文界面。山西轻工职业技术学院毕业论文21.3 页面代码编写设计图和内容确定之后，就开始页面代码的生成，即将效果图的所有外观转化为HTML 代码，整站所有页面全部用符合 W3C 标准的 XHTML、DIV+CSS 布局实现，并且页面所有动态生成信息全部用 HTML 语言的语句（镶嵌式页面）完成，所有图片文件均为符合 WEB256 色标准的 GI
7、F 文件格式，整体页面体积大幅度减少，页面运行速度提高。1.4 后期整合代码编写完成后交与程序员进行页面整合并调试数据，最后进行测试和浏览器兼容调整。2.网站标准化 DIV+CSS因本文主要讨论页面设计和建立符合 W3C 标准化网站，故本章主要讨论网站标准化和简单介绍 DIV+CSS 布局。2.1 web 标准的概念 2.1.1WEB 标准 WEB 标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure） 、表现（Presentation）和行为（Behavior） 。对应的标准也分三方面：结构化标准语言，主要包括 XHTML 和 XML；表现标准语言，主要包
8、括 CSS；以及行为标准，主要包括对象模型（如 W3C DOM） ，ECMAScript 等。这些标准大部分由 W3C起草和发布，也有一些是其他标准组织制订的标准，比如 ECMA（European Computer Manufacturers Association）的 ECMAScript 标准。下面对这些标准作简单介绍：山西轻工职业技术学院毕业论文32.1.2 结构标准语言 （1）XMLXML 是 The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是 W3C 于 2000 年 10 月 6 日发布的 XML1.0，参考（www.w3.org
9、/TR/2000/REC-XML-20001006） 。和 HTML 一样，XML 同样来源于 SGML，但 XML 是一种能定义其他语言的语言。XML 最初设计的目的是弥补 HTML 的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。（2）XHTML XHTML 是 The Extensible HyperText Markup Language（可扩展标识语言）的缩写。目前推荐遵循的是 W3C 于 2000 年 1 月 26 日推荐 XML1.0。XML 虽然数据转换能力强大，完全可以替代 HTML，但面对成千上万已有的站点，直接采用 XML 还为时过早。因此
10、，我们在 HTML4.0 的基础上，用 XML 的规则对其进行扩展，得到了XHTML。简单的说，建立 XHTML 的目的就是实现 HTML 向 XML 的过渡。 2.1.3 表现标准语言CSS 是 Cascading Style Sheets 层叠样式表的缩写。目前推荐遵循的是 W3C 于 1998年 5 月 12 日推荐 CSS2。 W3C 创建 CSS 标准的目的是以 CSS 取代 HTML 表格式布局、帧和其他表现的语言。纯 CSS 布局与结构式 XHTML 相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。2.1.4 行为标准 （1）DOM DOM 是 Document O
11、bject Model 文档对象模型的缩写。根据 W3C DOM 规范，DOM 是一种与浏览器，平台，语言的接口，使得访问者可以访问页面其他的标准组件。简单理解，DOM 解决了 Netscaped 的 Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。 山西轻工职业技术学院毕业论文4(2) ECMAScript ECMAScript 是 ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript） 。
12、目前推荐遵循的是 ECMAScript 262。2.2 建立网站标准的目的通过网络中的实例来说明。（1）网线按照一定顺序排列才可以传送信号；（2）网络之间传递数据离不开标准 TCP/IP 协议；（3）网络设备多样化，却必须遵循 IEEE 电气组织的标准。以上的这些网络中的实例都说明了网站标准化的必要性。部分网站用户都有体验，每当主流浏览器版本升级，刚建立的网站就可能变得过时，就需要升级或者重新建造一遍网站。例如 1996-1999 年的“浏览器大战” ，为了兼容Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备出现，用户也需要一个新版本来支持这
13、种新技术或新设备，例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了大量的带宽；针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。要想解决这些问题，就需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft 等)也终于认识到统一标准的好处，因此在W3C（ W3C.org）的组织下，网站标准开始被建立（1998 年 2 月 10 日发布 XML1.0 为标志） ，并在网站标准组织（webstandards.org）的监督下推广执行。简单说，网站标准
14、的目的就是：（1）提供最多利益给更多的网站用户；（2）确保任何网站文档都能够长期有效简化代码、降低建设成本；（3）让网站更容易使用，能适应更多不同用户和更多网路设备；（4）当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 山西轻工职业技术学院毕业论文5对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于网站用户来说，网站标准就是最佳体验。2.3 DIV+CSS2.3.1 DIV+CSS 的概念DIV+CSS 是网站标准（或称 “WEB 标准“ ）中常用的术语之一，通常为了说明与HTML 网页设计语言中的表格（table ）定位方式的区别，因为 XHTML 网站
15、设计标准中，不再使用表格定位技术，而是采用 DIV+CSS 的方式实现各种定位。DIV 的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由 DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。2.3.2 DIV+CSS 的使用方法为了让广大的网页设计师认识到 CSS 的重要，设计师 Dav Shea 建立了一个名为“CSS 禅意花园 ”（CSS ZenGarden,www.csszengarden）的网站。该网站提供一套标准的 HTML 页面及 CSS 文件，然后自行修改 CSS 定义，以体现不同的设计风格，这些风格各异的页面如果查看 HTML 文件
16、，访问者会发现其 HTML 文件是相同的，而如此纷繁复杂的视觉效果，只因为引用了不同的 CSS 文件。如果想尝试一下不用表格来排版网页，而是用 CSS 来排版，也就是常听的用 DIV来编排网页结构，又或者说想学习网页标准设计，再或者说上司要改变传统的表格排版方式，提高企业竞争力，那么一定会接触到 CSS 的盒子模式，这就是 DIV 排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用 CSS 排版后，就是通过由 CSS 定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，如 PDA 设备。2.3.3 CSS
17、盒子模型先说说我们在网页设计中常听的属性名：内容(content)、填充(padding) 、边框(border)、边界 (margin)， CSS 盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充山西轻工职业技术学院毕业论文6就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身；边界则说明盒子摆放的时候的注意事项：不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV 嵌套
18、） ，与现实生活中盒子不同的是， CSS 盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图：由“盒子”堆出来的网页版面实现结构与表现分离。3标准网站开发环境3.1 网页设计工具3.1.1 网页制作工具Dreamweaver CS
19、5Dreamweaver CS5 是业界领先的 Web 开发工具，使用该工具可以高效地设计、开发和维护网站。利用 Dreamweaver CS5 中的可视化编辑功能，可以快速地创建网页而不需要编写任何代码，这对于网页制作者来说，使工作变得轻松。文本是网页中最基山西轻工职业技术学院毕业论文7本和最常用的元素，是网页信息传播的重要载体。学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的。3.1.2 图像处理工具Fireworks CS5Fireworks CS5 是一款用来设计网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理人员面临的主要问题。Firework
20、s 中的工具种类齐全，使用这些工作，可以在单个文件中创建和编辑矢量和位图图形。3.1.3 动画制作工具Flash CS5Flash 是一款非常优秀的动画制作软件，利用它可以制作出丰富多彩的动画，创建网页交互程序，可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的 Flash 动画。Flash 动画节省了文件的大小，提高了网络的传送的速度，大大增强了网站的视觉冲击力，吸引了越来越多的浏览者访问网站。3.2 网页开发语言3.2.1 静态页与布局HTML、CSS+DIVHTML 语言是目前网络上应用最为广泛的网页语言，是构成网页文档的主要语言，也是超文本链接标示语言或超文本标记语言
21、。HTML 文本是一种描述性文本，是由HTML 命令组成的。HTML 命令可以说明图形、表格、声音、动画、文字、链接等。HTML 语言的结构包括头部（Head） 、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。DIV+CSS 是标准网页（或称它为 “WEB 标准” ）中的常用术语之一，Div+CSS 是一种新的网页的布局方法,这一种网页布局方法和传统的 HTML 网页设计语言中的表格（table）定位方式并不一样 ,真正地达到了 w3c 内容与表现相分离。HTML 语言在HTML4.01 之后，不再发布新版本，因为 HTML 语言正变得越来越复杂化、专
22、用化。XHTML 语言可以将 HTML 语言标准化，用 XHTML 语言重写后的 HTML 页面可以应用于更多的 XML 技术，使得网页更加容易扩展，更加适合自动数据交换，并更加规整。在 XHTML 网站设计标准中，早就不再使用表格定位技术，而是采用 DIV+CSS 的方式山西轻工职业技术学院毕业论文8实现各种定位。3.3.2 动态效果实现JSJS 就是 JavaScript，是一种计算机脚本语言，主要在 web 浏览器(客户端)解释执行，由网景公司研发。通过 JavaScript 可以做到回应使用者的需求事件而不用任何的网路。来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器
23、端处理，再传回来的过程，而直接可以被客户端的应用程式所处理。4网站制作Wed 的标准化网站设计以设计一个公司网站为例，通过它的制作步骤来说明一个网站如何才能标准化。公司网站是公司形象的体现，其中也包含着整个公司的理念和方向。这种网站的典型特点是简约而不简单，没有过多的颜色修饰，整体风格大气。而且网页上的内容更新频率相对较高，新闻发布和资源下载等都是更新的对象。制作这种类型的网站重点在于整体风格的把握，技巧方面并不需要过于的花哨，选定一种颜色以后尽量围绕着一个色调进行设计。很多时候公司的朝气蓬勃，欣欣向荣也需要在页面上得到体现。4.1 设计分析如今，互连网对企业来说已经不再是新鲜的事物，大多数的
24、企业都已经建立了自己的网站。随着互连网的快速发展，网路已成为人们生活的一部分。不仅仅是大企业需要网站来开展电子商务，中小企业一样也迫切需要自己的企业网站用以实现宣传和联系客户等许多传统媒介无法完成的目标。4.1.1 设计流程资料收集阶段主要针对公司网站对各个大型公司网站做了详细的资料收集，借鉴优秀的网站，以学习和提高。山西轻工职业技术学院毕业论文94.1.2 设计理念网站整体采用了灰蓝色的主色调，搭配以白色显得更加的突然，页面整体风格简练大方，没有复杂的图形和多于的装饰。 （详情见：网站截图）4.2 主频道页面设计4.2.1 设计流程主频道页一共十三个，分别是：公司首页、工作团队、项目、市场与
25、投资、员工福利、员工花名册、思想学习、出版物、日程安排、集体活动、友情链接、雁过留声和联系我们。按客户需求每个页面都有独立的风格和设计思路，等于说设计十三个不同的小网站。4.2.1 设计理念整体频道页的布局在大的方向上保持一致，每个页面都有一个单一的色系，左右布局色基本风格保持一致，中间主色系各有不同，并在左上角配有各个页面风格一致山西轻工职业技术学院毕业论文10的图片来体现本页面的内容。4.3 英文版设计由于跨国公司的页面必须有英文的界面，因此需要将“英文版”的链接放在页面的最上端。又考虑到单独一个链接不够美观，因此将“新品发布”和“公司员工”这些最吸引人的链接并排与其放置。5. 页面制作实
26、例下面将以公司主页面设计为例详细叙述用 DIV+CSS 布局页面。5.1 审图并制定代码生成方案在页面外观确定下来后，还有一个重要的流程需要完成，那就是审图。就像之前所说的，所有的设计第一步就是构思，构思好了，一般来说还需要用 PhotoShop 或FireWorks(以下简称 PS 或 FW)等图片处理软件将需要制作的界面布局简单的构画出来，然后开始审图，仔细的观察仔细的琢磨，甚至于细小到一个一个像素的观察。下图是公司首页面的效果图：山西轻工职业技术学院毕业论文11通过效果图我们可以看出本页面整体是比较常见的 2 列布局，可以看出右面为设计元素较多的地方我们可以采用切图方式将整个右面切成一块
27、块的小图，页头带链接的，把每个带链接的文字单独切成小图，以便后期加动态链接。还有一个类似于“找碴游戏”的问题，找出页面类似的地方就可以省略很多代码的编写并且减少文件大小。根据效果图定制了以下页面结构图，希望可以更通俗易懂的表述出页面的布局。山西轻工职业技术学院毕业论文125.2 主要页面设计基本 HTML 语言这里不做过多介绍，下面介绍下我页面书写 HTML 代码和 CSS 的过程。上图中的各个部分直接采用了 HTML 代码中各个块对应的 id.# globallink块主要包含页面顶端的“英文版本” 、 “新品发布”和“公司员工” ，这块在排版上相对简单。而# left 块则包括真正的导航条
28、和网站内容检索。# main 块则主要包括人物的图片、新闻快递、公告栏、前沿技术、资源下载以及右端英文刊物等，这两个模块的框架分别如图 5.3 与图 5.4 所示。#left#globallink#main山西轻工职业技术学院毕业论文13图 5.3 #left 块图 5.4 #main 块#left#navigation#search#main#list #letter#banner#hottest山西轻工职业技术学院毕业论文141.Logo 与顶端链接新品发布公司员工英文版#globallinkwidth:758px; height:62px;margin:0px 0px 1px 0px;b
29、ackground:url(logo.jpg) no-repeat; /* 添加 banner 图片 */#globallink ullist-style:none;position:absolute;left:540px; top:4px; /* 调整菜单文字的位置 */padding:0px; margin:0px;#globallink lifloat:left; text-align:center;padding:0px 10px 0px 18px;margin:0px;#globallink a:link, #globallink a:visitedcolor:#4a6f87;tex
30、t-decoration:none;#globallink a:hovercolor:#FFFFFF;text-decoration:underline;2.左侧导航与搜索 山西轻工职业技术学院毕业论文15#leftwidth:158px;float:left;#navigationwidth:158px;padding:0px;margin:0px 0px 10px 0px;#navigation ulmargin:0px;padding:0px;border-top:5px solid #cad7df; /* 顶端粗线 */#navigation liborder-bottom:1px s
31、olid #cad7df; /* 添加下划线 */#navigation li adisplay:block; /* 区块显示 */padding:3px 5px 3px 2em;text-decoration:none;background:url(icon1.gif) no-repeat 13px 9px;#navigation li a:link, #navigation li a:visitedbackground-color:#7591a3;color:#FFFFFF;#navigation li a:hover /* 鼠标经过时 */color:#003e66; /* 改变文字颜色
32、 */background:#aacbe0 url(icon2.gif) no-repeat 13px 9px;搜索表单结构代码如下所示。山西轻工职业技术学院毕业论文16查找: #search form, #search pmargin:0px;padding:0px;text-align:center;#search input.textborder:1px solid #7591a3;background:transparent;width:80px; font-size:12px;font-family:Arial;#search input.btnborder:1px solid #7
33、591a3;background:transparent;font-size:12px; height:19px;font-family:Arial;padding:0px;3.新闻快递山西轻工职业技术学院毕业论文17新闻快递：公司股票于昨日在美国纳斯达克上市#hottest h3font-size:16px;padding:28px 5px 4px 40px;margin:0px;background:url(icon3.gif) no-repeat 29px 34px;#hottest h3 a:link, #hottest h3 a:visitedcolor:#000000;text-d
34、ecoration:none;#hottest h3 a:hovercolor:#7591a3;text-decoration:underline;4.公司咨询#listfloat:left;margin:20px 0px 4px 0px;width:340px;padding:0px 0px 0px 28px;山西轻工职业技术学院毕业论文18前沿技术2007.4.1清华大学电子工程系牛人做报告，气氛融洽 晾衣杆实现高增益、高信噪比波束自动成形天线more#list h4font-size:12px;background:#e0e7ec url(icon4.gif) no-repeat 7px
35、 8px;padding:3px 0px 2px 17px;margin:0px;#list p.datemargin:0px; padding:5px 0px 5px 2px;font-weight:bold;color:#014e68;#list ulmargin:0px 0px 6px 40px;padding:0px;list-style-type:disc;#list ul li a:link, #list ul li a:visited, #list p.more a:link, #list p.more a:visitedcolor:#333333;text-decoration
36、:none;#list ul li a:hover, #list p.more a:hovercolor:#00a9e7;text-decoration:underline;#list p.moremargin:0px; padding:5px 0px 20px 10px;background:url(icon5.gif) no-repeat 0px 10px;山西轻工职业技术学院毕业论文195.英文刊物English Letter2007.12.7Auditorium Stagemore#letter h4margin:0px;font-size:12px;background:url(ri
37、ght_right.gif) no-repeat;color:#FFFFFF;padding:2px 0px 2px 15px;#letter p.date2background:#e0e7ec url(icon6.gif) no-repeat 5px 7px;margin:7px 15px 3px 7px;padding:1px 0px 1px 15px;font-weight:bold;#letter p.content2margin:2px 15px 0px 7px;padding:1px 0px 1px 0px;#letter p.more2margin:1px 15px 3px 7p
38、x;padding:0px 0px 1px 8px;background:url(icon5.gif) no-repeat 2px 5px;#letter p.more2 a:link, #letter p.more2 a:visitedcolor:#555555;text-decoration:none;#letter p.more2 a:hovercolor:#000000;text-decoration:underline;山西轻工职业技术学院毕业论文20#letterfloat:left;width:180px;margin:20px 0px 5px 30px;padding:0px;
39、border-left:1px solid #7591a3;5.3 从页头制作谈图片处理下面通过页头制作简单谈谈网页中图片的处理，网页需要美化，肯定会用到其它因素，如图片、影片、FLASH 等等，能够合理充分的利用这些因素，可以让网站外观更加美化更加被浏览者所喜爱。这里主要谈图片问题，目前在 www 页面使用的最多的图片格式是 JPEG(*.jpg *.jpeg)格式和 GIF(*.gif)格式，两者实际上已经成为 HTML 规范中要求的标准格式了！现分别介绍一下：GIF(Graphics Interchange Format，图片交换格式)格式，最高支持 8 位彩色，分为GIF87a 和 G
40、IF89a 两种类型，其中 GIF89a 支持“ 透明“交错“动画“三个特性！而 GIF图片之所以被广泛使用，就是因为这三个特性。透明是指可以给图片指定一种颜色，使其不被显示而成为透明；交错是指在显示图片的过程中可以从概貌逐渐变化到全貌，看上去也就是清晰度的从小变大；动画是指将各幅静态的图片连续显示形成动态画面！JPEG(Joint Photographic Experts Group，联合图片专家组) 格式，最大可支持 32 位彩色。由于存储技术的特别，JPEG 格式的图片比较小，并且它还采用了有损图片压缩技术，允许用户以百分比形式选择图片的质量，从而让用户在图片大小和图片质量之间权衡。GI
41、F 和 JPEG 两种图片格式各有特点，要根据需要进行选择。一般照片用 JPEG 格式，而图案、标记等由多块纯色的颜色区域组成的图片则应该以 GIF 格式存储 GIF 可以做到一些 JPEG 不能做到的事情。比如，你可以对 GIF 进行交织处理。交织处理的山西轻工职业技术学院毕业论文21GIF 图形可以先以低清晰度全部下载，然后再慢慢变清晰。这样，读者就可以先快速看到是一个什么图形。而 JPEG 则智能一行一行地下载，直到全图下载完毕，才可以看到整个图形。公司主页的页头制作我以 GIF 图片格式切开成若干个小图，每个文件只有几 KB大缩短了下载时间，具体见下图：山西轻工职业技术学院毕业论文22
42、结论与总结经过以上总共五个章节的阐述，本网站的研究的课题基本解决。经过几个月的努力，企业网站也终于开发完成，达到了预期目标以及功能，可以满足用户通过网站了解企业的文化及背景的需求。而网站标准的目的就是：1.提供最多利益给最多的网站用户 2.确保任何网站文挡都能够长期有效 3.简化代码、降低建设成本 4.让网站更容易使用，能适应更多不同用户和更多网路设备 5.当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。网页版式设计的布局合理化布局不但要单纯、简练、清晰和精确,而且在强
43、调艺术性的同时,更应该注重通过独特的风格和强烈的视觉冲击力,来鲜明地突出设计主题。要通过网页页面结构的分割和造型空间的确立,合理安排组成网页各元素的合理位置。使页面内容和形式有机统一,要具有整体美感。总之，在这次毕业设计中，能够将网络理论应用到实际当中，解决具体问题，了解更多网站需要的相关元素。这是大学三年来所学知识的综合运用，切实感受到设计的苦与乐。在这里希望各位老师提出意见和建议，我们定会努力学习改进，争取做出更大的进步。山西轻工职业技术学院毕业论文23参考文献1 顾群业网页艺术设计M 北京：济南：山东美术出版社，2009.6.2 曾静娜等精通 DIV+CSS 网页样式布局M 人民邮电出版
44、社，2008.3 王津涛HTML、CSS、JavaScript 整合详解（第四版）M 北京：机械工业出版社，2009.4 袁磊.陈伟卫网页设计与制作实例教程M 北京：清华大学出版社，2008.山西轻工职业技术学院毕业论文24致 谢光阴似箭，三年的学习时光已经接近尾声。在校期间学习网页制作, Flash 动画，CorelDraw， 3D max 软件， Auto CAD 机械制图等课程。在论文即将完成之际，我的心情无法平静，从开始进入课题到论文的顺利完成，每一步都是在徐秋菊老师的指导下完成的，她倾注了大量的心血。在此，谨向老师表示崇高的敬意和衷心的感谢！同时也离不开同学和朋友的帮助与鼓励。在这里请接受我诚挚的谢意！社会在不断的进步，而我们要跟上社会的步伐而前进，要想为社会贡献自己的一份力量，就必须全面提高我们的基础知识、基本能力和基本素质， 同时专业知识要宽，只有将实际与理论相结合，那才是知识的真谛！最后，我以一句话结束我的论文，并以此作为未来乘风破浪的心灵脚注：时间是无情的，而人生是短暂的，所以我们要珍惜时间，珍惜今天的每分每秒，明天的成功往往取决于今天的勤奋。
