VML polar path tutorial (2) getting started with VML

Navigation of this series of articles

VML polar path tutorial (1) Introduction to VML

VML polar path tutorial (2) getting started with VML

VML polar path tutorial (3) Marking practice and line

VML polar path tutorial (4) oval circle rect rectangular

VML polar path tutorial (5) RoundRect circle shape

VML polar path tutorial (6) image

VML polar path tutorial (7) polyline multi-side

VML polar path tutorial (8) shape multiple sides. shapetype template. shape and curve

VML polar path tutorial (9) background of background

VML polar path tutorial (10) group collection container. vmlframe graphic reference

VML polar path tutorial (11) 2-level mark stroke border, shadow

VML polar path tutorial (12) VML programming finale

Getting started with VML

VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 and section 4: getting started with VML

1: getting started with VML-polar Learning
Before I officially start to explain and learn the VML language, follow the following rules to achieve the best results and the best learning method.
(1): If you have studied HTML, CSS, or HTML and CSS, we recommend that you consider the process of learning VML as the same as that of learning HTML, because it is similar.
(2): from this chapter and each chapter after this chapter, I will explain and analyze it in the simplest, easy to understand and effective language. But this is not enough. It is important that you must learn and use it. After all, even if the sword is in the hands of a person who does not use it, it will only spoil the sword. Active Learning and practical use are the key to your practical application and independent development in the future ......
(3) It is recommended that you enable Lshdic2005, Editplus, other HTML/VML code editor, or even notepad when learning. Every time you learn a mark, you must combine the mark of previous learning and the mark of new learning to practice and write different effects, in this way, you can deepen your understanding of the mark, make good use of it in the future, and more importantly, consolidate the previously learned Mark so that you will not learn new or old. Basic IT elites can learn and break down the graphic code drawn by FlashVml3.0, but I personally do not recommend this for 90% of people. Hard work and hard work, VML language skills are the foundation for active learning to use VML ......
(4): How to Be proficient? We recommend that you learn a tag, attribute, statement, and so on. We recommend that you use a keyboard to write it silently (that is, remember it in your mind. If you don't look at the example, you can write the correct tag directly to achieve the desired effect ), it is not difficult if you are willing to work diligently.

2: getting started with VML-how to write, save, and run VML programs
Compiling VML:
VML is a markup language similar to HTML. Its simplest development tool is notepad, A better development tool is the HTML editor (mainly to view the VML effect in the browser in a timely and rapid manner ). I recommend LD5 for Internet programmer companion (Lshdic) 2005. You can search for it at www.GOOGLE.com or www.baidu.com. This software has many auxiliary functions (Dynamic prompt, highlighted syntax, program laying to help input, timely browsing) and other practical functions, especially suitable for editing and development of network programs. However, you are now in the learning stage. Even if you download it, I only recommend that you use its "timely browsing" function (that is, write the VML mark in the encoder, press the F1 key to create your own HTM Browser file and run it in the browser ).
Saving and running VML files
Previously, VML is mixed with HTML, CSS, DHTML, JS, and other web design languages. Therefore, VML files are actually an HTML file. For example, if you have written vmlcode in your notebook, you can directly upload the xxx.htmor xxx.html file to any place on the computer's hard disk, and then double-click it to open it. Then you can see the Running Effect in the browser. If you use LD5 or other HTML editing tools, you can write VML statements directly in the core encoder, and then use the "Run view in Browser" function provided by the software, quick browser browsing, saving time

3: getting started with VML-Basic VML webpage File Format
The following code uses the standard format of VML web page files:

<HTML xmlns: v = "urn: schemas-microsoft-com: vml" xmlns: o = "urn: schemas-microsoft-com: office">
<HEAD>
<STYLE>
V/: * {behavior: url (# default # VML );}
O/: * {behavior: url (# default # VML );}
</STYLE>
<TITLE> webpage TITLE </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

We can abbreviated it

<HTML xmlns: v>
<HEAD>
<META http-equiv = 'content-type' Content = 'text/html; charset = gb2312 '>
<Meta name = 'gemeratpr' content = 'network programmer companion (Lshdic) 123456'>
<TITLE> webpage TITLE </TITLE>
<STYLE>
V/: * {behavior: url (# default # VML );}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Obviously, the structure of the HTML webpage is similar. You can understand the meaning of the above mark as follows (// The post-symbol is an explanation)

<HTML xmlns: v> // key statement, indicating that the webpage creates an XML namespace named v.
<HEAD> // web page declaration section. Statements surrounded by <Meta http-equiv = 'content-type' content = 'text/html; charset = gb2312 '> // describes the encoding used by the webpage, text/html indicates that the page is an HTML webpage, and gb2312 indicates that the webpage is encoded as "simplified Chinese (gb2312 )"
<Meta name = 'gemeratpr' content = 'network programmer companion (lshdic) 000000'> // describes the development tools used on the webpage.
<Title> webpage title </title>
<Style> // The content is the Definition Statement of the CSS style sheet.
V/: * {behavior: URL (# default # VML);} // key statement, indicating that the data referenced by the XML domain "v" is a VML Markup Language
</Style>
</Head>
<Body> // webpage body
// This is the body of the web page (surrounded by <body> </body> tags). In the future, we will compile various VML tags (line, circle, and rectangle) here. Of course, you can also compile HTML tags, JS scripts, or vbs scripts here.
</BODY>
</HTML> // concluding remarks on the webpage

For xmlns: o = "urn: schemas-microsoft-com: office", the domain name is to reference the tag processing extension related to office (such as skew effect ). But I don't think learning it makes too much sense (it is mainly used to modify vml graphics, but most of the modifiers I see are designed for office art, it is meaningless or even ineffective on Web pages. I like it very much, but it is inferior to vml filling and stereo processing ), because vml itself is quite sound. So I won't tell you the mark about it, But let you fully master vml!

4: getting started with VML-VML web page file format flexibility
As I said, the VML language is very similar to HTML, not only indicates that they are all Markup languages. More importantly, VML statements are case insensitive and attributes can be value = parameter value, value = 'parameter value', or value = "parameter value ". It feels quite free to write. After you are proficient in VML, you will edit webpages like VML and HTML!

5: getting started with VML-the first VML web page instance

<HTML xmlns: v>
<HEAD>
<META http-equiv = 'content-type' Content = 'text/html; charset = gb2312 '>
<Meta name = 'gemeratpr' content = 'network programmer companion (Lshdic) 123456'>
<TITLE> hello vml !!! </TITLE>
<STYLE>
V/: * {behavior: url (# default # VML );}
</STYLE>
</HEAD>
<BODY>
<B> first VML instance (two OVAL circles and one roundrect circle): </B> <p>
<V: Oval fillcolor = 'red' style = 'width: 100; height: 150 '/>
<V: oval strokecolor = blue style = "position: absolute; z-index: 2; left: 300; top: 100; width: 100; height: 150 "> </v: oval>
<V: ROUndREct FILLCoLOr = green strokecolor = blue style = position: absolute; z-index: 3; left: 350; top: 200; width: 100; height: 150; color: white; font-size: 25px;>
Contains <B> content </B>
</V: roundrect>
</BODY>
</HTML>

Make sure you carefully analyze the above Code. It is not difficult to see the high degree of freedom for compiling VML labels (Case sensitivity, combination with HTML, and combination with CSS ......). It not only supports the 2D sequence output structure of traditional HTML (one object follows one object), but also 3D output (change position: absolute through CSS style; [absolute positioning of objects in 3D form] left: 350; [How many pixels are defined between objects on the left of the page] top: 200; [How many pixels are defined between objects on the top of the page] z-index: 3; [Define the 3D height of an object])
6: getting started with VML-simplest form
In fact, the above simple examples do not have to input so much code. If you only want to test, run, and learn VML code, we can write it in the following form:

<HTML xmlns: v>
<STYLE> v/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<B> first VML instance (two OVAL circles and one roundrect circle): </B> <p>
<V: Oval fillcolor = 'red' style = 'width: 100; height: 150 '/>
<V: oval strokecolor = blue style = "position: absolute; z-index: 2; left: 300; top: 100; width: 100; height: 150 "> </v: oval>
<V: ROUndREct FILLCoLOr = green strokecolor = blue style = position: absolute; z-index: 3; left: 350; top: 200; width: 100; height: 150; color: white; font-size: 25px;>
Contains <B> content </B>
</V: roundrect>

No tags are required. You can only append tags one by one.

7: getting started with VML-free naming of domain names
You may ask, is it true that only "v" is used as the name domain marked by VML? Of course not. You can use other names, as long as the name format is English, or English + number format, such

<HTML xmlns: fyw>
<STYLE> FYw/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<B> first VML instance (two OVAL circles and one roundrect circle): </B> <p>
<Fyw: Oval fillcolor = 'red' style = 'width: 100; height: 150 '/>
<FYW: oval strokecolor = blue style = "position: absolute; z-index: 2; left: 300; top: 100; width: 100; height: 150 "> </fyw: oval>
<Fyw: ROUndREct FILLCoLOr = green strokecolor = blue style = position: absolute; z-index: 3; left: 350; top: 200; width: 100; height: 150; color: white; font-size: 25px;>
Contains <B> content </B>
</FYW: roundrect>

It is also case insensitive, but I still recommend that you use "lower case" (save time in typing) and name the domain "v" (easy to remember)

 

VML polar path tutorialOriginal: Mu Yuanhua
Chapter 1 Section 5: VML tags and General Attributes

1: VML mark
VML uses XML tags to describe vector graphics. Therefore, you must follow certain rules. See the following mark writing methods.
1: The image does not contain content. You can use the "/>" sign to end the image.

<HTML xmlns: v>
<STYLE> v/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<V: oval fillcolor = 'red' style = 'width: 100; height: 150 '/>

2: You can also use </Name Domain Name: Tag Name> to indicate the end Of the VML graphic description mark.

<HTML xmlns: v>
<STYLE> v/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<V: oval fillcolor = 'red' style = 'width: 100; height: 150 '> </v: oval>

2: VML tag General Attributes
Like common attributes of HTML tags (such as id, name, class, title, and style, VML labels also have their own general attributes, support HTML general attributes, and support CSS style definitions. With these attributes, we can modify the shape, size, color, content, and border of a VML image (such as a line or circle), define the mouse style, ID index for programming, and prompt title.

3: VML tag-reference table
Examples of common VML attributes:

<HTML xmlns: v>
<STYLE> v/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<V: oval strokeweight = '5' strokecolor = 'red' fillcolor = yellow style = 'width: 100; height: 100'> </v: oval>
<V: oval stroked = false fillcolor = yellow style = 'width: 100; height: 150 '/>

Attribute name	Default Value	Value Type/range	Purpose
Strokeweight	0.75pt = 1px	Number	Describe the Border width of the image
Strokecolor	Black	Color	Border color of the Description Image
Stroked	True	Boolean	Describe whether a graphic uses a border
Fillcolor	White	Color	Specifies the background color of the image.
Filled	True	Boolean	Specifies whether the image background is used.
Print	True	Boolean	Specifies whether a graphic can be printed by a printer.
Coordsize	1000,1000	Vector2D	The ratio of the image size to the container space.
Coordorigin	0 0	Vector2D	Coordinate at top-left corner of element
Wrapcoords	Null	String	Outline to use for tight text wrapping

4: HTML common attributes supported by VML tags-reference table
Examples of common HTML attributes:

<HTML xmlns: v>
<STYLE> v/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<V: oval href = 'HTTP: // www.microsoft.com 'title = 'heading 'target =' _ blank 'fillcolor = red style = 'width: 100; height: 150 '/>

Attribute name	Default Value	Value Type/range	Purpose
Id	Null	String	Define the identity index of an element (mostly used for DHTML programming)
Class	Null	Classname	Defines the CSS style class used by the element
Style	Null	CSS string	CSS style sheets describing graphics
Title	Null	String	Define the title of the graphic prompt (the help prompt after the mouse is near)
Href	Null	String	Define the URL of the Graphic Link
Target	_ Self	_ Self/_ blank/_ top	Define the form in which a graph opens a link
ContentEditable	False	Boolean	Specifies whether the graphic content can be edited.
Dir	Ltr	Ltr/rtl	Specifies the direction in which the graphic content is output.
Disabled	False	Boolean	Description graphics can respond to user event triggers

5: Common CSS attributes supported by VML tags-reference table
In fact, VML elements support almost all CSS style definitions, while some HTML elements do not support rotation and rotation styles, but VML does. Because there are too many CSS 2 style attributes, I will not write them out here. I will only mention some common and useful style tags. To learn more about CSS, open LD5 or download a CSS manual compiled by Su Xiaoyu. The content is professional and comprehensive.
Examples of common CSS attributes:

<HTML xmlns: v>
<STYLE> v/: * {behavior: url (# default # VML);} </STYLE>
<BODY>
<V: oval fillcolor = "rgb (255, 0, 0)" style = 'position: absolute; left: 50; top: 150; width: 200; height: 100; cursor: crosshair; z-index: 5000 '/>
<V: oval fillcolor = "# 0000ff" style = 'position: absolute; left: 150; top: 250; width: 200; height: 100; cursor: move; rotation: 60; z-index: 2000 '/>
<V: rect fillcolor = "green" style = 'position: absolute; left: 400; top: 150; width: 200; height: 100; cursor: help; rotation: 120; zoom: 2.5; color: red'> scaled 2.5 times </v: rect>

 

Attribute name	Available value/available value range	Purpose
Width	0-9999	Description width
Height	0-9999	Description height
Position	Static absolute fixed relative	Describe how to locate the output
Left	0-9999	Description left distance from the page location
Top	0-9999	Description distance from the page location
Z-index	0-9999	3D location description
Cursor	Auto crosshair hand move help wait text ......	Describe the Mouse shape
Zoom	0-99	Scale description
Clip	Rect (top right bottom left)	Description cropping object
Border	0-99 style color	Description border
Display	Block none inline list-item	Show or hide descriptions
Overflow	Visible auto hidden scroll	Description scroll bar
Color	Colorstring	Description text content color
Font-size	0-999	Description text font size
Filter	Xray flipv fliph invert alpha (opacity = num)	Filter effect description
Rotation	(0-9999) % 360	Describe the degree of Rotation
Flip	X Y	Reverse or reverse description
......	......	......

6: Pay attention to General Attributes
The general attributes and examples mentioned above are not difficult to find the importance of general attributes. General attributes are also the most important and easy to use attributes in VML element attributes. However, the "general" here should not be understood as "all VML elements are supported", which is incorrect. As we will learn to mark line (line) in VML in the future, fillcolor and filled are not supported, because it is a "short line" with only borders and no background, so it does not support background description. "General" can be understood as the "general attributes" that can be used by most common VML images ".

Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/27/761416.html