Your Department, CSU, Chico

Interior Page Template (and tutorial)

Tutorial - Using the templates

These templates were designed for internal use by Web Services in developing economical Web sites that follow campus, Web and Section 508 accessibility standards. However, there is such a demand for professional-looking designs, that we decided to make these available to the campus.

As a result, 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.

Getting the Template Files

1. DO NOT do as "Save As..." to this page or the index page. This page was built using server side includes, and those will be lost if you do a "Save As...".
2. Instead, download the files here (Zip file).
3. Open the Zip file and unzip the files into the folder of your choice on your computer.
4. Rename the "templates" folder to whatever you want.

Setting up the Templates in Dreamweaver

1. Open Dreamweaver and create a new site, using the templates folder you just saved as the location of your local site.
2. Fill in the remote information to connect to your site, and click OK.
3. When you open either the index.shtml or interior.shtml file, you should see the default style (style 5) implemented on the pages.
4. To switch to a different style:
   1. Open the index.shtml file in code view.
   2. On line 6, change "styles5.css" to whichever style you want to use (e.g., "styles1.css").
   3. Save the file and switch to design view to see the change. Cool.
   4. Repeat for the interior.shtml file.
5. Updating the file references: When you downloaded the template files, many files were included: web page templates, include files, 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 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 the templates folder you downloaded. Click on "Select" when you get to the desired folder.
   4. Under "Search:" choose "Source Code".
   5. Under "Find:" enter "/dw/" (This is the generic folder name that we put in the templates. There is no "yoursite" directory on the Web server).
   6. Under "Replace:" enter the directory used for your Web site on the campus Web server. For example, if you were making a site for the Biology Department, your Web site address would be www.csuchico.edu/biol/. the directory for your site would be /biol/. 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 mesage 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.
6. Editing the navigation menu: The _include/leftnav.html file contains a list of links for your site. You will need to change these speficially for your site:
   1. Open the _include/leftnav.html file.
   2. Edit the links as you wish.
   3. Make sure that links to pages in your site are in the form: /dw/file.shtml where "yoursite" is the directory on the campus web server where your site lives (e.g., /biol/).
   4. Pages that are outside of your site (e.g., not in the /biol/ directory), do not need this.
   5. If you don't do this, the links will not work from pages that you put into subfolders on your site.
7. To change the information in the page footer, open the _include/footer.html file and edit as you wish.
8. The change the "Your Department" graphic, edit the genericBanner.psd file (included in the Zip file) in Photoshop. You will need to have the Bodoni Bold Condensed font installed on your computer. You will need to do a "Save for Web..." as a GIF file. Save the file as genericBanner.gif in the appropriate images folder (e.g., the images1 folder if you are using styles1.css, images2 folder if you are using styles2.css, etc.).

Building Your Site

1. The index.shtml page 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.
   1. 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 interior.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 descrptive 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 subdirectories in your site, but you will run into problems unless you follow step 5 under "Setting up the Templates in Dreamweaver".
   1. Create all subdirectories within Dreamweaver.
   2. Copy the interior.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?

[ top ]