Basic SIG sites: instructions for using the files
Lou Quillio, webmaster of STC Tech-Valley (lou.quillio@stc-techvalley.org) provided the XHTML 1.0 strict and CSS for a template for a basic STC SIG website and most of the instructions on this page.
CSS is powerful
This demonstration shows what can be done with CSS: http://www.csszengarden.com/. Click a design link on the right and see the page transformed based on different styles.
Use XHTML 1.0 strict
DOCTYPE declarations provide a basis for validating XHTML markup. More importantly, user-agent software (web browsers, screen readers, and other devices) base rendering on DOCTYPE. Browsers maintain a "quirks" mode to accommodate non-standard markup but quirks mode is not consistent across browsers. For new content, it's wise to select a DOCTYPE, stick to it, and avoid these rendering issues.
We are converting several STC SIG sites to this template, using XHTML 1.0 strict but created using DreamWeaver MX 2004. This tool does not create XHTML 1.0 strict, so much of the coding is done manually and the tool shows occasional errors.
Semantic markup
CSS rides atop XHTML, so proper XHTML structure is essential.
HTML elements are used for EMPHASIS, CITATION, and STRONG text. BOLD and ITALIC are not used unless in a CSS declaration.
The HTML and CSS include five semantically-defined <div>s: #header, #navTop, #content, #footer and #navPage. All portions of the rendered page are contained within these <div>s; #navTop is contained within #header.
This practice allows refined formatting using CSS contextual selectors. Paragraphs (<p>s) within #content, for example, may be styled differently than paragraphs in #footer, without altering the XHTML.
The classes defined are .byline, .announcement .mission, and .copyright.
How menus are marked up
Since a menu is a list, list markup is used. Good practice dictates using no vertical bars to separate items. Because of the list markup, when the page is rendered without styles or non-visually, it still makes sense.
Unstyled and styled pages
There is an unstyled home page with links to the other template pages, styled. An unstyled page like this is called an HTML wireframe. It is used to specify the architecture of a page without specifying graphical design or rendering.
The styled home page also has links to the other template pages.
How to use the template
If you want to use the template please save the source and paste it into your editor. If you are using DreamWeaver you will see the parts that go in the DreamWeaver template. Save the pages with a different name to make new pages in DreamWeaver, as XHTML 1.0 strict is not generated. If you improve the template please send the link to ann@annlwiley.com.
There are improvements to the CSS at www.stcsig.org/id. January 31, 2006.