WebsiteTips.com - Web Design Tutorials, Tips, Top Resources

Macromedia HomeSite HTML Editor Tips

Add Quotes with CodeSweeper - Automating Attribute Quotations

by Shirley E. Kaiser, M.A.

Copyright © 2001-2016, Shirley E. Kaiser, M.A., SKDesigns. All rights reserved. Published at websitetips.com with permission.

Note that even though this tutorial was written with HomeSite 4.5.2 in mind that it also applies to HomeSite 5.x versions and to earlier versions.

HomeSite 4.5.2 has many automated features to make our job of building Web pages easier and faster. Using HomeSite's wizards will also automatically add the attribute quotations, such as:

<img src="/images/greatimage.gif" width="205" height="105" alt="Helpful image description here" />

However, there are instances in which HomeSite currently does NOT automatically include the quotations around the attributes. There's an easy solution, though, that will take less than 5 minutes to set up.

You'll be able to click one button to automatically add attributes to an entire page in less than one second (literally). Just think, no more having to add all the quotations by hand or via search/replace!

If you're already familiar with HomeSite's CodeSweeper features, use the Quick Tip. The Detailed Instructions are designed for those who aren't as familiar with CodeSweeper features or HomeSite.

Quick Tip

  1. With HomeSite open, from the drop-down menu, click on Tools > CodeSweeper, and then choose any of the titles. (Figure 2.1 below)

    Note: If CodeSweeper launched rather than getting the window shown in Figure 2.2, see Bug Note.

    Alternatives:
    You can also get to CodeSweeper by clicking on Options in the drop-down menu: Options > Settings. When the large Settings popup window opens, choose CodeSweeper (left side, near the bottom), and then click OK.

    Keyboard Shortcut:
    F8, then with the bottom arrow, click down to CodeSweeper.
  2. A small popup box will appear with a choice to either run CodeSweeper or configure CodeSweeper. Click on Configure CodeSweeper. (Figure 2.2 below)
  3. A larger popup box will appear, Macromedia CodeSweeper Settings. Click on New Profile. (Figure 2.3 below)
  4. In the New CodeSweeper Profile popup box, provide a name for your attribute quotations settings. Select Macromedia CodeSweeper as the CodeSweeper type, and click OK. (Figure 2.4 below)
  5. That will take you back to the Macromedia Code Sweeper Settings. Highlight your new title, click on Edit Profile, and click OK. (Figure 2.5 below)
  6. In the CodeSweeper Settings that appears for your new Profile, I suggest the following settings, as also shown in Figure 1.1 below:
    *Format tag names: All Lower Case
    *Format attribute names: All Lower Case
    **Attribute value quoting: Quote All
    ***Clear the checkbox: Trim white space between tags

    Set any other settings you wish, and click OK.

    Screenshot: CodeSweeper Settings - showing format windows Figure 1.1 CodeSweeper Settings
    (This is a cropped view. Click on image for view of entire popup window.)

    *Format tag names: All Lower Case
    *Format attribute names: All Lower Case

    This is required for the new recommended XHTML 1.0.

    **Attribute value quotes: Quote All
    This will add quotes too all the attributes.

    ***Clear the checkbox: Trim white space between tags
    I suggest clearing the checkbox, 'Trim white space between tags.' Since the default has the box checked with NO exceptions, all of your code will run together. It could be visually confusing for you. This is handy, though, for when you're ready to upload files to your server.

    You could also leave the checkbox checked, then choose the 'Tag-Specific Settings' and customize where you wish to leave whitespace and where you don't. This depends on how detailed you'd like to be, of course.

That's it. Now you're ready to run your new CodeSweeper. See Using Macromedia CodeSweeper below if needed.

top‘On this page’ menu

Detailed Instructions

These detailed instructions provide more information and screenshots than the Quick Tip above.

Configuring Macromedia CodeSweeper for a New Profile

You can create new profiles within Macromedia CodeSweeper to suit specific purposes. That's what we'll do to automate the task of adding quotations around all the attribute values within an HTML document.

  1. With HomeSite open, from the drop-down menu, click on Tools > CodeSweeper, and then choose any of the titles, such as Default Codesweeper, as shown in Figure 2.1.

    Screenshot: how to open HomeSite's Macromedia CodeSweeper Figure 2.1 Opening CodeSweeper (Click on image for full size.)

    Alternative: You can also get to CodeSweeper by clicking on Options in the drop-down menu: Options > Settings. When the large Settings popup window opens, choose CodeSweeper (left side, near the bottom), and then click OK. I've had feedback that some versions launch CodeSweeper using this path rather than going to the configuration choices, however.

    Keyboard Shortcut: F8, then with the bottom arrow, click down to CodeSweeper.
  2. A small popup box will appear with a choice to either run CodeSweeper or configure CodeSweeper, as shown in Figure 2.2 below, click on Configure CodeSweeper.

    Note: If CodeSweeper launched rather than getting the window shown in Figure 2.2, see Bug Note.

    Screenshot: Figure 2.2 Codesweeper - Run or Configure CodeSweeper Figure 2.2 CodeSweeper

  3. A larger popup box will appear, Macromedia CodeSweeper Settings. Click on New Profile (Figure 2.3 below).

    Screenshot: Figure 2.3 Macromedia CodeSweeper Settings Figure 2.3 Macromedia CodeSweeper Settings
    (This is a cropped view. Click on image for view of entire popup window.)

  4. In the New CodeSweeper Profile popup box (Figure 2.4 below), provide a name for your attribute quotations settings. Select Macromedia CodeSweeper as the CodeSweeper type, and click OK.

    Screenshot: New CodeSweeper Profile Figure 2.4 New CodeSweeper Profile

  5. That will take you back to the Macromedia Code Sweeper Settings. Highlight your new title, click on Edit Profile, and click OK (Figure 2.5 below).

    Screenshot: Macromedia CodeSweeper Settings Figure 2.5 Macromedia CodeSweeper Settings
    (This is a cropped view. Click on image for view of entire popup window.)

  6. In the CodeSweeper Settings that appears for your new Profile, I suggest the following settings, as also shown in Figure 2.6 below:
    *Format tag names: All Lower Case
    *Format attribute names: All Lower Case
    **Attribute value quoting: Quote All
    ***Clear the checkbox: Trim white space between tags

    Set any other settings you wish, and click OK.

     Screenshot: Recommended CodeSweeper settings  Figure 2.6 CodeSweeper Settings (This is a cropped view. Click on image for view of entire popup window.)

    *Format tag names: All Lower Case
    *Format attribute names: All Lower Case

    This is required for the new recommended XHTML 1.0.

    **Attribute value quotes: Quote All
    This will add quotes too all the attributes.

    ***Clear the checkbox: Trim white space between tags
    I suggest clearing the checkbox, 'Trim white space between tags.' Since the default has the box checked with NO exceptions, all of your code will run together. It could be visually confusing for you. This is handy for when you're ready to upload files to the server, though.

    You could also leave the checkbox checked, then choose the 'Tag-Specific Settings' and customize where you wish to leave whitespace and where you don't. This depends on how detailed you'd like to be, of course.

That's it. Now you're ready to use your new CodeSweeper.

top‘On this page’ menu

Using Macromedia CodeSweeper

For the first time that you use your new settings, as a precaution I'd suggest saving a copy of your HTML file first, just in case you need to tweak your settings. Once you run CodeSweeper, you can't use Undo to reverse the changes to your file.

  1. Click Tools > CodeSweeper > Your New CodeSweeper.
  2. Then click Run CodeSweeper.

  3. Before saving your document, check that your code is changed as you wish. If all is OK, then save your document. If all is NOT OK, when you save your document, a popup window will ask if you want to save your changes. Click NO. Then you can tweak your CodeSweeper settings and try again if needed.

top‘On this page’ menu

Further Information

In a recent discussion list thread someone asked if quotation marks are really required around attributes, such as:

<img src="/images/greatimage.gif" width="205" height="105" alt="Helpful image description here" />

Are all these quotations required?
Yes, they are required for XHTML 1.0.
Why and who says so?
W3C Recommendations for XHTML 1.0 require attribute quotations. See W3C's notes, 4.4. Differences with HTML 4.

HomeSite icon You can download a fully functional trial version of HomeSite through Macromedia's Web site.

Disclaimer: WebsiteTips.com and owner/editor Shirley Kaiser have no monetary affiliation with Macromedia or HomeSite.

top‘On this page’ menuNavigation belowSearch/Sidebar

Articles, Tutorials, Tips:

Most Popular Books

In association with  In Association with Amazon.com 

Our Other Sites

SKDesigns

Effective, accessible, standards-based Web site design since 1996

SKDesigns - skdesigns.com

Brainstorms & Raves

Weblog on Web design, CSS, standards, music, more. By Shirley Kaiser, SKDesigns.

Brainstorms & Raves


Within Articles, Tutorials, Tips:

Within Web Site Resources:
SkipShow or Hide Detailed Navigation