1、 I摘 要Web2.0 带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。而作为下一代互联网标准，HTML5 自然也是备受期待和瞩目。HTML5 是近十年来 Web 开发标准巨大的飞跃。和以前的版本不同，HTML5 并非仅仅用来表示 Web 内容，它的新使命是将Web 带入一个成熟的应用平台，在 HTML5 平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。现阶段对于 HTML5 技术的研发和开发工作主要集中在技术草案的确立与新互联网应用的开发上，而随着互联网的发展，HTML 标准也在不断变化，HTML 标准已经走过第 4 代了，因为它能够用简单的标签元素，代替属性能实
2、现之前需要用很多复杂JavaScript 代码才能有实现的功能，HTML5 越来越受到欢迎。 HTML5 带来很多令人激动的新特性，这在之前的 HTML 中是不可见到的。其中一个最值得提及的特性就是用于绘画的 HTML Canvas，可以对 2D 或位图进行动态、脚本的渲染。本文详细分析了 HTML5 技术的简介和发展前景，并深入探讨了 HTML5 引入的核心标签Canvas 元素，介绍了 Canvas 可以实现的主要功能，在此基础上实现了部分类似 Windows 画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的 CSS3
3、技术，最后再次总结了这次毕设的经验和对未来的展望。本文针对其引入的 Canvas 绘图元素进行了深入的研究，此元素可以替代画图作为动画渲染的工具，效率与安全性更高，开发更便捷，必将是以后的动画，游戏等应用首选的开发方式，前景非常好。【关键词】Web2.0 HTML5 CSS3 CanvasIIABSTRACTWeb2.0 brings a wealth of Internet technology for all to enjoy the fun of technology development and experience progress. As a next-generation In
4、ternet standard, HTML5 is naturally highly anticipated and attention. HTML5 is a huge leap over the past decade Web development standards. Unlike the previous version,HTML5 is not just used to represent Web content, its new mission is the Web into a full-fledged application platform, HTML5 platform,
5、 video, audio, image, animation, and interaction with the computer be standardized. At this stage for the HTML5 technology and development work focused on the establishment of the draft technology and new Internet application development, HTML standards are changing with the development of the Inter
6、net, HTML standard has gone through four generations, because it simple label elements, instead of before the property can be realized with a lot of complex JavaScript code in order to achieve the functions, HTML5 has been more popular.HTML5 brings a lot of exciting new features. This is not seen in
7、 the previous HTML. One of the most worth mentioning the characteristics is HTML Canvas for painting, 2D or bitmap rendering of dynamic script. I detailed analysis the HTML5 technology introduction and development prospects, a deeper look into the core of the introduction of HTML5 tag Canvas element
8、, the Canvas can be achieved, based on the a similar Windows drawing board, including pencil, stamp imitation, draw a straight line, circle, rectangle, eraser, background image, take a swatch in the realization of the process also takes advantage of the latest CSS3 techniques and, finally, this comp
9、lete set up experience and vision for the future.This paper introduces the Canvas drawing elements which conducted research, this element can replace the drawing as a tool for animation rendering, higher efficiency and security, the development of more convenient, be the future animation, games and
10、other application development method of choice , the outlook is very good.【Key words】WEB2.0 HTML5 CSS3 CanvasIII目 录前 言 1第一章 关于 HTML5 和画图板 .2第一节 HTML5 简介 2第二节 HTML5 特性 2第三节 HTML5 国内外发展现状 3第四节 画图工具 4第二章 相关技术简介 5第一节 Canvas 元素简介 .5第二节 第一个 Canvas 程序的实现 5第三节 JavaScript 及 jQuery 简介 .7第四节 CSS3 简介 .9第五节 开发工具
11、 DreamWeaver 介绍 .12第六节 调试工具 Firefox 及 Firebug 简介 .13第三章 功能设计 .16第一节 需求设计 .16第二节 基本原理 .17第三节 布局及界面设计 19第四节 JavaScript 设计 20第四章 功能的实现 .21第一节 简单功能的实现 21第二节 前台显示实现 24第三节 JavaScript 画图实现 .25第四节 最终效果 .32第五节 不足之处 .38第五章 结束语 39致 谢 40参考文献 .41附 录 42- 1 -前 言随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于
12、在网络上完成日常的正常生活。看新闻，看电视，订餐等等。HTML 的上个版本早在 1999 年制定，随着 21 世纪网络的不断发展，已经不能适应当前的需求，于是 HTML5 营运而生了。HTML5 是 HTML 下一个的主要修订版本，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，现仍处于发展阶段。它希望能够减少浏览器对丰富性网络应用服务的插件的需要，并且提供更多能有效增强网络应用的标准集。HTML5 的出现再次告诉我们，我们的生活，日常办公，越来越有可能全在网页端实现了。如今很多人喜欢在电脑上绘图，画图版作为一个日常的生活工具，如今也能在我们网页端实现了。HTML5 一个很
13、有用实用的特性是用于绘画的 Canvas 元素，Canvas 拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法，他为人们在网页绘图及图像处理带来了方便。- 2 -第一章 关于 HTML5 和画图板第一节 HTML5 简介HTML 标准自 1999 年 12 月发布的 HTML4.01 后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组，WHATWG） 的组织。WHATWG 致力于 Web
14、表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。HTML5 草案的前身名为 Web Applications 1.0，于 2004 年被 WHATWG 提出，于 2007年被 W3C 接纳，并成立了新的 HTML 工作团队。HTML5 的第一份正式草案已于 2008 年 1 月 22 日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。2012 年 12 月 17 日，万维网联盟（W3C）正式宣布凝结了大量网络工作者
15、心血的HTML5 规范已经正式定稿。根据 W3C 的发言稿称： “HTML5 是开放的 Web 网络平台的奠基石。 ”支持 HTML5 的浏览器包括 Firefox（火狐浏览器） ，IE9 及其更高版本，Chrome（谷歌浏览器） ，Safari，Opera 等；国内的傲游浏览器（Maxthon ） ，以及基于 IE 所推出的 360 浏览器、搜狗浏览器、QQ 浏览器、猎豹浏览器等国产浏览器同样具备支持 HTML5 的能力。HTML5 提供了一些新的元素和属性，例如（网站导航块）和 。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新
16、的功能，如和标记。第二节 HTML5 特性一、取消了一些过时的 HTML4 标记其中包括纯粹显示效果的标记，如和，它们已经被 CSS 取代。新的 HTML5 吸取了 XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的 HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用 DIV。- 3 -二、将内容和展示分离b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，
17、center ，strike 这些标签则被完全去掉了。三、一些全新的表单输入对象包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义 Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。四、全新的，更合理的 Tag多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的 Tag，音频有音频的 Tag。五、本地数据库这个功能将内嵌一个本地的 SQL 数据库，以加速交互式搜索，缓存
18、以及索引功能。同时，那些离线 Web 程序也将因此获益匪浅。不需要插件的富动画。六、Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离 Flash 和Silverlight，直接在浏览器中显示图形或动画。七、浏览器中的真正程序将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用 CSS。第三节 HTML5 国内外发展现状国内市场支持 HTML5 标准的浏览器已经从 2010 年的不到 2%发展到 2012 年超过三成的比例，2013 年这一比例将有望突破突破 70%。越来越多 PC 浏览器开始重视并且支持- 4 -
19、HTML5 发展的同时，HTML5 也越来越受到移动互联网的重视。相对于 PC 平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比 PC 更快，硬件支持和浏览器的状况都要比 PC 平台的状况更好。移动平台上主流的 5 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0)，目前对标准的支持度均高于 60%。其中表现居首的是 Chrome for Andr
20、oid，而支持度相对较低的 Android 系统自带的浏览器 Android Browser 对 HTML5 的支持度也在 60%以上。此外，硬件加速促进了 HTML5 标准的发展和应用。在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有： Chrome 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。国内的有 360 安全浏览器、搜狗浏览
21、器以及 QQ 浏览器。手机系统情况也比较乐观，主流的智能手机系统 iOS、Android 以及 Windows Phone 上的原生浏览器都已经支持硬件加速。Android 4.0+上的 Chrome 在硬件加速方面更是超越了原生浏览器的表现。2012 年 12 月 17 日，W3C 发布了 HTML5 以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。在 2013 年，支持 HTML5 的 PC 浏览器将会有一个较大的增长。 除 Chrome、Firefox 之外，微软推出的 IE9、IE10 对 HTML5 的支持度都大幅提升，相信 HTML5 大
22、面积使用只是时间问题。此外，移动平台的 HTML5 比PC 平台发展的更快。由于移动设备的更新换代速达远远超过 PC，而且硬件性能也能够完全支持 HTML5。许多大公司在 HTML5 Canvas 开发上下足了功夫， 2013 年或成为 HTML5 更普及的一年。第四节 画图工具画图板简单灵巧，深得广大用户的喜爱，其占用资源少、操作简单、功能等特点为用户的小型图形开发工作带来了很多便利。当用户要处理一些要求不是很高的工作时，可以利用画图的工具来完成，比如实现一些简单的操作如画直线，图片，图片图片等功能。用过微软 Windows 操作系统的人一定都对 Windows 自带的画图板非常的熟悉。同图
23、像处理软件界的“大哥大”Photoshop 比起来，它虽然不及 Photoshop 的功能强大、内容丰富，但是作为 Windows 一直以来都内带的附件程序，它具有小巧玲珑、简单实用等其它绘图软件所不具备的优点。同时它的风格也被许多其它绘图软件所效仿。- 5 -Windows 画图程序一直伴随着 Windows 各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。HTML5 的 Canvas 对象使在线绘图成为可能，虽然 HTML5 还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。- 6 -第二章 相关技术简介第一节 Canvas 元素简介Canva
24、s 元素最先由苹果公司的 Safari 浏览器引入，后来 Chrome 和 Firefox 也都支持了这一元素，目前该元素已被加入 HTML5 标准的草案，并且得到了所有主流浏览器的支持。HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。向 HTML5 页面添加 Canvas 元素并规定元素的 ID、宽度和高度：这样就可创建 Canvas 元素。第二节 第一个 Canvas 程序的实现HTML5 Canvas Demoback这个 Canvas 的宽度和高
25、度均为 400 像素，边框为黄色，背景为蓝色。Canvas 上没有任何实际绘图。绘图通过属于 Canvas 的 JavaScript 方法完成。- 7 -下面我们介绍下 Canvas 的方法：表 2.1 Canvas 方法介绍方法 用途getContext(contextId) 公开在 Canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。height 设置 Canvas 的高度。默认值是 150 像素。width 设置 Canvas 的宽度。默认值是 300 像素。createLinearGradient(x1,y1,x2,y2)创建一个线性渐变。起始坐标为
26、x1,y1，结束坐标为 x2,y2。createRadialGradient(x1,y1,r1,x2,y2,r2)创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。addColorStop(offset,color)向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。fillStyle 设置用于填充一个区域的颜色在这里就例如说，fillStyle=rgb(255,0,0).strokeStyle 设置用于绘制一根直线的颜色在这里就例如说，fillStyle=
27、rgb(255,0,0).fillRect(x,y,w,h) 填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。strokeRect(x,y,w,h) 绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。moveTo(x,y) 将绘图位置移动到坐标 x,y。lineTo(x,y) 从绘图方法结束的最后位置到 x,y 绘制一条直线。Canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：var c=document.getElementById(“mycanvas“);var cxt=c.getContext(“2d“);
28、cxt.fillStyle=“#FF0000“;cxt.fillRect (0, 0, 150, 75);JavaScript 使用 ID 来寻找 Canvas 元素：var c=document.getElementById(“mycanvas“);然后，创建 context 对象：var cxt=c.getContext(“2d“);getContext(“2d“) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法，目前还没有 3d 的对象。- 8 -下面的两行代码绘制一个红色的矩形：cxt.fillStyle=“#FF0000“;cxt.fillRec
29、t (0, 0, 150, 75);fillStyle 方法将方块染成了红色，fillRect 则方法规定了形状、位置和尺寸。相类似的就可以通过浏览器提供的基础方法，构建出激动人心的应用。第三节 JavaScript 及 jQuery 简介JavaScript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如 Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有 28.8kbps，验证步骤浪费的时间太多。于是 Netscape
30、 的浏览器 Navigator 加入了 JavaScript，提供了数据验证的基本功能。由于 AJAX 的出现，JavaScript 的功能被越来越多的丰富，能做的事情也越来越多，是 Web2.0 时代的象征。一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ ECMAScript） 、文档对象模型（Document Object Model，简称 DOM） 、浏览器对象模型（Browser Object Model，简称 BOM） 。JavaScript 的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。j
31、Query 是继 prototype 之后又一个优秀的 JavaScript 框架。它是轻量级的 JS 库(压缩后只有 21k) ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） 。jQuery 使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 HTML 页面保持代码和 HTML 内容分离，也就是说，不用再在 HT
32、ML 里面插入一堆 JS 来调用命令了，只需定义 id 即可。如今，jQuery 已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。jQuery 包含以下特点： 动态特效； 异步的 AJAX； 通过插件来扩展； 方便的工具 - 例如浏览器版本判断； 渐进增强； 链式调用；- 9 - 多浏览器支持 Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、 Chrome1.0+；jQuery 库是一个单独的 JavaScript 文件，可以保存到本地或者服务器直接引用，也可以从
33、多个公共服务器中选择引用。有 Media Temple、Google 、Microsoft 等多家公司给 jQuery提供 CDN 服务，比较常用的引用地址如下：目前的版本是 1.9.0（截止 2013 年 1 月）。最常使用的 jQuery 基础方法是 .ready()方法：$(document).ready (function () /script goes here);或者其简写：$(function () /script goes here);当 DOM 加载完就可以执行（比 window.onload 更早），在同一个页面里可以多次出现.ready()。实例：为元素添加单击事件，发生
34、对象隐藏效果。$(document).ready (function () $(“p“).click (function () $(this).hide ();););If you click on me, I will disappear.结果：隐藏页面内的标签。- 10 -选择器：jQuery 使用 sizzle 引擎，支持 CSS 选取，Xpath 选取等方式。以下列举了几个特征：$(“p“) 选取全部 元素；$(“p.intro“) 选取所有包含 class 为“intro“的 元素；$(“#demo“) 选取 id 为“demo“ 的元素；$(“href“) 选取所有带有 href
35、属性的元素；$(“href=#“) 选取所有带有 href 值等于 “#“ 的元素；$(“href!=#“) 选取所有带有 href 值不等于 “#“ 的元素；$(“href$=.jpg“) 选取所有 href 值以 “.jpg“ 结尾的元素；$(“href=/imgaes/“) 选取所有 href 值以 /imgaes/“ 开头的元素；更多详细信息请参见 jQuery API 的 Selectors 部分。事件处理：直接绑定指定事件，事件类型即方法名，支持 click、focus、blur、submit 等。$(“#button“).click (function () /script go
36、es here);用 on 来绑定事件，off 来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2 版本开始支持。$(“#button“).onclick (function ()/script goes here);在 1.7.1 或更早版本，需要用 bind/unbind（常规绑定） ，live/die （预绑定）来替代on/off。更多详细信息请参见 jQuery API 的 Events 部分。动态特效：$(“#msg“).show (“fast“);$(“#msg“).hide (“slow“);$(“#msg“).fadeIn ();$(“#msg“).fadeOut
37、 ();以上代码实现一个 ID 为 Msg 的 jQuery 对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为 MS。更多详细信息请参见 jQuery API 的 Effects 部分。第四节 CSS3 简介- 11 -CSS 即层叠样式表（Cascading Stylesheet） 。 在网页制作时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3 是 CSS 技术的升级版本， CSS3 语言开发是朝着模
38、块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3 带来无与伦比的页面表现能力，而这些在以前只能靠图片，多层的标签嵌套或者JS 才能实现，现在只需要几行 CSS3 就能实现，效率也比原来要高很多。一、布局Grid 布局应用很广泛，最简单的例子就是内容的分栏显示。对于这个布局复杂的三栏网页来说，如果使用 CSS3Grid 布局的话，我们只需这样写：body columns:3;column-gap:0.5in;img flo
39、at:pagetopright;width:3gr;其中，body 部分声明页面为 3 栏，栏间距为 0.5 英寸；img 中 float 属性指明图片浮动位置为页面的右上角，而宽度为 3 个栏宽。只需这样两行 CSS，就可以实现这个复杂布局。二、边框border-color：控制边框颜色，并且有了更大的灵活性，可以产生渐变效果；border-image：控制边框图象；border-corner-image：控制边框边角的图象；border-radius：能产生类似圆角矩形的效果；三、背景background-origin：决定了背景在盒模型中的初始位置，提供了 3 个值，border, pa
40、dding和 content；border：控制背景起始于左上角的边框；padding：控制背景起始于左上角的留白；content：控制背景起始于左上角的内容；background-clip：决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和 padding；border：会覆盖住背景；padding：不会覆盖背景；background-size：可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小- 12 -会由所在区域的宽度、高度，以及 background-origin 的位置决定；multiple backgrounds：多重背景图象，可以把不同背景图象只放到
41、一个块元素里。4、特性 圆角表格，对应属性：border-radius 。 以往对网页上的文字加特效只能用 filter 这个属性，这次 CSS3 中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。 丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。 （还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position
42、。 在文字下点几个点或打个圈以示重点，CSS3 也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style 和 font-emphasize-position。五、颜色HSL colors：除了支持 RGB 颜色外，还支持 HSL（色相、饱和度、亮度）。以前一般都是作图的时候用 HSL 色谱，但这样一来会包括更多的颜色。 H 用度表示，S 和 L 用百分比表示，比如 HSL（0,100%, 50%）。HSLA colors：加了个不透明度（Apacity），用 0 到 1 之间的数来表示，比如hsla（0,100%,50%,0.2）。Opacity：
43、直接控制不透明度，用 0 到 1 之间的数来表示。RGBA colors：和 HSLA colors 类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用 alpha 后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到 RGBA 颜色的出现这一切将成为现实。实现这样的效果非常简单，设置颜色的时候我们使用标准的 RGBA（）单位即可，例如RGBA（255,0,0,0.4）这样就出现了一个红色同时拥有 alpha 透明为 0.4 的颜色。经过测试Firefox3.0、Safari3.2、Opera10 都支持了 RGBA 单位。Re
44、size：可以由用户自己调整 DIV 的大小，有 horizontal（水平）vertical （垂直）或者both（同时），或者同时调整。如果再加上 max-width 或 min-width 的话还可以防止破坏布局。六、文字效果text-shadow：文字投影，可能是因为 MAC OSX 的 Safari 浏览器开始支持投影才特意增加的。text-overflow：当文字溢出时，用 “”提示。包括 ellipsis、clip、ellipsis- 13 -word、 inherit，前两个 CSS2 就有了，目前还是部分支持，但有趣的是 IE6 居然也支持。ellipsis-word 可以省
45、略掉最后一个单词，对中文意义不大，inherit 可以继承父级元素。七、选择器CSS3 增加了更多的 CSS 选择器，可以实现更简单但是更强大的功能，比如： nth-child()等。Attribute selectors：在属性中可以加入通配符，包括,$,*等；att=val：表示开始字符是 val 的 att 属性； att$=val：表示结束字符是 val 的 att 属性；att*=val：表示包含至少有一个 val 的 att 属性。其它模块：media queries：感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备比如可以为某一块分别设置屏幕浏览样式和手机浏览样式
46、，以前则只能设置整个网页；multi-column layout：多列布局，让文字以多列显示，包括 column-width、column-count、column-gap 三个值；column-width：指定每列宽度；column-count：指定列数；column-gap：指定每列之间的间距；column-rule-color：控制列间的颜色；column-rule-style：控制列间的样式；column-rule-width：控制列间的宽度；column-space-distribution：平均分配列间距。八、影响CSS3 将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作
47、。网络浏览器也还将继续支持 CSS2。CSS3 主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变） ，而且可以很简单的设计出现在的设计效果（比如说使用分栏） 。第五节 开发工具 DreamWeaver 介绍DreamWeaver 是个原本由 Macromedia 公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有 HTML 编辑的功能。它现在有 Mac 和 Windows 系统的版本。随Macromedia 被 Adobe 收购后，Adobe 也开始计划开发 Linux 版本的 Dreamweaver 了。 - 14 -Dreamweaver 自
48、 MX 版本开始，使用了 Opera 的排版引擎 “Presto“ 作为网页预览。Dreamweaver 可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver 能与您喜爱的设计工具，如Playback Flash，Shockwave 和外挂模组等搭配，不需离开 Dreamweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使 Dreamweaver 自动开启 Firework 或 Photosh
49、op 来进行编辑与设定图档的最佳化。Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含 HomeSite 和 BBEdit 等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给 Third-party 厂商，包含 ASP， Apache，BroadVision ， Cold Fusion，iCAT， Tango 与自行发展的应用软体。当您正使用 Dreamweaver 在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和 XML Dreamweaver 将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小
