Geog 355: Geographical Information Systems II
Spring 2009
6
Before we continue this is a good time to introduce CSS. Cascading Style Sheets are an
efficient and powerful way of designing the style of your website. Keeping the style of a
website in a separate file than the content (text, images, etc...) allows you to easily change
the style of your page without altering the content. CSS can style three types of objects:
classes, tags, and ids. We will only style tags and ids, but classes are one of the most
important once you have created your website. Discussing these further is beyond the scope
of this lab.
d) To give your web page some overall style go to the Properties Pane at the bottom of
the window and from the Sty
le drop down list select Manage Styles... From the Edit
Style Sheet Window click N
ew... Click the Selector Type: Tag and enter the Tag:
name 'body'. Because we don't yet have a style sheet we must create one (and only
one) by selecting Define in: (New Style Sheet File). Click OK. The Save Style Sheet
As Window pops up. Save your CSS style sheet in your MyWebPage folder as
geog355 and click save. A new window called CSS Style Definition for body in
geog355.css should appear. There are categories on the left and types of styles,
formatting, etc... on the right. In the Type category define the F
ont: as Arial,
Helvetica, sans-serif. Don't worry about the styles too much for now about, you can
come back later after we have made more changes and get a better feel of the whole
website and what we are trying to achieve. Click OK.
We must change our icon set on the Floating Panel above before the next step. To do this
click on Common with an arrow next to it and select Layout from the drop down list. You
can return to the Common tools when you enhance your page later.
Beware of typos in the following sections when naming objects, they will make
your life extremely difficult.
e) Select the first paragraph (title text) completely and click on the Insert Div Tag
button (second from the left). Give your first paragraph the ID 'header', leave the
rest and click OK. Do the same for your 2nd, 3rd, and 4th paragraphs giving them
the IDs 'navigation, 'content', and 'footer' respectively. You should now have red
boxes appear when you put your cursor over the edges of your paragraphs. We have
given each paragraph an id that we can apply styles to.
(39 pages)
Manymanuals.com
Manymanuals.de
Manymanuals.fr
Manymanuals.it
Manymanuals.pl
Manymanuals.cz
Manymanuals.es
Manymanuals-pt.com
Commentaires sur ces manuels