By David Sawyer McFarland
Book Price: $44.99 USD
£31.99 GBP
PDF Price: $35.99

Cover | Table of Contents | Colophon

Table of Contents

Chapter 1: Dreamweaver CS3 Guided Tour

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

Dreamweaver CS3 is a powerful program for designing and building Web sites. If you're brand-new to Dreamweaver, then turn to to get an overview of what this program can do and what's new in this latest version. This chapter provides a basic overview of the different windows, toolbars, and menus that you'll use every time you build a Web page. You'll also learn to set up the program so you can begin building Web pages. And, because doing is often a better way to learn than just reading, you'll get a step-by-step tour of Web page design—the Dreamweaver way—in the tutorial at the end of this chapter.

Dreamweaver's windows let you add and modify elements of a Web page. Adobe 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 the same way 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 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 your 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 on Windows computers and on Macs (see and ), but they work the same way. 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 ), then that's indicated in parentheses. For instance, in the example shown in , the Web page is written in XHTML and is saved as a file named

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 CS3 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. Adobe 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 the same way 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 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 your 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 on Windows computers and on Macs (see and ), but they work the same way. 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 ), then that's indicated in parentheses. For instance, in the example shown in , the Web page is written in XHTML and is saved as a file named features.html in the folder htdocs, which is nested inside another folder on the Z: 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 although the location of the file isn't listed, if you hover your mouse over the file name—index.html, for example—you'll see the location of that file on your Mac.)

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

Setting Up a Site

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

Whenever you build a new Web site or edit an existing one you've created else-where, you have to begin by introducing Dreamweaver to it—a process called defining a site. This is the most important first step when you start using Dreamweaver, whether you plan to whip up a five-page Web site, build a thousand-page online store, or edit the site your sister built for you. At its most basic, defining a site lets Dreamweaver know where you store your Web pages on your computer and makes sure Dreamweaver correctly inserts images and adds links to the pages of your site. In addition, if you want to take advantage of Dreamweaver's many time-saving site-management tools such as the link checker (see ), Library items (), Templates (), and FTP tool for moving your Web files to a Web server (), then you have to define a site.

Dreamweaver provides two methods for defining a site: the hold-you-by-the-hand Site Definition wizard, and the advanced "Get out of my way, I know what I'm doing" approach.

Dreamweaver's Site Definition wizard steps you through a series of screens, prompting you for information about your Web site setup.

1. Choose Site → New Site.
   The Site Definition window appears. To use the wizard, make sure the Basic tab is selected (see ).
   

   Figure 1-8: The Basic tab of the Site Definition window takes you step by step through the process of setting up a new site. Each stage of the process—Editing Files, Testing Files, and Sharing Files—is clearly labeled. Depending on the type of site you're building and which Dreamweaver features you plan on using, you'll be taken through a series of simple questions that help you set up your site.
2. Type the name of your site in the first field.
   The name you type here is solely for your own reference, to help you identify the site in Dreamweaver's Files panel. It won't appear on the Web. Dreamweaver also asks for the Web address for your site.
3. Type the Web address for your Web site. For example, http://www.cosmofarmer.com/.
   This step is optional. If you don't yet have a Web address you can leave this blank. In some cases, you may need to add some more information after the domain name. For example, the address for your Web site might look something like this:

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

Creating a Web Page

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

After defining a site, you'll want to start building pages. Just choose File → New or press Ctrl+N (⌘-N on a Mac) to open the New Document window (see ). Even if you've used earlier versions of the program, the New Document window introduced in Dreamweaver CS3 is a little overwhelming. There are so many options it's hard to know where to start.

Figure 1-13: The New Document window lets you create nearly every Web document type under the sun. Dreamweaver CS3 also includes many prepackaged designs including lots of advanced page layouts using the latest Web design techniques. If you select one of those designs in the design list, you'll see a preview of the layout in the upper-right corner of the window.

To create a basic HTML file for a Web page:

1. Choose Blank Page from the left-hand list of document categories.
   The Blank Page category lets you create a new empty document—this might be a Web page or something a bit more esoteric like an XML file (see for more on XML), an external JavaScript file, or one of the several server-driven pages such as PHP or ASP (which are discussed in Part 6).
   Both the Blank Template and "Page from Template" categories relate to Dreamweaver's Template feature discussed in . The "Page from Sample" category lets you choose from several different files with already-created designs—it's best to avoid these. The designs in this category are old and are left over from earlier versions of the program; they generally aren't very attractive and don't use the best techniques for building a Web page. Dreamweaver CS3 does ship with some very useful page layouts which you can access from the Blank Page category. (You'll learn about these designs in .) The last category, Other, lets you create documents for different programming languages like ActionScript or Java—unless you're a Flash or Java programmer, you probably won't ever need these.
2. Choose HTML from the Page Type list.
   You can also create other types of documents, most of which you'll learn more about later in this book, such as PHP or ASP for database-driven sites (see Part 6 of this book), XSLT files for processing XML (), templates (), library items (), or CSS files ().

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 your 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 CosmoFarmer.

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 (the finished tutorial is pictured in ).

Figure 1-14: A new blank Web page. Always remember to title the page by clicking inside the Title box at the top of the document window (circled) and entering a descriptive title.

If you're already using Dreamweaver and want to jump right into the details of the program, feel free to skip this tutorial. (And if you're the type who likes to read first and try second, read , , – 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/dwcs3. Click the Tutorials link to go to the tutorials page, and then download the files by clicking the download link. The tutorial files are stored as ZIP files, a type of file that compresses a lot of different files into one, smaller file.

Windows folks should download the file and double-click it to open the archive. Click the Extract All Files option, then follow the instructions of the Extraction wizard to unzip the files and place them on your computer. Mac users, just double-click the file to decompress it.

After you've downloaded and decompressed the files, you should have a MM_DWCS3 folder on your computer, containing all of the tutorial files for this book.

Before you get started working in Dreamweaver, you need to make sure the program's all set up to work for you. In the following steps, you'll double-check some key Dreamweaver preference settings, and you'll organize your workspace using the Workspace Layout feature.

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 hear the latest song from your favorite band, see a preview of a yet-to-be released blockbuster, and tune in to YouTube to see the kid down the street embarrass himself in front of a billion Web viewers.

But the Web is primarily woven with words. Nintendo Wii reviews, Britney Spears 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 Dream-weaver documents. In , 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 Insert bar's Text tab lets you use a variety of symbols and international characters quickly by clicking an icon.

To open the Text tab:

1. Click the Text tab 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 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 or key-board 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 Dream-weaver's HTML reference (see ), but their names give you an idea of when you might want to use them.

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 Insert bar's Text tab lets you use a variety of symbols and international characters quickly by clicking an icon.

To open the Text tab:

1. Click the Text tab 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 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 or key-board 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 Dream-weaver's HTML reference (see ), but their names give you an idea of when you might want to use them.
   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;.
   If you like card games or just want to add a heart to a Web page without using a graphic, go to Code view and type &hearts to get a heart character, &diams for a diamond, &spades for a spade, or &clubs for a club.
2. From the menu at the right end of the Insert bar, select the symbol you wish to insert (see ).
   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 in ).

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

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—WordPad, TextEdit, 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-4: Usually when you copy from any program other than a Microsoft Office program (Word, Excel, and so on) 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.

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 .

If you have to copy and paste text from other programs, there are two ways to get paragraphs (and not just lines separated by the line-break character) when you paste into Dreamweaver. First, choose Edit → Paste Special, and uncheck the "Retain line breaks" box in the Paste Special window (). Alter-natively, you can just make sure whoever's typing up the original documents inserts an empty 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

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.

In some cases, when you copy a symbol like © from Word and then paste it into Dreamweaver, you'll see &copy; in the HTML. Other times you'll see the actual symbol (©). What you get in the HTML depends on the type of encoding used on your Web page. Dreamweaver CS3 uses a different method than previous versions of the program. If you don't work with languages other than English, encoding isn't much of an issue; you can work happily without ever worrying about how Dreamweaver encodes HTML for a Web page. But if you commonly need to type characters that don't appear on the standard English keyboard, such as Chinese, Kanji, or simply the accented letters of French or Spanish, Dreamweaver's new encoding method is helpful.

Computers don't think in terms of letters or any of the other symbols we humans normally use to communicate with each other. Computers think in terms of bits and bytes. Every letter or symbol displayed on a Web page is represented by a numeric code. The process of converting a symbol to the proper code is called encoding. But since the world is filled with many different symbols—Latin, Chinese, Kanji, Arabic, Cyrillic, Hebrew, and so on—there are many different encoding schemes used to accommodate all the different alphabets of the world. Versions of Dreamweaver prior to CS3 used Western Latin encoding, which handles most of the characters used in English and Western European languages. But it doesn't handle all symbols. That's why when you copy a © symbol from Word and paste it into a Web page with Western Latin encoding, you end up with &copy; in your HTML instead of the copyright symbol. &copy; is called an entity, and Web browsers know that when they see that they should display a true copyright symbol.

Dreamweaver CS3 now uses a newer type of encoding when creating a Web page—Unicode. Unicode (which Dreamweaver refers to as Unicode 4.0 (UTF-8), or UTF-8 for short) accommodates many of the alphabets of the world, so you can mix Kanji with Cyrillic with English on a single Web page, and all of those alphabets will display fine in a Web browser. A page that's encoded with Unicode will also produce slightly different HTML when pasting symbols from other programs. Instead of using entities in the page like

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 15 dictionaries for 12 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:

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.
   Unfortunately, Dreamweaver doesn't offer a site-wide spell-checking feature. You must check each page individually.
2. Choose Text → Check Spelling (or press Shift+F7).
   The Check Spelling dialog box opens (see ). 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.
   The first suggestion is listed in the "Change to" field.

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

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

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

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

Your personal dictionary is a file called Personal Dictionary MX.tlx. For Windows XP, you'll find this file in your application-data folder, usually on the C: drive under Documents and Settings → [your name] → Application Data → Adobe → Common. (Note: The Application Data folder is usually hidden in Windows. If you don't see it, you need to use Folder Options—located in the Control Panel—to reveal hidden folders and files.) Vista users will find the file in C: → [your name] → AppData → Adobe → Roaming → Common (as with Windows XP, the AppData folder is usually hidden, so you need to show all files by going to the Appearance & Personalization section of the Control Panel to make it appear). If you use a Mac, look inside your Home → Library → Application Support → Adobe → Common folder.

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 () 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 2007 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. shows two model 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 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. Either way the idea is exactly the same: the formatting you apply affects 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 article titles such as "Flash Embedding Cage Match," with its larger type, draws your eye to it immediately. The author names are all given the same design treatment—uppercase, bold, and small type—creating a consistent look that makes them easy to identify. In the page at top, by contrast, while the name of the Web site is big and bold, the other text on the page shares similar font sizes and types, making it difficult to focus your attention on any one area 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!

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 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. Either way the idea is exactly the same: the formatting you apply affects 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 article titles such as "Flash Embedding Cage Match," with its larger type, draws your eye to it immediately. The author names are all given the same design treatment—uppercase, bold, and small type—creating a consistent look that makes them easy to identify. In the page at top, by contrast, while the name of the Web site is big and bold, the other text on the page shares similar font sizes and types, making it difficult to focus your attention on any one area of the page.

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!

Creating and Formatting 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, least favorite celebrity 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 ). 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:

Figure 3-4: HTML has several predefined list formats, including bulleted lists and definition lists, both of 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.

1. In the document window, click where you wish to start a list.
   See for full details on adding text to a Web page.
2. In the Property inspector, click the Ordered or Unordered List button to apply the list format (see ). (The Unordered option is also known as Bulleted.)

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

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 in the next chapter.)

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 (c-U) to open the Preferences window. Select the General category, turn off the "Use CSS instead of HTML tags" checkbox, and then click OK to close Preferences.

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: Introducing Cascading Style Sheets

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

What you see on a Web page when you use garden-variety HTML tags like <h1>, <p>, and <ul>, pales in comparison to the text and styling on display in, say, a print magazine. If Web designers had only HTML to make their sites look great, the Web would forever be the ugly duckling of the media world. HTML doesn't hold a candle to the typographic and layout control you get when creating a document in even the most basic word processing program.

Fortunately for us designers, we can change the ho-hum appearance of HTML using a technology called Cascading Style Sheets. Cascading Style Sheets (CSS) are a way of making HTML look beautiful. If you think of HTML as the basic structure of a house (the foundation, walls, and rooms), then CSS is the house's interior decoration (the paint, carpeting, and the color, style, and placement of furniture). CSS gives you much greater control over the layout and design of your Web pages. Using them, you can add margins to paragraphs (just as in a word processor), colorful and stylish borders to images, and even dynamic rollover effects to text links. Best of all, Dreamweaver's streamlined approach lets you combine many of these design properties into powerful style sheets with just a few mouse clicks.

CSS is a large topic. It's also the heart of today's cutting edge Web design. So instead of dedicating just a single chapter to the topic, this book provides instruction in the fine art of using CSS in nearly every chapter. In this chapter, you'll learn the basics of CSS, and how to use Dreamweaver CS3's powerful CSS tools. In the next few chapters you'll learn how CSS can improve the look of common Web page elements like links, images, and tables. Once you're comfortable with the basics, you'll find in-depth information on CSS—the kind of information that really makes your head ache—in . And, in , you'll learn how to harness the power of CSS to fully control the layout of a Web page.

If you've used styles in word processing programs like Microsoft Word or page layout programs like Adobe InDesign, CSS will feel familiar. A style is simply a rule describing how to format a particular piece of HTML. (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!

Cascading Style Sheet Basics

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

If you've used styles in word processing programs like Microsoft Word or page layout programs like Adobe InDesign, CSS will feel familiar. A style is simply a rule describing how to format a particular piece of HTML. (A style sheet is a set of these styles.)

You can create a single style, for example, that formats text with the font Arial, colored red, and with a left margin of 50 pixels. You can also create styles specifically for working with images; for instance, a style can align an image along the right edge of a Web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text.

Once you've created a style, you can apply it to text, images, or other elements on a page. For example, you could select a paragraph of text, and then apply a style to instantly change the text's size, color, and font. You can also create styles for specific tags, so that all <h1> tags in your site, for example, are displayed in the same style, no matter where they appear.

You've already encountered CSS in the tutorial in the first chapter, and the previous chapter discussed how to use the Property inspector to apply basic formatting to text. The Property inspector's text formatting choices are the most basic way to create a CSS style. But there are a lot more powerful uses of Cascading Style Sheets, and you'll learn about many of these in the following pages.

Although HTML alone provides basic formatting options for text, images, tables, and other Web page elements, Cascading Style Sheets have many advantages that make them a superior choice for most formatting tasks. In fact, the World Wide Web Consortium (W3C), the organization responsible for defining standards for the Web, has already phased out the <font> tag from the current HTML standard in favor of CSS. (For a list of other obsolete tags, see www.codehelp.co.uk/html/deprecated.html.)

But even if the threat of obsolescence doesn't motivate you to use CSS, consider this: Style sheets offer far more formatting choices than HTML. With CSS, you can format paragraphs as they appear in a book or newspaper (the first line indented and no space between each paragraph, for example), and control the leading (the space between lines of type in a paragraph). When you use CSS to add a background image to a page, you get to decide how (and whether) it tiles (repeats). HTML can't even begin to do any of these things.

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

Creating Styles

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

You begin most CSS-related tasks in the CSS Styles panel, which is Dreamweaver's command center for creating and managing styles (see ). To open it, choose Window → CSS Styles (or press Shift+F11).

Figure 4-1: With the "All" button selected, the CSS Styles panel lists the names of all styles available to the current page, including those in both external and internal style sheets. Here, one external style sheet—site_styles.css—contains five styles. The first two are tag styles (notice that the names match various HTML tags), while the next three are class styles (note the period at the beginning). There's also one tag style defined in an internal style sheet—the one listed below "<style>." Click the minus (−) icon (arrow on Mac) to the left of the style sheet to collapse the list of styles, hiding them from view. The "Properties" list in the bottom half of the panel lets you edit a style as described on ; the three buttons at the bottom left of the panel (circled) control how the Properties list is displayed.

To create a new style, click the new style button on the CSS Styles panel (see ); right-click anywhere in the CSS Styles panel, and then select New from the menu that appears. Or choose Text → CSS Styles → New. The New CSS Rule dialog box appears (), where you begin the process of creating your new style. (In the technical language of CSS, a style is actually called a rule, but for simplicity's sake this book just uses the term style. After all, Cascading Rule Sheets doesn't have much of a ring to it.) Here's a quick tour of your choices:

Figure 4-2: In the New CSS Rule dialog box, you choose a type of style and give it a name. The label next to the naming box changes depending on the type of style you choose. In this example, since Class is selected, the Name label appears; if you choose the Tag option, it changes to Tag (or Selector, if you're using the Advanced option).

• Selector Type. Click the appropriate radio button for the kind of style you're creating: Class (to create your own style from scratch) or Tag (to create an HTML tag style that Dreamweaver automatically applies to each occurrence of the tag). See the previous section () for a discussion of these two types.

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

Using Styles

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

Once you've created styles, applying them is easy. In fact, if you created HTML tag styles, you don't need to do anything to apply them, because their selectors (see the box to the right) automatically dictate which tags they affect.

Whenever you create an external style sheet, Dreamweaver automatically links it to the current document. To use its styles in a different Web page, however, you must attach it to the page.

To do so, open the Web page to which you wish to add the style sheet. Then, on the CSS Styles panel, click the Attach External Style Sheet button (see ). (If the CSS Styles panel isn't open, choose Window → CSS Styles or press Shift-F11.)

You can also use the Property inspector to attach a style sheet. Just select "Attach Style Sheet…" from the Style menu.

The Attach External Style Sheet window appears (see ). Click Browse. In the Select Style Sheet File dialog box that appears, navigate to and double-click the CSS (.css) file you wish to attach to the document. If the style sheet you select is outside the current site—for example, you've selected a style sheet you like from another one of your Web sites—Dreamweaver offers to copy the style sheet file into your site's root folder; click Yes.

The Attach External Style Sheet window provides two other options: how to attach the style sheet, and what type of "media" you want the styles to apply to. The "media" setting is optional and dictates when the styles from the style sheet are applied (for example, you can apply a different set of styles when a page is printed vs. when it displays on a computer monitor.) You'll find in-depth information on media types and how to use them on .

Dreamweaver automatically handles the details of adding the proper CSS code to your pages, but if you're looking for a way to impress your neighbors, here's the behind-the-scenes scoop on how it works.

When you create an internal style sheet, Dreamweaver adds a pair of <style> tags to the head of the page (and a pair of HTML comment tags that hide the CSS from very old browsers). The opening <style> tag tells a Web browser that the following information isn't HTML—it's CSS code. When the Web browser encounters the closing </style> tag, it knows the CSS style information has ended.

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

Manipulating Styles

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

As with anything in Dreamweaver, styles are easy enough to edit, delete, or duplicate; all you need is a map of the terrain.

While building a Web site, you continually refine your designs. That chartreuse color you assigned to the background of your pages may have looked great at 2 a.m., but it loses something in the light of day.

Fortunately, one of CSS's greatest selling points is how easy it makes updating the formatting on a Web site.

Although this section focuses mainly on how to style your text, you also use CSS styles to add back-ground colors, background images, borders, and accurately position elements on page. The next few chapters will show you how to style links, images, tables, forms, and other page elements with CSS.

Sometimes when I copy text from one Web page and paste it into another Web page, all of the formatting disappears. What's going on?

When you use Cascading Style Sheets, keep in mind that the actual style information is stored either in the <head> of the Web page (for internal style sheets) or in a separate CSS file (an external style sheet). If a page includes an internal style sheet, then when you copy text, graphics, or other page elements, Dreamweaver copies those elements and any class style definitions used by that content. When you paste the HTML into another page, the styles are written into the <head> of that page. This feature can save you some time, but won't solve all of your woes. It doesn't, for example, copy any tag styles you've created, or most advanced styles you may create (see for more on advanced styles). So if you copy and paste some text—say, an <h1> tag styled with an h1 tag style—the <h1> tag and its contents paste into another page, but not the tag style.

In addition, if a page uses an external style sheet, then when you copy and paste text, the styles themselves don't go along for the ride. If you copy a paragraph that has a class style applied to it, and paste it into another document, the code in the paragraph is pasted (<p class="company"> for instance), but the actual "company" style, with all its formatting properties, isn't.

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

Checking Browser Compatibility

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

As if learning Dreamweaver, HTML, and CSS weren't big enough challenges, Web designers also have to contend with the fact that not all browsers display CSS in the same way. What looks great in Firefox may look terrible in Internet Explorer 6—and vice versa. Unfortunately, a lot of CSS display problems aren't the fault of the Web designer or CSS, but are caused by bugs in the browsers. This sad fact of browser life usually forces Web designers to spend lots of time testing Web pages in different browsers to identify and fix problems.

Fortunately for us, Dreamweaver CS3 introduces a new tool to help diagnose CSS problems, and advise you on the best way to fix them, saving you many hours of testing and troubleshooting. The Check Browser Compatibility tool scans a page's HTML and CSS, and determines if it's likely that one or more browsers will have trouble displaying your page. It actually checks two things: whether you've included any CSS properties or values that one or more browsers don't understand, and whether the particular combination of HTML and CSS you're using might trip up a particular browser.

For example, the blink value of the CSS Decoration property () isn't sup-ported by Internet Explorer or Safari. If you place that value in a style on a page, and then use the Check Browser Compatibility tool, Dreamweaver lets you know those browsers won't do anything with the blink setting. These types of errors are straightforward: You either change the property (or remove it) so that the style works in all browsers, or live with the fact that the specified browser will ignore the particular style instruction.

The second type of problem is more nebulous. Dreamweaver also warns you of potential browser problems that might arise because of the way you've used HTML and CSS. The warning Dreamweaver gives in this case is not as clear-cut as, "That browser doesn't understand that CSS property;" it's more like, "That browser does understand that CSS property, but in this one instance, the browser may get it horribly wrong, and mess up your Web page."

For example, Internet Explorer knows what a bulleted list is; it also knows what the CSS

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

Text Formatting with CSS

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

One of the best uses for Cascading Style Sheets is to convert the drab appearance of HTML text into lavishly designed prose. Or, if you like a somber, corporate style, CSS can help with that too. Whatever your design inclination, you can improve the look of your Web text using CSS.

Dreamweaver divides the many CSS properties into eight categories (see ). The most commonly used properties for text are stored in the Type and Block categories, while the List category offers several options for formatting bulleted and numbered lists.

You can apply nearly every CSS property to text. For example, you can use the border property to underline text, and the margin property to remove space between paragraphs. Those properties and others not listed in the Type or Block categories are introduced later in this book (don't want to blow your circuits too quickly). For now, you'll learn the most type-centric properties.

As the name implies, the Type category of the Rule Definition window lets you set formatting options that affect text (see ). Here are the settings you can adjust:

Figure 4-11: You'll visit the Type category frequently while creating CSS styles. You can set many different properties for formatting text; it's the most common use of CSS. Rest assured that, unlike some other CSS properties, type settings work well in all browsers that understand Cascading Style Sheets.

• Font. You choose a font for the style from the Font menu. As when using the Property inspector to select a font (see ), you choose from groups of fonts rather than the specific one you have your heart set on. Dreamweaver also lets you create your own "first-choice, second-choice…" font choices from this menu, exactly as described on .
• Size. Unlike HTML, where font size is defined using a number from 1 to 7, CSS offers a dizzying array of size choices—everything from the screen-dependent pixel to picas, points, and more. Most of these aren't relevant to designing pages that display on a computer screen. After all, a monitor doesn't really understand the concept of an inch—even if your display is set to 72 dots per inch, 72 dots may occupy a half inch, an inch, or more depending on the screen's resolution (which you can change from 800 x 600 to 1600 x 1200 on the

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

Cascading Style Sheets Tutorial

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

In this tutorial, you'll practice the basic techniques required to create and edit styles. Make sure you grasp the fundamentals covered in this tutorial: you'll be building lots of style sheets in the other tutorials throughout this book using these same methods. For this tutorial, you'll create an external style sheet for formatting pages on the CosmoFarmer Web site.

Before getting started, download the tutorial files from www.sawmac.com/dwcs3/. See the Note on for more details.

Once you've downloaded the tutorial files and opened Dreamweaver, define a new site as described on : Name the site Introducing CSS, and then select the Chapter04 folder (inside the MM_DWCS3 folder). (In a nutshell: choose Site → New Site. In the Site Definition window, click the Advanced tab, type CSS Tutorial into the Site Name field, click the folder icon next to the Local Root Folder field, navigate to and select the Chapter04 folder, and then click Choose or Select. Finally, click OK.)

To ensure that your files preview correctly, you need to make sure that a particular Dreamweaver preference is set:

1. Press Ctrl+U (⌘-U) to open the Preferences window.
   Alternatively, you can use Edit → Preferences (Dreamweaver → Preferences on Mac).
2. Select the CSS Styles category, and make sure the "Open CSS files when modified" checkbox is turned on.
   When this setting is turned on and you edit a CSS style in an external style sheet, Dreamweaver opens the CSS file. You can undo any changes you make to that style sheet.
3. Make sure the "Edit using CSS dialog" button is selected.
   This option makes sure the friendly and easy-to-use Rule Definition window appears whenever you double-click a style listed in the Styles panel, making it easy for non-CSS experts to edit and update styles.
4. Click OK to close the window.
   Now you're ready to create a style sheet.

In this example, you'll create a collection of styles for the feature stories on the CosmoFarmer Web site.

1. Choose File → Open; click the Site Root button (at the lower left of the open file window).
   The Site Root button, new in Dreamweaver CS3, is a handy tool. It automatically takes you to the local root folder for the site you're currently working on, saving you the effort of having to manually navigate to that folder.

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

Content preview