Lab 6: Float Images, Image Map, Background Image

1. Floating text around an image 1

2. Image Map 2

3. 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.

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 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).

  1. 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.  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).

·  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