Dreamweaver CS5.5: The Missing Manual

Chapter 1. Dreamweaver CS5.5 Guided Tour

Dreamweaver CS5.5 is a powerful program for designing and building websites. If you’re brand-new to Dreamweaver, turn to What Dreamweaver Is All About to get a quick look at what this program can do; if you’re a longtime Dreamweaver fan, this page shows you what’s new in this, its latest incarnation.

This chapter provides a basic overview of Dreamweaver—the different windows, toolbars, and menus you’ll use every time you build a web page. You’ll also learn to set up the program so you can begin building 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.

The Dreamweaver CS5.5 Interface

Dreamweaver CS5.5’s interface shares the look and feel of other programs in the Adobe “Creative Suite,” like Photoshop, Illustrator, and Flash. Out-of-the-box, Dreamweaver organizes its various windows as a unified whole (see Figure 1-1). That is, the edges of all the windows touch each other, and resizing one window affects the others around it. This type of interface is common on Windows computers, but Mac fans accustomed to independent floating panels might find this look strange. Give it a chance. As you’ll soon see, the design has some benefits. (But, if you just can’t stand this locked-in-place style, you can detach the various panels and place them wherever you like on the screen; see Organizing Your Workspace for instructions.)

Figure 1-1. Out-of-the-box, Dreamweaver documents appear in “Split view”—HTML code on the left and a visual preview on the right. If you prefer to see how your page looks as you add and delete elements, click the Design button (circled) in the Document toolbar; that hides the HTML view and brings the page view full-screen. To switch among open documents, click a file’s tab immediately above the Document toolbar.

Many of the program’s individual windows help you handle specific tasks, like building style sheets. You’ll read about the panels in the relevant chapters. But you’ll frequently interact with four main groups of windows: the document window, the Application bar, the Property inspector, and panel groups.

Note

The look of these windows depends on what kind of computer you use (Windows or Macintosh) and what changes you make to the program’s preference settings. Even so, the features and functions generally work the same way. 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.

The Document Window

You build web pages in Dreamweaver’s document window. As in a word processor, simply click inside the window and start typing to add text to a page. You’ll work in this window as you build a page, and you’ll open new document windows as you add pages to your site or edit existing ones.

Several other screen components provide useful information about your document. They may appear in different locations on Windows and Mac computers (see Figures Figure 1-1 and Figure 1-2, respectively), but they work the same way.

Figure 1-2. A document window like this represents each web page; here’s where you add text, graphics, and other objects as you build a page. The status bar at the bottom of the window provides some useful information. It shows you how quickly the page will download and the way the page encodes text. You can also instruct Dreamweaver to display the current document at different widths and heights so you can simulate what the page would look like when viewed in different size browsers, such as those on a mobile phone, tablet, or desktop computer.

For example:

• Title bar (Mac only). The title bar displays the name of the file on which you’re currently working. In addition, if the page is XHTML-compliant (see XHTML, Too), Dreamweaver indicates that in parentheses. For instance, in the example shown in Figure 1-2, the web page is written in XHTML and saved as a file named boarding.html.

• Document tabs. When you have more than one web document open at a time, small tabs appear at the top of the document window—one for each open file. The name of the file appears in the tab; to switch to a file, just click its tab. In Windows, the Document tab bar also displays where you saved the file you’re working on (see Figure 1-1).

• Related files bar. The related files bar lists all CSS (cascading style sheets), JavaScript, and server-side programming pages (like PHP) the current web page uses. You’ll learn more about external files, such as external style sheets (Internal vs. External Style Sheets), JavaScript files, and server-side pages (Part Six), later in this book. But as a quick summary, it’s common in current web design to have other files supply design and interactivity to a page of HTML. Web designers frequently work on these files, so the related files bar lets you quickly jump to and work on “helper” files like external style sheets and JavaScript programs.

• Document toolbar. The Document toolbar lets you change the title of a page, switch between Design and Code views, jump to Live View (to see how the page looks and works in a web browser), preview the page in different browsers, make sure your page is free of HTML errors, and change the look of the document window. You’ll read about its various buttons and menus in the relevant chapters of this book, but you’ll want to be aware of the Code, Split, and Design buttons (circled in Figure 1-2). They let you see, respectively, just the raw HTML of the file you’re working on; a split view showing the code in one half of the window and the visual, design view in the other half; and, finally, a button for showing just the design of the page.

  When you first install Dreamweaver, it displays your pages in split view, with both the raw HTML and the visual design side-by-side. In this book, we’ll assume you’re in Design view (the visual, “this is what your page will pretty much look like in a browser” view) most of the time. (To make the toolbar visible if it’s not already, choose View→Toolbars→Document.) However, if you have a really big screen, staying in Split view gives you a great education in HTML; you can add elements to the Design view and instantly see the corresponding HTML tags added to the Code view.

  Note

  You may find two other toolbars, the Standard toolbar and Style Rendering toolbar, useful. The Standard toolbar is common on many Windows programs and includes buttons for frequent file and editing tasks, like creating a new page, opening a page, saving one or all open documents, canceling and repeating commands, and cutting, copying, and pasting page elements. (Dreamweaver hides this toolbar until you summon it by choosing View→Toolbars→Standard.) The Style Rendering toolbar comes in handy when you work with CSS. You’ll learn how to use it on Previewing Media Styles in Dreamweaver.

• Browser navigation toolbar. This toolbar works with the program’s Live View feature. When you click the Live View button in the Document toolbar, Dreamweaver displays your page in a web browser built right into the program. As a result, you can see what your page will look like in a browser (Dreamweaver uses WebKit—basically the Safari and Chrome web browsers, both based on WebKit—for this feature). You can ctrl-click (⌘-click) a link on the page and Dreamweaver will load that page. You’ll find Live View most useful with the server-side web pages discussed in Part Six of this book, and less useful when you create regular HTML pages. You can hide this toolbar—a good idea since it takes up valuable screen space—by unchecking View→Toolbars→Browser Navigation. Turn it back on by selecting that menu option again.

• Head content. Most of what you put on a web page winds up in the body of the page, but some elements are specific to the region of a page called the head. This is where you put things like the page’s title, the meta tags (for example, a description of the page, or keywords used in the page) that provide information for some search engines and browsers, JavaScript programs, and links to CSS files (Chapter 4).

  None of this information actually appears on your page when it’s “live” on the Internet, but you can have a look at it in Dreamweaver by choosing View→Head Content. You’ll see a row of icons representing the different bits of information in the head.

• Tag Selector. The Tag selector is extremely useful. It provides a sneak peek at the HTML that, behind the scenes, composes your web page. It indicates how Dreamweaver nests HTML tags in your document to create what you see on the page. In addition, the Tag selector lets you isolate, with a single mouse click, an HTML tag and all the information inside it. That means you can cleanly remove a page element or set its properties (see The Property Inspector), add behaviors (Chapter 15), and precisely control the application of styles (Chapter 4).

  You’ll make good use of the Tag selector in the tutorials to come. For experienced Dreamweaver fans, it’s one of the program’s most useful tools.

Note

In Design view, clicking the <body> tag in the Tag selector is usually the same as pressing Ctrl+A (⌘-A) or choosing Edit→Select All. It selects everything in the document window. However, if you click inside a table (Chapter 7) or <div> tag (see The Mighty <div> Tag), choosing Edit→Select All selects only the contents of the table cell or <div> tag. In such a case, you need to press Ctrl+A (⌘-A) several times to select everything on the page. After you do, you can press the Delete key to instantly get rid of everything in your document.

Careful, though: Pressing Ctrl+A (⌘-A) or choosing Edit→Select All in Code view selects all the code. Deleting code gives you an empty file—and an invalid web page.

The Insert Panel

Dreamweaver provides many windows for working with the various technologies required to build and maintain a website. Dreamweaver calls most of its windows panels, and they sit in tidy groups on the right edge of your screen. The various panels and their uses will come up in relevant sections of this book, and you’ll learn how to organize the panels on Organizing Your Workspace. But two are worth mentioning up front: the Insert panel and the Files panel.

If the document window is your canvas, the Insert panel holds your brushes and paints, as you can see in Figure 1-3. Although you can add text to a web page simply by typing within the document window, the Insert panel’s click-to-add approach simplifies the process of adding page elements like images, horizontal rules, forms, and multimedia content. Want to put a picture on your web page? Just click the Images icon.

Figure 1-3. The Insert panel has many faces and, depending on how large your monitor is, several space-saving techniques for displaying it. Normally, the panel displays the objects under each of its drop-down menus in a single list with an icon and a name—for example, the picture of an envelope and the label “Email Link” (top left). Unfortunately, this tall list takes up a lot of screen real estate. You can display the Insert panel’s buttons in a more compact way by hiding the labels. When you choose Hide Labels from the panel’s category drop-down menu (top-right image), Dreamweaver displays the icons side by side in rows, taking up a lot less space (middle-right image). Finally, you can turn the Insert panel into an Insert bar that appears above the document window instead of grouped with the right-hand panels; this space-saving option is a favorite among many Dreamweaver users. To get the Insert toolbar, drag it either under the Application bar, or, if you have a really wide monitor, into the Application bar. Alternatively, just choose Classic from the Workspace Switcher menu (see Figure 1-6) to convert the Insert panel into an Insert bar.

Note

Adding elements to your web page this way may feel like magic, but the Insert panel is really just a quick way to add code to a page, whether it’s HTML, XHTML, JavaScript, or server-side programming like PHP (see Part Six). Clicking the Images icon, for instance, simply inserts the <img> tag into the underlying HTML of your page. Of course, Dreamweaver’s visual approach hides that code and cheerfully displays a picture on the page.

When you first start Dreamweaver, the Insert panel is open. If you ever close it by mistake, you can open it again by choosing Window→Insert or by pressing Ctrl+F2 (⌘-F2). On the other hand, if space is at a premium on your screen, you can close the Insert panel and use the Insert menu instead. The commands in the Insert menu duplicate all the objects available from the Insert panel. You can even turn the Insert panel into a toolbar above the document window, as described in Figure 1-3.

The Insert panel offers nine sets of objects, each available by selecting an option from the menu at the top of the panel (see Figure 1-3, top right) or by clicking one of the tabs on the Insert toolbar (bottom image in Figure 1-3):

• Common objects. In addition to images, tables, and email links—which you’ll use frequently in everyday web design—this category of the Insert panel offers access to Dreamweaver’s template features. Templates let you build basic web-page designs that you can use over and over again on your site, speeding up page development and facilitating easy updates. See Chapter 21 for details.

• Layout objects. The objects in this category help you control the layout of a web page by organizing the page’s contents using CSS or HTML tables. In addition, this panel includes Dreamweaver’s Spry widgets that let you add interactive page elements, such as drop-down menus, and animated, collapsible panels so you can fit more information in less space on a page (see Chapter 14).

• Form objects. Want to get some input from visitors to your website? Use forms to let them make comments, order products, or answer questions. The Forms category lets you add form elements like radio buttons, pull-down menus, and text boxes (see Chapter 13). Dreamweaver includes sophisticated form validation so you can make sure visitors input the correct information before they submit a form.

• Data. Dreamweaver makes connecting your web pages to databases as easy as clicking a few buttons (OK, almost as easy; see Part Six for details). The Data category provides powerful tools that help you build dynamic pages: controls that add records to your database, for example, or that update information already in a database. Dreamweaver also includes several data tools that work without a complicated database setup. Its Spry dataset feature lets you display interactive data in a table, so visitors can sort the data by column and even change the information displayed on the page by interacting with the data—all without having to reload an additional web page (you’ll find Spry datasets discussed on Spry Data Sets).

  Note

  If you’re a longtime Dreamweaver user, you know that versions of the program before Dreamweaver CS4 displayed tool buttons in color; now it displays the buttons in the Insert panel in black-and-white—if you liked it better the old way, right-click the Insert panel and then choose Color Icons. Better yet, you can move the Insert panel back to its old location above the document window by selecting Classic from the Workspace Switcher menu (jump ahead to Figure 1-6). This action not only brings back the old Insert bar, it also adds color to all the buttons.

• Spry. Spry is a technology from Adobe that lets you easily add interactive features to your site, from drop-down navigation menus to animated effects to complex displays of data. Basically, Spry is a simple way for web designers to insert complex JavaScript programming into websites. The Spry category of the Insert panel gathers together all of Dreamweaver’s Spry features. You’ll find the same buttons spread throughout the Insert panel; for example, the Spry tools related to form validation also appear in the Form objects category, while the Spry dataset buttons are also available from the Data category.

• jQuery Mobile. jQuery Mobile is a JavaScript-powered toolset for building websites and web applications that work well on mobile devices, like Android phones and iPhones. The objects listed in this category simplify the creation of page elements like lists, form fields, and text areas for mobile-enhanced websites. You’ll learn about these new tools in Chapter 12.

• InContext Editing. If you build websites that non-web-savvy folk will update, Adobe offers a commercial service called InContext Editing, which lets nontechnical people edit web pages using a simple web-based interface. Unfortunately, while Adobe used to offer this as a standalone tool that you could use with any website, InContext Editing is now available only when you use Business Catalyst (www.businesscatalyst.com) to host your site. Owned by Adobe, Business Catalyst is a web-hosting service for web designers whose clients require sophisticated e-commerce capability, mail-list management, advanced web statistics, and automated tools to manage and update websites. The service offers hosting packages ranging from a $9 a month “starter” package to a $79 per month “pro” package. Dreamweaver includes a Business Catalyst panel that lets you download and install a Dreamweaver extension (see Create a Shortcut Cheat Sheet for more on extensions) to help you manage sites hosted by Business Catalyst. Of course, if you already have a web hosting company or don’t want to use Business Catalyst, you should steer clear of this category.

• Text objects. This category of objects lets you format type—make it bold or italic, for instance. Unfortunately, clicking some of the buttons in this category can introduce HTML errors if you don’t know what you’re doing. The Property inspector (introduced on The Property Inspector, and discussed in depth in Chapter 3) is a much more effective tool for creating headlines, bulleted lists, and bold and italic text. The one useful button in this category is Characters, which lets you insert text that’s not easy to type on a keyboard, like the trademark and copyright symbols (Adding Special Characters discusses how to insert special characters like these into a web page).

• Favorites. Perhaps the most useful category, Favorites, can be anything you want it to be. That is, after you discover which objects you use the most (like the Image command, if you work with a lot of graphics). You can add those objects to this set of personal tools. You may find that once you populate this category, you’ll never again need the other categories in the Insert panel. For instructions on adding objects to your Favorites tools, see the box on the opposite page.

• ASP, PHP, ColdFusion. If you’re building database-driven web pages, you’ll discover yet another category of objects. The exact name of the category depends on the server model you use (PHP, Microsoft’s Active Server Pages, or Adobe’s ColdFusion server, for example), but it always contains frequently used code snippets for the appropriate programming language. See Part Six for more on working with these technologies.

The Files Panel

The Files panel is another Dreamweaver element you’ll turn to frequently (see Figure 1-4). It lists all the files—web pages, graphics, Flash movies, and so on—that make up your website. It gives you a quick way to open pages you want to work on (just double-click the file name in the panel). It also lets you switch among different sites you’re building or maintaining, and provides some valuable tools for organizing your files. If the Files panel isn’t open, summon it by choosing Window→Files or by pressing F8 (Shift-⌘-F on Macs).

Figure 1-4. The Files panel provides a bird’s-eye view of your site’s files. But it’s more than just a simple list—it also lets you quickly open files, rename and rearrange them in the site, and more. You’ll learn about the Files panel in detail on page 728.

To use the Files panel effectively, you need to create a local site for each website you work on—setting up a site is a specific Dreamweaver task, and one of the most important steps in using Dreamweaver correctly. You’ll learn how to set up a site later in this chapter, starting on Setting Up a Site.

FREQUENTLY ASKED QUESTIONS: Adding Favorite Objects to the Insert Panel

Help! I’m tired of wading through so many pull-down menus to find all my favorite Dreamweaver objects. How can I see my most-used objects in one place?

Dreamweaver includes a marvelous productivity tool: the Favorites category of the Insert Panel. It lets you collect your most-used objects in a single place, without any interference from the buttons for HTML tags and objects you never use. Maybe you use the Common category’s Email Link object all the time, but never touch the Named Anchor object, for example. This is the timesaving feature for you.

To add objects to the Favorites category, right-click (Control-click) anywhere on the Insert panel (or the Insert toolbar if you’re using Dreamweaver’s Classic view as described on Workspace Layouts). From the contextual menu, choose Customize Favorites to open the Customize Favorite Objects window. All the objects available in all the Insert categories appear in the left-hand list. Select an object and then click the >> button to add that object to your Favorites. (You can view the objects for just one category by selecting the category from the “Available objects” menu.) Repeat with other objects, if you like.

To rearrange the order of the toolbar buttons, click one and then click the up or down arrow to move it in the panel. Depending on whether you display the panel buttons with or without labels, buttons you put higher in the list appear either toward the top of the panel or toward the beginning of the rows of buttons. You can even use the Add Separator button to insert a thin gray line between buttons—to separate one group of similar objects (graphics-related objects, say) from another (such as Form objects). Unfortunately, you can’t group Favorite objects into submenus. Each item you add becomes a single button on the Insert bar.

To delete a button or separator from the list, select it and then click the trash icon. Click OK to close the window and create your new list of Favorite objects, which are now available under the Favorites category of the Insert panel.

After you create your Favorites tab, you can always add more objects (or delete ones you no longer need) by right-clicking (Control-clicking) the Insert bar and then, from the shortcut menu, choosing Customize Favorites.

The Property Inspector

After dropping in an image, table, or anything else from the Insert panel, you can use the Property inspector to fine-tune its appearance and attributes. Suppose, for example, that your boss has decided she wants her picture to link to her personal blog. After highlighting her picture in the document window, you can use the Property inspector to add the link.

The Property inspector (Figure 1-5) is a chameleon. It’s aware of what you’re working on in the document window—a table, an image, some text—and displays the appropriate set of properties (that is, options). You’ll use the Property inspector extensively in Dreamweaver.

Figure 1-5. If you don’t see the Property inspector, open it by choosing Window→Properties or pressing Ctrl+F3 (⌘-F3).

For now, though, here are two essential tips to get you started:

• In the Property inspector, double-click any blank gray area to hide or show the bottom half of the inspector, where Dreamweaver displays a set of advanced options. (It’s a good idea to leave the inspector fully expanded, since you may otherwise miss some useful options.)

• At its heart, the Property inspector simply displays the attributes of HTML tags. The src (source) attribute of the image tag (<img>), for instance, tells a web browser where to find an image file.

  You can most easily make sure you’re setting the properties of the correct object by clicking its tag in the Tag selector (see The Insert Panel).

Note

When you work with text, the Property inspector has two buttons—labeled HTML and CSS—that let you work with either the HTML properties related to text, or create CSS styles. You’ll read more about this in Chapter 3, but here’s a quick pointer: when you want to create paragraphs, headlines, bulleted lists, and bold or italic text, click the HTML button. When you want to change the appearance of text (its font, color, and size), use the CSS button—or, better yet, use the CSS Styles panel, described on Creating Styles, to choose from a much wider range of formatting options.

The Application Bar

The Application bar’s main purpose in life is to let you switch between document views (for example, between Code and Design view), to configure the program’s windows, and to give you a shortcut for getting help, defining sites, downloading extensions, and tapping Adobe’s online services (such as BrowserLab and Acrobat.com). You can find all the options listed here in the program’s main menus, too. Figure 1-6 shows its location on Windows PC (top) and on a Mac (bottom).

Figure 1-6. Dreamweaver’s Application bar looks slightly different on Windows (top) and Macs (bottom).

Here’s what it offers:

• The Code/Design View menu lets you switch between the visual Design view (a rough approximation of what a page will look like in a web browser) and the raw HTML. You can also see both the design and code at the same time by selecting Split view. Code View has more on that option.

  Tip

  The Application bar’s Code/Design view options are mostly duplicated on the Document toolbar using easier-to-access buttons. However, the Split Code option (which you won’t find on the Document toolbar) is useful if you love to hand code. Selecting this option lets you view the code for a page in two windows, side-by-side. This way, you can work on both the HTML at the top of a web page, and the HTML at the bottom of the page without scrolling. Or better yet, you can work on the CSS of a page on one half of the document window and the HTML for that page on the other half.

• The Extensions menu gives you quick access to Dreamweaver’s Extension Manager and the Adobe Exchange website. Extensions are add-on features (some are free and some cost money) that let you do more with Dreamweaver. You’ll find extensions discussed on Create a Shortcut Cheat Sheet. You can also use the menu to open a Widget Browser to locate and install prepackaged programs that add JavaScript-driven interactivity to a page. You’ll learn about the Widget Browser on The Widget Browser.

• The Sites menu lets you “define” a new site or “manage” the sites you already have. You’ll learn a lot more about Dreamweaver sites later in this chapter (in Setting Up a Site on page 39), but basically a site is defined as the folder where you keep all the files that make up one particular website. If you’re designing more than one website, you can define multiple sites within Dreamweaver.

• The Workspace Switcher lets you reorganize Dreamweaver’s layout of windows. You can choose one of the workspaces supplied by Dreamweaver or, as discussed on Workspace Layouts, you can design your own layout to create the ultimate workspace.

• The Community Help box is a search function. But unlike the “Help” box you find in most programs, this search field lets you search the entire Internet for useful information related to Dreamweaver. Type a search term in the box and then hit Enter (Return)—the Adobe Help program launches, loading a web page related to your search, and offering a list of links to other, related web pages. This help function is a bit better than just using Google—you never know what that’ll turn up—since Adobe handpicks all the sites that turn up in a search. So you won’t be getting “helpful” advice from the blogger down the street who just bought Dreamweaver and decided to post his thoughts.

• The CS Live menu provides access to online services from Adobe, such as useful web tools like Adobe BrowserLab, which lets you preview a web page in a variety of browsers and operating systems. It’s also a gateway to less useful (at least for web designers) tools such as Adobe Story (for collaborative screenwriting) and Acrobat.com (can you say “cross-marketing vehicle” three times fast?) The actual contents of this menu are pulled off the web each time you use Dreamweaver, so the options you see will vary.

Organizing Your Workspace

Dreamweaver’s basic user interface includes the document window, Application bar, Property inspector, and panel groups. All these windows act like a unified whole; that is, if you resize one window, the other windows resize to fit the space. For example, you can drag the left edge of the panel groups (circled in Figure 1-7) to the left to make the panels wider, or to the right to make them thinner. The other windows that touch the panels (the document window and the Property inspector) change their widths accordingly. This kind of joined-at-the-hip interface is common in Windows applications, but may feel a bit weird for Mac enthusiasts. (If you prefer the “floating palette” look and feel common to a lot of Mac programs, you can set up Dreamweaver that way as well—see Floating panels.)

You can control the panel in many ways to customize your workspace:

• You can open a particular panel from the Window menu. For example, to open the Files panel, choose Window→Files.

• If the panel is closed but its tab is visible (for example, the Insert tab in Figure 1-7), double-click the tab to open it. Double-click the tab again, and the panel (and any other panels grouped with it) closes.

• Drag the horizontal line between an open panel and another panel to resize a panel. For example, to make the CSS Styles panel taller, grab the thick border line between that panel and the Business Catalyst panel and drag down. The CSS Styles panel gets taller and the open panel below it gets shorter.

  

  Figure 1-7. You’re not limited to keeping all of Dreamweaver’s panels on the right side—you can move individual panels to other parts of the screen. In this figure, grabbing the Files panel’s tab lets you drag the panel to the left edge of the screen. A ghosted version of the panel appears as you do. When you see a thick blue line on the screen’s edge, drop the tab to create a panel that takes up the entire edge of the screen. In other words, in this figure, dropping the Files panel tab creates a full-height column on the left edge of the screen composed entirely of Files panel objects—the document window and Properties inspector move to the right to make room.

• To completely close a panel so that even its tab no longer appears, right-click (Control-click) the tab and then choose Close. (Choose Close Tab Group to hide the tab and any other tabs it’s grouped with.) To get the panel back, you need to use the Window menu or use the panel’s keyboard shortcut—for example, the F8 key (Shift-⌘-F on Macs) opens and closes the Files panel.

• If you want to hide all windows except for documents, choose Window→Hide Panels or press F4—a useful trick when you want to maximize the amount of screen space dedicated to showing the web page you’re working on. To bring back all of Dreamweaver’s administrative windows, press F4 again or choose Window→Show Panels.

Floating panels

As mentioned earlier, you can drag a panel by its tab to another part of the screen. Dragging it to the edge of the screen docks the panel on that edge. However, if you drag a panel and drop it when it’s not near a screen’s edge, then it becomes a floating panel (see Figure 1-8). Floating panels are often nuisances, since they hide whatever’s beneath them, so you often end up having to move them out of the way just to see what you’re doing. However, they come in handy when you have two monitors. If that’s the case, you can dedicate your main monitor to the document window and Property inspector (and maybe your most important panels), and then drag a bunch of floating panels onto your second screen.

Figure 1-8. Here, the Files, Insert, and CSS Styles panels float. Each panel has its own Context menu icon (circled on the right side of Files panel). Clicking the button reveals a shortcut menu that lets you work with features specific to that panel. This menu also offers generic panel actions, such as closing the panel. If you find you’ve made a mess of your workspace and want to return to the way Dreamweaver normally lays out its panels, use the Workspace Switcher, discussed next.

To “unfloat” a floating panel, simply drag it to the edge of your screen (if you have more than one monitor, drag the panel to one of the edges of your main monitor). If you already have panels at that edge, drag the panel to either the bottom of the panels (to dock it at the bottom of the column of panels), between other panel groups (to insert that panel in its own group between the other panels) or next to another panel’s tab to group the panels together.

Tip

Drag a panel to either side of a docked column of panels to create a second column. In other words, you can create two side-by-side columns of panels.

Iconic panes

As if you didn’t already have enough ways to organize your panels, Dreamweaver includes yet another way to display them. By clicking the “Collapse to Icons” button at the top right of a column of panels, you can shrink the panels to a group of much smaller icons. To reopen the controls for a panel you shrunk, just click the icon. For example, in Figure 1-9, clicking the CSS Styles icon opens the CSS Styles panel to the left. Once you finish working with the panel, and click elsewhere on the screen, the pop-up panel disappears. This so-called iconic view is particularly good if you have a small monitor and need to preserve as much screen real estate as possible.

Figure 1-9. Iconic panes let you preserve screen real estate. To return to normal-width panels, click the Expand Panels button.

Workspace Layouts

Sometimes too much choice is a bad thing, and even though Dreamweaver’s interface means you can pretty much organize its windows and panels any way you like, it also means you can easily accidentally click or drag the wrong thing and suddenly find panels strewn across the screen or completely gone.

Fortunately, Dreamweaver includes a wonderful, timesaving productivity enhancer that ensures you always have your windows organized the way you want, and you can quickly return to that setup if you accidentally move your panels. The Workspace Layouts feature lets you save the position and size of Dreamweaver’s panels and windows as a custom “layout” that you can return to by simply selecting the layout’s name from the Workspace Switcher menu in the Application bar or by choosing Window→Workspace Layout.

For example, when you work on a database-driven website, you may like to have the Application panel group and the Snippets panel open, but keep the CSS panel tucked away. When you work on design-heavy sites, on the other hand, you probably want the CSS panel open, but could care less about the Tag inspector. You can create a different layout for each situation and then simply switch between them.

Note

Dreamweaver CS3 veterans should check out the “Classic” layout, which puts the Insert panel back up at the top of the screen. Even if you’re new to Dreamweaver, the Classic layout is a great way to free up space in the already crowded grouping of panels on the right edge of the screen.

In addition, Dreamweaver comes preprogrammed with eight workspaces designed to configure the interface to match the needs of designers, coders, application developers, and those who like to spread their windows and panels across two monitors. You should try each one (use the Workspace Switcher menu in the Application bar) to see which you like best. You can then tweak that layout by closing or opening other panels, rearranging panels, and so on, until you find the perfect layout for you. Then just save it as a custom layout (as described below) so you can call it up any time. Here are a few other tips when you’re ready to lay down a custom layout:

• Open the panels you work with most frequently. For example, choose Window→Files to open the Files panel.

• Increase or decrease the height of a panel by dragging up or down the empty space to the right of a panel or panel-group name (see Figure 1-10).

  

  Figure 1-10. Resizing a panel is as easy as dragging up or down (circled at bottom of Insert panel on the right). If you’re lucky enough to have a large monitor, it’s often helpful to put the Files panel by itself on either the left or right side of the screen.

• You can move a panel to another area of your screen by dragging its tabs as described earlier. This trick is especially useful if you have a large monitor, since you can place one group of panels on the right edge of the monitor and another group either next to the first one or on the left side of the monitor. As described in Floating panels on page 34, you can also create floating panels. If you’ve got two monitors hooked up to your computer, you can spread the panels across both screens.

To save your layout, select New Workspace from the Workspace Switcher menu in the Application bar (see Figure 1-11) or, alternatively, choose Window→Workspace Layout→New Workspace. The Save Workspace dialog box appears; type in a name for the layout and then click OK. (If you type in a name that’s the same as one you already used, Dreamweaver lets you know and gives you the option to replace the old layout with the new one. That’s the only way to update a workspace layout you previously created.) Dreamweaver saves your new layout.

Figure 1-11. The Application bar’s Workspace Switcher menu lets you choose one of eight workspaces already set up in the program, or a workspace you create. For example, the Missing Manual option pictured here is a custom workspace. If you accidentally move a panel out of position, return the workspace to its original setup by selecting the Reset option at the bottom of this menu.

Tip

The Workspace Layout feature is also handy if you share your computer with other people. You can create your own workspace layout (“Bob’s Workspace,” for example) with all the panels and windows exactly where you like them. Then, when you go to use the computer and the bozo before you has rearranged the entire workspace, just select your layout from the Application bar or the Window→Workspace Layouts menu.

To switch to a layout you already saved, simply select your workspace from the Application bar or choose Window→Workspace Layout→Name of Your Layout. After a brief pause, Dreamweaver switches to the selected layout.

Setting Up a Site

Whenever you build a new website or want to edit one that you created elsewhere, you have to introduce Dreamweaver to it—a process called setting up a site. This is the most important first step when you start using Dreamweaver, whether you plan to whip up a five-page site, build a 1,000-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 timesaving site-management tools, such as the link checker (see Finding Broken Links), Library items (Chapter 20), templates (Chapter 21), and FTP tool for moving your files to a web server (Chapter 19), you have to set up a site.

There are a lot of ways to configure a site, depending on your needs. For example, if you’re ready to move pages to the Web, you need to tell Dreamweaver how to connect to your web server. But you only need to do a couple of things to get started using Dreamweaver effectively:

1. Choose Site→New Site to open the Site Setup window (see Figure 1-12).

   You only need to provide a couple of pieces of information.

2. In the Site name field, type a name for your site.

   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.

3. Click the folder icon to the right of the Local site folder field.

   The Choose Root Folder window opens, where you select a folder on your hard drive to serve as your local site’s main (root) folder. You’ll store all of your site’s files—HTML documents and graphics, CSS files, and other files that make up your site—in this folder.

   Note

   Another way to think of the local site folder: It’s the folder on your computer in which you’ll put your site’s home page.

4. Browse to and select a folder for your site’s files.

   Figure 1-13 demonstrates the process for Windows and Macs. If you’re editing an existing site, select the folder that contains the site’s files. If you’re creating a new site, create a folder for that site using the New Folder button in this window.

   

   Figure 1-12. The Site Setup window lets you tell Dreamweaver about your site—where you store your files, how to connect to your web server so you can upload files to the Internet, and so on. To get started, you only need to provide the two pieces of information in this window. You’ll find the other categories discussed later: the Servers category lets you connect to a web server to upload files to your website (Chapter 19) and point Dreamweaver to a “testing server” for complex, database-driven websites (Part Six); the Version Control category is for those using the (very complex) Subversion system (most people—the author of this book included—never use this option, but if you’re curious, see the box on page 800 for more information). You’ll find the Advanced settings discussed in step 5 below and elsewhere in this book.

5. For a few additional options, select Advanced from the left-hand list of setup categories (see Figure 1-14).

   This step is optional and you can happily skip it to begin building web pages. You’ll find most of the categories in the Advanced Setting category discussed elsewhere in the book, but you may want to visit the options in the Local Info category:

   • The Default Images folder field lets you select (or create) a folder inside your site folder to hold the images you’ll use on your web pages. Choosing an images folder is useful only if you tend to add images from outside of your site folder—for example, if you have images sitting on your desktop or in another folder on your hard drive. If that’s the case, Dreamweaver automatically copies those files to the images folder you specify here. (Dreamweaver will still copy image files to your site without setting this option, but each time you add an image from outside your site folder, you have to tell Dreamweaver where to save the file. If you’ll primarily use images saved somewhere in your site, skip this setting.)

     

     Figure 1-13. The dialog box for selecting a folder in Windows (top) is pretty much the same as the one for Macs (bottom). You can verify which folder you’re about to select by looking in the Select field for Windows (circled in top image) or in the path menu on a Mac (circled in bottom image).

     

     Figure 1-14. You can happily use Dreamweaver without ever visiting the Advanced Settings options listed in the left-hand column of the Site Setup window. The Local Info options are discussed above, and the other options are discussed elsewhere in this book: Cloaking on page 794, Design Notes on page 807, File View Columns on page 729, Templates in Chapter 21, and Spry on page 197.

   • The Site-wide Media Query file field is useful when designing a site that visitors using tablets, mobile phones, as well as desktop web browsers, will visit. Media queries are a CSS-based tool that let you set up different formatting rules for a page based on (among other things) the screen resolution of the device used to visit your site. In other words, you can design a site that displays differently on the small screen of a mobile device (for example, it may show just a single column of content) than it does on the much larger screen of a desktop browser (where you can fit, for example, a three-column design). You’ll learn about media queries in Chapter 12.

   • The Links relative to setting determines how Dreamweaver writes links to other pages in your site, links to images in your site, and links to external files, like Cascading Style Sheet files, Flash movies, and so on. Unless you’re an experienced web designer, stick with the normal “Document” setting here—you can read about the difference between (and uses for) Document and Site Root relative links on Understanding Links.

   • Type the web address for your site in the Web URL box: for example http://www.chia-vet.com/. 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 website might look something like this: www.somecollege.edu/~bob. Or you might be responsible for maintaining just part of a larger site—sometimes called a “sub site.” Regardless, just type the address you normally type into a web browser to visit your site. For example, www.mybigcompany.com/marketing.

   • Leave the “Case-sensitive links checking” box unchecked. This is useful only when you have web pages and files on a Unix server that allows files with the same name but different letter cases: for example, HOME.html, home.html, or HoMe.html. Since Windows machines and Macs don’t let you do this, you’ll probably never have a site that has files named like this.

   • Keep the Enable Cache box checked. Dreamweaver creates a site cache for each site you set up. That’s a small database that tracks pages, links, images, and other site components. The cache helps Dreamweaver’s site-management tools avoid breaking links, lets Dreamweaver warn you when you’re about to delete important files, and lets you reorganize your site quickly. The only reason to uncheck this box is if you have a really large website (tens of thousands of pages and images) and you notice that Dreamweaver is really slow whenever you begin to work on the site, move a file, change a file’s name, delete a file, or perform one of Dreamweaver’s other “site management” tasks. In that case, you may see a box saying “updating the site cache” or “checking links” that stays open and prevents you from using Dreamweaver for a minute or more—basically your site is so big that Dreamweaver has to spend a lot of time keeping track of your files and links.

6. Click the Save button to finish the site setup process.

   Your site’s files (if there are any yet) appear in the Files panel. Now you’re ready to create web pages and take advantage of Dreamweaver’s powerful site-building tools.

Note

Dreamweaver lets you set up multiple websites, a handy feature if you’re a web designer with several clients, or if your company builds and manages more than one site. To define an additional site, choose Site→New Site and then repeat the steps starting on Setting Up a Site. You can then switch from one site to another using the Sites menu in the Files panel.

Creating a Web Page

After you define a site, you’ll want to start building pages. Just choose File→New or press Ctrl+N (⌘-N on a Mac) to open Dreamweaver’s New Document window (see Figure 1-15). It’s a little overwhelming at first. You have so many options it’s hard to know where to start. Fortunately, when you just want to create a new HTML file, you can skip most of these options.

Figure 1-15. The New Document window lets you create nearly every type of web document under the sun. Dreamweaver CS5.5 includes a set of prepackaged CSS layouts that use the latest web design techniques, including HTML5. You can learn more about these CSS layouts in Chapter 10.

To create a basic HTML file for a web page:

1. From the left-hand list of document categories, choose Blank Page.

   The Blank Page category lets you create a new empty document—maybe a web page or something a bit more esoteric, like an XML file (see Storing Data in an XML File for more on XML), an external JavaScript file, or one of the several server-driven pages, such as a PHP file (discussed in Part Six).

   Both the Blank Template and “Page from Template” categories relate to Dreamweaver’s Template feature discussed in Chapter 21. The “Page from Sample” category lets you choose from several files with already-created designs. Most of the designs are old and left over from earlier versions of Dreamweaver, aren’t very attractive, and don’t use the best techniques for building a web page. However, Dreamweaver CS5.5 includes some starter pages for creating mobile-only websites and web applications. You can learn more about these on jQuery Mobile. 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. From the Page Type list, choose HTML.

   You can create other types of documents, too, most of which you’ll learn more about later in this book, such as PHP pages for database-driven sites (see Part Six of this book), XSLT files for processing XML (Chapter 28), templates (Chapter 21), Library items (Chapter 20), and CSS files (Chapter 5).

   UP TO SPEED: Terms Worth Knowing

   During the tutorial in these pages—and, indeed, everywhere in Dreamweaver—you’ll encounter a few terms frequently heard at web designer luncheons:

   Root folder. The first rule of managing a website is that every piece of the site you’re working on—web page (HTML) documents, images, sound files, and so on—must sit in a single master folder on your hard drive. This folder is the root folder for your website, and because it’s on your computer, it’s called the local root folder, though Dreamweaver calls it your local site folder. The root (a.k.a site folder) is the master, outer, main folder—think of it as the edge of the known universe for that site: Nothing exists outside the root. Of course, to help organize your site’s files, you can include any number of subfolders within that main folder.

   When you finish creating your site on your computer, you’ll move the files in your local root folder onto a web server for the world to see. You call the folder where you place your site files on the server the remote root folder.

   Local site. The usual routine for creating web pages goes like this: You create the page on your own computer—using a program like Dreamweaver—and then you upload it to a computer on the Internet called a web server, where your handiwork becomes available to the masses. So, it’s very common for a website to exist in two places at once, one copy on your computer and the other on the server.

   The copy on your computer is called the local site, or the development site. Think of the local site as a sort of staging ground, where you build your site, test it, and modify it. Because the local site isn’t on a web server, the public can’t see it and you can freely edit and add to it without affecting the pages your visitors see (they’re on the remote site, after all).

   Remote site. When you add or update a file, you move it from your local site to the remote site. The remote, or live, site is a mirror image of your local site. Because you create the remote site by uploading your local site, the server folder has the same structure as your local site folder, and contains the same files. Only polished, fully functional pages go online to the remote site; save the half-finished, typo-ridden drafts for your local site. Chapter 19 explains how to use Dreamweaver’s FTP features to define and work with a remote site.

   (If you’re using Dreamweaver’s database features, by the way, you’ll encounter yet another term: a testing server. You’ll find the lowdown on this kind of server, which you use to test database features, on Dynamic Websites: The Setup.)

3. From the Layout list, choose “<none>.”

   This choice creates a blank document. The other choices (“1 column elastic, centered”, “1 column elastic, centered, header and footer”, and so on) are predesigned page layouts. These designs (not to be confused with the designs under the “Page from Sample” category) use CSS, which you’ll learn much more about starting in Chapter 4. Because CSS-based layout can be tricky, Dreamweaver includes all the code you need to create many of the most common types of page designs. You’ll learn more about this feature in Chapter 10.

4. Select a document type from the DocType menu.

   Selecting a doctype, or document type, identifies the type of HTML you’ll use to create your page. It affects how Dreamweaver writes the HTML code and how a web browser understands it. Fortunately, since Dreamweaver writes all the code for you, you don’t need to worry about the subtle differences between the different document types.

   XHTML 1.0 Transitional is the normal setting in Dreamweaver, but HTML 4.01 Transitional, HTML 4.01 Strict, and XHTML 1.0 Strict are also fine choices. The transitional doctypes let you use a few HTML tags and properties that have been phased out of the strict types. Most notably, transitional doctypes can use the “target” property for links—a simple way to force links to open in a new browser window.

   If you don’t really understand or care about doctypes, just select HTML 4.01 Transitional. But make sure you avoid None (which can force browsers to display pages in what’s called “quirks mode” and makes perfecting designs difficult), XHTML Mobile, and XHTML 1.1 (which is not only obsolete, it also requires a special setting on your web server to work properly).

   If you like to live on the technological edge of web development, you can choose HTML5. HTML5 offers a simplified document type, plus a whole range of new HTML tags and features. Unfortunately, Dreamweaver CS5.5 doesn’t offer ready access to these new HTML5 tags or features—in other words, you won’t find any of the new tags in the Insert panel, or tools for using cool new features like the <canvas> tag for drawing on a web page. However, CS5.5 does include “code-hinting,” described on Code Hinting, to make hand-typing HTML5 tags faster.

   Tip

   If you don’t want to deal with the New Document window every time you create a page, choose Edit→Preferences in Windows (Dreamweaver→Preferences on a Mac). In the Preferences dialog box, click the New Document category and then turn off the “Show New Document Dialog on Control-N” checkbox.

   While you’re at it, you can specify the type of file Dreamweaver creates whenever you press Ctrl+N (⌘-N). For example, if you usually create plain HTML files, choose HTML. But if you usually create dynamic pages, choose a different type of file—like PHP, for example.

   With these settings, pressing Ctrl+N (⌘-N) instantly creates a new blank document of your choosing. (Choosing File→New, however, still opens the New Document window.)

5. Click Create.

   Dreamweaver opens a new, blank web page ready for you to save and title (see Figure 1-16).

   

   Figure 1-16. Here’s 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 then entering a descriptive title.

6. Choose File→Save.

   The Save As dialog box appears. You need to save the file somewhere inside your local root folder. You can save it inside any subfolder within the root folder as well.

7. Type a name for the file and then click Save.

   Make sure the name doesn’t contain spaces or any characters except letters, numbers, hyphens, and underscores, and that it ends in either .html or .htm.

   Although most operating systems let you save files with long names, spaces, and characters like #, $, and &, some browsers and servers have trouble interpreting anything other than letters and numbers.

   Furthermore, web servers rely on file extensions like .htm, .html, .gif, and .jpg to know whether a file is a web page, graphic, or some other type of file. Dreamweaver for Windows automatically adds the extension to your saved document names. But on the Mac—which lets you save files without extensions—make sure the file ends in the suffix .html or .htm when you save it.

8. At the top of the document window, click inside the Title box and then type a name for the page.

   Every new document Dreamweaver creates has the unflattering title “Untitled Document.” If you do a quick search on Google for “Untitled Document,” you’ll find (at the time of this writing) 27,500,000 results (obviously there are still some people who need to pick up a copy of this book). Dreamweaver probably created most of those pages. You should change this to a descriptive title indicating the main topic of the page, like “Contact Chia Vet,” “About Chia Vet’s Chia Pet Services,” or “Technical Specifications for the Anodyne 3000 Indoor Lawn Mower.” Not only is replacing “Untitled Document” more professional, but providing a descriptive title can improve a web page’s ranking among search engines.

The Dreamweaver Test Drive

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 website for the fictional company Chia Vet.

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 for 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 already use Dreamweaver and want to jump right into the details of the program, feel free to skip this tutorial. (And if you’re the type who likes to read first and try second, read Chapters Chapter 2 through Chapter 5 and then return to this point to practice what you just learned.)

Note

The tutorial in this chapter requires the example files from this book’s website, http://www.sawmac.com/dwCS5.5/. Click the Download Tutorials link to download the files. The tutorial files are stored as ZIP files, a type of file that compresses a lot of different files into one, smaller archive file.

Windows folks should download the file and then double-click it to open the archive. Click the Extract All Files option and 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 download and decompress the files, you should have an MM_DWCS5.5 folder on your computer, containing all the tutorial files for this book.

Phase 1: Getting Dreamweaver in Shape

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

First, make sure your preferences are all set:

1. If it isn’t already open, start Dreamweaver.

   Hey, you’ve got to start with the basics, right?

2. Choose Edit→Preferences (Windows) or Dreamweaver→Preferences (Mac).

   The Preferences dialog box opens, listing a dizzying array of categories and options (see Figure 1-17).

   

   Figure 1-17. Dreamweaver’s Preferences dialog box is a smorgasbord of choices that let you customize the program to look and work the way you want.

3. In the Preferences dialog box, select the Invisible Elements category and then turn on the fourth checkbox from the top, labeled “Line Breaks” (cirlcled in Figure 1-17).

   Sometimes, when you paste text from other programs, like Microsoft Word or an email program, Dreamweaver displays separate paragraphs as one long, single paragraph broken up with invisible characters called line breaks (for you HTML-savvy readers, this is the <br> tag). Normally, you can’t see the line break character in Dreamweaver’s Design view. This setting makes the character visible in that view—represented in the document window by a little gold shield. The shield gives you an easy way to select a line break and remove it, either to create a single paragraph by combing the text before and after the line break, or to create two paragraphs.

4. Click OK.

   The Preferences dialog box closes. You’re ready to get your workspace in order. As noted at the beginning of this chapter, Dreamweaver offers many windows to help you build web pages. For this tutorial, though, you need only three: the Insert panel, the document window, and the Property inspector. But, for good measure (and to give you a bit of practice), you’ll open another panel and rearrange the workspace a little. To get started, have Dreamweaver display the space-saving Classic workspace.

5. From the “Workspace Switcher” on the Application bar, select Classic (see Figure 1-18), or go to Window→Workspace Layout from the main menu bar and then select Classic from the drop-down menu.

   If you see Classic already selected, choose Reset “Classic”, which moves any panels that were resized, closed, or repositioned back to their original locations. The Classic workspace built into Dreamweaver puts the Property inspector at the bottom of the screen, turns the Insert panel into an Insert toolbar that appears either in the Application toolbar or directly below it, opens the CSS Styles and Files panels on the right edge, and displays two other groups of closed tabs.

   

   Figure 1-18. The Dreamweaver Welcome screen pictured in the middle of this figure lists recently opened files in the left column. Clicking one of the file names opens that file for editing. The middle column provides a quick way to create a new web page or define a new site. In addition, you can access introductory videos and other getting-started materials from this screen (in the right-hand panel). You see the Welcome screen only when you have no other web files open.

   You only need the Databases panel when you work with database-driven websites, so, even though the panel is currently closed, there’s no reason to keep its tab (and the tabs for the other database-related panels) around, so you’ll close that group of tabs next.

6. Right-click (Control-click) on the Databases tab (circled in Figure 1-18), and choose Close Tab Group from the pop-up menu.

   The Databases panel and its three tabs disappear (you can always get it back by selecting Window→Databases). The CSS Styles panel is very useful; it also comprises three panes stacked one on top of the next, so giving it plenty of vertical room is a good idea.

7. Drag the thick line that appears between the top of the Files panel and the bottom of the CSS Styles panel (circled in Figure 1-19) until the Files panel is about half the size of the CSS Styles panel.

   Now the workspace looks great. It displays most of the panels you need for this tutorial (and for much of your web-page building). Since this arrangement of windows is so useful, you’ll want to save it as a custom layout (OK, maybe you don’t want to save the layout…just play along).

   

   Figure 1-19. Make a panel taller or shorter by dragging the thick line separating two panels (circled). The options in some panels, like the CSS Styles panel here, are dimmed if you don’t have a web page open. You can also minimize a panel group by clicking its tab. For example, clicking the “Files” tab in this figure hides the Files panel (the list of files), and expands the CSS Styles panel—a good technique if you need more space for a particular panel.

8. From the Application bar’s Workspace Switcher menu, choose New Workspace.

   The Save Workspace window appears, waiting for you to name your new layout.

9. Type Missing Manual (or any name you like), and then click OK.

   You just created a new workspace layout. To see if it works, switch to another one of Dreamweaver’s layouts, see how the screen changes, and then switch back to your new setup.

10. From the Workspace Switcher menu, choose App Developer Plus.

    This step moves the panels around quite a bit, and even displays some panels in Dreamweaver’s iconic mode (as described on Iconic panes). This layout’s a bit too complicated for our needs, so you’ll switch back.

11. From the Workspace Switcher menu, choose Missing Manual (or whatever you named your custom space in step 9).

    Voilà! Dreamweaver sets up everything the way you want it. You can create multiple workspaces for different websites or different types of sites.

Phase 2: Creating a Website

As discussed on Setting Up a Site, whenever you use Dreamweaver to create or edit a website, your first step is always to show Dreamweaver the location of the site folder (also called the root folder)—the master folder for all your website’s files. You do this by setting up a site, like so:

1. Choose Site→New Site.

   The Site Setup window appears. You only need to provide two pieces of information to get started.

2. Type Test Drive in the Site Name field.

   The name you type here is solely for your own reference, so you can identify the site in Dreamweaver’s Site menu. Dreamweaver also asks where you want to store the website’s files. In this example, you’ll use one of the folders you downloaded from this book’s website (at other times, you’ll choose or create a folder of your own).

3. Click the folder icon next to the label “Local site folder.”

   The Choose Root Folder window opens, so you can choose a folder on your hard drive to serve as your local root folder. (This is the folder on your computer where you’ll store the HTML documents and graphics, CSS, and other web files that make up your site.)

4. Browse to and select the Chapter01 folder located inside the MM_DWCS5.5 folder you downloaded earlier. Click the Select (Choose) button to set this folder as the local root folder.

   This process is discussed in step 3 on Setting Up a Site. Click the folder icon to the right of the Local site folder field. At this point, you’ve given Dreamweaver all the information it needs to successfully work with the tutorial files.

   Note

   You’ll find finished versions of all the tutorials in this book in the MM_DWCS5.5 folder. The finished version of this tutorial is located in the Chapter01_finished folder.

5. Click the Save button to close the Site Setup window.

   After you set up a site, Dreamweaver creates a site cache for it (see Setting Up a Site). Since there are hardly any files in the Chapter01 folder, you may not even notice this happening—it goes by in the blink of an eye.

Phase 3: Creating and Saving a Web Page

“Enough already! I want to build a web page,” you’re probably saying. You’ll do just that now:

1. Choose File→New.

   The New Document window opens. Creating a blank web page involves a few clicks.

2. From the left-hand list of document categories, select Blank Page; in the Page Type list, highlight HTML; and from the Layout list, choose <none>. From the DocType menu in the bottom right of the window, select “HTML 4.01 Transitional.”

   HTML (and XHTML as well) actually has two “flavors.” The Transitional type keeps your pages compatible with older browsers, and gives you a wider range of HTML properties to work with. If you’ve grown up with regular HTML, it’s perfectly fine to select HTML 4.01 Transitional. (In fact, it’s even OK to select XHTML 1.0 Transitional, if you prefer.) You can even choose HTML5 if you wish—all the steps in this tutorial will create a valid HTML5 page as well.

3. Click Create.

   Dreamweaver opens a new, blank HTML page. Even though the underlying code for an HTML page differs in slight ways depending on which document type you chose (HTML 4.01 Transitional, XHTML 1.0 Strict, HTML5, and so on), you have nothing to worry about: Dreamweaver manages all that code so you don’t have to.

   If you see a bunch of strange text in the window, you’re looking at the underlying HTML; you’re in either Code or Split view. At the top left of the document window, click the Design button to tell Dreamweaver to display the page in its visual layout mode.

4. Choose File→Save.

   The Save As dialog box opens.

   Always save your page right away. This good habit prevents serious headaches if the power goes out as you finish that beautiful—but unsaved—creation.

5. Save the page in the Chapter01 folder as directions.html.

   You could also save the page as directions.htm; both .html and .htm are valid extensions for HTML files.

   Make sure you save this page in the correct folder. In Phase 2 (Phase 2: Creating a Website), you told Dreamweaver to use the Chapter01 folder as the site’s root folder—the folder that holds all the pages and files for the site. If you save the page in a folder outside the Chapter01 folder, Dreamweaver gets confused and its site-management features won’t work correctly.

   Tip

   When you save a file, you can quickly jump to the current site’s root folder. In the Save As dialog box, click the Site Root button—that takes you right to the root folder. This little trick also works when you link to a file or open a file (except on the Mac, which mysteriously lacks the Site Root button when opening a file…what’s that about, Adobe?)

6. If the document window toolbar isn’t already open, choose View→Toolbars→Document to display it.

   The toolbar at the top of the document window provides easy access to a variety of tasks you’ll perform frequently, such as titling a page, previewing it in a web browser, and looking at the HTML source code.

7. In the toolbar’s Title field, select the text “Untitled Document,” and then type in “Directions to Chia Vet Headquarters.”

   The Title field lets you set a page’s title—the information that appears in the title bar of a web browser. The page title also shows up as the name of your page when someone searches the web using a search engine like Bing or Google. In addition, a clear and descriptive title that identifies the main point of the page can also help increase a page’s rank among the major search engines.

   Dreamweaver CS5.5 includes a Browser Navigation toolbar that appears directly below the Document toolbar. It’s intended to help web designers working on complex web applications, like the WordPress blogging system or the Drupal content management system. However, it mostly just wastes vertical space. You’ll hide it now.

8. Choose View→Toolbars→Browser Navigation.

   The toolbar disappears. Now you’ll set some basic properties of the page.

9. On the Property inspector, click the Page Properties button, or choose Modify→Page Properties.

   The Page Properties dialog box opens (see Figure 1-20), letting you define the basic attributes of each web page you create. Six categories of settings control attributes like text color, background color, link colors, and page margins.

   

   Figure 1-20. Dreamweaver clearly indicates which property settings use CSS and which rely on HTML. You should avoid the category labeled “Appearance (HTML).” The options in that category add old, out-of-date code to your web pages.

10. From the “Page font” menu, select “Tahoma, Geneva, sans-serif.”

    This sets a basic font (and two backup fonts, in case your visitor’s machine lacks Tahoma) that Dreamweaver automatically uses for all the text on a page.

    However, as you’ll see later in this tutorial, you can always specify a different font for selected text.

    Next, you’ll set a basic text color for the page.

11. Next to the “Text color” label, click the small gray box. From the pop-up color palette, choose a color (a dark color like a royal blue works well).

    Unless you intervene, all web page text starts out black; the text on this page reflects the color you select here. In the next step, you’ll add an image to the background to liven up the page.

    Note

    Alternatively, you could type a color value, like #333333, into the box beside the palette square. That’s hexadecimal notation, which is familiar to HTML coding gurus. Both the palette and the hexadecimal color-specifying field appear fairly often in Dreamweaver. Dreamweaver CS5.5 even lets you specify color in other ways, such as with RGB (red-green-blue) and HSL (hue-saturation-lightness) values. See Picking a Font Color for more on setting colors in Dreamweaver.

12. To the right of the Background image field, click the Browse button.

    The Select Image Source window appears (see Figure 1-21). Use it to navigate to and select a graphic.

    

    Figure 1-21. Use the Select Image Source window to insert graphics on a web page. The Site Root button (circled) is a shortcut to your local site root—a nifty way to always know where you are when you search for a file. On the Mac, the Site Root button appears at the bottom right of the window.

13. Click the Site Root button at the top of the window (bottom of the window on Macs). Open the folder named “images,” select the file named bgPage.png, and then click the OK (Choose) button.

    In Dreamweaver, you can also just double-click a file to select it and close the selection window. For example, you can select the bgPage.png file and click the OK button—by just double-clicking the file in the Select Image Source window.

    Note

    Note to Windows Users: Normally, Windows doesn’t display a file’s extension. So when you navigate to the images folder in step 13 above, you might see bgPage instead of bgPage.png. Since file extensions are an important way people (and web servers) identify the types of files a website uses, you may want Windows to display extensions. Here’s how: In Windows Explorer, navigate to and select the MM_DWCS5.5 folder (the folder containing this book’s tutorials). Then, if you’re using Windows XP, choose Tools→Folder Options. If you’re on Vista or Windows 7, choose Organize→“Folder and search options.” In the Folder Options window, select the View tab, and then turn off the “Hide extensions for known file types” checkbox. To apply this setting to the tutorial files, click OK; to apply it to all the files on your computer, click the “Apply to Folders” button, and then click OK.

14. In the Left and Top margin boxes, type 0.

    This step removes the little bit of space web browsers insert between the contents of your web page and the top and left sides of the browser window. The size of this margin varies from browser to browser, so it’s good to set this value yourself to make sure the page appears consistently across the different browsers.

    If you like, you can change this setting to make the browser add more space to the top and left side of the page. In fact, you can even add a little extra empty space on the right side of a page. (The right margin control is especially useful for languages that read from right to left, like Hebrew or Arabic.) Note, however, that the bottom margin has no effect on the page display.

15. Click the Links category, and then add the following properties: in the “Link color” field, type #EC6206; in the “Visited links” field, type #93BD00; in the “Rollover links” field, type #779A00; and in the “Active links” color field, type #CAE0EC (see Figure 1-22).

    These hexadecimal codes specify specific web page colors (see Picking a Font Color for more on choosing colors for web pages).

    

    Figure 1-22. You can set several hyperlink properties using the Links category of the Page Properties dialog box. You can choose a different font and size for links, as well as specify colors for four different link states. Finally, you can choose whether (or when) a browser underlines links. Most browsers automatically do, but you can override that behavior with the help of this dialog box and Cascading Style Sheets

    Links come in four varieties: regular, visited, active, and rollover. A regular link is a plain old link, unvisited, untouched. A visited link is one you’ve already clicked, as noted in a browser’s History list. An active link is one you’re currently clicking (you’re pressing the mouse button down as you hover over the link). And finally, a rollover link indicates how the link looks when you mouse over it without clicking. You can choose different colors for each of these link states.

    While it may seem like overkill to have four different colors for links, the regular and visited link colors provide useful feedback to web visitors by telling them which links they’ve followed and which remain to be checked out. For its part, the rollover link gives you instant feedback, changing color as soon as you move your cursor over it. The active link color isn’t that useful for navigating a site since its color changes so briefly you probably won’t even notice it.

    Note

    Although Dreamweaver uses the term rollover link, in the world of Cascading Style Sheets, this is called a hover link.

16. Click OK to close the window and apply the changes to the page.

    You return to your document window, where you see an asterisk next to the file name at the top of the window—that’s Dreamweaver’s way of telling you that you haven’t saved a page you edited, a nice reminder to save your file frequently and prevent heartache if the program suddenly shuts down (see circled image in Figure 1-23).

    

    Figure 1-23. An asterisk next to a file name (circled) means you’ve made changes to the file, but haven’t yet saved it—quick, hit Ctrl+S (⌘-S)!

17. Choose File→Save (or press Ctrl+S [⌘-S]).

    Save your work frequently. (This isn’t a web technique as much as a computer-always-crashes-when-you-least-expect-it technique.)

Phase 4: Adding Images and Text

Now you’ll add the real meat of your web page: words and pictures.

1. On the Insert bar’s Common tab, from the Image menu, select Image (see Figure 1-24).

   Alternatively, choose Insert→Image. Either way, the Select Image Source dialog box opens. (If you didn’t choose the Classic view from the Workspace Switcher—step 5 on Phase 1: Getting Dreamweaver in Shape—then the Insert bar is really the Insert panel and it appears in the right-hand group of panels.)

   

   Figure 1-24. Some of the buttons on Dreamweaver’s Insert bar do double duty as menus (the ones with the small, black, down-pointing arrows). Once you select an option from the menu (in this case, the Image object), it becomes the button’s current setting. If you want to insert the same object again (in this case, an image), you don’t need to use the menu again—just click the button.

2. Browse to the “images” folder in the Chapter01 folder, and then double-click the banner.jpg graphics file.

   The Image Tag Accessibility window appears. Fresh out of the box and onto your computer, Dreamweaver automatically turns on several accessibility preferences. They’re designed to make your web pages more accessible to people who use alternative devices for viewing websites—for example, people with viewing disabilities who require special web browser software, such as a screen reader, which literally reads the contents of a web page out loud. Of course, images aren’t words, so they can’t be spoken. But you can identify an image by adding what’s called an alt property. This is a text description of the graphic (an alternative to seeing the image) that’s useful not only for screen-reading software, but for people who deliberately turn off pictures in their web browsers so web pages load faster. (Search engines also look at alt properties when they index a page, so an accurate description can help your site’s search-engine rankings.)

   Note

   If you don’t see the Image Tag Accessibility window, press Ctrl+U (⌘-U) to open the Preferences panel, select the Accessibility category, turn on the Images checkbox, and then click OK.

3. In the Alternate Text box, type Chia Vet. Click OK to add the image to the page.

   The banner picture appears at the top of the page, as shown in Figure 1-25. A thin border appears around the image, indicating that you have it selected. Note that the Property inspector changes to reflect the properties of the selected item, the image in this case.

   Note

   You can also add or edit the alt text in the Property inspector.

4. Deselect the image by clicking anywhere else in the document window, or by pressing the right arrow key.

   Keep your keyboard’s arrow keys in mind—they’re a great way to deselect a page element and move your cursor into place to add text or more images.

5. Press Enter to create a new paragraph. Type Directions to Chia Vet Headquarters.

   Notice that the text is a dark color and uses the Tahoma (or, if you don’t have Tahoma installed, the Geneva) font; you set these options earlier, in the Page Properties dialog box. The Property inspector now displays text-formatting options.

   Note

   The key called Enter on a Windows keyboard is named Return on most Macintosh keyboards, and Enter on the others. So on the Mac, you press either Return or Enter.

   

   Figure 1-25. When you select an image in the document window, the Property inspector reveals the image’s dimensions. In the top-left corner of the inspector, a small thumbnail image appears, as does the word “Image” (to identify the type of element you selected) and the image’s file size (in this case, 29 KB). You’ll learn about other image properties in Chapter 6.

6. In the Property inspector, click the HTML button, and then, from the Format menu, choose Heading 1 (see Figure 1-26).

   The text you just typed becomes big and bold—the default style for Heading 1. The Format menu offers a number of different paragraph types. Right now, the text doesn’t stand out enough, so you’ll change its color next.

   

   Figure 1-26. The Property inspector includes two views: HTML and CSS. The HTML view, shown here, lets you control the HTML tags Dreamweaver applies to text: bulleted lists, paragraphs, links, and so on. The CSS view provides a simple interface for creating Cascading Style Sheets so you can format text to look great.

7. Select the text you just typed.

   You can do so either by dragging carefully across the entire line or by triple-clicking anywhere inside the line. (Unlike the Format menu, which affects an entire paragraph at a time, many options in the Property inspector—like the one you’ll use next—apply only to text you’ve selected.)

8. In the Property inspector, click the CSS button to switch to CSS properties. From the “Targeted rule” menu, choose New CSS Rule. In the Color field of the Property inspector, replace the value that’s listed with #EC6206 (or select a color using the color box, if you prefer), and then hit Enter (Return).

   The New CSS Rule window opens. This window (which you’ll learn a lot more about in Chapter 4) lets you create new CSS styles. In this case, you’ll create a type of style, called a tag style, that Dreamweaver applies to any Heading 1 (or <h1> tag) on a page.

9. From the top menu, select “Tag (redefines an HTML element).”

   Notice that the field below that menu changes to display “h1.” This is called a selector—and once you define its characteristics, it tells a web browser how to display any text that is a level-1 heading (in other words, any text that has an <h1> tag applied to it).

   Don’t worry about any of the other settings in this window; you’ll learn the details soon.

10. Click OK.

    Dreamweaver has just created a new CSS style. Now, wasn’t that easy? Next, you’ll add more text.

11. Click to the right of the heading text to deselect it. Press Enter to create a new paragraph below the headline.

    Although you may type a headline now and again, you’ll probably get most of your text from word processing documents or emails from your clients, boss, or coworkers. To get that text into Dreamweaver, you simply copy it from the document and paste it into your web page.

12. In the Files panel, double-click the file directions.txt to open it.

    This file is just plain text. No formatting, just words. To get it into your document, you’ll copy and paste it.

13. Click anywhere inside the text, and then choose Edit→Select All, followed by Edit→Copy. Click the directions.html tab to return to your web page and, finally, choose Edit→Paste.

    You should see a few gold shields sprinkled among the text (circled in Figure 1-27). If you don’t, make sure you complete step 3 on Phase 1: Getting Dreamweaver in Shape. These shields represent line breaks—spots where text drops to the next line without creating a new paragraph. You’ll often see these in pasted text. In this case, you need to remove them, and then create separate paragraphs.

    

    Figure 1-27. Line breaks (circled) often crop up when you copy and paste text from other programs into Dreamweaver. Follow the steps on page 48 to make sure you can see the line breaks in Design view.

14. Click one of the gold shields, and then press Enter (Return). Repeat this for all the other gold shields in the document window.

    This deletes the line break in the document (it actually deletes the HTML tag <br>) and creates two paragraphs out of one. At this point, the pasted text is just a series of paragraphs. To give it some structure, you’ll add headings and two numbered lists.

15. Click in the paragraph with the text line “Address.” In the Property inspector, click the HTML button, and then choose Heading 2 from the Format menu.

    This step changes the paragraph to a headline—making it bigger and bolder.

16. Repeat the last step for the lines of text “Driving Directions” and “For Geocachers” (near the end of the page).

    You now have one Heading 1 and three Heading 2 headlines. To further structure the contents of this page, you’ll add one last level of headlines.

17. Click in the paragraph with the text line “From the North,” and then choose Heading 3 in the Format menu. Repeat this step for the text “From the South.”

    To add a bit more style to this page, you’ll format the Heading 3 headlines next.

18. Triple-click the headline “From the South” to select it. In the Property inspector, click the CSS button. In the field next to the color box, replace the color currently there with #779A00 and then hit Enter (Return).

    The New CSS Rule window appears again. Now you’ll create a style for formatting <h3> tags.

19. From the top menu, select “Tag (redefines an HTML element).”

    You should see h3 in the middle field.

20. Click OK.

    Notice that the text changes to green. You’ll see that the headline “From the North” is also green. The style you just created applies to all <h3> tags.

21. Triple-click one of the green headlines. In the Property inspector, click the I (for italic) button.

    This italicizes the text and updates the h3 style you created earlier—that’s why the other Heading 3 headline is now italicized, too.

22. Select the seven paragraphs under the headline “From the North”; drag from the start of the first paragraph down to the end of the seventh paragraph.

    You can also drag up starting from the end of the last paragraph. Either way, you’ve selected all seven paragraphs listing driving directions to Chia Vet headquarters.

23. In the Property inspector, click the HTML button, and then click the Ordered List button (see Figure 1-26).

    The paragraphs turn into a single, step-by-step, numbered list. You’ll do the same for the other set of directions.

24. Repeat steps 22 and 23 for the six paragraphs below the headline “From the South.”

    Now you see two numbered lists (called “ordered lists” in HTML-speak). Finally, you’ll highlight the company name where it appears in the text.

25. Near the top of the page, select “Chia Vet” at the beginning of the sentence that starts with “Chia Vet is located in….”

    You’ll make the name bold.

26. Make sure you have the HTML button pressed in the Property inspector, and then click the B button.

    The text changes appearance but the New CSS Rule window doesn’t appear. Even though you find the B (for bold) button on both the HTML and CSS views of the Property inspector, they do different things. When you select the B button in HTML mode, Dreamweaver inserts the HTML <strong> tag—used to “strongly” emphasize text. But when you press the B button in CSS mode, Dreamweaver adds CSS code to the page to make the text look bold. It’s a subtle but important difference that you’ll read about on Text Styles. In this case, you want to use the HTML <strong> tag to emphasize your company’s name.

27. Repeat step 26 for both the “Chia Vet” text that appears about halfway down the page and the text “Chia-Vet.com” at the very bottom of the page. Save the page.

    You’ll add a few more design touches to the page, but first you should see how the page looks in a real web browser.

FREQUENTLY ASKED QUESTION: The Mysterious Haunted Steering Wheel

When I select a paragraph, an image…heck, anything at all, in Design View, a weird icon appears. It looks like a ship’s steering wheel. What is it and how do I get rid of it?

You click this steering-wheel icon to open the Code Navigator window. That window (described on Using the Code Navigator) lists the CSS styles related to whatever page element you selected. It’s useful for people who like to skip Dreamweaver’s user-friendly CSS Styles panel to create and edit CSS, and who prefer to hand-edit their CSS code. If you’re new to CSS, this isn’t a useful tool and that goofy icon, which looks like something Ahab’s ghost misplaced, gets in the way. To hide it, click the icon to open the Code Navigator and check the Disable box in the bottom right of the Code Navigator window. If you ever want to turn it back on, choose View→Code Navigator to open the Code Navigator window and uncheck the Disable box.

Phase 5: Preview Your Work

Dreamweaver is as close as a web design program can get to a WYSIWYG application, meaning that for the most part, What You See (in the document window) Is What You Get (on the Web).

At least that’s how it’s supposed to work. But Dreamweaver may display more information than you’d see on the Web (including “invisible” objects like those line breaks you removed earlier, and table borders) and may display less (it sometimes has trouble rendering complex designs).

Furthermore, much to the eternal woe of web designers, different browsers display pages differently. Pages you view in Internet Explorer don’t always look the same in other browsers, like Firefox or Safari. In some cases, the differences may be subtle (for example, text may be slightly larger or smaller). In other cases, they can be dramatic: Some of the advanced page-layout techniques described in Chapter 10 can look awful in older browsers (you’ll learn how to deal with many of these problems throughout this book).

Note

If you don’t happen to have a Windows computer, a Mac, and every browser ever made, you can take advantage of Adobe’s BrowserLab service, which takes screenshots of your page in a variety of browsers running on a variety of operating systems. You’ll learn about BrowserLab on Previewing Web Pages in BrowserLab.

If you’re designing web pages for a company intranet and only have to worry about the one web browser your IT department puts on everyone’s computer, you’re lucky. Most people have to deal with the fact that their sites must withstand scrutiny from a wide range of browsers, so it’s a good idea to preview your pages using whatever browsers you expect your visitors to use. Fortunately, Dreamweaver lets you preview a web page using any browser you have installed on your computer.

Note

With the increasing popularity of tablets and mobile phones, web designers can no longer just worry about how their web pages look in desktop browsers; they also have to think about how a web page looks on the small screen of an iPhone, Android phone, or Windows Mobile-powered phone. Chapter 12 has information on how Dreamweaver CS5.5 can help you make your websites mobile-ready.

One quick way to check a page in a web browser is to use Dreamweaver’s built-in Live View feature, which lets you preview a page using a browser that’s built into Dreamweaver.

1. In the Document toolbar, click the Live View button (circled in Figure 1-28).

   The Live View button highlights. The page doesn’t look that different—for a simple page like this it won’t, but Live View is great for testing JavaScript interactivity, like the kind provided by Dreamweaver’s Spry tools, such as the Spry Menu Bar (Creating a Navigation Menu), and for previewing more complex CSS.

   

   Figure 1-28. The Live View feature lets you preview a page in a real web browser built into Dreamweaver.

   There is one problem with the Live View feature: it uses WebKit (the main engine behind Apple’s Safari browser and Google’s Chrome browser). This isn’t the most common web browser, so it’s not how most visitors will view your site. You want to test your page designs in other browsers, too. Fortunately, Dreamweaver makes it easy to jump straight to any web browser installed on your computer.

2. Click the Live View button again to exit Live View.

   This is an important and easily overlooked step. When you’re in Live View, you can’t edit a page. Since a page in Live View can look very much like it does in Design view, it’s easy to try to work on the page while you’re in Live View and say “Hey, what’s going on? Dreamweaver isn’t working any more!” So, always remember to exit Live View when it’s time to work on your pages.

   To preview your page in a web browser, you need to make sure Dreamweaver knows which browsers you have installed and where they are.

3. Choose File→“Preview in Browser”→Edit Browser List.

   The “Preview in Browser” preferences window opens (see Figure 1-29). When you install Dreamweaver, it detects the browsers installed on your computer; a list of them appears in this window. If you installed a browser after you installed Dreamweaver, then it doesn’t appear here, and you need to follow steps 4 and 5 next; otherwise, skip to step 6.

   

   Figure 1-29. Dreamweaver can launch a web browser and load a page in it so you can preview your design. One option—“Preview using temporary file”—comes in handy when you work with Cascading Style Sheets.

   Note

   When you install Dreamweaver CS5.5 on the Mac, Dreamweaver doesn’t always add Google Chrome to the list of browsers you can preview a page in. If you have Chrome installed and you’re using a Mac, you’ll probably need to follow steps 4 and 5 to add Chrome to the list of available browsers.

4. Click the + button.

   The Add Browser or Select Browser window opens.

5. Click the Browse button. Search your hard drive to find the browser you want to add to this list.

   Dreamweaver inserts the browser’s default name in the Name field of the Add Browser window. If you wish to change its name for display purposes within Dreamweaver, select it, and then type in a new name. (But don’t do this before you select the browser, since Dreamweaver erases anything you typed as soon as you select a browser.)

6. In the window’s Browser list, select the browser you most commonly use. Turn on the Primary Browser box. Click OK.

   You just designated this browser as your primary one when you work in Dreamweaver. You can now preview your pages in this browser with a simple keyboard shortcut: F12 (Option-F12 on a Mac).

   If you like, you can also choose a secondary browser, which you can launch by pressing the Ctrl+F12 (⌘-F12) key combination.

   Now you’re ready to preview your document in your favorite browser. Fortunately, Dreamweaver makes it easy.

7. Press the F12 key (Option-F12 on a Mac) or choose File→“Preview in Browser” and, from the menu, select a browser.

   The F12 key (Option-F12) is the most important keyboard shortcut you’ll learn. Macintosh fans: Unfortunately, Apple has assigned the F12 key to the Dashboard program, so it takes two keys to preview the page—Option and F12 together (however, you can change this by creating your own keyboard shortcut, as described on Keyboard Shortcuts). This keyboard shortcut opens the web page in your primary browser, so you can preview your work.

   If you’re using a Macintosh laptop, you may have to press Option-F12 and the function (fn) key in the lower-left corner of the keyboard.

   You can also use the “Preview in Browser” menu in the document window to preview a page (see Figure 1-30).

   Note

   If you use the “Preview in Browser” menu to select a browser, you’ll notice two other options: “Preview in Device Central” and “Preview in Adobe BrowserLab.” The first option, Device Central, is a program that lets you preview web pages in mobile devices. Device Central isn’t really an accurate way to preview regular HTML, but it’s good for previewing Flash-based sites that target mobile devices. However, Dreamweaver CS5.5 does include some tools to help you better build web pages for mobile devices (see Chapter 12). You’ll learn about the Adobe BrowserLab in depth on Previewing Web Pages in BrowserLab.

   

   Figure 1-30. The “Preview in Browser” menu in the document window is another way to preview a page. This menu has the added benefit of letting you select any browser on your computer, not just the ones you assigned keyboard shortcuts.

8. When you’re done previewing the page, go back to Dreamweaver.

   Do so using your favorite way to switch programs on your computer—by using the Windows taskbar, or the Dock in Mac OS X.

Phase 6: Finishing the Page

You’ve covered most of the steps you need to finish this web page. Now you just need to add a graphic, format the copyright notice, and provide a little more structure to the appearance of the page.

1. In the “Address” headline, click just before the “A.”

   This step places the cursor at the beginning of the headline. You’ll insert a graphic here.

2. From the Common category on the Insert panel, click the Image button.

   You can also choose Insert→Image or use the keyboard shortcut Ctrl+Alt+I (⌘-Alt-I).

3. Browse to the “images” folder in the Chapter01 folder, and double-click the graphics file portland.jpg.

   Again, the Image Tag Accessibility window appears. You need to provide a good description for this image.

   Note

   Note to Windows Users: As noted above (Phase 3: Creating and Saving a Web Page) Windows doesn’t display a file’s extension (unless you tell it to). So when you navigate to the images folder in step 3 above, you might see portland instead of portland.jpg.

4. Type “Portland skyline,” and then press OK.

   Look at the Property inspector. It displays properties specific to this image. You’ll learn more about these options in Chapter 6, but now you’ll learn a quick way to make text wrap around an image.

5. In the Property inspector’s lower-right corner, from the Align pop-up menu, choose Right.

   The image moves to the right edge of the page and text wraps around its left side. (If you chose the Left option, Dreamweaver would move the image to the left and wrap text around the right side.)

   Look for a copyright notice at the bottom of the page. It’s not really related to the content of the page, so you’ll add a line to visually separate it from the rest of the page.

   Note

   Although the Left and Right options for an image’s Align property are quick ways to force text to wrap around an image, they aren’t valid options for the “strict” versions of HTML or XHTML, or for HTML5. CSS provides a more flexible technique—known as a float—to achieve this effect. You’ll learn about it on Wrapping Text Around an Image.

6. Scroll to the bottom of the page, click before the letter “C” in “Copyright 2011,” and then choose Insert→HTML→Horizontal Rule.

   A gray line appears above the copyright notice. The copyright appears a little big, so you’ll format it next.

   Note

   You can also add a line above a paragraph of text using the CSS border property. See Adding Borders.

7. Select all the text in the copyright paragraph.

   You can either triple-click inside the paragraph or drag from the beginning to the end of the paragraph.

8. Click the CSS button in the Property inspector, and then, from the Size menu, choose 12.

   The New CSS Rule window opens again. This time you want to create a style that applies only to this one paragraph of text—not every paragraph—so you need to use what’s called a class style.

9. Leave the default setting—“Class (can apply to any HTML element)”—for the Selector Type box, type .copyright in the Selector Name field (Figure 1-31), and then click OK.

   Class names begin with a period—that’s how browsers identify the CSS style as a class. You can see that the copyright notice text gets smaller.

   

   Figure 1-31. The New CSS Rule window lets you create CSS styles. You can choose among many types of styles. In this case, you’re creating a class style named .copyright. Class styles work a lot like styles in word processors—to use them, you select the text you want to format, and then apply the style.

   The legal department of Chia Vet headquarters has decided that every page on the site must link to an official corporate statement. You’ll add a link for that next.

10. At the bottom of the page, select the text “Read our full legal statement.”

    To create a link, you just need to tell Dreamweaver which page you want to link to. You can do this several ways. Using the Property inspector is the easiest.

11. In the Property inspector, click the HTML button, and then click the folder icon that appears to the right of the link field.

    The Select File dialog box appears.

12. Click the Site Root button (at the top of the dialog box in Windows, the bottom of the dialog box on a Mac), and double click the file legal.html.

    The Site Root button jumps you right to the folder containing your site. It’s a convenient way to move quickly to your root folder. Double-clicking the file tells Dreamweaver to insert the HTML needed to create a link.

    If you preview the page in a web browser, it looks all right…well, not really. The text is kind of hard to read against the blue striped background, it’s too wide if you expand your web browser on a large monitor, and the photo is hanging way out on the right-hand side of the browser. To fix these problems, you’ll create a new layout element—a box to contain all the content on the page.

13. Click anywhere inside the page, and then choose Edit→Select All or press Ctrl+A (⌘-A on a Mac).

    You selected the entire contents of the page. You’ll wrap all the text and images in a <div> tag to create a kind of container for the page contents.

14. Choose Insert→Layout Objects→Div Tag.

    The Insert Div Tag window opens (see Figure 1-32). A <div> tag simply provides a way to organize content on a page by grouping HTML—think of it as a box containing other HTML tags. For example, to create a sidebar of navigation links, news headlines, and Google ads, you would wrap them all in a <div> tag. It’s a very important tag for CSS-based layouts. You’ll read more about it on The Mighty <div> Tag.

    

    Figure 1-32. The Insert Div Tag window provides an easy way to divide sections of a web page into groups of related HTML—like the elements that make up a banner, for example. You’ll learn about all the different functions of this window on page 353.

    Next, you need to create a style that provides the instructions needed to format this new <div> tag. You’ve already used the Property inspector to create a style, but that works only for text. To format other tags, you need to create a style in another way.

15. Click the New CSS Rule button at the bottom of the Insert Div Tag window.

    The New CSS Rule window appears (a CSS style is technically called a “rule”). This window lets you specify the type of style you create, the style’s name, and where Dreamweaver should store the style information. You’ll learn all the ins and outs of this window in Chapter 4.

16. From the top menu, choose ID, and then type #wrapper in the “Choose or enter a name” field. Make sure you have “This document only” selected in the bottom menu. Click OK,

    The “CSS Rule definition” window appears (see Figure 1-33). (There’s a lot going on in this box, but don’t worry about the details at this point. You’ll learn everything there is to know about creating styles later in this book. This part of the tutorial is intended to give you a taste of some of a web designer’s daily page-building duties. So relax and follow along.)

    

    Figure 1-33. The “CSS Rule definition” window lets you set over 60 CSS properties (divided into eight categories) to control the formatting of everything from text to images to entire web pages.

    This window is the command center for defining the formatting properties, such as text color, font, and size, for a style. CSS has quite a few properties, which Dreamweaver divides into eight categories. First, you’ll add a background color for this <div> element.

17. From the left-hand list of categories, select Background. Click the color box that appears to the right of “Background-color,” and then select a white swatch.

    This action adds a white background to the box, making sure the text stands out. Next you’ll set a width for the box, and center it in the middle of the browser window.

18. Click the Box category, and then, in the width box, type 860.

    This step makes the box 860 pixels wide—the same width as the banner. To make sure the text doesn’t butt right up against the edge of the box, you’ll add a little space (called padding) around the inside of this style.

19. In the Top box under Padding, type 10 (make sure the “Same for all” checkbox is turned on).

    This action adds 10 pixels of space inside the box, essentially pushing the text and the graphics away from the edges of it.

20. Under the Margin settings, uncheck the “Same for all” box, and then, for both the right and left margin menus, select “auto.”

    Selecting “auto” here is your way of telling a web browser to automatically supply the left and right margins—in this case, as you’ll see in a moment, it has the effect of centering the <div> element in the middle of a browser window.

21. The “CSS Rule definition” window should now look like Figure 1-33. Click OK to complete the style.

    The Insert Div Tag window reappears, and the name of the style you just created—“wrapper”—appears in a box labeled ID.

22. In the Insert Div Tag window, click OK.

    This inserts the new <div> tag and at the same time applies the style you just created. Now it’s time to take a look at your handiwork.

23. Choose File→Save. Press the F12 key (Option-F12) to preview your work in your browser (Figure 1-34).

    Test the link to make sure it works. Resize your browser and watch how the page content centers itself in the middle of the window.

Figure 1-34. Your finished tutorial file should look like this.

Congratulations! You just built your first web page in Dreamweaver, complete with graphics, formatted text, and links. If you want to compare your work with the finished product, go to Chapter01_finished in the Tutorials folder and load the file directions.html.

Much of the work of building websites involves the procedures covered in this tutorial—defining a site, adding links, formatting text, placing graphics, creating styles, and inserting divs. The next few chapters cover these basics in greater depth and introduce other important tools, tips, and techniques for using Dreamweaver to build great web pages.

Tip

To get a full description of every Dreamweaver menu, see Appendix B.