Creating new pages with the help of templates is a very simple process that can significantly speed up the creation of a complete site. In addition, the use of templates with editable regions allows you to change contents that appear on several different pages with one stroke. In this lesson I will show you how to do it.

To begin with, I will open a new document by selecting the New function and then select the Page from Template option on the left. After that, the name of my site will appear in the first column, and all the templates should be displayed in the second column. Since I currently have only one item at my disposal, I will click on the Create button and proceed to the next step. This template already contains all the elements that should appear on the main page of my site. So I will immediately run the Save function and create a new file called index.html. I can create other contents in the same way, so I will repeat this procedure and enter about.html for the file name. Since different content is planned for this page, I will immediately change this title and take the rest of the text from a separate document. It is among the examples for the exercise, so I have to go to Word and copy a few paragraphs from it. If I go back to Dreamweaver afterwards, it won’t be difficult for me to remove the existing content and replace it with new text.

If it turns out that certain changes need to be made to it, that won’t be a problem either, because now I have all the functions of Dreamweaver at my disposal. I will use this opportunity to define a couple of links in the following way. First, I need to select the appropriate part of the text and then enter the name of the page I want to connect to in this field. Since in this case there are two segments on the target page, I can also add the so-called Anchor tag and in that way I define this link even more precisely. In order for this link to be complete, it is necessary to enter the appropriate title in the Title field and activate the Target option. I will use this information for the second link, but I have to change the Anchor tag and enter a new title. If you are not sure what the exact name of the target page is, you can enter only a Hash Tag in the link field, and that will be enough to display the selected element in Dreamweaver as a real link. Of course, this information must be completed before publishing the final version of the site, otherwise an error will occur.

I want one photo to appear at the beginning of the second paragraph, so I will place the cursor at the appropriate location and start the Image function from the Insert menu. As soon as the contents of the folder containing the images appear on the screen, it will not be difficult for me to click on one of them and confirm my choice with OK. After that, I just need to enter the accompanying text and complete this operation.

Since I planned to place this image parallel to the text, it is necessary to create a new style for this purpose. That’s why I will first click on the last item from this list and move on to entering the parameters. In order to be able to apply this style to any illustration, it is necessary to select the Class option from this list and give it an appropriate name. It should be descriptive, because in this way it is easier to later apply and assign the style itself. Since I have done the first part of the work in this way, I can go to the parameters and choose the Left option for Float and Clear to begin with. After that, I can place a frame of about 10 pixels and give it a blue color by entering the appropriate code. In order for the text to be sufficiently separated from the image, the right margin should be set to 20 pixels, as this is quite enough to achieve the desired effect.

Since I have defined the new style in this way, all that remains is to apply it. To that end, I can choose the appropriate item from this list, but I have to be careful because it can easily happen that I click on another style.

This didn’t turn out too bad, but it would be even better if the corners were slightly curved. In order to achieve this, it is necessary to open the corresponding style, and this can be achieved most easily by directly selecting the option located at the top of the screen. Dreamweaver will immediately allow me to access the complete code, so it will not be difficult for me to enter new parameters. This specifically means that I should enter the following text: border-radius: 15 px. In order for this change to be correctly interpreted in all browsers, it is necessary to add another line with the following content: -moz-border-radius: 15 px. This change will not be visible in the Preview section, but I have to start the real Browser and check what I have achieved in it.

Before I finish this lesson, I would like to draw your attention to one small but important detail. Namely, since we alternately changed different parameters, it would be best to use a similar function – Save All – instead of the Save command to save data. In this way, in addition to the basic document, all the changes you made to the styles and other elements that make up your presentation are recorded.