Teach you how to use Dreamweaver to make distinctive divider lines

Source: Internet
Author: User
Tags dreamweaver

A page divider can be said to be an indispensable element in a Web page, which is used primarily to separate the content of a Web page or to decorate a Web page.

Effect description

In the middle of the page will appear a beautiful divider line, and can constantly flashing, so that fully reflect the personality of the site, as shown in Figure 32-1.

Creative Thinking

This example uses layers as positioning, then inserts a table in the layer, inserts a picture in the table, and adds a style filter effect to the timeline separately.

Operation Steps

(1) Create a new Web page file, insert a layer into the page, and insert a 1-row 2-column table in the layer, as shown in Figure 32-2.

(2) Set the spacing of the table, and then insert a picture in the cell of the table, as shown in Figure 32-3.

(3) Set the timeline. Pull up the timeline, add the Change property behavior at frame 5th of the timeline, and set the properties of the Layer object, as shown in Figure 32-4.

(4) Adding behavior and changing attributes. Add the behavior separately in the other frames, change the properties as needed, add the 1th frame behavior at frame 40th to the timeline, and then tick the AutoPlay check box, as shown in Figure 32-5.

The following code is described in this diagram:

Glow (color=red, strength=1)

Glow (color=red, strength=2)

Glow (color=red, strength=3)

Glow (color=red, strength=4)

Glow (color=red, strength=3)

Glow (color=red, strength=2)

Glow (color=red, strength=1)

(5) Save the Web page file, and then open the file in the browser, you can see the characteristics of the separator line effect, this example is completed. The divider line is widely used on the Web page, and it is changeable, the reader can think for himself and make a unique dividing line with his own style.

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.