Introductory Notes

Get a copy of the HTML code to use for your department's site and save this text onto your local computer, using the "save" feature in your browser to save the HTML code of the template to your local system. When saving the file, replace the extension "txt" with "shtml".

IMPORTANT! Do not save the page you are currently reading. This template uses special "include files" (see below) that build the page from pieces and sends it to your browser. You browser see the final result, not the pieces needed to build the page. Save the HTML code from the text file instead and open that in your web editor.

Use this template page for your own department's web site. Simply delete this text and replace with your own.

Please make use of both the comments you see displayed as you look at this page in your browser and the comments interspersed in the actual HTML to make best use of this template. All web pages that are directly related to the university are strongly urged use this template.

Column Layout Options

This template uses a two column layout for content. If you would like a one column layout for your pages, please use the one column template.

Technologies used in the Template

This template takes advantage of some web technologies that you might not be familiar with. These technologies are designed to make web pages easier to change and maintain and make it easier to make all pages within a web site share the same appearance.

For the most part, these technologies have been implemented in such a way that they require no intervention on your part for them to work. In fact, about the only time you might have a problem is if you don't understand what the technologies used in the template are doing.

Style Sheets

"Style sheets" are files containing a list of formatting rules for parts of a web page. For example, a paragraph style might specify a particular font, font size, color and text alignment. All parts of a web page may have their own styles.

The cool thing about style sheets is that once the styles are defined, you never have to format anything! All formatting is done automatically by the style sheet.

This new template uses the following style sheets (stored on the Chico State web server):

• styles-static.css
• styles-secondary.css

So, what does this mean to you?

It means don't worry about formatting text; it's already handled by the style sheets we've created. Just use the built in paragraph and heading tags.

It means don't remove references to these style sheets in the template's HTML code. Without the link to the style sheet, the styles can't be applied to the page).

Include Files

One very cool web technology is the ability to assemble a web page from pieces on demand. That means that you can keep pieces of web pages separate from the main part of the page and use them over and over on each page without having to copy all that HTML code.

For example, certain parts of your department's web pages are the same on every page, like the page header, the left hand navigation bar and the page footer. Since these are used over and over, why copy all that code on every page?

To use include files, you copy the parts of the page you want into a separate "include" file and put a link to that file where you want it to appear on your page (like at the top for the header). When someone accesses the page, the web server grabs all the include files, includes them in the request for the web page and assembles all the pieces into a single complete page that it sends to your browser.

This template uses include files for the page header, left hand navigation and the page footer. You can edit the left land navigation bar and footer include files yourself to customize them for your own department. The page header is static and can not be changed by departments. However, you cna (and should) edit the left hand navigation column and footer include file yourself to customize them for your own department.

So, what does this mean to you?

Since the header include resides on the Chico State web server, you won't see it when editing the template in Dreamweaver.

You can create your own departmental footer and left hand navigation bar by modifying the template include files. The department include files are:

• dept_nav.shtml
• dept_footer.shtml

Save both these files and modify them to suit your needs. See the comments included in both files for additional help.

Tips on Using this Template

Change the Page Title

In order for users to know what page they are on, you should change the title of this page to match the content that will be on the page.

Replace the text "ONE COLUMN TEMPLATE (replace with your page title)" at the top of this page with your page title.

Replace the HTML page title with the title of your page (in Dreamweaver, go to the "Modify" menu, select "Page Properties..." and edit the "Title".

Don't Use Font Tags

Although this page may appear unformatted when you look at it within Dreamweaver (or any other web page editor), the text, links and page colors are all controlled by an external "style sheet" that resides on the Chico State web server. This style sheet automatically applies the template formatting to any template page uploaded onto the Chico State web server.

This means that if you simply use the paragraph and heading tags that appear in the formatting toolbar your page will match the template perfectly when uploaded to the Chico State web server.

If you apply text formatting (font, font size, color, etc.) directly to your page, you will override the formatting used in the global style sheet. Applying formatting on each page is more work for you, makes it harder to update and maintain your department's pages and makes every page look different and inconsistent. Bottom line: save yourself a lot of unnecessary work and limit your formatting to using the paragraph and heading formats provided by Dreamweaver.

Frequently Asked Questions

Why doesn't my page appear formatted when I edit it?

Dreamweaver doesn't have access to the formatting used in the "style sheet" that is stored on the Chico State web server, so when you edit your pages on your desktop computer, none of the template formatting appears.

However, once you upload the page to the server, the "style sheet" formatting is automatically applied to your page. Try it and see.

What do the built in styles look like?

This is an <H1> heading.

This is an <H2> heading.

This is an <H3> heading.

This is an <H4> heading.

This is an <H5> heading.

This is paragraph <p> text.

Why doesn't the Chico banner appear at the top of my page in Dreamweaver?

The banner (or header) is part of an include file that resides on the Chico State web server. It is automatically included with the rest of your page when people view it in their browsers.

Why does the photo on the right side of the page appear as a broken link?

The photo used in the template resides in the template web site. You will need to replace the photo with one of your own. The best size for such a photo is approximately 180 pixels wide by 220 pixels tall.

How can I get rotating photos like some of main Chico State pages?

This template uses a static photo as a placeholder, as described in the previous section. However, if you want to use rotating images, you can make use of the rotating photo script that is housed on the web server. See the rotating photo instruction page for details.

Who can I talk to if I have problems using the template?

To get help using the template, contact TLP at 898-6167.