Web Services

Web Services Internal Development Standards

Maintaining Sites with Dreamweaver

Web Services uses Macromedia Dreamweaver, the standard Web authoring application, to develop and maintain its Web sites. By using a standard application, we are able to control the Web sites compliance with emerging technologies, look and feel, and content in consistent manner. The following guide will walk you through setting up Macromedia Dreamweaver MX to be able to edit a Web site, while adhering to the standards and guidelines provided.

Defining a Site in Dreamweaver

After starting Macromedia Dreamweaver, go to the Site menu, and choose New Site...

Screen capture of choosing the Site menu, then choosing New Site

A Site Definition window will open. By defining a site, Dreamweaver will maintain directory structure and links as files get moved. In the Local Info Category, fill in a Site Name, which will identify this site. Then by the Local Root Folder, click the Browse folder button to find where all your files are located on your local hard drive. (Optional: Browse for the location of your images.)

Screen capture of filling out Local Info in the Site Definition

Switch into the Remote Info Category. From the Access drop-down, choose FTP. The FTP Host will (most likely) be www.csuchico.edu. The host directory will be /m3/webdocs/sitename, where the site name is the same as the directory after www.csuchico.edu on the campus server. So:

  • http://www.csuchico.edu/atec = /m3/webdocs/atec
  • http://www.csuchico.edu/educ = /m3/webdocs/educ

Your Login and Password should be the same as your Wildcat account credentials.

Screen capture of Remote Info site settings

Top

ADA Compliance and Accessibility

Dreamweaver has the ability to enforce Americans with Disabilities Act compliance as new pages are created. These are preferences you set within Dreamweaver. To change these settings, choose Edit, then Settings. A preferences window will open. Click Accessibility. Check all of the options under "Show Attributes when Inserting." This will prompt you for proper accessibility data each time you create or insert one of the types of objects listed in the Accessibility preferences.

Screen capture of accessibility options

Top

Saving Pages with .shtml Extension

Do a search on "MMDocumentTypes.xml" in your local hard drive. Open the file in Dreamweaver. Find the line containing "internaltype="HTML"." Modify the winfileextension line to have shtml as the first in the list of file extensions. After making this change, when you save a file it will automatically have the .shtml extension, unless you specify .asp, or some other extension.

Screen capture of saving pages with .shtml extention

Top

Creating a New File

To create a new file based on the provided templates, choose File, then New. Select the site you want a template from Under Templates For:, then choose the template from the second column. Click OK. A new document will open with an area where you will be able to add content.

Screen capture of creating a new file, based on a template

Top

Using Cascading Style Sheets, Avoiding Font Tags

To edit your text in Dreamweaver, you will use the Property Inspector. If you do not see it on your screen, choose Window, then choose Properties. By default, your property inspector will allow you to format the font. Do not use the default Property Inspector, as it will create font tags. Do not use font tags. To switch to a CSS-based Property Inspector, click the "A" icon between the Format and Default Font drop-down boxes. Your Property Inspector will switch to a CSS-based panel.

Screen capture of Property Inspector, allowing font tags

Using the CSS-based Property Inspector, you can highlight text and apply styles from the style sheet. You can also make links between files and use structural markup on your pages (Headings, Lists, etc.).

Screen capture of Property Inspector, not allowing font tags

Top

Spell Check

After you create a page or modify text, you will also want to check the spelling of your text. To check spelling of the current document, click the Text menu, then Check Spelling.

Screen capture of checking spelling

Top

Validate Existing Pages

If you want to check existing pages for XHTML compliance, you can run a check on your site. Choose Window, then Results to open the Results panel, and choose the Validation tab. Choose the green arrow, then choose Settings.

Screen capture of Validation tab

On the Preferences screen, make sure that XHTML 1.0 Transitional is checked. Click OK.

Screen capture of Validation Preferences set XHTML

Return the Validation tab, click the green arrow and choose Validate Entire Site. This will generate a listing of any files and line numbers within the files that do not validate as XHTML compliant.

Screen capture of Validating a document

Top