<title>Overview</title> Overview Dreamweaver is a professional visual editor for creating and managing Web sites and pages. With Dreamweaver, it's easy to create and edit cross-platform, cross-browser pages. Dreamweaver provides advanced design and layout tools, as well as making it easy 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. Macromedia's Roundtrip HTML technology imports HTML documents without reformatting the code—and you can set Dreamweaver to clean up and reformat HTML when you want to. Dreamweaver is fully customizable. You can create your own objects and commands, modify menus and keyboard shortcuts, and even write JavaScript code to extend Dreamweaver with new behaviors and property inspectors.
<url>html/00intro2.html</url>
<title>Learning Dreamweaver</title> Learning Dreamweaver The Dreamweaver package contains a variety of resources to help you learn the program quickly and become proficient in creating your own Web sites and pages. These resources include online HTML help pages that appear in your browser, Show Me movies, a tutorial, and a printed book. In addition, the Dreamweaver Web site is updated regularly. Guided Tour and Show Me movies The Show Me movies provide an animated introduction to some of the main features of Dreamweaver. The Guided Tour includes all the Show Me movies in sequence. Click one of the movie titles to start the tour. When each movie is over, click the Home button to return to the list of movies, then click another movie. You can watch the whole tour or skip ahead to see particular sections. You can also view individual Show Me movies in their respective overview sections. In the Help table of contents, the following icon indicates that a topic contains a Show Me movie: Show Me movies require the Shockwave plugin, which is included on the Dreamweaver CD. If you purchased your copy of Dreamweaver electronically, you can download the latest Shockwave plugin from the Macromedia Web site. Dreamweaver Help The Dreamweaver HTML Help pages provide comprehensive information about all Dreamweaver features. These browsers are strongly recommended for viewing Dreamweaver Help: In Windows: Netscape Navigator 4.0 and later or Microsoft Internet Explorer 4.0 and later On the Macintosh: 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. Dreamweaver Help makes 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. Dreamweaver Help includes the following components: The table of contents Enables you to see all information organized by subject. Click top-level entries to view subtopics. The index, Like a traditional printed index, can be used to find important terms and go to related topics. Search Allows you to find any character string in all topic text. The search feature requires a 4.0 browser with Java enabled. Note: After clicking Search, a Java security window may appear, asking for permission to read files on your hard disk. You must grant this permission for the search to work. The applet does not write anything to your hard disk, nor does it read any files outside the HTML Help Pages. To search for a phrase, simply type the phrase in the text field. To search for files that contain two keywords (for example, layers and styles ), separate the search terms with a plus (+) sign. Context-sensitive help Provides a Help button in each dialog box, or a question mark icon in inspectors, windows, and palettes, that opens a relevant help topic. Dreamweaver Help's navigation bar Provides buttons you can click to move through topics. The Previous and Next buttons move to the previous or next topic in a section (following the topic order listed in the table of contents). Dreamweaver Tutorial The Dreamweaver Tutorial is the best place to start if you don't have very much experience in developing Web sites. By working through the tutorial, you'll learn how to edit a sample Web site with some of Dreamweaver's most useful and powerful features. The tutorial is in both Dreamweaver Help and the Using Dreamweaver book. Dreamweaver user's guide (printed book) The Using Dreamweaver book provides a printed alternative to Dreamweaver Help. Certain reference topics about program options are not included in the printed book; see the Help pages for information on those topics. Extending Dreamweaver manual The Extending Dreamweaver book and Help pages provide information for JavaScript and C developers on the Dreamweaver Document Object Model and the APIs (application programming interfaces) that allow you to create objects, commands, property inspectors, behaviors, and translators. Dreamweaver Support Center The Dreamweaver Support 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/00intro3.html</url>
<title>Where to start</title> Where to start Dreamweaver Help includes information for readers at a variety of levels. To get the most out of the documentation, start by reading the parts that are most relevant to your level of experience. For HTML novices: 1 Begin by viewing the Guided Tour. 2 Next, work through the Dreamweaver Tutorial. 3 Progress through the chapters that begin with Dreamweaver basics overview , Sites and documents overview , Linking and navigation overview , and Site management overview . 4 To learn about formatting text and including images in your pages, read the chapters that begin with Formatting text overview and Images overview . That's all you really need to begin producing high-quality Web sites, but when you're ready to learn how to use more advanced layout and interaction tools, you can proceed through the rest of the topics in order. You may want to skip "Customizing Dreamweaver," at least at first. For experienced Web designers who are new to Dreamweaver: 1 Begin by working through the Dreamweaver Tutorial to learn the basics of using Dreamweaver. 2 Read the chapter that begins with Dreamweaver basics overview for a further overview of the Dreamweaver user interface. 3 Although much of the material in Sites and documents overview and Linking and navigation overview is probably familiar to you, skim those chapters to see how these familiar concepts are implemented in Dreamweaver; pay particular attention to Creating a local site . Then read Site management overview and the rest of the site management topics. 4 The chapters that begin with Formatting text overview and Images overview provide useful information on the details of using Dreamweaver to create basic HTML pages. 5 Read the overview at the beginning of each subsequent chapter to determine whether its topics are of interest to you. For experienced Web designers who are familiar with Dreamweaver 2: 1 Begin by reading What's new in Dreamweaver 3 . Follow the cross-references from that section to sections covering new Dreamweaver features. Be sure to read these sections about important new features: About the History palette Editing an HTML tag in the Document window Formatting text using HTML styles Synchronizing the files on your local and remote sites About Design Notes Cleaning up Microsoft Word HTML 2 You may want to skim the chapter that begins with Dreamweaver basics overview to learn about new aspects of the Dreamweaver user interface. 3 In addition, if you're interested in customizing and extending Dreamweaver, read the chapter that begins with Customizing Dreamweaver overview .
<url>html/00intro4.html</url>
<title>Typographical conventions</title> Typographical conventions The following typographical conventions are used in Dreamweaver Help: Code font indicates HTML tag and attribute names as well as literal text used in examples. Italic code font indicates replaceable items (sometimes called metasymbols ) in code. Bold roman text indicates text for you to enter verbatim.
<title>HTML and Web technologies resources</title> HTML and Web technologies resources The following are some useful resources available on the Web: The HTML 4.0 specification is The official specification for HTML from the World Wide Web Consortium. The Cascading Style Sheets, level 1 specification (CSS1) Is the official specification for style sheets from the World Wide Web Consortium. Index DOT Html Is 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 Explains what styles are and which browsers they work in. "CGI Scripts for Fun and Profit" Is an article from the Hotwired Webmonkey site on incorporating ready-made CGI (Common Gateway Interface) scripts into your pages. The CGI Resource Index Is a repository of all things related to CGI, including ready-made scripts, documentation, books, and even programmers-for-hire. The Common Gateway Interface site Includes an introduction to CGI. Entities Table Lists the entity names used in ISO 8859-1 (Latin-1). The Dynamic HTML Events page Provides information about events in Microsoft Internet Explorer. Microsoft's ASP Overview pages Provide information about Active Server Pages (ASP). Sun's JSP page Provides information about JavaServer Pages (JSP). The PHP pages Provide information about PHP: Hypertext Preprocessor (PHP). Allaire's ColdFusion product page Provides information about ColdFusion. The XML.com site Provides information about XML.
<url>html/01tutorial1.html</url>
<title>Tutorial overview</title> Tutorial overview This tutorial shows you how to use Dreamweaver to define a local site and to create and edit Web documents. Use this tutorial to learn the basic skills you'll need to develop a Web site and to learn about some of the new features of Dreamweaver 3. In this tutorial, you will create a Web site for a fictitious company, Scaal Coffee, a gourmet coffee business. While visiting Scaal's Web site, customers can read about the company, view the weekly specials, and browse through the product pages of Scaal's online catalog. Along the way, you'll learn how to perform the following tasks: Define a local site Create a document Use layers to lay out a page Convert layers to tables Attach a behavior to an image Import a Microsoft Word HTML document Format text using HTML styles Create a site map Create links Apply a template Create a jump menu 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 Dreamweaver Help to familiarize yourself with Dreamweaver's features. Click here to view Dreamweaver's Guided Tour. To view the movies: 1 In Dreamweaver, choose Help > Using Dreamweaver. 2 In the Contents list in the left frame, click Getting Started, then click Learning Dreamweaver. 3 Click a movie title. 4 Close the browser when you finish. Preview the completed Web site Next, view the completed Web site to get an idea of what you'll be working toward. To view the completed Scaal site: 1 Launch Dreamweaver. 2 In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate to the Dreamweaver application folder, then open the Tutorial folder, and then the Scaal_site folder. 3 In the Scaal_site folder, select scaal_home.html, then click Open to open the Scaal home page in the Document window. Do not edit this page. You will create your own version of this page. 4 Choose File > Preview in Browser, then select a browser with which to view the Scaal home page. (Use a 4.0 browser to view this site.) 5 Move the pointer over the three items on the left side of the page (Our Story, Products, and This Week), and notice that the items highlight to indicate that they are active links. Click the links to explore the site. To return to the home page, click the Scaal logo, which is located at the top of each site page. 6 Close the browser when you finish looking at the site. 7 Close Dreamweaver. How the tutorial files are arranged Both the completed and partially completed HTML files used in this tutorial are in the Scaal_site folder in the Tutorial folder. Images and other associated files for the site are in folders below the Scaal_site folder. (The complete path to the Scaal_site folder will vary, depending on where you have Dreamweaver 3.0 installed.) Each file has a meaningful name—for example, the HTML file for the completed Scaal products page is named products_index.html. The partially completed files—which you'll be working on—have names similar to their counterparts in the complete site, except they begin with DW3_; the partially completed version of products_index.html, for example, is called DW3_products_index.html.
<url>html/01tutorial10.html</url>
<title>Create links</title> Create links Images on the left side of the Scaal home page guide visitors to specific pages in the Scaal site. You'll add links from the Our Story, Products, and This Week images to their corresponding pages. You'll see that there are a number of ways to create links using Dreamweaver. First, you'll add a link from the Our Story image to the Our Story page using the Property inspector. To create a link using the Property inspector: 1 In the Site window, double-click the icon for the DW3_scaal_home.html file in either panel. The DW3_scaal_home.html file opens. 2 In the Document window, click the Our Story image to select it. Don't double-click the image, or Dreamweaver will open the Select Image Source dialog box. 3 Choose Window > Properties to open the Property inspector if it isn't already open. The Image Property inspector displays information about the selected image. Note: The Link field contains a number sign (#), created when you attached the Swap Image behavior to the image. Don't remove the number sign; it will be replaced with the file name of the document you link to. 4 In the Property inspector, click the folder icon to the right of the Link field. 5 In the Select File dialog box, browse to my_ourstory.html, and click Select (Windows) or Choose (Macintosh) to select the file. The file name appears in the Link field of the Property inspector. Now you'll add a link to the Products image 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 In the Document window, click the Products image to select it. 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 DW3_products_index.html. The file name appears in the Link field in the Property inspector for the products image. Click the Site Map icon in the Site window. The site map updates to reflect the link you added. A plus (+) sign next to any file in the site map indicates that the file contains links to other documents. Click the plus sign to expand the site map tree to display the associated files; click the minus (-) sign to collapse the site map view. To change a link using the context menu: 1 In the Document window, right-click (Windows) or Control-click (Macintosh) the This Week image. 2 In the context menu, select Change Link. This image is linked to a behavior that swaps the image displayed when a users moves the pointer over the image. You'll change the link so that a file opens when a user clicks the image. 3 In the Select File dialog box, browse to DW3_thisweek.html and click Select (Windows) or Choose (Macintosh) to select the file to open. Notice that the Property inspector's Link field updates to show the linked file's name. To create a link from text: 1 In the Dreamweaver document, select the word products in the second paragraph. 2 Right-click (Windows) or Control-click (Macintosh) to see the context menu. 3 In the context menu, select Make Link. 4 In the Select File dialog box, browse to DW3_products_index.html and click Select (Windows) or Choose (Macintosh) to select the file. 5 Choose File > Save to save all the changes you've made to the home page. 6 Choose File > Close to close the page.
<url>html/01tutorial11.html</url>
<title>Create a template</title> Create a template You can use templates to create documents that have a common structure and appearance. Templates are useful when you want to make sure that all of the pages in a site share certain characteristics. Once you apply a single template to a group of pages, you can edit information on the group of pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text describing an item for sale) remain unchanged, common template elements (such as navigation bars) are updated on all of the pages that use the template. The Scaal products page links to several product pages that describe products Scaal offers for sale. You'll use an existing product page to create a template. Using a template ensures that your product pages will have an identical layout and format. In this section, you'll create a template from an existing product page and then use the template to create new product pages. View a product page Begin by viewing the Scaal compact disc product page in a browser. To preview the completed Scaal product page: 1 In the Site window, in the Local Folder list, locate the icon for the product_cd.html file, then double-click the icon to open the file in Dreamweaver. 2 Press F12 to preview the page in a browser window. 3 Close the browser when you finish viewing the page. 4 Close the products_cd.html file. Create the template You'll create a template from the tutorial version of the Scaal compact disk product page. You'll then use this template to create additional product pages. To save an existing page as a template: 1 In the Site window, in the Local Folder list, double-click the icon for DW3_products_cd.html to open the file. 2 Choose File > Save as Template. The Save As Template dialog box appears. The existing template, product_page, was created for and applied to the completed Scaal site product pages. You'll create your own version of this template. 3 In the Save As field, change the template name: type my_product_page , then click Save. A new document appears in the Document window. Notice the Template identifier as well as the file extension .dwt. Modify the template At this point, your new template is the same as the page from which you saved the template. The layout for certain page areas need to be the same on each product page: the product photo, product name, product description, and product price. You'll see how to define these areas in your template. 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 an applied template, the editable regions are highlighted. To modify a template: 1 In the my_product_page.dwt template in the Document window, select and delete the compact disc image; then type Insert image here in the table cell. 2 Select the text you just typed. 3 Choose Modify > Templates > New Editable Region. The New Editable Region dialog box appears. 4 In the Name field, type Image as the name for this region of the template. 5 Click OK. Notice the text is now highlighted, indicating this is an editable region of the template. To mark the additional regions in the template: 1 In the Document window, select "Scaal Sound," then choose Modify > Templates > New Editable Region to make this an editable region in the template. 2 In the Name field in the New Editable Region dialog box, type Name , then click OK. In the Document window, the region is highlighted and identifiable by the region name you gave it. 3 In the Document window, select the product description text, then choose Modify > Templates > New Editable Region to make this an editable section of the template. 4 In the Name field in the New Editable Region dialog box, type Description and click OK. In the Document window, the region is highlighted and identifiable by the region name you gave it. 5 Choose File > Save to save your template. The Update Pages dialog box appears, asking if you want to update all the documents in your local site. Selecting Yes would update the pages in the completed Scaal site, which you don't want to do. 6 Click No, and then click Close to close the Update Pages dialog box. 7 Close the template. Apply the template Now you'll use the template to create a new product page. To create a new document from a template: 1 Choose File > New from Template. The Select Template dialog box appears. 2 In the Templates list, select my_product_page as the template to apply, then click Select. A new untitled document appears. The darker regions of the document are editable; all other regions of the document are locked and cannot be edited. 3 Save your document, and name the file my_products_mug.html . Edit the document With the editable regions set, updating pages is easy. You'll replace the placeholder text with an image, and add text to create Scaal's Commuter Mug product page. 1 Place the insertion point in the Image region. 2 Choose Insert > Image, and in the dialog box that appears select mug.jpg. Then click Select (Windows) or Choose (Macintosh) to select the image. 3 Delete the Image placeholder "Insert image here" text. 4 In the Document window, in the Name region, type a name for the product, such as Commuter Mug , and delete the placeholder. 5 In the Document window, in the Description region, type some descriptive text about the mug and delete the placeholder. 6 Save your document. 7 Close the document. In the next section of the tutorial, you'll link product page documents to Scaal's main products page. The product pages you'll link were created using a similar template.
<url>html/01tutorial12.html</url>
<title>Create a jump menu</title> Create a jump menu A jump menu is a pop-up menu of options that link to and open files in a browser window. You'll create a jump menu that allows a customer to quickly jump from the products index page to specific product pages in the Scaal site. To preview the completed page: 1 In the Site window, double-click the icon for the products_index.html file to open it. 2 Press F12 to preview the page in the browser. 3 Click the arrow to the right of the Select a Product pop-up menu to display the product selection menu. Select a product to view. 4 When you have finished viewing the files, close the browser window. 5 Close the products_index file. Inserting a jump menu The jump menu you create will contain a selection prompt to inform viewers of options. You'll also create two menu commands that link to product pages. To insert a jump menu: 1 In the Site window, double-click the icon for the DW3_products_index.html file to open it. 2 Select and delete the text "insert jump menu here." 3 With the insertion point in the table cell, choose Insert > Form Object > Jump Menu. The Insert Jump Menu dialog box appears. 4 In the Text field, type Select a product . This text prompts a viewer to take action. 5 Under Options, select the Select First Item After URL Change option. This sets the first entry in a menu as the item to which the menu returns after a user selects an option in the jump menu. 6 Click the plus (+) button to add another jump menu item. 7 In the Text field, type Compact disc . 8 In the When Selected, Go To URL field, click Browse and navigate to DW3_products_cd.html, then click Select (Windows) or Choose (Macintosh) to select the file you want to open when the item is selected. 9 Click the plus (+) button to add one more jump menu item. 10 In the Text field, type Coffee mug ; then click Browse and navigate to DW3_products_mug.html, then click Select (Windows) or Choose (Macintosh) to select the file you want to open when the item is selected. Your Insert Jump Menu dialog box should look similar to the screen below. 11 Click OK to close the dialog box. 12 Save your document. The jump menu doesn't work in the Document window; you must preview it in a browser to test your links.
<url>html/01tutorial13.html</url>
<title>Check your site</title> Check your site Now that you've made all necessary edits to the partially completed files, preview the entire site in a browser to see how it looks. To preview the site in a browser: 1 With the DW3_scaal_home page open, press F12 to open the page in a browser. 2 Click the Our Story, Products, and This Week images to view the other pages you edited for the site. Try selecting the jump menu items on the Products page. 3 When you've 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/01tutorial2.html</url>
<title>Set up site structure for the tutorial</title> Set up site structure for the tutorial Before you start the tutorial, create a new folder into which you'll transfer the Scaal site tutorial files. Later, you can use the Sites folder structure to store other sites you create. 1 At the root level of your local disk, create a new folder and name it Sites —for example, C:\Sites (Windows) or Hard Drive:Sites (Macintosh). 2 From the Dreamweaver/Tutorial folder, copy the complete Scaal_site folder into the Sites folder.
<url>html/01tutorial3.html</url>
<title>Define a local site</title> Define a local site Begin your site development by defining a local site for the files in the Scaal_site. A site is a storage location for all the documents and files belonging to a particular Web site. Defining a local site delineates the structure of the site you are creating and tells Dreamweaver where you plan to store all of the site's files. Define a local site for each Web site you create using Dreamweaver. For this tutorial, you'll specify the Scaal_site folder as the local site folder. To create a local site: 1 Launch Dreamweaver. A blank document opens. 2 Choose Site > New Site. 3 In the Site Definition dialog box, make sure Local Info is selected in the Category list. 4 In the Site Name field, type my_tutorial . The site name lets you easily identify and select a site from a list of sites you've defined. 5 Click the folder icon to the right of the Local Root Folder field, navigate to the Sites/Scaal_site folder, and click Open, then click Select (Windows) or click Choose (Macintosh). The Local Root Folder field updates to display the path to the local site. Note: The complete path to the Scaal_site folder may vary, depending on where you have created your Sites folder. 6 Click OK. 7 Click Create when asked if you'd like to create a cache file for the site. Caching the files in the Scaal_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 in the local site my_tutorial. 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. 8 Leave the Site window open. 9 Click the Document window to make it active.
<url>html/01tutorial4.html</url>
<title>Create the Scaal site home page</title> Create the Scaal site home page Now that you have set up a structure to store the Scaal site, you'll create a home page for the site. As you build this document, you'll add a page title, layers, images, text, and links; your document will contain the same design components as the completed Scaal home page. If they aren't already open, open the following workspace components: The Object palette (choose Window > Objects), which you'll use to add objects to your document The Property inspector (choose Window > Properties), which you'll use to set properties or attributes for objects in your document Save your document Save the blank document you created when you launched Dreamweaver. To save a document: 1 Choose File > Save. 2 In the Save As dialog box, select the Sites/Scaal_site folder to save the file in. 3 In the File Name field, type my_scaal_home.html . 4 Click Save. Define the title of the page Defining a page title for an HTML document helps users identify and keep track of a page they're browsing. The page title appears in the browser title bar when a page is viewed in a browser. When a page is bookmarked, the page title appears in the bookmark list. If a document is created without a page title, the document appears in the browser with the title Untitled Document . To define the title of a page: 1 With the Document window active, choose Modify > Page Properties to see the page property options. 2 In the Title field of the Page Properties dialog box, type Scaal Gourmet Coffee . 3 Click OK. The title appears in the title bar of the Dreamweaver application window.
<url>html/01tutorial5.html</url>
<title>Create a page layout</title> Create a page layout You'll begin by opening the completed version of the Scaal home page in a browser so that you can refer to it while working. To view the completed home page in a browser: 1 Choose File > Open, navigate to the Sites/Scaal_site folder, select scaal_home.html, then click Open. 2 Press F12, to preview the page in a browser. The home page appears in the browser. Leave the browser window open in the background to refer to as necessary. 3 Click in the Document window of the scaal_home.html document, then choose File > Close to close the document. Add layers Layers are ideal for creating complex page layouts, since you can easily reposition page elements that have been placed in layers by dragging them. You'll lay out the home page using layers, then convert the layout to a table layout so that the page will accurately display in both 3.0 and 4.0 browsers. You cannot convert layers to tables if the document being converted contains nested or overlapping layers. To prevent overlapping layers: 1 Choose Window > Layers to open the Layer palette. 2 Make sure the Prevent Overlaps box is selected. To add layers to a document: 1 Click in the Document window of the my_scaal_home document to make the document active. 2 Choose Insert > Layer. A layer is added to the document. 3 In the Object palette's Common panel, click the Draw Layer button. 4 Move the pointer to the Document window; the pointer changes into a drawing tool. In the space below the first layer, click and drag the pointer to draw a new layer. 5 Repeat the actions in steps 3 and 4 to draw another layer. Your page should look similar to the screen below. Selecting and manipulating a layer You can change the position or shape of the layers in your document. To select a layer: 1 Click the border of the layer. Handles appear around a selected layer: 2 To resize a layer, click a layer handle, and drag the handle to the desired size. 3 To move a layer, do one of the following: Use the arrow keys. Hold down Shift and use the arrow keys to move a layer five pixels in the direction of the arrow used. Click the tab in the top left corner of the layer and drag the layer to the desired position. Add an image Now you'll insert the Scaal logo image in the document. To insert an image into a layer: 1 Click anywhere in the uppermost layer. Clicking in a layer places the insertion point inside the layer without selecting the layer. An active layer with an insertion point in it looks like this: 2 Choose Insert > Image. 3 In the Select Image Source dialog box, locate the Sites/Scaal_site/Images folder, then navigate to logo_scaal.gif, and click Select (Windows) or Choose (Macintosh). The image appears in the layer. Add the navigation images Now you'll add images for navigation buttons. After you add the button images, add space between the graphics: add a paragraph return after you insert the images. 1 Place the insertion point in the navigation layer (the bottom left layer). 2 In the Object palette's Common panel, click the Insert Image button. The Select Image Source dialog box appears. 3 In the Images folder of the Scaal_site, navigate to btn_ourstory_up.gif, then click Select (Windows) or Choose (Macintosh) to insert the image. The Our Story image appears in the layer. 4 Position the insertion point after the image in the layer, and press Enter (Windows) or Return (Macintosh) to add space between this image and the next image you insert. 5 In the Object palette, click the Insert Image button, and in the dialog box that appears select btn_products_up.gif, then click Select (Windows) or Choose (Macintosh). 6 Position the insertion point after the image in the layer, and press Enter (Windows) or Return (Macintosh). 7 In the Object palette, click the Insert Image button, and in the dialog box that appears select btn_thisweek_up.gif, then click Select (Windows) or Choose (Macintosh). Your document layout should look similar to this. Name the images Make a habit of naming the elements in your documents. Later, when you need to reference or select a particular image, layer, or some other document element, you'll be able to easily identify it. You'll be referencing these images later in the tutorial, so name them now. To name an image: 1 In the Document window, click the Our Story image to select it. 2 In the Image field of the Property inspector, type ourstory . 3 Repeat these steps, selecting and naming the other two images in your document. Name the second image products and the third image thisweek . Add text to a layer Now you'll add text to the remaining layer. In Dreamweaver, you can type content directly into a layer, or you can cut and paste content from another document into a layer. In this tutorial, you'll add text to the layer by copying and pasting content from an existing text file to a layer. To copy and paste text into a layer: 1 Choose File > Open; then, in the Scaal_site folder, open DW3_copy.txt. The DW3_copy.txt document opens in a new Dreamweaver Document window. DW3_copy.txt is the file you'll copy the text from. 2 Choose Edit > Select All to select the document text. 3 Choose Edit > Copy to copy the text. 4 Close the DW3_copy.txt document. 5 In the my_scaal_home document, position the insertion point in the bottom right layer. 6 Choose Edit > Paste to paste the text into the layer. Formatting text You can format text in the Document window by setting properties in the Property inspector. First, select the text you want to format, then apply the changes. You'll change the font and size of the text. Before you format the text, you'll create a couple of paragraphs. Add a paragraph return after the first sentence and after the second sentence . To change the font: 1 If the Property inspector isn't open, choose Window > Properties. 2 With the insertion point anywhere in the layer, press Control+A (Windows) or Command+A (Macintosh) to select all the text in the layer. 3 In the Property inspector's second Format pop-up menu, which currently reads Default Font, select Arial, Helvetica, sans-serif. 4 In the Size pop-up menu, select 3. The text in your document automatically updates to reflect the changes. Add a background color to a layer You can also use the Property inspector to set the background color of a layer. You can select a color using the color picker, or you can type the hexadecimal code for a color. To add a layer background color: 1 Click the border of the layer that contains the text to select it. (Handles appear around a layer when it is selected.) 2 In the Property inspector, click the BgColor color box. The color palette and eyedropper icon appear. You can use the eyedropper to "pick up" any color in the visible work area, in addition to picking colors in the color palette. 3 Move the color picker icon to the Scaal logo, then click the gold that surrounds the letter S . The layer background color is updated. Position the layers Now that you've completed the design of your page—laying it out using layers—you'll convert the layers to a table layout so the page can be viewed by users with 3.0 browsers. When you convert layers to a table, Dreamweaver creates table columns, rows, and cells to fit the layers on a page. To reduce the number of table columns, rows, and cells you create as you convert the document layout, align layer elements before converting a document. Use the Property inspector to position layers in a document. First, you'll resize and move the layers as you design your page; then you'll set the position of the two lower layers so they align at the top. To position the layers: Resize the top layer by dragging the layer handles in until they just surround the Scaal logo and the text following it. Resize the navigation layer (the bottom left layer) by dragging the layer handles in until they just surround the images. Move the text layer so that it is positioned next to the navigation layer. Select the layer, then use the arrow keys or drag the layer by the layer tab. (The layers won't overlap, because Prevent Overlap is selected in the Layer palette.) To use the Property inspector to position two or more layers on a page: 1 If all the layer property fields aren't visible in the Property inspector, click the expander arrow in the lower right corner of the Property inspector. 2 Select the layer that contains the navigation images; then press the Shift key and select the layer that contains the text. Both layers are selected. 3 In the Property inspector's T field, type 100px . This precisely positions both layers 100 pixels from the top of the document. Click anywhere in the document to deselect the layers and to see the layers align. Convert layers to a table Now that you've laid out the page, convert the layers to a table so that the page will be displayed accurately in 3.0 as well as later version browsers. To convert layers to a table: 1 Choose Modify > Layout Mode > Convert Layers to Table. The Convert Layers to Table dialog box appears. 2 In the Convert Layers to Table dialog box, under Table Layout make sure that Smallest: Collapse Empty Cells and Use Transparent GIFs are selected. 3 Under Layout Tools, make sure that Prevent Layer Overlaps is selected. 4 Click OK. The layers are now converted to a table. Note: Dreamweaver sets the space between the table columns and rows using transparent GIFs. After converting layers to a table, you'll see the file tranparent.gif in the root level of your site folder. Don't move this file to your Images folder; if you do, you'll see broken image icons when you view your page in a browser. 5 Close the Layer palette. 6 Save your file.
<url>html/01tutorial6.html</url>
<title>Creating rollover images</title> Creating rollover images A rollover image is an image whose display changes when the pointer is "rolled" over it. You create a rollover image by attaching a behavior to an image. 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 ("rolls") over an object. Actions are pieces of prewritten 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 predefined actions that you can attach to page elements. In this part of the tutorial, you'll apply Swap Image actions to the Our Story, Products, and This Week images so that the images are highlighted when the mouse passes over them (that is, when the onMouseOver event occurs). For example, when the Our Story 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 Our Story image will look like this (the identical image with a different background color) when the mouse passes over it: You'll continue working on the home page file to attach behaviors to the navigation images on your page. Then you'll preview the page in a browser to test the behaviors. To attach a behavior to an image on the page: 1 In the Document window, click the Our Story image to select it. 2 Choose Window > Behaviors or press F8 to open the Behavior inspector, which lists all behaviors defined for a selected element. 3 In the Events For pop-up menu, 3.0 and Later Browsers should already be displayed. If it is not, select it. 4 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. In the Images list, you'll see a list of all images on the page, with the Our Story image selected. This is the original image, which will be replaced with a highlight image when the mouse pointer passes over it. 5 Click Browse to navigate to the Scaal_site/Images folder, and select btn_ourstory_over.gif, then click Select (Windows) or Choose (Macintosh) to select the image. This image replaces the original image during the onMouseOver event. 6 Accept the default settings for preloading and restoring images. The Preload Images option loads the swap image into the browser's cache as the page loads, so that when the user first moves the mouse pointer over the Our Story image, there is no noticeable pause before the highlight image appears. The Restore Images onMouseOut option automatically assigns the Swap Image Restore action to the onMouseOut event for this image. This returns the image to its original state when the user moves the mouse pointer away from it. 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. (This behavior was defined when you accepted the default options in the Swap Image dialog box.) 8 Repeat steps 4 to 7 to attach Swap Image actions and onMouseOver events to the Products and This Week images: Select the Products image, then in the Swap Image dialog box, set the source of the Products swap image to btn_products_over.gif. Select the This Week image, then in the Swap Image dialog box, set the source of the This Week swap image to image btn_thisweek_over.gif. 9 Close the Behavior inspector. 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 you preview a document. 2 Move the mouse pointer over the Our Story, Products, and This Week images to see how they change. 3 When you finish previewing the file, close the browser window. 4 Return to Dreamweaver and choose File > Save to save the changes you made to the home page. Now, you'll start creating the files your home page will link to.
<url>html/01tutorial7.html</url>
<title>Import a Word HTML document</title> Import a Word HTML document The tutorial file for the Our Story page contains a document that was created in Microsoft Word and saved as an HTML document. You'll import this document into Dreamweaver, then clean up any nonstandard HTML code in the document using a new Dreamweaver feature called Clean Up Word HTML. The Clean Up Word HTML feature provides options for cleaning up or fixing HTML tags, defining CSS (Cascading Style Sheets) elements, setting a page background color, removing Word-specific markup tags, and converting Word font sizes and headings to HTML size attributes. To import a word HTML document: 1 With the my_scaal_home page still open, choose File > New to open a new file. 2 Choose File > Import > Import Word HTML to import a Word HTML document. 3 In the Select Word HTML File to Import dialog box, navigate to DW3_ourstory_word.html, then click Select (Windows) or Choose (Macintosh) to select the Word HTML file. You are prompted to save your document. 4 Click OK. The Our Story document opens in the background, and the Clean Up Word HTML dialog box appears in front of the document. Clean up Word HTML For the purpose of this tutorial, you'll accept the default settings in the Clean Up Word HTML dialog box. These options set the background color of the document to white, retain much of the current formatting, and clean up the HTML coding in the file. To clean up the document: 1 In the Clean Up Word HTML dialog box, all of the options on the Basic tab should be selected by default. Make sure they are all selected, and click OK. The Clean Up Word HTML log appears, detailing the results of the cleanup. 2 Click OK. You see a blank document. This is the new document you created before you imported the Word HTML document. The imported document is behind the blank document. 3 Close the blank document. 4 Click in the Our Story document to make it the active window. 5 Choose File > Save As to save the Our Story document; name it my_ourstory . Notice that the Our Story document retains the table formatting and font attributes of the original Word HTML file.
<url>html/01tutorial8.html</url>
<title>Format text using HTML styles</title> Format text using HTML styles Now that you've imported the Our Story document, you'll add formatting changes to the text. An easy way to apply formatting to a document is by using HTML styles. An HTML style consists of one or more HTML tags; it can include colors, fonts, size, and so on. You can create HTML styles to apply to an entire paragraph or to apply to selected text. Once you create an HTML style, you can apply it to any page in the current site. Unlike CSS styles (which are styles that adhere to the Cascading Style Sheets specification), HTML style formatting affects only text that you apply it to, or text that you create using a selected HTML style. If you change the formatting of an HTML style you have created, text that was originally formatted with that style is not updated. Applying HTML styles In this tutorial, you'll use an HTML style to format text in the Our Story document. To open the HTML Style palette: Choose Window > HTML Styles. The HTML Style palette appears. Notice that the styles in the palette are for the my_tutorial site. There are three items in the palette: The first two items are Dreamweaver commands, Clear Selection Style and Clear Paragraph Style. Use these commands to clear existing styles from text you've selected in your document. The other item is an HTML paragraph style named body , created for you to use in this tutorial. To apply an HTML style to a paragraph: 1 Make sure the Apply option is selected in the lower left corner of the HTML Style palette. 2 In the my_ourstory document, place the insertion point in the first paragraph. Note: You can place the insertion point anywhere within a paragraph to apply a style to a paragraph. 3 In the HTML Style palette, click the body style. The text in the first paragraph is reformatted in the new style. 4 Apply the body style to other paragraphs in the document. Creating HTML styles Next, you'll create an HTML style to add emphasis to the word Scaal in the document. To create an HTML style for a selection: 1 Click the New Style icon at the bottom of the HTML Style palette. The Define HTML Style dialog box appears. 2 In the Name field, type scaal . 3 For Apply To, select Selection. This applies the style to a selected range of text rather than a whole paragraph. 4 For When Applying, leave the default setting, Clear Existing Style, which clears any styles applied to the selected text when you apply the new style. 5 For Font Attributes, select the desired attributes. Here are some suggestions: Font: Arial, Helvetica, sans-serif Size: 3 Color: #CC9933 (or use the color picker to select a gold color) Style: click Other, then select Emphasis 6 Click OK. The new style is added to the HTML Style palette. Notice the a that precedes the Scaal style: this icon identifies a style as a selection style rather than a paragraph style. To apply an HTML style to a selection: When applying a style to a selection, you must select the range of text that you want to reformat. 1 In the Document window, select the word Scaal in the first paragraph. 2 Select the scaal style in the HTML Style palette. The text displays the new style in the document. 3 Apply the scaal style to a few more selections, then close the HTML Style palette. 4 Choose File > Save to save the changes you made to the my_ourstory document. 5 Choose File > Close to close the document.
<url>html/01tutorial9.html</url>
<title>Create a visual map of your site</title> Create a visual map of your site Use the Dreamweaver Site Map option to provide a high-level visual representation of the structure of a local site. You can also use the Site Map view to add new files to the site; to add, remove, and change links; and to create a graphic file of the site that you can export to and print from an image editing application. In the Site Map window, 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. You'll set DW3_scaal_home.html as the home page for the my_tutorial site. This page is similar to the home page you created. (It's essentially the same as the my_scaal_home document, but images and text formatting have already been added.) There are a number of ways to define a site home page. The easiest way to set a home page is by using the context menu. To set a home page: 1 Click the title bar of the Site window if visible, to make it active, or choose Window > Site Files. 2 In the Site window, in the Local Folder list, locate the DW3_scaal_home.html file. Right-click (Windows) or Control-click (Macintosh) the icon for the DW3_scaal_home.html file. 3 From the context menu, choose Set as Home Page. To view a site map: 1 Click the Site Map icon in the top left area of the Site window. The Site window now appears with two views of your local site: on the left is a site map, which graphically represents the current structure of the Scaal site (with DW3_scaal_home.html as the home page), and on the right is a list of the local folder's contents . The DW3_scaal_home page currently has no links. You'll add links to this page in the next section of this tutorial. Leave the Site window open for now, so you can see how the site map updates as you add links to the home page.
<url>html/02basics1.html</url>
<title>Dreamweaver basics overview</title> Dreamweaver basics overview Getting started in Dreamweaver is as easy as opening an existing HTML document or creating a new one. But to get the most out of your Dreamweaver experience, you should understand the basic concepts behind the Dreamweaver work area and how to choose options that best fit your style of working. Click the arrow button to see an animated introduction to getting started in the Dreamweaver work area.
<url>html/02basics10.html</url>
<title>Launcher</title> Launcher The Launcher contains buttons for opening and closing various palettes, windows, and inspectors. To show or hide the Launcher, choose Window > Launcher. To specify which inspectors and palettes appear in the Launcher, see Customizing the Launcher . To switch the Launcher's orientation from horizontal to vertical, click the orientation icon at the lower right. For information on the default Launcher buttons, see About the Site window , Library palette , Formatting text using HTML styles , CSS Style palette , Behavior inspector , About the History palette , or HTML Source inspector .
<url>html/02basics11.html</url>
<title>Customizing the Launcher</title> Customizing the Launcher Use the Floating Palettes preferences to determine which items appear in the Launcher and in the Mini-Launcher at the bottom of the Document window. To specify which floating palettes appear in the Launcher and Mini-Launcher: 1 Choose Edit > Preferences, then select Floating Palettes from the category list. The items selected to display in the Launcher and Mini-Launcher are listed in the Show in Launcher box. By default, seven items are listed. 2 To add an item to the Launcher and Mini-Launcher, click the plus (+) button. 3 To remove an item from the Launcher and Mini-Launcher, highlight the item and click the minus (-) button. 4 To move an item up or down the list, corresponding to moving it left or right (respectively) in the Launcher and Mini-Launcher, select the item and then click the arrow keys. 5 Click OK. The Launcher and Mini-Launcher change to show the items you specified.
<url>html/02basics12.html</url>
<title>Object palette</title> Object palette The Object palette contains buttons for inserting objects such as tables, layers, and images. To show or hide the Object palette, choose Window > Objects. To insert an object, click the corresponding Object palette button or drag the button's icon into the Document window. Hold down the Control (Windows) or Option (Macintosh) key while inserting an object to bypass the object-insertion dialog box and instead insert an empty placeholder object of the specified type. (For instance, to insert a placeholder for an image, without specifying an image file, hold down Control or Option and click the Image button.) The Object palette contains six panels by default: Characters, Common, Forms, Frames, Head, and Invisibles. Use the pop-up menu at the top of the palette to switch between panels. You can modify any object in the palette or create your own objects; see Changing the Object palette . The Object palette contains the following panels: The Common panel contains the most commonly used objects, such as Image, Table, and Layer. The Characters panel contains special characters such as the copyright symbol, curved quotation marks, and trademark symbols. (Note that these symbols may not display correctly on browsers other than Netscape Navigator 3 and 4 and Internet Explorer 3 and 4.) The Forms panel contains buttons for creating forms and form elements. The Frames panel contains common frameset structures. The Head panel contains buttons for adding various HEAD elements, such as META , KEYWORDS , 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 invisible-element icons in the Document window to select the objects and change their properties. See About invisible elements . Some of the General preference settings affect the Object palette. To modify these preferences, choose Edit > Preferences and then choose General. When you insert objects such as images, tables, scripts, and HEAD elements, a dialog box prompts you for additional information. You can suppress these dialog boxes by turning off the Show Dialog When Inserting Objects option. When you insert an object with this option off, the object is given default attribute values. Use the Property inspector to change object properties after inserting the object. The 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 Places an image at the insertion point. A dialog box appears so that you can specify an image file. See Inserting an image . Rollover Prompts you to specify two image files that are used to define a rollover. A rollover is an image that changes when the pointer moves across it. See Creating a rollover . Table Places a table at the insertion point. See Tables overview . Tabular Data Places a table at the insertion point, filled with table data from another file (such as a file exported from Microsoft Excel as a delimited text file). See Importing table data . HR Places a horizontal rule at the insertion point. See Horizontal rules . Navigation Bar Inserts a set of images to be used for navigating through a site. See Creating navigation bars . Layer Creates a layer. Click the Layer 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 . Line Break Places a line break ( <br> ) at the insertion point. You can also press Shift+Enter (Windows) or Shift+Return (Macintosh) to insert a line break. E-Mail Link Places an e-mail link at the insertion point. See Creating an e-mail link . Date Places the current date at the insertion point. A dialog box appears in which you can specify a format for the date and indicate whether Dreamweaver should update the date automatically every time you save the file. See Inserting dates . Flash Places a Flash movie at the insertion point using the OBJECT and EMBED tags. A dialog box appears in which you can browse to a movie file. The CODEBASE , CLASS ID , and PLUGINSPAGE attributes have been preset with the proper values for Flash Player; use the Property inspector to specify other attributes for the movie. See Flash movie properties . Shockwave Places a Shockwave movie at the insertion point using the OBJECT and EMBED tags. The CODEBASE , CLASS ID , and PLUGINSPAGE attributes have been preset with the proper values for Shockwave. A dialog box appears so that you can specify a source file for the movie, or you can use the Property inspector to specify a source file. See Shockwave properties . Generator Places a Generator object at the insertion point. See Inserting Generator objects . Fireworks HTML Places HTML and images produced by Fireworks at the insertion point. See Inserting Fireworks HTML . Applet Places a Java applet at the insertion point. (The Java applet will appear only when you view the document in a browser.) A dialog box appears in which you can specify the file that contains the applet's code, or click Cancel to leave the source unspecified. Use the Property inspector to specify other properties for the Java applet. See Java applet properties . ActiveX Places an ActiveX control at the insertion point. Use the Property inspector to specify a source file and other properties for the ActiveX control. See ActiveX properties . Plugin Uses the EMBED tag to insert a file (at the insertion point) that requires a Netscape plugin for playback. A dialog box appears in which you can specify the source file. See Netscape Navigator plugin properties . SSI Places a server-side include at the insertion point. A dialog box appears in which you can choose a source file for the include. See Using server-side includes . Characters The Characters panel in the Object palette contains some special characters: Copyright Places a copyright symbol at the insertion point. Registered Places a registered-trademark symbol at the insertion point. Trademark Places a trademark symbol at the insertion point. Pound Places a pound (currency) symbol at the insertion point. Yen Places a yen (currency) symbol at the insertion point. Euro Places a euro (currency) symbol at the insertion point. Em-Dash Places an em dash at the insertion point. Left Quote Places an opening, curved double quotation mark at the insertion point. Right Quote Places a closing, curved double quotation mark at the insertion point. Other Provides a set of special characters, such as é and ç, for you to choose from. When you select one and click OK, it's placed at the insertion point. Forms The Forms panel in the Object palette contains buttons for creating forms and form elements. See Forms overview . Place the insertion point within a form boundary before inserting a form element; form elements outside of forms do not appear in a browser. If you attempt to insert a form element outside of a form, a dialog box asks whether to add a form tag around the form element; click Yes to create a new form containing the element, or No to insert the element without a form. Form Places a form at the insertion point. Forms are simply containers for form elements; the form boundaries are not visible in the Document window unless View > Invisible Elements is on. See Invisible Elements preferences . Text Field Places a text field at the insertion point. Set the name, size, and initial value in the Property inspector. See Text field properties . Button Places a button with a default NAME and VALUE of " Submit " at the insertion point. Place the insertion point within a form boundary before inserting a button; buttons outside forms do not appear in browsers. Use the Property inspector to set the name, label, and action. See Button properties . Checkbox Places a checkbox at the insertion point. Set the name, value when checked, and initial state in the Property inspector. See Checkbox properties . Radio Places a radio button at the insertion point. Set the name, value when checked, and initial state in the Property inspector. See Radio button properties . List Menu Places a list or pop-up menu at the insertion point. Set the name, type, and list values in the Property inspector. See List/Menu properties . File Field Places a file field at the insertion point. Set the name, size, and initial value in the Property inspector. See File field properties . Image Field Places an image field at the insertion point. Set the name, size, alternative text, and source file in the Property inspector. See Image field properties . Hidden Field Inserts a hidden field at the insertion point. Set the name and value in the Property inspector. See Hidden field properties . Jump Menu Places a pop-up menu of URLs at the insertion point. Set the list values in the dialog box that appears. See Creating jump menus . Frames The Frames panel in the Object palette contains buttons for creating common frameset layouts. See Frames overview . Left Creates a frameset and adds a narrow empty frame to the left of the current frame. Right Creates a frameset and adds a narrow empty frame to the right of the current frame. Top Creates a frameset and adds a narrow empty frame above the current frame. Bottom Creates a frameset and adds a narrow empty frame below the current frame. Left & Top Creates a frameset and adds a narrow empty frame to the left of the current frame, a narrow empty frame above the current frame, and a small empty frame in the upper left corner of the frameset. Left Top Creates a frameset and adds a narrow empty frame above the current frame, and another one to the left of both frames. Top Left Creates a frameset and adds a narrow empty frame to the left of the current frame, and another one above both frames. Split Creates a frameset and splits it in quarters, creating three new empty frames and placing the current frame in the lower right quadrant. Head The Head panel contains objects for adding elements to the HEAD section of your documents. Meta Inserts a META tag into the HEAD section of your document. A dialog box appears in which you can enter information for META attributes. See META properties . Keywords Inserts a Keywords META tag into the HEAD section of your document. A dialog box appears in which you can enter keywords for the document. See Keywords properties . Description Inserts a Description META tag into the HEAD section of your document. A dialog box appears in which you can enter text that describes the document. See Description properties . Refresh Inserts a Refresh META tag into the HEAD section of your document. A dialog box appears in which you can enter 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 section of your document. A dialog box appears in which you can enter a base URL for the document's links. See Base properties . Link Inserts a LINK tag into the HEAD section of your document. A dialog box appears in which you can enter link information. Note that this is not a hyperlink; it is used most often to specify an external style sheet. 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 specific elements are visible in the Document window when View > Invisible Elements is on. See Invisible Elements preferences .) Anchor Places a named anchor ( <a name=""> ) at the insertion point. A dialog box appears; enter a name for the anchor. See Linking to a named anchor . Comment Places a comment in the HTML at the insertion point. A dialog box appears; enter text for the comment. See Inserting comments . Script Places a script at the insertion point. A dialog box appears; choose the language and enter text for the script. See Inserting scripts . NBSP Places a nonbreaking space ( ) at the insertion point. (A nonbreaking space prevents a line break from occurring between two words.)
<url>html/02basics13.html</url>
<title>Using the History palette</title> Using the History palette The History palette keeps track of every step of your work in Dreamweaver. To display the History palette, choose Window > History. You can use the History palette to undo multiple steps at once, to replay steps you've performed, and to automate tasks by creating new commands. For details, see About the History palette .
<url>html/02basics14.html</url>
<title>Context menus</title> Context menus Dreamweaver makes extensive use of context menus, which provide a method for quickly accessing the most useful commands and properties related to the object or window you're working with. Context menus list only commands pertaining to the current selection. To use context menus: 1 Open the context menu by right-clicking (Windows) or Control-clicking (Macintosh) the object or window. 2 Select the command from the context menu and release the mouse button.
<url>html/02basics15.html</url>
<title>Using the HTML Source inspector</title> Using the HTML Source inspector The HTML Source inspector shows the code that browsers use to display the document as a Web page. To show or hide the HTML Source inspector, choose Window > HTML Source. Changes you make in the Document window are immediately reflected in the HTML Source inspector. When you enter HTML into the HTML Source inspector and then click outside the inspector, corresponding changes appear in the Document window. For more information, see HTML Source inspector . For minor editing of HTML tags, you can use the Quick Tag Editor instead of showing the HTML Source inspector. To display the Quick Tag Editor, press Control+T (Windows) or Command+T (Macintosh), or choose Modify > Quick Tag Editor. For more information, see Editing an HTML tag in the Document window .
<url>html/02basics16.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 or topic. See the following topics for information about the various preference options: General preferences Style Sheet Format preferences (for CSS Style Sheet Format preferences) Using an external text editor with Dreamweaver (for External Editors preferences) Floating Palettes preferences Fonts/Encoding preferences Highlighting preferences HTML Colors preferences Setting HTML Format Preferences HTML Rewriting preferences Invisible Elements preferences Layer preferences Preview in Browser preferences Setting the Quick Tag Editor preferences Site FTP preferences Status Bar preferences Viewing server-side includes in Dreamweaver (for Translation preferences) Note: Although Date appears in the list of translators in the Translation panel of the Preferences dialog box, the Date preferences are preset to operate correctly. Leave the Date preference set to In All Files to ensure proper functioning of the date mechanism. See Inserting dates . General preferences The General preferences control the general appearance of Dreamweaver. 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. You can set this preference to always update links automatically, never update links, or prompt you to perform an update. See Managing links . Dictionary Lists the dictionaries available in the Configuration/Dictionaries folder inside the Dreamweaver application folder. If a dictionary contains multiple dialects or spelling conventions (for example, U.K. English and U.S. English), the dialects are listed separately in the Dictionary pop-up menu. Color Scheme (Windows only) specifies the colors of Dreamweaver palettes and inspectors. The Dreamweaver Two-Tone option adds gray to tabs; Desktop Two-Tone adds color from your system preferences to tabs; and Desktop Standard doesn't add any background color to tabs. (On the Macintosh, the only color scheme allowed is Desktop Two-Tone, so this option doesn't appear.) Object Palette Lets you view the contents of the Object palette as Icons and Text, Icons Only, or Text Only. Add Extension when Saving Sets the default file extension for the Dreamweaver documents you save. For example, if you set this option to .htm, and you later save a document without supplying a file extension, Dreamweaver will automatically add the .htm extension. See Changing the default file type for information about file types and extensions displayed in the File > Open dialog box. 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, each file you open appears 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 whether Dreamweaver prompts you to enter additional information when inserting images, tables, Shockwave movies, and certain other objects using the Object palette or the Insert menu. 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 and Fireworks HTML, a dialog box always appears when you insert the object, regardless of this option setting. Enable Double-Byte Inline Input Enables you to enter double-byte text directly into the Document window if you are using a development environment or language kit that facilitates double-byte text (such as Japanese characters).When this option is deselected, a text input window appears for entering and converting double-byte text; the text appears in the Document window after it is accepted. See also Fonts/Encoding preferences . Warn When Opening Read-Only Files Warns you when you open a read-only (locked) file. Maximum Number of History Steps Determines the number of steps the History palette retains and shows. (The default value should be sufficient for most users.) If you exceed the given number of steps in the History palette, the oldest steps are discarded. See About the History palette .
<url>html/02basics17.html</url>
<title>Fonts/Encoding preferences</title> Fonts/Encoding preferences Use Fonts/Encoding preferences to set a default font encoding for new documents and to set the fonts that Dreamweaver uses to display each font encoding. A document's encoding determines how the document is displayed in a browser. Dreamweaver's font settings let you work with text in the font and size you prefer without affecting how the document appears when viewed by others in a browser. To change the encoding of the current document: Choose Modify > Page Properties and then select an encoding from the Document Encoding pop-up menu. To change the default encoding to be used when creating new documents: Choose Edit > Preferences, click Fonts /Encoding in the Category list, and choose an encoding from the Default Encoding pop-up menu. To set the fonts to use for each type of encoding: 1 Choose Edit > Preferences and click Fonts /Encoding in the Category list. 2 Select the encoding type (such as Western (Latin1) or Japanese) from the Font Settings list, then choose fonts to use for that encoding from the font pop-up menus below the Font Settings list. Default Encoding Specifies the encoding to be used when a new page is created, as well as when a document is opened that does not specify any encoding. The default encoding is stored with the document in a META tag inserted in the head of the document; it 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 you specify Western (Latin1), this <meta> tag is inserted: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">. Dreamweaver displays the document using the fonts you specify in Font Settings for the Western (Latin1) encoding; a browser displays the document using the fonts the browser user specifies for the Western (Latin1) encoding. If you specify Japanese (Shift JIS), this <meta> tag is inserted: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> . Dreamweaver displays the document using the fonts you specify for the Japanese encodings; a browser displays the document using the fonts the browser user specifies for the Japanese encodings. Font Settings Lets you specify the set of fonts to be used in Dreamweaver for documents that use a given type of encoding. For example, to specify fonts to use for Japanese documents, select Japanese from the Font Settings list and then choose a proportional font, a fixed font, and an HTML Source inspector font from the menus below; all documents in Japanese encodings are then displayed using those specified fonts. Note: To appear in the font pop-up menus, a font must be installed on your computer. For example, to see Japanese text you must have a Japanese font installed. To specify the fonts used for U.S. English and all Western European languages, choose Western from the Font Settings list, and then choose a set of three fonts from the font pop-up menus. To set appropriate double-byte fonts for Asian languages, choose Japanese, Traditional Chinese, Simplified Chinese, or Korean. (To display an Asian language, you must be using an operating system that supports double-byte fonts.) You may also choose fonts for Central European, Cyrillic, Greek, Icelandic Mac, or Other encodings. Proportional Font Is the font Dreamweaver uses to display normal text (for example, text in paragraphs, headings, and tables). The default depends on your system's installed fonts. For most U.S. systems, the default is Times New Roman 12 pt. (Medium) on Windows and Times 12 pt. on the Macintosh. (Note that this setting does not affect how visitors see your page in a browser.) Fixed Font Is the font Dreamweaver uses to display text within <pre> , <code> , and <tt> tags. The default depends on your system's installed fonts. For most U.S. systems, the default is Courier New 10 pt. (Small) on Windows and Courier 12 pt. on the Macintosh. (Note that this setting does not affect how visitors see your page in a browser.) HTML Inspector Is the font used for all text that appears in the HTML Source inspector. The default depends on your system's installed fonts.
<url>html/02basics18.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 external 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 . You can configure Dreamweaver to launch a different editor for each file type. See Launching an external media editor . For information about adding animation to your site with Flash movies, see Inserting Flash movies . To learn how to add interactivity to your site with Shockwave movies, see Inserting Shockwave movies .
<url>html/02basics2.html</url>
<title>About the Dreamweaver work area</title> About the Dreamweaver work area The Dreamweaver work area is flexible, to accommodate different styles of working and levels of expertise. It has some components you will use constantly: The Document window displays the current document as you create and edit it. The Launcher contains buttons for opening and closing your 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. You can set which icons appear in the Launcher using the Floating Palettes panel of the Preferences dialog box. 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 or text, and it allows you to modify those properties. Context 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/02basics3.html</url>
<title>Using the Window menu</title> Using the Window menu The Window menu provides easy access to all of the windows, inspectors, and palettes in Dreamweaver. A check mark next to an item in the Window menu indicates that the named item is currently open. (Though it may be obscured behind other windows.) To display an item that doesn't have a check mark next to its name, select the item name from the menu. In general, if you aren't sure where to look for a Dreamweaver feature, try the Window menu.
<url>html/02basics4.html</url>
<title>Dockable floating palettes</title> Dockable floating palettes Most of the palettes and inspectors in Dreamweaver can be docked , or combined into a single floating palette with multiple tabs. This makes it easy to access the information you need without cluttering your workspace. (The Launcher, Property inspector, and Site window cannot be docked.) To combine two or more palettes to create a tabbed palette: 1 Drag the tab (not the title bar) of one floating palette over another floating palette. When a highlighted border appears around the target palette, release the mouse button. 2 Click any tab in the window to bring the corresponding palette to the front. Because the Object palette does not have a tab, you can't dock it with another palette by dragging the Object palette onto the other palette; however, you can drag the tab of another palette over the Object palette to combine them. To remove a palette from the tabbed palette: Drag its tab out of the window. To move a palette from one tabbed palette to another: Drag its tab to the other tabbed palette. When a highlighted border appears around the target palette, release the mouse button.
<url>html/02basics5.html</url>
<title>Floating Palettes preferences</title> Floating Palettes preferences Use Floating Palettes preferences to specify which palettes and inspectors always appear in front of the Document window, and which ones are allowed to be obscured by the Document window. Also use this preferences panel to specify which palettes and inspectors appear in the Launcher. (All items that appear in the Launcher also appear in the Mini-Launcher.) To specify where each palette appears in relation to the Document window: 1 Choose Edit > Preferences, then select Floating Palettes from the category list. By default, all windows, palettes, and inspectors are selected to appear in front of the Document window. 2 Deselect the windows, palettes, and inspectors that you want to appear in back of the Document window. For example, if you want to allow the Document window to obscure the HTML Source inspector, deselect the HTML option. The HTML Source inspector now appears in front of the Document window only when it is active. Similarly, if you want to allow the Document window to obscure any floating palettes that you have added by customizing Dreamweaver, deselect All Other Floaters.
<url>html/02basics6.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 one of these tags to highlight its contents in the Document window. Click <body> to select the contents of the whole body of the document. 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 that appear by default on the Mini-Launcher are the same as the ones on the Launcher: they open the Site window, Library palette, HTML Styles palette, CSS Styles palette, Behavior inspector, History palette, and HTML Source inspector. (You can specify which buttons appear in the Launcher and Mini-Launcher; see Customizing the Launcher .) The estimated document size and download time of the page, including all dependent files such as images and Shockwave movies, appear to the left of the Mini-Launcher. See Checking download time and size . The Window Size pop-up menu lets you resize the document window to predetermined or custom dimensions. See Resizing the Document window .
<url>html/02basics7.html</url>
<title>Resizing the Document window</title> Resizing the Document window The current dimensions (in pixels) of the Document window appear in the window's status bar. Clicking the window size brings up the Window Size pop-up menu, which allows you to set the window size to fit any of several common monitor sizes. To help you design a page that looks good at a specific size (or several different sizes), you can adjust the Document window to any of the sizes listed on the pop-up menu. Note: The window size is given as the inside dimensions of the browser window, without borders; the monitor size is listed in parentheses. So, for example, the option "536 x 196 (640 x 480, Default)" is the window size to use if your visitors are likely to be using Internet Explorer or Netscape Navigator in their default configurations on a 640 x 480 monitor. To resize the Document window to a predetermined size: Choose one of the sizes from the pop-up menu at the bottom of the Document window. To change the values listed in the Window Size pop-up menu: 1 Choose Edit Sizes from the Window Size pop-up menu. 2 Click any of the Width or Height values in the Window Sizes list and type a new value. To make the Document window adjust only to a specific width (leaving the height unchanged), select a Height value and delete it. 3 Click the Description field to enter descriptive text about a specific size. To add a new size to the Window Size pop-up menu: 1 Choose Edit Sizes from the Window Size pop-up menu. 2 Click the blank space below the last value in the Width column. 3 Enter values for Width and Height. 4 Click the Description field to enter descriptive text about the size you added. For example, you might type "SVGA" or "average PC" next to the entry for an 800 x 600 pixel monitor, and "17-in. Mac" next to the entry for an 832 x 624 pixel monitor. Note that most monitors can be adjusted to a variety of pixel dimensions.
<url>html/02basics8.html</url>
<title>Status Bar preferences</title> Status Bar preferences Use Status Bar preferences to set options for the status bar at the bottom of the Document window. To display these preferences, choose Edit > Preferences and select Status Bar. Window Sizes Lets you customize the window sizes that appear in the status bar's pop-up menu. See Resizing the Document window . 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.
<url>html/02basics9.html</url>
<title>Property inspector</title> Property inspector The Property inspector allows you to examine and edit properties for the currently selected page element. (A page element is an object or text.) You can select page elements in either the Document window or the HTML Source inspector. To show or hide the Property inspector, choose Window > Properties. Most changes you make to properties are immediately applied in the Document window. (There are some properties for which you may need to click outside their property-editing text fields, or press Tab to switch to another property, to apply a change.) Which properties appear in the Property inspector depends on the element selected. For information on specific properties, select an element in the Document window and then click the Help icon in the upper right corner of the Property inspector. The Property inspector initially displays the most commonly used properties of the selected element. Click the expander arrow in the lower right corner of the Property inspector to see more of the element's properties. (In a few cases, certain obscure properties may not appear even in the expanded Property inspector.)
<url>html/03SitesandDocs1.html</url>
<title>Sites and documents overview</title> Sites and documents overview A Web site is a set of linked documents with shared attributes, such as related topics, a similar design, or a shared purpose. You can create individual documents with Dreamweaver. But most Web designers create coherent sites, not merely collections of assorted unrelated documents. Dreamweaver is a site creation and management tool as well as a document creation and editing tool. Creating a site from a collection of disparate premade documents is much more difficult than creating new documents from a common site design. For best results, design and plan your site before you create any of the pages that will populate it. Note: If you can't wait to start creating documents immediately, you can try out some of Dreamweaver's document-creation tools and make a sample document. (See Creating and editing HTML documents .) But don't start serious document development until you've set up a site. The first step in creating a Web site is planning. See About site planning . The next step is to set up the basic structure of the site; see Creating a local site . If you already have a site on a Web server and you want to begin using Dreamweaver to edit that site, see Editing and updating an existing site . Once you've created the local site, you can populate it with documents. 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. As you create and work with documents, Dreamweaver automatically generates the underlying HTML. Use the HTML Source inspector to examine or edit the HTML source code. You can create documents in Dreamweaver starting from either blank HTML pages or templates. You can also open and modify HTML documents created in other applications. See Creating and editing HTML documents . 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. See Setting document properties . Add text to documents by typing in the Document window or by pasting text from other sources. Add images, horizontal rules, and other objects by using the Object palette or commands on the Insert menu. See Adding text and inserting objects . As you add content, you can select and modify objects directly in the Document window. In some cases, you may need to select markers that represent page elements that are not visible in the Document window. See Selecting elements in the Document window . To help you manage your site, Dreamweaver displays the files in the site 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 Viewing the site structure . When you have some documents in your site, you can create links to connect them to other documents within your site, to documents on remote sites, or to e-mail addresses or scripts. See Creating links . Finally, set up a remote site corresponding to your local site, and upload the local files to the remote site to make your pages visible to visitors. See Setting up a remote site .
<url>html/03SitesandDocs10.html</url>
<title>Creating and editing HTML documents</title> Creating and editing HTML documents Now that you have a site set up, you can begin to create the documents (pages) that constitute the site. (If you haven't set up a site yet, see Creating a local site .) You can create new, blank HTML documents in Dreamweaver, or you can open an existing HTML document, regardless of how it was created. You can also create a new document based on a template. Note: When you save your documents, avoid using spaces and special characters in file and folder names whenever possible. To create a blank HTML document in a new Document window: Choose File > New from an existing Document window (Windows) or from the main menu bar (Macintosh). If you open the HTML Source inspector (choose Window > HTML Source), you can see that the new document isn't really completely blank—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 Source inspector open and watch as the HTML source code is created. For more information on the HTML Source inspector, see HTML Source inspector . Note: Do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server. Many servers change these characters during upload, which will cause any links to the files to break. To open an existing HTML file, do one of the following: Choose File > Open. If the file was created using Microsoft Word, choose File > Import > Import Word HTML. Dreamweaver opens the file and then removes extraneous or unnecessary HTML code generated by Word. (Microsoft Word 97 and later versions provide a Save as HTML feature, which adds extra HTML code as it converts a document to HTML.) For more information, see Cleaning up Microsoft Word HTML . Note: You can't directly import a Microsoft Word (.doc) file into Dreamweaver. If you want to import the contents of a Word file, launch Word and save the file as HTML before importing it into Dreamweaver. To create a new document based on a template: 1 Choose File > New From Template. A dialog box appears, listing the templates available for the current site. (You must create templates before you can create documents based on them; see Creating templates .) When you create a document based on a template, some parts of the document are locked so that they can't be changed. (The template file determines which regions are editable and which are not.) This ensures consistency when you use a template for multiple documents in a site. 2 Select a template and click Select. To modify the editable parts of the template, select the placeholder content and type over it. The noneditable parts of the template are identified by a highlight color. To customize the highlight color, see Template preferences . To learn more about designing and working with templates, see Templates and libraries overview .
<url>html/03SitesandDocs11.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, switch to Dreamweaver, position the insertion point in the Document window, and choose Edit > Paste as Text. Dreamweaver doesn't preserve text formatting applied in the other application, but it does preserve line breaks. 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 insertion point 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. Note: To insert multiple consecutive spaces, use Insert > Non-Breaking Space. (But if you want to line up items in columns, use a table instead.)
<url>html/03SitesandDocs12.html</url>
<title>Inserting dates</title> Inserting dates Dreamweaver provides a convenient Date object, which inserts the current date in whatever format you prefer and provides the option of updating that date whenever you save the file. To insert the current date into a document: 1 In the Document window, place the insertion point where you want the date to be inserted. 2 Do one of the following: Choose Insert > Date. Open the Object palette by choosing Window > Objects, then open the Common panel and click the Date button. 3 In the resulting dialog box, select a format for the name of the day of the week, a format for the date, and a format for the time. 4 If you want the inserted date to be updated every time you save the document, select Update Automatically on Save. If you want the date to become plain text when it's inserted and never update automatically, deselect that option. 5 Click OK to insert the date.
<title>Inserting special characters</title> Inserting special characters You can insert several special characters (in the form of HTML entities) using the Characters panel of the Object palette. To insert a special character into a document: 1 In the Document window, place the insertion point where you want to insert a special character. 2 Do one of the following: Choose the name of the character from the Insert > Characters submenu. Open the Object palette (by choosing Window > Objects), select the Characters panel, and choose a character from the list. There are many other special characters available; to select one of them, choose Insert > Characters > More and select a character, then click OK.
<url>html/03SitesandDocs15.html</url>
<title>Horizontal rules</title> Horizontal rules Horizontal rules (lines) are useful for organizing information. On a page, you can visually separate text and objects with one or more rules. To create a horizontal rule: 1 In the Document window, place the insertion point 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, and modify the properties as desired. These are the properties of a horizontal rule: 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 applies only 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 a solid color.
<url>html/03SitesandDocs16.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 a visible element in the Document window, drag across the element or click the element. To select an invisible element, choose View > Invisible Elements (if it isn't already selected) 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 in the Document window to show the location of the code for invisible elements. To select a complete tag (including its contents, if any), click a tag in the tag selector at the bottom left of the Document window. The tag selector always shows the tags that surround the current selection or insertion point location. For example, if you have defined a link for an image, the HTML code in the HTML Source inspector would look something like this: <a href="http://www.macromedia.com"><img src="agraphic.gif"></a> Clicking the image in the Document window selects the <img> tag in the tag selector, which corresponds to selecting <img src="agraphic.gif"> in the HTML Source inspector. To select the link, click the image in the Document window and then click the < a > that appears in the tag selector, to the left of <img> . To see the HTML code associated with the selected text or object, choose Window > HTML Source to open the HTML Source inspector. (Selections you make in the HTML Source inspector are mirrored in the Document window.)
<url>html/03SitesandDocs17.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. Which element markers appear when you choose View > Invisible Elements depends 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 . You can create certain invisible elements (such as comments, named anchors, and scripts) using the buttons on the Invisibles panel in the Object palette. You can modify these elements using the Property inspector. See Object palette .
<url>html/03SitesandDocs18.html</url>
<title>Invisible Elements preferences</title> Invisible Elements preferences Use Invisible Elements preferences to select which kinds of elements will be visible when you select View > Invisible Elements. Invisible elements such as scripts, comments, and named anchors are represented by markers in the Document window. Showing invisible elements lets you select these markers so that you can change the invisible elements' properties in the Property inspector. To change Invisible Elements preferences: 1 Choose Edit > Preferences, then click Invisible Elements 2 Select which elements should be made visible. A check mark next to the name of the element in the dialog box means the element is visible when View > Invisible Elements is selected. These are the invisible elements whose markers you can show or hide: Named Anchors Displays an icon that marks the location of each named anchor ( 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 each line break ( BR) . This option is deselected by default. Client-side Image Maps Displays an icon marking the location of each client-side image map in the document. Embedded Styles Displays an icon showing the location of CSS styles embedded in the body of the document. If CSS styles are placed in the head of a document, they do 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. Select the icon to select 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 Source inspector or in another HTML editor. Server Markup Tags Displays the location of server markup tags (such as Active Server Page tags and Cold Fusion tags) whose content cannot be displayed in the Document window.
<url>html/03SitesandDocs19.html</url>
<title>Choosing colors</title> Choosing colors In Dreamweaver, many of the dialog boxes, as well as the Property inspector for many page elements, contain a color box, which opens a color 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 in the Property inspector. 2 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 from anywhere on your computer monitor, including outside of the Dreamweaver windows. (If you click the desktop or another application, Dreamweaver picks up the color where you clicked, but you may switch into the other application; in that case, click a Dreamweaver window to continue working in Dreamweaver.) To limit the selection to Web-safe colors, make sure the Web-safe Eyedropper button is enabled. When this option is enabled, the color you select is changed to the closest Web-safe color. Click the button to disable this option. Click the Eraser button to clear the current color without choosing a different color. Click the Palette button to open the system color picker. Colors chosen from the system color picker do not change to the closest Web-safe color even if the Web-safe eyedropper is active.
<url>html/03SitesandDocs2.html</url>
<title>About site planning</title> About site planning In Dreamweaver, the term site can refer either to a Web site or to a local storage location for the documents belonging to a Web site. The usual way to set up a site is to create a folder on your local disk that contains all the files for your site, and to create and edit documents within that folder. You then periodically copy those files to a Web server that allows other people to view the site. This approach is better than creating and editing files on the live Web site itself, because it allows you to test changes in the local site before making them publicly viewable, and then to make a set of changes to the live site all at once instead of one at a time. Planning site structure Organizing your site carefully from the start can save you time later on. If you start creating documents without thinking about where in your folder hierarchy they should go, you may end up with a huge, unwieldy folder full of files, or with related files scattered through a half-dozen similarly named folders. Break down your site into categories. Put related pages into the same folder; for example, your company press releases, contact information, and job postings might all go in one folder, and your online catalog pages in another folder. Use subfolders where necessary. Decide where to put items such as images and sound files. It's convenient to place all your images, for example, in one location, so that when you want to insert an image into a page you know where to find it. Designers sometimes place all of the non-HTML items to be used on a site in a folder called Assets. That folder may contain other folders—for example, an Images folder, a Shockwave folder, and a Sound folder. Or you might have a separate Assets folder for each group of related pages on your site, if there aren't many assets shared among such groups. Use the same structure for local and remote sites. Your local site and your remote Web site should have exactly the same structure. If you create a local site using Dreamweaver and then upload everything to the remote site, Dreamweaver ensures that the local structure is precisely duplicated in the remote site. Planning site navigation Another area where planning pays off is navigation. As you design your site, think about the experience you want your visitors to have. "You are here." It should always be easy for visitors to figure out where in your site they are, and how to return to your top-level page. Searching and indexes. It should be easy for visitors to find any information they want. Feedback. Provide a way for visitors to contact the webmaster (if appropriate) if something is wrong with the site, and to contact other relevant people associated with the company or the site. Use Dreamweaver's navigation tools to help you design navigation for your site. See Linking and navigation overview for more information. Planning template and library use Dreamweaver's templates and libraries allow you to reuse page layouts and page elements in various documents. But it's more difficult to apply reusable layout and elements to a set of existing pages than it is to build new pages using reusable elements from the start. Use templates. If many of your pages will use the same layout, plan and design a template for that layout. Then you can create new pages based on that template, and if you decide to change the layout for all such pages, you can simply change the template. Note: There are certain restrictions on what changes you can make to documents based on templates. Templates are best used in collaborative environments, to ensure that everyone is using the same page layout. Library items may provide more flexibility for use outside of collaborative environments. Use library items. If you know that a certain image or other content will appear on many pages throughout your site, design that content ahead of time and make it a library item. Then if you change that item later, the new version appears on all pages that use it. For more information on reusing page layouts and elements, see Templates and libraries overview .
<url>html/03SitesandDocs20.html</url>
<title>About Web-safe colors</title> About Web-safe colors In HTML, colors are expressed either as 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 of the Dreamweaver color picker to open the system color picker. The system color picker is not limited to Web-safe colors. UNIX versions of Netscape Navigator use a different color palette than the Windows and Macintosh versions. If you are developing exclusively for UNIX 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/03SitesandDocs21.html</url>
<title>Setting document properties</title> Setting document properties 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 to distinguish regular text from hypertext and to see which links have been visited and which have not.
<url>html/03SitesandDocs22.html</url>
<title>Changing the title of a page</title> Changing the title of a page The title of an HTML page 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 . Note that giving the document a file name (by saving it) is not the same as giving the page a title. To change the title of a page: 1 Do one of the following: Choose Modify > Page Properties. Choose Page Properties from the context menu by right-clicking (Windows) or Control-clicking (Macintosh) in the Document window. Choose View > Head Content, then click the Title button when it appears. Open the Property inspector to edit the title. 2 Enter the title for the page in the Title box. 3 If you're using the Page Properties dialog box instead of the Property inspector, 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/03SitesandDocs23.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 contains any transparent pixels, the background color shows through. To define a background image or color: 1 Choose Modify > Page Properties, or select Page Properties from the context menu in the Document window. 2 Set a background image and/or a background color: Click the Browse button (Windows) or Choose button (Macintosh) to browse to and select the image, or enter the path to the background image in the Background Image box. Dreamweaver tiles (repeats) the background image if it does not fill the entire window, just as browsers do. Choose a background color from the Background color box. See Choosing colors .
<url>html/03SitesandDocs24.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. For more information, see Choosing colors . Note: The active link color is the color that a link changes to while it's being clicked. To define default text colors, do one of the following: Choose Modify > Page Properties and then choose colors for the Text Color, Link Color, Visited Links, and Active Links options. Choose Commands > Set Color Scheme and then choose a Background color and a Text and Links color set. The sample box displays how the color scheme will look in the browser.
<url>html/03SitesandDocs25.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 context menu by right-clicking (Windows) or Control-clicking (Macintosh) in the Document window. Title Specifies the page 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 and background 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 . Left Margin and Top Margin Specify the sizes of page margins in the BODY tag. Netscape Navigator ignores these values; Internet Explorer displays margins of the given sizes. For best cross-browser results, provide values for Margin Width and Margin Height whenever you provide values for Left Margin and Top Margin. Dreamweaver doesn't display page margins in the Document window; use Preview in Browser to see the margins. Margin Width and Margin Height Specify the sizes of page margins in the BODY tag. Internet Explorer ignores these values; Netscape Navigator displays margins of the given sizes. For best cross-browser results, provide values for Left Margin and Top Margin whenever you provide values for Margin Width and Margin Height. Dreamweaver doesn't display page margins in the Document window; use Preview in Browser to see the margins. Document Encoding Specifies the encoding used for characters in 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. If an option for the encoding you want to use is not available, choose Other to create a document with the encoding your operating system is using. All Asian languages use double-byte encodings. To change the fonts that Dreamweaver uses to display each encoding, choose Edit > Preferences and select Fonts/Encoding. Note that the fonts you select in that preferences panel do not affect how visitors see your pages; visitors specify their own fonts (for a given encoding) in their Web browsers. See Fonts/Encoding preferences for more information. Tracing Image Specifies an image to use as a guide for copying a design. See Using a tracing image . Image Determines the transparency of the tracing image, from completely transparent to completely opaque. Document Folder Displays the folder in which the current document is saved. Site Folder Displays the path of the local root folder for the site in which the current document has been saved. See Creating a local site .
<url>html/03SitesandDocs26.html</url>
<title>About the History palette</title> About the History palette The History palette shows a list of all the steps you've performed in the active document since you created or opened that document. (The History palette doesn't show steps you've performed in other frames, in other document windows, or in the Site window.) It allows you to undo one or more steps; it also allows you to replay steps and to create new commands to automate repetitive tasks. The slider, or thumb, in the History palette initially points to the last step that you performed. Note: You can't rearrange the order of steps in the History palette. Don't think of the History palette as an arbitrary collection of commands; think of it as a way to view the steps you've performed, in the order in which you performed them. To set the number of steps that the History palette retains and shows: 1 Choose Edit > Preferences and select General from the Category list. 2 Enter a number for Maximum Number of History Steps. The default value should be sufficient for most users' needs. The higher the number, the more memory the History palette requires. If you exceed the maximum number of steps you set for the History palette, the earliest steps are discarded. To erase the History palette's history list for the current document: In the History palette's context menu, choose Clear History. This command also clears all undo information for the current document; after choosing Clear History, you will be unable to undo the steps that are cleared. (Note that Clear History does not undo steps; it merely removes the record of those steps from Dreamweaver's memory.)
<url>html/03SitesandDocs27.html</url>
<title>Undoing changes</title> Undoing changes To undo the last operation you performed in a document, choose Edit > Undo, just as you would do in any other application. (The name of the Undo command changes in the Edit menu to reflect the last operation you performed.) To undo more than one step at once, use the History palette. See About the History palette . To open the History palette: Choose Window > History. To undo the last step: Drag the History palette thumb up one step in the list. This has the same effect as choosing Edit > Undo. The undone step turns gray. To undo multiple steps at once, do one of the following: Drag the thumb to point to any step. Click to the left of a step; the thumb scrolls automatically to that step. Note: To auto-scroll to a particular step, you must click to the left of the step; clicking the step itself selects the step. Selecting a step is different from going back to that step in your undo history. As with undoing a single step, if you undo a series of steps and then do something new in the document, you can no longer redo the undone steps; they disappear from the History palette. The History palette also allows you to repeat steps that appear in your step history, and to automate tasks based on steps you've performed. See Automating tasks .
<url>html/03SitesandDocs28.html</url>
<title>Automating tasks</title> Automating tasks To repeat a series of steps only a few times, replay them directly from the History palette; see Repeating steps , Applying steps to other objects , and Copying and pasting steps between documents . To automate a task that you perform often, create a new command that performs that task automatically; see Creating new commands from history steps and Recording commands . Some mouse movements, such as clicking or dragging to select something in the Document window, can't be played back or saved as part of saved commands. When you make such a movement, a black line appears in the History palette (although the line does not become obvious until you perform another action). To avoid this, use arrow keys instead of mouse movement to move the insertion point within the Document window. Certain other steps also aren't repeatable, such as dragging a page element to somewhere else on the page. When you perform such a step, a menu-command icon with a small red X appears in the History palette. When you replay steps, they are exactly the same as the steps that you performed previously; you can't modify the steps as you replay them. For example, if you previously changed the color of a table cell to be red, applying that step to another table cell changes that cell's color to red as well; you can't specify a different color when you apply the set-background-color step to a new image.
<url>html/03SitesandDocs29.html</url>
<title>Repeating steps</title> Repeating steps To repeat the last step you performed, use the Edit > Repeat command. The name of this command changes in the Edit menu to reflect the last step you performed; for example, if you've just typed some text, the command name is Repeat Typing. (You can't use the Repeat command immediately after an Undo or Redo operation.) To repeat steps other than the most recent one, or to repeat multiple steps at once, use the History palette. (For basic information about the History palette, see About the History palette .) To repeat one step: In the History palette, select the step and click the Replay button. The step is replayed, and a copy of it appears in the History palette. To repeat a series of adjacent steps: 1 Select steps in the History palette by doing one of the following: Drag from one step to another. Select one step, then Shift-click the step at the other end of the series of steps. 2 Click Replay. The steps are replayed in order, and a new step, labeled Replay Steps, appears in the History palette. To repeat non-adjacent steps: 1 Select a step, then Control-click (Windows) or Command-click (Macintosh) other steps. 2 Click Replay. The steps are replayed in order, and a new step, labeled Replay Steps, appears in the History palette. Note that when you replay steps, the steps that are played are the selected steps, not necessarily the step currently pointed to by the thumb.
<url>html/03SitesandDocs3.html</url>
<title>Creating a local site</title> Creating a local site A local site—the local storage area for your Web site's files—requires a name and a local root folder where you plan to store all of the site's files. Create a different local site for each Web site you work on. The local root folder of your site should be a folder you set up specifically for that site. Don't use your disk as the site root, and don't use the Dreamweaver application folder. One good organizational approach is to create a folder named Sites, and then create local root folders inside that folder, one local root folder for each site you're working on. To create a local site: 1 Choose Site > New Site. In the Site Definition dialog box that appears, the Local Info category is selected. 2 Enter the following options: In the Site Name field, enter a name for the site. The site name appears in the Site window and on the Site > Open Site submenu. The name can be anything you like. In the Local Root Folder field, specify the folder on your local disk where site files, templates, and library items will be stored. When Dreamweaver resolves root-relative links, it does so relative to this folder. (See About root-relative paths ) Click the folder icon to browse to and select the folder, or enter a path and folder name in the text field. If the local root folder does not yet exist, create it from within the file browsing dialog box. (Note that you may be unable to create a folder in that dialog box if you're using a Macintosh without Navigation Services installed.) For the Refresh Local File List Automatically option, indicate whether or not to automatically refresh the local file list every time you copy files into your local site. Deselecting this option improves the speed of Dreamweaver when copying such files, but when this option is deselected, the Local pane of the Site window does not automatically refresh. To manually refresh the Site window, click the Site window's Refresh button. To manually refresh the Local pane only, choose View > Refresh Local in the Site window (Windows) or Site > Site Files View > Refresh Local (Macintosh). In the HTTP Address field, enter the URL that your completed Web site will use, so that Dreamweaver can verify links within the site that use absolute URLs. (See Checking links between documents .) For example, the HTTP address for Macromedia's Web site is http://www.macromedia.com. For the Cache option, indicate whether or not to create a local cache to improve the speed of link and site management tasks. If you do not select this option, Dreamweaver will prompt you again about creating a cache before it creates the site. 3 Click OK. Later, when you're ready to publish the site on a remote server, you will need to add additional information about the site. For information about remote sites, see Setting up a remote site .
<url>html/03SitesandDocs30.html</url>
<title>Applying steps to other objects</title> Applying steps to other objects You can apply a set of steps from the History palette to any object in the Document window. To apply History palette steps to a new object: 1 Select the object. 2 Select the relevant step or steps in the History palette, then click Replay. If you select multiple objects in a document and then apply steps to them from the History palette, the objects are treated as a single selection. You can't select five images, for example, and apply the same size change to each of them all at once. To apply a series of steps to each object in a set of objects, make sure that the last step in the series selects the next object in the set. For example, here's a procedure for setting the vertical and horizontal spacing of a series of images: To set the vertical and horizontal spacing of a series of images: 1 Start with a document in which each line consists of a small image (such as a graphical bullet) followed by text. The goal is to set the images off from the text and from the other images above and below them. 2 Select the first image. 3 In the Property inspector, click the Expand button (the arrow in the lower right corner) if necessary to see all of the image properties. 4 Enter numbers in the V Space and H Space text fields to set the image's spacing. 5 Click the Document window's title bar (rather than clicking inside the document window) to bring keyboard focus back to the document window. 6 Press the Left Arrow key to move the insertion point to the left of the image. Then press the Down Arrow key to move the insertion point down one line, leaving it just to the left of the second image in the series. Then press Shift+Right Arrow to select that second image. Note: Do not select the image by clicking it, or you won't be able to replay the steps. 7 Select the steps in the History palette corresponding to changing the image's spacing and selecting the next image. Click the Replay button to replay those steps. The current image's spacing changes, and the next image is selected. 8 Continue to click Replay until all the images are spaced correctly. To apply steps to an object in another document, use Copy Steps; see Copying and pasting steps between documents .
<url>html/03SitesandDocs31.html</url>
<title>Copying and pasting steps between documents</title> Copying and pasting steps between documents Each open document has its own history of steps. You can copy steps from one document and paste them into another. To reuse steps from one document in another document: 1 Start from the document containing the steps you want to reuse. 2 Select the steps in the History palette. 3 Click the History palette's Copy Steps button to copy those steps. 4 Open the other document. 5 Place the insertion point where you want it, or select an object to apply the steps to. 6 Choose Edit > Paste to paste the steps. The steps are played back as they're pasted into the document's History palette. The History palette shows them as only one step, called Paste Steps. Note: Copy Steps is a different command from Copy. You can't use the Edit menu's Copy command to copy steps, though you do use Edit > Paste to paste them. Closing a document clears its history. If you will want to use steps from a document after that document is closed, copy the steps with Copy Steps (or save them as a command; see Creating new commands from history steps ) before you close the document. Be careful when copying steps that include a Copy or a Paste command: Don't use Copy Steps if one of the steps is a Copy command; attempting to Paste such steps may not behave as you expect. You can't paste steps that include a Paste command but don't include a preceding Copy command. If you paste steps into a text editor or into the HTML Source inspector, they appear as JavaScript code. This can be useful for learning to write your own scripts. For more information on using JavaScript in Dreamweaver, see Extending Dreamweaver: Basics .
<url>html/03SitesandDocs32.html</url>
<title>Creating new commands from history steps</title> Creating new commands from history steps You can save a set of history steps as a named command, which then becomes available in the Commands menu. Create and save a new command if there's any chance you'll want to use a given set of steps again in the future, especially if you want to use those steps again the next time you launch Dreamweaver; saved commands are retained permanently (unless you delete them), while recorded commands and copied sequences of steps are not. You can edit the names of commands that you've placed in the Commands menu, and you can delete them from the Commands menu, using Edit Command List. Note that it is more complicated to edit and delete commands that are built in to the Commands menu (that is, commands that you didn't explicitly add); see Customizing Dreamweaver menus . To create a command: 1 Select a step or set of steps in the History palette. 2 Click the Save As Command button, or choose Save As Command from the History palette's context menu. 3 Enter a name for the command and click OK. The command appears in the Commands menu. Note: The command is saved as a JavaScript file in your Dreamweaver/Configuration/Commands folder. To use a saved command: 1 Select an object to apply the command to, or place the insertion point where you want it. 2 Choose the command from the Commands menu. To edit the names of commands in the Commands menu: 1 Choose Commands > Edit Command List. 2 Select a command to rename and enter a new name for it. 3 Click Close. To delete a name from the Commands menu: 1 Choose Commands > Edit Command List. 2 Select a command. 3 Click Delete, then click Close.
<url>html/03SitesandDocs33.html</url>
<title>Recording commands</title> Recording commands Dreamweaver allows you to record a temporary command for short-term use. The main differences between this approach and playing back steps from the History palette (see Repeating steps ) are as follows: The steps are recorded as you perform them, so you don't have to select them in the History palette. During recording, Dreamweaver prevents you from performing nonrecordable mouse motions (such as clicking to select something in a window, or dragging a page element to a new location). If you switch to another document while recording, Dreamweaver doesn't record the changes you make in the other document. Look at the pointer to determine whether you're recording or not at any given moment. Dreamweaver retains only one recorded command at a time; as soon as you start recording a new command, the old one is lost. To save a new command without losing a recorded one, save the command from the History palette; see Creating new commands from history steps . Once you've recorded a command, you can save it (if you like) using the History palette. To temporarily record a series of frequently used steps: 1 Choose Commands > Start Recording, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh). The pointer changes to indicate that you're recording a command. 2 When you're done recording, choose Commands > Stop Recording, or press Control+Shift+X (Windows) or Command+Shift+X (Macintosh). The pointer changes back. To play back a recorded command: Choose Commands > Play Recorded Command, or press Control+P (Windows) or Command+P (Macintosh). To save a recorded command: 1 Choose Commands > Play Recorded Command to play the command back. A step named Run Command appears in the History palette's step list. 2 Select the Run Command step and click the Save As Command button. 3 Enter a name for the command and click OK. The command appears in the Commands menu.
<url>html/03SitesandDocs34.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 do the following: Instantly snap the Document window to the desired window size to see how the elements fit on the page. See Resizing the Document window . 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 and resizing of layers. Grid marks on the page help you align layers, and when snapping is enabled, layers automatically snap to the closest grid point when moved or resized. (Other objects, such as images and paragraphs, do not snap to the grid.) Snapping works regardless of whether the grid is visible. See Snapping layers to the grid .
<url>html/03SitesandDocs35.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 Pixels, Inches, or Centimeters from the View > Rulers submenu.
<url>html/03SitesandDocs36.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 JPEG, GIF, or PNG image that is placed in the background of the Document window. You can hide the image, set its opacity, and change its position. The tracing image is visible only in Dreamweaver. It is never visible when you view the page in a browser. When the tracing image is visible, the 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 file and click Select (Windows) or Choose (Macintosh). 3 The Page Properties dialog box appears. Specify the transparency for the image by dragging the Image Transparency slider, then click OK. 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. 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/03SitesandDocs37.html</url>
<title>Interactivity and animation</title> Interactivity and animation Many Web pages are static, containing only text and images. Dreamweaver allows you to go beyond static pages, using interactivity and animation to capture visitors' interest. Give visitors feedback as they move and click; demonstrate concepts; validate form data without contacting the server—in short, 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 visitor passes the pointer over it, validating a form when the visitor 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 About timelines . Use Shockwave movies, Flash movies, Java applets, 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 Inserting media overview .
<url>html/03SitesandDocs38.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 section and the BODY section. The BODY section is the part of the document that is visible to your site's visitors in a browser window (and to you in the Document window in Dreamweaver). The HEAD section is mostly invisible to visitors (and in Dreamweaver), except for the text tagged 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. Give a title to every page you create. The HEAD section contains other important information in addition to the document title, including the document type, the language encoding, JavaScript and VBScript functions and variables, and keywords and content indicators for search engines. You don't need to provide all of these elements for every page; you might, for example, provide keywords and content indicators for your home page only. You can view the elements in the HEAD section using the View menu or the HTML Source inspector. To view elements in the HEAD section of a document: Choose View > Head Content. For each element of the HEAD content, an icon appears at the top of the Document window. To insert elements into the HEAD section of a document: 1 Do one of the following: Choose Head from the pop-up menu at the top of the Object palette and click one of the buttons in the Object palette. Choose an item from the Insert > Head submenu. 2 Enter options for the element in the dialog box that appears or in the Property inspector. To edit elements in the HEAD section of a document: 1 Click one of the icons in the HEAD section 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/03SitesandDocs39.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. ( PICS , the Platform for Internet Content Selection, provides a method for assigning ratings (like movie ratings) to Web pages.) 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/03SitesandDocs4.html</url>
<title>Editing and updating an existing site</title> Editing and updating an existing site You can use Dreamweaver to copy an existing remote site (or any branch of a remote site) to your local disk and edit it there, even if you didn't use Dreamweaver to create the original site. Note that even if you intend to edit only part of the remote site, to avoid problems you must locally duplicate the entire structure of the relevant branch of the remote site, from the remote site's root folder down to the files you want to edit. For example, if your remote site's root folder, named public_html, contains two folders, Project1 and Project2, and if you want to work only on the HTML files in Project1, you don't need to download the files in Project2, but you must map your local root folder to public_html, not to Project1. To edit an existing Web site: 1 Set up a local site to copy the remote site into. That is, create a local folder to contain the site, and set it up as the local root folder (see Creating a local site ). 2 Set up a remote site, using information about your existing site. See Setting up a remote site . Be sure to choose the correct root folder for the remote site. 3 Connect to the remote site using the Connect button in the Site window. 4 Depending on how much of the remote site you want to edit, do one of the following: If you want to work with the entire site, select the root folder of the remote site, and click Get to download the entire site to your local disk. If you want to work with just one of the files or folders of the site, locate the file or folder in the Remote pane of the Site window, and click Get to download that file to your local disk. (Dreamweaver automatically duplicates as much of the remote site's structure as is necessary to place the downloaded file in the right part of the site hierarchy.) When editing only one part of a site, you should generally choose to download dependent files. 5 Proceed as if creating a site from scratch: edit documents, preview and test them, and upload them again to the remote site.
<url>html/03SitesandDocs40.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 in the browser's title bar when you view the page in a browser. Enter the page title in the field labeled Title.
<url>html/03SitesandDocs41.html</url>
<title>Keywords properties</title> Keywords properties Many search-engine robots (programs that automatically browse the Web gathering information for search engines to index) 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/03SitesandDocs42.html</url>
<title>Description properties</title> Description properties Many search-engine robots (programs that automatically browse the Web gathering information for search engines to index) 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/03SitesandDocs43.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. Delay Is the time in seconds to wait before refreshing the page. To refresh the page immediately, enter 0 in this field. Note that leaving the field blank does not have the same effect as entering 0. 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.
<url>html/03SitesandDocs44.html</url>
<title>Base properties</title> Base properties Use the Base element to set the base URL which all document-relative paths in the page are considered relative to. Href Is the base URL. Click the folder icon to browse to and select a file, or type a path in the text field. 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/03SitesandDocs45.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. Click the folder icon to browse to and select a file, or type a path in the text field. 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 World Wide Web Consortium 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 those for Rel.
<url>html/03SitesandDocs5.html</url>
<title>Viewing and opening files in the Site window</title> Viewing and opening files in the Site window Use the Site window for viewing local and remote sites, adding or removing site documents, or laying out the navigational structure of your site with a site map. For more information, see About the Site window . You can set each of the two Site window panes to show the local site, the remote site, or a graphical map of the local site. For example, you can view the local site in one pane and the remote site in the other, or you can view the local site in files view in one pane, and in map view in the other pane. (For information on viewing site maps, see Viewing the site structure .)
<url>html/03SitesandDocs6.html</url>
<title>Viewing local sites</title> Viewing local sites The Site window can display the contents of both local and remote sites. Local sites are displayed as a list of files, a visual map, or both. Remote sites are displayed only as a list of files. Before you can view a remote site, you must set one up; see Setting up a remote site . To view local site files, do one of the following: Choose Window > Site Files. In the Site window, if the site map is showing, click the Site Files button. The 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 Remote Site pane is empty. To view the site map and the site files, do one of the following: Choose Window > Site Map. (If you previously viewed the map only, without the site's files, this displays the map only.) In the Site window, click the Site Map button, or hold down the mouse button with the pointer over the Site Map button and select Map and Files from the pop-up menu. The pane displaying the local site as a map is labeled Site Navigation; the other pane displays either the local site files (labeled Local Folder) or the remote site files (labeled Remote Site), depending on the Always Show preferences you set. (See Changing site displays .) To view only the site map: Hold down the mouse button with the pointer over the Site Map button and select Map Only from the pop-up menu.
<url>html/03SitesandDocs7.html</url>
<title>Changing site displays</title> Changing site displays By default, the remote site (or the local site map) appears in the left pane of the Site window and the local site appears in the right pane. You can switch these displays. To set which panes the local and remote sites appear in: 1 Choose Edit > Preferences and select the Site FTP category. 2 Do either of the following: Select Local Files from the Always Show menu, and then choose whether to display the local files in the right or left pane of the Site window. The local site will appear in the pane you have selected, and the remote site (or the site map) will appear in the opposite pane. When you choose this option, the local site files view is always shown in the Site window, even when you collapse the window to one pane. Select Remote Files from the Always Show menu, and then choose whether to display the remote files in the right or left pane of the Site window. The remote site will appear in the pane you have selected, and the local site (or the site map, which is always local) will appear in the opposite pane. When you choose this option, the remote site files view is always shown in the Site window, even when you collapse the window to one pane. 3 Click OK to close the Preferences dialog box and apply changes. To change the view area: In the Site window, do one of the following: Drag the bar that separates the panes to increase or decrease 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, drag the arrow above a file to change the space between files. To collapse the Site window to one pane: Click the small triangle button in the lower left of the Site window. Note: The pane that remains visible is whichever pane you chose to always show in the Site FTP preferences dialog box. For more information about site preferences, see Site FTP preferences .
<url>html/03SitesandDocs8.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 open files, to add new folders or files to a site, or to refresh the view of a site after changes have been made. You can also use Site Files view to determine which files (on either site) have been updated since the last time they were transferred. For information on synchronizing the local site with the remote site, see Synchronizing the files on your local and remote sites . To view the site files: Do one of the following: Choose Window > Site Files to open the Site window in Site Files view. In the Site window, click the Site Files button. To open a file from the Site Files view: Double-click the file's icon. To add a new folder to a site: 1 Make sure a file or folder is selected in the Site window; the new folder is created inside the current selected folder, or in the same folder as the current selected file. 2 Choose File > New Folder in the Site window (Windows) or Site > Site Files View > New Folder (Macintosh). 3 Enter a name for the new folder. To add a new file to a site: 1 Make sure a file or folder is selected in the Site window; the new file is created inside the current selected folder, or in the same folder as the current selected file. 2 Choose File > New File in the Site window (Windows) or Site > Site Files View > New File (Macintosh). 3 Enter a name for the new file. To refresh the Site Files view after making changes outside of Dreamweaver: Do one of the following: Choose View > Refresh Local in the Site window(Windows) or Site > Site Files View > Refresh Local (Macintosh). Choose View > Refresh Remote in the Site window (Windows) or Site > Site Files View > Refresh Remote (Macintosh). Click the Refresh button in the Site window to refresh both panes. To locate and select newer local files: Choose Edit > Select Newer Local in the Site window (Windows) or Site > Site Files View > Select Newer Local (Macintosh). To locate and select newer remote files: Choose Edit > Select Newer Remote in the Site window (Windows) or Site > Site Files View > Select Newer Remote (Macintosh). For more information about working with local and remote sites, see Using the check in/check out system .
<url>html/03SitesandDocs9.html</url>
<title>Removing a site from your list of sites</title> Removing a site from your list of sites If you no longer wish to work with a site in Dreamweaver, you can remove the site from your list of sites. The files in the site are not removed. Note: When you remove a site from the list, all setup information about the site is lost permanently. To remove a site from your site list: 1 Choose Site > Define Sites. 2 Select a site name. 3 Click Remove. A dialog box appears asking you to confirm the removal. 4 Click Yes to remove the site from your list.
<url>html/04LinkingNav1.html</url>
<title>Linking and navigation overview</title> Linking and navigation overview Once you've established a local site in which to store your Web site documents, and created HTML pages, you'll want to create connections from your documents to other documents or file types. To see how to set up a local site, see Creating a local site . Using Dreamweaver, there are several ways to set up hypertext links to documents, images, multimedia files, or downloadable programs. You can establish links to any text or image anywhere within a document, including text or images located in a heading, list, table, layer, or frame. With Dreamweaver you can easily create the following types of links from text and graphic images: Internal links, linking documents in the same Web site. External links, linking to documents outside of a local Web site. E-mail links that open an e-mail form. Links to named anchors that allow the visitor to jump to a particular area on the same Web page or to one on a different page. For a visual representation of your site structure, use the Site Map feature. In the site map you can add new documents to your site, create document links, remove documents, and check links to dependent files. See Viewing the site structure .
<url>html/04LinkingNav10.html</url>
<title>Creating an e-mail link</title> Creating an e-mail link An e-mail link opens a new message window (using the mail program associated with the user's browser) when clicked. In the e-mail message window, the To field is automatically updated with the address specified in the e-mail link. To create an e-mail link using the Insert E-Mail Link command: 1 In the Document window, position the insertion point where you want the e-mail link to appear, or select the text you want to appear as the e-mail link. Then do one of the following: Choose Insert > E-Mail Link. In the Common panel of the Object palette, select Insert E-Mail Link. 2 In the Text field of the Insert E-Mail Link dialog box, type or edit the text to appear in the document as an e-mail link. 3 In the E-Mail field, type the e-mail address mail should be addressed to. 4 Press OK. To create an e-mail link using the Property inspector: 1 Select text, an image or an image in the Document window. 2 In the Link field of the Property inspector, type mailto: followed by an e-mail address.
<url>html/04LinkingNav11.html</url>
<title>Creating null and script links</title> Creating null and script links The most familiar kinds of links are those 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. A null link Is an undesignated link. Use null links to activate objects or text on a page. Once the text or object is active, you can attach a behavior to it to swap an image or to display a layer when the pointer is moved over the link. For information about attaching behaviors to objects, see Attaching a behavior . Script links Execute JavaScript code or call a JavaScript function and are useful for giving visitors additional information about an item without leaving the current Web page. Script links can also be used to perform calculations, form validations, and other processing tasks when a visitor clicks a specific item. To create a null link: 1 Select text, an image, or an object in the Document window. 2 In the Property inspector, type a number sign (#) in the Link field. To create a script link: 1 Select text, an image, or an object in the Document window. 2 In the Link field of the Property inspector, type javascript: followed by some JavaScript code or a function call. For example, typing javascript:alert('This feature is not implemented') in the Link field 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 preceding the double quotes with a backslash (for example, \"This feature is not implemented\" ).
<url>html/04LinkingNav12.html</url>
<title>Creating jump menus</title> Creating jump menus A jump menu is a pop-up menu of options that link to a document or file. You can create links to documents in your Web site, links to documents on other Web sites, e-mail links, links to graphics, or links to any file type that can be opened in a browser. There are three basic components a jump menu can contain: A menu selection prompt, such as a category description for the menu items, or instructions, such as "Choose one:". A list of linked menu items: a user clicks an option and a linked document or file opens. A Go button. Once a jump menu item has been selected, there is no way to reselect the item if you navigate back to that page, or if the Open URL In field specifies a frame. There are two ways to work around this problem: Use a menu selection prompt, such as a category, or a user instruction, such as "Choose one:". A menu selection prompt is reselected after each menu selection. Use a Go button, which allows a user to revisit the currently selected link.
<url>html/04LinkingNav13.html</url>
<title>Inserting a jump menu</title> Inserting a jump menu To create a jump menu: 1 Choose Insert > Form Object > Jump Menu. The Insert Jump Menu dialog box appears. 2 If you want to create a selection prompt, in the Text field of the Insert Jump Menu dialog box, type the text you want to appear to prompt the user. Under Options, select the Select First Item After URL Change checkbox, then click the plus (+) button to add a menu item. 3 In the Text field of the Insert Jump Menu dialog box, type the text you want to appear in the menu list. 4 In the When Selected, Go To URL field, select the file to open by doing either of the following: Click Browse, then select the file to open. Type the path of the file to open. 5 In the Open URLs In pop-up menu, select a location in which the file will open, by doing one of the following: Select Main Window to open the file in the same window Select a frame in which the file will open Note: If the frame you wish to target doesn't appear on the Target pop-up menu, exit the Insert Jump Menu dialog box, and name the frame. For information about naming a frame, see Frame properties . 6 Under Options, choose from the following options: To add a Go button, select the Insert Go Button After Menu checkbox. To set up a selection prompt, select the Select First Item After URL Change checkbox. Note: Select only one option per jump menu. These options apply to an entire jump menu. 7 To add additional menu items, click the plus (+) button, and repeat steps 2 through 5 of this procedure. 8 Click OK.
<url>html/04LinkingNav14.html</url>
<title>Editing Jump Menu items</title> Editing Jump Menu items You can make changes to jump menu items in the Property inspector or the Behavior inspector. You can change the list order or the file an item links to, or you can add, delete, or rename an item. To change the location a linked file opens in, or to add or change a menu selection prompt, you must use the Behavior inspector. For information about how to use the Behavior inspector to edit a jump menu, see Jump Menu . To edit a Jump Menu item using the Property inspector: 1 In the Property inspector, choose Window > Properties. 2 In the Document window, click the Jump Menu object to select it. The List/Menu icon appears in the Property inspector. 3 In the Property inspector, click the List Values button. 4 Make changes to the menu items, then click OK.
<url>html/04LinkingNav15.html</url>
<title>Creating navigation bars</title> Creating navigation bars A navigation bar consists of an image, or a set of images, whose display changes based on the actions of a user. Before using the Insert Navigation Bar command, create a set of navigation bar images for the states of an image you want displayed. An image can have four states: Up: the image that appears when the page initially loads. Over: the image that appears when the pointer is rolled over an image. Down: the image that appears when an image is clicked. Down and Over: the image that appears when the pointer is rolled over the image after the image has been clicked. The following example demonstrates how different states of a button image might be displayed: when a user views the home page, the home page image button is darkened, and the other buttons of the navigation bar are in their normal or up state. On the home page, the user moves the pointer over the Our Story button; an image a lighter shade of the same color displays (that is, the button is highlighted), and the user clicks the Our Story button. On the Our Story page, the Our Story button is darkened, and the home page image button is in its normal state. You can create a navigation bar, copy it to other pages in your site, and edit the page behaviors to show different states as pages are accessed.
<url>html/04LinkingNav16.html</url>
<title>Inserting a navigation bar</title> Inserting a navigation bar To create a navigation bar: 1 Do one of the following: Choose Insert > Navigation Bar. In the Common panel of the Object palette, select Insert Navigation Bar. The Insert Navigation Bar dialog box appears. 2 In the Element Name field, type a name for the navigation bar element. Element names appear in the Nav Bar Elements list. You can use the up or down arrow button to arrange elements in the navigation bar. 3 Select image state options (you must select an Up Image; other image states are optional): In the Up Image field, click Browse to select the image to be displayed initially. In the Over Image field, click Browse to select the image to be displayed when the user moves the pointer over the image. In the Down Image field, click Browse to select the image to be displayed after the user clicks the image. In the Over While Down Image field, click Browse to select the image to be displayed after the user clicks the image, then moves the pointer over the image. 4 In the When Clicked, Go To URL field, select a location in which the file will open by doing one of the following: Select Main Window to open the file in the same window. Select a frame in which the file will open. Note: If the frame you wish to target doesn't appear on the Target pop-up menu, exit the Insert Navigation Bar dialog box, and name the frame. For information about naming a frame, see Frame properties . 5 Select image loading options: Preload Images downloads the images when the page loads. If this option isn't selected, there may be a delay when the user moves the pointer over the rollover image. Select Show "Down Image" Initially to display the selected element in its down state when the page is displayed. For example, when the home page loads, the home page button should be in its down state. When this option is selected, an asterisk appears after the element in the Nav Bar Elements list. 6 Under Insert, select from these options: To insert the navigation bars elements vertically or horizontally in the document, use the Insert pop-up menu. To insert the navigation bar elements in a table, select the Use Tables checkbox. 7 Click the plus (+) button to add another element to the navigation bar, then follow steps 2 through 6 to set the state for that element. 8 Click OK.
<url>html/04LinkingNav17.html</url>
<title>Modifying a Navigation Bar</title> Modifying a Navigation Bar Once you create a navigation bar for a document, you can add or remove images from the navigation bar by using the Modify Navigation Bar command. You can use this command to change an image or set of images, to change which file opens when a button is clicked, to select a different window in which to open a file, and to reorder the position of the images. To modify a navigation bar: 1 Choose Modify > Navigation Bar. 2 In the Nav Bar Elements list, select the element you want to edit. 3 Make your edits, then click OK.
<url>html/04LinkingNav18.html</url>
<title>Viewing the site structure</title> Viewing the site structure Use the site map to view a local site as a visual map of linked icons, to add new files to a site, or to add, modify, or remove links. The Site Map view is ideal for storyboarding or laying out a site structure. You can quickly set up 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 the contents of the remote site to your local disk. 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 icon 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/04LinkingNav19.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 Click the folder icon to select a home page for the site, or type a file path in the Home Page field. 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. 3 Choose from the Column options: In the Number of Columns field, type a number to set the number of pages to display per row in the site map window. In the Column Width field, type a number to set the width in pixels of the site map columns. 4 Under Icon Labels, select whether the name displayed under the document icons in the Site Map will be represented as file names or as page titles. 5 Under Options, select which files to display in the site map: Choose Display Files Marked as Hidden to display HTML files that are marked as hidden in the site map. If a page is hidden, its name and links are displayed in italics. For information about hiding files, see Showing and hiding site map files . Choose Display Dependent Files to show all dependent files in the site's hierarchy. A dependent file is an image or other non-HTML content that is loaded by the browser when the main page is loaded.
<url>html/04LinkingNav2.html</url>
<title>About document locations and paths</title> About document locations and paths Understanding the file path between the document you're linking from and the document you're linking to is essential to creating links. Each Web page has a unique address, called a Uniform Resource Locator (URL). (For detailed information on URLs, see the World Wide Web Consortium's page on naming and addressing .) However, when you create a local link (a link from one document to another on the same site), you generally don't specify the entire URL of the document you're linking to; instead, you specify a relative path from the current document or from the site's root folder. The following are the three types of document paths: Absolute paths (such as http://www.macromedia.com/support/dreamweaver/contents.html). See About absolute paths . Document-relative paths (such as dreamweaver/contents.html). See About document-relative paths . Root-relative paths (such as /support/dreamweaver/contents.html). See About root-relative paths . Using Dreamweaver, you can easily select the type of document path to create for your links. See Linking to a document .
<url>html/04LinkingNav20.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 in the site map, do one of the following: Press Shift-click to select multiple pages. Starting from a blank part of the view, drag around a group of files to select them. Press Control-click (Windows) or Command-click (Macintosh) to select nonadjacent pages. To open a page for editing, do one of the following: Double-click the file. Select the file and choose File > Open Selection (Windows) or Site > Open (Macintosh). To add an existing file to the site, do one of the following: Drag a file from the Windows Explorer or the Macintosh Finder and drop it on a file in the site map. The page is added to the site, and a link is created between it and the file you dropped it on. Select Site > Link to Existing File (Windows) or Site > Site Map View > Link to Existing File (Macintosh). To create a new file and add a link: 1 Select an HTML file in the site map, then do one of the following: Choose Site > Link to New File (Windows) or Site > Site Map View > Link to New File (Macintosh). Choose Link to New File from the context menu. 2 In the File Name field of the Link to New File dialog box, type a file name. 3 In the Title field, type a page title for the file. 4 In the Text of Link file, type the text of the link that connects the selected file to the new file. The link appears in the selected file. 5 Click OK. The file is saved in the same folder as the selected file. If a new file is added to a hidden branch, the new file is also hidden. See Showing and hiding site map files . To modify the title of a page: 1 Make sure the Show Page Titles option is selected. Choose View > Show Page Titles (Windows) or Site > Site Map View > Show Page Titles (Macintosh). 2 Do one of the following: Select a page and then click the title. When the title becomes an editable field, enter a new document title. Select a page and then choose File > Rename (Windows) or Site > Rename (Macintosh). To change the home page, do one of the following: In the Local Folder pane of the Site Window, click the file you want to change to the home page and choose Set as Home Page from the context menu. Choose Site > New Home Page (Windows) or Site > Site Map View > New Home Page (Macintosh) to create a new home page. Choose Site > Set as Home Page (Windows) or Site > Site Map View > Set as Home Page (Macintosh) to make an existing page the home page. To update the site map display after making changes: Click anywhere in the Site Map window to deselect any files, then choose View > Refresh Local (Windows) or Site > Site Map View > Refresh Local (Macintosh).
<url>html/04LinkingNav21.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 the Macintosh Finder onto a page in the site map. Select an HTML page and choose Site > Link to Existing File (Windows) or Site > Site Map View > Link to Existing File (Macintosh), or choose Link to Existing File from the context menu. Select an HTML page in the site map. The point-to-file icon appears. Click and drag the icon to the object you want to link to: either a file in the File View, an open Dreamweaver document on the desktop, or a named anchor in a document open on the desktop. See Linking documents using the point-to-file icon . To change a link: In Site Map view, select the page whose link you're changing, 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 context 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/04LinkingNav22.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 In the site map, select one or more files. 2 Choose View > Show/Hide Link (Windows) or Site > Site Map View > Show/Hide Link (Macintosh). To show or hide files marked as hidden, do one of the following: Choose View > Show Files Marked as Hidden (Windows) or Site > Site Map View > Show Files Marked as Hidden (Macintosh). Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh) to open the Site Definition dialog box and select the Display Files Marked as Hidden option. By default, dependent files are already hidden. You can choose whether to show them in the site map. To show dependent files, do one of the following: Choose View > Show Dependent Files (Windows) or Site > Site Map View > Show Dependent Files (Macintosh). Choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh) to open the Site Definition dialog box and select the Display Dependent Files option.
<url>html/04LinkingNav23.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/04LinkingNav24.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, do one of the following: Using Windows, in the Save Site Map dialog box, choose File > Save Site Map As. In the File Type pop-up menu, select .bmp or .png. Using Macintosh, select Site > Site Map View > Save Site Map > Save Site Map As PICT or Site > Site Map View > Save Site Map > Save Site Map As JPEG. 2 Choose a location, enter a name for the image, and click Save.
<url>html/04LinkingNav25.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 Site > Define Sites. 2 Select the site in the Define Sites dialog box, then click Edit. In the Local Info category, select the Cache checkbox under Link Management Options. To re-create 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/04LinkingNav26.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, null, and script links) to point somewhere else. You can use this option at any time (for example, you might have the words "this month's movies" linked to /movies/july.html throughout your site, and on August 1 you must change those links to point to /movies/august.html), but it's particularly useful when you want to delete a file that other files link to. To change a link sitewide: 1 Select a file in the Local pane of the Site window. 2 Choose Site > Change Link Sitewide. 3 In the dialog box that appears, click the folder icon to browse to and select a file, or in the Into Links To field, type the path and file name of a new file to link to. 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, null, or script links sitewide: 1 Open the site map. 2 Choose Site > Change Link Sitewide. 3 In the Change Link Sitewide dialog box, enter the following information: In the Change All Links To field, type the full name of the link you are changing. In the Into Links To field, type the full name of the link you want to replace the link with. 4 Click OK. For example, to update all the e-mail links that point to your old address, you might type mailto:juser@isp.com in the Change All Links To box, and type mailto:juser-interface@isp.com in the Into Links To box.
<url>html/04LinkingNav27.html</url>
<title>Testing links</title> Testing links Links are not active in the Document window—that is, clicking a link does not take you to the linked document. 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 About testing your site . To test links in a browser: Choose File > Preview in Browser or click F12. You must preview your pages in a browser to test your links. To open linked documents in Dreamweaver, do one of the following: Select the link and choose Modify > 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/04LinkingNav28.html</url>
<title>Attaching behaviors to links</title> Attaching behaviors to links You can attach a behavior to any link in a document. Consider using the following behaviors when inserting linked elements into your documents. Set Text of Status Bar Shows a message in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it. To see an example of a status message, move your pointer over any of the navigation buttons in the Dreamweaver Help Pages. See Set Text of Status Bar . Open Browser Window Is used to open a URL in a new window. You can specify the properties of the new window, including its size, attributes (whether it is resizable, has a menu bar, and so on), and name. See Open Browser Window . Set Nav Bar Image behavior Lets you change how a navigation bar behaves. Use this behavior to customize how the images in a navigation bar display. For example, when the pointer is over a button, the display of other images in the navigation bar or in the document change. See Set Nav Bar Image . Jump Menu Behavior Is used to edit a jump menu. You can make changes to the menu list or the file linked to, or you can change the browser location of where a linked document opens. See Jump Menu .
<url>html/04LinkingNav3.html</url>
<title>About absolute paths</title> About absolute paths Absolute paths Provide the complete URL of the linked document, including the protocol to use (usually http:// for Web pages). For example, http://www.macromedia.com/support/dreamweaver/contents.html is an absolute path. You must use an absolute path to link to a document on another server. You can also use absolute-path links to link pages in a site located on your local computer (such as for a Web presentation). This approach is discouraged. however, as your links would break causing you files not to open if you transfer the files to another location or change the file structure within your site.
<url>html/04LinkingNav4.html</url>
<title>About document-relative paths</title> About document-relative paths Document-relative paths Are the most appropriate paths to use for local links in most Web sites. They're particularly useful when the current document and the linked-to document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder, by specifying the path through the folder hierarchy from the current document to the linked document. When you specify a document-relative path, you leave out the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs. To link to another file in the same folder as the current document, simply provide the file name to link to. To link to a file in a subfolder of the current document's folder, provide the name of the subfolder, then a forward slash, and then the file name to link to. To link to a file in the parent folder of the current document's folder, precede the file name with ../ (where .. means "up one level in the folder hierarchy"). For example, suppose you have a site with this structure: To link from contents.html to other files: To link from contents.html to hours.html (both files are in the same folder), the file name is the relative path: hours.html. To link to tips.html (in the subfolder named resources), use the relative path resources/tips.html. Each forward slash (/) represents moving down one level in the folder hierarchy. To link to index.html (in the parent folder, one level above contents.html), use the relative path ../index.html. Each ../ represents moving up one level the folder hierarchy. To link to catalog.html (in a different subfolder of the parent folder), use the relative path ../products/catalog.html. The ../ moves up to the parent folder; the products/ moves down into the products subfolder. Note: Always save a new file before creating a document-relative path; a document-relative path is not valid without a definite starting point. If you create a document-relative path before saving the file, Dreamweaver temporarily uses an absolute path beginning with file:// until the file is saved; when you save the file, Dreamweaver converts the file:// path into a relative path. When you move a group of files as a group, so that they keep the same relative paths between them—for example, when you move an entire folder, so that all the files inside that folder retain the same relative paths to each other—you don't need to update document-relative links between those files. When you move an individual file that contains document-relative links, however, or an individual file that's linked to by a document-relative link, you do need to update those links. (If you move or rename files using the Site window, Dreamweaver helps you update all relevant links.)
<url>html/04LinkingNav5.html</url>
<title>About root-relative paths</title> About root-relative paths Root-relative paths Provide the path from the site's root folder to a document. Note: If you understand the strengths and limitations of root-relative paths, they can be useful, but if you're not familiar with root-relative paths, document-relative paths are recommended. A root-relative path begins with a leading forward slash, which stands for the site root folder. For example, /support/tips.html is a root-relative path to a file (tips.html) in the support subfolder of the site's root folder. A root-relative path often provides the best way to specify links in a Web site in which you need to frequently move HTML files from one folder to another. When you move a document that contains root-relative links, you don't need to change the links; for example, if your HTML files use root-relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid. However, when you move or rename the documents linked to with root-relative links, you do need to update those links, even if the documents' paths relative to each other haven't changed. For example, if you move a folder, all root-relative links to files within that folder must be updated. (If you move or rename files using the Site window, Dreamweaver helps you update all relevant links.) Define a local site in Dreamweaver by choosing a local root folder to serve as the equivalent of the document root on a server. (See Creating a local site .) Dreamweaver uses this folder to determine the root-relative paths to files. Root-relative links are interpreted by servers, not by browsers, so if you open a local page that uses root-relative links in your browser (without using Preview in Browser from within Dreamweaver), the links don't work. When you use the Preview in Browser feature to preview a document that uses root-relative links, Dreamweaver temporarily converts those links (in the previewed file only) to use absolute file:// paths. However, you can preview only one page at a time that uses root-relative links—if you follow a link from the previewed page, the new page's root-relative links are not converted, and the browser can't follow such links. Previewing pages in framesets that use root-relative links results in similar problems. To preview a set of pages that use root-relative links, do one of the following: Put the files on a remote server and view them from there. (Windows only) Choose Edit > Preferences, and in Preview in Browser preferences, select Preview Using Local Server. To use this option, you must be running a Web server on your local computer.
<url>html/04LinkingNav6.html</url>
<title>Creating links</title> Creating links The HTML tag for creating a hypertext link is called an anchor tag. Dreamweaver creates an anchor tag for objects, text, or images you create links from. For example, if in the Document window you selected the text Home Page , then created a link to a file named home.htm, the HTML source code for the link would look like this: <a href="home.htm"> Home Page </a> Before creating links, be sure you understand how document-relative paths, root-relative paths, and absolute paths work. See About document locations and paths . You can create several types of links in a document: A link to another document or file, such as a graphic, movie, or sound file. A named anchor link, which jumps to a specific location within a document. An e-mail link, which opens an e-mail form with the recipient's address already filled in. A null link, or script link, which enables you to attach behaviors to an object or to create a link that executes JavaScript code. Using Dreamweaver, there are several ways to easily create links between documents: Use the Site Map Window to view, create, change, or delete links. Use Modify > Make Link to select a file to link to. Use the Property inspector to link to a file, by using the folder icon to browse to and select a file, using the point-to-file icon to select a file, or typing the path of the file. Use the context menu, choose Make Link, then select a file to link to.
<url>html/04LinkingNav7.html</url>
<title>Linking to a document</title> Linking to a document Use the Property inspector to link an image, an object, or text to another document, or to link to a particular section of a document. This section provides information on just one way to link documents; for information on using other techniques for creating links, see Linking documents using the point-to-file icon and Creating and modifying links in Site Map view . 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: Click the folder icon to the right of the Link field to browse to and select a file. The path to the linked document appears in the URL field. Use the Relative To pop-up menu in the Select HTML File dialog box to select whether the path is document relative or root relative, then click Select. Note: When you change the path type in the Relative To field, Dreamweaver sets the selection as the default path type for any future links until you change the selection. In the Link field, type the path and file name of the document. To link to a document in your site, enter a document-relative or root-relative path. To link to a document outside your site, enter an absolute path including the type of protocol (such as http://). 3 Select a location in which the document will open. To make the linked document appear somewhere other than in the current window or frame, select an option from the Target pop-up menu on the Property inspector. _blank loads the linked document in a new, unnamed browser window. _parent loads the linked document in the parent 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. For information about targeting frame documents, see Controlling frame content with links .
<url>html/04LinkingNav8.html</url>
<title>Linking documents using the point-to-file icon</title> Linking documents using the point-to-file icon Use the point-to-file icon to create a link to another open document, to a document or image in the Site window, or to a named anchor. 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 at the right of the Link field in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Site window. The Link field updates to show the link. 3 Release the mouse button. links" links.dcr" To create a link from a selection in an open document: 1 Select text in the Document window. 2 Shift-drag from the selection. The point-to-file icon appears as you drag. 3 Point to another open document, a visible anchor in an open document, or a document in the Site window. 4 Release the mouse button. . To create a link from a file in the site map: 1 Select an HTML file 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 document in the Site window. 3 Release the mouse button. For information about displaying a site map, see Viewing local sites .
<url>html/04LinkingNav9.html</url>
<title>Linking to a named anchor</title> Linking to a named anchor Named anchors set position placemarkers in a document. Use named anchors to link to a particular area in the current document or in a different document. Named anchors are often used to jump to a specific topic or to the top of a document, quickly taking your visitor to the selected position. Creating a link to a named anchor is a two-step process. First, create a named anchor, then create a link to the named anchor. Note: Named anchors are case sensitive. To create a named anchor: 1 In the Document window, place the insertion point where you want the named anchor. 2 Do one of the following: Choose Insert > Named Anchor. Press Control+Alt+A (Windows) or Command+Option+A (Macintosh). In the Invisibles panel of the Object palette, click the Anchor button. 3 In the Anchor Name field of the Insert Named Anchor dialog box, type a name for the anchor. If the anchor marker doesn't appear at the insertion point location, choose View > Invisible Elements. To link to a named anchor: 1 In the Document window, select text or an image to create a link from. 2 In the Link field of the Property inspector, type a number sign (#) and the name of the anchor. For example: To link to an anchor named "top" in the current document, type #top . To link to an anchor named "top" in a different document in the same folder, type filename.html#top . 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 to the right of the Link field in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document. Shift-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/05sitemgmt1.html</url>
<title>Site management overview</title> Site management overview Dreamweaver helps you organize the files in your local and remote sites. It allows you to easily duplicate the structure of your local site on a remote server, or to duplicate a remote Web site's structure on your local system. The relative links that you create on your local site continue to work after you transfer files to the remote site, because the structure of the two sites is identical. You create a local site in Dreamweaver by creating a local root folder for the site (or by making an existing folder into the local root folder), using the New Site command; see Creating a local site . You then associate your local site with a remote server using the Define Sites command; see Associating a remote server with a local site . When you transfer files between local and remote sites, Dreamweaver maintains parallel file and folder structures between your local and remote sites. If needed folders do not yet exist in the site that the files are being transferred to, Dreamweaver automatically creates those folders. You can also synchronize the files between your local and remote sites; Dreamweaver copies files in both directions as necessary, and optionally removes unwanted files as appropriate. Dreamweaver includes a number of features for structuring a site and transferring files to and from a remote server. To make collaborative work on a Web site easier, you can check in and check out files on the remote server; others can then see when you're working on a file and know not to edit that file at the same time. (Note, however, that Dreamweaver does not perform version control.)
<url>html/05sitemgmt10.html</url>
<title>Setting up the check in/check out system</title> Setting up the check in/check out system Before you can use the check in/check out system, you must set up some options. Note: To use the check in/check out system, you must have associated your local site with a remote FTP or network server. See Associating a remote server with a local site . To set check in/check out options: 1 Choose Site > Define Sites, select a site, and click Edit. 2 In the Category list at the left, click Check In/Out. Select the Enable File Check In and Check Out option if you are working in a team environment (or working alone but from several different machines). This option is useful for letting others know that you have a file checked out for editing, or for alerting yourself that you may have left a more recent version of a file on another machine. See Using the check in/check out system . Select the Check Out Files When Opening option if you want files to automatically be checked out when you double-click to open them from the Site window. (Using File > Open to open a file doesn't check the file out even when this option is selected.) Enter a check-out name. 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.
<url>html/05sitemgmt11.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 or the Site menu in the Document window to check in and check out files on a remote server. If you've checked out a file but have decided not to edit it (or have decided to discard the changes you've made), you can undo a check out, to make the file on the server available to other team members to check out. Note: If you select Site > Check In or Site > Check Out while the Document window is active, and if the current file is not part of the currently open site, Dreamweaver attempts to determine which of your locally defined sites the current file belongs to; if the current file belongs to only one local site, Dreamweaver opens that site and then performs the Check In or Check Out operation. To check out files from a remote server: 1 Choose the desired site from the current sites pop-up menu at the top of the Site window. 2 Check out files using one of the following approaches: Select one or more files and click the Check Out button at the top of the Site window. Choose Check Out from the context menu or the Site menu. 3 To download dependent files along with the selected files, click Yes at the prompt. To refrain from downloading dependent files, click No. To check in files to a remote server: 1 Choose the desired site from the current sites pop-up menu at the top of the Site window. 2 Select one or more checked-out or new files in the Local pane and do one of the following: Click the Check In button at the top of the Site window. Choose Check In from the context menu or the Site menu. Files checked out by you are marked with a green check mark. If a file has a red check mark next to it, it's currently checked out by another user; don't check in such files. A lock symbol next to a file indicates that the file is read-only (Windows) or locked (Macintosh). New files have neither a check mark nor a lock symbol next to them. 3 To upload dependent files along with the selected file, click Yes at the prompt. To refrain from uploading dependent files, click No. It's usually a good idea to upload dependent files when checking in a new file, but if the latest versions of the dependent files are already on the remote server, there's no need to upload them again. To undo a check out: Select the file and choose Site > Undo Check Out, or right-click (Windows) or Control-click (Macintosh) the file and choose Undo Check Out from the context menu. The local copy of the file becomes read-only, and any changes you've made to it are lost. Note: You can also check in and check out a file that is currently active in the Document window. In the Document window, choose Site > Check In or Site > Check Out. If you check out the currently active file, the currently open version of the file is overwritten by the new checked-out version. If you check in the currently active file, the file may be automatically saved before it's checked in, depending on the preference options you've set; see Site FTP preferences .
<url>html/05sitemgmt12.html</url>
<title>Getting and putting files</title> Getting and putting files If you're working in a collaborative environment, use the check in/check out system to transfer files between local and remote sites (see Using the check in/check out system ). If you're the only person working on the remote site, however, you can instead use the Get and Put commands to transfer files without checking them in or out. Note: If you select Site > Get or Site > Put while the Document window is active, and if the current file is not part of the currently open site, Dreamweaver attempts to determine which of your locally defined sites the current file belongs to; if the current file belongs to only one local site, Dreamweaver opens that site and then performs the Get or Put operation.
<url>html/05sitemgmt13.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 your local site. If you're using the check in/check out system (that is, if Enable File Check In and Check Out is on), the Get command results in a read-only local copy of the file; the file remains available on the remote site for other team members to check out. If Enable File Check In and Check Out is turned off, then getting a file transfers a copy that has both read and write privileges. See Using the check in/check out system . Note: If you're working in a collaborative environment—that is, if others are working on the same files—then turning off Enable File Check In and Check Out is not recommended. In particular, if other people are using the Check In/Check Out system with the site, you should use that system as well. Note that the files that are copied when you click Get are the ones selected in whichever pane of the Site window is currently active. If the Remote pane is active, then the selected remote files are copied to the local site; if the Local pane is active, then the remote versions of the selected local files are copied to the local site. If you are not working in a collaborative environment and you want to have read/write privileges for files that you get, turn off the Enable File Check In and Check Out option for the site; see Associating a remote server with a local site . To get only those files for which the remote version is more recent than the local version, use the Synchronize command; see Synchronizing the files on your local and remote sites . To get files from a remote server: 1 Choose Window > Site Files to open the Site window. 2 At the top of the Site window, choose the desired site from the current sites pop-up menu. 3 If you're using FTP to transfer files, click Connect to open a connection to the remote server. If a connection is already open (indicated by the Connect button saying Disconnect instead of Connect), skip this step. If the remote files are visible in the Remote pane from a previous connection, clicking Connect isn't required; when you click Get, Dreamweaver connects automatically. 4 Select the desired files to download. (Usually you select these in the Remote pane, but you may instead select the corresponding files in the Local pane if you prefer.) 5 Click Get, or choose Get from the context menu or the Site menu. If the file is currently open in a Document window, you can instead choose Site > Get from the Document window. 6 To download dependent files, click Yes; to skip them, click No. (If you already have local copies of the dependent files, click No.) To avoid being asked about dependent files in future downloads, select the Don't Ask Me Again option. Note: To stop the file transfer at any time, click the Stop Current Task button (the red stop sign with the white X in the lower right corner of the Site window) or press Esc (Windows) or Command+period (Macintosh). The transfer may not stop immediately. Dreamweaver records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem. To display the log, choose Window > FTP Log from the Site window (Windows) or Site > FTP Log (Macintosh).
<url>html/05sitemgmt14.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, generally without changing the file's checked out status. There are two common situations in which you use Put instead of Check In: when you're not in a collaborative environment and you aren't using the Check In/Check Out system, or when you want to put the current version of the file on the server but you're going to keep editing it. Note: If you put a file that didn't previously exist on the remote site, and if you're using the Check In/Check Out system, the file is copied to the remote site and is then checked out to you for continued editing. If you want to put a file on a remote server and check it in, use the Check In command. See Checking in and checking out files on a remote server . To put only those files for which the local version is more recent than the remote version, see Synchronizing the files on your local and remote sites . Note: Do not use special characters (such as é, ç, or ¥) or punctuation such as colons, slashes, or periods in the names of files you intend to put on a remote server. Many servers change these characters during upload, which causes any links to the files to break. To put files on a remote server: 1 Choose Window > Site Files to open the Site window. 2 At the top of the Site window, choose the desired site from the current sites list pop-up menu. 3 If you're using FTP to transfer files, you may click Connect to open a connection to the remote server, which allows you to see what's on the remote site before transferring any files. However, clicking Connect is not required; when you click Put, Dreamweaver connects automatically. 4 Select the desired files to upload. (Usually you select these in the Local pane, but you may instead select the corresponding files in the Remote pane if you prefer.) 5 Click Put, or choose Put from the context menu or the Site menu. 6 If the file hasn't been saved, a dialog box may appear (depending on your preference setting in the Site FTP panel of the Preferences dialog box) allowing you to save the file before putting it on the remote server. To save the file, click Yes; to put the previously saved version on the remote server, click No. If you choose not to save the file, any changes you've made since last time you saved will not be put onto the remote server. However, the file remains open, so you can still save the changes after putting the file on the server if you wish. 7 To upload dependent files, click Yes; to skip them, click No. (If the remote site already contains copies of the dependent files, click No.) To avoid being asked about dependent files in future uploads, select the Don't Ask Me Again option. Note: To stop the file transfer at any time, click the Stop Current Task button (the red stop sign with the white X in the lower right corner of the Site window) or press Esc (Windows) or Command+period (Macintosh). The transfer may not stop immediately. If the file is currently open in a Document window, you can instead choose Site > Put from the Document window. Dreamweaver records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem. To display the log, choose Window > FTP Log from the Site window (Windows) or Site > FTP Log (Macintosh).
<url>html/05sitemgmt15.html</url>
<title>Synchronizing the files on your local and remote sites</title> Synchronizing the files on your local and remote sites Once you've created files in your local and remote sites, you can synchronize the files between the two sites. Use the Site > Synchronize command to transfer the latest versions of your files to and from your remote site. If your remote site is an FTP server (rather than a networked server), then synchronizing your files uses FTP. For more information on using FTP, see Associating a remote server with a local site . Before you synchronize your sites, Dreamweaver lets you verify which files you want to put onto or get from your remote server. Dreamweaver also confirms which files have been updated after you complete the synchronization. To see which files are newer on the local site or which files are newer on the remote site, without synchronizing, choose Edit > Select Newer Local or Edit > Select Newer Remote (Windows, from the Site window) or Site > Site Files View > Select Newer Local or Site > Site Files View > Select Newer Remote (Macintosh). To synchronize your files: 1 If you want to synchronize specific files or folders rather than the whole site, choose those files or folders in either the Local or the Remote pane of the Site window. 2 Choose Site > Synchronize in the Site window (Windows) or from the menu bar (Macintosh). 3 To synchronize the entire site, choose Entire ' site name ' Site from the Synchronize pop-up menu. To synchronize selected files only, choose Selected Local Files Only (or Selected Remote Files Only if the Remote pane was where you made the most recent selection). 4 Choose the direction in which you want to copy the files: Choose Put Newer Files to Remote if you want to upload all the local files that have more recent modification dates than their remote counterparts. Choose Get Newer Files from Remote if you want to download all the remote files that have more recent modification dates than their local counterparts. Choose Get and Put Newer Files to place the most recent versions of all the files on both the local and the remote sites. 5 Choose whether or not to delete the files on the destination site that don't have counterparts on the origin site. If you choose Put Newer Files to Remote and you select the Delete option, then Dreamweaver deletes any files in your remote site for which there are no corresponding local files. If you choose Get Newer Files from Remote, then Dreamweaver deletes any files in your local site for which there are no corresponding remote files. 6 Click OK. If the newest version of each chosen file is already in both places, an alert appears, informing you that no synchronization is necessary. 7 In the Synchronize Files dialog box, verify which files you want to delete, put, and get. If you don't want Dreamweaver to delete, put, or get a particular file, deselect it by clicking the checkbox to the left of the file (in the Action column). 8 Click OK. The files are automatically transferred (and deleted as necessary), and Dreamweaver updates the Synchronize Files dialog box with the status. 9 To save the verification information to a local file, click Save Log.
<url>html/05sitemgmt16.html</url>
<title>Searching and replacing</title> Searching and replacing You can search for a file in your local and remote sites from the Document window or the Site window. To display the Site window, choose Window > Site Files. You can also search the current document, selected files, a directory, or an entire site for text, text surrounded by specific tags, or HTML tags and attributes. Note that you use different commands to search for files and to search for text (and/or HTML) within files: Locate in Local Site and Locate in Remote Site search for files, while Edit > Find and Edit > Replace search for text and tags within files. Note: If you select Site > Locate in Local Site or Site > Locate in Remote Site while the Document window is active, and if the current file is not part of the currently open site, Dreamweaver attempts to determine which of your locally defined sites the current file belongs to; if the current file belongs to only one local site, Dreamweaver opens that site and then locates the file in it. To find a file in your local site: 1 Select the file in the Remote pane of the Site window or open the file in a Document window. 2 Choose Site > Locate in Local Site. (On Windows only, if the Site window is active, choose Edit > Locate in Local Site.) The file is highlighted in the Local pane of the Site window. To find a file in your remote site: 1 Select the file in the Local pane of the Site window or open the file in a Document window. 2 Choose Site > Locate in Remote Site. (On Windows only, if the Site window is active, choose Edit > Locate in Remote Site.) The file is highlighted in the Remote pane of the Site window. To search for text and/or HTML within documents: 1 Choose from the following options: From the Document or Site window, choose Edit > Find or Edit > Replace. From the HTML Source inspector, right-click (Windows) or Control-click (Macintosh) and choose Find or Replace from the context menu. 2 In the Find or Replace dialog box that appears, use the Find In option to specify which files to search: Choosing Current Document confines the search to the active document. This option is available only when you choose Find or Replace with the Document window active, or from the context menu in the HTML Source inspector. Choosing 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 with the Site window active (that is, in front of the Document window). Choosing Current Site expands the search to all the HTML documents, library files, and text documents in the current site. After you choose Current Site, the name of the current site appears to the right of the pop-up menu. If this is not the site you want to search, choose a different site from the current sites pop-up menu in the Site window. Choosing Folder confines the search to a specific group of files. After choosing Folder, click the folder icon to browse to and select the directory you want to search. 3 Use the Find What option to specify the kind of search you want to perform. Choosing Text lets you search for specific text strings in the Document window. A text search ignores any HTML that interrupts the string. For example, a search for the black dog would match both the black dog and the <i>black</i> dog . Choosing HTML Source lets you search for specific text strings in the HTML source code. See About HTML source searches . Choosing Text (Advanced) lets you search for specific text strings that are either within or not within a tag or tags. For example, in a document that contains the following HTML, searching for tries not inside i would find only the second instance of the word tries : John <i>tries</i> to get his work done on time, but he doesn't always succeed. He tries very hard. See Searching for text between specific tags . Choosing 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 . Note: Pressing Control+Enter or Shift+Enter (Windows), or Control+Return, Shift+Return, or Command+Return (Macintosh), adds line breaks within the search fields, allowing you to search for a Return character. Be sure to deselect the Ignore Whitespace Differences option when performing this search, if you're not using regular expressions. Note that this finds a particular character, not the general notion of a line break; for instance, it doesn't find a <br> tag or a <p> tag. Return characters appear as spaces in the Document window, not as line breaks. 4 Use the following options to expand or limit the search: The Match Case option, when selected, 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 . Note: The Ignore Whitespace Differences option, when selected, treats all whitespace as a single space for the purposes of matching. For example, with this option selected, this text would match this text but not thistext . This option is not available when the Use Regular Expressions option is selected; you must explicitly write your regular expression to ignore whitespace. Note that <p> and <br> tags do not count as whitespace. The Use Regular Expressions option causes certain characters and short strings (such as ?, *, \w, and \b) in your search string to be interpreted as regular expression operators. For example, a search for the b\w*\b dog will match both the black dog and the barking dog . See About regular expressions .
<url>html/05sitemgmt17.html</url>
<title>About HTML source searches</title> About HTML source searches 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/05sitemgmt18.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 Choose Edit > Find or Edit > Replace, and specify which files to search, as detailed in Searching and replacing . 2 Choose Tag from the Find What pop-up menu. 3 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 6. Otherwise, proceed with step 4. 4 Limit the search with one of the following tag modifiers: Choose With Attribute to choose an attribute that must be in the tag for it to match. You can specify a particular value for the attribute or choose [any value]. Choose Without Attribute to choose an attribute that cannot be in the tag for it to match. For example, choose this option to search for all IMG tags with no ALT attribute. Choose Containing to specify text or a tag that must be contained within the original tag for it to match. For example, in the code <B><FONT FACE="Arial">Heading 1</FONT></B> , the FONT tag is contained within the B tag. Choose Not Containing to specify text or a tag that cannot be contained within the original tag for it to match. Choose Inside Tag to specify a tag that the target tag must be inside of for it to match. Choose Not Inside Tag to specify a tag that the target tag cannot be inside of for it to match. 5 Click the plus (+) button and repeat step 4 to further limit the search. 6 Initiate the search: Click Find Next to highlight the next instance of the search text in the current document. Click Find All to generate a list of all the instances of the search text in the current document. 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. Find All generates a list of documents that contain the search text.
<url>html/05sitemgmt19.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 Choose Edit > Find or Edit > Replace, and specify which files to search, as detailed in Searching and replacing . 2 Choose Text (Advanced) from the Find What pop-up menu. 3 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 . 4 Choose Inside Tag or Not Inside Tag, and then choose a tag from the adjacent pop-up menu. For example, choose Inside Tag and then title . 5 Click the plus (+) button to limit the search to tags with a specific attribute or attributes. Since the <title> tag has no attributes, you won't need to use this option to find all the untitled pages on your site. 6 Click Find Next to open the next document that contains the search text, or click Find All to generate a list of documents that contain this text.
<url>html/05sitemgmt2.html</url>
<title>Setting up a remote site</title> Setting up a remote site Before you set up a remote site, create a local site (which you will then associate with the remote site). See Creating a local site . The next step in setting up a remote site is to determine where the site will be located—that is, what server the site will be served from. Your client, employer, or ISP probably has a server already set up to serve Web pages (whether Internet or intranet); ask a system administrator or your client for the name of that server, and find out how to transfer files to that server. In particular, determine whether to use FTP to connect to the server, or whether you can instead mount the server as a network-accessible disk drive from your desktop. If you're connecting using FTP, find out the name of the FTP server. When you've gathered this information, use the Define Sites command to associate the server with your local site; see Associating a remote server with a local site . If you encounter problems setting up your remote site, see Troubleshooting remote site setup . After you've set up a remote site, you can upload files to it, or download files from it if there are already files on the site. See Using the check in/check out system and Getting and putting files .
<url>html/05sitemgmt20.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 where queries are saved is the Configuration/Queries folder inside the Dreamweaver application folder. 3 In the dialog box that appears, give the file a name that identifies the query and click Save. For example, if the search pattern involves looking for IMG tags with no ALT attribute, you might name the query img_no_alt.dwr. Find queries end in the extension .dwq; Replace queries end in the extension .dwr. To recall a search pattern: 1 Choose Edit > Find 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 (.dwq files) and Replace queries (.dwr files) are available. 4 Click Find Next, Find All, Replace, or Replace All to initiate the search.
<url>html/05sitemgmt21.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 by preceding it with a backslash. For example, to search for the actual asterisk in the phrase some conditions apply* , your search pattern might look like this: apply\* . If you don't escape the asterisk, you'll find all the occurrences of "apply" (as well as any of "appl", "applyy", and "applyyy"), not just the ones followed by an asterisk. Character Matches Example ^ Beginning of input or line. ^T matches "T" in "This good earth" but not in "Uncle Tom's Cabin" $ End of input or line. h$ matches "h" in "teach" but not in "teacher" * The preceding character 0 or more times. um* matches "um" in "rum", "umm" in "yummy", and "u" in "huge" + The preceding character 1 or more times. um+ matches "um" in "rum" and "umm" in "yummy" but nothing in "huge" ? The preceding character at most once (that is, indicates that the preceding character is optional). st?on matches "son" in "Johnson" and "ston" in "Johnston" but nothing in "Appleton" or "tension" . Any single character except newline. .an matches "ran" and "can" in the 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 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 nonword 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 nondigit character. Equivalent to [^0-9]. \D matches "S" in "900S" and "Q" in "Q45" \f Form feed. \n Line feed. \r Carriage return. \s Any single white-space character, including space, tab, form feed, or line feed. \sbook matches "book" in "blue book" but nothing in "notebook" \S Any single non-white-space 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%" Control+Enter or Shift+Enter (Windows), or Control+ Return or Shift+Return or Command+ Return (Macintosh) Return character. Be sure to deselect the Ignore Whitespace Differences option when searching for this, if not using regular expressions. Note that this matches a particular character, not the general notion of a line break; for instance, it doesn't match a <br> tag or a <p> tag. Return characters appear as spaces in the Document window, not as line breaks. Use parentheses to set off groupings within the regular expression to be referred to later; use $1, $2, $3, and so on (in either the Find field or the Replace field) to refer to the first, second, third, and later parenthetical groupings. For example, searching for (\d+)\/(\d+)\/(\d+) and replacing it with $2/$1/$3 swaps the day and month in a date separated by slashes (to convert between American-style dates and European-style dates).
<url>html/05sitemgmt22.html</url>
<title>Creating sites for multiple browsers</title> Creating sites for multiple browsers As you create your site, you should be aware of the variety of Web browsers your visitors are likely to use. Where possible, design sites for maximum compatibility, given other design constraints. Why and when to create cross-browser-compatible sites There are over two dozen different Web browsers in use, most of which have been released in more than one version. Even if you target only Netscape Navigator and Microsoft Internet Explorer, which are used by the majority of Web users, be aware that not everyone uses the very latest versions of those browsers. If your site is on the Web, sooner or later someone will visit it using Netscape Navigator 2.0—or the browser that AOL provides its customers, or a text-only browser such as Lynx. There are some circumstances under which there's no need to create cross-browser-compatible sites. For example, if your site is available only on your company's intranet, and you know that all of your company's employees use the same browser, you can optimize your site to rely on features of that browser. Similarly, if you're creating HTML content to be distributed on CD-ROM, and you distribute a browser on the CD, you can assume that all of your customers have access to that particular browser. But under most circumstances, for Web sites designed for public consumption, it's a good idea to make your site viewable using as many browsers as possible. Pick one or two browsers as your target browsers, and design the site for those browsers, but try exploring the site in other browsers now and then to avoid providing too much incompatible content. General issues to consider The more sophisticated your site is—in terms of layout, animation, multimedia content, and interaction—the less likely it is to be cross-browser compatible. Not all browsers can run JavaScript, for example. A page of plain text that uses no special characters will probably display well in any browser, but such a page may have much less aesthetic appeal than one that uses graphics, layout, and interaction effectively. Try to strike a balance between designing for maximum effect and designing for maximum compatibility. One useful approach is to provide multiple versions of certain important pages, such as your site's home page. For example, you can design both a framed version and a frameless version of such a page. You can then use various browser capabilities to automatically shift visitors without frame-capable browsers to the frameless version.
<url>html/05sitemgmt23.html</url>
<title>Using Behaviors to detect browsers and plugins</title> Using Behaviors to detect browsers and plugins You can use behaviors to determine which browser your visitors are using and to determine whether they have a particular plugin installed. For more information on behaviors, see Behaviors overview . Check Browser sends visitors to different pages depending on their browser brands and versions. For example, you might want visitors 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. See Check Browser . Check Plugin sends visitors to different pages depending on whether they have the specified plugin installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not. See Check Plugin .
<url>html/05sitemgmt24.html</url>
<title>About testing your site</title> About 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/05sitemgmt25.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 for Internet Explorer versions 2.0, 3.0, 4.0, and 5.0. To modify the existing profiles or to create new ones, see About browser profiles . You can run a target browser check on a document, on a directory, or on an entire site. Note that doing so does not check scripts in your 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 or browsers 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/05sitemgmt26.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. The only links that Dreamweaver verifies are links 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. 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 can't check because they are outside the site), and orphaned files (files that no other documents link to). See Fixing broken links for more information. To check links within the current document: 1 Save the file to a location within a local site. 2 Choose File > Check Links. 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 Initiate the check using either of these methods: Right-click (Windows) or Control-click (Macintosh) one of the selected files and choose Check Links > Selected Files/Folders from the context menu. Choose File > Check Links. To check links in the entire site: Choose Site > Check Links Sitewide. To toggle among the link-checker report lists: After running a link check, choose Broken Links, External Links, or Orphaned Files from the Show pop-up menu. To save the complete report as a tab-delimited text file: Click Save.
<url>html/05sitemgmt27.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 Click the folder icon to browse to the correct file to link to, or type the correct path and file name. 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 Enable File Check In and Check Out is on 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 To set a new path and file name, click the folder icon to browse to the correct file, or type over the highlighted text. 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/05sitemgmt28.html</url>
<title>Previewing in browsers</title> Previewing in browsers You can preview documents in your target browsers at any time. 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. 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 absolute paths . You can define up to 20 browsers for previewing. All the browsers you define appear on the Preview in Browser menu. To preview your document in a browser: Do one of the following: Choose File > Preview in Browser. Press F12 to display the current document in the primary browser. Press Control+F12 (Windows) or Command+F12 (Macintosh) to display the current document in the secondary browser. To change your primary browser or define a secondary browser: 1 Choose File > Preview in Browser > Edit Browser List. 2 Set previewing preferences as desired. See Preview in Browser preferences for details.
<url>html/05sitemgmt29.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 choose File > Preview in Browser > Edit Browser List. See Previewing in browsers for information on how to preview. Preview Using Local Server (Windows only) allows you to choose whether to use a local server when you preview a page in a browser. (You must be running server software on your local computer for this option to work.) When this option is selected, Dreamweaver supplies the current page for previewing by a local server as a URL beginning with http://localhost/. With this option deselected, 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. + adds a browser to the list. - deletes the selected browser from the list. Edit Changes settings for the selected browser. Primary Browser and Secondary Browser Specify whether the selected browser is the primary or secondary browser. F12 opens the primary browser. Control+F12 (Windows) or Command+F12 (Macintosh) opens the secondary browser.
<url>html/05sitemgmt3.html</url>
<title>Associating a remote server with a local site</title> Associating a remote server with a local site After you've created a local site, use the Define Sites command to add or change associated remote server information and check in/check out preferences. To associate a remote server with an existing local site: 1 Choose Define Sites from the current sites pop-up menu in the Site window, or choose Site > Define Sites . 2 A dialog box appears listing currently defined sites; select an existing site and click Edit. (If you have no currently defined sites, create a local site before proceeding; see Creating a local site .) 3 In the Category list at the left, click Web Server Info. 4 Choose one of the following Server Access options: Use None if you do not plan to upload your site to a server. Then click OK and skip the rest of this procedure. Use Local/Network if your Web server is mounted as a network drive (Windows) or as an AppleTalk or NFS server (Macintosh), or if you are running a Web server on your local machine. Click the folder icon to browse to and select the folder where your site files are stored on the server. If you want the Remote pane of the Site window to update automatically as files are added and deleted, select the Refresh Remote File List Automatically option; for increased speed when copying files to the remote site, leave this option unselected. (To manually refresh the Site window at any time, click the Site window's Refresh button.) Click OK and skip the rest of this procedure. Note: To manually refresh the Remote pane only, choose View > Refresh Remote in the Site window (Windows) or Site > Site Files View > Refresh Remote (Macintosh). Use FTP if you connect to your Web server using FTP. 5 Enter the host name of the FTP host to which you upload files for your Web site. Your FTP host name is the full Internet name of a computer system, such as ftp.mindspring.com or shell16.ba.best.com. Enter the full host name without any additional text; in particular, don't add a protocol name in front of the host name. For example: Right: ftp.mindspring.com Wrong: ftp://ftp.mindspring.com Wrong: mindspring.com 6 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). See Determining the remote site's root directory . 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). 7 Enter the login name and password that you use to connect to the FTP server. Dreamweaver saves your password by default. Deselect Save if you prefer to be prompted for a password each time you connect to the remote server. 8 Select appropriate firewall options for your site: Select the Use Firewall option if you are connecting to the remote server from behind a firewall. See Site FTP preferences . Some firewalls require use of passive FTP, which lets your local software set up the FTP connection rather than requesting the remote server to set it up. Select the Use Passive FTP option if your firewall configuration requires it. If you're not sure whether to use this option, check with your local firewall administrator. 9 Click OK.
<url>html/05sitemgmt30.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/05sitemgmt31.html</url>
<title>About Design Notes</title> About Design Notes You can keep track of extra file information associated with your documents, such as image source-file names and comments on file status, by using the Design Notes command. For example, if you copy a document from one site to another, you can add Design Notes for that document, with the comment that the original document is in the other site folder. Then if you update that document (or someone else does), you'll know that you need to update the original page as well. You can also use Design Notes to keep track of sensitive information that you can't put inside a document for security reasons. For example, you can include information about how the document was created, or notes on how a particular price or configuration was chosen, or what marketing factors influenced a design decision. For general information on using Design Notes, see Saving file information in Design Notes . For information on using Design Notes with Fireworks 3.0, see Using Design Notes in Fireworks and Dreamweaver .
<url>html/05sitemgmt32.html</url>
<title>Saving file information in Design Notes</title> Saving file information in Design Notes You can create a Design Notes file for each document or template in your site. (Note that if you add Design Notes to a template, the documents based on the template do not inherit the Design Notes.) You can also create Design Notes for applets, ActiveX controls, images, Flash movies, Shockwave objects, and image fields in your documents. To set up Design Notes for your site: 1 Choose Site > Define Sites, select a site, and click Edit. 2 In the Category list at the left, click Design Notes. Enable Design Notes for your site by selecting Maintain Design Notes (if it's not already selected). When Maintain Design Notes is selected, you can create Design Notes for files in your site. Whenever a file is copied, moved, renamed, or deleted, the associated Design Notes file is also copied, moved, renamed, or deleted. Choose whether the Design Notes associated with your site are uploaded with the rest of your documents, by selecting or deselecting Upload Design Notes for Sharing. When Upload Design Notes for Sharing is selected, you can share Design Notes with the rest of your team. When you put or get a file, Dreamweaver automatically puts or gets the associated Design Notes file. If you work alone on your site, you can deselect this option to improve performance of file transfers; when the option is deselected, Design Notes are maintained locally but are not uploaded with your files. 3 Click OK. To add Design Notes to a document: 1 While the document is active in the Document window, choose File > Design Notes. You can also select the file in the Site window, and then choose File > Design Notes. If the file resides on a remote site, you must first check out or get the file, then select it in the local folder. (See Checking in and checking out files on a remote server or Getting and putting files .) 2 In the Basic Info tab, add notes of various sorts: Choose the status of the document from the Status pop-up menu. Type comments in the Notes text field. Click the date icon (just above the Notes text field) to insert the current local date. To make the Design Notes file appear every time the file is opened, select Show When File Is Opened. 3 In the All Info tab, add other keys and values that might be useful to other developers of your site. For example, you could name a key Author (in the Name field) and define the value as Heidi (in the Value field). Click the plus (+) button to add a new key/value pair; select a pair and click the minus (-) button to remove it. 4 Click OK to save the notes. The notes you entered are saved to a subfolder called _notes, in the same location as the current file. The file name is the document's file name, plus the extension .mno. For example, if the file name is index.html, the associated Design Notes file is named index.html.mno. To add Design Notes to an object: 1 Choose Design Notes from the object's context menu. (Open the context menu for the object by right-clicking (Windows) or Control-clicking (Macintosh) the object.) 2 Follow steps 2 through 4 above for adding Design Notes to a document. Note that an object's Design Notes file is saved in a _notes subfolder in the same directory as the object's source file, which is not necessarily in the same directory as the document that the object appears in. To assign a status that isn't listed in the Status pop-up menu: 1 Open Design Notes for a file or object. 2 Click the All Info tab. 3 Click the plus (+) button. 4 In the Name field, enter the word status . 5 In the Value field, enter the status. If a status value already existed, it's replaced with the new one. 6 Click the Basic Info tab and note that the new status value appears in the Status pop-up menu. Note: You can have only one new value in the status menu at a time. If you follow this procedure again, the new status value you entered the first time is replaced with the new status value you enter the second time. To disable Design Notes: 1 Choose Site > Define Sites. 2 In the Define Sites dialog box, select the site and click Edit. 3 In the Site Definition dialog box, click Design Notes. 4 Deselect Maintain Design Notes. Deselecting this option disables the Design Notes capability. If you deselect this option and then click Clean Up, all local Design Notes files for your site are deleted. 5 Click OK. A dialog box appears, asking if you would like to delete existing Design Notes files. Click Yes to delete such files, or No to leave them in place. To use Design Notes locally only: 1 Choose Site > Define Sites. 2 In the Define Sites dialog box, select the site and click Edit. 3 In the Site Definition dialog box, click Design Notes. 4 Deselect Upload for Sharing. Design Notes will not be transferred to the remote site when you check in/put your files. You will still be able to add and modify the Design Notes for your site locally. To delete unassociated Design Notes from your site: 1 Choose Site > Define Sites. 2 In the Define Sites dialog box, select the site and click Edit. 3 In the Site Definition dialog box, click Design Notes. 4 Click Clean Up. Dreamweaver prompts you to verify that it should delete any Design Notes that are no longer associated with a file in your site. (If you use Dreamweaver to delete a file that has an associated Design Notes file, the Design Notes file is deleted too, so usually orphan Design Notes files occur only if you delete or rename a file outside of Dreamweaver.) Note: If you deselect the Maintain Design Notes option before you click Clean Up, Dreamweaver deletes all Design Notes files for your site.
<url>html/05sitemgmt33.html</url>
<title>Using Design Notes in Fireworks and Dreamweaver</title> Using Design Notes in Fireworks and Dreamweaver If you open a graphic in Macromedia Fireworks 3.0 and export it to another format, Fireworks automatically saves the name of the original source file in a Design Notes file. For example, if you open myhouse.png in Fireworks and export it to myhouse.gif, Fireworks automatically creates a Design Notes file called myhouse.gif.mno, which contains the name of the original file, as an absolute file: URL. For example, the Design Notes for myhouse.gif might contain this line: fw_source="file:///Mydisk/sites/assets/orig/myhouse.png" If the image contains hotspots or rollovers, the HTML source for those items is also added to the Design Notes file. When you import the graphic into Dreamweaver, the Design Notes file is automatically copied into your site along with the graphic. When you select the image in Dreamweaver and choose to edit it using Fireworks (see Using an external image editor ), Fireworks opens the original file for editing.
<url>html/05sitemgmt4.html</url>
<title>Determining the remote site's root directory</title> Determining the remote site's root directory The host directory you specify in the Define Sites dialog box (see Associating a remote server with a local site ) should be the same as the root folder for the remote site. If the structure of your remote site doesn't match the structure of your local site, your files are uploaded to the wrong place and aren't visible to visitors to the site. Note: The remote root directory must exist before Dreamweaver can connect to it. If you don't have a root directory for your site on the remote server, create one before attempting to connect, or ask the server's administrator to create a root directory for you if you can't do it. If you're uncertain what to enter in the Host Directory field, try leaving it blank. On some servers, your root directory is the same as the directory you first connect to with FTP. To find out, connect to the server. If a folder with a name like public_html, or www, or your login name, appears in the Remote panel, that's probably the directory you should use in the Host Directory field. Write down the directory name, disconnect, and reopen the Site Definition dialog box. Then enter the directory name in the Host Directory field and connect again.
<url>html/05sitemgmt5.html</url>
<title>Troubleshooting remote site setup</title> Troubleshooting remote site setup A Web server can be configured in a wide variety of ways. This section provides information on some common issues you may encounter in setting up a remote site, and how to resolve them. Dreamweaver's FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access. If you encounter problems with FTP access, ask your local system administrator for help. Sometimes with slow connections the default FTP timeout value of 60 seconds results in too many timeouts. Increase this value (in the Site FTP panel of the Preferences dialog box) if you experience frequent timeouts. But don't increase it too much, or you'll have to wait a long time when a connection really can't be made. Generally, timeout values of 30 to 120 seconds are the most useful. File and folder names that contain spaces and special characters often cause problems when transferred to a remote site. Use underscores in place of spaces, and avoid special characters in file and folder names wherever possible. In particular, colons, slashes, periods, and apostrophes in file or folder names can cause problems. Special characters in file or folder names may also sometimes prevent Dreamweaver from creating a site map. On the Macintosh, file names cannot be more than 31 characters long. If you encounter problems with long file names, rename them with shorter names. Note that many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server's disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory, but if you can connect to one part of the server but not another, there may be an alias problem. In general, when you encounter a problem with an FTP transfer, examine the FTP log by choosing Window > Site FTP Log in the Site window (Windows) or Site > FTP Log (Macintosh). If you encounter an error message such as "cannot put file," your remote site may be out of space. Look at the FTP log for more detailed information.
<url>html/05sitemgmt6.html</url>
<title>About the Site window</title> About the Site window Use the Site window for standard file maintenance operations, such as creating new HTML documents, moving files, creating folders, and deleting items; for site navigation layout with the site map (see Viewing the site structure ); 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 .
<url>html/05sitemgmt7.html</url>
<title>Using Site window controls</title> Using Site window controls To open the Site window, choose Window > Site Files. Then use the following buttons and options to set what the Site window displays and to transfer files back and forth between the local site and the remote site: Site Files View Displays the file structure of the remote or local site in the changeable pane of the Site window. (The changeable pane is whichever pane is not specified as always showing a particular site in the Site FTP section of the Preferences dialog box; see Site FTP preferences .) This is the default view for the Site window. Site Map View Displays a visual map of your site based on how the documents are linked to one another, in the changeable pane of the Site window. (The changeable pane is whichever pane is not specified as always showing a particular site in the Site FTP section of the Preferences dialog box; see Site FTP preferences .) Hold down the button to choose Map Only or Map and Files from the pop-up menu. Current sites pop-up menu Lists sites you've defined. To switch sites, choose a different site from the list. To add a site or edit the information for an existing site, choose Define Sites from the bottom of the list (see Associating a remote server with a local site ). 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 Refreshes the local and remote directory lists. Use this button to manually refresh the directory lists if you deselected either Refresh Local File List Automatically or Refresh Remote File List Automatically (Local/Network setting only) in the Site Definition dialog box (see Associating a remote server with a local site ). Also use this button to make the remote directory list appear when you have mounted a 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. If Enable File Check In and Check Out is turned off, getting a file transfers a copy that has both read and write privileges. Note that the files copied are the ones selected in whichever pane of the Site window is currently active. If the Remote pane is active, the selected remote files are copied to the local site; if the Local pane is active, the remote versions of the selected local files are copied to the local site. See Getting files from a remote server . Put Copies the selected files from the local site to the remote site. Note that the files copied are the ones selected in whichever pane of the Site window is currently active. If the Local pane is active, the selected local files are copied to the remote site; if the Remote pane is active, the local versions of the selected remote files are copied to the remote site. See Putting files on a remote server . Check Out Transfers a copy of the file from the remote server to your local site (overwriting the existing local copy of the file, if any) and marks the file as checked out on the server. This option is not available if Enable File Check In and Check Out is turned off for the current site. See Checking in and checking out files on a remote server . 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 Enable File Check In and Check Out is turned off for the current site. See Checking in and checking out files on a remote server . Stop Current Task Aborts any current activity, including getting and putting files. The button appears as a red stop sign shape with a white X, in the lower right corner. Note that it may take a little time for the server to process the stop request, so the file transfer may not halt immediately.
<url>html/05sitemgmt8.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 which site (remote or local) is always shown, and which Site window pane (left or right) the local and remote files appear in. By default, the local site always appears on the right. Whichever pane is not chosen (the left one by default) is the changeable pane; that pane can display either the site map or the files in the other site (the remote site by default). Dependent Files Displays a prompt for transferring dependent files (such as images, external style sheets, and other files referenced in the HTML file) that the browser loads when it loads the HTML file. By default, both Prompt on Get/Check Out and Prompt on Put/Check In are selected. Note: To force the Include Dependent Files prompt to appear even when these options are deselected, hold down Alt (Windows) or Option (Macintosh) while choosing the Get, Put, Check In, or Check Out commands. FTP Connection Determines whether the connection to the remote site is terminated after the specified number of minutes have passed with no activity. FTP Time Out Specifies the number of seconds 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. Note: If you are behind a firewall, select the Use Firewall option in the Site Definition dialog box. See Associating a remote server with a local site . 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. Put Options: Save Files Before Putting Indicates that unsaved files are to be saved without prompting before being put onto the remote site. Define Sites Brings up the Define Sites dialog box, where you can edit an existing site or create a new one. See Associating a remote server with a local site . You can also define whether the types of files that you want to transfer should be transferred as ASCII (text) or binary. To do so, open the FTPExtensionMap.txt file in the Dreamweaver/Configuration folder. You can modify and delete the list of which file types are transferred in each format, as well as add your own file types. If a file's extension is not defined in this file, Dreamweaver automatically transfers the file in binary mode. Note: On the Macintosh, the FTPExtensionMap.txt file also contains information about mapping file extensions to Macintosh creators and file types. This mapping allows a downloaded file to be given the correct icon and to be opened by the correct application when you double-click the file in the Finder. Note that when a file is transferred as ASCII, your Line Breaks preference setting is ignored. See Setting HTML Format Preferences .
<url>html/05sitemgmt9.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. Note: Although you don't need to know this to use the check in/check out system, in case you're curious, Dreamweaver keeps track of checked out files by placing a text file with the extension .lck on both the remote server and the local site. The .lck files are not visible in the Site window. Each .lck file contains the name of the user who currently has the file checked out. Dreamweaver does not make checked-out files read-only on the remote server. If you transfer files with an application other than Dreamweaver, you can overwrite checked-out files. However, in applications other than Dreamweaver, the .lck file is visible next to the checked-out file in the file hierarchy to help prevent such accidents. You can enable check in/check out for some sites and disable it for others. See Setting up the check in/check out system . 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/06formatting1.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 submenu or the Format pop-up menu in the Property inspector to set the default formatting 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. To apply formatting such as bold, italic, code, underline, and so on, use the Text > Styles submenu. You can also combine several standard HTML tags to form a single style, called an HTML style. For example, you can manually apply HTML formatting using a combination of tags, and then save that formatting as an HTML style; it's stored in the HTML Style palette. The next time you want to format text using that combination of HTML tags, you can simply select the saved style from the HTML Style palette. HTML styles are supported by all Web browsers and save time over manually formatting text. Another kind of style, called a CSS style, lets you apply text and page formatting with the advantage of automatic updating. You can store CSS styles directly in the document or, for more power and flexibility, in external style sheet. If you attach an external style sheet to several web pages, all the pages automatically reflect any changes you make to the style sheet. To access CSS styles, use the CSS Style palette. Manual HTML formatting and HTML styles apply formatting using standard HTML tags (such as B , FONT , and CODE ) that are supported by all popular Web browsers. CSS styles 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 ). CSS (which stands for Cascading Style Sheets) is supported only by the newer Web browsers—Netscape Navigator 4.0 and later and Microsoft Internet Explorer 3.0 and later. You can use CSS styles, HTML styles, and manual HTML formatting within the same page. Manual HTML formatting overrides formatting applied by an HTML style or CSS style, so although it is labor intensive, it can be a convenient method of modifying formatting applied by HTML styles or CSS styles.
<url>html/06formatting10.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 you specify a new style 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/06formatting11.html</url>
<title>Formatting text using HTML styles</title> Formatting text using HTML styles An HTML style is defined by one or more HTML tags (such as B , I , FONT, and CENTER ) that apply formatting to text. The HTML 4.0 specification released by the World Wide Web Consortium (W3C) in early 1998 discourages the use of HTML formatting tags in favor of CSS style sheets. In practice, however, HTML formatting tags—while offering more limited control over appearance than CSS style sheets—are supported by a wider range of browsers than CSS style sheets, and 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 CSS 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 CSS style sheets. (To see an example of how this works, try viewing Dreamweaver Help in a 3.0 browser.) See Applying paragraph and heading tags . Using HTML styles Use HTML styles to save text and paragraph formatting that you want to use elsewhere in your documents. Once you have created an HTML style based on one or more HTML tags, you can reapply that formatting to any text in any document using the HTML Style palette. Unlike CSS styles, HTML style formatting only affects text that you apply it to, or text that you create using a selected HTML style. If you change the formatting of an HTML style you have created, text that was originally formatted with that style is not updated. If you want the ability to change formatting, and automatically update all instances of that formatting, use CSS styles; see Formatting text with CSS style sheets . You can use the HTML Style palette to record the HTML styles you use in your site, and then share them with other users, local sites, or remote sites. Click the arrow button for an animated introduction to using the HTML Style palette. To display the HTML Style palette, do one of the following: Choose Window > HTML Styles. Click the HTML Styles button in the Launcher. Click the HTML Styles icon (a yellow paragraph symbol on the Mini-Launcher at the bottom of the Document window). To view an existing HTML style: 1 In the HTML Style palette, select a style. Note that Clear Paragraph Style and Clear Selection Style are used on text that has a style applied;, but they are not styles themselves; they cannot be viewed or edited. 2 Right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu, or double-click the HTML style and choose Edit from the context menu. 3 In the Define HTML Style dialog box, specify the settings for the style. The Apply To options determine whether the style applies to the selected text (Selection) or the current text block (Paragraph). The When Applying options determine whether the settings for the style are added to the original text formatting (Add to Existing Style), or removed from the existing formatting and replaced with the new settings (Clear Existing Style). To apply an existing HTML style: In the HTML Style palette, select a style. If the Auto Apply checkbox at the bottom of the palette is selected, click the style once. If the Auto Apply checkbox is not selected, click the style, then click Apply. To clear text formatting in your document: 1 Select the formatted text. 2 In the HTML Style palette, click Clear Paragraph Style or Clear Selection Style. Clear Paragraph Style removes any formatting from the current text block in the document. Clear Selection Style removes any formatting from the selected text. Note: You can use Clear Paragraph Style and Clear Selection Style to remove any formatting, regardless of how the original formatting was applied (for example, through the HTML Style palette or the Property inspector). To remove a style from the HTML Style palette: 1 In the HTML Style palette, deselect the checkbox to turn off the Auto Apply option. 2 Select an HTML style. 3 Click the Delete Style (trash can) icon in the lower right corner of the palette. To create a new HTML style based on existing text: 1 In your document, select or create text that has the formatting you want to use as the basis of your new HTML style. You can use the Property inspector to view and apply formatting. 2 In the HTML Style palette, click the New Style icon in the lower right corner. 3 In the Define HTML Style dialog box, name the style and adjust the formatting, if necessary. Select whether to apply the HTML style to selected text or the entire paragraph. Note that a paragraph style applies to the entire text block in which the insertion point is located, regardless of what text is actually selected. Select whether to apply the HTML style in addition to the existing style (CSS or HTML) of the selected text or paragraph, or to clear the formatting of the selection or paragraph with the new HTML style. Note that the formatting options in the HTML Style palette match those in the Property inspector. 4 Click OK. To create a new HTML style based on an existing HTML style: 1 Make sure no text is selected in the Document window. 2 In the HTML Style palette, select a style. 3 Right-click (Windows) or Control-click (Macintosh) the style, then choose Duplicate from the context menu. The Define HTML Style dialog box appears. To reset it to the default options, click Clear. 4 Complete steps 3 and 4 in the instructions for creating a new style based on existing text. To create a new HTML style from scratch: 1 In the HTML Style palette, click the New Style icon; you can also choose Text > HTML Styles > New Style. The Define HTML Style dialog box appears. 2 Complete steps 3 and 4 in the instructions for creating a new style based on existing text. Click Clear to reset the dialog box to the default options. 3 Click OK. To edit an existing HTML style: 1 Make sure no text is selected in the Document window. 2 In the HTML Style palette, make sure the Auto Apply option is deselected. If Auto Apply is turned on, the HTML style will be applied when you select it in the HTML Style palette. 3 In the HTML Style palette, right-click (Windows) or Control-click (Macintosh) the style, then choose Edit from the context menu. The Define HTML Style dialog box appears. To reset it to the default options, click Clear. When you edit an HTML style, Dreamweaver does not automatically update text that was previously formatted using the HTML style. If you want to update formatting applied with a style, use a CSS style sheet; see Formatting text with CSS style sheets . To share your HTML styles with other sites or users: 1 Choose Window > Site Files to open the Site window in Site Files view. 2 In the right pane, open the site root folder, then open the Library folder. You'll notice a file called styles.xml. This file contains all your HTML styles for the site. You can put, get, check in, check out, and copy this file as you would any other file in your site. You can also create Design Notes for the styles.xml file. Note that you must first check out the styles.xml file before you can create or edit a style for a remote site. For more information on using these options, see Setting up a remote site .
<url>html/06formatting12.html</url>
<title>Formatting text with CSS style sheets</title> Formatting text with CSS style sheets A style is a group of formatting attributes that controls the appearance of a range of text in a single document. A CSS style sheet can be used to control several documents at once and includes all of the styles for a document. The advantage of using a CSS style sheet over an HTML style is that in addition to being linked to multiple documents, when a CSS style is updated or changed, the formatting of all the documents that use that style sheet are automatically updated as well. CSS 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. CSS styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. CSS styles can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers. CSS style sheets reside in the HEAD area of a document and define a series of styles. CSS 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. CSS style sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some CSS style sheets, but most earlier browsers ignore them. The following three types of CSS style sheets are available in Dreamweaver: Custom CSS 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 CSS custom styles to any range or block of text. If the CSS 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 CSS style is applied to a range of text, SPAN tags containing the CLASS attribute are inserted around the selected text. See Applying a custom (class) CSS style . HTML tag styles redefine the formatting for a particular tag, such as H1 . When you create or change a CSS style for the H1 tag, all text formatted with the H1 tag is immediately updated. 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" ). Manual HTML formatting overrides formatting applied with CSS (or HTML) styles. For CSS styles to control the formatting of a paragraph, you must remove all manual HTML formatting or HTML styles. Although you can set an unlimited number of CSS style attributes defined by the CSS1 specification in Dreamweaver, not all of the attributes appear in the Document window. The attributes that do not appear are marked with an asterisk (*) in the Style Definition dialog box. Note also 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. About CSS style properties The Cascading Style Sheets specification (CSS1), which is controlled by the World Wide Web Consortium, defines the CSS style properties (for example, font, color, padding, margin, word spacing) that control the appearance of Web page elements. You can set any CSS1 property using Dreamweaver. In Internet Explorer 4.0, you can use a scripting language such as JavaScript or VBScript to change the positioning and CSS style properties of elements after the page has loaded. In Netscape Navigator 4.0, you cannot change CSS style properties after the page has loaded, but you can change positioning properties.
<url>html/06formatting13.html</url>
<title>Creating or linking to an external CSS style sheet</title> Creating or linking to an external CSS style sheet A CSS style sheet is an external text file containing styles and formatting specifications. If you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated with the changes. Dreamweaver Help consists of HTML pages that use a linked CSS style sheet called help.css. To see what the code for a CSS style definition looks like, open the help.css file (located in the Help/html folder) in a text editor. Open any of the topic files (those that begin with a number) to see how the CSS style sheet is linked to the document using a LINK tag, as well as how specific CSS styles are applied. To create or link to an external CSS style sheet: 1 Choose Window > CSS Styles, or click the CSS Styles icon in the Launcher. 2 In the CSS Style palette, click the Open Style Sheet icon. 3 In the Edit Style Sheet dialog box, click Link. 4 In the Link External Style Sheet dialog box, do one of the following: Click Browse (Windows) or Choose (Macintosh) to browse to an external CSS style sheet, or type the path to the style sheet in the File/URL box. Create a new external CSS style sheet by entering a new file name (one that doesn't already exist at the specified location). The file name must end in the .css extension. 5 Select the Link or Import option to specify and create the tag used to attach the external CSS style sheet to the document, and then click OK. Import brings the information in the external CSS style sheet file into the current document, while Link accesses and relays the information without transferring it.While both Import and Link call all styles in the external CSS style sheet into the current document, Link offers more features and works in more browsers. The name of the external CSS style sheet appears with the identifier (link or import) in the list of styles in the Edit Style Sheet dialog box. Complete the steps below to create or edit the styles defined in the external CSS style sheet. 6 In the Edit Style Sheet dialog box, select the name of the external style sheet and click Edit. The Edit Style Sheet dialog box appears for that style sheet. 7 Click New to define styles in the external CSS style sheet. 8 In the New Style dialog box, define the new style. See Creating a CSS style sheet . 9 Click Save when you have finished defining styles.
<url>html/06formatting14.html</url>
<title>Editing an external CSS style sheet</title> Editing an external CSS style sheet When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet. Your edits affect all the documents linked to the style sheet. To edit an external CSS style sheet: 1 Open any document that is linked to the external CSS style sheet you want to change. 2 Do one of the following: Choose Window > CSS Styles or click CSS Styles in the Launcher. Then click the Open Style Sheet icon in the CSS Style palette. Choose Text > CSS Styles > Edit Style Sheet. 3 In the Edit Style Sheet dialog box, select the name of the external style sheet and click Edit. A second Edit Style Sheet dialog box appears that displays the styles in the external style sheet. 4 Edit the styles. See Creating a CSS style sheet . 5 Click Save when you have finished editing styles.
<url>html/06formatting15.html</url>
<title>Creating a CSS style sheet</title> Creating a CSS style sheet Create a CSS style sheet to automate the formatting of HTML tags or a range of text identified by a CLASS attribute. To create a CSS style sheet: 1 Choose Window > CSS Styles and click the New Style icon in the CSS Style palette. 2 Choose from the following CSS style options: 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. 3 Enter a name, tag, or selector for the new style: Custom CSS style names must begin with a period. If you don't enter the period yourself, Dreamweaver enters it for you. To redefine an HTML tag style, 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. 4 Click a panel name on the left side of the dialog box, and choose the formatting settings for the new CSS 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 Type panel Style Definition Background panel Style Definition Block panel Style Definition Box panel Style Definition Border panel Style Definition List panel Style Definition Positioning panel Style Definition Extensions panel When you create a custom (class) style, it appears in the CSS Style palette and in the Text > CSS Styles submenu. HTML tag styles and CSS selector styles do not appear in the CSS Style palette because they cannot be applied; they are reflected in the Document window automatically wherever the tag or selector occurs.
<url>html/06formatting16.html</url>
<title>Applying a custom (class) CSS style</title> Applying a custom (class) CSS style Custom (class) CSS styles are the only type of CSS style that can be applied to any text in a document, regardless of which tags control the text. The CSS Style palette displays the names of all available styles. Do not confuse CSS styles with options such as Bold or Variable in the Text > Style submenu; these options are predefined formatting attributes that correspond to specific HTML tags. When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. See About conflicting styles . To apply a custom CSS style: 1 Choose Window > CSS Styles. 2 Select the text to which you want to apply a CSS style. Place the insertion point in a paragraph to apply the style to the entire paragraph. To specify the exact tag to which the CSS 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 CSS Style palette. If you select a range of text within a single paragraph, the CSS style affects only the selected range. 3 Click a style name in the CSS Style palette. You can also apply a CSS style by choosing a style name from the Text > CSS Styles submenu, or by right-clicking (Windows) or Control-clicking (Macintosh) and choosing the style name from the CSS Styles submenu in the context menu. The tag of the current selection appears next to the Custom Style command.
<url>html/06formatting17.html</url>
<title>About conflicting styles</title> About conflicting styles When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules: If two styles are applied to the same text, the browser displays all attributes of both styles 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 CSS 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 CSS style .Blue applied to this paragraph overrules the color setting in the H1 style. The second custom CSS 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/06formatting18.html</url>
<title>CSS Style palette</title> CSS Style palette Use the CSS Style palette to apply custom CSS styles to the current selection. The CSS Style palette displays custom (class) CSS styles only; redefined HTML tags and CSS selector styles do not appear in the CSS Style palette, because they are automatically applied to any text controlled by the specified tag or selector. (If you want to simply cut and paste reusable but not updatable and customizable styles, use the HTML Style palette.) Choose Window > CSS Styles to display the CSS Style palette. Apply To Displays the tag of the current selection. Choose a tag from the pop-up menu to select a different tag. Open Style Sheet Opens the Edit Style Sheet dialog box. Edit any of the styles in the current document or in an external style sheet. See also Formatting text with CSS style sheets . Note: Right-click (Windows) or Control-click (Macintosh) the CSS Style palette to open a context menu that includes New, Edit, Duplicate, Delete, and Apply commands.
<url>html/06formatting19.html</url>
<title>Edit (CSS) Style Sheet dialog box options</title> Edit (CSS) Style Sheet dialog box options Choose any of the following options in the Edit (CSS) 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 CSS style sheet . New Creates a new style. See Creating a CSS style sheet . Edit Opens the selected style for editing. See Editing an external CSS style sheet . 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/06formatting2.html</url>
<title>Formatting text using HTML tags</title> Formatting text using HTML tags You can apply HTML text formatting to one letter or build a whole site using Text > Format commands or options in the Property inspector. This kind of manual formatting replaces or overrides formatting set by an HTML style or CSS style. When you apply HTML text formatting, you use the Property inspector and commands in the Text menu, such as Text > Format and Text > Style.
<url>html/06formatting20.html</url>
<title>Style Definition Type panel</title> Style Definition Type panel Use the Type panel of the CSS Style Definition dialog box to define basic type settings for a CSS style. See also Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. In the dialog box that appears, choose a CSS 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.0 browsers. Decoration Adds an underline, overline, or line-through to text, or makes the text blink. The default setting for regular text is None. The default setting for links is Underline. Weight Applies a specific or relative amount of boldface to the font. Normal is equivalent to 400; Bold is equivalent to 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 each word 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/06formatting21.html</url>
<title>Style Definition Background panel</title> Style Definition Background panel Use the Background panel of the CSS Style Definition dialog box to define background settings for a CSS style. See also Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. In the dialog box that appears, choose a CSS 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 are 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/06formatting22.html</url>
<title>Style Definition Block panel</title> Style Definition Block panel To open the CSS Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. 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 text justification. You can specify negative values, but the display depends on 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 on the browser. Letter spacing overrides 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 on 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/06formatting23.html</url>
<title>Style Definition Box panel</title> Style Definition Box panel Use the Box panel of the CSS Style Definition dialog box to define settings for styles that control the placement of elements on the page. See Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. 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 the sides that do not allow layers. 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).
<url>html/06formatting24.html</url>
<title>Style Definition Border panel</title> Style Definition Border panel Use the Border panel of the CSS Style Definition dialog box to define settings for styles controlling borders around elements. See also Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. 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 on the browser. Dreamweaver does not display this attribute in the Document window. Style Determines the style of the border, but the display depends on the browser. Dreamweaver does not display this attribute in the Document window.
<url>html/06formatting25.html</url>
<title>Style Definition List panel</title> Style Definition List panel Use the List panel of the CSS Style Definition dialog box to define list settings in styles. See also Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. 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. Click Browse (Windows) or Choose (Macintosh) to browse to an image, or type the image's path. Dreamweaver does not display this attribute in the Document window. Position Determines whether the list item wraps to an indent (outside) or to the margin (inside). Dreamweaver does not display this attribute in the Document window.
<url>html/06formatting26.html</url>
<title>Style Definition Positioning panel</title> Style Definition 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 Layer preferences .) Unless you've changed this setting, Dreamweaver uses the DIV tag. See also Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. 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 regardless of whether 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 is not displayed 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, 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. 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/06formatting27.html</url>
<title>Style Definition Extensions panel</title> Style Definition Extensions panel The Extensions style attributes control features that are not supported by most current browsers. See also Formatting text with CSS style sheets and Editing an external CSS style sheet . To open the Style Definition dialog box, choose Window > CSS Styles and click the Open Style Sheet icon. 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 during 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/06formatting28.html</url>
<title>Style Sheet Format preferences</title> Style Sheet Format preferences CSS Style Sheet Format preferences control how Dreamweaver writes the code that defines CSS styles. CSS styles can be written in a shorthand form that some people find easier to work with. Some older versions of browsers do not correctly interpret the shorthand. Unless you want Dreamweaver to write styles in shorthand, there is no reason to change any of the CSS Style Sheet Format preferences. Choose Edit > Preferences and select CSS Styles to display CSS Style Sheet Format preferences. See also Formatting text with CSS style sheets . When Creating Styles Use Shorthand For Determines which CSS style attributes Dreamweaver writes in shorthand. When Editing CSS Styles Use Shorthand Controls whether Dreamweaver rewrites existing styles in shorthand. Choose If Original Used Shorthand to make Dreamweaver leave all styles as they are. Choose According to Settings Above to make Dreamweaver rewrite styles in shorthand according to the attributes specified in the Use Shorthand For checkboxes.
<url>html/06formatting29.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 CSS styles to a 3.0 browser-compatible file: 1 Choose File > Convert > 3.0 Browser Compatible. 2 In the dialog box that appears, select CSS Styles to HTML Markup. When you choose the 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 conversion procedure each time you change the original file to update the 3.0-compatible file. For this reason, it's best to perform this procedure only after you are completely satisfied with your original file.
<url>html/06formatting3.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 submenu to apply the standard paragraph and heading tags. (To redefine the appearance of paragraph and heading tags, use CSS style sheets; see Formatting text with CSS style sheets .) To apply a paragraph or heading tag: 1 Place the insertion point in the paragraph, or select some of the text in the paragraph. 2 Using the Text > Format submenu or the Format pop-up menu in the Property inspector, choose an option: Choose a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag associated with the selected style (for example, H1 for Heading 1, H2 for Heading 2, PRE for Preformatted text, and so on) is applied to the entire paragraph. Choose None to remove a paragraph format.
<url>html/06formatting30.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 File > Convert > 3.0 Browser Compatible command. (See Converting CSS styles to HTML markup .) Attributes not listed in the table are removed. CSS attribute Converted to color FONT COLOR font-family FONT FACE font-size FONT SIZE="[1-7]" font-style: oblique I font-style: italic I font-weight B list-style-type: square UL TYPE="square" list-style-type: circle UL TYPE="circle" list-style-type: disc UL TYPE="disc" list-style-type: upper-roman OL TYPE="I" list-style-type: lower-roman OL TYPE="i" list-style-type: upper-alpha OL TYPE="A" list-style-type: lower-alpha OL TYPE="a" list-style UL or OL with TYPE as appropriate text-align P ALIGN or DIV ALIGN as appropriate text-decoration: underline U text-decoration: line-through STRIKE
<url>html/06formatting31.html</url>
<title>Checking spelling</title> Checking spelling Use the Check Spelling command in the Text menu to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values. By default, the spelling checker uses the U.S. English spelling dictionary. To change the dictionary, choose Edit > Preferences > General and select a different dictionary from the pop-up menu. Dictionaries for additional languages are available for downloading from the Dreamweaver Support Center.
<url>html/06formatting32.html</url>
<title>Check Spelling dialog box</title> Check Spelling dialog box Use the following options in the Check Spelling dialog box to check the spelling in your document. (To display the dialog box, choose Text > Check Spelling.) Add to Personal Adds the unrecognized word to your personal dictionary. To remove words from your personal dictionary, edit the Personal.dat file in a text editor. 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/06formatting4.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 submenu. Browsers display the text using the first font in the combination that is installed on the user's system. If none of the fonts in the combination is installed, the browser displays the text as specified by the browser preferences. (See also Modifying font combinations .) Choose Default to remove previously applied font faces; Default applies the default font for the selected text (either the browser default font or the font assigned to that tag in the CSS style sheet). 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 submenu. To change the font size, choose a size (1 through 7) from the Property inspector or from the Text > Size submenu. 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 submenu. Sizes 1 and 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 CSS 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 section), although the font size should display properly in a browser.
<url>html/06formatting5.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 submenu. Font combinations determine how a browser displays your Web page's text. A browser uses the first font in the combination that is installed on the user's system; if none of the fonts in the combination is installed, the browser displays the text as specified by the browser preferences. To modify font combinations: 1 Choose Text > Font > Edit Font List. 2 Select the font combination from the 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 << or >> button between the Chosen Fonts list and the Available Fonts list. To add or remove a font combination, click the plus (+) and minus (-) buttons 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 field below the Available Fonts list and click the << button 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 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 field 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/06formatting6.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 Page Properties. (If no text color has been set in Page Properties, the default text color is black.) 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 Erase button (the middle button in the lower right corner).
<url>html/06formatting7.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 submenu. 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 alignment command. To center elements: 1 Select the element (image, plug-in, table, or other page element) you want to center. 2 Choose Text > Alignment > Center. Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph. 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 context 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/06formatting8.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 insertion point in a text block to view text properties in the Property inspector (if necessary, display the Property inspector by choosing Window > Properties). 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 CSS style sheets to specify point sizes for different kinds of text. Text Color Displays the text in the selected color. Select a browser-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field. 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. Click the folder icon to browse to a page in your site; type the URL; 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 of the frames in the current document appear in 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, 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 you generally don't need to specify it. _top loads the linked file in the full browser window, thereby removing all frames. 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/06formatting9.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 Place the insertion point on the line where you want to add a list of new items. 2 Click the Bulleted or Numbered List buttons in the Property inspector, or choose Text > List and select the type of list desired—Unordered (bulleted) List, Ordered (numbered) List, or Definition List. 3 Begin typing the list, pressing Enter (Windows) or Return (Macintosh) to begin another list item. 4 To complete the list, press Enter twice (Windows) or press Return twice (Macintosh). 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 you want to nest. 2 Click the Indent button in the Property inspector or choose Text > Indent.
<url>html/07images1.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/07images10.html</url>
<title>Setting hotspot properties</title> Setting hotspot properties The properties listed below appear in the Property inspector when a hotspot is selected. Map Specifies the image map's name. Create a unique name for each image map within a document. Link Specifies the file or URL to be displayed when the user clicks the hotspot. If you use a file, enter a path that is relative to your document. (File names that begin with file: // are not relative). Target Specifies the frame or window in which the linked page should load. The target option isn't available until the selected hotspot contains a link. The names of all the frames in the current document appear 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. 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, 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 you generally don't need to specify it. _top loads the linked file into the full browser window, thereby removing all frames. Alt Specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually.
<url>html/07images11.html</url>
<title>Applying behaviors to images</title> Applying behaviors to images You can apply any available behavior to an image or image hotspot. When you apply a behavior to a hotspot, Dreamweaver inserts the HTML source code into the AREA tag. There are three behaviors that apply specifically to images: Preload Images, Swap Image, and Swap Image Restore. Preload Images Loads images that do not appear on the page right away (such as those that will be swapped in with timelines, behaviors, layers, or JavaScript) into the browser cache. This prevents delays caused by downloading when it is time for the images to appear. See Preload Images . Swap Image Swaps one image for another by changing the SRC attribute of the IMG tag. Use this action to create button rollovers and other image effects (including swapping more than one image at a time). See Swap Image . Swap Image Restore Restores the last set of swapped images to their previous source files. This action is automatically added whenever you attach the Swap Image action to an object by default; you should never need to select it manually. See Swap Image Restore . You can also use behaviors to create more sophisticated navigation systems, such as a navigation bar or a jump menu. See Creating navigation bars and Creating jump menus .
<url>html/07images2.html</url>
<title>Inserting an image</title> Inserting an image When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the file in the HTML. To ensure that this reference is correct, the image file must be inside the current site. If it is not, Dreamweaver asks whether you want to copy the file to a folder within the current site. To insert an image: 1 Do one of the following: Place the insertion point where you want the image to appear in the Document window, and then choose Insert > Image or click the Insert Image button on the Common panel of the Object palette. Drag the Insert Image button from the Object palette to the desired location in the Document window. Drag an image from the desktop to the desired location in the Document window; then skip to step 3. 2 In the dialog box that appears, click Browse (Windows) or Choose (Macintosh) to choose a file, or type the path for the image file. If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path. 3 Set image properties in the Property inspector. See Image properties .
<url>html/07images3.html</url>
<title>Image properties</title> Image properties To view the following properties in the Property inspector, select an image in the Document window. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Name Lets you name an image so you can refer to it with a scripting language such as JavaScript or VBScript. W and H Reserve space for an image on a page as it loads in a browser. Dreamweaver automatically fills these fields with the image's original size. Default and unlabeled values are pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), and cm (centimeters), and combinations thereof, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code. If you set W and H values that do not correspond to the actual width and height of the image, your image may not display properly in a browser. (To restore the original values, click the field labels.) You can change these values to scale the display size of this instance of the image, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images. Src Specifies the source file for the image. Click the folder icon to browse to the source file, or type the path. For information on entering paths, see About absolute paths . Link Specifies a hyperlink for the image. Drag the Point-to-File icon to a file in the Site window, click the folder icon to browse to a document on your site, or type the URL. 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, above, below, and on both sides of the image. 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 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, 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 you generally don't need to specify it. _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, in pixels, of the link border around the image. Enter 0 for no border. Map Name Field 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/07images4.html</url>
<title>Aligning elements</title> Aligning elements The following Align options appear in the Alignment drop-down menu in the Property inspector, and can be associated with certain elements, such as images and plugins. You can also use the alignment buttons (left, right, and center) to place selected elements. Browser default Generally specifies a baseline alignment. (The default may differ depending on the browser.) Baseline and Bottom Align the text baseline to the bottom of the selected object. Absolute bottom Aligns the absolute bottom of the text, including descenders (as in the letter g ) with the bottom of the selected object. Top Aligns the top of the tallest character in the text line with the top of the selected object. Text top Aligns the tallest character in the text line with the top of the selected object. Middle Aligns the text baseline with the middle of the selected object. Absolute middle Aligns the middle of the selected object with the middle of the text. Left Places the selected object on the left margin, wrapping text around it to the right. If left-aligned text precedes the object on the line, it generally forces left-aligned objects to wrap to a new line. Right Places the object on the right margin, wrapping text around the object to the left. If right-aligned text precedes the object on the line, it generally forces right-aligned objects to wrap to a new line.
<url>html/07images5.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 W and H fields in the Property inspector display the current width and height of the element as you resize it. The element's file size does not change. Flash movies and other vector-based elements are fully scalable and do not lose quality as you resize them. Bitmap elements such as GIF, JPEG, and PNG images may become pixelated or distorted if you reset their WIDTH and HEIGHT attributes. To maintain the same aspect ratio, hold down the Shift key while you resize a bitmap. However, it is recommended that you visually resize 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 reduce download time. To resize an element: 1 Select the element (for example, an image or Shockwave movie) in the Document window. Resize handles appear at the bottom and right sides of the element and in the bottom right corner. If resize handles don't appear, either click away from the element you want to resize, and then re-select it or click <img> in the tag selector to select the element. 2 Resize the element, by doing one of the following: To adjust the width of the element, drag the selection handle on the right side. To adjust the height of the element, drag the bottom selection handle. To adjust the width and the height of the element at the same time, drag the corner selection handle. To preserve the element's aspect ratio (its width-to-height ratio) as you adjust its dimensions, Shift-drag the corner selection handle. Elements can be visually resized to a minimum of 6 by 6 pixels. To adjust the width and height of an element to a smaller size (for example, 1 by 1 pixel), use the Property inspector to enter a numeric value. To return a resized element to its original dimensions, click the W and H labels in the Property inspector.
<url>html/07images6.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 an image file, any changes you made to the image are visible in the Document window. You can use Macromedia Fireworks as your external image editor. Fireworks 3 uses Design Notes to determine where the original PNG file is stored on your local hard disk, or will prompt you to navigate to the file. Fireworks 2 doesn't use Design Notes, but will prompt you to locate the original PNG file. Fireworks 1 automatically searches the folder that contains the selected file for a PNG file with the same name. For example, if you select an image whose source file is images/myPhoto.gif and 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 from the context menu. Right-click (Windows) or Control-click (Macintosh) the image you want to edit, and choose an external editor from the context menu. Select the image you want to edit, and click Edit Image in the Property inspector. Double-click the image file in the Site window to launch the primary image editor. If you haven't specified an image editor, Dreamweaver launches the default editor for the file type. Note: When you open an image from the Site window, the Fireworks integration features described above are not in effect; Fireworks does not open the original PNG file. To use the Fireworks integration features, open images from within the Document window. Setting external image editor preferences You can set preferences so that Dreamweaver automatically launches different applications to edit different image types. For example, you can tell Dreamweaver to launch Fireworks when you want to edit a GIF. To set an external image editor for a specific file type: 1 Choose Edit > Preferences and select External Editors. 2 Click the add (+) button above the Extensions list. 3 Type the file name extension of the type of image you want to edit (for example, .gif), or select one of the listed extensions. 4 Click the add (+) button above the Editors list. 5 In the dialog box that appears, choose the application you want to use to edit this image type. 6 Click Make Primary if you want this editor to be the primary editor for the image type. Dreamweaver automatically uses the primary editor when you choose to edit this image type. You can choose the other listed editors from the context menu for the image in the Document window. To change an existing preference: 1 In External Editors preferences, click the file extension whose editor you want to change. 2 Use the add (+) or delete (-) buttons above the Editors list to add or remove an editor. For more information on the other options in External Editors preferences, see Launching an external media editor . Optimizing an image in Fireworks If you have Fireworks 2 or Fireworks 3, you can use the Optimize Image in Fireworks command to quickly optimize images for the Web. To use the Optimize Image in Fireworks command: 1 Select an image in a Dreamweaver document and choose Commands > Optimize Image in Fireworks. 2 If the selected image is a GIF or JPEG file, a dialog box appears asking if you would like to use an existing Fireworks document as the source of the selected image. Click Yes to open the original PNG file if you created the image in Fireworks. Click No if you did not create the image in Fireworks and skip to step 4. 3 In the file selection dialog box that appears, navigate to the folder that contains the original Fireworks PNG file, select the file, and click OK. 4 In the dialog box that appears, adjust the setting on the left to change the quality and smoothing of a JPEG or the palette and number of colors in a GIF, or to change from one file format to another. For more information on the options in this dialog box, see Using Fireworks . 5 The results of your adjustments appear in the Preview pane on the right; the file size and estimated download time for the image are listed at the top of the Preview pane. When you are happy with the appearance and file size of the image, click Update. If you changed the format of the image, Dreamweaver's link checker prompts you to update references to the image. For example, if you changed the format of an image called my_image from GIF to JPEG, clicking OK at this prompt will change all references to my_image.gif in your site to my_image.jpg.
<url>html/07images7.html</url>
<title>Creating a rollover</title> Creating a rollover A rollover is an image that changes when the pointer moves across it. A rollover actually consists of two images: the primary image (the image displayed when the page first loads) and the rollover image (the image that appears when the pointer moves over the primary image). When you create a rollover, both images must be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image. 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 In the Document window, place the insertion point where you want the rollover to appear. 2 Insert the rollover by using one of these methods: 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: Browse and select an image, or type the path and file name of the original image in the Original Image field. Browse and select a rollover image, or type the path and file name of the rollover image in the Rollover Image field. To create a link, browse and select a file, or replace the # in the Link field with a path and file name. 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, move the pointer over the primary image. The display should switch to the rollover image. You can also create a navigation bar by using the Insert > Navigation Bar command. See Inserting a navigation bar .
<url>html/07images8.html</url>
<title>Working with Fireworks HTML files</title> Working with Fireworks HTML files Dreamweaver makes it easy to paste or import HTML source code created in Fireworks 3 into Dreamweaver documents. If you own and use Fireworks, you can copy HTML directly to the clipboard in Fireworks and paste it into a Dreamweaver document. If you have received Fireworks HTML files from another designer, you can use the Insert Fireworks HTML object to import the HTML. Note: You can also import HTML source code created in Fireworks 2 into a Dreamweaver document. However, if such a document contains Simple Rollover or Toggle Group behaviors, Dreamweaver does not recognize them and reports an error. Pasting Fireworks HTML If you use both Fireworks and Dreamweaver concurrently when creating documents, the easiest way to insert Fireworks HTML into a Dreamweaver document is to copy it to the clipboard. To paste Fireworks HTML into a Dreamweaver document: 1 Save your Dreamweaver document in a defined site. 2 In Fireworks, choose File > Export. 3 At the bottom of the Export dialog box, select Dreamweaver 3 from the Style pop-up menu and Copy to Clipboard from the Location pop-up menu. 4 At the top of the Export dialog box, navigate to a location within the local root folder of the Dreamweaver site and click Save to save the image file. 5 In Dreamweaver, place the insertion point in the Document window and choose Edit > Paste. The image and its associated HTML (and JavaScript, if any) are added to the Dreamweaver document in the appropriate places. The image appears in the Document window; to see the source code that was added, choose Window > HTML Source. Inserting Fireworks HTML If you have image and HTML files created in Fireworks 2 or 3, you can import the image and its associated HTML source code with the Insert Fireworks HTML object. To insert Fireworks HTML into a Dreamweaver document: 1 Save your Dreamweaver document in a defined site. 2 Place the insertion point in the Document window and do one of the following: Click the Insert Fireworks HTML button in the Object palette. Choose Insert > Media > Fireworks HTML. 3 In the dialog box that appears, click Browse to browse to and select the Fireworks HTML file. Select the Delete File After Insertion option to move the HTML file to the Recycle Bin (Windows) or Trash (Macintosh) when the operation is complete. Note: If the HTML file is on a network drive, it is permanently deleted, not moved to the Recycle Bin or Trash. 4 Click OK. The image and its associated HTML (and JavaScript, if any) are added to the Dreamweaver document in the appropriate places. The image appears in the Document window; to see the source code that was added, choose Window > HTML Source.
<url>html/07images9.html</url>
<title>Creating image maps</title> Creating image maps An image map is a image which has been divided into regions or "hotspots"; when the "hotspot" is clicked a web page displays. Use the Image inspector to graphically create and edit client-side image maps. Client-side image maps store the hyperlink information in the HTML document, not in a separate map file as do server-side image maps. When 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. Note that 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 a client-side image map: 1 Select the image. 2 Click the expander arrow in the lower right corner of the Property inspector to see all properties. 3 Type the name for the map in the Map Name field. Note: If you are using multiple image maps in the same document be sure to give each map a unique name. 4 To define the image map areas, do one of the following: Select the circle tool and drag the pointer over the image to create a circular hotspot Select the rectangle tool and drag the pointer over the image to create a circular hotspot Select the polygon tool and define an irregularly shaped hotspot by clicking once for each corner point. Click on the arrow tool to close the shape. When the hotspot is selected, the Hotspot inspector appears beneath the Property inspector. For information about the Hotspot inspector, see Setting hotspot properties . 5 In the Hotspot inspector, click the folder icon to browse to file to open when the hotspot is clicked, or type the file name in the Link field. 6 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 . 7 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 pointer over the hotspot. 8 Repeat steps 4 through 7 to define additional hotspots in the image map. To select multiple hotspots in an image map: With the image selected, do one of the following: Shift-click the other hotspots you want to select Press Control+A (Windows) or Command+A (Macintosh) When you copy an image from one document to another, the hotspots associated with that image are also copied. You can use the arrow keys or the mouse to move single or multiple hotspots at once. You can also choose Modify > Layers and Hotspots to align the hotspots, bring them to the front or send them to the back, or make them the same width and height. If two hotspots overlap, the first hotspot is dominant.
<url>html/08tables1.html</url>
<title>Tables overview</title> Tables overview Tables are an extremely powerful Web design tool for laying out data and images on an HTML page. Tables provide Web designers ways to add vertical and horizontal structure to a page. Tables consist of three basic components: rows (horizontal spacing) columns (vertical spacing) cells (the container created when a row and column intersect) Use tables to lay out tabular data, to design columns on a page, or to lay out text and graphics on a Web page. Once you create a table you can easily modify both the appearance and structure of HTML tables. You can add content; add, delete, split, and merge rows and columns; modify table, row, or cell properties to add color and alignment; and copy and paste cells. For more advanced layout ideas you can insert a table within a table, adding even more flexibility to your design. Using Dreamweaver, you can easily convert between a table layout and a layer layout. Both tables and layers allow you to control the positioning of page elements, but layers aren't supported in 3.0 and earlier browsers. If your design process requires rapid repositioning of content, you can use layers to lay out a page and then convert the layers to a table for viewing in older browsers. See Using layers to design tables .
<url>html/08tables10.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 .) Correct selection: The cells can be cut or copied. Incorrect selection: These cells can't be cut or copied. 2 Cut or copy the cells using the commands in 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 paste cells before or above a particular cell, click in that cell. To create new table with the pasted cells, click wherever you want the table to appear (as long you don't click inside another table). 2 Choose Edit > Paste. If you are pasting entire rows or columns into an existing table, 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 Text Only. 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 into a selection of multiple cells.
<url>html/08tables11.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/08tables12.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 symbol (%) to set the column width to a percentage of the table width. 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/08tables13.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 choose Clear Cell Heights or Clear Cell Widths. Choose Window > HTML and change the widths and heights directly in the HTML Source inspector. In the Property inspector, enter specific width and height values in the W and H boxes.
<url>html/08tables14.html</url>
<title>Adding and removing rows and columns</title> Adding and removing rows and columns Use the commands in the Modify > Table submenu or the commands in the context menu to add and remove rows and columns from a table. To add rows or columns: 1 Click in a cell where you want the new row or column to appear. 2 Do one of the following: To add a row, choose Modify > Table > Insert Row, or choose Table > Insert Row from the context menu. To add a column, choose Modify > Table > Insert Column, or choose Table > Insert Column from the context menu. To add both rows and columns, choose Modify > Table > Insert Rows or Columns, or choose Table > Insert Rows or Columns from the context menu. 3 In the dialog box that appears, enter the number of rows or columns you want to add, and specify whether the new rows or columns should appear before or after the selected row or column. 4 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 context menu. To delete a column, choose Modify > Table > Delete Column, or choose Table > Delete Column from the context 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, do one of the following: 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/08tables15.html</url>
<title>Nesting tables</title> Nesting tables A nested table is a table within a table. You can configure a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears. To nest a table within a table cell: 1 Do one of the following: Click in the cell where you want to insert the second table and choose Insert > Table. Click in the cell where you want to insert the second table, 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 to insert the second table. 2 Specify the table properties in the Insert Table dialog box, and click OK.
<url>html/08tables16.html</url>
<title>Splitting and merging cells</title> Splitting and merging cells Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. You can merge any number of adjacent cells—as long as the entire selection is rectangular—to produce a single cell that spans several columns or rows. 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 or ROWSPAN attributes) to create the specified arrangement. In the following illustration, the cells in the middle of the first two rows have been merged so that they span two rows. To merge two or more 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 selection is in the form of a rectangle, so the cells can be merged. This table selection is not in the shape of a rectangle, so the cells can't be merged. 2 Choose Modify > Table > Merge Cells, or click the Merge Cell 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 Cell button in the Property inspector. 3 In the Split Cell dialog box, choose whether to split the cell into rows or columns, and then enter the number of rows or columns.
<url>html/08tables17.html</url>
<title>Sorting tables</title> Sorting tables You can perform a simple table sort based on the contents of a single column. You can also perform a more complicated table sort based on the contents of two columns. You cannot sort tables that contain COLSPAN or ROWSPAN attributes—that is, tables that contain merged cells. (For details about merged cells, see Splitting and merging 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 in the Then By pop-up menu. 4 Select 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 deselected. 5 Click Apply or OK to sort the table.
<url>html/08tables18.html</url>
<title>Exporting table data</title> Exporting table data To export table data you create in Dreamweaver, you must save the data in a file format that accepts delimited data. Delimiter separators you can use are commas, colons, semicolons, or spaces. You cannot select portions of a table to export; when you export a table, the entire table is exported. If you want only particular data from a table—for example, the first six rows or the first six columns—create a new table, copy the information to the new table, and export the new table. To export a table: 1 Place the insertion point in any cell of the table to be exported. 2 Choose File > Export > Export Table. The Export Table dialog box appears. 3 In the Delimiter pop-up menu, select a delimiter value for the table data. 4 In the Line Breaks pop-up menu, select line breaks for the operating system for which you are exporting the file—Windows, Macintosh, or MS-DOS. 5 Click Export. 6 In the dialog box that appears, type a name for the file and click Save.
<url>html/08tables2.html</url>
<title>Inserting a table</title> Inserting a table Use the Object palette or the Insert menu to create a new table. To insert a table: 1 Do one of the following: In the Document window, place the insertion point where you want the table to appear, then click the Table button on the Common panel of the Object palette, or choose Insert > Table. Drag the Table button from the Object palette to the desired insertion point on the page. The Insert Table dialog box appears. 2 In the dialog box, accept the current values or type new values. Note: The Insert Table dialog box retains the values of the most recent settings you entered for a table. In the Rows field, specify the number of table rows. In the Columns field, specify the number of table columns. In the Cell Padding field, specify the number of pixels between the cell content and the cell boundary (or wall). In the Cell Spacing field, specify the number of pixels between each table cell. In the Width field, specify the width of the table as a number of pixels or as a percentage of the browser window. In the Border field, specify the pixel width of the table border. Enter 0 if you don't want a border. 3 Click OK to create the table. If you want to insert a table without having to first specify these options, turn off the Show Dialog When Inserting Objects option in the General preferences. See Setting preferences .
<url>html/08tables3.html</url>
<title>Adding content to a table cell</title> Adding content to a table cell You can add text and images to table cells. You can also set properties of an image that you insert in a table. To add text to a table: 1 Click in a cell in which you want to add text, and do one of the following: Type text into the table. Table cells automatically expand as you type. Paste text copied from another document. Use the Paste as Text command to preserve paragraph markers. 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 to the table. You can also use the arrow keys to move between cells. To add an image to a table: 1 Click in the cell in which you want to add an image. 2 Click the Insert Image button in the Common panel of the Object palette, or choose Insert > Image. 3 In the Select Image Source dialog box, select an image file. For information on setting image properties, see Image properties .
<url>html/08tables4.html</url>
<title>Importing table data</title> Importing table data Data that has been created in another application (such as Microsoft Excel) and saved in a delimited format (separated by tabs, commas, colons, semicolons, or other delimiters) can be imported into Dreamweaver and reformatted as a table. To import table data: 1 Do one of the following: Choose File > Import > Import Table Data. Choose Insert > Tabular Data. The Import Table Data or Insert Tabular Data dialog box appears, depending on your selection. Aside from their titles, these dialog boxes are identical. 2 In the Data File field, enter the name of the file to import. 3 From the Delimiter pop-up menu, select the delimiter format that matches the format of the document you're importing. If you select Other, a field appears to the right of the pop-up menu. Enter the delimiter that was used to separate the table data. Note: If you do not select (or specify) the delimiter used when the file was saved, the file will not import properly, and your data will not be correctly formatted in a table. No error or warning message displays to alert that there is a problem. 4 For Table Width, select one of the following options: Select Fit to Data to create a table that adjusts to the longest text string in each table column. Select Set to specify a table width as a percentage of the browser window or as a number of pixels. 5 Select table formatting options: In the Cell Padding field, specify the number of pixels between the cell content and the cell boundary (or wall). In the Cell Spacing field, specify the number of pixels between each table cell. In the Format Top Row field, select from four formatting options: no formatting, bold, italic, or bold italic. In the Border field, specify the pixel width of the table border. Enter 0 if you don't want a border. 6 Click OK.
<url>html/08tables5.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 do the following: Modify the appearance of selected cells or the text contained in them. See Formatting tables . Copy and paste adjacent cells. See Copying and pasting cells . You can also select multiple nonadjacent cells in a table and modify the properties of those cells. You cannot copy or paste nonadjacent cell selections. To select the entire table, do one of the following: Click the top left corner of the table, or click anywhere on the right or bottom edge. Click once in the table and choose Modify > Table > Select Table. Click once in the table and choose Edit > Select All. Position the insertion point anywhere inside the table, and select the <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 insertion point at the left margin of a row or at the top of a column. Click when the selection arrow appears. Click in a cell, and drag across or down to select multiple rows or columns. To select one or more cells, do one of the following: Click in a cell, and drag down or across to another cell. Click in one cell and then Shift-click another cell. All of the cells within the rectangular region are selected. To select nonadjacent cells, do one of the following: Press Control (Windows) or Command (Macintosh) and click in the table to add cells, rows, or columns to the selection. Select multiple cells in the table, and then press Control (Windows) or Command (Macintosh) and click cells, rows, or columns to deselect individual cells.
<url>html/08tables6.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 column, 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 Dreamweaver interprets the HTML source code. When the same property is set more than once in a table, it is interpreted in this way: cell formatting, which is part of the TD tag, takes precedence over table row formatting (the TR tag), which in turn takes precedence over table formatting (the TABLE tag). Therefore, if you specify a background color of blue for a single cell and then set the background color of the entire table to yellow, the blue cell will not change to yellow, since the TD tag takes precedence over the TABLE tag. In the following example, the TABLE tag sets a background color of yellow (#FFFF99) for the entire table. The first TR tag changes those cells to green (#33FF66), and the second TD tag changes the top center cell to blue (#333399). The TR and TD tags in the bottom row have not been altered, so those cells take on the table color, which is yellow. <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/08tables7.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. To name the table: In the Table Name field, type a name for the table. To select table layout options: In the Rows and Cols fields, specify the number of rows and columns in the table. In the W and H fields, specify the width and height of the table as a number of pixels or as a percentage of the browser window. You usually don't need to set the height of a table. Use the Align field to specify how a table aligns with other elements in the same paragraph, such as text or images. Left aligns the table to the left of other elements, right aligns the table to the right of other elements, and Center centers the table. You can left-align, right-align, or center the table relative to the other elements. You can also choose the browser's default alignment. In the V Space and H Space fields, specify the number of pixels of white space to leave above, below, and on both sides of the table. Use the Clear Row Heights and Clear Column Widths buttons to delete all table row height and column width values from the table. Use the Convert Table Widths to Pixels button to convert the table width from a percentage of the browser window to its current width in pixels. Use the Convert Table Widths to Percent button to convert the current table width from pixels to a percentage of the browser window. To set cell layout, choose from the following options: In the CellPad field, specify the number of pixels between the cell content and the cell boundary (or wall). In the CellSpace field, specify the number of pixels between each table cell. When cell spacing and cell padding are not 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. To set table borders, choose from the following options: In the Border field, specify the width of the table border 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 the border is set to 0, choose View > Table Borders. Use the Light Brdr and Dark Brdr fields to select border colors that have a highlight and shadow effect, respectively, giving the border a three-dimensional appearance. (To return to the default gray shades, remove the color values and leave the fields blank.) Use the Brdr field to select a border color for the entire table. Use the Bg options to select the background image or background color for the table.
<url>html/08tables8.html</url>
<title>Setting column, row, and cell properties</title> Setting column, 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: Use the Horz pop-up menu to set the horizontal alignment of a cell's, column's, or row's contents. You can align the contents to the left, right, or center, or to the browser's default (usually left for regular cells and center for header cells). Use the Vert pop-up menu to set the vertical alignment of the cell's, column's, or row's contents. You can align the contents to the top, middle, bottom, or baseline, or to the browser's default (usually middle). In the W and H fields, specify the width and height of selected cells in pixels. To use percentages, follow the value with a percent symbol (%). To set a background image for a cell, column, or row, use the top Bg field. Click the folder icon to browse to an image; you can also type the image's path or use the Point-to-File icon. To set the background color for a cell, column, or row, use the bottom Bg field. You can use the color picker or type the hexadecimal code for the color you want. To set a border color for cells, use the Brdr option. 4 Choose from the following layout options: Click the Merge Cells button to combine selected cells, rows, or columns, creating one cell. See Splitting and merging cells . Click the Split Cell button to divide a cell, creating two cells. See Splitting and merging cells . Select No Wrap to prevent word wrapping. This causes cells to widen to accommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate the longest word and then expand vertically.) Select Header to format the selected cells or rows as a table header. The contents of table header cells are bold and centered by default.
<url>html/08tables9.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. You can then select options to further customize the design. To use a preset design: 1 Select the table and choose Commands > Format Table. 2 In the dialog box that appears, choose a 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 field. Enter 0 if you don't want a border. 5 To apply the design to the table cells ( TD tags) rather than table rows ( TR tags), select Apply All Attributes to TD Tags Instead of TR Tags. 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/09layers1.html</url>
<title>Layers overview</title> Layers overview A layer is a container for HTML content, usually delineated by the DIV or SPAN tag, that you can position anywhere on a page. Layers can contain text, images, forms, plug-in objects, and even other layers—any element you can place in the body of an HTML document you can also place in a layer. Layers provide Web page designers fine control over the exact pixel placement of elements. By putting page elements in layers, you can control which objects appear in front of each other and which ones are displaced or hidden. You can also use a timeline to move a layer or several layers simultaneously across a screen. In Dreamweaver you can use 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 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. Positioning properties for layers 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/09layers10.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: Shift-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 handles of the last selected layer are highlighted in black. The handles of the other layers are highlighted in white.
<url>html/09layers11.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 its 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 (Windows) or Option (Macintosh), while pressing an arrow key. For information about setting the grid snapping increment, see Snapping layers to the grid . In the Property inspector, type a value for width and height. 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 and Hotspots> Make Same Width or Modify > Layers and Hotspots > 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/09layers12.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 and an arrow key to move the layer by the current grid snapping increment. For information about setting the grid snapping increment, see Snapping layers to the grid .
<url>html/09layers13.html</url>
<title>Aligning layers</title> Aligning layers Use the layer alignment commands to align one or more layers with a border of the last layer selected. When you align 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 Hotspots, then 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/09layers14.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 to toggle it off). 2 Select the layer and drag it; as you drag it, the layer jumps to the nearest snapping position. 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. The minimum unit is 25 pixels. Color specifies the color of grid markers. The default color is light blue. Display specifies whether the grid displays as lines or as 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 Visible 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/09layers15.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 Layer palette list is at the top of the stacking order. In HTML code, the stacking order, or z -index, determines the order in which layers are drawn in a browser. You can change the z -index for each layer using the Property inspector or using the Layer palette. To change the stacking order of layers using the Property inspector: 1 Choose Window > Layers to open the Layer palette to see the current stacking order. 2 Select a layer in the Layer palette or in the Document window. 3 In the Layer Property inspector, type a number in the Z-index field. Type a higher number to move the layer back in the stacking order Type a lower number to move the layer forward in the stacking order To change the stacking order of layers in the Layer palette: Choose Window > Layers to open the Layer palette. Then in the Layer palette do one of the following: In the Z column, click the number of the layer you are changing. Type a higher number than the existing number to move the layer back in the stacking order, or type a lower number to move the layer forward in the stacking order. Select and drag a layer up or down to the desired stacking order. You'll see a line appear as you move the layer. Release the mouse button when the placement line appears in the desired stacking order.
<url>html/09layers16.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 under 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 In the row of the layer you're affecting, click in the eye-icon column until you set the desired 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. (When layers are not nested, the parent is the document body, which is always visible.) To change the visibility of all layers at once: 1 Choose Window > Layers to open the Layer palette. 2 Click the header eye icon at the top of the column.
<url>html/09layers17.html</url>
<title>About layers and tables</title> About layers and tables Use layers to position content on a page. Layers are easier to work with and change the design of 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, which don't support the use of layers. You can also move back and forth between layers and tables to tweak layout and optimize page design. You can't convert layers to tables or tables to layers in a template document or in a document to which a template has been applied. Create your original document, and convert it prior to saving it as a template. If you are targeting 4.0 and later browsers only, you can use a combination of tables and layers and even animate your layers. For information about animating layers, see About timelines . If you want to generate 3.0 browser-compatible files from your current file, use the Covert option in the File menu. See Converting to 3.0 version compatibility .
<url>html/09layers18.html</url>
<title>Using layers to design tables</title> Using layers to design tables When designing tables, you may find it easier to design a page using layers then convert the layer layout to a table layout. To convert layers to a table: 1 Choose Modify > Layout Mode > Convert Layers to Table. 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. To convert a table to layers: 1 Choose Modify > Layout Mode> Convert Tables To 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 About theLayer 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.
<url>html/09layers19.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 select the Prevent Overlaps option in the Layer palette. When this option is on, a layer can't be created in front of, moved or resized over, or nested within an existing layer. If you activate this option after creating overlapping layers, 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/09layers2.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 About theLayer 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 insertion point, 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 them 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 insertion point in the Document window where you want to position the layer and then choose Insert > Layer. To drag and drop a layer, drag the Layer button from the Object palette to the Document window. To draw a layer, click the Layer button in the Object palette; in the Document window, drag to draw a layer. To draw a number of layers, click the Layer button in the Object palette, hold down the Shift key, and draw a layer in the Document window. You can continue to draw new layers as long as you do not release the Shift key. For each layer you create, a layer marker appears at the top left of the page, in the Document window. Layer markers will appear in other positions on the page if you add layers after adding paragraph returns in the Document window. If layer markers aren't visible, choose View > Invisible Elements. See Invisible Elements preferences . When you're viewing invisible elements, other elements on a page may appear to shift position. Invisible elements are visible only in the Document window; when the page is viewed through a browser, the other elements will appear in their proper position.
<url>html/09layers20.html</url>
<title>Converting to 3.0 version compatibility</title> Converting to 3.0 version compatibility Use the Convert option in the File menu to create a 3.0 browser-compatible version of a page that uses layers, or to convert a document that uses tables to one that uses layers. In either conversion scenario, Dreamweaver creates a separate, converted document and preserves the original document. In general, you should convert a document only when you are completely satisfied with your original file—otherwise, you must convert the file 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 Layout Mode commands in the Modify menu 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.
<url>html/09layers21.html</url>
<title>About timelines</title> About timelines 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. To see the JavaScript code generated by a timeline, open the HTML inspector. 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/09layers22.html</url>
<title>Timeline inspector</title> Timeline inspector The Timeline inspector represents the properties of layers and images over time. Choose Window > Timelines to open the Timeline inspector. See also About timelines . Right-click (Windows) or Control-click (Macintosh) the Timeline inspector to open a context 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 that of 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. Playback options Listed below are the playback options for viewing the animation. 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 backward. 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/09layers23.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 button 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 To animate a layer, move the layer to where it should be when the animation begins. 2 Choose Window > Timelines. 3 Select the layer 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 inside the layer places a blinking insertion point inside the layer, but it does not select the layer. 4 Choose Modify > Timeline > 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 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 insertion point position, or click a frame in the middle of the animation bar and choose Add Keyframe from the context 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/09layers24.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 Select 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/09layers25.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. To prevent the other keyframes from moving, press Control (Windows) or Command (Macintosh) while dragging the end frame marker. 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 Modify > Timeline > Remove Frame. To make the timeline play automatically when the page opens in a browser, click Autoplay. Autoplay attaches a behavior to the page that executes the Play Timeline action when the page loads. To make the timeline loop continuously, click Loop. Loop inserts the Go To Timeline Frame action in the 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/09layers26.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 field in the Property inspector to browse to and select a new image. To change the visibility of a layer, choose inherit, visible, or hidden from the pop-up menu in the Vis field of 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 fields in the Property inspector. Internet Explorer 4.0 and 5.0 are currently the only browsers than can dynamically change the size of a layer. To change the stacking order of a layer, enter a new value in the Z-Index 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/09layers27.html</url>
<title>Using multiple timelines</title> Using multiple timelines Instead of trying to control all the action on a page with one timeline, it's easier to work with separate timelines that control discrete parts of the page. For example, a page might also include interactive elements that trigger different timelines. To manage multiple timelines, use the following options: To create a new timeline, choose Modify > Timeline > Add 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/09layers28.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 Control-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 frame that doesn't overlap. 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 context 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/09layers29.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 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 context 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/09layers3.html</url>
<title>About theLayer palette</title> About theLayer palette The Layer palette is a visual map of the layers in your document. Choose Window > Layers or press F11 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/09layers30.html</url>
<title>Renaming timelines</title> Renaming timelines To rename the timeline displayed in the Timeline inspector, do one of the following: Choose Modify > Timeline > Rename Timeline, and in the Rename Timeline dialog box enter a new name. Enter a new name in the Timeline Name pop-up menu in the Timeline inspector. 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/09layers31.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/09layers32.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 other object to control timelines. To create interesting effects, you can place behaviors containing these actions in the Behaviors channel. For example, you can make a timeline stop itself. For more information, see Attaching a behavior to a timeline and Behaviors overview . Drag Layer Lets the user drag a layer. Use this action to create puzzles, slider controls, and other moveable user interface elements. See Drag Layer . Show-Hide Layers 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. See Show-Hide Layers . Play Timeline and Stop Timeline Let users start and stop a timeline by clicking a link or button. These actions can also start and stop a timeline automatically when the user rolls over a link, image, or other object. See Play Timeline and Stop Timeline . 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. See Go To Timeline Frame Set Text of Layer Replaces the content and formatting of an existing layer on a page with the content you specify. The content can include any valid HTML. See Set Text of Layer .
<url>html/09layers4.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 insertion point inside an existing layer and choose Insert > Layer. To drag and drop a nested layer, drag the Layer button from the Object palette, then drop it inside an existing layer. To draw a nested layer, click the Layer button in the Object palette; then, inside an existing layer, drag to draw the nested layer. If Nesting is turned off in Layers preferences, press Control (Windows) or Command (Macintosh) to draw a layer inside an existing layer. To create a nested layer using the Layer palette: 1 Choose Window > Layers or press F11 to open the Layer palette. 2 Press the Control key (Windows) or Command key (Macintosh) and select a layer in the Layer palette, then drag it to the target layer. 3 Release the mouse button when a box appears around the name of the target layer.
<url>html/09layers5.html</url>
<title>Layer preferences</title> Layer preferences Use Layer preferences to define the default settings for new layers you create. 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 Specifies 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 temporarily change this setting while you're drawing a layer. Netscape 4 Compatibility Inserts JavaScript in the HEAD of a document and fixes how Netscape CSS layers resize in a browser. You can also add or remove the JavaScript, by choosing Commands > Add/Remove Netscape Resize Fix.
<url>html/09layers6.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 Allows you to specify 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. Click the folder icon to browse to and select an image file, or type the path for the image in the text field. 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 visible area of a layer. Specify 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. Click the folder icon to browse to and select the document, or type the path of 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/09layers7.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 layers from the top left corner of the page or parent layer. W and H Specify the width and height of the layers. These values are overridden if the content of the layers 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 layers. 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 layers are CSS layers or Netscape layers. SPAN and DIV create CSS layers; LAYER and ILAYER create Netscape layers. Bg Image Specifies a background image for the layers. Click the folder icon to browse to and select an image file, or type the path for the image in the text field. Bg Color Specifies a background color for the layers. Leave this option blank to specify a transparent background.
<url>html/09layers8.html</url>
<title>Manipulating layers</title> Manipulating layers As you work with your page layout, layers can be activated, selected, or resized. Activating layers lets you place content in them. Selecting layers lets you align, reposition, or resize them. 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 . When multiple layers are selected, the Modify menu displays the Layer and Hotspots options. To prevent layers from overlapping each other as you move and resize them, use the Prevent Overlap option. See Preventing layer overlaps .
<url>html/09layers9.html</url>
<title>Activating layers</title> Activating layers Activate a layer so that objects can be placed in it. Activating a layer places the insertion point in the layer, highlights the layer's border, and displays the selection handle, but it does not select the layer. To activate a layer: Click anywhere inside the layer.
<url>html/10frames1.html</url>
<title>Frames overview</title> Frames overview Frames are made up of two major components—a frameset and individual frames. A frameset is an HTML page that defines the structure of a set of frames within a document. The frameset definition includes information about the number of frames displayed on a page, the size of the frames, the source of the page loaded into a frame, and other definable properties. A frameset HTML page isn't displayed in a browser; it simply stores information about how the frames on a page will display. HTML frames are spatially defined regions or areas in an HTML page. Each frame in a page "holds" an individual HTML document. In a Web page, frames commonly define a navigation area and a content area for a page. When you split a Dreamweaver document into frames, you create separate HTML documents for the frameset and for each new frame. The frameset is referred to as a parent frame, and a frame is referred to as a child frame. You can create new content directly in a frame page, link existing pages to open in a frame, and set up a behavior to change content in multiple 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. Changing the properties of frames and framesets allows you to resize frames and to use links and targets to control a frame's 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. This makes it easier for you to drag and select a frame.
<url>html/10frames10.html</url>
<title>Saving a frameset file</title> Saving a frameset file To save a frameset file, choose one of the following options: To save the frameset file, choose File > Save Frameset. To save the frameset file as a new file, choose File > Save Frameset As.
<url>html/10frames11.html</url>
<title>Saving a frame file</title> Saving a frame file To save a document that is inside a frame, click in the frame, then choose File > Save.
<url>html/10frames12.html</url>
<title>Saving all files in a frameset</title> Saving all files in a frameset To save all open documents, including individual documents, frame documents, and frameset documents, choose File > Save All. Note: Use the frame selection lines in the Document window to help you identify frameset and frame documents as you are saving files.
<url>html/10frames13.html</url>
<title>About frame and frameset properties</title> About frame and frameset properties Frames and framesets each have a Property inspector. Frame properties determine the frame name, source file, margins, scrolling, resizing, and borders of individual frames within a frameset. Frameset properties control the dimensions of the frames and the color and width of the borders between frames. To view frame properties: 1 Choose Window > Properties to display the Property inspector if it isn't already open. 2 Do one of the following: Alt-click (Windows) or Option-Shift-click (Macintosh) a frame. Click a frame in the Frame inspector.
<url>html/10frames14.html</url>
<title>Frame properties</title> Frame properties Use the frame Property inspector to name a frame and to set borders and margins. To see all of the following frame properties, click the expander arrow in the lower right corner of the Property inspector. To specify frame properties: 1 Select a frame by doing one of the following: Click a frame in the Frame inspector. Alt-click (Windows) or Option-Shift-click (Macintosh) a frame in the Document window. 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 frame, type a name in the Frame Name field. Note: Frame Name determines the name of the current frame to use for hyperlink target and scripting references. A frame name should be a single word. Underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. Frame names should start with a letter (as opposed to a numeral). Don't use JavaScript reserved words (such as top or navigator) for frame names. 4 Choose from the following frame options: 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 pointer 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 restricts the size of the current frame and prevents users from dragging the frame borders. You can always resize frames in the Document window; however, if this option is selected a user can't resize frames in their 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. A border can be turned off only when all adjacent frames are 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 Frame properties .) 5 Set the following margin options (if margin options aren't visible, click the expander arrow in the lower right corner): 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/10frames15.html</url>
<title>Frameset properties</title> Frameset properties Use frameset properties to set borders and frame size. Setting a frame property overrides the setting for that property in a frameset. For example, setting border properties in a frame overrides the border properties set in the frameset. Predefined framesets are used to quickly apply a frameset to a document. Predefined framesets share the following default property values: no borders, no scroll bars, and no resizing of frames when viewed in a browser. To change the default values, select the options you want in the Property inspector. To view frameset properties: 1 Choose Window > Properties to display the Property inspector, if it isn't already open. 2 Do one of the following: Click a border between two frames in the Document window. Click the border that surrounds the frames in the Frame inspector. 3 To see all the frameset properties, click the expander arrow in the lower right corner of the Property inspector. To specify frameset properties: 1 Select a frameset. 2 In the Borders pop-up menu, select whether you want to display borders around frames when the document is viewed in a browser. If you want to display borders, select Yes. If you don't want to display borders, select No. If you want the user's browser to determine how borders are displayed, select Default. 3 In the Border Width field, type a number to specify the width of the borders in the current frameset. Type 0 to specify no border. 4 In the Border Color field, type the hexadecimal value for a color, or use the color picker to select a color for the border. 5 To select frame size options, click the tabs on the RowCol Selection box to select a row or the tabs on top to select a column. Then in the Value field, type a number to set the size of the selected row or column, and in the Units pop-up menu, set the unit of measure for the number in the Value field.
<url>html/10frames16.html</url>
<title>Naming a frameset document</title> Naming a frameset document Add a title to a frameset page using the page properties option. To name a frameset page: 1 Select a frameset by doing one of the following: Click the border of the frameset in the Frame inspector. Alt-click (Windows) or Option-Shift-click (Macintosh) a frame in the Document window. You may have to press Alt (Windows) or Command (Macintosh) plus the Up Arrow key to select the frameset. 2 Choose Modify > Page Properties. 3 In the Title field, type a name for the document.
<url>html/10frames17.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 much space the browser allocates to a frame when the screen size doesn't allow the frames to display at full size. To specify frame sizes: 1 Click a 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 In the RowCol Selection box, click the row or column you want to change. 4 To specify how space is allocated when the browser window is resized, enter a number in the Value field 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/10frames18.html</url>
<title>Setting frame and frameset borders</title> Setting frame and frameset borders You can specify how frame and frameset borders appear in a document. When you specify border options for a frame, the corresponding frameset option is overridden. To set frame borders: 1 Select the frame by Alt-clicking (Windows) or Option-Shift-clicking (Macintosh) or click the frame in the Frame inspector. 2 Set the following options in the Property inspector: Borders controls the border of the current frames. The options are Yes, No, and Default. Most browsers default to Yes. A border can be turned off only when all adjacent frames are 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 in the Property inspector: 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 color for all borders in the current frameset. This setting can be overridden for a single frame by a setting a border color for that frame. Border Width specifies the width of the borders in the current frameset. Enter 0 to specify no borders.
<url>html/10frames19.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 pointer in the frame and choose Modify > Page Properties. Right-click (Windows) or Control-click (Macintosh) inside the frame and choose Page Properties from the context menu. 2 Click the Background pop-up menu to select a color.
<url>html/10frames2.html</url>
<title>Creating frames</title> Creating frames You create frames by modifying an existing Dreamweaver document, dividing it into additional document areas. There are several ways to create a frameset: you can design it yourself, or you can select from several predefined framesets.
<url>html/10frames20.html</url>
<title>Controlling frame content with links</title> Controlling frame content with links Use the Target pop-up menu in the Property inspector to select a frame to open a file in. You can set a file to open in a new window, replace information in the same frame as the link, and replace information in another frame. You can cause content from a link to overwrite the current frame or to appear in an entirely new browser window. To target a frame: 1 Select text or an object. 2 In the Link field of the Property inspector, do one of the following: Type the name of the file to link to. Click the folder icon and select the file to link to. Click and drag the Point to File icon to select the file to link to. To specify an anchor in the file to link to, enter a number sign (#) before the anchor name. See Linking to a named anchor . 3 In the Target pop-up menu, choose a target for the linked document to display in. _blank opens the linked document in a new browser window and keeps the current window available. _parent opens the linked document in the parent frameset of the link. _self opens the link in the current frame, replacing the content in that frame. _top opens the link in the outermost frameset of the current document, replacing all frames. If you named frames in the Property inspector, the frame names appear in this menu. Selecting a named frame opens the linked document in the selected frame.
<url>html/10frames21.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 document using a statement similar to the following: <noframes><body bgcolor="#FFFFFF"> this is 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 To create the NoFrames content, do one of the following: In the Document window, type or insert the content. Choose Window > HTML Source, and between the <noframes> tags, type the content or HTML code for the content. 3 Choose Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.
<url>html/10frames22.html</url>
<title>Using behaviors with frames</title> Using behaviors with frames You can apply a number of behaviors that take advantage of the way frames operate. Frames are usually used when the Web page designer wants to control the display of content on a Web page. There are several behaviors that facilitate changing the contents of a frame. Set Text of Frame replaces the content and formatting of a frame with the content you specify. The content can include any valid HTML. Use this action to dynamically display information. See Set Text of Frame . Go To URL 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. See Go To URL . Insert Navigation Bar is used to direct a user to specific pages in a Web site. You can attach behaviors to navigation bar images and set which image displays based on a user's actions. For example, you may want to show a button image in its up or down state to let a user know which page of a site is being viewed. See Inserting a navigation bar . Insert Jump Menu Lets you set up a pop-up menu list of links that open files in a browser window when clicked. You can also target a particular window or frame in which the document will open. See Inserting a jump menu .
<url>html/10frames3.html</url>
<title>Creating a frameset</title> Creating a frameset Before creating a frameset or working with frames, make the frame borders visible in the document window. To view frame borders in a document, choose View > Frame Borders. When frame borders are displayed, space is added around the document border, providing you with a visual indicator of the frame areas in your document. To create a frameset, do one of the following: Choose Modify > Frameset > Split Frame Left, Right, Up, or Down. Alt-drag (Windows) or Option-drag (Macintosh) one of the frame borders into the Document window to split the document vertically or horizontally. Drag a frame border from one of the corners to divide the document into four 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/10frames4.html</url>
<title>Inserting a predefined frameset</title> Inserting a predefined frameset Predefined framesets make it easy for you to select the type of frameset you want to create. The predefined frameset icons in the Frames panel of the Objects palette provide a visual representation of each frameset as applied to a selected document. The selected frameset surrounds the current document—the document in which the insertion point is located. The blue area of a predefined frameset icon represents the currently selected page or frame in a document, and the white area represents the new frame or frames. To insert a predefined frameset: 1 Place the insertion point in the document the frameset will surround. 2 Then do one of the following: In the Frames panel on the Objects palette, select a predefined frameset. To insert the frameset, you can click an icon or drag an icon directly to the document. To select a predefined frameset, choose Insert > Frames > Left, Right, Top, Bottom, Left_Top, Left Top, Top Left, Split.
<url>html/10frames5.html</url>
<title>Creating a nested frameset</title> Creating a nested frameset A frameset inside another frameset is called a nested frameset. Each new frameset you create includes its own frameset HTML document and frame documents. Use nested frames to set up multiple frames for a document. For example, a document with three frames might display a company's logo in a frame at the top of the document, navigation controls in a frame on the left side of a document, and content in a third frame. To create a nested frameset: 1 Place the insertion point in the frame where you want to insert a nested frameset. 2 Do one of the following: Choose Modify > Frameset > Split Frame Up, Down, Left, or Right. In the Frames panel on the Objects palette, select a frameset icon. Choose Insert > Frames > Left, Right, Top, Bottom, Left_Top, Left Top, Top Left, Split. In the Document window, Alt-drag (Windows) or Option-drag (Macintosh) a frame border to split the frame vertically or horizontally.
<url>html/10frames6.html</url>
<title>Selecting a frame or frameset</title> Selecting a frame or frameset Frames and framesets are individual HTML documents. In order to make changes to a frame or to the frameset, begin by selecting the frame or frameset you wish to change. You can select a frame or frameset either in the Document window or by using the Frame inspector. When you select a frame or the frameset, selection lines appear both in the Frame inspector and in the Document window.
<url>html/10frames7.html</url>
<title>Frame inspector</title> Frame inspector The Frame inspector provides a visual representation of the frames within a document. You can click a frame or frameset in the Frame inspector to select that frame or frameset in the document, and then you can view or edit the properties of the selected item in the Property inspector. See About frame and frameset properties . The Frame inspector shows the hierarchy of the frameset structure in a way that may not be apparent in the document window. In the Frame inspector, a thick three-dimensional border surrounds a frameset; frames are surrounded by a thin gray line, and each frame is identified by a frame name. To display the Frame inspector, do one of the following: Choose Window > Frames. Press Ctrl+F10 (Windows) or Command+F10 (Macintosh). To select a frame in the Frame inspector: Click the frame in the Frame inspector. To select a frameset in the Frame inspector: Click the border that surrounds the frames in the Frame inspector.
<url>html/10frames8.html</url>
<title>Selecting a frame or frameset in the Document window</title> Selecting a frame or frameset in the Document window In the Document window, when a frame is selected, its borders are outlined with a dotted line; when a frameset is selected, all the borders of the frames within the frameset are outlined with a dotted line. Select frames and framesets to change their properties. The Property inspector displays the properties of the selected frame or frameset. See About frame and frameset properties . To select a frame in the document window: Alt-click (Windows) or Option-Shift-click (Macintosh) inside a frame. To select a frameset in the document window: Click a frame border in the Document window. To move the selection to another frame, do one of the following: To move the selection to the next frame, Press Alt (Windows) or Command (Macintosh) plus the Left or Right Arrow key. To move the selection to the parent frameset, Press Alt (Windows) or Command (Macintosh) plus the Up Arrow key. To move the selection to the child frame, Press Alt (Windows) or Command (Macintosh) plus the Down Arrow key.
<url>html/10frames9.html</url>
<title>Saving frame and frameset files</title> Saving frame and frameset files A frameset file and its associated frame files must be saved before you can preview the page in a browser. You can individually save a frameset page or a frame page, or you can save all open frame files and the frameset page. When you use Dreamweaver to create frame documents, each new frame document is given a temporary file name—for example, UntitledFrame_1 for the frameset page, Untitled-1, Untitled-2, and so forth for the frame pages. When you select one of the save options, the Save File dialog box opens ready to save a document with its temporary file name. Because each file is "untitled," it may be difficult for you to determine which frame file you are saving. Look at the frame selection lines in the Document window to identify the current document being saved. The selected area identifies the frame currently referenced in the Save File dialog box.
<url>html/11multimedia1.html</url>
<title>Inserting media overview</title> Inserting media overview To insert a Java applet, Shockwave movie, Flash movie, ActiveX control, or other audio or video objects in a page, do one of the following: Place the insertion point where you want the object to be, and then click the appropriate button on the Object palette. Drag the appropriate button from the Object palette to where you want the object to appear in the Document window. Place the insertion point and then choose the appropriate object from the Insert > Media submenu. In most cases, a dialog box appears allowing you to choose a source file and specify certain parameters for the media object. To prevent such dialog boxes from appearing, choose Edit > Preferences and deselect the Show Dialog When Inserting Objects option. Each Object palette button inserts the necessary HTML source code to make the object appear on the page. Use the Property inspector to specify the source file, dimensions, and other parameters.
<url>html/11multimedia10.html</url>
<title>Inserting Netscape Navigator plugin content</title> Inserting Netscape Navigator plugin content Plugins enhance Netscape Navigator, providing ways to view media content in a wide variety of formats. After you create content for a Navigator plugin, you can use Dreamweaver to insert that content into an HTML document. Dreamweaver uses the EMBED tag to mark the reference to the content file. To insert Navigator plugin content: 1 In the Document window, place the insertion point where you want to insert the content. 2 Click the Plugin button in the Object palette. 3 In the dialog box that appears, select a content file for a Navigator plugin. For information on the available properties, see Netscape Navigator plugin properties .
<url>html/11multimedia11.html</url>
<title>Netscape Navigator plugin properties</title> Netscape Navigator plugin properties After inserting content for a Netscape Navigator plugin (see Inserting Netscape Navigator plugin content ), use the Property inspector to set parameters for that content. To view the following properties in the Property inspector, select a Netscape Navigator plugin object. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. 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 object'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 to browse to 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. V Space and H Space Specify the amount of white space in pixels above, below, and on both sides 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 Navigator plugin. See About parameters . Many plugins respond to special parameters. The Flash plugin, for example, includes parameters for BGCOLOR , SALIGN , and SCALE .
<url>html/11multimedia12.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 Navigator plugins—that is, elements that use the EMBED tag—directly in the Document window. (It is not possible to preview movies or animations that rely on ActiveX controls in the Document window.) You can play all plugin elements at one time to see how the page will look to the user, or you can play each one individually to ensure that you have embedded the correct media element. To play movies, the proper plugins must be installed on your computer. When Dreamweaver starts up, it automatically searches for all installed plugins, looking first in the Configuration/Plugins folder and then in the plugin folders of all installed browsers. To play plugin content in the Document window: 1 Insert one or more media elements by choosing Insert > Media > Shockwave, Insert > Media > Flash, or Insert > Media > Plugin. 2 Play plugin content: Select one of the media elements you have inserted and choose View > Plugins > Play. Choose View > Plugins > Play All to play all of the media elements on the page that rely on plugins. To stop playing plugin content: Select a media element and choose View > Plugins > Stop, or choose View > Plugins > Stop All to stop all plugin content from playing.
<url>html/11multimedia13.html</url>
<title>Troubleshooting Navigator plugins</title> Troubleshooting Navigator plugins If you have followed the steps to play plugin content in the Document window, but some of the plugin content does not play, try the following: Make sure the associated plugin is installed on your computer, and that the content is compatible with the version of the plugin you have. Open the file Configuration/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 cause Dreamweaver to fail 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, check that enough memory is allocated to Dreamweaver). Some plugins require an additional 2 MB to 5 MB of memory to run.
<url>html/11multimedia14.html</url>
<title>Inserting an ActiveX control</title> Inserting an ActiveX control ActiveX controls (formerly known as OLE controls) are reusable components, somewhat like miniature applications, that can act like browser plugins. They run in Internet Explorer with Windows, but they don't run on the Macintosh or in Netscape Navigator. The ActiveX object in Dreamweaver lets you supply attributes and parameters for an ActiveX control in your visitor's browser. Dreamweaver uses the OBJECT tag to mark the place on the page where the ActiveX control will appear, and to provide parameters for the ActiveX control. To insert ActiveX control content: 1 In the Document window, place the insertion point where you want to insert the content. 2 Click the ActiveX button in the Object palette. An icon marks where the ActiveX control will appear on the page in Internet Explorer. For information on the available properties, see ActiveX properties .
<url>html/11multimedia15.html</url>
<title>ActiveX properties</title> ActiveX properties After inserting an ActiveX object (see Inserting an ActiveX control ), use the Property inspector to set attributes of the OBJECT tag and parameters for the ActiveX control. Click Parameters in the Property inspector to enter names and values for properties that don't appear in the Property inspector. There is no widely accepted standard format for parameters for ActiveX controls; to find out which parameters to use, consult the documentation for the ActiveX control you're using. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Name Specifies a name to identify the ActiveX object for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify the width and height of the object in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object's 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 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. If you don't specify a Base parameter and if your visitor doesn't already have the relevant ActiveX control installed, the browser can't display the ActiveX object. Embed Makes Dreamweaver add an EMBED tag within the OBJECT tag for the ActiveX control. If the ActiveX control has a Netscape Navigator plugin equivalent, the EMBED tag activates the plugin. Dreamweaver assigns the values you've entered as ActiveX properties to their Netscape Navigator plugin equivalents. Src Defines the data file to be used for a Netscape Navigator plugin if the Embed option is turned on. If you don't enter a value, Dreamweaver attempts to determine the value from the ActiveX properties entered already. 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. This option is available only when the Embed option is deselected. V Space and H Space Specify the amount of white space in pixels above, below, and on both sides 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. See About parameters . Many ActiveX controls respond to special parameters.
<url>html/11multimedia16.html</url>
<title>Inserting a Java applet</title> Inserting a Java applet Java is a programming language that allows the development of lightweight applications ( applets ) that can be embedded in Web pages. After you create a Java applet, you can insert that applet into an HTML document using Dreamweaver. Dreamweaver uses the APPLET tag to mark the reference to the applet file. To insert a Java applet: 1 In the Document window, place the insertion point where you want to insert the applet. 2 Click the Applet button in the Object palette. 3 In the dialog box that appears, select a file containing a Java applet. For information on the available properties, see Java applet properties .
<url>html/11multimedia17.html</url>
<title>Java applet properties</title> Java applet properties After inserting a Java applet (see Inserting a Java applet ), use the Property inspector to set parameters. To view the following properties in the Property inspector, select a Java applet. The Property inspector initially displays the most commonly used properties. Click the expander arrow in the lower right corner to see all properties. Name Specifies a name to identify the applet for scripting. Enter a name in the unlabeled field on the far left side of the Property inspector. W and H Specify the width and height of the applet in pixels. You can also specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent object's 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 to browse to 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 enter text, Dreamweaver renders the text with the ALT attribute of the APPLET tag. If you choose an image, Dreamweaver inserts an IMG tag between the opening and closing APPLET tags. Note: To specify alternative content that is viewable in both Netscape Navigator (with Java disabled) and Lynx (a text-based browser), select an image and then manually add an ALT attribute to the IMG tag in the HTML Source inspector. V Space and H Space Specify the amount of white space in pixels above, below, and on both sides of the applet. Parameters Opens a dialog box for entering additional parameters to pass to the applet. See About parameters . Many applets respond to special parameters.
<url>html/11multimedia18.html</url>
<title>About parameters</title> About parameters Use the Parameters dialog box to enter values for special parameters defined for Shockwave and Flash movies, ActiveX controls, Netscape Navigator plugins, and Java applets. See the documentation for the object you're using for information on the parameters it requires. Note: There is no widely accepted standard for identifying data files for ActiveX controls. Consult the documentation for the ActiveX control you're using to find out which parameters to use. To open the Parameters dialog box: 1 Select an object that can have parameters (such as a Shockwave movie, an ActiveX control, a Navigator plugin, or a Java applet) in the Document window. 2 Open the dialog box by using one of these methods: Right-click (Windows) or Control-click (Macintosh) the object, and choose Parameters from the context menu. Open the Property inspector if it isn't already open, expand the Property inspector by clicking the expander arrow in the lower right corner, and click the Parameters button. To enter a value for a parameter in the Parameters dialog box: 1 Click the plus (+) button. 2 Enter the name of the parameter in the Parameter column. 3 Enter the value of the parameter in the Value column. To remove parameters: Select a parameter and press Delete. To reorder parameters: Use the up and down arrow buttons.
<url>html/11multimedia19.html</url>
<title>Using behaviors to control media</title> Using behaviors to control media You can add behaviors to your page to start and stop various media objects. Control Shockwave or Flash Lets you play, stop, rewind, or go to a frame in a Shockwave or Flash movie. See Control Shockwave or Flash . Play Sound Lets you play a sound. For example, you can play a sound effect whenever the user moves the mouse pointer over a link. See Play Sound .
<url>html/11multimedia2.html</url>
<title>Launching an external media editor</title> Launching an external media editor You can double-click any file in the Site window to edit that file. If the file is an HTML file, it opens in Dreamweaver. If it's another kind of file, such as an image file or Flash movie file, it opens in an appropriate external editor, such as Fireworks or Flash. Each file type is associated with one or more external editors. The editor that launches when you double-click the file in the Site window is called the primary editor. If more than one editor is associated with the file type, you can launch a secondary editor for a particular file: right-click (Windows) or Control-click (Macintosh) the file name in the Site window, and choose an editor from the Open With submenu of the context menu. Most of the time, the primary editor is the same application that would be launched if you double-clicked the file's icon on the desktop. To explicitly specify which external editors should be launched for a given file type, choose Edit > Preferences and select External Editors from the Category list. File name extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selected extension are listed on the right under Editors. To launch the primary editor for an image included in an HTML document, Control-double-click (Windows) or Command-double-click (Macintosh) the image in the Document window. Note that this method of launching an editor works only for images, not for other media embedded in a document. To add a file type to the list of extensions in External Editors preferences: 1 Click the plus (+) button above the Extensions list. 2 Enter a file name extension (including the period at the beginning of the extension), or several related extensions separated by spaces. To add an editor for a given file type: 1 Select the file type extension in the Extensions list. 2 Click the plus (+) button above the Editors list. 3 In the dialog box that appears, choose an application to add to the Editors list. To remove a file type from the list: 1 Select the file type in the Extensions list. Note: You can't undo after removing a file type from the list, so be sure you don't want the file type before you remove it. 2 Click the minus (-) button above the Extensions list. To dissociate one editor from a file type: 1 Select the file type in the Extensions list. 2 Select the editor in the Editors list. 3 Click the minus (-) button above the Editors list. To make an editor the primary editor for a file type: 1 Select the file type. 2 Select the editor (or add it if it isn't on the list). 3 Click the Make Primary button.
<url>html/11multimedia3.html</url>
<title>Using Design Notes with media objects</title> Using Design Notes with media objects As with other objects in Dreamweaver, you can add Design Notes to a media object. To add Design Notes to a media object: 1 Right-click (Windows) or Control-click (Macintosh) the object in the Document window. 2 Choose Design Notes from the context menu. 3 Enter your Design Notes. (For details, see About Design Notes .)
<url>html/11multimedia4.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 media 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 Navigator plugin and an ActiveX control. When you insert a Shockwave movie, Dreamweaver uses both the OBJECT tag (for the ActiveX control) and the EMBED tag (for the plugin) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the OBJECT and EMBED tags. For best cross-platform results, use Macromedia Aftershock to add HTML and JavaScript wrappers to Shockwave movies. Aftershock can add a variety of features to Shockwave movies, including the ability to detect which browser and plugin versions your visitors are using, and adapt accordingly. For more information on Aftershock, see Inserting and editing Aftershock objects . To insert a Shockwave movie: 1 In the Document window, place the insertion point 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/11multimedia5.html</url>
<title>Shockwave properties</title> Shockwave properties To ensure the best results in both Microsoft Internet Explorer and Netscape Navigator, Dreamweaver inserts Shockwave movies using both the OBJECT and EMBED tags. ( OBJECT is the tag defined by Microsoft for ActiveX controls; EMBED is the tag defined by Netscape for plugins.) To view the properties in the Property inspector, select a Shockwave movie. 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 object's value). The abbreviations must follow the value without a space: for example, 3mm. File Specifies the path to the Shockwave movie file. Type a path, or click the folder icon to browse to a file. 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, 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. See About parameters . The Shockwave movie must be authored to receive these parameters.
<url>html/11multimedia6.html</url>
<title>Inserting Flash movies</title> Inserting Flash 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 Navigator plugin and an ActiveX control for Internet Explorer, and it is built in to the latest versions of Netscape Navigator, Microsoft Windows 98, and America Online. Use Macromedia Flash to create Flash movies. If you use Flash 3, use Aftershock to add scripting and plugin-version detection to your movie; see Inserting and editing Aftershock objects . If you use Flash 4, use the Publish command for the same purposes. When you insert a Flash movie into a document, 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. Note: If you insert a movie using the Flash object, the movie can be viewed only with Flash Player 4, even if you used Flash 3 to create it. Flash Player 3 and earlier versions can't display movies inserted with the Flash object. Visitors to your page who use Flash Player 3 or earlier are prompted to upgrade to Flash Player 4. To insert a Flash movie: 1 In the Document window, place the insertion point where you want to insert the movie. 2 Click the Flash button in the Object palette. 3 In the dialog box that appears, select a Flash 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 movie properties for more information on the other properties.
<url>html/11multimedia7.html</url>
<title>Flash movie properties</title> Flash movie properties To ensure the best results in both Internet Explorer and Netscape Navigator, Dreamweaver inserts Flash 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.) To view the following properties in the Property inspector, select a Flash movie. See also Inserting Flash 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 object's value). The abbreviations must follow the value without a space: for example, 3mm. File Specifies the path to the Flash movie file. Type a path, or click the folder icon to browse to a file. 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, 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. See About parameters . The movie must be authored to receive these 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/11multimedia8.html</url>
<title>Inserting and editing Aftershock objects</title> Inserting and editing Aftershock objects Aftershock is a Macromedia utility, included as part of the Director package. Aftershock generates HTML and JavaScript to be associated with Shockwave and Flash movies; it can be used, for instance, to detect what version of a plugin a visitor to your page is using, and provide appropriate content. 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, select HTML generated by Aftershock in a document, and then click Launch Aftershock in the Property inspector. In Flash 4, Aftershock has been superseded by the Publish capability. However, Aftershock is still useful for those using Flash 3 or Director. 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 and paste them into another Dreamweaver document. To edit an Aftershock object: 1 Select an Aftershock object and open the Property inspector. 2 Click Launch Aftershock. 3 Edit the file in Aftershock, save the changes, and exit from the utility. When you exit from Aftershock, Dreamweaver updates the content of the Aftershock object with the new information.
<url>html/11multimedia9.html</url>
<title>Inserting Generator objects</title> Inserting Generator objects Macromedia Generator provides a way to serve dynamic Web content. You can create Generator files with Flash 4, using free Generator authoring templates; the files are then served by a Web server running Generator server software. You can insert a Generator object into a Dreamweaver document. To insert a Generator object: 1 In the Document window, place the insertion point where you want to insert the object. 2 Click the Generator button in the Object palette. 3 In the dialog box that appears, select a Generator template (.swt) file. 4 If desired, click the plus (+) button to add a name = value parameter pair. Then enter a name for the parameter in the Name field, and a value for the parameter in the Value field. Repeat this step for each parameter. 5 To remove a parameter, select it in the Parameters list and click the minus (-) button. 6 When you finish entering parameters, click OK to insert the Generator object. To edit the parameters after the Generator object has been inserted, use the HTML Source inspector. The Generator server attempts to obtain values to plug into the template from a database file; if no database file is available, the server uses the name = value pairs that you supplied here while inserting the object.
<url>html/12behaviors1.html</url>
<title>Behaviors overview</title> Behaviors overview Behaviors allow the user's interaction with the page to change the page, or to cause certain tasks to be performed. A behavior is a combination of an event and an action. For example, when the user moves the mouse over an image (an event), the image might highlight (an action). An action consists of prewritten JavaScript code that performs specific tasks, such as opening a browser window, playing a sound, or stopping a Shockwave movie. Events are defined by browsers 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. Events are generated by browsers in response to user actions; for example, when a visitor to your page moves the pointer over a link, the browser generates an onMouseOver event, and calls the JavaScript function (if any) that you've associated with that event. The events that you can use to trigger a given action vary from browser to browser. 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. Dreamweaver includes several behavior actions; additional actions can be found on the Dreamweaver Web site 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.
<url>html/12behaviors10.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 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Call JavaScript from the Actions pop-up menu. 3 Type the exact JavaScript to be executed, or type the name of a function. For example, to create a Back button, you might type if (history.length > 0){history.back()} . If you have encapsulated your code in a function, type only the function name (for example, goBack() ). 4 Click OK. 5 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors11.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 can be changed by this behavior in Microsoft Internet Explorer (IE) 4.0 than in IE 3.0 or Netscape Navigator 3.0 or 4.0. For example, you can set the background color of a layer dynamically. Note: Use this action only if you are very familiar with HTML and JavaScript. To use the Change Property action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Change Property from the Actions pop-up menu. 3 From the Type of Object pop-up menu, choose the type of object whose property you want to change. The Named Object pop-up menu now lists all the named objects of the type you chose. 4 Choose an object from the Named Object pop-up menu. 5 Choose a property from the Property pop-up menu, or enter the name of the property in the text field. To see the properties that can be changed in each browser, choose different browsers from the browser pop-up menu. If you are typing a property name, be sure to use the exact JavaScript name of the property (and remember that JavaScript properties are case-sensitive). 6 Enter the new value for the property in the New Value field, and click OK. 7 Check that the default event is the one you want. (When the event occurs, the action will execute and the property will change.) If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors12.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 null link ( A tag) and have the action determine the link's destination based on the visitor's browser brand and version. To use the Check Browser action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Check Browser from the Actions pop-up menu. 3 Determine how you want to separate your visitors: by browser brand, by browser version, or both. For example, do you want everyone with a 4.0 browser to see one page, and all others to see a different page? Or perhaps you want Netscape Navigator users to see one page and Microsoft Internet Explorer (IE) users to see another. 4 Specify a version of Netscape Navigator. 5 In the adjacent pop-up menus, choose options for what to do if the browser is the 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. If you enter a remote URL, you must enter the http:// prefix in addition to the www address. 10 Click OK. 11 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu. Remember that the purpose of this behavior is to check for different browser versions, so it's best to choose an event that works on 3.0 and later browsers.
<url>html/12behaviors13.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 in Microsoft Internet Explorer (IE) using JavaScript. However, selecting Shockwave Flash or Shockwave for Director will add the appropriate VBScript code to your page to detect those plugins in IE on Windows. To use the Check Plugin action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Check Plugin from the Actions pop-up menu. 3 Choose a plugin from the Plugin pop-up menu, or click Enter and type 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. (In Windows, choose Navigator's Help > About Plug-ins command; on the Macintosh, choose About Plug-ins from the Apple menu.) 4 In the If Found, Go To URL field, specify a URL for users who have the plugin. If you specify a remote URL, you must include the http:// prefix in the address. To make users with the plugin stay on the same page, leave this field blank. 5 In the Otherwise, Go To URL field, specify an alternative URL for users who don't have the plugin. To make users without the plugin stay on the same page, leave this field blank. 6 Plugin detection is not possible in Internet Explorer on the Macintosh, and most plugins cannot be detected in Internet Explorer on Windows. By default, when detection is impossible, the user is sent to the URL listed in the Otherwise field. To instead send the user to the first (If Found) URL, select the Always go to first URL if detection is not possible option. When selected, this option effectively means "assume that the user has the plugin, unless the browser explicitly indicates that the plugin is not present." In general, if the plugin content is integral to your page, select the Always go to first URL if detection is not possible option; users without the plugin will often be prompted by the browser to download the plugin. If the plugin content is not essential to your page, leave this option unselected. This option applies only to Internet Explorer; Netscape Navigator can always detect plugins. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors14.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 movie. To use the Control Shockwave or Flash action: 1 Choose Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash movie, respectively. 2 Choose Window > Properties and enter a name for the movie in the leftmost text field. You must name the movie to attach the Control Shockwave or Flash action. 3 With the movie still selected in the Document window, open the Behavior inspector. 4 Click the plus (+) button and choose Control Shockwave or Flash from the Actions pop-up menu. 5 Choose 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. The Play option 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, choose 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/12behaviors15.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 movable 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 the event that triggers the action occurs before the user attempts to drag the layer. It's best to attach 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 Deselect the layer by clicking elsewhere in the Document window. 3 Open the Behavior inspector. 4 Click the plus (+) button and choose Drag Layer from the Actions pop-up menu. If Drag Layer is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the BODY tag or a link ( A tag)—or change the target browser to IE 4.0 in the Events For pop-up menu. 5 In the Layer pop-up menu, select the layer that you want to make draggable. 6 Choose either Constrained or Unconstrained from the Movement pop-up menu. Unconstrained movement is appropriate for puzzles and other drag-and-drop games. For slider controls and moveable scenery such as file drawers, curtains, and mini-blinds, choose constrained movement. 7 For constrained movement, enter values (in pixels) in the Up, Down, Left, and Right fields. Values are relative to the starting position of the layer. To constrain movement within a rectangular region, enter positive values in all four fields. To allow only vertical movement, enter positive values for Up and Down and 0 for Left and Right. To allow only horizontal movement, enter positive values for Left and Right and 0 for Up and Down. 8 Enter values (in pixels) for the drop target in the Left and Top fields. The drop target is the spot to which you want the 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 fill the fields with the current position of the layer. 9 Enter a value (in pixels) in the Snap if Within field to determine how close the 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. 10 For simple puzzles and scenery manipulation, you can stop here. To define the drag handle for the layer, track the movement of the layer while it is being dragged, and trigger an action when the layer is dropped, click the Advanced tab. 11 To specify that the user must click a particular area of the layer to drag the layer, choose Area Within Layer from the Drag Handle pop-up menu; then enter the left and top coordinates and the width and height of the drag handle. This option is useful when the image inside the layer has an element that suggests dragging, such as a title bar or drawer handle. Do not set this option if you want the user to be able to click anywhere in the layer to drag it. 12 Choose any While Dragging options that you want to use: Select Bring Layer to Front if the layer should move to the front of the stacking order while it is being dragged. If you select this option, use the pop-up menu to choose whether to leave the layer in front or restore it to its original position in the stacking order. Enter JavaScript code or a function name (for example, monitorLayer() ) in the Call JavaScript field to repeatedly execute the code or function while the layer is being dragged. For example, you 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 . 13 Enter JavaScript code or a function name (for example, evaluateLayerPos() ) in the second Call JavaScript field to execute the code or function when the layer is dropped. Select Only if Snapped if the JavaScript should be executed only if the layer has reached the drop target. 14 Click OK. 15 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu. Remember that layers are not supported by 3.0 browsers. Note: You cannot attach the Drag Layer action to an object with the onMouseDown or onClick events. Gathering information about the draggable layer When you attach the Drag Layer action to an object, Dreamweaver inserts the MM_dragLayer() function into the HEAD section of your document. In addition to registering the layer as draggable, this function defines three properties for each draggable 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(layername){ var layerRef = MM_findObj(layername); 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 could send the user to the next page or display a message of congratulations. If you have used the onMouseOver event to attach the Drag Layer action to links within several layers, you must make a minor change to the MM_dragLayer() function to prevent the MM_SNAPPED property of a snapped layer from being reset to false if the mouse pointer rolls over the layer. (This can happen if you have used Drag Layer to create a picture puzzle, because the user is likely to roll the mouse pointer over snapped pieces while positioning others.) MM_dragLayer() does not 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 Choose 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 want 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/12behaviors16.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. It can also be called into a Timeline to jump to a new page after a specified time interval. To use the Go To URL action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Go To URL from the Actions pop-up menu. 3 Choose a destination for the URL from the Open In list. The Open In list automatically lists the names of all frames in the current frameset as well as the main window. If there are no frames, the main window is the only option. Note: This action may produce unexpected results if any frame is named top, blank, self, or parent. Browsers sometimes mistake these names for reserved target names. 4 Click Browse to select a document to open, or enter the path and file name of the document in the URL field. 5 Repeat steps 3 and 4 to open additional documents in other frames. 6 Click OK. 7 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors17.html</url>
<title>Jump Menu</title> Jump Menu When you create a jump menu using Insert > Form Object > Jump Menu, Dreamweaver creates a menu object and attaches the appropriate behavior to it. There is usually no need to attach the Jump Menu action to an object by hand. Instead, double-click an existing Jump Menu action in the Behavior inspector to edit a jump menu, to change the location in which the linked file opens, or to add or change a menu selection prompt. For information about creating a jump menu, see Inserting a jump menu . To edit a jump menu using the Behavior inspector: 1 Create a jump menu object if there isn't one already in your document. 2 Select the jump menu object and open the Behavior inspector. 3 Double-click Jump Menu in the Actions column. 4 In the Jump Menu dialog box, edit the menu items; then click OK. Jump Menu Go The Jump Menu Go action lets you associate a Go button with a jump menu. (Before you use this action, a jump menu must already exist in the document.) Clicking the Go button opens the link that's selected in the jump menu. A jump menu doesn't normally need a Go button; choosing an item from a jump menu generally causes a URL to load without any need for further user action. But if the user chooses the same item that's already chosen in the jump menu, the jump doesn't occur. The Go button is useful in circumstances when it's obvious to your visitors that re-choosing the current choice in the jump menu doesn't cause the jump to occur. In particular, add a Go button to a jump menu when the jump menu appears in a frame, and jump menu items link to pages in other frames that provide additional links. To use the Jump Menu Go action: 1 Select an object to use as the Go button (generally a button image), and open the Behavior inspector. 2 Click the plus (+) button and choose Jump Menu Go from the Actions pop-up menu. 3 In the Choose Jump Menu pop-up menu, choose a menu for the Go button to activate. 4 Click OK.
<url>html/12behaviors18.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 x 480 pixels and have a navigation bar, 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 x 480 pixels and has no navigation bar, no location toolbar, no status bar, no menu bar, no resize handles, and no scroll bars. To use the Open Browser Window action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Open Browser Window from the Actions pop-up menu. 3 Click Browse to select a file, or enter the URL you want to display. 4 Set any of the following options: Window Width Specifies the width of the window in pixels. Window Height Specifies the height of the window in pixels. Navigation Toolbar Is the row of browser buttons that includes Back, Forward, Home, and Reload. Location Toolbar Is the row of browser options that includes the location field. Status Bar Is the area at the bottom of the browser window in which messages (such as the load time remaining and the URLs associated with links) appear. Menu Bar Is the area of the browser window (Windows) or the desktop (Macintosh) where menus such as File, Edit, View, Go, and Help appear. You should explicitly set this option if you want 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 scroll bars should appear if the content extends beyond the visible area. If you do not explicitly set this option, scroll bars do not appear. If the Resize Handles option is also turned off, 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 maximize button (Windows) or size box (Macintosh) in the upper right corner. If this option is not explicitly set, the resize controls are unavailable and the lower right corner is not draggable. Window Name Is the name of the new window. You should name the new window if you want to target it with links or control it with JavaScript. 5 Click OK. 6 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors19.html</url>
<title>Play Sound</title> Play Sound Use the Play Sound action to play a sound. For example, you might want to play a sound effect whenever the mouse pointer rolls over a link, or you might want to play a music clip when the page loads. Note: Browsers may require some kind of audio support (such as an audio plugin) to play sounds. To use the Play Sound action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Play Sound from the Actions pop-up menu. 3 Click Browse to select a sound file, or enter the path and file name in the Play Sound field. 4 Click OK. 5 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors2.html</url>
<title>Behavior inspector</title> Behavior inspector Use the Behavior inspector to attach 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 in which they will execute. The selected tag appears at the top of the inspector. To open the Behavior inspector, choose Window > Behaviors or click the Behaviors 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 a chosen action and associated event from the list in the Behavior inspector. Events For Specifies the browsers in which the current behavior should work. The selection you make from this menu determines which events appear in the Events pop-up menu. Up and down arrow buttons Move the selected action up or down in the behavior list. Actions are executed in the specified order. 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 the correct object is selected. Use the tag selector at the bottom left of the Document window to select a 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 Events For pop-up menu. Only the events recognized by the selected browsers appear on the Events pop-up menu.
<url>html/12behaviors20.html</url>
<title>Popup Message</title> Popup Message The Popup Message action displays a JavaScript alert with the message you specify. Because JavaScript alerts have only one button (OK), use this action to provide information rather than to present the user with a choice. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ( {} ). To display a brace, precede it with a backslash ( \{ ). Example The URL for this page is {window.location}, and today is {new Date()}. To use the Popup Message action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Popup Message from the Actions pop-up menu. 3 Enter your message in the Message field. 4 Click OK. 5 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors21.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 you do not need to manually add Preload Images when using Swap Image. To use the Preload Images action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Preload Images from the Actions pop-up menu. 3 Click Browse to select an image file to preload, or enter the path and file name of an image in the Image Source File field. 4 Click the plus (+) button at the top of the dialog box to add the image to the Preload Images list. Note: If you do not click the plus button before entering the next image, the image you have just chosen will be replaced in the list with the image you choose next. 5 Repeat steps 3 and 4 for all remaining images that you want to preload on the current page. 6 To remove an image from the Preload Images list, select the image in the list and click the minus (-) button. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors22.html</url>
<title>Set Nav Bar Image</title> Set Nav Bar Image Use the Set Nav Bar Image action to turn an image into a navigation bar image, or to change the display and actions of images in a navigation bar. (For more information, see Inserting a navigation bar .) Use the Basic tab of the Set Nav Bar Image dialog box to create or update a navigation bar image or set of images, to change which URL is displayed when a navigation-bar button is clicked, and to select a different window in which to display a URL. Use the Advanced tab of the Set Nav Bar Image dialog box to change the state of other images in a document based on the current button's state. By default, clicking an element in a navigation bar automatically causes all other elements in the navigation bar to return to their Up states; use the Advanced tab if you want to set a different state for an image when the selected image is in its Down or Over state. To edit a Set Nav Bar Image action: 1 Select an image in the navigation bar to edit, and open the Behavior inspector. 2 In the Behavior inspector, in the Actions column, double-click the Set Nav Bar Image action associated with the event you're altering. 3 In the Basic tab of the Set Nav Bar Image dialog box, select image edit options. To set multiple images for a navigation bar button: 1 Select an image in the navigation bar to edit, and open the Behavior inspector. 2 In the Behavior inspector, in the Actions column, double-click the Set Nav Bar Image action associated with the event you're altering. 3 Click the Advanced tab of the Set Nav Bar Image dialog box. 4 In the When Element Is Displaying pop-up menu, choose an image state. Choose Down Image if you want to change the display of another image after a user has clicked the selected image. Choose Over Image or Over While Down Image if you want to change the display of another image when the pointer is over the selected image. 5 In the Also Set Image list, select another image on the page to set. 6 Click Browse to select the image file to display, or type the path of the image file in the To Image File field. 7 If you selected Over Image or Over While Down Image in step 4, you have an additional option. In the If Down, To Image File text field, click Browse to select the image file, or type the path to the image file to display.
<url>html/12behaviors23.html</url>
<title>Set Text of Frame</title> Set Text of Frame The Set Text of Frame action allows you to dynamically set the text of a frame, replacing the content and formatting of a frame with the content you specify. The content can include any valid HTML. Use this action to dynamically display information. Although the Set Text of Frame action replaces the formatting of a frame, you can select Preserve Background Color to preserve the page background and text color attributes. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ( {} ). To display a brace, precede it with a backslash ( \{ ). Example The URL for this page is {window.location}, and today is {new Date()}. To create a frameset: Choose Modify > Frameset > Split Frame Left, Right, Up, or Down. For more information, see Creating frames . To use the Set Text of Frame action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Set Text > Set Text of Frame from the Actions pop-up menu. 3 In the Set Text of Frame dialog box, choose the target frame from the Frame pop-up menu. 4 Click the Get Current HTML button to copy the current frame's HTML content and formatting. 5 Enter a message in the New HTML field, then click OK. 6 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If you don't see the events you want, change the target browser in the Events For pop-up menu.
<url>html/12behaviors24.html</url>
<title>Set Text of Layer</title> Set Text of Layer The Set Text of Layer action replaces the content and formatting of an existing layer on a page with the content you specify. The content can include any valid HTML source code. Set Text of Layer replaces the content and formatting of the layer, but retains layer attributes, including color. Format the content by including HTML tags in the New HTML field of the Set Text of Layer dialog box. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ( {} ). To display a brace, precede it with a backslash ( \{ ). Example The URL for this page is {window.location}, and today is {new Date()}. To create a layer: 1 Choose Insert > Layer. For more information, see Creating layers . 2 In the Property inspector, type a name for the layer. To attach a Set Text of Layer action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Set Text > Set Text of Layer from the Actions pop-up menu. 3 In the Set Text of Layer dialog box, use the Layer pop-up menu to choose the target layer. 4 Enter a message in the New HTML field, then click OK. 5 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If you don't see the events you want, change the target browser in the Events For pop-up menu.
<url>html/12behaviors25.html</url>
<title>Set Text of Status Bar</title> Set Text of Status Bar The Set Text of Status Bar action shows a message in the status bar at the bottom left of the browser window. For example, you can use this action to describe the destination of a link in the status bar instead of showing the URL associated with it. To see an example of a status message, roll your mouse over any of the navigation buttons in Dreamweaver Help. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ( {} ). To display a brace, precede it with a backslash ( \{ ). Example The URL for this page is {window.location}, and today is {new Date()}. To use the Set Text of Status Bar action: 1 Select an object and open the Behavior inspector. 2 Click the plus (+) button and choose Set Text > Set Text of Status Bar from the Actions pop-up menu. 3 In the Set Text of Status Bar dialog box, type your message in the Message field. Keep the message concise. The browser truncates the message if it doesn't fit in the status bar. 4 Click OK. 5 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors26.html</url>
<title>Set Text of Text Field</title> Set Text of Text Field The Set Text of Text Field action replaces the content of a form's text field with the content you specify. You can embed any valid JavaScript function call, property, global variable, or other expression in the text. To embed a JavaScript expression, place it inside braces ( {} ). To display a brace, precede it with a backslash ( \{ ). Example The URL for this page is {window.location}, and today is {new Date()}. To create a named text field: 1 Choose Insert > Form Object > Text Field. For more information, see Forms overview . 2 In the Property inspector, type a name for the text field. Make sure the name is unique on the page (don't use the same name for multiple elements on the same page, even if they're in different forms). To use the Set Text of Text Field action: 1 Select a text field and open the Behavior inspector. 2 Click the plus (+) button and choose Set Text > Set Text of Text Field from the Actions pop-up menu. 3 In the Set Text of Text Field dialog box, choose the target text field from the Text Field pop-up menu. 4 Enter text in the New Text field, then click OK. 5 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If you don't see the events you want, change the target browser in the Events For pop-up menu.
<url>html/12behaviors27.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 the mouse pointer over an image of a plant, you could show a layer that gives details about the plant's growing season and region, how much sun it needs, how large it can grow, and so on. 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 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 Click in the Document window to deselect the layer, then open the Behavior inspector. 3 Click the plus (+) button and choose Show-Hide Layers from the Actions pop-up menu. If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the BODY tag or a link ( A tag)—or change the target browser to IE 4.0 in the Events For pop-up menu. 4 From the Named Layers list, select the layer whose visibility you want to change. 5 Click Show to show the layer, Hide to hide the layer, or Default to restore the layer's default visibility. 6 Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time. 7 Click OK. 8 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu. When viewed in a Netscape Navigator browser window, layers may shrink to fit the content. To keep this from happening, add text or images to layers, or set layer clip values. 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 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 front of the stacking order. 3 Name the layer loading in the leftmost text 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 know the page contains content. 6 Click the <body> tag in the tag selector in the bottom left corner of the Document window. 7 In the Behavior inspector, choose Show-Hide Layers from the Actions pop-up menu. 8 Select the layer called loading from the Named Layers list. 9 Click Hide. 10 Click OK.
<url>html/12behaviors28.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 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. However, it is easier to distinguish images in the Swap Image dialog box if all of the images are named beforehand. 3 Repeat steps 1 and 2 to insert additional images. 4 Select an object (generally the image you're going to swap) and open the Behavior inspector. 5 Click the plus (+) button and choose Swap Image from the Actions pop-up menu. 6 From the Images list, select the image whose source you want to change. 7 Click Browse to select the new image file, or enter the path and file name of the new image in the Set Source To field. 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 when the page is loaded. This prevents delays caused by downloading when it is time for the images to appear. 10 Click OK. 11 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors29.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; if you left the Restore option selected while attaching Swap Image, you should never need to select the Swap Image Restore action manually.
<url>html/12behaviors3.html</url>
<title>About events</title> About events The following list describes the events that can be linked to the actions listed in the Behavior inspector's Actions (+) pop-up menu. When a visitor to your Web page interacts with the page—for example, by clicking an image—the browser generates events; those events can be used to call JavaScript functions that cause an action to occur. (Events can also be generated without user interaction, such as when you set a page to automatically reload every 10 seconds.) Dreamweaver supplies many common actions that you can trigger using these events. The list also specifies which browsers can generate each event. NS3 means Netscape Navigator 3.0; NS4 means Netscape Navigator 4.0; IE3 means Internet Explorer 3.0; IE4 means Internet Explorer 4.0. For information about 5.0 browsers, see the Dreamweaver Support Center . For pointers to more information about events relating to data binding and marquees in Internet Explorer, see Microsoft's Dynamic HTML reference page . Note that most events don't apply to all objects. For details on which events apply to which tags in each browser, see the files in your Dreamweaver/Configuration/Behaviors/Events folder. onAbort (NS3, NS4, IE4) is generated when the user stops the browser from completely loading an image (for example, when the user clicks the browser's Stop button while an image is loading). onAfterUpdate (IE4) is generated when a bound data element on the page has finished updating the data source. onBeforeUpdate (IE4) is generated when a bound data element on the page has been changed and is about to lose focus (and is therefore about to update the data source). onBlur (NS3, NS4, IE3, IE4) is the opposite of onFocus . The onBlur event is generated when the specified element stops being the focus of user interaction. For example, when a user clicks outside a text field after clicking in the text field, the browser generates an onBlur event for the text field. onBounce (IE4) is generated when a marquee element's contents have reached the boundary of the marquee. onChange (NS3, NS4, IE3, IE4) is generated when the user changes a value on the page, such as when the user chooses an item from a menu, or when the user changes the value of a text field and then clicks elsewhere on the page. onClick (NS3, NS4, IE3, IE4) is generated when the user clicks the specified element, such as a link, button, or image map. ( Clicking is defined as pressing and then releasing the mouse button while pointing to the element.) onDblClick (NS4, IE4) is generated when the user double-clicks the specified element. ( Double-clicking is defined as quickly pressing and releasing the mouse button while pointing to the element.) onError (NS3, NS4, IE4) is generated when a browser error occurs while a page or image is loading. onFinish (IE4) is generated when the contents of a marquee element have completed a loop. onFocus (NS3, NS4, IE3, IE4) is generated when the specified element becomes the focus of user interaction. For example, clicking in a text field of a form generates an onFocus event. onHelp (IE4) is generated when the user clicks the browser's Help button or chooses Help from a browser menu. onKeyDown (NS4, IE4) is generated as soon as the user presses any key. (The user does not have to release the key for this event to be generated.) onKeyPress (NS4, IE4) is generated when the user presses and releases any key; this event is like a combination of the onKeyDown and onKeyUp events. onKeyUp (NS4, IE4) is generated when the user releases a key after pressing it. onLoad (NS3, NS4, IE3, IE4) is generated when an image or page finishes loading. onMouseDown (NS4, IE4) is generated when the user presses the mouse button. (The user does not have to release the mouse button to generate this event.) onMouseMove (IE3, IE4) is generated when the user moves the mouse while pointing to the specified element. (That is, the pointer stays within the boundaries of the element.) onMouseOut (NS3, NS4, IE4) is generated when the pointer moves off the specified element. (The specified element is usually a link.) onMouseOver (NS3, NS4, IE3, IE4) is generated when the mouse first moves to point to the specified element. (That is, when the pointer moves from not pointing to the element to pointing to the element.) The specified element for this event is usually a link. onMouseUp (NS4, IE4) is generated when a pressed mouse button is released. onMove (NS4) is generated when a window or frame moves. onReadyStateChange (IE4) is generated when the state of the specified element changes. Possible element states include uninitialized , loading , and complete . onReset (NS3, NS4, IE3, IE4) is generated when a form is reset to its default values. onResize (NS4, IE4) is generated when the user resizes the browser window or a frame. onRowEnter (IE4) is generated when the current record pointer of the bound data source has changed. onRowExit (IE4) is generated when the current record pointer of the bound data source is about to change. onScroll (IE4) is generated when the user scrolls up or down. onSelect (NS3, NS4, IE3, IE4) is generated when the user selects text in a text field. onStart (IE4) is generated when a marquee element's contents begin a loop. onSubmit (NS3, NS4, IE3, IE4) is generated when the user submits a form. onUnload (NS3, NS4, IE3, IE4) is generated when the user leaves the page.
<url>html/12behaviors30.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 don't see any purple animation bars in the Timeline inspector, your document does not contain a timeline. See Creating a timeline animation . 2 Select an object. To attach the behavior to a frame in the timeline, click in the Behavior channel at the desired frame. 3 Open the Behavior inspector. 4 Click the plus (+) button and choose Timeline > Go To Timeline Frame from the Actions pop-up menu. 5 Choose a timeline from the Timeline pop-up menu. 6 Enter a frame number in the Go to Frame field. 7 If you are adding this action in the Behavior channel of a timeline and want a portion of the timeline to loop, enter the number of times the segment should loop in the Loop field. You must leave this field blank if you are not attaching Go To Timeline Frame to a frame in a timeline. 8 Click OK. 9 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors31.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 Autoplay 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 don't see any purple animation bars in the Timeline inspector, your document does not contain a timeline. See Creating a timeline animation . 2 Select an object and open the Behavior inspector. 3 Click the plus (+) button and choose Play Timeline or Stop Timeline from the Actions pop-up menu. 4 Select the timeline you want to play or stop, or choose to stop all timelines, from the pop-up menu. 5 Click OK. 6 Check that the default event is the one you want. If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.
<url>html/12behaviors32.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 Choose Validate Form from the Actions pop-up menu. 5 Do one of the following: If you are validating individual fields, select the same field that you have selected in the Document window from the Named Fields list. If you are validating multiple fields, select a text field from the Named Fields list. 6 Select the Required option if the field must contain some data. 7 Choose from one of the following Accept options: Use Anything if the field is required but need not contain a particular kind of data. (If the Required option is not selected, the Anything option is meaningless —that is, it is the same as if the Validate Form action were not attached to the field.) Use E-mail address to check that the field contains an @ symbol. Use Number to check that the field contains only numerals. Use Number From to check that the field contains a number in a specific range. 8 If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate. 9 Click OK. If you are validating multiple fields when the user submits the form, the onSubmit event automatically appears in the Events pop-up menu. 10 If you are validating individual fields, check that the default event is onBlur or onChange . If it isn't, select onBlur or onChange from the pop-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 occurs whether or not the user has typed in the field, and onChange occurs only if the user changed the contents of the field in any way. The onBlur event is preferred when you have specified that the field is required.
<url>html/12behaviors33.html</url>
<title>Updating a behavior</title> Updating a behavior If your pages contain behaviors created with an older version of Dreamweaver, those behaviors are not updated automatically when you open the pages in the current version of Dreamweaver. However, when you update one occurrence of a behavior in a page, all other occurrences of that behavior in that page are also updated. To update a behavior in a page: 1 Select an element that has the behavior attached to it. 2 Open the Behavior inspector. 3 Double-click the behavior. 4 Click OK in the behavior's dialog box. All occurrences of that behavior in that page are updated.
<url>html/12behaviors4.html</url>
<title>Attaching a behavior</title> Attaching a behavior You can attach behaviors to the entire document (that is, to the BODY tag) or to links, images, form elements, or any of several other HTML elements. The browser determines which elements can accept behaviors. 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 in which they're listed in the Actions column of the Behavior inspector. 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 Behaviors button on the Launcher. The HTML tag of the selected object appears in the title bar of the Behavior inspector. 3 Click the plus (+) button and choose an action from the Actions pop-up menu. Actions that are dimmed in the menu can't be chosen, because they won't work in the current document. For example, the Play Timeline action is dimmed if the document has no timelines. If no events are available for the selected object, all actions are dimmed. A dialog box appears, displaying parameters and instructions for the action. 4 Enter parameters for the action, and click OK. All actions provided in Dreamweaver work in 4.0 and later browsers. Some actions do not work in older browsers. See Using the behavior actions that ship with Dreamweaver . 5 The default event to trigger the action appears in the Events column. If this is not the trigger event you want, choose another event from the Events pop-up menu. Different events appear in the Events pop-up menu depending on the selected object and on the browsers specified in the Events For pop-up menu. Events may be dimmed if the relevant objects do not yet exist on the page or if the selected object cannot receive events. If the expected events don't appear, make sure 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, some events (such as onMouseOver ) 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 dummy link. The dummy link is represented by a number sign (#) in the Property inspector's Link box. You can change the link value if you want to turn it into a real link to another page, but if you delete the number sign without replacing it with another link, you will remove the behavior.
<url>html/12behaviors5.html</url>
<title>Attaching a behavior to a timeline</title> Attaching a behavior to a timeline Place behaviors in timelines to trigger them at a certain frame in the timeline. (For information on creating a timeline, see About timelines .) 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. Only one kind of event can trigger an action in a timeline: the animation 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/12behaviors6.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 in which they will execute. 3 Choose from the following options: To edit an action, double-click the behavior name, or select it and press Enter (Windows) or Return (Macintosh); then change parameters in the dialog box and click OK. To change the order of actions for a given event, select the behavior and click the up or down arrow button. To delete a behavior, select it and click the minus (-) button or press Delete.
<url>html/12behaviors7.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. For more information, see Extending Dreamweaver.
<url>html/12behaviors8.html</url>
<title>Downloading and installing third-party behaviors</title> Downloading and installing third-party behaviors One of the most useful features of Dreamweaver is its extensibility—that is, it offers users who are proficient 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 Dreamweaver Web site. To download these extensibility files, open the Behavior inspector and choose Get More Behaviors from the Actions (+) pop-up menu. To install a downloaded third-party behavior in your copy of Dreamweaver: 1 Extract the behavior files from the downloaded archive with a file-decompression tool. For example, WinZip (Windows) or ZipIt (Macintosh) can open the zip archives that are available at the Online Resource Center. 2 Drag the extracted files to the Configuration/Behaviors/Actions folder in the Dreamweaver application folder. 3 Relaunch Dreamweaver.
<url>html/12behaviors9.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 and in Internet Explorer 5. (Netscape Navigator 5 has not yet been released at the time of this writing.) However, some actions do not work in older browsers. Refer to the following table for details on how actions work in specific pre-4.0 browsers. For an explanation of what each action does and how to choose options for it, click the action name. Macintosh Windows Action Netscape Navigator 3.0 Internet Explorer 3.0x Netscape Navigator 3.0 Internet Explorer 3.01 Call JavaScript OK Fails without error OK OK Change Property OK Fails without error OK OK Check Browser OK Fails without error OK OK Check Plugin OK Fails without error OK OK Control Shockwave or Flash OK Fails without error OK Fails without error Drag Layer Fails without error Fails without error Fails without error Fails without error Go To URL OK Fails without error OK OK Jump Menu OK Fails without error OK Fails without error Jump Menu Go OK Fails without error OK Fails without error Open Browser Window OK Fails without error OK OK Play Sound OK Fails without error OK Fails without error Popup Message OK Fails without error OK OK Preload Images OK Fails without error OK Fails without error Set Nav Bar Image OK Fails without error OK Fails without error Set Text of Frame OK Fails without error OK OK Set Text of Layer Fails without error Fails without error Fails without error Fails without error Set Text of Status Bar OK Fails without error OK OK Set Text of Text Field OK Fails without error OK OK Show-Hide Layers Fails without error Fails without error Fails without error Fails without error Swap Image OK Fails without error OK Fails without error Swap Image Restore OK Fails without error OK Fails without error Go To Timeline Frame Play Timeline and Stop Timeline Image source animation and invoking behaviors works, but layer animation fails without error Fails without error Image source animation and invoking behaviors works, but layer animation fails without error Fails without error Validate Form OK Fails without error OK OK
<url>html/13editingHTML1.html</url>
<title>Editing HTML overview</title> Editing HTML overview Dreamweaver provides graphical interfaces for creating and editing HTML files. However, sometimes you may need to have direct access to the underlying HTML code. Dreamweaver provides such access in the form of the HTML Source inspector (see HTML Source inspector ) and the Quick Tag Editor (see Editing an HTML tag in the Document window ). Dreamweaver also provides useful ways of handling HTML files that were created outside of Dreamweaver. With Roundtrip HTML (see About Roundtrip HTML ), you can be sure that Dreamweaver won't change your handcrafted HTML code unless you want it to; you can set a variety of options for what Dreamweaver rewrites and what it doesn't. (See Setting HTML Format Preferences .) Conversely, Dreamweaver can clean up cluttered and unnecessary HTML at your preference, using the Clean Up HTML and Clean Up Word HTML features—see Cleaning Up HTML and Cleaning up Microsoft Word HTML .
<url>html/13editingHTML10.html</url>
<title>Setting the Quick Tag Editor preferences</title> Setting the Quick Tag Editor preferences Quick Tag Editor preferences let you control whether or not the edits you make in the Quick Tag Editor are automatically updated in the document window. You can also adjust the controls for the drop-down hints menu. Use the Edit > Preferences menu to access the Quick Tag Editor preferences panel. Apply Changes Immediately While Editing Controls whether your Quick Tag Editor changes are automatically updated in your document as you move between attributes in Edit Tag mode. If you turn off this option, you must press Enter to apply your changes to the document. (This option is ignored in Insert HTML mode and in Wrap Tag mode; in those modes, you must always press Enter to apply your changes to the document.) Enable Tag Hints Controls whether the hints list displays while you're typing in the Quick Tag Editor. You can also adjust the length of the delay before the drop-down hints menu displays for the current attribute or tag.
<url>html/13editingHTML11.html</url>
<title>Setting HTML Format Preferences</title> Setting HTML Format Preferences You can set the following preferences for formatting HTML source code in Dreamweaver: HTML Rewriting preferences determine what changes, if any, Dreamweaver makes to your HTML source code when you open an HTML document. See HTML Rewriting preferences . HTML Format preferences determine common HTML formatting options, such as line length and indentation. See HTML Format preferences . These preferences provide a user interface for changing the SourceFormat.txt file. HTML Colors preferences control how HTML tags (and the text between them) are color coded in the HTML Source inspector. See HTML Colors preferences . Fonts/Encoding preferences let you specify the font in which your HTML source code appears in the HTML Source inspector. See Fonts/Encoding preferences . Finally, the SourceFormat.txt file (in the Dreamweaver/Configuration folder) provides precise specifications for formatting HTML. Editing this file in a text editor gives you the greatest degree of control over exactly how Dreamweaver writes HTML; you can change certain tag-specific options in this file that you can't change using the HTML Format preferences. However, it is recommended that only advanced Dreamweaver users and developers attempt to edit this file, as the potential for causing serious errors to your Dreamweaver program is great. See Editing the HTML source formatting profile .
<url>html/13editingHTML12.html</url>
<title>HTML Rewriting preferences</title> HTML Rewriting preferences The HTML Rewriting preferences determine what Dreamweaver does while opening HTML documents. These preferences have no effect when you edit HTML in the HTML Source inspector. If you turn off these rewriting options, Dreamweaver displays invalid markup items in the Document window for HTML that it would have rewritten. If you are importing an HTML document from Word, you can use the Clean Up Word HTML command to strip out any unnecessary HTML code. See Cleaning up Microsoft Word HTML for more information 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. Never Rewrite HTML: In Files with Extensions Allows you to prevent Dreamweaver from rewriting HTML in files with the given file name extensions. This option is particularly useful for files of types that contain third-party tags (such as ASP tags). For more information, see Avoiding rewriting third-party tags . The two Special Characters options allow you control over whether Dreamweaver encodes certain characters in certain contexts. In general, it's best to leave these options selected unless your files contain certain third-party tags that use the characters in question. For more information on these options, see Avoiding rewriting third-party tags .
<url>html/13editingHTML13.html</url>
<title>HTML Format preferences</title> HTML Format preferences Use the following HTML Format preferences to control HTML formatting such as indentation, line length, and the case of tag and attribute names as you create documents. For information on additional HTML formatting controls, see Editing the HTML source formatting profile . Note that the following options (except for Override Case Of) affect only new documents and new additions (in the Document window) to existing documents. That is, when you open a previously created HTML document, these formatting options are not applied to it; to reformat existing HTML documents, use the Apply Source Formatting command. See Formatting the HTML source code in existing documents . Note: These options apply only to changes you make in the Document window; they do not apply when you edit HTML directly in the HTML Source inspector. Indent Turns on indentation of all tags marked INDENT in the SourceFormat.txt file. 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 selected 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 selected 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. Automatic Wrapping Wraps lines (with a hard return) once they reach the specified column width. (Note that Dreamweaver inserts hard returns only in places where they don't change the appearance of the document in browsers, so some lines may remain longer than the Automatic Wrapping option specifies.) By contrast, the Wrap checkbox in the HTML Source inspector adds a soft return for lines that extend beyond the width of the window. Line Breaks Specifies the type of remote server (Windows, Macintosh, or UNIX) that hosts your remote site. Choosing the correct type of line break characters ensures that your HTML source code appears correctly when viewed on the remote server. (Note that for FTP, this setting applies only to binary transfer mode; Dreamweaver's ASCII transfer mode ignores this setting. If you download files using ASCII mode, Dreamweaver sets line breaks based on the operating system of your computer; if you upload files using ASCII mode, the line breaks are all set to CR LF.) This setting is also useful when you are working with an external text editor that recognizes only certain kinds of line breaks. For example, use CR LF (Windows) if Notepad is your external editor, and CR (Macintosh) if SimpleText is your external editor. Case for Tags and Case for Attributes Control the capitalization of tag and attribute names. These options are applied to tags and attributes that you insert or edit in the Document window, but they are not applied to the tags and attributes that you enter directly in the HTML Source inspector, or to the tags and attributes in a document when you open it (unless you also select one or both of the Override Case Of options). Override Case Of: Tags and Attributes Specify whether to enforce your specified case options at all times, including when you open an existing HTML document. When you select one of these options, all tags or attributes in open documents are immediately converted to the specified case, as are all tags or attributes in each document you open from then on (until you deselect this option again). Tags or attributes you type in the HTML Source inspector and the Quick Tag Editor are also converted to the specified case, as are tags or attributes that you insert using the Object palette. For example, if you want tag names always to be converted to lowercase, specify lowercase in Case for Tags, and then select the Override Case Of: Tags option. Then when you open a document that contains uppercase tag names, Dreamweaver converts them all to lowercase. 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/13editingHTML14.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 Source inspector. Background Specifies the background color of the HTML Source inspector. This color appears only when you click or type in the HTML Source inspector; when focus is not in the HTML Source 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 Allows you to override the Tag Default and Text color settings by specifying colors 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 hexadecimal value. Click 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, select Apply Color to Tag Contents.
<url>html/13editingHTML15.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> are considered empty tags, but the <b> tag in <b>some text</b> is 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/13editingHTML16.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 the SourceFormat.txt file apply only to any subsequent new documents that you create with Dreamweaver. To apply these formatting options to existing HTML documents, use the Apply Source Formatting command. To apply HTML source formatting options to an existing document: 1 Choose File > Open to open an existing HTML file in the Document window. 2 Choose Commands > Apply Source Formatting.
<url>html/13editingHTML17.html</url>
<title>Cleaning up Microsoft Word HTML</title> Cleaning up Microsoft Word HTML In Dreamweaver, you can open or import documents saved by Microsoft Word as HTML files, and then you can use the Clean Up Word HTML dialog box to remove the extraneous HTML code generated by Word. The code that Dreamweaver removes is primarily used by Word to format and display documents in Word and is not needed to display the HTML file. Retain a copy of your original Word (.doc) file as a backup, because you may not be able to reopen the HTML document in Word once you've applied the Clean Up Word HTML feature. The Clean Up Word HTML command is available for documents saved as HTML files by Word 97 or later. To use the Clean Up Word HTML feature: 1 In Microsoft Word, save your document as an HTML file. 2 Open the HTML document in Dreamweaver using either of the following methods: Choose File > Import > Import Word HTML and select a file to open. Dreamweaver opens the file and then automatically opens the Clean Up Word HTML dialog box. Choose File > Open and select a file to open. An HTML Corrections log file is automatically generated. This is not part of the Clean Up Word HTML feature. Click Continue to exit the dialog box. Then, in Dreamweaver, choose Commands >Clean Up Word HTML. 3 With either of these methods, there may be a slight delay while Dreamweaver attempts to determine which version of Word was used to save the file. If Dreamweaver is unable to determine this, select the correct version using the pop-up menu. 4 Choose which options the Clean Up Word HTML feature should use. The Basic tab displays the following options: Remove all Word Specific Markup removes all Word-specific HTML, including XML from <html> tags, Word custom meta data and link tags in the head of the document, Word XML markup, conditional tags and their contents, and empty paragraphs and margins from styles. You have the option of selecting each of these options individually using the Detailed tab. Clean up CSS removes all Word-specific CSS, including Inline CSS styles when possible (where the parent style has the same style properties), style attributes beginning with "mso," non-CSS style declarations, CSS style attributes from tables, and all unused style definitions from the head. This option can be further customized by clicking on the Detailed tab. Clean up <font> Tags removes HTML tags, converting the default body text to size 2 HTML. Fix Invalidly Nested Tags removes the font markup tags inserted by Word outside of the paragraph and heading (block level) tags. Set Background Color allows you to enter a hex value to set the background color of your document. If you do not set a background color, your Word HTML document will have a gray background. The default hex value set by Dreamweaver is white. Apply Source Formatting applies the source formatting options you specify in HTML Format preferences and Source Format.profile to the document. 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. 5 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. The preferences you entered are automatically saved as the default Clean Up Word HTML settings.
<url>html/13editingHTML18.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 the HTML Source 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 Source 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 About Roundtrip HTML .
<url>html/13editingHTML19.html</url>
<title>Using external HTML editors</title> Using external HTML editors You may want to use a text editor to hand-code large amounts of HTML, JavaScript, or VBScript. You can use any external text editor with Dreamweaver, including Notepad (bundled with Windows 95 and NT) or SimpleText (bundled with the Macintosh), BBEdit, HomeSite, vi, emacs, and TextPad. See Using an external text editor with Dreamweaver and Using BBEdit with Dreamweaver (Macintosh only) .
<url>html/13editingHTML2.html</url>
<title>About Roundtrip HTML</title> About Roundtrip HTML Roundtrip HTML is a unique feature of Dreamweaver that lets you move your documents back and forth between a text-based HTML editor and Dreamweaver with little or no effect on the content and structure of the document's original HTML source code. Dreamweaver even maintains and renders some HTML that is technically invalid (such as a FONT tag wrapped around multiple P tags) if such code is supported by browsers. However, the HTML source code that Dreamweaver generates as you edit graphically is always technically valid. The following are key features of Roundtrip HTML: By default, Dreamweaver rewrites overlapping tags, closes open tags that aren't allowed to remain open, and removes extra closing tags when you switch back to Dreamweaver from an external HTML editor or when you open an existing HTML document. If you don't want Dreamweaver to rewrite any 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. When you select an invalid tag, Dreamweaver displays information in the Property inspector about how to correct the error. If you turn off HTML rewriting, any HTML that Dreamweaver would have rewritten is displayed as invalid. Dreamweaver does not change tags that it does not recognize—including XML tags—because it has no criteria by which to judge them valid or invalid. If an unrecognizable tag overlaps a valid one, Dreamweaver may mark it as erroneous but does not rewrite the code. For example, the custom tag in the following would be marked erroneous: <MyNewTag><b>text</MyNewTag></b> . Dreamweaver does not alter ColdFusion 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 ColdFusion and Active Server files in Dreamweaver . Dreamweaver lets you launch a text-based HTML editor to edit the current document. Dreamweaver is integrated with HomeSite (Windows) and BBEdit (Macintosh). See Using external HTML editors .
<url>html/13editingHTML20.html</url>
<title>Using an external text editor with Dreamweaver</title> Using an external text editor with Dreamweaver You can launch your primary external text editor from Dreamweaver to edit the source HTML for the current document and then switch back to Dreamweaver to continue editing graphically. Dreamweaver detects any changes that have been saved to the document externally and prompts you to reload the document upon returning. If you use BBEdit on the Macintosh, follow the steps in Using BBEdit with Dreamweaver (Macintosh only) instead of the following steps. To set up external editors for file types other than text and HTML, see Launching an external media editor . To choose an external HTML editor: 1 Choose Edit > Preferences. 2 Select External Editors from the Category list on the left. 3 (Macintosh only) To use an HTML editor other than BBEdit, deselect the Enable BBEdit Integration option. To use BBEdit, leave Enable BBEdit Integration selected and skip the rest of these steps. 4 Click the Browse button next to the HTML Editor box to choose a text editor. 5 In the Reload Modified Files option, specify what you want Dreamweaver to do when it detects that changes have been made externally to a document that is open in Dreamweaver. 6 In the Save on Launch option, specify whether Dreamweaver should always save the current document before launching the editor, never save the document, or prompt you to ask whether to save or not each time you launch the external editor. To launch the external HTML editor: Choose Edit > Launch External Editor or click External Editor in the upper left corner of the HTML Source inspector.
<url>html/13editingHTML21.html</url>
<title>Using BBEdit with Dreamweaver (Macintosh only)</title> Using BBEdit with Dreamweaver (Macintosh only) When BBEdit integration is turned on, once you have a document open in both BBEdit and Dreamweaver, switching from one application to the other automatically updates the document with the latest changes. In addition, both programs track the current selection; for example, you can make a selection in Dreamweaver and then switch to BBEdit, where the same element will be selected. You can disable BBEdit integration if you prefer working with an older version of BBEdit or a different HTML text editor. Selections are not tracked if BBEdit integration is turned off. To use BBEdit with Dreamweaver: 1 Do one of the following: Choose Edit > Launch External Editor. Click External Editor in the top left corner of the HTML Source inspector. 2 Edit the document in BBEdit. 3 Click the Dreamweaver button on the HTML Tools palette in BBEdit to return to Dreamweaver. To disable BBEdit integration: 1 Choose Edit > Preferences. 2 Choose External Editors from the Category list on the left. 3 Deselect Enable BBEdit Integration and click OK.
<url>html/13editingHTML22.html</url>
<title>Editing ColdFusion and Active Server files in Dreamweaver</title> Editing ColdFusion and Active Server files in Dreamweaver Dreamweaver displays icons to identify blocks of ColdFusion Markup Language (CFML) or Active Server Page (ASP) code in the Document window whenever possible. Note: By default, Dreamweaver never rewrites HTML found in ColdFusion and Active Server files. 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 an empty tag (that is, if it has no closing tag), the Content button is disabled. If you don't see markers or highlighted text where you know ASP or CFML code exists, first make sure that View > Invisible Elements is enabled. If that option is selected and the icons are still not visible, then Dreamweaver can't display the code as CFML or ASP. This can happen, for example, when conditionals are inserted into HTML tags, as in the following ASP code: <input type="checkbox" name="month" value="October" <% if month="October" then %>checked<% end if %> > To edit CFML or ASP code when a marker or highlighted text does not appear: 1 If you can select the tag or object that contains the code, use the Quick Tag Editor to edit the code. See Editing an HTML tag in the Document window . Otherwise, follow these steps: 2 In the Document window, position the insertion point near where you know the CFML or ASP code exists. 3 Choose Window > HTML Source to open the HTML Source inspector. 4 Click the title bar of the HTML Source inspector to shift keyboard focus to that inspector. Do not click in the middle of the inspector or you will move the insertion point away from the CFML or ASP code you want to edit. 5 Edit the code directly in the HTML Source inspector. 6 Press F10 to close the HTML Source inspector and return to the Document window. For information about processing CFML or ASP code and viewing the results in the Document window, see Customizing the interpretation and appearance of third-party tags .
<url>html/13editingHTML23.html</url>
<title>Inserting scripts</title> Inserting scripts You can enter JavaScript and VBScript in the Document window without having to use the HTML Source 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 the 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/13editingHTML24.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/13editingHTML25.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. If you want to add more information about any file in your site, you can also use Design Notes. For more information, see About Design Notes . See also Invisible Elements preferences . To insert a comment: 1 Place the insertion point where you want the comment. 2 Click the Comment button in the Invisibles panel of 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/13editingHTML3.html</url>
<title>HTML Source inspector</title> HTML Source inspector The HTML Source inspector displays the HTML source code for the current document. Tags are color coded to preference settings. See HTML Colors preferences . As you add or change content in the Document window, Dreamweaver immediately displays the changes in the HTML Source inspector. This makes the HTML Source 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 Source inspector appear in the Document window only when you click away from the HTML Source inspector. Dreamweaver never rewrites HTML that you type directly in the HTML Source inspector; if you enter invalid HTML here, Dreamweaver highlights the tags as invalid when you click in the Document window. To open the HTML Source inspector, do one of the following: Choose Window > HTML Source. Click the HTML Source inspector icon in the Launcher or in the Mini-Launcher (in the lower right corner of the Document window). Press F10. In the HTML Source inspector, you can turn line wrap on or off by selecting or deselecting the Wrap option. (Note that turning on line wrap does not insert line breaks into the HTML code; it simply displays the lines as wrapped for ease of viewing.) You can also choose whether or not to display line numbers by selecting or deselecting the Line Numbers option. To launch an external HTML editor, click the External Editor button. If you haven't chosen an external HTML editor, you must first choose Edit > Preferences, choose the External Editors category, and pick an external editor. For more information, see Using external HTML editors . To toggle between the Document window and the HTML Source inspector: Press Control+Tab (Windows and Macintosh).
<url>html/13editingHTML4.html</url>
<title>Editing an HTML tag in the Document window</title> Editing an HTML tag in the Document window Use the Quick Tag Editor to quickly inspect and edit the HTML source of a single tag from within the Document window, without having to switch to the HTML Source inspector and back again. The easiest way to open the Quick Tag editor is to press Control+T (Windows) or Command+T (Macintosh). The Quick Tag Editor has these three modes: Insert HTML, used to insert new HTML code Edit Tag, used to edit an existing tag Wrap Tag, used to wrap a new tag around the current selection The current selection in the Document window determines which mode the Quick Tag Editor opens in. Note: When the Quick Tag Editor is open, you can switch from one mode to another using the same keyboard shortcut you used to open the Quick Tag Editor. In all three modes, the basic operation of the Quick Tag Editor is the same: you open the editor, enter or edit tags and attributes, and then close the editor. The difference among the modes lies in what Dreamweaver does with the tags when you've edited them. For details about the modes, see About Insert HTML mode , About Edit Tag mode , and About Wrap Tag mode . Note: Whenever the Quick Tag Editor is showing, in any mode, you can drag the editor's handle (where the mode name appears) to move the editor around. To perform more extensive HTML editing, use the HTML Source inspector. To enter or edit tags and attributes in the Quick Tag Editor: 1 Do one of the following: Select an object, some text, or a tag. Click in the Document window to place the insertion point without selecting anything. 2 Press Control+T (Windows) or Command+T (Macintosh), or click the Quick Tag Editor button in the Property inspector. The Quick Tag Editor opens in whichever mode is appropriate, depending on the current selection. In Insert HTML mode or Wrap Tag mode, you may now enter an HTML tag; in Edit Tag mode, you may enter new attributes, edit existing attributes, or edit the tag's name. 3 To edit existing attribute values or names (or to edit the tag name), press Tab to move forward from one item to the next, until the attribute (or tag) that you want to edit is selected. Press Shift+Tab to move backward to the previous attribute name, attribute value, or tag name. 4 If you pause for a couple of seconds while editing an attribute name, a drop-down hints menu appears, listing all the valid attributes for the tag you're editing. (If Dreamweaver doesn't recognize the tag you're editing, the hints menu contains all the attributes that Dreamweaver recognizes for any tag.) The hints menu does not appear if you deselected the Enable Tag Hints option in the Quick Tag Editor panel of the Preferences dialog box. Control the hints menu in the following ways: As you begin to type an attribute name, the hints menu scrolls to highlight the first attribute name that starts with the letters you've typed. To move the highlight up and down in the menu, use the Up and Down Arrow keys or the scroll bar. To choose the highlighted attribute name, press Enter (Windows) or Return (Macintosh); the highlighted attribute name is entered into the Quick Tag Editor. Alternatively, double-click an attribute name in the menu to enter it. To dismiss the hints menu without selecting an entry, press Esc or simply continue typing. When you pause while entering or editing a tag name, a similar drop-down hints menu appears, listing tag names instead of attribute names. 5 In Edit Tag mode, if you make a change and then press Tab or Shift+Tab, the change you made is applied immediately. To prevent changes from being made until you exit the Quick Tag Editor, deselect the Apply Changes Immediately While Editing option in the Quick Tag Editor panel of the Preferences dialog box. Note: When Apply Changes Immediately While Editing is deselected, multiple changes that you apply at once appear as a single step in the History palette and are undone with a single Undo. 6 To add a new attribute to a tag, use Tab, the arrow keys, and Spacebar to move the insertion point to where you want to add an attribute. Begin to type a valid attribute name for the tag. The drop-down hints menu appears when you pause in typing, just as it does for edited attributes. 7 Continue to edit and add attribute names and values as desired. 8 When you're done editing the tag, exit the Quick Tag Editor in either of these ways: To exit and discard all changes that have not yet been applied, press Esc. (If you were using Edit Tag mode with the Apply Changes Immediately While Editing option selected, all changes that have already been applied remain in place.) To exit and apply all your changes, press Enter (Windows) or Return (Macintosh) or click outside the Quick Tag Editor. 9 If you use any invalid HTML in the Quick Tag Editor, Dreamweaver attempts to correct it for you by inserting closing quotation marks and closing angle brackets where needed. To select the current tag's parent (containing) tag: Do one of the following: Press Control+Shift+< (Windows) or Command+Shift+< (Macintosh). Choose Edit > Select Parent Tag. To select the first child tag contained in the current tag: Do one of the following: Press Control+Shift+> (Windows) or Command+Shift+> (Macintosh). Choose Edit > Select Child. Note: If the current tag contains no other tags, Select Child selects the contents of the current tag. To cycle through the Quick Tag Editor's modes: With the Quick Tag Editor active, press Control+T (Windows) or Command+T (Macintosh). The Quick Tag Editor changes modes each time you use the keyboard shortcut, cycling among Insert HTML mode, Edit Tag mode, and Wrap Tag mode.
<url>html/13editingHTML5.html</url>
<title>About Insert HTML mode</title> About Insert HTML mode The Quick Tag Editor starts in Insert HTML mode when you open it without anything selected. It opens showing a pair of angle brackets with the insertion point between them. You can enter arbitrary HTML strings in the editor in this mode, including multiple tags and text or other content between tags. When you close the editor, the HTML you've entered is inserted at the insertion point; if you leave tags unclosed, the corresponding closing tags are added automatically. To switch from Insert HTML mode to Edit Tag mode, use the Control+T (Windows) or Command+T (Macintosh) keyboard shortcut again. See About Edit Tag mode . To switch to Wrap Tag mode from Insert HTML mode, use the keyboard shortcut twice. See About Wrap Tag mode .
<url>html/13editingHTML6.html</url>
<title>About Edit Tag mode</title> About Edit Tag mode The Quick Tag Editor starts in Edit Tag mode when the current selection consists of a complete tag (an opening tag, plus a corresponding closing tag if applicable, and the tag's contents, if any). For example, if the selection is an image, or if it's a FONT tag and the corresponding /FONT tag and all the text in between, the Quick Tag Editor starts in Edit Tag mode. The easiest way to ensure that the current selection starts and ends with matched tags is to select a tag in the tag selector at the bottom left of the Document window. The Quick Tag Editor also starts in Edit Tag mode when the current selection includes an unmatched opening or closing tag. In this case, the selection is expanded to include the current selection's parent tag and its contents. For example, if the current paragraph consists of the HTML <p>They were reading <cite>A Tale of Two Cities</cite> in class.</p> , and the current selection is reading <cite>A Tale , with no closing </cite> tag, the Quick Tag Editor starts in Edit Tag mode with the entire paragraph selected. In Edit Tag mode, you can edit only a single opening tag. If you move the insertion point past the end of the tag and enter more than one tag, an error message appears and everything you enter is ignored. If Apply Changes Immediately While Editing is selected in the Quick Tag Editor panel of the Preferences dialog box, then every time you use Tab or Shift+Tab to move from one attribute to another, the attribute you changed is updated in the document. If that option is deselected, you must press Enter (Windows) or Return (Macintosh) to apply the changes you've made. To switch from Edit Tag mode to Wrap Tag mode, use the Control+T (Windows) or Command+T (Macintosh) keyboard shortcut again. See About Wrap Tag mode . To switch from Edit Tag mode to Insert HTML mode, use the keyboard shortcut twice. See About Insert HTML mode .
<url>html/13editingHTML7.html</url>
<title>About Wrap Tag mode</title> About Wrap Tag mode When the current selection consists of something other than a complete tag (an opening tag, plus a corresponding closing tag if applicable, and the tag's contents), the Quick Tag Editor usually starts in Wrap Tag mode. For example, if the current selection is text with no special formatting, the Quick Tag Editor opens in Wrap Tag mode. There is one exception to that rule: when the current selection includes an unmatched opening or closing tag, the Quick Tag Editor starts in Edit Tag mode instead of in Wrap Tag mode, and expands the selection to the current selection's parent tag and its contents. In Wrap Tag mode, you can enter only a single opening tag. If you enter more than one tag, an error message appears and everything you enter is ignored. When you close the editor, the tag you've entered is inserted at the start of the current selection, and a matching closing tag is inserted at the end of the current selection. To switch from Wrap Tag mode to Insert HTML mode, use the Control+T (Windows) or Command+T (Macintosh) keyboard shortcut again. See About Insert HTML mode . To switch from Wrap Tag mode to Edit Tag mode, use the keyboard shortcut twice. See About Edit Tag mode .
<url>html/13editingHTML8.html</url>
<title>About the hints menus</title> About the hints menus The hints drop-down menus display tags and attributes from the TagAttributeList.txt file, located in your Dreamweaver/Configuration folder. You can add tags to and remove tags from this file to assist you with your HTML editing.
<url>html/13editingHTML9.html</url>
<title>Removing a tag</title> Removing a tag To remove a tag from your document (leaving its content, if any, in place), do one of the following: Select the tag in the tag selector at the bottom left of the Document window. Then choose Remove Tag from the context menu. Select anything in the Document window, or click to place the insertion point in the window. Then choose Remove Tag from the context menu. Note: Not all tags can be removed.
<url>html/14templatesLib1.html</url>
<title>Templates and libraries overview</title> Templates and libraries overview Dreamweaver templates and libraries can help you create Web pages with a consistent design. Using templates and libraries also makes it easy to maintain your Web site, since you can redesign your site and change hundreds of pages in seconds. A template is a document that you can use as the foundation for other documents. 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. Then, when you update documents that use the template, the locked (noneditable) sections of those documents are updated to match the changes to the template. Click the arrow button for an animated introduction to using templates in Dreamweaver. Dreamweaver also provides two ways to deal with recurring content so that you don't have to change it on every page of the site: library items and server-side includes. You might use these approaches for content that appears on every page of the site (such as a header or footer) or for content that appears on only a few pages but must be updated frequently (such as news headlines or sales specials). These approaches are appropriate to different kinds of sites: Library items are safe to use on every site and should always be used for sites that will be viewed locally. See About 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 whether your Web server supports server-side includes.) See Using server-side includes . Highlighting preferences In templates and files based on templates, editable regions and locked regions are highlighted in different colors. Highlighting preferences let you customize the colors used in the Document window to identify template regions and library items. For more information, see the following topics: To customize template highlight colors, see Template preferences . To specify the highlight color for library items, see Library preferences . You can also specify a highlight color for content tagged with third-party tags. See How custom tags appear in the Document window .
<url>html/14templatesLib10.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 a local 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 template name in the list. To rename a template: Click once on the name of the template to select it; then click again. When the name becomes an editable field, type a new name. When you rename a template, references to the template are not automatically updated. You must reapply the newly named template to documents that reference it. See Creating documents based on templates .
<url>html/14templatesLib11.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 then click Select. Choose File > New to 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 Dreamweaver document: Open the document. Then 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 a document already has a template applied to it. Dreamweaver compares the editable region names of the two templates, and inserts the content of the new template into the region names with a match in the old template. If any of the editable region names don't match, or if an editable region in the previous template doesn't have a corresponding region in the new template, a dialog box prompts you to delete the extraneous regions or transfer them to the new template. If there are more editable regions in the new template than in the old template, the additional regions will appear in the documents as placeholders.
<url>html/14templatesLib12.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 submenu. Use this list to select and edit the regions. To find an editable region and select it in the document: Choose Modify > Templates and select the name of the region from the list. The region is selected in the document. Start typing to replace the content of the region.
<url>html/14templatesLib13.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 the page is detached, you can edit it as if no template were applied. However, the page will no longer be updated when the template is updated. To detach a document from a template: 1 Open the document you want to detach. 2 Choose Modify > Templates > Detach From Template. The page is detached from the template and all regions become editable.
<url>html/14templatesLib14.html</url>
<title>Modifying templates and updating the site</title> Modifying templates and updating the site When you make a change to a template, 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 Attached Template. Now modify the content of the template as necessary. To modify the template's page properties, choose Modify > Page Properties. (Documents created from a template inherit the template's page properties, except for the page title.) 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 In the Look In pop-up menu, do one of the following: Choose Entire Site, and then select the site name. This updates all pages in the selected site to their corresponding templates. Choose Files That Use, and then select the template name. This updates all pages in the current site that use the selected template. 3 Make sure Templates is selected in the Update option. 4 Click Start.
<url>html/14templatesLib15.html</url>
<title>Importing and exporting XML content</title> Importing and exporting XML content If you use XML in your Web pages, use the XML import and export features to work with your XML content. You can export the editable regions of a document that uses a template so that you can work with that content outside Dreamweaver, or you can merge the content of an XML document with an existing Dreamweaver template. For more information on XML, see About XML . To export a document's editable regions as XML: 1 Choose File > Open, and 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, choose a tag notation and click OK. See Using XML tag notations . 4 In the dialog box that appears, enter a name for the XML file and click Save. When the 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 the 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/14templatesLib16.html</url>
<title>About XML</title> About XML XML is the Extensible Markup Language, a markup language for structured documents. XML is derived from SGML, the Standard Generalized Markup Language; like SGML, XML is a language for defining tags and the relationships among them. It's like a generalization of HTML that lets you define your own tags. Tags in XML look similar to HTML tags: they consist of a tag name plus optional attributes, surrounded by angle brackets. As with HTML, an opening tag and a closing tag (in which the tag name is preceded by a slash) are used to mark the content between the tags. One syntactical difference is that in XML, an empty tag (one that contains no content, such as <img> ) must end with a slash just before the closing angle bracket. For example, an <img> tag in XML might look like this: <img src="test.png" /> For more information about XML, see http://www.xml.com.
<url>html/14templatesLib17.html</url>
<title>Using XML tag notations</title> Using XML tag notations Dreamweaver lets you export XML content using either of two tag notations: editable region name tags or standard Dreamweaver XML tags. The 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 XML 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/14templatesLib18.html</url>
<title>About library items</title> About library items Libraries contain page elements such as images, text, and other objects that you want to reuse or update frequently throughout your Web site. These elements are called library items. When you place a library item in a document, Dreamweaver inserts a copy of the HTML source code 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 submenu. 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/14templatesLib19.html</url>
<title>Creating a library item</title> Creating a library item When you create a library item, you select a portion of a document's BODY section, and 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, because the code for these elements is part of the HEAD section. 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. In the Library palette, click the context menu button, then select Create Library Item. Click the New Library Item icon in the lower right area of the Library palette. Choose Modify > Library > Add Object to Library. 3 Enter a name for the new library item.
<url>html/14templatesLib2.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. If this folder does not already exist, Dreamweaver creates it when you save a new template. To save an existing document as a template: 1 Choose File > Open and select a 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, do one of the following: Click the context menu button, then select New Template. Click the New Template icon in the lower right area of the Template palette. In the Template palette list, right-click (Windows) or Control-click (Macintosh) then in the context menu, select New Template. 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: 1 Choose Window > Templates. 2 In the Template palette, double-click the name of the template. 3 Edit the template in the Document window. If you want to store additional information about a template, you can create a Design Notes file for the template. The documents based on the template do not inherit the template's Design Notes. (For more information on Design Notes, see About Design Notes .)
<url>html/14templatesLib20.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 the highlight color for library items: 1 Choose Edit > Preferences and 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/14templatesLib21.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 insertion point 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 Insert. To insert the item's content without creating an instance of the item in the document, press Control (Windows) or Option (Macintosh) while dragging an item out of the Library palette.
<url>html/14templatesLib22.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, rename items to break their connection with documents or templates, and delete items from a library. Note: The CSS Style palette, Timeline inspector, and Behavior inspector are unavailable when you are editing a library item, because library items can contain only BODY elements. Timeline and CSS style sheet code is part of the HEAD section, and the Behavior inspector is unavailable because it inserts code into the HEAD as well as the BODY section . For instructions on editing behaviors, 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 the Open icon (the folder icon) at the bottom of the palette, 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 Update to update all documents in the local site with the edited library item. Choose Don't Update to avoid changing any documents until you use Modify > Library > Update Current Page or Update Pages. To update pages that use an edited 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 library item. 3 Click Start. The content of the library item is replaced in the specified documents. 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. 4 When you click OK, Dreamweaver asks if you want to update files that use the item. If you click Yes, all documents that previously used the item will update their references to the new name. If you click No, documents that have references to the item under its old name will not automatically update their references to the new name. To delete a library item from a library: 1 Choose Window > Library or click the Library button on the Launcher. 2 Select an item in the Library palette. 3 Click the trash icon or press Delete. Deleting a library item removes the item from the library, but doesn't change the content of any documents.
<url>html/14templatesLib23.html</url>
<title>Making library items editable</title> Making library items editable If you've added a library item to your document and you want to edit the item specifically for that page, you must break the link between the item in the document and the library. Once you've made an instance of a library item editable, that instance cannot be updated from the library. To make a library item editable: 1 Select a library item in the current document. 2 Then do one of the following: Click Detach from Original in the Property inspector Choose Detach from Original in the context menu.
<url>html/14templatesLib24.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 occurs) 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 section 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 Detach from Original in the Property inspector. 3 Select the element that has the behavior attached to it. 4 Choose Window > Behaviors to open the Behavior inspector, and then double-click the action you want to change. 5 In the dialog box that appears, make the necessary changes and click OK. 6 Choose Window > Library to open the Library 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 exactly the same elements that were in the original library item. 9 In the Library palette, use the context menu to select Create Library Item, and give the new item the same name as the one you deleted in step 7. Be sure to use exactly the same spelling and capitalization. 10 To update the library item in your site pages, do one of the following Choose Modify > Library > Update Pages. Use the context menu, then select Update Pages. 11 In the Update Pages dialog box, in the Look in pop-up menu, select Files That Use. The name of the library item you just created should appear in the adjacent pop-up menu. 12 Select Update Library Items, and then click Start. 13 Click Close to exit the Update Pages dialog box.
<url>html/14templatesLib25.html</url>
<title>Library item properties</title> Library item properties Use library item properties to specify the source file of an item, to make it editable, or to re-create it after editing. To open the Property inspector, double-click a library item. See also About library items . Src Displays the file name and location of the source file for the library item. Open Opens the source file for the library item. Detach from Original Breaks the link between the selected library item and its source file. When an item is detached it is no longer a library item and can be edited. You can also choose Detach from Original in the context menu to detach an item from the library. 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, if the item's name has been changed, or if the item has been edited.
<url>html/14templatesLib26.html</url>
<title>Library palette</title> Library palette The Library palette displays all of the items in the library file for the current local site. To display the Library palette: Choose Window > Library. To add a library item to a document, do one of the following: Select and drag an item from the Library palette list to the document Select an item in the Library palette list, then choose Add to Page from the context menu. To open a Library item: In the Library palette list, right-click (Windows) or Control-click (Macintosh) the library item you want to open, and choose Open from the context menu. In the Library palette list, double-click the item you want to open. Select the item in the Library palette list, then click the Open Library Item icon (the folder icon at the bottom of the palette) to make changes to the item. See also About library items . Library palette options These commands are available in the Library palette context menu. Create Library Item (document icon) Adds the current selection in the Document window to the library as a new item. Delete (trash can icon) Removes the selected item from the library. Rename Renames the selected item. Open (folder icon) Opens the selected item in a new window for editing. Add to Page Places the selected library item on the page at the insertion point. There is no icon for this command; you can select it from the context menu. Select In Site Window Selects the highlighted item in the Document window. Update Pages Opens the Update Pages dialog box, which allows you to update your site or files that use the library item.
<url>html/14templatesLib27.html</url>
<title>Using server-side includes</title> Using server-side includes Server-side includes 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 normally appear when you open a document locally in a browser. Dreamweaver, however, does display server-side includes, both in the Document window and browser preview window. To display included content, Dreamweaver uses a translator to mimic the way a server would process the include instructions. 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. To edit the content of a server-side include, you must directly edit the file that you're including. Any changes to the external file are automatically reflected in every document that includes it. To insert a server-side include: 1 Choose Insert > Server-Side Include or click the SSI button on the Common panel of the Object palette. 2 In the dialog box that appears, click the folder icon to browse to a file, or type the path to the file you want to include. Then click OK.
<url>html/14templatesLib28.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 specify 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; leave this turned on to 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 Causes Dreamweaver to process server-side includes only in files that end in .stm, .html, .htm, .shtml, or .shtm. In Files Matching One of These Expressions Causes Dreamweaver to scan the document for matches to the listed regular expressions; if any matches are found, Dreamweaver processes any server-side includes in the document.
<url>html/14templatesLib29.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 source code contained in an include does not appear in the HTML Source 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 Source inspector, and click Edit in the Property inspector. The included file opens in a new Document window. 2 Edit the file; then save it. The changes are immediately reflected in the current document and in any subsequent document you open that includes the file.
<url>html/14templatesLib3.html</url>
<title>Setting template page properties</title> Setting template page properties Documents created from a template inherit the template's page properties, except for the page title. If a document uses a template, you can change the document's title, but any changes you make to its other page properties are ignored. You define a template's page properties using the Modify > Page Properties command. If you need to change a document's page properties after the template has been applied, you must modify the template's page properties 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/14templatesLib4.html</url>
<title>Defining a template's editable regions</title> Defining a template's editable regions In a template, editable regions are the parts of a page that change—for example, an article in a newsletter. Locked (noneditable) regions are the areas that remain constant from one page to another, such as a masthead or corporate logo. By default, all regions on a template are marked as locked when you save it; to make the template useful, you must make some parts of it editable. While you are editing the template itself, you can make changes to both 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. Note: When you name a region, you can't use the following characters: single or double quotation marks (' "), angle brackets (< >), and ampersands (&). To define existing template content as an editable region: 1 In the template, 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 editable region 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 at once. Layers and layer content are separate elements; making a layer editable lets you change the position of the layer, and making layer content editable lets you change the content of a layer. To define a new editable region in a template: 1 In the template, place the insertion point where you want to insert an editable region. 2 Choose Modify > Templates > New Editable Region. 3 In the New Editable Region dialog box, enter a name for the region. The region name, surrounded by braces ( {} ), is inserted into the template as a highlighted placeholder. When you apply the template to a document, you can replace the placeholder with text, images, or other content.
<url>html/14templatesLib5.html</url>
<title>Template preferences</title> Template preferences You can use Dreamweaver's highlighting preferences to customize the highlight colors for the editable and locked regions of a template. The editable region color appears in the template itself; the locked region color appears in documents that use the template. You can use these colors to help remind yourself (and whoever is using your templates) of the sections that cannot be edited in the document. 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/14templatesLib6.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, only editable regions are highlighted. However, you can make changes to both editable and locked content. In documents using templates, only locked regions are highlighted. You can make changes only to the editable (nonhighlighted) content.
<url>html/14templatesLib7.html</url>
<title>Viewing editable and locked HTML</title> Viewing editable and locked HTML Editable content is delimited in HTML with the Dreamweaver comments #BeginEditable and #EndEditable. The HTML source code 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 Source inspector. However, you can make changes to both editable and locked HTML source code. For documents using templates, locked regions are highlighted in the HTML Source inspector. You can make changes only to the editable (nonhighlighted) HTML source code.
<url>html/14templatesLib8.html</url>
<title>Unmarking a region</title> Unmarking a region If you mark a region as editable and then want to lock it (make it noneditable) again, 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/14templatesLib9.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 in templates. To use styles, timelines, or behaviors in a template they must be defined in an editable region of a document which uses a template. For more information, see Formatting text with CSS style sheets , About timelines , and Behaviors overview .
<url>html/15forms1.html</url>
<title>Forms overview</title> Forms overview Forms allow you to collect information from users. Common uses for forms include surveys, order forms, and search interfaces. Forms require two components: HTML source code describing the form, and either a server-side application or client-side script to process the information that users enter in the form fields created by the HTML. You can use Dreamweaver to create forms, to add objects to them, and (by 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/15forms10.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 Name 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/15forms11.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, select 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/15forms12.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. (For example, this scenario could occur if you made a typing error in the INPUT TYPE value.) Input Name 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 source code. 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/15forms13.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 section of the document that displays one alert if the user selects Yes and another alert if the user selects No: function processForm(){ if (document.forms[0].elements[0].checked){ alert('Yes'); }else{ alert('No'); } } To use a client-side JavaScript function as the form action: 1 Select a Submit button in a form. 2 Attach the Call JavaScript behavior to the button. (See Call JavaScript .) 3 In the JavaScript text box that appears while attaching the behavior, enter processForm() . 4 Add a processForm() JavaScript function (like the one shown above) to the HEAD section of your document. You can handle many 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 such purposes you need a server-side application such as a Common Gateway Interface (CGI) script. CGI scripts can be written in Perl, C, Java, or other programming languages. There are several sites on the Web that offer free CGI scripts that you can use, and you can modify those scripts to fit your needs. See HTML and Web technologies resources . You can also ask your Internet service provider or Web team if there are any available CGI scripts that are already configured to run on your server. For an introduction to CGI scripting, see The Common Gateway Interface .
<url>html/15forms14.html</url>
<title>Using behaviors with forms</title> Using behaviors with forms You can attach behaviors to forms and form objects by using any of the behaviors that appear in the Behavior inspector when the form or form object is selected. The Validate Form and Set Text of Text Field behaviors are available only if a text field has been inserted into the document. When attaching the Validate Form behavior to an form object, you must specify which text field is to be validated. For example, if you attach Validate Form to the Submit button, you might specify a text field created for "Name." When applying behaviors, you need to make sure that every form object in your document (and every other object) has a unique name. If you use the same name for two different objects, behaviors may not work properly—even if the objects are in different forms. Note that unique form object names (in different forms on the same page) were not required in Dreamweaver 2; if you have pages you created in Dreamweaver 2 that include multiple form objects with the same name, you need to change the names before you associate behaviors with them. Two other object-naming guidelines: Names of form objects (and other objects) must start with a letter (as opposed to a numeral). Don't use JavaScript reserved words (such as top or navigator ) as object names. The two form-specific behaviors are explained below. For information on other behaviors, see Behaviors . Validate Form Checks the contents of specified text fields to ensure that the user has entered the correct type of data. See Validate Form . Set Text of Text Field Replaces the content of a specified text field with the content you specify. See Set Text of Text Field .
<url>html/15forms2.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 insertion point where you want the form to appear, and choose Insert > Form. Place the insertion point 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. Click the folder icon to locate the application, or enter the application's path. 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's default method (generally GET ).
<url>html/15forms3.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 insertion point inside the form boundary, and choose an object from the Insert > Form Object menu. Place the insertion point 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 tasks when clicked, such as submitting or resetting forms. 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 Present a set of values from which users can choose. The object can present a pop-up menu, which appears only when the user clicks the object's name (and which accepts only a single choice), or a list box, which always displays the values in a scrolling list (and which accepts more than one choice). See List/Menu properties . File fields Let users browse to files on their hard disks 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 that will be used by the application that processes the form. See Hidden field properties . Jump Menu Lets you insert a menu in which each option links to a document or file. See Creating jump menus . 3 Type a label or descriptive text, if desired, next to the object. You can apply text formatting to form object labels. For more information, see Changing font characteristics .
<url>html/15forms4.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 multiple-line 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, multiple-line, 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/15forms5.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 Name 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/15forms6.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 . Name Assigns a name to the image field. (Enter a name in the unlabeled text field on the far left side of the Property inspector.) Src Sets the source file for the field. Click the folder icon to browse to an image file on your hard disk. 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/15forms7.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 Name Assigns a name to the checkbox. Checked Value Sets the value of the checkbox when it is selected (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 selected or unselected when the form first loads.
<url>html/15forms8.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/15forms9.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 list or menu. This field is required, and the name must be unique. Type Indicates whether the object is a pop-up menu or a scrolling list. For a list, you can set the height (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 are in the same order as 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/16customizing1.html</url>
<title>Customizing Dreamweaver overview</title> Customizing Dreamweaver overview Dreamweaver can be customized in many ways, allowing you to work in a manner that's familiar, comfortable, and efficient for you. The following are some of the ways you can customize Dreamweaver: 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 . Change the keyboard shortcuts or names of menu items, add new commands to menus, and remove existing commands from menus. See Customizing Dreamweaver menus . Edit the source formatting profile to gain even finer control over the HTML that Dreamweaver creates. The SourceFormat.txt file includes all the settings from the HTML Format preferences and more. See Editing the HTML source formatting profile . Create your own commands and floating palettes using JavaScript. See Extending Dreamweaver: Basics . Change how third-party tags (such as ASP and ColdFusion tags) appear in the Document window. See Customizing the interpretation and appearance of third-party tags . Set preferences for everything from color schemes and highlighting to site configurations and browsers. See Setting preferences .
<url>html/16customizing10.html</url>
<title>Changing keyboard shortcuts</title> Changing keyboard shortcuts If the default keyboard shortcuts aren't convenient for you, you can change or remove existing shortcuts, or add new ones. To change a keyboard shortcut: 1 Quit Dreamweaver. 2 Make a backup copy of the menus.xml file. 3 Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad (don't open it in Dreamweaver). 4 Look at the Keyboard Shortcut Matrix and find a shortcut that's not being used, or one that you want to reassign. (If you reassign a keyboard shortcut, cross it off on a printed copy of the matrix for future reference.) 5 If you're reassigning a keyboard shortcut, find the menu item that the shortcut is assigned to, and remove the KEY=" shortcut " attribute from that menu item. 6 Find the menu item to assign the keyboard shortcut to. 7 If the menu item already has a keyboard shortcut, find the key attribute on that line. If it doesn't already have a shortcut, add KEY="" anywhere inside the MENUITEM tag. 8 Between the double quotation marks of the KEY attribute, enter the new keyboard shortcut. Use a plus (+) sign between modifier keys, and between modifiers and letter keys. For more information about modifiers, see About menu item syntax . If the keyboard shortcut is in use elsewhere and you didn't remove the other use of it, the shortcut will apply only to the first menu item it's used for in menus.xml. Note: You can use the same keyboard shortcut for a Macintosh-only menu item and for a Windows-only menu item if you wish. 9 Write your new shortcut in the appropriate location in the Keyboard Shortcut Matrix.
<url>html/16customizing11.html</url>
<title>Changing the name of a menu item</title> Changing the name of a menu item You can easily change the name of any item on any menu. To change the name of a menu item: 1 Quit Dreamweaver. 2 Make a backup copy of the menus.xml file. 3 Open menus.xml in a text editor such as HomeSite, BBEdit, or Wordpad (don't open it in Dreamweaver). 4 Find the appropriate MENUITEM tag, and change the value of its NAME attribute. Don't change the item's ID attribute.
<url>html/16customizing12.html</url>
<title>Customizing the appearance of dialog boxes</title> Customizing the appearance of dialog boxes The dialog box layouts for objects, commands, and behaviors are specified as HTML forms, in HTML files in the Configuration directory in the Dreamweaver application directory. You can edit those forms using Dreamweaver; see Forms overview . To change the appearance of a dialog box: 1 Find the appropriate .htm file in Configuration/Objects or Configuration/Commands or Configuration/Behaviors. 2 Make a copy of the file, somewhere other than the Configuration folder. 3 Open the copy in Dreamweaver, edit the form, and save the copy. 4 Quit Dreamweaver. 5 Copy the changed copy back to the Configuration folder, in place of the original. (It's a good idea to first make a backup of the original, so you can restore it later if you need to.) 6 Launch Dreamweaver again to see the changes. You should change only the appearance of the dialog box, not how it works; it still must contain the same types of form elements, with the same names, so that the information that Dreamweaver obtains from the dialog box can still be used in the same way. For example, the Comment object takes text input from a text area in a dialog box, then uses a simple JavaScript function to turn that text into an HTML comment that inserts it into your document. The form that describes the dialog box is in Configuration/Objects/Invisibles/Comment.htm. You can open that file and change the size and other attributes of the text area, but if you remove the TEXTAREA tag entirely, or change the value of its NAME attribute, the Comment object will no longer work properly.
<url>html/16customizing13.html</url>
<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 Edit > Preferences command). You can edit the SourceFormat.txt file 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.txt 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, quit the application 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 <? 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). An individual tag can be marked as belonging to an indentation group ( IGROUP ) 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. Indentation 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.txt 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 this: <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> Some tag and attribute settings include the terms NAMECASE or SAMECASE . NAMECASE specifies that the tag or attribute is to be capitalized in a particular way. For example, onClick is specified as <onClick namecase="onClick"> , indicating that it should always be capitalized in that specific way, neither all-uppercase nor all-lowercase. Dreamweaver uses SAMECASE to ensure that it uses the right case (upper or lower) when generating certain attributes; don't remove SAMECASE from any of the attribute formatting specifications where it appears. Any attribute not specified in the SourceFormat.txt file uses the default formatting settings that you specify in the HTML Format preferences panel.
<url>html/16customizing14.html</url>
<title>About browser profiles</title> About 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 in the Configuration/BrowserProfiles folder within the Dreamweaver application folder. You can edit existing profiles or create new ones with a text editor (such as BBEdit, HomeSite, Notepad, or SimpleText). It is not necessary to quit Dreamweaver before editing or creating browser profiles.
<url>html/16customizing15.html</url>
<title>About browser-profile formatting</title> About browser-profile formatting Browser profiles follow a specific format. To avoid parsing errors during target browser checks, follow these rules 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). A space must appear in these places: 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 each of the following words: ELEMENT , ATTLIST , Error , msg , and htmlmsg ( !ELEMENT, !ATTLIST, !Error, !msg, !htmlmsg ). !Error and !Warning 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 listed as tags in browser profiles because they interfere with parsing. Dreamweaver does not report an error for comments because all browsers support them. 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 supportedAttribute1 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. 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/16customizing16.html</url>
<title>Creating a browser profile</title> Creating a browser profile 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 a profile for 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 About browser-profile formatting . 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 probably 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 About browser-profile formatting . 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 could 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." > 6 You can use !Error for all error situations, or you can use !Warning to indicate that a tag will be ignored but will not actually cause an error.
<url>html/16customizing17.html</url>
<title>Extending Dreamweaver: Basics</title> Extending Dreamweaver: Basics Dreamweaver is designed to be extensible. It includes a JavaScript interpreter, so it can read and execute JavaScript code, and it provides an application programming interface (API), a large set of JavaScript functions that allow developers to extend the capabilities of Dreamweaver. Dreamweaver also provides a Document Object Model (DOM), which allows extensions to examine and modify a document's structure and contents. Using the JavaScript API, you can create objects, behavior actions, commands, Property inspectors, floating palettes, and data translators (all of which are collectively called extensions). You can also create new objects and new simple commands without knowing anything about programming; see Changing the Object palette and Creating new commands from history steps for details. But for more advanced purposes, to add capabilities to Dreamweaver you must write extensions, either in JavaScript or in C. For information about the DOM and the API, see Extending Dreamweaver . About JavaScript JavaScript is an interpreted programming language. To learn more about JavaScript, read a good JavaScript book, such as JavaScript Bible by Danny Goodman (IDG) or JavaScript: The Definitive Guide by David Flanagan (O'Reilly). For information on extending Dreamweaver using JavaScript, see Extending Dreamweaver . Note: Despite the resemblance between the two names, JavaScript is not related to Java in any way. Editing Dreamweaver commands All the commands in Dreamweaver menus, including those you create and save using the History palette (see Creating new commands from history steps ), are implemented in JavaScript. This JavaScript code usually consists mostly of calls to functions provided by the Dreamweaver extensibility API. If you know JavaScript and understand the Dreamweaver extensibility API, you can edit the JavaScript to change the operation of Dreamweaver commands. Note: Don't attempt to change any JavaScript code unless you're certain you know what you're doing. To rename a command, move a command to a different menu, or add a keyboard shortcut to a command, see Customizing Dreamweaver menus .
<url>html/16customizing18.html</url>
<title>Customizing the interpretation and appearance of third-party tags</title> Customizing the interpretation and appearance of third-party tags Server-side processing technologies such as ASP, PHP, ColdFusion, and JSP use special non-HTML code in HTML files; servers create and serve HTML content based on that code. When Dreamweaver encounters non-HTML tags, it compares them with information in its third-party tag files, which define how Dreamweaver reads and displays non-HTML tags. For example, ASP (Active Server Pages) files contain code for the server to interpret. This code is set off by a pair of delimiters: it begins with the string <% and ends with the string %> . Dreamweaver's Configuration/ThirdPartyTags folder contains a file named ASP.xml, which describes the format of ASP code and defines how Dreamweaver displays that code. Because of the way ASP code is specified in ASP.xml, Dreamweaver doesn't try to interpret anything between the starting and ending delimiters. You can define your own tags and create tag database files to define how Dreamweaver reads and displays them. Creating tag database files is particularly useful if you're using a server-side markup system other than ASP, ColdFusion, or PHP; create a new tag database file for each such markup system, to tell Dreamweaver how to display the tags. Note: This section explains how to define the appearance of a custom tag within Dreamweaver, but not how to edit the content or properties of a custom tag. For information on how to create a Property inspector to inspect and change the properties of a custom tag, see "Property Inspectors" in Extending Dreamweaver . Each tag database file defines the name, type, content model, rendering scheme, and icon for one or more custom tags. You can create any number of tag database files, but all of them must reside in the Configuration/ThirdPartyTags folder to be read and processed by Dreamweaver. Tag database files have the file extension .xml. If you are working on several different unrelated sites at once (for example, as a freelance developer), put all the tag specifications for a particular site in one file. Then simply include that tag database file with the custom icons and Property inspectors that you hand over to the people who will maintain the site. You define a tag specification with an XML tag called TAGSPEC ; for example, the following code describes the specification for the HAPPY tag: <TAGSPEC TAG_NAME="happy" TAG_TYPE="nonempty" RENDER_CONTENTS="false" CONTENT_MODEL="marker_model" ICON="happy.gif" ICON_WIDTH="18" ICON_HEIGHT="18"></TAGSPEC> There are two different kinds of tags defined using TAGSPEC : normal HTML-style tags, and string-delimited tags, which start with one string and end with another string. String-delimited tags are like empty HTML tags (such as IMG ) in that they don't surround content and don't have closing tags. The HAPPY tag shown above is a normal HTML-style tag; it starts with an opening <HAPPY> tag, surrounds content, and ends with a closing </HAPPY> tag. An ASP tag, which starts with the string <% and ends with the string %> , is a string-delimited tag. The following table describes TAGSPEC 's attributes and their possible values: Attribute Value Description TAG_NAME tagName The name of the custom tag. Required. (For string-delimited tags, TAG_NAME is used only to determine whether a given Property inspector can be used for the tag. If the first line of the Property inspector contains this tag name with an asterisk on each side, then the inspector can be used for tags of this type. For example, the TAG_NAME for ASP code is ASP; Property inspectors that can examine ASP code should have *ASP* on the first line. For information on the Property inspector API, see "Property Inspectors" in Extending Dreamweaver .) TAG_TYPE * empty or nonempty Determines whether the tag itself is the content (as with IMG ), or whether it surrounds content (as with CODE ). Required for normal (non-string-delimited) tags. RENDER_CONTENTS * TRUE or FALSE Determines whether the contents of the tag should appear in the document window, or whether the icon appears instead. Required for nonempty tags. Applies only to tags that appear outside of attributes. CONTENT_MODEL * block_model , head_model , marker_model , or script_model Describes both what content the tag can contain and what the tag can be contained by. Required. block_model specifies that the tag can contain block-level elements such as DIV and P , and that the tag can appear only in the BODY section or inside other body-content tags such as DIV , LAYER , or TD . head_model specifies that the tag can contain text content, and that it can appear only in the HEAD section. marker_model specifies that the tag can contain any valid HTML code, and that it can appear anywhere. (Because adding text outside of a valid HEAD element creates invalid HTML, you must use head_model instead of marker_model if you want to place a custom tag containing text in the HEAD section.) Use marker_model for tags that should be displayed inline (inside a block-level element such as P or DIV ) rather than causing a line break. script_model allows the tag to exist anywhere between the opening and closing HTML tags of a document. When Dreamweaver encounters a tag with this model, it ignores all of the tag's content. Used for third-party markup (like certain ColdFusion tags) that Dreamweaver shouldn't parse. START_STRING beginningOfTag Specifies a delimiter that marks the beginning of a string-delimited tag. String-delimited tags can appear anywhere in the document where a comment can appear. Dreamweaver performs no tag parsing and no entity or URL decoding between START_STRING and END_STRING . Required if END_STRING is specified. END_STRING endOfTag Specifies a delimiter that marks the end of a string-delimited tag. Required if START_STRING is specified. DETECT_IN_ATTRIBUTE TRUE or FALSE Indicates whether to ignore everything between START_STRING and END_STRING (or between opening and closing tags if those strings aren't defined) even when those strings appear inside attribute names or values. You should generally set this to TRUE for string-delimited tags; the default is FALSE . PARSE_ATTRIBUTES * TRUE or FALSE Indicates whether to parse the attributes of the tag. If this is set to TRUE (the default), Dreamweaver parses the attributes; if it's set to FALSE , Dreamweaver ignores everything until the next closing angle bracket that appears outside of quotation marks. For example, this attribute should be set to FALSE for a tag like CFIF (as in <cfif a is 1> ). ICON URL Specifies the path and file name of the icon associated with the tag. Required for empty tags, and for nonempty tags whose contents are not displayed in the Document window. ICON_WIDTH widthInPixels Specifies the width of the icon. ICON_HEIGHT heightInPixels Specifies the height of the icon. &DATA;
<url>html/16customizing19.html</url>
<title>How custom tags appear in the Document window</title> How custom tags appear in the Document window How custom tags appear in the Document window depends on the values of the TAG_TYPE and RENDER_CONTENTS attributes of the TAGSPEC tag. See Customizing the interpretation and appearance of third-party tags for information on TAGSPEC . If the value of TAG_TYPE is empty , the icon specified in the ICON attribute appears. If the value of TAG_TYPE is nonempty but the value of RENDER_CONTENTS is FALSE , the icon appears as it would for an empty tag. For example, the HAPPY tag defined above might appear in the HTML like this: <P>This is a paragraph that includes an instance of the <CODE>HAPPY</CODE> tag (<HAPPY>Joe</HAPPY>).</P> and in the Document window like this: For nonempty tags that have a RENDER_CONTENTS value of TRUE , the content between the opening and closing tags (such as the text between the tags in <MYTAG>this is the content between the opening and closing tags</MYTAG> ) appears in the Document window instead of the icon. If View > Invisible Elements is enabled, the content is highlighted using the Third-Party Tags color specified in Highlighting preferences. (Note that highlighting applies only to tags defined in tag database files.) To change the highlighting color of third-party tags: 1 Choose Edit > Preferences. 2 Select Highlighting from the Category list. 3 Click the Third-Party Tags color box to bring up the color palette. 4 Choose a color, then click OK to exit the Preferences dialog box.
<url>html/16customizing2.html</url>
<title>Changing the Object palette</title> Changing the Object palette By default, the Object palette is divided into six panels: Characters, Common, Forms, Frames, 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. For each object on a panel of the Object palette, there are two or three files in the corresponding folder: A GIF file containing an icon for the object An HTML file containing either the HTML to be inserted into your file or an HTML form that lets you specify data to be inserted (such as the text of a comment) A JavaScript file (optional) that generates the HTML to be inserted into your file You can move objects from one panel to another, rename panels, and remove objects from the palette altogether. Once you've made changes, you can reload extensions to make the changes appear in the Object palette. To move an object from one Object palette panel to another: Move the object's HTML and GIF files (and the JavaScript file, if any) from one folder to another within the Configuration/Objects folder. Be sure to move all of the object's files. To rename a panel on the Object palette: Rename the corresponding folder in the Configuration/Objects folder. To remove an object from the Object palette: Move the object's HTML, GIF, and JavaScript files out of the Configuration/Objects folder. To reload extensions after making a change inside the Configuration/Objects folder: 1 Control-click (Windows) or Option-click (Macintosh) the pop-up menu at the top of the Object palette. 2 Choose Reload Extensions.
<url>html/16customizing20.html</url>
<title>About ASP</title> About ASP Microsoft's ASP (Active Server Pages) is a way to combine HTML, scripts written in JavaScript or VBScript, and ActiveX controls to dynamically serve HTML. When a browser requests an ASP page from a Microsoft Web server, the server interprets the ASP code and sends the resulting HTML to the requesting browser. For more information on ASP, see Microsoft's ASP overview pages, as described in HTML and Web technologies resources . A block of ASP code begins with <% and ends with %> . If View > Invisible Elements is selected, Dreamweaver displays an ASP icon in the Document window to mark the location of ASP code.
<url>html/16customizing21.html</url>
<title>About JSP</title> About JSP Sun's JSP (JavaServer Pages) provides a Java-based way to dynamically serve HTML and other Web content. When a browser requests a JSP page from a JSP-enabled server, the server interprets the JSP code and sends the resulting HTML to the requesting browser. For more information on JSP, see Sun's JSP page , as described in HTML and Web technologies resources . A block of JSP code begins with <% and ends with %> .
<url>html/16customizing22.html</url>
<title>About PHP</title> About PHP PHP (which stands for PHP: Hypertext Preprocessor) is a server-side scripting language. When a browser requests a PHP page from a PHP-enabled server, the server interprets the PHP code and sends the resulting HTML to the requesting browser. For more information on PHP, see the PHP pages , as described in HTML and Web technologies resources . A block of PHP code begins with <? and ends with ?> . If View > Invisible Elements is selected, Dreamweaver displays a PHP icon in the Document window to mark the location of PHP code.
<url>html/16customizing23.html</url>
<title>About ColdFusion</title> About ColdFusion ColdFusion is another way to dynamically serve pages. When a browser requests a ColdFusion page from a server, the server passes the page to the ColdFusion Server software, which interprets the scripts on the page and sends the resulting HTML to the requesting browser. For more information on ColdFusion, see the ColdFusion product page , as described in HTML and Web technologies resources . Dreamweaver recognizes about fifty ColdFusion tags; see the ColdFusion.xml file in the Configuration/ThirdPartyTags folder for details. If View > Invisible Elements is selected, Dreamweaver displays a ColdFusion icon in the Document window to mark the location of ColdFusion tags for which RENDER_CONTENTS is set to FALSE (in ColdFusion.xml).
<url>html/16customizing24.html</url>
<title>Avoiding rewriting third-party tags</title> Avoiding rewriting third-party tags Dreamweaver corrects certain kinds of errors in HTML; for information on exactly what it corrects, see HTML Rewriting preferences . By default, Dreamweaver refrains from changing HTML in files with certain file name extensions, including .asp (ASP), .cfm (ColdFusion), and .php (PHP). This default is set so that Dreamweaver won't accidentally modify the code contained in any such third-party tags. You can change Dreamweaver's default rewriting behavior so that it rewrites HTML when it opens such files, and you can add other file types to the list of types that Dreamweaver doesn't rewrite. Dreamweaver also encodes certain special characters when you enter them in the Property inspector. It's often a good idea to allow Dreamweaver to perform this encoding; it makes special characters more likely to be displayed correctly across platforms and browsers. However, because such encoding may interfere with code contained in third-party tags, or even with the tags themselves, you may want to change Dreamweaver's encoding behavior. To allow Dreamweaver to rewrite HTML in all files: 1 Choose Edit > Preferences, and select the HTML Rewriting category. 2 Do one of the following: Delete one or more extensions from the list of extensions. Deselect the Never Rewrite HTML: In Files with Extensions option. To add file types that Dreamweaver shouldn't rewrite: 1 Choose Edit > Preferences, and select the HTML Rewriting category. 2 Make sure the Never Rewrite HTML: In Files with Extensions option is selected, and add the new file extensions to the list in the text field. To turn off Dreamweaver's encoding options: 1 Choose Edit > Preferences, and select the HTML Rewriting category. 2 Deselect either or both Special Characters options. For information on the other HTML Rewriting preferences, see HTML Rewriting preferences .
<title>Changing the default file type</title> Changing the default file type By default, Dreamweaver shows only HTML files in the File > Open dialog box. You can use a menu in that dialog box to show other types of files, including all available files. But if most of your work involves another file type (such as ASP files), you can change the default so you don't have to switch to another file type every time you use the Open command. To change Dreamweaver's default File > Open file type: 1 Make a backup copy of the Extensions.txt file in the Configuration folder, in case you want to restore the defaults later. 2 Open Extensions.txt in a text editor. (Don't open it in Dreamweaver.) 3 Cut the line corresponding to the new default and paste it as the first line of the file. Then save the file and relaunch Dreamweaver to see the new default. To add new file types to the menu in the File > Open dialog box: 1 Make a backup copy of the Extensions.txt file in the Configuration folder, in case you want to restore the defaults later. 2 Open Extensions.txt in a text editor. (Don't open it in Dreamweaver.) 3 Add a new line to the file for each new file type. In capital letters, enter the file name extensions that the new file type can have, separated by commas; then add a colon and a brief descriptive phrase to show in the File > Open menu. For example, for JPEG files, enter JPG,JPEG,JFIF:JPEG Image Files 4 Save the file and relaunch Dreamweaver to see the changes.
<url>html/16customizing5.html</url>
<title>Customizing Dreamweaver menus</title> Customizing Dreamweaver menus Dreamweaver creates all of its menus from the structure defined in an XML file called menus.xml, in the Configuration/Menus subfolder of the Dreamweaver application folder. Editing the menus.xml file changes Dreamweaver's menus the next time you launch Dreamweaver. (For basic information about XML, see About XML .) By editing the menus.xml file, you can add, change, and remove keyboard shortcuts for menu items. You can also rearrange, rename, and remove menu items. Note: Always make a backup copy of the current menus.xml file, or any other Dreamweaver configuration file, before you modify it. It's easy to make mistakes in editing the menu configuration file, and there's no way from within the Dreamweaver application to revert to a previous set of menus. The Configuration folder does, however, contain a backup of the default menus.xml file, called menus.bak; to revert to the default menu set, replace menus.xml with a copy of menus.bak.
<url>html/16customizing6.html</url>
<title>Editing the Commands menu</title> Editing the Commands menu You can add certain kinds of commands to the Commands menu, and change their names, without editing the menus.xml file. To create new commands that are automatically placed in the Commands menu, use the History palette (see Creating new commands from history steps ). To change the names of commands you've created, or to delete them from the Commands menu, choose Commands > Edit Command List. (Note that when you delete a command from the menu using this method, the file containing the command is deleted as well.) To reorder the items in the Commands menu, or to move items between menus, you must edit the menus.xml file. See About menu syntax and About menu item syntax for an introduction to editing the menus.xml file. Note: The term "command" has two meanings in Dreamweaver. Strictly speaking, from an extension developer's viewpoint, a command is a particular kind of extension. In some contexts, however, "command" is used interchangeably with "menu item" to mean any item that appears in a Dreamweaver menu, no matter what it does or how it's implemented.
<url>html/16customizing7.html</url>
<title>About menu syntax</title> About menu syntax Be careful when making changes to the menus. Dreamweaver ignores any menu or menu item that contains an XML syntax error. The menus.xml file contains a structured list of menu bars, menus, and menu items. A menu bar (tagged with opening and closing MENUBAR tags) is a discrete menu or set of menus—for example, there's a main menu bar, a separate Site window menu bar (for Windows only), and a menu bar for each context menu. Each menu bar contains one or more menus; a menu is surrounded by <MENU> and </MENU> tags. Each menu contains one or more menu items, each described by a MENUITEM tag and its attributes. (A menu can also contain separators and submenus.) For example, the following is part of the definition of the main (Document window) menu bar: <menubar name="Main Window" id="DWMainWindow"> <menu name="_File" id="DWMenu_File"> <menuitem name="_New" key="Cmd+N" enabled="true" command="dw.createDocument()" /> ...other menu items, separators, and submenus here... </menu> ...other menus here... </menubar>
<url>html/16customizing8.html</url>
<title>Rearranging menus</title> Rearranging menus You can move menu items within a menu or from one menu to another, change the order of the menus within a menu bar, and add separators to menus or remove them from menus. Note that you can move items into or out of context menus using the same procedure as for other menus. To move a menu item: 1 Quit Dreamweaver. 2 Make a backup copy of the menus.xml file. 3 Open menus.xml in a text editor such as BBEdit, HomeSite, or Wordpad (don't open it in Dreamweaver). 4 Cut an entire MENUITEM tag, from the <menuitem at the beginning to the /> at the end. 5 Place the insertion point at a new location. 6 Paste the menu item into its new location. (Make sure it's between a <MENU> tag and the corresponding </MENU> tag.) To create submenus, nest a matched opening and closing pair of MENU tags within a menu. That is, insert a new <MENU></MENU> pair into a menu, then add new menu items between those tags. To insert a separator between two menu items: Enter <SEPARATOR /> between the two MENUITEM tags. To remove an existing separator, delete the corresponding <SEPARATOR /> line.
<url>html/16customizing9.html</url>
<title>About menu item syntax</title> About menu item syntax The following are the attributes of the MENUITEM tag: NAME Is the menu item name that appears in the menu. (An underscore indicates that the following letter is the command's mnemonic (Windows only).) Required. ID Is used by Dreamweaver to identify the item. The ID must be unique throughout the menu structure. If you add new menu items to menus.xml, use your company name or another unique string as a prefix for each menu item's ID , to ensure uniqueness. Required. KEY Is the keyboard shortcut for the command, if any. Use the following strings to specify modifier keys: Cmd specifies the Control key (Windows) or Command key (Macintosh). Alt and Opt interchangeably specify the Alt key (Windows) or Option key (Mac). Shift specifies the Shift key on both platforms. Ctrl specifies the Control key on both platforms. A plus (+) sign separates modifier keys if a given shortcut uses more than one modifier. For example, Cmd+Opt+5 in the KEY attribute means the menu item is executed by pressing Control+Alt+5 (Windows) or Command+Option+5 (Macintosh). Special keys are specified by name: F1 through F12, PgDn, PgUp, Home, End, Ins, Del, Tab, Esc, BkSp, and Space. Modifier keys can also be applied to special keys. PLATFORM Indicates which platform the item appears on. Valid values are win , meaning Windows-only, or mac , meaning Macintosh-only. The default (if you don't specify this attribute) is for the item to appear on both platforms. ENABLED Is the name of a JavaScript function that determines whether the menu item is currently enabled. If the function returns false , the menu item is dimmed. COMMAND Is a JavaScript expression that's executed when the user selects this item from the menu. For complex JavaScript code, use a JavaScript file (specified with the FILE attribute) instead. Either FILE or COMMAND must be specified for each menu item. FILE Is the name of an HTML file containing JavaScript that controls the menu item. The path specified in the FILE attribute is relative to the Configuration folder. Note that the FILE attribute overrides the COMMAND , ENABLED , and CHECKED attributes. Either FILE or COMMAND must be specified for each menu item. For information on creating a command file using the History palette, see Creating new commands from history steps . For information on writing your own JavaScript commands from scratch, see Extending Dreamweaver . CHECKED Is a JavaScript expression that indicates whether the menu item has a check mark next to it in the menu; if the expression evaluates as true , the item is displayed with a check mark. DYNAMIC , If present, indicates that a menu item is to be determined dynamically, by an HTML file that contains JavaScript code to set the text and state of the menu item. If you specify a tag as DYNAMIC , you must also specify a FILE attribute.
<url>html/17shortcuts1.html</url>
<title>File menu</title> File menu Action 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 Command+Shift+O Close Control+W Command+W Save Control+S Command+S Save All Control+Shift+S Command+Shift+S Exit/Quit Control+Q Command+Q
<url>html/17shortcuts10.html</url>
<title>Working with layers</title> Working with layers Action Windows Macintosh Select a layer Control+Shift-Click Command+Shift-Click Select and move layer Shift+Control-drag Command+Shift-drag Add or remove layer from selection Shift-click layer Shift-click layer Move selected layer by pixels Arrow keys Arrow keys Move selected layer by snapping increment Shift+arrow keys Shift+arrow keys Resize selected layer by pixels Control+arrow keys Option+arrow keys Resize selected layer by snapping increment Control+Shift+arrow keys Option+Shift+arrow keys Align selected layers to the Top/Bottom/Left/Right of the last selected layer Control+Up/Down/Left/Right arrow 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 Table Control+Shift+F6 Command+Shift+F6 Convert Tables to 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+Shift+Alt+G Command+Shift+Option+G Snap To Grid Control+Alt+G Command+Option+G Add a keyframe (Timeline) Shift+F9 Shift+F9 Remove a keyframe (Timeline) Delete Delete
<url>html/17shortcuts11.html</url>
<title>Working with timelines</title> Working with timelines Action Windows Macintosh Add object to timeline Control+Shift+Alt+T Command+Shift+Option+T
<url>html/17shortcuts12.html</url>
<title>Working with images</title> Working with images Action Windows Macintosh Change image source attribute Double-click image Double-click image Edit image in external editor Control-double-click image Command-double-click image
<url>html/17shortcuts13.html</url>
<title>Managing hyperlinks</title> Managing hyperlinks Action Windows Macintosh Create hyperlink (select text) Control+L Command+L Remove hyperlink Control+Shift+L Command+Shift+L Drag and drop to create a hyperlink from a document Select the text, image, or object, then Shift-drag the selection to a file in the Site window Select the text, image, or object, then Shift-drag the selection to a file in the Site window Drag and drop to create a hyperlink using the Property inspector Select the text, image, or object, then drag the point-to-file icon in Property inspector to a file in the Site window Select the text, image, or object, then drag the point-to-file icon in Property inspector to a file in the Site window Open the linked-to document in Dreamweaver Control-double-click link Command-double-click link Check links selected Shift+F8 Shift+F8 Check links in the entire site Control+F8 Command+F8
<url>html/17shortcuts14.html</url>
<title>Targeting and previewing in browsers</title> Targeting and previewing in browsers Action Windows Macintosh Preview in primary browser F12 F12 Preview in secondary browser Control+F12 Command+F12
<url>html/17shortcuts15.html</url>
<title>Site management and FTP</title> Site management and FTP Action Windows Macintosh Create new file Control+Shift+N Command+Shift+N Create new folder Control+Shift+Alt+N Command+Shift+Option+N Open selection Control+Shift+Alt+O Command+Shift+Option+O Get selected files or folders from remote FTP site Control+Shift+D or drag files from Remote to Local pane in Site window Command+Shift+D or drag files from Remote to Local pane in Site window Put selected files or folders to remote FTP site Control+Shift+U or drag files from Local to Remote pane in Site window Command+Shift+U or drag files from Local to Remote pane in Site window Check out Control+Shift+Alt+D Command+Shift+Option+D Check in Control+Shift+Alt+U Command+Shift+Option+U Disconnect Control+Shift+Alt+F5 Command+Shift+Option+F5 Site Map Control+F5 Command+F5 Refresh remote site Alt+F5 Option+F5
<url>html/17shortcuts16.html</url>
<title>Site Map</title> Site Map Action Windows Macintosh Site Files view F5 F5 Refresh Local pane Shift+F5 Shift+F5 Make root Control+Shift+R Command+Shift+R Link to existing file Control+Shift+K Command+Shift+K Change link Control+L Command+L Remove link Delete 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/17shortcuts17.html</url>
<title>Playing plugins</title> Playing plugins Action Windows Macintosh Play Plugin Control+Alt+P Command+Option+P Stop Plugin Control+ Alt+X Command+Option+X Play All Plugins Control+Shift+Alt+P Command+Shift+Option+P Stop All Plugins Control+Shift+ Alt+X Command+Shift+Option+X
<url>html/17shortcuts18.html</url>
<title>Viewing page elements</title> Viewing page elements To toggle the display of Windows Macintosh Invisible Elements Control+Shift+I Command+Shift+I Rulers Control+Shift+Alt+R Command+Shift+Option+R Grid Control+Shift+Alt+G Command+Shift+Option+G View Head Content Control+Shift+W Command+Shift+W
<url>html/17shortcuts19.html</url>
<title>Working with templates</title> Action Windows Macintosh 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/17shortcuts2.html</url>
<title>Edit menu</title> Edit menu Action Windows Macintosh Undo Control+Z Command+Z Redo Control+Y or Control+Shift+Z Command+Y or Command+Shift+Z Cut Control+X Command+X Copy Control+C Command+C Paste Control+V Command+V Clear Delete Delete Select All Control+A Command+A Launch External Editor Control+E Command+E Page Properties Control+J Command+J Preferences Control+U or Control+K Command+U or Command+K
<url>html/17shortcuts20.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 Command+Option+I Table Control+Alt+T Command+Option+T Flash Movie Control+Alt+F Command+Option+F Shockwave Director movie Control+Alt+D Command+Option+D Named Anchor Control+Alt+A Command+Option+A
<url>html/17shortcuts21.html</url>
<title>Opening and closing palettes</title> Opening and closing palettes 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 Control+F5 Command+F5 Library F6 F6 CSS Styles F7 F7 HTML Styles Control+F7 Command+F7 Behaviors F8 F8 History F9 F9 HTML Source F10 F10 Layers F11 F11 Timeline Control+F9 Command+F9 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
<url>html/17shortcuts22.html</url>
<title>Getting help</title> Getting help Action Windows Macintosh Using Dreamweaver Help Topics F1 F1 Extending Dreamweaver Help Topics Shift+F1 Shift+F1 Dreamweaver Online Control+F1 Command+F1
<url>html/17shortcuts23.html</url>
<title>Keyboard Shortcut Matrix</title> Keyboard Shortcut Matrix Note: An asterisk (*) indicates an unused key combination. Italics indicate system-level commands. Keyboard character Control (Windows) orCommand (Macintosh) Control + Shift (Windows) or Command +Shift (Macintosh) Control+Alt (Windows) or Command +Option (Macintosh) Control+Shift+Alt (Windows) or Command +Shift+ Option (Macintosh) A Select All, Select Table Insert Table Column Insert Named Anchor * B Bold (toggle) Add to Library * * C Copy Copy text only Center justify * D Duplicate Get Selected Files or Folders Insert Shockwave Director Movie Check Out Selected Files or Folders E Launch External Editor Edit Style Sheet * * F Find * Insert Flash Movie * G Find Again (Macintosh only) * Snap to Grid (toggle) Show/Hide Grids H Replace Bring to Front Move Backward Send to Back I Italic (toggle) Show Invisibles (toggle) Insert Image * J Page Properties Property inspector (toggle) * * K Preferences Link to Existing File * * L Create Link Remove Link Left Justify * M Insert Table Row Delete Table Row Merge Selected Table Cells * N New Window (Windows)New Page (Macintosh) New Page (Windows only) * New Site Folder O Open Open in Frame * Open Selected Site File P Play Recorded Command Paragraph Format Play Plugin Play All Plugins Q Quit * * * R Import Make Root Right Justify Show/Hide Rulers S Save Save All Split Table Cell * T Quick Tag Editor Show Page Titles in Site Map Insert Table Add Object to Timeline U Preferences Put Selected Files or Folders * Check In Selected Files or Folders V Paste Paste as Text Create New Editable Region * W Close View Head Content Mark Region as Editable * X Cut Start Recording Command Stop Plugin Stop All Plugins Y Redo Show/Hide Link * * Z Undo Redo * * 0 (zero) Set Paragraph Format to None * * * 1 Apply Heading 1 to Paragraph * * * 2 Apply Heading 2 to Paragraph * * * 3 Apply Heading 3 to Paragraph * * * 4 Apply Heading 4 to Paragraph * * * 5 Apply Heading 5 to Paragraph * * * 6 Apply Heading 6 to Paragraph * * * 7 * * * * 8 * * * * 9 * * * * - (minus) and _(Underscore) Site Map Zoom Out Delete Table Column * * = and + Fit to Window Site Map Zoom In * * [ and { Outdent (Move Backward) Decrease Column Span (Tables), Make Layers Same Width (Layers) * * ] and } Indent (Move Forward) Increase Column Span (Tables), Make Layers Same Height (Layers) * * . (period) and > Stop Plugin Select Child Tag * , (comma) and < * Select Parent Tag * * ? and / * * * * ; and : * * * * ' and " * * * * ' and ~ * * * * \ and | * * * * Spacebar Update Table Layout Insert Non-breaking Space (Windows) (Option+Spacebar on Macintosh) * * Function Key No modifier Shift Alt (Windows) or Option (Macintosh) Control (Windows) orCommand (Macintosh) Control+Shift (Windows) or Command +Shift (Macintosh) Control+Alt (Windows) or Command +Option (Macintosh) Control+Shift+Alt (Windows) or Command +Shift+Option (Macintosh) F1 Using Dreamweaver Help Extending Dreamweaver Help * Dreamweaver Online * * * F2 Rename file in Site Map (Windows only) * * Object Palette * * * F3 Find again (Windows only) * * Property Inspector * * * F4 Hide/Show Floating Windows Launcher Quit (Windows only) Close Window * * * F5 Site Files Refresh Local Pane Refresh Remote Pane Site Map * * Disconnect from Remote Site F6 Library palette * * Convert Tables to Layers Convert Layers to Table * * F7 CSS Styles Check Spelling * HTML Styles * * * F8 Behavior Check Links -Selected * Check Links -Entire Site * * * F9 History palette Add keyframe * Timeline * * * F10 HTML Source inspector * * Frame inspector * * * F11 Layers * * Templates Palette * * * F12 Preview in Primary Browser * * Preview in Secondary Browser * * *
<url>html/17shortcuts3.html</url>
<title>Quicktag Editor</title> Quicktag Edito Action Windows Macintosh Open Quick Tag Editor Control+T Command+T Select Parent Tag Control+Shift+< Command+Shift+< Select Child Tag Control+Shift+> Command+Shift+> r
<url>html/17shortcuts4.html</url>
<title>History Palette</title> History Palette Action Windows Macintosh Open the History palette F9 F9 Start/Stop Recording Command Control+Shift+X Command+Shift+X Play Recorded Command Control+P Command+P
<url>html/17shortcuts5.html</url>
<title>Editing text</title> Editing text Action Windows Macintosh Create a new paragraph Enter Return Insert a line break Shift+Enter Shift+Return Insert a nonbreaking space Control+Shift+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 Command+Shift+C Paste as text Control+Shift+V Command+Shift+V Select a word Double-click Double-click Add selected items to library Control+Shift+B Command+Shift+B Switch between Document window and HTML inspector Control+Tab Command+Tab or Option+Tab Open and close the Property inspector Control+Shift+J Command+Shift+J Check spelling Shift+F7 Shift+F7
<url>html/17shortcuts6.html</url>
<title>Formatting text</title> Formatting text Action Windows Macintosh Indent Control+] Command+] Outdent Control+[ Command+[ Format > None Control+0 (zero) Command+0 (zero) Paragraph Format Control+Shift+P Command+ Shift+P Apply Headings 1 through 6 to a paragraph Control+1 through 6 Command+1 through 6 Alignment > Left Control+Alt+L Command+Option+L Alignment > Center Control+Alt+C Command+Option+C Alignment > Right Control+Alt+R Command+Option+R Make selected text bold Control+B Command+B Make selected text italic Control+I Command+I Edit Style Sheet Control+Shift+E Command+Shift+E Note: Many text formatting shortcuts have no effect when working in the HTML inspector.
<url>html/17shortcuts7.html</url>
<title>Finding and replacing text</title> Finding and replacing text Action Windows Macintosh Find Control+F Command+F Find Next/Find Again F3 Command+G Replace Control+H Command+H
<url>html/17shortcuts8.html</url>
<title>Working in tables</title> Working in tables Action Windows Macintosh 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 selected table cells Control+Alt+M Command+Option+M Split table cells Control+Alt+S Command+Option+S Update table layout (forces a redraw when in "faster table editing" mode) Control+Space Command+Space
<url>html/17shortcuts9.html</url>
<title>Working with frames</title> Working with frames Action Windows Macintosh Select a frame Alt-click in frame Shift+Option-click in frame Select next frame or frameset Alt+right arrow Command+right arrow Select previous frame or frameset Alt+left arrow Command+left arrow Select parent frameset Alt+up arrow Command+up arrow Select first child frame or frameset Alt+down arrow Command+down arrow Add a new frame to frameset Alt-drag frame border Option-drag frame border Add a new frame to frameset using push method Alt+Control-drag frame border Command+Option-drag frame border
<url>html/90cred1.html</url>
<title></title> Acknowledgments Documentation: Chris Basmajian, Lori Hylan, Sheila McGinn, and Judy Walthers von Alten Special thanks to Sho Kuwamoto, Eric Harshbarger, Jed Hartman, Joe Marini, Jay London, Heidi Bauer, Steven Johnson, Rob Christensen, Jean Fitzgerald, Karen Catlin, Bob Tartar, Margaret Dumas, Karen Gee, and Lisa Miller.
