Dreamweaver MX 2004 starting from zero (3) (PHOTOS)

Source: Internet
Author: User
Tags split window dreamweaver
Dreamweaver building Web pages with frames

After we log in to some forums, we can see the name of each discussion area on the left, and click on any discussion area to see the contents of the discussion area in the right section, but the left-and-right parts are displayed independently, for example, dragging the scroll bar on the left-hand side will not affect the display on the In fact, this is the page to use the framework technology, so the browser can be divided into several parts of the display space, each part of the page to display the content independently. And the combination of several frameworks to form a set of frames, can make the page more rich effect.

   I. Creating a framework and framework set

Step one: Create a new page in Dreamweaver MX 2004, run the "view→visualaids→frameborders" command to see a border in the editing window, and then click the border to see the dotted box, Note the frame is already attached to the newly created page.

The second step: Press the "ALT" button, drag and drop the border with the mouse, after releasing the mouse can split the window into two, so that the page is divided into two borders. For example, drag the left and right border can be divided into about two parts of the window, and drag the upper and lower borders can be divided into the top and bottom two parts. In addition, the four corners of the window can be dragged, so that the window can be divided into four areas directly (Figure 1). After the window is split into several frames, each frame can be edited as a separate Web page, or you can assign an existing page to a frame.

Figure 1

Step Three: The framework allows for nesting, for example, to create the frame shown in Figure 2, you can split the above method horizontally, but then you can't drag the border directly, or you'll get the frame shown in Figure 1. The correct way is to first in the lower right corner of the frame panel, click on the right frame, and then press the "ALT" button to drag the border.

Figure 2

Tip: If the border drag and drop is wrong, just use the mouse to drag the line you want to delete to the parent frame to remove the border.

II. Editorial Framework

Frames and frameset are often mixed in a page, and different objects can be set with different properties.

First step: The properties of the frameset. After you have selected the frameset, you can see the Property object panel (Figure 3) where the "Border" item can be set to display a border, and "BorderWidth" can set the border width, "bordercolor" to set the color of the border. You can also set the dimensions of each border, select a row or column in the thumbnail to the right of the Panel, and then enter a value in the Alue input box next to it, and select pixels or percentages as units.

Figure 3

Step two: The properties of the frame. If you select any frame in the frame panel, the frame selected in the frame panel will have a black border displayed, and you can set it in the Properties panel (Figure 4). For example, the "SRC" Address bar can be set in the frame of the page file, "Scroll" for whether to add a scroll bar, "Border" can decide whether to display a border, "Noresize" allows the browser is to change the frame size, and "marginwidth" and " Marginborder=1 height Sets the width and height of the boundary to determine the distance between the content and the border in the frame.


Figure 4

Step Three: Enter the contents of the frame. Click on any frame with your mouse to insert a variety of page elements such as text content, pictures, Flash animations, and background music like normal editing pages.

In fact, the use of the framework of the Web page layout can be reasonable planning, especially in the design of the beginning of the page is particularly important, so we need to practice in daily use, this is a good site to build a great benefit! :



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.