OUGD504 - Design Production: Designing For Web (Workshop 3)

Aim to have the minimum requirements done, but reach higher than this. We need to have a working index page designed for next Tuesday as well as our actual website completely organised so we have a clear idea of the content.

We are going to refresh what we did at the end of last week's session.

We open Illustrator and put in the necessary requirements.

This is what the save for web should look like.

Ensure that PNG-24 is selected and transparency.

Preload

All this is saying it is preloading the saved images. The open div id is for the container and then we lined up using the tab key to line up open and close div tags. We have open button AND THERE IS NO CLOSE BUTTON. Enter the close div for this so that it is lined up below.

We then need to make sure we add another button. Make sure it looks like this.

We then insert our new button by doing this.

We then need to select the correct files at this stage.

This is what it should look like.

We then had to repeat this process to create more buttons. This is what it should look like.

We now need to convert this in to four pages for it to work.

We go to file and save as here.

This is what it should look like.

Part 2 Margins

At the moment we have a content box which is 1024x768 px and then the bar at the top is 100 px with the rest of the length being 668 px. Using this information we can work out margins.

To do this we use the CSS box model.

1024 divided by 2 = 512 px

20 px gap around the egde (known as the padding)

We also need a 20 px gutter in between the two columns.

We are going to code these as two separate div id

#left{

1024 - 60 = 964

Each of the boxes are going to be 482px wide.

The height is 628 px

#right{

width: 428 px

height: 628 px

padding - left: 10 px

When designing our website we need to create a wireframe which has all of the measurements on as well as a scamp.

Stylesheet: This is how we apply the margins.

This is what it should look like:

How to format text:

Changing the font size:

This is what it looks like once we have altered the stylesheet and then gone back to the source code and put in the relevant information.

Put an image on the right hand column:

When working with images online it is really important that we do not redistribute someone else's images because this is breaching copyright laws. You can get in touch with people to use their images but you will generally be charged. Rather than using google you can use istock photo or getty images.

Make sure image is the correct colour mode, size before inserting it.

We can also work with video and audio.

Would not recommend uploading straight to website, go through vimeo.

Use sound cloud for any audio tracks.

Working with an image gallery  - use light box (create thumbnails and then click on the image to enlarge)