OUGD504 - Design for web session 3

 Design for web session 3

Creating the rest of the buttons and making them link to each other and work:

'h ref' is the reference of the number that leads nowhere.

By replacing the hashtags with the name of the pages the buttons will be linking to, we can make the buttons link to each of the other pages.

By writing, for example 'this is the home page' we can determine whether the links are working properly and legitimately linking to each of the four pages. I replace 'hello there!' with 'this is the home page' and I click save. 

I then replace 'this is the home page' with 'this is the about page' and instead of clicking save, I click save as. I then rename 'index.html' to 'about.html'. I do this for all the pages! All the pages are basically the same except for the name of the page and the one line of text. But in this way we can test the buttons and check they all work.

The CSS box model

By creating a wire frame design; IE a quick sketch and working out all of the margins, padding and borders you can then work out all the requirements for your CSS coding before you jump on the computer. 

<p> means paragraph break for bodycopy.

<br /> means title break for bodycopy.

selecting the font size.

it makes the font size smaller.

selecting the font colour

it changed the font colour.

Determining the title from the rest of the text:

in CSS, write 'h1' to determine the specs for the title/ heading. I type in the font size and colour like in the previous font determining sequence.

Then, in the html code, to determine or 'call' the text that you want as a heading, put <h1> </h1> either side. I save and then refresh my website:

The heading is determined as a separate part of the text.

Inserting an image:

After working out your wireframe design, you'll be able to know what size and where you want your image. In this case, I have found the image on Google images. I took it into Photoshop and then with the square tool I went to fixed size and typed in the desired size of the image. I then selected the area I wanted of the image to include.

Then, in the 'right' section that I already determined (above) I went to image > and picked the image.

Useful tools for creating a comprehensive website:

• Vimeo is a service will compress videos for website design.
• Soundcloud for sounds
• Lightbox for image galleries