OUGD504 - Design for Web: Session 3

Navigation Bar
Today we made the remaining three buttons for the navigation bar.

I made two layers in Illustrator - one with the normal button and one with the rollover button.

I saved these both using the Save for Web button.

I made sure to choose the setting png24 and check transparency. I saved this one as about2.png in the user work folder.

This is the code when all the buttons are done.

To make it a rollover image in html, I need to select this button.

Then fill in this information.

I then made them all link to different pages by changing the code slightly.

Grid

To make a grid you need to make a CSS box model, which will include padding and margins.

The padding is the space between the columns and edges.

This is the html for a CSS box model:

The CSS:

How it looks:

To make headings and paragraphs, I added 'p' and 'h1' etc to the CSS and HTML.

When adding images to websites, you need to pay the license for them, and sites like stockphotos and getty images sell them.

For this, I found a large image from google images and opened it in Photoshop.

I needed to make sure it was the right resolution so went on Image > Image Size

Then I clicked on the square box in the left toolbar, and changed the size to 482px by 628px as this is the size I want. I then cropped the image to this.

I then saved it to this, and the quality should be as low as possible without look pixelated. It also needs to be saved as a jpeg.

Then I went onto Dreamweaver, and added Insert > Image, which put the code in. This is what it looked like on the site.

 Lightbox is a good website which goes through how to make an image gallery.