This presentation can be downloaded at Presented by the Office of Public Affairs Using the Cal State L.A. Web Templates

Process Overview 1.Download the latest web templates and Firefox 3 2.Create a testing environment 3.Move extracted template files to your testing directory 4.Create your master file by copying and renaming the template file that best suits your needs 5.Updating shared menu 6.Substitute header image and alt text 7.Update shared footer data

8.Add necessary meta and title tags 9.Test your template 10.‘Save as’ to rename master template to begin creating site pages 11.Add new content to the template 12.Test the site

1)Download the latest web template and Firefox 3 Templates Get Firefox 3 Note: 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.

2)Create a testing environment FrontPage Users Configure FrontPage for PHP (download instructions): Dreamweaver Users Dreamweaver provides a wizard to assist in Site Definition (download instructions): *Optional admin rights required Set up web server on your machine (download instructions): Create test folder online for online testing this folder must be removed immediately after completion

3)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.

4)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 assistance: Column 2 Column 3 Column

5)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:

6)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

7)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.

8)Add necessary meta and title tags Add the appropriate meta tags and title in the head section of your pages; 1. Page Title

9)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

10)‘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.

11)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.

11)Populate new pages with content Using design view, you may edit your page directly by simply typing into your text content. Note: FrontPage users must already have FrontPage configured for PHP editing. Refer to step 2. Dreamweaver Preview Note: include content will not be viewable

12)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.

Using Templates Additional instruction on using the web templates can be found online here: (

Current Styles and Standards Global Style Sheet ( Web Style Guide (

Online Support Template Support ( Web Support (

ITC Support Downloading Firefox ( Firefox add-ons and accessibility tools ( Downloading/using compressed files. Installing server programs but not program usage.

Survey