Dreamweaver MX: The Missing Manual

Content preview·Buy reprint rights for this chapter

Dreamweaver MX is a program for producing and managing Web sites. Whether you need a simple five-page Web site to let your friends know about your upcoming dance party, or a thousand-page e-commerce system with database connections and dynamically generated content, Dreamweaver MX can help. It lets you build Web pages and sites quickly and maintain them with ease. It also lets you add interactive behavior and advanced Web technologies like Cascading Style Sheets, and Dynamic HTML.

The MX version of Dreamweaver is really two programs in one.

First, it's the latest version of Dreamweaver itself, complete with all of the fabulous layout, design, and productivity tools that made a hit of Dreamweaver 4 and its predecessors.

Second, it incorporates the program formerly known as Dreamweaver UltraDev. This program, once sold separately, offers advanced programming technology for data-driven Web sites.

These two newly merged programs add up to a serious tool for creating dynamic, database-driven Web sites. You can now turn your company's database of products into a dynamic online catalog—or turn that cherished recipe collection into an online culinary resource for an adoring public. You can even create Web pages for updating and deleting database records, meanwhile keeping designated areas of your site secure from unauthorized visitors. Most reassuring of all, Dreamweaver MX does the programming for you.

If you've never used Dreamweaver before, but have already built one or more Web sites, you won't have to start from scratch. Dreamweaver happily opens Web pages and Web sites that were created in other programs without destroying any of your carefully handcrafted code. While Dreamweaver has always prided itself on leaving HTML code you write exactly as you wrote it, Dreamweaver MX offers greater support for hand-coded Web pages. In fact, many of the new features in MX are aimed specifically at people who like to work in the raw code.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Dreamweaver MX is a program for producing and managing Web sites. Whether you need a simple five-page Web site to let your friends know about your upcoming dance party, or a thousand-page e-commerce system with database connections and dynamically generated content, Dreamweaver MX can help. It lets you build Web pages and sites quickly and maintain them with ease. It also lets you add interactive behavior and advanced Web technologies like Cascading Style Sheets, and Dynamic HTML.

The MX version of Dreamweaver is really two programs in one.

First, it's the latest version of Dreamweaver itself, complete with all of the fabulous layout, design, and productivity tools that made a hit of Dreamweaver 4 and its predecessors.

Second, it incorporates the program formerly known as Dreamweaver UltraDev. This program, once sold separately, offers advanced programming technology for data-driven Web sites.

These two newly merged programs add up to a serious tool for creating dynamic, database-driven Web sites. You can now turn your company's database of products into a dynamic online catalog—or turn that cherished recipe collection into an online culinary resource for an adoring public. You can even create Web pages for updating and deleting database records, meanwhile keeping designated areas of your site secure from unauthorized visitors. Most reassuring of all, Dreamweaver MX does the programming for you.

If you've never used Dreamweaver before, but have already built one or more Web sites, you won't have to start from scratch. Dreamweaver happily opens Web pages and Web sites that were created in other programs without destroying any of your carefully handcrafted code. While Dreamweaver has always prided itself on leaving HTML code you write exactly as you wrote it, Dreamweaver MX offers greater support for hand-coded Web pages. In fact, many of the new features in MX are aimed specifically at people who like to work in the raw code.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Dreamweaver's windows let you add and modify elements of a Web page. Macromedia refers to most of these windows as panels, and Dreamweaver has an almost overwhelming number of them.

Many of these windows are used to assist with specific tasks, like building style sheets, and are described in the relevant chapters. But you'll frequently interact with four main groups of windows: the document window, the Insert bar, the Property inspector, and panel groups.

The look of these windows depends on what kind of computer you're using (Windows or Macintosh) and what changes you've made to the program's preference settings.

Even so, the features and functions generally work identically no matter what your situation. In this book, where the program's operation differs dramatically in one operating system or the other, special boxes and illustrations (labeled "For Macs Only" or "For Windows Only") will let you know.

You build your Web pages in the document window. As in a word processor, you can simply click inside the body of the document window and type to add text to the page. You'll work in this window as you build a page, and you'll open new document windows as you add or edit pages for your site.

Several other screen components provide useful information about your document. They may appear in different locations in Windows or on the Mac (see Figures 1-1 and 1-2), but work the same. For example:

Figure 1-1: In Windows, you switch between documents by clicking a document tab that appears immediately below the document window. In this example, clicking the banner.html tab brings that page to the front. (This nifty feature works only if the docu- ment window is maximized.) You can also hide the Panels (the stack at the right edge of the window) by clicking the Hide Panels button (circled). To show the panels, click the button again.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Although reading a book is a good way to learn the ins and outs of a program, nothing beats sitting in front of the computer and taking a program through its paces. Many of this book's chapters, therefore, conclude with hands-on training: step-by-step tutorials that take you through the creation of a real, working, professionally designed Web site for the fictional online magazine Cosmopolitan Farmer.

The rest of this chapter, for example, introduces Dreamweaver by taking you step by step through the process of building a Web page. It shouldn't take more than an hour. When it's over, you'll have learned the basic steps of building any Web page: creating and saving a new document, adding and formatting text, inserting graphics, and adding links.

If you're already using Dreamweaver and want to jump right into the details of the program, feel free to skip this tutorial. And if you're the type who likes to read first and try second, read Chapters 2 through 5, and then return to this chapter to practice what you've just learned.

The tutorial in this chapter requires the example files from this book's Web site, http://www.sawmac.com/dwmx/. Click the Tutorials link to go to the tutorials page. Download the files by clicking either the Tutorial 1 Mac files or Win files link , depending on the kind of machine you're using (Mac or Windows).

After you've downloaded and decompressed the files, you should have a DWTutorial1 folder on your computer, containing the Web pages and graphics needed for this tutorial. If you're having difficulties, the Web site contains detailed instructions for downloading the files you'll be using with this book.

Whenever you build a new Web site or edit an existing one, you must begin by introducing Dreamweaver to it—a process called defining a site. This simple process is the most important first step when you start using Dreamweaver, whether you plan to work on a five-page Web site, build a thousand-page online store, or edit an existing Web site.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

True, broadband Internet media like streaming video, audio, and high-quality graphics continue to grab the headlines. After all, it's exciting to speculate about the Web replacing your telephone, or tapping your keyboard to get movies on demand.

But the Web is primarily woven with words. Stephen King novellas, Sony PlayStation 2 reviews, and tour dates for Britney Spears's upcoming concerts still drive people to the Web. As you build Web pages and Web sites, you'll spend a lot of your time adding and formatting text. Understanding how Dreamweaver works with text is vital to getting your message across effectively.

This chapter covers the not-always-simple act of getting text into your Dreamweaver documents. In Chapter 3, you can read about formatting this text so that it looks professionally designed.

In many ways, Dreamweaver works like a word processing program. When you create a new document, the blinking cursor appears at the top of the page, ready for you to begin typing. When you finish a paragraph, press Enter or Return to start a new one. Text, as well as anything else you add to a Web page, starts at the top of the page and works its way to the bottom.

Many useful special characters—such as copyright or trademark symbols—don't appear on your keyboard, making them difficult or impossible to type. The Characters tab of the Insert bar lets you use a variety of symbols and international characters quickly by clicking an icon.

To open this panel:

Choose Window → Insert to open the Insert bar (Figure 2-1, top).

Figure 2-1: Clicking the Other Characters button on the Characters tab (top) brings up the Insert Other Character dialog box (bottom). However, there are even more characters in the Western alphabet than are listed in this dialog box. You can find a table listing these characters and their associated entity names and numbers at

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

In many ways, Dreamweaver works like a word processing program. When you create a new document, the blinking cursor appears at the top of the page, ready for you to begin typing. When you finish a paragraph, press Enter or Return to start a new one. Text, as well as anything else you add to a Web page, starts at the top of the page and works its way to the bottom.

Many useful special characters—such as copyright or trademark symbols—don't appear on your keyboard, making them difficult or impossible to type. The Characters tab of the Insert bar lets you use a variety of symbols and international characters quickly by clicking an icon.

To open this panel:

Choose Window → Insert to open the Insert bar (Figure 2-1, top).

Figure 2-1: Clicking the Other Characters button on the Characters tab (top) brings up the Insert Other Character dialog box (bottom). However, there are even more characters in the Western alphabet than are listed in this dialog box. You can find a table listing these characters and their associated entity names and numbers at http://www.ramsch.org/martin/uni/fmi-hp/iso8859-1.html. To add a character not available from the Insert Other Character window, type the character's name or number in the Insert field and click OK.

The keyboard shortcut Ctrl+F2 ( -F2) works, too.
Click the Characters tab.

The palette shown in Figure 2-1 appears, offering a wide range of symbols and international characters. Unlike regular Western characters, such as

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

If you're building Web sites as part of a team or for clients, your writers are likely to send you their copy in word processing documents—from Microsoft Word, for example. Unfortunately, Dreamweaver falls a bit short when it comes to handling text from other programs. Unlike publishing programs such as Quark XPress or Adobe PageMaker, Dreamweaver can't import a word processing document.

"Importing HTML from Word" on the facing page offers a workaround that helps you bring Word documents into Dreamweaver. For text in other formats, however, you'll need to resort to copying and pasting, like generations of Web designers before you.

Open the document in whatever program created it—Word Perfect, AppleWorks, or whatever. (If the content you need is contained in a plain-text file, you can open it directly in Dreamweaver.) Select the text you want (by dragging through it, for example), or choose Edit→Select All (Ctrl+A [

-A]) to highlight all text in the document. Then choose Edit→Copy, or press Ctrl+C (

-C), to copy it. Switch to Dreamweaver, click in the document window where you wish the text to go, and choose Edit→Paste (Ctrl+V [

-V]).

This routine pastes the text into place. Unfortunately, you lose all text formatting (font type, size, color, bold, italic, and so on) in the process, as shown in Figure 2-3.

Figure 2-3: When you copy from Word (or any other program), as shown at top, and paste into Dreamweaver, as shown at bottom, all formatting is lost, and paragraph breaks are replaced by line breaks. The little icon that appears at the end of the first line at right represents the invisible line break (see page 49).

Furthermore, you'll find pasted paragraphs separated by line break characters, not standard carriage returns. Strangely enough, this means that when you paste in a series of paragraphs, Dreamweaver treats them as though they were one gargantuan paragraph. These line break characters can pose problems when trying to format what you

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Pasting text from another program into your Dreamweaver document works just fine, but it's not the most elegant or efficient method for getting text onto a Web page. Not only do you lose formatting, but the resulting line breaks are a real annoyance.

Suppose you've copied some HTML code, maybe out of the Source view of an actual Web page in a Web browser, or from a "How to Write HTML" Web site. You'll notice that when you paste it into Dreamweaver, all the HTML tags appear in the document window, complete with brackets (<>) and other assorted messiness.

To avoid this mess, choose Edit→Paste HTML. This command adds the code to the HTML of your page, making visible only the text you'll want the public to see, just the way things should be. Similarly, if you want to copy the HTML code and the visible text from your document window, use the Edit→Copy HTML command—a handy technique when you want to paste your work into another Web authoring program.

By the way, you don't have to use these commands when copying and pasting within Dreamweaver. The regular Copy and Paste commands are smart enough to keep all of the formatting—and HTML tags—when copying and pasting within a Dreamweaver document.

A better alternative is to use Microsoft Word to save documents as Web pages, which then act as an intermediary between Word and Dreamweaver. All recent versions of Word (97, 2000, and 2002/XP for Windows; 98, 2001, and X for Mac) can save files in HTML format, with formatting like fonts, text colors, and text sizes intact.

The drawback to this method is that Word produces hideous HTML code. One look at it, and you'd think that your cat fell asleep on the keyboard. So that it will be able to reopen the document as a Word file when the time comes, Word injects reams of information adding greatly to the file size of the page. This is a particular problem with the latest versions of Word, which add loads of XML and Cascading Style Sheet information. Fortunately, Dreamweaver can strip out most of that unnecessary code and produce leaner Web pages, as described below.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

After you get text into your Dreamweaver document, you'll undoubtedly need to edit it. You'll delete words and paragraphs, move sentences around, add words, and fix typos.

The first step in any of these procedures is learning how to select text, which works much as it does in word processors. You drag across text to highlight it, or just click where you wish the selection to begin and hold down the Shift key as you click at the end of the selection. You can also use shortcuts like these:

To select a word, double-click it.
To select a line of text, move your cursor to the left of the line of text until the cursor changes from an I-beam to an arrow, signaling that you've reached the left-margin selection strip. Click once to highlight one line of text, or drag vertically in this selection strip to select multiple lines.
While pressing Shift, use the left and right arrow keys to select one letter at a time. Ctrl+Shift ( -Shift) and the left and right arrow keys select one word at a time.
Ctrl+A ( -A) selects everything in the body of the page—text, graphics, and all.

Once you've selected text, you can cut, copy, or delete it. To move text to another part of the Web page, or even to another Dreamweaver document, use the Cut, Copy, and Paste commands in the Edit menu. You can also move text around by dragging and dropping it, as shown in Figure 2-5.

Figure 2-5: You can move a blob of selected text simply by dragging it to another location in the document window. Point to a spot inside your highlighted selection; the cursor changes from an I-beam to an arrow; you can now drag the selection. Let go of the mouse button to drop your selection at the spot indicated by the vertical bar, as shown here. This technique works with graphics and other objects you've selected in the document window, too. You can even move a

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

You spend a lot of time perfecting your Web pages, making sure the images look great, that the text is properly formatted, and that everything aligns to make a beautiful visual presentation. But one step is often forgotten, especially given the hyperspeed development process of the Web—making sure your Web pages are free from typos.

Spelling mistakes give an unprofessional impression and imply a lack of attention to detail. Who wants to hire an "illustraightor" or "Web dezyner"? Dreamweaver's spell checking feature can help you.

Before you start spell checking, you should make sure that the correct dictionary is selected. Dreamweaver comes with fourteen dictionaries for eleven different languages, plus three English variations and both Iberian and Brazilian Portuguese. When it checks your spelling, the program compares the text in your document against the list of words in one of these dictionaries.

To specify a dictionary, choose Edit→Preferences (Dreamweaver MX→Preferences in Mac OS X)—or press Ctrl+U (

-U)—to open the Preferences dialog box. Select the General category, and then choose a language from the Spelling Dictionary pop-up menu.

Once you've selected a dictionary, open the Web page whose spelling you wish to check. You can check as much or as little text as you like, as follows:

Highlight the text (which can be even a single word).

If you want to check the entire document, make sure that nothing is selected in the document window, or just click at the very beginning of the document. Like spell checkers in other programs, spell checking begins at the location of your insertion point.

Unfortunately, Dreamweaver doesn't offer a sitewide spell checking feature. You must check each page individually.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

One of the great consciousness-altering moments of the twentieth century was the introduction of the Undo command. After a long day in front of the computer, the ability to undo any action seems quite natural. (Unfortunately, reaching for the Ctrl+Z keys after spilling grape juice on Grandma's antique tablecloth still doesn't work in the real world.)

Fortunately, most steps you take in Dreamweaver can be reversed with either the Undo command or the History panel.

Like most computer programs these days, Dreamweaver lets you undo the last step you took by pressing Ctrl+Z (

-Z), or by choosing Edit→Undo. (This command changes to reflect your most recent action. If you just deleted some text, for example, it says Edit→Undo Delete.) When you're feeling indecisive, you can redo the action you just undid by choosing Edit→Redo or by pressing Ctrl+Y (

-Y).

Oops! I added a word to my personal dictionary by accident! How do I undo that?

If you click Add to Personal accidentally, you'll probably want to fix your mistake—but there's no obvious way to remove words in your Personal dictionary!

Your personal dictionary is a file called personal.tlx. For Windows 2000, NT, and XP, you'll find this file in your own application data folder, usually on the C drive→Documents and Settings→[Your Name]→Application Data→Macromedia→Dreamweaver MX→Configuration→Content→Dictionaries.

In Windows 98 and ME, it's in Windows→Application Data→Macromedia→Common.

If you use Mac OS X , look inside your Home→Library→Application Support→Macromedia→Dreamweaver MX→Configuration→Content→Dictionaries. And finally, if you're on Mac OS 9, look in System Folder→Application Support→Macromedia

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Getting text onto a Web page (Chapter 2) is a good start, but effective communication requires effective design, too. Large, bold headlines help readers scan a page's important topics. Colorful text focuses attention. Bulleted sentences crystallize and summarize ideas. Just as a monotonous, low-key voice puts a crowd to sleep, a vast desert of plain HTML text is sure to turn visitors away from the important message of your site. In fact, text formatting could be the key to making your Widgets Online 2003 Sale-a-thon a resounding success instead of an unnoticed disaster.

To help you get your point across, Dreamweaver provides the tools you need to format your text in compelling and eye-catching ways (see Figure 3-1 for examples of good and bad text formatting).

Figure 3-1: Both of these pages use different fonts, colors, and sizes to display text, but the one at bottom uses a consistent arrangement of styles to organize the text and guide the reader through the page. Notice how the headline "Do We Really Need New Domains?" with its larger type size draws your eye to it immediately. Below that, the supplementary articles and their summaries are easy to identify and read. In the page at top, by contrast, the largest type element, "Main Menu," sits in the middle of a scattered, randomly formatted sea of text.

Just as you use paragraphs to help organize your thoughts into clear, well-structured, and cohesive units when you're writing a paper or letter, you organize content on Web pages into blocks of information within HTML tags (see page 3 for more on tags). The most basic block of information is a simple paragraph, indicated in HTML by a paragraph tag, like this:

<p>Hello. This is one paragraph on this Web page. </p>

To a Web browser, everything between the opening and closing tags is considered part of the same paragraph. Many Dreamweaver formatting options—headlines, lists, indents, and alignment, for example—can apply only to an entire paragraph at a time, as opposed to individual words. In a word processor, you'd call this kind of formatting

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Just as you use paragraphs to help organize your thoughts into clear, well-structured, and cohesive units when you're writing a paper or letter, you organize content on Web pages into blocks of information within HTML tags (see page 3 for more on tags). The most basic block of information is a simple paragraph, indicated in HTML by a paragraph tag, like this:

<p>Hello. This is one paragraph on this Web page. </p>

To a Web browser, everything between the opening and closing tags is considered part of the same paragraph. Many Dreamweaver formatting options—headlines, lists, indents, and alignment, for example—can apply only to an entire paragraph at a time, as opposed to individual words. In a word processor, you'd call this kind of formatting paragraph formatting; in Web design, it's called block-level formatting. The idea is exactly the same: These characteristics affect an entire paragraph (that is, a block of text, whether that's just one sentence or several sentences) at a time.

(Character-level formatting, on the other hand, can be applied to individual words or even letters. Bold and italic fall into this category, as described later in this chapter.)

When you create a new document in Dreamweaver and start typing, the text you type has no paragraph formatting at all, as indicated by the word None in the Format pop-up menu at the left side of the Property inspector. (None isn't an HTML tag; it just means that there are no tags at all surrounding your text.)

When you press Enter or Return, you create a new paragraph, complete with opening and closing tags, as shown above, but your newly born paragraph still has no formatting tags. When your Web site visitors look at it, the font and size of your type are determined by their own Web-browser preference settings. It may not look anything like the typography you saw in Dreamweaver.

You can add the Paragraph format to any block of text. Since this formatting option affects all of the text in the block, you don't need to select any text as a first step. Simply click inside the block of text and do one of the following:

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Lists organize the everyday information of our lives: to-do lists, grocery lists, top ten lists, and so on. On Web pages, lists are indispensable for presenting groups of items such as links, company services or employees, or a series of instructions.

HTML offers formatting options for three basic categories of lists (see Figure 3-4). The two most common types of lists are bulleted (called unordered lists in the HTML language) and numbered lists (called ordered in HTML). The third and lesser-known list type, a definition list, comes in handy for creating glossaries or dictionary-like entries.

Figure 3-4: HTML has several predefined list formats, including bulleted lists and definition lists, which let you organize information into orderly units. Once you've told Dreamweaver that you intend to create a bulleted or numbered list, it adds the bullets or the numbering for you automatically.

Bulleted and numbered lists share similar formatting. Dreamweaver automatically indents items in either type of list, and automatically precedes each list item by a character—a bullet, number, or letter, for example.

Unordered or bulleted lists, like this one, are good for groups of items that don't necessarily follow any sequence. They're preceded by a bullet.
Ordered lists are useful when presenting items that follow a sequence, such as the numbered instructions in the paragraph below. Instead of a bullet, a number or letter precedes each item in an ordered list. Dreamweaver suggests a number (1, 2, 3, and so on), but you can substitute Roman numerals, letters, and other variations.

You can create a list from scratch within Dreamweaver, or add list formatting to text already on a Web page.

Section 3.2.1.1: Creating a new bulleted or numbered list

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The simple formatting applied by a paragraph format is not much to write home about, much less to advertise on a résumé. Heading 1, for instance, is generally displayed in black and bold using a large Times New Roman font. (Yawn.)

To really make your Web pages stand out, you may want to apply different fonts, colors, sizes, and styles to your text. Unlike paragraph formatting, which applies to an entire HTML paragraph, you can apply character formatting to any selection of text, whether it's a single word, one sentence, an entire paragraph, or your whole Web page.

In general, you apply character formatting just as you would in a word processor: Select the text (using any of the methods described on page 56) and then apply a format using the Property inspector or Text menu.

The remainder of this chapter describes this approach to text formatting, which is a simple and quick way to add color and variation to the text on a page. However, this method is becoming quickly outdated. Technical organizations like the World Wide Web Consortium recommend against the kind of character-level formatting discussed here, since it relies on old HTML tags like the tag.

But more importantly, professional Web designers—who not only want to keep up with technical trends but also must build functional Web sites that work for and please the vast audience of Web surfers—are steadily moving to the more sophisticated typographic controls offered by Cascading Style Sheets, as discussed in Chapter 8.

Using the instructions in the rest of this chapter, you can still build professional-looking Web pages that work in most Web browsers today and still will, well into the future. These techniques are fast and easy to learn. However, if you'd rather enjoy the many visual and technical benefits of more professional formatting techniques, turn to Chapter 8 and learn how to use CSS for formatting your Web pages.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Adding formatting options to text can require many clicks of the mouse and many trips to the Property inspector. Suppose, for instance, that you want all of the major headings on a page to be formatted as Heading 1, using the Arial font, in red, italic, and centered. If your page has many headings, this could add up to a lot of formatting work.

To streamline such situations, use Dreamweaver's HTML Style feature. HTML Styles provide a single-click method for applying multiple text formatting options.

Bear in mind that HTML Styles are not an "official" Web technology like Cascading Style Sheets or JavaScript. They're purely a Macromedia creation, a shortcut for completing multiple formatting tasks in one step.

The control center for HTML Styles is the HTML Styles panel. To open it, choose Window→ HTML Styles or press Ctrl+F11 (

-F11). The panel lists all styles defined for the current site (see page 25 for full detail on creating sites in Dreamweaver) and lets you create, apply, edit, and delete HTML Styles.

You can create an HTML Style either by formatting some text by hand first, or from scratch.

Here's how to create an HTML Style based on text you've already formatted:

Select the text.

You can, if you like, create an HTML Style from scratch. But you save a lot of time by preformatting some text in your document, and then telling Dreamweaver to base its new style on that.

Make sure the HTML Styles panel is open, as described above.
On the HTML Styles panel, click the Add Style button (the button marked with the +).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

The humble hyperlink may not raise eyebrows anymore, but the notion that you can easily navigate a whole sea of information, jumping from one piece of information to another with a simple click, is a very recent and powerful invention. Interested in a particular band? Go to http://Yahoo.com, type in the band's name, click to go to its Web site, click to go to the page that lists its upcoming gigs, click to go to the Web site for the club where the band's currently playing, and click to buy tickets.

Although links are a basic part of building pages, and although Dreamweaver, for the most part, shields you from their complexities, they can be tricky to understand. The following section provides a brief overview of links, including some of the technical distinctions between the different types. If you already understand links, or are just eager to start using Dreamweaver, jump to Adding a Link on page 95.

A link is a snippet of computer code that gives a Web browser directions for how to get from one page to another on the Web. What makes links powerful is the fact that the distance those directions take doesn't matter. A link can just as easily lead to another page on the same site or to a page on a Web server halfway around the globe.

Behind the scenes, a simple HTML tag called the anchor (<a>) tag generates each and every link. Links come in three different flavors: absolute, document relative, and root relative. See page 94 for some examples of each link type in practice.

When people need to mail you a letter, they ask for your address. Suppose it's 123 Main St., New York, New York 12001. No matter where in the country your friends are, if they write 123 Main St, NY, NY 12001 on an envelope and mail it, their letters will get to you. That's because your address is unique—just like an absolute link.

Similarly, every Web page also has a unique address, called a URL (most people pronounce it "You Are El"), or Uniform Resource Locator. If you open a Web browser and type

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

A link is a snippet of computer code that gives a Web browser directions for how to get from one page to another on the Web. What makes links powerful is the fact that the distance those directions take doesn't matter. A link can just as easily lead to another page on the same site or to a page on a Web server halfway around the globe.

Behind the scenes, a simple HTML tag called the anchor (<a>) tag generates each and every link. Links come in three different flavors: absolute, document relative, and root relative. See page 94 for some examples of each link type in practice.

When people need to mail you a letter, they ask for your address. Suppose it's 123 Main St., New York, New York 12001. No matter where in the country your friends are, if they write 123 Main St, NY, NY 12001 on an envelope and mail it, their letters will get to you. That's because your address is unique—just like an absolute link.

Similarly, every Web page also has a unique address, called a URL (most people pronounce it "You Are El"), or Uniform Resource Locator. If you open a Web browser and type http://www.sawmac.com/dwmx/index.html into the Address bar, the home page for this book opens.

This URL is an absolute link; it's the complete, unique address for a single page. Absolute links always begin with http://, and you'll use them anytime you link to a Web page outside of your own site. Absolute links always lead to the same page, whether the link to it is on a page in the current site or an entirely different site.

The bottom line: Use absolute links when you want to link to a page on another Web site.

Suppose you, the resident of 123 Main Street, drop in on a couple who just moved into the neighborhood. After letting them know about all the great restaurants nearby, you tell them about a party you're having at your place.

When they ask you where you live, you could, of course, say, "I live at 123 Main St., NY, NY 12001," but your neighbors would probably think you needed a little psychiatric help. More likely, you would say something like, "Just go across the street and turn left. I'm the second house on the right." Of course, you can't use these instructions as your mailing address, because they work relative only to your neighbors' house.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

If all that talk of links got you confused, don't worry. Links are confusing, and that's one of the best reasons to use Dreamweaver. If you can navigate to a document on your own computer or anywhere on the Web, you can create a link to it in Dreamweaver, even if you don't know the first thing about URLs and don't intend to learn.

To create a link from one page to another on your own Web site, use the Browse for File button on the Property inspector (see Figure 4-2) or its keyboard shortcut (see the steps below). Browsing for a file in Dreamweaver uses the same type of dialog box that you already use to open or save a file, making this the easiest way to add a link. (To link to a page on another Web site, you'll need to type the Web address into the Property inspector. Turn to page 99 for instructions.)

Figure 4-2: Here are three ways to add links on a Web page: the Link field, the Point-to-File icon, and the Browse-for-File icon.

Before you add any links, save your Web page. Not only is saving often good computer common sense, but saving a document means that you've settled on a folder location for it—a requirement if you hope to use document-relative links.

In the document window, select the text or image you want to use for the link.

You can select a single word, a sentence, or an entire paragraph. When this process is over, the selected words will show up blue and underlined (depending on your visitors' Web-browser settings), like billions of links before them.

In addition, you can turn a picture into a link—a great trick for adding attractive navigation buttons.
In the Property inspector, click the folder (Browse for File) icon.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Whenever you want to invite your visitors to email you, an email link is the perfect solution. When someone clicks an email link, her email program launches automatically, and a new message opens with your email address already in the To field. She can then just type her message and send it off.

An email link looks like this: mailto: bob@cosmofarmer.com. The first part, mailto:, indicates the type of link, while the second part (bob@cosmofarmer.com) specifies the email address.

Email links work only if the person who clicks the link has an email account and an email program. If someone visits your site from a computer at the public library, for example, he might not be able to send email. If this drawback troubles you, remember that you can also collect information using a form (as discussed in Chapter 10), a feedback method that has neither the limitations nor the easy setup of an email link.

You can create an email link much the way you'd create any other Dreamweaver link: by selecting some text or an image and typing the mailto address, as shown above, into the Link field in the Property inspector. To simplify this process, Dreamweaver has a quick method of inserting an email link:

On the Common tab of the Insert bar, click the Email Link icon, which looks like an envelope (see Figure 4-6).

Alternatively, choose Insert→Email link. In either case, if you've already typed the text (Email me!) on your Web page, select it first. The Email Link dialog box opens (see Figure 4-7).

Figure 4-7: The Email Link dialog box lets you specify the text that appears on the Web page and the email address for a mailto link. You can also select some text you've already added to the document and click the Email Link icon on the Insert bar. The text you selected is copied into the Text field in this dialog box.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Clicking a link usually loads a Web page into the browser window. But what if you want to link not only to a Web page, but to a specific spot on the page? See Figure 4-8 for an example.

Figure 4-8: Imagine a Web page with a list of Frequently Asked Questions. To make it easier to update, all of the answers are listed together on a single page. Adding anchors to the Answers page makes it possible to jump from the Questions page to the precise location of the answer on the Answers page.

Introducing the anchor link, a special link type that's designed to auto-scroll to a particular spot on a particular page.

Creating an anchor link is a two-step process: First add and name an anchor, thus identifying the destination for the link; then add a link that goes to that named anchor. For instance, in the Answers page example of Figure 4-8, you would place a named anchor at the beginning of each answer.

To create a named anchor:

In the document window, click where you want to insert the named anchor.

The named anchor is the place where you want the link to jump to.
Insert a named anchor.

You can do so using any of three methods. Using a menu: Choose Insert→Named Anchor. From the keyboard: Press Ctrl+Alt+A (Option- -A). In the Insert bar: Select the Common tab and click the Named Anchor icon—see Figure 4-6.
Type the name of the anchor in the Insert Named Anchor dialog box.

Each anchor on a page should have a unique name, something short and easy to remember. No spaces are allowed, however. Punctuation is illegal, too; stick to letters and numbers. If you violate any of these regulations, Dreamweaver will remind you with an error message.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

At some point, you may need to change or edit a link. Perhaps the URL you were linking to has changed, or you simply no longer need that link.

As you'll read in Part 4, Dreamweaver provides some amazing tools for automatically updating your links so your site stays in working order, even if you move files around your site. But even Dreamweaver isn't smart enough to know when a page on someone else's Web site is moved or deleted. And you may decide you simply need to change a link so that it points to a different page on your own site. In both of these cases, you'll need to change the links on your Web pages by hand.

Select the text link or picture link.

Do so by clicking anywhere inside the text link, or clicking once on the link image.

The existing link path appears in the Link field in the Property inspector.

When I click on a link to an anchor, the Web browser is supposed to go to the page and display the anchor at the top of the browser window. But sometimes the anchor appears in the middle of the browser. What's that about?

Web browsers can't scroll beyond the bottom of a Web page, so an anchor near the bottom of a page sometimes can't move to the top of the browser window. If one of your own Web pages exhibits this problem, the fix is simple: just add a bunch of empty lines—press the Enter key repeatedly—below the last item on the page. You've just added space at the bottom of the page, so the browser can scroll the page all the way to the anchor.
Use any of the techniques described on page 95 for specifying the link's target.

For example, click the Browse-for-File button in the Property inspector and locate a different Web page in your site.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

Nobody believes that a picture is worth a thousand words more than today's Web designers, as evidenced by the increasingly visual nature of the Internet. In fact, it's not difficult to stumble onto a home page these days composed of nothing but graphics (see Figure 5-1).

Figure 5-1: Some Web sites rely almost exclusively on graphics for both looks and function. The home page for the PBS Kids Web site, for instance, uses graphics not just for pictures of their shows' characters, but also for the page's background and navigation buttons.

Even if you don't want to go that far, understanding how to use graphics effectively is invaluable. Whether you want to plop a simple photo onto your page, cover it with clickable "hot spots," or design an interactive set of buttons that light up when the cursor passes over them, Dreamweaver makes the job—and the underlying JavaScript programming—easy.

If you were writing out the HTML instructions for your Web page by hand, you'd insert an image into a Web page using the image tag—<img>. The primary property of an image is called the source (Src), which is the URL or path to the graphics file.

Dreamweaver does all of this coding for you automatically when you insert a picture into your fledgling Web page:

Save the Web page that will contain the image.

In order to insert an image, Dreamweaver must determine the path from your Web page to that image, which could be anywhere on your hard drive. As with links (see page 95), saving the page before you proceed enables Dreamweaver to correctly determine the path from the image to the page you just saved.
In the document window, click where you want to insert the image.

This might be at the beginning or end of a paragraph, or within a cell in a table (see Chapter 6). To set a graphic apart from other text, press Enter, creating a blank line, before inserting it.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy reprint rights for this chapter

If you were writing out the HTML instructions for your Web page by hand, you'd insert an image into a Web page using the image tag—<img>. The primary property of an image is called the source (Src), which is the URL or path to the graphics file.

Dreamweaver does all of this coding for you automatically when you insert a picture into your fledgling Web page:

Save the Web page that will contain the image.

In order to insert an image, Dreamweaver must determine the path from your Web page to that image, which could be anywhere on your hard drive. As with links (see page 95), saving the page before you proceed enables Dreamweaver to correctly determine the path from the image to the page you just saved.
In the document window, click where you want to insert the image.

This might be at the beginning or end of a paragraph, or within a cell in a table (see Chapter 6). To set a graphic apart from other text, press Enter, creating a blank line, before inserting it.
Choose Insert → Image.

Alternatively, you can click the Image button in the Common tab of the Insert bar (see figure 5-2). Or, if you're a keyboard nut, press Ctrl+Alt+I (Option- -I).

Figure 5-2: The Common tab of the Insert bar has three tools for adding graphics to your pages.

In any case, the Select Image Source dialog box opens. This box is identical to the Select File window that appears when adding a link to a page. The only difference is the Preview Images checkbox—turning it on shows a thumbnail of any selected image in the Preview window.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Table of Contents

Section 3.2.1.1: Creating a new bulleted or numbered list