Download Print this page

MACROMEDIA 38028779 - Dreamweaver - Mac Using Manual

Professional html editor for visually designing and managing web sites and pages

page of 582

/ 582
Bookmarks

Advertisement

Quick Links

Download this manual

Using Dreamweaver

™

macromedia

®

Advertisement

Need help?

Need help?

Do you have a question about the 38028779 - Macromedia Dreamweaver - Mac and is the answer not in the manual?

Questions and answers

Summary of Contents for MACROMEDIA 38028779 - Macromedia Dreamweaver - Mac

Page 1 Using Dreamweaver ™ macromedia ®...
Page 2 Trademarks Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo &...
Page 3 CONTENTS INTRODUCTION System requirements ........12 Installing Dreamweaver .
Page 4 CHAPTER 2 About the Dreamweaver work area ......72 About the different views in Dreamweaver ..... .73 Working with colors .
Page 5 CHAPTER 5 Creating, opening, and saving HTML documents ....150 Setting document properties ....... .152 Selecting elements in the Document window .
Page 6 CHAPTER 9 Using the Assets panel ........222 Using favorite assets .
Page 7 CHAPTER 13 Inserting media objects ........297 Launching an external editor.
Page 8 CHAPTER 15 About document locations and paths ......354 Creating links ......... . .358 Managing links .
Page 9 CHAPTER 18 Using the Behaviors panel ........436 About events .
Page 10 CHAPTER 22 Changing the default ﬁle type .......514 Modifying the Objects panel ....... .515 Creating a simple object .
Page 11 INTRODUCTION ............
Page 12 The following hardware and software is required to run Dreamweaver. • An Intel Pentium processor or equivalent, 166 MHz or faster, running Windows 95, Windows 98, Windows 2000, Windows ME, or Windows NT (with Server Pack 3) • Version 4.0 or later of Netscape Navigator or Microsoft Internet Explorer •...
Page 13 Macromedia Dreamweaver includes a variety of resources to help you learn the program quickly and become proﬁcient in creating your own Web sites and pages. These resources include a printed book, online help pages, Guided Tour movies, a tutorial, and interactive lessons. You can also ﬁnd regularly updated tips, TechNotes, examples, and information at the Dreamweaver Support Center on the Macromedia Web site.
Page 14 Using Dreamweaver provides a printed alternative to Dreamweaver Help, and contains information on using Dreamweaver commands and features. Certain reference topics about program options are not included in the printed book; see Dreamweaver Help for information on those topics. If you purchased the Electronic 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/documentation.html.
Page 15 Dreamweaver Help includes the following components: enables you to see all of the information organized by subject. Click top-level entries to view subtopics. like a traditional printed index, can be used to ﬁnd important terms and go to related topics. allows you to ﬁnd any character string in all topic text.
Page 16 provides a Help button in each dialog box, or a question mark icon in inspectors, windows, and panels, that opens a relevant help topic. provides buttons you can click to move through topics. The right and left arrow buttons move to the previous or next topic in a section (following the topic order listed in the table of contents).
Page 17 The Web development workﬂow starts with the process of deﬁning a site’s strategy or goals, progresses to design (where you work out the look and feel of a prospective site), and moves into the production or development phase (where the site is built and pages are coded); the site is tested for functionality and to see if it meets its deﬁned objectives, and then the site is published.
Page 18 Most Web design projects start with storyboards or ﬂowcharts that are turned into sample pages. Use Dreamweaver to create mock-up sample pages as you work toward a ﬁnal design. Mock-ups usually show the design layout, site navigation, technical components, themes and color, and graphic images or other media elements.
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 ﬁles let you easily apply reusable content in your site.
Page 20 Your site is complete and ready for the world—but before you publish it on a server, you must test the site. Depending on the size of the project, client speciﬁcations, and kinds of browsers that visitors will use, you may need to move your site to a staging server where it can be tested and edited.
Page 21 Progress through “Dreamweaver Basics” on page 71, “Planning and Setting Up Your Site” on page 95, “Site Management and Collaboration” on page 107, and “Linking and Navigation” on page 353. To learn about formatting text and including images in your pages, read “Inserting and Formatting Text”...
Page 22 The following typographical conventions are used in this guide: • indicates HTML tag and attribute names as well as literal text used in examples. • indicates replaceable items (sometimes called Italic code font metasymbols) in code. • Bold roman text indicates text for you to enter verbatim. The new features in Dreamweaver 4 enhance HTML editing, make it easier to design pages, improve site and asset management, let you create your own Flash objects, streamline your workﬂow, improve team collaboration, and allow you to...
Page 23 lets you quickly design your Web pages by drawing boxes (tables or cells) to which you can add content. See “Drawing layout cells and tables” on page 170. make it easier for you to identify the editable regions in a template ﬁle.
Page 24 allows you to manage your site’s assets. You can see all the images, colors, external URLs, and scripts, as well as Flash, Shockwave, QuickTime, template, and library items in a central location. Preview assets, and then drag them right into place on your HTML document. Save commonly used assets in a favorites list and reuse them across sites.
Page 25 The following are some useful resources available on the Web: (http://www.w3.org/TR/REC-html40/) is the ofﬁcial speciﬁcation for HTML from the World Wide Web Consortium. (http://www.blooberry.com/indexdot/html/) is a comprehensive listing of HTML tags, attributes, and values, as well as their compatibility with the various browsers.
Page 26 (http://www.xml.com) provides information, tutorials, and tips about Extensible Markup Language (XML), as well as other Web technologies. , by Danny Goodman (IDG Books), comprehensively covers the JavaScript 1.2 language. , by David Flanagan (O’Reilly & Associates), provides reference information for every JavaScript function, object, method, property, and event handler.
Page 27 CHAPTER 1 ............
Page 28 Before you get started, watch the Guided Tour movies to familiarize yourself with the Web development process and with Dreamweaver features. In Dreamweaver, choose Help > Guided Tour. Click a movie title. Close the movie when you ﬁnish. Let’s start with a brief overview of the Dreamweaver work area. •...
Page 29 • Dreamweaver provides many ﬂoating 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. •...
Page 30 Next, view pages in the completed Web site to get an idea of what you’ll be working toward. If you haven’t already done so, launch Dreamweaver. In Dreamweaver, choose File > Open. In the ﬁle browsing dialog box, navigate to the Dreamweaver 4 folder (where you installed Dreamweaver); then navigate to Tutorial/Compass_Site.
Page 31 There are two ways you can work with the tutorial ﬁles—use a predeﬁned local site or deﬁne a local site. • If you’re new to Dreamweaver, you may want to deﬁne the local site for the tutorial so you’ll know how to set up a local site when you’re ready to work on your own sites.
Page 32 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 ﬁeld. • On the Macintosh, click Choose to select the Compass_Site folder. The Local Root Folder ﬁeld updates to display the path to the local site.
Page 33 Click OK to the cache message. The Site window now displays a list of all the folders and ﬁles in the local site. The list also acts as a ﬁle manager, allowing you to copy, paste, delete, move, and open ﬁles just as you would on a computer desktop.
Page 34 Now that a site structure is set up for storing pages and assets for the Compass site, you’ll create the ﬁrst 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.
Page 35 Though the document has a ﬁle name, notice it is still labelled Untitled Document; that’s because it needs an HTML document name, or page title. Deﬁning a page title helps site visitors identify the page they’re browsing: the page title appears in the browser title bar and in the bookmark list. If you create a document without a page title, the document appears in the browser with the title Untitled Document.
Page 36 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 the page;...
Page 37 In Layout view you can draw layout cells and layout tables to deﬁne 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 page layout you’re creating in this section of the tutorial.
Page 38 Move the pointer to the Document window; the mouse pointer changes to a drawing tool (looks like a small cross). Click in the upper left corner of the document, then drag to draw a layout cell. When you release the mouse, a layout cell appears in a layout table. The layout table expands to ﬁll the Document window, and deﬁnes the page layout area.
Page 39 To resize this layout cell, do one of the following: • In the Property inspector for the layout cell, type 510 in the Fixed ﬁeld to set the cell’s width to 510 pixels, then click in the document to see the cell width change. Note: •...
Page 40 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 reposition it in a document, follow these steps.
Page 41 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). You can select and move a layout table to other areas in a document. You cannot, however, move a layout table so that it overlaps another.
Page 42 Next add a layout cell for the Learn More About graphic. In the Objects panel, click the Draw Layout Cell icon. In the Document window, draw a new cell in the space below the navigation button table. Your page should look similar to this: In the last section you used cells to create a table.
Page 43 Now add layout cells into which you’ll add text about travel locations. In the Objects panel, click the Draw Layout Cell icon and move the pointer to the layout table you just drew. Draw a table cell approximately one-third the space in the table. Click the border of the layout cell to select it;...
Page 44 Now that you’ve laid out the areas of the page, you’ll add the graphical content, such as the logo, and rollover images. You’ll learn two ways to insert images in Dreamweaver—using Dreamweaver’s main menu and using the Objects panel. Click anywhere in the logo layout cell (the topmost layout cell). Clicking in a layout cell places the insertion point in the cell without selecting the cell.
Page 45 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 images: the image displayed when the page ﬁrst loads in the browser, and the image displayed when the pointer moves over the original image.
Page 46 Make sure the Preload Rollover Image option is selected so the rollover images load when the page loads in the browser, ensuring a quick transition between images when a user moves the pointer over the original image. Click OK to close the dialog box. The image appears in the document.
Page 47 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. Press F12 to see your document in a Web browser.
Page 48 Now you’ll add text in the cells of the bottom layout table. In Dreamweaver, you can type content directly into a layout cell, or you can cut and paste content from another document into a layout cell. In this tutorial, you’ll add text to the layout cell by copying and pasting content from an existing text ﬁle to a layout cell.
Page 49 In the Property inspector’s second Format pop-up menu, which currently reads Default Font, select Verdana, Arial, Helvetica, sans-serif. In the Size pop-up menu, select 2. The text in your document automatically updates to reﬂect the changes. Repeat the above steps to select and format the text in the other two text- description layout cells.
Page 50 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 Layout tables in Layout view are <table>...
Page 51 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. Click in the cell that contains the Trip Planner image.
Page 52 Next, you’ll make changes to the cells that contain text. As you can see, the text is too close the edges of the cells. You’ll add padding to the cells to leave room between the text and cells. Click in the ﬁrst cell in the text description table. In the tag selector, click the rightmost <table>...
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.
Page 54 Images in the top area of the Compass home page guide visitors to speciﬁc pages in the site. Now you’ll add links for the navigation buttons. You’ll see that there are a number of ways to create links using Dreamweaver. First, you’ll add a link from the Trip Planner image to the TripPlanner.html page using the Property inspector.
Page 55 In the Property inspector, click the Drag to File icon (located to the right of the Link ﬁeld), then drag the pointer to the Site window; in the Local Folder List, point to the ﬁle DW4_Destinations.html. The ﬁle name appears in the Link ﬁeld in the Property inspector for the products image.
Page 56 You can’t test your links in Dreamweaver, you must check your links in a browser to make sure the pages operate as you expect. Press F12 to preview the page in a browser. Click the navigation buttons to check your links. Click your browser’s back button to return to your home page.
Page 57 Begin by opening the Assets panel. 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.
Page 58 You’ll start by using the Assets panel to insert two images in the page—a rock climber image and a text image. In the Assets panel, click the Images icon and make sure the Site radio button located at the top of the Assets panel is selected so you can view all of the images in the Compass site.
Page 59 Click the Play button in the Assets panel’s preview area to view the Flash movie. 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. Colors you apply to HTML elements, such as to text or as a background color, are automatically added to the color category of the Assets panel.
Page 60 Now, you’ll add the navigation button images to the favorites list. You can select multiple images in the Assets panel, then add them to your favorites at one time. In the Assets panel’s Images list click the ﬁrst navigation button image (MenuDestinations.gif ).
Page 61 Now you’ll create a Flash Text object to use as a title in your home page. In the Document window, place the insertion point above the image of the rock climber. In the Object panel, click the Insert Flash Text icon. The Insert Flash Text dialog box appears.
Page 62 The Flash Text object appears in the document. You must play the Flash object to see the text with its rollover effect. If it isn’t already expanded, in the Property inspector click the expander arrow to see all. In the Flash Text Property inspector, click Play. In the Document window, roll the pointer over the Flash Text object.
Page 63 In the Insert Flash Button dialog box, set the following options: • In the Style list, select Beveled Rect-Bronze. • For Button Text, type More Details. • For Font, select Verdana, or choose one of your favorite fonts. • For Size, type 11. •...
Page 64 In this section, you’ll create a template from an existing travel page and then use the template to create a new travel page. In the Site window’s Local Folder list, double-click the icon for DW4_TravelDetail_surf.html to open the ﬁle. Choose File > Save as Template. The Save As Template dialog box appears.
Page 65 Choose Modify > Templates > New Editable Region. The New Editable Region dialog box appears. In the Name ﬁeld, type titleCell as the name for this region of the template. Click OK. A template region is created. Notice the tab that contains the template region’s name.
Page 66 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. Choose File > New from Template to open a new document. In the Templates list in the Select Template dialog box, select myTravelDetail, then click Select to select the template you want to apply to the new page.
Page 67 Now you’ll update the myTravelDetail_mtnBike.html document, updating the editable regions with assets and text that refer to travel details about mountain biking in New Zealand. In the Document window, click the Flash placeholder in the titleCell region to select the object you want to replace. In the Property inspector’s File ﬁeld, click the folder icon;...
Page 68 Before posting your pages to a remote server you should always check your ﬁles. 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 ﬁle and for testing your pages.
Page 69 Click OK to close the dialog box. A Design Note icon appears in the Notes column in the Local Folder pane. 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 ﬁle.
Page 70 You can run site reports to check HTML ﬁle conditions and to manage workﬂow. Run reports at the document, folder, or site level. You’ll run a report to see if you have any untitled documents in your site. Choose Site > Reports. The Reports dialog box appears.
Page 71 CHAPTER 2 ............
Page 72 The Dreamweaver work area accommodates different styles of working and levels of expertise. Here are some of the most commonly used components: • The Document window displays the current document as you create and edit it. • The Launcher bar at the bottom right of the Document window contains buttons for opening and closing your most frequently used inspectors and panels.
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, use the Window menu. A check mark next to an item in the Window menu indicates that the named item is currently open (though it may be hidden behind other windows).
Page 74 In Design view, the Document window displays the current document approximately as it appears in a Web browser. The title bar of the Document window displays the page title and, in parentheses, the name of the root folder, the ﬁle name, and an asterisk if the ﬁle contains unsaved changes. The status bar, found at the bottom of the Document window, provides additional information about the document you are creating.
Page 75 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 ﬁt any of several common monitor sizes. To design a page that looks its best at a speciﬁc size, you can adjust the Document window to any of the predetermined sizes, edit those predetermined sizes, or create new sizes.
Page 76 Choose Edit Sizes from the Window Size pop-up menu. Click the blank space below the last value in the Width column. Enter values for Width and Height. To set the Width or Height only, simply leave one ﬁeld empty. Click the Description ﬁeld to enter descriptive text about the size you added. Click OK to save the change and return to the Document window.
Page 77 The Launcher bar contains buttons for opening and closing various panels, windows, and inspectors. You can also display the Launcher, a ﬂoating panel with identical buttons. Choose Window > Launcher. If the Launcher bar does not appear at the bottom of the Doc window, turn on the Show Launcher in Status Bar option in Status Bar preferences.
Page 78 The Dreamweaver toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a third view that comprises both Code and Design view. The toolbar also contains some common commands related to your view selection and your document’s status. The Options menu items (button located on the right) change depending on the view you select.
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 “Using the Code view (or Code inspector)”...
Page 80 The Objects panel contains buttons for creating and inserting objects such as tables, layers, and images. To show or hide the Objects panel, choose Window > Objects. Click the corresponding Objects panel button or drag the button’s icon into the Document window.
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 inserting the most commonly used objects, such as images, tables, and layers.
Page 82 The Property inspector lets you examine and edit properties for the currently selected page element. (A page element is an object or text.) You can select page elements in either the Document window or the Code inspector. To show or hide the Property inspector, choose Window > Properties. Most changes you make to properties are immediately applied in the Document window.
Page 83 Drag the tab (not the title bar) of one ﬂoating panel over another ﬂoating panel. When a highlighted border appears around the target panel, release the mouse button. Click any tab in the tabbed panel to bring the corresponding panel to the front. Because the Objects panel does not have a tab, you can’t dock it with another panel by dragging the Objects panel onto the other panel;...
Page 84 The History panel shows a list of all the steps you’ve performed in the active document since you created or opened that document. (The History panel doesn’t show steps you’ve performed in other frames, in other Document windows, or in the Site window.) It allows you to undo one or more steps;...
Page 85 Choose Window > History. 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. • Drag the slider to point to any step. • Click to the left of a step along the path of the slider;...
Page 86 Choose Edit > Preferences and select General from the Category list. Enter a number for Maximum Number of History Steps. The default value should be sufﬁcient for most users’ needs. The higher the number, the more memory the History panel requires. This can affect performance and slow your computer down signiﬁcantly.
Page 87 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. Click a color box in any dialog box or in the Property inspector. The color picker appears.
Page 88 In HTML, colors are expressed either as hexadecimal values (for example, ) or as color names ( ). A Web-safe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode. The conventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a Web-safe color.
Page 89 Use Fonts/Encoding preferences to set a default font encoding for new documents and to set the fonts that Dreamweaver uses to display each font encoding. A document’s encoding determines how the document is displayed in a browser. Dreamweaver font settings let you work with text in the font and size you prefer without affecting how the document appears when viewed by others in a browser.
Page 90 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 ﬁles. For more information on advanced customizing features, see “Customizing Dreamweaver”...
Page 91 is a menu that displays the sets of predetermined shortcuts that are included with Dreamweaver, and any custom sets you’ve deﬁned. By default, the current set is the one that Dreamweaver is using in the current doc. The predetermined sets are listed at the top of the menu. If you are familiar with the shortcuts found in Dreamweaver 3, you can use them by choosing the predetermined Dreamweaver 3 set.
Page 92 From the Commands pop-up menu, select the command category that contains the command shortcut you want to remove; for example, Site Menu Commands. The Command list displays the commands associated with that category. From the Command list, select the command shortcut you want to remove. You’ll see a list of shortcuts assigned to the commands.
Page 93 Extensions are new features that you can add easily to Dreamweaver 4. You can use many types of extensions; for example, there are extensions that let you reformat tables, connect to back-end databases, or help you write scripts for browsers. To ﬁnd the latest extensions for Dreamweaver, use the Macromedia Exchange Web site at http://www.macromedia.com/exchange/dreamweaver/.
Page 94 Click the download link found at the Web site for the extension you want. You can choose to open and install it directly from the site or save it to disk. • If you are opening it directly, the Package Manager handles the installation automatically.
Page 95 CHAPTER 3 ............
Page 96 Deciding what your site goals are is the very ﬁrst step you should take when you create a Web site. Ask yourself or your client questions about the site. What do you hope to accomplish by having a Web site? Write down your goals so that you remember them as you go through the design process.
Page 97 As you create your site, you should be aware of the variety of Web browsers your visitors are likely to use. Where possible, design sites for maximum browser compatibility, given other design constraints. There are over two dozen different Web browsers in use, most of which have been released in more than one version.
Page 98 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 ﬁles, or with related ﬁles scattered through a half-dozen similarly named folders.
Page 99 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 ﬁnd it. Designers sometimes place all of the non-HTML items to be used on a site in a folder called Assets. That folder may contain other folders—for example, an Images folder, a Shockwave folder, and a Sound folder.
Page 100 You save a lot of time later in the process if you plan your design and layout before you actually begin working in Dreamweaver. It can be as simple as creating a mock-up drawing of how you want the site layout to look on a piece of paper. A more advanced approach would be to create a composite drawing of your site using software such as Macromedia Freehand or Fireworks.
Page 101 Once you know what your design and layout will look like, you can create and gather the assets that you will need. Assets can be items such as images, text, or media (Flash, Shockwave, and more). Make sure you have all of these items gathered and ready to go before you begin developing your site.
Page 102 Once you create your site structure (see “Organizing the site structure” on page 98), you must designate the new site in Dreamweaver. Setting up this local site in Dreamweaver means that you can use Dreamweaver with FTP to upload your site to the Web server, automatically track and maintain your links, and collaboratively share ﬁles.
Page 103 Enter the following options: • In the Site Name ﬁeld, enter a name for the site. The site name appears in the Site window and on the Site > Open Site submenu. Use any name you like, it will not appear in the browser and is only for your reference. •...
Page 104 You can use Dreamweaver to edit an existing site on your local disk, even if you didn’t use Dreamweaver to create the original site. Choose Site > Deﬁne Sites and click New, or choose Site > Open Site > Deﬁne Sites. In the Site Deﬁnition dialog box that appears, the Local Info category is selected.
Page 105 You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there, even if you didn’t use Dreamweaver to create the original site. Note that even if you intend to edit only part of the remote site, you must locally duplicate the entire structure of the relevant branch of the remote site, from the remote site’s root folder down to the ﬁles you want to edit.
Page 106 Create a local folder to contain the existing site, then set it up as the local root folder for the site (see “Using Dreamweaver to set up a new site” on page 102). Set up a remote site, using information about your existing site. See “Setting up a remote site”...
Page 107 CHAPTER 4 ............
Page 108 Once you’ve published your site, you or someone on your team can continue to maintain it using these same tools. Before and after publishing, you’ll also want to troubleshoot your site on a continual basis. For more information, see “Testing and Publishing a Site”...
Page 109 displays the ﬁle structure of the remote and local sites in the panes of the Site window. (Which site is displayed in which pane, right or left, is determined by preference settings; see “Setting Site preferences” on page 110.) Site Files view is the default view for the Site window.
Page 110 transfers a copy of the ﬁle from the remote server to your local site (overwriting the existing local copy of the ﬁle, if any) and marks the ﬁle 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.
Page 111 speciﬁes which site (remote or local) is always shown, and in which Site window pane (left or right) the local and remote ﬁles appear. By default, the local site always appears on the right. Whichever pane is not chosen (the left one by default) is the changeable pane: this pane can display either the site map or the ﬁles in the other site (the remote site by default).
Page 112 Note that when a ﬁle is transferred as ASCII, your Line Breaks preference setting is ignored. See “Setting code formatting preferences” on page 343. Use the Site window for viewing local and remote sites, adding or removing site documents, or laying out the navigational structure of your site with a site map. For more information, see “About the Site window”...
Page 113 • Choose Window > Site Map. (If you previously viewed the map only, without the site’s ﬁles, this displays the map only.) • In the Site window, click the Site Map button, or hold down the mouse button with the pointer over the Site Map button and select Map and Files from the pop-up menu.
Page 114 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. Choose Edit > Preferences and select the Site category. Do either of the following: •...
Page 115 Use the Site Files view to view local and remote sites as lists of ﬁles, to open ﬁles, to rename ﬁles, to add new folders or ﬁles 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 ﬁles (on either site) have been updated since the last time they were transferred.
Page 116 In the Site window, select the ﬁle or folder you want to rename and do one of the following to activate the name ﬁeld next to the ﬁle or folder: • Choose File > Rename (Windows) or Site > Rename (Macintosh) •...
Page 117 You must deﬁne 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. Choose Site > Deﬁne Sites. Choose New or Edit to deﬁne a new site or open an existing one. The Site Deﬁnition dialog box appears.
Page 118 By default, the site map displays the site structure two levels deep, starting from the current home page. Click the plus (+) and minus (-) signs next to a page to show or hide pages linked below the second level. By default, hidden ﬁles and dependent ﬁles are not displayed in the site map.
Page 119 Choose from the Column options: • In the Number of Columns ﬁeld, type a number to set the number of pages to display per row in the site map window. • In the Column Width ﬁeld, type a number to set the width in pixels of the site map columns.
Page 120 Select an HTML ﬁle 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. In the File Name ﬁeld of the Link to New File dialog box, type a ﬁle name.
Page 121 Click anywhere in the site map to deselect any ﬁles. Choose View > Refresh Local (Windows) or Site > Site Map View > Refresh Local (Macintosh). You can modify the layout of the site map to show or hide hidden and dependent ﬁles.
Page 122 You can view the details of a speciﬁc section of a site by making a branch the focus of the site map. Select the page you want to view and choose View > View as Root (Windows) or Site > Site Map View > View as Root (Macintosh). The site map is redrawn in the window as if the speciﬁed page were at the root of the site.
Page 123 Select the ﬁle in the Remote Site view of the Site window or open the ﬁle in a Document window. Choose Site > Locate in Local Site. (On Windows only, if the Site window is active, choose Edit > Locate in Local Site.) The ﬁle is highlighted in the Local Folder of the Site window.
Page 124 After you’ve created a local site, use the Deﬁne Sites command to add or change associated remote server information and Check In/Check Out preferences. Choose Deﬁne Sites from the current sites pop-up menu in the Site window, or choose Site > Deﬁne Sites. A dialog box appears listing currently deﬁned sites;...
Page 125 Enter the host name of the FTP host to which you upload ﬁles for your Web site. Your FTP host name is the full Internet name of a computer system, such as ftp.mindspring.com. Enter the full host name without any additional text; in particular, don’t add a protocol name in front of the host name.
Page 126 The host directory you specify in the Site Deﬁnition 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 ﬁles are uploaded to the wrong place and aren’t visible to visitors to the site.
Page 127 Dreamweaver lets you access source- and version-control applications from the Site window. You can connect to SourceSafe databases and servers or source- control systems that support the WebDAV protocol. Using the Site Deﬁnition dialog box, you select the a connection type or source- control system.
Page 128 In the URL ﬁeld, enter the complete URL to the directory on the WebDAV server that you want to connect to. This URL includes the protocol, port, and directory (if not the root directory)—for example, http://apache1/WebDAV/mysite. Enter your username and password in the appropriate ﬁelds. This information is for server authentication and is not related to Dreamweaver.
Page 129 In the Site Deﬁnition dialog box, select the Remote Info category. In the Access pop-up menu, choose SourceSafe Database. If you want, select Check Out Files when Opening to check out ﬁles automatically when opening. Click Info. The Open SourceSafe Database dialog box appears. In the Database Path ﬁeld, click Browse to browse for the VSS database you want, or enter the full ﬁle path.
Page 130 A Web server can be conﬁgured in a wide variety of ways. This section provides information on some common issues you may encounter in setting up a remote site, and how to resolve them. • The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel ﬁrewalls, and other forms of indirect server access.
Page 131 When working in a collaborative environment, you can check ﬁles in and out from local and remote servers and use Design Notes to add comments and notes for your team. Checking out a ﬁle is the equivalent of declaring “I’m working on this ﬁle now—don’t touch it!”...
Page 132 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. Choose Site >...
Page 133 Use the Site window or the Site menu in the Document window to check in and check out ﬁles on a remote server. If you’ve checked out a ﬁle but have decided not to edit it (or have decided to discard the changes you’ve made), you can undo a check out, to make the ﬁle on the server available to other team members to check out.
Page 134 Select the ﬁle and choose Site > Undo Check Out, or right-click (Windows) or Control-click (Macintosh) the ﬁle and choose Undo Check Out from the context menu. The local copy of the ﬁle becomes read-only, and any changes you’ve made to it are lost.
Page 135 You can create a Design Notes ﬁle for each document or template in your site. (Note that if you add Design Notes to a template, the documents created with the template do not inherit the Design Notes.) You can also create Design Notes for applets, ActiveX controls, images, Flash movies, Shockwave objects, and image ﬁelds in your documents.
Page 136 While the document is active in the Document window, choose File > Design Notes. You can also select the ﬁle in the Site window, and then choose File > Design Notes, or double-click on the Notes column. If the ﬁle resides on a remote site, you must ﬁrst check out or get the ﬁle, then select it in the local folder.
Page 137 Open Design Notes for a ﬁle or object. Click the All Info tab. Click the Plus (+) button. In the Name ﬁeld, enter the word status. In the Value ﬁeld, enter the status. If a status value already existed, it’s replaced with the new one. Click the Basic Info tab and note that the new status value appears in the Status pop-up menu.
Page 138 Choose Site > Deﬁne Sites. In the Deﬁne Sites dialog box, select the site and click Edit. In the Site Deﬁnition dialog box, click Design Notes. Click Clean Up. Dreamweaver prompts you to verify that it should delete any Design Notes that are no longer associated with a ﬁle in your site. (If you use Dreamweaver to delete a ﬁle that has an associated Design Notes ﬁle, the Design Notes ﬁle is deleted too, so usually orphan Design Notes ﬁles occur only if you delete or rename a ﬁle outside of Dreamweaver.)
Page 139 • Choose View > File View Columns in the Site window (Windows) or Site > Site Files View > File View Columns (Macintosh). • Choose > Deﬁne Sites, select a site, and click Edit. Then select File View Columns from the Site Deﬁnition Dialog box. •...
Page 140 In the File View Columns display of the Site Deﬁnition dialog box, click the Plus (+) button. In the Column Name ﬁeld, enter a name for your column. Choose a value from the Associate with Design Note pop-up menu, or type in your own.
Page 141 Use the Site > Reports command to improve collaboration among members of a Web team. You can run workﬂow reports that display who has checked out a ﬁle and which ﬁles have Design Notes associated with them. You can further reﬁne Design Note reports by specifying name/value parameters.
Page 142 Choose Site > Reports. The Reports dialog box appears. Choose an option from the Report On pop-up menu. You can choose to report on a document, an entire site, selected ﬁles in a site, or a speciﬁc folder. Under Workﬂow, select Design Notes. The Report Settings button becomes available.
Page 143 If you’re working in a collaborative environment, use the Check In/Check Out system to transfer ﬁles between local and remote sites (see “Using Check In/Check Out” on page 131). If you’re the only person working on the remote site, however, you can instead use the Get and Put commands to transfer ﬁles without checking them in or out.
Page 144 Choose Window > Site Files to open the Site window. At the top of the Site window, choose the desired site from the current sites pop-up menu. If you’re using FTP to transfer ﬁles, click Connect to open a connection to the remote server.
Page 145 To put only those ﬁles for which the local version is more recent than the remote version, see “Synchronizing the ﬁles on your local and remote sites” on page 146. Note: Choose Window > Site Files to open the Site window. At the top of the Site window, choose the desired site from the current sites list pop-up menu.
Page 146 Once you’ve created ﬁles in your local and remote sites, you can synchronize the ﬁles between the two sites. Use the Site > Synchronize command to transfer the latest versions of your ﬁles to and from your remote site. If your remote site is an FTP server (rather than a networked server), then synchronizing your ﬁles uses FTP.
Page 147 Choose whether to delete the ﬁles 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 ﬁles in your remote site for which there are no corresponding local ﬁles.
Page 149 CHAPTER 5 ............
Page 150 Dreamweaver offers various ways to create a document. You can create new, blank HTML documents; you can open an existing HTML document, even if it wasn’t created in Dreamweaver; or you can create a new document based on a template. You can also open non-HTML text ﬁles, such as JavaScript ﬁles, plain text e-mail ﬁles, or text ﬁles saved by word processors or text editors.
Page 151 Choose File > New from Template. A dialog box appears, listing the templates available for the current site. (You must create templates before you can create documents based on them; see “Creating templates” on page 377.) When you create a document based on a template, some parts of the document are locked so that they can’t be edited.
Page 152 Page titles, background images and colors, text and link colors, and margins are basic properties of every HTML document. The page title identiﬁes and names the document. A background image or color sets the overall appearance of the document. Text and link colors help site visitors distinguish regular text from hypertext and to see which links have been visited and which have not.
Page 153 To deﬁne an image or color for the page background, use the Page Properties dialog box. If you use both a background image and a background color, the color appears while the image downloads, and then the image covers up the color. If the background image contains any transparent pixels, the background color shows through.
Page 154 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 a visible element in the Document window, click the element or drag across the element.
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.
Page 156 Some HTML code doesn’t have a visible representation in a browser. For example, 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.
Page 157 Dreamweaver provides several kinds of visual guides to help you design documents and predict (approximately) how they will appear in browsers. You can do all of the following: • Instantly snap the Document window to a desired window size to see how the elements ﬁt on the page.
Page 158 Use a tracing image as a guide to re-create a page design that was mocked up in a graphics application. A tracing image is a JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position.
Page 159 Select an element in the Document window. 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. HTML ﬁles are made up of two main sections: the section and the section.
Page 160 Choose View > Head Content. Click one of the icons in the section to select it. Set or modify the properties of the element in the Property inspector. For information about the properties of speciﬁc elements, see the following topics in Dreamweaver Help: •...
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 you replay them.
Page 162 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. Click Replay. The selected steps are replayed in order, and a new step, labeled Replay Steps, appears in the History panel. You can apply a set of steps from the History panel to any object in the Document window.
Page 163 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. Select the ﬁrst image.
Page 164 Each open document has its own history of steps. You can copy steps from one document and paste them into another. Note: Closing a document clears its history. If you know you will want to use steps from a document after that document is closed, copy the steps with Copy Steps (or save them as a command;...
Page 165 You can save a set of history steps as a named command, which then becomes available in the Commands menu. Create and save a new command if there’s any chance you’ll want to use a given set of steps again in the future, especially if you want to use those steps again the next time you start Dreamweaver;...
Page 166 Dreamweaver allows you to record a temporary command for short-term use. The main differences between this approach and playing back steps from the History panel (see “Repeating steps” on page 161) are as follows: • The steps are recorded as you perform them, so you don’t have to select them in the History panel before playing them back.
Page 167 CHAPTER 6 ............
Page 168 Choose View > Table View> Layout View or click the Layout View button in the Objects panel. Show Layout Table Tabs is automatically enabled in Layout View. To turn off the table tabs when in Layout View, choose View > Table View > Show Layout Table Tabs. Note:...
Page 169 When you switch into Layout view, you can add layout cells to your page. These cells will help you block out your page layout. For example, you could draw a cell along the top of your page to hold a menu, a cell on the right side of the page for submenus, and a cell next to it to hold content.
Page 170 You can draw layout cells and tables on your page when in Layout view. If you create a layout cell ﬁrst, 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: Make sure you are in Layout view, then click the Draw Layout Cell button in the Layout category of the Objects panel.
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 other (within 8 pixels).
Page 172 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 (+). Position the mouse pointer on the page, then click and drag your mouse to create the layout table.
Page 173 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. Click the Draw Layout Table button in the Layout category of the Objects panel.
Page 174 You can turn on the Dreamweaver grid to use as a guide when you draw your layout. You can also have your layout automatically snap to the grid, and change the grid or control the snapping behavior by specifying grid settings. Choose View >...
Page 175 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”...
Page 176 Every cell and table in your layout can be moved or resized, which makes it easy to adjust your page layout. To use the Dreamweaver grid as a guide while you move or resize your cells and tables, see “Using the Dreamweaver grid” on page 174. Click the cell edge or hold down Control (Windows) or Command (Mac) and click anywhere in the cell.
Page 177 You can change the appearance of any layout cell or table in the Property Inspector. You can set content alignment, width and height, and background colors in the Property inspector. Click the cell edge or hold down Control (Windows) or Command (Mac) and click anywhere in the cell.
Page 178 You can set width and height, padding and spacing, and more in the Property inspector. Click the table tab or edge. Choose Window > Properties to open the Property inspector. Choose from the following appearance options: • To change the width, choose Fixed and type a width in pixels in the box, or choose Autostretch (see “Setting layout width”...
Page 179 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 speciﬁc numeric width, such as 300 pixels, and is displayed as a number.
Page 180 • Go to the top of the column that you want to set to autostretch and select Make Column Autostretch from the Column Header menu. Only one column can be autostretch. • Select the column, then click Autostretch in the Property inspector. When you set a column to autostretch, Dreamweaver will insert spacer images in the ﬁxed width columns to control the layout.
Page 181 A spacer image is a transparent image that does not show in the browser window, but is used to control spacing in autostretch tables. The spacer image maintains the width you set for each table and cell on the page. If you choose not to use spacer images in autostretch tables, columns will change size or even visually disappear completely if they do not contain content.
Page 182 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. Select Remove Spacer Image from the column header menu. The spacer image will be removed and the column may shift.
Page 183 CHAPTER 7 ............
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;...
Page 185 • In the Rows ﬁeld, specify the number of table rows. • In the Columns ﬁeld, specify the number of table columns. • In the Cell Padding ﬁeld, 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. •...
Page 186 Click in the cell in which you want to add an image. Click the Insert Image button in the Common category of the Objects panel, or choose Insert > Image. In the Select Image Source dialog box, select an image ﬁle. For information on setting image properties, see “Setting image properties”...
Page 187 From the Delimiter pop-up menu, select the delimiter format that matches the format of the document you’re importing. If you select Other, a ﬁeld appears to the right of the pop-up menu. Enter the delimiter that was used to separate the table data. Note: For Table Width, select one of the following options: •...
Page 188 • 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. •...
Page 189 • Press Control (Windows) or Command (Macintosh) and click in the table to add cells, rows, or columns to the selection. • Select multiple cells in the table, and then press Control (Windows) or Command (Macintosh) and click cells, rows, or columns to deselect individual cells.
Page 190 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. Select the table.
Page 191 • In the CellPad ﬁeld, specify the number of pixels between the cell content and the cell boundary (or wall). • In the CellSpace ﬁeld, specify the number of pixels between each table cell. When cell spacing and cell padding are not assigned speciﬁc values, Netscape Navigator, Microsoft Internet Explorer, and Dreamweaver all display the table as if cell spacing were set to 2 and cell padding were set to 1.
Page 192 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). •...
Page 193 Use the Format Table command to quickly apply a preset design to a table. You can then select options to further customize the design. Select the table and choose Commands > Format Table. In the dialog box that appears, choose a design scheme from the list on the left. The table updates to display a sample of the design.
Page 194 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. Select the table. Drag one of the selection handles to resize the table along that dimension. Dragging the corner handle resizes both dimensions.
Page 195 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 speciﬁc values for all of the columns or rows, either in pixels or as percentages of the table’s current dimensions, depending on how the table width is speciﬁed.
Page 196 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. Click in a cell where you want the new row or column to appear. Do one of the following: •...
Page 197 A nested table is a table within a table. You can conﬁgure a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. Do one of the following: •...
Page 198 Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. You can merge any number of adjacent cells—as long as the entire selection is rectangular—to produce a single cell that spans several columns or rows.
Page 199 Click in the cell or select a cell. Choose Modify > Table > Split Cell, or click the Split Cell button in the Property inspector. 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.
Page 200 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). Choose Edit >...
Page 201 You can perform a simple table sort based on the contents of a single column. You can also perform a more complicated table sort based on the contents of two columns. You cannot sort tables that contain attributes—that is, tables that contain merged cells.
Page 202 To export table data you create in Dreamweaver, you must save the data in a ﬁle 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 table is exported.
Page 203 CHAPTER 8 ............
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 choose.
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 navigation on every page in your site.
Page 206 There are two ways to create a frameset in Macromedia Dreamweaver: you can design it yourself, or you can select from several predeﬁned framesets. Choosing a predeﬁned frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to quickly insert a frame layout into your page.
Page 207 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, providing you with a visual indicator of the frame areas in your document.
Page 208 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 predeﬁned framesets in Dreamweaver also use nesting. For example, a document with three frames might display a company’s logo in a frame at the top of the document, navigation controls in a frame on the left side of a document, and content in a third frame.
Page 209 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 inspector.
Page 210 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 their properties. The Property inspector displays the properties of the selected frame or frameset.
Page 211 A frameset ﬁle and its associated frame ﬁles 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 ﬁles and the frameset page. When you use Dreamweaver to create frame documents, each new frame document is given a temporary ﬁle name—for example, UntitledFrame-1 for the frameset page, Untitled-1, Untitled-2, and so forth for the frame pages.
Page 212 Click in the frame to select it, then choose File > Save Frame or File > Save Frame As. Choose File > Save All Frames. This saves all open documents, including individual documents, frame documents, and frameset documents. Note: Frames and framesets each have a Property inspector. •...
Page 213 Choose Window > Properties to open the Property inspector. Click the expander arrow in the lower right corner to see all the properties. To name the frame, type a name in the Frame Name ﬁeld. Note: navigator Choose from the following frame options: •...
Page 214 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. Predeﬁned framesets are used to quickly apply a frameset to a document. Predeﬁned framesets share the following default property values: no borders, no scroll bars, and no resizing of frames when viewed in a browser.
Page 215 Select a frameset. 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. •...
Page 216 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. Click a frame border to select the frameset.
Page 217 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. Select the frame by Alt-clicking (Windows) or Option-Shift-clicking (Macintosh) or click the frame in the Frames panel. Set the following options in the Property inspector: •...
Page 218 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 targets for all the navigation menu links.
Page 219 Dreamweaver lets you specify content to display in older and text-based browsers that do not support frames. Dreamweaver inserts the content you specify in the frameset document using a statement similar to the following: When a browser that doesn’t support frames loads the frameset ﬁle, the browser displays only the content enclosed by the tags.
Page 220 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.
Page 221 CHAPTER 9 ............
Page 222 You can use the Assets panel in two different ways: as an easily accessible list of the assets in your site (the Site list), or as a way to organize the assets that you use most frequently (the Favorites list). The Assets panel automatically puts your site’s assets in the Site list.
Page 223 are JavaScript or VBScript ﬁles. Note that scripts in HTML ﬁles (rather than in independent JavaScript or VBScript ﬁles) do not appear in the Assets panel. For information on working with JavaScript in Macromedia Dreamweaver, see “Debugging JavaScript Code” on page 473. provide a way to use the same page layout on multiple pages, and to easily modify that layout on all pages at once.
Page 224 Certain changes don’t appear immediately in the Assets panel: • When you add an asset or remove one from your site, the changes aren’t reﬂected in the Assets panel until you refresh the Site list by clicking the Refresh Site List button. (If you add or remove an asset outside of Dreamweaver—using Windows Explorer or the Finder, for example—you must rebuild the site cache to make the change appear in the Assets panel.) •...
Page 225 Drag the splitter bar (between the preview area and the list of assets) up or down. Select one or more assets in the Site list. Click the Add to Favorites button. The assets are added to your Favorites list. To see the Favorites list, click Favorites at the top of the panel.
Page 226 Select the Colors category in the Assets panel. Select the color to apply. Click Apply. Select the URLs category in the Assets panel, and locate a URL to apply. Do one of the following: • Drag the URL from the panel to the selection in the Design view. •...
Page 227 The Assets panel allows you to select multiple assets at once. It also provides a quick way to begin editing assets. Select one of the assets by clicking it. Then select the other assets in one of the following ways: •...
Page 228 You may want to locate the ﬁle 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 current site. (The current site is the site that contains the active document.) To use an asset from the current site in another site, you must copy it to the other site.
Page 229 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 of the recognized assets in the site, this list can become cumbersome for some large sites.
Page 230 Select one or more assets (or a Favorites folder) in the Favorites list. 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.
Page 231 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 called CatalogImages.
Page 232 Click the Templates category button. Click the New Template button. For more information on creating new templates, see “Reusing Content with Templates and Libraries” on page 375. • Click the Library category button, then click the New Library Item button. •...
Page 233 CHAPTER 10 ............
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 intensive, it can be a convenient method of modifying formatting applied by HTML styles or CSS styles.
Page 235 Choose File > Import > Import Tabular Data, or choose Insert > Tabular Data. The Import Table dialog box appears. Browse for the ﬁle you want or enter its name in the text ﬁeld. Select the delimiter used when the ﬁle was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon, and Other.
Page 236 Certain special characters are represented in HTML by a name or a number, referred to as an . HTML includes entity names for characters such as the entity copyright symbol ( ) the ampersand ( ), and the registered-trademark symbol ( ).
Page 237 You can copy and paste HTML source code from another application or from the Code view itself. You can choose to have the HTML code copied and pasted as text or as code with tags intact, depending on how you copy and paste it. Copy the code from another application (like BBEdit or HomeSite) or from the Code view or Code inspector in Dreamweaver, and place the insertion point in the Code view.
Page 238 In Design view, place the insertion point on the line where you want to add a list of new items. Click the Bulleted or Numbered List buttons in the Property inspector, or choose Text > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or Deﬁnition List.
Page 239 Use the Property inspector or the Text menu to set or change font characteristics for selected text. Select the text. If no text is selected, the change applies to subsequent text you type. Choose from the following options: • To change the font, choose a font combination from the Property inspector or from the Text >...
Page 240 Use the Format pop-up menu in the Property inspector or the Text > Paragraph Format submenu to apply the standard paragraph and heading tags. (To redeﬁne the appearance of paragraph and heading tags, use CSS style sheets; see “Using CSS style sheets” on page 248.) Place the insertion point in the paragraph, or select some of the text in the paragraph.
Page 241 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. Select the text you want to align or simply insert the pointer at the beginning of the text.
Page 242 Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Text > Font submenu. Font combinations determine how a browser displays your Web page’s text. A browser uses the ﬁrst font in the combination that is installed on the user’s system; if none of the fonts in the combination are installed, the browser displays the text as speciﬁed by the user’s browser preferences.
Page 243 Choose Text > Font > Edit Font List. Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list. Repeat step 2 for each subsequent font in the combination. To add a font that is not installed on your system, type the font name in the text ﬁeld below the Available Fonts list and click the <<...
Page 244 An HTML style is deﬁned by one or more HTML tags (such as , , , and ) that apply formatting to text. The HTML 4.0 speciﬁcation released by the World Wide Web Consortium (W3C) in early 1998 discourages the use of HTML formatting tags in favor of CSS style sheets.
Page 245 Unlike CSS styles, HTML style formatting only affects text that you apply it to, or text that you create using a selected HTML style. If you change the formatting of an HTML style you have created, text that was originally formatted with that style is not updated.
Page 246 Select the formatted text. In the HTML Styles panel, click Clear Paragraph Style or Clear Selection Style. Clear Paragraph Style removes any formatting from the current text block in the document. Clear Selection Style removes any formatting from the selected text. Note: In the HTML Styles panel, deselect the checkbox to turn off the Auto Apply option.
Page 247 Make sure no text is selected in the Document window. In the HTML Styles panel, select a style, then do one of the following: • Click the triangle in the upper right corner of the panel to display the drop- down context menu.
Page 248 Choose Window > Site Files to open the Site window in Site Files view. In the right pane, open the site root folder, then open the Library folder. You’ll notice a ﬁle called styles.xml. This ﬁle contains all your HTML styles for the site.
Page 249 CSS style sheets reside in the area of a document. CSS styles can deﬁne the formatting attributes for HTML tags, ranges of text identiﬁed by a attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) speciﬁcation. Dreamweaver recognizes styles deﬁned in existing documents as long as they conform to CSS style guidelines.
Page 250 The Cascading Style Sheets speciﬁcation (CSS1), which is controlled by the World Wide Web Consortium, deﬁnes the CSS style properties (for example, font, color, padding, margin, word spacing) that control the appearance of Web page elements. You can set any CSS1 property using Dreamweaver. In Internet Explorer 4.0 and later, you can use a scripting language such as JavaScript or VBScript to change the positioning and CSS style properties of elements after the page has loaded.
Page 251 Select a document or site root-relative path. See “About document locations and paths” on page 354. Click Open. The style sheet is attached to your Dreamweaver document and its styles appear in the CSS Styles panel. Choose Window > CSS Styles, or click the CSS Styles icon in the Launcher. In the CSS Styles panel, right-click (Windows) or Control-click (Macintosh) and choose Edit Style Sheet from the pull-down menu.
Page 252 When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet. Your edits affect all the documents linked to the style sheet. Open any document that is linked to the external CSS style sheet you want to change.
Page 253 Enter a name, tag, or selector for the new style: • Custom style (class) names must begin with a period. If you don’t enter the period yourself, Dreamweaver enters it for you. These names can contain any combination of letters and numbers, but a letter must follow the period. For example, .myhead1.
Page 254 Custom (class) CSS styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. The CSS Styles panel displays the names of all available styles. Do not confuse CSS styles with options such as Bold or Variable in the Text > Style submenu;...
Page 255 When you apply two or more CSS styles to the same text, the styles may conﬂict 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 unless speciﬁc attributes conﬂict.
Page 256 CSS Styles preferences control how Dreamweaver writes the code that deﬁnes CSS styles. CSS styles can be written in a shorthand form that some people ﬁnd easier to work with. Some older versions of browsers do not correctly interpret the shorthand.
Page 257 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.
Page 258 Use the Check Spelling command in the Text menu to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values. By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, choose Edit > Preferences > General and select a different dictionary from the pop-up menu.
Page 259 In the Find or Replace dialog box that appears, use the Find In option to specify which ﬁles to search: • Current Document conﬁnes the search to the active document. This option is available only when you choose Find or Replace with the Document window active, or from the context menu in the Code inspector.
Page 260 Use the following options to expand or limit the search: • The Match Case option limits the search to text that exactly matches the case of the text you want to ﬁnd. For example, if you search for the brown derby, you will not ﬁnd Note: this text...
Page 261 Choose Edit > Find and Replace, and specify which ﬁles to search, as detailed in “Searching and replacing text, tags, and attributes” on page 258. Choose Speciﬁc Tag from the Search For pop-up menu. Choose a speciﬁc tag from the pop-up menu next to Search For pop-up menu, or choose [any tag].
Page 262 Use the Text (Advanced) option in the Find or Replace dialog box to search for speciﬁc text strings that are either within or not within a set of container tags. For example, you can search for the word Untitled between tags to ﬁnd all the untitled pages on your site.
Page 263 You can save search patterns for later use by clicking the Save Query button in the Find or Replace dialog box. Saving a query is a good idea if you regularly perform the same search and do not want to reconstruct the search pattern every time. For example, you might want to strip out nonstandard tags from documents created with another visual HTML editor, or to conﬁrm that all images in a ﬁle have , and...
Page 264 Regular expressions are patterns that describe character combinations in text. Use them in your searches to help describe concepts such as “sentences that begin with ‘The’” and “attribute values that contain a number.” The following table lists the special characters in regular expressions, their meanings, and usage examples. To search for text containing one of the special characters in the table, “escape”...
Page 266 Use parentheses to set off groupings within the regular expression to be referred to later; use $1, $2, $3, and so on (use ($) in the Find ﬁeld and use the backslash (\) in the Replace ﬁeld), to refer to the ﬁrst, second, third, and later parenthetical groupings.
Page 267 CHAPTER 11 ............
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.
Page 269 In the dialog box that appears, click Browse to choose a ﬁle, or type the path for the image ﬁle. If you are working in an unsaved document, Dreamweaver generates a ﬁle:// reference to the image ﬁle. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Page 270 speciﬁes a hyperlink for the image. Drag the Point-to-File icon to a ﬁle in the Site window, click the folder icon to browse to a document on your site, or type manually the URL path. aligns an image and text on the same line. See “Aligning elements” on page 271. speciﬁes alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually.
Page 271 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.
Page 272 You can visually resize elements such as images, plugins, Macromedia Shockwave or Flash movies, applets, and ActiveX controls in the Dreamweaver Document window. Visual resizing helps you determine how an element affects the layout at different dimensions. Resizing resets the attributes of the element.
Page 273 An image map is an image that has been divided into regions, or “hotspots”; when a hotspot is clicked an action occurs, for example a new ﬁle opens. Use the image Property inspector to graphically create and edit client-side image maps. Client-side image maps store the hyperlink information in the HTML document, not in a separate map ﬁle as do server-side image maps.
Page 274 To set where the linked ﬁle opens, type the name of the window in which the ﬁle should open in the Target ﬁeld. Alternatively, choose a frame name from the Target pop-up menu. In the Alt ﬁeld, type the text you want to appear as alternative text in text-only browsers.
Page 275 You can easily edit the hotspots you create in an image map. You can move a hotspot area, resize hotspots, or move a hotspot forward or back in layer. You can also copy an image with hotspots from one document to another, or copy one or more hotspots from an image and paste them on another image;...
Page 276 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 ﬁrst loads) and the rollover image (the image that appears when the pointer moves over the primary image).
Page 277 Choose File > Preview in Browser or press F12. In the browser, move the pointer over the original image. The display should switch to the rollover image. Dreamweaver makes it easy for you to design your HTML pages and work in an image editor to edit your graphics.
Page 278 You can use the Dreamweaver preference dialog box to specify which image editor to launch to edit images with speciﬁc ﬁle extensions. For example, you can tell Dreamweaver to launch Fireworks when you want to edit a GIF, and to launch a different image editor when you want to edit a JPEG.
Page 279 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. In the Extensions list, select the ﬁle extension you want to set an external editor for.
Page 280 You choose Edit > Preferences > File Types/Editor to set an external image editor for the image ﬁle types you specify. Once you’ve selected an external image editor, you can launch it and edit images while you work in your Dreamweaver document. •...
Page 281 CHAPTER 12 ............
Page 282 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 ﬁles into documents. From Fireworks, you can export ﬁles directly to a Dreamweaver site folder, or you can copy and paste HTML code into a Dreamweaver document.
Page 283 Select the Delete File After Insertion option to move the HTML ﬁle to the Recycle Bin (Windows) or Trash (Macintosh) when the operation is complete. Use this option if you no longer need the Fireworks HTML ﬁle after inserting it. This option does not affect the source PNG ﬁle associated with the HTML ﬁle.
Page 284 The File > Export command in Fireworks lets you export and save optimized images and HTML ﬁles to a location inside the desired Dreamweaver site folder. You can then open the ﬁles for editing in Dreamweaver. Alternatively, you can export Fireworks ﬁles as Cascading Style Sheet (CSS) layers or Dreamweaver library items.
Page 285 In Fireworks, choose File > Export. Choose Dreamweaver Library (.lbi) from the Save As pop-up menu. Name the ﬁle, and specify a destination folder named Library located at the Dreamweaver site root. If necessary, Fireworks prompts you to create this folder. Click Save to export your ﬁle.
Page 286 Dreamweaver 4 provides preferences for automatically launching speciﬁc applications to edit speciﬁc ﬁle types. To use the Fireworks launch-and-edit features, make sure that Fireworks 4 is set as the primary editor for GIF, JPEG, and PNG ﬁles in Dreamweaver. Although you can use earlier versions of Fireworks as external image editors, these versions offer limited launch-and-edit capabilities.
Page 287 Whenever you export a Fireworks ﬁle from a saved PNG source to a Dreamweaver site, Fireworks writes a Design Note that contains information about the ﬁle. For example, when you export a Fireworks table, Fireworks writes a Design Note for each exported slice ﬁle and for the HTML ﬁle that assembles the table slices.
Page 288 Launch-and-edit integration lets you use Fireworks to edit Fireworks-generated images and tables placed in a Dreamweaver document. Dreamweaver automatically launches Fireworks, letting you make the desired Fireworks edits to the image. The updates you make in Fireworks are automatically applied to the placed image in Dreamweaver.
Page 289 If prompted, specify whether to launch a source Fireworks ﬁle for the placed image. 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. When you are ﬁnished making edits, click Done in the document window.
Page 290 When you are ﬁnished making edits, click Done in the document window. Clicking Done exports HTML and image slice ﬁles for the table using the current optimization settings, updates the table placed in Dreamweaver, and saves the PNG source ﬁle. Fireworks exports and replaces only those HTML and image slice ﬁles that are needed to update the table in Dreamweaver.
Page 291 When you are ﬁnished 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 ﬁle if a source ﬁle was selected. If you changed the format of the image, the Dreamweaver link checker prompts you to update references to the image.
Page 292 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. In Fireworks, in the optimization dialog box, click the Animation tab. Use the following techniques to preview animation frames at any time: •...
Page 293 The File > Update HTML command in Fireworks provides an alternative to the launch-and-edit technique for updating Fireworks ﬁles placed in Dreamweaver. With Update HTML, you can edit a source PNG image in Fireworks and then automatically update any exported HTML code and image ﬁles placed in a Dreamweaver document.
Page 294 In Dreamweaver, choose Commands > Create Web Photo Album. In the Photo Album Title text ﬁeld, enter a title. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails. If desired, you may enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and Other Info text ﬁelds.
Page 295 Choose a Scale percentage for the large-size images. Setting Scale to 100% creates large-size images the same size as the originals. Note that the scale percentage is applied to all of the images; if your original images aren’t all the same size, scaling them by the same percentage may not produce the desired results.
Page 297 CHAPTER 13 ............
Page 298 In most cases, a dialog box appears letting you select a source ﬁle and specify certain parameters for the media object. Tip: Each Objects panel button inserts the necessary HTML source code to make the object or placeholder appear on the page. To specify a source ﬁle, set dimensions and other parameters and attributes, use the Property inspector for each object.
Page 299 Click the Plus (+) button above the Extensions list. Enter a ﬁle type extension (including the period at the beginning of the extension), or several related extensions separated by spaces. For example, you might enter .png .jpg. Select the ﬁle type extension in the Extensions list. Click the Plus (+) button above the Editors list.
Page 300 As with other objects in Dreamweaver, you can add Design Notes to a media object. Right-click (Windows) or Control-click (Macintosh) the object in the Document window. Note: Choose Design Notes from the context menu. Enter the information you want in the Design Note. You can also add a Design Note to a media object from the Site window by selecting the ﬁle, revealing the context menu, and choosing Design Notes from the context menu.
Page 301 If you use Flash to design your own Generator template ﬁles (see “Creating new button templates” on page 306), you can distribute these templates to members of your Web design team. They in turn can save these ﬁles to the Conﬁguration/ Flash Objects/Flash Buttons folder, then access these templates using the Flash button object.
Page 302 While in the Design view of the Document window, select Insert Flash Button from the Objects panel or choose Insert > Interactive Images > Flash Button. You can also drag the Flash button icon over to the Document window. The Insert Flash Button dialog box appears. Select the button style you want from the Style list.
Page 303 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. Click Apply or OK to insert the Flash button in the Document window. Tip: While in Design view, select the Flash button object.
Page 304 The Flash text object lets you create and insert a Flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and the text of your choice. With the Document window in Design view, select Insert Flash Text from the Objects panel or choose Insert >...
Page 305 If you want to associate a link with the Flash text object, enter a document- relative or absolute link in the Link ﬁeld. 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 ﬁle to the same directory as the HTML ﬁle.
Page 306 speciﬁes a background color for the object. accesses the Flash object dialog box. resets the selected button to the original movie size. lets you preview the Flash object in the Document window. Click the green Play button to see the object in Play mode; click the red Stop button to stop the movie and be able to edit the object.
Page 307 When you insert a Flash movie into a document, Dreamweaver uses both the tag (deﬁned by Internet Explorer for ActiveX controls) and the (deﬁned by Netscape Navigator) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the tags.
Page 308 To view the following properties in the Property inspector, select a Flash movie. The Property inspector initially displays the most commonly used properties. To see all properties, click the expander arrow in the lower right corner. speciﬁes a name to identify the movie for scripting. Enter a name in the unlabeled ﬁeld on the far left side of the Property inspector.
Page 309 Macromedia Generator provides a way to serve dynamic Web content. You can create Generator ﬁles with Flash 4 or 5 using free Generator authoring templates; the ﬁles are then served by a Web server running Generator server software. You can insert a Generator object into a Dreamweaver document. In the Document window, place the insertion point where you want to insert the object.
Page 310 Shockwave, the Macromedia standard for interactive multimedia on the Web, is a compressed format that allows media ﬁles created in Macromedia Director to be downloaded quickly and played by most popular browsers. The software that plays Shockwave movies is available as both a Netscape Navigator plugin and an ActiveX control.
Page 311 determines how the movie is aligned on the page. For a description of each option, see “Aligning elements” on page 271. speciﬁes a background color for the movie area. This color also appears while the movie is not playing (while loading and after playing). lets you see a preview of the movie in the Design view of the Document window.
Page 312 format, like WAV format, has good sound quality, can be played by most browsers, and don’t require a plugin; you can also record AIFF ﬁles from a CD, tape, microphone, and so on. However, the large ﬁle size severely limits the length of sound clips that you can use on your Web pages.
Page 313 Embedding audio incorporates the sound player directly into the page, but the sound only plays if visitors to your site have the appropriate plugin for the chosen sound ﬁle. Embed ﬁles if you want to use the sound as background music, or if you want more control over the sound presentation itself.
Page 314 After inserting content for a Netscape Navigator plugin, use the Property inspector to set parameters for that content. To view the following properties in the Property inspector, select a Netscape Navigator plugin object. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties.
Page 315 You can preview movies and animations that rely on Navigator plugins—that is, elements that use the tag—directly in the Design view of the Document window. (It is not possible to preview movies or animations that rely on ActiveX controls in the Document window.) You can play all plugin elements at one time to see how the page will look to the user, or you can play each one individually to ensure that you have embedded the correct media element.
Page 316 ActiveX controls (formerly known as OLE controls) are reusable components, somewhat like miniature applications, that can act like browser plugins. They run in Internet Explorer with Windows, but they don’t run on the Macintosh or in Netscape Navigator. The ActiveX object in Dreamweaver lets you supply attributes and parameters for an ActiveX control in your visitor’s browser.
Page 317 makes Dreamweaver add an tag within the tag for the ActiveX control. If the ActiveX control has a Netscape Navigator plugin equivalent, the tag activates the plugin. Dreamweaver assigns the values you’ve entered as ActiveX properties to their Netscape Navigator plugin equivalents.
Page 318 Java is a programming language that allows the development of lightweight applications (applets) that can be embedded in Web pages. After you create a Java applet, you can insert that applet into an HTML document using Dreamweaver. Dreamweaver uses the tag to mark the reference to the applet ﬁle.
Page 319 specify the amount of white space in pixels above, below, and on both sides of the applet. opens a dialog box for entering additional parameters to pass to the applet. Many applets respond to special parameters. Use the Parameters dialog box to enter values for special parameters deﬁned for Shockwave and Flash movies, ActiveX controls, Netscape Navigator plugins, and Java applets.
Page 320 You can add behaviors to your page to start and stop various media objects. lets you play, stop, rewind, or go to a frame in a Shockwave or Flash movie. See “Control Shockwave or Flash” on page 450. lets you play a sound. For example, you can play a sound effect whenever the user moves the mouse pointer over a link.
Page 321 CHAPTER 14 ............
Page 322 It can be useful to have a basic understanding of HTML when using Dreamweaver. You can easily see both the HTML code and the visual design at the same time, which gives you the opportunity to ﬁgure out how HTML code works.
Page 323 The required tags for every HTML document are , and The head section (surrounded by tags) contains only the page title (surrounded by tags) and programming scripts, such as JavaScript code that implements an image rollover in your page. The text that you put between will appear in the top title bar of the browser window.
Page 324 The body of your document contains the content of your page. All your text, images, tables, and other content must be placed between All of the tags in the body section of the example can be used to format your content.
Page 325 —that is, through tags—mark the text as headings. Headings are typically displayed in the Web page with larger or bolder text than normal body text; is the largest and is the smallest. You always need the opening tag in front of your content, followed by the closing tag at the end of the content, as in this example: ( ) separate your text content into paragraphs.
Page 326 insert images in your page. An image tag follows the format ; you must put the ﬁle name of the image between imagefilename quotation marks. Image tags also have attributes that you can use, such as , and . The attributes specify the size of your image for the Web browser to interpret;...
Page 327 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. Place the insertion point where you want the comment, either in the Code view (or Code inspector) or Design view.
Page 328 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 speciﬁc tags, objects, or styles that you are working with in the Code view (or Code inspector). Select the tag, object, or style in the Code or Design view that you want information about.
Page 329 The Tag, Object, or Style (depending on which book you have selected) pop-up menu displays the tag, object, or style that you selected in the Code view (or Code inspector). To view information about another tag, object, or style, select a new one from the menu.
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 following would be marked erroneous: •...
Page 331 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. Choose View > Code and Design, or click the Show Code and Design Views button on the toolbar.
Page 332 • To display the Design view on top, choose View > Design View on Top. Alternatively, select Design View on Top from the Options pop-up menu in the toolbar. • To view only HTML code in the Document window, choose View > Code or click the Show Code View button in the toolbar.
Page 333 You can set word wrapping, code indenting, syntax coloring and more from the Options menu in the code editors. To access the Options menu, the Code view (or Code inspector) must be active. Click in the Code view (or Code inspector) to make it active. Access the options by doing one of the following: •...
Page 334 As you write and edit your code in the Code view (or Code inspector), you can indent speciﬁc lines of code or check to make sure your tags are balanced. Indenting a speciﬁc line or section of code will help you separate that code from the rest, making it easier to ﬁnd.
Page 335 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 ﬁles in Dreamweaver Code view. Dreamweaver does not alter or rewrite the ﬁle.
Page 336 You can edit a script in a code editor or the Design 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. Select the Script marker.
Page 337 Place the insertion point in the nested code you want to check. 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.
Page 338 When you open a non-HTML ﬁle (for example, a .js ﬁle) in Dreamweaver, Dreamweaver does not alter it. These ﬁles open in the Code view (or Code inspector), with the Design view disabled. You can edit the ﬁle and save it as an HTML ﬁle or a non-HTML ﬁle.
Page 339 Click in the Design view to place the insertion point where you want to insert code. Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property inspector. The Quick Tag Editor opens. Enter the HTML tag, then press Enter. The tag is inserted into your code.
Page 340 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. Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property inspector.
Page 341 While in the Quick Tag Editor, you can access an attributes hint menu that lists all the valid attributes of the tag you are editing or inserting. (If Dreamweaver doesn’t recognize the tag you’re editing, the hints menu contains all the attributes that Dreamweaver recognizes for any tag.) The hints menu does not appear if you deselected the Enable Tag Hints option in Quick Tag Editor preferences.
Page 342 Use Tab, the arrow keys, and the Spacebar to move the insertion point to where you want to add an attribute. Type a valid attribute name for the tag. If you pause in typing, the hints menu appears. You can remove a tag from your document, leaving its content (if any) in place. Do one of the following: •...
Page 343 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. •...
Page 344 speciﬁes the color for all other keywords. To override this color, set the Tag Speciﬁc option. speciﬁes the color for all strings in your code. To override this color, set the Tag Speciﬁc option. allows you to override the other color settings by specifying colors for speciﬁc tags.
Page 345 determines the size of indents. The size is measured in spaces if Use is set to spaces, or in tabs if Use is set to tabs. determines the size of tabs (measured in character spaces). adds “hard” returns once a line reaches the speciﬁed column width.
Page 346 Code Rewriting preferences determine what Dreamweaver does while opening HTML or script documents. (These preferences have no effect when you edit HTML or scripts in the Code view or Code inspector.) If you turn off these rewriting options, Dreamweaver displays invalid markup items in the Document window for HTML that it would have rewritten.
Page 347 Use the Clean Up HTML command to remove empty tags, combine nested tags, and otherwise improve messy or unreadable HTML code. Open an existing document and choose Commands > Clean Up HTML. In the dialog box that appears, select from the following options: •...
Page 348 The HTML source formatting options that you specify in HTML Format preferences and the SourceFormat.txt ﬁle apply only to any subsequent new documents that you create with Dreamweaver. To apply these formatting options to existing HTML documents, use the Apply Source Formatting command. Choose File >...
Page 349 Choose which options the Clean Up Word HTML feature should use. The Basic tab displays the following options: • Remove all Word Speciﬁc Markup removes all Word-speciﬁc HTML, including XML from tags, Word custom meta data and link tags in the head of the document, Word XML markup, conditional tags and their contents, and empty paragraphs and margins from styles.
Page 350 You may want to use a text editor to hand-code large amounts of HTML, JavaScript, or VBScript. You can use any external text editor with Dreamweaver, including Notepad (bundled with Windows 95 and NT) or SimpleText (bundled with the Macintosh), BBEdit, HomeSite, vi, emacs, and TextPad. See “Using an external text editor with Dreamweaver”...
Page 351 When BBEdit integration is turned on, once you have a document open in both BBEdit and Dreamweaver, switching from one application to the other automatically updates the document with the latest changes. In addition, both programs track the current selection; for example, you can make a selection in Dreamweaver and then switch to BBEdit, where the same element will be selected.
Page 352 Dreamweaver displays icons to identify blocks of ColdFusion Markup Language (CFML) or Active Server Pages (ASP) code in the Design view whenever possible. Note: Click the yellow ASP marker to select it. In the Property inspector, click the Edit button. Edit the ASP code in the dialog box that appears, and then click OK.
Page 353 CHAPTER 15 ............
Page 354 Understanding the ﬁle path between the document you’re linking from and the document you’re linking to is essential to creating links. Each Web page has a unique address, called a Uniform Resource Locator (URL). (For detailed information on URLs, see the World Wide Web Consortium page on naming and addressing.) However, when you create a local link (a link from one document to another on the same site), you generally don’t specify the entire URL of the document you’re linking to;...
Page 355 Document-relative paths are the most appropriate paths to use for local links in most Web sites. They’re particularly useful when the current document and the linked document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder, by specifying the path through the folder hierarchy from the current document to the linked document.
Page 356 • To link from contents.html to hours.html (both ﬁles are in the same folder), the ﬁle name is the relative path: hours.html. • To link to tips.html (in the subfolder named resources), use the relative path resources/tips.html. Each forward slash (/) represents moving down one level in the folder hierarchy. •...
Page 357 Root-relative paths provide the path from the site’s root folder to a document. You might want to use these types of paths if you are working on a large Web site that uses several servers, or one server that hosts several different sites. However, if you are not familiar with this type of path, you may want to stick to document-relative paths.
Page 358 The HTML tag for creating a hypertext link is called an anchor tag or an tag. Dreamweaver creates an anchor tag for objects, text, or images you create links from. You can create links to other documents and ﬁles, and links to speciﬁc places in a single document using the tag.
Page 359 Use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or ﬁle. For more information, see “Creating and modifying links in the site map” on page 367. Select text or an image in the Document window’s Design view. Open the Property inspector (Window >...
Page 360 Select text or an image in the Document window’s Design view. Drag the Point-to-File icon at the right of the Link ﬁeld in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Site window. The Link ﬁeld updates to show the link.
Page 361 Select text in the Document window’s Design view. Shift-drag from the selection. The Point-to-File icon appears as you drag. Point to another open document, a visible anchor in an open document, or a document in the Site window. Release the mouse button. Shift-dragging the Point-to-File icon from text in the Document window to a ﬁle in the Site window...
Page 362 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. Select an HTML ﬁle in the site map. The Point-to-File icon appears next to the ﬁle. Drag the Point-to-File icon and point to another ﬁle in the site map or to a local ﬁle in the Site Files view.
Page 363 In the Document window’s Design view, place the insertion point where you want the named anchor. Do one of the following: • Choose Insert > Invisible Tags > Named Anchor. • Press Control+Alt+A (Windows) or Command+Option+A (Macintosh). • In the Invisibles category of the Objects panel, click the Named Anchor button. In the Anchor Name ﬁeld of the Insert Named Anchor dialog box, type a name for the anchor.
Page 364 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 ﬁeld is automatically updated with the address speciﬁed in the e-mail link. In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.
Page 365 The most familiar kinds of links are those to documents and named anchors (described in “Linking documents using the Property inspector and the Point-to- File icon” on page 359 and “Linking to a speciﬁc place within a document” on page 362, respectively), but there are other types of links as well. is an undesignated link.
Page 366 Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. No changes are made to ﬁles on the remote site until you put or check in the local ﬁles to the remote server.
Page 367 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. • Drag a page from the Windows Explorer or the Macintosh Finder onto a page in the site map.
Page 368 In addition to having Dreamweaver update links automatically whenever you move or rename a ﬁle, you can manually change all links (including e-mail, FTP, null, and script links) to point somewhere else. You can use this option at any time (for example, you might have the words “this month’s movies”...
Page 369 A jump menu is a pop-up menu in a document, visible to your site visitors, listing options that link to documents or ﬁles. You can create links to documents in your Web site, links to documents on other Web sites, e-mail links, links to graphics, or links to any ﬁle type that can be opened in a browser.
Page 370 To add additional menu items, click the Plus (+) button and repeat steps 3 through 6 of this procedure. Click OK. To make changes to jump menu items, you use the Property inspector or the Behaviors panel. You can change the list order or the ﬁle an item links to, or you can add, delete, or rename an item.
Page 371 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 ﬁles on a site. Before using the Insert Navigation Bar command, create a set of images for the display states of each navigation element.
Page 372 When you insert a navigation bar, you name the navigation bar elements and select images to use for them. Do one of the following: • Choose Insert > Interactive Images > Navigation Bar. • In the Common category of the Objects panel, select Insert Navigation Bar. The Insert Navigation Bar dialog box appears.
Page 373 Select image state options for this element (you must select an Up image; other image states are optional): • In the Up Image ﬁeld, click Browse to select the image to display initially. • In the Over Image ﬁeld, click Browse to select the image to display when the user moves the pointer over the element when the Up image is showing.
Page 374 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 ﬁle opens when an element is clicked, to select a different window or frame in which to open a ﬁle, and to reorder the images.
Page 375 CHAPTER 16 ............
Page 376 Templates are best for situations in which you want a set of pages to have an identical layout—where you want to design the complete ﬁnal layout for a set of pages ﬁrst, and then add content later. If you simply want your pages to have the same headers and footers, with different layouts in between, use library items to store the headers and footers.
Page 377 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 ﬁle extension .dwt in a folder named Templates in your site’s local root folder.
Page 378 Choose Modify > Templates > Open Attached Template. Choose Window > Templates. The Assets panel appears, open to the Templates category. The bottom pane of the Assets panel lists all of the available templates for your site. The top pane displays a preview of the selected template.
Page 379 Select the template in the Assets panel. Click the Delete button and conﬁrm that you want to delete the template. (Be careful; if you delete a template ﬁle, you can’t retrieve it.) The template ﬁle is deleted from your site. Documents that were based on this template are not detached from the template;...
Page 380 To create a link in a template ﬁle, use the folder icon or the Point-to-File icon in the Property inspector; don’t type in the name of the ﬁle to link to. If you type the name, the link may not work as expected. The following information explains why this problem occurs and provides an example of a situation in which you might encounter it.
Page 381 Suppose you want each page based on the template to contain a link pointing to the ﬁle home.html. You open the Catalog_Page template to add the link, and you select the image that you want to attach the link to. But if you type home.html into the link text box in the Property inspector, you’ll encounter the document- relative link problem: when you save the edited template, the documents based on the template will point to the wrong place, because the link in the template ﬁle is...
Page 382 In the template ﬁle, select the text or content you want to change to an editable region. Do one of the following: • Choose Modify > Templates > New Editable Region. • Right-click (Windows) or Control-click (Macintosh) the selected text, and choose New Editable Region from the context menu.
Page 383 You can use the Dreamweaver highlighting preferences to customize the highlight colors for the outlines around the editable and locked regions of a template. The editable region color appears in the template itself as well as in documents based on the template; the locked region color appears only in documents based on the template.
Page 384 In template ﬁles and documents based on templates, editable regions appear in the Document window’s Design view surrounded by rectangular outlines in the appropriate highlight color. A small tab appears at the upper left of each editable region, showing the name of the editable region. In template ﬁles, only editable regions are marked with highlighted outlines.
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 is based on a template and that you can’t change anything outside the editable regions.
Page 386 Editable content is marked in HTML with the Dreamweaver comments . Everything between those comments is editable. The HTML source code for an editable region named might look like this: The HTML for an editable table named might look like this: In template ﬁles, editable regions are not highlighted in the Document window’s Code view (or the Code inspector);...
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 source code. Note: If you’ve marked a region of your template ﬁle as editable and you want to lock it (make it noneditable) again, use the Remove Editable Region command.
Page 388 CSS styles, timelines, behaviors, and section tags are not fully supported in documents based on templates. All of those elements insert information in the section of a document. Since section of a document based on a template is locked (except for the document’s title), Dreamweaver can’t insert a style sheet or JavaScript code in such a document.
Page 389 • Choose File > New from Template. In the dialog box that appears, choose a template. (If you don’t want your new document to update when the template changes, deselect Update Page When Template Changes.) Then click Select. • Choose File > New to create a new document, and then apply a template to it by selecting a template in the Templates category of the Assets panel and clicking the Apply button.
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;...
Page 391 To make changes to both the locked and editable regions of a page that uses a template, you must ﬁrst detach the page from the template. When the page is detached, it becomes a normal document, with no editable or locked regions, and no connection to any template ﬁle.
Page 392 Choose Modify > Templates > Update Pages. The Update Pages dialog box appears. In the Look In pop-up menu, do one of the following: • Choose Entire Site, and then choose the site name from the adjacent pop-up menu. This updates all pages in the selected site to their corresponding templates.
Page 393 Choose File > Open, and open a document that’s based on a template (and contains editable regions). Choose File > Export > Export Editable Regions as XML. In the XML dialog box, choose a tag notation and click OK. See “Using XML tag notations” on page 395 for details. In the dialog box that appears, enter a name for the XML ﬁle and click Save.
Page 394 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 deﬁne your own tags. XML is derived from SGML, the Standard Generalized Markup Language; like SGML, XML is a language for deﬁning sets of tags and the relationships among them.
Page 395 Dreamweaver lets you export XML content using either of two tag notations: editable region name tags or standard Dreamweaver XML tags. Choose the notation that best suits how XML content is incorporated into your Web site. The easiest way to see the differences between the two tag notations, if you understand XML syntax, is to look at examples.
Page 396 Libraries are a way to store page elements such as images, text, and other objects that you want to reuse or update frequently throughout your Web site. These elements are called library items. When you place a library item in a document, Dreamweaver inserts a copy of the HTML source code for that item into the document, and adds an HTML comment containing a reference to the original, external item.
Page 397 Select a portion of a document to save as a library item. Do one of the following: • Choose Window > Library and drag the selection into the Library category of the Assets panel. • Click the New Library Item button at the bottom of the Assets panel (in the Library category).
Page 398 When you add a library item to a page, the actual content is inserted in the document along with a reference to the library item. Place the insertion point in the Document window. Choose Window > Library. The Assets panel appears, showing the Library category. Drag a library item from the Assets panel to the Document window, or select an item and click the Insert button.
Page 399 Click the Edit button at the bottom of the Assets panel. Alternatively, double- click the library item. Dreamweaver opens a new window for editing the library item. This window is much like a Document window, but its Design view has a gray background to indicate that you’re editing a library item instead of a document.
Page 400 Click the name of the library item once to select it. After a brief pause, click again. When the name becomes editable, enter a new name. Note: Click elsewhere, or press Enter (Windows) or Return (Macintosh). Dreamweaver asks if you want to update documents that use the item. •...
Page 401 If you’ve added a library item to your document and you want to edit the item speciﬁcally for that page, you must break the link between the item in the document and the library. Once you’ve made an instance of a library item editable, that instance cannot be updated when the library item changes.
Page 402 Open a document that contains the library item. Note the name of the library item, as well as the exact tags it contains. You’ll need this information in steps 8 and 9. Select the library item and click Detach from Original in the Property inspector.
Page 403 Use library item properties to specify the source ﬁle 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. displays the ﬁle name and location of the source ﬁle for the library item.
Page 404 Server-side includes are instructions to the server to include a speciﬁed ﬁle in the current document before sending the document to the user who requested it. (You can think of it as something like a library item that’s provided by the server.) When you open a document that’s on a server, the server processes the include instructions and creates a new document in which the include instructions are replaced by the contents of the included ﬁle.
Page 405 Some servers are conﬁgured to examine all ﬁles to see if they contain server-side includes; other servers are conﬁgured to examine only ﬁles with a particular ﬁle extension, such as .shtml, .shtm, or .inc. If a server-side include isn’t working for you, ask your system administrator if you need to use a special extension in the name of the ﬁle that uses the include.
Page 406 Like library items, server-side includes are selected as a whole unit in the Document window. Unlike library items, for server-side includes the HTML source code contained in the included ﬁle 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 ﬁle, you must open the ﬁle.
Page 407 CHAPTER 17 ............
Page 408 When you insert layers into your Web page, Dreamweaver inserts the HTML tag for those layers in your code. You can set four different tags for your layers: , and are the most common tags and are recommended for use so that the widest audience will be able to view your layers. Both Internet Explorer 4.0 and Netscape Navigator 4.0 support layers created using the tags.
Page 409 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 within another layer (nest), put layers on top of each other (stacking), or hide certain layers while showing others.
Page 410 Note: The Layers panel is a way to manager the layers in your document. Choose Window > Layers or press F11 to open the Layers panel. Layers are displayed as a stacked list of names; the ﬁrst created layer at the bottom of the stacking order, and the most recently created layer at the top of the stacking order.
Page 411 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 from its parent.
Page 412 Use layer preferences to deﬁne the default settings for new layers you create. Choose Edit > Preferences, then click Layers to change layer preferences. set the default HTML tag to use when creating layers. The options are (default), , or are recommended to ensure that the layers work in all 4.0 and later browsers.
Page 413 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. • Click the name of the layer in the Layers panel. •...
Page 414 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. •...
Page 415 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. •...
Page 416 Use the grid as a visual guide 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 by specifying grid settings.
Page 417 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. allows you to specify a name to identify the layer in the Layers panel and for scripting.
Page 418 determines the initial display condition of the layer (visible or not). Use a scripting language, such as JavaScript, to control the visibility property and dynamically display layer contents. Choose from the following options: • Default does not specify a visibility property, but most browsers interpret this as Inherit.
Page 419 only) speciﬁes the layer above (A) or below (B) the current layer in the stacking order (z-index). Only layers previously deﬁned in the document will appear in the list of layer names to the right of the A/B menu. When you select two or more layers, the layer Property inspector displays text properties and a subset of the regular layer properties, allowing you to modify several layers at once.
Page 420 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 in a browser.
Page 421 Choose Window > Layers to open the Layers panel. In the row of the layer you’re affecting, click in the eye-icon column so you can set the desired visibility. • An open eye means the layer is visible. • A closed eye means the layer is invisible. •...
Page 422 Create your layout using layers, then convert the layers to tables so that your layout can be viewed in most browsers. Choose Modify > Convert > Layers to Table. In the dialog box that appears, select the desired layout options. •...
Page 423 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 layers don’t overlap. Choose Modify >...
Page 424 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 completely satisﬁed with your original ﬁle—otherwise, you must convert the ﬁle each time you change the original ﬁle.
Page 425 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 do not require any ActiveX controls, plugins, or Java applets (but do require JavaScript).
Page 426 shows which frame of the timeline is currently displayed on the page. speciﬁes which of the document’s timelines is currently displayed in the Timelines panel. display bars for animating layers and images. show the duration of each object’s animation. A single row can include multiple bars representing different objects.
Page 427 Timelines create animation by changing the position, size, visibility, and stacking order of layers. Timelines can also change the source ﬁles of images, so you could create an image slideshow with timelines. Timelines can move only layers. To make images or text move, create a layer using the Draw Layer button on the Objects panel and then insert images, text, or any other type of content in the layer.
Page 428 Choose Modify > Timeline > Add Object to Timeline or simply drag the selected object into the Timelines panel. A bar appears in the ﬁrst channel of the timeline. The name of the layer appears in the bar. Click the keyframe marker at the end of the bar. Move the layer on the page to where it should be at the end of the animation.
Page 429 After deﬁning 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 make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation shift so that their relative positions remain constant.
Page 430 In addition to moving layers with timelines, you can change the source ﬁle of an image and the visibility, size, and stacking order of a layer. In the Timelines panel, do one of the following: • Select an existing keyframe in the bar controlling the object you want to change.
Page 431 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. •...
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.
Page 433 The following suggestions can improve the performance of your animations and make creating animations easier: • Show and hide layers instead of changing the source ﬁle for multiple-image animations. Switching the source ﬁle of an image can slow down the animation, because the new image must be downloaded.
Page 434 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 stop itself. For more information, see “Attaching a behavior to a timeline” on page 442 and “Using Behaviors”...
Page 435 CHAPTER 18 ............
Page 436 Dreamweaver provides about two dozen behavior actions; additional actions can be found on the Macromedia 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 own behavior actions if you are proﬁcient in JavaScript. For more information on writing behavior actions, see Extending Dreamweaver.
Page 437 Note that most events can be used only with certain page elements. To ﬁnd 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 the Behaviors panel.
Page 438 (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. (NS4, IE4, IE5) is generated when the visitor presses and releases any key;...
Page 439 (NS3, NS4, IE3, IE4, IE5) is generated when the visitor selects text in a text ﬁeld. (IE4, IE5) is generated when a marquee element’s contents begin a loop. (NS3, NS4, IE3, IE4, IE5) is generated when the visitor submits a form. (NS3, NS4, IE3, IE4, IE5) is generated when the visitor leaves the page.
Page 440 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. The default event to trigger the action appears in the Events column. If this is not the trigger event you want, choose another event from the Events pop-up menu.
Page 441 You can’t attach a behavior to plain text. Tags like and don’t generate events in browsers, so there’s no way to trigger an action from those tags. However, you can attach a behavior to a link. Therefore, to attach a behavior to text, the easiest approach is to add a null link (that doesn’t point to anything) to the text, then attach the behavior to the link.
Page 442 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 playing at frame 15 of a timeline.
Page 443 If your pages contain behaviors created with Dreamweaver 1 or Dreamweaver 2, those behaviors are not updated automatically when you open the pages in the current version of Dreamweaver. However, when you update one occurrence of a behavior in a page (by following the procedure below), all other occurrences of that behavior in that page are also updated.
Page 444 The behavior actions included with Dreamweaver have been written to work in all releases of Netscape Navigator 4, and in Internet Explorer 4.0 and later. (Netscape Navigator 5 was never released externally; Netscape Navigator 6 has not yet been released at the time of this writing.) Note: Although the Dreamweaver actions were written to maximize cross-browser compatibility, some actions do not work in older browsers.
Page 446 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 the Web.) Select an object and open the Behaviors panel.
Page 447 Select an object and open the Behaviors panel. Click the Plus (+) button and choose Change Property from the Actions pop-up menu. From the Type of Object pop-up menu, choose the type of object whose property you want to change. The Named Object pop-up menu now lists all the named objects of the type you chose.
Page 448 Select an object and open the Behaviors panel. Click the Plus (+) button and choose Check Browser from the Actions pop-up menu. Determine how you want to separate your visitors: by browser brand, by browser version, or both. For example, do you want everyone with a 4.0 browser to see one page, and all others to see a different page? Or perhaps you want Netscape Navigator users to see one page and Internet Explorer users to see another.
Page 449 Use the Check Plugin action to send visitors to different pages depending on whether they have the speciﬁed plugin installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not. Note: Select an object and open the Behaviors panel.
Page 450 Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame in a Macromedia Shockwave or Macromedia Flash movie. Choose Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash movie, respectively. Choose Window >...
Page 451 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 should drag the layer, whether to snap the layer to the target if the layer is within a certain number of pixels of the target, what to do when the layer hits the target, and more.
Page 452 Enter values (in pixels) for the drop target in the Left and Top ﬁelds. The drop target is the spot to which you want the visitor to drag the layer. A layer is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top ﬁelds.
Page 453 When you attach the Drag Layer action to an object, Dreamweaver inserts the function into the section of your document. In addition to registering the layer as draggable, this function deﬁnes three properties for each draggable layer— , and —that you can use in your own JavaScript functions to determine the relative horizontal position of the layer, the relative vertical position of the layer, and whether the layer has reached the drop target.
Page 454 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).) Choose Edit > Find. Choose HTML Source from the Find What pop-up menu. Type (!curDrag) in the adjacent text ﬁeld.
Page 455 Repeat steps 3 and 4 to open additional documents in other frames. Click OK. 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.
Page 456 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.
Page 457 Select an object and open the Behaviors panel. Click the Plus (+) button and choose Open Browser Window from the Actions pop-up menu. Click Browse to select a ﬁle, or enter the URL you want to display. Set any of the following options: speciﬁes the width of the window in pixels.
Page 458 Use the Play Sound action to play a sound. For example, you might want to play a sound effect whenever the mouse pointer rolls over a link, or you might want to play a music clip when the page loads. Note: Select an object and open the Behaviors panel.
Page 459 Select an object and open the Behaviors panel. Click the Plus (+) button and choose Popup Message from the Actions pop-up menu. Enter your message in the Message ﬁeld. Click OK. Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.
Page 460 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 or update a navigation bar image or set of images, to change which URL is displayed when a navigation-bar button is clicked, and to select a different window in which to...
Page 461 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.
Page 462 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, including color.
Page 463 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.
Page 464 The Set Text of Text Field action replaces the content of a form’s text ﬁeld 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 ( ).
Page 465 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 that gives details about the plant’s growing season and region, how much sun it needs, how large it can grow, and so on.
Page 466 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. In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order.
Page 467 Click OK. Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is . (If it isn’t, select the event and click the downward- pointing triangle that appears between the event and the action. Choose from the list of events in the pop-up menu.) The Swap Image action swaps one image for another by changing the attribute of the...
Page 468 Click OK. 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. The Swap Image Restore action restores the last set of swapped images to their previous source ﬁles.
Page 469 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 ﬁeld. You must leave this ﬁeld blank if you are not attaching Go to Timeline Frame to a frame in a timeline.
Page 470 The Validate Form action checks the contents of speciﬁed text ﬁelds to ensure that the user has entered the correct type of data. Attach this action to individual text ﬁelds with the event to validate the ﬁelds as the user is ﬁlling out the form, or attach it to the form with the event to evaluate several text ﬁelds at once when the user clicks the Submit button.
Page 471 If you are validating multiple ﬁelds, repeat steps 6 and 7 for any additional ﬁelds that you want to validate. Click OK. If you are validating multiple ﬁelds when the user submits the form, the event automatically appears in the Events pop-up menu. If you are validating individual ﬁelds, check that the default event is If it isn’t, select from the pop-up menu.
Page 473 CHAPTER 19 ............
Page 474 After you write your code, you can start the JavaScript Debugger to check for errors. The debugger checks for syntax errors ﬁrst, then opens your page in the browser so you can check for logical errors. Choose File > Debug in Browser, then select the browser from the list. Alternatively, click the Preview/Debug in Browser button in the toolbar (View >...
Page 475 If the debugger ﬁnds syntax errors, it stops and lists the errors in the JavaScript Syntax Errors window. Select an error in the JavaScript Syntax Errors window. A description of the error will appear in the Detailed Description area. • Double-click the error.
Page 476 When the debugger ﬁnds logical errors, the JavaScript Debugger window opens. A breakpoint (similar to an alert) is automatically set in the ﬁrst line of your code. The debugger stops executing at each breakpoint, giving you the opportunity to view the values of JavaScript objects and properties in the variable list window. After the debugger stops at a breakpoint, you can step through your code (execute one statement at a time).
Page 477 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 the dot, and you can examine the objects and properties that exist at that point.
Page 478 • 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. You can step through your code to execute your statements one at a time and monitor their effects in your program.
Page 479 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 variable when the program stops execution at a breakpoint or after you’ve stepped in the code.
Page 480 Select the item in the variable list. Click the Minus (-) button. Select the item in the variable list. Click the value in the value list. Edit the value by typing in the text box that appears.
Page 481 CHAPTER 20 ............
Page 482 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. Before creating interactive forms, check with your ISP or server administrator to see if CGI scripts can run on your server.
Page 483 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. inserts a radio button in a form. Radio buttons represent exclusive choices. Selecting a button within a group deselects all others in the group, for example a user can select Yes or No.
Page 484 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 window.
Page 485 In the Action ﬁeld, 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. •...
Page 486 A text ﬁeld is a form object in which users type a response. There are three types of text ﬁelds: are typically used to provide a single word or short phrase response, such as a name, or an address. provides a visitor with a larger area in which to type a response.
Page 487 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 ﬁeld appears in the document. In the Property inspector’s TextField ﬁeld, type a unique name for the ﬁeld.
Page 488 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 ﬁeld appears in the document. In the Property inspector’s TextField ﬁeld, type a name for the text ﬁeld object.
Page 489 In some cases the information you need from the visitors to your site may be too complicated to respond to in a text ﬁeld. You may want visitors to send an entire ﬁle to your server, for example a nicely formatted resume, a graphics ﬁle, or some other document.
Page 490 Hidden ﬁelds aren’t visible to your site visitors, they are invisible elements you place in a document to gather or send information. The hidden ﬁeld information is passed back to the server when a form is submitted, and uses the name and value pair you deﬁne when you set up the hidden ﬁeld.
Page 491 Use checkbox and radio button form objects to set up predeﬁned 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 response “off ” and “on.” Each checkbox option operates individually.
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. 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 have a unique name in the Name ﬁeld.
Page 493 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 ﬁeld values. Place the insertion point inside the form outline, then do one of the following: •...
Page 494 Scrolling lists allow you to set up multiple options in a conﬁned space. You can set the line height of the list, and allow users to make multiple selections within the list. Place the insertion point inside the form outline, then do one of the following: •...
Page 495 A pop-up menu allows you to set up multiple options in a conﬁned 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. Place the insertion point inside the form outline, then do one of the following: •...
Page 496 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 tasks you’ve deﬁned in a processing script.
Page 497 You can make a more appealing Submit button by using the Insert Image Field command to insert an image in a form. You can also use graphical buttons to perform other form operations such as resetting a form, or playing a sound. Using an image to perform tasks other than submitting data requires attaching a behavior to the form object.
Page 498 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 ﬁelds with descriptive text to let users know what they’re responding to—for example, “Type your name”...
Page 499 Forms are processed by the script or application speciﬁed in the attribute of the tag. Select a form and look in the Property inspector to see what the associated action is. The simplest forms use JavaScript or VBScript to perform all form processing on the client side (as opposed to sending the form data to the server for processing).
Page 500 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 ﬁeld has been inserted into the document.
Page 501 CHAPTER 21 ............
Page 502 • Monitor the size of your pages and the time they take to download. Keep in mind that for pages that consist of one large table, visitors will see nothing until the entire table has ﬁnished loading. Consider breaking up large tables; if this is not possible, consider putting a small amount of content—such as a welcome message or an advertising banner—outside the table at the top of the page so users can view this material while the table downloads.
Page 503 Choose from the following options: • To run the check on the current document, save your ﬁle. The check is performed on the last saved version of the ﬁle and does not include unsaved changes. • To run the check on a directory or site, choose Window > Site Files to open the Site FTP window;...
Page 504 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 have to save the document ﬁrst.
Page 505 Preview in Browser preferences display the currently deﬁned 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. (Windows only) allows you to choose whether to use a local server when you preview a page in a browser.
Page 506 Fixing broken links (links that no longer follow a valid path or point to a nonexistent ﬁle) 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 external documents, and the links may change over time.
Page 507 Choose Site > Check Links Sitewide. The Link Checker dialog box appears. Select a speciﬁc link report from the Show pop-up menu. Your choices are Broken Links, External Links, and Orphaned Files. A list of ﬁles that ﬁt the report type you selected appears in the Link Checker dialog box.
Page 508 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 ﬁle name in the Property inspector. (If the Property inspector is not visible, choose Window > Properties to open it.) To set a new path and ﬁle name, click the folder icon to browse to the correct ﬁle, or type over the highlighted text.
Page 509 The size and estimated download time of the current page appear at the bottom of the Document window. Dreamweaver calculates size based on the entire contents of the page, including all linked objects such as images and plugins. Dreamweaver estimates download time based on the connection speed entered in Status Bar preferences.
Page 510 You can run various types of reports on documents, folders, and sites, sort the results, and get additional details about selected results. Choose Site > Reports. The Reports dialog box appears. Choose a Report category from the Report On pop-up menu. The Report options are Current Document, Entire Local Site, Selected Files in Site, or Folder.
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.
Page 513 CHAPTER 22 ............
Page 514 By default, Dreamweaver shows all the ﬁle 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 ﬁles. If most of your work involves a speciﬁc ﬁle type (such as ASP ﬁles), you can change the default display.
Page 515 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 Conﬁguration/Objects folder within the Dreamweaver application folder.
Page 516 You can create your own objects to add to the Objects panel. Many simple objects require no JavaScript; they contain only the HTML source code to be inserted into the document. (For basic information about creating more complex objects using JavaScript, see “Extending Dreamweaver: Basics” on page 536.) After you create an object, you can package it and distribute it on the Macromedia Exchange site if you want other Dreamweaver users to be able to use it.
Page 517 Give your icon the same ﬁle name as your object ﬁle, but use .gif as the extension; then save the icon in the same directory as the object ﬁle. 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 directory as well.
Page 518 You can add certain kinds of commands to the Commands menu, and change their names, without editing the menus.xml ﬁle. Note: command command menu item To create new commands that are automatically placed in the Commands menu, use the History panel (see “Creating new commands from history steps” on page 165).
Page 519 By editing the menus.xml ﬁle, 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 menus using the same procedure as for other menus.
Page 520 Quit Dreamweaver. Make a backup copy of the menus.xml ﬁle. Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad. (Don’t open it in Dreamweaver.) Cut an entire menu and its contents, from the opening tag to the closing tag.
Page 521 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).
Page 522 The menus.xml ﬁle 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: A menu bar (tagged with opening and closing tags) is a discrete menu or set of menus—for example, there’s a main menu bar, a separate Site window menu bar (which appears only in Windows, not on the Macintosh), and a menu bar for...
Page 523 Provides information about a menu bar in the Dreamweaver menu structure. The name of the menu bar. Although is a required attribute, you can give it the value The name of the application in which the menu bar is available. Valid values are .
Page 524 Provides information about a menu or submenu to appear in the Dreamweaver menu structure. 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 letter. The underscore is automatically removed on the Macintosh.
Page 525 The name of the application in which the menu item is available. Valid values are . The default is for the menu item to be available in both Dreamweaver and UltraDev. The keyboard shortcut for the command, if any. Use the following strings to specify modiﬁer keys: •...
Page 526 The name of an HTML ﬁle containing JavaScript that controls the menu item. Specify a path to the ﬁle relative to the Conﬁguration folder. (For example, the Help > Welcome menu item speciﬁes Note that the attribute overrides the , and attributes.
Page 527 Indicates that a separator should be displayed at the corresponding location in the menu. The name of the application in which the separator is shown. Valid values . The default is for the separator to be shown in both Dreamweaver and UltraDev. None (empty tag).
Page 528 Speciﬁes a keyboard shortcut in the menus.xml ﬁle. The key combination that activates the keyboard shortcut. For syntax details, see “<menuitem>” on page 524. The name of the application in which the shortcut is available. Valid values . The default is for the shortcut to be available in both Dreamweaver and UltraDev.
Page 529 The dialog box layouts for objects, commands, and behaviors are speciﬁed as HTML forms; they reside in HTML ﬁles in the Conﬁguration folder within the Dreamweaver application directory. You edit those forms just as you would edit any form in Dreamweaver; see “Creating Forms” on page 481.) Find the appropriate .htm ﬁle in Conﬁguration/Objects, Conﬁguration/ Commands, or Conﬁguration/Behaviors.
Page 530 The HTML source formatting proﬁle determines how Dreamweaver formats the HTML source code for a document. The proﬁle includes both the Code Format preferences (which you can easily set with Edit > Preferences; see “Setting code formatting preferences” on page 343 for details) and additional formatting preferences for individual tags and groups of tags.
Page 531 If you change the settings to , the Code view and Code inspector will display text paragraphs in the following way: (Note that the number of line breaks after the closing tag and before the following opening tag is the greater of the two numbers speciﬁed—if you specify two line breaks before a tag and three after, the result is three line breaks between the closing tag and the next opening tag.) Some tag and attribute settings include the term...
Page 532 Browser proﬁles are the ﬁles Dreamweaver uses to check your documents when you run a target browser check (see “Checking for browser compatibility” on page 502). Each proﬁle contains information about the HTML tags and attributes that a particular browser supports. A browser proﬁle can also contain warnings, error messages, and suggestions for tag substitutions.
Page 533 The syntax for a tag entry is as follows: htmlTag tagName htmlTag unsupportedAttribute1 unsupportedAttribute1 htmlTag supportedAttribute1 supportedAttribute1 supportedAttribute2 validValue1 validValue2 validValue3 unsupportedAttribute2 unsupportedAttribute2 htmlTag The elements shown in the above syntax are deﬁned as follows: is the tag as it appears in an HTML document. is an explanatory name for the tag (for example, the name for the is “Horizontal Rule”).
Page 534 The following example shows an entry for the tag that would be accurate for Navigator 3.0: Create a browser proﬁle by modifying an existing proﬁle. For example, to create a proﬁle for a future version of Microsoft Internet Explorer, you can open the proﬁle for the most recent version of Internet Explorer that has a proﬁle, add any new tags or attributes introduced in the new version, and save it as a proﬁle for the new version.
Page 535 Using a text editor, open an existing proﬁle. If you’re creating a new proﬁle, open the proﬁle that most closely resembles the proﬁle you intend to create, then save the ﬁle under a new ﬁle name. If you’re creating a new proﬁle, change the name that appears on the ﬁrst line of text in the ﬁle.
Page 536 Dreamweaver is designed to be extensible. It includes a JavaScript interpreter, so it can read and execute JavaScript code; and it provides an application programming interface (API), a large set of JavaScript functions that allow developers to extend the capabilities of Dreamweaver. Dreamweaver also provides a Document Object Model (DOM), which allows extensions to examine and modify a document’s structure and contents.
Page 537 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 the Dreamweaver extensibility API. If you know JavaScript and understand the Dreamweaver extensibility API, you can edit the JavaScript to change the operation of Dreamweaver commands.
Page 538 Each tag database ﬁle deﬁnes the name, type, content model, rendering scheme, and icon for one or more custom tags. You can create any number of tag database ﬁles, but all of them must reside in the Conﬁguration/ThirdPartyTags folder to be read and processed by Dreamweaver. Tag database ﬁles have the ﬁle extension .xml.
Page 539 * Determines whether the tag is empty (as with ), or whether it contains anything between its opening and closing tags (as with ). 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 * Determines whether the contents of the tag should appear in the Document window’s Design view, or whether the icon appears instead.
Page 540 Indicates whether to ignore everything between (or between opening and closing tags if those strings aren’t deﬁned) even when those strings appear inside attribute names or values. You should generally set this to for string-delimited tags; the default is . For example, ASP tags sometimes appear inside attribute values, and sometimes contain quotation marks (");...
Page 541 How custom tags appear in the Design view of the Document window depends on the values of the attributes of the tag. If the value of , the icon speciﬁed in the attribute appears. If the value of but the value of , the icon appears as it would for an empty tag.
Page 542 Microsoft ASP (Active Server Pages) is a way to combine HTML, scripts written in JavaScript or VBScript, and ActiveX controls to dynamically serve HTML. When a browser requests an ASP page from a Microsoft Web server, the server interprets the ASP code and sends the resulting HTML to the requesting browser. (The browser receives only HTML, not ASP code.) For more information on ASP, see the Microsoft ASP overview pages, as described in “HTML and Web technologies resources”...
Page 543 Allaire ColdFusion is another way to serve pages dynamically. When a browser requests a ColdFusion page from a server, the server passes the page to the ColdFusion Server software, which interprets the scripts on the page and sends the resulting HTML to the requesting browser. (The browser receives only HTML, not ColdFusion code.) For more information on ColdFusion, see the ColdFusion product page, as described in “HTML and Web technologies resources”...
Page 544 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 ﬁles with certain ﬁle name extensions, including .asp (ASP), .cfm (ColdFusion), .jsp (JSP), and .php (PHP). This default is set so that Dreamweaver won’t accidentally modify the code contained in any such third-party tags.
Page 545 APPENDIX ............
Page 550 Note:...
Page 551 Note:...
Page 558 Note:...
Page 563 INDEX aligning layers 415 Absolute Bottom alignment (image Property options 271 inspector) 271 page elements 271 Absolute Middle alignment (image Property text 241 inspector) 271 tracing images 159 Absolute paths 354 All Info tab (Design Notes) 136 actions Alt image property 270 browser compatibility 444 Always Nest When Created Within Existing changing in behaviors 442...
Page 564 assets (continued) Behaviors panel 436 inserting 225 bitmaps, resizing 272 opening the Assets panel 223 See also images overview 221 body tag 159 planning 101 bold text 239 refreshing the Site list 224 Border image property 270 selecting multiple 227 borders URLs, creating 231 adding to a table 190...
Page 565 Centering option (Code Format preferences) 345 Color command 240 CFML. See ColdFusion Markup Language Color Cubes color palette 87 CGI, reference material 25 color picker CGI (Common Gateway Interface), scripts 499 Dreamweaver 87 Change Link Sitewide command 368 system 87 Change Property action 446 Color Wheel (System Color) button 87 characters, special 236...
Page 566 Connecting to remote sites, using, source-control Design Notes systems 127 adding status choices 137 Connection Speed option 76 disabling 137 content, adding to tables 185 for documents and objects 136 context menus 78, 79 for Dreamweaver and Fireworks integration 287 customizing 519 for Fireworks ﬁles 140 Continuous Tone color palette 87...
Page 567 documents checking links 506 Edit button (image Property inspector) 270 creating 150 Edit Font List command 242 creating, based on templates 388 Edit NoFrames Content command 219 Design Notes, using with 134 Edit Style Sheet command 252 download size, time 509 editing new 150 assets 227...
Page 568 external editors Find In options 259 BBEdit (Macintosh only), integration with 351 ﬁnding and replacing. See searching Fireworks. See Dreamweaver and Fireworks ﬁrewalls integration deﬁning host and port 111 HomeSite (Windows) 330 options 125 HTML, overview 350 Fireworks, Design Notes in 140 images 277 Fireworks and Dreamweaver integration.
Page 569 forms framesets 206–217 adding multiple objects 498 borders 217 adding to a document 484 naming 212 behaviors, using with 500 nested 208 client-side scripting 499 predeﬁned, inserting 206 creating 483 properties 214 creating ﬁle ﬁelds 489 saving 211 ﬁelds, validating 470 selecting 208 inserting tables 498 targeting links in 359...
Page 570 HTML source code (continued) options 333 head section, editing content in 159 overview 321 header cell, formatting 192 reference 328 heading tags 240 reference material 25 Help 14 rewriting preferences 346 Dreamweaver discussion group 16 searching 258, 260 Dreamweaver Support Center 16 selecting in the Document window 154 shortcuts 557 structure 322...
Page 571 images (continued) inspectors formats, supported 267 image inspector 273 image maps 273 opening and closing with Launcher bar 77 in tables 186 Property inspector 82 inserting 268 shortcuts 557 inserting in Layout view 174 See also panels preloading (behavior) 459 installing Dreamweaver 12 properties 269 integrating Dreamweaver with other applications 89...
Page 572 JS debugger. See JavaScript debugger layers (continued) JSP (JavaServer Pages) 542 markers, displaying 409 Jump Menu action 455 moving 415 Jump Menu Go action 456 nesting 411 jump menus overview 407 adding menu items 369 positioning 417 changing menu items 370 preferences 412 creating a selection prompt for 369 preventing overlap 423...
Page 573 Layout view 167–182 library items (continued) about layout cells and tables 169 preferences 397 adding content to 174 properties 403 autoinsert spacers 182 Line Breaks option (Code Format preferences) 345 autostretch 179 Link Checker dialog box 507 background 182 Link Color option (Page Properties) 153 cell highlight 182 Link External Style Sheet dialog box 251 cell padding 178...
Page 574 Loop option 425 nesting 412 looping timelines 429 frames 208 Low Src image property 270 layers 411 Netscape 4 layer compatibility 412 Netscape Navigator plugins playing in Document window 315 Mac OS color palette 87 properties 314 Macromedia Director, creating Shockwave troubleshooting 315 movies with 310 Never Rewrite HTML In Files with Extensions option...
Page 575 opening non-HTML ﬁles 338 personal spelling dictionary 258 preferences 338 photographs 267 opening Word HTML ﬁles 150 PHP Hypertext Preprocessor 542 Optimize Image in Fireworks command 290 pixels, transparent, in background 153 Ordered List option 242 planning, design 100 orphaned ﬁles 506 Play Sound action 458 Other Keywords option (Code Colors preferences) 344 Play Timeline action 469...
Page 576 Preload Images action 459 Prevent Layer Overlaps command 423 Quick Tag Editor Preview in Browser command 504 attributes hints menu 341 Preview Using Local Server command 357 opening 338 previewing in browsers overview 338 overview 504 preferences 342 shortcuts 553, 554 QuickTime movies primary browser 505 as assets.
Page 577 Reset Origin command 157 script links Reset Position command 158 changing 368 resizing creating 365 frames 216 scripts handles 272 as assets. See assets layers 414 balanced braces 337 layout cells and tables 176 editing 336 page elements 272 editing external 335 table cells 194 entering 335 resizing Fireworks images from Dreamweaver 291...
Page 578 Set Nav Bar Image action 460 Site Name ﬁeld 103, 104 Set Text of Frame action 461 site planning 95 Set Text of Layer action 462 assets 101 Set Text of Status Bar action 463 audience 95 Set Text of Text Field action 464 goals 95 setting breakpoints 477 structure 98...
Page 579 sites (continued) Strikethrough (Default Color) button 87 remote, root folder 126 Strings option (Code Colors preferences) 344 remote, setting up 123 style sheets remote, setup troubleshooting 130 editing external style sheets 252 removing from site list 106 external 250 reports, running 141 overview 248 searching for ﬁles in 258 See also styles...
Page 580 tables 498 tags (continued) adding and removing rows and columns 196 removing 342 adding background color to 191 searches 260 adding background images to 191 selecting 154 adding borders to 190 speciﬁcations 538 adding content to 185 table 189 adjusting rows and columns 194 tagspec 538 aligning 192 text formatting 326...
Page 581 templates (continued) timelines (continued) Templates folder 377 modifying 429 using behaviors 388 multiple 431 using styles 388 playback head 425 using timelines 388 playing and stopping using behaviors 469 viewing regions 384 playing automatically 429 XML 392 shortcuts 552 testing sites 501 Timelines panel 425 text titles, changing 152...
Page 582 V Space and H Space image properties 270 Validate Form action 470 in templates 392 variable list 479 menus.xml ﬁle 522 VBScript 335 overview 394 viewing tag notations when exporting 395 arranging views 332 tags 330 Code view and Design view 331 tagspec tag 538 editable and locked HTML in templates 386 editable and locked regions in templates 384...

This manual is also suitable for:

Dreamweaver