Exercise: iframes

Exercise: iFrames

Once upon a time frames were all the rage in web design. Frames allow you to display multiple html pages in the same browser window. Typically one document would contain the navigation, and a second would contain changing content. You can see an example of frames in action at boatnerd.com. However, frames have a number of drawbacks, and they have largely fallen out of favor.

A variation on frames that still enjoys a fair amount of popularity is the iframe. The "i" stands for "in-line," for unlike traditional frame sets, the frame containing a new html document is embedded right into the midst of another document, creating a window effect. This makes iframes great for photo albums and portfolios.

Exercise

Create a photo album using an iframe.

Procedure

Create a new folder called "iframesExercise" (or something similar) in your root folder.

Grab the sample pictures in the "freighters" folder (the same ones we used in the image-swap exercise).

Using Photoshop, create thumbnail sized versions of each of the freighter pics (scale them to 80 x 60 pixels). Don't overwrite the big pictures, you need those too. Save the thumbnails into a separate folder called "freighterThumbs."

Hint: use Photoshop's Actions / Batch Processing functions to make your thumbnails (I will demonstrate the procedure in class).

Launch Dreamweaver and create a new document and place one of the (big) freighter pictures on it. Save it as "freighter_01.html" or something similar. Save it into the iframesExercise folder created in step 1. Repeat this for each of the pictures (so you will have a separate html file for each ship).

Now create a new html file and save it as "mainFramePage.html". Place each of the thumbnails (small freighter pics) onto the page. You can arrange them however you like (horizontal row, vertical column, block, whatever).

Elsewhere on the page (below or next to the thumbnails) create an iframe: type the following code into the body below all of the thumbnail images:

Now select the first thumbnail and link it to the appropriate picture page (freighter_01.html or whatever you called it). But you're not done yet: add the following attribute to the link tag: target="picGoesHere". This will cause the picture page to load into the iframe instead of replacing the entire page. Repeat this for each thumbnail (link them to their coresponding ship picture pages and include target="picGoesHere" inside each link).

FTP the "iframesExercise" folder to your server space. Update your home page so that the Frames link points to the "mainFramePage.html" page. Note: You must upload the folder that contains the freighter thumbs if it is not in the "iframesExercise" folder.

Customize your page: use your own photos; add styles; design the page.

Point Breakdown

10 pts	Went well above and beyond and created something special.
9 pts	Went above and beyond requirements (customized the photos/pages; added styles, etc.).
8 pts	Did what was required.
7 pts	Missing one or more required elements or contains one or more errors.
0–6 pts	Poor showing; mostly incomplete or full of errors.

VCA225 Digital Production

Exercise: iFrames

Exercise

Procedure

Point Breakdown