With Adobe PageMill 3.0
- (for Macintosh)
POINT: Although PageMill may look a little like
a word processor, there are some very important differences between
making a word processing document and making an HTML (web page)
document. In a word processing document, when you place an image
onto the page, it becomes part of the document file itself. This
means that a word processing document with several pictures in
it is saved as a single file. But this is not true for an HTML
document. An HTML document is really just a set of instructions
(HTML code) which tell your web browser how to display the text
and where to find the appropriate images. The images are not
actually part of the file. Therefore the images must be placed
in a folder along with the HTML page document. This means that,
if you move the images to another folder after the HTML page is
made, or if you change the file name of any of the images, the
HTML page will no longer be able to find them. So, when you produce
a web site (a site has more than one connected and related
web pages), you end up with a folder that has your home
page (which typically has the file name of index.html),
several related HTML pages that are linked to your home page,
and all of the images that you have selected to display on these
pages. It is best to begin a web page project by first creating
- Before starting any programs,
select New Folder in the File menu. Place this
folder on your desktop and name it "webpage."
This will be the folder that contains your HTML pages and your
- Open the PageMill program (in
the Adobe PageMill folder).
- When you opened the PageMill program,
it should have opened a new, untitled, blank web page. Before
working on this page, you need to name and save it to your new
folder. Select Save Page As... from the File menu.
In the window that opens, navigate to the webpage folder
that you created, then change the first part of the file name
to index (leave the .html tag on the end of the
name... web page file names should be short, with no spaces or
punctuation). Example: index.html When you have
done this, click Save.
- Next to the Title label
at the top of your web page, delete Untitled Document
and type a title for this page. Example: Stan Smith's WebQuest
Page This is the title that will show up at the top of a
user's web browser, but it is not text that will show up within
your page. Now you are ready to add content to your page!!
IMPORTANT POINT: In Adobe PageMill, there are two ways
of viewing your web page document, Edit Mode and Preview
Mode. In the upper right of the PageMill window is a square
button. If this button has a picture of a paper and pen, the
window is in Edit Mode, and you can change the page, adding
and removing content. If the button has a picture of the Earth,
the window is in Preview Mode. This mode is for viewing
only, showing you what the page looks like in a web browser.
In Preview mode the links actually work and you can test
them, but you cannot edit the content of the page.
Adding and Editing
- Click on the body of the page
to place your cursor there and type a heading that you want to
appear at the top of your home page. Example: "The Great
Coral Reef Web Quest" Then hit Return on your keyboard.
- Highlight that text. Now you
can center it, make it larger (for instance, select Largest
Heading on the Paragraph pull-down menu). For headings,
use one of the Headings choices and for most other text, choose
Paragraph. You can also select a style, such as Bold,
Italics, or Underlined.
- Add a sentence or two of explanation
under your page heading. Example: "Where you can explore
the Coral Reef without getting wet!" You can also highlight
this text and resize it, center it, change its color, etc. The
text color button is the small button with a 4-color square on
it. To change the text color, just click-and-hold on this button
and select one of the colors. Take the time to practice each
- It is possible, in Adobe PageMill,
to select a different font. To do this, pull down the font menu
on the second row of buttons (it says "default font"
on it) and then you can select one of the fonts you have installed
on your computer. But, you should keep in mind that an
HTML page is just a set of instructions, and these instructions
tell the viewer's web browser where the components are and how
to display them. If the viewer's computer does not have the
font you selected, the text will not be displayed the way you
want it to. So if you do choose another font, make sure it is
one that is very common, such as Arial, Verdana, Chicago, Courier,
Geneva, Helvetica, Monaco, New York, Palatino, Times, or other
font that you know is on almost all computers.
Adding and Editing
- You can insert, move, and resize
images, and even change some aspects of how they look on the
- By far, the best way to
add images to your web page is to prepare them first, save them
as GIF or JPEG images, and then place them in your webpage folder.
Then add them to your web page from your webpage folder. Images can be edited and converted to
GIF or JPEG with an image editing program such as Adobe PhotoDeluxe.
If you are obtaining pictures from the Internet, perhaps from
a web site that already exists, they will already be in the GIF
or JPEG format (GIF is best for text and drawings, JPEG is best
- To get a picture from an existing
web site, use your web browser to go to that web site, locate
a picture that you like, then click on the picture and hold down
the mouse button until a menu appears. In this menu, select
Save This Image As... and save it to your folder. Then
it can be placed from your folder into your web page. NOTE:
Please keep in mind that some pictures on the Internet are copyrighted.
- You can also add your own photographs
and artwork by scanning them (or using a digital camera). After
they are scanned, you will edit them as desired with an image
editing program and then save them to your folder as GIF or JPEG
images. Then they can be placed from your folder into your web
- To insert pictures on your page,
click to place the cursor where you want the picture. Then click
the Insert Object button (it is in the top row and has
a small square with a person's profile on it). Or, you
can pull down the Insert menu to Object, then over
to the submenu and select Image. In the resulting dialog
box, locate the image file you want to insert and click Open.
This places the image into your web page at the spot where the
- To center any picture on your
web page, click on the picture to select it and then click the
- To resize any picture on your
web page, click on the picture to select it and then carefully
place the tip of the cursor on the small square that appears
at the lower left corner of the selected image and click and
drag to the desired size. NOTE: if the image was saved
at 72 dpi, it will degrade its appearance if you make it larger.
- To place text on the left or right
side of the picture, click on the appropriate button in the button
set in the top row of buttons (these buttons will not show up
unless you have clicked on the image top select it). Then type
the text you want to place there.
to Help with Page Layout:
- It is often desirable to have
images, text boxes, etc. on the left side of your web page, and
something else on the right side (having everything centered
and arranged vertically is rather mundane). You can, for instance,
insert a table that is 3 columns wide with one row, place an
image in the left table cell, place and center some text in the
middle table cell, and place another image in the cell on the
- To insert a table, place the cursor
where you want the table, then click-and-hold on the Table
button (it is in the top row of buttons and looks like a small
grid with 3 columns and 3 rows) and drag to the lower right until
you get to the number of rows and columns you desire for your
table. This will insert a table at the location of your cursor.
- In the Inspector (you can
display the Inspector by choosing Show Inspector
from the Window menu) you can control many different aspects
of the table, such as background color in each cell, vertical
and horizontal alignment of content in each cell, width of cell
borders, etc. (you need to take the time to experiment with all
Adding a Page
Background Color or Background Image:
- If the Inspector is not
already visible, select Show Inspector from the Window
- There are 4 tabs at the top of
the resulting Inspector window. Click on the Page
tab, which is the second tab from the left.
- In the pulldown menu next to Background,
either select one of the displayed colors or select Custom
to choose a custom color (remember that text is easiest to read
on pages with light backgrounds).
- If you prefer to use a background
image, rather than a color, click on the small page button at
the lower left of the Inspector window. In the dialog box that
opens, locate the image you have prepared (it should already
be placed in your page folder). WARNING: Background images
often look nice, but if they have much contrast, they make it
difficult to read the text on your web page. If you use a background
image, you may want to first open it in an image editing program
and make it very light (almost white or gray), then place
it in your page folder and use it as a background image. Remember
that the easiest text to read is on a white background.
Page and Linking Pages:
- Pull down the File menu
to New, then over to the submenu and select New Page.
- When the new page opens, select
Save Page As... under the File menu. Make sure
this new page is being saved in your webpage folder and
give it a name (remember to keep the .html tag at the end of
the name, but you cannot name it index.html because you
already have a file with this name). Click Save.
- Type a title for this page next
- Place whatever content you wish
on this page (as you did on the first page).
the pages together:
- Go back to your first page and type some text that you wish
to serve as a link to the second page. Now highlight this text.
- Click on the Link button at the bottom right corner
of the PageMill window. In the window that opens, select the
page that you would like this text to link to and click the Link
- The text is now a link to the second page (notice that it is
now underlined and a different color).
- You can link the second page back to the first in the same
- Images (including text images) can be used as links also, in
the same way that you used the text.
Adding a Link
to a Remote Site:
- You can also link text (or an
image) to any other web page that exists on the Internet.
- Type some text that you wish to
serve as a link to a remote web site.
- Highlight this text.
- Click your mouse in the area to
the right of Link To: at the bottom of the PageMill window,
to place your cursor there. In this area type the URL of the
web site you want to link to. Example: http://www.hotmail.com
(NOTE: since this is a link to a remote site, it is important
that you include the "http://" portion of the
- Press Return on your keyboard.
The text is now linked to the remote site (notice that it is
now underlined and a different color).
- Images (including text images)
can also be used as links to remote sites.
Adding a Mailto
- Type some text that you wish to
serve as a command that, if a viewer clicks on it, will open
their email program so they can compose a new message which is
automatically addressed to you. Highlight this text.
- In the Link To: area at
the bottom of the screen, type mailto: and then your
email address. DO NOT put a space after mailto: Example:
- Press Return. The text
is now an email command.
- Images (including text images)
can also be used as email commands.
Creating an Image
An image map is a large picture that has "hotspots"
on it. In other words, there are areas of the image that are
links that you can click on to go to a different page. Image
maps typically have logical pictures (like arrows) and/or explanatory
text so that you know which part of the image map to click on.
Most image maps are created using an image editing program (such
as Adobe PhotoDeluxe) or a drawing program, such as AppleWorks
- Prepare your image you wish to
use as an image map and place it into your webpage folder.
- Insert this image into your web
page, as you would any other image. Click on the image to select
- Double-click on the image so that
there is a thick gray box around it (if you click on it only
once there will be a thin black box around it not what you want
- In the middle of the top row of
buttons you see four buttons for creating "hot spots"
(the left button has an arrow, the others are shapes). Click
the button with the square on it, then use your mouse to draw
a "hotspot" on your image. When you release the mouse
there should be a blue box around the "hotspot."
- Click on the Link button
at the bottom of the window, then navigate to the page you want
this hotspot to link to. The hotspot is now a link to that page.
You can also make the hotspot a link to a remote web site by
typing in a URL instead.
- Continue to make more links with
other areas of this image until it is complete, then close this