BackFirst PageNext

Editing Web Pages

HomeSite is designed to suit many different editing styles. Here are a few of the most common editing tasks:

Each type of task calls for different features and customizations. This section describes the basic editing techniques and then offers pointers to features and settings to help you work in the style that suits you best.

Use the tag and command tools on the toolbars and Quick Bar as you edit tags and text.

Entering and editing text

To add text and tags from scratch:

  1. Open a new HTML document and click below the opening <BODY> tag.
  2. In the Quick Bar, select an HTML tag tool, such as the Paragraph tool on the HTML Standard tool bar.

    The opening and closing <P> tags appear, with your cursor blinking in between. If Tag completion is turned on, the closing tag appears when you finish typing the opening tag.

  3. Enter the tag's contents and press Enter.
  4. Right-click in the Edit window, and choose Insert Tag to open the Tag Chooser.
  5. Choose a tag and click Select. If you choose a tag that has a tag editor, such as H2, for example, the Tag Editor appears. Edit the tag entries as needed and click OK to insert the tag code in your document.

    If you choose a tag with no attributes, such as CENTER, the tag code appears in the Edit window.

For information on adding images and multimedia elements to your document, see Enhancing Pages in this book.

Adding links

To add hypertext links:

  1. Select the text you'd like to link and click the Anchor tool on the HTML Standard toolbar.
  2. In the Anchor dialog box, enter the destination of the link, usually a URL or filename, in the HREF box -- for example, http://www.allaire.com/products/HOMESITE/.

    The selected text becomes a hyperlink.

Adding text from other files

To add and edit text from another file:

  1. To add content from another file, choose File > Insert File. Choose a file and click Open.

    The contents of the file are inserted in the current document.

  2. Select text you want to edit and use the Edit > Selection commands and editing tools to add tag codes as needed. For example, to add <BR> tags for line breaks, choose Edit > Selection > Add Line Breaks.
  3. Use the Edit menu commands to indent text, or convert tag case as needed. Use the Edit > Selection commands to convert text to lists or to a table.

Editing individual tag blocks

You can use shortcuts to quickly select and edit tag blocks:

Using Code Snippets

The Code Snippets feature offers a quick way to store and re-use code. In the Snippets pane of the Resources tab in HomeSite, you can create and store snippets for your own use, and share code snippets with other content developers.

To create and use code snippets:

  1. Open the Snippets pane of Resource tab, right-click and choose Create Folder.
  2. Provide a name for the snippets folder, for example, MySnippets.
  3. Right-click in the Snippets pane and choose Add Snippet. The Snippet dialog box appears, with windows for you to enter Start Text and End Text.
  4. Enter a name for the code snippet.

    Note that snippet names cannot contain characters that are illegal in file names, such as slashes, special characters, double quotes, etc.

  5. In the Start Text window, enter the beginning of your snippet.
  6. In the End Text window, enter the ending text. Click OK
  7. Double click the snippet name to insert the code snippet in the current document.

    Right-click on a snippet to edit or delete it.

Shared Snippets

You can share code snippets with other content developers on your network. This is especially useful to share common code such as navigation bars, complex table code, and so on.

To create shared snippets:

  1. Choose Options > Settings or press F8 to open the Settings dialog box.
  2. In the File Locations pane, choose a folder for Shared Snippets.
  3. Use the Browse button to navigate to your HomeSite installation's \UserData\Snippets folder and choose a Snippets folder to share.
  4. In the Snippets pane of the Resource tab, right-click and choose Create Shared Folder. The folder icon changes color to show it's shared.

Editing tag attributes and values

Much of the finesse in using HTML tags to create Web pages or applications comes in editing tag attributes and values. HomeSite offers a variety of editing tools that help you enter and edit tags more quickly and accurately:

To edit HTML tags and content:

  1. Click inside an existing HTML tag, or create a new tag that takes attributes, for example, a TABLE tag, and put the cursor before the closing angle bracket (<).
  2. Press the space bar. When the Tag Insight is turned on, a popup menu appears showing the valid attributes for the current tag.
  3. Choose an attribute, such as Border. The attribute appears, with your cursor waiting between quotation marks for you to enter a value.

    Tag Insight is especially useful when you're not sure of the available attributes or don't care to type out long attribute names, such as CELLPADDING.

  4. You can add additional attributes by pressing the space bar inside a tag.

Using Search and Replace

To find text or phrases in the current document or a set of documents, use the Search menu commands. See Using Search and Replace for details on search and replace in HomeSite, including using regular expressions in your search strings.

Using the Tag Inspector and Tag Tree

You can use the Tag Inspector to edit existing attribute values or to add new ones. It is also very useful for editing tags that you create or modify.

To use the Tag Inspector:

  1. Click inside a tag that has attribute values, for example, an IMG tag.
  2. Open the Tag Inspector in the Resources area.
  3. Click in the ALT field and enter text for the ALT attribute, for the text that displays when your image is unavailable or a user passes the mouse over the image.

    When you click outside the ALT field, the new tag value appears in your code.

  4. Click inside a tag that has a set list of values for a particular attribute, for example, the BODY tag.
  5. Click in the BGCOLOR field in the Tag Inspector. A drop-down menu appears showing the available color values for the background color of the document.
  6. In the Tag Tree above the Tag Inspector, click on the + signs to expand the tag tree display. Use the Tag Tree to inspect and navigate the document's hierarchy.

Entering Special Characters

Because angle brackets and special characters are used in HTML coding, to display special characters on a Web page you must use character entities to display special characters on Web pages.

HomeSite automatically converts special characters to their corresponding character entity. You can turn this feature on and off in the Tag Help pane of the Settings dialog box (F8).

Also, you can use the Special Characters palette to add special characters to your documents. Choose View > Special Characters or select the Special Characters tool on the View toolbar to open this palette at the bottom of your HomeSite window.

Tag completion

When you're typing HTML tag codes, you can choose to have HomeSite "complete" the tag by adding a closing tag when you press the > key at the end of the opening tag.

This feature is most helpful when you are typing HTML codes and text at the same time, as opposed to editing isolated text and tags.

To turn Tag Completion on and off, use the Tag Completion check box in the Tag Help pane of the Settings dialog box (F8).

You can also refine the way the Tag Completion feature works by clicking the Tag Completion Settings button in the Tag Help pane and editing the list of tags on the tag completion list. You can also choose whether to include ASP tags in tag completion and whether to automatically close double quotes in attribute values.

Editing Options

You can customize the HomeSite editor to suit your preferences for writing and editing code. For example, you can use color coding to distinguish HTML code from text or scripting languages. The following features control the appearance of tags and text in the editor.

Turning word wrap on and off

To control whether text wraps in the Edit window as you type and enter content, choose Options > Word Wrap or select the Word Wrap icon on the Editor toolbar on the left hand side of the Edit window.

Using the Edit window gutter

You can toggle on and off a gutter on the left hand side of the Edit window. Use the gutter to:

To set bookmarks, click in the gutter or choose Edit > Set Bookmark.

Controlling tag case

You can control whether HTML tags appear in all upper or lower case. Use the Tags settings in the General pane of the Settings dialog box (F8).

To change the case of all tags in the current document, use Edit > Convert Tag Case command.

Using hexadecimal color values

To specify that all colors be inserted as hexadecimal numbers in HomeSite, use the Tags settings in the General pane of the Settings dialog box (F8).

Note that newer versions of Web browsers support named colors, which allows you to refer to a color in your HTML code by a name such as "Red" or "Blue." However, some older browsers do not support named colors. Instead, they require hexadecimal color values, such as "#000000" for black, or "#FFFFFF" for white. If you expect your pages to be seen by a wide range of visitors using a variety of browsers, you should use hex color values instead of named colors.

Color-coding tag names

HomeSite displays tag codes, attributes, and values in different colors to help you distinguish tags from content. The document's file type and file extension determine which color scheme is employed.

To edit or change the color scheme for each file extension, use the Color Coding pane of the Settings dialog box (F8).

Indenting code

Indenting your HTML code in the HomeSite editor greatly increases the readability of the code, even though it does not affect display in the browser (except for preformatted text).

HomeSite offers a way to automatically indent tags underneath each other. If you select the Auto Indent button in the Edit pane of the Settings dialog box (F8), when you hit the Enter key, HomeSite aligns your cursor with the indent level of the previous line.

Note that you can override this automatic matching of the previous line's indent level by placing the cursor manually or by using the arrow keys.

Controlling Tab Size

In the Edit pane of the Settings dialog box (F8), you can choose the Insert Tabs as Spaces option to insert a specified number of spaces every time you hit the Tab key. The number of spaces is controlled by the Tab Width setting, also in the Edit pane.

Running CodeSweeper to Format Code

CodeSweeper automates the task of getting your code properly formatted. It can be very useful in a number of situations:

Click the CodeSweeper button on the Edit toolbar to run the selected CodeSweeper on the current document.

Configuring CodeSweeper

Select Options > CodeSweeper Settings to choose from the list of available CodeSweepers. HomeSite installs a CodeSweeper optimized for HTML, one that works on both HTML and ColdFusion Markup Language (CFML) tags, and one that you can use for testing. When you have selected a CodeSweeper, you can then specify the formatting rules you want to use.

CodeSweeper settings

You can set the following formatting rules for all tags:

Click the Update button to save these settings.

Tag specific settings

A wide range of options is available for the individual tags contained in each CodeSweeper. Note that if you set formatting for the "All Other Tags" entry in the tag list, those rules apply to every tag that appears in a document that is not in the list.

To set rules for a tag:

  1. Select a tag from the list
  2. Change the specific settings
  3. Click Update Tag to save the settings for that tag

To add a tag to a CodeSweeper:

  1. Click Add Tag
  2. Enter a the tag name
  3. Change tag settings
  4. Click Update Tag to save the settings

Check the Apply Current CodeSweeper when switching from Design view box to automatically run CodeSweeper on the active document when you leave Design mode.

Adding a new CodeSweeper

You can easily create custom CodeSweepers to fit specific document types or coding styles.

  1. Click the Add button
  2. Enter a name for the new CodeSweeper
  3. Change global and tag settings
  4. Click Update to save the settings

Editing Shortcuts

The following shortcuts can help you work more productively in HomeSite.

Keyboard Shortcuts

HomeSite offers keyboard shortcuts for many editing commands. You can also customize these shortcuts. Choose Options > Customize and open the Keyboard Shortcuts pane to see the current keyboard mappings and edit them to suit your preferences.

For a complete list of the default keyboard shortcuts, see Keyboard Shortcuts.

Code Templates

Use the Code Templates feature as a shortcut to entering words that you type frequently. On the Code Templates pane of the Settings dialog box (F8), you can add and change these shortcuts, mapping abbreviations to words or phrases that you type often.

To use the Code Templates feature while editing text, enter the abbreviation, for example, dt4, and press CTRL-J. The abbreviation expands to the full phrase, for example, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">.

You can also use the Snippets feature to store frequently-used code blocks, such as navigation bars, complex table code that you use often, and so on.

Setting Bookmarks

When you're working on very long documents, setting Bookmarks in the gutter of the Edit window can help you find your place as you move from one part of the document to another.

You set bookmarks by clicking the line number in the gutter of the Edit window or using the Edit > Set Bookmark command. To turn the gutter on and off, use the Show Gutter tool on the Edit toolbar to the left of the Edit window. Use the Edit > Goto Next Bookmark command to move to the next bookmark.


BackFirst PageNext

allaire

AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.