Web session 2

Re-opening file

Copy file back into user work > Open Dreamweaver

Top of document > Manage sites (To link back to folder)

Double click name of file

Browse and find original file

Check you file drop down menu

Relative Positioning = White border

Delete position & Float

Position: Absolute - Specific positioning

X Horizontal 

Y 

Top: 0px;

Coding:

Result: White space at top removed

left:0px;

Removes space at left.

To centre align:

Coding:

Margin-left numeric value = Half of width minus of container

Centralised in web browser:

Dream weaver template

Useful for saving time creating pages

Can clone pages from template

Index page > anything visual within body tags

Creating template

Insert > Temlate objects > Editable region

Editable Region

Name accordingly 'leftcolumn'

Savings

File new > page from template > select saved template

File > save as > index

Keep creating new documents, using this template to create all pages wanted

Buttons / Rollovers

Open Photoshop

Save background colour as Transparent - smaller file size

Create layer, one for original, one for roll over change

Save for web

Jpeg for non-transpacency

for transparency PNG 24

Adding rollover buttons:

DW > Template > Code mode

Head Section

Alternate text - searchable via google -when you hover over an image, it gives a brief explanation of item. Gives images alternate texts (someone blind, program will read description of reader)

Select original image

roll over image

Write suitable text

Link to page

Press ok - result:

Do for each button

Go into design mode and name accordingly

CSS Box Model

• Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border - A border that goes around the padding and content. The border is affected by the background color of the box
• Padding - Clears an area around the content. The padding is affected by the background color of the box
• Content - The content of the box, where text and images appear

Avoid using margins

Just work with padding

Column will move to bottom.

need to minus from width and height of box too

-20 for instance in this case it takes 10 pixels either side

Inserting image

Save image in Photoshop - image size 442pixels > save for web > jpeg

Dream Weaver code folder (correct page) Insert  > image > select

Style sheet - add padding 

width: 442px;

height: 748px;

padding:10px;

Save