O'Reilly logo

Creating a Website: The Missing Manual, 3rd Edition by Matthew MacDonald

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 4. Power Tools

In Chapter 2, you built your first HTML page with nothing but a text editor and a lot of nerve—the same way all web-page whiz kids begin their careers. To really understand HTML (and to establish your HTML 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. The average HTML page is filled with tedious detail. Try 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, 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.

The downside to outgrowing Notepad or TextEdit is the expense. Professional web design tools can cost hundreds of dollars. At one point, software companies planned to include basic web editors as 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. (Most Macs include a severely truncated editor called iWeb, which limits you to ready-made templates and doesn’t let you touch a line of HTML.) But if you want a full-featured web page editor—one that catches your errors, helps you remember important HTML elements, and lets you manage your entire site—you have to find one on your own. Fortunately, there are free alternatives for even the most cash-strapped web weaver.

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 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 don’t mess with your HTML (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. Browsers do their best to compensate for HTML inaccuracies, even it means obscuring the real problems in your page. A good web page editor can highlight faulty HTML 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, a process that 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 HTML appropriately. Editors also have a preview mode that lets you immediately see the effect of your HTML edits on a web page, with no browser required.

  • Help, I’m drowning in HTML! One of the nicest little frills of a web page editor is color-coded HTML. 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 HTML 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 HTML (and a few related standards). If you don’t understand HTML properly, you can fall into a number of traps.

For example, you might use a slick page editor to apply fancy fonts to your text. Imagine your surprise when you look at your work on a computer 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 trip up some 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 HTML to see exactly what’s going on, clean up a mess, or copy and paste useful bits to other pages.

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 HTML. The difference between an ordinary text editor (like Notepad) and a text-based HTML editor is convenience. Unlike Notepad or TextEdit, text-based HTML editors usually include buttons that let you quickly insert common HTML elements or element combinations, and a one-click way to save your file and open it in a separate browser window. Essentially, text-based HTML editors are text editors with some useful web-editing features stapled on top. Website creators prefer HTML editors that have as many of these features as possible, but still provide a text-only option.

  • Split window editors also make you write HTML 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, so you don’t need to switch back and forth between text editor and browser to see what you’ve accomplished.

  • WYSIWYG (What You See Is What You Get) editors work more like word processors. Instead of writing HTML tags, you type in a page’s text, format it, and insert pictures just as you would in a word-processing program. Behind the scenes, the WYSIWYG editor generates your HTML 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 HTML and WYSIWYG views.

No matter which type of editor you use, you still need to know a fair bit about HTML 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 HTML’s quirks lets you determine what you can and can’t do—and the strategies you need to follow to get the most sophisticated results. Even in a WYSIWYG editor, you’ll inevitably look at the HTML underbelly of your web pages.

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 Dreamweaver or Expression Web, you’re probably wondering how you can find a good piece of software for as little money as possible. After all, the Web is 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.”

    Note

    Shareware 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 note-worthy for the surprisingly thorough information it provides. For example, it details the price of each editor and the operating systems each works with. Most importantly, it points out which editors you can get for 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.

BlueGriffon

BlueGriffon is a nifty, lightweight editor that’s supremely easy to use. Best of all, BlueGriffon comes in a version for all three major operating systems: Windows, Mac OS X, and Linux.

BlueGriffon uses the same rendering engine that powers the Firefox browser. It’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 Blue-Griffon’s multiple views, which let you make changes in either a text-only Source view or a slick WYSIWYG view that previews your pages (see Figure 4-1).

BlueGriffon has a somewhat tangled history. Many of the same developers worked on its predecessor, the popular free editor Nvu, until 2006. When development stopped on Nvu, another team of coders used Nvu as the basis for a patched-up web editor called KompoZer. But now that BlueGriffon is on the scene, it trumps both of these other editors.

BlueGriffon’s key drawback is that it’s new and evolving rapidly. On the positive side, you’ll get good support for the new features in HTML5. (BlueGriffon’s website provides regular “beta builds” of newer but untested versions of the editor that pack in the latest new features; look for them under the site’s Fresh Meat link.) The definite downside is you should expect bugs and minor glitches. At the time of this writing, the current version of BlueGriffon is 0.8, which means the development team hasn’t quite reached the stability and reliability standards of a professional 1.0 release.

To download BlueGriffon or read about its progress, go to www.bluegriffon.org.

Tip

Like many more advanced (and more expensive) web editors, BlueGriffon includes an integrated spell-checker. If BlueGriffon finds an unrecognized word (like “hizzle” in Figure 4-1), it underlines the word in red. You can then right-click that word to pick from a list of suggested corrections.

Top: Instead of making you work with raw HTML, BlueGriffon’s WYSIWYG 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).Bottom: To fine-tune your HTML markup, switch to the Source view. BlueGriffon gives you handy line numbers for reference and color-codes your HTML elements.
Figure 4-1. Top: Instead of making you work with raw HTML, BlueGriffon’s WYSIWYG 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). Bottom: To fine-tune your HTML markup, switch to the Source view. BlueGriffon gives you handy line numbers for reference and color-codes your HTML elements.

Amaya

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

Top: Open a web page in Amaya, and you start in Design view.Bottom: Select Views→Show Source from the menu bar, and Amaya displays this split window view, which lets you jump back and forth between Design view and your HTML markup. Best of all, you can make changes in either window. If you have a widescreen monitor, you don’t need to stick with top and bottom stacking; choose Views→Split View Vertically to put the two views side by side.
Figure 4-2. Top: Open a web page in Amaya, and you start in Design view. Bottom: Select Views→Show Source from the menu bar, and Amaya displays this split window view, which lets you jump back and forth between Design view and your HTML markup. Best of all, you can make changes in either window. If you have a widescreen monitor, you don’t need to stick with top and bottom stacking; choose Views→Split View Vertically to put the two views side by side.

Amaya isn’t as polished as a professional page editor, and finding the command you want in its cluttered menu and toolbars is often a chore. Its lack of recent updates is also disappointing, especially for HTML5 fans, who will have to type in new tags on their own. Still, for a free editor, Amaya is a barn burner of a bargain. To give Amaya a whirl, go to www.w3.org/Amaya.

HTML-Kit

HTML-Kit began its life as a slightly eccentric Windows web page editor with a screen layout that only Bill Gates’s mother could love. That version, now called HTML-Kit 292, still exists. It’s free, relatively reliable, and ridiculously customizable.

But the same company now offers a revamped version called, confusingly enough, HTML Kit Tools ($59). The new version has a slicker interface and better support for HTML5.

Unlike BlueGriffon 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 HTML document as you edit it. To download the free version (or a trial of the new, for-pay version), go to www.htmlkit.com.

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 ($49) 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 HTML Editors

Fed up with settling for a low-powered web page editor and an editing environment seemingly 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. You’ll find really only two top-tier editors on the market today.

  • Adobe Dreamweaver is the favorite of graphic designers and hard-core HTML experts. Packed with features, it gives you fine-grained control of every HTML ingredient. Because it’s the market leader and the tool of choice for most professionals, however, it carries a hefty price tag: $400 for the standard edition.

  • Microsoft Expression Web is a complete rebuild of Microsoft’s long-running FrontPage web editor. It offers many of the same high-powered features as Dreamweaver at less than half the cost ($150 at the time of this writing). If you aren’t out to impress a crowd of black-turtleneck-wearing web designers, it just might be the best value for your dollar.

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 is a successor to 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 pages, and manage an entire website. 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 HTML file couldn’t be easier.

In the past, Dreamweaver had a reputation for being complicated enough to scare away HTML newbies. On the other hand, FrontPage (Expression Web’s predecessor) 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 for 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 CS5: The Missing Manual.

Tip

Looking for the best but trying to save some bank? Both Adobe and Microsoft offer sweetly discounted upgrade pricing. For Adobe, you need to own a previous version of Dreamweaver or GoLive to get the deal, but Microsoft will qualify you for having a retail version of any Adobe Creative Suite, Microsoft Expression, or Microsoft Office program. Alternatively, 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.

Working with Your HTML Editor

Once you choose a web page editor, take it for a spin. 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. No matter which program you use, the following sections will teach you the basics: how to create a sample HTML document and get it online, all without leaving the comfort of your editor. Once you’re at home with your editor, you can move on to the rest of the book and learn more about how HTML works.

Note

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

Starting Out

Your first step is to launch your web editor by double-clicking the appropriate desktop icon or making a quick trip to the Start menu (on a Windows computer) or Finder→Applications (for Mac OS).

Some editors, such as Amaya, start you off with a tip of the day. If so, close this window to get to the main program.

Once your editor starts up, you’re ready to open a file and start editing. Usually, that means using the File→Open command, just as in any other self-respecting program. To try out your editor, open one of the HTML file samples you worked on in Chapter 2 (also available on the Missing CD page at www.missingmanuals.com/cds/caw3). The examples in this chapter use the file resume5.htm.

Multiple Views

As you’ve already learned, you can look at an HTML 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 HTML 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 below the document you’re working on. Figure 4-3 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 editors start you out in a WYSIWYG view that displays formatted HTML—in other words, an approximation of what a page will look like in a web browser. When you switch to the HTML code view, you see the real story—the familiar text-only display of color-coded tags and text. These views represent the two staples of HTML 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 to edit HTML tags and preview the results as you type. You can also work the other way, however, editing the WYSYWIG preview and seeing what HTML tags your editor inserts, which is a great way to learn HTML.

Some editors give you interesting hybrid views. For example, BlueGriffon has an HTML Tags feature that shows HTML tags in floating yellow boxes. To see it, switch to WYSIWYG view and choose View→All Tags Mode (Figure 4-4). Amaya offers two more specialized views. You can get an overview of the structure of your entire page using Views→Show Structure, and you can review all the links to other web pages (as explained in Chapter 8) using Views→Show Links.

They may use different names or arrangements, but most web page editors use similar buttons to let you switch views, including Dreamweaver (top), Expression Web (bottom), and BlueGriffon (Figure 4-1).
Figure 4-3. They may use different names or arrangements, but most web page editors use similar buttons to let you switch views, including Dreamweaver (top), Expression Web (bottom), and BlueGriffon (Figure 4-1).
Many web page editors come packed with valuable extras. In BlueGriffon, the Views→All Tags Mode command adds floating yellow boxes that display your tags in WYSIWYG view. If you see something amiss, you can switch back to Source view and correct it.
Figure 4-4. Many web page editors come packed with valuable extras. In BlueGriffon, the Views→All Tags Mode command adds floating yellow boxes that display your tags in WYSIWYG view. If you see something amiss, you can switch back to Source view and correct it.

Creating a Web Page in Code View

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

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

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

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

    Many editors also let you choose a doctype (The Document Type Definition) for your new web page. In Dreamweaver, you 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. And in BlueGriffon, you need to choose File→New Wizard instead of File→New to get a doctype choice. But don’t worry if you can’t find the option you need in your web editor, because you can easily 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 Create or OK (depending on the program). The editor displays your new blank document, which contains a bare HTML skeleton. In Code view, you see the basic <html>, <head>, and <body> elements.

Make sure you’re in Code view so you have complete control over the HTML markup. Enter all the tags and text 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 HTML code-writing basics.) Along the way, you notice a few shortcuts. For example, when you start to type a tag in Dreamweaver or Expression Web, a drop-down menu appears with suggestions. You can choose a valid HTML 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 HTML smarts right into their toolbars. To add an element in 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 HTML Code view to verify that you got the result you expected. For example, to make a piece of text bold, select it and then click the toolbar button marked B. Behind the scenes (in your actual HTML markup), the editor inserts a <b> tag just before your selection and a </b> tag just after it.

Figure 4-5 shows you the most useful toolbar buttons in BlueGriffon. But no matter which 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.

BlueGriffon gives you one-stop shopping for lots of HTML goodies. But remember, there’s a difference between finding a feature on a toolbar and really knowing how to use it. To learn the tricks and traps you’ll run into when using images, fonts, and tables, keep reading.
Figure 4-5. BlueGriffon gives you one-stop shopping for lots of HTML goodies. But remember, there’s a difference between finding a feature on a toolbar and really knowing how to use it. To learn the tricks and traps you’ll run into when using images, fonts, and tables, keep reading.

Tip

It’s up to you whether you create your pages in Code or WYSIWYG view. The WYSIWYG view is always quicker and more convenient at first, but it can leave you with a lot of HTML 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 Where Are All the Pictures? 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 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 will convert it 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 (and BlueGriffon), the quickest approach to apply a level-1 heading is to select Heading 1 from the drop-down Style list. In Dreamweaver, you have two worthwhile choices. You can use the shortcut key combination (Ctrl+1) for instant gratification, or you can use the drop-down list in the Properties window (choose Window→Properties if you can’t see it). In Amaya, you need to click the T1 icon in the toolbar-like panel that appears on the right side of the window.

  3. Press Enter 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. Dreamweaver, Expression Web, BlueGriffon, 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 orienting yourself easier, Expression Web, Dreamweaver, BlueGriffon, and Amaya all include a quick element selector bar at the top or bottom of your document (Figure 4-6).

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

    BlueGriffon’s Image button lets you do so easily. Dreamweaver and Expression Web have similar buttons, but it’s easier to head straight to the menu (choose Insert→Image in Dreamweaver and Amaya, and Insert→Picture→From File in Expression Web).

    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: Web visitors can’t tap into 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 HTML view, and make sure the src attribute doesn’t start with file:///. If it does, edit it by hand so that the src attribute has just the file name, like the <img> element you used in Chapter 2 (Where Are All the Pictures?).

    You’ll find an element selector (circled) handy if you need to edit your HTML. Once you scroll to the HTML in the page you want to edit, 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, you positioned the cursor inside a <b> element (for bold formatting), which itself is inside a <p> (paragraph) element, which is nested inside the <body> element that wraps the content of the complete HTML document. You can quickly select an element by clicking its tag in the bar.
    Figure 4-6. You’ll find an element selector (circled) handy if you need to edit your HTML. Once you scroll to the HTML in the page you want to edit, 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, you positioned the cursor inside a <b> element (for bold formatting), which itself is inside a <p> (paragraph) element, which is nested inside the <body> element that wraps the content of the complete HTML document. You can quickly select an element by clicking its tag in the bar.
  5. When your editor prompts you 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/cds/caw3.)

    The program adds the appropriate <img> element to your HTML 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 Website

Most web page editors don’t limit you to working on a single page at a time. Dream-weaver, Expression Web, BlueGriffon, and Amaya all let you open more than one document simultaneously and switch among them using tabs at the top of the document window (see Figure 4-7). 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.

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, which usually sit 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.
Figure 4-7. 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, which usually sit 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 website. The following sections describe the process for Dreamweaver and Expression Web. 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 website 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 website makes available advanced features, like templates, link checking, and website uploading.

Defining a Site in Expression Web

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

  1. Select Site→Open Site.

    The Open Site dialog box appears (Figure 4-8).

  2. Click Browse to search for your website folder.

    Opening a website is just like browsing for a file, except that you’ll see only folders listed, not file names.

  3. 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/cds/caw3) to get a ready-made folder and set of files (the résumé files you worked on earlier).

    Clicking Open returns you to the Open Site dialog box. If you want to store the location of this website so you can open it more quickly next time, click “Add to managed list.” Once you do, Expression Web adds the folder to its Managed Sites list.

    The Open Site dialog box lists all the websites Expression Web knows about. When you run Expression Web for the first time, this list will be empty (except for a nearly useless default website that Expression Web creates the first time you install it). To hunt down one of your sites, you need to click Browse.
    Figure 4-8. The Open Site dialog box lists all the websites Expression Web knows about. When you run Expression Web for the first time, this list will be empty (except for a nearly useless default website that Expression Web creates the first time you install it). To hunt down one of your sites, you need to click Browse.
  4. Click Open to load your website into Expression Web.

    After you click Open, the editor displays a Site View tab listing all the files in your site (see Figure 4-9).

  5. Add the Expression Web metadata folders. To do so, choose Site→Site Settings, choose “Maintain the website 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; you need to opt in to get the program to produce them.

    The word metadata means “data about data.” In other words, Expression Web’s metadata folders store data about the data in your website. 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 uploaded to your web server. This tracking makes it incredibly easy for you to update a website, because Expression Web transfers only changed files to your server, not the entire site. The folders also track information about your site’s pages and resources, which Expression Web uses for handy features like link-checking (Site Management) and templates (Creating a New Page Template).

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

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 lets you update your website without the need for a separate FTP program to transfer site files to your server. Before you can take advantage of this, you need to follow the steps described above to tell Expression Web that your folder of web pages represents a complete website. Then, you can update your site with these steps:

  1. Choose Site→Publishing (or click Publishing at the bottom of the Site View tab).

    You can’t publish your website until you fill in some basic information about your web hosting company,

  2. Click the big “Add a publishing destination” link in the middle of the Site View tab.

    The Connection Settings window appears (see Figure 4-10).

    Your web hosting company should tell you the exact choices to make in the Connection Settings window. Typically, you need to supply the address of your host’s FTP server, the directory (folder name) of your website on the server, and your user name and password. You need to complete this form only once. If you’re successful, Expression Web uses this information the next time you publish your site (although you have to type in your password each time).
    Figure 4-10. Your web hosting company should tell you the exact choices to make in the Connection Settings window. Typically, you need to supply the address of your host’s FTP server, the directory (folder name) of your website on the server, and your user name and password. You need to complete this form only once. If you’re successful, Expression Web uses this information the next time you publish your site (although you have to type in your password each time).
  3. Fill in the information that tells Expression Web how to connect to your server, and then click Add.

    Expression Web saves the info and connects to your web host. The next time you use Expression Web’s publishing feature, you’ll see a “Connect to publishing destination” link instead of the “Add a publishing destination” link. Just click once to connect, with no extra work.

    Once you’re connected, Expression Web shows you a side-by-side file list that compares the contents of the website stored on your computer with that located on the server, so you can tell at a glance which files have changed (Figure 4-11).

  4. To bring your web server up to date, choose Site→Publish Changed Files.

    This choice starts the publishing process (see Figure 4-12).

    You can also transfer individual files using the arrows that appear between the two file lists. To transfer files from your computer to the server, select them on the left list and click the right-facing arrow. To download a file from your server, select it from the right list and click the left-facing arrow. The two-way arrow underneath (“Synchronize files”) is like both operations rolled into one; it examines each file you select and makes sure it updates any old versions on either your computer or web server.

Here, Expression Web highlights two files that you updated on your computer, but not on the web server: About.html and ASP.NETCR.htm.
Figure 4-11. Here, Expression Web highlights two files that you updated on your computer, but not on the web server: About.html and ASP.NETCR.htm.
When you publish a website, Expression Web scans your files and copies only the ones you added or changed since the last time you published the site. A progress indicator identifies the file being copied and estimates how long the operation will take.
Figure 4-12. When you publish a website, Expression Web scans your files and copies only the ones you added or changed since the last time you published the site. A progress indicator identifies the file being copied and estimates how long the operation will take.

Defining a Site in Dreamweaver

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

Using Dreamweaver’s Files panel, you can browse all the files on your site without leaving the program.
Figure 4-13. Using Dreamweaver’s Files panel, you can browse all the files on your site without leaving the program.

Although using the Files panel is convenient, it’s also limiting. The problem is that Dreamweaver can’t tell what folders and files make up your website. To support website uploading and a few other tools, you need to define a folder as a website. Here’s how:

  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 websites you’ve configured so far. Initially, this list is empty.

  2. To define a new site, click New.

    Dreamweaver fires up a Site Setup window, where you fill in information about your new site.

  3. Enter a descriptive name in the Site Name box.

    The site name is just the one you use to keep track of your site, so use whatever name you want. This example uses LeeParkSite. The site name also appears in the Files panel.

  4. In the Local Site Folder box, fill in the full file path for your website folder (usually something like C:\Creating a Website\Chapter 2).

    If you aren’t sure where your site folder is, you can click the folder icon next to the text box to browse for it. Or, you can enter a path to a folder that doesn’t exist yet; Dreamweaver creates a new, empty folder so you can start building your new website.

  5. In the list on the left, click Servers. Then, click the tiny plus icon in the bottom-right corner of the web server list (Figure 4-14).

    A dialog box appears where you fill in your connection information (see Figure 4-15).

    Initially, Dreamweaver’s list of web servers is empty. You need to fill in the information for your web host provider.
    Figure 4-14. Initially, Dreamweaver’s list of web servers is empty. You need to fill in the information for your web host provider.
    Your web host can supply all the connection information you need. Key details include the address of your FTP server, your user name and password, and the root directory (folder name) of your website on the server.
    Figure 4-15. Your web host can supply all the connection information you need. Key details include the address of your FTP server, your user name and password, and the root directory (folder name) of your website on the server.
  6. When you finish entering your web server information, click Save.

    You return to the Site Setup window. Dreamweaver stores your connection information so you won’t need to enter it again.

  7. Click Save again to close the Site Setup window.

    You return to the Manage Sites dialog box.

  8. Click Done.

    You return to the Dreamweaver main window.

Uploading a Site in Dreamweaver

Once you define your website, 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 computer to the server.

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 website from the drop-down menu at the top left.

  2. Choose “Local view” from the drop-down menu at the top right.

    The Files panel lists the files on your computer (see Figure 4-16).

Tip

Initially, the file view is crammed into a small corner of the Dreamweaver window. If you want to expand it to fill the entire window, and show both the files on your local hard drive and those on the web server, click the expand button shown in Figure 4-16. This gives you a view that’s similar to the Site View tab in Expression Web.

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

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

  3. Choose Yes if you want to copy all the files linked to your site pages. For example, if you upload a page that uses <img> elements to display graphics, click Yes to make sure Dreamweaver uploads the graphics files as well as the pages themselves. If you don’t have any dependent files, your choice has no effect.

    Dreamweaver connects to your web server and transfers the files.

This is the local view of a website named LeeParkSite. It lists all the files in the site folder on your computer. Using the icons in this window, you can quickly transfer files to and from your server.
Figure 4-16. This is the local view of a website named LeeParkSite. It lists all the files in the site folder on your computer. Using the icons in this window, you can quickly transfer files to and from your server.

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

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

  2. Choose “Remote view” from the drop-down menu at the top right.

    Dreamweaver doesn’t automatically display the list of files on your 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 download 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 site folder on your computer.

Tip

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required