OUGD504- Mac Workshop 3

We stated off by making the rest of the rollover buttons the same way as before in illustrator.

To create a space to add the following buttons  create a new 
<div id button 
with a space for the java script to go and end with a closed 
div tag

Below is what the full code should look like for all four buttons

This is the code to link a button to another page 

in the <a href..... code section=,delete the hashtag and replace with the following:

To create the new pages, change the text that is displayed on the site relating to each category and save as the name of each buttons.

Making a grid 

You need to pre plan the dimensions of the page before you go into dreamweaver to allow for the content to be displayed

Box Model

To create columns type in the following code into the style sheet:

Back in the html type this code at the bottom of the code 

To add text insert it in between the right or left column code

to break up paragraphs use the code:

<p>

To change the font colour size, in the style sheet use the code:

To change the font style and size use this code in the style sheet

and apply it to the html:

To save a photo for web use photoshop

Use save for web settings and select jpeg

Adjust the quality slider and get it as low as possible without loosing the quality of the image


In dreamweaver click in between the right or left column code and go to:

The code should now look like this

Other types of content

use Vimeo for video

use Soundcloud for audio 

use Lightbox for image galleries  




Always create a SCAMP and WIREFRAME before using dreamweaver to make the process easier