Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Footer - using an iFrame

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

A footer is the section at the bottom of a website page
This method uses a web studio page that loads into an iFrame for the footer
That allows you to use one "footer" page for the entire website

WHAT IS AN iFRAME
An iFrame (inline frame) is an HTML doucument embeded inside another HTML document
In Web Studio an HTML document is a single page, so we can load a page into another page
Since we are using two pages in Web Studio you preview the entire site to see the iFrame content

An example is the footer at the bottom of all the WSnext pages

The Footer Page

Add a page to your site like you always do and name it footer

If you use a master page right click on the footer page in the Page List and UNCHECK
Include the Master Page on this Page

Place this in the HEAD of the footer page

In Insert Page HTML Copy/Paste this code in the HEAD

<BASE TARGET="_parent">

Press "OK"
to save

Placing the content on the footer page

Keep everything you put on the footer page to the top
In the next step we'll use a height that starts from the top of that page
You can use Web Studio for the footer page color or to add a background image

Tip for finding the height of the footer page

To find the height of your footer page you can place any image (you can delete it later)
put it at the bottom of the content where you want the footer to stop then double click on it
in the dialogue box that pops up look for "bottom" that is the height you can use

On all the pages you want a Footer

Place this division in START OF BODY of each page you want a footer

This is the iFrame the footer page loads into and a division so we can position it on yor page

280 - change that to the height of your footer

On the HTML tab in Insert Page HTML
copy/paste this into
Start of Body

<div id="footer">
<iframe id="myfooter" src="footer.html" name="myfooter" scrolling="no" width="100%" height="280" frameborder="0"></iframe>
</div>

Press "OK"
to save

Place this style to position it in HEAD of each page you want a footer

In Insert Page HTML Copy/Paste this code in the HEAD

<style type="text/css">
/* === FOOTER === */
#footer {position:absolute; left:0px; width:100%; min-width: 1003px;
top:2000px; height:280px; z-index:0;
</style>

Press "OK"
to save

280 - change that to the height of your footer
2000 - that is how down the page your footer starts

Tip for finding the top position for the footer on your page

To find how far down you want your footer top to start you can place any image (you can delete it later)
place it so the bottom of the image is where you want your footer then double click on it
in the dialogue box that pops up look for "bottom" that is the number you can use to replace 2000 with

Preview the entire site to see the footer

Because the iframe is using another page you have to preview the entire site to see it so
press F5 or on the Home tab in Preview select Website

You can still just preview one page at a time while you are working on your site
a box that says can't load page will be shown in the same place instead of your footer

Thank-you

Text effects in Web Studio 5 - Footer using an iFrame - by Web Studio Next

aaaaaaaaaaaaiii