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