Use Dreamweaver to easily achieve a Web page transition effect

Source: Internet
Author: User
dreamweaver| Web page

Web pages often have some sort of refreshing effect like animations, such as scrolling, hundred-page windows, and so on. Such a Web page will look more dynamic, but should also pay attention to enough, otherwise too fancy changes will easily arouse the viewers disgust.

  Effect Description: Create two pages, and set up a hyperlink between two pages, when you click the hyperlink, that is, the form of animation into another page, we can see the dynamic transition between pages.

  Creative Thinking : Open the Dreamweaver MX 2004 software, create a new two page, and then set up a corresponding hyperlink and insert a picture, perform the insert => HTML => header label => Meta command, open The META dialog box, enter the parameters, and finally save the file to complete the production.

Operation Steps

(1) Open the Dreamweaver MX 2004 software to create a new two basic HTML file. To insert a picture without prompting for a relative path, you can first save the page as "test1.htm" and "test2.htm."

(2) Add a hyperlink and insert a picture. Add the word "web transition" to the page and set the hyperlink to link to the "test2.htm" page, and then insert a picture to make the page transition effect clearer.

(3) then perform the same operation on the "test2.htm" file, but the hyperlink URL for the text is "test1.htm".

(4) Insert the code in the test1.htm file. The following will implement the web transition effect and insert the META code into the page, as shown in Figures 1 and 2.

Hint: the Revealtrans (duration=4,transition=2) that is added in Figure 2, duration=4 code is the parameter of the Web page transition effect.

(5) The same operation is performed on the "test2.htm" file against the above procedure, but the input is "Revealtrans (duration=4, transition=7), duration= 4".

(6) Save the file, complete the special effects production.

Implementation of the Web page transition effect, you can increase the dynamic of the page, but it also has drawbacks, will slow down the browsing speed, so should be appropriate to use.

  Hint: special effects have 24 kinds of choice, as long as the Transition value to the corresponding effect code can be, the specific effects and settings as shown in the following table:

Effect Content Transitionv
Box-like contraction Revealtrans 0
Box-shaped unfold Revealtrans 1
Circular contraction Revealtrans 2
Circular expansion Revealtrans 3
Erase up Revealtrans 4
Erase down Revealtrans 5
In addition to erase Revealtrans 6
Erase right Revealtrans 7
Vertical Hundred-page window Revealtrans 8
Horizontal hundred page window Revealtrans 9
Cross-board Revealtrans 10
Vertical chessboard Type Revealtrans 11
Dissolved Revealtrans 12
Shrink left to center Revealtrans 13
Middle to right and left unfold Revealtrans 14
Shrink up and down to the middle Revealtrans 15
Middle to top and bottom expand Revealtrans 16
Ladder-shaped to the left bottom unfold Revealtrans 17
Ladder-shaped to the left Revealtrans 18
Ladder-shaped to the right bottom unfold Revealtrans 19
Ladder-shaped to the right to unfold Revealtrans 20
Random Horizontal line Revealtrans 21st
Random Vertical Line Revealtrans 22
Random Revealtrans 23



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.