Design for Web / Workshop 2

5 / 11 / 13

OUGD405
DESIGN FOR WEB.
WORKSHOP 2.

To re open you site, you first need to add your 'root' file back into the user work file. Open dreamweaver in import the root file so you site site is then present in the right hand side of the screen.

Create a CSS page by opening a new document as shown below.

Today we will be working with CSS as you can use more colour and layout options. Using HTML you have to enter all the codes by hand and then repeat this a number of time regarding how many pages are with in you site.

CSS links all you pages together so they run consistent with each other.

The first line of code is what keyboard you are going to use. The grey type is just a note telling the designer what something is.

A generic code is something that is consistent through the entire webpage such as the typeface used. To enter information into the body. Use a { opening bracket. This will the open up a drop down box with options available for you to enter,

the drop down box give you and option for a variable with out you adding it manually.

for every css tab you create you can have everything on one line. however you have to scroll all the way across the line if something goes wrong.

By having your code on separate lines it is easier to re-edit anything in the future. Here we have typed in an f which takes us to the options beginning with f. select font family and choose the file you want close the line with a semi colon  to close the selection and then close the bracket on the lower line.

This wont be seen on the site it is just an indicator on the format of the site. Make sure you save all, and preview your page. As you can see the font has been adjusted to my chosen font.

To open the stylesheet into your existing site file go to CSS Styles, properties and click the little link in icon. select you style sheet and open. 

To know that your style sheet is attached, check the right hand side of your window an make sure that your style sheet is now present.

We are goin to create a fixed design - 1024 x 768. We have to create a code for this box. The box is usually mamed the container or the wrapper so it is visible with in the code and shows that this is containing info with in the box (#container / width:1024 hieight: 768)

To see if you box is working you can give your box a colour. You dont have to keep this if you want the container to remain blank but how now you can make sure you code is working.

 You then have to add this sheet to you site bu entering it into the code.

To place this box into a specific possition you can choose for the drop down box.

3 you would use would be ablaloute, fixed and reletive.

Fixed - we can tell the box were it is going yo be positioned.

In regards of the container and its alignment you can choose whether it is to the left right or centre. By working in measurements is difficult as you cannot give the page a specific number. To move the box to the middle you have to work in percentages

entering 50% to the left  pushes the page too far over.

The width of the box is 1024 so by leaving the left edge at 50% you can the pull the box back by half by misusing half of the measurement of the full box.

To add a new bar of space along the top of the page you have to determined how big you want this space. To enter the code, add a new hashtag name #top and open a new curly bracket. type in the measurements to this new box as well as the colour you want this to be by selecting form the drop down options given.

To add a logo or image on to your site you have to be 

To save an image for web you have to compress it to make it as small

You can never work with half pixels so it is important to make sue you round up or down by half when saving and setting up an image to include in you site.

In the Illustrator make sure your document is set up for web use and is set to the correct size, illustrator already sets up the dimensions in px.

You also have to ensure that you save you document for web.

This leads you to page that give you the options on what format is best to save your image.

photographic - jpeg (does not save with transpanrency)

vector images - png-24 (allows to save with transparency)

First type in the code of were you want the image and how big the image is. you select the image

Add this sheet to your site through selecting your saved image in the root folder.

To create a rollover image, create a base layer and a over lying layer that are both positioned correctly with in the boundaries of the frame.

Pace the first image in the top box and the image that you wish to show when the mouse is hovering over the top in the second box.

For a pop up label (used for the visually impaired) enter what this navigation toll is.

This enters in a whole lot of new code that the software has developed for this particular feature.