Class outline

Click on an item to see expanded text.

• Introduction
  • What the templates are for
  • Where they are and how to get them
  • Resources for template users
  • New Features:
    • Includes
    • Dynamic Content
    • Cascading Style Sheets
  • Selecting and Applying a template
• What the Templates are For
  • Improve consistency among CSU Web sites
  • Improve accessibility of CSU Web sites
  • Bring us closer to current Web standards
  • Make it easier for you to move your sites to the new look
• Where they are: http://webs.colstate.edu/templates.
  Instructions for downloading templates are available there as well.
• Resources for Template Users
  • Online Documentation
    • Style Sheet Guide: a short introduction to style sheets and description of the styles included in the CSU mainstyle.css stylesheet.
    • Template User's Guide: instructions on putting your pages into the templates.
    • How is the template put together: a visual guide to how the templates work.
  • The Web Team!
• New Features: Includes
  • Inserts code into the page before it is sent to the end-user
  • Works similarly to the Microsoft Borders
    • We are using them for the header, footer, and left navigation
  • Changing content of included file changes content of any page that uses the file
  • Code:
    • In the same directory:

      <!-- #include file="top.htm" -->

    • In a subdirectory:

      <!-- #include file="http:://site.colstate.edu/top.htm" -->

  • In general you should never delete, move, or edit the include statements. The only time you may want to edit them is if you are using subdirectories.
  • FrontPage does not do a good job of showing how the borders will look. You have to upload pages to the web server to see how they will really look.
• Pieces of the Page
• New Features: Dynamic Content
  • New file extension: .asp (sometimes .php)
  • Generates updated information whenever a page is loaded
  • Most often used for showing dates
    • We are using it for "last updated" dates and to create links to the text-only translator
  • Is also used for database driven sites
  • Is what makes the includes happen
  • Code: between <% ... %> tags or <? ... ?> tags
  • In general you should never delete, move, or edit anything between the code tags.
• New Features: Cascading Style Sheets
  • Benefits
    • Separates content from display
    • Pages are more flexible for viewing at different monitor resolutions and sizes (like on PDAs and cell phones)
    • Efficient control over large numbers of pages - make a change once and all pages using your stylesheet will reflect it
    • Greater control over display - stylesheets allow many more display options
    • Better accessibility
    • Standards Compliant - improves cross-browser compatibility
• Cascading Style Sheets
  • Style sheets define how each part of a page should be displayed
  • Three ways to define a style
    • External Style Sheet - able to be used by multiple pages (preferred)
      • Code in head: <link href="_style/mainstyle.css" rel="stylesheet" type="text/css">
    • Internal Style sheet - able to be used in only one page
      • Code in head: <style type="text/css"> styles </style>
    • Inline Styling - applies to one and only one section of a page (not recommended)
      • Code in tag: <td style=" style information ">
  • Can use more than one stylesheet in a site
    • Would do this only if a section of the site has a different look than the rest (not recommended)
    • Example: each Academic Catalog in the Academics site has a different look. Each catalog may have its own stylesheet
    • When using multiple stylesheets be sure to name them differently to avoid confusion
  • All styles are applied in the same manner
    • A "class" is defined in the style sheet
    • That class is applied to an item:
      • <td class="area2cell">
      • <span class="redheading bold">
  • DEMOS
    • No style: Code Page
    • Linked to stylesheet: Code Page (note the problem with the clock tower at the top of the navigation area)
    • Include internal stylesheet: Code Page (fixes the clock tower problem)
    • With an inline style: Code Page
• Using the CSU Styles
  • The CSU templates assume that the stylesheets are in the "_styles" folder
  • If you use subdirectories you will have to change the link to the stylesheet to reflect this
    • In root: <link href="_style/mainstyle.css" rel="stylesheet" type="text/css">
    • In subdirectory: <link href= "../_style/mainstyle.css" rel="stylesheet" type="text/css">
  • Use the Style Sheet Guide to determine what styles to use in specific cases.
• Applying the Styles
  • Applying styles
    • Add class="stylename" to the tag,
      e.g. <td class="style">
    • Use <span> ... </span> to style specific bits of text,
      e.g. <span class="bold"> bolded text here </span>
  • The primary stylesheet is named mainstyle.css
  • Each site has its own copy of mainstyle.css, so any changes you make will be completely local
    • You will need to become familiar with it if you want to change any styling
    • BACKUP FIRST!! That way you can easily restore the original look of the site
    • If you make some changes and then want to make more BACKUP AGAIN.
• Apply the Template – One Time Tasks
  • Open top.htm
    • Change the department name
  • Open left.htm
    • Determine Site Navigation
      • Review your current site
      • Break pages into logical groups
      • Use those groups to determine your left navigation links
      • Try to keep the number of links down, we recommend 10 links or less
      • Should include a link to the department home page and the CSU home page
      • Links must be in the style "white13pxnospace bold"
    • Change navigation links as necessary
  • Open bottom.htm
    • Change department information
    • Change "Questions/Comments" link to direct to someone in your department
• Apply the Template – Repeated Tasks
  • Select the layout for the page
  • Create a new file using the template for that layout
  • Edit content as necessary, including meta tags for keywords and description
  • TEST
    • Check that styles are displaying the way you want
    • If styles from mainstyle.css are missing check the link in the <head> area
• CSU Template Layouts
  • There are 6 layouts to choose from
  • Samples at webs.colstate.edu
    • 1, 2, and 3 are primarily intended to be main pages
    • 4 can be used either as a main page or as an internal page
    • 5 is primarily for internal pages
    • 6 is primarily for level 3 and 4 sites
      • Level 4 sites must add standard disclaimer if for personal use
• Selecting a Layout
  • Look at your page content
    • Images/text
    • Areas you want to highlight
  • Review page content
    • What needs to be updated
    • What needs to be added
    • What needs to be removed
  • Imagine how page content would fit into the layout
  • The templates were designed to be flexible - more than one may fit the content
  • You may mix and match templates within a site
• Create The Page
  • Open the appropriate layout.asp file
  • Save under the new page name - do this first so you don't accidentally overwrite the template
  • Edit the breadcrumbs as necessary
    • At the top of the main content of the page
    • Should reflect position of page in the site
    • Links get the style "crumb"
    • Current page gets the style "crumbred bold"
  • Replace the text of the page with your text
    • Apply styles as necessary
    • Edit the meta tags for keywords, description, and title to match the content of the page
  • Remember that FrontPage will not display the top, bottom, and navigation properly