IFrames: Making Updates Easy

	IFrames: Making updates easy
	Provided by the Good News Web Designers Association
	Return to Directory of Tutorials or GNWDA home page

IFrames:
MAKING IT EASY FOR CLIENTS
TO UPDATE THEIR OWN WEBPAGES

If you've got a church or clients who frequently update certain webpages, such as a monthly newsletter, contact lists, and a special events calendar, the maintenance work can distract you from bigger, more interesting projects. Here's an easy way for your clients to take care of these pages themselves.

A simple, little script inserts into the webpage a special viewing area that displays your client's updated file. This handy little window is called an IFrame (for "Inline Frame"). Here's a sample:

The client need only know how to use a word processing program, such as MS Word, and be able to upload the .doc file to the site. Some sites come with Administrative Control Panels that include an upload button in File Manager. Using this, the client needs the password. Otherwise, learning a simple FTP program will do the trick. Perhaps the client has an MIS department where someone else can do the uploading.

The webdesigner creates the webpage and embeds the IFrame anywhere it looks right. The client will never touch the page! The client uses Word to make/edit the information that will appear in the IFrame. This .doc file gets uploaded to the site, and the IFrame pulls it into view.

Inline frames work on Internet Explorer 3.2 and up, as well as Netscape 4.0 and newer. At it's simplest, the code looks like this:

You can add the following attributes to the tag:

ALIGN - center, left, or right
BORDER - default is 0 (pixels)
HEIGHT / WIDTH - pixels or %
HSPACE / VSPACE - specifies a pixel size for horizontal or vertical margins around the IFrame's external margin
MARGINHEIGHT / MARGINWIDTH - internal margin
SCROLLING - If set to "AUTO," the browser determines whether scrollbars are necessary; otherwise, specify either "YES" or "NO"

Here's the code for the sample above:

INSTRUCTIONS FOR THE CLIENT:

Here's the easy instructions you'd pass on to your client:

Edit your document file for use on the web.

Note: On contact lists, people's email addresses should be made into links that underline the person's name. This is to hide the addresses from spammers who have programs that search the Internet for addresses to add to their junk mail lists.

Always choose "Normal View" before your final save. It makes a difference in how the document file displays on the webpage!

"Page Setup" (in File Menu) also matters. (Here you specifiy what the margins should be set to. FYI, when the webpage uses an IFrame of 500 pixels wide, a right margin of 3.5 and a left margin of 0.5 make it fit nicely in its little viewer window.) However, if that causes word-wrapping, throwing something onto the next line when you don't want that to happen, then keep the margins as small as you want. It means the person viewing it will have to scroll to the right to read everything; that's okay if it's not a lot of scrolling.
Save your document as the same name called for on the webpage (eg: mine is called sample.doc, but you'll want to tell the client the exact name that the IFrame calls for, such as calendar.doc or contacts.doc) - Upper case and extra spaces count, so match the name exactly!
Upload the .doc file to the correct folder on the website server. (Here tell the client where to find the folder. If the IFrame doesn't work, try looking for the .doc file in the wrong folder!)

Download this tutorial as a printable Word Document.

Additional ideas from GNWDA members:
Posted by: Mike Fone of Onfire Ministries

When you import an HTML file into an IFrame, the attributes of that page, including style sheets, will come with it. This means that if you want to control the IFrame, you need to add special codes. For example, to have coloured scroll bars, place the following code in the head of the page you are importing. This will apply to the background colour as well. (Change the color attributes to give it the look you want.)

EXTRA TIPS

Not everyone viewing the webpage will see the .doc file embedded in the webpage. Depending on how their computers are configured to download and read .doc files, either it will show up in the IFrame, or it will open itself in the visitor's Word program itself, which is not a terrible alternative.

The IFrame can be used to pull in a .html file instead of a .doc file, as well as .xls or just about anything.

The IFrame looks great inside a table filled with a color, such as the sample used on this page. Cellpadding=3 so that a natural border is formed around the IFrame.

Return to Directory of Tutorials or GNWDA home page