OUGD - 504 - design for web workshop 3

      \\\\\\\\

      |  .  .  |        |''''''''''''''''''''''|

      |   /    |       /   Bonjour |

      |  =    |        |________|

___         ____

| |                   |  |

|    (.)        (.)   | |

|                      | |

We have made another 3 buttons for rollover which are 

contact 

work 

about

we made these in illustrator in the same way we did for the home button last session, save the buttons by saving file for web in the root folder sub folder named images.

underneath the last button we input the text <div id then a box pops up with the word button in, press return twice then input the div close. repeat this 3 times each time underneath the last button.

a href="#" is the code to link a page to another page, where the # sits you need to delete this and input 

a href="index.html" this page doesn't exist yet but this is the link that we will be creating. to create the page we first go down to where we originally had home written on our site. to distinguish between each page we put in this is a home page, we save that file then go down the same line of text and put in this is a work page. This time we save as and save that specific page as work.html in the root folder. We repeat this for all the pages saving as and naming them differently each time.

Were now going to create some boxes within the pages for a columns layout 

This is the coding for the columns in the page. you do the same thing for the left and the right sides of the page. We then needed to go back in to the source code page and crate another line of code before the close div on the page to link it together. 

We then put the text from the page between the div so you can see the formatting of the columns, then I went to lorem ipsum to get some text to put into my other column.

We then learnt how to place an image on a page which was relatively simple, first we needed to select an image on the internet of a relatively small file size. then we take the image to photoshop and resize to the dimensions we want, save the picture as a jpeg file and go across to our source code and in the column we want the photo to appear in create another line between the div and just go to insert - image then select the relevant image 

If your website requires video vimeo is the best site to use because there are size options on the vimeo website, for audio the best site to use is soundcloud. The benefit to using these sites is because the videos are embedded so you are not using any space on your site the bandwidth is used up from the hosts website.

Lightbox is a good website to create thumbnail images that will open up on your site. - lightbox