OUGD504 - Design Production: Designing For Web (Workshop 2)

• Apply what we are learning to our own bespoke websites.
• We then went round the group and left feedback on everyone's scamps. Simon noticed that a lot of people had gone against web standards which isn't necessarily a bad thing. However this session will help us learn more about what we can and can't do.
• When we open up DreamWeaver it will come up with an error box and we need to click manage sites.
• Then click on the pencil so that we can edit it.
• index.html is always the name of the home page.
• Today we will be using html alongside CSS.
• The stylesheet we create will be linked to every single page.

Start of session

We were told to create a new document by doing the following:

Below is the code which comes up when you set up a new document. If you ever want to write a note to yourself you just do /* and write message then */ to close it. This will not interfere with your work.

Every time we write something we need to close it. To close it you need a semi colon.

This is what it looks like when it is closed.

We now need to link our stylesheet to the html page. We need to click on the link at the side.

This should have changed the actual web page font.

When designing a website it can be a fixed size or responsive. We are going to start off by looking at fixed sizes. The size we are going to work with is 1024 x 768. We are going to create a rectangle which is going to contain the website. We are going to create this in CSS.  We need to create a div ID. The first name suggested is a container. The other word which is sometimes used is wrapper. To create a div ID we use hashtag and then container { 

# container {

When laying the CSS out you can have it in line however it is easier if it is set out like this. This is easier to then go back and made changes to your work.

We then had to type in between the body to get the coloured box.

We now need to give it a position and get rid of the border.

We then want to centrally align the box. We have to work with percentages to centrally align something. This is a complicated process. First of all rather than left being 0 we change it to 50% however this doesn't make it central straight away. 

Always move it half of the width backwards so if it was 800px it would be -400px.

After the break we were shown how to create a navigation bar. 

First of all we have to create the bar using the pixel size. 

Using Illustrator we created a logo for our website in two minutes. When doing this we don't need a coloured background. Because we didn't have very long to create this I decided to design mine so that it resembles the earth with a piece of sugar cane overlapping it.

To get the logo on to our website we then had to insert more code.

We then used Illustrator to create our own buttons. We had to save each button individually.

To then set the button up we had to do the following:

This is why we need to save the images as 1 and 2 so that we can select the correct information.

Below is what my button looks like before and after.

Now that we have been taught we can put it in to practice and try designing our own website. It would be best to do this after having a crit though.