Home » Tutorials » Dreamweaver
| Note: This tutorial is done by Macromedia
Dreamweaver MX. |
If you don't know what IFrame is, it is basically a part of the HTML page where it displays data (text and image) which is stored in a separate page. Below is a sample of an iframe.
|
Let's start our tutorial. First make a new page and save
it as iframe.html Give it a backgroung color of #999999.
Then go to the source code of the page.
and paste this code between your <body> tags.
<IFRAME SRC="news.html"
FRAMEBORDER="0" SCROLLING="auto" WIDTH="446"
HEIGHT="120" TITLE="Ades News">
News </IFRAME>
|
|
|
Let's go through the code:
1. news.html
- This is the page where your actual news will be placed.
2. News
- People with the browsers that don't support I-Frames will
see this word. (IE 3.0 and above, NS6 and Opera 4 supports
I-Frames).
3. <IFRAME SRC="news.html"
- This is the frame source which points to news.html FRAMEBORDER="0"
- border of the frame is set to 0 SCROLLING="auto"
- It will scroll if the content is too big for the area.
WIDTH="446" HEIGHT="120"
TITLE="Ades News"> You can specify the
desired height and width yourself.
</IFRAME> Closing the I-Frame
Go ahead and preview your page by pressing F12 and you
should see this [
click here ]
|
Now go ahead and create your news page. Create news.html
and fill it with your news text. Then save it in the same
folder as the iframe.html.
So here is what you should have after that [ click
here ]
|
I can guess what you are thinking, "mine does not look
like that neat???" Well that is easy, you need to apply
css style in your news.html page, then it will look much
better.
You might want to check my tutorial on "Defining
Page Scrollbar Styles" on how to apply
CSS to the page's scrollbar or check "How to Remove Horizontal Scrollbar for IE" if you are having a problem with horizontal scrollbars.
Good Luck!
 |
Related Dreamweaver Tutorials |
| |
 |
How to backup Dreamweaver New
Backup your templates, extensions, behaviors...etc |
| |
 |
Creating CSS in Dreamweaver MX 2004
Learn how to create and apply CSS in Dreamweaver |
| |
 |
Create Rollover/MouseOver effect
Rollover effect made easy with Dreamweaver |
| |
 |
Opening a Fixed Size Window
Learn how to open a window in a fixed size |
| |
 |
Redirection based on Browser Type
Learn how to make redirection script with Dreamweaver |
| |
|
|
|
 |
|
