<title>Overview</title> Overview Dreamweaver is a professional visual editor for creating and managing web pages. With Dreamweaver, it's easy to create cross-platform, cross-browser pages. Macromedia's Roundtrip HTML technology imports HTML documents without reformatting the code. Dreamweaver also makes it possible to use Dynamic HTML features such as animated layers and behaviors without writing a line of code. Browser-targeting checks your work for potential problems on all popular platforms and browsers.
<url>html/00.intro.fm2.html</url>
<title>Guided tour of Dreamweaver</title> Guided tour of Dreamweaver The Guided Tour below provides an animated introduction to some of the main features of Dreamweaver. Run the whole tour or skip ahead to see certain sections. Click Show Me to start the tour. For the latest information about Dreamweaver, check the Dreamweaver Developers Center web site.
<url>html/00.intro.fm3.html</url>
<title>What's new in Dreamweaver 2</title> What's new in Dreamweaver 2 Dreamweaver 2 offers several new features that improve your productivity during web site development. Dynamic content publishing Makes getting your content on the web faster and easier. Use templates to separate content from design, enabling faster turnaround to the web. See Templates overview . View server-side includes directly in the Document window. See Using server-side includes . Sitewide editing Helps you manage large sites. Create a visual, hierarchical site map; useful for presenting your vision to clients as well as managing the site structure. See Creating site maps . Drag and drop files, or simply point to files, to create links. See Creating links . Use link management tools to keep links up to date as you move, rename, and delete files. See Managing links . Use sitewide, multifile search and replace to make global changes to your site. Take advantage of HTML-aware search and replace to search for HTML tags and attributes. You can also use regular expressions to make your searches even more powerful. See Searching and replacing . Tools for graphic artists Let you bring your designers into the development process. Use layers to design complex, pixel-precise page designs, then convert layers to tables to create pages that work in all browsers. See Using layers to design tables . Pick up a color from anywhere on the desktop and snap it to the nearest web-safe color with the web-safe eyedropper. See Choosing colors . Use a tracing image to quickly build pages from a designer's mock-up. See Using a tracing image . Improved table editing Makes it easy to create great-looking tables in HTML. Easily cut, copy, and paste multiple cells, rows, and columns. See Copying and pasting cells . Easily select multiple table cells and modify their properties. See Selecting table elements . Split any table cell into multiple cells. See Splitting and merging cells . Quickly format tables with preset designs. See Formatting a table with a preset design . Sort tables numerically and alphabetically by row or column. See Sorting tables . Improved productivity features Make it easy for you to work smarter and faster. Customize your workspace by combining palettes and inspectors into a single tabbed palette. See Dockable floating palettes . Instantly resize the Document window to preset or custom dimensions. See Resizing the Document window . Use shortcut menus to quickly access the commands you use most often. See Shortcut menus . View and manipulate HEAD content in the Document window. See Viewing and editing HEAD content . Play plugins right in the Dreamweaver Document window. See Playing plugins in the Document window . An extensible environment Gives you the power to customize and extend Dreamweaver to fit the way you work. See Extending Dreamweaver overview . Use commands to perform edits to the current document, such as sorting a table or cleaning up your HTML source code. Write your own commands, just as you would objects or behavior actions. Give custom tags a visual representation in the Document window, and create Property inspectors for them so you can easily set their properties. Write your own data translators to view the results of server processing in the Document window.
<url>html/00.intro.fm4.html</url>
<title>Dreamweaver HTML Help Pages</title> Dreamweaver HTML Help Pages The Dreamweaver HTML Help Pages provide comprehensive information about all Dreamweaver features. For the best experience, we strongly suggest that you use one of these browsers: In Windows, we recommend Netscape Navigator 4.0 and later or Microsoft Internet Explorer 4.0 and later. On the Macintosh, we recommend Netscape Navigator 4.0 and later. (Internet Explorer for Macintosh is not recommended because it cannot play the Show Me movies.) If you use a 3.0 browser, all the content is still accessible, but some features (such as Search) will not work. The Dreamweaver HTML Help Pages make extensive use of JavaScript. Make sure that JavaScript is enabled in your browser. If you plan to use the Search feature, make sure that Java is enabled as well. Table of contents Use the table of contents to see all information organized by subject. Click top-level entries to view subtopics. Index Use the index as you would a traditional printed index to find important terms and go to related topics. Search Use Search to find any character string in all topic text. Search requires a 4.0 browser with Java enabled. To search for a phrase, simply type the phrase in the text entry box. To search for files that contain two keywords (for example, layers and styles), separate the search terms with a plus (+) sign. Context-sensitive links Click the Help button in any dialog box or the question mark icon in inspectors, windows, and palettes to open a relevant help topic. Navigation bar Use the buttons on the Navigation bar to move through topics. Back and Forward function like the browser's Back and Forward buttons, taking you to topics you have just been viewing . Previous and Next move to the previous or next topic in a section (following the topic order listed in the table of contents). What's New links to the Dreamweaver Developers Center on the Macromedia web site.
<url>html/00.intro.fm5.html</url>
<title>Dreamweaver Developers Center</title> Dreamweaver Developers Center The Dreamweaver Developers Center web site is updated regularly with the latest information on Dreamweaver, plus advice from expert users, information on advanced topics, examples, tips, and updates. Check the web site often for the latest news on Dreamweaver and how to get the most out of the program at http://www.macromedia.com/support/dreamweaver/.
<url>html/202.tutorial.fm1.html</url>
<title>Tutorial overview</title> Tutorial overview This tutorial shows you how to use Dreamweaver to edit and update a web site. In this tutorial, you will edit a web site for a fictitious company, Olivebranch Gourmet Foods, a farm that sells gourmet food products. While visiting Olivebranch's web site, customers can read about the daily special and browse through the gourmet wine, cheese, mustard, and oil offerings in the online catalog. Customers can also learn more about Olivebranch and the events that Olivebranch sponsors. Along the way, you'll learn how to: Preview pages in a browser Define a local site Choose page properties such as background and link colors Create a site map Create links Create a layout with layers and convert the layers to tables Use a tracing image Edit a table Format text with styles Apply a template Attach behaviors Insert a Flash movie If you don't have a printed version of Using Dreamweaver , you may find it easier to follow the tutorial if you print the pages from your browser. You can also download a printable version from the Macromedia web site. Note: This tutorial demonstrates some features that are supported only in 4.0 or later browsers. Take a Guided Tour of Dreamweaver Before you get started, watch the Guided Tour movies in the Dreamweaver Help Pages to familiarize yourself with Dreamweaver's features. Click here to view a Guided tour of Dreamweaver . Preview the completed web site Next, view the completed web site to get an idea of what you'll be working towards. To view the completed Olivebranch site: 1 In Dreamweaver, choose File > Open. Navigate to the Dreamweaver application folder, then open the Tutorial folder, and then the Olivebranch_site folder. 2 In the Olivebranch_site folder, select index.htm to open the Olivebranch home page in the Document window. Do not edit this page, since it is already complete. You will edit an alternate version of this page. 3 Choose File > Preview in Browser, then select a browser with which to view the Olivebranch home page. (Use a 4.0 browser to view this site.) Note: You must have the Flash Player installed in your default browser to view the weekly specials on the Olivebranch home page. If you don't have the Flash Player, locate the installer in the Flash folder on your Dreamweaver product CD, or download it from http://www.macromedia.com/shockwave/download/. 4 Pass the mouse over the four items on the left side of the page ( about, events, and so on) and notice that the items highlight to indicate that they are active links. Click any of these items to explore those pages. Note: The gift basket section of the site is not used. 5 Close the browser when you are finished looking at the site.
<url>html/202.tutorial.fm10.html</url>
<title>Convert a table to layers</title> Convert a table to layers Tables are very useful for creating complex page layouts, and they are supported in both 3.0 and 4.0 browsers. Layers are even more useful for creating complex page layouts, since you can easily reposition page elements that have been placed in layers by dragging them into place. Layers are not supported in 3.0 browsers, however. With Dreamweaver you can take advantage of the best features of tables and layers by quickly switching back and forth between them until the page design meets your requirements. The resulting page, in table format, will look the same in both 3.0 and 4.0 browsers. The About Us page has been started using a table for formatting. Begin by converting the existing table cells to layers. To convert existing table cells to layers: 1 Choose Modify > Layout > Reposition Content Using Layers. 2 In the dialog box that appears, deselect the Show Grid and Snap To Grid options, but leave the other options selected. The Snap to Grid option forces layers to snap to the closest grid location when you create or modify them. Although this does help you align layers, in this case it would prevent you from moving the layers as freely on the page as you'll need to. 3 Click OK to close the dialog box and convert the table cells to layers. Table cells become layers, and the Layer palette appears to help you track all the layers on the current page.
<url>html/202.tutorial.fm11.html</url>
<title>Add a tracing image to guide your layout</title> Add a tracing image to guide your layout You can use a JPG, GIF, or PNG tracing image as a guide to create a web page that you first design in a graphics application. A tracing image acts as a background guide as you lay out a page in the Document window. You will use the tracing image to position layers in the About Us document so that the page design matches the tracing image underneath it. To load a tracing image: 1 Choose View > Tracing Image > Load. 2 Select about_us_comp.gif in the Assets folder, then click Select. 3 In the Page Properties dialog box, use the Image Transparency slider to set the opacity for the tracing image to 50%. Setting the transparency level to 50% causes the tracing image to appear faded in the Document window, making it easier for you to distinguish between the tracing image and editable elements on the page. 4 Click OK to add the tracing image and close the dialog box. A tracing image appears in the workspace, and the existing layers appear on top of it, though not yet aligned with the tracing image. (If a tracing image doesn't appear, make sure there's a check next to Show when you choose View > Tracing Image > Show.) When you load a tracing image, the document's background image and background color are not visible in the Document window but will appear when you view the page in a browser. The tracing image itself is visible only when you are editing the page in the Document window and will never appear when the page is loaded into a browser.
<url>html/202.tutorial.fm12.html</url>
<title>Position the layers</title> Position the layers Now move the layers you created out of the table to match elements in the tracing image and duplicate the design. To position layers on the page: 1 Click the border of the layer containing the text about Olivebranch to select it. A selected layer looks like this: 2 Grab the layer's handle and drag (or use the arrow keys) to move it over the generic text in the tracing image, resizing the layer if needed to match the size of the text block area in the tracing image. Because the two blocks contain different text, the words will not align perfectly over the tracing image in the workspace, but because the tracing image appears only in the workspace, the text in the document layer will appear normal in a browser. 3 Follow the same steps with the layer containing the letter O to move it over the letter O in the tracing image.
<url>html/202.tutorial.fm13.html</url>
<title>Add new layers</title> Add new layers Now add layers to match parts of the tracing image that don't yet appear on your page. To add new layers to a page: 1 Click a blank area in the Document window. Make sure the cursor is not inside an existing layer, or you'll create nested layers, which will keep you from converting the layers back to a table later on. 2 Choose Insert > Layer to add a new layer to the page. 3 Move the layer over the square area in the tracing image that says "Diana close-up photo." Because the Prevent Overlaps option is selected in the Layer palette, you can't position layers on top of each other. You may need to resize the layer in order to drag it into a position that does not overlap another layer. 4 Select the layer and resize it, as needed, to match the area in the tracing image. 5 Repeat these steps to add to more layers to the page over the tracing image areas labeled "Farm photo (with daughter)" and "Tree photo."
<url>html/202.tutorial.fm14.html</url>
<title>Add images</title> Add images Now, insert graphics into each of the layers, then align those graphics over the tracing image. To insert graphics inside layers and align them over the tracing image: 1 Single-click inside the "Diana close-up photo" layer to place the cursor inside it without selecting it. An active layer with a cursor in it looks like this: 2 Choose Insert > Image and select about_diana.jpg in the Assets folder to add the image to the layer. 3 After the image appears in the layer, click the layer's border to select the entire layer, then use the up, down, left, and right arrow keys to align the graphic over the tracing image. (If you need to, resize the layer again to match the tracing image area more precisely.) 4 Repeat these steps, adding the image about_daughter.jpg from the Assets folder to the "Farm photo (with daughter)" layer and the image about_tree.jpg from the Assets folder to the "Tree photo" layer. 5 Close the Layer palette.
<url>html/202.tutorial.fm15.html</url>
<title>Convert layers back to a table</title> Convert layers back to a table Now that you've laid out the page exactly how you want it, convert the layers to a table so that the page will be displayed accurately in 3.0 as well as 4.0 browsers. To convert all layers back to a single table: 1 Choose Modify > Layout > Convert Layers to Table. 2 Click OK to accept the default options in the Convert Layers to Table dialog box. Dreamweaver cannot create a table from overlapping layers, which is why you used the Prevent Overlap option to constrain layer positioning when you created layers from the original table. Preview the page in a browser Now preview the About Us page you just edited. To preview the page in a browser: 1 Press F12 to see your document in your default web browser. You do not have to save a document before you preview it. All browser-related functions work while previewing a document. 2 Compare the file you just worked on to the completed About Us page you opened in a browser earlier. 3 When you're done previewing the file, close both browser windows. 4 Return to Dreamweaver and choose File > Save to save the changes you made to the About Us page. 5 Choose File > Close to close the page.
<url>html/202.tutorial.fm16.html</url>
<title>Edit a table</title> Edit a table The Olivebranch Events page lists concerts, demonstrations, and festivals sponsored by the Olivebranch farm. Olivebranch events are displayed in a table that describes the location, date, and nature of each event. The tutorial file for the Events page contains a complete table of events. You'll edit this table by moving columns and sorting the information contained in its cells. To open the tutorial Events page: 1 In the Site window, double-click the listing for DW2_events_main.htm. If you don't see the Site window, choose Window > Site Files to open it or make it active. The table on the page looks like this: 2 Leave the Site window open, but move it into the background.
<url>html/202.tutorial.fm17.html</url>
<title>Format the table</title> Format the table Move the Where column from the right side of the table to the left to make it the first column in the table. To move columns inside a table: 1 Click the Where cell at the top of the column, then drag the mouse pointer to the last cell in the column to select the entire column. You can also select a column by resting the mouse pointer exactly on the top border of the column, without clicking, until a selection arrow appears; then click once to select the entire column. (If you place the mouse pointer on the table border instead, you'll select the entire table.) 2 Choose Edit > Cut. 3 Click inside the When cell. (Don't select the cell.) 4 Choose Edit > Paste. The Where column is now the first column in the table.
<url>html/202.tutorial.fm18.html</url>
<title>Sort the table</title> Sort the table Next, sort cells in the table alphabetically, by location. To sort table cells: 1 Click anywhere inside the table and choose Commands > Sort Table. 2 In the Sort Table dialog box, specify the following options: Sort By: Column 1 Order: Alphabetically Ascending Then By: Column 2 Order: Numerically Ascending The first sort (Sort By) sorts the table alphabetically, according to the contents in the first column. The second sort (Then By) sorts the table numerically, by the contents of the second column. 3 Click OK to sort the table. Now you'll format the table by centering the contents of cells in the When column. To center the contents of table cells: 1 Click the first cell underneath the When table heading and drag to the bottom of the table to select all cells under the When column. 2 Choose Modify > Selection Properties to open the Property inspector. 3 If you don't see a Horz menu in the Property inspector, click the expander arrow in the lower right corner to display a complete list of properties. 4 Choose Center from the Horz menu. The contents of all cells in the When column are centered.
<url>html/202.tutorial.fm19.html</url>
<title>Format text using custom styles</title> Format text using custom styles A style is a group of formatting attributes that controls the appearance of a block or range of text. A style sheet includes all of the styles for a document. Create a custom style to format the table headings on the Events page. To create a custom style: 1 Choose Window > Styles to open the Style palette. 2 Click Style Sheet to open the Edit Style Sheet dialog box. 3 Click New in the Edit Style Sheet dialog box. 4 Make sure that the Type selection is Make Custom Style (class). 5 Type .tablehead to name the new style and click OK. 6 With Type selected in the list on the left of the Style Definition dialog box, choose the following formatting settings for the new style: Font: Arial, Helvetica, sans-serif Size: 18 points Style: normal 7 Click OK to close the Style Definition dialog box. 8 Click Done to close the Edit Style Sheet dialog box, which now shows the .tablehead style. Now, you'll use the Style palette to apply the .tablehead style to the table headings on the Events page. To apply a custom style: 1 In the Document window, select all three table heading cells by pressing the Control key (Windows) or the Command key (Macintosh) and single-clicking in each cell. 2 Click .tablehead in the Style palette. The cells display the new style in the document. 3 Close the Style palette. 4 Save the changes you made to the Events page by choosing File > Save. 5 Choose File > Close to close the page.
<url>html/202.tutorial.fm2.html</url>
<title>How the Tutorial files are arranged</title> How the Tutorial files are arranged Both the completed and partially completed HTML files used in this tutorial are in the Olivebranch_site folder in the Tutorial folder. Images and other associated files for the site are in folders below the Olivebranch_site folder. (The complete path to the Olivebranch_site folder will vary, depending on where you have Dreamweaver 2.0 installed.) Each file has a meaningful name—for example, the HTML file for the page of Olivebranch-sponsored events is named events_main.htm. The partially completed files you'll be working on have names similar to their counterparts in the complete site, but they begin with DW2_; the partially complete version of events_main.htm, for example, is called DW2_events_main.htm.
<url>html/202.tutorial.fm20.html</url>
<title>Apply a template</title> Apply a template You can use templates to create documents for your site that have a common structure and appearance. Templates are useful if you want to make sure that all of the pages in a site share certain characteristics. Once you apply a single template to a group of pages, you can edit information on all those pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text describing the item for sale) remain unchanged, common template elements (such as navigation bars) are updated on all of the pages that use the template. The Olivebranch Catalog page links to several product pages that describe individual products that the company offers for sale. Because each of the product pages uses an identical layout and format, they were created using a single template. In this section, you'll modify an existing template to modify the product pages it has already been applied to. Then you'll apply a different template to those product pages to reformat them without altering their unique contents. View the product pages Begin by viewing the completed catalog pages in a browser. To open the completed Olivebranch Catalog page: 1 Choose File > Open and select cat_main_index.htm. 2 Choose File > Preview in Browser to open the page in a browser window. 3 Click the links for wines, cheeses, mustards, and oils to see sample product pages. Notice that all product pages share the same navigation bar at the top of the page. In addition to containing links to product pages, the navigation bar includes a link to the main Catalog page and (in the graphics at the far right of the bar) a link back to the Olivebranch home page. 4 Close the browser when you're done previewing the main Catalog page and the product pages it links to. 5 Return to Dreamweaver and choose File > Close to close the completed Catalog page. Now open the partially complete catalog pages in a browser. To open the tutorial version of the Catalog page: 1 Move the Site window to the foreground by choosing Window > Site Files. 2 Find DW2_cat_main_index.htm in the list and double-click it to open it in the Document window. 3 Press F12 to preview the tutorial Catalog page in a browser. 4 Click the links for wines, cheeses, mustards, and oils to see the product pages you'll be working with. As with the completed site, each of the product pages uses the same template, so they look very similar. In this case, however, each page is missing both the link to the main catalog page and the graphic at the top right that links to the Olivebranch home page. 5 After you've explored the links to the product pages, close the browser window. 6 Return to Dreamweaver and choose File > Close to close the main Catalog page.
<url>html/202.tutorial.fm21.html</url>
<title>Edit the template</title> Edit the template Now you'll modify the template for the product pages to fix the broken navigation bar. Once you've fixed the navigation bar in the template, you'll reapply the template to the product pages so that the navigation bar is updated for all of the pages that use the template. To open the template file in the Document window: In the Site window, double-click DW2_cat_product.dwt in the Templates folder of the Olivebranch_site folder. Each template contains both locked and editable regions. Locked regions can be edited only inside the template itself; they appear in a highlight color on all pages the template is applied to. Editable regions are placeholders for the content that is unique to each page the template is applied to. In a template, the editable regions are highlighted. In this template, the navigation bar is in a locked region, while the areas for product photos and text are editable for each product page. Now, edit the template file. First, add a link to the catalog graphic. To add a link from the catalog graphic to the main Catalog page: 1 Single-click the catalog graphic. 2 Choose Window > Properties to open the Property inspector. 3 In the Property inspector, click the file folder next to the Link field and select the file DW2_cat_main_index.htm from the Olivebranch_site folder. 4 Leave the Property inspector open. Next, add a graphic in the upper right corner of the page and link it to the Olivebranch home page. To add a graphic that links to the Olivebranch home page: 1 Click inside the empty cell to the right of the catalog image. 2 Choose Insert > Image and select cat_nav_photos.jpg in the Assets folder. The graphic appears in the cell. 3 Make sure the graphic you just added to the cell is still selected. (If not, single-click to select it.) 4 In the Property inspector, click the file folder next to the Link field and select the file DW2_index.htm from the Olivebranch_site folder. 5 Close the Property inspector. Now that you've edited the template, reapply it to the product pages. To reapply the template to product pages in the catalog: 1 Choose File > Save to save your changes. 2 When you are asked if you want to update all documents in your local site that use this template, click Yes. An Update Pages dialog box appears to display the status of pages in the site as the template is being reapplied. 3 After all files on the site have been updated, close the Update Pages dialog box. Because the main Catalog page contains links to each of the product pages in the site, you can use it to quickly preview all the product pages you reapplied the template to. Open the main Catalog page in a browser, then click the links to the product pages. To see updated product pages: 1 Double-click DW2_cat_main_index.htm in the Site window to reopen it in the Document window. 2 Press F12 to preview this page in your primary browser, or chose File > Preview in Browser to select a different browser. 3 Click the links for wines, cheeses, mustards, and oils to go to each of the product pages. 4 On each product page, click the catalog and Olivebranch home page links you added to the navigation bar to see how the changes you made in the template have been applied to the pages. 5 Close the browser when you're finished testing the links in the navigation bar on the product pages. 6 Return to Dreamweaver and choose File > Close.
<url>html/202.tutorial.fm22.html</url>
<title>Apply a different template to a page</title> Apply a different template to a page You can apply a new template to a page even if the page already uses a template. Page content remains unchanged as long as the new template contains the same editable region names as the template previously attached to the document. This technique is useful when you want to change the appearance of a group of pages without altering the unique content of those pages. For example, a catalog may have summer and winter versions. You can create an entirely new design without editing the content by using a different template to change the background images and colors of the page, or by rearranging the positions of the editable regions. Here you'll apply a winter template to a product page to update its appearance for a new season. To apply a new template to an existing page: 1 In the Site window, double-click DW2_cat_wines.flc.htm to open the product page for wines in the Document window. Sections of the page that are highlighted in a different color identify locked regions that can be edited only in the template used for this page. (If you don't see any color difference between regions on the page, choose Edit > Preferences, select Highlighting from the Category list, and select the Show option next to Locked Regions. If you still don't see the the highlight color, choose View > Invisible Elements.) 2 Choose Window > Templates to open the Template palette. The Template palette contains a list of all template (dwt) files in the local site, located in the Templates folder of the Olivebranch_site folder. 3 In the Template palette, click cat_product_winter.dwt to highlight it in the list. 4 Resize the Template palette to preview the winter template inside the palette. The winter template has a different design than the template that is currently applied to the product pages, but because it contains the same editable regions as the current template, you can apply it to the page without breaking anything. 5 Click Apply to Page to apply the winter template to the product page for wines. 6 Close the Template palette. 7 Press F12 to preview the new product page for wines in a browser window. 8 When you're finished previewing, close the browser window and return to Dreamweaver. 9 If you want, you can choose File > Save to save the changes you just made to the wines page; links in the site will work regardless of which template you applied to the page. 10 Choose File > Close to close the page.
<url>html/209.formatting.fm5.html</url>
<title>Modifying font combinations</title> Modifying font combinations Use the Edit Font List command to set the font combinations that appear in the Property inspector and the Text > Font menu. To modify font combinations: 1 Choose Text > Font > Edit Font List. 2 Select the font combination from the Font Menu list at the top of the dialog box. The fonts in the selected combination are listed in the Chosen Fonts list in the lower left corner of the dialog box. To its right is a list of all fonts installed on your system. 3 Choose from the following options: To add or remove fonts from a font combination, click the directional buttons between the Chosen Fonts list and the Available Fonts list. To add or remove a font combination, click the plus (+) and minus (-) buttons, respectively, at the top of the dialog box. To add a font that is not installed on your system, type the font name in the text box below the Available Fonts list and click the directional arrow to add it to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are authoring on a Macintosh. To move the font combination up or down in the list, click the directional arrow buttons at the top of the dialog box. To add a new combination to the font list: 1 Choose Text > Font > Edit Font List. 2 Select a font from the Available Fonts list and click the << button to move the font to the Chosen Fonts list. 3 Repeat step 2 for each subsequent font in the combination. To add a font that is not installed on your system, type the font name in the text box below the Available Fonts list and click the << button to add the font to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are authoring on a Macintosh. 4 When you have finished selecting specific fonts, select a generic font family from the Available Fonts menu and click the << button to move the generic font family to the Chosen Fonts list. Generic font families include cursive, fantasy, monospace, sans-serif, and serif. If none of the fonts in the Chosen Fonts list is available on the user's system, the text appears in the default font associated with the generic font family. For example, the default monospace font on most systems is Courier.
<url>html/209.formatting.fm6.html</url>
<title>Changing the color of text</title> Changing the color of text You can change the color of selected text so that the new color overrides the text color set in the Page Properties. To change the color of text: 1 Select the text. 2 Choose from the following options: Choose a color from the palette of browser-safe colors by clicking the color box in the Property inspector. Choose Text > Color. The system Color Picker dialog box appears. Select a color and click OK. To define the default text color, use the Modify > Page Properties command. See Defining default text colors . To return text to the default color: 1 In the Property inspector, click the color box to open the palette of browser-safe colors. 2 Click the Default button (the middle button in the lower right corner).
<url>html/209.formatting.fm7.html</url>
<title>Aligning text and elements</title> Aligning text and elements Align text on the page using the Property inspector or the Text > Alignment menu. Center any element on a page using the Text > Alignment > Center command. To align text: 1 Select the text you want to align. 2 Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Alignment and choose an option. To center elements: 1 Select the desired element (image, plugin, table, or other page element). 2 Choose Text > Alignment > Center. To indent text and remove indentation: 1 Select the desired text. 2 Click the Indent or Outdent button in the Property inspector, choose Text > Indent or Outdent, or choose List > Indent or Outdent from the shortcut menu. This applies or removes the BLOCKQUOTE tag when the selected text is a paragraph or heading; it adds or removes an extra UL or OL tag when the selected text is a list.
<url>html/209.formatting.fm8.html</url>
<title>Text properties</title> Text properties The Property inspector displays the formatting attributes of text selected in the Document window and lets you change them. You can also use text properties to specify links and targets for selected text. Place the cursor in a text block to view text properties in the Property inspector. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. See also Applying paragraph and heading tags and Changing font characteristics . Format Applies a default block style to the text. Heading styles are used to apply a standardized hierarchical structure to formatted text. The smaller the number of the heading, the bigger the heading will be. For example, Heading 1 describes the largest heading. Font Combination Applies the selected font combination to the text. Browsers display text using the first font in the combination that is installed on the user's system. Default specifies the default font for the selected text. Size Applies either a specific font size (1 through 7) or a font size (+ or - 1 through + or - 7) relative to the BASEFONT size (the default is 3). There is no way to specify a particular point size for fonts in an HTML tag; instead, use style sheets to specify point sizes for different kinds of text. Bold and Italic Apply the respective style. Left, Center, and Right Alignment Apply the respective alignment. Link Makes the selected text a hyperlink to the specified URL. Type the URL; click the folder icon to browse to and select a page in your site; drag the point-to-file icon to a file in the Site window; or drag a file from the Site window into the box. Target Specifies the frame or window in which the linked page should load. The names of all the frames in the current document appear on the list. If the specified frame does not exist when the current document is opened in a browser, the linked page loads in a new window that has the name you specified. Once this window exists, other files can be targeted to it. You can also choose from the following reserved target names: _blank loads the linked file in a new, unnamed browser window. _parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then the linked file loads into the full browser window. _self loads the linked file in the same frame or window as the link. This target is implied, so it generally need not be specified. _top loads the linked file in the full browser window, thereby removing all frames. Text Color Displays the text in the selected color. Select a browser-safe color by clicking the color box, or enter a hex value (for example, #FF0000) into the adjacent text box. Unordered List Turns the selected paragraph or heading into an item in a bulleted list. If no text is selected, a new bulleted list is started. Ordered List Turns the selected paragraph or heading into an item in a numbered list. If no text is selected, a new numbered list is started. List Item Opens the List Properties dialog box. See List properties . Indent and Outdent Indent or remove indentation from the selected text by applying or removing the BLOCKQUOTE tag. In a list, indenting creates a nested list, and removing the indentation unnests the list.
<url>html/209.formatting.fm9.html</url>
<title>Creating lists</title> Creating lists You can create numbered lists, bulleted lists, and definition lists from existing text or from new text as you type in the Document window. Lists can also be nested. To create a new list: 1 Position the cursor on the line where you want to add a list of new items. 2 Click the Bulleted or Numbered List buttons on the Property inspector, or choose Text > List and select the type of list desired—Unordered (Bulleted) List, Ordered (Numbered) List, or Definition List. 3 Begin typing the list, pressing Enter to begin another list item. 4 To complete the list, press Enter twice. To create a list using existing text: 1 Select a series of paragraphs to make into a list. 2 Click the Bulleted or Numbered List button in the Property inspector, or choose Text > List and select the type of list desired—Unordered (Bulleted) List, Ordered (Numbered) List, or Definition List. To create a nested list: 1 Select the list items that you want to nest. 2 Click the Indent button in the Property Inspector or choose Text > Indent.
<url>html/210.images.fm1.html</url>
<title>Images overview</title> Images overview Dreamweaver, like most browsers, can display both JPEG and GIF images. Dreamweaver, Microsoft Internet Explorer 4.0 and later, and Netscape Navigator 4.04 and later also support PNG images. In general, JPEG is the superior format for photographic or continuous-tone images, and GIF is preferred for noncontinuous tone images or those with large areas of flat colors. The PNG format is a patent-free replacement for GIF that includes support for indexed-color, grayscale, and true-color images. It also provides alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks. To use an image as a page background, specify it as a page property. See Defining a background image or page color . To overlap images, insert them in layers. See Layers overview .
<url>html/210.images.fm2.html</url>
<title>Inserting an image</title> Inserting an image For images to appear in a Dreamweaver document, the image files must be within a defined local site. If you choose a file outside a local site, Dreamweaver will ask if you want the file copied to a folder within the local site. See Creating a local site . If you specify a path for a source file outside the local root folder, Dreamweaver displays a placeholder for the image. To insert an image: 1 Do one of the following: Place the cursor where you want the image to appear on the page and then choose Insert > Image or click the Insert Image button on the Common panel of the Object palette. Drag the Insert Image button from the Object palette to the desired location on the page. Drag an image from the desktop to the desired location on the page; then skip to step 3. 2 In the dialog box that appears, type the path for the source file or click Browse to choose a file. See About relative and absolute paths for more information on specifying pathnames. To prevent this dialog box from appearing, turn off Show Dialog When Inserting Objects in General preferences. Note: Content linked via a root-relative path does not appear when you preview local files in a browser, because browsers aren't responsible for recognizing site roots—servers are. To preview content linked with root-relative paths, put the file on a remote server to view the page in a browser. See also About relative and absolute paths . 3 Set image properties in the Property inspector. See Image properties .
<url>html/210.images.fm3.html</url>
<title>Creating a rollover</title> Creating a rollover A rollover is an image that changes when the cursor moves across the image. A rollover is actually two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the cursor rolls over the primary image). For information about changing an image in response to a different event (for example, a mouse click) or about changing a different image than the one being rolled over, see Swap Image . To create a rollover: 1 Place the cursor in the Document window where you want the rollover to appear. 2 Do one of the following: Choose Window > Objects to open the Object palette and click the Rollover button. Choose Insert > Rollover Image. 3 In the dialog box that appears, enter the following information: Type the path and filename of the original image in the Original Image field, or browse to and select an image. Type the path and filename of the rollover image in the Rollover Image field, or browse to and select an image. To create link, replace the # sign in the Link field with a path and filename, or browse to and select a file. To have Dreamweaver preload the images in the browser's cache, select the Preload Images option. 4 Click OK. To test a rollover: 1 Choose File > Preview in Browser. 2 In the browser, roll the cursor over the primary image. The display should switch to the rollover image.
<url>html/210.images.fm4.html</url>
<title>Image properties</title> Image properties When an image is selected, choose from the following properties in the Property inspector: The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Image Lets you name the image so you can refer to it with a scripting language, such as JavaScript or VBScript. W and H Reserve space for the image on the page as the page is loading. Dreamweaver enters the image's original size automatically. Default and unlabeled values are pixels. You can also enter a number and "in" for inches, "pc" for picas, "pt" for points, "mm" for millimeters, "cm" for centimeters, and combinations thereof, such as 2in+5mm. Dreamweaver converts the values to pixels in the source HTML. Changing these values scales the display size of this instance of the image. Changed values appear in boldface. To restore the original values, click the field labels. Changing the width and height does not reduce download time because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images. Src Specifies the source file for the image. Type the path or click the folder icon to browse to and select the source file. See About relative and absolute paths for information on entering pathnames. Link Specifies a hyperlink for the image. Type the URL, drag the point-to-file icon to a file in the Site window, or click the folder icon to browse to and select a document on your site. Align Aligns an image and text on the same line. See Aligning elements . Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image. V Space and H Space Add space, in pixels, around the top and bottom, and left and right of the image, respectively. Target Specifies the frame or window in which the linked page should load. (This option is not available when there is no link on the image.) The names of all the frames in the current document appear on the list. If the specified frame does not exist when the current document is opened in a browser, the linked page loads into a new window that has the name you specified. Once this window exists, other files can be targeted to it. You can also choose from the following reserved target names: _blank loads the linked file into a new, unnamed browser window. _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then the linked file loads into the full browser window. _self loads the linked file into the same frame or window as the link. This target is implied, so it generally need not be specified. _top loads the linked file into the full browser window, thereby removing all frames. Low Src Specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they're waiting for, but you can use any image with the same dimensions as the main image. Border Sets the width of the link border around the image in pixels. Enter 0 for no border. Map Enables you to create client-side image maps. See Creating image maps . Refresh Resets the W and H values to the original size of the image. Edit Launches the image editor you specified in External Editors preferences and opens the selected image. When you save your image file and return to Dreamweaver, Dreamweaver updates the Document window with the edited image. See Using an external image editor .
<url>html/210.images.fm5.html</url>
<title>Aligning elements</title> Aligning elements The following Align options in the Property inspector are associated with certain selected elements, such as images and plugins. Browser default Depends on the browser, but generally specifies a baseline alignment. Baseline and Bottom Align the text baseline to the bottom of the object. Absolute bottom Aligns the absolute bottom of the text, including descenders (as in the letter "g") with the bottom of the object. Top Aligns the top of the tallest character in the text line with the top of the object. Text top Aligns the tallest character in the text line with the top of the object. Middle Aligns the text baseline with the middle of the object. Absolute middle Aligns the middle of the object with the middle of the text. Left Places the object on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces left-aligned objects to wrap to a new line. Any text following the object on the line then wraps to the former line, appearing above the object. Right Places the object on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line. Any text following the object on the line then wraps to the former line, appearing above the object.
<url>html/214.forms.fm11.html</url>
<title>Hidden field properties</title> Hidden field properties To display hidden field properties in the Property inspector, select a hidden field in a form. If you cannot see hidden fields, choose Edit > Preferences > Invisible Elements and select the Hidden Form Fields option. See also Adding an object to a form . HiddenField Assigns a name to the field. This field is required and the name must be unique. Value Sets the value of the field.
<url>html/214.forms.fm12.html</url>
<title>Generic field properties</title> Generic field properties Generic field properties appear in the Property inspector only when Dreamweaver encounters an INPUT TYPE value that it does not recognize. If you change the field type in the Property inspector to a value that Dreamweaver does recognize, the Property inspector updates to show the properties for the recognized type. (This scenario could happen if you made a typing error in the INPUT TYPE value, for example.) InputField Assigns a name to the field. This field is required, and the name must be unique. Type Sets the input type of the field. The contents of this field reflect the INPUT TYPE value that currently appears in your HTML. Value Sets the value of the field. Parameters Opens the Parameters dialog box so you can view the current attributes of the field, as well as add or remove attributes.
<url>html/214.forms.fm13.html</url>
<title>Processing forms</title> Processing forms Forms are processed by the script or application specified in the ACTION attribute of the FORM 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). For example, you might have a small form at the bottom of a page that contains only two radio buttons labeled Yes and No, plus a Submit button. The form action might be a JavaScript function defined in the HEAD of the document that jumps to one document if the user selects Yes and to a different document if the user selects No: function processForm(){ if (document.forms[0].elements[0].checked){ window.location.href = "userAnsweredYes.html"; }else{ window.location.href = "userAnsweredNo.html"; } } To use a client-side JavaScript function as the form action: 1 Select a form. 2 In the Property inspector, type javascript: followed by the name of the function in the Action field: for example, javascript:processForm() . Do not put a space between the colon and the name of the function. You can handle lots of form processing tasks using client-side scripting, but you can't save the data entered by the user or send it to someone else. For this you need a server-side application such as a Common Gateway Interface (CGI) script. CGI scripts can be written in Perl, C, Java, or another programming language. There are several sites on the web that offer free CGI scripts that you can either use as is or modify to fit your needs. See HTML resources . You can also ask your Internet service provider or web team if there are any CGI scripts that are already configured to run on your server that you can use.
<url>html/214.forms.fm2.html</url>
<title>Creating a form</title> Creating a form Use either the Insert > Form command or the Forms panel of the Object palette to create a form. To create a form 1 Do one of the following: Place the cursor where you want the form to appear and choose Insert > Form. Place the cursor where you want the form to appear and click the Form button on the Forms panel of the Object palette. Drag the Form button to the desired location on the page. If there is no visible result, check that View > Invisible Elements is on. 2 Select the form and set form properties in the Property inspector. Choose from the following options: Form Name Assigns a name to the form. Naming a form makes it possible to control it with a scripting language, such as JavaScript or VBScript. Action Identifies the server-side application that processes the form information, specified as a URL. Enter the path for the application or click the folder icon to locate the file. Method Defines how the form data is handled. 3 In the Property inspector, choose one of the following methods to define how the form data is handled: Get Appends form values to the URL and sends the server a GET request. Because URLs are limited to 8192 characters, don't use the GET method with long forms. Post Sends the form values in the body of a message and sends the server a POST request. Default Uses the browser default method (generally GET).
<url>html/214.forms.fm3.html</url>
<title>Adding an object to a form</title> Adding an object to a form Once you add an object to a form, you can set its properties using the Property inspector. To add an object to a form: 1 Do one of the following: Place the cursor inside the form boundary and choose an object from the Insert > Form Object menu. Place the cursor inside the form boundary and click an object button on the Forms panel of the Object palette. Drag an object button to the desired location inside the form boundary. 2 Specify the properties for the object in the Property inspector (choose Window > Properties to display the Property inspector if it is not already open). Text fields Accept any type of text, alphabetic or numeric. The entered text can be displayed as a single line, as multiple lines, or as bullets or asterisks (for password protection). See Text field properties . Buttons Perform standard tasks, such as submitting or resetting forms, or a custom function. You can enter a custom label for a button, or use one of the predefined labels. See Button properties . Image fields Can be used in place of Submit buttons. See Image field properties. Checkboxes Allow multiple responses in a single group of options. See Checkbox properties . Radio buttons Represent exclusive choices. Selecting a button within a group deselects all others in the group. See Radio button properties . List/menus List a set of values from which users can choose. The object can be a pop-up menu, in which values in the list appear only when you click the object (for a single response), or a list box that always displays the values in a scrolling list (for multiple responses). See List/Menu properties . File fields Let users browse to files on their hard drives and upload them as form data. See File field properties. Hidden fields Let you store information (such as the recipient of form data or the subject of the form) that is not relevant to the user but which will be used by the application that processes the form. See Hidden field properties. 3 Type a label or descriptive text, if desired, next to the object. You can apply text formatting to form object labels. See Changing font characteristics for more information.
<url>html/214.forms.fm4.html</url>
<title>Text field properties</title> Text field properties To display text field properties in the Property inspector, select a text field in a form. See also Adding an object to a form . Text Field Assigns a name to the field. Every text field must have a unique name. Char Width Sets the maximum number of characters that can be displayed in the field. This number can be less than Max Chars, which specifies the maximum number of characters that can be entered in the field. Max Chars/Num Lines Sets the maximum number of characters that can be entered in the field for single-line text fields and sets the height of the field for multiline text fields. Use Max Chars to limit zip codes to 5 digits, limit passwords to 10 characters, and so on. Type Designates the field as a single-line, multiline, or password field. Choosing Single-line results in an INPUT tag with its TYPE attribute set to TEXT . The Char Width setting maps to the SIZE attribute, and the Max Chars setting maps to the MAXLENGTH attribute. Choosing Password results in an INPUT tag with its TYPE attribute set to PASSWORD . The Char Width and Max Chars settings map to the same attributes as in single-line text fields. When a user types in a password text field, the input appears as bullets or asterisks to protect it from observation by others. Choosing Multi-line results in a TEXTAREA tag. The Char Width setting maps to the COLS attribute, and the Num Lines setting maps to the ROWS attribute. Init Value assigns the value displayed in the field when the form first loads.
<url>html/214.forms.fm5.html</url>
<title>Button properties</title> Button properties To display button properties in the Property inspector, select a button in a form. See also Adding an object to a form . Button Assigns a name to the button. Two reserved names, Submit and Reset, tell the form to submit the form data to the processing application or script and to reset all the form fields to their original values, respectively. Label Determines the text that appears on the button. Action Determines what happens when the button is clicked. You can design the button to clear the contents of the form in which it appears, to submit the contents of the form, or to do nothing. Selecting Submit Form automatically sets the name of the button to Submit. Selecting Reset Form automatically sets the name of the button to Reset. None means that neither a submit nor reset action will occur when the button is clicked.
<url>html/214.forms.fm6.html</url>
<title>Image field properties</title> Image field properties To display image field properties in the Property inspector, select an image field in a form. See also Adding an object to a form . ImageField Assigns a name to the image field. SRC Sets the source file for the field. Click the folder icon to browse to an image file on your hard drive. Value Specifies the value that is passed to the server when the form is submitted. Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers set to download images manually. In some browsers, this text also appears when the pointer is over the image
<url>html/214.forms.fm7.html</url>
<title>Checkbox properties</title> Checkbox properties To display checkbox properties in the Property inspector, select a checkbox in a form. See also Adding an object to a form . CheckBox Assigns a name to the checkbox. Checked Value Sets the value of the checkbox when it is checked. This is the value that is sent to the server-side application (for example, a CGI script) when the user submits the form. Initial State Specifies whether the checkbox is checked or unchecked when the form first loads.
<url>html/214.forms.fm8.html</url>
<title>Radio button properties</title> Radio button properties To display radio button properties in the Property inspector, select a radio button in a form. See also Adding an object to a form . RadioButton Assigns a name to the button. All radio buttons in a group must have the same name. Checked Value Sets the value of the radio button when it is turned on. This is the value that is sent to the processing application (for example, a CGI script) when the user submits the form. Assign different values to each radio button in a group. Initial State Determines whether the button is turned on or off when the form first loads. Only one button in a group can have an initial state of On.
<url>html/204.creatingdocuments.fm20.html</url>
<title>META properties</title> META properties META tags are HEAD elements that record information about the current page, such as the character encoding, author, copyright, and keywords. META tags can also be used to give information to the server, such as the expiration date, refresh interval, and PICS rating for the page. Attribute Specifies whether the META tag contains descriptive information about the page ( NAME ) or HTTP header information ( HTTP-EQUIV ). Value Specifies the type of information being offered. Some values, such as description, keywords, and refresh, are already well-defined (and have their own special Property inspectors in Dreamweaver), but you can specify practically any value (for example, creationdate, documentID, level). Content Is the actual information. For example, if you specified level as the Value, Content might be beginner, intermediate, or advanced.
<url>html/204.creatingdocuments.fm21.html</url>
<title>Title properties</title> Title properties There is only one title property: the title of the page. The title appears in the title bar of the Document window in Dreamweaver as well as the browser's title bar when you view the page in a browser. Enter the page title in the field labeled Title.
<url>html/204.creatingdocuments.fm22.html</url>
<title>Keywords properties</title> Keywords properties Many popular search engine robots read the contents of the Keywords META tag and use the information to index your pages in their databases. Some search engines put a limit on the number of keywords or characters they will index, and some ignore all keywords if you go beyond the limit. For this reason it's a good idea to limit your keywords to a few well-chosen words. Enter your keywords, separated by commas, in the field labeled Keywords.
<url>html/204.creatingdocuments.fm23.html</url>
<title>Description properties</title> Description properties Many popular search engine robots read the contents of the Description META tag. Some use the information to index your pages in their databases, and some also display the information below the link to your page in the search results instead of the first few lines of your document. Some search engines put a limit on the number of characters they will index, so it's a good idea to limit your description to the fewest number of words possible (for example, "Pork barbecue catering in the Albany, Georgia area." or "Unique web design at a reasonable price for clients around the world."). Enter descriptive text in the field labeled Description.
<url>html/204.creatingdocuments.fm24.html</url>
<title>Refresh properties</title> Refresh properties Use the Refresh element to specify that your page should refresh—by reloading the current page or going to a different one—automatically after a certain amount of time. Action Specifies whether to go to a different URL or to refresh the current page. To go to a different URL, click the folder icon to browse to and select the page to load. Delay Is the time in seconds to wait before refreshing the page. To refresh the page immediately, enter 0 in this field.
<url>html/204.creatingdocuments.fm25.html</url>
<title>Base properties</title> Base properties Use the Base element to set the base URL against which all document-relative URLs in the page will be resolved. Href Is the base URL. Type in a path, or click the folder icon to browse to and select a file. Target Specifies the window in which all linked documents should open. Choose one of the frames in the current frameset, or one of the following reserved window names, if desired: _blank loads the linked document in a new, unnamed browser window. _parent loads the linked document in the parent frameset or window of the frame in which the link is contained. If the frame containing the link is not nested, then the linked document loads into the full browser window. _self loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it. _top loads the linked document in the full browser window, thereby removing all frames.
<url>html/204.creatingdocuments.fm26.html</url>
<title>Link properties</title> Link properties Use the Link element to define a relationship between the current document and another file. Href Is the URL of the file for which you are defining a relationship. Type in a path, or click the folder icon to browse to and select a file. ID Specifies a unique identifier for the link. Title Describes the relationship. This attribute has special relevance for linked style sheets; for more information, see the HTML 4.0 specification on the W3C web site . Rel Specifies the relationship between the current document and the document in the Href field. Possible values include Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark. To specify more than one relationship, separate values with a space. Rev Specifies a reverse relationship (the opposite of Rel) between the current document and the document in the Href field. Possible values are the same as for Rel.
<url>html/204.creatingdocuments.fm3.html</url>
<title>Using visual guides in the design process</title> Using visual guides in the design process Dreamweaver has many features that help you design documents and predict how they will appear in browsers. You can: Instantly snap the Document window to the desired window size to see how the elements fit on the page. Use rulers to provide a visual cue for positioning and resizing layers or tables. Use a tracing image as the page background to help you duplicate a design created in an illustration or image editing application. Use the grid for precise positioning of layers. Grid marks on the page help you align layers, and when snapping is enabled, layers automatically align to the grid when created or moved. (Other objects, such as tables, images, and paragraphs, do not snap to the grid.)
<url>html/204.creatingdocuments.fm4.html</url>
<title>Resizing the Document window</title> Resizing the Document window The current dimensions (in pixels) of the Document window, along with several common monitor sizes, appear in the Window Size pop-up menu in the window's status bar. To help you design a page that looks good at a specific resolution (or several different resolutions), you can snap the Document window to any of the sizes listed on the pop-up menu. To change the values listed in the Window Size pop-up menu: 1 Choose Edit > Preferences and select Status Bar. 2 Click any of the Width or Height values in the Window Sizes list and type a new value. To make the Document window snap only to a specific width (leaving the height unchanged), select a Height value and delete it. 3 Click the Description field to enter descriptive text about a specific size. For example, you might type "SVGA" or "average PC" next to the entry for a 800 x 600 pixel monitor, and "17-in. Mac" next to the entry for a 832 x 624 pixel monitor. To add a value to the Window Size pop-up menu: 1 Choose Edit > Preferences > Status Bar. 2 Click the last value in the list and press Tab three times to create a new row. 3 Enter values for Width, Height, and Description.
<url>html/204.creatingdocuments.fm5.html</url>
<title>Displaying rulers</title> Displaying rulers Rulers can be displayed on the left and top borders of the page in pixels, inches, or centimeters. To change ruler settings, choose from the following options: To toggle rulers on and off, choose View > Rulers > Show. To change the origin, drag the zero point onto the page. To reset the origin to its default position, choose View > Rulers > Reset Origin. To change the unit of measure, choose View > Rulers and select Pixels, Inches, or Centimeters.
<url>html/204.creatingdocuments.fm6.html</url>
<title>Using a tracing image</title> Using a tracing image Use a tracing image as a guide to re-create a page design that was mocked up in a graphics application. A tracing image is a JPG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position. The tracing image is visible only in Dreamweaver. It is never visible when you view the page in a browser. When the tracing image is visible, the background image and color are not visible in the Document window; however, they will be visible when the page is viewed in a browser. To place a tracing image in the Document window: 1 Choose View > Tracing Image > Load. 2 In the dialog box that appears, select an image and click OK. 3 The Page Properties dialog box appears. Specify the transparency for the image by dragging the Image Transparency slider. You can also choose a tracing image or change the transparency of the current tracing image at any time from the Page Properties dialog box by choosing Modify > Page Properties. To toggle the display of the tracing image: Choose View > Tracing Image > Show. When the tracing image is visible, the background image and color are not visible. To change the position of a tracing image, do one of the following: To specify the position of the tracing image, choose View > Tracing Image > Adjust Position, then enter X and Y coordinate values. To move the image 1 pixel at a time, use the arrow keys To move the image 5 pixels at a time, press Shift and the arrow keys To move the tracing image back to the upper left corner of the document window (0,0), choose View > Tracing Image > Reset Position. To align the tracing image to a selected object: 1 Select an object in the Document window. 2 Choose View > Tracing Image > Align with Selection. The upper left corner of the tracing image is aligned with the upper left corner of the selected object.
<url>html/212.layers.fm4.html</url>
<title>Layer preferences</title> Layer preferences Use Layer preferences to define the default settings for new layers. Choose Edit > Preferences and then click Layers to change Layer preferences. Tag Determines the default tag used to define the layer. SPAN and DIV create CSS layers; LAYER and ILAYER create Netscape layers. Visibility Determines whether layers are visible by default. Width and Height Set the default width and height of layers created by Insert > Layer. Background Color Determines the default background color. Background Image Specifies a default background image. Nesting Makes a layer drawn within the boundaries of an existing layer a nested layer. Press Control (Windows) or Command (Macintosh) to change this setting temporarily while drawing a layer.
<url>html/212.layers.fm5.html</url>
<title>Layer properties</title> Layer properties Use the Property inspector to specify the name and location of a layer as well as to set other layer options. To see all of the following properties, click the expander arrow in the lower right corner of the Property inspector. Layer ID Specifies a name to identify the layer in the Layer palette and for scripting. Enter a name in the unlabeled box on the left side of the Property inspector. Use only standard alphanumeric characters for a layer name. Do not use special characters such as spaces, hyphens, slashes, or periods. L and T Specify the position of the layer relative to the top left corner of the page or parent layer. W and H Specify the width and height of the layer. These values are overridden if the content of the layer exceeds the specified size. For CSS layers, the default values for location and size are in pixels (px). You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. The Overflow setting controls how CSS layers react when the content exceeds the layer's size. Z-Index Determines the z-index, or stacking order, of the layer. Higher-numbered layers appear above lower-numbered layers. Values can be positive or negative. It's easier to change the stacking order of layers using the Layer palette than to enter specific z-index values. See Changing the stacking order of layers . Netscape layers (those with the LAYER or ILAYER tag) can also be stacked relative to other layers on the page. When you select a Netscape layer, two additional options appear in the lower right corner of the Property inspector. Use the A/B option to select a relative stacking position and then choose the name of another layer from the pop-up menu directly to the right. (A specifies a layer above the current layer; B specifies a layer below the current layer.) Vis Determines the initial display condition of the layer. 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. Inherit uses the visibility property of the layer's parent. Visible displays the layer contents, regardless of the parent's value. Hidden hides the layer contents, regardless of the parent's value. Note that hidden layers created with LAYER and ILAYER still take up the same space as if they were visible. Bg Image Specifies a background image for the layer. Type the path for the image in the text box or click the folder icon to browse to and select an image file. Bg Color Specifies a background color for the layer. Leave this option blank to specify a transparent background. Tag Determines whether the layer is a CSS layer or a Netscape layer. SPAN and DIV create CSS layers; LAYER and ILAYER create Netscape layers. Overflow (CSS layers only) Determines what happens if the contents of a layer exceed its size. Choose from the following options: Visible increases the layer size so that all of the layer's contents are visible. The layer expands downward and to the right. Hidden maintains the layer's size and clips any content that doesn't fit. No scroll bars are provided. Scroll adds scroll bars to the layer regardless of whether the contents exceed the layer's size. Specifically providing scroll bars avoids confusion resulting from the appearance and disappearance of scroll bars in a dynamic environment. This option works only in browsers that support scroll bars. Auto makes scroll bars appear only when the layer's contents exceed its boundaries. Clip Defines the part of the layer that is visible. Enter values that represent the distance in pixels from the layer's boundaries. T (top) and L (left) settings are relative to the layer, not to the page. Use Left, Top or PageX, PageY (Netscape layers only) Lets you position a layer in relation to its parent. The Left, Top option places the layer in relation to the top left corner of its parent. The PageX, PageY option places the layer in an absolute location relative to the top left corner of the page, regardless of the position of the parent layer. Src (Netscape layers only) Lets you display another HTML document within the layer. Type the path of the document or click the folder icon to browse to and select the document. Note that Dreamweaver does not display this property in the Document window. A/B (Netscape layers only) Specifies the layer above (A) or below (B) the current layer in the stacking order (z-index). Only layers previously defined in the document will appear in the list of layer names to the right of the A/B menu.
<url>html/212.layers.fm6.html</url>
<title>Setting properties for multiple layers</title> Setting properties for multiple layers 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. To select multiple layers, press Shift while selecting layers. See Manipulating layers . For information about formatting text in layers, see Text properties . L and T Specify the position of the layer from the top left corner of the page or parent layer. W and H Specify the width and height of the layer. These values are overridden if the content of the layer exceeds the specified size. For CSS layers, the default values for location and size are in pixels (px). You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. Vis Determines the initial display condition of the layer. 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. Inherit uses the visibility property of the layer's parent. Visible displays the layer contents, regardless of the parent's value. Hidden displays the layer contents as transparent, regardless of the parent's value. Note that hidden layers created with LAYER and ILAYER still take up the same space as if they were visible. Tag Determines whether the layer is a CSS layer or a Netscape layer. SPAN and DIV create CSS layers; LAYER and ILAYER create Netscape layers. Bg Image Specifies a background image for the layer. Type the path for the image in the text box or click the folder icon to browse to and select an image file. Bg Color Specifies a background color for the layer. Leave this option blank to specify a transparent background.
<url>html/212.layers.fm7.html</url>
<title>Layer palette</title> Layer palette The Layer palette is a visual map of the layers in your document. Choose Window > Layers to open the Layer palette. Layers are displayed as a stacked list of names; the first created layer is at the bottom of the list, and the most recently created layer is at the top of the list. Nested layers are displayed as names connected to parent layers. Click the expander arrow to show or hide nested layers. Use the Layer palette to prevent overlaps, to change the visibility of layers, to nest or stack layers, and to select one or more layers. To nest a layer within another layer, see Nesting layers . To select one or more layers, see Manipulating layers . To change the stacking order of a layer, see Changing the stacking order of layers . To change the visibility of a layer, see Changing layer visibility . To prevent layers from overlapping each other, see Preventing layer overlaps .
<url>html/212.layers.fm8.html</url>
<title>Manipulating layers</title> Manipulating layers As you work with your page layout, layers can be activated, selected, or resized. Putting layers in active mode lets you place content in layers. Selecting layers lets you align, reposition, or resize layers. Resizing layers lets you change the dimensions of a single layer or make two or more layers the same height and width. Different Property inspectors appear when you work with single or multiple layers. See Layer properties and Setting properties for multiple layers . Also, the layer Modify menu options are enabled only when multiple layers are selected. To prevent layers from overlapping each other, use the Prevent Overlap option. See Preventing layer overlaps .
<url>html/212.layers.fm9.html</url>
<title>Activating layers</title> Activating layers Activate a layer so that objects can be placed in the layer. Activating a layer places the cursor in the layer, highlights the layer's border, and displays the selection handle, but does not select the layer. To activate a layer: Click anywhere inside the layer.
<url>html/213.frames.fm1.html</url>
<title>Frames overview</title> Frames overview Frames divide a web page so that different files can be loaded into defined areas on the same page. Frames commonly define a navigation area and a content area for a page. When you split a document into frames, Dreamweaver creates an untitled frameset file and untitled documents in each of the new frames. What a user sees as a single web page with two frames is actually three separate files: the frameset file and two files containing the content that appears inside the frames. A frameset is a file that defines a web page with frames. A frameset stores information about the size and location of the page's frames along with the names of the files that should be loaded as the content for each of the frames. Click Show Me for an introduction to creating frames. You can change the properties of frames and framesets, resize frames, and use links to control their contents. When View > Frame Borders is off, the frameset appears exactly as it does in a browser. When frame borders are displayed, Dreamweaver adds space around the document for the border and widens small borders for easier dragging and selecting.
<url>html/213.frames.fm10.html</url>
<title>Specifying frame sizes</title> Specifying frame sizes Drag a frame border in the Document window to set approximate sizes for frames; then use the Property inspector to specify how browsers allocate space to frames when there is not enough room to display all frames at full size. To specify frame sizes: 1 Click a frame border to select the frameset. Choose View > Frame Borders if the borders aren't visible. 2 In the Property inspector, click the expander arrow to view all properties. 3 Click the tab above a column or to the left of a row to select what you want to change. 4 To specify how space is allocated when the browser window is resized, enter a number in the Value box and choose from the following Units options: Pixels Sets the size of the selected column or row at an absolute value. This option is the best choice for a frame that should always be the same size, such as a navigation bar. If you set a different Units option for the other frames, they are allocated space only after frames specified in pixels are their full size. Percent Specifies that the current frame should take up a specified percentage of its frameset. Frames specified with units set to Percent are allocated space after frames with units set to Pixels, but before frames with units set to Relative. Relative Specifies that the current frame be allocated space proportionally to other frames. Frames with units set to Relative are allocated space after frames with units set to Pixels and Percent, but they take up all of the remaining space in the browser window.
<url>html/213.frames.fm11.html</url>
<title>Setting frame and frameset borders</title> Setting frame and frameset borders You can specify how frame and frameset borders appear on the page. When you specify border options for a frame, the corresponding frameset option is overridden. To set frame borders: 1 Select the frame by Alt-clicking (Windows) or Shift-Option-clicking (Macintosh) or click a frame in the Frame inspector. 2 Set the following options: Borders Controls the border of the current frames. The options are Yes, No, and Default. Most browsers default to Yes. To turn off a border, all adjacent frames must be set to No (or set to Default with the parent frameset set to No). Border Color Sets a border color for all borders adjacent to the current frame. To set frameset borders: 1 Select the frameset by clicking a frame border in the Document window or clicking the border enclosing the frames in the Frame inspector. 2 Set the following options: Borders Controls the border of frames within the current frameset. Choose Yes to display borders in three-dimensional color, choose No to display borders as flat and gray, or choose Default to let the browser determine how borders are displayed. Most browsers default to Yes. Border Color Sets a border color for all borders in the current frameset. This setting can be overridden by a border color specified for a single frame. Border Width Specifies the width of the borders in the current frameset. Enter 0 to specify no borders.
<url>html/213.frames.fm12.html</url>
<title>Changing the background color of a frame</title> Changing the background color of a frame You change the background color of a frame by setting the background color of the document in the frame. To change the background color of a document in a frame: 1 Do one of the following: Place the cursor in the frame and choose Modify > Page Properties. Right-click (Windows) or Control-click (Macintosh) inside the frame and choose Page Properties from the shortcut menu. 2 Click the Background color box to select a color.
<url>html/213.frames.fm13.html</url>
<title>Controlling frame content with links</title> Controlling frame content with links Use a link in one frame to change the content in another frame. To create a link that changes the content of a different frame: 1 Alt-click (Windows) or Option-click (Macintosh) a frame to select it. 2 Name the frame by entering a name in the Frame box in the Property inspector. 3 Repeat steps 1 and 2 for each frame in the frameset. 4 Select text or an object, and then enter the file to which you want to link in the Link box in the Property inspector. To specify an anchor in the other file, enter a pound sign (#) before the anchor name. See Linking to a named anchor . 5 Click the expander arrow in the lower right corner of the Property inspector and then choose the name of the target frame from the Target pop-up menu.
<url>html/209.formatting.fm25.html</url>
<title>Style Definition for Border panel</title> Style Definition for Border panel Use the Style Definition for Border panel to define settings for styles controlling borders around elements. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Border on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Width Sets the thickness of the element's border. Dreamweaver does not display this attribute in the Document window. Color Sets the color of the border. You can set each side's color independently, but the display depends upon the browser. Dreamweaver does not display this attribute in the Document window. Style Determines the style of the border, but the display depends upon the browser. Dreamweaver does not display this attribute in the Document window.
<url>html/209.formatting.fm26.html</url>
<title>Style Definition for List panel</title> Style Definition for List panel Use the Style Definition for List panel to define list settings in styles. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click List on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Type Determines the appearance of bullets or numbers. Dreamweaver does not display this attribute in the Document window. Bullet Image Lets you specify a custom image for bullets. Type the file name (including its path if necessary) or click Browse to browse to and select an image. Dreamweaver does not display this attribute in the Document window. Position Determines whether the list item will wrap to an indent (outside) or to the margin (inside). Dreamweaver does not display this attribute in the Document window.
<url>html/209.formatting.fm27.html</url>
<title>Style Definition for Positioning panel</title> Style Definition for Positioning panel The Positioning style attributes change the tag or block of selected text into a new layer using the default tag for defining layers as set in the Layer preferences. (See also Layer preferences .) Unless you've changed this setting, Dreamweaver uses the DIV tag. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Positioning on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Type Determines how the browser should position the layer as follows: Absolute places the layer using the coordinates entered in the Placement boxes relative to the top left corner of the page. Relative places the layer using the coordinates entered in the Placement boxes relative to object's position in the text flow of the document. This option is not displayed in the Document window. Static places the layer at its location in the text flow. Visibility Determines the initial display condition of the layer. If you do not specify a visibility property, by default most browsers inherit the parent's value. Inherit inherits the visibility property of the layer's parent. Visible displays the layer contents, regardless of the parent's value. Hidden hides the layer contents, regardless of the parent's value. Z-Index Determines the stacking order of the layer. Higher numbered layers appear above lower-numbered layers. Values can be positive or negative. It's easier to change the stacking order of layers using the Layer palette. See Changing the stacking order of layers . Overflow (CSS layers only) Determines what happens if the contents of a layer exceed its size, as follows: Visible increases the layer's size so that all of its contents are visible. The layer expands down and to the right. Hidden maintains the layer's size and clips any content that doesn't fit. No scroll bars are provided. Scroll adds scroll bars to the layer whether or not the contents exceed the layer's size. Specifically providing scroll bars avoids confusion caused by the appearance and disappearance of scroll bars in a dynamic environment. This option does not display in the Document window and works only in browsers that support scroll bars. Auto makes scroll bars appear only when the layer's contents exceed its boundaries. This option is not displayed in the Document window. Placement Specifies the location and size of the layer. How the browser interprets the location depends on the setting for Type. Size values are overridden if the content of the layer exceeds the specified size. The default units for location and size are pixels. For CSS layers, other valid units can be specified by entering the following unit abbreviations: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. Clip Defines the part of the layer that is visible. If you specify a clipping region, you can access it with a scripting language such as JavaScript and manipulate the properties to create special effects such as wipes.
<url>html/209.formatting.fm28.html</url>
<title>Style Definition for Extensions panel</title> Style Definition for Extensions panel The Extensions style attributes control features that are not supported by most current browsers. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Extensions on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Pagebreak Forces a page break when printing either before or after the object controlled by the style. This option is not supported by any 4.0 browser, but support may be provided by future browsers. Cursor Changes the pointer image when the pointer is over the object controlled by the style. Only Internet Explorer 4.0 supports this attribute. Filter Applies special effects to the object controlled by the style, including blur and inversion. Choose an effect from the pop-up menu. Only Internet Explorer 4.0 supports this attribute.
<url>html/209.formatting.fm29.html</url>
<title>Style Sheet Format preferences</title> Style Sheet Format preferences Style Sheet Format preferences control how Dreamweaver writes the code that defines styles. Styles can be written in a shorthand form that some people find easier to work with. Some older versions of browsers do not correctly interpret the shorthand. Unless you want Dreamweaver to write styles in shorthand, there is no reason to change any of the Style Sheet preferences. Choose Edit > Preferences and click Style Sheet Format to display Style Sheet Format preferences. See also Formatting text with style sheets . When Creating Styles Use Shorthand For Determines which style attributes Dreamweaver writes in shorthand. When Editing Existing Styles Use Shorthand Controls whether Dreamweaver rewrites existing styles in shorthand. Choose If Original Used Shorthand to make Dreamweaver leave all styles as they are. Choose According to Settings Above to make Dreamweaver rewrite styles in shorthand according to the attributes specified in the Use Shorthand For checkboxes.
<url>html/209.formatting.fm3.html</url>
<title>Applying paragraph and heading tags</title> Applying paragraph and heading tags Use the Format pop-up menu in the Property inspector or the Text > Format menu to apply the standard paragraph and heading tags. To redefine the appearance of paragraph and heading tags, use style sheets. See Formatting text with style sheets . To apply a paragraph or heading tag: 1 Place the cursor in the paragraph or select some or all of the text in the paragraph. 2 Choose a paragraph style from the Format pop-up menu in the Property inspector or from the Text > Format menu. Choose None to remove a paragraph style. The tag associated with the selected style (for example, P for paragraph, H1 for Heading 1, PRE for Preformatted, and so on) is applied to the entire paragraph.
<url>html/209.formatting.fm30.html</url>
<title>Converting CSS styles to HTML markup</title> Converting CSS styles to HTML markup If you have used CSS styles to specify text formatting (such as the family, size, color, and decoration of fonts) and later decide that you want to make the formatting viewable on a 3.0 browser, you can use the File > Convert > 3.0 Browser Compatible command to convert as much of the style information as possible to HTML tags. To convert a file that uses styles to a 3.0 browser compatible file: 1 Choose File > Convert > 3.0 Browser Compatible. 2 In the dialog box that appears, choose CSS Styles to HTML Markup. When you choose the Tables to Layers option, Dreamweaver replaces all layers with a single table that preserves the original positioning. CSS styles are replaced, where possible, with HTML tags such as B and FONT . Any CSS markup that cannot be converted to HTML is removed. See CSS to HTML markup conversion table for information on which styles are converted and which are removed. 3 Click OK. Dreamweaver opens the converted file in a new, untitled window. Note: You must perform this Convert to 3.0 Browser Compatible procedure each time you change the original file to update the 3.0-compatible file. For this reason, we recommend that you do this procedure only after you are completely satisfied with your original file.
<url>html/209.formatting.fm31.html</url>
<title>CSS to HTML markup conversion table</title> CSS to HTML markup conversion table The CSS attributes listed in the following table are converted to HTML markup with the Convert to 3.0 Browser Compatible option. Attributes not listed in the table are removed. See Converting CSS styles to HTML markup . CSS attribute Converted to color FONT COLOR font-family FONT FACE font-size FONT SIZE="[1-7]" font-style: oblique I font-style: italic I font-weight B list-style-type: square UL TYPE="square" list-style-type: circle UL TYPE="circle" list-style-type: disc UL TYPE="disc" list-style-type: upper-roman UL TYPE="I" list-style-type: lower-roman OL TYPE="i" list-style-type: upper-alpha OL TYPE="A" list-style-type: lower-alpha OL TYPE="a" list-style UL or OL with TYPE as appropriate text-align P ALIGN or DIV ALIGN as appropriate text-decoration: underline U text-decoration: line-through STRIKE
<url>html/209.formatting.fm32.html</url>
<title>Checking spelling</title> Checking spelling Use the Check Spelling command on 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 US English spelling dictionary. To change the dictionary, choose Edit > Preferences > General and select a different dictionary from the pop-up menu. Dictionaries for additional languages are available for downloading from the Dreamweaver Developers Center.
<url>html/209.formatting.fm33.html</url>
<title>Check Spelling dialog box</title> Check Spelling dialog box Use the following Text > Check Spelling commands to check the spelling in your document: Add to Personal Adds the unrecognized word to your personal dictionary. To remove words from your personal dictionary, edit the Personal.dat file in a text editor. Ignore Ignores this instance of the unrecognized word. Ignore All Ignores all instances of the unrecognized word. Change Replaces this instance of the unrecognized word with text that you type in the Change To box or with the selection in the Suggestions list. Change All Replaces all instances of the unrecognized word.
<url>html/209.formatting.fm4.html</url>
<title>Changing font characteristics</title> Changing font characteristics Use the Property inspector or the Text menu to change font characteristics for selected text. To change font characteristics: 1 Select the text. If no text is selected, the change applies to subsequent text you type. 2 Choose from the following options: To change the font, choose a font combination from the Property inspector or from the Text > Font menu. Browsers display the text using the first font in the combination that is installed on the user's system. If none of the listed fonts is installed, the browser displays the text as specified by the browser preferences. See also Modifying font combinations . Default uses the default font for the selected text (either the browser default font or the font assigned to that tag in a style sheet). Use this option to remove previously applied font faces. To change the font style, click Bold or Italic in the Property inspector or choose a font style (Bold, Italic, Underline, and so on) from the Text > Style menu. To change the font size, choose a size (1 through 7) from the Property inspector or from the Text > Size menu. HTML font sizes are relative, not specific point sizes. Users set the point size of the default font for their browsers; this is the font size that they will see when you choose Default or 3 in the Property inspector or Text > Size menu. Sizes 1 or 2 will appear smaller than the default font size; sizes 4 through 7 will appear larger. To make your text appear in a specific point size every time, use style sheets. To increase or decrease the size of selected text, choose a relative size (+ or -1 to + or -7) from the Property inspector or from either the Text > Size Increase or Text > Size Decrease menu. The numbers indicate a relative difference from the BASEFONT size. The default BASEFONT value is 3. Thus, a +4 value results in a font size of 7. Dreamweaver does not display the BASEFONT tag (which goes in the HEAD ), although the font size should display properly in a browser.
<url>html/217.iCat.fm1.html</url>
<title>iCat E-commerce overview</title> iCat E-commerce overview iCat objects connect an existing web site to an iCat Commerce Cart, allowing you to manage an entire web-based store from within Dreamweaver. An iCat Commerce Cart holds information about the items available for sale on your web site and displays that information on the web through the iCat Commerce Online Shopping Cart interface. To learn how to use iCat custom commands and objects with Dreamweaver, click here.
<url>html/218.customizing.fm1.html</url>
<title>Customizing Dreamweaver overview</title> Customizing Dreamweaver overview Dreamweaver offers many opportunities for customization, so that you can work the way that's most familiar, comfortable, and efficient for you—all while generating spotless code. The following include some of the ways you can customize Dreamweaver: Rearrange the objects in the Object palette so that the ones you use most often are always visible, create new panels to reorganize the objects, or add new objects. See Changing the Object palette and Insert menu . Edit SourceFormat.profile to get even finer control over the HTML that Dreamweaver creates. SourceFormat.profile includes all the settings from the HTML Format preferences and more. See Editing the HTML source formatting profile . Edit existing browser profiles or create new ones to get the exact feedback you want about how your page will work in different browsers. See Creating and editing browser profiles . Set preferences for everything from color schemes and highlighting to site configurations and browsers. See Setting preferences .
<url>html/218.customizing.fm2.html</url>
<title>Changing the Object palette and Insert menu</title> Changing the Object palette and Insert menu By default, the Object palette is divided into four panels: Common, Forms, Head, and Invisibles (for information on the objects in these panels, see Object palette ). The panels correspond to folders in the Configuration/Objects folder within the Dreamweaver application folder. To rearrange objects in the Object palette: Move the HTML and GIF files corresponding to an object from one folder to another. To rename panels on the Object palette: Rename the folders in the Configuration/Objects folder.
<url>html/218.customizing.fm3.html</url>
<title>Changing the Insert menu</title> Changing the Insert menu The order of objects on the Insert menu is determined by the file InsertMenu.htm in the Configuration/Objects folder. The file contains one large unordered (bulleted) list of all the objects within Configuration/Objects. Nested unordered lists indicate submenus, and list items containing only dashes indicate separators. Any objects that are not listed specifically are appended to the bottom of the Insert menu at startup. To change the Insert menu: 1 Open the file called InsertMenu.htm in the Configuration/Objects folder. 2 To add a new object, create a new list item and type the name of the object; the letter, number, or symbol that you want to use as a keyboard shortcut; and the file name of the object, separated by commas. For example: · Copyright DCD, C, Copyright DCD.htm (Windows only) Highlight the letter you want to use as a mnemonic and choose Text > Style > Underline. 3 To create a separator line between objects, create a new list item and type one or more hyphens. 4 To reorder the objects, rearrange them in the list. 5 To remove an item from the menu without removing it from the Object palette, delete its name and shortcut, but leave the commas and file name. For example: · , ,Layer.htm 6 To remove an object entirely, move it out of the Configuration/Objects folder. Note: Restart Dreamweaver to see any changes to items in the Configuration/Objects folder.
<title>Editing the HTML source formatting profile</title> Editing the HTML source formatting profile The HTML source formatting profile determines how Dreamweaver formats the HTML source code for a document. The profile includes formatting preferences for individual tags and groups of tags, along with the HTML Format preferences (set with the Preferences command). You can edit SourceFormat.profile in a text editor for precise control over how Dreamweaver writes HTML. The profile is a text file saved in the Configuration folder within the Dreamweaver application folder. HTML Format preferences set with the Preferences command are saved in SourceFormat.profile when you quit Dreamweaver, and changes made to the profile do not take effect until you restart Dreamweaver. Thus, to ensure access to the new preference settings, you should quit the program before editing the profile. The HTML source formatting profile follows a specific format, which is outlined in the file. Note the following conventions: Each section of the profile begins with a <? KEYWORD > (for example, <?OPTIONS>, <?ELEMENTS>, <?ATTRIBUTES> ). The parameters for each section are defined within HTML comments ( <!-- --> ) directly above the section. The OMIT line in the <?OPTIONS> section is reserved for future use (it currently does not affect HTML source formatting). Individual tags can be marked as belonging to indention groups ( IGROUP s) in the <?ELEMENTS> section. By default, IGROUP 1 contains table rows and columns, and IGROUP 2 contains framesets and frames. These groupings correspond to the Indent Table Rows and Columns and Indent Framesets and Frames options in the HTML Format Preferences dialog box. Indention can be turned off for the entire group by removing its number from the ACTIVE attribute in the <?OPTIONS> section. You can also add other tags to IGROUP 1 or 2 so you can control them with the options in the HTML Format Preferences. For example, the default settings for the P tag in SourceFormat.profile are <P BREAK="1,0,0,1" INDENT> , which produces the following: <p> A paragraph of text that is indented from the left margin, and that has a break before the opening P tag and after the closing P tag, but not after the opening P and not before the closing P.</p> <p>Next paragraph.</p> If you change the settings to <P BREAK="1,1,1,2">, you will get: <p> A paragraph of text that is not indented from the left margin, and that has one break before and after the opening P tag, one break before the closing P tag, and two breaks after the closing P tag. </p> <p> Next paragraph. </p>
<url>html/218.customizing.fm6.html</url>
<title>Creating and editing browser profiles</title> Creating and editing browser profiles Browser profiles are the files to which your documents are compared when you run a target browser check (see Checking a page for compatibility with target browsers ). Each profile contains information about the HTML tags and attributes that a particular browser supports. It can also contain warnings, error messages, and suggestions for tag substitutions. Browser profiles are stored on your hard drive in the Configuration/BrowserProfiles folder within the Dreamweaver application folder. You can edit existing profiles or create new ones with a text editor (for example, BBEdit, HomeSite, Notepad, or SimpleText). It is not necessary to quit Dreamweaver before editing or creating browser profiles. Browser profiles follow a specific format. To avoid parsing errors during target browser checks, keep these rules in mind when editing or creating profiles: The first line is reserved for the name of the profile. It must be followed by a single carriage return. The name on this line appears in the Target Browser Check dialog box and in the target check report. It must be unique. The second line is reserved for the designator PROFILE_TYPE=BROWSER_PROFILE . Dreamweaver uses this line to determine which documents are browser profiles. It must not be changed or moved. Two hyphens ( -- ) at the beginning of a line indicate a comment (that is, that the line will be ignored during the target check process). The syntax for a tag entry is <!ELEMENT htmlTag NAME=" tagName " > <!ATTLIST htmlTag unsupportedAttribute1 !Error !msg="The unsupportedAttribute1 of the htmlTag is not supported. Try using thisAttribute for a similar effect." supportedAttribute1 supportedAttribute2 ( validValue1 | validValue2 | validValue3 ) unsupportedAttribute2 !Error !htmlmsg="<b>Don't ever use this unsupportedAttribute2 of the htmlTag !!</b>" > where htmlTag is the tag as it appears in an HTML document. tagName is what the tag is called (for example, the <HR> tag is called "horizontal rule"). The NAME attribute is optional; if specified, tagName is used in the error message. If a name is not supplied, htmlTag is used. unsupportedAttribute is an attribute that is not supported. Any tags or attributes not specifically mentioned are assumed to be unsupported. Specify unsupported tags or attributes only when you want to create a custom error message. supportedAttribute is an attribute that is supported by htmlTag. Only tags listed without an !Error designation are considered supported by the browser. validValue is a value that is supported by the attribute. A space must appear before the closing angle bracket (>) on the !ELEMENT line, after the opening parentheses, before the closing parentheses, and before and after each pipe (|) in the value list. An exclamation point without a space must appear before the words ELEMENT, ATTLIST, Error, msg, and htmlmsg ( !ELEMENT, !ATTLIST, !Error, !msg, !htmlmsg ). !Error s and !Warning s may appear within the !ELEMENT or the !ATTLIST area. !msg messages can contain only plain text. !htmlmsg messages can contain any valid HTML, including hyperlinks. HTML comments ( <!-- --> ) cannot be mentioned specifically in browser profiles because they interfere with parsing. Dreamweaver does not report an error for comments because all browsers support them. The following example shows an entry for the APPLET tag that would be accurate for Navigator 3.0: <!ELEMENT APPLET Name="Java Applet" > <!ATTLIST APPLET Align ( top | middle | bottom | left | right | absmiddle | absbottom | baseline | texttop ) Alt Archive Class !Warning !htmlmsg="This browser ignores the <CODE>CLASS</CODE> attribute for the <CODE>APPLET</CODE> tag." Code Codebase Height HSpace ID !Warning !htmlmsg="This browser ignores the <CODE>ID</CODE> attribute for the <CODE>APPLET</CODE> tag. Use <CODE>NAME</CODE> instead." Name Style !Warning !htmlmsg="This browser ignores the <CODE>STYLE</CODE> attribute for the <CODE>APPLET</CODE> tag." VSpace Width >
<url>html/218.customizing.fm7.html</url>
<title>Creating a browser profile</title> Creating a browser profile You can create a browser profile by modifying an existing profile. For example, to create a profile for Netscape Navigator 5.0, you can open the profile for Navigator 4.0, add any new tags or attributes introduced in version 5.0, and save the profile as Netscape Navigator 5.0. To create a browser profile: 1 Using a text editor, open the profile that most closely resembles the profile you intend to create, or open the profile that you want to change. 2 Change the name of the profile. The name of the profile appears on the first line. Two profiles cannot have the same name. 3 Add any new tags or attributes you know to be supported by the browser according to the syntax shown in Creating and editing browser profiles . If you don't want to receive error messages about a certain unsupported tag, add it to the list of supported tags. If you include unsupported tags in the list of supported tags, save the profile in a separate file with a new name (such as Browsername x.x limited). Renaming the profile preserves the original profile with only the tags that are truly supported. 4 Delete any tags or attributes that are not supported by the browser. This step is unnecessary if you are creating a profile for the next version of Netscape Navigator or Microsoft Internet Explorer, because browsers rarely drop support for tags. 5 Add any custom error messages according to the syntax shown in Creating and editing browser profiles . The profiles that come with Dreamweaver list all supported tags; they may also include commented-out lines with some commonly used but unsupported tags. To add a custom error message, remove the two hyphens at the beginning of the line and add either !msg " message " or !htmlmsg "< tag > message </ tag > " after the !Error . For example, this notation might appear in the Netscape Navigator 3.0 profile: <!ELEMENT HR name="Horizontal Rule" > <!ATTLIST HR -- COLOR !Error > To add a custom error message, remove the hyphens and add your message, preceded by !msg : <!ELEMENT HR name="Horizontal Rule" > <!ATTLIST HR COLOR !Error !msg "Internet Explorer 3.0 supports COLOR in horizontal rules, but Netscape Navigator 3.0 does not." >
<url>html/219xa.shortcuts.fm1.html</url>
<title>File menu</title> File menu Command Windows Macintosh New document Control-Shift-N Command-N New window Control-N n/a Open an HTML file Control-O, or drag the file from the Explorer or Site window to the Document window. Command-O Open in Frame Control-Shift-O Shift-Command-O Close Control-W Command-W Save Control-S Command-S Save All Control-Shift-S Shift-Command-S Exit/Quit Alt-F4 or Control-Q Command-Q
<url>html/219xa.shortcuts.fm10.html</url>
<title>Working with images</title> Working with images Action On Windows, use On Macintosh, use Change image source attribute Double-click image Double-click image Edit image in external editor Control-double-click image Command-double-click image
<url>html/219xa.shortcuts.fm11.html</url>
<title>Managing hyperlinks</title> Managing hyperlinks Action On Windows, use On Macintosh, use Create hyperlink (select text) Control-L Command-L Remove hyperlink Shift-Control-L Shift-Command-L Drag and drop to create a hyperlink from a document Select the text, image, or object, then Shift-drag the selection to a file in the Site window. Select the text, image, or object, then Shift-drag the selection to a file in the Site window. Drag and drop to create a hyperlink using the Property inspector Select the text, image, or object, then drag the point-to-file icon in Property inspector to a file in the Site window. Select the text, image, or object, then drag the point-to-file icon in Property inspector to a file in the Site window. Open the linked-to document in Dreamweaver Control-double-click link Command-double-click link Check links in the current document Control-F7 Command-F7 Check links in the entire site Control-F8 Command-F8
<url>html/206.siteplanning.fm12.html</url>
<title>Changing site displays</title> Changing site displays By default the remote site (or local site map) appears in the left pane and the local site appears in the right pane. You can switch these displays. To determine in which panes the local and remote sites appear: 1 Choose Edit > Preferences to open the Preferences dialog box and select the Site FTP category. 2 Do either of the following: Select Local Files from the Show Always menu, and then choose whether to display the local files in the right or left pane of the Site window. The local site appears in the pane you have selected, and the remote site (or the site map) appears in the opposite pane. Select Remote Files from the Show Always menu, and then choose whether to display the remote files in the right or left pane of the Site window. The remote site appears in the pane you have selected, and the local site (or the site map) appears in the opposite pane. To change the view area: Drag the splitter bar to increase the view area of the right or left window pane. Use the scroll bars at the bottom of the panes to scroll the contents of the panes. In the site map, click and drag the arrow above a file to change the column width. For more information about site preferences, see Site FTP preferences .
<url>html/206.siteplanning.fm13.html</url>
<title>Working with site files</title> Working with site files Use the Site Files view to view local and remote sites as lists of files, to add new folders or files to a site, or to refresh the view of a site after changes have been made. To view the site files, do one of the following: Choose Window > Site Files to open the Site window in Site Files view. In the Site window, click the Site Files button. To add a new folder to a site: 1 Choose File > New Folder (Windows) or Site > Site Files View > New Folder (Macintosh). 2 Select and name the new folder. To add a new file to a site: 1 Choose File > New File (Windows) or Site > Site Files View > New File (Macintosh). 2 Select and name the new file. To update the Site Files view after making changes: Choose View > Refresh Local (Windows) or Site > Site Files View > Refresh Local (Macintosh). Choose View > Refresh Remote (Windows) or Site > Site Files View > Refresh Remote (Macintosh). When working with local and remote sites, you can determine which files have been updated. This is useful when you want to upload all the files that are newer on the local site to the remote site, or download all the files that are newer on the remote site to the local site. To select newer local files: Choose View > Select Newer Local (Windows) or Site > Site Files View > Select Newer Local (Macintosh). To select newer remote files: Choose View > Select Newer Remote (Windows) or Site > Site Files View > Select Newer Remote (Macintosh). For more information about working with local and remote sites, see Using the check in/check out system .
<url>html/206.siteplanning.fm14.html</url>
<title>Creating site maps</title> Creating site maps Use the Site Map View to view local sites as a visual map of linked icons, to add new files to a site, or to add, modify, or remove links. The Site Map View is ideal for storyboarding. You can quickly prototype of the entire structure of the site and then create a printed image of the site map. Note: The Site Map View applies to local sites only. If you want to create a map of a remote site, copy all the content to your local drive. To view a site map, do one of the following: Choose Window > Site Map to open the Site window. In the Site window, click the Site Map button. The site's home page is the starting point of the map. If Dreamweaver can't determine which page in the current site is the home page, the Site Definition dialog box opens to the Site Map Layout panel, prompting you to select the correct page. The site map shows HTML files and other page content as icons. Links are displayed in the order in which they are encountered in the HTML source code. Text displayed in red indicates a broken link. Text displayed in blue and marked with a globe icon indicates a file on another site or a special link (such as an e-mail or script link). A green check mark indicates a file checked out by you. A red check mark indicates a file checked out by someone else. A lock symbol indicates a file that is read-only (Windows) or locked (Macintosh). By default, the site map displays the site structure two levels deep, starting from the current home page. Click the plus and minus signs (Windows) or the expander arrow (Macintosh) next to a page to show or hide pages linked below the second level. By default, hidden files and dependent files are not displayed in the site map. Hidden files are HTML files marked as hidden. Dependent files are non-HTML page content such as images, templates, Shockwave files, or Flash files. See Modifying the site map layout and Showing and hiding site map files .
<url>html/206.siteplanning.fm15.html</url>
<title>Modifying the site map layout</title> Modifying the site map layout Use the Site Map Layout options to customize the appearance of your site map. You can specify the home page, the number of columns displayed, and whether to show hidden and dependent files. To modify the site map layout: 1 Open the Site Definition dialog box using one of these methods: Choose Site > Define Sites and then click Edit. Select Site Map Layout in the Category list on the left. Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh). 2 Choose from the following options: Home Page Specifies the home page for the site map. If you don't specify a home page—and Dreamweaver cannot find a file called index.html or index.htm at the root—Dreamweaver will prompt you to select a home page when you open the site map. Number of Columns Sets the number of pages that are displayed per row in the site map. Column Width Sets the column width, in pixels, of the site map. Icon Labels Determines whether file names or page titles are displayed under the icons in the site map. You can change file names and page titles from the site map. Display Files Marked as Hidden Displays HTML files that are marked as hidden in the site map. If a page is hidden, its name and links are displayed in italics. Display Dependent Files Displays all dependent files in the site's hierarchy. A dependent file is an image or other non-HTML content that is loaded by the browser when the main page is loaded.
<url>html/206.siteplanning.fm16.html</url>
<title>Working with pages in the site map</title> Working with pages in the site map When working in the site map, you can select pages, open a page for editing, add new pages to the site, create links between files, and change the page title. To select multiple pages, do one of the following: Press Shift-click to select multiple pages. Starting from a blank part of the view, drag around a group of files to select them. Press Shift-Control (Windows) or Shift-Command (Macintosh) and click to select noncontiguous pages. To open a page for editing, do one of the following: Double-click the file. Select the file and choose File > Open Selection (Windows) or Site > Open (Macintosh). To add an existing file to the site, do one of the following: Drag a file from the Windows Explorer or the Macintosh Finder and drop it on a file in the site map. The page is added to the site, and a link is created between it and the file you dropped it on. Select Site > Link to Existing File (Windows) or Site > Site Map View > Link to Existing File (Macintosh). Click a file in the site map. The point-to-file icon appears. Click and drag the icon to the file you want to add. To create a new file and add a link: 1 Select an HTML file in the site map. 2 Choose Site > Link to New File (Windows) or Site > Site Map View > Link to New File (Macintosh), or choose Link to New File from the shortcut menu. 3 In the dialog box that appears enter the following information: File Name Specifies the name of the file. Title Specifies the title of the page. Text of Link Specifies the wording of the link that connects the selected file to the new file. The link appears in the selected file. 4 Click OK. The file is saved in the same folder as the selected file. If a new file is added to a hidden branch, the new file is also hidden. See Showing and hiding site map files . To modify the title of a page: 1 Make sure the Show Page Titles option is selected. Choose View > Page Titles (Windows) or Site > Site Map View > Show Page Titles (Macintosh). 2 Do one of the following: Select a page and then click the title. When the title becomes an editable field, enter a new document title. Select a page and then choose File > Rename (Windows) or Site > Rename (Macintosh). To change the home page, do one of the following: Choose Site > New Home Page (Windows) or Site > Site Map View > New Home Page (Macintosh) to create a new home page. Choose Site > Select Home Page (Windows) or Site > Site Map View > Select Home Page (Macintosh) to make an existing page the home page. To update the site map display after making changes: Choose View > Refresh (Windows) or Site > Site Map View > Refresh Local (Macintosh).
<url>html/206.siteplanning.fm17.html</url>
<title>Creating and modifying links in site map view</title> Creating and modifying links in site map view You can modify the structure of the site in the site map by adding, changing and removing links. The site map is updated automatically to display the changes to the site. To add a link, do one of the following: Drag a page from the Windows Explorer or Macintosh Finder onto a page in the site map. Select an HTML page and choose Site > Link to Existing File (Windows) or Site > Site Map View > Link to Existing File (Macintosh), or choose Link to Existing File from the shortcut menu. Select an HTML page in the site map. The point-to-file icon appears. Click and drag the icon to the object you want to link to: either a file in the File View, a document on the desktop, or a named anchor in a document open on the desktop. See Creating links with the point-to-file icon . To change a link: Select the page and choose Site > Change Link (Windows) or Site > Site Map View > Change Link (Macintosh). Browse to the file or type a URL. To remove a link, do one of the following: Select the page in the site map and choose Site > Remove Link (Windows) or Site > Site Map View > Remove Link (Macintosh). Select the page in the site map and choose Remove Link from the shortcut menu. To open the source of a link: 1 Select a file in the site map. 2 Choose Site > Open Source of Link (Windows) or Site > Site Map View > Open Source of Link (Macintosh). The Property inspector and the source file containing the link are opened. The link is highlighted.
<url>html/206.siteplanning.fm18.html</url>
<title>Showing and hiding site map files</title> Showing and hiding site map files You can modify the layout of the site map to show or hide hidden and dependent files. This is useful when you want to emphasize key topics or content and deemphasize less important material. Before you can hide or display an HTML file, you must first mark it as "hidden." When you hide a file marked as hidden, its links are also hidden. When you display a file marked as hidden, the icon and its links are visible in the site map view, but the names appear in italics. To mark files as hidden: 1 Select one or more files. 2 Choose View > Show/Hide Link (Windows) or Site > Site Map View > Show/Hide Link (Macintosh). To show or hide files marked as hidden, do one of the following: Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map View > Show Files Marked as Hidden (Macintosh). Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh) to open the Site Definition dialog box and check the Display Files Marked as Hidden option. By default, dependent files are already hidden. You can choose whether to show them in the site map. To show dependent files, do one of the following: Choose View > Show Dependent Files (Windows) or Site > Site Map View > Show Dependent Files (Macintosh). Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh) to open the Site Definition dialog box and select the Display Dependent Files option.
<url>html/206.siteplanning.fm19.html</url>
<title>Viewing the site from a branch</title> Viewing the site from a branch You can view the details of a specific section of a site by making a branch the focus of the site map. To view a different branch: Select the page you want to view and choose View > View as Root (Windows) or Site > Site Map View > View as Root (Macintosh). The site map is redrawn in the window as if the specified page were at the root of the site. The Site Navigation field above the site map displays the path from the home page to the specified page. Select any item in the path to view the site map from that level by clicking once. To expand and contract branches: Click the plus and minus signs (Windows) or the expander arrows (Macintosh) to expand or contract the branch.
<url>html/206.siteplanning.fm2.html</url>
<title>Creating a local site</title> Creating a local site A local site requires a name and a local root folder to tell Dreamweaver where you plan to store all of the site's files. You should create a local site for each web site you work on. Later, when you are ready to publish and test the site on a remote server, you can add additional information about the site. For more information about remote sites, see Defining a site . To create a local site: 1 Choose Site > New Site. 2 In the Site Definition dialog box, select Local Info from the Category list. 3 Enter the following options: Site Name Identifies the site. The site name appears in the Site window and on the Site > Open Site submenu. Local Root Folder Specifies the folder on your hard drive where site files, templates, and library items will be stored. When Dreamweaver resolves root-relative links, it does so relative to this folder. Enter a path or click the folder icon to browse to and select the folder. HTTP Address Identifies the site URL so that links within the site that use absolute URLs can be verified. See Checking links between documents . Cache Creates a local cache to improve the speed of link and site management tasks. If you do not select this option, Dreamweaver will prompt you again about creating a cache before it creates the site. 4 Click OK.
<url>html/206.siteplanning.fm20.html</url>
<title>Saving the site map</title> Saving the site map You can save the site map as an image and then view the image in (or print it from) an image editor. To create an image file of the current site map: 1 From the site map, choose File > Save Site Map As (Windows) or Site > Site Map View > Save Site Map As (Macintosh). 2 Enter a name for the image in the dialog box that appears.
<url>html/206.siteplanning.fm3.html</url>
<title>Creating links</title> Creating links Links are connections to documents on your site or on other web sites. You can create links from the Document window using the Property inspector or the Modify menu. Dreamweaver provides several ways to create links: Use the point-to-file icon to point to a file that you want to link to. See Creating links with the point-to-file icon . Use the Property inspector to create links in a more traditional manner by typing a path to a file or browsing to the file on disk. See Linking to a document . Use named anchors to jump to specific positions within a document. See Linking to a named anchor . Use e-mail, nowhere, and script links to open mail programs, to gain access to JavaScript events, or to execute JavaScript code. See Creating e-mail, nowhere, and script links . The Site map view can also be used to create links. See Creating and modifying links in site map view . Use the Document window or a browser to test all links. See Testing links . Before creating links, be sure you understand the difference between relative and absolute paths—and how to designate each type of path. See About relative and absolute paths .
<url>html/214.forms.fm9.html</url>
<title>List/Menu properties</title> List/Menu properties To display list/menu properties in the Property inspector, select a list or pop-up menu in a form. See also Adding an object to a form . List/Menu Assigns a name to the control. This field is required, and the name must be unique. Type Indicates whether the control is a pop-up menu or a scrolling list. For a list, you can set the height of the control (the number of items displayed at once) and indicate whether the user can select multiple items from the list. List Values Opens the Initial List Values dialog box so you can add items to the list or pop-up menu. Each item in the list has a label (the text that appears in the list) and a value (what is sent to the processing application if the item is selected). If no value is specified, the label is sent to the processing application instead. Use the plus and minus buttons to add and remove items in the list. Items appear in the order in which they appear in the Initial List Values dialog box. The first item on the list is the selected item when the page is loaded in a browser. Use the up and down arrow buttons to rearrange items in the list.
<url>html/215.reusing.fm1.html</url>
<title>Reusing page elements overview</title> Reusing page elements overview Most web sites have content that appears on every page of the site (such as a header or footer) or content that appears on only a few pages but which must be updated frequently (such as news headlines or sales specials). Dreamweaver offers two ways of dealing with recurring content so that you don't have to change it on every page of the site: Library items are safe to use on every site and should always be used for sites that will be viewed locally. See Using library items . Server-side includes can be used only for sites that are viewed from a server, and only on servers that are configured to process server-side includes. (Ask your webmaster or system administrator if you are unsure whether your web server supports server-side includes.) See Using server-side includes .
<url>html/215.reusing.fm10.html</url>
<title>Library palette</title> Library palette The Library palette displays all of the items in the current library along with the library controls listed here. To add items to the current page, drag them from the list directly to the page or select them and click Add to Page. Click Open to make changes to the item. See also Reusing page elements overview . Create Adds the current selection in the Document window to the library as a new item. Delete Removes the selected item from the library. Open Opens the selected item in a new window for editing. Add to Page Places the selected library item in the page at the cursor location.
<url>html/215.reusing.fm11.html</url>
<title>Using server-side includes</title> Using server-side includes Server-side includes, as their name implies, are instructions to the server to include the specified file in the current document. Because the processing of includes happens on the server, included content does not appear when you open a document locally in a browser. It is visible, however, if you choose File > Preview in Browser from within Dreamweaver; this is because Dreamweaver processes the include instructions just as a server would. Placing a server-side include in a document inserts only a reference to an external file. Dreamweaver displays the content of the external file in the Document window, making it easier to design pages, but you cannot edit this content directly in a document. Any changes to the external file are automatically reflected in every document that includes it. To insert a server-side include: 1 Choose Insert > Server-Side Include or click the Insert Server-Side Include button on the Invisibles panel of the Object palette. 2 In the dialog box that appears, enter the path to the file you want to include, or click the folder icon to browse to and select the file, then click OK.
<url>html/215.reusing.fm12.html</url>
<title>Viewing server-side includes in Dreamweaver</title> Viewing server-side includes in Dreamweaver By default, Dreamweaver processes all nonconditional server-side includes and displays them in the Document window. To change which files are processed or to turn off processing of server-side includes: 1 Choose Edit > Preferences > Translation. 2 Select Server-Side Includes from the list of translators. 3 Select one of the following options for translating server-side includes: In All Files Is the default setting; there is no reason to change this setting unless you would rather not see the content of included files displayed in the Document window. In No Files Turns off all processing of server-side includes in Dreamweaver. In Files with Extensions Processes server-side includes only in files that end in .stm, .html, .htm, .shtml, or .shtm. In Files Matching One of These Expressions First scans the document for matches to the listed regular expression(s), and if any are found, it then processes any server-side includes in the document.
<url>html/215.reusing.fm13.html</url>
<title>Editing a server-side include</title> Editing a server-side include Like library items, server-side includes are selected as a whole unit in the Document window. Unlike library items, the HTML contained in an include does not appear in the HTML inspector. Instead, the actual server instruction appears, looking like this: <!--#include virtual="/uber/html/footer.html" --> To edit the content associated with the included file, you must open the file. To edit a server-side include: 1 Select the server-side include in either the Document window or the HTML inspector and then click Edit in the Property inspector. The included file opens in a new Document window. 2 Edit the file as necessary and save. The changes are immediately reflected in the current document and in any subsequent document you open that includes the file.
<url>html/215.reusing.fm2.html</url>
<title>Using library items</title> Using library items Use library items for content that appears on many pages in your site and for content that must be updated frequently. Placing a library item in a document inserts a copy of the HTML into the file and creates a reference to the original, external item. The reference to the external library item makes it possible to update the content on an entire site all at once by changing the library item and then using the update commands in the Modify > Library menu. Dreamweaver stores library items in a Library folder within the local root folder for each site. You can define a different library for each site. (For more information about the local root folder for each site, see Creating a local site .)
<url>html/215.reusing.fm3.html</url>
<title>Creating a library item</title> Creating a library item You can create a library item from any selected portion of a document body. When you create a library item from a selected portion of document, Dreamweaver converts the selected area into a library item. Library items can include any BODY element, including text, tables, forms, images, Java applets, plugins, and ActiveX elements. Dreamweaver stores only a reference to linked items such as images. The original file must remain at the specified location for the library item to work correctly. Library items can also contain behaviors, but there are special requirements for editing the behaviors in library items. See Editing a behavior in a library item . Library items cannot contain timelines or style sheets, as the code for these elements is part of the HEAD . To create a library item: 1 Select a portion of a document to save as a library item. 2 Do one of the following: Choose Window > Library and drag the selection into the Library palette, or click the Create button on the Library palette. Press Control (Windows) or Command (Macintosh) to prevent the selection from being replaced by the new library item. Choose Modify > Add Object to Library. 3 Enter a name for the new library item.
<url>html/215.reusing.fm4.html</url>
<title>Library preferences</title> Library preferences You can customize the highlight color for library items and show or hide the highlight color in Highlighting preferences. To change library highlight color: 1 Choose Edit > Preferences and then select Highlighting. 2 Click the color box to select a color for Library Items. 3 Select Show to toggle the display of the library highlight color. View > Invisible Elements must also be on for the library highlight color to be visible in the Document window. 4 Click OK to close the Preferences dialog box.
<url>html/215.reusing.fm5.html</url>
<title>Adding a library item to a page</title> Adding a library item to a page When you add a library item to a page, the actual content is inserted in the document along with a reference to the original item. After the content has been inserted, the original item does not have to be present for the content to be displayed. To add a library item: 1 Place the cursor in the Document window. 2 Choose Window > Library or click the Library button on the Launcher. 3 Drag an item from the Library palette to the Document window, or select an item and click Add to Page. Press Control (Windows) or Command (Macintosh) while dragging an item out of the Library palette to insert the item's content without creating an instance of the item in the Library palette.
<url>html/215.reusing.fm6.html</url>
<title>Making changes to a library item</title> Making changes to a library item Editing a library item changes the original item file. Dreamweaver lets you choose to update the edited item in all documents in the current site. Note: The Style palette and the Timeline inspector are unavailable when you are editing a library item because library items can contain only BODY elements. Timeline and style sheet code is part of the HEAD . Similarly, the Behavior inspector is also unavailable because it inserts code into the HEAD as well as the BODY . For instructions on how to edit behaviors in library items, see Editing a behavior in a library item . To edit a library item: 1 Choose Window > Library or click Library on the Launcher. 2 Select a library item and click Open, or double-click the item. Dreamweaver opens a new window for editing the library item 3 Edit the library item and then save your changes. 4 In the dialog box that appears, choose whether to update the documents on the local site with the edited library item. Choose Yes to update all documents in the local site with the edited library item. Choose No to not change any documents until you use Modify > Library > Update Current Page or Update Pages. Updating library items replaces the content of an item in documents that include the item. To update a library item: 1 Choose Modify > Library > Update Pages. 2 In the dialog box that appears, choose the files that you want to update. Choose Entire Site to update all documents on the specified site. Choose Files That Use to update all documents that use the specified template. 3 Click Start. Renaming a library item breaks the connection between items that were inserted with the old name and the renamed item. To rename a library item: 1 Select a library item in the Library palette. 2 Click inside the item name. 3 Enter a new name. Deleting a library item removes the item from the library, but doesn't change the content of any documents. To delete a library item: 1 Choose Window > Library or click the Library button on the Launcher. 2 Select an item in the Library palette. 3 Click the Delete button or press the Delete key.
<url>html/204.creatingdocuments.fm11.html</url>
<title>About invisible elements</title> About invisible elements Choose View > Invisible Elements to show or hide markers in the Document window that represent invisible elements such as forms, named anchors, comments, and scripts. Showing invisible elements lets you select and view them and change their properties in the Property inspector. The element markers that appear when you choose View > Invisible Elements depend on the settings in the Invisible Elements panel of the Preferences dialog box. For example, you can specify that named anchors should be visible, but not line breaks. See Invisible Elements preferences . Certain invisible elements (comments, named anchors, and scripts) can be created using the buttons on the Invisibles panel in the Object palette and modified with the Property inspector. See Object palette .
<url>html/204.creatingdocuments.fm12.html</url>
<title>Invisible Elements preferences</title> Invisible Elements preferences Use Invisible Elements preferences to show or hide markers that represent elements such as scripts, comments, and named anchors that are not visible in the Document window. Showing invisible elements lets you select and view them and change their properties in the Property inspector. To change these preferences, choose Edit > Preferences, click Invisible Elements, and then choose elements to make visible or invisible. A check mark next to the name of the element in the dialog box means the element is visible. View > Invisible Elements must be selected for the markers representing invisible elements to appear in the Document window. Choose from the following options: Named Anchors Displays an icon that marks the location of named anchors ( A NAME ="" ) in the document. Scripts Displays an icon that marks the location of JavaScript or VBScript code in the body of the document. Select the icon to edit the script in the Property inspector or to link to an external script file. Comments Displays an icon that marks the location of HTML comments. Select the icon to see the comment in the Property inspector. Line Breaks Displays an icon that marks every line break ( BR) . The default setting for this option is off. Client-side Image Maps Displays an icon marking the location of client-side image maps in the document. Embedded Styles Displays an icon showing the location of styles embedded in the body of the document. If styles are placed in the head of a document, they will not appear in the Document window. Hidden Form Fields Displays an icon that marks the location of form fields where TYPE="hidden." Form Delimiter Displays a border around a form so you can see where to insert form elements. Anchor Points for Layers Displays an icon that marks the location of code defining a layer. The layer itself can be anywhere on the page. Selecting the icon selects the layer. Anchor Points for Aligned Elements Displays an icon showing the location of HTML code for elements that accept the ALIGN attribute. These include images, tables, ActiveX objects, plugins, and applets. In some cases, the code for the floating element may be separated from the visible object. Backstage lbObjects Displays an icon that marks the location of Backstage objects. The only way to modify these objects is in the HTML inspector or in another HTML editor. Cold Fusion Tags Displays the location of Cold Fusion tags whose content cannot be displayed in the document window. Active Server Page Tags Displays the location of Active Server Page tags whose content cannot be displayed in the document window.
<url>html/204.creatingdocuments.fm13.html</url>
<title>Setting up documents</title> Setting up documents Page titles, background images and colors, and text and link colors are basic properties of HTML documents. Page titles identify and name documents. Background images or colors set the overall appearance of the document. Text colors help users distinguish regular text from hypertext and to recognize which links have been visited and which have not.
<url>html/204.creatingdocuments.fm14.html</url>
<title>Changing the title of a page</title> Changing the title of a page The title of an HTML page is very important. It helps users keep track of what they're viewing as they browse, and it also identifies the page in history and bookmark lists. If you don't title a page, the page will appear in the browser window, bookmark lists, and history lists as Untitled Document . To change the title of a page: 1 Do one of the following: Choose Modify > Page Properties. Choose Page Properties from the shortcut menu by right-clicking (Windows) or Control-clicking (Macintosh) in the Document window. Choose View > Head Content and click the Title button. 2 Enter the title for the page in the Title field and click OK. The title appears in the title bar of the Document window. The file name of the page and the folder the file is saved in appear in parentheses next to the title.
<url>html/204.creatingdocuments.fm15.html</url>
<title>Defining a background image or page color</title> Defining a background image or page color Use the Page Properties dialog box to define an image or color for the page background. If you use both an image and a background color, the color appears while the image downloads. If the background image has transparent pixels, the background color will show through. To define a background image or color: 1 Choose Modify > Page Properties, or select Page Properties from the shortcut menu. 2 Enter the path to the background image in the Background Image box, or click the folder icon to browse to and select the image. Dreamweaver tiles (repeats) the background image if it does not fill the entire browser window. 3 Choose a background color from the Background color box. See Choosing colors .
<url>html/204.creatingdocuments.fm16.html</url>
<title>Defining default text colors</title> Defining default text colors Define default colors for regular text, links, visited links, and active links in the Page Properties dialog box, or choose a preset color scheme to define the page background and text colors. See Choosing colors . To define default text colors, do one of the following: Choose Modify > Page Properties and then choose a color for the Text Color, Link Color, Visited Links, and Active Links options. Choose Commands > Set Color Scheme and then choose a Background color and a Text and Links color set. The sample box displays how the color scheme will look in the browser.
<url>html/204.creatingdocuments.fm17.html</url>
<title>Choosing colors</title> Choosing colors Many of the dialog boxes and Property inspectors in Dreamweaver have a color box, which opens a color palette. Use the color palette to choose a color for an element. To choose a color in Dreamweaver: 1 Choose a color box in any dialog box or Property inspector. 2 To choose a color, do one of the following: Use the eyedropper to select a color swatch from the palette. All colors in the palette are web safe. Use the eyedropper to pick up a color anywhere on the desktop. Click the Web-safe Eyedropper button to limit the selection to web-safe colors. When this option is enabled, the selected color snaps to the closest web-safe color. Click the Eraser button to clear the current color without choosing a different color. Click the Palette button to open the system color picker. These colors are not limited to web-safe colors. About web-safe colors In HTML, colors are expressed as either hexadecimal values (for example, #FF0000 ) or as color names ( red ). The colors that are common to Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode are called web safe. The conventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a web-safe color. Testing, however, reveals that there are only 212 web-safe colors. Internet Explorer on Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0). All of the color pickers in Dreamweaver use the 212-color web-safe palette; selecting a color from the palette displays the color's hexadecimal value. While the four colors mentioned previously are not in the Dreamweaver web-safe palette, you can edit the hexadecimal value in any color field by hand if you want to use them. To choose a color outside the web-safe range, click the Palette button in the lower right corner to open the system color picker. UNIX versions of Navigator use a different color palette than the Windows and Macintosh versions. If you are developing exclusively for UNIX machines (or your target audience is Windows or Macintosh users with 24-bit monitors and UNIX users with 8-bit monitors), consider using hexadecimal values that combine the pairs 00, 40, 80, BF, or FF, which produce web-safe colors on the SunOS.
<url>html/204.creatingdocuments.fm18.html</url>
<title>Page properties</title> Page properties Use the Page Properties dialog box to specify a variety of options for the page. To open the Page Properties dialog box, choose Modify > Page Properties or choose Page Properties from the shortcut menu by right-clicking (Windows) or Control-clicking (Macintosh) in the Document window. Title Specifies the title that appears in the title bar of the Document window and the browser window. See Changing the title of a page . Background Image and Background Specify a background image or color for the page. See Defining a background image or page color . Text and Links Define default text, link, visited link, and active link colors. See Defining default text colors . Document Encoding Determines the HTML encoding of characters and the fonts that are used to display the document. Choose Western for English and Western European languages. Additional options are Central European, Cyrillic, Greek, Icelandic, Japanese, Traditional Chinese, Simplified Chinese, and Korean. All Asian languages require a double-byte system. If an option for the language you want to use is not available, choose Other to create a document with the encoding of the system you are running. To change the fonts that are used for each encoding, choose Edit > Preferences and select Fonts/Encoding. Tracing Image Specifies an image to use as a guide for copying a design. See Using a tracing image . Transparency Determines the transparency of the tracing image. Site Folder Displays the site root under which the current document has been saved. See Creating a local site . Document Folder Displays the folder in which the current document is saved.
<url>html/204.creatingdocuments.fm19.html</url>
<title>Viewing and editing HEAD content</title> Viewing and editing HEAD content HTML files are made up of two main sections: the HEAD and the BODY . The BODY is the part of the document that is visible to the user in a browser window (and in the Document window in Dreamweaver). The HEAD is generally invisible, with the exception of the TITLE , which appears in the title bar of both the browser and the Document window and is used as the label for bookmarks to the document. The HEAD contains important information in addition to the TITLE , including the document type, the language encoding, JavaScript and VBScript functions and variables, and keywords and content indicators for search engines. You can view the elements in the HEAD using the View menu or the HTML inspector. To view elements in the HEAD of a document: Choose View > Head Content. For each element in the HEAD , an icon appears at the top of the Document window. To insert elements into the HEAD of a document: 1 Choose Head from the pop-up menu at the top of the Object palette. 2 Click one of the buttons in the Object palette. 3 Enter options for the element in the dialog box that appears or in the Property inspector. To edit elements in the HEAD of a document: 1 Click one of the icons in the head area to select it. 2 Set or modify the properties of the element in the Property inspector. For information about the properties of specific HEAD elements, see the following topics: META properties Title properties Keywords properties Description properties Refresh properties Script properties Base properties Link properties
<url>html/204.creatingdocuments.fm2.html</url>
<title>Creating new HTML documents</title> Creating new HTML documents You can create new, blank HTML documents in Dreamweaver or base a new document on a template. You can also open an existing HTML document, regardless of how it was created. Usually, you create HTML documents for a specific web site. To learn how to create or edit a site, see Creating a local site . To open existing HTML files: Choose File > Open. To create a blank HTML document: Choose File > New. If you open the HTML inspector (choose Window > HTML), you'll see that it's not really a blank document—it contains HTML , HEAD , and BODY tags to get you started. As you type in the Document window or insert objects such as tables and images, you can leave the HTML inspector open and watch as the HTML source code is created. Note: When you save a new file, do not use high ASCII characters (for example, é, ç, ¥) in the file name if you intend to put the file on a remote server. Many servers will encode these characters on upload and cause any links to the file to break. To create a new document based on a template: 1 Choose File > New From Template. A dialog box appears, listing the templates available for the current site. When you use a template, some parts of the document are locked so that they can't be changed. This ensures consistency when you use a template for multiple documents in a site. 2 Select a template and click Select. To modify the editable parts of the template, select the placeholder content and type to replace it. The noneditable parts of the template are identified by a highlight color. To customize the highlight colors, see Template preferences . To learn more about designing and working with templates, see Templates overview .
<url>html/210.images.fm6.html</url>
<title>Resizing images and other elements</title> Resizing images and other elements You can visually resize elements such as images, plugins, Shockwave or Flash movies, applets, and ActiveX controls in Dreamweaver's Document window. Visual resizing helps you determine how an element affects the layout at different dimensions. Resizing resets the WIDTH and HEIGHT attributes of the element. The file size of the element does not change. Flash movies and other vector-based elements are fully scaleable and do not lose quality as you resize them. Bitmap elements such as GIF, JPEG, and PNG images may become coarse or distorted if you reset their WIDTH and HEIGHT attributes. It is recommended that you visually resize these elements in Dreamweaver only to determine the layout. Once you have determined the ideal size for your image, edit the file in an image-editing application. Editing the image may also reduce its file size and thus the time it takes to download. To resize an element: 1 Select the element (for example, an image or Shockwave movie) in the Document window. Resize handles appear at the bottom and right sides of the element and in the bottom right corner. If no resize handles appear, other elements are selected in addition to the element you want to resize. Click away from the element and select it again, or use the tag selector at the bottom of the Document window to select the element. 2 Resize the element: Drag the right side selection handle to adjust the width of the element. Drag the bottom selection handle to adjust the height of the element. Drag the corner selection handle to adjust both the width and the height of the element at the same time. Shift-drag the corner selection handle to preserve the element's aspect ratio (its width:height ratio) as you adjust its dimensions. Elements can be visually resized to a minimum of 6 pixels by 6 pixels. To adjust the width and height of an element to a smaller size (for example, 1 pixel by 1 pixel), use the Property inspector. To return a resized element to its original dimensions, click the W and H labels in the Property inspector.
<url>html/210.images.fm7.html</url>
<title>Using an external image editor</title> Using an external image editor You can open a selected image in an external image editor directly from Dreamweaver. When you return to Dreamweaver after saving the image file, any changes you made to the image are visible in the Document window. To choose an external image editor: 1 Choose Edit > Preferences. 2 Select External Editors from the Category list on the left. 3 Click Browse next to the Images box and select your preferred image editor. If you choose Macromedia Fireworks as the external image editor and launch it from within Dreamweaver, Fireworks automatically searches the folder that contains the selected file for a PNG file with the same name. For example, if you select an image whose source file is images/myPhoto.gif and images/ also contains a file called myPhoto.png, Fireworks opens the PNG file. As Fireworks' native file format, PNG files retain all the original layer, vector, color, and effects information, and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Dreamweaver. If you choose any other image editing application as the external image editor and launch the editor from within Dreamweaver, the application opens the selected image (for example, images/myPhoto.gif). If you prefer, you can manually open the original file from which the GIF was generated (for example, myPhoto.psd might be the original Photoshop file), make any changes, and regenerate the GIF image. Dreamweaver still updates the image in the Document window when you return. To launch the external image editor, do one of the following: Hold down Control (Windows) or Command (Macintosh) and double-click the image you want to edit. Right-click (Windows) or Control-click (Macintosh) the image you want to edit and choose Edit Image from the shortcut menu. Select the image you want to edit and click Edit Image in the Property inspector.
<url>html/210.images.fm8.html</url>
<title>Creating image maps</title> Creating image maps An image map is a single image with different hyperlinks assigned to defined regions of the image. Use the Image Map Editor to graphically create and edit client-side image maps. Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. When the user clicks a hotspot in the image, the associated URL is sent directly to the server. This makes client-side image maps faster than server-side image maps because the server does not need to interpret where the user clicked. Client-side image maps are supported by Netscape Navigator 2.0 and later, NCSA Mosaic 2.1 and 3.0, and all versions of Microsoft Internet Explorer. Dreamweaver does not alter references to server-side image maps in existing documents. You can use both client-side image maps and server-side image maps in the same document. Browsers that support both types of image maps give priority to client-side image maps. To include a server-side image map in a document, you have to write the appropriate HTML code. To create an image map: 1 Select the image and click the Map button in the Property inspector. You may need to click the expander arrow in the lower right corner of the Property inspector to see the Map button. 2 Type the name for the map in the Map Name box. This name appears as the NAME attribute of the MAP tag and as the USEMAP attribute of the IMG tag. 3 Select the circle or square tool and drag over the image to create a hotspot in the shape of a circle or rectangle, or select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point and twice to close the shape. 4 Type the URL for the hotspot in the Link box or click the folder icon to browse to and select a file. 5 To make the linked document appear somewhere other than the current window or frame, enter a window name in the Target box or choose a frame name from the pop-up menu. See Creating links . 6 In the Alt box, type alternative text that is displayed for the hotspot in text-only browsers. Some browsers display this text as a tooltip when the user pauses the mouse over the hotspot. 7 Repeat steps 3 through 6 until you have defined all hotspots; then click OK.
<url>html/211.tables.fm1.html</url>
<title>Tables overview</title> Tables overview Tables are useful for laying out data. They can also be used to control where text and graphics appear in a page. Once you create a table, you can add content, modify cell and row properties, and copy and paste multiple cells. You can also convert between tables and layers. Both tables and layers allow you to control the positioning of page elements, but layers are not supported in 3.0 and earlier browsers. If your design process requires rapid repositioning of content, you can use layers to accomplish this task and then convert layers to tables for viewing in older browsers. See Using layers to design tables .
<url>html/211.tables.fm10.html</url>
<title>Sorting tables</title> Sorting tables You can perform a simple table sort by sorting a table based on the contents of a single column. You can also perform a more complicated table sort by sorting on the contents of two columns. You cannot sort tables that contain COLSPAN or ROWSPAN attributes—that is, tables that contain merged cells. To sort a table: 1 Select the table and choose Commands > Sort Table. 2 In the dialog box that appears, choose from the following options: Select the column to sort in the Sort By option. Select whether you want to sort the column alphabetically or numerically in the Order option. This option is important when the contents of a column are numerical. An alphabetic sort applied to a list of one- and two-digit numbers will result in an alphanumeric sort (such as 1, 10, 2, 20, 3, 30) rather than a straight numeric sort (such as 1, 2, 3, 10, 20, 30). Select Ascending (A to Z or low to high) or Descending for the sort order. 3 To perform a secondary sort on a different column, specify the sort options under Then By. 4 Check the Sort Includes First Row option to include the first row in the sort. If the first row is a heading that shouldn't be moved, leave this option unchecked. 5 Click Apply or OK to sort the table.
<url>html/211.tables.fm11.html</url>
<title>Resizing tables and cells</title> Resizing tables and cells You can resize the entire table or individual rows and columns. When you resize the entire table, all of the cells in the table change proportionally. To resize the table: 1 Select the table. 2 Drag one of the selection handles to resize the table along that dimension. Dragging the corner handle resizes both dimensions. To change the size of a row or column, do one of the following: To change row height, drag the bottom row border. To change column width, drag the right column border.
<url>html/211.tables.fm12.html</url>
<title>Changing column widths</title> Changing column widths The Property inspector lets you specify the width of a column in three ways. To set the column width: 1 Click in any of the columns' cells or select the column. 2 Choose Window > Properties to open the Property inspector. 3 In the W field, do one of the following: Enter a number to set the column width to the specified number of pixels. Enter a number followed by the percent sign (%) to set the column width to a percentage of the table width. (The pixels and percent pop-up menu does not appear for cells, rows, or columns—only for entire tables.) Leave the field blank (the default) to let the browser and Dreamweaver determine the proper width based on the contents of the cell and the widths of the other columns. Generally, space is allocated based on the longest line or the widest image. This is why one column sometimes becomes much larger than the other columns in the table when you add content to it.
<url>html/211.tables.fm13.html</url>
<title>Clearing column widths and row heights</title> Clearing column widths and row heights The simplest way to set column widths and row heights is to drag the borders of the table. Dragging a column or row border automatically sets specific values for all of the columns or rows, either in pixels or as percentages of the table's current dimensions, depending on how the table width is specified. If you can't get the desired result by dragging table borders, you can clear the column widths and start over. To change widths and heights, do one of the following: Select the table, choose Modify > Table, and select Clear Cell Heights or Clear Cell Widths. Choose Window > HTML and change the widths and heights directly in the HTML inspector. In the Property inspector, enter specific width and height values in the W and H boxes.
<url>html/211.tables.fm14.html</url>
<title>Adding and removing rows and columns</title> Adding and removing rows and columns Use the commands on the Modify > Table menu or the commands on the shortcut menu to add and remove rows and columns from a table. To add rows or columns: 1 Click in a cell where you want the new row or column to appear. 2 Do one of the following: To add a row, choose Modify > Table > Insert Row, or choose Table > Insert Row from the shortcut menu. To add a column, choose Modify > Table > Insert Column, or choose Table > Insert Column from the shortcut menu. To add both rows and columns, choose Modify > Table > Insert Rows or Columns, or choose Table > Insert Rows or Columns from the Shortcut menu. In the dialog box that appears, enter the number of rows or columns you want to add. Specify whether the new rows or columns should appear before or after the selected row or column. Click OK. To delete a row or column: 1 Click in a cell within the row or column you want to delete. 2 Choose one of the following options: To delete a row, choose Modify > Table > Delete Row, or choose Table > Delete Row from the shortcut menu. To delete a column, choose Modify > Table > Delete Column, or choose Table > Delete Column from the shortcut menu. To add or delete rows or columns from the bottom and right of a table: 1 Select the entire table. (Click the table's upper left corner or click once in the table and choose Modify > Table > Select Table.) 2 In the Property inspector: Increase the row or column value to add rows. Decrease the row or column value to delete rows. Dreamweaver adds and removes rows from the bottom of the table, and it adds and removes columns to the right. Dreamweaver does not warn you if you are deleting rows and columns that contain data.
<url>html/211.tables.fm15.html</url>
<title>Splitting and merging cells</title> Splitting and merging cells Use the Property inspector or the commands on the Modify > Table menu to split or merge cells. You can merge any number adjacent cells—as long as the selection is rectangular in shape—to produce a single cell that spans multiple columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adds any necessary COLSPAN s or ROWSPAN s) to create the specified arrangement. In the following illustration, the cells in the middle of the first two rows have been merged so that they span two rows. To merge two or more cells in a table: 1 Select the cells you want to merge. The selected cells must be contiguous and in the shape of a rectangle. This table selection is not in the shape of a rectangle, so the cells can't be merged. This selection is in the form of a rectangle, so the cells can be merged. 2 Choose Modify > Table > Merge Cells or click the Merge Cells button in the Property inspector. The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell. To split a merged cell: 1 Click in the cell or select a cell. 2 Choose Modify > Table > Split Cells or click the Split Cells button in the Property inspector. 3 In the Split Cell dialog box, choose whether to split the cell into rows or columns, and then enter the number of rows or columns.
<url>html/211.tables.fm16.html</url>
<title>Copying and pasting cells</title> Copying and pasting cells You can copy and paste multiple table cells at one time, preserving the cell's formatting, or you can copy and paste only the contents of the cell. Cells can be pasted at an insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted. To cut or copy cells in a table: 1 Select one or more cells in the table. To be cut or copied, the selected cells must form a rectangle. See Selecting table elements . Incorrect selection: These cells can't be cut or copied. Correct selection: The cells can be cut or copied. 2 Cut or copy the cells using the commands on the Edit menu. If you select the entire row or column, the row or column is removed from the table when you choose Edit > Cut. To paste table cells: 1 Choose where to paste the cells. To add cells to the table before or above the current cell, click in one of the table cells. To create a new table with the cells, place the cursor outside of any table. 2 Choose Edit > Paste. If you are pasting entire rows or columns, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced, as long as the Clipboard contents are compatible with the selected cell. If you are pasting outside a table, the rows, columns, or cells are used to define a new table. To remove cell content but leave the cells intact: 1 Select one or more cells. 2 Choose Edit > Clear or press Delete. Note: If you select all the cells in a row or column, the row or column, not just its contents, is removed from the table. To copy and paste the contents of cells: 1 Select the text and choose Edit > Copy as Text. Only the text from the selected cells is copied onto the Clipboard. 2 Click in a single cell or elsewhere in the Document window and choose Edit > Paste as Text. You can't paste the selection back into a selection of multiple cells.
<url>html/204.creatingdocuments.fm7.html</url>
<title>Using the grid</title> Using the grid Use the grid as a visual guide for positioning or resizing layers. If snapping is enabled, layers automatically snap to the closest grid point when they are moved or resized. Snapping works regardless of whether or not the grid is visible. See Snapping layers to the grid .
<url>html/204.creatingdocuments.fm8.html</url>
<title>Adding text and inserting objects</title> Adding text and inserting objects Add content to your pages by typing or pasting text and inserting objects such as images, tables, and layers. To add text to your document, do one of the following: Type text directly into the Document window. Copy text from another application and then position the cursor in the Document window and choose Edit > Paste as Text. Text formatting applied in the other application is not preserved, but line breaks are preserved. For more information about formatting text, see Formatting text overview . To insert tables, images, and other objects into your document, do one of the following: Use the commands on the Insert menu to insert the specified objects into your document at the cursor location. Choose Window > Objects to open the Object palette. Find the type of object you want and click or drag it to insert the object into the Document window. For most objects, a dialog box appears, prompting you to select options or the desired file. To hide the dialog box, choose Edit > Preferences, select General, and then deselect the Show Dialog When Inserting Objects option.
<url>html/204.creatingdocuments.fm9.html</url>
<title>Horizontal rules</title> Horizontal rules Horizontal rules are useful for organizing information. On a page, text and objects can be visually separated by one or more rules. Horizontal rules can also be used to underline or emphasize titles and other elements. To create a horizontal rule: 1 In the Document window, place the cursor where you want to insert a horizontal rule. 2 Do one of the following: Choose Insert > Horizontal Rule. Choose Window > Objects to open the Object palette, and then click the Horizontal Rule button. To modify a horizontal rule: 1 In the Document window, select the horizontal rule. 2 Choose Window > Properties to open the Property inspector. 3 Modify the horizontal rule by changing any of the following properties: W and H Specify the width and height of the rule in pixels or as a percentage of the page size. Align Specifies the alignment of the rule (Default, Left, Center, or Right). This setting only applies if the width of the rule is less than the width of the browser window. Shading Specifies whether the rule is drawn with shading. Deselect this option to draw the rule in solid color.
<url>html/205.templates.fm1.html</url>
<title>Templates overview</title> Templates overview Use templates to create documents for your site that have a common structure and appearance. Templates are useful if you want to make sure that all of the pages in a site share certain characteristics, regardless of whether you are creating a new site or updating an existing site. Rather than setting the correct properties for every new page, or making changes to every single page, use a template to make changes to several pages at once. When you create a template, you can indicate which elements of a page should remain constant (noneditable) and which elements can be changed. For example, if you are publishing an online magazine, the masthead probably won't change, but the title and content of the feature story will change in every issue. To indicate the style and location of the feature story, you can use placeholder text and define it as an editable region. To add a new feature article, the writer just selects the placeholder text and types the article over it. You can modify a template even after you have used it to create documents. When you update documents that use the template, the noneditable sections of those documents will be updated to match the changes to the template. Click Show Me for an animated introduction to using templates in Dreamweaver.
<url>html/205.templates.fm10.html</url>
<title>Template palette</title> Template palette Use the Template palette to create new templates and manage existing templates. To open the Template palette: Choose Window > Templates. The top pane of the Template palette lists all of the available templates for the site. The lower pane displays the contents of the selected template. To edit a template: Select a template from the list and click open, or double-click the name in the list. To rename a template: Click once on the name of the selected template. When the name becomes an editable field, type a new name. When you rename a template, references to the template are not automatically updated. To update the reference you must reapply the newly named template to a document. See Creating documents based on templates .
<url>html/205.templates.fm11.html</url>
<title>Creating documents based on templates</title> Creating documents based on templates You can use a template as a starting point for a new document or apply it to an existing document. To create a new document based on a template, do one of the following: Choose File > New From Template. In the dialog box that appears, choose a template and click Select. Create a new document and then apply a template to it by dragging a template from the Template palette. To apply a template to an existing document, do one of the following: Choose Modify > Templates > Apply Template to Page. Choose a template from the list and click Select. Drag the template from the Template palette to the Document window. Select the template in the Template palette and click Apply to Page. When you apply a template to an existing document, the content in the template is added to the document. If the document already has a template applied to it, Dreamweaver attempts to match editable regions that have the same name in both templates and to insert the content from the editable regions into the editable regions in the new template. If there are nonmatching editable regions, or if an editable region in the previous template doesn't have a corresponding region in the new template, a dialog box appears prompting you to delete the extraneous regions or transfer them to the new template. If there are more editable regions in the new template, they will appear in the documents as placeholder content.
<url>html/205.templates.fm12.html</url>
<title>Finding a document's editable regions</title> Finding a document's editable regions All of the editable regions in a template's body are listed at the bottom of the Modify > Templates menu. Use this list to select and edit the regions. To find an editable region and select it in the document: Choose Modify > Templates and then select the name of the region from the list. The region is selected in the document. Start typing to replace the contents of the region.
<url>html/205.templates.fm13.html</url>
<title>Detaching a document from a template</title> Detaching a document from a template To make changes to both the locked and editable regions of a page that uses a template, you must first detach the page from the template. Once detached, you can edit the page as if no template was applied. However, the page will no longer be updated when the template is updated. To detach a document from a template: Choose Modify > Templates > Detach From TemplateName.dwt. The page is detached from the template and all regions become editable. Modifying templates and updating the site When you make a change to a template that you are using in the current site, Dreamweaver prompts you to update the pages that use the template. You can also use the update commands to manually update the current page or the entire site. Applying the update commands is the same as reapplying the template. To open the template used to create the current document: Choose Modify > Templates > Open TemplateName.dwt. To update the current document to the most current version of a template: Choose Modify > Templates > Update Current Page. To update the entire site or all documents that use a particular template: 1 Choose Modify > Templates > Update Pages. The Update Pages dialog box appears. 2 From the Look in option, do one of the following: Select Entire Site, and then select the site name. This updates all pages in the selected site to their corresponding templates. Select Files That Use, and then select the template name. This updates all pages in the current site that use the selected template. Note: If you renamed a template, you must first reapply the template to the documents that reference it before updating the entire site. See Template palette . 3 From the Update option, make sure Templates is checked. 4 Click Start.
<url>html/205.templates.fm14.html</url>
<title>Importing and exporting XML content</title> Importing and exporting XML content Use the XML import and export features to separate the editable regions from locked regions in documents using templates or to merge the editable regions of a document with an existing template. This allows you to export editable content and modify it, or to develop content outside of Dreamweaver. To export a document's editable regions as XML: 1 Choose File > Open, then open a document that uses a template (and has editable regions). 2 Choose File > Export > Export Editable Regions as XML. 3 In the XML dialog box that appears, choose a tag notation and click OK. For information about tag notations, see About XML tag notations . 4 In the dialog box that appears, enter a name for the XML file and click Save. When a document is exported, the generated XML file contains the name of the template the document is using and all editable region names. To import XML content: 1 Choose File > Import XML into Template. 2 Select the XML file and click Open. When XML file is imported, Dreamweaver merges the XML content with the template specified in the XML file and displays the result in a new Document window. If the specified template is not found, Dreamweaver prompts you to select a template to use.
<url>html/205.templates.fm15.html</url>
<title>About XML tag notations</title> About XML tag notations Dreamweaver lets you export content using either of two tag notations: Editable Region Name tags or Standard Dreamweaver XML tags. Which notation you use depends on how XML content is incorporated into your web site. The following XML code was exported from a document based on a template named newstemplate . The document has one editable region, named Edit-Region . Editable Region Name tags use the names of editable regions as tags. In this example, the doctitle tag identifies the title of the template and Edit-Region identifies the editable region. <doctitle> <![CDATA[<title>newstemplate</title>]]> </doctitle> <Edit-Region> <![CDATA[{Edit-Region}]]> </Edit-Region> Standard Dreamweaver XML tags use the item name tag. In this example, item name="doctitle" and item name="Edit-Region" are used to identify the title of the template and the editable region. <item name="doctitle"> <![CDATA[ <title>newstemplate</title>]]> </item> <item name="Edit-Region"> <![CDATA[{Edit-Region}]]></item> </item>
<url>html/205.templates.fm2.html</url>
<title>Creating templates</title> Creating templates You can create a template from an existing HTML document and then modify it to suit your needs, or you can create a template from scratch, starting with a blank HTML document. Templates are automatically stored in the Templates folder in the local root folder for the site. When you create a new template, the Templates folder is created if it does not already exist. To save an existing document as a template: 1 Choose File > Open and select an existing document. 2 Choose File > Save as Template. 3 In the dialog box that appears, select a site and enter a name for the template in the Save As box. 4 Click Save. To create a new, blank template: 1 Choose Window > Templates. 2 In the Template palette, click New. A new, untitled template is added to the list of templates in the palette. 3 While the template is still selected, enter a name for the template. To edit a template, do one of the following: 1 Choose Window > Templates. 2 In the Template palette, double-click the name of the template.
<url>html/208.roundtrip.fm6.html</url>
<title>HTML Colors preferences</title> HTML Colors preferences Use the HTML Colors preferences to control the background, text, and tag colors in the HTML inspector. Background Specifies the background color of the HTML inspector. This color appears only when you click or type in the inspector; when focus is not on the HTML inspector, its background color is a medium gray. Text Specifies the color of text that appears between tags (for example, in the code <B>some text</B> , the words "some text" appear in Text color, but the tags do not). To override the Text color for a specific tag, select the Include Contents option. Comments Specifies the color for comment tags ( <!-- --> ) and their contents. Tag Default Specifies the color for all tags except comments. To override the Tag Default color, set the color for specific tags. Tag Specific You can override the Tag Default and Text color settings by specifying Color Include Contents for specific tags. To set a color for a specific tag: 1 Select a tag in the Tag Specific box. Shift-click to select multiple adjacent tags or Control-click (Windows) or Command-click (Macintosh) to select multiple nonadjacent tags. 2 Click the radio button next to the color swatch at the bottom of the panel and use one of these methods to choose a new color value: In the text field next to the swatch, enter a hexadecmial value. Hold down the mouse button on the color swatch and select a new color from the palette of browser-safe colors or the system color picker. 3 To color the text between the opening and closing tags of this tag, select Apply Color to Tag Contents.
<url>html/208.roundtrip.fm7.html</url>
<title>Cleaning up HTML</title> Cleaning up HTML Use the Clean Up HTML command to remove empty tags, combine nested FONT tags, and otherwise improve messy or unreadable HTML code. To clean up HTML code: 1 Open an existing document and choose Commands > Clean Up HTML. 2 In the dialog box that appears, select from the following options: Remove Empty Tags Removes any tags that have no content between them. For example, <B></B> and <FONT COLOR="FF0000"></FONT> would be considered empty tags, but the B tags in <B>some text</B> would not. Remove Redundant Nested Tags Removes all redundant instances of a tag. For example, in the code <B>This is what I <B>really</B> wanted to say</B> , the B tags surrounding the word "really" are redundant and would be removed. Remove Non-Dreamweaver HTML Comments Removes all comments that were not inserted by Dreamweaver. For example, <!--begin body text--> would be removed, but <!-- #BeginEditable "doctitle" --> would not (because it is a Dreamweaver comment that marks the beginning of an editable region in a template). Remove Dreamweaver HTML Comments Removes all comments that were inserted by Dreamweaver. For example, <!-- #BeginEditable "doctitle" --> would be removed, but <!--begin body text--> would not (because it is not a Dreamweaver comment). Removing Dreamweaver comments turns template-based documents into ordinary HTML documents and library items into normal HTML code (that is, they cannot be updated whenever the original template or library item changes). Remove Specific Tag(s) Removes the tags specified in the adjacent text field. Use this option to remove custom tags inserted by other visual editors and other tags that you do not want to appear on your site (for example, BLINK ). Separate multiple tags with commas (for example, FONT, BLINK ). Combine Nested <font> Tags When Possible Consolidates two or more FONT tags when they control the same range of text. For example, <FONT SIZE="7"><FONT COLOR="#FF0000">big red</FONT></FONT> would be changed to <FONT SIZE="7" COLOR="#FF0000">big red</FONT> . Show Log on Completion Displays an alert box with details about the changes made to the document as soon as the clean up is finished. 3 Click OK. Depending on the size of your document and the number of options selected, it may take several seconds to complete the clean up.
<url>html/208.roundtrip.fm8.html</url>
<title>Formatting the HTML source code in existing documents</title> Formatting the HTML source code in existing documents The HTML source formatting options that you specify in HTML Format preferences and SourceFormat.profile apply only to any subsequent new documents that you create with Dreamweaver. To apply these formatting options to existing HTML documents, use the Apply Source Formatting command. To apply HTML source formatting options to an existing document: 1 Choose File > Open to open an existing HTML file in the Document window. 2 Choose Commands > Apply Source Formatting.
<url>html/208.roundtrip.fm9.html</url>
<title>Correcting invalid markup</title> Correcting invalid markup If you see HTML code highlighted in bright yellow in either the Document window or HTML inspector, Dreamweaver has found invalid HTML that it cannot display. Often these invalid HTML markers will appear when you begin to type a tag in the HTML inspector and then switch to the Document window without completing the tag. To correct the problem, click the yellow Invalid HTML marker and follow the suggestion in the Property inspector. See also Roundtrip HTML overview .
<url>html/209.formatting.fm1.html</url>
<title>Formatting text overview</title> Formatting text overview Formatting in Dreamweaver is similar to using a standard word processor. Use the Text > Format menu or the Format pop-up menu in the Property inspector to set the default style (Paragraph, Preformatted, Heading 1, Heading 2, and so on) for a block of text. To change the font, size, color, and alignment of selected text, use the Text menu or the Property inspector, or use styles to define the appearance of all text that belongs to a particular category. The Text menu commands and the Property inspector apply formatting using standard HTML tags (such as B , FONT , and CODE ) that are supported by all popular web browsers. Custom styles use Cascading Style Sheets (CSS) to define the formatting for all text in a particular class or redefine the formatting for a particular tag (such as H1 , H2 , P , or LI ), and are supported by Netscape Navigator 4.0 and later and Microsoft Internet Explorer 3.0 and later. You can use both styles and HTML formatting within the same page, but as with word processors, formatting applied using the Text menu or Property inspector overrides style sheet formatting for the selected text. To see an animated introduction to using styles in Dreamweaver, see Formatting text with style sheets .
<url>html/209.formatting.fm10.html</url>
<title>List properties</title> List properties List properties determine the appearance of the list as a whole and of selected list items, enabling you to create numbered lists that are not ordered and to change the style midlist. To view List properties, select a list item and choose Text > List > List Properties, or click List Item in the Property inspector. (You may need to click the expander arrow in the lower right corner of the Property inspector to see the List Item button.) The following options are available depending on the list type selected: List Type Specifies the list as numbered, bulleted, menu, or directory. Style Determines the style of numbers or bullets used for a numbered or bulleted list. All items in the list will have this style unless a new style is specified for items within the list. Start Count Sets the value for the first item in a numbered list. New Style Enables you to specify a new style for a list item within a list. Reset Count to Specifies a number other than the incremented value for the list item, enabling you to create nonsequential numbered lists.
<url>html/209.formatting.fm11.html</url>
<title>Formatting text with style sheets</title> Formatting text with style sheets A style is a group of formatting attributes that controls the appearance of a block or range of text. Use styles to format a single document, or use an external style sheet (that is, one that is stored externally and linked to the current document) to control several documents at once. A style sheet includes all of the styles for a document. Styles are identified by name or by HTML tag, allowing you to change an attribute of a style and see all text to which that style applies instantly reflect the change. Styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. They can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers. Click Show Me for an animated introduction to creating style sheets in Dreamweaver. Style sheets reside in the HEAD area of a document and define a series of styles. Styles can define the formatting attributes for HTML tags, ranges of text identified by a CLASS attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS) specification. Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines. Style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some style attributes, but most earlier browsers ignore them. There are three types of styles in Dreamweaver: HTML tag styles redefine the formatting for a particular tag, such as H1 . When you create a style for the H1 tag, all the text with the H1 tag immediately changes. Custom styles are similar to the styles you use in a word processor, except that there is no distinction between character and paragraph styles. You can apply custom styles to any range or block of text. If the style is applied to a block of text (such as an entire paragraph or unordered list), a CLASS attribute is added to the block's tag (for example, P CLASS="myStyle" or UL CLASS="myStyle" ). If the style is applied to a range of text, SPAN tags containing the CLASS attribute are inserted around the selected text. See Applying a custom style . CSS selector styles redefine the formatting for a particular combination of tags (for example, TD H2 applies whenever an H2 header appears inside a table cell) or for all tags that contain a specific ID attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle" ). Text formatting that is manually applied to ranges of text can take precedence over styles. To make styles control the formatting for a paragraph, remove all other formatting settings. Although you can set all the style attributes defined by the CSS1 specification in Dreamweaver, not all attributes appear in the Document window. The attributes that do not appear are marked with an asterisk (*) in the Style Definition dialog box. It is also important to note that some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser.
<url>html/209.formatting.fm12.html</url>
<title>About style sheets</title> About style sheets The World Wide Web Consortium is responsible for the Cascading Style Sheets specification (CSS1) , which defines style properties (for example, font, color, padding, margin, word spacing) that control the appearance of elements. Dreamweaver lets you set any CSS1 property. See Formatting text with style sheets . In Microsoft Internet Explorer 4.0, you can use a scripting language such as JavaScript or VBScript to change the positioning and style properties of elements after the page has loaded. In Netscape Navigator 4.0, you cannot change style properties after the page has loaded, but you can change positioning properties.
<url>html/209.formatting.fm13.html</url>
<title>Creating or linking to an external style sheet</title> Creating or linking to an external style sheet An external style sheet is a text file containing only style specifications. Editing an external style sheet affects all documents linked to it. The Dreamweaver HTML Help Pages use a linked style sheet called help.css. Open this file (located inside the Help/html folder) in a text editor to see what the code for a style definition looks like. Open any of the topic files (those that begin with a number) to see how the style sheet is linked to the document using a LINK tag, as well as how specific styles are applied. To create or link to an external style sheet: 1 Choose Window > Styles or click Styles in the Launcher. 2 In the Styles palette, click Style Sheet. 3 In the Edit Styles dialog box, click Link. 4 Do one of the following: Enter the path to the external style sheet in the File/URL box. Create a new external style sheet by entering a file name that doesn't exist at the specified location. External style sheets must end in the .css extension. 5 Choose Link or Import to specify the tag used to attach the external style sheet and then click OK. While both IMPORT and LINK make all styles in the remote style sheet available to the current document, LINK offers more features and works in more browsers. The external style sheet appears with the word (link) after the name on the list of styles in the Edit Styles dialog box. Follow the remaining steps only if you want to create or edit styles in the external style sheet. 6 Double-click the style sheet name. A second Edit Styles dialog box appears. 7 Click New to define styles in the external style sheet. 8 Click Save when you have finished defining styles.
<url>html/209.formatting.fm14.html</url>
<title>Editing an external style sheet</title> Editing an external style sheet Editing an external style sheet affects all documents linked to it. To edit an external style sheet: 1 Open any document that is linked to the external style sheet you want to change. 2 Choose Window > Styles or click the Styles button in the Launcher. 3 Click the Style Sheet button in the Style palette. 4 In the Edit Style Sheet dialog box, double-click the name of the external style sheet. A second Edit Style Sheet dialog box appears that displays the styles in the external style sheet. 5 Edit the styles in the external style sheet and click Save when you have finished. This change affects all documents linked to the external style sheet.
<url>html/211.tables.fm2.html</url>
<title>Creating tables</title> Creating tables Use the Object palette or the Insert menu to create a new table. To insert a table: 1 Do one of the following: Place the cursor where you want the table to appear on the page and click the Table button on the Common panel of the Object palette or choose Insert > Table. Drag the Table button from the Object palette to the desired location on the page. 2 In the dialog box that appears, enter the following information: Rows and Columns Specify the number of table rows and columns. Cell Padding Specifies the amount of spacing between the cell content and the cell boundary (or wall). Cell Spacing Specifies the amount of spacing between each table cell, not including the border. Width Specifies the width of the table in pixels or as a percentage of the browser window. Tables specified in pixels are better for precise layout of text and images, while tables specified in percentages are a good choice when the proportions of the columns are more important than their actual widths. Border Specifies the width of the table border. Note: If you want to insert a table without having to first specify these options, turn off the Show Dialog When Inserting Objects option in the General preferences. See General preferences .
<url>html/211.tables.fm3.html</url>
<title>Nesting tables</title> Nesting tables A nested table is a table that has been inserted into a table cell. You can configure a nested table as you would any other table. However, its width is limited by the width of the cell in which it appears. To nest a table within a table cell: 1 Do one of the following: Click in the cell where you want the second table to appear and choose Insert > Table. Click in the cell where you want the second table to appear and then click the Table button on the Common panel of the Object palette. Drag the Table button on the Common panel of the Object palette to the cell where you want the second table to appear. 2 In the dialog box that appears, specify properties for the table and click OK.
<url>html/211.tables.fm4.html</url>
<title>Filling a table with content</title> Filling a table with content Type text directly into table cells or paste text into the cells. You can control the properties of a graphic in a table as for any other graphic. See Image properties . To add text to a table: 1 Click in any cell and do one of the following: Begin typing to enter text into the table. Table cells expand as you type. Paste text copied from Dreamweaver or another text editing application. Use the Paste as Text command to preserve paragraphs. See Adding text and inserting objects . 2 Press Tab to move to the next cell or press Shift-Tab to move to the previous cell. Pressing Tab in the last cell of a table automatically adds another row. You can also use the Arrow keys to move between cells. To add a graphic to a table: 1 Click in the cell where you want the graphic to appear. 2 Click the Insert Image button in the Common panel of the Object palette or choose Insert > Image. 3 In the dialog box that appears, choose an image file.
<url>html/211.tables.fm5.html</url>
<title>Selecting table elements</title> Selecting table elements With a single gesture you can select an entire table, row, or column, or a contiguous range of cells within the table. Once the table or individual cells are selected, you can: Modify the appearance of selected cells or the text contained in them. See Formatting tables . Copy and paste contiguous cell regions. See Copying and pasting cells . You can also select multiple discontiguous cells in a table and modify the properties of those cells. You cannot copy or paste discontiguous cell selections. To select the entire table, do one of the following: Click the top left corner of the table or anywhere on the right or bottom edge. Click once in the table and choose Modify > Table > Select Table. Click once in the table and choose Edit > Select All. Position the cursor anywhere inside of the table and select the <table> tag at the bottom left corner of the Document window. Selection handles appear around the table when it is selected. To select rows or columns, do one of the following: Position the cursor at the left margin of a row or at the top of a column. Click when the selection arrow appears. Click in a cell and drag across or down to select multiple rows or columns. To select one or more cells, do one of the following: Click in a cell and drag down or across to another cell. Click in one cell and then Shift-click another cell. All of the cells within the rectangular region are selected. To select multiple discontiguous cells, do one of the following: Press Control (Windows) or Command (Macintosh) and click in the table to add cells, rows, or columns to the selection. Select multiple cells in the table and then press Control (Windows) or Command (Macintosh) and click cells, rows, or columns to deselect individual cells.
<url>html/211.tables.fm6.html</url>
<title>Formatting tables</title> Formatting tables You can change the appearance of tables by setting properties for the table and table cells or by applying a preset design to the table. See Setting table properties , Setting row and cell properties , and Formatting a table with a preset design . To format text in tables, you can apply formatting to selected text or use styles. See Formatting text overview . About table tags When formatting tables in the document window, you can define properties that apply to the entire table or to selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set one way for the whole table and another way for individual table cells, it is useful to understand how the HTML is interpreted. When the same property is set more than once in a table, it is interpreted in this way: Cell formatting, which is part of the TD tag, takes precedence over table row formatting ( TR tag), which in turn takes precedence over table formatting ( TABLE tag). Therefore, if you specify a background color of blue for a single cell and then set the background color of the entire table to yellow, the blue cell will not change to yellow, since the TD tag takes precedence over the TABLE tag. In the following example, the TABLE tag sets a background color of yellow (#FFFF99) for the entire table. The first TR tag changes those cells to green (#33FF66), and the second TD tag changes the top center cell to blue (#333399). The TR and TD tags in the bottom row have not been altered, so those cells take on the table color, which is yellow. <TABLE BORDER="1" WIDTH="75%" BGCOLOR="#FFFF99"> <TR BGCOLOR="#33FF66"> <TD> </TD> <TD BGCOLOR="#333399"> </TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>
<url>html/211.tables.fm7.html</url>
<title>Setting table properties</title> Setting table properties The Property inspector displays table properties when a table is selected. You can also use the Format Table command to quickly apply a preset design to a selected table. See Formatting a table with a preset design . To specify table properties: 1 Select the table. 2 Choose Window > Properties to open the Property inspector. Click the expander arrow in the lower right corner to see all properties. 3 To name the table, type a name in the Table Name field. 4 Choose from the following table layout options: Rows and Cols Set the number of rows and columns in the table. W and H Set the width and height of the table, specified as a percentage of the browser window or as an absolute value in pixels. It is rare to set the height of a table. Align Aligns the table to the browser's left (the default setting), right, or center in 4.0 and later browsers. To center a table for 3.0 browsers, select the table and choose Text > Alignment > Center. V Space and H Space Specify the amount of space (in pixels) to leave around the top and bottom and the left and right of the table, respectively. Clear Row Heights and Clear Column Widths Buttons delete all table row height and column width values, respectively, from the table. Convert Table Widths to Pixels Button converts the table width from a percentage of the browser window to its current width in pixels; click the Convert Table Widths to Percent button to convert the current width in pixels to a percentage of the browser window. 5 Choose from the following cell layout options: CellSpace Sets the amount of space between a table's cells. CellPad Sets the amount of space between a cell's contents and its edges. When cell spacing and cell padding are not assigned specific 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. 6 Set these options to format borders: Border Sets the width of the border around the table in pixels. Most browsers display the border as a three-dimensional line. If you are using the table for page layout, specify a border value of 0. To view cell and table boundaries when border is set to 0, choose View > Table Borders. Light Brdr and Dark Brdr Set border colors that have a highlight and shadow effect, respectively, to give a three-dimensional appearance to the border. (To return to the default gray shades, remove the color values and leave the boxes blank.) Brdr Sets the border color for the entire table. 7 Use the Bg options to set the background image or background color for the table.
<url>html/211.tables.fm8.html</url>
<title>Setting row and cell properties</title> Setting row and cell properties Select any combination of cells and then use the Property inspector to change the appearance of individual cells, rows, or columns. To select cells, rows, and columns, see Selecting table elements . To apply formatting to the entire table, see Setting table properties . To format a row, column, or cell: 1 Select any combination of cells in the table. 2 Choose Window > Properties to open the Property inspector, and click the expander arrow in the lower right corner to see all properties 3 Choose from the following appearance options: Horz Sets the horizontal alignment of the cell's contents to either the browser's default (usually left for regular cells and center for header cells), left, right, or center. Vert Sets the vertical alignment of the cell's contents to either the browser's default (usually middle), top, middle, bottom, or baseline. W and H Set the width and height of selected cells in pixels. To use percentages, follow the value with a percent sign (%). Bg (top) Sets the background image for the cells. Bg (bottom) Sets the background color for the cells. Background color appears inside the cells only—that is, it does not flow over cell spacing or table borders. This means that if your cell spacing and cell padding are not set to 0, there will be gaps between the colored areas even if the border is set to 0. Border Sets the border color for the cells. 4 Choose from the following layout options: Merge and Split Combine or divide cells. See Splitting and merging cells . No Wrap Prevents word wrapping, so that cells expand in width to accommodate all of the data. Normally, cells expand horizontally to accommodate the longest word and then expand vertically. Header Formats each cell as a table header. The contents of table header cells ( TH ) are bold and centered by default.
<url>html/211.tables.fm9.html</url>
<title>Formatting a table with a preset design</title> Formatting a table with a preset design Use the Format Table command to quickly apply a preset design to a table and then select options to further customize the design. To use a preset design: 1 Select the table and choose Commands > Format Table. 2 In the dialog box that appears, choose a design scheme from the list on the left. The table updates to display a sample of the design. 3 To further customize the design, make changes to the Row Colors, Top Row, and Left Col options. 4 To modify the border width, enter a value in the Border box. Enter 0 for no border. 5 To apply the design to the table cells ( TD tags) rather than table rows ( TR tags), select the Apply All Attributes to TD Tags Instead of TR Tags option. Formatting applied to table cells takes precedence over formatting applied to table rows. However, formatting applied to table rows results in cleaner, more concise HTML source code. See Formatting tables . 6 Click Apply or OK to format the table with the selected design.
<url>html/212.layers.fm1.html</url>
<title>Layers overview</title> Layers overview Layers are used to position elements at exact locations in the browser window. Layers can contain text, images, plugins, and even other layers — anything you can put in the body of an HTML document you can also put in a layer. Layers are especially useful for making parts of your page overlap. You can show and hide layers with behaviors to create fast-loading pages that change without loading additional content from source files. You can make layers move or change over time with the Timeline. Click Show Me to see how to create and position layers. About layers There are two layer formats for positioning content on a page: CSS layers and Netscape layers. CSS layers (also known as CSS-P elements) position content on a page using the DIV and SPAN tags. The properties of CSS layers are defined by the World Wide Web Consortium's Positioning HTML Elements with Cascading Style Sheets . Netscape layers position content on a page using the Netscape LAYER and ILAYER tags. The properties of Netscape layers are defined by Netscape's proprietary layer format. Both Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0 support layers created using the DIV and SPAN tags. Only Navigator supports layers created with the LAYER and ILAYER tags. Earlier versions of both browsers will display the contents of a layer, but will not position them. In Dreamweaver, the term layer refers to any element that can be positioned at exact coordinates on the page. Positioning properties include left and top (x and y coordinates, respectively), z-index (also called the stacking order), and visibility. Positioned elements can be defined with the DIV , SPAN , LAYER , and ILAYER tags in Dreamweaver. See Layer preferences .
<url>html/212.layers.fm10.html</url>
<title>Selecting layers</title> Selecting layers Select one or more layers to align the layers, make them the same width and height, reposition them, and so on. For a complete list of options, see Layer properties . To select a layer, do one of the following: Click the layer marker in the Document window that represents the layer's location in the HTML code. If the layer marker isn't visible, choose View > Invisible Elements. Click a layer's selection handle. If the handle isn't visible, click anywhere inside the layer to make it visible. Click a layer's border. If no layers are active or selected, Shift-click inside a layer. If multiple layers are selected, Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside a layer. This will deselect all other layers. Click the name of the layer in the Layer palette. To select multiple layers, do one of the following: Press Shift and click inside or on the border of two or more layers. Shift-click two or more layer names in the Layer palette. When multiple layers are selected, the border and handles of the last selected layer are highlighted in black.
<url>html/212.layers.fm11.html</url>
<title>Resizing layers</title> Resizing layers 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 . To resize a layer, do one of the following: To resize by dragging, select the layer and drag any of the resize handles. To resize 1 pixel at a time, select the layer and press Control-arrow (Windows) or Option-arrow (Macintosh). To resize by the grid snapping increment, press Shift-Control-arrow (Windows) or Shift-Option-arrow (Macintosh). Resizing a layer changes the width and height of the layer. It does not define how much of the layer's content is visible. To define the visible region within a layer, see Layer properties . To resize multiple layers: 1 In the Document window, select two or more layers. 2 Do one of the following: Choose Modify > Layers > Make Same Width or Make Same Height. The first selected layers will conform to the width or height of the last selected layer (highlighted in black). In the Property inspector, under Multiple Layers, enter width and height values. The values are applied to all selected layers.
<url>html/207.sitemgmt.fm14.html</url>
<title>Saving search patterns</title> Saving search patterns You can save search patterns for later use by clicking the Save Query button in the Find or Replace dialog box. Saving a query is a good idea if you regularly perform the same search (for example, to strip out nonstandard tags from documents created with another visual HTML editor, or to confirm that all images in a file have HEIGHT , WIDTH , and ALT attributes before the document goes live on the web) and do not want to reconstruct the search pattern every time. To save a search pattern: 1 Set the parameters for the search by following the steps outlined in Searching and replacing . If you are performing a tag or advanced text search, see Searching for HTML tags and attributes or Searching for text between specific tags for information about setting additional search parameters. 2 Click the Save Query button (identified with a disk icon). The default location to save queries is the Configuration/Queries folder inside the Dreamweaver application folder. 3 In the dialog box that appears, give the file a name that identifies the query and click Save. For example, if the search pattern involves looking for IMG tags with no ALT attribute, you might name the query img_no_alt.dwr. Find queries end in the extension dwq; replace queries end in the extension dwr. To recall a search pattern: 1 Choose Edit > Find or Edit > Replace. 2 Click the Load Query button (identified with a folder icon). The Load Query dialog box automatically opens in the Configuration/Queries folder. You can navigate to another folder if you have saved queries elsewhere. 3 Select a query file and click Open. If you are in the Find dialog box, only Find queries (.dwq files) are available. If you are in the Replace dialog box, both Find queries and Replace queries (.dwr files) are available. 4 Click Find Next, Find All, Replace, or Replace All to initiate the search.
<url>html/207.sitemgmt.fm15.html</url>
<title>About regular expressions</title> About regular expressions Regular expressions are patterns that describe character combinations in text. Use them in your searches to help describe concepts such as "sentences that begin with `The'" and "attribute values that contain a number." The following table lists the special characters in regular expressions, their meanings, and usage examples. To search for text containing one of the special characters in the table, escape the special character with a backslash. For example, to search for the asterisk in the phrase "some conditions apply*," your search pattern might look like this: apply\* . If you don't escape the asterisk, you'll find all the occurrences of "apply" (as well as any of "appl", "applyy", and "applyyy"), not just the ones followed by an asterisk. Character Matches Example ^ Beginning of input or line. ^T matches "T" in "This good earth" but not in "Uncle Tom's Cabin" $ End of input or line. h$ matches "h" in "teach" but not in "teacher" * The preceding character 0 or more times. um* matches "um" in "rum", "umm" in "yummy", and "u" in "huge" + The preceding character 1 or more times. um+ matches "um" in "rum" and "umm" in "yummy", but matches nothing in "huge" ? The preceding character 0 or 1 time. st?on matches "son" in "Johnson" and "ston" in "Johnston" but nothing in "Appleton" or "tension" . Any single character except newline (line feed). .an matches "ran" and "can" in the phrase "bran muffins can be tasty" x|y Either x or y. FF0000|0000FF matches "FF0000" in BGCOLOR="#FF0000" and "0000FF'" in FONT COLOR="#0000FF" {n} Exactly n occurrences of the preceding character. o{2} matches "oo" in "loom" and the first two o's in "mooooo", but matches nothing in "money" {n,m} At least n and at most m occurrences of the preceding character. F{2,4} matches "FF" in "#FF0000" and the first four Fs in #FFFFFF [abc] Any one of the characters enclosed in the brackets. Specify a range of characters with a hyphen (for example, [a-f] is equivalent to [abcdef]). [e-g] matches "e" in "bed", "f" in "folly", and "g" in "guard" [^abc] Any character not enclosed in the brackets. Specify a range of characters with a hyphen (for example, [^a-f] is equivalent to [^abcdef]). [^aeiou] initially matches "r" in "orange", "b" in "book", and "k" in "eek!" \b A word boundary (such as a space or carriage return). \bb matches "b" in "book" but nothing in "goober" or "snob" \B A non-word boundary. \Bb matches "b" in "goober" but nothing in "book" \d Any digit character. Equivalent to [0-9]. \d matches "3" in "C3PO" and "2" in "apartment 2G" \D Any non-digit character. Equivalent to [^0-9]. \D matches "S" in "900S" and "Q" in "Q45" \f Form feed. \n Line feed. \r Carriage return. \s Any single whitespace character, including space, tab, form feed, or line feed. \sbook matches "book" in "blue book" but nothing in "notebook" \S Any single non-whitespace character. \Sbook matches "book" in "notebook" but nothing in "blue book" \t A tab. \w Any alphanumeric character, including underscore. Equivalent to [A-Za-z0-9_]. b\w* matches "barking" in "the barking dog" and both "big" and "black" in "the big black dog" \W Any non-alphanumeric character. Equivalent to [^A-Za-z0-9_]. \W matches "&" in "Jake & Mattie" and "%" in "100%"
<url>html/207.sitemgmt.fm16.html</url>
<title>Managing links</title> Managing links Dreamweaver can update links to and from a document whenever you move or rename it within a local site. This feature works best when you have your entire site (or an entire self-contained section of it) stored on your local drive. No changes are made to files on the remote site until you put or check in the local files on the remote server. To turn on link management in Dreamweaver: 1 Choose Edit > Preferences, then select General. 2 Select Always or Prompt from the Update Links pop-up menu and click OK. If you choose Always, Dreamweaver automatically updates all links to and from a selected document whenever you move or rename it. (For specific instructions on what to do when you delete a file, see Changing a link sitewide .) If you choose Prompt, Dreamweaver first displays a dialog box that lists all the files affected by the change. Click Update to update the links in these files, or click Don't Update to leave the files unchanged. If check in/check out is enabled, Dreamweaver automatically attempts to check out the file before making any changes. To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the links at your local site. This cache file is created when you select the Cache option in the Site Definition dialog box, and it is updated invisibly as you use Dreamweaver to add, change, or delete links to files on your local site. To create a cache file for your site: 1 Choose File > Open Sites > Define Sites (Windows) or Site > Define Sites (Macintosh). 2 Select the site in the Define Sites dialog box, choose Edit, and then select the Cache option in the Local Info panel. To recreate a cache for your site: Choose Site > Recreate Site Cache. The first time you add, change, or delete links to files on your local site after launching Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, the cache loads and all links to the file you just changed are automatically updated. If you choose No, the change is noted in the cache, but the cache does not load and links are not updated. It may take a few minutes for the cache to load on larger sites; most of this time is spent comparing the timestamps of the files on the local site with the timestamps recorded in the cache to see if the cache is out of date. If you have not changed any files outside of Dreamweaver, you can safely click Stop when the button appears.
<url>html/207.sitemgmt.fm17.html</url>
<title>Changing a link sitewide</title> Changing a link sitewide In addition to having Dreamweaver update links automatically whenever you move or rename a file, you can manually change all links (including mailto, ftp, nowhere, and script links) to point somewhere else. You can use this option at any time (for example, you might have the words "this month's movies" linked to/movies/july.html throughout your site, and on August 1 you must change those links to point to /movies/august.html), but it's particularly useful when you want to delete a file that others link to. To change a file link sitewide: 1 Select a file in the local pane of the Site window. 2 Choose Site > Change Link Sitewide. 3 In the dialog box that appears, type a site-root-relative path to a different file in the Into Links To box, or click the folder icon to browse to and select a file. 4 Click OK. Dreamweaver updates any documents that link to the selected file, making them point to the new file, using the path format that exists in the document (for example, if the old path was document relative, the new path is also document relative). After a link is changed sitewide, the selected file becomes an orphan (that is, no files on your local drive point to it). You can safely delete it without breaking any links at your local site. Note: Remember that because all changes are occurring locally, you will need to manually delete the corresponding file on the remote site and put or check in any files in which links were changed before visitors to your site will be able to see the changes. To change e-mail, ftp, nowhere, or script links sitewide: 1 Choose Site > Change Link Sitewide. 2 In the dialog box that appears, enter the link you want to change in the Change All Links To box. 3 Enter the new link in the Into Links To box. 4 Click OK. For example, to update all the e-mail links that point to your old address, you might type mailto:juser@mindspring.com in the Change All Links To box, and type mailto:juser-interface@mindspring.com in the Into Links To box.
<url>html/207.sitemgmt.fm18.html</url>
<title>Testing your site</title> Testing your site Before uploading your site to a server and declaring it ready for viewing, it's a good idea to test it locally. You want to make sure that your pages look and work as expected in the browsers you're targeting, that there are no broken links, and that the pages don't take too long to download. The following guidelines will help you create a good experience for visitors to your site: Make sure your pages function as expected in the browsers you're targeting, and that they "fail gracefully" in other browsers. Your pages should be legible and functional in browsers that do not support styles, layers, or JavaScript. See Checking a page for compatibility with target browsers . For pages that will fail badly in older browsers, consider using the Check Browser behavior to automatically redirect visitors to another page. See Check Browser . Check your site for broken links (and fix them). Also, Dreamweaver generates a list of links to external sites when you run a link check; periodically follow these links to make sure they're still valid. Other sites undergo redesign and reorganization too, and the page you're linking to may have been moved or deleted. See Checking links between documents and Fixing broken links . Preview your pages in as many different browsers and on as many different platforms as possible. This gives you an opportunity to see differences in layout, color, font sizes, and default browser window size that cannot be predicted in a target browser check. See Previewing in browsers . Keep an eye on 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 finished 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. See Checking download time and size .
<url>html/207.sitemgmt.fm19.html</url>
<title>Checking a page for compatibility with target browsers</title> Checking a page for compatibility with target browsers Dreamweaver lets you construct web pages with elements that are supported by all browsers (for example, images and paragraph text), as well as elements that are supported only by newer browsers (for example, styles and layers). The Check Target Browsers feature tests the HTML in your documents to see if any tags or attributes are unsupported by your target browsers. The check does not alter the document in any way. The Check Target Browsers feature uses text files called browser profiles to determine which tags particular browsers support. Dreamweaver includes predefined profiles for Netscape Navigator versions 2.0, 3.0, and 4.0, and Internet Explorer versions 2.0, 3.0, and 4.0. To modify the existing profiles or to create new ones, see Creating and editing browser profiles . You can run a target browser check on a document, on a directory, or on an entire site. To run a target browser check: 1 Choose from the following options: To run the check on the current document, save your file. The check is performed on the last saved version of the file and does not include unsaved changes. To run the check on a directory or site, choose Window > Site Files to open the Site FTP window; then select a folder from the local directory. The target browser check is performed on all the HTML files in this folder and any folders inside it. Target browser checks can be performed only on local files. 2 Choose File > Check Target Browsers. If you have not yet selected a primary browser, you are prompted to do so. 3 From the list of browsers, select the browser to check against. 4 Click Do Check. The browser target report opens in your primary browser (the browser launches if it is not already open). 5 To save the report for later reference, choose File > Save from the browser. The target browser check report is a temporary file stored in the Temp folder in Windows and in the document root on the Macintosh. The file will be lost if you don't save it before browsing to another site.
<url>html/207.sitemgmt.fm2.html</url>
<title>Defining a site</title> Defining a site Use the Define Sites command to add or change the remote server information, local root folder, and check in/check out preferences for an existing site or to create a new site. To define a site: 1 Choose Define Sites from the current sites pop-up menu in the Site window, or choose File > New Site (Windows) or Site > Define Sites (Macintosh) . 2 In the dialog box that appears, click New or select an existing site and click Edit. 3 In the Local Info panel of the Site Definition dialog box, enter a site name and click the folder icon to browse to and select a local root folder (the folder that represents the top level of your site) if you have not already done so. 4 Select the Cache option to improve the speed of link and site management tasks. See Managing links . 5 Enter the URL of your site in the HTTP Address field. For example, the HTTP address for the dreamcentral web site is http://www.dreamcentral.com. This value is used by the Link Checker to determine whether absolute path links refer to files within your site or to files on external sites. See Checking links between documents . 6 In the Category list at the left, click Web Server Info. 7 Choose one of the following Server Access options: Use None if you only want to work with your site locally and do not plan to upload it to a server, then skip to step 13. Use Local/Network if your web server is mounted as a network drive (Windows) or as an NFS server (Macintosh), or if you are running a web server on your local machine. Click the folder icon to browse to and select the folder where your site files are stored on the server and then skip to step 13. Use FTP if you connect to your web server via FTP. 8 Enter the host name of the FTP host to which you upload files for your web site. Do not use ftp:// in front of the address. For example, the FTP host for the dreamcentral web site is shell16.ba.best.com. 9 Enter the name of the host directory at the remote site where documents visible to the public are stored (also known as the site root). For example, the host directory for the dreamcentral site is public_html/. For other sites, the directory may be several levels down (such as www/public/docs/ or public_html/htdoc/), or it may be the login directory (in which case this field should be left blank). 10 Enter your login name and password. Your password is saved automatically. Deselect Save to be prompted for a password each time you connect to the remote server. 11 Select the Use Firewall option if you are connecting to the remote server from behind a firewall. See Site FTP preferences . 12 In the Category list at the left, click Check In/Out. Turn on the Enable File Check In and Check Out option if you are working in a team environment (or working alone but from several different machines). This option is useful for letting others know that you have a file checked out for editing, or for alerting yourself that you may have left a more recent version of a file on another machine. See Using the check in/check out system . Turn on the Check Out Files When Opening option if you want files to automatically be checked out when you double-click to open them from the Site window. Enter a check-out name. This is the name that will appear in the site window alongside any files that you have checked out, enabling other team members to locate you if you have a file that they need. If you work alone from several different machines, use a different check-out name on each machine (for example, AmyR-HomeMac and AmyR-OfficePC) so you'll know where the latest version of the file is if you forget to check it back in. 13 Click OK.
<url>html/207.sitemgmt.fm20.html</url>
<title>Checking links between documents</title> Checking links between documents Use the Check Links feature to search for broken links and unreferenced files in an open file, a portion of a local site, or an entire local site. Dreamweaver checks only links and references to documents within the site. Dreamweaver compiles a list of external links that appear in the selected document or documents, but it does not verify them. To check links within the current document: 1 Save the file to a location within a local site. 2 Choose File > Check Links > This Document. To check links within a portion of a local site: 1 Choose Window > Site Files to open the Site window. 2 Choose a site from the Sites list pop-up menu. 3 In the local pane, select the files or folders to check. 4 Right-click (Windows) or Control-click (Macintosh) and choose Check Links > Selected Files/Folders from the shortcut menu. To check links in the entire site: Choose File > Check Links > Entire Site. When Dreamweaver has finished checking the links in the specified files, it opens the Link Checker dialog box. This dialog box displays a list of broken links, external links (links that Dreamweaver cannot check because they are outside the site), and orphaned files (files to which no other documents are linking). To toggle among the Broken Links, External Links, and Orphaned Files lists, select the appropriate item from the Show pop-up menu. To save the entire report as a tab-delimited text file, click Save. See Also Fixing broken links .
<url>html/207.sitemgmt.fm21.html</url>
<title>Fixing broken links</title> Fixing broken links When you check links in Dreamweaver, the Link Checker dialog box appears with a report of broken links, external links, and—if you chose to check the entire site—orphaned files. You can fix broken links and image references directly in the Link Checker dialog box, or you can open files from the list and fix links in the Property inspector. To fix links in the Link Checker dialog box: 1 In the Link Checker dialog box, select the broken link. 2 Type the correct path and file name, or click the folder icon to browse to the file. 3 Press Tab or Enter. If there are other broken references to this same file, a dialog box appears prompting you to fix the references in the other files as well. Click Yes to have Dreamweaver update all the documents on the list that reference this file. Click No to have Dreamweaver update the current reference only. Note: If you have file check in/check out enabled for the site, Dreamweaver attempts to check out files that require changes. If it cannot check out a file, Dreamweaver displays a warning dialog box and leaves broken references unchanged. See Using the check in/check out system . To fix links in the Property inspector: 1 In the Link Checker dialog box, double-click an entry in the File column. Dreamweaver opens the document, selects the offending image or link, and highlights the path and file name in the Property inspector. (If the Property inspector is not visible, choose Window > Properties to open it.) 2 Type over the highlighted text to set a new path and file name, or click the folder icon to browse to the file. If you are updating an image reference and the new image appears at the incorrect size, click the W and H labels in the Property inspector or click the Refresh button to reset the height and width values. The W and H labels change from bold to normal type. 3 Save the file. As links are fixed, their entries disappear from the Broken Links list. If an entry still appears in the list after you have entered a new path or file name in the Link Checker (or after you have saved any changes you made in the Property inspector), it means that Dreamweaver cannot find the new file. The link is still considered broken.
<url>html/207.sitemgmt.fm22.html</url>
<title>Previewing in browsers</title> Previewing in browsers You can preview documents in target browsers at any time by choosing File > Preview in Browser, or by pressing F12 or Shift-F12 to display the current document in the primary or secondary browser, respectively. You don't have to save the document first. All browser-related functions work, including JavaScript behaviors, document-relative and absolute links, ActiveX controls, Netscape plugins, and so on, provided that you have installed the required plugins or ActiveX controls. Choose File > Preview in Browser > Edit Browser List to change your primary browser or define a secondary browser. You can define up to 20 browsers for previewing. All the browsers you define appear on the Preview in Browser menu. Content linked with a root-relative path does not appear when you preview documents in a local browser. This is because browsers don't recognize site roots—servers do. To preview content linked with root-relative paths, put the file on a remote server and view it from there. See also About relative and absolute paths .
<url>html/216.interactivity.fm26.html</url>
<title>Go To Timeline Frame</title> Go To Timeline Frame The Go To Timeline Frame action moves the playback head to the specified frame. You can use this action in the Behavior channel of the Timeline inspector to make portions of the timeline loop a specific number of times, to create a Rewind link or button, or to let the user jump to different parts of the animation. To use the Go To Timeline Frame action: 1 Choose Window > Timeline to open the Timeline inspector and make sure that your document contains a timeline. If you see no purple animation bars in the Timeline inspector, your document does not contain a timeline. See Creating a timeline animation . 2 Follow steps 1 through 3 of the procedure in Attaching a behavior . To attach the behavior to a frame in the timeline, click in the Behavior channel at the desired frame. 3 Select Go To Timeline Frame from the Actions pop-up menu. 4 Select the desired timeline from the Timeline pop-up menu. 5 Enter a frame number in the Go to Frame field. 6 If you are adding this action in the Behavior channel of a timeline and want the portion of the timeline between the Go to Frame and the current frame to loop, enter the number of times the segment should loop in the Loop field. You must leave this field blank if you are not attaching Go To Timeline Frame to a frame in a timeline. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm27.html</url>
<title>Animating with dynamic HTML</title> Animating with dynamic HTML Dynamic HTML, or DHTML, refers to the ability to change style or positioning properties 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. Timelines create animation by changing the position, size, visibility, and stacking order of a layer over time. Timelines are also useful for other actions that you want to occur after a page loads. For example, timelines can change the source file of an image, and they can execute behaviors at a particular time. The layer functions of timelines work only in 4.0 or later browsers. Click Show Me for an animated introduction to timelines. Open the HTML inspector to see the JavaScript code generated by a timeline. The timeline code is in the MM_initTimelines function, inside a SCRIPT tag in the HEAD of the document. When editing the HTML of a document containing timelines, be careful not to move, rename, or delete anything that a timeline refers to.
<url>html/216.interactivity.fm28.html</url>
<title>Timeline inspector</title> Timeline inspector The Timeline inspector represents the properties of layers and images over time Choose Window > Timeline to open the Timeline inspector. See also Animating with dynamic HTML . Right-click (Windows) or Control-click (Macintosh) the Timeline inspector to open a shortcut menu that includes all of the relevant commands. Playback head Shows which frame of the timeline is currently displayed on the page. Timeline pop-up menu Specifies which of the document's timelines are displayed in the Timeline inspector. Animation channels Display bars for animating layers and images. Animation bars Show the duration of each object. A single row can include multiple bars representing different objects. Different bars cannot control the same object in the same frame. Keyframes Are frames in a bar where you have specified properties (such as position) for the object. Dreamweaver calculates intermediate values for frames in between keyframes. Small circles mark keyframes. Behavior channel Is the channel for behaviors that should be executed at a particular frame in the timeline. Frame numbers Indicate the number of frames each bar occupies. The number between the Back and Play buttons is the current frame. You control the duration of animation by setting the total number of frames and the number of frames per second (fps). The default setting of 15 frames per second is a good average rate to use for most browsers running on common Windows and Macintosh systems. Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate on the user's system. Rewind Moves the playback head to the first frame in the timeline. Back Moves the playback head one frame to the left. Click Back and hold down the mouse button to play the timeline backwards. Play Moves the playback head one frame to the right. Click Play and hold down the mouse button to play the timeline continuously. Autoplay Makes a timeline begin playing automatically when the current page loads in a browser. Autoplay attaches a behavior to the page's BODY tag that executes the Play Timeline action when the page loads. Loop Makes the current timeline loop indefinitely while the page is open in a browser. Loop inserts the Go to Timeline Frame behavior in the Behavior channel after the last frame of the animation. Double-click the marker in this frame to edit the parameters for this behavior and change the number of loops.
<url>html/216.interactivity.fm29.html</url>
<title>Creating a timeline animation</title> Creating a timeline animation Timelines create animation by changing the position, size, visibility, and stacking order of layers. Timelines can also change the source files of images. Timelines can move only layers. To make images or text move, create a layer using the Layer tool on the Object palette and then insert images, text, or any other type of content in the layer. See Creating layers . To create a timeline animation: 1 If you want to animate a layer, move the layer to where it should be when animation begins. 2 Choose Window > Timeline or click the Timeline button in the Launcher. 3 Select the layer or image you want to animate. Make sure you have selected the desired element. Click the layer marker or use the Layer palette to select a layer. See also Manipulating layers . When a layer is selected, handles appear around it as shown in the following illustration. Clicking the layer itself places a blinking cursor inside the layer, but it does not select the layer. 4 Choose Modify > Add Object to Timeline or simply drag the selected object into the Timeline inspector. A bar appears in the first channel of the timeline. The name of the layer or image appears in the bar. If you are working with an image, the only property you can change is the image source file in the Property inspector. The remaining steps do not apply. See Changing image and layer properties with timelines . 5 Click the keyframe marker at the end of the bar. 6 Move the layer on the page to where it should be at the end of the animation. 7 If you want the layer to move in a curve, select its animation bar and Control-click (Windows) or Command-click (Macintosh) to add a keyframe at the cursor position, or click a frame in the middle of the animation bar and choose Add Keyframe from the shortcut menu. Repeat this step to define additional keyframes. 8 Hold down the Play button to preview the animation on the page. Repeat the procedure to add additional layers and images to the timeline and to create a more complex animation.
<url>html/216.interactivity.fm3.html</url>
<title>Attaching a behavior</title> Attaching a behavior You can attach behaviors to the entire document (the BODY ) or to links, images, form elements, or any of several other HTML elements. Which elements can accept behaviors depends upon the browser. Internet Explorer 4.0, for example, has a much wider array of events for each element than Netscape Navigator 4.0 or any 3.0 browser. You can specify more than one action for each event. Actions occur in the order listed. For information on changing the order of actions, see Changing a behavior . To attach a behavior: 1 Select an object. To attach a behavior to the entire page, click the <body> tag in the tag selector at the bottom left of the Document window. 2 Choose Window > Behaviors to open the Behavior inspector, or click the Behavior button on the Launcher. The HTML tag of the selected object appears in the title bar. 3 Click the plus button and choose an action from the Actions pop-up menu. Actions that don't work in the current document are not available on the menu. For example, the Play Timeline action is not available if the document has no timelines. Depending on the chosen action, a dialog box appears to display parameters and instructions for the action. 4 Enter parameters for the action and click OK. All included actions work in 4.0 or later browsers. Some actions do not work in older browsers. See Using the behavior actions that ship with Dreamweaver . 5 The default event for the action appears in the Events column. If this is not the event that you want, select another event from the Events pop-up menu. Different events appear depending on the selected object and the browsers specified in the Events For pop-up menu. If the expected events don't appear, make sure that the correct object is selected, or change the target browsers in the Events For pop-up menu. If you're attaching a behavior to an image, events such as onMouseOver and onMouseDown appear in parentheses. These events are available only for links. When you choose one of them, Dreamweaver wraps an A tag around the image to define a link. Do not delete the pound sign (#) that subsequently appears in the Link box in the Property inspector, or you will remove the behavior. You can replace the pound sign with a new link value if you like.
<url>html/216.interactivity.fm30.html</url>
<title>Creating a timeline by dragging a path</title> Creating a timeline by dragging a path If you want to create an animation with a complex path, it may be more efficient to record the path as you drag the layer rather than creating individual keyframes. To create a timeline by dragging a path: 1 Choose Insert > Layer to create a layer. 2 Move the layer to where it should be when animation begins. Make sure you have selected the right element. Click the layer marker or use the Layer palette to select a layer. See also Manipulating layers . 3 Choose Modify > Record Path of Layer. 4 Drag the layer around the page to create a path. 5 Release the mouse at the point where the animation should stop. Dreamweaver adds an animation bar to the timeline with the appropriate number of keyframes. 6 In the Timeline inspector, click the Rewind button; then hold down the Play button to preview your animation.
<url>html/216.interactivity.fm31.html</url>
<title>Modifying timelines</title> Modifying timelines After defining a timeline's basic components, you can make useful changes such as adding and removing frames, changing the start time of the animation, and so on. To modify a timeline, do any of the following: To make the animation take longer, drag the end frame marker. All the keyframes in the animation shift so that their relative positions remain constant. Press Control (Windows) or Command (Macintosh) while dragging the end frame marker to prevent the other keyframes from moving. To make the layer reach the keyframe position sooner or later, move the keyframe marker left or right in the bar. To change the start time of an animation, select one or all of the bars associated with the animation (press Shift to select more than one bar at a time) and drag left or right. To shift the location of an entire animation path, select the entire bar and then drag the object on the page. Dreamweaver adjusts the position of all keyframes. Making any type of change with an entire bar selected changes all the keyframes. To add or remove frames in the Timeline, choose Modify > Timeline > Add Frame or Remove Frame. To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a behavior to the page that executes the Play Timeline action when the page loads. To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the Behavior channel after the last frame of the animation. You can edit the parameters for this behavior to define the number of loops.
<url>html/216.interactivity.fm32.html</url>
<title>Changing image and layer properties with timelines</title> Changing image and layer properties with timelines In addition to moving layers with timelines, you can change the source file of an image and the visibility, size, and stacking order of a layer. To change image and layer properties with a timeline: 1 In the Timeline inspector, do one of the following: Select an existing keyframe in the bar controlling the object you want to change. (The start and end frames are keyframes.) To create a new keyframe, click a frame in the middle of the animation bar and choose Modify > Timeline > Add Keyframe, or Control-click (Windows) or Command-click (Macintosh) a frame in the animation bar. 2 Define new properties for the object by choosing one of the following options: To change the source file of an image, click the folder icon next to the Src box in the Property inspector to browse to and select a new image. To change the visibility of a layer, choose Show, Hide, or Inherit from the Visibility pop-up menu in the Property inspector. See also Changing layer visibility . To change the size of a layer, drag the layer's resize handles or enter new values in the Width and Height boxes in the Property inspector. Internet Explorer 4.0 is currently the only browser than can dynamically change the size of a layer. To change the stacking order of a layer, enter a new value in the Z-ind field or use the Layer palette to change the stacking order of the current layer. See also Changing the stacking order of layers . 3 Hold down the Play button to see the animation. The currently selected layer is always visible and at the top of the stacking order. Deselect all layers to allow the timeline to control the stacking order or visibility.
<url>html/216.interactivity.fm33.html</url>
<title>Using multiple timelines</title> Using multiple timelines Instead of trying to control all of the action on a page with one timeline, it's easier to work with separate timelines that control discrete parts of the page. The page may also include interactive elements that trigger different timelines. For example, buttons may trigger different timeline animations. To manage multiple timelines, use the following options: To create a new timeline, choose Modify > Timeline > New Timeline. To remove a timeline, choose Modify > Timeline > Remove Timeline. To rename a timeline, choose Modify > Timeline > Rename Timeline or enter a new name in the Timeline pop-up menu. To view a different timeline in the Timeline inspector, choose a new timeline from the Timeline pop-up menu in the Timeline inspector.
<url>html/216.interactivity.fm34.html</url>
<title>Copying and pasting animations</title> Copying and pasting animations Once you have an animation sequence that you like, you can copy and paste it in another area of the current timeline, in another timeline in the same document, or in a timeline in another document. You can also copy and paste multiple sequences at one time. To cut or copy and paste animation sequences: 1 Click an animation bar to select a sequence. To select multiple sequences, press Shift while clicking, or press Ctrl-A (Windows) or Command-A (Macintosh) to select all sequences. 2 Copy or cut the selection. 3 Do one of the following: Move the playback head to another spot in the current timeline. Select another timeline from the Timeline pop-up menu. Open another document or create a new one and then click in the Timeline inspector. 4 Paste the selection into the timeline. Animation bars for the same object cannot overlap because a layer cannot be in two places at one time (nor can an image have two different sources at one time). If the animation bar you are pasting would overlap another animation bar for the same object, Dreamweaver automatically shifts the selection to the first nonoverlapping frame. There two principles to keep in mind when pasting animation sequences into another document: If you copy an animation sequence for a layer and the new document contains a layer with the same name, Dreamweaver applies the animation properties to the existing layer in the new document. If you copy an animation sequence for a layer and the new document does not contain a layer with the same name, Dreamweaver pastes the layer and its contents from the original document along with the animation sequence. To apply the pasted animation sequence to another layer in the new document, choose Change Object from the shortcut menu and select the name of the second layer from the pop-up menu. Delete the pasted layer if desired. See Applying an animation sequence to a different object .
<url>html/216.interactivity.fm35.html</url>
<title>Applying an animation sequence to a different object</title> Applying an animation sequence to a different object To save time, you can create an animation sequence once and apply it to the remaining layers in your document. To apply an existing animation sequence to other objects: 1 In the Timeline inspector, select the animation sequence you want to copy and copy it. 2 Click any frame of the Timeline inspector and paste the sequence. 3 Right-click (Windows) or Control-click (Macintosh) the pasted animation sequence and choose Change Object from the shortcut menu. 4 In the dialog box that appears, choose another object from the pop-up menu and click OK. 5 Repeat steps 2 through 4 for any remaining objects that you want to follow the same animation sequence. You can also change your mind about which layer should be animated after creating an animation sequence; simply follow steps 3 and 4 above (no copying or pasting is necessary).
<url>html/203.gettingstarted.fm10.html</url>
<title>Using Dreamweaver with other applications</title> Using Dreamweaver with other applications Dreamweaver accommodates your web design and development process by making it easy for you to work with other applications. For information about working with other applications such as browsers, HTML editors, image editors, and animation tools, see the following topics: For information about using Dreamweaver with other HTML editors, such as HomeSite or BBEdit, see Using other HTML editors . You can specify preferred browsers for previewing your site. See Previewing in browsers . You can launch an external image editor, such as Macromedia Fireworks, from within Dreamweaver. See Using an external image editor . For information about adding animation to your site with Flash Player movies, see Inserting Flash Player movies . To learn how to add interactivity to your site with Shockwave movies, see Inserting Shockwave movies .
<url>html/203.gettingstarted.fm2.html</url>
<title>The Dreamweaver workspace</title> The Dreamweaver workspace The Dreamweaver workspace is flexible, so it accommodates different styles of working and levels of expertise. There are a few components of the Dreamweaver workspace you use constantly: The Document window displays the current document approximately as it will appear in a web browser. The Launcher has buttons for opening and closing the most frequently used inspectors and palettes. The icons on the Launcher are repeated on the Mini-Launcher at the bottom of the Document window for easy access when the Launcher is closed. The Object palette contains buttons for creating various types of objects such as images, tables, layers, and so on. The Property inspector displays properties for the selected object. Shortcut menus let you quickly access useful commands pertaining to the current selection or area. Dockable floating palettes let you combine floating windows, inspectors, and palettes into one or more tabbed windows.
<url>html/203.gettingstarted.fm3.html</url>
<title>Document window</title> Document window The Document window displays the current document approximately as it will appear in a web browser. The title bar of the Document window displays the page title, and in parentheses, the file name and an asterisk if the file contains unsaved changes. The tags that control the selected text or object appear in the tag selector at the bottom left of the Document window. Click these tags to select an exact HTML tag and its contents. Click <body> to select the entire body of the document. The estimated document size and download time of the page, including all linked elements such as images and Shockwave movies, appear to the left of the Mini-Launcher. See Checking download time and size . The set of buttons at the bottom right of the Document window is called the Mini-Launcher; it is a smaller version of the Launcher. The buttons on the Mini-Launcher open the Site window, Library palette, Style palette, Behavior inspector, Timeline inspector, and HTML inspector. The Window Size pop-up lets you resize the document window to pre-determined or custom dimensions. See Resizing the Document window .
<url>html/203.gettingstarted.fm4.html</url>
<title>Property inspector</title> Property inspector The Property inspector displays properties for the selected object. Any change you make to a property is immediately made in the Document window. Which properties appear depends on the object selected. For information on particular options, select an object and then click the Help icon in the upper right corner of the Property inspector. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties.
<url>html/203.gettingstarted.fm5.html</url>
<title>Launcher</title> Launcher The Launcher has buttons to open and close various palettes, windows, and inspectors. See Site window options , Library palette , Style palette , Behavior inspector , Timeline inspector , or HTML inspector .
<url>html/203.gettingstarted.fm6.html</url>
<title>Object palette</title> Object palette The Object palette contains buttons for inserting objects such as tables, layers, and images. Click any button or drag the object into the Document window to create the specified object. Dreamweaver includes four panels in the Object palette: Common, Forms, Head, and Invisibles. Use the pop-up menu to switch between panels. You can modify any object in the palette or create your own objects. See Changing the Object palette and Insert menu . The Common panel contains the most commonly used objects, such as Image, Table, and Layer. The Forms panel contains buttons for creating forms and form elements. The Head panel contains objects for adding various HEAD elements, such as META , TITLE , and BASE tags. The Invisibles panel contains buttons for creating objects that are not visible in the Document window, such as named anchors. Choose View > Invisible Elements to display icons that mark the locations of these objects. Click the icons to select the objects and change their properties. See About invisible elements . There are a few preference settings in General preferences that affect the Object palette. To modify these preferences, choose Edit > Preferences and then choose General. When inserting objects such as tables, scripts, and HEAD elements, a dialog box prompts you for additional information. You can suppress these dialog boxes by turning off the Show Dialog When Inserting Objects option. Use the Property inspector to change object properties after the object has been inserted. The Object Palette preference lets you display the contents of the Object palette as Text only, Icons only, or Text and icons. Common The Common panel in the Object palette contains the most commonly used objects: Image Inserts an image at the cursor location. A dialog box appears so that you can specify a source file for the image. (A place holder appears if you click Cancel in the dialog box.) See Inserting an image . Table Inserts a table at the cursor location. See Creating tables . HR Inserts a horizontal rule at the cursor location. See Horizontal rules . Layer Creates a layer. Click the button, then move the pointer to the Document window and drag to define the size and location of a layer. By default, Dreamweaver creates a layer defined by the DIV tag. Use the Property inspector to select a different tag, or change the default setting with Layer preferences. See Creating layers . Applet Inserts a place holder for a Java applet at the cursor location. Use the Property inspector to specify a source file for the Java applet. See Java applet properties . ActiveX Inserts a place holder for an ActiveX control at the cursor location. Use the Property inspector to specify a source file for the ActiveX control. See ActiveX properties . Plugin Inserts a place holder for a Netscape plugin at the cursor location using the EMBED tag. Use the Property inspector to specify a source file for the Netscape plugin. See Netscape plugin properties . Flash Inserts a Flash movie at the cursor location using the OBJECT and EMBED tags. The CODEBASE , CLASS ID , and PLUGINSPAGE attributes have been preset with the proper values for Flash Player. Use the Property inspector to specify a source file for the movie. See Flash Player properties . Shockwave Inserts a Shockwave movie at the cursor location using the OBJECT and EMBED tags. The CODEBASE , CLASS ID , and PLUGINSPAGE attributes have been preset with the proper values for Shockwave. Use the Property inspector to specify a source file for the movie. See Shockwave properties . Rollover Prompts you to enter two images which are used to define a rollover. A rollover is an image that changes (from the original image to the rollover image) when the cursor moves across it. See Creating a rollover . Forms The Forms panel in the Object palette contains buttons for creating forms. See Forms overview . Form Inserts a form at the cursor location. Forms are containers for form elements. Forms are not visible in the Document window unless View > Invisible Elements is on. See Creating a form . Text Field Inserts a text field at the cursor location. Place the cursor within a form boundary before inserting a text field. Text fields outside of forms do not appear in a browser. Set the name, size, and initial value in the Property inspector. See Text field properties . Button Inserts a button with a default NAME and VALUE of " Submit " at the cursor location. Place the cursor within a form boundary before inserting a button. Buttons outside of forms do not appear in browsers. Set the name, label, and action in the Property inspector. See Button properties . Checkbox Inserts a checkbox at the cursor location. Place the cursor within a form boundary before inserting a checkbox. Checkboxes outside of forms do not appear in browsers. Set the name, value when checked, and initial state in the Property inspector. See Checkbox properties . Radio Inserts a radio button at the cursor location. Place the cursor within a form boundary before inserting a radio button. Radio buttons outside of forms do not appear in browsers. Set the name, value when checked, and initial state in the Property inspector. See Radio button properties . List Menu Inserts a list or pop-up menu at the cursor location. Place the cursor within a form boundary before inserting a list or menu. List and menu elements outside of forms do not appear in browsers. Set the name, type, and list values in the Property inspector. See List/Menu properties . File Field Inserts a file field at the cursor location. Place the cursor within a form boundary before inserting a file field. File fields outside of forms do not appear in browsers. Set the name in the Property inspector. See File field properties . Image Field Inserts an image field at the cursor location. Place the cursor within a form boundary before inserting an image field. Image fields outside of forms do not appear in browsers. Set the name, alternative text, and source file in the Property inspector. See Image field properties . Hidden Field Inserts a hidden field at the cursor location. Place the cursor within a form boundary before inserting a hidden field. Set the name and value in the Property inspector. See Hidden field properties . Head The Head panel contains objects for adding elements to the HEAD of your documents. Meta Inserts a META tag into the HEAD of your document. Set the properties for the tag in the Property inspector. See META properties . Keywords Inserts a Keywords META tag into the HEAD of your document. Specify the keywords to use for the document in the Property inspector. See Keywords properties . Description Inserts a Description META tag into the HEAD of your document. Specify text that describes the document in the Property inspector. See Description properties . Refresh Inserts a Refresh META tag into the HEAD of your document. Use the Property inspector to specify the number of seconds to wait before refreshing and whether to reload the current page or go to a new one. See Refresh properties . Base Inserts a BASE tag into the HEAD of your document. Set the properties for the tag in the Property inspector. See Base properties . Link Inserts a LINK tag into the HEAD of your document. Set the properties for the tag in the Property inspector. See Link properties . Invisibles The Invisibles panel contains buttons for creating objects that are not visible in the Document window. Choose View > Invisible Elements to display icons that mark the locations of these objects. Click the icons to select the objects and change their properties. See About invisible elements . (Invisible Elements preferences let you select which elements can be made visible in the Document window when View > Invisible Elements is on. See Invisible Elements preferences .) Anchor Inserts a named anchor ( A NAME = " " ) at the cursor location. Use the Property inspector to change the name. See Linking to a named anchor . Comment Inserts a comment in the HTML code at the cursor location. Use the Property inspector to enter text for the comment. See Inserting comments . Script Inserts a script at the cursor location. Use the Property inspector to choose the language and enter text for the script. See Inserting scripts . Line break Inserts a line break ( BR ) at the cursor location. You can also type Shift-Enter to insert a line break. NBSP Inserts a non-breaking space ( ) at the cursor location. SSI Inserts a server-side include at the cursor location. Use the Property inspector to set the source file for the include. See Using server-side includes .
<url>html/203.gettingstarted.fm7.html</url>
<title>Shortcut menus</title> Shortcut menus Dreamweaver makes extensive use of shortcut menus, which provide a method for quickly accessing the most useful commands and properties related to the object or window you are working with. Shortcut menus list only commands pertaining to the current selection. To use shortcut menus: 1 Open the shortcut menu. In Windows, click the object or window with the right mouse button. On the Macintosh, Control-click the object or window. 2 Select the command from the shortcut menu and release the mouse button.
<url>html/203.gettingstarted.fm8.html</url>
<title>Dockable floating palettes</title> Dockable floating palettes Most of the palettes and inspectors in Dreamweaver can be combined into a single tabbed palette. This makes it easy to access the information you need without cluttering your workspace. (The Launcher, Property inspector, Site window, and HTML inspector cannot be docked in this way.) To combine two or more palettes to create a tabbed palette: 1 Drag one floating palette over another floating palette. When you see the highlighted border appear on the target palette, release the mouse. 2 Click any tab in the window to bring it forward. To prevent a palette from joining the tabbed palette: 1 Press Shift while dragging the palette. To remove a window from the tabbed palette: Drag its tab out of the window.
<url>html/203.gettingstarted.fm9.html</url>
<title>Setting preferences</title> Setting preferences Dreamweaver has preference settings that control the general appearance of the Dreamweaver user interface as well as options related to specific features such as layers, style sheets, HTML, external editors, and previewing pages in browsers. Information about specific preference options is provided throughout this help system in conjunction with the associated feature topic. See one of the following topics for information about the various preference options: General preferences Using an external text editor with Dreamweaver (for External Editors preferences) Floating Palettes preferences Fonts/Encoding preferences Highlighting preferences HTML Colors preferences HTML Format preferences HTML Rewriting preferences Invisible Elements preferences Layer preferences Preview in Browser preferences Site FTP preferences Status Bar preferences Style Sheet Format preferences Viewing server-side includes in Dreamweaver (for Translation preferences) General preferences Use General preferences to enter settings that control the general appearance of the Dreamweaver user interface. To change these preferences, choose Edit > Preferences, and then click General. Update Links Determines what Dreamweaver does when you move, rename, or delete a document within your site (always updates links automatically, never updates links, or prompts you to perform an update). See Managing links . Dictionary Lists the dictionaries available in the Configuration/Dictionary folder inside the Dreamweaver application folder. If a dictionary contains multiple dialects or spelling conventions (for example, UK English and US English), they are listed separately in the Dictionary pop-up menu. Color Scheme Specifies the colors of Dreamweaver palettes and inspectors. The options are Dreamweaver Two-Tone, Desktop Two-Tone, and Desktop Standard. Object Palette Lets you view the contents of the Object palette as Text and Icons, Text Only, or Icons Only. Add Extension when Saving Automatically adds the specified extension (for example, .html, .htm, .asp, or any other extension that describes an HTML document) to the filename when you save the file. The default extension is added only when you don't supply one. Faster Table Editing (Deferred Update) Makes typing in tables faster by deferring some adjustment of column widths and row heights until you click outside the table. If this option is on, you can update the table while editing by pressing Control-Spacebar (Windows) or Command-Spacebar (Macintosh). Open Files in New Window (Windows only) Makes it easier to open several documents at once. When this option is off, files open in the current window, replacing the current document. Files always open in a new window on the Macintosh. Show Only Site Window on Startup Displays only the Site window and open palettes rather than a new document when Dreamweaver starts up. Show Dialog When Inserting Objects Determines if Dreamweaver prompts you to enter additional information when inserting images, tables, and Shockwave movies with the Object palette. If this option is off, the dialog box does not appear and you must use the Property inspector to specify the source file for images, the number of rows in a table, and so on. For rollover images, a dialog box always appears when you insert the object, regardless of this option setting. Enable Double-Byte Inline Input When this option is selected, you can input double-byte text (such as Japanese characters) in the Document window. When this option is deselected, a text input window appears for entering and converting text. The text appears in the Document window after it is accepted. Fonts/Encoding preferences Use Fonts/Encoding preferences to set the default fonts and font encoding for Dreamweaver. These settings, like a browser's fonts preferences, let you work with text in the font and size you prefer without affecting how the document appears when viewed by others from a browser. To change fonts/encoding preferences, choose Edit > Preferences, click Fonts/Encoding, and choose the desired options. Default Encoding Specifies the encoding that is used when a new page is created or when a document is opened that does not specify any encoding using a META tag. The META tag is inserted in the head of the document and tells the browser and Dreamweaver how the document should be decoded and what fonts should be used to display the decoded text. For example: If Western(Latin1) is specified the following META tag is inserted: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> . If Japanese(Shift JIS) is specified, the following META tag is inserted: <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> . Choose Western to specify the fonts used for US English and all Western European languages. Choose Japanese, Traditional Chinese, Simplified Chinese, or Korean to set appropriate double-byte fonts for Asian languages. All Asian languages require a system that supports double-byte fonts to display. You can also choose Central European, Cyrillic, Greek, Icelandic Mac, and Other. Font Settings Determines the set of fonts used for documents encoded in each of the font setting encodings. The various font sets must be installed on your machine for the fonts to appear as choices when you select proportional, fixed, or HTML inspector fonts. Proportional Font Is the font used for normal text (for example, text in paragraphs, headings, and tables). The default depends on your system's installed fonts. For most US systems, the default is Times New Roman 12 pt (Medium) on Windows and Times 12 pt on the Macintosh. Fixed Font Is the font used for text within PRE , CODE , and TT tags. The default depends on your system's installed fonts. For most US systems, the default is Courier New 10pt (Small) on Windows and Courier 12 pt on Macintosh. HTML Inspector Is the font used for all text that appears in the HTML inspector. The default depends on your system's installed fonts. Status Bar preferences Use Status Bar preferences to set options for the status bar at the bottom of the Document window. Window Sizes Lets you customize the window sizes that appear in the status bar's pop-up menu. See Resizing the Document window . Connection Speed Determines the connection speed (in kilobits per second) used to calculate the download size. The download size for the page is displayed in the status bar. The download size for images is displayed in the Property inspector when an image is selected. Show Mini-Launcher in Status Bar Makes Dreamweaver display the Mini-Launcher at the bottom of the Document window. The buttons in the Mini-Launcher launch windows, palettes, and inspectors. Floating Palettes preferences Use Floating Palettes preferences to determine which windows, palettes, and inspectors always appear on top of the Document window. To specify Floating Palettes preferences: Choose Edit > Preferences, then select Floating Palettes. By default, all windows, palettes, and inspectors are set to always appear on top of the Document window. If you would like the HTML inspector to move behind the Document window when not in use, for example, deselect the HTML option. The HTML inspector will appear on top of the Document window only when it is active. Highlighting preferences Highlighting preferences let you customize the colors used to identify template regions and library items in the Document window. For more information, choose one of the following: To customize template highlight colors, see Template preferences . To specify the highlight color for library items, see Library preferences . You can also specify a color for third-party tags to make it easy to differentiate them from Dreamweaver tags.
<url>html/204.creatingdocuments.fm1.html</url>
<title>Creating documents overview</title> Creating documents overview Documents are the pages users see when they visit a web site. Documents can contain text and images, as well as more sophisticated content such as sound, animation, and links to other documents. Documents are created in Dreamweaver using either blank HTML pages or templates. You can also open and modify HTML documents created in other applications. When editing a document, you can position content on a page using visual guides such as grids and rulers, or the snap feature. Tracing images let you duplicate page designs. Text is added to documents by typing in the Document window or by pasting text from other sources. Images, horizontal rules, and other objects are added using the Object palette or commands on the Insert menu. As you add content, you can choose whether to view or hide objects as you work on different sections of a page. Use the Page Properties dialog box to set up a document and define basic page elements. The page title identifies the document to the user. Background images, background colors, and text and link colors customize the page and distinguish regular text from hypertext. As you create and work with documents, Dreamweaver automatically generates the underlying HTML source code. HTML files consist of two main sections: the HEAD , which is not seen by the user, and the BODY , which is viewable in the browser. Use the View menu or HTML inspector to examine or edit code in either section.
<url>html/204.creatingdocuments.fm10.html</url>
<title>Selecting elements in the Document window</title> Selecting elements in the Document window Typically, you click an element to select it. If an element is invisible, you may need to make it visible before you can select it. Use these techniques to select elements: To select an element in the Document window, drag across the element or click the element. To select an invisible element, choose View > Invisible Elements and then click the element's marker. See About invisible elements . Some objects appear on the page in a place other than where their code is inserted. For example, a layer can be anywhere on the page, but the code defining the layer is in a fixed location. Dreamweaver displays markers to show the location of the code for invisible elements. To see the HTML code associated with the selected text or object, choose Window > HTML to open the HTML inspector. To select HTML code without opening the HTML inspector, click a tag in the tag selector at the bottom left of the Document window. The tag selector always shows the tags that control the current selection or cursor location. For example, if you have defined a link for an image, the HTML code would look something like this: <a href="http://www.macromedia.com"><img src="agraphic.gif" ></a> Clicking the image in the Document window selects <img src="agraphic.gif"> . To select the link, click the image in the Document window and then click the < a > that appears in the tag selector.
<url>html/216.interactivity.fm17.html</url>
<title>Go To URL</title> Go To URL The Go To URL action opens a new page in the current window or in the specified frame. This action is particularly useful for changing the contents of two or more frames with one click. To use the Go To URL action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Go To URL from the Actions pop-up menu. 3 Choose a destination for the URL from the Open In select list. The select list automatically lists the names of all frames in the current frameset as well as the main window. If there are no frames, the main window is the only option. Note: This action may produce unexpected results if any frame is named top, blank, self, or parent. Browsers sometimes mistake these names for the reserved targets top , blank , self , and parent . 4 Enter the path and file name of the document you want to open in the URL field, or click Browse to select a file. 5 Repeat steps 3 and 4 to open additional documents in other frames. 6 Click OK. 7 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm18.html</url>
<title>Open Browser Window</title> Open Browser Window Use the Open Browser Window action to open a URL in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. If you specify no attributes for the window, it opens at the size and with the attributes of the window that launched it. Specifying any attributes for the window automatically turns off all other attributes that are not explicitly turned on. For example, if you set no attributes for the window, it might open at 640 pixels by 480 pixels and have a navigation toolbar, location toolbar, status bar, and menu bar. If you explicitly set the width to 640 and the height to 480 and set no other attributes, the window opens at 640 pixels by 480 pixels and has no navigation toolbar, no location toolbar, no status bar, no menu bar, no resize handles, and no scrollbars. To use the Open Browser Window action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Open Browser Window from the Actions pop-up menu. 3 Enter the URL you want to display, or click Browse to select a file. 4 Set one or more of the following options: Window Width Specifies the width of the window in pixels. Window Height Specifies the height of the window in pixels. Navigation Toolbar Is the row of browser buttons that includes Back, Forward, Home, and Reload. Location Toolbar Is the row of browser options that includes the location field. Status Bar Is the gray area at the bottom of the browser window in which messages (such as the load time remaining and the URLs associated with links) appear. Menu Bar Is the area of the browser window (Windows) or the Desktop (Macintosh) where menus such as File, Edit, View, Go, and Help appear. You should explicitly set this option if you want users to be able to navigate from the new window. If you do not set this option, the user can only close or minimize the window (Windows) or close the window or quit the application (Macintosh) from the new window. Scrollbars as Needed Specifies that scrollbars should appear if the content extends beyond the visible area. If you do not explicitly set this option, scrollbars do not appear. If the Resize Handles option is also off, users have no way of seeing content that extends beyond the original size of the window. Resize Handles Specifies that the user should be able to resize the window, either by dragging the lower right corner of the window or by clicking the resize button in the upper right corner. If this option is not explicitly set, the resize button is unavailable and the lower right corner is not draggable. Window Name Is the name of the new window. You should name the new window if you want to target it with links or control it with JavaScript. 5 Click OK. 6 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm19.html</url>
<title>Popup Message</title> Popup Message The Popup Message action pops up a JavaScript alert dialog box with the message you specify. Because JavaScript alert dialog boxes have only one button (OK), use this action to provide information to the user rather than to present the user with a choice. To use the Popup Message action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Popup Message from the Actions pop-up menu. 3 Enter your message in the Message field. 4 Click OK. 5 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm2.html</url>
<title>Behaviors overview</title> Behaviors overview A behavior is a combination of an event and an action. Actions are prewritten JavaScripts that perform specific tasks, such as opening a browser window, playing a sound, or stopping a Shockwave movie. Events are defined by the browser for each page element; for example, onMouseOver , onMouseOut , and onClick are events associated with links in most browsers, whereas onLoad is an event associated with images and the document body. When attaching a behavior to a page element, you specify an action and the event that triggers it. Several actions can all be triggered by the same event, and you can specify the order in which the actions occur. Click Show Me to see how to create a behavior. Dreamweaver includes several behavior actions; additional actions can be found in the Extensibility Exchange in the Dreamweaver Developers Center as well as on third-party developer sites. See Downloading and installing third-party behaviors . You can also write your own behavior actions if you are proficient in JavaScript. For more information on writing behavior actions, see Extending Dreamweaver overview .
<url>html/216.interactivity.fm20.html</url>
<title>Preload Images</title> Preload Images The Preload Images action loads images that do not appear on the page right away (such as those that will be swapped in with timelines, behaviors, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear. Note: The Swap Image action automatically preloads all highlight images when you check the Preload Images option in the Swap Image dialog box, so there is no need to use Preload Images with Swap Image. To use the Preload Images action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Preload Images from the Actions pop-up menu. 3 Enter the path and file name of an image you want to preload in the Image Source File field, or click Browse to select an image file. 4 Click the plus (+) button at the top of the dialog box to add the image to the Preload Images list. You must click the plus button before entering the next image, or the image you have just chosen will be replaced in the list with the image you choose next. 5 Repeat steps 3 and 4 for all remaining images that you want to preload on the current page. 6 To remove an image from the Preload Images list, select the image in the list and click the minus (-) button. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm21.html</url>
<title>Show-Hide Layers</title> Show-Hide Layers The Show-Hide Layers action shows, hides, or restores the default visibility of one or more layers. This action is useful for showing information as the user interacts with the page. For example, as the user rolls over an image of a plant, you can show a layer that gives details about the plant's growing season and region, how much sun it needs, how large it grows, and so on. To use the Show-Hide Layers action: 1 Choose Insert > Layer or click the Layer button on the Object palette and draw a layer in the Document window. Repeat this step to create additional layers. 2 Follow steps 1 through 3 of the procedure in Attaching a behavior . 3 Select Show-Hide Layers from the Actions pop-up menu. If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the BODY tag or a link ( A tag)—or change the target browser to IE 4.0 in the Events For pop-up menu. 4 Select the layer whose visibility you want to change from the Named Layers list. 5 Click Show to show the layer, Hide to hide the layer, or Default to restore the layer's default visibility. 6 Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu. Show-Hide Layers is also useful for creating a preload layer—that is, a large layer that obscures the contents of the page at first and then disappears when all the page components have finished loading. To create a preload layer: 1 Click the Layer button on the Object palette and draw a large layer in the Document window. Be sure that the layer covers all the content on the page. 2 In the Layer palette, drag the layer name to the top of the list of layers to specify that the layer should be at the top of the stacking order. 3 Name the layer loading in the leftmost text entry field in the Property inspector. 4 With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector. 5 Click inside the layer (which should now be obscuring the rest of the page contents) and type a message, if desired. For example, Please wait while the page loads or Loading... are messages that tell users what is happening so that they don't think the page contains no content. 6 Click the <body> tag in the tag selector in the bottom left corner of the Document window. 7 In the Behavior inspector, select Show-Hide Layers from the Actions pop-up menu. 8 Select the layer called loading from the Named Layers list. 9 Click Hide. 10 Click OK.
<url>html/216.interactivity.fm22.html</url>
<title>Swap Image</title> Swap Image The Swap Image action swaps one image for another by changing the SRC attribute of the IMG tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). Note: Because only the SRC attribute is affected by this action, you should swap in an image that has the same dimensions (height and width) as the original in order to avoid distortion. To use the Swap Image action: 1 Choose Insert > Image or click the Image button on the Object palette to insert an image. 2 In the Property inspector, enter a name for the image in the leftmost text entry field. The Swap Image action still works if you do not name your images (it names unnamed images automatically when you attach the behavior to an object), but it is easier to determine which image is which in the Swap Image dialog box if all of the images are named beforehand. 3 Repeat steps 1 and 2 to insert additional images. 4 Follow steps 1 through 3 of the procedure in Attaching a behavior . 5 Select Swap Image from the Actions pop-up menu. 6 Select the image whose source you want to change from the Images list. 7 Enter the path and file name of the new image in the Set Source To field, or click Browse to select an image file. 8 Repeat steps 6 and 7 for any additional images you want to change. 9 Select the Preload Images option to load the new images into the browser's cache. This prevents delays caused by downloading when it is time for the images to appear. 10 Click OK. 11 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm23.html</url>
<title>Swap Image Restore</title> Swap Image Restore The Swap Image Restore action restores the last set of swapped images to their previous source files. This action is automatically added whenever you attach the Swap Image action to an object; you should never need to select it manually.
<url>html/216.interactivity.fm24.html</url>
<title>Validate Form</title> Validate Form The Validate Form action checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this action to individual form fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with the onSubmit event to evaluate several fields at once when the user clicks the Submit button. Attaching this action to a form prevents the form from being submitted to the server if any of the specified fields contains invalid data. To use the Validate Form action: 1 Choose Insert > Form or click the Form button on the Object palette to insert a form. 2 Choose Insert > Form Object > Text Field or click the Text Field button on the Object palette to insert a text field. Repeat this step to insert additional text fields. 3 Do one of the following: To validate individual fields as the user fills out the form, select a text field and choose Window > Behaviors. To validate multiple fields when the user submits the form, click the <form> tag in the tag selector in the bottom left corner of the Document window and choose Window > Behaviors. 4 Select Validate Form from the Actions pop-up menu. 5 Do one of the following: If you are validating individual fields, select the same field that you have selected in the Document window from the Named Fields list. If you are validating multiple fields, select a text field from the Named Fields list. 6 Select the Required option if the field must contain some data. 7 Choose from one of the following Accept options: Use Anything if the field is required but need not contain a particular kind of data. This option is meaningless (that is, it is the same as if the Validate Form action were not attached to the field) if Required is not selected. Use E-mail address to check that the field contains an @ symbol. Use Number to check that the field contains only numeric characters. Use Number From to check that the field contains only numeric characters in a specific range. 8 If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate. 9 Click OK. If you are validating multiple fields when the user submits the form, then the onSubmit event automatically appears in the Events pop-up menu. 10 If you are validating individual fields, check that the default event is onBlur or onChange . If it isn't, select onBlur or onChange from the pop-up menu. Both of these events trigger the Validate Form action when the user moves away from the field. The difference between them is that onBlur happens whether or not the user has typed in the field, and onChange happens only if the user changed the contents of the field in any way. onBlur is the preferred event when you have specified that the field is required.
<url>html/216.interactivity.fm25.html</url>
<title>Play Timeline and Stop Timeline</title> Play Timeline and Stop Timeline Use the Play Timeline and Stop Timeline actions to let users start and stop a timeline by clicking a link or button; or to start and stop a timeline automatically when the user rolls over a link, image, or other object. The Play Timeline action is automatically attached to the BODY tag with the onLoad event when you select the Autoplay option in the Timeline inspector. To use the Play Timeline and Stop Timeline actions: 1 Choose Window > Timeline to open the Timeline inspector and make sure that your document contains a timeline. If you see no purple animation bars in the Timeline inspector, your document does not contain a timeline. See Creating a timeline animation . 2 Follow steps 1 through 3 of the procedure in Attaching a behavior . 3 Select Play Timeline or Stop Timeline from the Actions pop-up menu. 4 Select the timeline you want to play or stop, or choose to stop all timelines, from the pop-up menu. 5 Click OK. 6 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/205.templates.fm3.html</url>
<title>Setting template page properties</title> Setting template page properties The template's page properties control all of the document's options except for the page title. For any document that uses a template, changes to its page properties (except for the title) are ignored. To change the properties of a page after a template has been applied, modify the page properties for the template and then update the pages that use the template. See Modifying templates and updating the site . To define the template's page properties: 1 Open the template and choose Modify > Page Properties. 2 Specify the desired options for the page and click OK. To learn more about page properties, see Page properties .
<url>html/205.templates.fm4.html</url>
<title>Defining a template's editable regions</title> Defining a template's editable regions A template has two types of regions: editable and locked (noneditable). Editable regions are the sections of a template that have changing content, such as an article in a newsletter. Locked regions are the sections of a template that have static, unchanging content, such as a corporate logo or standard site navigation elements. By default, templates are locked. You can add content to the template, but when you save the template, all content is marked noneditable. If you create a document from such a template, Dreamweaver warns you that the document will not contain any editable regions. To make a template useful, you must create editable regions, mark existing content as editable, or add new content and mark it as editable. While you are editing the template itself, you can make changes to both the editable and locked regions. When the template is applied to a document, however, you can make changes only to the editable regions of the document; the locked regions of the document can't be modified. To define existing content an editable region: 1 Select the text or content you want to make editable. 2 Choose Modify > Templates > Mark Selection as Editable. 3 In the New Editable Region dialog box, enter a name for the region. The text or content is highlighted in the template. You can mark an entire table or an individual table cell as editable. However, you can't mark several cells editable at once. Layers and layer content are separate elements; both can be marked as editable. Marking a layer editable lets you change the position of the layer; marking layer content editable lets you change the content of a layer. To define a new editable region: 1 Place the cursor at the location where you want to insert an editable region. 2 Choose Modify > Templates > New Editable Region. 3 In the New Editable Region dialog box, enter a name for the region. The region name, surrounded by curly braces as in {region name} , is inserted into the template as a highlighted placeholder. When the template is applied to a document, you can substitute the placeholder with text, images, or other content. Note: The following characters are not valid for region names: apostrophes (`), quotation marks ("), angle brackets (< >), and ampersands (&).
<url>html/205.templates.fm5.html</url>
<title>Template preferences</title> Template preferences You can customize the highlight colors for the editable and locked regions of a template in Highlighting preferences. The editable region color appears in the template itself. The locked region color appears in documents that use the template. To change template highlight colors: 1 Choose Edit > Preferences and select Highlighting. 2 Click the Editable Regions color box and select a highlight color. Do the same for Locked Regions. 3 Click Show to toggle the display of these colors in the Document window. 4 Click OK. To view highlight colors in the document window: Choose View > Invisible Elements. Highlight colors only appear in the document window when View > Invisible elements is on.
<url>html/205.templates.fm6.html</url>
<title>Viewing editable and locked regions</title> Viewing editable and locked regions Editable and locked regions appear in the Document window as highlighted text and objects. For information about setting highlighting preferences, see Template preferences . In templates, editable regions are highlighted. However, you can make changes to both editable and locked content. In documents using templates, locked regions are highlighted. You can only make changes to the editable (non-highlighted) content.
<url>html/205.templates.fm7.html</url>
<title>Viewing editable and locked HTML</title> Viewing editable and locked HTML Editable content is delimited in HTML using the Dreamweaver comments #BeginEditable and #EndEditable. The HTML for an editable placeholder named Edit-Region would look like this: <!-- #BeginEditable "Edit-Region" --> {Editable-Region} <!-- #EndEditable --> The HTML for an editable table named Edit-Table would look like this: <!-- #BeginEditable "Edit-Table" --> <table width="77%" border="1"> <tr> <td> </td> <td> </td> </tr> </table> <!-- #EndEditable --> For templates, editable regions are highlighted in the HTML window. However, you can make changes to both editable and locked HTML source code. For documents using templates, locked regions are highlighted in the HTML window. You can only make changes to the editable (non-highlighted) HTML source code.
<url>html/205.templates.fm8.html</url>
<title>Unmarking a region</title> Unmarking a region If you mark a region as editable and then want to make it noneditable again (lock it), use the Unmark Editable Region command. To unmark a region (make it noneditable): 1 Choose Modify > Templates > Unmark Editable Region. 2 Select the region name from the list and click OK. The region is locked.
<url>html/205.templates.fm9.html</url>
<title>Using styles, timelines, and behaviors in templates</title> Using styles, timelines, and behaviors in templates Custom styles, timelines, and behaviors are fully supported for templates. However, any document that uses a template cannot have its own style sheet, timelines, or behaviors; it must use the style sheet, timelines, and behaviors defined for the template. This is because styles, timelines, and behaviors all have components in the HEAD of document, which is not editable in documents that use templates. Styles, timelines, and behaviors can be applied only to editable regions of a document that uses templates. For more information on using styles, see Formatting text with style sheets . For more information on timelines and behaviors, see Interactivity and animation overview .
<url>html/206.siteplanning.fm1.html</url>
<title>Site planning overview</title> Site planning overview A site is a storage location for the documents belonging to a web site. Sites can reside on local or remote servers. To get started in Dreamweaver, you must first create a local site. See Creating a local site . Once the local site is created, use links to connect to documents within your site, to documents on remote sites, or to e-mail addresses or scripts. See Creating links To help you manage your site, Dreamweaver displays site content as either a list of files or a site map. You can use the site map to quickly create and view prototypes of your web sites. See Working with site files and Creating site maps .
<url>html/206.siteplanning.fm10.html</url>
<title>Viewing files in the Site window</title> Viewing files in the Site window Use the Site window for viewing local and remote sites, adding or removing site documents, or for storyboarding. The Site window consists of two panes, a splitter bar, and set of menu buttons. As you adjust the Site window options, Dreamweaver will remember and use the new settings the next time you open the Site window. For more information, see Site window options .
<url>html/206.siteplanning.fm11.html</url>
<title>Viewing local and remote sites</title> Viewing local and remote sites The Site window can display the contents of local and remote sites. Local sites are displayed as a list of files, a visual map, or both. Remote sites are only displayed as a list of files. To view site files, do one of the following: Choose Window > Site Files. In the Site window, click the Site Files button. The pane displaying local site files is labeled "Local Folder" and the pane displaying remote site files is labeled "Remote Site." Note: If you are viewing a local site that has no corresponding remote site, the pane labeled "Remote Site" will be empty. To view the site map, do one of the following: Choose Window > Site Map. In the Site window, click the Site Map button, or click the Site Map button arrow and select Map and Files. The pane displaying the local site files is labeled "Local Folder" and the pane displaying the local site as a map is labeled "Site Navigation." To view only the site map: Click the site map button arrow and select Map Only.
<url>html/219xa.shortcuts.fm4.html</url>
<title>Formatting text</title> Formatting text Command Windows Macintosh Indent Control-] Command-] Outdent Control-[ Command-[ Format > None Control-0 (zero) Command-0 (zero) Apply the Paragraph style Control-T Command-T Apply Headings 1-6 to the paragraph Control-1-6 Command-1-6 Alignment > Left Control-Alt-L Option-Command-L Alignment > Center Control-Alt-C Option-Command-C Alignment > Right Control-Alt-R Option-Command-R Make selected text bold Control-B Command-B Make selected text italic Control-I Command-I Edit Style Sheet Control-Shift-E Shift-Command-E Note: Many text formatting shortcuts have no effect when working in the HTML inspector.
<url>html/219xa.shortcuts.fm5.html</url>
<title>Finding and replacing text</title> Finding and replacing text Action On Windows, use On Macintosh, use Find Control-F Command-F Find Next/Find Again F3 F3, Command-G Replace Control-H Command-H
<url>html/219xa.shortcuts.fm6.html</url>
<title>Working in tables</title> Working in tables Action On Windows, use On Macintosh, use Select table (with cursor inside the table) Control-A Command-A Move to the next cell Tab Tab Move to the previous cell Shift-Tab Shift-Tab Insert a row (before current) Control-M Command-M Add a row at end of table Tab in the last cell Tab in the last cell Delete the current row Control-Shift-M Command-Shift-M Insert a column Control-Shift-A Command-Shift-A Delete a column Control-Shift- - (minus) Command-Shift- - (minus) Merge table cells Select multiple contiguous cells and press M Select multiple contiguous cells and press M Split table cells Control-Alt-S Command-Option-S Update table layout (forces a redraw when in "faster table editing" mode) Control-Space Command-Space
<url>html/219xa.shortcuts.fm7.html</url>
<title>Working with frames</title> Working with frames Action On Windows, use On Macintosh, use Select a frame Alt-click in frame Shift-Option-click in frame Select next frame or frameset Alt-right arrow Command-right arrow Select previous frame or frameset Alt-left arrow Command-left arrow Select parent frameset Alt-up arrow Command-up arrow Select first child frame or frameset Alt-down arrow Command-down arrow Add a new frame to frameset Alt-drag frame border Option-drag frame border Add a new frame to frameset using push method Alt-Control-drag frame border Option-Command-drag frame border
<url>html/219xa.shortcuts.fm8.html</url>
<title>Working with layers</title> Working with layers Action On Windows, use On Macintosh, use Select a layer Control-Shift-Click Shift-Command-Click Select and move layer Shift-Control-drag Shift-Command-drag Add or remove layer from selection Shift-click layer Shift-click layer Move selected layer by pixels Arrow keys Arrow keys Move selected layer by snapping increment Shift-arrow keys Shift-arrow keys Resize selected layer by pixels Control-arrow keys Option-arrow keys Resize selected layer by snapping increment Control-Shift-arrow keys Option-Shift-arrow keys Align selected layers to the Top/Bottom/Left/Right of the last selected layer Control-Up/Down/Left/Right arrow keys Command-Up/Down/Left/Right arrow keys Make selected layers the same width Control-Shift-[ Command-Shift-[ Make selected layers the same height Control-Shift-] Command-Shift-] Convert Layers to Tables Control-Shift-F6 Command-Shift-F6 Reposition Content using Layers Control-F6 Command-F6 Toggle nesting preference on or off when creating a layer Control-drag Command-drag Toggle the display of the Grid Control-Alt-Shift-G Shift-Option-Command-G Snap To Grid Control-Alt-G Option-Command-G Add a keyframe (Timeline) Shift-F9 Shift-F9 Remove a keyframe (Timeline) Delete Delete
<url>html/219xa.shortcuts.fm9.html</url>
<title>Working with timelines</title> Working with timelines Action On Windows, use On Macintosh, use Add object to timeline Control-Shift-Alt-T Command-Shift-Option-T
<url>html/220xb.htmlresources.fm1.html</url>
<title>HTML resources</title> HTML resources HTML 4.0 Specification The official specification for HTML from the World Wide Web Consortium. Cascading Style Sheets Specification (CSS1) The official specification for style sheets from the World Wide Web Consortium. Positioning HTML Elements with Cascading Style Sheets The latest working draft of the specification for positioning with style sheets (CSS layers) from the World Wide Web Consortium. Index DOT Html A comprehensive listing of HTML tags, attributes, and values, as well as their compatibility with the various browsers. Web Review's Style Sheets Reference Guide A guide to what styles are and in which browsers they work. CGI Scripts: Steal or Build? An article on incorporating ready-made CGI scripts into your pages from the Hotwired Webmonkey site. Give the Gift of CGI Scripts A brief tutorial on writing your own CGI scripts from the Hotwired Webmonkey site. The CGI Resource Index A repository of all things related to CGI, including ready-made scripts, documentation, books, and even programmers-for-hire.
<url>html/221xc.credits.fm1.html</url>
<title>Acknowledgments</title> Acknowledgments Project Management and Content Architecture: Sheila McGinn Writing: Lori Hylan, Corinne Chandel, Denise Lee, Erica Edmonds, and Sheila McGinn Multimedia Design: James Khazar Multimedia Production: John "Zippy" Lehnus and Pat Knoff Help Engineering: Lori Hylan Tutorial Site Design: Akimbo Design Java Engineering: Eric Harshbarger Editing: Judy Walthers von Alten and Judy Ziajka Production Management: Gemma Londono Design: Noah Zilberberg Production: Noah Zilberberg and Paul Benkman Special thanks to Margaret Dumas, Paul Madar, Heidi Bauer, nj, Mike Sundermeyer, Jean Fitzgerald, David George, Kristin Conradi, and Karen Olsen-Dunn, Peter Fenczik, Ben Melnick.
<url>html/222xx.extending.fm1.html</url>
<title>Extending Dreamweaver overview</title> Extending Dreamweaver overview There are several ways to extend Dreamweaver using HTML, XML, JavaScript and C. You can write your own objects, behavior actions, commands, property inspectors, and data translators. You can also make custom tags visible in Dreamweaver by adding them to the tag database and defining an icon for them. To accomplish these tasks, you must be proficient in JavaScript and thoroughly understand HTML elements. You need not have prior knowledge of XML, and proficiency with C is required only if you need some functionality that is not available in the Dreamweaver JavaScript API. This chapter describes the Document Object Model that Dreamweaver supports, the Dreamweaver JavaScript API (the custom JavaScript functions that are built into Dreamweaver and that can be used in any object, behavior action, command, property inspector, or data translation file), the APIs that are specific to each type of file, and the steps necessary to create a basic object, behavior action, command, property inspector, and data translator. Because the content of this chapter is likely to be of interest to a subset of Dreamweaver users—and because of the additional time it takes to document this feature—the bulk of this chapter is available for download from the Dreamweaver Developers Center.
<title>Targeting and previewing in browsers</title> Targeting and previewing in browsers Action On Windows, use On Macintosh, use Preview in primary browser F12 F12 Preview in secondary browser Shift-F12 Shift-F12
<url>html/219xa.shortcuts.fm13.html</url>
<title>Site management and FTP</title> Site management and FTP Action Windows Macintosh Create new file Control-Shift-N Shift-Command-N Create new folder Control-Alt-Shift-N Shift-Option-Command-N Open selection Control-Alt-Shift-O Shift-Option-Command-O Get selected files or folders from remote FTP site Press Control-Shift-D, or drag files from Remote to Local pane in Site window. Press Shift-Command-D, or drag files from Remote to Local pane in Site window. Put selected files or folders to remote FTP site Press Control-Shift-U, or drag files from Local to Remote pane in Site window. Press Shift-Command-U, or drag files from Local to Remote pane in Site window. Check out Control-Alt-Shift-D Shift-Option-Command-D Check in Control-Alt-Shift-U Shift-Command-Option-U Disconnect Control-Alt-Shift-F5 Shift-Option-Command-F5 Refresh local site Control-F5 Command-F5 Refresh remote site Alt-F5 Option-F5
<url>html/219xa.shortcuts.fm14.html</url>
<title>Site Map</title> Site Map Action Windows Macintosh Site Files view F5 F5 Site Map view Shift-F5 Shift-F5 Make Root Control-Shift-R Command-Shift-R Link to Existing File Control-Shift-K Command-Shift-K Change Link Control-L Command-L Remove Link Delete key Delete key Show/Hide Link Control-Shift-Y Command-Shift-Y Show Page Titles Control-Shift-T Command-Shift-T Rename file F2 n/a Zoom Site Map in Control-+ (plus) Command-+ (plus) Zoom Site Map out Control- - (minus) Command- - (minus)
<url>html/219xa.shortcuts.fm15.html</url>
<title>Playing plugins</title> Playing plugins Action On Windows, use On Macintosh, use Play Plugin Control-P Command-P Stop Plugin Control-. Command-. Play All Plugins Control-Shift-P Command-Shift-P Stop All Plugins Control-Shift-. Command-Shift-.
<url>html/219xa.shortcuts.fm16.html</url>
<title>Viewing page elements</title> Viewing page elements To toggle the display of Windows Macintosh Invisible Elements Control-Shift-I Shift-Command-I Rulers Control-Alt-Shift-R Shift-Option-Command-R Grid Control-Alt-Shift-G Shift-Option-Command-G View Head Content Control-Shift-W Command-Shift-W
<url>html/219xa.shortcuts.fm17.html</url>
<title>Working with templates</title> Action On Windows, use On Macintosh, use Create new Editable Region Control-Alt-V Command-Option-V Mark Region as Editable Control-Alt-W Command-Option-W Working with templates
<url>html/219xa.shortcuts.fm18.html</url>
<title>Inserting objects</title> Inserting objects To insert this Windows Macintosh Any object (image, Shockwave movie, and so on) Drag file from the Explorer or Site window to the Document window. Drag file from the Finder or Site window to the Document window. Image Control-Alt-I Option-Command-I Table Control-Alt-T Option-Command-T Flash Movie Control-Alt-F Option-Command-F Shockwave Director movie Control-Alt-D Option-Command-D Named Anchor Control-Alt-A Option-Command-A
<url>html/219xa.shortcuts.fm19.html</url>
<title>Opening and closing windows</title> Opening and closing windows To toggle the display of this Windows Macintosh Objects Control-F2 Command-F2 Properties Control-F3 Command-F3 Launcher Shift-F4 Shift-F4 Site Files view F5 F5 Site Map view Shift-F5 Shift-F5 Library F6 F6 Styles F7 F7 Behaviors F8 F8 Timelines F9 F9 HTML F10 F10 Layers F11 F11 Frames Control-F10 Command-F10 Templates Control-F11 Command-F11 Show/Hide Floating Windows F4 F4 Close Document window Control-F4 or Control-W Command-W or Command-F4
<title>Getting help</title> Getting help Command Windows Macintosh Help Topics F1 help Dreamweaver Online Control-F1 Command-F1
<url>html/219xa.shortcuts.fm3.html</url>
<title>Editing text</title> Editing text Action On Windows, use On Macintosh, use Create a new paragraph Enter Enter Insert a line break Shift-Enter Shift-Enter Insert a non-breaking space Control-Shift-space Option-space Move text or object to another place in the page Drag selected item to new location. Drag selected item to new location. Copy text or object to another place in the page Control-drag selected item to new location. Option-drag selected item to new location. Copy text only (does not copy HTML tags) Control-Shift-C Shift-Command-C Paste as text Control-Shift-V Shift-Command-V Select a word Double-click Double-click Add selected items to library Control-Shift-B Shift-Command-B Switch between Document window and HTML inspector Control-Tab Command-Tab or Option-Tab Open and close the Property inspector Control-Shift-J Shift-Command-J Check spelling Shift-F7 Shift-F7
<url>html/206.siteplanning.fm4.html</url>
<title>Creating links with the point-to-file icon</title> Creating links with the point-to-file icon Create links by using the point-to-file icon to point to another open document, a file in the Site window, or a visible anchor in an open document. The point-to-file icon can be found in the Property inspector and in the Site Map view when a file is selected. It also appears when you Shift-drag a selection. To link to a document using the point-to-file icon in the Property inspector: 1 Select text or an image in the Document window. 2 Drag the point-to-file icon from the Property inspector and point to another open document, a visible anchor in an open document, or a file in the Site window. The Link field updates to show the link. 3 Release the mouse to make the link. links_pi" links_pi.dcr" To create a link from a selection in an open document: 1 Select text or an image in the Document window. 2 Shift-drag from the selection. The point-to-file icon appears as you drag. 3 Point to another open document, a visible anchor in an open document, or a file in the Site window. 4 Release the mouse to make the link. links_doc" links_doc.dcr" To create a link from a file in the Site map: 1 Select an HTML page in the site map. The point-to-file icon appears next to the file. 2 Drag the point-to-file icon and point to another open document, a visible anchor in an open document, or a file in the Site window. For information about creating a site map, see Creating site maps .
<url>html/206.siteplanning.fm5.html</url>
<title>Linking to a document</title> Linking to a document Use the Property inspector to link an image or range of text in the current document or to another document. To create links between documents: 1 Select text or an image in the Document window. 2 Open the Property inspector (Window > Properties) and do one of the following: Type a path in the Link box. To link to a document in your site, enter a document-relative or root-relative path. To link to a document outside your site, enter an absolute path. Click the folder icon to browse to and select a file. The file's path appears in the URL field. Use the Relative To option to make the path document-relative or site root-relative. Click Select. Drag a file from the Site window into the Link field of the Property inspector. 3 To make the linked document appear somewhere other than in the current window or frame, select a frame name from the Target pop-up menu or choose from one of the following reserved targets: _blank loads the linked document in a new, unnamed browser window. _parent loads the linked document in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then the linked document will load into the full browser window. _self loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it. _top loads the linked document in the full browser window, thereby removing all frames.
<url>html/206.siteplanning.fm6.html</url>
<title>Linking to a named anchor</title> Linking to a named anchor Named anchors mark specific positions in a document. Use named anchors to jump to a marked position in the current document or to link to a marked position in a different document. To create a named anchor: 1 In the Document window, place the cursor where you want the named anchor. 2 Do one of the following: Choose Insert > Named Anchor. Choose Window > Objects, select Invisibles from the pop-up menu at the top of the Object palette, and then click the Anchor button. 3 Enter a name for the anchor in the dialog box that appears. If the anchor marker doesn't appear at the cursor location, choose View > Invisible Elements. To link to a named anchor: 1 Select text or an image in the Document window. 2 In the Property inspector, enter a pound sign (#) and the name of the anchor in the Link box. For example: To link to an anchor named "two" in the current file, type #two . To link to an anchor named "two" in a different file in the same folder, type filename.html#two . To link to a named anchor using the point-to-file method: 1 Choose View > Invisible Elements to make the anchor visible. 2 Select text or an image in the Document window. 3 Do one of the following: Click the point-to-file icon in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or to an anchor in another open document. Shift-click in the Document window and drag to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
<url>html/206.siteplanning.fm7.html</url>
<title>Creating e-mail, nowhere, and script links</title> Creating e-mail, nowhere, and script links The most familiar kinds of links are links to documents and named anchors (described in Linking to a document and Linking to a named anchor , respectively), but there are other types of links as well. E-mail links open new message windows (using the mail program associated with the user's browser) whenever the user clicks them. The To field in the Message window is automatically filled in with the address specified in the link. To create an e-mail link: 1 Select text or an image in the Document window. 2 In the Property inspector, type mailto: followed by an e-mail address in the Link box. 3 Press Enter. Nowhere links do exactly what their name implies: they go nowhere. Such links are useful for gaining access to JavaScript events that are available to links but not to text or images without sending the user away from the current page. For example, in most browsers images do not recognize the onMouseOver event. For this reason, you must wrap images in nowhere links to implement rollover highlights (the Swap Image behavior in Dreamweaver does this automatically). To create a nowhere link: 1 Select text or an image in the Document window. 2 In the Property inspector, type a pound sign (#) in the Link box. 3 Press Enter. Script links execute JavaScript code or call a JavaScript function and are useful for giving users additional information about an item without leaving the current page. Script links can also be used to perform calculations, form validations, and other processing tasks when a user clicks a specific item. To create a script link: 1 Select text or an image in the Document window. 2 In the Link box of the Property inspector, type javascript: followed by some JavaScript code or a function call. For example, typing javascript:alert(`This feature is not implemented') in the Link box produces a link that displays a JavaScript alert box with the message This feature is not implemented. Note: Because the JavaScript code appears between double quotation marks (as the value of the HREF attribute), you must use single quotation marks in the script code or escape any double quotation marks by preceeding them with backslashes (for example, \"This feature is not implemented\").
<url>html/206.siteplanning.fm8.html</url>
<title>Testing links</title> Testing links Links are not active in the Document window—that is, clicking on them does not take you to the linked document—because you need to be able to click on a link modify the text or images associated with it. You can open the file associated with a link in Dreamweaver if you want to edit the linked file, but you must test links in a browser. See Testing your site . To test links in a browser: Choose File > Preview in Browser. To open linked documents in Dreamweaver, do one of the following: Select the link and choose Modify > Hyperlink > Open Linked Page. Press Control (Windows) or Command (Macintosh) and double-click the link. Note: The linked document must reside on your local disk.
<url>html/206.siteplanning.fm9.html</url>
<title>About relative and absolute paths</title> About relative and absolute paths There are three types of document paths: absolute paths, root-relative paths, and document-relative paths. Paths are entered into the Link box of the Property inspector or the URL box of the Select HTML File dialog box (accessed from the Property inspector). See Linking to a document . Absolute paths Are complete paths that include the server protocol (usually http:// for web pages). For example, http://www.macromedia.com/dreamweaver/. Absolute paths remain accurate regardless of the location of the source document, but they do not link correctly if the target document is moved. You must use an absolute path when creating a link to a file outside the current site. Root-relative paths Always begin at the root of the current site. All files on the site that are visible to the public are contained within the site root. Root-relative paths begin with a slash that tells the server to start from the root. For example, the path /dreamweaver/intro.htm links to a document named intro.htm in the dreamweaver folder, which is at the root level of the site. A root-relative path is usually the best way to link files in an environment where content must be moved frequently. When you use root-relative paths, links continue to work even if the document you are linking from is moved within the site. Root-relative paths are not appropriate for sites that are to be viewed locally (such as presentations). Instead, use document-relative paths. When you are working with Dreamweaver on a local disk, you define a local site by choosing a folder to serve as the equivalent of the document root on a server. Dreamweaver uses this folder to locate all links to local files specified as root-relative URLs. Root-relative links don't work until you save the document in a local site. To define a local site, choose Site > Define Sites. See Creating a local site . Note: Content linked with root-relative paths does not appear when you preview documents locally in a browser. This is because browsers don't recognize site roots—servers do. To preview content linked with root-relative paths, put the file on a remote server and view it from there. Document-relative paths Are relative to the folder containing the current document. For example, document.htm specifies a document in the current folder; ../document.htm specifies a document in the folder above the current folder; and htmldocs/document.htm specifies a document in a folder named htmldocs which is inside the current folder. Document-relative paths are often the simplest paths to use for links to files that will always be in the same folder as the current document. Note: You should always save a new file before creating a document-relative path, since the document-relative path is not valid without a definite starting point. If you create a document -relative path before saving the file, Dreamweaver uses an absolute path beginning with file:// until the file is saved.
<url>html/207.sitemgmt.fm1.html</url>
<title>Site management overview</title> Site management overview To help you organize files on your system, Dreamweaver re-creates the structure of the remote web site on your local system. The links you create at your local site continue to work on the remote site because the structure of the two sites is identical. You create a local site in Dreamweaver by selecting a local root folder with the Define Sites command. See Creating a local site . You associate your local site with a remote server by selecting additional options in the Define Sites dialog box. See Defining a site . When transferring files between local and remote sites, Dreamweaver maintains identical directory structures to ensure that links and references are not accidentally broken. If directories do not exist on the site where files are being transferred, Dreamweaver automatically creates them. Dreamweaver includes a number of features for structuring a site, navigating within and between documents, and transferring files to a remote server. To make collaborative work on a web site easier, you can check in and check out files on the remote server to prevent others from working on the same files at the same time. Dreamweaver does not perform version control, nor does it remove files or folders on the remote server that no longer exist in the local root folder.
<url>html/207.sitemgmt.fm10.html</url>
<title>Searching for text in the Document window</title> Searching for text in the Document window Use the text option in the Find or Replace dialog box to search for specific text strings without regard for the underlying HTML. For example, a search for the black dog would match both the black dog and the <i>black</i> dog . See Searching and replacing for step-by-step instructions on initiating a search.
<url>html/207.sitemgmt.fm11.html</url>
<title>Searching for text in the HTML source</title> Searching for text in the HTML source Use the HTML Source option in the Find or Replace dialog box to search for specific text strings in the HTML source code. For example, a search for black dog in the following code would produce two matches (in the ALT attribute and in the first sentence): <IMG SRC="barnaby.gif" WIDTH="100" HEIGHT="100" ALT="Barnaby, a black dog."><BR> We saw several black dogs in the park yesterday. The black <A HREF="barnaby.html">dog</A> we liked best was called Barnaby. The phrase black dog also appears in the second sentence, but it does not match because it is interrupted by a link. See Searching and replacing for step-by-step instructions on initiating a search.
<url>html/207.sitemgmt.fm12.html</url>
<title>Searching for HTML tags and attributes</title> Searching for HTML tags and attributes Use the Tag option in the Find or Replace dialog box to search for specific tags, attributes, and attribute values. For example, you can search for all IMG tags with no ALT attribute. See Searching and replacing for information about the various types of searches. To perform a tag search: 1 Begin your search by following the steps outlined in Searching and replacing . 2 Choose a specific tag from the pop-up menu that is adjacent to the Find What pop-up menu, or choose [any tag]. If you just want to search for all occurrences of the specified tag, press the minus (-) button and skip to step 5. Otherwise, proceed with step 3. 3 Limit the search with one of the following tag modifiers: With Attribute Lets you choose from a list of attributes that must be in the tag for it to match. You can specify a particular value for this attribute or choose [any value]. Without Attribute Lets you choose from a list of attributes that cannot be in the tag for it to match. This is the option to choose if you are searching for all IMG tags with no ALT attribute. Containing Lets you specify text, text and code, or a tag that must be inside the tag in for it match. For example, in the code <B><FONT FACE="Arial">Heading 1</FONT></B> , the FONT tag is inside the B tag. Not Containing Lets you specify text, text and code, or a tag that cannot be inside the tag for it to match. Inside Tag Lets you specify a tag that the target tag must be inside of for it to match. Not Inside Tag Lets you specify a tag that the target tag cannot be inside of for it to match. 4 Click the plus (+) button and repeat step 3 to further constrain the search. 5 Choose Find Next to highlight the next instance of the search text in the current document, or choose Find All to generate a list of all the instances of the search text in the current document. If you are searching in a directory or site, Find Next highlights the next instance of the search text in the current document or, if there is none, opens the next document that contains the search text, and Find All generates a list of documents that contain the search text.
<url>html/207.sitemgmt.fm13.html</url>
<title>Searching for text between specific tags</title> Searching for text between specific tags Use the Text (Advanced) option in the Find or Replace dialog box to search for specific text strings that are either within or not within a set of container tags. For example, you can search for the word Untitled between TITLE tags to find all the untitled pages on your site. See Searching and replacing for information about the various types of searches. To perform an advanced text search: 1 Begin your search by following the steps outlined in Searching and replacing . 2 Enter the text you want to search for in the text field adjacent to the Find What pop-up menu. For example, type the word Untitled. 3 Choose Inside Tag or Not Inside Tag and then choose a tag from the adjacent pop-up menu. For example, choose Inside Tag and then TITLE . 4 Click the plus (+) button to constrain the search to tags with a specific attribute or attributes. Since the TITLE tag has no attributes, you won't need to use this option to find all the untitled pages on your site. 5 Choose Find Next to open the next document that contains the search text, or choose Find All to generate a list of documents that contain this text.
<url>html/215.reusing.fm7.html</url>
<title>Making library items editable</title> Making library items editable To make a library item editable in the current document, you must break the link between the item in the document and the library. Once you have made an instance of a library item editable, that instance cannot be updated from the library. To make a library item editable: 1 Select a library item in the current document. 2 Click Make Editable in the Property inspector.
<url>html/215.reusing.fm8.html</url>
<title>Editing a behavior in a library item</title> Editing a behavior in a library item When you create library items that contain elements with behaviors attached to them, Dreamweaver copies the element and its event handler (the attribute that specifies which event to look for and which action to call when the event happens) to the library item file. Dreamweaver does not copy the associated JavaScript functions into the library item. Instead, Dreamweaver automatically inserts the functions into the HEAD of the current document (if they do not already exist) when you add the library item to the document. The JavaScript functions are not stored with the library item because they are HEAD elements, and library items can only contain BODY elements. Thus the Behavior inspector is unavailable when you are editing a library item because only half of the behavior code is available to inspect. To edit a behavior in a library item, you must first make the item editable and then re-create it after making changes. To edit a behavior in a library item: 1 Open a document that contains the library item. Note the name of the library item, as well as the exact tags it contains. You'll need this information in steps 8 and 9. 2 Select the library item and click Make Editable in the Property inspector. 3 Select the element that has the behavior attached to it. 4 Choose Window > Behaviors to open the Behavior inspector and then double-click the action you want to change. To remove an action altogether, select it and press Delete. 5 In the parameters dialog box that appears, make the necessary changes and click OK. 6 Choose Window > Library to open the Library palette. 7 Delete the original library item. 8 In the Document window, select the elements that make up the library item. Be careful to select the exact same elements that were in the original library item. 9 In the Library palette, click the Create button and then give the new item the same name as the one you deleted in step 7. Be sure to use the exact same spelling and capitalization. 10 Choose Modify > Library > Update Pages. 11 Choose Files That Use from the Look In pop-up menu. The name of the library item you just created should appear in the adjacent pop-up menu. 12 Select the Update Library Items option and click Start.
<url>html/215.reusing.fm9.html</url>
<title>Library item properties</title> Library item properties Use library item properties to specify the source file of an item and to make it editable or to re-create it after editing. Double-click a library item to open the Property inspector. See also Reusing page elements overview . Src Displays the file name and location of the source file for the library item. Open Opens the source file for the library item. Make Editable Breaks the link between the selected library item and its source file. The content of the library item becomes editable, but this instance of the item can no longer be updated by the Library update functions. Recreate Overwrites the original library item with the current selection. Use this option to re-create library items if the library file isn't present, the item's name has been changed, or if the item has been edited.
<url>html/216.interactivity.fm1.html</url>
<title>Interactivity and animation overview</title> Interactivity and animation overview Use interactivity and animation in your web pages to give visitors feedback as they move and click, to capture visitors' interest, to demonstrate concepts, to validate form data without contacting the server—in short, to let visitors see and do more without leaving the page. There are several ways to add interactivity and animation to your pages using Dreamweaver: Use behaviors to perform tasks in response to specific events, such as highlighting a button when the user passes over it with the mouse, validating a form when the user clicks the Submit button, or opening a second browser window when the main page is finished loading. See Behaviors overview . Use timelines to create animations that do not require plugins, ActiveX controls, or Java. Timelines use dynamic HTML to change the position of a layer or the source of an image over time or to call behavior actions automatically after the page has loaded. See Animating with dynamic HTML . Use Java applets, Shockwave movies, Flash Player movies, or any other ActiveX controls or Netscape plugins in a page to add self-contained movies, interactive navigation schemes, and other multimedia elements to your page. See Adding movies, applets, and other multimedia elements .
<url>html/216.interactivity.fm10.html</url>
<title>Change Property</title> Change Property Use the Change Property action to change the value of one of an object's properties (for example, the background color of a layer or the action of a form). The properties you can affect are determined by the browser; many more properties are exposed to JavaScript in Microsoft Internet Explorer (IE) 4.0 than in IE 3.0 or Netscape Navigator 3.0 or 4.0. Note: We recommend that you use this action only if you are very familiar with HTML and JavaScript. To use the Change Property action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Change Property from the Actions pop-up menu. 3 Select the type of object whose property you would like to change from the Type of Object pop-up menu. Choosing an object type populates the Named Object pop-up menu with all the named objects of the type you select. 4 Select a specific object from the Named Objects pop-up menu. 5 Select a property from the Property pop-up menu, or enter the name of the property in the text field. To see the properties that can be changed in each browser, choose different browsers from the browser pop-up menu. If you are entering a property by hand, be sure to use the exact JavaScript name of the property (and remember that JavaScript properties are case-sensitive). 6 Enter the new value for the property in the New Value field and click OK. 7 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm11.html</url>
<title>Check Browser</title> Check Browser Use the Check Browser action to send visitors to different pages depending on their browser brands and versions. For example, you might want users to go to one page if they have Netscape Navigator 4.0 or later, to go to another page if they have Microsoft Internet Explorer 4.0 or later, and to stay on the current page if they have any other kind of browser. It's useful to attach this behavior to the BODY tag of a page that is compatible with practically any browser (and that does not use any other JavaScript); this way, visitors who come to the page with JavaScript turned off will still see something. Another option is to attach this behavior to a nowhere link ( A tag) and have the action determine to which page the link goes based on the visitor's browser brand and version. To use the Check Browser action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Check Browser from the Actions pop-up menu. 3 Determine how you want to separate your visitors: by browser brand, by browser version, or both. For example, do you want everyone with a 4.0 browser to see one page, and all others to see a different page? Do you want Netscape Navigator users to see one page and Microsoft Internet Explorer (IE) users to see another? Or perhaps you want users with Navigator 4.0 and IE 4.0 to see one page, users with Navigator 2.0 or 3.0 to see another page, and users with IE 3.0 or some other browser to stay where they are. 4 Specify a version of Netscape Navigator. 5 In the adjacent pop-up menus, choose options for what to do if the browser is the version you specified or later and what to do otherwise. The options are Go to URL, Go to Alt URL, and Stay on This Page. 6 Specify a version of Microsoft Internet Explorer. 7 In the adjacent pop-up menus, choose options for what to do if the browser is the version you specified or later and what to do otherwise. The options are Go to URL, Go to Alt URL, and Stay on This Page. 8 Choose an option from the Other Browsers pop-up menu to specify what to do if the browser is neither Netscape Navigator nor Microsoft Internet Explorer. Stay on This Page is the best option for browsers other than Navigator and IE because most do not support JavaScript—and if they cannot read this behavior, they will stay on the page anyway. 9 Enter the paths and file names of the URL and the alternate URL in the text fields at the bottom of the dialog box. 10 Click OK. 11 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu. Remember that the purpose of this behavior is to check for different browser versions, so it's best to choose an event that works on both 3.0 and 4.0 browsers.
<url>html/216.interactivity.fm12.html</url>
<title>Check Plugin</title> Check Plugin Use the Check Plugin action to send visitors to different pages depending on whether they have the specified plugin installed. For example, you might want users to go to one page if they have Shockwave and another page if they do not. Note: You cannot detect specific plugins on Microsoft Internet Explorer (IE) with JavaScript; however, for plugins that also have companion ActiveX controls (such as Shockwave and Flash), checking for a plugin is unnecessary if you have used both the OBJECT and EMBED tags to include your content in the page. In this case, select the Go to First URL if ActiveX is Available option. Deselect the option if you are not using the OBJECT tag or if there is no companion ActiveX control for the plugin. To use the Check Plugin action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Check Plugin from the Actions pop-up menu. 3 Select a plugin from the Plugin pop-up menu, or click Enter and enter the exact name of the plugin in the adjacent field. You must use the exact name of the plugin as specified in bold on the About Plug-ins page in Netscape Navigator (from Navigator, choose Help > About Plug-ins on Windows or Apple Menu > About Plug-ins on Macintosh). 4 Specify a URL for users that have the plugin in the URL field. To make users with the plugin stay on the same page, leave the URL field blank. 5 Specify an alternative URL for users that don't have the plugin in the Alt URL field. To make users without the plugin stay on the same page, leave the Alt URL field blank. 6 Select the Go To First URL if ActiveX is Available option if you are using both OBJECT and EMBED tags. Because the OBJECT tag downloads the ActiveX control automatically if the user doesn't already have it, this option allows the user to go to the page with the plugin content. ActiveX is currently available only on Microsoft Internet Explorer for Windows95/NT. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm13.html</url>
<title>Control Shockwave or Flash</title> Control Shockwave or Flash Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame in a Shockwave or Flash Player movie. To use the Control Shockwave or Flash action: 1 Choose Insert > Shockwave or Insert > Flash to insert a Shockwave or Flash Player movie, respectively. 2 Choose Window > Properties and enter a name for the movie in the leftmost text-entry field. You must name the movie to attach the Control Shockwave or Flash action. 3 Follow steps 1 through 3 of the procedure in Attaching a behavior . 4 Select Control Shockwave or Flash from the Actions pop-up menu. 5 Select a movie from the Shockwave Object pop-up menu. Dreamweaver automatically lists all files ending in .dcr, .dir, .swf, or .spl that are in OBJECT or EMBED tags in the current document. 6 Choose to play, stop, rewind, or go to a frame in the movie. Play plays the movie from the current frame. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm14.html</url>
<title>Control Sound</title> Control Sound Use the Control Sound action to play or stop a sound. For example, you might want to play a sound effect whenever the user rolls over a link, or you might want to play a music clip when the page loads and let the user stop the music by clicking a button. Note: Browsers may require the LiveAudio plugin or equivalent to play sounds. To use the Control Sound action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Control Sound from the Actions pop-up menu. 3 Do one of the following: To use the action to play a sound, enter the path and file name of a sound file in the Play Sound field, or click the Browse button to select a file. To use the action to stop a sound, select the Stop Sound action and then choose a sound file from the adjacent pop-up menu. 4 Click OK. 5 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm15.html</url>
<title>Display Status Message</title> Display Status Message The Display Status Message action shows a message in the status bar at the bottom of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it. To see an example of a status message, roll your mouse over any of the navigation buttons in the Dreamweaver Help Pages. To use the Display Status Message action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Display Status Message from the Actions pop-up menu. 3 Enter your message in the Message field. The Message field is intentionally small to remind you to keep the message concise. The browser truncates the message if it does not fit in the status bar. 4 Click OK. 5 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm16.html</url>
<title>Drag Layer</title> Drag Layer The Drag Layer action lets the user drag a layer. Use this action to create puzzles, slider controls, and other moveable user interface elements. You can specify in which direction the user can drag the layer (horizontally, vertically, or in any direction), a target to which the user 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. Because the Drag Layer action must be called before the layer can be dragged by the user, make sure that the event that triggers the action occurs before the user attempts to drag the layer. We recommend attaching Drag Layer to the BODY object (with the onLoad event), though you can also attach it to a link that fills the entire layer (such as a link around an image) using the onMouseOver event. To use the Drag Layer action: 1 Choose Insert > Layer or click the Layer button on the Object palette and draw a layer in the Document window. 2 Follow steps 1 through 3 of the procedure in Attaching a behavior . 3 Select Drag Layer from the Actions pop-up menu. If Drag Layer is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the BODY tag or a link ( A tag)—or change the target browser to IE 4.0 in the Events For pop-up menu. 4 Select the layer that you want to make draggable from the Layer pop-up menu. 5 Select either Constrained or Unconstrained from the Movement pop-up menu. Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, choose constrained movement. 6 For Constrained movement, enter values (expressed in pixels) in the Up, Down, Left, and Right fields. Values are relative to the starting position of the layer. To constrain movement within a rectangular region, enter positive values in all four fields. To allow only vertical movement, enter positive values for Up and Down and 0 for Left and Right. To allow only horizontal movement, enter positive values for Left and Right and 0 for Up and Down. 7 Enter values (expressed in pixels) for the drop target in the Left and Top fields. The drop target is the spot to which you want the user to drag the layer. A layer is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top fields. Values are relative to the top left corner of the browser window. Click Get Current Position to automatically populate the fields with the current position of the layer. 8 Enter a value (expressed in pixels) in the Snap if Within field to determine how close the user must get to the drop target before the layer snaps to the target. Larger values make it easier for the user to find the drop target. 9 For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the layer, track the movement of the layer while it is being dragged, and trigger an action when the layer is dropped, click More Options. 10 To specify that a particular area of the layer must be clicked to drag the layer, choose Area Within Layer from the Drag Handle pop-up menu and enter the Left and Top coordinates and the Width and Height of the drag handle. This option is useful when the image inside the layer has an element that suggests dragging, such as a title bar or drawer handle. Do not set this option if you want the user to be able to click anywhere in the layer to drag it. 11 Choose from the following While Dragging options, if desired: Select Bring Layer to Front if the layer should move to the top of the stacking order while it is being dragged. If you select this option, choose whether to leave the layer on top or restore it to its original position in the stacking order from the pop-up menu. Enter JavaScript code or a function name (for example, monitorLayer() ) in the Call JavaScript field to repeatedly execute the code or function while the layer is being dragged. For example, you might want to write a function that monitors the coordinates of the layer and displays hints such as "you're getting warmer" or "you're nowhere near the drop target" in a text field. See Gathering information about the draggable layer . 12 Enter JavaScript code or a function name (for example, evaluateLayerPos() ) in the second Call JavaScript field to execute the code or function when the layer is dropped. Select the Only if Snapped option if the JavaScript should be executed only if the layer has reached the drop target. 13 Click OK. 14 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu. Remember that because layers are not supported by 3.0 browsers, 4.0 browsers, IE 4.0, and Netscape 4.0 are the only relevant options. Note: You cannot attach the Drag Layer action to an object with the onMouseDown event. Gathering information about the draggable layer When you attach the Drag Layer action to an object, Dreamweaver inserts the MM_dragLayer() function into the HEAD of your document. In addition to registering the layer as draggable, this function defines three properties for each draggable layer— MM_LEFTRIGHT, MM_UPDOWN, and MM_SNAPPED —that you can use in your own JavaScript functions to determine the current horizontal position of the layer, the current vertical position of the layer, and whether the layer has reached the drop target. For example, the following function displays the value of the MM_UPDOWN property (the current vertical position of the layer) in a form field called curPosField . (Form fields are useful for displaying continuously updated information because they are dynamic—that is, you can change their contents after the page has finished loading—in both Netscape Navigator and Microsoft Internet Explorer.) function getPos(containingLayer,nestedLayer){ var layerRef = ((navigator.appName=='Netscape')?document.layers[containingLayer].document.layers[nestedLayer]:document.all[nestedLayer]); var curVertPos = layerRef.MM_UPDOWN; document.tracking.curPosField.value = curVertPos; } Instead of displaying the value of MM_UPDOWN or MM_LEFTRIGHT in a form field, you could write a function that displays a message in the form field depending on how close the value is to the drop zone, or you could call another function to show or hide a layer depending on the value. How you react to the value of MM_UPDOWN or MM_LEFTRIGHT is limited only by your imagination and your JavaScript skills. It is especially useful to read the MM_SNAPPED property when you have several layers on the page, all of which must reach their targets before the user can advance to the next page or task. For example, you could write a function to count how many layers have an MM_SNAPPED value of TRUE and call it whenever a layer is dropped. When the snapped count reaches the desired number, you can send the user to the next page or pop up a message of congratulations. If you have attached the Drag Layer action to links within several layers using the onMouseOver event, you must make a minor change to the MM_dragLayer() function to prevent the MM_SNAPPED property of a snapped layer being reset to FALSE if it is passed over with the mouse (this can happen if you have used Drag Layer to create a picture puzzle because the user is likely to pass over snapped pieces while positioning others). MM_dragLayer() was not written to prevent this behavior because it is sometimes desirable (for example, if you want to set multiple drop targets for a single layer). To prevent re-registration of snapped layers: 1 Choose Edit > Find. 2 Select HTML Source from the Find What pop-up menu. 3 Type (!curDrag) in the adjacent text field. 4 Click Find Next. If Dreamweaver asks if you would like to continue searching from the beginning of the document, click Yes. Dreamweaver finds a statement that reads: if (!curDrag) return false; 5 Close the Find dialog box and then modify the statement in the HTML inspector so that it reads: if (!curDrag || curDrag.MM_SNAPPED != null) return false; The two pipes ( || ) mean "or", and curDrag is a variable that represents the layer that is being registered as draggable. In English the statement means "if curDrag is not an object, or if it already has an MM_SNAPPED value, don't bother executing the rest of the function."
<url>html/202.tutorial.fm23.html</url>
<title>Attach behaviors to page elements</title> Attach behaviors to page elements A behavior is a combination of an event and an action. Events are situations that trigger actions. For example, an event called onClick can occur when the user clicks a button, or an event called onMouseOver can occur when the mouse pointer passes over an object. Actions are pieces of pre-written JavaScript code that perform specific tasks, such as opening a browser window, playing a sound, or stopping a Shockwave movie. When attaching a behavior to a page element, you specify both an action and the event that triggers it. Dreamweaver offers several pre-defined actions that you can attach to page elements. Here, you'll apply Swap Image actions to the about , events , and catalog graphics so that the images appear to light up when the mouse passes over them (that is, when the onMouseOver event occurs). For example, when the about image appears on the page normally, it looks like this: After you've defined a behavior that includes the Swap Image action during the onMouseOver event, the about image will look like this (a highlighted version of the original image) when the mouse passes over it: Begin by reopening the home page file you edited earlier in the tutorial, then attach behaviors to specific graphic elements on that page. To reopen the page in Dreamweaver: 1 Move the Site window to the foreground by choosing Window > Site Files. 2 Double-click the listing for the home page file DW2_index.htm to reopen it in the Document window. To attach a behavior to a graphic element on the page: 1 Click to select the about image in the Document window. 2 Choose Window > Behaviors to open the Behavior inspector, which lists all behaviors defined for the selected element (there shouldn't be any yet). 3 Add a new action to the list by clicking the plus (+) button and choosing Swap Image from the pop-up menu. The Swap Image dialog box appears, displaying a list of all images on the page. 4 In the Swap Image dialog box, select the about image from the Images list. This is the original image, which will be replaced with a highlight image when the mouse pointer passes over it. 5 Click Browse next to the Set Source To field and navigate to the image nav_about_roll.gif in the Assets folder. This image replaces the original image during the onMouseOver event. 6 Accept the default options below the Set Source To field. The Preload Images option loads the swap image into the browser's cache as the page loads, so that there is no noticeable pause before the highlight image appears when the user first moves the mouse pointer over the about image. The Restore Images onMouseOut option automatically assigns the Swap Image Restore action to the onMouseOut event for this image. This returns the button to its original state when the user moves the mouse pointer away from the button. 7 Click OK to close the Swap Image dialog box and apply the changes you just made. The Behavior inspector now includes the events and actions you just defined for the image. The onMouseOver event appears with the Swap Image action; above it is the onMouseOut event with the Swap Image Restore action, which was defined for you when you accepted the default options while setting the Swap Image action. 8 Repeat these steps to attach Swap Image actions and onMouseOver events to the events and catalog images: Replace the events image with the swap image nav_events_roll.gif. Replace the catalog image with the swap image nav_catalog_roll.gif. 9 Close the Behavior inspector. Now, see how the behaviors act by previewing the page in a browser. To preview the page in a browser: 1 Click F12 to preview the home page in a browser. 2 Move the mouse pointer over the about , events , and catalog images to see how they change. Close the browser when you're finished previewing the page. 3 Return to Dreamweaver and save your changes by choosing File > Save.
<url>html/202.tutorial.fm24.html</url>
<title>Add a Flash movie</title> Add a Flash movie The completed Olivebranch home page includes a section on weekly specials in which various sale items gradually fade in and out on the right side of the page. The "specials" section actually contains two layers: the first contains the static this week's specials image, and the second (which overlaps the first) contains a Flash movie in which sale items fade in and out. So far, your version of the home page includes only the layer with the static image; here, you'll add the Flash movie in a layer on top of the image layer to recreate the "specials" section as it appears on the completed home page. Because the Flash movie will be in a layer that sits directly on top of the this week's special image layer, you must turn off the Prevent Layer Overlaps option. To allow layers to overlap: 1 Choose Window > Layers to reopen the Layer palette. 2 Deselect the Prevent Overlaps option. Now you'll need to create a new layer to contain the Flash movie. To add a new layer containing a Flash movie: 1 Choose Insert > Layer. 2 Single-click to put the cursor inside the new layer. 3 Choose Insert > Flash and select home_ticker.swf in the Assets folder. The layer expands to the size of the Flash movie, which is represented by a gray rectangle. Next, play the Flash movie in the Document window and align it over the this week's specials layer. To play the Flash movie inside the Document window: Choose View > Plugins > Play All. To align the Flash movie layer over the this week's specials layer: 1 Click the layer's border to select the entire layer and drag it by its handle until it aligns over the this week's specials layer. The Flash movie contains blocks of color and a horizontal line that match the static this week's special graphic. Use these to guide you as you place the Flash movie layer on top of the image layer. Note: The Flash movie may not look the same on all monitor resolutions. If the Flash movie layer doesn't appear to align over the this week's specials layer, choose Window > Properties to open the Property inspector and reset the dimensions of the Flash movie to W 329, H 94. The two layers on top of each other should look like this: 2 Choose File > Save to save the changes you just made.
<url>html/202.tutorial.fm25.html</url>
<title>Check your site</title> Check your site Now that you've made all necessary edits to the partially completed files, review the entire site in a browser to see how it looks. To preview the site in a browser: 1 With the home page still open, press F12 to open the page in a browser. 2 Look at the Flash movie, then click the about , events , and catalog images to view the other pages you edited for the site. 3 When you're finished looking at the site you built, close the browser window, then return to Dreamweaver and choose File > Close to close the home page.
<url>html/202.tutorial.fm3.html</url>
<title>Define a local site</title> Define a local site To get started working with Dreamweaver, you need to create a local site. This site defines the structure of the pages you are creating. A site is a storage location for all the documents and files belonging to a web site. A local site requires a name and a local root folder, which tells Dreamweaver where you plan to store all of the site's files. You should create a local site for each web site you work on. For this tutorial, you'll specify the Olivebranch_site folder as the local site folder. To create a local site: 1 Open the Site Definition dialog box in Dreamweaver as follows: On the Macintosh, choose Site > New Site. In Windows, choose File > New Site. 2 In the Site Definition dialog box, make sure that Local Info is selected in the Category list. 3 Name your site My_Tutorial by typing in the Site Name field. The name of your local site is essentially a nickname that leads directly to the folder that you've defined as your local site. 4 Click the file folder to the right of the Local Root Folder field and navigate to the Olivebranch_site folder, then click Select. Note: The complete path to the Olivebranch_site folder will vary, depending on where you have Dreamweaver 2.0 installed. 5 Click OK, then click Create when asked if you'd like to create a cache file for the site. Caching the files in the Olivebranch_site folder creates a record of existing files so Dreamweaver can quickly update links when you move, rename, or delete a file. The Site window now displays a list of all the folders and files that the local site My_Tutorial contains. The list also acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would in the file finder or explorer on your own computer. 6 Close the Document window for index.htm, but leave the Site window open.
<url>html/202.tutorial.fm4.html</url>
<title>Edit the Olivebranch home page</title> Edit the Olivebranch home page Now that you have a structure set up for the Olivebranch site you're creating, open the incomplete version of the home page. You will be creating links and choosing a background color, a background image, and a title for the page so that it resembles the completed Olivebranch home page. To open the partially completed Olivebranch home page in Dreamweaver: 1 From the Site window, double-click DW2_index.htm. 2 Close the Site window.
<url>html/202.tutorial.fm5.html</url>
<title>Define the background color and image</title> Define the background color and image If you use both an image and a background color, the color appears while the image downloads, creating a more attractive background for users as they wait for the image to download. If the background image has transparent pixels, the background color will show through. To define a background color for the page: 1 Choose Modify > Page Properties to open the Page Properties dialog box. 2 Change the default background color by typing #FFFFCC in the Background field. In this case, you know the exact background color you want. You can also choose a color from the palette or use the eyedropper to choose a color from an object on the page. 3 Click Apply to apply the background color. As soon as you click Apply in the Page Properties dialog box, the page updates in the Document window. Next, specify a background image for the page. To define a background image for the page: 1 Click Browse (Windows) or Choose (Macintosh) next to the Background Image field. 2 Select home_bg.jpg in the Assets folder of the Olivebranch_site folder. 3 Click Apply to add the background image to the page. 4 Leave the Page Properties dialog box open for now. With the background color and image in place, the home page you're working on should now look like this:
<url>html/202.tutorial.fm6.html</url>
<title>Define the title of the page</title> Define the title of the page The title of an HTML page helps users keep track of what they're viewing as they browse; it also identifies the page in history and bookmark lists. If you don't title a page, it will appear in the browser window and bookmark and history lists as Untitled Document . To define the title of a page: 1 In the Title field of the Page Properties dialog box, type Olivebranch Gourmet Foods to name the home page, then click OK. The title bar updates to reflect the name you give the file. 2 Choose File > Save to save the changes you've made.
<url>html/202.tutorial.fm7.html</url>
<title>Create a site map</title> Create a site map A site map provides a high-level visual representation of the structure of a local site. You can also use the site map to add new files to the site, to add, remove, and change links, and to create a BMP or PICT image of the site that you can export to and print from an image editing application. The home page for a site always appears at the top of a site map; below the home page you can see which files the home page links to. If the folder you define as the site root contains a file called index.htm, Dreamweaver will automatically use it as the home page at the base of the site map; because your My_Tutorial site's home page is actually called DW2_index.htm, you'll redefine the home page while you customize the appearance of the site map. To create a site map: In the Site window, press and hold the Site Map icon in the upper left corner and choose Map and Files from the pop-up menu. The Site window now appears with two views of your local site: on the left is a site map tree representing the structure of the completed Olivebranch site (with index.htm as the home page), and on the right is the file list you used previously. Now redefine the home page for the site to use the tutorial version of the home page instead of the completed version. To redefine the home page and customize the site map's appearance: 1 Open the Site Definition dialog box as follows: In Windows, choose View > Layout from the Site window menu bar. On the Macintosh, choose Site > Site Map View > Layout. 2 Select Site Map Layout in the Category list of the Site Definition dialog box. 3 Specify the site's new home page by clicking the file folder next to the Home Page field and navigating to DW2_index.htm in the Olivebranch_site folder of the Tutorial folder. 4 Set Number of Columns to 3. 5 Click OK to close the Site Definition dialog box and return to the Site window. The Site Map updates to reflect the change, with the tutorial version of the home page now at the hub of the site map. Right now, the tutorial version of the home page contains only one link. You'll be adding more links to the tutorial home page in a moment. 6 Leave the Site window open for now, so you can see how the site map updates as you add links to the home page.
<url>html/202.tutorial.fm8.html</url>
<title>Create links</title> Create links Images in the left column of the home page guide visitors through the Olivebranch site. The top image, labelled about , already links to the appropriate page on the site. You'll add links to two other graphics, events and catalog , so that they link to other pages on the site as well. (You won't be working with the gift basket image.) First, add a link from the events graphic to the Events page using the Property inspector. To create a link using the Property inspector: 1 Click the title bar of the Document window that contains DW2_index.htm to make it active, or select the file name from the Window menu. 2 Click the events image to select it in the Document window. Note: Don't double-click the image, or Dreamweaver will prompt you to choose another file to replace the image with. 3 Choose Window > Properties to open the Property inspector if it isn't already open. The Property inspector displays information about the selected image. 4 In the Property inspector, click the file folder next to the empty Link field. 5 In the Select HTML File dialog box, browse to the Olivebranch_site folder, choose DW2_events_main.htm, and click Select. The file you are linking to appears in the Link field of the Property inspector. Now you'll add a link to the catalog graphic using the Property inspector and the Site window. To create a link using the Property inspector and the Site window: 1 Click the title bar of the Site window to make it active, or choose Window > Site Files. 2 Resize your Document window, if necessary, so that you can position the Left side of the Document window and the Site Window side by side. 3 Click the catalog image to select it in the Document window. 4 In the Property inspector, drag the point-to-file icon (located next to the Link field) to the Site window and point to the file DW2_cat_main_index.htm. The full path to the file appears in the Link field in the Property inspector for the catalog image. As soon as you release the mouse button, the site map updates to reflect the link you just added. A plus sign (Windows) or expander arrow (Macintosh) next to any item in the site map indicates there are more items associated with that item. Click the plus sign or expander arrow to expand the tree to display the associated items; click the minus sign (-) or expander arrow to collapse the site map view. 5 Close the Property inspector, but leave the Site window open for now. 6 Choose File > Save to save all the changes you've made to the home page. 7 Choose File > Close to close the page.
<url>html/202.tutorial.fm9.html</url>
<title>Create a complex page layout</title> Create a complex page layout As with the Olivebranch home page, the About Us page has a related tutorial file that has already been started for you. You'll finish filling in the About Us tutorial page, matching the layout of the completed version. You'll begin by opening the completed version of the About Us page in a browser so you can refer to it while working. To preview the completed About Us page in a browser: 1 Choose File > Open and select about_main.htm in the Olivebranch_site folder within the Tutorial folder. Do not edit this page, since it belongs to the completed site. 2 Choose File > Preview in Browser and select a 4.0 browser. Leave the browser window open in the background to refer to later. 3 In Dreamweaver, choose File > Close to close the Document window containing the completed About Us page. Now, open the partially completed About Us tutorial file for editing in Dreamweaver. To open the partially completed About Us file in Dreamweaver: In the Dreamweaver Site window, double-click the file DW2_about_main.htm.
<url>html/203.gettingstarted.fm1.html</url>
<title>Getting Started overview</title> Getting Started overview Getting started in Dreamweaver is as easy as opening an HTML document or creating a new one. But to get the most out of your Dreamweaver experience, it is useful to understand the basic concepts behind the Dreamweaver workspace and how to choose options that best fit your style of working. Click Show Me to see an animated introduction to getting started in the Dreamweaver workspace.
<url>html/216.interactivity.fm46.html</url>
<title>Netscape plugin properties</title> Netscape plugin properties After inserting a Netscape plugin, use the Property inspector to set parameters. Double-click a Netscape plugin to view the following properties in the Property inspector. See also Adding movies, applets, and other multimedia elements . The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Plugin Specifies a name to identify the plugin for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify, in pixels, the width and height allocated to the object on the page. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. Src Specifies the source data file. Enter a file name, or click the folder icon and choose a file. Plg Url Specifies the URL of the PLUGINSPAGE attribute. Enter the complete URL of the site where users can download the plugin. If the user viewing your page does not have the plugin, the browser tries to download it from this URL. Align Determines how the object is aligned on the page. See Aligning elements for a description of each option. Alt Specifies alternative content to be displayed if the user's browser does not support the EMBED tag. If you choose an image, it is rendered using the NOEMBED tag. If you type in text, it is rendered with the ALT attribute of the EMBED tag. V Space and H Space Specify the amount of white space in pixels above, below, and on either side of the plugin. Borders Specifies the width of the border around the plugin. Parameters Opens a dialog box for entering additional parameters to pass to the Netscape plugin. Many plugins respond to special parameters. The Flash plugin, for example, includes parameters for BGCOLOR , SALIGN , and SCALE . See About parameters .
<url>html/216.interactivity.fm47.html</url>
<title>Playing plugins in the Document window</title> Playing plugins in the Document window You can preview movies and animations that rely on plugins—that is, elements that use the EMBED tag—directly in the Document window. (It is not possible to view movies or animations that rely on ActiveX controls.) 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 multimedia element. To play movies, the proper plugins must be installed on your machine. Dreamweaver automatically searches for all installed plugins on startup, looking first in the Configuration/Plugins folder and then in the plugin folders of all installed browsers. To play plugin content in the Document window: 1 Insert one or more multimedia elements by choosing Insert > Shockwave, Insert > Flash, or Insert > Plugin. 2 Choose from one of the following options: Select one of the multimedia elements you have inserted and choose View > Plugin > Play. Choose View > Plugin > Play All to play all of the multimedia elements on the page that rely on plugins. To stop playing plugin content: Select a multimedia element and choose View > Plugin > Stop, or choose View > Plugin > Stop All to stop all plugin content from playing. Troubleshooting If, after you follow the steps to play plugin content in the Document window, some of the plugin content does not play, try the following: Make sure that the associated plugin is installed on your machine, and that the plugin version is compatible with the movie version. Open the file called badplugins.cfg in a text editor and look to see if the plugin in question is listed. The badplugins.cfg file keeps track of plugins that will crash Dreamweaver or cause other serious problems. (If you experience problems with a particular plugin, consider adding it to this file.) Check that you have enough memory (and on the Macintosh, that enough memory is allocated to Dreamweaver). Some plugins require an additional 2 MB to 5 MB of memory to run.
<url>html/216.interactivity.fm48.html</url>
<title>ActiveX properties</title> ActiveX properties After inserting an ActiveX object, use the Property inspector to set other parameters. There is not a widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you're using to find out which parameter to use. Click Parameters in the Property inspector to enter values for properties that don't appear in the Property inspector. Double-click an ActiveX object to view the properties in the Property inspector. See also Adding movies, applets, and other multimedia elements . The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. ActiveX Specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify the width and height of the object in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. Class ID Identifies the ActiveX control to the browser. Enter a value yourself or choose one from the pop-up menu. When the page is loaded, the browser uses the class ID to locate the ActiveX control required for the ActiveX object associated with the page. If the browser doesn't locate the specified ActiveX control, it attempts to download it from the location specified in Base. Base Specifies the URL containing the ActiveX control. Internet Explorer downloads the ActiveX control from this location if it has not been installed in the user's system. Embed Makes Dreamweaver add an EMBED tag within the OBJECT tag for the ActiveX control. If the ActiveX control has a Netscape plugin equivalent, the EMBED tag activates the plugin. Dreamweaver assigns the values you've entered as ActiveX properties to their Netscape plugin equivalents. Src Defines the data file to be used for a Netscape plugin if the Embed option is turned on. If you don't enter a value, Dreamweaver attempts to determine the value from the ActiveX properties entered already. Align Determines how the object is aligned on the page. See Aligning elements for a description of each option. Alt Img Specifies an image to be displayed if the browser doesn't support the OBJECT tag. V Space and H Space Specify the amount of white space in pixels above, below, and on either side of the object. Data Specifies a data file for the ActiveX control to load. Many ActiveX controls, such as Shockwave and RealPlayer, do not use this parameter. ID Defines the optional ActiveX ID parameter. This parameter is most often used to pass information between ActiveX controls. Borders Specifies the width of the border around the object. Parameters Opens a dialog box for entering additional parameters to pass to the ActiveX object. Many ActiveX controls respond to special parameters. See About parameters .
<url>html/216.interactivity.fm49.html</url>
<title>Java applet properties</title> Java applet properties After inserting a Java applet, use the Property inspector to set parameters. Double-click a Java applet to view its properties in the Property inspector. See also Adding movies, applets, and other multimedia elements . The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Applet Specifies a name to identify the applet for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify the width and height of the applet in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. Code Specifies the content file of the applet. Enter a file name, or click the folder icon and choose a file. Base Identifies the folder containing the selected applet. When you choose an applet, this field is filled automatically. Align Determines how the object is aligned on the page. See Aligning elements for a description of each option. Alt Specifies alternative content (usually an image) to be displayed if the user's browser doesn't support Java applets or has Java disabled. If you type in text, Dreamweaver renders the text with the ALT attribute of the APPLET tag. If you choose an image, Dreamweaver inserts an IMG tag between the opening and closing APPLET tags. Note: To specify alternative content that is viewable in both Netscape Navigator (with Java off) and Lynx (a text-based browser), select an image and then manually add an ALT attribute to the IMG tag in the HTML inspector. V Space and H Space Specify the amount of white space in pixels above, below, and on either side of the applet. Parameters Opens a dialog box for entering additional parameters to pass to the applet. Many applets respond to special parameters. See About parameters .
<url>html/216.interactivity.fm5.html</url>
<title>Creating new actions</title> Creating new actions Actions are JavaScript elements. If you are proficient with JavaScript, you can write new actions and make them appear in the Actions pop-up menu in the Behavior inspector.
<url>html/216.interactivity.fm50.html</url>
<title>About parameters</title> About parameters Use the Parameters dialog box to enter values for special parameters defined for Shockwave movies, ActiveX controls, Netscape plugins, and Java Applets. See the documentation for the object you're using for information on the parameters it requires. To enter a value for a parameter: 1 Click the plus (+) button. 2 Enter the name of the parameter in the Parameter column. 3 Enter the value of the parameter in the Value column. To remove parameters: Select a parameter and press Delete. To reorder parameters: Use the up and down arrow buttons.
<url>html/216.interactivity.fm6.html</url>
<title>Behavior inspector</title> Behavior inspector Use the Behavior inspector to attach JavaScript behaviors to objects and to modify parameters of previously attached behaviors. Behaviors are listed alphabetically by event. If there are several actions for the same event, the actions appear in the order they will execute. The tags controlling the current selection appear at the top of the inspector. To open the Behavior inspector, choose Window > Behaviors or click the Behavior button in the Launcher. See also Behaviors overview . Actions (+) Displays a list of actions that can occur. Choosing an action causes a parameters dialog box to appear. Delete (-) Removes the current action from the Action list. Show Events For Specifies the browsers in which the current behavior should work. The selection you make from this menu determines which events appear on the Events pop-up menu. Events Displays all the events that can trigger the action. Different events appear depending on the object selected. If the expected events don't appear, make sure that the correct object is selected. Use the tag selector at the bottom left of the Document window to select a specific tag. Note: The Events pop-up menu appears only after you have selected an action. Different browsers recognize different events for various objects. Choose the browsers in which you want the behavior to work from the Show Events For pop-up menu. Only the events recognized by the selected browsers appear on the Events menu. Up and Down arrows Move the selected action up or down in the behavior list. Actions are executed in the specified order.
<url>html/216.interactivity.fm7.html</url>
<title>Downloading and installing third-party behaviors</title> Downloading and installing third-party behaviors One of the most interesting features of Dreamweaver is its extensibility—that is, it offers users who are proficient in JavaScript the opportunity to write their own objects, behaviors, commands, and property inspectors. Many of these users have chosen to share their development efforts with others by submitting files to the Extensibility Exchange on the Dreamweaver website ( http://www.dreamweaver.com/). Instructions for downloading these extensibility files are available in the Extensibility Exchange. To install a third-party behavior in your copy of Dreamweaver: 1 Extract the behavior file or files from the downloaded archive with an unstuffing or unzipping tool. For example, WinZip (Windows) or ZipIt (Macintosh) can open the zip archives that are available in the Extensibility Exchange. 2 Drag the extracted files to the Configuration/Behaviors/Actions folder in the Dreamweaver application folder. 3 Restart Dreamweaver.
<url>html/216.interactivity.fm8.html</url>
<title>Using the behavior actions that ship with Dreamweaver</title> Using the behavior actions that ship with Dreamweaver The behavior actions included with Dreamweaver have been written to work in all 4.0 browsers. Some actions do not work in older browsers. Refer to the following table for details on how actions work in specific browsers. For an explanation of what each action does and how to choose options for it, click the action name. Macintosh Windows Action Netscape 2.x Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01 Netscape 2.x Netscape 3.x Internet Explorer 3.0 Internet Explorer 3.01 Call JavaScript Change Property OK; fails without error for objects in layers OK; fails without error for objects in layers Fails without error OK OK; fails without error for objects in layers OK; fails without error for objects in layers OK OK Check Browser OK OK OK OK OK OK OK OK Check Plugin OK OK Fails without error OK OK OK OK OK Control Shockwave or Flash Fails without error OK Fails without error Fails without error Fails without error OK Fails without error Fails without error Control Sound Error OK Fails without error Fails without error Fails without error OK Fails without error Fails without error Display Status Message Fails without error OK Fails without error OK Fails without error OK OK OK Drag Layer Fails without error Fails without error Fails without error Fails without error Fails without error Fails without error Fails without error Fails without error Go To URL Go To URL in a frame works, but Go To URL in main window fails without error if applied to a link. OK Fails without error OK OK OK OK OK Open Browser Window Fails without error OK Fails without error OK OK OK OK OK Popup Message OK OK Fails without error OK OK OK OK OK Preload Images Fails without error OK Fails without error OK Fails without error OK Fails without error Fails without error Show-Hide Layers Fails without error Fails without error Fails without error Fails without error Fails without error Fails without error Fails without error Fails without error Swap Image Fails without error OK Fails without error OK Fails without error OK Fails without error Fails without error Swap Image Restore Fails without error OK Fails without error OK Fails without error OK Fails without error Fails without error Validate Form Fails without error OK Fails without error OK Fails without error OK Fails without error Fails without error Play Timeline and Stop Timeline Play Timeline and Stop Timeline Go To Timeline Frame Error Image source animation and invoking behaviors works, but layer animation fails without error. Fails without error Fails without error Error Image source animation and invoking behaviors works, but layer animation fails without error. Fails without error Fails without error
<url>html/216.interactivity.fm9.html</url>
<title>Call JavaScript</title> Call JavaScript The Call JavaScript action lets you use the Behavior inspector to specify that a custom function or line of JavaScript code should be executed when an event occurs. To use the Call JavaScript action: 1 Follow steps 1 through 3 of the procedure in Attaching a behavior . 2 Select Call JavaScript from the Actions pop-up menu. 3 Type the exact JavaScript to be executed or the name of a function. For example, to create a Back button you might type if (history.length > 0){history.back()} . If you have encapsulated your code in a function, type only the function name (for example, goBack() ). 4 Click OK. 5 Check that the default event is the one you want. If it isn't, select another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/216.interactivity.fm36.html</url>
<title>Using behaviors in timelines</title> Using behaviors in timelines Place behaviors in timelines to make them run at a certain frame in the timeline. To place a behavior in a timeline: 1 Double-click a frame in the Behaviors channel in the Timeline inspector. 2 Use the Behavior inspector to define the behavior. The only event that can trigger an action in a timeline is the animation's reaching a certain frame number; an onFrame7 event, for example. The behavior can affect any object on the page, not just objects in the timeline. Preview the timeline in a browser to see the behavior working. You cannot preview behaviors in Dreamweaver.
<url>html/216.interactivity.fm37.html</url>
<title>Behavior actions for controlling timelines</title> Behavior actions for controlling timelines Attach the behavior actions listed here to a link, button, or another object to control timelines. To create interesting effects, you can place behaviors containing these actions in the Behavior channel. For example, you can make a timeline stop itself. See also Behaviors overview . Go To Timeline Frame Causes the timeline to jump to a certain frame. The Loop checkbox in the Timeline inspector adds the Go To Timeline Frame action after the last frame of the animation, causing it to go to frame 1 and start the animation again. Play Timeline Plays a timeline from the first frame. The Autoplay checkbox in the Timeline inspector executes the Play Timeline action when the page loads. Stop Timeline Stops a timeline.
<url>html/216.interactivity.fm38.html</url>
<title>Renaming timelines</title> Renaming timelines To rename the timeline displayed in the Timeline inspector, choose Modify > Timeline > Rename and enter a new name, or enter a new name in the Timeline Name pop-up menu. If your document contains the Play Timeline behavior action (for example, if it contains a button that the user must click to start the timeline), you must edit the behavior to reflect the new timeline name.
<url>html/216.interactivity.fm39.html</url>
<title>Animation tips for timelines</title> Animation tips for timelines The following suggestions can improve the performance of your animations and make creating animations easier: Show and hide layers instead of changing the source file for multiple image animations. Switching the source file of an image can slow down the animation because the new image must be downloaded. There will be no noticeable pauses or missing images if all images are downloaded at once in hidden layers before the animation runs. Extend animation bars to create smoother motion. If animation looks choppy and images jump between positions, drag the end frame of the layer's animation bar to extend the motion over more frames. Making the animation bar longer creates more data points between the start and end point of the movement and also makes the object move more slowly. Try increasing the number of frames per second (fps) to improve speed, but be aware that most browsers running on average systems cannot animate much faster than 15 fps. Test the animation on different systems with different browsers to find the best settings. Don't animate large bitmaps. Improve animation speed by not moving large images. Instead, create composites and move small parts of the image. For example, show a car moving by animating only the wheels. Create simple animations. Do not create animations that demand more than current browsers can provide. Browsers always play every frame in a timeline animation, even when system or Internet performance decreases.
<url>html/216.interactivity.fm4.html</url>
<title>Changing a behavior</title> Changing a behavior After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change parameters for actions. To change a behavior: 1 Select an object with a behavior attached. 2 Choose Window > Behaviors to open the Behavior inspector. Behaviors appear in the inspector alphabetically by event. If there are several actions for the same event, the actions appear in the order they will execute. 3 Choose from the following options: To delete a behavior, select it and click the minus button or press Delete. To change parameters for an action, double-click the behavior (or select it and press Enter), change parameters in the dialog box, and then click OK. To change the order of actions for a given event, select the behavior and click the Up or Down button.
<url>html/216.interactivity.fm40.html</url>
<title>Adding movies, applets, and other multimedia elements</title> Adding movies, applets, and other multimedia elements To insert a Java applet, Shockwave movie, Flash Player movie, or any other ActiveX control or Netscape plugin in a page, place the cursor where you want the object to be and then click the appropriate button on the Object palette. The Object palette buttons insert the necessary HTML to make the object appear on the page. Use the Property inspector to specify the source file, dimensions, and other parameters. Note: There is not a widely accepted standard for identifying source files for ActiveX controls. See the documentation for the ActiveX control you're using to find out which parameters to use.
<url>html/216.interactivity.fm41.html</url>
<title>Inserting Shockwave movies</title> Inserting Shockwave movies Shockwave, the Macromedia standard for interactive multimedia on the web, is a compressed format that allows multimedia files 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 plugin and an ActiveX control. When you insert a Shockwave movie, Dreamweaver uses both the OBJECT tag (for the ActiveX control) and the EMBED tag (for the plugin) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the OBJECT and EMBED tags. To insert a Shockwave movie: 1 Place the cursor where you want to insert a Shockwave movie. 2 Click the Shockwave button on the Object palette. 3 In the dialog box that appears, select a movie file. 4 In the Property inspector, enter the width and height of the movie in the W and H boxes. These are the only required properties. See Shockwave properties for more information on the other properties.
<url>html/216.interactivity.fm42.html</url>
<title>Shockwave properties</title> Shockwave properties To ensure the best results in both Internet Explorer and Netscape, Dreamweaver inserts Shockwave movies using both the OBJECT and EMBED tags. ( OBJECT is the tag defined by Microsoft for ActiveX controls; EMBED is the tag defined by Netscape for plugins.) Double-click a Shockwave movie to view the properties in the Property inspector. See also Inserting Shockwave movies . The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Name Specifies a name to identify the movie for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify the width and height of the movie in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. File Specifies the path to the Shockwave movie file. Enter a value or click the folder to the right of the box to browse. Tag Determines the tags used to identify the Shockwave movie. You can choose OBJECT and EMBED or either tag separately. The default value, OBJECT and EMBED , is recommended. Align Determines how the movie is aligned on the page. See Aligning elements for a description of each option. BgColor Specifies a background color for the movie area. This color also appears while the movie is not playing (while loading and after playing). ID Defines the optional ActiveX ID parameter. This parameter is most often used to pass information between ActiveX controls. Borders Specifies the width of the border around the movie. V Space and H Space Specify the number of pixels of white space above and below and on both sides of the movie. Alt Image (OBJECT only) Specifies an image to be displayed if the user's browser does not support ActiveX controls. Parameters Opens a dialog box in which to enter additional parameters to pass to the Shockwave movie. The Shockwave movie must be authored to receive these parameters. See About parameters .
<url>html/216.interactivity.fm43.html</url>
<title>Inserting Flash Player movies</title> Inserting Flash Player movies Macromedia's Flash technology is the premier solution for the delivery of vector-based graphics and animations. The Flash Player is available as both a Netscape plugin and an ActiveX control for Internet Explorer, and it is built in to the latest versions of Netscape Navigator, Windows 98, and America Online. When you insert a Flash Player movie, Dreamweaver uses both the OBJECT tag (defined by Microsoft for ActiveX controls) and the EMBED tag (defined by Netscape) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the OBJECT and EMBED tags. To insert a Flash Player movie: 1 Place the cursor where you want to insert the movie. 2 Click the Flash Player button in the Object palette. 3 In the dialog box that appears, select a movie file. 4 In the Property inspector, enter the width and height of the movie in the W and H boxes. These are the only required properties. See Flash Player properties for more information on the other properties.
<url>html/216.interactivity.fm44.html</url>
<title>Flash Player properties</title> Flash Player properties To ensure the best results in both Internet Explorer and Netscape, Dreamweaver inserts Flash Player movies using both the OBJECT and EMBED tags. ( OBJECT is the tag defined by Microsoft for ActiveX controls; EMBED is the tag defined by Netscape for plugins.) Double-click a Flash Player movie to view the following properties in the Property inspector. See also Inserting Flash Player movies . The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Name Specifies a name to identify the movie for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify the width and height of the movie in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent's value). The abbreviations must follow the value without a space: for example, 3mm. File Specifies the path to the Flash Player movie file. Enter a value or click the folder to the right of the box to browse. Tag Determines the tags used to identify the movie. You can choose OBJECT and EMBED , or either tag separately. The default value, OBJECT and EMBED , is recommended. Align Determines how the movie is aligned on the page. See Aligning elements for a description of each option. BgColor Specifies a background color for the movie area. This color also appears while the movie is not playing (while loading and after playing). ID Defines the optional ActiveX ID parameter. This parameter is most often used to pass information between ActiveX controls. Borders Specifies the width of the border around the movie. V Space and H Space Specify the number of pixels of white space above and below and on both sides of the movie. Alt Image (OBJECT only) Specifies an image to be displayed if the user's browser does not support ActiveX controls. Parameters Opens a dialog box for entering additional parameters to pass to the movie. The movie must be authored to receive these parameters. See About parameters . Quality Sets the QUALITY parameter for the OBJECT and EMBED tags that run the movie. See the Flash documentation for a description of the options. The choices are Low, Auto Low, Auto High, and High. Scale Sets the SCALE parameter for the OBJECT and EMBED tags that run the movie. See the Flash documentation for a description of the options. Autoplay Plays the movie automatically when the page loads. Loop Makes the movie loop indefinitely.
<url>html/216.interactivity.fm45.html</url>
<title>Inserting and editing Aftershock objects</title> Inserting and editing Aftershock objects Aftershock is a Macromedia utility that generates all of the HTML code necessary to run Shockwave or Flash Player movies. You can open files created by Aftershock in Dreamweaver and then paste the contents into other Dreamweaver documents. To edit Aftershock objects, install Aftershock in your system and then launch Aftershock from the Property inspector. To insert Aftershock objects in Dreamweaver: 1 In Dreamweaver, open an HTML file created by Aftershock. Aftershock elements appear as noneditable objects in Dreamweaver. If an object includes a preview image, Dreamweaver displays it. 2 Copy the contents of the file into another Dreamweaver document. To edit an Aftershock object: 1 Double-click an Aftershock object to open the Property inspector. 2 Click Launch Aftershock. 3 Edit the file in Aftershock, save the changes, and exit the utility. When you exit Aftershock, Dreamweaver updates the content of the Aftershock object with the new information.
<url>html/208.roundtrip.fm11.html</url>
<title>Using an external text editor with Dreamweaver</title> Using an external text editor with Dreamweaver You can launch your preferred external text editor from Dreamweaver to edit the source HTML for the current document and then switch back to Dreamweaver to continue editing graphically. Dreamweaver detects any changes that have been saved to the document externally and prompts you to reload the document upon returning. To choose an external editor: 1 Choose Edit > Preferences. 2 Select External Editors from the Category list on the left. 3 Click the Browse button next to the HTML box to choose a text editor. 4 From the Synchronize External Files option, specify what you want Dreamweaver to do when it detects that changes have been made externally to a document open in Dreamweaver. 5 From the On Launch option, specify how Dreamweaver treats documents before launching the editor. To launch the external editor: Select Edit > Launch External Editor or click External Editor in the title bar of the HTML window.
<url>html/208.roundtrip.fm12.html</url>
<title>External Editors preferences</title> External Editors preferences Use the External Editors preferences to set your preferred applications for editing HTML and images. See Using an external text editor with Dreamweaver or Using an external image editor for more information on setting these preferences.
<url>html/208.roundtrip.fm13.html</url>
<title>Using BBEdit with Dreamweaver (Macintosh only)</title> Using BBEdit with Dreamweaver (Macintosh only) 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, the two programs track the current selection; for example, you can make a selection in Dreamweaver and then switch to BBEdit where the same element will be selected. You can disable BBEdit integration if you prefer working with an older version of BBEdit or a different HTML text editor. See Using an external text editor with Dreamweaver . Selections are not tracked if BBEdit integration is turned off. To use BBEdit with Dreamweaver: 1 Do one of the following: Choose Edit > Launch BBEdit. Click BBEdit in the top right corner of the HTML inspector. 2 Make the desired edits in BBEdit. 3 Click the Dreamweaver button on the HTML Tools palette in BBEdit. To disable BBEdit integration: 1 Choose Edit > Preferences. 2 Select External Editors from the Category list on the left. 3 Turn off Enable BBEdit Integration and click OK.
<url>html/208.roundtrip.fm14.html</url>
<title>Editing Cold Fusion and Active Server files in Dreamweaver</title> Editing Cold Fusion and Active Server files in Dreamweaver Before opening a Cold Fusion or Active Server Page file in Dreamweaver, choose Edit > Preferences, then select HTML Rewriting and turn off Fix Invalidly Nested and Unclosed Tags and Remove Extra Closing Tags. Dreamweaver displays icons to identify blocks of Cold Fusion Markup Language (CFML) or Active Server Page (ASP) code in the Document window whenever possible. To edit a block of ASP code from the Document window: 1 Click the yellow ASP marker to select it. 2 In the Property inspector, click the Edit button. 3 Edit the ASP code in the dialog box that appears and then click OK. To edit a block of CFML code from the Document window: 1 Click the CFML marker to select it. 2 In the Property inspector, do one of the following: Click the Attributes button to edit the tag's existing attributes and their values or to add new ones. Click the Content button to edit the content that appears between the opening and closing CFML tags. If the selected tag is empty (that is, it has no closing tag), the Content button is disabled. If you do not see markers where you know ASP or CFML code exists, first make sure that View > Invisible Elements is on. If it is on and the icons are still not visible, Dreamweaver does not recognize the code as CFML or ASP. This can happen when conditionals are inserted into HTML tags, as in the following ASP code: <input type="checkbox" name="month" value="October" <% if month="October" then %>checked<% end if %> > To edit CFML or ASP code when a marker does not appear: 1 In the Document window, position the cursor near where you know the CFML or ASP code exists. 2 Choose Window > HTML to open the HTML inspector. 3 Click the title bar or status bar of the HTML inspector. Do not click in the middle of the inspector or you will move the cursor away from the CFML or ASP code you want to edit. 4 Edit the code directly in the HTML inspector. 5 Press F10 to close the HTML inspector and return to the Document window. For information about processing CFML or ASP code and viewing the results in the Document window, see Extending Dreamweaver overview .
<url>html/208.roundtrip.fm15.html</url>
<title>Inserting scripts</title> Inserting scripts You can enter JavaScript and VBScript in the Document window without having to use the HTML inspector. To display script markers in the document window, choose View > Invisible Elements. See also Invisible Elements preferences . To insert a script: 1 Place the cursor where you want the script. 2 Click the Script button on the Object palette or choose Insert > Script. 3 In the dialog box that appears, choose the scripting language from the pop-up menu. If you are using JavaScript and are unsure of the version, choose JavaScript rather than JavaScript1.1 or JavaScript1.2. 4 Enter the code that should appear between the script tags. To link to an external script file, click OK without typing anything and then add the reference to the source file in the Property inspector (type the file name in Source box, or click the folder icon to browse to and select the file). To edit the script: 1 Select the Script icon. 2 In the Property inspector, click Edit.
<url>html/208.roundtrip.fm16.html</url>
<title>Script properties</title> Script properties The following properties appear in the Property inspector when you have a script marker selected: Language Specifies either JavaScript or VBScript as the language of the script. Source Specifies an externally linked script file. Type the path or click the folder to choose the file. Edit Opens the Script window, enabling you to make changes to your script.
<url>html/208.roundtrip.fm17.html</url>
<title>Inserting comments</title> Inserting comments A comment is descriptive text that you insert in the HTML to explain the code or to provide other information. A comment does not affect the appearance of the document in a browser. See also Invisible Elements preferences . To insert a comment: 1 Place the cursor where you want the comment. 2 Click the Comment button on the Object palette or choose Insert > Comment. To display comment markers in the Document window, choose View > Invisible Elements. To enter comment text: 1 Select the Comments icon. 2 Enter text in the Property inspector. Creating a comment generates the following HTML code: <!-- Comment text-->
<url>html/208.roundtrip.fm2.html</url>
<title>HTML inspector</title> HTML inspector The HTML inspector displays the source code for the current document. Tags are color coded according to the settings in the HTML Colors preferences . As you add or change content in the Document window, Dreamweaver immediately displays the changes in the HTML inspector. This makes the HTML inspector a useful tool for learning HTML if you don't already know it, or for reminding yourself of proper syntax or values for specific tags or attributes. Changes you make in the HTML inspector appear in the Document window only when you click away from the HTML inspector. Dreamweaver never rewrites HTML that you type directly in the HTML inspector; if you enter invalid HTML here, Dreamweaver highlights the tags as invalid markup items when you activate the Document window. To open the HTML inspector, do one of the following: Choose Window > HTML. Click the HTML inspector icon in the Launcher or in the Mini-Launcher (in the lower right corner of the Document window). Press F10. To toggle between the document window and the HTML inspector: Press Control-Tab (Windows) or Command-Tab (Macintosh).
<url>html/208.roundtrip.fm3.html</url>
<title>Setting HTML source format controls</title> Setting HTML source format controls Dreamweaver has the following controls for formatting HTML source code: HTML Rewriting preferences Control what changes, if any, Dreamweaver makes to your HTML source code when you open an HTML document. See HTML Rewriting preferences . HTML Format preferences Control common HTML formatting options, such as line length and indentation. See HTML Format preferences . The SourceFormat.profile gives you the greatest degree of control over exactly how Dreamweaver writes HTML. See Editing the HTML source formatting profile . HTML Colors preferences Control how HTML tags (and the text between them) are color coded in the HTML inspector. See HTML Colors preferences . Fonts/Encoding preferences Let you specify the font in which your HTML source code appears in the HTML inspector. See Fonts/Encoding preferences .
<url>html/208.roundtrip.fm4.html</url>
<title>HTML Rewriting preferences</title> HTML Rewriting preferences The following preferences affect imported HTML documents. They have no effect when you edit HTML in the HTML inspector. If you turn off these rewriting options, Dreamweaver displays invalid markup items in the Document window for HTML that it would have rewritten. Fix Invalidly Nested and Unclosed Tags Rewrites invalidly nested, or overlapping, tags. For example, <B><I>text</B></I> is rewritten as <B><I>text</I></B> . This option also inserts closing quotation marks and closing brackets if they are missing. Remove Extra Closing Tags Deletes closing tags that have no corresponding opening tag. Warn when Fixing or Removing Tags Displays a summary of technically invalid HTML that Dreamweaver attempted to correct. The summary notes the location of the problem (using line and column numbers) so that you can find the correction and ensure it is rendering as intended.
<url>html/208.roundtrip.fm5.html</url>
<title>HTML Format preferences</title> HTML Format preferences Use the following HTML Format preferences to control HTML formatting such as indent size, line length, and the case of element and attribute names as you create documents. See Editing the HTML source formatting profile for information on additional HTML formatting controls. To apply HTML formatting settings to existing HTML documents, use the Apply Source Formatting command. See Formatting the HTML source code in existing documents . Indent Turns on indention of all tags marked INDENT in the SourceFormat.profile. See Editing the HTML source formatting profile . Use Specifies whether to indent using spaces or tabs. Table Rows and Columns Automatically indents TR and TD tags to make reading table code easier. The Indent option must be checked for this option to work. Frames and Framesets Automatically indents FRAME and nested FRAMESET tags to make reading frameset files easier. The Indent option must be checked for this option to work. Indent Size Determines the size of indents (in spaces if Use is set to spaces, or in tabs if Use is set to tabs). For example, if Use is set to tabs and Indent Size is set to 4, tags will be indented using four tabs. Tab Size Determines the size of tabs (measured in character spaces). Note: If Indent Size is not a multiple of Tab size and Use is set to tabs, tags are indented using a combination of tabs and space characters. Autowrap Wraps lines (with a hard return) once they reach the specified column width. By contrast, the Wrap checkbox in the HTML inspector adds a soft return for lines that extend beyond the width of the window. Line Breaks Is useful for specifying the type of remote server (Windows, Macintosh, or Unix) to which you'll post your files. Choosing the correct type of line break characters ensures that your HTML source code appears correctly when viewed on the remote server. This setting is also useful when you are working with an external text editor that recognizes only certain kinds of line breaks. For example, use CR LF (Windows) if Notepad is your external editor, and CR (Macintosh) if SimpleText is your external editor. Case for Tags and Case for Attributes Control the capitalization of element and attribute names. Override Case Of Specifies whether to convert element and attribute names to the case you specified in the previous options when opening an existing HTML document. For example, if you always want to see element names in lowercase, specify lowercase element names and turn on this option. When you import a document that contains element names that are in uppercase, Dreamweaver converts them all to lowercase. Centering Specifies whether elements should be centered using DIV ALIGN="center" or CENTER . Both are part of the HTML 4.0 Transitional specification, but CENTER is supported by a wider range of browsers.
<url>html/212.layers.fm12.html</url>
<title>Moving layers</title> Moving layers Moving layers in the Document window will be familiar to anyone who has worked with basic graphics applications. If the Prevent Overlaps option is on, you will not be able to move a layer so that it overlaps another layer. See Preventing layer overlaps . To move one or more layers, do one of the following: To move by dragging, select the layers and drag the selection handle of the last selected layer (highlighted in black). To move 1 pixel at a time, select the layers and use the arrow keys. Use Shift-arrow to move the layer by the current grid snapping increment.
<url>html/212.layers.fm13.html</url>
<title>Aligning layers</title> Aligning layers Use the layer alignment commands to align one or more layers with the specified border of the last layer selected. When aligning layers, child layers that aren't selected may move because their parent layer is selected and moved. To prevent this, don't use nested layers. To align two or more layers: 1 Select the layers. 2 Choose Modify > Layers and select an alignment option. For example, if you select Align Top, all of the layers move so that their top borders are in the same vertical position as the top border of the last selected layer (highlighted in black).
<url>html/212.layers.fm14.html</url>
<title>Snapping layers to the grid</title> Snapping layers to the grid Use the grid as a visual guide for positioning or resizing layers in the Document window. If snapping is enabled, layers are automatically positioned at the nearest snapping position when they are moved or resized. Snapping works regardless of whether the grid is visible. To display the grid, do one of the following: Choose View > Grid > Show. Choose View > Grid > Settings and select the Visible Grid option. To snap a layer: 1 Choose View > Grid > Snap To to turn snapping on (or off). 2 Select the layer and drag it. When released, the layer jumps to the nearest snapping position. To change grid and snap settings: 1 Choose View > Grid > Settings to open the dialog box. 2 Select the desired options. Visible Grid makes the grid visible. It works in tandem with the Show command (View > Grid > Show). Spacing defines the distance between grid markers. Enter a number and then choose pixels, inches, or centimeters from the Units pop-up menu. Color specifies the color of grid markers. The default color is light blue. Display specifies that the grid displays as lines or dots. Snapping turns snapping on and off. It works in tandem with the Snap To command (View > Grid > Snap To). Snap Every specifies a snapping unit. Enter a number of units in the Snap Every box and choose pixels, inches, or centimeters from the Units pop-up menu. The default value is 5 pixels. To make layers snap to the grid, the grid and snap pixel units must be the same. For example, if Spacing is set to 50 pixels, set Snap Every to 50 pixels. 3 Click OK.
<url>html/212.layers.fm15.html</url>
<title>Changing the stacking order of layers</title> Changing the stacking order of layers Use the Property inspector or the Layer palette to change the stacking order of layers. The layer at the top of the list is at the top of the stacking order. In HTML code, the z-index determines the order in which layers are drawn in a browser. You can change the z-index for each layer using the Property inspector or the Layer palette, but the following procedure is much simpler. To change the stacking order of layers: 1 Choose Window > Layers to open the Layer palette. 2 Select a layer in the Layer palette and drag it up or down. 3 Release the mouse button when a line appears between the layers.
<url>html/212.layers.fm16.html</url>
<title>Changing layer visibility</title> Changing layer visibility While working on your document, you can show and hide layers to see how the page will appear in different conditions. Use the Layer palette to change the visibility of layers. Use the Layer preferences panel to set the default visibility for new layers. See Layer preferences . To change layer visibility: 1 Choose Window > Layers to open the Layer palette. 2 Click the eye-icon column to change the visibility. An open eye means the layer is visible. A closed eye means the layer is invisible. If there is no eye icon, the layer inherits visibility from its parent. For unnested layers, the parent is the document body, which is always visible. To change the visibility of all layers at once, click the header eye icon at the top of the column.
<url>html/212.layers.fm17.html</url>
<title>Using layers to design tables</title> Using layers to design tables Layers are used to position content on a page and are easier to work with and manipulate than table cells. You can use layers to quickly create complex page designs and then convert the layers to tables for use in 3.0 browsers. You can also move back and forth between layers and tables to tweak layout and optimize page design. If you are targeting 4.0 and later browsers only, you can use a combination of tables and layers and even animate your layers. See Animating with dynamic HTML . Note: If you want to generate 3.0 or 4.0 browser compatible files from your current file, use the conversion options in the File menu. See Converting between 3.0 and 4.0 browsers . To switch to layer-editing mode: 1 Choose Modify > Layout > Reposition Content Using Layers. 2 In the Dialog box that appears, select the desired options. Show Grid and Snap to Grid Let you use a grid to help position layers. See Snapping layers to the grid . Prevent Layer Overlaps Constrains the positions of layers when they are created, moved, and resized so that they don't overlap. See Preventing layer overlaps . Show Layer palette Displays the Layer palette. See Layer palette . 3 Click OK. The tables are converted to layers within the file. Empty cells are not converted to layers. Content outside of tables is also placed in layers. To switch to table-editing mode: 1 Choose Modify > Layout > Convert Layers to Tables. 2 In the dialog box that appears, select the desired table layout options. Most Accurate Creates a table cell for every layer, plus any additional cells that are necessary to preserve the space between layers. Smallest: Collapse Empty Cells Specifies that the layers' edges should be aligned if they are positioned within the specified number of pixels. If this option is selected, the resulting table will have fewer empty rows and columns. Use Transparent GIFs Fills the table's last row with transparent GIFs. This ensures that the table is displayed the same in all browsers. When this option is on, it is impossible to edit the resulting table by dragging its columns. When it is off, the resulting table will not contain transparent GIFs, but its appearance may vary slightly in the different browsers. Center on Page Centers the resulting table on the page. If this option is off, the table is left aligned. 3 Select the desired layout tools and grid options, and click OK.
<url>html/212.layers.fm18.html</url>
<title>Preventing layer overlaps</title> Preventing layer overlaps Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping layers. If you plan to convert the layers in a document to tables for compatibility with 3.0 browsers, use the Prevent Overlap option to constrain layer movement and positioning so that layers don't overlap. To prevent layers from overlapping: Choose View > Prevent Layer Overlaps or turn on the Prevent Overlaps option in the Layer palette. When this option is on, a layer can't be created on top of, moved or resized over, or nested within an existing layer. When this option is activated after overlapping layers have been created, drag the overlapping layer to move it away from the other layer. When this option and snapping are enabled, a layer won't snap to the grid if it would cause two layers to overlap. Instead, it will snap to the edge of the closest layer. Note: Certain actions do not prevent you from overlapping layers even when the Prevent Overlaps option is on. If you insert a layer from the menu, enter numbers in the Property inspector, or reposition layers by editing the HTML source code in the HTML inspector, you can cause layers to overlap or nest while the option is turned on. If this happens, drag overlapping layers in the Document window to separate them.
<url>html/212.layers.fm19.html</url>
<title>Converting between 3.0 and 4.0 browsers</title> Converting between 3.0 and 4.0 browsers Use the conversion options in the File menu to create a 3.0 browser compatible version of a page that uses layers, or to convert a document that uses tables to one that uses layers. In each case Dreamweaver creates a separate, converted file and preserves the original. In general, you should perform these conversions only when you are completely satisfied with your original file, since you must repeat the conversion each time you change the original file. Note: If you want to use layers to lay out a page for use with 3.0 browsers, use the Modify menu Layout commands to convert the current page between table and layer layouts without creating a separate file. See Using layers to design tables . To convert a file for use with 3.0 browsers: 1 Choose File > Convert > 3.0 Browser Compatible. 2 In the dialog box that appears, choose whether to convert layers to tables, CSS styles to HTML markup (character styles), or both. 3 Click OK. Dreamweaver opens the converted file in a new, untitled window. All layers are replaced with a single table that preserves the original positioning. Note: Overlapping layers cannot be converted, nor can layers that are off the page to the left or top. CSS markup is replaced, where possible, with HTML character styles. Any CSS markup that cannot be converted to HTML is removed. See the CSS to HTML markup conversion table for information on which styles are converted and which are removed. Timeline code that animates layers is removed. Timeline code that is unrelated to layers (for example, behaviors or changes to the image source) will execute over time as designed. The timeline is automatically rewound to frame 1. To convert tables to layers: Choose File > Convert > Tables to Layers. Dreamweaver opens the converted file in a new, untitled window. Each table cell is converted to a separate layer; empty cells are not converted. Content outside of tables is placed in a single layer. Use behaviors, timelines, and CSS to make your previously static 3.0 page more dynamic and interesting.
<url>html/212.layers.fm2.html</url>
<title>Creating layers</title> Creating layers Create layers using the insertion, drag and drop, or drawing technique. Once a layer is created, use the Layer palette to select it, nest it inside another layer, or change its stacking order. See Layer palette . Default layer properties (tag, visibility, height and width, and so on) are specified in Layer preferences. To change the default settings, choose Edit > Preferences and select Layers. See Layer preferences . By default, Dreamweaver creates layers with the DIV tag and inserts layer code at the cursor position, or when drawing layers, at the top of the page, just after the BODY tag. If you create a nested layer, Dreamweaver inserts the code inside the tag that defines the parent layer. When creating layers, to prevent layers from overlapping each other, turn on the Prevent Overlaps option in the Layer palette or choose View > Prevent Layer Overlaps. See Preventing layer overlaps . To create a layer, do one of the following: To insert a layer, place the cursor in the document window where you want to position the layer and then choose Insert > Layer. To drag and drop a layer, click the Layer button in the Object palette and drag the layer to the Document window. The layer is placed at the position where the mouse is released. To draw a layer, click the Layer button in the Object palette, release the mouse button, and then use the cursor to draw a layer in the Document window. In the Document window, a layer marker appears at the top left of the page in the Document window. If the layer marker isn't visible, choose View > Invisible Elements. See Invisible Elements preferences . In the Layer palette, the layer name appears in the Name column. As you create additional layers, layers are displayed as a stacked list—the most recently created layer appears at the top of the list. See Changing the stacking order of layers .
<url>html/212.layers.fm3.html</url>
<title>Nesting layers</title> Nesting layers A nested layer is a layer created inside another layer. Use the Layer palette or the insertion, drag and drop, or drawing technique to create nested layers. You can use nesting to group layers together. A nested layer moves with its parent layer and inherits its visibility. Netscape layers created with the LAYER and ILAYER tags expand to include their child's width and height. The following is sample HTML code for a nested layer: <div id="Parent" style="position:absolute; left:56px; top:54px; width:124px; height:158px; z-index:1;"> Content inside the parent layer. <div id="Nested" style="position:absolute; left:97px; top:114px; width:54px; height:69px; z-index:1;"> Content inside the nested layer. </div> </div> When drawing layers, use Layer preferences to force a layer created inside another layer to be a nested layer. Choose Edit > Preferences, select Layers, and click the Nesting checkbox. See Layer preferences . To create a nested layer, do one of the following: To insert a nested layer, place the cursor inside an existing layer and choose Insert > Layer. To drag and drop a nested layer, click the Layer button in the Object palette and then, without releasing the mouse button, drag and drop the layer inside an existing layer. To draw a nested layer, click the Layer button in the Object palette, release the mouse button, and then use the cursor to draw a layer inside an existing layer (if Nesting is turned on in the Preferences Layers category); otherwise, press Control (Windows) or Command (Macintosh) while drawing the layer. To create a nested layer using the Layer palette: 1 Choose Window > Layers to open the Layer palette. 2 Press the Control key (Windows) or Command key (Macintosh) and select a layer in the Layer palette and drag it to the target layer. 3 Release the mouse button when a box appears around the name of the target layer.
<url>html/207.sitemgmt.fm23.html</url>
<title>Preview in Browser preferences</title> Preview in Browser preferences Preview in Browser preferences display the currently defined primary and secondary browsers. To open Preview in Browser preferences, choose Edit > Preferences and select Preview in Browser or File > Preview in Browser > Edit Browser List. See Previewing in browsers . Add Defines a new browser. Edit Changes settings for the selected browser. Remove Deletes the selected browser from the list. Primary Browser and Secondary Browser Specifies whether the selected browser is the primary or secondary browser. F12 and Shift-F12 open the primary browser and secondary browsers respectively. Preview online (Windows only) Supplies the current page for previewing by a local server as a URL beginning with http://localhost/. With this option off, Dreamweaver opens the document in a browser with a file path beginning with file://. In some cases, links specified as site-root-relative paths do not work correctly when opened in a browser with a file:// path.
<url>html/207.sitemgmt.fm24.html</url>
<title>Checking download time and size</title> Checking download time and size 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 the Status Bar panel of the Preferences dialog box. Actual download time varies depending on general Internet conditions. To set download time and size preferences: 1 Choose Edit > Preferences and then click Status Bar. 2 Choose a connection speed with which to calculate download time. The average connection speed in the United States is 28.8. If you are designing for an intranet, you may want to choose 1500 (T1 speed).
<url>html/207.sitemgmt.fm3.html</url>
<title>Site window options</title> Site window options Use the Site window for standard file maintenance operations, such as creating new HTML documents, moving files, creating folders, and deleting items; for storyboarding with the site map (see Creating site maps ); and for transferring files between your local and remote sites. By default, the remote site (or site map) appears in the left pane, and the local site appears in the right pane. You can change this setting in the Site FTP preferences. See Site FTP preferences . To open the Site window choose Window > Site Files, and then choose from the following options: Connect/Disconnect (available with FTP setting only) Connects to or disconnects from the remote site. By default, Dreamweaver disconnects from the remote site if it has been idle for more than 30 minutes. Choose Edit > Preferences and select Site FTP to change the time limit. Refresh (available with Local/Network setting only) Refreshes the remote directory list. Use this button to make the remote directory list appear when you have mounted the drive that contains the remote site after opening the Site window. Get Copies the selected files from the remote site to your local site. If Enable File Check In and Check Out is on, the local copies are read-only; the files remain available on the remote site for other team members to check out. See Getting files from a remote server . If file check in and check out is turned off, getting a file transfers a copy that has both read and write privileges. See Getting files from a remote server . Put Copies the selected files from the local site to the remote site without changing the file's checked-in or checked-out status. See Putting files on a remote server . Check Out Transfers a copy of the file from the remote server to your local site and locks the file on the server. This option is not available if file check in and check out is turned off for the current site. See Checking in and checking out files on a remote server . Check In Transfers a copy of the local file to the remote server and makes the file available for editing by others. The local file becomes read-only. This option is not available if file check in and check out is turned off for the current site. See Checking in and checking out files on a remote server . Current sites list Lists remote sites you've defined. To switch sites, select a different site from the list. To add a site or edit the information for an existing site, choose Define Sites from the bottom of the list (see Defining a site ). Site Files View Changes the remote pane of the Site window so that it displays the file structure of the remote site. This is the default view for the Site window. Site Map View Changes the remote pane of the Site window so that it displays a visual map of your site based on how the documents are linked to one another. Hold down the button to choose Map Only or Map and Files from the pop-up menu. Stop Current Task Aborts any current activity, including getting and putting files. The button appears as a red X in the lower right corner.
<url>html/207.sitemgmt.fm4.html</url>
<title>Site FTP preferences</title> Site FTP preferences Choose Edit > Preferences and select Site FTP, and then choose from the following Site FTP preferences to control file transfer features available in the Site window: Always Show Specifies that either the local or remote files will always appear in the left pane or the right pane of the Site window. By default, the local directory appears on the right. Dependent Files Displays a prompt for transferring dependent files (images and other files—such as external style sheets—that are loaded by the browser when the HTML file is loaded). Prompt on Get/Check Out and Prompt on Put/Check In are both selected by default; select Don't Show Me Again when the Get/Check Out prompt appears to deselect the first option, and select it when the Put/Check In prompt appears to deselect the second option. Note: To force the Include Dependent Files prompt to appear when these options are deselected, press Alt (Windows) or Option (Macintosh) while choosing Get, Put, Check In, or Check Out. FTP Connection Determines whether the connection to the remote site is terminated after the specified amount of minutes has passed with no activity. FTP Time Out Specifies the number of seconds for which Dreamweaver will attempt to make a connection with the remote server. If there is no response after the specified amount of time, Dreamweaver displays a warning dialog box alerting you to this fact. Firewall Host Specifies the address of the proxy server to which you connect if you are behind a firewall. If you are not behind a firewall, leave this space blank. Firewall Port Specifies the port through which you connect to the FTP server. If you connect through a port other than 21 (the default for FTP), enter the number here. Define Sites Takes you to the Define Sites dialog box, where you can edit an existing site or create a new one. See Defining a site .
<url>html/207.sitemgmt.fm5.html</url>
<title>Using the check in/check out system</title> Using the check in/check out system When working in a collaborative environment, you can check out and check in files when transferring them between a remote server and your local computer. See Checking in and checking out files on a remote server . Checking out a file is the equivalent of declaring, "I'm working on this file now—don't touch it!" When a file is checked out, Dreamweaver displays a check mark next to the file's icon in the Site window. A green check mark indicates that the file was checked out by you, and a red check mark indicates that the file was checked out by another team member. The name of the person who checked out the file is also displayed in the Site window. Checking in a file makes the file available to other team members to check out and edit. The local version becomes read-only to prevent you from making changes to the file while someone else has it checked out. Dreamweaver keeps track of checked out files by placing a text file with the extension .lck (which contains the name of the user who checked out the file) on both the remote server and the local site. The .lck files are not visible in the Site window. Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application other than Dreamweaver, you can overwrite checked-out files. However, in applications other than Dreamweaver, the .lck file is visible next to the checked-out file in the file hierarchy to help prevent such accidents. You can enable check in/check out for some sites and disable it for others. See Defining a site . For information about transferring files between local and remote sites without checking them in or out, see Getting files from a remote server and Putting files on a remote server .
<url>html/207.sitemgmt.fm6.html</url>
<title>Checking in and checking out files on a remote server</title> Checking in and checking out files on a remote server Use the Site window to check in and check out files on a remote server. You can also undo a check out without transferring the file so that it's available to other team members to check out. To check out files from a remote server: 1 Choose the desired site from the current sites pop-up menu at the top of the Site window. 2 Select one or more files and right-click (Windows) or Control-click (Macintosh) and choose Check Out from the shortcut menu, or click the Check Out button at the top of the Site window. 3 Click Yes at the prompt to download any dependent files. To check in files on a remote server: 1 Choose the desired site from the current sites pop-up menu at the top of the Site window. 2 Select one or more checked-out or new files in the local pane and right-click (Windows) or Control-click (Macintosh) and choose Check In from the shortcut menu, or click the Check In button at the top of the Site window. Checked-out files are marked with a green check mark; new files have neither a check mark nor a lock symbol associated with them. 3 Click Yes at the prompt to upload any dependent files. It is always a good idea to upload dependent files when checking in a new file. To undo a checked-out file: Select the desired file and right-click (Windows) or Control-click (Macintosh) and choose Undo Check Out from the shortcut menu. The local copy of the file becomes read-only, and any changes you've made to it are lost.
<url>html/207.sitemgmt.fm7.html</url>
<title>Getting files from a remote server</title> Getting files from a remote server Getting files copies them from the remote site to the local site with read-only permission. If you are not working in a collaborative environment and you want to get files that have read/write privileges, turn off the Enable File Check In and Check Out option for the site. See Defining a site . See also Using the check in/check out system . Dreamweaver records all file transfer activity. If an error occurs when you are transferring a file, the Site FTP log can help you determine the problem. To display the log, choose Window > FTP Log from the Site window (Windows) or Site > FTP Log (Macintosh). To get files from a remote server: 1 Choose Window > Site Files to open the Site window. 2 At the top of the Site window, choose the desired site from the Sites list pop-up menu. 3 Click Connect to open a connection to the remote server. If a connection is already open (the Connect button will say Disconnect instead), skip this step. 4 Select the desired files from the remote pane. 5 Click Get, or right-click (Windows) or Control-click (Macintosh) and choose Get from the shortcut menu. 6 Click OK at the prompt to download any dependent files. Note: Click Stop Current Task (the red X in the lower right corner) or press Esc (Windows) or Command-. (period) (Macintosh) to abort the file transfer.
<url>html/207.sitemgmt.fm8.html</url>
<title>Putting files on a remote server</title> Putting files on a remote server Putting files copies them from the local site to the remote site without changing the file's checked out status. If you want to put a file on a remote server and check it in, use the Check In command. See Checking in and checking out files on a remote server . Dreamweaver records all file transfer activity. If an error occurs when you are transferring a file, the Site FTP log can help you determine the problem. To display the log, choose Window > FTP Log from the Site window (Windows) or Site > FTP Log (Macintosh). Note: Do not use high ASCII characters (for example, é, ç, ¥) in the names of files you intend to put on a remote server. Many servers will convert these characters during upload and cause any links to the files to break. To put files on a remote server: 1 Choose Window > Site Files to open the Site window. 2 At the top of the Site window, choose the desired site from the Sites list pop-up menu. 3 Click Connect to open a connection to the remote server. If a connection is already open (the Connect button will say Disconnect instead), skip this step. 4 Select the desired files from the pane on the right. 5 Click Put, or right-click (Windows) or Control-click (Macintosh) and choose Put from the shortcut menu. 6 Click OK at the prompt to upload any dependent files. Note: Click Stop Current Task (the red X in the lower right corner) or press Esc (Windows) or Command-. (period) (Macintosh) to abort the file transfer.
<url>html/207.sitemgmt.fm9.html</url>
<title>Searching and replacing</title> Searching and replacing You can search the current document, selected files, a directory, or an entire site for text, text surrounded by specific tags, or HTML tags and attributes. To initiate a search: 1 Choose from the following options: From the Document or Site window, choose Edit > Find or Edit > Replace. From the HTML inspector, right-click (Windows) or Control-click (Macintosh) and choose Find or Replace from the shortcut menu. 2 In the Find or Replace dialog box that appears, use the Find In option to specify which files to search: Current Document Confines the search to the active document. This option is available only when you choose Find or Replace from the Document window or from the shortcut menu in the HTML inspector. Selected Files Confines the search to the files and folders that are currently selected in the Site window. This option is available only when you choose Find or Replace from the Site window. Current Site Expands the search to all the HTML documents, library files, and text documents at the current site. The site name appears to the right of the pop-up menu. If this is not the site you want to search, choose a different site from the current sites pop-up menu in the Site window. Folder Confines the search to a specific group of files. Click the folder icon to browse to and select the directory you want to search. 3 Use the Find What option to specify the kind of search you want to perform. Text Lets you search for specific text strings in the Document window. A text search ignores any HTML that interrupts the string. See Searching for text in the Document window . HTML Source Lets you search for specific text strings in the HTML source code. See Searching for text in the HTML source . Text (Advanced) Lets you search for specific text strings that are either within or not within a tag or tags. For example, in a document that contains the HTML John <i>tries</i> to get his work done on time, but he doesn't always succeed. He tries very hard. searching for tries not inside i would find only the second instance of the word tries . See Searching for text between specific tags . Tag Lets you search for specific tags, attributes, and attribute values, such as all TD tags with VALIGN set to TOP . See Searching for HTML tags and attributes . 4 Use one of the following options to expand or limit the search: Match Case Limits the search to text that matches the case of the text you want to find. For example, if you search for the brown derby , you will not find The Brown Derby . Ignore Whitespace Differences Treats all whitespace as a single space for the purposes of matching. For example, with this option selected, this text would match this text but not thistext . This option is not available when Use Regular Expressions is selected; you must explicitly write your regular expression to ignore whitespace. Use Regular Expressions Causes certain characters (for example, ?, *, \w, and \b) in your search string to be interpreted as regular expression operators. For example, a search for the b\w*\b dog will match both the black dog and the barking dog . See About regular expressions .
<url>html/208.roundtrip.fm1.html</url>
<title>Roundtrip HTML overview</title> Roundtrip HTML overview Roundtrip HTML is a unique feature of Dreamweaver that lets you move your documents between Dreamweaver and a text-based HTML editor with little or no impact on the content and structure of the document's HTML source code. Dreamweaver even maintains and renders some HTML that is technically invalid (for example, a FONT tag wrapped around multiple P tags) if such code is supported by browsers. The HTML source code that Dreamweaver generates as you edit graphically, however, will always be technically valid. The following are key features of Roundtrip HTML: By default, Dreamweaver rewrites overlapping tags, closes open tags that aren't allowed to remain open, and removes extra closing tags when you switch back to Dreamweaver from the external editor or when you open an existing HTML document. If you don't want Dreamweaver to rewrite any source HTML, choose Edit > Preferences, then select HTML Rewriting to turn off all rewriting. See HTML Rewriting preferences . Dreamweaver displays markers in the document window for invalid HTML that it does not support. The invalid tags are highlighted in yellow, and the text within the tags appears as plain text. When you select the invalid tag, Dreamweaver describes the error and how you can correct it in the Property inspector. If you turn off HTML rewriting, Dreamweaver displays as invalid any HTML that it would have rewritten. 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 they overlap other tags, Dreamweaver may consider them invalid and mark them as erroneous. For example, the custom tag in the following would be marked erroneous: <MyNewTag><B>text</MyNewTag></B> . Dreamweaver does not alter Cold Fusion Markup Language (CFML) or Microsoft Active Server Page (ASP) tags, and it displays icons to identify blocks of CFML or ASP code in the Document window whenever possible. See Editing Cold Fusion and Active Server files in Dreamweaver . We recommend that you turn off rewriting of invalid tags before opening ASP or CFML documents in Dreamweaver. See HTML Rewriting preferences . Dreamweaver lets you launch a text-based HTML editor to edit the current document. Dreamweaver is integrated with HomeSite (Windows) and BBEdit (Macintosh). See Using other HTML editors .
<url>html/208.roundtrip.fm10.html</url>
<title>Using other HTML editors</title> Using other HTML editors Occasionally 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. The full commercial English, French, and German versions of Dreamweaver are bundled with the most popular text editor for Windows, HomeSite, and the most popular text editor for the Macintosh, BBEdit. See Using an external text editor with Dreamweaver and Using BBEdit with Dreamweaver (Macintosh only) . If you purchased Dreamweaver through and electronic software download (ESD), you can get a copy of HomeSite or BBEdit by ordering the CD and manual from the Dreamweaver web site (http://www.dreamweaver.com/).
<url>html/213.frames.fm14.html</url>
<title>Creating NOFRAMES content</title> Creating NOFRAMES content 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 file using a statement similar to the following: <noframes><body bgcolor="#FFFFFF"> this the noframes content. </body></noframes> When a browser that doesn't support frames loads the frameset file, the browser displays only the NOFRAMES content. To define NOFRAMES content: 1 Choose Modify > Frameset > Edit NoFrames Content. Dreamweaver clears the Document window, and the words "NoFrames Content" appear at the top of the body area. 2 Create the NoFrames content in the Document window. 3 Choose Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.
<url>html/213.frames.fm2.html</url>
<title>Creating frames</title> Creating frames Create a frame by dragging a frame border or by choosing commands in the Modify menu. To create new frames, do one of the following: Choose Modify > Frameset > Split Frame Left, Right, Up, or Down. Choose View > Frame Borders and Alt-drag (Windows) or Option-drag (Macintosh) a frame border into the Document window to split the frame vertically or horizontally. Drag from one of the corners to divide the current frame into four new frames. See Frames overview for an animated introduction to creating frames. To delete a frame: Drag the frame border all of the way off the page or to the border of the parent frame.
<url>html/213.frames.fm3.html</url>
<title>Creating a nested frameset</title> Creating a nested frameset Splitting an existing frame creates a new frameset inside the current frameset file. A frameset inside another frameset is called a nested frameset. To create a nested frameset: 1 Place the cursor within an existing frame. 2 Choose Modify > Frameset > Split Frame Up, Down, Left, or Right. You can also Alt-drag (Windows) or Option-drag (Macintosh) a frame border into the Document window to split the frame vertically or horizontally. To view the HTML code, select the parent frameset by clicking a frame border and then open the HTML inspector. The code looks something like this: <frameset cols="207,397"> <frame src="file:///C|/SITEROOT/UntitledFrame-2" name="Left"> <frameset rows="270,268"> <frame src="file:///C|/SITEROOT/UntitledFrame-3" name="TopRight"> <frame src="/temp.htm" name="BottomRight"> </frameset> </frameset> You can see how the new frameset is indented within the parent frameset.
<url>html/213.frames.fm4.html</url>
<title>Saving files in frames and framesets</title> Saving files in frames and framesets A page with frames includes several files. Choose the appropriate option to save a file within a frame, the frameset file, or all files at once. To save files in a frameset, choose one of the following options: To save a document inside a frame, place the cursor in the frame and choose File > Save. To save a frameset file, choose File > Save Frameset or File > Save Frameset As. To save all open files at once, choose File > Save All.
<url>html/213.frames.fm5.html</url>
<title>Selecting a frame or frameset</title> Selecting a frame or frameset Select frames and framesets to change their properties. The Property inspector displays the properties of the selected frame or frameset. See About Frame and Frameset properties . To select a frame, do one of the following: Alt-click (Windows) or Shift-Option-click (Macintosh) inside a frame. Choose Window > Frames and click a frame in the Frame inspector. To select a frameset, do one of the following: Click a frame border in the Document window. Click the border enclosing the frames in the Frame inspector. When a frameset is selected, all the borders of the frames within the frameset are outlined with a dotted line in the Document window. To move the selection to the next frame, do one of the following: Press Alt (Windows) or Command (Macintosh) plus an arrow key to move the selection to the next frame. Press Alt (Windows) or Command (Macintosh) plus the Up arrow key to move the selection to the parent frameset. Press Alt (Windows) or Command (Macintosh) plus the Down arrow key to move the selection to the child frame. If the HTML inspector is open, it tracks the current Document window selection in the HTML code.
<url>html/213.frames.fm6.html</url>
<title>Frame inspector</title> Frame inspector The Frame inspector displays the framesets in the current document and lets you select frames and framesets so that you can change their properties. The Frame inspector also shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. Framesets have thick three-dimensional borders. Frames have thin gray lines and display the name of the frame. To display the Frame inspector: Choose Window > Frames. To select a frame in the Frame inspector: Click a frame in the Frame inspector. To select a frameset in the Frame inspector: Click the border enclosing the frames in the Frame inspector. When a frameset is selected, all the borders of the frames within the frameset are outlined with a dotted line in the Document window.
<url>html/213.frames.fm7.html</url>
<title>About Frame and Frameset properties</title> About Frame and Frameset properties Two sets of properties control the appearance and properties for frame documents. Frame properties determine the frame name, source file, margins, scrolling, and resizing for individual frames within a frameset. Frameset properties control the dimensions of the frames and the color and width of the borders between frames. (Choose Window > Properties to display the Property inspector if it isn't already open.) See Frames overview for more information about frames. To view frame properties, do one of the following: Alt-click (Windows) or Shift-Option-click (Macintosh) a frame. Click a frame in the Frame inspector. See Frame properties . To view frameset properties, do one of the following: Click a frame border in the Document window. Click the border enclosing the frames in the Frame inspector. See Frameset properties .
<url>html/213.frames.fm8.html</url>
<title>Frame properties</title> Frame properties To view frame properties, Alt-click (Windows) or Option-click (Macintosh) a frame. To see all of the following frame properties, click the expander arrow in the lower right corner of the Property inspector: Frame Determines the name of the current frame to use for hyperlink target and scripting references. A frame name should be a single word. Underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. Src Determines the source document for the frame. Enter a file name or click the folder icon to browse to and select the file. You can also open a file in a frame by placing the cursor in the frame and choosing File > Open in Frame. Scroll Determines whether scroll bars appear when there is not enough room to display the content of the current frame. Most browsers default to Auto. No Resize Makes the current frame nonresizable and prevents users from dragging the frame borders. Frames are always resizable in the Document window, but frames with this option turned on are not resizable in a browser. Borders Controls the border of the current frame. The options are Yes, No, and Default. This choice overrides border settings defined for the frameset. (See Frameset properties.) Most browsers default to Yes. To turn off a border, all adjacent frames must be set to No (or set to Default with the parent frameset set to No). Border Color Sets a border color for all borders adjacent to the current frame. This setting overrides the border color of the frameset. (See Frameset properties.) Margin Width Sets the width in pixels of the left and right margins (the space between the frame border and the content). Margin Height Sets the height in pixels of the top and bottom margins (the space between the frame borders and the content).
<url>html/213.frames.fm9.html</url>
<title>Frameset properties</title> Frameset properties To view frameset properties, click a frame border. To see all of the frameset properties, click the expander arrow in the lower right corner of the Property inspector. Borders Controls the border of frames within the current frameset. Choose Yes to display borders in 3D and gray, choose No to display borders as flat and gray, or choose Default to let the browser determine how borders are displayed. Most browsers default to Yes. Border Width Specifies the width of the borders in the current frameset. Border Color Sets a border color for all borders in the current frameset. This setting can be overridden by a border color specified for single frame. Value Specifies the size of the selected row or column. See Specifying frame sizes . Units Specifies whether the selected row or column is a fixed size (pixels), a percentage of the browser window, or expands or contracts to fill the remaining space in the window (relative). See Specifying frame sizes . RowCol Selection Identifies the selected row or column. Click the tabs on the left to select a row and the tabs on top to select a column. See Specifying frame sizes .
<url>html/214.forms.fm1.html</url>
<title>Forms overview</title> Forms overview Forms let you collect information from users. Common uses for forms include surveys, order forms, and search interfaces. To work, forms require two components: the HTML describing the form and either a server-side application or client-side script to process the information that the user enters into the form fields. You can use Dreamweaver to create forms, to add objects to them, and (using behaviors) to validate information entered by the user. You must use a text editor to write a script or application to process the form data (Perl is the most common scripting language for form processing; C, Java, and even JavaScript are other options). Your Dreamweaver forms can include standard objects such as text fields, buttons, image fields, checkboxes, radio buttons, list/menus, file fields, and hidden fields. Dreamweaver also supports input types that it doesn't recognize by displaying generic field properties in the Property inspector. See Generic field properties.
<url>html/214.forms.fm10.html</url>
<title>File field properties</title> File field properties To display file field properties in the Property inspector, select a file field in a form. See also Adding an object to a form . FileField Assigns a name to the field. This field is required, and the name must be unique. Char Width Sets the maximum number of characters that can be displayed in the field. This number can be less than Max Chars, which specifies the number of characters that can be entered in the field. Max Chars Sets the maximum number of characters that can be entered in the field. Use this property to limit the length of file names. Note: Confirm with your server's administrator that anonymous file uploads are allowed before using the file field. If you insert a file field with Dreamweaver, you must manually insert ENCTYPE="multipart/form-data" into the FORM tag to ensure that the file is encoded properly.
<url>html/209.formatting.fm15.html</url>
<title>Creating a style</title> Creating a style Create a style to automate the formatting of HTML tags or a range or block of text identified by a CLASS attribute. To create a style: 1 Choose Window > Styles and click the Style Sheet button in the Style palette. 2 In the Edit Style Sheet dialog box, click New. 3 Choose from the following style types: Make Custom Style (class) Creates a style that can be applied as a CLASS attribute to a range or block of text. Redefine HTML Tag Redefines the default formatting of a specified HTML tag. Use CSS Selector Defines the formatting for a particular combination of tags or for all tags that contain a specific ID attribute. 4 Enter a name, tag, or selector for the new style, following these conventions: Custom style names must begin with a period. If you don't enter the period yourself, Dreamweaver enters it for you. For HTML tag styles, enter an HTML tag or choose one from the pop-up menu. For a CSS selector, enter any valid criteria for a selector (for example, TD H2 or #myStyle ), or choose a selector from the pop-up menu. 5 Click a panel name on the left side of the dialog box and choose the formatting settings for the new style in the corresponding panel. Leave attributes empty if they are not important to the style. Attributes that do not appear in the Document window are marked with an asterisk (*) in the Style Definition dialog box. Some of the CSS style attributes that you can set with Dreamweaver appear differently in Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0, and some are not currently supported by any browser. See the following topics for information on specific settings: Style Definition for Type panel Style Definition for Background panel Style Definition for Block panel Style Definition for Box panel Style Definition for Border panel Style Definition for List panel Style Definition for Positioning panel Style Definition for Extensions panel When you create a custom (class) style, it appears in the Style palette and in the Text > Custom Style menu. HTML tag styles and CSS selector styles do not appear in the Style palette because they cannot be applied. These styles are reflected in the Document window automatically wherever the tag or selector occurs.
<url>html/209.formatting.fm16.html</url>
<title>Applying a custom style</title> Applying a custom style Custom (class) styles are the only type of style that can be applied to any text in a document, regardless of which tags control the text. The Style palette displays the names of all available CLASS styles. Do not confuse custom styles with options such as Bold or Variable in the Text > Style menu; these options are predefined formatting attributes that correspond to specific HTML tags. When you apply two or more styles to the same text, the styles may conflict and produce unexpected results. See About conflicting styles . To apply a custom style: 1 Choose Window > Styles. 2 Select the text to which you want to apply a style. Place the cursor in a paragraph to apply the style to the entire paragraph. To specify the exact tag to which the style should be applied, select the tag with the tag selector at the bottom left of the Document window. You can also change the tag selection with the Apply To pop-up menu in the Style palette. If you select a range of text within a single paragraph, the style affects only the selected range. 3 Click a style name in the Style palette. You can also apply a custom style by choosing a style name from the Text > Custom Style menu, or by right-clicking (Windows) or Control-clicking (Macintosh) and choosing the style name from the Custom Style menu on the shortcut menu. The tag of the current selection appears next to the Custom Style command.
<url>html/209.formatting.fm17.html</url>
<title>About conflicting styles</title> About conflicting styles When you apply two or more styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules: If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict. For example, one style may specify blue as the text color and the other style may specify red. If attributes from two styles applied to the same text conflict, the browser displays the attribute of the innermost style (the style closest to the text itself). If there is a direct conflict, the attributes from custom styles (styles applied with the CLASS attribute) overrule attributes from HTML tag styles. In the example that follows, the style defined for H1 might specify the font, size, and color for all H1 paragraphs, but the custom style .Blue applied to this paragraph overrules the color setting in the H1 style. The second custom style .Red overrules .Blue because it is inside the .Blue style. <H1><SPAN CLASS="Blue">This paragraph is controlled by the .Blue custom style and H1 HTML tag style.<SPAN CLASS="Red">Except this sentence is controlled by the .Red style.</SPAN> Now we're back to the .Blue style.</SPAN></H1>
<url>html/209.formatting.fm18.html</url>
<title>Editing a style</title> Editing a style When you edit a style that already controls text in your document, you instantly reformat all text controlled by that style. To edit a style: 1 Choose Text > Custom Styles > Edit Style Sheet or click the Style Sheet button in the Style palette. 2 Choose a style in the Edit Style Sheet dialog box and click Edit. 3 Click a panel name on the left side of the dialog box and choose the new formatting settings for the style in the corresponding panel. Leave attributes empty if they are not important to the style.
<url>html/209.formatting.fm19.html</url>
<title>Style palette</title> Style palette Use the Style palette to apply custom styles to the current selection. The Style palette displays custom (class) styles only; HTML tag and CSS selector styles do not appear in the Style palette because they are automatically applied to any text controlled by the specified tag or selector. Choose Window > Styles to display the Style palette. Apply To Displays the tag of the current selection. Choose a tag from the pop-up menu to select a different tag. Style Sheet Opens the Edit Styles dialog box. Edit any of the styles in the current document or in a remote style sheet. See also Formatting text with style sheets . Note: Right-click (Windows) or Control-click (Macintosh) the Style palette to open a shortcut menu that includes Edit, Duplicate, Remove, and Apply commands.
<url>html/209.formatting.fm2.html</url>
<title>Formatting text with HTML tags</title> Formatting text with HTML tags The HTML 4.0 specification released by the World Wide Web Consortium (W3C) in early 1998 discourages the use of HTML formatting tags (such as B , I , FONT, and CENTER ) in favor of cascading style sheets. In practice, however, HTML formatting tags—while offering more limited control over appearance than style sheets—are supported by a wider range of browsers than style sheets are. For this reason they are likely to remain part of the web developer's arsenal for as long as 3.0 and earlier browsers make up a measurable proportion of web traffic. For specific information on formatting with HTML tags, see one of the following topics: Changing font characteristics Changing the color of text Aligning text and elements HTML tags that define the structure of the document rather than its appearance—for example, headings, paragraphs, and lists—are still very much part of the HTML specification. In fact, if you are planning to use style sheets to define the font characteristics for your page, it's important to use standard heading tags because they help to preserve the structure of your page in browsers that do not support style sheets. (To see an example of how this works, try viewing the Dreamweaver HTML Help pages in a 3.0 browser.) See Applying paragraph and heading tags .
<url>html/209.formatting.fm20.html</url>
<title>Edit style sheet dialog box options</title> Edit style sheet dialog box options Choose any of the following options in the Edit Style Sheet dialog box to edit, create, link, duplicate, and remove styles: Link Attaches or creates an external style sheet. See Creating or linking to an external style sheet . New Creates a new style. See Creating a style . Edit Opens the selected style for editing. See Editing a style . Duplicate Makes a copy of the selected style. Remove Deletes the selected style. Style Definition Displays the attributes of the current style if a style is selected, or lists the styles defined by an external style sheet if a linked style sheet is selected.
<url>html/209.formatting.fm21.html</url>
<title>Style Definition for Type panel</title> Style Definition for Type panel Use the Style Definition for Type panel to define basic type settings for a style. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Type on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Font Sets the font family or series of families for the style. Browsers display text in the first font in the series that is installed on the user's system. For compatibility with Internet Explorer 3.0, list a Windows font first. Size Defines the size of the text. You can choose a specific size by selecting the number and the unit of measurement, or you can choose a relative size. Style Specifies Normal, Italic, or Oblique as the font style. The default setting is Normal. Line Height Sets the height of the line on which the text is placed. Select Normal to have the line height for the font size calculated automatically, or enter an exact value and select a unit of measurement. This attribute is not supported by current browsers and causes problems in Internet Explorer 3.x browsers. Decoration Decorates text with an underline, overline, or line-through or by making it blink. The default setting for regular text is None. The default setting for links is Underline. Weight Applies a specific or relative amount of boldness to the font. Normal is equivalent to 400; bold is equivalent 700. Variant Lets you select a variation of the font, such as small caps. Dreamweaver does not display this attribute in the Document window. Case Capitalizes the first letter of words in the selection or makes it all uppercase or lowercase. Dreamweaver does not display this attribute in the Document window. Color Defines the color of the text.
<url>html/209.formatting.fm22.html</url>
<title>Style Definition for Background panel</title> Style Definition for Background panel Use the Style Definition for Background panel to define background settings for a style. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Background on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Background Color Sets the background color for the element. Background Image Sets the background image for the element. Repeat Determines whether and how the background image is repeated, as follows: No Repeat displays the image once at the beginning of the element. Repeat tiles the image horizontally and vertically behind the element. Repeat-x and Repeat-y display a horizontal and vertical band of images, respectively. Images will be clipped to fit within the boundaries of the element. Attachment Determines whether the background image is fixed at its original position or scrolls along with the content. Note that some browsers may treat the Fixed option as Scroll. Dreamweaver does not display this attribute in the Document window. Horizontal Position and Vertical Position Specify the initial position of the background image in relation to the element. If the attachment property is Fixed, the position is relative to the Document window, not to the element. Dreamweaver does not display this attribute in the Document window.
<url>html/209.formatting.fm23.html</url>
<title>Style Definition for Block panel</title> Style Definition for Block panel Use the Style Definition for Block panel to define spacing and alignment settings for styles. See also Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Block on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Word Spacing Adds extra space between words. Word spacing may be affected by justification. You can specify negative values, but the display depends upon the browser. Dreamweaver does not display this attribute in the Document window. Letter Spacing Adds extra space between characters. You can specify negative values, but the display depends upon the browser. Letter spacing will override any extra space between letters caused by justification. Dreamweaver does not display this attribute in the Document window. Vertical Alignment Specifies the vertical alignment of the element, often in relation to its parent. Dreamweaver displays this attribute in the Document window only when it is applied to the IMG tag. Text Align Determines how text is aligned within the element. Text Indent Specifies how far the first line is indented. A negative value may be used to create an outdent, but the display depends upon the browser. Dreamweaver displays this attribute in the Document window only when the tag is applied to block-level elements. Whitespace Determines how white space within the element is handled. Choose from three options: Normal collapses white space; Pre handles it as if the text were enclosed in PRE tags (that is, all white space, including spaces, tabs, and returns, is respected); Nowrap specifies that the text only wraps when a BR tag is encountered. Dreamweaver does not display this attribute in the Document window.
<url>html/209.formatting.fm24.html</url>
<title>Style Definition for Box panel</title> Style Definition for Box panel Use the Style Definition for Box panel to define settings for styles that control the placement of elements on the page. See Formatting text with style sheets and Editing a style . To open the Style Definition dialog box, choose Window > Styles and click the Style Sheet button. In the dialog box that appears, choose a style and click Edit. Click Box on the left side of the dialog box. Leave any of the following attributes empty if they are not important to the style: Width and Height Determine the size of the element. Dreamweaver displays this attribute in the Document window only when it is applied to images or layers. Float Moves the element out of the page flow and places it at either the left or right page margin. Other elements wrap around the floating element as usual. Dreamweaver displays this attribute in the Document window only when it is applied to the IMG tag. Clear Defines on which sides of the element layers are not allowed. If a layer appears on the clear side, the element with the clear setting moves below it. Dreamweaver displays this attribute in the Document window only when it is applied to the IMG tag. Padding Defines the amount of space between the content of the element and its border (or its margin if there is no border). Dreamweaver does not display this attribute in the Document window. Margin Defines the amount of space between the border of the element (or the padding if there is no border) and any other element. Dreamweaver displays this attribute in the Document window only when it is applied to block-level elements (paragraphs, headings, lists, and so on).
