Cover | Table of Contents

Table of Contents

Chapter 1: Dreamweaver MX 2004 Guided Tour

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver 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 ecommerce site with database connections and dynamically generated content, Dreamweaver 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, Dynamic HTML, and database connectivity.

Dreamweaver is a complete Web site production and management tool. It works with Web technologies like HTML, XHTML, CSS, and JavaScript.

The enhancements in the MX 2004 version, in fact, make it easier than ever to design and lay out Web sites. In particular, revamped Cascading Style Sheet technology lets you access the latest Web techniques for creating fast-loading, easily modified Web page designs. Dreamweaver also includes a multitude of tools for managing Web sites once you've built them. You can check for broken links, use Templates to streamline sitewide page changes, and reorganize your site in a flash with the program's site management tools.

Get used to the acronym CSS, which you'll encounter frequently in this book. It stands for Cascading Style Sheets, a formatting language used to design HTML Web pages. One of Dreamweaver MX 2004's biggest changes is the introduction of CSS into nearly every aspect of the program.

It's also 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 2004 does the programming for 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!

Welcome to Dreamweaver MX 2004

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Dreamweaver 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 ecommerce site with database connections and dynamically generated content, Dreamweaver 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, Dynamic HTML, and database connectivity.

Dreamweaver is a complete Web site production and management tool. It works with Web technologies like HTML, XHTML, CSS, and JavaScript.

The enhancements in the MX 2004 version, in fact, make it easier than ever to design and lay out Web sites. In particular, revamped Cascading Style Sheet technology lets you access the latest Web techniques for creating fast-loading, easily modified Web page designs. Dreamweaver also includes a multitude of tools for managing Web sites once you've built them. You can check for broken links, use Templates to streamline sitewide page changes, and reorganize your site in a flash with the program's site management tools.

Get used to the acronym CSS, which you'll encounter frequently in this book. It stands for Cascading Style Sheets, a formatting language used to design HTML Web pages. One of Dreamweaver MX 2004's biggest changes is the introduction of CSS into nearly every aspect of the program.

It's also 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 2004 does the programming for 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!

The Dreamweaver MX 2004 Interface

Content preview·Buy PDF of this chapter|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 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 they work the same. For example:

• Title bar. The title bar shows the title of the Web page you're currently working on, and, in parentheses, the name of the underlying file and what folder it's in. For instance, in the example shown in Figures 1-1, the Web page called "Welcome to the National Exasperater" is saved as an HTML file called index.html in a folder called National Ex. (In Windows, the title bar appears on the top of the screen; on the Mac, it's at the top of the document 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!

The Dreamweaver Test Drive

Content preview·Buy PDF of this chapter|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 the National Exasperater.

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.

Occasionally, one of the floating windows—the Property inspector, for example—simply disappears. Yet when you visit the Window menu, you still see a checkmark next to the window's name. In other words, that window is actually still open—somewhere.

This problem can result from accidentally dragging a window off the screen or from choosing a smaller screen resolution.

Either way, simply choosing the window's name from the Window menu won't help you; you're just hiding or showing a window that's beyond the boundaries of your monitor. Even quitting and restarting Dreamweaver is no use.

To get out of this predicament, choose Window→Arrange Panels to make the windows snap back to their default—and visible—locations on the screen.

If you're already using Dreamweaver and want to jump right into the details of the program, feel free to skip this tutorial. On the other hand, this tutorial identifies some major changes in Dreamweaver MX 2004, so you may want to take a spin, even if you're comfortable with Dreamweaver MX. (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.)

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

Chapter 2: Adding Text to Your Web Pages

Content preview·Buy PDF of this chapter|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. Steven King novellas, Sony PlayStation 2 reviews, and the latest gossip on J. Lo 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, you 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 Text tab of the Insert bar lets you use a variety of symbols and international characters quickly by clicking an icon.

To open this panel:

1. Choose Text from the menu on the Insert bar.
   If the Insert bar isn't visible, choose Window→Insert to open it, or use the keyboard shortcut Ctrl+F2 ( -F2).
   The palette shown in Figure 2-1 appears. Many of the options let you add common HTML tags like the <b> (bold) and <strong> (strong) tags, most of which you can apply more easily using the Property inspector, as discussed in the next chapter. This panel also features less frequently used tags like <abbr> (abbreviation) or <dl> (definition list). You satisfy your curiosity about these tags using Dreamweaver's HTML reference (Section 10.6).

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

Adding Text in Dreamweaver

Content preview·Buy PDF of this chapter|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, you 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 Text tab of the Insert bar lets you use a variety of symbols and international characters quickly by clicking an icon.

To open this panel:

1. Choose Text from the menu on the Insert bar.
   If the Insert bar isn't visible, choose Window→Insert to open it, or use the keyboard shortcut Ctrl+F2 ( -F2).
   The palette shown in Figure 2-1 appears. Many of the options let you add common HTML tags like the <b> (bold) and <strong> (strong) tags, most of which you can apply more easily using the Property inspector, as discussed in the next chapter. This panel also features less frequently used tags like <abbr> (abbreviation) or <dl> (definition list). You satisfy your curiosity about these tags using Dreamweaver's HTML reference (Section 10.6).
   The last option on the bar is actually a menu that offers a wide range of symbols and international characters. Unlike regular Western characters, such as a or z, these special characters are represented in HTML by a code name or number. For instance, a trademark symbol (™) is written in HTML as &#8482;.
2. From the menu at the right end of the Insert bar, select the symbol you wish to insert (see Figure 2-1).

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

Copying and Pasting Text

Content preview·Buy PDF of this chapter|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 the form of word-processing documents. If the text comes in a Microsoft Word document or Excel spreadsheet, you're lucky. Dreamweaver MX 2004 includes new commands for pasting text from these two types of files. If you're using Windows, you can even import those kinds of files directly into a Web page using File→Import→Word/Excel Document (see Section 2.4).

For non-Microsoft-spawned text, you can, of course, still simply copy and paste like generations of Web designers before you.

Open the document in whatever program created it—WordPerfect, AppleWorks, your email program, or whatever. 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]).

Figure 2-3: When you copy from any program other than Microsoft Word or Excel, 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.

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.

Furthermore, you may find that pasted paragraphs are 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!

Selecting Text

Content preview·Buy PDF of this chapter|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 paragraph, triple-click anywhere in 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 leftmargin 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.

From Word, you can save any document as a Web page, essentially turning a Word doc into HTML. 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.

The explanation: So that it will be able to reopen the document as a Word file when the time comes, Word injects reams of information that adds to the file size of the page. This is a particular problem with the latest versions Word, which add loads of XML and Cascading Style Sheet information.

Fortunately, Dreamweaver's Clean Up Word HTML command can strip out most of that unnecessary code and produce leaner Web pages. To use it, open the Word HTML file just as you would any other Web page: by choosing File

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

Spell Checking

Content preview·Buy PDF of this chapter|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→Preferences in Mac OS X)—or press Ctrl+U ( -U)—to open the Preferences dialog box. Select the General category, then choose a language from the Spelling Dictionary pop-up menu at the bottom of the window.

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:

1. 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. (One good way to make sure nothing is selected is to click in the middle of a paragraph of text.) Like spell checkers in other programs, you must place the cursor at the beginning of the document to begin spell checking from the top of the page.

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

Undo, Redo, and the History Panel

Content preview·Buy PDF of this chapter|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).

Jumping back and forth with the Undo/Redo commands is a good way to compare a change you made to a Web page with its previous appearance. For instance, suppose you're having trouble deciding on a background color for a Web page. You could set it to dark blue, then set it to dark purple, and then choose Edit→ Undo Set Page Properties to return to the dark blue background. Choose Edit→Redo Set Page Properties to see the purple background again. This before-and-after toggling feature of the Undo/Redo combo can be great addition to your Web-building arsenal.

You're not limited to a single undo, either. You can undo multiple steps, up to 50 of them, or whatever number you specify in Preferences. Choose Edit→Preferences (on the Mac it's Dreamweaver→Preferences) to open this dialog box, click the General category from the Category list, and change the number in the Maximum Number of History Steps box. (Note, however, that the more steps Dreamweaver remembers, the more memory the program needs. If you set this preference very high or your computer doesn't have a lot of memory, you may find your computer acting sluggish.)

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

Chapter 3: Text Formatting

Content preview·Buy PDF of this chapter|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 2004 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).

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 Section 0.2 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 <p> and closing </p> 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.)

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

Paragraph Formatting

Content preview·Buy PDF of this chapter|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 Section 0.2 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 <p> and closing </p> 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.)

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.

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 menu at the left side of the Property inspector. (

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

Lists

Content preview·Buy PDF of this chapter|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!

Character Formatting

Content preview·Buy PDF of this chapter|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. As mentioned in the box in Section 3.1.1, this type of paragraph formatting is intended to provide structure, not good looks.

To make your Web pages stand out, you'll 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 in Section 2.3) and then apply a format using the Property inspector or Text menu.

In this regard, Dreamweaver MX 2004 functions just like earlier versions. However, behind the scenes, there's been a significant change. While previous versions used the <font> tag to change the color, size, and type face of text, MX 2004 relies on Cascading Style Sheets to format text (see Section 3.3.5 for an explanation). Professional Web designers —who not only want to keep up with technical trends but also must build functional Web sites that please the vast audience of Web surfers—have already embraced the more sophisticated typographic controls offered by Cascading Style Sheets.

Cascading Style Sheets aren't just for text, either. You can format any HTML element—images, tables, and so on—with the power of CSS. Read all about it in Chapter 6.

Using the instructions in the rest of this chapter, you'll learn how to apply basic CSSbased formatting to text using the Property inspector and Text menu. (A wider array of additional CSS formatting options is discussed in detail in Chapter 6.)

If you don't want to use CSS (perhaps you've built an entire site using the <font> tag and you wish to remain consistent), you can revert to Dreamweaver's old method of formatting text. Press Ctrl+U (

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

Chapter 4: Links

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The humble hyperlink may not raise eyebrows anymore, but the notion that you can navigate a whole sea of information, jumping from one island of information to another with a simple click, is a very recent and powerful invention. Interested in a particular band? Go to 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 (Section 4.2).

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 makes each and every link. Links come in three different flavors: absolute, document-relative, and root-relative. (See Section 4.1.4) 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!

Understanding Links

Content preview·Buy PDF of this chapter|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 makes each and every link. Links come in three different flavors: absolute, document-relative, and root-relative. (See Section 4.1.4) 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 www.sawmac.com/dwmx2004/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!

Adding a Link

Content preview·Buy PDF of this chapter|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.

Figure 4-2: The Property inspector provides three ways to add links on a Web page.

To create a link from one a 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). To browse for a file in Dreamweaver, you use 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 Section 4.2.3 for instructions.)

1. 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.
2. In the Property inspector, click the folder (Browse for File) icon.
   Alternatively, choose Modify→Make Link or press Ctrl+L ( -L). In any case, the Select File dialog box opens (see Figure 4-3).

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

Adding an Email Link

Content preview·Buy PDF of this chapter|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:nessie@nationalexasperater.com. The first part, mailto:, indicates the type of link, while the second part (nessie@nationalexasperater.com) specifies the email address.

Figure 4-6: The Common tab of the Insert bar includes three link-related objects: The Hyperlink for adding text links, the email link for adding links for email addresses, and the Named anchor for adding links within a page.

Email links work only if the person who clicks the link has an email account and an email program that understands the mailto: link. 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 11), 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:

1. 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).

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

Linking Within a Web Page

Content preview·Buy PDF of this chapter|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.

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.

Figure 4-8: Imagine a Web page with a list of Frequently Asked Questions (right). 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.

To create a named anchor:

1. 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.
2. 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.
3. Type the name of the anchor in the Insert Named Anchor 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!

Modifying a Link

Content preview·Buy PDF of this chapter|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 IV, Dreamweaver provides some amazing tools for automatically updating your links so that 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.

Figure 4-9: You can use the Property inspector's Point-to-File icon to link to a named anchor on a page. Simply select some text or an image in an open page. Then drag the Point-to-File icon to an anchor on any other open document to set the link. If you can't see the shield icons that mark anchors, see above for instructions on how to make them visible.

1. Select the text link or picture link.
   The existing link path appears in the Link field in the Property inspector.
2. Use any of the techniques described on Section 4.2 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. The destination of the link changes to the new URL, path, or anchor.

Sometimes, you want to stop a link from linking—when the Web page you were linking to no longer exists, for example. You want the text or image on your Web page to stay the same, but you want to remove the disabled link. In that case, just select the link text or image, and then use one of these tactics:

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

Chapter 5: Images

Content preview·Buy PDF of this chapter|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 "hotspots," 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) property, 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:

1. 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 Section 4.2), saving the page before you proceed enables Dreamweaver to correctly determine the path from the image to the page you just saved.
   Computer graphics come in hundreds of different file formats. The assorted acronyms can be mind-numbing: TIFF, PICT, BMP, EPS, Amiga IFF, and so on.

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

Adding Images

Content preview·Buy PDF of this chapter|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) property, 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:

1. 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 Section 4.2), saving the page before you proceed enables Dreamweaver to correctly determine the path from the image to the page you just saved.
   Computer graphics come in hundreds of different file formats. The assorted acronyms can be mind-numbing: TIFF, PICT, BMP, EPS, Amiga IFF, and so on.

   Fortunately, graphics on the Web are a bit simpler. There are only three graphics formats—two established formats and one exciting newcomer. All three provide good compression; through clever computer manipulation, they reduce the graphic's file size so it can travel more rapidly across the Internet. They differ only in the details.

   GIF (Graphics Interchange Format) files provide good compression for images that have areas of solid color: logos, text, simple banners. GIFs also offer single-color transparency, meaning that one color in the graphic can be made to disappear, permitting the background of a Web page to show through part of the image.

   A GIF image can only contain a maximum of 256 shades, generally making photos look blotchy. That radiant sunset photo you took with your digital camera won't look so good as a GIF.

   JPEG (Joint Photographic Experts Group) graphics, on the other hand, pick up where GIFs leave off. JPEG graphics can contain millions of different colors, making them ideal for photographic images. Not only do JPEGs do a better job on photos, they also compress much better than GIFs, because the JPEG compression algorithm considers how the human eye perceives different adjacent color values. When your graphics software saves a JPEG file, it runs a complex color analysis to lower the amount of data required to accurately represent the image. On the downside, JPEG compression makes text look blotchy.

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

Modifying an Image

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

After inserting a graphic, you can work on it in several ways: by attaching a link to the image, aligning it on the page, or adding a border and margin to it, for example. Dreamweaver MX 2004 also introduces some basic tools that let you crop, resize, optimize, sharpen, and adjust contrast and brightness (see "Editing Graphics" in Section 5.3). As with most objects on a Web page, you set image properties using the Property inspector (see Figure 5-4).

Just to the right of an image's thumbnail on the Property inspector is a small field where you can type a name for that image. Most of the time, you'll leave this field blank.

However, if you plan to add interactive effects to it—like the rollover effect discussed in Section 5.5, using Dreamweaver Behaviors (see Chapter 12) or your own JavaScript programming—you must name your picture. Whatever name you choose should only use letters and numbers—no spaces or other punctuation. Furthermore, every graphic's name must be unique on the page. This rule is what allows JavaScript to "talk" to a specific image.

Figure 5-4: The Property inspector (for Windows, top, and Mac), shows the selected graphic's dimensions, source, alignment, border, and margins. A thumbnail version appears in the upper-left corner, in this case, bearing the log of Fireworks, which created it.

Many people using the Web have disabilities that make reading, seeing, hearing, or using a mouse difficult. Visually impaired people, for example, may be unable to benefit from images on the screen, even though they have software that can read aloud a Web page's text.

Dreamweaver includes a number of new features for making your Web sites more accessible. That's good news if you're building a Web site for the federal government or one of the many states that support Section 508 of the Workforce Investment Act. This law requires Web sites built for or funded by the government to offer equal or equivalent access to everyone. Throughout this book, you'll find tips for using Dreamweaver MX 2004's accessibility features, and in Section 15.7 you'll learn how to use a tool to find out if your site is compliant with Section 508.

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

Editing Graphics

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Nothing's ever perfect, especially when you're building a Web site. Corrections are par for the course—not just to a Web page, but to the pic