IFrames: Making updates easy

 Good News Web Designers Association

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"). See the sample at

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:

<IFRAME SRC="sample.doc"</IFRAME>

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:

<IFRAME SRC="sample.doc" ALIGN="CENTER" width="350" height="200" BORDER="1" MARGINHEIGHT="0" MARGINWIDTH="0"</IFRAME>

INSTRUCTIONS FOR THE CLIENT:

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

  1. 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.
  2. 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!
  3. 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!)

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.