Expression Web 2 Tutorial: How to use an iframe
The iframe is one method one can use to embed flash videos, photo galleries, or a link to another frame-able page. Iframe is short for Inline Frame.
NOTE: <iframe></iframe> is not valid if you try to use it with a Strict Doctype. Therefore, you will need to make sure the page that has the iframe has a Transitional Doctype. You can use HTML 4.01 or XHTML 1.0, just be sure to choose a transitional doctype.
Embed Flash Photo Gallery or Flash Video
1. Import the folder containing the Flash Video and files. Typically, this folder will have 4 different files that are needed to make the video work properly.
You will link to one of those files inside the folder.
To Import: Click FILE >IMPORT > file. The click "add folder". A box opens, look for the folder to import.
Optional way to import a folder or a file: Locate your folder on your PC by clicking the Start Menu, MY Documents, then look for your folder. Click and drag the folder into the Folders List in Expression Web.
Next: Place a div on your page > then double click the Inline Frame icon in the Toolbox > HTML Tags. This places the iframe into your div.
NEXT: Click new style > give it an id selector > iframe (this is an tag selector)> place the style on an existing style sheet, etc. Click the checkbox to apply to document.
Position: Give it a width and height, a border, margins, and click ok. to the location and size, etc ...you would like. Experiment. Once you set the Initial page, see below, then we will style the div that contains the iframe.
Next, click on "Set Initial Page". This will open the
Hyperlink dialog box.
Look for the folder that holds
your Flash video or photo gallery, click on the folder to open it (you are still inside the hyperlink dialog box). Look for the file that has the ending of .htm or .html OR it may be index.htm. Don't confuse this index.htm with your home page of your website. They are not the same.
Click Ok once you found and chose the .htm or .html file as your link.
Now, the iframe is modifiable using CSS Styles as long as you have not moved the iframe with your cursor.
STYLE the div: Click New Style, name the div something like #box1.
OR....
You can copy and paste the styles below. Paste them on an external style sheet that is linked to your web page.
iframe {
border: 5px outset #000000;
width: 700px;
height: 770px;
margin: 20px 100px 20px 100px;
}
#box1 {
background-color: #719171;
width: 900px;
height: 100%;
margin: 0px auto 0px auto;
}
Click here to see Example of the iframe