Dreamweaver easy to make web scrolling bulletin boards

Source: Internet
Author: User
Tags dreamweaver

If you want to display the most recent information, news, notices, announcements, and other long text messages on your Web page without taking up too much space, you can use the scroll report bar.

The scrolling report bar is usually done by using JavaScript technology to control the scrolling of layers in a Web page, but writing JavaScript code for authoring is certainly a complex and difficult task. Use Dreamweaver to provide users with the "Scrollablearea" plug-in can quickly and easily create a scrolling report bar.

Effect description

The user can control the scrolling speed and direction of the report bar text by rolling up and rolling down two buttons on the scroll bar. For the actual effect, please browse the corresponding file under "Source Files" on the CD with the book.

Creative Thinking

Locate the "Scrollablearea" plug-in in the CD-ROM, and then run Macromedia Plug-in Manager to install the plugin. Then open Dreamweaver MX 2004 and click the DHTML AP scrollable area option on the Command menu to start designing the scrolling bulletin board.

Operation Steps

(1) Install the plugin. First find Dreamweaver's "SCROLLABLEAREA.MXP" plug-in in the "source"/"instance 56" directory on the CD-ROM, then run Macromedia's plugin manager "Extension Manager.exe", Mac The Romedia plug-in Manager is automatically installed with the Dreamweaver, usually installed in the Extension Manager folder under the same directory as Dreamweaver.

(2) Select the File menu on the Plugin Manager menu bar for action, as shown in Figure 56-1.

Tip: If the plugin file is already connected to the Macromedia Plugin Manager, then you can automatically double-click the plug-in file to open the Macromedia Plugin Manager installation plugin.

(3) An Installation Protocol window pops up when you click the Install button. Click the Accept button above the Installation Protocol window to complete the installation.

(4) Set up rolling bulletin board. After installing the plug-in, run Dreamweaver MX 2004, open or create a new Web document, as shown in Figure 56-2, figure 56-3, and figure 56-4.

(5) After the operation, basically completed the rolling bulletin board production. When you perform the file/preview in browser/IE browser command in Dreamweaver or click the F12 key on the keyboard to preview the page, an unhealthy display may occur because the unit in the code generated by Scrollablearea does not have the layer position set. This problem can be solved by performing the operations shown in Figure 56-5 and figure 56-6.

(6) After performing the operation shown in Figure 56-6, in Figure 56-5 In the 3rd step shown in, select the "# Divdowncontrol", "# Divcontainer" and "# divcontent" options, and then perform the operations shown in Figure 56-6 separately. You can see the scrolling bulletin board as shown in Figure 56-7 when you test the page with the 4 styles by adding pixel units to each. The

(7) Moves the mouse cursor over "Scroll up" and "Scroll down" to see the middle text scroll up and down. The

Dreamweaver has a wide variety of plug-ins and powerful features. Good at discovering and using Plug-ins, you can make some Dreamweaver the effect of their own.

Note : For more wonderful tutorials, please pay attention to the triple web Design Tutorial section,

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.