Using Dreamweaver to quickly build a frame-type Web page

dreamweaver| page

　　I. Introduction to the Framework

A frames page is a collection of pages consisting of a common set of web pages, usually in a set of frames, where navigation is placed on one page, and other content that needs to be changed on another page. The main reason for using frames page I think is probably to make navigation clearer, make the structure of the site more simple and clear. Let's take a look at the following example of this website, as shown in figure one.

(Figure I, Frame structure page instance)

This page is made up of the next three parts of a framework set, the top is the site's column navigation, click on different columns, the corresponding column content will appear in the middle of the frame of the child page. The bottom of this site is some of the relevant information page navigation, click on each column, the information will also appear in the middle of the main frame page. Such a framework can ensure that the entire site's columns always appear in the viewer's view, so that the viewer's attention more focused on the middle part of the frame set, both column content.

　　Second, how to create a frames page

Now I'm going to start by introducing the main steps of the quick frame-building page, which is to point to the path to the destination, and I'll just introduce my most common path: The frames panel is added to the object version in Dreamweaver4, Chi. We can use this tool to quickly and easily create our frames page.

We know that frames are made up of separate pages, so it's a good idea to build each individual page of the frame before you make the frames page. First look at our final page, as shown in Figure II:

(figure II, final instance page)

We will need three separate pages in this instance, the topmost top.htm page, the navigation page below the left left.htm, the content page below the right main.htm. Here's a step-by-step description of the specific steps you create:

1, in the Dreamweaver Site window to create three blank pages, respectively named. Top.htm, Left.htm, main.htm.

2, open the Main.htm page. Switch the object panel to the frames panel, as shown in figure three;

(Figure III, Frames tool panel)

Execute menu Window-frames Open the frame structure panel, as shown in Figure four;

(Figure IV, frames structure panel)

The Execute menu view-visual aids-frame borders makes the border of the frame structure visible, as shown in Figure five.

(Figure V, frames border display)

3. Select the frame set shown in Figure six in the Frames tool panel,

(Figure VI, creating the frameset)

At the top of the current main page, insert an adjacent page, forming the frameset we need. As shown in Figure seven;

(Figure VII,)

4, specify the composition of the framework of the page, open the property panel, respectively, set the top and left frames page of the actual file link address, other parameters, as shown in Figure eight;

(Figure VIII, property panel detail parameters)

1 SRC: Set the link address of the frame file.

2) FrameName: Sets the name of the frame file, which is important to use in subsequent connections.

3) Scroll: Set whether to allow the scroll bar to appear, the top is best set to No, the left side is best set to auto.

4) No Resize: You can specify whether to allow changes to the window size of each page of the frameset.

Specifies that the top page link file address is top.htm, and the left page link file address is left.htm.

5, change the frame set page size. Select the upper and lower frame set border in the frame panel to set the height of the top frame page, as shown in figure nine;

(Figure IX,)

Next, select the frame set below with the mouse, and then set the width of the left frame in the property panel, as shown in Figure 10.

(Figure X,)

6, the basic Frame page composition is set up, execute menu command File-save Frameset as Save frameset page as frames.htm. Below we need to bridge the communication between the pages-join the link.

　　Third, in the framework of the link between the implementation of the page.

　　We know that the main purpose of the frame page is for navigation, when the viewer clicks on a link, the relevant content page will be displayed in another frame, which is actually to specify a target frame window for the link. By using the name attribute of the framework we defined earlier, we can use any part of the frame or even the entire frame as the target window. To specify a link to the specified frame, you can follow these steps:

1 Select the link text or picture, as we select the topmost about me text.

2 in the linked address (link), enter the appropriate address about.htm. Select the desired window name in the target dropdown box, as shown in Figure 11;

(Figure 11, target window name)

This shows the window that the current page contains and the Dreamweaver preset four window names.

_blank: This option causes the link to open in a new window.
_Parent: This option causes the link to open in the window above the current window.
_self: This option causes the link to open in its own window.
_top: This option causes the link to open in the most outer-end window of the entire frameset.
MainFrame: The name that we set for the right window earlier, select this document to open in this window.
Leftframe: The name we set for the left window before us.
Topframe: The name we set earlier for the top window.

3 In this example, we set the navigation column above the target frame window is mainframe, when clicked on the column, the corresponding column content will be in the lower right mainframe window opens.

　　Four, at the same time update multiple pages.

　　There are two or more frames that we need to update at the same time we click on a column, which can be done using the Dreamweaver behavior in the following steps.

1, select the linked text or pictures.

2, open the Behavior panel (behaviors), click the plus sign to add go to URL behavior, as shown in Figure 12;

(Figure 12, add behavior)

3, in the Go URL dialog box shows the current existing frame window, we selected a window name, you can individually set each window will be updated file content. Dreamweaver will add a "*" number to the window after the target file is set, indicating that the frame window has a URL set.

(Figure 13, set multiple target framework file addresses)

4, after the completion of the point of determination, we click this link, will also update the contents of multiple windows.

Since the current framework structure has been supported by most browsers, it is becoming more common. But relatively speaking, the frame structure is more difficult than the ordinary page control and production, many details need your repeated adjustment and practice, here can not be described in detail, I hope my introduction can help you start to practice the frame structure of the page. Remember, any effort will be rewarded.