Web Design Session2. OUGD504.

Navigation should always be kept consistent and visible on the page. For example, if navigation is at the bottom of the screen, on a smaller screen size the navigation would not be visible. 
Web Scamps - Simplistic drawings of the layout of a page, like a thumbnail of the page showing where everything could go and the variations of the layout that could occur. 
Wire Frame - All the measurements for each of the elements of the website, making it much easier to 
Creating a layout
1024x768 pixels - this ratio will work on 94% of devices available at the moment.

Using Stylesheet CSS
The first thing to create for this website will be the container in which all of the components of the website will be contained. 

After the closed bracket after body, press return twice to create a space between the body and a new piece of code. To create the div (container) use  #container and open up a curly bracket {. This will bring up a drop down bar of options. To specify the width choose width on the drop down bar and then you need to specify the measurement in this case it is 1024px. To then close this setting use a semi colon, and the do the same thing again to specify the height. 

To then close this div, use a closing surly bracket.

To then save this onto the website, go into the source code tab at the top of the screen and after body, open an angular bracket and write <div id and then you can choose the correct div from the drop down menu, in this case "container". Then to close this div write </div> 

To change the colour of the background of this container, after the height, find background on the drop down menu and then choose colour from the options. This will automatically choose the correct colour code and change the colour of the background. Then make sure to end the action using a semi colon. 

To align this container int he centre of the page we have to use percentages, and to always get it to align in the centre of any screen size we have to align it left by 50%, but then also move it back to the left by half of the size of the container. 
To do this you have to take away half of the full length of the container, so in this case it is 512px. This means that the container will be aligned 50% left, minus 512px, and so will always be aligned in the centre.

To create a navigatoin bar on the left hand side of the page, create a new div called "#nav" and set the width, height, background and position as before, and after position choose float:left so that the navigation bar is set on the left of the container. 

Then add this into the html as before by using <div id="nav"> and close the div with </div> and then you have a navigation bar. 

To insert a logo from illustrator you first need to save it properly, by going to save for web and saving it as a png - 24.

To insert the logo into css, choose the width, height, position and float:left as needed and to insert the image, choose background image and choose the image from the file on the computer.

To make things easier to see on HTML, use tabs to line up each open and close of divs to make it easier to see which is for which.

To create a rollover button for the side menu, you first need to create the space for the button within the container, and so set up height, width, position and float as needed. However to create a rollover button you need to use a set up in HTML rather than CSS. 

After inserting the div into HTML, go to insert, image objects and then rollover image, where you can choose the two images needed to change as the mouse rolls over the button. 
This then creates the code needed for a rollover button.