Scribd
Upload
71 views16 pages

Fireworks Image Editing Guide

This document provides instructions for using Macromedia Fireworks to edit images for the web. It guides the reader through downloading sample image and text files, opening them in Fireworks, and performing basic edits. It explains how to retrieve materials from websites, introduce the Fireworks interface, perform some basic image editing, prepare an image for the web, and include images in web pages.

Uploaded by

Steven Kisaka
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
71 views16 pages

Fireworks Image Editing Guide

This document provides instructions for using Macromedia Fireworks to edit images for the web. It guides the reader through downloading sample image and text files, opening them in Fireworks, and performing basic edits. It explains how to retrieve materials from websites, introduce the Fireworks interface, perform some basic image editing, prepare an image for the web, and include images in web pages.

Uploaded by

Steven Kisaka
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

How the Web Works, Part II: Basics of Web Imaging

Fireworks Tutorial 2.1

Fireworks Tutorial
This tutorial is designed to introduce some basic concepts of image editing using Macromedia
Fireworks 3.

You can download a free 30-day trial version of Fireworks from Macromedia's website:
[Link]
Click the Continue without login button, and you'll be asked to fill in some information
about yourself before you get to the download page.

This tutorial will guide you through the following steps:


1. Retrieving materials from the Web
2. Introduction to the Fireworks application
3. Some basic image editing
4. Getting your image ready for the Web
5. Including your image in a Web page

Prerequisites
This tutorial assumes a level of competency with basic computing tasks and concepts. You should
understand the following terms:
• Files
• Folders
• File hierarchy
• Kilobyte
• The desktop
• The Finder (Mac only)

Conventions
Actions that you need to perform are bulleted, like this:
• Open the file.
All discussion of concepts or theory — or anything that is not an action to be performed — is not
bulleted (for example, the paragraph you're reading right now.)
Menu commands look like this: File > Open. This means choose the Open option from the File
menu. Sometimes, for the sake of brevity, common menu items may be referred to simply as
Save or Open. The same style is used for other user interface elements, such as key you're
supposed to press and buttons you're supposed to click, i.e. "Click the OK button."
HTML code and URLs look like this:
<BODY BGCOLOR="white">
Names of files and folders, as well as text that you are supposed to type, are rendered in italics.
I've chosen italics rather than the more conventional quotation marks to avoid potential
confusion: "Am I supposed to type those quotation marks or not?" If you see quotation marks,
you can assume that they are to be typed.

1
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

Before You Begin

Windows Only: Configure Your System


Follow these instructions to make Windows display filename extensions at all times. This is
highly recommended for aspiring Web authors, because it reduces opportunities for confusion.
• Open any folder or drive.
• From the View menu, choose Options or Folder Options. A dialog box should
appear.
• Click the "View" tab.
• Look for an option that says "Hide file extensions for known file types" or "Hide MS-DOS
file extensions for file types that are registered." Make sure this item is not checked.
• Click the button marked OK.

2
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

1. Retrieve Materials
First, you must create a temporary folder to hold your files. This keeps all your files in one place
and makes it easier to clean up afterward.
• Create a new folder on the desktop and name it mytutorial.
Windows users: You can do this quite simply by clicking on the desktop with your right
mouse button and choosing New > Folder from the pop-up menu. Then, without
pausing to draw breath, type the word mytutorial. Press the Enter key and you're done.
Mac users: You can do this quite simply by clicking on the desktop while pressing the
Control key; choose New Folder from the pop-up menu. Then, without pausing to
think, type the word mytutorial. Press the Return key and you're done.

There should now be a folder on the desktop named mytutorial. Check to see that it's there.
Next, you must retrieve the necessary materials from the Web:
• Start Netscape.
• Point the browser to this URL:
[Link]
• A directory listing should appear, showing a series of numbered JPEG files. Recall your
number from the photo shoot and click on the appropriate file. You should now be seeing
a picture of yourself. If not, go back to the listing and try another number!
• Now you need to save this file in your mytutorial folder. The simplest way to do this is to
click on it with your right mouse button (Mac users, just click and hold down):
o A pop-up menu will appear. Choose Save Image As… (Windows) or Save this
Image As... (Mac).
o Name the file [Link] and make sure that you are saving it to your mytutorial
folder. Then click the button marked Save.
• Now point the browser to this URL:
[Link]
A directory listing should appear, showing a number of plain text files.
• Click on the file named [Link].
This is a plain text file. The contents of the file will be displayed in the browser window. You'll
use this raw code as a template for a Web page.
The best way to save this file is simply to copy and paste:
• Choose Edit > Select All to select all the text.
• Choose Edit > Copy to copy the selected text.
• Launch a text editor.
Windows users: Use Notepad. From the Windows Start menu, choose Run… and
enter notepad.
Mac users: Use SimpleText. This application can usually be found on the hard drive, in
the Applications folder.

• In your text editor, select Edit > Paste. The text you copied from your browser should
appear in the window of the text editor.
• Save this file. Name it [Link] and make sure that you are saving it in your
mytutorial folder.

3
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

• Exit/quit your text editor.


• Exit/quit Netscape.
You should now have an image file and a text file in your mytutorial folder.
The .jpg extension lets you know that the image file is in the JPEG format, which is appropriate
for putting photorealistic images on the Web. Just in case you're curious, the data in this image
file has not been altered. The image you see is exactly as it came from the camera.
And, yes, the camera automatically saved the image as a JPEG file. Different cameras will have
different features and support different file formats. JPEG is a common choice because it offers
such good compression. The camera saved the image with a relatively small amount of
compression, preserving much of the image quality.

4
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

2. Introducing Fireworks
Now it's time to do some image editing.
• Start Fireworks by double-clicking the Fireworks icon.
Windows users should find the icon on the desktop.
Mac users may have to open up the hard drive and look for a folder named Fireworks 3.
Open this folder and find the Fireworks icon.

• If you're using trial software (try before you buy), you will see a dialog box asking if you
want to buy Fireworks right now. Click the button marked Try and the program should
launch.

2.1 First Glance


Like most of today's image editors, Fireworks is a powerful program that offers many features.
Unfortunately, all these features can make for a crowded screen. It's best to use a high-resolution
display so that more "stuff" can fit on the screen. If you see elements of the interface that seem to
be sticking out beyond the viewable area of your monitor, you will need to increase the
resolution of your display. Flag me down if you don't know how to do this or if you have any
questions.
Take a moment to look around at the different components of the interface. There are a few
differences between the Mac and PC versions, but they are mostly cosmetic.
The toolbox appears on the left side of the screen. Later in the tutorial, you'll select tools from the
toolbox by clicking on them.
Floating palettes appear on the right side of the screen. These small windows offer information
and controls that you'll use to refine your image.

2.2 Opening and Saving a File


Now you will open the picture of yourself that you downloaded from the Web.
• Choose File > Open.
• Navigate to the mytutorial folder you created.
• Select the [Link] file which you saved, and click the button marked Open.
Fireworks opens the image file and displays the image file in a new window. We'll refer to this as
the document window. Note that there are some tabs at the top of this window and some controls
at the bottom. We'll be using these shortly.
You might think that you're now looking at [Link], but you're not! One peculiarity of Fireworks is
that it can only open and save files in one format: PNG (which stands for Portable Network
Graphic — review your handout about file formats). Therefore, when you opened the JPEG file, it
automatically converted it to the PNG format.
What, you don't believe me? Let's prove it:
• Choose File > Save.
• A dialog box should appear. Note that the filename is now [Link], indicating the PNG
file format.
• Making sure that you are saving it to your mytutorial folder, click the button marked
Save.

5
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

You now have two image files in your mytutorial folder: a JPEG and a PNG. Remember that an
advantage of the PNG format is that it supports lossless compression. JPEG, on the other hand,
uses lossy compression. That means that every time you save a JPEG file, it loses a little data.
Therefore, JPEG is not a great option for actually working on an image, even if your ultimate goal
is to produce a JPEG file. Fireworks is strong-arming you into making a backup of your original
image. It's for your own good!

6
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

3. Image Editing
Now it's time to use Fireworks to accomplish some basic editing tasks.

3.1 A Basic Transformation


By now, you've probably noticed that this image is sideways. (If not, you may be lying on your
side, or perhaps your monitor is sideways. Please make the necessary adjustments and then
proceed.)
As we noted in the seminar, images may be rotated by 90° with no loss of quality. That's because
the pixels, which are arranged in a grid, can simply be reassigned; their values are not
recalculated. You're going to do that now:
• Choose Modify > Rotate Canvas > Rotate 90° CW. (CW stands for clockwise.)
Both the canvas and the image are rotated by 90°. The image should now appear normal.
• Choose File > Save to save your work.

3.2 Adjusting Your View


Adjusting your view of the image, although it's not an image editing operation, is nevertheless
very important to the editing process. After all, you have to have a clear view of your subject
matter.
At this point, your image is probably not fitting into the document window very well. You need to
adjust the document window:
Windows users can simply maximize the document window.
Mac users will have to do this manually. Click on the lower right-hand corner of the
document window and drag until the window is nice and big.

You should now be able to see the entire image.


There are some other ways to adjust your view as well. Note the magnification pop-up menu.
(Windows users will find this on the taskbar at the top of the screen; Mac users should look to the
bottom left of the document window. The pop-up menu should be set to 100% at this point.)
Familiarize yourself with this feature by doing the following:
• Use the pop-up window to experiment with other magnification settings. Note that
Fireworks provides quite a range — from 6% to 6,400%!
• Set the magnification to 400%. At this magnification, you can see lots of detail and
should be able to distinguish individual pixels. This "up close" view is great for detail
work, but you can only see part of the picture at a time. How can you move around to
different parts of the image?
• Select the Hand tool from the toolbox. (You select a tool just by clicking on it. The
Hand tool is the one that looks like — surprise — a hand.)
• Use the Hand tool to move your view of the image. Just click and drag on the image.
• Restore your magnification setting to 100% and proceed.

3.3 Cropping
Although I tried to frame up the shot nicely when I took your picture, there's probably some
wasted space. Most photos need to be cropped to eliminate of wasted space and any unwanted

7
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

details. This is especially important for us, because on the Web, small is beautiful and less is
more.
• Select the Crop tool. Selecting this tool is a little trickier than selecting the Hand tool,
because it's "tucked away" in the toolbar.
o First, you must find the Marquee tool. That's the second tool on the left side of
the toolbar. It looks like a dotted rectangle.
o Click on the Marquee tool and hold down. A fly-out menu will appear.
o Slide over the fly-out menu to the third option — the funny-looking widget
on the right. That's the Crop tool. Release the mouse to select it.
o Move the cursor over the image, and it should now look like the funny-looking
Crop tool.
o Does that seem too complicated? Here's a shortcut: Just press the H key to select
the Hand tool. Press the C key on your keyboard to select the Crop tool again.
Alternate between pressing these two keys a few more times and observe the
cursor. If the cursor is positioned over the image, you should see it change from
one tool to the other. All the tools in the toolbox have these shortcuts. The
shortcuts are quicker, but they require more brain cells to use.
• With the Crop tool, click and drag across your face, then release the mouse button. Don't
worry about being precise in any way.
You should now see a cropping rectangle with eight little black boxes in the corners and on the
sides. These little black boxes are handles, and you can use them to adjust the cropping rectangle.
• Adjust and position the cropping rectangle to include only the portion of the photograph
that you wish to keep. Click and drag on the handles to adjust the cropping rectangle.
Click and drag in the center of the rectangle to move the whole thing.
• When you get the cropping rectangle just the way you want it, double-click inside the
rectangle. The cropping operation is performed.
Are you satisfied with your work?
• If not, choose Edit > Undo Crop Document and start over.
• When you are satisfied, choose File > Save to save your work.

3.4 Applying Effects


One of the most common uses of an image editor is to correct or enhance a photograph using
special purpose effects. (Effects are called "filters" in some applications, like Adobe's massively
popular product, Photoshop.)
In order to apply an effect to your image, you must first select the portion of the image that you
wish to affect.
• Since we want to affect the whole image, choose Edit > Select All.
Note the blue outline that appears to indicate the object is selected.
You will now use the Effect palette to apply effects to the selection.
• Among the floating palettes to the right side of your screen, find the topmost palette and
click the Effect tab. If you can't find this tab anywhere, choose Window > Effect and it
should appear.
Make sure you can see the whole palette. If you can't, you may need to adjust your display or
simply drag the palette to a new location.

8
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

3.4.1 Adjusting Brightness


Now you're ready to apply an effect:
• In the Effect palette, find the pop-up menu. It probably says "None" but it may say
"Untitled" or something else.
• From this pop-up menu, choose Adjust Color > Brightness/Contrast…
• A dialog box with two sliders should appear. Drag the box so that it does not obscure
your image.
• Use the sliders to adjust the brightness and contrast of the image. If the Preview option
is checked, the image will show the results of your adjustments each time you release the
mouse.
• Now it's up to you to make the judgment call of just how bright or dark you want your
image to be. Here's a hint: Mac monitors and PC monitors tend to have different
"gamma," meaning that they display images with a different degree of luminosity. To
compensate for this, Mac users should make their Web images just a little brighter than
they think they should be. Conversely, Windows users should make their Web images
just a little darker than they think they should be.
• When you are happy with your choice, click the button marked OK.
Note that a Brightness/Contrast… item now appears in
the Effect palette. You can turn the effect on and off with
the checkbox to the left of this item. You can revisit the
sliders by clicking the little blue i icon next to the checkbox.
(Incidentally, this is a very nice feature. It means that the effects you apply
remain fully editable, even after today's session is over. Not many image
editors allow this. Usually once you've applied your effects and closed your
file, you're stuck with your choices.)

Do you think you did a good job of compensating for the


differences between PC and Mac monitors? Fireworks has a
feature that lets you check this:
• Choose View > Macintosh Gamma (if you're using Windows) or View > Windows
Gamma (if you're using Macintosh) to simulate what your image will look like on the
other platform's monitor.
• You may wish to revisit the brightness settings (through the Effect palette, as described
above) while in this mode.
• Once you're satisfied, get out of "gamma mode" by choosing View > […] Gamma again.
• Choose File > Save to save your work.

3.4.2 Sharpening
Often photographs are not as crisp as they could be. You'll compensate with another effect:
• From the Effect palette pop-up menu, choose Sharpen > Sharpen.
No dialog box appears. This is a "canned" effect, applied according to a predetermined amount.
You should notice that the image is a bit sharper than before — but does it really look better?
• In the Effect palette, uncheck the checkbox for the Sharpen item.
• Observe the unsharpened image, then check the box again and compare. Continue to do
this until you feel confident about which you prefer, then stick with that choice.

9
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

Note that you can apply an effect more than once, with cumulative results. However, there are
limits to what an effect like Sharpen can do.
Note also that there are two other similar effects in the pop-up menu: Sharpen More (another
canned effect that does the same thing as Sharpen, only more so) and Unsharp Mask (which
gives you much more control but is, subsequently, harder to use — and despite the funny name,
this is indeed a sharpening effect).

3.4.3 Beveling
Not all effects pertain to image correction. Some are more whimsical:
• From the Effect palette pop-up menu, choose Shadow and Glow > Inner Glow.
You should notice a change in the appearance of your image, around the edge.
Notice also that a miniature dialog box appears right on top of the
Effect palette. You can use this dialog to customize the effect.
The pop-up menu in the top left of the box specifies the width of the
effect in pixels.
Directly below it is a special pop-up menu called a color well, which
allows you to choose the color of the effect.
To the right are three more pop-up menus that (from top to bottom) allow you to set the opacity,
softness and offset of the effect.
• Use the pop-up menus to set the width to 5, the color to white, the opacity to 100%, and
the softness to 5. Leave the offset at zero.
• Then click away from the dialog box to "set" the effect. If you need to, you can revisit the
dialog via the i icon in the Effect palette.
• Choose File > Save to save your work.

3.5 Resampling
You already reduced the size of your image by cropping it. However, since small is beautiful, let's
make it even more beautiful. Now you will further reduce its pixel dimensions by resampling the
image. Refer to your handout about resampling screen images to refresh your memory.
• Choose Modify > Image Size…
A dialog box appears. There are a number of options here, and lesser mortals might be
intimidated or confused. But not you. You've taken this seminar and so you can figure out what
all this stuff means.
First, observe that there are two main sections to this dialog. One indicates pixel dimensions and
the other indicates print size. They're even labeled that way, which is refreshing. There are also a
couple checkbox options at the bottom.
Let's start from the bottom and work our way up:
™The Resample Image option should be checked. After all, that's what we came here for:
to resample the image.
™A pop-up menu to the right specifies the resampling method. The program will use this
method to recalculate the pixel values. We won't get into this esoteric mathematical stuff.
All you need to do is make sure that Bicubic is selected because this method usually
supplies the best results.
™The Constrain Proportions option should be checked. This will ensure that your image
will still have the same proportions after the resampling as before. Just for fun, uncheck

10
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

this box and observe the little padlock icons disappear. Then check the box and watch
them reappear. (If you're feeling mischievous, you could leave this button unchecked and
get distorted results. But you're on your own if you do!)
™The Print Size section doesn't concern us. Why? Because we're not printing. We don't
care about print size.
™The Pixel Dimensions section is where the action is. This is where you will specify
exactly how you would like your image to be resampled. Note that there are two fields
here, one displaying the current width of your image, the other displaying its current
height. You're going to enter new values in these fields, specifying new pixel dimensions
for your image. If you were to enter bigger vales than those currently displayed, you'd be
upsampling, which is rarely recommended. Instead, you'll be entering smaller values so
that your image will be downsampled. Review your handout for a demonstration of
upsampling and downsampling.
Alright, enough discussion — let's do it:
• Enter a new width value in the first field. The exact number is up to you, but it should be
smaller than the current value. Try to shoot for something like 200 or lower.
• Note that the height value (in the second field) is automatically updated. That's because
the proportions of the image are constrained (unless you left that box unchecked) so that
changing one automatically changes the other.
• Note also that there are pop-up menus to the right of these fields. You can choose to work
in percentages (of the current image dimensions) instead of raw pixels. Leave it set to
Pixels for now.
• Click the button marked OK.
Are you satisfied with your work?
• If not, choose Edit > Undo Image Size and start over.
• When you are satisfied, choose File > Save to save your work.

11
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

4. Getting Ready for the Web


Here's where Fireworks really shines. It makes optimizing an image for the Web extremely easy.
Remember that Fireworks can only save files in the PNG format. However, it can export files in a
number of different formats, including the Web-friendly JPEG and GIF formats.
Review your handout on file formats, and you'll see that there are significant differences between
JPEG, GIF and PNG. Most significantly: JPEG uses lossy compression, which sacrifices image
quality for the sake of a smaller file size; GIF uses the indexed color mode, which supports a
maximum of 256 colors. This means that when you export your PNG image to one of these
formats, it will look different.
As you can imagine, the process of converting to a Web-friendly format can cause some
headaches. Fireworks eases the pain by showing you what your exported image will look like
before you actually export it.

4.1 Optimizing
• Observe the tabs at the top of the document window. The currently selected tab is
marked Original because you're looking at your original PNG image, not a preview of
what it will look like as a JPEG or a GIF.
• Click the tab marked Preview.
• Now you need to tell Fireworks what you'd like to see in the preview window. You'll do
this with the Optimize palette. You should find the Optimize tab in the same palette as
the Effect tab. Click on it, or choose Window > Optimize.
• Note the pop-up menu in the Optimize palette that's labeled Settings. This is a quick
way to access pre-configured settings for popular export options.
• Choose JPEG - Smaller File from this pop-up menu.
Just below the pop-up menu are a number of controls showing the details of this setting,
including the export file format, the quality and the level of smoothing. These last two items
pertain to the all-important compression of the file.
The Preview image in the document window is now displaying what your image would look if you
exported it with these settings, as a JPEG at 60% quality with a bit of smoothing.
Look at the top of the document window, to the right of the tabs, and you should see a little text,
saying something like this:
7.15K 2 sec @28.8kbps JPEG (Document Frame 1)
Decoded, this means that the exported file would be about 7.15 kilobytes and would take about 2
seconds to be transmitted over a standard modem. (That means a 28.8 kilobits/second modem, if
you're curious.) That's an optimistic estimate, to be sure, but it's nice to have the information all
the same.
Well, this is very nice, but wouldn't it be better if you could compare your preview with your
original, side-by-side?
• Click the 2-Up tab at the top of the document window.
You should now see both images, original and preview, side-by-side. Take a few moments to see
the difference between the original and the preview. Note the information at the bottom of each
section. You can see just how much JPEG compression is saving you in terms of file size, and just
how much it's costing you in terms of image quality.
But let's not stop here.

12
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

• Click the 4-Up tab at the top of the document window.


You should now see four images at once. The image in the upper left is your original. The other
three images are previews — though they all have the same export settings right now, so there's no
difference between them yet.
One of the sections should have a highlighted border, indicating that it is the currently selected
preview. You can alter the settings of the selected preview through the Optimize palette.
• Click on the lower left preview to select it. A border should appear around the section.
• In the Optimize palette, choose JPEG - Better Quality from the pop-up menu at the top.
Note that this specifies 80% quality and no smoothing.
Take a few moments to see the differences between the original, the preview you just changed,
and the other two previews (which at this point are still identical). Note the information at the
bottom of each section. Compare file sizes and image quality.
• Now click on the lower right preview to select it. A border should appear around the
section.
• In the Optimize palette, choose GIF Web 216 from the pop-up menu at the top.
Note that this specifies an entirely different file format (GIF instead of JPEG) with a more
complicated set of options. In brief, the preset you chose specifies a color palette (the indexed
CLUT, or Color Look-Up Table) of only the 216 "Web-safe" colors, and uses dithering to
compensate for the low number of colors.
Once again, take a few moments to see the differences between the original and the three
previews (which are all different now). Note the information at the bottom of each section.
Compare file sizes and image quality. You can probably see that the GIF format would be a poor
choice for this image.
• Just for fun, return to the Optimize palette and click on the Colors pop-up menu. Select
8. This lowers the effective bit-depth of the image by restricting the number of colors in
the palette. You should observe a corresponding change in the selected preview.
• For even more laughs, click on the Dither pop-up menu and pull the slider all the way
down. Now you'll see what the preview looks like without dithering. Note that by
reducing the colors and eliminating dithering, the file size is greatly reduced.

4.2 Exporting
Enough fun and games. Now it's time to make a serious choice. Which of the three preview
images looks best to you?
• Click on the preview you think looks the best. (Of course, the original probably looks
best, but that's not an option!) Fireworks will use the settings for this preview when you
export your image. That's the next step.
• Choose File > Export.
• A dialog box should appear. The first thing you should do is check that you are in fact
exporting to your mytutorial folder. If you're not, navigate there now.
• The filename is probably defaulting to [Link], which would overwrite your original,
archival JPEG file. So, name this [Link] and click the button marked Save or
Export. If you chose to export a GIF image, you should name it [Link] and click the
button marked Save or Export.
• Choose File > Save to save your work. This saves your export settings for [Link] for
future convenience.

13
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

5. Putting the Image in a Web Page


Now it's time to create an HTML document that will display the image you just exported.
Remember that HTML documents don't actually include the image data, but merely point to the
image file. A Web page that displays an image requires two files: an HTML file and an image file.
You already have the latter. Here's how to create the former:
• Exit/quit Fireworks.
• Open the [Link] file that you saved in your mytutorial folder. (Double-clicking the
file's icon should launch your text editor. If not, you will have to start your text editor
yourself and open the file within that application.)
• Click between the BODY tags.
• Type the following exactly as it is shown below:
<H1>Photo of Me</H1>
<IMG SRC="[Link]" ALT="photo">
<P>This is a photograph of Bart Everson.</P>
(OK, I said type the above exactly as shown, but put your name in place of mine. Also,
if you exported a GIF instead of a JPEG, then you should type .gif instead of .jpg.)

• Find the TITLE tags, in the HEAD of the document.


• Delete the word Untitled from between the TITLE tags.
• Type a new title, such as Sample Page for Imaging Seminar.
You've now created three elements: a top-level heading, an image, and a paragraph. You've also
titled the document.
Now we need to save a copy of this file, without overwriting our original template. We also need
to designate the new copy as a hypertext file, rather than a plain text file.
• Choose File > Save As…
• Name the file [Link] and save it to your mytutorial folder. (The filename extension
.html marks this as a hypertext file.)
Now check your work by viewing the HTML document in a Web browser.
• Start Netscape (but leave your text editor open, as you'll need it again soon).
• Choose File > Open Page. (Mac users should choose File > Open > Page in Navigator.)
• A dialog box should appear. Navigate to your mytutorial folder. (Windows users will
need to click the Choose File button.)
• Choose the [Link] file, and click the Open button.
Your Web page should now be displayed in the browser.
Very nice. But you can make it even nicer.

5.1 Some minor adjustments


It's a good idea to explicitly set the background color of the page to white to ensure the maximum
effect of the inner glow effect. You will do this by customizing the BODY tag with an attribute.
• Return to your text editor. The [Link] file should still be open.

14
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

• Expand the opening BODY tag to include the BGCOLOR (background color) attribute, and
set the value to white. Make sure you're working on the opening BODY tag and not the
closing one.
Hint: This would be a good time to review attribute syntax.

The opening BODY tag should look exactly like this:


<BODY BGCOLOR="white">
It would also be cool to center everything on the page. You could add an ALIGN attribute to each
element, like this:
<H1 ALIGN="center">
But don't do that. There's a better way:
• Type the following before the opening H1 tag:
<DIV ALIGN="center">
• Type the following after the closing P tag:
</DIV>
Congratulations. You've just done some advanced HTML authoring. You've created a generic
division by wrapping everything in a DIV tag. The DIV tag has an ALIGN attribute set to
"center" so all the content between the DIV tags will be centered.
Now check your work:
• Choose File > Save to save your work.
• Return to Netscape.
• The [Link] page should still be displayed, but the browser is showing the old version.
To display the changes you just made, click the Reload button.

15
How the Web Works, Part II: Basics of Web Imaging
Fireworks Tutorial 2.1

Cleaning Up
• If you wish to save your files, you may upload them to the Xavier server with an FTP
client, as per the instructions found in the HTML Mytutorial.
• You may now close all running applications.
• If you are doing this tutorial in a lab, take a moment to clean up the desktop as a courtesy
to the next user. Simply drag your mytutorial folder to the Recycle Bin (Windows) or the
Trash (Mac).
• Shut down your computer.
• Don't forget to turn off the monitor.
• Please complete and turn in an evaluation form before you leave.
Keep in touch! Remember that the Center for the Advancement of Teaching is here to help faculty
as they learn about using information technology and new media. If you have questions or need
help, or if you just want to talk, please give us a call, send an e-mail, or just stop by the office. I
personally am always happy to help faculty plan their projects, critique their work and learn new
skills.

This mytutorial was prepared by


Bart Everson
Multimedia Specialist
Center for the Advancement of Teaching
Xavier University of Louisiana

bpeverso@[Link]

16

You might also like