Auburn University
Auburn University
Toolbar Link 1 Toolbar Link 2 Toolbar Link 3 Toolbar Link 4 Toolbar Link 5
Auburn University
 

Guide to Using the AU Template

Full Header with Sidebar

All the text and link formatting and layout spacing on this page are controlled by Cascading Style Sheets (CSS). These means that none of the code to style text and links is included on this page, but in a .css file is linked to this document via a <link> tag in the header. This method enforces standards across the Auburn University website and provides for very easy web page creation for content providers.

It's recommended that you learn a little more about CSS before using this template. This way, you can learn how to use style attributes on a individual page basis and how to override the master style sheet is needed. Here are a few links:

Content Area

All text typed in this content area is set to the font family of Verdana, Arial, Helvetica, sans-serif with the size of 0.75 em. A "font family" means that the browser will use the first font in that list that your web visitor has (i.e. if the visitor doesn't Verdana, the browser will use Arial). All of the fonts are common and nearly 100% of users will have Verdana. Just like in a word processing application, you can bold and italicize words.

There is a buffer of 6 pixels set for the left and right of the content area, along with 8 pixels at the top and bottom. If you want to remove it, put style="padding:0px" in the <td> tag of this content area table cell. You can also increase/decrease the padding by replacing "0" with a number, perferably between 1 and 10.

All links are formatted to look like this. These can also be overridden using the style attribute.

Here are examples of what the HTML header codes (<h1>, <h2>, and <h3>) are formatted to look like:

Header Size Example 1 <H1>

Header Size Example 2 <H2>

Header Size Example 3 <H3>

You can remove the dashed line by adding style="border:none;" to the tag. Solid and dotted lines are also possible. You can use <h4> for a subtitle. There is no formatting placed on pictures (<img>) or lists (<ul>).

Top Links

These links are for subsections or services (i.e. site index, directory, etc.) provided by your site. If you look at the concept for the AU Homepage, you will see that these links provide drop down boxes for a search box and quick links.

College or Department Title

This title is an image and must be created using graphics software. It's perferred that each college or department use a unique image to put behind their title. The Office of Communications and Marketing will assist you in this process.

Toolbar Links

These links are for the main sections of your site. For an example, look at the concept for the AU homepage. If you have more or fewer than five toolbar links, you will need to add or remove columns from the orange HTML table. In Dreamweaver, you can do this in the Design View by right clicking on the last toolbar link, selecting Table, and then selecting Insert Column or Delete Column.

Sidebar Area

These links are for pages within a section of your site. Add or remove links as needed, but it's recommended to stay within the background picture of the Samford clock as much as possible.

Please note that the sidebar links may not appear in a column in your HTML editor (i.e. Dreamweaver) and you'll need to test the page in a browser.