Debojone is currently editing this 6/09... do not mess with it or add anything.

Tutorial 6  - Images

The good news is that it's easy to include images in your HTML work - - as both pictoral elements, navigational elements (buttons), or as visual backgrounds.

The bad news is that images in HTML - -  and design, in general - - is not always so easy to control, but in this tutorial, you'll get the tools you need to INSERT (i.e., LINK) your images to your HTML pages. If you're intested in controlling the POSITION of these images, well, that will need to wait until we start talking about TABLES and LAYERS in the next tutorial . . .

A. Basic Image Insert

 

Very easy. But, BEFORE you link to an image, COPY it into a FOLDER named IMAGES or GRAPHICS or PICTURES that you've already created in your site.

Then, simply click on the TREE icon (I guess that's supposed to universally mean "Image" - - any Martin Buber scholars out there to shed some light on this?), or select Image under the Insert menu:

   or also: 

This gives you an INLINE graphic, that is, it is a graphic LINKED within the body of the HTML page. The code will look like this (and DO look at the code once in a while!):

<img scr="tutorial_04a.jpg" width="195" height="89"  />

 

Notice that the tag has a name (img for image), and a set of attributes (src for source, width and height for the image size in pixels). Notice also that it's a self-closing tag.

 

That was easy, right?

 

B. Background Images

 

You can insert an image as a BACKGROUND to an HTML page. That means other INLINE elements (texts, other images) will FLOAT ON TOP of the visual background.

 

Again, first, place the graphic element or image in your IMAGES folder (or whatever you've called it)

 

Go to Menu>Modify>Page Properties . . . . Select your image as a background by clicking on the BROWSE button next to BACKGROUND IMAGE in the APPEARANCE section:

So, what happens? Your image will TILE, that is, it will repeat to fill in the entire size of your browser. This can be a good thing or a bad thing, depending on how good a designer you are.

C. Image Maps (you may want to do the FRAMES tutorial before proceeding here)

 You can attach a LINK (hypertext link) to an entire image, or just a certain part of it. Doing so means you've created an IMAGE MAP.

Let's say you want to create some nice text links, but you don't like the standard web fonts. You can use a single graphic with an image map as a way of making a fast and easy navagation bar.

So, go into Photoshop and create your Nav(igation) bar. Save in layers as a PSD file - - this is a resource file you'll be using a lot, and you'll want to be able to make quick edits to the text later, so don't forget where this file goes.

SIDEBAR: The RESOURCE folder. Since this is a file you WON'T be putting on the web, you might want to make a RESOURCES file in your website to store the files you use to make elements in your site: PSD (Photoshop), AI (Illustrator), FLA (Flash), AIF or WAV (uncompressed sound files), QT (Quicktime Video). Since resources can be pretty big, you probably don't want to upload them to your site, even though this means they'd be backed up on your hosting server. At any rate, BACKUP your resource folder, or deal with loss when something goes wrong (and discs and harddrives can still crash and burn)!

OK, here's  your navigation bar:

Pretty basic, not much to write home about, but it does give you something to turn into a useful navigation bar. Now, let's add some links.  INSERT this graphic into the html page (probably in the NAVIGATION frame of your frameset - here, the page is named "navFrame.html"), SELECT the graphic (note the black blocks that indicate this), and look at the PROPERTIES BAR in the lower left corner:

 

 

Next to that little cursor icon, there are three more Hotspot Tools - Rectangular, Oval, and Polygon. These allow you to create the HOTSPOT, or the space that will be CLICKABLE on your graphic.

 

 

 

Click on the little CURSOR icon to MOVE or ADJUST your hotspot. When you SELECT a hotspot, you can add a LINK and a TARGET to it.

 

VERY IMPORTANT:  You MUST specify a target, otherwise nothing will happen. Also, you MUST edit your image map's links and targets FROM YOUR FRAMESET HTML PAGE in order to have your FRAMES appear in the DROP-DOWN TARGET MENU. So, SAVE and CLOSE the navigation html page and then open and edit your frameset page (usually it's your index.htm page, if you've gotten that far - see the FRAMES tutorial).

 

One big advantage to working this way is that you can use the image map as navigation on several pages, and the image itself is only loaded once. You can use this same approach for making further levels of navigation (submenus, sub-submenus).

D. The Transparent GIF

These are tremendously useful as spacers - invisible elements for spacing graphic elements, even text sometime (but that should probably be done with CSS - more on that later . . . ).

 

Here is a transparent gif:   <  >. The transparent gif is just a graphic created with one color, and that color is set to "transparent" (a wonderful property of the .gif file format that you can't do with .jpegs). Click on that space between the carets, and drag it to your desktop. I've made it a little bigger (use the width and height parameters in the Properties bar) so you can grab it, but basically it can be any size you need.

 

Use a transparent gif to control the space between inline graphics and text, but remember, this is NOT going to solve all your design problems. Transparent gifs are very handy for alighing a table ABOVE a background graphic, for instance. They're also used as placeholders that maintain the correct shape and size of layers that have been converted to tables (more on this in the TABLES and LAYERS tutorials).