Expression Web Tutorial: Iframe for Beginners

<iframe> ... </iframe>

What's an iframe?

An iframe is an inline frame, which is basically like linking to a web page or embedding a web page in your own web page.   We don't use the iframe very much anymore.  The reason for this is largely due to the inaccessible nature of the iframe.

You'll see what i mean when we actually practice inserting an iframe. 

The iframe is one method one can use to embed flash videos, photo galleries, or a link to another frame-able page. 

However, do not go overboard using iframes.  And be sure to use a Doctype that will allow the iframe to validate...for instance, the iframe is valid code when used with XHTML 1.0 or HTML 4.0 Transitional Doctype, but not the Strict Doctype. 

If you use HTML 4.01 or XHTML 1.0:  You Must Use a Transitional Doctype in order to Validate the iframe.

You can also use HTML5 without any other requirements.

 

Also be aware that anything you place in the iframe my become inaccessible to a search engine and alternative web browsers, such as a screen reader.  Therefore, restrict the use of an iframe for things like flash (.swf) photo galleries or videos.

How to Use an Iframe

You can make Photo Galleries sing Deep Zoom, which is included with Expression Web 3.  You can also use PhotoShop, Fireworks, and Lightroom just to name a few.  J-Album is another good photo album creator and Google has free Picasa. 

This Tutorial Shows you HOW to insert an iframe and potentially embed some other file, like a Photo Gallery, into the web page.

Step 1:  Place your cursor on the page in the vicinity that you could like to insert the iframe.

Step 2:  Double click on the iframe tag (located in the Toolbox) to inser the tag into your page.

You should now see the following:

How to Insert a Photoshop or Flash Photo Gallery

Creating a photo gallery in Photoshop and/or lightroom is very simple.   See the help section in Photoshop for the instructions.  What I want to show you is how to insert the Photo gallery, be it flash or html, into a web page.

First, you have to locate the folder on you computer that holds all the files for the photo gallery. 

• 1.  Open Expression Web and Import the folder that holds the gallery.  Click File > Import > File
• 2.  A dialog box opens.  Click "Add Folder" because you need to import the entire folder.
• 3.  Another dialog box opens that permits you to browse your computer in order to locate the folder.  Once you do, click on it and press ok.     And ok, one more time.  Then close the import folder dialog box.  

NEXT, INSERT THE GALLERY:   Now you have a few options as to how to include the photo gallery in your site.  

• 1.  Link to it:  You can create a hyperlink to the photo gallery.   This will place the gallery on a page all by itself.    For instance, type the words Photo Gallery, then highlight those words, and click on the link icon.  Inside the insert link dialog box, find you folder with the photo gallery and click on it to open it,  then click on one of the folders until you find the index.html page inside the folder.    Link to the index.html page that's inside the folder.  
• 2.  Point and Click:  Expression Web 2, 3, and 4 allow you to insert flash easily.  When you create a photo gallery, there is a flash file inside.   After importing the entire folder, locate where you would like to place your photo gallery and click insert > media > flash.    
• 3.  Use an iframe.  Make sure you use a doctype of xhtml 1.0 Transitional, otherwise, the code created will be invalid for xhtml 1.0 Strict. Locate the iframe tag in the Toolbox under html tags. Note: You can insert a div first, and then insert the iframe inside the div.    It's optional to do so. Click and drag the iframe onto your page, or double click the iframe to insert it on your page. Click "Set Initial Page".  The hyperlink dialog box opens, again, look for the photo gallery folder, click on it, choose the index.html for your link.  Resize the iframe to the right size, or create a css style by clicking on New Style and choose iframe as your selector, and set positioning and formatting styles for the iframe.      
• 4.  Or,  you can copy   the index.html page that holds your gallery,  and paste it into your web page.    Copy the info first, and add it to your webpage's section. Then copy the section and paste it into the area of your web page you prefer.   Just don't duplicate the tag or the tag.  
• 5.   Embed flash with Javascript.  This will work for all browsers.