Web Services

Controlling the Appearance of your Web Site

The formatting and appearance of your Web site is controlled by preset "style sheets" and "include" files. These files serve to maintain a consistent layout, appearance, and identity on your Web pages. Consistency in layout and formatting is vital for a positive user experience and helps present your department in a positive and professional manner. Inconsistency in layout and formatting can confuse users and give your site conflicting styles, fonts, and layouts.

Style Sheets

A style sheet is a central file where formatting and page layout information is stored. For example, in a style sheet you can define that every link should be red and bold. You can also control the placement of content on the page: whether it is at the top, on the right side, or the bottom of the page. Web Services uses a central style sheet that controls the appearance and formatting of all the pages in your site. Using that style sheet ensures that everything has a consistent look and feel. 

In order to maintain the consistency of appearance of pages on your site, it is important that you do not try to override the preset styles by using <font> tags or other text formatting. If you do this, your site will lose its consistent look and may be difficult to maintain and fix. The use of font and other formatting tags may also cause accessibility issues.

To maintain the professional appearance of your site, consistency is important. If you would like us to globally change the appearance of something in your site, we would be happy to modify the central style sheet. Unless you have a lot of experience with style sheets, we suggest you do not try to modify the style sheet yourself, as it could break the page and cause it to display improperly or not at all.

Top

Include Files

Include files are HTML files that contain items that will be used again and again on multiple pages or on every page of the Web site. The navigation menu, page header, and page footer are perfect for placing into include files. Using a little snippet of code, you can include the same thing on every page of the Web site. The snippet looks something like this:

<!--#include virtual="/yourDept/_include/leftnav.html" -->

The great thing about include files is that if you need to make a change to, say, the navigation menu, you only have to edit and upload the "leftnav.html" file and the menu will change for every page in the site. Include files are located in the "_include" directory of your Web site. Various include files have different functions. The most common are:

  • header.html - Contains the header bar with the CSU, Chico logo, department name, and red bar.
  • footer.html - Contains the campus links and department information
  • leftnav.html - Contains the left-navigation links
  • feature.html - A special section containing text  (usually news, announcements, etc.)

You do have to be careful not to rename or move the include file, since that will break the reference to the file in all the other pages in your site. You also need to be careful not to delete the snippet with the include file in a page.

Top

Using Built-In Styles

With built-in styles it is easy to create new pages and add new content all, while keeping the consistent look and feel of your site. You may notice these pre-defined styles when inputting content. Styles have been applied to all of the header tags (h1, h2, h3, h4, h5, h6) and the paragraph tags (p). You can select a tag to use in the Properties toolbar at the bottom of the Dreamweaver window.

Format toolbar

The h1 tag is the largest and should be used for main headers or titles of your pages. The h2 tag should be used for sub-headers of main sections. The paragraph (p) tag should be used for the actual content text of your pages.

Example of headers and paragrph tags in use

Feel free to experiment with the different header tags to get an idea of their sizes and styles. If you would like the characteristics of any of these tags altered in any way (e.g. made bigger, different font, etc.) please let us know, and we will arrange this.

Top

Getting More Help

If you would like more help, User Services offers training courses to CSU, Chico faculty and staff for Web site creation. If you are interested in signing up for one of these courses or for general questions visit the User Services Web site or call 898-6000. You can also contact TLP at 898-6167 for specific one-on-one help with your Web site.

Top