CHAPTER 1: (iFrames) How can I add a scroll bar in a textbox? Or how  can I embed a page in another page, thus how do iFrames work?

You can’t put a scrollbar into a textbox but you can do what you’re asking for using an HTML Snippet and iFrames embedding another page in a page.

Note: Everything is done straight out of iWeb. There’s no need for post-publish-html-editing. It’s really easy:

1) Build the page in which you want to embed the iFrame to.

1. 2) To this page add an HTML Snippet and insert the following code to create an iFrame
   

<iframe src=

"http://alyeska.altervista.org/en/iWeb_iframe_2.html"

style="width:370px; height:280px;

border-color:#990033;

border-style:solid;

border-width:10px"

scrolling="yes" >

</iframe>

1. 
   

2. 3) Make another page (same site, this way you can easily know the url of iWeb_iframe_2.html) for your formatted text in the example we will call this page “iWeb_iframe_2.html”:
   

http://alyeska.altervista.org/en/iWeb_iframe_2.html

4) Open the Inspector go to the PageTab and uncheck the “Include page in navigation menu” and “Display navigation menu” boxes. Click on layout (still in Inspector=>PageTab=>Layout) and change Content Width and height on of iWeb_iframe_2.html to fit the content.

5) In the HTML code you pasted in the snippet change the

http://alyeska.altervista.org/en/iWeb_iframe_2.html

into the url of the page you want to display in the iFrame

(http://baseurl.com/sitename/nameofthepage.html

or http://web.mac.com/username/sitename/nameofthepage.html).

Change the width and height parameters to fit iWeb_iframe_2.html. As people generally don’t like to scroll horizontally the width of the iFrame should almost fit the width of the page you display in the iFrame (sizes have to be a bit larger when a scrollbar displays).

Change the HTML color designation

As Fabini suggested color designations can be found right in iWeb.

Here's how:

1. Show color window.

2. Select "Color Palettes" (third one from left).

3. From the pop-up menu select Web Safe Colors.

4. Scroll & find color desired.

5. Make note of & type into your snippet the 6 character alpha-numeric for that color. Remember to put # in front of it.

If you prefer you could also find those codes 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

Change the number of pixel in the border-width if you want to have a larger or smaller border set it to zero if you don’t want the border

Set scrolling to “yes” if you want it, “no” if you don’t want it and “auto” to have it appearing only if needed.

Thanks to Fabini who suggested to add the code with line break which makes it easier to read and follow instructions and thanks for having me searching for the border solution and suggesting how to find color designations in iWeb itself.

How can I embed a particular part of a page in an iFrame?

(works only for pages of your own site and only when published to the web)

<iframe name="orange"

src="http://alyeska.altervista.org/Alaskadream/Index.html"

onload="window.frames['orange'].scrollTo(200,200)"

style="width:370px; height:280px;

border-color:#990033;

border-style:solid;

border-width:10px"

scrolling="yes" >

</iframe>

‘orange’ is the name of the frame. Of course you can change that.

scrollTo(200,200) is where you tell it the coordinates where to scroll to when it is loaded. Change the numbers. (200,200) are (x,y) where x is horizontal scrolling and y is vertical scrolling.

What is that good for?

For example if you want your homepage to be dynamically updated based on what other pages have on them. So, any new blog entry you write, new albums you upload, links you add, get an iframe on the homepage. That way, your homepage always shows people what is new on the site and no scroll bars are needed.

Is there a way to make the frame 'clickable' so clicking on it goes to the actual page that is being framed?

I don’t know if there’s a way to make the iframe itself being a link but you could add a link to the snippet in which you put the iframe

<a href="http://alyeska.altervista.org/Alaskadream/Index.html" target="_top">Visit this page</a>

so people would click that link and get to the page.

Or you could place a shape in front of the iframe. Go to Inspector=>Graphic Tab=>Set opacity to 0% and use the shape to link it to the page which displays in the iframe.

CHAPTER 2: (Frames) Can we have one iFrame on a page but a different page loads in depending on the link that was clicked by the visitor. What I am trying to do is have a list of newspapers and upon clicking on a name that paper's page would load in the frame then another and so on.

Note: No need to add anything to other pages. Everything is done straight out of iWeb. No need to edit HTML post-publishing.

HTML SNIPPET 1

<div style="height: 130px; width: 220px">

<SPAN STYLE="font-family: Times New Roman; font-size: 12pt">

<style type="text/css">

a {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visit {

color: #FF00FF;

text-decoration: underline;

}

</style>

<p><a href="http://alyeska.altervista.org/en/iWeb_Two_computers.html" target="Showframe" class="class1">Two computers</a><br />

<p><a href="http://alyeska.altervista.org/en/iWeb_Backup_Website.html" target="Showframe" class="class1">Backup</a>

<p><a href="http://discussions.apple.com/category.jspa?categoryID=188" target="Showframe" class="class1">Apple iWeb Discussion Forums</a>

Customizing the links:

font-family: tells which font is gonna be used for the links. Substitute it with the one that you want. Have a look at the following page to see which possibilities there are:

http://www.dev-archive.net/articles/examples/font-family.html (take parameters without spaces after < and before >)

font-size: defines the size of the font

a: refers to how the link displays normally

a:hover: refers to how the link displays when someone gets the pointer (the mouse) over it

a:visit: refers to how the link displays when it was visited

color: refers to the color, have a look at “Change the HTML color designation” in Chapter 1 on this page.

text-decoration: refers to the underlining of the link setting it to none will result in no underlining, setting it to underline will display the line instead.

If you want to have an image displaying instead of the text for the links simply replace the text with:

<img src="urloftheimage">

urloftheimage: Put all the images you want to use for menus in a folder on your desktop. Upload the folder containing your images to your server (example: create a Folder named MenuImages.

-For .Mac go to the Finder menu and select Go/iDisk/My iDisk/ or hit Schift+Command(Apple)+i and then go to /Web/Sites/. Drop your MenuImages folder into the Sites folder.

Entering: http://web.mac.com/username/MenuImages/filename.jpg in your browser should bring up this file.

-If you're publishing to folder put it in the main location on your server using an ftp program

Entering: http://yourbaseurl.com/MenuImages/filename.jpg in your browser should bring up this file.

HTML SNIPPET 2

<iframe

name="Showframe" src="http://alyeska.altervista.org/en/iWeb_FAQ.html"

style="width:650px; height:800px;">

</iframe>

Example Follows...

1. Two computers
   

   Backup

   Apple iWeb Discussion Forums

    
   

Visit the YouTube FAQ for another use of Frames.

We would like you to give us feedback on this page by commenting here. Tell us if it was helpful. If it wasn’t tell us why. If you think something is missing tell us what.

If you have a question please make sure it is relevant to the content of the page. Look through our FAQs and look where it fits best. If you can't find any FAQ on the topic post on the main page of our FAQs. Please do not post your question to the main page if there's a relevant FAQ. However we recommend you to post questions to the AppleDiscussionForum for iWeb.

Thank you.