by Tobin Anthony
Adobe PageMill is a recent addition to the collection of Windows commercial HTML editors. Originally developed for the Macintosh, PageMill 2.0 will be released for Windows 95, offering WYSIWYG HTML editing as well as incorporation of many of the most popular Web capabilities.
As previously mentioned, PageMill is in the class of WYSIWYG HTML editors that allows you, in most cases, to supersede the vagaries of HTML when creating Web pages. Furthermore, PageMill allows you flexibility in adding graphics, frames, and HTML forms and tables to your pages. As with other WYSIWYG HTML editors, this is accomplished with intuitive aids and tools within the application.
After opening a document in PageMill, you'll notice the toolbar at the top of the page as shown in Figure 20.1. In this toolbar, you'll see several groupings of buttons related to text formatting, image placement, HTML forms, and tables. You learn about the use of these different buttons in various sections of this chapter.
Like several other WYSIWYG HTML editors, PageMill enables you to preview your page much as it would appear within a Web browser such as Netscape Navigator or Microsoft Internet Explorer. By clicking the Preview toggle button in the upper right of the document, you can work with your document as if it were being viewed within a Web browser.
In Preview mode, you can click buttons, enter text in forms, and
activate your hypertext links. Clicking the Preview toggle puts
you back into Edit mode. This toggle allows you an easy means
of quickly validating forms, links, and Java applets.
| TIP |
Preview mode is a crude means of validating your HTML. PageMill may not render your HTML in the manner in which your audience might be accessing your pages. Remember to validate your HTML using a popular Web browser such as Navigator or Internet Explorer. You can set the PageMill preferences to open your pages in either Preview mode or Edit mode. We'll talk about setting your preferences later in this chapter. |
The Inspector is a utility that allows you to specify the attributes of several PageMill objects such as
PageMill is a graphically-oriented WYSIWYG editor, but there are some elements of Web page design that require a more specific interface. Figure 20.2 shows the interface available for HTML frames. These various elements of the PageMill Inspector will be reviewed in the associated sections.
As with the HTML editors, Navigator Gold and FrontPage (discussed in Chapters 18 and 19), PageMill allows you to enter text directly into a document window without the formatting discipline required for working with HTML. Working with text in PageMill is not that different from using a conventional word processor application.
After checking to be sure that you're in Edit mode, enter a simple text string into the PageMill document such as the following:
Working in PageMill is a blast!!
The text should appear as shown in Figure 20.3. You'll notice two things about the text you just entered into the window. First, the Change Format pop-up menu informs you that you entered the text using the Paragraph style. Also, by inspecting the text alignment buttons in the toolbar, you'll see that the text is aligned according to the center of the page.
Figure 20.3 : Creating HTML docu-ments is as easy as typing straight text into PageMill.
As with conventional word processors, you can select the text and change the formatting style using the buttons on the portion of the toolbar shown in Figure 20.3. The toolbar buttons that you will use most often when working with text are also displayed in Figure 20.3. Note that the standard HTML formatting styles, such as bold, italic, and typewriter, are supported through the use of buttons on this toolbar.
The Change Format pop-up menu allows you to change the text style to one of the HTML heading styles (H1 down through H6) or any of the variety of HTML list styles. Additionally, the preformatted and address HTML styles are supported through this interface.
HTML defines certain types of text alignment; PageMill allows you to specify text alignment using the Text Align buttons at the top of the toolbar. You can center your text across your page as opposed to using left or right justification.
Finally, you can indent your text using the left and right indent buttons on the toolbar. These buttons have the effect of enclosing the selected text in a BLOCKQUOTE environment. Multiple applications of the Indent buttons have the effect of nesting different BLOCKQUOTE environments.
While you busily type away what appears to be normal text in your PageMill window, the application dutifully transcribes your input into a proper HTML format. Normally, this process will occur in the background. However, there will be several instances where you'll want to have access to the actual HTML code. PageMill allows you to inspect and actually edit the HTML source code. Simply press Option+H or choose Edit, HTML Source.
Figure 20.4 shows an example of the type of source code generated by PageMill. Note that proper HTML formatting, such as use of the HEAD and BODY tags, is incorporated. You can edit the source code in this window, switch back to Edit, or even Preview mode. PageMill will try to interpret any additions to pre-existing source code. For example, you could add boldface HTML tags around a selection of text. Upon a return to Edit or Preview mode, that selection will appear in boldface.
Figure 20.4 : PageMill transcribes your text input into a proper HTML format.
Occasionally, you'll want to insert HTML source code that does not get processed by PageMill. These HTML statements are included in the source code but are not processed or displayed while in Edit or Preview mode. PageMill offers support for four different types of non-displayed HTML:
These objects are referred to in PageMill as HTML Invisibles. Even though these objects are not visible in Preview or Edit modes, PageMill denotes their inclusion in the Web page through the use of unique icons.
Comments are useful for describing different portions of a Web page. They can be added manually in the HTML Source window using comment tags. Comments can also be added in the Edit mode and modified using the Inspector. First, go to the Edit menu and insert a comment icon under the Insert Invisibles pop-up menu. The comment icon should appear as shown in Figure 20.5. You can just as easily go into the HTML Source window and manually enter the comment. However, this is one instance where you can use the Inspector to construct or modify the comment without having to dive into the HTML source.
Figure 20.5 : Comments can be modified using the Inspector.
Select the comment icon and activate the Inspector. The Object slide of the Inspector appears with an empty text field. You can insert the comment directly into the Inspector field.
Anchors, hidden form fields, and margin breaks can be entered and modified in the same manner. The Inspector's Object slide operates similarly on these and any other HTML object such as horizontal rules and graphics.
Similar to HTML Invisibles, HTML Placeholders are used to contain HTML that should not be processed by PageMill. You can use HTML Placeholders to insert HTML commands that are relevant to your Web server but that you don't want PageMill to process. Many Web servers support server-side includes that perform a relevant function. The HTML Placeholders differ from HTML comments in that the HTTP server, as well as PageMill, will ignore the contents of the comment. The contents of an HTML Placeholder will be ignored by PageMill in either Preview or Edit mode. The contents of the Placeholder will be surrounded by the tags <!--NOEDIT--> and <!--/NOEDIT-->.
Choose Edit, Insert Placeholder. Like HTML Invisibles, an icon
will appear. You can edit the Placeholder as you did with the
HTML Invisible; the Placeholder contents can be edited in the
HTML source window or Edit mode.
| TIP |
You can substitute the default PageMill icon using certain attributes of the NOEDIT tags. Adding the following to the NOEDIT tags, SRC="placeholder.gif" WIDTH=width HEIGHT=height, allows you to use a different graphic to denote a Placeholder. The graphic needs to have the height and width described in pixels. |
When you edit your HTML source, you run the risk of inserting HTML that cannot be processed by PageMill. As mentioned above, there are times that you'll do this purposefully. Sometimes, PageMill will run across HTML that it has no idea how to process. If a section of suspect text is not included in a Placeholder or an HTML Invisible, PageMill will denote it in Preview and Edit modes with a question mark icon. As with the other objects previously discussed, you can edit this code by selecting the question mark icon and activating the Inspector. The Inspector will then display the code in question for you to edit.
Adding links to your PageMill document is almost as simple as entering text, and there are as many options for creating links as there are for creating text. Similar to text entry, PageMill handles link construction in a very intuitive manner.
Select some text that you wish to link to another PageMill document. Then open the other PageMill document. You'll notice, when you save PageMill documents, an icon appears in the left side of the toolbar, as shown in Figure 20.6. Simply drag the Page icon from your target document to the selection of text on your original page. You'll notice that the color and type of the selected text transforms to that of an active link.
Figure 20.6 : You can drag and drop the Page icon to create links between your PageMill documents.
This text is now linked to the PageMill document from which you dragged the Page icon. If you click the link while in Preview mode, the linked page will be loaded into your original PageMill window much as if you had clicked the link in a Web browser. You can double-click the new link and move it by simply dragging it to other portions of your page.
Well this is great, but how can you set up links to remote documents in your pages? This is where the PageMill Link Bar comes in handy. The Link Bar is located at the bottom of your PageMill document, as shown in Figure 20.7. Select a portion of text and enter the URL in the Link Bar. After pressing Return, you'll once again notice that the text is transformed into an active link.
| TIP |
PageMill assists you in typing URLs when using the Link Bar. If you type the first letter of a protocol (for example, FTP, HTTP, news) and then press the Tab button or right arrow key, PageMill fills in the rest of the protocol. Type the domain name, press the Tab or arrow key again, and PageMill fills in the site type (for example, .com, .edu, .net). |
The Pasteboard is yet another PageMill utility to aid in your link, text, and graphics management. Note that the Pasteboard, as seen in Figure 20.8, is constructed much like the Windows WordPad in that you can enter text, graphics, or links by pasting on it. The Pasteboard contains five different pages upon which you can store objects such as graphics, sounds, Java applets, text, or active links.
Figure 20.8 : The Pasteboard allows you to cut and paste various HTML objects between your pages.
Activate the Pasteboard by choosing Special, Show Pasteboard.
You can load objects on the Pasteboard simply by dragging them
over to an open Pasteboard page. Normally, dragging an object
off the Pasteboard removes the object from the Pasteboard. However,
by holding the Alt key down, you can drag multiple copies of PageMill
objects to various pages.
| TIP |
The Pasteboard can be kept open in Windows even when PageMill is not the primary application. Dragging sound and graphics files onto the Pasteboard is an easy way of incorporating these files into your Web pages. |
Anchors are a popular feature used for navigating links throughout and between Web pages. As mentioned previously, HTML anchors can be added to your pages as HTML Invisibles. Anchors can be edited with the Inspector or inside the HTML Source window.
To create an anchor, do the following:
You'll see a link appear where you've dragged the Anchor icon. When in Preview mode or when viewed in a browser, clicking the link will take you directly to that anchored position.
Like text and hypertext links, working with graphical images in PageMill is highly intuitive. You can transparently convert images from native MacOS or Windows graphics formats, such as PICT or PCX files, to the GIF and JPEG standards used on the Web. You can reposition images much as you would in a drawing application. Furthermore, you can easily adjust the flow of text around your images to yield a more polished set of Web pages.
There are several ways to import images into your PageMill document:
Once you have placed an image in your document, you can manually
resize the graphic simply by clicking it and dragging the corners.
The Object slide of the Inspector allows you to work on the image
in a more detailed manner.
| TIP |
Resizing the graphic doesn't mean that you've reduced the size of the file. Graphics resized from large files may look small, but they'll still require a long time to download. As a result, if you want to greatly reduce the size of a graphic, you will need to do it with an external graphics application. |
Select the image and then activate the Inspector. You'll notice that the Object slide is active as shown in Figure 20.9. You can adjust the horizontal and vertical size of the image using the Inspector. In addition, you can define whether or not it is an image, a button, or an image map.
Figure 20.9 : Image attributes can be modified using the Inspector.
| TIP |
By setting up the image as a button, you can have a user activate a CGI script by clicking the image. |
When you do move a graphic into a PageMill document, you'll notice that you will be able to reposition the image simply by clicking and dragging it to a desired location. You can customize the way that text flows around the image. As shown in Figure 20.10, you'll see a new series of buttons activate when you click an image.
If you position an image within a line of text and the image is taller than the text, the image will increase the line spacing in that line of text. You can align the top, center, bottom, right, or left side of the image with the text. Alternatively, you can flow text around the right or left side of an image. To choose the appropriate alignment, simply select an image and click one of the five alignment buttons shown in Figure 20.10.
Moving graphics into PageMill really doesn't require much more explanation than what has previously been described. However, let's cover some of the ancillary features such as the Resource folder and Place Command in more detail.
The Place command is used to create links in your pages to remote files. You can even use the command to create links in your document to remote URLs. The Place Command can be accessed via the Edit menu or through the appropriate button on the toolbar. Figure 20.11 shows the dialog box used in conjunction with the Place command. Note that you can restrict the types of files displayed in the dialog box to the following formats:
This restriction feature is useful for placing files located in directories that are filled with a variety of file formats.
If PageMill recognizes the data type of the file, it places the data into the appropriate object type (image, Java applet, or Netscape plug-in object); a converted version of the file is then placed in the Resource folder. The only exception is for HTML or audio files, in which case PageMill always creates a link to that file.
If PageMill cannot recognize the file type, but the file name has a suffix included, PageMill assumes that the file contains data for a Netscape plug-in and creates an empty Netscape plug-in data object (using the EMBED tag). You can override this default behavior of the Place command by holding down the ã key when dragging the file-this forces PageMill to create a link to the file.
The Resource folder contains files generated by PageMill that you'll need for your Web pages. For example, when you drag a picture over to a PageMill document for inclusion in your Web page, PageMill automatically converts the image format to GIF. The original image is left untouched, but PageMill places a GIF version of the graphic in your Resource folder.
In a similar fashion, sound files are converted when brought into PageMill documents. Using the Place command, or simply by dragging and dropping, you can include links to sound files within your Web pages. These files are converted from normal Windows WAV format or Macintosh sound files to the more conventional AU format used on the Web.
Image map files are also placed in your Resource folder. These
files are created when graphically generating image maps within
PageMill. We'll talk about how to generate image maps in a later
section.
| TIP |
If you drag an image or sound file that requires conversion, PageMill will create a new file for you using an automatic naming scheme and put that new file into the Resources folder. You can override the default name by holding down the ã key. This forces PageMill to provide a standard file dialog box. |
PageMill supports inclusion of background images in Web pages through the use of the Inspector. To add images as backgrounds to your page, do the following:
Figure 20.12 : Use the Page slide of the Inspector to add background images to your Web pages.
PageMill allows you to create both client-side and server-side image maps. Both sets of image maps use a graphical editing environment similar to other image map editors such as MapIt and Mapedit.
Client-Side Image Maps Client-side image maps are easily constructed in PageMill. Simply double-click an image to activate the image map editing tools on the lower right of the toolbar shown in Figure 20.13. You can use the Hotspot tools to draw rectangular, circular, or polygon hotspots. Furthermore, you can shuffle between layers of hotspots, hide and show the hotspot labels, and even change the color of the hotspots.
Figure 20.13 : Server-side image maps are simple to construct using the toolbar editing tools.
To associate a link with a certain hotspot, create or select a hotspot, and enter the URL into the Link Bar at the bottom of the page. Alternatively, you can drag a local file onto the hotspot to set up a relative URL. The example in Figure 20.13 produces the client-side image map HTML shown in the following code:
<MAP NAME="image11">
<AREA SHAPE=rect COORDS="70,66,86,81" NOHREF>
</MAP><IMG SRC="image11.gif" WIDTH="155"
HEIGHT="107" ALIGN="BOTTOM" NATURALSIZEFLAG="3" USEMAP="#image11" ISMAP>
Server-Side Image Maps Server-side image maps can be produced when images are edited in the Image editor. Simply double-click an image while holding down the ã key to activate the Image editor. This editor, as shown in Figure 20.14, provides some additional tools to edit your images and create server-side image map files.
When the image map tools are used in the Image editor, PageMill creates a server-side image map mapping file in the Resource folder. This file would be uploaded to your HTTP server with other image map files and CGI scripts.
Using the Interlaced and Transparent tools in the Image editor, as shown in Figure 20.13, you can create interlaced and transparent graphic images. For transparent graphics, you simply click the Transparency tool and select the portion of the graphic containing the color which you'd like to make transparent.
For interlaced graphics, simply click the Interlacing tool in the Image editor. When you activate this tool, you'll notice that the icon changes to denote the change in status. Horizontal bars appear across the icon image much like those that are seen while an interlaced graphic is imaged on a Web page.
Finally, animated GIFs are supported within the PageMill Preview mode. You'll still have to use a graphics application to create animated GIFs, but PageMill will animate these images while previewing the document that contains them.
After working with text, hypertext links, and images, you'll have a good feel for how to set up forms in PageMill. Forms are easily created from the PageMill toolbar buttons shown in Figure 20.15. The forms supported by PageMill are those defined in the HTML 2.0 proposal.
Creating forms is simple. Click any of the toolbar buttons in Figure 20.15 to create a form element. For check boxes and radio buttons, enter the accompanying text by clicking to the right of the elements. Elements like text areas, buttons, and pop-up menus can be selected and resized just like graphics.
Like some of the HTML elements discussed in this chapter, you can edit your form elements using the PageMill Inspector. The versatility of the Inspector becomes apparent when using forms. Select a form while the Inspector is active and you'll see the form's attributes displayed in the Object slide, as shown in Figure 20.15. Notice that the attributes change as you click different form elements. As these different forms have different attributes, you are able to modify them using this feature of the Inspector.
Working with tables in PageMill is similar to working with forms. You can manually work with tables much as you can with images and forms. Tables can be resized by clicking and dragging the edges or edited with the Inspector.
Tables can be created using the Insert Table tool on the toolbar shown in Figure 20.16. You can click the tool and specify the number of desired rows and columns in the ensuing dialog box. Alternatively, you can click the Insert Table tool and drag the mouse-either vertically or horizontally-the proper distance to denote the number of desired rows and columns. The default width of the table is the width of the PageMill document window. However, it's simple to modify the table to change the width of a table, as discussed in the next section.
Figure 20.16 : PageMill offers you many tools with which you can modify your HTML tables.
| TIP |
You can create tables by copying and pasting portions of Microsoft Excel spreadsheets into PageMill documents. Depending on the size of the table, however, such a conversion can take a long time and can require that a lot of memory be allocated to both applications. |
Tables in PageMill can be resized just like images and form elements. Simply select a table and drag the tab on the right side to resize it. The number of rows and columns will remain the same, but their lengths will remain proportional to the size of the table.
Using the Toolbar Using the toolbar buttons in Figure 20.16, you can perform several operations on your table cells. When you properly select the space or contents of your tables, you can use the toolbar buttons to do the following:
Using the Inspector This may not come as a big surprise, but the Inspector gives you many options to modify your tables and table cells. Select a table and activate the Inspector, as shown in Figure 20.17. You can adjust the width of the table in terms of pixels or percentage of the document window's width.
Figure 20.17 : The Inspector allows you to modify some of the attributes of your table.
| TIP |
Leaving the width field blank in the Inspector instructs PageMill to size the table just wide enough to accommodate the contents of the table cells. |
The Inspector allows you to place a caption at the bottom or on top of the tables, as seen in Figure 20.17. You can also specify the table border, cell spacing, and cell padding.
When you select the contents of a table cell, the Inspector displays the cell attributes, as shown in Figure 20.18. Notice that you can once again specify the table width using the width parameter in this slide. With the Inspector, you can set certain cells up as header cells and suppress word-wrapping as well. Finally, using the Inspector, you can specify the vertical and horizontal alignment of the cell contents.
Figure 20.18 : Table cell attributes can be modified using the Inspector.
You can modify the contents of the table cell much as you would standard text. For example, you can change the color of the contents in one cell to be different than the text in an adjacent cell; you learn about changing text color at the end of the chapter. You can also change the style or size of the text inside of a table cell.
Frames are a convenient way to display tables of contents or indexes, where a click on a word or image in one frame brings up a detailed description of the topic in an adjoining frame. Frames are simple to construct using PageMill; the requisite frameset and HTML source code are transparently generated while you construct the frames using drag-and-drop techniques.
To build a framed document in PageMill, start out with a blank
page. Hold down the Alt key while dragging from one of the window
margins. You'll notice that, in effect, you drag a border across
the page. You can create horizontal or vertical frame elements
in this manner.
| TIP |
Holding the Alt key while moving borders allows you to create new frames. Dragging the borders without holding the Alt key simply moves the borders. |
When creating frames in PageMill, several files are actually constructed. The base document, which starts out as a blank page, contains the frameset. This file describes the names of the different frames as well as their sizes and other attributes. The HTML code used to populate the different frames named in your frameset is stored in various other files. Opening the frameset file in PageMill launches the entire suite of frames. In contrast, opening the HTML source code for one of the frames merely brings up the frame contents in an isolated PageMill window.
You can select frames in your PageMill document simply by clicking
their contents. When selected, the frame borders are highlighted.
You save the frames individually by selecting them and saving
them individually. If you resize any of the frames, you'll be
prompted to save the frameset as well. PageMill arbitrarily assigns
names to the individual frames; when saving the frame HTML, PageMill
creates file names with the frame name appended with an "html"
suffix.
| TIP |
PageMill allows you to individually save frames, save the frameset, or, most usefully, save the entire set of frames. Located under the File menu, you will see the Save Everything command, which will save the individual frame HTML as well as the frameset in the proper files. |
The Frame slide is one of the four major slides available in the Inspector. As depicted in Figure 20.19, the Frame slide allows you to modify attributes of the individual frames. Simply select one of the frames in the frameset and activate the Inspector.
Figure 20.19 : It's easy to modify a series of frames using the PageMill Inspector.
You'll notice that you can change the names of the different frames to something that is perhaps more relevant. Furthermore, the width of the frame can be changed or expressed using different bases; you can express the frame width as
Notice in Figure 20.19 that you can also set the height and width of the frame margins. Furthermore, you can specify whether the frames will contain margins and if the user will have the ability to manually resize the frame.
As frames are popularly used for navigation between different sets of HTML files, you'll want to set up hypertext links between your different frame documents. This is accomplished using the standard PageMill linking tools. You can drag links between frames or establish URLs to remote sites using the techniques previously discussed.
However, many Web designers use frames to navigate between different pages within a frameset. This is accomplished by assigning targets to the links described in different frames. PageMill has a special function that aids in assigning targets to your individual URLs.
Triple-click a link to select it; then click and hold the link after it's selected. A box similar to that shown in Figure 20.20 should appear. This box gives you a variety of choices from which you can send pages corresponding to the link. You can do the following:
Notice that the map at the bottom of the pop-up image in Figure 20.20 mimics the structure of the open frameset document. Alternatively, you can drag the mouse over to one of the representative "frames" in the pop-up image to denote a target frame for a given link.
There are other features in PageMill that pertain to the operation of the application and don't actually pertain to standard HTML content. We will discuss some of these advanced topics in this section.
PageMill cannot run either JavaScript or Java applets, but both can be placed inside of a PageMill document using the Place command. PageMill looks for Java applets in files that have a .Class suffix; thereby enabling their placement inside a PageMill document. Future versions of PageMill may allow you to preview Java applets as well as JavaScript.
Many of the operations discussed in this chapter can be customized through use of the PageMill Preferences dialog box. The Preferences dialog box is shown in Figure 20.21. These preferences are described in Table 20.1.
Figure 20.21 : Many of PageMill's functions can be customized through the Preferences dialog box.
| Preference | Description |
| General | Organizes window tiling, Pasteboard page-turning sound effects, Preview mode behavior |
| Page | Assigns default text and link colors, assigns default background image, file line breaks (UNIX, DOS, or Macintosh), and default file extension (.Html versus .Htm) |
| Resources | Specifies Resource folder location, specifies image map format (CERN versus NCSA) |
| Server | Assigns mapping between relative URLs and remote server |
| HTML | Specifies font and color of text in HTML source code view |
You can set the color of your Web page text using the Color Panel shown in Figure 20.22. The Color Panel is an easy and quick way to give the text on your Web page a variety of colors. Click the desired text, activate the Color Panel (under the Window menu), and click the desired color. You can modify the color by double-clicking a color in the Panel.