For this lab, you will practice incorporating graphics into Web pages.
Web designers use graphics for not just “pictures,” but
also for design elements like navigation buttons, banner (or logo) designs,
backgrounds, and even to display non-standard text.
Web page graphics are not created in the HTML editor, but other applications
like Photoshop and Fireworks. These images then can easily be imported
into Dreamweaver. For this lab, you’ll use Macromedia’s
Fireworks MX to create a page header and a simple graphic navigation
bar. You’ll then incorporate these elements into a Web page that
should resemble something like the following example when you’re
done:
Before you begin this tutorial, go to the comedy team “Just the
Funny’s” list of characters http://www.justthefunny.com/characters.html
and pick a character you’ll use for this lesson. You can also
opt to use pictures of yourself for this lab. For this option, you’ll
just need to take some printed pictures of yourself to a public lab
and ask the lab monitor to help you scan your pictures as .jpg files.
| Task |
Hint |
Sample |
| 1. Open Fireworks
and create a new file with the canvas size 650 pixels wide and
100 pixels high. Leave the canvas color white.
|
Macromedia’s Fireworks MX is found near Dreamweaver
on most Start menus. This will be the banner
portion of the example (the part that says “Cracko the Clown”).
Most designers call this location on a Web page the “banner”
or “page header.”
|
The “Getting Started with Fireworks” documentation
(PDF form) is the best overview of the Fireworks interface:
http://www.macromedia.com/
support/documentation/
en/fireworks/
There’s also a fairly lengthy but excellent Web-based overview
of Fireworks “basics” by Macromedia at:
http://www.macromedia.com/
support/fireworks/workflow/
fwmx_modeless_editing/ |
| 2. In the property inspector, change the “canvas
color” to #FFFF33 (a yellow). |
|
|
| 3. Next, pick the text tool
(the “A” shaped icon under “Vector” tools
palette) and type a funny title for your site. |
You can change the font style and color in the property inspector
before you type the text or after. The font used in the example
is “Kids”, red, size 40 & 20. |
|
| 4. Add a black border to your banner image by
selecting the rectangle tool (the square icon under
Vector palette). |
Before you draw the shape, in the property inspector, change
the color (paint bucket icon) to transparent (white square with
red diagonal line), and set the border color (pencil icon) to
black, 3 pixels.
Draw your shape by placing the cursor in the upper left corner
and then dragging across the canvas. Don’t worry about getting
it exact, because you can go to the property inspector and type
the exact dimensions (you want 647 x 96). You can also select
the square and adjust the location on the canvas with your arrow
keys. |
|
| 5. Save your file as banner.png |
NOTE: “png” (short for Portable Network Graphic)
files cannot be viewed on the Web. This is the name of
the Fireworks source file. Having a png file enables you to continually
go back to the source file and make changes. To be viewed on the
Web, you’ll have to change your file into a .gif or .jpg file
by exporting from the source file. |
|
| 6. Convert your banner.png file into a Web-ready
graphic |
With the banner.png file open in Fireworks, go to File
> Export Preview. . . The “Export Preview”
options that appear are all for “optimizing”
your graphic. Bigger image files take longer to download and optimization
is the process of trimming file size from graphics. This process
is complicated, so basically make sure your format
option says “gif” and then click the “export”
button. Then “save” the gif file into your “public_html”
folder.
|
Macromedia Fireworks tutorial on exporting: http://www.macromedia.com/
support/fireworks/export/
fw_export_vs_sav/
|
| 7. Create a New Fireworks file,
dimensions 150 W x 100 H, and a white background. |
Next, you need to create your page’s “logo,”
which is generally the space in the upper-left corner of the page.
The Cracko example uses the small picture of Cracko from the “characters”
page.
From the characters page, save your character’s small picture
to your public_html folder (right mouse/save picture as. . .). |
Link to Just the Funny characters page:
http://www.justthefunny.com/
characters.html
|
| 8. “Import” your character’s
small picture into your logo file by selecting File >
Import |
Once you select your character’s file, you will see a “picture
corner” icon appear. Move that picture corner to
a side of the canvas and left-mouse click. The picture should appear.
You can move the picture around the canvas. |
|
| 9. Re-size/re-design your picture to fill the
canvas size of the logo you’re creating. |
The small character pictures are only 120 pixels wide, but the
logo canvas is 150 pixels. To blend the picture into the background,
go to Modify > Canvas > Image Color. Next,
select the “Custom” option and then
click on the small arrow in the lower-right corner of the color
chooser square. A little eye-dropper should appear. Drag the eye-dropper
to the background of the character picture and left-mouse click,
then click “okay.” This should make the canvas background
the same color as the background color of the character image. |
|
| 10. Save your file as logo.png |
|
|
| 11. Convert the logo file into a logo.gif
file |
Repeat Step 6, saving the file in your public_html folder. |
|
| 12. Create a New Fireworks file,
dimensions 150 W x 400 H, background color #FFFF33 |
Now you’re creating the left-side navigation bar of the
example. |
|
| 13. Create a rectangle 150 pixels wide and 35
pixels high, with a transparent background and a 1 pixel wide black
border. |
You’re making your first graphic “button.” Set
these attributes in the property inspector of the rectangle before
inserting the rectangle. |
|
| 14. Make 4 more rectangle/buttons. |
Select the rectangle with the pointer tool (black arrow) and copy
and paste the rectangle.
Then, use your down arrow key to move the copied
rectangle below the first rectangle. Repeat this 3 more times until
you have 5 rectangles stacked on top of each other.
|
|
| 15. Finish the navigation bar’s bottom.
|
Paste and move the 150 x 35 rectangle one more time, but this
time change the final rectangle’s dimensions to 150 x 230.
|
|
| 16. Add text to your buttons. |
Select the text tool and type the words “Home”, “Photos”,
“Rates”, “Contact”, “Links”
into the buttons. Maintain consistency and save yourself some work
by copying, pasting, and modifying the first text you type to the
remaining buttons. |
|
| 17. Save the file as navbar.png,
then export the file as navbar.gif. |
|
|
| 18. Open a New file in Dreamweaver
and save it as “lab3.html.” |
Now, you’ll assemble the graphics you created in Fireworks
using Dreamweaver |
|
| 19. Insert a 2 column, 2 row table,
800 pixels wide, cell padding=5, cell spacing=0, border=0. |
You’re using a fixed width table to layout your Web page.
The width is set at 800 pixels wide because according to Counter.com,
87% of Internet users have a screen resolution of at least 800 x
600 pixels wide. |
Remember, you always want to design pages that conform to what
most people are using, in terms of browser type and browser resolution.
See the Counter.com’s January statistics: http://www.thecounter.com/
stats/2004/January/res.php
|
| 20. Change the cell dimensions of your table |
Upper-left = 150 x 100
Upper-right = 650 x 100
Lower-left = 150 x 400
Lower-right = 650 x 100. Also, make sure vertical alignment (“vert”)
is set to “top” for both bottom cells. |
NOTE: Lynch and Horton, the authors of Web
Style Guide, recommend dimensions of 760 x 410 as a “safe”
viewing area for screen resolutions of 800 x 600. http://www.webstyleguide.com/
page/dimensions.html |
| 21. In the upper-left cell, insert your “logo.gif”
image. |
|
|
| 22. In your upper-right cell, insert your “banner.gif”
image. |
|
|
| 23. In the lower-left cell, insert the “navbar.gif”
image. |
Save your page and preview it
(F12) in the browser at this point. |
|
| 24. Add links to the navbar |
To make the navbar work, you need to add what’s called an
image map, or linked “hot
spots” to the image. Click on the navbar image and look
at the property inspector. You should see some “Map”
options, if not click on the expander arrow at the bottom far
right of property inspector.
Click on the rectangle hot spot tool (blue square)
and draw a rectangle over the “home” button of the
navbar.
When you’re done, you’ll get the “hotspot”
properties, where you should add a link (“index.html”)
and some “alt” text (“link to home”).
Repeat this process for a couple more of the buttons, then save
and preview. The buttons on your navbar should now work like links
in the browser (i.e., you should see the little hand cursor).
|
Here’s an easy tutorial on image maps:
http://www.wmich.edu/imi/
technology/dreamweaver/
advanced/image-map.html Here’s another one:
http://wonders.eburg.wednet.edu/
WondersResources/CrImage.htm
|
| 25. Add text and a graphic to the “content”
(lower-right cell) portion of your page. |
Type 150-200 words of text into the lower-right cell (and make
sure the cell vertical alignment is set to “top,” not
“default”).
Next, insert a picture of your character pulled from the “Just
the Funny” Web site (not the small picture). These should
be jpg files, which have a higher resolution and are used mostly
for photographs.
|
Link to Just the Funny characters page:
http://www.justthefunny.com/
characters.html |
| 26. “Wrap” your text around your
image in the lower-right cell. |
Select the picture, change the alignment (“align”
in property inspector—you might need to expand property inspector)
to “right”, then drag the picture to
the front of the text. This should wrap the text around the image.
When wrapping images, you can add space between the image and
text by setting the “V Space” and “H Space”
properties. |
For more on setting image alignment properties, see:
http://www.macromedia.com/
support/dreamweaver/assets/
insert_images/
insert_images04.html For adding space around images:
http://www.macromedia.com/
support/dreamweaver/assets/
insert_images/
insert_images05.html
|
| 27. Add “alt” text to all of your
images. |
In Dreamweaver, click on each image, including the logo, banner,
navbar, and character picture, and add “alt” text that
explains each visual to users who are visually impaired or otherwise
viewing your site as “text-only.” |
See
http://www.macromedia.com/
support/dreamweaver/assets/
insert_images/
insert_images08.html
|
| 28. Check that the file works on the Internet
and e-mail the URL of your finished lab #3 to Dr. J. |
Make sure your lab3.html and all image files are in your public_html
directory.
- Check for broken images
- Make sure the image map in the navbar works (i.e., has working
links to other pages, but don’t actually need the other
pages)
Dr. J’s e-mail address:
jablonsk@unlv.nevada.edu
|
|
