 eXPansive
Current version: 1.2
Last updated: 7/18/02
A lot of this goes for eXPansive Centered, as well.
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
expansive. Copy this folder to this location:
C:/Program Files/Common Files/Microsoft Shared/Themes
In the Webs folder there should be another folder called
expansive.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 eXPansive 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 eXPansive 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! How do I
center the page layout?
Use the eXPansive Centered web template which comes free with this
template. (This will cause an accessibility conflict. See the Centered
web template for details.) 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.
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 (171x45 pixels) by dragging your image file
(named "yourlogohere.gif") 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.
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 six 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."
Cloud animation
The cloud animation is an embedded Flash movie and cannot be changed
or modified. Request custom work
if you are looking for something else.
Text animation on home page (Swish movie)
The movie on the home page was created with Swish. The Swish file is
included in the web template in the "flash" folder, called "homepage.swi." You
will need the Swish program to edit this movie (buy at
www.swishzone.com).
To learn some basics on editing the movies once you have Swish, please
view our tutorial on editing Swish
movies that come in templates. The instructions for the Swish movie
are on the "Get Started" page and are duplicated here: There are two
movies -- one called "homepage.swi" and one called "needswish.swi." You
may edit these movies by opening them in Swish and deleting the text
layers, then adding your own text and effects. Swish has a lot of
built-in help and tutorials that you may find useful. You may also "Save
As" these files under different names if you want to have several
different movies (for example, have a different movie for each page). We
recommend that you keep the movies at the same dimension for easy
replacement in FrontPage.
Export the movies in swf format to your hard drive, then import the
movies into FrontPage, by first clicking on the "flash" folder to select
it, then going to File > Import. Click "Add" and browse to your movies,
then click OK until your movies are imported. If you are using the same
file names, go ahead and replace the existing movies with your own.
If you have created different Swish movies, simply go into HTML view
and change the file name of the Swish movie. There are two places you
will need to do this:
codebase="http://active.macromedia.c
...
value="flash/needswish.swf"><param
name="quality"
...><embed name="homepage"
src="flash/needswish.swf"
quality="high"
Type in the file name of your new Swish movie, and save.
If you have an older version of Swish, or if for some reason the .swi
file does not open, you may easily create your own from scratch. Create
a new Swish movie and change the dimensions of the movie to be 535x100
pixels. Add your own text animation and effects. Export the movie in swf
format and import it into FrontPage. Then, following the instructions
above, go into HTML view and change the file name of the Swish movie.
If you don't have Swish, you may delete the movie and replace it with
your own image or static text. If you delete the image, it's possible
that the tables may be thrown off slightly and a white gap will appear
in your left column. To fix this, click within the content area and go
to Table > Select > Table, then Table > Select > Cell. Right-click on
the highlighted cell and choose Cell Properties. Change the width to
100% and this should fix the issue.
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.
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.
Page is too wide when printed
The eXPansive layout is configured to display within 800x600 browser
windows. Unfortunately, this width is too wide for most printer pages
unless printed in "landscape" format. This is a "choose your battle"
situation... either instruct your users to print in "landscape" format,
get rid of the "print page" button, or keep reading to find out how to
make your page resizable.
Making the table structure of the page "resizable" will allow users to
print your page. We have a page of instructions (as well as a sample of
what your page will look like) at this link:
http://www.johngaltstools.com/custom/expansive-resize/. The
instructions are duplicated here:
- Delete the right column. (Hover your mouse at the top of the
right column until the cursor turns into a down arrow. Click once to
select the cell. Right-click in the cell and choose "Delete cell."
- Right-click in the top row and select Table Properties. Change
the width to 100% if it's not already.
- Right-click in the bottom row and select Cell Properties. Change
the width to 100% as well.
- With your cursor still in the bottom row, switch to HTML view.
Scroll down a few lines to find a line that looks like this:
<IMG BORDER="0" SRC="images/spacer.gif" ALT="Spacer graphic"
WIDTH="500" HEIGHT="1">
Change the "500" to "300."
- Scroll down a few more lines in the HTML until you see a line
that looks like this:
<IMG BORDER="0" SRC="images/spacer.gif" ALT="Spacer graphic"
WIDTH="749" HEIGHT="1">
Change the "749" to "500."
- The last thing you have to do is change the size of the Swish
movie. In Normal View, click on the Swish movie once to select it,
then switch to HTML view. You'll see a block of code highlighted.
Look for the width and height:
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
CODEBASE="http://active.macromedia.com/f..." ID="homepage"
WIDTH="535" HEIGHT="100">
<PARAM NAME="movie" VALUE="flash/needswish.swf">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="bgcolor" VALUE="#91A5C1">
<EMBED NAME="homepage" SRC="flash/needswish.swf" QUALITY="high"
BGCOLOR="#91A5C1" WIDTH="535"
HEIGHT="100"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://...>
</EMBED></OBJECT>
Change the width to 445 and the height to 83.
Page Title
On all pages except for the home 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.
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. |
