Design For Web - Dreamweaver Workshop (2)

Aligning the Container Centrally

to align something centrally in css if you don't want the annoying border at the top this is the code you need to do inside the container. 

left: 50%

right: 50%

-512px (which is half of the width of the container)

Converting HTML to Template

To convert the html index into a template so we can apply this to the other pages of the website, go to

Insert > Template Objects > Editable Region

we need to create an editable region for each of the columns and we can just call this column 1, 2 and 3.

The code should look like this. We need to put... 

<div id="column1"> 

for each column and also end each column with a closed division...

</div>

I have now written text inside this divisions which has been placed within my three columns. Allowing us used these sections for information.

Now this is set up, we need to save it as a template so it can be applied to all pages of the website. 

To do this we simply go to...

File > Save As Template

Don't leave the name as index. Here, I have changed it to Template because it is a template

Now we can DELETE THE INDEX FILE FROM THE DP2 FOLDER.

Creating  Website Pages

Open the new template file and create a new file from template, using the template file.

Save this document as .html, naming as the website page name.

File > New > Select Page From Template

Linking pages

Now we need to place the links inside the navigation section on the template file because we want them to sit inside the navigation bar we have created. 

Insert > Image Objects > Rollover Image

add name, files for buttons and the description plus linking the button to the website page.
For each button do the same but add it after the previous button.

Photoshop Link Buttons

We related the buttons as images in photoshop to go into the website.

When setting up the document it has to have a transparent background because its a smaller file size and you can add colour in dreamweaver which make the website load faster. In some cases it can be an image background when you want to include gradients like on the apple website navigation. 

It also has to be a 'Web' document of 72DPI because this is screen resolution and also the exact size of the buttons which we had previously from our scamp measurements. 

We created the simple text as two separate layers. One will be the link when hovered over, so I changed it to italics so when you hover over the link it will italicise the type. 

We then have to save these layers as separate images. and we need to select...

File > Save For Web

in photoshop and then select the file as PNG-24 because that is the best quality and it needs to maintain the transparent background. You can play around with compression to make the file as small as possible without effecting the quality. 

I saved the two files in the images folder as

Home1

Home 2 

Etc. 

Inserting the Link Images in Dreamweaver

To do this we need to insert the images inside the template navigation bar but mae sure that each image has it's own <div>

We go to

Insert > Image Objects > Rollover Image 

This gives us this box where we have to browse for both images in the folder. 

We then have to change the name in this case to 'home button' 

next we add the alternate text which is for blind people to be read out the images with special software. This is also called 'home button' 

then finally we browse the URL for the page link and click OK. 

This now gives us a fully functioning 4 page website . EASY.