Creating a Website: The Missing Manual, 3rd Edition

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.

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

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.

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

   

   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.