|
Site Navigation
Day One
Day Two
Day Three
Day Four
We use and recommend
for your on-line transactions
| |
Hands On
Practice - Page Header
The top of the page called the header. In
the web sites we are designing in this class, this area is one of the Shared
Borders. It could also be designed using a Layout cell.
Web Site & Company Identification Information
Most be sites will display company and web site identity information in the top
border area of the site. This is similar in concept and purpose to the
information you would find at the top of a sheet of letterhead papeItems to
include here are:
-
Company or Organization Name
-
Logo
-
Web Site Name
-
Page Banner with page name or tile.
-
Navigation buttons or links
Anchoring Design Elements with a Table
|
Using tables in FrontPage will be covered in more depth later in this
class. For now lets say that to keep the logo, title text, and
other elements in your border from moving around when the displayed page
is resized by different browsers, it can be useful to insert this
information into a table. |
figure 1 |
-
Position your cursor so it is blinking in the top Shared
Border area. If the Page Banner is
displayed, position your blinking cursor to the left of the banner,
and press Enter once to add a line space.
-
On the Standard Toolbar, find the
Insert Table icon. (figure 1)
-
Click on the icon, and select the number of rows and columns you
want. For this exercise, select a table one row by three
columns. (figure 2)
-
Highlight the entire table by moving the cursor to the left edge of
the table until it turns into a right arrow, then left
click with your mouse. (figure 3)
-
Click on the Centering icon on the Formatting
Toolbar. This will center the table in the Shared
Border, and the text and pictures in the three cells. (figure 4)
-
Click on the Borders icon on the Formatting
Toolbar. Select the No border option to remove the
border lines from the table. (figure 5)
-
Click inside the left cell. In the left cell, we will add your
logo. Since this involves adding a picture from a file, which
we will discuss later, we will simply type Add Logo in
the left cell.
-
Click inside the middle cell. Type the title information for
your web site. This would be your company or organization
name, or the name of your web site. Use the text formatting
buttons on the Formatting Toolbar to change the font size and style,
and to add bold, italics or underlining. (figure 6)
figure 6
-
In
the right cell, you might want to add another picture, or your
telephone number, or a slogan. If you are unsure what to
include now, just type Future Content in the space to
hold it for later.
|
figure 2 |
|
figure 3 |
|
figure 4 |
|
figure 5 |
Page Banners
A page banner is a page title area usually found at the top of your web page.
In a Shared Border area, the Page Banner is the only element that will be
different from page to page. While the design element will be the same,
the text content of each banner is unique to each page. This allows you to
-
 Position
your cursor below the table we added in the step above.
-
If your banner is already displayed, right click and select Page
Banner Properties from the context menu. If there is no Page
Banner, go to Insert, Page Banner.
-
The Page banner dialog box opens,
and you can choose to show only text, or a picture based on your theme. You can
enter or edit the text displayed inside the Page Banner in the provided box.
Type Home over the index.htm in the dialog box.
-
You can select whether
the Banner will be displayed in a Picture or as Text Only.
-
A quick way to get back to the
page banner dialog box is by Right Clicking on the Page banner, and selecting
Page Banner Properties from the Context Menu.
 If
you make changes to your Page Banner on one page,
and the change shows up on every other page, the reason is you accidentally
deleted the Page Banner block from your site. this happens when you
try to edit text directly in the Page Banner, rather than right clicking to
open the Page Banner Properties dialog. Fix by selecting Insert,
Page Banner from the menu.
Navigation Bars
If you had the Include Navigation Buttons check box selected when
we added Shared Borders, there will be a text placeholder for add them in the
top border. We will add this feature in a later exercise.
Page Footer
The Page Footer usually contains information about the author of the web site,
copyright information if appropriate, the date the site was last updates, and an
e-mail hyperlink to the webmaster. We will cover the hyperlink in a later
section.
|
To
insert an automatic update date:
-
Position your insertion point in the bottom shared border area.
-
Click on the Centering button on the Formatting
toolbar.
-
Select Insert, Date and Time.
-
Accept the defaults, unless you want to change the date format.
Click OK.
-
This will insert a date into the bottom border. Just edit the
leading text to say "This web site was last updated on 7/24/2006."
-
Go ahead and add whatever other text you want to include here.
See the bottom of this page for guidance.
|
|
|
 |
|
