Lab 6: Float Images, Image Map, Background Image
1.
2.
3.
FLOATING TEXT AROUND AN IMAGE ............................................................................................................................ 1
IMAGE MAP.................................................................................................................................................................. 2
SET BACKGROUND IMAGE FOR A WEB PAGE ............................................................................................................... 4
1. Floating text around an image
For your pages that have just images, you may want to float the text around the image. Otherwise, your image
will act like a “really tall letter” and all the other text will start to the right of the picture at the same height as
the bottom of that picture.
To make text float around a picture, right click in the CSS styles pane, make a new style, you can call it
‘floatLeft’ or ‘floatRight’. Go to the Box category, and select a value from the Float pick list (upper right of
screen). Select left if you want the image to float left or right or whatever you want (should match tho what
you decided to call the style). Then, drag your picture onto one of your pages, click on the picture (in the
design pane), then, right click on the word “<img>” that shows below the design pane and select “set class”
then pick the style you just created. Now, when you type text next to that picture, the text should float around
the picture. You may want to add a margin to the new style you created – a margin keeps a certain amount of
space around the outside of the image. Its next to the padding you’ve used before, in the box category of the
style.
1
2. Image Map
One of the requirements for your web site is that you have an image map. An image map is a single image
where one or more parts of the image links somewhere. Check out what the class website has to say about
image maps: http://isc.temple.edu/cis1055/labs/dl6_dw_maps.html
1. Open up your index file (assuming that is the file that has the generic look you want for your website. Do a
“File – Save As”. You can name this file temp.html.
2. You should have already saved an image that you thought would work well as an image map. It should
have been saved in folder “maps”. Drag that image onto your page.
3. Click on the image.
4. If the properties pane is not open at the bottom of your screen, click on the triangle to the left of the word
“properties” at the bottom on the screen. In the open properties pane, click on the small triangle at the
bottom right of the pane (as marked in red below). This will cause image map icons to be displayed in the
properties pane.
5. After clicking on this triangle, the properties pane will become taller as shown below. On the lower left
side of the properties pane, there are 3 light blue “map” icons – one rectangular, one circular, and one in
the shape of a polygon.
1. Click on the image
2. Click to
open/close the
properties pane
3. Click to show the
image map icons
4. These are the
image map icons
2
6. Click on one of the 3 image map icons (whichever shape best fits the shape that you want to link) and then
drag that shape onto the image – onto that portion of the image that you want to turn into a “hot spot” (a
part of the image that will link somewhere).
In the screen capture below, note that I have dragged (and positioned and sized) a rectangular image map
shapes onto my tree image (shown in red below). Click on the image map area of the picture and then
enter a link into the link attribute (in the properties pane).
 If you want to link to a page within your site, drag the link icon to one of your html pages (in your
files pane).
 If you want to link to a page outside your site, open up a browser, go to the page to which you
want your hotspot to link, select then copy the URL (from the address bar of the browser). Then
paste this URL into the box next to the “link” in the properties pane (marked red below).
7. Test your page by previewing it (the little world icon middle top of the webpage). Click on each area of
your image – to ensure the link works. I noticed (when I was testing mine), that the linking was a bit slow,
so possibly you may need to be patient when testing this.
3
3. Set Background Image for a Web Page
One of your web pages must have a background image. The page with the background images may be a
page that doesn’t look like your other pages and this is OK.
For this first text, you can make a copy of your index page and save as – bgPage.html.
 Click on menu option Modify – Page Properties (or you can click on the Page Properties button in the
Properties Pane at the bottom of your screen).
4

Under the “Appearance” category, click on the browse button to the right of background image and
select a small picture that will be repeated over and over in the background of your web page. You
may have to experiment with various pictures (you can look in google images or elsewhere). Make
sure to save the google images in your pictures folder in your local web root folder.
This will create a wall paper like border around your 80% table.
Now, to play around with creating a large landscape image on which you’ll write words, try this.
 Create a plain new html file, save as bgPage2.html.
 insert a 1 by 1 table – it can be 80% or 90% wide.
 Create a style maybe called bgstyle. For this style, select your large landscape picture as background,
for repeat, select “no repeat”. While you are in here, select a large font and make it a color that is NOT
in your background picture (so your text will show over the background). Make this style centered.
 Don’t forget to click in the table (in the design pane), then right click on the word “<td>” under the
design pane, click on “set class” and pick your new style (bgstyle).
 Click on Modify – Page from the menu. For background color, select a color from your image that is
mostly around the edges (hopefully there is a color that is pretty much around the whole edge).
 Then type some text in the cell and see how it looks. The text should be large and on top of the
background image.
 Preview in IE and firefox. If it’s centered in one and not the other (and you want it centered), just
highlight the whole table and click on the centering icon (in the properties pane under the design
pane).
5