tags in Standard view.
Now you’ll learn how to work with tables to continue fine-tuning your design.
First, you’ll switch to the Dreamweaver Standard view.
• In the Objects panel, click the Standard View icon.
Your page should look similar to the screen below.
Set cell properties
Cell height determines the height of the space within a cell row. Notice the space
around the Compass logo. You want to remove the extra space between the logo
and navigation buttons.
1
Click anywhere in the blank area of the cell containing the Compass logo
image (but not the image itself ).
2
In the cell Property inspector, in the H field (height), that currently contains a
value, delete the value.
3
Still in the Property inspector, click the Bg color box icon located in the bottom
area of the Property inspector; then use the eyedropper to select black.
The background color is applied to the cell.
4
50
Chapter 1
Click anywhere in the Document window to see the change.
Selecting a table
Next you’ll adjust the space in the navigation button table. The easiest way to
select a table in Standard view is by using the tag selector, which displays HTML
tags of elements in the document.
You’ll use the tag selector to select the table containing the navigation buttons.
1
Click in the cell that contains the Trip Planner image.
Notice the tag selector at the bottom left of the Document window.
Note: The tags in your tag selector may vary based on the number of tables you created
while in Layout view.
2
In the tag selector, click the rightmost
tag.
In the Document window a border appears around the navigation button table,
and the Property inspector now reflects properties for a table.
Set table properties
Now you’ll use the table Property inspector to clear the extra space in the
navigation buttons table and to add a background color in the table.
1
In the Property inspector, click the Clear Row Heights icon. It’s the top left
button in the lower half of the Property inspector.
The extra space is removed from the table.
2
Still in the Property inspector, click the Bg Color color box icon, then use the
eyedropper to select the color black.
The black background color is applied to the navigation buttons table.
Dreamweaver Tutorial
51
Add cell padding
Next, you’ll make changes to the cells that contain text. As you can see, the text is
too close the edges of the cells. You’ll add padding to the cells to leave room
between the text and cells.
1
Click in the first cell in the text description table.
2
In the tag selector, click the rightmost
tag to select the table.
3
In the Property inspector’s CellPad field, type 10 to add 10 pixels of space
between the text and the table cells.
4
Click anywhere in the Document window to see the changes.
5
Save your document.
View the site files
To see a high-level representation of the structure of a local site, you use the
Dreamweaver Site Map view. You can also use the site map to add new files to the
site; to add, remove, and change links; and to create a graphic file of the site that
you can export to and print from an image-editing application.
The site map always displays the home page for a site at the top of the map; below
the home page you can see which files the home page links to.
There are a number of ways to define a site’s home page. The easiest way to set a
home page is by using the context menu within the Site window.
1
Click the title bar of the Site window to make it active. (If the Site window is
not visible, choose Window > Site Files.)
2
In the Site window’s Local Folder list, right-click (Windows) or Control-click
(Macintosh) the my_CompassHome.html document; then in the context
menu, choose Set as Home Page.
3
Click the Site Map icon in the top left area of the Site window; then in the Site
Map pop-up menu, select Map and Files.
Site Map icon
52
Chapter 1
The Site window now appears with two views of your local site: on the left is a site
map, which graphically represents the current structure of the Compass site (with
my_CompassHome.html as the home page), and on the right is a list of the local
folder’s contents.
The my_CompassHome.html page currently has no links. You’ll add links to this
page in the next section of this tutorial.
Leave the Site window open for now, so you can see how the site map updates as
you add links to the home page.
Dreamweaver Tutorial
53
Link your documents
Images in the top area of the Compass home page guide visitors to specific pages
in the site. Now you’ll add links for the navigation buttons.
You’ll see that there are a number of ways to create links using Dreamweaver. First,
you’ll add a link from the Trip Planner image to the TripPlanner.html page using
the Property inspector.
1
In the Site window, double-click the icon for the my_CompassHome.html file
in either pane.
The my_CompassHome.html file becomes the active window.
2
In the Document window, click the Trip Planner image once to select it.
3
Choose Window > Properties to open the Property inspector if it isn’t
already open.
The Property inspector displays information about the selected image.
Note: The Link field contains a number sign (#), often referred to as a null or “dummy”
link, created when you inserted the rollover image. Don’t remove this character. It will
soon be replaced with the file name of the document you link to.
4
In the Property inspector, click the folder icon to the right of the Link field.
5
In the Select File dialog box, browse to the Compass_Site folder and then to
DW4_TripPlanner.html; click Select (Windows) or Open (Macintosh) to
select the file to open when the Trip Planner button is clicked.
The file name appears in the Link field of the Property inspector. Now
you’ll add a link to the Destinations image using the Property inspector and
the Site window.
54
Chapter 1
6
Click the title bar of the Site window to make it active, or choose Window >
Site Files. Resize your Document window, if necessary, so that you can position
the left side of the Document window and the Site window side by side.
7
In the Document window, click the Destinations image to select it.
8
In the Property inspector, click the Drag to File icon (located to the right of the
Link field), then drag the pointer to the Site window; in the Local Folder List,
point to the file DW4_Destinations.html.
The file name appears in the Link field in the Property inspector for the
products image.
9
Click the Site Map icon in the Site window. The site map updates to reflect the
link you added.
A plus (+) sign next to any file in the site map indicates that the file contains
links to other documents. Click the plus sign to expand the site map to display
the associated files; click the minus (–) sign to collapse the site map.
Next, you’ll add a link for the Travelogs image.
10
In the Document window, click the Travelogs image to select it.
11
In the Property inspector, drag the Point-to-File icon to the Site window, and
point to the file DW4_Travelog.html.
12
Choose File > Save to save the changes you’ve made to the home page.
Dreamweaver Tutorial
55
Test your page
You can’t test your links in Dreamweaver, you must check your links in a browser
to make sure the pages operate as you expect.
1
Press F12 to preview the page in a browser.
Click the navigation buttons to check your links. Click your browser’s back
button to return to your home page.
2
When you’re finished testing your page, choose File > Close to close the page.
Use the Assets panel
The Assets panel lets you view your site assets such as images, HTML colors,
links, Flash movies, other types of movies, scripts, templates, and library items.
You can view all your site assets in one place and then easily add content to your
page directly from the panel.
Now you’ll learn how to use the Assets panel to add assets to a page.
Select a new document
So you don’t need to create additional tables in your home page, this tutorial
includes an HTML file that is similar to the home page you created; it includes a
new table cell on the right side of the document.
To start this part of the tutorial do one of the following:
• If you’re continuing the tutorial from the previous section, choose File > Open
then select DW4_CompassHome2.html.
• If you’re starting the tutorial in this section, choose Site > Open Site, then in
the Sites list select Tutorial - Dreamweaver to open a defined site. In the
Document window’s main menu choose File > Open; in the dialog box that
appears, select DW4_CompassHome2.html.
The DW4_CompassHome2.html file opens.
56
Chapter 1
View site assets
Begin by opening the Assets panel.
1
Open the Assets panel by doing one of the following:
• Choose Window > Assets.
• Click the Show Asset icon in the Launcher Bar.
The Assets panel appears.
Assets preview area
Asset options
Dreamweaver Tutorial
57
Insert an image
You’ll start by using the Assets panel to insert two images in the page—a rock
climber image and a text image.
1
In the Assets panel, click the Images icon and make sure the Site radio button
located at the top of the Assets panel is selected so you can view all of the
images in the Compass site.
2
In the Names list, select the image icon for climber.jpg then drag it to the
middle table cell in the right side of the page.
3
Press the right arrow key (this deselects the climber image and places the
insertion point after the image), then press Shift+Enter (Windows) or
Shift+Return (Macintosh) to insert a line break.
4
In the Name list, select featureText.gif then drag it to the line break you just
created placing the featureText image under the climber image.
Insert a Flash movie
Now you’ll add a different type of asset. You’ll drag a Flash movie into the cell
below the navigation buttons.
1
Click the Flash icon in the Assets panel to view all the Flash files in the
Compass site.
2
In the Names list, click welcome.swf to select the Flash movie you’re inserting
in the document.
In the Assets panel’s preview area you see a placeholder for the Flash movie.
58
Chapter 1
3
Click the Play button in the Assets panel’s preview area to view the Flash movie.
Play button
4
In the Names list, drag the Welcome.swf to the cell below the Trip Planner
navigation button.
A Flash move placeholder appears in the selected cell.
Apply a color using the Assets panel
Colors you apply to HTML elements, such as to text or as a background color,
are automatically added to the color category of the Assets panel. You can select
a color from the Assets panel and apply it to text in the same page or to other
pages in your site.
1
Place the insertion point after the rock climber image, then press Enter
(Windows) or Return (Macintosh) to add a new paragraph, then type Yosemite.
2
Double-click Yosemite to select the text.
3
In the Assets panel, click the Colors icon to view HTML colors in the
Compass site.
4
In the Value list, select the color icon for #993300 then drag it to the selected
text to apply the color.
Create a favorite assets list
Use the Assets panel to manage your assets. You can create your own group of
favorites assets in the Assets panel. Next, you’ll add the Compass logo and
navigation button image to your site Favorites list.
1
In the Assets panel, select the Images icon.
2
In the Name list, click compass_logo.gif to select it, then do one of the
following:
• Right-click (Windows) or Control-click (Macintosh) to use the context menu,
then select Add to Favorites.
• Click the Add to Favorites icon located in the lower right of the Assets panel.
You are alerted that the selected asset was added to your site’s Favorites list.
3
Click OK.
Dreamweaver Tutorial
59
Add multiple images to favorites
Now, you’ll add the navigation button images to the favorites list. You can select
multiple images in the Assets panel, then add them to your favorites at one time.
1
In the Assets panel’s Images list click the first navigation button image
(MenuDestinations.gif ).
2
Select the other navigation buttons by doing one of the following:
• Press Shift (Windows) and in the Images list click MenuTripPlanner_on.gif (the
last navigation button in the list) to select all of the navigation button images.
• Press Shift (Macintosh) and hold it while you select each of the navigation
button images.
3
Click the Add to Favorites icon.
4
Click OK to the alert message.
View favorite assets
You can view the assets you’ve added to your Favorites list, and use this view for
inserting assets in your document.
To view images you’ve added to the Favorites list, click the Favorites radio button
at the top of the Assets panel.
Insert Flash objects
Flash objects are small graphic SWF (Shockwave) files you can create while working
in Dreamweaver. You can create Flash Text and Flash Button objects. Using Flash
Text allows you to design Web pages that use nonstandard fonts without worrying
about which fonts visitors to your site have available on their computers. Flash
buttons are created from Flash templates that ship with Dreamweaver. You can
easily customize a template button and add it to your Web pages.
60
Chapter 1
Create a Flash Text object
Now you’ll create a Flash Text object to use as a title in your home page.
1
In the Document window, place the insertion point above the image of the
rock climber.
2
In the Object panel, click the Insert Flash Text icon.
The Insert Flash Text dialog box appears.
3
In the Insert Flash Text dialog box, set the following options:
• For Font, select Verdana or choose one of your favorite fonts.
• For Size, type 18.
• For Color, click the color box, then use the eyedropper to select brownish color
of the heading text in the document.
• For Rollover Color, click the color box; then move the eyedropper to the
Document window and select the gold color in the table’s background.
• In the Text field, type Featured Destination.
• In the Save As field, type myText.swf.
4
Click OK to close the Insert Flash Text dialog box.
Dreamweaver Tutorial
61
View the Flash Text object in the document
The Flash Text object appears in the document. You must play the Flash object to
see the text with its rollover effect.
1
If it isn’t already expanded, in the Property inspector click the expander
arrow to see all.
2
In the Flash Text Property inspector, click Play.
3
In the Document window, roll the pointer over the Flash Text object.
4
To stop playing the object, click Stop in the Property inspector.
Create a Flash button object
Now you’ll see how easy it is to add a Flash button to a document. You’ll create a
Flash button, and add it below the climber image.
1
In the Document window, place the insertion point where you want the object
to appear, below the image of the rock climber, then in the Objects panel, click
the Insert Flash Button icon.
The Insert Flash Button dialog box appears.
62
Chapter 1
2
In the Insert Flash Button dialog box, set the following options:
•
•
•
•
•
•
In the Style list, select Beveled Rect-Bronze.
3
Click OK to close the dialog box.
For Button Text, type More Details.
For Font, select Verdana, or choose one of your favorite fonts.
For Size, type 11.
Click Apply to see the Flash button in the document.
In Save As, type myButton.swf
The Flash Button object appears in the document.
View the Flash button in the document
The Flash button you inserted has a rollover effect, now you’ll play the button to
see how it looks.
1
In the Flash button Property inspector, click Play to play the button in
the document.
2
In the Document window, roll the pointer over the object to see the Flash
button’s rollover effect.
3
To stop playing the object, click Stop in the Property inspector.
Create a template
You can use templates to create documents that have a common structure and
appearance. Templates are useful when you want to make sure that all of the pages
in a site share certain characteristics.
Once you apply a single template to a group of pages, you can change information
on the group of pages by editing the template and then reapplying it to those
pages. While elements unique to each page (such as text describing an item for
sale) remain unchanged, common template elements (such as navigation bars) are
updated on all of the pages that use the template.
The Compass trip destination page links to several travel detail pages that describe
places site viewers may be interested in traveling to. You’ll use the design of an
existing travel detail page to create a template. Using a template ensures that your
travel information pages will have an identical layout and format.
Dreamweaver Tutorial
63
Create a template from an existing page
In this section, you’ll create a template from an existing travel page and then use
the template to create a new travel page.
1
In the Site window’s Local Folder list, double-click the icon for
DW4_TravelDetail_surf.html to open the file.
2
Choose File > Save as Template.
The Save As Template dialog box appears.
The existing templates, travelDetail and travelDetail_v2, were created for and
applied to the completed Compass site travel pages. You’ll create your own
version of this template.
3
In the Save As field, change the template name: type myTravelDetail and
click Save.
In the Document window a new document replaces the DW4_TravelDetail
document. In the document title bar, notice the document contains a Template
identifier <>, and a Dreamweaver template file extension (.dwt).
Modify the template
At this point, the new template is the same as the page from which you saved the
template. A template contains both locked and editable regions. Locked regions
can be edited only inside the template itself. Editable regions are placeholders for
content that is unique to each page the template is applied to. In your template,
the logo and navigation buttons aren’t editable; the destination’s title, related
banner ad, and destination description are editable.
Your first step is to create editable regions in the template.
1
64
Chapter 1
In the myTravelDetail.dwt template in the Document window, click the
topmost Flash placeholder to select it; this movie displays the destination’s title.
2
Choose Modify > Templates > New Editable Region.
The New Editable Region dialog box appears.
3
In the Name field, type titleCell as the name for this region of the template.
4
Click OK.
A template region is created. Notice the tab that contains the template region’s
name. The placeholder is also surrounded by a light-blue line that identifies the
boundaries of the editable area.
5
In the Document window, select the Flash banner placeholder, then choose
Modify > Templates > New Editable Region to make this an editable region in
the template.
6
In the Name field in the New Editable Region dialog box, type adCell and
then click OK.
The template area identifiers appear in the document.
7
In the Document window, select all of the text in the first cell below the banner
ad, and then choose Modify > Templates > New Editable Region to make this
an editable area of the template.
8
In the Name field in the New Editable Region dialog box, type textCell1
and click OK.
9
In the Document window, select all of the text in the second cell below the
banner ad, and then choose Modify > Templates > New Editable Region to
make this an editable section of the template.
10
In the Name field in the New Editable Region dialog box, type textCell2
and click OK.
11
Choose File > Save to save the template file.
Dreamweaver Tutorial
65
Apply the template to a new page
Now that you’ve set the editable regions in your template, you’ll use the template
to create a travel detail page for a trip to New Zealand.
1
Choose File > New from Template to open a new document.
2
In the Templates list in the Select Template dialog box, select myTravelDetail,
then click Select to select the template you want to apply to the new page.
The template is applied to the new document.
This page contains the same regions and content as the template you created.
Note: If you move the mouse pointer to a noneditable region of this template, such as
the logo or navigation button areas, the mouse pointer changes to indicate that you
can’t access the locked region.
3
66
Chapter 1
Save your document, and name the file myTravelDetail_mtnBike.html.
Editing a template-based page
Now you’ll update the myTravelDetail_mtnBike.html document, updating the
editable regions with assets and text that refer to travel details about mountain
biking in New Zealand.
1
In the Document window, click the Flash placeholder in the titleCell region to
select the object you want to replace.
2
In the Property inspector’s File field, click the folder icon; then in the dialog
box that appears, navigate to Assets/swfs and select text_mtnBike.swf.
3
In the adCell region, click the Flash placeholder to select the object you
want to replace.
4
In the Property inspector’s File field, click the folder icon; then in the dialog
box that appears, navigate to Assets/swfs then select bikeAd.swf.
5
Choose File > Open, then navigate to DW4_MtnBikeText.txt to open a
document that contains the text for this destination.
6
In DW4_MtnBikeText.txt, copy the paragraph of text under Cell 1; in the
myTravelDetail_mtnBike document replace the current text in the textCell1
region by selecting it, then pasting the copied text.
7
In DW4_MtnBikeText.txt, copy the paragraph of text under Cell 2; in the
myTravelDetail_mtnBike document replace the current text in the textCell2
region by selecting that text then pasting the copied text.
The travel details information is updated.
8
Close DW4_MtnBikeText.text.
9
In the Title field of the toolbar, type New Zealand biking.
10
Save your document.
Dreamweaver Tutorial
67
Check your site
Before posting your pages to a remote server you should always check your files.
So far you’ve learned how to test your pages by previewing them in a browser, now
you’ll learn about other Dreamweaver tools available for creating a follow-up for a
file and for testing your pages.
First, you’ll learn how to add a Design Note to a file, and then you’ll see how to
run a report on files in your site.
Create a Design Note
Design Notes are a great way to manage your site by inserting comments in
your document’s Site window. Use Design Notes to schedule production work,
place follow-ups on files, or to communicate file or site details with team
members. Next you’ll create a Design Note to follow-up on making a change
to one of your site pages.
1
In the Dreamweaver Site Window (Site > Site Files), in the Local Folder pane
select DW4_Destinations.html.
2
In the main menu choose File > Design Notes.
The Design Notes dialog box appears.
68
Chapter 1
3
In the Basic Info tab, in the Status pop-up menu select Needs Attention.
4
Click the calendar icon to add the date in the Notes field.
5
Click in the Notes field, then type Need to create Devil’s Tower page and add
links to documents.
6
Select the Show When File Is Opened option so the Design Note automatically
opens when this page is opened.
7
Click OK to close the dialog box.
A Design Note icon appears in the Notes column in the Local Folder pane.
8
In the Site Window, select DW4_Destinations.html and open it.
The document and its associated Design Note opens; you can easily see what
actions are required for this file.
Dreamweaver Tutorial
69
Sitewide reports
You can run site reports to check HTML file conditions and to manage workflow.
Run reports at the document, folder, or site level. You’ll run a report to see if you
have any untitled documents in your site.
1
Choose Site > Reports.
The Reports dialog box appears.
2
In the Reports dialog in the Report On pop-up menu, select Entire Local Site;
then under HTML Reports, select Untitled Document.
3
Click Run to run a report.
A Results dialog box appears listing any documents without a page title.
4
In the File list click the file to select it.
The Detailed Description field updates with detailed warning information.
5
Click Open File to open the file and correct the problem.
The file opens.
6
In the Title field of the toolbar, type Featured Destinations.
7
Save and close the file when you’re done.
8
Close the Results dialog box.
The next steps
Congratulations, you’ve completed the Dreamweaver tutorial. You know how to
design pages, add content, and test your pages. If you want, you can continue
creating pages and links for the Compass site. You know how to do everything
required to complete the pages (or you can use the completed pages as a
reference). After you’ve updated the pages, preview your pages to test the rollovers
and links to make sure they work.
If you want to learn more about using Dreamweaver, try the Dreamweaver
lessons; in the Dreamweaver main menu choose Help> Lessons then select one
of the lessons.
If you have a copy of both Dreamweaver and Fireworks, and want to learn how to
work with these tools together, see the Dreamweaver and Fireworks tutorials.
If you’re interested in learning more about using HTML code, JavaScript code, or
cascading style sheets, check out the Reference materials that ship with
Dreamweaver. Choose Windows > Reference.
70
Chapter 1
2
CHAPTER 2
Dreamweaver Basics
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Getting started in Macromedia Dreamweaver is as easy as opening an existing
HTML document or creating a new one. However, to get the most out of your
Dreamweaver experience, you should understand the basic concepts behind the
Dreamweaver work area and how to choose options, use inspectors and panels,
and set preferences that fit your work style best.
71
About the Dreamweaver work area
The Dreamweaver work area accommodates different styles of working and levels
of expertise. Here are some of the most commonly used components:
Toolbar
Context menu
Objects panel
Document
window
Launcher bar
Tag selector
Property
inspector
• The Document window displays the current document as you create
and edit it.
• The Launcher bar at the bottom right of the Document window contains
buttons for opening and closing your most frequently used inspectors and
panels. The icons on the Launcher bar also appear on the Launcher, a floating
panel that you can choose from the Window menu. You can specify which
icons appear in the Launcher bar and Launcher by setting Panels preferences.
• The toolbar contains buttons and pop-up menus that let you view the
Document window in different ways, set view options, and access some
common operations, for example, previewing in a browser.
• Context menus let you quickly access useful commands pertaining to the
current selection or area. To display a context menu, right-click (Windows) or
Control-click (Macintosh) an item in a window.
• The Objects panel contains buttons for creating and inserting various types of
objects, such as images, tables, layers, and frames. You can also switch between
Standard and Layout view and access the Layout view drawing tools.
• The Property inspector displays properties for the selected object or text, and
lets you modify those properties. (Which properties appear in the inspector
depend on the object or text selected.)
72
Chapter 2
• Dreamweaver provides many other inspectors, panels, and windows not shown
here, such as the History panel and the Code inspector. Many of these items
can be “docked”—that is, you can combine windows, inspectors, and panels
into tabbed windows.
To open Dreamweaver windows, inspectors, and panels, use the Window menu. A
check mark next to an item in the Window menu indicates that the named item is
currently open (though it may be hidden behind other windows). To display an
item that isn’t currently open, choose the item name from the menu.
If a panel or inspector is checked but does not appear, choose Window >
Arrange Panels.
About the different views in Dreamweaver
Dreamweaver allows you to work in your document in several ways—using
Design view, using Code view, or using a combined view that displays both the
design and code of the document. You can change the view in which you’re
working by selecting a view in the Dreamweaver toolbar. For more information,
see “Using the toolbar” on page 78.
Working with the Code view
As you create and work with documents, Dreamweaver automatically generates
their underlying HTML source code. To examine or edit this code, use one of the
Dreamweaver code editors: the Code view in the Document window or the Code
inspector. For more detailed information, see “Using the Code view (or Code
inspector)” on page 330.
Working with the Design view
The Dreamweaver Design view displays a visual representation of your document,
rather than the underlying code. When you work in the Design view, there are
two views in which you can design—Layout view and Standard view. You select
these views in the Objects panel under View.
In Layout view you can design a page layout and insert graphics, text, and other
media. For more information, see “Designing Page Layout” on page 167.
Work in Standard view to insert layers, create frame documents, create tables, or
to use other features that aren’t available in Layout view. To work in Standard view,
click the Standard View icon in the Objects panel.
Dreamweaver Basics
73
About the Document window
In Design view, the Document window displays the current document
approximately as it appears in a Web browser. The title bar of the Document
window displays the page title and, in parentheses, the name of the root folder, the
file name, and an asterisk if the file contains unsaved changes.
The status bar, found at the bottom of the Document window, provides
additional information about the document you are creating.
Document size and
estimated download time
Tag selector
Window Size
pop-up menu
Launcher bar
The tag selector displays the HTML parent tags that control selected text or
objects. Click one of these tags to highlight its contents in the Document window.
Click to select the whole body of the document.
The Window Size pop-up menu lets you resize the Document window to predetermined
or custom dimensions. See “Resizing the Document window” on page 75.
To the right of the Window Size pop-up menu, you’ll see the estimated document
size and download time of the page, including all dependent files such as images
and other media files. See “Checking download time and size” on page 509.
The Launcher bar appears along the bottom of the Document window. By
default, the Launcher bar buttons open the Site window, the Assets panel, the
HTML Styles panel, the CSS Styles panel, the Behaviors panel, the History panel,
and the Code inspector. To specify which buttons appear in the Launcher bar (and
the floating Launcher), see “Customizing the Launcher bar” on page 77.
74
Chapter 2
Resizing the Document window
The Document window status bar displays the window’s current dimensions (in
pixels). If you click this window size, Dreamweaver displays the Window Size
pop-up menu, which lets you set the window size to fit any of several common
monitor sizes. To design a page that looks its best at a specific size, you can adjust
the Document window to any of the predetermined sizes, edit those
predetermined sizes, or create new sizes.
Note: The window size given reflects the inside dimensions of the browser window,
without borders; the monitor size is listed in parentheses. For example, you would
use the size “536 x 196 (640 x 480, Default)” if your visitors are likely to be using
Microsoft Internet Explorer or Netscape Navigator in their default configurations on a
640 x 480 monitor.
To resize the Document window to a predetermined size:
Choose one of the sizes from the pop-up menu at the bottom of the
Document window.
To change the values listed in the Window Size pop-up menu:
1
Choose Edit Sizes from the Window Size pop-up menu.
2
Click any of the width or height values in the Window Sizes list and type
a new value.
To make the Document window adjust only to a specific width (leaving the
height unchanged), select a height value and delete it.
3
Click the Description field to enter descriptive text about a specific size.
4
Click OK to save the change and return to the Document window.
Dreamweaver Basics
75
To add a new size to the Window Size pop-up menu:
1
Choose Edit Sizes from the Window Size pop-up menu.
2
Click the blank space below the last value in the Width column.
3
Enter values for Width and Height. To set the Width or Height only, simply
leave one field empty.
4
Click the Description field to enter descriptive text about the size you added.
5
Click OK to save the change and return to the Document window.
For example, you might type SVGA or average PC next to the entry for an
800 x 600 pixel monitor, and 17-in. Mac next to the entry for an 832 x 624
pixel monitor. Note that most monitors can be adjusted to a variety of pixel
dimensions.
Minimizing and restoring windows and panels (PC users only)
You can minimize and restore all open Dreamweaver windows—Document
windows, inspectors, and panels.
• To minimize all Dreamweaver windows, press Shift+F4, or select Window >
Minimize All.
• To restore all Dreamweaver windows, press Alt+Shift+F4. If you have at least
one window open, you can select Window > Restore All to restore any
additional window.
Setting Status Bar preferences
Use Status Bar preferences to set options for the status bar at the bottom of the
Document window. To display these preferences, choose Edit > Preferences and
select Status Bar.
Window Sizes lets
you customize the window sizes that appear in the status bar’s
pop-up menu. See “Resizing the Document window” on page 75.
Connection Speed determines
the connection speed (in kilobits per second) used
to calculate the download size. The download size for the page is displayed in the
status bar. The download size for images and other assets is displayed in the
Property inspector when an image is selected.
Show Launcher in Status Bar displays the Launcher bar at the bottom of the
Document window. The buttons in the Launcher bar launch windows, panels, and
inspectors. The Launcher contains the same buttons (with text) and functions. For
more information, see “Customizing the Launcher bar” on page 77.
76
Chapter 2
Using the Launcher bar
The Launcher bar contains buttons for opening and closing various panels,
windows, and inspectors. You can also display the Launcher, a floating panel with
identical buttons.
To show or hide the Launcher:
Choose Window > Launcher.
If the Launcher bar does not appear at the bottom of the Doc window, turn on
the Show Launcher in Status Bar option in Status Bar preferences.
To switch the Launcher orientation from horizontal to vertical:
Click the orientation icon at the lower right.
For information on the items that the default Launcher buttons open, see “About
the Site window” on page 108, “Managing and Inserting Assets” on page 221,
“Using HTML styles to format text” on page 244, “Using the CSS Styles panel”
on page 255, “Using the Behaviors panel” on page 436, “About automating tasks”
on page 160, and “Using the Code view (or Code inspector)” on page 330.
Customizing the Launcher bar
Use Panels preferences to specify which items appear in the Launcher bar
and Launcher.
To specify which buttons appear in the Launcher bar and Launcher:
1
Choose Edit > Preferences, then select Panels from the category list.
The items selected to display in the Launcher and Launcher bar are listed in the
Show in Launcher box.
2
To add an item to the Launcher and Launcher bar, click the Plus (+) button.
3
To remove an item from the Launcher and Launcher bar, highlight the item
and click the Minus (-) button.
4
To change the order of the items in the Launcher or Launcher bar, select an
item in the list and click an arrow button.
For example, to move an item to the right in the Launcher, move the item
down in the list.
5
Click OK.
The Launcher and Launcher bar change to show the items you specified.
Dreamweaver Basics
77
Using the toolbar
The Dreamweaver toolbar contains buttons that let you toggle between different
views of your document quickly: Code, Design, and a third view that comprises
both Code and Design view. The toolbar also contains some common commands
related to your view selection and your document’s status. The Options menu
items (button located on the right) change depending on the view you select.
Code View
File Status
Design View
Document Title
Options Menu
Preview in browser
Reference
Code and Design View
Code Navigaton
Refresh Design View
• To view or hide the toolbar, choose View > Toolbar.
• To display code only in the Document window, click the Show Code
View button.
• To display a view containing both Code and Design views, click the Show
Code and Design Views button.
When you select this view, the option Design View on Top becomes available
in the View menu. Use this option to specify which view appears at the top of
your Document window.
• To display the Design view only, click the Show Design View button.
You can also access these views through the View menu.
• To enter a title for your document, use the Title field.
If your document already has a title, it appears in this field.
• To display the File Status pop-up menu, click the File Status Menu button.
• To preview or debug your document in a browser, click the Preview/Debug in
Browser button and choose one of the browsers listed in the pop-up menu.
To add or change the browsers listed in the menu, choose Edit Browser List.
• To refresh your Design view, click the Refresh Design View button.
• To access the Reference panel, click the Reference button.
The Reference panel contains reference information on HTML, CSS, and
JavaScript code. For more information, see “Using the Dreamweaver Reference
panel” on page 328.
78
Chapter 2
• To navigate through your code, click the Code Navigation button. For more
information, see “Debugging JavaScript Code” on page 473.
• To access the Options menu, click the Options Menu button.
The Options menu lists different options for each view. For more information
on Code view options, see “Using the Code view (or Code inspector)” on page
330. For more information on Design view options, see “Designing Page
Layout” on page 167.
Note: When the Document window displays both views, you can access either view’s
Options menu by clicking in the desired view, then clicking the Options menu.
Using context menus
Dreamweaver makes extensive use of context menus, which let you quickly access
the most useful commands and properties related to the object or window you’re
working with. Context menus list only those commands that pertain to the
current selection.
To use a context menu:
1
Right-click (Windows) or Control-click (Macintosh) the object or window.
The context menu for the selected object or window appears.
2
Choose the command from the context menu and release the mouse button.
Dreamweaver Basics
79
Using the Objects panel
The Objects panel contains buttons for creating and inserting objects such
as tables, layers, and images. To show or hide the Objects panel, choose
Window > Objects.
To insert an object:
Click the corresponding Objects panel button or drag the button’s icon into the
Document window. Depending on the object, a corresponding object-insertion
dialog box appears, prompting you to select or insert the file or object you want.
To bypass this dialog box and insert an empty placeholder object:
Hold down the Control (Windows) or Option (Macintosh) key while inserting
the object. (For example, to insert a placeholder for an image without specifying
an image file, hold down Control or Option and click the Image button.)
Note: This does not bypass all dialog boxes. Certain objects such as navigation bars,
layers, Flash buttons, frames, and so on, do not insert placeholders.
The Objects panel contains seven categories by default: Characters, Common,
Forms, Frames, Head, Invisibles, and Special. It also contains buttons that change
the view: Standard and Layout.
80
Chapter 2
• The Characters category contains special characters such as the copyright
symbol, curved quotation marks, and trademark symbols. Note that these
symbols may not display correctly in browsers (Navigator and IE) older than
versions 3.0.
• The Common category contains buttons for creating and inserting the most
commonly used objects, such as images, tables, and layers.
• The Forms category contains buttons for creating forms and inserting
form elements.
• The Frames category contains common frameset structures.
• The Head category contains buttons for adding various head elements, such as
meta, keywords,
and base tags.
• The Invisibles category contains buttons for creating objects that are not visible
in the browser window, such as named anchors. Choose View > Visual Aids >
Invisible Elements to display icons that mark the locations of these objects.
Click invisible-element icons in the Document window to select the objects
and change their properties. See “About invisible elements” on page 156.
• The Special category contains buttons for inserting special items such as Java
applets, plugins, and ActiveX objects. For more information, see .
• The View section of the Objects panel lets you choose between Standard
(default) or Layout view. If Layout view is selected, you can also select the
Layout tools—Draw Layout Cell and Draw Layout Table. For more
information, see “Designing Page Layout” on page 167.
To switch categories, use the pop-up menu at the top of the panel. You can modify
any object in the panel or create your own objects; see “Modifying the Objects
panel” on page 515 and “Creating a simple object” on page 516. For information
on each panel’s options, see the related topics in Dreamweaver Help.
Some of the General preference settings affect the Objects panel. To modify these
preferences, choose Edit > Preferences and then select General.
• When you insert objects such as images, tables, scripts, and head elements, a
dialog box prompts you for additional information. You can suppress these
dialog boxes by turning off the Show Dialog When Inserting Objects option or
by holding down the Control key while creating the object. When you insert
an object with this option off, the object is given default attribute values. Use
the Property inspector to change object properties after inserting the object.
• The Objects panel preference lets you display the contents of the Objects panel
as text only, icons only, or text and icons.
Dreamweaver Basics
81
Using the Property inspector
The Property inspector lets you examine and edit properties for the currently
selected page element. (A page element is an object or text.) You can select page
elements in either the Document window or the Code inspector.
To show or hide the Property inspector, choose Window > Properties.
Most changes you make to properties are immediately applied in the
Document window. (For some properties, changes are not applied until you click
outside the property-editing text fields, press Return, or press Tab to switch to
another property.)
The contents of the Property inspector vary depending on the element
selected. For information on specific properties, select an element in the
Document window and then click the Help icon in the upper right corner of
the Property inspector.
The Property inspector initially displays the most commonly used properties
of the selected element. Click the expander arrow in the lower right corner of
the Property inspector to see more of the element’s properties. (In a few cases,
certain obscure properties may not appear even in the expanded Property
inspector; in these cases, use the Code inspector or Code view to code these
properties by hand.)
Using dockable floating panels
Most of the panels in Dreamweaver can be docked—that is, combined into a
single floating panel with multiple tabs. This makes it easy to access the
information you need without cluttering your workspace. (However, the
Launcher, Property inspector, and Site window cannot be docked.) Also, panels
and inspectors now “snap” automatically to each other, the sides of the screen, or
the Document window. This makes it easier to move and arrange the different
floating panels and windows in Dreamweaver.
82
Chapter 2
To combine two or more panels to create one tabbed panel:
1
Drag the tab (not the title bar) of one floating panel over another floating
panel. When a highlighted border appears around the target panel, release the
mouse button.
2
Click any tab in the tabbed panel to bring the corresponding panel to the front.
History panel tab
History panel being dragged
to the Layers panel
Because the Objects panel does not have a tab, you can’t dock it with another
panel by dragging the Objects panel onto the other panel; however, you can drag
the tab of another panel over the Objects panel to combine them. You can move
tabbed panels back and forth between floating panels, rearranging them to suit
your workflow, by using the process described above.
To remove a panel from a tabbed panel:
Drag its tab out of the window.
Setting Panels preferences
Use Panels preferences to specify which panels and inspectors always appear in
front of the Document and Site windows, and which ones are allowed to be
obscured. You can also use Panels preferences to specify which panels and
inspectors appear in the Launcher and Launcher bar.
To specify where each panel appears in relation to the Document window:
1
Choose Edit > Preferences, then select Panels from the category list.
By default, all windows, panels, and inspectors appear in front of the
Document window.
2
Deselect the windows, panels, and inspectors that you want to place behind the
Document window.
For example, if you want to allow the Document window to obscure the Code
inspector, deselect the Code Inspector option. The Code inspector now appears
in front of the Document window only when it is active.
Similarly, if you want to allow the Document window to obscure any floating
panels that you have added by customizing Dreamweaver, deselect All
Other Floaters.
Dreamweaver Basics
83
About the History panel
The History panel shows a list of all the steps you’ve performed in the active
document since you created or opened that document. (The History panel doesn’t
show steps you’ve performed in other frames, in other Document windows, or in
the Site window.) It allows you to undo one or more steps; it also allows you to
replay steps and to create new commands to automate repetitive tasks.
Steps
Slider (thumb)
Replay button
Copy Steps button Save As Command button
The slider, or thumb, in the History panel initially points to the last step that
you performed.
Using the History panel
The History panel keeps track of every step of your work in Dreamweaver. You
can use the History panel to undo multiple steps at once.
If you want to undo the last operation you performed in a document, choose
Edit > Undo, just as you would do in any other application. (The name of
the Undo command changes in the Edit menu to reflect the last operation
you performed.)
The History panel also lets you replay steps you’ve already performed and
automate tasks by creating new commands. For more information, see “About
automating tasks” on page 160.
84
Chapter 2
To open the History panel:
Choose Window > History.
To undo the last step:
Drag the History panel slider up one step in the list. This has the same effect as
choosing Edit > Undo.
The undone step turns gray.
To undo multiple steps at once, do one of the following:
• Drag the slider to point to any step.
• Click to the left of a step along the path of the slider; the slider scrolls
automatically to that step, undoing steps as it scrolls.
Note: To scroll automatically to a particular step, you must click to the left of the step;
clicking the step itself selects the step. Selecting a step is different from going back to that
step in your undo history.
As with undoing a single step, if you undo a series of steps and then do something
new in the document, you can no longer redo the undone steps; they disappear
from the History panel.
The History panel also allows you to repeat steps that appear in your step history,
and to automate tasks based on steps you’ve performed.See “About automating
tasks” on page 160
Dreamweaver Basics
85
To set the number of steps that the History panel retains and shows:
1
Choose Edit > Preferences and select General from the Category list.
2
Enter a number for Maximum Number of History Steps.
The default value should be sufficient for most users’ needs. The higher the
number, the more memory the History panel requires. This can affect
performance and slow your computer down significantly. When the History
panel reaches this maximum number of steps, the earliest steps are discarded.
Note: You can’t rearrange the order of steps in the History panel. Don’t think of the History
panel as an arbitrary collection of commands; think of it as a way to view the steps you’ve
performed, in the order in which you performed them.
To erase the history list for the current document:
In the History panel’s context menu, choose Clear History.
This command also clears all undo information for the current document; after
choosing Clear History, you will be unable to undo the steps that are cleared.
(Note that Clear History does not undo steps; it merely removes the record of
those steps from Dreamweaver memory.)
Using other Dreamweaver panels
The Dreamweaver work area comprises many other panels. Here are just a few:
The Code inspector shows the code that browsers use to display the document
as a Web page. To show or hide the Code inspector, choose Window >
Code Inspector.
Changes you make in the Document window are immediately reflected in
the Code inspector. When you enter HTML into the Code inspector and then
click outside the inspector, corresponding changes appear in the Document
window. For more information, see “Using the Code view (or Code inspector)”
on page 330.
For minor editing of HTML tags, you can use the Quick Tag Editor instead of the
Code inspector. To display the Quick Tag Editor, press Control+T (Windows) or
Command+T (Macintosh), or choose Modify > Quick Tag Editor. For more
information, see “Editing an HTML tag in the Design view” on page 338.
The Reference panel provides
detailed information about the HTML tag you are
working on, including tag attributes. You can open the Reference panel from the
Window menu, the Launcher bar, or the Code inspector.
For example, you can select an img tag, click the Reference button in the toolbar,
and find out what attributes apply (align, border, and so on). For more
information, see “Using the Dreamweaver Reference panel” on page 328.
The Dreamweaver JavaScript Debugger lets you debug client-side JavaScript. You
can open the JavaScript Debugger from the Window menu. For more
information, see “Debugging JavaScript Code” on page 473.
86
Chapter 2
Working with colors
In Dreamweaver, many of the dialog boxes, as well as the Property inspector for
many page elements, contain a color box, which opens a color picker. Use the
color picker to choose a color for a page element.
To choose a color in Dreamweaver:
1
Click a color box in any dialog box or in the Property inspector.
The color picker appears.
Property inspector
color box
2
Do one of the following:
• Use the eyedropper to select a color swatch from the palette. All colors in the
Color Cubes (default) and Continuous Tone palettes are Web-safe; other
palettes are not.
• Use the eyedropper to pick up a color from anywhere on your screen—even
outside the Dreamweaver windows. (If you click the desktop or another
application, Dreamweaver picks up the color where you clicked, but you
may switch into the other application; in that case, click a Dreamweaver
window to continue working in Dreamweaver, or hold down the mouse
button when moving from Dreamweaver to the desktop to keep from
switching out of Dreamweaver.)
• To expand your color selection, use the pop-up menu at the top right corner of
the color picker. You can select Color Cubes, Continuous Tone, Windows OS,
Mac OS, Grayscale, and Snap to Web Safe.
Note that the Color Cubes and Continuous Tone palettes are Web safe,
whereas Windows OS, Mac OS and Grayscale are not. If you are using a palette
that isn’t Web-safe and then choose Snap to Web Safe, Dreamweaver replaces
the selected color with the closest Web-safe color. In other words, you may not
get the color you see.
• To clear the current color without choosing a different color, click the
Strikethrough button.
• To open the system color picker, click the Color Wheel button.
Dreamweaver Basics
87
About Web-safe colors
In HTML, colors are expressed either as hexadecimal values (for example,
#FF0000) or as color names (red). A Web-safe color is one that appears the same
in Netscape Navigator and Microsoft Internet Explorer on both Windows and
Macintosh systems when running in 256-color mode. The conventional wisdom
is that there are 216 common colors, and that any hexadecimal value that
combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204,
and 255, respectively) represents a Web-safe color.
Testing, however, reveals that there are only 216 Web-safe colors. Internet
Explorer on Windows does not correctly render the colors #0033FF (0,51,255),
#3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0).
The Color Cubes (default) and the Continuous Tone palettes in Dreamweaver use
the 216-color Web-safe palette; selecting a color from these palettes displays the
color’s hexadecimal value.
To choose a color outside the Web-safe range, open the system color picker by
clicking the Color Wheel button in the upper right corner of the Dreamweaver
color picker. The system color picker is not limited to Web-safe colors.
UNIX versions of Netscape Navigator use a different color palette than the
Windows and Macintosh versions. If you are developing exclusively for UNIX
browsers (or your target audience is Windows or Macintosh users with 24-bit
monitors and UNIX users with 8-bit monitors), consider using hexadecimal
values that combine the pairs 00, 40, 80, BF, or FF, which produce Web-safe
colors for SunOS.
Setting preferences
Dreamweaver has preference settings that control the general appearance of the
Dreamweaver user interface as well as options related to specific features such as
layers, style sheets, displaying HTML and JavaScript code, external editors, and
previewing in browsers. Information about specific preference options is provided
throughout this guide in conjunction with the associated feature or topic.
This guide describes only the most common of the preference options.
For information on a specific preference option not covered here, see the
corresponding topic in Dreamweaver Help.
Setting General preferences
The General preferences control the general appearance of Dreamweaver. To
change these preferences, choose Edit > Preferences, and then click General. The
General preferences are divided into two subcategories: File options and Editing
options. For detailed information on these preferences, see Dreamweaver Help.
88
Chapter 2
Setting Fonts/Encoding preferences
Use Fonts/Encoding preferences to set a default font encoding for new documents
and to set the fonts that Dreamweaver uses to display each font encoding. A
document’s encoding determines how the document is displayed in a browser.
Dreamweaver font settings let you work with text in the font and size you prefer
without affecting how the document appears when viewed by others in a browser.
To change the encoding of the current document:
Choose Modify > Page Properties and then select an encoding from the
Document Encoding pop-up menu.
To change the default encoding to be used when creating new documents:
Choose Edit > Preferences, click Fonts/Encoding in the Category list, and choose
an encoding from the Default Encoding pop-up menu.
To set the fonts to use for each type of encoding:
1
Choose Edit > Preferences and click Fonts/Encoding in the Category list.
2
Select the encoding type (such as Western [Latin1] or Japanese) from the Font
Settings list, then choose fonts to use for that encoding from the font pop-up
menus below the Font Settings list.
For more information about Fonts/Encoding preferences, see Dreamweaver Help.
Using Dreamweaver with other applications
Dreamweaver accommodates your Web design and development process by
making it easy for you to work with other applications. For information about
working with other applications such as browsers, HTML editors, image editors,
and animation tools, see the following topics:
• For information about using Dreamweaver with other HTML editors, such as
HomeSite or BBEdit, see “Using external HTML editors” on page 350.
• You can specify preferred browsers for previewing your site. See “Previewing in
browsers” on page 504.
• You can launch an external image editor, such as Macromedia Fireworks, from
within Dreamweaver. See “Using an external image editor” on page 277.
• You can configure Dreamweaver to launch a different editor for each file type.
See “Launching an external editor” on page 298.
• For information about adding animation to your site with Flash movies, see
“About Flash content” on page 300.
• To learn how to add interactivity to your site with Shockwave movies, see
“About Shockwave movies” on page 310.
Dreamweaver Basics
89
Basic Customizing in Dreamweaver
There are some basic techniques you can use to customize Dreamweaver to suit
your needs. For example, by setting preferences, creating your own keyboard
shortcuts, and adding extensions, you can set up your work area without knowing
complex code or editing text files. For more information on advanced customizing
features, see “Customizing Dreamweaver” on page 513.
Using the Keyboard Shortcut Editor
Use the Keyboard Shortcut Editor to create your own shortcut keys, edit existing
shortcuts, or use the predetermined shortcut sets.
To access the Keyboard Shortcut Editor:
Choose Edit > Keyboard Shortcuts.
The Keyboard Shortcut dialog box appears containing several options you can
select and commands you can edit.
Duplicate Set button
Delete Set button
Save as HTML
File button
Rename Icon button
90
Chapter 2
Current Set is
a menu that displays the sets of predetermined shortcuts that are
included with Dreamweaver, and any custom sets you’ve defined. By default, the
current set is the one that Dreamweaver is using in the current doc. The
predetermined sets are listed at the top of the menu. If you are familiar with the
shortcuts found in Dreamweaver 3, you can use them by choosing the
predetermined Dreamweaver 3 set. (In this set, the Dreamweaver 3 set contains
the Dreamweaver 3 shortcuts for Dreamweaver 3 features, and the Dreamweaver
4 shortcuts for features that weren’t in Dreamweaver 3.
Commands is a pop-up menu that lets you select the command category you want
to edit. For example, you can edit menu commands, such as the Open File
command, or one of thee code editing commands, such as Balance Braces.
displays the commands associated with the category you selected
from the Commands pop-up menu, along with the assigned shortcuts. The Menu
and Site Menu commands categories display this list as a tree view that replicates
the structure of the menus. The other categories list the commands by name (for
example, Quit Application).
Command List
Shortcuts window
Press key
displays the list of shortcuts assigned to the selected command.
displays the new key combination you enter.
Plus adds
a new shortcut to the current command. Click Plus (+) to activate the
Shortcuts field. Enter a new key command and click Change to add a new
keyboard shortcut for this command. You can assign two different keyboard
shortcuts for each command.
Minus removes
the selected shortcut from the list of shortcuts.
Change applies
the new shortcut to the command and adds it to the list of
shortcuts.
• Click the Duplicate button to duplicate the current set. You have the option to
name the set or keep the default name (the current set’s name with “copy” suffix).
• Click the Rename button to rename the current set.
• Click the Save as HTML File button to save the current set in an HTML table
format for easy viewing and printing. You can open the HTML file in your
browser and print the shortcuts for easy reference.
• Click the Delete button to delete copies and custom sets. (You cannot
delete active sets.)
Dreamweaver Basics
91
To remove a shortcut from a command:
1
From the Commands pop-up menu, select the command category that
contains the command shortcut you want to remove; for example, Site
Menu Commands.
The Command list displays the commands associated with that category.
2
From the Command list, select the command shortcut you want to remove.
You’ll see a list of shortcuts assigned to the commands.
3
Select the shortcuts you want to remove.
4
Click the Minus (-) button.
To add a shortcut to a command:
1
Select the command category that contains the command you want.
The Command list displays the commands associated with that category.
2
Select the command from the Command list.
You’ll see any shortcuts already assigned to the command in the Shortcuts list.
3
Click the Plus (+) button. The Shortcuts entry field activates and the insertion
point moves to the Press Key field.
4
Press the key combination you want to add; the key combination appears in the
Press Key Field.
If there is a problem with the shortcut—for example, if the key combination is
already assigned to another command—an alert appears letting you reassign
the key combination or cancel.
5
Click Change. The new key combination is assigned to the command.
To edit an existing shortcut:
1
Select the command category that contains the command you want.
The Command list displays the commands in the chosen category.
2
Select the command from the Command list.
You’ll see the shortcuts already assigned to the command in the Shortcuts field.
If more than one shortcut is assigned to a command, you’ll need to select the
one you want to change.
3
Click in the Press Key field and type the desired key combination.
4
Click the Change button to change the shortcut.
Note: If there is a problem with the key combination, an explanatory message is displayed
just below the Shortcuts field and you may be unable to add, delete, or edit the shortcut.
For example, if the key combination is already assigned to another command, warning text
is displayed just below the Shortcuts field.
92
Chapter 2
Adding extensions to Dreamweaver
Extensions are new features that you can add easily to Dreamweaver 4. You can use
many types of extensions; for example, there are extensions that let you reformat
tables, connect to back-end databases, or help you write scripts for browsers.
To find the latest extensions for Dreamweaver, use the Macromedia Exchange
Web site at http://www.macromedia.com/exchange/dreamweaver/. Once there,
you can log in and download extensions (many of which are free), join discussion
groups, view user ratings and reviews, and install and use the Package Manager.
You must install the Package Manager before you can download extensions.
The Package Manager runs in conjunction with Dreamweaver and lets you install
and manage extensions. After you’ve downloaded and installed the Package
Manager from the Exchange site, launch the Package Manager directly from
Dreamweaver by choosing Manage Extensions from the Commands menu.
Dreamweaver Basics
93
To install and manage extensions:
1
Click the download link found at the Web site for the extension you want.
You can choose to open and install it directly from the site or save it to disk.
• If you are opening it directly, the Package Manager handles the installation
automatically.
• If you are saving it to disk, save the extension package file (.mxp) to the
Downloaded Extensions folder within the Dreamweaver folder on your
computer. (For example, My Computer\c:\Program
Files\Macromedia\Dreamweaver 4\Configuration\Extensions.)
2
Double-click the extension package file or choose Install Extension from the
Package Manager File menu.
The file will be installed in Dreamweaver. Some extensions aren’t accessible
until Dreamweaver has restarted; you may be prompted to quit and restart
the application.
Use the Package Manager to remove extensions or to see more information
about the extension.
94
Chapter 2
3
CHAPTER 3
Planning and Setting Up Your Site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A Web site is a set of linked documents with shared attributes, such as related
topics, a similar design, or a shared purpose.
Macromedia Dreamweaver is a site creation and management tool, so you can use
it to create complete Web sites, in addition to individual documents. For best
results, design and plan your Web site before you create any of the pages that the
site will contain.
Note: If you can’t wait to start creating documents immediately, you can try out some of the
Dreamweaver document-creation tools and make a sample document. (See “Creating,
opening, and saving HTML documents” on page 150.) But don’t start serious document
development until you’ve set up a site.
The first step in creating a Web site is planning. See “About site planning and
design” on page 95. The next step is to set up the basic structure of the site; see
“Using Dreamweaver to set up a new site” on page 102. If you already have a site
on a Web server and you want to begin using Dreamweaver to edit that site, see
“Setting up a remote site” on page 123.
About site planning and design
In Dreamweaver, the term site can refer either to a Web site or to a local storage
location for the documents belonging to a Web site. When you begin thinking
about creating a Web site, you should follow a series of planning steps to make
sure your site succeeds. Even if you are just creating a personal home page that
only friends and family will see, it can still be to your advantage to plan the site
carefully in order to make sure everyone will be able to use it successfully.
95
Determining your goals
Deciding what your site goals are is the very first step you should take when you
create a Web site. Ask yourself or your client questions about the site. What do
you hope to accomplish by having a Web site? Write down your goals so that you
remember them as you go through the design process. Goals help you focus and
target your Web site to your particular needs.
A Web site that provides news about a specific subject should have a very different
look and navigation than a Web site that will sell products. The complexity of
your goals will affect the navigation, the media that you use (Flash, Director, and
so on), and even the look and feel of your site.
Choosing a target audience
After you have decided what you want to accomplish with your Web site, you
need to decide who you want to visit your site. This may seem to be a silly
question, since most people want everyone to visit their Web site. However, it is
difficult to create a Web site that every single person in the world will be able to
use. People use different browsers, connect at different speeds, and may or may
not have media plug-ins. All these factors can affect the use of your site. That is
why you need to determine a target audience.
Think about the people who will be attracted to your Web site, or who you hope
to attract. What kinds of computers do you think they will be using, what
platform might be the dominant one (Macintosh, Windows, Linux, and so on)?
What is the average connection speed (33.6 modem or DSL)? What kinds of
browsers and monitor sizes will they be using? Are you creating an intranet site
where everyone will be using the same computer OS and browser? All of these
factors can greatly affect the way your Web page appears to visitors.
Once you choose the audience and have determined what types of computers,
connection speeds, and browsers they will be using, you can target your design.
For example, say your target audience is predominantly Windows users with 17inch monitors and using Internet Explorer 3.0 or above. As you design your Web
page, you should test that your site works best in Microsoft Internet Explorer on a
Windows computer with a screen size of 800 x 600 pixels. Fewer viewers may use
Netscape Navigator on a Macintosh platform, but you should also make sure your
site still works on those machines, although it may not display as precisely as it
does for your target audience.
96
Chapter 3
Creating sites for browser compatibility
As you create your site, you should be aware of the variety of Web browsers your
visitors are likely to use. Where possible, design sites for maximum browser
compatibility, given other design constraints.
There are over two dozen different Web browsers in use, most of which have been
released in more than one version. Even if you target only Netscape Navigator and
Microsoft Internet Explorer, which are used by the majority of Web users, be
aware that not everyone uses the very latest versions of those browsers. If your site
is on the Web, sooner or later someone will visit it using Netscape Navigator
2.0—or the browser that AOL provides its customers, or a text-only browser
such as Lynx.
There are some circumstances under which there’s no need to create crossbrowser-compatible sites. For example, if your site is available only on your
company’s intranet, and you know that all of your company’s employees use the
same browser, you can optimize your site to rely on features of that browser.
Similarly, if you’re creating HTML content to be distributed on CD-ROM, and
you distribute a browser on the CD, you can assume that all of your customers
have access to that particular browser.
Under most circumstances, for Web sites designed for public viewing, it’s a
good idea to make your site viewable in as many browsers as possible. Pick one
or two browsers as your target browsers, and design the site for those browsers,
but try exploring the site in other browsers now and then to avoid including too
much incompatible content. You can also post a message on a discussion board
to ask others to view your site. This can be a good way to get feedback from a
wide audience.
The more sophisticated your site is—in terms of layout, animation, multimedia
content, and interaction—the less likely it is to be cross-browser compatible. Not
all browsers can run JavaScript, for example. A page of plain text that uses no
special characters will probably display well in any browser, but such a page may
have much less aesthetic appeal than one that uses graphics, layout, and
interaction effectively. Try to strike a balance between designing for maximum
effect and designing for maximum browser compatibility.
One useful approach is to provide multiple versions of certain important pages,
such as your site’s home page. For example, you can design both a framed version
and a frameless version of such a page. You can then include in your Web page a
behavior that automatically shifts visitors without frame-capable browsers to the
frameless version. For more information, see “Using the behavior actions that
come with Dreamweaver” on page 444.
Planning and Setting Up Your Site
97
Organizing the site structure
Organizing your site carefully from the start can save you frustration and time later
on. If you begin creating documents without thinking about where in your folder
hierarchy they should go, you may end up with a huge, unwieldy folder full of files,
or with related files scattered through a half-dozen similarly named folders.
The usual way to set up a site is to create a folder on your local disk that contains
all the files for your site (referred to as the local site), and to create and edit
documents within that folder. You then copy those files to a Web server when you
are ready to publish your site and allow the public to view it. This approach is
better than creating and editing files on the live public Web site itself, because it
allows you to test changes in the local site before making them publicly viewable,
and then when you’re finished, you can upload the local site files and update the
entire public site at once.
See “Using Dreamweaver to set up a new site” on page 102 to coordinate your
local site with Dreamweaver. Once you set up the local site with Dreamweaver,
you are better able to manage your site files, track links, update pages, and more.
Break down your site into categories. Put
related pages in the same folder. For
example, your company press releases, contact information, and job postings
might all go in one folder, and your online catalog pages in another folder. Use
subfolders where necessary. This type of organization will make your site easier to
maintain and navigate.
98
Chapter 3
Decide where to put items such as images and sound files. It’s convenient to place
all your images, for example, in one location, so that when you want to insert an
image into a page you know where to find it. Designers sometimes place all of the
non-HTML items to be used on a site in a folder called Assets. That folder may
contain other folders—for example, an Images folder, a Shockwave folder, and a
Sound folder. Or you might have a separate Assets folder for each group of related
pages on your site, if there aren’t many assets shared among such groups.
Site 1
Site 2
my_site1 (root folder)
my_site2 (root folder)
About_the_Company
Catalog
About_the_Company
Assets
Assets (for whole site)
index.html (home page)
Catalog
Assets
index.html (home page)
Use the same structure for local and remote sites. Your
local site and your remote
Web site should have exactly the same structure. If you create a local site using
Dreamweaver and then upload everything to the remote site, Dreamweaver
ensures that the local structure is precisely duplicated in the remote site.
Planning and Setting Up Your Site
99
Creating your design look
You save a lot of time later in the process if you plan your design and layout before
you actually begin working in Dreamweaver. It can be as simple as creating a
mock-up drawing of how you want the site layout to look on a piece of paper. A
more advanced approach would be to create a composite drawing of your site
using software such as Macromedia Freehand or Fireworks. The important thing
is to have a mock-up of your layout and design so you can follow it later as you
build your site.
It is important to maintain consistency in your page layout and design. You want
users to be able to click through the pages in your site without getting confused
because all the pages have a different look, or the navigation is in a different place
on each page.
Designing the navigation scheme
Another area where planning pays off is navigation. As you design your site, think
about the experience you want your visitors to have. Think about how a visitor to your
site will be able to move from one area to another. Consider the following points:
“You are here.” Visitors should easily know where they are in your site and how to
return to your top-level page.
Searching and indexes make
it easy for visitors to find any information they
are looking for.
Feedback provides
a way for visitors to contact the webmaster (if appropriate) if
something is wrong with the site, and to contact other relevant people associated
with the company or the site.
Design the way your navigation will look. Navigation should be consistent
throughout your site. If you place a navigation bar across the top of your home
page, try to keep it there for all the linked pages.
Dreamweaver has two navigation tools that you can use to create your navigation
scheme. For more information, see “Linking and Navigation” on page 353.
100
Chapter 3
Planning and gathering your assets
Once you know what your design and layout will look like, you can create and
gather the assets that you will need. Assets can be items such as images, text, or
media (Flash, Shockwave, and more). Make sure you have all of these items
gathered and ready to go before you begin developing your site. Otherwise, you’ll
have to continually stop development to find an image or to create a button.
If you are using images and graphics from a clip-art site or someone else is creating
them, make sure you collect them and put them in a folder on your site (see
“Organizing the site structure” on page 98). If you are creating the assets yourself,
make sure you create them all before you start development, including any images
you need if you are using roll-overs. Then organize your assets so you can access
them easily while creating your site in Dreamweaver.
Dreamweaver can make it easier for you to reuse page layouts and page elements
in various documents by using templates and libraries. However, it is easier
to create new pages with templates and libraries than it is to apply them to
existing documents.
Use templates if
many of your pages will use the same layout. Plan and design a
template for that layout, and then you can create new pages based on that
template. If you decide to change the layout for all the pages, you can simply
change the template.
Note: There are certain restrictions on what changes you can make to documents that are
based on templates. Templates are best used in collaborative environments, to ensure that
everyone is using the same page layout. Library items may provide more flexibility for use
outside of collaborative environments.
Use library items if
you know that a certain image or other content will appear on
many pages throughout your site; design that content ahead of time and make it a
library item. Then if you change that item later, the updated version appears on all
pages that use it.
For more information on reusing page layouts and elements, see “Reusing
Content with Templates and Libraries” on page 375.
Planning and Setting Up Your Site
101
Using Dreamweaver to set up a new site
Once you create your site structure (see “Organizing the site structure” on page
98), you must designate the new site in Dreamweaver. Setting up this local site in
Dreamweaver means that you can use Dreamweaver with FTP to upload your site
to the Web server, automatically track and maintain your links, and
collaboratively share files. It is best to set up your local site in Dreamweaver before
you begin creating your pages.
The local site is the site structure that you set up on your computer to contain all
your folders, assets, and files for a particular site (see “Organizing the site
structure” on page 98).
The local root folder of your site should be the folder you set up specifically for
that site. One good organizational approach is to create a folder named Sites, and
then create local root folders inside that folder, one local root folder for each site
you’re working on.
To create a new site:
1
Choose Site > New Site.
In the Site Definition dialog box that appears, the Local Info category
is selected.
102
Chapter 3
2
Enter the following options:
• In the Site Name field, enter a name for the site. The site name appears in the
Site window and on the Site > Open Site submenu. Use any name you like, it
will not appear in the browser and is only for your reference.
• In the Local Root Folder field, specify the folder on your local disk where site
files, templates, and library items will be stored. When Dreamweaver resolves
root-relative links, it does so relative to this folder (see “Root-relative paths” on
page 357). Click the folder icon to browse to and select the folder, or enter a
path and folder name in the text field. If the local root folder does not yet exist,
create it from within the file-browsing dialog box.
• For the Refresh Local File List Automatically option, indicate whether or not to
automatically refresh the local file list every time you copy files into your local
site. Deselecting this option improves the speed of Dreamweaver when copying
such files, but when this option is deselected, the Local pane of the Site window
does not automatically refresh. To manually refresh the Site window, click the
Site window’s Refresh button. To manually refresh the Local pane only, choose
View > Refresh Local in the Site window (Windows) or Site > Site Files View >
Refresh Local (Macintosh).
• In the HTTP Address field, enter the URL that your completed Web site
will use, so that Dreamweaver can verify links within the site that use
absolute URLs. (See “Checking links in a page or site” on page 506.)
For example, the absolute HTTP address for the Macromedia Web site is
http://www.macromedia.com.
• For the Cache option, indicate whether or not to create a local cache to
improve the speed of link and site management tasks. If you do not select this
option, Dreamweaver will ask you if you want to create a cache again before it
creates the site. It is a good idea to select this option because the Assets panel
only works if a cache is created. For more information about the Assets panel,
see “Managing and Inserting Assets” on page 221.
3
Click OK.
The Site Files window opens. For more information about the site window and
site management, see “Site Management and Collaboration” on page 107.
Later, when you’re ready to publish the site on a remote server, you will need to
add additional information about the site. For information about remote sites, see
“Setting up a remote site” on page 123.
Planning and Setting Up Your Site
103
Editing an existing Web site
You can use Dreamweaver to edit an existing site on your local disk, even if you
didn’t use Dreamweaver to create the original site.
To edit an existing Web site:
1
Choose Site > Define Sites and click New, or choose Site > Open Site >
Define Sites.
In the Site Definition dialog box that appears, the Local Info category
is selected.
2
Enter the following options:
• In the Site Name field, enter a name for the site. The site name appears in the
Site window and on the Site > Open Site submenu. Use any name you like, it
will not appear in the browser and is only for your reference.
• In the Local Root Folder field, specify the folder on your local disk where
the existing site files, templates, and library items are stored. Click the folder
icon to browse to and select the folder, or enter a path and folder name in
the text field.
• For the Refresh Local File List Automatically option, indicate whether or not to
automatically refresh the local file list every time you copy files into your local
site. Deselecting this option improves the speed of Dreamweaver when copying
such files, but when this option is deselected, the Local pane of the Site window
does not automatically refresh. To manually refresh the Site window, click the
Site window’s Refresh button. To manually refresh the Local pane only, choose
View > Refresh Local in the Site window (Windows) or Site > Site Files View >
Refresh Local (Macintosh).
• In the HTTP Address field, enter the URL that your completed Web site
will use, so that Dreamweaver can verify links within the site that use
absolute URLs. (See “Checking links in a page or site” on page 506.)
For example, the absolute HTTP address for the Macromedia Web site is
http://www.macromedia.com.
• For the Cache option, indicate whether or not to create a local cache to
improve the speed of link and site management tasks. If you do not select this
option, Dreamweaver will ask you if you want to create a cache again before it
creates the site. It is a good idea to select this option because the Assets panel
only works if a cache is created. For more information about the Assets panel,
see “Managing and Inserting Assets” on page 221.
3
Click OK.
The Site Files window opens. For more information about the site window and
site management, see “Site Management and Collaboration” on page 107.
104
Chapter 3
Editing a remote site
You can use Dreamweaver to copy an existing remote site (or any branch of a
remote site) to your local disk and edit it there, even if you didn’t use
Dreamweaver to create the original site.
Note that even if you intend to edit only part of the remote site, you must locally
duplicate the entire structure of the relevant branch of the remote site, from the
remote site’s root folder down to the files you want to edit. For example, if your
remote site’s root folder, named public_html, contains two folders, Project1 and
Project2, and if you want to work only on the HTML files in Project1, you don’t
need to download the files in Project2, but you must map your local root folder to
public_html, not to Project1.
Remote site
Local site
public_html
local root folder
(map this to public_html, not to
Project1 or Project1/HTML)
Project1
Assets
HTML
Project1
(must be present on local
site; corresponds to Project1
on remote site)
HTML
(must be present on
local site; corresponds
to Project1/HTML on
remote site)
Project2
Assets
HTML
Planning and Setting Up Your Site
105
To edit an existing remote site:
1
Create a local folder to contain the existing site, then set it up as the local root
folder for the site (see “Using Dreamweaver to set up a new site” on page 102).
2
Set up a remote site, using information about your existing site. See “Setting up
a remote site” on page 123. Be sure to choose the correct root folder for
the remote site.
3
Connect to the remote site using the Connect button in the Site window.
4
Depending on how much of the remote site you want to edit, do one of
the following:
• If you want to work with the entire site, select the root folder of the remote site,
and click Get to download the entire site to your local disk.
• If you want to work with just one of the files or folders of the site, locate the file
or folder in the Remote pane of the Site window, and click Get File(s) to
download that file to your local disk. (Dreamweaver automatically duplicates as
much of the remote site’s structure as is necessary to place the downloaded file
in the correct part of the site hierarchy.) When editing only one part of a site,
you should generally choose to include dependent files.
5
Proceed as if creating a site from scratch: edit documents, preview and test
them, and upload them again to the remote site.
For more information about site management, see “Site Management and
Collaboration” on page 107.
Removing a site from your list of sites
If you no longer want to work with a site in Dreamweaver, you can remove the site
from your list of sites. The files in the site are not removed.
Note: When you remove a site from the list, all setup information about the site is
permanently lost.
To remove a site from your site list:
1
Choose Site > Define Sites.
2
Select a site name.
3
Click Remove.
A dialog box appears asking you to confirm the removal.
4
106
Chapter 3
Click Yes to remove the site from your list.
4
CHAPTER 4
Site Management and Collaboration
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Macromedia Dreamweaver helps you organize the files in your local and remote
sites using the Site window. It lets you duplicate the structure of your local site on
a remote server, or duplicate a remote Web site’s structure on your local system.
The relative links you create on your local site continue to work after you transfer
files to the remote site, because the structure of the two sites is identical.
You create a local site in Dreamweaver by using the New Site command to create a
local root folder for the site (or by making an existing folder into the local root
folder); see “Using Dreamweaver to set up a new site” on page 102. You define a
remote site when creating a new site, or add that information later using the Define
Sites command; see “Associating a remote server with a local site” on page 124.
Dreamweaver includes a number of features for structuring a site and transferring
files to and from a remote server. When you transfer files between local and
remote sites, Dreamweaver maintains parallel file and folder structures between
them. When transferring files between sites, Dreamweaver automatically creates
necessary folders when they do not yet exist in a site. You can also synchronize the
files between your local and remote sites; Dreamweaver copies files in both
directions as necessary, and removes unwanted files as appropriate.
Dreamweaver contains features to make collaborative work on a Web site easier.
You can check files in and out of a remote server so that other members of a Web
team can see who is working on a file. You can add Design Notes to your files to
share information with team members about a file’s status, priority, and so on. You
can also use the Workflow Reports feature to run reports on your site to display
information on the check in/check out status, and to search for Design Notes
attached to files.
Dreamweaver can be integrated with some of the most popular source- and
version-control applications. For source-control integration, you can connect to
SourceSafe databases and other source-control systems that support the WebDAV
protocol. (Note, however, that Dreamweaver does not perform version control.)
107
Once you’ve published your site, you or someone on your team can continue to
maintain it using these same tools. Before and after publishing, you’ll also want to
troubleshoot your site on a continual basis. For more information, see “Testing
and Publishing a Site” on page 501.
About the Site window
Use the Site window for standard file maintenance operations, such as creating
new HTML documents; viewing, opening and moving files; creating folders; and
deleting items. You can also use the Site window to transfer files between local and
remote sites, and you can lay out your site navigation using the site map (see
“Setting up a remote site” on page 123 and “Using the site map” on page 117.)
By default, the remote site or site map appears in the left pane, and the local site
appears in the right pane. You can change this setting in Site preferences. See
“Setting Site preferences” on page 110.
Using Site window controls
To open the Site window, choose Window > Site Files. Use the following buttons
and options on the Site window toolbar to set what the Site window displays and
to transfer files back and forth between a local and remote site:
108
Chapter 4
Site Files view displays the file structure of the remote and local sites in the panes
of the Site window. (Which site is displayed in which pane, right or left, is
determined by preference settings; see “Setting Site preferences” on page 110.) Site
Files view is the default view for the Site window.
Site Map view displays
a graphical map of your site based on how the documents
are linked to one another. Hold this button down to choose Map Only or Map
and Files from the pop-up menu.
The site pop-up menu lists sites you’ve defined. To switch sites, choose a different site
from the list. To add a site or edit the information for an existing site, choose Define
Sites from the bottom of the menu (see “Setting up a remote site” on page 123).
Connect/Disconnect (available with FTP and WebDAV protocol and SourceSafe)
connects to or disconnects from the remote site. By default, Dreamweaver
disconnects from the remote site if it has been idle for more than 30 minutes
(FTP only). To change the time limit, choose Edit > Preferences and select Site.
Refresh refreshes the local and remote directory lists. Use this button to manually
refresh the directory lists if you deselected either Refresh Local File List Automatically
or Refresh Remote File List Automatically in the Site Definition dialog box (see
“Associating a remote server with a local site” on page 124). For example, if you
mount a drive that contains a remote site after you open the Site window, you won’t
see that remote site’s directory list until you click the Refresh button.
Get File(s) copies
the selected files from the remote site to your local site
(overwriting the existing local copy of the file, if any). If Enable File Check In and
Check Out is turned on, the local copies are read-only; the files remain available
on the remote site for other team members to check out. If Enable File Check In
and Check Out is turned off, getting a file transfers a copy that has both read and
write privileges. Note that the files copied are the ones selected in whichever pane
of the Site window is currently active. If the Remote pane is active, the selected
remote files are copied to the local site; if the Local pane is active, the remote
versions of the selected local files are copied to the local site. See “Getting files
from a remote server” on page 143.
Put File(s) copies the selected files from the local site to the remote site. Note that the
files copied are the ones selected in whichever pane of the Site window is currently
active. If the Local pane is active, the selected local files are copied to the remote site;
if the Remote pane is active, the local versions of the selected remote files are copied
to the remote site. See “Putting files onto a remote server” on page 144.
Note: If you are adding a file that doesn’t already exist on the remote site and Enable File
Check In and Out is on, the file will be added to the remote site as “checked out.” Choose
the Check In Files option instead to add a file without the checked out status.
Site Management and Collaboration
109
Check Out File(s) transfers
a copy of the file from the remote server to your local
site (overwriting the existing local copy of the file, if any) and marks the file as
checked out on the server. This option is not available if Enable File Check In and
Check Out is turned off for the current site. See “Checking in and checking out
files on a remote server” on page 133.
Check In File(s) transfers a copy of the local file to the remote server and makes the
file available for editing by others. The local file becomes read-only. This option is
not available if the Enable File Check In and Check Out option in the Site
Definitions dialog box is turned off for the current site. See “Checking in and
checking out files on a remote server” on page 133.
Stop Current Task aborts
any current activity, including getting and putting files.
The button, a red stop-sign (octagon) shape with a white X, appears in the lower
right corner of the window only when a task is in progress. Note that it may take a
little time for the server to process the stop request, so the file transfer may not
halt immediately. This button appears only when a task is in progress.
triangle button in the lower left of the Site window lets you
collapse or expand the Site window to display one or two panes.
The collapse/expand
Setting Site preferences
Choose Edit > Preferences and select Site, then choose from the following Site
preferences to control file-transfer features available in the Site window.
110
Chapter 4
Always Show specifies
which site (remote or local) is always shown, and in which
Site window pane (left or right) the local and remote files appear. By default, the
local site always appears on the right. Whichever pane is not chosen (the left one
by default) is the changeable pane: this pane can display either the site map or the
files in the other site (the remote site by default).
Dependent Files displays
a prompt for transferring dependent files (such as
images, external style sheets, and other files referenced in the HTML file) that the
browser loads when it loads the HTML file. By default, both Prompt on Get/
Check Out and Prompt on Put/Check In are selected.
Note: To force the Include Dependent Files prompt to appear even when these options are
deselected, hold down Alt (Windows) or Option (Macintosh) while choosing the Get, Put,
Check In, or Check Out commands.
FTP Connection determines
whether the connection to the remote site is
terminated after the specified number of minutes have passed with no activity.
FTP Time Out specifies
the number of seconds in which Dreamweaver attempts to
make a connection with the remote server. If there is no response after the
specified amount of time, Dreamweaver displays a warning dialog box alerting
you to this fact.
Firewall Host specifies
the address of the proxy server through which you connect
to outside servers if you are behind a firewall. If you are not behind a firewall,
leave this space blank.
Note: If you are behind a firewall, select the Use Firewall option in the Site Definition dialog
box. See “Associating a remote server with a local site” on page 124.
Firewall Port specifies
the port in your firewall through which you pass to connect
to the remote server. If you connect through a port other than 21 (the default for
FTP), enter the number here.
Put Options: Save Files Before Putting indicates that unsaved files are saved
automatically before being put onto the remote site.
Define Sites brings up the Define Sites dialog box, where you can edit an existing site
or create a new one. See “Associating a remote server with a local site” on page 124.
You can also define whether the types of files that you want to transfer should
be transferred as ASCII (text) or binary. To do so, open the FTPExtensionMap.txt
file in the Dreamweaver/Configuration folder (on the Mac, FTPExtensionMapMac.txt).
You can modify and delete the list of which file types are transferred in each
format, as well as add your own file types. If a file’s extension is not defined in this
file, Dreamweaver automatically transfers the file in binary mode.
Note: On the Macintosh, the FTPExtensionMapMac.txt file also contains information
about mapping file extensions to Macintosh creators and file types. This mapping allows a
downloaded file to be given the correct icon and to be opened by the correct application
when you double-click the file in the Finder.
Site Management and Collaboration
111
Note that when a file is transferred as ASCII, your Line Breaks preference setting
is ignored. See “Setting code formatting preferences” on page 343.
Viewing and opening files in the
Site window
Use the Site window for viewing local and remote sites, adding or removing site
documents, or laying out the navigational structure of your site with a site map.
For more information, see “About the Site window” on page 108.
You can set each of the two Site window views to show the local site, the remote
site, or a graphical map of the local site. For example, you can view the local site in
one pane and the remote site in the other, or you can view the local site in Site
Files view in one pane and Site Map view in the other. (For information on
viewing site maps, see “About the site map” on page 116.)
Viewing local sites
The Site window can display the contents of both local and remote sites. Local
sites can be viewed in the Site window as a list of files, a visual map, or both.
Remote sites can be viewed as a list of files only. (Before you can view a remote
site, you must set one up; see “Setting up a remote site” on page 123.)
To view local site files, do one of the following:
• Choose Window > Site Files.
• In the Site window, if the site map is showing, click the Site Files button.
The Site window displays two sets of files: one side of the window lists the files
in your local site, and one side lists the associated remote site files.
Note: If you are viewing a local site that has no corresponding remote site, the Remote
Site view is empty.
112
Chapter 4
To view the site map and the site files, do one of the following:
• Choose Window > Site Map. (If you previously viewed the map only, without
the site’s files, this displays the map only.)
• In the Site window, click the Site Map button, or hold down the mouse button
with the pointer over the Site Map button and select Map and Files from the
pop-up menu.
The Site window displays two views: the local site as a map, labeled Site
Navigation; and, depending on how you set your preferences, either the local
site files (labeled Local Folder) or the remote site files (labeled Remote Site).
To view only the site map:
Hold down the mouse button with the pointer over the Site Map button and
select Map Only from the pop-up menu. For more information, see “Using the
site map” on page 117.
Site Management and Collaboration
113
Changing Site window layout
By default, the remote site (or the local site map) appears on the left side of
the Site window and the local site appears on the right. You can switch
these displays.
To change the Site window layout:
1
Choose Edit > Preferences and select the Site category.
2
Do either of the following:
• Select Local Files from the Always Show menu, and then choose whether to
display the local files on the right or left side of the Site window.
The local site appears on the side you have selected, and the remote site (or the
site map) appears on the opposite side. When you choose this option, the local
site files view is always shown in the Site window, even when you collapse the
window to one pane.
• Select Remote Files from the Always Show menu, and then choose whether to
display the remote files on the right or the left.
The remote site appears on the side you have selected, and the local site (or the
site map, which is always local) appears on the opposite side. When you choose
this option, the remote site files view is always shown in the Site window, even
when you collapse the window to one pane.
3
Click OK to apply changes and close the Preferences dialog box.
To change the view area:
In the Site window, do one of the following:
• Drag the bar that separates the two views to increase or decrease the view area
of the right or left window.
• Use the scroll bars at the bottom of the Site window to scroll through the
views’ contents.
• In the site map, drag the arrow above a file to change the space between files.
To collapse the Site window to one view:
Click the small white triangle button in the lower left of the Site window.
Note: The view that remains visible is the one you chose to always show in the Site
preferences dialog box.
For more information about site preferences, see “Setting Site preferences” on
page 110.
114
Chapter 4
Working with files in the Site Files view
Use the Site Files view to view local and remote sites as lists of files, to open files,
to rename files, to add new folders or files to a site, or to refresh the view of a site
after changes have been made. You can also use Site Files view to determine which
files (on either site) have been updated since the last time they were transferred.
For information on synchronizing the local site with the remote site, see
“Synchronizing the files on your local and remote sites” on page 146.
To view the site files:
Do one of the following:
• Choose Window > Site Files to open the Site window in Site Files view.
• In the Site window, click the Site Files button.
To open a file from the Site Files view:
Double-click the file’s icon.
To add a new folder to a site:
1
Make sure a file or folder is selected in the Site window; the new folder is
created inside the current selected folder, or in the same folder as the
current selected file.
2
Choose File > New Folder in the Site window (Windows) or Site > Site Files
View > New Folder (Macintosh).
You can also access this option from the context menu within the Site window.
3
Enter a name for the new folder.
To add a new file to a site:
1
Make sure a file or folder is selected in the Site window; the new file is
created inside the current selected folder, or in the same folder as the
current selected file.
2
Choose File > New File in the Site window (Windows) or Site > Site Files
View > New File (Macintosh).
You can also access this option from the context menu within the Site window.
3
Enter a name for the new file.
Site Management and Collaboration
115
To rename a file or folder in a site:
1
In the Site window, select the file or folder you want to rename and do one of
the following to activate the name field next to the file or folder:
• Choose File > Rename (Windows) or Site > Rename (Macintosh)
• Click on the file, pause, then click again.
2
Type in the new name and press Enter.
To refresh the Site Files view after making changes outside of Dreamweaver:
Do one of the following:
• Choose View > Refresh Local in the Site window(Windows) or Site > Site Files
View > Refresh Local (Macintosh).
• Choose View > Refresh Remote in the Site window (Windows) or Site > Site
Files View > Refresh Remote (Macintosh).
• Click the Refresh button in the Site window to refresh both panes.
To locate and select checked out files:
Choose Edit > Select Checked Out Files in the Site window (Windows) or Site >
Site Files View > Select Checked Out Files (Macintosh).
To locate and select newer local files:
Choose Edit > Select Newer Local in the Site window (Windows) or Site > Site
Files View > Select Newer Local (Macintosh).
To locate and select newer remote files:
Choose Edit > Select Newer Remote in the Site window (Windows) or Site > Site
Files View > Select Newer Remote (Macintosh).
For more information about working with local and remote sites, see “Using
Check In/Check Out” on page 131.
About the site map
Use the site map to view a local site as a visual map of linked icons, to add new
files to a site, or to add, modify, or remove links. The site map is ideal for laying
out a site structure. You can quickly set up the entire structure of the site and then
create a graphic image of the site map.
Note: The site map applies to local sites only. If you want to create a map of a remote site,
copy the contents of the remote site into a folder on your local disk and use the Define
Sites command to define the site as a local site.
116
Chapter 4
Using the site map
You must define a home page for your site before you can display the site map.
The site’s home page is the starting point of the map.
To define a home page for your site:
1
Choose Site > Define Sites.
2
Choose New or Edit to define a new site or open an existing one.
The Site Definition dialog box appears.
3
Select Site Map Layout.
4
Click the folder icon to browse for a home page for the site, or type a file path
in the Home Page field.
To view a site map, do one of the following:
• Choose Window > Site Map to open the Site window.
• In the Site window, click the Site Map button.
Note: If no home page has been defined, or if Dreamweaver can’t find an index.html or
index.htm page in the current site to use as the home page, a dialog box appears
prompting you to select a home page by clicking Define Sites. Choose the site you want,
then click Edit. Then select Site Map Layout in the Site Definition dialog box.
The site map shows HTML files and other page content as icons. Links are
displayed in the order in which they are encountered in the HTML source code.
• Text displayed in red indicates a broken link.
• Text displayed in blue and marked with a globe icon indicates a file on another
site or a special link (such as an e-mail or script link).
• A green check mark indicates a file checked out by you.
• A red check mark indicates a file checked out by someone else.
• A lock icon indicates a file that is read-only (Windows) or locked (Macintosh).
Site Management and Collaboration
117
By default, the site map displays the site structure two levels deep, starting from
the current home page. Click the plus (+) and minus (-) signs next to a page to
show or hide pages linked below the second level.
By default, hidden files and dependent files are not displayed in the site map.
Hidden files are HTML files marked as hidden. Dependent files are non-HTML
page content such as images, templates, Shockwave files, or Flash files. See
“Modifying the site map layout” on page 118 and “Showing and hiding site map
files” on page 121.
Modifying the site map layout
Use the Site Map Layout options to customize the appearance of your site map.
You can specify the home page, the number of columns displayed, whether the
icon labels display the file name or the page title, and whether to show hidden and
dependent files.
To modify the site map layout:
1
Open the Site Definition dialog box using one of these methods:
• Choose Site > Define Sites and then click Edit. Select Site Map Layout in the
Category list on the left.
• Choose View > Layout (Windows) or Site > Site Map View > Layout
(Macintosh).
2
Click the folder icon to browse for a home page for the site, or type a file path
in the Home Page field. The home page must be on the local site.
If you don’t specify a home page—and Dreamweaver cannot find a file called
index.html or index.htm at the root—Dreamweaver will prompt you to select a
home page when you open the site map.
118
Chapter 4
3
Choose from the Column options:
• In the Number of Columns field, type a number to set the number of pages to
display per row in the site map window.
• In the Column Width field, type a number to set the width in pixels of the
site map columns.
4
Under Icon Labels, select whether the name displayed with the document icons
in the site map is represented as a file name or as a page title.
5
Under Options, select which files to display in the site map:
• Choose Display Files Marked as Hidden to display HTML files that are
marked as hidden by the user in the site map. If a page is hidden, its name and
links are displayed in italics. For information about hiding files, see “Showing
and hiding site map files” on page 121.
• Choose Display Dependent Files to show all dependent files in the site’s
hierarchy. A dependent file is an image or other non-HTML content that is
loaded by the browser when the main page is loaded.
Working with pages in the site map
When working in the site map, you can select pages, open a page for editing, add
new pages to the site, create links between files, and change the page title.
To select multiple pages in the site map, do one of the following:
• Press Shift-click to select multiple pages.
• Starting from a blank part of the view, drag around a group of files to
select them.
• Press Control-click (Windows) or Command-click (Macintosh) to select
nonadjacent pages.
To open a page for editing, do one of the following:
• Double-click the file.
• Select the file and choose File > Open Selection (Windows) or Site >
Open (Macintosh).
To add an existing file to the site, do one of the following:
• Drag a file from the Windows Explorer or the Macintosh Finder and drop it on
a file in the site map. The page is added to the site, and a link is created between
it and the file you dropped it on.
• Select Site > Link to Existing File (Windows) or Site > Site Map View > Link to
Existing File (Macintosh).
Site Management and Collaboration
119
To create a new file and add a link:
1
Select an HTML file in the site map, then do one of the following:
• Choose Site > Link to New File (Windows) or Site > Site Map View > Link to
New File (Macintosh).
• Choose Link to New File from the context menu.
2
In the File Name field of the Link to New File dialog box, type a file name.
3
In the Title field, type a page title for the file.
4
In the Text of Link field, type the text of the link that connects the selected file
to the new file. The text and link appears in the selected file.
5
Click OK.
The file is saved in the same folder as the selected file. If a new file is added to a
hidden branch, the new file is also hidden. See “Showing and hiding site map
files” on page 121.
To modify the title of a page:
1
Make sure the Show Page Titles option is selected.
Choose View > Show Page Titles (Windows) or Site > Site Map View >
Show Page Titles (Macintosh).
2
Do one of the following:
• Select a page and then click the title. When the title becomes an editable field,
enter a new document title.
• Select a page and then choose File > Rename (Windows) or Site > Rename
(Macintosh).
Note: When you work in the Site window, Dreamweaver automatically updates all links to
files whose names have changed.
To change the home page, do one of the following:
• In the Local Folder view of the Site Window, click the file you want to change
to the home page and choose Set as Home Page from the context menu.
• Select a file in the Site map, and choose Site > New Home Page (Windows) or
Site > Site Map View > New Home Page (Macintosh) to create a new home page.
• In the Local Folder view of the Site Window, click the file you want to change
to the home page, and choose Site > Set as Home Page (Windows) or Site >
Site Map View > Set as Home Page (Macintosh) to make an existing page
the home page.
• Choose Site > Define Sites and click Edit. Select Site Map Layout in the Site
Definition dialog box.
120
Chapter 4
To update the site map display after making changes:
1
Click anywhere in the site map to deselect any files.
2
Choose View > Refresh Local (Windows) or Site > Site Map View > Refresh
Local (Macintosh).
Showing and hiding site map files
You can modify the layout of the site map to show or hide hidden and dependent
files. This is useful when you want to emphasize key topics or content and deemphasize less important material.
To hide a file using the site map, you must first mark it as hidden. When you hide
a file, its links are also hidden. When you display a file marked as hidden, the icon
and its links are visible in the site map, but the names appear in italics.
To mark files as hidden:
1
In the site map, select one or more files.
2
Choose View > Show/Hide Link (Windows) or Site > Site Map View > Show/
Hide Link (Macintosh).
To show or hide files marked as hidden, do one of the following:
• Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map
View > Show Files Marked as Hidden (Macintosh).
• Choose View > Layout (Windows) or Site > Site Map View > Layout
(Macintosh) to open the Site Definition dialog box, and select the Display Files
Marked as Hidden option.
By default, dependent files are already hidden. You can choose whether to show
them in the site map.
To show dependent files, do one of the following:
• Choose View > Show Dependent Files (Windows) or Site > Site Map View >
Show Dependent Files (Macintosh).
• Choose View > Layout (Windows) or Site > Site Map View > Layout
(Macintosh) to open the Site Definition dialog box, and select the Display
Dependent Files option.
To unmark files marked as hidden:
1
In the site map, select one or more files.
2
Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map
View > Show Files Marked as Hidden (Macintosh).
3
Choose View > Show/Hide Link (Windows) or Site > Site Map View >
Show/Hide Link (Macintosh).
Site Management and Collaboration
121
Viewing the site from a branch
You can view the details of a specific section of a site by making a branch the focus
of the site map.
To view a different branch:
Select the page you want to view and choose View > View as Root (Windows) or
Site > Site Map View > View as Root (Macintosh).
The site map is redrawn in the window as if the specified page were at the root of
the site. The Site Navigation field above the site map displays the path from the
home page to the specified page. Select any item in the path to view the site map
from that level by clicking once.
To expand and contract branches:
Click the plus (+) and minus (–) signs to expand or contract the branch.
Saving the site map
You can save the site map as an image and then view the image in (or print it
from) an image editor.
To create an image file of the current site map:
1
From the site map, do one of the following:
• Using Windows, choose File > Save Site Map. In the Save Site Map dialog
box, enter a name in the File Name field. In the File Type pop-up menu,
select .bmp or .png.
• Using Macintosh, select Site > Site Map View > Save Site Map > Save Site Map
As PICT or Site > Site Map View > Save Site Map > Save Site Map As JPEG.
2
Choose a location, enter a name for the image, and click Save.
Finding files in the Site window
You can search for a file in your local and remote sites from the Document
window or the Site window. For more information on searching for and replacing
files, see “Searching and replacing text, tags, and attributes” on page 258.
To display the Site window, choose Window > Site Files.
122
Chapter 4
To find a file in your local site:
1
Select the file in the Remote Site view of the Site window or open the file in a
Document window.
2
Choose Site > Locate in Local Site. (On Windows only, if the Site window is
active, choose Edit > Locate in Local Site.)
The file is highlighted in the Local Folder of the Site window.
To find a file in your remote site:
1
Select the file in the Local folder of the Site window or open the file in a
Document window.
2
Choose Site > Locate in Remote Site. (On Windows only, if the Site window is
active, choose Edit > Locate in Remote Site.) You can also select the file in the
Local Folder and right-click (Windows) control-click (Macintosh) and choose
Locate in Remote Site from the context menu.
The file is highlighted in the Remote Site view of the Site window.
Note: If you select Site > Locate in Local Site or Site > Locate in Remote Site while the
Document window is active, and if the current file is not part of the currently open site,
Dreamweaver attempts to determine which of your locally defined sites the current file
belongs to; if the current file belongs to only one local site, Dreamweaver opens that site
and then locates the file in it.
Setting up a remote site
Before you set up a remote site, create a local site (which you will then associate
with the remote site). See “Using Dreamweaver to set up a new site” on page 102.
The next step in setting up a remote site is to determine where the site will be
located—that is, what server the site will be served from. Your client, employer, or
ISP probably has a server already set up to serve Web pages (whether Internet or
intranet); ask a system administrator or your client for the name of that server, and
find out how to transfer files to that server.
In particular, determine whether to use FTP to connect to the server, or whether
you can instead mount the server as a network-accessible disk drive from your
desktop. If you’re connecting using FTP, find out the name of the FTP server and
determine the host directory, as well as login and password information.
When you’ve gathered this information, use the Define Sites command to
associate the server with your local site. If you encounter problems setting up your
remote site, see “Troubleshooting remote site setup” on page 130.
After you’ve set up a remote site, you can upload files to it, or download files from
it if there are already files on the site. See “Using Check In/Check Out” on page
131 and “Getting and putting files” on page 143.
Site Management and Collaboration
123
Associating a remote server with a local site
After you’ve created a local site, use the Define Sites command to add or change
associated remote server information and Check In/Check Out preferences.
To associate a remote server with an existing local site:
1
Choose Define Sites from the current sites pop-up menu in the Site window, or
choose Site > Define Sites.
2
A dialog box appears listing currently defined sites; select an existing site
and click Edit.
If you have no currently defined sites, create a local site before proceeding; see
“Using Dreamweaver to set up a new site” on page 102.
3
In the Category list at the left, click Remote Info.
4
Choose one of the following Server Access options:
• Use None if you do not plan to upload your site to a server. Then click OK and
skip the rest of this procedure.
• Use Local/Network if your Web server is mounted as a network drive
(Windows) or as an AppleTalk or NFS server (Macintosh), or if you are
running a Web server on your local machine. Click the folder icon to browse to
and select the folder where your site files are stored on the server. If you want
the Remote pane of the Site window to update automatically as files are added
and deleted, select the Refresh Remote File List Automatically option; for
increased speed when copying files to the remote site, leave this option
unselected. (To manually refresh the Site window at any time, click the Site
window’s Refresh button.) Click OK and skip the rest of this procedure.
Note: To manually refresh the Remote pane only, choose View > Refresh Remote in the
Site window (Windows) or Site > Site Files View > Refresh Remote (Macintosh).
• Use FTP if you connect to your Web server using FTP.
124
Chapter 4
To connect to a Web server using FTP:
1
Enter the host name of the FTP host to which you upload files for your
Web site.
Your FTP host name is the full Internet name of a computer system, such as
ftp.mindspring.com. Enter the full host name without any additional text; in
particular, don’t add a protocol name in front of the host name. For example:
• Right: ftp.mindspring.com
• Wrong: ftp://ftp.mindspring.com
• Wrong: mindspring.com
2
Enter the name of the host directory at the remote site where documents visible
to the public are stored. See “Determining the remote site’s host directory (FTP
only)” on page 126.
3
Enter the login name and password that you use to connect to the FTP server.
Dreamweaver saves your password by default. Deselect Save if you prefer to be
prompted for a password each time you connect to the remote server.
4
Select appropriate firewall options for your site:
• Select the Use Firewall option if you are connecting to the remote server from
behind a firewall. (For more information on firewall options, see “Associating a
remote server with a local site” on page 124.
• If your firewall configuration requires use of passive FTP (which lets your local
software set up the FTP connection rather than requesting the remote server to
set it up), select Use Passive FTP. If you’re not sure, check with your system
administrator.
5
Click OK.
Site Management and Collaboration
125
Determining the remote site’s host directory (FTP only)
The host directory you specify in the Site Definition dialog box should be the same
as the root folder for the local site. If the structure of your remote site doesn’t match
the structure of your local site, your files are uploaded to the wrong place and aren’t
visible to visitors to the site. Also, your image and link paths will be broken.
Shouldn’t be Host
Directory in this case
no
yes
no
Shouldn’t be Host
Directory
Should be Host
Directory
The remote root directory must exist before Dreamweaver can connect to it. If
you don’t have a root directory for your site on the remote server, create one before
attempting to connect, or ask the server’s administrator to create a root directory
for you if you can’t do it.
If you’re uncertain what to enter in the Host Directory field, try leaving it blank.
On some servers, your root directory is the same as the directory you first connect
to with FTP. To find out, connect to the server. If a folder with a name like
public_html, or www, or your login name, appears in the Remote File view in
your Site window, that’s probably the directory you should use in the Host
Directory field. Write down the directory name, disconnect, and reopen the Site
Definition dialog box. Then enter the directory name in the Host Directory field
and connect again.
126
Chapter 4
About WebDAV and SourceSafe
integration
Dreamweaver lets you access source- and version-control applications from the
Site window. You can connect to SourceSafe databases and servers or sourcecontrol systems that support the WebDAV protocol.
Using the Site Definition dialog box, you select the a connection type or sourcecontrol system. Once connected, you can use Dreamweaver file sharing features
such as Check In/Check Out, Refresh, Get and Put, and Design Notes to access
corresponding features found in your own source-control system.
Note: To use this feature, you must have Visual SourceSafe installed on your system or
have access to a system supported by WebDAV.
Using Dreamweaver with the WebDAV protocol
You can use Dreamweaver to connect using the WebDAV (Web-based Distributed
Authoring and Versioning) protocol if you have a system that supports that
protocol. Two examples of WebDAV servers currently available are Microsoft
Internet Information Server (IIS) 5.0 and Apache Web Server.
To connect to a site using the WebDAV protocol:
1
Choose Site > Define Sites.
2
In the Define Sites dialog box, select Edit.
3
In the Site Definition dialog box, select the Remote Info category.
4
In the Access pop-up menu, choose WebDAV.
5
If you want, select the Check Out Files when Opening to check out files
automatically when opening.
6
Click Info.
The WebDAV Connection dialog box appears.
Site Management and Collaboration
127
7
In the URL field, enter the complete URL to the directory on the WebDAV
server that you want to connect to.
This URL includes the protocol, port, and directory (if not the root
directory)—for example, http://apache1/WebDAV/mysite.
8
Enter your username and password in the appropriate fields.
This information is for server authentication and is not related to
Dreamweaver. If you are not sure of your username and password, check
with your system administrator or webmaster.
9
In the Email field, enter your e-mail address.
This is required and is used to identify ownership on the WebDAV server and
appears in the Site window for contact purposes.
10
Click Save Password to store your password once you’ve exited Dreamweaver.
Each time you start a new session, the password is still saved.
11
Click OK.
12
Choose Site > Connect or click the Connect button on the Site window toolbar
to connect to the remote site. To disconnect, choose Site > Disconnect or click
the Disconnect button.
Once connected, you can use the Dreamweaver file sharing features (Get and Put
files, Design Notes, and so on).
You can change your connection information at any time by following the
steps just listed and entering the new information in the WebDAV Connection
dialog box.
Using Dreamweaver with Visual SourceSafe
You can access an existing Visual SourceSafe (VSS) database using the Site
window in Dreamweaver. Once connected, you can use Dreamweaver file
transfer features.
Note: To use this feature with Windows, you must have Microsoft Visual SourceSafe Client
version 6 installed. To use this feature on the Macintosh, you must have MetroWerks
SourceSafe version 1.1.0 client installed. MetroWerks Visual SourceSafe users can access
Microsoft version 5.0 SourceSafe databases, but not version 6.0 databases. If you want to
ensure that your entire team can access any VSS database across platforms, use a version
5.0 database. For more information, see your SourceSafe documentation.
128
Chapter 4
To connect to a SourceSafe database:
1
In the Site Definition dialog box, select the Remote Info category.
2
In the Access pop-up menu, choose SourceSafe Database.
3
If you want, select Check Out Files when Opening to check out files
automatically when opening.
4
Click Info.
The Open SourceSafe Database dialog box appears.
5
In the Database Path field, click Browse to browse for the VSS database you
want, or enter the full file path.
The file you choose will become the srcsafe.ini file and is used to initialize
SourceSafe.
6
In the Project field, enter the project within the VSS database that you want to
use as the remote site’s root directory.
7
In the Username and Password fields, enter your login username and password
for the selected database.
If you don’t know your username and password, check with your system
administrator.
8
Click OK and return to the Site window.
9
Choose Site > Connect or click the Connect button on the Site window toolbar
to connect to the remote site. To disconnect, choose Site > Disconnect or click
the Disconnect button.
Site Management and Collaboration
129
Troubleshooting remote site setup
A Web server can be configured in a wide variety of ways. This section provides
information on some common issues you may encounter in setting up a remote
site, and how to resolve them.
• The Dreamweaver FTP implementation may not work properly with certain
proxy servers, multilevel firewalls, and other forms of indirect server access. If you
encounter problems with FTP access, ask your local system administrator for help.
• The Dreamweaver FTP implementation is different from some common FTP
applications. In particular, you must connect to the remote system’s root folder
and you cannot navigate through the remote file system. (In many applications,
you can connect to any remote directory, then navigate through the remote file
system to find the directory you want.)
• If you are having problems connecting and you’ve specified the host directory
using a single slash (/), you may need to specify a relative path from the
directory you are connecting to and the remote root folder. For example, if the
remote root folder is a higher level directory, you may need to specific a ../../ for
the host directory.
• Sometimes with slow connections the default FTP time-out value of 60
seconds results in too many time-outs. Increase this value (in Site preferences) if
you experience frequent time-outs. But don’t increase it too much, or you’ll
have to wait a long time when a connection really can’t be made. Generally,
time-out values of 30 to 120 seconds are the most useful.
• File and folder names that contain spaces and special characters often cause
problems when transferred to a remote site. Use underscores in place of spaces,
and avoid special characters in file and folder names wherever possible. In
particular, colons, slashes, periods, and apostrophes in file or folder names can
cause problems. Special characters in file or folder names may also sometimes
prevent Dreamweaver from creating a site map.
• On the Macintosh, file names cannot be more than 31 characters long. If you
encounter problems with long file names, rename them with shorter names.
• Note that many servers use symbolic links (UNIX), shortcuts (Windows), or
aliases (Macintosh) to connect a folder on one part of the server’s disk with
another folder elsewhere. For example, the public_html subdirectory of your
home directory on the server may really be a link to another part of the server
entirely. In most cases, such aliases have no effect on your ability to connect to
the appropriate folder or directory, but if you can connect to one part of the
server but not another, there may be an alias discrepancy.
• In general, when you encounter a problem with an FTP transfer, examine the
FTP log by choosing Window > Site FTP Log in the Site window (Windows)
or Site > FTP Log (Macintosh). If you encounter an error message such as
“cannot put file,” your remote site may be out of space. Look at the FTP log for
more detailed information.
130
Chapter 4
Using Check In/Check Out
When working in a collaborative environment, you can check files in and out
from local and remote servers and use Design Notes to add comments and notes
for your team. Checking out a file is the equivalent of declaring “I’m working on
this file now—don’t touch it!” When a file is checked out, Dreamweaver displays a
check mark next to the file’s icon in the Site window. A green check mark indicates
that the file was checked out by you, and a red check mark indicates that the file
was checked out by another team member. The name of the person who checked
out the file is also displayed in the Site window.
Checking in a file makes the file available to other team members to check out and
edit. The local version becomes read-only to prevent you from making changes to
the file while someone else has it checked out.
Dreamweaver does not make checked-out files read-only on the remote server.
If you transfer files with an application other than Dreamweaver, you can
overwrite checked-out files. However, in applications other than Dreamweaver,
the .LCK file is visible next to the checked-out file in the file hierarchy to help
prevent such accidents.
You can enable Check In/Check Out for some sites and disable it for others. For
information about transferring files between local and remote sites without
checking them in or out, see “Getting files from a remote server” on page 143 and
“Putting files onto a remote server” on page 144.
Site Management and Collaboration
131
Setting up the Check In/Check Out system
Before you can use the Check In/Check Out system, you must have associated
your local site with a remote FTP or network server (see “Associating a remote
server with a local site” on page 124). Then you must set up the following options.
To set Check In/Check Out options:
1
Choose Site > Define Sites, select a site, and click Edit.
2
In the Category list at the left, click Remote Info.
3
Do any of the following:
• Select the Enable File Check In and Check Out option if you are working in a
team environment (or working alone but from several different machines).
This option is useful for letting others know that you have a file checked out
for editing, or for alerting yourself that you may have left a more recent version
of a file on another machine. See “Using Check In/Check Out” on page 131.
• Select the Check Out Files when Opening option if you want files to
automatically be checked out when you double-click to open them from the
Site window. (Using File > Open to open a file doesn’t check the file out even
when this option is selected.)
• Enter a check-out name.
The check-out name appears in the Site window alongside any files that you
have checked out, enabling other team members to locate you if you have a file
that they need. If you work alone from several different machines, use a
different check-out name on each machine (for example, AmyR-HomeMac
and AmyR-OfficePC) so you’ll know where the latest version of the file is if you
forget to check it back in.
• Enter an e-mail address.
If you enter an e-mail address and then check out a file, your name appears in
the Site window next to that file as a clickable link (blue and underlined). If a
team member clicks on the link, their default e-mail program pops up with a
new message. The To field will contain the e-mail address, and the Subject field
will contain the corresponding file and site name.
132
Chapter 4
Checking in and checking out files on a remote server
Use the Site window or the Site menu in the Document window to check in and
check out files on a remote server.
If you’ve checked out a file but have decided not to edit it (or have decided to
discard the changes you’ve made), you can undo a check out, to make the file on
the server available to other team members to check out.
Note: If you select Site > Check In or Site > Check Out while the Document window is active,
and if the current file is not part of the currently open site, Dreamweaver attempts to
determine which of your locally defined sites the current file belongs to; if the current file
belongs to only one local site, Dreamweaver opens that site and then performs the check in
or check out operation.
To check out files from a remote server:
1
Choose the desired site from the current sites pop-up menu at the top of
the Site window.
2
Check out files using one of the following approaches:
• Select one or more files and click the Check Out icon at the top of
the Site window.
• Choose Check Out from the context menu or the Site menu.
3
To download dependent files along with the selected files, click Yes at the
prompt. To refrain from downloading dependent files, click No.
To check in files to a remote server:
1
Choose the desired site from the current sites pop-up menu at the top of
the Site window.
2
Select one or more checked-out or new files in the Local pane and do one
of the following:
• Click the Check In icon at the top of the Site window.
• Choose Check In from the context menu or the Site menu.
Files checked out by you are marked with a green check mark. If a file has a
red check mark next to it, it’s currently checked out by another user; don’t
check in such files.
A lock symbol next to a file indicates that the file is read-only (Windows) or
locked (Macintosh).
New files have neither a check mark nor a lock symbol next to them.
3
To upload dependent files along with the selected file, click Yes at the prompt.
To refrain from uploading dependent files, click No. It’s usually a good idea
to upload dependent files when checking in a new file, but if the latest versions
of the dependent files are already on the remote server, there’s no need to
upload them again.
Site Management and Collaboration
133
To undo a check out:
Select the file and choose Site > Undo Check Out, or right-click (Windows) or
Control-click (Macintosh) the file and choose Undo Check Out from the context
menu. The local copy of the file becomes read-only, and any changes you’ve made
to it are lost.
To check in or check out a currently active file:
In the Document window, choose Site > Check In or Site > Check Out, or use the
icons found on the toolbar.
If you check out the currently active file, the currently open version of the file is
overwritten by the new checked-out version. If you check in the currently active
file, the file may be automatically saved before it’s checked in, depending on the
preference options you’ve set; see “Setting Site preferences” on page 110.
About Design Notes
You can keep track of extra file information associated with your documents, such
as image source-file names and comments on file status, by using the Design
Notes command.
For example, if you copy a document from one site to another, you can add
Design Notes for that document, with the comment that the original document is
in the other site folder. Then if you update that document (or someone else does),
you’ll know that you need to update the original page as well.
You can also use Design Notes to keep track of sensitive information that you
can’t put inside a document for security reasons. For example, you can include
information about how the document was created, or notes on how a particular
price or configuration was chosen, or what marketing factors influenced a
design decision. You can see which files have Design Notes attached in the Site
window: a Design Notes icon appears in the Notes column of the Site Files view.
134
Chapter 4
Saving file information in Design Notes
You can create a Design Notes file for each document or template in your site.
(Note that if you add Design Notes to a template, the documents created with the
template do not inherit the Design Notes.) You can also create Design Notes for
applets, ActiveX controls, images, Flash movies, Shockwave objects, and image
fields in your documents.
To set up Design Notes for your site:
1
Choose Site > Define Sites, select a site, and click Edit.
2
In the Category list at the left, click Design Notes.
• Enable Design Notes for your site by selecting Maintain Design Notes (if it’s
not already selected).
When Maintain Design Notes is selected, you can create Design Notes for files
in your site. Whenever a file is copied, moved, renamed, or deleted, the
associated Design Notes file is also copied, moved, renamed, or deleted.
• Choose whether the Design Notes associated with your site are uploaded
with the rest of your documents, by selecting or deselecting Upload Design
Notes for Sharing.
When Upload Design Notes for Sharing is selected, you can share Design
Notes with the rest of your team. When you put or get a file, Dreamweaver
automatically puts or gets the associated Design Notes file. If you work alone
on your site, you can deselect this option to improve performance of file
transfers; when the option is deselected, Design Notes are maintained locally
but are not uploaded with your files.
3
Click OK.
Site Management and Collaboration
135
To add Design Notes to a document:
1
While the document is active in the Document window, choose File >
Design Notes.
You can also select the file in the Site window, and then choose File > Design
Notes, or double-click on the Notes column. If the file resides on a remote site,
you must first check out or get the file, then select it in the local folder. (See
“Checking in and checking out files on a remote server” on page 133 or
“Getting and putting files” on page 143.)
2
In the Basic Info tab, add notes of various sorts:
• Choose the status of the document from the Status pop-up menu.
• Type comments in the Notes text field.
• Click the date icon (just above the Notes text field) to insert the current
local date.
• To make the Design Notes file appear every time the file is opened, select Show
When File Is Opened.
3
In the All Info tab, add other keys and values that might be useful to other
developers of your site. For example, you could name a key Author (in the
Name field) and define the value as Heidi (in the Value field). Click the
Plus (+) button to add a new key/value pair; select a pair and click the
Minus (–) button to remove it.
4
Click OK to save the notes.
The notes you entered are saved to a subfolder called _notes, in the same
location as the current file. The file name is the document’s file name, plus the
extension .mno. For example, if the file name is index.html, the associated
Design Notes file is named index.html.mno.
To add Design Notes to an object:
1
Choose Design Notes from the object’s context menu. (Open the context menu
for the object by right-clicking (Windows) or Control-clicking (Macintosh)
the object.)
2
Follow steps 2 through 4 above for adding Design Notes to a document.
Note that an object’s Design Notes file is saved in a _notes subfolder in the
same directory as the object’s source file, which is not necessarily in the same
directory as the document that the object appears in.
To open Design Notes associated with a file, do one of the following:
• Select the file in the Site window, or open the file itself; then choose File >
Design Notes. The Design Notes associated with that file opens.
• In Notes column of the Site window, double-click the yellow Design Notes icon.
136
Chapter 4
To assign a status that isn’t listed in the Status pop-up menu:
1
Open Design Notes for a file or object.
2
Click the All Info tab.
3
Click the Plus (+) button.
4
In the Name field, enter the word status.
5
In the Value field, enter the status.
If a status value already existed, it’s replaced with the new one.
6
Click the Basic Info tab and note that the new status value appears in the
Status pop-up menu.
Note: You can have only one new value in the status menu at a time. If you follow this
procedure again, the new status value you entered the first time is replaced with the new
status value you enter the second time.
To disable Design Notes:
1
Choose Site > Define Sites.
2
In the Define Sites dialog box, select the site and click Edit.
3
In the Site Definition dialog box, click Design Notes.
4
Deselect Maintain Design Notes.
Deselecting this option disables the Design Notes capability. If you deselect
this option and then click Clean Up, all local Design Notes files for your
site are deleted.
5
Click OK.
A dialog box appears, asking if you would like to delete existing Design Notes
files. Click Yes to delete such files, or No to leave them in place.
To use Design Notes locally only:
1
Choose Site > Define Sites.
2
In the Define Sites dialog box, select the site and click Edit.
3
In the Site Definition dialog box, select Maintain Design Notes in the
Design Notes box.
4
Deselect Upload for Sharing.
Design Notes will not be transferred to the remote site when you check in/put
your files. You will still be able to add and modify the Design Notes for
your site locally.
Site Management and Collaboration
137
To delete unassociated Design Notes from your site:
1
Choose Site > Define Sites.
2
In the Define Sites dialog box, select the site and click Edit.
3
In the Site Definition dialog box, click Design Notes.
4
Click Clean Up. Dreamweaver prompts you to verify that it should delete any
Design Notes that are no longer associated with a file in your site. (If you use
Dreamweaver to delete a file that has an associated Design Notes file, the
Design Notes file is deleted too, so usually orphan Design Notes files occur
only if you delete or rename a file outside of Dreamweaver.)
Note: If you deselect the Maintain Design Notes option before you click Clean Up,
Dreamweaver deletes all Design Notes files for your site.
Using file view columns with Design Notes
You can customize the columns displayed in the Site window’s Local Folder and
Remote Site lists. You can reorder columns, add new columns (for a maximum of
10 columns), delete columns, hide columns, associate Design Notes to column
data, and designate columns to be shared with all users connected to a site. The
default columns are Name, Notes, Size, Type, Modified, and Checked Out By.
You can sort by any column by clicking on the column heading in the Site
window. Clicking more than once on a column reverses the order (ascending and
descending) by which the column is sorted.
Note: You cannot delete, rename, or associate a Design Note with a built-in column
(Name, Notes, Size, Type, Modified, Checked Out By). You can change the ordering and
alignment of these columns, as well as hide them, with the exception of the Name column,
which cannot be hidden.
138
Chapter 4
To access File View Columns options, do one of the following:
• Choose View > File View Columns in the Site window (Windows) or Site >
Site Files View > File View Columns (Macintosh).
• Choose > Define Sites, select a site, and click Edit. Then select File View
Columns from the Site Definition Dialog box.
• In the Site window, right-click (Windows) or Control-click (Macintosh) a
column and select File View Columns.
The Site Definition dialog box appears, displaying File View Columns options.
To change the order of the columns:
1
From the File View Columns display of the Site Definition dialog box, select a
column name.
2
Click the up or down arrow button to change the position of the selected column.
You can change the order of any column except Name, which always remains in
the primary position.
Site Management and Collaboration
139
To add a new column:
1
In the File View Columns display of the Site Definition dialog box, click the
Plus (+) button.
2
In the Column Name field, enter a name for your column.
3
Choose a value from the Associate with Design Note pop-up menu, or type
in your own.
You must associate a new column with a Design Note, so that there is data to
display in the Site window.
4
Choose an alignment option: left, right, or center. This determines how the
text is aligned within the column.
5
To reveal or hide the column, select or deselect the Show option.
6
To share the column with all users connected to the site, select the Share with
All Users of This Site option.
To delete an added column:
1
Select the column you want to delete.
2
Click the Minus (-) button.
Note: The column is deleted immediately and without confirmation, so be very sure you
want to delete the column before clicking the Minus (-) button.
Using Design Notes in Fireworks and Dreamweaver
If you open a graphic in Macromedia Fireworks 4.0 and export it to another format,
Fireworks automatically saves the name of the original source file in a Design Notes
file. For example, if you open myhouse.png in Fireworks and export it to
myhouse.gif, Fireworks automatically creates a Design Notes file called
myhouse.gif.mno, which contains the name of the original file, as an absolute file:
URL. For example, the Design Notes for myhouse.gif might contain this line:
fw_source="file:///Mydisk/sites/assets/orig/myhouse.png"
If the image contains hotspots or rollovers, the HTML source for those items is
also added to the Design Notes file.
When you import the graphic into Dreamweaver, the Design Notes file is
automatically copied into your site along with the graphic. When you select
the image in Dreamweaver and choose to edit it using Fireworks (see “Launching
an external editor” on page 298), Fireworks opens the original file for
editing. For more information, see “Using Dreamweaver and Fireworks Together”
on page 281.
140
Chapter 4
Using reports to improve workflow
Use the Site > Reports command to improve collaboration among members of a
Web team. You can run workflow reports that display who has checked out a file
and which files have Design Notes associated with them. You can further refine
Design Note reports by specifying name/value parameters. For information on
running other types of reports, see “Using Reports to test a site” on page 509.
Note: You must have a remote site connection defined to run the Workflow reports.
To run a Checked Out By report:
1
Choose Site > Reports.
The Reports dialog box appears.
2
Choose an option from the Report On pop-up menu. You can choose to report
on a document, an entire site, selected files in a site, or a specific folder.
3
Under Workflow, select Checked Out By.
4
Click the Reports Setting button.
The Checked Out By dialog box appears.
5
Enter the name of a team member and click OK.
6
Click Run.
The report runs, and the Reports dialog box displays a summary of the files
that have been checked out by the specified person.
Site Management and Collaboration
141
To run a report on specific Design Notes:
1
Choose Site > Reports.
The Reports dialog box appears.
2
Choose an option from the Report On pop-up menu. You can choose to report
on a document, an entire site, selected files in a site, or a specific folder.
3
Under Workflow, select Design Notes.
The Report Settings button becomes available.
4
Click the Report Settings button.
The Design Notes dialog box appears.
5
Enter one or more name and value pairs, and select comparison values from the
corresponding pop-up menus.
For example, if you specify “status contains draft,” your report will look for files
whose Design Notes have a status of “draft.”
142
Chapter 4
6
Click OK to return to the Reports dialog box.
7
Click Run to run the report.
Getting and putting files
If you’re working in a collaborative environment, use the Check In/Check Out
system to transfer files between local and remote sites (see “Using Check In/Check
Out” on page 131). If you’re the only person working on the remote site, however,
you can instead use the Get and Put commands to transfer files without checking
them in or out.
Note: If you select Site > Get or Site > Put while the Document window is active, and if the
current file is not part of the currently open site, Dreamweaver attempts to determine which
of your locally defined sites the current file belongs to; if the current file belongs to only one
local site, Dreamweaver opens that site and then performs the Get or Put operation.
Getting files from a remote server
Getting files copies them from the remote site to your local site.
If you’re using the Check In/Check Out system (that is, if the Enable File Check
In and Check Out option is on), the Get command results in a read-only local
copy of the file; the file remains available on the remote site for other team
members to check out. If Enable File Check In and Check Out is turned off, then
getting a file transfers a copy that has both read and write privileges. See “Using
Check In/Check Out” on page 131.
Note: If you’re working in a collaborative environment—that is, if others are working on the
same files—then turning off Enable File Check In and Check Out is not recommended. In
particular, if other people are using the Check In/Check Out system with the site, you
should use that system as well.
Note that the files that are copied when you click Get are the ones selected in
whichever pane of the Site window is currently active. If the Remote pane is
active, then the selected remote files are copied to the local site; if the Local
pane is active, then the remote versions of the selected local files are copied to
the local site.
If you are not working in a collaborative environment and you want to have read/
write privileges for files that you get, turn off the Enable File Check In and Check
Out option for the site; see “Associating a remote server with a local site” on page 124.
To get only those files for which the remote version is more recent than the local
version, use the Synchronize command; see “Synchronizing the files on your local
and remote sites” on page 146.
Site Management and Collaboration
143
To get files from a remote server:
1
Choose Window > Site Files to open the Site window.
2
At the top of the Site window, choose the desired site from the current sites
pop-up menu.
3
If you’re using FTP to transfer files, click Connect to open a connection to
the remote server.
If a connection is already open (indicated by the Disconnect button displayed),
skip this step. If the remote files are visible in the Remote pane from a previous
connection, clicking Connect isn’t required; when you click Get, Dreamweaver
connects automatically.
4
Select the desired files to download. (Usually you select these in the Remote
pane, but you may instead select the corresponding files in the Local pane
if you prefer.)
5
Click Get, or choose Get from the context menu or the Site menu. If the file is
currently open in a Document window, you can instead choose Site > Get from
the Document window.
6
To download dependent files, click Yes; to skip them, click No. (If you already
have local copies of the dependent files, click No.) To avoid being asked about
dependent files in future downloads, select the Don’t Ask Me Again option.
Note: To stop the file transfer at any time, click the Stop Current Task button (the red stop
sign with the white X in the lower right corner of the Site window) or press Esc (Windows)
or Command+period (Macintosh). The transfer may not stop immediately.
Dreamweaver records all FTP file transfer activity. If an error occurs when you are
transferring a file using FTP, the Site FTP log can help you determine the
problem. To display the log, choose Window > Site FTP Log from the Site
window (Windows) or Site > Site FTP Log (Macintosh).
Putting files onto a remote server
Using the Put command copies files from the local site to the remote site,
generally without changing the file’s checked out status. There are two common
situations in which you use Put instead of Check In: when you’re not in a
collaborative environment and you aren’t using the Check In/Check Out system,
or when you want to put the current version of the file on the server but you’re
going to keep editing it.
Note: If you put a file that didn’t previously exist on the remote site and you’re using the
Check In/Check Out system, the file is copied to the remote site and is then checked out to
you for continued editing.
If you want to put a file on a remote server and check it in, use the Check In
command. See “Checking in and checking out files on a remote server” on page 133.
144
Chapter 4
To put only those files for which the local version is more recent than the remote
version, see “Synchronizing the files on your local and remote sites” on page 146.
Note: Do not use special characters (such as é, ç, or ¥) or punctuation such as colons,
slashes, or periods in the names of files you intend to put on a remote server. Many
servers change these characters during the upload process, which causes any links to
the files to break.
To put files on a remote server:
1
Choose Window > Site Files to open the Site window.
2
At the top of the Site window, choose the desired site from the current sites list
pop-up menu.
3
If you’re using FTP to transfer files, you may click Connect to open a
connection to the remote server, which allows you to see what’s on the remote
site before transferring any files. However, clicking Connect is not required;
when you click Put, Dreamweaver connects automatically.
4
Select the desired files to upload. (Usually you select these in the Local
pane, but you may instead select the corresponding files in the Remote pane
if you prefer.)
5
Click Put, or choose Put from the context menu or the Site menu.
6
If the file hasn’t been saved, a dialog box may appear (depending on your
preference setting in the Site panel of the Preferences dialog box) allowing you
to save the file before putting it on the remote server. To save the file, click Yes;
to put the previously saved version on the remote server, click No.
If you choose not to save the file, any changes you’ve made since last time you
saved will not be put onto the remote server. However, the file remains open, so
you can still save the changes after putting the file on the server if you want.
7
To upload dependent files, click Yes; to skip them, click No. (If the remote site
already contains copies of the dependent files, click No.) To avoid being asked
about dependent files in future uploads, select the Don’t Ask Me Again option.
Note: To stop the file transfer at any time, click the Stop Current Task button (the red stop
sign with the white X in the lower right corner of the Site window) or press Esc (Windows)
or Command+period (Macintosh). The transfer may not stop immediately.
If the file is currently open in a Document window, you can instead choose Site >
Put from the Document window.
Dreamweaver records all FTP file transfer activity. If an error occurs when you are
transferring a file using FTP, the Site FTP log can help you determine the
problem. To display the log, choose Window > FTP Log from the Site window
(Windows) or Site > FTP Log (Macintosh).
Site Management and Collaboration
145
Synchronizing the files on your local and
remote sites
Once you’ve created files in your local and remote sites, you can synchronize the
files between the two sites. Use the Site > Synchronize command to transfer the
latest versions of your files to and from your remote site.
If your remote site is an FTP server (rather than a networked server), then
synchronizing your files uses FTP. For more information on using FTP, see
“Associating a remote server with a local site” on page 124.
Before you synchronize your sites, Dreamweaver lets you verify which files you
want to put onto or get from your remote server. Dreamweaver also confirms
which files have been updated after you complete the synchronization.
To see which files are newer on the local site or which files are newer on the
remote site, without synchronizing, choose Edit > Select Newer Local or
Edit > Select Newer Remote (Windows, from the Site window) or Site >
Site Files View > Select Newer Local or Site > Site Files View > Select Newer
Remote (Macintosh).
To synchronize your files:
1
If you want to synchronize specific files or folders rather than the whole
site, choose those files or folders in either the Local or the Remote pane of
the Site window.
2
Choose Site > Synchronize in the Site window (Windows) or from the menu
bar (Macintosh).
3
To synchronize the entire site, choose Entire ‘Site Name’ Site from the
Synchronize pop-up menu. To synchronize selected files only, choose Selected
Local Files Only (or Selected Remote Files Only if the Remote pane was where
you made the most recent selection).
4
Choose the direction in which you want to copy the files:
• Choose Put Newer Files to Remote if you want to upload all the local files that
have more recent modification dates than their remote counterparts.
• Choose Get Newer Files from Remote if you want to download all the remote
files that have more recent modification dates than their local counterparts.
• Choose Get and Put Newer Files to place the most recent versions of all the files
on both the local and the remote sites.
146
Chapter 4
5
Choose whether to delete the files on the destination site that don’t have
counterparts on the origin site. (This is not available if you have selected
“Get and Put”.)
If you choose Put Newer Files to Remote and you select the Delete option,
then Dreamweaver deletes any files in your remote site for which there are no
corresponding local files. If you choose Get Newer Files from Remote, then
Dreamweaver deletes any files in your local site for which there are no
corresponding remote files.
6
Click Preview.
If the newest version of each chosen file is already in both places and nothing
needs to be deleted, an alert appears, informing you that no synchronization
is necessary.
7
In the Synchronize Files dialog box, verify which files you want to delete,
put, and get. If you don’t want Dreamweaver to delete, put, or get a
particular file, deselect it by clicking the checkbox to the left of the file (in
the Action column).
8
Click OK. The files are automatically transferred (and deleted as necessary),
and Dreamweaver updates the Synchronize Files dialog box with the status.
9
To save the verification information to a local file, click Save Log.
Site Management and Collaboration
147
148
Chapter 4
5
CHAPTER 5
Setting Up a Document
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Once you’ve created a local site, you can create documents to put in the site.
(If you haven’t set up a site yet, see “Using Dreamweaver to set up a new site” on
page 102.) A document—that is, a page of your Web site—can contain text
and images, as well as more sophisticated content such as animation, video,
links to other documents, and sound. As you create and work with documents,
Macromedia Dreamweaver automatically generates their underlying HTML
and JavaScript source code. To examine or edit this code, use one of the
Dreamweaver code editors: the Code view in the Document window, or the Code
inspector. (For detailed information, see “Using the Code view (or Code
inspector)” on page 330.)
You can create new documents in Dreamweaver starting from blank HTML pages
or from templates; alternatively, you can open and modify HTML documents
created in other applications. (See “Creating, opening, and saving
HTML documents” on page 150.)
When you set up a document, you can define basic page elements. For example,
the page title identifies the document to the site visitor; it usually appears in the
title bar of the browser window. Background images, background colors, and text
and link colors customize the page and distinguish regular text from hypertext.
Margin properties allow you to specify the sizes of top and left margins for your
page. (See “Setting document properties” on page 152.)
As you add content, you can select and modify objects directly in the Document
window. In some cases, you may need to select markers that represent page
elements that are not visible in the Document window, such as comments and
scripts. (See “Selecting elements in the Document window” on page 154.)
While creating your documents, you can perform the same task numerous times
by using the History panel. (See “About automating tasks” on page 160.)
149
Creating, opening, and saving
HTML documents
Dreamweaver offers various ways to create a document. You can create new, blank
HTML documents; you can open an existing HTML document, even if it wasn’t
created in Dreamweaver; or you can create a new document based on a template.
You can also open non-HTML text files, such as JavaScript files, plain text e-mail
files, or text files saved by word processors or text editors. You can’t use all of the
Dreamweaver document-editing tools on a plain text document, but you can use
basic text-editing features. Reasons to open text documents might include editing
and debugging JavaScript code, looking at the contents of a Dreamweaver
configuration file, or opening a piece of e-mail that contains a snippet of HTML,
to copy that code and paste it into another document.
To create a blank HTML document in a new Document window, do one of
the following:
• In Windows, choose File > New from an existing Document window, or
choose File > New Window from the Site window.
• On the Macintosh, choose File > New.
If you open the Code view (in the Document window) or the Code inspector, you
can see that the new document isn’t completely blank—it contains html, head,
and body tags to get you started. As you type in the Document window’s Design
view or insert objects such as tables and images, you can leave a code editor open
and watch as the HTML source code is created. For more information on the
code editors, see “Using the Code view (or Code inspector)” on page 330.
To open an existing HTML file, do one of the following:
• Choose File > Open.
• If the file was created using Microsoft Word, choose File > Import >
Import Word HTML.
If you choose Import Word HTML, Dreamweaver opens the file and then lets
you specify options for removing extraneous HTML code generated by Word.
(Microsoft Word 97 and later versions provide a Save as HTML feature, which
adds unnecessary HTML code as it converts a document to HTML.) For more
information, see “Cleaning up Microsoft Word HTML” on page 348.
Note: You can’t directly import a Microsoft Word (.doc) file into Dreamweaver. If you
want to import the contents of a Word file, launch Word and save the file as HTML
before importing the resulting HTML file into Dreamweaver.
150
Chapter 5
To create a new document based on a template:
1
Choose File > New from Template.
A dialog box appears, listing the templates available for the current site. (You
must create templates before you can create documents based on them; see
“Creating templates” on page 377.)
When you create a document based on a template, some parts of the document
are locked so that they can’t be edited. (The template file determines which
regions are editable and which are not.) This ensures consistency when you
use a template for multiple documents in a site.
2
Select a template and click Select.
A new document is created based on the template. Each editable part of the
new document is surrounded by a blue border by default. The entire document
is surrounded by a yellow border (by default), as a reminder that it’s based on a
template and that some parts of it are therefore locked. (To customize the
colors of the borders, see “Setting template preferences” on page 383.) To
modify an editable part of the template, select the placeholder content in the
editable region and type over it. In some cases, there is no placeholder content
in the editable region; in those cases, click inside the editable region.
To learn more about designing and working with templates, see “Reusing Content
with Templates and Libraries” on page 375.
To save a document:
1
Choose File > Save.
2
Provide a name for the file and navigate to where you want the file to be saved.
Note: Dreamweaver automatically adds .htm (Windows) or .html (Macintosh) to the file
name when the dialog box first appears. (You can control what file extension is added by
using an option in General preferences.) To save a file as plain text in Windows, give it a
.txt file name extension. To save a file as plain text on the Macintosh, simply remove the
.html from the name of the Macintosh file. (To make Dreamweaver see the file as an
HTML file again, save it again with the .html (or .htm) extension.) After you save a file as
text, Dreamweaver does not interpret any HTML code in the file.
When you save your documents, avoid using spaces and special characters in
file and folder names whenever possible. In particular, do not use special
characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or
periods) in the names of files you intend to put on a remote server; many
servers change these characters during upload, which will cause any links to
the files to break. Also, do not begin a file name with a numeral.
3
Click the Save button to save the file.
Setting Up a Document
151
Setting document properties
Page titles, background images and colors, text and link colors, and margins are
basic properties of every HTML document. The page title identifies and names
the document. A background image or color sets the overall appearance of the
document. Text and link colors help site visitors distinguish regular text from
hypertext and to see which links have been visited and which have not.
Changing the title of a page
The title of an HTML page helps site visitors keep track of what they’re viewing
as they browse, and it identifies the page in the visitor’s history and bookmark
lists. If you don’t title a page, the page will appear in the browser window,
bookmark lists, and history lists as Untitled Document. Note that giving the
document a file name (by saving it) is not the same as giving the page a title. To
locate all untitled documents in your site, use the Site > Reports command; see
“Creating reports” on page 510.
To change the title of a page:
1
Do one of the following:
• Choose Modify > Page Properties.
• Click in an empty space on your page to make sure nothing is selected. Then
choose Page Properties from the context menu by right-clicking (Windows) or
Control-clicking (Macintosh) in the Design view of the Document window.
• Choose View > Head Content, click the Title button when it appears, and then
open the Property inspector.
• Choose View > Toolbar.
2
Enter the title for the page in the Title text box.
3
If you’re editing the title in the Page Properties dialog box, click OK.
The title appears in the title bar of the Document window (and in the toolbar,
if it’s showing). The file name of the page and the folder the file is saved in
appear in parentheses next to the title in the title bar. An asterisk indicates the
document contains changes that have not yet been saved.
152
Chapter 5
Defining a background image or page color
To define an image or color for the page background, use the Page Properties dialog
box. If you use both a background image and a background color, the color appears
while the image downloads, and then the image covers up the color. If the background
image contains any transparent pixels, the background color shows through.
To define a background image or color:
1
Choose Modify > Page Properties, or select Page Properties from the
context menu in the Design view of the Document window.
2
To set a background image, click the Browse button, then browse to and select
the image. Alternatively, enter the path to the background image in the
Background Image box.
Dreamweaver tiles (repeats) the background image if it does not fill the
entire window, just as browsers do. (To prevent the background image from
tiling, use Cascading Style Sheets to disable image tiling. See “Using CSS style
sheets” on page 248.)
3
To set a background color, click the Background color box and select a color
from the color picker. (See “Working with colors” on page 87.)
Defining default text colors
Define default colors for regular text, links, visited links, and active links in
the Page Properties dialog box, or choose a preset color scheme to define
the page background and text colors. (See “Working with colors” on page 87.)
Note: The active link color is the color that a link changes to while it’s being clicked. Some
Web browsers may not use the color you specify.
To define default text colors, do one of the following:
• Choose Modify > Page Properties and then choose colors for the Text Color,
Link Color, Visited Links, and Active Links options.
• Choose Commands > Set Color Scheme and then choose a background color
and a color set for text and links.
The sample box shows how the color scheme will look in the browser.
Note: Color-blind people may find it difficult to see certain low-contrast combinations of
text colors and background colors. It’s a good idea to show your page to a color-blind
person to determine whether it’s readable.
Setting Up a Document
153
Selecting elements in the
Document window
To select an element in the Design view of the Document window, you generally
click the element. If an element is invisible, you must make it visible before
you can select it.
To select elements, use these techniques:
• To select a visible element in the Document window, click the element or drag
across the element.
• To select an invisible element, choose View > Visual Aids > Invisible Elements
(if that menu item isn’t already selected) and then click the element’s marker in
the Document window.
Some objects appear on the page in a place other than where their code is
inserted. For example, a layer can be anywhere on the page, but the code
defining the layer is in a fixed location. When invisible elements are showing,
Dreamweaver displays markers in the Document window to show the location
of the code for such elements. Selecting a marker selects the entire element; for
example, selecting the marker for a layer selects the entire layer. (See “About
invisible elements” on page 156.)
154
Chapter 5
• To select a complete tag (including its contents, if any), click a tag in the tag
selector at the bottom left of the Document window. (The tag selector appears
only when the Design view is active.) The tag selector always shows the tags
that contain the current selection or insertion point. The leftmost tag is the
outermost tag containing the current selection or insertion point. The next tag
is contained in that outermost tag, and so on; the rightmost tag is the
innermost one that contains the current selection or insertion point.
Tag selector
For example, when you define a link for an image, the HTML code looks
something like this:
Clicking the image in the Document window changes the tag selector to show
the tags for the selection:
Because the image is selected, the tag in the tag selector appears in
boldface. Clicking that tag in the tag selector corresponds to selecting
in a code editor.
To select the link (the a tag and everything inside it) instead of the image, click
the image in the Document window and then click in the tag selector.
To see the HTML code associated with the selected text or object, do one of
the following:
• To display the Code view in the Document window, choose View > Code or
View > Code and Design. For more information about the Code view, see
“Using the Code view (or Code inspector)” on page 330.
• To open the Code inspector (in a separate window), choose Window >
Code Inspector.
When you select something in either code editor (the Code view or the Code
inspector), it’s generally also selected in the Document window. You may need to
synchronize the two views before the selection appears; see “Using the Code view
(or Code inspector)” on page 330.
Setting Up a Document
155
About invisible elements
Some HTML code doesn’t have a visible representation in a browser. For example,
comment tags don’t appear in browsers. However, it can be useful while you’re
creating a page to be able to select such invisible elements, edit them, move them,
and delete them. Dreamweaver allows you to specify whether it shows icons marking
the location of invisible elements in the Design view of the Document window.
To show or hide marker icons for invisible elements, choose View > Visual Aids >
Invisible Elements. Showing invisible elements lets you select them and change
their properties in the Property inspector; hiding them lets you see the page closer
to the way it will appear in a browser. Note that showing invisible elements may
slightly change the layout of a page, moving other elements by a few pixels, so for
precision layout, hide the invisible elements.
To indicate which element markers appear when you choose View > Visual Aids >
Invisible Elements, you can set options in Invisible Elements preferences. For
example, you can specify that named anchors should be visible, but not line breaks.
You can create certain invisible elements (such as comments, named anchors, and
scripts) using the buttons in the Invisibles category of the Objects panel (see
“Using the Objects panel” on page 80). You can then modify these elements using
the Property inspector.
Setting Invisible Elements preferences
Use Invisible Elements preferences to specify which kinds of elements will be
visible when you select View > Visual Aids > Invisible Elements.
To change Invisible Elements preferences:
1
Choose Edit > Preferences, then click Invisible Elements.
2
Select which elements should be made visible. A check mark next to the name
of the element in the dialog box means the element is visible when View >
Visual Aids > Invisible Elements is selected.
For an explanation of each Invisible Elements preference, see Dreamweaver Help.
156
Chapter 5
Using visual guides in the design process
Dreamweaver provides several kinds of visual guides to help you design
documents and predict (approximately) how they will appear in browsers. You can
do all of the following:
• Instantly snap the Document window to a desired window size to see how the
elements fit on the page. See “Resizing the Document window” on page 75.
• Use rulers to provide a visual cue for positioning and resizing layers or tables.
• Use a tracing image as the page background to help you duplicate a
design created in an illustration or image-editing application such as
Macromedia Fireworks.
• Use the grid for precise positioning and resizing of layers. Grid marks on the
page help you align layers, and when snapping is enabled, layers automatically
snap to the closest grid point when moved or resized. (Other objects, such as
images and paragraphs, do not snap to the grid.) Snapping works regardless of
whether the grid is visible. See “Snapping layers to the grid” on page 416.
Displaying rulers
Rulers can be displayed on the left and top borders of the page, marked in pixels,
inches, or centimeters.
To change ruler settings, do one of the following:
• To toggle rulers on and off, choose View > Rulers > Show.
• To change the origin, drag the ruler-origin icon anywhere on the page. (This
icon appears at the upper left corner of the Design view of the Document
window when rulers are showing.) To reset the origin to its default position,
choose View > Rulers > Reset Origin.
• To change the unit of measure, choose Pixels, Inches, or Centimeters from the
View > Rulers submenu.
Setting Up a Document
157
Using a tracing image
Use a tracing image as a guide to re-create a page design that was mocked up in a
graphics application. A tracing image is a JPEG, GIF, or PNG image that is placed
in the background of the Document window. You can hide the image, set its
opacity, and change its position.
The tracing image is visible only in Dreamweaver. It is never visible when you view
the page in a browser. When the tracing image is visible, the page’s real background
image and color are not visible in the Document window; however, the
background image and color will be visible when the page is viewed in a browser.
To place a tracing image in the Document window:
1
Do one of the following:
• Choose View > Tracing Image > Load.
• Choose Modify > Page Properties and then click the Browse button next to the
Tracing Image text box.
2
In the dialog box that appears, select an image file and click Select (Windows)
or Choose (Macintosh).
3
The Page Properties dialog box appears. Specify the transparency for the image
by dragging the Image Transparency slider; then click OK.
To switch to another tracing image or change the transparency of the current
tracing image at any time, choose Modify > Page Properties.
To show or hide the tracing image:
Choose View > Tracing Image > Show.
To change the position of a tracing image:
Choose View > Tracing Image > Adjust Position. Then do one of the following:
• To precisely specify the position of the tracing image, enter coordinate values in
the X and Y text boxes.
• To move the image one pixel at a time, use the arrow keys.
• To move the image five pixels at a time, press Shift and an arrow key.
To reset the position of the tracing image:
Choose View > Tracing Image > Reset Position. The tracing image returns to the
upper left corner of the document window (0,0).
158
Chapter 5
To align the tracing image to a selected element:
1
Select an element in the Document window.
2
Choose View > Tracing Image > Align with Selection.
The upper left corner of the tracing image is aligned with the upper left corner
of the selected element.
Viewing and editing head content
HTML files are made up of two main sections: the head section and the body
section. The body section is the main part of the document, the visible part
containing text and images and so on. The head section is invisible, except for the
document title, which appears in window title bars in browsers and in
Dreamweaver. Give a title to every page you create.
The head section also contains other important information, including the
document type, the language encoding, JavaScript and VBScript functions and
variables, keywords and content indicators for search engines, and style
definitions. You don’t need to provide all of these elements for every page; you
might, for example, provide keywords and content indicators for your home page
only. You can view the elements in the head section using the View menu, the
Document window’s Code view, or the Code inspector.
To view elements in the head section of a document:
Choose View > Head Content. For each element of the head content, an icon
appears at the top of the Document window’s Design view.
Note: If your Document window is set to show only Code view, View > Head Content
is dimmed.
To insert an element into the head section of a document:
1
Do one of the following:
• Choose Head from the pop-up menu at the top of the Objects panel and click
one of the object buttons.
• Choose an item from the Insert > Head submenu.
2
Enter options for the element in the dialog box that appears, or in the
Property inspector.
Setting Up a Document
159
To edit an element in the head section of a document:
1
Choose View > Head Content.
2
Click one of the icons in the head section to select it.
3
Set or modify the properties of the element in the Property inspector.
For information about the properties of specific head elements, see the following
topics in Dreamweaver Help:
•
•
•
•
•
•
•
•
Meta properties
Title properties
Keywords properties
Description properties
Refresh properties
Editing a script
Base properties
Link properties
About automating tasks
While creating your documents, you may want to perform the same task
numerous times. This section explains how to use the History panel to automate
repetitive tasks.
To repeat a series of steps once or twice, replay them directly from the History
panel, which records your steps as you work on a document. (For basic
information about the History panel, see “About the History panel” on page 84.)
To automate a task that you perform often, you can create a new command that
performs that task automatically.
Some mouse movements, such as selecting something in the Document window
by clicking or dragging, can’t be played back or saved as part of saved commands.
When you make such a movement, a black line appears in the History panel
(although the line does not become obvious until you perform another action). To
avoid movements that can’t be played back, use the arrow keys instead of the
mouse to move the insertion point within the Document window. To make or
extend a selection, hold down the Shift key while pressing an arrow key.
Note: If a black mouse-movement indicator line appears while you’re performing a task you
want to repeat later, you can undo back past that step and try another approach, perhaps
using the arrow keys.
160
Chapter 5
Certain other steps also aren’t repeatable, such as dragging a page element to
somewhere else on the page. When you perform such a step, a menu-command
icon with a small red X appears in the History panel.
Steps are replayed exactly as they were originally performed; you can’t modify
the steps as you replay them. For example, if you previously changed the color
of a table cell to red, applying that step to another table cell changes that cell’s
color to red as well; you can’t specify a different color when you apply the step
to a new cell.
Repeating steps
To repeat the last step you performed, use the Edit > Repeat command, or use the
keyboard shortcut Control+Y (Windows) or Command+Y (Macintosh). The
name of this command changes in the Edit menu to reflect the last step you
performed; for example, if you’ve just typed some text, the command name is
Repeat Typing. (You can’t use the Repeat command immediately after an Undo
or Redo operation.)
To repeat steps other than the most recent one, or to repeat multiple steps at once,
use the History panel.
Note that when you replay steps, the steps that are played are the steps that are
selected (highlighted), not necessarily the step currently pointed to by the slider.
To repeat one step:
In the History panel, select a step and click the Replay button. The step is
replayed, and a copy of it appears in the History panel.
To repeat a series of adjacent steps:
1
Select steps in the History panel by doing one of the following:
• Drag from one step to another. (Don’t drag the slider; just drag from the text
label of one step to the text label of another step.)
• Select the first step, then Shift-click the last step; or select the last step and then
Shift-click the first step.
Note: Although you can select a series of steps that includes a black mouse-movement
indicator line, that mouse movement is skipped when you replay the steps.
2
Click Replay.
The steps are replayed in order, and a new step, labeled Replay Steps, appears in
the History panel.
Setting Up a Document
161
To repeat nonadjacent steps:
1
Select a step, then Control-click (Windows) or Command-click (Macintosh)
other steps.
You can also Control-click or Command-click to deselect a selected step.
2
Click Replay.
The selected steps are replayed in order, and a new step, labeled Replay Steps,
appears in the History panel.
Applying steps to another object
You can apply a set of steps from the History panel to any object in the
Document window.
To apply History panel steps to a new object:
1
Select the object.
2
Select the relevant steps in the History panel, then click Replay.
Applying steps to multiple objects
If you select multiple objects in a document and then apply steps to them from
the History panel, the objects are treated as a single selection, and Dreamweaver
attempts to apply the steps to that combined selection. For example, you can’t
select five images and apply the same size change to each of them all at once; a size
change is an operation that must be applied to each individual image, not to a
collective combination of images.
To apply a series of steps to each object in a set of objects, you must make the last
step in the series select the next object in the set. The following procedure
demonstrates this principle in a particular scenario: setting the vertical and
horizontal spacing of a series of images.
162
Chapter 5
To set the vertical and horizontal spacing of a series of images:
1
Start with a document in which each line consists of a small image (such as a
graphical bullet or an icon) followed by text. The goal is to set the images off
from the text and from the other images above and below them.
2
Select the first image.
3
In the Property inspector, click the Expand button (the arrow in the lower right
corner) if necessary to see all of the image properties.
4
Enter numbers in the V Space and H Space text boxes to set the image’s spacing.
5
Click the Document window’s title bar (rather than clicking inside the
document window) to make the Document window active without moving the
insertion point.
6
Press the Left Arrow key to move the insertion point to the left of the image.
Then press the Down Arrow key to move the insertion point down one line,
leaving it just to the left of the second image in the series. Then press
Shift+Right Arrow to select that second image.
Note: Do not select the image by clicking it, or you won’t be able to replay all the steps.
7
In the History panel, select the steps that correspond to changing the image’s
spacing and selecting the next image. Click the Replay button to replay
those steps.
The current image’s spacing changes, and the next image is selected.
8
Continue to click Replay until all the images are spaced correctly.
To apply steps to an object in another document, use the Copy Steps button.
Setting Up a Document
163
Copying and pasting steps between documents
Each open document has its own history of steps. You can copy steps from one
document and paste them into another.
Note: Copy Steps (a button in the History panel) is different from Copy (in the Edit menu).
You can’t use Edit > Copy to copy steps, though you do use Edit > Paste to paste them.
Closing a document clears its history. If you know you will want to use steps from
a document after that document is closed, copy the steps with Copy Steps (or save
them as a command; see “Creating new commands from history steps” on page
165) before you close the document.
Be careful when copying steps that include a Copy or a Paste command:
• Don’t use Copy Steps if one of the steps is a Copy command; you may not be
able to paste such steps the way you want.
• If your steps include a Paste command, you can’t paste those steps, unless the
steps also include a Copy command before the Paste command.
If you paste steps into a text editor or into the Code view or the Code inspector,
they appear as JavaScript code. This can be useful for learning to write your own
scripts. For more information on using JavaScript in Dreamweaver, see
“Extending Dreamweaver: Basics” on page 536.
To reuse steps from one document in another document:
1
Start from the document containing the steps you want to reuse.
2
Select the steps in the History panel.
3
Click the History panel’s Copy Steps button to copy those steps.
4
Open the other document.
5
Place the insertion point where you want it, or select an object to apply
the steps to.
6
Choose Edit > Paste to paste the steps.
The steps are played back as they’re pasted into the document’s History panel.
The History panel shows them as only one step, called Paste Steps.
164
Chapter 5
Creating new commands from history steps
You can save a set of history steps as a named command, which then becomes
available in the Commands menu.
Create and save a new command if there’s any chance you’ll want to use a given
set of steps again in the future, especially if you want to use those steps again the
next time you start Dreamweaver; saved commands are retained permanently
(unless you delete them), while recorded commands are discarded when you exit
from Dreamweaver, and copied sequences of steps are discarded when you copy
something else.
You can edit the names of commands that you’ve placed in the Commands menu,
and you can delete them from the Commands menu, using Commands > Edit
Command List. It’s more complicated to edit and delete commands that are built
into the Commands menu (that is, commands that you didn’t explicitly add); see
“About customizing Dreamweaver menus” on page 517.
To create a command:
1
Select a step or set of steps in the History panel.
2
Click the Save As Command button, or choose Save As Command from the
History panel’s context menu.
3
Enter a name for the command and click OK.
The command appears in the Commands menu.
Note: The command is saved as a JavaScript file (or sometimes an HTML file) in your
Dreamweaver/Configuration/Commands folder.
To use a saved command:
1
Select an object to apply the command to, or place the insertion point where
you want it.
2
Choose the command from the Commands menu.
To edit the names of commands in the Commands menu:
1
Choose Commands > Edit Command List.
2
Select a command to rename and enter a new name for it.
3
Click Close.
To delete a name from the Commands menu:
1
Choose Commands > Edit Command List.
2
Select a command.
3
Click Delete, then click Close.
Setting Up a Document
165
Recording commands
Dreamweaver allows you to record a temporary command for short-term use. The
main differences between this approach and playing back steps from the History
panel (see “Repeating steps” on page 161) are as follows:
• The steps are recorded as you perform them, so you don’t have to select them in
the History panel before playing them back.
• During recording, Dreamweaver prevents you from performing nonrecordable
mouse movements (such as clicking to select something in a window, or
dragging a page element to a new location).
• If you switch to another document while recording, Dreamweaver doesn’t
record the changes you make in the other document. To determine whether
you’re recording or not at any given moment, look at the mouse pointer.
Dreamweaver retains only one recorded command at a time; as soon as you start
recording a new command, the old one is lost. To save a new command without
losing a recorded one, save the command from the History panel.
Once you’ve recorded a command, you can save it using the History panel.
To temporarily record a series of frequently used steps:
1
Choose Commands > Start Recording, or press Control+Shift+X (Windows)
or Command+Shift+X (Macintosh).
The pointer changes to indicate that you’re recording a command.
2
When you finish recording, choose Commands > Stop Recording, or press
Control+Shift+X (Windows) or Command+Shift+X (Macintosh).
To play back a recorded command:
Choose Commands > Play Recorded Command, or press Control+P (Windows)
or Command+P (Macintosh).
To save a recorded command:
1
Choose Commands > Play Recorded Command to play the command back.
A step named Run Command appears in the History panel’s step list.
2
Select the Run Command step and click the Save As Command button.
3
Enter a name for the command and click OK.
The command appears in the Commands menu.
166
Chapter 5
6
CHAPTER 6
Designing Page Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Page layout is an important part of Web design. The term page layout refers to the
way your page will look in the browser, such as where a menu or images will go.
Macromedia Dreamweaver gives you several different ways to create and control
your Web page layout.
One common method for creating a page layout is with HTML tables. Tables can
be difficult to use, however, since they weren’t originally created for Web page
layout, but for displaying tabular data.
To simplify the process of using tables for page layout, Dreamweaver provides
Layout view. In Layout view, you can design your page using tables as the
underlying structure, but avoid the traditional pitfalls of using tables. For
example, you can easily draw cells (table cells) onto your page, then customize and
move the cells where you want them. Your layout can have a fixed width, or it can
grow to fill the browser window (see “Setting layout width” on page 179).
You can still lay out your pages using tables in the traditional way (see “Using
Tables to Present Content” on page 183), or lay out pages using layers and
then convert them to tables (see “Using tables and layers for layout” on page 421).
However, the Dreamweaver Layout view is the easiest way to set up your
page layout.
To use Layout view, you must switch out of Dreamweaver Standard view.
167
To switch into Layout view:
Choose View > Table View> Layout View or click the Layout View button in
the Objects panel.
Draw Layout Cell icon
Draw Layout Table icon
Layout View icon
Show Layout Table Tabs is automatically enabled in Layout View. To turn off the table
tabs when in Layout View, choose View > Table View > Show Layout Table Tabs.
Note: If you create a table in Dreamweaver Standard view, then switch into Layout
view, your table will have empty layout cells that you may need to delete before you can
create new cells.
168
Chapter 6
About layout cells and tables
When you switch into Layout view, you can add layout cells to your page. These
cells will help you block out your page layout. For example, you could draw a cell
along the top of your page to hold a menu, a cell on the right side of the page for
submenus, and a cell next to it to hold content. It can be useful to think of the
layout in terms of a grid of rows and columns.
When you create a layout cell on your page, Dreamweaver automatically creates a
layout table as a container for the cell. A layout cell cannot exist outside of a layout
table. You can create your page layout using several layout cells within one layout
table or you can use multiple layout tables for a more advanced layout.
Using multiple layout tables isolates sections of your layout, so that they
aren’t affected by another section. This is especially useful when the content in
a layout cell may change and cause the cell to grow. As the cell grows, it affects
the other cells near it because cells cannot overlap. If you have created your
layout with multiple layout tables, the rows and columns of one table will not
affect another table.
You can also nest layout tables (inserting a layout table into an already existing
layout table). The cells inside a nested table are not constrained by the rows and
columns of the outer table. See “Drawing a nested layout table” on page 173.
Designing Page Layout
169
Drawing layout cells and tables
You can draw layout cells and tables on your page when in Layout view. If you
create a layout cell first, a layout table will also automatically be inserted to act as a
container for the layout cell. A layout cell will always be in a layout table.
Note: The Layout table that is automatically created by Dreamweaver is the width of your
Document window. You can resize it or make it autostretch as necessary.
To draw a layout cell:
1
Make sure you are in Layout view, then click the Draw Layout Cell button
in the Layout category of the Objects panel. The mouse pointer will change
to a plus sign (+).
2
Position the mouse pointer where you want to start the cell on the page,
then drag to create the layout cell. To create a number of cells without
clicking the layout cell button each time, hold down Control (Windows) or
Command (Macintosh).
The cell will appear outlined in blue on your page. Blue is the default outline color
for layout cells, see “Setting Layout View preferences” on page 182 to change it.
The size of each cell is displayed in the column header area along the top of the cell.
For more information about width, see “Setting layout width” on page 179.
170
Chapter 6
Your page layout follows a grid with columns and rows, so cells can span several
rows or several columns, but they can never overlap each other on the page.
Dreamweaver helps you maintain this structure by automatically snapping new
cells that you create to existing cells if you draw them near each other (within 8
pixels). The cells will also automatically snap to the side of the page if you draw
them close to the edge (within 8 pixels). To temporarily disable snapping, hold
down Alt (Windows) or Option (Macintosh) while drawing the cell on the page.
This does not mean that all of your cells must be the same size or width. You can
have cells in the same column that are different widths, or cells in rows that have
different heights.
Designing Page Layout
171
To draw a layout table:
1
Make sure you are in Layout view, then click the Draw Layout Table button
in the Layout category of the Objects panel. The mouse pointer will change
to a plus sign (+).
2
Position the mouse pointer on the page, then click and drag your mouse to
create the layout table. If it is the first table you have drawn on the page, it will
automatically be positioned at the top left corner of your page.
To create a number of tables without clicking the layout table button each
time, hold down Control (Windows) or Command (Macintosh).
The table will appear outlined in green on your page. Green is the default outline
color for layout tables, see “Setting Layout View preferences” on page 182 to
change it. A Layout Table tab also appears at the top of each table you draw and
helps you distinguish and select the table. The size of each table is displayed in the
Column Header area along the top of the table.
For more information about width, see “Setting layout width” on page 179.
Tables cannot overlap each other. Your page layout follows a grid with columns
and rows, so tables can span several rows or several columns, but they can never
actually overlap on the page. Dreamweaver helps you maintain this structure by
automatically snapping new tables that you create to existing tables or cells if you
draw them near each other (within 8 pixels). The tables will also automatically
snap to the side of the page if you draw them close to the edge (within 8 pixels).
To turn off snapping, hold down Alt (Windows) or Option (Mac) while drawing
the table on the page.
You can create layout tables into empty areas of your page layout, into an existing
layout table (nesting), or around existing layout cells and tables. When you create
a Layout table in a blank document, it will automatically snap to the upper left
corner of your Document window.
Note: If your page already contains content, a layout table can only be drawn below the
bottom of the content.
To draw a layout table around existing tables or cells:
172
Chapter 6
1
Make sure you are in Layout view, then click the Draw Layout Table button
in the Layout category of the Objects panel. The mouse pointer will change
to a plus sign (+).
2
Click and drag your mouse around existing layout cells or tables. The layout
table will enclose the existing cells or tables.
Drawing a nested layout table
You can draw a layout table in an already existing layout table (this creates a nested
table). The cells inside a nested table are not constrained by the rows and columns
of the outer table. You can insert multiple nested tables.
To draw a nested table:
1
Click the Draw Layout Table button in the Layout category of the Objects
panel. The mouse pointer will turn into a plus sign (+).
2
Position the mouse pointer inside the gray space of an existing layout table,
then click and drag your mouse to create the nested layout table.
A nested layout table cannot be larger than the table that contains it.
Designing Page Layout
173
Using the Dreamweaver grid
You can turn on the Dreamweaver grid to use as a guide when you draw your
layout. You can also have your layout automatically snap to the grid, and change
the grid or control the snapping behavior by specifying grid settings.
To show or hide the grid in the Document window:
Choose View > Grid > Show Grid or select Grid from the Options drop-down
menu on the toolbar.
To change grid settings:
1
Click View > Grid > Edit Grid to open the Grid Settings dialog cell.
2
Do any of the following:
• Click the arrow next to the color swatch and select a color from the palette or
type the hexadecimal number in the cell. This controls the color of the grid lines.
• Select Show Grid to show the grid in the Document window.
• Select Snap to Grid to enable snapping.
• Type the amount of spacing you want and select Pixels, Inches, or Centimeters
from the pop-up menu. This controls how far apart the grid lines will appear.
• Choose lines or dots for the grid lines.
3
Click Apply to view the changes, then OK to close the dialog box.
Adding content to a cell
You can add text, images, and other media to layout cells in Layout view just as
you would in Dreamweaver normal display (Standard view). Click in the cell
where you want to insert content, then type text or insert other files.
Content can only be inserted into a layout cell, so you must create the layout cells
first (see “Drawing layout cells and tables” on page 170). The gray spaces in your
page indicate areas that are not available for adding content, unless you insert a
layout cell there.
A layout cell expands automatically as you add material that is larger than the cell.
As the cell expands, surrounding cells may also be affected, and the column that
the cell is in will also expand.
174
Chapter 6
To add text to a cell:
Click in the layout cell where you want to add text and do one of the following:
• Type text into the cell. The cell will automatically expand as you type.
• Paste text copied from another document. Use the Paste command. For more
information, see “Inserting text and objects” on page 234.
To add an image to a cell:
1
Click in the layout cell where you want to add the image.
2
Click the Insert Image button in the Objects panel, choose Insert > Image, or
drag the Insert Image button from the Objects panel to the page.
3
In the Select Image dialog box, select an image file.
For more information, see “Setting image properties” on page 269.
Clearing automatic cell heights
After you insert content into your cells, you can clear the cell heights to remove
the setting. Dreamweaver automatically creates the cells with a specified height,
but once you add content to the cell, you no longer need the specified height.
To clear heights, do one of the following:
• Select Clear Cell Heights from the Column Header menu. The heights are
cleared and some rows may shrink.
• Select a layout table (click the table tab or edge), then click the Clear Row
Heights button in the Property inspector.
Designing Page Layout
175
Moving and resizing layout cells and tables
Every cell and table in your layout can be moved or resized, which makes it easy to
adjust your page layout. To use the Dreamweaver grid as a guide while you move
or resize your cells and tables, see “Using the Dreamweaver grid” on page 174.
To resize a cell:
1
Click the cell edge or hold down Control (Windows) or Command (Mac) and
click anywhere in the cell.
Selection handles will appear around the cell.
2
Use the selection handles to drag the cell to your chosen size.
The cell will automatically snap to existing cells (when within 8 pixels of their
borders). A layout cell cannot overlap other cells and you cannot resize it outside
the boundaries of its layout table. A layout cell is always at least as large as the
content it contains.
To move a cell:
1
Click the cell edge.
2
Drag the cell where you want it on the page or use the arrow keys. The arrow key
moves it 1 pixel at a time, holding down Shift will move it 10 pixels at a time.
To resize a table:
1
Click the table tab.
Selection handles will appear around the layout table.
2
Use the selection handles to drag the table to your chosen size.
The table will automatically snap to existing cells and tables (when within 8 pixels
of the existing cell). The layout table cannot be resized so that it will be smaller
than the boundary of the cells it contains. It also cannot be resized so that it will
overlap surrounding tables or cells.
To move a table:
176
Chapter 6
1
Click the table tab.
2
Drag the table where you want it on the page or use the arrow keys. The arrow
key moves it 1 pixel at a time, holding down Shift will move it 10 pixels at a time.
Formatting layout cells and tables
You can change the appearance of any layout cell or table in the Property Inspector.
Formatting a layout cell
You can set content alignment, width and height, and background colors in the
Property inspector.
To format a layout cell in the Property inspector:
1
Click the cell edge or hold down Control (Windows) or Command (Mac) and
click anywhere in the cell.
2
Choose Window > Properties to open the Property inspector.
3
Choose from the following appearance options:
• To change the width, choose Fixed and type a width in pixels in the box, or
choose Autostretch (see “Setting layout width” on page 179).
• To change the height, specify the height in pixels in the text box.
• To set a background color for the layout cell, choose a color from the
Bg drop-down color picker or type the hexadecimal code for the color
you want in the text box.
• To set the horizontal alignment, select from the Horz pop-up menu. You
can set the alignment of the layout cell’s contents to either Left, Center,
Right, or Default.
• To set the vertical alignment, select from the Vert pop-up menu. You can set
the alignment of the layout cell’s contents to either Top, Middle, Bottom,
Baseline, or Default.
• Select No Wrap to prevent word wrapping. If selected, the layout cell widens
to accommodate all the content, without breaking to a new line.
Designing Page Layout
177
Formatting layout tables
You can set width and height, padding and spacing, and more in the
Property inspector.
To format a layout table:
1
Click the table tab or edge.
2
Choose Window > Properties to open the Property inspector.
3
Choose from the following appearance options:
• To change the width, choose Fixed and type a width in pixels in the box, or
choose Autostretch (see “Setting layout width” on page 179).
• To change the height, specify the height in pixels in the text field.
• To set cell padding, specify the number of pixels in the CellPad field. Cell
padding is the amount of space between the content of a layout cell and the cell
boundary (or wall). When you set this above 0, all the layout cells in the layout
table you have selected will have this spacing. If you see two numbers appear in
the column header area, use the Make Widths Consistant option below.
• To set cell spacing, specify the number of pixels in the CellSpace text field. Cell
spacing is the amount of space between each layout cell. When you set this
above 0, all the layout cells in the layout table you have selected will have this
spacing. If you see two numbers appear in the column header area, use the
Make Widths Consistant option below.
• To clear the height settings for all the cells in the layout table you selected, click
the Clear Height Attributes button. If there are no elements in the table, the
table will collapse completely.
• If you have fixed-width cells in your layout, click the Make Widths Consistent
button. This automatically resets the HTML widths of each cell to match the
content within that cell. For example, if you set the width to 200 pixels, then
added content that stretches the width to 250, you will see these two numbers
displayed in the top bar of the table: 250 in quotes and 200 in parentheses.
Clicking Make Widths Consistent removes the 200-pixel setting and keeps 250.
• To remove spacer images (transparent images that are used to control the
spacing in your layout) from your layout table, click the Remove All Spacers
button. (For more information, see “Using spacer images” on page 181).
• If the layout table you selected is nested within another layout table, click
Remove Nesting to remove the nested layout table without losing any of its
contents. The layout table will disappear and the layout cells and their contents
will become part of the parent table.
178
Chapter 6
Setting layout width
There are two types of widths you can use in Layout view: Fixed width and
Autostretch. The width appears in the column header area at the top of each
column. Fixed width is a specific numeric width, such as 300 pixels, and is
displayed as a number. Autostretch sets the width to resize automatically
depending on the window size and is displayed as a wavy line. With autostretch,
your layout always fills the browser window, no matter what size window the
viewer has set. Although fixed width is the default setting, you’ll typically set some
of your layout cells or tables to be fixed width and one to be autostretch. The
settings you specify affects all the cells or tables in that column. Only one column
in a layout can be autostretch.
For example, suppose your layout has a menu bar on the left side of the page, the
title at the top, and the main content area on the right. You might set the left
column to a fixed width and the main content area to autostretch.
Designing Page Layout
179
To set autostretch width, do one of the following:
• Go to the top of the column that you want to set to autostretch and select
Make Column Autostretch from the Column Header menu. Only one column
can be autostretch.
• Select the column, then click Autostretch in the Property inspector.
When you set a column to autostretch, Dreamweaver will insert spacer images in
the fixed width columns to control the layout. A spacer image is a transparent
image that is not visible in the browser window, but is used to control spacing. See
“Using spacer images” on page 181 for more information.
To set fixed width, do one of the following:
• Go to the top of the column that you want to make a fixed width and select
Make Column Fixed Width from the column header menu.
Make Column Fixed Width automatically sets the width of the column to
match the width of the content in that column.
• In the Property inspector, click Fixed and type a numeric value.
If you enter a numeric value that is less than the width of your content,
Dreamweaver will automatically set the width to the correct pixel size.
Sometimes two numbers will appear in the Column Header menu: the actual
width of the column and the width that appears in the HTML code. This can
happen for a variety of reasons, such as inserting content that is wider than the
width you drew or specified. It is good practice to make the widths consistent, so
that only one number appears.
To make the width consistent (so only the actual width is specified):
Select Make Cell Widths Consistent from the column header menu.
180
Chapter 6
Using spacer images
A spacer image is a transparent image that does not show in the browser window,
but is used to control spacing in autostretch tables. The spacer image maintains
the width you set for each table and cell on the page. If you choose not to use
spacer images in autostretch tables, columns will change size or even visually
disappear completely if they do not contain content.
You can insert and remove spacer images in each column or let Dreamweaver add
them automatically when creating an autostretch column. Columns that contain
spacer images have a double bar along the top.
When you insert a spacer image in a column or set a column to autostretch, a
dialog box appears that asks how you want to set up your spacer image file. If you
have already set a spacer image for the site in the Dreamweaver preferences, the
dialog box does not appear. See “Setting Layout View preferences” on page 182.
To set up your spacer image:
1
Set a column to autostretch or choose Add Spacer Image from the
Column Header menu.
2
In the dialog box that appears, choose from the following options:
• Tell Dreamweaver where to create the spacer image file: If you select this option
and click OK, another dialog box appears to let you navigate to the directory in
your site where you would like to store the spacer image file, such as an images
folder. This is the recommended choice.
• Browse to an existing spacer image file: If you have already created a spacer
image file for your site, choose this option and then navigate to your spacer
image in the next dialog box that appears. The spacer image should be a 1 pixel
by 1 pixel transparent GIF.
• Turn off spacer images for autostretch columns: If you select this option, a
dialog box appears that warns you that the other columns in your layout may
collapse to a small width. When you choose not to use spacer images, the
widths of your columns will be as small as the content in them. Columns
without content will collapse to nothing. The spacer images help maintain the
structure of your layout as you originally drew it.
You can insert and remove spacer images in specific columns or remove all spacer
images in the page.
Designing Page Layout
181
To insert a spacer image into a column:
Select Add Spacer Image from the column header menu. The spacer image will be
inserted into the column. You will not see the image, but the column may shift
slightly and a double bar will appear at the top.
To remove a spacer image from a column:
Select Remove Spacer Image from the column header menu. The spacer image
will be removed and the column may shift.
To remove all spacer images from your page:
Select Remove all Spacer Images from the column header menu or click the
Remove all Spacers button in the layout table Property inspector. Your whole
layout may shift slightly or dramatically depending on your content. If there is no
content in some columns, the columns may disappear completely.
Setting Layout View preferences
Use the Layout View category in the Preferences to set or change spacer image files
and locations, as well as the colors that Layout view uses to draw the tables and
cells, and so on.
To open Layout view preferences:
Choose Edit > Preferences, then select Layout View from the Category list.
specifies whether or not Dreamweaver should automatically
insert spacer images when you make a column autostretch.
Autoinsert Spacers
Spacer Image sets
the spacer image file for your sites. Choose a site from the dropdown menu and then create a new image spacer or browse to an existing image
spacer in that site.
Cell Outline
sets the color used to draw the cell outline.
Cell Highlight sets the color that highlights the cell when you move the mouse over
or choose a cell.
Table Outline
sets the color used to draw the table outline.
Table Background
182
Chapter 6
sets the background color of the Document window.
7
CHAPTER 7
Using Tables to Present Content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tables are an extremely powerful tool for laying out data and images on an
HTML page. Tables provide Web designers ways to add vertical and horizontal
structure to a page.
Tables consist of three basic components:
• Rows (horizontal spacing)
• Columns (vertical spacing)
• Cells (the container created when a row and column intersect)
183
Use tables to lay out tabular data, to design columns on a page, or to lay out text
and graphics on a Web page. Once you create a table you can easily modify both
the appearance and the structure of the table. You can add content; add, delete,
split, and merge rows and columns; modify table, row, or cell properties to add
color and alignment; and copy and paste cells.
Note: It is recommended that you use Layout view for page layout (See “Designing Page
Layout” on page 167). Layout view is an easy way to implement your page layout with tables
as the underlying structure. Use tables in Dreamweaver to add tabular data to your page.
Inserting a table
Use the Objects panel or the Insert menu to create a new table.
To insert a table:
1
Do one of the following:
• In the Document window, place the insertion point where you want the table
to appear, then click the Table button on the Common category of the Objects
panel, or choose Insert > Table.
• Drag the Table button from the Objects panel to the desired insertion point
on the page.
The Insert Table dialog box appears.
2
In the dialog box, accept the current values or type new values.
Note: The Insert Table dialog box retains the values of the most recent settings you
entered for a table.
184
Chapter 7
• In the Rows field, specify the number of table rows.
• In the Columns field, specify the number of table columns.
• In the Cell Padding field, specify the number of pixels between the cell content and
the cell boundary (or wall). The default padding is 1 pixel. Enter 0 for no padding.
• In the Cell Spacing field, specify the number of pixels between each table cell.
The default spacing is 2 pixels. Enter 0 for no spacing.
• In the Width field, specify the width of the table as a number of pixels or as a
percentage of the browser window.
• In the Border field, specify the pixel width of the table border. Enter 0 if you
don’t want a border.
3
Click OK to create the table.
If you want to insert a table without having to first specify these options, turn off
the Show Dialog When Inserting Objects option in the General preferences. See
“Setting preferences” on page 88.
Adding content to a table cell
You can add text and images to table cells.
To add text to a table:
1
Click in a cell in which you want to add text, and do one of the following:
• Type text into the table. Table cells automatically expand as you type.
• Paste text copied from another document. See “Inserting text and objects”
on page 234.
2
Press Tab to move to the next cell or press Shift+Tab to move to the
previous cell. Pressing Tab in the last cell of a table automatically adds
another row to the table.
You can also use the arrow keys to move between cells.
Using Tables to Present Content
185
To add an image to a table:
1
Click in the cell in which you want to add an image.
2
Click the Insert Image button in the Common category of the Objects panel,
or choose Insert > Image.
3
In the Select Image Source dialog box, select an image file.
For information on setting image properties, see “Setting image properties” on
page 269.
Importing table data
Data that has been created in another application (such as Microsoft Excel) and
saved in a delimited format (separated by tabs, commas, colons, semicolons, or
other delimiters) can be imported into Macromedia Dreamweaver and
reformatted as a table.
To import table data:
1
Do one of the following:
• Choose File > Import > Import Tabular Data.
• Choose Insert > Tabular Data.
The Import Table Data or Insert Tabular Data dialog box appears, depending
on your selection. Aside from their titles, these dialog boxes are identical.
2
186
Chapter 7
In the Data File field, enter the name of the file to import.
3
From the Delimiter pop-up menu, select the delimiter format that matches the
format of the document you’re importing.
If you select Other, a field appears to the right of the pop-up menu. Enter the
delimiter that was used to separate the table data.
Note: If you do not select (or specify) the delimiter used when the file was saved, the file
will not import properly, and your data will not be correctly formatted in a table. No error
or warning message displays to alert that there is a problem.
4
For Table Width, select one of the following options:
• Select Fit to Data to create a table that adjusts to the longest text string in each
table column.
• Select Set to specify a table width as a percentage of the browser window or as a
number of pixels.
5
Select table formatting options:
• In the Cell Padding field, specify the number of pixels between the cell content
and the cell boundary (or wall).
• In the Cell Spacing field, specify the number of pixels between each table cell.
• In the Format Top Row field, select from four formatting options: no
formatting, bold, italic, or bold italic.
• In the Border field, specify the pixel width of the table border. Enter 0 if you
don’t want a border.
6
Click OK.
Selecting table elements
With a single gesture you can select an entire table, row, or column, or a
contiguous range of cells within the table. Once the table or individual cells are
selected, you can do the following:
• Modify the appearance of selected cells or the text contained in them. See
“Formatting tables and cells” on page 189.
• Copy and paste adjacent cells. See “Copying and pasting cells” on page 199.
You can also select multiple nonadjacent cells in a table and modify the properties
of those cells. You cannot copy or paste nonadjacent cell selections.
Using Tables to Present Content
187
To select the entire table, do one of the following:
• Click the top left corner of the table, or click anywhere on the right or
bottom edge.
• Click once in the table and choose Modify > Table > Select Table.
• Click once in the table and choose Edit > Select All.
• Position the insertion point anywhere inside the table, and select the
tag in the tag selector at the bottom left corner of the Document window.
Selection handles appear around the table when it is selected.
To select rows or columns, do one of the following:
• Position the insertion point at the left margin of a row or at the top of a
column. Click when the selection arrow appears.
• Click in a cell, and drag across or down to select multiple rows or columns.
To select one or more cells, do one of the following:
• Click in a cell, and drag down or across to another cell.
• Click in one cell and then Shift-click another cell. All of the cells within the
rectangular region are selected.
188
Chapter 7
To select nonadjacent cells, do one of the following:
• Press Control (Windows) or Command (Macintosh) and click in the table to
add cells, rows, or columns to the selection.
• Select multiple cells in the table, and then press Control (Windows) or
Command (Macintosh) and click cells, rows, or columns to deselect
individual cells.
Formatting tables and cells
You can change the appearance of tables by setting properties for the table and
table cells or by applying a preset design to the table. See “Setting table properties”
on page 190, “Setting column, row, and cell properties” on page 191, and “Using
a design scheme to format a table” on page 193.
To format text in tables, you can apply formatting to selected text or use styles. See
“Inserting and Formatting Text” on page 233.
About table tags
When formatting tables in the Document window, you can define properties that
apply to the entire table or to selected rows, columns, or cells in the table. When a
property such as background color or alignment is set one way for the whole table
and another way for individual table cells, it is useful to understand how
Dreamweaver interprets the HTML source code.
When the same property is set more than once in a table, it is interpreted in this
way: cell formatting, which is part of the td tag, takes precedence over table row
formatting (the tr tag), which in turn takes precedence over table formatting (the
table tag). Therefore, if you specify a background color of blue for a single cell
and then set the background color of the entire table to yellow, the blue cell will
not change to yellow, since the td tag takes precedence over the table tag.
In the following example, the table tag sets a background color of yellow
(#FFFF99) for the entire table. The first tr tag changes those cells to green
(#33FF66), and the second td tag changes the top center cell to blue (#333399).
The tr and td tags in the bottom row have not been altered, so those cells take on
the table color, which is yellow.
This paragraph is controlled by the .Blue
custom style and h1
HTML tag style.Except this sentence is
controlled by the .Red style.
Now we're back to the .Blue style.
Using the CSS Styles panel
Use the CSS Styles panel to apply custom CSS styles to the current selection. The
CSS Styles panel displays custom (class) CSS styles only; redefined HTML tags
and CSS selector styles do not appear in the CSS Styles panel, because they are
automatically applied to any text controlled by the specified tag or selector. (If you
want to simply cut and paste reusable but not updatable and customizable styles,
use the HTML Styles panel.)
Choose Window > CSS Styles to display the CSS Styles panel.
displays the tag of the current selection. Choose a tag from the pop-up
menu to select a different tag.
Apply
opens the New Style dialog box. Create a new style for a particular
document or create a new external style sheet.
New Style
Attach Style Sheet opens the Select Style Sheet File dialog box. Select an external
style sheet to attach to your current document.
Edit Style Sheet opens the Edit Style Sheet dialog box. Edit any of the styles in the
current document or in an external style sheet.
See also “Using CSS style sheets” on page 248.
Note: Right-click (Windows) or Control-click (Macintosh) the CSS Styles panel to open a
context menu that includes Edit, Duplicate, Delete, Apply New Style, Edit Style Sheet, and
Attach Style Sheet commands.
Inserting and Formatting Text
255
Setting CSS Styles preferences
CSS Styles preferences control how Dreamweaver writes the code that defines CSS
styles. CSS styles can be written in a shorthand form that some people find easier
to work with. Some older versions of browsers do not correctly interpret the
shorthand. Unless you want Dreamweaver to write styles in shorthand, there is no
reason to change any of the CSS Style preferences.
Choose Edit > Preferences and select CSS Styles to display CSS Styles Sheet
Format preferences. See also “Using CSS style sheets” on page 248.
Use Shorthand For determines
which CSS style attributes Dreamweaver writes
in shorthand.
When Editing CSS Styles Use Shorthand controls
whether Dreamweaver rewrites
existing styles in shorthand. Choose If Original Used Shorthand to make
Dreamweaver leave all styles as they are. Choose According to Settings Above to
make Dreamweaver rewrite styles in shorthand according to the attributes
specified in the Use Shorthand For checkboxes.
Converting CSS styles to HTML tags
If you have used CSS styles to specify text formatting (such as the family, size,
color, and decoration of fonts) and later decide that you want to make the
formatting viewable on a 3.0 browser, you can use the File > Convert > 3.0
Browser Compatible command to convert as much of the style information as
possible to HTML tags.
Note: Not all CSS styles can be converted to HTML, because HTML tags do not cover or
support all the attributes possible in CSS.
To convert a file that uses CSS styles to a 3.0 browser–compatible file:
1
Choose File > Convert > 3.0 Browser Compatible.
2
In the dialog box that appears, select CSS Styles to HTML Markup.
When you choose the Layers to Tables option, Dreamweaver replaces all layers
with a single table that preserves the original positioning.
CSS styles are replaced, where possible, with HTML tags such as b and font.
Any CSS markup that cannot be converted to HTML is removed. See “CSS to
HTML markup conversion table” on page 257 for information on which styles
are converted and which are removed.
3
Click OK. Dreamweaver opens the converted file in a new, untitled window.
Note: You must perform this conversion procedure each time you change the original file in
order to update the 3.0-compatible file. For this reason, it’s best to perform this procedure
only after you are completely satisfied with your original file.
256
Chapter 10
CSS to HTML markup conversion table
The CSS attributes listed in the following table are converted to HTML markup
with the File > Convert > 3.0 Browser Compatible command. (See “Converting
CSS styles to HTML tags” on page 256.) Attributes not listed in the table
are removed.
CSS attribute
Converted to
color
FONT COLOR
font-family
FONT FACE
font-size
FONT SIZE="[1-7]"
font-style: oblique
I
font-style: italic
I
font-weight
B
list-style-type: square
UL TYPE="square"
list-style-type: circle
UL TYPE="circle"
list-style-type: disc
UL TYPE="disc"
list-style-type: upper-roman
OL TYPE="I"
list-style-type: lower-roman
OL TYPE="i"
list-style-type: upper-alpha
OL TYPE="A"
list-style-type: lower-alpha
OL TYPE="a"
list-style
UL or OL with TYPE as
appropriate
text-align
P ALIGN or DIV ALIGN as
appropriate
text-decoration: underline
U
text-decoration: line-through
STRIKE
Inserting and Formatting Text
257
Checking spelling
Use the Check Spelling command in the Text menu to check the spelling in the
current document. The Check Spelling command ignores HTML tags and
attribute values.
By default, the spelling checker uses the U.S. English spelling dictionary. To
change the dictionary, choose Edit > Preferences > General and select a different
dictionary from the pop-up menu. Dictionaries for additional languages are
available for downloading from the Dreamweaver Support Center.
Running a spell check using the Check Spelling dialog box
Use the following options in the Check Spelling dialog box to check the spelling
in your document. (To display the dialog box, choose Text > Check Spelling.)
Add to Personal adds the unrecognized word to your personal dictionary.
To remove words from your personal dictionary, edit the Personal.dat file in
a text editor. This file can be found in Dreamweaver 4/Configuration/
Dictionaries.
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 box or with the selection in the Suggestions list.
Change All replaces
all instances of the unrecognized word in the same manner.
Searching and replacing text, tags,
and attributes
You can search the current document, selected files, a directory, or an entire site
for text, text surrounded by specific tags, or HTML tags and attributes. Note that
you use different commands to search for files, and to search for text and/or
HTML 1 tags within files: Locate in Local Site and Locate in Remote Site search
for files, while Edit > Find and Replace search for text and tags within files.
To search for text and/or HTML within documents:
1
Choose from the following options:
• In Design view, from the Document or Site window, choose Edit >
Find and Replace.
• While in Code view, right-click (Windows) or Control-click (Macintosh)
and choose Find and Replace from the context menu.
258
Chapter 10
2
In the Find or Replace dialog box that appears, use the Find In option to
specify which files to search:
• Current Document confines the search to the active document. This option is
available only when you choose Find or Replace with the Document window
active, or from the context menu in the Code inspector.
• Entire Local Site expands the search to all the HTML documents, library files,
and text documents in the current site. After you choose Current Site, the
name of the current site appears to the right of the pop-up menu. If this is not
the site you want to search, choose a different site from the current site’s popup menu in the Site window.
• Selected Files in Site confines the search to the files and folders that are
currently selected in the Site window. This option is available only when you
choose Find or Replace with the Site window active (that is, in front of the
Document window).
• Folder confines the search to a specific group of files. After choosing Folder,
click the folder icon to browse to and select the directory you want to search.
3
Use the Search For option to specify the kind of search you want to perform.
• Source Code lets you search for specific text strings in the HTML source code.
See “About HTML source code searches” on page 260.
• Text lets you search for specific text strings in the Document window. A text
search ignores any HTML that interrupts the string. For example, a search for
the black dog would match both the black dog and the black dog.
• Text (Advanced) lets you search for specific text strings that are either within or
not within a tag or tags. For example, in a document that contains the
following HTML, searching for tries not inside i would find only the second
instance of the word tries: John tries to get his work done on
time, but he doesn’t always succeed. He tries very hard. See
“Searching for text contained in specific tags” on page 262.
• Specific Tag lets you search for specific tags, attributes, and attribute values,
such as all td tags with valign set to top. See “Searching for HTML tags and
attributes” on page 260.
Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return,
Shift+Return, or Command+Return (Macintosh), adds line breaks within the text search
fields, allowing you to search for a Return character. Be sure to deselect the Ignore
Whitespace Differences option when performing this search, if you’re not using regular
expressions. Note that this finds a Return character in particular, not simply the
occurrence of a line break; for instance, it doesn’t find a tag or a
tag.
Return characters appear as spaces in the Design view, not as line breaks.
Inserting and Formatting Text
259
4
Use the following options to expand or limit the search:
• The Match Case option limits the search to text that exactly matches the case
of the text you want to find. For example, if you search for the brown derby,
you will not find The Brown Derby.
Note: The Ignore Whitespace Differences option, when selected, treats all whitespace as a
single space for the purposes of matching. For example, with this option selected, this text
would match this text but not thistext. This option is not available when the Use
Regular Expressions option is selected; you must explicitly write your regular expression to
ignore whitespace. Note that
and tags do not count as whitespace.
• The Use Regular Expressions option causes certain characters and short strings
(such as ?, *, \w, and \b) in your search string to be interpreted as regular expression
operators. For example, a search for the b\w*\b dog will match both the black
dog and the barking dog. See “About regular expressions” on page 264.
Note: If you are working in Code view and make changes to your document, and try to find
and replace anything other than source code, a dialog box appears letting you know that
Dreamweaver is synchronizing the two views before doing the search. For more information
on synchronizing views, see “Using the Code view (or Code inspector)” on page 330.
About HTML source code searches
Use the Source Code option in the Find or Replace dialog box to search for
specific text strings in the HTML source code. For example, a search for black dog
in the following code would produce two matches (in the alt attribute and in the
first sentence):
We saw several black dogs in the park yesterday. The black
dog we liked best was called Barnaby.
The phrase black dog also appears in the second sentence, but it does not match
because it is interrupted by a link.
See “Searching and replacing text, tags, and attributes” on page 258 for step-bystep instructions on initiating a search.
Searching for HTML tags and attributes
Use the Specific Tag option in the Find or Replace dialog box to search for specific
tags, attributes, and attribute values. For example, you can search for all img tags
with no alt attribute. See “Searching and replacing text, tags, and attributes” on
page 258 for information about the various types of searches.
260
Chapter 10
To perform a tag search:
1
Choose Edit > Find and Replace, and specify which files to search, as detailed
in “Searching and replacing text, tags, and attributes” on page 258.
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,
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 cannot 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 heading
1, the font tag is contained within the b tag.
• Not Containing specifies text or a tag that cannot 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 cannot be inside of for it to match.
5
Click the Plus (+) button and repeat step 4 to further limit the search.
6
Initiate the search:
• Click Find Next to highlight the next instance of the search text in the
current document.
• Click Find All to generate a list of all the instances of the search text in the
current document.
• Click Find Next to highlight the next instance of the search text in the current
document or if there is none, open the next document that contains the search text.
• Click Find All to generate a list of all the instances of the search text in the
current document or, if you are searching a directory or site, generate a list of
documents that contain the search text.
Inserting and Formatting Text
261
Searching for text contained in specific tags
Use the Text (Advanced) option in the Find or Replace dialog box to search for
specific text strings that are either within or not within a set of container tags. For
example, you can search for the word Untitled between
tags to find all
the untitled pages on your site. See “Searching and replacing text, tags,
and attributes” on page 258 for information about the various types of searches.
To perform an advanced text search:
1
Choose Edit > Find and Replace, and specify which files to search, as detailed
in “Searching and replacing text, tags, and attributes” on page 258.
2
Choose Text (Advanced) from the Search For pop-up menu.
3
Enter the text you want to search for in the text field adjacent to the Search For
pop-up menu.
For example, type the word Untitled.
4
Choose Inside Tag or Not Inside Tag, and then choose a tag from the adjacent
pop-up menu.
For example, choose Inside Tag and then title.
5
Click the Plus (+) button to limit the search to tags with a specific attribute
or attributes.
Since the <title> tag has no attributes, you won’t need to use this option to
find all the untitled pages on your site.
6
262
Chapter 10
Click Find Next to open the next document that contains the search text, or
click Find All to generate a list of documents that contain this text.
Saving search patterns
You can save search patterns for later use by clicking the Save Query button in the
Find or Replace dialog box. Saving a query is a good idea if you regularly perform
the same search and do not want to reconstruct the search pattern every time. For
example, you might want to strip out nonstandard tags from documents created
with another visual HTML editor, or to confirm that all images in a file have
height, width, and alt attributes before the document goes live on the Web.
To save a search pattern:
1
Set the parameters for the search by following the steps outlined in “Searching
and replacing text, tags, and attributes” on page 258.
If you are performing a tag or advanced text search, see “Searching for HTML
tags and attributes” on page 260 or “Searching for text contained in specific
tags” on page 262 for information about setting additional search parameters.
2
Click the Save Query button (identified with a disk icon).
The default location where queries are saved is the Configuration/Queries
folder inside the Dreamweaver application folder.
3
In the dialog box that appears, give the file a name that identifies the query
and click Save.
For example, if the search pattern involves looking for img tags with no alt
attribute, you might name the query img_no_alt.dwr. Find queries end in the
extension .dwq; Replace queries end in the extension .dwr.
To recall a search pattern:
1
Choose Edit > Find and Replace.
2
Click the Load Query button (identified with a folder icon).
The Load Query dialog box automatically opens in the Configuration/Queries
folder. You can navigate to another folder if you have saved queries elsewhere.
3
Select a query file and click Open.
If you are in the Find dialog box, only Find queries (.dwq files) are available. If
you are in the Replace dialog box, both Find queries (.dwq files) and Replace
queries (.dwr files) are available.
4
Click Find Next, Find All, Replace, or Replace All to initiate the search.
Inserting and Formatting Text
263
About regular expressions
Regular expressions are patterns that describe character combinations in text. Use
them in your searches to help describe concepts such as “sentences that begin with
‘The’” and “attribute values that contain a number.” The following table lists the
special characters in regular expressions, their meanings, and usage examples.
To search for text containing one of the special characters in the table, “escape” the
special character by preceding it with a backslash. For example, to search for the
actual asterisk in the phrase some conditions apply*, your search pattern
might look like this: apply\*. If you don’t escape the asterisk, you’ll find all the
occurrences of “apply” (as well as any of “appl”, “applyy”, and “applyyy”), not just
the ones followed by an asterisk.
Character
Matches
Example
^
Beginning of input or line.
^T matches “T” in “This
good earth” but not in
“Uncle Tom’s Cabin”
$
End of input or line.
h$ matches “h” in “teach” but not in
“teacher”
*
The preceding character 0 or
more times.
um* matches “um” in “rum”, “umm”
The preceding character 1 or
more times.
um+ matches “um” in “rum” and
?
The preceding character at most
once (that is, indicates that the
preceding character is optional).
st?on matches “son” in
“Johnson” and “ston” in
“Johnston” but nothing in
“Appleton” or “tension”
.
Any single character except
newline.
.an matches “ran” and “can” in the
+
x|y
Either x or y.
in “yummy”, and “u” in “huge”
“umm” in “yummy” but nothing in
“huge”
phrase “bran muffins can be tasty”
FF0000|0000FF matches
“FF0000” in
bgcolor=”#FF0000” and
“0000FF’” in font
color=”#0000FF”
{n}
{n,m}
264
Chapter 10
Exactly n occurrences of the
preceding character.
o{2} matches “oo” in “loom” and
At least n and at most
m occurrences of the
preceding character.
F{2,4} matches “FF” in
the first two o’s in “mooooo” but
nothing in “money”
“#FF0000” and the first four F’s in
#FFFFFF
Character
Matches
[abc]
Any one of the characters enclosed [e-g] matches “e” in “bed”, “f” in
in the brackets. Specify a range of “folly”, and ”g” in “guard”
characters with a hyphen (for
example, [a-f] is equivalent to
[abcdef]).
[^abc]
Any character not enclosed in
the brackets. Specify a range of
characters with a hyphen (for
example, [^a-f] is equivalent
to [^abcdef]).
[^aeiou] initially matches “r”
A word boundary (such as a
space or carriage return).
\bb matches “b” in “book” but
A nonword boundary.
\Bb matches “b” in “goober” but
\b
\B
Example
in “orange”, “b” in “book”, and “k”
in “eek!”
nothing in “goober” or “snob”
nothing in “book”
\d
Any digit character.
Equivalent to [0-9].
\d matches “3” in “C3PO” and “2”
in “apartment 2G”
\D
Any nondigit character. Equivalent
to [^0-9].
\D matches “S” in “900S” and “Q”
in “Q45”
\f
Form feed.
\n
Line feed.
\r
Carriage return.
\s
Any single white-space
character, including space,
tab, form feed, or line feed.
\sbook matches ”book” in “blue
Any single non-white-space
character.
\Sbook matches “book” in
\S
book” but nothing in “notebook”
“notebook” but nothing in
“blue book”
\t
A tab.
\w
b\w* matches “barking” in “the
Any alphanumeric character,
including underscore. Equivalent to barking dog” and both “big” and
“black” in “the big black dog”
[A-Za-z0-9_].
Inserting and Formatting Text
265
Character
Matches
Example
\W
Any non-alphanumeric character.
Equivalent to [^A-Za-z0-9_].
\W matches “&” in “Jake & Mattie”
and “%” in “100%”
Control+Enter
or Shift+Enter
(Windows), or
Control+
Return or
Shift+Return or
Command+
Return
(Macintosh)
Return character. Be sure to
deselect the Ignore Whitespace
Differences option when searching
for this, if not using regular
expressions. Note that this matches
a particular character, not the
general notion of a line break; for
instance, it doesn’t match a <br>
tag or a <p> tag. Return characters
appear as spaces in the Document
window, not as line breaks.
Use parentheses to set off groupings within the regular expression to be referred to
later; use $1, $2, $3, and so on (use ($) in the Find field and use the backslash (\)
in the Replace field), to refer to the first, second, third, and later parenthetical
groupings. For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/
$1/$3 swaps the day and month in a date separated by slashes (to convert between
American-style dates and European-style dates).
266
Chapter 10
11
CHAPTER 11
Inserting Images
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Three graphic file formats are generally used in Web pages—GIF, JPEG, and
PNG. Currently, only GIF and JPEG file formats are fully supported by most
browsers. Microsoft Internet Explorer (4.0 and later) and Netscape Navigator
(4.04 and later) partially support the display of PNG images. Unless you are
targeting your site to users with browsers that support the PNG format, use
GIFs or JPEGs for broader appeal.
GIF (Graphic Interchange Format) files use a maximum of 256 colors. GIFs are
best for displaying noncontinuous-tone images or those with large areas of flat
colors, such as navigation bars, buttons, icons, logos, or other images with
uniform colors and tones. You can create GIFs with transparent backgrounds;
interlaced GIFs, which slowly come into focus as an image loads in the browser; or
animated GIFs, which are a number of GIFs saved as a single file.
JPEG (Joint Photographic Experts Group) file format is the superior format for
photographic or continuous-tone images, because JPEG files can contain millions
of colors. JPEG files tend to be larger than GIF and PNG files. As the quality of a
JPEG file increases, so does the file size and the file download time. You can often
strike a good balance between the quality of the image and the file size by
compressing the JPEG file.
file format is a patent-free replacement for GIFs
that includes support for indexed-color, grayscale, and true-color images, and
alpha channel support for transparency. PNG is the native file format of
Macromedia Fireworks. PNG files retain all the original layer, vector, color, and
effects information (such as a drop shadow), and all elements are fully editable at
all times. Files must have the .png file extension to be recognized as PNG files by
Macromedia Dreamweaver.
PNG (Portable Network Group)
You can insert GIFs, JPEGs, and PNGs in Dreamweaver documents. In addition
to inserting an image in a page, you can also insert an image in a table, in a form,
or in a layer.
267
As you add images, you can select and modify them directly in the Document
window. For example, you can use the Property inspector to add links to an
image, add a border around an image, set an image’s size, add space around an
image, and set the alignment. To create interactive graphics, such as rollover
images, navigation bars, or image maps, use Dreamweaver behaviors.
To set up an efficient production workflow, use the Dreamweaver Preferences
dialog box to set a preferred image editor (such as Fireworks). Setting an image
editor lets you launch the editor and edit an image while working in
Dreamweaver. When using Fireworks as the preferred editor, you can make edits
in Fireworks and with a single click automatically update the image in the
Dreamweaver file. For more information, see “Using Dreamweaver and
Fireworks Together” on page 281.
In addition to inserting images in a page, you can set a page background image;
see “Defining a background image or page color” on page 153. To overlap images,
insert them in layers; see “Using Dynamic Layers” on page 407.
Inserting an image
When you insert an image into a Dreamweaver document, Dreamweaver
automatically generates a reference to the file in the HTML source code. To
ensure that this reference is correct, the image file must be in the current site. If it
is not in the current site, Dreamweaver asks whether you want to copy the file to
the root folder.
To insert an image:
1
Do one of the following:
• Place the insertion point where you want the image to appear in the Document
window, and then choose Insert > Image or click the Insert Image button on
the Common category of the Objects panel.
• Place the insertion point where you want the image to appear in the Document
window, and then press Control+Alt+I (Windows) or Command+Option+I
(Macintosh).
• Drag the Insert Image button from the Objects panel to the desired location in
the Document window.
• Drag an image from the Assets panel to the desired location in the Document
window; then skip to step 3.
• Drag an image from the Site Window 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.
268
Chapter 11
2
In the dialog box that appears, click Browse to choose a file, or type the path
for the image file.
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.
3
Set image properties in the Property inspector.
See “Setting image properties” on page 269.
Setting image properties
To set the following image properties, select an image in the Document window;
then choose Window > Properties to display the Property inspector. The Property
inspector initially displays the most commonly used properties. To see all
properties, click the expander arrow in the lower right corner.
Use the text field below the thumbnail image to set an image so you can refer to
the image when using a Dreamweaver behavior (such as a Swap Image) or when
using a scripting language such as JavaScript or VBScript.
W and H reserve space for an image on a page as it loads in a browser.
Dreamweaver automatically fills these fields with the image’s original size. Default
and unlabeled values are pixels. You can also specify the following units: pc (picas),
pt (points), in (inches), mm (millimeters), and cm (centimeters), and
combinations thereof, such as 2in+5mm; Dreamweaver converts the values to
pixels in the HTML source code.
If you set W and H values that do not correspond to the actual width and height
of the image, your image may not display properly in a browser. (To restore the
original values, click the field labels.) You can change these values to scale the
display size of this instance of the image, but this does not reduce download time,
because the browser downloads all image data before scaling the image. To reduce
download time and to ensure that all instances of an image appear at the same
size, use an image-editing application to scale images.
Src specifies the source file for the image. Click the folder icon to browse to the
source file, or type the path. For information on entering paths, see “Absolute
paths” on page 354.
Inserting Images
269
Link specifies
a hyperlink for the image. Drag the Point-to-File icon to a file in
the Site window, click the folder icon to browse to a document on your site, or
type manually the URL path.
Align aligns an image and text on the same line. See “Aligning elements” on page 271.
Alt specifies
alternative text that appears in place of the image for text-only
browsers or for browsers that have been set to download images manually. For
visually impaired users who use speech synthesizers with text-only browsers, the
text is spoken out loud. In some browsers, this text also appears when the pointer
is over the image.
Map Name Field enables you to create client-side image maps. See “Creating
image maps” on page 273.
V Space and H Space add
space, in pixels, along the sides of the image. V Space
adds space along the top and bottom of an image. H Space adds space along the
left and right of an image.
Target specifies
the frame or window in which the linked page should load. (This
option is not available when the image isn’t linked to another file.) The names of
all the frames in the current document appear in the Target list. You can also
choose from the following reserved target names:
•
•
_blank
•
_self
•
_top loads the linked file into the full browser window, thereby removing
all frames.
loads the linked file into a new, unnamed browser window.
loads the linked file into the parent frameset or window of the frame
that contains the link. If the frame containing the link is not nested, the linked
file loads into the full browser window.
_parent
loads the linked file into the same frame or window as the link. This
target is the default, so you usually don’t need to specify it.
Low Src specifies
the image that should load before the main image. Many
designers use a 2-bit (black and white) version of the main image because it loads
quickly and gives visitors an idea of what they’re waiting to see.
Border sets
the width, in pixels, of a border around the image. Enter 0 for
no border. You can apply a border to both linked and unlinked images. You set
link color in the Page Properties dialog box. If you set a border for an image
which has no links, the border will be the same color as text in the paragraph in
which the image is inserted.
Edit launches
the image editor you specified in External Editors preferences and
opens the selected image. When you save your image file and return to
Dreamweaver, Dreamweaver updates the Document window with the edited
image. See “Using an external image editor” on page 277.
Reset Size resets
270
Chapter 11
the W and H values to the original size of the image.
Aligning elements
Use the image Property inspector to set the alignment of an image in relation to
other elements in the same paragraph or line. HTML does not provide a way to
wrap text around the contours of an image, as you can with some word processing
applications. You can align an image to text, another image, a plugin, or other
elements in the same line. You can also use the alignment buttons (left, right, and
center) to set the horizontal alignment of an image.
Browser Default generally
specifies a baseline alignment. (The default may differ
depending on the site visitor’s browser.)
Baseline and Bottom align
the baseline of the text (or other element) to the
bottom of the selected object.
Top aligns an image to the top of the tallest item (image or text) in the current line.
Middle aligns
the text baseline with the middle of the selected object.
TextTop aligns the selected object with the top of the tallest character in the text line.
Absolute Middle aligns
to the absolute middle of the current line.
Absolute Bottom aligns
to the absolute bottom (which includes descenders, as in
the letter g) with the bottom of the selected object.
Left places the selected object on the left margin, wrapping text around it to the
right. If left-aligned text precedes the object on the line, it generally forces leftaligned objects to wrap to a new line.
Right places
the object on the right margin, wrapping text around the object to
the left. If right-aligned text precedes the object on the line, it generally forces
right-aligned objects to wrap to a new line.
Inserting Images
271
Resizing images and other elements
You can visually resize elements such as images, plugins, Macromedia Shockwave
or Flash movies, applets, and ActiveX controls in the Dreamweaver Document
window. Visual resizing helps you determine how an element affects the layout at
different dimensions.
Resizing resets the width and height attributes of the element. The W and H
fields in the Property inspector display the current width and height of the
element as you resize it. The element’s file size does not change.
Macromedia Flash movies and other vector-based elements are scalable and do not
lose quality as you resize them. However, bitmap elements such as GIF, JPEG, and
PNG images may become pixelated or distorted if you increase or decrease their
width and height attributes. To maintain the same aspect ratio, hold down the
Shift key while you resize a bitmap. However, it is recommended that you visually
resize bitmaps in Dreamweaver only to determine the layout. Once you have
determined the ideal size for your image, edit the file in an image-editing
application. Editing the image may also reduce its file size and thus reduce
download time.
To resize an element:
1
Select the element (for example, an image or Shockwave movie) in the
Document window.
Resize handles appear at the bottom and right sides of the element and in the
bottom right corner. If resize handles don’t appear, either click away from the
element you want to resize and then reselect it, or click <img> in the tag
selector to select the element.
2
Resize the element by doing one of the following:
• To adjust the width of the element, drag the selection handle on the right side.
• To adjust the height of the element, drag the bottom selection handle.
• To adjust the width and the height of the element at the same time, drag the
corner selection handle.
• To preserve the element’s proportions (its width-to-height ratio) as you adjust
its dimensions, Shift-drag the corner selection handle.
Elements can be visually resized to a minimum of 8 x 8 pixels. To adjust the width
and height of an element to a smaller size (for example, 1 x 1 pixel), use the
Property inspector to enter a numeric value.
To return a resized element to its original dimensions, in the Property inspector,
delete the values in the W and H fields, or click the Resize Size button.
272
Chapter 11
Creating image maps
An image map is an image that has been divided into regions, or “hotspots”; when
a hotspot is clicked an action occurs, for example a new file opens. Use the image
Property inspector to graphically create and edit client-side image maps.
Client-side image maps store the hyperlink information in the HTML document,
not in a separate map file as do server-side image maps. When a site visitor clicks a
hotspot in the image, the associated URL is sent directly to the server. This makes
client-side image maps faster than server-side image maps, because the server does
not need to interpret where the visitor clicked. Client-side image maps are
supported by Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all versions
of Internet Explorer.
Dreamweaver does not alter references to server-side image maps in existing
documents; you can use both client-side image maps and server-side image maps
in the same document. However, browsers that support both types of image maps
give priority to client-side image maps. To include a server-side image map in a
document, you must write the appropriate HTML code.
To create a client-side image map:
1
Select the image.
2
Click the expander arrow in the lower right corner of the Property inspector to
see all properties.
3
In the Map Name field, type a unique name for the image map.
Note: If you are using multiple image maps in the same document, make sure each map
has a unique name.
4
To define the image map areas, do one of the following:
• Select the circle tool and drag the pointer over the image to create a
circular hotspot.
• Select the rectangle tool and drag the pointer over the image to create a
rectangular hotspot.
• Select the polygon tool and define an irregularly shaped hotspot by clicking
once for each corner point. Click the arrow tool to close the shape.
Once the hotspot is created, the hotspot Property inspector appears. (For
information about the hotspot Property inspector, see “Setting hotspot
properties” on page 274.)
5
In the hotspot Property inspector’s Link field, click the folder icon to browse to the
file you want opened when the hotspot is clicked. Alternatively, type the file name.
Inserting Images
273
6
To set where the linked file opens, type the name of the window in which the
file should open in the Target field. Alternatively, choose a frame name from the
Target pop-up menu.
7
In the Alt field, type the text you want to appear as alternative text in
text-only browsers.
Some browsers display this text as a tooltip when the user pauses the mouse
pointer over the hotspot.
8
Repeat steps 4 through 7 to define additional hotspots in the image map.
9
When you’re finished mapping the image, click a blank area in the document to
change the Property inspector.
Setting hotspot properties
The properties listed below appear in the Property inspector when a hotspot
is selected.
specifies the image map’s name. Create a unique name for each image map
within a document.
Map
specifies the file or URL to be displayed when the user clicks the hotspot. If
you are linking to a file from within the same site, enter a path that is relative to
your document. (File names that begin with file:// are not relative).
Link
Target specifies the frame or window in which the linked page should load. The
target option isn’t available until the selected hotspot contains a link.
The names of all the frames in the current document appear in the list. If you
specify a frame that doesn’t exist, when the document opens in a browser, the
linked page loads into a new window that has the name you specified. You can
also choose from the following reserved target names:
•
•
_blank
•
_self
•
_top loads the linked file into the full browser window, thereby removing
all frames.
loads the linked file into a new, unnamed browser window.
loads the linked file into the parent frameset or window of the frame
that contains the link. If the frame containing the link is not nested, the linked
file loads into the full browser window.
_parent
loads the linked file into the same frame or window as the link. This
target is the default, so you usually don’t need to specify it.
specifies alternative text that appears in place of the image for text-only
browsers or for browsers that have been set to download images manually.
Alt
274
Chapter 11
Modifying an image map
You can easily edit the hotspots you create in an image map. You can move a
hotspot area, resize hotspots, or move a hotspot forward or back in layer.
You can also copy an image with hotspots from one document to another, or copy
one or more hotspots from an image and paste them on another image; hotspots
associated with the image are also copied to the new document.
To select multiple hotspots in an image map:
1
Use the pointer hotspot tool to select a hotspot.
2
Do one of the following:
• Shift-click the other hotspots you want to select.
• Press Control+A (Windows) or Command+A (Macintosh) to select all of
the hotspots.
To move a hotspot:
1
Use the pointer hotspot tool to select the hotspot you want to move.
2
Do one of the following:
• Drag the hotspot to a new area.
• Use the Shift + arrow keys to move a hotspot by 10 pixels in the selected direction.
• Use the arrow keys to move a hotspot by 1 pixel in the selected direction.
To resize a hotspot:
1
Use the pointer hotspot tool to select the hotspot you want to resize.
2
Drag a hotspot selector handle to change the size or shape of the hotspot.
Inserting Images
275
Creating a rollover image
A rollover is an image that changes when the pointer moves across it. A rollover
actually consists of two images: the primary image (the image displayed when the
page first loads) and the rollover image (the image that appears when the pointer
moves over the primary image). Both images in a rollover should be the same size;
if the images are not the same size, Dreamweaver automatically resizes the second
image to match the properties of the first image.
Rollover images are automatically set to respond to the MouseOver event. For
information about setting an image to respond to a different event (for example, a
mouse click) or about editing a rollover image to display a different image, see
“Swap Image” on page 467.
A more complex form of rollover image is a navigation bar. To create a navigation
bar, use the Insert > Interactive Images > Navigation Bar command; see “Inserting
a navigation bar” on page 372.
To create a rollover:
1
In the Document window, place the insertion point where you want the
rollover to appear.
2
Insert the rollover by using one of these methods:
• In the Objects panel’s Common category, click the Insert Rollover Image icon.
• In the Objects panel’s Common category, drag the Insert 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 field, type a name for the rollover image.
4
In the Original Image field, click Browse and select the image or type the path
of the image you want displayed when the page loads.
5
In the Rollover Image field, click Browse and select the image or type the path
of the image you want displayed when the pointer rolls over the original image.
6
If you want the images preloaded in the browser’s cache so they load faster,
select the Preload Images option.
7
In the When Clicked Go to URL field, click Browse and select the file, or type
the path to the file 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.
8
276
Chapter 11
Click OK to close the Insert Rollover Image dialog box.
To test a rollover:
1
Choose File > Preview in Browser or press F12.
2
In the browser, move the pointer over the original image.
The display should switch to the rollover image.
Using an external image editor
Dreamweaver makes it easy for you to design your HTML pages and work in an
image editor to edit your graphics. While in Dreamweaver, you can open a
selected image in an external image editor; when you return to Dreamweaver after
saving the image file, any changes you made to the image are visible in the
Document window.
You can use Macromedia Fireworks as your external image editor. Fireworks 3 and
Fireworks 4 use Design Notes to track where the original PNG file is stored on
your local hard disk.
Fireworks 2 doesn’t use Design Notes, but will prompt you to locate the original
PNG file. Fireworks 1 automatically searches the folder that contains the selected
file for a PNG file with the same name. For example, if you select an image whose
source file is images/myPhoto.gif and the images folder also contains a file called
myPhoto.png, Fireworks opens the PNG file.
For more information, see “Using Dreamweaver and Fireworks Together” on page 281.
If you set any other image-editing application as the external image editor and
launch the editor from within Dreamweaver, the application launches and opens
the selected image (for example, images/myPhoto.gif ). Use the image editor to
modify the image, save your changes, and then view the updated changed image
in Dreamweaver.
If you prefer, you can manually open the original file from which the GIF was
generated (for example, mylogo.png might be the original Fireworks file), make
changes, and save the changed image. Dreamweaver still updates the image in the
Document window when you return.
If you don’t see an updated image after returning to the Dreamweaver window,
select the image and then click the Refresh button in the Property inspector.
Inserting Images
277
Setting external image editor preferences
You can use the Dreamweaver preference dialog box to specify which image editor
to launch to edit images with specific file extensions. For example, you can tell
Dreamweaver to launch Fireworks when you want to edit a GIF, and to launch a
different image editor when you want to edit a JPEG.
You can set more than one external editor for a file extension; then, when you’re ready
to edit the image, you can use the context menu to choose which editor to launch.
278
Chapter 11
To set an external image editor for an existing file type:
1
Open the File Types/Editor dialog box by doing one of the following:
• Choose Edit > Preferences and select File Types/Editors.
• Choose Edit > Edit with External Editor and select File Types/Editors.
2
In the Extensions list, select the file extension you want to set an external
editor for.
3
Click the Add (+) button above the Editors list.
4
In the Select External Editor dialog box, browse to the application you want to
launch as an editor for this file type.
5
In the Preferences dialog box, click Make Primary if you want this editor to be
the primary editor for this file type.
6
If you want to set up an additional editor for this file type, repeat steps 3 and 4.
Dreamweaver automatically uses the primary editor when you choose to edit
this image type. You can choose the other listed editors from the context menu
for the image in the Document window.
To add a new file type to the Extensions list:
1
Open the File Types/Editor dialog box by doing one of the following:
• Choose Edit > Preferences and select File Types/Editors.
• Choose Edit > Edit with External Editor and select File Types/Editors.
2
Click the Add (+) button above the Extensions list.
3
Type the file name extension of the type of image you want to edit (for
example, .JPEG).
4
To set an external editor, click the Add (+) button above the Editors list.
5
In the dialog box that appears, choose the application you want to use to edit
this image type.
6
Click Make Primary if you want this editor to be the primary editor for
the image type.
To change an existing editor preference:
1
In External Editors preferences, click the file extension whose editor you
want to change.
2
Use the Add (+) or Delete (–) buttons above the Editors list to add or
remove an editor.
For more information on the other options in External Editors preferences, see
“Launching an external editor” on page 298.
Inserting Images
279
Launching an external image editor
You choose Edit > Preferences > File Types/Editor to set an external image editor for
the image file types you specify. Once you’ve selected an external image editor, you
can launch it and edit images while you work in your Dreamweaver document.
To launch the external image editor, do one of the following:
• Double-click the image you want to edit.
• Right-click (Windows) or Control-click (Macintosh) the image you want to
edit, the choose Edit With from the context menu to select an editor you
previously defined, or choose Browse and select an editor.
• Select the image you want to edit, and click Edit in the Property inspector.
• Double-click the image file in the Site window to launch the primary image
editor. If you haven’t specified an image editor, Dreamweaver launches the
default editor for the file type.
Note: When you open an image from the Site window, the Fireworks integration features
described above are not in effect; Fireworks does not open the original PNG file. To use
the Fireworks integration features, open images from within the Document window.
Applying behaviors to images
You can apply any available behavior to an image or image hotspot. When you
apply a behavior to a hotspot, Dreamweaver inserts the HTML source code into
the area tag. Three behaviors apply specifically to images: Preload Images, Swap
Image, and Swap Image Restore.
loads images that do not appear on the page right away (such as
those that will be swapped in with timelines, behaviors, layers, or JavaScript) into
the browser cache. This prevents delays caused by downloading when it is time for
the images to appear. See “Preload Images” on page 459.
Preload Images
Swap Image swaps one image for another by changing the SRC attribute of the img
tag. Use this action to create button rollovers and other image effects (including
swapping more than one image at a time). See “Swap Image” on page 467.
restores the last set of swapped images to their previous
source files. This action is automatically added whenever you attach the Swap
Image action to an object by default; you should never need to select it manually.
See “Swap Image Restore” on page 468.
Swap Image Restore
You can also use behaviors to create more sophisticated navigation systems, such
as a navigation bar or a jump menu. See “Creating navigation bars” on page 371
and “Creating jump menus” on page 369.
280
Chapter 11
12
CHAPTER 12
Using Dreamweaver and
Fireworks Together
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Unique integration features make it easy to work on files interchangeably in
Macromedia Dreamweaver 4 and Macromedia Fireworks 4. Dreamweaver and
Fireworks recognize and share many of the same file edits, including changes to
links, image maps, table slices, and more. Together, the two applications provide
a streamlined workflow for editing, optimizing, and placing Web graphics files
in HTML pages.
If you want to modify Fireworks images and tables placed in a Dreamweaver
document, you can launch Fireworks to make edits, and then return to the
updated document in Dreamweaver. If you want to make quick optimization edits
to placed Fireworks images and animations, you can launch the Fireworks
optimization dialog box and enter updated settings. In either case, updates are
made to the placed files in Dreamweaver, as well as to the source Fireworks files, if
those source files were launched.
281
Getting Fireworks files into Dreamweaver
You can place Fireworks images and HTML code in Dreamweaver in a number of
different ways. In Dreamweaver, you can use the insert features to place Fireworks
files into documents. From Fireworks, you can export files directly to a
Dreamweaver site folder, or you can copy and paste HTML code into a
Dreamweaver document.
Placing Fireworks images in Dreamweaver
You can place Fireworks-generated GIF, JPEG, or PNG images directly in a
Dreamweaver document.
To insert a Fireworks image into a Dreamweaver document:
1
Place the insertion point where you want the image to appear in the
Dreamweaver Document window.
2
Do one of the following:
• Choose Insert > Image.
• Click the Insert Image button in the Common category of the Objects panel.
3
Navigate to the desired Fireworks file, and click Open.
If the Fireworks file is not in the current Dreamweaver site, a message appears,
asking whether you want to copy the file to the root folder.
Inserting Fireworks HTML code into Dreamweaver
Dreamweaver lets you insert Fireworks-generated HTML code, complete with
associated images, slices, and JavaScript, into a document. This insertion feature
makes it easy for you to add tables or image maps created in Fireworks to a
Dreamweaver document.
To insert Fireworks HTML into a Dreamweaver document:
1
In Dreamweaver, save your document in a defined site.
2
Place the insertion point in the document where you want the inserted HTML
code to begin.
3
Do one of the following:
• Choose Insert > Interactive Images > Fireworks HTML.
• Click the Insert Fireworks HTML button in the Common category of the
Objects panel.
4
282
Chapter 12
In the dialog box that appears, click Browse to choose the desired Fireworks
HTML file.
5
Select the Delete File After Insertion option to move the HTML file to the
Recycle Bin (Windows) or Trash (Macintosh) when the operation is complete.
Use this option if you no longer need the Fireworks HTML file after inserting it.
This option does not affect the source PNG file associated with the HTML file.
Note: If the HTML file is on a network drive, it is permanently deleted, not moved to the
Recycle Bin or Trash.
6
Click OK to insert the HTML code, along with its associated images, slices,
and JavaScript, into the Dreamweaver document.
Copying and pasting Fireworks HTML into Dreamweaver
A fast way to place Fireworks-generated images and tables in Dreamweaver involves
copying and pasting Fireworks HTML code directly into a Dreamweaver document.
To copy and paste Fireworks HTML into Dreamweaver:
1
In Fireworks, choose Edit > Copy HTML Code.
2
Follow the wizard as it guides you through the settings for exporting your
HTML and images. When prompted, specify your Dreamweaver site folder as
the destination for the exported images.
The wizard exports the images to the specified destination and copies the
HTML code to the Clipboard.
3
In Dreamweaver, place the insertion point in the document where you want to
paste the HTML code, and choose Edit > Paste.
All HTML and JavaScript code associated with the Fireworks files you exported
is copied into the Dreamweaver document, and all links to images are updated.
To export and paste Fireworks HTML into Dreamweaver:
1
In Fireworks, choose File > Export.
2
In the Export dialog box, specify your Dreamweaver site folder as the
destination for the exported images.
3
Choose HTML and Images from the Save As pop-up menu.
4
Choose Copy to Clipboard from the HTML pop-up menu, and click Save.
5
In Dreamweaver, place the insertion point in the document where you want to
paste the HTML code, and choose Edit > Paste.
All HTML and JavaScript code associated with the Fireworks files you exported
is copied into the Dreamweaver document, and all links to images are updated.
Using Dreamweaver and Fireworks Together
283
Exporting Fireworks files to Dreamweaver
The File > Export command in Fireworks lets you export and save optimized
images and HTML files to a location inside the desired Dreamweaver site folder.
You can then open the files for editing in Dreamweaver.
Alternatively, you can export Fireworks files as Cascading Style Sheet (CSS) layers
or Dreamweaver library items. Dreamweaver library items simplify the process of
editing and updating a frequently used Web site component, such as a series of
footer links or a navigation bar. A library item is a portion of an HTML file
located in a folder named Library at your site root. You can drag copies of a library
item to any page in your Web site.
To export Fireworks images and HTML to Dreamweaver:
1
In Fireworks, choose File > Export.
2
Choose HTML and Images from the Save As pop-up menu.
3
Choose Export HTML File from the HTML pop-up menu.
4
Specify a destination folder inside your Dreamweaver site folder.
5
Click Save to export your files.
To export Fireworks files as CSS layers:
284
Chapter 12
1
In Fireworks, choose File > Export.
2
Choose CSS Layers (.htm) from the Save As pop-up menu.
3
Specify a destination folder inside your Dreamweaver site folder.
4
Click Save to export your files.
To export a Fireworks file as a Dreamweaver library item:
1
In Fireworks, choose File > Export.
2
Choose Dreamweaver Library (.lbi) from the Save As pop-up menu.
3
Name the file, and specify a destination folder named Library located at the
Dreamweaver site root.
If necessary, Fireworks prompts you to create this folder.
4
Click Save to export your file.
Launching Fireworks from within
Dreamweaver
You can launch Fireworks directly from a Dreamweaver document by targeting a
placed Fireworks image, table slice, or table for either editing or optimization. In
order for these launch-and-edit features to work properly, you must designate
Fireworks as the primary external image editor in Dreamweaver.
Using Dreamweaver and Fireworks Together
285
Designating Fireworks as the primary external image editor
for Dreamweaver
Dreamweaver 4 provides preferences for automatically launching specific
applications to edit specific file types. To use the Fireworks launch-and-edit
features, make sure that Fireworks 4 is set as the primary editor for GIF, JPEG,
and PNG files in Dreamweaver.
Although you can use earlier versions of Fireworks as external image editors,
these versions offer limited launch-and-edit capabilities. Fireworks 3 does not
fully support the launch and edit of placed tables and slices within tables,
while Fireworks 2 does not support the launch and edit of source PNG files for
placed images.
To set Fireworks 4 as the primary external image editor for Dreamweaver 4:
286
Chapter 12
1
In Dreamweaver, choose Edit > Preferences and select File Types/Editors.
2
In the Extensions list, select a Web file extension (.gif, .jpg, or .png).
3
In the Editors list, select Fireworks 4 and click Make Primary.
4
Repeat steps 2 and 3 to set Fireworks 4 as the primary editor for other Web
file extensions.
About Design Notes and source files
Whenever you export a Fireworks file from a saved PNG source to a Dreamweaver
site, Fireworks writes a Design Note that contains information about the file. For
example, when you export a Fireworks table, Fireworks writes a Design Note for
each exported slice file and for the HTML file that assembles the table slices.
These Design Notes contain references to the source PNG file that spawned the
exported files.
When you launch and edit a Fireworks image from within Dreamweaver,
Dreamweaver uses the Design Note to locate a source PNG for that file. For best
results, always save your Fireworks source PNG file and exported files in a
Dreamweaver site. This ensures that any user sharing the site will be able to locate
the source PNG when launching Fireworks from within Dreamweaver.
Specifying launch-and-edit preferences for
Fireworks source files
The Fireworks launch-and-edit preferences let you specify how to handle source
PNG files when launching Fireworks files from another application, such as
Macromedia Director or Dreamweaver.
Dreamweaver recognizes the Fireworks launch-and-edit preferences only in
certain cases where you launch and optimize a Fireworks image. Specifically, you
must be launching and optimizing an image that is not part of a Fireworks table
and that does not contain a correct Design-Note path to a source PNG file. In all
other cases, including all launch-and-edit cases of Fireworks images, Dreamweaver
automatically launches the source PNG file, prompting you to locate the source
file if it cannot be found.
To specify launch-and-edit preferences for Fireworks:
1
In Fireworks, choose Edit > Preferences, and click the Launch and Edit tab
(Windows) or choose Launch and Edit from the pop-up menu (Macintosh).
2
Specify the preference options to use when editing or optimizing Fireworks
images placed in an external application:
Always Use Source PNG automatically
launches the Fireworks PNG file that is
defined in the Design Note as the source for the placed image. Updates are
made to both the source PNG and its corresponding placed image.
Never Use Source PNG automatically
launches the placed Fireworks image,
whether or not a source PNG file exists. Updates are made to the placed
image only.
lets you specify each time whether or not to launch the
source PNG file. When you edit or optimize a placed image, Fireworks displays
a message prompting you to make a launch-and-edit decision. You can also
specify global launch-and-edit preferences from this message.
Ask When Launching
Using Dreamweaver and Fireworks Together
287
Editing Fireworks files placed in
Dreamweaver
Launch-and-edit integration lets you use Fireworks to edit Fireworks-generated
images and tables placed in a Dreamweaver document. Dreamweaver
automatically launches Fireworks, letting you make the desired Fireworks edits to
the image. The updates you make in Fireworks are automatically applied to the
placed image in Dreamweaver.
Fireworks recognizes and preserves many edits made to the document in
Dreamweaver, including changed links, edited image maps, and edited text in text
slices. The Property inspector in Dreamweaver helps you identify Fireworksgenerated images, table slices, and tables in a document.
Editing Fireworks images
You can launch Fireworks to edit individual images placed in a Dreamweaver
document.
To launch and edit a Fireworks image placed in Dreamweaver:
1
In Dreamweaver, choose Window > Properties to open the Property
inspector if needed.
2
Do one of the following:
• Select the desired image. (The Property inspector identifies the selection as a
Fireworks image and displays the name of the known PNG source file for the
image.) Then click Edit in the Property inspector.
• Hold down Control (Windows) or Command (Macintosh), and double-click
the image you want to edit.
• Right-click (Windows) or Control-click (Macintosh) the desired image, and
choose Edit With Fireworks 4 from the context menu.
Dreamweaver launches Fireworks, if it is not already open.
288
Chapter 12
3
If prompted, specify whether to launch a source Fireworks file for the placed image.
4
In Fireworks, edit the image. The document window indicates that you are
modifying an image from Dreamweaver.
Dreamweaver recognizes and preserves all edits applied to the image in Fireworks.
5
When you are finished making edits, click Done in the document window.
Clicking Done exports the image using the current optimization settings for
the source PNG file, updates the GIF or JPEG used by Dreamweaver, and saves
the PNG source file if a source file was selected.
Note: When you open an image from the Dreamweaver Site window, the Fireworks
integration features described above are not in effect; Fireworks does not open the
original PNG file. To use the Fireworks integration features, open images from within the
Dreamweaver Document window.
Editing Fireworks tables
When you launch and edit an image slice that is part of a placed Fireworks table,
Dreamweaver automatically launches the source PNG file for the entire table.
To launch and edit a Fireworks table placed in Dreamweaver:
1
In Dreamweaver, choose Window > Properties to open the Property
inspector if needed.
2
Do one of the following:
• Click inside the table, and click the TABLE tag in the status bar to select the
entire table. (The Property inspector identifies the selection as a Fireworks table
and displays the name of the known PNG source file for the table.) Then click
Edit in the Property inspector.
• Click the top left corner of the table to select it, and then click Edit in the
Property inspector.
• Select the desired table slice, and click Edit in the Property inspector.
• Hold down Control (Windows) or Command (Macintosh), and double-click
the image you want to edit.
• Right-click (Windows) or Control-click (Macintosh) the desired table slice,
and choose Edit With Fireworks 4 from the context menu.
Dreamweaver launches Fireworks, if it is not already open. The source PNG file
for the entire table appears in the document window.
3
In Fireworks, edit the table image.
Dreamweaver recognizes and preserves all edits applied to the image
in Fireworks.
Using Dreamweaver and Fireworks Together
289
4
When you are finished making edits, click Done in the document window.
Clicking Done exports HTML and image slice files for the table using the
current optimization settings, updates the table placed in Dreamweaver, and
saves the PNG source file. Fireworks exports and replaces only those HTML
and image slice files that are needed to update the table in Dreamweaver.
Optimizing Fireworks images and
animations placed in Dreamweaver
You can launch Fireworks from Dreamweaver to make quick export changes, such
as resampling or changing the file type, to placed Fireworks images and
animations. Fireworks lets you make changes to optimization settings, animation
settings, and the size and area of the exported image.
To change optimization settings for a Fireworks image placed in Dreamweaver:
1
In Dreamweaver, select the desired image and choose Commands > Optimize
Image in Fireworks.
2
If prompted, specify whether to launch a source Fireworks file for the placed image.
3
In Fireworks, make the desired edits in the optimization dialog box:
• To edit optimization settings, click the Options tab. For more information,
see Using Fireworks.
• To edit the size and area of the exported image, click the File tab. For more
information, see “Resizing placed Fireworks images” on page 291.
• To edit animation settings for the image, click the Animation tab. For more
information, see “Editing placed Fireworks animations” on page 292.
290
Chapter 12
4
When you are finished editing the image, click Update.
Clicking Update exports the image using the new optimization settings,
updates the GIF or JPEG placed in Dreamweaver, and saves the PNG source
file if a source file was selected.
If you changed the format of the image, the Dreamweaver link checker
prompts you to update references to the image. For example, if you changed
the format of an image called my_image from GIF to JPEG, clicking OK
at this prompt changes all references to my_image.gif in your site to
my_image.jpg.
Resizing placed Fireworks images
When launching and optimizing a Fireworks image from Dreamweaver, you can
resize the image and select a specific image area to be exported.
To specify exported image dimensions:
1
In Fireworks, in the optimization dialog box, click the File tab.
2
To scale the image as it is exported, specify a scale percentage or enter the
desired width and height in pixels. Select Constrain to scale the width and
height proportionally.
3
To export a selected area of the image, select the Export Area option and specify
the export area:
• Drag the dotted border that appears around the preview until it encloses the
desired export area. (Drag inside the preview to move hidden areas into view.)
• Enter pixel coordinates for the boundaries of the export area.
Using Dreamweaver and Fireworks Together
291
Editing placed Fireworks animations
If you are launching and optimizing a placed Fireworks animation, you can also
edit the animation settings. The animation options in the optimization dialog box
are similar to those available in the Fireworks Frames panel.
To edit an animated image:
1
In Fireworks, in the optimization dialog box, click the Animation tab.
2
Use the following techniques to preview animation frames at any time:
• To display a single frame, select the desired frame in the list on the left side of the
dialog box, or use the frame controls in the lower right area of the dialog box.
• To play the animation, click the Play/Stop control in the lower right area of
the dialog box.
3
Make edits to the animation:
• To specify the frame disposal method, select the desired frame in the list and
choose an option from the pop-up menu (indicated by the trash icon).
• To set the frame delay, select the desired frame in the list and enter the delay
time in hundredths of a second.
• To set the animation to play repeatedly, click the Looping button and choose
the desired number of repetitions from the pop-up menu.
• Select the Auto-Crop option to crop each frame as a rectangular area, so that
only the image area that differs between frames is output. Selecting this option
reduces file size.
• Select the Auto-Difference option to output only pixels that change between
frames. Selecting this option reduces file size.
292
Chapter 12
Updating Fireworks HTML placed in
Dreamweaver
The File > Update HTML command in Fireworks provides an alternative to the
launch-and-edit technique for updating Fireworks files placed in Dreamweaver.
With Update HTML, you can edit a source PNG image in Fireworks and then
automatically update any exported HTML code and image files placed in a
Dreamweaver document. This command lets you update Dreamweaver files even
when Dreamweaver is not running.
To update Fireworks HTML placed in Dreamweaver:
1
In Fireworks, choose File > Update HTML.
2
Navigate to the Dreamweaver file containing the HTML you wish to update,
and click Open.
3
Navigate to the folder destination where you want to place the updated image
files, and click Choose.
Fireworks updates the HTML and JavaScript code in the Dreamweaver
document. Fireworks also exports updated images associated with the HTML
and places the images in the specified destination folder.
If Fireworks cannot find matching HTML code to update, it gives you the
option of inserting new HTML code into the Dreamweaver document.
Fireworks places the JavaScript section of the new code at the beginning of the
document and places the HTML table or link to the image at the end.
Creating Web photo albums
The Create Web Photo Album command in Dreamweaver lets you automatically
generate a Web site that showcases an album of images from a given folder. This
command uses JavaScript to call Fireworks, which creates a thumbnail and a
larger-sized image for each of the images in the folder. Dreamweaver then creates a
Web page containing all the thumbnails, as well as links to the larger images. To
use the Create Web Photo Album, you must have both Dreamweaver and
Fireworks installed on your system.
Before you begin, place all of the images for your photo album in a single folder.
(The folder is not required to be in a site.) In addition, make sure that the image
file names end in extensions recognized by the Create Web Photo Album
command (.gif, .jpg, .jpeg, .png, .psd, .tif, or .tiff ). Images with unrecognized file
extensions are not included in the photo album.
Using Dreamweaver and Fireworks Together
293
To create a Web photo album:
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 may 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 may
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 file name 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.
294
Chapter 12
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 file name.
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.
Using Dreamweaver and Fireworks Together
295
296
Chapter 12
13
CHAPTER 13
Inserting Media
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Macromedia Dreamweaver lets you add sound and movies to your Web site
quickly and easily. You can incorporate and edit multimedia files and objects, such
as Java applets; QuickTime, Flash, and Shockwave movies; and MP3 audio files.
You can also attach Design Notes to these objects. And now you can insert Flash
button and text objects from within Dreamweaver itself.
Inserting media objects
You can insert a Java applet, QuickTime or Shockwave movie, Flash movie or
object, ActiveX control, or other audio or video objects in a page.
To insert a media object in a page, do one of the following:
• Place the insertion point where you want to insert the object, and click the
appropriate button on the Objects panel.
Shockwave, ActiveX and Flash objects have defined buttons. Use the Netscape
Navigator plugin button to insert QuickTime movies and audio files. For more
information, see “Inserting Netscape Navigator plugin content” on page 313.
• Drag the appropriate button from the Objects panel to the place you want the
object to appear in the Document window.
• Place the insertion point in the Document window where you want to insert the
object, then choose the appropriate object from the Insert > Media or Insert >
Interactive Images submenu.
297
In most cases, a dialog box appears letting you select a source file and specify
certain parameters for the media object.
Tip: To prevent such dialog boxes from appearing, choose Edit > Preferences > General and
deselect the Show Dialog When Inserting Objects option. To override whatever preference
is set for showing dialog boxes, hold down the Control (Windows) or Option (Macintosh)
key while inserting the object. (For example, to insert a placeholder for a Shockwave movie
without specifying the file, hold down Control or Option and click the Shockwave button.)
Each Objects panel button inserts the necessary HTML source code to make the
object or placeholder appear on the page. To specify a source file, set dimensions
and other parameters and attributes, use the Property inspector for each object.
Launching an external editor
You can double-click most files in the Site window 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 window 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
file name in the Site window, and choose an editor from the Open With submenu
of the context menu.
Most of the time, the primary editor is the same application that would be
launched if you double-clicked the file’s icon on the desktop. 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. File name
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.
298
Chapter 13
To add a file type to the list of extensions in File Types/Editors preferences:
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 .png .jpg.
To add an editor for a given file type:
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.
To remove a file type from the list:
1
Select the file type in the Extensions list.
Note: You can’t undo after removing a file type, so be sure you want to remove it.
2
Click the Minus (-) button above the Extensions list.
To make an editor the primary editor for a file type:
1
Select the file type.
2
Select the editor (or add it if it isn’t on the list).
3
Click the Make Primary button.
To dissociate one editor from a file type:
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.
Inserting Media
299
Using Design Notes with media objects
As with other objects in Dreamweaver, you can add Design Notes to a
media object.
To add Design Notes to a media object:
1
Right-click (Windows) or Control-click (Macintosh) the object in the
Document window.
Note: You must define your site before adding Design Notes to any object. See “About
Design Notes” on page 134.
2
Choose Design Notes from the context menu.
3
Enter the information you want in the Design Note.
You can also add a Design Note to a media object from the Site window by
selecting the file, revealing the context menu, and choosing Design Notes from
the context menu.
For details, see “About Design Notes” on page 134.
About Flash content
Macromedia Flash technology is the premier solution for the delivery of vectorbased graphics and animations. Flash Player is available as both a Netscape
Navigator plugin and an ActiveX control for Microsoft Internet Explorer on the
PC, and it is incorporated in the latest versions of Netscape Navigator, Microsoft
Windows, and America Online. Before you use the Flash commands available in
Dreamweaver, you may want to review the three different Flash file types.
The Flash file (.fla) is
the source file for any project and is created in the Flash
program. This type of file can only be opened in Flash, not in Dreamweaver or in
browsers. You can open the Flash file in Flash, then export it as an SWF or SWT
file to use in browsers. For more information, see “Using Flash button objects” on
page 301 and “Creating new button templates” on page 306.
The Flash movie file (.swf) is a compressed version of the Flash (.fla) file, optimized
for viewing on the Web. This file can be played back in browsers and previewed in
Dreamweaver, but cannot be edited in Flash. This is the type of file you create
when using the Flash button and text objects. For more information, see “Using
Flash button objects” on page 301 and “Using Flash text objects” on page 304.
The Flash Generator template (.swt) files enable
you to modify and replace
information in a Flash movie file. These files are used in the Flash button object,
which lets you modify the template with your own text or links, to create a custom
SWF to insert in your document. In Dreamweaver, these template files can be
found in the Dreamweaver/Configuration/Flash Objects/Flash Buttons and
Flash Text folders.
300
Chapter 13
If you use Flash to design your own Generator template files (see “Creating new
button templates” on page 306), you can distribute these templates to members of
your Web design team. They in turn can save these files to the Configuration/
Flash Objects/Flash Buttons folder, then access these templates using the
Flash button object.
Using Flash button objects
The Flash button object lets you customize and insert a set of predesigned
Flash buttons.
Note: You must save your document before inserting a Flash button or text object.
Inserting Media
301
To insert a Flash button object:
1
While in the Design view of the Document window, select Insert Flash Button
from the Objects panel or choose Insert > Interactive Images > Flash Button.
You can also drag the Flash button icon over to the Document window.
The Insert Flash Button dialog box appears.
2
Select the button style you want from the Style list.
You’ll see an example of the button in the Sample field. You can click this
sample to see how it functions in the browser. However, the Sample field does
automatically update to show the changes to text or font that you might make.
These changes will appear in Design view.
3
In the Button Text field (optional), type the text you want to appear.
For example, type Press me! 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.
4
In the Font field, specify a font size and select the font you want from the
pop-up menu.
You only need to make font and size selections if your button has text
parameters defined. If the default font for a button is not available on your
system, select another font from the pop-up menu. Keep in mind that 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 a what the text will look like.
5
In the Link field (optional), enter a document-relative or absolute link for
the button.
Site-relative links are not accepted because browsers don’t recognize them
within Flash movies. If you use a document-relative link, be 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.)
6
In the Target field (optional), specify a target frame or target window for the
Flash button’s link to go to.
7
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).
8
In the Save As field, enter a file name to save the new SWF file.
You can use the default file name (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.
302
Chapter 13
9
Click Get More Styles to go the Macromedia Exchange site and download
more button styles.
For more information, see “Adding extensions to Dreamweaver” on page 93.
10
Click Apply or OK to insert the Flash button in the Document window.
Tip: Select Apply to see changes in Design view, while keeping the dialog box open—this
way you can continue making changes to the button.
To modify a Flash button object:
1
While in Design view, select the Flash button object.
2
The Property inspector displays the Flash button properties. You can make
some changes in the Property inspector. These changes just modify HTML
attributes like width, height, and Bg color.
3
To make changes to content, display the Insert Flash Button dialog box by
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 described in
the previous procedure.
In the Design view, you can resize the object easily by using the resizing
handles. You can return the object to its original size by selecting Reset Size on
the Property inspector. See “Resizing images and other elements” on page 272.
To see the Flash button object play in the Document window:
1
While in Design view, select the Flash button object.
2
In the Property inspector, click the green Play button.
3
Click the red Stop button to end the preview.
Note: You can’t edit the Flash button object while it is playing.
It’s also always a good idea to preview your document in the browser to see exactly
how the Flash button looks in the browser.
Inserting Media
303
Using Flash text objects
The Flash text object lets you create and insert a Flash movie that contains just
text. This allows you to create a small, vector-graphic movie with the designer
fonts and the text of your choice.
To insert a Flash text object:
1
With the Document window in Design view, select Insert Flash Text from the
Objects panel or choose Insert > Interactive Images > Flash Text.
The Insert Flash Text dialog box appears.
2
Select a font from the Font pop-up menu.
This menu lists all TrueType fonts currently loaded on your system.
3
Enter a font size in the Size field; these are point sizes.
4
Specify style attributes like bold or italic, and text alignment by clicking the
appropriate style buttons.
5
In the Color field, set the color of the text by using the color picker or entering
a Web hexadecimal value (such as #FFFFFF).
6
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).
7
Enter the text you want in the Text field.
To see the font style displayed in the Text field, select Show Font.
304
Chapter 13
8
If you want to associate a link with the Flash text object, enter a documentrelative 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, be 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.)
9
If you entered a link, you can specify a target frame or target window for that
link to go to in the Target field.
10
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).
11
In the Save As field, enter a name for the file.
You can use the default file name (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.
12
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.
To modify or play the Flash text object, use the same procedure as you would for a
Flash button. See “Using Flash button objects” on page 301.
Setting Flash object properties
The Property inspector for Flash objects initially displays the most commonly used
properties. Click the expander arrow in the lower right corner to see more properties.
The Property inspector also contains a Play button that lets you preview the Flash
object in the Document window. When you click the green Play button, you’ll see
what the object will look like in a browser.
Name specifies
the name to identify the button for scripting. Enter a name in the
unlabeled field on the far left side of the Property inspector.
W and H specify the width and height of the object in pixels. You can also specify
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm
(centimeters), or % (percentage of the parent object’s width or height). The
abbreviations must follow the value without a space: for example, 3mm.
File specifies the path to the Flash object file. Click the folder icon to browse to a
file, or type a path.
Align determines
how the object is aligned on the page. For a description of each
option, see “Aligning elements” on page 271.
Inserting Media
305
Bg specifies
Edit
a background color for the object.
accesses the Flash object dialog box.
Reset Size
resets the selected button to the original movie size.
Play/Stop lets
you preview the Flash object in the Document window. Click the
green Play button to see the object in Play mode; click the red Stop button to stop
the movie and be able to edit the object.
ID defines
the optional ActiveX ID parameter. This parameter is most often used
to pass information between ActiveX controls.
V Space and H Space specify
the number of pixels of white space above, below,
and on both sides of the button.
Quality sets
the quality parameter for the object and embed tags that define the
button. A movie looks better with a high setting, but it requires a faster processor
to render correctly on the screen. Low emphasizes speed over appearance, whereas
High favors appearance over speed. Auto Low emphasizes speed to begin with, but
improves appearance when possible. Auto High emphasizes both qualities at first,
but sacrifices appearance for speed if necessary.
Scale sets
the scale parameter for the object and embed tags that defines the
button or text object. This parameter defines how the movie displays within the
area defined for the movie by the width and height values. The choices are
Default (Show All), No Border, and Exact Fit. Show All makes the entire movie
visible in the specified area, maintaining the aspect ratio of the movie and
preventing distortion; borders may appear on two sides of the movie. No Border is
similar to Show All, except portions of the movie may be cropped. With Exact Fit,
the entire movie fills the specified area, but the aspect ratio of the movie is not
maintained and distortion may occur.
Parameters opens
a dialog box for entering additional parameters. See “Using
parameters” on page 319.
Creating new button templates
Use Flash together with the free Generator authoring templates to create new
button templates, complete with Generator Text objects. You can also download
new button templates from the Macromedia Exchange for Dreamweaver Web site
and place them in your Flash Button folder. For more information on creating
new button templates, see the article on that topic found on the Macromedia Web
site at http://www.macromedia.com/support/dreamweaver/insert_media.html.
For more information on the using extensions, see “Adding extensions to
Dreamweaver” on page 93.
306
Chapter 13
Inserting Flash movies
When you insert a Flash movie into a document, Dreamweaver uses both the
object tag (defined by Internet Explorer for ActiveX controls) and the embed tag
(defined by Netscape Navigator) to get the best results in all browsers. When you
make changes in the Property inspector for the movie, Dreamweaver maps your
entries to the appropriate parameters for both the object and embed tags.
Note: If you insert a movie using the Flash movie object, it inserts a codebase parameter
that instructs Internet Explorer for Windows to automatically download the necessary (Flash 4
and later) ActiveX control. If you don’t want this to happen, you can change the attribute.
To insert a and preview a Flash movie:
1
In the Design view of the Document window, place the insertion point where
you want to insert the movie.
2
Insert the movie in one of the following ways:
• Click the Insert Flash icon in the Objects panel.
• Choose Insert > Media > Flash.
• Drag the Insert Flash icon from the Objects panel to the insertion point in
your document.
3
In the dialog box that appears, select a Flash movie file (.swf ). A Flash
placeholder appears in the Document window (unlike Flash button and
text objects).
4
To see a preview of the Flash movie in the Document window, click the Green
play button in the Property inspector. Click Stop to end the preview. You can
also preview the Flash movie in a browser by pressing F12.
Tip: To preview all Flash content in a page, press Control+Alt+Shift+P (Windows) or
Shift+Option+Command+P (Macintosh). All Flash objects and movies are set to Play.
Inserting Media
307
Setting Flash movie properties
To view the following properties in the Property inspector, select a Flash movie.
The Property inspector initially displays the most commonly used properties. To
see all properties, click the expander arrow in the lower right corner.
Name specifies
a name to identify the movie for scripting. Enter a name in the
unlabeled field on the far left side of the Property inspector.
W and H specify the width and height of the movie in pixels. You can also specify
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm
(centimeters), or % (percentage of the parent object’s value). The abbreviations
must follow the value without a space: for example, 3mm.
File specifies the path to the Flash movie file. Click the folder icon to browse to a
file, or type a path.
Align determines
how the movie is aligned on the page. For a description of each
option, see “Aligning elements” on page 271.
Bg specifies
a background color for the movie area. This color also appears while
the movie is not playing (while loading and after playing).
ID defines
the optional ActiveX ID parameter. This parameter is most often used
to pass information between ActiveX controls.
V Space and H Space specify
the number of pixels of white space above, below,
and on both sides of the movie.
Parameters opens
a dialog box for entering additional parameters to pass to the
movie. See “Using parameters” on page 319. The movie must have been designed
to receive these additional parameters.
Quality sets the quality parameter for the object and embed tags that run the
movie. The settings relate to the level of anti-aliasing used during playback of the
movie. A movie looks better with a high setting, but it requires a faster processor
to render correctly on the screen. Low emphasizes speed over appearance, whereas
High favors appearance over speed. Auto Low emphasizes speed to begin with, but
improves appearance when possible. Auto High emphasizes both qualities at first,
but sacrifices appearance for speed if necessary.
Scale sets the scale parameter for the object and embed tags that run the movie.
For more information, see “Setting Flash object properties” on page 305.
Autoplay plays
Loop makes
the movie automatically when the page loads.
the movie loop indefinitely.
Reset Size returns
308
Chapter 13
the selected movie to its original size.
Inserting Generator objects
Macromedia Generator provides a way to serve dynamic Web content. You can
create Generator files with Flash 4 or 5 using free Generator authoring templates;
the files are then served by a Web server running Generator server software. You
can insert a Generator object into a Dreamweaver document.
To insert a Generator object:
1
In the Document window, place the insertion point where you want to
insert the object.
2
Click the Generator button in the Objects panel.
3
In the dialog box that appears, select a Generator template (.swt) file.
4
If desired, click the Plus (+) button to add a name=value parameter pair. Then
enter a name for the parameter in the Name field, and a value for the parameter
in the Value field. Repeat this step for each parameter.
5
To remove a parameter, select it in the Parameters list and click the
Minus (–) button.
6
When you finish entering parameters, click OK to insert the Generator object.
To edit the parameters after the Generator object has been inserted, use the Code
inspector or the Code view of the Document window.
The name=value pairs are used by the Generator server, in conjunction with other
data sources, to dynamically create the Flash movie or image file.
Inserting Media
309
About Shockwave movies
Shockwave, the Macromedia standard for interactive multimedia on the Web, is a
compressed format that allows media files created in Macromedia Director to be
downloaded quickly and played by most popular browsers.
Inserting Shockwave movies
The software that plays Shockwave movies is available as both a Netscape
Navigator plugin and an ActiveX control. When you insert a Shockwave movie,
Dreamweaver uses both the object tag (for the ActiveX control) and the embed
tag (for the plugin) to get the best results in all browsers. When you make changes
in the Property inspector for the movie, Dreamweaver maps your entries to the
appropriate parameters for both the object and embed tags.
To insert a Shockwave movie:
1
In the Design view of Document window, place the insertion point where you
want to insert a Shockwave movie.
2
Click the Shockwave button on the Objects panel, or choose Insert > Media >
Shockwave or drag the Shockwave button over to your document.
3
In the dialog box that appears, select a movie file.
4
In the Property inspector, enter the width and height of the movie in the
W and H boxes.
Setting Shockwave properties
To ensure the best results in both Microsoft Internet Explorer and Netscape
Navigator, Dreamweaver inserts Shockwave movies using both the object and
embed tags. (object is the tag defined by Microsoft for ActiveX controls; embed is
the tag defined by Navigator for plugins.) To view the properties in the Property
inspector, select a Shockwave movie.
The Property inspector initially displays the most commonly used properties.
Click the expander arrow in the lower right corner to see all properties.
Name specifies
a name to identify the movie for scripting. Enter a name in the
unlabeled field on the far left side of the Property inspector.
W and H specify the width and height of the movie in pixels. You can also specify
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm
(centimeters), or % (percentage of the parent object’s width or height). The
abbreviations must follow the value without a space: for example, 3mm.
File specifies the path to the Shockwave movie file. Click the folder icon to
browse, or type a path to the file.
310
Chapter 13
Align determines
how the movie is aligned on the page. For a description of each
option, see “Aligning elements” on page 271.
Bg specifies
a background color for the movie area. This color also appears while
the movie is not playing (while loading and after playing).
Play lets
you see a preview of the movie in the Design view of the Document
window. Click the Stop button to stop the movie and return to the Shockwave
placeholder.
Parameters opens
a dialog box in which to enter additional parameters to pass to
the Shockwave movie. See “Using parameters” on page 319. The Shockwave
movie must have been designed to receive these parameters.
ID defines
the optional ActiveX ID parameter. This parameter is most often used
to pass information between ActiveX controls.
V Space and H Space specify
the number of pixels of white space above, below,
and on both sides of the movie.
Adding sound to a page
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.
Note: Sound files are handled very differently and inconsistently by different browsers. You
may want to save sound files as SWFs to improve consistency.
About audio file formats
The following list describes the more common audio file formats along with some
of the advantages and disadvantages of each for Web design.
.midi or .mid (Musical Instrument Digital Interface) format is for instrumental music.
MIDI files are supported by many browsers and don’t require a plugin. Although
their sound quality is very good, it can vary depending on a visitor’s sound card. A
small MIDI file can provide a long sound clip. MIDI files cannot be recorded and
must be synthesized on a computer with special hardware and software.
.wav (Waveform Extension) format files have good sound quality, are supported by
many browsers, and don’t require a plugin. You can record your own WAV files
from a CD, tape, microphone, and so on. However, the large file size severely
limits the length of sound clips that you can use on your Web pages.
Inserting Media
311
.aif (Audio Interchange File Format, or AIFF) format, like WAV format, has good
sound quality, can be played by most browsers, and don’t require a plugin; you
can also record AIFF files from a CD, tape, microphone, and so on. However,
the large file size severely limits the length of sound clips that you can use on
your Web pages.
.mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) format
is a
compressed format that makes sound files substantially smaller. The sound quality
is very good: if an MP3 file is recorded and compressed properly, its quality can
rival that of a CD. New technology lets you “stream” the file so that a visitor
doesn’t have to wait for the entire file to download before hearing it. However, the
file size is larger than a Real Audio file, so a whole song could still take quite a
while to download over a normal phone line connection. To play MP3 files,
visitors must download and install a helper application or plugin such as
QuickTime, Windows Media Player or RealPlayer.
.ra, .ram, .rpm, or Real Audio format has a very high degree of compression with
smaller file sizes than MP3. Whole song files can be downloaded in a reasonable
amount of time. Because the files can be “streamed” from a normal Web server,
visitors can begin listening to the sound before the file has completely
downloaded. The sound quality is poorer than that of MP3 files, but new players
and encoders have improved quality considerably. Visitors must download and
install the RealPlayer helper application or plugin in order to play these files.
Linking to an audio file
Linking to an audio file is a simple and effective way to add sound to a Web page.
This method of incorporating sound files lets visitors choose whether they want to
listen to the file, and makes the file available to the widest audience. (Some
browsers may not support embedded sound files.)
To create a link to an audio file:
312
Chapter 13
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.
Embedding audio
Embedding audio incorporates the sound player directly into the page, but the
sound only plays if visitors to your site have the appropriate plugin for the chosen
sound file. Embed files if you want to use the sound as background music, or if
you want more control over the sound presentation itself. For example, you can
set the volume, the way the player looks on the page, and the beginning and
ending points of the sound file.
To embed an audio file:
1
In Design view, place the insertion point where you want to embed the file.
2
Click the Plugin button in the Objects panel, or choose Insert > Media > Plugin.
For more information about the Plugin object, see “Inserting Netscape
Navigator plugin content” on page 313.
3
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.
4
Enter the width and height by entering the values in the appropriate fields or
by resizing the plugin placeholder in the Document window.
These values determine the size at which the audio controls are displayed in the
browser. For example, try a width of 144 pixels and a height of 60 pixels to see
how the audio player appears in both Navigator and Internet Explorer.
Inserting Netscape Navigator plugin content
Plugins enhance Netscape Navigator, providing ways to view media content in a
wide variety of formats. Plugins are the means by which content files are played
and displayed on your Web site. For example, typical plugins include RealPlayer
and QuickTime, while some content files themselves include MP3s and
QuickTime movies.
After you create content for a Navigator plugin, you can use Dreamweaver to
insert that content into an HTML document. Dreamweaver uses the embed tag to
mark the reference to the content file.
To insert Navigator plugin content:
1
In the Design view of the Document window, place the insertion point where
you want to insert the content.
2
Click the Plugin button in the Objects panel.
3
In the dialog box that appears, select a content file for a Navigator plugin.
Inserting Media
313
Setting Netscape Navigator plugin properties
After inserting content for a Netscape Navigator plugin, use the Property
inspector to set parameters for that content. To view the following properties
in the Property inspector, select a Netscape Navigator plugin object.
The Property inspector initially displays the most commonly used properties.
Click the expander arrow in the lower right corner to see all properties.
Name specifies
a name to identify the plugin for scripting. Enter a name in the
unlabeled field on the far left side of the Property inspector.
W and H specify, in pixels, the width and height allocated to the object on
the page. You can also specify the following units: pc (picas), pt (points), in
(inches), mm (millimeters), cm (centimeters), or % (percentage of the parent
object’s width and height). The abbreviations must follow the value without a
space: for example, 3mm.
Src specifies the source data file. Click the folder icon to browse to a file, or
enter a file name.
Plg Url specifies
the URL of the pluginspace attribute. Enter the complete URL
of the site where users can download the plugin. If the user viewing your page
does not have the plugin, the browser tries to download it from this URL.
Align determines
how the object is aligned on the page. For a description of each
option, see “Aligning elements” on page 271.
V Space and H Space specify
the amount of white space in pixels above, below,
and on both sides of the plugin.
Border specifies
the width of the border around the plugin.
Parameters opens
a dialog box for entering additional parameters to pass to the
Netscape Navigator plugin. See “Using parameters” on page 319. Many plugins
respond to special parameters. The Flash plugin, for example, includes parameters
for bgcolor, salign, and scale.
You can also view the attributes assigned to the selected plugin by clicking the
Attribute button. You can edit, add, and delete attributes such as width and height
in this dialog box.
314
Chapter 13
Playing plugins in the Document window
You can preview movies and animations that rely on Navigator plugins—that is,
elements that use the embed tag—directly in the Design view of the Document
window. (It is not possible to preview movies or animations that rely on ActiveX
controls in the Document window.) You can play all plugin elements at one time
to see how the page will look to the user, or you can play each one individually to
ensure that you have embedded the correct media element.
To play movies, the proper plugins must be installed on your computer. When
Dreamweaver starts up, it automatically searches for all installed plugins, looking
first in the Configuration/Plugins folder and then in the plugin folders of all
installed browsers.
To play plugin content in the Document window:
1
Insert one or more media elements by choosing Insert > Media > Shockwave,
Insert > Interactive Images > Flash, or Insert > Media > Plugin.
2
Play plugin content:
• 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 plugins.
Note: Play All only applies to the current document; it does not apply to other documents in
a frameset, for example.
To stop playing plugin content:
Select a media element and choose View > Plugins > Stop, or click the Stop button
in the Property inspector.
You can also choose View > Plugins > Stop All to stop all plugin content from playing.
Troubleshooting Navigator plugins
If you have followed the steps to play plugin content in the Document window,
but some of the plugin content does not play, try the following:
• Make sure the associated plugin is installed on your computer, and that the
content is compatible with the version of the plugin you have.
• Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor
and look to see if the problematic plugin is listed. This file keeps track of plugins
that cause problems in Dreamweaver and are therefore unsupported. (If you
experience problems with a particular plugin, 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 plugins require an
additional 2 to 5 MB of memory to run.
Inserting Media
315
Inserting an ActiveX control
ActiveX controls (formerly known as OLE controls) are reusable components,
somewhat like miniature applications, that can act like browser plugins. They run
in Internet Explorer with Windows, but they don’t run on the Macintosh or in
Netscape Navigator. The ActiveX object in Dreamweaver lets you supply
attributes and parameters for an ActiveX control in your visitor’s browser.
Dreamweaver uses the object tag to mark the place on the page where the
ActiveX control will appear, and to provide parameters for the ActiveX control.
To insert ActiveX control content:
1
In the Document window, place the insertion point where you want to insert
the content and do one of the following:
• Click the ActiveX button in the Objects panel.
• Choose Insert > Media > ActiveX.
• Drag and drop the ActiveX icon.
An icon marks where the ActiveX control will appear on the page in
Internet Explorer.
Setting ActiveX properties
After inserting an ActiveX object, use the Property inspector to set attributes of
the object tag and parameters for the ActiveX control. Click Parameters in the
Property inspector to enter names and values for properties that don’t appear in
the Property inspector. There is no widely accepted standard format for
parameters for ActiveX controls; to find out which parameters to use, consult the
documentation for the ActiveX control you’re using.
The Property inspector initially displays the most commonly used properties.
Click the expander arrow in the lower right corner to see all properties.
Name specifies
a name to identify the ActiveX object for scripting. Enter a name
in the unlabeled field on the far left side of the Property inspector.
W and H specify the width and height of the object in pixels. You can also specify
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm
(centimeters), or % (percentage of the parent object’s width and height). The
abbreviations must follow the value without a space: for example, 3mm.
Class ID identifies the ActiveX control to the browser. Enter a value or choose one
from the pop-up menu. When the page is loaded, the browser uses the class ID to
locate the ActiveX control required for the ActiveX object associated with the
page. If the browser doesn’t locate the specified ActiveX control, it attempts to
download it from the location specified in Base.
316
Chapter 13
Embed makes Dreamweaver add an embed tag within the object tag for the
ActiveX control. If the ActiveX control has a Netscape Navigator plugin
equivalent, the embed tag activates the plugin. Dreamweaver assigns the
values you’ve entered as ActiveX properties to their Netscape Navigator
plugin equivalents.
Align determines
how the object is aligned on the page. For a description of each
option, see “Aligning elements” on page 271.
Parameters opens
a dialog box for entering additional parameters to pass to the
ActiveX object. See “Using parameters” on page 319. Many ActiveX controls
respond to special parameters.
Src defines the data file to be used for a Netscape Navigator plugin if the Embed
option is turned on. If you don’t enter a value, Dreamweaver attempts to
determine the value from the ActiveX properties entered already.
V Space and H Space specify
the amount of white space in pixels above, below,
and on both sides of the object.
Base specifies
the URL containing the ActiveX control. Internet Explorer
downloads the ActiveX control from this location if it has not been installed in
the visitor’s system. If you don’t specify a Base parameter and if your visitor doesn’t
already have the relevant ActiveX control installed, the browser can’t display
the ActiveX object.
Alt Img specifies
object
an image to be displayed if the browser doesn’t support the
tag. This option is available only when the Embed option is deselected.
ID defines
the optional ActiveX ID parameter. This parameter is most often used
to pass information between ActiveX controls.
Data specifies
a data file for the ActiveX control to load. Many ActiveX controls,
such as Shockwave and RealPlayer, do not use this parameter.
Borders specifies
the width of the border around the object.
Inserting Media
317
Inserting a Java applet
Java is a programming language that allows the development of lightweight
applications (applets) that can be embedded in Web pages.
After you create a Java applet, you can insert that applet into an HTML document
using Dreamweaver. Dreamweaver uses the applet tag to mark the reference to
the applet file.
To insert a Java applet:
1
In the Document window, place the insertion point where you want to
insert the applet.
2
Click the Applet button in the Objects panel.
3
In the dialog box that appears, select a file containing a Java applet.
Setting Java applet properties
After inserting a Java applet, use the Property inspector to set parameters. To view
the following properties in the Property inspector, select a Java applet.
The Property inspector initially displays the most commonly used properties.
Click the expander arrow in the lower right corner to see all properties.
Name specifies
a name to identify the applet for scripting. Enter a name in the
unlabeled field on the far left side of the Property inspector.
W and H specify the width and height of the applet in pixels. You can also specify
the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm
(centimeters), or % (percentage of the parent object’s width or height). The
abbreviations must follow the value without a space: for example, 3mm.
Code specifies
the file containing the applet’s Java code. Click the folder icon to
browse to a file, or enter a file name.
Base identifies
the folder containing the selected applet. When you choose an
applet, this field is filled automatically.
Align determines
how the object is aligned on the page. For a description of each
option, see “Aligning elements” on page 271.
Alt specifies
alternative content (usually an image) to be displayed if the user’s
browser doesn’t support Java applets or has Java disabled. If you enter text,
Dreamweaver renders the text with the alt attribute of the applet tag. If you
choose an image, Dreamweaver inserts an img tag between the opening and
closing applet tags.
Note: To specify alternative content that is viewable in both Netscape Navigator (with Java
disabled) and Lynx (a text-based browser), select an image and then manually add an alt
attribute to the img tag in the Code inspector.
318
Chapter 13
V Space and H Space specify
the amount of white space in pixels above, below,
and on both sides of the applet.
Parameters opens
a dialog box for entering additional parameters to pass to the
applet. Many applets respond to special parameters.
Using parameters
Use the Parameters dialog box to enter values for special parameters defined for
Shockwave and Flash movies, ActiveX controls, Netscape Navigator plugins, and
Java applets. Parameters are used with the object, embed, and applet tags.
Parameters set attributes specific to the type of object being inserted. For example,
a Flash movie object can have a quality parameter <param name=”quality”
value=”best”> for the object tag. The Parameter dialog box is available from the
Property inspector. See the documentation for the object you’re using for
information on the parameters it requires.
Note: There is no widely accepted standard for identifying data files for ActiveX controls.
Consult the documentation for the ActiveX control you’re using to find out which
parameters to use.
To open the Parameters dialog box:
1
Select an object that can have parameters (such as a Shockwave movie, an
ActiveX control, a Navigator plugin, or a Java applet) in the Document window.
2
Open the dialog box by using one of these methods:
• Right-click (Windows) or Control-click (Macintosh) the object, and choose
Parameters from the context menu.
• Open the Property inspector if it isn’t already open, and click the Parameters
button found in the lower half of the Property inspector. (Make sure the
Property inspector is expanded.)
To enter a value for a parameter in the Parameters dialog box:
1
Click the Plus (+) button.
2
Enter the name of the parameter in the Parameter column.
3
Enter the value of the parameter in the Value column.
To remove parameters:
Select a parameter and press the Minus (-) button.
To reorder parameters:
Select a parameter and use the up and down arrow buttons.
Inserting Media
319
Using behaviors to control media
You can add behaviors to your page to start and stop various media objects.
Control Shockwave or Flash lets you play, stop, rewind, or go to a frame in a
Shockwave or Flash movie. See “Control Shockwave or Flash” on page 450.
Play Sound lets you play a sound. For example, you can play a sound effect whenever
the user moves the mouse pointer over a link. See “Play Sound” on page 458.
Check Plugin lets
you check to see if visitors to your site have the required plugin
installed, then route them to different URLs, depending on whether they have the
right plug-in. This only applies to Netscape Plugins, as the Check plugin behavior
does not check for ActiveX controls. See “Check Plugin” on page 449.
320
Chapter 13
14
CHAPTER 14
Editing HTML in Dreamweaver
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Although Macromedia Dreamweaver allows you to create and edit Web pages
visually without worrying about the HTML source code, there are times
when you may need access to your page’s underlying HTML. Being able to
edit the HTML can provide you with more control to modify and troubleshoot
your Web page.
For example, suppose you select text on your document and apply a new font, but
it only affects half the sentence. By looking at the HTML code in Dreamweaver
Code view (or Code inspector), you discover that the closing </font> tag is in the
middle of the sentence; all you have to do is move </font> to the end of your
sentence and the problem is fixed.
If you are interested in learning HTML, using the Dreamweaver visual editing
capabilities along with its Code view (or Code inspector) is a great way to
understand how HTML works. You can compare the HTML code to the visual
view to see how it corresponds.
Dreamweaver provides access to the HTML code through the Code view, the
Code inspector, and the Quick Tag Editor. For help in understanding and writing
HTML code, use the Dreamweaver Reference panel.
Dreamweaver also gives you the ability to open HTML files written elsewhere
without worrying about your code being compromised. Dreamweaver uses
Roundtrip HTML to make sure your HTML content and structure do not
change as you switch back and forth between Dreamweaver and an external
HTML editor. In addition, you can use Dreamweaver to clean up HTML files
that contain messy or unreadable code.
321
Understanding basic HTML tags
It can be useful to have a basic understanding of HTML when using
Dreamweaver. You can easily see both the HTML code and the visual design at
the same time, which gives you the opportunity to figure out how HTML code
works. Understanding and being able to modify the code can help you
troubleshoot your Web pages. If you are new to HTML, the following
explanations provide a brief overview. If you already know HTML, skip ahead
to the next section.
HTML is a text markup language. This means that HTML documents are plain
text documents that have specific “markup” tags that tell the Web browser how to
display the text.
For example, the i tag controls italic text. By placing <i> in your HTML, you tell
the browser that the subsequent text should be italic. By placing </i> in your
HTML, you tell the browser that the subsequent text should revert to the default
text. The tag with a slash (/) is called the closing tag.
Web browsers interpret these tags in your HTML document and display the text
with the proper formatting. Some tags have attributes that you can use with them.
For example, you can specify the alignment of an image within the image tag:
<IMG SRC="image.gif" align="left">. align is an attribute of the image tag.
Structure of a document
Every HTML document (Web page) must contain certain standard tags—the
tag and body tag. The head section contains the title of the Web page (and
any scripts), and the body section contains the actual text that will appear in the
Web page as it is displayed in the browser.
head
Here is the structure of a sample document:
<html>
<head>
<title>Title goes here
Welcome to my page
The p is a paragraph tag, which tells the browser that this is all
one paragraph.
322
Chapter 14
The required tags for every HTML document are html, head, and body.
Head tags
The head section (surrounded by head tags) contains only the page title
(surrounded by title tags) and programming scripts, such as JavaScript code that
implements an image rollover in your page.
The text that you put between and will appear in the top title
bar of the browser window. It will not appear on the page.
For example, the following HTML results in the page shown below:
Purcy the cat
Editing HTML in Dreamweaver
323
Body tags
The body of your document contains the content of your page. All your text,
images, tables, and other content must be placed between and .
Purcy the cat
Welcome to my home page.
I am a two-year-old part Siamese cat who lives in
San Francisco with my two owners.
; you must put the file name of the image between
quotation marks. Image tags also have attributes that you can use, such as width,
height, border, align, and valign. The width and height attributes specify
the size of your image for the Web browser to interpret; you can set the border
width to 0 or above (images display a border by default when used as links). The
align and valign attributes set alignment of your image: align (for horizontal
alignment) can be set to left, right, or center, and valign (vertical alignment)
can be set to top, bottom, or middle.
The following example shows a complete image tag:
.
About Roundtrip HTML
Roundtrip HTML is a unique feature in Dreamweaver that lets you move your
documents back and forth between a text-based HTML editor and Dreamweaver
with little or no effect on the content and structure of the document’s original
HTML source code. Dreamweaver even maintains and renders some HTML that
is technically invalid (such as a font tag enclosing multiple p tags) if such code is
supported by browsers. However, the HTML source code that Dreamweaver
generates as you edit graphically is always technically valid.
The following are key features of Roundtrip HTML:
• By default, Dreamweaver rewrites overlapping tags, closes open tags that aren’t
allowed to remain open, and removes extra closing tags when you switch back to
Dreamweaver from an external HTML editor or when you open an existing
HTML document. If you don’t want Dreamweaver to rewrite any HTML,
choose Edit > Preferences, then select Code Rewriting to turn off all rewriting. See
“Setting Code Rewriting preferences” on page 346. If you turn off code rewriting,
any HTML that Dreamweaver would have rewritten is displayed as invalid.
• When Highlight Invalid HTML is turned on, Dreamweaver highlights invalid
HTML (that it does not support) in yellow. When you select an invalid tag,
Dreamweaver displays information in the Property inspector about how to
correct the error. Highlight Invalid HTML is turned on by default in the Code
view (or Code inspector). To turn it off, choose Highlight Invalid HTML from
the Options menu in the Code view (or Code inspector) window. Error
highlighting is always on in the Design view.
Note: Enable/Disable Invalid HTML Highlighting is only available in the Code view (or
Code inspector). Design view always displays error highlighting.
Editing HTML in Dreamweaver
329
• Dreamweaver does not change tags that it does not recognize—including XML
tags—because it has no criteria by which to judge them valid or invalid. If an
unrecognizable tag overlaps a valid one, Dreamweaver may mark it as erroneous
but does not rewrite the code. For example, the custom tag in the following
would be marked erroneous: text.
• Dreamweaver does not alter ColdFusion Markup Language (CFML) or
Microsoft Active Server Pages (ASP) tags, and it displays icons to identify
blocks of CFML or ASP code in the Document window whenever possible. See
“Editing ColdFusion and Active Server files in Dreamweaver” on page 352.
• Dreamweaver lets you launch a text-based HTML editor to edit the current
document. Dreamweaver is integrated with HomeSite (Windows) and BBEdit
(Macintosh). See “Using external HTML editors” on page 350.
Using the Code view (or Code inspector)
You can view the HTML source code for the current document in several ways:
you can display only the Code view in the Document window, you can split the
Document window so that it displays both the Code view and the Design view, or
you can open the Code inspector. The Code view and the Code inspector work in
exactly the same way; the only difference is that the Code inspector is in a separate
window. Splitting the Document window to view the code makes it easier to view
the visual design while you make changes in the HTML code.
As you add or change content in the Design view, Dreamweaver immediately
displays the changes in the Code view or inspector. This makes the Code view or
inspector a useful tool for learning HTML if you don’t already know it, or for
reminding yourself of proper syntax or values for specific tags or attributes. HTML
tags and scripts are color coded and can be adjusted in the preference settings.
Changes or additions that you make in the code appear in the Design view only
after you synchronize the Code and Design views.
To synchronize the Code and Design views:
Click in the Design view after working in a code editor or click the Refresh Design
view button in the toolbar. (Choose View > Toolbar to display the toolbar.)
Dreamweaver never rewrites HTML that you type directly into a code editor. If
you enter invalid code and Highlight Invalid HTML is turned on, Dreamweaver
highlights the invalid code in the code editor. Error highlighting is on by default
in the code editors. Error highlighting always appears in the Design view, even
when Highlight Invalid HTML is turned off in the Code view.
330
Chapter 14
Opening the Code view (or Code inspector)
You can view the HTML source code in several ways: by displaying both code and
design in the Document window, by displaying code only, and by opening the
Code inspector.
To display both the Code and Design views:
Choose View > Code and Design, or click the Show Code and Design Views
button on the toolbar.
The HTML code appears in the top pane, and the Design view appears in
the bottom pane.
You can adjust the size of the panes by dragging the splitter bar.
Editing HTML in Dreamweaver
331
To adjust the split Code and Design view, do one of the following:
• To display the Design view on top, choose View > Design View on Top.
Alternatively, select Design View on Top from the Options pop-up menu
in the toolbar.
• To view only HTML code in the Document window, choose View > Code or
click the Show Code View button in the toolbar.
• To view only the visual design, choose View > Design or click the Show Design
View button in the toolbar.
If you prefer to work with the HTML code in a separate window, use the Code
inspector to view your code.
To open the Code inspector, do one of the following:
• Choose Window > Code inspector.
• Click the Code Inspector icon in the Launcher bar (in the lower right corner of
the Document window).
• Press F10.
To toggle between the Document window and the Code inspector:
Press Control-Tab (Windows) or Option-Tab (Macintosh).
332
Chapter 14
Setting Code view (or Code inspector) options
You can set word wrapping, code indenting, syntax coloring and more from the
Options menu in the code editors.
To access the Options menu, the Code view (or Code inspector) must be active.
Click in the Code view (or Code inspector) to make it active.
To set Code view (or Code inspector) options:
1
Access the options by doing one of the following:
• Click the Options pop-up menu in the toolbar. (Choose View > Toolbar to
view the toolbar.)
• Choose View > Code View Options.
The options menu is also available at the top of the Code inspector.
2
Set the options you want:
• Line Wrap wraps the code so that is viewable without horizontal scrolling. This
setting does not insert line breaks, but makes the code easier to view.
• Line Numbers adds line numbers along the side.
• Highlight Invalid HTML turns on error highlighting. When Highlight Invalid
HTML is turned on, Dreamweaver highlights invalid HTML (that it does not
support) in yellow. When you select an invalid tag, Dreamweaver displays
information in the Property inspector about how to correct the error.
• Syntax Coloring marks the different parts of your code with colors so that you
can quickly determine the different code elements. To change the colors, see
“Setting Code Colors preferences” on page 343.
• Auto Indent makes your code indent automatically. To change the indent
spacing or tags that automatically indent, see “Setting Code Format
preferences” on page 344.
Editing HTML in Dreamweaver
333
Writing and editing code
As you write and edit your code in the Code view (or Code inspector), you can
indent specific lines of code or check to make sure your tags are balanced.
Indenting a specific line or section of code will help you separate that code from
the rest, making it easier to find. Checking to see if your tags are balanced will
help you ensure that all the tags have matching opening tags and closing tags, and
is especially useful when you use multiple nesting levels in your code—for
example, if you have nested several tables within other tables.
To indent selected code:
1
Select the line or lines of code you want to indent.
For indenting to work, the whole line must be selected.
2
Choose Edit > Indent Code.
The code will be indented. Choose Edit > Outdent Code to move indented
code back.
To check for balanced tags:
1
Place the insertion point in the nested code you want to check.
2
Choose Edit > Select Parent Tag.
The enclosing matching tags will be highlighted in your code. Choosing Edit >
Select Parent Tag again will highlight the matching tags that enclosed the
previous selection.
334
Chapter 14
Inserting scripts
You can write or insert scripts in the Code view (or Code inspector), or you can
enter JavaScript and VBScript in the Design view without having to use the Code
view. You can also open script files in Dreamweaver Code view. Dreamweaver does
not alter or rewrite the file. For more information, see “Opening and editing nonHTML files in Dreamweaver” on page 338.
To display script markers in the Document window, choose View > Visual Aids >
Invisible Elements. (See also “Setting Invisible Elements preferences” on page 156.)
To insert a script in code or Design view:
1
Place the insertion point where you want the script.
2
Click the Script button on the Objects panel, or choose Insert >
Invisible Tags > Script.
3
In the dialog box that appears, choose the scripting language from the
Language pop-up menu.
If you are using JavaScript and are unsure of the version, choose JavaScript
rather than JavaScript1.1 or JavaScript1.2.
4
Enter your script code in the Content text box.
To link to an external script file:
1
Follow steps 1 through 3 above.
2
Click OK without typing anything in the Content text box.
3
Select the script marker in the Design view of the Document window.
Choose View > Visual Aids > Invisible Elements to view the marker. Make sure
that scripts are selected in Invisible Elements preferences, or the script marker
will not appear. For more information, see “Setting Invisible Elements
preferences” on page 156.
4
In the Property inspector, click the folder icon to browse to and select the
external script file, or type the file name in the Source box.
Editing HTML in Dreamweaver
335
Editing a script
You can edit a script in a code editor or the Design view.
To edit the script in the Code view:
Find the script in the Code view and edit it directly. Selecting the Script marker in
the design view will highlight the script in the code view.
To edit the script in the Design view:
1
Select the Script marker.
2
In the Property inspector, click the Edit button.
If you linked to an external script file, the file automatically opens in Code view,
where you can make your edits. Otherwise, the Script Properties dialog box opens
and you can edit the script in the Script text box.
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.
The following properties appear in the Script Properties dialog box (and the
Property inspector) when a script marker is selected:
• Language specifies either JavaScript or VBScript as the language of the script.
• Type specifies the type of script, either client-side or server-side.
• Source specifies an externally linked script file. Click the folder icon to choose
the file, or type the path.
• Script is where you edit/write your script.
336
Chapter 14
To check for balanced braces:
1
Place the insertion point in the nested code you want to check.
2
Choose Edit > Balance Braces.
The enclosing matching tags are highlighted in your code. Choosing Edit >
Balance Braces again will highlight the matching tags that enclosed the
previous selection.
Viewing script functions
You can view all of the JavaScript or VB Script functions in your code from the
Code Navigation pop-up menu in the toolbar (View > Toolbar).
To view the script functions:
Click the Code Navigation button in the toolbar.
If your code contains JavaScript or VB Script functions, they will appear in the
menu. To see the functions listed in alphabetical order, hold down Control
(Windows) or Option (Macintosh) while clicking the Code Navigation button.
To go to a function in your code:
Select a function from the Code Navigation pop-up menu. The function will be
highlighted in the Code view (or Code inspector).
Editing HTML in Dreamweaver
337
Opening and editing non-HTML files in
Dreamweaver
When you open a non-HTML file (for example, a .js file) in Dreamweaver,
Dreamweaver does not alter it. These files open in the Code view (or Code
inspector), with the Design view disabled. You can edit the file and save it as an
HTML file or a non-HTML file.
You can set Dreamweaver to automatically open non-HTML files with certain
extensions by default. For example, you can set the default preferences so that .js
files automatically open in the Code view (or Code inspector).
To set the default preferences for non-HTML files:
1
Choose Edit > Preferences, then select File Types/Editors.
2
In the Open in Code View field, type the file name extensions you want to
open automatically in Code view. Put a space between each file type.
The default file extensions listed are .js, .txt, and .asa. You can add as
many as you want.
Editing an HTML tag in the Design view
Use the Quick Tag Editor to quickly inspect and edit the HTML source of a single
tag from within the Design view, without having to switch to the Code view and
back again. The easiest way to open the Quick Tag Editor is to press Control+T
(Windows) or Command+T (Macintosh).
The Quick Tag Editor has three modes:
• Insert HTML, used to insert new HTML code
• Edit Tag, used to edit an existing tag
• Wrap Tag, used to wrap a new tag around the current selection
The current selection in the Design view determines the mode in which the
Quick Tag Editor opens. In all three modes, the basic operation of the Quick Tag
Editor is the same: you open the editor, enter or edit tags and attributes, and then
close the editor.
If you use any invalid HTML in the Quick Tag Editor, Dreamweaver attempts
to correct it for you by inserting closing quotation marks and closing angle
brackets where needed.
To perform more extensive HTML editing, use the Code view (or Code inspector).
338
Chapter 14
To open the Quick Tag editor in Insert HTML mode:
1
Click in the Design view to place the insertion point where you want
to insert code.
2
Press Control+T (Windows) or Command+T (Macintosh), or click the
Quick Tag Editor button in the Property inspector.
The Quick Tag Editor opens.
3
Enter the HTML tag, then press Enter.
The tag is inserted into your code. Press Esc to exit without making any changes.
To open the Quick Tag editor in Edit Tag mode:
1
Select the text or object that you are editing in the Design view.
You can also select the tag you want to edit from the tag selector at the bottom
of the Document window.
2
Press Control+T (Windows) or Command+T (Macintosh), or click the Quick
Tag Editor button in the Property inspector.
The Quick Tag Editor opens.
3
Enter new attributes, edit existing attributes, or edit the tag’s name;
then press Enter.
The edited tag is inserted into your code. Press Esc to exit without
making any changes.
Editing HTML in Dreamweaver
339
To open the Quick Tag Editor in Wrap Tag mode:
1
Select unformatted text or an object.
If you select text or an object that includes an opening or closing HTML tag,
the Quick Tag Editor will open in Edit Tag mode.
2
Press Control+T (Windows) or Command+T (Macintosh), or click the Quick
Tag Editor button in the Property inspector.
The Quick Tag Editor opens.
3
Enter a single opening tag, such as , and press Enter.
The tag is inserted at the beginning of the current selection, and a matching
closing tag is inserted at the end. Press Esc to exit without making any changes.
To apply your changes immediately:
After editing a tag, press Tab or Shift+Tab. The change you made is applied
immediately, rather than when you exit the Quick Tag Editor.
If you want to prevent this behavior, deselect the Apply Changes Immediately
While Editing option in Quick Tag Editor preferences. (See “Setting Quick Tag
Editor preferences” on page 342.)
Note: When the Apply Changes Immediately While Editing option is deselected, multiple
changes that you apply at once appear as a single step in the History panel and are undone
with a single Undo operation.
To cycle through the Quick Tag Editor modes:
With the Quick Tag Editor active, press Control+T (Windows) or Command+T
(Macintosh).
The Quick Tag Editor changes modes each time you use the keyboard shortcut,
cycling among Insert HTML mode, Edit Tag mode, and Wrap Tag mode.
To move the Quick Tag Editor on the screen:
Drag the editor’s handle (where the mode name appears).
340
Chapter 14
Using the hints menu
While in the Quick Tag Editor, you can access an attributes hint menu that lists all
the valid attributes of the tag you are editing or inserting. (If Dreamweaver doesn’t
recognize the tag you’re editing, the hints menu contains all the attributes that
Dreamweaver recognizes for any tag.) The hints menu does not appear if you
deselected the Enable Tag Hints option in Quick Tag Editor preferences.
To see a list of valid attributes for a tag you’re editing:
Pause for a few seconds while editing an attribute name. A hints menu appears,
listing all the valid attributes for the tag you’re editing. Control the hints menu in
the following ways:
• As you begin to type an attribute name, the hints menu scrolls to highlight the
first attribute name that starts with the letters you’ve typed.
• To move the highlighting up and down in the menu, use the Up and Down
Arrow keys or the scroll bar.
• To choose the highlighted attribute name, press Enter (Windows) or Return
(Macintosh). Alternatively, double-click an attribute name in the menu.
• To dismiss the hints menu without selecting an entry, press Esc or simply
continue typing.
When you pause while entering or editing a tag name, a similar hints menu
appears, listing tag names instead of attribute names.
The tags and attributes that the hints menu displays come from the
TagAttributeList.txt file, located in your Dreamweaver/Configuration folder. If
you’re an advanced Dreamweaver user and you want to add tags to or remove tags
from the hints menu, you can edit this file. (See “Opening and editing nonHTML files in Dreamweaver” on page 338.)
To edit existing attribute values in Edit Tag mode:
Press Tab to move forward from one item to the next, until the attribute (or tag)
that you want to edit is selected. Press Shift+Tab to move backward to the
previous attribute name, attribute value, or tag name.
Editing HTML in Dreamweaver
341
To add a new attribute to a tag:
1
Use Tab, the arrow keys, and the Spacebar to move the insertion point to where
you want to add an attribute.
2
Type a valid attribute name for the tag.
If you pause in typing, the hints menu appears.
Removing a tag
You can remove a tag from your document, leaving its content (if any) in place.
To remove a tag:
1
Do one of the following:
• Select the tag in the tag selector at the bottom left of the Document window.
• Select anything in the Document window, or click to place the insertion point
in the window.
2
Right mouse-click (Windows) or Control-click (Macintosh) in the Design
view, and choose Remove Tag from the context menu.
Setting Quick Tag Editor preferences
Quick Tag Editor preferences let you control whether the edits you make in the
Quick Tag Editor are automatically updated in the Document window. You can
also adjust the controls for the hints menu. To display these preferences, choose
Edit > Preferences and select Quick Tag Editor.
Apply Changes Immediately While Editing controls whether your Quick Tag
Editor changes are automatically updated in your document as you move between
attributes in Edit Tag mode. If you turn off this option, you must press Enter to
apply your changes to the document. (This option is ignored in Insert HTML
mode and in Wrap Tag mode; in those modes, you must always press Enter to
apply your changes to the document.)
Enable Tag Hints controls
whether the hints menu appears while you’re typing in
the Quick Tag Editor. You can also adjust the length of the delay before the menu
displays for the current attribute or tag.
342
Chapter 14
Setting code formatting preferences
You can set the following preferences for formatting code in Dreamweaver:
• Code Colors preferences control how HTML tags (and the text between them)
and scripts are color coded in the Code view or Code inspector. See “Setting
Code Colors preferences” on page 343.
• Code Format preferences determine common code formatting options, such as
line length and indentation. See “Setting Code Format preferences” on page
344. These preferences provide a user interface for changing the
SourceFormat.txt file.
• Code Rewriting preferences determine what changes, if any, Dreamweaver
makes to your code when you open an HTML or script document. See
“Setting Code Rewriting preferences” on page 346.
• Fonts/Encoding preferences let you specify the font in which your code appears
in the Code view (or Code inspector). See “Setting Fonts/Encoding
preferences” on page 89.
Finally, the SourceFormat.txt file (in the Dreamweaver/Configuration folder)
provides precise specifications for formatting code. Editing this file in a text editor
gives you the greatest degree of control over exactly how Dreamweaver writes code;
you can change certain tag-specific options in this file that you can’t change using the
Code Format preferences. However, do not edit this file unless you are an advanced
Dreamweaver user or developer, because you may cause serious errors to your
Dreamweaver program. See “Changing default HTML formatting” on page 530.
Setting Code Colors preferences
Use Code Colors preferences to control the background, text, tag, and reserved
keyword colors in the Code view (or Code inspector). To work with these
preferences, choose Edit > Preferences and select Code Colors.
Background specifies
the background color of the Code view (or Code inspector).
This color appears only when you click or type in the Code view or inspector.
Text specifies
the color of text that appears between tags. For example, in the
code some text, the words “some text” appear in the specified text color,
but the tags do not. To override the text color for a specific tag, select the Include
Contents option.
Comments specifies
the color for comment tags ()
and their contents.
Tag Default specifies
the color for all tags except comments. To override this color,
set the Tag Specific option.
Reserved Keywords specifies
the color for all reserved keywords. To override this
color, set the Tag Specific option.
Editing HTML in Dreamweaver
343
Other Keywords specifies
the color for all other keywords. To override this color,
set the Tag Specific option.
Strings specifies the color for all strings in your code. To override this color, set the
Tag Specific option.
allows you to override the other color settings by specifying colors
for specific tags.
Tag Specific
To set a color for a specific tag:
1
Select a tag in the Tag Specific box.
Shift-click to select adjacent tags. To select nonadjacent tags, Control-click
(Windows) or Command-click (Macintosh).
2
Click the radio button next to the color swatch at the bottom of the panel, and
use one of these methods to choose a new color value:
• Click the color swatch and select a new color from the palette of browser-safe
colors or the system color picker.
• In the text field next to the swatch, enter a hexadecimal value.
3
To color the text between the opening and closing tags, select Apply Color
to Tag Contents.
Setting Code Format preferences
Use the following Code Format preferences to control code formatting such as
indentation, line length, and the case of tag and attribute names. (For information
on additional code formatting controls, see “Changing default HTML
formatting” on page 530.)
Note that all the preferences except Override Case Of affect only new documents
and new additions to existing documents. That is, when you open a previously
created HTML document, these formatting options are not applied to it; to
reformat existing HTML documents, use the Apply Source Formatting command.
(See “Formatting the HTML source code in existing documents” on page 348.)
Indent turns on indentation of all tags marked indent in the SourceFormat.txt
file. See “Changing default HTML formatting” on page 530.
Use specifies
whether to indent using spaces or tabs.
Table Rows and Columns automatically indents tr and td tags to make table code
easier to read. The Indent option must be selected for this option to work.
Frames and Framesets automatically
indents frame and nested frameset tags to
make frameset files easier to read. The Indent option must be selected for this
option to work.
344
Chapter 14
Indent Size determines
the size of indents. The size is measured in spaces if Use is
set to spaces, or in tabs if Use is set to tabs.
Tab Size determines
the size of tabs (measured in character spaces).
Automatic Wrapping adds
“hard” returns once a line reaches the specified column
width. (Note that Dreamweaver inserts hard returns only in places where they
don’t change the appearance of the document in browsers, so some lines may
remain longer than the Automatic Wrapping option specifies.) By contrast, the
Wrap option in the Code view (or Code inspector) adds a “soft” return for lines
that extend beyond the width of the window.
Line Breaks specifies
the type of remote server (Windows, Macintosh, or UNIX)
that hosts your remote site. Choosing the correct type of line break characters
ensures that your HTML source code appears correctly when viewed on the
remote server. (Note that for FTP, this setting applies only to binary transfer
mode; Dreamweaver ASCII transfer mode ignores this setting. If you download
files using ASCII mode, Dreamweaver sets line breaks based on the operating
system of your computer; if you upload files using ASCII mode, the line breaks
are all set to CR LF.) This setting is also useful when you are working with an
external text editor that recognizes only certain kinds of line breaks. For example,
use CR LF (Windows) if Notepad is your external editor, and CR (Macintosh) if
SimpleText is your external editor.
Case for Tags and Case for Attributes control
the capitalization of tag and
attribute names. These options are applied to tags and attributes that you insert or
edit in the Document window, but they are not applied to the tags and attributes
that you enter directly in the Code view (or Code inspector), or to the tags and
attributes in a document when you open it (unless you also select one or both of
the Override Case Of options).
specify whether to enforce your specified
case options at all times, including when you open an existing HTML document.
When you select one of these options, all tags or attributes in open documents are
immediately converted to the specified case, as are all tags or attributes in each
document you open from then on (until you deselect this option again). Tags or
attributes you type in the Code view (or Code inspector) and the Quick Tag
Editor are also converted to the specified case, as are tags or attributes you insert
using the Objects panel. For example, if you want tag names always to be
converted to lowercase, specify lowercase in Case for Tags, and then select the
Override Case Of: Tags option. Then when you open a document that contains
uppercase tag names, Dreamweaver converts them all to lowercase.
Override Case Of: Tags and Attributes
Centering specifies
whether elements should be centered using div
or center. Both are part of the HTML 4.0 Transitional
specification, but center is supported by a wider range of browsers.
align="center"
Editing HTML in Dreamweaver
345
Setting Code Rewriting preferences
Code Rewriting preferences determine what Dreamweaver does while opening
HTML or script documents. (These preferences have no effect when you edit
HTML or scripts in the Code view or Code inspector.) If you turn off these
rewriting options, Dreamweaver displays invalid markup items in the Document
window for HTML that it would have rewritten. If you are importing an HTML
document from Microsoft Word, you can use the Clean Up Word HTML
command to remove any unnecessary HTML code. For more information, see
“Cleaning up Microsoft Word HTML” on page 348.
Fix Invalidly Nested and Unclosed Tags rewrites
overlapping tags. For example,
is rewritten as text. This option also
inserts closing quotation marks and closing brackets if they are missing.
text
Remove Extra Closing Tags deletes
closing tags that have no corresponding
opening tag.
Warn When Fixing or Removing Tags displays a summary of technically invalid
HTML that Dreamweaver attempted to correct. The summary notes the location
of the problem (using line and column numbers) so that you can find the
correction and ensure it is rendering as intended.
Never Rewrite HTML: In Files with Extensions allows you to prevent Dreamweaver
from rewriting HTML in files with the specified file name extensions. This option
is particularly useful for files that contain third-party tags (such as ASP tags). For
more information, see “Avoiding rewriting third-party tags” on page 544.
The two Special Characters options allow you control over whether Dreamweaver
encodes certain characters in certain contexts. In general, it’s best to leave these
options selected unless your files contain certain third-party tags that use the
characters in question. For more information on these options, see “Avoiding
rewriting third-party tags” on page 544.
346
Chapter 14
Cleaning up HTML source code
Use the Clean Up HTML command to remove empty tags, combine nested font
tags, and otherwise improve messy or unreadable HTML code.
To clean up HTML source code:
1
Open an existing document and choose Commands > Clean Up HTML.
2
In the dialog box that appears, select from the following options:
• Remove Empty Tags removes any tags that have no content between them. For
example, and are considered
empty tags, but the tag in some text is not.
• Remove Redundant Nested Tags removes all redundant instances of a tag.
For example, in the code This is what I really wanted to
say , the b tags surrounding the word “really” are redundant and would
be removed.
• Remove Non-Dreamweaver HTML Comments removes all comments that
were not inserted by Dreamweaver. For example,
would be removed, but would not
(because it is a Dreamweaver comment that marks the beginning of an editable
region in a template).
• Remove Dreamweaver HTML Comments removes all comments that were
inserted by Dreamweaver. For example, would not (because it
is not a Dreamweaver comment). Removing Dreamweaver comments turns
template-based documents into ordinary HTML documents and library items
into normal HTML code (that is, they cannot be updated whenever the
original template or library item changes).
-->
• Remove Specific Tag(s) removes the tags specified in the adjacent text field. Use
this option to remove custom tags inserted by other visual editors and other
tags that you do not want to appear on your site (for example, blink). Separate
multiple tags with commas (for example, font, blink).
• Combine Nested Tags When Possible consolidates two or more
font tags when they control the same range of text. For example, big red would be
changed to big red.
• Show Log on Completion displays an alert box with details about the changes
made to the document as soon as the cleanup is finished.
3
Click OK.
Depending on the size of your document and the number of options selected,
it may take several seconds to complete the cleanup.
Editing HTML in Dreamweaver
347
Formatting the HTML source code in existing documents
The HTML source formatting options that you specify in HTML Format
preferences and the SourceFormat.txt file apply only to any subsequent new
documents that you create with Dreamweaver. To apply these formatting options
to existing HTML documents, use the Apply Source Formatting command.
To apply HTML source formatting options to an existing document:
1
Choose File > Open to open an existing HTML file in the Document window.
2
Choose Commands > Apply Source Formatting.
Cleaning up Microsoft Word HTML
In Dreamweaver, you can open or import documents saved by Microsoft Word
as HTML files, then use the Clean Up Word HTML command to remove the
extraneous HTML code generated by Word. The code that Dreamweaver removes
is primarily used by Word to format and display documents in Word and is not
needed to display the HTML file. Retain a copy of your original Word (.doc) file
as a backup, because you may not be able to reopen the HTML document in
Word once you’ve applied the Clean Up Word HTML feature. The Clean Up
Word HTML command is available for documents saved as HTML files by
Word 97 or later.
To clean up Word HTML:
1
In Microsoft Word, save your document as an HTML file.
2
Open the HTML document in Dreamweaver using either of the
following methods:
• Choose File > Import > Import Word HTML and select a file to open.
Dreamweaver opens the file and then automatically opens the Clean Up Word
HTML dialog box.
• Choose File > Open and select a file to open.
An HTML Corrections log file is automatically generated if Warn when Fixing
or Removing Tags is selected in HTML Rewriting preferences. This is not part
of the Clean Up Word HTML feature. Click Continue to exit the dialog box.
Then, in Dreamweaver, choose Commands > Clean Up Word HTML.
3
348
Chapter 14
With either of these methods, there may be a slight delay while Dreamweaver
attempts to determine which version of Word was used to save the file. If
Dreamweaver is unable to determine this, select the correct version using
the pop-up menu.
4
Choose which options the Clean Up Word HTML feature should use. The
Basic tab displays the following options:
• Remove all Word Specific Markup removes all Word-specific HTML,
including XML from html tags, Word custom meta data and link tags in the
head of the document, Word XML markup, conditional tags and their
contents, and empty paragraphs and margins from styles. You can select each of
these options individually using the Detailed tab.
• Clean up CSS removes all Word-specific CSS, including inline CSS styles when
possible (where the parent style has the same style properties), style attributes
beginning with “mso,” non-CSS style declarations, CSS style attributes from
tables, and all unused style definitions from the head. You can further
customize this option using the Detailed tab.
• Clean up Tags removes HTML tags, converting the default body text to
size 2 HTML text.
• Fix Invalidly Nested Tags removes the font markup tags inserted by Word
outside the paragraph and heading (block-level) tags.
• Set Background Color allows you to enter a hexadecimal value to set the
background color of your document. If you do not set a background color,
your Word HTML document will have a gray background. The default
hexadecimal value set by Dreamweaver is white.
• Apply Source Formatting applies the source formatting options you specify in
HTML Format preferences and SourceFormat.txt to the document.
• Show Log on Completion displays an alert box with details about the changes
made to the document as soon as the cleanup is finished.
5
Click OK.
Depending on the size of your document and the number of options selected,
it may take several seconds to complete the cleanup. The preferences you
entered are automatically saved as the default Clean Up Word HTML settings.
Editing HTML in Dreamweaver
349
Using external HTML editors
You may want to use a text editor to hand-code large amounts of HTML,
JavaScript, or VBScript. You can use any external text editor with Dreamweaver,
including Notepad (bundled with Windows 95 and NT) or SimpleText (bundled
with the Macintosh), BBEdit, HomeSite, vi, emacs, and TextPad. See “Using an
external text editor with Dreamweaver” on page 350 and “Using BBEdit with
Dreamweaver (Macintosh only)” on page 351.
Using an external text editor with Dreamweaver
You can launch your primary external text editor from Dreamweaver to edit the
source HTML for the current document and then switch back to Dreamweaver to
continue editing graphically. Dreamweaver detects any changes that have been
saved to the document externally and prompts you to reload the document
upon returning.
If you use BBEdit on the Macintosh, follow the steps in “Using BBEdit with
Dreamweaver (Macintosh only)” on page 351 instead of the following steps.
To set up external editors for file types other than text and HTML, see
“Launching an external editor” on page 298.
To choose an external HTML editor:
1
Choose Edit > Preferences, and select File Types/Editors.
2
(Macintosh only) To use an HTML editor other than BBEdit, deselect the
Enable BBEdit Integration option. To use BBEdit, leave Enable BBEdit
Integration selected and skip the rest of these steps.
3
Click the Browse button next to the External Code Editor box to choose
a text editor.
4
In the Reload Modified Files option, specify what you want Dreamweaver to
do when it detects that changes have been made externally to a document that
is open in Dreamweaver.
5
In the Save on Launch option, specify whether Dreamweaver should always
save the current document before launching the editor, never save the
document, or prompt you to ask whether to save or not each time you launch
the external editor.
To launch the external HTML editor:
Choose Edit > Edit with (editor name).
350
Chapter 14
Using BBEdit with Dreamweaver (Macintosh only)
When BBEdit integration is turned on, once you have a document open in
both BBEdit and Dreamweaver, switching from one application to the other
automatically updates the document with the latest changes. In addition,
both programs track the current selection; for example, you can make a
selection in Dreamweaver and then switch to BBEdit, where the same element
will be selected.
You can disable BBEdit integration if you prefer working with an older version of
BBEdit or a different HTML text editor. Selections are not tracked if BBEdit
integration is turned off.
To use BBEdit with Dreamweaver:
1
Choose Edit > Edit with BBEdit.
2
Edit the document in BBEdit.
3
Click the Dreamweaver button on the HTML Tools palette in BBEdit to
return to Dreamweaver.
To disable BBEdit integration:
1
Choose Edit > Preferences, and select File Types/Editors.
2
Deselect Enable BBEdit Integration and click OK.
Editing HTML in Dreamweaver
351
Editing ColdFusion and Active Server files in Dreamweaver
Dreamweaver displays icons to identify blocks of ColdFusion Markup
Language (CFML) or Active Server Pages (ASP) code in the Design
view whenever possible.
Note: By default, Dreamweaver never rewrites HTML found in ColdFusion and ASP files.
To edit a block of ASP code from the Design view:
1
Click the yellow ASP marker to select it.
2
In the Property inspector, click the Edit button.
3
Edit the ASP code in the dialog box that appears, and then click OK.
To edit a block of CFML code from the Design view:
1
Click the CFML marker to select it.
2
In the Property inspector, do one of the following:
• Click the Attributes button to edit the tag’s attributes and their values or to
add new ones.
• Click the Content button to edit the content that appears between the opening
and closing CFML tags. If the selected tag is an empty tag (that is, if it has no
closing tag), the Content button is disabled.
If you don’t see markers or highlighted text where you know ASP or CFML code
exists, first make sure that View > Visual Aids > Invisible Elements is enabled. If
that option is selected and the icons are still not visible, Dreamweaver can’t display
the code as CFML or ASP. This can happen, for example, when conditionals are
inserted into HTML tags, as in the following ASP code:
checked<% end if %>
>
To edit CFML or ASP code in the code editors, do one of the following:
Find the code in the Code view or Code inspector and edit it directly.
To find the CFML or ASP code:
Position the insertion point near the location of the CFML or ASP code in the
Design view. The CFML or ASP code will be highlighted in the Code view or
Code inspector and you can edit it directly.
For information about processing CFML or ASP code and viewing the results
in the Document window, see “Customizing the interpretation of third-party
tags” on page 537.
352
Chapter 14
15
CHAPTER 15
Linking and Navigation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Once you’ve set up a local site in which to store your Web site documents and
have created HTML pages, you’ll want to create connections from your
documents to other documents or file types. (For information on setting up a
local site, see “Using Dreamweaver to set up a new site” on page 102.)
Macromedia Dreamweaver provides several ways to create hypertext links to
documents, images, multimedia files, or downloadable software. You can establish
links to any text or image anywhere within a document, including text or images
located in a heading, list, table, layer, or frame. For details on creating links, see
“Creating links” on page 358.
For a visual representation of how your files are linked together, use the site
map. In the site map you can add new documents to your site, create and
remove document links, and check links to dependent files. See “Using the site
map” on page 117.
There are several different ways of creating and managing links. Some Web
designers prefer creating links to nonexistent pages or files as they work, while
others prefer creating all the files and pages first, then adding the links. Another
way to manage links is to create “placeholder” pages which stand in for the final
file and let you add links quickly and check them before you have actually
completed all the pages. See “Checking links in a page or site” on page 506.
353
About document locations and paths
Understanding the file path between the document you’re linking from and the
document you’re linking to is essential to creating links.
Each Web page has a unique address, called a Uniform Resource Locator (URL).
(For detailed information on URLs, see the World Wide Web Consortium page
on naming and addressing.) However, when you create a local link (a link from
one document to another on the same site), you generally don’t specify the entire
URL of the document you’re linking to; instead, you specify a relative path from
the current document or from the site’s root folder. The following are the three
types of link paths:
• Absolute paths (such as http://www.macromedia.com/support/dreamweaver/
contents.html).
• Document-relative paths (such as dreamweaver/contents.html).
• Root-relative paths (such as /support/dreamweaver/contents.html).
Using Dreamweaver, you can easily select the type of document path to create for
your links. See “Linking documents using the Property inspector and the Pointto-File icon” on page 359.
Note: It is best to use the type of linking you prefer and are most comfortable with, either
site or document relative. Browsing to links, as opposed to typing in the paths, ensures that
you always enter the right path.
Absolute paths
Absolute paths provide the complete URL of the linked document, including
the protocol to use (usually http:// for Web pages). For example, http://
www.macromedia.com/support/dreamweaver/contents.html is an absolute path.
You must use an absolute path to link to a document on another server. You can
also use absolute-path links for local links (to documents in the same site), but
that approach is discouraged; if you move the site to another domain, all of your
local absolute-path links will break. Also, using relative paths for local links
provides greater flexibility if you need to move files within your site.
Note: When inserting images (not links): if you use an absolute path to an image that
resides on a remote server and is not available on the local hard drive, you will not be able to
view the image in your document window. Instead, you must preview the document in a
browser to see it. If possible, use document or root-relative paths for images. For more
information, see “Inserting an image” on page 268.
354
Chapter 15
Document-relative paths
Document-relative paths are the most appropriate paths to use for local links in
most Web sites. They’re particularly useful when the current document and the
linked document are in the same folder and are likely to remain together. You can
also use a document-relative path to link to a document in another folder, by
specifying the path through the folder hierarchy from the current document to the
linked document. The basic concept behind document-relative paths is to omit
the part of the absolute URL that is the same for both the current document and
the linked document, providing only the portion of the path that differs.
• To link to another file in the same folder as the current document, simply enter
the file name.
• To link to a file in a subfolder of the current document’s folder, provide the
name of the subfolder, then a forward slash (/), and then the file name.
• To link to a file in the parent folder of the current document’s folder, precede
the file name with ../ (where “..” means “up one level in the folder hierarchy”).
For example, suppose you have a site with this structure:
my_site (root folder)
support
contents.html
hours.html
resources
tips.html
products
catalog.html
index.html (home page)
Linking and Navigation
355
To link from contents.html to other files:
• To link from contents.html to hours.html (both files are in the same folder),
the file name is the relative path: hours.html.
• To link to tips.html (in the subfolder named resources), use the relative path
resources/tips.html.
Each forward slash (/) represents moving down one level in the folder hierarchy.
• To link to index.html (in the parent folder, one level above contents.html), use
the relative path ../index.html.
Each ../ represents moving up one level the folder hierarchy.
• To link to catalog.html (in a different subfolder of the parent folder), use the
relative path ../products/catalog.html.
The ../ moves up to the parent folder; the products/ moves down into the
products subfolder.
Note: Always save a new file before creating a document-relative path; a documentrelative path is not valid without a definite starting point. If you create a document-relative
path before saving the file, Dreamweaver temporarily uses an absolute path beginning with
file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path
into a relative path.
When you move a group of files as a group—for example, when you move an
entire folder, so that all the files inside that folder retain the same relative paths to
each other—you don’t need to update document-relative links between those files.
When you move an individual file that contains document-relative links, however,
or an individual file that’s linked to by a document-relative link, you do need to
update those links. (If you move or rename files using the Site window,
Dreamweaver updates all relevant links automatically.)
356
Chapter 15
Root-relative paths
Root-relative paths provide the path from the site’s root folder to a document. You
might want to use these types of paths if you are working on a large Web site that uses
several servers, or one server that hosts several different sites. However, if you are not
familiar with this type of path, you may want to stick to document-relative paths.
A root-relative path begins with a leading forward slash, which stands for the site
root folder. For example, /support/tips.html is a root-relative path to a file
(tips.html) in the support subfolder of the site’s root folder.
A root-relative path often provides the best way to specify links in a Web site in
which you need to frequently move HTML files from one folder to another.
When you move a document that contains root-relative links, you don’t need to
change the links; for example, if your HTML files use root-relative links for
dependent files (such as images), then if you move an HTML file, its dependentfile links are still valid. However, when you move or rename the documents linked
to with root-relative links, you do need to update those links, even if the
documents’ paths relative to each other haven’t changed. For example, if you move
a folder, all root-relative links to files within that folder must be updated. (If you
move or rename files using the Site window, Dreamweaver updates all relevant
links automatically.)
• To use root-relative paths, first define a local site in Dreamweaver by choosing a
local root folder to serve as the equivalent of the document root on a server.
(See “Using Dreamweaver to set up a new site” on page 102.)
Dreamweaver uses this folder to determine the root-relative paths to files.
Note: Root-relative links are interpreted by servers, not by browsers, so if you open a local
page that uses root-relative links in your browser (without using Preview in Browser from
within Dreamweaver), the links don’t work. When you use the Preview in Browser
command to preview a document that uses root-relative links, Dreamweaver temporarily
converts those links (in the previewed file only) to use absolute file:// paths. However, you
can preview only one page at a time that uses root-relative links—if you follow a link from
the previewed page, the next page’s root-relative links are not converted, and the browser
can’t follow such links. Previewing pages in framesets that use root-relative links results in
similar problems.
To preview a set of pages that use root-relative links, do one of the following:
• Put the files on a remote server and view them from there.
• (Windows only) Choose Edit > Preferences, and in Preview in Browser
preferences, select Preview Using Local Server. To use this option, you must be
running a Web server on your local computer.
Linking and Navigation
357
Creating links
The HTML tag for creating a hypertext link is called an anchor tag or an a tag.
Dreamweaver creates an anchor tag for objects, text, or images you create links
from. You can create links to other documents and files, and links to specific
places in a single document using the a href tag.
For example, if you selected the text Home Page in the Document window, then
created a link to a file named home.htm, the HTML source code for the link
would look like this:
Home Page
If you are creating a link to a specific place in a document, you first create a named
anchor, for example, a name="MainMenu". Then you create a link within the page
that refers back to that named anchor, for example, a href="#MainMenu".
Before creating links, be sure you understand how document-relative paths, rootrelative paths, and absolute paths work. See “About document locations and
paths” on page 354.
You can create several types of links in a document:
• A link to another document or to a file, such as a graphic, movie, PDF,
or sound file.
• A named anchor link, which jumps to a specific location within a document.
• An e-mail link, which creates a new blank e-mail message with the recipient’s
address already filled in.
• Null and script links, which enable you to attach behaviors to an object or to
create a link that executes JavaScript code.
Using Dreamweaver, there are several ways to easily create local links (between
documents in the same site):
• Use the site map to view, create, change, or delete links.
• In the Document window, use Modify > Make Link to select a file to link to.
• Use the Property inspector to link to a file, by using the folder icon to browse
to and select a file, using the Point-to-File icon to select a file, or typing the
path of the file.
Note: Typing URLs or paths to a file can lead to incorrect paths and links that don’t
work. To ensure that the path is correct, use the folder icon to browse to your link.
• Choose Make Link from the context menu, then select a file to link to.
To create an external link (to a document on another site), you must type the
absolute path (with proper protocol) in the Property inspector. Be sure you enter
the entire path (including http://) when creating external links.
358
Chapter 15
Linking documents using the Property inspector and the
Point-to-File icon
Use the Property inspector and the Point-to-File icon to create links from an
image, an object, or text to another document or file.
For more information, see “Creating and modifying links in the site map” on page 367.
To create links between documents using folder icon or link text box:
1
Select text or an image in the Document window’s Design view.
2
Open the Property inspector (Window > Properties) and do one of
the following:
• Click the folder icon to the right of the Link field 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.
Note: When you change the path type in the Relative To field, Dreamweaver uses your
choice as the default path type for any future links until you change the path type again.
• In the Link field, type the path and file name of the document.
To link to a document in your site, enter a document-relative or 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
Select a location in which to open the document.
To make the linked document appear somewhere other than in the current
window or frame, select an option from the Target pop-up menu on the
Property inspector.
Tip: If all the links on your page will be set to the same target, you can specify this target
once by choosing Insert > Head Tag > Base and selecting the target information.
For information about targeting frames, see “Controlling frame content with
links” on page 218.
Linking and Navigation
359
To link to a document using the Point-to-File icon:
1
Select text or an image in the Document window’s Design view.
2
Drag the Point-to-File icon at the right of the Link field in the Property
inspector and point to another open document, a visible anchor in an open
document, or a document in the Site window.
The Link field updates to show the link.
Note: The open document or site-window file you point to will move to the foreground of
your screen while you are making your selection.
3
Release the mouse button.
Dragging the Point-to-File icon from the Property inspector to a file in the
Site window
360
Chapter 15
To create a link from a selection in an open document:
1
Select text in the Document window’s Design view.
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 window.
4
Release the mouse button.
Shift-dragging the Point-to-File icon from text in the Document window to a file in
the Site window
Linking and Navigation
361
To create a link using the site map and the Point-to-File icon:
1
In the Site window, 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.
A hypertext link with the name of the linked file is placed at the bottom of the
selected HTML file. This method works well when you are building your site
and you want to create links across the site quickly.
For information about displaying a site map, see “Using the site map” on page 117.
Linking to a specific place within a document
You can use the Property inspector to link to a particular section of a document by
first creating named anchors. Named anchors let you set markers in a document
and are often placed at a specific topic or at the top of a document. You can then
create links to these named anchors, which quickly take your visitor to the
specified position.
Creating a link to a named anchor is a two-step process. First, create a named
anchor, then create a link to the named anchor.
362
Chapter 15
To create a named anchor:
1
In the Document window’s Design view, place the insertion point where you
want the named anchor.
2
Do one of the following:
• Choose Insert > Invisible Tags > Named Anchor.
• Press Control+Alt+A (Windows) or Command+Option+A (Macintosh).
• In the Invisibles category of the Objects panel, click the Named Anchor button.
3
In the Anchor Name field of the Insert Named Anchor dialog box, type a name
for the anchor.
If an anchor marker doesn’t appear at the insertion point location, choose
View > Visual Aids > Invisible Elements.
Note: Anchor names cannot contain spaces and should not be placed inside a layer.
To link to a named anchor:
1
In the Document window’s Design view, select text or an image to create
a link from.
2
In the Link field 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.
To link to a named anchor using the point-to-file method:
1
Open the document containing the named anchor you want.
2
Choose View > Visual Aids > Invisible Elements to make the anchor visible.
3
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.)
4
Do one of the following:
• Click the Point-to-File icon to the right of the Link field 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.
Linking and Navigation
363
Creating an e-mail link
An e-mail link opens a new blank message window (using the mail program
associated with the user’s browser) when clicked. In the e-mail message window,
the To field is automatically updated with the address specified in the e-mail link.
To create an e-mail link using the Insert E-Mail Link command:
1
In the Document window’s Design view, position the insertion point where
you want the e-mail link to appear, or select the text or image you want to
appear as the e-mail link. Then do one of the following:
• Choose Insert > E-Mail Link.
• In the Common category of the Objects panel, select Insert E-Mail Link.
2
In the Text field of the Insert E-Mail Link dialog box, type or edit the text to
appear in the document as an e-mail link.
3
In the E-Mail field, type the e-mail address that the mail should be addressed to.
4
Click OK.
To create an e-mail link using the Property inspector:
1
Select text or an image in the Document window’s Design view.
2
In the Link field of the Property inspector, type mailto: followed by an
e-mail address.
Do not type any spaces between the colon and the e-mail address. For example,
type mailto:jdoe@macromedia2.com.
364
Chapter 15
Creating null and script links
The most familiar kinds of links are those to documents and named anchors
(described in “Linking documents using the Property inspector and the Point-toFile icon” on page 359 and “Linking to a specific place within a document” on
page 362, respectively), but there are other types of links as well.
A null link is an undesignated link. Use null links to attach behaviors to objects or text
on a page. Once you have created a null link, you can attach a behavior to it to swap an
image or to display a layer when the pointer is moved over the link. For information
about attaching behaviors to objects, see “Attaching a behavior” on page 439.
Script links execute JavaScript code or call a JavaScript function and are useful for
giving visitors additional information about an item without leaving the current
Web page. Script links can also be used to perform calculations, form validations,
and other processing tasks when a visitor clicks a specific item.
To create a null link:
1
Select text, an image, or an object in the Document window’s Design view.
2
In the Property inspector, type a number sign (#) in the Link field.
To create a script link:
1
Select text, an image, or an object in the Document window’s Design view.
2
In the Link field 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
field 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\").
Linking and Navigation
365
Managing links
Dreamweaver can update links to and from a document whenever you move or
rename the document within a local site. This feature works best when you store
your entire site (or an entire self-contained section of it) on your local disk. No
changes are made to files on the remote site until you put or check in the local files
to the remote server.
To turn on link management in Dreamweaver:
1
Choose Edit > Preferences, then select the General category.
2
Select Always or Prompt from the Update Links when Moving Files pop-up
menu and click OK.
If you choose Always, Dreamweaver automatically updates all links to and from
a selected document whenever you move or rename it. (For specific instructions
on what to do when you delete a file, see “Changing a link sitewide” on page
368.) If you choose Prompt, Dreamweaver first displays a dialog box that lists
all the files affected by the change. Click Update to update the links in these
files, or click Don’t Update to leave the files unchanged.
To make the updating process faster, Dreamweaver can create a cache file in which
to store information about all the links at your local site. This cache file is created
when you select the Cache option in the Site Definition dialog box, and the cache
file is updated invisibly as you use Dreamweaver to add, change, or delete links to
files on your local site.
To create a cache file for your site:
1
Choose Site > Define Sites.
2
Select the site in the Define Sites dialog box, then click Edit. In the Local Info
category, select the Enable Cache checkbox.
The first time you change or delete links to files in your local site after launching
Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, the
cache loads and all links to the file you just changed are automatically updated. If
you click No, the change is noted in the cache, but the cache does not load and
links are not updated.
It may take a few minutes for the cache to load on larger sites; most of this time is
spent comparing the time stamps of the files on the local site with the time stamps
recorded in the cache to see if the cache is out of date. If you have not changed any
files outside Dreamweaver, you can safely click the Stop button when it appears.
To re-create the cache for your site:
In the Site window, choose Recreate Site Cache.
366
Chapter 15
Creating and modifying links in the site map
You can modify the structure of the site in the site map by adding, changing,
and removing links. The site map is updated automatically to display the
changes to the site.
To add a link, do one of the following:
• Drag a page from the Windows Explorer or the Macintosh Finder onto a page
in the site map.
• Select an HTML page and choose Site > Link to Existing File (Windows) or
Site > Site Map View > Link to Existing File (Macintosh), or choose Link to
Existing File from the context menu.
• Select an HTML page in the site map. The Point-to-File icon appears. Drag the
icon to the object you want to link to: either a file in the Site Files view, an
open Dreamweaver document, or a named anchor in a document open on the
desktop. See “Linking documents using the Property inspector and the Pointto-File icon” on page 359.
To change a link:
1
In the site map, select the page whose link you’re changing, and choose Site >
Change Link (Windows) or Site > Site Map View > Change Link (Macintosh).
2
Browse to the file or type a URL.
To remove a link, do one of the following:
• Select the page in the site map and choose Site > Remove Link (Windows) or
Site > Site Map View > Remove Link (Macintosh).
• Select the page in the site map and choose Remove Link from the
context menu. Removing a link does not delete the file, but removes the link
from the HTML source on the page that is pointing to the link.
To open the source of a link:
1
Select a file in the site map.
2
Choose Site > Open Source of Link (Windows) or Site > Site Map View >
Open Source of Link (Macintosh).
The Property inspector and the source file containing the link are opened. The
link is highlighted.
Linking and Navigation
367
Changing a link sitewide
In addition to having Dreamweaver update links automatically whenever you
move or rename a file, you can manually change all links (including e-mail, FTP,
null, and script links) to point somewhere else. You can use this option at any time
(for example, you might have the words “this month’s movies” linked to /movies/
july.html throughout your site, and on August 1 you must change those links to
point to /movies/august.html), but it’s particularly useful when you want to delete
a file that other files link to.
To change a link sitewide:
1
Select a file in the Local Folder pane of the Site window.
2
Choose Site > Change Link Sitewide.
3
In the dialog box that appears, click the folder icon to browse to and select a
file. You can also type the path and file name in the Into Links To field.
4
Click OK.
Dreamweaver updates any documents that link to the selected file, making
them point to the new file, using the path format already used in the document
(for example, if the old path was document relative, the new path is also
document relative). The type of link, whether document or root-relative,
doesn’t matter. The link is updated automatically.
After a link is changed sitewide, the selected file becomes an orphan (that is, no
files on your local disk point to it). You can safely delete it without breaking any
links in your local site.
Note: Because these changes are occurring locally, you must manually delete the
corresponding orphan file on the remote site and put or check in any files in which links
were changed; otherwise, visitors to your site won’t be able to see the changes.
To change e-mail, FTP, null, or script links sitewide:
1
Choose Site > Change Link Sitewide.
2
In the Change Link Sitewide dialog box, enter the following information:
• In the Change All Links To field, type the full text of the link you are changing.
• In the Into Links To field, type the full text of the replacement link.
3
Click OK.
For example, to update all the e-mail links that point to your old address, you
might type mailto:juser@isp.com in the Change All Links To field, and type
mailto:juser-interface@isp.com in the Into Links To field.
368
Chapter 15
Creating jump menus
A jump menu is a pop-up menu in a document, visible to your site visitors, listing
options that link to documents or files. You can create links to documents in your
Web site, links to documents on other Web sites, e-mail links, links to graphics, or
links to any file type that can be opened in a browser.
There are three basic components a jump menu can contain:
• A menu selection prompt, such as a category description for the menu items, or
instructions, such as “Choose one:”. (Optional)
• A list of linked menu items: a user chooses an option and a linked document or
file opens. (Required)
• A Go button. (Optional)
Inserting a jump menu
To insert a jump menu in your document, use the Jump Menu form object.
To create a jump menu:
1
Choose Insert > Form Object > Jump Menu.
The Insert Jump Menu dialog box appears.
2
If you want to create a selection prompt, type the prompt text in the Text field
of the dialog box. Under Options, select the Select First Item After URL
Change checkbox, then click the Plus (+) button to add a menu item.
3
In the Text field of the Insert Jump Menu dialog box, type the text you want to
appear in the menu list.
4
In the When Selected, Go To URL field, select the file to open by doing either
of the following:
• Click Browse, then select the file to open.
• Type the path of the file to open.
5
In the Open URLs In pop-up menu, select a location in which the file will open:
• Select Main Window to open the file in the same window.
• Select a frame in which the file will open.
Note: If the frame you want to target doesn’t appear on the Open URLs In pop-up
menu, close the Insert Jump Menu dialog box and name the frame. For information
about naming a frame, see “Setting frame properties” on page 212.
6
To add a Go button instead of a menu selection prompt: Under Options, select
the Insert Go Button After Menu option.
Linking and Navigation
369
7
To add additional menu items, click the Plus (+) button and repeat steps 3
through 6 of this procedure.
8
Click OK.
Editing jump menu items
To make changes to jump menu items, you use the Property inspector or the
Behaviors panel. You can change the list order or the file an item links to, or you
can add, delete, or rename an item.
To change the location in which a linked file opens, or to add or change a menu
selection prompt, you must use the Behaviors panel; see “Jump Menu” on page 455.
To edit a jump menu item using the Property inspector:
1
In the Property inspector, choose Window > Properties.
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.
4
Make changes to the menu items, then click OK.
Troubleshooting jump menus
Once users choose a jump menu item, there is no way to reselect that menu item
if they navigate back to that page, or if the Open URL In field specifies a frame.
There are two ways to work around this problem:
• Use a menu selection prompt, such as a category, or a user instruction,
such as “Choose one:”. The menu selection prompt is reselected automatically
after each menu selection.
• Use a Go button, which allows a user to revisit the currently chosen link.
Note: Select only one of these options per jump menu, because they apply to an
entire jump menu.
370
Chapter 15
Creating navigation bars
A navigation bar consists of an image (or set of images) whose display changes
based on the actions of a user. Navigation bars often provide an easy way to move
between pages and files on a site.
Before using the Insert Navigation Bar command, create a set of images for the
display states of each navigation element. (It can be helpful to think of a
navigation bar element as a button, because when clicked, it takes the user to
another page.)
A navigation bar element can have four states:
• Up: the image that appears when the user hasn’t yet clicked or interacted with the
element. For example, the element in this state looks like it hasn’t been clicked.
• 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. For example, the element may
appear dimmed or gray. You can use this state as a visual clue to users that this
element cannot be clicked again while they are in this part of the site.
You don’t have to include navigation bar images for all four of these states; for
example, you may just want Up and Down states.
You can create a navigation bar, copy it to other pages in your site, use it with
frames, and edit the page behaviors to show different states as pages are accessed.
Linking and Navigation
371
Inserting a navigation bar
When you insert a navigation bar, you name the navigation bar elements and
select images to use for them.
To create a navigation bar:
1
Do one of the following:
• Choose Insert > Interactive Images > Navigation Bar.
• In the Common category of the Objects panel, select Insert Navigation Bar.
The Insert Navigation Bar dialog box appears.
2
In the Element Name field, type a name for a navigation bar element—for
example, Home.
Each element corresponds to a button with a set of up to four state images.
Element names appear in the Nav Bar Elements list. Use the arrow buttons to
arrange elements in the navigation bar.
372
Chapter 15
3
Select image state options for this element (you must select an Up image; other
image states are optional):
• In the Up Image field, click Browse to select the image to display initially.
• In the Over Image field, click Browse to select the image to display when the
user moves the pointer over the element when the Up image is showing.
• In the Down Image field, click Browse to select the image to display after the
user has clicked the element.
• In the Over While Down Image field, click Browse to select the image to
display when the user moves the pointer over the Down image.
• In the When Clicked, Go To URL field, select a location in which the linked
file will open by doing one of the following:
• Select Main Window to open the file in the same window.
• Select a frame in which to open the file.
Note: If the frame you want to target doesn’t appear in the pop-up menu, close the
Insert Navigation Bar dialog box and name the frame. For information about naming a
frame, see “Setting frame properties” on page 212.
4
Select image loading options:
• Preload Images downloads the images when the page loads. If this option
isn’t selected, there may be a delay when the user moves the pointer over the
rollover image.
• Select Show “Down Image” Initially to display the selected element in its
Down state when the page is displayed instead of its default Up state. For
example, when the home page loads, the “Home” element on the navigation
bar should be in its Down state.
When this option is selected, an asterisk appears after the element in the Nav
Bar Elements list.
5
Under Insert, select from these options:
• To choose whether to insert the navigation bar elements vertically or
horizontally in the document, use the Insert pop-up menu.
• To insert the navigation bar elements as a table, select the Use Tables checkbox.
6
Click the Plus (+) button to add another element to the navigation bar, then
follow steps 2 through 5 to repeat until you’ve defined all elements.
7
Click OK.
Linking and Navigation
373
Modifying a navigation bar
Once you create a navigation bar for a document, you can add images to or
remove them from the navigation bar by using the Modify Navigation Bar
command. You can use this command to change an image or set of images, to
change which file opens when an element is clicked, to select a different window
or frame in which to open a file, and to reorder the images.
To modify a navigation bar:
1
Choose Modify > Navigation Bar.
2
In the Nav Bar Elements list, select the element you want to edit.
3
Make your edits, then click OK.
Attaching behaviors to links
You can attach a behavior to any link in a document. Consider using the following
behaviors when inserting linked elements into your documents. For more
information, see “Attaching a behavior” on page 439.
determines the text of a message and displays it in the
status bar at the bottom left of the browser window. For example, you can use this
action to describe the destination of a link in the status bar instead of showing the
URL associated with it. See “Set Text of Status Bar” on page 463.
Set Text of Status Bar
Open Browser Window is used to open a URL in a new window. You can specify the
properties of the new window, including its size, attributes (whether it is resizable,
has a menu bar, and so on), and name. See “Open Browser Window” on page 456.
Jump Menu is
used to edit a jump menu. You can change the menu list, specify a
different linked file, or change the browser location in which the linked document
opens. See “Jump Menu” on page 455.
Set Nav Bar Image lets you change how a navigation bar behaves. Use this behavior
to customize how the images in a navigation bar display. For example, when the
pointer is over part of the navigation bar, the display of other images in the
navigation bar or in the document change. See “Set Nav Bar Image” on page 460.
374
Chapter 15
16
CHAPTER 16
Reusing Content with Templates
and Libraries
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
The Assets panel (see “Managing and Inserting Assets” on page 221) provides
access to all of the assets in your site. Macromedia Dreamweaver provides two
special “linked” categories of assets: templates and libraries. A page that uses a
linked asset is automatically updated when you change the linked asset.
Dreamweaver templates and libraries can help you create Web pages with a
consistent design. Using templates and libraries also makes it easier to maintain your
Web site, since you can redesign your site and change hundreds of pages in seconds.
A template is a document you can use to create multiple pages that share the same
layout. When you create a template, you can indicate which elements of a page
should remain constant (noneditable, or locked) in documents based on that
template, and which elements can be changed.
For example, if you’re publishing an online magazine, the masthead and overall
layout probably won’t change from one issue to the next, or even from one story in
the magazine to the next, but the title and content of each story will be different.
A designer can create the layout of a story page for the magazine, with placeholder
text where the story’s title and contents will be (and with those regions marked as
editable); the designer can then save that layout as a template. The person putting
together a new issue of the magazine creates a new page based on the template,
and replaces the placeholder text with the actual title and text of the new story.
You can modify a template even after you’ve created documents based on it. When
you modify a template, the locked (noneditable) regions in documents that are
based on the template are updated to match the changes to the template.
Note: If you open a template file, you can edit everything in that file, whether it’s marked as
editable or locked. If you open a document that is based on a template file, you can edit
only the regions that are marked as editable. So the terms editable and locked refer to
whether a region is editable in a document based on a template, not to whether the region
is editable in the template file itself.
375
Templates are best for situations in which you want a set of pages to have an
identical layout—where you want to design the complete final layout for a set of
pages first, and then add content later. If you simply want your pages to have the
same headers and footers, with different layouts in between, use library items to
store the headers and footers. (Library items are stored page elements that you can
reuse in multiple pages; as with templates, you can update all the pages that use a
library item whenever you change the item’s contents. For more information, see
“Creating, managing, and editing library items” on page 396.) It’s important to
note that for pages created with templates, you can’t convert tables to layers or
layers to tables.
Note: Using a template may limit your later changes to design and layout. If you intend
to make major layout changes to your pages later, you may want to use library items
instead of templates.
Templates are particularly useful in a collaborative environment in which a
designer controls the page layouts, and other people add content to the pages but
aren’t allowed to change the layout.
Dreamweaver also provides other kinds of reusable content: server-side includes
and library items. You might use these elements for content that appears on every
page of the site (such as a header or footer) or for content that appears on only a
few pages but must be updated frequently (such as news headlines or sales
discounts). These approaches are appropriate for different kinds of sites:
• Server-side includes can be used only for sites that are viewed from a server, not
for sites that are viewed on a local system without a server. They can be seen
only on servers that are configured to process server-side includes. (Ask your
webmaster or system administrator whether your Web server supports serverside includes.) See “Using server-side includes” on page 404.
• Library items can be used on sites that are viewed locally as well as those that
reside on a server. On sites that are viewed locally, without a server, you must
use library items rather than server-side includes. See “Creating, managing, and
editing library items” on page 396.
376
Chapter 16
Creating templates
You can create a template from an existing HTML document and then modify it
to suit your needs, or you can create a template from scratch, starting with a blank
HTML document.
Dreamweaver saves templates with the file extension .dwt in a folder named
Templates in your site’s local root folder. If the Templates folder does not already
exist, Dreamweaver creates it when you save a new template.
Note: Do not move your templates out of the Templates folder, or put any nontemplate files
in the Templates folder. Also, do not move the Templates folder out of your local root folder.
Doing so causes errors in paths in the templates.
If you want to store additional information about a template, such as who created
it or when it was last changed or why you made certain layout decisions, you can
create a Design Notes file for the template. The documents based on the template
do not inherit the template’s Design Notes. (For more information, see “About
Design Notes” on page 134.)
Most template-related operations are available only when the Design view is
active. If a template-related command is dimmed when the Code view is active,
click in the Design view.
To save an existing document as a template:
1
Choose File > Open and select a document.
2
When the document opens, choose File > Save as Template.
Note: If the document is based on a template, you must detach it from that template
before you can save the document as a template in its own right.
3
In the dialog box that appears, select a site from the pop-up menu, then enter a
name for the template in the Save As box.
4
Click Save.
The template file is saved in the site’s Templates folder, with a .dwt file extension.
To create a new, blank template:
1
Choose Window > Templates.
The Assets panel appears, with the Templates category selected.
2
In the Assets panel, click the New Template button at the bottom of the
Assets panel.
A new, untitled template is added to the list of templates in the panel.
3
While the template is still selected, enter a name for the template.
Reusing Content with Templates and Libraries
377
To edit the template file that a document is based on:
Choose Modify > Templates > Open Attached Template.
To edit a template file:
1
Choose Window > Templates.
The Assets panel appears, open to the Templates category. The bottom pane of
the Assets panel lists all of the available templates for your site. The top pane
displays a preview of the selected template.
2
In the Assets panel, do one of the following:
• Double-click the name of the template.
• Click the Edit Template button at the bottom of the Assets panel.
3
Edit the template in the Document window. Create editable regions in the
template as desired (see “Defining a template’s editable regions” on page 381).
4
Save the edited template by choosing File > Save.
Note: If you haven’t defined any editable regions, you’ll be warned at this point that
your template contains no editable regions. You can save the template anyway, and you
can modify the template file even if it doesn’t contain editable regions, but you won’t be
able to modify documents based on the template until you’ve created an editable region
in the template.
To rename a template in the Assets panel:
1
Click the name of the template once to select it.
2
After a brief pause, click again.
3
When the name becomes editable, enter a new name.
Note: This method of renaming works the same way that renaming a file in Windows
Explorer (Windows) or the Finder (Macintosh) does. As with Windows Explorer and the
Finder, be sure to pause briefly between clicks. Do not double-click the name; that
opens the template for editing.
4
Click elsewhere, or press Enter (Windows) or Return (Macintosh).
5
Dreamweaver asks if you want to update documents that are based on
this template.
• To update all documents in the site that are based on this template,
click Update.
• To refrain from updating any documents that are based on this template, click
Don’t Update. A document that you choose not to update is still based on the
template (not detached); to update such a document later, open the template
and choose Modify > Templates > Update.
378
Chapter 16
To delete a template file:
1
Select the template in the Assets panel.
2
Click the Delete button and confirm that you want to delete the template. (Be
careful; if you delete a template file, you can’t retrieve it.)
The template file is deleted from your site. Documents that were based on this
template are not detached from the template; they retain the structure and
editable regions that the template file had before it was deleted. To turn such a
document into a normal HTML file without editable or locked regions, use
Modify > Templates > Detach from Template. For more information, see
“Detaching a document from a template” on page 391.
Setting template page properties
Documents created from a template inherit the template’s page properties, except
for the page title. If a document is based on a template, you can change that
document’s title, but any changes you make to its other page properties are
ignored. If you apply a template to a document and then you need to change the
document’s page properties, you must modify the template’s page properties and
then update the pages that use the template. (Which means that the page
properties of all documents based on that template are modified.)
To modify the template’s page properties:
1
Open the template file and choose Modify > Page Properties.
2
Specify the desired options for the page and click OK.
3
Update the pages based on the template, if any; for further information, see
“Updating pages based on a template” on page 391.
To learn more about page properties, see “Setting document properties” on page 152.
Reusing Content with Templates and Libraries
379
About links in templates
To create a link in a template file, use the folder icon or the Point-to-File icon in
the Property inspector; don’t type in the name of the file to link to. If you type the
name, the link may not work as expected. The following information explains
why this problem occurs and provides an example of a situation in which you
might encounter it.
When you create a template file by opening an existing page and then saving that
page as a template, Dreamweaver ensures that all links in the page continue to
point to the same files they pointed to before. Since templates are saved in a
special template folder, this means that the path shown for a document-relative
link changes when you save the page as a template. Don’t be concerned about this
change; when you create a new document based on that template, and then save
the new document, all the document-relative links are updated to continue to
point to the correct files, just as you would expect.
When you add a new document-relative link to a template file, however, if you
type the path into the link text box in the Property inspector, it’s easy to enter the
wrong path by mistake. The correct path is the path from the Templates folder to
the document you’re linking to, not the path from the document folder.
To avoid this problem, use the folder icon or the Point-to-File icon to select files to
link to. For information about linking using the Point-to-File icon, see “Linking
documents using the Property inspector and the Point-to-File icon” on page 359.
The following example demonstrates the problem. Suppose you have a site
in which individual catalog pages (called gadgets.html, gewgaws.html, and
thingamajigs.html) are based on a template file called Catalog_Page.dwt. The
site’s folder structure looks like this:
380
Chapter 16
Suppose you want each page based on the template to contain a link pointing to
the file home.html. You open the Catalog_Page template to add the link, and you
select the image that you want to attach the link to. But if you type home.html
into the link text box in the Property inspector, you’ll encounter the documentrelative link problem: when you save the edited template, the documents based on
the template will point to the wrong place, because the link in the template file is
interpreted as relative to the Templates folder rather than relative to the Catalog
folder. That is, the home.html link in the template file points to home.html in the
Templates folder, instead of to ../Catalog/home.html. When Dreamweaver
updates the documents based on the template, it modifies the document-relative
links in the documents; for documents in the Catalog folder, a link in the
template file to ../Catalog/home.html is converted to home.html, but a link in the
template file to home.html is converted to ../Templates/home.html.
If you select the home.html file using the folder icon or the Point-to-File icon
rather than typing its name manually, Dreamweaver automatically updates all
documents based on the template to use the correct relative paths to home.html.
Note: In some cases (such as file paths in event handlers in templates) you can’t use the
folder icon or the Point-to-File icon; in those cases, be sure to enter the correct path by hand.
Defining a template’s editable regions
In a template, editable regions are the parts of the page that can be changed in files
based on the template—for example, the text of an article in a newsletter would
appear in an editable region, so that every article could contain different text.
Locked (noneditable) regions are the parts of the page layout that remain constant
from one page to another.
All regions in a new template are locked when you create the template, so to make
the template useful, you must make some regions editable (unlock them).
While you are editing the template file itself, you can make changes to both
editable and locked regions. In a document based on the template, however, you
can make changes only to the editable regions of the document; the locked regions
of the document can’t be modified.
Note: When you name a region, you can’t use the following characters: single or double
quotation marks (' "), angle brackets (< >), and ampersands (&).
Reusing Content with Templates and Libraries
381
To define existing template content as an editable region:
1
In the template file, select the text or content you want to change to an
editable region.
2
Do one of the following:
• Choose Modify > Templates > New Editable Region.
• Right-click (Windows) or Control-click (Macintosh) the selected text, and
choose New Editable Region from the context menu.
3
In the New Editable Region dialog box, enter a unique name for the region.
(You cannot use the same name for more than one editable region in a
particular template.)
The editable region is enclosed in a highlighted rectangular outline in the
template, using the highlighting color set in preferences. A tab at the upper left
corner of the region shows the name of the region.
You can mark an entire table or an individual table cell as editable; however,
you can’t mark multiple table cells as a single editable region. Note that
Dreamweaver does not distinguish between marking a table cell as editable and
marking the contents of the cell as editable.
Layers and layer content are separate elements; making a layer editable lets you
change the position of the layer as well as its contents, while making a layer’s
contents editable lets you change only the content of the layer, not its position.
To select the layer’s content, click in the layer and choose Edit > Select All; to
select the layer itself, make sure invisible elements are showing, then click the
icon representing the location of the layer. For more information about layers,
see “Using Dynamic Layers” on page 407.
Note: If you’ve made a layer’s contents editable, and you later want to also make its
position editable, you must remove the editable region around the contents before you
can mark the layer itself as editable. See “Locking an editable region” on page 387.
To insert an empty editable region in a template:
1
In the template, place the insertion point where you want to insert an
editable region.
2
Choose Modify > Templates > New Editable Region.
3
In the New Editable Region dialog box, enter a name for the region.
The region name, surrounded by braces ({}), is inserted into the template as a
placeholder, enclosed in a rectangular outline of the appropriate highlight color.
When you apply the template to a document, you can then select the braces
and region name and replace them with text, images, or other content.
382
Chapter 16
Setting template preferences
You can use the Dreamweaver highlighting preferences to customize the highlight
colors for the outlines around the editable and locked regions of a template.
The editable region color appears in the template itself as well as in documents
based on the template; the locked region color appears only in documents based
on the template.
To change template highlight colors:
1
Choose Edit > Preferences and select the Highlighting category.
2
Click the Editable Regions color box and select a highlight color using the
color picker (or enter the hexadecimal value for the highlight color in the text
box). Do the same for Locked Regions. For information about using the color
picker, see “Working with colors” on page 87.
3
Click the Show option to enable or disable the display of these colors in the
Document window.
4
Click OK.
To view highlight colors in the Document window:
Choose View > Visual Aids > Invisible Elements.
Highlight colors appear in the document window only when View > Visual Aids >
Invisible Elements is enabled and the appropriate options are enabled in
Highlighting preferences.
Note: If invisible elements are showing but the highlight colors are not, choose Edit >
Preferences and make sure that the Show option next to the appropriate highlight color is
selected. Also make sure that the chosen color is visible against the background color of
your page. (If you’re color-blind, you may need to change the highlight color from its default
to a more visible color.)
Reusing Content with Templates and Libraries
383
Viewing editable and locked regions
In template files and documents based on templates, editable regions appear in the
Document window’s Design view surrounded by rectangular outlines in the
appropriate highlight color. A small tab appears at the upper left of each editable
region, showing the name of the editable region.
In template files, only editable regions are marked with highlighted outlines. You
can make changes to both editable and locked content.
Both locked and
editable regions
can be modified
Editable regions are
surrounded by
highlighted outlines
384
Chapter 16
In documents based on templates, in addition to the editable-region outlines, the
entire page is surrounded by a different-colored outline, with a tab at the upper
right giving the name of the template that the document is based on. This
highlighted rectangle is there to remind you that the document is based on a
template and that you can’t change anything outside the editable regions.
Highlighted
boundary
around page
Only editable
regions can
be modified
Note: If you try to edit a locked region in a document based on a template when
highlighting is turned off, the mouse pointer changes to indicate that you can’t click in
a locked region.
Reusing Content with Templates and Libraries
385
Viewing editable and locked HTML source code
Editable content is marked in HTML with the Dreamweaver comments
#BeginEditable and #EndEditable. Everything between those comments is
editable. The HTML source code for an editable region named Edit_Region
might look like this:
{Edit_Region}
The HTML for an editable table named Editable_Table might look like this:
In template files, editable regions are not highlighted in the Document window’s
Code view (or the Code inspector); you can make changes to both editable and
locked HTML source code.
386
Chapter 16
For documents based on templates, if syntax coloring is enabled, locked regions
are highlighted in the code editors. (For information about enabling syntax
coloring, see “Setting Code view (or Code inspector) options” on page 333.) You
can make changes only to the editable (nonhighlighted) HTML source code.
Locked
HTML is
highlighted
Only editable
HTML can be
modified
Note: Dreamweaver does not prevent you from typing in locked regions in the Code
inspector or the Code view of the Document window. However, Dreamweaver discards all
changes you make to locked regions, so be careful to type only in editable regions.
Locking an editable region
If you’ve marked a region of your template file as editable and you want to lock it
(make it noneditable) again, use the Remove Editable Region command.
Note: You can’t lock a region in a file based on a template; you can lock a region only in a
template file.
To lock a region (make it noneditable) in a template file:
1
Choose Modify > Templates > Remove Editable Region.
2
Select the region name from the list and click OK.
The region is locked. It no longer has a name (since only editable regions
are named).
Reusing Content with Templates and Libraries
387
Using styles, timelines, behaviors, and head tags in templates
CSS styles, timelines, behaviors, and head section tags are not fully supported in
documents based on templates.
All of those elements insert information in the head section of a document. Since
the head section of a document based on a template is locked (except for the
document’s title), Dreamweaver can’t insert a style sheet or JavaScript code in such
a document. To use these items in a document based on a template, you must add
them to the template file that the document is based on. (To allow a style sheet in
a template file to be editable without having to update pages every time you
change the style sheet, use an external style sheet.)
If adding these elements to the template file isn’t possible, you can detach the
document from the template, which makes the head section editable. However,
after you detach the document from the template, the document will no longer
update when you change the template. See “Detaching a document from a
template” on page 391.
For more information about these elements, see “Using CSS style sheets” on page
248, “Animating your layers” on page 425, and “Using Behaviors” on page 435.
Creating documents based on templates
You can use a template as a starting point for a new document, or apply a template
to an existing document.
When you create a new document based on a template, you can choose whether
the document will remain attached to the template. By default, when you change
a template, a document based on that template is updated to reflect changes in the
template. But if you deselect the Update Page When Template Changes option in
the New from Template dialog box, the new document is created as stationery: a
copy of the template that’s an independent HTML file, with no locked or editable
regions. In that case, updating the template does not change the document. In
other words, deselecting this option is equivalent to creating a new document
based on a template and then detaching the document from the template.
Note: The option of not updating the document when the template changes is provided for
those who want to use templates like stationery files—a one-time starting point, to create
completely independent documents. If you want to use the Dreamweaver default template
behavior, in which documents based on a template are updated when the template
changes, leave the option selected.
388
Chapter 16
To create a new document based on a template, do one of the following:
• Choose File > New from Template. In the dialog box that appears, choose a
template. (If you don’t want your new document to update when the template
changes, deselect Update Page When Template Changes.) Then click Select.
• Choose File > New to create a new document, and then apply a template to it
by selecting a template in the Templates category of the Assets panel and
clicking the Apply button. (Alternatively, you can drag a template from the
Assets panel to the document.)
To apply a template to an existing Dreamweaver document:
Open the document. Then do one of the following:
• Click in the Document window’s Design view, then choose Modify >
Templates > Apply Template to Page. Choose a template from the list and
click Select.
• Select the template in the Templates category of the Assets panel, and click the
Apply button.
• Drag the template from the Templates category of the Assets panel to the
Document window’s Design view.
Note: Saying that a template has been applied to a document is equivalent to saying that
the document is based on the template. Those phrases are used interchangeably.
When you apply a template to an existing document that isn’t already based on a
template, Dreamweaver turns the document into a copy of the template file,
placing the material from the document’s existing body section into a single
editable region of your choice.
Note: Behaviors and other scripts in the existing document that are associated with body
content remain in the head section of the document after you apply a template to it.
Other head items in the existing document, such as meta tags, are discarded when
you apply the template.
When you apply a new template to an existing document that’s based on another
template, Dreamweaver turns the document into a copy of the new template,
placing the material from the document’s existing editable regions into
corresponding editable regions of the new template wherever possible.
Dreamweaver does this by comparing the names of the editable regions in the
document to the names of the editable regions in the new template; for each
region name that matches, Dreamweaver places the existing contents of that
region into the new region with the same name.
Reusing Content with Templates and Libraries
389
For example, suppose you want to try out a new look for your site but you aren’t
ready to change all of your pages yet. You can create a new template with the new
layout and design, giving the editable regions in the new template the same names
as the editable regions in your old template; then when you apply the new
template to one of your pages, the material in the editable regions of the page is
placed in the corresponding editable regions of your new layout.
If there are editable regions in the old template that don’t have corresponding
regions in the new template, the Choose Editable Region for Orphaned Content
dialog box asks you which new editable region the old “orphaned” content should
be moved to. Choose an editable region name; all of the content from
nonmatching editable regions is appended to the region you choose. (All of the
orphaned content from the existing document must go into a single editable
region.) If you select the (None) item instead of a region name, the content from
nonmatching regions in the existing document is discarded.
If you think that the editable regions of your document match the editable regions
of the new template you’re applying, but the orphaned-content dialog box appears
anyway, you can click Cancel and the new template will not be applied to the
document. Then you can examine the editable regions in the document and the
editable regions in the new template to find out which editable regions in the
document do not appear in the new template. You can then add new regions with
those names to the new template file.
Any new editable regions that are in the new template (but weren’t in the old
template) are added to the document. The new regions contain the default
placeholder text given in the new template file.
After you’ve applied a template to a document, if the results aren’t what you
expected, you can use Edit > Undo Apply Template to revert to the document’s
state before the template was applied.
Finding a document’s editable regions
All of the editable regions in a template’s body are listed at the bottom of the
Modify > Templates submenu. Use this list to select and edit the regions.
To find an editable region and select it in the document:
Choose Modify > Templates, and choose the name of the region from the list at
the bottom of that submenu.
The region is selected in the document. You can type new text in the region, or
click in the region to edit the contents.
390
Chapter 16
Detaching a document from a template
To make changes to both the locked and editable regions of a page that uses a
template, you must first detach the page from the template. When the page is
detached, it becomes a normal document, with no editable or locked regions, and
no connection to any template file. Note that this means that the page will no
longer be updated when the template is updated.
To detach a document from a template:
1
Open the document you want to detach.
2
Choose Modify > Templates > Detach from Template.
The page is detached from the template and all regions become editable.
Updating pages based on a template
When you make a change to a template, Dreamweaver prompts you to update the
pages based on the template. You can also use the update commands to manually
update the current page or the entire site. Using the update commands is the same
as reapplying the template.
For information on editing templates, see “Creating templates” on page 377 and
“Defining a template’s editable regions” on page 381.
To open and modify the template used to create the current document:
1
Choose Modify > Templates > Open Attached Template.
2
Modify the content of the template as desired. To modify the template’s page
properties, choose Modify > Page Properties. (Documents based on a template
inherit the template’s page properties, except for the page title.)
To update the current document to use the current version of a template:
Choose Modify > Templates > Update Current Page.
Reusing Content with Templates and Libraries
391
To update the entire site or all documents that use a particular template:
1
Choose Modify > Templates > Update Pages.
The Update Pages dialog box appears.
2
In the Look In pop-up menu, do one of the following:
• Choose Entire Site, and then choose the site name from the adjacent
pop-up menu. This updates all pages in the selected site to their
corresponding templates.
• Choose Files That Use, and then choose the template name from the
adjacent pop-up menu. This updates all pages in the current site that
use the selected template.
3
Make sure Templates is selected in the Update option. (To update library items
at the same time, make sure Library Items is also selected. See “Creating,
managing, and editing library items” on page 396 for more information.)
4
Click Start.
Dreamweaver updates the files as indicated. If you selected the Show Log
option, Dreamweaver provides information about the files it attempts to
update, including information on whether they were updated successfully.
Exporting and importing XML content
You can think of a document based on a template as containing a set of data
represented by name/value pairs. Each pair consists of the name of an editable
region, and the contents of that region. For example, suppose your template
contains three editable regions: item_number, item_price, and item_color. You
could fully describe a document based on that template by providing the name of
the template and three name/value pairs, one for each editable region.
Dreamweaver lets you export those name/value pairs into an XML file so that you
can work with the data from the document outside of Dreamweaver (in an XML
editor, for example, or a text editor, or even a database application). Conversely, if
you have an XML document that’s structured appropriately, you can import the
data from it into a document based on a Dreamweaver template.
392
Chapter 16
To export a document’s editable regions as XML:
1
Choose File > Open, and open a document that’s based on a template (and
contains editable regions).
2
Choose File > Export > Export Editable Regions as XML.
3
In the XML dialog box, choose a tag notation and click OK.
See “Using XML tag notations” on page 395 for details.
4
In the dialog box that appears, enter a name for the XML file and click Save.
Dreamweaver generates an XML file containing the material from the
document’s editable regions. The XML file includes the name of the
template the document is based on, as well as the name and contents of
each editable region.
Note: Material in the locked regions is not exported to the XML file.
To import XML content:
1
Choose File > Import > Import XML into Template.
2
Select the XML file and click Open.
Dreamweaver creates a new document based on the template specified in the
XML file. It then fills in the contents of each editable region in that document
using the data in the XML file. The resulting document appears in a new
Document window. If the specified template is not found, Dreamweaver prompts
you to select a template to use.
Note that if your XML file isn’t set up exactly the way Dreamweaver expects, you
may not be able to import your data. One solution to this problem is to export a
dummy XML file from Dreamweaver, so that you’ll have an XML file with exactly
the right structure. Then copy the data from your original XML file into the
exported XML file. The result is an XML file with the correct structure that
contains the appropriate data, all ready to be imported.
Reusing Content with Templates and Libraries
393
About XML
XML is the Extensible Markup Language, a markup language for structured
documents. You can think of it as being like a generalization of HTML that lets
you define your own tags. XML is derived from SGML, the Standard Generalized
Markup Language; like SGML, XML is a language for defining sets of tags and
the relationships among them.
Tags in XML look similar to HTML tags: they consist of a tag name plus optional
attributes, surrounded by angle brackets. As with HTML, an opening tag and a
closing tag (in which the tag name is preceded by a slash) are used to mark the
content between the tags. One syntactical difference is that in XML, an empty
tag (one that uses only a single tag, such as , instead of an opening tag and a
closing tag containing text or other material) must end with a slash just before the
closing angle bracket. For example, an tag in XML might look like this:
True XML is much stricter and less forgiving about its syntax than HTML is; files
that do not strictly conform to XML syntax are rejected by XML parsers.
XML provides a way to mark literal strings, which can include tags that should
not be parsed: an element called a CDATA section, which includes a literal string in
square brackets. Anything inside the square brackets is not parsed by the XML
parser. Dreamweaver exported XML makes extensive use of CDATA sections.
A full introduction to XML is beyond the scope of this book. For more information
about XML, see “HTML and Web technologies resources” on page 25.
394
Chapter 16
Using XML tag notations
Dreamweaver lets you export XML content using either of two tag notations:
editable region name tags or standard Dreamweaver XML tags. Choose the
notation that best suits how XML content is incorporated into your Web site.
The easiest way to see the differences between the two tag notations, if you
understand XML syntax, is to look at examples. The following XML code was
exported from a document based on a template named newstemplate. The
document contains one defined editable region, named News_Story (and a
default editable region, doctitle, which contains the document’s title tag).
• Editable region name tags use the names of your document’s editable regions as
XML tags. The content from each editable region is included as a CDATA
section. In this example, the doctitle tag identifies the title of the document,
and the News_Story tag identifies the editable region.
Today’s Headline Story]]>
This is where the story goes.]]>
• Standard Dreamweaver XML tags use a tag named item. The item tag has a name
attribute that gives the name of the editable region; the tag contains a CDATA
section that in turn contains the contents of the editable region. In this example,
the item tag with name="doctitle" identifies the title of the document, and the
item tag with name="News_Story" identifies the editable region.
Today’s Headline Story]]>
This is where the story goes.]]>
Reusing Content with Templates and Libraries
395
Creating, managing, and editing
library items
Libraries are a way to store page elements such as images, text, and other objects
that you want to reuse or update frequently throughout your Web site. These
elements are called library items.
When you place a library item in a document, Dreamweaver inserts a copy of the
HTML source code for that item into the document, and adds an HTML
comment containing a reference to the original, external item. The reference to
the external library item makes it possible to update the content on an entire site
all at once by changing the library item and then using the update commands in
the Modify > Library submenu.
Dreamweaver stores library items in a Library folder within the local root folder
for each site. Each site has its own library; to copy a library item from one site to
another site, use the Assets panel’s Copy to Site command. See “Managing and
Inserting Assets” on page 221 for more information. Note that if the library item
contains links, the links may not work in the new site. Also note that images in a
library item aren’t copied to the new site.
Here’s an example of how you might use a library item: suppose you’re building a
large site for a company. The company has a slogan that it wants to appear on
every page of the site, but the marketing department is still ironing out the details
of just what the slogan should say. If you create a library item to contain the
slogan and use that library item on every page, then when the marketing
department provides the final slogan, you can change the library item and
automatically update every page that uses it.
Creating a library item
You can create a library item from any element in the body section of a document,
including text, tables, forms, Java applets, plug-ins, ActiveX elements, navigation
bars, and images.
For linked items such as images, the library stores only a reference to the item. The
original file must remain at the specified location for the library item to work
correctly. It can still be useful to store an image in a library item, though; for
example, you could store a complete img tag in a library item, which would allow
you to easily change the image’s alt text, or even its src attribute, throughout the
site. (Don’t use this technique to change an image’s width and height attributes,
though, unless you also use an image editor to change the actual size of the image.)
Library items can also contain behaviors, but there are special requirements for
editing the behaviors in library items; see “Editing a behavior in a library item” on
page 401. Library items cannot contain timelines or style sheets, because the code
for those elements is part of the head section.
Note: In general, be cautious about mixing library items and templates on the same page;
the results may sometimes be confusing.
396
Chapter 16
To create a library item:
1
Select a portion of a document to save as a library item.
2
Do one of the following:
• Choose Window > Library and drag the selection into the Library category of
the Assets panel.
• Click the New Library Item button at the bottom of the Assets panel (in the
Library category).
• Choose Modify > Library > Add Object to Library.
3
Enter a name for the new library item.
Each library item is saved as a separate file (with the file extension .lbi) in the
Library folder of the site’s local root folder.
Setting library preferences
You can customize the highlight color for library items and show or hide
highlighting of library items by setting Highlighting preferences.
To change the highlight color for library items:
1
Choose Edit > Preferences and select the Highlighting category.
2
Click the Library Items color box and select a highlight color using the color
picker (or enter the hexadecimal value for the highlight color in the text box). For
information about using the color picker, see “Working with colors” on page 87.
3
Select Show to toggle the display of the library highlight color.
4
Click the Show control to enable or disable the display of library-item
highlighting in the Document window.
5
Click OK to close the Preferences dialog box.
To view highlight colors in the Document window:
Choose View > Visual Aids > Invisible Elements.
Highlight colors appear in the document window only when View > Visual Aids >
Invisible Elements is enabled and the appropriate options are enabled in
Highlighting preferences.
Reusing Content with Templates and Libraries
397
Inserting a library item in a document
When you add a library item to a page, the actual content is inserted in the
document along with a reference to the library item.
To insert a library item in a document:
1
Place the insertion point in the Document window.
2
Choose Window > Library.
The Assets panel appears, showing the Library category.
3
Drag a library item from the Assets panel to the Document window, or select
an item and click the Insert button.
To insert the contents of a library item without including a reference to the
item in the document, press Control (Windows) or Option (Macintosh) while
dragging an item out of the Library category of the Assets panel. If you insert
an item this way, you can edit the item in the document, but the document
won’t update when you update pages that use that library item.
Making changes to a library item
When you change a library item, you can choose to update all documents that use that
item. If you choose not to update, the documents remain associated with the library
item; you can update them later by choosing Modify > Library > Update Pages.
Other kinds of changes to library items include renaming items to break their
connection with documents or templates, deleting items from the site’s library,
and recreating a missing library item.
Note: The CSS Styles panel, Timelines panel, and Behaviors panel are unavailable when
you are editing a library item, because library items can contain only body elements.
Timeline and CSS style sheet code is part of the head section, and the Behaviors panel is
unavailable because it inserts code into the head section as well as the body section. (For
instructions on editing behaviors, see “Editing a behavior in a library item” on page 401.)
The Page Properties dialog box is also unavailable, because a library item can’t include a
body tag or its attributes.
To edit a library item:
1
Choose Window > Library.
The Library category of the Assets panel appears.
2
Select a library item.
A preview of the library item appears at the top of the Assets panel. (You can’t
edit anything in the preview.)
398
Chapter 16
3
Click the Edit button at the bottom of the Assets panel. Alternatively, doubleclick the library item.
Dreamweaver opens a new window for editing the library item. This window is
much like a Document window, but its Design view has a gray background to
indicate that you’re editing a library item instead of a document.
4
Edit the library item and then save your changes.
5
In the dialog box that appears, choose whether to update the documents on the
local site that use the edited library item:
• Choose Update to update all documents in the local site with the edited
library item.
• Choose Don’t Update to avoid changing any documents until you use
Modify > Library > Update Current Page or Update Pages.
To update the current document to use the current version of all library items:
Choose Modify > Library > Update Current Page.
To update the entire site or all documents that use a particular library item:
1
Choose Modify > Library > Update Pages.
The Update Pages dialog box appears.
2
In the Look In pop-up menu, do one of the following:
• Choose Entire Site, and then choose the site name from the adjacent
pop-up menu. This updates all pages in the selected site to use the current
version of all library items.
• Choose Files That Use, and then choose a library item name from the
adjacent pop-up menu. This updates all pages in the current site that use
the selected library item.
3
Make sure Library Items is selected in the Update option. (To update templates
at the same time, make sure Templates is also selected. See “Updating pages
based on a template” on page 391 for more information.)
4
Click Start.
Dreamweaver updates the files as indicated. If you selected the Show Log
option, Dreamweaver provides information about the files it attempts to
update, including information on whether they were updated successfully.
Reusing Content with Templates and Libraries
399
To rename a library item in the Assets panel:
1
Click the name of the library item once to select it.
2
After a brief pause, click again.
3
When the name becomes editable, enter a new name.
Note: This method of renaming works the same way that renaming a file in Windows
Explorer (Windows) or the Finder (Macintosh) does. As with Windows Explorer and the
Finder, be sure to pause briefly between clicks. Do not double-click the name; that
opens the library item for editing.
4
Click elsewhere, or press Enter (Windows) or Return (Macintosh).
5
Dreamweaver asks if you want to update documents that use the item.
• To update all documents in the site that use the item, click Update.
• To refrain from updating any documents that use the item, click Don’t Update.
To delete a library item from a library:
1
Select the item in the Library category of the Assets panel.
2
Click the Delete button and confirm that you want to delete the item.
Be careful; if you delete a library item, you can’t use Undo to retrieve it. You
may be able to recreate it, however, as described in the next procedure.
Deleting a library item removes the item from the library, but doesn’t change
the contents of any documents that use the item.
To recreate a missing or deleted library item:
400
Chapter 16
1
Select an instance of the item in one of your documents.
2
Click the Recreate button in the Property inspector.
Making library items editable in a document
If you’ve added a library item to your document and you want to edit the item
specifically for that page, you must break the link between the item in the
document and the library. Once you’ve made an instance of a library item
editable, that instance cannot be updated when the library item changes.
To make a library item editable:
1
Select a library item in the current document.
2
Click Detach from Original in the Property inspector.
The selected instance of the library item loses its highlighting (if you had
highlighting visible), and can no longer be updated when the original
library item changes.
Editing a behavior in a library item
When you create a library item that includes an element with a Dreamweaver
behavior attached to it, Dreamweaver copies the element and its event handler
(the attribute that specifies which event triggers the action (such as onClick,
onLoad, or onMouseOver), and which action to call when the event occurs) to the
library item file. Dreamweaver does not copy the associated JavaScript functions
into the library item. Instead, when you insert the library item into a document,
Dreamweaver automatically inserts the appropriate JavaScript functions into the
head section of that document (if they aren’t already there).
Note: If you hand-code JavaScript (that is, if you create it without using Dreamweaver
behaviors), you can make it part of a library item if you use the Call JavaScript behavior to
execute the code. If you don’t use a Dreamweaver behavior to execute the code, the code
isn’t retained as part of the library item.
The JavaScript functions are not stored with the library item because they are
elements of the head section of the document, while library items can only
contain body elements. Thus, the Behaviors panel is unavailable when you are
editing a library item, because only part of the behavior code (the event handler)
is included in the library item. To edit a behavior in a library item, you must first
insert the item in a document, then make the item editable in that document.
After you’ve made the desired changes, you can re-create the library item,
replacing the item in the library with the edited item from your document.
For more information about behaviors, see “Using Behaviors” on page 435.
Reusing Content with Templates and Libraries
401
To edit a behavior in a library item:
1
Open a document that contains the library item.
Note the name of the library item, as well as the exact tags it contains. You’ll
need this information in steps 8 and 9.
2
Select the library item and click Detach from Original in the
Property inspector.
3
Select the element that has the behavior attached to it.
4
Choose Window > Behaviors to open the Behaviors panel. In the Behaviors
panel, double-click the action you want to change.
5
In the dialog box that appears, make the necessary changes and click OK.
6
Choose Window > Library to open the Library category of the Assets panel.
7
Make sure you have recorded the exact name of the original library item; then
select the original library item, and delete it by clicking the Delete button in
the Assets panel.
8
In the Document window, select all of the elements that make up the
library item.
Be careful to select exactly the same elements that were in the original
library item.
9
In the Assets panel, click the New Library Item button, and give the new item
the same name as the item you deleted in step 7.
Be sure to use exactly the same spelling and capitalization.
402
Chapter 16
10
To update the library item in your site’s other documents, choose Modify >
Library > Update Pages.
11
In the Update Pages dialog box, in the Look in pop-up menu, select
Files That Use.
12
In the adjacent pop-up menu, choose the name of the library item
you just created.
13
In the Update option, make sure Library Items is selected, and then click Start.
14
When the updates are complete, click Close to exit the Update Pages dialog box.
Setting Library item properties
Use library item properties to specify the source file of an item, to make it
editable, or to re-create the original library item after editing an instance of it in a
document. To open the Property inspector, select a library item in a document.
Src displays the file name and location of the source file for the library item. You
can’t edit this information.
Open opens
the library item’s source file for editing. This is equivalent to selecting
the item in the Assets panel and clicking the Edit button.
Detach from Original breaks the link between the selected library item and its source
file. When an item is detached it can be edited in the document, but it’s no longer a
library item and can’t be updated when you change the original library item.
Recreate overwrites
the original library item with the current selection. Use this
option to re-create library items if the original library item is missing or has been
accidentally deleted.
Reusing Content with Templates and Libraries
403
Using server-side includes
Server-side includes are instructions to the server to include a specified file in the
current document before sending the document to the user who requested it. (You
can think of it as something like a library item that’s provided by the server.)
When you open a document that’s on a server, the server processes the include
instructions and creates a new document in which the include instructions are
replaced by the contents of the included file. The server then sends this new
document to your browser. When you open a local document in a browser,
however, there’s no server to process the include instructions in that document, so
the browser opens the document without processing those instructions, and the
file that’s supposed to be included doesn’t appear in the browser. It can thus be
difficult, without using Dreamweaver, to look at local files and see them as they’ll
appear to visitors after you’ve put them on the server.
With Dreamweaver, though, you can preview documents just as they’ll appear
after they’re on the server, both in the Design view and when you preview in a
browser. To display included files, Dreamweaver uses a translator to mimic the
way a server would process the include instructions.
Placing a server-side include in a document inserts a reference to an external file; it
doesn’t insert the contents of the specified file in the current document.
Dreamweaver displays the contents of the external file in the Document window,
making it easier to design pages, but you cannot edit the included file directly in a
document. To edit the contents of a server-side include, you must directly edit the
file that you’re including. Any changes to the external file are automatically
reflected in every document that includes it.
There are two types of server-side includes: Virtual and File. Choose which to use
depending on what type of Web server you use:
• If your server is an Apache Web server, choose Virtual. (This is the default
choice in Dreamweaver.) In Apache, Virtual works in all cases, while File works
only in some cases.
• If your server is a Microsoft IIS server, choose File. (Virtual works with IIS only
in certain specific circumstances.) Unfortunately, IIS won’t allow you to include
a file in a folder above the current folder in the folder hierarchy, unless special
software has been installed on the server. If you need to include a file from a
folder higher in the folder hierarchy on an IIS server, ask your system
administrator if the necessary software is installed.
• For other kinds of servers, or if you don’t know what kind of server you’re
using, ask your system administrator which option to use.
404
Chapter 16
Some servers are configured to examine all files to see if they contain server-side
includes; other servers are configured to examine only files with a particular file
extension, such as .shtml, .shtm, or .inc. If a server-side include isn’t working for
you, ask your system administrator if you need to use a special extension in the
name of the file that uses the include. (For example, if the file is named
canoe.html, you may have to rename it to canoe.shtml.) If you want your files to
retain .html or .htm extensions, ask your system administrator to configure the
server to examine all files (not just files with a certain extension) for server-side
includes. Parsing a file for server-side includes takes a little extra time, though, so
pages that the server parses are served a little more slowly than other pages; some
system administrators therefore won’t provide the option of parsing all files.
To insert a server-side include:
1
Choose Insert > Server-Side Include or click the SSI button in the Common
category of the Objects panel.
2
In the dialog box that appears, browse to and select a file.
To change which file is included:
1
Select the server-side include in the Document window.
2
Open the Property inspector.
3
Do one of the following:
• Click the folder icon and browse to and select a new file to include.
• In the text box, type the path and file name of the new file to include.
Reusing Content with Templates and Libraries
405
Editing the contents of a server-side include
Like library items, server-side includes are selected as a whole unit in the
Document window. Unlike library items, for server-side includes the HTML
source code contained in the included file does not appear in the Code inspector
or the Code view of the Document window. Instead, the actual server instruction
appears, looking (for example) like this:
To edit the content associated with the included file, you must open the file.
Note: Server-side includes cannot contain head or body tags.
To edit a server-side include:
1
Select the server-side include in either the Document window or the Code
inspector, and click Edit in the Property inspector.
The included file opens in a new Document window.
2
Edit the file; then save it.
The changes are immediately reflected in the current document and in any
subsequent document you open that includes the file.
406
Chapter 16
17
CHAPTER 17
Using Dynamic Layers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
A layer is a container in your Web page that holds HTML page elements. Using
layers in your page gives you more control and flexibility to make your page
dynamic. Layers were created for use in Web design to give designers the same
kind of control and flexibility that they have in traditional print design.
You can stack one layer on top of another, hide some layers while showing others,
or move a layer across the screen with a timeline. For example, you could have a
background image on one layer, then stack another layer on top that holds text.
You could also have images on your page that appear and then fade off the page.
All of this can be done using layers in Macromedia Dreamweaver, without having
to do any JavaScript or HTML coding.
A disadvantage to using layers in your Web page is that layers are not widely
viewable in older Web browsers. Only Internet Explorer 4.0 and Netscape 4.0 and
above browsers show layers, and not always consistently. In order for everyone to
be able to view your Web page, you can use layers in conjunction with tables. You
can design your page layout using layers, then convert the layers to tables. For
more information, see “Using tables and layers for layout” on page 421.
Note: It is recommended that you use Layout view for page layout (See “Designing Page
Layout” on page 167). Layout view is an easier way to implement your page layout with
tables as the underlying structure.
407
About layers and HTML code
When you insert layers into your Web page, Dreamweaver inserts the HTML tag
for those layers in your code. You can set four different tags for your layers: div,
span, layer, and ilayer. div and span are the most common tags and are
recommended for use so that the widest audience will be able to view your layers.
Both Internet Explorer 4.0 and Netscape Navigator 4.0 support layers created
using the div and span tags. Only Navigator 4.0 versions support layers created
with the layer and ilayer tags (Netscape discontinued support in later
browsers). Earlier versions of both browsers display the contents of a layer but do
not display the positioning.
By default, Dreamweaver creates layers with the div tag and inserts layer code at
the insertion point, or at the top of the page, just after the body tag. If you create
a nested layer, Dreamweaver inserts the code inside the tag that defines the parent
layer. To change the default tag, see “Setting Layers preferences” on page 412.
The following is sample HTML code for a single layer (as it would look in
Dreamweaver):
The following is sample HTML code for a nested layer (as it would look in
Dreamweaver):
This is a paragraph that includes an instance of the
happy
tag (Joe).
That paragraph might appear in the Design view like this:
Note that since render_contents is set to "false" in the tag specification, the
contents of the happy tag (the word Joe) are not rendered; instead the start and
end tags and their contents are displayed as a single icon.
For nonempty tags that have a render_contents value of "true", the icon does
not appear in the Design view; instead, the contents between the opening and
closing tags (such as the text between the tags in This is the contents
between the opening and closing tags) appears. If View >
Invisible Elements is enabled, the content is highlighted using the third-party tag
color specified in Highlighting preferences. (Note that highlighting applies only to
tags defined in tag database files.)
To change the highlighting color of third-party tags:
1
Choose Edit > Preferences and select the Highlighting category.
2
Click the Third-Party Tags color box to display the color picker.
3
Choose a color, then click OK to close the Preferences dialog box. For
information about choosing a color, see “Working with colors” on page 87.
Customizing Dreamweaver
541
About ASP
Microsoft ASP (Active Server Pages) is a way to combine HTML, scripts written
in JavaScript or VBScript, and ActiveX controls to dynamically serve HTML.
When a browser requests an ASP page from a Microsoft Web server, the server
interprets the ASP code and sends the resulting HTML to the requesting browser.
(The browser receives only HTML, not ASP code.) For more information on ASP,
see the Microsoft ASP overview pages, as described in “HTML and Web
technologies resources” on page 25.
A block of ASP code begins with <% and ends with %>. If View > Invisible
Elements is selected, and Server Markup Tags is selected in Invisible Elements
preferences, Dreamweaver displays an ASP icon in the Document window’s
Design view to mark the location of ASP code. Otherwise, Dreamweaver does not
display anything to mark the code’s location. For more information about
invisible elements, see “About invisible elements” on page 156.
About JSP
Sun JSP (JavaServer Pages) provides a Java-based way to dynamically serve HTML
and other Web content. When a browser requests a JSP page from a JSP-enabled
server, the server interprets the JSP code and sends the resulting HTML to the
requesting browser. (The browser receives only HTML, not JSP code.) For more
information on JSP, see the Sun JSP page, as described in “HTML and Web
technologies resources” on page 25.
A block of JSP code begins with <% and ends with %>. Since JSP uses the same
delimiters as ASP, Dreamweaver displays an ASP icon for JSP code.
About PHP
PHP (which stands for PHP: Hypertext Preprocessor) is a server-side scripting
language. When a browser requests a PHP page from a PHP-enabled server, the
server interprets the PHP code and sends the resulting HTML to the requesting
browser. (The browser receives only HTML, not PHP code.) For more
information on PHP, see the PHP pages, as described in “HTML and Web
technologies resources” on page 25.
A block of PHP code begins with . If View > Invisible
Elements is selected, and Server Markup Tags is selected in Invisible Elements
preferences, Dreamweaver displays a PHP icon in the Document window’s Design
view to mark the location of PHP code. Otherwise the code doesn’t appear in the
Design view. For more information about invisible elements, see “About invisible
elements” on page 156.
542
Chapter 22
About ColdFusion
Allaire ColdFusion is another way to serve pages dynamically. When a browser
requests a ColdFusion page from a server, the server passes the page to the
ColdFusion Server software, which interprets the scripts on the page and sends the
resulting HTML to the requesting browser. (The browser receives only HTML, not
ColdFusion code.) For more information on ColdFusion, see the ColdFusion
product page, as described in “HTML and Web technologies resources” on page 25.
Dreamweaver recognizes about fifty ColdFusion tags; see the ColdFusion.xml file
in the Configuration/ThirdPartyTags folder for details. If View > Invisible
Elements is selected, and Server Markup Tags is selected in Invisible Elements
preferences, Dreamweaver displays a ColdFusion icon in the Document
window’s Design view to mark the location of ColdFusion tags for which
render_contents is set to "false" (in ColdFusion.xml). Otherwise,
Dreamweaver does not display anything to mark the code’s location. For more
information about invisible elements, see “About invisible elements” on page 156.
Customizing Dreamweaver
543
Avoiding rewriting third-party tags
Dreamweaver corrects certain kinds of errors in HTML (for details, see “Setting
Code Rewriting preferences” on page 346). By default, Dreamweaver refrains
from changing HTML in files with certain file name extensions, including .asp
(ASP), .cfm (ColdFusion), .jsp (JSP), and .php (PHP). This default is set so that
Dreamweaver won’t accidentally modify the code contained in any such
third-party tags. You can change the Dreamweaver default rewriting behavior so
that it rewrites HTML when it opens such files, and you can add other file types
to the list of types that Dreamweaver doesn’t rewrite.
Note also that Dreamweaver encodes certain special characters (by replacing them
with numerical values) when you enter them in the Property inspector. It’s usually
best to let Dreamweaver perform this encoding, because the special characters will
be more likely to display correctly across platforms and browsers. However,
because such encoding may interfere with third-party tags, you may want to
change the Dreamweaver encoding behavior when you’re working with files
containing third-party tags.
To allow Dreamweaver to rewrite HTML in more kinds of files:
1
Choose Edit > Preferences and select Code Rewriting.
2
Do one of the following:
• Delete one or more extensions from the list of extensions.
• Deselect the Never Rewrite Code: In Files with Extensions option. (Deselecting
this option allows Dreamweaver to rewrite HTML in all types of files.)
To add file types that Dreamweaver shouldn’t rewrite:
1
Choose Edit > Preferences and select Code Rewriting.
2
Make sure the Never Rewrite Code: In Files with Extensions option is selected,
and add the new file extensions to the list in the text field.
If the new file type doesn’t appear in the file-types pop-up menu in the File >
Open dialog box, you may want to add it to the Configuration/Extensions.txt
file. For details, see “Changing the default file type” on page 514.
To turn off Dreamweaver encoding options:
1
Choose Edit > Preferences and select Code Rewriting.
2
Deselect either or both Special Characters options.
For information on the other Code Rewriting preferences, see “Setting Code
Rewriting preferences” on page 346.
544
Chapter 22
APPENDIX
Keyboard Shortcuts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
You can obtain a printable keyboard shortcuts list from the Dreamweaver Support
Center (www.macromedia.com/support/dreamweaver/documentation.html).
File menu
Action
Windows
Macintosh
New document
Control+N
Command+N
Open an HTML file
Control+O, or drag the file Command+O
from the Explorer or Site
window to the Document
window
Open in frame
Control+Shift+O
Command+Shift+O
Close
Control+W
Command+W
Save
Control+S
Command+S
Save as
Control+Shift+S
Command+Shift+S
Check links
Shift + F8
Command+F8
Exit/Quit
Control+Q
Command+Q
545
Edit menu
Action
Windows
Macintosh
Undo
Control+Z
Command+Z
Redo
Control+Y or
Control+Shift+Z
Command+Y or
Command+Shift+Z
Cut
Control+X or
Shift+Del
Command+X or
Shift+Del
Copy
Control+C or
Control+Ins
Command+C or
Command+Ins
Paste
Control+V or
Shift+Ins
Command+V or
Shift+Ins
Clear
Delete
Delete
Select All
Control+A
Command+A
Select parent tag
Control+Shift+<
Command+Shift+<
Select child
Control+Shift+>
Command+Shift+>
Find and Replace
Control+F
Command+F
Find next
F3
Command+G
Indent Code
Control+Shift+]
Command+Shift+]
Outdent Code
Control+Shift+[
Control+Shift+[
Balance Braces
Control+’
Command+’
Launch External Editor
Control+E
Command+E
Preferences
Control+U
Command+U
To toggle the display of
Windows
Macintosh
Standard view
Control+Shift+F6
Command+Shift+F6
Layout view
Control+F6
Command+F6
Toolbar
Control+Shift+T
Command+Shift+T
Page views
546
Appendix
Viewing page elements
To toggle the display of
Windows
Macintosh
Visual Aids
Control+Shift+I
Command+Shift+I
Rulers
Control+Alt+R
Command+Option+R
Show Grid
Control+Alt+G
Command+Option+G
Snap to Grid
Control+Alt+Shift+G
Command+Option+
Shift+G
Head content
Control+Shift+W
Command+Shift+W
Page properties
Control+Shift+J
Command+Shift+J
Action
Windows
Macintosh
Switch to design view
Control+Tab
Option+Tab
Open Quick Tag Editor
Control+T
Command+T
Select parent tag
Control+Shift+<
Command+Shift+<
Balance Braces
Control+’
Command+’
Select All
Control+A
Command+A
Copy
Control+C
Command+C
Find and Replace
Control+F
Command+F
Find Next
F3
Command+G
Replace
Control+H
Command+H
Paste
Control+V
Command+V
Cut
Control+X
Command+X
Redo
Control+Y
Command+Y
Undo
Control+Z
Command+Z
Toggle breakpoint
Control+Alt+B
Command+Option+B
Select line up
Shift+Up
Shift+Up
Select line down
Shift+Down
Shift+Down
Code editing
Keyboard Shortcuts
547
548
Appendix
Action
Windows
Macintosh
Character select left
Shift+Left
Shift+Left
Character select right
Shift+Right
Shift+Right
Move to page up
Page Up
Page Up
Move to page down
Page Down
Page Down
Select to page up
Shift+Page Up
Shift+Page Up
Select to page down
Shift+Page Down
Shift+Page Down
Select word left
Control+Shift+Left
Command+Shift+Left
Select word right
Control+Shift+Right
Command+Shift+Right
Move to start of line
Home
Home
Move to end of line
End
End
Move to top of code
Control+Home
Command+Home
Move to end of code
Control+End
Command+End
Select to top of code
Control+Shift+Home
Command+Shift+Home
Select to end of code
Control+Shift+End
Command+Shift+End
Editing text
Action
Windows
Macintosh
Create a new paragraph
Enter
Return
Insert a line break
Shift+Enter
Shift+Return
Insert a nonbreaking space
Control+Shift+Spacebar
Option+Spacebar
Move text or object to another
place in the page
Drag selected item
to new location
Drag selected item to new
location
Copy text or object to another
place in the page
Control-drag selected
item to new location
Option-drag selected
item to new location
Select a word
Double-click
Double-click
Add selected items to library
Control+Shift+B
Command+Shift+B
Switch between design view and
code editors
Control+Tab
Option+Tab
Open and close the
Property inspector
Control+Shift+J
Command+Shift+J
Check spelling
Shift+F7
Shift+F7
Keyboard Shortcuts
549
Formatting text
Action
Windows
Macintosh
Indent
Control+]
Command+]
Outdent
Control+[
Command+[
Format > None
Control+0 (zero)
Command+0 (zero)
Paragraph Format
Control+Shift+P
Command+Shift+P
Apply Headings 1 through 6 to a
paragraph
Control+1 through 6
Command+1 through 6
Alignment > Left
Control+Shift+Alt+L
Command+Shift+
Option+L
Alignment > Center
Control+Shift+Alt+C
Command+Shift+
Option+C
Alignment > Right
Control+Shift+Alt+R
Command+Shift+
Option+R
Make selected text bold
Control+B
Command+B
Make selected text italic
Control+I
Command+I
Edit Style Sheet
Control+Shift+E
Command+Shift+E
Note: Some text formatting shortcuts have no effect when working in the code editors.
Finding and replacing text
550
Appendix
Action
Windows
Macintosh
Find
Control+F
Command+F
Find Next/Find Again
F3
Command+G
Replace
Control+H
Command+H
Working in tables
Action
Windows
Macintosh
Select table (with cursor inside the Control+A
table)
Command+A
Move to the next cell
Tab
Tab
Move to the previous cell
Shift+Tab
Shift+Tab
Insert a row (before current)
Control+M
Command+M
Add a row at end of table
Tab in the last cell
Tab in the last cell
Delete the current row
Control+Shift+M
Command+Shift+M
Insert a column
Control+Shift+A
Command+Shift+A
Delete a column
Control+Shift+ - (hyphen) Command+Shift+ (hyphen)
Merge selected table cells
Control+Alt+M
Command+Option+M
Split table cells
Control+Alt+S
Command+Option+S
Update table layout (forces a
redraw when in “faster table
editing” mode)
Control+Spacebar
Command+Spacebar
Note: Some table shortcuts do not work in Layout view.
Working with frames
Action
Windows
Macintosh
Select a frame
Alt-click in frame
Shift+Option-click
in frame
Select next frame or frameset
Alt+Right Arrow
Command+Right Arrow
Select previous
frame or frameset
Alt+Left Arrow
Command+Left Arrow
Select parent frameset
Alt+Up Arrow
Command+Up Arrow
Select first child frame or frameset Alt+Down Arrow
Command+Down Arrow
Add a new frame to frameset
Option-drag frame border
Alt-drag frame border
Add a new frame to frameset using Alt+Control-drag
push method
frame border
Command+Option-drag
frame border
Keyboard Shortcuts
551
Working with layers
Action
Windows
Macintosh
Select a layer
Control+Shift-click
Command+Shift-click
Select and move layer
Shift+Control-drag
Command+Shift-drag
Add or remove layer from selection Shift-click layer
Shift-click layer
Move selected layer by pixels
Arrow keys
Arrow keys
Move selected layer by
snapping increment
Shift+arrow keys
Shift+arrow keys
Resize selected layer by pixels
Control+Arrow keys
Option+arrow keys
Resize selected layer by
snapping increment
Control+Shift+arrow keys Option+Shift+arrow keys
Align selected layers to the
Top/Bottom/Left/Right of the
last selected layer
Control+Up/Down/Left/
Right Arrow
Command+Up/Down/
Left/Right Arrow
Make selected layers
the same width
Control+Shift+[
Command+Shift+[
Make selected layers
the same height
Control+Shift+]
Command+Shift+]
Toggle nesting preference on
or off when creating a layer
Control-drag
Command-drag
Toggle the display of the grid
Control+Shift+Alt+G
Command+Shift+
Option+G
Snap To grid
Control+Alt+G
Command+Option+G
Working with timelines
552
Appendix
Action
Windows
Macintosh
Add object to timeline
Control+Alt+Shift+T
Command+Option+
Shift+T
Add a keyframe
Shift+F9
Shift+F9
Remove a keyframe
Delete
Delete
Working with images
Action
Windows
Macintosh
Change image source attribute
Double-click image
Double-click image
Edit image in external editor
Control–double-click
image
Command–double-click
image
Managing hyperlinks
Action
Windows
Macintosh
Create hyperlink (select text)
Control+L
Command+L
Remove hyperlink
Control+Shift+L
Command+Shift+L
Drag and drop to create a
hyperlink from a document
Select the text, image, or
object, then Shift-drag
the selection to a file in
the Site window
Select the text, image, or
object, then Shift-drag
the selection to a file in
the Site window
Drag and drop to create
a hyperlink using the
Property inspector
Select the text, image, or
object, then drag the
point-to-file icon in
Property inspector to a
file in the Site window
Select the text, image, or
object, then drag the
point-to-file icon in
Property inspector to a
file in the Site window
Open the linked-to document
in Dreamweaver
Control–double-click link
Command–
double-click link
Check links selected
Shift+F8
Shift+F8
Check links in the entire site
Control+F8
Command+F8
Targeting and previewing in browsers
Action
Windows
Macintosh
Preview in primary browser
F12
F12
Preview in secondary browser
Control+F12
Command+F12
Keyboard Shortcuts
553
Debugging in browsers
Action
Windows
Macintosh
Debug in primary browser
Alt+F12
Option+F12
Debug in secondary browser
Control+Alt+F12
Command+Option+F12
Site management and FTP
554
Appendix
Action
Windows
Macintosh
Create new file
Control+Shift+N
Command+Shift+N
Create new folder
Control+Shift+Alt+N
Command+Shift+
Option+N
Open selection
Control+Shift+Alt+O
Command+Shift+
Option+O
Get selected files or folders
from remote FTP site
Control+Shift+D or
drag files from Remote
to Local pane in Site
window
Command+Shift+D or
drag files from Remote to
Local pane in Site
window
Put selected files or folders
to remote FTP site
Control+Shift+U or drag
files from Local to
Remote pane in Site
window
Command+Shift+U or
drag files from Local to
Remote pane in Site
window
Check out
Control+Shift+Alt+D
Command+Shift+
Option+D
Check in
Control+Shift+Alt+U
Command+Shift+
Option+U
View site map
Alt+F8
Option+F8
Refresh remote site
Alt+F5
Option+F5
Site map
Action
Windows
Macintosh
View site files
F8
F8
Refresh Local pane
Shift+F5
Shift+F5
Make root
Control+Shift+R
Command+Shift+R
Link to existing file
Control+Shift+K
Command+Shift+K
Change link
Control+L
Command+L
Remove link
Delete
Delete
Show/Hide link
Control+Shift+Y
Command+Shift+Y
Show page titles
Control+Shift+T
Command+Shift+T
Rename file
F2
n/a
Zoom in site map
Control+ + (plus)
Command+ + (plus)
Zoom out site map
Control+ - (hyphen)
Command+ - (hyphen)
Action
Windows
Macintosh
Play plugin
Control+Alt+P
Command+Option+P
Stop plugin
Control+Alt+X
Command+Option+X
Play all plugins
Control+Shift+Alt+P
Command+Shift+
Option+P
Stop all plugins
Control+Shift+Alt+X
Command+Shift+
Option+X
Playing plugins
Working with templates
Action
Windows
Macintosh
Create new editable region
Control+Alt+V
Command+Option+V
Keyboard Shortcuts
555
Inserting objects
To insert
Windows
Macintosh
Any object (image, Shockwave
movie, and so on)
Drag file from the
Explorer or Site
window to the
Document window
Drag file from the
Finder or Site
window to the
Document window
Image
Control+Alt+I
Command+Option+I
Table
Control+Alt+T
Command+Option+T
Flash movie
Control+Alt+F
Command+Option+F
Shockwave Director movie
Control+Alt+D
Command+Option+D
Named anchor
Control+Alt+A
Command+Option+A
Action
Windows
Macintosh
Open the History panel
Shift F10
Shift F10
Start/stop recording command
Control+Shift+X
Command+Shift+X
Play recorded command
Control+P
Command+P
History panel
556
Appendix
Opening and closing panels
To toggle the display of
Windows
Macintosh
Objects
Control+F2
Command+F2
Properties
Control+F3
Command+F3
Site Files
F5
F5
Site Map
Control+F5
Command+F5
Assets
F11
F11
CSS Styles
Shift+F11
Shift+F11
HTML Styles
Control+F11
Command+F11
Behaviors
Shift+F3
Shift+F3
History
Shift+F10
Shift+F10
Timelines
Shift+F9
Shift+F9
Code inspector
F10
F10
Frames
Shift+F2
Shift+F2
Layers
F2
F2
Reference
Control+Shift+F1
Command+Shift+F1
Show/Hide Floating panels
F4
F4
Minimize all windows
Shift+F4
Restore all windows
Alt+Shift+F4
Getting help
Action
Windows
Macintosh
Using Dreamweaver Help Topics
F1
F1
Reference
Shift+F1
Shift+F1
Dreamweaver Support Center
Control+F1
Command+F1
Keyboard Shortcuts
557
Keyboard Shortcut Matrix
Note: An asterisk (*) indicates an unused key combination. Italics indicate system-level
commands.
Keyboard
character
Control (Windows)
or
Command
(Macintosh)
Control+Shift
(Windows) or
Command+Shift
(Macintosh)
Control+Alt
(Windows) or
Command+
Option (Macintosh)
Control+Shift+Alt
(Windows) or
Command+
Shift+Option
(Macintosh)
A
Select All, Select
Table
Insert Table Column
Insert Named Anchor
*
B
Bold (toggle)
Add to Library
*
*
C
Copy
*
*
Center justify
D
Duplicate
Get Selected Files or
Folders
Insert Shockwave
Director Movie
Check Out Selected
Files or Folders
E
Launch External
Editor
Edit Style Sheet
*
*
F
Find and Replace
*
Insert Flash Movie
*
G
Find Next
(Macintosh only)
*
Show/Hide Grids
Snap to Grid (toggle)
H
Replace
*
*
*
I
Italic (toggle)
Show Invisibles
(toggle)
Insert Image
*
J
Page Properties
Property inspector
(toggle)
*
*
K
*
*
*
*
L
Create Link
Remove Link
*
Left Justify
M
Insert Table Row
Delete Table Row
Merge Selected Table
Cells
*
N
New Window
(Windows)
New Page
(Macintosh)
New Page (Windows
only)
*
New Site Folder
O
Open
Open in Frame
*
Open Selected Site File
P
Play Recorded
Command
Paragraph Format
Play Plugin
Play All Plugins
Q
Quit
*
*
*
R
*
Make Root
Show/Hide Rulers
Right Justify
558
Appendix
Keyboard
character
Control (Windows)
or
Command
(Macintosh)
Control+Shift
(Windows) or
Command+Shift
(Macintosh)
Control+Alt
(Windows) or
Command+
Option (Macintosh)
Control+Shift+Alt
(Windows) or
Command+
Shift+Option
(Macintosh)
S
Save
Save All
Split Table Cell
*
T
Quick Tag Editor
Show Page Titles in
Site Toolbar
Insert Table
Add Object to Timeline
U
Preferences
Put Selected Files or
Folders
*
Check In Selected Files
or Folders
V
Paste
*
Create New Editable
Region
*
W
Close
View Head Content
*
*
X
Cut
Start Recording
Command
Stop Plugin
Stop All Plugins
Y
Redo
Show/Hide Link
*
*
Z
Undo
Redo
*
*
0 (zero)
Set Paragraph
Format to None
*
*
*
1
Apply Heading 1 to
Paragraph
*
*
*
2
Apply Heading 2 to
Paragraph
*
*
*
3
Apply Heading 3 to
Paragraph
*
*
*
4
Apply Heading 4 to
Paragraph
*
*
*
5
Apply Heading 5 to
Paragraph
*
*
*
6
Apply Heading 6 to
Paragraph
*
*
*
7
*
*
*
*
8
*
*
*
*
9
*
*
*
*
- (minus) and Site Map Zoom Out
_ (Underscore)
Delete Table Column
*
*
= and +
Site Map Zoom In
*
*
Fit to Window
Keyboard Shortcuts
559
Keyboard
character
Control (Windows)
or
Command
(Macintosh)
Control+Shift
(Windows) or
Command+Shift
(Macintosh)
Control+Alt
(Windows) or
Command+
Option (Macintosh)
Control+Shift+Alt
(Windows) or
Command+
Shift+Option
(Macintosh)
[ and {
Outdent (Move
Backward)
Make Layers Same
Width (Layers)
*
*
] and }
Indent (Move
Forward)
Make Layers Same
Height (Layers)
*
*
>
*
Select Child Tag
*
<
*
Select Parent Tag
*
*
? and /
*
*
*
*
; and :
*
*
*
*
‘ and “
*
*
*
*
‘ and ~
*
*
*
*
\ and |
*
*
*
*
Spacebar
Update Table Layout Insert Non-breaking
Space (Windows)
(Option+
Spacebar on
Macintosh)
*
*
Control+
Alt
(Windows)
or
Command+
Option
(Macintosh)
Control+
Shift+Alt
(Windows) or
Command+
Shift+
Option
(Macintosh)
Dreamweave Reference
Panel
r Support
Center
*
*
*
Object panel
*
*
*
*
Property
Inspector
*
*
*
Close
Window
(Macintosh
only)
*
*
*
*
*
*
Function
Key
No modifier Shift
Alt
(Windows)
or Option
(Macintosh)
Control
(Windows)
or
Command
(Macintosh)
F1
Reference
Using
Dreamweav
er Help
*
F2
Layers
Frames
F3
Find again
(Windows
only)
Behaviors
panel
F4
Hide/Show
Floating
panels
Minimize all Close
Windows
windows
(Windows
only)
F5
Site Files
Refresh
Refresh
Site Map
Local Pane Remote Pane
560
Appendix
Control+
Shift
(Windows)
or
Command+
Shift
(Macintosh)
Function
Key
No modifier Shift
Alt
(Windows)
or Option
(Macintosh)
Control
(Windows)
or
Command
(Macintosh)
Control+
Shift
(Windows)
or
Command+
Shift
(Macintosh)
Control+
Alt
(Windows)
or
Command+
Option
(Macintosh)
Control+
Shift+Alt
(Windows) or
Command+
Shift+
Option
(Macintosh)
F6
*
*
*
Switch to
Layout view
Switch to
Standard
view
*
*
F7
*
Check
Spelling
*
*
*
*
*
F8
*
Check
Links Selected
*
Check Links - *
Entire Site
*
*
F9
*
Timeline
and Add
keyframe
*
*
*
*
*
F10
Code
inspector
History
panel
*
*
*
*
*
F11
Assets
CSS Styles *
HTML Styles *
*
*
F12
Preview in
Primary
Browser
*
Preview in
Secondary
Browser
Debug in
Secondary
Browser
*
Debug in
Primary
Browser
*
Keyboard Shortcuts
561
562
Appendix
INDEX
A
Absolute Bottom alignment (image Property
inspector) 271
Absolute Middle alignment (image Property
inspector) 271
Absolute paths 354
actions
browser compatibility 444
changing in behaviors 442
choosing in Behaviors panel 439
controlling timelines 434
creating 443
defined 435
included with Dreamweaver 444–471
See also individual actions by name
Active Links color option (Page Properties) 153
Active Server Pages (ASP)
about 542
editing 352
tags, customizing parsing and appearance 537
ActiveX controls
inserting 316
overview 316
properties 316
resizing 272
Add Frame command 427
Add Object to Library command 397
Add Object to Timeline command 427
Add/Remove Netscape Resize Fix command 412
adding
extensions to Dreamweaver 93
frames to a timeline 429
links 226
objects to a timeline 427
Adjust Position command 158
Align image property 270
Align with Selection command 159
aligning
layers 415
options 271
page elements 271
text 241
tracing images 159
All Info tab (Design Notes) 136
Alt image property 270
Always Nest When Created Within Existing
Layer option 412
Anchor object (Objects panel) 363
anchors, named 362
animation, editing Fireworks animations 292
animations
along complex path 428
applying to objects 432
copying and pasting 431
creating 427
improving 433
overview 19
timelines 425
anonymous file upload 489
AppleTalk servers 124
applets. See Java applets
applications, other, using with Dreamweaver 89
Apply Source Formatting command 348
Apply Source Formatting option (Clean Up Word
HTML command) 349
Apply Template to Page command 389
applying colors to text 226
arranging views 332
ASP. See Active Server Pages
assets 221, 232
adding to Favorites list 225
applying colors to text 226
categories 222
colors, creating 231
editing 227
Favorites folders 231
Favorites lists 229
563
assets (continued)
inserting 225
opening the Assets panel 223
overview 221
planning 101
refreshing the Site list 224
selecting multiple 227
URLs, creating 231
attributes
in browser profiles 532
searches 260
See also tags
audio. See sound
Auto Apply option (HTML Styles panel) 245
Automatic Wrapping option (Code Format
preferences) 345
automating tasks 160
Autoplay option 425
Autoplay option (Timelines panel) 426
autostretch (Layout view) 179
B
background
page image and color 153
transparency in 153
Background option (Code Colors preferences) 343
balancing braces 337
Baseline alignment (image Property inspector) 271
Basic Info tab (Design Notes) 136
basics of Dreamweaver 20
BBEdit integration (Macintosh only) 351
behaviors 435–471
actions, creating 443
and forms 500
and images 280
and library items 401
and links 374
and media 320
and templates 388
and timelines 442
attaching 439
changing 442
channel in timelines 425
compatibility with browsers 444
defined 435
deleting 442
third-party 443
triggering 439
564
Index
Behaviors panel 436
bitmaps, resizing 272
See also images
body tag 159
bold text 239
Border image property 270
borders
adding to a table 190
in a frame 217
table, removing 185
Bottom alignment (image Property inspector) 271
braces, balancing 337
branches, expanding and collapsing in site map 122
breakpoints in JavaScript debugger 477
broken links 506
Browser Default alignment (image Property
inspector) 271
browsers
3.0 compatible files 424
and CSS styles 256
colors, safe 88
compatibility, planning 97
compatibility, testing 502
detecting 503
previewing in 504
primary, defining 504
profiles, creating 534
profiles, editing 532
secondary, defining 505
targeting 502
versions, checking 447
buttons
creating form buttons 496
Go buttons 456
Submit buttons, graphical 497
C
Cache option (Site Definition dialog box) 103, 104
Call JavaScript action 446
Case for Attributes option (Code Format
preferences) 345
Case for Tags option (Code Format preferences) 345
categories
assets 222
preferences 88
Cell Padding option (Insert Table) 184
Cell Spacing option (Insert Table) 184
cells. See layout cells, table cells
Centering option (Code Format preferences) 345
CFML. See ColdFusion Markup Language
CGI, reference material 25
CGI (Common Gateway Interface), scripts 499
Change Link Sitewide command 368
Change Property action 446
characters, special 236
Check Browser action 447
Check In/Check Out options 132
entering a check-out name 132
entering an e-mail address 132
Check In/Check Out reports 141
Check Links Sitewide command 507
Check Out Files When Opening option 132
Check Plugin action 449
Check Spelling command 258
Check Target Browsers command 502
checkboxes 491
checking files in and out 131, 134
overview 131
undoing a check out 134
checking links 506
class attribute 252
Clean up Tags option 349
Clean up CSS option 349
Clean Up HTML command 347
Clean Up Word HTML command 348
Clear Paragraph Style option 246
Clear Selection Style option 246
code
editing with BBEdit 351
formatting preferences 343
Code inspector
Document window, switching to 332
opening 332
Code view
arranging views 332
opening 331
opening non-HTML files 338
options 333
writing and editing code 334
ColdFusion Markup Language (CFML)
and Dreamweaver 330
editing CFML tags 352
overview 543
tags, customizing parsing and appearance 537
color box option 87
Color command 240
Color Cubes color palette 87
color picker
Dreamweaver 87
system 87
Color Wheel (System Color) button 87
color-blindness 153
colors
as assets. See assets
choosing 87
contrast 153
creating color assets 231
default for page text 153
eyedropper, using 87
frame background 217
page background 153
swatches 87
text, changing 226, 240
Web-safe 88
column header menu 180
Columns option (Insert Table) 184
columns, rows, and cells
adding and removing 196
background color, adding 192
formatting 191
Combinable Nested Font Tags 510
Combine Nested Tags When Possible option 347
combining floating panels 82
commands
accessing from context menu 78, 79
creating, from history steps 165
recording 166
renaming 520
Commands menu, editing 518
Comments option (Code Colors preferences) 343
comments, inserting 327
Common Gateway Interface (CGI). See CGI 499
Configuration folder
Behaviors subfolder 529
BrowserProfiles subfolder 532
Commands subfolder 529
Extensions.txt file 514
menus.xml file 517
Objects subfolder 515
SourceFormat.txt file 530
ThirdPartyTags subfolder 537
Index 565
Connecting to remote sites, using, source-control
systems 127
Connection Speed option 76
content, adding to tables 185
context menus 78, 79
customizing 519
Continuous Tone color palette 87
Control Shockwave or Flash action 450
conventions 22
Convert Layers to Tables command 422
Convert Tables to Layers command 424
copying and pasting, Fireworks HTML 283
copying history steps 164
Create Web Photo Album command 294
creating, templates 377
creating colors and URLs 231
creating new Flash button templates 306
Creating radio buttons 493
creating reports 510
CSS Layers, exporting from Fireworks 284
CSS Styles, exporting 254
CSS styles
applying custom 254
attributes, converting to HTML 257
class attribute 252
creating 252
selectors 252
CSS Styles panel 255
custom styles. See style sheets
customizing Dreamweaver 513, 544
basics 90
dialog boxes 529
Launcher bar and Launcher 77
menus 517
Objects panel 515
tags, third-party 537
D
dates, inserting 235
debugger. See JavaScript debugger
Default Color button 87
default file type, changing 514
Define HTML Style dialog box 245
dependent files
getting 144
putting 145
showing and hiding 121
566
Index
Design Notes
adding status choices 137
disabling 137
for documents and objects 136
for Dreamweaver and Fireworks integration 287
for Fireworks files 140
for media objects 300
overview 134
reports 141
running a report 142
saving file information 135
setting up 135
design of pages 100
Design view
arranging views 332
displaying with Code view 331
Detach from Original option 401
Detach from Template command 391
detecting browsers and plugins 503
dialog boxes, customizing 529
Director, creating Shockwave movies with 310
directory structure, site. See sites
display options
floating panels 83
fonts 89
displaying
layers 420
tracing images 158
docking floating panels 82
Document window
basics 74
Code inspector, switching to 332
frames in 211
Launcher bar 74
opening documents 150
page size and download time 74
playing Navigator plugins 315
resizing 75
searching for text 258
selecting elements 154
tag selector 74
title bar 74
Window Size pop-up menu 74
document-relative paths
about 355
setting 359
documents
checking links 506
creating 150
creating, based on templates 388
Design Notes, using with 134
download size, time 509
new 150
opening 150
page title 152
previewing in browsers 504
saving 151
searching 258
setting properties 152
templates, detaching from 391
text, adding 234
download time 74
downloading
behaviors 443
size, time estimates 509
Drag Layer action 451
drawing
layers 409
layout cells and tables 170
Dreamweaver and Fireworks integration
creating Web photo albums 294
Design Notes 287
editing Fireworks animations 292
exporting CSS Layers 284
exporting Dreamweaver library items 285
external editor preference 286
inserting Fireworks files 282
Launch and Edit preferences 287
launching and editing Fireworks images 288
launching and editing Fireworks tables 289
launching and optimizing Fireworks images 290
Optimize Image in Fireworks command 290
resizing Fireworks images 291
updating Fireworks HTML 293
Dreamweaver discussion group 16
Dreamweaver Help Pages 14
Dreamweaver libraries, exporting from Fireworks 285
Dreamweaver Support Center 16
E
Edit button (image Property inspector) 270
Edit Font List command 242
Edit NoFrames Content command 219
Edit Style Sheet command 252
editing
assets 227
Flash button objects 303
keyboard shortcuts 90
templates 377
editing code (Code view or Code inspector) 334
editors. See external editors
elements
aligning 271
viewing invisible 547
e-mail address, using with check in/check out system 132
e-mail files 150
e-mail links
changing 368
creating 364, 365
embedding audio 313
Enable File Check In and Check Out option 132
encodings 89
entities 236
errors in JavaScript code 476
event handlers. See events
events
available for different browsers and objects 436
changing in behaviors 442
defined 435
triggering actions 439
Excel. See Microsoft Excel files, importing.
Export Table command 202
exporting
CSS Layers from Fireworks 284
Fireworks files to Dreamweaver 284
library items from Fireworks 285
XML, tag notations for 395
exporting styles 254
Extending Dreamweaver book and Help pages 16
extensibility
JavaScript 536
overview 536
third-party behaviors 443
extensions 93
reloading 515
Index
567
external editors
BBEdit (Macintosh only), integration with 351
Fireworks. See Dreamweaver and Fireworks
integration
HomeSite (Windows) 330
HTML, overview 350
images 277
media 298
preference 286
text, overview 350
external links 506
external style sheets
creating 250
editing 252
linking to 250
eyedropper 87
F
Favorites folders 231
Favorites list (Assets panel). See assets 225
features, new in Dreamweaver 22
fields
about form fields 485
creating hidden fields 490
creating text fields 486
file fields 489
uploading files to a server 489
file formats, image 267
file types, Flash files 300
File Types/Editors preferences 299
File View Columns
accessing 139
adding a column 140
changing the order 139
deleting 140
using with Design Notes 138
files
downloading 143
getting from remote site 143
managing 108
putting 144
searching 258
synchronizing local and remote sites 146
text 150
transferring with FTP 124
types, default 514
uploading 144
viewing in Site window 115
568
Index
Find In options 259
finding and replacing. See searching
firewalls
defining host and port 111
options 125
Fireworks, Design Notes in 140
Fireworks and Dreamweaver integration. See
Dreamweaver and Fireworks integration
Fix Invalidly Nested and Unclosed Tags option (Code
Rewriting preferences) 346
Fix Invalidly Nested Tags option (Clean Up Word
HTML) 349
Flash button dialog box 301
Flash button objects 301, 306
modifying 303
previewing 303
properties 305
Flash content, overview 300
Flash movies
as assets. See assets
controlling 450
inserting 307
overview 300
properties 308
resizing 272
Flash object properties 305
Flash Text dialog box 304
Flash Text objects, inserting 304
Flash text objects
previewing 303
properties 305
floating panels, See panels
folders
root 102
searching 258
folders, Favorites 231
Font Combination option 242
fonts
changing characteristics 239
changing combinations 242
encodings, setting fonts for 89
Fonts/Encoding preferences 89
Format option 242
Format Table command 193
formatting HTML source code
customizing 530
preferences 343
forms
adding multiple objects 498
adding to a document 484
behaviors, using with 500
client-side scripting 499
creating 483
creating file fields 489
fields, validating 470
inserting tables 498
jump menus, creating 369
objects, adding 485
overview 481
password field 486
processing 499
server-side scripting 499
Submit buttons 497
fps (frames per second) 425
frames 203–220
behaviors, using with 220
borders 217
browser compatibility 219
changing background color 217
changing content 218
creating 206, 207
deleting 207
nested 208
overview 203
panel 209
properties 212
resizing 216
saving 211
selecting 208
shortcuts 551
steps in creating 205
targeting 218
using links 218
Frames and Framesets option (Code Format
preferences) 344
Frames panel 209
frames per second (fps) 425
framesets 206–217
borders 217
naming 212
nested 208
predefined, inserting 206
properties 214
saving 211
selecting 208
targeting links in 359
See also frames
FTP
connecting to a Web server 124
determining a host directory 126
log 144
transferring files with 124
troubleshooting 130
FTP Host Name field 125
G
General preferences 88
Generator objects, overview 309
Get and Put Newer Files option 146
Get command 143
Get More Behaviors command 443
Get Newer Files from Remote option 146
getting files from a remote server 143
GIF images
as tracing image 158
uses for 267
Go button, associating with a jump menu 456
Go To Timeline Frame action 468
Go To URL action 454
graphics. See images
Grayscale color palette 87
grid
as guide 157
showing 174, 416
snap to 174
snapping layers to 416
spacing 174
Guided Tour overview 13
Index 569
H
head section, editing content in 159
header cell, formatting 192
heading tags 240
Help 14
Dreamweaver discussion group 16
Dreamweaver Support Center 16
shortcuts 557
hidden files, showing and hiding 121
hiding invisible elements 156
History panel
automating tasks with 160
clearing the history list 86
commands, creating from history steps 165
maximum steps, setting 86
overview 84
steps, applying to other objects 162
steps, copying and pasting 164
steps, repeating 161
home page, setting 120
HomeSite (Windows) 330
horizontal rules, inserting and modifying 243
Host Directory field 126
hotspots
applying behaviors to 280
in image maps 273
properties 274
resizing 275
selecting multiple in an image map 275
hr (horizontal rule), inserting 243
HTML Corrections log file 348
HTML documents. See documents 150
HTML files, importing 150
HTML source code
cleaning up 347
cleaning up MS Word HTML 348
copying and pasting from Fireworks to
Dreamweaver 283
copying and pasting, general 237
CSS attributes conversion 257
editing with BBEdit 351
external editors 350
formatting in existing documents 348
formatting preferences overview 343
formatting preferences, setting 344
formatting profile 530
inserting from Fireworks into Dreamweaver 282
570
Index
HTML source code (continued)
options 333
overview 321
reference 328
reference material 25
rewriting preferences 346
searching 258, 260
selecting in the Document window 154
structure 322
tag color preferences 343
tag searches 260
tag styles 248
tags, removing 342
updating Fireworks HTML placed in
Dreamweaver 293
viewing with Code inspector 86
writing and editing 334
HTML Source option 260
HTML styles
applying 245
clearing 246
creating 246–247
deleting 246
editing 247
modifying 247
New Style icon 247
removing from panel 246
using in other sites 248
viewing 245
HTML tags. See tags 322
HTTP Address field 103, 104
I
Ignore Whitespace Differences option 260
image inspector 273
image maps
creating client-side 273
hotspots 273
overview 273
selecting multiple hotspots 275
images
aligning 241
applying behaviors to 280
as assets. See assets
changing source file with timelines 430
editing 277
external image editors 277
images (continued)
formats, supported 267
image maps 273
in tables 186
inserting 268
inserting in Layout view 174
preloading (behavior) 459
properties 269
resizing visually 272
restoring swapped (behavior) 468
scalability 272
shortcuts 553
swapping (behavior) 467
Import Table Data command 186
Import Word HTML command 150, 348
importing, Word HTML files 150
Indent and Outdent options (text
Property inspector) 242
Indent option (Code Format preferences) 344
Indent Size option (Code Format preferences) 345
Index, Help 15
Insert E-Mail Link dialog box 364
Insert Image Field command 497
Insert Jump Menu dialog box 369
Insert Named Anchor dialog box 363
Insert Navigation Bar dialog box 372
Insert Tabular Data command 186
inserting
ActiveX controls 316
assets 225
dates 235
Fireworks HTML into Dreamweaver 282
Fireworks images into Dreamweaver 282
Flash button objects 301
Flash movies 307
Flash Text objects 304
Generator objects 309
images 268
Java applets 318
media elements 297
rollover images 276
server-side includes 405
Shockwave movies 310
special characters 236
inserting assets. See assets
inspectors
image inspector 273
opening and closing with Launcher bar 77
Property inspector 82
shortcuts 557
See also panels
installing Dreamweaver 12
integrating Dreamweaver with other applications 89
integrating with SourceSafe 127
integrating with WebDAV 127
interactivity 19
invalid tags, displaying 329
invisible elements
comments 327
preferences 156
scripts 335
selecting 154
showing and hiding 156
italics 239
J
Java applets
inserting 297, 318
overview 318
properties 318
resizing 272
JavaScript
actions 436
alerts 458
executing 446
extending Dreamweaver 536
files 150
inserting scripts 335
JavaScript debugger 473
logical errors 476
running 473
setting breakpoints 477
step in, step out, step over 478
syntax errors 475
variable list 479
warning box 474
watching variables 479
window 476
JavaServer Pages (JSP) 542
JPEG images
as tracing image 158
uses for 267
Index
571
JS debugger. See JavaScript debugger
JSP (JavaServer Pages) 542
Jump Menu action 455
Jump Menu Go action 456
jump menus
adding menu items 369
changing menu items 370
creating a selection prompt for 369
editing 455
Go buttons 456
Go buttons, adding automatically 369
K
Keyboard Shortcut Editor 90
keyboard shortcuts 545–558
editing 90
editing, in menus.xml file 521
keyframes
creating 427
overview 425
L
Language script property 336
Launch and Edit preferences 287
Launcher
Launcher bar 77
Launcher and Launcher bar
customizing 77
default buttons 74
launching Fireworks from Dreamweaver. See
Dreamweaver and Fireworks integration
layers 407–434
activating 416
aligning 415
anchor points 156
changing stacking order of 420
changing visibility with behaviors 465
changing visibility with Layers panel 420
converting for 3.0 browsers 424
converting to tables 422
creating 409
draggable 453
drawing multiple 409
in table design 422
inserting 409
manipulating 412
572
Index
layers (continued)
markers, displaying 409
moving 415
nesting 411
overview 407
positioning 417
preferences 412
preventing overlap 423
properties 417
properties for multiple 419
resizing 414
selecting 413
selecting multiple 419
shortcuts 552
snapping to grid 416
visibility 420
Layers panel 410
layout cells 169
alignment 177
bg color 177
clearing heights 175
drawing 170
formatting 177
highlight 182
moving 176
No Wrap 177
preferences 182
resizing 176
selecting 176
layout tables 169
alignment 178
background 182
bg color 178
cell padding 178
cell spacing 178
clearing heights 178
drawing 170
formatting 178
Make Widths Consistent 178
moving 176
nested 173
outline 182
preferences 182
Remove all Spacers 178
Remove Nesting 178
resizing 176
selecting 176
Layout view 167–182
about layout cells and tables 169
adding content to 174
autoinsert spacers 182
autostretch 179
background 182
cell highlight 182
cell padding 178
cell spacing 178
Clear Height attributes 178
clearing cell heights 175
column header menu 180
drawing layout cells and tables 170
fixed width 179
formatting layout cells 177
formatting layout tables 178
grid 174
Make Widths Consistent 178
moving layout cells and tables 176
nested layout tables 173
overview 167
preferences 182
Remove All Spacers 178
Remove Nesting 178
resizing layout cells and tables 176
selecting layout cells and tables 176
setting width 179
spacer image preferences 181
spacer images 181
switching into 167
table outline 182
layout, planning 100
See alsoLayout view, templates
learning Dreamweaver 20
Left alignment (image Property inspector) 271
lessons overview 13
library items 396, 403
adding to pages 398, 404
as assets. See assets
changing highlight color 397
creating 396
deleting 400
editing 398, 404
editing behaviors in 401
exporting from Fireworks 285
making editable in documents 401
overview 396
library items (continued)
preferences 397
properties 403
Line Breaks option (Code Format preferences) 345
Link Checker dialog box 507
Link Color option (Page Properties) 153
Link External Style Sheet dialog box 251
Link image property 270
Link option 242
Link to Existing File command 119
Link to New File command 120
linked documents, opening 508
linking
anchors 362
documents 359
to document using point-to-file icon 360
to external CSS style sheet 251
to named anchor using point-to-file icon 363
links
applying to selection 226
cache file 366
changing frames with 218
changing sitewide 368
checking 506
fixing 507
opening source 367
Relative to Document 359
Relative to Site Root 359
removing 367
shortcuts 553
site map 367
specifying 242
targeting 358
testing 505
to anchors 362
to document 358
to style sheets 250
updating 366
List Item option 242
lists, creating 238
Load Query button 263
Local Files option 114
local root folder 102
Local Root Folder field 103, 104
local sites. See sites 102
locked regions, clicking in 385
logical errors in JavaScript code 476
Index
573
Loop option 425
looping timelines 429
Low Src image property 270
M
Mac OS color palette 87
Macromedia Director, creating Shockwave
movies with 310
macros (creating commands) 165
managing assets. See assets
managing links 366
Map Name Field image property 270
map tag 273
markers for invisible elements 156
Match Case option 260
media elements
inserting 297
parameters 319
menus, customizing 517
menus.xml file, syntax 522
Merge Cells command 198
Microsoft Excel files, importing 186
Microsoft Word files, opening 150
Microsoft Word HTML
cleaning up 348
importing 348
Middle alignment (image Property inspector) 271
Mini-Launcher. See Launcher and Launcher bar 74
Missing Alt Text 510
modifying, page properties 152
monitor size, resizing pages to fit 75
movies, inserting 297
MPEG movies as assets. See assets
multimedia. See media
N
Name property (image Property inspector) 269
Named Anchor command 363
named anchors, creating 362
navigation bar
adding images to 372
creating 371
displaying horizontally in a page 373
displaying vertically in a page 373
image states 371
inserting in a table 373
modifying elements 374
574
Index
nesting 412
frames 208
layers 411
Netscape 4 layer compatibility 412
Netscape Navigator plugins
playing in Document window 315
properties 314
troubleshooting 315
Never Rewrite HTML In Files with Extensions option
(Code Rewriting preferences) 346
New command 150
new features in Dreamweaver 22
New From Template command 151
New from Template command 389
NFS servers 124
NOFRAMES content 219
null links
changing 368
creating 365
O
objects
adding Design Notes 136
adding to forms 485
checkboxes and radio buttons 491
creating 516
inserting 234
inserting with Objects panel 80
shortcuts 556
Objects panel
categories 80
customizing 515
docking 82
overview 80
preferences 81
reloading 515
onBlur event 470
Open Attached Template command 391
Open Browser Window action 456
Open command 150
Open Linked Page command 508
Open Style Sheet icon 250, 251
opening
documents 150
file types other than HTML by default 514
text files 150
Opening linked documents 508
opening non-HTML files 338
preferences 338
opening Word HTML files 150
Optimize Image in Fireworks command 290
Ordered List option 242
orphaned files 506
Other Keywords option (Code Colors preferences) 344
overlapping tags 329
Override Case Of option (Code Format
preferences) 345
overview of Dreamweaver 11
P
Package Manager 93
page layout. See Layout view, templates
page properties, titles, changing 152
page size, resizing to fit monitor 75
pages
background image 153
changing title 152
color 153
default text colors 153
design 100
Design Notes, using with 134
download time, estimated 509
previewing in browsers 504
properties, and templates 379
size 509
palettes, color 87
panels
Behaviors panel 436
Code inspector 86
docking 82
History panel 84
Launcher bar 77
Objects panel 80
opening and closing with Launcher bar 77
setting floating preferences 83
shortcuts 557
paragraph tags 240
Parameters dialog box 319
Paste as Text command 234
pasting history steps 164
paths
absolute 354
document-relative 355
root-relative 357
personal spelling dictionary 258
photographs 267
PHP Hypertext Preprocessor 542
pixels, transparent, in background 153
planning, design 100
Play Sound action 458
Play Timeline action 469
playback head 425
playing Flash objects 303
plugins
checking 449
detecting 503
Netscape Navigator 314
playing in Document window 315
playing shortcuts 555
resizing 272
troubleshooting 315
PNG images
as tracing image 158
uses for 267
pop-up menu, creating 495
Popup Message action 458
preferences
Code Colors 343
Code Format 344
Code Rewriting 346
dictionary for spell checking 258
External Editors 298
File Types/Editors 299
floating panels 83
Fonts/Encoding 89
General 88
Invisible Elements 156
Launch and Edit 287
Layers 412
Layout View 182
libraries 397
Objects panel 81
overview 88
Panels 83
Preview in Browser 505
Preview Using Local Server (root-relative links) 357
Quick Tag Editor 342
Site 110
Status Bar 76
template 383
updating links 366
Index
575
Preload Images action 459
Prevent Layer Overlaps command 423
Preview in Browser command 504
Preview Using Local Server command 357
previewing in browsers
overview 504
shortcuts 553, 554
primary browser 505
processing forms 499
profiles
browsers 532
HTML source format 530
properties
ActiveX controls 316
changing with behaviors 446
column, row, and cell 191
displaying 82
document, setting 152
Flash movies 308
frame 212
frameset 214
hotspots 274
image 269
Java applets 318
layer 417
layout cell 177
layout tables 178
multiple layer 419
Shockwave movies 310
table 190
Property inspector
ActiveX control properties 316
displaying 82
expanding 82
fixing broken links 508
Flash movie properties 308
hotspots 274
images 269
Java applet properties 318
library item properties 403
Netscape Navigator plugin properties 314
Shockwave movie properties 310
proportion, maintaining 272
publishing sites 501
Put command 144
Put Newer Files to Remote option 146
putting files on a remote server 144
576
Index
Q
Quick Tag Editor
attributes hints menu 341
opening 338
overview 338
preferences 342
QuickTime movies
as assets. See assets
inserting 313
R
radio buttons 491
Record Path of Layer command 428
recording commands 166
Redefine HTML Tag option 252
Redundant Nested Tags 510
reference material 25
Reference panel 328
Refresh image property 270
Refresh Local File List Automatically option 103, 104
refreshing, Site list (Assets panel) 224
regions, locked, clicking in 385
regular expressions 264
reloading extensions 515
Remote Files option 114
Removable Empty Tags 511
Remove all Word Specific Markup option 349
Remove Dreamweaver HTML Comments option 347
Remove Empty Tags option 347
Remove Extra Closing Tags option (Code Rewriting
preferences) 346
Remove Frame command 427
Remove Non-Dreamweaver HTML Comments
option 347
Remove Redundant Nested Tags option 347
Remove Specific Tag(s) option 347
Remove Timeline command 431
removing frames from a timeline 429
repeating steps 160
Replay button 161
Reports, Checked Out By 141
reports 141
creating 510
testing a site with 510
Workflow 141
Reserved Keywords option (Code Colors
preferences) 343
Reset Origin command 157
Reset Position command 158
resizing
frames 216
handles 272
layers 414
layout cells and tables 176
page elements 272
table cells 194
resizing Fireworks images from Dreamweaver 291
resources for information on Web technologies 25
reusing
library items 398
searches 263
templates 388
Right alignment (image Property inspector) 271
roadmap (where to start) 20
Rollover Image text field 276
rollovers 276
creating 276
making a link 276
testing 277
root folder
local 102
remote 126
root-relative paths
about 357
Preview Using Local Server preference 357
setting 359
Roundtrip HTML 329
Rows option (Insert Table) 184
rulers 157
S
Save All Frames command 212
Save as Template command 377
Save command 151
Save Frame As command 212
Save Frame command 212
Save Frameset As command 211
Save Frameset command 211
Save Query button 263
saving
documents 151
files in frames and framesets 211
searches 263
script links
changing 368
creating 365
scripts
as assets. See assets
balanced braces 337
editing 336
editing external 335
entering 335
showing in Document 156
viewing functions 337
scrolling lists 494
Search For options 259
searching
Dreamweaver Help 15
for files 258
HTML tags and attributes 260
regular expressions 264
saving search patterns 263
shortcuts 550
text between specific tags 262
text in HTML source 260
text within files 258
secondary browser 505
Select Newer Local command 146
Select Newer Remote command 146
selecting
frames and framesets 208
layers 413
layout cells and tables 176
objects in the Document window 154
Server Access options 124
servers
access options 124
AppleTalk 124
defining remote sites 124
NFS 124
setup troubleshooting 130
server-side image maps 273
server-side includes 404–406
editing 406
inserting 405
overview 404
Set as Home Page command 120
Set Background Color option (Clean Up Word
HTML) 349
Set Color Scheme command 153
Index
577
Set Nav Bar Image action 460
Set Text of Frame action 461
Set Text of Layer action 462
Set Text of Status Bar action 463
Set Text of Text Field action 464
setting breakpoints 477
setting document properties 152
Shockwave movies
as assets. See assets
controlling 450
inserting 310
overview 310
properties 310
resizing 272
shortcut menus. See context menus
shortcuts, keyboard. See keyboard shortcuts
Show Launcher bar in Status Bar option 76
Show Layout Table Tabs option 168
Show Log on Completion option 347
Show Page Titles in site map 120
Show-Hide Layers action 465
showing invisible elements 156
Site Files view 115
Site list, refreshing 224
site maps
adding files to a site 119
changing links in 367
collapsing a branch 122
Display Dependent Files option 121
editing pages 119
expanding a branch 122
Link to Existing File command 119
Link to New File command 120
links 367
marking files hidden 121
Refresh Local command 121
removing links in 367
renaming pages in 120
saving as an image file 122
selecting multiple pages in 119
Set as Home Page command 120
shortcuts 555
show hidden files 121
Show Page Titles option 120
showing dependent files in 121
updating after changes 121
viewing 113
viewing a branch of 122
578
Index
Site Name field 103, 104
site planning 95
assets 101
audience 95
goals 95
structure 98
Site preferences 110
site reports 141
site root relative paths. See root-relative paths
Site window
basics 112
changing the display 114
Get command 143
overview 108
Put command 144
searching for files 123
searching for text 258
Site Files view 109
Site Map view 109
site maps 113
toolbar options 108
viewing local sites 112
sites
adding files and folders 115
browser compatibility 97, 502
cache 366
changing display 114
changing links sitewide 368
checking files in and out 131
checking links 506
create new 102
Design Notes, using with 134
edit existing 104
editing remote 105
fixing broken links 507
large, assets in 229
local versus remote 95
local, associating a remote server with 124
local, creating 102
local, locating files in 123
local, root folder 102
local, viewing 112
previewing in browsers 504
publishing 501
reference material 25
remote, access options 124
remote, defining 124
remote, locating files in 123
sites (continued)
remote, root folder 126
remote, setting up 123
remote, setup troubleshooting 130
removing from site list 106
reports, running 141
searching for files in 258
selecting updated files 115
shortcuts 554
structure and navigation 107
testing 501
viewing 112
Size option (font) 242
slider controls, creating 451
Snap to Web Safe color palette. 87
sound 311–313
adding to a page 311
playing 458
source format profile 530
Source script property 336
SourceFormat.txt file 343
SourceSafe integration 127
spacer image 182
spacer images 181
preferences 181
special characters
inserting 236
overview 236
Special Characters options (Code Rewriting
preferences) 346
spelling
checking 258
dictionaries, editing 258
Split Cells command 199
Split Frame commands 206
Src image property 269
stacking order
changing with timelines 430
layers 420
starting out 20
status bar
overview 74
preferences 76
setting text (behavior) 463
Window Size pop-up menu 74
stepping through code 478
Stop Timeline action 469
Strikethrough (Default Color) button 87
Strings option (Code Colors preferences) 344
style sheets
editing external style sheets 252
external 250
overview 248
See also styles
Style submenu 239
styles 248
applying custom styles 254
conflicting 255
converting to HTML 256
creating 252
CSS to HTML markup conversion table 257
HTML 244
in templates 388
See also style sheets
Submit buttons 497
Swap Image action 467
Swap Image Restore action 468
swatches, color 87
synchronizing local and remote sites 146
syntax errors 475
syntax of menus.xml 522
System Color button 87
system color picker 87
system requirements
Macintosh 12
Windows 12
T
Tab Size option 345
table border
colors 191
width 191
table cells
background color, adding 192
background image, adding 192
copying and pasting 199
formatting 191
header cells, designating 192
merging 198
splitting 198
See also layout cells, tables
Table of Contents, Help 15
Table Rows and Columns option (Code Format
preferences) 344
Index
579
tables 498
adding and removing rows and columns 196
adding background color to 191
adding background images to 191
adding borders to 190
adding content to 185
adjusting rows and columns 194
aligning 192
cells, splitting 199
changing column width 194
clearing cell width and height 195
columns, rows, and cells 191
converting from layers 422
creating 184
editing Fireworks tables from Dreamweaver 289
formatting 189
HTML tags 189
importing 186
merging cells 198
nesting 197
No Wrap option 192
overview 183
preset designs for 193
properties 190
resizing 194
See also layout view
See layout tables
selecting elements 187
shortcuts 551
sorting 201
See also columns, rows, and cells
tabular data, importing 186
Tag Default option (Code Colors preferences) 343
Tag Specific option (Code Colors preferences) 344
tags
applying 240
ASP 352
body 159
body 323
CFML 352
editing 338
head 323
HTML 322
in browser profiles 532
invalid 329
menus.xml syntax 522
overlapping 329
580
Index
tags (continued)
removing 342
searches 260
selecting 154
specifications 538
table 189
tagspec 538
text formatting 326
third-party, customizing 537
wrapping 338
XML 330
Target image property 270
Target option 242
targeting browsers
browser profiles 532
converting file to 3.0 compatible 424
shortcuts 553, 554
targeting frames to
_blank 218
_parent 218
_self 218
_top 218
targeting links
in documents 359
opening document in a new window 359
templates 375–395
applying to document 226
applying to existing document 389
as assets. See assets
changing highlight colors 383
clicking in locked regions 385
creating 377
creating Flash button templates 306
creating new documents with 151, 389
defining editable regions 382
detaching document from 391
documents based on, creating 388
editable versus locked regions 381
editing 377, 378
finding editable regions 390
making region noneditable 387
modifying 391
overview 375
page properties 379
preferences 383
renaming 378
shortcuts 555
templates (continued)
Templates folder 377
using behaviors 388
using styles 388
using timelines 388
viewing regions 384
XML 392
testing sites 501
text
adding to documents 234
alignment 241
changing color of 226, 240
changing font combinations 242
color, changing 240
default color in pages 153
editing shortcuts 549
external editors. See external editors
formating shortcuts 550
formatting 233
formatting tags 326
formatting with HTML styles 244
searching within documents 258
Text Color option 242
Text Color option (Page Properties) 153
text editors, files created by 150
text editors. See external editors
text fields, setting text with behaviors 464
text files, opening 150
Text option (Code Colors preferences) 343
text-based HTML editors. See external editors
TextTop alignment (image Property inspector) 271
third-party tags
avoiding rewriting 544
customizing 537
timelines
adding and removing frames 429
adding objects to 427
animation tips 433
attaching a behavior 442
changing image source file 430
changing layer properties 430
complex paths 428
controlling with behaviors 434
creating 427
in templates 388
keyframes 427
looping 429
timelines (continued)
modifying 429
multiple 431
playback head 425
playing and stopping using behaviors 469
playing automatically 429
shortcuts 552
Timelines panel 425
titles, changing 152
toolbar, document titles, changing 152
Top alignment (image Property inspector) 271
tracing images 158
transferring files, troubleshooting 144
transparent pixels in background 153
troubleshooting
clicking in locked regions 385
Navigator plugins 315
transferring files 144
typographical conventions 22
U
underline 239
Unmark Editable Region command 387
Unordered List option 242
unordered lists, creating 237
Untitled Documents 511
Update Current Page command 391, 399
Update HTML command 293
Update Pages command 392
updating links 366
uploading files 144
URLs
applying to selection 226
as assets. See assets
creating URL assets 231
URLs. See paths
Use Firewall option 125
Use FTP option 124
Use Local/Network option 124
Use None option 124
Use option (Code Format preferences) 344
Use Passive FTP option 125
Use Regular Expressions option 260
usemap attribute 273
Using Dreamweaver book 14
Using Dreamweaver with Visual SourceSafe 128
Using Reports to test a site 509
Index
581
V
V Space and H Space image properties 270
Validate Form action 470
variable list 479
VBScript 335
viewing
arranging views 332
Code view and Design view 331
editable and locked HTML in templates 386
editable and locked regions in templates 384
head content 159
invisible elements 156
sites 112
Visited Links color option (Page Properties) 153
visual guides
overview 157
rulers 157
tracing images 158
Visual SourceSafe, integration with Dreamweaver 128
W
W and H image properties 269
Warn When Fixing or Removing Tags option (Code
Rewriting preferences) 346
Web design, levels of experience in 20
Web photo albums, creating 294
Web Server Info 124
Web servers. See servers
WebDAV integration 127
Window Size pop-up menu 74
windows
shortcuts 557
See also inspectors, panels
Windows OS color palette 87
Word HTML. See Microsoft Word HTML
word processors, files created by 150
work area 72
Workflow reports 141
writing code (Code view or Code inspector) 334
582
Index
X
XML
in templates 392
menus.xml file 522
overview 394
tag notations when exporting 395
tags 330
tagspec tag 538
Z
Z-Index option (for layers), changing
stacking order 420
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.3
Linearized : No
Create Date : 2000:11:06 12:55:52
Producer : Acrobat Distiller 4.05 for Macintosh
Author : cbasmajian
Title : 000_UsingDreamweaver.book
Creator : FrameMaker 5.5.6
Modify Date : 2000:11:06 13:41:19-08:00
Page Count : 582
Page Mode : UseOutlines
.
; you must put the file name of the image between
quotation marks. Image tags also have attributes that you can use, such as width,
height, border, align, and valign. The width and height attributes specify
the size of your image for the Web browser to interpret; you can set the border
width to 0 or above (images display a border by default when used as links). The
align and valign attributes set alignment of your image: align (for horizontal
alignment) can be set to left, right, or center, and valign (vertical alignment)
can be set to top, bottom, or middle.
The following example shows a complete image tag:
True XML is much stricter and less forgiving about its syntax than HTML is; files
that do not strictly conform to XML syntax are rejected by XML parsers.
XML provides a way to mark literal strings, which can include tags that should
not be parsed: an element called a CDATA section, which includes a literal string in
square brackets. Anything inside the square brackets is not parsed by the XML
parser. Dreamweaver exported XML makes extensive use of CDATA sections.
A full introduction to XML is beyond the scope of this book. For more information
about XML, see “HTML and Web technologies resources” on page 25.
394
Chapter 16
Using XML tag notations
Dreamweaver lets you export XML content using either of two tag notations:
editable region name tags or standard Dreamweaver XML tags. Choose the
notation that best suits how XML content is incorporated into your Web site.
The easiest way to see the differences between the two tag notations, if you
understand XML syntax, is to look at examples. The following XML code was
exported from a document based on a template named newstemplate. The
document contains one defined editable region, named News_Story (and a
default editable region, doctitle, which contains the document’s title tag).
• Editable region name tags use the names of your document’s editable regions as
XML tags. The content from each editable region is included as a CDATA
section. In this example, the doctitle tag identifies the title of the document,
and the News_Story tag identifies the editable region.