Adobe Pagemill Tutorial - Third page
Adding Graphics to Web Pages
REMEMBER: When you import an image, both the image
and the page it is used on MUST be in the folder that contains your index.html page. All page names (not
Titles) MUST have the suffix .html, and the image MUST have the .gif or
.jpeg suffix
|
There are three types of images you can import easily
into Adobe PageMill:
- GIF - A GIF file is a Graphics
Interchange Format file. The most popular image format on the World Wide
Web.
- JPEG - A JPEG file is a Joint
Photographic Experts Group File. An increasingly popular image format on
the World Wide Web.
- PICT - A PICT file is a Macintosh
PICTure file. Images created in programs on the Macintosh should be saved
in this format or in the GIF format for use with PageMill
- PageMill automatically converts PICT files to GIF files if you haven't
done it, but it's a good idea to learn to save image files as GIFs so that
it becomes second nature to you, and prevents having to go backward in
the process of placing image files that will show up on the Web.
Top of Page
How Do I Get An Image from the Web?
Finding an Image on the World Wide Web:
- Open Netscape Navigator
- Click on the "Net Search" button
in
the button bar just above Netscape's Home Page
- You will go to a page that has something like this at
the top:
- Choose a Search Engine from among those listed (Magellan,
Excite,Yahoo,etc) and type in the description of the kind of images you
are looking for. For instance "space photos" or "cat images"
or "people pictures".
- You will get a list of possible matches from the search
engine. Explore them. Browse until you find an image you like. Click and
hold down the mouse button on the image. A pop-up menu will appear
- Choose Save this Image as... , and select the
folder that has your WebPage file. Put a number in front of the name
to keep track of it for now. Change nothing else in the name .
- After you have saved some images that you like, quit
Netscape and go back to PageMill
-
Importing an image:1st
When you import an image, it must be stored in the same
folder as your index.html page.
If you have not already done so, you can create a folder
now:
To set up the default folder for images:
- In Adobe PageMill, choose Edit > Preferences.
- Select the Resources icon in the Preferences dialog
box.
- Click on the folder icon in the Resources Folder options.
- Locate and open your folder
(the
one you created for index.html) inside the local root folder for the site.
Top of Page
Importing an image:2nd
Adobe PageMill offers several ways for you to add images
to your Web page. You can choose from the following methods:
- Drag and drop an image from the Finder, another application,
another page, or the Pasteboard. You can drag and drop images from Adobe
Photoshop 3.0.4 or later directly into Adobe PageMill.
- Copy and paste an image from another page or another
application.
- Use the Place command in the File menu.
- Drag an image icon from an Image window.
Top of
Page
Drag And Drop from the Finder:
- Open the page in PageMill you want the image on.
- Reduce the size of the PageMill window to half the screen.
- Open the folder which contains the GIF , JPEG or PICT
file you want to use.
- Place the cursor on the PageMill page where you want
the image file to appear.
- Click and hold on the icon for the file
- Drag the icon for the file onto the PageMill page next
to the cursor.
- Release the mouse button.
- Click once on the picture and go to File> Open
Selection or press Command-D.
- Make the picture background transparent if you wish by
clicking on the transparency tool
and
then clicking on the picture.
- Go to File> Save A Copy As, and save it as
Filename.gif (not Filename_copy.gif) to your web page
folder.
- Save your entire page under its original name again,
using the Replace command.
Drag And Drop from another application:
Note:Drag and Drop operations between applications require System
7 Pro or later, and the other application must support Macintosh Drag Manager.
- Set up a Page window in Adobe PageMill and a window in
another application so that both are visible
- Make sure the Page window in Adobe PageMill is in
Edit mode.
- In the other application, select the image.
- Drag the image from the other application into the Page
window in Adobe PageMill, then position it on the page.
- Release the mouse,
Button.
When dragging an image from a program which supports layers,
make sure the object you drag has been grouped with all its elements, as
in PageMaker 6 and Photoshop 3.0.4.
Top of
Page
Drag and Drop an image from another page or from the Pasteboard within
PageMill:
- Make sure both windows are visible and that any PageMill
windows are in Edit mode.
- If the Pasteboard holds the image, and is not visible,
choose Window > Show Pasteboard.
- Drag the image from its original window and place it
on the page where you want it.
- Release the mouse button.
Top of
Page
To import an Original Image by cutting and pasting:
- In the Application which created the Image, select the
image and choose Edit > Copy. (If you are using Adobe Illustrator
3.x or later you must press Command+Option+C instead of choosing Edit>Copy.)
- Switch to the Page in PageMill.
- Make sure the page is in Edit Mode. Look in the upper
right corner of the page. If you do not see this icon
, click
on the Globe Icon to change to it.
- Place the cursor where you want the image, and choose
Edit>Paste.
- Click once on the picture and go to File> Open
Selection or press Command-D.
- Make the picture background transparent if you wish by
clicking on the transparency tool and
then clicking on the picture.
- Go to File> Save A Copy As, and save it as
Filename.gif (not Filename_copy.gif) to your web page
folder.
- Click on the picture once and Delete it, leaving the
cursor where it is.
- Go to File >Place..., then go to your Web Page
Folder and select the image you just saved. Click Open.
- Adjust the picture.
- Go to File > Save Page As... . Save your entire
page under its original name again, using the Save then Replace
commands.
Top of Page
Aligning and flowing text around images
PageMill offers many options for aligning text with an
image. If you position an image within a line of text and the image is taller
than the text, the image will increase the line spacing in that line of
text. You can align the top, center, bottom, right, or left side of the
image with the text. Alternatively, you can flow text around the right or
left side of an image.
To choose the appropriate alignment, simply select an image,
and choose one of the five 
alignment options
from the toolbar.
Top of Page
This tutorial designed by Chris Graham ,whose other life can be seen on
A Better Mousepad page.