Dreamweaver MX 2004 from scratch (3)
Author：Eve Cole
Update Time：2009-05-31 21:02:57
Use frameworks to build web pages <BR> After we log in to some forums, we can see the name of each discussion area on the left. Click on any discussion area to see the content of the corresponding discussion area in the right area, but the left and right parts are displayed independently. , for example, dragging the scroll bar on the left will not affect the display on the right. In fact, this is the use of frame technology in the page, so the browser's display space can be divided into several parts, and each part can independently display the web page content. And combining several frames to form a frame set can give the page a richer effect.
1. Create frames and framesets
Step 1: Create a new page in Dreamweaver MX 2004. After running the "View→Visual Aids→Frame Borders" command, you can see a border appearing in the editing window. After clicking the border with the mouse, you can see a dotted frame, indicating that the newly created page has been Comes with frame.
Step 2: Press the "Alt" button and drag the border with the mouse. After releasing the mouse, you can divide the window into two, thus dividing the page into two borders. For example, dragging the left and right borders can divide the window into left and right parts, and dragging the upper and lower borders can divide the window into upper and lower parts. In addition, the four corners of the window can also be dragged, so that the window can be directly divided into four areas (Figure 1). When the window is divided into several frames, each frame can be edited as an independent web page, or an existing page can be directly assigned to a frame.
Figure 1
Step 3: Frames are allowed to be nested. For example, to create the frame shown in Figure 2, you can first divide it into two horizontally through the above method, but then you cannot directly drag the border, otherwise you will get the frame shown in Figure 1. The correct method is to first click the right frame in the frame panel in the lower right corner, and then press the "Alt" button to drag the border.
Figure 2
Tip: If you drag the border by mistake, just use the mouse to drag the line that needs to be deleted to the border of the parent frame to delete it.
2. Editing framework
Pages often mix frames and framesets, and different attribute settings can be made by selecting different objects.
Step one: properties of the frameset. After selecting the frameset, you can see the property object panel (as shown in Figure 3). The "Border" item can set whether to display the border, the "Border Width" item can set the border width, and the "Border Color" can set the border color. . In addition, you can also set the size of each border. At this time, select a row or column in the thumbnail on the right side of the panel, then enter a value in the "Alue" input box next to it, and select pixels or percentage as the unit.
Figure 3
Step 2: Properties of the frame. If you select any frame in the frame panel, the selected frame will be displayed with a black border. At this time, you can make corresponding settings in the properties panel (Figure 4). For example, here you can set the web page file in the frame through the "Src" address bar, "Scroll" indicates whether to add a scroll bar, "Border" can determine whether to display the border, "No resize" allows the frame size to be changed in the browser, and " "Margin Width" and "Margin Height" respectively set the width and height of the border to determine the distance between the content in the frame and the border.
Figure 4
Step 3: Enter the content in the frame. After clicking any frame with the mouse, you can insert various text content, pictures, Flash animations, background music and other web page elements just like normal editing pages.
In fact, the use of frameworks can make reasonable planning for web page layout, which is particularly important in the early stages of web design. Therefore, everyone needs to practice more in daily use, which is very helpful for building an excellent website!
