Dreamweaver 8: The Missing Manual

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 summer vacation or a thousand-page e-commerce 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 latest version, in fact, make it easier than ever to design and lay out Web sites. In particular, revamped Cascading Style Sheet support 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 site-wide 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. Dreamweaver 8 continues the trend started in MX 2004 of integrating advanced CSS creation and editing tools into Dreamweaver.

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 constantly updated 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. Best of all, Dreamweaver 8 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 the HTML code you write exactly as you wrote it, Dreamweaver 8 offers more features for hand-coded 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 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 summer vacation or a thousand-page e-commerce 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 latest version, in fact, make it easier than ever to design and lay out Web sites. In particular, revamped Cascading Style Sheet support 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 site-wide 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. Dreamweaver 8 continues the trend started in MX 2004 of integrating advanced CSS creation and editing tools into Dreamweaver.

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 constantly updated 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. Best of all, Dreamweaver 8 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 the HTML code you write exactly as you wrote it, Dreamweaver 8 offers more features for hand-coded 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 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 name of the file you're currently working on and, in Windows, where the file is located on your computer. In addition, if the Web page is XHTML-compliant (see Section 3.2.2), then that's indicated in parentheses. For instance, in the example shown in Figure 1-1, the Web page is written in XHTML and is saved as a file named aries.html in the folder horoscopes, which is nested inside several other folders on the Y: drive. (In Windows, the title bar appears on the top of the screen; on the Mac, it's at the top of the document window, and the location of the file isn't listed.)

Figure 1-1: Dreamweaver on a Windows PC. You can switch between documents by clicking the tab immediately above the Document toolbar. Here, clicking the aries.html tab brings that page to the front. (This nifty feature works only if the document window is maximized.) You can also hide the panels in one fell swoop (either the stack of panels on the right edge of the window or the panels at the bottom-left) by clicking either of the Hide Panels buttons (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 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 Exasperator.

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, adding links, and making the program work for you.

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 8, so you may want to take a spin, even if you're comfortable with Dreamweaver MX 2004. (And if you're the type who likes to read first and try second, read Chapters 2, 3, 4 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, www.sawmac.com/missing/dw8/. Click the Tutorials link to go to the tutorials page. Download the files by clicking the Chapter 1 link. All the tutorial files are stored as ZIP files: a type of file that compresses a lot of different files into one, smaller file.

Windows owners will need a utility to "unzip" or decompress the tutorial files. Many Windows machines include just such a utility, so double-clicking the downloaded file will usually do the trick. But if your computer doesn't have a program to unzip the file, you can download a free and easy-to-use unzip utility here: http://members.ozemail.com.au/~nulifetv/freezip/freezip.exe. Mac OS X has built-in ZIP support, so you can just double-click the file to decompress it.

At any rate, 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.

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 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. Sony PlayStation Portable reviews, Brad Pitt gossip, and countless personal blogs about cats 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:

From the menu on the Insert bar, choose Text.
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 (bold) and (strong) tags, most of which you can apply more easily using the Property inspector or keyboard shortcuts, as discussed in the next chapter. This panel also features less frequently used tags like <abbr> (abbreviation) or <dl> (definition list). You can satisfy your curiosity about these tags by using Dreamweaver's HTML reference (see Section 9.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!

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:

From the menu on the Insert bar, choose Text.
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 (bold) and (strong) tags, most of which you can apply more easily using the Property inspector or keyboard shortcuts, as discussed in the next chapter. This panel also features less frequently used tags like <abbr> (abbreviation) or <dl> (definition list). You can satisfy your curiosity about these tags by using Dreamweaver's HTML reference (see Section 9.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 ™.
From the menu at the right end of the Insert bar, select the symbol you wish to insert (see Figure 2-1).
Dreamweaver inserts the appropriate HTML code into your Web page. (Alternatively, you can select the Other Characters option to bring up the wider-ranging Insert Other Character dialog box shown at bottom in Figure 2-1.)

If you set the encoding of your Web page to anything other than Western in the Page Properties window (by choosing Modify → Page Properties and clicking the Title/Encoding category), you can reliably insert only line breaks and nonbreaking spaces. The other special characters available from the Character category of the Objects panel may not work.

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 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 8 includes 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.2.6).

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 then 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.

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 think is a single paragraph. To identify these line breaks, see the note on Section 2.1.3.

If you have to copy and paste text from other programs, there's a way to get paragraphs (and not just lines separated by the line-break character) when you paste into Dreamweaver: make sure whoever's typing up the original documents inserts an extra paragraph between each paragraph of text. Pressing Enter (or Return) twice at the end of a paragraph inserts an empty paragraph. When you copy and paste, Dreamweaver removes the empty paragraphs and pastes the text as regular paragraphs.

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 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 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. Use Ctrl+Shift (-Shift) and the left and right arrow keys to select one word at a time.
Ctrl+A (-A) selects everything in the body of the page—text, graphics, and all. (Well, this isn't 100% true; if you're using tables or layers, Ctrl+A may select just the text within a table or layer; see the notes on Section 7.5 and Section 7.5.3 for more info about this behavior.)

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-6.

Figure 2-6: 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 and 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 copy of the selection by pressing Ctrl (Option) as you drag and drop.

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 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 14 dictionaries for 11 different languages, including 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, and 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:

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.
Unfortunately, Dreamweaver doesn't offer a site-wide spell-checking feature. You must check each page individually.
Choose Text → Check Spelling (or press Shift+F7).
The Check Spelling dialog box opens (see Figure 2-7). If the selected word isn't in Dreamweaver's dictionary, it appears in the top field of the box, along with a list of suggested alternative spellings.

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 PDF of this chapter|Buy reprint rights for this chapter

One of the great consciousness-altering moments of the 20th 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 a 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 number very high or your computer doesn't have a lot of memory, you may find your computer acting sluggish.)

You can even undo actions after you have saved a document (although not after you've closed it). Unlike many programs, Dreamweaver doesn't erase the list of actions you've performed when a page is saved. This means you can feel free to save as often as you want—a wise safeguard against crashes and other mishaps—without losing the ability to undo what you've done.

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 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 2006 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 3.2.1 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.)

Figure 3-1: Both 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 "Linux Powers Airborne Bots," with its larger type, 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, while the name of the site is big and bold, the rest of the text on the page shares similar font sizes and colors. Nothing stands out or grabs your attention.

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

Figure 3-1: Both 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 "Linux Powers Airborne Bots," with its larger type, 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, while the name of the site is big and bold, the rest of the text on the page shares similar font sizes and colors. Nothing stands out or grabs your attention.

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!

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-10 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 (called ordered in HTML). The third and lesser-known list type, a definition list, comes in handy for creating glossaries or dictionary-like entries.

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 following section. 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

When making a new list in Dreamweaver, you start by choosing a list format, and then typing the list items:

In the document window, click where you wish to start a list.
See Chapter 2 for full details on adding text to a Web page.
In the Property inspector, click the Ordered or Unordered List button to apply the list format.
Alternatively, you can choose Text → List → Unordered List or Ordered List. Either way, the first bullet or number appears in your document automatically.
Type the first list item and then press Enter or Return. Repeat until you've added all items in the 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 PDF of this chapter|Buy reprint rights for this chapter

The simple formatting applied by a paragraph format isn't 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 on 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 on Section 2.2.6) and then apply a format using the Property inspector or Text menu.

Up to this point, you've been using HTML only for structuring your Web page with headlines, paragraphs, lists, and so on. When using the Property inspector to apply formatting like fonts, colors, and text sizes, Dreamweaver is working behind the scenes to create Cascading Style Sheets to format text (see Section 3.3.4 for an explanation). Professional Web designers—who not only want to keep up with technical trends but who 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 CSS-based formatting to text by using the Property inspector and Text menu. (A wider array of additional CSS formatting options is discussed further in Chapter 6.)

If you don't want to use CSS (perhaps you've built an entire site using the 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!

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 content 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.1.5.

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 cover 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 work. 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, NY 12001. No matter where in the country your friends are, if they write 123 Main St., New York, 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 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/dw8/index.html into the address bar, the home page for this book opens.

This URL is an

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 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 cover 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 work. 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, NY 12001. No matter where in the country your friends are, if they write 123 Main St., New York, 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 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/dw8/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 any time you link to a Web page outside of your own site. An absolute link always leads 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., New York, 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 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 the details of how they're configured.

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, as described in the following steps.

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

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 Browse for File 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.)

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.
Alternatively, choose Modify → Make Link or press Ctrl+L (-L). In any case, the Select File dialog box opens (see Figure 4-3).
Navigate to and select the file you want the link to open.
The file should be a Web page that's part of your Web site. In other words, it should be in the local root folder (see Section 1.3.1), or in a folder therein.
If you try to link to a file outside the root folder, Dreamweaver alerts you to this problem and offers to copy the file into the root folder. Accept the offer. Remember: For a Web site, the root folder is like the edges of the known universe; nothing exists outside 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 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@nationalexasperator.com. The first part, mailto:, indicates the type of link, while the second part (nessie@nationalexaspera-tor.com) specifies the email address.

Email links work only if the person who clicks the link has an email program set up and running on his computer. 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, 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-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.

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 Objects panel. 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 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 named-anchor link, a special link type that's designed to autoscroll to a particular spot on a particular page.

Why do my links start with file:///?

Links that begin with file:/// (file:///D:/missingmanual/book_site/national_ex/subscribe.html, for example) aren't valid links on the Web. Rather, they're temporary addresses that Dreamweaver creates as placeholders for links to be rewritten later. (A file:/// path tells Dreamweaver where to look on your computer for the file.) You'll spot these addresses when you add document-relative links to a page that hasn't been saved, or when working with files that are outside of your site's local root folder.

Suppose you're working on a Web page that will contain your company's legal mumbo-jumbo, but you haven't yet saved it. After adding a document-relative link to your home page, you notice that the path displayed in the Property inspector's Link field begins with file:///. Since your legal page hasn't yet been saved and therefore doesn't yet have a folder location, Dreamweaver can't create a link telling a browser how to get from it to the home page.

So Dreamweaver creates a temporary link, which helps it keep track of what page to link to. Once you save the page somewhere in the site, Dreamweaver rewrites the link in proper document-relative format, and the file:/// disappears.

Likewise, when you work with files that are outside of the local root folder, Dreamweaver can't write a proper link. (Any folder outside of the local root folder isn't part of the Web site, and there's no way to write a correct link from nowhere to somewhere.) So, if you save a page outside of the local root folder, Dreamweaver writes all document-relative links on that page as file paths beginning with file:///. To avoid this invalid link problem, always save your Web pages inside the local root folder or a folder inside of the local root folder. To learn more about root folders and Web sites, see Chapter 13.

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 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 Four, 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 has been 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.
The existing link path appears in the Link field in the Property inspector.
Use any of the techniques described on Section 4.1.5 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:

Choose Modify → Remove Link, or press Ctrl+Shift+L (-Shift-L).
Delete the text in the Link field of the Property inspector and press the Enter or Return key.

The text or image remains on your Web page, but it no longer links to anything. If it's a text link, the color changes from your site's link color (see the box called "Link Colors" below) to the normal text color for the page.

Of course, if you're feeling particularly destructive, you can also delete the link text or image itself; doing so gets rid of the link.

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 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 highly visual nature of the Internet. In fact, it's not difficult to stumble onto a home page these days composed almost entirely of 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:

Save the Web page that will contain the image.
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.4), saving the page before you proceed allows Dreamweaver to correctly determine the path from the page you just saved to the image.
In the document window, click where you want to insert the image.
You can choose the beginning or end of a paragraph, or within a cell in a table (see Chapter 7). To set a graphic apart from other text, press Enter (Return), creating a blank line, before inserting it.
Choose Insert → Image.
Alternatively, from the Insert bar, you can select Image (see Figure 5-2). Or, if you're a keyboard nut, press Ctrl+Alt+I (

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 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:

Save the Web page that will contain the image.
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.4), saving the page before you proceed allows Dreamweaver to correctly determine the path from the page you just saved to the image.
In the document window, click where you want to insert the image.
You can choose the beginning or end of a paragraph, or within a cell in a table (see Chapter 7). To set a graphic apart from other text, press Enter (Return), creating a blank line, before inserting it.
Choose Insert → Image.
Alternatively, from the Insert bar, you can select Image (see Figure 5-2). Or, if you're a keyboard nut, press Ctrl+Alt+I (-Option-I).
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 (see Figure 4-3). The only difference is a Preview Images checkbox—turning it on shows a thumbnail of any selected image in the Preview window.

Figure 5-2: The Image menu on the Common tab of the Insert bar provides tools for adding graphics to your pages.
Browse to and select the graphics file you wish to add to the page.
The file must be in one of the formats that work on the Web: GIF, JPEG, or PNG.
The file should be stored somewhere in the local root folder of your site (see Section 1.3.1) or in one of its subfolders. If it isn't, Dreamweaver can't add the correct path to your Web page.
That's why, if you select a graphic for insertion that's not already in your site folder, Dreamweaver offers to add 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 PDF of this chapter|Buy reprint rights for this chapter

After inserting a graphic, you can work on it in several ways: attaching a link to the image, aligning it on the page, or adding a border and margin to it, for example. Dreamweaver also includes some basic tools that let you crop, resize, optimize, sharpen, and adjust contrast and brightness (see "Editing Graphics" on Section 5.2.5).

As with most objects on a Web page, you set image properties using the Property inspector (see Figure 5-4).

Figure 5-4: The Property inspector 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 logo of Fireworks, which created it.

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 on Section 5.4.1—using Dreamweaver behaviors (see Chapter 11) or your own JavaScript programming, you must name your picture. Whatever name you choose should use only 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.

When you add a name, Dreamweaver adds both a Name property and an ID property to the image tag. The name tag is still used by most browsers, but the more recent ID tag is fast becoming the standard way that JavaScript identifies an object on a page. (IDs are also used by Cascading Style Sheets, as described on Section 6.6.2.)

JavaScript uses the image name or ID that you type in the Image Placeholder box for its own reference; no one actually sees this name in a Web browser. In other words, this box isn't the place to give your graphic a text label that shows up when your reader has graphics turned off. For that purpose, read on.

Not everyone who visits your Web site gets to see those stunning photos of your last summer vacation. Some people deliberately turn off graphics when they surf, enjoying the Web without the wait, since graphics-free Web pages appear almost instantly. Other people have vision impairments that prevent them from enjoying the visual aspects of the Web. They rely on special software that reads Web page text aloud, including any labels you've given your graphics.

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 PDF of this chapter|

Table of Contents

Section 3.2.1.1: Creating a new bulleted or numbered list