• A website: a set of pages on a server, to be viewed by a visitor to the site using a web browser.
• A remote site: the files on the server that make up a website, from your (the author’s) point of view rather than a visitor’s point of view.
• A local site: the files on your local disk that correspond to the files in the remote site. You edit the files on your local disk, then upload them to the remote site.
• A Dreamweaver site definition: a set of defining characteristics for a local site, plus information on how the local site corresponds to a remote site.

1. Choose Site > New Site. (That is, choose New Site from the Site menu.)
   The Site Definition dialog box appears
2. If the dialog box is showing the Advanced tab, click Basic.
   The first screen of the Site Definition Wizard appears, asking you to enter a name for your site.
3. In the text box, enter a name to identify the site within Dreamweaver. The name can be anything you want. For example, you could name the site Global Car Rental.

1. If the Site panel isn’t already open, open it by choosing Window > Site.
   The Site panel appears. (If the Site panel was already open, it may not appear at this step. If the Site panel does not appear, choose Window > Site again to display it.)
2. In the Site panel, expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
3. Expand folders as necessary to reach the Dreamweaver application folder.
4. Expand the Samples folder.
5. Expand the GettingStarted folder in the Samples folder.
6. Select the Design folder in the GettingStarted folder and press Control+C (Windows) or Command+C (Macintosh) to copy it.
   The Design folder contains a folder named Assets, which contains various assets related to the site, including an images subfolder.
7. Still in the Site panel, scroll to your site’s local root folder (the folder that you created when you defined the site) and select that folder. Then press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the Design folder into your site.

1. Choose File > Close.
   The New Document dialog box appears.
   
2. In the category list on the left, select the Page Designs category.
   The list in the middle column of the dialog box is relabeled Page Designs. A list of pre-designed page designs appears.
3. Scroll down in the Page Designs list and choose the item named Text: Article D with Navigation.
4. Note: There is another item with a similar name. Be careful not to choose the item named Text: Article D, which has no navigation bar.
5. Make sure the Document radio button is selected at the lower right of the dialog box.
6. Click Create.
7. A new page appears, using the layout you chose, in a new Document window. The page is filled with placeholder “Lorem ipsum” text to show how the page design will look when real text is added to it.
   
8. Save your document.

1. Choose File > Save.
2. In the Save As dialog box, browse to the Design folder inside the site root folder.
3. Enter the filename index.htm.
4. Click Save.

1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
   Dreamweaver’s Document toolbar appears. In the integrated workspace, it appears at the top of the document area by default; in the floating workspace, it appears as part of the Document window.
   
2. In the Title text box, where it says “Untitled Document,” type a title for the page, such as Global Car Rental Home Page. Then press Enter (Windows) or Return (Macintosh) to see the page title update in the Document window’s title bar.
3. Save your document.

1. Triple-click in the bold placeholder text at the top of the left column (under the image placeholder) to select the entire bold paragraph.
2. Type Safety Tips (or your own heading text if you prefer).
3. Select the three paragraphs of placeholder text below the horizontal rule.
4. Type the following text (or your own text if you prefer):
   The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch!
5. In the right column, triple-click the word “News” and type Globe-Trotter Promotions to replace it.
6. In the Site panel, locate the promotions.txt file in your Assets folder. Double-click the file’s icon to open it.
   This file contains copy for Global Car Rentals special promotions.
   Note that the text file appears in a new Document window with a dark bar down the left side. This window is in Code view, and can’t be switched to Design view because the file is not an HTML file

1. Choose File > New.
2. In the New Document dialog box, select the CSS Style Sheets category from the category list on the left.
   The list in the middle column of the dialog box is relabeled CSS Style Sheets. A list of pre-designed style sheets appears.
3. In the CSS Style Sheets list, select a style sheet. For the Global Car Rental site, select Basic: Verdana, which redefines the body, td, and th tags by specifying fonts for them. Then click Create .
   
   Dreamweaver creates a new text file containing a small set of predefined CSS styles.
4. Choose File > Save to save the new CSS file. Save it in the site’s assets folder; name it text.css (or any other name you like).
5. Choose File > Close to close the CSS file.

1. In the Window menu, choose an HTML file (such as index.htm).
   Note: If your system preferences are set to not show file extensions, the index.htm file appears in the Window menu with the name index.
2. Choose Window > CSS Styles to display the CSS Styles panel.
3. At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
   If you haven’t previously defined styles for this document, no styles are available.
4. At the bottom of the CSS Styles panel, click the Attach Style Sheet button.
   
5. n the Link External Style Sheet dialog box, click Browse to locate a style sheet.
6. In the Select Style Sheet File dialog box, browse to and select the new style sheet you created in the assets folder, then click OK (Windows) or Choose (Macintosh) to attach the style sheet.
7. In the Link External Style Sheet dialog box, click OK to attach the style sheet.
   The style sheet’s name and contents appear in the CSS Styles panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana.
8. Save your document.

1. At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
2. Select the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet button at the bottom of the CSS Styles panel.
   
   A dialog box appears showing the names of the styles in the style sheet.
3. Select one of the styles, such as body, and click Edit.
   The CSS Style Definition dialog box appears.
   
4. Enter a size for the text, such as 13 pixels. Adjust other options as you like.
5. Click OK to redefine the style.
6. Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td, and th styles to a size of 13 pixels.
7. When you’re done editing styles, click the Save button to save your changes and close the stylesheet dialog box.
   The changed styles are applied to your document. For example, body text appears in 13-pixel Verdana.

1. Save your document if you haven’t already done so.
   You can insert an image into an unsaved document, but if you do, a dialog box will appear, informing you that the URL used for the image will be the full local path to the image. If you take this approach, Dreamweaver fixes the URLs when you do save the document, but it’s easiest to save the document before adding images.
2. To insert an image in place of an existing image placeholder, double-click the placeholder. For example, to insert the company logo at the top left of the Global Car Rental page, double-click the small placeholder that’s labeled “image (100 x 50).”
   The Select Image Source dialog box appears.
3. Near the bottom of the dialog box, make sure that the Relative To pop-up menu is set to Document.
4. Browse to an image in your assets folder (such as logo.jpg).
5. Click OK or Select (Windows) or Open or Choose (Macintosh) to insert the image.
   In the Document window, the image appears where the placeholder was.
6. Click the large image placeholder that you created .
7. Make sure the Site panel and the Property inspector are showing (choose Window > Site Files and Window > Properties if they aren’t visible).
8. In the Property inspector, drag from the Src text box’s Point-to-File icon to the Site panel. (Make sure to drag from the Point-to-File icon next to the Src text box, not the one next to the Link text box.) Continue to hold the mouse button down as you point to the assets folder (if the folder is closed); the folder opens. Continue to hold the button down as you point to the images folder; that folder opens as well. Continue to hold the button down until the pointer is over the vintage.jpg file. Release the mouse button to select vintage.jpg.
   
   In the Document window, the image appears where the placeholder was. If the wrong image appears, look at the filename in the Src text box; if you selected the wrong file, drag the Point-to-File icon again.
9. To insert images in places where you don’t already have placeholders, click in the Design view to place the insertion point where you want the image, then choose Insert > Image.
   If you insert an image for which the image file isn’t inside your site’s local root folder, Dreamweaver provides the option to automatically copy the image into the site.
10. Save your document.

1. If the Property inspector isn’t open, choose Window > Properties to open it.
2. If the Property inspector is collapsed (showing only its title bar), click the expander arrow in the title bar to expand it.
3. If the Property inspector isn’t showing all properties, click the expander arrow at the lower right corner of the Property inspector to view all properties.
   
4. Control-click (Windows) or Command-click (Macintosh) a cell to select the cell. For example, in the Global Car Rental sample page, there’s now a table cell that contains the logo image for the car rental company; Control-click or Command-click the cell that contains that logo image.
   The lower half of the Property inspector shows cell properties. If the lower half of the Property inspector isn’t visible, click the expander arrow at the lower right corner of the Property inspector to view all properties.
5. In the Property inspector, click the Background Color button that appears next to the lower of the two Bg labels.
   
   The color picker appears and the pointer changes to an eyedropper.
   
6. Select a color. You can either select a color in the color picker’s palette, or click anywhere on your display to select the color of the pixel you clicked. For example, click the background of the Global logo image to make the background color of the table cell match the image background color.
   The table cell’s background color changes to the color you picked.
7. Repeat that procedure for each table cell that you want to change the background color of. In the Global Car Rental sample page, change the background colors of all of the navigation-bar table cells and of the header cell in the second column of text (the cell that now contains the text “Globe-Trotter Promotions”), to make them all match the background color of the Global logo.
8. Save your document.

1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
2. In the Document toolbar, click the Code and Design view button.
   
   The window splits, showing the underlying HTML code.
   

1. If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
2. In the Document toolbar, click the Design view button.
   

1. Open the new customerService.htm page by double-clicking it in the Site panel.
   Look at the Document window’s title bar to be sure that you’re looking at the customerService.htm file. The title bar should say “Global Car Rental Home Page” and then a folder name and a filename; the filename should be customerServe.htm (or whatever you named it in the previous procedure).
2. In the customerService.htm page, select the large image (the image showing the car in the main text column) by clicking it.
   In the tag selector, click the <td> tag.
3. Press Backspace (Windows) or Delete (Macintosh).
   Everything in the table cell, including the image and the text, is deleted.
4. Save your document.

1. In the Site panel, locate the custServInfo.htm file in your Assets folder. Double-click the file’s icon to open it.
   This file contains content to be added to the customer service page. If you were creating your own site, you would add your own content here, but for the purposes of this lesson, this content is provided for you.
2. In the custServInfo.htm Document window, choose View > Code to view the HTML code.
3. Still in the custServInfo.htm Document window, press Control+A (Windows) or Command+A (Macintosh) to select everything in the file.
   If you’re not in Code view when you do this, you may have to press Control+A or Command+A several times to select everything; if the insertion point is inside a table cell, Select All initially selects only that cell. For simplicity, switch to Code view before selecting everything.
4. Press Control+C (Windows) or Command+C (Macintosh) to copy everything.
5. Switch back to the customerService.htm document. Click inside the now-empty main text column (the wide column on the left).
6. Choose Edit > Paste HTML.
   The HTML code that you copied from the custServInfo.htm file is pasted into this document. (If you choose Edit > Paste instead of Edit > Paste HTML, the HTML code is pasted into Design view as if it’s text. If HTML code appears in your Design view at this step, choose Edit > Undo and try again.)

The text.css style sheet is already attached to this page, so text is formatted automatically.

• Create a set of dummy pages first, then add links between them, and then add content to the pages.
• As you create a page, specify links to pages that don’t exist yet; later, create pages that have the filenames you linked to.

1. Switch to the customer service page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
2. In the bottom of the wide text column on the left side, select the words “Home Page”.
   If you didn’t add text to the left column of the customer service page when you created it, enter the words Home Page in that text column and select those words.
3. If the Property inspector isn’t open, open it by choosing Window > Properties.
4. Click the folder icon next to the Link text box in the Property inspector. Browse to the index.htm file in your site’s local root folder.

1. Switch to the main (index.htm) page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
2. In the Document window, place the insertion point where you want the rollover image to appear. On the Global Car Rental main page, for example, double-click in the navigation-bar table cell that says “Lorem” and press Backspace (Windows) or Delete (Macintosh) to delete the text, leaving the insertion point in the cell.
3. Choose Insert > Interactive Images > Rollover Image.
   
4. In the Insert Rollover Image dialog box, type a name for the image, such as home-image, in the Image Name text box.
   This gives the image a unique name, and makes it easily identifiable in the HTML code.
5. In the Original Image text box, click Browse; then navigate to the btnHome.jpg file in your site’s images folder (inside the assets folder). Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).
   The Original Image text box indicates which image to display when the page first appears in the browser.
6. In the Rollover Image text box, click Browse; then navigate to btnHome_on.jpg in your site’s images folder. Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).
   The Rollover Image text box indicates which image to display when the pointer is pointing to the image in the browser.
7. Make sure the Preload Rollover Image option is selected so the rollover images load when the page opens in the browser, ensuring a quick transition between images when a user moves the pointer over the original image.
8. In the When Clicked, Go To URL text box, click the Browse button and browse to index.htm.
   The index.htm file is the file that you’re editing, so this step causes the rollover image to link to the page that you’re placing the rollover image on. It might seem unnecessary to have a link to the page that the link is on, but you’ll be using the same set of navigation rollovers on other pages as well, so this link will allow visitors to return to the index.htm page from other pages that contain this navigation bar.
9. Click OK to close the dialog box.
   The specified original image appears in the document.
10. Save your document.

1. In the index.htm file, click in the table cell that contains the Home rollover image.
2. In the tag selector, select the rightmost <tr> tag.
   The table row containing the three navigation-bar rollovers is selected.
3. Choose Edit > Copy.
4. Switch to the customerService.htm file.
5. Click in the navigation-bar table cell that says “Lorem.”
6. In the tag selector, select the rightmost <tr> tag.
7. Choose Edit > Paste.
   The navigation-bar rollover images are pasted in place of the existing table cells.
8. Save your document.

1. If index.htm isn’t the current document, switch to it. (If it’s not open, open it.)
2. Press the F12 key.
   Your primary browser starts if it’s not running already. It displays the index page.
   Note: Dreamweaver should automatically detect your primary browser and use that for previewing. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and choose File > Preview in Browser > Edit Browser List. The Preview in Browser Preferences dialog box appears; add the correct browser to the list. For more information, click the Help button in the Preferences dialog box.
3. Move the pointer to point to the rollover images to see the images change. Click links to make sure they work.

1. Choose Site > Edit Sites.
2. Select a site (such as Global Car Rental) and click Edit.
3. Click the Basic tab at the top of the dialog box.
4. You’ve already filled in the first few steps in the Basic tab, when you set up your local site, so click Next a few times, until the Sharing Files step is highlighted at the top of the wizard.
   
5. In the pop-up menu labeled “How do you connect to your remote server?”, choose a method for connecting to the remote site.
   The most common method for connecting to a server on the Internet is FTP; the most common method for connecting a server on your intranet is Local/Network. If you aren’t sure what to choose here, ask the server’s system administrator.
6. If you choose FTP, enter the following options:

• Enter the hostname of the server (such as ftp.macromedia.com).
• In the text box that asks what folder contains your files, enter the path on the server from the ftp root folder to the remote site’s root folder. If you’re not sure, consult your system administrator.
  In many cases, this text box should be left blank.
• Enter your user name and password in the appropriate text boxes and click Test Connection.
• If the connection is unsuccessful, consult your system administrator.

7. If you choose Local/Network, then click the folder icon next to the text box and browse to the remote site’s root folder.
8. Click Next.
9. Don’t enable check-in and check-out for this site.
   If you and your co-workers are working together on a larger site, check-in and check-out help to prevent you from overwriting each others’ files. For this site, though, you don’t need this feature.
10. Click Next.
11. Click Done to finish setting up the remote site.
12. Click Done again to finish editing the site.

1. In the Site panel, select the site’s local root folder.
2. Click the Put Files button.
   
   All of the site’s files are uploaded to the remote site.
3. Open your remote site in a browser to make sure everything uploaded correctly.

1. Choose Edit > Preferences, then choose General from the list of categories on the left.
   The General category appears.
   
2. Click the Change Workspace button.
   The Workspace Setup dialog box appears.
   

1. Choose Window > Site to open the Site panel, if it’s not already open.
2. In the Site panel, from the Site pop-up menu, select the name of the site you defined in the previous chapter.
   If you have not defined a site, see Set up a local site. You need to define a site before you continue
3. When you select the site name from the pop-up menu, Dreamweaver displays the files in the site.
4. Expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
5. Expand folders as necessary to reach the Dreamweaver application folder, and then expand the Samples folder.
6. In the Samples folder, expand the GettingStarted folder, then select the Code folder, and press Control+C (Windows) or Command+C (Macintosh) to copy it.
7. Scroll back to the top of the Site panel, and select the site folder.
8. Press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the folder in your site.

1. Choose Window > Site to open the Site panel, if it’s not already open.
2. Expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
3. Expand folders as necessary to reach the Dreamweaver application folder, and then expand the Samples folder.
4. In the Samples folder, expand the GettingStarted folder, then expand the FinalSite folder.
5. In the FinalSite folder, double-click index.htm to open it, then double-click location_comp.htm.
   Dreamweaver displays the pages in the Document window.
6. Close the pages when you are finished.

1. Choose Window > Site to open the Site panel, if it’s not already open.
2. In your site, expand the Code folder.
3. Double-click index.htm to open it, then double-click location_start.htm.
   These are the two files you’ll need for this lesson.
4. In the Document window, click the Show Code View button on the toolbar or choose View > Code to switch to Code view and see the file’s source code.
5. To switch between the pages quickly, press Control+Tab or click the tab at the bottom of the page (Windows only).
   Note: You must maximize the page to see the tabs.
   

1. Open location_start.htm in Code view, if it’s not already open.
2. Do one of the following to open the Tag Inspector, if it’s not already open:
   Choose Window > Tag Inspector.
   In the Code panel group, click the Tag Inspector tab.
   The Tag Inspector gives you a structured view of all the tags in your page. It also displays the attributes of each tag.
   
3. In the Document window Code view, find the text for the heading “Rental Locations.
4. Select the non-breaking space entity (&nbsp;) between the paragraph tags that follow the heading:
   <p><FONT SIZE=”+2″ COLOR=”#FF6600″>Rental Locations</FONT></p>
   <p>
   &nbsp;</p>
5. Choose Insert > Table, then click OK in the Insert Table dialog box to accept the default values.
   Dreamweaver inserts table code.
6. Click the Refresh button on the toolbar.
   The Tag Inspector panel updates so that focus is on the Table tag you just inserted. A list of attributes appears below the tag.
7. In the Document window, click a few different tags to see how the Tag Inspector updates the tag and attributes it displays, then click the Table tag again so that its attributes appear in the Tag Inspector.
8. In the Tag Inspector panel, click in the empty text box beside the align attribute.
   An arrow for a pop-up menu appears.
9. Click the pop-up menu arrow, and select center.
   Dreamweaver changes the code in the Document window.
10. Click the Show Design View button on the toolbar or choose View > Design to see the table.
11. In the Document window, choose File > Save.

1. Open location_start.htm in Code view, if it’s not already open.
2. Highlight the code for the logo.jpg image you inserted.
   Note: Make sure you highlight the entire <img> tag.
3. In the Common tab of the Insert bar, click the Hyperlink button.
   The Hyperlink dialog box appears with the image tag already
   
4. In the Link text box, enter index.htm or click the folder icon to browse to it.
   Note: To link to a web page, enter the page’s URL.
5. Click OK.
   Dreamweaver inserts the code in your page to create the link around the image.
6. Choose File > Save.

1. In the Document window, place the insertion point in the document, then do one of the following:
   Select Insert > Table.
   In the Insert bar’s Common category, click the Table icon.
   
   The Insert Table dialog box appears.
   
2. In the dialog box, set the following options:
   In the Rows text box, type 2.
   In the Columns text box, type 2.
   In the Width text box, type 600, and then select Pixels in the pop-up menu to the right of the Width text box.
   Setting the width to 600 pixels creates a fixed width table. We’ll discuss table width in more detail a little later in this tutorial.
   In the Border text box, type 1 to set a 1-pixel border around the table and table cells.
3. Click OK.
   Dreamweaver inserts the table in the document
   
   
4. Save your document by doing one of the following:
   Select File > Save.
   Press Control+S

1. Click in the top-left cell then drag down to the bottom row to select the left column.
   
2. Select Modify > Table > Insert Column.
   The table now contains three columns.
   
3. Click in the bottom left cell and then select Modify > Table > Insert Rows or Columns.
   The Insert Rows or Columns dialog box appears
   
4. In the dialog box, set the following options:
   For Insert, select Rows.
   In Number of Rows, type 2.
   For Where, select Above the Selection
5. Click OK.
   The table updates. You now have a four-row by three-column table.
6. Save your changes (File > Save).

1. In the document, select the first two cells in the left column of the table, by dragging your pointer from the top left cell to the cell below it.
2. Choose Modify > Table > Merge Cells.
   The two cells merge into a single cell.
   
3. Click in the third row of the second column, then drag to the right and down to select the last two rows of cells in the second and third columns.
4. In the Property inspector, click the Merge button to combine the cells.
   The selected cells merge into one cell.

1. Click in the top left cell.
2. In the Property inspector, click the Split Cell button.
   The Split Cell dialog box appears.
   
3. In the dialog box, set the following options:
   For Split Cell Into, select Columns.
   In Number of Rows, enter 2.
4. Click OK.
   The table is modified.
   
   

1. Move the pointer along the bottom table border until it changes into a border selector, then drag it down to resize the table.
   
   

1. You can use this method to resize the other row heights in the table if you’d like.
2. Move the pointer along a column border until it changes to a border selector, then drag it to the left or right to change a column’s width.
3. When you are done adjusting your table, save your document.

1. In the document, click in any cell of the table, then in the tag selector located at the bottom left of the Document window, click the <table> tag to select the entire table.
2. Open the Property inspector (Window > Properties), if it isn’t already open.
   Properties for the selected table appear in the Property inspector.
   
3. In the Property inspector, in the Bg Color text box select a color by doing one of the following:
   Click the color picker pop-up, then choose a color from the color picker.
   Enter a color using a hexadecimal value, for example #CC9933.
   Enter a web-safe color name, such as goldenrod.
   A background color applies to the table

1. In the Document window, select the table.
2. In the Property inspector, in the Brdr Color text box, use the color picker to select a border color for your table.
3. When you are done, save your document.
4. Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.

1. In Dreamweaver, choose File > New.
2. In the New Document dialog box, the Basic Page category is already selected; in the Basic Pages list, double-click HTML to create a new HTML document.
   The document opens in the Document window.
3. Save this file to your local site folder. Name it tableWidth
4. Place the insertion point in the document.
5. In the Common tab of the Insert bar, click the Table button.
6. In the dialog box that appears, set the following options:
   In the Rows text box, type

1. In the Insert bar, click the Layout tab, then click the Layout view button to switch from Standard view.
   
   The Getting Started in Layout View dialog box appears and describes the Layout view options.
2. Review the options, then click OK to close the dialog box.
3. In the Insert bar there are two Layout options available—Draw Layout Cell and Draw Layout Table; these options aren’t available in Standard view.
4. If the Property inspector isn’t already open, choose Window > Properties to open it.
5. In the Insert bar, click the Draw Layout Cell button.
6. Move the pointer to the Document window; the mouse pointer changes to a drawing tool (looks like a small cross). Click in the upper left corner of the document, then drag to draw a layout cell.
   When you release the mouse, a layout cell appears in a layout table.
   The layout table expands to fill the Document window, and sets the page’s layout area. The white rectangle is the layout cell you drew. You can place additional layout cells in the empty area of the layout table.
7. Draw another cell to create a text area above the navigation buttons.
   

1. In the Insert bar, click the Draw Layout Cell button; then hold down the Control key (Windows) or Command key (Macintosh) so you can draw multiple cells in the table.
2. In the Document window, position the pointer below the last cell you drew; then drag to draw a layout cell.
   Continue to hold the Control key (Windows) or Command key (Macintosh) and draw two more layout cells. Your screen should look similar to this:
   
3. Click in a blank area of the Insert bar, to deselect the Draw Layout Cell tool. (The drawing tool changes to a selection arrow.)

1. Click the border of the layout cell to select it.
2. To resize a layout cell:
   In the Property inspector for the layout cell, type a number for the desired cell width or height. For example, type 200 in the Height text box to set the cell’s height to 200 pixels, then click in the document to see the cell width change.

Note: If you enter a pixel width or height that exceeds the dimension of the layout table, or that causes the cell to overlap another cell in a layout table, Dreamweaver alerts you and adjusts the cell width to a valid width.

1. Choose File > Open, and in the dialog box that appears, navigate to the GettingStarted folder you created, then navigate to Tutorials/Completed and open the file named imageAlign_comp.htm.
   The file opens in the Document window.
2. Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.
   The file shows three examples using image alignment and spacing to work with images and text together.
3. When you are done viewing the file close your browser window.

1. In the image_align.htm document, click the second image in the page (next to the table cell that contains the text Spacing).
2. In the Property inspector, enter 10 in the V Space text box to set the vertical spacing.
3. Move the pointer to the H Space text box, enter 30, then press Enter or Return to set the horizontal spacing.
   A margin of space is created between the text and the image. The spacing also affects the distance between the image and the table border.

1. In the imageAlign.htm document, click the third image in the page (next to the table cell that contains the text Alignment and Spacing).
2. In the Property inspector, in the Align pop-up menu choose Right.
   The image moves to the right.
3. In the HSpace text box, enter 30, then click elsewhere in the Property inspector or in the Document window for the value to update.
   A margin of space is added between the image and text.

1. In Dreamweaver, choose File > Open, then navigate to and open the file named imagemap_start.htm.
2. In the document, click the image of the world map to select it.
3. Open the Property inspector if it isn’t already open, and click the expander arrow in the lower right area of the Property inspector to see all the image properties, if necessary.
   
   Image map options appear in the expanded Property inspector.
4. In the Map Name text box, type Locations.
   Tip: If you create more than one image map in a document, each map must have a unique name. Each image map can have multiple hotspots as well.
5. Click the Rectangular Hotspot Tool to select it.
6. In the Document window, click in the area above and to the left of North America, then drag the pointer down and to the right over the image to create a hotspot area.
   
7. A blue layer appears over the image, and the hotspot Property inspector appears.
   
8. In the Link text box, click the folder icon. In the dialog box that appears, navigate to the file named location1.htm to set a link to it.
9. In the Alt text box, type North America.
   Note: You should always set alternate text for images in your documents, including image maps, this provides descriptive information about an image for page viewers who are using text-only browsers.
   
   That’s it—you’ve set the first hotspot. Let’s set one more.

1. Open the CSS Styles panel (Window > CSS Styles), if it is not already open.
   
2. In the CSS Styles panel, click the New CSS Style button (+) at the bottom of the panel.
   The New CSS Style dialog box appears.

1. In the New CSS Style dialog box, for Type, select Redefine HTML Tag.
2. In the Tag pop-up menu, select body.
3. In Define In, select This Document Only.
   For now we’ll apply the style to this document, later you’ll see how to export the style so you can use it in other pages in the site. Your dialog box should look similar to this:
   
4. Click OK.
   The CSS Style definition dialog box appears.
   
5. Set the following Type settings:
   In the Font pop-up menu, select Arial, Helvetica, sans serif.
   
6. In the Size pop-up menu, select 12 and pixels.
7. In Color, click the color picker, then use the eyedropper to select white.

1. Under Category, select Background.
   CSS background attributes appear.
   
2. In Background Color, do one of the following to set a background color:
   Click the color picker then use the eyedropper to select a dark blue or move eyedropper to the Document window and select the blue in the Global logo image.
   In the Background Color text box, enter #333366
3. Click OK.
4. In the CSS Styles panel, select Edit Styles.
   

   The new style appears in the list along with a description of the style attributes.

1. In the CSS Styles panel, click the New CSS Style button (+) located at the bottom of the panel.
   The New CSS Style dialog box appears.
2. In Type, select Use CSS Selector.
3. In the Selector pop-up menu, select a:link.
4. In Define In, select This Document Only.
5. Click OK.
   The CSS Style definition dialog box appears.
   
6. Set the following Type attributes for the link:
   In Decoration, select Overline
7. In Color, in the text box, enter #FFCC99.
8. Click OK.
9. To see the style you applied to the links you must view the page in a browser, press F12 to preview your page.

1. Choose File > Export > Export CSS Styles.
   In the Export CSS Styles dialog box appears.
2. In the dialog box, in the Save In (Windows) or Where (Macintosh) pop-up menu, navigate to your local site folder.
3. In File Name (Windows) or Save As (Macintosh), name the file mystyle.css.
   Note: You can name a CSS style sheet any name you want, with the following exceptions; the name must be lowercase and contain no spaces.
   
4. Click Save.

1. In Dreamweaver, open the Site panel (Window > Site), if it isn’t already open.
2. In the Site panel, locate the file named css_start2.htm, then double-click it to open it in the Document window.
3. In the CSS Styles panel, click the Attach Style Sheet button located at the bottom of the panel.
   
   The Link External Style Sheet dialog box appears.
4. In the File/URL text box, enter the path to mystyle.css or click Browse and in the dialog box that appears navigate to the mystyle.css file, then click OK to select it.
5. In the Link External Style Sheet dialog box, for Add As, select Link.
   
6. Click OK.
   The selected style sheet links to the current document, and the style attributes are immediately applied.

1. Open the Tag Library Editor (Edit > Tag Libraries).
2. Click the plus (+) button and choose DTD Schema > Import XML DTD or Schema File.
3. Enter the file or URL of the DTD or schema file.
4. Enter the prefix to be used with the tags.
   The prefix is used to identify a tag on a page as part of a particular tag library.
5. Click OK.

1. Open an ASP.NET page in Dreamweaver.
2. Open the Tag Library Editor (Edit > Tag Libraries).
3. Click the plus (+) button and choose one of the following:
   To import all the ASP.NET custom tags from the application server, choose ASP.NET > Import All ASP.NET Custom Tags.
   To import only certain custom tags from the application server, choose ASP.NET > Import Selected ASP.NET Custom Tags.
   The Import Selected ASP.NET Custom Tags dialog box appears, listing every ASP.NET custom tag installed on the application server. Control-click (Windows) or Command-click (Macintosh) tags from the list and click OK.

1. Open a JSP page in Dreamweaver.
2. Open the Tag Library Editor (Edit > Tag Libraries).
3. Click the plus (+) button and choose JSP > Import From File (*.tld, *.jar, *.zip).
4. Specify the .tld, .jar, or .zip file containing the tag library.
5. Enter a URI to identify the tag library.
   The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to access the organization; it is used to uniquely identify the tag library.
6. Enter the prefix to be used with the tags.
   The prefix is used to identify a tag on a page as part of a particular tag library.
7. Click OK.

1. Open a JSP page in Dreamweaver.
2. Open the Tag Library Editor (Edit > Tag Libraries).
3. Click the plus (+) button and choose JSP > Import From Server (web.xml).
   The Import from Server dialog box appears.
4. Select a tag library.
5. Enter a URI to identify the tag library.
   The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to access the organization; it is used to uniquely identify the tag library.
6. Click OK.

1. Open a JSP page in Dreamweaver.
2. Open the Tag Library Editor (Edit > Tag Libraries).
3. In the Tag Library Editor, click the plus (+) button and choose JSP > Import JRun Server Tags From Folder.
4. Specify a folder containing the JRun tags.
5. Enter a URI to identify the tag library.
6. Enter the prefix to be used with the tags.
   The prefix is used to identify a tag on a page as part of a particular tag library.

1. Type a start bracket (<) to display a list of tags.
2. Press the Escape key to close the list.
3. Scroll down the list and double-click a tag to insert it.
4. If the tag supports attributes, press the spacebar to display a list of allowed attributes for the tag. Select an attribute and press Enter.
5. Type the value for the attribute or, if the attribute takes only certain values, select a value from the list of allowed values for the attribute.
6. For every attribute that you want to add for the tag, repeat the previous two steps, making sure that you don’t press the spacebar between a value and its end quote (“).
7. Type the end bracket for the tag (>) after the last attribute-value pair.

• To add an attribute, place the insertion point to the left of a tag end bracket (>) and press the spacebar to display a list of any supported attributes for the tag. Insert the attribute and its value as previously described.
• To change an attribute, delete the attribute and add an attribute, as previously described.
• To change a value, delete the value and add a value, as previously described.

1. Choose Edit > Preferences > Code Hints or Dreamweaver > Preferences > Code Hints (Mac OS X), then set the preferences to show without any delay.
2. In Code view (or Code inspector), type your functions or object code as usual.
   Whenever you type a keyword or character for which Code Hints is available, a pop-up menu of completion options appears. When desired, select from the list and press Enter.

1. Make sure the Tag inspector is open (Window > Tag Inspector).
2. In Code view (or Code inspector), click anywhere inside a tag.
   If the tag supports attributes, Dreamweaver displays the attributes and their current values in the Tag inspector’s property sheet.
3. Make the changes to the tag in the property sheet.
   Click an attribute name to type a value or, if the attribute takes pre-defined values, to select from a list.
4. If the attribute takes a value from a source of dynamic content (like a database), click the lightning bolt icon at the end of the selected attribute’s row and select the source.
5. Click elsewhere in the panel to update the tag in your document.

1. Select the line or lines of the code block that you want to indent. (You must select the entire line.)
2. Choose Edit > Indent Code.

1. Copy the code from Dreamweaver or another application.
2. Place the insertion point directly in Design view, and choose Edit > Paste.

1. Copy the code from Dreamweaver or another application.
   To copy from Design view, choose Edit > Copy as HTML.
2. Do one of the following:
   In Code view, position the insertion point, and choose Edit > Paste. If you are using Design view, press F5 to update its display of the document.
   In Design view, position the insertion point, and choose Edit > Paste as HTML.

1. In Code view or Design view, place the insertion point where you want the comment.
2. Click the Comment icon on the Common tab of the Insert bar.
   Use the tooltips to identify the Comment icon
3. In Code view, Dreamweaver inserts a <!– –> tag in the page. Enter your comment inside the tag.
   In Design view, Dreamweaver displays the Comment dialog box. Enter your comment and click OK.
4. To display comment markers in Design view, choose View > Visual Aids > Invisible Elements. Make sure that comments are selected in the Invisible Elements preferences, or the comment marker will not appear.

• Select the Comment marker in Design view and enter text in the Property inspector.
• Find the comment in the code and add text directly to it.

1. Open the document in Code view
2. Make sure the Document toolbar is displayed (View > Toolbars > Document).
3. Click the Code Navigation icon in the toolbar.
   The icon consists of a pair of braces ({ }).

1. Choose Edit > Find and Replace, and specify which files to search.
2. Choose Specific Tag from the Search For pop-up menu.
3. Choose a specific tag from the pop-up menu next to Search For pop-up menu, enter a tag, or choose [any tag].
   If you only want to search for all occurrences of the specified tag, press the minus (-) button and skip to step 6. Otherwise, proceed with step 4.
4. Limit the search with one of the following tag modifiers:
   With Attribute chooses an attribute that must be in the tag for it to match. You can specify a particular value for the attribute or choose [any value].
   Without Attribute chooses an attribute that can’t be in the tag for it to match. For example, choose this option to search for all IMG tags with no ALT attribute.
   Containing specifies text or a tag that must be contained within the original tag for it to match. For example, in the code <b><font face=”Arial”>heading 1</font></b>, the font tag is contained within the b tag.
   Not Containing specifies text or a tag that can’t be contained within the original tag for it to match.
   Inside Tag specifies a tag that the target tag must be inside of for it to match.
   Not Inside Tag specifies a tag that the target tag can’t be inside of for it to match.
5. Click the plus (+) button and repeat step 4 to limit the search further.
6. Initiate the search:
   Click Find Next to highlight the next instance of the tag in the current document, then in any subsequent document if searching in more than one document.
   Click Find All to generate a list of all the instances of the tag in the current document or, if you are searching a directory or site, generate a list of documents that contain the tag. The list appears in the Search tab of the Results panel.

• Insert HTML mode to insert new HTML code
• Edit Tag mode to edit an existing tag
• Wrap Tag mode to wrap a new tag around the current selection

1. In Design view, click in the page to place the insertion point where you want to insert code.
2. Press Control+T (Windows) or Command+T (Macintosh).
   The Quick Tag Editor opens in Insert HTML mode.
   
3. Enter the HTML tag and press Enter.
   The tag is inserted into your code.
4. Press Escape to exit without making any changes.

1. Place the insertion point where you want the script.
2. Select Insert > Script Objects > Script.
   The Script dialog box appears.
3. Complete the dialog box and click OK.

1. Place the insertion point where you want the script.
2. Select Insert > Script Objects > Script.
   The Script dialog box appears.
3. Click OK without typing anything in the Content box.
4. Select the script marker in Design view of the Document window.
5. In the Property inspector, click the folder icon to browse to and select the external script file, or type the filename in the Source box.

1. Select the script marker.
2. In the Property inspector, click the Edit button.
   The script appears in the Script Properties dialog box.
3. If you linked to an external script file, the file automatically opens in Code view, where you can make your edits.

Note: If there is code between the script tags, the Script Properties dialog box will open even if there is also a link to an external script file.

1. Place the insertion point in a document.
2. Do one of the following:
   In the Frames category of the Insert bar, click the icon for a predefined frameset.
   Choose a predefined frameset from the Insert > Frames submenu.

1. Choose File > New.
2. In the New Document dialog box, select the Framesets category.
3. Select a frameset from the Framesets list.
4. Click Create.

• To split the frame where the insertion point is, choose a splitting item from the Modify > Frameset submenu.
• To split a frame or set of frames vertically or horizontally, drag a frame border from the edge of the Design view into the middle of the Design view.
• To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag (Windows) or Option-drag (Macintosh) a frame border.
• To divide a frame into four frames, drag a frame border from one of the corners of the Design view into the middle of a frame.

1. Select the frameset in the Frames panel or the Document window.
2. Choose one of the following:
   To save the frameset file, choose File > Save Frameset.
   To save the frameset file as a new file, choose File > Save Frameset As.
   If the frameset file has not previously been saved, these two commands are equivalent

1. Select a frame by doing one of the following:
   Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view.
   Click a frame in the Frames panel.
2. Choose Window > Properties to open the Property inspector if it isn’t already open.
3. To see all of the frame properties, click the expander arrow in the lower right corner of the Property inspector.

1. Place the insertion point in the frame.
2. Choose Modify > Page Properties.
3. Click the Background pop-up menu to select a color.

1. Select a frameset by doing one of the following:
   Click a border between two frames in the frameset in the Document window’s Design view.
   Click the border that surrounds a frameset in the Frames panel.
2. Choose Window > Properties to open the Property inspector if it isn’t already open.
3. To see all of the frameset properties, click the expander arrow in the lower right corner of the Property inspector.

1. Select a frameset by doing one of the following:
   Click a border between two frames in the frameset in the Document window’s Design view.
   Click the border that surrounds a frameset in the Frames panel.
2. In the Title field of the Document toolbar, type a name for the document.
   When a visitor views the frameset in a browser, the title appears in the browser’s title bar.

1. In Design view, select text or an object.
2. In the Link field of the Property inspector, do one of the following:
   Click the folder icon and select the file to link to.
   Drag the Point to File icon to select the file to link to.
3. In the Target pop-up menu, choose the frame or window in which the linked document should appear.
   If you named your frames in the Property inspector, the frame names appear in this menu. Select a named frame to open the linked document in that frame.
   blank opens the linked document in a new browser window, leaving the current window untouched.
   _parent opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset.
   _self opens the link in the current frame, replacing the content in that frame.
   _top opens the linked document in the current browser window, replacing all frames.

1. Choose Modify > Frameset > Edit NoFrames Content.
2. To create the NoFrames content, do one of the following:
   In the Document window, type or insert the content just as you would for an ordinary document.
   Choose Window > Code Inspector, place the insertion point between the body tags that appear inside the noframes tags, and type the HTML code for the content.
3. Choose Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.

1. Name the frame.
   Frame Name is the name used by a link’s target attribute or by a script to refer to the frame.
   Note: A frame name must be a single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start with a letter (as opposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in JavaScript (such as top or navigator) as frame names.
2. Change the following options as desired:
   Src specifies the source document to display in the frame. Click the folder icon to browse to and select a file. You can also open a file in a frame by placing the insertion point in the frame and choosing File > Open in Frame.
   Scroll specifies whether scroll bars appear in the frame. Setting this option to Default doesn’t set a value for the corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that scroll bars appear only when there is not enough room in a browser window to display the full contents of the current frame.
   No Resize prevents visitors from dragging the frame borders to resize the frame in a browser. (You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.)
   Borders shows or hides the borders of the current frame when it’s viewed in a browser. Choosing a Borders option for a frame overrides the frameset’s border settings. The options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default.
   Border Color sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset.
   Note: There is an underlying logic to which frame borders have a given border color applied to them, but that logic is complex; it may be difficult to understand why certain borders change color when you specify a border color. For detailed information about the effects of specifying border colors, see a book on frames and framesets.
3. Set the following margin options if you wish (if margin options aren’t visible, click the expander arrow in the lower right corner of the Property inspector):
   Margin Width sets the width in pixels of the left and right margins (the space between the frame borders and the content).
   Margin Height sets the height in pixels of the top and bottom margins (the space between the frame borders and the content).
   Note: Setting the margin width and height for a frame is not the same as setting margins in the Modify > Page Properties dialog box.

1. 1. Click a tab on the left side of the RowCol Selection area to select a row, or click a tab on the top to select a column.
      
   2. In the Value field, enter a height for the selected row or a width for the selected column.

1. In the HTML Styles panel, click the New Style icon; you can also choose Text > HTML Styles > New Style.
   The Define HTML Style dialog box appears.
   
2. In the Name text box, enter a name for the style.
3. nder Apply To, choose how this style will be applied by doing one of the following:
   To set a selection style, choose Selection.
   To set a paragraph style, choose Paragraph.
   Note: A paragraph style applies to the entire text block in which the insertion point is located, regardless of what text is actually selected.
4. For When Applying, choose whether to apply the HTML style in addition to the existing style of the selected text or paragraph, or to clear the formatting of the selection or paragraph and apply the new HTML style.
5. Under Font Attributes, use the pop-up menus to select the formatting options you want to apply.
6. If you are creating a paragraph style, under Paragraph Attributes, in the Format pop-up menu, choose a paragraph tag (for example, paragraph, Heading1, Preformatted).
7. For Alignment, click the left, center, or right alignment button to set the paragraph alignment you want.
8. Click OK.

1. In the lower left corner of the HTML Styles panel make sure the Apply option is selected, to automatically apply the style you select.
2. In the Document window do one of the following to select the text you want the style applied to:
   Place the insertion point anywhere in a paragraph to apply a paragraph style.
   Use the cursor to select the text you want a selection style applied to.
3. In the HTML Styles panel, click the HTML style you want to apply to the text.
   The text automatically updates in the Document window.

1. Make sure no text is selected in the Document window.
2. In the HTML Styles panel, make sure the Auto Apply checkbox is deselected.
   If the Auto Apply option is turned on, the HTML style will be applied when you select it in the HTML Styles panel.
3. In the HTML Styles panel, do one of the following:
   Right-click (Windows) or Control-click (Macintosh) the style, then choose Edit from the context menu.
   Double-click the style.
   The Define HTML Style dialog box appears.
4. In the dialog box, set style attribute options for the style.
5. To reset it to the default options, click Clear.

1. Choose Window > Site or Site > Site Files to open the Site panel in Site Files view.
2. In the Site panel, locate and then open the Library folder.
   You’ll notice a file called styles.xml. This file contains all your HTML styles for the site. You can put, get, check in, check out, and copy this file as you would any other file in your site. You can also create Design Notes for the styles.xml file. You must first check out the styles.xml file before you can create or edit a style for a remote site.

1. Choose Text > Check Spelling or press Shift+F7.
   When Dreamweaver encounters an unrecognized word the Check Spelling dialog box appears.
2. 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.

1. Place the insertion point where you want the image to appear in the Document window, then do one of the following:
   • In the Common category of the Insert bar, click the Image icon.
     
   • In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
   • Choose Insert > Image.
   • Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
   • Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
   • Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
2. In the dialog box that appears, do one of the following:
   • Choose File System to choose a graphic file.
   • Choose Data Source to choose a dynamic image source.
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.
4. In the Property inspector (Window > Properties), set properties for the image.

1. In the Document window, place the insertion point where you want to insert a placeholder graphic.
   • In the Insert bar, select Common then click the Image Placeholder icon.
     
   • In the Insert bar, select Common, then drag the Image Placeholder icon to the Document window.
   • Choose Insert > Image Placeholder.

The Image Placeholder dialog box appears.

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:
   • In the Insert bar, select Common, then click the Rollover Image icon.
   • In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
   • Choose Insert > Interactive Images >Rollover Image.
     The Insert Rollover Image dialog box appears.
3. In the Image Name text box, type a name for the rollover.
4. 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.
5. 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.
6. 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.
7. In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
8. 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.
9. Click OK to close the Insert Rollover Image dialog box.
10. Choose File > Preview in Browser or press F12.
11. In the browser, move the pointer over the original image.

1. In Dreamweaver, choose Commands > Create Web Photo Album.
2. In the Photo Album Title text field, enter a title. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails.
   If desired, you can enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and Other Info text fields.
3. Choose the folder containing source images by clicking the Browse button next to the Source Images Folder text field. Then choose (or create) a destination folder in which to place all the exported images and HTML files by clicking the Browse button next to the Destination Folder text field.
   The destination folder should not already contain a photo album—if it does, and if any new images have the same names as previously used images, you might overwrite existing thumbnail and image files.
4. Specify display options for the thumbnail images:
   Choose a size for the thumbnail images from the Thumbnail Size pop-up menu. Images are scaled proportionally to create thumbnails that fit within a square that has the indicated pixel dimensions.
   To display the filename of each original image below the corresponding thumbnail, select Show Filenames.
   Enter the number of columns for the table that displays the thumbnails.
5. Choose a format for the thumbnail images from the Thumbnail Format pop-up menu:
   GIF WebSnap 128 creates GIF thumbnails that use a web adaptive palette of up to 128 colors.

   GIF WebSnap 256 creates GIF thumbnails that use a web adaptive palette of up to 256 colors.
   JPEG—Better Quality creates JPEG thumbnails with relatively higher quality and larger file sizes.
   JPEG—Smaller File creates JPEG thumbnails with relatively lower quality and smaller file sizes.

6. Choose a format for the large-size images from the Photo Format pop-up menu. A large-size image of the specified format is created for each of your original images. You may specify a format for the large-size images that differs from the format you specified for the thumbnails.
   Note: The Create Web Photo Album command does not let you use your original image files as the large-size images, because original image formats other than GIF and JPEG might not display properly on all browsers. Note that if your original images are JPEG files, the large-size images generated may have larger file sizes or lower quality than the original files.
7. Choose a Scale percentage for the large-size images.
   Setting Scale to 100% creates large-size images the same size as the originals. Note that the scale percentage is applied to all of the images; if your original images aren’t all the same size, scaling them by the same percentage may not produce the desired results.
8. Select Create Navigation Page for Each Photo to create an individual web page for each source image, containing navigation links labeled Back, Home, and Next.
   If you select this option, the thumbnails link to the navigation pages. If you don’t select this option, the thumbnails link directly to the large-size images.
9. Click OK to create the HTML and image files for the web photo album.
   Fireworks launches (if it’s not already running) and creates the thumbnails and large-size images. This may take several minutes if you’ve included a large number of image files. When the processing is complete, Dreamweaver becomes active again, and creates the page containing the thumbnails.
10. When a dialog appears that says “Album Created,” click OK. You may have to wait a few seconds for your photo album page to appear. The thumbnails are shown in alphabetical order by filename.
    

Note: Clicking the Cancel button in the Dreamweaver dialog box after processing has begun does not stop the process of creating the photo album; it merely prevents Dreamweaver from displaying the main photo album page.

1. In Dreamweaver, choose Window > Properties to open the Property inspector, if it isn’t already open.
2. In the Dreamweaver document, do one of the following:
   • Click the Flash movie placeholder to select it; then in the Property inspector click Edit.
     
   • Hold down Control and double-click the movie placeholder for the movie you want to edit.
   • Right-click (Windows) or Control-click (Macintosh) the desired movie, and choose Edit With Flash from the context menu.
     Dreamweaver launches Flash, and opens the FLA file for you to edit or prompts you to open it if it cannot locate the FLA file.

• Note: If the FLA file or SWF file is locked, Dreamweaver prompts you to check the file out, cancel the request, or view the file.

1. Place the insertion point in the Document window where you want to insert the object, then do one of the following:
   • In the Insert bar, select Media, then click the button for the type of object you want to insert, or drag it to the Document window.
     
   • Choose the appropriate object from the Insert > Media or Insert > Interactive Images submenu.
     In most cases, a dialog box appears letting you select a source file and specify certain parameters for the media object.

You can double-click most files in the Site panel to edit them directly. If the file is an HTML file, it opens in Dreamweaver. If it’s another kind of file, such as an image file, it opens in an appropriate external editor, such as Macromedia Fireworks.

Each file type that Dreamweaver doesn’t handle directly can be associated with one or more external editors found on your system. The editor that launches when you double-click the file in the Site panel is called the primary editor. You can set which editor is associated with a file type in File Types/Editors preferences.

If more than one editor is associated with the file type, you can launch a secondary editor for a particular file. Right-click (Windows) or Control-click (Macintosh) the filename in the Site panel, and choose an editor from the Open With submenu of the context menu.

To explicitly specify which external editors should be launched for a given file type, choose Edit > Preferences and select File Types/Editors from the Category list. Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selected extension are listed on the right under Editors.

You can also browse to find an external editor to edit your file. Right-click (Windows) or Control-click (Macintosh) the file in the Design view of the Document window, and choose Edit With > Browse or select the file and choose > Edit > Edit with External Editor.

1. Click the plus (+) button above the Extensions list.
2. Enter a file type extension (including the period at the beginning of the extension), or several related extensions separated by spaces.
   For example, you might enter .css, .png .jpg.

1. Select the file type extension in the Extensions list.
2. Click the plus (+) button above the Editors list.
3. In the dialog box that appears, choose an application to add to the Editors list.
   For example, choose the application icon for Excel to add that application to your Editors list.

1. Select the file type in the Extensions list.
   Note: You can’t undo after removing a file type, so be sure that you want to remove it.
2. Click the minus (-) button above the Extensions list.

1. Select the file type.
2. Select the editor (or add it if it isn’t on the list).
3. Click Make Primary.

1. Select the file type in the Extensions list.
2. Select the editor in the Editors list.
3. Click the minus (-) button above the Editors list.

1. In the Document window, place the insertion point where you want to insert the Flash button.
2. To open the Insert Flash Object dialog box, do one of the following:
   • In the Insert bar, select Media and then click the Flash Button icon.
     
   • In the Insert bar, select Media and then drag the Flash Button icon to the Document window, or to the Code view window if you are working in the code.
   • Choose Insert > Interactive Images > Flash Button.
     The Insert Flash Button dialog box appears.
     
3. Select the button style you want from the Style list.
4. In the Button Text field (optional), type the text you want to appear.
   This field only accepts changes if the selected button has a {Button Text} parameter defined. This is shown in the Sample field. The text you type in replaces the {Button Text} when you preview the file.
5. In the Font pop-up menu, select the font you want to use.
   If the default font for a button is not available on your system, select another font from the pop-up menu. You will not see the font you selected in the Sample field, but you can click Apply to insert the button in the page to see what the text will look like.
6. In the Size field, enter a numeric value for the font size.
7. In the Link field (optional), enter a document-relative or absolute link for the button.
8. In the Target field (optional), specify the location in which the linked document will open. You can select a frame or window option in the pop-up menu. Frame names are listed only if the Flash object is being edited while in a frameset.
9. In the Bg Color field (optional), set the background color for the Flash movie. Use the color picker or type in a web hexadecimal value (such as #FFFFFF).
10. In the Save As field, enter a filename to save the new SWF file.
    You can use the default filename (for example, button1.swf), or type in a new name. If the file contains a document-relative link, you must save the file to the same directory as the current HTML document to maintain document-relative links.
11. Click Get More Styles to go the Macromedia Exchange site and download more button styles.
12. Click Apply or OK to insert the Flash button in the Document window.

1. In the Document window, click the Flash button object to select it.
2. Open the Property inspector, if it is not already open.
   The Property inspector displays the Flash button properties. You can use the Property inspector to modify the button’s HTML attributes, such as width, height, and Bg color.
3. To make changes to content, display the Insert Flash Button dialog box using one of the following methods:
   Double-click the Flash button object.
   Click Edit in the Property inspector.
   Right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu.
4. In the Insert Flash Button dialog box, make your edits in the fields

1. While in Design view, in the document, select the Flash button object.
2. In the Property inspector, click Play.
3. Click Stop to end the preview.

1. In the Document window, place the insertion point where you want to insert the Flash text.
2. To open the Insert Flash Text dialog box, do one of the following:
   • In the Insert bar, select Media and then click the Flash Text icon.
     
   • In the Insert bar, select Media and then drag the Flash Text icon to the Document window (or to the Code view window if you are working in the code).
   • Choose Insert > Interactive Images > Flash Text.
     The Insert Flash Text dialog box appears.
     
3. Select a font from the Font pop-up menu.
   This menu lists all TrueType fonts currently loaded on your system.
4. Enter a font size in the Size field; these are point sizes.
5. Specify style attributes, like bold or italic, and text alignment by clicking the appropriate style buttons.
6. In the Color field, set the color of the text by using the color picker or entering a web hexadecimal value (such as #FFFFFF).
7. In the Rollover Color field, set the color that appears when the pointer rolls over the Flash text object. Use the color picker or enter a web hexadecimal value (such as #FFFFFF).
   Enter the text you want in the Text field.
8. To see the font style displayed in the Text field, select Show Font.
9. If you want to associate a link with the Flash text object, enter a document-relative or absolute link in the Link field.
   Site-relative links are not accepted because browsers don’t recognize them within Flash movies. If you use a document-relative link, make sure to save the SWF file to the same directory as the HTML file. (Browsers vary in their interpretation of document-relative links and saving to the same directory ensures that the links will work correctly.)
10. If you entered a link, you can specify a target frame or target window for that link to go to in the Target field.
11. In the Bg Color field, choose a background color for the text. Use the color picker or enter a web hexadecimal value (such as #FFFFFF).
12. In the Save As field, enter a name for the file.
    You can use the default filename (for example, tex1.swf), or type in a new name. If the file contains a document-relative link, you must save the file to the same directory as the current HTML document to maintain document-relative links.
13. Click Apply or OK to insert the Flash text in the Document window.
    If you click Apply, the dialog box remains open, and you can preview the text in your document.

1. In the Design view of the Document window, place the insertion point where you want to insert the movie, then do one of the following:
   • In the Insert bar, select Media and then click the Insert Flash icon.
     
   • In the Insert bar, select Media and then drag the Insert Flash icon to the Document window.
   • Choose Insert > Media > Flash.
   • In the dialog box that appears, select a Flash movie file (.swf).

1. In the Document window, click the Flash placeholder to select the Flash movie you want to preview.
2. In the Property inspector, click the Play button. Click Stop to end the preview. You can also preview the Flash movie in a browser by pressing F12.

There are several different types of sound files and formats, and several different ways to add sound to a web page. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.

1. Select the text or image you want to use as the link to the audio file.
2. In the Property inspector, click the folder icon to browse for the audio file, or type the file’s path and name in the Link field.

1. In Design view, place the insertion point where you want to embed the file and then do one of the following:
   • In the Insert bar, select Media then click the Plugin icon.
   • In the Insert bar, select Media then drag the Plugin icon to the Document window, or to the Code view window if you are working in the code.
     
   • Choose Insert > Media > Plugin.
2. In the Property inspector, click the folder icon to browse for the audio file, or type the file’s path and name in the Link field.
3. Enter the width and height by entering the values in the appropriate fields or by resizing the plug-in placeholder in the Document window.

1. In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
   • In the Insert bar, select Media and then click the Plugin icon.
   • Choose Insert > Media > Plugin.
2. In the dialog box that appears, select a content file for a Navigator plug-in.
   • Select one of the media elements you have inserted, and choose View > Plugins > Play or click the Play button in the Property inspector.
   • Choose View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.

• Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version of the plug-in you have.
• Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug-in, consider adding it to this file.)
• Check that you have enough memory (and on the Macintosh, check that enough memory is allocated to Dreamweaver). Some plug-ins require an additional 2 to 5 MB of memory to run.

1. In the Document window, place the insertion point where you want to insert the content and do one of the following:
   • In the Insert bar, select Media and then click the ActiveX icon.
     
   • In the Insert bar, select Media and then drag the ActiveX icon to the Document window (or to the Code view window if you are working in the code).
   • Choose Insert > Media > ActiveX.
     An icon marks where the ActiveX control will appear on the page in Internet Explorer.

1. In the Document window, place the insertion point where you want to insert the applet, then do one of the following:
   • In the Insert bar, select Media and then click the Applet icon.
     
   • In the Insert bar, select Media and then drag the Applet icon to the Document window (or to the Code view window if you are working in the code).
   • Choose Insert > Media > Applet. You can also drag the Flash button icon over to the Document window.
2. In the dialog box that appears, select a file containing a Java applet.

1. In the Property inspector, enter javascript:; in the Link field. Be certain to include both the colon and the semicolon.
   Note: You can instead use a number sign (#) in the Link field if you want. The problem with using a number sign is that when a visitor clicks the link, some browsers may jump to the top of the page. Clicking the JavaScript null link has no effect at all on the page, so the JavaScript approach is generally preferable.
2. With the text still selected, open the Behaviors panel (Window > Behaviors).
3. Choose an action from the Actions pop-up menu, enter parameters for the action, and choose an event to trigger the action.

1. Open the Document window’s Code view by choosing View > Code.
2. Find the link.
3. In the link’s a href tag, insert this attribute: style=”text-decoration:none; color:black”.
   This attribute setting disables underlining and sets the color of the text to black. (Of course, if the surrounding text is a different color, use that color instead of black.)

Note that this attribute is an inline CSS style. An inline style applied to a single link overrides other CSS styles that apply to that link, but has no effect outside of that link. To change the appearance of linked text everywhere on a page or across your entire site, use CSS styles to create a new style for links.

1. Click in a frame in the Behaviors channel in the Timelines panel.
2. Use the Behaviors panel to choose an action to perform at that frame.

1. Select an object with a behavior attached.
2. Choose Window > Behaviors to open the Behaviors panel.
   Behaviors appear in the panel alphabetically by event. If there are several actions for the same event, the actions appear in the order in which they will execute.
3. Choose from the following options:
   • To edit an action’s parameters, double-click the behavior name, or select it and press Enter (Windows) or Return (Macintosh); then change parameters in the dialog box and click OK.
   • To change the order of actions for a given event, select an action and click the up or down arrow button.
   • To delete a behavior, select it and click the minus (–) button or press Delete.
     

1. Select an element that has the behavior attached to it.
2. Open the Behaviors panel.
3. Double-click the behavior.
4. Click OK in the behavior’s dialog box.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Call JavaScript from the Actions pop-up menu.
3. Type the exact JavaScript to be executed, or type the name of a function.
   For example, to create a Back button, you might type if (history.length > 0){history.back()}. If you have encapsulated your code in a function, type only the function name (for example, hogback()).
4. Click OK.
5. Check that the default event is the one you want.
   If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Change Property from the Actions pop-up menu.
3. From the Type of Object pop-up menu, choose the type of object whose property you want to change.
   The Named Object pop-up menu now lists all the named objects of the type you chose.
4. Choose an object from the Named Object pop-up menu.
5. Choose a property from the Property pop-up menu, or enter the name of the property in the text field.
   To see the properties that can be changed in each browser, choose different browsers or browser versions from the browser pop-up menu. If you are typing a property name, be sure to use the exact JavaScript name of the property (and remember that JavaScript properties are case-sensitive).
6. Enter the new value for the property in the New Value field, and click OK.
7. Check that the default event is the one you want. (When the event occurs, the action will execute and the property will change.)
   If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Check Browser from the Actions pop-up menu.
3. Determine how you want to separate your visitors: by browser brand, by browser version, or both.
   For example, do you want everyone with a 4.0 browser to see one page, and all others to see a different page? Or perhaps you want Netscape Navigator users to see one page and Internet Explorer users to see another.
4. Specify a version of Netscape Navigator.
5. In the adjacent pop-up menus, choose options for what to do if the browser is the Netscape Navigator version you specified or later and what to do otherwise.
   The options are Go to URL, Go to Alt URL, and Stay on This Page.
6. Specify a version of Internet Explorer.
7. In the adjacent pop-up menus, choose options for what to do if the browser is the Internet Explorer version you specified or later and what to do otherwise.
   The options are Go to URL, Go to Alt URL, and Stay on This Page.
8. Choose an option from the Other Browsers pop-up menu to specify what to do if the browser is neither Navigator nor Internet Explorer. (For example, the visitor may be using a text-based browser like Lynx.)
   Stay on This Page is the best option for browsers other than Navigator and IE because most do not support JavaScript—and if they cannot read this behavior, they will stay on the page anyway.
9. Enter the paths and filenames of the URL and the alternate URL in the text fields at the bottom of the dialog box. If you enter a remote URL, you must enter the http:// prefix in addition to the www address.
10. Click OK.
11. Check that the default event is the one you want.
    If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Remember that the purpose of this behavior is to check for different browser versions, so it’s best to choose an event that works on 3.0 and later browsers.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Check Plugin from the Actions pop-up menu.
3. Choose a plug-in from the Plugin pop-up menu, or click Enter and type the exact name of the plug-in in the adjacent field.
   You must use the exact name of the plug-in as specified in bold on the About Plug-ins page in Navigator. (In Windows, choose Navigator’s Help > About Plug-ins command; on the Macintosh, choose About Plug-ins from the Apple menu.)
4. In the If Found, Go To URL field, specify a URL for visitors who have the plug-in.
   If you specify a remote URL, you must include the http:// prefix in the address
5. To make visitors with the plug-in stay on the same page, leave this field blank.
6. In the Otherwise, Go To URL field, specify an alternative URL for visitors who don’t have the plug-in.
   To make visitors without the plug-in stay on the same page, leave this field blank.

This option applies only to Internet Explorer; Navigator can always detect plug-ins.

1. Choose Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash movie, respectively.
2. Choose Window > Properties and enter a name for the movie in the upper leftmost field (next to the Shockwave or Flash icon). You must name the movie to control it with the Control Shockwave or Flash action.
3. Select the item you want to use to control the Shockwave or Flash movie. For example, if you have an image of a “Play” button that will be used to make the movie play, select that image.
4. Open the Behaviors panel (Window > Behaviors).
5. Click the plus (+) button and choose Control Shockwave or Flash from the Actions pop-up menu.
   A parameters dialog box appears.
6. Choose a movie from the Movie pop-up menu.
   Dreamweaver automatically lists the names of all Shockwave and Flash movies in the current document. (Specifically, Dreamweaver lists movies with filenames ending in .dcr, .dir, .swf, or .spl that are in object or embed tags.)
7. Choose to play, stop, rewind, or go to a frame in the movie. The Play option plays the movie starting from the frame where the action occurs.
8. Click OK.
9. Check that the default event is the one you want.
   If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For submenu of the Events pop-up menu.

1. Choose Insert > Layer or click the Draw Layer button on the Insert bar and draw a layer in the Document window’s Design view.
2. Select the body tag by clicking <body> in the tag selector at the bottom of the Document window.
3. Open the Behaviors panel.
4. Click the plus (+) button and choose Drag Layer from the Actions pop-up menu.
   If Drag Layer is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the body tag or a link (a tag)—or change the target browser to IE 4.0 in the Show Events For pop-up menu.
5. In the Layer pop-up menu, select the layer that you want to make draggable.
6. Choose either Constrained or Unconstrained from the Movement pop-up menu.
   Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, choose constrained movement.
7. For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right fields.
   Values are relative to the starting position of the layer. To constrain movement within a rectangular region, enter positive values in all four fields. To allow only vertical movement, enter positive values for Up and Down and 0 for Left and Right. To allow only horizontal movement, enter positive values for Left and Right and 0 for Up and Down.
8. Enter values (in pixels) for the drop target in the Left and Top fields.
   The drop target is the spot to which you want the visitor to drag the layer. A layer is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top fields. Values are relative to the top left corner of the browser window. Click Get Current Position to automatically fill the fields with the current position of the layer.
9. Enter a value (in pixels) in the Snap if Within field to determine how close the visitor must get to the drop target before the layer snaps to the target.
   Larger values make it easier for the visitor to find the drop target.
10. For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the layer, track the movement of the layer while it is being dragged, and trigger an action when the layer is dropped, click the Advanced tab.
11. To specify that the visitor must click a particular area of the layer to drag the layer, choose Area Within Layer from the Drag Handle pop-up menu; then enter the left and top coordinates and the width and height of the drag handle.
    This option is useful when the image inside the layer has an element that suggests dragging, such as a title bar or drawer handle. Do not set this option if you want the visitor to be able to click anywhere in the layer to drag it.
12. Choose any While Dragging options that you want to use:
    • Select Bring Layer to Front if the layer should move to the front of the stacking order while it is being dragged. If you select this option, use the pop-up menu to choose whether to leave the layer in front or restore it to its original position in the stacking order.
    • Enter JavaScript code or a function name (for example, monitorLayer()) in the Call JavaScript field to repeatedly execute the code or function while the layer is being dragged. For example, you could write a function that monitors the coordinates of the layer and displays hints such as “you’re getting warmer” or “you’re nowhere near the drop target” in a text field.
13. Enter JavaScript code or a function name (for example, evaluateLayerPos()) in the second Call JavaScript field to execute the code or function when the layer is dropped. Select Only if Snapped if the JavaScript should be executed only if the layer has reached the drop target.
14. Click OK.
15. Check that the default event is the one you want.
    If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Remember that layers are not supported by 3.0 browsers.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Go to URL from the Actions pop-up menu.
3. Choose a destination for the URL from the Open In list.
   The Open In list automatically lists the names of all frames in the current frameset as well as the main window. If there are no frames, the main window is the only option
   Note: This action may produce unexpected results if any frame is named top, blank, self, or parent. Browsers sometimes mistake these names for reserved target names.

1. Select an object to use as the Go button (generally a button image), and open the Behaviors panel.
2. Click the plus (+) button and choose Jump Menu Go from the Actions pop-up menu.
3. In the Choose Jump Menu pop-up menu, choose a menu for the Go button to activate.
4. Click OK.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Open Browser Window from the Actions pop-up menu.
3. Click Browse to select a file, or enter the URL you want to display.
4. Set any of the following options:

   Window Width specifies the width of the window in pixels.

   Window Height specifies the height of the window in pixels.

   Navigation Toolbar is the row of browser buttons that includes Back, Forward, Home, and Reload.

   Location Toolbar is the row of browser options that includes the location field.

   Status Bar is the area at the bottom of the browser window in which messages (such as the load time remaining and the URLs associated with links) appear.

   Menu Bar is the area of the browser window (Windows) or the desktop (Macintosh) where menus such as File, Edit, View, Go, and Help appear. You should explicitly set this option if you want visitors to be able to navigate from the new window. If you do not set this option, the user can only close or minimize the window (Windows) or close the window or quit the application (Macintosh) from the new window.

Scrollbars as Needed specifies that scroll bars should appear if the content extends beyond the visible area. If you do not explicitly set this option, scroll bars do not appear. If the Resize Handles option is also turned off, visitors have no easy way of seeing content that extends beyond the original size of the window. (Though they may be able to make the window scroll by dragging off the edge of the window.)

Resize Handles specifies that the user should be able to resize the window, either by dragging the lower right corner of the window or by clicking the maximize button (Windows) or size box (Macintosh) in the upper right corner. If this option is not explicitly set, the resize controls are unavailable and the lower right corner is not draggable.

Window Name is the name of the new window. You should name the new window if you want to target it with links or control it with JavaScript. This name cannot contain spaces or special characters.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Play Sound from the Actions pop-up menu.
3. Click Browse to select a sound file, or enter the path and filename in the Play Sound field.
4. Click OK.
5. Check that the default event is the one you want.

   If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Popup Message from the Actions pop-up menu.
3. Enter your message in the Message field.
4. Click OK.
5. Check that the default event is the one you want.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Preload Images from the Actions pop-up menu.
3. Click Browse to select an image file to preload, or enter the path and filename of an image in the Image Source File field.
4. Click the plus (+) button at the top of the dialog box to add the image to the Preload Images list.
   Note: If you do not click the plus button before entering the next image, the image you have just chosen will be replaced in the list with the image you choose next.
5. Repeat steps 3 and 4 for all remaining images that you want to preload on the current page.
6. To remove an image from the Preload Images list, select the image in the list and click the minus (–) button.
7. Click OK.
8. Check that the default event is the one you want.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Set Text > Set Text of Layer from the Actions pop-up menu.
3. In the Set Text of Layer dialog box, use the Layer pop-up menu to choose the target layer.
4. Enter a message in the New HTML field, then click OK.
5. Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.

   If you don’t see the events you want, change the target browser in the Show Events For pop-up menu.

1. Select an object and open the Behaviors panel.
2. Click the plus (+) button and choose Set Text > Set Text of Status Bar from the Actions pop-up menu.
3. In the Set Text of Status Bar dialog box, type your message in the Message field.
   Keep the message concise. The browser truncates the message if it doesn’t fit in the status bar.
4. Click OK.
5. Check that the default event is the one you want.

1. Choose Insert > Form Objects > Text Field.
   If Dreamweaver prompts you to add a form tag, click Yes.
2. In the Property inspector, type a name for the text field. Make sure the name is unique on the page (don’t use the same name for multiple elements on the same page, even if they’re in different forms).

1. Select a text field and open the Behaviors panel.
2. Click the plus (+) button and choose Set Text > Set Text of Text Field from the Actions pop-up menu.
3. In the Set Text of Text Field dialog box, choose the target text field from the Text Field pop-up menu.
4. Enter text in the New Text field, then click OK.
5. Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.

1. Choose Insert > Layer or click the Layer button in the Insert bar, and draw a layer in the Document window.
   Repeat this step to create additional layers.
2. Click in the Document window to deselect the layer, then open the Behavior panel.
3. Click the plus (+) button and choose Show-Hide Layers from the Actions pop-up menu.
   If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the body tag or a link (a tag)—or change the target browser to IE 4.0 in the Show Events For pop-up menu.
4. From the Named Layers list, select the layer whose visibility you want to change.
5. Click Show to show the layer, Hide to hide the layer, or Default to restore the layer’s default visibility.
6. Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time. (You can change the visibility of multiple layers with a single behavior.)
7. Click OK.
8. Check that the default event is the one you want.

1. Click the Draw Layer button in the Common category of the Insert bar and draw a large layer in the Document window’s Design view.
   Be sure the layer covers all the content on the page.
2. In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order.
3. Select the layer if it’s not selected, and name it loading, using the leftmost field in the layer Property inspector.
4. With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector.
5. Click inside the layer (which should now be obscuring the rest of the page contents) and type a message, if desired.
   For example, “Please wait while the page loads” or “Loading…” are messages that tell visitors what is happening so that they know the page contains content.
6. Click the <body> tag in the tag selector in the bottom left corner of the Document window.
7. In the Behaviors panel, choose Show-Hide Layers from the Actions pop-up menu.
8. Select the layer called loading from the Named Layers list.
9. Click Hide.
10. Click OK.
11. Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is onLoad. (If it isn’t, select the event and click the downward-pointing triangle that appears between the event and the action. Choose onLoad from the list of events in the pop-up menu.)

Show Pop-Up Menu

You use the Show Pop-Up Menu behavior to create or edit a Dreamweaver pop-up menu or to open and modify a Fireworks pop-up menu you’ve inserted in a Dreamweaver document.

1. Select an object to attach the behavior to and open the Behaviors panel (Shift+F3).
2. Click the plus (+) button and choose Show Pop-Up Menu from the Actions pop-up menu.
3. In the Show Pop-Up Menu dialog box that appears, use the following tabs to set options for the pop-up menu:

   Contents allows you to set the name, structure, URL, and target of individual menu items.

   Appearance enables you to set the appearance of the menu’s Up State and Over State and to set font choices for menu item text.

   Advanced allows you to set the properties of the menu cells. For example, you can set cell width and height, cell color and border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.

Position lets you set where the menu is positioned relative to the triggering image or link.

1. In the Contents tab, create a pop-up menu item by doing the following:
   In the Text field, select the default text (New Item), then type the text you want to appear in the pop-up menu.
2. Set additional options, as desired:
   If you want the menu item to open another file when clicked, in the Link field, type the file path or click the Folder icon and browse to the document you want to open
3. If you want to set a location in which the document opens, for example in a new window or in a specific frame, in the Target pop-up menu choose the desired location. Note: If the frame you want to target doesn’t appear on the Target pop-up menu, close the Show Pop-Up Menu dialog box, then in the Document window select and name the frame.  
4. Click the plus (+) button to add additional entries to the Show Pop-Up Menu preview list.
   When you finish adding menu items, click OK to accept the default settings or select another Show Pop-Up Menu tab to set additional options.

• To indent an item in the menu list, click the Indent Item button.
• To remove an indent, click the Outdent Item button.

1. In the Contents tab, select the menu entry you want to remove in the Show Pop-Up Menu list.
2. Click the minus (-) button

1. In the pop-up menu at the top of the Appearance tab, choose Vertical Menu or Horizontal Menu to set the menu’s orientation.
   Set the text formatting options you want:
   In the Font pop-up menu, select the font you want to apply to the menu items.
2. Set the text formatting options you want:
   In the Font pop-up menu, select the font you want to apply to the menu items.

   Note: If the font you want to apply is not in the font list, use the Edit Font List option, to add the desired font to the font list. To ensure the menu appears as desired, you should choose a font that site visitor’s are likely to have.

3. In the Up State and Over States boxes, use the color picker to set the text and cell colors of the menu item buttons.
4. When you finish setting appearance options, click OK or select another Show Pop-Up Menu tab to set additional options.

1. Click the Advanced tab, then set the options you want to apply to the menu items:

   Cell Width sets a specific width, in pixels, for the menu buttons. Cell width is set automatically based on the widest item; to increase the cell width, select Pixels in the pop-up menu and enter a value larger than the one that appears in the Cell Width text box.

   Cell Height sets a specific height, in pixels, for the menu buttons. To increase the cell height, select Pixels in the pop-up menu and enter a value larger than the one that appears in the Cell Height text box.

   Cell Padding specifies the number of pixels between a cell’s content and its boundaries.

   Cell Spacing specifies the number of pixels between adjacent cells.

   Text Indent allows you to specify, in pixels, how far text in a menu item is indented within the cell.

   Menu Delay sets the length of time between when the user moves the pointer over the triggering image or link, and when the menu appears. Values are in milliseconds so the default setting, 1000, equals 1 second. For every second of delay you want, add 000; for example, for a 3 second delay, type 3000.

   Pop-up Borders determines whether a border appears around the items in the menu. If you want a border to appear around the menu items, make sure the Show Borders checkbox is checked.

   Border Width sets the border’s width, in pixels.

   Shadow, Border Color, and Highlight allow you to pick a color for these border options. Shadow and highlight are not reflected in the preview.

2. When you finish setting advanced appearance options, click OK or select another Show Pop-Up Menu tab to set additional options.
   

1. In the Show Pop-Up Menu dialog box, click the Position tab.
2. Set the location of the pop-up menu by doing one of the following:
   • Choose one of the preset options.
   • Set customized position coordinates by typing a number in the X text box to set the horizontal coordinate and by typing a number in the Y text box to set the vertical coordinate. Coordinates count from the top left corner of the menu.
3. To hide the pop-up menu when the pointer is not over it, make sure Hide Menu onMouseOut Event is checked. To leave the menu displayed, deselect this option.
4. When you finish creating or modifying the pop-up menu, click OK.

1. In the Dreamweaver document, select the link or image that triggers the pop-up menu.
2. Open the Behaviors panel (Shift + F3), if it isn’t already open, then in the Actions list, double-click Show Pop-Up Menu.
   The Show Pop-Up Menu dialog box appears.
3. Make the changes you want to make to the pop-up menu.
4. When you finish modifying the pop-up menu, click OK.

1. Choose Insert > Image or click the Image button on the Insert bar to insert an image.
2. In the Property inspector, enter a name for the image in the leftmost text box.
   The Swap Image action still works if you do not name your images; it names unnamed images automatically when you attach the behavior to an object. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand.
3. Repeat steps 1 and 2 to insert additional images.
4. Select an object (generally the image you’re going to swap) and open the Behaviors panel.
5. Click the plus (+) button and choose Swap Image from the Actions pop-up menu.
6. From the Images list, select the image whose source you want to change.
7. Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
8. Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
9. Select the Preload Images option to load the new images into the browser’s cache when the page is loaded.
   This prevents delays caused by downloading when it is time for the images to appear.
10. Click OK.
11. Check that the default event is the one you want.

1. Choose Window > Timeline to open the Timelines panel, and make sure that your document contains a timeline.
2. Select an object to attach the behavior to.
   To attach the behavior to a frame in the Timeline, click in the Behavior channel at the desired frame.
3. Open the Behaviors panel.
4. Click the plus (+) button and choose Timeline > Go to Timeline Frame from the Actions pop-up menu. (If this action is dimmed, your document doesn’t contain a timeline.)
5. Choose a timeline from the Timeline pop-up menu.
6. Enter a frame number in the Go to Frame text box.
7. If you are adding this action in the Behavior channel of a timeline and want a portion of the timeline to loop, enter the number of times the segment should loop in the Loop text box.

   You must leave this text box blank if you are not attaching Go to Timeline Frame to a frame in a timeline.

8. Click OK.
9. Check that the default event is the one you want.

1. Choose Window > Timeline to open the Timelines panel, and make sure that your document contains a timeline.
2. Select an object and open the Behaviors panel.
3. Click the plus (+) button and choose Play Timeline or Stop Timeline from the Actions pop-up menu.
4. Select the timeline you want to play or stop, or choose to stop all timelines, from the pop-up menu.
5. Click OK.
6. Check that the default event is the one you want.

1. Choose Insert > Form or click the Form button in the Insert bar to insert a form.
2. Choose Insert > Form Objects > Text Field or click the Text Field button in the Insert bar to insert a text field.
   Repeat this step to insert additional text fields.
3. Do one of the following:
   • To validate individual fields as the user fills out the form, select a text field and choose Window > Behaviors.
   • To validate multiple fields when the user submits the form, click the <form> tag in the tag selector in the bottom left corner of the Document window and choose Window > Behaviors.
4. Choose Validate Form from the Actions pop-up menu.
5. Do one of the following:
   • If you are validating individual fields, select the same field that you have selected in the Document window from the Named Fields list.
   • If you are validating multiple fields, select a text field from the Named Fields list.
6. Select the Required option if the field must contain some data.
7. Choose from one of the following Accept options:
   • Use Anything if the field is required but need not contain any particular kind of data. (If the Required option is not selected, the Anything option is meaningless—that is, it is the same as if the Validate Form action were not attached to the field.)
   • Use E-mail address to check that the field contains an @ symbol.
   • Use Number to check that the field contains only numerals.
   • Use Number From to check that the field contains a number in a specific range.
8. If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate.
9. Click OK.
10. If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events pop-up menu.
11. If you are validating individual fields, check that the default event is onBlur or onChange.

• To insert a nested layer, place the insertion point inside an existing layer and choose Insert > Layer.
• To draw a nested layer, click the Draw Layer button in the Insert bar, then drag to draw a layer inside an existing layer. If Nesting is turned off in Layers preferences, Alt-drag (Windows) or Option-drag (Macintosh) to draw a layer inside an existing layer.
  Tip: Nested layers may appear differently in different browsers. When you create nested layers, check their appearance in various browsers frequently during the design process.

1. Choose Window > Others > Layers to open the Layers panel.
2. Select a layer in the Layers panel, then Control-drag the layer to the target layer in the Layers panel. Release the mouse button when the name of the target layer is highlighted.

1. Click the name of the layer in the Layers panel.
2. Click a layer’s selection handle. If the selection handle isn’t visible, click anywhere inside the layer to make the handle visible.
   
3. Click a layer’s border.
4. Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside a layer. If multiple layers are selected, this deselects all other layers and selects only the one that you clicked.
5. Click the layer-code marker (in the Design view) that represents the layer’s location in the HTML code. If the layer-code marker isn’t visible, choose View > Visual Aids > Invisible Elements.

1. Shift-click two or more layer names in the Layers panel.
2. Shift-click inside or on the border of two or more layers.
   

• To resize by dragging, drag any of the layer’s resize handles.
• To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.
  Note: The arrow keys move the right and bottom borders of the layer; you can’t resize using the top and left borders with this technique.
• To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while pressing an arrow key. For information about setting the grid snapping increment
• In the Property inspector, type values for width (W) and height (H).

1. In the Design view, select two or more layers.
2. Do one of the following:
   • Choose Modify > Align > Make Same Width or Modify > Align > Make Same Height.
     The first selected layers conform to the width or height of the last selected layer (highlighted in black).
   • In the Property inspector, under Multiple Layers, enter width and height values. The values are applied to all selected layers.

1. Choose View > Grid > Grid Settings.
   The Grid Settings dialog box appears.
2. Set options as desired.

1. Select a layer.
2. Open the Property inspector by choosing Window > Properties.
3. If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.
   

1. Select a layer.
2. Open the Property inspector by choosing Window > Properties.
3. Change the layer’s attributes by setting properties.

1. Choose Window > Others > Layers to open the Layers panel.
2. Click in the eye-icon column for a layer to change its visibility.
   • An open eye means the layer is visible.
   • A closed eye means the layer is invisible.
   • If there is no eye icon, usually the layer inherits visibility from its parent. (When layers are not nested, the parent is the document body, which is always visible.) Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).
     

1. Choose Window > Others > Layers to open the Layers panel.
2. Click the header eye icon at the top of the column.
   Note: This procedure can set all layers to visible or hidden, but not to inherit.

1. Choose Modify > Convert > Layers to Table.
2. In the dialog box that appears, select the desired options.
3. Click OK.
   The layers are converted to a table.

1. Choose Modify > Convert > Tables to Layers.
2. In the dialog box that appears, select the desired options.
3. Click OK.
   The tables are converted to layers. Empty cells are not converted to layers unless they have background colors.

• Select the Prevent Overlaps option in the Layers panel.
• Choose Modify > Arrange > Prevent Layer Overlaps.

1. Select a layer.
2. Move the layer to where it should be when animation begins.
3. Choose Modify > Timeline > Record Path of Layer.
4. Drag the layer around the page to create a path.
5. Release the layer at the point where the animation should stop.
   Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes.
6. In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.

• To make the layer reach a keyframe position earlier or later, move the keyframe marker left or right in the bar.
• To change the start time of an animation, select one or more of the bars associated with the animation (press Shift to select more than one bar at a time) and drag left or right.
• To shift the location of an entire animation path, select the entire bar and then drag the object on the page. Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes all the keyframes.
• To add or remove frames in the timeline, choose Modify > Timeline > Add Frame or Modify > Timeline > Remove Frame.
• To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a behavior to the page that executes the Play Timeline action when the page loads.
• To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the Behaviors channel after the last frame of the animation. You can edit the parameters for this behavior to define the number of loops.

1. In the Timelines panel, do one of the following:
   • Select an existing keyframe in the bar controlling the object you want to change. (The start and end frames are always keyframes.)
   • Create a new keyframe by clicking a frame in the middle of the animation bar and choosing Modify > Timeline > Add Keyframe. You can instead create a new keyframe by Control-clicking (Windows) or Command-clicking (Macintosh) a frame in the animation bar.
2. Define new properties for the object by doing one of the following:
   • To change the source file of an image, click the folder icon next to the Src text box in the Property inspector, then browse to and select a new image.
   • To change the visibility of a layer, choose inherit, visible, or hidden from the pop-up menu in the Vis text box of the Property inspector.
   • To change the size of a layer, drag the layer’s resize handles or enter new values in the Width and Height text boxes in the Property inspector. Not all browsers can dynamically change the size of a layer.
   • To change the stacking order of a layer, enter a new value in the Z-Index text box or use the Layers panel to change the stacking order of the current layer
3. Hold down the Play button to see the animation.

1. To create a new timeline, choose Modify > Timeline > Add Timeline.
2. To remove the selected timeline, choose Modify > Timeline > Remove Timeline. This permanently removes all animations from the selected timeline.
3. To rename the selected timeline, choose Modify > Timeline > Rename Timeline or enter a new name in the Timeline pop-up menu in the Timelines panel.
4. To view a different timeline in the Timelines panel, choose a new timeline from the Timeline pop-up menu in the Timelines panel.

1. Click an animation bar to select a sequence. To select multiple sequences, Shift-click multiple animation bars; to select all sequences, press Control+A
2. Copy or cut the selection.
3. Do one of the following:
   • Move the playback head to another spot in the current timeline.
   • Select another timeline from the Timeline pop-up menu.
   • Open another document, or create a new one, and then click in the Timelines panel.
4. Paste the selection into the timeline.

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:
   
   • Click the folder icon to the right of the Link text box to browse to and select a file.
     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.
   • Type the path and filename of the document in the Link text box.
     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.
3. 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:
   • _blank loads the linked document in a new, unnamed browser window.
   • _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
   • _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
   • _top loads the linked document in the full browser window, thereby removing all frames.

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.
3. Release the mouse button.

1. Select text in the Document window.
2. Shift-drag from the selection.
   The Point-to-File icon appears as you drag.
3. 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.

4. Release the mouse button.

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.
3. 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.
4. Release the mouse button.

1. In the Document window’s Design view, place the insertion point where you want the named anchor.
2. Do one of the following:
   • Choose Insert > Named Anchor.
   • Press Control+Alt+A
   • Select the Common tab in the Insert bar and click the Named Anchor button.

     The Named Anchor dialog box appears.

3. In the Anchor Name field, type a name for the 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:
   • To link to an anchor named “top” in the current document, type #top.
   • To link to an anchor named “top” in a different document in the same folder, type filename.html#top.
     Note: Anchor names are case sensitive.

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.
2. 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.)
3. Do one of the following:
   • Click the Point-to-File icon to the right of the Link text box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
   • Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.

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:
   • Choose Insert > Hyperlink.
   • Select the Common tab in the Insert bar, and then click the Hyperlink button.
     The Hyperlink dialog box appears.
     
3. Complete the dialog box.
4. Click OK.

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:
   • Choose Insert > E-Mail Link.
   • Select the Common tab in the Insert bar, and then click the Insert E-Mail Link button.

     The E-Mail Link dialog box appears.
     

3. Complete the dialog box.
4. Click on Ok

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:contact@cpadhikari.com.np

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.

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

1. Choose Edit > Preferences
   The Preferences dialog box appears.
2. Select General from the category list on the left.
   The General preferences options appear.
   

1. Choose Site > Edit Sites.
   The Edit Sites dialog box appears.
2. Select a site, and then click Edit.
3. Select Local Info from the category list on the left.
   The Site Definition dialog box displays the Local Info options.
4. 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.

1. Open a document, and then place the insertion point in the Document window.
2. Choose Insert > Form Object > Jump Menu.
   Select the Form tab in the Insert bar, and then click the Jump Menu button.

   The Insert Jump Menu dialog box appears.
   

3. Complete the dialog box.
4. Click OK.

1. Choose Window > Properties to open the Property inspector, if it isn’t open.
2. In the Document window’s Design view, click the jump menu object to select it.
   The List/Menu icon appears in the Property inspector.
3. In the Property inspector, click the List Values button.
   The List Values dialog box appears.

• Up: the image that appears when the user hasn’t yet clicked or interacted with the element.
• Over: the image that appears when the pointer is moved over the Up image. The element’s appearance changes (for example, it may get lighter) to let users know they can interact with it.
• Down: the image that appears after the element has been clicked.
  For example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element is darkened to show that it’s been selected.
• Over While Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked.

1. Do one of the following:
   • Choose Insert > Interactive Images > Navigation Bar.
   • Select the Common tab of the Insert bar, and then click the Insert Navigation Bar button.
     The Insert Navigation Bar dialog box appears.
     

1. Choose Modify > Navigation Bar.
   The Modify Navigation Bar dialog box appears.
   
2. In the Nav Bar Elements list, select the element you want to edit.
3. Make changes as necessary.
4. Click OK.