- HTML By Example -

Chapter 29

HTML with Adobe PageMill for Macintosh

Heralded as one of the first HTML editors to truly make a dent in the process of HTML creation, I have to admit that PageMill surprised me a bit. I stand pretty firm in the opinion that the only way to create the best HTML documents is with a text editor, but PageMill is beginning to change that. It's actually fun to use and impressively powerful.

That said, even PageMill has room to grow toward properly supporting and formatting HTML documents, and some advanced capabilities are still out of reach for PageMill users. You'll still end up editing some HTML by hand, but, fortunately, you can even do most of that directly in PageMill.

The other serious drawback to Adobe PageMill is the cost—currently about $100. That's more expensive than Netscape Gold, which includes a browser, mail interface and newsgroup reader. Of course, Netscape Gold is also a Windows-only application (Mac version due mid-1996). PageMill is currently Mac-only, although its popularity has convinced Adobe to announce a future Windows version. A demo of PageMill is available from http://www.adobe.com/Apps/PageMill/pagedemo.html.

Basic Markup in PageMill

Starting with a new document (choose File, New Page), entering basic text is as simple as typing characters in the document window. The PageMill interface doesn't really offer buttons for bold, italics, and so on, but these commands are readily available under the Style menu. In addition, most text styles follow the traditional Mac command-key shortcuts, so that [ap]+B will allow you to enter bold text, and [ap]+I lets you type subsequent text in italics. Table 29.1 shows the command key equivalents for common HTML text styles.

Clicking the paper/pen icon (or the globe icon) in the top right corner switches PageMill between "edit" and "preview" mode.

Table 29.1 Command key shortcuts for HTML tags.

There are two basic ways you can enter text in PageMill. Using the keyboard shortcuts or menu commands, you can apply an HTML tag, then type the text in that style. Or, you can select text that's already been typed and apply the style. For instance, if I type the following:

I cannot stress the importance of Point #1 enough.

In plain text, I can go back with the mouse and highlight importance then use either [ap]+I or the menu command Style, italics to change the text to italic. Selecting Point #1, I could use Shift+[ap]+S or Style, Strong to apply the HTML tag <STRONG> to that text (see fig. 29.1).

Fig. 29.1

Applying text style HTML tags.

PageMill requires you to use the <P> key sequence or command more often than it should. Hitting Return after typing a heading, for instance, doesn't automatically change the text back to <P> style, although that might seem to make sense.. Instead, it's necessary to use the paragraph menu command whenever you wish to type plain text..

If you ever feel "stuck" in a tag's particular format, try changing back to the <P> tag with the Option+[ap]+P combination.

HTML Lists

Again it's possible to change to a list format, then type your entries. The easier way to do it, though, is to type each entry with a Return at the end, then go back and change the style to a list style. For instance, try typing this "list" in plain text:

Baseball

Football

Hockey

Basketball

Tennis

Now, by highlighting the list and choosing a list style from the Format, List menu, we can quickly turn this regular text into an HTML list (see fig. 29.2).

Fig. 29.2

Changing plain text to an HTML list.

For hierarchical lists, you can select the list items that you'd prefer to see indented, then choose the command Format, Indent Right. This essentially nests a list within a list. If you again select the indented list items (or leave them still selected) and choose a new list style using the Format, Lists menu command, you have effectively nested a different type of list within the first one.

Definition Lists

Definition lists aren't remarkably different than other list types in PageMill, except that they take a bit more effort. Since nothing can be assumed about definition lists, you may need to select and change each line individually. For instance, enter the following plain text:

Baseball

Easily my favorite game, Baseball is still the American Pastime.

Football

My second favorite game, nothing gets me more pumped than a good NFL game.

Hockey

Everybody gets in the playoffs, but I love watching it live.

Basketball

Not much of a pro fan, but I love the college sport.

Tennis

Of all these sports, this is the one I play the best. Never will make pro, though.

To create the definition list, your best bet is probably to choose the entire listing and turn everything into a definition term with the menu command Format, List, Definition Term. This saves about half the work. The next step is to select each definition separately and apply the menu command Format, List, Definition.

If you prefer, of course, you can simply select each individual entry and give it the appropriate command for definition term or definition. Either way it ends up looking like figure 29.3.

Fig. 29.3

Creating a definition list for your HTML document in PageMill.

Inserting <HR>

There's pretty much just one way to enter a horizontal line in PageMill, and it's nothing more than pressing the button that looks like a line in PageMill's button bar. By example, we can type the lines:

Ending of first section.

Beginning of second section.

If you place the cursor (insertion point) at the beginning of the second line and press the Horizontal Line button in the button bar, you've got a line (see fig. 29.4).

Fig. 29.4

Adding a horizontal line to your document.

Links, Images, and Special HTML

PageMill has a very simple interface for adding hypertext links and images to your Web document. In addition, PageMill includes impressive tools for editing images, creating transparent GIFs and even allows you to drag-and-drop graphics onto your document.

Adding Links

There are a few different ways you can add links to your pages. Probably the most common—manually entering the link—works like the following:

1. Select the text for the link.

2. With the text highlighted, click in the Link Address bar (just right of the globe at the bottom of the page).

3. Enter the URL for this link. Hit Return when you're finished.

By way of example, enter this text in PageMill or select some text you've already entered:

Back to Index

Now highlight the text with the mouse, then click just to the right of the globe in the bottom left corner of the PageMill window. Enter an URL for this link. When you hit Return, your text should change to a hypertext link (different color and outlined) (see fig. 29.5).

You can test local links by switching to "preview" mode and clicking the link. The local page will appear in a new PageMill window.

Fig. 29.5

Adding links manually.

Another way to add links to your pages is by using drag-and-drop. Within PageMill, you can link to another page (if it's currently open in it's own PageMill window) by dragging the small Page icon (next to the "title" text box at the top left of the PageMill window) to the document that you're currently editing. The link automatically appears with the title of the page as its text.

To use your own text, highlight it in the document you're editing, then drag the other page's Page icon to your highlighted text.

You can also cut-and-paste links from one page to another. PageMill will alter the link to make it work for the current page.

Adding Images

Adding images is also very simple, although there's a lot you can do with an image once you've got it on the page.

The easiest way to add an image to your page is to drag and drop it from another PageMill page, the Scrapbook, the Finder, or any drag-and-drop enabled application (Adobe Photoshop, for instance). PageMill can handle images of type GIF, JPEG or PICT (PICTs are automatically converted to GIFs).

To add a graphic using the filename, click the Insert Image button in the PageMill button bar. In the resulting dialog box, enter the filename for the image you want to insert, or choose it from the listing. When you've got it, click Open. PageMill will open the graphic at that point in your document.

Manipulating Images

PageMill also offers some advanced features for manipulating graphics once you have them on the page. Click once on the graphic and notice that the graphic is highlighted with a box and drag boxes. Click and hold on these drag boxes and you can resize the graphic (see fig. 29.6). You can also turn this graphic into a clickable image. With the image selected, just enter an URL in the Link Address bar at the bottom of the page.

As in many graphics applications, by holding down the Shift key before you select a drag box, you can resize the graphic proportionately.

Fig. 29.6

Resizing and linking graphics in PageMill.

Transparency and Client-Side Maps

If you'd like to turn this graphic into a transparent GIF, double-click the graphic. PageMill's GIF tools appear. Using the "magic wand," you can click the color in the graphic that you'd like to turn transparent (see fig. 29.7).

You can change a JPEG to a GIF by clicking the GIF button, since GIFs are required for transparency.

Fig. 29.7

PageMill's built-in tools for transparency and client-side maps.

What else can you do? How about creating a client-side image map? Click a shape tool and drag it over the graphic. You've just created a hotzone. You can enter an URL for this link at the bottom of the graphic window (click to the right of the globe) or you can drag the Page icon from another PageMill document onto the hotzone to create the link.

To create a "default" link, just click the entire graphic and give it an URL. The hotzones will override this default; clicking outside of the hotzones will cause the default to use used as the link.

When you're done with the graphic, click the close box. You'll be asked to save the graphic. Do so and you're done.

Actually, there's something else we need to do to create the client-side map. Back in the actual document, make sure the graphic is highlighted then select Windows, Show Attributes Inspector. Now, click the Image button at the top of the Attributes Inspector window. Click the radio button under Behavior that's marked Map. Now you've got a client-side map!

You can test your client-side map in Preview mode if you've linked to local files.

Entering Unsupported HTML

Do you have a special tag you want to insert into the document? All you have to do is select the Style, Raw HTML command. Then type your HTML command, complete with brackets, like the following:

<SCRIPT>document.write("Howdy!")</SCRIPT>

That's all it takes. Notice that PageMill turns raw HTML a different color to help it stand out from the rest of the document. In Preview mode, the tags won't appear.

Of course, you can hand edit the HTML document all you want by saving it in PageMill and then re-opening it in SimpleText or another text editor. It's still plain text, and PageMill doesn't have commands for a lot of the advanced HTML you've learned in this book.

Example: The Basic Page in PageMill

This shouldn't take any time at all. Start by entering raw text into PageMill. Then we'll go back and clean it up, adding HTML emphasis and markup tags. Create a new document in PageMill, then enter Listing 29.1.

Listing 29.1 pagemill.html PageMill's Basic Page

Other Sites of Interest

We've included a number of other sites below that you might find interesting

if you use any of our products. We can't guarantee the accuracy or usefulness

of these sites, but they seem friendly enough.

Mike's Internet Stop

Finding Mr. Write

Left at the Fork

Toasting Your Toes

Horsing Around the Mountain

Now let's see how quickly we can make this an attractive page. Start by highlighting the first line and choose Format, Heading to change it to an appropriately-sized heading.

Next, add a horizontal line after the paragraph of text. Simply place the cursor in the blank space and click the horizontal line button on PageMill's button bar. (You may also want to add space on either side of the HR.)

Then choose the entire listing of sites and use the Format, List commands to change the list to a bullet-style (UL) HTML list. Finally, select each individual site name and assign it an URL for a hypertext link. I'd suggest trying both the manual and the drag-and-drop method to get a feel for both. When you're done, it ought to look something like figure 29.8.

Fig. 29.8

The completed PageMill example.

Creating Forms

PageMill makes form creation so easy that we might as well cover it here. There are basically two steps to creating your form. You start by using the button bar to create and paint the entry elements onto your screen. Next, you pull up the Attributes Inspector again and use it to assign names, sizes and forms submitting information.

Laying Out the Form

Creating your form is basically point-and-click. Every time you click one of the form elements in the PageMill button bar, an associated form field appears on the screen. Create a new document and click some of those buttons. If you play with them a little, you'll notice that you can click once one an element to highlight it, then pick it up and drag it around on the page and place it just about anywhere you want to—as long as it's legal under HTML rules.

If you move the mouse pointer slowly over each button in the button bar, it's name appears in the top right corner of the PageMill window.

For example, create three textboxes and a pop-up menu using the PageMill buttons. You might also want to create a Reset button, and you should definitely create a Submit button. After you've done that you'll have a page that looks something like figure 29.9.

Fig. 29.9

The raw elements for your HTML form.

The first step is to insert a return between each element and line them up nicely down the left side of the screen. Then, enter some text to the left of each form field to describe it. Make the text boxes "Name," "E-Mail," "Web URL," and describe the pop-up as "Favorite HTML Editor."

Then, notice that you can double-click each textbox to enter default text. Do so if you want to. Also, double-click the pop-up. Click inside it and you can edit all of the choices. I'm going to put some popular HTML editors in mine (see fig. 29.10). You can even double-click the buttons to edit their values.

Fig. 29.10

Adding names and values for the form elements.

With all of this done, we turn to the Attributes Inspector. With the first textbox selected, click the rightmost button on the Inspector (the picture/forms button). It will change to show you the type of form element that's selected and give you a field to enter the name for this textbox. Click in the field, name the form element and hit Return.

You'll need to do this for each of the form buttons. Notice that the pop-up menu gives you other FORM SELECT choices in the Inspector, like how many elements to display and whether or not more than one selection is possible. (In this example I'm choosing to show one element at a time and to make only one selection possible.)

Finally, you need to set the form METHOD. This is done by clicking the left-most button on the Inspector (the document button.) In the ACTION field, enter the URL for your form-processing script (make sure you hit Return when you've finished). In the METHOD pop-up you can choose GET or SEND for your form data. That's it—your form is ready (see fig. 29.11).

Fig. 29.11

Browsing the form in the PageMill's Preview Mode.

Document Info

Under that same document button in the Attribute Inspector, you may notice that you have control over some other document issues as well. To change any color in the dialog, just pull down its menu and choose Custom. You'll then be presented with a color wheel for choosing your color. When you've found the color you want, click OK. That color will take affect immediately.

If you want a background image, simply drag the image to the box marked Backgrnd Image in the Attribute Inspector. When the box is highlighted, drop the image on it. Suddenly, you've got a background (see fig. 29.12). To delete the background, click the tiny trash can icon.

Fig. 29.12

Adding a background with drag-and-drop.

All you have left to do is add a title to the PageMill document. And, honestly, if you haven't figured out how to do this, I'm a little disappointed. (Actually, I missed it the first time around, too.)

Click the box next to the word "Title" under the PageMill button bar. Type your title. Hit enter. That's your title. (See fig. 29.13.) I'll enter:

Do You Like My Dog?

Fig. 29.13

Entering a title for your HTML document.

Pretty obvious, huh?

Summary

In my personal opinion, PageMill is the best example of an application that really makes powerful HTML easier than hand-editing. Unfortunately, even PageMill doesn't offer every HTML tag and construct we've learned in this book. But it's a good start, and you can always go back in with a text editor to change things.

Basic markup is easy, but, since the button bar doesn't offer many text-oriented options, I'd recommend you learn some of the keyboard shortcuts for bold, italic, paragraph, headings and other tags. Apply list tags is just as easy, although you need to define DT and DD tags separately within definition lists.

PageMill's interface for creating links is a bit unique, but very easy and effective once you get used to it. Support for a number of different drag-and-drop options also makes working on a big, inter-connected site much easier.

Perhaps PageMill's greatest strength is dealing with graphics. You can drag-and-drop graphics, add them by file name and even edit them from within PageMill. Not to mention, PageMill makes creating a client-side image maps actually fun. Big kudos for these extra features.

Finally, PageMill makes form creation very graphical and understandable. Although you'll still need to edit manually to add JavaScript and similar elements, the basic server-side form is a cakewalk to create.

Review Questions

1. Are menu commands the only way to access style elements like bold and italics in PageMill?

2. What should you do if you feel PageMill is "stuck" in a particular tag like a heading or list tag?

3. In creating a definition list, why is it helpful to choose an entire list and change it definition terms (DT), even if some of the elements are definitions (DD)?

4. What is the menu command for <HR> in PageMill?

5. Can you cut-and-paste a link from one page in PageMill to another?

6. What happens to PICT files when they are drag-and-dropped on PageMill documents?

7. What is the name of the tool used to create transparency in GIF files?

8. What are the three steps to creating a client-side image map?

9. What is "raw HTML"? Why does PageMill need a special command for this?

10. Where do you enter METHOD and ACTION information for forms in PageMill?

Review Exercises

11. Use PageMill, definition lists and hyperlinks to create a page of book reviews. Clicking the book's name shows the user a graphic of the book. For instance, and entry might be:

HTML By Example

The best book ever written for learning HTML the right way.

12. Based on the example above, add another Definition (DD) line that includes a link to order the book, the author's name, copyright info and price. For instance:

HTML By Example

The best book ever written for learning HTML the right way.

Todd Stauffer, Copyright 1996, $34.99. Order this book.

13. Create a button bar interface using PageMill. (No image map is necessary, just create a series of clickable images.)

14. Make a similar button bar, but use PageMill's built-in client-side image map creator.

15. Add Internet Explorer "background" sounds to a PageMill document.

16. Determine which type of centering (Netscape's <CENTER> tag or HTML's <DIV ALIGN="CENTER">) PageMill uses.