1: getting started with VML-before you officially start learning VML, follow the following rules to achieve the best results and learn the best path. 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: We recommend that you enable lshdic2005, editplus, HTML/VML code editor, or even notepad. 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-writing, saving, and running VML programs: VML is a markup language similar to HTML, and 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 ). VML file storage and running VML programs have previously said that VML is mixed with HTML, CSS, DHTML, JS, and other web design languages, so 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, quickly open the browser and browse, saving time 3: getting started with VML language-basic format of VML web files the following code is the standard format of VML web files <HTML xmlns: 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> webpage title </title>
</Head>
<Body>
</Body>
</Html>
<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, it is similar to the structure of an HTML webpage. You can understand the meaning of the above mark as follows (// is explained after the symbol) <HTML xmlns: V> // key statement, indicates 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: office, it is to reference office-related tag processing extensions (such as skew effects ). 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 formats are free. I have said that VML is similar to HTML, not only in markup language. 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 the VML language-the simplest form is actually the simple example above, so you don't have to enter so much code, to test, run, and learn VML code, you can write the following code in the simplest 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 only need to append the 7: VML language one by one-Get started-Name Domain free naming. you may ask, do you only use "V" 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, for example, <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)
Original VML polar path Tutorial: Mu Yuanhua
Chapter 1 Section 5: VML tags and General Attributes1: VML labels VML describes vector graphics through XML tags, so certain rules must be followed. Please refer to the following markup methods: 1. The image does not contain content, you can use the/> sign to end <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 tag <HTML xmlns: V> <style> V \: * {behavior: URL (# default # VML) ;}</style> <body>
<V: oval fillcolor = 'red' style = 'width: 100; Height: 150 '> </V: oval>
2: The general attributes of VML tags are the same as those 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, as well as defining mouse styles, Id indexes for programming, and prompts for titles. 3. VML tags unique general attributes (not all HTML and CSS attributes)-see the example of special general attributes of table VML: <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. |
| 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:
| 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:
| 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 ".
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
