You Are Reading

OUGD504 - Studio Brief 2 - Web Design - Workshop 2

Navigation must remain consistent in a website. This will prevent confusion of the audience which enhances the user experience and makes the site clearer.

The site we are going to create will be 1024 x 768 pixels. This will work on 95% on web enabled devices.


The box that contains the website design is called either Wrapper of Container.

To make notes within css start a line with a /* and close it with */


To create a Div, you begin the line with a # and then you name it. When opening a curly bracket, it will open up commands for you to choose.


This is then applied to the right specifications and then closed with  a curly bracket.


This then needs to be named and finished in the html, first save the css and then go back to the index page. Below the body, apply the open angular bracket and name it.


This is then closed with a forward slash.


To add a colour to the background to make sure it's working, go below the height restrictions and apply the code background and then colour and then save.



To get rid of this 10px border around the edge of the container:


This completely aligns it. If you want it to be centrally aligned, the left must be alligned to 50%.



That creates the problem of pushing it 50% across. To remove this problem, use the margin tool to make this minus half the value of the width.


To create the navigation bar, a new div is made with the correct proportions as well as a different background colour to show between them


To put the logo inside the navigation bar:


To create rollover buttons, create the button in illustrator with two layers one normal and one with the added feature of it aesthetically if it was rolled over.


Then the dreamweaver stuff:



Tah-Dah!



Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.