Using the Cal State L.A. Web Templates

1
Using the Cal State L.A. Web Templates
This presentation can be downloaded
at www.calstatela.edu/univ/templates/downloads
Presented by the Office of Public Affairs
2
Process Overview

• Download the latest web templates and Firefox 3
• Create a testing environment
• Move extracted template files to your testing
  directory
• Create your master file by copying and renaming
  the template file that best suits your needs
• Updating shared menu
• Substitute header image and alt text
• Update shared footer data

3

• Add necessary meta and title tags
• Test your template
• Save as to rename master template to begin
  creating site pages
• Add new content to the template
• Test the site

4
Download the latest web template and Firefox 3

• Templateshttp//www.calstatela.edu/univ/templates
  /downloads.php
• Get Firefox 3http//mozilla.com/en-US/firefox/N
  ote You will not be able to preview work in
  progress without Firefox 3. Contact your ITC for
  installation if you do not have admin rights on
  your machine.

5
Create a testing environment

• FrontPage Users Configure FrontPage for PHP(down
  load instructions) http//www.calstatela.edu/univ
  /templates/downloads
• Dreamweaver UsersDreamweaver provides a wizard
  to assist in Site Definition (download
  instructions) http//www.calstatela.edu/univ/temp
  lates/downloads
• Optional admin rights requiredSet up web server
  on your machine (download instructions) http//
  www.calstatela.edu/univ/templates/downloads
• Create test folder online for online testingthis
  folder must be removed immediately after
  completion

6
Move extracted template files to your testing
directory

• Save all template files into the directory of
  your test site. If all files are not saved into
  the directory of your site, the pages may not
  display correctly.

7
Create your master file by copying and renaming
the template file that best suits your needs

• After previewing the templates online it should
  be clear which template you would like to use for
  your for your page. Refer to your handout for
  assistancehttp//www.calstatela.edu/univ/templat
  es/utilities/StartUpQuestions.pdf

1 Column
2 Column
3 Column
8
Updating shared menu

• Navigate to the downloaded folder and open the
  document named 'horizontalMenu' or 'verticalMenu'
  with the extension '.inc' using your web editor
  or notepad.
• Your menu is a simple html list. To edit simply
  find the list element
• and change the link
  address and the link text.

Additional html support can be found
here http//www.calstatela.edu/its/techsupport/we
b/websupport.php
9
Substitute header image and alt text

• If you would like to change the image within the
  banner, find the area labeled located on line 26
  
• The image within the banner, which you are free
  to change, is the image aligned to the right of
  the banner. To update this image provide the url
  of your desired image in the src"" field. The
  image must have the height of 82px with a width
  no greater than 130px.
• An appropriate alt text must also be entered
  describing the image shown

10
Update shared footer data

• Navigate to the downloaded folder and open the
  document named footer with the extension '.inc'
  using your web editor or notepad.
• Your footer is a simple html list. To edit simply
  find the list element
• and change the link
  address and the link text.
• Your finish footer should have the appropriate
  contact information for contacting the page
  author, as shown below.

11
Add necessary meta and title tags

• Add the appropriate meta tags and title in the
  head section of your pages
• Page Title

12
Test your template

• You may preview your page in either Dreamweaver
  or FrontPage by choosing the Preview in Browser
  option.
• Note that your include files will not be viewable
  unless you have placed your file in a testing
  server or in an online testing location (refer to
  step 2).

Dreamweaver
FrontPage
13
Save as to rename master template to begin
creating site pages

• Click File, Save As, to rename your page.
• Create a new page for every page that needs
  remediation.
• Once all pages are created, reopen your menu file
  and update the links so that they now link to the
  newly created files.

14
Populate new pages with content

• Using code view you may add your page content
  between the tag and the
  . Make sure that you are replacing this
  content using correct html/xhtml.

15
Populate new pages with content

• Using design view, you may edit your page
  directly by simply typing into your text content.

Dreamweaver PreviewNote include content will
not be viewable
Note FrontPage users must already have FrontPage
configured for PHP editing. Refer to step 2.
16
Test the site

• To view your page as it will appear to others you
  must either upload files to a testing area on the
  web server or use a test server (refer to step2).
  Simply previewing a browser will not show the
  file as it will appear on the server.

17
Using Templates
Additional instruction on using the web templates
can be found online here (http//www.calstatela.e
du/univ/templates/use.php)
18
Current Styles and Standards

• Global Style Sheet (http//www.calstatela.edu/uni
  v/templates/stylesamples.php)
• Web Style Guide (http//10.82.160.638888/univ/te
  mplates/utilities/webguide.pdf)

19
Online Support

• Template Support(http//www.calstatela.edu/univ/t
  emplates)
• Web Support(http//www.calstatela.edu/its/techsup
  port/web/)

20
ITC Support

• Downloading Firefox (http//mozilla.com/en-US/fir
  efox/)
• Firefox add-ons and accessibility
  tools(http//www.calstatela.edu/accessibility/too
  ls.php)
• Downloading/using compressed files.
• Installing server programs but not program usage.

21
Survey
http//www.surveymonkey.com/s.aspx?smef7bPHr3wd5f
e_2b4yB2exQg_3d_3d