Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

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.


Share this Dreamweaver Article:

blog comments powered by Disqus

Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal