by Eric Ladd, Todd Stauffer, and Pamela Rice Hahn
When you author an HTML document, all you're really doing is creating a plain text file. In the early days of HTML authoring, a simple text editor like vi (for UNIX) or Notepad (for Windows) was all document authors had to assist them. Later came add-on templates and libraries for existing word-processing packages. These allowed users to stick with a familiar interface while giving them special functions to handle the more common authoring tasks. As the HTML standard grew to include more tags, dedicated tag editor programs emerged. These programs have interfaces that are similar to most word-processing programs, but are loaded with special options to help set up not only the HTML tags, but the many attributes you can use with the tags to alter their effects.
The latest stage in this evolution is the what-you-see-is-what-you-get (WYSIWYG) HTML editor. This is something of a misnomer because with these programs you rarely see any HTML code. Rather, you compose the page as you would have it look on a browser screen, and the program writes the corresponding HTML. This type of program promises to revolutionize Internet publishing because now all you need to know is how to format text and drag-and-drop objects on a page. The editor takes care of knowing the HTML.
This chapter takes an in-depth look at some of the features of the three most prominent WYSIWYG HTML editors available today. In this chapter, you will learn the basics of how to use the following:
By considering your own authoring needs and the capabilities of each of these programs, you should be able to make a solid decision on which one to use in your publishing efforts.
For people who don't want to learn HTML or for those who abhor the thought of typing out of all those tags longhand, WYSIWYG editors are a blessing. But there's another group that would have you believe that WYSIWYG editors are the scourge of the Internet publishing community. Members of this group are typically folks who have been doing HTML authoring for a (relatively) long time and who are accustomed to coding by hand in a simple text editor.
While lamenting the rapid, forward surge in technology is questionable, part of their argument is valid. WYSIWYG editors are tools that allow anyone, regardless of their HTML proficiency and their knowledge of what constitutes suitable content, to publish a document online. What this means is that you're much more likely to see documents that are poorly designed, that have lewd or self-indulgent content, or that generally have no business being on the Internet. WYSIWYG editors empower everyone to place information on the Internet, and it's important to realize that when everyone gets into the act, the information you see will be less homogeneous than what was there before.
In spite of this, WYSIWYG editors are here to stay, and you're very likely to find yourself using one. If you do, you should not treat it as an excuse to not learn HTML. Indeed, as you work with such an editor, you might find your knowledge of HTML helping you to better use the program. For example, you might look at a dialog box showing the properties of an image on your page and recognize how the controls in the dialog box relate to the different attributes of the <IMG> tag. After you see the relationships between the program features and HTML, you'll become a smarter and faster user of WYSIWYG software.
Netscape's latest entry in the feverish competition for your Internet desktop is Netscape Communicator--a suite of software that includes the following:
When you fire up Netscape Communicator, you'll see the screen shown in Figure 42.1. Note the floating toolbar you see in the figure. Using this toolbar, you can switch quickly from your browser to your inbox (Messenger), your discussion groups (Collabra), or your WYSIWYG editor (Composer). If you find that the toolbar is getting in your way, click the Netscape logo on the toolbar to minimize it. The minimized toolbar will still be available to you at the bottom of whatever Netscape window you have open.
TIP: You can move the floating toolbar by clicking the ridged bottom-left corner of the toolbar and dragging it to where you want it to be. You can also right-click this corner to reveal a context-sensitive menu that lets you change the orientation (horizontal or vertical) of the toolbar and whether or not the toolbar is always in front of your Netscape window.
This section focuses on Netscape Composer--the WYSIWYG tool you can use to create and publish Internet documents.
FIG. 42.1
Netscape Communicator opens up the Navigator 4.0 browser by default.
You have a number of different ways to get started with Netscape Composer. From the File menu, you can choose the New Page or Open Page options. Holding your mouse pointer over New Page reveals a drop-down list of three different ways to start a new document. These are:
Selecting the blank page opens up the Composer window with nothing in it. Choosing the template option causes a new window in Navigator to open up a templates page on Netscape's Web site. If you opt for the Page Wizard, you also get sent to Netscape's site--this time to Netscape's online Page Wizard that walks you through the creation of a page.
NOTE: When you choose the Page Wizard, a new window in Netscape Navigator does not open like it does with the Templates option.
CAUTION: To make proper use of the Templates and Page Wizard options, you need to have an Internet connection in place so that you can access Netscape's site.
Also, under the File menu is the Open Page option. When you select this, you'll see the dialog box shown in Figure 42.2. Here you can enter the URL of an online document you want to edit or the directory path and file name of a local document. If you want to edit the document, and not just view it, be sure you've clicked the radio button next to the word Editor.
FIG. 42.2
You can open a remote or local document in either your Netscape browser or editor.
Another way you can start your editing session with Composer is to choose the Composer option from under the Window menu. When you do, you'll see the choices shown in Figure 42.3. These options essentially replicate the ones available to you under the File menu.
FIG. 42.3
Before the Composer window opens, the Create New Page dialog box prompts you for
what kind of document you want to start with.
Your final option for getting started is to click the Web Page Composer button on the floating toolbar. This launches the Composer with a blank page, as shown in Figure 42.4.
With the Composer open, you're ready to author your document. Composer supports you in this activity in a host of different ways. The next several sections show you how to take care of the following authoring tasks:
Formatting Text Placing and formatting text with Composer is as easy as it is with just about any word processor. To get some text in the Composer window, click your mouse pointer at the position you want the text to begin and type away. The words you see will be in the default type size, face, and color.
FIG. 42.4
For a quick start with a blank page, just click the Composer button on the Netscape
floating toolbar.
Modifying text you type in is just a matter of highlighting it (passing the cursor over the text while holding down the left mouse button) and applying the effect you want. You can apply text effects in many ways. Referring to Figure 42.4, note the Composer Format toolbar. The first drop-down list on the toolbar contains the six heading levels, preformatted text, address, list item, and description text styles. The Normal+ style adds some extra line spacing to the Normal style, creating a little extra white space above and below the text.
Following the styles drop-down list is the font drop-down list, from which you can choose which typeface the highlighted text should appear in. The small drop-down list to the right of the font drop-down list is for changing the font size. Selecting positive values increases the size, while selecting negative values decreases it.
The next three buttons on the Format toolbar apply bold, italics, and underline styles, respectively, to highlighted text. The button immediately to the right of the underline style button lets you change the color of highlighted text from its default black. When you click this button, you get the Color dialog box, from which you can choose one of the available colors in the palette or define a custom color for your text.
Formatting at the paragraph level also happens from the Format toolbar. You can format a block of text as a bulleted or numbered list, increase or decrease indent levels, and set left, right, or center alignment with the rightmost buttons on the toolbar. All of these formatting options are available to you from the Format menu as well. In fact, if you choose Format, Paragraph, you'll get a few extra styles--Title and Block Quote--that aren't available anywhere on the toolbar.
Placing Graphics Graphic elements help break up your page and prevent it from becoming an unattractive sea of text. Even a simple horizontal line can go a long way toward making a document more readable. To add a horizontal line, just place your cursor where you want the line to go and either click the Insert Horizontal Line button on Composer's upper toolbar (the Compose toolbar) or choose Insert, Horizontal Line. By default, a horizontal line will reach all the way across the page, be two pixels high, and have a three-dimensional shading effect. You can change any of these attributes of the line by right-clicking your mouse pointer on the line and selecting the Horizontal Line Properties option from the context-sensitive menu. In the resulting dialog box, you can adjust the line's height, width, and shading. Also, if you reduce the line's width, so that it no longer reaches all the way across the screen, you can change the alignment so that the line appears either flush left or flush right. Graphics also include images, of course, and Composer makes it almost as easy to place an image as it is to place a horizontal line. By clicking the Insert Image button on the Compose toolbar or by choosing Insert, Image, you get the dialog box shown in Figure 42.5. Here you specify the location of the image, as well as a low resolution version of the image, a text alternative to the image, how the image should be aligned, how much space to leave around the image, whether or not the image should have a border and how big that border should be, and the height and width of the image. You can also choose to edit the image if you've set up a default image-editing program in the Composer preferences.
NOTE: If you choose to make the image float in the left or right margin with text wrapping around it, you'll have to view the page in the browser window because Composer's display does not support this feature.
NOTE: Including a text alternative for every image is an important service to users whose browsers don't support images or to those with images turned off.
TIP: It's a good idea to click the Original Size button and check the box next to Lock width/height. This way the browser won't try to change the size of the image--something that browsers don't do very well. If you need an image to be bigger or smaller, your best bet is to make the change in an image editor.
If you ever need to change the attributes of an image after you've placed it, just right-click the image and select the Image properties option from the pop-up menu. This returns you to the Properties dialog box in Figure 42.5, where you can make the desired changes.
Setting Up Hyperlinks Linked documents are a hallmark of the Web, and Netscape Composer makes it easy for you to set up links on both words (hypertext) and images (hypergraphics). If the text you want to convert to hypertext is already on the page, simply highlight it and click the Make Link button on the Compose toolbar or choose Insert, Link. What you'll see next is the dialog box shown in Figure 42.6. The text you highlighted is shown in the Link Source section of the box. All you need to do to complete the link is furnish the URL of the document you're linking to and any anchors you're targeting within that document.
FIG. 42.5
The Image Properties dialog box gives you very fine control over placement and appearance
of images.
NOTE: If you just click the Make Link button or choose Insert, Link without selecting any text, there will be an empty field in the dialog box where you can type in the link text.
FIG. 42.6
The Link Properties dialog box shows the text or image that you're linking and the
document you're linking to.
Setting up a link on an image is just as simple. First, click the image to select it and then click the Make Link button or choose Insert, Link. This time you'll see the path to the image file in place of the text you're linking. Again, all you need to supply is the URL of the target document and any named anchors you might be using.
TIP: Set the border around a linked image to zero pixels if you don't want a colored border around it.
Using Tables It used to be that coding HTML tables was one of the most tedious jobs an author could encounter. But now with WYSIWYG tools, composing tables becomes an easy matter because you can do it right on screen, and the editor writes out all of the tags for each cell and row. To insert a table with Netscape Composer, click the Insert Table button on the Compose toolbar or choose Insert, Table. You'll then see the Table Properties dialog box shown in Figure 42.7. On the Table tab of this box, you can set up the basic configuration of the table--the number of rows and columns, how wide and tall it should be, whether or not it should have a caption, and how it is aligned on the page. After you choose the parameters you want, clicking OK puts a skeleton of the table you designed up on the page.
FIG. 42.7
You begin an HTML table in Composer by specifying the global attributes of the table.
After you have all of your data entered into the table, you can go to work on getting row and cell properties the way you want them. To change the attributes of a row, right-click anywhere in the row, choose the Table Properties option, and select the Row tab. From here you can set vertical and horizontal alignment and the background color of cells in the row. Similarly, you can right-click a cell, choose Table Properties, and select the Cell tab to change vertical and horizontal alignment, background color, text wrapping, use of the column heading style, spanning characteristics, and the height and width of the cell (see Figure 42.8).
FIG. 42.8
You have full control over how a table looks right down to the cell level.
Setting Page Properties All of the discussion thus far has focused on setting up different elements on a page. However, it's important to realize that you can use Composer to set up characteristics of the page itself. By choosing Format, Page, you call up the dialog box you see in Figure 42.9. From here, you can select from the following tabs:
FIG. 42.9
Don't forget to title your document! It's an important service to readers and to
programs trying to index your page.
When you're satisfied with your document and it's time to publish it, Composer can help you with that, too--even if you're publishing to a remote server!
NOTE: Composer prompts you to save your document before publishing it. This way, you can be assured that you're publishing your most recent changes.
Setting Publishing Options If you're going to be publishing a lot of documents to a remote machine, you should take a moment to set up Composer publishing preferences. To do this, choose Edit, Preferences, Editor Preferences to call up the dialog box you see in Figure 42.10. The tab you're interested in is the Publish tab.
FIG. 42.10
Composer supports remote publishing via FTP and can automatically change your pages
to work on the remote machine.
The tab is divided into two parts. The upper part deals with how links and images are treated during the transfer. Checking the Maintain links box tells Composer to change the HTML code as it publishes it so that the links you created work on the remote machine. The Keep Images With Page option sends copies of all images on the page to the same directory that you save the page in. A good rule of thumb is to keep both of these checked. Otherwise, you might end up doing a lot of extra work yourself to make links work and to make images show up where they're supposed to be.
The lower half is where you set up your remote login session. Most users choose the Publish to FTP or HTTP option, in which case you need to give the server name or IP address of the remote machine and your login ID and password on that machine.
Sending Your Document to a Remote Server To perform the actual transfer to the remote machine, click the Publish button on the Compose toolbar or choose File, Publish to reveal the Publish Files dialog box. You can choose to send just the file or file together with other files in the same folder. You can also change the default publishing location if you happen to be publishing to a different machine than the one you set up in your editor preferences. After you've decided what to publish and to where, click OK to initiate the transfer.
NOTE: The preceding sections provide a very basic introduction to Composer. Indeed, we could probably write an entire book on Composer alone! If you want to learn more about Composer, you should visit Netscape's Web site, http://home.netscape.com/. In addition to reading the online documentation, you can download Composer from the site, install it on your machine, and experiment with it yourself--perhaps the best learning experience of all!
The Microsoft updates to its Web development collection FrontPage 98 makes it compatible with its Office suite of products and the upcoming Windows 98. Together with Internet Explorer, FrontPage 98 provides a total Web site creation solution that includes the following components:
This section of the chapter will focus mainly on the FrontPage Explorer and Editor, because these are the components you'll use to set up sites and create documents. Other FrontPage components are considered briefly.
When you start up the FrontPage Explorer and select your view, you see the screen shown in Figure 42.11. The two major areas of the window provide two very different ways of looking at a Web. With no Web loaded, the Explorer window is largely empty, so your first step is to give yourself something to work with.
CAUTION: Before you start working on a Web, make sure you have a Web server program running. The Web server that comes bundled with FrontPage is fine for this purpose.
There are appearance changes in the FrontPage 98 Explorer as well. Note the View options along the left side of the Explorer screen, which include:
FIG. 42.11
At startup, the FrontPage Explorer displays the Hyperlinks View of the selected Web
site. This figure displays the Explorer view with a Web active.
Creating a New Web On starting FrontPage 98, the program gives you the option of selecting a current Web or beginning a new one. To start a new Web from within Explorer, choose File, New, FrontPage Web or click the New FrontPage Web toolbar button. You will then see the New FrontPage Web dialog box, from which you can choose one of six Web templates or one of three Web wizards. These include:
If you're creating a Web with a purpose that's consistent with one of the templates or wizards, then you should choose the appropriate one. To begin with a blank page an you can place content on, select the Normal Web option.
NOTE: The Normal Web template is the default choice when creating a new Web.
NOTE: When you create a new Web, you are required to supply the network address of your server and a unique name for the Web.
One nice feature the Explorer has is the built-in To Do List, accessible in FrontPage 98 as the Tasks View. For more complicated Webs, like the Corporate Presence Web, the wizard asks you if you want the To Do List displayed after the Web is created. If you choose Yes, you'll see the screen shown in Figure 42.12. The List tracks what pages need work, who had responsibility for them, and what level priority the work is.
FIG. 42.12
Previously known as The Explorer To Do List in FrontPage 97, the Tasks View tracks
unfinished tasks and who is responsible for completing them.
TIP: You're not limited to using the Tasks for Webs that you create using a FrontPage wizard. You can invoke the Tasks selection at any time by clicking the Tasks button on the Explorer Views bar. After you call it up, you can add and update tasks on the list as needed.
Viewing a Web After you have loaded a Web into the Explorer, you can look at it in one of the five following ways:
FIG. 42.13
The Hyperlinks view gives the hierarchical rendition of your Web site on the left
with a graphic portrayal of that site on the right.
FIG. 42.14
The Folders View gives you all of the details on all of the component files in a
Web site.
Link Tools Visiting a Web site that has broken or outdated links can be one of a Web surfer's most frustrating experiences. It's frustrating for the site administrator, too. Keeping track of all links on a large site requires incredible attention to detail. Keeping track of links to other sites is all but impossible without checking each link individually on a regular basis. Fortunately for both parties, the FrontPage Explorer comes with the following link utilities that help to alleviate these problems:
FIG. 42.15
You can generate a report on the integrity of all internal and external links by
choosing either the Hyperlinks Status view or Tools, Verify
Hyperlinks. This simplifies the steps necessary should you need to move a Web to
a new location.
Other Useful Explorer Features The FrontPage Explorer comes with some other handy features that can make your life as a Web site author much easier. These include the following:
With your Web created, it's time to put some content on its component pages. You do this by using the FrontPage Editor--a full-featured, WYSIWYG page composition program.
When you fire up the FrontPage Editor, you see a WYSIWYG environment in which you can create your Web documents--all without even typing an HTML tag (see Figure 42.16). You can choose to either start with a blank page by selecting the New button, typing Ctrl+N, or selecting File, New. To edit an existing HTML document, choose the Open (file folder) button, Ctrl+O, or select File, Open. The Tabs on the bottom left make it easy to switch between how you view your Web document in progress. The HTML tab shows you your source code (see Figure 42.17) while the Preview tab displays how your document will appear in most newer browsers (see Figure 42.18).
FIG. 42.16
The FrontPage 98 Editor is where you add content to the documents you set up in the
Explorer. This view also offers the option to either show or hide the Format Marks.
FIG. 42.17
In the HTML view, you can directly edit the source code.
FIG. 42.18
Web Preview is the third view. It shows how your Web page will appear on most browsers.
All three views are now just a tab choice away. Some features new to the FrontPage
98 Editor include:
CAUTION: In an online conversation with author Pamela Rice Hahn, fellow Web page developer C. S. Wyatt recently defined Dynamic HTML as "a standard that changes dynamically every two weeks." Therefore, keep in mind that until the W3C determines the final Dynamic HTML standard and the browser developers comply with that final standard, introducing Dynamic HTML on your Web page may mean that some users won't be able to properly display your page.
NOTE: Veteran HTML authors will be happy to learn that FrontPage 98 allows you to edit HTML code directly. You can simply select the HTML view, rather than having to open the file in a separate text editor.
Starting a New Document When you select File, New to start a new document, you don't just get a blank screen to work in. Rather, you are given the option to activate one of the Editor's many templates and page creation wizards. Templates give you a structured document with several informational "holes" that you can fill in with appropriate text (see Figure 42.19). Page creation wizards collect information from you through a series of dialog boxes and then use the information you supply to author a page.
FIG. 42.19
The Table of Contents template gives you a structure into which you can enter page
information for other areas of interest on your site.
Figure 42.20 shows a dialog box from the Frames Wizard--a useful feature for developing framed pages without having to worry about all of those confusing <FRAMESET> tags. There are a number of standard framed layouts from which to choose that are prepackaged in FrontPage 98. However, should you need a layout other than one of those provided, you can set it up yourself by choosing the Make a Custom Grid option in the wizard's first dialog box.
The FrontPage Editor also comes with a Forms Page Wizard and one for Database Connector.
You can set up an interface to an Open Database Connectivity (ODBC) compliant database by using the Database Connector Wizard (see Figure 42.21). Over a series of dialog boxes, you are prompted for the ODBC data source, the template file for the results, and what Structured Query Language (SQL) queries you want to make against the database.
The Forms Wizard is available as an option from the New Page selections. It can spare you much of the drudgery of coding a form. Many common form fields come prepackaged, and all you need to do is place them on your form. If the prepackaged form fields don't include the types of fields you need, FrontPage also lets you build a customized form from the ground up. You can pass the form results to a CGI script, or you can use the FrontPage Save Results box to write the form data to a file. Results can be saved in HTML, plain text, or rich text formats.
In addition to the wizards, FrontPage can get you started with more than 20 standard page templates, including the following:
FIG. 42.20
Frames can be simple when you use the FrontPage Editor's Frames Wizard because
of the variety of standard frames layouts.
FIG. 42.21
The Internet Database Connector Wizard simplifies the steps necessary to configure
the ODBC connection. ODBC (Open Database Connectivity) is the acronym for the standard
for accessing different database systems.
Web site designers can make good use of a number of these templates. Specifically, the wide assortment of columned page layouts (with or without sidebars) makes for an effective presentation appearance for press releases and press release directories, and What's New pages are frequently found on corporate sites. Almost any organization's page can benefit from a Frequently Asked Questions addition to their site. The ability to create those pages with the use of these templates simplifies the Web author's job considerably.
NOTE: If you are creating corporate sites, make certain you determine as part of your agreement who is responsible for editing page content. Don't assume your job is done after you place the appropriate supplied text onto the page. As Webmaster, you'll hear about every grammatical error and overlooked typo. The savvy Web author provides for such client error occurrences by establishing a Web page content change provision in the contract, with a set fee schedule for doing those corrections.
The Editor Toolbars After you have a document started, or have loaded one in from an existing Web, you can make use of the Editor's many features to create or change the page. Figure 42.22 shows the Editor with all of its toolbars active. Many are just like the toolbar buttons you would see in other Microsoft Office applications. Others that are more specific to HTML authoring are labeled with callouts in the figure. FrontPage 98 Editor toolbars available from the View menu are:
NOTE: You can toggle the display of any of the toolbars under the Editor View menu.
Of particular note are the Image toolbar, the Forms toolbar, and the Advanced toolbar. When you select an image on the page, the Image toolbar becomes active and allows you to trace hot regions for imagemaps, or make a color in the image transparent. The Forms toolbar places form controls at the cursor's position on your page. Using buttons on the Advanced toolbar, you can place ActiveX controls, scripts, embedded objects, a Java applet, or an HTML tag not supported by one of the Editor's menus.
NOTE: The Image toolbar default location is across the bottom of the screen as shown in Figure 42.22; however, you can drag and drop that toolbar to other locations should you find that more convenient. If you prefer to not always display this toolbar, it will come into view automatically anytime you select an image. Otherwise, if you display it at all times, it remains inactive until you select an image.
FIG. 42.22
FrontPage's Editor supports document authoring with eight different toolbars.
Formatting Text You can apply styles to text in a variety of ways. The physical styles (bold, italics, underline) are available on the toolbar. All you need to do is highlight the text to format and click the appropriate button. The Style drop-down box works similarly and gives you access to a much greater range of styles, including heading and list styles. To either side of the physical style toolbar buttons are the Increase/Decrease Text Size buttons and the Text Color button, which lets you paint highlighted text with a different color.
For several formatting options at once, select Format, Font and then select the Special Styles tab to reveal a dialog box in which you can click different styles to apply them to highlighted text.
When you want to insert vertical space between page elements and you use the Enter key to do it, it is interpreted as a paragraph break (or tag) in your HTML code. If you just want a line break (or <BR> tag), you can use Shift+Enter or insert it manually by choosing Insert, Line Break, and then selecting Normal Line Break.
TIP: Some text elements are best handled outside of the Editor. If you have text elements that are common to each page, such as copyright information or a Webmaster e-mail address, you might want to consider copying and pasting these items into your pages using a plain-text editor like Notepad. The FrontPage Editor can take a long time to load an entire page because it also loads images. A plain-text editor just loads the HTML code and is therefore much faster.
Inserting Images To place an image on your page when you use the FrontPage Editor while working on a Web, choose Insert, Image to open the dialog box you see in Figure 42.23; Figure 42.24 shows the subsequent dialog box when you use the FrontPage editor as a stand-alone program. In the box, you get the option to load the file from the current Web, a local drive, a remote machine, or from a clip art collection.
FIG. 42.23
You can place images from local or remote sources in your FrontPage Editor document.
FIG. 42.24
You get this image box from which to make your image selection when you use the FrontPage
Editor as a stand-alone program--that is, when not working within a Web.
By default, the image is placed at the current cursor location and is left-justified with an ALIGN value of BOTTOM (the text next to the image will line up with the bottom of the image). You can exercise greater control over the placement of the image in the image's Properties box. To reveal the image's properties, double-click the image or right-click the image and select the Properties option you see in the context-sensitive pop-up menu. If you have the image already selected, you can also choose the Properties view from the Edit Image Properties menu or by using Alt+I. The various tabs in the Image Properties dialog box, shown in Figure 42.25, allow you to specify image alignment, border size, horizontal and vertical spacing, low resolution, and text alternatives for the image. If the image is hyperlinked, you can also specify what URL it is linked to. There's even a Video tab in case you're placing an AVI movie via the <IMG> tag.
FIG. 42.25
An Image's Properties dialog box gives you greater control over image attributes.
If you need to edit an image that you've placed in a document, you can fire up Microsoft's Image Composer to make the changes. Image Composer is a full-featured graphics editor with support for scanning devices and special effects filters, as well as the more common graphic manipulations.
Setting Up Hyperlinks To create hypertext, highlight the text to serve as the anchor and click the Create or Edit Hyperlink toolbar button. You then see a dialog box. In this dialog box, you can choose to link to a page that is currently open in the Editor, a page that is part of the Web that you're working on, any page on the World Wide Web, or a page that you ask the Editor to create for you. Figure 42.26 shows the Edit Hyperlink box that appears when you select Insert, Hyperlink (Ctrl+K) to edit an existing (highlighted) hyperlink. If you need to change the attributes of a link, you can right-click it and select the Hyperlink Properties option from the pop-up menu.
As shown in Figure 42.27, General Page Properties information is available from the File, Page Properties menu.
FIG. 42.26
The Edit Hyperlink dialog box lets you link to files on your site, files out on the
Web, or files you have yet to create, or you can manually edit an existing hyperlink
URL.
To color your links, right-click anywhere on the page and select the Page Properties option to reveal the dialog box you see in Figure 42.28. Options on the Background tab enable you to paint your visited, unvisited, and active links with whatever color you choose. Figures 42.29 and 42.30 show two features new to FrontPage 98--the Custom and Language options.
FIG. 42.27
Items in the Page Properties dialog box correspond to tags in the document head and
attributes of the <BODY> tag.
FIG. 42.28
From this dialog box, the Web page author sets such <BODY> tag attributes
as background and text color as well as coordinated hyperlink colors.
FIG. 42.29
The Custom option is new to the Page Properties dialog box selections in FrontPage
98; it provides page generator information.
TIP: You can also set up titles, page margins, base URLs and targets, text color, and <META> tags from the Page Properties dialog box.
Setting up a linked image is virtually the same as setting up linked text. Simply click the image you want to link and then click the Create or Edit Link button to open the dialog box. If you're setting up an imagemap, click the image once to select it and then use the tools on the Image toolbar to set up the different hot regions. After you trace out a hot region, the Editor displays the same dialog box you saw in Figure 42.26, so you can enter the URL to associate with the hot region.
FIG. 42.30
The new Language option allows the choice of English versus the Multilingual HTML
encoding style for saving and loading your page.
NOTE: The FrontPage Editor uses client-side imagemaps. If you need to implement a server-side imagemap, look at the HTML source code to get the hot-region coordinates, and then type out your map file by hand.
Creating Tables To insert a table, choose Table, Insert Table or click the Insert Table toolbar button. When you do, you see a dialog box like the one in Figure 42.31. After entering the table size and border, alignment, padding, and spacing attributes, the Editor places a blank table in your document, and you can fill in the cells with text, images, form fields, and even other tables.
FIG. 42.31
You set up a table in your document by filling out the Insert Table dialog box.
NOTE: Most of the options under the Table menu are grayed out unless the cursor is in a table cell.
You can delete the content of individual cells of a table by highlighting them and pressing Delete, but it is more of a challenge to delete an entire table. Even if you remove all cell contents, FrontPage still leaves you with an empty table on-screen and all of the related table tags in the HTML code. To remove the entire table, double-click your mouse just to the left of the table to highlight the whole thing. After it's highlighted, you can press Delete or Backspace to remove the entire table from both your screen and your HTML code.
You can color the individual cells in your tables, thanks to HTML extensions now supported by Netscape and Microsoft browser products. To color a cell, right-click inside the cell and choose Cell Properties from the pop-up menu that appears. You can then choose your background color (or image) in the Custom Background section of the dialog box.
TIP: Coloring the individual cells can overstate the block-like nature of the cells. To reduce this effect, you might want to color your table cells with the same color you use to color your page background.
NOTE: Although FrontPage 98 has made strides toward browser compatibility integration, the manner in which it displays a table might not be exactly the same as the way Netscape Navigator or Microsoft Internet Explorer displays it. Therefore, it is always a good idea to look at your Web document in those browsers to determine if you've achieved the desired effect.
Saving Your Document To save your document for the first time, select File, Save As to open the dialog box shown in Figure 42.32. Notice that in this box you can save the document as a normal file or as a document template. Clicking OK saves the file to your current Web.
FIG. 42.32
When saving it for the first time, you can make your document into a template for
reuse at a later time.
FrontPage Components (known as WebBots in FrontPage 97) are preprogrammed dynamic objects that run when you save a file or when a user views your file online. The FrontPage Editor comes with several components that you can build into your pages. Some (such as Timestamp and Table of Contents) are available from the Insert menu; others are incorporated into your page from the Insert, FrontPage Component menu selection. These dynamic objects include:
FrontPage Components are unique in that their functionality is built right into FrontPage. This is very different from programming that supports similar functions, as these programs are typically written separate from the coding of the HTML. FrontPage integrates these two activities into one.
NOTE: Much of the power of the FrontPage suite is derived from its set of standard FrontPage Components. Additionally, you can write your own components (formerly known as bots) by using the FrontPage Software Developer's Kit included with FrontPage 98. More information is available on this at http://eu.microsoft.com/FrontPage/ProductInfo/faqs.htm.
When you think of documents, it's logical to also think of the Adobe Corporation--the folks who brought us programs like PageMaker and the Internet document format PDF (Portable Document Format). It shouldn't surprise you then that Adobe has an entry in the WYSIWYG Web document editor field. Adobe PageMill is an easy-to-use document authoring tool with many neat features, including the capability to manipulate images without using a separate utility program.
With PageMill, you have a point-and-click, drag-and-drop, mousing-about interface to help you in your document authoring--much like you have with a word processor (see Figure 42.33).
The PageMill window is the heart of the program--it's where you type all your text (or paste it in from another program) and position your multimedia elements. The window is very drag-and-drop aware, so you can simply drag text or graphics from their original program into the PageMill window. In certain cases, you can even drop the icon of a document or graphic file into the PageMill window, and the image or text will appear in the PageMill window (see Figure 42.34).
For the most part, however, you use the PageMill document window in nearly the same way you use a word processor. You can use the mouse to place your insertion point (cursor) on the page, highlight text for some action or to pick up graphics, and move them around on the page.
You might have noticed the PageMill window looks a little like a Web browser. That was done on purpose. The document window is actually two windows in one. To change between these windows in PageMill, you click the Toggle Preview Mode button on the PageMill toolbar.
FIG. 42.33
All HTML coding is accomplished through the PageMill interface elements.
FIG. 42.34
Drag and drop is a big improvement over the raw HTML method of entering graphics.
The two windows represent two different modes that really alter PageMill's functionality drastically:
NOTE: If you use the File, Open command in PageMill to open an existing HTML document, PageMill starts out in Preview mode. Click the toggle mode button to edit the document. New documents start in Edit mode.
The toolbar is where you find a lot of the common tools that you need to use in creating your Web page. Not everything that's possible with HTML is available from the toolbar--many commands are buried in the menus--but you'll find a lot of everyday stuff is right up front, just like in your favorite word-processing program (see Figure 42.35).
FIG. 42.35
The PageMill toolbar can be used to accomplish many common Web authoring tasks.
One important toolbar button deserves special mention. More than one PageMill-experienced Web author has missed something fairly obvious at the bottom of the toolbar...the Title field.
Giving your Web documents a title is an important part of creating the page. Titles appear in the bar at the top of a user's Web browser window. They are also used as entries in bookmark lists and are scanned by robots that index your pages. Unfortunately, for some reason, a lot of folks skip over the title when creating pages in PageMill. Don't forget that the title text box is there. All you have to do to give your page a title is click in the text box and type away.
The toolbar has one other special feature worth mentioning. At the bottom-left corner of the toolbars, right next to the title text box, is the page icon. It doesn't look like much, but it's at the heart of creating links in your PageMill documents.
In edit mode, move the mouse pointer up to the page icon, click it and drag (holding down the mouse button). Notice the page icon comes along for the ride. What you're holding with the mouse is a hyperlink to this particular document.
If you are working in another document, you can drag this page icon directly to the other document, drop it in that document window and create a link to this page. It's that simple.
NOTE: Actually, it's not quite that simple. There's one other factor--the page represented by the page icon needs to be saved before the page icon is active.
Down at the bottom of the page is the heart of PageMill's hyperlink capabilities...the link location bar. It's here that you enter URLs for your hyperlinks.
NOTE: You need to be in Edit mode to place a hyperlink.
The link location bar actually performs two different functions, depending on the current mode:
If you can't get something done with PageMill's toolbar, chances are that you can do it in the Attribute Inspector. The Inspector is easily the most powerful element of the PageMill interface, allowing you to do everything from change typefaces to add background images to your Web pages to manage the HTML forms you create for user feedback (see Figure 42.36).
TIP: You can toggle the Attribute Inspector on and off by pressing command (Apple) + ; (plus semicolon) or by choosing the command Show Attribute Inspector or Hide Attribute Inspector in the Window menu.
FIG. 42.36
The Attribute Inspector uses different modes to change its options based on the type
of element you need to alter--the Web page itself, text on the page, graphics, or
form data.
The Attribute Inspector is a small floating window that's based on the idea that you'll use it in different modes depending on the elements you need to change. Those modes are:
FIG. 42.37
Most HTML options for images are available right from the Attribute Inspector.
Adobe's experience with graphics comes shining through in the PageMill Image Viewer. From within your document, you can view images, choose a transparent color in a GIF, and even create clickable imagemaps.
There's only one question: how do you find the Image Viewer? The answer is simple: If you've placed an image in the document window, make sure you're in Edit mode and then just double-click the image (see Figure 42.38).
TIP: On a PC, you can use the File, Open command to open an image directly into the Image Viewer, without placing it in the document. On a Macintosh, File/Open is Command+O.
FIG. 42.38
It's not exactly an image-editing program, but the Image Viewer does let you create
important Web-related effects in your images.
We could fill an entire chapter with information on how to use the Image Viewer, but space constraints compel us to just look quickly at an overview of the Image Viewer's capabilities:
Another of the Image Viewer's special features is the image icon located at the top-left of the viewer window. It's another neat little tool that you can use to drag and drop to your HTML pages.
If you've loaded a graphic directly into the Image Viewer and you'd like to place that graphic on a Web page you're creating in PageMill, click the Arrow tool in the Image Viewer. Then, click and drag the image icon into the document window of the destination page. Drop the image on the page, and it should appear now as part of the new Web page.
One final key interface element is the Pasteboard, which you can access on a PC by choosing Window, Show Pasteboard; on a Macintosh, choose Command+/. Basically, the Pasteboard works like the Clipboard in Windows or Mac--it's designed to aid in cut-and-paste. But, it's also something that the Clipboard never has been. It's easy to use with multiple images, clips of text, and HTML elements (see Figure 42.39).
FIG. 42.39
The Pasteboard gives you the freedom to keep common elements, graphics, or text clips
handy for quick drag-and-drop operations.
Aside from drag-and-drop support and the capability to store different types of elements on the same page, the Pasteboard also features five different pages for you to work with. Clicking the page controls at the bottom of the Pasteboard window lets you change pages.
TIP: Get to know the Pasteboard. You'll be amazed how quickly things go when you don't have to open a new image or retype text when you're authoring multiple Web pages.
You've probably gathered from the discussion of the PageMill interface that many common document authoring tasks--like formatting text or placing an image--are pretty easy with PageMill. You are correct! PageMill's word processor-like interface and drag-and-drop capabilities make authoring a snap. For this reason, we'll focus on the more advanced document components--tables, forms, and frames-- for the rest of the chapter.
Creating the initial table in PageMill is the easy part. First, place the insertion point (cursor) at the point in your document where you want the table to appear. Then, from PageMill's toolbar, click and hold the Insert Table icon. While you hold down the mouse button, drag down and to the right. You should see an expanding grid that appears to grow out of the Insert Table icon. When the table reaches the dimensions you desire, let go of the mouse button. PageMill creates the table and places it in your document window (see Figure 42.40).
After you have the table available to you in the document window, there are two things you should notice. First, clicking once on the border of the table selects it as an object and (assuming you have the Attribute Inspector visible) changes the Object tools to those that are relevant for a table.
Second, clicking the interior of a table makes the table active, which allows you to enter data and change the attributes of rows, columns, and individual cells. Once again, you might notice that the Attribute Inspector changes Object tools to reflect this (see Figures 42.41 and 42.42).
FIG. 42.40
PageMill's Insert Table command makes it simple to create a table of nearly any size.
FIG. 42.41
The Inspector tools for table-as-object.
FIG. 42.42
Inspector tools for an active table (with cells highlighted).
Filling in Cells If you already made your table active, you probably noticed that one of the cells has a blinking cursor in it. Entering data for this cell is as easy as typing. Anything alphanumeric is free game (that is, anything you enter on your keyboard should look fine in a cell), and you can even use text-emphasis commands to add some spice to your entries (see Figure 42.42).
TIP: You can use the Tab key to move right one cell or Shift+Tab to move left one cell.
As you read in the Chapter 11, "Formatting Content with Tables," a cell can be either a header cell or a data cell. To create a header cell, you begin by clicking the cell to select it. If you like, you can click in one cell, then drag to select a number of cells across a particular row or down a column. When you have the range selected for your header cells, use the Attribute Inspector to select the Make Header option.
Data that appears in these header cells will, by default, appear bold in your user's browser window (assuming the browser supports tables). Otherwise, the cell acts the same as any other data cell.
FIG. 42.43
Entering and emphasizing text in a table cell.
Adding (or Deleting) Rows and Columns Adding rows and columns is easy enough to do in PageMill, provided you're already working in an active table. (And, even if you're not, activating the table is just a matter of double-clicking, as you've already seen.) Start by selecting the column directly to the left of the area where you want the new column to appear. To do this, begin by clicking in the top cell of the column, then drag the mouse pointer to the bottom cell. When you release the mouse button, you should see that the entire column has been highlighted. (With rows, highlight the row directly above the point at which you want to insert the new row.) Now, click the Insert Row/Column button. It's that simple!
Deleting columns and rows is a similar process, only this time you get to highlight the actual column or row in question. Drag to select the offending column or row, then click the Delete Column/Row button once. It should disappear right away. The other columns or rows squeeze together--almost as if the now departed cells in your table had never even existed.
Adding a Table Caption You can give your table a title or footer with the table caption option. With the table selected as an object (but not active), use the Attributes Inspector to activate the Caption option by clicking its check box. When checked, a caption appears at the top of your table (see Figure 42.44).
FIG. 42.44
Adding a table caption with the Attributes Inspector.
Next to the caption text box you have two options: top or bottom. By default, your caption will appear at the top of the table. If you prefer to have it at the bottom, change that option by using the pull-down menu.
To edit the caption, make the table active by double-clicking it. Now you can place the cursor in the caption box (if it isn't already there) and type a new caption or title for your table. When you're done, use the standard movement keys to continue on to other cells within the table.
Changing Alignment After you've got some data in your table, you might quickly decide that it needs to be formatted in some way that's different from the default. When you first enter data, everything is aligned to the left of the cell, and in between the top and bottom borders. If you want to change this, all you have to do is highlight and click. To do the highlighting, click and hold the top-left corner of the cell's border and slowly drag the mouse pointer into the cell. When the entire cell highlights (and just that cell), you're ready to change alignment attributes (see Figure 42.45).
FIG. 42.45
Highlighting a single cell in your table.
Next, look at the Attribute Inspector, where you see a number of cell parameters you can configure. Among these is alignment--both vertical and horizontal. Click the radio button next to the option you want to change, and then select the new alignment type you want to apply.
NOTE: Aligning entire rows or columns of cells is similar to aligning individual cells, except that you have to highlight the entire row or column.
Another ability you have in PageMill is the option of adding space around your data or between your cells, or making the visible border larger or smaller. To use the cellpadding, cellspacing, and border features, you need to have selected the table as an object (it should be inactive). Then move over to the Attribute Inspector and play around with the numbers. If you want a larger border, for instance, enter 5 instead of 1. You can create a borderless table (a table with no visible lines) by entering 0 for the border. Remember to press Return or Enter after changing one of these numbers. The results appear immediately in the document window.
PageMill also makes the composition of online forms much easier than coding them by hand. To get started, go into the Attribute Inspector and specify an ACTION URL and a METHOD for your form. After you've got these basic form attributes in place, your next step is to concentrate on the actual form elements. PageMill makes this easy, because each of the major elements has its own button in the toolbar (see Figure 42.46).
FIG. 42.46
The PageMill toolbar gives you access to all the form elements.
One of the more common uses for forms is to accept multiple lines of text from a user, perhaps for feedback, bug reports, or other uses. We'll look at how to place a text area in PageMill as a prototypical example of how to place a form element. Placing other form controls on a page is done almost the same way.
TIP: Don't forget that an important part of every form is the descriptive text you use to introduce each element.
To add a text area to your document, place the insertion point (cursor) at the point in the document where you want the text area to appear, then click the Insert Text Area button in PageMill's toolbar (see Figure 42.47).
Now, you need to click once on the text area (to select it as an object) and head over to the Attribute Inspector.
The Inspector needs three things from you: a name for this form element, the number of rows you want displayed on the screen, and the number of columns you want displayed. The name can really be just about anything you want it to be--although it will eventually have to be a name recognized by the CGI script that deals with this information.
TIP: If someone else is creating your form's script, discuss the names of your form elements with them beforehand.
FIG. 42.47
Adding a text area to your document.
Notice that you can also use the mouse to set the rows and columns for your text area by clicking and dragging the drag boxes that surround the text area (see Figure 42.48).
FIG. 42.48
Putting your finishing touches on the text area.
If you want to place default text in the text area (text that your users will see before they enter something themselves), double-click the text area to make it active. A cursor should begin blinking inside the text box. Then just type away and your default text appears.
Placing other form elements follows a similar process. Just select where you want the form element to appear on the page, click the appropriate button on the toolbar to place the element, and then polish it off in the Attribute Inspector.
TIP: Your knowledge of the different attributes of the form-related tags is immensely helpful when working in the Attribute Inspector.
Perhaps the most daunting task for a document author is creating a framed document. It's easy to get lost in the mire of doing your framesets to set up the frames and then doing even more work to populate the frames with content. As with tables and forms, PageMill is a useful tool that can simplify the process for you. Creating a framed document in PageMill is basically a three-step process. Specifically, you need to:
After you're comfortable with frames, you can move on to creating them in PageMill. The first thing you need to decide is how you want to organize the frameset interface. Then you need to use the Inspector to alter or fine-tune some of the frames-oriented options. Finally, you create the pages for each pane and save the whole mess.
Creating the Frameset The way you create your frameset is somewhat dependent on what you want to do. For instance, if your sole reason for creating a frame document is to have a nonscrolling logo at the top of the page, you need two different frames in your document--two rows. To do that, you hold down the Option key while pointing and clicking the top edge of the document window (see Figure 42.49). Hold down the mouse button and drag the mouse down into the document. Release the button and you create a divider that splits the window into two frames.
You can also create your frames in columns--in fact, you can do both. Let's say that you not only want part of your frameset to include a nonscrolling logo, but you also want to add a list of hyperlinks to serve as a table of contents for your site. You do that by adding a column to the bottom row.
Below that first dividing line, click and drag the left border of the document window while holding down the Option key. You should be pulling a new divider across the screen to the right. The divider only appears in the second row (see Figure 42.50).
FIG. 42.49
Hold down Option and drag the top of the document window down to create two rows
of frames.
FIG. 42.50
Creating a column frame divider gives our example three different panes for loading
Web documents.
Now you have empty frames for each of the different documents you want to load. The top frame is for your logo page, the left column is for the table of contents, and the right column (the largest pane) holds any of the other content.
NOTE: If you need to delete one of the frames, just drag the frame divider back to its window border. Drop it on the border (or as close as possible), and PageMill asks you if you're trying to remove the frame from the document.
Frame Options and Attributes With the empty frames created, you can move on to make adjustments to the frames' appearance and behavior. To do this, you turn your attention to the Attribute Inspector. It's here, as always, that you can tweak your frames and make your framed layout more to your liking. In particular, you can set the following attributes in the Inspector:
You're by no means obliged to any changes to the frameset parameters. If you're happy with them as you created them, then you can skip the Attribute Inspector and move right on to the next step--placing content in the frames.
Adding Content to Your Frames With your empty frames all prepped and ready to go, it's time to put some content in them. So how do you get documents into their respective frames? There are two ways: just start typing in a frame to create the document, or use the File menu to load a document in the selected frame. The first method is straightforward enough, so let's focus on the second. Select one of your frame areas, then choose the Insert Page option from PageMill's File menu. In the dialog box, find the document you want to load, then click OK. Now that frame has a default document associated with it (see Figure 42.51).
CAUTION: You might be asked if you'd like to save Frame345256 or something similar when you choose to load a new page in your frame. If you've done any work in that frame, you'll lose it if you don't save it at this point. If you haven't done anything in that frame, though, it's okay to go ahead and click Don't Save.
FIG. 42.51
After inserting an existing document in the frame, it becomes the default document
associated with that part of the frameset document.
So what does it mean to be the default document associated with a frame? When the user loads the frameset into his browser, the default documents come along for the ride. They're the first documents that automatically appear in their frames when the frameset is loaded.
The point of frames is eventually to replace those default documents with new ones--at least in one of the panes of the frameset. To do that, you have to create links with targets.
In PageMill, that's pretty simple. You start by creating a link in any of the ways described earlier in the chapter. Then, highlight the link again (if it isn't already) and click and hold the mouse on the Target icon at the bottom of the document window. You can also click and hold the mouse button on the highlighted link (see Figure 42.52).
TIP: You can triple-click a hyperlink to quickly highlight all its text.
In the Target pop-up menu, select the text or part of the page that you want to appear as your link. Notice that the Target menu is actually a little representation of your page; you can simply highlight the frame you want to select as a target, then release the mouse button. Now, when the user clicks that link, the resulting Web document is loaded in the targeted frame.
FIG. 42.52
Choosing a target for your hyperlink.
So what are all those words doing? In a nutshell, here's what happens if you choose them instead of one of the frames:
NOTE: Consider our three-paned scenario--two rows, and, in the second row, two columns. A link that appears in one of the columns in that second row is targeted to the parent frameset. When the user clicks that link, the two column frames disappear, and the new document is displayed in the parent of those columns frames--the entire second row frame.
It's very important to remember to save everything when you're working in a frameset document. After all, even though you are working in one PageMill document window, you're actually editing two, three, or more documents at one time. And, they all need to be saved.
CAUTION: Pay close attention when PageMill prompts you to save something--even in Preview mode. If you don't save the file that's in one of your frames, you'll have to recreate it from scratch.
Take a quick look at the File menu when you're working with frames. See anything different? You've suddenly got a bunch of options for saving your frames documents (see Figure 42.53).
FIG. 42.53
There's a ton of saving you have to do when you edit framed documents.
What do all these different options do for you? Well, there are three to concentrate on; the rest are useful, too, but most of them are just Save As... options that let you rename the files in question. Here are the big ones:
© Copyright, Macmillan Computer Publishing. All rights reserved.