VML极道教程(一) VML介绍
VML极道教程(二) VML入门
VML极道教程(三) 标记实战与line线
VML极道教程(四) oval圆rect矩型
VML极道教程(五) RoundRect圆矩型
VML极道教程(六) image图片
VML极道教程(七) polyline多边型
VML极道教程(八) shape多边型.shapetype模版.shape与curve曲线
VML极道教程(九) background背景
VML极道教程(十) group集合容器.vmlframe图形引用
VML极道教程(十一) 2级标记stroke边框,shadow阴影
VML极道教程(十二) VML编程大结局
《VML极道教程》 原著:沐缘华
1章4节:VML语言入门
1:VML语言入门 - 极道学法
在我正式开始讲解、你正式开始学习VML语言以前,请务必遵循以下规则,可以达到最佳效果、极道学习方法。
(1):如果你学过HTML、CSS或精通HTML、CSS,那么建议你把学VML的过程看做跟学HTML的过程是一样的,因为,根本就是大同小异。
(2):从本章节和本章节以后的每一个章节,我会使用最简单、易懂、有效的语言讲解和分析。但这是不够的,重要的是,你一定要活学活用。毕竟就算是神剑,如果握在不会用它的人手中,只会糟蹋了这把剑。活学活用是你未来实战应用、独立开发的关键……
(3):建议学习时,开启Lshdic2005、或Editplus、或其他HTML/VML代码编辑器、甚至是记事本。每学会一个标记,就要综合以前学的标记、新学的标记,练习、写出不同的效果,如此才能加深你对该标记的理解、以后会很好的使用、更重要的是巩固以前所学的标记不至于学新忘旧。有基底的IT精英,可以边学、边分解FlashVml3.0所绘制图型的代码,但对于90%的人,我个人不推荐这么做。勤学勤练、VML语言功底是活学活用VML之基础……
(4):如何达到精通?建议每学一个标记、属性、语句等,以后建议能用键盘默写出来(即记在脑子里,不看例子,能直接写出正确的标记、实现自己需要的效果),只要你肯勤学勤练,这并不困难。
2:VML语言入门 - 如何编写、保存、运行VML程序
VML的编写:
VML是一种类似HTML的标记语言,它最简单的开发工具其实就是记事本,好点的开发工具就是HTML编辑器(主要能够适时、迅速的在浏览器浏览VML效果)。我比较推荐“网络程序员伴侣(Lshdic)2005”简称LD5,你可以在www.GOOGLE.com或www.baidu.com中搜索找到它的下载地址。这个软件有很多辅助功能(动态提示、语法加亮、编程铺助输入、适时浏览)等实用功能,特别适合进行网络程序的编辑和开发。不过你现在是学习阶段,就算下载了它,我只建议你只用它的“适时浏览”功能(即在编码器内写完VML标记,按下F1键即能自己创建HTM浏览文件,在浏览器运行,比较剩时剩力)。
VML文件的保存、运行VML程序
以前说过,VML是跟HTML、CSS、DHTML、JS等等网页设计语言搀杂在一起的,所以VML文件其实就是一个HTML文件。比如你用记事本写完了VML代码,你可以直接另存为xxx.htm或xxx.html文件放在电脑硬盘的任一个地方,然后找到它双击打开,就会在浏览器中看到运行效果。你如果用LD5或其他HTML编辑工具,则直接在其核心编码器内写好VML语句,然后通过该软件提供的“在浏览器运行查看”功能,迅速的打开浏览器浏览,比较节省时间
3:VML语言入门 - VML网页文件的基本格式
以下代码是VML网页文件的标准格式
我们可以简写成
很显然,跟HTML网页的结构很类似,以上标记的意思你可以理解为如下(//符号后是解释)
而至于xmlns:o="urn:schemas-microsoft-com:office:office"名域命名,则是引用office相关的标记处理扩展(例如歪斜效果等)。但我觉得学习它没有太高的意义(它主要为了修饰vml图形,但那些修饰标记的大多数我看起来根本是为office艺术设计的,在WEB页中没有意义、甚至不起作用,就个歪斜效果我还比较喜欢,但跟vml的填充、立体等效果处理则相形见拙),因为就vml本身而言以相当健全了。所以我不会讲述有关它的标记,而是让你充分精通vml!
4:VML语言入门 - VML网页文件格式的自由性
我说过,VML语言跟HTML很类似,不仅指的他们都是标记语言。更重要的是VML语句同样不区分大小写、属性可以是 value=参数值 或 value='参数值' 或 value="参数值"。编写起来感觉相当自由,精通了VML以后,你会不分VML、HTML般的编辑网页!
5:VML语言入门 - 第一个VML网页实例
请你务必仔细分析上边的代码,不难看出编写VML标记的高度自由性(大小写、与HTML结合、与CSS结合……)。不但支持传统HTML的2D顺序输出结构(一个对象紧跟一个对象),以及3D输出(通过CSS的样式修改position:absolute;[使对象以3D形式绝对定位]left:350;[定义对象距离页面左边多少像素]top:200;[定义对象距离页面上边多少像素]z-index:3;[定义对象的3D高度])
6:VML语言入门 - 最简形式
其实上面的简单实例,不必非要输入那么多的代码,如果只为了测试、运行、学习VML代码,我们最简可以写成以下形式
无必要的标签,可以不要,只有需要在一一追加
7:VML语言入门 - 名域自由命名
你也许会问,只有用“v”做为VML标记的名域么?当然不是,你完全可以使用其他名称,只要名称格式英文、或英文+数字的格式,例如
而且同样不区分大小写,不过我仍然建议尽量使用“小写”(打字节省时间),以及名域命名为“v”(好写好记)
1:VML标记
VML是通过XML标记来描述矢量图形的,所以必须遵循一定规则,请看下面的几种标记写法
1:图形不包含内容,可以直接使用/>号结束
2:或者使用</名域名:标记名>的形式表示VML图形描述标记的结束
2:VML标记通用属性说明
和HTML标记的通用属性(如:id、name、class、title、style)等一样,VML标记也有自己的通用属性、支持HTML的通用属性、支持CSS的样式定义。通过这些属性,我们可以修饰VML图形(如线、圆形)的形状、大小、颜色、内容、边框,以及定义鼠标样式、编程用的ID索引、提示标题等等
3:VML标记特有的通用属性(非HTML、CSS所有) - 参考表
VML特有通用属性使用范例:
属性名 | 默认值 | 值类型/范围 | 用途 |
strokeweight | 0.75pt=1px | number | 描述图形的边框粗度 |
strokecolor | black | color | 描述图形的边框颜色 |
stroked | true | boolean | 描述图形是否使用边框 |
fillcolor | white | color | 描述图形的背景颜色 |
filled | true | boolean | 描述图形是否使用背景 |
true | boolean | 描述图形是否允许被打印机打印 | |
coordsize | 1000,1000 | Vector2D | 暗示图形与容器空间的大小比例 |
coordorigin | 0 0 | Vector2D | coordinate at top-left corner of element |
wrapcoords | null | string | outline to use for tight text wrapping |
4:VML标记支持的HTML通用属性 - 参考表
HTML通用属性使用范例:
属性名 | 默认值 | 值类型/范围 | 用途 |
id | null | string | 定义元素的标识索引(多用于DHTML编程) |
class | null | classname | 定义元素使用的CSS样式类 |
style | null | CSS string | 描述图形的CSS样式表 |
title | null | string | 定义图形的提示标题(鼠标靠近后的帮助提示) |
href | null | string | 定义图形链接的URL地址 |
target | _self | _self/_blank/_top | 定义图形以何种形式打开链接 |
contentEditable | false | boolean | 描述图形内容是否允许用户编辑 |
dir | ltr | ltr/rtl | 描述图形内容以哪种方向输出 |
disabled | false | boolean | 描述图形能够响应用户事件触发 |
5:VML标记支持的CSS通用属性 - 参考表
其实,VML元素几乎支持所有CSS样式定义,有些HTML元素不支持的像(rotation,旋转样式),VML却支持。由于CSS2样式属性太多,这里不一一写出了,只提及一些常用、好用的样式标记。如需要了解更多有关CSS的资料,请打开LD5、或下载一本由苏小雨编著的CSS手册,内容较专业、全面。
CSS通用属性使用范例:
属性名 | 可用值/可用值范围 | 用途 |
width | 0-9999 | 描述宽度 |
height | 0-9999 | 描述高度 |
position | static absolute fixed relative | 描述如何定位输出 |
left | 0-9999 | 描述距离页面位置左 |
top | 0-9999 | 描述距离页面位置上 |
z-index | 0-9999 | 描述3D位置 |
cursor | auto crosshair hand move help wait text…… | 描述鼠标形状 |
zoom | 0-99 | 描述缩放比例 |
clip | rect(上 右 下 左) | 描述裁剪对象 |
border | 0-99 style color | 描述边框 |
display | block none inline list-item | 描述显示或隐藏 |
overflow | visible auto hidden scroll | 描述滚动条 |
color | colorstring | 描述文本内容颜色 |
font-size | 0-999 | 描述文本内容字号 |
filter | xray flipv fliph invert alpha(opacity=num) | 描述滤镜效果 |
rotation | (0-9999)%360 | 描述旋转度 |
flip | x y | 描述反转或颠倒图形 |
…… | …… | …… |
6:要重视通用属性
以上提及的VML通用属性以及范例,不难发现通用属性的重要性,通用属性也是VML元素属性中最重要的属性、最容易使用的属性。不过这里的“通用”你不要理解为“所有的VML元素都支持”,那是不正确的。像今后我们要学的VML标记line(线),就不支持fillcolor、filled,因为它是“线短”只有边框、没有背景,所以不支持背景描述。“通用”你可以理解为常用的、绝大多数VML图形均可用的“通用属性”。
博文来源:http://www.cnblogs.com/GeneralXU/archive/2007/05/27/761416.html