The Microsys CSS Template
Assumptions
- All web pages either use MicrosysCSS.dwt directly (usually via DFS) or routinely update a local copy from the "master" version. This will allow us to keep a consistent look and feel as we add to or modify the template.
- We always start our DW Sites at the directory just above where the master Templates/MicrosysCSS.dwt file resides. This is to keep the absolute links to /css, /Templates, and /images working.
Dreamweaver Template names
The following Dreamweaver Template regions are defined in MicrosysCSS.dwt:
| Region Name | Use |
|---|---|
| PageHeading | Names the page, <h1> in the upper left hand corner, just under ITD nav bar |
| doctitle | The <title>, should usually be the same as PageHeading. Dreamweaver won't allow one region to be used in two seperate places, hence we have two regions to set. |
| BreadCrumbs | The page's breadcrumbs. Defaults to a JavaScript to build breadcrumbs based on the URL. If Javascript is wrong for your page, or you don't want breadcrumbs at all, you can control things via this region. |
| LastUpdated | Footer text with last updated. Defaults to last page save time in DW. |
| head | Any html tags that you want to set in the <head> portion of the document. Usually only needed for cache or robot control. |
| body | Your actual page content. |
Styles
Here are examples of some of the CSS styles available in the template. As new styles are added, please document them here!
Heading One
Heading Two
Heading Three
This is what "regular" text looks like. Nothing terribly special.
If you assign a paragraph or div a class of "callout" you get slightly smaller format, and a shaded box to offset things.
If you assign a paragraph or div a class of "note" you get full sized text with a grey background.
If you format as "preformatted" and select a style of "code"
you'll get an offset box with courier font from which one
can cut and paste.
You may or may not be able to get 80 column text in here.
You can also select a style of keyword to indicate literal text that should be entered exactly.
Just for fun <em>text looks highlighted</em>, so it's leaps out much more than plain italics.
| Apply Style | Sample |
|---|---|
| no style specified | Nothing to see here. |
| style="even" | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. |
| style="odd" | Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. |
By default, images float to the left, and text wraps around them. You can override this if you so desire.
To stop things from wrapping, apply the style "clearfloat" In this page, the header "Images" has such a style.
Images
Please put images that could possibly be used by others under the /images location, preferably in a meaningful subfolder. In particular, under the /images/icons is a directory for various icon sizes (eg. 16x16 or 24x24). This is intended to make it easy for folks keep things lined up on their pages.
All NC State images go under /images/ncsu . Referring to icons here will help us when re-branding time swings around again.
Notes on Previewing
Dreamweaver can use document relative, site relative, or absolute paths in URLS.
A site relative path (eg \Web00\images\ncsu\...) starts with the name of the site, as it is named on the workstation. If we were to use this style, we'd all have to co-ordinate the names we used, and having scripts use the resulting dwt files would be much more complicated.
A document relative path (eg ../images/ncsu/...) works from whatever the current document may be. DW rewrites every URL when the document is saved. This allows clean moves from place to place, but doesn't work with URLs embedded in javascripts, like onmouseovers and is hard to script.
So, the template uses absolute paths (eg /images/ncsu/...) This works as long as the web server's document root is where it is expected to be, but fails when you use "Preview" (F12) on the workstation. You get a chance to see what the page would look like if css and javascript were turned off. When the file is uploaded to a webserver, it displays as intended.
Sysnews
Unity Forums
Microsys Blog
Documentation