SSU Website

This site is still in development. Some content is not yet posted, some may be changed at a later date.

This screenshot shows the content area of the page highlighted in pink.

This part of the site documents the variety of style options for text, images and other items in the content area of the page.

The Content area of the page is everything inside the content div: <div id="content">

In the case of the "Blank" page type, the content area is everything inside the content-nonav div: <div id="content-nonav">

In general, the content area is the central area of the page, bounded by the banner, navigation and footer.

Most HTML elements have default styles in the SSU stylesheet. Use standard HTML elements, such as <div>, <h1>, <h2>, <p> and <li>.

Sample HTML code is displayed like this:

<h2>This is a heading</h2>

Longer snippets of code are displayed like this:

<ol>
<li>list item</li>
<li>list item
<ol>
<li>nested list item</li>
</ol>
</li>
<li>list item</li>
</ol>

You can copy and paste any code on these pages into the code view of Dreamweaver or other HTML editor.

Dreamweaver and optional CSS Classes

Most of the optional content styles are used by applying a class attribute and value to an HTML element. These pages describe the class values to use for each optional style.

In Dreamweaver, you can apply a specific class to an element by selecting the element (a heading <h2>, for example) and then using the Class popup menu in the Properties panel to select an appropriate class (in this case "fancy").

This screenshot of Dreamweaver shows the popup menu being used to select the "fancy" class.

If you are comfortable in the Dreamweaver Code View, you can use the pop-up code hints.