MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER Instrukcja Użytkownika Pobierz pdf (Strona 7)

Geog 355: Geographical Information Systems II

Spring 2009

f) Now select all the text in your web page, all the paragraphs, then click on the

Insert Div Tag button again. Give all your text the ID 'container' and click OK. Now

return to the Properties Pane and select Manage Styles... again from the Style drop

down list. Select geog355.css and click E

dit... or simply double click on geog355.css.

Click on New... Choose Selector Type: Advanced(IDs, etc...), for the Selector: (or

Name:) enter '#container'. Click OK. In the Box category enter a width of 750. Click

OK.

Alright let's see how that looks - while in Dreamweaver hit the F12 key on your keyboard.

Remember to save your work. Wow that's ugly. Close your browser and let's get back to

work.

g) Using the Manage Styles... option from the Property Pane >> Style, open

geog355.css and create a new CSS style. Select Advanced (IDs, etc...) again and

enter the Selector: (or Name:) '#header'. Click OK. Set the Type category Size as 24

- this is the text size. Click Apply at any time to see how the changes affect your

design. Choose a background colour (try blue if you are not creative) like you did in

step 'f', set Box >> width = 750, and Box >> Float = left. Click OK.

h) As above, go to manage styles. Create a new CSS Style, an ID with the Selector

'#navigation'. Click OK. Set Type >> Size = 12, Box >> W

idth = 200, Box >> Float

= left.

i) Repeat the step above for your content and footer paragraphs using the parameters

described below:

• content: CSS Style '#content'. Box >> Float

= left.

• footer: CSS Style '#footer'. Box >> W

idth = 750, Box >> Float = left,

Background >> background color = same as my header (blue?).

Let's see how that looks now - press F12. The colours are probably awful but you can tweak

that later.

j) If you go into the Box category for one of the CSS styles you can see the Padding

and Margin Panels. By changing these parameters can make your web page look

dramatically different. The adjacent image shows the relationships between your

content, padding, and margins. Note: Be careful with margins they can break the

flow of your layout.

1 2 3 4 5 6 7 8 9 10

Brak uwag

MACROMEDIA DREAMWEAVER MX 2004-USING DREAMWEAVER Instrukcja Użytkownika Strona 7