山西轻工职业技术学院毕业论文山西轻工职业技术学院毕业论文Web标准化网站设计教学系: 信 息 工 程 系 专业班级： 网 络 技 术 0931 学生姓名： 魏 杰 指导老师姓名: 徐 秋 菊 山西轻工职业技术学院二一二年二月二十九日24Web标准化网站设计摘 要制作一个网页需要用到很多技术，包括图像设计和处理、网页动画的制作和网页版面的网页布局编辑等。随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。目前使用最多的是Dreamweaver、Flash、Fireworks这三个软件，其中是网页制作的核心。 然而一个Web页面的标准化更为重要，CSS是最主要的表现标准语言。在本论文将通过对企业需求的了解和对其他企业网站的参考，在网页设计与制作中着重使用CSS+DIV样式布局来标准化网页，最终成功完成一个虚拟的跨国公司网站。用一段话来概括网站标准化的作用就是：1. 确保任何网站文档都能够长期有效简化代码、降低建设成本；2. 让网站更容易使用，能适应更多不同用户和更多网路设备的需求；3. 确保所有应用都能够持续准确的执行。 关键词：Dreamweaver，CSS，DIV ，网页设计标准化，Html目 录摘 要11.绪论11.1 项目介绍11.2 页面设计规划11.3 页面代码编写21.4 后期整合22.网站标准化DIV+CSS22.1 web标准的概念22.1.1WEB标准22.1.2结构标准语言32.1.3表现标准语言32.1.4行为标准32.2建立网站标准的目的42.3 DIV+CSS52.3.1 DIV+CSS的概念52.3.2 DIV+CSS的使用方法52.3.3 CSS盒子模型53标准网站开发环境73.1 网页设计工具73.1.1网页制作工具Dreamweaver CS573.1.2图像处理工具Fireworks CS573.1.3动画制作工具Flash CS573.2网页开发语言73.2.1静态页与布局HTML、CSS+DIV73.3.2动态效果实现JS84网站制作84.1设计分析94.1.1 设计流程94.1.2 设计理念94.2主频道页面设计104.2.1 设计流程104.2.1设计理念104.3英文版设计115. 页面制作实例115.1审图并制定代码生成方案115.2主要页面设计135.3从页头制作谈图片处理21结论与总结23参考文献24致 谢251.绪论随着信息技术的发展，信息技术使用传递速度突破了时间和地域的局限，网络化与全球化成为一种不可避免的世界趋势。现在各个公司都有自己的网站，而公司的网站就是公司在互联网上进行产品推广和形象宣传的平台，公司网站相当于一个企业的网络名片。本篇论文将针对页面设计和网站标准化，以跨国公司网站建设为主要案例来进行论述。1.1 项目介绍公司网站是一个可以发布企业信息、提供顾客服务，以及在线销售的渠道；对开发设计人员而言，企业网站就是使一些功能模块，通过网页的形式将前台和后台结合起来。每一个完整的企业网站，都要划分为四个组成部分：结构、内容、服务、功能。公司网站是为了展现企业形象、介绍产品和服务、体现企业发展战略的重要途径。本论文着重介绍网站前台页面总设计，总体页面设计以满足客户需求为主要目的，以页面运行速度为首要考虑因素，尽量避免过多的运用图片，使页面大方美观展现企业形象。1.2 页面设计规划根据企业的需求。初步规划为两种风格和色系，第一种着重体现公司简约的风格，整体页面选用蓝色，第二种着重体现公司大气的风格，整体页面选用灰色偏蓝色。经过反复探讨研究后，选定第二种灰色偏蓝色方案。主要分为公告栏、前沿技术和资源下载等模块，以及英文界面。1.3 页面代码编写设计图和内容确定之后，就开始页面代码的生成，即将效果图的所有外观转化为HTML代码，整站所有页面全部用符合W3C标准的XHTML、DIV+CSS布局实现，并且页面所有动态生成信息全部用HTML语言的语句（镶嵌式页面）完成，所有图片文件均为符合WEB256色标准的GIF文件格式，整体页面体积大幅度减少，页面运行速度提高。1.4 后期整合代码编写完成后交与程序员进行页面整合并调试数据，最后进行测试和浏览器兼容调整。2.网站标准化DIV+CSS因本文主要讨论页面设计和建立符合W3C标准化网站，故本章主要讨论网站标准化和简单介绍DIV+CSS布局。2.1 web标准的概念 2.1.1WEB标准 WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言，主要包括XHTML和XML；表现标准语言，主要包括CSS；以及行为标准，主要包括对象模型（如W3C DOM），ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。下面对这些标准作简单介绍：2.1.2结构标准语言 （1）XMLXML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/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还为时过早。因此，我们在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 Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得访问者可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。 (2) ECMAScript ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262。2.2建立网站标准的目的通过网络中的实例来说明。（1）网线按照一定顺序排列才可以传送信号；（2）网络之间传递数据离不开标准TCP/IP协议；（3）网络设备多样化，却必须遵循IEEE电气组织的标准。以上的这些网络中的实例都说明了网站标准化的必要性。部分网站用户都有体验，每当主流浏览器版本升级，刚建立的网站就可能变得过时，就需要升级或者重新建造一遍网站。例如1996-1999年的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备出现，用户也需要一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。要想解决这些问题，就需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的监督下推广执行。简单说，网站标准的目的就是：（1）提供最多利益给更多的网站用户；（2）确保任何网站文档都能够长期有效简化代码、降低建设成本；（3）让网站更容易使用，能适应更多不同用户和更多网路设备；（4）当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于网站用户来说，网站标准就是最佳体验。2.3 DIV+CSS2.3.1 DIV+CSS的概念DIV+CSS是网站标准（或称WEB标准）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。2.3.2 DIV+CSS的使用方法为了让广大的网页设计师认识到CSS的重要，设计师Dav Shea建立了一个名为“CSS禅意花园”（CSS ZenGarden,www.csszengarden）的网站。该网站提供一套标准的HTML页面及CSS文件，然后自行修改CSS定义，以体现不同的设计风格，这些风格各异的页面如果查看HTML文件，访问者会发现其HTML文件是相同的，而如此纷繁复杂的视觉效果，只因为引用了不同的CSS文件。如果想尝试一下不用表格来排版网页，而是用CSS来排版，也就是常听的用DIV来编排网页结构，又或者说想学习网页标准设计，再或者说上司要改变传统的表格排版方式，提高企业竞争力，那么一定会接触到CSS的盒子模式，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，如PDA设备。2.3.3 CSS盒子模型先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充