Dreamweaver MX 2004 Starts from scratch

Dreamweaver

With the popularization of the Internet, many people are not satisfied with surfing the internet, but want to participate in it deeply. Now, having your own web site has become a trend. Although it's not difficult to make a simple Web page, it's not so easy to make a very refined website, so we have specially prepared a series of tutorials on the latest website design software dreamweaver MX 2004, which I hope will help you.

Usually in a website there will be dozens of or even hundreds of basic similar styles of pages, if each time you reset the page structure and the same section of the navigation bar, all kinds of icons appear to be very troublesome, but we can use the Dreamweaver MX 2004 template features to simplify the operation. In fact, the function of the template is to separate the page layout and content, after the layout is designed to store as a template, so that the same layout of the page can be created through the template, so can greatly improve work efficiency.

First, the production of templates

Make a template and make a common page exactly the same, just do not need to make all parts of the page to complete, just need to make a navigation bar, title bar and other pages of the public part, and the middle area with the content of the page to fill.

Step one: First run the "file→new" command in Dreamweaver MX 2004, then select the "Template page→html Template" option from the window shown in Figure 1, and then click the "Create" button to create a template file.

Step Two: Insert the Web page frame, navigation bar, flash title, and all the public elements of the page in page Design view (Figure 2), and then run the File→save command to save the template.

Tip: You can download a favorite Web page, and then open it in Dreamweaver MX 2004, just keep the frame and other elements after the "File→save as Template" command to save it as a template, so you can save a lot of time to make a template.

In order to avoid editing errors that result in changes in the elements in the template, the contents of the template are not editable by default, and the area can only be changed in the document created by the template if a range or paragraph of text is set to editable. Use the mouse to select an area (that is, the area of each page with different content), then run the modify→templates→new Editable Region command, and set a name for the area in the pop-up dialog box, which completes the editing area.

Table can be used to clearly display the data of the list, in fact, the table's role is far more than the data, it has been playing an important role in Web site positioning, especially for users with non-IE browsers, the use of table-positioned web pages than the use of the layer positioning of the page more advantages.

First, create a table

Step one: Run the "insert→table" command in Dreamweaver MX 2004 to eject the property Settings window, where rows and Columns correspond to the number of rows and columns of the table, and table width represents the width of the table, and the Border thickness "is the width of the border, you can also set the style of the table, according to their own needs to set the corresponding properties of the table.

Small tip: The width and height of the table can be defined by the percentage of the browser window or by using absolute pixel values, such as setting the width to 60% of the window width, and the width of the table changes as the browser window changes, and if the width is 400 pixels, the size of the browser window, The width of the table will not change.

Step two: After clicking the "OK" button in the window, you can create a new table in Dreamweaver MX 2004, and adjust the parameters such as the color of the table line, the background color of the table, the alignment of the cell by the property panel in the lower part of the window.

Second, the basic use

Once we have created the table above, we can adjust it to use it. For example, if we need to make the table shown in Figure 1, we can insert a table with four rows and three columns, and then do the following.

First step: Press and drag the mouse in the top two cells in the first column of the table, and you can select two cells. Then click the Merges selected cells using spans button in the property template to merge the two selected cells into a single cell. In this way, merge the two cells to the right of the first row of the table into one cell.

Tip: When you select a cell, click the splits cell into rows or Columns button in the Properties panel to split the cell into rows or columns.

Step Two: Select all three cells in the first column of the table, and then set the background color (BG) In the property template to "#FFFF00" so that the cell background in the first column of the table turns yellow.

The third step: Enter the corresponding text in the table, in order to be beautiful can be in the property Panel to center setting.

Fourth step: In order for the table to have a stereo effect, you can select the entire table, and then in the Properties panel, set the width of the table border (Border) to 7, and set the border color (Border color) to blue.

Tip: It is often difficult to select the entire table, which provides four common methods: 1. Move the mouse to the right edge of the table, and then drag the mouse to the left, so you can quickly select the entire table. 2. Run the Modify→table→insert table command to select the entire table. 3. Right-click in the cell, and select the entire table from the pop-up menu by selecting the Table→insert Table command. 4. Click any cell with the mouse, and then press the CTRL + a combination button to select the entire table.

Once we've done that, we'll be able to customize the professional table in Dreamweaver MX 2004.

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→visual aids→frame Borders command, and you can see a border in the editing window, and you can see the dotted box with the mouse click on the border. 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.

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.

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 the "Border width" can set the border width, and "Border color" can 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.

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, "No resize" allowed in the browser is to change the frame size, in addition to "Margin Width" and "Margin Height sets the width and height of the boundary, respectively, to determine the distance between the content and the border in the frame.

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!

The most distinctive feature of Dreamweaver MX 2004 is that it allows you to implement multiple dynamic Web pages without writing a single line of JavaScript code. The key to behavior is that Dreamweaver MX 2004 offers a lot of action, which is a standard JavaScript program where each action can accomplish a specific task. So, if the functionality you need is in these actions, then don't write the JavaScript program yourself.

Pop-up message box

If you want someone to enter the home page when you can see a pop-up message box to display some content, you can do this through the following methods.

The first step is to create a new page in the Dreamweaver MX 2004 main window, and then run the "windows→behaviors" command to activate the behavior panel.

The second step is to click the "+" button in the behavior panel and choose "Popup Message" from the pop-up menu, and you can see the window shown in Figure 1, where you can enter such as "Welcome to China Computer Education news website!" "Message.

Figure I

The third step after adding a good hint text, the control panel is called "Popup message" behavior, at this time also click on the left Drop-down menu, and choose "OnLoad" an item, so that when someone enters the page will automatically perform the behavior of the setting, Naturally, you can see the pop-up message box.

tip: You can also choose "OnKeyDown", "OnMouseDown", and so on from the Drop-down menu, so that you press the keyboard or click the mouse to appear in the message box.

Link Interpretation text

When browsing some Web pages, the mouse over the image or the link will have an explanatory text appears, the effect can be achieved through the following steps.

The first step is to insert an image in the Dreamweaver MX 2004 edit window, and then, after clicking the image, fill in the "#" number in the Link entry box in the property panel and let it link to this page.

The second step is to add a layer next to the image by using the "Insert→layer objects→layer" command, and enter the words you want to display. After this layer is selected, the "Vis" property is set to "Hiddend" in the properties panel to hide the layer (Figure 2).

Figure II

Step three after selecting the image, activate the behavior panel with the Windows→behaviors command, click the + button and select Show-hide Layers. Select the layer that you want to display in the pop-up window, then click the "Show" button on the lower part, so that you can make an extra event in the behavior panel called onmouseover. At this point click the "+" button and click "OnMouseOver", so that when the mouse on the image can be displayed on the layer, that is, can appear floating text explained.

The fourth step is to add the "hide" event to the layer in the third step and set the behavior to "onmouseout" so that the layer can be hidden when the mouse is taken away.

After the above operation, press the "F12" button to open the IE browser preview, when the mouse moved to the picture on the time will appear preset prompts the words, and the mouse moved the picture when the words automatically hidden.

AutoFit Window Size

Some pages change the size of the window to adjust the page size, so the window is too large there is no space, the window is too small edge will not run out of the move bar, for this automatic resizing of the page, in the Dreamweaver MX 2004 can refer to the following steps to easily implement.

The first step is to create a new page and then insert a row of three columns by using the "insert→table" command, which allows it to be automatically stretched to fit the browser window, regardless of its width.

The second step is to see that the lower part of each cell is marked with a width and a small triangle (Figure 3). In this table, you can set which parts need to be fixed, but only one column will be extended automatically, for example, here we set the last column to expand automatically as the window size changes.

Figure Three

Step three to select the last column, run the view→table mode→layout Mode command, and select Make Column Autostrach in the pop-up menu (Figure 4).

Figure Four

Step fourth will then appear in the dialog box, and you will be prompted to allow the line to stretch, Dreamweaver need to place some interval pictures in other columns, select "Create a spacer image file", so that the picture is not displayed in the browser window, Instead, it acts as a fixed form.

After the fifth step, you return to the original edit window, and you can see that the last column has been automatically stretched to fill the entire browser window, while the other two columns remain in a fixed width.

tip: Set the automatically stretched column to see a wavy line at the top of the column.

When you do this, when you preview the page effect in IE browser, if you change the size of the window, the width of the last column changes, and the width of the first two columns remains unchanged, so that you can resize the window automatically.

As described above, there are only a few ways to behave in the Dreamweaver MX 2004, and the flexibility to combine behaviors and layers can also be accomplished with features such as dynamic pictures, drag-and-drop layers and so on, making your home page look more colorful!