DESIGN PRODUCTION - BRIEF 2 - WORKSHOP 3

Firstly, upon opening Dreamweaver I realised I had made the mistake of not saving my progress from last week, luckily Simon saved me and let me use the code from his example site.

When working with interactive buttons dreamweaver places all the code in long lines, this can get confusing when working with multiple buttons. To overcome this problem simple press enter next to the last </div> to send it to the line below.

Next, we went back over how to add in an interactive button.Underneath the last </div> add in the code for a new button;

<div id="button">

Next, go to, Insert > Image Objects > Rollover Image.

Then select the correct files and upload. Make sure after each button to move the </div> code to the line below. 

This is the code used to link to another website.

The hashtag means no website destination has been selected. Therefore, delete the hashtag, and add in the name of the desired page.

Repeat this for each button as they will link through to the next page.

Once these have been saved, change the type at the bottom of the page to help you differentiate between the pages.

Then, use the 'Save As' to save the page into the root folder, ensure that the name of the file matches the name of the button you want to link to it.

Once this has been done the web page links should take you through to the pages.

BOX MODEL 

Sizes and dimensions must be worked out before creating the website or you run the probable risk of your content being unable to fit.

Measurements for the website.

To create type columns type the following code into the style sheet;

to put a break in text use the code;

<br>

SITES USED FOR MEDIA UPLOADS

Each of the following programs allows designers to embed the media onto your website, this means that the media uses the host websites bandwidth and therefore it does not use up ours.

• Soundcloud - Audio
• Vimeo - Video
• Lightbox - Image galleries.