GOLIVE5.0 Tutorials (58)

Source: Internet
Author: User
Tutorial

5.3Creating animations

You can create animations by applying a floating box (floating Boxes) in GoLive 5. The floating box is very similar to the layer in Dreamweaver 3/4 and is based on the HTML DIV element, because HTML 3.2 and HTML 4.0 enhance the functionality of the DIV element, so that GoLive 5 can apply it well, and allows the placement and stack to accept background images or background colors. And because Div is the core element of DHTML (dynamic) HTML, and the major building Blocks (the main building block) where CSS is placed, you can use a floating box to place any object on a Web page and create transparency and animation and layering effects. When you need it, you can also convert it to a text box. Technically, the floating box is exactly the visual representation of the DIV element, usually formatted by the CSS ID style, and the ID style specifies its width and controls visibility and absolute position, and golive 5 can also create standard HTML code for a detail.

The GoLive 5 DHTML Animation Tool creates a full scale animation that maximizes the visual effects of Web pages, with the highlighted features listed below.

1. Support various web browsers

At present, the domestic popular web browser can support and display a floating box, but the earlier web browser has some problems, but this does not affect the Web page design and use it. Because the situation is not going to last long, the Web browser and the HTML in any one of the slightly improved functionality can eliminate all obstacles.

2. Tiering is a key feature

In fact, floating boxes overlap in layers or in Web pages, which control the order of overlap by attributes named (z-index). Z represents the z-coordinate system, and a floating box with a higher Z-index value is displayed in front of the floating box with a lower z-index value.

3. Make the animation effect easily

As a stand-alone unit in a Web page, a floating box can accept any HTML element, such as an image or simply format HTML text. You can also have the same background image and properties as the Web page, and you can display opacity and transparency in the background. With this feature, you can create a variety of fascinating animation effects on a Web page.

GoLive 5 allows you to add a floating box anywhere in the current Web page. Once you have created a floating box, you can apply all of the available HTML elements to it. including text, images, rulers, and so on can be freely inserted in the floating box. You can create DHTML animations based on images, text, and any other objects placed in a floating box, using the main tools including TimeLine Editor, floating boxes, and inspector,timeline Editor to control where the floating boxes are moved, The Inspector controls the initial position of the move. For example, the following action applies text and images.

Step one, from the Objects panel, drag the floating box icon to the point in Figure 8 where the gesture refers?


Figure 8 Drag the Floating box icon here

When you finish dragging, a floating box will appear in the specified place, and GoLive 5 will also place a small yellow icon in the upper left of the floating box and mark as SB. This icon is useful in designing and making a Web page that, in addition to identifying the existence of the floating box, can be used to select the one that is currently being manipulated when multiple floating boxes exist.

At the end of the operation, the Z-index value of the floating box is 0 and appears in the lower-right corner of the floating box.

Step two, click somewhere inside the floating box, and let it appear white. At this point, the Z-index value becomes 1, and the current insertion point cursor is displayed in the upper-left corner of the floating box, overlapping with the border line, and then you can enter text or insert an image.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.