The best way to create a new template is to divide the future website into several blocks. After that, it will not be difficult for you to build a complete structure, for example, from top to bottom. Since three independent units are clearly distinguished on the sketch I prepared, I will first place the so-called Header that includes the logo, banner and navigation, and then move to the central part where the main content is located. Finally, I just need to add the third part – Footer, which includes navigation links, contacts and links to social networks. Now that we’ve clarified this, it’s time to start Dreamweaver and use the Manage Site function to select the location where the files for the exercise are located. After that, I can move on to creating a new page, choose the New option from the File menu and open a new window. In it, the Blank Page option will automatically be selected, so I can accept the HTML option as the page type and skip the pre-prepared templates. The only parameter that needs to be changed at this point is Doc Type. With it, several lines are automatically entered at the top of the new page, which help the browser to more easily interpret the following contents. Currently, the XHTML option is selected, and I will choose HTML 4.01 instead, because at the moment I prefer a simple coding system. As soon as I click on the Create button, the content of my future page will appear on the screen, and at first glance it may seem that it is completely empty. In order to prove to you that this is true, by selecting the Split button, I will switch to a mode in which the code and the graphic layout of the future document are simultaneously displayed on the screen. As you can see, on the left side there are already several rows, among which individual functions are clearly distinguished. At the very top is the Docktype and right below it the initial html tag. Then follows the entire head zone, which contains Meta tags and the title. Finally, there is a section reserved for the main content of the page (body) as well as the final html tag. On the right half of the screen, you can see how the future website will look in a web browser, although the correct browser must be used to check the final version. This section is currently completely empty because there is still nothing between the opening and closing body tags.

I like to start by defining the title of the page, so I will click in the field at the top and enter a few words. The title and accompanying comments should not be longer than 70 characters, as there is a danger that anything over that will simply be cut off and ignored. Of course, as soon as I place the cursor again in the section with the code, the text that I used as the title will automatically appear in it.

In this example, I will show you how, with the help of div tags, so-called content sections. These are parts of the code that allow you to reserve space for some future content so that they can be manipulated more easily. For now, it is enough to know that these data blocks can be connected to each other in different ways. As I mentioned before, I need three independent sections on this page, so I will first place the cursor after the body tag and enter my first div there. This can be done in two ways: via the Insert menu or the panel of the same name, and I will choose the first method. If I then select the Layout Objects option from the menu, I will be able to run a function to insert a new div tag. After that, a new frame will appear on the screen, so it will not be difficult for me to choose the appropriate option to determine the place where the new element will be placed. I will stay in the current position and use the opportunity to define the appropriate ID so that I can later use it more easily when assigning styles. If I then click on the OK button, content will appear on the screen confirming that I have successfully created a new div tag. At the moment, it just marks the place where I will later enter specific data, so I will keep the text that was automatically generated.

I was able to achieve the same result using the functions found in the Insert panel. To prove it to you, I will first click on this button and then select the Layout option. After that I can click the Insert Div Tag button and repeat the whole process. Since I currently do not need another element like this, I will close this frame with Cancel and return to the section where the complete code of my page is displayed.

Before I finish this lesson, I would like to show you how to enter comments. These are pieces of code that have no other purpose than to serve as a reminder or to make orientation easier. I will use the opportunity to insert a short comment immediately after the first div tag, so I will first enter the less than < sign and then the exclamation mark! which are followed by two dashes –. All the text that follows is actually a comment that will not be visible in the Browser, but will help me in creating this page.