DM20 Assignment 6   Part One     I-Frames

Due Tuesday, April 17

 

In Part One of this assignment you'll learn how to set up an i-frame in a webpage.

An i-frame is an "inline", or "inner" frame used to embed one web page within another. The result is you see a portion of one web page in a "window", or frame, in the first webpage. That framed page can have whatever you want in it, text, images, video, etc.
You set the dimensions of the i-frame in the first page, telling it how big you want the frame to be and it will have a scrollbar automatically - a little mini-web page within your main page.

Here's an example of an i-frame setup.

The i-frame code in the example is in the "one.html" webpage, displaying "two.html" inside the frame. Here's "two.html" by itself - it's just a normal html page that you can view through the i-frame in the first page. It's a good way to display content that is frequently updated or changing in some way, without having to change or edit the first page at all.

 

To begin, you'll make the .html web page that will be displayed in your first page's i-frame.

Launch Dreamweaver and go to Site > Manage Sites and select your site or import your dm20.ste file.

Create a new HTML page in Dreamweaver and save it as A6two.html into your root folder (no spaces in the file name).

In the Title: area replace "Untitled Document" with a title of your choice. (Spaces and punctuation are OK here.)

Then click the Page Properties button in the Properties panel and set up your background color and font size and color.
Don't forget to set your 4 link colors (the "Links CSS" bttn on the left in the Page Properties box).

In your new page, type or paste in some text - Lorem ipsum strikes again? - go to loremipsum - if you want to copy some from there.
It should be several paragraphs - enough so the i-frame will have a scrollbar.
File>Save or Ctrl S to save this page.

Then File > New to create another new page. Save it as A6one.html into your dm20web root folder.

In the Title: area replace "Untitled Document" with a title of your choice.

Click the Page Properties button in the Properties panel and set up your background, font and link colors.

Next, you'll download a small image that will tile (repeat) across the background of your webpage. By default, webpage background images tile/repeat to fill whatever size screen they're being viewed on. Using a small texture image for this gives your page a little variety from just solid colors, and because it's small it will load in an instant when someone pulls up your page on the web.

Go to this site and choose one of the small jpgs there. Save it into your root folder.

Then, in Dreamweaver's Page Properties window, as pictured below, click the Browse button for "Background image" and choose the small jpg you saved.



Next, from DW's top menu, go to Insert>HTML>IFrame (there's a lot in this list - IFrame is a ways down).

Choose IFrame, and then click the Refresh button in the Properties panel. A tiny gray box appears in your page - that's the IFrame.
Switch to Split View and the iframe tags are visible:

Click once in the first "iframe" tag in the source code - be careful to click after the word iframe but before the closing bracket - the code you're going to type needs to be within the iframe tag - so click between iframe's "e" and the >

Then press your spacebar once, and type the rest of code, starting with src (for source), the name of the page you want to open in the frame, and the width and height of the iframe, like this (I've bolded the part you need to add to your source code) :

<iframe src="A6two.html" width="550" height="400"> </iframe>

Press the Refresh button in the Properties Panel and return to Design View. You should now have blank gray box in your page - Dreamweaver doesn't display i-framed pages in Design view. So, Ctrl S to save and Preview in Browser(s).

Next, in your A6one.html page, put in a link toward the bottom, beneath the i-frame. Type  Return to Projects Menu, and use Point to File to link it to your menu.html page.

Ctrl S to save, Preview in Browser again to check your link.

When you're satisfied with the results, do Site > Put (or use the Put arrow in the Files Panel) to upload the files to the server - your A6one.html page and your A6two.html page - say Yes to 'Include dependent files' and the small jpg you put in as page 1's background will also be uploaded to the server.

Next, put a link to this A6one.html page in your menu page:
Open your menu.html page in Dreamweaver.
Click to the right of the last link that's there from before, and press Enter to move down a paragraph.

Type some text, such as -  A6 I-frames, Part 1 - or something similar. 

Select the text on the screen, go to the Link field in the Properties panel and use the Point-to-File icon to link to your A6one.html page.

Preview in Browser to check your links.  When satisfied, File > Save, and then Site > Put to upload your revised menu.html page to the server.

continue with Part 2