《基于HTML5Canvas的画图板设计与实现.doc》由会员分享，可在线阅读，更多相关《基于HTML5Canvas的画图板设计与实现.doc（50页珍藏版）》请在三一办公上搜索。
1、 摘 要 Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。而作为下一代互联网标准，HTML5自然也是备受期待和瞩目。HTML5是近十年来Web开发标准巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。现阶段对于HTML5技术的研发和开发工作主要集中在技术草案的确立与新互联网应用的开发上，而随着互联网的发展，HTML标准也在不断变化，HTML标准已经走过第4代了，因为它能够用简单的标签元素，代替属性能实现之前需要用很多复杂JavaScr
2、ipt代码才能有实现的功能，HTML5越来越受到欢迎。 HTML5带来很多令人激动的新特性，这在之前的HTML中是不可见到的。其中一个最值得提及的特性就是用于绘画的 HTML Canvas，可以对2D或位图进行动态、脚本的渲染。本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的CSS3技术，最后再次总结了这次毕设的经验和对未来的展望。 本文针对其引入的C
3、anvas绘图元素进行了深入的研究，此元素可以替代画图作为动画渲染的工具，效率与安全性更高，开发更便捷，必将是以后的动画，游戏等应用首选的开发方式，前景非常好。【关键词】Web2.0 HTML5 CSS3 CanvasABSTRACTWeb2.0 brings a wealth of Internet technology for all to enjoy the fun of technology development and experience progress. As a next-generation Internet standard, HTML5 is naturally hi
4、ghly 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, video, audio, image, animation, and i
5、nteraction 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 Internet, HTML standard has gone through fo
6、ur 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 the previous HTML. One of the most wo
7、rth 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, the Canvas can be achieved, based on
8、 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 complete set up experience and vision for
9、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 other application development method o
10、f choice , the outlook is very good.【Key words】WEB2.0 HTML5 CSS3 Canvas目 录前 言1第一章 关于HTML5和画图板2第一节 HTML5简介2第二节 HTML5特性2第三节 HTML5国内外发展现状3第四节 画图工具4第二章 相关技术简介5第一节 Canvas元素简介5第二节 第一个Canvas程序的实现5第三节 JavaScript及jQuery简介7第四节 CSS3简介9第五节 开发工具DreamWeaver介绍12第六节 调试工具Firefox及Firebug简介13第三章 功能设计16第一节 需求设计16第二节 基本
11、原理17第三节 布局及界面设计19第四节 JavaScript设计20第四章 功能的实现21第一节 简单功能的实现21第二节 前台显示实现24第三节 JavaScript画图实现25第四节 最终效果32第五节 不足之处38第五章 结束语39致 谢40参考文献41附 录42前 言随着互联网时代的高速发展，上网早已经成为人民日常生活中一个必不可少的部分，人们可以在网络上获取信息，甚至于在网络上完成日常的正常生活。看新闻，看电视，订餐等等。HTML的上个版本早在1999年制定，随着21世纪网络的不断发展，已经不能适应当前的需求，于是HTML5营运而生了。HTML5是HTML下一个的主要修订版本，以期
12、能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，现仍处于发展阶段。它希望能够减少浏览器对丰富性网络应用服务的插件的需要，并且提供更多能有效增强网络应用的标准集。HTML5的出现再次告诉我们，我们的生活，日常办公，越来越有可能全在网页端实现了。如今很多人喜欢在电脑上绘图，画图版作为一个日常的生活工具，如今也能在我们网页端实现了。HTML5一个很有用实用的特性是用于绘画的Canvas元素，Canvas拥有许多绘制功能如画笔、矩形、圆形、字符以及图像处理的方法，他为人们在网页绘图及图像处理带来了方便。第一章 关于HTML5和画图板第一节 HTML5简介HTML标准自1999年12月发
13、布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组，WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。HTML5 草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出
14、，于2007年被W3C接纳，并成立了新的 HTML 工作团队。HTML5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览
15、器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。HTML5提供了一些新的元素和属性，例如（网站导航块）和。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。第二节 HTML5特性一、取消了一些过时的HTML4标记其中包括纯粹显示效果的标记，如和，它们已经被CSS取代。新的HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些
16、功能时一般都是使用DIV。二、将内容和展示分离b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。三、一些全新的表单输入对象包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。四、全新的，更合理的Tag多媒体
17、对象将不再全部绑定在object或 embed Tag 中，而是视频有视频的Tag，音频有音频的Tag。五、本地数据库这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。六、Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。七、浏览器中的真正程序将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。 第三节 HTML5国内外发展现状国内市场支持HTML5标
18、准的浏览器已经从2010年的不到2%发展到2012年超过三成的比例，2013年这一比例将有望突破突破70%。越来越多PC浏览器开始重视并且支持HTML5发展的同时，HTML5也越来越受到移动互联网的重视。相对于 PC 平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比 PC 更快，硬件支持和浏览器的状况都要比 PC平台的状况更好。移动平台上主流的 5 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0
19、、Firefox for Android 15.0)，目前对标准的支持度均高于 60%。其中表现居首的是 Chrome for Android，而支持度相对较低的 Android 系统自带的浏览器 Android Browser 对 HTML5 的支持度也在 60%以上。此外，硬件加速促进了HTML5标准的发展和应用。在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chro
20、me 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。国内的有360 安全浏览器、搜狗浏览器以及QQ 浏览器。手机系统情况也比较乐观，主流的智能手机系统 iOS、Android 以及 Windows Phone 上的原生浏览器都已经支持硬件加速。Android 4.0+上的 Chrome在硬件加速方面更是超越了原生浏览器的表现。2012 年 12 月 17日，W3C 发布了 HTML5 以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。在2013年，支持 HTML5 的 PC 浏览器将会有一个较大的增长。 除Chr
21、ome、Firefox 之外，微软推出的 IE9、IE10 对HTML5 的支持度都大幅提升，相信 HTML5 大面积使用只是时间问题。此外，移动平台的HTML5比PC平台发展的更快。由于移动设备的更新换代速达远远超过PC，而且硬件性能也能够完全支持HTML5。许多大公司在HTML5 Canvas开发上下足了功夫， 2013年或成为HTML5更普及的一年。 第四节 画图工具画图板简单灵巧，深得广大用户的喜爱，其占用资源少、操作简单、功能等特点为用户的小型图形开发工作带来了很多便利。当用户要处理一些要求不是很高的工作时，可以利用画图的工具来完成，比如实现一些简单的操作如画直线，图片，图片图片等功
22、能。用过微软Windows操作系统的人一定都对Windows自带的画图板非常的熟悉。同图像处理软件界的“大哥大”Photoshop比起来，它虽然不及Photoshop的功能强大、内容丰富，但是作为Windows一直以来都内带的附件程序，它具有小巧玲珑、简单实用等其它绘图软件所不具备的优点。同时它的风格也被许多其它绘图软件所效仿。Windows 画图程序一直伴随着 Windows 各个版本，这个很简单，几乎没有什么用处的程序拥有最基本的绘图功能，很适合用来涂鸦。HTML5 的 Canvas 对象使在线绘图成为可能，虽然 HTML5 还远未成熟，但很多人已经迫不及待地用它设计一些让人惊叹的应用。第
23、二章 相关技术简介第一节 Canvas元素简介Canvas元素最先由苹果公司的Safari浏览器引入，后来Chrome和Firefox也都支持了这一元素，目前该元素已被加入HTML5标准的草案，并且得到了所有主流浏览器的支持。HTML5 的 Canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。向 HTML5 页面添加 Canvas 元素并规定元素的 ID、宽度和高度：这样就可创建Canvas元素。第二节 第一个Canvas程序的实现HTML5 Canvas Demoback
24、这个 Canvas 的宽度和高度均为 400 像素，边框为黄色，背景为蓝色。Canvas 上没有任何实际绘图。绘图通过属于 Canvas 的 JavaScript 方法完成。下面我们介绍下Canvas的方法：表2.1 Canvas方法介绍方法用途getContext(contextId)公开在 Canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。height设置 Canvas 的高度。默认值是 150 像素。width设置 Canvas 的宽度。默认值是 300 像素。createLinearGradient(x1,y1,x2,y2)创建一个线性渐变。起始坐标
25、为 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=
26、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);cxt.fil
27、lStyle=#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的对象。下面的两行代码绘制一个红色的矩形：cxt.fillStyle=#FF0000;cxt.fillRect (0, 0, 150, 75);fillSt
28、yle 方法将方块染成了红色，fillRect 则方法规定了形状、位置和尺寸。相类似的就可以通过浏览器提供的基础方法，构建出激动人心的应用。 第三节 JavaScript及jQuery简介JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证
29、的基本功能。由于AJAX的出现，JavaScript的功能被越来越多的丰富，能做的事情也越来越多，是Web2.0时代的象征。一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库(压缩后
30、只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义id即可。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网
31、站中，有超过55%在使用jQuery。jQuery包含以下特点： 动态特效； 异步的AJAX； 通过插件来扩展； 方便的工具 - 例如浏览器版本判断； 渐进增强； 链式调用； 多浏览器支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+；jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下：目前的版本是1.9.0（截止2013年1
32、月）。最常使用的jQuery基础方法是.ready()方法：$(document).ready (function () /script goes here);或者其简写：$(function () /script goes here);当DOM加载完就可以执行（比window.onload更早），在同一个页面里可以多次出现.ready()。实例：为元素添加单击事件，发生对象隐藏效果。 $(document).ready (function () $(p).click (function () $(this).hide (); );); If you click on me, I will d
33、isappear. 结果：隐藏页面内的标签。选择器：jQuery 使用 sizzle引擎，支持CSS选取，Xpath选取等方式。以下列举了几个特征：$(p) 选取全部 元素；$(p.intro) 选取所有包含class为intro的 元素；$(#demo) 选取 id为demo 的元素；$(href) 选取所有带有 href 属性的元素；$(href=#) 选取所有带有 href 值等于 # 的元素；$(href!=#) 选取所有带有 href 值不等于 # 的元素；$(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素；$(href=/imgaes/) 选取所有 href
34、 值以 /imgaes/ 开头的元素；更多详细信息请参见jQuery API的Selectors部分。事件处理：直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。$(#button).click (function () /script goes here);用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2版本开始支持。$(#button).onclick (function ()/script goes here);在1.7.1或更早版本，需要用bind/unbind（常规绑定），live/die（预绑定）来替代
35、on/off。更多详细信息请参见jQuery API的Events部分。动态特效：$(#msg).show (fast);$(#msg).hide (slow);$(#msg).fadeIn ();$(#msg).fadeOut ();以上代码实现一个ID为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。更多详细信息请参见jQuery API的Effects部分。 第四节 CSS3简介 CSS即层叠样式表（Cascading Stylesheet）。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它
36、效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3带来无与伦比的页面表现能力，而这些在以前只能靠图片，多层的标签嵌套或者JS才能实现，现在只需要几行CSS3就能实现，效率也比原来要高很多。一、布局Grid布局应用很广泛，最简单的例子就是内容的分栏显
37、示。对于这个布局复杂的三栏网页来说，如果使用CSS3Grid布局的话，我们只需这样写：body columns:3;column-gap:0.5in;img float:pagetopright;width:3gr;其中，body部分声明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。只需这样两行CSS，就可以实现这个复杂布局。 二、边框border-color：控制边框颜色，并且有了更大的灵活性，可以产生渐变效果；border-image：控制边框图象；border-corner-image：控制边框边角的图象；border-radiu
38、s：能产生类似圆角矩形的效果；三、背景background-origin：决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content；border：控制背景起始于左上角的边框；padding：控制背景起始于左上角的留白；content：控制背景起始于左上角的内容；background-clip：决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding；border：会覆盖住背景；padding：不会覆盖背景；background-size：可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及bac
39、kground-origin的位置决定；multiple backgrounds：多重背景图象，可以把不同背景图象只放到一个块元素里。四、 特性 圆角表格，对应属性：border-radius。 以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。 丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-unde
40、rline-color，text-underline-mode，text-underline-position。 在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。五、颜色HSL colors：除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如HSL（0,100%, 50%）。HSLA colors：加了个不透明度（Apacity），用0到1之间
41、的数来表示，比如hsla（0,100%,50%,0.2）。Opacity：直接控制不透明度，用0到1之间的数来表示。RGBA colors：和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。实现这样的效果非常简单，设置颜色的时候我们使用标准的RGBA（）单位即可，例如RGBA（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。经过测试Firefox3.0、Safari3.2、O
42、pera10都支持了RGBA单位。Resize：可以由用户自己调整DIV的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。六、文字效果text-shadow：文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。text-overflow：当文字溢出时，用“”提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个
43、单词，对中文意义不大，inherit可以继承父级元素。七、选择器CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如：nth-child()等。Attribute selectors：在属性中可以加入通配符，包括,$,*等；att=val：表示开始字符是val的att属性； att$=val：表示结束字符是val的att属性；att*=val：表示包含至少有一个val的att属性。其它模块：media queries：感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页；multi-colu
44、mn 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将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。 第五节 开发工具DreamWeaver介绍DreamWeaver是
