Web Design Session3. OUGD504.

To begin this session we started off by making the last three buttons to link to our four pages.

This is the original html for the home button, and so we have to do the same for all of the other buttons. After making the buttons (original and rollover) on illustrator, we have to add in a new button on html, and so add in <div id "button'>, then close the div </div>.
after the open div, go to insert, image objects then rollover image and add in the rollover button in here.

Then you can just repeat this process for the rest of the buttons and it should all work. 

To make each button link out to a new page, you have to change the code of the rollover button. Where it says <a href="  the hashtag means that the link is going nowhere, and so changing this to the name of the page that you will link it to means that the button will then link to these pages when they are created. For example, change the name of the linking page to 'about.html' or 'work.html' etc.

From here you need to create the pages that the buttons will link to. To do this you can just simply change the content on the page that you have already created ( to keep the website looking the same) and the instead of just saving the page as normal, save the page as, and then name it as one of the pages that you want the buttons to link to. i.e. "about.html"
Then the buttons should link to the four pages that you have created.

Because the content of the website is pushed right up the the left edge of the navigation bar, we want to change this so that there is padding around the outside of the content so that it looks better. 


So, from here we want to create two columns on the website to house our content, with padding of 20px between them and around the edges. 

 And so, you need to work out the sizes and padding that you want for the columns, here the sizes of the columns were 382px by 728px, so that they would fit within the content section of the website. Then the padding would be 20px all around the columns so that the text wouldnt be pushed up against the left side of the navigation bar. 
In CSS you need to make the two columns using the code here, which means that the two columns would be the right size and the padding would be the right size. Then you need to call it in HTML so that it works in the actual website. 

when putting in text onto the website, you can't simply just press return for a paragraph break or a line break, you need to use these two things to do this in html. 

<p> paragraph break

<br> line break

Adding text into the website is easy, you just need to copy and paste the text into the correct place, after the column open <div>

To change the font style and size, you need to use css to create a <h1> meaning heading one, and then around the heading you want changed in html use <h1> and </h1>. 

To insert images into the website, we need to save the image as a jpeg at the lowest quality possible that the image still looks crisp. Then, on html, find the space where you want the image to be and then go to insert and image, and find the image that you want to include.