Web Standards to the rescue. One NASA Look and Feel CSS TEMPLATES
Building Your Site
Content is what drives a web site. Know your audience and speak clearly to them. Be consistent, be concise, and be creative.
CREATING NEW PAGES AND INSERTING CONTENT
After you have created your nav bar, checked to make sure all the paths are pointing to the right places (in the HTML AND CSS files), and made copies of your shiny new template pages you're ready to begin.
"You are Here" states for the navigations
To turn on any of the items in the navigation, simply change the "id" or "class" of the <body> tag. The "id" controls the top nav bar and the "class" controls the left nav bar. Here is the line of code from this page.
HTML Example:
<body id="twoon" class="lnfiveon">
This is pretty self explanatory. If you wanted to turn on the first item in both the main nav, and the left nav, the code would look like this.
HTML Example:
<body id="oneon" class="lnoneon">
Moving on
While building your pages you MUST make sure you follow the rules of XHTML. Please take the time to examine the templates and take note of the markup. You should never need to force a layout issue by adding spacer gifs, extra empty paragraph tags, or any of the other bad habits you might have learned from traditional web development.
There are several things on each page you will need to change other than your content. The first is the title. I have used the same scheme the portal uses for titling each page. I encourage everyone else to do the same as this practice will help to strengthen the online presence of NASA as a whole.
Next, you'll want to change the Left Nav Header to match the section you're in. Simply put the correct text between the <h2></h2> tags within the <div id="lefttitle"></div> tag. NOTE: If you are using the SSI or PHP Package this tag will be found in the include file, leftnav.htm.
Finally, there are "invisible" headings for each page. The reason they are there is to help with accessibility and the "Text Only" version. These headings do not show up in any browser that can read the main style sheet. These headings can be found below the first "START MAIN CONTENT HERE" comment tag. Simply put the name of the section you are in in this tag.
HTML Example:
<h2 class="txonly">Building Your Site</h2>
Inserting your content
I have tried to reproduce nearly every type of content that appears on the Portal. The "Styled Elements" page within the NASA Templates section is a single page with every style I have created for these templates. It is a good idea to take a look at this page to get an idea of the sort of elements you can add. I have not tried to reproduce the Portal's home page. I might do this in the future, but for now, use the three column template in creative ways to create a home page.
Please keep your markup clean and tidy. If a page is not rendering properly it is most likely due to a misplaced close tag, or improper use of another tag. Following the rules of XHTML will keep most of those mistakes from happening.
When you use the captioned, or uncaptioned, floating images on your pages try to keep all lists and other floating elements away from them. Many browsers are still not fully Standards compliant and making complex float decisions is usually where a browser will show it's flaws. If you need to have a floating image, and the paragraph it floats around just isn't long enough, put a <div class="clear"></div> before the floating elements to make sure they don't try to float around that image as well. This technique is used on almost every page to keep the left nav from trying to float next to the header image.
Changing the stylesheet
If you have a good sense of CSS, or just want to try to figure it all out, feel free to make changes to the stylesheet. But please make sure to test them out in multiple browsers.
Also, try to put all of your changes at the bottom of the stylesheet. This way, you can simply erase them if something goes wrong. This will also benefit you if a revision is needed to the stylesheet. If all of your changes are at the bottom you can simply copy and paste the new stylesheet above your changes.
NASA Fact
Insert a NASA fact here. Feel free to use a server side include or a back-end rotater.
