 eXPerience
Current version: 2.3
Product last updated: 9/9/02
Installation
You probably have an .exe file that you downloaded. This is a program
that will install the template files into the correct places on your
computer.
First, make sure that FrontPage is closed.
To run the installer, double-click on the icon. Some dialog boxes
will pop up and take you through the installation process. If it seems
to go okay, you may then create a new web! Skip the rest of these
installation instructions to find out how to use the template.
If the installation fails, there are a few things you may try. First,
if the installer is on your desktop, create a new folder on your desktop
and drag the icon into the new folder, then try running it from there.
If this doesn't work, you can try extracting the files and placing them
manually. Right-click on the installer and select "Extract to folder..."
Extract to this temporary directory. Note: If you are using a
non-English version, please see this
info page at PixelMill.
In the fp2000 folder you'll find three folders called Pages, Themes,
and Webs.
Open the Themes folder and there should be another folder called
experience. Copy this folder to this location:
C:/Program Files/Common Files/Microsoft Shared/Themes
In the Webs folder there should be another folder called
experience.tem.
Copy this folder to this location:
C:/Program Files/Microsoft Office/Templates/1033/Webs
If you are unable to extract the files, then
contact support.
Using the Template - Basics
-
After installation, open FrontPage.
-
In FP2002, go to File > New > Page or Web. (In FP2000, go to
File > New > Web.) In FP2002, click on "Web Site Templates"
in the right column.
-
Choose the eXPerience template from your
list of templates.
-
In the right column, make sure that the location of your new
web is correct. The usual default is a subfolder inside of
your "My Webs" folder. You may choose a different name for
the subfolder. You may also create a new web directly on
your server by typing in the URL of your web site.
-
Click OK and FrontPage will make your new web.
-
When FrontPage is finished working, you should see the pages
of your new web site in the Folder List. (If you can't see
the Folder List, go to View > Folder List.) Double-click on
any of these pages to open it and edit it.
-
While you are working on the web site, go to File > Preview
in Browser to see your pages as they will appear in a
browser. Try not to depend on the "Preview" tab in
FrontPage. You may leave the browser window open and refresh
it as you make and save changes.
-
To make more pages, simply take existing pages and go
to File > Save As. Save the page as a new file name, and
click "Change" to change the page title. (Notes: The page
title is what shows up in your link bars and page banners.
The file name should NOT have spaces or special characters
in the name, but should look like either mynewpage.htm or
my_new_page.htm.) Then, switch to Navigation View and drag
the page into your navigation structure to add the page to
the correct link bars. (Learn
more.)
-
To delete pages, simply right-click the page in your
folder list and choose "delete."
- To publish your web site, go to File > Publish Web. Type
in the location of your server, for example, http://www.yoursite.com.
If you want to publish your web temporarily and "hide" it behind
your existing site, publish it to a subfolder of your web, for
example, http://www.yoursite.com/testfolder. Click Publish. You may
need to enter your username and password. See our
Server Issues article if after
publishing, some things don't look right on your published site.
Using the Template - Specifics
Below are some specific issues and questions that you may have about
the eXPerience web template. Please also look in our support index for answers
to more general questions. We've tried to organize the support issues in
a "top-down" format -- i.e., starting with the index page and the very
top of the page, then continuing throughout the rest of the web site. If
you find an issue that you think should be on this page or in our
support area, please let us know! Search engine text
This area allows you to put keyword-rich words at the very top of
your page to get a higher ranking in some search engines. You will still
need to add meta keyword tags to your pages. Text Links area
(black)
You may insert your own hyperlinks if you wish. When you do so, you
will have to change the font color to be white. It's probably easiest to
select each link and change the font color manually; if you're
comfortable with style sheets, you may create your own styles. You may
also create a "global level" navigation bar in this area. Spinning
globe animation
This is an embedded Flash movie animation. You cannot change the
animation (see our additional
Components or request custom work if you want a different color). If
you move your pages into subfolders, the globe may disappear. You will
need to click on the "empty" area and go into HTML and edit the
reference to the movie. The HTML code will look something like this:
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" CODEBASE="http://download..."
WIDTH="55" HEIGHT="50">
<PARAM NAME="movie" VALUE="images/rotatingglobe1.swf">
<PARAM NAME="quality" VALUE="medium">
<PARAM NAME="bgcolor" VALUE="#FFFFFF">
<EMBED SRC="images/rotatingglobe1.swf" QUALITY="medium" BGCOLOR="#FFFFFF"
WIDTH="55" HEIGHT="50" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/...>
</EMBED></OBJECT> Change the locations in the PARAM and EMBED tags as
necessary. For example, if your new page is within a subfolder of the
main folder, then edit the location to be
"../images/rotatingglobe1.swf."
The "your logo here" image may be replaced with your own logo.
The
easiest way to do this is to replace the image with one that is the same
dimension (239x55 pixels) by dragging your image file
(named "yourlogohere.jpg") into the images folder of your web and replacing the existing one. This
will replace the image across your web site. If your logo file has
different dimensions, you will have to edit each page. The most
time-efficient way to do this is to: Select all the pages in your folder
list, right-click on the select files, and choose Open to open all the
page. On the first page, delete the "yourlogohere" image, add your image
and save the page, then click on the image and hit Ctrl-C to copy it.
Then, go into each of your pages, click on the old yourlogohere image
and hit Ctrl-V to paste in your new logo. You may either save and close
your pages as you go, or keep them open and go to File > Save All to
save all of them at once.
The template includes a "yourlogohere_blank.gif" and Photoshop
file if you wish to use these to create your own logo.
Home, Search, FAQ, Contact, Site Map icons
The Home, Contact, and Map icons are specially-made images with a
Windows XP look and feel. You may delete the buttons that you don't want to use
(you must edit each page).
Horizontal Navigation Bar
The horizontal link bar displays the "Child pages under home" in
additional to the Home page. You may have up to four links on this bar so
that they all fit on the page. (Any more and the row of buttons will
break into two lines, messing up the table format.) If you want, you may
change this link bar to a different kind of link bar, or create a custom
link bar. Our suggested use is to use these links for "child pages under
home."
Vertical Navigation Bar
The link bar currently displays your "Child pages under Home,"
but we advise that you change this to show sub-pages. For example, if
you create a Press page and Privacy Policy page that you want to list
under the "About Us" page, drag your two new pages under "About Us" in
the navigation structure. Then, change the vertical bar on About Us to
"child pages," and change the vertical bar on Press and Privacy to "same
level" pages.
If
you are unfamiliar with how FrontPage nav bars work, please visit this
tutorial on Using Navigation View.
You can then learn how to edit the buttons (changing the names, adding
more buttons, etc.) in our tutorial on editing link
bars. Page Title
On every page, there is a line of text with
the page title. This is a
FrontPage-generated component. You can change the text by changing the
page title in your Navigation View. To learn more about how to do this,
please look at our tutorial on inserting
and editing Page Banners.
Print this Page button
This is a special image included with the web template. There is
JavaScript at the top of each page with a function that allows the
browser to call up the print dialog. If you don't want this button,
delete it.
Add to Favorites button (home page only)
In FrontPage's Normal View, you won't see this button. Instead,
you'll see a little flag icon. This is because there is JavaScript code
that writes the HTML code for the button depending on whether or not the
user is using Netscape or Internet Explorer. (Add-to-favorites works
only in Internet Explorer.) If you don't want the Add to Favorites
button, you will need to go into the HTML code and delete the code that
looks like this: <!-- begin bookmarking script --><A
NAME="here"></A><SCRIPT>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0) && (parseInt(navigator.appVersion)
>= 4)) {
document.write('<A HREF="#here" onclick="window.external.AddFavorite(location.href,document.title);"><IMG
BORDER="0" SRC="images/addtofav.gif" WIDTH="100" HEIGHT="23"></A>');
}
//-->
</SCRIPT><!-- end bookmarking script -->
Info boxes
The template comes with three different colors of info boxes. You
may copy and paste these boxes or delete them as needed. To select an
info box, click inside the box and go to Table > Select > Table. This
will highlight the table. You may now delete the box or copy and paste
the box.
Pop-up windows on About Us page
The About Us page comes with two employee bio pop-up windows. There
is JavaScript code on this page that helps you do this. Each of the
links opens up a separate web page that has the info about your
employee. These two pages are "profile1.htm" and "profile2.htm." You
will have to edit these two pages, and save copies of them to create
more bio pages. Then, to create more pop-up links, simply copy an
existing link and edit it. If you copy and paste the first Employee
link, then select the link, right-click and select Hyperlink Properties,
you'll see that the link looks like this: javascript:pop('profile1.htm');
Simply edit the "profile1.htm" URL with the URL to your new employee bio
page. For example, if you have a new page called "myemployee1.htm," then
your pop-up window link should look like: javascript:pop('myemployee1.htm');
Catalog page layout
This page doesn't come with ecommerce capability -- it's merely a
suggested layout. You will need to find a third-party solution (PayPal,
bCentral, etc.) if you want to have ecommerce on your site.
Accessiblity
The accessibility movement encourages web sites to be built to allow
people with disabilities to view them. For example, one accessibility
standard is that all images have "alternate text" and "long
descriptions" coded into the HTML. This would be useful for software
that reads web pages out loud for blind people. Even if they cannot see
your images, the software can read the description of the image out
loud.
There are two different guidelines often used when determining
whether a site is "accessible": the US Government Section 508 Guidelines
and the Web Content Accessibility Guidelines.
This template was built to meet as many of those standards as
possible. It meets all the Priority 1 standards of the Web Content
Accessibility Guidelines and all of the Section 508 Guidelines. If you
are concerned with accessibility, you will need to take responsibility
to label all your tables and images and to avoid technologies or
scripting that may not be accessible.
Some of the many ways that this template meets standards:
- Table structure
- Tables are built using relative sizing so that the page will
resize to fit browser windows.
- All tables have a "summary" statement that describes what
the table is being used for.
- Cascading Style Sheets
- Table background colors/patterns and bullet images are
defined using Cascading Style Sheets within the theme (instead
of hard-coding them, which FrontPage will do when themes are
applied without CSS).
- Font colors and sizes are also defined with CSS, which
allows the page to degrade functionally even if someone does not
have CSS viewing capability.
- Images
- Images within the page layout have "alt" and "longdesc" set
in the HTML. (To edit the long description, you must go into
HTML view.)
Some of the ways that this template is not able to meet standards:
Please note that these are "Priority 2 and 3" checkpoints and that
most of them are FrontPage Theme-related.
- FrontPage Theme Issues
- When you apply your theme so that the navigation bars have
"Active Graphics" (i.e., change on rollover), you will
automatically break some standards. FrontPage automatically
generates scripting and code to make the rollover effect and you
will have no control over it.
- When you use image buttons, you will automatically break one
of the standards that suggests a "spacer" (image or text)
between navigation links.
If you want to learn more about how to make your site accessible,
please take a look at our articles at
PixelMill, in their support area.
Search form on Search page
This is a FrontPage web component. Your site must be on a server
with FrontPage extensions for this to work. Site Map
The site map is a FrontPage-generated component. To view the site
map, go to File > Preview in Browser. To update the site map, you may
need to open the page, click on the site map, and save the page. |
