Before we start making it, let’s analyze this page first. Take a look at what is used on this page.
□The title "My Home Page" at the top of the web page is a paragraph of text.
□In the middle of the web page is a picture.
□The welcome message at the bottom is a paragraph of text.
□The background of the web page is a deep purple color.
After conceiving the structure of this web page, we can start making it.
First start Dreamweaver and make sure you have created a website (root directory) using the site manager.
For the convenience of production, please open the resource manager in advance and collect the images to be used in the images folder of the website directory.
[ Insert title text]
Enter the page editing design view state. Under normal circumstances, the editor defaults to left alignment, the cursor flashes in the upper left corner, and the cursor position is the position of the insertion point. If you want to insert the text in the center, click the Center button in the properties panel. Start the Chinese input method and input the four words "My Home Page". It doesn't matter if the font is small, we can set it up.
[Set the text format] Select the text and set the font format to the default font in the properties panel above. The font size can be changed at will. And select "B" to make the font bold.
[Set the color of the text] First select the text, click the color selection icon in the properties panel, and use the eyedropper to select the color in the pop-up color selector.
[Set the title and background color of the web page]
Click the "Modify" menu and select "Page Properties". The system pops up the page properties dialog box (as shown below)
Please fill in the title "My Home Page" in the title input box.
Set background color: The background of the web page can be a picture or a color. In this case it's color. Open the background color selector as shown above to select. If you want to set the background to a picture, click the "Browse" button for the background image. The system will pop up a picture selection dialog box. Select the background picture file and click the OK button.
In the design view state, click the mouse in the blank space to the right of the title "My Home Page", press Enter to change a line, and follow the steps below to insert a picture and center the picture. You can also align it to the left using the Align Left button in the Properties panel.
【Insert image】Choose any of the following methods:
(1) Use the Insert menu: Select "Image" in the "Insert" menu, the "Select Image Source File" dialog box will pop up, select the image file, and click OK. As shown below:
(2) Use the insertion column: Click the insertion column object button > Select button, the "Select Image Source File" dialog box will pop up, and the rest of the operations are the same as above.
(3) Use the "Resources" panel of the panel group (as shown below): click the button, expand the picture folder in the root directory, select the file, and drag it to the appropriate position in the workspace with the mouse.
Note: For the convenience of management, we put the pictures in the "images" folder. If there are few pictures, you can also place them in the root directory of the site. Note that the file name must be named in English or Pinyin and in lowercase, and cannot be in Chinese, otherwise there will be some trouble.
A picture is inserted. (Insert *.swf animation file, select "Insert" menu > Media > Flash).
[Enter welcome text]
Click in the blank space to the right of the image and press Enter to wrap the line. Still following the above method, enter the text "Welcome..." and then use the properties panel to set the text.
Save the page.
A simple page has been edited like this.
[Preview web page] Press F12 in the page editor to preview the web page effect.
The first page of the website, which is the homepage, is usually named index.htm when saving.
[Summary] We created a simple web page.
There are four contents:
①Picture insertion and alignment settings;
② Text format, color and bold settings;
③Setting the background color;
④Preview the web page to see the actual effect.
Not only must you master it, but you must also practice it repeatedly.