Creating a Web Site: The Missing Manual, 2nd Edition

Chapter 4. Power Tools

In Chapter 2, you built your first XHTML page with nothing but a text editor and a lot of nerve. This is how all Web-page whiz kids begin their careers. To really understand XHTML (and to establish your XHTML street cred), you need to start from scratch.

However, very few Web authors stick with plain text editors or use them to create anything other than simple test pages. That’s because the average XHTML page is filled with tedious detail. If you have to write every paragraph, line break, and formatting tag by hand, you’ll probably make a mistake somewhere along the way. Even if you don’t err, it’s hard to visualize a finished page when you spend all day staring at angle brackets. This is especially true when you tackle more complex pages, like those that introduce graphics or use multicolumn layouts.

There’s a definite downside to outgrowing Notepad or TextEdit—namely, it can get expensive. Professional Web design tools can cost hundreds of dollars. At one point, software companies planned to include basic Web editors as a standard part of operating systems like Windows and Mac OS. In fact, some older versions of Windows shipped with a scaled-down Web editor called FrontPage Express, and Mac OS includes a severely truncated editor called iWeb, which limits you to ready-made templates and doesn’t let you touch a line of XHTML. But if you want a full-featured Web page editor—one that catches your errors, helps you remember important XHTML elements, and lets you manage an entire site—you have to find one on your own. Fortunately, there are free alternatives for even the most cash-strapped Web designer.

In this chapter, you’ll learn how Web page editors work and how to evaluate them to find the one that’s right for you. You’ll also tour some of the better free and shareware offerings currently out there. Most Web page editors are surprisingly similar, so this chapter helps you get started with your tool of choice, whether that’s Adobe Dreamweaver, Microsoft Expression Web, or a nifty piece of freeware.

Choosing Your Tools

Tools like Notepad and TextEdit aren’t all that bad for starting out. They keep page development simple, and they don’t mess with your XHTML (as a word-processing program would). Seeing the result of your work is just a browser refresh away. So why are you destined to outgrow your favorite text editor? For a number of reasons, including:

• Nobody’s perfect. With a text editor, it’s just a matter of time before you make a mistake, like typing <b> instead of </b>. Unfortunately, you might not realize your mistake even when you view your page in a browser. Remember, some browsers compensate for some types of mistakes, while others don’t. A good Web page editor can highlight faulty XHTML and help you correct it.

• Edit-Save-Refresh. Repeat 1,000 times. Text editors are convenient for small pages. But what if you’re trying to size a picture perfectly, or line up a table column? You need to jump back and forth between your text editor and your Web browser, saving and refreshing your page each time. This process can literally take hours. With a good Web page editor, you get conveniences like drag-and-drop editing to fine-tune your pages—make a few adjustments, and your editor tweaks your XHTML appropriately. Editors also have a preview mode that lets you immediately see the effect of your XHTML edits on a Web page, with no browser required.

• Help, I’m drowning in XHTML! One of the nicest little frills in a Web page editor is color-coded XHTML. Color-coding makes those pesky tags stand out against a sea of text. Without this feature, you’d be cross-eyed in hours.

• Just type <ul><li></li></ul>. To create a bulleted list, of course. You haven’t forgotten already, have you? The truth is, most Web authors don’t memorize every XHTML element there is. With a Web editor, you don’t need to. If you forget something, there’s usually a help link or a menu command to compensate. Without a tool to guide you, you’re on your own.

Of course, using a graphical Web page editor has its own risks. That’s why you started out with a simple text editor, and why you’ll spend a good portion of this book learning more about XHTML. If you don’t understand XHTML properly, you can fall into a number of traps.

For example, you might use a slick Web page editor to apply fancy fonts to your text. Imagine your surprise when you look at that page on a PC that doesn’t have those fonts installed. Your page reverts to an ugly or illegible typeface. (Chapter 6 has more about this problem.) Similarly, your editor can unwittingly lead you to insert elements that aren’t supported by all browsers, or graphics that won’t display properly on other computers. Finally, even with the best editor, you’ll spend a significant amount of time looking at raw XHTML to see exactly what’s going on, clean up a mess, or copy and paste useful bits to other pages.

Note

Web page editors are often called HTML editors. However, this is just a quirk of history, and virtually all Web page editors can build impeccable XHTML documents.

Types of Web Page Editors

Web page editors come in many flavors, but they all tend to fall into one of three categories:

• Text-based editors require you to work with the text and tags of raw XHTML. The difference between an ordinary text editor (like Notepad) and a text-based XHTML editor is convenience. Unlike Notepad or TextEdit, text-based XHTML editors usually include buttons to quickly insert common XHTML elements or element combinations, and a one-click way to save your file and open it in a separate browser window. Essentially, text-based XHTML editors are text editors with some useful Web-editing features stapled on top.

• Split window editors also make you write XHTML by hand. The difference is that a separate window shows the results of your work as you type. In other words, you get a live preview, which means you don’t need to keep stopping to see what you’ve accomplished.

• WYSIWYG (What You See Is What You Get) editors work more like word processors. That means you don’t need to write XHTML tags. Instead, you type in some text, format it, and insert pictures just as you would in a word-processing program. Behind the scenes, the WYSIWYG editor generates your XHTML markup.

Any of these editors makes a good replacement for a simple text editor. The type you choose depends mainly on how many features you want, how you prefer to work, and how much money you’re willing to shell out. The best Web-editing programs blur the lines between these different types of editor, giving you the freedom to switch back and forth between XHTML and WYSIWYG views.

It’s important to understand that no matter what type of Web page editor you use, you still need to know a fair bit about XHTML to get the results you want. Even if you have a WYSIWYG editor, you’ll almost always want to fine-tune your markup by hand. Understanding XHTML’s quirks lets you determine what you can and can’t do—and what strategies you need to follow to get the most sophisticated results. Even in a WYSIWYG editor, you’ll inevitably look at the XHTML underbelly of your Web pages.

FREQUENTLY ASKED QUESTION: Save As HTML

My word-processing/page layout/spreadsheet program has a feature for saving documents as Web pages. Should I use it?

Over the last decade, the Internet has become the hottest marketing buzzword around. Every computer program imaginable is desperate to boast about new Web features. For example, virtually every modern word processor has a feature for exporting your documents to HTML. Don’t use it.

HTML export features don’t work very well. Often, the problem is that the program takes a document designed for one medium (usually print) and tries to wedge it into another (the Web). But word processor documents just don’t look like Web pages—they tend to have larger margins, fancier fonts, more text, more generous spacing around that text, no links, and a radically different layout.

Another problem is the fact that HTML export features often create wildly complex markup. You end up with an ungainly Web page that’s nearly impossible to edit because it’s choked with formatting details. (Dreamweaver even has a tool that aims to help you with the clean up. It’s in the menu under Commands → Clean Up Word HTML.) And if you want to convert one of these pages into stricter, cleaner XHTML, you need to do it by hand.

The lesson? If you can, steer clear of the Save as HTML command. You’re better off copying and pasting the contents of your document into an XHTML file as plain text, and then formatting it with XHTML tags on your own.

Finding a Free Web Page Editor

Unless you’re one of the lucky few who already has a copy of a cutting-edge Web page editor like Expression Web or Dreamweaver, you’re probably wondering how you can find a good piece of software for as little money as possible. After all, the Web’s all about getting goodies for free. While you can’t find an industrial-strength Dreamweaver clone for free, you can get a good basic editor without opening your wallet. Here’s how:

• If you like to do your own research (always a good idea) and you don’t mind installing several dozen programs on your computer until you find what you like, head to a top shareware site like www.download.com. To dig up some contenders, search for “HTML editor.” (Even though most Web page editors turn out top-notch XHTML, they still go by their old description as HTML editors.)

  Note

  Shareware, as you no doubt already know, is software that’s free to try, play with, and pass along to friends. If you like it, you’re politely asked to pay for it (or not-so-politely locked out when the trial period ends). Freeware is software that has no cost at all—if you like it, it’s yours! Usually, you won’t get niceties like technical support. Some freeware is supported by donations. To make sure your shareware is virus- and spyware-free, download it from a reputable source like www.download.com.

• You can also browse a comprehensive list of Web page editors on Wikipedia at http://en.wikipedia.org/wiki/Comparison_of_HTML_editors/. This list is noteworthy for the surprisingly thorough information it provides. For example, it details the price of each editor and the operating systems that editor supports. Most importantly, it points out which are free.

You’ll quickly find out that there’s a sea of free editors out there. Many have awkward and clunky button and menu arrangements. Some have outright errors. Finding one that’s right for you might take a little time.

The following sections describe four worthwhile editors that don’t cost a penny.

Nvu

Nvu (pronounced “n-view,” as in “new view”) is a nifty, lightweight editor that’s supremely easy to use. Best of all, Nvu comes in a version for all three major operating systems: Windows, Mac, and Linux.

Nvu’s creators used pieces of the Mozilla browser, godfather to the increasingly popular Firefox browser, when they developed this editor. Nvu’s an open source project, which means that you can not only download and copy it for free, but you can, if you’re a programmer type, browse through the source code and submit improvements. As a Web-head, you’re most likely to fall in love with Nvu’s multiple views, which let you make changes in either a text-only XHTML view or a slick WYSIWYG view that previews your pages (see Figure 4-1).

Nvu’s key drawback is that its developers stopped working on it in 2006. Although Internet rumor has it that they’re working on a replacement, nothing’s on horizon right now, so don’t expect bug fixes or enhancements. Confusingly, the developers named Nvu’s last patched-up version KompoZer. You can download it at kompozer-web.de/en.

Amaya

Amaya is a Web page editor with real history. It’s been around for more than a decade, with regular releases and updates continuing to this day. It helps that the World Wide Web Consortium, the heavyweight international standards organization that helped standardize the Web, has adopted Amaya. Like Nvu, Amaya supports the big three operating systems, which is a rare asset—most free Web page editors, including the two you’ll learn about next, are for Windows PCs only. Amaya’s options for viewing Web pages do Nvu one better (see Figure 4-2).

However, Amaya isn’t as polished as a professional Web page editor, and finding the command you want in its cluttered menu and toolbars is often a chore. Still, for a free editor, it’s hard to describe Amaya as anything other than a barn burner of a bargain. To give Amaya a whirl, go to www.w3.org/Amaya.

Figure 4-1. Top: Instead of having to work with raw XHTML, Nvu’s Normal view lets you format text just as you would in a word processor. To switch from one view to another, use the tabs at the bottom of the window (circled). Middle: To fine-tune your XHTML markup, switch to the Source view. Nvu give you handy line numbers for reference, and color-codes your XHTML elements. Bottom: Need something in between? The XHTML Tags view lets you edit formatted text, but displays your document’s tags in floating yellow boxes. That way, if you find something amiss, you can switch to the Source view to clean it up.

HTML-Kit

HTML-Kit (www.html-kit.com) is a slightly eccentric Windows Web page editor with a screen layout that only Bill Gates’ mother could love. On the plus side, HTML-Kit is 100 percent free, relatively reliable, and ridiculously customizable.

Unlike Nvu and Amaya, HTML-Kit doesn’t provide a WYSIWYG editing mode. Instead, it has a split-preview editor, which means you can see a live preview of your XHTML document as you code it. For more HTML-Kit fun, check out the wide array of HTML-Kit plug-ins at www.html-kit.com, as long as you’re not scared off by perplexing names like avwEncodeEmail and hkMakeOptionsList (see the Web site for slightly more helpful descriptions). One interesting plug-in is the XHTML reference found at www.chami.com/html-kit/plugins/info/hkh_w3c_offline. Once you install it, this plug-in gives you technical help on any XHTML element in HTML-Kit. Just put your cursor on an element (click it with your mouse or navigate to it with the arrow keys), and then press F1.

Figure 4-2. Top: Open a Web page in Amaya, and you start in Design view. Bottom: It’s not immediately obvious, but if you select Views → Show Source from the menu bar, Amaya displays this split window view, which lets you jump back and forth between Design view and your XHTML markup. Best of all, you can make changes in either window. And if you have a widescreen monitor, you don’t need to stick with this top and bottom stacking—instead, choose Views → Split View Vertically to put the two views side-by-side.

CoffeeCup Free HTML Editor

CoffeeCup Free HTML Editor is a scaled-down version of the full-blown Windows product of the same name (minus the word “Free”). The full version has both a text-only mode and a WYSIWYG mode, but the free version switches off the WYSIWYG mode. Get your copy at www.coffeecup.com/free-editor.

Professional XHTML Editors

Fed up with settling for a low-powered Web page editor and an editing environment that seems like it was designed by M. C. Escher? If you’re ready to move on to a professional Web design package, take heart—your choice is surprisingly simple. That’s because there are really only two top-tier Web page editors on the market today.

• Adobe Dreamweaver is the favorite of graphic designers and hard-core XHTML experts. It’s packed with features and gives you fine-grained control of every XHTML ingredient.

• Microsoft Expression Web is a powerhouse revamp of the long-running Web editor Microsoft FrontPage. Start typing, and you’ll immediately see why Expression Web is popular with XHTML novices. Its WYSIWYG mode is so seamless that it’s hard to tell you aren’t using a word processor. Features like automatic spell check duplicate what you find in Microsoft Word.

Note

Confusingly, Microsoft Expression Web has a distant cousin with most of the same features. It’s named, in true long-winded Microsoft style, Microsoft Office SharePoint Designer. Like Expression Web, SharePoint Designer inherits the inner plumbing of the now-obsolete FrontPage. Unlike Expression Web, it has some optional features that work with Microsoft SharePoint, a Web-based program that big businesses use to share office documents and help employees collaborate. If you’re buying a Microsoft Web page editor on your own dime, you’ll almost certainly stick with Expression Web. But if you already have access to SharePoint Designer (say, through the company you work for), feel free to substitute it instead.

One of the reasons these products are so much better than their competitors is that they include a lot of tools you’re sure to need once you start designing Web pages. For example, both let you create style sheets (an advanced feature you’ll learn about in Chapter 6), resize images and drag them around your Web pages, and manage an entire Web site. Expression Web even includes a tool for generating fancy buttons. Another reason is that they’re just so darned easy to use. Even though both come packed with sophisticated features, editing a simple XHTML file couldn’t be easier.

In the past, Dreamweaver had a reputation for being complicated enough to scare away XHTML newbies. On the other hand, FrontPage (the predecessor to Expression Web) was known for being easy to use but possessed of a few bad habits—like inserting unnecessary elements into your code or relying on frills that worked only if your Web server supported the FrontPage server extensions. However, recent versions of both programs tackle these weaknesses. Now, Dreamweaver is virtually as easy to use as Expression Web, and Expression Web is almost as mature and well-rounded as Dreamweaver. In fact, common tasks in these two programs are surprisingly similar. The bottom line? You can’t go wrong with either.

If you’re still itching to be convinced, try a free 30-day trial of either product. Go to www.microsoft.com/Expression/try-it to get a free trial version of Expression Web, or to www.adobe.com/products/dreamweaver to download a working Dreamweaver demo. And, for an in-depth exploration of every Dreamweaver feature, check out Dreamweaver CS4: The Missing Manual.

UP TO SPEED: Mid-Level XHTML Editors

A few years ago, there were a number of mid-level Web page editors in hot competition. Today, most have died out. The mid-level Web page editors that remain often aren’t worth the expense. Instead, your best bet is to save up for one of the two leading-edge Web page editors—Adobe Dreamweaver or Microsoft Expression Web. Of the two, Expression Web is the more affordable (hovering around $250), while Dreamweaver commands a higher price because of its historical position as the tool-of-choice for professional Web developers (it’s about $400). You may be able to find academic (or “student and teacher”) editions of both programs at specialty retailers, like college campus computer stores. These editions are scaled down but still powerful, and they have a much lower price tag. You’ll need to prove you’re a student or starving academic to get in on the action.

Another option is to find a retailer that still offers copies of a slightly out-of-date version of Dreamweaver or Expression Web. For example, Amazon sellers often offer FrontPage 2003, which is the well-rounded predecessor to Expression Web, for little more than $100. Its core features work in much the same way as Expression Web, and you can get a lower-priced Expression Web upgrade when you decide to move on. However, there’s a good case to be made for sticking with a free Web page editor until you’re ready to move up to a more full-featured program.

Working With Your XHTML Editor

Once you choose a Web page editor, take it for a spin. In this section, you’ll learn how to create a sample XHTML document and get it online, all without leaving the comfort of your editor.

Software companies have spent the last decade copying features from their competitors and as a result, common tasks in Expression Web, Dreamweaver, and many free Web page editors are startlingly similar. That means that no matter which program you use, the following sections will teach you the basics. Once you’re comfortable with your editor, you can move on to the rest of the book and learn more about how XHTML works.

Note

Although future chapters won’t lead you step by step through any of these Web page editors, look for boxes and tips that point out occasional shortcuts, tricks, and techniques for your favorite editor. The one exception is the keenly important page template feature that both Dreamweaver and Expression Web provide—you’ll explore that in Chapter 10.

Starting Out

Here’s what you need to do to get started with your editor of choice:

1. Your first step is to launch the program by double-clicking the appropriate desktop icon or making a quick trip to the Start menu (in Windows PCs) or Finder → Applications (for Mac OS).

   Your Web page editor appears.

2. Some editors, including Nvu and Amaya, start you off with a tip of the day. If so, close this window to get to the main program.

   You may also need to remove a few more distractions. Dreamweaver clutters your view with a pile of panels. Although these panels provide quick access to advanced features, you might want to shunt them out of the way when you’re first getting started (see Figure 4-3). In Expression Web, you’ll see similar panels latched onto either side of the main window. To close them, click the X in the top-right corner of each one. (You can get the panel back later by clicking it in the View of Task Panes menu.)

   

   Figure 4-3. Top: Dreamweaver is packed with features, many of which sit at your fingertips in specialized panels, which latch on to the right side and bottom of the main window. In this figure, you see the view that appears automatically when you open Dreamweaver. Until you learn the basics, you might find it helpful to push this clutter out of the way by clicking the arrows circled here. You can also hide all panels at once by choosing View → Hide Panels. (Choose View → Show Panels when you’re psychologically ready for them to return.) Bottom: In this figure, the panels are hidden, giving you more room to work with in the main window.

3. Now, choose File → Open, and then navigate to one of the XHTML file samples you worked on in Chapter 2 (also available on the Missing CD page at www.missingmanuals.com).

   This step is easy—opening a document in a Web page editor is exactly the same as opening a document in any other self-respecting program.

Multiple Views

As you’ve already learned, you can look at an XHTML document in several ways, depending on whether you want the convenience of a word processor-like layout or the complete control of working directly with XHTML markup. Most Web page editors give you a choice and let you switch rapidly from one to the other. To switch views, you need to find a small series of buttons, usually displayed just above or just below the document you’re working on. Figure 4-4 helps you spot these buttons. One exception is Amaya—it lacks these handy buttons, and forces you to travel to the Views menu to make the switch.

Most Web page editors start you out in a WYSIWYG view that shows formatted XHTML—in other words, an approximation of what a page will look like in a Web browser. When you switch to the XHTML code view, you see the real story—the familiar text-only display of color-coded tags and text. These views are the two staples of XHTML editing. However, the most useful choice just might be the split view, which shows both views at once. Most commonly, you’ll use this view so you can edit XHTML tags and preview the results as you type. However, you can also work the other way, editing the WYSYWIG preview and seeing what XHTML tags your editor inserts, a great way to learn XHTML.

Some Web page editors give you interesting hybrid views. For example, Nvu has an HTML Tags view, which shows a formatted preview window with the corresponding XHTML elements floating in yellow boxes. To see what that looks like, flip back to Figure 4-1. In Amaya, you have two more specialized views. You can get an overview of the structure of your entire page using Views → Show Structure (see Figure 4-5), and you can review all the links to other Web pages (you’ll learn how to link pages in Chapter 8) using Views → Show Links.

Creating a Web Page in Code View

The best way to understand how your Web page editor works is to create a new XHTML document. Begin by working in the code view, and try to replicate one of the resumes you developed in Chapter 2 (the one on Structuring Text is ideal).

Launch your program and follow these steps:

1. Start by choosing File → New to create a new Web page.

   Some Web page editors start you out with a new, blank page, in which case you can skip the rest of these instructions. But most open some sort of New Document window that lets you choose the type of file you want to create.

   

   Figure 4-4. They may give them different names or put them in a different order, but most Web page editors use similar buttons to let you switch views, including Expression Web (top), Dreamweaver (middle), and Nvu (bottom).

2. Choose the type of page you want to create.

   Many Web editors give you a number of ready-made page designs you can use to get started. For example, in Dreamweaver and Expression Web, you can create Web pages with a variety of multicolumn layouts (more on that in Chapter 9). You’re best off to avoid these until you’ve learned enough to create your own unique designs. For now, start with a blank, plain-vanilla XHTML page. In Dreamweaver, choose Blank Page. In Expression Web, choose the General group, and then pick HTML.

   

   Figure 4-5. Many Web page editors are packed full of valuable extras. In Amaya, the Views → Show Structure command gives you an outline of all the elements in your page. Click any element in the side panel to jump to the corresponding place in your Web page.

   Note

   Even though virtually all Web page editors create ironclad XHTML markup, they often describe your Web pages as HTML documents. Don’t be confused. In their view, HTML is a catch-all term that includes both old-style HTML and modern-day XHTML.

   Many Web page editors also let you choose a doctype (The Document Type Definition) for your new Web page. In Dreamweaver, you can make your selection from the DocType list in the New Document window. In Amaya, you use the similar Document Profile list in the New XHTML Document window. In Expression Web, you need to take an extra step—first, click the Page Editor Options link in the New window, and then find the Document Type Declaration list in the Page Editor Options window. Don’t worry if you can’t find the option you need in your Web editor, because you can always edit the doctype by hand after you create the page.

3. Create the document.

   To make your selections official and actually create the document, click the Create or OK button (depending on the program).

   A blank document appears, showing a bare XHTML skeleton. In the XHTML code view, you see the basic <html>, <head>, and <body> elements.

Make sure you’re in XHTML Code view so you have complete control over the XHTML markup. Enter all the tags and text content for the résumé from beginning to end, just as though you were using Notepad or TextEdit. (You can pop back to Chapter 2 for a refresher on XHTML code-writing basics.) Along the way, you’ll notice a few shortcuts. For example, when you start to type a tag in Expression Web or Dreamweaver, a drop-down menu appears with suggestions. You can choose a valid XHTML tag from the list, or just keep typing. Also, when you add the start tag for a container element (like <h1> for a heading), many Web editors automatically insert the end tag (like </h1>) so you won’t forget it.

Creating a Web Page in WYSIWYG View

Creating and formatting a page in WYSIWYG view is a more interesting challenge, because you need to know where to find the various formatting options in your editor. Dreamweaver and Expression Web help you out by packing a fair bit of XHTML smarts right into their toolbars. To add an element in the WYSIWYG view, you first select the piece of text you want to format, and then click the appropriate toolbar button. You can then switch to the XHTML code view to verify that you got the result you expected. For example, to make text bold, select it and look for a toolbar button with the letter B. Clicking this button does the following behind the scenes (in your actual XHTML markup): inserts the <b> tag just before your selection and the </b> tag just after it.

Figure 4-6 shows you the most useful toolbar buttons in Nvu. But no matter what Web page editor you use, you need to spend a fair bit of time wandering through its toolbars and menus to find the most convenient way to get things done.

Figure 4-6. Nvu gives you one-stop shopping for lots of XHTML goodies. But remember, there’s a difference between finding a feature on a toolbar and really knowing how to use it. If you want to know the tricks and traps you’ll run into when using images, fonts, and tables, you need to keep reading.

Tip

It’s up to you whether you want to write your Web pages in XHTML view or using the WYSIWYG preview mode. The WYSIWYG view is always quicker and more convenient at first, but it can leave you with a lot of XHTML to check and review, adding to future complications.

To practice your WYSIWYG editing, re-create one of the example pages from Chapter 2 (the mini-résumé you see on The 10 Most Important Elements (and a Few More) works best here). Instead of entering the tags by hand, however, enter the text and format it using the toolbar and menu options in your editor.

Create a new document as described above, and then follow these steps:

1. Switch to WYSIWYG design view, and then type the title “Hire Me!”

   The text appears at regular size.

2. Select the text, and then find a toolbar or menu option that converts your text to a heading by adding the <h1> and </h1> tags.

   To mark up the text, you need to get a bit more intimate with your Web page editor and its menu and toolbar options.

   In Expression Web, the quickest approach to apply a level-1 heading is to select Heading 1 from the drop-down Style list. In Dreamweaver, you have several worthwhile choices. You can use the shortcut key combination (Ctrl+1) for instant gratification; you can use the toolbar (as shown in Figure 4-7); or you can use the Properties window (choose Window → Properties if it isn’t visible). In Amaya, you need to click the T1 icon in the toolbar-like panel that appears on the right side of the window. In Nvu, your only option is to choose Format → Paragraph → Heading 1, because this element didn’t make it into Nvu’s toolbar.

   

   Figure 4-7. The Dreamweaver toolbar is actually several toolbars in one, organized by tabs. To see the buttons you want, click the appropriate tab. The Text tab (shown here) has buttons to apply bold and italic formatting, set different heading levels, and create numbered and unnumbered lists.

3. Hit the Enter key to move to the next paragraph.

   Your typeface reverts to normal, and you can begin typing the rest of the document. Your next challenge is creating the bulleted list. Expression Web, Dreamweaver, Nvu, and Amaya all have a button for bulleted lists in the toolbar, if you can ferret it out.

   It’s easy to lose yourself in a thicket of tags. To make it easier to orient yourself, Expression Web, Dreamweaver, Nvu, and Amaya all include a quick element selector bar at the top or bottom of your document (Figure 4-8).

   

   Figure 4-8. The element selector (circled) is handy if you need to edit your XHTML. Once you scroll to the XHTML you want to edit in the page, double-check the element selector to confirm you’re at the right spot. The selector lists all the elements in action at your current location. In this example, the cursor is positioned inside a <b> element (for bold formatting), which itself is placed inside a <p> (paragraph) element, which is nested inside the <body> element that wraps the content of the complete XHTML document. You can quickly select any one of these elements by clicking it in the bar.

4. For a change of pace, try inserting a picture.

   Nvu provides easy access with an Image button in the toolbar. Expression Web and Dreamweaver have similar buttons, but it’s easier to head straight to the menu (choose Insert → Picture → From File in Expression Web or Insert → Image in Dreamweaver and Amaya).

   Note

   For this test, you should put the picture in the same directory as your Web page. Otherwise, some editors may add an <img> element that’s linked to a specific location on your hard drive. This is a problem, because Web visitors can’t access your hard drive, and so they won’t see the picture. To double-check that everything’s in order, look at the <img> element in XHTML view, and make sure the src attribute doesn’t start with file:///. If it does, edit it by hand so that the src attribute just has the file name, like the <img> element you used in Chapter 2 (Where Are All the Pictures?).

5. When you’re prompted to pick an image file, browse to the leepark.jpg sample, and then select it. (You can download this image from the Missing CD page at www.missingmanuals.com.)

   The program adds the appropriate <img> element to your XHTML code. Once you insert the picture, you’ll really start to appreciate the benefits of the WYSIWYG view. In all the Web page editors covered here, you can drag the picture to move it or drag the picture’s borders to resize it.

Managing a Web Site

Most Web page editors don’t limit you to working on a single Web page at a time. Expression Web, Dreamweaver, Nvu, and Amaya all give you the ability to load more than one document simultaneously and switch among them using tabs at the top of the document window (see Figure 4-9). This is particularly handy if you need to make the same change to a whole batch of pages, or if you want to cut a bit of content from one page and paste it into another.

Figure 4-9. With tabbed editing, your Web page editor creates a new tab each time you open a file. You can switch from one page to another by clicking the tabs in the tab strip, which usually sits above the top of the page (and underneath the editor’s menus and toolbars). Here, Amaya has three Web pages open at once. To close a document, click the X on the right side of the tab.

Along with the ability to edit more than one Web page at once, many editors also let you manage your entire Web site. The following sections describe the process for Expression Web and Dreamweaver. In both cases, your first step is to define your site’s folders and files so your editor knows just which documents make up your site.

Note

A Web site is simply a collection of one or more Web pages, along with any related files (like pictures). It’s often useful to manage all these files together in a Web page editor. In some programs, creating a Web site also gets you access to advanced features, like templates, link checking, and Web site uploading.

Defining a site in Expression Web

To create a Web site in Expression Web, follow these steps:

1. Select File → Open Site.

   The Open Site dialog box appears. It looks like an ordinary Open File dialog box, except for one difference—it doesn’t display a list of files. Instead, you see only folders.

2. Browse to the folder you want to open, select it, and then click Open. You can download the Chapter 2 folder from the Missing CD page (www.missingmanuals.com) to get a ready-made folder and set of files (the résumé files you worked on earlier).

   A Web Site tab appears with a list of all the files in your Web site (see Figure 4-10).

   

   Figure 4-10. When you access a folder in a Web site (here, it’s a folder named C:\Creating Web Sites\Chapter 2), Expression Web adds a tab that displays all the files in that folder. You can do basic file management here—for example, right-click a file to pop open a menu with options for renaming or deleting it. You can also double-click a page to open it for editing. At the bottom of the Web Site tab you’ll see buttons that let you publish your Web site, run a report, or check your links.

3. Add the Expression Web metadata folders. To do so, choose Site → Site Settings, choose “Manage the Web site using hidden metadata files,” and then click OK.

   Many of Expression Web’s site-management features require tracking information, which Expression Web stores in hidden subfolders. However, Expression Web doesn’t create these folders automatically (unlike its predecessor, FrontPage). You need to opt in to get the program to generate them.

   The word metadata means “data about data.” In other words, the metadata folders store data about the data in your Web site. If you’re curious, you can see these subfolders in Windows Explorer—they have names like _private, _vti_cnf, and _vti_pvt. (Web trivia: The VTI acronym stands for Vermeer Technologies Inc.—the company that originally created FrontPage and sold it to Microsoft.)

   These folders have several purposes. First, they keep track of what files you’ve uploaded to your Web server. That makes it incredible easy for you to update a Web site with Expression Web, because it transfers only changed files to your server, not the entire site. The folders also track information about your site’s pages and resources, which helps with handy features like link checking (Site Management) and templates (Page Templates).

Tip

Treat the metadata folders as a bit of behind-the-scenes plumbing. You need to have them for certain features, but once you create them you don’t need to think about them again.

Uploading a site in Expression Web

One of Expression Web’s most popular features is its support for updating a Web site without requiring a separate FTP program to transfer the files to your server. Before you can take advantage of this support, you need to follow the steps described above to tell Expression Web that your folder of Web pages represents a complete Web site. Then, you can update your site by following these steps:

1. Choose File → Publish Site.

   The first time you try to publish your site, Expression Web displays a Remote Web Site Properties dialog box. You use this window to set your FTP connection options, like the name of your FTP server (see Figure 4-11).

   

   Figure 4-11. Your Web hosting company should tell you the exact choices to make in the Remote Web Site Properties dialog box. Typically, you need the name of your FTP server, the directory (folder name) that belongs to your Web site on the server, and your FTP account name and password. You only need to complete this form once. If you’re successful, Expression Web uses this information the next time you publish your Web site (though you’ll have to type in your password each time).

2. Fill in the information about how you want Expression Web to connect to your Web server, and then click OK.

   You can also set some advanced options using the Publishing tab of this dialog box. Most usefully, you can set whether Expression Web uploads only changed or new pages (the standard setting), or always uploads everything in your copy of the site (the one stored on your PC).

3. At this point, Expression Web may prompt you for a user name and password so it can access your FTP server. Enter the information, and then click OK.

   Expression Web stores your user name for future use, but it’s up to you to remember your password and supply it each time you connect.

   Once you’re connected, Expression Web shows you a side-by-side file list that compares the contents of the Web site stored on your PC with that located on the server.

4. To bring your Web server up to date, select the “Local to remote” option, and then click the Publish Web Site button. This starts the publishing process (see Figure 4-12).

   The “Remote to local” option is handy if a file on your Web server is more recent than the copy on your own computer. This might happen if you edit the same Web site on more than one computer. The Synchronize option is like the “Remote to local” and “Local to remote” operations rolled into one. It examines each file and makes sure it updates any old versions on either your computer or the Web server.

   

   Figure 4-12. When you publish a Web site, Expression Web scans your files and copies only the ones you’ve added or changed since the last time you published the site. A progress indicator (circled) identifies the file being copied and estimates how long the operation will take.

Defining a site in Dreamweaver

Dreamweaver gives you two different ways to work with a Web site. The simplest is to use the Files panel to look at the files in any folder on your computer (see Figure 4-13).

Figure 4-13. You can browse all the files on your site without leaving Dreamweaver by using the Files panel.

Although using the Files panel is convenient, it’s also limiting. The problem is that Dreamweaver doesn’t have any way to tell what folders and files make up your Web site. To support Web site uploading and a few other tools, you may want to define a folder as a Web site. To do this, follow these steps:

1. Click the Manage Sites link in the Files panel, or just select Site → Manage Sites.

   Dreamweaver displays the Manage Sites dialog box, which lists all the Web sites you’ve configured so far. Initially, this list is empty.

2. To define a new Web site, click the New button, and then choose Site.

   Dreamweaver walks you through a Site Definition wizard that asks you several questions.

3. Enter a descriptive Web site name, and then click Next.

   The site name is just the name you use to keep track of your site. This name will also appear in the Files panel.

4. Choose “No, I do not want to use a server technology”, and then click Next.

   A server technology is the framework on a Web server that runs complex Web programs like database searches. Because you aren’t creating a full-blown program that runs on a Web server (you’re creating ordinary XHTML files), you don’t need this support.

5. Choose “Edit local copies directly on my machine”.

   Some Web servers let you modify pages directly on the server. Even if you have this specialized support, it’s always better to work with the files on your PC, and then upload them to the server. This gives you several advantages. First, you won’t derail your Web site if you make a minor mistake. Second, you have a valuable backup if anything happens to your Web server. And third, you have the ability to experiment with changes and different designs that may take days to finish, without affecting the live version of your site.

6. In the “Where on your computer do you want to store your files?” text box, type in the full file path for your Web site folder (usually something like C:\Creating Web Sites\Chapter 2), and then click Next.

   If you aren’t sure where your Web site folder is, you can click the folder icon next to the text box to browse for it.

7. The next step asks how you want to connect to your Web server. Fill in your connection information, and then click Next.

   The option you choose depends on the support offered by your Web hosting company, but FTP is a common choice (see Figure 4-14). Depending on what option you choose, you have to supply a number of extra settings.

   

   Figure 4-14. In the “Sharing files” step of the Site Definition wizard, you choose how you want to transfer your files to the remote Web server that stores your Web site files. Usually, you send your files to a Web server using a communication method like FTP. However, if the Web server is part of a company network, you might be able to transfer your files just by copying them to the right folder on the network.

8. Choose “Do not allow check in and check out”, and then click Next.

   Check in and check out features let you collaborate with a group of coworkers so you can each edit different parts of a Web site simultaneously. For information about this and other advanced Dreamweaver features, check out Dreamweaver CS4: The Missing Manual.

9. The last step summarizes the information you entered. Click Done.

   You return to the Manage Sites dialog box.

10. Click Done.

    You return to the Dreamweaver main window.

Uploading a site in Dreamweaver

Once you define your Web site, you’ll see it in the Files panel, and you can browse your remote Web server for files, or transfer files back and forth from your PC to the server. Dreamweaver doesn’t make things quite as intuitive as Expression Web, but it’s still pretty convenient.

To transfer files from your local computer to your server, you use an operation that FTP jargon calls a put. It works like this:

1. In the Files panel, choose your Web site from the drop-down menu at the top left.

2. Now, choose “Local view” from the drop-down menu at the top right.

   The Files panel shows a list of the files on your computer (see Figure 4-15).

   

   Figure 4-15. This example shows the local view of the Lee Park site. The local view lists all the files in the Web site folder on your computer. Using the icons in this window, you can quickly transfer files to and from the remote server.

3. Select the files you want to transfer to the Web server.

   You can select multiple files by holding down Ctrl while you click each file’s icon.

4. Once you select the files, click the Put arrow (the blue arrow icon pointing up), or right-click the files, and then choose Put from the drop-down menu.

   Dreamweaver asks if you want to copy dependent files.

5. Choose Yes if you want to copy linked files. For example, if you’re uploading a page that uses <img> elements to display graphics, you should click Yes to make sure Dreamweaver also uploads the graphics. If you don’t have any dependent files, your choice has no effect.

   Dreamweaver connects to your Web server and transfers the files.

To perform the reverse trick and transfer files from your Web server to your PC, you use a get operation. Follow these steps:

1. In the Files panel, choose your Web site from the drop-down menu at the top left.

2. Next, choose “Remote view” from the drop-down menu at the top right.

   Dreamweaver doesn’t automatically display the list of files on your Web server, because getting that list could take a little time. So you need to specifically ask Dreamweaver for an updated view of the files on the server, which you’ll learn to do in the next step.

3. Click the refresh button, which looks like a circular arrow icon.

   Dreamweaver connects to the Web server, retrieves the list of files on your site, and displays it.

4. Select the files you want to transfer to your computer.

   You can select multiple files by holding down Ctrl while you click each file’s name.

5. Once you select the files, click the Get arrow (the green arrow icon pointing down), or right-click the files, and then choose Get from the drop-down menu.

   Dreamweaver asks if you want to copy dependent files.

6. Choose Yes if you want to copy linked files. For example, if you’re downloading a page that uses <img> elements to display graphics, click Yes to make sure Dreamweaver also downloads the graphics. If your page doesn’t have any dependent files, your choice has no effect.

   Dreamweaver connects to your Web server and copies the files to the folder on your computer that contains your Web site.

   Tip

   Once you’re comfortable with transferring small batches of files, you can try out the Synchronize button. It works like the Web site publishing feature in Expression Web. When you click it, Dreamweaver examines the Web page files on your PC, determines which ones you’ve updated, and transfers just those to the Web server.