|
|
by Gregory M. Kovich
For too long, Web pages have been created by professionals well-versed in UNIX with tools resembling simple text editors, but no longer! Adobe Systems now offers two programs for both the beginning HTML author and the experienced Web site manager. PageMill and SiteMill feature a WYSIWYG interface, which makes operating them easy to figure out, as well as incorporating typical Macintosh ease of use. PageMill is an excellent choice for creating Web pages; it allows even a novice to create a Web page complete with forms, graphics, and formatting. SiteMill is the perfect choice for both managing and editing Web pages on the server; it catalogs a Web site, checks each link, and displays all errors. Currently, both programs support HTML version 2.0, as well as certain Netscape plug-ins. Minimum system requirements for both PageMill and SiteMill are as follows: Macintosh OS 7.1 or greater, Drag Manager (if Macintosh OS version is less than 7.5), 8 M RAM, and 10 M of hard disk space.
| Note |
If you're using version 1.0 of either PageMill or SiteMill, check Adobe's Web site at http://www.adobe.com/supportservice/custsupport/LIBRARY/pmlmac.htm and http://www.adobe.com/supportservice/custsupport/LIBRARY/smlmac.htm for the free updates to 1.0.2. |
Because both PageMill and SiteMill share the same feature sets, techniques and tools learned on one program can be used on the other. Each of these tools offers an easy system for creating Web pages or managing a Web site.
PageMill can be operated in two separate modes: Browse and Edit. The Browse mode is the default mode when you're opening a saved page; it shows a view of the page as though it were being served over the Internet to your browser. The Edit mode is for creating and editing your page. You can toggle between the two modes by simply clicking the Browse/Edit icon at the screen's upper right. The Browse mode icon looks like a globe, and the Edit mode icon looks like a quill and scroll. The remainder of this section explains the feature sets available in the Edit mode; they include a menu, a button bar, and a floating palette called the Attributes Inspector. Figure 14.1 shows the edit screen containing the feature sets.
Figure 14.1 : PageMill Edit page.
PageMill lets you easily create Web pages that have forms, backgrounds, internal links, external links, images, image maps, and detailed text formatting. Thanks to the program's WYSIWYG interface, you can accomplish all of this without any knowledge of HTML.
Adding text to the page is as simple as typing with a word processor. Just click on the area of the page where you want to add text and start typing! Text wraps at the end of a line, so carriage returns are necessary only for creating paragraphs or extra spacing. In addition, PageMill supports normal cut-and-paste, as well as Macintosh OS drag-and-drop. Macintosh OS drag-and-drop allows you to select text in another application and drag it to the page you're currently editing. If the dragged or copied text is RTF-formatted, the attributes and styles are preserved; otherwise, you have to reformat the text.
| Note |
RTF (Rich Text Format) is a formatting option common in many word processors. Saving a file in RTF allows for cross-platform and cross-application compatibility without losing formatting. |
| Note |
PageMill 1.0.2 uses the <BR> tag to end a paragraph instead of the <P> tag. Some browsers have trouble with line spacing when the <BR> tag is used (the spacing is simply ignored). It's best to view your page in Netscape or your favorite browser to figure out the page's formatting. This feature will be a choice with PageMill 2.0. |
When you're through typing the text, formatting it is much like formatting text in a word processor. Select the text to be formatted by double- or quadruple-clicking (a single word or the entire paragraph) and choose the format option you want from the available feature set options. The button bar allows simple alignment changes, and the Attributes Inspector, shown in Figure 14.2, lets you format the selected text in many different ways.
Figure 14.2 : The Attributes Inspector.
The Attributes Inspector has three formatting modes: Page, Text, and Image. (See Figure 14.2.) Each of these modes gives you specialized formatting.
In the Page mode, you can select what colors to use for plain text, active links, visited links, normal links, and page background. You can also create a page background by inserting an image into the "backgrd image" well (see the "Including Images" section for more detail) and associate any CGI actions for forms located on the page (covered in more depth in the "Forms" section).
In the Text mode, selected text and paragraphs can be formatted with the following options:
With this variety of options, PageMill enables you to use nearly all the major features of HTML code by simply selecting the text and applying the format. Savvy HTML users can even apply the Raw HTML formatting to selected text, which will identify it as specific HTML tags and code.
| Caution |
When you're using Raw HTML, PageMill doesn't error check the text. Be careful when using this format option, because the results might not be what you intended. |
In the Image mode, you can choose whether an image is a map, button, or picture and manually resize the selected image. Other features of this mode let you create a border around the image and display a descriptive name for browsers whose graphics capability is either turned off or nonexistent.
If the Attributes Inspector is not to your liking for formatting text, the Format and Style menus contain all the formatting options found in the Inspector. Just as you do when using the Attributes Inspector, select the text and go to the Format or Style menu to choose the option best suited to your needs. A rule of thumb is that logical and physical styles are found in the Style menu, and paragraph formats are found in the Format menu.
PageMill supports the six levels of headings described in HTML 2.0. These levels are available in both the Attributes Inspector and Format menu. Each heading level gives you incremental size and bolding changes for the selected text. Figure 14.3 illustrates the differences between these heading formats.
Figure 14.3 : Format of the six heading levels.
List formats are especially valuable for displaying information to your anticipated audience. The ability to display bullet points, automatically number lines, and easily separate terms from their definitions are several reasons for choosing from the list formats. Once again, PageMill allows format changes simply by typing the text and then selecting the format, either through the Attributes Inspector or the Format menu. Figure 14.4 displays several of the list formats.
Figure 14.4 : Different list formats.
Including text from another application is easy and quick. With Macintosh OS drag-and-drop support, found in System 7.1 and above, you can place a selected portion of text from another application inside an edit document. To accomplish this, have both windows open (the PageMill document and source text document), select the text from the source text document, and drag it to the PageMill document. Position the mouse where you want the text to be and release the mouse button. If the text is formatted in RTF, it will keep all the formatting shown in the source document. Otherwise, the text will have to be formatted by using one of the previously described methods.
| Note |
The installation of PageMill and SiteMill includes the addition of the Drag Manager. This isn't necessary for System 7.5 and above machines; nevertheless, it's installed anyway. |
One of the best features of browsing the Web is the rich images and graphics embedded in the pages at your favorite Web sites. Many tools have been created to help the budding Web author change a normal or boring text page into a multimedia extravaganza. PageMill 1.0.2 doesn't have a plethora of built-in tools to help with image animation or multimedia sensations; however, it does allow simple drag-and-drop inputting of images into any page. PageMill also contains a graphics editor that makes it easy to modify and enhance the image.
Popular Web browsers such as Netscape, Mosaic, and Internet Explorer display both gif and JPEG images. PageMill 1.0.2 automatically changes a PICT image into a gif image copy just by including it in the page, so including screen captures, scanned images, TV, or CD QuickTime frames into a page is as easy as saving the image and directing PageMill to the saved location.
You can include an image by clicking the Insert Image button on the button bar (shown in Figure 14.1). Once the image is included on the page, you can change its characteristics with the Image Editor, invoked by simply double-clicking on the image. The Image Editor has several tools that give you the ability to have the image display in an interlaced "venetian blind" format (resolved in the browser in stages), make certain portions transparent, shuffle one image on top of another, and permit the image's name to be displayed for text-only browsers. You can also easily create image maps in the editor window by simply drawing rectangles, ovals, polygons, or other shapes inside the image, then linking that shape to either a URL or an anchor located in another part of the current page. Figure 14.5 shows the Image Editor in the process of creating an image map.
Figure 14.5 : Image Editor window.
Images can also be used as a background to spruce up otherwise dull-looking pages. In PageMill, it's as easy as selecting the image and dragging it to the Attributes Inspector "backgrd image" well (shown in Figure 14.1). You can perform all these enhancements with either a button click or with drag-and-drop.
A link is a section of text or image that, when clicked, sends the browser to another location. The linked location could be on the same page, the same server, or an entirely different continent! PageMill enables you to do both types of linking: the same page or pages on the same server (internal links) and another page on a different server (external links).
You can create another type of internal link by sending the browser to an anchor. Creating anchors is easy and quick. Scroll to a heading or other area on the page where you want to establish an anchor, drag the Page icon to that area, and release the mouse. When the mouse is released, you'll see an image of an anchor that's associated with that portion of the page. To create a link between the anchor and some text, select the text, scroll down to the anchor, click and drag the anchor to the selected text, and release the mouse. You can also establish links to anchors on other pages by using the same procedure.
An internal link directs the browser to a location on either the same page or another page on the same server. In PageMill, you can create anchors in a page, and then create a link to the anchor elsewhere in the document. This technique is best used in a table of contents or index-type page that has many lines of text and offers links to certain sections, giving the viewer the option of jumping directly to information of interest rather than reading everything in between (or worse, scrolling through and missing it).
To create a link to another page, select the text that sends the viewer to that page and enter the URL (uniform resource locator) in the Link Location Bar (see Figure 14.6 for its position) or in the Attributes Inspector. An easier method is to open the target page in PageMill and drag its Page icon to the text you want to link with.
Figure 14.6 : The Link Location bar.
External links send the browser to another server. This
type of link is difficult to manage
because you have no control over the name or content of pages
on other servers. To create an external link in PageMill, follow
the same technique described in the internal link section, except
that you must type the URL that the browser goes to.
PageMill accommodates different URL types; however, make sure
the browser can accept the protocol or action you present. URLs
on the Web invariably begin with http://;
however, other resources on the Internet have URL types that perform
different functions. Table 14.1 lists several common URL types
recognized by PageMill.
| file:// | Opens a file on the server |
| ftp:// | Connects to a server by using FTP (File Transport Protocol) |
| gopher:// | Connects to a Gopher server |
| http:// | Connects to a WWW server |
| mailto: | Sends an e-mail |
| news: | Connects to a newsgroup |
| Note |
It's important to type the URL correctly. A broken link is both frustrating and hard to discover without a live test. |
Forms are very versatile, because they let a Webmaster or owner of a Web site know who's interested in the site or products and topics presented on the site's Web pages. Forms are a nifty way to gather information from visitors to your Web page or to share information with them. Another use is for commerce-actually selling merchandise at your Web site. The visitor uses a form to send in the necessary information to complete a transaction. This information is then sent to the Web server, processed by a CGI, and stored for retrieval during normal business hours.
PageMill makes it easy to create several different types of forms. A common form on a Web site is one used for logging the visitor's name and e-mail address. (See Figure 14.7.)
Figure 14.7 : Common Web site form.
The PageMill users' guide has a tutorial that includes a form-editing section demonstrating how easily PageMill permits changes and additions to a form. The form in Figure 14.7 was created by simply typing the labels for each field, then clicking the appropriate forms-related button in the button bar. Refer to Figure 14.8 for a display of the button bar and the associated forms buttons.
Figure 14.8 : The button bar and forms field buttons.
Figure 14.8 shows a variety of common form features, such as the checkbox, radio button, and pop-up menu; they're as simple to include as clicking a button. One drawback is that only one form per page is allowed, or more accurately, one Submit button per page. However, an easy workaround solution for this limitation is to link the submit button for one form to another page and another form.
| Note |
PageMill allows only one submit button per page, so whatever form is on that page is sent to the server to be handled by a CGI. |
Although forms are versatile and helpful to a Web site owner, it can require some work to get them operating correctly. For your form to work with the database program on a Web server, you must open the Attributes Inspector, select a field, and give it a name indicating what the field represents in the database. This process must be repeated until all the fields on the form have been associated with a field in the database. The submit button sends the contents of the form to the server, based on the CGI script associated with the form's page. To associate a CGI script with a page, enter the CGI's path and name in the Action field of the Attributes Inspector. When you're designing a form, contact your Webmaster or database administrator for the correct procedure to follow for your database or CGI.
| Note |
Check with the CGI script author about the value of the Action Option (GET or POST). Don't try to create a form and associate it with a CGI on your own; it's better to involve as many people as you can. |
As easy as PageMill 1.0.2 is to use, some limitations for the serious technical author are addressed in version 2.0. Adobe Systems has been quick to respond with a new and improved edition of this application and has been beta-testing PageMill 2.0 throughout the summer. The commercial version is scheduled to be released in November 1996. This version, for both the Macintosh and DOS/Windows platform, will be a welcome tool for many. Version 2.0 will follow the current HTML 3.0 standards and include the capability to do the following tasks that aren't available in version 1.0.2: frames, tables, direct import of Excel files, support for multimedia plug-ins, enhanced text formatting options (color, font, size of individual characters), animated gif images, text "wrap-around" images, ability to play sounds, spell checking, direct source code editing, <BR> and <P> support, document statistics (estimated time for document viewing), direct source code editing, placeholder support, and Java applets! You can see from this list that version 2.0 will answer many of the technical questions and drawbacks that had prompted users of more robust (but more difficult to use) HTML editors to criticize version 1.0.2.
When calculating the cost of creating a Web presence, invariably the cost for maintaining the site is either forgotten or unknown. Tasks such as evaluating the links, updating images, uploading, and storing pages all seem practically impossible to keep straight, especially at large sites with dozens of pages. SiteMill was created for the beleaguered Webmaster; not only does it have the same functions as its sister application, PageMill (all authoring tools are available), but it also offers tools to keep your Web site operating in tiptop shape. This program can be used on the server (if it's a Macintosh) or on the authoring station.
As you've probably discovered, the best Web sites update their content regularly. If this constant renewal didn't take place, then there wouldn't be any repeat visitors. Unfortunately, when a page's content is changed, links from other pages to the changed page might become broken. Discovering these broken links manually would take hours, and several more hours would be required to fix them. This is where SiteMill saves the day-it gives you a Site menu for loading the root folder (directory) into the program and directing the management software to analyze your site. After the analysis is finished, three windows are displayed: the Site window, the Error window, and the Extended URL window. Navigating between these windows lets you see what's wrong with your site, and more important, fix it fast!
In the Error window (show in Figure 14.9), errors are displayed as icons with question marks. The icons are different for images, pages, maps, and other files, so it's easy to understand the error's severity. Double-clicking on the question mark produces a dialog box that prompts you for the location of the missing file, image, page, or whatever error SiteMill discovered. Next to the file icon and name is a symbol resembling two arrowheads pointing at each other. Clicking this symbol reveals all the pages affected by this error. Finally, there's a description of the full path where SiteMill thought the file or link should be. Armed with this information, the savvy Webmaster could make short work of even the most complicated site! One last practical tool is the ability to do a "find-and-change" on URLs. This tool comes in handy when a popular external reference has been changed. Simply choose Site | Replace Links, and all references to the incorrect URL are changed to the correct one.
Figure 14.9 : The Error window.
Unlike the Error window, which displays all the internal links, pages, images, and files causing problems, the External URL window (shown in Figure 14.10) displays all external link references. SiteMill doesn't verify whether an external link is broken. However, if you get complaints that the link to a popular site no longer works properly, all you have to do is find the correct link (or an adequate substitute) and use the Replace Links menu option in the Site menu.
Figure 14.10: The External URL window.
Finally, the Site window (shown in Figure 14.11) allows you to view your entire Web site, errors and all. This window can be configured to view by name, date modified, or kind, which is surprisingly helpful when several people have access and authorization to upload files to the Web server. In the Site window, you can rename files, move them to different folders, examine all incoming and outgoing links for each file, create new folders, and display each page's anchors. When moving files in the Site window, any link referring to that file is automatically updated. This feature is available only in the Site window; moving or renaming files in the Finder will cause broken links.
Figure 14.11: The Site window.
The Site window's title is always the name of the root folder that contains all your Web site's information-in this case, it's Home Page Stuff. A file with an ¥ to its right is an unreferenced file. In this case, there are three unreferenced files that could be deleted or moved to another folder. Each folder's contents are accessible by simply clicking the triangle to the left of the folder icon. Pages that display a triangle to the left of the icon will reveal all the anchors on that page when the triangle is clicked.
In addition to these features, each page can also display every incoming and outgoing link. The icon with two arrowheads pointing toward each other represents incoming files, and the icon with two arrowheads pointing away from each other displays all the outgoing links in that page. This feature is helpful when you're looking for a summary of the links and images a certain page contains.
With the incredible power of cataloging a Web site for errors and links, coupled with the point-and-click ease of updating errors, SiteMill is an important tool for the serious Webmaster.
Adobe Systems has given the beginning Web author and the experienced Web site manager two powerful tools: PageMill and SiteMill. With the WYSIWYG interface and the support of Macintosh drag-and-drop, it's easy to create and manage your pages. Adobe will continue to enhance and hone these two new Web products to be current with the everchanging Internet standards. PageMill and SiteMill should be in the repertoire of any serious Web author or site manager.
