Exercise
UNIT 18: Front Page-Image Formatting Table of Contents
1.0 Introduction
Page 109
2.0 Objectives 109
3.1 Making an Image Transparent 109
3.2 Adding a Border to a Graphic 110
3.3 Cropping a Graphic 110
3.4 Adding Text on a Graphic 111
3.5 Adding a Hyperlink to Text or Images Ill
3.6 Adding an E-mail Hyperlink 112
3.7 Creating Bookmarks 113
4.0 Conclusion 114
5.0 Summary 114
6.0 References and Suggestion for Further Reading 114
7.0 Tutor-Marked Assignment 114
1.0 Introduction
The front page provides you with facilities to change the background of the image you've inserted to reflect the design, and also to format an image to stand out distinct by putting border, cropping the image and adding text to it. For length page bookmarks allow you to quickly jump to certain parts of the page and every good website should have a contact name and an e-mail link if possible.
2.0 Objectives
At the end of this unit you should be able to:
Make an image transparent;
Add text to an image;
Add border to an image;
Crop an image;
Add hyperl ink to an image;
Explain how to create bookmark;
Explain how to add an e-mail hyperl ink.
3.1 Making an Image Transparent
There are times that you insert an image like clip art and if you have a coloured or textured background, you get a white box around the image. You can make this transparent. You can also just make a certain color within the image transparent. When you use the transparent tool that is built into FrontPage, you will actually be converting the image to a GIF. This is a file format for graphic images. Follow the directions below to make your image transparent.
Click on the image that you want transparent.
Click on the transparent icon found on the pictures' toolbar on the bottom of the screen.
Your mouse now has the transparent tool on it. It looks like a pen. Click on the area that you want to make transparent. In Fig. 18.1, I clicked on the green background to make that transparent.
A dialog box will open, telling you that you will be converting the image to a GI F.
Click on Yes as shown in Fig. 18.1:
Image after using the transparency
Fig. 18.1
Exercise 1
Think of way in which you can get a picture into your computer.
One of the easiest ways is to have the picture saved on your hard disk or you can use a digital camera to snap the picture and save it on your hard disk.
3.2 Adding a Border to a Graphic
If you want your image that you added to your FrontPage web to stand out, you can easily add a border to it. The border color will be black by default. To add the border follow these steps:
Click on the image that you want transparent.
Right click on the image that you want to add a border to and click on Picture Properties.
Click on the appearance tab.
Click on the up arrow text to border thickness to choose a number other than zero. The larger the number the thicker the border.
Fig 18.2 Activity 1
Insert or import an image into your web page and add a border to it.
3.3 Cropping a Graphic
You can crop images so that you eliminate sections of the image that you do not want to display.
There is a cropping tool built right into FrontPage that allows you to do this. Follow these directions for cropping an image.
Click on an image that you want to crop.
Click on the cropping tool icon from the Pictures' toolbar which can be found on the bottom of your screen.
Your image will now have a dotted line with handles around it.
Click on the handles and drag them until the dotted lines are around just the portion of the image that you want to display.
Click on the crop tool one more time to crop your image.
Fig. 18.3
Exercise 2
Why would you want to crop an image?
Cropping an image will eliminate some sections of the image that you do not want displayed.
3.4 Adding Text on a Graphic
In FrontPage it is very easy to add text on top of an image. To do this, follow these steps:
Click on the image that you want to add text to.
Click on the text icon from the Pictures' toolbar at the bottom of your screen.
A text box will appear on your image. Type the text you want to add. You can move the text and format it like you would do to any text box.
Activity 2
Type the name of the image on the image you inserted.
3.5 Adding a Hyperlink to Text or Images
Many times you may want to have an image that is linked, so that if someone clicks the image or text, the person will be taken to another page.
You can add a hyperlink to both text and images. It is a simple task to do. Follow the steps below to create a hyperlink.
Select the text or image that you want to add a hyperlink to.
Click on the Hyperlink icon on the standard toolbar.
The created hyperlink dialog box will open. Type in the URL that you want to link to in the URL box.
Click on OK.
Your text or image will now be hyperlinked. When in the preview mode or after you publish, you will see that when you click on the text or image, it will jump to the URL you typed in.
toit,l I rr PntuteDr&.. In rne &usury,- . .1t1. rpi iir
-,
' ,4kpeue Incn Fri: ,I.P f‘le Tutou A ru, eInt.T
I
-St ic.,..tr. 91e Li n I 1._f t•Ftflge Tutunal nuuu-,,I... it- is z Itt 01 f n Frct)ue ruboo511,-..in,rii,,,::
- i A ihttrubt tu I it- Frctet-':lue piton311r unt.
4 i f
or-ilk lout it:nrflat2s; Tuion.ui Taunt,
3.6 Adding an E-mail Hyperlink
In this way, if someone visiting has questions or comments, they have a contact. You can create an e-mail hyperlink using either text or images. To create an e-mail hyperlink, follow these steps:
Select the text or image that you want to add the e-mail hyperlink to.
Click on the Hyperlink icon on the standard toolbar.
Click on the little envelope icon.
Type the e-mail address you want the messages addressed to.
Click OK and then OK again.
_At
T I
I t i r e !Fig. 18.4
Exercise 3
What is the function of URL in hyperlink?
The URL is the address or location of the web page the hyperlink is referring to.
3.7 Creating Bookmarks
If you have a page that is quite long in length you may want to create bookmarks which allow you to quickly jump to certain parts of the page. Another name for bookmarks are anchors. To create a bookmark follow these steps:
Select the text that you will want to jump to.
Go to Insert on the menu bar and click on Bookmark.
The bookmark, dialog box will open. The text that you selected will be placed in the bookmark name. You can type your own name for this if you wish.
C l i c k O K .
When you get to the part of your page that you want to hyperlink to that bookmark, select it and click on the hyperlink icon from the standard toolbar.
Click on the down arrow next to bookmarks. Select the bookmark that you want to link to.
C l i c k o n O K .
gt to hare pour entail jwur w h Nite'?
HAREV,-/W,,,i1d)CI1 ',word
Fig.18.5
4.0 Conclusion
When you use the transparent tool that is built into FrontPage, you will actually be converting the image to a GIF. This allows you to format the image. Adding a border to your image makes it to stand out. Cropping an image eliminates sections of the image that you do not want to display. Links in either image of text will take you to another web address indicated, while bookmarks are very handy for navigation in a lengthy page.
5.0 Summary
In this section, we were able to make an image transparent, add border and text to our image and finally looked at how to add hyperl ink to your image and text. Using bookmark for navigating in your web page was also discussed.
6.0 References and Suggestion for Further Reading
Basic HTML (http://www.htmlgoodies.com) Widernet Project. thttp//wwwwidernet.org) Microsoft Windows (httpilwww.Microsqft.com)
Developing HTML (http://www.davesite.com/webstation/hunl/)
7.0 Tutor-Marked Assignment
Question
What happens when you click on the text or image that is hyperlinked in a web page published? State the steps to take to add a hyperlink to Images.
Fig. 18.6
hitt) 0.1 h'rr
h t
ii o n i e blr