macromedia

macromedia ® DREAMWEAVER ® 4 CURRICULUM GUIDE A Hands-on Web Publishing Curriculum from Macromedia

NOTICE OF RIGHTS Copyright © 1998-2001 by Macromedia, Inc. All rights reserved. For educational instruction purposes only, Macromedia grants you the right to make as many copies as you need of all or a portion of the Web Design Basics curriculum, either by photocopy or by printing files from the CD, providing that you always include the page(s) containing copyright information and that you distribute such copies not for profit. These rights to reproduce the curriculum are granted solely to the purchaser of these materials and are not transferable to any other organization. It is the responsibility of your organization to monitor the copying and use of this curriculum and to comply with the terms of this notice. You agree that Macromedia reserves the right to audit your organization’s compliance with these terms, upon reasonable notice. All other copying, reproduction, and transmission is otherwise prohibited. This notice does not cover the use of Macromedia software. You must comply with the terms of the End-User License Agreement supplied with the software. NOTICE OF LIABILITY The information in these training materials is distributed on an "AS IS" basis, without warranty. Although reasonable precaution has been taken in the preparation of these materials, neither Macromedia, Inc., nor its licensors shall have any liability to any person or entity with respect to liability, loss, or damage alleged to be caused directly or indirectly by the instructions contained in these materials or by the computer software and hardware products described herein. These materials contain links to third-party Web sites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party Web site mentioned in these materials, you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites. TRADEMARKS Products, services, company names, logos, design, titles, words, or phrases may be protected under law as the trademarks, service marks, or trade names of Macromedia, Inc., or other entities. Such trademarks, service marks and trade names may be registered in the United States and internationally. The following is a list of trademarks and service marks of Macromedia, Inc., that may also be registered in the United States and/or internationally: Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, ARIA, Authorware, Director, Dreamweaver, UltraDev, Fireworks, Flash, Fontographer, FreeHand, Generator, LikeMinds, Shockwave, Sound Edit, and Xtra are trademarks or registered trademarks of Macromedia, Inc. Other products, services, company names, logos, design, titles, words, or phrases within these materials may be trademarks of their respective owners. ACKNOWLEDGMENTS Authors Patti Schulze and Joan Hilbert Copyeditors Malinda McCain and Judy Ziajka Designer Patti Schulze Macromedia Tech Reader Francois Richardson QA Joan Hilbert Macromedia Production Team Alisse Berger and Tiffany Beltis Special Thanks to Kirsti Aho and Gloria Miller Fifth Edition: March 2001 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 ii

TABLE OF CONTENTS Lesson 1: Learning the Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Organizing Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Dreamweaver Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Defining a Local Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Specifying Preview Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Saving Your File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Specifying a Background Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Specifying the Default Font Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Specifying Link Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Placing Text on a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Making Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Character Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Positioning Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Changing Font Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 HTML Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Adding Horizontal Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Adding Special Characters to Your Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Adding E-mail Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Adding a Date Automatically . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Adding Flash Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Lesson 2: Working with Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 Placing Graphics on the Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Adding Images to Asset Favorites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Wrapping Text Around Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Aligning Images and Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Adding Flash Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Adding Flash Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Lesson 3: Creating Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Creating Hypertext Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Targeting a Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Creating Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Linking to Named Anchors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 TABLE OF CONTENTS iii MACROMEDIA DREAMWEAVER 4

Lesson 4: Elements of Page Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Using Tracing Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Using Tables for Page Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Designing in Layout Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Cell Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Creating Tables in Standard View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Importing Data from Spreadsheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Copying and Pasting Table Cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Selecting Table Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Sorting Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Lesson 5: Adding User Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75 Defining a Behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Creating Rollover Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Using Insert Rollover Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Adding Rollovers to Existing Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Understanding Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Adding Several Actions to an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Lesson 6: Managing Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83 Using the Site Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Adding New Files or Folders to a Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Creating a Site Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Modifying Pages from the Site Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Switching Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Connecting to a Remote Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Uploading Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Connecting to a Remote FTP Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 MACROMEDIA DREAMWEAVER 4 iv TABLE OF CONTENTS

INTRODUCTION Macromedia Dreamweaver 4.0 is a full-featured Web-design tool used by beginning and professional Web designers. You can use Dreamweaver to visually design your Web page in the new Layout view, or you can use the robust text-editing features when you want to hand-code your page. Either way, you’ll find creating and managing your site easy with Dreamweaver and the intuitive Macromedia User Interface. COURSE OBJECTIVES In this course you will learn to use the fundamental features of Dreamweaver. The focus of the lessons is to design a Web site for a fictitious company, Compass Adventure Tours. You will learn how to • Add text, graphics, and links • Add Macromedia Flash text and buttons • Create complex tables in the new Layout view • Add enhancements, such as rollover buttons and images • Manage the site MULTIMEDIA ASSETS For each lesson in this course you’ll find sample source files and asset files on the Web Design Basics companion CD. If you choose to use the prepared images and text with the course, you will benefit from copying the folder structure and files from the companion CD into a folder on your computer’s hard drive. After you have copied these files, you are ready to begin. • Lesson assets can found in Dreamweaver 4Examples_Images • Each lesson has its own numbered lesson file folder; for example, Dreamweaver 4Examples_ImagesLesson01_Text • (optional) Copy of the entire course curriculum in PDF format: Dreamweaver 4Curriculum INTRODUCTION v MACROMEDIA DREAMWEAVER 4

INTERACTIVE TRAINING If you would like to familiarize yourself with the product before starting this course, install the Dreamweaver 4 Interactive Training module, which you can find on the companion CD. This module contains easy-to- follow interactive instruction that builds initial skills with FreeHand. Additionally, the module contains a learning assessment, extended lesson plans, and a list of Web-based resources. The module takes 45-60 minutes to complete. TRIAL SOFTWARE You can install the fully functioning 30-day trials of Dreamweaver 4 from the companion CD. The companion CD contains the installation instructions. (Note: You can install the trial software only one time on a computer.) After you have installed and launched a 30-day trial copy, you have 30 calendar days to use the product. INTRODUCTION vi MACROMEDIA DREAMWEAVER 4

SYSTEM REQUIREMENTS You need the following hardware and software to run Macromedia Dreamweaver 4.0: MICROSOFT WINDOWS • Windows 95, 98, 2000, ME, or Windows NT 4.0 (with Service Pack 5) or later • Intel Pentium processor 166 MHz or greater • 32 MB of RAM (64 MB or greater recommended) • 110 MB of available disk space • Color monitor with 800 x 600 resolution, 256 colors • CD-ROM drive MACINTOSH: • Power Macintosh running System 8.6 or 9.x • 32 MB of RAM (64 MB or greater recommended) • 135 MB of available disk space • Color monitor with 800 x 600 resolution, 256 colors • CD-ROM drive SYSTEM REQUIREMENTS vii MACROMEDIA DREAMWEAVER 4

MACROMEDIA DREAMWEAVER 4 viii SYSTEM REQUIREMENTS

LESSON 1: LEARNING THE BASICS OBJECTIVES When you finish this lesson, you will understand • The Macromedia Dreamweaver graphical user interface • The purpose of the Assets panel • How Flash text differs from regular text and you will have learned • How to define a new site • How to name, title, and save your documents • How to specify preview browsers • How to specify background, text, and link colors • How to put text on a page • How to format text • How to use the Assets panel to select and apply color to text ORGANIZING YOUR SITE Before you begin creating your Web pages, you should have some idea what the pages are to contain. Developing Web pages is similar to designing print material: you develop the concept first. You need to ask yourself—or your client—some basic questions. Why is the Web site needed? What are you trying to communicate? Who are the potential viewers of the pages? What do you want your visitors to take away with them? Consider also what browsers your users might have. Are they likely to have the most up-to-date version with all the latest plug-ins? Are they more likely to have older computers and older browsers? The answer to the browser question determines whether you can use Cascading Style Sheets or layers on your pages. You also need to develop an outline of the site. The outline is similar to a storyboard for a multimedia project or a movie, giving you an idea of the scope of the project and a starting point for setting up the file structure you need. Gather the text and graphics for the Web pages, and then you are ready to start using Dreamweaver to put those ideas together. LESSON 1 1 MACROMEDIA DREAMWEAVER 4

DREAMWEAVER BASICS When you open Dreamweaver, you’ll notice the Document window, where you design your page, and several panels for adding or changing text and objects on the page. The Objects panel is used for adding objects such as images, tables, layers, or Flash animations to the page. The Property inspector lets you change the attributes of selected text or of an object on the page. All of the panels and the Property inspector can be accessed from the Window menu. A check mark next to an item in the Window menu indicates that the panel is open, but it could be hidden beneath another panel or the Document window. To display a hidden panel, select it again from the Window menu. If a panel is selected but still doesn’t appear, choose Window > Arrange Panels to reset all open panels to their default positions. The Objects panel moves to the upper left of the screen, the Property inspector moves to the bottom of the screen, and all other open panels move to the right of the screen, with no overlap. THE DOCUMENT WINDOW The Document window is where you will do most of your work (see Figure 1-1). It gives you an approximate representation of your page as you add and delete elements. The title bar shows the document’s title and file name. The toolbar lets you select the document view and enter the document title. Document title bar Toolbar Figure 1-1 The Document window. MACROMEDIA DREAMWEAVER 4 2 LESSON 1

THE OBJECTS PANEL The Objects panel contains the objects or elements you want to add to your page (see Figure 1-2). Among them are images, tables, special characters, forms, and frames. To insert an object, drag the object’s icon from the Objects panel to its place in the Document window. Another method is to place the insertion point in your document where the object should appear and then click the object’s icon on the panel. The object is inserted into the document at the insertion point. You can select from several panels within the Objects panel. They can be accessed from the Options pop-up menu at the top of the Objects panel. For example, the objects you need to create a form are on the Form Objects panel. Insert Image Insert Rollover Image Insert Table Insert Tabular Data Draw Layer Insert Navigation Bar Insert Horizontal Rule Insert E-mail Link Insert Date Insert Server-Side Include Insert Fireworks HTML Insert Flash Insert Flash Button Insert Flash Text Insert Shockwave Insert Generator Draw Layout Cell Draw Layout Table Standard View Layout View Figure 1-2 The Objects panel. LESSON 1 3 MACROMEDIA DREAMWEAVER 4

THE PROPERTY INSPECTOR On the Property inspector, you can view and change the attributes of an object (see Figure 1-3). The inspector is context sensitive—it changes based on what you have selected in the Document window. Depending on the selected object, there might be additional properties that are not visible. To see all the properties, click the expander arrow located in the lower-right corner of the inspector. Figure 1-3 The Property inspector. DOCKABLE PANELS Many of the panels can be docked together; that is, you can combine them into tabbed windows. This maximizes your screen area while giving you quick access to the panels you need. To dock a panel, click its tab and then drag it over another panel or set of docked panels. When the border of the second panel highlights, drop the panel. To select a panel from a set of docked panels, click its tab. To undock panels, drag the tab out of the window. You’ll also notice that the Document window and the panels snap to each other or to the sides of your screen. This helps you better manage your workspace. For Windows users only, you can minimize all your open documents and panels by choosing Window > Minimize All. If you have at least one open window, you can restore all the minimized windows by choosing Window > Restore All. MACROMEDIA DREAMWEAVER 4 4 LESSON 1

DEFINING A LOCAL SITE Before you begin to create individual Web pages, you need to create the site that contains those pages. This local site on your hard drive will mirror the actual pages on the Web server. The local site is where you do all your initial development and testing. To set up a local site, create a folder on your hard drive. The name of the folder can be the name of the site or any name you choose. For example, in class you have a folder called DW4_WebDesign that contains all the files and folders you are using in class. Note: Your local folder should not be saved within the Dreamweaver application folder. If you ever need to reinstall Dreamweaver, your work would be lost. After you define the main folder, it becomes the root folder for your site. All your files and subfolders are contained within that root folder. Dreamweaver needs a properly defined site with a unique local root folder to maintain and update links between pages. When you upload a site, the relative links that worked within the local root will also work on the server. When you are ready to publish your site, all you have to do is copy that folder and all of its files to the remote server. The images and links should all work (assuming that they work locally). If you connect a local site to a remote site, Dreamweaver maintains identical directory structures to ensure that links and references are not accidentally broken. If directories do not exist in the site where you are transferring files, Dreamweaver automatically creates them. You must first save a document within a local site before site-root-relative or document-relative links will work. In all dialog boxes where you link a file to the current document, you can choose to define the path as site-root- relative, document-relative, or absolute. Site-root-relative paths provide the path from the site’s root folder to a document. You might want to use these types of paths if you are working on a large Web site that uses several servers, or on one server that hosts several different sites. If you move a document or folder out of a local site, site-root-relative links stop working. If you move folders containing linked files to a different defined local site, site-root-relative links continue to work as long as the folder structure branching from the root is the same as the original site’s structure. Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for Web pages). For example, an absolute path would be http://www.macromedia.com/support/ dreamweaver/contents.html. You must use an absolute path to link to a document on another server. You can also use absolute paths for local links (to documents in the same site), but that approach is discouraged; if you move the site to another domain, all your local absolute links will break. Document-relative paths are the best choice to use for local links in most Web sites. Document-relative paths define the path to take to find the linked file, starting from the document. For example, a path to a file in the same folder would be expressed as myfile.htm. To link to a file in a subfolder of the current document, the path would be expressed as content/myfile.htm. To link to a file in the parent folder of the current file, the path would be expressed as ../myfile.htm. LESSON 1 5 MACROMEDIA DREAMWEAVER 4

To create a new local site: 1. Choose Site > Define Sites. The Define Sites dialog box opens, as shown in Figure 1-4. This dialog box lists all the sites you have previously defined and lets you create new ones. Figure 1-4 The Deﬁne Sites dialog box. 2. Click New to create a new site. The Site Definition dialog box opens, as shown in Figure 1-5. Figure 1-5 The Site Deﬁnition dialog box. MACROMEDIA DREAMWEAVER 4 6 LESSON 1

3. The name you assign to the site can be anything that identifies the site—this is for your reference only. For this class, type your name in the Site Name text box. 4. Click the folder icon next to the Local Root Folder text box. The Local Root Folder text box specifies the folder on your hard drive where the files for this site are stored. It is the local equivalent of the site root folder at the remote site. Dreamweaver creates all site- root-relative links relative to the local root folder. 5. Locate the DW4_WebDesign folder on the desktop. • For Windows: Select the DW4_WebDesign folder and click Open . Then click Select to use the DW4_WebDesign folder as your root folder. • For the Macintosh: Select the DW4_WebDesign folder and click Select . 6. In the Site Definition dialog box, select Refresh Local File List Automatically. When this option is selected, Dreamweaver updates the site list whenever you add a new file to the site folder. If you don’t check this option, you’ll need to refresh the local files manually. 7. Select Enable Cache and then click OK . When this option is selected, a local cache is created, improving the speed of linking and site-management tasks. You will usually want to select this option; however, at very large sites, re-creating the cache can slow operations. 8. If “The initial site cache will be created” message box appears, click OK and then click Done . LESSON 1 7 MACROMEDIA DREAMWEAVER 4

SPECIFYING PREVIEW BROWSERS As you develop your Web pages, you will want to view your efforts in a browser—or in fact, in several browsers. In Preferences, you can specify which browsers you would like to use to preview your pages. To simplify the preview process, Dreamweaver has keyboard shortcuts for viewing your pages in two different browsers, called the primary and secondary browsers. To select preview browsers: 1. Do one of the following: • Choose Edit > Preferences and select Preview in Browser from the Category list on the left. • Choose File > Preview in Browser > Edit Browser List. The Preferences dialog box opens, as shown in Figure 1-6. Clicking a browser name in the window on the right shows you whether it’s the primary or secondary browser, or neither. Figure 1-6 The Preferences dialog box for Preview in Browser. 2. Do the following to select the browsers you want to use in previewing your pages: • Click the plus (+) button to add a browser to the list. When the dialog box opens, find the browser application. Select Primary Browser if you want to launch this browser by pressing F12 when previewing your pages. Select Secondary Browser to preview your document by pressing Control+F12. You’ll be using these shortcuts often, so memorize them quickly. • To remove a browser from the list, select the browser name in the list and then click the minus ( – ) button. • To change a browser choice, select the browser name in the list. Then click Edit and locate a different browser. 3. Click OK when you are done adding or changing browsers. MACROMEDIA DREAMWEAVER 4 8 LESSON 1

SAVING YOUR FILE You should save your documents in Dreamweaver as soon as you open a new document. Don’t wait until you have text or graphics on the page. This way, when you do import graphics or other media, all references will be created properly. NAMING AN HTML FILE Naming your files for use on a Web server is a little different from naming your files for your hard drive. First, you need to know what type of machine will be used: Windows NT, UNIX, or Macintosh. The naming structure might be different on each of these machines. UNIX is case sensitive, which means myfile.htm does not equal MYFILE.HTM. Your best bet is to use lowercase names for your files and keep the file names short. That way, your file names work on all servers. Here are some other rules to follow: • Don’t use spaces within your file names. Use the underscore or dash character to simulate a space to separate words. • Use letters and numbers, but no special characters, such as %, *, or /. • Avoid beginning your file names with a number. • Make sure you don’t leave a space at the end of the file name. • The same goes for folder names—don’t use spaces. If you do, you’ll notice that browsers substitute %20 for the spaces. Note: Keep your folder names short. Remember that the folder name becomes part of the URL you type to get to the page. LESSON 1 9 MACROMEDIA DREAMWEAVER 4

LESSON OVERVIEW In this lesson’s class exercise, you will create a simple Web page and learn different ways to format the text. Here is a brief outline of the process for building the Web page, followed by a screenshot of the completed page (see Figure 1-7). Detailed step-by-step instructions begin on the page after the screenshot. To view the completed page, open Lesson_01_Text/Completed/surf_hawaii.htm. 1. Open the surf_hawaii.htm file located in the Lesson_01_Text folder. Title the document Surfer’s Paradise. 2. Change the background of the page to a pale blue color. 3. Type Hawaii - Surfer’s Paradise on the page and tag the text as Heading 3. 4. Indent the first six paragraphs of the text. 5. Select the four lines of text, “Sunset Beach, Oahu,” “Waimea Bay,” “South Shore, Oahu,” and “Pipeline,” and make them an ordered list. Change the list type to Alphabet Small. 6. Select the text starting with “East to southeast winds” and ending with “Water temperature at 76 degrees Fahrenheit” and change the text to an unordered list. 7. Select the text starting with “Crest” and ending with “The time for a wave crest to travel one wave length.” Format this text as a definition list and apply bold to the definition terms (for example, “Crest” in the first paragraph.) 8. Insert a new paragraph before the text “Sign up at” and add a line break after the text. 9. Insert line breaks after each line in the address for the surf shop. 10. Center the heading at the top of the page and change its font and color, choosing turquoise from Color Favorites on the Assets panel. MACROMEDIA DREAMWEAVER 4 10 LESSON 1

Figure 1-7 The completed surf_hawaii.htm ﬁle. LESSON 1 11 MACROMEDIA DREAMWEAVER 4

GIVING YOUR PAGE A TITLE Every HTML document should have a title. The title, used primarily for document identification, is displayed in a browser’s title bar and as the bookmark name. Choose a short phrase that describes the document’s purpose. The title can be of any length: you can crop it if it’s too long to fit in the browser’s title bar. Get in the habit of adding the title to each page you create before you add text or graphics to the page. If you forget, Dreamweaver defaults to “Untitled Document”—you don’t want to keep that for the page name. To add the page title: 1. Open the surf_hawaii.htm file located in the Lesson_01_Text folder. 2. If you don’t see the Title text box at the top of the Document window (below the menu bar), choose View > Toolbar. 3. Type Surfer’s Paradise in the Title text box and then press Enter (Windows) or Return (Macintosh) or click in the document. Note: Dreamweaver gives you several reminders if you haven’t titled your page. Look at the document title bar. It contains the title and the file name. If you see “Untitled Document (filename.htm),” you haven’t titled your document. You’ll also see “Untitled Document” in the title area of the Document window. MACROMEDIA DREAMWEAVER 4 12 LESSON 1

SPECIFYING A BACKGROUND COLOR In Dreamweaver you can easily change the background color of a page by using a preset palette of colors known as the Web-safe color palette. You access that palette in the Page Properties dialog box. For more colors, click the arrow located in the upper-right corner of the color pop-up window and select a color palette from the pop-up menu. To select a background color: 1. Choose Modify > Page Properties. The Page Properties dialog box opens, as shown in Figure 1-8. Figure 1-8 The Page Properties dialog box. 2. Click the Background color box. A color palette opens. 3. Move the eyedropper over a color swatch. The swatch’s hexadecimal equivalent is shown at the top of the color palette. 4. Click a pale blue color to select it, or type CCFFFF in the Background text box. You do not need to include the number sign (#) before the hexadecimal color code. 5. Click Apply to view the color change to your document. LESSON 1 13 MACROMEDIA DREAMWEAVER 4

SPECIFYING THE DEFAULT FONT COLOR When you change the background color, you may also need to change the color of the text that is displayed. Obviously, black text won’t be visible on a black background. To change the default font color: 1. In the Page Properties dialog box, click the Text color box. A color palette opens. 2. Select a color for your text—dark blue would look good—and click OK to close the Page Properties dialog box and return to your document. SPECIFYING LINK COLORS In addition to changing the default text color, you can change the color of text links on your page. To change link colors: 1. From the Page Properties dialog box, click the color box next to the link type you want to change, as shown in Figure 1-9. The link types are described here. Links: The initial color of a link—the color a user sees before clicking the link. The normal default browser color for a link is blue. Visited Links: The color the link changes to when a user clicks the link. The normal default color for a visited link is purple. Active Links: The color the link turns to when a user holds down the mouse button after clicking the link. The normal default color for an active links is red. Figure 1-9 Page Properties, showing link color selections. 2. Select the colors for your links. 3. Click OK to close the Page Properties dialog box and return to your document. MACROMEDIA DREAMWEAVER 4 14 LESSON 1

PLACING TEXT ON A PAGE You can add text to a page by typing it or by copying and pasting from an existing text document. If the text is from an application that supports drag-and-drop copying (for example, Microsoft Word on the Macintosh), you can open both Dreamweaver and that application and either copy and paste or drag the text into Dreamweaver. This exercise uses the surf_hawaii.htm document you opened earlier. It illustrates ways to put text on a page and format it. To add text to a page: 1. Insert a new line at the top of the page. 2. Type Hawaii - Surfer’s Paradise in that new line. 3. From the Property inspector’s Format pop-up menu, select Heading 3 (see Figure 1-10). You have now tagged the text as a level 3 heading. Figure 1-10 The Property inspector’s Format menu. HTML has six levels of headings—numbered 1 through 6—with heading 1 having the largest font size. Headings are displayed in larger or bolder fonts than the normal body text. Tagging a paragraph as a heading automatically generates a space below the heading. You cannot control this spacing. Note: In many documents, the first heading is identical to the title. For multipart documents, the text of the first heading should be related information (such as a chapter title), and the title tag should identify the document in a wider context (it could include both the book title and the chapter title). LESSON 1 15 MACROMEDIA DREAMWEAVER 4

INDENTING TEXT Often you’ll want to indent the text on the page. You can use the Text Indent and Text Outdent icons in the Property inspector to do this, as shown in Figure 1-11. Using Text Indent indents text at the left and right margins of the page. You cannot control the amount of indentation. Figure 1-11 Text Outdent Text Indent The Text Indent and Text Outdent icons. To indent paragraphs: 1. Select the first six body paragraphs of your surf_hawaii.htm document. 2. Click Text Indent in the Property inspector or choose Text > Indent. To remove indentation: 1. Select the first two body paragraphs of the document. 2. Click Text Outdent in the Property inspector or choose Text > Outdent. 3. Save the file and preview it in the browser. MACROMEDIA DREAMWEAVER 4 16 LESSON 1

MAKING LISTS Dreamweaver gives you three kinds of lists: ordered (numbered), unordered (bulleted), and definition lists (a term and its definition). ORDERED LISTS An ordered list consists of list items that are ordered numerically or alphabetically. You have the option of using arabic or roman numerals or using uppercase or lowercase letters. To create an ordered (numbered) list: 1. Select the four lines of text “Sunset Beach, Oahu,” “Waimea Bay,” “South Shore, Oahu,” and “Pipeline.” 2. Click Ordered List in the Property inspector (shown in Figure 1-12) or choose Text > List > Ordered List. The selected text is indented and numbered. Figure 1-12 The Ordered and Unordered List icons. Unordered List Ordered List You can change the numbering scheme of ordered lists by modifying the list’s properties. To change ordered list properties: 1. Click the line with the text “Sunset Beach” or any line in the list. Select only one line from the list. If you select multiple lines, the List Item button is dimmed and not available for you to use. If the List Item button is not visible, click the expander arrow in the lower-right corner of the Property inspector. 2. Click List Item in the Property inspector or choose Text > List > Properties . The List Properties dialog box opens (see Figure 1-13). Figure 1-13 The List Properties dialog box. LESSON 1 17 MACROMEDIA DREAMWEAVER 4

3. From the Style pop-up menu, select Alphabet Small (a, b, c) and then click OK . All items in the list are alphabetized. 4. Save the file and preview it in the browser. UNORDERED LISTS Unordered lists are often called bulleted lists because each list item has a bullet in front of it. The bullet symbol Dreamweaver displays by default can be changed to a disc, a circle, or a square. To create an unordered (bulleted) list: 1. Select the text starting with “East to southeast winds” and ending with “Water temperature at 76 degrees Fahrenheit.” 2. Click Unordered List in the Property inspector (shown in Figure 1-14) or choose Text > List > Unordered List. The selected text is indented and bulleted. Figure 1-14 Unordered List Ordered List The Unordered List icon. MACROMEDIA DREAMWEAVER 4 18 LESSON 1

You can change the default bullet symbol of unordered lists by modifying the list’s properties. To change unordered list properties: 1. Click any line in the list. 2. Click List Item in the Property inspector or choose Text > List > Properties. The List Properties dialog box opens (see Figure 1-15). If the List Item button is dimmed, you have more than one item selected. If the List Item button is not visible, click the expander arrow in the lower-right corner of the Property inspector. Figure 1-15 The List Properties dialog box. 3. From the Style pop-up menu, select Square and click OK . All items in the list now use the square bullet symbol. DEFINITION LISTS A definition list consists of a series of terms and their definitions. The word or term to be defined is left-justified; the definition is indented and placed on the next line. For this formatting to work, a term and its definition must each be a separate paragraph. To create a definition list: 1. Select the text starting with “Crest” and ending with “The time for a wave crest to travel one wave length.” 2. Choose Text > List > Definition List. The terms are now at the left margin, and their indented definitions are on succeeding lines. 3. Save the file and preview it in the browser. LESSON 1 19 MACROMEDIA DREAMWEAVER 4

LIST TIPS When you’re creating lists, keep these tips in mind: • To change a bulleted list to a numbered list or a numbered list to a bulleted list, select the entire list and then apply the other list format. • To convert a list to plain text, select the list and apply the list type again. This procedure works like a toggle to turn off the list formatting. • If you had extra text selected when you applied the formatting for the list, select the extra text and apply the formatting again to remove the list formatting. • If you are typing within an already formatted list and you want to end the list, press Enter (Windows) or Return (Macintosh) twice. • List items are single-spaced by default. If you want extra spacing between the lines, select all the items in the list and then choose Paragraph from the Format pop-up list of the Property inspector. CHARACTER FORMATTING Occasionally you will need a word or phrase to look different from the surrounding text. For example, you might want a word to be bold or italicized to visually set it apart from other text. To make text bold: 1. Select the word “Crest” in the definition list you just created. 2. Click Bold (the dark capital “B”) in the Property inspector or choose Text > Style > Bold. The selected text now has bold formatting applied to it. Many times you will find yourself repeating the most recent formatting you applied on another paragraph or other selected text. The Repeat command makes that task easier, with a simple keystroke. The first two items listed on the Edit menu are the Undo and Repeat commands. You’ll want to remember their keyboard shortcuts: • Undo: Control+Z (Windows) and Command+Z (Macintosh) • Repeat: Control+Y (Windows) and Command+Y (Macintosh) To repeat a command: 1. Select the word “Trough” in the definition list. 2. Press Control+Y (Windows) or Command+Y (Macintosh). Because you used the Bold command most recently, it is applied to the selected text. 3. Repeat the bold formatting on the other terms in the definition list. MACROMEDIA DREAMWEAVER 4 20 LESSON 1

POSITIONING TEXT If you want to force a line break in the text, you need to insert a line break character. This would be useful for an address line, for example, where you want a new line for each line in the address without the extra spacing of a paragraph. You also may want to center some text, such as a heading, to make it more prominent. To create a line break: 1. In the paragraph that begins with “Besides helping you find”, position the insertion point before the text “Big Kahuna Surf and Swim Shop.” 2. Press Shift+Enter (Windows) or Shift+Return (Macintosh). The text after the insertion point moves to the next line. A new paragraph has not been created, so there is no additional spacing between the two lines. 3. Repeat steps 1 and 2 to move the text “1134 Paradise Lane” to the next line and “Hawaii, USA” to a new line. 4. Position the insertion point before the text “Sign up at” and then press Enter (Windows) or Return (Macintosh) to insert a new paragraph. 5. Save the file and preview it in the browser. To center text on a page: 1. Position the insertion point in the heading “Hawaii - Surfer's Paradise.” 2. Click Align Center in the Property inspector (see Figure 1-16). The heading is now centered. Align Center Figure 1-16 The Align Center icon. LESSON 1 21 MACROMEDIA DREAMWEAVER 4

CHANGING FONT PROPERTIES To make your page more interesting and easier to read, you may want to change the typeface used to display the text. Although a great deal of information is available concerning how type is used for print, not all of that knowledge translates to the Web. You have to consider the fact that users are free to change the screen size or to change the font size and color of the text. The way type flows on a page can easily change from user to user. There is also a dramatic difference between font sizes in Windows and on a Macintosh. Macintosh computers display text approximately 75 percent smaller than the size of the same text in Windows. If you are accustomed to print work, you may be frustrated by the lack of typographic control, such as line and letter spacing, in HTML. You also can’t control widows (a single word on a line) in Web text, and you can’t control line breaks in paragraphs. You should remember that text support on the Web is still very primitive. You need to work within the constraints of the medium. CHANGING THE FONT FACE You can change the font for the entire page or for selected text on the page. However, for users to see your page as you designed it, the font you choose must be installed on the user’s computer. Do not make the assumption that all fonts are loaded on everyone’s computer. If your first choice is not available, the browser will attempt to use the second choice and then the third. If none of the fonts are available on the user’s computer, the text will be displayed in the browser’s default font. In the following exercises, you will make some simple font changes to the text on the page. To change the font face of a single paragraph: 1. Select the text “Hawaii - Surfer’s Paradise.” 2. From the Property inspector’s Font pop-up menu, choose Arial, Helvetica, Sans-serif (see Figure 1-17). The selected text changes to another font, depending on the fonts installed on your computer. Figure 1-17 The Property inspector’s Font menu. MACROMEDIA DREAMWEAVER 4 22 LESSON 1

To change the font face of multiple paragraphs: 1. Select the remainder of the text on the page. 2. From the Property inspector’s Font pop-up menu, choose Arial, Helvetica, Sans-serif . All the text now has the same font face. 3. Save the file and preview it in the browser. To remove font face settings: 1. Select the text whose font you want to remove. 2. Choose Default Font from the Font pop-up menu in the Property inspector (see Figure 1-18) or choose Text > Font > Default Font. Figure 1-18 The Property inspector, with Default Font selected. To modify font combinations: 1. Choose Edit Font List from the Property inspector’s Font pop-up menu or choose Text > Font > Edit Font List. The Edit Font List dialog box opens. 2. Select the font combination Arial, Helvetica, Sans-serif from the Font list at the top of the dialog box. The fonts in the selected combination appear in the Chosen Fonts list in the lower left of the dialog box. To its right is a list of all fonts installed on your system. 3. Choose from the following options: • To add or remove fonts, select the font and then click the directional buttons between the Chosen Fonts list and the Available Fonts list. • To add or remove a font combination, click the plus (+) or minus (– ) button at the top left of the dialog box. • To add a font not installed on your system, type the font name in the text box below the Available Fonts list and click the directional arrow to add it to the combination. Adding a font not installed on your system is useful, for example, for specifying a Windows-only font when you are authoring on a Macintosh. • To move a font combination up or down in the list, click the directional arrow buttons at the top right of the dialog box. LESSON 1 23 MACROMEDIA DREAMWEAVER 4

CHANGING THE FONT SIZE In HTML, the options for changing the font size on the page are limited. To change the font size: 1. Select the text whose font size is to be changed. 2. Select the size from the Property inspector’s Size pop-up menu (see Figure 1-19). You can also choose Text > Size or Text > Size Change to pick the size from the pop-up submenus. Note that the sizes are listed as 1 through 7, +1 through +7, and –1 through –7. Selecting just the number (1 is smallest, 7 is largest) sets the absolute size. Picking a plus or minus number chooses the font size relative to the base size of the font. For example, +1 makes the font size one size larger than the base size. Figure 1-19 The Property inspector’s Size menu. Note: The default base size for text in your browser is set to 3. If you choose +3 for the font size, you are effectively changing the size to 6 (3 + 3). The largest size for a font is 7 and the smallest is 1. Any font size larger than 7 will be displayed as 7. For example, if you set the font size to +6, 3 + 6 is larger than 7, so the font and will be displayed as 7. MACROMEDIA DREAMWEAVER 4 24 LESSON 1

CHANGING THE FONT COLOR You can easily change the color of your text in Dreamweaver. All colors used at your site are located on the Assets panel. To ensure that the colors you use are consistent across your site, you can save commonly used colors on the Assets panel as Favorites. To change the font color: 1. Select the text “Hawaii - Surfer’s Paradise.” 2. Choose Window > Assets to display the Assets panel. 3. Click Colors to see the asset colors, as shown in Figure 1-20. Favorites Colors Figure 1-20 The Colors icon on the Assets panel. 4. Choose Favorites at the top of the Assets panel. 5. Select a color. For this exercise, select turquoise (#006699). Then click Apply. 6. Save the file and preview it in the browser. LESSON 1 25 MACROMEDIA DREAMWEAVER 4

To add colors to Assets Favorites: 1. On the Assets panel, click Colors to see the asset colors. (If the Assets panel is not open, choose Window > Assets.) 2. Select Site at the top of the Assets panel. 3. Select a color you want to add to the Favorites list. For this exercise, select #003366 . 4. Select Add to Favorites from the Options pop-up menu, as shown in Figure 1-21. Add to Favorites on Options pop-up menu Figure 1-21 The Add to Favorites button. Add to Favorites MACROMEDIA DREAMWEAVER 4 26 LESSON 1

HTML STYLES As you design your Web pages, you will want to use font changes to make your pages more interesting. You can easily change the font face, including its size and color, but if you want the same color, the same font face, and the same size for all your pages, you would have to remember the settings from page to page. Good news: HTML Styles saves the text and paragraph formatting from selected text, making it easy for you to apply that style to other paragraphs in your document or to any document in your site. If you change an HTML style, text originally formatted with that style does not change. The following exercises demonstrate the use of HTML styles on a page. You will format some text, define an HTML style, and then apply that formatting style to other portions of a document. To create an HTML style based on existing text: 1. Return to the surf_hawaii.htm document and select “Crest,” the first term in the definition list. You applied bold formatting to this word earlier. 2. Apply the same color blue (#006699 ) from the Assets panel as you did for the heading. The remaining definition terms on this page need the same formatting, as do any other lists you create for your site. You’ll use an HTML style to accomplish this. 3. Choose Window > HTML Styles to access the HTML Styles panel shown in Figure 1-22. Options menu Figure 1-22 The HTML Styles panel. New Style 4. Click New Style at the bottom of the panel or use the Options pop-up menu and choose New from the list. LESSON 1 27 MACROMEDIA DREAMWEAVER 4

The Define HTML Style dialog box opens, as shown in Figure 1-23. Figure 1-23 The Deﬁne HTML Style dialog box. 5. In the dialog box, name the style Term and select Paragraph from the Apply To list. Then click OK . Note: Changes you make in the Define HTML Style dialog box are not applied to the original text. You will need to apply the style directly to the paragraph or text. 6. Select the heading “Hawaii - Surfer's Paradise.” This paragraph already has color applied and is centered on the page. 7. Create a new HTML style for this paragraph, naming the style Level3. Click OK . 8. Select the text “Dead Man’s Bluff.” Change the font and the color and make the words bold. 9. Create a new HTML style for this text, naming the style Boldit. Select Selection from the Apply To list. Note: To apply a style to a selection you have to highlight all of the appropriate text before applying the style. To apply a style to a to a paragraph you just have to place the insertion point within the paragraph—you don’t have to select each word in the paragraph. MACROMEDIA DREAMWEAVER 4 28 LESSON 1

To apply an HTML style: 1. Make sure the HTML Styles panel is open (Window > HTML Styles). 2. Select the definition term “Trough.” The style is to be applied to a paragraph—just place your insertion point within the text. 3. Click Term on the HTML Styles panel. The style is applied to the paragraph. 4. Repeat steps 2 and 3 for the remaining definition terms in the list. 5. Select the text “Long Cool One.” This time you are applying a selection style, so make sure you highlight each word. 6. On the HTML Styles panel, click Boldit . The style is applied to the selected text. 7. Repeat steps 5 and 6 for “Piece of Cake” and “Gripper.” 8. Select the text “Expected Conditions at the Big Kahuna Competition” and apply the Level 3 style. To edit an HTML style: 1. Choose Window > HTML Styles and make sure no text is selected in the Document window. 2. Right-click (Windows) or Control-click (Macintosh) the Level 3 style name on the panel. Choose Edit from the pop-up menu. The Define HTML Style dialog box opens. 3. Make a change in the Define HTML Style dialog box (change the color or font) and then click OK . Note: The change you make to a style does not affect the current text with that formatting. If you want the current text to reflect the new formatting, you have to reapply the style. To delete an HTML style: 1. Make sure no text is selected in the document and then deselect Auto Apply. 2. On the HTML Styles panel, select the style you want to delete. (You don’t need to delete a style for this exercise.) 3. Click Delete Style (the trash can) in the lower-right corner of the panel. If you forget to turn off the Auto Apply option, you may see the text on the page change to the HTML style you selected to delete. If this happens, clear the text formatting by using the steps explained next. To clear text formatting: 1. Select the formatted text. If you are clearing a paragraph style, you can place your insertion point anywhere in the paragraph. 2. On the HTML Styles panel, select Clear Paragraph Style or Clear Selection Style . All formatting is removed, regardless of how it was applied. LESSON 1 29 MACROMEDIA DREAMWEAVER 4

ADDING HORIZONTAL RULES A horizontal rule is a line that goes across the page and provides a visual division between sections of your page. To add a horizontal rule: 1. On the Common Objects panel, drag a horizontal rule to the very bottom of the document or choose Insert > Horizontal Rule. 2. In the Property inspector, type 90 in the W (width) text box (see Figure 1-24). Figure 1-24 The Property inspector for a horizontal rule. 3. Select % from the pop-up menu to the right of the text you just typed. The horizontal rule extends across 90 percent of the browser window regardless of the browser width. It is displayed as a shaded bar centered across the page. Note: Select pixels from the menu to specify an absolute width. If you choose this option, the rule is not resized when users resize the browser window. 4. Deselect Shading to display a solid bar. 5. Type 3 in the H (height) text box. The horizontal rule is 3 pixels in height. 6. From the Align pop-up menu, select Left . The thick, unshaded bar moves to the left but still extends across 90 percent of the browser window. 7. Save the file and preview it in the browser. MACROMEDIA DREAMWEAVER 4 30 LESSON 1

ADDING SPECIAL CHARACTERS TO YOUR PAGE When working in Dreamweaver, you are generally typing at the keyboard. Sometimes you need characters and other information that is not directly accessible from the keyboard. With Dreamweaver, you can easily insert special characters, e-mail links, and dates. To enter special characters: 1. On the Character Objects panel, drag the copyright character (shown in Figure 1-25) to the bottom of the page. (If you don’t see the Characters panel, click the arrow at the top of the Objects panel and choose Characters from the pop-up menu.) Copyright Figure 1-25 Choosing the copyright character. 2. To the right of the copyright symbol, type 2000, Compass Adventure Travel. 3. Save the file and preview it in the browser. LESSON 1 31 MACROMEDIA DREAMWEAVER 4

To insert other characters: 1. The Character Objects panel contains the most commonly used special characters. To insert characters not found on this panel, click Other or choose Insert > Special Characters > Other. The Insert Other Character dialog box opens (see Figure 1-26). Figure 1-26 The Insert Other Character dialog box. 2. Click the character you want and then click OK . The character appears on your page. MACROMEDIA DREAMWEAVER 4 32 LESSON 1

ADDING E-MAIL LINKS Linking to an e-mail address makes it easy for your visitors to contact you from a Web page. You should always include some method to allow visitors to correspond or interact with someone in your organization. To enter an e-mail link: 1. Place the insertion point on the line following the copyright you created earlier. 2. Click E-Mail Link on the Common Objects panel or choose Insert > E-Mail Link. The Insert Email Link dialog box opens, as shown in Figure 1-27. Figure 1-27 The Email Link dialog box. 3. Make the following changes and then click OK . • For Text , type Send us your questions! • For E-Mail , type your e-mail address. The text appears as a link. The Property inspector shows the e-mail address in the Link text box. 4. Save the file and preview it in the browser. To manually type an e-mail link: 1. Select the text you want to make an e-mail link. 2. In the Link text box of the Property inspector, type mailto: followed by the e-mail address. Make sure you type the colon and no spaces. LESSON 1 33 MACROMEDIA DREAMWEAVER 4

ADDING A DATE AUTOMATICALLY Sometimes you will need to keep track of the date when you last modified a page in your site. Dreamweaver lets you place the date and time on your pages to track this information. The date and time can be updated automatically so you don’t have to do it. To insert the date: 1. Place the insertion point on the line following the e-mail link. 2. Click Date on the Common Objects panel or choose Insert > Date to place the current date on the page. The Insert Date dialog box opens (see Figure 1-28). Figure 1-28 The Insert Date dialog box. 3. Make the following changes and then click OK : • Select Thursday, from the Day Format pop-up menu. • Select March 7, 1974 from the Date Format pop-up menu. • Select 10:18 PM from the Time Format pop-up menu. • Select Update Automatically on Save to update the date on your page each time you save your document. The current day, date, and time are displayed. This information will change every time you save your document. To change the date format if it is automatically updated: 1. Click the date in your document. 2. In the Property inspector, click Edit Date Format . The Edit Date Format dialog box opens. This dialog box is the same as the Insert Date dialog box shown in Figure 1-28. 3. Make appropriate changes to the options and then click OK . MACROMEDIA DREAMWEAVER 4 34 LESSON 1

ADDING FLASH TEXT When you add a heading to your page, your options are to use text and format it as a heading tag or to create a graphic and insert it on your page. Text formatted as a heading loads quickly because it is text, but your font and size choices are limited. Graphics as headings solve the font choice problem, but you may not have access to a graphics program, or you may not have enough time to create the graphic you need. Flash text provides the best of both these options. You can use any font you choose and create the text within Dreamweaver. The text you create is a small Flash file (a SWF file). Because it is Flash and not normal body text or a bitmap graphic, you can resize Flash text directly in the Document window. Note: Resizing graphics (discussed in Lesson 2) within Dreamweaver is not recommended. But you can resize the Flash text image you create because it is a vector graphic. Vector graphics are scalable. Bitmap graphics (such as GIF and JPEG images) are not. To add Flash text: 1. Position the insertion point at the center of a new line at the bottom of the document. 2. On the Common Objects panel, click Flash Text . (Be sure you haven’t selected the Flash object or the Flash Button object.) The Insert Flash Text dialog box opens, as shown in Figure 1-29. Figure 1-29 The Insert Flash Text dialog box. LESSON 1 35 MACROMEDIA DREAMWEAVER 4

3. Make the following changes: • From the Font pop-up menu, choose Comic Sans . (Choose another font if this is not available on your machine.) • In the Size text box, type 22. • From the Color pop-up menu, choose a maroon color. • From the Rollover pop-up menu, choose a blue color. • In the Text text box, type Kawabunga! • For Bg Color, type CCFFFF or use the eyedropper and click the background in the Document window. 4. In the Save As text box, type kawa_text.swf and then click OK . 5. In the Property inspector, click Play to start the Flash animation. 6. In the Document window, place your pointer over the Flash text. The text changes to the rollover color you chose. 7. In the Property inspector, click Stop . 8. In the Document window, select the Flash text and resize it by dragging one of the handles. 9. Save the file and preview it in the browser. To modify Flash text: 1. In the Document window, double-click the Flash text. (If you can’t select the text, first click Stop in the Property inspector.) The Insert Flash Text dialog box opens. 2. Change the options to your liking. 3. Click Apply to see the results of your changes. 4. When you finish, click OK to close the Flash Text dialog box. The edited Flash text is placed on the page, and the SWF file is updated. MACROMEDIA DREAMWEAVER 4 36 LESSON 1

LESSON 2: WORKING WITH GRAPHICS OBJECTIVES When you finish this lesson, you will understand • The graphics formats commonly used on Web pages • The difference between aligning a graphic on a page and aligning the text near it and you will have learned • How to insert graphics on a Web page • How to wrap text around graphics • How to use the Assets panel to manage graphics • How to insert buttons and animations from Macromedia Flash All current browsers support both GIF and JPEG graphic formats. In general, use GIF if the artwork has large areas of solid color and no blending of colors, and use JPEG for photographic images or images with a large tonal range. For example, a picture of a blue sky with clouds looks “posterized” when saved as a GIF image. All the different shades of blue are mapped to only a few colors. GIF images are saved in 8-bit color mode, which means that only 256 colors can be represented. (Actually for the Web, only 216 colors are used, which makes the problem even worse.) JPEG saves the image in 24-bit mode, retaining all the colors. GIF files tend to load more quickly and have more optimization options. If you are working with a graphic that can be saved as either a GIF or JPEG file, choose GIF whenever possible. You can use transparency to mask the background of a graphic. Sometimes the Transparency option doesn’t work, so be sure to test your pages on as many machines and browsers as possible. Interlacing is a method of defining the way the image is displayed in the browser. Interlacing displays every other pixel on every other line and then goes back and repeats the process, filling in areas not already displayed. Without interlacing, the graphic is “painted” on the screen line by line, starting at the top of the image. Interlacing increases the file size slightly, but its advantage is that it provides a visual clue to the user that something is happening. LESSON 2 37 MACROMEDIA DREAMWEAVER 4

LESSON OVERVIEW In this lesson’s exercise, you will insert graphics on a Web page. Following is a brief outline of the process for building the page. You’ll find complete step-by-step instructions starting on the next page. To see an example of the page, open Lesson_02_Graphics/Completed/travel_log.htm. 1. Create a new file and save it as travel_log.htm in the Lesson_02_Graphics folder. 2. Title the page Compass Extreme Adventures. Change the background color of the page to #006699 and the font color to white. 3. Insert the file Lesson_02_Graphics/Images/banner.gif and name the image banner. 4. Center the image on the page and add banner graphic as the Alt text. 5. Below the graphic, type My Diving Travel Log and format this text as Heading 2, with italics. Left-align this line. 6. Drag the diver.jpg graphic from the Assets panel to the document and place it below the heading. The image is located in the Lesson 2 Image Favorites on the Assets panel. 7. Select and copy the text from Lesson_02_Graphics/Text/diving.txt and then paste the text to the right of the diver image. Make the text wrap around the image on the right. 8. Drag the fish.gif image to a new line after the body text. 9. Position the insertion point after the fish graphic and type Check out some of the fish we saw. 10. Align the text to the middle of the image. 11. Add a Flash button to the next line. Choose Beveled Rect-Blue for the button style and type Return Home for the button text. Center the Flash button on the page. 12. On the next line, insert the Flash animation Lesson_02_Graphics/Flash/surfAd.swf. MACROMEDIA DREAMWEAVER 4 38 LESSON 2

PLACING GRAPHICS ON THE PAGE Dreamweaver lets you choose how it references images: with document-relative or site-root-relative references. With document-relative referencing, Dreamweaver constructs the path to the image based on the relative location of your HTML document to the graphics file. Site-root-relative referencing constructs the path to the image based on the relative location of your HTML document to your site root. Generally, you should use document-relative links and paths. If you have an extremely large site or plan to move pages frequently within the server, you might want to use site-root-relative referencing. Site-root- relative references for images appear only on the server—they are not displayed locally. Until you save your file, Dreamweaver has no way to create the reference. You should always save your document before you insert graphics. If you don’t, Dreamweaver displays an alert box and then fixes the file name path when you do save the Dreamweaver file. To insert a graphic using the Objects panel: 1. Create a new file and save it as travel_log.htm in the Lesson_02_Graphics folder. Use Compass Extreme Adventures as the document title. 2. In the Page Properties dialog box, change the background color to #006699 and the default font color to #FFFFFF. 3. Position the insertion point on the first line of the document. 4. Click Image on the Common Objects panel or choose Insert > Image to insert a graphic on the page. The Select Image Source dialog box opens, as shown in Figure 2-1. Figure 2-1 The Select Image Source dialog box. 5. Select Preview Images to see a thumbnail of the images you click. 6. Locate the file Lesson_02_Graphics/Images/banner_head.gif. 7. From the Relative To menu, choose Document . The document file name travel_log.htm appears to the right of the menu. LESSON 2 39 MACROMEDIA DREAMWEAVER 4

8. Click Select (Windows) or Open (Macintosh). 9. In the Property inspector, type banner in the Name text box. (It’s on the far left, under the word “Image.”) This name is an internal name, used mainly for DHTML options. Although naming your images is not essential, it is a good practice. When you import a graphic, the width and height of the graphic are automatically added in the Property inspector. This gives the browser the information it needs to define the layout of the page. Note: Including the width and height of the image in the HTML can make a difference in the loading speed of your graphics. You can change these numbers in Dreamweaver, but don’t! If you scale the image larger, the image quality diminishes, because 72 dots per inch (dpi) is not a high enough resolution to display larger images. You could scale the image smaller and it would look okay, but you won’t have changed the file size; thus, the graphic will take just as long to download. Always adjust the image size in your image-editing software (such as Macromedia Fireworks) to ensure that you use the smallest file size possible. You can use the width and height tags to create a special effect for a graphic without making the graphic larger or smaller. For example, you can create a 1-pixel by 1-pixel graphic of a color—a solid dot. Use the width tag to create a colored line across the page; use the height tag to change its size. The Alt option lets you specify text to be displayed on browsers when graphics can’t be displayed. This is a nice feature to add to all graphics that are critical to users for navigation. If users have graphic display disabled or are using a text-only browser, at least they can see some of the information they are missing. People with vision disabilities use a reader that speaks the Alt tags along with the text on a Web page. The Alt text is displayed briefly when the user moves the pointer over the graphic. To center a graphic and add Alt text: 1. Type banner graphic in the Alt text box. 2. Click the banner_head.gif image to select it. 3. In the Property inspector, click Align Center. If you don’t see the Align Center icon, click the expander arrow at the bottom right of the Inspector, as shown in Figure 2-2. Expander Arrow Align Icons Figure 2-2 The Property inspector’s Align icons and expander arrow. 4. Below the banner graphic, type My Diving Travel Log. Make this text an italic heading 2, using the Verdana font, and left-align it. 5. Position the insertion point on the next line and change the line to a paragraph format. MACROMEDIA DREAMWEAVER 4 40 LESSON 2

To insert an image using the Assets panel: 1. On the Assets panel, click Images. (If the Assets panel is not open, choose Window > Assets.) 2. Click Favorites at the top of the Assets panel. Open the Lesson 2 Favorites by clicking the plus sign (Windows) or arrow (Macintosh). The list of Lesson 2 Image Favorites appears, as shown in Figure 2-3. Figure 2-3 Assets panel with Favorites. 3. Drag the diver graphic from the Assets panel to the document and place it below the heading. 4. Type diver pic in the Alt text box. LESSON 2 41 MACROMEDIA DREAMWEAVER 4

ADDING IMAGES TO ASSET FAVORITES All images used within a site are listed as site assets on the Assets panel. For images that are used repeatedly, placing them in Image Favorites can be a time saver. You can organize your images into folders to make them easy to locate. It may take a few seconds for the panel to create a listing all of the assets used by files in your site. If you haven't created a site cache for this site, the Assets panel prompts you to do so; the asset catalog can't be created without a site cache. If you add a new asset to your site, it may not immediately appear on the Assets panel. To update the Assets panel to include all the images in your site, you need to refresh the site catalog. Click Refresh Site List (the button looks like a circular arrow) at the bottom right of the Assets panel (see Figure 2-4). Figure 2-4 Assets panel for the site. Refresh Site List Edit Add to Favorites To add an image to Asset Favorites: 1. At the top of the Assets panel, choose Images: Site . 2. Select the image you want from the list of images. 3. Click Add to Favorites at the lower right of the panel. 4. Choose Images: Favorites . The image is listed with the other favorites. MACROMEDIA DREAMWEAVER 4 42 LESSON 2

To remove an image from Asset Favorites: 1. On the Assets panel, choose Images: Favorites at the top of the panel. 2. Select the image from the list of images. 3. Click Remove from Favorites . The image is no longer listed as a favorite. To create a folder in Asset Favorites: 1. On the Assets panel, choose Images: Favorites at the top of the panel. 2. Click the New Favorites Folder at the bottom of the panel. 3. Type the folder name. To put an image in a Favorites folder: 1. On the Assets panel, choose Images: Favorites at the top of the panel. 2. Drag the image to a folder. A small plus sign (Windows) or an arrow (Macintosh) appears to the left of the folder name, indicating that the folder has an image in it. 3. Click the plus sign (Windows) or arrow (Macintosh) to see the contents of the folder. To remove a folder from Asset Favorites: 1. On the Assets panel, choose Images: Favorites at the top of the panel. 2. Select the folder to delete. 3. Click Remove from Favorites at the bottom of the panel. LESSON 2 43 MACROMEDIA DREAMWEAVER 4

WRAPPING TEXT AROUND IMAGES A common formatting preference is to have text wrap around a graphic on the page. You can achieve this easily by changing the Align attribute of the image. When you select either Left or Right from the Align pop-up menu, an image anchor symbol is placed at the beginning of the text. This symbol indicates where the HTML tag for the image is in relation to the text. If you don’t see the symbol, choose View > Visual Aids > Invisible Elements. A check mark next to this command indicates that the option is on. You can move the anchor to a new location in the text, but the anchor needs to be at the beginning for text wrapping to work properly. The text wraps to the bottom of the graphic and then returns to the left margin of the window. Dreamweaver gives you several alignment options for images, including Top and Text Top. If you want your text to wrap or move to the top of the image, you might think that one of these options will work. The list is confusing, but remember that text can wrap only on either the left or the right side of an image, so the only option you can choose is Left or Right. To force multiline text to wrap around an image, choose Left or Right alignment. The other alignment options in the pop-up menu are for the placement of a single line of text next to a graphic. You will work with these later. If you want the text to wrap, change the alignment option on the image. If you want to place the image on the left and wrap the text on the right, select the image and choose Left in the Align field. If you want to place the image on the right and wrap the text on the left, select the image and choose Right in the Align field. To wrap text around an image: 1. Select and copy the text from Lesson_02_Graphics/Text/diving.txt. 2. In travel_log.htm, paste the copied text to the right of the diver graphic. Left-align all the text. 3. Select the diver graphic. 4. In the Property inspector, choose Left from the Align pop-up menu, as shown in Figure 2-5. The text wraps around the diver graphic. Figure 2-5 The Property inspector, showing Image properties. 5. Save the file and preview it in the browser. MACROMEDIA DREAMWEAVER 4 44 LESSON 2

MODIFYING THE SPACE AND ADDING A BORDER AROUND IMAGES When you use an Align option to wrap text around graphics, you’ll probably want to adjust the space around the image as well. You can do this in the Property inspector. To add space and a border around an image: 1. In the Property inspector, type 15 in the H Space text box. This creates 15 pixels of space on both the left and right sides of the image. You cannot add space on only one side. 2. Type 2 in the V Space text box. This creates 2 pixels of space at both the top and bottom of the image. 3. In the Border text box of the Property inspector, type 2. A 2-pixel border is added to the diver image. The border color is always the same as the default text color specified in the Page Properties dialog box. LESSON 2 45 MACROMEDIA DREAMWEAVER 4

ALIGNING IMAGES AND TEXT Often you’ll want to control the placement of a graphic on the page in relation to a single line of text that appears near it. You can change the relative location of the graphic to the text by using options in the Property inspector. To align a single line of text near a graphic: 1. On the Assets Favorites panel, drag the fish image to a new line after the body text. Type fish pic in the Alt text box. 2. In the Property inspector, click the Center align icon. Be sure to click the icon; don’t select Center on the Align menu. 3. Position the insertion point after the fish graphic and type Check out some of the fish we saw. The text is aligned with the bottom of the graphic and is too close to the graphic. 4. Select the fish graphic and add a 2-pixel border to it. 5. In the Property inspector, type 15 in the H Space text box. The graphic and text move apart. 6. From the Align pop-up menu, choose Middle . The text is aligned with the middle of the graphic. 7. Save the file and preview it in the browser. IMAGE ALIGNMENT OPTIONS You need to understand how the alignment options work. The following seven options work well for aligning a single line of text near a graphic. As you saw earlier, they don’t work for wrapping multiple lines around a graphic (use Left or Right instead). Here’s what happens when you use the Align pop-up menu: Baseline: Aligns the bottom of the image with the baseline of the text line. Top: Aligns the image with the top of the tallest item in the line. Middle: Aligns the baseline of the text line with the middle of the image. Bottom: Identical to Baseline. Text Top: Does what many people think Top should do, which is to align the image with the top of the tallest text in the line (this is usually, but not always, the same as Top). Absolute Middle: Aligns the middle of the text line with the middle of the image. Absolute Bottom: Aligns the bottom of the image with the bottom of the text line. MACROMEDIA DREAMWEAVER 4 46 LESSON 2

ADDING FLASH OBJECTS You can easily achieve special effects by using Flash buttons and animations. Because Flash graphics are vector based, they have very small file sizes. This helps them load quickly in the user’s browser. ADDING FLASH BUTTONS Flash buttons have several different states, depending on the position of the pointer and whether the mouse button has been clicked. The first state is the look of the button when the pointer is not on it. The second state appears when the pointer is on the button but the mouse has not been clicked. The third state appears when the pointer is on the button and the mouse has been clicked. You can create and maintain Flash buttons in Dreamweaver from a set of available button styles. Many of the button attributes are changeable. First you will create a button, and then you will modify it. To create a Flash button: 1. In the travel_log.htm file you’ve being using, position the insertion point below the fish graphic in the center of the Document window. 2. On the Common Objects panel, click Flash Button . The Insert Flash Button dialog box opens. 3. Make the following changes: • From the Style pop-up menu, choose Beveled Rect-Blue . • In the Button Text text box, type Return Home. • From the Font pop-up menu, choose Verdana ( or your font choice if Verdana is not available). • In the Size text box, type 12. 4. For Bg Color , click the color chip. Then, using the eyedropper, click anywhere on the background in the Document window. The background color code #006699 appears in the Bg Color box. 5. In the Save As text box, type home_button.swf and then click OK . The Insert Flash Button dialog box closes. 6. In the Property inspector, click Play. The button is in its original state. 7. In the Document window, move the pointer over the Return Home button. The button changes to its rollover state. 8. Click the button. It changes to its clicked state. LESSON 2 47 MACROMEDIA DREAMWEAVER 4

9. Save the file and preview it in the browser. The button changes states just as it did in Dreamweaver, depending on the pointer position and mouse click. To modify a Flash button: 1. In the Document window, double-click the Flash button. The Insert Flash Button dialog box opens. 2. If the dialog box does not open, click Stop in the Property inspector and then double-click the Flash button again. 3. Make changes to the options. For example, change the font to Arial. 4. Click Apply to see the changes. 5. Click OK when you finish. ADDING FLASH ANIMATIONS You can add Flash animations to your document as easily as adding an image, provided the animation has already been created. You can resize the animations to your specification by dragging the handles. Unlike Flash buttons, you cannot create these animations directly within Dreamweaver. To add a Flash animation: 1. Position the insertion point below the Flash button. If your insertion point is not centered, click Center in the Property inspector. The insertion point is now centered on the page. The next object you add to the page will be centered. 2. On the Assets panel, click Flash . 3. From Favorites list on the Flash Assets panel, select surfAd and click Insert . The Flash animation is placed on the page. 4. In the Property inspector, choose Loop and Autoplay. Click Play to view the animation in Dreamweaver. 5. Save the file and preview it in the browser. Autoplay causes the Flash animation to begin playing as soon as the page is loaded in the browser. The animation plays repeatedly because the Loop property was set in Dreamweaver. Note: Always be sure to select a SWF file when inserting a Flash animation. Do not insert FLA or SWT files, because they will not show up in a browser. MACROMEDIA DREAMWEAVER 4 48 LESSON 2

LESSON 3: CREATING LINKS OBJECTIVES When you finish this lesson, you will understand • The reasons for adding links to your pages • Which objects can be used as links • When and why to place linked content in a new browser window and you will have learned • How to create text and graphic links • How to jump to a location within a Web page • How to create hotspots HTML’s power comes from its capability to link regions of text and images to other documents. The browser highlights these regions (usually with color or underlines) to indicate that they are hypertext links. They are often called hyperlinks, or simply links. A link in HTML has two parts: the name of the file (or URL of the file) to which you want to link and the text or graphic that serves as the clickable link on the page. When the user clicks the link, the browser uses the path of the link to jump to the linked document. In some browsers, the path of the link is displayed in the status area of the browser window (the bottom-left part of the window) when the pointer is positioned over the link. LESSON 3 49 MACROMEDIA DREAMWEAVER 4

LESSON OVERVIEW In this lesson’s exercise, you will create text and graphics links on a Web page, add hotspots to an image to make it an image map, and link to named anchors within a page. Following is a brief outline of the process for building the page. You’ll find complete step-by-step instructions on the next page. To see an example of the finished pages, open Lesson_03_Links/Completed/welcome.htm, and open map.htm for the image map and trips.htm for the named anchors. 1. Open Lesson_03_Links/welcome.htm. 2. Select the word “Surfing” and make it a link to Lesson_03_Links/surfing.htm. 3. Link the word “Diving” to diving.htm, the words “Mountain Biking” to biking.htm, and the word “Rafting” to rafting.htm. 4. Select the graphic at the bottom of the page and link to http://www.australia.com. Target that link to a new blank browser window. 5. Open Lesson_03_Links/map.htm. 6. Draw a rectangular hotspot around the Hawaiian Islands and link to Lesson_03_Links/trips.htm. 7. Draw an oval hotspot around Australia, and link to http://www.australia.com. 8. Draw a polygon hotspot around North America and link to Lesson_03_Links/trips.htm. 9. Open Lesson_03_Links/trips.htm and add anchors before each of the main headings. 10. Link the text at the top of the page to each of the anchors. 11. Return to the map.htm file and link the Hawaii hotspot to the Hawaii anchor in the trips.htm file. MACROMEDIA DREAMWEAVER 4 50 LESSON 3

CREATING HYPERTEXT LINKS Hypertext links can “jump” the user to another document within the current Web site or to a page at another Web site. The following exercise shows techniques for linking to a document within the site or for creating an external link. To create a text link to a document: 1. Open Lesson_03_Links/welcome.htm. This file contains all the text and graphics you will need to create links. 2. In the Document window, select the word “Surfing.” 3. In the Property inspector, click the folder icon to the right of the Link text box. The Select File dialog box opens. 4. Locate Lesson_03_Links/surfing.htm and click Select. The file name surfing.htm appears in the Link text box. 5. Save the file and preview it in the browser. 6. Repeat steps 2 through 4 to link the word “Diving” to diving.htm, the words “Mountain Biking” to biking.htm, and the word “Rafting” to rafting.htm. 7. Save the file and preview it in the browser. To link to an external site: 1. In the Document window, select the graphic at the bottom of the page. 2. In the Property inspector, type http://www.australia.com in the Link text box, as shown in Figure 3-1. You must type the complete URL. Figure 3-1 The Property inspector, showing a URL link. Hint: If the URL is long or complex, you can go to that site in your browser and copy and paste the URL into the text box. 3. Save the file and preview it in the browser. LESSON 3 51 MACROMEDIA DREAMWEAVER 4

TARGETING A LINK When you link to a page, the linked page replaces the current browser page. Sometimes, however, you may want to display the browser page in a new location or window. For example, if you link to a site outside your site, you have just led your users out of your pages. If they haven’t bookmarked your URL, users may not remember how to return to your pages. If your outside links open a new browser window, your page remains in the original window. To target a link: 1. With the bottom graphic still selected, choose _blank, from the Property inspector’s Target pop-up menu, as shown in Figure 3-2. Figure 3-2 The Property inspector’s Target pop-up menu. 2. Save the file and preview it in the browser. When you click the bottom graphic, the resulting page opens in a new browser window. In Dreamweaver, you can easily change the location where the linked page is displayed by using the following targets. (Targets other than _blank work only when you create frames for your page.) _blank: Loads the linked document in a new, unnamed browser window. _parent: Loads the linked document in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked document is loaded into the full browser window. _self: Loads the linked document in the same frame or window as the link. This target is implied, so you usually don’t have to specify it. _top: Loads the linked document in the full browser window, thereby removing all frames. Note: Use caution when opening new browser windows. New windows impose extra RAM requirements on the user’s computer as each window is opened. MACROMEDIA DREAMWEAVER 4 52 LESSON 3

CREATING IMAGE MAPS You’ve experienced how easy it is to link an image to a page. The user can click anywhere on the image to go to that linked page. You can also divide an image into several links by using an image map to place individual hotspots on the image. Image maps are not limited to rectangular areas—they can also have other shapes. In the following exercises, you will add a rectangular hotspot, a circular hotspot, and a polygonal hotspot to an image. To create an image map: 1. Open Lesson_03_Links/map.htm. This file has a large map graphic that needs to be divided into three hotspots. 2. Select the map graphic. 3. In the Property inspector, type worldmap in the Map text box, as shown in Figure 3-3. Don’t use spaces or special characters in the name. You can have several image maps on a page, but each map name must be unique. Hint: If you don’t see the Map text box, click the expander arrow at the bottom right of the inspector. Figure 3-3 The Property inspector’s Map text box. To create a rectangular hotspot: 1. In the Property inspector, select the Rectangular hotspot tool. 2. Drag around the words “Hawaiian Islands.” A translucent blue-green area with handles appears around the text. The Property inspector changes to show hotspot properties, as shown in Figure 3-4. Figure 3-4 The Hotspot Property inspector. 3. Select the Pointer hotspot tool. To resize the hotspot, drag a handle until the hotspot encompasses the small dot representing the Hawaiian Islands. To move the hotspot, position the pointer inside the hotspot and drag. LESSON 3 53 MACROMEDIA DREAMWEAVER 4

4. Make sure the rectangular hotspot is selected. In the Hotspot Property inspector, type Hawaiian Islands in the Alt text box. This text serves the same purposes as the Image Alt text. 5. Click the folder icon next to the Link text box and select Lesson_03_Links/trips.htm. Trips.htm appears in the Link text box. 6. Save the file and preview it in the browser. To create a circular hotspot: 1. Select the large map graphic. 2. In the Property inspector, select the Oval hotspot tool. 3. Drag a circle around Australia, including the words “Australia & South Pacific.” The hotspot area appears, and the Property inspector changes to show hotspot properties. 4. Make the following changes: • In the Alt text box, type Australia. • In the Link text box, type http://www.australia.com. Make sure you delete the number sign (#) from this text box. • From the Target pop-up menu, choose _blank to open a new browser window. 5. Save your file and preview it in the browser. To create a polygonal hotspot: 1. Select the large map graphic. 2. In the Property inspector, select the Polygon hotspot tool. 3. To draw a polygon, click around the North America graphic. Each click creates a point. Each subsequent point is connected by a line to the previous point. Continue clicking around North America until you have the shape you want. As you click, you’ll see the translucent hotspot area begin to form. 4. To edit the hotspot, select the Pointer tool and drag one of the handles to change the shape. To move the hotspot, drag within the area of the hotspot. 5. Make sure the polygonal hotspot is selected. In the Alt text box of the Hotspot Property inspector, type North America. 6. In the Link text box, locate and select Lesson_03_Links/trips.htm. 7. Save your file and preview it in the browser. To delete a hotspot: 1. Select the graphic that contains the hotspot. 2. Using the Pointer hotspot tool, select the hotspot; then press Delete . MACROMEDIA DREAMWEAVER 4 54 LESSON 3

LINKING TO NAMED ANCHORS When a document is long or has many sections, you might want to create a link that jumps the user to a specific place in the document. This eliminates the tedium of scrolling through the document. To do this, you must create a named position—an anchor —that you can reference as the link. This exercise illustrates the use of named anchors and the links to jump to them. Leave the map.htm file you’ve been using open; you’ll use that file in the next exercise. To insert an anchor: 1. Open Lesson_03_Links/trips.htm. This file contains a large amount of text that requires scrolling to see the entire document. 2. Position the insertion point before the heading “Hawaii – Multisport” at the bottom of the document. Make sure you haven’t positioned the insertion point in the top navigation area. 3. Choose Invisibles from the Objects panel’s Options menu. Click Named Anchor or choose Insert > invisible Tags > Named Anchor to insert an anchor—the place to jump to. The Insert Named Anchor dialog box opens, as shown in Figure 3-5. Figure 3-5 The Insert Named Anchor dialog box. 4. Type hawaii in the Anchor Name text box and then click OK . Don’t use spaces or special characters in the name. A yellow icon appears on the page to represent the anchor. Hint: If you can’t see the icon, make sure Invisible Elements is turned on by choosing View > Visual Aids > Invisible Elements. To link to an named anchor: 1. Select the text “Hawaii – Multisport” at the top of the document. 2. In the Link text box of the Property inspector, type #hawaii. Make sure the name you type here is exactly the same as the anchor name. Anchor names are case sensitive. Note: You must type the number sign (#) before the anchor name in the Link text box. 3. Save the file and preview it in the browser. LESSON 3 55 MACROMEDIA DREAMWEAVER 4

The one area where HTML is case sensitive is in the naming of your anchors. If you name your anchor “top,” for example, and then type #Top in the Link text box, your link may not work consistently in all browsers. To avoid typing errors, you can use the Point to File icon located in the Property inspector (see Figure 3-6). Point to File Figure 3-6 The Point to File icon in the Property inspector. To link by using the Point to File icon: 1. Add another anchor before the Alaska Vacation heading and name the anchor alaska. 2. Select the words “Alaska Vacations” at the top of the document. 3. Drag the Point to File icon and point to the Alaska anchor that you just created. Release the mouse button when you are directly over the anchor. The link is made. 4. Using the Point to File icon, insert anchors and links for the remaining headings. 5. Save your file and preview it in the browser. In the previous exercise, you linked the Hawaiian Island hotspot area to trips.htm. The link opens to the top of the page. You just created an named anchor to the Hawaii section in the trips.htm file. You can make the image map point directly to the Hawaii section instead of linking to the top of the page. Return to the map.htm page and drag the Point to File icon to the Hawaii anchor on the trips.htm page. When you release the mouse button, you’ll see trips.htm#hawaii in the Link field. MACROMEDIA DREAMWEAVER 4 56 LESSON 3

LESSON 4: ELEMENTS OF PAGE DESIGN OBJECTIVES When you finish this lesson, you will understand • Using tables to lay out your pages • Page sizes and screen resolution and you will have learned • How to use the Layout view • How to create a standard table • How to modify a table • How to import tabular data USING TRACING IMAGES It’s possible you will be given a page design that someone else has designed in a graphics program such as Macromedia FreeHand, Adobe Photoshop, or QuarkXPress. If you can convert the page to a JPEG, GIF, or PNG graphic, you can import that image into Dreamweaver and use it as a guide (a tracing image) to re-create the HTML page. The tracing image is visible only inside Dreamweaver. It is not embedded in the HTML code and will not be displayed in the browser. While you’re using a tracing image, the background color or background image of your page will be hidden, but it appears in the browser. To place a tracing image: 1. Create a new document and save it as destinations.htm in the Lesson_04_Tables folder. Title the page Featured Destinations. 2. Choose View > Tracing Image > Load. The Select Image Source dialog box opens. 3. Choose the file table_trace.jpg located in Lesson_04_Tables/Images; then click Select . The Page Properties dialog box opens. 4. To see your image on the page, click Apply. Then drag the Image Transparency slider to the left to lighten the image. You want to be able to see the image but not be distracted by it. Continue to drag the slider and click Apply until the image is to your liking. Then click OK . LESSON 4 57 MACROMEDIA DREAMWEAVER 4

ALTERING A TRACING IMAGE You can change the position of a tracing image, align it to a selected object, or hide the image by using options on the View > Tracing Image menu, as in the following examples. To show or hide the tracing image: • Choose View > Tracing Image > Show. To change the position of a tracing image: 1. Choose View > Tracing Image > Adjust Position. 2. Do one of the following: • To precisely specify the position of the tracing image, enter coordinate values in the X and Y text boxes. • To move the image 1 pixel at a time, use the arrow keys. • To move the image 5 pixels at a time, press Shift and an arrow key. To reset the position of the tracing image: • Choose View > Tracing Image > Reset Position to return the tracing image to the upper-left corner of the Document window (0,0). To align the tracing image to a selected element: 1. Select an element in the Document window. 2. Choose View > Tracing Image > Align with Selection. The upper-left corner of the tracing image is aligned with the upper-left corner of the selected element. USING TABLES FOR PAGE DESIGN Up to this point, you’ve had little control over the design of your pages. You’ve wrapped text around a graphic and indented the text on the page, but these options are very limited and don’t always provide the desired effect. Tables can give you more control. Tables in HTML are very similar to tables in a spreadsheet. Tables in HTML were actually meant to be a means of presenting information in a very organized manner; they contain rows and columns where you can place data. But in HTML, tables also provide the way to design your pages with some control over placement of text and graphics. You can use the cells of a table to put graphics in a location other than just the next place vertically on the page, or you can use a cell to create a sidebar for your text. MACROMEDIA DREAMWEAVER 4 58 LESSON 4

If you’ve ever had to hand-code an HTML table, you know how tedious the task can be. To simplify the building of a table, Macromedia Dreamweaver 4 provides a Layout view where you can easily place the elements you want on the page. Dreamweaver then creates the table for you. Layout view works much like page layout programs in which you draw boxes on the page and then fill the boxes with text or graphics. You can resize the boxes, and you can place the boxes anywhere on the page. In Dreamweaver, you can view tables on the page in either Layout view or Standard view. In Standard view, you see all the rows and columns of the table. In Layout view, you see just the cells (boxes) that contain your content. To switch to Layout view: • Choose View > Table View > Layout View or click Layout View on the Objects panel (see Figure 4-1). Figure 4-1 The Layout View button on the Objects panel. Standard View Layout View When you are in Layout view, you can add layout cells or a layout table to the page. If you add just a layout cell, Dreamweaver automatically draws a layout table as a container for the cell. The layout table is drawn as wide as the Document window, but you can resize the table to any size you need. Layout tables also appear by default with a tab at the top. The tab makes it easier to identify the table, contains column numbers and a column menu, and visually moves the table down from the top of the page. To remove the tab from the table, you can use View > Table View > Show Layout Table Tabs. LESSON 4 59 MACROMEDIA DREAMWEAVER 4

DESIGNING IN LAYOUT MODE In the next exercise, you will build a Web page based on the tracing image you just imported. The graphics you need for this exercise are located in the Lesson 4 folder of the Favorites section of the Assets panel. The text is in the student_table_project.txt file located in the Lesson_04_Tables/Text folder. You do not have to exactly match the template—just use it as a guide to help you place the text and images. To insert a layout cell: 1. Make sure you are in Layout view and then click Draw Layout Cell in the Layout area of the Objects panel (see Figure 4-2). The pointer changes to a plus sign. Draw Layout Cell Draw Layout Table Figure 4-2 The Draw Layout Cell button on the Objects panel. 2. Place the pointer on the page where you want the cell to appear and then drag to draw the cell. A table is automatically drawn to contain the cell. The cell is outlined in blue to distinguish it from the table, which appears in green. When you move the pointer over a cell, the cell border turns red to indicate which cell you are over. 3. Click the red border to select the cell. The cell border turns blue and handles appear, which you can drag to resize the cell. Note: You can also hold down Control (Windows) or Command (Macintosh) and click within a cell to display the resize handles. 4. Drag the border of the cell to move the cell to a new location. Move this cell to cover the plane on the left side of the page. Insert the plane graphic from the Lesson 4/Student Project folder in the Images Favorites list on the Assets panel into this cell. Hint: You can just drag the name from the Assets panel into the cell on the page. MACROMEDIA DREAMWEAVER 4 60 LESSON 4

5. Draw six more cells to cover the Adventure Tours title, the Compass logo, and the four buttons across the top. To draw multiple cells without clicking Draw Layout Cell more than once, hold down Control (Windows) or Command (Macintosh) as you draw the first cell. You can then continue to draw new cells until you release the modifier key. When you draw a cell on the page, white guides appear to help you place other cells that you want to align with the first cell. Use the horizontal guides to align the top of each cell. 6. Insert the adventure_tours graphic in the first cell, and then compass_logo, feature_button, gear, about, and trip_button in the other cells. 7. Draw cells to cover the Mountain Biking, Kayaking, and Surfing images and insert biking_icon, kayaking_icon, and surfing_icon in these cells. You can use the arrow keys to nudge the cells to the correct locations. 8. Draw four cells for the text areas. 9. Draw three more cells for the price and the More Details graphic. 10. Open the student_table_project.txt file in the Lesson_04_Tables/Text folder. This is a text (ASCII) file and opens in a text editing window. 11. To make the text wrap within the window, click View Options in the toolbar and select Word Wrap from the View Options pop-up menu (see Figure 4-3). A check next to the menu item indicates that it is selected. Figure 4-3 View Options pop-up menu in the toolbar. 12. Select and copy the first paragraph. Return to your destinations.htm page, place the insertion point in the top text cell, and paste. The text is copied to this cell. Make any changes to the cell size to accommodate the text. Click the cell border to move or resize the cell. You may also need to change the font and the size. The tracing image uses Verdana for the font and -2 for the font size. (Macintosh users might want to try -1 for the font size.) LESSON 4 61 MACROMEDIA DREAMWEAVER 4

13. Return to the text document and copy the remaining text into the other text cells you’ve drawn on the page. Insert the details image in the price cells. 14. Resize and move the cells to make your page look like Figure 4-4. 15. To hide the tracing image as you fine-tune your page, choose View > Tracing Image > Show. This is a toggle to show or hide the tracing image. 16. Save and view your page in the browser. Figure 4-4 The table layout exercise. MACROMEDIA DREAMWEAVER 4 62 LESSON 4

As you design your pages in Layout view, you will want to move or resize cells or add new cells to add more content. You can also add a background color to each cell or to the table. A layout cell cannot overlap other cells and cannot be moved outside the layout table. To move a layout cell: 1. Open the rafting_tours.htm file in the Lesson_04_Tables folder. Make sure you are in Layout view. This page has a table with some text and graphics in the cells. 2. Click the rafting image cell border to select the cell. Handles appear around the cell. 3. Drag the border to a new location or use the arrow keys to move it. Move the cell vertically within the table. The arrow keys move the cell 1 pixel at a time. Hold down Shift to move the cell 10 pixels at a time. To add color to a cell: 1. Draw a new cell below the rafting image for a caption. Make it as wide as the image. Type Rafting the Rockies in the cell. Format the text as Heading 4 . 2. Select the cell in which you added the caption. 3. Click the Bg color box in the Property inspector and use the eyedropper to select the yellow color in the raft. To add color to a table: 1. Select the table. 2. Click the Bg color box and choose a color for the table (you don’t need to color the table for this exercise). CELL FORMATTING You can change several options for each cell. You can control the alignment of objects in each cell in a table horizontally and vertically. The default HTML setting for horizontal alignment in a cell is along the left. The default HTML setting for vertical alignment in a cell is the middle of the cell. When you draw a cell in Layout view, Dreamweaver changes the vertical alignment to Top, but you can easily change that setting. To change the cell alignment: 1. Select the caption cell and then choose Center from the Horz pop-up menu in the Property inspector. This centers the text horizontally in the cell. 2. Change the Vert setting to Middle . This centers the text vertically in the cell. LESSON 4 63 MACROMEDIA DREAMWEAVER 4

You can also control the width and height of the cell. The cell can be set to a fixed width or set to change width depending on the width of the browser. If you change a cell to Autostretch, Dreamweaver changes the entire table to Autostretch. To set a column to Autostretch: 1. Select the cell you want to autostretch. For this exercise, select the main text cell. 2. Click Autostretch in the Property inspector or click the Column Header pop-up menu and choose Make Column Autostretch (see Figure 4-5). Figure 4-5 The Column Header menu. Note: The Choose Spacer Image dialog box appears if a spacer image is not associated with your site (see Figure 4-6). If the dialog box appears, choose Use an Existing Spacer Image File and locate spacer.gif in the Lesson_04_Tables/Images folder. The spacer file location is saved in your preferences. Choose Edit > Preferences > Layout View to change or remove the spacer image. 3. View the page in the browser and change the width of the browser. Notice that the column stretches as you change the width. MACROMEDIA DREAMWEAVER 4 64 LESSON 4

When you select a column to autostretch, you cause all cells in that column to autostretch. Use the white guides on the page to determine if another cell is within the column you’ve selected. Dreamweaver inserts spacer images to control the layout when you select Autostretch. A spacer image controls the spacing in the layout but is not visible in the browser window. If you choose not to use spacer images, columns will change size or even visually disappear if they do not contain content. You can insert and remove spacer images in each column yourself or let Dreamweaver add them automatically when creating an Autostretch column. To add a spacer image: 1. Choose Add Spacer Image from the Column Header menu. If you have never created a spacer image for this site, the Choose Spacer Image dialog box opens, as shown in Figure 4-6. Figure 4-6 The Choose Spacer Image dialog box. 2. Choose from the following options: • Create a Spacer Image File: If you choose this option and click OK, another dialog box opens in which you can navigate to the directory in your site where you want to store the spacer image file (for example, an images folder). • Use an Existing Spacer Image File: If you already have a spacer image created for your site, choose this option and then navigate to your spacer image in the next dialog box that opens. You can insert spacer images into specific columns, remove them from specific columns, or remove all spacer images on the page. To insert a spacer image into a column: • Choose Add Spacer Image from the Column Header menu. The spacer image is inserted into the column. You will not see the spacer image, but the column may shift slightly. To remove a spacer image from a column: • Choose Remove Spacer Image from the column header menu. The spacer image is removed and the column may shift. LESSON 4 65 MACROMEDIA DREAMWEAVER 4

To remove all spacer images from your page: • Choose Remove All Spacer Images from the column header menu or click Remove All Spacers in the Layout Table Property inspector (see Figure 4-7). Your whole layout might shift slightly—or dramatically—depending on your content. If you do not have content in some columns, these columns may visually disappear completely. Remove All Spacers Figure 4-7 Property inspector showing Remove All Spacers. CREATING TABLES IN STANDARD VIEW Although the Layout view provides the easiest way to design your pages, you will often need to view your page in the Standard view, which shows you the HTML table structure. You can create tables yourself in this view or view the table Dreamweaver created when you drew a table in Layout view. If the information you want to present is structured into rows and columns, using a standard table is easier than drawing the rows and columns yourself. To switch to Standard view: • Click Standard View in the View area of the Objects panel. If a table exists on the page, you’ll see the table borders and all the cells of the table. MACROMEDIA DREAMWEAVER 4 66 LESSON 4

To insert a standard table: 1. Open a new document. Save your file as biking_table.htm and title the page Montana Mountain Biking. 2. Open the mt_biking.txt file in the Lesson_04_Tables/Text folder. Copy the “Montana Mountain Biking” header and the first paragraph and paste them in your page. Change the header to Heading 3 style. 3. Place the insertion point in the paragraph after the body text. If one doesn’t exist, press Enter (Windows) or Return (Macintosh) to enter a new paragraph. 4. Choose Insert > Table or click Table on the Common Objects panel. The Insert Table dialog box opens (see Figure 4-8). Figure 4-8 The Insert Table dialog box. 5. Type 2 for Rows and 4 for Columns . Change the Width to 500 Pixels, set the Border to 1 and leave Cell Padding and Cell Spacing blank. Then click OK to close the dialog box. The options are described here: • Rows and Columns: The number of table rows and columns. • Cell Padding: The amount of spacing between the cell content and the cell walls. • Cell Spacing: The amount of spacing between table cells, not including the border. • Width: The width of the table in pixels or as a percentage of the browser window. Tables specified in pixels are better for precise layout of text and images. Tables specified in percentages are a good choice when the proportions of the columns are more important than their actual widths. • Border: The width of the table border. 6. Type Ride Name in the first cell of the first row; then press Tab to move to the next cell. Enter Type, press Tab again, type Location, press Tab, and type Rating. 7. Click after the table and then press Enter (Windows) or Return (Macintosh). The insertion point is in a new paragraph. You could continue to enter the remaining text for the table. For this exercise, however, you will use another method to fill the table. LESSON 4 67 MACROMEDIA DREAMWEAVER 4

IMPORTING DATA FROM SPREADSHEETS If you have text in a spreadsheet or even in a table in Microsoft Word, you can insert it very easily into Dreamweaver. You need to save or export the text as a tab- or comma-delimited file. To insert data into a table: 1. Choose Insert > Tabular Data or click Tabular Data on the Objects panel. The Insert Tabular Data dialog box opens, as shown in Figure 4-9. Figure 4-9 The Insert Tabular Data dialog box. 2. Click Browse and find the text file you exported from your spreadsheet or Word document. For this exercise, choose bikingtable.txt from the Lesson_04_Tables/Text folder. 3. In the Insert Tabular Data dialog box, set the following options and then click OK : • Delimiter: Tab • Table Width: Set (and then type 500) • Percent: Pixels • Cell Padding: Leave blank • Cell Spacing: Leave blank • Format Top Row: No Formatting • Border: 1 The data is imported, and a table is built for you with the settings you chose. You have two tables: the first you created with the row headers, and the second has the data. You now want to combine the two tables. MACROMEDIA DREAMWEAVER 4 68 LESSON 4

COPYING AND PASTING TABLE CELLS You can copy and paste multiple table cells at one time, preserving the cell’s formatting, or you can copy and paste only the contents of the cells. Cells can be pasted at an insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted. To copy cells in a table: 1. Select all the cells in the second table by dragging across the cells. Start in the top-left cell and drag to the lower right cell. The selected cells are displayed with a black border. To be cut or copied, the selected cells must form a rectangle. 2. Choose Edit > Copy or use the keyboard shortcut Control+C (Windows) or Command+C (Macintosh). To paste table cells: 1. Click in the first cell of the second row in the top table. This is where the copied cells will be pasted. 2. Choose Edit > Paste or use the keyboard shortcut: Control+V (Windows) or Command+V (Macintosh). If you are pasting entire rows or columns, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced if the Clipboard contents are compatible with the selected cell. If you are pasting outside a table, the rows, columns, or cells are used to define a new table. All the cells from the second table should now be inserted in the first table. To remove cell content but leave the cells intact: 1. Select one or more cells, but not an entire row or column. 2. Choose Edit > Clear or press Delete . To delete a row and its contents: 1. Drag across all the cells in the row to select the row. 2. Press Delete . The row and all it contents are deleted. LESSON 4 69 MACROMEDIA DREAMWEAVER 4

SELECTING TABLE ELEMENTS To change or delete a table, you need to select the table. Dreamweaver provides several methods for selecting a table. You will find that some methods are easier than others, depending on the complexity of the table structure. You can easily select a row, a column, or all the cells in a table. You can also select noncontiguous cells in a table and modify the properties of those cells. (You cannot copy or paste noncontiguous cell selections.) The following exercises demonstrate various selection methods. To select the entire table: 1. Select the second table by performing one of these actions: • Click the top-left corner of the table or anywhere on the bottom edge. The pointer turns to a cross (Windows) or a hand (Macintosh) when you are close to the edge. Wait until you see the pointer before you click. • Click once in the table and choose Modify > Table > Select Table. • Position the pointer anywhere inside the table and select the <table> tag in the tag selector at the bottom-left corner of the document window. Selection handles appear around the table when it is selected. When the table is selected, you cannot see the black border around any of the cells. 2. With the table selected, press Delete to remove the second table. To select rows or columns: Perform one of these actions: • Position the pointer at the left margin of a row or at the top of a column. Click when the selection arrow appears. • Click in a cell and drag across or down to select multiple rows or columns. To select one or more cells: Perform one of these actions: • Click in a cell and drag down or across to another cell. • Click in one cell. Then hold down Shift and click another cell. All cells are selected within the rectangular region defined by the two cells. To select noncontiguous cells: Perform one of these actions: • Press Control (Windows) or Command (Macintosh) and click to add cells, rows, or columns to the selection. • Select multiple cells in the table and then press Control (Windows) or Command (Macintosh) and click cells, rows, or columns to deselect individual cells. MACROMEDIA DREAMWEAVER 4 70 LESSON 4

To resize a column: • Move the pointer over one of the column borders. When the pointer changes to a two-headed arrow, drag the column border. To add a new row: • Click in the last cell of a row and press Tab or choose Modify > Table > Insert Row. You can also right-click (Windows) or press Control and click (Macintosh) in the table and choose Table > Insert Row from the context menu. To delete a row: • Click in the row and then choose Modify > Table > Delete Row. You can also right-click (Windows) or press Control and click (Macintosh) on the table and choose Table > Delete Row from the context menu. To add a row in the middle of the table: • Click in the row above where you want the new one. Then choose Modify > Table > Insert Row. You can also right-click (Windows) or Control-click (Macintosh) in the row above and choose Table > Insert Row from the context menu. To insert a row and control placement before or after the current row: • Choose Modify > Table > Insert Rows or Columns. A dialog box opens in which you can specify whether to insert before or after the current row. To span columns or rows: • Drag to select multiple cells and then click Merge Cells in the Property inspector. You can also choose Modify >Table > Merge Cells . To split a cell: • Select the cell, and then click Split Cell in the Property inspector or choose Modify > Table > Split Cell. This returns the number of cells to the original number if you previously merged them, or it can split a cell into any number of rows or columns. LESSON 4 71 MACROMEDIA DREAMWEAVER 4

To change the attributes of a row or column or cell: 1. Select one or multiple cells in the table. For this exercise, select the Location column. 2. Change the horizontal alignment in the Property inspector to Center, as shown in Figure 4-10. Leave the vertical alignment set to Default . Figure 4-10 The Property inspector with a column centered. 3. Select the Rating column and change the horizontal alignment to Right . 4. Following are definitions for the selections in the Cell, Column, or Row Property inspector: • Horz: Sets the horizontal alignment of the cell’s contents to the browser’s default (usually Left for regular cells and Center for header cells), left, right, or center. • Vert: Sets the vertical alignment of the cell’s contents to the browser’s default (usually Middle), top, middle, bottom, or baseline. • W and H : Sets the width and height of selected cells in pixels. To use percentages, follow the value with a percent sign (%). • Bg (top) : Sets the background image for the cells. • Bg (bottom): Sets the background color for the cells. Background color appears inside the cells only—that is, it does not flow over cell spacing or table borders. This means that if your cell spacing and cell padding are not set to zero, gaps will appear between the colored areas even if the border is set to zero. • Brdr: Sets the border color for the cells. • No Wrap: Prevents word wrapping, so cells expand in width to accommodate all data. Normally, cells expand horizontally to accommodate the longest word and then expand vertically. • Header: Formats each cell as a table header. The contents of table header cells are bold and centered by default. MACROMEDIA DREAMWEAVER 4 72 LESSON 4

SORTING TABLES You can perform a simple table sort by sorting on the contents of a single column. You can also perform a more complicated sort by sorting on the contents of two columns. You cannot sort tables that contain merged cells. The following exercise demonstrates sorting. To sort a table: 1. Select the table and then choose Commands > Sort Table. The Sort Table dialog box opens, as shown in Figure 4-11. Figure 4-11 The Sort Table dialog box. All the defaults will work for this exercise. The first row in your table contains the column headers—you don’t want to sort them. (Note that this is the default setting.) 2. Set the following options: • Sort By: Select the column to sort. For this exercise, select the first column. • Order: Choose whether you want to sort the column alphabetically or numerically. For this exercise, select Alphabetically. This option is important when the contents of a column are numerical. An alphabetical sort applied to a list of one- and two-digit numbers results in an alphanumeric sort (such as 1, 10, 2, 20, 3, 30) rather than a straight numeric sort (such as 1, 2, 3, 10, 20, 30). Choose Ascending (A to Z or low to high) or Descending for the sort order. • Then By: Specify sort options here to perform a secondary sort on a different column. • Sort Includes First Row: Select this option to include the first row in the sort. If the first row is a heading that shouldn't be moved (as in this exercise), leave this option unchecked. • Keep TR Attributes With Sorted Row: If you changed any attributes for a row, you can retain that attribute in the row by selecting this option. For example, suppose you sort a table with a color in the first row. After sorting, the data in the first row moves to the second row. If Keep TR Attributes With Sort Row is selected, the color moves with the data to the second row. If this option is not selected, the color remains in the first row. 3. Click Apply or OK . Your table is sorted alphabetically by the first column, but the row headers remain in the first row. LESSON 4 73 MACROMEDIA DREAMWEAVER 4

A table you create in HTML has all the tags needed to display the table in a browser. If you need to extract the table information to place it in a database, a spreadsheet, or a word processing or page layout application, you can’t just copy and paste the text. All you’ll get is the text with no row and column formatting. However, you can easily export the table and save the file as a tab-delimited file that can be read by most applications. To export a table: 1. Select the table. You can be in either Layout view or Standard view. 2. Choose File > Export > Export Table. The Export Table dialog box opens (see Figure 4-12). Figure 4-12 The Export Table dialog box. 3. In the Delimiter pop-up menu, choose a delimiter value for the table data. Your choices are Tab, Space, Comma, Semicolon, or Colon. Tab is the default and the most common. If you are not sure which option to use, choose Tab . 4. In the Line Breaks pop-up menu, choose line breaks for the operating system for which you are exporting the file: Windows, Macintosh, or UNIX. 5. Click Export . 6. In the dialog box that opens, type the name for your file. The file you are creating is an ASCII text file. You should add the .txt extension to the file name. MACROMEDIA DREAMWEAVER 4 74 LESSON 4

LESSON 5: ADDING USER INTERACTIVITY OBJECTIVES When you finish this lesson, you will understand • How to add user interactivity to your pages by using behaviors • How to attach behaviors to objects • How to modify parameters of behaviors and you will have learned • How to create rollovers • How to add multiple behaviors to one user action DEFINING A BEHAVIOR Behaviors are used to add interactivity to your pages, enabling your users to change or control the information they see. A behavior combines a user event (for example, moving the pointer over a graphic button) with an action or series of actions that take place as result of that event. Behaviors are prewritten JavaScript codes you can easily incorporate in your page when using Dreamweaver. You can specify more than one event to trigger a behavior, and more than one action for each event. Dreamweaver includes several predefined behavior actions. If you are proficient with JavaScript, you can add your own behaviors. You can also download new behaviors from the Dreamweaver Exchange Web site by choosing Help > Dreamweaver Exchange. If you have an Internet connection, your primary browser will open and you will be taken directly to the Web site. CREATING ROLLOVER BUTTONS The most common use of JavaScript on Web pages is for creating a rollover—an image that changes when the user moves the pointer over the image. You can create button rollovers in Dreamweaver without ever looking at the HTML or JavaScript code. Here are a few things to remember when designing rollover buttons for your page: • Create each image the same size. If you don’t, Dreamweaver resizes the second rollover image to the size of the first image. Resizing distorts the second image. • Make the buttons as small as possible. Remember, with rollovers you are displaying not one, but two images for the same button. The file size of the button is actually doubled, because you have two images to download. LESSON 5 75 MACROMEDIA DREAMWEAVER 4

USING INSERT ROLLOVER IMAGE Dreamweaver makes it easy to insert rollovers in your page. This option provides you with a field to name the image, so you won’t forget. If you haven’t already placed your initial images on the page, you might find this method preferable because it steps you through inserting and naming the images. To insert a rollover image: 1. Open the latest.htm file from the Lesson_05_Interactivity folder. This page contains a table with some graphics. Switch to Layout view to view the table structure. 2. Place the insertion point in the blank cell to the left of Welcome to Compass, then choose Insert > Interactive Images > Rollover Image. The Insert Rollover Image dialog box appears (see Figure 5-1). Figure 5-1 The Insert Rollover Image dialog box. 3. Type biking in the Image name text box. The name you type here must be a unique name. No other image on this page can have the same name. Use lowercase for the name, and don’t use any special characters or spaces in the name. 4. Click Browse next to the Original Image text box and select biking_button.gif in the Project_images folder in the Lesson_05_Interactivity folder. All the images you need for this exercise are located in that same folder. Click Select . 5. Click Browse next to the Rollover Image text box and select biking_button_f2.gif. Click Select . 6. If you want the graphic to be a link, click Browse next to the Link text box and find the file to link. If you’re not linking, leave this text box blank. For this exercise, select biking.htm from the Lesson_05_Interactivity folder. Click Select , and then click OK to close the dialog box. 7. Save your and test your file in the browser. MACROMEDIA DREAMWEAVER 4 76 LESSON 5

8. Add the remaining buttons: climbing_button.gif, diving_button.gif, and kayaking_button.gif using the Insert Rollover Image command. Separate each button with a new line. Place the insertion point after each image and press Shift-Enter (Windows) or Shift-Return (Macintosh). You don’t need to link these buttons. The final page should look like Figure 5-2. Note: The number sign (#) in a Link text box of the Property inspector causes the browser to change the cursor to the pointing hand when the user rolls over the button. Figure 5-2 The completed Adventure Travel page. LESSON 5 77 MACROMEDIA DREAMWEAVER 4

ADDING ROLLOVERS TO EXISTING IMAGES Using the Insert Rollover Image command makes it very easy to insert rollovers in your page. There may be instances where graphics are already placed on the page and you want to add rollovers. You could delete the graphics and use the Insert Rollover Image command to put them back on the page, but there is a possibility of changing the page design, especially if the graphics are in a table. In the next exercise, you will add rollovers to the buttons across the top of the page. To add rollovers to an image: 1. Select the Adventure Gear image and type gear in the Property inspector Name text box (see Figure 5-3). The Name text box is under the word Image in the top left of the Property inspector. Figure 5-3 The Name text box in the Property inspector. 2. Choose Window > Behaviors. The Behaviors panel opens. 3. Click the plus (+) button and choose Swap Image from the pop-up menu (see Figure 5-4). Figure 5-4 The Behaviors panel with the Actions pop-up menu displayed. MACROMEDIA DREAMWEAVER 4 78 LESSON 5

4. In the Swap Image dialog box, click Browse and select the Ad_gear_f2.gif image from the Project_images folder (see Figure 5-5). Click Select (Windows) or Open (Macintosh) and then click OK to close the Swap Image dialog box. Note: In the Swap Image dialog box, Dreamweaver selects the Preload Images and Restore Images on MouseOut options. Leave these options on. Preload Images loads the rollover image at the same time the visible image loads. This way the user does not have to wait the first time the user rolls over the image. Restore Images on MouseOut returns the button to the first image when the user rolls off the image. Figure 5-5 The Swap Image dialog box. 5. Save your file and preview in the browser. 6. Repeat steps 3–5 and add rollovers to the remaining buttons. Don’t forget to name each image before you add the Swap Image behavior. The rollover images end in “_f2.” LESSON 5 79 MACROMEDIA DREAMWEAVER 4

UNDERSTANDING EVENTS After you select an action, Dreamweaver adds that action to the Behaviors panel list box. Dreamweaver also adds an appropriate event (or events) for that action. The event is what causes the action to occur; for example, an event could be the user clicking a button. The action is the result of the user interaction. If you want to change the event, select the event in the Behaviors panel and then pick a new one from the pop-up menu (the arrow) to the right of the event (see Figure 5-6). The events in the pop-up menu might change depending on the action and the browser type you choose. The Events pop-up menu appears only after you add an action and select the event. Figure 5-6 The Events pop-up menu in the Behaviors panel. The Events pop-up menu is divided into two sections. In the top portion of the list, Dreamweaver displays the events that can be directly attached to objects. The bottom section shows, in parentheses, events that need an anchor placed around the object. MACROMEDIA DREAMWEAVER 4 80 LESSON 5

ADDING SEVERAL ACTIONS TO AN OBJECT After you define a user event, you can attach several actions to that event. To add another event, select the object with the first event and use the Behaviors panel to add another action. To change the order in which the actions are executed, use the up arrow or down arrow in the Behaviors panel (see Figure 5-7). Move Action Down Move Action Up Figure 5-7 The Behaviors panel with several actions assigned to one event. You can also have several images swap out with a single event. For example, you might want two images to swap out when the user rolls over one button. You might think you should create two separate Swap Image actions, but this behavior only works if you use the same Swap Image action for both images. The Swap Image Restore action restores only the last swapped image, so if you have two swap images, only the last one is restored. In the Swap Image dialog box, pick the first graphic and choose the image to swap. Then, before leaving this dialog box, pick the other image and choose its swapped image. For the next exercise you want two images to swap when the user rolls over the buttons on the left. You already have one of the rollovers done. Two actions need to occur on the same onMouseOver event. Instead of adding a new action, you edit the existing Swap Image action and add a new swap image. The graphics are in the Lesson_05_Interactivity/Project_images folder. To swap out two images on a rollover: 1. In the latest.htm file you’ve been using, select the “Welcome to Compass” graphic. This is the graphic you want to change when the user rolls over each of the buttons. 2. Name the image text. 3. Select the round biking image to the left. This image has a Swap Image behavior assigned. 4. Double-click the Swap Image action in the Behaviors panel. The Swap Image dialog box opens. 5. Select “text” in the list. LESSON 5 81 MACROMEDIA DREAMWEAVER 4

6. Click Browse and select biking_text.gif from the Project_images folder, and then click Select (Windows) or Open (Macintosh). Before you click OK to exit the dialog box, look at the Images list in the Swap Image dialog box as shown in Figure 5-8. Images that have an asterisk at the end of the name have been assigned a swap image. This is a quick way to verify which images will swap to other images. Figure 5-8 The Swap Image dialog box with two swap images assigned. 7. Repeat steps 4–6 for all the round buttons. 8. Save your file again and test in the browser. When you roll over each button, the button should swap and an image should swap in the Welcome area. When you roll off the button, both the button and the Welcome text graphic should restore to their original images. 9. Close your file. MACROMEDIA DREAMWEAVER 4 82 LESSON 5

LESSON 6: MANAGING YOUR SITE OBJECTIVES When you finish this lesson, you will understand • The purpose and uses of the Site window • Why you should perform site management functions within the Site window • The difference between a local site and a remote site and you will have learned • How to use the Site window to perform site management functions • How to customize the Site window • How to set up a connection to a remote site • How to copy files to and from a remote site USING THE SITE WINDOW The Site window displays the file and folder structure of your site. You can add and delete files or folders, rename files and folders, and move files and folders. By doing file maintenance within the Site window, you are assured that your link information stays correct. Conversely, if you make file or folder changes within Windows Explorer (Windows) or Finder (Macintosh), Dreamweaver doesn’t recognize the changes and can’t keep your links correct. To access the Site window: • Do one of the following: • Choose Site > Open Site and select your site from the list. • Click Show Site on the Mini-Launcher. LESSON 6 83 MACROMEDIA DREAMWEAVER 4

The Site window opens, showing only your local files (see Figure 6-1). Site Files Site Map Figure 6-1 The Site window. The default settings place your local files in the right pane of the Site window. When you connect to the remote site, the remote files appear in the left pane. Following are the options in the Site window: Connect/Disconnect: Connects to or disconnects from the remote site. By default, Dreamweaver disconnects the remote site if it has been idle for more than 30 minutes. Use Edit > Preferences to change the time limit. Refresh: Refreshes the local and remote directory lists. Get File(s): Copies the selected files from the remote site to your local site, overwriting any existing local copies. The files remain available on the remote site for other team members to check out. Note: If Enable File Check-in and Check-out is turned off in the Site Definition dialog box, getting a file transfers a copy of the file with both Read and Write privileges. Put File(s): Copies the selected files from the local site to the remote site without changing the file’s checked-in or checked-out status. Check Out File(s): Transfers a copy of the file from the remote server to your local site, overwriting any existing copies. The file is marked as “checked out” on the server. The Check Out feature makes collaborating on a Web site easier. You can check in and check out files on the remote server; others can then tell when you’re working on a file and know not to edit that file at the same time. This option is not available if file check-in and check-out is turned off for this site. Check In File(s): Transfers a copy of the local file to the remote server and makes the file available for editing by others. The local file becomes read-only. This option is not available if file check-in and check- out is turned off for this site. MACROMEDIA DREAMWEAVER 4 84 LESSON 6

ADDING NEW FILES OR FOLDERS TO A SITE You can easily add new pages and folders to your site directly from the Site window. To add a new file or folder to a site: 1. In the Local Folder pane of the Site window, right-click (Windows) or Control-click (Macintosh) the Lesson_06_Sites folder. A context menu opens, as shown in Figure 6-2. Figure 6-2 The Site window’s context menu. 2. Choose New File . A new, unnamed document is added to the Lesson_06_Sites folder. The name field is highlighted, indicating that you need to type a name for this document. 3. Type kayaking.htm and press Enter (Windows) or Return (Macintosh) to name the new file. Don’t forget the .htm extension for the file name. When you save a file in Dreamweaver, the extension is added for you. When you add a file in the Site window, you need to type the complete file name. Note: To add a new folder instead, choose New Folder from the context menu, and then type the folder name. LESSON 6 85 MACROMEDIA DREAMWEAVER 4

CREATING A SITE MAP A site map gives you a visual representation of your site and all its linked pages. You can save the site map as a graphic to be used in documentation. To create a site map you must first select your home page. To define your home page: 1. In the Local Folder pane of the Site window, select Lesson_06_Sites/home.htm. 2. Do one of the following: • Choose Site > Set As Home Page (Windows) or Site > Site Map View > Set as Home Page (Macintosh). • Right-click (Windows) or Control-click (Macintosh) the file and choose Set As Home Page from the context menu. You will not see the result of this command until you create the site map. After you define the home page, you can create the site map. To create the site map: • In the Site window, click Site Map (see Figure 6-3) or choose Window > Site Map. Site Files Site Map Figure 6-3 The Site Map icon. MACROMEDIA DREAMWEAVER 4 86 LESSON 6

The site map is a graphical representation of your entire site, with the home page displayed at the top level (see Figure 6-4). A link from one page to another is shown by a connecting line with an arrowhead. Pages containing links are displayed with a plus or minus sign (Windows) or a right- or down-pointing arrow (Macintosh). Clicking the plus sign (Windows) or arrow (Macintosh) displays the linked pages. If a link appears in red type, the link is broken. Special links such as e-mail links or URLs are blue and display a small globe. Figure 6-4 The site map. By default, Dreamweaver displays the site map horizontally. If the home page has many links, the site map may not have enough room to show all the pages. You can change the number of columns and the column width to make the site map fit a single page for printing. You can also switch the layout to a vertical format. To view the site map vertically: 1. In the Site window, choose View > Layout (Windows) or Site > Site Map View > Layout (Macintosh). The Site Definition dialog box opens, showing the Site Map Layout options. 2. In the Number of Columns text box, type 1 and then click OK . The site map is regenerated to show all the linked pages in a single column. LESSON 6 87 MACROMEDIA DREAMWEAVER 4

You can save the site map as a graphic. On Windows platforms, the site map graphic is saved as a BMP or PNG file. On Macintosh computers, you choose whether to save the graphic in PICT or JPEG format. To save the site map as a graphic: 1. Choose File > Save Site Map (Windows) or Site > Site Map View > Save Site Map > Save Site Map as JPEG (Macintosh). The Save Site Map dialog box opens. 2. In the File Name text box, type compass_site.bmp (Windows) or compass_site.jpg (Macintosh) and then click Save . The site map is saved as a graphic that can be printed or viewed in an image editor. VIEWING A SUBSET OF THE ENTIRE SITE As your site becomes larger and more complex, the site map might become too big to see in the Site window. You can refine the view to show just a selected page and its links. To view the site from a branch: 1. Select the map.htm page on the site map. You may need to scroll to see this page. 2. Choose View > View as Root (Windows) or Site > Site Map View > View as Root (Macintosh). The site map changes to show the map.htm page as the root (the top level) and its links (the second level). MACROMEDIA DREAMWEAVER 4 88 LESSON 6

To remove the branch: • Below the site map icon is a gray bar displaying site navigation (see Figure 6-5). For this exercise you should see: home.htm ➔ map.htm. Click the Dreamweaver icon to the left of home.htm, the home page for this site. The site root is returned to your home page. Site Navigation Figure 6-5 Site Navigation in the Site window. LESSON 6 89 MACROMEDIA DREAMWEAVER 4

MODIFYING PAGES FROM THE SITE WINDOW As you view pages on the site map and move the pointer over the pages on the map, you’ll see information about each page in the status area (at the lower left) of the Site window. One of the pieces of information is the title of the page. If you have forgotten to title the page or want to change the title, you can do it in the Site window. To modify the title of a page on the site map: 1. On the site map, place the pointer over biking.htm. The status area shows that the document is untitled. Make sure you roll over the file name, not the icon of the file. 2. Choose View > Show Page Titles (Windows) or Site > Site Map > Show Page Titles (Macintosh) to see page titles instead of file names on the site map. 3. Click the page title to select it. Then click the title again. A rectangle is placed around the title to indicate that it is editable. 4. Type Mountain Biking and press Enter (Windows) or Return (Macintosh). The site map shows the new title. MACROMEDIA DREAMWEAVER 4 90 LESSON 6

OPENING FILES IN THE SITE WINDOW You can open a page for editing from either the site map or the site files list. To open a file in the Site window: • Do one of the following: • On the site map, double-click Surfing in California. • In the Local Folder pane, double-click surfing.htm. The surfing.htm document opens and is available for modification. RENAMING FILES IN THE SITE WINDOW If you need to change the name of one of your files, change the name in the Site window. This preserves the link information maintained by Dreamweaver. If you change the file name outside of Dreamweaver in either a HTML file or graphics file, Dreamweaver has no way to track your changes. If you make the change within the Site window, Dreamweaver updates all pages that link to the file or contain the graphic. To change a file name in the Site window: 1. In the Local Folder pane of the Site window, select trips.htm. The file name is highlighted. 2. Click the file name. A rectangle appears around the name, indicating it is editable. 3. Change the file name to na_trips.htm and then press Enter (Windows) or Return (Macintosh). The Update Files dialog box opens, listing all the files affected by this name change, as shown in Figure 6-6. Figure 6-6 The Update Files dialog box. 4. Click Update to update the files with the new file name. The site map and site files list now show the new name. Note: Dreamweaver opens each file in the list, makes the change, and then closes the file. If a file in the list is currently open, Dreamweaver makes the change but does not save or close the file. LESSON 6 91 MACROMEDIA DREAMWEAVER 4

MOVING FILES IN THE SITE WINDOW If a file or folder is not in its proper place, you can easily move the file or folder to its correct location. Doing this in the Site window ensures that all the link information remains correct and intact. To move a file in the Site window: 1. In the Local Folder pane of the Site window, open the Biking Images folder in Lesson_06_Sites Only one image, downhill.jpg, is in the folder. 2. Drag the image’s icon to the Images folder located just below the Biking Images folder. The Update Files dialog box opens, asking if affected files should be updated. 3. Click Update to keep the link to this graphic correct. The graphic moves to the Images folder. CUSTOMIZING THE SITE WINDOW The information displayed in the Site window may not be as useful to you as you might like. You can reorder existing information, show or hide columns, or even add your own columns. To customize the columns of the Site window: 1. In the Site window, choose View > File View Columns (Windows) or Site > Site Files View > FIle View Columns (Macintosh). The Site Definition dialog box opens, showing the File View Columns category, as shown in Figure 6-7. Figure 6-7 The File View Columns category of the Site Deﬁnition dialog box. MACROMEDIA DREAMWEAVER 4 92 LESSON 6

2. Select Size from the list and then click the down arrow located in the upper right of the dialog box. ”Size” moves down in the list. 3. Select Modified from the list and then deselect Show. “Hide” appears in the Show column. 4. Click the plus (+) button in the upper right of the dialog box. In the Column Name text box, type Priority. Then click OK . A new column called “Priority” is added to the bottom of the list and the columns of the Site window change to reflect your choices. Notice that the modification date no longer shows. Hint: You can use the scroll bar at the bottom of the pane to see all the columns. SWITCHING SITES If you are working on several sites, you must switch sites to access files in other sites. (You have only one site defined, so this information is presented as reference material only.) To switch to another site: 1. Choose Site > Define Sites . The Define Sites dialog box opens. 2. Select another site and then click Done to close the dialog box. LESSON 6 93 MACROMEDIA DREAMWEAVER 4

CONNECTING TO A REMOTE SITE In Lesson 1, you created a local site—that is, a folder on your hard drive to store all the folders and files needed for your site. You’ve been working in the local site, developing pages and testing links. For visitors to see your Web pages, however, you need to copy them to a remote site. Typically, the remote site is on a server specified by your Web administrator or client, but it could also be on a local network. After creating your local site, you choose which remote site to connect to and the attributes of that remote site. To simulate a remote FTP site, you will create a “remote” site on your desktop. This will enable you to experiment with the Get and Put functions during class without the possibility of corrupting an actual remote site. To set up a connection to a remote site: 1. Choose Site > Define Sites. The Define Sites dialog box opens, as shown in Figure 6-8. Figure 6-8 The Deﬁne Sites dialog box. 2. Select your site from the list and click Edit . The Site Definition dialog box opens (see Figure 6-9). Figure 6-9 The Site Deﬁnition dialog box. MACROMEDIA DREAMWEAVER 4 94 LESSON 6

3. In the Category list on the left, select Remote Info . 4. From the Access pop-up menu, select Local/Network . 5. Click the folder icon to specify the Remote Folder. The Choose Remote Folder dialog box opens. 6. Select Desktop from the pop-up menu and then click Create New Folder (Windows) or New (Macintosh). 7. Type MyRemote as the folder name and then select it. • For Windows: Click Open and then click Select to make the MyRemote folder the remote folder for this site. • For Macintosh: Click Choose . The folder is selected as the remote folder. 8. Click OK to save your site information. 9. Click Done to close the Define Sites dialog box. LESSON 6 95 MACROMEDIA DREAMWEAVER 4

UPLOADING FILES If you’ve selected FTP or Local/Network access to connect to your remote site, you can use Dreamweaver to check which are the newest files in your local site. This way, you can update only files that have changed. To select and upload new files only: 1. In the Site window, click Connect to connect to the remote server. Connect logs you on to a remote server. For this class you’ve defined a local folder; therefore the Connect button is not active. 2. In the Local Folder pane, select the top-level folder. 3. Choose Edit > Select Newer Local (Windows) or Site > Site Map View > Select Newer Local (Macintosh). Dreamweaver compares the modification dates of all local files to the corresponding file information at the remote site and selects only the newer local files. 4. Click Put File(s) to upload only the selected files to the server. The Dependent Files dialog box opens, as shown in Figure 6-10. Your choices are Yes, No, or Cancel. Yes sends the images on the selected page, along with the HTML page, to the server. No sends only the HTML page. If you have made changes only to the HTML page and the images are already on the server, there is no reason to re-send the images so you would click No. If you have modified an image or added an image to the page, you would click Yes. Note: There is also a Don’t Ask Me Again check box. If the student before you has checked this option, you will not see the Dependent Files dialog box. Figure 6-10 The Dependent Files dialog box. 5. Click Yes if you see the dialog box. All the files in the Local Folder are copied to the remote site in the Site window. This option could take a long time, depending on the size of your site, so be prepared to wait. If you have only made changes to a few files, you might find it quicker to manually select the updated files and upload them. MACROMEDIA DREAMWEAVER 4 96 LESSON 6

CONNECTING TO A REMOTE FTP SITE FTP access is commonly used to get files from or put files on a remote site. Because there is no remote FTP site to connect to during class, the following information is presented as reference material only. Consult your network administrator to set these options correctly. Choose FTP from the Server Access pop-up menu in the Site Definition dialog box, as shown in Figure 6-11. Figure 6-11 FTP settings in Site Deﬁnition dialog box. FTP Host: The host name of your Web server: for example, ftp.everyone.com or www.mysite.com. Host Directory: The directory on the remote site where documents visible to the public are stored. Also known as the site root. Login and Password: Your login name and password on the server. If you deselect the Save option, you’ll be prompted for a password when you connect to the remote site. Use Passive FTP: Select when you have a firewall between you and the server. Use Firewall: Select if you are connecting to the remote server from behind a firewall. LESSON 6 97 MACROMEDIA DREAMWEAVER 4

NOTES: MACROMEDIA DREAMWEAVER 4 98 LESSON 6

macromedia

by JustinTimb

Accessibility

Categories

Upload Details

Usage Rights

Statistics

macromedia Document Transcript