Iframe tutorial
This tutorial will explain how to create iframes within a webpage built in Dreamweaver and how to alter their display by applying CSS.
Firstly, it might make it easier to realise that the iframe is only a small window displaying a completely seperate page. To show this, click here to see the page being displayed in the iframe.
Create a new site folder in Dreamweaver containing two pages called 'index.htm' and 'content.htm'.
In 'content.htm' go into Modify : Page Properties and put a '0' in Top
Margin, Left Margin, Margin Width and Margin Height so as the text starts
right in the top left corner which does not look good on a standard page
but looks fine when the page is displayed within an iframe. Any margins
or alteration to the appearance can be made using CSS later.
Create a table without any border or margin and make it 310px wide and leave the height empty. This allows the page to be displayed within the frame without the need for a horizontal scrollbar as the frame on the index page will be a similar size. Fill the table with plenty text soas when it's in the frame, the vertical scrollbar will be used.
Open up index.htm and have the page showing both design & code view
and don't worry if your not too confident with code because (in MX) you're
prompted throughout. If your version of Dreamweaver doesn't prompt you,
just copy / paste the code and adjust according to your requirement.
In the <body> section, start a tag by a '<' and a prompt box will appear listing all the possible tags. Scroll down to the 'iframe' tag as shown and double click to insert it. Press the spacebar and another prompt box appears where you can select the source of the iframes content (in this case content.htm), the height (150), width (327), frameborder (0) and the scrolling to 'auto'.
Close the angle brackets and the closing tag for the iframe section automatically slots into place where you can place in some text for those whose browsers don't support iframes. It's also handy as a referance point as there is no indication of an iframe present in Dreamweaver until the page is viewed in browser.
If all's going according to plan you should have what's below in your <body> section.
Save your work, preview in browser and this is what you should have.
I'm not going into the workings of CSS here as it's far to big an area
to casually touch on but if you wish to know more about it, try here
for some FREE video training at an easy pace. Post any questions you have
on the forum - they won't bite!
I created a custom style sheet called '.style1.css' with a dark blue verdana font, pale blue background and a 6 pixel padding and this is what it looks like viewed in browser. Note the pale blue background colour doesn't cover the whole page, just the table that contains the text. This doesn't matter as the size of the iframe is only the size of the table so no white displayed.
Save 'content.htm' and look at index.htm in browser.
And that's it, an iframe with a style sheet attached that can be changed again & again & again depending on what's required.