Designing Your Website and Adding Elements
There are several things to consider when
designing a website. The first and most important thing to remember
is to keep it simple, easy to navigate, and download time to a
minimum – 8 seconds or less. Use graphics with discretion, because they
increase your download time, insert navigational links, and create a
home page that is attractive and informative.
The appearance of your home page can be the deciding factor as to
whether a visitor will remain on your site or move on to another
site.
Web Component
A web component page is a way to add
navigational buttons, headers, contact information, and logos to all
or selected pages in your website. If you make a change to the web
component page,
FrontPage automatically updates all pages for you. A web component
page also prevents the loss of navigational links if FrontPage
extensions are lost or corrupted.
You can create
numerous web component pages and insert them into the same web page.
For example, you may have a banner, navigational bar, and contact
information on a web page that are really three separate web
component pages. You can create a template using web components
pages and when your update information on the web component page,
the template and all pages using the template are automatically
updated.
You can create a
web component page by opening a new page and adding any text, logos,
and navigational links, that you want to appear on all or selected
pages. Save the web component page as a regular web page
(.htm). Example: navbuttons.htm.
|
Home |
FrontPage |
Tips |
Accessibility |
Resource Links |
To insert
the web component page, open a new page,
position the cursor where you want the navigational bar to appear,
and click Insert and Web Component.
A dialog box
will appear. On the left side of the box, click on
Component
Type and select
Included
Content, and on the
right side of the box, click on Choose
Type of
Content
and select Page. Click Finish. An
Include
Page
Properties dialog box will appear. Browse for the
location of the navbuttons.htm file and click
OK.
Cascading Style Sheets
Cascading style sheets provide a convenient way
to uniformly format all or selected web pages. To ensure that all
your pages are uniformly formatted, create a style sheet with
formatting codes or select a pre-designed style sheet and apply the
style sheet to your web pages. When a change is made to the original
style sheet, FrontPage automatically updates all pages using
the style sheet.
FrontPage offers several pre-formatted style
sheet templates and gives a brief description of each style sheet. To use
a style sheet template, click on File, New, Page, and
Style Sheets -- select a style sheet and click OK.
Formatting codes will be added to your page. Now save the formatted
page as a style sheet. Click on File and Save As. In
the Save as type drop-down box, select HyperText Style
Sheet. FrontPage will add the style sheet extension .css
to your file name. Now apply the style sheet to all or selected
pages within your website.
 
Linking To A Style Sheet
To link to a cascading style sheet in your web,
open the page you want to link to the style sheet. On the Format menu, click
Style Sheet Links.
Click Add,
and then in the Select Hyperlink dialog box, browse for the style sheet,
and click OK.
To link all of the pages in your web to the selected style sheet in
the URL
list, click All Pages.
To remove a style sheet from the URL list, select it
and click Remove.
Templates
Using a
template ensures continuity, allows required logos, content owner
information, and hot links to appear on all or selected pages, but
it has its drawbacks. One major drawback is that every time you
make a change to the template, you have to manually update
all your other template pages. Template pages are not
automatically updated. This can be very time-consuming if you
have numerous pages in your website.
You can create your own template, import a
template, or use a pre-designed template. FrontPage has many useful
templates to choose from such as forms, search pages, bibliography,
frame, and style sheets.
Creating Your Own Template
To
create your own template, start with a new page and add text,
formatting, links, logos, and all required web page information that
you want to have appear on all or selected page. Now save the page as a
template by clicking on File and Save As. In the
Save as type drop-down box, select FrontPage Template
instead of Web Pages -- the extension .tem will
appear at the end of the file name instead of .htm.
When you want to use the template
that you have created, simply open it, type in your information and
then resave the template
page as a web page. Click File and Save As, give it a new
name, and save it as a web page (.htm). If you do not resave the page
as a web page, you will overwrite and destroy your original
template.
When you want to use a pre-designed template,
click File, New, Page and Page Templates --select a
template. When you get ready to save the page, click File,
Save As, give it a new name, and save it as a web pages
(.htm).
Importing a Template
If you want to import and use a
existing template,
begin by saving it to your desktop. Here is an example of a good
template, created in FrontPage by the University of Maine
Cooperative Extension, that contains text, formatting, links, logos, and required
web page information.
Open FrontPage and click on File and
Import. A dialog box will appear – click on Add
File.
A second dialog box will appear – browse for the URL of the template
and click Open. A third dialog box will appear with the
template’s URL, click OK and FrontPage will automatically
import the file -- it should now appear in your Folder List.
If you need to
remove a file you have imported, click on the Remove
button. If you want to import a folder instead of a single file,
click on Add Folder
instead of Add File.
Themes
FrontPage has many pre-designed themes that you
can use on all or selected pages --click Format and Themes.
Click a theme, in the left-hand box, to preview it and then click
OK to select it.
You can also
modify a theme by selecting or deselecting the Active graphics
and/or the Background picture box or by making your own
modifications. Once you have modified a theme, click Save As
and an Enter New Theme Title dialog box will appear. Give
your new theme a name and click OK to save it. It should now
appear in the theme list and allow you to select and use it.
If you do not
want to use a theme on a selected page, click on the No Theme
option for that page.
Please note that graphics in these web
page templates do not contain alternative text and therefore
do not meet accessibility standards.
Shared Borders
When you
use shared borders, you are creating content information, pictures,
logos, and/or hot links that will appear on all or selected pages.
A good thing about using a shared border is that FrontPage automatically
updates changes so that you do not have to
do it manually.
A problem with using shared borders is that if FrontPage extensions
are lost or corrupted, you will lose navigational links to other pages,
until the problem is resolved.
If you
use navigational links in your shared border, do not apply the
shared border to your home page - just add navigational
links to your home page, then if
FrontPage extensions get lost or corrupt, people can still navigate
from you home page
To add a
shared border(s), click on Format, Shared Borders,
All Pages and select either Top, Bottom,
Left or Right border(s) and click OK.
A box will appear with the following comment:
This border appears in all pages in your Web. Replace this
comment with your own content. Replace the comment with
pictures, logos, and/or navigational buttons and then save your
page.
Shared border pages reside in the
_private folder. If you want to make a change to information in
the shared border, you can do so by clicking in the
shared border box, making necessary changes, and then resaving the
page. You can also open the top, bottom, left, or
right
border page in the _private folder and make changes. Once changes have been made and
saved, all pages using the shared border will automatically be
updated.
If you have selected information to appear on
all pages but don’t want a certain page to contain the information,
select Format, Shared Border, and deselect the
top, bottom, left or right border for
the Current Page Only. If you select all pages
by accident, you will lose all your shared border information, so
pay attention to your selections.
Frames
Frames are very appealing to users because they
allow certain information to remain constant on a page while other
information changes. The problem with using frames is that they are
not supported by many older browsers and can take a long time to
download. If you know your audience and they are technologically
advanced with fast Web connections, then using frames is a great
way to produce eye-appealing websites.
FrontPage offers several frame page templates
to choose from with a description of each page. Click File,
New,
Page, and Frame Pages –select a frame page. When your
frame page opens, click on either Set Initial Page or
New Page to select the page(s) you want to appear in each section of
your frame. The main frame is usually where content information
changes. You can preview your frame pages by using a browser or
selecting the preview tab.
You will also need to create a page that
will appear when the user's browser does not support frames. Select
the No Frames option, remove the text that appears on
the page, select Insert, File, and browse for the file
page that will appear in place of the frames page. Save the
page.
Marquees
A Marquee is a dynamic element that will display a scrolling text
message continuously across your page. It is not a good idea to use
marquee elements because they are not supported by all browsers and
are not readable by screen readers, but if you want to
include a Marquee on your page, click Insert, Web
Component, Dynamic Element, and Marquee.
Type your message, set your other element properties, and click
OK.
Always preview your pages in several web
browsers such as Web Explorer, Netscape, and Firefox because some web components and elements
work fine in Web Explorer but not in
Netscape or Firefox.
|
