Creating Templates
Template helps to make our webpages look neat and more professional. In order to place information in webpage more precisely, we should use a well structured template for our webpages. We got two options in using templates to built our webpages.
- Using a Pre-built template or templates made available in Dreamweaver itself.
- Creating our own custom built templates.
1) Using Pre-built Templates
On the menu bar select File->New, you will get a dialogue box like below.
Select Blank Template, on the left and select Html Template for Template Type and select any Pre-built template under Layout and click Create. The whole process is simple.
2) Creating our won Custom Built Template
If we are not satisfied by the available templates and we need our website to look unique, it is better, if we opt to built our own custom templates. The Dreamweaver uses combination of HTML and CSS to built the templates. The <div> tag is used in actual building of templates, supported by CSS styles.
Here is the Layout of the template, we will be building here.
Numbers are given on each layer of the template above, because that the order we need to arrange the layers in template.
First we need a outer layer to hold the rest of the layers in our template, which is named here as container. All these layers re noting but the <div> tag in html. So lets get started.
The <div> tag can be accessed in Dreamweaver from the menu bar Insert->Layout Objects-> Div Tag. (or) in the Insert panel at the top right corner of your Dreamweaver application. On the Insert panel select Layout->Div Tag. As soon as the Div Tag is selected you will get a dialogue box. The first thing you need to do here is select the place, where you want that particular tag to be placed. Our aim here is to get a Container Layout and that should come right inside the <body> tag.
So, select after start of the tag in the insert option and on right select <body> from the drop-down. Now click New CSS Rule. On the CSS Rule dialogue box, select Compound (based on your selection) under select type and give the selector name as container. On Rule Definition select New Style Sheet File from the drop-down. Now, we will be asked to save a New CSS style sheet file. You can save the CSS style sheet inside the folder we created before to define our website. If we want to follow the best practices, we need to create a sub folder inside the site definition folder for CSS alone. Here, I am creating a folder named css inside the folder webway(site definition folder) and saving the file inside CSS folder as style.css. Now we will get a CSS Rule Definition dialogue box here you can select and apply styles for your <div> tag created like width, height, border, border styles, position etc.
The same is repeated again for creating header, but after the header the rest all get a slight change with the procedure followed above.
After we are done with header, while creating the right bar, instead of selecting after start of tag in the insert option, we need to select After Tag. So, why we need to do so?.
The code may look something like this.
.JPG)
On the above illustration you can see container comes inside the <body> tag and header comes inside the container, so we choose After start of Tag, as the purpose is get these tags nested inside. But watch out the rest of the <div> tags(i.e. left bar, contents, right bar & footer). Right bar comes after the header (not inside), contents comes after Right bar and it goes on the same for others too. So, we have to choose After Tag, in the Insert Div Tag Dialogue Box.
Hope you got a clear picture of using <div> tag and CSS in Dreamweaver to effectively create nice templates.
Creating Editable Regions in Templates
In order to Create Editable regions in Templates place the Cursor were you need a editable region and in the menu bar Select, Insert->Template Objects-> Editable Region, We will get a New Editable Region Dialogue Box. Give a Name to the Region and click ok.
Saving the Template
In order to save the template, go to File->Save as Template and on the dialogue box give a name for the Template and click Save. The Template file will be saved under a automatically generated folder named template under the Site Definition folder. Note that we may be able to save the template only if a website is defined already.
