Dreamweaver Induction

Making the buttons change when you hover over.
open Photoshop, and make sure its set to web and make the document size the same size as your buttons (considering the padding around it as well).

 Save for web as PNG 24 and save in root folder, images, home1.

Add a line or whatever adjustment to your button and save as home2. Do the same for the rest of the buttons.

You cannot create a rollover button in html or the style sheet, because it uses java script.

In the html (source code) click just after your first button and select insert, rollover image.

Call it home and add the two files, home1 and home2.

Make sure 'preload rollover image' is selected.

If the images cant load for whatever reason then, the alternate text section will show instead. So just type home button.

The javascript is then automatically added for us. Repeat for the rest of the buttons.

The hover doesn't show up on the split screen, but if you save and then preview the page then it will show the control. Get rid of the background colours on the style sheet.

We need to make a template of our existing code. This means that if we want to edit the website in the future, it will automatically change every page rather than having to waste time doing it individually.

we want the logo and navigation to stay the same, but we want the middle to be an editable region. On the design view, click on the area and the click insert, template objects, editable region. Call it content.

We now want to save as template. Call it template.

Click file new, page from template, then click create.

Save as index, and click ok to replace. Repeat for, home about etc.

Change the type in the content section for each template and save.

In the template section, click on each of the buttons, and on the toolbar at the button click on the folder next to the link option and select the templates for each button. Save all.