developer.com - Reference
Click here to support our advertisers
SOFTWAREFOR SALE
BOOKSFOR SALE
SEARCH CENTRAL
JOB BANK
CLASSIFIED ADS
DIRECTORIES
REFERENCE
Online Library
Reports
TRAINING CENTER
JOURNAL
NEWS CENTRAL
DOWNLOADS
DISCUSSIONS
CALENDAR
ABOUT US
Journal:
Get the weekly email highlights from the most popular online Journal for developers!
Current issue
developer.com
developerdirect.com
htmlgoodies.com
javagoodies.com
jars.com
intranetjournal.com
javascripts.com
All Categories :
HTML
Chapter 29
HTML with Adobe PageMill for Macintosh
CONTENTS
Basic Markup in PageMill
HTML Lists
Definition Lists
Inserting <HR>
Links, Images, and Special HTML
Adding Links
Adding Images
Manipulating Images
Transparency and Client-Side Maps
Entering Unsupported HTML
Example: The Basic Page in PageMill
Creating Forms
Laying Out the Form
Document Info
Summary
Review Questions
Review Exercises
Heralded as one of the first HTML editors to truly make a dent
in the process of HTML creation, I have to admit that PageMill
surprised me a bit. I stand pretty firm in the opinion that the
only way to create the best HTML documents is with a text editor,
but PageMill is beginning to change that. It's actually fun to
use and impressively powerful.
That said, even PageMill has room to grow toward properly supporting
and formatting HTML documents, and some advanced capabilities
are still out of reach for PageMill users. You'll still end up
editing some HTML by hand, but, fortunately, you can even do most
of that directly in PageMill.
Note
The other serious drawback to Adobe PageMill is the cost-currently about $100. That's more expensive than Netscape Gold, which includes a browser, mail interface, and newsgroup reader. Of course, Netscape Gold is also a Windows-only application (Mac version due mid-1996). PageMill is currently Mac-only, although its popularity has convinced Adobe to announce a future Windows version. A demo of PageMill is available from http://www.adobe.com/Apps/PageMill/pagedemo.html.
Basic
Markup in PageMill
Starting with a new document (choose File, New Page), entering
basic text is as simple as typing characters in the document window.
The PageMill interface doesn't really offer buttons for bold,
italics, and so on, but these commands are readily available under
the Style menu. In addition, most text styles follow the traditional
Mac command-key shortcuts, so that +B
will allow you to enter bold text, and +I
lets you type subsequent text in italics. Table 29.1 shows the
command key equivalents for common HTML text styles.
Tip
Clicking the paper/pen icon (or the globe icon) in the top right corner switches PageMill between "edit" and "preview" mode.
Table 29.1 Command Key Shortcuts for HTML
Tags
Keyboard ShortcutHTML Equivalent
Meaning
Shift++P
plain textEnds other pages
+B
<B>, </B>
Bold
+I
<I>, </I>
Italics
Shift++S
<STRONG>, </STRONG>
Strong emphasis
Shift++E
<EM>, </EM>
Emphasis
Shift++C
<CITE>, </CITE>
Citation
Shift++A
<SAMPLE>, </SAMPLE>
Sample
Shift++K
<KEYBOARD>, </KEYBOARD>
Keyboard
Shift++O
<CODE>, </CODE>
Code
Shift++V
<VARIABLE>, </VARIABLE>
Variable
Option++(1...6)
<H1...6>, </H1...6>
Heading level
Option++F
<PRE>, </PRE>
Preformatted text
Option++A
<ADDRESS>, </ADDRESS>
Address text
Option++P
<P>, </P>
Paragraph Text
There are two basic ways you can enter text in PageMill. Using
the keyboard shortcuts or menu commands, you can apply an HTML
tag, then type the text in that style. Or, you can select text
that's already been typed and apply the style. For instance, if
I type the following:
I cannot stress the importance of Point
#1 enough.
In plain text, I can go back with the mouse and highlight importance
then use either +I
or the menu command Style, Italics to change the text to italic.
Selecting Point #1, I could
use Shift++S or Style,
Strong to apply the HTML tag <STRONG>
to that text (see fig. 29.1).
Figure 29.1 : Applying text style HTML tags.
PageMill requires you to use the <P>
key sequence or command more often than it should. Hitting Return
after typing a heading, for instance, doesn't automatically change
the text back to <P>
style, although that might seem to make sense. Instead, it's necessary
to use the paragraph menu command whenever you want to type plain
text.
Tip
If you ever feel "stuck" in a tag's particular format, try changing back to the <P> tag with the Option++P combination.
HTML Lists
Again it's possible to change to a list format, then type your
entries. The easier way to do it, though, is to type each entry
with a Return at the end, and then go back and change the style
to a list style. For instance, try typing this "list"
in plain text:
Baseball
Football
Hockey
Basketball
Tennis
Now, by highlighting the list and choosing a list style from the
Format, List menu, we can quickly turn this regular text into
an HTML list (see fig. 29.2).
Figure 29.2 : Changing plain text to an HTML list.
For hierarchical lists, you can select the list items that you'd
prefer to see indented, then choose the command Format, Indent
Right. This essentially nests a list within a list. If you again
select the indented list items (or leave them still selected)
and choose a new list style using the Format, Lists menu command,
you have effectively nested a different type of list within the
first one.
Definition Lists
Definition lists aren't remarkably different than other list types
in PageMill, except that they take a bit more effort. Since nothing
can be assumed about definition lists, you may need to select
and change each line individually. For instance, enter the following
plain text:
Baseball
Easily my favorite game, Baseball is still the American Pastime.
Football
My second favorite game, nothing gets me more pumped than a good
NFL game.
Hockey
Everybody gets in the playoffs, but I love watching it live.
Basketball
Not much of a pro fan, but I love the college sport.
Tennis
Of all these sports, this is the one I play the best. Never will
make pro, though.
To create the definition list, your best bet is probably to choose
the entire listing and turn everything into a definition term
with the menu command Format, List, Definition Term. This saves
about half the work. The next step is to select each definition
separately and apply the menu command Format, List, Definition.
If you prefer, of course, you can simply select each individual
entry and give it the appropriate command for definition term
or definition. Either way, it ends up looking like figure 29.3.
Figure 29.3 : Creating a definition list for your HTML document in PageMill.
Inserting <HR>
There's pretty much just one way to enter a horizontal line in
PageMill, and it's nothing more than pressing the button that
looks like a line in PageMill's button bar. By example, you can
type the lines:
Ending of first section.
Beginning of second section.
If you place the cursor (insertion point) at the beginning of
the second line and press the Horizontal Line button in the button
bar, you've got a line (see fig. 29.4).
Figure 29.4 : Adding a horizontal line to your document.
Links,
Images, and Special HTML
PageMill has a very simple interface for adding hypertext links
and images to your Web document. In addition, PageMill includes
impressive tools for editing images and creating transparent GIFs,
and even allows you to drag-and-drop graphics onto your document.
Adding Links
There are a few different ways you can add links to your pages.
Probably the most common-manually entering the link-works like
the following:
Select the text for the link.
With the text highlighted, click in the Link Address bar (just
right of the globe at the bottom of the page).
Enter the URL for this link. Hit Return when you're finished.
By way of example, enter the following text in PageMill or select
some text you've already entered:
Back to Index
Now, highlight the text with the mouse, and then click just to
the right of the globe in the bottom left corner of the PageMill
window. Enter an URL for this link. When you hit Return, your
text should change to a hypertext link (different color and outlined)
(see fig. 29.5).
Figure 29.5 : Adding links manually.
Tip
You can test local links by switching to "preview" mode and clicking the link. The local page will appear in a new PageMill window.
Another way to add links to your pages is by using drag-and-drop.
Within PageMill, you can link to another page (if it's currently
open in its own PageMill window) by dragging the small Page icon
(next to the "title" text box at the top left of the
PageMill window) to the document that you're currently editing.
The link automatically appears with the title of the page as its
text.
To use your own text, highlight it in the document you're editing,
and then drag the other page's Page icon to your highlighted text.
You can also cut-and-paste links from one page to another. PageMill
will alter the link to make it work for the current page.
Adding Images
Adding images is also very simple, although there's a lot you
can do with an image once you've got it on the page.
The easiest way to add an image to your page is to drag-and-drop
it from another PageMill page, the Scrapbook, the Finder, or any
drag-and-drop enabled application (Adobe Photoshop, for instance).
PageMill can handle images of type GIF, JPEG, or PICT (PICTs are
automatically converted to GIFs).
To add a graphic using the filename, click the Insert Image button
in the PageMill button bar. In the resulting dialog box, enter
the filename for the image you want to insert, or choose it from
the listing. When you've got it, click Open. PageMill will open
the graphic at that point in your document.
Manipulating Images
PageMill also offers some advanced features for manipulating graphics
once you have them on the page. Click once on the graphic and
notice that the graphic is highlighted with a box and drag boxes.
Click and hold on these drag boxes and you can resize the graphic
(see fig. 29.6). You can also turn this graphic into a clickable
image. With the image selected, just enter an URL in the Link
Address bar at the bottom of the page.
Figure 29.6 : Resizing and linking graphics in PageMill.
Tip
As in many graphics applications, by holding down the Shift key before you select a drag box, you can resize the graphic proportionately.
Transparency and Client-Side
Maps
If you'd like to turn this graphic into a transparent GIF, double-click
the graphic. PageMill's GIF tools appear. Using the "magic
wand," you can click the color in the graphic that you'd
like to turn transparent (see fig. 29.7).
Figure 29.7 : PageMill's built-in tools for transparency and client-side maps.
Tip
You can change a JPEG to a GIF by clicking the GIF button, since GIFs are required for transparency.
What else can you do? How about creating a client-side image map?
Click a shape tool and drag it over the graphic. You've just created
a hot zone. You can enter an URL for this link at the bottom of
the graphic window (click to the right of the globe) or you can
drag the Page icon from another PageMill document onto the hot
zone to create the link.
To create a "default" link, just click the entire graphic
and give it an URL. The hot zones will override this default;
clicking outside of the hot zones will cause the default to be
used as the link.
When you're done with the graphic, click the close box. You'll
be asked to save the graphic. Do so and you're done.
Actually, there's something else we need to do to create the client-side
map. Back in the actual document, make sure the graphic is highlighted
and then select Windows, Show Attributes Inspector. Now, click
the Image button at the top of the Attributes Inspector window.
Click the radio button under Behavior that's marked Map. Now you've
got a client-side map!
Tip
You can test your client-side map in Preview mode if you've linked to local files.
Entering Unsupported HTML
Do you have a special tag you want to insert into the document?
All you have to do is select the Style, Raw HTML command. Then
type your HTML command, complete with brackets, like the following:
<SCRIPT>document.write("Howdy!")</SCRIPT>
That's all it takes. Notice that PageMill turns raw HTML a different
color to help it stand out from the rest of the document. In Preview
mode, the tags won't appear.
Note
Of course, you can hand edit the HTML document all you want by saving it in PageMill and then re-opening it in SimpleText or another text editor. It's still plain text, and PageMill doesn't have commands for a lot of the advanced HTML you've learned in this book.
Example: The Basic
Page in PageMill
This shouldn't take any time at all. Start by entering raw text
into PageMill. Then we'll go back and clean it up, adding HTML
emphasis and markup tags. Create a new document in PageMill and
enter Listing 29.1.
Listing 29.1 pagemill.html PageMill's
Basic Page
Other Sites of Interest
We've included a number of other sites below that you might find
interesting if you use any of our products. We can't guarantee
the accuracy or usefulness of these sites, but they seem friendly
enough.
Mike's Internet Stop
Finding Mr. Write
Left at the Fork
Toasting Your Toes
Horsing Around the Mountain
Now let's see how quickly we can make this an attractive page.
Start by highlighting the first line and choose Format, Heading
to change it to an appropriately-sized heading.
Next, add a horizontal line after the paragraph of text. Simply
place the cursor in the blank space and click the horizontal line
button on PageMill's button bar. (You may also want to add space
on either side of the HR.)
Then choose the entire listing of sites and use the Format, List
commands to change the list to a bullet-style (UL) HTML list.
Finally, select each individual site name and assign it an URL
for a hypertext link. I'd suggest trying both the manual and the
drag-and-drop method to get a feel for both. When you're done,
it ought to look something like figure 29.8.
Fighure 29.8 : The completed PageMill example.
Creating
Forms
PageMill makes form creation so easy that we might as well cover
it here. There are basically two steps to creating your form.
You start by using the button bar to create and paint the entry
elements onto your screen. Next, you pull up the Attributes Inspector
again and use it to assign names, sizes, and forms submitting
information.
Laying Out the Form
Creating your form is basically point-and-click. Every time you
click one of the form elements in the PageMill button bar, an
associated form field appears on-screen. Create a new document
and click some of those buttons. If you play with them a little,
you'll notice that you can click an element once to highlight
it, pick it up and drag it around on the page, and place it just
about anywhere you want to-as long as it's legal under HTML rules.
Tip
If you move the mouse pointer slowly over each button in the button bar, its name appears in the top right corner of the PageMill window.
For example, create three textboxes and a pop-up menu using the
PageMill buttons. You might also want to create a Reset button,
and you should definitely create a Submit button. After you've
done that, you'll have a page that looks something like figure
29.9.
Figure 29.9 : The raw elements for your HTML form.
The first step is to insert a return between each element and
line them up nicely down the left side of the screen. Then, enter
some text to the left of each form field to describe it. Make
the text boxes "Name," "E-Mail," "Web
URL," and describe the pop-up as "Favorite HTML Editor."
Then, notice that you can double-click each textbox to enter default
text. Do so if you want to. Also, double-click the pop-up. Click
inside it and you can edit all of the choices. I'm going
to put some popular HTML editors in mine (see fig. 29.10). You
can even double-click the buttons to edit their values.
Figure 29.10 : Adding names and values for the form elements.
With all of this done, we turn to the Attributes Inspector. With
the first textbox selected, click the rightmost button on the
Inspector (the picture/forms button). It will change to show you
the type of form element that's selected and give you a field
to enter the name for this textbox. Click in the field, name the
form element, and hit Return.
You'll need to do this for each of the form buttons. Notice that
the pop-up menu gives you other FORM
SELECT choices in the Inspector, like how many elements
to display and whether or not more than one selection is possible.
(In this example, I'm choosing to show one element at a time and
to make only one selection possible.)
Finally, you need to set the form METHOD.
This is done by clicking the leftmost button on the Inspector
(the document button). In the ACTION
field, enter the URL for your form-processing script (make sure
you hit Return when you've finished). In the METHOD
pop-up, you can choose GET
or SEND for your form data.
That's it-your form is ready (see fig. 29.11).
Figure 29.11 : Browsing the form in the PageMill's Preview Mode.
Document
Info
Under that same document button in the Attribute Inspector, you
may notice that you have control over some other document issues
as well. To change any color in the dialog, just pull down its
menu and choose Custom. You'll then be presented with a color
wheel for choosing your color. When you've found the color you
want, click OK. That color will take effect immediately.
If you want a background image, simply drag the image to the box
marked Background Image in the Attribute Inspector. When the box
is highlighted, drop the image on it. Suddenly, you've got a background
(see fig. 29.12). To delete the background, click the tiny trash
can icon.
Figure 29.12 : Adding a background with drag-and-drop.
All you have left to do is add a title to the PageMill document.
And, honestly, if you haven't figured out how to do this, I'm
a little disappointed. (Actually, I missed it the first time around,
too.)
Click the box next to the word "Title" under the PageMill
button bar. Type your title. Hit enter. That's your title (see
fig. 29.13). I'll enter:
Figure 29.13 : Entering a title for your HTML document.
Do You Like My Dog?
Pretty obvious, huh?
Summary
In my personal opinion, PageMill is the best example of an application
that really makes powerful HTML easier than hand editing. Unfortunately,
even PageMill doesn't offer every HTML tag and construct we've
learned in this book. But it's a good start, and you can always
go back in with a text editor to change things.
Basic markup is easy, but, since the button bar doesn't offer
many text-oriented options, I'd recommend you learn some of the
keyboard shortcuts for bold, italic, paragraph, headings, and
other tags. Applying list tags is just as easy, although you need
to define DT and DD tags separately within definition lists.
PageMill's interface for creating links is a bit unique, but very
easy and effective once you get used to it. Support for a number
of different drag-and-drop options also makes working on a big,
interconnected site much easier.
Perhaps PageMill's greatest strength is dealing with graphics.
You can drag-and-drop graphics, add them by filename, and even
edit them from within PageMill. Not to mention, PageMill makes
creating client-side image maps actually fun. Big kudos for these
extra features.
Finally, PageMill makes form creation very graphical and understandable.
Although you'll still need to edit manually to add JavaScript
and similar elements, the basic server-side form is a cakewalk
to create.
Review
Questions
Are menu commands the only way to access style elements like
bold and italics in PageMill?
What should you do if you feel PageMill is "stuck"
in a particular tag like a heading or list tag?
In creating a definition list, why is it helpful to choose
an entire list and change its definition terms (DT), even if some
of the elements are definitions (DD)?
What is the menu command for <HR>
in PageMill?
Can you cut-and-paste a link from one page in PageMill to
another?
What happens to PICT files when they are drag-and-dropped
on PageMill documents?
What is the name of the tool used to create transparency in
GIF files?
What are the three steps to creating a client-side image map?
What is "raw HTML"? Why does PageMill need a special
command for this?
Where do you enter METHOD
and ACTION information for
forms in PageMill?
Review
Exercises
Use PageMill, definition lists, and hyperlinks to create a
page of book reviews. Clicking the book's name shows the user
a graphic of the book. For instance, an entry might be:
HTML By Example
The best book ever written for learning HTML the right way.
Based on the example above, add another Definition (DD) line
that includes a link to order the book, the author's name, copyright
info, and price. For instance:
HTML By Example
The best book ever written for learning HTML the right way.
Todd Stauffer, Copyright 1996, $34.99. Order this book.
Create a button bar interface using PageMill. (No image map
is necessary, just create a series of clickable images.)
Make a similar button bar, but use PageMill's built-in client-side
image map creator.
Add Internet Explorer "background" sounds to a PageMill
document.
Determine which type of centering (Netscape's <CENTER>
tag or HTML's <DIV ALIGN="CENTER">)
PageMill uses.
Use of this site is subject to certain
Terms & Conditions.
Copyright (c) 1996-1998
EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited.
Please read the Acceptable Usage Statement.
Contact reference@developer.com with questions or comments.
Copyright 1998 Macmillan Computer Publishing. All rights reserved.
Wyszukiwarka
Podobne podstrony:
ch29ch29ch29ch29 (7)ch29ch29 (4)ch29ch29Ch29ch29ch29ch29ch29 (2)ch29CH29CH29 (10)więcej podobnych podstron