Web Services

Template Instructions

Using the templates

These templates were designed for campus use by Web Services in developing economical Web sites that follow campus, Web and Section 508 accessibility standards.

These templates are fairly sophisticated and rely on server side include files and cascading style sheets. If you aren't familiar with these technologies, these templates may appear somewhat mysterious at first. The good news is that you don't have to know anything about those technologies to make the templates work for you! However, it does mean that there are a lot of pieces to these templates, and that you need to have them all to make them work.

Before you begin, we want to recommend that you have a basc understanding of Dreamweaver, since that is the software the campus uses to maintain Web sites. If you have no experience with Dreamweaver at this point, User Services offers beginning Dreamweaver trainings periodically throughout the semester for no fee to faculty and staff who would like to learn.

Getting the Template Files

  1. DO NOT do as "Save As..." to this page or the home page. Many elements of this template will be lost if you do a "Save As...".
  2. Instead, download the zip files of the template you'd like to use here...
    1. Template 1 files
    2. Template 2 files
    3. Template 3 files
    4. Template 4 files
    5. Template 5 files
    6. Template 6 files
  3. Right click on the downloaded folder to unzip (uncompress) the files into a folder of your choice on your computer.
  4. Change the main folder (i.e. "1", "2", etc) to whatever you want. We recommend changing it to the web directory of your department if that is what you are using the template for. For example, if Web Services were using this template, we would name the folder "web" since that is our web directory location.

Setting up the Templates in Dreamweaver

You will now use Dreamweaver to get your site going with your new template. If you don't have Dreamweaver installed on your machine, contact User Services at x6000 to get information about obtaining a copy first.

  1. Define your site in Dreamweaver: Open Dreamweaver and create a new site, using the templates folder you just saved as the location of your local site. Follow the instructions at "Setting Up Your Site in Dreamweaver" to do so. Come back to this page when you've completed the site setup instructions.
  2. Update your file references: When you downloaded the template files, many files were included: web page templates, include files (web page footer, header, etc), images, style sheets, etc. All of these files need to know where the other files are when they get uploaded to the Internet. But of course, when you downloaded the files, they couldn't possibly know where they will end up. To fix that, do the following:
    1. Open the index.shtml file.
    2. Go to "Edit" -> "Find and Replace..."
    3. Under "Find in:" choose "Folder" and navigate to the location of your template folder you created on your computer. Click on "Select" when you get to the desired folder.
    4. Under "Search:" choose "Source Code".
    5. Under "Find:" enter "/web/templates/3/" where "3" should be the number of whichever template you chose. This is the generic placeholder we put in the templates for you to change.
    6. Under "Replace:" enter the directory used for your Web site on the campus Web server (for example, if Web Services were doing these, we'd put "/web/" under Find). Only enter the part of the URL for your site that comes after www.csuchico.edu. Important: Make sure to include the "/" before and after your site's directory!
    7. Click on "Replace All" and click "OK" when you get the message that the operation can't be undone.
    8. Once the replace is complete, save the index.shtml file.
    9. If you don't do this, you will encounter problems when you start making copies of the template pages and putting them in subfolders.
  3. Edit the navigation menu: The _include/leftnav.html file contains a list of links for your site that people will see on the left-hand side of every page. You will need to change these specifically for your site:
    1. Navigate to the _include folder in your site on your computer and open the leftnav.html file.
    2. Edit the links as you wish. Make sure to keep the links in an unordered list format as it is now.
      NOTE: Make sure that all links to pages in your site are in the form: /yoursite/file.shtml where "yoursite" is the directory on the campus web server where your site lives (e.g., /web/). Pages that are outside of your site (e.g., not in the /web/ directory), do not need this, but definitely should be referenced with their full paths (i.e. http://www....). If you don't do this, the links will not work from pages that you put into subfolders on your site. Please refer to the following example (code view)...

      <ul id="leftnav" class="noprint">
        <li id="home"><a href="/web/index.shtml">WEB Home</a></li>
        <li id="about"><a href="/web/about/index.shtml">About Us</a></li>
        <li id="google"><a href="http://www.google.com">Google</a></li>
        <li id="new"><a href="/web/new/index.shtml">What's New</a>
          <ul>
            <li id="cal"><a href="/web/new/cal.shtml">Calendar</a></li>
            <li id="events"><a href="/web/new/news.shtml">Events</a></li>
          </ul>
        </li>
      </ul>

  4. Edit the footer: To change the information in the page footer, navigate to the _include folder in your site on your computer and open the open the footer.html file and edit as you wish.
  5. Changing the department name image: To change the "Your Department" graphic at the top right of each of page in your new site, please contact Web Services at x6983. This graphic uses a font that we have purchased and does not come stock with most computers. So, we will update this graphic for you at no charge and send you the new image file with instructions on how to implement it.
  6. Start building your pages!

Building Your Site

  1. The index.shtml page in the main folder is meant to be your home page, so you should have only the one. Simply change the text in the mainhomecontent area of the page to say what you want.
    You should also change the page title tag in Dreamweaver to be something other than "Your Department - CSU, Chico".
  2. If you want to change the photo on the home page, just make sure that it matches the dimensions (in pixels) of the default photo exactly.
  3. The template.shtml file is meant to be the template for the rest of the pages on your site. You can make as many copies of this page as you like.
    1. Important: Only make copies of the page within Dreamweaver. That way, if you rename the file or move it into another folder, Dreamweaver will automatically update all the links to the include files and the style sheet.
    2. You should change the title tags for your pages from "Interior Page - Your Department - CSU, Chico" to something more descriptive of the content of the page. Search engines use the title tag as one of the most important elements in indexing your pages.
  4. You can have sub-directories in your site, but you will run into problems unless you follow step 3.1 above.
    1. Create all subdirectories within Dreamweaver.
    2. Copy the template.shtml from within Dreameaver.
    3. Drag the new file into the desired subfolder from within Dreamweaver.
    4. Rename the file as desired from within Dreamweaver.
    5. Did I say to do all this from within Dreamweaver?

For More Information

In coordination with the Technology and Learning Program (TLP), User Services, Student Computing, we are continuing to create a more comprehensive set of tutorials and trainings to provide you more information. In the meantime, the following list of resources should help you to maintain your site as effectively as possible.