小论文01杨胜.docx

1、小论文01杨胜Web标准化网页设计杨胜天津市大学软件学院 课组08摘 要 21世纪是信息高速发达的时代，随着信息技术的发展，信息技术使用传递速度突破了时间和地域性的局限，网络化与全球化成为一种不可避免的世界趋势。然而网页制作并不是一个简单的过程，期间要运用好多技术，包括图像设计和处理、网页动画的制作和网页版面的网页布局编辑等。随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。目前使用最多的是较为常用的Dreamweaver、Flash、Fireworks这三个软件，也就是人们俗称的建站“三剑客”，其中Dreamweaver是网页制作的核心。 相对于一个网站页面的标准化，美观化

2、是更为重要的，CSS是最主要的表现标准化的语言。在本论文将通过对网友需求的了解和对其他网站的参考，在网页设计与制作中着重使用CSS+DIV样式布局来标准化美观化网页，最终成功完成一个CSS样式网站。 用一段话来概括网站标准化的作用就是： （1）确保任何网站文档都能够长期有效简化代码、降低建设成本；（2）让网站更容易使用，能适应更多不同用户和更多网路设备的需求；（3）确保所有应用都能够持续准确的执行。关键词 Dreamweaver、CSS、DIV、网页设计、HtmlWeb standardized Web DesignYangShengTianjin Institute Of Software

3、Engineering 08classAbstract With the development of information technology, the transmission speed of information technology has broken through the limitation of time and region. However, web production is not a simple process, to use a lot of technology, including image design and processing, web a

4、nimation and web page layout editing. With the continuous development and improvement of web page making technology, many web pages making and website building software have been produced. At present is the use of the most commonly used Dreamweaver, Flash and Fireworks three software, which is commo

5、nly known as the Three Musketeers website, where Dreamweaver is the core of web page making. Relative to a web page standardization, aesthetics is more important, CSS is the most important performance standardized language. In this paper will be based on the needs of users of the understanding and r

6、eference to other web sites, in web design and production mainly to standardized appearance of web pages using CSS+DIV style layout, the successful completion of a CSS style website. Use a word to summarize the role of Web site standardization is: (1)ensure that any site documentation can effectivel

7、y simplify the code for a long time, reduce construction costs;(2)make web sites easier to use and adapt to the needs of more diverse users and more networked devices;(3) ensure all applications are executed accurately and continuously.Keywords production, Web page design, HTML1.概述1.1 HTML从1993到如今的发

8、展，同时针对其以后的发展进行评测。HTML语言作为网络语言的标准，在计算机的发展史中有着不可或缺的地位。所以在HTML上的成就也决定着一个时代的发展。1.2HTML语言的产生HTML的全称是HypertextMarkupLanguage（超文本标记语言）HTML是用于描述网页文档的标记语言。现在我们常常习惯于用数字来描述HTML的版本例如：HTML5，但是最初的时候我们并没有HTML1,而是1993年IETF团队的一个草案，并不是成型的标准。两年之后，在1995年HTML有了第二版，当时是作为RFC1866发布的。有了以上的两个历史版本，HTML的发展可谓突飞猛进。1996年HTML3.2成为

9、W3C推荐标准。之后在1997年和1999年，作为升级版本的4.0和4.01也相继成为W3C的推荐标准。而在2000年基于HTML4.01的ISO，HTML成为了国际标准化组织和国际电工委员会的标准。于是被沿用至今，这期间虽然有点小的改动但大方向上终归没有什么变化。从1993-2000之间短的7年时间，HTML语言有着很大的发展，基于诸多人的努力，终于产生了我们现在用的HTML语言。1.3层叠样式表从1990年代初HTML被发明开始样式表就以各种形式出现或不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的

10、显示属性，读者来决定网页应该怎样被显示。 但随着HTML的成长，为了满足设计师们的要求，HTML获得了很多显示功能。随着这些功能的增加定义样式的语言越来越没有意义了。1994年哈坤利提出了CSS的最初建议。伯特波斯（Bert Bos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。 当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计 ，混合个人的爱好。 哈坤于199

11、4年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。 1997年初，W3C内部组织了专门管CSS的工作小组，其负责人是克里斯里雷。这个工作组开始讨论第一版中没有涉及到的一些问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。* 1996年W3C正式推出了CSS1。* 1998年W3C正式推出了CSS2。* C

12、SS2.1是W3C现在正在推荐使用的。* CSS3现在还处于开发中。1.4项目介绍本网站是一个可以在线交流、提供顾客服务，以及在线下载的渠道；对开发设计人员而言，本类网站就是使一些功能模块，通过网页的形式将前台和后台结合起来。每一个完整的网站，都要划分为四个组成部分：结构、内容、服务、功能。网站是为了展现企业形象、介绍产品和服务、体现企业发展战略的重要途径板块。本论文着重介绍网站前台页面总设计，总体页面设计以满足网友需求为主要目的，以页面运行速度为首要考虑因素，尽量避免过多的运用图片，使页面大方美观展现企业形象。1.5页面设计规划网站根据网友的需求。初步规划网站为一种风格和色系，其着重体现简约

13、的风格，整体页面选用蓝色，但其又不会显单调，因为主要为网站增加了三种特效，分别是网站背景改变特效（7中背景颜色随意改）鼠标特效（鼠标气泡特效）页面特效（窗口飘洒的雪花），分为LOGO与片头页面栏、导航栏、公告栏、合作伙伴栏、和资源下载等模块，以及下级子界面。2.网站制作前期准备2.1软件的准备在网页的设计过程中，因人而宜，每个人使用的软件也许不同，比如较有名的网站设计软件有Macromedia公司出品的网页设计“三剑客”、 有微软的Frontpage、还有国产的“东方网页王”等等。在这里，我们主要 要说的是Macromedia公司出品的“三剑客”。这“三剑客包括Dreamweaver，Fire

14、works和Flash，其中，Dreamweaver是网页编辑软件，Fireworks是图形/图像处理软件，Flash是矢量动画编辑软件。当然，到今天为止， Macromedia公司出品的这个“三剑客”都已经是2004版，估计最新版也应该很快出，Macromedia公司一向以其优良的设计、友好的用户界面和强大的功能而著称，这三个软件也不例外，是Macromedia公司专门为网页设计、制作开发的系列软件套件，三者之间可以无缝集成，能够有效地解决网络带宽问题，是设计动画网页的最佳工具。Dreamweaver采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力。她成功地将网页设计功能

15、中的技术实现部分和设计部分分离开来，使用户只需专注于设计，而其余的工作由 Dreamweaver自动完成。另外，还有一点值得说明的是，Dreamweaver可以控制和删除冗余代码，减小网页文件的大小。从而能够快速上传和下载。Fireworks的独特之处在于它能够优化、切分图片映射图，并提供了功能强大的翻滚图工具。它是基于WEB应用的图形/图象处理软件，提供了一种革命性的新方法来创建WEB图形，并且具有所有其他图形处理工具的诸多优点。Fireworks的最大优势就在于它在任何时候可以从任何阶段开始设计工作，这样既可以节约时间又可以对产品进行扩展。另外，Fireworks中的诸多功能都是面向WEB

16、应用的，因此对于WEB设计新手来说也很容易学习的。Flash是比较另类、超前的一种网页动画制作软件，它不仅能够满足网页设计的诸多要求，更为网页多媒体的使用者带来了前所未有的便利。Flash提供了广泛的平台支持，它不需要任何编程工作就能够制作出精彩的动态效果 。由于Flash采用矢量图形格式来制作动画， 因此在低宽带的网络环境中仍然可以具有高品质的画面以及存储空间小的优点，从而是浏览者能够快速的下载效果非凡的动画。在我设计我的网站的过程中我选择了Dreamwear和Fireworks和Photoshop三种软件。因为自己相对于其它的软件来说，这三个还算是比较熟悉的。2.2软件的应用在本网站中 我

17、主要应用PS制作了网站的效果图，下面我们来看下PS的界面，认识了解PS：标题栏:标题栏左边显示photoshop的标志和软件名称。右边三个图标分别是最小化、最大化和关闭按钮。图2-1菜单栏:photoshop菜单栏包括文件、编辑、图像等9个菜单。工具属性栏:主要用来显示工具箱中所选用工具的一些延展的选项。选择不同的工具时出现的相应选项也是不同的，具体内容在工具箱介绍中详细讲解。工具箱:对图像的修饰以及绘图等工具，都从工具箱中调用。几乎每种工具都有相应键盘快捷键，工具箱很想画家的画箱。调板窗:用来存放不常用的调板。调板在其中只显示名称，点击后才出现整个调板，这样可以有效利用空间。防止调板过多挤占

18、了图像的空间。浮动调板:用来安放制作需要的各种常用调板,也可以称为浮动面板。这就是PS的工作界面，下面我将用PS制作网站的PSD效果图，在图中我一共建了七个分组（底部组，合作伙伴组，产品分类组，最新动态组，产品公告组，top组，会员中心组）组下又分好多图层，及其单独的背景图层。效果图如下：图2-2图2-32.3Fireworks的应用 网站中主要运用Fireworks进行了网站所需素材的切片，下面我们也来认识下本软件的工作界面：图2-4图2-52.4Dreamweaver的应用Dreamweaver版本具有强大的站点管理功能，内置FTP软件可以直接上传主页；所见即所得的页面编辑方式；支持Sty

19、les Sheet样式表单，创造丰富的页面效果；支持Layer层，并可使用Timeline时间轴制作动态网页；内置Behavior行为，为网页增加交互功能；提供模板和库可以加速页面的生成和制作；支持外部插件，提供无限的扩展能力，如图所示：图2-6图2-7可以看出其具备以下特点：1、灵活的编写方式2、可视化编辑界面3、功能更多的CSS支持CSS可视化设计、CSS检查工具4、动态跨浏览器验证5、强大的WEB站点管理功能6、内建的图形编辑引擎7、Dreamweaver的集成特性8、丰富的媒体支持能力9、超强的扩展能力3.CSS样式建站3.1CSS排版与普通排版的区别 图3-1第一种方法是结构表现相分

20、离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势 ，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人 ，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。3.2 DIV+CSS样式页面布局 DIV+CSS是Web标准中一种新的

21、做网站的布局方式，是一种新的排版理念，完全有别于传统的表格布局排版习惯。 DIV+CSS样式具有比表格更大的优势，它能够实现页面内容和外观样式的分离，可以对相的DIV标记中的ID进行控制，使浏览者更快地浏览网页。采用DIV+CSS样式进行页面布局时，首先应将页面在整体上进行标记分块，然后各个块进行CSS定位，最后再向各个块中添加相应的内容。页面布局的样式是多变的，他可以根据网站的信息划分和排列进行布局划分。采用DIV+CSS样式布局网站时，比较常用的是二分栏和三分栏。下面列出分栏布局页面设计需要注意的几点以供参考：（1）页面尺寸，考虑页面是否需要固定宽度和高度，如果内容超出页面如何显示；页面居

22、中，考虑页面是否要居中显示。（2）整体布局的DIV嵌套关系。除首页外，其他网页中可能用到的可重复元素有Header、Footer和SideBar，经常变换的只有MainBody里的内容，而且页面宽度是固定的，因此要在所有的元素外面做一个外框。而本网站运用了1-2-1布局方式，方式如图所示：图3-2本网站示例代码：.zhong width:1024px; margin:0 auto;top height:73px;background:url(images/bg_1.gif) repeat-x;padding:0 24px;.top_left float:left; margin-top:14p

23、x;.top_nonefloat:none; margin-top:30px;margin-left:50px;margin-right:50px;.top_rightfloat:right; margin-top:14px; margin-right:20px;3.3 CSS样式表3.3.1. 链入外部样式表链入外部样式表是把样式表保存为一样式表文件，然后在页面中用 标记链接到这个样式表文件，这个标记必须放到页面的区内，如下：…上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=stylesheet是指在页面中使用这个外部的样式表type=t

24、ext/css是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型，这些媒体包括：屏幕，纸张，语音合成设备，盲文阅读设备等。一个外部样式表文件可以应用于多个页面。 当你改变这个样式表文件的时候，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：hr color: sienn

25、ap margin-left: 20pxbodybackground-image: url(images/back40.gif)/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/3.3.2. 内部样式表内部样式表是把样式表放到页面的区里，这些定义的样式就应用到页面中了，样式表是用标记插入的，从下例中可以看出标记的用法：hr color: siennap margin-left: 20pxbodybackground-image: url(images/back40.gif)注意：有些低版本的浏览器不能识别style标记，这

26、意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（）隐藏内容而不让它显示：3.4CSS色彩及颜色基础知识这里要介绍的是网页设置颜色包含有哪些；网页颜色规定规范。1、常用颜色地方包含：字体颜色、超链接颜色、网页背景颜色、边框颜色2、颜色规范与颜色规定：网页使用RGB模式颜色网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感（特别是超链接中运用）、美观之用，同时颜色也是各种各样网页的样式表现元素之一,了解CSS 字体颜色。传统的html颜色与w3c标准下的css颜色对比和DI

27、V CSS运用颜色CSS color颜色语法：color:#000000;Css样式中color后直接加RGB颜色值（#FFFFFF 、#000000 、#F00）RGB颜色值在实际布局时候确定，可以使用Photoshop（简称PS）拾取工具进行获取获得。3.5 两种方法设置对象颜色样式 1、在DIV标签内使用color颜色样式2、在CSS选择器中使用color颜色样式CSS代码：.divcss5color:#00F/* 设置对象divcss5内文字为蓝色 */扩展阅读：这里运用了CSS注释对此样式设置说明，了解CSS注释：3、DIV+CSS颜色样式完整案例： Css代码：.divcss5co

28、lor:#00F/*设置对象divcss5内文字为蓝色*/HTML代码：标签内使用colorcss样式红色外部样式表设置对象color颜色蓝色3.6 文字颜色控制一样 传统html和css 文字颜色相同使用“color：”+“RGB颜色取值”即可，如颜色为黑色字即对应设置CSS属性选择器内添加“color:#000;”即可。传统设置背景颜色使用“bgcolor=颜色取值”，而CSS中用background:+颜色取值。例如：设置背景为黑色，传统Html设置，即在标签内加bgcolor=#000即可实现颜色为黑色背景，如果在W3C中即在对应CSS始终选择器中始终加入background:#000

29、实现。传统“border-color=取值”，CSS中“border-color:”+颜色取值。例如：在传统html直接在table标签加入“border color=#000”即可，在现在CSS中设置“border-color:#000;”即可让边框颜色为黑色，同时记得设置中包括宽度和样式（虚线、实现）。DIV+CSS颜色值扩展知识：颜色值是一个关键字或一个数字的RGB规范。3.7 RGB颜色给出了四种方法之一 1、#rrggbb（ 如 ，00cc00） （强烈推荐使用此表示颜色取值）2、#的RGB（ 如 ，0c0）3、RGB（十中，x，x）的x是一个包容性的0和255之间的整数（ 如 的R

30、GB（0,204,0）4、RGB（，），其中 y是一个包容性的数量介于0.0和100.0（ 如 的RGB（0，80，0）本网站色彩示例代码：body color:#687f96; font-size:12px; background-image: url();3.8 CSS盒子模型在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身；边界则说明盒子摆放的时候的注意事项：不能全