您的位置：首页 > 编程语言

VML编程之------VML语言入门《VML极道教程》原著:沐缘华

2007-05-27 11:31 309 查看

《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网页文件的标准格式
<HTMLxmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office">

<HEAD>

<STYLE>

v/:*{behavior:url(#default#VML);}

o/:*{behavior:url(#default#VML);}

</STYLE>

<TITLE>网页的标题</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

我们可以简写成
<HTMLxmlns:v>

<HEAD>

<METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'>

<Metaname='Gemeratpr'content='网络程序员伴侣(Lshdic)2005'>

<TITLE>网页的标题</TITLE>

<STYLE>

v/:*{behavior:url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

很显然，跟HTML网页的结构很类似，以上标记的意思你可以理解为如下（//符号后是解释）
<HTMLxmlns:v>//关键语句，指明该网页创建一个名为v的XML名域命名空间

<HEAD>//网页声明部分，被<head></head>包围的语句可以是一些网页信息、资源定义语句

<METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'>//说明网页使用的编码,text/html表示该页是HTML网页,gb2312表示网页编码为“简体中文(GB2312)”

<Metaname='Gemeratpr'content='网络程序员伴侣(Lshdic)2005'>//说明网页使用的开发工具

<TITLE>网页的标题</TITLE>

<STYLE>//所包含的内容是CSS样式表的定义语句

v/:*{behavior:url(#default#VML);}//关键语句，指明XML名域“v”引用的数据是VML标记语言

</STYLE>

</HEAD>

<BODY>//网页正文部分

//这里即是网页的正文部分（被<body></body>标记包围），以后我们就是在这里编写各种VML标记（线、圆形、矩形）等。当然也支持在这里编写HTML标记、JS或VBS脚本

</BODY>

</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网页实例
<HTMLxmlns:v>

<HEAD>

<METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'>

<Metaname='Gemeratpr'content='网络程序员伴侣(Lshdic)2005'>

<TITLE>hellovml!!!</TITLE>

<STYLE>

v/:*{behavior:url(#default#VML);}

</STYLE>

</HEAD>

<BODY>

<b>第一个VML实例（2个OVAL圆形，1个roundrect圆矩形）：</b><p>

<v:Ovalfillcolor='red'style='width:100;height:150'/>

<v:ovalstrokecolor=bluestyle="position:absolute;z-index:2;left:300;top:100;width:100;height:150"></v:oval>

<v:ROUndREctFILLCoLOr=greenstrokecolor=bluestyle=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</v:roundrect>

</BODY>

</HTML>

请你务必仔细分析上边的代码，不难看出编写VML标记的高度自由性（大小写、与HTML结合、与CSS结合……）。不但支持传统HTML的2D顺序输出结构（一个对象紧跟一个对象），以及3D输出（通过CSS的样式修改position:absolute;[使对象以3D形式绝对定位]left:350;[定义对象距离页面左边多少像素]top:200;[定义对象距离页面上边多少像素]z-index:3;[定义对象的3D高度]）
6:VML语言入门-最简形式
其实上面的简单实例，不必非要输入那么多的代码，如果只为了测试、运行、学习VML代码，我们最简可以写成以下形式
<HTMLxmlns:v>

<STYLE>v/:*{behavior:url(#default#VML);}</STYLE>

<BODY>

<b>第一个VML实例（2个OVAL圆形，1个roundrect圆矩形）：</b><p>

<v:Ovalfillcolor='red'style='width:100;height:150'/>

<v:ovalstrokecolor=bluestyle="position:absolute;z-index:2;left:300;top:100;width:100;height:150"></v:oval>

<v:ROUndREctFILLCoLOr=greenstrokecolor=bluestyle=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</v:roundrect>

无必要的标签，可以不要，只有需要在一一追加
7:VML语言入门-名域自由命名
你也许会问，只有用“v”做为VML标记的名域么？当然不是，你完全可以使用其他名称，只要名称格式英文、或英文+数字的格式，例如
<HTMLxmlns:fyw>

<STYLE>FYw/:*{behavior:url(#default#VML);}</STYLE>

<BODY>

<b>第一个VML实例（2个OVAL圆形，1个roundrect圆矩形）：</b><p>

<fyw:Ovalfillcolor='red'style='width:100;height:150'/>

<FYW:ovalstrokecolor=bluestyle="position:absolute;z-index:2;left:300;top:100;width:100;height:150"></fyw:oval>

<Fyw:ROUndREctFILLCoLOr=greenstrokecolor=bluestyle=position:absolute;z-index:3;left:350;top:200;width:100;height:150;color:white;font-size:25px;>

包含<b>内容</b>

</fYW:roundrect>

而且同样不区分大小写，不过我仍然建议尽量使用“小写”（打字节省时间），以及名域命名为“v”（好写好记）

《VML极道教程》原著:沐缘华

1章5节:VML标记与通用属性

[code]1:VML标记
VML是通过XML标记来描述矢量图形的，所以必须遵循一定规则，请看下面的几种标记写法
1:图形不包含内容，可以直接使用/>号结束
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:ovalfillcolor='red'style='width:100;height:150'/>

2:或者使用</名域名:标记名>的形式表示VML图形描述标记的结束
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:ovalfillcolor='red'style='width:100;height:150'></v:oval>

2:VML标记通用属性说明
和HTML标记的通用属性（如:id、name、class、title、style）等一样，VML标记也有自己的通用属性、支持HTML的通用属性、支持CSS的样式定义。通过这些属性，我们可以修饰VML图形（如线、圆形）的形状、大小、颜色、内容、边框，以及定义鼠标样式、编程用的ID索引、提示标题等等
3:VML标记特有的通用属性（非HTML、CSS所有）-参考表
VML特有通用属性使用范例：
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:ovalstrokeweight='5'strokecolor='red'fillcolor=yellowstyle='width:100;height:150'></v:oval>

<v:ovalstroked=falsefillcolor=yellowstyle='width:100;height:150'/>

属性名 默认值 值类型/范围 用途
strokeweight 0.75pt=1px number 描述图形的边框粗度
strokecolor black color 描述图形的边框颜色
stroked true boolean 描述图形是否使用边框
fillcolor white color 描述图形的背景颜色
filled true boolean 描述图形是否使用背景
print true boolean 描述图形是否允许被打印机打印
coordsize 1000,1000 Vector2D 暗示图形与容器空间的大小比例
coordorigin 00 Vector2D coordinateattop-leftcornerofelement
wrapcoords null string outlinetousefortighttextwrapping4:VML标记支持的HTML通用属性-参考表
HTML通用属性使用范例：
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:ovalhref='http://www.microsoft.com'title='提示标题'target='_blank'fillcolor=redstyle='width:100;height:150'/>

属性名 默认值 值类型/范围 用途
id null string 定义元素的标识索引(多用于DHTML编程)
class null classname 定义元素使用的CSS样式类
style null CSSstring 描述图形的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通用属性使用范例：
<HTMLxmlns:v><STYLE>v/:*{behavior:url(#default#VML);}</STYLE><BODY>

<v:ovalfillcolor="rgb(255,0,0)"style='position:absolute;left:50;top:150;width:200;height:100;cursor:crosshair;z-index:5000'/>

<v:ovalfillcolor="#0000ff"style='position:absolute;left:150;top:250;width:200;height:100;cursor:move;rotation:60;z-index:2000'/>

<v:rectfillcolor="green"style='position:absolute;left:400;top:150;width:200;height:100;cursor:help;rotation:120;zoom:2.5;color:red'>已经被缩放2.5倍</v:rect>

属性名 可用值/可用值范围 用途
width 0-9999 描述宽度
height 0-9999 描述高度
position staticabsolutefixedrelative 描述如何定位输出
left 0-9999 描述距离页面位置左
top 0-9999 描述距离页面位置上
z-index 0-9999 描述3D位置
cursor autocrosshairhandmovehelpwaittext…… 描述鼠标形状
zoom 0-99 描述缩放比例
clip rect(上右下左) 描述裁剪对象
border 0-99stylecolor 描述边框
display blocknoneinlinelist-item 描述显示或隐藏
overflow visibleautohiddenscroll 描述滚动条
color colorstring 描述文本内容颜色
font-size 0-999 描述文本内容字号
filter xrayflipvfliphinvertalpha(opacity=num) 描述滤镜效果
rotation (0-9999)%360 描述旋转度
flip xy 描述反转或颠倒图形
…… …… ……6:要重视通用属性
以上提及的VML通用属性以及范例，不难发现通用属性的重要性，通用属性也是VML元素属性中最重要的属性、最容易使用的属性。不过这里的“通用”你不要理解为“所有的VML元素都支持”，那是不正确的。像今后我们要学的VML标记line(线)，就不支持fillcolor、filled，因为它是“线短”只有边框、没有背景，所以不支持背景描述。“通用”你可以理解为常用的、绝大多数VML图形均可用的“通用属性”。

[/code]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

属性名	默认值	值类型/范围	用途
strokeweight	0.75pt=1px	number	描述图形的边框粗度
strokecolor	black	color	描述图形的边框颜色
stroked	true	boolean	描述图形是否使用边框
fillcolor	white	color	描述图形的背景颜色
filled	true	boolean	描述图形是否使用背景
print	true	boolean	描述图形是否允许被打印机打印
coordsize	1000,1000	Vector2D	暗示图形与容器空间的大小比例
coordorigin	00	Vector2D	coordinateattop-leftcornerofelement
wrapcoords	null	string	outlinetousefortighttextwrapping

属性名	可用值/可用值范围	用途
width	0-9999	描述宽度
height	0-9999	描述高度
position	staticabsolutefixedrelative	描述如何定位输出
left	0-9999	描述距离页面位置左
top	0-9999	描述距离页面位置上
z-index	0-9999	描述3D位置
cursor	autocrosshairhandmovehelpwaittext……	描述鼠标形状
zoom	0-99	描述缩放比例
clip	rect(上右下左)	描述裁剪对象
border	0-99stylecolor	描述边框
display	blocknoneinlinelist-item	描述显示或隐藏
overflow	visibleautohiddenscroll	描述滚动条
color	colorstring	描述文本内容颜色
font-size	0-999	描述文本内容字号
filter	xrayflipvfliphinvertalpha(opacity=num)	描述滤镜效果
rotation	(0-9999)%360	描述旋转度
flip	xy	描述反转或颠倒图形
……	……	……