|
CSU Home Page >
Templates > Using the Templates Presentation
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
- 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 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
- Things to Remember
- We are now using includes and dynamic content on all pages
- Requires .asp extension to work
- FrontPage doesn't display includes properly, so don't panic if a page doesn't look quite right. Upload it to the server to check it.
- We are now using stylesheets to control display
- We are aiming for consistency
- Within individual sites
- Throughout the CSU web presence
- The templates are supposed to make life easier
- Feel free to ask for help!
|
