iWeb FAQ - iFrames, TextBoxes with scrollbars (and “Frames”)

iWebFAQ.org

 

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 


Chapter 1: TextBox with scrollbars (iFrames)

1.1 Customizing the look of the iFrame

1.2 Embed only a particular part of a page

1.3 Is there a way to make the iFrame clickable?

Chapter 2: TextBox with scrollbars and multiple pages loading in it (kind of Frames)

2.1 Building the menu

2.2 Building the area where the content displays

2.3 Example

Chapter 3: TextBox with vertical scrollbars without using iFrames



Chapter 1: TextBox with scrollbars (iFrames)


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


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.






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://iwebfaq.org/site/iWeb_iframe_2.html"

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

border-width:0px;

border-color:#990033;

border-style:solid;"

scrolling="auto" >

</iframe>


  1. 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://iwebfaq.org/site/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://iwebfaq.org/site/iWeb_iframe_2.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).


1.1 Customizing the look of the iFrame


  1. 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 fit the width of the page you display in the iFrame (sizes have to be a bit larger when a scrollbar displays).


  1. 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.


  1. Change the HTML color designation of the border


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


  1. For different border-styles have a look at the following page:

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style


  1. 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.


1.2 Embed only a particular part of a page


<html>

<head>

<title>

</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >

<style type="text/css">

#outerdiv

{

width:350px;

height:500px;

overflow:hidden;

position:relative;

}


#inneriframe

{

position:absolute;

top:-1150px;

left:-660px;

width:1280px;

height:2000px;

}

</style>

</head>

<body>

<div id='outerdiv'>

<iframe src="http://theurltothepage" id='inneriframe' scrolling=no></iframe>

</div>

</body>

</html>


Copy the code above and paste it in an HTML Snippet


width:350px;

height:500px;

Define width and height of the iFrame


top:-1150px;

left:-660px;

Define which part of the page will be displayed in the iFrame


Replace http://theurltothepage with URL to the page you want to display in the iFrame.


What is that good for?


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


1.3 Is there a way to make the iFrame clickable?


I don’t know if there’s a way to make the iFrame being a link. But I found two other solutions:


You could add a link to the Snippet in which you put the iframe

<a href="http://iwebfaq.org/site/Welcome.html" target="_top">Visit this page</a>

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


Or (better) 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: TextBox with scrollbars and multiple pages loading in it (kind of Frames)


Note: Everything is done straight out of iWeb. There’s no need for post-publish-html-editing. And there’s no need to add anything to the other pages.


2.1 Building the menu


HTML SNIPPET 1


<div style="width:120px; font-family: Trebuchet MS; font-size: 12px; color:#000000;">

<style type="text/css">

a:link {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visited {

color: #0000FF;

text-decoration: underline;

}

</style>

<a href="http://iwebfaq.org/site/iWeb_iframe_2.html" target="Showframe" class="class1">The clochard The vagabond</a><br>

<a href="http://iwebfaq.org/site/iWeb_iframe_3.html" target="Showframe" class="class1">The sun only shines</a><br>

<a href="http://iwebfaq.org/site/iWeb_iframe_4.html" target="Showframe" class="class1">She&#8217;s a princess</a><br>

</div>


Customizing the links:


  1. width:120px defines the width of the menu


  1. 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 >)


  1. font-size: defines the size of the font


  1. Link styles:


a:link 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:visited 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.6 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.


  1. If you want to have the links displaying horizontally instead of vertically all you have to do is remove the <br> tag at the end of the lines. You may also want to add “ - “ to increase the space between the links.


  1. 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.


Put it in the main location on your server using an FTP application (If you don't know what the root is or how this is done read it here)

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


2.2 Building the area where the content displays


HTML SNIPPET 2


<iframe

name="Showframe"

src="http://iwebfaq.org/site/iWeb_iframe_2.html"

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

border-width:0px">

</iframe>


2.3 Example


Example Follows... Snippet 1:


    1. The clochard The vagabond
      The sun only shines
      She’s a princess

     

Click on the links and see how Snippet 2 changes:






































Chapter 3: TextBox with vertical scrollbars without using iFrames


iFrames are not search engines friendly. iFrames always involve having two pages: one containing the iFrame and one displaying in the iFrame. Search engines see them as completely independent pages. So the content displaying in the iFrame is not part of the page containing the iFrame. Here I will tell you how to have a TextBox with scrollbars without using an iFrame.


How to have a TextBox with scrollbars without using iFrames is described in my iWebFAQ.org E-Book (sample)




This FAQ is also discussed in my iWebFAQ.org E-Book (sample)


iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s an EBookStoreToday.com company. It’s presented by Cédric Giger and hosted by HostGator.


Thank you for visiting and supporting my website,

- Cédric -


 

 

Share/Bookmark

Share/Bookmark

Can I have a TextBox with scrollbars? Can I have a TextBox with scrollbars and multiple pages loading in it? Is there a way without using iFrames?