OUGD504: Design for web: Workshop 2

For a preparatory task we were asked to bring in five sketches of what we wanted the aesthetic of our website to look like. At the beginning of the class we walked around and gave feedback for each others sketches. These sketches are going to be used as the ideas which we work on and start developing.

Opening up dreamweaver an error appears, if you click manage sites the listed sites that you have previously have worked on. Click the site which you are working on.

The box above will then ask you where the root folder is from the last session, if you browse for the correct folder, click save, it should open it up.

Click index.html in the bottom right will open up the website you were working on

You can check if it still working by viewing it live.

Today we are going to create a CSS document.

With a CSS document you can only ever see the code. This is because CSS documents are closely linked to design elements like HTML.

CSS has many advantages over HMTL, including more fonts and a wider range of colours. If we were doing the design using HTML for four pages you would have to code four websites. Using CSS you only code one. You design all your coding and formatting on CSS on a stylesheet, and then you link this page to every other page.

The first line of code is telling you what characters you're using, so what keyboard. The second line is just a note labelling whats going on. To write a note you type /* to open, type your note and the */ to close.

The first code we will create is called a generic CSS code.

If you move down two spaces and type body and then a space (space is important) and then typing { a drop down box will appear with all the codes you can create.

If you click enter this means that everything you code will be coded in the body. Click a letter will take you down to all the codes beginning with that letter:

Today we are coding our font, this is a generic code. If you scroll down to font family you can then choose what font family you want. After selecting your font again click enter.

After the font family you type a semi colon to close the code and then } to close the body up.

You can then save it to your root file and it should appear in the bottom right with the other folders

We are now going to link the CSS stylesheet to the HTMl file. Go to the right hand side where it says CCS style, click the link icon, browse folders and find where you saved the stylesheet:

The CSS knows where it has to go so will imbed itself automatically. You know its worked if you've got these options at the top.

You can check of the stylesheet has worked if you live view it. We coded our font, so we are checking if the font has changed to what we picked.

We are going to make a fixed design, the most basic, the dimensions are 1024 x 768.

We call this a container, this allowed everything to be wrapped inside of it.

Going back onto the stylesheet, click return twice type #container click space then return.

If you then type { and click enter, then by typing h the options of h will appear, click height and type the height in, then close it off with ; and do the same for the width but by typing w so the w options appear.

You always need to close them off with a semi colon ; and then close the body with }

Remember to put px after the numbers i.e. 768px

To enter the stylesheet '#container' into the HTML you need to go to the body bracket click enter, type < type div, a drop down box will appear click enter on 'div', then click space and type 'id' your container option will appear click enter and then close it off with > if you then click enter type < again and then / and the div code will close (</div>)

Your page should appear like this once viewed

Going back to the style sheet, and between the brackets of content if you click enter to go down a space and type po a drop down will appear and the option position will appear, select that then choose which position, we are working with fixed. Once selected close it off with a semi colon ;

Using the same process type 'top' select it, then type 0 and close it off with ;

By typing this code it has got rid of white space along the top and the left in the preview.

We are going to align our content box into the centre of the screen.

By working in measurements its hard to give a specific measurement to get it bang on in the centre as the browser windows are always changing.

So from the left edge you can move the box 50%

We then need to move the box back 512 pixels (half of the container width size)

For navigation we can have it aligned left or top. We are going to align it 150px high

We then add this to the HTML file. Remember to close the div with </div>

We are now going to add a logo onto our website. We were asked to create a logo in illustrator

We need to save the image as small as possible, also the background needs to be transparent. If you go file > save for web you will be able to compress the image.

To allow for a transparent background you have to use GIF. or PNG.

Then save that into your images folder in the root folder.

Back to dreamweaver in the stylesheet, enter the code:

When clicking position, instead of clicking fixed click relative.

You need to put it into the HTML screen coding in between 'top'

For the navigation buttons, we don't need to create four different buttons, we just need to make one then duplicate it in the HTMl. We created two buttons in illustrator, the same position, same font, just different colours. We saved each coloured button separately.