This presentation can be downloaded atwww.calstatela.edu/univ/templates/downloads

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 32. Create a testing environment3. Move extracted template files to your testing

directory4. Create your master file by copying and renaming

the template file that best suits your needs5. Updating shared menu6. Substitute header image and alt text7. Update shared footer data

8. Add necessary meta and title tags9. Test your template10. ‘Save as’ to rename master template to

begin creating site pages11. Add new content to the template12. Test the site

1) Download the latest web template and Firefox 3

• Templateshttp://www.calstatela.edu/univ/templates/downloads.php

• Get Firefox 3http://mozilla.com/en-US/firefox/

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

• Dreamweaver UsersDreamweaver provides a wizard to assist in Site Definition (download instructions): http://www.calstatela.edu/univ/templates/downloads

• *Optional admin rights requiredSet up web server on your machine

• Create test folder online for online testingthis folder must be removed immediately after completion

• (download instructions): http://www.calstatela.edu/univ/templates/downloads

• Configure FrontPage for PHP(download instructions): http://www.calstatela.edu/univ/templates/downloads

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:http://www.calstatela.edu/univ/templates/utilities/StartUpQuestions.pdf

1 Column2 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 <li> and change the link address and the link text.

Additional html support can be found here:http://www.calstatela.edu/its/techsupport/web/websupport.php

6) Substitute header image and alt text

• If you would like to change the image within the banner, find the area labeled:<!--Edit Banner Here--> 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 <li> 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. <title>Page Title</title>

2. <meta name="author" Page Author" />

3. <meta name="keywords" content=”” />

4. <meta name="description" content=”” />

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

DreamweaverFrontPage

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 <div id="mainContent"> and the </div>. 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 PreviewNote: 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:(http://www.calstatela.edu/univ/templates/use.php)

Current Styles and Standards

• Global Style Sheet (http://www.calstatela.edu/univ/templates/stylesamples.php)

• Web Style Guide (http://10.82.160.63:8888/univ/templates/utilities/webguide.pdf)

Online Support

• Template Support(http://www.calstatela.edu/univ/templates)

• Web Support(http://www.calstatela.edu/its/techsupport/web/)

ITC Support

• Downloading Firefox (http://mozilla.com/en-US/firefox/)

• Firefox add-ons and accessibility tools(http://www.calstatela.edu/accessibility/tools.php)

• Downloading/using compressed files.• Installing server programs but not program usage.

Survey

http://www.surveymonkey.com/s.aspx?sm=ef7bPHr3wd5fe_2b4yB2exQg_3d_3d