RapidWeaver FAQ - iFrame
How can I add an iFrame to RapidWeaver?
That’s really easy.
CHAPTER 1: Adding an iFrame to any page you want
CHAPTER 2: Having an iFrame-only page
CHAPTER 3: Having an iFrame and a menu from which one chooses what to display in the iFrame
3.1 How to build the menu
3.2 How to build the area where the page will display
3.3 Example
CHAPTER 1: Adding an iFrame to any page you want
1) Build the page in which you want to embed the iFrame to.
2) To this page add/paste the following code where you want the iFrame to appear<iframe src="http://iFrameContent.html"
style="width:370px; height:280px;
border-width:0px;
border-color:#990033;
border-style:solid;"
scrolling="auto" >
</iframe>
3) If you want to add an external page skip this step. If you want to iFrame one of your pages make another page (same site, this way you can easily know the url of it) we will call this page “iFrameContent.html”:
http:/yourdomain/site/iFrameContent.html
Open Page Info and uncheck the “Show in menu” box.
4) In the HTML code change the
http://iFrameContent.html
into the url of the page you want to display in the iFrame
(http://baseurl.com/sitename/pagename.html
or http://web.me.com/username/sitename/pagename.html).
Once you added the code to RapidWeaver select it all and go to “< >” (Apply HTML markup) and choose “Code”.
5) Customizing the iFrame
• Change the width and height parameters to fit iFrameContent.html. As people generally don’t like to scroll horizontally the width of the iFrame should fit the width of the page you display in the iFrame (sizes have to be a bit larger when a scrollbar displays).
• Change the number of pixel in the border-width if you want a border to display and have it larger or smaller. If set to zero no border will display.
• Change the HTML color designation of the border
Color designations can be found on the following page:
http://www.w3schools.com/html/html_colors.asp
• For different border-styles have a look at the following page:
http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style
• Set scrolling to “yes” if you want it, “no” if you don’t want it and “auto” to have it appearing only if needed.
CHAPTER 2: Having an iFrame-only page
If you want to have an iFrame-only page you can use RapidWeaver’s iFrame page. Add => iFrame => Page Info => Page and enter the url of the page you want to iFrame and the size (in pixels or percentage).
CHAPTER 3: Having an iFrame and a menu from which one chooses what to display in the iFrame
This is done out of two parts:
- The first part is the menu where people can choose which page they would like to look at
- The second part is where the page will display
3.1 How to build the menu<a href="Here goes the url of the page" target="Showframe" class="class1">Here the title of the page or link</a>
<a href="http://iwebfaq.org/site/iWeb_iframe_2.html" target="Showframe" class="class1">The clochard The vagabond</a>
<a href="http://iwebfaq.org/site/iWeb_iframe_3.html" target="Showframe" class="class1">The sun only shines</a>
<a href="http://iwebfaq.org/site/iWeb_iframe_4.html" target="Showframe" class="class1">She’s a princess</a>
Just copy and paste the links into the menu and type in a title of the page or link.
Once you added the code to RapidWeaver select it all and go to “< >” (Apply HTML markup) and choose “Code”.
3.2 How to build the area where the page will display<iframe name="Showframe" src="url of the the page displaying when loading" style="width:500px; height:800px;" scrolling="auto" class="class1"></iframe>
<iframe name="Showframe" src="http://iwebfaq.org/site/iWeb_iframe_2.html" style="width:450px; height:600px;" scrolling="auto" class="class1"></iframe>
Change the link in it to the link of the page you want to display when the page loads.
Changing the width and/or height parameters of it will change the size of the page displaying.
Once you added the code to RapidWeaver select it all and go to “< >” (Apply HTML markup) and choose “Code”.
3.3 Example
Here’s how it will look on your page.
Choose a poem:
The clochard The vagabond
The sun only shines
She’s a princess
RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
It’s presented by Cédric and hosted by HostExcellence.com
I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.
Thank you for visiting and supporting my website.
- Cédric -