Before you open Dreamweaver, create a folder for you website. All of your images, buttons and banner should be saved into this folder. DO NOT HAVE ANY OTHER FOLDERS – EVER!
To create a template:
Open Dreamweaver
Choose more from create new
Choose blank template
Choose HTML Template
Choose relevant template from next column (avoid ones with elastic in the name)
Layout CSS, choose create new file
Click Create
Save the CSS with a relevant name in your website folder Your template will open...
Fill in grey areas (these areas will be repeated on every page of your website). If you’re adding Navigation buttons in here you will need to come back later and add the links (once the pages have been created)
In white area select text (make sure it is the colour and font you want), then go to Insert menu, Template Objects, Editable region.
In file (on the right of the screen) choose manage sites from the drop down menu.
Name site
You do not want to use a server technology
Check folder for saving files is in correct place (click the yellow folder to browse)
How do you connect to remote server? Choose None
Export the site
Save the site definition in your web folder Save template with a suitable name (make sure it is saved as a DWT file, Dreamweaver will create a folder for your template).
To add an image, such as your banner go to: insert / image
To add a button do to: insert / image object / Fireworks HTML
Note: alternate text is the text that will be displayed when you hover over the image, it is useful for blind people or if your image fails to load.
To create each page from your template:
Choose File, New
Choose Page from Template
Choose your template
Click create
Now create your page.
You will need to save the page as something sensible (remember you will have A LOT of files in your web folder!) so save it as home_page or similar. It should be saved as an HTML document.
Whenever you update the template all the pages based on it will update. To make your buttons work:
Open your template (it will be in the template folder made by Dreamweaver and have the file type .dwt)
Click on your button
In the properties section at the bottom of the page, you will find
link, next to the box click on the yellow folder and browse for your web page.
Remember your web pages will be saved as HTML files
When you have added a link to all of your buttons save your template
It will ask you if you want to update all of your pages – say yes
You will need to save your pages
Test the buttons on the Internet
Now all you will need to do is to add content to your pages. Make sure that you know what the client would like, and please think about layout and style – remember you are creative people!
Tips
Use tables to help with layout: inset / table (make sure you set the border to ‘0’ if you do not want to see it)
Use your Photoshop shills to make your website look amazing!
In Dreamweaver if the page has a * next to the name in the tab – it has had changes made but not been saved.
If your image or button does not show then it is probably because it was made somewhere else. The quickest option is to open the image or button in fireworks and save it (or export it) with a new name into your website folder – you will see if this was the problem if it automatically goes to a different folder when you press save as.
What else can you add to make your website better? Roll over images, a feedback form, more design and style?
Just be resigned to the fact that you may have to do things more than once...it will happen somewhere along the way. It’s just the way it is...So don’t get too frustrated!!!
Useful links
Be inspired:
http://www.csszengarden.com/ (click on the links to change the CSS (the style) – it has the same content but looks different, good for ideas)