Introduction
Overview
History
Advice
Books
Tutorials
Shapes
Summary
rect
roundrect
line
polyline
curve
arc
oval
image
shape
Special Topics
group
shapetype
positioning
animation
stylesheets
Community
Web Sites
Mailing Lists
USENET
Vendors
News
|
Most of use are not gifted artists, but that doesn't stop us from wanting our sites to look as interesting as possible. To make it easy on us, VML proves 8 different pre-defined shapes that can easily be added to you web page. I have a separate page for each of the eight, but I thought you might like to see all of them (and the code the makes them) at one time. Plus, I've provided a summary of all VML element and attributes (a reference for you as you get more into VML).
Before You StartBefore you can use VML within MSIE, there are two lines of code which must be added to your web page. First, the normal <HTML> tag should be replaced with the following:
<html xmlns:v="urn:schemas-microsoft-com:vml">
Also, the following line must be placed in the <HEAD> section of the web page:
<style> v\:* { behavior: url(#default#VML); }</style >
These two tags enable MSIE to recognize and render VML tags, such as the simple rectangle VML tags we've seen so far. With these two lines entered, the core HTML code will look like:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style> v\:* { behavior: url(#default#VML); }</style >
</head>
<body>
</body>
</html>
Pre-Defined ShapesVML supports a total of eight (8) pre-defined shapes. Here's a sample of each, along with the VML tag required to create the shape. Remember that if you want to create an entirely new shape, use the shape element.
Rectangle: <v:rect style="width:100;height:100" fillcolor="red" strokecolor="blue"/>
Rectangle (rounded):
<v:roundrect style="width:100;height:100" arcsize="0.3" fillcolor="blue" _
strokecolor="red"/>
Line:
<v:line style="width:100;height:100" from="0,0" to="100,100" _
strokecolor="red" strokeweight="4pt"/>
Polyline:
<v:polyline style="width:100;height:100" points="0,60,50,90,60,10,100,100" _
strokecolor="blue" strokeweight="1pt"/>
Curve: <v:curve style="width:100;height:100" from="0,0" control1="30,90" _ control2="80,10" to="100,0" strokecolor="red" strokeweight="3pt"/>
Arc:
<v:arc style="width:100;height:100" startangle="0" endangle="120" _
strokecolor="blue" strokeweight="2pt"/>
Oval (circle):
<v:oval style="width:100;height:100" fillcolor="red" strokecolor="blue" _
strokeweight="1pt"/>
Oval:
<v:oval style="width:100;height:50" fillcolor="blue" strokecolor="red" _
strokeweight="3pt"/>
Element & Attribute Summary-- this section is in revision: 30 May 2004 -- Yes, I know, we haven't discussed everything in this table yet, but I wanted to put it right near the top of this page so you'll see it and can refer to it as you try to put together the various pieces of VML. Feel free to skip this section and return to it when you feel the need to get a summary view of how the elements and attributes fit together. First, here's a listing of all the elements supported by VML. The supported attributes of each element are listed in the next table. The core elements define various shapes, either custom or pre-defined. Sub-elements are designed to be used within a core element to modify its characteristics. The Other element category is not so easily described in a single statement. Take a look at the definition of each element in this category to understand its function.
The supported attributes of each VML element are listed in the next table.
The shape element is the most complex of all elements. The list of attributes given for it in the table above were only some of the most commonly used attributes. The following tables provides the complete list of attributes for a shape element.
A definition of all VML attributes is given in the following table.
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
