MACROMEDIA DREAMWEAVER
Macromedia Dreamweaver
Introduction
This guide is designed to introduce you to using Macromedia Dreamweaver MX if you’re unfamiliar with any major aspect of it. The lessons in this guide lead you through the process of creating a simple but functional website. Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.
The visual editing features in Dreamweaver let you quickly create pages without writing a line of code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related tools and features. And Dreamweaver helps you to build dynamic database-backed web applications using server languages such as ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP, and PHP.
What is a web application?
A web application is a website that contains pages stored on a web server with partly or entirely undetermined content. The final content of a page is determined only when the user requests a page from the web server. Because the final content of the page varies from request to request based on the user’s actions, this kind of page is called a dynamic page.
How a web application works
A web application is a collection of regular and dynamic web pages. A regular web page is one that does not change when a user requests it: the web server sends the page to the requesting web browser without modifying it. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.
For example, you could design a page to display fitness results and leave certain information (such as employee name and results) to be determined when the page is requested by an employee.
Processing regular web pages
A regular website comprises a set of related HTML pages and files hosted on a computer running a web server.
A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a user clicks a link on a web page, chooses a bookmark in a browser, or enters a URL in a browser’s Address text box and clicks Go.
The final content of a regular web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example:
<html>
<head>
<title>Call Department</title>
</head>
<body>
<strong>Call Department</strong><br>
Talk to someone in Sales.
</body>
</html>
Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static page.
Note: Strictly speaking, a “static” page may not be static at all. For example, a rollover image or a Flash movie can make a static page come alive. However, this help system refers to a page as static if it is sent to the browser without modifications.
When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as shown in the following figure:
In the case of web applications, certain lines of code are undetermined when the user requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.
Processing dynamic pages
When a web server receives a request for a regular web page, the server sends the page to the requesting browser without further ado. The web server reacts differently when it receives a request for a dynamic page: it passes the page to a special software extension responsible for finishing the page. This special software is called an application server.
The application server reads the code on the page, finishes the page according to the instructions in the code, then removes the code from the page. The result is a static page that the application server passes back to the web server, which then sends the page to the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of the process:
Accessing a database
An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information.
The instruction to extract data from a database is called a database query. A query consists of search criteria expressed in a database language called SQL (Structured Query Language). The SQL query is written into the page’s server-side scripts or tags.
An application server cannot communicate directly with a database because the database’s proprietary format renders the data undecipherable in much the same way that a Word document opened in Notepad is undecipherable. The application server can communicate only through the intermediary of a database driver. A database driver is software that acts like an interpreter between the application server and the database.
After the driver establishes communication, the query is executed against the database and a recordset is created. A recordset is a subset of data extracted from one or more tables in a database. The recordset is returned to the application server and the data used in the dynamic page.
Here’s a simple database query written in SQL:
SELECT lastname, firstname, fitpoints
FROM employees
This statement creates a three-column recordset and fills it with rows containing the last name, first name, and fitness points of all employees in the database. For more information, see SQL Primer.
Here’s an illustration of the process of querying a database and returning data to the browser:
You can use almost any database with your web application, as long as you have the appropriate database driver for it.
If you plan to build small low-cost applications, you can use a file-based database, such as one created in Microsoft Access. If you plan to build robust, business-critical applications, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL.
If your database is located on a system other than your web server, make sure you have a fast connection between the two systems so that your web application can operate quickly and efficiently.
Creating Your First Website in Dreamweaver
This chapter provides a series of brief lessons that guide you through the process of creating a simple static website using the visual authoring tools in Macromedia Dreamweaver MX. For information on using the hand-coding tools in Dreamweaver, see Editing code in Dreamweaver; for information on creating a database-driven dynamic web application, see Understanding Web Applications.
The order of lessons in this chapter follows one possible workflow for creating a site. When creating your own sites, you can follow whatever workflow is most comfortable for you.
Set up a local site
The most common approach to creating a website using Dreamweaver is to create and edit pages on your local disk, and then upload copies of those pages to a remote web server to make them publicly available. It’s possible to use Dreamweaver in other ways (such as running a web server on your local computer, or uploading files to a staging server, or using a mounted disk as if it were your local disk), but the lessons in this guide assume that you’re working locally and then uploading to a remote server.
In Dreamweaver, the word site is used as shorthand to refer to any of the following things:
You’ll create a site definition using the Site Definition dialog box. You can fill in this dialog box in either of two views: Basic or Advanced. The Basic approach guides you through site setup step by step. If you’d rather edit site information without guidance, you can click the Advanced tab at any time.
The following procedure describes how to set options in the Basic version of the dialog box, which is also known as the Site Definition Wizard. For details of how to set options in the Advanced version, click the Advanced tab and then click the Help button.
To define a site:
After creating a local site, if you have already created assets (images or other pieces of content) for the site, place the assets in a folder inside the local site’s root folder. Then when you’re ready to add content to your pages, the assets will be ready to use.
The images and text files for the Global Car Rental site are provided with Dreamweaver. If you’re creating the Global Car Rental pages, you must copy the images for the site into your site’s local root folder. You can do this using the Site panel.
The assets are inside a folder called Design. For simplicity and consistency with the rest of this Getting Started guide, you’ll copy the entire Design folder into your site, then work inside that folder.
To copy a folder of images into your site’s local root folder:
Now that your site is set up, you can create web pages to populate it.
When you started Dreamweaver, a blank HTML document was automatically created. Before you proceed, close that document.
To close the default blank document:
You can set a variety of properties for a page, including its title, background color, text color, and so on. (To set page properties, choose Modify > Page Properties.) But if you just want to set the page title (the title that appears in the browser’s title bar), you can do that in the Document toolbar.
To set a page title for your document:
As you enter and format text in Design view, Dreamweaver creates the underlying HTML code. To enter code directly, use Code view. For information on Code view.
The predesigned pages provided with Dreamweaver contain placeholder “Lorem ipsum” text; if you’re basing your page on a predesigned page, you’ll have to replace the placeholder text with your own text when you’re ready to start adding content. It can be useful to leave the placeholder text in place until you’re done with design and layout, though, so that you or your client can look at the layout without being distracted by the text.
To add text to your page:
There are several ways to style text in HTML. One approach is to use Cascading Style Sheets (CSS) to define specific HTML tags as being formatted in specific ways.
This lesson shows how to create a simple CSS style sheet from a predesigned style sheet, then apply the new style sheet to text and modify the styles.
To create a CSS style sheet:
In this lesson, you can add images to the page you’re working on. If you have your own images, you can use them instead, but the first time you try adding an image, we recommend using one supplied with Dreamweaver’s sample site.
To add an image to your document:
In the predesigned pages provided with Dreamweaver, the background colors of table cells are mostly set to gray; for most sites, you’ll have to change the colors to match your site’s color scheme.
To set the background color of a table cell:
Take a quick time-out for a look at what Dreamweaver is doing when you add content to a page. As you add text, images, and other content, Dreamweaver generates HTML code.
Dreamweaver lets you view your document in either of two ways: Design view (where the document looks much like it would look in a browser), and Code view (where you can see the underlying HTML code). You can also use a split view that shows both Code and Design views.
To view the HTML code for your document:
Add text links between pages
You can create links at any stage of the site-creation process. If you’re following the lessons of this guide in order, then you’ve already created your pages and placed content in them; so in this lesson you’ll create links between the pages you’ve created.
The following are two other general approaches to creating links for a site:
A rollover image is an image that appears to change when a visitor to your site points to the image with the pointer. For example, a button on a page may appear to light up when the visitor points to it.
A rollover image consists of two images: the image displayed when the page first loads in the browser, and the image displayed when the pointer moves over the original image.
Note: When creating a rollover, make sure to use two images that have the same dimensions.
To create a rollover:
Now that you’ve created a working navigation bar, you can reuse it in all of your pages. In this lesson, you’ll copy the navigation-bar table cells and paste them into your second page.
There are a variety of other ways to reuse content in Dreamweaver, including library items, templates, and snippets.
To copy the navigation bar into another page:
The Design view gives a rough idea of what your page will look like in a browser, but the only way to be sure how it will look is to preview it in a browser. Each version of each browser has its own quirks; Dreamweaver strives to produce HTML that will look as similar as possible from one browser to another, but sometimes differences can’t be avoided. (That’s why Dreamweaver doesn’t display a preview directly; there’s no way for Dreamweaver to mimic all the different behaviors of all the different browsers.)
Preview in Browser shows how the pages will look when you’ve published them.
To preview your pages:
You’ve now created a small but functional website. The next step is to publish it by uploading the files to a remote web server.
Before you can proceed, you must have access to a remote web server (such as your ISP’s server, or a server owned by the client you’re working for, or an intranet server within your company, or an IIS or PWS server on a Windows computer). If you don’t already have access to such a server, contact your ISP, your client, or your system administrator.
The following procedure works best if your remote root folder is empty. If your remote site already contains files, then create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.
To connect to a remote site:
If you didn’t do so during installation, you can make your workspace look and feel like the popular coding environments of HomeSite and ColdFusion Studio.
To adopt the new coding workspace:
Before you start the lessons, you need to set up a site and copy a folder into the site. The integrated file browser in the Site panel enables you to view your local disk and network. This is useful for working with files that are not in the current site showing in the Site panel.
To copy pages to your site:
Before you start, you can view finished pages to see how your pages might look. Of course, your pages may vary.
To view the finished pages:
Use the Site panel to open the pages you need for this lesson.
To open pages:
Next, you’ll use the Tag Inspector to find a specific tag in the Locations page and quickly make changes to it.
To edit a tag using the Tag Inspector:
Now, you’ll add a link to the logo image you inserted so that when the user clicks it, the home page opens.
One way you can create the link is by simply placing an anchor tag (<a>) around the image tag in the code and setting the anchor tag’s attributes—with or without the help of Code Hints. Another way to add the link is to use the Insert bar.
To write code with the help of the Insert bar:
Now you’re ready to insert a table in the document.
Next, you’ll modify the table’s layout. You’ll add rows and columns to the table, and learn how to merge and split cells to create the desired page layout.
By merging and splitting cells you can customize a table’s design to fit your layout needs. Next, you’ll see how to use menu options or the Property inspector to merge or split table cells.
Let’s adjust the table’s dimensions. You’ll increase the amount of space between the table rows, and adjust the amount of space between the table columns.
You can add color to any part of a table. You’ll start by adding a background color to the entire table, then apply a different background color to cells in the table. You’ll finish by changing the border color.
Now, you’ll set the table border color. Border color applies to both the outside and inside borders of a table.
A percentage-based table stretches and shrinks based on the width of a browser window. (For example if you specify that a table uses a width of 75%, the table stretches to fill 75% of the horizontal space regardless of the browser window size. This can be useful in some instances, such as making sure a navigation menu is always displayed when a window is resized.
When you want to set the size of a table regardless of how a user resizes the browser window, use pixel-based tables. When you want the table to stretch to the size of the browser window, percentage-based tables are best.
To see the difference in percentage-based and pixel-based tables, you’ll add one of each to a page, then view it in a browser.
Now that you’ve learned how to work with the Insert Table command, let’s look at another way to work with tables—by drawing the table layout.
Next, you’ll work in Layout view, which allows you to draw layout cells or layout tables into which you can add content such as images, text, or other media.
In Layout view you can draw layout cells and layout tables to define the design areas of a document. You can start by inserting a table cell or a layout cell. When you insert a layout cell first Dreamweaver automatically creates a table to surround it.
Draw a layout cell
Next you’ll learn how to add a series of layout cells. You’ll add three layout cells next to the cell you just created to create layout for the page’s navigation buttons.
To design a page precisely, you can set the size of cells you add in a document. You can also reposition cells in the page.
Set image alignment
An image, like text, appears in the normal flow of HTML in a page and can appear as a paragraph by itself, or as part of a paragraph of text. You can set the alignment of an image in two ways in the Property inspector using the text alignment or image alignment controls.
Text alignment positions the paragraph in which the image is inserted and can be used to align an image to the left or right margin or to center it. Image alignment lets you set the relationship of an image to other content in the same paragraph (including another image). In Dreamweaver, the Align pop-up menu lets you select how the image aligns with the text.
Note: Not all of the image alignment options work in all browsers. In this tutorial you will use alignment options that work in Microsoft Internet Explorer and in Netscape Navigator.
View the completed document
Before you begin, look at the completed file to see what you’ll do in this tutorial.
As you see, when you place an image in a paragraph, text appears right next to the edge of the image. In the next step you’ll add a margin of space between the image and text.
You can use the horizontal and vertical space properties in the Property inspector to create space around an image. The horizontal space property adds space to the Left and right of the image, while the vertical space property adds space above and below an image.
As the final step in this part of the tutorial, you’ll set both alignment and space properties for the image.
You will create an image map so that a single image links to multiple pages.
So you can see how hotspot tools differ, this time you’ll use the Polygon Hotspot tool to define the hotspot area. The polygon tool allows you to set connecting points to define a hotspot area.
You’ll also learn how to open the linked document in a new window.
You use the CSS Styles panel to create, view, apply or edit style attributes.
The CSS Styles panel has two views or modes. Use the Apply Styles view to apply custom or class CSS styles, and you use the Edit Styles view to make changes to styles you have applied to your document. You can create a new style while working in either view.
Redefine an HTML tag
You can apply CSS styles to any tag in a document. The first style you’ll create will redefine the style attributes of the body tag.
Next, you’ll use the Background category in the CSS Styles panel to set background options.
With the new style applied you can barely distinguish the hypertext links in the document. Let’s create a style for the links.
The CSS styles you’ve created so far have only applied to this document. Internal style sheets apply only to the document in which they were created. Now, you’ll learn how to create an external style sheet which contains the styles you defined in this document.
You’ll attach the CSS style sheet you just created to another document in your site. The document you’ll work with is the same as the original css_start.htm file, before you added style to it.
You can use the Tag Library Editor to manage the tag libraries in Dreamweaver. The Tag Library Editor lets you add and delete tag libraries, tags, and attributes; set properties for a tag library; and edit tags and attributes.
To open the Tag Library Editor, choose Edit > Tag Libraries. The Tag Library Editor appears as follows. (The contents of this dialog box changes depending on the selected tag.)
Importing tags from XML files
You can import tags from an XML Document Type Definition (DTD) file or a schema.
To import tags from an XML DTD or schema:
To import ASP.NET custom tags into Dreamweaver:
You can import a JSP tag library into Dreamweaver from a variety of file types.
To import a JSP tag library into Dreamweaver:
You can import JSP tags from a server
To import JSP tags from a server:
If you use Macromedia JRun, you can import your JRun tags into Dreamweaver.
To import JRun tags into Dreamweaver:
Code Hints lets you insert and edit code as you type in Code view (or Code inspector). When you type certain characters, a list appears, suggesting options to complete your entry. You can use this feature to insert or edit code, or just to see the available attributes for a tag, the available parameters for a function, or the available methods for an object.
To insert a tag using Code Hints:
You can use the Tag inspector to edit tags in a property sheet similar to the ones found in other integrated development environments (IDEs).
To edit a tag using the Tag inspector:
As you write and edit your code in Code view or Code inspector, you can indent code blocks to visually separate the block from the rest, making it easier to find.
To indent a code block:
Copying and pasting code You can copy and paste source code from another application or from Code view itself. You can copy and paste the code as text or as code with tags intact.
To copy and paste source code as text:
A comment is descriptive text that you insert in the HTML code to explain the code or provide other information. The text of the comment appears only in Code view and will not display in your web page in the browser.
To insert a comment:
You can view all of the JavaScript or VBScript functions in a page open in Code view.
To view the script functions in a page:
To go to a function in your code:
Select a function from the Code Navigation pop-up menu. The function will be highlighted in Code view (or the Code inspector).
About HTML source code searches
Use the Source Code option in the Find or Replace dialog box to search for specific text strings in the HTML source code. For example, a search for black dog in the following code would produce two matches (in the alt attribute and in the first sentence):
<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 doesn’t match because it’s interrupted by a link.
Searching for tags and attributes
Use the Specific Tag option in the Find or Replace dialog box to search for specific tags, attributes, and attribute values. For example, you can search for all img tags with no alt attribute.
To perform a tag search:
About the Quick Tag Editor
The Quick Tag Editor has three modes:
You can cycle through the various modes by pressing Control+T (Windows) or Command+T (Macintosh) while the Quick Tag Editor is active.
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.
Inserting an HTML tag with the Quick Tag Editor
You can use the Quick Tag Editor to insert an HTML tag in your document.
To insert an HTML tag with the Quick Tag Editor:
You can write a JavaScript or VBScript for your page without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.
To insert a client-side script in Design view:
You can create a link in your document to an external script file without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.
To link to an external script file:
You can edit a script without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.
To edit the script in Design view:
Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content.
For example, your frame layout might consist of three frames: one narrow frame on the side that contains a navigation bar, one frame that runs along the top, containing the logo and title of the website, and one large frame that takes up the rest of the page and contains the main content. Each of these frames displays a separate HTML document.
In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side frame navigation bar contains links; clicking one of these links changes the content of the main content frame, but the contents of the side frame itself remain static. The main content frame on the right displays the appropriate document for whichever link the visitor clicks on the left.
A detailed discussion of all the ways to design and use frames, and the code required for hand-coding them, is beyond the scope of this chapter. If you need detailed information about the code used in advanced frame layouts, see a book about frames and framesets.
Creating frames and framesets There are two ways to create a frameset in Dreamweaver: you can design it yourself, or you can select from several predefined framesets. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s Design view.
Creating a predefined frameset
Predefined framesets make it easy for you to select the type of frameset you want to create.
There are two ways to create a predefined frameset: using the Insert bar and using the New Document dialog box. The Insert bar allows you to create a frameset and display the current document in one of the new frames; the New Document dialog creates a new empty frameset.
The predefined frameset icons in the Frames category of the Insert bar and in the Framesets category of the New Document dialog box provide a visual representation of each frameset as applied to the current document.
When you apply a frameset using the Insert bar, Dreamweaver automatically sets up the frameset to display the current document (the document in which the insertion point is located) in one of the frames. The blue area of a predefined frameset icon represents the current document, and the white areas represent frames that will display other documents.
To create a predefined frameset and display an existing document in a frame:
Before creating a frameset or working with frames, make the frame borders visible in the Document window’s Design view by choosing View >Visual Aids > Frame Borders.
To create a frameset:
Choose a splitting item (such as Split Frame Left or Split Frame Right) from the Modify > Frameset submenu.
The window is split into frames, and the document you started with appears in one of the frames.
To split a frame into smaller frames, do one of the following:
To delete a frame:
Drag a frame border off the page or to a border of the parent frame.
If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the document.
Note: You can’t remove a frameset entirely by dragging borders. To remove a frameset, close the Document window that displays it. If the frameset file has been saved, delete the file.
About nested framesets
frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested framesets. Most web pages that use frames are actually using nested frames, and most of the predefined framesets in Dreamweaver also use nesting. Any set of frames in which there are different numbers of frames in different rows or columns requires a nested frameset.
For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and two frames in the bottom row (a navigation frame and a content frame). This layout requires a nested frameset: a two-row frameset, with a two-column frameset nested in the second row.
Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t need to worry about the details of which frames are nested and which aren’t. For more information about the frame-splitting tools.
There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer frameset, or in a separate file of its own. Each predefined frameset in Dreamweaver defines all of its framesets in the same file.
Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at the code, which kind of nesting is being used. The most likely situation in which an external frameset file would be used in Dreamweaver is when you use the Open in Frame command to open a frameset file inside a frame; doing this may result in problems with setting targets for links. It’s generally simplest to keep all framesets defined in a single file.
Selecting frames and framesets
To make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change. You can select a frame or frameset either in the Document window or by using the Frames panel.
When you select a frame or frameset, a selection outline appears around the frame or frameset in both the Frames panel and the Document window’s Design view.
Selecting frames and framesets in the Frames panel
The Frames panel shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.
To display the Frames panel:
Choose Window > Others > Frames.
To select a frame in the Frames panel:
Click the frame in the Frames panel.
To select a frameset in the Frames panel:
Click the border that surrounds the frameset in the Frames panel.
Saving frame and frameset files
Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that are to be displayed in the frames. You can save each frameset file and framed document individually, or you can save the frameset file and all documents appearing in frames at once.
When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame is given a default filename. For example, the first frameset file is named UntitledFrameset-1, while the first document in a frame is named UntitledFrame-1.
When you select one of the save commands, a dialog box appears, ready to save a document with its default filename. Because the default filenames are so similar, it may be difficult for you to determine which document you are saving. To identify the frame that displays the document you’re saving, look at the frame selection outline in the Document window (in Design view).
To save a frameset file:
Click in the frame, then choose File > Save Frame or File > Save Frame As.
To save all files associated with a set of frames:
Choose File > Save All Frames.
This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, a heavy border appears around the frameset in the Design view, and a dialog box allows you to choose a filename. Then for each frame that hasn’t yet been saved, a heavy border appears around the frame, and a dialog box allows you to choose a filename. Note: If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document to be the default, don’t save the frameset file.
Viewing and setting frame properties
Use the Property inspector to view and set most frame properties. To change the background color of a frame, set the background color of the document in the frame.
To view or set frame properties:
Use the Property inspector to view and set most frameset properties. To set the title of the selected frameset, use the Page Properties dialog box or the Title field in the Document window’s toolbar.
To view or set frameset properties:
To use a link in one frame to open a document in another frame, you must set a target for the link. The target attribute of a link specifies the frame or window in which the linked content opens. For example, if your navigation bar is in the left frame, and you want the linked material to appear in the main content frame on the right, you must specify the name of the main content frame as the target for each of the navigation bar links. When a visitor clicks a navigation link, the specified content opens in the main frame.
To select a frame in which to open a file, use the Target pop-up menu in the Property inspector. You can set a file to replace the document being displayed in another frame, to appear in place of the entire frameset, to appear in the frame where the link was (by not choosing a target), or to open in a new browser window.
To target a frame:
Dreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not support frames. This content is stored in the frameset file, wrapped in a noframes tag. When a browser that doesn’t support frames loads the frameset file, the browser displays only the content enclosed by the noframes tag.
Note: Content in the noframes area should be more than just a note saying “You should upgrade to a browser that can handle frames.” Some people have good reasons for using a system that doesn’t allow them to view frames. Try to make your content as accessible as possible to such visitors.
To provide content for browsers that don’t support frames:
Use the Property inspector to name a frame and to set borders and margins.
Tip: To make a link change the contents of another frame, you must name the target frame. To make it easier to create cross-frame links later, name each of your frames when you create it.
To specify properties for the selected frame:
Use frameset properties to set borders and frame sizes for a frameset.
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.
To set approximate sizes for frames, drag frame borders in the Document window’s Design view. Then use the Property inspector to specify exact sizes, and to specify how much space the browser allocates to a row or column of frames when the browser window size doesn’t allow the frames to display at full size.
To specify border properties for the selected frameset:
Change the following options as desired:
Borders determines whether borders should appear around frames when the document is viewed in a browser. To display borders, select Yes; to prevent the browser from displaying borders, select No. To allow the browser to determine how borders are displayed, select Default.
Border Width specifies a width for all the borders in the frameset.
Border Color sets a color for the borders. Use the color picker to select a color, or type the hexadecimal value for a color.
To set frame sizes for rows and columns of the selected frameset:
You can create styles in two ways: you can format the text in the document and then create a style based on the selected text or you can create a style in the HTML Styles panel by selecting the formatting attributes you want to apply.
To create a new HTML style:
Applying a style is as easy as selecting the text or paragraph you want the style applied to, and then selecting the style in the HTML Styles panel.
To apply an HTML Style:
Applying a style is as easy as selecting the text or paragraph you want the style applied to, and then selecting the style in the HTML Styles panel.
To apply an HTML Style:
When you edit an HTML style, Dreamweaver does not automatically update text that was previously formatted using the HTML style. To update the style to previously formatted text, you must manually re-apply the style.
To edit an existing HTML style:
You can use the HTML Styles panel to record the HTML styles you use in your site, and then share them with other users, local sites, or remote sites.
HTML styles are automatically stored in your local site's Library folder in a file named Styles.xml. You can copy the Styles.xml file from the Library folder of one local site to the Library folder of another local site and reuse styles you create.
Note: Each site can only contain one Styles.xml file; therefore, if you created new HTML styles in the site to which you are copying a Styles.xml file, the file you copy there will replace the existing file. You won't lose any formatting changes you've already applied, and you can recreate the styles by selecting text in the document and defining a new HTML style.
To share your HTML styles with other sites or users:
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 or Dreamweaver > Preferences > General (Mac OS X), then in the Spelling Dictionary pop-up menu select the dictionary you want to use.
To check and correct spelling:
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 text box or with the selection in the Suggestions list.
Change All replaces all instances of the unrecognized word in the same manner.
About images
Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. Currently, GIF and JPEG file formats are the best supported and can be viewed by most browsers.
PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use GIFs or JPEGs for broader appeal.
GIF (Graphic Interchange Format) files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones. JPEG (Joint Photographic Experts Group) file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file.
PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks MX. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Macromedia Dreamweaver MX.
Note: PNG support in browsers is inconsistent; therefore, if you work with PNG files, you should also export them as GIFs or JPEGs to ensure you have web-ready versions of them.
Inserting an image
When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.
To insert an image:
An image placeholder is a graphic you use until final artwork is ready to be added to a web page.
You can define certain attributes of the placeholder: you can set the placeholder’s size and color, as well as provide it with a text label. An image placeholder’s color, size attributes, and label appear when the image placeholder is viewed in the Dreamweaver Document window.
To insert an image placeholder:
Use the image Property inspector to set the alignment of an image in relation to other elements in the same paragraph or line.
Note: HTML does not provide a way to wrap text around the contours of an image, as you can with some word processing applications
You can align an image to text, another image, a plug-in, or other elements in the same line. You can also use the alignment buttons (left, right, and center) to set the horizontal alignment of an image.
Default generally specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)
Baseline and Bottom align the baseline of the text (or other element in the same paragraph) to the bottom of the selected object.
Top aligns the top of an image to the top of the tallest item (image or text) in the current line.
Middle aligns the middle of the image with the baseline of the current line.
TextTop aligns the top of the image with the top of the tallest character in the text line.
Absolute Middle aligns the middle of the image with the middle of the text in the current line.
Absolute Bottom aligns to the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g).
Left places the selected image 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 image 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.
Creating a rollover image
rollover is an image that, when viewed in a browser, 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 a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.
You cannot see the effect of a rollover image in the Dreamweaver Document window. To see the rollover effect, press F12 to preview the page in a browser, then roll the pointer over the image.
To create a rollover:
The Create Web Photo Album command in Dreamweaver lets you automatically generate a web site that showcases an album of images from a given folder. This command uses JavaScript to call Fireworks, which creates a thumbnail and a larger-sized image for each of the images in the folder. Dreamweaver then creates a web page containing all the thumbnails, as well as links to the larger images. To use the Create Web Photo Album, you must have both Dreamweaver and Fireworks 4 or later installed on your system.
Before you begin, place all of the images for your photo album in a single folder. (The folder is not required to be in a site.) In addition, make sure that the image filenames end in extensions recognized by the Create Web Photo Album command (.gif, .jpg, .jpeg, .png, .psd, .tif, or .tiff). Images with unrecognized file extensions are not included in the photo album.
To create a Web photo album:
Editing a Flash movie from Dreamweaver
You cannot directly edit a SWF file, if you want to make changes to an exported SWF, select the Flash movie placeholder in the Dreamweaver document, and in the Property inspector click Edit. Edit launches Flash and if the path to the source document (FLA) is available, also launches the FLA file. When the edits are complete, Flash saves the changes in the FLA source document and re-exports the SWF movie file.
To launch and edit a Flash movie inserted from Dreamweaver:
You can insert a Flash movie or object, QuickTime or Shockwave movie, Java applet, ActiveX control, or other audio or video objects in a Dreamweaver document.
To insert a media object in a page:
Each file type that Dreamweaver doesn’t handle directly can be associated with one or more external editors found on your system. The editor that launches when you double-click the file in the Site panel is called the primary editor. You can set which editor is associated with a file type in File Types/Editors preferences.
If more than one editor is associated with the file type, you can launch a secondary editor for a particular file. Right-click (Windows) or Control-click (Macintosh) the filename in the Site panel, and choose an editor from the Open With submenu of the context menu.
To explicitly specify which external editors should be launched for a given file type, choose Edit > Preferences and select File Types/Editors from the Category list. Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selected extension are listed on the right under Editors.
You can also browse to find an external editor to edit your file. Right-click (Windows) or Control-click (Macintosh) the file in the Design view of the Document window, and choose Edit With > Browse or select the file and choose > Edit > Edit with External Editor.
To add a file type to the list of extensions in File Types/Editors preferences:
The Flash button object is an updateable button that is based on a Flash template. You can customize a Flash button object, adding text, background color, and links to other files. Flash buttons can be inserted while working in Design view or in Code view.
Note: You must save your document before inserting a Flash button or text object.
You use the Insert Flash Button dialog box to select from a set of designed Flash buttons. You can view an example of the button in the Sample field. Click the sample to see how it functions in the browser. While you are defining the Flash button (for example, changing text or font choices), the Sample field does not automatically update to reflect the changes. These changes will appear when you close the dialog box and view the button in Design view.
To insert a Flash button object:
You can modify the properties and content of a Flash button object.
To modify a Flash button object:
You can preview a Flash button in the Dreamweaver Document window.
To see the Flash button object play in the Document window:
It’s also a good idea to preview your document in the browser to see exactly how the Flash button looks.
Inserting a Flash text object
The Flash text object lets you create and insert a Flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and text of your choice.
To insert a Flash text object:
When you insert a Flash movie into a document, Dreamweaver uses both the object tag (defined by Microsoft Internet Explorer for ActiveX controls) and the embed tag (defined by Netscape Navigator) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the object and embed tags.
To insert a Flash movie:
You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed so that it plays while it is downloading. The most common streaming formats available on the web for the transmission of video files are RealMedia, QuickTime, and Windows Media. You must download a helper application to view these formats. With these formats, you can stream audio and video simultaneously.
If you’d like to include a short clip that can be downloaded rather than streamed, you can link to the clip or embed it in your page. These clips are often in the AVI or MPEG file format.
You can use Director to create Shockwave movies or Flash to create interactive, low-bandwidth, multimedia presentations for the web. With Flash, file size is surprisingly small, and the technology works across many platforms. (Of course, users must first download the free player plug-in before they can view these files.)
Adding sound to a page
There are several different types of sound files and formats, and several different ways to add sound to a web page. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers. Note: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file to a Flash movie, then embed the SWF file to improve consistency.
About audio file formats
The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design.
.midi or .mid (Musical Instrument Digital Interface) format is for instrumental music. MIDI files are supported by many browsers and don’t require a plug-in. Although their sound quality is very good, it can vary depending on a visitor’s sound card. A small MIDI file can provide a long sound clip. MIDI files cannot be recorded and must be synthesized on a computer with special hardware and software.
.wav (Waveform Extension) format files have good sound quality, are supported by many browsers, and don’t require a plug-in. You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.
.aif (Audio Interchange File Format, or AIFF) format, like WAV format, has good sound quality, can be played by most browsers, and doesn’t require a plug-in; you can also record AIFF files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages. .mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) format is a compressed format that makes sound files substantially smaller. The sound quality is very good: if an MP3 file is recorded and compressed properly, its quality can rival that of a CD. New technology lets you “stream” the file so that a visitor doesn’t have to wait for the entire file to download before hearing it. However, the file size is larger than a Real Audio file, so a whole song could still take quite a while to download over a normal phone line connection. To play MP3 files, visitors must download and install a helper application or plug-in such as QuickTime, Windows Media Player or RealPlayer.
.ra, .ram, .rpm, or Real Audio format has a very high degree of compression with smaller file sizes than MP3. Whole song files can be downloaded in a reasonable amount of time. Because the files can be “streamed” from a normal web server, visitors can begin listening to the sound before the file has completely downloaded. The sound quality is poorer than that of MP3 files, but new players and encoders have improved quality considerably. Visitors must download and install the RealPlayer helper application or plug-in to play these files.
Linking to an audio file
Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience. (Some browsers may not support embedded sound files.)
To create a link to an audio file:
Embedding audio incorporates the sound player directly into the page, but the sound only plays if visitors to your site have the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or if you want more control over the sound presentation itself. For example, you can set the volume, the way the player looks on the page, and the beginning and ending points of the sound file.
To embed an audio file:
Inserting Netscape Navigator plug-in content
Plug-ins enhance Netscape Navigator, providing ways to view media content in a wide variety of formats. Plug-ins are the means by which content files are played and displayed on your website. For example, typical plug-ins include RealPlayer and QuickTime, while some content files themselves include MP3s and QuickTime movies.
After you create content for a Navigator plug-in, 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 plug-in content:
To stop playing plug-in content:
Select a media element and choose View > Plugins > Stop, or click the Stop button in the Property inspector.
You can also choose View > Plugins > Stop All to stop all plug-in content from playing.
Troubleshooting Navigator plug-ins
If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does not play, try the following:
ActiveX controls (formerly known as OLE controls) are reusable components, somewhat like miniature applications, that can act like browser plug-ins. 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:
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 it into an HTML document using Dreamweaver. Dreamweaver uses the applet tag to mark the reference to the applet file.
To insert a Java applet:
Dreamweaver behaviors place JavaScript code in documents to allow visitors to interact with a web page to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.
Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.
Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the browser then checks to see whether there’s some JavaScript code (specified in the page being viewed) that the browser is supposed to call when that event is generated for that link. Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are events associated with links, whereas onLoad is an event associated with images and with the body section of the document.
About behaviors and text
You can’t attach a behavior to plain text. Tags like p and span don’t generate events in browsers, so there’s no way to trigger an action from those tags.
However, you can attach a behavior to a link. Therefore, to attach a behavior to text, the easiest approach is to add a null link (that doesn’t point to anything) to the text, then attach the behavior to the link. Note that if you do this, your text will appear as a link. You can change the link color and remove the underlining if you really don’t want it to look like a link, though site visitors may then be unaware that there’s a reason to click that text.
To attach a behavior to the selected text:
Attaching a behavior to a timeline
To trigger a behavior at a certain frame in a timeline (rather than having a visitor’s interaction trigger it), place the behavior in the timeline.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 inside Dreamweaver.
To place a behavior in a timeline:
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:
If your pages contain behaviors created with Dreamweaver 1 or Dreamweaver 2, those behaviors are not updated automatically when you open the pages in the current version of Dreamweaver. However, when you update one occurrence of a behavior in a page (by following the procedure below), all other occurrences of that behavior in that page are also updated.
To update a behavior in a page:
Call JavaScript
The Call JavaScript action lets you use the Behaviors panel to specify that a custom function or line of JavaScript code should be executed when an event occurs. (You can write the JavaScript yourself, or you can use code provided by various freely available JavaScript libraries on the web.)
To use the Call JavaScript action:
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 Internet Explorer 4.0 than in IE 3.0 or 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:
Use the Check Browser action to send 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 Navigator 4.0 or later, to go to another page if they have 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 (such as <a href="javascript:;">) and have the action determine the link’s destination based on the visitor’s browser brand and version.
To use the Check Browser action:
Use the Check Plugin action to send visitors to different pages depending on whether they have the specified plug-in installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not.
Note: You cannot detect specific plug-ins in Internet Explorer using JavaScript. However, selecting Flash or Director will add the appropriate VBScript code to your page to detect those plug-ins in IE on Windows.
To use the Check Plugin action:
In general, if the plug-in content is integral to your page, select the “Always go to first URL if detection is not possible” option; visitors without the plug-in will often be prompted by the browser to download the plug-in. If the plug-in content is not essential to your page, leave this option unselected. This option applies only to Internet Explorer; Navigator can always detect plug-ins.
Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame in a Macromedia Shockwave or Macromedia Flash movie.
To use the Control Shockwave or Flash action:
The Drag Layer action lets the visitor drag a layer. Use this action to create puzzles, slider controls, and other movable interface elements.
You can specify in which direction the visitor can drag the layer (horizontally, vertically, or in any direction), a target to which the visitor should drag the layer, whether to snap the layer to the target if the layer is within a certain number of pixels of the target, what to do when the layer hits the target, and more.
Because the Drag Layer action must be called before the layer can be dragged by the visitor, make sure the event that triggers the action occurs before the visitor 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:
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 in a timeline to jump to a new page after a specified time interval.
To use the Go To URL action:
Jump Menu Go The Jump Menu Go action is closely associated with the Jump Menu action; Jump Menu Go lets you associate a Go button with a jump menu. (Before you use this action, a jump menu must already exist in the document.) Clicking the Go button opens the link that’s selected in the jump menu. A 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 visitor chooses the same item that’s already chosen in the jump menu, the jump doesn’t occur. In general, that doesn’t matter, but if the jump menu appears in a frame, and the jump menu items link to pages in other frames, a Go button is often useful, to allow visitors to re-choose an item that’s already selected in the jump menu.
To add a Jump Menu Go action:
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. For example, you can use this behavior to open a larger image in a separate window when the visitor clicks a thumbnail image; with this behavior, you can make the new window the exact size of the image.
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 attribute 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:
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. This name cannot contain spaces or special characters.
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 additional audio support (such as an audio plug-in) to play sounds. Therefore, different browsers with different plug-ins often play sounds differently. It’s difficult to reliably predict how visitors to your site will experience the sounds you provide.
To use the Play Sound action:
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 (\{).
To use the Popup Message action:
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 select 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:
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 (\{ ).
To attach a Set Text of Layer action:
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. Note, however, that visitors often ignore or overlook messages in the status bar (and not all browsers provide full support for setting the text of the status bar); if your message is important, consider displaying it as a pop-up message or as the text of a layer.
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 (\{).
To use the Set Text of Status Bar action:
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
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 (\{).
To create a named text field:
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:
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:
You use the Show Pop-Up Menu behavior to create or edit a Dreamweaver pop-up menu or to open and modify a Fireworks pop-up menu you’ve inserted in a Dreamweaver document. You set options in the Show Pop-Up Menu dialog box to create a horizontal or vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.
To use the Show Pop-up Menu action:
You use the Contents tab in the Show Pop-up Menu dialog box to create menu items. You can also use this tab to remove existing items, or to change the order in which they appear in a menu.
To add pop-up menu items:
In the Show Pop-Up Menu list, select the item you want to make into a submenu item, then do one of the following:
To change the order of an item in the menu:
In the Show Pop-Up Menu list, select the item you want to move up or down, then click the Up or Down arrow to move the item where you want it to appear.
To remove an item from the menu:
After you create the menu items, use the Show Pop-Up Menu’s Appearance tab to set the orientation, font attributes, and button state attributes for the pop-up menu.
Note: The Appearance tab’s preview pane provides an approximate rendering of the options you set in this tab.
To set the appearance of a pop-up menu:
Use options in the Advanced tab to specify additional attributes of the menu cells. For example, you can set the width, height, cell spacing or padding of the menu button, indent text, and set border attributes.
To set advanced formatting attributes for a pop-up menu:
Use position options to set where the pop-up menu displays relative to the triggering image or link. You can also set whether the menu hides or not when the user moves the pointer away from the trigger.
To set pop-up menu position options:
The Show Pop-Up Menu behavior allows you to edit or update the contents of a pop-up menu. You can add, delete, or change menu items, rearrange them, and set where a menu is positioned relative to the triggering image or link.
To open an existing HTML-based pop-up menu:
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). Inserting a rollover image automatically adds a Swap Image behavior to your page.
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. Otherwise, the image you swap in appears compacted or expanded to fit the original image’s dimensions.
To use the Swap Image action:
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.
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 Timelines panel 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:
Play Timeline and Stop Timeline Use the Play Timeline and Stop Timeline actions to let visitors 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 Timelines panel.
To use the Play Timeline and Stop Timeline actions:
Validate Form
The Validate Form action checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this action to individual text fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with the onSubmit event to evaluate several text 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 text fields contains invalid data.
To use the Validate Form action:
About the Layers panel
The Layers panel is a way to manage the layers in your document. To open the Layers panel, choose Window > Others > Layers. Layers are displayed as a list of names, in order of z-index; the first created layer appears at the bottom of the list, and the most recently created layer at the top of the list. Nested layers are displayed as names connected to parent layers. Click the plus (+) or minus (–) icons (Windows) or the expander arrow (Macintosh) to show or hide nested layers.
Use the Layers panel to prevent overlaps, to change the visibility of layers, to nest or stack layers, and to select one or more layers.
Nesting layers
A nested layer is a layer whose code is contained in another layer. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility from its parent.
To create a nested layer, do one of the following:
Select one or more layers to manipulate them or change their properties.
To select a layer, do one of the following:
To resize the selected layer, do one of the following:
Use the grid as a visual guide for drawing, positioning, or resizing layers in the Document window’s Design view. You can make page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.
To show or hide the grid:
Choose View > Grid > Show Grid.
To enable or disable snapping:
Choose View > Grid > Snap to Grid.
To change grid settings:
You can view and set various attributes of a layer in the Property inspector.
To view all layer properties:
While working on your document, you can show and hide layers manually, using the Layers panel, to see how the page will appear under different conditions.
Note: The currently selected layer always becomes visible and appears in front of other layers while it’s selected.
To change layer visibility:
You can create your layout using layers, then convert the layers to tables so that your layout can be viewed in older browsers.
To convert layers to a table:
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, do one of the following:
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 allow you to overlap layers even when the Prevent Overlaps option is enabled. If you insert a layer using the Insert menu, enter numbers in the Property inspector, or reposition layers by editing the HTML source code, you can cause layers to overlap or nest while this option is enabled. If overlaps happen, drag overlapping layers in the Design view to separate them.
Using the Timelines panel
The Timelines panel shows how the properties of layers and images change over time. Choose Window > Others > Timelines to open the Timelines panel.
Timeline pop-up menu specifies which of the document’s timelines is currently displayed in the Timelines panel.
Playback head shows which frame of the timeline is currently displayed in the Document window.
Frame numbers indicate the sequential numbering of frames. The number between the Back and Play buttons is the current frame number. 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.
Note: Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate. The frame rate is ignored if it is higher than the browser can manage.
Context menu contains various timeline-related commands.
Behaviors channel is the channel for behaviors that should be executed at a particular frame in the timeline.
Animation bars show the duration of each object’s animation. 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.
Playback options
The following 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 forward.
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 Behaviors channel after the last frame of the animation. Double-click the behavior’s marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.
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:
After defining a timeline’s basic components, you can make changes such as adding and removing frames, changing the start time of the animation, and so on.
To modify a timeline, do any of the following:
To make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation shift so that their relative positions remain constant. To prevent the other keyframes from moving, Alt-drag (Windows) or Option-drag (Macintosh) the end frame marker.
In addition to moving layers with timelines, you can change the visibility, size, and stacking order of a layer; you can also change the source file of an image.
To change image and layer properties with a timeline:
Instead of trying to control all the action on a page with one timeline, it’s easier to work with separate timelines that control discrete parts of the page. For example, a page might include interactive elements that each trigger a different timeline.
To manage multiple timelines, do any of the following:
Once you have an animation sequence that you like, you can copy it and paste it into another area of the current timeline, into another timeline in the same document, or into a timeline in another document. You can also copy and paste multiple sequences at once.
To cut or copy and paste animation sequences:
Linking files and documents
You can use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or file. For information about using the site map to create links.
To link documents using the Property inspector’s folder icon or link text box:
Linking to a specific place in a document
You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.
Creating a link to a named anchor is a two-step process. First, create a named anchor; then create a link to the named anchor.
To create a named anchor:
To link to a named anchor:
You can add hyperlink text to link to another file.
To add a hyperlink using the Hyperlink command:
An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e-mail message window, the To field is automatically updated with the address specified in the e-mail link.
To create an e-mail link using the Insert E-Mail Link command:
A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. Once you have created a null link, you can attach a behavior to it to swap an image or to display a layer when the pointer is moved over the link. For information about attaching behaviors to objects.
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:
Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server.
To turn on link management in Dreamweaver:
In the Site panel, choose Site > Recreate Site Cache.
Inserting a jump menu
To insert a jump menu in your document, use the Jump Menu form object.
To create a jump menu:
A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site.
Before using the Insert Navigation Bar command, create a set of images for the display states of each navigation element. (It can be helpful to think of a navigation bar element as a button, because when clicked, it takes the user to another page.)
A navigation bar element can have four states:
You can create a navigation bar, copy it to other pages in your site, use it with frames, and edit the page behaviors to show different states as pages are accessed.
To create a navigation bar:
This guide is designed to introduce you to using Macromedia Dreamweaver MX if you’re unfamiliar with any major aspect of it. The lessons in this guide lead you through the process of creating a simple but functional website. Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.
The visual editing features in Dreamweaver let you quickly create pages without writing a line of code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related tools and features. And Dreamweaver helps you to build dynamic database-backed web applications using server languages such as ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP, and PHP.
What is a web application?
A web application is a website that contains pages stored on a web server with partly or entirely undetermined content. The final content of a page is determined only when the user requests a page from the web server. Because the final content of the page varies from request to request based on the user’s actions, this kind of page is called a dynamic page.
How a web application works
A web application is a collection of regular and dynamic web pages. A regular web page is one that does not change when a user requests it: the web server sends the page to the requesting web browser without modifying it. In contrast, a dynamic web page is modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynamic.
For example, you could design a page to display fitness results and leave certain information (such as employee name and results) to be determined when the page is requested by an employee.
Processing regular web pages
A regular website comprises a set of related HTML pages and files hosted on a computer running a web server.
A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a user clicks a link on a web page, chooses a bookmark in a browser, or enters a URL in a browser’s Address text box and clicks Go.
The final content of a regular web page is determined by the page designer and doesn’t change when the page is requested. Here’s an example:
<html>
<head>
<title>Call Department</title>
</head>
<body>
<strong>Call Department</strong><br>
Talk to someone in Sales.
</body>
</html>
Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn’t change once it’s on the server, this kind of page is called a static page.
Note: Strictly speaking, a “static” page may not be static at all. For example, a rollover image or a Flash movie can make a static page come alive. However, this help system refers to a page as static if it is sent to the browser without modifications.
When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the requesting browser, as shown in the following figure:
In the case of web applications, certain lines of code are undetermined when the user requests the page. These lines must be determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.
Processing dynamic pages
When a web server receives a request for a regular web page, the server sends the page to the requesting browser without further ado. The web server reacts differently when it receives a request for a dynamic page: it passes the page to a special software extension responsible for finishing the page. This special software is called an application server.
The application server reads the code on the page, finishes the page according to the instructions in the code, then removes the code from the page. The result is a static page that the application server passes back to the web server, which then sends the page to the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of the process:
Accessing a database
An application server lets you work with server-side resources such as databases. For example, a dynamic page may instruct the application server to extract data from a database and insert it into the page’s HTML. For more information.
The instruction to extract data from a database is called a database query. A query consists of search criteria expressed in a database language called SQL (Structured Query Language). The SQL query is written into the page’s server-side scripts or tags.
An application server cannot communicate directly with a database because the database’s proprietary format renders the data undecipherable in much the same way that a Word document opened in Notepad is undecipherable. The application server can communicate only through the intermediary of a database driver. A database driver is software that acts like an interpreter between the application server and the database.
After the driver establishes communication, the query is executed against the database and a recordset is created. A recordset is a subset of data extracted from one or more tables in a database. The recordset is returned to the application server and the data used in the dynamic page.
Here’s a simple database query written in SQL:
SELECT lastname, firstname, fitpoints
FROM employees
This statement creates a three-column recordset and fills it with rows containing the last name, first name, and fitness points of all employees in the database. For more information, see SQL Primer.
Here’s an illustration of the process of querying a database and returning data to the browser:
You can use almost any database with your web application, as long as you have the appropriate database driver for it.
If you plan to build small low-cost applications, you can use a file-based database, such as one created in Microsoft Access. If you plan to build robust, business-critical applications, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or MySQL.
If your database is located on a system other than your web server, make sure you have a fast connection between the two systems so that your web application can operate quickly and efficiently.
Creating Your First Website in Dreamweaver
This chapter provides a series of brief lessons that guide you through the process of creating a simple static website using the visual authoring tools in Macromedia Dreamweaver MX. For information on using the hand-coding tools in Dreamweaver, see Editing code in Dreamweaver; for information on creating a database-driven dynamic web application, see Understanding Web Applications.
The order of lessons in this chapter follows one possible workflow for creating a site. When creating your own sites, you can follow whatever workflow is most comfortable for you.
Set up a local site
The most common approach to creating a website using Dreamweaver is to create and edit pages on your local disk, and then upload copies of those pages to a remote web server to make them publicly available. It’s possible to use Dreamweaver in other ways (such as running a web server on your local computer, or uploading files to a staging server, or using a mounted disk as if it were your local disk), but the lessons in this guide assume that you’re working locally and then uploading to a remote server.
In Dreamweaver, the word site is used as shorthand to refer to any of the following things:
- A website: a set of pages on a server, to be viewed by a visitor to the site using a web browser.
- A remote site: the files on the server that make up a website, from your (the author’s) point of view rather than a visitor’s point of view.
- A local site: the files on your local disk that correspond to the files in the remote site. You edit the files on your local disk, then upload them to the remote site.
- A Dreamweaver site definition: a set of defining characteristics for a local site, plus information on how the local site corresponds to a remote site.
You’ll create a site definition using the Site Definition dialog box. You can fill in this dialog box in either of two views: Basic or Advanced. The Basic approach guides you through site setup step by step. If you’d rather edit site information without guidance, you can click the Advanced tab at any time.
The following procedure describes how to set options in the Basic version of the dialog box, which is also known as the Site Definition Wizard. For details of how to set options in the Advanced version, click the Advanced tab and then click the Help button.
To define a site:
- Choose Site > New Site. (That is, choose New Site from the Site menu.)
The Site Definition dialog box appears - If the dialog box is showing the Advanced tab, click Basic.
The first screen of the Site Definition Wizard appears, asking you to enter a name for your site. - In the text box, enter a name to identify the site within Dreamweaver. The name can be anything you want. For example, you could name the site Global Car Rental.
- Click Next to proceed to the next step.
The next screen of the wizard appears, asking if you want to work with a server technology. - Select the No option to indicate that for now, this site is a static site, with no dynamic pages.
- Click Next to proceed to the next step.
The next screen of the wizard appears, asking how you want to work with your files. - Select the option labeled “Edit local copies on my machine, then upload to server when ready (recommended).”
There are a variety of ways that you can work with files during site development, but for the purposes of this lesson, choose this option. - The text box allows you to specify a folder on your local disk where Dreamweaver should store the local version of the site’s files. It’s easier to specify an accurate folder name if you browse to the folder rather than typing the path, so click the folder icon next to the text box.
The Choose Local Root Folder for Site dialog box appears. - In the Choose Local Root Folder for Site dialog box, start by navigating to a folder on your local disk where you can store all of your sites. Don’t click OK yet.
Note: This sites folder will eventually contain multiple sites, so don’t choose the sites folder as the local root folder. You will soon create a local root folder for this particular site inside the sites folder. - Still in the Choose Local Root Folder for Site dialog box, create a new folder inside your Sites folder. Name the new folder GettingStarted, and click OK to dismiss the Choose Local Root Folder for Site dialog box.
This new folder is the local root folder for your site.
- Click Next to proceed to the next step.
The next screen of the wizard appears, asking how you connect to your remote server.
- For now, choose None from the pop-up menu. Click Next to proceed to the next step.
The next screen of the wizard appears, showing a summary of your settings. - Click Done to finish.
- Click OK to allow Dreamweaver to create the site cache.
The Site panel normally shows all the files and folders in your site, but right now your site doesn’t contain any files or folders. When there are files in a site, the file list in the Site panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop. If you already have a set of local HTML files that you want to use to create a website, you can use the file browser in the Site panel to copy those files into your newly created site’s folder. However, you may want to complete the lessons in this guide using the files provided with Dreamweaver before you start using your own files.
After creating a local site, if you have already created assets (images or other pieces of content) for the site, place the assets in a folder inside the local site’s root folder. Then when you’re ready to add content to your pages, the assets will be ready to use.
The images and text files for the Global Car Rental site are provided with Dreamweaver. If you’re creating the Global Car Rental pages, you must copy the images for the site into your site’s local root folder. You can do this using the Site panel.
The assets are inside a folder called Design. For simplicity and consistency with the rest of this Getting Started guide, you’ll copy the entire Design folder into your site, then work inside that folder.
To copy a folder of images into your site’s local root folder:
- If the Site panel isn’t already open, open it by choosing Window > Site.
The Site panel appears. (If the Site panel was already open, it may not appear at this step. If the Site panel does not appear, choose Window > Site again to display it.) - In the Site panel, expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
- Expand folders as necessary to reach the Dreamweaver application folder.
- Expand the Samples folder.
- Expand the GettingStarted folder in the Samples folder.
- Select the Design folder in the GettingStarted folder and press Control+C (Windows) or Command+C (Macintosh) to copy it.
The Design folder contains a folder named Assets, which contains various assets related to the site, including an images subfolder. - Still in the Site panel, scroll to your site’s local root folder (the folder that you created when you defined the site) and select that folder. Then press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the Design folder into your site.
Now that your site is set up, you can create web pages to populate it.
When you started Dreamweaver, a blank HTML document was automatically created. Before you proceed, close that document.
To close the default blank document:
- Choose File > Close.
The New Document dialog box appears.
- In the category list on the left, select the Page Designs category.
The list in the middle column of the dialog box is relabeled Page Designs. A list of pre-designed page designs appears. - Scroll down in the Page Designs list and choose the item named Text: Article D with Navigation.
- Note: There is another item with a similar name. Be careful not to choose the item named Text: Article D, which has no navigation bar.
- Make sure the Document radio button is selected at the lower right of the dialog box.
- Click Create.
- A new page appears, using the layout you chose, in a new Document window. The page is filled with placeholder “Lorem ipsum” text to show how the page design will look when real text is added to it.
- Save your document.
- Choose File > Save.
- In the Save As dialog box, browse to the Design folder inside the site root folder.
- Enter the filename index.htm.
- Click Save.
You can set a variety of properties for a page, including its title, background color, text color, and so on. (To set page properties, choose Modify > Page Properties.) But if you just want to set the page title (the title that appears in the browser’s title bar), you can do that in the Document toolbar.
To set a page title for your document:
- If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
Dreamweaver’s Document toolbar appears. In the integrated workspace, it appears at the top of the document area by default; in the floating workspace, it appears as part of the Document window.
- In the Title text box, where it says “Untitled Document,” type a title for the page, such as Global Car Rental Home Page. Then press Enter (Windows) or Return (Macintosh) to see the page title update in the Document window’s title bar.
- Save your document.
As you enter and format text in Design view, Dreamweaver creates the underlying HTML code. To enter code directly, use Code view. For information on Code view.
The predesigned pages provided with Dreamweaver contain placeholder “Lorem ipsum” text; if you’re basing your page on a predesigned page, you’ll have to replace the placeholder text with your own text when you’re ready to start adding content. It can be useful to leave the placeholder text in place until you’re done with design and layout, though, so that you or your client can look at the layout without being distracted by the text.
To add text to your page:
- Triple-click in the bold placeholder text at the top of the left column (under the image placeholder) to select the entire bold paragraph.
- Type Safety Tips (or your own heading text if you prefer).
- Select the three paragraphs of placeholder text below the horizontal rule.
- Type the following text (or your own text if you prefer):
The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch! - In the right column, triple-click the word “News” and type Globe-Trotter Promotions to replace it.
- In the Site panel, locate the promotions.txt file in your Assets folder. Double-click the file’s icon to open it.
This file contains copy for Global Car Rentals special promotions.
Note that the text file appears in a new Document window with a dark bar down the left side. This window is in Code view, and can’t be switched to Design view because the file is not an HTML file
- In the promotions.txt Document window, press Control+A (Windows) or Command+A (Macintosh) to select all the text, then choose Edit > Copy to copy the text.
- In the index.htm Document window, select all of the placeholder text in the lower cell of the right-hand column, and choose Edit > Paste.
- The text is pasted into the table.
- Click just before the word “Rent” (the second paragraph of text you just pasted), and choose Insert > Horizontal Rule to put a horizontal line between the two promotions.
- Save your document
- Switch to the promotions.txt file. Close that file by choosing File > Close.
There are several ways to style text in HTML. One approach is to use Cascading Style Sheets (CSS) to define specific HTML tags as being formatted in specific ways.
This lesson shows how to create a simple CSS style sheet from a predesigned style sheet, then apply the new style sheet to text and modify the styles.
To create a CSS style sheet:
- Choose File > New.
- In the New Document dialog box, select the CSS Style Sheets category from the category list on the left.
The list in the middle column of the dialog box is relabeled CSS Style Sheets. A list of pre-designed style sheets appears. - In the CSS Style Sheets list, select a style sheet. For the Global Car Rental site, select Basic: Verdana, which redefines the body, td, and th tags by specifying fonts for them. Then click Create .
Dreamweaver creates a new text file containing a small set of predefined CSS styles. - Choose File > Save to save the new CSS file. Save it in the site’s assets folder; name it text.css (or any other name you like).
- Choose File > Close to close the CSS file.
- In the Window menu, choose an HTML file (such as index.htm).
Note: If your system preferences are set to not show file extensions, the index.htm file appears in the Window menu with the name index. - Choose Window > CSS Styles to display the CSS Styles panel.
- At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
If you haven’t previously defined styles for this document, no styles are available. - At the bottom of the CSS Styles panel, click the Attach Style Sheet button.
- n the Link External Style Sheet dialog box, click Browse to locate a style sheet.
- In the Select Style Sheet File dialog box, browse to and select the new style sheet you created in the assets folder, then click OK (Windows) or Choose (Macintosh) to attach the style sheet.
- In the Link External Style Sheet dialog box, click OK to attach the style sheet.
The style sheet’s name and contents appear in the CSS Styles panel. The styles defined in the style sheet are applied to the text in the HTML document. For example, body text appears in Verdana. - Save your document.
- At the top of the CSS Styles panel, click the Edit Styles radio button to show available styles.
- Select the name of the CSS file in the CSS Styles panel and click the Edit Style Sheet button at the bottom of the CSS Styles panel.
A dialog box appears showing the names of the styles in the style sheet. - Select one of the styles, such as body, and click Edit.
The CSS Style Definition dialog box appears.
- Enter a size for the text, such as 13 pixels. Adjust other options as you like.
- Click OK to redefine the style.
- Edit the other styles. To create the styles used in the Global Car Rental site, set the body, td, and th styles to a size of 13 pixels.
- When you’re done editing styles, click the Save button to save your changes and close the stylesheet dialog box.
The changed styles are applied to your document. For example, body text appears in 13-pixel Verdana.
In this lesson, you can add images to the page you’re working on. If you have your own images, you can use them instead, but the first time you try adding an image, we recommend using one supplied with Dreamweaver’s sample site.
To add an image to your document:
- Save your document if you haven’t already done so.
You can insert an image into an unsaved document, but if you do, a dialog box will appear, informing you that the URL used for the image will be the full local path to the image. If you take this approach, Dreamweaver fixes the URLs when you do save the document, but it’s easiest to save the document before adding images. - To insert an image in place of an existing image placeholder, double-click the placeholder. For example, to insert the company logo at the top left of the Global Car Rental page, double-click the small placeholder that’s labeled “image (100 x 50).”
The Select Image Source dialog box appears. - Near the bottom of the dialog box, make sure that the Relative To pop-up menu is set to Document.
- Browse to an image in your assets folder (such as logo.jpg).
- Click OK or Select (Windows) or Open or Choose (Macintosh) to insert the image.
In the Document window, the image appears where the placeholder was. - Click the large image placeholder that you created .
- Make sure the Site panel and the Property inspector are showing (choose Window > Site Files and Window > Properties if they aren’t visible).
- In the Property inspector, drag from the Src text box’s Point-to-File icon to the Site panel. (Make sure to drag from the Point-to-File icon next to the Src text box, not the one next to the Link text box.) Continue to hold the mouse button down as you point to the assets folder (if the folder is closed); the folder opens. Continue to hold the button down as you point to the images folder; that folder opens as well. Continue to hold the button down until the pointer is over the vintage.jpg file. Release the mouse button to select vintage.jpg.
In the Document window, the image appears where the placeholder was. If the wrong image appears, look at the filename in the Src text box; if you selected the wrong file, drag the Point-to-File icon again. - To insert images in places where you don’t already have placeholders, click in the Design view to place the insertion point where you want the image, then choose Insert > Image.
If you insert an image for which the image file isn’t inside your site’s local root folder, Dreamweaver provides the option to automatically copy the image into the site. - Save your document.
In the predesigned pages provided with Dreamweaver, the background colors of table cells are mostly set to gray; for most sites, you’ll have to change the colors to match your site’s color scheme.
To set the background color of a table cell:
- If the Property inspector isn’t open, choose Window > Properties to open it.
- If the Property inspector is collapsed (showing only its title bar), click the expander arrow in the title bar to expand it.
- If the Property inspector isn’t showing all properties, click the expander arrow at the lower right corner of the Property inspector to view all properties.
- Control-click (Windows) or Command-click (Macintosh) a cell to select the cell. For example, in the Global Car Rental sample page, there’s now a table cell that contains the logo image for the car rental company; Control-click or Command-click the cell that contains that logo image.
The lower half of the Property inspector shows cell properties. If the lower half of the Property inspector isn’t visible, click the expander arrow at the lower right corner of the Property inspector to view all properties. - In the Property inspector, click the Background Color button that appears next to the lower of the two Bg labels.
The color picker appears and the pointer changes to an eyedropper.
- Select a color. You can either select a color in the color picker’s palette, or click anywhere on your display to select the color of the pixel you clicked. For example, click the background of the Global logo image to make the background color of the table cell match the image background color.
The table cell’s background color changes to the color you picked. - Repeat that procedure for each table cell that you want to change the background color of. In the Global Car Rental sample page, change the background colors of all of the navigation-bar table cells and of the header cell in the second column of text (the cell that now contains the text “Globe-Trotter Promotions”), to make them all match the background color of the Global logo.
- Save your document.
Take a quick time-out for a look at what Dreamweaver is doing when you add content to a page. As you add text, images, and other content, Dreamweaver generates HTML code.
Dreamweaver lets you view your document in either of two ways: Design view (where the document looks much like it would look in a browser), and Code view (where you can see the underlying HTML code). You can also use a split view that shows both Code and Design views.
To view the HTML code for your document:
- If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
- In the Document toolbar, click the Code and Design view button.
The window splits, showing the underlying HTML code.
- If the Document toolbar isn’t already visible, choose View > Toolbars > Document.
- In the Document toolbar, click the Design view button.
- Open the new customerService.htm page by double-clicking it in the Site panel.
Look at the Document window’s title bar to be sure that you’re looking at the customerService.htm file. The title bar should say “Global Car Rental Home Page” and then a folder name and a filename; the filename should be customerServe.htm (or whatever you named it in the previous procedure). - In the customerService.htm page, select the large image (the image showing the car in the main text column) by clicking it.
In the tag selector, click the <td> tag. - Press Backspace (Windows) or Delete (Macintosh).
Everything in the table cell, including the image and the text, is deleted. - Save your document.
- In the Site panel, locate the custServInfo.htm file in your Assets folder. Double-click the file’s icon to open it.
This file contains content to be added to the customer service page. If you were creating your own site, you would add your own content here, but for the purposes of this lesson, this content is provided for you. - In the custServInfo.htm Document window, choose View > Code to view the HTML code.
- Still in the custServInfo.htm Document window, press Control+A (Windows) or Command+A (Macintosh) to select everything in the file.
If you’re not in Code view when you do this, you may have to press Control+A or Command+A several times to select everything; if the insertion point is inside a table cell, Select All initially selects only that cell. For simplicity, switch to Code view before selecting everything. - Press Control+C (Windows) or Command+C (Macintosh) to copy everything.
- Switch back to the customerService.htm document. Click inside the now-empty main text column (the wide column on the left).
- Choose Edit > Paste HTML.
The HTML code that you copied from the custServInfo.htm file is pasted into this document. (If you choose Edit > Paste instead of Edit > Paste HTML, the HTML code is pasted into Design view as if it’s text. If HTML code appears in your Design view at this step, choose Edit > Undo and try again.)
Add text links between pages
You can create links at any stage of the site-creation process. If you’re following the lessons of this guide in order, then you’ve already created your pages and placed content in them; so in this lesson you’ll create links between the pages you’ve created.
The following are two other general approaches to creating links for a site:
- Create a set of dummy pages first, then add links between them, and then add content to the pages.
- As you create a page, specify links to pages that don’t exist yet; later, create pages that have the filenames you linked to.
- Switch to the customer service page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
- In the bottom of the wide text column on the left side, select the words “Home Page”.
If you didn’t add text to the left column of the customer service page when you created it, enter the words Home Page in that text column and select those words. - If the Property inspector isn’t open, open it by choosing Window > Properties.
- Click the folder icon next to the Link text box in the Property inspector. Browse to the index.htm file in your site’s local root folder.
A rollover image is an image that appears to change when a visitor to your site points to the image with the pointer. For example, a button on a page may appear to light up when the visitor points to it.
A rollover image consists of two images: the image displayed when the page first loads in the browser, and the image displayed when the pointer moves over the original image.
Note: When creating a rollover, make sure to use two images that have the same dimensions.
To create a rollover:
- Switch to the main (index.htm) page if it’s not the current page. (If the page is not open, open it by double-clicking its icon in the Site panel.)
- In the Document window, place the insertion point where you want the rollover image to appear. On the Global Car Rental main page, for example, double-click in the navigation-bar table cell that says “Lorem” and press Backspace (Windows) or Delete (Macintosh) to delete the text, leaving the insertion point in the cell.
- Choose Insert > Interactive Images > Rollover Image.
- In the Insert Rollover Image dialog box, type a name for the image, such as home-image, in the Image Name text box.
This gives the image a unique name, and makes it easily identifiable in the HTML code. - In the Original Image text box, click Browse; then navigate to the btnHome.jpg file in your site’s images folder (inside the assets folder). Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).
The Original Image text box indicates which image to display when the page first appears in the browser. - In the Rollover Image text box, click Browse; then navigate to btnHome_on.jpg in your site’s images folder. Make sure the Relative To pop-up menu is set to Document; then click OK or Select (Windows) or Open or Choose (Macintosh).
The Rollover Image text box indicates which image to display when the pointer is pointing to the image in the browser. - Make sure the Preload Rollover Image option is selected so the rollover images load when the page opens in the browser, ensuring a quick transition between images when a user moves the pointer over the original image.
- In the When Clicked, Go To URL text box, click the Browse button and browse to index.htm.
The index.htm file is the file that you’re editing, so this step causes the rollover image to link to the page that you’re placing the rollover image on. It might seem unnecessary to have a link to the page that the link is on, but you’ll be using the same set of navigation rollovers on other pages as well, so this link will allow visitors to return to the index.htm page from other pages that contain this navigation bar. - Click OK to close the dialog box.
The specified original image appears in the document. - Save your document.
Now that you’ve created a working navigation bar, you can reuse it in all of your pages. In this lesson, you’ll copy the navigation-bar table cells and paste them into your second page.
There are a variety of other ways to reuse content in Dreamweaver, including library items, templates, and snippets.
To copy the navigation bar into another page:
- In the index.htm file, click in the table cell that contains the Home rollover image.
- In the tag selector, select the rightmost <tr> tag.
The table row containing the three navigation-bar rollovers is selected. - Choose Edit > Copy.
- Switch to the customerService.htm file.
- Click in the navigation-bar table cell that says “Lorem.”
- In the tag selector, select the rightmost <tr> tag.
- Choose Edit > Paste.
The navigation-bar rollover images are pasted in place of the existing table cells. - Save your document.
The Design view gives a rough idea of what your page will look like in a browser, but the only way to be sure how it will look is to preview it in a browser. Each version of each browser has its own quirks; Dreamweaver strives to produce HTML that will look as similar as possible from one browser to another, but sometimes differences can’t be avoided. (That’s why Dreamweaver doesn’t display a preview directly; there’s no way for Dreamweaver to mimic all the different behaviors of all the different browsers.)
Preview in Browser shows how the pages will look when you’ve published them.
To preview your pages:
- If index.htm isn’t the current document, switch to it. (If it’s not open, open it.)
- Press the F12 key.
Your primary browser starts if it’s not running already. It displays the index page.
Note: Dreamweaver should automatically detect your primary browser and use that for previewing. If the preview doesn’t appear, or if it doesn’t appear in the browser you expect, switch back to Dreamweaver (if necessary) and choose File > Preview in Browser > Edit Browser List. The Preview in Browser Preferences dialog box appears; add the correct browser to the list. For more information, click the Help button in the Preferences dialog box. - Move the pointer to point to the rollover images to see the images change. Click links to make sure they work.
You’ve now created a small but functional website. The next step is to publish it by uploading the files to a remote web server.
Before you can proceed, you must have access to a remote web server (such as your ISP’s server, or a server owned by the client you’re working for, or an intranet server within your company, or an IIS or PWS server on a Windows computer). If you don’t already have access to such a server, contact your ISP, your client, or your system administrator.
The following procedure works best if your remote root folder is empty. If your remote site already contains files, then create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.
To connect to a remote site:
- Choose Site > Edit Sites.
- Select a site (such as Global Car Rental) and click Edit.
- Click the Basic tab at the top of the dialog box.
- You’ve already filled in the first few steps in the Basic tab, when you set up your local site, so click Next a few times, until the Sharing Files step is highlighted at the top of the wizard.
- In the pop-up menu labeled “How do you connect to your remote server?”, choose a method for connecting to the remote site.
The most common method for connecting to a server on the Internet is FTP; the most common method for connecting a server on your intranet is Local/Network. If you aren’t sure what to choose here, ask the server’s system administrator. - If you choose FTP, enter the following options:
- Enter the hostname of the server (such as ftp.macromedia.com).
- In the text box that asks what folder contains your files, enter the path on the server from the ftp root folder to the remote site’s root folder. If you’re not sure, consult your system administrator.
In many cases, this text box should be left blank. - Enter your user name and password in the appropriate text boxes and click Test Connection.
- If the connection is unsuccessful, consult your system administrator.
- If you choose Local/Network, then click the folder icon next to the text box and browse to the remote site’s root folder.
- Click Next.
- Don’t enable check-in and check-out for this site.
If you and your co-workers are working together on a larger site, check-in and check-out help to prevent you from overwriting each others’ files. For this site, though, you don’t need this feature. - Click Next.
- Click Done to finish setting up the remote site.
- Click Done again to finish editing the site.
- In the Site panel, select the site’s local root folder.
- Click the Put Files button.
All of the site’s files are uploaded to the remote site. - Open your remote site in a browser to make sure everything uploaded correctly.
If you didn’t do so during installation, you can make your workspace look and feel like the popular coding environments of HomeSite and ColdFusion Studio.
To adopt the new coding workspace:
- Choose Edit > Preferences, then choose General from the list of categories on the left.
The General category appears.
- Click the Change Workspace button.
The Workspace Setup dialog box appears.
- Select the Dreamweaver MX Workspace option, then select the Homesite/Coder-Style option.
- Click OK twice to close the Preferences dialog box.
- Close Dreamweaver, and then restart it.
Before you start the lessons, you need to set up a site and copy a folder into the site. The integrated file browser in the Site panel enables you to view your local disk and network. This is useful for working with files that are not in the current site showing in the Site panel.
To copy pages to your site:
- Choose Window > Site to open the Site panel, if it’s not already open.
- In the Site panel, from the Site pop-up menu, select the name of the site you defined in the previous chapter.
If you have not defined a site, see Set up a local site. You need to define a site before you continue - When you select the site name from the pop-up menu, Dreamweaver displays the files in the site.
- Expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
- Expand folders as necessary to reach the Dreamweaver application folder, and then expand the Samples folder.
- In the Samples folder, expand the GettingStarted folder, then select the Code folder, and press Control+C (Windows) or Command+C (Macintosh) to copy it.
- Scroll back to the top of the Site panel, and select the site folder.
- Press Control+V (Windows) or Command+V (Macintosh) to paste a copy of the folder in your site.
Before you start, you can view finished pages to see how your pages might look. Of course, your pages may vary.
To view the finished pages:
- Choose Window > Site to open the Site panel, if it’s not already open.
- Expand the Desktop (Windows) or Computer (Macintosh) icon to see your available disks.
- Expand folders as necessary to reach the Dreamweaver application folder, and then expand the Samples folder.
- In the Samples folder, expand the GettingStarted folder, then expand the FinalSite folder.
- In the FinalSite folder, double-click index.htm to open it, then double-click location_comp.htm.
Dreamweaver displays the pages in the Document window. - Close the pages when you are finished.
Use the Site panel to open the pages you need for this lesson.
To open pages:
- Choose Window > Site to open the Site panel, if it’s not already open.
- In your site, expand the Code folder.
- Double-click index.htm to open it, then double-click location_start.htm.
These are the two files you’ll need for this lesson. - In the Document window, click the Show Code View button on the toolbar or choose View > Code to switch to Code view and see the file’s source code.
- To switch between the pages quickly, press Control+Tab or click the tab at the bottom of the page (Windows only).
Note: You must maximize the page to see the tabs.
Next, you’ll use the Tag Inspector to find a specific tag in the Locations page and quickly make changes to it.
To edit a tag using the Tag Inspector:
- Open location_start.htm in Code view, if it’s not already open.
- Do one of the following to open the Tag Inspector, if it’s not already open:
Choose Window > Tag Inspector.
In the Code panel group, click the Tag Inspector tab.
The Tag Inspector gives you a structured view of all the tags in your page. It also displays the attributes of each tag.
- In the Document window Code view, find the text for the heading “Rental Locations.
- Select the non-breaking space entity ( ) between the paragraph tags that follow the heading:
<p><FONT SIZE="+2" COLOR="#FF6600">Rental Locations</FONT></p>
<p>
</p> - Choose Insert > Table, then click OK in the Insert Table dialog box to accept the default values.
Dreamweaver inserts table code. - Click the Refresh button on the toolbar.
The Tag Inspector panel updates so that focus is on the Table tag you just inserted. A list of attributes appears below the tag. - In the Document window, click a few different tags to see how the Tag Inspector updates the tag and attributes it displays, then click the Table tag again so that its attributes appear in the Tag Inspector.
- In the Tag Inspector panel, click in the empty text box beside the align attribute.
An arrow for a pop-up menu appears. - Click the pop-up menu arrow, and select center.
Dreamweaver changes the code in the Document window. - Click the Show Design View button on the toolbar or choose View > Design to see the table.
- In the Document window, choose File > Save.
Now, you’ll add a link to the logo image you inserted so that when the user clicks it, the home page opens.
One way you can create the link is by simply placing an anchor tag (<a>) around the image tag in the code and setting the anchor tag’s attributes—with or without the help of Code Hints. Another way to add the link is to use the Insert bar.
To write code with the help of the Insert bar:
- Open location_start.htm in Code view, if it’s not already open.
- Highlight the code for the logo.jpg image you inserted.
Note: Make sure you highlight the entire <img> tag. - In the Common tab of the Insert bar, click the Hyperlink button.
The Hyperlink dialog box appears with the image tag already
- In the Link text box, enter index.htm or click the folder icon to browse to it.
Note: To link to a web page, enter the page’s URL. - Click OK.
Dreamweaver inserts the code in your page to create the link around the image. - Choose File > Save.
Now you’re ready to insert a table in the document.
- In the Document window, place the insertion point in the document, then do one of the following:
Select Insert > Table.
In the Insert bar’s Common category, click the Table icon.
The Insert Table dialog box appears.
- In the dialog box, set the following options:
In the Rows text box, type 2.
In the Columns text box, type 2.
In the Width text box, type 600, and then select Pixels in the pop-up menu to the right of the Width text box.
Setting the width to 600 pixels creates a fixed width table. We’ll discuss table width in more detail a little later in this tutorial.
In the Border text box, type 1 to set a 1-pixel border around the table and table cells. - Click OK.
Dreamweaver inserts the table in the document
- Save your document by doing one of the following:
Select File > Save.
Press Control+S
Next, you’ll modify the table’s layout. You’ll add rows and columns to the table, and learn how to merge and split cells to create the desired page layout.
- Click in the top-left cell then drag down to the bottom row to select the left column.
- Select Modify > Table > Insert Column.
The table now contains three columns.
- Click in the bottom left cell and then select Modify > Table > Insert Rows or Columns.
The Insert Rows or Columns dialog box appears
- In the dialog box, set the following options:
For Insert, select Rows.
In Number of Rows, type 2.
For Where, select Above the Selection - Click OK.
The table updates. You now have a four-row by three-column table. - Save your changes (File > Save).
By merging and splitting cells you can customize a table’s design to fit your layout needs. Next, you’ll see how to use menu options or the Property inspector to merge or split table cells.
- In the document, select the first two cells in the left column of the table, by dragging your pointer from the top left cell to the cell below it.
- Choose Modify > Table > Merge Cells.
The two cells merge into a single cell.
- Click in the third row of the second column, then drag to the right and down to select the last two rows of cells in the second and third columns.
- In the Property inspector, click the Merge button to combine the cells.
The selected cells merge into one cell.
- Click in the top left cell.
- In the Property inspector, click the Split Cell button.
The Split Cell dialog box appears.
- In the dialog box, set the following options:
For Split Cell Into, select Columns.
In Number of Rows, enter 2. - Click OK.
The table is modified.
Let’s adjust the table’s dimensions. You’ll increase the amount of space between the table rows, and adjust the amount of space between the table columns.
- Move the pointer along the bottom table border until it changes into a border selector, then drag it down to resize the table.
- You can use this method to resize the other row heights in the table if you’d like.
- Move the pointer along a column border until it changes to a border selector, then drag it to the left or right to change a column’s width.
- When you are done adjusting your table, save your document.
You can add color to any part of a table. You’ll start by adding a background color to the entire table, then apply a different background color to cells in the table. You’ll finish by changing the border color.
- In the document, click in any cell of the table, then in the tag selector located at the bottom left of the Document window, click the <table> tag to select the entire table.
- Open the Property inspector (Window > Properties), if it isn’t already open.
Properties for the selected table appear in the Property inspector.
- In the Property inspector, in the Bg Color text box select a color by doing one of the following:
Click the color picker pop-up, then choose a color from the color picker.
Enter a color using a hexadecimal value, for example #CC9933.
Enter a web-safe color name, such as goldenrod.
A background color applies to the table
- You can apply a background color to the cells of the table the same way. Click in the top-left cell, then in the Property inspector, select a different color in the Bg Color text box.
- Color additional cells as you desire.
Now, you’ll set the table border color. Border color applies to both the outside and inside borders of a table.
- In the Document window, select the table.
- In the Property inspector, in the Brdr Color text box, use the color picker to select a border color for your table.
- When you are done, save your document.
- Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.
A percentage-based table stretches and shrinks based on the width of a browser window. (For example if you specify that a table uses a width of 75%, the table stretches to fill 75% of the horizontal space regardless of the browser window size. This can be useful in some instances, such as making sure a navigation menu is always displayed when a window is resized.
When you want to set the size of a table regardless of how a user resizes the browser window, use pixel-based tables. When you want the table to stretch to the size of the browser window, percentage-based tables are best.
To see the difference in percentage-based and pixel-based tables, you’ll add one of each to a page, then view it in a browser.
- In Dreamweaver, choose File > New.
- In the New Document dialog box, the Basic Page category is already selected; in the Basic Pages list, double-click HTML to create a new HTML document.
The document opens in the Document window. - Save this file to your local site folder. Name it tableWidth
- Place the insertion point in the document.
- In the Common tab of the Insert bar, click the Table button.
- In the dialog box that appears, set the following options:
In the Rows text box, type
- In the Columns text box, type 3.
- In the Width text box, type 90, and select Percentage in the pop-up menu to the right of the Width text box.
- In the Border text box, enter 1 to set a 1-pixel border around the table and table cells.
- Click OK.
The table appears in the document. - Click in the top, middle cell and drag to the bottom cell to select the middle column.
- In the Property inspector, use the color picker to apply a background color to the column.
Now that you’ve learned how to work with the Insert Table command, let’s look at another way to work with tables—by drawing the table layout.
Next, you’ll work in Layout view, which allows you to draw layout cells or layout tables into which you can add content such as images, text, or other media.
In Layout view you can draw layout cells and layout tables to define the design areas of a document. You can start by inserting a table cell or a layout cell. When you insert a layout cell first Dreamweaver automatically creates a table to surround it.
Draw a layout cell
- In the Insert bar, click the Layout tab, then click the Layout view button to switch from Standard view.
The Getting Started in Layout View dialog box appears and describes the Layout view options. - Review the options, then click OK to close the dialog box.
- In the Insert bar there are two Layout options available—Draw Layout Cell and Draw Layout Table; these options aren’t available in Standard view.
- If the Property inspector isn’t already open, choose Window > Properties to open it.
- In the Insert bar, click the Draw Layout Cell button.
- Move the pointer to the Document window; the mouse pointer changes to a drawing tool (looks like a small cross). Click in the upper left corner of the document, then drag to draw a layout cell.
When you release the mouse, a layout cell appears in a layout table.
The layout table expands to fill the Document window, and sets the page’s layout area. The white rectangle is the layout cell you drew. You can place additional layout cells in the empty area of the layout table. - Draw another cell to create a text area above the navigation buttons.
Next you’ll learn how to add a series of layout cells. You’ll add three layout cells next to the cell you just created to create layout for the page’s navigation buttons.
- In the Insert bar, click the Draw Layout Cell button; then hold down the Control key (Windows) or Command key (Macintosh) so you can draw multiple cells in the table.
- In the Document window, position the pointer below the last cell you drew; then drag to draw a layout cell.
Continue to hold the Control key (Windows) or Command key (Macintosh) and draw two more layout cells. Your screen should look similar to this:
- Click in a blank area of the Insert bar, to deselect the Draw Layout Cell tool. (The drawing tool changes to a selection arrow.)
To design a page precisely, you can set the size of cells you add in a document. You can also reposition cells in the page.
- Click the border of the layout cell to select it.
- To resize a layout cell:
In the Property inspector for the layout cell, type a number for the desired cell width or height. For example, type 200 in the Height text box to set the cell’s height to 200 pixels, then click in the document to see the cell width change.
Set image alignment
An image, like text, appears in the normal flow of HTML in a page and can appear as a paragraph by itself, or as part of a paragraph of text. You can set the alignment of an image in two ways in the Property inspector using the text alignment or image alignment controls.
Text alignment positions the paragraph in which the image is inserted and can be used to align an image to the left or right margin or to center it. Image alignment lets you set the relationship of an image to other content in the same paragraph (including another image). In Dreamweaver, the Align pop-up menu lets you select how the image aligns with the text.
Note: Not all of the image alignment options work in all browsers. In this tutorial you will use alignment options that work in Microsoft Internet Explorer and in Netscape Navigator.
View the completed document
Before you begin, look at the completed file to see what you’ll do in this tutorial.
- Choose File > Open, and in the dialog box that appears, navigate to the GettingStarted folder you created, then navigate to Tutorials/Completed and open the file named imageAlign_comp.htm.
The file opens in the Document window. - Press F12 (Windows only) or select File > Preview in Browser and select a browser to view the document in.
The file shows three examples using image alignment and spacing to work with images and text together. - When you are done viewing the file close your browser window.
As you see, when you place an image in a paragraph, text appears right next to the edge of the image. In the next step you’ll add a margin of space between the image and text.
You can use the horizontal and vertical space properties in the Property inspector to create space around an image. The horizontal space property adds space to the Left and right of the image, while the vertical space property adds space above and below an image.
- In the image_align.htm document, click the second image in the page (next to the table cell that contains the text Spacing).
- In the Property inspector, enter 10 in the V Space text box to set the vertical spacing.
- Move the pointer to the H Space text box, enter 30, then press Enter or Return to set the horizontal spacing.
A margin of space is created between the text and the image. The spacing also affects the distance between the image and the table border.
As the final step in this part of the tutorial, you’ll set both alignment and space properties for the image.
- In the imageAlign.htm document, click the third image in the page (next to the table cell that contains the text Alignment and Spacing).
- In the Property inspector, in the Align pop-up menu choose Right.
The image moves to the right. - In the HSpace text box, enter 30, then click elsewhere in the Property inspector or in the Document window for the value to update.
A margin of space is added between the image and text.
You will create an image map so that a single image links to multiple pages.
- In Dreamweaver, choose File > Open, then navigate to and open the file named imagemap_start.htm.
- In the document, click the image of the world map to select it.
- Open the Property inspector if it isn’t already open, and click the expander arrow in the lower right area of the Property inspector to see all the image properties, if necessary.
Image map options appear in the expanded Property inspector. - In the Map Name text box, type Locations.
Tip: If you create more than one image map in a document, each map must have a unique name. Each image map can have multiple hotspots as well. - Click the Rectangular Hotspot Tool to select it.
- In the Document window, click in the area above and to the left of North America, then drag the pointer down and to the right over the image to create a hotspot area.
- A blue layer appears over the image, and the hotspot Property inspector appears.
- In the Link text box, click the folder icon. In the dialog box that appears, navigate to the file named location1.htm to set a link to it.
- In the Alt text box, type North America.
Note: You should always set alternate text for images in your documents, including image maps, this provides descriptive information about an image for page viewers who are using text-only browsers.
That’s it—you’ve set the first hotspot. Let’s set one more.
So you can see how hotspot tools differ, this time you’ll use the Polygon Hotspot tool to define the hotspot area. The polygon tool allows you to set connecting points to define a hotspot area.
You’ll also learn how to open the linked document in a new window.
- In the Property inspector, click the Polygon Hotspot Tool to select it.
- In the Document window, click the image where you want to start the hotspot, and move the pointer to the next position; a line forms between the dots.
- Continue clicking around the shape to define Europe as the hotspot area.
Note: As you click, the image map area adjusts and fills in, keep clicking around the shape to cover the area you want to include.
- When you’re finished mapping the image, click the Arrow button in the Property inspector to change the pointer from a drawing tool.
- In the Link text box, click the folder icon, then browse to the file named location3.htm to open this file when the hotspot is clicked.
- In the Target pop-up menu, choose _blank.
When a user clicks the hotspot, the Locations3 page will open in a new window. - In the Alt text box, enter Europe.
- Press F12 (Windows only) or select File > Preview in Browser then select a browser to view the document in and test the links.
- Save and close your file.
You use the CSS Styles panel to create, view, apply or edit style attributes.
The CSS Styles panel has two views or modes. Use the Apply Styles view to apply custom or class CSS styles, and you use the Edit Styles view to make changes to styles you have applied to your document. You can create a new style while working in either view.
- Open the CSS Styles panel (Window > CSS Styles), if it is not already open.
- In the CSS Styles panel, click the New CSS Style button (+) at the bottom of the panel.
The New CSS Style dialog box appears.
Redefine an HTML tag
You can apply CSS styles to any tag in a document. The first style you’ll create will redefine the style attributes of the body tag.
- In the New CSS Style dialog box, for Type, select Redefine HTML Tag.
- In the Tag pop-up menu, select body.
- In Define In, select This Document Only.
For now we’ll apply the style to this document, later you’ll see how to export the style so you can use it in other pages in the site. Your dialog box should look similar to this:
- Click OK.
The CSS Style definition dialog box appears.
- Set the following Type settings:
In the Font pop-up menu, select Arial, Helvetica, sans serif.
- In the Size pop-up menu, select 12 and pixels.
- In Color, click the color picker, then use the eyedropper to select white.
Next, you’ll use the Background category in the CSS Styles panel to set background options.
- Under Category, select Background.
CSS background attributes appear.
- In Background Color, do one of the following to set a background color:
Click the color picker then use the eyedropper to select a dark blue or move eyedropper to the Document window and select the blue in the Global logo image.
In the Background Color text box, enter #333366 - Click OK.
- In the CSS Styles panel, select Edit Styles.
The new style appears in the list along with a description of the style attributes.
With the new style applied you can barely distinguish the hypertext links in the document. Let’s create a style for the links.
- In the CSS Styles panel, click the New CSS Style button (+) located at the bottom of the panel.
The New CSS Style dialog box appears. - In Type, select Use CSS Selector.
- In the Selector pop-up menu, select a:link.
- In Define In, select This Document Only.
- Click OK.
The CSS Style definition dialog box appears.
- Set the following Type attributes for the link:
In Decoration, select Overline - In Color, in the text box, enter #FFCC99.
- Click OK.
- To see the style you applied to the links you must view the page in a browser, press F12 to preview your page.
The CSS styles you’ve created so far have only applied to this document. Internal style sheets apply only to the document in which they were created. Now, you’ll learn how to create an external style sheet which contains the styles you defined in this document.
- Choose File > Export > Export CSS Styles.
In the Export CSS Styles dialog box appears. - In the dialog box, in the Save In (Windows) or Where (Macintosh) pop-up menu, navigate to your local site folder.
- In File Name (Windows) or Save As (Macintosh), name the file mystyle.css.
Note: You can name a CSS style sheet any name you want, with the following exceptions; the name must be lowercase and contain no spaces.
- Click Save.
You’ll attach the CSS style sheet you just created to another document in your site. The document you’ll work with is the same as the original css_start.htm file, before you added style to it.
- In Dreamweaver, open the Site panel (Window > Site), if it isn’t already open.
- In the Site panel, locate the file named css_start2.htm, then double-click it to open it in the Document window.
- In the CSS Styles panel, click the Attach Style Sheet button located at the bottom of the panel.
The Link External Style Sheet dialog box appears. - In the File/URL text box, enter the path to mystyle.css or click Browse and in the dialog box that appears navigate to the mystyle.css file, then click OK to select it.
- In the Link External Style Sheet dialog box, for Add As, select Link.
- Click OK.
The selected style sheet links to the current document, and the style attributes are immediately applied.
You can use the Tag Library Editor to manage the tag libraries in Dreamweaver. The Tag Library Editor lets you add and delete tag libraries, tags, and attributes; set properties for a tag library; and edit tags and attributes.
To open the Tag Library Editor, choose Edit > Tag Libraries. The Tag Library Editor appears as follows. (The contents of this dialog box changes depending on the selected tag.)
Importing tags from XML files
You can import tags from an XML Document Type Definition (DTD) file or a schema.
To import tags from an XML DTD or schema:
- Open the Tag Library Editor (Edit > Tag Libraries).
- Click the plus (+) button and choose DTD Schema > Import XML DTD or Schema File.
- Enter the file or URL of the DTD or schema file.
- Enter the prefix to be used with the tags.
The prefix is used to identify a tag on a page as part of a particular tag library. - Click OK.
To import ASP.NET custom tags into Dreamweaver:
- Open an ASP.NET page in Dreamweaver.
- Open the Tag Library Editor (Edit > Tag Libraries).
- Click the plus (+) button and choose one of the following:
To import all the ASP.NET custom tags from the application server, choose ASP.NET > Import All ASP.NET Custom Tags.
To import only certain custom tags from the application server, choose ASP.NET > Import Selected ASP.NET Custom Tags.
The Import Selected ASP.NET Custom Tags dialog box appears, listing every ASP.NET custom tag installed on the application server. Control-click (Windows) or Command-click (Macintosh) tags from the list and click OK.
You can import a JSP tag library into Dreamweaver from a variety of file types.
To import a JSP tag library into Dreamweaver:
- Open a JSP page in Dreamweaver.
- Open the Tag Library Editor (Edit > Tag Libraries).
- Click the plus (+) button and choose JSP > Import From File (*.tld, *.jar, *.zip).
- Specify the .tld, .jar, or .zip file containing the tag library.
- Enter a URI to identify the tag library.
The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to access the organization; it is used to uniquely identify the tag library. - Enter the prefix to be used with the tags.
The prefix is used to identify a tag on a page as part of a particular tag library. - Click OK.
You can import JSP tags from a server
To import JSP tags from a server:
- Open a JSP page in Dreamweaver.
- Open the Tag Library Editor (Edit > Tag Libraries).
- Click the plus (+) button and choose JSP > Import From Server (web.xml).
The Import from Server dialog box appears. - Select a tag library.
- Enter a URI to identify the tag library.
The URI (Uniform Resource Identifier) often consists of the URL of the organization maintaining the tag library. The URL is not used to access the organization; it is used to uniquely identify the tag library. - Click OK.
If you use Macromedia JRun, you can import your JRun tags into Dreamweaver.
To import JRun tags into Dreamweaver:
- Open a JSP page in Dreamweaver.
- Open the Tag Library Editor (Edit > Tag Libraries).
- In the Tag Library Editor, click the plus (+) button and choose JSP > Import JRun Server Tags From Folder.
- Specify a folder containing the JRun tags.
- Enter a URI to identify the tag library.
- Enter the prefix to be used with the tags.
The prefix is used to identify a tag on a page as part of a particular tag library.
Code Hints lets you insert and edit code as you type in Code view (or Code inspector). When you type certain characters, a list appears, suggesting options to complete your entry. You can use this feature to insert or edit code, or just to see the available attributes for a tag, the available parameters for a function, or the available methods for an object.
To insert a tag using Code Hints:
- Type a start bracket (<) to display a list of tags.
- Press the Escape key to close the list.
- Scroll down the list and double-click a tag to insert it.
- If the tag supports attributes, press the spacebar to display a list of allowed attributes for the tag. Select an attribute and press Enter.
- Type the value for the attribute or, if the attribute takes only certain values, select a value from the list of allowed values for the attribute.
- For every attribute that you want to add for the tag, repeat the previous two steps, making sure that you don’t press the spacebar between a value and its end quote (").
- Type the end bracket for the tag (>) after the last attribute-value pair.
- To add an attribute, place the insertion point to the left of a tag end bracket (>) and press the spacebar to display a list of any supported attributes for the tag. Insert the attribute and its value as previously described.
- To change an attribute, delete the attribute and add an attribute, as previously described.
- To change a value, delete the value and add a value, as previously described.
- Choose Edit > Preferences > Code Hints or Dreamweaver > Preferences > Code Hints (Mac OS X), then set the preferences to show without any delay.
- In Code view (or Code inspector), type your functions or object code as usual.
Whenever you type a keyword or character for which Code Hints is available, a pop-up menu of completion options appears. When desired, select from the list and press Enter.
You can use the Tag inspector to edit tags in a property sheet similar to the ones found in other integrated development environments (IDEs).
To edit a tag using the Tag inspector:
- Make sure the Tag inspector is open (Window > Tag Inspector).
- In Code view (or Code inspector), click anywhere inside a tag.
If the tag supports attributes, Dreamweaver displays the attributes and their current values in the Tag inspector’s property sheet. - Make the changes to the tag in the property sheet.
Click an attribute name to type a value or, if the attribute takes pre-defined values, to select from a list. - If the attribute takes a value from a source of dynamic content (like a database), click the lightning bolt icon at the end of the selected attribute’s row and select the source.
- Click elsewhere in the panel to update the tag in your document.
As you write and edit your code in Code view or Code inspector, you can indent code blocks to visually separate the block from the rest, making it easier to find.
To indent a code block:
- Select the line or lines of the code block that you want to indent. (You must select the entire line.)
- Choose Edit > Indent Code.
Copying and pasting code You can copy and paste source code from another application or from Code view itself. You can copy and paste the code as text or as code with tags intact.
To copy and paste source code as text:
- Copy the code from Dreamweaver or another application.
- Place the insertion point directly in Design view, and choose Edit > Paste.
- Copy the code from Dreamweaver or another application.
To copy from Design view, choose Edit > Copy as HTML. - Do one of the following:
In Code view, position the insertion point, and choose Edit > Paste. If you are using Design view, press F5 to update its display of the document.
In Design view, position the insertion point, and choose Edit > Paste as HTML.
A comment is descriptive text that you insert in the HTML code to explain the code or provide other information. The text of the comment appears only in Code view and will not display in your web page in the browser.
To insert a comment:
- In Code view or Design view, place the insertion point where you want the comment.
- Click the Comment icon on the Common tab of the Insert bar.
Use the tooltips to identify the Comment icon - In Code view, Dreamweaver inserts a <!-- --> tag in the page. Enter your comment inside the tag.
In Design view, Dreamweaver displays the Comment dialog box. Enter your comment and click OK. - To display comment markers in Design view, choose View > Visual Aids > Invisible Elements. Make sure that comments are selected in the Invisible Elements preferences, or the comment marker will not appear.
- Select the Comment marker in Design view and enter text in the Property inspector.
- Find the comment in the code and add text directly to it.
You can view all of the JavaScript or VBScript functions in a page open in Code view.
To view the script functions in a page:
- Open the document in Code view
- Make sure the Document toolbar is displayed (View > Toolbars > Document).
- Click the Code Navigation icon in the toolbar.
The icon consists of a pair of braces ({ }).
To go to a function in your code:
Select a function from the Code Navigation pop-up menu. The function will be highlighted in Code view (or the Code inspector).
About HTML source code searches
Use the Source Code option in the Find or Replace dialog box to search for specific text strings in the HTML source code. For example, a search for black dog in the following code would produce two matches (in the alt attribute and in the first sentence):
<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 doesn’t match because it’s interrupted by a link.
Searching for tags and attributes
Use the Specific Tag option in the Find or Replace dialog box to search for specific tags, attributes, and attribute values. For example, you can search for all img tags with no alt attribute.
To perform a tag search:
- Choose Edit > Find and Replace, and specify which files to search.
- Choose Specific Tag from the Search For pop-up menu.
- Choose a specific tag from the pop-up menu next to Search For pop-up menu, enter a tag, or choose [any tag].
If you only want to search for all occurrences of the specified tag, press the minus (-) button and skip to step 6. Otherwise, proceed with step 4. - Limit the search with one of the following tag modifiers:
With Attribute chooses an attribute that must be in the tag for it to match. You can specify a particular value for the attribute or choose [any value].
Without Attribute chooses an attribute that can’t be in the tag for it to match. For example, choose this option to search for all IMG tags with no ALT attribute.
Containing specifies text or a tag that must be contained within the original tag for it to match. For example, in the code <b><font face="Arial">heading 1</font></b>, the font tag is contained within the b tag.
Not Containing specifies text or a tag that can’t be contained within the original tag for it to match.
Inside Tag specifies a tag that the target tag must be inside of for it to match.
Not Inside Tag specifies a tag that the target tag can’t be inside of for it to match. - Click the plus (+) button and repeat step 4 to limit the search further.
- Initiate the search:
Click Find Next to highlight the next instance of the tag in the current document, then in any subsequent document if searching in more than one document.
Click Find All to generate a list of all the instances of the tag in the current document or, if you are searching a directory or site, generate a list of documents that contain the tag. The list appears in the Search tab of the Results panel.
About the Quick Tag Editor
The Quick Tag Editor has three modes:
- Insert HTML mode to insert new HTML code
- Edit Tag mode to edit an existing tag
- Wrap Tag mode to wrap a new tag around the current selection
You can cycle through the various modes by pressing Control+T (Windows) or Command+T (Macintosh) while the Quick Tag Editor is active.
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.
Inserting an HTML tag with the Quick Tag Editor
You can use the Quick Tag Editor to insert an HTML tag in your document.
To insert an HTML tag with the Quick Tag Editor:
- In Design view, click in the page to place the insertion point where you want to insert code.
- Press Control+T (Windows) or Command+T (Macintosh).
The Quick Tag Editor opens in Insert HTML mode.
- Enter the HTML tag and press Enter.
The tag is inserted into your code. - Press Escape to exit without making any changes.
You can write a JavaScript or VBScript for your page without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.
To insert a client-side script in Design view:
- Place the insertion point where you want the script.
- Select Insert > Script Objects > Script.
The Script dialog box appears. - Complete the dialog box and click OK.
You can create a link in your document to an external script file without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.
To link to an external script file:
- Place the insertion point where you want the script.
- Select Insert > Script Objects > Script.
The Script dialog box appears. - Click OK without typing anything in the Content box.
- Select the script marker in Design view of the Document window.
- In the Property inspector, click the folder icon to browse to and select the external script file, or type the filename in the Source box.
You can edit a script without leaving Design view. Before starting, make sure Dreamweaver displays script markers on the page. To display script markers, select View > Visual Aids > Invisible Elements.
To edit the script in Design view:
- Select the script marker.
- In the Property inspector, click the Edit button.
The script appears in the Script Properties dialog box. - If you linked to an external script file, the file automatically opens in Code view, where you can make your edits.
- Make edits to the script and click OK.
Frames provide a way to divide a browser window into multiple regions, each of which can display a different HTML document. In the most common use of frames, one frame displays a document containing navigation controls, while another frame displays a document with content.
For example, your frame layout might consist of three frames: one narrow frame on the side that contains a navigation bar, one frame that runs along the top, containing the logo and title of the website, and one large frame that takes up the rest of the page and contains the main content. Each of these frames displays a separate HTML document.
In this example, the document displayed in the top frame never changes as the visitor navigates the site. The side frame navigation bar contains links; clicking one of these links changes the content of the main content frame, but the contents of the side frame itself remain static. The main content frame on the right displays the appropriate document for whichever link the visitor clicks on the left.
A detailed discussion of all the ways to design and use frames, and the code required for hand-coding them, is beyond the scope of this chapter. If you need detailed information about the code used in advanced frame layouts, see a book about frames and framesets.
Creating frames and framesets There are two ways to create a frameset in Dreamweaver: you can design it yourself, or you can select from several predefined framesets. Choosing a predefined frameset automatically sets up all the framesets and frames needed to create the layout and is the easiest way to create a frames-based layout quickly. You can insert a predefined frameset only in the Document window’s Design view.
Creating a predefined frameset
Predefined framesets make it easy for you to select the type of frameset you want to create.
There are two ways to create a predefined frameset: using the Insert bar and using the New Document dialog box. The Insert bar allows you to create a frameset and display the current document in one of the new frames; the New Document dialog creates a new empty frameset.
The predefined frameset icons in the Frames category of the Insert bar and in the Framesets category of the New Document dialog box provide a visual representation of each frameset as applied to the current document.
When you apply a frameset using the Insert bar, Dreamweaver automatically sets up the frameset to display the current document (the document in which the insertion point is located) in one of the frames. The blue area of a predefined frameset icon represents the current document, and the white areas represent frames that will display other documents.
To create a predefined frameset and display an existing document in a frame:
- Place the insertion point in a document.
- Do one of the following:
In the Frames category of the Insert bar, click the icon for a predefined frameset.
Choose a predefined frameset from the Insert > Frames submenu.
- Choose File > New.
- In the New Document dialog box, select the Framesets category.
- Select a frameset from the Framesets list.
- Click Create.
Before creating a frameset or working with frames, make the frame borders visible in the Document window’s Design view by choosing View >Visual Aids > Frame Borders.
To create a frameset:
Choose a splitting item (such as Split Frame Left or Split Frame Right) from the Modify > Frameset submenu.
The window is split into frames, and the document you started with appears in one of the frames.
To split a frame into smaller frames, do one of the following:
- To split the frame where the insertion point is, choose a splitting item from the Modify > Frameset submenu.
- To split a frame or set of frames vertically or horizontally, drag a frame border from the edge of the Design view into the middle of the Design view.
- To split a frame using a frame border that isn’t at the edge of the Design view, Alt-drag (Windows) or Option-drag (Macintosh) a frame border.
- To divide a frame into four frames, drag a frame border from one of the corners of the Design view into the middle of a frame.
To delete a frame:
Drag a frame border off the page or to a border of the parent frame.
If there’s unsaved content in a document in a frame that’s being removed, Dreamweaver prompts you to save the document.
Note: You can’t remove a frameset entirely by dragging borders. To remove a frameset, close the Document window that displays it. If the frameset file has been saved, delete the file.
About nested framesets
frameset inside another frameset is called a nested frameset. A single frameset file can contain multiple nested framesets. Most web pages that use frames are actually using nested frames, and most of the predefined framesets in Dreamweaver also use nesting. Any set of frames in which there are different numbers of frames in different rows or columns requires a nested frameset.
For example, the most common frame layout has one frame in the top row (where the company’s logo appears) and two frames in the bottom row (a navigation frame and a content frame). This layout requires a nested frameset: a two-row frameset, with a two-column frameset nested in the second row.
Dreamweaver takes care of nesting framesets as needed; if you use the frame-splitting tools in Dreamweaver, you don’t need to worry about the details of which frames are nested and which aren’t. For more information about the frame-splitting tools.
There are two ways to nest framesets in HTML: the inner frameset can be defined either in the same file as the outer frameset, or in a separate file of its own. Each predefined frameset in Dreamweaver defines all of its framesets in the same file.
Both kinds of nesting produce the same visual results; it’s not easy to tell, without looking at the code, which kind of nesting is being used. The most likely situation in which an external frameset file would be used in Dreamweaver is when you use the Open in Frame command to open a frameset file inside a frame; doing this may result in problems with setting targets for links. It’s generally simplest to keep all framesets defined in a single file.
Selecting frames and framesets
To make changes to the properties of a frame or frameset, begin by selecting the frame or frameset you want to change. You can select a frame or frameset either in the Document window or by using the Frames panel.
When you select a frame or frameset, a selection outline appears around the frame or frameset in both the Frames panel and the Document window’s Design view.
Selecting frames and framesets in the Frames panel
The Frames panel shows the hierarchy of the frameset structure in a way that may not be apparent in the Document window. In the Frames panel, a very thick border surrounds each frameset; each frame is surrounded by a thin gray line and is identified by a frame name.
To display the Frames panel:
Choose Window > Others > Frames.
To select a frame in the Frames panel:
Click the frame in the Frames panel.
To select a frameset in the Frames panel:
Click the border that surrounds the frameset in the Frames panel.
Saving frame and frameset files
Before you can preview a frameset in a browser, you must save the frameset file and all of the documents that are to be displayed in the frames. You can save each frameset file and framed document individually, or you can save the frameset file and all documents appearing in frames at once.
When you use visual tools in Dreamweaver to create a set of frames, each new document that appears in a frame is given a default filename. For example, the first frameset file is named UntitledFrameset-1, while the first document in a frame is named UntitledFrame-1.
When you select one of the save commands, a dialog box appears, ready to save a document with its default filename. Because the default filenames are so similar, it may be difficult for you to determine which document you are saving. To identify the frame that displays the document you’re saving, look at the frame selection outline in the Document window (in Design view).
To save a frameset file:
- Select the frameset in the Frames panel or the Document window.
- Choose one of the following:
To save the frameset file, choose File > Save Frameset.
To save the frameset file as a new file, choose File > Save Frameset As.
If the frameset file has not previously been saved, these two commands are equivalent
Click in the frame, then choose File > Save Frame or File > Save Frame As.
To save all files associated with a set of frames:
Choose File > Save All Frames.
This saves all open documents in the frameset, including the frameset file and all framed documents. If the frameset file has not yet been saved, a heavy border appears around the frameset in the Design view, and a dialog box allows you to choose a filename. Then for each frame that hasn’t yet been saved, a heavy border appears around the frame, and a dialog box allows you to choose a filename. Note: If you used File > Open in Frame to open a document in a frame, then when you save the frameset, the document you opened in the frame becomes the default document to be displayed in that frame. If you don’t want that document to be the default, don’t save the frameset file.
Viewing and setting frame properties
Use the Property inspector to view and set most frame properties. To change the background color of a frame, set the background color of the document in the frame.
To view or set frame properties:
- Select a frame by doing one of the following:
Alt-click (Windows) or Shift-Option-click (Macintosh) a frame in the Document window’s Design view.
Click a frame in the Frames panel. - Choose Window > Properties to open the Property inspector if it isn’t already open.
- To see all of the frame properties, click the expander arrow in the lower right corner of the Property inspector.
- Place the insertion point in the frame.
- Choose Modify > Page Properties.
- Click the Background pop-up menu to select a color.
Use the Property inspector to view and set most frameset properties. To set the title of the selected frameset, use the Page Properties dialog box or the Title field in the Document window’s toolbar.
To view or set frameset properties:
- Select a frameset by doing one of the following:
Click a border between two frames in the frameset in the Document window’s Design view.
Click the border that surrounds a frameset in the Frames panel. - Choose Window > Properties to open the Property inspector if it isn’t already open.
- To see all of the frameset properties, click the expander arrow in the lower right corner of the Property inspector.
- Select a frameset by doing one of the following:
Click a border between two frames in the frameset in the Document window’s Design view.
Click the border that surrounds a frameset in the Frames panel. - In the Title field of the Document toolbar, type a name for the document.
When a visitor views the frameset in a browser, the title appears in the browser’s title bar.
To use a link in one frame to open a document in another frame, you must set a target for the link. The target attribute of a link specifies the frame or window in which the linked content opens. For example, if your navigation bar is in the left frame, and you want the linked material to appear in the main content frame on the right, you must specify the name of the main content frame as the target for each of the navigation bar links. When a visitor clicks a navigation link, the specified content opens in the main frame.
To select a frame in which to open a file, use the Target pop-up menu in the Property inspector. You can set a file to replace the document being displayed in another frame, to appear in place of the entire frameset, to appear in the frame where the link was (by not choosing a target), or to open in a new browser window.
To target a frame:
- In Design view, select text or an object.
- In the Link field of the Property inspector, do one of the following:
Click the folder icon and select the file to link to.
Drag the Point to File icon to select the file to link to. - In the Target pop-up menu, choose the frame or window in which the linked document should appear.
If you named your frames in the Property inspector, the frame names appear in this menu. Select a named frame to open the linked document in that frame.
blank opens the linked document in a new browser window, leaving the current window untouched.
_parent opens the linked document in the parent frameset of the frame the link appears in, replacing the entire frameset.
_self opens the link in the current frame, replacing the content in that frame.
_top opens the linked document in the current browser window, replacing all frames.
Dreamweaver lets you specify content to display in text-based browsers and in older graphical browsers that do not support frames. This content is stored in the frameset file, wrapped in a noframes tag. When a browser that doesn’t support frames loads the frameset file, the browser displays only the content enclosed by the noframes tag.
Note: Content in the noframes area should be more than just a note saying “You should upgrade to a browser that can handle frames.” Some people have good reasons for using a system that doesn’t allow them to view frames. Try to make your content as accessible as possible to such visitors.
To provide content for browsers that don’t support frames:
- Choose Modify > Frameset > Edit NoFrames Content.
- To create the NoFrames content, do one of the following:
In the Document window, type or insert the content just as you would for an ordinary document.
Choose Window > Code Inspector, place the insertion point between the body tags that appear inside the noframes tags, and type the HTML code for the content. - Choose Modify > Frameset > Edit NoFrames Content again to return to the normal view of the frameset document.
Use the Property inspector to name a frame and to set borders and margins.
Tip: To make a link change the contents of another frame, you must name the target frame. To make it easier to create cross-frame links later, name each of your frames when you create it.
To specify properties for the selected frame:
- Name the frame.
Frame Name is the name used by a link’s target attribute or by a script to refer to the frame.
Note: A frame name must be a single word; underscores (_) are allowed, but hyphens (-), periods (.), and spaces are not. A frame name must start with a letter (as opposed to a numeral). Frame names are case-sensitive. Don’t use terms that are reserved words in JavaScript (such as top or navigator) as frame names. - Change the following options as desired:
Src specifies the source document to display in the frame. Click the folder icon to browse to and select a file. You can also open a file in a frame by placing the insertion point in the frame and choosing File > Open in Frame.
Scroll specifies whether scroll bars appear in the frame. Setting this option to Default doesn’t set a value for the corresponding attribute, allowing each browser to use its default value. Most browsers default to Auto, meaning that scroll bars appear only when there is not enough room in a browser window to display the full contents of the current frame.
No Resize prevents visitors from dragging the frame borders to resize the frame in a browser. (You can always resize frames in Dreamweaver; this option applies only to visitors viewing the frames in a browser.)
Borders shows or hides the borders of the current frame when it’s viewed in a browser. Choosing a Borders option for a frame overrides the frameset’s border settings. The options are Yes (show borders), No (hide borders), and Default; most browsers default to showing borders, unless the parent frameset has Borders set to No. A border is hidden only when all frames that share the border have Borders set to No, or when the parent frameset’s Borders property is set to No and the frames sharing the border have Borders set to Default.
Border Color sets a border color for all of the frame’s borders. This color applies to all borders that touch the frame, and overrides the specified border color of the frameset.
Note: There is an underlying logic to which frame borders have a given border color applied to them, but that logic is complex; it may be difficult to understand why certain borders change color when you specify a border color. For detailed information about the effects of specifying border colors, see a book on frames and framesets. - Set the following margin options if you wish (if margin options aren’t visible, click the expander arrow in the lower right corner of the Property inspector):
Margin Width sets the width in pixels of the left and right margins (the space between the frame borders 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).
Note: Setting the margin width and height for a frame is not the same as setting margins in the Modify > Page Properties dialog box.
Use frameset properties to set borders and frame sizes for a frameset.
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.
To set approximate sizes for frames, drag frame borders in the Document window’s Design view. Then use the Property inspector to specify exact sizes, and to specify how much space the browser allocates to a row or column of frames when the browser window size doesn’t allow the frames to display at full size.
To specify border properties for the selected frameset:
Change the following options as desired:
Borders determines whether borders should appear around frames when the document is viewed in a browser. To display borders, select Yes; to prevent the browser from displaying borders, select No. To allow the browser to determine how borders are displayed, select Default.
Border Width specifies a width for all the borders in the frameset.
Border Color sets a color for the borders. Use the color picker to select a color, or type the hexadecimal value for a color.
To set frame sizes for rows and columns of the selected frameset:
- Click a tab on the left side of the RowCol Selection area to select a row, or click a tab on the top to select a column.
- In the Value field, enter a height for the selected row or a width for the selected column.
- To specify how much space the browser allocates to each frame, choose from the following choices in the Units menu:
Pixels sets the size of the selected column or row to an absolute value. This option is the best choice for a frame that should always be the same size, such as a navigation bar. Frames with sizes specified in pixels are allocated space before frames with sizes specified as percent or relative. The most common approach to frame sizes is to set a left-side frame to a fixed pixel width and to set a right-size frame to relative, which allows the right frame to stretch to take up all the remaining space after the pixel width is allocated.
Percent specifies that the selected column or row should be a percentage of the total width or height of its frameset. Frames with units set to Percent are allocated space after frames with units set to Pixels, but before frames with units set to Relative.
You can create styles in two ways: you can format the text in the document and then create a style based on the selected text or you can create a style in the HTML Styles panel by selecting the formatting attributes you want to apply.
To create a new HTML style:
- In the HTML Styles panel, click the New Style icon; you can also choose Text > HTML Styles > New Style.
The Define HTML Style dialog box appears.
- In the Name text box, enter a name for the style.
- nder Apply To, choose how this style will be applied by doing one of the following:
To set a selection style, choose Selection.
To set a paragraph style, choose Paragraph.
Note: A paragraph style applies to the entire text block in which the insertion point is located, regardless of what text is actually selected. - For When Applying, choose whether to apply the HTML style in addition to the existing style of the selected text or paragraph, or to clear the formatting of the selection or paragraph and apply the new HTML style.
- Under Font Attributes, use the pop-up menus to select the formatting options you want to apply.
- If you are creating a paragraph style, under Paragraph Attributes, in the Format pop-up menu, choose a paragraph tag (for example, paragraph, Heading1, Preformatted).
- For Alignment, click the left, center, or right alignment button to set the paragraph alignment you want.
- Click OK.
Applying a style is as easy as selecting the text or paragraph you want the style applied to, and then selecting the style in the HTML Styles panel.
To apply an HTML Style:
Applying a style is as easy as selecting the text or paragraph you want the style applied to, and then selecting the style in the HTML Styles panel.
To apply an HTML Style:
- In the lower left corner of the HTML Styles panel make sure the Apply option is selected, to automatically apply the style you select.
- In the Document window do one of the following to select the text you want the style applied to:
Place the insertion point anywhere in a paragraph to apply a paragraph style.
Use the cursor to select the text you want a selection style applied to. - In the HTML Styles panel, click the HTML style you want to apply to the text.
The text automatically updates in the Document window.
When you edit an HTML style, Dreamweaver does not automatically update text that was previously formatted using the HTML style. To update the style to previously formatted text, you must manually re-apply the style.
To edit an existing HTML style:
- Make sure no text is selected in the Document window.
- In the HTML Styles panel, make sure the Auto Apply checkbox is deselected.
If the Auto Apply option is turned on, the HTML style will be applied when you select it in the HTML Styles panel. - In the HTML Styles panel, do one of the following:
Right-click (Windows) or Control-click (Macintosh) the style, then choose Edit from the context menu.
Double-click the style.
The Define HTML Style dialog box appears. - In the dialog box, set style attribute options for the style.
- To reset it to the default options, click Clear.
You can use the HTML Styles panel to record the HTML styles you use in your site, and then share them with other users, local sites, or remote sites.
HTML styles are automatically stored in your local site's Library folder in a file named Styles.xml. You can copy the Styles.xml file from the Library folder of one local site to the Library folder of another local site and reuse styles you create.
Note: Each site can only contain one Styles.xml file; therefore, if you created new HTML styles in the site to which you are copying a Styles.xml file, the file you copy there will replace the existing file. You won't lose any formatting changes you've already applied, and you can recreate the styles by selecting text in the document and defining a new HTML style.
To share your HTML styles with other sites or users:
- Choose Window > Site or Site > Site Files to open the Site panel in Site Files view.
- In the Site panel, locate and 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. You must first check out the styles.xml file before you can create or edit a style for a remote site.
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 or Dreamweaver > Preferences > General (Mac OS X), then in the Spelling Dictionary pop-up menu select the dictionary you want to use.
To check and correct spelling:
- Choose Text > Check Spelling or press Shift+F7.
When Dreamweaver encounters an unrecognized word the Check Spelling dialog box appears. - In the Check Spelling dialog box, choose the appropriate option based on how you want the discrepancy handled:
Add to Personal adds the unrecognized word to your personal dictionary.
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 text box or with the selection in the Suggestions list.
Change All replaces all instances of the unrecognized word in the same manner.
About images
Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. Currently, GIF and JPEG file formats are the best supported and can be viewed by most browsers.
PNG files are best suited for almost any type of web graphic due to their flexibility and small file size; however, the display of PNG images is only partially supported in Microsoft Internet Explorer (4.0 and later browsers) and Netscape Navigator (4.04 and later browsers). So unless you are designing for a specific target audience using a browser that supports the PNG format, use GIFs or JPEGs for broader appeal.
GIF (Graphic Interchange Format) files use a maximum of 256 colors, and are best for displaying noncontinuous-tone images or those with large areas of flat colors, such as navigation bars, buttons, icons, logos, or other images with uniform colors and tones. JPEG (Joint Photographic Experts Group) file format is the superior format for photographic or continuous-tone images, because JPEG files can contain millions of colors. As the quality of a JPEG file increases, so does the file size and the file download time. You can often strike a good balance between the quality of the image and the file size by compressing a JPEG file.
PNG (Portable Network Group) file format is a patent-free replacement for GIFs that includes support for indexed-color, grayscale, and true-color images, and alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks MX. PNG files retain all the original layer, vector, color, and effects information (such as drop shadows), and all elements are fully editable at all times. Files must have the .png file extension to be recognized as PNG files by Macromedia Dreamweaver MX.
Note: PNG support in browsers is inconsistent; therefore, if you work with PNG files, you should also export them as GIFs or JPEGs to ensure you have web-ready versions of them.
Inserting an image
When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.
To insert an image:
- Place the insertion point where you want the image to appear in the Document window, then do one of the following:
- In the Common category of the Insert bar, click the Image icon.
- In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
- Choose Insert > Image.
- Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
- Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
- Drag an image from the desktop to the desired location in the Document window; then skip to step 3.
- In the Common category of the Insert bar, click the Image icon.
- In the dialog box that appears, do one of the following:
- Choose File System to choose a graphic file.
- Choose Data Source to choose a dynamic image source.
- Browse to choose the image or content source you want to insert.
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. - In the Property inspector (Window > Properties), set properties for the image.
An image placeholder is a graphic you use until final artwork is ready to be added to a web page.
You can define certain attributes of the placeholder: you can set the placeholder’s size and color, as well as provide it with a text label. An image placeholder’s color, size attributes, and label appear when the image placeholder is viewed in the Dreamweaver Document window.
To insert an image placeholder:
- In the Document window, place the insertion point where you want to insert a placeholder graphic.
- In the Insert bar, select Common then click the Image Placeholder icon.
- In the Insert bar, select Common, then drag the Image Placeholder icon to the Document window.
- Choose Insert > Image Placeholder.
- In the Insert bar, select Common then click the Image Placeholder icon.
- In the dialog box, select options for the image placeholder.
- Click OK.
Use the image Property inspector to set the alignment of an image in relation to other elements in the same paragraph or line.
Note: HTML does not provide a way to wrap text around the contours of an image, as you can with some word processing applications
You can align an image to text, another image, a plug-in, or other elements in the same line. You can also use the alignment buttons (left, right, and center) to set the horizontal alignment of an image.
Default generally specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)
Baseline and Bottom align the baseline of the text (or other element in the same paragraph) to the bottom of the selected object.
Top aligns the top of an image to the top of the tallest item (image or text) in the current line.
Middle aligns the middle of the image with the baseline of the current line.
TextTop aligns the top of the image with the top of the tallest character in the text line.
Absolute Middle aligns the middle of the image with the middle of the text in the current line.
Absolute Bottom aligns to the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g).
Left places the selected image 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 image 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.
Creating a rollover image
rollover is an image that, when viewed in a browser, 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 a secondary image (the image that appears when the pointer moves over the primary image). Both images in a rollover should be the same size; if the images are not the same size, Dreamweaver automatically resizes the second image to match the properties of the first image.
You cannot see the effect of a rollover image in the Dreamweaver Document window. To see the rollover effect, press F12 to preview the page in a browser, then roll the pointer over the image.
To create a rollover:
- In the Document window, place the insertion point where you want the rollover to appear.
- Insert the rollover using one of these methods:
- In the Insert bar, select Common, then click the Rollover Image icon.
- In the Insert bar, select Common, then drag the Rollover Image icon to the desired location in the Document window.
- Choose Insert > Interactive Images >Rollover Image.
The Insert Rollover Image dialog box appears.
- In the Image Name text box, type a name for the rollover.
- In the Original Image text box, click Browse and select the image you want displayed when the page loads, or enter the image file’s path in the text box.
- In the Rollover Image text box, click Browse and select the image you want displayed when the pointer rolls over the original image, or enter the image file’s path in the text box.
- If you want the images preloaded in the browser’s cache so no delay occurs when the user rolls the pointer over the image, select the Preload Images option.
- In Alternate Text, enter text to describe the image for viewers using a text-only browser. (optional)
- In the When Clicked Go to URL text box, click Browse and select the file, or type the path to the file that you want to open when a user clicks the rollover image.
Note: If you don’t set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work. - Click OK to close the Insert Rollover Image dialog box.
- Choose File > Preview in Browser or press F12.
- In the browser, move the pointer over the original image.
The Create Web Photo Album command in Dreamweaver lets you automatically generate a web site that showcases an album of images from a given folder. This command uses JavaScript to call Fireworks, which creates a thumbnail and a larger-sized image for each of the images in the folder. Dreamweaver then creates a web page containing all the thumbnails, as well as links to the larger images. To use the Create Web Photo Album, you must have both Dreamweaver and Fireworks 4 or later installed on your system.
Before you begin, place all of the images for your photo album in a single folder. (The folder is not required to be in a site.) In addition, make sure that the image filenames end in extensions recognized by the Create Web Photo Album command (.gif, .jpg, .jpeg, .png, .psd, .tif, or .tiff). Images with unrecognized file extensions are not included in the photo album.
To create a Web photo album:
- In Dreamweaver, choose Commands > Create Web Photo Album.
- In the Photo Album Title text field, enter a title. The title will be displayed in a gray rectangle at the top of the page containing the thumbnails.
If desired, you can enter up to two lines of additional text to appear directly beneath the title, in the Subheading Info and Other Info text fields. - Choose the folder containing source images by clicking the Browse button next to the Source Images Folder text field. Then choose (or create) a destination folder in which to place all the exported images and HTML files by clicking the Browse button next to the Destination Folder text field.
The destination folder should not already contain a photo album—if it does, and if any new images have the same names as previously used images, you might overwrite existing thumbnail and image files. - Specify display options for the thumbnail images:
Choose a size for the thumbnail images from the Thumbnail Size pop-up menu. Images are scaled proportionally to create thumbnails that fit within a square that has the indicated pixel dimensions.
To display the filename of each original image below the corresponding thumbnail, select Show Filenames.
Enter the number of columns for the table that displays the thumbnails. - Choose a format for the thumbnail images from the Thumbnail Format pop-up menu:
GIF WebSnap 128 creates GIF thumbnails that use a web adaptive palette of up to 128 colors.
GIF WebSnap 256 creates GIF thumbnails that use a web adaptive palette of up to 256 colors.
JPEG—Better Quality creates JPEG thumbnails with relatively higher quality and larger file sizes.
JPEG—Smaller File creates JPEG thumbnails with relatively lower quality and smaller file sizes. - Choose a format for the large-size images from the Photo Format pop-up menu. A large-size image of the specified format is created for each of your original images. You may specify a format for the large-size images that differs from the format you specified for the thumbnails.
Note: The Create Web Photo Album command does not let you use your original image files as the large-size images, because original image formats other than GIF and JPEG might not display properly on all browsers. Note that if your original images are JPEG files, the large-size images generated may have larger file sizes or lower quality than the original files. - Choose a Scale percentage for the large-size images.
Setting Scale to 100% creates large-size images the same size as the originals. Note that the scale percentage is applied to all of the images; if your original images aren’t all the same size, scaling them by the same percentage may not produce the desired results. - Select Create Navigation Page for Each Photo to create an individual web page for each source image, containing navigation links labeled Back, Home, and Next.
If you select this option, the thumbnails link to the navigation pages. If you don’t select this option, the thumbnails link directly to the large-size images. - Click OK to create the HTML and image files for the web photo album.
Fireworks launches (if it’s not already running) and creates the thumbnails and large-size images. This may take several minutes if you’ve included a large number of image files. When the processing is complete, Dreamweaver becomes active again, and creates the page containing the thumbnails. - When a dialog appears that says “Album Created,” click OK. You may have to wait a few seconds for your photo album page to appear. The thumbnails are shown in alphabetical order by filename.
Editing a Flash movie from Dreamweaver
You cannot directly edit a SWF file, if you want to make changes to an exported SWF, select the Flash movie placeholder in the Dreamweaver document, and in the Property inspector click Edit. Edit launches Flash and if the path to the source document (FLA) is available, also launches the FLA file. When the edits are complete, Flash saves the changes in the FLA source document and re-exports the SWF movie file.
To launch and edit a Flash movie inserted from Dreamweaver:
- In Dreamweaver, choose Window > Properties to open the Property inspector, if it isn’t already open.
- In the Dreamweaver document, do one of the following:
- Click the Flash movie placeholder to select it; then in the Property inspector click Edit.
- Hold down Control and double-click the movie placeholder for the movie you want to edit.
- Right-click (Windows) or Control-click (Macintosh) the desired movie, and choose Edit With Flash from the context menu.
Dreamweaver launches Flash, and opens the FLA file for you to edit or prompts you to open it if it cannot locate the FLA file.
- Click the Flash movie placeholder to select it; then in the Property inspector click Edit.
- Note: If the FLA file or SWF file is locked, Dreamweaver prompts you to check the file out, cancel the request, or view the file.
- In Flash, edit the movie. The Document window indicates that you are modifying a movie from Dreamweaver.
- When you are finished making edits, click Done.
Clicking Done saves changes to the source FLA file, and updates the SWF file.
You can insert a Flash movie or object, QuickTime or Shockwave movie, Java applet, ActiveX control, or other audio or video objects in a Dreamweaver document.
To insert a media object in a page:
- Place the insertion point in the Document window where you want to insert the object, then do one of the following:
- In the Insert bar, select Media, then click the button for the type of object you want to insert, or drag it to the Document window.
- Choose the appropriate object from the Insert > Media or Insert > Interactive Images submenu.
In most cases, a dialog box appears letting you select a source file and specify certain parameters for the media object.
- In the Insert bar, select Media, then click the button for the type of object you want to insert, or drag it to the Document window.
Each file type that Dreamweaver doesn’t handle directly can be associated with one or more external editors found on your system. The editor that launches when you double-click the file in the Site panel is called the primary editor. You can set which editor is associated with a file type in File Types/Editors preferences.
If more than one editor is associated with the file type, you can launch a secondary editor for a particular file. Right-click (Windows) or Control-click (Macintosh) the filename in the Site panel, and choose an editor from the Open With submenu of the context menu.
To explicitly specify which external editors should be launched for a given file type, choose Edit > Preferences and select File Types/Editors from the Category list. Filename extensions, such as .gif, .wav, and .mpg, are listed on the left under Extensions. Associated editors for a selected extension are listed on the right under Editors.
You can also browse to find an external editor to edit your file. Right-click (Windows) or Control-click (Macintosh) the file in the Design view of the Document window, and choose Edit With > Browse or select the file and choose > Edit > Edit with External Editor.
To add a file type to the list of extensions in File Types/Editors preferences:
- Click the plus (+) button above the Extensions list.
- Enter a file type extension (including the period at the beginning of the extension), or several related extensions separated by spaces.
For example, you might enter .css, .png .jpg.
- Select the file type extension in the Extensions list.
- Click the plus (+) button above the Editors list.
- In the dialog box that appears, choose an application to add to the Editors list.
For example, choose the application icon for Excel to add that application to your Editors list.
- Select the file type in the Extensions list.
Note: You can’t undo after removing a file type, so be sure that you want to remove it. - Click the minus (-) button above the Extensions list.
- Select the file type.
- Select the editor (or add it if it isn’t on the list).
- Click Make Primary.
- Select the file type in the Extensions list.
- Select the editor in the Editors list.
- Click the minus (-) button above the Editors list.
The Flash button object is an updateable button that is based on a Flash template. You can customize a Flash button object, adding text, background color, and links to other files. Flash buttons can be inserted while working in Design view or in Code view.
Note: You must save your document before inserting a Flash button or text object.
You use the Insert Flash Button dialog box to select from a set of designed Flash buttons. You can view an example of the button in the Sample field. Click the sample to see how it functions in the browser. While you are defining the Flash button (for example, changing text or font choices), the Sample field does not automatically update to reflect the changes. These changes will appear when you close the dialog box and view the button in Design view.
To insert a Flash button object:
- In the Document window, place the insertion point where you want to insert the Flash button.
- To open the Insert Flash Object dialog box, do one of the following:
- In the Insert bar, select Media and then click the Flash Button icon.
- In the Insert bar, select Media and then drag the Flash Button icon to the Document window, or to the Code view window if you are working in the code.
- Choose Insert > Interactive Images > Flash Button.
The Insert Flash Button dialog box appears.
- In the Insert bar, select Media and then click the Flash Button icon.
- Select the button style you want from the Style list.
- In the Button Text field (optional), type the text you want to appear.
This field only accepts changes if the selected button has a {Button Text} parameter defined. This is shown in the Sample field. The text you type in replaces the {Button Text} when you preview the file. - In the Font pop-up menu, select the font you want to use.
If the default font for a button is not available on your system, select another font from the pop-up menu. You will not see the font you selected in the Sample field, but you can click Apply to insert the button in the page to see what the text will look like. - In the Size field, enter a numeric value for the font size.
- In the Link field (optional), enter a document-relative or absolute link for the button.
- In the Target field (optional), specify the location in which the linked document will open. You can select a frame or window option in the pop-up menu. Frame names are listed only if the Flash object is being edited while in a frameset.
- In the Bg Color field (optional), set the background color for the Flash movie. Use the color picker or type in a web hexadecimal value (such as #FFFFFF).
- In the Save As field, enter a filename to save the new SWF file.
You can use the default filename (for example, button1.swf), or type in a new name. If the file contains a document-relative link, you must save the file to the same directory as the current HTML document to maintain document-relative links. - Click Get More Styles to go the Macromedia Exchange site and download more button styles.
- Click Apply or OK to insert the Flash button in the Document window.
You can modify the properties and content of a Flash button object.
To modify a Flash button object:
- In the Document window, click the Flash button object to select it.
- Open the Property inspector, if it is not already open.
The Property inspector displays the Flash button properties. You can use the Property inspector to modify the button’s HTML attributes, such as width, height, and Bg color. - To make changes to content, display the Insert Flash Button dialog box using one of the following methods:
Double-click the Flash button object.
Click Edit in the Property inspector.
Right-click (Windows) or Control-click (Macintosh) and choose Edit from the context menu. - In the Insert Flash Button dialog box, make your edits in the fields
You can preview a Flash button in the Dreamweaver Document window.
To see the Flash button object play in the Document window:
- While in Design view, in the document, select the Flash button object.
- In the Property inspector, click Play.
- Click Stop to end the preview.
It’s also a good idea to preview your document in the browser to see exactly how the Flash button looks.
Inserting a Flash text object
The Flash text object lets you create and insert a Flash movie that contains just text. This allows you to create a small, vector-graphic movie with the designer fonts and text of your choice.
To insert a Flash text object:
- In the Document window, place the insertion point where you want to insert the Flash text.
- To open the Insert Flash Text dialog box, do one of the following:
- In the Insert bar, select Media and then click the Flash Text icon.
- In the Insert bar, select Media and then drag the Flash Text icon to the Document window (or to the Code view window if you are working in the code).
- Choose Insert > Interactive Images > Flash Text.
The Insert Flash Text dialog box appears.
- In the Insert bar, select Media and then click the Flash Text icon.
- Select a font from the Font pop-up menu.
This menu lists all TrueType fonts currently loaded on your system. - Enter a font size in the Size field; these are point sizes.
- Specify style attributes, like bold or italic, and text alignment by clicking the appropriate style buttons.
- In the Color field, set the color of the text by using the color picker or entering a web hexadecimal value (such as #FFFFFF).
- In the Rollover Color field, set the color that appears when the pointer rolls over the Flash text object. Use the color picker or enter a web hexadecimal value (such as #FFFFFF).
Enter the text you want in the Text field. - To see the font style displayed in the Text field, select Show Font.
- If you want to associate a link with the Flash text object, enter a document-relative or absolute link in the Link field.
Site-relative links are not accepted because browsers don’t recognize them within Flash movies. If you use a document-relative link, make sure to save the SWF file to the same directory as the HTML file. (Browsers vary in their interpretation of document-relative links and saving to the same directory ensures that the links will work correctly.) - If you entered a link, you can specify a target frame or target window for that link to go to in the Target field.
- In the Bg Color field, choose a background color for the text. Use the color picker or enter a web hexadecimal value (such as #FFFFFF).
- In the Save As field, enter a name for the file.
You can use the default filename (for example, tex1.swf), or type in a new name. If the file contains a document-relative link, you must save the file to the same directory as the current HTML document to maintain document-relative links. - Click Apply or OK to insert the Flash text in the Document window.
If you click Apply, the dialog box remains open, and you can preview the text in your document.
When you insert a Flash movie into a document, Dreamweaver uses both the object tag (defined by Microsoft Internet Explorer for ActiveX controls) and the embed tag (defined by Netscape Navigator) to get the best results in all browsers. When you make changes in the Property inspector for the movie, Dreamweaver maps your entries to the appropriate parameters for both the object and embed tags.
To insert a Flash movie:
- In the Design view of the Document window, place the insertion point where you want to insert the movie, then do one of the following:
- In the Insert bar, select Media and then click the Insert Flash icon.
- In the Insert bar, select Media and then drag the Insert Flash icon to the Document window.
- Choose Insert > Media > Flash.
- In the dialog box that appears, select a Flash movie file (.swf).
- In the Insert bar, select Media and then click the Insert Flash icon.
- In the Document window, click the Flash placeholder to select the Flash movie you want to preview.
- In the Property inspector, click the Play button. Click Stop to end the preview. You can also preview the Flash movie in a browser by pressing F12.
You can add video to your web page in different ways and using different formats. Video can be downloaded to the user or it can be streamed so that it plays while it is downloading. The most common streaming formats available on the web for the transmission of video files are RealMedia, QuickTime, and Windows Media. You must download a helper application to view these formats. With these formats, you can stream audio and video simultaneously.
If you’d like to include a short clip that can be downloaded rather than streamed, you can link to the clip or embed it in your page. These clips are often in the AVI or MPEG file format.
You can use Director to create Shockwave movies or Flash to create interactive, low-bandwidth, multimedia presentations for the web. With Flash, file size is surprisingly small, and the technology works across many platforms. (Of course, users must first download the free player plug-in before they can view these files.)
Adding sound to a page
There are several different types of sound files and formats, and several different ways to add sound to a web page. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers. Note: Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file to a Flash movie, then embed the SWF file to improve consistency.
About audio file formats
The following list describes the more common audio file formats along with some of the advantages and disadvantages of each for web design.
.midi or .mid (Musical Instrument Digital Interface) format is for instrumental music. MIDI files are supported by many browsers and don’t require a plug-in. Although their sound quality is very good, it can vary depending on a visitor’s sound card. A small MIDI file can provide a long sound clip. MIDI files cannot be recorded and must be synthesized on a computer with special hardware and software.
.wav (Waveform Extension) format files have good sound quality, are supported by many browsers, and don’t require a plug-in. You can record your own WAV files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages.
.aif (Audio Interchange File Format, or AIFF) format, like WAV format, has good sound quality, can be played by most browsers, and doesn’t require a plug-in; you can also record AIFF files from a CD, tape, microphone, and so on. However, the large file size severely limits the length of sound clips that you can use on your web pages. .mp3 (Motion Picture Experts Group Audio, or MPEG-Audio Layer-3) format is a compressed format that makes sound files substantially smaller. The sound quality is very good: if an MP3 file is recorded and compressed properly, its quality can rival that of a CD. New technology lets you “stream” the file so that a visitor doesn’t have to wait for the entire file to download before hearing it. However, the file size is larger than a Real Audio file, so a whole song could still take quite a while to download over a normal phone line connection. To play MP3 files, visitors must download and install a helper application or plug-in such as QuickTime, Windows Media Player or RealPlayer.
.ra, .ram, .rpm, or Real Audio format has a very high degree of compression with smaller file sizes than MP3. Whole song files can be downloaded in a reasonable amount of time. Because the files can be “streamed” from a normal web server, visitors can begin listening to the sound before the file has completely downloaded. The sound quality is poorer than that of MP3 files, but new players and encoders have improved quality considerably. Visitors must download and install the RealPlayer helper application or plug-in to play these files.
Linking to an audio file
Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience. (Some browsers may not support embedded sound files.)
To create a link to an audio file:
- Select the text or image you want to use as the link to the audio file.
- In the Property inspector, click the folder icon to browse for the audio file, or type the file’s path and name in the Link field.
Embedding audio incorporates the sound player directly into the page, but the sound only plays if visitors to your site have the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or if you want more control over the sound presentation itself. For example, you can set the volume, the way the player looks on the page, and the beginning and ending points of the sound file.
To embed an audio file:
- In Design view, place the insertion point where you want to embed the file and then do one of the following:
- In the Insert bar, select Media then click the Plugin icon.
- In the Insert bar, select Media then drag the Plugin icon to the Document window, or to the Code view window if you are working in the code.
- Choose Insert > Media > Plugin.
- In the Property inspector, click the folder icon to browse for the audio file, or type the file’s path and name in the Link field.
- Enter the width and height by entering the values in the appropriate fields or by resizing the plug-in placeholder in the Document window.
Inserting Netscape Navigator plug-in content
Plug-ins enhance Netscape Navigator, providing ways to view media content in a wide variety of formats. Plug-ins are the means by which content files are played and displayed on your website. For example, typical plug-ins include RealPlayer and QuickTime, while some content files themselves include MP3s and QuickTime movies.
After you create content for a Navigator plug-in, 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 plug-in content:
- In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
- In the Insert bar, select Media and then click the Plugin icon.
- Choose Insert > Media > Plugin.
- In the dialog box that appears, select a content file for a Navigator plug-in.
- Select one of the media elements you have inserted, and choose View > Plugins > Play or click the Play button in the Property inspector.
- Choose View > Plugins > Play All to play all of the media elements on the selected page that rely on plug-ins.
To stop playing plug-in content:
Select a media element and choose View > Plugins > Stop, or click the Stop button in the Property inspector.
You can also choose View > Plugins > Stop All to stop all plug-in content from playing.
Troubleshooting Navigator plug-ins
If you have followed the steps to play plug-in content in the Document window, but some of the plug-in content does not play, try the following:
- Make sure the associated plug-in is installed on your computer, and that the content is compatible with the version of the plug-in you have.
- Open the file Configuration/Plugins/UnsupportedPlugins.txt in a text editor and look to see if the problematic plug-in is listed. This file keeps track of plug-ins that cause problems in Dreamweaver and are therefore unsupported. (If you experience problems with a particular plug-in, 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 plug-ins require an additional 2 to 5 MB of memory to run.
ActiveX controls (formerly known as OLE controls) are reusable components, somewhat like miniature applications, that can act like browser plug-ins. 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:
- In the Document window, place the insertion point where you want to insert the content and do one of the following:
- In the Insert bar, select Media and then click the ActiveX icon.
- In the Insert bar, select Media and then drag the ActiveX icon to the Document window (or to the Code view window if you are working in the code).
- Choose Insert > Media > ActiveX.
An icon marks where the ActiveX control will appear on the page in Internet Explorer.
- In the Insert bar, select Media and then click the ActiveX icon.
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 it into an HTML document using Dreamweaver. Dreamweaver uses the applet tag to mark the reference to the applet file.
To insert a Java applet:
- In the Document window, place the insertion point where you want to insert the applet, then do one of the following:
- In the Insert bar, select Media and then click the Applet icon.
- In the Insert bar, select Media and then drag the Applet icon to the Document window (or to the Code view window if you are working in the code).
- Choose Insert > Media > Applet. You can also drag the Flash button icon over to the Document window.
- In the Insert bar, select Media and then click the Applet icon.
- In the dialog box that appears, select a file containing a Java applet.
Dreamweaver behaviors place JavaScript code in documents to allow visitors to interact with a web page to change the page in various ways, or to cause certain tasks to be performed. A behavior is a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action.
Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.
Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For example, when a visitor moves the pointer over a link, the browser generates an onMouseOver event for that link; the browser then checks to see whether there’s some JavaScript code (specified in the page being viewed) that the browser is supposed to call when that event is generated for that link. Different events are defined for different page elements; for example, in most browsers onMouseOver and onClick are events associated with links, whereas onLoad is an event associated with images and with the body section of the document.
About behaviors and text
You can’t attach a behavior to plain text. Tags like p and span don’t generate events in browsers, so there’s no way to trigger an action from those tags.
However, you can attach a behavior to a link. Therefore, to attach a behavior to text, the easiest approach is to add a null link (that doesn’t point to anything) to the text, then attach the behavior to the link. Note that if you do this, your text will appear as a link. You can change the link color and remove the underlining if you really don’t want it to look like a link, though site visitors may then be unaware that there’s a reason to click that text.
To attach a behavior to the selected text:
- In the Property inspector, enter javascript:; in the Link field. Be certain to include both the colon and the semicolon.
Note: You can instead use a number sign (#) in the Link field if you want. The problem with using a number sign is that when a visitor clicks the link, some browsers may jump to the top of the page. Clicking the JavaScript null link has no effect at all on the page, so the JavaScript approach is generally preferable. - With the text still selected, open the Behaviors panel (Window > Behaviors).
- Choose an action from the Actions pop-up menu, enter parameters for the action, and choose an event to trigger the action.
- Open the Document window’s Code view by choosing View > Code.
- Find the link.
- In the link’s a href tag, insert this attribute: .
This attribute setting disables underlining and sets the color of the text to black. (Of course, if the surrounding text is a different color, use that color instead of black.)
Attaching a behavior to a timeline
To trigger a behavior at a certain frame in a timeline (rather than having a visitor’s interaction trigger it), place the behavior in the timeline.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 inside Dreamweaver.
To place a behavior in a timeline:
- Click in a frame in the Behaviors channel in the Timelines panel.
- Use the Behaviors panel to choose an action to perform at that frame.
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:
- Select an object with a behavior attached.
- Choose Window > Behaviors to open the Behaviors panel.
Behaviors appear in the panel alphabetically by event. If there are several actions for the same event, the actions appear in the order in which they will execute. - Choose from the following options:
- To edit an action’s parameters, 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 an action and click the up or down arrow button.
- To delete a behavior, select it and click the minus (–) button or press Delete.
If your pages contain behaviors created with Dreamweaver 1 or Dreamweaver 2, those behaviors are not updated automatically when you open the pages in the current version of Dreamweaver. However, when you update one occurrence of a behavior in a page (by following the procedure below), all other occurrences of that behavior in that page are also updated.
To update a behavior in a page:
- Select an element that has the behavior attached to it.
- Open the Behaviors panel.
- Double-click the behavior.
- Click OK in the behavior’s dialog box.
Call JavaScript
The Call JavaScript action lets you use the Behaviors panel to specify that a custom function or line of JavaScript code should be executed when an event occurs. (You can write the JavaScript yourself, or you can use code provided by various freely available JavaScript libraries on the web.)
To use the Call JavaScript action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Call JavaScript from the Actions pop-up menu.
- 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, hogback()). - Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
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 Internet Explorer 4.0 than in IE 3.0 or 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:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Change Property from the Actions pop-up menu.
- From the Type of Object pop-up menu, choose the type of object whose property you want to change.
The Named Object pop-up menu now lists all the named objects of the type you chose. - Choose an object from the Named Object pop-up menu.
- 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 or browser versions 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). - Enter the new value for the property in the New Value field, and click OK.
- 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 Show Events For pop-up menu.
Use the Check Browser action to send 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 Navigator 4.0 or later, to go to another page if they have 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 (such as <a href="javascript:;">) and have the action determine the link’s destination based on the visitor’s browser brand and version.
To use the Check Browser action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Check Browser from the Actions pop-up menu.
- Determine how you want to separate your visitors: by browser brand, by browser version, or both.
For example, do you want everyone with a 4.0 browser to see one page, and all others to see a different page? Or perhaps you want Netscape Navigator users to see one page and Internet Explorer users to see another. - Specify a version of Netscape Navigator.
- In the adjacent pop-up menus, choose options for what to do if the browser is the Netscape Navigator 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. - Specify a version of Internet Explorer.
- In the adjacent pop-up menus, choose options for what to do if the browser is the Internet Explorer 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. - Choose an option from the Other Browsers pop-up menu to specify what to do if the browser is neither Navigator nor Internet Explorer. (For example, the visitor may be using a text-based browser like Lynx.)
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. - Enter the paths and filenames 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.
- Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. 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.
Use the Check Plugin action to send visitors to different pages depending on whether they have the specified plug-in installed. For example, you might want visitors to go to one page if they have Shockwave and another page if they do not.
Note: You cannot detect specific plug-ins in Internet Explorer using JavaScript. However, selecting Flash or Director will add the appropriate VBScript code to your page to detect those plug-ins in IE on Windows.
To use the Check Plugin action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Check Plugin from the Actions pop-up menu.
- Choose a plug-in from the Plugin pop-up menu, or click Enter and type the exact name of the plug-in in the adjacent field.
You must use the exact name of the plug-in as specified in bold on the About Plug-ins page in Navigator. (In Windows, choose Navigator’s Help > About Plug-ins command; on the Macintosh, choose About Plug-ins from the Apple menu.) - In the If Found, Go To URL field, specify a URL for visitors who have the plug-in.
If you specify a remote URL, you must include the http:// prefix in the address - To make visitors with the plug-in stay on the same page, leave this field blank.
- In the Otherwise, Go To URL field, specify an alternative URL for visitors who don’t have the plug-in.
To make visitors without the plug-in stay on the same page, leave this field blank.
In general, if the plug-in content is integral to your page, select the “Always go to first URL if detection is not possible” option; visitors without the plug-in will often be prompted by the browser to download the plug-in. If the plug-in content is not essential to your page, leave this option unselected. This option applies only to Internet Explorer; Navigator can always detect plug-ins.
- Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
Use the Control Shockwave or Flash action to play, stop, rewind, or go to a frame in a Macromedia Shockwave or Macromedia Flash movie.
To use the Control Shockwave or Flash action:
- Choose Insert > Media > Shockwave or Insert > Media > Flash to insert a Shockwave or Flash movie, respectively.
- Choose Window > Properties and enter a name for the movie in the upper leftmost field (next to the Shockwave or Flash icon). You must name the movie to control it with the Control Shockwave or Flash action.
- Select the item you want to use to control the Shockwave or Flash movie. For example, if you have an image of a “Play” button that will be used to make the movie play, select that image.
- Open the Behaviors panel (Window > Behaviors).
- Click the plus (+) button and choose Control Shockwave or Flash from the Actions pop-up menu.
A parameters dialog box appears. - Choose a movie from the Movie pop-up menu.
Dreamweaver automatically lists the names of all Shockwave and Flash movies in the current document. (Specifically, Dreamweaver lists movies with filenames ending in .dcr, .dir, .swf, or .spl that are in object or embed tags.) - Choose to play, stop, rewind, or go to a frame in the movie. The Play option plays the movie starting from the frame where the action occurs.
- Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For submenu of the Events pop-up menu.
The Drag Layer action lets the visitor drag a layer. Use this action to create puzzles, slider controls, and other movable interface elements.
You can specify in which direction the visitor can drag the layer (horizontally, vertically, or in any direction), a target to which the visitor should drag the layer, whether to snap the layer to the target if the layer is within a certain number of pixels of the target, what to do when the layer hits the target, and more.
Because the Drag Layer action must be called before the layer can be dragged by the visitor, make sure the event that triggers the action occurs before the visitor 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:
- Choose Insert > Layer or click the Draw Layer button on the Insert bar and draw a layer in the Document window’s Design view.
- Select the body tag by clicking <body> in the tag selector at the bottom of the Document window.
- Open the Behaviors panel.
- 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 Show Events For pop-up menu. - In the Layer pop-up menu, select the layer that you want to make draggable.
- 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. - 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. - 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 visitor to drag the layer. A layer is considered to have reached the drop target when its left and top coordinates match the values you enter in the Left and Top 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. - Enter a value (in pixels) in the Snap if Within field to determine how close the visitor must get to the drop target before the layer snaps to the target.
Larger values make it easier for the visitor to find the drop target. - 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.
- To specify that the visitor 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 visitor to be able to click anywhere in the layer to drag it. - 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 could 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.
- 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.
- Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu. Remember that layers are not supported by 3.0 browsers.
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 in a timeline to jump to a new page after a specified time interval.
To use the Go To URL action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Go to URL from the Actions pop-up menu.
- 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.
- Click Browse to select a document to open, or enter the path and filename of the document in the URL field.
- Repeat steps 3 and 4 to open additional documents in other frames.
- Click OK.
- Check that the default event is the one you want.
Jump Menu Go The Jump Menu Go action is closely associated with the Jump Menu action; Jump Menu Go lets you associate a Go button with a jump menu. (Before you use this action, a jump menu must already exist in the document.) Clicking the Go button opens the link that’s selected in the jump menu. A 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 visitor chooses the same item that’s already chosen in the jump menu, the jump doesn’t occur. In general, that doesn’t matter, but if the jump menu appears in a frame, and the jump menu items link to pages in other frames, a Go button is often useful, to allow visitors to re-choose an item that’s already selected in the jump menu.
To add a Jump Menu Go action:
- Select an object to use as the Go button (generally a button image), and open the Behaviors panel.
- Click the plus (+) button and choose Jump Menu Go from the Actions pop-up menu.
- In the Choose Jump Menu pop-up menu, choose a menu for the Go button to activate.
- Click OK.
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. For example, you can use this behavior to open a larger image in a separate window when the visitor clicks a thumbnail image; with this behavior, you can make the new window the exact size of the image.
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 attribute 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:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Open Browser Window from the Actions pop-up menu.
- Click Browse to select a file, or enter the URL you want to display.
- 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 visitors 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.
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. This name cannot contain spaces or special characters.
- Click OK.
- Check that the default event is the one you want.
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 additional audio support (such as an audio plug-in) to play sounds. Therefore, different browsers with different plug-ins often play sounds differently. It’s difficult to reliably predict how visitors to your site will experience the sounds you provide.
To use the Play Sound action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Play Sound from the Actions pop-up menu.
- Click Browse to select a sound file, or enter the path and filename in the Play Sound field.
- Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
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 (\{).
To use the Popup Message action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Popup Message from the Actions pop-up menu.
- Enter your message in the Message field.
- Click OK.
- Check that the default event is the one you want.
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 select 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:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Preload Images from the Actions pop-up menu.
- Click Browse to select an image file to preload, or enter the path and filename of an image in the Image Source File field.
- 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. - Repeat steps 3 and 4 for all remaining images that you want to preload on the current page.
- To remove an image from the Preload Images list, select the image in the list and click the minus (–) button.
- Click OK.
- Check that the default event is the one you want.
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 (\{ ).
To attach a Set Text of Layer action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Set Text > Set Text of Layer from the Actions pop-up menu.
- In the Set Text of Layer dialog box, use the Layer pop-up menu to choose the target layer.
- Enter a message in the New HTML field, then click OK.
- Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.
If you don’t see the events you want, change the target browser in the Show Events For pop-up menu.
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. Note, however, that visitors often ignore or overlook messages in the status bar (and not all browsers provide full support for setting the text of the status bar); if your message is important, consider displaying it as a pop-up message or as the text of a layer.
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 (\{).
To use the Set Text of Status Bar action:
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Set Text > Set Text of Status Bar from the Actions pop-up menu.
- 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. - Click OK.
- Check that the default event is the one you want.
If it isn’t, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Show Events For pop-up menu.
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 (\{).
To create a named text field:
- Choose Insert > Form Objects > Text Field.
If Dreamweaver prompts you to add a form tag, click Yes. - 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).
- Select a text field and open the Behaviors panel.
- Click the plus (+) button and choose Set Text > Set Text of Text Field from the Actions pop-up menu.
- In the Set Text of Text Field dialog box, choose the target text field from the Text Field pop-up menu.
- Enter text in the New Text field, then click OK.
- Check that the default event is the one you want. If it isn’t, choose another event from the pop-up menu.
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:
- Choose Insert > Layer or click the Layer button in the Insert bar, and draw a layer in the Document window.
Repeat this step to create additional layers. - Click in the Document window to deselect the layer, then open the Behavior panel.
- 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 Show Events For pop-up menu. - From the Named Layers list, select the layer whose visibility you want to change.
- Click Show to show the layer, Hide to hide the layer, or Default to restore the layer’s default visibility.
- Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time. (You can change the visibility of multiple layers with a single behavior.)
- Click OK.
- Check that the default event is the one you want.
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:
- Click the Draw Layer button in the Common category of the Insert bar and draw a large layer in the Document window’s Design view.
Be sure the layer covers all the content on the page. - In the Layers panel, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order.
- Select the layer if it’s not selected, and name it loading, using the leftmost field in the layer Property inspector.
- With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector.
- 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 visitors what is happening so that they know the page contains content. - Click the <body> tag in the tag selector in the bottom left corner of the Document window.
- In the Behaviors panel, choose Show-Hide Layers from the Actions pop-up menu.
- Select the layer called loading from the Named Layers list.
- Click Hide.
- Click OK.
- Make sure that the event listed next to the Show-Hide Layers action in the behaviors list is onLoad. (If it isn’t, select the event and click the downward-pointing triangle that appears between the event and the action. Choose onLoad from the list of events in the pop-up menu.)
You use the Show Pop-Up Menu behavior to create or edit a Dreamweaver pop-up menu or to open and modify a Fireworks pop-up menu you’ve inserted in a Dreamweaver document. You set options in the Show Pop-Up Menu dialog box to create a horizontal or vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.
To use the Show Pop-up Menu action:
- Select an object to attach the behavior to and open the Behaviors panel (Shift+F3).
- Click the plus (+) button and choose Show Pop-Up Menu from the Actions pop-up menu.
- In the Show Pop-Up Menu dialog box that appears, use the following tabs to set options for the pop-up menu:
Contents allows you to set the name, structure, URL, and target of individual menu items.
Appearance enables you to set the appearance of the menu’s Up State and Over State and to set font choices for menu item text.
Advanced allows you to set the properties of the menu cells. For example, you can set cell width and height, cell color and border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.
You use the Contents tab in the Show Pop-up Menu dialog box to create menu items. You can also use this tab to remove existing items, or to change the order in which they appear in a menu.
To add pop-up menu items:
- In the Contents tab, create a pop-up menu item by doing the following:
In the Text field, select the default text (New Item), then type the text you want to appear in the pop-up menu. - Set additional options, as desired:
If you want the menu item to open another file when clicked, in the Link field, type the file path or click the Folder icon and browse to the document you want to open - If you want to set a location in which the document opens, for example in a new window or in a specific frame, in the Target pop-up menu choose the desired location. Note: If the frame you want to target doesn’t appear on the Target pop-up menu, close the Show Pop-Up Menu dialog box, then in the Document window select and name the frame.
- Click the plus (+) button to add additional entries to the Show Pop-Up Menu preview list.
When you finish adding menu items, click OK to accept the default settings or select another Show Pop-Up Menu tab to set additional options.
In the Show Pop-Up Menu list, select the item you want to make into a submenu item, then do one of the following:
- To indent an item in the menu list, click the Indent Item button.
- To remove an indent, click the Outdent Item button.
To change the order of an item in the menu:
In the Show Pop-Up Menu list, select the item you want to move up or down, then click the Up or Down arrow to move the item where you want it to appear.
To remove an item from the menu:
- In the Contents tab, select the menu entry you want to remove in the Show Pop-Up Menu list.
- Click the minus (-) button
After you create the menu items, use the Show Pop-Up Menu’s Appearance tab to set the orientation, font attributes, and button state attributes for the pop-up menu.
Note: The Appearance tab’s preview pane provides an approximate rendering of the options you set in this tab.
To set the appearance of a pop-up menu:
- In the pop-up menu at the top of the Appearance tab, choose Vertical Menu or Horizontal Menu to set the menu’s orientation.
Set the text formatting options you want:
In the Font pop-up menu, select the font you want to apply to the menu items. - Set the text formatting options you want:
In the Font pop-up menu, select the font you want to apply to the menu items.
Note: If the font you want to apply is not in the font list, use the Edit Font List option, to add the desired font to the font list. To ensure the menu appears as desired, you should choose a font that site visitor’s are likely to have. - In the Up State and Over States boxes, use the color picker to set the text and cell colors of the menu item buttons.
- When you finish setting appearance options, click OK or select another Show Pop-Up Menu tab to set additional options.
Use options in the Advanced tab to specify additional attributes of the menu cells. For example, you can set the width, height, cell spacing or padding of the menu button, indent text, and set border attributes.
To set advanced formatting attributes for a pop-up menu:
- Click the Advanced tab, then set the options you want to apply to the menu items:
Cell Width sets a specific width, in pixels, for the menu buttons. Cell width is set automatically based on the widest item; to increase the cell width, select Pixels in the pop-up menu and enter a value larger than the one that appears in the Cell Width text box.
Cell Height sets a specific height, in pixels, for the menu buttons. To increase the cell height, select Pixels in the pop-up menu and enter a value larger than the one that appears in the Cell Height text box.
Cell Padding specifies the number of pixels between a cell’s content and its boundaries.
Cell Spacing specifies the number of pixels between adjacent cells.
Text Indent allows you to specify, in pixels, how far text in a menu item is indented within the cell.
Menu Delay sets the length of time between when the user moves the pointer over the triggering image or link, and when the menu appears. Values are in milliseconds so the default setting, 1000, equals 1 second. For every second of delay you want, add 000; for example, for a 3 second delay, type 3000.
Pop-up Borders determines whether a border appears around the items in the menu. If you want a border to appear around the menu items, make sure the Show Borders checkbox is checked.
Border Width sets the border’s width, in pixels.
Shadow, Border Color, and Highlight allow you to pick a color for these border options. Shadow and highlight are not reflected in the preview. - When you finish setting advanced appearance options, click OK or select another Show Pop-Up Menu tab to set additional options.
Use position options to set where the pop-up menu displays relative to the triggering image or link. You can also set whether the menu hides or not when the user moves the pointer away from the trigger.
To set pop-up menu position options:
- In the Show Pop-Up Menu dialog box, click the Position tab.
- Set the location of the pop-up menu by doing one of the following:
- Choose one of the preset options.
- Set customized position coordinates by typing a number in the X text box to set the horizontal coordinate and by typing a number in the Y text box to set the vertical coordinate. Coordinates count from the top left corner of the menu.
- To hide the pop-up menu when the pointer is not over it, make sure Hide Menu onMouseOut Event is checked. To leave the menu displayed, deselect this option.
- When you finish creating or modifying the pop-up menu, click OK.
The Show Pop-Up Menu behavior allows you to edit or update the contents of a pop-up menu. You can add, delete, or change menu items, rearrange them, and set where a menu is positioned relative to the triggering image or link.
To open an existing HTML-based pop-up menu:
- In the Dreamweaver document, select the link or image that triggers the pop-up menu.
- Open the Behaviors panel (Shift + F3), if it isn’t already open, then in the Actions list, double-click Show Pop-Up Menu.
The Show Pop-Up Menu dialog box appears. - Make the changes you want to make to the pop-up menu.
- When you finish modifying the pop-up menu, click OK.
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). Inserting a rollover image automatically adds a Swap Image behavior to your page.
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. Otherwise, the image you swap in appears compacted or expanded to fit the original image’s dimensions.
To use the Swap Image action:
- Choose Insert > Image or click the Image button on the Insert bar to insert an image.
- In the Property inspector, enter a name for the image in the leftmost text box.
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. - Repeat steps 1 and 2 to insert additional images.
- Select an object (generally the image you’re going to swap) and open the Behaviors panel.
- Click the plus (+) button and choose Swap Image from the Actions pop-up menu.
- From the Images list, select the image whose source you want to change.
- Click Browse to select the new image file, or enter the path and filename of the new image in the Set Source To text box.
- Repeat steps 6 and 7 for any additional images you want to change. Use the same Swap Image action for all the images you want to change at once; otherwise, the corresponding Swap Image Restore action won’t restore all of them.
- 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. - Click OK.
- Check that the default event is the one you want.
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.
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 Timelines panel 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:
- Choose Window > Timeline to open the Timelines panel, and make sure that your document contains a timeline.
- Select an object to attach the behavior to.
To attach the behavior to a frame in the Timeline, click in the Behavior channel at the desired frame. - Open the Behaviors panel.
- Click the plus (+) button and choose Timeline > Go to Timeline Frame from the Actions pop-up menu. (If this action is dimmed, your document doesn’t contain a timeline.)
- Choose a timeline from the Timeline pop-up menu.
- Enter a frame number in the Go to Frame text box.
- 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 text box.
You must leave this text box blank if you are not attaching Go to Timeline Frame to a frame in a timeline. - Click OK.
- Check that the default event is the one you want.
Play Timeline and Stop Timeline Use the Play Timeline and Stop Timeline actions to let visitors 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 Timelines panel.
To use the Play Timeline and Stop Timeline actions:
- Choose Window > Timeline to open the Timelines panel, and make sure that your document contains a timeline.
- Select an object and open the Behaviors panel.
- Click the plus (+) button and choose Play Timeline or Stop Timeline from the Actions pop-up menu.
- Select the timeline you want to play or stop, or choose to stop all timelines, from the pop-up menu.
- Click OK.
- Check that the default event is the one you want.
Validate Form
The Validate Form action checks the contents of specified text fields to ensure that the user has entered the correct type of data. Attach this action to individual text fields with the onBlur event to validate the fields as the user is filling out the form, or attach it to the form with the onSubmit event to evaluate several text 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 text fields contains invalid data.
To use the Validate Form action:
- Choose Insert > Form or click the Form button in the Insert bar to insert a form.
- Choose Insert > Form Objects > Text Field or click the Text Field button in the Insert bar to insert a text field.
Repeat this step to insert additional text fields. - 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.
- Choose Validate Form from the Actions pop-up menu.
- 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.
- Select the Required option if the field must contain some data.
- Choose from one of the following Accept options:
- Use Anything if the field is required but need not contain any 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.
- If you are validating multiple fields, repeat steps 6 and 7 for any additional fields that you want to validate.
- 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.
- If you are validating individual fields, check that the default event is onBlur or onChange.
About the Layers panel
The Layers panel is a way to manage the layers in your document. To open the Layers panel, choose Window > Others > Layers. Layers are displayed as a list of names, in order of z-index; the first created layer appears at the bottom of the list, and the most recently created layer at the top of the list. Nested layers are displayed as names connected to parent layers. Click the plus (+) or minus (–) icons (Windows) or the expander arrow (Macintosh) to show or hide nested layers.
Use the Layers panel to prevent overlaps, to change the visibility of layers, to nest or stack layers, and to select one or more layers.
Nesting layers
A nested layer is a layer whose code is contained in another layer. Nesting is often used to group layers together. A nested layer moves with its parent layer and can be set to inherit visibility from its parent.
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 draw a nested layer, click the Draw Layer button in the Insert bar, then drag to draw a layer inside an existing layer. If Nesting is turned off in Layers preferences, Alt-drag (Windows) or Option-drag (Macintosh) to draw a layer inside an existing layer.
Tip: Nested layers may appear differently in different browsers. When you create nested layers, check their appearance in various browsers frequently during the design process.
- Choose Window > Others > Layers to open the Layers panel.
- Select a layer in the Layers panel, then Control-drag the layer to the target layer in the Layers panel. Release the mouse button when the name of the target layer is highlighted.
Select one or more layers to manipulate them or change their properties.
To select a layer, do one of the following:
- Click the name of the layer in the Layers panel.
- Click a layer’s selection handle. If the selection handle isn’t visible, click anywhere inside the layer to make the handle visible.
- Click a layer’s border.
- Control-Shift-click (Windows) or Command-Shift-click (Macintosh) inside a layer. If multiple layers are selected, this deselects all other layers and selects only the one that you clicked.
- Click the layer-code marker (in the Design view) that represents the layer’s location in the HTML code. If the layer-code marker isn’t visible, choose View > Visual Aids > Invisible Elements.
- Shift-click two or more layer names in the Layers panel.
- Shift-click inside or on the border of two or more layers.
To resize the selected layer, do one of the following:
- To resize by dragging, drag any of the layer’s resize handles.
- To resize one pixel at a time, hold down Control (Windows) or Option (Macintosh) while pressing an arrow key.
Note: The arrow keys move the right and bottom borders of the layer; you can’t resize using the top and left borders with this technique. - To resize by the grid snapping increment, hold down Shift-Control (Windows) or Shift-Option (Macintosh) while pressing an arrow key. For information about setting the grid snapping increment
- In the Property inspector, type values for width (W) and height (H).
- In the Design view, select two or more layers.
- Do one of the following:
- Choose Modify > Align > Make Same Width or Modify > Align > Make Same Height.
The first selected layers 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.
- Choose Modify > Align > Make Same Width or Modify > Align > Make Same Height.
Use the grid as a visual guide for drawing, positioning, or resizing layers in the Document window’s Design view. You can make page elements automatically snap to the grid as you move them, and change the grid or control the snapping behavior by specifying grid settings. Snapping works whether or not the grid is visible.
To show or hide the grid:
Choose View > Grid > Show Grid.
To enable or disable snapping:
Choose View > Grid > Snap to Grid.
To change grid settings:
- Choose View > Grid > Grid Settings.
The Grid Settings dialog box appears. - Set options as desired.
You can view and set various attributes of a layer in the Property inspector.
To view all layer properties:
- Select a layer.
- Open the Property inspector by choosing Window > Properties.
- If the Property inspector isn’t expanded, click the expander arrow in the lower right corner to see all properties.
- Select a layer.
- Open the Property inspector by choosing Window > Properties.
- Change the layer’s attributes by setting properties.
While working on your document, you can show and hide layers manually, using the Layers panel, to see how the page will appear under different conditions.
Note: The currently selected layer always becomes visible and appears in front of other layers while it’s selected.
To change layer visibility:
- Choose Window > Others > Layers to open the Layers panel.
- Click in the eye-icon column for a layer to change its visibility.
- An open eye means the layer is visible.
- A closed eye means the layer is invisible.
- If there is no eye icon, usually the layer inherits visibility from its parent. (When layers are not nested, the parent is the document body, which is always visible.) Also, no eye icon appears when no visibility is specified (which appears in the Property inspector as Default visibility).
- Choose Window > Others > Layers to open the Layers panel.
- Click the header eye icon at the top of the column.
Note: This procedure can set all layers to visible or hidden, but not to inherit.
You can create your layout using layers, then convert the layers to tables so that your layout can be viewed in older browsers.
To convert layers to a table:
- Choose Modify > Convert > Layers to Table.
- In the dialog box that appears, select the desired options.
- Click OK.
The layers are converted to a table.
- Choose Modify > Convert > Tables to Layers.
- In the dialog box that appears, select the desired options.
- Click OK.
The tables are converted to layers. Empty cells are not converted to layers unless they have background colors.
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, do one of the following:
- Select the Prevent Overlaps option in the Layers panel.
- Choose Modify > Arrange > Prevent Layer Overlaps.
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 allow you to overlap layers even when the Prevent Overlaps option is enabled. If you insert a layer using the Insert menu, enter numbers in the Property inspector, or reposition layers by editing the HTML source code, you can cause layers to overlap or nest while this option is enabled. If overlaps happen, drag overlapping layers in the Design view to separate them.
Using the Timelines panel
The Timelines panel shows how the properties of layers and images change over time. Choose Window > Others > Timelines to open the Timelines panel.
Timeline pop-up menu specifies which of the document’s timelines is currently displayed in the Timelines panel.
Playback head shows which frame of the timeline is currently displayed in the Document window.
Frame numbers indicate the sequential numbering of frames. The number between the Back and Play buttons is the current frame number. 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.
Note: Faster rates may not improve performance. Browsers always play every frame of the animation, even if they cannot attain the specified frame rate. The frame rate is ignored if it is higher than the browser can manage.
Context menu contains various timeline-related commands.
Behaviors channel is the channel for behaviors that should be executed at a particular frame in the timeline.
Animation bars show the duration of each object’s animation. 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.
Playback options
The following 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 forward.
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 Behaviors channel after the last frame of the animation. Double-click the behavior’s marker in the Behaviors channel to edit the parameters for this behavior and change the number of loops.
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:
- Select a layer.
- Move the layer to where it should be when animation begins.
- Choose Modify > Timeline > Record Path of Layer.
- Drag the layer around the page to create a path.
- Release the layer at the point where the animation should stop.
Dreamweaver adds an animation bar to the timeline, containing the appropriate number of keyframes. - In the Timelines panel, click the Rewind button; then hold down the Play button to preview your animation.
After defining a timeline’s basic components, you can make changes such as adding and removing frames, changing the start time of the animation, and so on.
To modify a timeline, do any of the following:
To make the animation play longer, drag the end frame marker to the right. All the keyframes in the animation shift so that their relative positions remain constant. To prevent the other keyframes from moving, Alt-drag (Windows) or Option-drag (Macintosh) the end frame marker.
- To make the layer reach a keyframe position earlier or later, move the keyframe marker left or right in the bar.
- To change the start time of an animation, select one or more 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 Behaviors channel after the last frame of the animation. You can edit the parameters for this behavior to define the number of loops.
In addition to moving layers with timelines, you can change the visibility, size, and stacking order of a layer; you can also change the source file of an image.
To change image and layer properties with a timeline:
- In the Timelines panel, 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 always keyframes.)
- Create a new keyframe by clicking a frame in the middle of the animation bar and choosing Modify > Timeline > Add Keyframe. You can instead create a new keyframe by Control-clicking (Windows) or Command-clicking (Macintosh) a frame in the animation bar.
- Define new properties for the object by doing one of the following:
- To change the source file of an image, click the folder icon next to the Src text box in the Property inspector, then 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 text box of the Property inspector.
- To change the size of a layer, drag the layer’s resize handles or enter new values in the Width and Height text boxes in the Property inspector. Not all browsers can dynamically change the size of a layer.
- To change the stacking order of a layer, enter a new value in the Z-Index text box or use the Layers panel to change the stacking order of the current layer
- Hold down the Play button to see the animation.
Instead of trying to control all the action on a page with one timeline, it’s easier to work with separate timelines that control discrete parts of the page. For example, a page might include interactive elements that each trigger a different timeline.
To manage multiple timelines, do any of the following:
- To create a new timeline, choose Modify > Timeline > Add Timeline.
- To remove the selected timeline, choose Modify > Timeline > Remove Timeline. This permanently removes all animations from the selected timeline.
- To rename the selected timeline, choose Modify > Timeline > Rename Timeline or enter a new name in the Timeline pop-up menu in the Timelines panel.
- To view a different timeline in the Timelines panel, choose a new timeline from the Timeline pop-up menu in the Timelines panel.
Once you have an animation sequence that you like, you can copy it and paste it into another area of the current timeline, into another timeline in the same document, or into a timeline in another document. You can also copy and paste multiple sequences at once.
To cut or copy and paste animation sequences:
- Click an animation bar to select a sequence. To select multiple sequences, Shift-click multiple animation bars; to select all sequences, press Control+A
- Copy or cut the selection.
- 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 Timelines panel.
- Paste the selection into the timeline.
Linking files and documents
You can use the Property inspector and the Point-to-File icon to create links from an image, an object, or text to another document or file. For information about using the site map to create links.
To link documents using the Property inspector’s folder icon or link text box:
- Select text or an image in the Document window’s Design view.
- Open the Property inspector (Window > Properties), and then do one of the following:
- Click the folder icon to the right of the Link text box to browse to and select a file.
The path to the linked document appears in the URL field. Use the Relative To pop-up menu in the Select HTML File dialog box to indicate whether to make the path document-relative or root-relative, then click Select. - Type the path and filename of the document in the Link text box.
To link to a document in your site, enter a document-relative or site root-relative path. To link to a document outside your site, enter an absolute path including the protocol (such as http://). You can use this approach to enter a link for a file that hasn’t been created yet.
- Click the folder icon to the right of the Link text box to browse to and select a file.
- From the Target pop-up menu, select a location in which to open the document.
To make the linked document appear somewhere other than in the current window or frame, select an option from the Target pop-up menu on the Property inspector:- _blank loads the linked document in a new, unnamed browser window.
- _parent loads the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window.
- _self loads the linked document in the same frame or window as the link. This target is the default, so you usually don’t have to specify it.
- _top loads the linked document in the full browser window, thereby removing all frames.
- Select text or an image in the Document window’s Design view.
- Drag the Point-to-File icon at the right of the Link text box in the Property inspector and point to another open document, a visible anchor in an open document, or a document in the Site panel.
The Link text box updates to show the link.
Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection. - Release the mouse button.
- Select text in the Document window.
- Shift-drag from the selection.
The Point-to-File icon appears as you drag. - Point to another open document, a visible anchor in an open document, or a document in the Site panel.
Note: You can link to an open document only if your documents are not maximized in the Document window. When you point to an open document, that document moves to the foreground of your screen while you are making your selection. - Release the mouse button.
- Expand the Site panel, and then display both the Site Files and the Site Map views by holding down the Site Map icon and choosing Map and Files.
- Select an HTML file in the site map.
The Point-to-File icon appears next to the file. - Drag the Point-to-File icon and point to another file in the site map or to a local file in the Site Files view.
- Release the mouse button.
Linking to a specific place in a document
You can use the Property inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position.
Creating a link to a named anchor is a two-step process. First, create a named anchor; then create a link to the named anchor.
To create a named anchor:
- In the Document window’s Design view, place the insertion point where you want the named anchor.
- Do one of the following:
- Choose Insert > Named Anchor.
- Press Control+Alt+A
- Select the Common tab in the Insert bar and click the Named Anchor button.
The Named Anchor dialog box appears.
- In the Anchor Name field, type a name for the anchor.
To link to a named anchor:
- In the Document window’s Design view, select text or an image to create a link from.
- In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor. For example:
- To link to an anchor named “top” in the current document, type #top.
- To link to an anchor named “top” in a different document in the same folder, type filename.html#top.
Note: Anchor names are case sensitive.
- Open the document containing the named anchor you want.
Note: Choose View > Visual Aids > Invisible Elements to make the anchor visible if you don’t see it. - In the Document window’s Design view, select text or an image you want to link from. (If this is another open document, you must switch to it.)
- Do one of the following:
- Click the Point-to-File icon to the right of the Link text box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
- Shift-drag in the Document window from the selected text or image to the anchor you want to link to: either an anchor within the same document or an anchor in another open document.
You can add hyperlink text to link to another file.
To add a hyperlink using the Hyperlink command:
- Place the insertion point in the document where you want the hyperlink to appear.
- Do one of the following to display the Insert Hyperlink dialog box:
- Choose Insert > Hyperlink.
- Select the Common tab in the Insert bar, and then click the Hyperlink button.
The Hyperlink dialog box appears.
- Complete the dialog box.
- Click OK.
An e-mail link opens a new blank message window (using the mail program associated with the user’s browser) when clicked. In the e-mail message window, the To field is automatically updated with the address specified in the e-mail link.
To create an e-mail link using the Insert E-Mail Link command:
- In the Document window’s Design view, position the insertion point where you want the e-mail link to appear, or select the text or image you want to appear as the e-mail link.
- Do one of the following to insert the link:
- Choose Insert > E-Mail Link.
- Select the Common tab in the Insert bar, and then click the Insert E-Mail Link button.
The E-Mail Link dialog box appears.
- Complete the dialog box.
- Click on Ok
- Select text or an image in the Document window’s Design view.
- In the Link text box of the Property inspector, type mailto: followed by an e-mail address.
Do not type any spaces between the colon and the e-mail address. For example, type mailto:[email protected]
A null link is an undesignated link. Use null links to attach behaviors to objects or text on a page. Once you have created a null link, you can attach a behavior to it to swap an image or to display a layer when the pointer is moved over the link. For information about attaching behaviors to objects.
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:
- Select text, an image, or an object in the Document window’s Design view.
- In the Property inspector, type javascript:; (the word javascript, followed by a colon, followed by a semicolon) in the Link text box.
- Select text, an image, or an object in the Document window’s Design view.
- In the Link text box of the Property inspector, type javascript: followed by some JavaScript code or a function call.
For example, typing javascript:alert('This link leads to the index') in the Link text box produces a link that, when clicked, displays a JavaScript alert box with the message This link leads to the index.
Note: Because the JavaScript code appears in the HTML between double quotation marks (as the value of the href attribute), you must use single quotation marks in the script code or “escape” any double quotation marks by preceding them with a backslash (for example, \"This link leads to the index\").
Dreamweaver can update links to and from a document whenever you move or rename the document within a local site. This feature works best when you store your entire site (or an entire self-contained section of it) on your local disk. Dreamweaver does not change files in the remote folder until you put the local files on or check them in to the remote server.
To turn on link management in Dreamweaver:
- Choose Edit > Preferences
The Preferences dialog box appears. - Select General from the category list on the left.
The General preferences options appear.
- In the Document Options section, select Always or Prompt from the Update Links when Moving Files pop-up menu.
- Click OK.
To make the updating process faster, Dreamweaver can create a cache file in which to store information about all the links in your local folder. This cache file is created when you select the Cache option in the Site Definition dialog box, and the cache file updates invisibly as you use Dreamweaver to add, change, or delete links to files on your local site.
- Choose Site > Edit Sites.
The Edit Sites dialog box appears. - Select a site, and then click Edit.
- Select Local Info from the category list on the left.
The Site Definition dialog box displays the Local Info options. - In the Local Info category, select the Enable Cache checkbox.
The first time you change or delete links to files in your local folder after launching Dreamweaver, Dreamweaver prompts you to load the cache. If you click Yes, the cache loads and Dreamweaver updates all the links to the file you just changed. If you click No, the change is noted in the cache, but the cache does not load, and Dreamweaver does not update links.
- It may take a few minutes for the cache to load on larger sites; most of this time is spent comparing the time stamps of the files on the local site with the time stamps recorded in the cache to see if the cache is out of date. If you have not changed any files outside Dreamweaver, you can safely click the Stop button when it appears.
In the Site panel, choose Site > Recreate Site Cache.
Inserting a jump menu
To insert a jump menu in your document, use the Jump Menu form object.
To create a jump menu:
- Open a document, and then place the insertion point in the Document window.
- Choose Insert > Form Object > Jump Menu.
Select the Form tab in the Insert bar, and then click the Jump Menu button.
The Insert Jump Menu dialog box appears.
- Complete the dialog box.
- Click OK.
- Choose Window > Properties to open the Property inspector, if it isn’t open.
- In the Document window’s Design view, click the jump menu object to select it.
The List/Menu icon appears in the Property inspector. - In the Property inspector, click the List Values button.
The List Values dialog box appears.
-
- Make changes to the menu items as necessary, and then click OK.
A navigation bar consists of an image (or set of images) whose display changes based on the actions of a user. Navigation bars often provide an easy way to move between pages and files on a site.
Before using the Insert Navigation Bar command, create a set of images for the display states of each navigation element. (It can be helpful to think of a navigation bar element as a button, because when clicked, it takes the user to another page.)
A navigation bar element can have four states:
- Up: the image that appears when the user hasn’t yet clicked or interacted with the element.
- Over: the image that appears when the pointer is moved over the Up image. The element’s appearance changes (for example, it may get lighter) to let users know they can interact with it.
- Down: the image that appears after the element has been clicked.
For example, when a user clicks an element, a new page loads and the navigation bar is still displayed, but the clicked element is darkened to show that it’s been selected. - Over While Down: the image that appears when the pointer is rolled over the Down image after the element has been clicked.
You can create a navigation bar, copy it to other pages in your site, use it with frames, and edit the page behaviors to show different states as pages are accessed.
To create a navigation bar:
- Do one of the following:
- Choose Insert > Interactive Images > Navigation Bar.
- Select the Common tab of the Insert bar, and then click the Insert Navigation Bar button.
The Insert Navigation Bar dialog box appears.
- Complete the dialog box.
- Click OK.
- Choose Modify > Navigation Bar.
The Modify Navigation Bar dialog box appears.
- In the Nav Bar Elements list, select the element you want to edit.
- Make changes as necessary.
- Click OK.