Dreamweaver Web page Production Tutorial: page making

dreamweaver| Tutorials | page | page

Now, take the simple Web page below as an example to describe the production process. The simple Web page is as follows:

Before we start making, let's analyze this page first. Look at this page and use those things.

-The title "My Home Page" at the top of the page is a piece of text.

-The middle of the page is a picture.

-The bottom of the welcome word is a piece of text.

-The background of the webpage is a deep mauve color.

After we know the structure of this webpage, we can make it.

Start Dreamweaver MX 2004 first to make sure you've built a Web site (root directory) with the site manager.

In order to make it convenient, please open the Resource Manager in advance and collect the pictures to be used in the website directory Images folder.

" Insert title text "

Enter page edit Design view state. In general, the editor defaults to the left alignment, the cursor flashes in the upper-left corner, and the cursor position is the insertion point. If you want the text to be centered, the Point Property Panel Center button. Start the Chinese input method to enter "My homepage" four words. It doesn't matter how small the word is, we can set it.

format Text is selected, the font format is formatted as the default font in the properties panel above, and the font size can be changed arbitrarily. and select "B" to make the font thicker.

Set Text color First select the text, and in the Properties panel, click the Color selection icon to select the color with the eyedropper in the pop-up color selector.

" set the title and background color of a Web page "

Click on the "Modify" menu to select "Page Properties". System pop-up Page Properties dialog box (pictured below)

Please fill in the Title entry box with the title "My Home Page".

Set background color: A page background can be a picture, or it can be a color. This example is a color. The background color selector is selected as shown above. If the background to set to the picture, click the background image "Browse" button, the System pop-up Picture selection dialog box, select the background picture file, click OK button.

Design view state, click the mouse in the right margin on the title "My Home Page", enter a new line, insert a picture with the following steps, and center the picture. You can also leave the left alignment button in the property panel.

Insert image Select any of the following methods:

(1) Using the Insert menu: On the Insert menu select image, Pop-up the "Select Image source File" dialog box, select the image file, click OK. The following figure:

(2) Use the Insert bar (pictured below): Click the Insert Bar Object button > select

button, the "Select Image source File" dialog box is displayed, and the rest of the operation is the same.

(3) Use Panel Group Resources panel (as shown below): Dot

button, expand the Image folder of the root directory, select the file, and drag the mouse to the appropriate location in the workspace.

Note: In order to manage conveniently, we put the picture in the "Images" folder. If you have fewer pictures, you can also place them in the root directory of your site. Note that the filename should be named in English or alphabetic language and use lowercase, not in Chinese, otherwise there will be some trouble.

A picture is inserted. (Insert the *.swf animation file and select Insert menu > media >flash).

" Enter welcome text "

Click in the right margin of the picture, and enter a newline. Still follow the above method, enter text "Welcome ..." Then, use the property panel to set the text.

Save the page.

A simple page has been edited.

Preview page to preview the page effect by pressing F12 in the page editor. The first page of the site, which is the homepage, is usually named index.htm when you save it.

"Summary" In today's tutorial we produced a simple Web page.

There are four contents:

① picture insertion and alignment settings;

② text format, color and bold settings;

③ setting of background color;

④ Preview the page to see the actual effect.

Not only to master but also to extrapolate repeated practice.