CHAPTER 4 ADDING CONTENT

 

Adding Content

Use the visual tools in Dreamweaver to add a variety of content to your web pages. Add and format elements such as text, images, colors, movies, sound, and other forms of media. Be sure to make your pages accessible to visitors with disabilities.

This part contains the following chapters:

Inserting and Formatting Text

Macromedia Dreamweaver MX offers several ways for you to add and format text in a document. This chapter describes how to insert text, set font type, size, color, and alignment attributes, as well as how to create and apply your own custom styles using HTML styles and Cascading Style Sheet (CSS) styles.

This chapter covers the following topics:

LESSON Inserting and formatting HTML text

Formatting in Dreamweaver is similar to using a standard word processor. Use the Text > Paragraph Format submenu or the Format pop-up menu in the Property inspector to set the default formatting style (Paragraph, Preformatted, Heading 1, Heading 2, and so on) for a block of text. To change the font, size, color, and alignment of selected text, use the Text menu or the Property inspector. To apply text formatting such as bold, italic, code, underline, and so on, use the Text > Style submenu.

You can also combine several standard HTML tags to form a single style, called an HTML style. For example, you can manually apply HTML formatting using a combination of tags and attributes, and save that formatting as an HTML style; it’s stored in the HTML Styles panel. The next time you want to format text using that combination of HTML tags, you can simply select the saved style from the HTML Styles panel. HTML styles are supported by almost all web browsers and save time over manually formatting text.

Another kind of style, called a CSS style (CSS stands for Cascading Style Sheets), lets you apply text and page formatting with the advantage of automatic updating. You can store CSS styles directly in the document or, for more power and flexibility, in an external style sheet. If you attach an external style sheet to several web pages, all the pages automatically reflect any changes you make to the style sheet. To access CSS styles, use the CSS Styles panel or the CSS mode of the text Property inspector. For more information about using the text Property inspector to apply HTML or CSS styles, see Setting Text property options

Manual HTML formatting and HTML styles apply formatting using standard HTML tags (such as b, i, font, and code) that are supported by all popular web browsers. CSS styles define the formatting for all text in a particular class or redefine the formatting for a particular HTML tag (such as h1, h2, p, or li). CSS styles are supported only by the web browsers Netscape Navigator 4.0 and later versions, and Microsoft Internet Explorer 4.0 and later versions.

You can use CSS styles, HTML styles, and manual HTML formatting within the same page. Formatting is applied in a hierarchical manner, manual HTML formatting overrides formatting applied by an HTML style or CSS style, and CSS styles embedded in a document override external CSS styles. See About Cascading Style Sheets.

LESSON Adding text to a document

There are a number of ways to add text to a Dreamweaver document. You can type text directly in the Dreamweaver document window, or you can cut and paste or import text from other documents.

To add text to your document, do one of the following:

Importing text from other documents

You can import tabular data into your document by first saving the files (such as Microsoft Excel files or a database files) as delimited text files. For additional information on importing and formatting table data, see Importing tabular data in the Inserting and Formatting Text.

You can also import text from Microsoft Word HTML documents. For information on importing Word HTML documents, see Opening existing documents.

To import tabular data:

  1. Choose File > Import > Import Tabular Data, or choose Insert > Tabular Data.

The Import Table dialog box appears.

Browse for the file you want or enter its name in the text box.

  1. Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon, and Other.

If you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.

  1. Use the remaining options to format or define the table into which the data will be imported.
  2. Click OK when you’re done.

Adding space between characters

HTML only allows for one space between characters; to add additional space in a document you must insert a non-breaking space.

You can set a preference to automatically add non-breaking spaces in a document. To set this preference, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X) and in the General category make sure Allow Multiple Consecutive Spaces is checked.

To insert a non-breaking space, do one of the following:

Adding paragraph spacing

Dreamweaver works similarly to many word processing application: you press Enter (Windows) or Return (Macintosh) to create a new paragraph. Web browsers automatically insert a blank line of space between paragraphs. You can add a single line of space between paragraphs by inserting a line break.

To add a paragraph return:

To add a line break, do one of the following:

LESSON Formatting text

You can apply HTML text formatting to one letter or build an entire site using Text > Paragraph Format commands or options in the Property inspector. This kind of manual formatting replaces or overrides formatting set by an HTML style or CSS style.

When you apply HTML text formatting, you use the Property inspector and commands in the Text menu, such as Text > Paragraph Format and Text > Style.

Related topics

Using HTML styles to format text

Creating an HTML style

Creating a new CSS style

LESSON Setting and changing fonts and styles

Use options in the Property inspector or the Text menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or italic), and size.

When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the <strong> or <em> tag, respectively. If you are designing pages for viewers with 3.0 or older version browsers, you should change this preference in the General category of the Preferences dialog box (Edit > Preferences).

HTML font sizes are relative, not specific, point sizes. Users set the point size of the default font for their browsers; this is the font size that they will see when you select Default or 3 in the Property inspector or Text > Size submenu. Sizes 1 and 2 will appear smaller than the default font size; sizes 4 through 7 will appear larger. Also, fonts generally look larger in Windows than on the Macintosh, though Macintosh Internet Explorer 5 uses the same default font size as Windows.

Tip: One way to ensure consistency with font size is to use CSS styles with your font size set in pixels. For more information on CSS, see About Cascading Style Sheets.

Related topic

Modifying font combinations

To set or change font characteristics:

  1. Select the text. If no text is selected, the change applies to subsequent text you type.
  2. Choose from the following options:

Choose Default to remove previously applied fonts; Default applies the default font for the selected text (either the browser default font or the font assigned to that tag in the CSS style sheet).

Note: These numbers indicate a relative difference from the basefont size. The default basefont value is 3. Thus, a +4 value results in a font size of 3 + 4, or 7. The maximum sum for your font size values is 7. If you try to set them higher, they display as 7. Dreamweaver does not display the basefont tag (which goes in the head section), although the font size should display properly in a browser. To test this, compare text set at 3 and text set at +3.

LESSON Modifying font combinations

Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Text > Font submenu.

Font combinations determine how a browser displays text in your web page. A browser uses the first font in the combination that is installed on the user’s system; if none of the fonts in the combination are installed, the browser displays the text as specified by the user’s browser preferences.

To modify font combinations:

  1. Choose Text > Font > Edit Font List.
  2. Select the font combination from the list at the top of the dialog box.

The fonts in the selected combination are listed in the Chosen Fonts list in the lower left corner of the dialog box. To the right is a list of all available fonts installed on your system.

  1. Choose from the following options:

To add a new combination to the font list:

  1. Choose Text > Font > Edit Font List.
  2. Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list.
  3. Repeat step 2 for each subsequent font in the combination.

To add a font that is not installed on your system, type the font name in the text field below the Available Fonts list and click the << button to add the font to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are developing pages on a Macintosh.

  1. When you have finished selecting specific fonts, select a generic font family from the Available Fonts menu and click the << button to move the generic font family to the Chosen Fonts list.

Generic font families include cursive, fantasy, monospace, sans-serif, and serif. If none of the fonts in the Chosen Fonts list are available on the user’s system, the text appears in the default font associated with the generic font family. For example, the default monospace font on most systems is Courier.

LESSON Formatting paragraphs

Use the Format pop-up menu in the Property inspector or the Text > Paragraph Format submenu to apply the standard paragraph and heading tags.

When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standard paragraph. To change this setting, choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X), then in the General category, under Editing Options make sure Switch to Plain Paragraph after Heading is unchecked.

Related Topics

Creating an HTML style

Setting Text property options

Defining CSS Type properties

To apply a paragraph or heading tag:

  1. Place the insertion point in the paragraph, or select some of the text in the paragraph.
  2. Using the Text > Paragraph Format submenu or the Format pop-up menu in the Property inspector, choose an option:

LESSON Aligning text

You align text on the page using the Property inspector or the Text > Align submenu. You can center any element on a page using the Text > Align > Center command.

To align text:

  1. Select the text you want to align or simply insert the pointer at the beginning of the text.
  2. Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Align and choose an alignment command.

To center elements:

  1. Select the element (image, plug-in, table, or other page element) you want to center.
  2. Choose Text > Align > Center.

Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.

Indenting text

Using the Indent command applies the blockquote HTML tag to a paragraph of text, indenting text on both sides of the page.

To indent text and remove indentation:

  1. Place the insertion point in the paragraph you want to indent.
  2. Click the Indent or Outdent button in the Property inspector, choose Text > Indent or Outdent, or choose List > Indent or Outdent from the context menu.

Note: You can apply multiple indents to a paragraph. Each time you choose this command the text indents further from both sides of the document.

Changing the text color

You can change the color of selected text so that the new color overrides the text color set in Page Properties. (If no text color has been set in Page Properties, the default text color is black.)

To change the color of text:

  1. Select the text.
  2. Choose from the following options:

To return text to the default color:

  1. In the Property inspector, click the color box to open the palette of web-safe colors.
  2. Click the Strike-through button (the white square button with a red line through it, found in the upper right corner).

LESSON Creating bulleted and numbered lists

You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from new text as you type in the Document window. Definition lists do not use leading characters like bullet points or numbers and are often used in glossaries or descriptions. Lists can also be nested. Nested lists are lists that contain other lists. For example, you might want an ordered or bulleted list nested within another numbered or ordered list.

For information about setting a specific list type and other list options for an entire list or a specific list item (for example, reset numbering or use Roman numerals in an ordered list, or to set square bullets), see Setting List property options.

To create a new list:

  1. In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following:

The leading character for the specified list item appears in the document window.

  1. Type the list item text, then press Enter (Windows) or Return (Macintosh) to create another list item.
  2. To complete the list, press Enter twice (Windows) or press Return twice (Macintosh).

To create a list using existing text:

  1. Select a series of paragraphs to make into a list.
  2. Click the Bulleted or Numbered List button in the Property inspector, or choose Text > List and select the type of list desired—Unordered List, Ordered List, or Definition List.

To create a nested list:

  1. Select the list items you want to nest.
  2. Click the Indent button in the Property inspector, or choose Text > Indent.

Dreamweaver indents the text and creates a separate list with the original list’s HTML attributes.

  1. Apply a new list type or style to the indented text by following the same procedure used above.

Inserting dates

Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer (with or without the time) and provides the option of updating that date whenever you save the file.

Note: The dates and times shown in the Insert Date dialog box are not the current date, nor do they reflect the dates/times that a visitor sees when they display your site. They are examples only of the way you want to display this information.

To insert the current date into a document:

  1. In the Document window, place the insertion point where you want the date to be inserted.
  2. Do one of the following:
  3. In the resulting dialog box, select a format for the name of the day of the week, a format for the date, and a format for the time.
  4. If you want the inserted date to be updated every time you save the document, select Update Automatically on Save. If you want the date to become plain text when it’s inserted, and never update automatically, deselect that option.
  5. Click OK to insert the date.

Tip: If you have selected Update Automatically on Save, you can edit the date format after it has been inserted into the document by clicking on the formatted text and selecting Edit Date Format in the Property inspector.

Inserting special characters

Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML includes entity names for characters such as the copyright symbol (&copy;) the ampersand (&amp;), and the registered-trademark symbol (&reg;). Each entity has both a name (such as &mdash;) and a numeric equivalent (such as &#151;).

Tip: HTML uses the angle brackets <> in its code, but you may need to express the special characters for greater than or less than without Dreamweaver interpreting them as code. In this case, use &gt; for greater than (>) and &it; for less than (<).

Unfortunately, many browsers (especially older browsers, and browsers other than Navigator and Internet Explorer) don’t properly display many of the named entities.

You can insert several special characters (in the form of HTML entities) by choosing the Characters category in the Insert bar.

To insert a special character into a document:

  1. In the Document window, place the insertion point where you want to insert a special character.
  2. Do one of the following:

Tip: There are many other special characters available; to select one of them, choose Insert > Characters > More or select the Insert More Characters icon in the Insert bar, select a character, then click OK.

LESSON Using horizontal rules

Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with one or more rules.

To create a horizontal rule:

  1. In the Document window, place the insertion point where you want to insert a horizontal rule.
  2. Do one of the following:

To modify a horizontal rule:

  1. In the Document window, select the horizontal rule.
  2. Choose Window > Properties to open the Property inspector, and modify the properties as desired.

W and H specify the width and height of the rule in pixels or as a percentage of the page size.

Align specifies the alignment of the rule (Default, Left, Center, or Right). This setting applies only if the width of the rule is less than the width of the browser window.

Shading specifies whether the rule is drawn with shading. Deselect this option to draw the rule in a solid color.

LESSON Checking spelling

Use the Check Spelling command in the Text menu to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values.

By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, choose Edit > Preferences > General or Dreamweaver > Preferences > General (Mac OS X), then in the Spelling Dictionary pop-up menu select the dictionary you want to use. Dictionaries for additional languages can be downloaded from the Dreamweaver Support Center.

To check and correct spelling:

  1. Choose Text > Check Spelling or press Shift+F7.

When Dreamweaver encounters an unrecognized word the Check Spelling dialog box appears.

  1. In the Check Spelling dialog box, choose the appropriate option based on how you want the discrepancy handled:

Add to Personal adds the unrecognized word to your personal dictionary.

Ignore ignores this instance of the unrecognized word.

Ignore All ignores all instances of the unrecognized word.

Change replaces this instance of the unrecognized word with text that you type in the Change To text box or with the selection in the Suggestions list.

Change All replaces all instances of the unrecognized word in the same manner.

LESSON Searching and replacing text

You can search the current document, selected files, a directory, or an entire site for text, text surrounded by specific tags, or HTML tags and attributes. You use different commands to search for files, and to search for text and/or HTML 1 tags within files: Locate in Local Site and Locate in Remote Site search for files, while Edit > Find and Replace search for text and tags within files.

To search for text and/or HTML within documents:

  1. Choose from the following options:
  2. In the Find or Replace dialog box that appears, use the Find In option to specify which files to search:
  3. Use the Search For option to specify the kind of search you want to perform.

Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return (Macintosh), adds line breaks within the text search fields, allowing you to search for a Return character. Make sure to deselect the Ignore Whitespace Differences option when performing this search, if you’re not using regular expressions. Note that this finds a Return character in particular, not simply the occurrence of a line break; for instance, it doesn’t find a <br> tag or a <p> tag. Return characters appear as spaces in the Design view, not as line breaks.

  1. Use the following options to expand or limit the search:

Note: The Ignore Whitespace Differences option, when selected, treats all whitespace as a single space for the purposes of matching. For example, with this option selected, this text would match this text but not thistext. This option is not available when the Use Regular Expressions option is selected; you must explicitly write your regular expression to ignore whitespace. Note that <p> and <br> tags do not count as whitespace.

Note: If you are working in Code view and make changes to your document, and try to find and replace anything other than source code, a dialog box appears letting you know that Dreamweaver is synchronizing the two views before doing the search. For more information on synchronizing views, see Viewing your code.

Related topic

Searching and replacing text

LESSON Inserting Images

Images are commonly used to add graphical interfaces (such as navigation buttons), visual appeal (for example, photographs), or interactive design elements, such as rollover images or an image map.

In Macromedia Dreamweaver MX, you can work in Design view or Code view to insert images in a document. As you add images in a Dreamweaver document, you can set or modify image properties and view the changes directly in the Document window.

To set up an efficient web design workflow, you can select an image editor preference, and automatically launch it to edit images while you work in Dreamweaver.

This chapter contains the following sections:

About images

Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. Currently, GIF and JPEG file formats are the best supported and can be viewed by most browsers.

PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use GIFs or JPEGs for broader appeal.

GIF (Graphic Interchange Format) files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones.

JPEG (Joint Photographic Experts Group) file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file.

PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks MX. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Macromedia Dreamweaver MX.

Note: PNG support in browsers is inconsistent; therefore, if you work with PNG files, you should also export them as GIFs or JPEGs to ensure you have web-ready versions of them.

LESSON Inserting an image

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

You can also add images as dynamic content; for information, see Making images dynamic.

To insert an image:

  1. Place the insertion point where you want the image to appear in the Document window, then do one of the following:
  2. In the dialog box that appears, do one of the following:
  3. Browse to choose the image or content source you want to insert.

If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

  1. In the Property inspector (Window > Properties), set properties for the image.

For more information, see Setting image properties.

Related Topics

Setting a background image or background page color

Using spacer images

LESSON Inserting an image placeholder

An image placeholder is a graphic you use until final artwork is ready to be added to a web page.

You can define certain attributes of the placeholder: you can set the placeholder’s size and color, as well as provide it with a text label. An image placeholder’s color, size attributes, and label appear when the image placeholder is viewed in the Dreamweaver Document window.

When viewed in a browser window the label and size text do not appear.

To insert an image placeholder:

  1. In the Document window, place the insertion point where you want to insert a placeholder graphic.
  2. Do one of the following:

The Image Placeholder dialog box appears.

  1. In the dialog box, select options for the image placeholder.

For detailed information about setting these options, see Completing the Image Placeholder dialog box.

  1. Click OK.

Related topics

Replacing an image placeholder

Resizing an image

Setting image placeholder properties

Updating a Dreamweaver image placeholder in Fireworks.

Replacing an image placeholder

An image placeholder is not a graphic image that displays in a browser. Before you publish your site you should replace any image placeholders you’ve added with web-friendly graphic files such as GIFs or JPEGs.

If you have Fireworks MX, you can create a new graphic from the Dreamweaver image placeholder. The new image is set to the same size as the placeholder image. You can edit the image, then replace it in Dreamweaver. For information about creating a replacement image in Fireworks MX, see Updating a Dreamweaver image placeholder in Fireworks.

To update the image source:

  1. In the Document window, do one of the following:

The Image Source dialog box appears.

  1. In the dialog box, navigate to the image you want to replace the image placeholder with.
  2. Click OK.

The selected image appears in the document.

LESSON Aligning an image

Use the image Property inspector to set the alignment of an image in relation to other elements in the same paragraph or line.

Note: HTML does not provide a way to wrap text around the contours of an image, as you can with some word processing applications

You can align an image to text, another image, a plug-in, or other elements in the same line. You can also use the alignment buttons (left, right, and center) to set the horizontal alignment of an image.

Default generally specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)

Baseline and Bottom align the baseline of the text (or other element in the same paragraph) to the bottom of the selected object.

Top aligns the top of an image to the top of the tallest item (image or text) in the current line.

Middle aligns the middle of the image with the baseline of the current line.

TextTop aligns the top of the image with the top of the tallest character in the text line.

Absolute Middle aligns the middle of the image with the middle of the text in the current line.

Absolute Bottom aligns to the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g).

Left places the selected image on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces left-aligned objects to wrap to a new line.

Right places the image on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line.

 

LESSON Resizing an image

You can visually resize elements such as images, plug-ins, Macromedia Shockwave or Flash movies, applets, and ActiveX controls in the Design View of the Dreamweaver Document window. Visual resizing helps you determine how an element affects the layout at different dimensions.

Resizing changes the width and height attributes of the element back to their original size. The W and H fields in the Property inspector display the current width and height of the element as you resize it. The element’s file size does not change.

Bitmap elements such as GIF, JPEG, and PNG images may become distorted if you increase or decrease their width and height attributes. To maintain the same aspect ratio, hold down the Shift key while you resize a bitmap. However, it is recommended that you visually resize bitmaps in Dreamweaver only to determine the layout. After you have determined the ideal size for your image, edit the file in an image-editing application. Editing the image may also reduce its file size and thus reduce download time.

To resize an element:

  1. Select the element (for example, an image or Shockwave movie) in the Document window.

Resize handles appear at the bottom and right sides of the element and in the bottom right corner. If resize handles don’t appear, either click away from the element you want to resize and then reselect it, or click the appropriate tag in the tag selector to select the element.

  1. Resize the element by doing one of the following:

Elements can be visually resized to a minimum of 8 x 8 pixels. To adjust the width and height of an element to a smaller size (for example, 1 x 1 pixel), use the Property inspector to enter a numeric value.

To return a resized element to its original dimensions, in the Property inspector, delete the values in the W and H fields, or click the Reset Size button.

LESSON Creating a rollover image

A rollover is an image that, when viewed in a browser, changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.

You cannot see the effect of a rollover image in the Dreamweaver Document window. To see the rollover effect, press F12 to preview the page in a browser, then roll the pointer over the image.

Rollover images are automatically set to respond to the onMouseOver event. For information about setting an image to respond to a different event (for example, a mouse click) or about editing a rollover to display a different image, see Swap Image.

A more complex form of rollover image is a navigation bar. To create a navigation bar, use the Insert > Interactive Images > Navigation Bar command (see Inserting a navigation bar).

To create a rollover:

  1. In the Document window, place the insertion point where you want the rollover to appear.
  2. Insert the rollover using one of these methods:

The Insert Rollover Image dialog box appears.

  1. In the Image Name text box, type a name for the rollover.
  2. In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file’s path in the text box.
  3. In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file’s path in the text box.
  4. If you want the images preloaded in the browser’s cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option.
  5. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
  6. In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image.

Note: If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.

  1. Click OK to close the Insert Rollover Image dialog box.
  2. Choose File > Preview in Browser or press F12.
  3. In the browser, move the pointer over the original image.

The display should switch to the rollover image.

 

LESSON Using an external image editor

While in Dreamweaver, you can open a selected image in an external image editor; when you return to Dreamweaver after saving the edited image file, any changes you made to the image are visible in the Document window.

You can use Macromedia Fireworks as your external image editor. Fireworks 3 and later use Design Notes to track where the original PNG file is stored on your local hard disk; when you open the image in Fireworks, it lets you edit the original PNG.

If you set any other image-editing application as the external image editor and launch the editor from within Dreamweaver, the application launches and opens the selected image. Use the image editor to modify the image, save your changes, and then view the updated image in Dreamweaver.

If the image file was generated from a PNG file, you can manually open the original file, make changes, and save the changed image. Dreamweaver still updates the image in the Document window when you return.

If you don’t see an updated image after returning to the Dreamweaver window, select the image and then click the Refresh button in the Property inspector.

Related topics

Setting external image editor preferences

Launching an external image editor

Launching an external image editor

You choose Edit > Preferences > File Types/Editor or Dreamweaver > Preferences > File Types/Editor (Mac OS X) to set an external image editor for the image file types you specify. For more information about choosing an image editor, see Setting external image editor preferences.

To launch the external image editor, do one of the following:

Note: When you open an image from the Site panel, the Fireworks integration features are not in effect; Fireworks does not open the original PNG file. To use the Fireworks integration features, open images from within the Document window.

LESSON Applying behaviors to images

You can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot, Dreamweaver inserts the HTML source code into the area tag. Three behaviors apply specifically to images: Preload Images, Swap Image, and Swap Image Restore.

Preload Images loads images that do not appear on the page right away (such as those that will be swapped in with timelines, behaviors, layers, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear. See Preload Images.

Swap Image swaps one image for another by changing the SRC attribute of the img tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). See Swap Image.

Swap Image Restore restores the last set of swapped images to their previous source files. This action is automatically added whenever you attach the Swap Image action to an object by default; you should never need to select it manually. See Swap Image Restore.

You can also use behaviors to create more sophisticated navigation systems, such as a navigation bar or a jump menu. See Creating navigation bars and Creating jump menus.

Reference

This section provides information about the panels, dialog boxes, and inspectors introduced in this chapter.

Setting image properties

Completing the Image Placeholder dialog box

Setting image placeholder properties

Setting external image editor preferences

LESSON Setting image properties

This Property inspector allows you to set properties for an image. If you do not see all of the image properties as shown below, click the expander arrow in the lower right corner

To set image properties:

  1. Set any of the following options:

W and H are the width and height of the image, in pixels. Dreamweaver automatically updates these fields with the image’s original dimensions when you insert an image in a page. You can specify the image size in the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), and combinations, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code.

If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H field labels.)

Note: You can change these values to scale the display size of this instance of the image, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.

Src specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.

For information about dynamic image sources, see Making images dynamic.

Link specifies a hyperlink for the image. Drag the Point-to-File icon to a file in the Site panel, click the folder icon to browse to a document on your site, or manually type the URL. For information about creating links, see Creating links.

Align aligns an image and text on the same line. See Aligning an image.

Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

Map Name and the Hotspot tools allow you to label and create a client-side image map. See Creating image maps.

V Space and H Space add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.

Target specifies the frame or window in which the linked page should load. (This option is not available when the image isn’t linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:

_blank loads the linked file into a new, unnamed browser window.

_parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.

_self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.

_top loads the linked file into the full browser window, thereby removing all frames.

Low Src specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they’re waiting to see.

Border is the width, in pixels, of the image’s border. The default is no border.

Edit launches the image editor you specified in External Editors preferences and opens the selected image. For information about setting an external image editor, see Using an external image editor.

Reset Size resets the W and H values to the original size of the image.

LESSON Completing the Image Placeholder dialog box

The purpose of this dialog box is to create an image placeholder graphic.

To complete the dialog box, set the options you want to set:

  1. In the Name text box, enter text you want to appear as a label for the image placeholder.
    This is an optional field; leave the field blank if you do not want a label to appear.

The name must begin with a letter and can contain only letters and numbers; spaces and high ASCII characters are not allowed.

  1. In the Width and Height text boxes, type a number to set the image size in pixels. (required)
  2. For Color, do one of the following to apply a color: (optional)
  3. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
  4. Click OK.

An image placeholder appears in the document.

Note: An image tag is automatically inserted into the HTML code containing an empty src attribute.

LESSON Setting image placeholder properties

To set properties for an image placeholder, select the placeholder in the Document window; then choose Window > Properties to display the Property inspector. To see all properties, click the expander arrow in the lower right corner.

Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color for a placeholder image.

In the placeholder Property inspector, the gray fields and the Align text field are disabled. You can set these properties in the image Property inspector when you replace the placeholder with an image.

To set image properties:

Set any of the following options:

W and H set the width and height of the image placeholder, in pixels.

Note: Do not leave a space between the value and the unit type. For example, to set width or height to two inches, enter 2in.

Src specifies the source file for the image. For a placeholder image this text box is empty. Click the Browse button to select a replacement image for the placeholder graphic.

Link specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in the Site panel, click the folder icon to browse to a document on your site, or manually type the URL.

Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

Create lets you launch Fireworks MX to create a replacement image. The Create button is disabled unless Fireworks MX is also installed on your computer. For information about creating a replacement image in Fireworks, see Updating a Dreamweaver image placeholder in Fireworks.

Reset Size resets the W and H values to the original size of the image.

Color lets you specify a color for the image placeholder.

LESSON Setting external image editor preferences

Use File Types/Editors preference to select an image editor for launching and editing graphic files. You can set which file types an editor opens; and you can select multiple image editors. For example, you can tell Dreamweaver to launch Fireworks when you want to edit a GIF, and to launch a different image editor when you want to edit a JPG or JPEG.

To set an external image editor for an existing file type:

  1. Open the File Types/Editors Preferences dialog box by doing one of the following:
  2. In the Extensions list, select the file extension you want to set an external editor for.
  3. Click the Add (+) button above the Editors list.
  4. In the Select External Editor dialog box, browse to the application you want to launch as an editor for this file type.
  5. In the Preferences dialog box, click Make Primary if you want this editor to be the primary editor for this file type.
  6. If you want to set up an additional editor for this file type, repeat steps 3 and 4.

Dreamweaver automatically uses the primary editor when you choose to edit this image type. You can choose the other listed editors from the context menu for the image in the Document window.

To add a new file type to the Extensions list:

  1. In the File Types/Editors Preferences dialog box, click the Add (+) button above the Extensions list.

A text box appears in the Extensions list.

  1. Type the file extension of the file type you want to launch an editor for.
  2. To select an external editor for the file type, click the Add (+) button above the Editors list.
  3. In the dialog box that appears, choose the application you want to use to edit this image type.
  4. Click Make Primary if you want this editor to be the primary editor for the image type.

To change an existing editor preference:

  1. In the File Types/Editors preferences dialog box, in the Extensions list select the file type you are changing to view the existing editor(s).
  2. In the Editors list, select the editor you want to want to affect, then do one of the following:

For more information on the other options in External Editors preferences, see Launching an external editor for media files.

Working with Multiple Pages

Link your pages together, and reuse design elements and layouts from one page to another. Then test your site.

This part contains the following chapters:

LESSON Linking and Navigation

Once you’ve set up a Dreamweaver site to store your website documents and have created HTML pages, you’ll want to create connections from your documents to other documents.

Macromedia Dreamweaver MX provides several ways to create hypertext links to documents, images, multimedia files, or downloadable software. You can establish links to any text or image anywhere within a document, including text or images located in a heading, list, table, layer, or frame.

For a visual representation of how your files are linked together, use the site map. In the site map you can add new documents to your site, create and remove document links, and check links to dependent files (see Using the site map).

There are several different ways of creating and managing links. Some web designers prefer creating links to nonexistent pages or files as they work, while others prefer creating all the files and pages first, then adding the links. Another way to manage links is to create “placeholder” pages which stand in for the final file and let you add links quickly and check them before you have actually completed all the pages. For more information about checking links, see Checking links in a page or site.

This chapter contains the following sections:

About document locations and paths

Creating links

Managing links

Creating jump menus

Creating navigation bars

Creating image maps

Attaching behaviors to links

LESSON About document locations and paths

Understanding the file path between the document you’re linking from and the document you’re linking to is essential to creating links.

Each web page has a unique address, called a Uniform Resource Locator (URL). (For more information on URLs, see the World Wide Web Consortium page on naming and addressing.) However, when you create a local link (a link from one document to another on the same site), you generally don’t specify the entire URL of the document you’re linking to; instead, you specify a relative path from the current document or from the site’s root folder.

The three types of link paths are as follows:

Using Dreamweaver, you can easily select the type of document path to create for your links. See Linking files and documents.

Note: It is best to use the type of linking you prefer and are most comfortable with either site or document relative. Browsing to links, as opposed to typing in the paths, ensures that you always enter the right path.

LESSON Absolute paths

Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for web pages). For example, http://www.macromedia.com/support/dreamweaver/contents.html is an absolute path.

You must use an absolute path to link to a document on another server. While you can also use absolute-path links for local links (to documents in the same site), that approach is discouraged—if you move the site to another domain, all of your local absolute-path links will break. Using relative paths for local links also provides greater flexibility if you need to move files within your site.

Note: When inserting images (not links): if you use an absolute path to an image that resides on a remote server and is not available on the local hard drive, you will not be able to view the image in your document window. Instead, you must preview the document in a browser to see it. If possible, use document or site root-relative paths for images. For more information, see Inserting an image.

LESSON Document-relative paths

Document-relative paths are the most appropriate paths to use for local links in most websites. They’re particularly useful when the current document and the linked document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder by specifying the path through the folder hierarchy from the current document to the linked document.

The basic idea of document-relative paths is to omit the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs.

For example, suppose you have a site with the following structure:

To link from contents.html to other files:

Each forward slash (/) represents moving down one level in the folder hierarchy.

Each ../ represents moving up one level the folder hierarchy.

The ../ moves up to the parent folder; the products/ moves down into the products subfolder.

Note: Always save a new file before creating a document-relative path; a document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path into a relative path.

When you move a group of files as a group—for example, when you move an entire folder, so that all the files inside that folder retain the same relative paths to each other—you don’t need to update document-relative links between those files. However, when you move an individual file that contains document-relative links, or an individual file that’s linked to by a document-relative link, you do need to update those links. (If you move or rename files using the Site panel, Dreamweaver updates all relevant links automatically.)

Site root-relative paths

Site root-relative paths provide the path from the site’s root folder to a document. You may want to use these types of paths if you are working on a large website that uses several servers, or one server that hosts several different sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths.

A site root-relative path begins with a leading forward slash, which stands for the site root folder. For example, /support/tips.html is a site root-relative path to a file (tips.html) in the support subfolder of the site’s root folder.

A site root-relative path often provides the best way to specify links in a website in which you need to frequently move HTML files from one folder to another. When you move a document that contains root-relative links, you don’t need to change the links; for example, if your HTML files use root-relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid. However, when you move or rename the documents linked to with root-relative links, you do need to update those links, even if the documents’ paths relative to each other haven’t changed.

For example, if you move a folder, all root-relative links to files within that folder must be updated. (If you move or rename files using the Site panel, Dreamweaver updates all relevant links automatically.)

To use site root-relative paths, first define a local folder in Dreamweaver by choosing a local root folder to serve as the equivalent of the document root on a server (see Setting up a Dreamweaver site).

Dreamweaver uses this folder to determine the site root-relative paths to files.

Note: Root-relative links are interpreted by servers, not by browsers, so if you open a local page that uses root-relative links in your browser (without using Preview in Browser from within Dreamweaver), the links don’t work. When you use the Preview in Browser command to preview a document that uses root-relative links, Dreamweaver temporarily converts those links (in the previewed file only) to use document-relative paths. However, you can preview only one page that uses root-relative links at a time—if you follow a link from the previewed page, the next page’s root-relative links are not converted, and the browser can’t follow such links. Previewing pages in framesets that use root-relative links results in similar problems.

To preview a set of pages that use root-relative links, do one of the following:

Note: To use this option, you must be running a web server on your local computer.

LESSON Creating links

The HTML tag for creating a hypertext link is called an anchor tag or an a tag. Dreamweaver creates an anchor tag for objects, text, or images you create links from. You can create links to other documents and files, and links to specific places in a single document using the a href tag.

For example, if you select the text Home Page in the Document window, then create a link to a file named home.htm, the HTML source code for the link looks like this:

<a href="home.htm">Home Page</a>

If you are creating a link to a specific place in a document, first create a named anchor (for example, a name="MainMenu"). Then create a link within the page that refers to that named anchor (for example, a href="#MainMenu").

Before creating links, make sure you understand how document-relative paths, site root-relative paths, and absolute paths work (see About document locations and paths).

You can create several types of links in a document:

Using Dreamweaver, there are several ways to create local links (links between documents in the same site):

Note: Typing URLs or paths to a file can lead to incorrect paths and links that don’t work. To ensure that the path is correct, use the folder icon to browse to your link.

To create an external link (to a document on another site), you must type the absolute path (with proper protocol) in the Property inspector. Make sure that you enter the entire path (including http://) when creating external links.

LESSON Linking files and documents

You can use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or file. For information about using the site map to create links, see Creating and modifying links in the site map.

To link documents using the Property inspector’s folder icon or link text box:

  1. Select text or an image in the Document window’s Design view.
  2. Open the Property inspector (Window > Properties), and then do one of the following:

The path to the linked document appears in the URL field. Use the Relative To pop-up menu in the Select HTML File dialog box to indicate whether to make the path document-relative or root-relative, then click Select.

Note: When you change the path type in the Relative To field, Dreamweaver uses your choice as the default path type for any future links until you change the path type again.

To link to a document in your site, enter a document-relative or site root-relative path. To link to a document outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for a file that hasn’t been created yet.

  1. From the Target pop-up menu, select a location in which to open the document.

To make the linked document appear somewhere other than in the current window or frame, select an option from the Target pop-up menu on the Property inspector:

Tip: If all the links on your page will be set to the same target, you can specify this target once by choosing Insert > Head Tag > Base and selecting the target information. For information about targeting frames, see Controlling frame content with links.

To link documents using the Point-to-File icon:

  1. Select text or an image in the Document window’s Design view.
  2. Drag the Point-to-File icon at the right of the Link text box in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Site panel.

The Link text box updates to show the link.

Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

  1. Release the mouse button.

To create a link from a selection in an open document:

  1. Select text in the Document window.
  2. Shift-drag from the selection.

The Point-to-File icon appears as you drag.

  1. Point to another open document, a visible anchor in an open document, or a document in the Site panel.

Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection.

  1. Release the mouse button.

To link documents using the site map and the Point-to-File icon:

  1. Expand the Site panel, and then display both the Site Files and the Site Map views by holding down the Site Map icon and choosing Map and Files.
  2. Select an HTML file in the site map.

The Point-to-File icon appears next to the file.

  1. Drag the Point-to-File icon and point to another file in the site map or to a local file in the Site Files view.
  2. Release the mouse button.

A hypertext link with the name of the linked file is placed at the bottom of the selected HTML file. This method works well when you are building your site and you want to create links across the site quickly.

LESSON Linking to a specific place in a document

You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.

Creating a link to a named anchor is a two-step process. First, create a named anchor; then create a link to the named anchor.

To create a named anchor:

  1. In the Document window’s Design view, place the insertion point where you want the named anchor.
  2. Do one of the following:

The Named Anchor dialog box appears.

  1. In the Anchor Name field, type a name for the anchor.

For more information, see Setting the Named Anchor option.

The anchor marker appears at the insertion point.

Note: If you do not see the anchor marker, choose View > Visual Aids > Invisible Elements.

To link to a named anchor:

  1. In the Document window’s Design view, select text or an image to create a link from.
  2. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor. For example:

Note: Anchor names are case sensitive.

To link to a named anchor using the point-to-file method:

  1. Open the document containing the named anchor you want.

Note: Choose View > Visual Aids > Invisible Elements to make the anchor visible if you don’t see it.

  1. In the Document window’s Design view, select text or an image you want to link from. (If this is another open document, you must switch to it.)
  2. Do one of the following:

LESSON Creating a hyperlink

You can add hyperlink text to link to another file.

To add a hyperlink using the Hyperlink command:

  1. Place the insertion point in the document where you want the hyperlink to appear.
  2. Do one of the following to display the Insert Hyperlink dialog box:

The Hyperlink dialog box appears.

  1. Complete the dialog box.

For more information, see Setting hyperlink options.

  1. Click OK.

LESSON Creating an e-mail link

An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e-mail message window, the To field is automatically updated with the address specified in the e-mail link.

To create an e-mail link using the Insert E-Mail Link command:

  1. In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.
  2. Do one of the following to insert the link:

The E-Mail Link dialog box appears.

  1. Complete the dialog box.

For more information, see Setting Email Link options.

  1. Click OK.

To create an e-mail link using the Property inspector:

  1. Select text or an image in the Document window’s Design view.
  2. In the Link text box of the Property inspector, type mailto: followed by an e-mail address.

Do not type any spaces between the colon and the e-mail address. For example, type mailto:jdoe@macromedia2.com.

LESSON Creating null and script links

The most familiar kinds of links are those to documents and named anchors (described in Linking files and documents and Linking to a specific place in a document, respectively), but there are other types of links as well.

A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. Once you have created a null link, you can attach a behavior to it to swap an image or to display a layer when the pointer is moved over the link. For information about attaching behaviors to objects, see Applying a behavior.

Script links execute JavaScript code or call a JavaScript function and are useful for giving visitors additional information about an item without leaving the current web page. Script links can also be used to perform calculations, form validations, and other processing tasks when a visitor clicks a specific item.

To create a null link:

  1. Select text, an image, or an object in the Document window’s Design view.
  2. In the Property inspector, type javascript:; (the word javascript, followed by a colon, followed by a semicolon) in the Link text box.

To create a script link:

  1. Select text, an image, or an object in the Document window’s Design view.
  2. In the Link text box of the Property inspector, type javascript: followed by some JavaScript code or a function call.

For example, typing javascript:alert('This link leads to the index') in the Link text box produces a link that, when clicked, displays a JavaScript alert box with the message This link leads to the index.

Note: Because the JavaScript code appears in the HTML between double quotation marks (as the value of the href attribute), you must use single quotation marks in the script code or “escape” any double quotation marks by preceding them with a backslash (for example, \"This link leads to the index\").

LESSON Managing links

Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server.

To turn on link management in Dreamweaver:

  1. Choose Edit > Preferences or Dreamweaver > Preferences (Mac OS X).

The Preferences dialog box appears.

  1. Select General from the category list on the left.

The General preferences options appear.

  1. In the Document Options section, select Always or Prompt from the Update Links when Moving Files pop-up menu.

If you choose Always, Dreamweaver automatically updates all links to and from a selected document whenever you move or rename it. (For specific instructions on what to do when you delete a file, see Changing a link sitewide.)

If you choose Prompt, Dreamweaver first displays a dialog box that lists all the files affected by the change. Click Update to update the links in these files, or click Don’t Update to leave the files unchanged.

  1. Click OK.

To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the links in your local folder. This cache file is created when you select the Cache option in the Site Definition dialog box, and the cache file updates invisibly as you use Dreamweaver to add, change, or delete links to files on your local site.

To create a cache file for your site:

  1. Choose Site > Edit Sites.

The Edit Sites dialog box appears.

  1. Select a site, and then click Edit.
  2. Select Local Info from the category list on the left.

The Site Definition dialog box displays the Local Info options.

  1. In the Local Info category, select the Enable Cache checkbox.

The first time you change or delete links to files in your local folder after launching Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, the cache loads and Dreamweaver updates all the links to the file you just changed. If you click No, the change is noted in the cache, but the cache does not load, and Dreamweaver does not update links.

It may take a few minutes for the cache to load on larger sites; most of this time is spent comparing the time stamps of the files on the local site with the time stamps recorded in the cache to see if the cache is out of date. If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.

To re-create the cache for your site:

In the Site panel, choose Site > Recreate Site Cache.

LESSON Creating and modifying links in the site map

You can modify the structure of the site in the site map by adding, changing, and removing links. Dreamweaver automatically updates the site map to display the changes to the site.

To add a link, do one of the following:

Note: Make sure the Site panel is docked, and then click the Expand arrow. Hold down the Site Map button, and then select Files and Map.

Note: For more information, see Linking files and documents.

To change a link:

  1. In the site map, select a page to which you want to change the link (so that the document that currently links to this page will point to another page), and then do one of the following:

Note: Use the Site panel’s Site menu.

  1. Browse to the file you want the link to point to or type a URL.
  2. Click OK.

To remove a link, do one of the following:

Note: Use the Site panel’s Site menu.

Removing a link does not delete the file, but removes the link from the HTML source on the page that is pointing to the link.

To open the source of a link:

Select a file in the site map, and do one of the following:

The Property inspector and the source file containing the link open in the Document window, with the link highlighted.

LESSON Changing a link sitewide

In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually change all links (including e-mail, FTP, null, and script links) to point somewhere else.

You can use this option at any time (for example, you might have the words “this month’s movies” linked to /movies/july.html throughout your site, and on August 1 you must change those links to point to /movies/august.html), but it’s particularly useful when you want to delete a file that other files link to.

To change a link sitewide:

  1. Select a file in the Local view of the Site panel.

Note: If you are changing an e-mail, FTP, null, or script link, you do not need to select a file.

  1. Choose Site > Change Link Sitewide.

The Change Link Sitewide dialog box appears.
This is a picture of the feature being described.

  1. Complete the dialog box

For more information, see Setting the Change Link Sitewide options.

  1. Click OK.

Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path format already used in the document (for example, if the old path was document relative, the new path is also document relative). The type of the link, whether document or root-relative, doesn’t matter. Dreamweaver automatically updates the link.

After you change a link sitewide, the selected file becomes an orphan (that is, no files on your local disk point to it). You can safely delete it without breaking any links in your local Dreamweaver site.

Note: Because these changes occur locally, you must manually delete the corresponding orphan file in the remote folder and put or check in any files in which links were changed; otherwise, visitors to your site won’t be able to see the changes.

LESSON Testing a Site

Before uploading your site to a server and declaring it ready for viewing, it’s a good idea to test it locally. (In fact, it’s a good idea to test and troubleshoot your site frequently throughout its construction—you can catch problems early and avoid repeating them.)

You should make sure that your pages look and work as expected in the browsers you’re targeting, that there are no broken links, and that the pages don’t take too long to download. You can also test and troubleshoot your entire site by running a site report.

The following guidelines will help you create a good experience for visitors to your site:

Your pages should be legible and functional in browsers that do not support styles, layers, plug-ins, or JavaScript (see Checking for browser compatibility). For pages that fail badly in older browsers, consider using the Check Browser behavior to automatically redirect visitors to another page (see Check Browser).

This gives you an opportunity to see differences in layout, color, font sizes, and default browser window size that cannot be predicted in a target browser check (see Previewing pages in browsers).

Other sites undergo redesign and reorganization too, and the page you’re linking to may have been moved or deleted. You can run a link check report to test your links (see Checking links in a page or site, Fixing broken links, Opening linked documents in Dreamweaver, or Using Reports to test a site).

Keep in mind that for pages that consist of one large table, visitors will see nothing until the entire table finishes loading. Consider breaking up large tables; if this is not possible, consider putting a small amount of content—such as a welcome message or an advertising banner—outside the table at the top of the page so users can view this material while the table downloads.

You can check your entire site for problems, such as untitled documents, empty tags, and redundant nested tags (see Using Reports to test a site).

Publishing your site—that is, pushing it out and making it live—can be accomplished in several ways and is an ongoing process. An important part of the process is defining and implementing a version-control system, either with the tools Macromedia Dreamweaver MX includes or through an external version-control application.

The forums are a great resource for getting information on different browsers, platforms, and so on. You can also discuss technical issues and share helpful hints with other Dreamweaver users.

This chapter contains the following sections:

EXTENDED LESSONS

Inserting Media

Macromedia Dreamweaver lets you add sound and movies to your website quickly and easily. You can incorporate and edit multimedia files and objects, such as Macromedia Flash and Shockwave movies, Java applets, QuickTime, Active X, and audio files. You can attach Design Notes to these objects, which let you communicate with your team. You can also insert Flash button and text objects from within Dreamweaver itself.

This chapter contains the following sections:

Working with Behaviors and Animations

Many web pages contain only text and images, with no interactive elements. Use JavaScript behaviors and layer-animation timelines in Dreamweaver to provide interactivity and animation to capture the interest of your visitors.

This part contains the following chapters: