NASA Logo, National Aeronautics and Space Administration

National Aeronautics and Space Administration

Goddard Space Flight Center

One NASA Look and Feel, Web Standards to the rescue.

Web Standards to the rescue. One NASA Look and Feel CSS TEMPLATES

Building Your Site

Setting Up Your Site

If you haven't done so already, decide upon and download a template package.

The package should extract with a directory structure intact. If your file fails to extract with a structure, simply put all the image files in an images directory, all CSS files in a css directory, and all HTML files should be in the root (/ ).

Example:

Example of a file structure

You can rename and restructure your directories how you see fit... with one exception. The CSS files must be in a separate folder from any HTML file they are linked to. This is done to fix a bug in IE4 on the Mac.

The files from the template packages have been set up with relative paths. However, I suggest you change all the paths to absolute root paths for your site. There are reports of certain server/browser combinations that fail to load CSS files unless the paths are from the root.

Code Example:

<a href="/index.htm">Home</a>
<img src="/images/pretty_flower.gif" alt="Pretty flower" />

Good Practices

I strongly urge everyone to use Server Side Includes (SSI's). Although SSI's are not necessary for these templates to work, they will make you and your developer's lives much easier when it comes time to update the site.

I find it easiest to set up directories for the main sections of my website and put all the HTML files for each section in their respective folders. This will help to keep your site organized as it grows. An added benefit of doing this, is that you can use a SSI for your left navigation and then use the same name for those files in each directory.

Speaking of good practices, building a Web Standards site is dependant on strict coding and managing practices. This brings us to the next section: XHTML 1.0.

+ Home

Building Your Site

NASA Fact

Insert a NASA fact here. Feel free to use a server side include or a back-end rotater.

NASA logo