CSS样式论文 Web标准化网站设计.doc

山西轻工职业技术学院毕业论文山西轻工职业技术学院毕业论文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语言的iframe语句（镶嵌式页面）完成，所有图片文件均为符合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，参考（/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为标志），并在网站标准组织（）的监督下推广执行。简单说，网站标准的目的就是：（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盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身；边界则说明盒子摆放的时候的注意事项：不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是， CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图：由“盒子”堆出来的网页版面实现结构与表现分离。3标准网站开发环境3.1 网页设计工具3.1.1网页制作工具Dreamweaver CS5Dreamweaver CS5是业界领先的Web开发工具，使用该工具可以高效地设计、开发和维护网站。利用Dreamweaver CS5中的可视化编辑功能，可以快速地创建网页而不需要编写任何代码，这对于网页制作者来说，使工作变得轻松。文本是网页中最基本和最常用的元素，是网页信息传播的重要载体。学会在网页中使用文本和设置文本格式对于网页设计人员来说是至关重要的。3.1.2图像处理工具Fireworks CS5Fireworks CS5是一款用来设计网页图形的应用程序。它所含的创新性解决方案解决了图形设计人员和网站管理人员面临的主要问题。Fireworks中的工具种类齐全，使用这些工作，可以在单个文件中创建和编辑矢量和位图图形。3.1.3动画制作工具Flash CS5Flash是一款非常优秀的动画制作软件，利用它可以制作出丰富多彩的动画，创建网页交互程序，可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的Flash动画。Flash动画节省了文件的大小，提高了网络的传送的速度，大大增强了网站的视觉冲击力，吸引了越来越多的浏览者访问网站。3.2网页开发语言3.2.1静态页与布局HTML、CSS+DIVHTML语言是目前网络上应用最为广泛的网页语言，是构成网页文档的主要语言，也是超文本链接标示语言或超文本标记语言。HTML文本是一种描述性文本，是由HTML命令组成的。HTML命令可以说明图形、表格、声音、动画、文字、链接等。HTML语言的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。DIV+CSS是标准网页（或称它为“WEB标准”）中的常用术语之一，Div+CSS是一种新的网页的布局方法,这一种网页布局方法和传统的HTML网页设计语言中的表格（table）定位方式并不一样,真正地达到了w3c内容与表现相分离。HTML语言在HTML4.01之后，不再发布新版本，因为HTML语言正变得越来越复杂化、专用化。XHTML语言可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用于更多的XML技术，使得网页更加容易扩展，更加适合自动数据交换，并更加规整。在XHTML网站设计标准中，早就不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。3.3.2动态效果实现JSJS就是JavaScript，是一种计算机脚本语言，主要在web浏览器(客户端)解释执行，由网景公司研发。通过 JavaScript 可以做到回应使用者的需求事件而不用任何的网路。来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务器端处理，再传回来的过程，而直接可以被客户端的应用程式所处理。4网站制作Wed的标准化网站设计以设计一个公司网站为例，通过它的制作步骤来说明一个网站如何才能标准化。公司网站是公司形象的体现，其中也包含着整个公司的理念和方向。这种网站的典型特点是简约而不简单，没有过多的颜色修饰，整体风格大气。而且网页上的内容更新频率相对较高，新闻发布和资源下载等都是更新的对象。制作这种类型的网站重点在于整体风格的把握，技巧方面并不需要过于的花哨，选定一种颜色以后尽量围绕着一个色调进行设计。很多时候公司的朝气蓬勃，欣欣向荣也需要在页面上得到体现。4.1设计分析如今，互连网对企业来说已经不再是新鲜的事物，大多数的企业都已经建立了自己的网站。随着互连网的快速发展，网路已成为人们生活的一部分。不仅仅是大企业需要网站来开展电子商务，中小企业一样也迫切需要自己的企业网站用以实现宣传和联系客户等许多传统媒介无法完成的目标。4.1.1 设计流程资料收集阶段主要针对公司网站对各个大型公司网站做了详细的资料收集，借鉴优秀的网站，以学习和提高。4.1.2 设计理念网站整体采用了灰蓝色的主色调，搭配以白色显得更加的突然，页面整体风格简练大方，没有复杂的图形和多于的装饰。（详情见：网站截图）4.2主频道页面设计4.2.1 设计流程主频道页一共十三个，分别是：公司首页、工作团队、项目、市场与投资、员工福利、员工花名册、思想学习、出版物、日程安排、集体活动、友情链接、雁过留声和联系我们。按客户需求每个页面都有独立的风格和设计思路，等于说设计十三个不同的小网站。4.2.1设计理念整体频道页的布局在大的方向上保持一致，每个页面都有一个单一的色系，左右布局色基本风格保持一致，中间主色系各有不同，并在左上角配有各个页面风格一致的图片来体现本页面的内容。4.3英文版设计由于跨国公司的页面必须有英文的界面，因此需要将“英文版”的链接放在页面的最上端。又考虑到单独一个链接不够美观，因此将“新品发布”和“公司员工”这些最吸引人的链接并排与其放置。5. 页面制作实例下面将以公司主页面设计为例详细叙述用DIV+CSS布局页面。5.1审图并制定代码生成方案在页面外观确定下来后，还有一个重要的流程需要完成，那就是审图。就像之前所说的，所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，然后开始审图，仔细的观察仔细的琢磨，甚至于细小到一个一个像素的观察。下图是公司首页面的效果图：通过效果图我们可以看出本页面整体是比较常见的2列布局，可以看出右面为设计元素较多的地方我们可以采用切图方式将整个右面切成一块块的小图，页头带链接的，把每个带链接的文字单独切成小图，以便后期加动态链接。还有一个类似于“找碴游戏”的问题，找出页面类似的地方就可以省略很多代码的编写并且减少文件大小。根据效果图定制了以下页面结构图，希望可以更通俗易懂的表述出页面的布局。#left#main#globallinkdiv id=containerdiv id=globallink /divdiv id=left /divdiv id=main /div/div5.2主要页面设计基本HTML语言这里不做过多介绍，下面介绍下我页面书写HTML代码和CSS的过程。上图中的各个部分直接采用了HTML代码中各个div块对应的id.# globallink块主要包含页面顶端的“英文版本”、“新品发布”和“公司员工”，这块在排版上相对简单。而# left块则包括真正的导航条和网站内容检索。# main块则主要包括人物的图片、新闻快递、公告栏、前沿技术、资源下载以及右端英文刊物等，这两个模块的框架分别如图5.3与图5.4所示。#main#list#letter#banner#hottest#left#navigation#search 图5.3 #left块 图5.4 #main块1.Logo与顶端链接div id=globallink ullia href=#新品发布/a/lilia href=#公司员工/a/lilia href=#英文版/a/li/ulbr/div#globallinkwidth:758px; height:62px;margin:0px 0px 1px 0px;background: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;text-decoration:none;#globallink a:hovercolor:#FFFFFF;text-decoration:underline;2.左侧导航与搜索 #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 solid #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;/* 改变文字颜色 */background:#aacbe0 url(icon2.gif) no-repeat 13px 9px;搜索表单结构代码如下所示。div id=searchform查找: input type=text class=text input type=button value=搜 class=btn/form/div#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 #7591a3;background:transparent;font-size:12px; height:19px;font-family:Arial;padding:0px;3.新闻快递div id=hottesth3a href=#新闻快递：公司股票于昨日在美国纳斯达克上市/a/h3/div#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-decoration:none;#hottest h3 a:hovercolor:#7591a3;text-decoration:underline;4.公司咨询#listfloat:left;margin:20px 0px 4px 0px;width:340px;padding:0px 0px 0px 28px;h4span前沿技术/span/h4p class=date2007.4.1/pul lia href=#清华大学电子工程系牛人做报告，气氛融洽/a/li lia href=#晾衣杆实现高增益、高信噪比波束自动成形天线/a/li/ulp class=morea href=#more/a/p#list h4font-size:12px;background:#e0e7ec url(icon4.gif) no-repeat 7px 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: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;5.英文刊物h4spanEnglish Letter/span/h4p class=date22007.12.7/pp class=content2Auditorium Stage/pp class=more2a href=#more/a/p#letter h4margin:0px;font-size:12px;background:url(right_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 7px;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;#letterfloat:left;width:180px;margin:20px 0px 5px 30px;padding:0px;border-left:1px solid #7591a3;5.3从页头制作谈图片处理下面通过页头制作简单谈谈网页中图片的处理，网页需要美化，肯定会用到其它因素，如图片、影片、FLASH等等，能够合理充分的利用这些因素，可以让网站外观更加美化更加被浏览者所喜爱。这里主要谈图片问题，目前在www页面使用的最多的图片格式是JPEG(*.jpg *.jpeg)格式和GIF(*.gif)格式，两者实际上已经成为HTML规范中要求的标准格式了！现分别介绍一下：GIF(Graphics Interchange Format，图片交换格式)格式，最高支持8位彩色，分为GIF87a和GIF89a两种类型，其中GIF89a支持透明交错动画三个特性！而GIF图片之所以被广泛使用，就是因为这三个特性。透明是指可以给图片指定一种颜色，使其不被显示而成为透明；交错是指在显示图片的过程中可以从概貌逐渐变化到全貌，看上去也就是清晰度的从小变大；动画是指将各幅静态的图片连续显示形成动态画面！JPEG(Joint Photographic Experts Group，联合图片专家组)格式，最大可支持32位彩色。由于存储技术的特别，JPEG格式的图片比较小，并且它还采用了有损图片压缩技术，允许用户以百分比形式选择图片的质量，从而让用户在图片大小和图片质量之间权衡