Create a new Template in Dreamweaver CS4
We’re going to be creating a new dreamweaver template and inserting our headers and footers. Let’s get started!
First create a new blank template by going to FILE > NEW Select a blank template HTML, and select a 3 column fixed header and footer. You can choose whichever dreamweaver template that suits your taste. Make sure you have XHTML 1.0 Transitional selected for the docType
Click CREATE
Next dreamweaver will want to know what to save the Cascading Style Sheet as, and also which location to save it to. If you have not defined a site for your template then define a new site in dreamweaver first, then save it in a separate folder called CSS and maybe save it as Main.css and then click SAVE.
Now you’re ready to edit dreamweaver template will appear.
Now put your cursor inside the header and highlight the word ‘header,’ which will also highlight it in code view. Look inside of code view and delete the word header including the <H1> tags, i.e. delete: <h1>header</h1>. Now click the refresh button to make the change take effect.
Now, make sure your cursor is inside the div tag for the header, either by clicking inside the tag in design view or making sure it is inside the tag in code view: <div id=”header”> | </div>
Click INSERT> IMAGE
and find the folder where you have the header images stored. It is always advisable to have your images already inside a folder within your site root directory. If you still need to do that and do not know how to then please see my tutorial on Inserting images into your site directory.
double click on your image and an image attributes box comes up. Here you can define your alternate text which is the text that will appear if your images fail to load up on your webpage. For the purposes of the tutorial I would put the word ‘header’ into that box. There is a link box too if you wanted to create a link or hyperlink to another page. When you are finished you can click OK.
Now, you will see that your header image has appeared but you will find that the image is being pushed to the right by around 20 pixels, that’s because there is a default padding of 20 pixels inherent within the CSS (cascading style sheet) for the header div tag. We can adjust this by clicking on the CSS rule definition for the header tag. You may also find that your header image is either too wide or not wide enough and does not fit correctly within the header tag.
Click on the CSS rule for your header tag, this will be located in your Styles panel under:
WINDOW>CSS STYLES
The header tag css rule looks like this: .ThrColFixHdr #header
Go into the Box Category and adjust the width of the template to suit the width of your header image. Here also you will see the default padding that comes with the template. Check ‘same for all’ and zero the margins and padding. Then click ok for the changes to take effect.
You will now see that your header image fits perfectly.
Now you will need to adjust the css rule for the whole template container:
.ThrColFixHdr #container
Click on the container css rule and adjust the width to match the header tag.
Now follow the same steps above to put your footer image into place. You will not need to adjust the container rule again as you have already done it.
If you followed all of these steps correctly then congratulations, you are well on your way to creating your first website.
If you would like to see a Dreamweaver Video Tutorial showing you how to Create a template, follow this link:
Create a Dreamweaver Template and Insert headers and Footers.
A dreamweaver article explaining how to Create Email Links in Dreamweaver CS4.
