FrontPage Includes Tutorial
Microsoft FP Tutorial Include Page Component
Do you have sections of your web pages that provided identical
information on every page? Consistency between the pages of your
website is an important part of usability. Because of this, you
may have portions of pages that give viewers identical information.
When it comes time to update that information, unless you have
used a technique such as FrontPage Includes, this can become a time-consuming
task.
Where Can You Use FrontPage Includes?
Using Microsoft FrontPage Includes
Anytime you find yourself updating the same information on more
than one page, you likely could have saved time by using FrontPage
Includes.
- Navigation
- Copyright Notice
- Contact Information
Step by Step FrontPage Includes Tutorial
Following is a very basic tutorial to help
you understand the concept of how FrontPage Includes can be used
on your website.
STEP 1 - Open New Blank Page
Open Microsoft FrontPage. If a new page does not open
automatically, open a new page. File > New
 view
screenshot
A new column will open on the right side of the window,
click on blank page.
view
screenshot
STEP 2 - Enter New Content
In the design mode, (also known as normal) type in your business
contact information, along with copyright information.
view
screenshot
STEP 3 - Save New Page
In the menu, select File > Save As
view
screenshot
When you click on Save As, a box will open. At the top of the
box it says save in. Make sure the web where you will be using
the included information is listed there. If it is not showing
your web there, use the arrow down button to scroll to your web.
Name the page title by clicking on change title. Click on save
in the lower left hand corner of the window.
view
screenshot
STEP 4 - View HTML Coding
To get you familiar with HTML coding, take a moment to view
this page in code view.
view
screenshot
STEP 5 - Open Page Within Your Web
Open a page in your web where you would like to insert this
new information. Place your cursor on the page, exactly where
you would like to insert the new information.
view
screenshot
STEP 6 Insert Content
In the menu, click on insert > web component.
view
screenshot
Once you have selected insert web component, a new window will
open. In this new window, under component type, click on Included
Content. Under Choose a type of content, click on page. At the
bottom of the window, you may now click finish.
view
screenshot
Once you have clicked on finish, a new smaller window will
open. Click on browse.
view
screenshot
A new window will open. Browse to find the new page you just
finished making and highlight it. Click ok in the browse window.
view
screenshot
Click ok in the include page properties window.
view
screenshot
STEP 7 View Page in Design Mode (Normal)
Now look at the page where you have included the new content.
If you are in design mode (normal) and you click on this areas,
you will see a small hand holding paper. If you double click in
that area it will bring you back to the page where the included
content was made.
view
screenshot
STEP 8 View Page in Preview Mode
Look at your page where you have included the new information
in Preview mode. The will be no indication that the information
is an include.
view
screenshot
STEP 9 View Page in HTML Mode (Code)
If you were to look at the page in code view, it would show
a code that looks similar to the following:
STEP 10 View Source Code
Once you have saved the page, close FrontPage.
If you were to view the source of the page you have included
this new content on, it would look similar to the following.
Special FrontPage Includes Notes
- If you use CSS, the content you have included will take on
the styling attributes you have designated on your style sheet
once it is included on the page.
- FrontPage Server Extensions do NOT need to be installed to
make it possible to use this popular FrontPage component.
- All updates must be made on the original "include" page you
created.
GNC Web Creations - 2125 Universal City BLVD - Universal City, TX 78148 - (210) 564-9153
Copyright © 2003 - 2011 J. Walker of GNC Web Creations All Rights Reserved
|
