Elements of DCN Web Style (With apologies to Strunk & White) General Start with a template page. Choose the one that best matches the form of your document, download the template and use it as a skeleton for your page. Design should assume tight, even decreasing, bandwidth. Aim for 40k or less for the total text and graphic elements of a page. Note that the standing banner and base elements use 25k. All content in the DCN web area is subject to review by the web team and the DCN board. Notify the web team whenever a page is significantly changed or when a link is added to a commercial, questionable or potentially controversial site. Layout We target 640x480, 256-color displays. Pages should use a white body background. Use of background images should be rare. Our basic layout encloses its elements in one or more centered, 540-pixel cells. Each page has a topical banner and standard base, each of which is also 540-pixels wide. This layout visually binds the banners to other page elements, provides better control by creating a fixed canvas and keeps text lines to a readable length. If a page is long, break it into multiple tables -- large tables take too long to load. Use <H2> for the top heading. Headings should be left-justified unless they precede a large graphic element or multi-column, centered or tabular text. Then, they should be centered. All main words in titles should be capitalized. All subsequent headings should be <H3> or smaller. For bullets on high-level lists, use our standard bullets <IMG SRC="/graphics/bullet.gif" ALT="*" WIDTH=14 HEIGHT=14 ALIGN=BOTTOM> as terms (<DT>) in a compact dictionary list (<DL COMPACT>) when appropriate. Bulleted text will be within <DD> definition tags. Standing Banners & Page Bases We have page-top, image-map banners for all the major content areas of the DCN web. They are our principle orientation and navigation device. Add these banners and the standard page base by placing the appropriate Server-Side Include (SSI) code in the page. The server expands this code by including the matching file when it transfers the page to a browser. It is very important to use the SSI code on your pages rather than the expanded text. We can instantly update the banners and bases on all pages that use the SSI codes just by changing the include files. If your pages don't use the SSI code, they won't be automatically updated. The SSI code for each standing topical banner is: Business <!--#include virtual="/include/business.html"--> DCN <!--#include virtual="/include/dcn.html"--> Education <!--#include virtual="/include/education.html"--> Government <!--#include virtual="/include/government.html"--> Living <!--#include virtual="/include/living.html"--> Organizations <!--#include virtual="/include/organizations.html"--> World <!--#include virtual="/include/world.html"--> The SSI code for the standing base is: <!--#include virtual="/include/pagebot.html"--> This expands into the base button bar, copyright notice, URL indicator and last-revised date. If you need the base button bar without the copyright and other text, use the code: <!--#include virtual="/include/base.html"--> Images DCN web philosophy is content-oriented. Images should not be used for page decoration. Use GIF-format images except for photographic art. For photographic art use JPG. For GIFs, use colors from the 216-color cube recommended by NetScape & Microsoft to minimize browser dithering. Try to draw all graphics on the same page with the same palette. Use reduced-palette (e.g., 4-bit) designs when possible to reduce graphic sizes. All images should bear ALT arguments describing the graphic (or ALT="" if graphic is decorative). If image maps are required, use client-side image maps that fall back to server image maps. Animation makes it hard to read nearby content. Avoid it. If it's used, animation should stop after a single iteration. HTML Guidelines We use HTML 3.2 as coding standard. Avoid non-standard features like Java, JavaScript, VB Script or frames except where vital to particular lower-level pages. We are committed to providing content that is legible via Lynx. If a given page just won't work with Lynx, provide a text-based alternative. While HTML allows using the <P> tag as a separator, we encourage you to use it as a container, <P>...</P>, to ease transition to HTML style sheets. Try to avoid tables within tables; not all browsers can display them. Analysis of our logs indicate that Netscape (version 2+) and Internet Explorer are overwhelming favorites. Make sure your designs look good in both. Use .html as filename extension for HTML files. Use homepage.html as the filename for directory main pages. Use of the <BLINK> tag or the words "Click Here" are grounds for ritual humiliation.