Shulou(Shulou.com)06/02 Report--

This article is about how dreamweaver uses default templates to build the content of a website. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Dreamweaver provides a way to quickly build a website framework, and we can quickly build a simple website through a simple preset template. Take a look at the basic structure of the following page, which is our goal today, with the navigation bar on the left and the main page on the right.

Steps

1, open dreamweaver, press the shortcut key "ctr+N" to come to the "New document" interface, we create a new basic html page.

2. Enter the du Tip on this page as the personal page of the TX.

3. Next, insert an art photo for Xiaoze.

4. I have completed this simple page for the time being, and I will use it later.

5. Use the same method to help du build a personal page.

6. Then save these two files. Press the shortcut key "trl+s" to bring up the dialog box. Set the file name to du Tip, and click OK.

Save the help in the same way and reserve it later.

Press the shortcut key "ctrl+n" to create a new page. Click the location shown in the figure to select the layout.

8, select the frame type in the tab bar, as shown in the figure, this is the overall layout of the page, the left is the preview, the right hi name, we choose the first as a demonstration.

9, a pop-up dialog box, this dialog box to name all parts of the page, this step is more important, we will use, so keep an eye on, the left column is called leftframe, the right column is called mainframe.

10. Enter Baidu experience on the left, du strategy, du help, and Baidu experience on the main page on the right. There is no difference between the input of this page and the input of word, that is, you type directly, and enter is a new line. We see the following picture, and the left column is the navigation bar, which is the navigation we usually see on the web page.

Click "File"-Save all, remember that this step is not "ctrl+s", because the frame page is made up of two pages, so choose to save all.

12. A save dialog box pops up, which is very important, and then two such dialogs will pop up. So the first one is for the whole page, the second conversation is for the right column, and the third is for the left navigation, which are stored in different files.

13, look at the effect, put the mouse in different parts, the label bar will appear different file names.

14. Next we will set up a link to the left navigation. Select "Baidu experience" in the left column, click on a circle in the lower right corner, and drag the circle to the corresponding file on the right, thus establishing a link. Then select mainframe as the target at the bottom of the interface. Mainframe is the name of the right column we named in step 9. You can go back and have a look. Baidu experience sets up a link to the file "right .html", and the file will be opened in the mainframe location, that is, in the right column.

15. Make links to Xiaozhi and help in the same way. Point to "du Tip. Html" and "du help. Html", respectively.

16. Let's press the shortcut key F12 to preview the interface and see if this opens the main page "Baidu experience"

17. Click on the link "du Strategy"

18. Click the link "du help" to see the effect. The basic framework of this small website has been constructed.

Thank you for reading! This is the end of this article on "how dreamweaver uses preset templates to build a website". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.