Dreamweaver CS4 is a powerful program for designing and building Web sites. If you’re brand-new to Dreamweaver, then turn to What Dreamweaver Is All About to get an overview of what this program can do and what’s new in this latest version. This chapter provides a basic overview of the different windows, toolbars, and menus that you’ll use every time you build a Web page. You’ll also learn to set up the program so you can begin building Web pages. And, because doing is often a better way to learn than just reading, you’ll get a step-by-step tour of Web page design—the Dreamweaver way—in the tutorial at the end of this chapter.
Dreamweaver CS4’s interface is a big departure from previous versions of the program. Adobe has scrapped the original Dreamweaver look and feel, and replaced it with one that’s shared by other programs in the “Creative Suite” like Photoshop, Illustrator, and Flash. Even long-time Dreamweaver owners will have a little learning to do to get up to speed with the program’s new layout. And not only is the program’s look different, but the interface is very customizable: You can display the various windows in a variety of different ways to match your monitor size and how you want to work with the program.
Out-of-the-box, Dreamweaver organizes its various windows as a unified whole (see Figure 1-1). That is, the edges of all the different windows touch; resizing one window affects the others around it. This type of interface is common on Windows computers, but Mac fans who are accustomed to independent floating windows might find this type of look strange. Give it a chance. As you’ll soon see, this design has some benefits. (But, if you just can’t stand this locked-in-place style, you can detach the various panels, and then place them wherever you’d like on the screen.)
Many of the program’s individual windows are used to assist with specific tasks, like building style sheets, and are described in the relevant chapters. But you’ll frequently interact with four main groups of windows: the document window, the application bar, the Property inspector, and panel groups.
Note
The look of these windows depends on what kind of computer you’re using (Windows or Macintosh) and what changes you’ve made to the program’s preference settings.
Even so, the features and functions generally work the same way no matter what your situation. In this book, where the program’s operation differs dramatically in one operating system or the other, special boxes and illustrations (labeled “For Macs Only” or “For Windows Only”) will let you know.
Figure 1-1. You can switch between open documents by clicking each file’s tab immediately above the Document toolbar. Here, clicking the index.html tab brings that page to the front. (This nifty feature works only if the document window is maximized.) You can also hide the panels—the ones on the right and bottom—in one fell swoop by pressing the F4 key. Press F4 to bring the panels back from hiding.
You build Web pages in the document window. As in a word processor, simply click inside the document window, and then type to add text to the page. You’ll work in this window as you build a page, and you’ll open new document windows as you add or edit pages for your site.
Several other screen components provide useful information about your document. These components may appear in different locations on Windows computers and on Macs (see Figure 1-1 and Figure 1-2, respectively), but they work the same way. For example:
Title bar (Mac only). The title bar shows the name of the file on which you’re currently working. In addition, if the Web page is XHTML-compliant (see XHTML, Too), then that’s indicated 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 index.html.
Document tabs. When more than one Web document is open, small tabs appear at the top of the document window—one for each file. The name of the file appears in the tab; to switch to another open file, just click its tab. In Windows, the Document tab bar also displays the location on your computer for the file currently being viewed (see Figure 1-1).
Related files bar. The related files bar is new in Dreamweaver CS4. It lists all CSS, JavaScript, or server-side programming pages (like ASP or PHP) that the current Web page uses. You’ll learn more about external files such as external style sheets (Internal vs. External Style Sheets), external JavaScript files (Inserting JavaScript), and server side pages (section 6) later in this book. But as a quick summary, it’s very common in current Web design to use other files to supply design and interactivity to a page of HTML. Web designers frequently work on these files, so this new related files bar lets you quickly jump to and work on an external style sheet or JavaScript file.
Document toolbar. The Document toolbar (see Figure 1-2) lets you change the title of a page, switch between Design and Code views, jump to Live view (to see how the page will look and work in a Web browser), preview the page in different Web browsers, check if the HTML code for the page is valid (that is, written correctly), 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). Those buttons let you see, respectively, just the raw HTML of the file you’re working on; a split view showing that 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. In this book, we’ll assume that 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.)
Note
You might 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, cutting, copying, pasting, and undoing and redoing actions. (This toolbar is hidden until you summon it by choosing View → Toolbars → Standard.) The Style Rendering toolbar comes in handy when working with CSS. You’ll learn how to use it on Previewing Media Styles in Dreamweaver.
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 added useful information. It shows you how quickly the page will download over a 56k modem (who has that anymore? Accessibility Options tells you how to change this setting). In addition, the status bar lists the page’s text encoding—encoding refers to the characters the computer uses to represent text on the page. Pages you build nowadays use UTF-8, which lets you include lots of different characters—including letters from other non-Latin based languages. On Nonbreaking Spaces, you’ll see how UTF-8 lets you easily include fancy typographic characters like em-dashes and real ellipses.
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 the page called the head (see Figure 1-2). This is where you put things like the page’s title, the meta tags (keywords) that provide information for some search engines and browsers, JavaScript scripts, and CSS information (Chapter 6).
None of this information is actually visible on your Web page once it’s “live” on the Internet. But while working in Dreamweaver, you can have a look at it by choosing View → Head Content. You’ll see a row of icons representing the different bits of information in the head.
The Tag selector (labeled in Figure 1-2) is also extremely useful. It provides a sneak peek at the HTML that, behind the scenes, composes your Web page. It indicates how tags are nested in the document based on what you’ve selected or the insertion point’s location.
You can also use the Tag selector to select an HTML tag and all the information nested inside it. For instance, say the insertion point is somewhere in the middle of a paragraph; clicking the <p> tag selects that paragraph and everything inside it. This feature is very useful when you want to set properties (see The Property Inspector), add behaviors (Chapter 13), or precisely control the application of styles (Chapter 4).
GEM IN THE ROUGH: The Window Size Pop-Up Menu
Creating pages that look good on different monitors set to a wide range of resolutions is one of the most difficult tasks facing Web designers. After all, not everyone has a 21-inch monitor or views Web sites with the browser window maximized to fill the whole screen. Nothing’s more dispiriting than spending a solid week designing the coolest-looking Web page, only to have your client call up to say that your design doesn’t fit his 17-inch monitor (a painfully common story).
You could simulate browser windows of different sizes by dragging the resize handle at the lower-right corner of the document window. But Dreamweaver has a better tool for such experiments: the Window Size pop-up menu on the status bar at the bottom of your document window. Clicking the black arrow next to the window-size stats lets you choose a different setting for the document window, as shown here. Use this feature to test how your page will look inside different-size browser windows. The numbers indicate the width and height in pixels.
(Note to Windows folks: If your document window is maximized, this feature doesn’t work. Choose Window → Cascade to “unlock” the document window from its space on the screen. Now you’re free to resize the window and use the Window Size pop-up menu. However, this gets rid of the nifty document tabs that let you quickly switch between open documents—as pictured in Figure 1-1. To get them back, in the document window, just click the Maximize window button.)
The first pair of numbers indicates the amount of usable space in the document window; the numbers in parentheses indicate the resolution of the monitor. The fourth option shown here, in other words, indicates that if someone has an 800 x 600 monitor and maximizes the browser window, she has 760 x 420 pixels of space to display a Web page. (Even though a monitor’s resolution is, say, 800 x 600, after you subtract the space required to display the browser’s toolbar, location bar, status bar, and other “chrome,” 760 x 420 pixels of space will be visible when a Web page is opened.)
In any case, note that the Window Size pop-up menu doesn’t actually set the size of your Web page or add any code to your page; Web pages are usually fluid, and can grow or shrink to the size of each visitor’s browser window. For techniques that let you exercise greater control over your page presentation, see Chapter 8.
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 popular tools.
Tip
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’ve clicked inside a table (Chapter 7), or inside a <div> tag (see Float Layout Basics), choosing Edit → Select All selects only the contents of the table cell or <div> tag. In this case, you need to press Ctrl+A (⌘-A) several times to select everything on a page. After selecting everything this way, 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 this gives you an empty file—and an invalid Web page.
Dreamweaver CS4 provides many different windows for working with the various technologies required to build and maintain a Web site. Most of Dreamweaver’s windows are called 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 about how to organize panels on Organizing Your Workspace. But two panels are worth mentioning up front: the Insert panel and the Files panel.
The Insert panel replaces the Insert bar that appeared in previous versions of Dreamweaver. If the document window is your canvas, then the Insert panel holds your brushes and paints, as shown in Figure 1-3. While you can add text to a Web page simply by typing in the document window, adding elements like images, horizontal rules, forms, and multimedia elements is simplified by the Insert panel’s click-to-add approach. Want to put a picture on your Web page? Just click the Images icon.
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 code like PHP (see Part 6 of this book). 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 messy code and cheerfully displays a picture on the page.
Figure 1-3. The Insert panel normally displays the objects under each drop-down menu category 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 menu (top right image), the icons are displayed side by side in rows, taking up a lot less space (bottom right image). You’ll see this panel style throughout the book.
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, then you can close the Insert panel and use the Insert menu instead. Its commands duplicate all the objects available from the Insert panel.
The Insert panel offers seven sets of objects, each available by selecting an option from the menu at the top of the panel (see Figure 1-3, top right):
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 in your site, speeding up your production process and facilitating easy updates. See Chapter 18 for details.
Layout objects. The objects in this category help you control the layout of a Web page by organizing a page’s contents using CSS or HTML tables. In addition, this panel includes Dreamweaver’s Spry widgets that let you add sophisticated, interactive page elements such as drop-down navigation menus and animated, collapsible panels, so you can fit more information in less space on a Web page (see Chapter 12).
Form objects. Want to get some input from visitors to your Web site? You can use forms to receive their comments, collect credit card information for online sales, or gather any other kind of data. The Forms category lets you add form elements like radio buttons, pull-down menus, and text boxes (see Chapter 12). Dreamweaver CS4 includes sophisticated form validation so you can make sure that visitors input the correct information before they submit the form.
Data. Dreamweaver makes connecting your Web pages to databases as easy as clicking a few buttons. (OK, almost as easy; see Part 6 for details.) The Data category provides many powerful tools for building dynamic pages: controls that add records to your database, for example, or that update information already in a database. Dreamweaver CS4 also includes several data tools that don’t require a complicated database setup. The Spry dataset feature lets you display interactive data in a table, so visitors can sort the data by column and even change what’s displayed on the page by interacting with the data—all without having to reload an additional Web page (Spry datasets are discussed on Spry Data Sets).
Tip for Long-Time Dreamweaver Users: In previous versions the program’s buttons were in color; now the buttons in the Insert panel are black and white—if you liked it better the old way, just 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 (see Figure 1-6). This action not only brings back the old Insert bar, but 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 Web sites. The Spry category gathers together all the different Spry features available in Dreamweaver CS4. 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.
InContext Editing. If you build Web sites that are updated by non-Web savvy folk, Adobe offers a commercial service named InContext Editing, which lets average people edit Web pages using a simple Web-based interface. If you’re a freelance Web designer and you want to hand-off routine Web site maintenance chores to your clients, then this service might be for you. The box on Making a Tag Attribute Editable has more on this feature.
Text objects. To format type—make it bold or italic, for instance—you can turn to the Text category. Most of the buttons here aren’t technically objects; they don’t insert new objects onto the page. Instead, they format text already present on the page. For the most part, the Property inspector offers the same formatting options and is a more common tool for formatting text.
Note
You might find it disorienting to use the options found in the Text objects category. Some “text objects” create incomplete HTML and actually dump you into the raw HTML of the page, leaving the nice visual Design view behind. In general, the Property inspector and Text menu let you do everything in this tab—more quickly and more safely.
Favorites. Perhaps the most useful category, Favorites can be anything you want it to be. That is, after you’ve discovered which objects you use the most (like the Image command, if you work with a lot of graphics), you can add them to this personal category. You may find that once you’ve customized this category, you’ll never again need the other categories in the Insert panel. For instructions on adding objects to your Favorites, 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’re using (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 6 for more on working with these technologies.
The Files panel is another panel you’ll turn to frequently (see Figure 1-4). It lists all the Web files—Web pages, graphics, Flash movies, and so on—that make up your Web site. It gives you a quick way to open Web pages that you wish to work on (in the panel, just double-click the file name). It also lets you switch between different sites that 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 Organizing Site Files.
To use the Files panel effectively, you need to “Define a site” for each site you work on—defining a site is specific to Dreamweaver, and one of the most important steps in using Dreamweaver correctly. You’ll learn how later in this chapter, starting on Setting Up a Site.
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 would then use the Property inspector to add a link to her blog.
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 use the Property inspector extensively in Dreamweaver.
Figure 1-5. If you don’t see the Property inspector, then you can 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 an additional set of advanced options. (It’s a good idea to leave the inspector fully expanded most of the time, since you may otherwise miss some useful options.)
At its heart, the Property inspector is simply a display of the attributes of HTML tags. The src (source) attribute of the <img> (image) tag, for instance, tells a Web browser where to look for 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).
The Application bar is new in Dreamweaver CS4. Its main purpose in life is to let you switch between different document views (for example, between Code and Design view), to choose a configuration of the program’s windows, and to give you a shortcut for getting help, defining sites, and downloading extensions. You can also get all the options here from the program’s main menus. Figure 1-6 shows its location in Windows (top) and on a Mac (bottom). Here’s what it offers:
Code/Design View menu lets you switch between the visual Design view (what the page will look like in a Web browser) and the raw HTML. You can also choose to show both the design and code at the same time. Code View has more on that option (called Split view).
The Extensions menu gives you quick access to the Extension Manager as well as to the Adobe Exchange Web site. Extensions are add-on features (some are free and some cost money) that let you do more with Dreamweaver. Extensions are discussed on Create a Shortcut Cheat Sheet.
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 on Setting Up a Site, but basically a site is a way to let Dreamweaver know where you keep all the files for one particular site. If you’re designing more than one Web site, then you can define multiple sites within Dreamweaver.
The Workspace switcher lets you re-organize the program’s layout of windows. You can choose one of the workspaces supplied by Dreamweaver, or, as discussed on The Insert Panel, you can create your own layout of windows to create the ultimate workspace for your sites.
The Community Help box is a search function. But unlike the normal “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) and a Web browser launches, loading a page on Adobe’s Web site which lists many resources to help answer your questions. This help function is a bit better than just using Google—you never know what that’ll turn up—since the sites that are searched have all been hand-picked by Adobe. That way you know you won’t be getting any “helpful” advice from the blogger down the street who just bought Dreamweaver and decided to post his thoughts on the program.
Dreamweaver’s basic user interface includes the document window, Application bar, Property inspector and panel groups on the right edge of the screen (see Figure 1-7). All these windows act like a unified whole; that is, if you resize one window, the other windows also resize to fit the space. For example, you can drag the left edge of the panel groups (circled in Figure 1-7) and drag it 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 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 programs, you can set up Dreamweaver that way as well—see the opposite page.)
Figure 1-7. You can move individual tabs to other parts of the screen—you’re not limited to keeping all the tabs on the right side. In this figure, the Files panel is being dragged to the left edge of the screen. A ghosted version of the tab appears as you drag it around the screen. 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 composed entirely of the Files panel—the document window and Properties inspector move to the right to make room. This technique is particularly good if you have a very wide monitor, since it lets you display the Files panel (which often contains lots of files) by itself and at full screen height. (The “Collapse to Icons” button labeled here is discussed under “Iconic Panes” on Workspace Layouts.)
You can control the panel in many different ways to help customize your workspace:
You can open a particular panel from the Window menu. For example, to open the Files panel, choose Window → Files.
Double-click on a panel’s tab to open it. Double-click the tab again, and the tab (and any other tabs grouped with it) closes.
Drag the line between an open panel and another panel to resize a panel. For example, if you want to make the Insert panel (pictured in Figure 1-7) taller, then grab the thick border line between that panel and the panel group containing the CSS Styles and AP Elements tabs.
To completely close a panel, so that even its tab no longer appears, right-click (Ctrl-click) the tab, and then choose Close. (Choose Close Tab Group to hide the tab and any other tabs it’s grouped with.)
If you want to hide all windows except for documents, then choose Window → Hide Panels or press F4—a useful trick when you want to maximize the amount of your screen dedicated to showing the actual Web page you’re working on. To bring back all of Dreamweaver’s administrative windows, press F4 again or choose Window → Show Panels.
As mentioned in Figure 1-7, 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 very 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.
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 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.
Figure 1-8. Here, the Files, Insert and CSS Styles panels are floating. Each panel has its own Context menu icon (circled on Files panel at left side of image). 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.
As if you didn’t already have enough ways to organize your panels, Dreamweaver CS4 introduces yet another way to display panels. By clicking the “Collapse to Icons” button at the top right of a column of panels (see Figure 1-7) you can shrink the panels to a group of much smaller icons (see Figure 1-9). To re-open the controls for a particular panel you’ve just 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.
Sometimes too much choice is a bad thing, and even though the new user interface changes in Dreamweaver CS4 mean you can pretty much organize the windows and panels any way you like, it also means you can easily accidentally click or drag the wrong spot 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 “layout,” which you can return to by simply selecting the layout’s name from the Workspace Switcher menu in the Application bar (see Figure 1-6) or by choosing Window → Workspace Layout.
Figure 1-9. Iconic panes let you preserve screen real estate. To return to normal width panels, click the Expand Panels button.
For example, when you’re working on a database-driven Web site, you may like to have the Application panel group and the Snippets panel open, but keep the CSS panel tucked away. When working on a design-heavy site, 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.
Tip
Dreamweaver CS3 veterans should check out the "Classic” layout, which puts the Insert panel back up at the top of the screen and makes Dreamweaver CS4’s new, stylish black-and-white icons return to their vibrant, colorful selves.
In addition, Dreamweaver CS4 comes pre-programmed with eight layouts designed to configure 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 layout (use the Layout switcher menu in the Application bar [Figure 1-6]) to see which workspace 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 that layout (as described below) so you can call it up anytime you’d like. 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).
You can move a panel to another area of your screen by dragging its tabs as described on Organizing Your Workspace (see Figure 1-7). 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 or on the left side of the monitor. As described on Floating panels, you can also create floating panels. If you’ve got two monitors hooked up to your computer, then you can then spread the panels across both monitors.
Choose the Insert panel category containing the objects you use most frequently—for example, if you’re always building Web forms, then select the Forms category. (Better yet, collect your favorite objects onto a single tab, as described on The Files Panel.)
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 a name for the layout, and then click OK. (If you type the same name as a layout you’ve already saved, Dreamweaver lets you know and gives you the option to replace the old layout with this new layout. You have to do this to update a layout you’ve previously created.) Dreamweaver saves your new layout.
Figure 1-11. The Application bar’s “Workspace switcher” menu lets you choose one of the eight workspaces already set up in the program, or a workspace you’ve created. For example, the Missing Manual option pictured here is a custom workspace. If you accidentally move a panel out of position, you can return the current workspace to its original setup by selection the Reset option at the bottom of this menu.
Tip
This feature is also handy if you share your computer with other people. You can create your own Workspace Layout—use your own name when naming the layout—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’ve already saved, simply select your workspace from the Application bar (see Figure 1-11) or choose Window → Workspace Layout → The Name of Your Layout. After a brief pause, Dreamweaver switches to the selected layout.
Whenever you build a new Web site or want to edit an existing one you’ve created elsewhere, you have to begin by introducing Dreamweaver to it—a process called defining a site. This is the most important first step when you start using Dreamweaver, whether you plan to whip up a five-page Web site, build a thousand-page online store, or edit the site your sister built for you. At its most basic, defining a site lets Dreamweaver know where you store your Web pages on your computer, and makes sure Dreamweaver correctly inserts images and adds links to the pages of your site. In addition, if you want to take advantage of Dreamweaver’s many timesaving site management tools such as the link checker (see Finding Broken Links), Library items (Chapter 17), Templates (Chapter 18), and FTP tool for moving your Web files to a Web server (Chapter 16), then you have to define a site.
Dreamweaver gives you two methods for defining a site: the hold-you-by-the-hand Site Definition wizard, and the advanced “Get out of my way, I know what I’m doing” approach.
Dreamweaver’s Site Definition Wizard steps you through a series of screens, prompting you for information about your Web site setup.
Choose Site → New Site.
The Site Definition window appears. To use the wizard, make sure the Basic tab is selected (see Figure 1-12).
Figure 1-12. The Site Definition window’s Basic tab takes you step by step through the process of setting up a new site. Each stage of the process—Editing Files, Testing Files, and Sharing Files—is clearly labeled. Depending on the type of site you’re building and which Dreamweaver features you plan on using, you’re taken through a series of simple questions that help you set up your site.
Type the name of your site in the first field.
The name you type here is solely for your own reference, to help you identify the site in Dreamweaver’s Files panel. It won’t appear on the Web. Dreamweaver also asks for your site’s Web address.
Type the Web address for your Web site. For example, http://www.chia-vet.com.
This step is optional. If you don’t yet have a Web address, then you can leave this blank. In some cases, you may need to add some more information after the domain name. For example, the address for your Web site might look something like this: http://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, http://www.mybigcompany.com/marketing.
Note
If you’re using site-root relative paths for linking to the pages in your site, step 3 above is critical. See Root-Relative Links for the gory details.
Click the Next button to proceed to the next screen.
In the next step, you’ll tell Dreamweaver whether you plan on building regular Web pages or pages that require a special server for creating the dynamic, database-driven Web sites discussed in Part 6 of this book.
Unless you’re creating a database-driven site, choose “No, I do not want to use a server technology”, and then click Next.
For creating basic Web pages, you don’t need any server technology. To learn about defining a site for database-driven Web sites like those described in Part 6 of this book, see Setting Up Dreamweaver.
In the next steps, you’ll tell Dreamweaver how you want to work on the files in your site, and where you’ll store those files.
Choose either “Edit local copies on my machine” or “Edit directly on server using local network” (see Figure 1-13).
The first option—Edit local copies—is the most common. Typically, Web designers have two sets of files: the local site on their hard drives and the remote site on the Web (see the box on Defining a Site the Fast Way). The local site lets you keep your works in progress on your computer, while the remote site contains the completed pages that the world can view with a Web browser.
The second option (Edit directly on server) isn’t a very good idea. Working directly on the live version of the site—the one anyone with a Web browser can see—exposes your half-finished pages, with their typos and missing pictures, to your audience. Much better to perfect a page on your own computer, and then, when it’s finished, move it to the Web server.
Click the folder icon next to the label, “Where on your computer do you want to store your files?”
The Choose Local Root Folder window opens, so that you can choose a folder on your hard drive to serve as your local site’s root folder. This folder is where on your computer you’ll store the HTML documents and graphics, CSS, and other Web files that make up your Web site.
Browse to and select the folder containing your site’s files (see Figure 1-14).
If you’re starting a Web site from scratch, then you can also create a new empty folder at this point. You then save your Web pages and graphics into this folder as you build your site.
For more on root folders and organizing Web sites, see Chapter 15. For now, the fact to burn into your brain is that all the files that will constitute your Web site must live in the folder you select—this folder is called the local root folder. (You can have subfolders with Web files inside the local root folder; you just can’t have any files outside this root folder.)
Click Next.
Now Dreamweaver asks how you want to connect to your remote server—the computer that will dish up the finished Web files to your adoring public.
Choose one of the options from the “How do you connect to your remote server?” menu.
To just get started building Web pages, choose None. You’ll use this option in all of the tutorials in this book. In Chapter 17, you’ll learn how to use other options, such as FTP, from this menu to move your files to your Web server using Dreamweaver. Even if you don’t select a remote server now, you can always return to the Site Definition window later to tell Dreamweaver where to put your finished Web pages.
Click Next.
A summary of your settings appears (see Figure 1-15).
Click Done.
After defining the site, Dreamweaver creates a site cache for your Web site. That’s a small database that tracks pages, links, images, and other components of your site. 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. If you’re creating a brand-new site or have a small site with just a few files, you may not even notice this site cache creation happening.
Figure 1-15. After you’ve finished the Site Definition Wizard, Dreamweaver summarizes the settings you selected. Nothing’s set in stone, however. If you later decide to connect to a Web server to upload your Web pages or use Dreamweaver’s database tools, you can always change your site options as described on Cache.
Defining a site doesn’t actually do anything to your computer; it doesn’t create a home page or add a folder, for example. It merely prepares Dreamweaver for working on a site.
Note
Dreamweaver lets you define multiple Web sites, 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 The Site Definition Wizard. You can then switch from one site to another using the Sites menu in the Files panel (see Figure 15-6 on Modifying the Files Panel View).
Although the Site Definition Wizard is a nearly foolproof way to define a site, clicking through each of its steps can get tedious. If you want to get started building Web pages (or editing a Web site you’ve already created) right away, then you just need to provide a few details using the Site Definition window’s Advanced tab.
Choose Site → New Site to open the Site Definition window, and then select the Advanced tab (see Figure 1-16).
The number of options in the Advanced view of the Site Definition window may seem overwhelming. But to get started building a Web site, you need to supply only a few pieces of information under the Local Info category of this window. The other categories are for more advanced site setups, which you’ll learn about later in this book. For example, the Remote Info category is for setting up Dreamweaver to move files to your Web server and is discussed in Chapter 17, while the Testing Server category is used for the database-driven Web sites detailed in Part 6 of this book.
Figure 1-16. Make sure the “Enable cache” box (circled) is turned on. This step speeds up Dreamweaver’s site management features such as link checking. If you have a really large site with thousands of pages and files, then creating the cache can take several minutes, so you might be tempted to disable this feature. Don’t. With the cache enabled, Dreamweaver can make sure you don’t accidentally delete a page that thousands of other pages link to, or help update links when you move a page to another location in your site.
In the Category list, make sure Local Info is selected, and then, 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.
Click the folder icon to the right of the “Local root folder” field.
The Choose Local Root Folder window opens, where you can choose a folder on your hard drive that will serve as your local site’s root folder. This folder is the folder on your computer where you’ll store the HTML documents and graphics, CSS, and other Web files that make up your Web site.
Browse to and select the folder containing your site’s files.
Figure 1-14 demonstrates the process for Windows and Macs. If you’re creating a new site, you can also create a new folder at this point using the New Folder button in this window.
You can also let Dreamweaver know where you plan on storing the images for the site by selecting a folder for the “Default images folder” field. This step is optional, but comes in handy if you insert an image from the desktop or another folder outside your local root folder as described on Adding an Image Placeholder.
Note
Because defining a site is such an important step, you can find a video about the process on this book’s Web site at www.sawmac.com/dwcs4/define.
Type the Web address of your site in the HTTP address field. For example,http://www.chia-vet.com.
This step is also optional. Just type the address you’d normally type into a Web browser to view your site. If you don’t yet have a Web address, then you can leave this blank.
Click OK to finish the process.
Dreamweaver creates a site cache as described in step 12 on Defining a Site the Fast Way. 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.
After defining a site, you’ll want to start building pages. Just choose File → New or press Ctrl+N (⌘-N on a Mac) to open the New Document window (see Figure 1-17). The New Document window is a little overwhelming. 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-17. The New Document window lets you create nearly every Web document type under the sun. Dreamweaver CS4 also includes many prepackaged designs including lots of advanced page layouts using the latest Web design techniques. If you select one of those designs in the Layout list, then, in the upper-right corner of the window, you see a preview of the layout.
To create a basic HTML file for a Web page:
From the left-hand list of document categories, choose Blank Page.
The Blank Page category lets you create a new empty document—this might be a Web page or something a bit more esoteric like an XML file (see Storing Data in an XML File for more on XML), an external JavaScript file, or one of the several server-driven pages such as PHP or ASP (which are discussed in Part 6).
Both the Blank Template and “Page from Template” categories relate to Dreamweaver’s Template feature discussed in Chapter 19. The “Page from Sample” category lets you choose from several different files with already-created designs—it’s best to avoid these. The designs in this category are old and left over from earlier versions of the program; they generally aren’t very attractive and don’t use the best techniques for building a Web page. Dreamweaver CS4 does ship with some very useful page layouts that you can access from the Blank Page category. (You’ll learn about these designs in Chapter 9.) 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.
From the Page Type list, choose HTML.
You can also create other types of documents, most of which you’ll learn more about later in this book, such as PHP or ASP for database-driven sites (see Part 6 of this book), XSLT files for processing XML (Chapter 26), templates (Chapter 19), library items (Chapter 18), or CSS files (Chapter 4).
From the Layout list, choose “<none>”.
“<none>” 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 these page designs. You’ll learn more about this great feature in Chapter 9.
Select a document type from the DocType menu.
Selecting a document type identifies the type of HTML you’ll be using on the 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 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 doc types let you use a few HTML tags and properties that have been phased out of the strict types. Most notably, transitional doc types 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 doc types, just select XHTML 1.0 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) and XHTML 1.1 (which requires a special setting on your Web server to work properly).
Note
If you don’t want to deal with the New Document window every time you create a new page, choose Edit → Preferences in Windows or Dreamweaver → Preferences on 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 also specify what kind of file you want Dreamweaver to create whenever you press Ctrl+N (⌘-N). For example, if you usually create plain HTML files, then choose HTML. But if you usually create dynamic pages (like the PHP pages described in Part 6), then choose a different type of file—PHP, for example.
With these settings, pressing Ctrl+N (⌘-N) instantly creates a new blank document. (Choosing File → New, however, still opens the New Document window.)
Click Create.
Dreamweaver opens a new, blank Web page ready for you to save and title (see Figure 1-18).
Choose File → Save.
The Save As dialog box appears. You need to save the file somewhere inside the local root folder. You can save it inside any subfolders within the root folder as well.
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 a Dreamweaver document.
At the top of the document window, click inside the Title box, and then type a name for the page (see Figure 1-18 ).
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) 44,400,000 results—that’s half a million more pages than the last edition of Dreamweaver: The Missing Manual (obviously there are still some people who need to pick up a copy of this book). Dreamweaver probably created many of those pages. You should change this to a descriptive title indicating the main topic of the page: for example, “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. In addition, the title appears on Google’s, Yahoo’s, and MSN’s search listings.
Although reading a book is a good way to learn the ins and outs of a program, nothing beats sitting in front of your computer and taking a program through its paces. Many of this book’s chapters, therefore, conclude with hands-on training: step by step tutorials that take you through the creation of a real, working, professionally designed Web site for the fictional 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 of building any Web page: creating and saving a new document, adding and formatting text, inserting graphics, adding links, and making the program work for you (the finished tutorial is pictured in Figure 1-35).
Figure 1-18. 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.
If you’re already using Dreamweaver and want to jump right into the details of the program, feel free to skip this tutorial. (And if you’re the type who likes to read first and try second, read Chapters Chapter 2 through Chapter 5, and then return to this point to practice what you’ve just learned.)
Note
The tutorial in this chapter requires the example files from this book’s Web site, www.sawmac.com/dwcs4/. 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 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’ve downloaded and decompressed the files, you should have a MM_DWCS4 folder on your computer, containing all the tutorial files for this book.
Before you get started working in Dreamweaver, you need to make sure the program’s all set up to work for you. In the following steps, you’ll double-check some key Dreamweaver preference settings, and organize your workspace using the Workspace Layout feature.
First, make sure the preferences are all set:
If it isn’t already open, start Dreamweaver.
Choose Edit → Preferences (Windows) or Dreamweaver → Preferences (Mac).
The Preferences dialog box opens, listing a dizzying array of categories and options (see Figure 1-19).
In the Preferences dialog box, select the Invisible Elements category, and then turn on the fourth checkbox from the top, labeled Line Breaks (see Figure 1-19, circled).
Sometimes, when pasting text from other programs like Microsoft Word or an email program, separate paragraphs come into Dreamweaver as a 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 this character in Dreamweaver’s Design view. This setting makes the line break character visible—represented in the document window by a little gold shield—so that you can easily select and remove it.
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 has many different windows that 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, you’ll make sure Dreamweaver is displaying the default Designer workspace.
From the “Workspace switcher” on the Application bar, select Designer (see Figure 1-20).
If Designer is already selected, choose “Reset ‘Designer’”, which moves any panels that have been resized, closed, or repositioned back to their original locations. The Designer workspace built into Dreamweaver puts the Property inspector at the bottom of the screen, opens the Insert and Files panels on the right edge, and also displays a group of closed panels containing the CSS styles and AP (absolutely positioned) elements panels.
As you can see, the Insert Panel in its normal configuration takes up a lot of vertical space, giving the other panels a cramped appearance. Fortunately, you can change how Dreamweaver displays the buttons in the Insert Panel—but you can’t do that unless a Web page is open.
On the Dreamweaver Welcome screen, click the HTML button (circled in Figure 1-20).
This step opens a blank, new Web page—you won’t actually do anything with this page, but notice that the Insert Panel buttons are active. Next you’ll hide the button labels on the Insert panel.
Figure 1-20. 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. You see the Welcome screen only when no other Web files are open.
From the Insert Panel’s category menu, select Hide Labels (see Figure 1-3).
Without labels, the buttons in the Insert panel form nice compact rows, saving lots of space. As you use Dreamweaver you’ll get used to what the buttons do, but in the meantime, simply hovering the mouse over a button produces a pop-up tooltip with the button’s explanatory label.
You don’t need that new page you created in step 6, so you can close it.
Click the document window’s close button, or choose File → Close.
Next, you’ll expand the CSS styles panel—one of the most frequently used panels in the program.
Double-click the CSS styles tab to expand the panel.
This panel contains lots of information and tools, so it needs space. Next, you’ll resize this panel to make it taller.
Drag the thick line that appears between the top of the CSS styles panel and the bottom of the Insert panel (circled in Figure 1-21) until there’s no empty space below the last row of icons in the Insert panel.
The Files panel could use a little more space as well.
Repeat step 9 to make the Files panel a bit taller.
Now the workspace looks great. It has the most common panels you’ll be working with for this tutorial (and for much of your Web page building). Since this arrangement of windows is so useful, you’ll want to save this as a layout (ok, maybe you don’t want to save this layout…just play along).
From the Application Bar’s Workspace switcher menu, choose New Workspace…
The Save Workspace window appears, waiting for you to name your new layout.
Type Missing Manual (or any name you like), and then click OK.
You’ve just created a new workspace layout. To see if it works, you’ll switch to another one of Dreamweaver’s Workspace layouts, see how the screen changes, and then switch back to your new setup.
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 CS4’s new iconic mode (as described on Workspace Layouts). This layout’s a bit too complicated for our needs, so you’ll switch back.
From the Workspace switcher menu, choose Missing Manual (or whatever name you gave in step 13).
Voilà! Dreamweaver sets up everything the way you want it. You can create multiple layouts for different Web sites or different types of sites.
As discussed on Setting Up a Site, whenever you want to use Dreamweaver to create or edit a Web site, your first step is always to show the program where the root folder is—the master folder for all your Web site files. You do this by defining a site, like so:
Choose Site → New Site.
The Site Definition window appears. You have a basic and an advanced method for defining a site. You’ll learn the basic method first, so make sure the Basic tab is selected (see Figure 1-12).
Type Tutorial 1 in the Site Name field.
The name you type here is solely for your own reference, to help you identify the site in Dreamweaver’s Site menu. Dreamweaver also asks for the Web address for your site. You’re working on the fictitious Chia Vet Web site.
In the HTTP Address field, type http://www.chia-vet.com. Click Next.
In the next step, you’ll tell Dreamweaver whether you plan on building regular Web pages or pages that require a special server for creating the dynamic, database-driven Web sites discussed in Part 6 of this book.
Click “No, I do not want to use a server technology”. Click Next.
In this tutorial, you’ll build a basic Web page.
In the next steps, you’ll tell Dreamweaver how you want to work on the files in your site and where you’ll store those files. In this example, you’ll use one of the folders you downloaded from this book’s Web site (at other times, you’ll choose or create a folder of your own).
Click “Edit local copies on my machine”.
Next, you need to tell Dreamweaver where it can find the tutorial files.
Click the folder icon next to the label, “Where on your computer do you want to store your files?”
The Choose Local Root Folder window opens, so that you can choose a folder on your hard drive that will 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 Web site.)
Browse to and select the Chapter01 folder located inside the MM_DWCS4 folder you downloaded earlier. Click the Select (Choose) button to set this folder as the local root folder.
This process is discussed on Defining a Site the Fast Way (see Figure 1-14). At this point, you’ve given Dreamweaver all the information it needs to successfully work with the tutorial files; you just need to skip through a few more screens and you’re ready to get going.
Click Next.
Dreamweaver asks how you want to connect to your remote server—the computer that will dish up the finished Web files to your adoring public.
From the “How do you connect to your remote server?” menu, choose None, and then click Next.
Dreamweaver can move your files to a Web server automatically, as you’ll learn in Chapter 17.
After clicking Next, you see a summary of your settings. If you made a mistake, click Back to return to the appropriate step in the process and make changes.
Click Done.
After defining the site, Dreamweaver creates a site cache for your Web site (see Defining a Site the Fast Way). 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.
“Enough already! I want to build a Web page,” you’re probably saying. You’ll do just that in this phase of the tutorial:
Choose File → New.
The New Document window opens (see Figure 1-17). Creating a blank Web page involves a few clicks.
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 “XHTML 1.0 Transitional”.
The window should look like Figure 1-17. XHTML 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”.
Click Create.
Dreamweaver opens a new, blank XHTML page. Even though the underlying code for an XHTML page is different in some ways from that of a plain HTML page, 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, what you’re looking at is 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.
Choose File → Save.
The Save As dialog box opens.
Always save your pages right away. This habit prevents serious headaches if the power goes out as you finish that beautiful—but unsaved—creation.
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.
Make sure you save this page in the correct folder. In Phase 2 (Phase 2: Creating a Web Site), you defined the Chapter01 folder as the root of the site—the folder that holds all the pages and files for the site. If you save the page in a different folder, Dreamweaver gets confused and its site management features don’t work correctly.
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.
In the toolbar’s Title field, select the text “Untitled Document”, and then type 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 is also what shows up as the name of your Web page when someone searches the Web using a search engine like Yahoo or Google. In addition, a clear and descriptive title that identifies the main point of the page can also help increase a page’s ranking among the major search engines.
On the Property inspector, click the Page Properties button, or choose Modify → Page Properties.
The Page Properties dialog box opens (see Figure 1-22), letting you define the basic attributes of each Web page you create. Six categories of settings let you control properties like text color, background color, link colors, and page margins.
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 will automatically use for all text on the page.
As you’ll see later in this tutorial, though, you can always specify a different font for selected text.
Next, you’ll set a basic text color for the page.
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 in Dreamweaver; now, the text on this page will be the color you selected. In the next step, you’ll add an image to the background of the page to liven it up.
Note
Alternatively, you could type a color, 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 (see the box on Phase 4: Adding Images and Text).
To the right of the “Background image” field, click the Browse button.
The Select Image Source window appears (see Figure 1-23). Use this window to navigate to and select a graphic.
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 on a Mac) button.
In Dreamweaver, you can also just double-click a file to select it and close the window you used to select that file. For example, you can accomplish both steps—selecting the bgPage.png file and clicking the OK button—by just double-clicking the file.
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) can identify the different types of files used on a Web site, you may want to display extensions. Here’s how: In Windows Explorer, navigate to and select the MM_DWCS4 folder (the folder containing this book’s tutorials). If you’re using Windows XP, choose Tools → Folder Options. If you’re on Vista, 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 all the files on your computer, click the “Apply to Folders” button, and then click OK; to apply it just to the tutorials, click OK.
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 (even if you want to insert space on top and to the left of the page) 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.
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-24).
These hexadecimal codes specify specific Web page colors (see Phase 4: Adding Images and Text for more about this notation).
Figure 1-23. Use the Select Image Source window when inserting graphics onto a Web page. The Site Root button (circled) gives you a quick way to immediately jump to the local site root—a nifty way to always know where you are when searching for a file. On the Mac, the Site Root button appears at the bottom right of the window.
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 been to, as noted in a browser’s History list. An active link is one at the very moment you click it. And finally, a rollover link indicates how the link looks when someone mouses over it. 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 can provide very useful feedback to Web visitors by indicating which links they’ve already followed and which remain to be checked out. For its part, the rollover link gives instant feedback, changing color as soon as a visitor moves the mouse cursor over it. The active link color isn’t that useful for someone using his mouse to navigate a site—since clicking happens so fast, he probably won’t even notice the active link color. However, with some browsers you can tab from link to link, and press the Enter key to follow the link. In this case, the active color is used to highlight a link to which a visitor just tabbed.
Note
Although Dreamweaver uses the term rollover link, in the world of Cascading Style Sheets, this is called a hover link.
Figure 1-24. You can set several different properties for links 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) links are underlined. Most browsers automatically underline links, but you can override this behavior with the help of this dialog box and Cascading Style Sheets (see Styling Links).
Click OK to close the window and apply these changes to the page.
You return to your document window. You see an asterisk next to the file name at the top of the document window—Dreamweaver is trying to tell you that you’ve made changes to the page since you last saved it (see circled image in Figure 1-25).
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.)
Now you’ll add the real meat of your Web page: words and pictures.
On the Insert panel’s Common category, from the Image menu, select Image (see Figure 1-26).
Alternatively, choose Insert → Image. Either way, the Select Image Source dialog box opens.
UP TO SPEED: Using Dreamweaver’s Color Box
That innocent-looking gray box in the Property inspector, the Modify Page Properties window, and various boxes throughout Dreamweaver is called the color box. You can use it to choose a color for the selected Web page element in any of three ways.
First, you can click one of the colors on the pop-up rainbow palette that appears when you click the color box.
Second, you can use the eyedropper cursor that appears when you click the color box. This cursor is “loaded,” meaning you can click any spot on your screen—even outside the dialog box—to select a color, a trick that comes in handy when you want to use a color from a graphic in your document. You can even sample a color from another application (from any visible window, Dreamweaver or not): Just move the eyedropper over the color, and then click. (This click may take you out of Dreamweaver. Just return to Dreamweaver, and you see that the color you sampled has been applied.)
Finally, you can click the Color Picker icon, shown here, to launch the Mac or Windows color-picker dialog box, which lets you choose from millions of possible colors.
If you decide you don’t want to add color, or want to remove a color you’ve already applied, click the Default Color button. Without a specific color setting, Web browsers use default colors for the element in question. For instance, text on a Web page is usually black unless you specify otherwise.
Next to the color box in any Dreamweaver dialog box is a blank text field. If you know your Web colors, then you can type their hex codes into this box, which is sometimes faster and more precise than clicking the rainbow palette.
The Palette Options menu is of limited use. It lets you select a different set of (very limited) rainbow colors for your palette.
The first two choices, for example, contain the outdated Web-safe color palette—a limited collection of 216 colors that display accurately on any computer screen. The Web-safe palette made sense back when graphics cards were expensive and dinosaurs ruled the earth. Today, however, most monitors can show millions of different colors. Likewise, the Grayscale palette offers 256 somber shades of gray (you’ll find them useful primarily when building Ingmar Bergman tribute sites). To really exercise your color creativity, use your computer’s color-picker, and select from the millions of colorful options available to computers today.
In a hex code, a Web color is represented by a six-digit code like this: #FE3400. (Hexadecimal notation is a system computers use for counting. In this system, you count like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. The # tells the computer that the following sequence is a series of hexadecimal numbers—in this case, three pairs of them.) The best way to learn a color’s hex value is to choose the color you want by clicking on it in the palette, and then looking at the code that Dreamweaver writes in the text box next to it. Hex colors are composed of three pairs of numbers, for example #FE3400 is really, FE, 34 and 00. Each pair represents a number for red, green, or blue, which together make up a color. You sometimes see only 3 numbers like this: #F00—this is shorthand and is used when both numbers in a pair are the same. For example, #FF0011 can be shortened to just #F01.
Figure 1-26. Some of the buttons on Dreamweaver CS4’s Insert panel do double duty as menus (the buttons 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—just click the button.
Browse to the images folder in the Chapter01 folder, and then double-click the graphics file called banner.jpg.
The Image Tag Accessibility window appears. Fresh out of the box and onto your computer, Dreamweaver has several accessibility preferences automatically turned on. These preferences are aimed at making your Web pages more accessible to people who use alternative devices for viewing Web sites—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 add what’s called an alt property. This is a text description of the graphic that’s useful not only for screen-reading software, but also for people who deliberately turn off pictures in their Web browsers so Web pages will load faster. (Search engines also look at alt properties when indexing a page, so an accurate alt description can also help your site’s search engine rankings.)
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-27. A thin border appears around the image, indicating that it’s selected. The Property inspector changes to reflect the properties of the image.
Note
You can also add or edit the alt text in the Property inspector (Figure 1-27).
Deselect the image by clicking anywhere 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 for adding text or more images.
Figure 1-27. When you select an image in the document window, the Property inspector reveals its dimensions. In the top-left corner of the inspector, a small thumbnail image appears, as does the word “Image” (to let you know an image is selected) and the image’s file size (in this case, 29 KB). The other image properties are described in Chapter 6.
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; these are the properties you set up earlier in the Page Properties dialog box. The Property inspector now displays text formatting options.
In the Property inspector, click the HTML button, and then, from the Format menu, choose Heading 1 (see Figure 1-28).
The text you just typed becomes big and bold—the default style for Heading 1. This Format menu offers a number of different paragraph types. The text doesn’t stand out enough, so you’ll change its color next.
Figure 1-28. The Property inspector includes two views: HTML and CSS. The HTML view, shown here, lets you control the HTML tags applied to text: created bulleted lists, paragraphs, create links, and so on. The CSS view provides a simple interface for creating Cascading Style Sheets so you can format text to look great.
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, most options in the Property inspector—like the one you’ll use next—apply only to selected text.)
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 in the Property inspector, type #EC6206 (or select a color using the color box, if you prefer), and then hit Enter.
The New CSS Rule window appears. This window (which you’ll learn a lot more about in Chapter 4), lets you create new CSS styles. In this case, you’ll be creating a type of style, called a tag style, which applies to any heading 1 (or <h1> tag) on the page.
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 is simply the instruction that tells a Web browser how to apply the style you’re about to create. In this case, you’re redefining how <h1> tags look.
Don’t worry about any of the other settings in this window; you’ll learn the details soon.
Click OK.
Dreamweaver has just created a new CSS style. Now, wasn’t that easy? Next you’ll add more text.
Click to the right of the heading text to deselect it. Press Enter to create a new paragraph below the headline.
While 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 another document, and then paste it into your Web page.
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.
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-29). If you don’t see them, make sure you completed 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 appear in pasted text. In this case, you need to remove them, and then create separate paragraphs.
Figure 1-29. Line breaks (circled) often crop up when you copy and paste text from other programs into Dreamweaver. Follow the steps on Phase 1: Getting Dreamweaver in Shape to make sure the line breaks are visible in Design view.
Click one of the gold shields, and then press Enter. Repeat for any other gold shields in the document window.
This action deletes the line break (actually the <br> HTML tag) 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.
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.
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.
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.
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, type #779A00, and then hit Enter.
The New CSS Rule window appears again. Now you’ll create a style for formatting <h3> tags.
From the top menu, select “Tag (redefines an HTML element)”.
You should see h3 in the middle field.
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.
Triple-click one of the green headlines. In the Property inspector, click the I (for Italics) button.
This action italicizes the text and updates the h3 stsyle you created earlier. Notice that the other heading 3 headline is now italicized.
Select the seven paragraphs under the “From the North” headline. For example, 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.
On the Property inspector, click the HTML button, and then click the Numbered List button (see Figure 1-28).
The paragraphs turn into a single, step-by-step, numbered list. You’ll now do the same for the other set of directions.
Repeat steps 22 and 23 for the six paragraphs below the “From the South” headline.
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.
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.
Make sure the HTML button is 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 the HTML button is selected, the B button inserts the HTML <strong> tag—used to strongly emphasize text. When the CSS button is pressed, the B button adds CSS code 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.
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.
A few more design touches remain to be added to the page, but first you should see how the page looks in a real Web browser.
Dreamweaver is as close as a Web design program can be to a WYSIWYG application, meaning that for the most part, What You See (in the document window) Is What You’ll Get (on the Web).
At least that’s how it’s supposed to work. But Dreamweaver may display more information than you’ll see on the Web (including “invisible” objects and table borders) and may display less (it sometimes has trouble rendering complex designs).
Furthermore, much to the eternal woe of Web designers, different Web browsers display pages differently. Pages viewed 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). Or they can be dramatic: Some of the advanced page-layout techniques described in Chapter 9 can look awful in older Web 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 a free service that creates screenshots of your site using a wide range of browsers and operating systems. Check out www.browsershots.org.
If you’re designing Web pages for use on a company intranet and have to worry about only the one Web browser your IT department has put 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 Web pages using whatever browsers you expect visitors to your Web sites to use. Fortunately, Dreamweaver lets you preview a Web page using any browser you have installed on your computer.
Before you can preview a page, you need to set up your list of browsers in the program’s preference window, like this:
Choose File → “Preview in Browser" →Edit Browser List.
The “Preview in Browser” preferences window opens (see Figure 1-30). When you install Dreamweaver, it detects which browsers are already installed on your computer; a list of those browsers appears in the browsers list in this window. If you installed a browser after you installed Dreamweaver, then it doesn’t appear in this list, so you need to follow steps 2 and 3 next; otherwise, skip to step 4.
Click the + button.
The Add Browser or Select Browser window opens.
Figure 1-30. 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 working with Cascading Style Sheets, as described in the Note on Attaching an External Style Sheet.
Click the Browse button. Search your hard drive to find a browser you wish 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 a new name. (But don’t do this before selecting the browser, since Dreamweaver erases anything you’ve typed as soon as you select a browser.)
In the window’s Browser list, select the browser you most commonly use. Turn on the Primary Browser box. Click OK.
You’ve just designated the browser as your primary browser while working 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 a real, bona fide Web browser. Fortunately, Dreamweaver makes it easy.
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 on Mac) 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 (however, you can change this setting by creating your own keyboard shortcuts as described on Keyboard Shortcuts). This keyboard shortcut opens the Web page in your primary browser, letting you 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-31).
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.
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.
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.
From the Common category on the Insert panel, click the Image button (see Figure 1-26).
You can also choose Insert → Image or use the keyboard shortcut Ctrl+Alt+I (⌘-Alt-I).
Browse to the images folder in the Chapter01 folder, and double-click the graphics file called portland.jpg.
Again, the Image Tag Accessibility window appears. You need to provide a good description for this image.
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.
Type Portland skyline, and then press OK.
Look at the Property inspector. It displays properties specific to images. 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.
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. (The Left option moves the image to the left, letting text wrap around the image’s right side.)
At the bottom of the page is a copyright notice. It’s not really related to the content of the page, so you’ll add a line to visually separate the copyright 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 (see Phase 1: Getting Dreamweaver in Shape). CSS provides a more flexible technique—known as a float—to achieve this same effect. You’ll learn about it on Adding Borders.
Scroll to the bottom of the page, click before the letter C in “Copyright 2009”, 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.
Select all the text in the copyright paragraph.
You can either triple-click inside the paragraph or drag from the beginning of the paragraph text to the end.
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.
Type copyright in the selector field (circled in Figure 1-32), and then click OK.
You’ve created another style. Notice that the copyright notice text gets smaller.
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.
Figure 1-32. The New CSS Rule window lets you create CSS styles. You can choose among many different types of styles. In this case, you’re creating a class style named copyright. Class styles work a lot like styles in Word processing programs—to use them, you select the text you wish to format, and then apply the style.
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 have several ways to do this. Using the Property inspector is the easiest.
In the Property inspector, click the HTML button; click the folder icon that appears to the right of the link field (see Figure 1-28).
The Select File dialog box appears.
Click the Site Root button (top of the dialog box in Windows; bottom of dialog box on a Mac), and double click the file named legal.html.
The Site Root button jumps you right to the folder containing your site. It’s a convenient way to quickly move to your root folder. Double-clicking the file inserts 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, the text is too wide if you expand your Web browser on a large monitor, and the photo is hanging way out on the right of the browser. To fix these problems, you’ll create a new layout element—a box to contain all of the content on the page.
Click anywhere inside the page, and then choose Edit → Select All or press Ctrl+A (⌘-A on a Mac).
The contents of the page are selected. You’ll wrap all text and images in a <div> tag to create a kind of container for the page contents.
Choose Insert → Layout Objects → Div Tag.
The Insert Div Tag window opens (see Figure 1-33). A <div> tag simply provides a way to organize content on a page by grouping related 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 when creating CSS-based layouts. You’ll read more about the <div> tag on Float Layout Basics.
Next, you need to create a style to provide the instructions needed to format this new <div> tag. You’ve already used the Property inspector to create a style, but that only works for text. To format other tags, you need to create a style in another way.
Figure 1-33. 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 The Insert Div Tag Tool.
Click the New CSS Rule button.
The New CSS Rule window appears (a CSS style is technically called a “rule”). This window lets you determine what type of style you’re creating, the style’s name, and where the style information should be stored. You’ll learn all the ins and outs of this window in Chapter 4.
From the top menu, choose ID, and then type #wrapper in the “Choose or enter a name” field. Make sure “This document only” is selected in the bottom menu. Click OK.
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 Web page building duties. So just relax and follow along.
After closing the New CSS Rule window, the “CSS Rule definition” window appears (see Figure 1-34). 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>.
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 specific width for the box, and center it in the middle of the browser window.
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.
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 the box.
Under the Margin settings, uncheck the “Same for all” box, and then, from both the right and left margin menus, select “auto”.
The auto property for the right and left margin is your way of telling a Web browser to automatically supply a left and right margin—in this case, as you’ll see in a moment, it has the effect of centering the <div> in the middle of a browser window.
The CSS Rule Definition window should now look like Figure 1-34. 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.
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 view your handiwork.
Choose File → Save. Press the F12 key (Option-F12 on a Mac) to preview your work in your browser (Figure 1-35).
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-35. The finished tutorial file should look like this. You may notice that the white space above the banner logo is bigger in browsers other than Internet Explorer. (The reason for this—and how to fix it—is explained on Modifying Fixed Layouts.) That’s just one of those funny browser inconsistencies that drive Web designers crazy (and not in a “funny ha-ha” kind of way).
Congratulations! You’ve just built your first Web page in Dreamweaver, complete with graphics, formatted text, and links. If you’d like to compare your work with the finished product, you’ll find another folder, Chapter01_finished, in the Tutorials folder.
Much of the work of building Web sites involves using 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.
Get Dreamweaver CS4: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
