Macromedia's Dreamweaver is a sophisticated and powerful tool that allows new and power users alike to build Web sites without spending a lot of time writing code. However, many people don't know how to use its complex features to their advantage. In this latest revision of Peachpit's popular Dreamweaver for Windows and Macintosh Visual QuickStart Guide, author J. Tarin Towers unveils Dreamweaver 3's core features step by stepincluding using Dreamweaver for site management, building great pages with rollovers, frames, forms, and tables, and finally getting your work online. New program features, such as Jump Menus, HTML Styles, and the Quick Tag Editor are covered in depth, and the book is loaded with tips and accompanying graphics. This edition has four additional chapters20 in totaland more coverage of Mac issues in its cross-platform approach. If you're a Dreamweaver user, you'll want to have this handy and affordable reference tool at your side.
About the Author
J. Tarin Towers has contributed as a writer and technical editor to more than a dozen books about computers and the Internet. As an editorial consultant, she has worked with such companies as Netscape Communications, Microsoft, Informix Software, and infoseek. She is also a published poet and essayist.
Read an Excerpt
Chapter 1: Dreamweaver TerminologyThe various components that comprise Dreamweaver are called windows, palettes, and inspectors. Although all of these items are available from the Window menu (Figure 1.2), they are not all called windows.
A window, in Dreamweaver, is a stand-alone screen element that will show up on the Windows status bar (the Mac doesn't display windows separately in the Applications menu). The Document window is one example of a window, and the Site window is another.
You can have multiple document windows open; the filename for each will appear at the bottom of the Window menu (Figure 1.3).
The miniature, floating windows that are used to adjust particular sets of properties are called either inspectors or palettes. These are similar to the palettes and inspectors you may have used in other multimedia creation programs, such as Photoshop, PageMaker, or Director.
In general, an inspector changes appearance based on the current selection, whereas a palette controls elements, such as styles or library items, that are available to the entire current site.
You can control your workspace by moving any of these windows, or by closing them to get rid of them altogether.
- To view or hide any window, palette, or inspector, select its name from the Window menu. Keyboard shortcuts for each palette are listed in the Window menu.
- Read the sidebar Stacking Palettes, later in this chapter, to find out how to save screen space.
Just click on the X in the upper-right corner (Windows). On a Mac, click on the close box in the upper-left corner.
- Dreamweaver will remember where your windows are when you exit the program. When you start Dreamweaver again, your window preferences will remain the way they were when you last exited (Figure 1.4).
- To move the floating windows back to their original, default positions, select Window > Arrange Floating Palettes from the Document window menu bar (Figure 1.5).
- You can hide all of the floating windows, select Window > Hide Floating Palettes from the Document window menu bar, or press F4 (Figure 1.6).
2. In the Category box at the left of the window, click on Floating Palettes. The Floating Palettes panel of the dialog box will come to the front (Figure 1.7).
3. This panel of the dialog box includes a 4. When you're done, click on OK to close the Preferences dialog box and return to the Dreamweaver window.
The Document Window
The Document window (shown in detail on the next page in Figure 1.11) is the main center of activity in Dreamweaver. Since Dreamweaver is a WYSIWYG HTML tool, the Document window approximates what you'll see in a Web browser window. The title bar displays the filename and the title of the current Web page. All Dreamweaver menu commands are available from the Document window menu bar. The body of the HTML document is displayed in the main viewing area of the Document window. The status bar indicates three things about the current document: The tag selector displays all the HTML tags that apply to the current selection. The window size indicator displays the current size of the Document window. The numbers will change if you resize the document window; you can select a preset window size by clicking the down arrow in this area to display a pop-up window (Figure 1.8).
The download stats area displays the total size, in K (kilobytes), of the current page, and the amount of time it would take to download over a 28.8 Kbps modem. The Launcher bar, also in the status bar, includes the same buttons as the Launcher, which is discussed later in this chapter in the section called The Launcher.
To hide the status bar: 1 From the Document window menu bar, select View > Status bar. The status bar will disappear (Figure 1.9)...
Table of Contents
|Chapter 1||Getting Started||1|
|The Document Window||5|
|Customizing the Document Window||7|
|The HTML Inspector||10|
|The Properties Inspector||14|
|The Objects Palette||20|
|Chapter 2||Basic Web Pages||25|
|Opening and Creating HTML Files||27|
|Saving Your Work||29|
|Saving a Copy of a File||30|
|Colors and Web Pages||32|
|Modifying the Page Background||36|
|Setting the Text Colors||38|
|Previewing in a Browser||39|
|Printing from the Browser Window||40|
|Chapter 3||Setting Up a Local Site||41|
|The Site window||43|
|Setting Up a Local Site||44|
|Editing and Deleting Local Sites||47|
|Site window Tips & Shortcuts||48|
|Chapter 4||Editing HTML||51|
|Using the HTML Inspector||56|
|Using the Quick Tag Editor||58|
|Selecting Parent and Child Tags||63|
|Setting HTML Preferences||66|
|Cleaning Up HTML||69|
|Chapter 5||Working with Text||75|
|Changing Font Size||77|
|Using Text Styles||81|
|Physical Text Styles||83|
|Logical Text Styles||84|
|Changing Font Face||85|
|Special Characters in HTML||90|
|Find and Replace||92|
|Checking Your Spelling||95|
|Chapter 6||Paragraphs and Layout||97|
|Paragraphs versus Line Breaks||98|
|The Nonbreaking Space||112|
|Chapter 7||Creating HTML Styles||115|
|Applying HTML Styles||117|
|Creating New Styles||120|
|Using the Styles File||125|
|Chapter 8||Working with Images||127|
|Placing an Image||128|
|Selecting an Image||129|
|The Properties Inspector||130|
|Page Loading Properties||137|
|Chapter 9||Working with Links and URLs||143|
|Using Named Anchors||153|
|Using Navigation Bars||157|
|Changing Link Colors||167|
|Smart Linking Strategies||168|
|Chapter 10||Working with Tables||169|
|Setting Up Tables||170|
|Adding Content to a Table||172|
|Changing Table Size and Layout||175|
|Adjusting the Table Size||181|
|Converting Percentages and Pixels||184|
|Creating a Table within a Table||185|
|Working with Table Borders||186|
|Adjusting Table Spacing||187|
|Adjusting Content Spacing||189|
|Inserting Tabular Data||193|
|Sorting Table Contents||196|
|Chapter 11||Using Frames||197|
|Frames and Navigation||198|
|Setting Up a Frames Page||199|
|Creating Frames by Dragging||200|
|Quick and Dirty Frames||201|
|The Frames Inspector||203|
|Modifying the Frame Page Layout||204|
|Deleting a Frame||205|
|Setting Column and Row Sizes||208|
|Setting Content Pages||210|
|Creating Content within a Frame||211|
|Saving Your Work||212|
|Saving the Frameset Page||213|
|Creating No-Frames Content||223|
|Chapter 12||Filling Out Forms||227|
|Adding Form Objects||230|
|Names and Values||231|
|Making It Go||249|
|Chapter 13||Stylin' with Style Sheets||251|
|In This Chapter||252|
|How Style Sheets Work||253|
|Kinds of Style Sheets||254|
|Creating a Style||256|
|Defining New Selectors||259|
|Linked and Imported Style Sheets||263|
|Editing Style Sheets||266|
|Applying Style Classes||268|
|About Conflicting Styles||269|
|Chapter 14||Layers and Positioning||285|
|X, Y and Z Coordinates||286|
|Absolute vs. Relative Positioning||287|
|Other CSS Attributes Related to Positioning||290|
|About the Layers Inspector||291|
|About the Grid||291|
|About the Rulers||291|
|Deleting a Layer||295|
|Renaming a Layer||295|
|Nesting and Overlapping Layers||300|
|Changing Layer Visibility||302|
|Content and Layers||306|
|Layers and Styles||307|
|The Clipping Area||308|
|Setting a Background||311|
|Netscape's Layer Tags||314|
|Additional Netscape Layer Properties||315|
|Converting Layers to Tables (and Vice Versa)||317|
|Using a Tracing Image||320|
|Chapter 15||Behavior Modification||323|
|Set Text of Status Bar||335|
|Go to URL||336|
|Open Browser Window||338|
|Control Shockwave or Flash||349|
|Adding New Scripts and Behaviors||365|
|Chapter 16||Drawing Timelines||369|
|What Timelines Can Do||370|
|The Timelines Inspector||371|
|Dissecting the Timelines Inspector||372|
|Adding a Layer to a Timeline||374|
|Showing and Hiding Layers||379|
|Changing the Z-index||380|
|Changing the Timing||381|
|Changing Layer Dimensions||382|
|Adding an Image to a Timeline||383|
|Adding a Behavior to a Timeline||385|
|Making Timelines Go||386|
|Loop and Rewind||389|
|Adding and Removing Frames||392|
|Using Multiple Timelines||393|
|Deleting a Timeline||397|
|Bringing It All Together||398|
|Chapter 17||Automating Dreamweaver||401|
|What Library Items Do||404|
|Creating a Library Item||405|
|Adding an Existing Library Item to a Page||406|
|Editing Library Items||407|
|Renaming a Library Item||409|
|Deleting a Library Item||410|
|Re-creating a Library Item||411|
|Updating Your Site||412|
|Using Server-Side Includes||414|
|Changing SSI Viewing Options||417|
|Setting Template Page Properties||421|
|Setting Editable Regions||423|
|Creating Pages Based on a Template||424|
|Detaching a Page from a Template||425|
|Attaching an Existing Page to a Template||426|
|Using Editable Regions||427|
|Highlights for Templates||428|
|Renaming and Deleting Templates||429|
|Exporting as XML||432|
|The History Palette||436|
|Repeating and Undoing Actions||438|
|Copying and Pasting Steps||442|
|Saving Steps as Commands||444|
|Setting the Number of Stored Steps||447|
|Clearing the History List||448|
|Chapter 18||Customizing Dreamweaver||449|
|Editing Dreamweaver Menus||455|
|About the Menus.xml File||458|
|About Menu Items||460|
|Rearranging Menu Items||462|
|Deleting a menu item||463|
|Adding a Separator||463|
|Changing Keyboard Shortcuts||464|
|Customizing Dialog Boxes||467|
|Chapter 19||Plug-ins and Active Content||469|
|Using Sound Files||471|
|Sound File Parameters||474|
|Shockwave and Flash||478|
|Chapter 20||Managing Your Web sites||487|
|Connecting to a Remote Site||491|
|Getting and Putting||492|
|Refreshing and Switching Views||494|
|Checking In and Checking Out||496|
|Using Site Maps||501|
|Site Map Icons and Tips||503|
|Drawing Links in the Site Map||504|
|Setting Up Design Notes||505|
|Using Design Notes||506|
|Site FTP Preferences||509|
Dreamweaver isn't just another visual HTML tool. It does do what all the best editors do: creates tables, edits frames, and switches easily from page view to HTML view.
Dreamweaver 3 introduces several new features that simplify page production. And this book includes four new chapters to keep up. The last chapter in the Dreamweaver 2 book was about setting up and managing Web sites using the Site window. I've moved coverage of how to set up a local site to the new Chapter 3. Chapter 20 includes new sitemanagement features, such as design notes and the streamlined site updating features.
Dreamweaver's new features include the following:
Quick Tag Editor (Chapter 4): If you'd like to be able to add, edit, or remove tags while staying in the Document window, the Quick Tag editor will be your new friend. Chapter 4 is new, too, and it's all about HTML.
Clean Up Word HTML (Chapter 4): They figured out that Word always makes the same mistakes when it saves files as HTML, and they figured out how to fix them, too.
Special Characters (Chapter 6):Dreamweaver now includes direct support for special characters (such as c) in the Objects palette and the Insert menu.
HTML Styles (Chapter 7): Because CSS hasn't yet taken off the way experts predicted, formatting text with font tags is still what most webmasters prefer. With HTML styles, you can save sets of text properties as reusable, named styles in the HTML styles inspector.
Navigation Bars (Chapter 9): Dreamweaver now offers a dialog-box level method for inserting button rollovers that can have up to four different visible states.
E-mail Links (Chapter 9): A new Insert menu object is a dialog box for inserting e-mail links. New menu items for Insert > Link and Remove > Link appear there, too.
Who Should Use This Book?
No matter what your level of Web experience, you can use Dreamweaver and this book. I'm assuming you've used some sort of page-creation tool before, even if it's just a text editor. You should use this book if you're:
- An absolute beginner who wants an editor that writes great HTML.
- A graphic designer who's used to using document editors like Director, PageMaker, or Photoshop, but who isn't as proficient with HTML.
- An HTML expert who likes to hand code but wants automation of simple tasks.
- Frightened of Dynamic HTML.
- Someone who needs to learn Dreamweaver quickly.
I use sidebars to point out `extra" information about specific features, including HTML tricks that aren't directly supported by Dreamweaver.
This sidebar is about browser wars. I've made every effort to be fair to both the powerhouse browsers, Netscape Navigator (which I usually call Navigator, or just NN) and Microsoft Internet Explorer (called MSIE, IE, or sometimes Explorer). I also point out important differences between them, which are most apparent when talking about 4.0 browsers.
Browsers are like sausage: No one should have to know how they're made. I was, however, employed for Netscape at one point; for Microsoft, I wrote reviews of bars and cocktail lounges. (Full disclosures are in vogue right now)
When I wrote the first edition of this book, the browser wars made it seem likely that the year 2000 would bring, if not the apocalypse, then version 6.0 of something. Navigator is still on edition 4.7, and Explorer 5.0 added Netscape-level security, more user customization, and not much else.
Interestingly enough, the first version of Dreamweaver was lauded for the ease it granted Cascading Style Sheets and layers. Ironically, computer prices dropped so much that more people than ever started using 4.0 browsers-and these 4.0-only features were abandoned by a lot of designers for their clunkiness, their browser incompatibility, and their backwards noncompatibility
Dreamweaver does make it easy to write 4.0 pages and save them as 4.0 code. But on a small farm in the middle of nowhere, my grandpa is surfing the Web using Windows 3.1 and a ball of twine.
Import/Export Table Data (Chapter 10): Import database or spreadsheet information into a table in Dreamweaver, or export table data from Dreamweaver into a data file.
New Behaviors (Chapter 15): Set new content for a layer or a frame when a user performs an event.
History Palette (Chapter 17): Dreamweaver now tracks your actions in the Document window, and not just for multiple Undos. In the History palette, you can redo any action, even on a different object than your initial selection. And you can save an action or set of actions as an entry in the Commands menu.
Objects Support (Chapter 18): Adding custom objects to the Insert menu and the Objects palette is easier than ever.
Customizable Menus (Chapter 18): By editing a single XML file, you can change the content of the menus on any palette or menu bar in Dreamweaver.
Customizable Dialog Boxes (Chapter 18): You can change the appearance of most of Dreamweaver's dialog boxes.
Design Notes (Chapter 20): Design notes are files that let you save comments, dates, and other, perhaps proprietary data about pages and media objects on your local site or in your workgroup's file server.
Synchronize Files (Chapter 20): It's even easier now to select and Get or Put the more recent files on a local or remote site.
Improved Site Updating (Chapters 3, 9, 17, and 20): Loads of features, either new or streamlined, make it easier to keep your site-and its links and objects-up-to-date.
If you've read a previous Visual QuickStart Guide, you know that this book is made up of two main components: numbered lists that take you step by step through the things you want learn, and illustrations that show you what the heck I'm talking about.
I explain what needs to be explained, but I don't pontificate about the acceleration of information technology or wax dramatic about proprietary tags.
- In every chapter, you'll find tips like these that point out something extra handy.
- Code in the book is setoff in code font.
- Sometimes you can find extra tidbits of info in the figure captions, too.
But Wait, There's More on the Web Site!
The companion Web site for this book contains lots and lots of links to developers' pages, handy shareware tools, and example sites, and because the page is on the Web, you don't have to type in a bunch of URLs. You'll also find online appendixes covering the image map editor, HTML preferences, and browser compatibility. I also include my own sample pages, along with some DHTML I made just for this book. (You can only see the DHTML stuff if you're using a 4.0 or later browser, but the site is open to everyone, and I made it all using Dreamweaver, naturally.)
and let me know what you think of the book and the Web site by e-mailing firstname.lastname@example.org.
What's in this Book
Here's a quick rundown of what I cover in this book.
In the first four chapters I introduce you to HTML and the Dreamweaver interface. If you never want to look at any HTML when you use Dreamweaver, you don't have to; on the other hand, if you want to learn HTML, there's no better way than by creating a page and looking at the code you just made. The new Chapter 3 walks you through setting up a local site, so that all of Dreamweaver's site management, linking, and updating tools will work for you. The new History palette lets you repeat or undo almost anything. Chapter 18 introduces you to customizing Dreamweaver by editing object files, menus, and other interface elements.
Web Page Basics
Chapters 5-7 talk about text and all the things you can do with it, and Chapter 9 describes linking in more detail than you thought possible. Chapter 8 gets you on your way with images-and Appendix A, on the Web site for this book, describes how to make client-side image maps with the image map editor.
Tables, Frames, and Forms
Chapters 10-12 are what most folks consider the "intermediate" range in HTML-10 is tables, 11 is frames, and 12 is forms, all of which are much easier to construct in Dreamweaver than by hand.
Chapter 17 discusses three ways of automating common tasks in Dreamweaver: libraries, templates, and history. Libraries are a sitemanagement tool, whereas you use custom objects to modify Dreamweaver's Insert functions. The template feature in Dreamweaver allows you to create versatile templates with read-only design features, and you can update the design of pages based on these templates just by updating the template file. In the new Chapter 4, you'll even learn how to edit it in its own window; or, using the Quick Tag editor, how to edit it without even looking at the code, per se.
In Chapter 19, you'll learn everything you need to know about putting plug-ins and other multimedia content on your site. Appendix B on the companion Web site describes how to make your Web pages work and look the way you want them to in all kinds of browsers. And Chapter 20 is all about site management with Dreamweaver's Site window, a full-fledged FTP client.
HTML is HTML
Like the song, HTML remains the same, whether you construct it on a Mac or PC. Even better, Dreamweaver's Roundtrip HTML feature ensures that HTML you create outside the program will retain its formatting-although obvious errors, like unclosed tags, will be fixed.
The PC version of Dreamweaver comes with HomeSite, and the Mac version comes with BBEdit. You can set up either program to work with any HTML editor you like, however. See Appendix D, on the companion Web site for this book, to find out how to set up these editors and how Dreamweaver will treat your HTML.
Special to Mac Users
The main difference between the Mac and Windows flavors in previous versions of Dreamweaver was that the Mac, having only one menu bar, featured a Sites menu in the Document window. Now Windows features the same menu. The differences are negligible, as you can see in Figures 1 and 2.
There are some basic platform differences that will cause the screen shots to look slightly different. Windows windows (ha ha) have a menu bar affixed to each and every window, whereas the Mac menu bar is always at the top of the screen, and it changes based on the program you choose from the Application menu (the one in the upper left of the Mac screen, next to the clock).
Windows windows close by clicking on the close box on the upper right, whereas close boxes on the Mac are on the upper left. Occasionally, buttons will have different names. For instance, in some dialog boxes, the button says Browse in Windows and Choose on the Mac. They're always close enough.
When I refer to key commands, I put the Windows command first and the Mac command in parentheses, like this: Press Ctrl+L (Command+L)
I use this format for some other differences, too, like system fonts:
The source code uses the Courier New (Courier) font face.
Some Mac mice have more than one button; some don't. For that matter, some folks don't really use mice at all, they have those touchpad and stylus thingies. That said, I do refer to right-clicking a lot. On a Windows machine, when you click the right rather than the left mouse button, a contextual pop-up menu appears (Figure 3).
Pop-up menus, or context menus, are available in some Mac systems. To make a pop-up menu appear on a Mac, or in system 8x, try Ctrl+clicking. Your mileage may vary depending on your system configuration. Options available from pop-up menus are always available as menu bar options, too, so you'll never miss functionality in Dreamweaver even if you can't right-click.
And now... on to the hook!