Wed Design Session Three

Web Design Session Three

This has changed as it will preload the rollover images. The home button has loaded so it wont load when someone rolls there mouse over it.

So our <div> all line up so the logo has an open then a close lining up due to spacing.

After you have <div id, press return then button will come up on the list shown. Then double click on button and close brackets>



Then we just need to add a rollover button by:

When I was adding my buttons, I realised that my buttons wasn't lining up or the right size, this is due to me export the buttons rather than saving for web. Also I need to start saving an illustrator format too so I can just edit this by changing text rather than the whole thing again.

This is a mistake that I am glad I have done so I know what to do next time. 


Then you also change the colour on the style sheet by delete the whole and the hash tag then when putting in the hash tag the colours will come up again then just save and then preview.


This is the code for the link to another page. If it is going nowhere we have to tell it its going nowhere.

So now I have entered somewhere to go for the link to go here you can see it in the blue text, the name.html

We have to put index for the home page.

So then we change the container text to this is the home page then save. Then we just need to change this to this is the about page and then save this as save as. about.html this is will then be linked to the link that we have entered in each of the button links to send it somewhere.

As you can see at the top it has changed words.

Now we have four different tabs so we can work on the pages individually.

Box Model

This is made of four different areas, in which we can define in CSS. What you do is specify the width of the <div>

If you have an area on 824 pixels wide. If you want to be 20pixel around, if you made the content area 824 then the padding around 20pixel then the width overall need to be 864pixels wide. You need to minus it off the content all the other factors we add.

                                                                                                                

Now we are going to make a two column template:

So here is how you would put this into your website:

So go to your style sheet this is the same on all the pages.

You need to put this text in the style sheet. Then you need to go to your style sheet and then 

You need to make sure that you <div> are closed and neat and in order so it is easier for you to work out later once adding all the content.

If you are putting in text you need to put paragraph breaks otherwise it will look like this:

<p> for paragraph break

<br> for break of line here as it shows

Then you can change the colour of the font by going onto your style sheet then going onto your style sheet and adding colour then choosing the colour you are wanting.

You can create a different style text by adding a style code on the style sheet, by doing this: 

 Then to make other style codes you do h2, h3 and so forth.



Adding Video on your Website

Use vimeo to add video to your website. It formats the video for you and therefore will not take any room up on your website.

You need to embed the video onto your website.
Also you can change the size you want it to be and also to automatic replay and loop option.



Adding Image to your Website

To add a image on your website use jpeg for photographic image and png for transparent background. You need to edit it on photoshop image size. Make it the width of your column and then make sure the revolution is 72. Then then jpeg. needs to be as low quality without effect the image.