Now we will take the graphics you just created and see how they look in a web page window.
1. Open a new blank Composer page. Pull down the FORMAT
menu to Page Properties. Click in the Image Box, Choose the file
to use as a page background (HappyBkgnd.GIF), and be sure to click
the "Leave file at Original Location" box.
2. Before closing this window, notice some of the other choices you have for links, backgrounds, and other options. Then OK the window and see the results on the Composer Page.
3. SAVE your file in the WebProject folder as Page5.html.
One last "starter” topic for graphics.
Using what you already know, we'll insert an image from the first lesson
into this page.
4. Click at the top and Insert the file DS.GIF into
this page. You should see the DS file with the "Happy Face" as a
background. Notice that you may have different color schemes, and
there may be other distortions.
Specifically, notice that there is a "problem" with a white "block" around the image. We want to be able to make this white color transparent, so you can see the color or background behind the image. Here are the steps to do this:
5. SAVE your Page5.html. Close the Composer and Navigator windows.
6. Now go back to your WebProjects>Picture folder and drag the DS.GIF file onto GraphicConverter. We want to make one of the colors (white) in the picture transparent.
In GraphicConverter, you use the "Magic Wand" tool for transparency (the Magic Wand has other functions in other programs, so just be aware of this difference).
7. Click on the Magic Wand tool in the Graphics toolbar.
8. Now click on the white color in the DS.GIF file. (Hopefully),
you will see the white become transparent and depending on the version
of GraphicConverter you have, you may see your desktop background in place
of the white color. You will also notice that ALL of the white changed
colors.
Let's change the name of the file so you can keep its original form if needed.
9. (You have the file ds.gif file open in GraphicConverter).
Now do a Save As... and change the name to TestPic.GIF.
Save
it in your WebProject>Pictures folder
10. Now reopen your Page5.html file in Composer. You will need to do a FILE>Edit Page to make changes.
11. Now Insert the image TestPic.GIF into the file (leave file in original location) and see how the transparent color works. Notice that while the white around the picture is now transparent, ALL white is now transparent. A discussion of a possible solution for this is below.
12. Now do a SAVE in Composer and Close the Composer window and Preview it.
13. CLOSE your Navigator window and Quit.
Problems with Transparency:
Changing all white to transparent above may not be exactly what you want. For example, in the graphic used in step 7, changing the white to be transparent would also make the white in the boxes within the tools transparent. All white becomes transparent, no matter where it is. The image would then look like this:
You may find that the white part you want to be transparent can be changed to a color that you will NOT use anywhere else. Then you can fill in colors as desired, leaving that one color as a "reserved" color to then be made transparent.
An alternate way to explain this is would be to open your picture and
then paint the transparent area an unusual color. Then change that
unusual color to transparent and you'll have what you want. Here
is how that would look with the "unusual" color (note that you would need
to paint the center of the words if you did this):
Then, the purple color is what you would change to be transparent, leaving the inside of the toolboxes intact.
With some images, you may need to enlarge the image and close in some
of the regions so you can paint a certain region the "unusual" color, leaving
other areas intact.