Adobe 38028779 User Guide
Adobe 38028779 - Macromedia Dreamweaver - Mac Manual
 |
UPC - 718659742201
View all Adobe 38028779 manuals
Add to My Manuals
Save this manual to your list of manuals |
Adobe 38028779 manual content summary:
- Adobe 38028779 | User Guide - Page 1
Using Dreamweaver ™ macromedia® - Adobe 38028779 | User Guide - Page 2
M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind you access a third-party Web site mentioned in this guide, then you do so at your own risk. Macromedia provides © 2000 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or - Adobe 38028779 | User Guide - Page 3
technologies resources 25 Accessibility and Dreamweaver 26 CHAPTER 1 Dreamweaver Tutorial 27 Take a guided tour of Dreamweaver 28 The Dreamweaver work area 28 Set up the site structure the Assets panel 56 Insert Flash objects 60 Create a template 63 Check your site 68 The next steps 70 3 - Adobe 38028779 | User Guide - Page 4
the Site window 112 About the site map 116 Using the site map 117 Setting up a remote site 123 About WebDAV and SourceSafe integration 127 Troubleshooting remote site setup 130 Using Check In/Check Out 131 About Design Notes 134 Using reports to improve workflow 141 Getting and putting files - Adobe 38028779 | User Guide - Page 5
Document 149 Creating, opening, and saving HTML documents 150 Setting document properties 152 Selecting elements in the Document window 154 Using visual guides in the design process 157 Viewing and editing head content 159 About automating tasks 160 CHAPTER 6 Designing Page Layout 167 About - Adobe 38028779 | User Guide - Page 6
CHAPTER 9 Managing and Inserting Assets 221 Using the Assets panel 222 Using favorite assets 229 CHAPTER 10 Inserting and Formatting Text 233 Inserting text and objects 234 Creating lists 237 Setting fonts, styles, color, and alignment 238 Using HTML styles to format - Adobe 38028779 | User Guide - Page 7
an external editor 298 Using Design Notes with media objects 300 About Flash content 300 Using Flash button objects 301 Using Flash text objects 304 Setting Flash object properties 305 Inserting Flash movies 307 Inserting Generator objects 309 About Shockwave movies 310 Adding sound - Adobe 38028779 | User Guide - Page 8
CHAPTER 15 Linking and Navigation 353 About document locations and paths 354 Creating links 358 Managing links 366 Creating jump menus 369 Creating navigation bars 371 Attaching behaviors to links 374 CHAPTER 16 Reusing Content with Templates and Libraries 375 Creating templates 377 Defining - Adobe 38028779 | User Guide - Page 9
About behaviors and text 441 Attaching a behavior to a timeline 442 Changing a behavior 442 Updating a behavior 443 Creating new actions 443 Downloading and installing third-party behaviors 443 Using the behavior actions that come with Dreamweaver 444 CHAPTER 19 Debugging JavaScript Code 473 - Adobe 38028779 | User Guide - Page 10
10 Contents CHAPTER 22 Customizing Dreamweaver 513 Changing the default file type 514 Modifying the Objects panel 515 Creating a simple object 516 About customizing Dreamweaver menus - Adobe 38028779 | User Guide - Page 11
your development workflow by creating and editing images in Macromedia Fireworks, then importing them directly into Dreamweaver, or by adding Flash objects you create directly in Dreamweaver. Dreamweaver is fully customizable. Use Dreamweaver to create your own objects and commands, modify keyboard - Adobe 38028779 | User Guide - Page 12
Dreamweaver CD. Click OK in the Run dialog box to begin the installation. • On the Macintosh, double-click the Dreamweaver Installer icon. 3 Follow the onscreen instructions. 4 If prompted, restart your computer. 12 Introduction - Adobe 38028779 | User Guide - Page 13
Dreamweaver Support Center on the Macromedia Web site. Start by viewing the Guided Tour movies Using Dreamweaver book. You can also download a printable version of the tutorial at the Macromedia includes sample pages and assets (images and Macromedia Flash files) to help you get started developing - Adobe 38028779 | User Guide - Page 14
Dreamweaver user guide (printed book) Using Dreamweaver provides a printed alternative to Dreamweaver Help, Software Download (ESD) version of Dreamweaver, you can download a printable version of Using Dreamweaver from the Dreamweaver Support Center at http://www.macromedia.com/support/ dreamweaver - Adobe 38028779 | User Guide - Page 15
Dreamweaver Help includes the following components: Contents enables you to see all of the information organized by subject. Click top-level entries to view subtopics. The index, like a traditional printed index, can be used to find important terms and go to related topics. Search allows you to find - Adobe 38028779 | User Guide - Page 16
site often for the latest news on Dreamweaver and how to get the most out of the program at http://www.macromedia.com/support/dreamweaver/. Dreamweaver discussion group Discuss technical issues and share helpful hints with other Dreamweaver users by visiting the Dreamweaver discussion group. You'll - Adobe 38028779 | User Guide - Page 17
, audience profiles, and site goals. Additionally, you should consider technical requirements such as user access, and browser, plugin or download restrictions. Once you've organized your information and determined an operating structure, you begin creating your site. • Determine what strategy to - Adobe 38028779 | User Guide - Page 18
Images" on page 267 and "Using Dreamweaver and Fireworks Together" on page 281. • Insert other types of media in a Web page, such as Flash, Shockwave, and QuickTime movies, sound, and applets. See "Inserting Media" on page 297. • Add content in the Dreamweaver code editor: Use the Dreamweaver - Adobe 38028779 | User Guide - Page 19
• With Dreamweaver you can create standard HTML links, including anchor links and e-mail links, or easily set up graphical navigation systems, such as jump menus and navigation bars. See "Linking and Navigation" on page 353. • Dreamweaver templates and library files let you easily apply reusable - Adobe 38028779 | User Guide - Page 20
" on page 107. Where to start This guide includes information for readers at a variety of levels. To get the Guided Tour movies. From the Dreamweaver main menu, choose Help > Guided Tours. 2 Next, work through the Dreamweaver tutorial. Choose Help > Tutorial, or follow the steps in the printed manual - Adobe 38028779 | User Guide - Page 21
Tour movies. From the Dreamweaver main menu, choose Help > Guided Tours. 2 Work through the Dreamweaver tutorial to learn the basics of using Dreamweaver. Choose Help > Tutorial, or follow the steps in the printed manual. 3 Work through the lessons for the topics that interest you. Choose Help - Adobe 38028779 | User Guide - Page 22
conventions The following typographical conventions are used in this guide: • Code font indicates HTML tag and attribute names to design pages, improve site and asset management, let you create your own Flash objects, streamline your workflow, improve team collaboration, and allow you to - Adobe 38028779 | User Guide - Page 23
also easily attach an existing CSS style sheet with a button in the CSS Styles panel. See "Using CSS style sheets" on page 248. Improved integration Flash buttons and Flash text are now built right into Dreamweaver. You can pick from a set of predefined - Adobe 38028779 | User Guide - Page 24
colors, external URLs, and scripts, as well as Flash, Shockwave, QuickTime, template, and library items in suit your needs, display report results, and open problem files within the Report results window. See "Setting click. Visit the Macromedia Exchange and download useful extensions to make your job - Adobe 38028779 | User Guide - Page 25
/TR/ REC-CSS1) is the official specification for style sheets from the World Wide Web Consortium. Web Review Style Sheets Reference Guide (http://webreview.com/guides/style/ style.html) explains what CSS styles are and which browsers they work in. "CGI Scripts for Fun and Profit" (http://www.hotwired - Adobe 38028779 | User Guide - Page 26
disabilities. We encourage the implementation of international standards to guide developers of accessible sites, including the guidelines offered by and coding practices for accessibility, many of which are robustly supported by Macromedia products. For more information on W3C guidelines, please - Adobe 38028779 | User Guide - Page 27
focus on new or changed features in Dreamweaver such as the Assets panel, Flash buttons and text, using a template, running a site report and adding a document • Inserting assets from the Assets panel • Inserting Flash Text and Flash Button objects • Creating and applying a template • Running - Adobe 38028779 | User Guide - Page 28
Tour movies to familiarize yourself with the Web development process and with Dreamweaver features. 1 In Dreamweaver, choose Help > Guided Tour. 2 Click a movie title. 3 Close the movie when you finish. The Dreamweaver work area Let's start with a brief overview of the Dreamweaver work area. • If - Adobe 38028779 | User Guide - Page 29
• Dreamweaver provides many floating panels, such as the HTML Styles panel and the Code inspector, which enable you to work with other Dreamweaver elements. • The Launcher bar contains buttons for opening and closing your most frequently used inspectors and panels. • The Property inspector displays - Adobe 38028779 | User Guide - Page 30
Preview the completed Web site Next, view pages in the completed Web site to get an idea of what you'll be working toward. 1 If you haven't already done so, launch Dreamweaver. 2 In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate to the Dreamweaver 4 folder (where you - Adobe 38028779 | User Guide - Page 31
Set up the site structure for the tutorial There are two ways you can work with the tutorial files-use a predefined local site or define a local site. • If you're new to Dreamweaver, you may want to define the local site for the tutorial so you'll know how to set up a local site when you're ready to - Adobe 38028779 | User Guide - Page 32
6 In the dialog box that appears, navigate to the Tutorial/Compass_Site folder, and do one of the following: • In Windows, click Open, then click Select when Compass_Site appears in the Select field. • On the Macintosh, click Choose to select the Compass_Site folder. The Local Root Folder field - Adobe 38028779 | User Guide - Page 33
9 Click OK to the cache message. The Site window now displays a list of all the folders and files in the local site. The list also acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop. Dreamweaver Tutorial 33 - Adobe 38028779 | User Guide - Page 34
the Compass site, you'll create the first page-a home page for the site. As you build this page, you'll add images, text, and Flash assets; your document will contain the same design components as the completed Compass home page. Save your document Begin by saving the document you're - Adobe 38028779 | User Guide - Page 35
Define the document page title Though the document has a file name, notice it is still labelled Untitled Document; that's because it needs an HTML document name, or page title. Defining a page title helps site visitors identify the page they're browsing: the page title appears in the browser title bar - Adobe 38028779 | User Guide - Page 36
Work in Layout view Dreamweaver has two visual design views-Standard view and Layout view. You'll start by working in Layout view, which allows you to draw layout cells or layout tables into which you can add content such as images, text, or other media. In this part of the tutorial, you'll lay out - Adobe 38028779 | User Guide - Page 37
Draw layout cells In Layout view you can draw layout cells and layout tables to define the design areas of a document. This task is easier to accomplish if you prepare a sample of the page you're creating before you begin laying out a page. Look at the following sample layout to get an idea of the - Adobe 38028779 | User Guide - Page 38
4 Move the pointer to the Document window; the mouse pointer changes to a drawing tool (looks like a small cross). Click in the upper left corner of the document, then drag to draw a layout cell. When you release the mouse, a layout cell appears in a layout table. Layout Cell Layout Table The layout - Adobe 38028779 | User Guide - Page 39
2 To resize this layout cell, do one of the following: • In the Property inspector for the layout cell, type 510 in the Fixed field to set the cell's width to 510 pixels, then click in the document to see the cell width change. Note: If you enter a pixel width that is larger than the width of the - Adobe 38028779 | User Guide - Page 40
Move a layout cell If you need to line up the cells next to each other you can resize and move the layout cells as you need. You change the size of a layout cell by using one of its resize handles. You cannot click and drag a cell to move it to a new position. If you need to move a layout cell to - Adobe 38028779 | User Guide - Page 41
3 Release the mouse to see the cells grouped in a new table. You've created a table that contains three layout cells (the white area in the table) and an empty space (the gray area in the table). Move the layout table You can select and move a layout table to other areas in a document. You cannot, - Adobe 38028779 | User Guide - Page 42
Add another layout cell Next add a layout cell for the Learn More About graphic. 1 In the Objects panel, click the Draw Layout Cell icon. 2 In the Document window, draw a new cell in the space below the navigation button table. Your page should look similar to this: Create a layout table In the last - Adobe 38028779 | User Guide - Page 43
Draw layout cells in a table Now add layout cells into which you'll add text about travel locations. 1 In the Objects panel, click the Draw Layout Cell icon and move the pointer to the layout table you just drew. 2 Draw a table cell approximately one-third the space in the table. 3 Click the border - Adobe 38028779 | User Guide - Page 44
Add content to the page Now that you've laid out the areas of the page, you'll add the graphical content, such as the logo, and rollover images. Insert images You'll learn two ways to insert images in Dreamweaver-using Dreamweaver's main menu and using the Objects panel. 1 Click anywhere in the logo - Adobe 38028779 | User Guide - Page 45
Create a rollover image A rollover image is an image whose display changes when the pointer passes ("rolls") over it. You'll use the Insert Rollover Image command to create three rollover images for the navigation buttons-Trip Planner, Destinations, and Travel Logs. A rollover image consists of two - Adobe 38028779 | User Guide - Page 46
field, click Browse then navigate to and select MenuTravelLogs.gif. 9 In the Rollover Image field, click Browse then navigate to and select MenuTravelLogs_on.gif. 10 Make sure the Preload Rollover Image option is selected, then click OK to close the dialog box. 11 Resize the two layout cells to fit the - Adobe 38028779 | User Guide - Page 47
Preview your document You cannot view rollover behavior in the Dreamweaver Document window; rollover images work only in a browser. However, you can preview the document in Dreamweaver to see its browser-related functions. You do not have to save the document before you preview it. 1 Press F12 to - Adobe 38028779 | User Guide - Page 48
the my_CompassHome document, click in the second cell in the text description layout table. 9 Choose Edit > Paste to paste the text into the layout cell. 10 In DW4_HomeText.txt select the last two lines of text, "Puget Sound Kayaking" through "Puget Sound." 11 Copy the text, then paste it in the - Adobe 38028779 | User Guide - Page 49
3 In the Property inspector's second Format pop-up menu, which currently reads Default Font, select Verdana, Arial, Helvetica, sans-serif. 4 In the Size pop-up menu, select 2. The text in your document automatically updates to reflect the changes. 5 Repeat the above steps to select and format the - Adobe 38028779 | User Guide - Page 50
Work in Standard view Layout view is helpful for laying out Web pages. Though you can adjust most of your design elements in Layout view, certain changes must be completed in Standard view. When you switch to Standard view, you'll see how Dreamweaver uses tables to create your page structure. The - Adobe 38028779 | User Guide - Page 51
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 - Adobe 38028779 | User Guide - Page 52
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 - Adobe 38028779 | User Guide - Page 53
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 - Adobe 38028779 | User Guide - Page 54
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 - Adobe 38028779 | User Guide - Page 55
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 - Adobe 38028779 | User Guide - Page 56
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 - Adobe 38028779 | User Guide - Page 57
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. Asset options Assets preview area Dreamweaver Tutorial 57 - Adobe 38028779 | User Guide - Page 58
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 - Adobe 38028779 | User Guide - Page 59
. 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 - Adobe 38028779 | User Guide - Page 60
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 - Adobe 38028779 | User Guide - Page 61
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 - Adobe 38028779 | User Guide - Page 62
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 - Adobe 38028779 | User Guide - Page 63
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 - Adobe 38028779 | User Guide - Page 64
are editable. Your first step is to create editable regions in the template. 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. 64 Chapter 1 - Adobe 38028779 | User Guide - Page 65
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 > 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 - Adobe 38028779 | User Guide - Page 66
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 - Adobe 38028779 | User Guide - Page 67
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 field of the toolbar, type New Zealand biking. 10 Save your document. Dreamweaver Tutorial 67 - Adobe 38028779 | User Guide - Page 68
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, - Adobe 38028779 | User Guide - Page 69
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 - Adobe 38028779 | User Guide - Page 70
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 - Adobe 38028779 | User Guide - Page 71
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 - Adobe 38028779 | User Guide - Page 72
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 Objects panel Context menu Document window Tag selector Launcher bar Property inspector • The Document window - Adobe 38028779 | User Guide - Page 73
• 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, - Adobe 38028779 | User Guide - Page 74
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 - Adobe 38028779 | User Guide - Page 75
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 - Adobe 38028779 | User Guide - Page 76
" 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 - Adobe 38028779 | User Guide - Page 77
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 - Adobe 38028779 | User Guide - Page 78
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 - Adobe 38028779 | User Guide - Page 79
• 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 " - Adobe 38028779 | User Guide - Page 80
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 - Adobe 38028779 | User Guide - Page 81
• 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 - Adobe 38028779 | User Guide - Page 82
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 - Adobe 38028779 | User Guide - Page 83
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 - Adobe 38028779 | User Guide - Page 84
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 - Adobe 38028779 | User Guide - Page 85
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 - Adobe 38028779 | User Guide - Page 86
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 - Adobe 38028779 | User Guide - Page 87
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 - Adobe 38028779 | User Guide - Page 88
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 - Adobe 38028779 | User Guide - Page 89
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 - Adobe 38028779 | User Guide - Page 90
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. - Adobe 38028779 | User Guide - Page 91
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 - Adobe 38028779 | User Guide - Page 92
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 - Adobe 38028779 | User Guide - Page 93
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 - Adobe 38028779 | User Guide - Page 94
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 - Adobe 38028779 | User Guide - Page 95
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 - Adobe 38028779 | User Guide - Page 96
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 - Adobe 38028779 | User Guide - Page 97
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 - Adobe 38028779 | User Guide - Page 98
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 - Adobe 38028779 | User Guide - Page 99
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 - Adobe 38028779 | User Guide - Page 100
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 - Adobe 38028779 | User Guide - Page 101
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 - Adobe 38028779 | User Guide - Page 102
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, - Adobe 38028779 | User Guide - Page 103
, 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 - Adobe 38028779 | User Guide - Page 104
, 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 - Adobe 38028779 | User Guide - Page 105
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 Project1 Assets HTML - Adobe 38028779 | User Guide - Page 106
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 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 - Adobe 38028779 | User Guide - Page 107
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 - Adobe 38028779 | User Guide - Page 108
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 - Adobe 38028779 | User Guide - Page 109
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 De - Adobe 38028779 | User Guide - Page 110
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 - Adobe 38028779 | User Guide - Page 111
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 - Adobe 38028779 | User Guide - Page 112
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 - Adobe 38028779 | User Guide - Page 113
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 - Adobe 38028779 | User Guide - Page 114
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 - Adobe 38028779 | User Guide - Page 115
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 fi - Adobe 38028779 | User Guide - Page 116
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 - Adobe 38028779 | User Guide - Page 117
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 Defi - Adobe 38028779 | User Guide - Page 118
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 - Adobe 38028779 | User Guide - Page 119
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 - Adobe 38028779 | User Guide - Page 120
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 - Adobe 38028779 | User Guide - Page 121
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 - Adobe 38028779 | User Guide - Page 122
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 - Adobe 38028779 | User Guide - Page 123
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 - Adobe 38028779 | User Guide - Page 124
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 - Adobe 38028779 | User Guide - Page 125
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 - Adobe 38028779 | User Guide - Page 126
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 - Adobe 38028779 | User Guide - Page 127
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 - Adobe 38028779 | User Guide - Page 128
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 - Adobe 38028779 | User Guide - Page 129
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 - Adobe 38028779 | User Guide - Page 130
Troubleshooting remote site setup A Web server can be configured in a wide 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 - Adobe 38028779 | User Guide - Page 131
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 - Adobe 38028779 | User Guide - Page 132
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 - Adobe 38028779 | User Guide - Page 133
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 - Adobe 38028779 | User Guide - Page 134
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 - Adobe 38028779 | User Guide - Page 135
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 - Adobe 38028779 | User Guide - Page 136
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 - Adobe 38028779 | User Guide - Page 137
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 - Adobe 38028779 | User Guide - Page 138
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 - Adobe 38028779 | User Guide - Page 139
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 - Adobe 38028779 | User Guide - Page 140
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 - Adobe 38028779 | User Guide - Page 141
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 - Adobe 38028779 | User Guide - Page 142
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 - Adobe 38028779 | User Guide - Page 143
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 - Adobe 38028779 | User Guide - Page 144
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 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 - Adobe 38028779 | User Guide - Page 145
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 - Adobe 38028779 | User Guide - Page 146
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 - Adobe 38028779 | User Guide - Page 147
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 - Adobe 38028779 | User Guide - Page 148
148 Chapter 4 - Adobe 38028779 | User Guide - Page 149
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 - Adobe 38028779 | User Guide - Page 150
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- - Adobe 38028779 | User Guide - Page 151
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 - Adobe 38028779 | User Guide - Page 152
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 - Adobe 38028779 | User Guide - Page 153
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 - Adobe 38028779 | User Guide - Page 154
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 - Adobe 38028779 | User Guide - Page 155
• 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 - Adobe 38028779 | User Guide - Page 156
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 - Adobe 38028779 | User Guide - Page 157
design process Dreamweaver provides several kinds of visual guides to help you design documents and predict ( 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 - Adobe 38028779 | User Guide - Page 158
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 - Adobe 38028779 | User Guide - Page 159
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 - Adobe 38028779 | User Guide - Page 160
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 - Adobe 38028779 | User Guide - Page 161
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 - Adobe 38028779 | User Guide - Page 162
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 - Adobe 38028779 | User Guide - Page 163
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 - Adobe 38028779 | User Guide - Page 164
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 - Adobe 38028779 | User Guide - Page 165
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 - Adobe 38028779 | User Guide - Page 166
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 - Adobe 38028779 | User Guide - Page 167
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. - Adobe 38028779 | User Guide - Page 168
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 - Adobe 38028779 | User Guide - Page 169
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 - Adobe 38028779 | User Guide - Page 170
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 - Adobe 38028779 | User Guide - Page 171
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 - Adobe 38028779 | User Guide - Page 172
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 - Adobe 38028779 | User Guide - Page 173
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 - Adobe 38028779 | User Guide - Page 174
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 - Adobe 38028779 | User Guide - Page 175
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" - Adobe 38028779 | User Guide - Page 176
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 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 - Adobe 38028779 | User Guide - Page 177
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 - Adobe 38028779 | User Guide - Page 178
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, - Adobe 38028779 | User Guide - Page 179
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 - Adobe 38028779 | User Guide - Page 180
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 - Adobe 38028779 | User Guide - Page 181
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, - Adobe 38028779 | User Guide - Page 182
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 - Adobe 38028779 | User Guide - Page 183
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 ( - Adobe 38028779 | User Guide - Page 184
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 - Adobe 38028779 | User Guide - Page 185
• 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 - Adobe 38028779 | User Guide - Page 186
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 " - Adobe 38028779 | User Guide - Page 187
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 - Adobe 38028779 | User Guide - Page 188
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 - Adobe 38028779 | User Guide - Page 189
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 - Adobe 38028779 | User Guide - Page 190
Setting table properties The Property inspector displays table properties when a table is selected. You can also use the Format Table command to quickly apply a preset design to a selected table. See "Using a design scheme to format a table" on page 193. To specify table properties: 1 Select the - Adobe 38028779 | User Guide - Page 191
To set cell padding and spacing, choose from the following options: • In the CellPad field, specify the number of pixels between the cell content and the cell boundary (or wall). • In the CellSpace field, specify the number of pixels between each table cell. When cell spacing and cell padding are not - Adobe 38028779 | User Guide - Page 192
3 Choose from the following appearance options: • Use the Horz pop-up menu to set the horizontal alignment of a cell's, column's, or row's contents. You can align the contents to the left, right, or center, or to the browser's default (usually left for regular cells and center for header cells). • - Adobe 38028779 | User Guide - Page 193
Using a design scheme to format a table Use the Format Table command to quickly apply a preset design to a table. You can then select options to further customize the design. To use a preset design: 1 Select the table and choose Commands > Format Table. 2 In the dialog box that appears, choose a - Adobe 38028779 | User Guide - Page 194
Resizing tables and cells You can resize the entire table or individual rows and columns. When you resize the entire table, all of the cells in the table change proportionally. To resize the table: 1 Select the table. 2 Drag one of the selection handles to resize the table along that dimension. - Adobe 38028779 | User Guide - Page 195
Resetting width and height The simplest way to set column widths and row heights is to drag the borders of the table. Dragging a column or row border automatically sets specific values for all of the columns or rows, either in pixels or as percentages of the table's current dimensions, depending on - Adobe 38028779 | User Guide - Page 196
Adding and removing rows and columns Use the commands in the Modify > Table submenu or the commands in the context menu to add and remove rows and columns from a table. To add rows or columns: 1 Click in a cell where you want the new row or column to appear. 2 Do one of the following: • To add a row - Adobe 38028779 | User Guide - Page 197
Nesting tables A nested table is a table within a table. You can configure a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. To nest a table within a table cell: 1 Do one of the following: • Click in the cell where you want to - Adobe 38028779 | User Guide - Page 198
was previously merged. Dreamweaver automatically restructures the table (adds any necessary COLSPAN or ROWSPAN attributes) to create the specified arrangement. In the following illustration, the cells in the middle of the first two rows have been merged so that they span two rows. To merge two or more - Adobe 38028779 | User Guide - Page 199
To split a merged cell: 1 Click in the cell or select a cell. 2 Choose Modify > Table > Split Cell, or click the Split Cell button in the Property inspector. 3 In the Split Cell dialog box, choose whether to split the cell into rows or columns, and then enter the number of rows or columns. Copying - Adobe 38028779 | User Guide - Page 200
To paste table cells: 1 Choose where you want to paste the cells. • To paste cells before or above a particular cell, click in that cell. • To create new table with the pasted cells, click wherever you want the table to appear (as long you don't click inside another table). 2 Choose Edit > Paste. If - Adobe 38028779 | User Guide - Page 201
alphabetic sort applied to a list of one- and two-digit numbers will result in an alphanumeric sort (such as 1, 10, 2, 20, 3, 30) rather than a straight numeric sort (such as 1, 2, 3, 10, 20, 30). • Select Ascending (A to Z or low to high) or Descending for the sort order. 3 To perform a secondary - Adobe 38028779 | User Guide - Page 202
Exporting table data To export table data you create in Dreamweaver, you must save the data in a file format that accepts delimited data. Delimiter separators you can use are commas, colons, semicolons, or spaces. You cannot select portions of a table to export; when you export a table, the entire - Adobe 38028779 | User Guide - Page 203
8 CHAPTER 8 Using Frames Frames are used in a Web page to divide it into multiple HTML pages. For example, a Web page consists of three frames. One thin frame on the side that contains a scrolling menu, one frame that runs along the top that contains the logo and title of the Web site, and one - Adobe 38028779 | User Guide - Page 204
In this example, the top frame would remain static and never change from page to page in the site. The side frame menu will have links that change the content of the main frame area, but otherwise remain static. The main frame area is the dynamic area, that changes depending on what menu item you - Adobe 38028779 | User Guide - Page 205
Frames can be confusing to implement, however, and you can often create a Web page without frames that accomplishes the same goals as a page using frames. For example, if you want the navigation on the left side of your page, you can either split your page into two frames, or just include the left - Adobe 38028779 | User Guide - Page 206
Creating frames There are two ways to create a frameset in Macromedia Dreamweaver: you can design it yourself, or you can select from several predefined framesets. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to - Adobe 38028779 | User Guide - Page 207
Designing and inserting a frameset Before creating a frameset or working with frames, make the frame borders visible in the document window. To view frame borders in a document, choose View >Visual Aids > Frame Borders. When frame borders are displayed, space is added around the document border, - Adobe 38028779 | User Guide - Page 208
Creating a nested frameset A frameset inside another frameset is called a nested frameset. Each new frameset you create includes its own frameset HTML document and frame documents. Most Web pages that use frames are actually using nested frames, and several of the predefined framesets in Dreamweaver - Adobe 38028779 | User Guide - Page 209
Using the Frames panel The Frames panel provides a visual representation of the frames within a document. You can click a frame or frameset in the Frames panel to select that frame or frameset in the document, and then you can view or edit the properties of the selected item in the Property - Adobe 38028779 | User Guide - Page 210
Selecting a frame or frameset in the Document window In the Document window, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all the borders of the frames within the frameset are outlined with a dotted line. Select frames and framesets to change - Adobe 38028779 | User Guide - Page 211
Saving frame and frameset files A frameset file and its associated frame files must be saved before you can preview the page in a browser. You can individually save a frameset page or a frame page, or you can save all open frame files and the frameset page. When you use Dreamweaver to create frame - Adobe 38028779 | User Guide - Page 212
To save a document that is inside a frame: Click in the frame to select it, then choose File > Save Frame or File > Save Frame As. To save all files in a frameset: Choose File > Save All Frames. This saves all open documents, including individual documents, frame documents, and frameset documents. - Adobe 38028779 | User Guide - Page 213
2 Choose Window > Properties to open the Property inspector. Click the expander arrow in the lower right corner to see all the properties. 3 To name the frame, type a name in the Frame Name field. Note: Frame Name determines the name of the current frame to use for hyperlink target and scripting - Adobe 38028779 | User Guide - Page 214
Setting frameset properties Use frameset properties to set borders and frame size. Setting a frame property overrides the setting for that property in a frameset. For example, setting border properties in a frame overrides the border properties set in the frameset. Predefined framesets are used to - Adobe 38028779 | User Guide - Page 215
To specify frameset properties: 1 Select a frameset. 2 In the Borders pop-up menu, select whether you want to display borders around frames when the document is viewed in a browser. • If you want to display borders, select Yes. • If you don't want to display borders, select No. • If you want the - Adobe 38028779 | User Guide - Page 216
Specifying frame sizes Drag a frame border in the Document window to set approximate sizes for frames; then use the Property inspector to specify how much space the browser allocates to a frame when the screen size doesn't allow the frames to display at full size. To specify frame sizes: 1 Click a - Adobe 38028779 | User Guide - Page 217
Setting frame and frameset borders You can specify how frame and frameset borders appear in a document. When you specify border options for a frame, the corresponding frameset option is overridden. To set frame borders: 1 Select the frame by Alt-clicking (Windows) or Option-Shift-clicking (Macintosh - Adobe 38028779 | User Guide - Page 218
Controlling frame content with links To use links in frames, you must set a target for the link. The target is the frame in which the linked content will open. For example, if the navigation menu is in the left frame, and you want the linked material to appear in the main content frame, you must use - Adobe 38028779 | User Guide - Page 219
loads the frameset file, the browser displays only the content enclosed by the noframes tags. To define content for browsers that don't support frames: 1 Choose Modify > Frameset > Edit NoFrames Content. Dreamweaver clears the Document window, and the words "NoFrames Content" appear at the top of - Adobe 38028779 | User Guide - Page 220
Using behaviors with frames You can apply a number of behaviors that take advantage of the way frames operate. Frames are usually used when the Web page designer wants to control the display of content on a Web page. There are several behaviors that facilitate changing the contents of a frame. • Set - Adobe 38028779 | User Guide - Page 221
your site, you can obtain them from various sources. For example, you might create assets in an application such as Macromedia Fireworks or Macromedia Flash, receive them from a co-worker or client, or copy them from a clip-art CD. For more information about planning and gathering assets, see "About - Adobe 38028779 | User Guide - Page 222
gopher, HTTP, HTTPS, JavaScript, e-mail (mailto), and local file (file://). Flash movies are files in any version of Macromedia Flash format. The Assets panel displays only SWF (compressed Flash) files, not FLA (Flash source) files. See "About Flash content" on page 300. Shockwave movies are files in any - Adobe 38028779 | User Guide - Page 223
Scripts are JavaScript or VBScript files. Note that scripts in HTML files (rather than in independent JavaScript or VBScript files) do not appear in the Assets panel. For information on working with JavaScript in Macromedia Dreamweaver, see "Debugging JavaScript Code" on page 473. Templates provide a - Adobe 38028779 | User Guide - Page 224
. The site cache is created or updated as necessary, and the Assets panel is updated to show all the recognized assets in your site. To manually rebuild the site cache from scratch and refresh the Site list: Control-click (Windows) or Command-click (Macintosh) the Refresh Site List button at the - Adobe 38028779 | User Guide - Page 225
To change the size of the preview area: Drag the splitter bar (between the preview area and the list of assets) up or down. To add assets to your Favorites list: 1 Select one or more assets in the Site list. 2 Click the Add to Favorites button. The assets are added to your Favorites list. To see the - Adobe 38028779 | User Guide - Page 226
To change the color of selected text in a document: 1 Select the Colors category in the Assets panel. 2 Select the color to apply. 3 Click Apply. To add a link to the current selection in a document: 1 Select the URLs category in the Assets panel, and locate a URL to apply. 2 Do one of the following - Adobe 38028779 | User Guide - Page 227
Selecting and editing assets The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets. To select multiple assets: 1 Select one of the assets by clicking it. Then select the other assets in one of the following ways: • Shift-click to select a - Adobe 38028779 | User Guide - Page 228
Working with assets and sites You may want to locate the file in the Site window that corresponds to an asset in the Assets panel. This can be useful, for example, when you want to transfer the asset to or from your remote site. The Assets panel shows all the assets (of recognized types) in your - Adobe 38028779 | User Guide - Page 229
Using favorite assets Most of the operations of the Assets panel are the same in the Favorites list as in the Site list (see "Using the Assets panel" on page 222). However, there are several tasks that you can perform only in the Favorites list. Because the Assets panel's Site list always shows all - Adobe 38028779 | User Guide - Page 230
To remove assets from your Favorites list: 1 Select one or more assets (or a Favorites folder) in the Favorites list. 2 Click the Remove From Favorites button at the bottom of the Assets panel. The assets are removed from the Favorites list, but they still appear in the Site list. If you remove a - Adobe 38028779 | User Guide - Page 231
Grouping assets in a Favorites folder In the Favorites list, within a given category, you can create named groups of assets, called Favorites folders. For example, if you have a set of images that you use on numerous catalog pages in an e-commerce site, you could group them together in a folder - Adobe 38028779 | User Guide - Page 232
To create a new template: 1 Click the Templates category button. 2 Click the New Template button. For more information on creating new templates, see "Reusing Content with Templates and Libraries" on page 375. To create a new library item, do one of the following: • Click the Library category button - Adobe 38028779 | User Guide - Page 233
10 CHAPTER 10 Inserting and Formatting Text Formatting in Macromedia Dreamweaver is similar to simply select the saved style from the HTML Styles panel. HTML styles are supported by almost all Web browsers and save time over manually formatting text. Another kind of style, called a CSS style (CSS - Adobe 38028779 | User Guide - Page 234
You can use CSS styles, HTML styles, and manual HTML formatting within the same page. Manual HTML formatting overrides formatting applied by an HTML style or CSS style, so although it is labor saving these files (such as Microsoft Excel files or a database) as delimited text files. 234 Chapter 10 - Adobe 38028779 | User Guide - Page 235
To import tabular data: 1 Choose File > Import > Import Tabular Data, or choose Insert > Tabular Data. The Import Table dialog box appears. 2 Browse for the file you want or enter its name in the text field. 3 Select the delimiter used when the file was saved as delimited text. Your options are Tab, - Adobe 38028779 | User Guide - Page 236
want. There are many other special characters available; to select one of them, choose Insert > Characters > More and select a character, then click OK. 236 Chapter 10 - Adobe 38028779 | User Guide - Page 237
the Design view directly and choose Edit > Paste to paste the code as text. You might choose to do this if your Dreamweaver document contained instructions on writing HTML and you wanted the code to appear as text in the Document. To copy and paste as HTML source code: 1 Select and - Adobe 38028779 | User Guide - Page 238
text formatting to one letter or build an entire site using Text > Paragraph Format commands or options in the Property inspector. This kind of manual formatting replaces or overrides formatting set by an HTML style or CSS style. When you apply HTML text formatting, you use the Property inspector - Adobe 38028779 | User Guide - Page 239
Setting and changing fonts and styles Use the Property inspector or the Text menu to set or change font characteristics for selected text. To set or change font characteristics: 1 Select the text. If no text is selected, the change applies to subsequent text you type. 2 Choose from the following - Adobe 38028779 | User Guide - Page 240
browser-safe colors. 2 Click the Strike through button (the white square button with a red line through it, found in the upper-right corner). 240 Chapter 10 - Adobe 38028779 | User Guide - Page 241
Aligning text Align text on the page using the Property inspector or the Text > Align submenu. Center any element on a page using the Text > Align > Center command. To align text: 1 Select the text you want to align or simply insert the pointer at the beginning of the text. 2 Click an alignment - Adobe 38028779 | User Guide - Page 242
a Macintosh. • To move the font combination up or down in the list, click the arrow buttons at the top of the dialog box. 242 Chapter 10 - Adobe 38028779 | User Guide - Page 243
To add a new combination to the font list: 1 Choose Text > Font > Edit Font List. 2 Select a font from the Available Fonts list and click the - Adobe 38028779 | User Guide - Page 244
to use standard heading tags, because they help to preserve the structure of your page in browsers that do not support CSS style sheets. (To see an example of how this works, try viewing Dreamweaver Help in a 3.0 browser.) panel. Context menu Auto Apply Delete Style New Style 244 Chapter 10 - Adobe 38028779 | User Guide - Page 245
update all instances of that formatting, use CSS styles; see "Using CSS style sheets" on page 248. To display the O'Reilly HTML reference guide included with Dreamweaver, click the Reference button found on the toolbar and choose O'Reilly HTML Reference from the drop-down menu. You can use the - Adobe 38028779 | User Guide - Page 246
style sheets" on page 248. Note that the formatting options in the HTML Styles panel match those in the Property inspector. 4 Click OK. 246 Chapter 10 - Adobe 38028779 | User Guide - Page 247
the context menu. The Define HTML Style dialog box appears. To reset it to the default options, click Clear. 3 Complete steps 3 and 4 in the instructions for creating a new style based on existing text. To create a new HTML style from scratch: 1 In the HTML Styles panel, click the New Style icon - Adobe 38028779 | User Guide - Page 248
have been reluctant to use them because of inconsistent browser support. However, if your audience includes viewers who are using browsers that support CSS styles (4.0 and later), you should avail yourself of attributes such as positioning, special effects, and mouse rollovers. 248 Chapter 10 - Adobe 38028779 | User Guide - Page 249
#myStyle applies to all tags that contain the attribute-value pair ID="myStyle"). Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS some are not currently supported by any browser. Note: To display the O'Reilly CSS reference guide included with Dreamweaver, click - Adobe 38028779 | User Guide - Page 250
panel. 3 In the Select Style Sheet dialog box, enter the file name in the URL field, or browse for the file you want. 250 Chapter 10 - Adobe 38028779 | User Guide - Page 251
4 Select a document or site root-relative path. See "About document locations and paths" on page 354. 5 Click Open. The style sheet is attached to your Dreamweaver document and its styles appear in the CSS Styles panel. To link to or create an external CSS style sheet: 1 Choose Window > CSS Styles, - Adobe 38028779 | User Guide - Page 252
fine a tag. Use CSS Selector defines the formatting for a particular combination of tags or for all tags that contain a specific 1d attribute. 252 Chapter 10 - Adobe 38028779 | User Guide - Page 253
style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser. 7 Click OK or Apply. See the following topics in Dreamweaver Help for information on specific settings: • Style De - Adobe 38028779 | User Guide - Page 254
Styles as CSS File dialog box appears. 2 Enter a name for your style and click Save. The style is saved as a CSS style sheet. 254 Chapter 10 - Adobe 38028779 | User Guide - Page 255
About conflicting styles When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules: • If two styles are applied to the same text, the browser displays all attributes of both styles - Adobe 38028779 | User Guide - Page 256
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 only after you are completely satisfied with your original file. 256 Chapter 10 - Adobe 38028779 | User Guide - Page 257
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 color - Adobe 38028779 | User Guide - Page 258
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 or Control-click (Macintosh) and choose Find and Replace from the context menu. 258 Chapter 10 - Adobe 38028779 | User Guide - Page 259
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 - Adobe 38028779 | User Guide - Page 260
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 page 258 for information about the various types of searches. 260 Chapter 10 - Adobe 38028779 | User Guide - Page 261
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 - Adobe 38028779 | User Guide - Page 262
to open the next document that contains the search text, or click Find All to generate a list of documents that contain this text. 262 Chapter 10 - Adobe 38028779 | User Guide - Page 263
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 - Adobe 38028779 | User Guide - Page 264
"oo" in "loom" and the first two o's in "mooooo" but nothing in "money" F{2,4} matches "FF" in "#FF0000" and the first four F's in #FFFFFF 264 Chapter 10 - Adobe 38028779 | User Guide - Page 265
Character [abc] [^abc] \b \B \d \D \f \n \r \s \S \t \w Matches Example 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]). Any character not - Adobe 38028779 | User Guide - Page 266
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 - Adobe 38028779 | User Guide - Page 267
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 free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the - Adobe 38028779 | User Guide - Page 268
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 - Adobe 38028779 | User Guide - Page 269
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 - Adobe 38028779 | User Guide - Page 270
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 - Adobe 38028779 | User Guide - Page 271
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 - Adobe 38028779 | User Guide - Page 272
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 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 - Adobe 38028779 | User Guide - Page 273
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 - Adobe 38028779 | User Guide - Page 274
frames. 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. 274 Chapter 11 - Adobe 38028779 | User Guide - Page 275
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 - Adobe 38028779 | User Guide - Page 276
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). - Adobe 38028779 | User Guide - Page 277
). 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 - Adobe 38028779 | User Guide - Page 278
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 - Adobe 38028779 | User Guide - Page 279
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 fi - Adobe 38028779 | User Guide - Page 280
, 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 action to an object by default; you should never need to select it manually. See "Swap Image Restore" on page 468. You can also use behaviors - Adobe 38028779 | User Guide - Page 281
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, - Adobe 38028779 | User Guide - Page 282
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 - Adobe 38028779 | User Guide - Page 283
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 - Adobe 38028779 | User Guide - Page 284
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 - Adobe 38028779 | User Guide - Page 285
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 - Adobe 38028779 | User Guide - Page 286
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 - Adobe 38028779 | User Guide - Page 287
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 - Adobe 38028779 | User Guide - Page 288
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 - Adobe 38028779 | User Guide - Page 289
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 fi - Adobe 38028779 | User Guide - Page 290
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 - Adobe 38028779 | User Guide - Page 291
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 - Adobe 38028779 | User Guide - Page 292
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 - Adobe 38028779 | User Guide - Page 293
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 - Adobe 38028779 | User Guide - Page 294
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 - Adobe 38028779 | User Guide - Page 295
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 - Adobe 38028779 | User Guide - Page 296
296 Chapter 12 - Adobe 38028779 | User Guide - Page 297
: • 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 - Adobe 38028779 | User Guide - Page 298
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 - Adobe 38028779 | User Guide - Page 299
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 - Adobe 38028779 | User Guide - Page 300
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 - Adobe 38028779 | User Guide - Page 301
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 - Adobe 38028779 | User Guide - Page 302
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 - Adobe 38028779 | User Guide - Page 303
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 - Adobe 38028779 | User Guide - Page 304
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 - Adobe 38028779 | User Guide - Page 305
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 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 - Adobe 38028779 | User Guide - Page 306
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 - Adobe 38028779 | User Guide - Page 307
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 - Adobe 38028779 | User Guide - Page 308
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 - Adobe 38028779 | User Guide - Page 309
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 - Adobe 38028779 | User Guide - Page 310
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 - Adobe 38028779 | User Guide - Page 311
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 - Adobe 38028779 | User Guide - Page 312
downloaded. The sound quality is poorer than that of MP3 files, but new players and encoders have improved quality considerably. Visitors must download 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: 1 Select - Adobe 38028779 | User Guide - Page 313
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 pixels and a height of 60 pixels to see how the audio player appears in both Navigator and Internet Explorer. Inserting Netscape Navigator plugin - Adobe 38028779 | User Guide - Page 314
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 " on page 319. Many plugins respond to special parameters. The Flash plugin, for example, includes parameters for bgcolor, salign, and scale - Adobe 38028779 | User Guide - Page 315
> Media > Shockwave, Insert > Interactive Images > Flash, or Insert > Media > Plugin. 2 Play to stop all plugin content from playing. Troubleshooting Navigator plugins If you have followed the that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a - Adobe 38028779 | User Guide - Page 316
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 - Adobe 38028779 | User Guide - Page 317
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 specifies an image to be displayed if the browser doesn't support the object tag. This option is available only when the Embed option - Adobe 38028779 | User Guide - Page 318
fies 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 ), select an image and then manually add an alt attribute to the img tag in the Code inspector. 318 Chapter 13 - Adobe 38028779 | User Guide - Page 319
. 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 for the object tag. The Parameter dialog box is available from the - Adobe 38028779 | User Guide - Page 320
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 - Adobe 38028779 | User Guide - Page 321
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 have to do is move to the end of your sentence and the problem is fixed. If you are interested in learning HTML, using the Dreamweaver visual - Adobe 38028779 | User Guide - Page 322
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 - Adobe 38028779 | User Guide - Page 323
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 - Adobe 38028779 | User Guide - Page 324
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 - Adobe 38028779 | User Guide - Page 325
Heading tags-that is, h1 through h6 tags-mark the text as headings. Headings are typically displayed in the Web page with larger or bolder text than normal body text; h1 is the largest and h6 is the smallest. You always need the opening tag in front of your content, followed by the closing tag at - Adobe 38028779 | User Guide - Page 326
Image tags insert images in your page. An image tag follows the format ; 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 - Adobe 38028779 | User Guide - Page 327
Inserting comments A comment is descriptive text that you insert in the HTML code to explain the code or provide other information. The comment appears only in the Code view (or Code inspector), and will not display in your Web page in the browser. To insert a comment: 1 Place the insertion point - Adobe 38028779 | User Guide - Page 328
Using the Dreamweaver Reference panel The Reference panel provides you with a quick reference tool for HTML tags, JavaScript objects, and CSS styles and their attributes. The Reference panel provides you with information regarding the specific tags, objects, or styles that you are working with in the - Adobe 38028779 | User Guide - Page 329
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 - Adobe 38028779 | User Guide - Page 330
• 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 - Adobe 38028779 | User Guide - Page 331
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 - Adobe 38028779 | User Guide - Page 332
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 - Adobe 38028779 | User Guide - Page 333
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 - Adobe 38028779 | User Guide - Page 334
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. - Adobe 38028779 | User Guide - Page 335
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 - Adobe 38028779 | User Guide - Page 336
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 - Adobe 38028779 | User Guide - Page 337
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. - Adobe 38028779 | User Guide - Page 338
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 fi - Adobe 38028779 | User Guide - Page 339
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 - Adobe 38028779 | User Guide - Page 340
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 - Adobe 38028779 | User Guide - Page 341
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 - Adobe 38028779 | User Guide - Page 342
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 - Adobe 38028779 | User Guide - Page 343
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. - Adobe 38028779 | User Guide - Page 344
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. Tag Specific allows you to override the other color settings by specifying colors - Adobe 38028779 | User Guide - Page 345
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 specification, but center is supported by a wider range of browsers. Editing HTML in Dreamweaver 345 - Adobe 38028779 | User Guide - Page 346
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 - Adobe 38028779 | User Guide - Page 347
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 - Adobe 38028779 | User Guide - Page 348
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, - Adobe 38028779 | User Guide - Page 349
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 - Adobe 38028779 | User Guide - Page 350
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 - Adobe 38028779 | User Guide - Page 351
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 - Adobe 38028779 | User Guide - Page 352
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 - Adobe 38028779 | User Guide - Page 353
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 - Adobe 38028779 | User Guide - Page 354
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 - Adobe 38028779 | User Guide - Page 355
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 - Adobe 38028779 | User Guide - Page 356
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 (/) - Adobe 38028779 | User Guide - Page 357
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. 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 - Adobe 38028779 | User Guide - Page 358
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 - Adobe 38028779 | User Guide - Page 359
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 - Adobe 38028779 | User Guide - Page 360
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 - Adobe 38028779 | User Guide - Page 361
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 - Adobe 38028779 | User Guide - Page 362
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 - Adobe 38028779 | User Guide - Page 363
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 - Adobe 38028779 | User Guide - Page 364
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 - Adobe 38028779 | User Guide - Page 365
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 - Adobe 38028779 | User Guide - Page 366
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 - Adobe 38028779 | User Guide - Page 367
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 - Adobe 38028779 | User Guide - Page 368
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 - Adobe 38028779 | User Guide - Page 369
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 - Adobe 38028779 | User Guide - Page 370
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 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 - Adobe 38028779 | User Guide - Page 371
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 - Adobe 38028779 | User Guide - Page 372
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 - Adobe 38028779 | User Guide - Page 373
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 - Adobe 38028779 | User Guide - Page 374
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 - Adobe 38028779 | User Guide - Page 375
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 - Adobe 38028779 | User Guide - Page 376
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 - Adobe 38028779 | User Guide - Page 377
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 - Adobe 38028779 | User Guide - Page 378
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 - Adobe 38028779 | User Guide - Page 379
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 - Adobe 38028779 | User Guide - Page 380
, 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. 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 fi - Adobe 38028779 | User Guide - Page 381
text box in the Property inspector, you'll encounter the documentrelative link problem: when you save the edited template, the documents based on the 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 - Adobe 38028779 | User Guide - Page 382
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, - Adobe 38028779 | User Guide - Page 383
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 - Adobe 38028779 | User Guide - Page 384
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 - Adobe 38028779 | User Guide - Page 385
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 - Adobe 38028779 | User Guide - Page 386
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: - Adobe 38028779 | User Guide - Page 387
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 - Adobe 38028779 | User Guide - Page 388
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 - Adobe 38028779 | User Guide - Page 389
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. • - Adobe 38028779 | User Guide - Page 390
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 - Adobe 38028779 | User Guide - Page 391
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 - Adobe 38028779 | User Guide - Page 392
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 - Adobe 38028779 | User Guide - Page 393
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 - Adobe 38028779 | User Guide - Page 394
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 - Adobe 38028779 | User Guide - Page 395
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 - Adobe 38028779 | User Guide - Page 396
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 - Adobe 38028779 | User Guide - Page 397
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 - Adobe 38028779 | User Guide - Page 398
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 - Adobe 38028779 | User Guide - Page 399
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 - Adobe 38028779 | User Guide - Page 400
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 - Adobe 38028779 | User Guide - Page 401
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 - Adobe 38028779 | User Guide - Page 402
, 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. 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 - Adobe 38028779 | User Guide - Page 403
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 - Adobe 38028779 | User Guide - Page 404
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 - Adobe 38028779 | User Guide - Page 405
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 - Adobe 38028779 | User Guide - Page 406
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 - Adobe 38028779 | User Guide - Page 407
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 - Adobe 38028779 | User Guide - Page 408
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 - Adobe 38028779 | User Guide - Page 409
Creating layers on your page Dreamweaver allows you to create layers on your page easily and precisely. You can draw a layer on the page, insert a layer through the menu, or drag it onto your page. Create as many layers as you need to hold all of your page elements. You can also create a layer - Adobe 38028779 | User Guide - Page 410
Note: When the Invisible Elements option is turned on, the elements on your page may appear to shift position. Invisible elements are visible only in the Document window, so when you view your page in a browser, everything will appear in the correct position. About the Layers panel The Layers panel - Adobe 38028779 | User Guide - Page 411
Nesting layers A nested layer is a layer created inside another layer. Use the Layer panel or the insertion, drag and drop, or drawing technique to create nested layers. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility - Adobe 38028779 | User Guide - Page 412
this setting while you're drawing a layer. Netscape 4 Compatibility inserts JavaScript in the head content of a document and fixes a known problem in Netscape 4.x browsers that causes layers to lose their positioning coordinates when a user resizes their browser window. The JavaScript forces the page - Adobe 38028779 | User Guide - Page 413
Selecting layers Select one or more layers to make them the same width and height, reposition them, align them, and so on. For a complete list of options, see "Setting layer properties" on page 417. To select a layer, do one of the following: • Click the name of the layer in the Layers panel. • - Adobe 38028779 | User Guide - Page 414
Resizing layers You can resize an individual layer or simultaneously resize multiple layers to make them the same width and height. If the Prevent Overlaps option is on, you will not be able to resize a layer so that it overlaps with another layer. See "Preventing layer overlaps" on page 423. To - Adobe 38028779 | User Guide - Page 415
Moving layers Moving layers in the Document window will be familiar to anyone who has worked with basic graphics applications. If the Prevent Overlaps option is on, you will not be able to move a layer so that it overlaps another layer. See "Preventing layer overlaps" on page 423. To move one or - Adobe 38028779 | User Guide - Page 416
for positioning or resizing layers in the Document window. You can turn this grid on to use as a guide when you draw your layers. You can also have your layers automatically snap to the grid, and change the grid or control the snapping behavior - Adobe 38028779 | User Guide - Page 417
Setting layer properties Use the Property inspector to specify the name and location of a layer as well as to set other layer options. To see all of the following properties, click the expander arrow in the lower right corner of the Property inspector. Layer ID allows you to specify a name to - Adobe 38028779 | User Guide - Page 418
scroll bars avoids confusion resulting from the appearance and disappearance of scroll bars in a dynamic environment. This option works only in browsers that support scroll bars. • Auto makes scroll bars appear only when the layer's contents exceed its boundaries. Clip defines the visible area of - Adobe 38028779 | User Guide - Page 419
A/B (layer and ilayer only) specifies the layer above (A) or below (B) the current layer in the stacking order (z-index). Only layers previously defined in the document will appear in the list of layer names to the right of the A/B menu. Setting properties for multiple layers When you select two or - Adobe 38028779 | User Guide - Page 420
Changing the stacking order of layers Use the Property inspector or the Layers panel to change the stacking order of layers. The layer at the top of the Layers panel list is at the top of the stacking order. In HTML code, the stacking order, or z-index, determines the order in which layers are drawn - Adobe 38028779 | User Guide - Page 421
prefer to work with layers and tables. Dreamweaver allows you to create your layout using layers, than convert them into tables, since 3.0 browsers don't support layers. You can convert back and forth between layers and tables to tweak the layout and optimize page design. You can't convert layers to - Adobe 38028779 | User Guide - Page 422
Converting between layers and tables Create your layout using layers, then convert the layers to tables so that your layout can be viewed in most browsers. To convert layers to a table: 1 Choose Modify > Convert > Layers to Table. 2 In the dialog box that appears, select the desired layout options. - Adobe 38028779 | User Guide - Page 423
Preventing layer overlaps Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping layers. If you plan to convert the layers in a document to tables for compatibility with 3.0 browsers, use the Prevent Overlap option to constrain layer movement and positioning so that - Adobe 38028779 | User Guide - Page 424
Converting to 3.0 version compatibility Use the Convert option in the File menu to create a 3.0 browser-compatible version of a page that uses layers. Dreamweaver creates a separate, converted document and preserves the original document. In general, you should convert a document only when you are - Adobe 38028779 | User Guide - Page 425
Animating your layers Dynamic HTML, or DHTML, refers to the ability to change style or positioning properties of HTML elements with a scripting language. Timelines use dynamic HTML to change the properties of layers and images in a series of frames over time. Use timelines to create animations that - Adobe 38028779 | User Guide - Page 426
Playback head shows which frame of the timeline is currently displayed on the page. Timeline pop-up menu specifies which of the document's timelines is currently displayed in the Timelines panel. Animation channels display bars for animating layers and images. Animation bars show the duration of each - Adobe 38028779 | User Guide - Page 427
select a layer. See also "Manipulating layers" on page 412. When a layer is selected, handles appear around it as shown in the following illustration. Click the layer marker to select the layer Draw Layer button Selected layer with image inside Clicking inside the layer places a blinking insertion - Adobe 38028779 | User Guide - Page 428
4 Choose Modify > Timeline > Add Object to Timeline or simply drag the selected object into the Timelines panel. A bar appears in the first channel of the timeline. The name of the layer appears in the bar. 5 Click the keyframe marker at the end of the bar. 6 Move the layer on the page to where it - Adobe 38028779 | User Guide - Page 429
Modifying timelines After defining a timeline's basic components, you can make changes such as adding and removing frames, changing the start time of the animation, and so on. To modify a timeline, do any of the following: • To make the animation play longer, drag the end frame marker to the right. - Adobe 38028779 | User Guide - Page 430
Changing image and layer properties with timelines In addition to moving layers with timelines, you can change the source file of an image and the visibility, size, and stacking order of a layer. To change image and layer properties with a timeline: 1 In the Timelines panel, do one of the following: - Adobe 38028779 | User Guide - Page 431
Using multiple timelines Instead of trying to control all the action on a page with one timeline, it's easier to work with separate timelines that control discrete parts of the page. For example, a page might include interactive elements that each trigger a different timeline. To manage multiple - Adobe 38028779 | User Guide - Page 432
There are two principles to keep in mind when pasting animation sequences into another document: • If you copy an animation sequence for a layer and the new document contains a layer with the same name, Dreamweaver applies the animation properties to the existing layer in the new document. • If you - Adobe 38028779 | User Guide - Page 433
. Switching the source file of an image can slow down the animation, because the new image must be downloaded. There will be no noticeable pauses or missing images if all images are downloaded at once in hidden layers before the animation runs. • Extend animation bars to create smoother motion. If - Adobe 38028779 | User Guide - Page 434
Behavior actions for controlling layers timelines Attach the behavior actions listed here to a link, button, or other object to control timelines and layers. To create interesting effects, you can place behaviors containing these actions in the Behaviors channel. For example, you can make a timeline - Adobe 38028779 | User Guide - Page 435
18 CHAPTER 18 Using Behaviors Behaviors allow visitors to interact with a Web page to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by - Adobe 38028779 | User Guide - Page 436
Exchange Web site as well as on third-party developer sites. (See "Downloading and installing third-party behaviors" on page 443.) You can write your , such as when you set a page to automatically reload every 10 seconds.) Dreamweaver supplies many common actions that you can trigger using these - Adobe 38028779 | User Guide - Page 437
Note that most events can be used only with certain page elements. To find out what events a given browser supports for a given page element, insert the page element in your document and attach a behavior to it, then look at the Events pop-up menu in - Adobe 38028779 | User Guide - Page 438
onKeyDown (NS4, IE4, IE5) is generated as soon as the visitor presses any key. (The visitor does not have to release the key for this event to be generated.) The browser cannot detect which key has been pressed. onKeyPress (NS4, IE4, IE5) is generated when the visitor presses and releases any key; - Adobe 38028779 | User Guide - Page 439
other HTML elements. The target browser you choose determines which events are supported for a given element. Internet Explorer 4.0, for example, has a much timelines, and the Control Shockwave or Flash action is dimmed if the document contains no Shockwave or Flash movies. If no events are available - Adobe 38028779 | User Guide - Page 440
4 Enter parameters for the action, and click OK. All actions provided in Dreamweaver work in 4.0 and later browsers. Some actions do not work in older browsers. See "Using the behavior actions that come with Dreamweaver" on page 444. 5 The default event to trigger the action appears in the Events - Adobe 38028779 | User Guide - Page 441
. Be certain to include both the colon and the semicolon. Note: You can instead use a number sign (#) in the Link field if you want. The problem with using a number sign is that when a visitor clicks the link, the browser jumps to the top of the page. Clicking the JavaScript null link - Adobe 38028779 | User Guide - Page 442
Attaching a behavior to a timeline To trigger a behavior at a certain frame in a timeline (rather than having a visitor's interaction trigger it), place the behavior in the timeline. (For information on creating a timeline, see "Animating your layers" on page 425.) For example, you can start a sound - Adobe 38028779 | User Guide - Page 443
, you can write new actions and add them to the Actions pop-up menu in the Behaviors panel. For more information, see Extending Dreamweaver. Downloading and installing third-party behaviors One of the most useful features of Dreamweaver is its extensibility-that is, it offers users who are proficient - Adobe 38028779 | User Guide - Page 444
actions do not work in older browsers. Also, some browsers do not support JavaScript at all, and many people who browse the Web keep JavaScript Check Plugin OK Fails without OK OK error Control OK Shockwave or Flash Fails without OK error Fails without error Drag Layer Fails without - Adobe 38028779 | User Guide - Page 445
Macintosh Windows Action Netscape Internet Netscape Internet Navigator 3.0 Explorer 3.0x Navigator 3.0 Explorer 3.01 Jump Menu Go OK Fails without OK error Fails without error Open Browser OK Fails without OK OK Window error Play Sound OK Fails without OK error Fails without error - Adobe 38028779 | User Guide - Page 446
Call JavaScript The Call JavaScript action lets you use the Behaviors panel to specify that a custom function or line of JavaScript code should be executed when an event occurs. (You can write the JavaScript yourself, or you can use code provided by various freely available JavaScript libraries on - Adobe 38028779 | User Guide - Page 447
To use the Change Property action: 1 Select an object and open the Behaviors panel. 2 Click the Plus (+) button and choose Change Property from the Actions pop-up menu. 3 From the Type of Object pop-up menu, choose the type of object whose property you want to change. The Named Object pop-up menu - Adobe 38028779 | User Guide - Page 448
the best option for browsers other than Navigator and IE because most do not support JavaScript-and if they cannot read this behavior, they will stay on the page URL, you must enter the http:// prefix in addition to the www address. 10 Click OK. 11 Check that the default event is the one you want. If - Adobe 38028779 | User Guide - Page 449
detect specific plugins in Internet Explorer using JavaScript. However, selecting Flash or Director will add the appropriate VBScript code to your page ; visitors without the plugin will often be prompted by the browser to download the plugin. If the plugin content is not essential to your page - Adobe 38028779 | User Guide - Page 450
pop-up menu. A parameters dialog box appears. 6 Choose a movie from the Movie pop-up menu. Dreamweaver automatically lists the names of all Shockwave and Flash movies in the current document. (Specifically, Dreamweaver lists movies with file names ending in .dcr, .dir, .swf, or .spl that are in object - Adobe 38028779 | User Guide - Page 451
Drag Layer The Drag Layer action lets the visitor drag a layer. Use this action to create puzzles, slider controls, and other movable interface elements. You can specify in which direction the visitor can drag the layer (horizontally, vertically, or in any direction), a target to which the visitor - Adobe 38028779 | User Guide - Page 452
. Larger values make it easier for the visitor to find the drop target. 10 For simple puzzles and scenery manipulation, you can stop here. To define the the Show Events For pop-up menu. Remember that layers are not supported by 3.0 browsers. Note: You cannot attach the Drag Layer action to an object - Adobe 38028779 | User Guide - Page 453
Gathering information about the draggable layer When you attach the Drag Layer action to an object, Dreamweaver inserts the MM_dragLayer() function into the head section of your document. In addition to registering the layer as draggable, this function defines three properties for each draggable - Adobe 38028779 | User Guide - Page 454
To prevent re-registration of snapped layers: 1 Make a backup copy of your document before making any changes to the code. (You can do this in the Site window in Dreamweaver, or in Windows Explorer (Windows) or the Finder (Macintosh).) 2 Choose Edit > Find. 3 Choose HTML Source from the Find What - Adobe 38028779 | User Guide - Page 455
5 Repeat steps 3 and 4 to open additional documents in other frames. 6 Click OK. 7 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Jump Menu - Adobe 38028779 | User Guide - Page 456
Jump Menu Go The Jump Menu Go action is closely associated with the Jump Menu action; Jump Menu Go lets you associate a Go button with a jump menu. (Before you use this action, a jump menu must already exist in the document.) Clicking the Go button opens the link that's selected in the jump menu. A - Adobe 38028779 | User Guide - Page 457
To use the Open Browser Window action: 1 Select an object and open the Behaviors panel. 2 Click the Plus (+) button and choose Open Browser Window from the Actions pop-up menu. 3 Click Browse to select a file, or enter the URL you want to display. 4 Set any of the following options: Window Width - Adobe 38028779 | User Guide - Page 458
over a link, or you might want to play a music clip when the page loads. Note: Browsers may require some kind of additional audio support (such as an audio plugin) to play sounds. Therefore, different browsers with different plugins often play sounds differently. It's difficult to reliably predict - Adobe 38028779 | User Guide - Page 459
behaviors, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear. Note: The Swap Images option in the Swap Image dialog box, so you do not need to manually add Preload Images when using Swap Image. To use the Preload Images action: - Adobe 38028779 | User Guide - Page 460
Set Nav Bar Image Use the Set Nav Bar Image action to turn an image into a navigation bar image, or to change the display and actions of images in a navigation bar. (For more information, see "Inserting a navigation bar" on page 372.) Use the Basic tab of the Set Nav Bar Image dialog box to create - Adobe 38028779 | User Guide - Page 461
Set Text of Frame The Set Text of Frame action allows you to dynamically set the text of a frame, replacing the content and formatting of a frame with the content you specify. The content can include any valid HTML code. Use this action to dynamically display information. Although the Set Text of - Adobe 38028779 | User Guide - Page 462
Set Text of Layer The Set Text of Layer action replaces the content and formatting of an existing layer on a page with the content you specify. The content can include any valid HTML source code. Set Text of Layer replaces the content and formatting of the layer, but retains layer attributes, - Adobe 38028779 | User Guide - Page 463
Set Text of Status Bar The Set Text of Status Bar action shows a message 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. To see an example of a - Adobe 38028779 | User Guide - Page 464
Set Text of Text Field The Set Text of Text Field action replaces the content of a form's text field with the content you specify. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces - Adobe 38028779 | User Guide - Page 465
Show-Hide Layers The Show-Hide Layers action shows, hides, or restores the default visibility of one or more layers. This action is useful for showing information as the user interacts with the page. For example, as the user rolls the mouse pointer over an image of a plant, you could show a layer - Adobe 38028779 | User Guide - Page 466
To create a preload layer: 1 Click the Draw Layer button in the Common category of the Objects panel and draw a large layer in the Document window's Design view. Be sure the layer covers all the content on the page. 2 In the Layers panel, drag the layer name to the top of the list of layers to - Adobe 38028779 | User Guide - Page 467
10 Click OK. 11 Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is Images option to load the new images into the browser's cache when the page is loaded. This prevents delays caused by downloading when it is time for the images to appear. Using Behaviors 467 - Adobe 38028779 | User Guide - Page 468
10 Click OK. 11 Check that the default event is the one you want. If left the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore action manually. Go to Timeline Frame The Go to Timeline Frame action moves the playback head to the specified frame. - Adobe 38028779 | User Guide - Page 469
7 If you are adding this action in the Behavior channel of a timeline and want a portion of the timeline to loop, enter the number of times the segment should loop in the Loop field. You must leave this field blank if you are not attaching Go to Timeline Frame to a frame in a timeline. 8 Click OK. 9 - Adobe 38028779 | User Guide - Page 470
Validate Form The Validate Form action checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this action to individual text fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with - Adobe 38028779 | User Guide - Page 471
. 9 Click OK. If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events pop-up menu. 10 If you are validating individual fields, check that the default event is onBlur or onChange. If it isn't, select onBlur or onChange from the pop - Adobe 38028779 | User Guide - Page 472
472 Chapter 18 - Adobe 38028779 | User Guide - Page 473
19 CHAPTER 19 Debugging JavaScript Code Macromedia Dreamweaver JavaScript Debugger allows you to uncover errors in your client-side JavaScript code. You can write the code using Dreamweaver Code view (or Code inspector), then run the debugger to check your code for syntax and logical errors. A - Adobe 38028779 | User Guide - Page 474
Running the debugger After you write your code, you can start the JavaScript Debugger to check for errors. The debugger checks for syntax errors first, then opens your page in the browser so you can check for logical errors. To start debugging: 1 Choose File > Debug in Browser, then select the - Adobe 38028779 | User Guide - Page 475
Finding syntax errors If the debugger finds syntax errors, it stops and lists the errors in the JavaScript Syntax Errors window. To view the error description: Select an error in the JavaScript Syntax Errors window. A description of the error will appear in the Detailed Description area. To go to the - Adobe 38028779 | User Guide - Page 476
Finding and fixing logical errors When the debugger finds logical errors, the JavaScript Debugger window opens. A breakpoint (similar to an alert) is automatically set in the first line of your code. The debugger stops executing at each breakpoint, giving you the opportunity to view the values of - Adobe 38028779 | User Guide - Page 477
Setting breakpoints A breakpoint marks a spot in the code where you want the program execution to stop. When you set a breakpoint, it is marked with a small red dot in the left margin of the JavaScript Debugger window. When the program stops executing at that breakpoint, a small arrow appears over - Adobe 38028779 | User Guide - Page 478
To remove all breakpoints, do one of the following: • In the JavaScript Debugger window, click the Remove All Breakpoints button. • In the Code view (or Code inspector), select Remove All Breakpoints from the Code Navigation pop-up menu in the toolbar or choose Edit > Remove All Breakpoints. - Adobe 38028779 | User Guide - Page 479
Watching and editing variable values To check the values of your variables as you step through the code, you use the Dreamweaver variable list located in the bottom pane of the JavaScript Debugger window. You enter variable names in the left column; the right column lists the current values of each - Adobe 38028779 | User Guide - Page 480
To remove a variable list item: 1 Select the item in the variable list. 2 Click the Minus (-) button. To edit a value: 1 Select the item in the variable list. 2 Click the value in the value list. 3 Edit the value by typing in the text box that appears. 480 Chapter 19 - Adobe 38028779 | User Guide - Page 481
20 CHAPTER 20 Creating Forms Forms allow you to interact with or gather information from visitors to your site. For example, you can ask for a user's name and e-mail address, or have visitors take a survey, sign a guest book, or provide feedback on your site. Forms have two parts: HTML source - Adobe 38028779 | User Guide - Page 482
About CGI scripts Forms are usually processed by CGI (Common Gateway Interface) scripts. CGI is a standardized way of sending information between a server and a processing script. CGI scripts are typically written in Perl or some other programming language such as C++, Java, VBScript, or JavaScript. - Adobe 38028779 | User Guide - Page 483
Insert Checkbox inserts a checkbox in a form. Checkboxes allow multiple responses in a single group of options, a user can select as many options as apply. Insert Radio Button inserts a radio button in a form. Radio buttons represent exclusive choices. Selecting a button within a group deselects all - Adobe 38028779 | User Guide - Page 484
To add a form to a document: 1 In the document, place the insertion point where you want the form to appear, then do one of the following: • In the Objects panel's Forms category, select the Insert Form icon. • Choose Insert > Form. When a form is created a dotted red outline appears in the Document - Adobe 38028779 | User Guide - Page 485
4 In the Action field, specify the path to the URL where the processing script or application that will process the form information resides, by doing one of the following: • Click the folder icon, then navigate to the appropriate folder. • Type the complete path to the folder. If you're specifying a - Adobe 38028779 | User Guide - Page 486
Creating text fields A text field is a form object in which users type a response. There are three types of text fields: Single-line text fields are typically used to provide a single word or short phrase response, such as a name, or an address. Multiple-line text field provides a visitor with a - Adobe 38028779 | User Guide - Page 487
To create a single-line or a password text field: 1 Place the insertion point inside the form outline, then do one of the following: • Choose Insert > Form Object > Text Field. • In the Objects panel's Forms category, click the Insert Text Field icon. A text field appears in the document. 2 In the - Adobe 38028779 | User Guide - Page 488
To create a multiple-line text area: 1 Place the insertion point inside the form outline, then do one of the following: • Choose Insert > Form Object > Text Field. • In the Objects panel's Forms category, click the Insert Text Field icon. A text field appears in the document. 2 In the Property - Adobe 38028779 | User Guide - Page 489
with your server's administrator that anonymous file uploads are allowed before using the file field. If you insert a file field with Dreamweaver, you must manually insert ENCTYPE="multipart/form-data" into the form tag to ensure that the file is encoded properly. To create a file field in a form - Adobe 38028779 | User Guide - Page 490
Creating a hidden field Hidden fields aren't visible to your site visitors, they are invisible elements you place in a document to gather or send information. The hidden field information is passed back to the server when a form is submitted, and uses the name and value pair you define when you set up - Adobe 38028779 | User Guide - Page 491
Inserting checkboxes and radio buttons Use checkbox and radio button form objects to set up predefined selection objects. A user clicks a checkbox or radio button to make a choice. The difference between checkboxes and radio buttons is how they operate. With checkboxes users toggle each individual - Adobe 38028779 | User Guide - Page 492
Radio buttons work as a group and provide mutually exclusive selection values. Only one option in a radio button group may be selected. Inserting a checkbox Checkboxes allow the user to select more than one option from a set of options. Each checkbox form object is an individual element and must - Adobe 38028779 | User Guide - Page 493
Inserting a radio button Use radio buttons when the user must select only one choice from a set of options. Radio buttons are typically used in groups. All radio buttons in a group must have the same name and must contain different field values. To insert radio buttons: 1 Place the insertion point - Adobe 38028779 | User Guide - Page 494
sent to the server when a user selects this item. 9 To add another item to the options list, click the Plus (+) button, then repeat steps 7 and 8. 10 When you finish adding items to the list, click OK to close the List Values dialog box. The Property inspector appears. The option choices are - Adobe 38028779 | User Guide - Page 495
Creating a pop-up menu A pop-up menu allows you to set up multiple options in a confined space. Only one option choice is visible when the form loads in a browser. Users click the down arrow to display all the options in a menu. To create a pop-up menu: 1 Place the insertion point inside the form - Adobe 38028779 | User Guide - Page 496
About form buttons Form buttons control form operations. You can use a form button to submit data a user entered to a server for processing, or use a form button to reset a form, allowing users to correct information before submitting their data. You can also use a button to perform other processing - Adobe 38028779 | User Guide - Page 497
page. 4 In the Alt field, type text you want to appear in place of the image for text-only browsers or for browsers set to download images manually. Creating Forms 497 - Adobe 38028779 | User Guide - Page 498
About form design You can use line breaks, paragraph breaks, preformatted text, or tables to format your forms. You cannot insert a form in another form (that is, you cannot overlap tags), though you can include more than one form in a page. When designing forms, remember to label the form fields - Adobe 38028779 | User Guide - Page 499
can use (see "HTML and Web technologies resources" on page 25). You can modify those scripts to fit your needs. You can also ask your Internet service provider or Web team if there are any available CGI scripts that are already configured to run on your server. For an introduction to - Adobe 38028779 | User Guide - Page 500
Using behaviors with forms You can attach behaviors to forms and form objects by using any of the behaviors that appear in the Behaviors panel when the form or form object is selected. The Validate Form and Set Text of Text Field behaviors are available only if a text field has been inserted into the - Adobe 38028779 | User Guide - Page 501
problems early and avoid repeating them.) You want to make sure that your pages look and work as expected in the browsers you're targeting, that there are no broken links, and that the pages don't take too long to download. You can also test and troubleshoot that do not support styles, layers, plug - Adobe 38028779 | User Guide - Page 502
downloads. (See "Checking download time and size" on page 509; for more information on using layer behaviors to cover the screen while a page loads, see "Show-Hide Layers" on page 465.) • Run a few site reports to test and troubleshoot the entire site. You can check your entire site for problems - Adobe 38028779 | User Guide - Page 503
To run a target browser check: 1 Choose from the following options: • To run the check on the current document, save your file. The check is performed on the last saved version of the file and does not include unsaved changes. • To run the check on a directory or site, choose Window > Site Files to - Adobe 38028779 | User Guide - Page 504
Previewing in browsers It's a good idea to test your pages by previewing them in browsers often throughout the Web design and creation process. By using this strategy, you can catch errors early and not copy or repeat them. You can preview documents in your target browsers at any time; you don't - Adobe 38028779 | User Guide - Page 505
Setting Preview in Browser preferences Preview in Browser preferences display the currently defined primary and secondary browsers. To open Preview in Browser preferences, choose Edit > Preferences and select Preview in Browser, or choose File > Preview in Browser > Edit Browser List. Preview Using - Adobe 38028779 | User Guide - Page 506
a nonexistent file) on a large site can be a tedious and time-consuming problem. This is because a large site can contain hundreds of links to internal and are no longer linked to any file in the site) can be a problem too, because they may take up disk space and confuse other team members working - Adobe 38028779 | User Guide - Page 507
To check links in the entire site: 1 Choose Site > Check Links Sitewide. The Link Checker dialog box appears. 2 Select a specific link report from the Show pop-up menu. Your choices are Broken Links, External Links, and Orphaned Files. 3 A list of files that fit the report type you selected appears in - Adobe 38028779 | User Guide - Page 508
To fix links in the Property inspector: 1 In the Link Checker dialog box, double-click an entry in the File column. Dreamweaver opens the document, selects the offending image or link, and highlights the path and file name in the Property inspector. (If the Property inspector is not visible, choose - Adobe 38028779 | User Guide - Page 509
click Status Bar. 2 Choose a connection speed with which to calculate download time. The average connection speed in the United States is 28.8. and untitled documents. You can test and troubleshoot selected documents or an entire site for these HTML problems before you publish. Once a report is - Adobe 38028779 | User Guide - Page 510
alternative text. (Alternative text appears in place of images for text-only browsers or for browsers that have been set to download images manually.) • Redundant Nested Tags creates a report detailing nested tags that should be cleaned up. For example, The rain in Spain stays mainly - Adobe 38028779 | User Guide - Page 511
• Removable Empty Tags creates a report detailing all empty tags that can be removed in order to clean up the HTML code. For example, you may have deleted an item or image in Code view, but left behind the tags that applied to that item. • Untitled Documents creates a reporting listing all the - Adobe 38028779 | User Guide - Page 512
512 Chapter 21 - Adobe 38028779 | User Guide - Page 513
22 CHAPTER 22 Customizing Dreamweaver Macromedia Dreamweaver can be customized in many ways, allowing you to work in a manner that's familiar, comfortable, and efficient for you. The following are some of the ways you can customize Dreamweaver: • Set preferences for everything from color schemes - Adobe 38028779 | User Guide - Page 514
Changing the default file type By default, Dreamweaver shows all the file types it recognizes in the File > Open dialog box. You can use a pop-up menu in that dialog box to limit the display to certain types of files. If most of your work involves a specific file type (such as ASP files), you can change - Adobe 38028779 | User Guide - Page 515
Modifying the Objects panel By default, the Objects panel is divided into several categories: Characters, Common, Forms, Frames, Head, Invisibles, and Special. (For information on the objects in these categories, see "Using the Objects panel" on page 80.) The categories correspond to folders in the - Adobe 38028779 | User Guide - Page 516
to be able to use it. For more information, see the Macromedia Exchange for Dreamweaver site. To package an extension, you must first download the Package Manager installer from that site, then install the Package Manager with the developer option. To create a simple object: 1 Create a new blank - Adobe 38028779 | User Guide - Page 517
5 Give your icon the same file name as your object file, but use .gif as the extension; then save the icon in the same directory as the object file. For example, if your object is called Copyright_Z.htm and you saved it in the Common directory, name your icon Copyright_Z.gif and save it in the Common - Adobe 38028779 | User Guide - Page 518
Modifying the Commands menu You can add certain kinds of commands to the Commands menu, and change their names, without editing the menus.xml file. Note: The term command has two meanings in Dreamweaver. Strictly speaking, a command is a particular kind of extension. In some contexts, however, - Adobe 38028779 | User Guide - Page 519
Rearranging menus and menu items By editing the menus.xml file, you can move menu items within a menu or from one menu to another, add separators to or remove them from menus, and move menus within a menu bar or even from one menu bar to another. Note that you can move items into or out of context - Adobe 38028779 | User Guide - Page 520
To move a menu: 1 Quit Dreamweaver. 2 Make a backup copy of the menus.xml file. 3 Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad. (Don't open it in Dreamweaver.) 4 Cut an entire menu and its contents, from the opening tag to the closing tag. 5 Place the insertion - Adobe 38028779 | User Guide - Page 521
Changing keyboard shortcuts If the default keyboard shortcuts aren't convenient for you, you can change or remove existing shortcuts or add new ones. The easiest way to do this is to use the Keyboard Shortcut Editor (see "Using the Keyboard Shortcut Editor" on page 90). However, you can also modify - Adobe 38028779 | User Guide - Page 522
About menus.xml tag syntax The menus.xml file contains a structured list of menu bars, menus, menu items, separators, shortcut lists, and keyboard shortcuts. These items are described by XML tags which you can edit in a text editor. Note: Be careful when making changes to menus. Dreamweaver ignores - Adobe 38028779 | User Guide - Page 523
Description Provides information about a menu bar in the Dreamweaver menu structure. Attributes name, {app}, id, {platform} name The name of the menu bar. Although name is a required attribute, you can give it the value "". app The name of the application in which the menu bar is available - Adobe 38028779 | User Guide - Page 524
Description Provides information about a menu or submenu to appear in the Dreamweaver menu structure. Attributes name, {app}, id, {platform} name The name of the menu as it will appear in the menu bar. To set the menu's access key (mnemonic) in Windows, use an underscore (_) before the access - Adobe 38028779 | User Guide - Page 525
app The name of the application in which the menu item is available. Valid values are "dreamweaver" and "ultradev". The default is for the menu item to be available in both Dreamweaver and UltraDev. key The keyboard shortcut for the command, if any. Use the following strings to specify modifier keys: - Adobe 38028779 | User Guide - Page 526
file The name of an HTML file containing JavaScript that controls the menu item. Specify a path to the file relative to the Configuration folder. (For example, the Help > Welcome menu item specifies file="Commands/Welcome.htm".) Note that the file attribute overrides the command, enabled, and checked - Adobe 38028779 | User Guide - Page 527
Description Indicates that a separator should be displayed at the corresponding location in the menu. Attributes {app} app The name of the application in which the separator is shown. Valid values are "dreamweaver" and "ultradev". The default is for the separator to be shown in both - Adobe 38028779 | User Guide - Page 528
Description Specifies a keyboard shortcut in the menus.xml file. Attributes key, {app}, {platform}, {file}, {arguments}, {command}, id, {name} key The key combination that activates the keyboard shortcut. For syntax details, see "" on page 524. app The name of the application in - Adobe 38028779 | User Guide - Page 529
Customizing the appearance of dialog boxes The dialog box layouts for objects, commands, and behaviors are specified as HTML forms; they reside in HTML files in the Configuration folder within the Dreamweaver application directory. You edit those forms just as you would edit any form in Dreamweaver; - Adobe 38028779 | User Guide - Page 530
Changing default HTML formatting The HTML source formatting profile determines how Dreamweaver formats the HTML source code for a document. The profile includes both the Code Format preferences (which you can easily set with Edit > Preferences; see "Setting code formatting preferences" on page 343 for - Adobe 38028779 | User Guide - Page 531
If you change the settings to , the Code view and Code inspector will display text paragraphs in the following way: A paragraph of text that is not indented from the left margin and that has one line break before and after the opening p tag, one line break before the closing p - Adobe 38028779 | User Guide - Page 532
(see "Checking for browser compatibility" on page 502). Each profile contains information about the HTML tags and attributes that a particular browser supports. A browser profile can also contain warnings, error messages, and suggestions for tag substitutions. Browser profiles are stored in the Con - Adobe 38028779 | User Guide - Page 533
do not supply a name, htmlTag is used in error messages. unsupportedAttribute is an attribute that is not supported. Any tags or attributes not specifically mentioned as supported attributes are assumed to be unsupported. Specify unsupported tags or attributes only when you want to create a custom - Adobe 38028779 | User Guide - Page 534
a browser profile for a new version of a browser, check the Macromedia Exchange for Dreamweaver site to see if Macromedia has supplied a browser profile that you can download and install using the Package Manager. 534 Chapter 22 - Adobe 38028779 | User Guide - Page 535
browser-profile formatting" on page 532. If you don't want to receive error messages about a particular unsupported tag, add it to the list of supported tags. If you do this, save the profile in a separate file with a new file name (such as Browsername x.x limited). Renaming the profile preserves - Adobe 38028779 | User Guide - Page 536
Exchange for Dreamweaver site. To package an extension, you must first download the Package Manager installer from that site, then install the Package Manager Bible by Danny Goodman (IDG) or JavaScript: The Definitive Guide by David Flanagan (O'Reilly). For information on using JavaScript to - Adobe 38028779 | User Guide - Page 537
Editing Dreamweaver commands All the commands in Dreamweaver menus, including those you create and save using the History panel (see "Creating new commands from history steps" on page 165), are implemented in JavaScript. This JavaScript code usually consists mostly of calls to functions provided by - Adobe 38028779 | User Guide - Page 538
Each tag database file defines the name, type, content model, rendering scheme, and icon for one or more custom tags. You can create any number of tag database files, but all of them must reside in the Configuration/ThirdPartyTags folder to be read and processed by Dreamweaver. Tag database files have - Adobe 38028779 | User Guide - Page 539
tag_type* Determines whether the tag is empty (as with img), or whether it contains anything between its opening and closing tags (as with code). This attribute is required for normal (non-string-delimited) tags. It's ignored for string--delimited tags, since they're always empty. Valid values are " - Adobe 38028779 | User Guide - Page 540
detect_in_attribute Indicates whether to ignore everything between start_string and end_string (or between opening and closing tags if those strings aren't defined) even when those strings appear inside attribute names or values. You should generally set this to "true" for string-delimited tags; the - Adobe 38028779 | User Guide - Page 541
How custom tags appear in the Design view How custom tags appear in the Design view of the Document window depends on the values of the tag_type and render_contents attributes of the tagspec tag. If the value of tag_type is "empty", the icon specified in the icon attribute appears. If the value of - Adobe 38028779 | User Guide - Page 542
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 - Adobe 38028779 | User Guide - Page 543
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 - Adobe 38028779 | User Guide - Page 544
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 ( - Adobe 38028779 | User Guide - Page 545
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 New document Open an HTML file Open in frame Close Save Save as Check links Exit/Quit Windows - Adobe 38028779 | User Guide - Page 546
Edit menu Action Undo Redo Cut Copy Paste Clear Select All Select parent tag Select child Find and Replace Find next Indent Code Outdent Code Balance Braces Launch External Editor Preferences Page views To toggle the display of Standard view Layout view Toolbar Windows Control+Z Control+Y or - Adobe 38028779 | User Guide - Page 547
Viewing page elements To toggle the display of Visual Aids Rulers Show Grid Snap to Grid Head content Page properties Windows Control+Shift+I Control+Alt+R Control+Alt+G Control+Alt+Shift+G Control+Shift+W Control+Shift+J Macintosh Command+Shift+I Command+Option+R Command+Option+G Command+Option+ - Adobe 38028779 | User Guide - Page 548
Action Character select left Character select right Move to page up Move to page down Select to page up Select to page down Select word left Select word right Move to start of line Move to end of line Move to top of code Move to end of code Select to top of code Select to end of code Windows Shift+ - Adobe 38028779 | User Guide - Page 549
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 - Adobe 38028779 | User Guide - Page 550
Formatting text Action Indent Outdent Format > None Paragraph Format Apply Headings 1 through 6 to a paragraph Alignment > Left Windows Control+] Control+[ Control+0 (zero) Control+Shift+P Control+1 through 6 Control+Shift+Alt+L Alignment > Center Control+Shift+Alt+C Alignment > Right Control+ - Adobe 38028779 | User Guide - Page 551
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 - Adobe 38028779 | User Guide - Page 552
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 - Adobe 38028779 | User Guide - Page 553
Working with images Action Change image source attribute Edit image in external editor Windows Double-click image Control-double-click image Macintosh Double-click image Command-double-click image Managing hyperlinks Action Create hyperlink (select text) Remove hyperlink Drag and drop to create - Adobe 38028779 | User Guide - Page 554
Debugging in browsers Action Debug in primary browser Debug in secondary browser Windows Alt+F12 Control+Alt+F12 Macintosh Option+F12 Command+Option+F12 Site management and FTP Action Create new file Create new folder Open selection Get selected files or folders from remote FTP site Put - Adobe 38028779 | User Guide - Page 555
Site map Action View site files Refresh Local pane Make root Link to existing file Change link Remove link Show/Hide link Show page titles Rename file Zoom in site map Zoom out site map Windows F8 Shift+F5 Control+Shift+R Control+Shift+K Control+L Delete Control+Shift+Y Control+Shift+T F2 Control+ - Adobe 38028779 | User Guide - Page 556
Inserting objects To insert Any object (image, Shockwave movie, and so on) Image Table Flash movie Shockwave Director movie Named anchor Windows Drag file from the Explorer or Site window to the Document window Control+Alt+I Control+Alt+T Control+Alt+F - Adobe 38028779 | User Guide - Page 557
Shift+F10 Shift+F9 F10 Shift+F2 F2 Command+Shift+F1 F4 Getting help Action Windows Using Dreamweaver Help Topics F1 Reference Shift+F1 Dreamweaver Support Center Control+F1 Macintosh F1 Shift+F1 Command+F1 Keyboard Shortcuts 557 - Adobe 38028779 | User Guide - Page 558
Folders Director Movie Check Out Selected Files or Folders Launch External Edit Style Sheet * * Editor Find and Replace * Insert Flash Movie * Find Next * (Macintosh only) Show/Hide Grids Snap to Grid (toggle) Replace * * * Italic (toggle) Show Invisibles Insert Image - Adobe 38028779 | User Guide - Page 559
Keyboard character Control (Windows) or Command (Macintosh) Control+Shift (Windows) or Command+Shift (Macintosh) Control+Alt (Windows) or Command+ Option (Macintosh) S Save Save All Split Table Cell T Quick Tag Editor Show Page Titles in Insert Table Site Toolbar U Preferences Put - Adobe 38028779 | User Guide - Page 560
+ Command+ Shift+ Shift Option Option (Macintosh) (Macintosh) (Macintosh) F1 Using Reference * Dreamweav er Help Dreamweave Reference * * r Support Panel Center F2 Layers Frames * Object panel * * * F3 Find again Behaviors * (Windows panel only) Property * * * Inspector - Adobe 38028779 | User Guide - Page 561
Function No modifier Shift Key F6 * F7 * F8 * * Check Spelling Check Links Selected Alt (Windows) or Option (Macintosh) Control (Windows) or Command (Macintosh) Control+ Control+ Control+ Shift Alt Shift+Alt (Windows) (Windows) (Windows) or or or Command+ Command+ Command+ Shift+ - Adobe 38028779 | User Guide - Page 562
562 Appendix - Adobe 38028779 | User Guide - Page 563
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 - Adobe 38028779 | User Guide - Page 564
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 - Adobe 38028779 | User Guide - Page 565
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 - Adobe 38028779 | User Guide - Page 566
294 creating, templates 377 creating colors and URLs 231 creating new Flash button templates 306 Creating radio buttons 493 creating reports 510 CSS 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 - Adobe 38028779 | User Guide - Page 567
detaching from 391 text, adding 234 download time 74 downloading behaviors 443 size, time estimates 509 libraries, exporting from Fireworks 285 Dreamweaver Support Center 16 E Edit button (image Style Sheet command 252 editing assets 227 Flash button objects 303 keyboard shortcuts 90 templates 377 - Adobe 38028779 | User Guide - Page 568
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 order 139 deleting 140 using with Design Notes 138 files downloading 143 getting from remote site 143 managing 108 putting 144 searching - Adobe 38028779 | User Guide - Page 569
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 Grayscale color palette 87 grid as guide 157 showing 174, 416 snap to 174 snapping layers to 416 spacing 174 - Adobe 38028779 | User Guide - Page 570
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 - Adobe 38028779 | User Guide - Page 571
images (continued) formats, supported 267 image maps 273 in tables 186 inserting 268 inserting in Layout 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 - Adobe 38028779 | User Guide - Page 572
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 - Adobe 38028779 | User Guide - Page 573
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 - Adobe 38028779 | User Guide - Page 574
374 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 - Adobe 38028779 | User Guide - Page 575
text colors 153 design 100 Design Notes, using with 134 download time, estimated 509 previewing in browsers 504 properties, and templates Flash objects 303 plugins checking 449 detecting 503 Netscape Navigator 314 playing in Document window 315 playing shortcuts 555 resizing 272 troubleshooting - Adobe 38028779 | User Guide - Page 576
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 - Adobe 38028779 | User Guide - Page 577
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 - Adobe 38028779 | User Guide - Page 578
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 - Adobe 38028779 | User Guide - Page 579
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 - Adobe 38028779 | User Guide - Page 580
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 - Adobe 38028779 | User Guide - Page 581
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 - Adobe 38028779 | User Guide - Page 582
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
-
1 -
2 -
3 -
4 -
5 -
6 -
7 -
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
-
147
-
148
-
149
-
150
-
151
-
152
-
153
-
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
-
162
-
163
-
164
-
165
-
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
-
178
-
179
-
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
-
190
-
191
-
192
-
193
-
194
-
195
-
196
-
197
-
198
-
199
-
200
-
201
-
202
-
203
-
204
-
205
-
206
-
207
-
208
-
209
-
210
-
211
-
212
-
213
-
214
-
215
-
216
-
217
-
218
-
219
-
220
-
221
-
222
-
223
-
224
-
225
-
226
-
227
-
228
-
229
-
230
-
231
-
232
-
233
-
234
-
235
-
236
-
237
-
238
-
239
-
240
-
241
-
242
-
243
-
244
-
245
-
246
-
247
-
248
-
249
-
250
-
251
-
252
-
253
-
254
-
255
-
256
-
257
-
258
-
259
-
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
-
268
-
269
-
270
-
271
-
272
-
273
-
274
-
275
-
276
-
277
-
278
-
279
-
280
-
281
-
282
-
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
-
302
-
303
-
304
-
305
-
306
-
307
-
308
-
309
-
310
-
311
-
312
-
313
-
314
-
315
-
316
-
317
-
318
-
319
-
320
-
321
-
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
-
330
-
331
-
332
-
333
-
334
-
335
-
336
-
337
-
338
-
339
-
340
-
341
-
342
-
343
-
344
-
345
-
346
-
347
-
348
-
349
-
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
-
358
-
359
-
360
-
361
-
362
-
363
-
364
-
365
-
366
-
367
-
368
-
369
-
370
-
371
-
372
-
373
-
374
-
375
-
376
-
377
-
378
-
379
-
380
-
381
-
382
-
383
-
384
-
385
-
386
-
387
-
388
-
389
-
390
-
391
-
392
-
393
-
394
-
395
-
396
-
397
-
398
-
399
-
400
-
401
-
402
-
403
-
404
-
405
-
406
-
407
-
408
-
409
-
410
-
411
-
412
-
413
-
414
-
415
-
416
-
417
-
418
-
419
-
420
-
421
-
422
-
423
-
424
-
425
-
426
-
427
-
428
-
429
-
430
-
431
-
432
-
433
-
434
-
435
-
436
-
437
-
438
-
439
-
440
-
441
-
442
-
443
-
444
-
445
-
446
-
447
-
448
-
449
-
450
-
451
-
452
-
453
-
454
-
455
-
456
-
457
-
458
-
459
-
460
-
461
-
462
-
463
-
464
-
465
-
466
-
467
-
468
-
469
-
470
-
471
-
472
-
473
-
474
-
475
-
476
-
477
-
478
-
479
-
480
-
481
-
482
-
483
-
484
-
485
-
486
-
487
-
488
-
489
-
490
-
491
-
492
-
493
-
494
-
495
-
496
-
497
-
498
-
499
-
500
-
501
-
502
-
503
-
504
-
505
-
506
-
507
-
508
-
509
-
510
-
511
-
512
-
513
-
514
-
515
-
516
-
517
-
518
-
519
-
520
-
521
-
522
-
523
-
524
-
525
-
526
-
527
-
528
-
529
-
530
-
531
-
532
-
533
-
534
-
535
-
536
-
537
-
538
-
539
-
540
-
541
-
542
-
543
-
544
-
545
-
546
-
547
-
548
-
549
-
550
-
551
-
552
-
553
-
554
-
555
-
556
-
557
-
558
-
559
-
560
-
561
-
562
-
563
-
564
-
565
-
566
-
567
-
568
-
569
-
570
-
571
-
572
-
573
-
574
-
575
-
576
-
577
-
578
-
579
-
580
-
581
-
582
 |
 |
macromedia
™
®
Using Dreamweaver