OUGD504- Mac Workshop 2

For the first part of the lesson we had to present the three Scamps we were asked to draw to the class. We went round the class and wrote some feedback. The feedback I received was:

The feedback I received confirmed my own thoughts as I think SCAMP1 is the most successful design.

However, I think the links needs to be at the top of the page to avoid the design being compromised by different screen sizes.






To start off we had to tell dreamweaver where the root folder was saved.

Go to Sites/ Manage sites and select where you saved the root folder and save.

To open the site click the index file in the side bar

Style sheet

File/ new

Select CSS in the first column and click create

In a CSS document can only see the code 

CSS has many advantages over HTML

CSS allows you to design multiply pages using one code 

You do all the designing in the style sheet which links to the other pages

The first line of code tells you what characters you are using

The second line line of code allows to write notes to label what you have done 

On line 4 write body, this relates to the body in the HTML file

Use a curly open bracket which opens a menu and select font family

Select a font family and press enter 

add a semi colon, go to the next line and close with a curly bracket

Close the style sheet document and go back to the HTML document 

In the right hand corner there CSS styles box

Click on the chain link symbol the link the style sheet 

Locate the style sheet and click ok

If it is correct the code in the head will look like this

Design

Dimensions:
1024 wide
768 high

you need to create the code for the box, container/wrapper. 

DIV ID:

#container
width:1024px
height: 768

Hast tag container, space, open curly bracket and press enter 

Select height and type in the dimensions.

End with a semi colon on each line 

 on the next line press b and select background colour

semi colon, enter, the close with with a curly bracket

Go back to the HTML file and make a line under the body:
<div

space, then id

Then select container 

to finish under the text write:
</
then 
div>

The preview should look like this 

Position

after the background colour type in position, then choose fixed 

type in top and input 0 with a semi colon

press enter, then type left, 0 semi colon

press enter, then type left, 0 semi colon

It will now look like this

Alignment of the container:

To position something you have to work from the left edge

change the left to 50%

it will now look like this

on a new line type in margin-left

then input -512px

It now looks like this

Navigation:

Align top:
height:150px

on a new line type #top{

press enter and type in width and the px amount

 Do the same for the height

Go back to the HTML and type in <div id, then top>

press enter and close the div tag

It will now look like this

Logo

We had to create a logo in illustrator

To save the logo go to file, save for web

for a transparent background use 
PNG
GIFF

save the file in the images 

In the style script type:

Chose relative  

On the next line chose float

then choose background image

Go to browse and select the png file

Go back to the HTML
type in the the div tag

It will now look like this

You can never work with half pixels


Rollover button

Create a new doc in illustrator and write home

 Create two layers and change the second layer to something different

create the code in the style sheet as before:

To allow for the java script to be input and to make it easier to follow clean up the div tags so they align with the corresponding tags

Create a div tag for the 'button' as before 

Under the logo div tag make a new line for the rollover button

Go to insert, image objects, rollover image 

Load the home png files to the original and rollover image sections and name the alternate text box 'home'button'

Home button

Home button when curser is hovered over