Version 2.1 has been released. Please check PixelMill for the latest
update. In v2.1, the Flash detection script was updated for Flash Player
6, the link to the Flash Tech page was updated, and the HTML code was
updated with the "flashvars" parameters.
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
blue-ring. Copy this folder to this location:
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 Blue Ring 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 Blue Ring 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!
Index Page (index.htm or default.htm) If you tried opening the "home page," it probably looked blank.
Don't worry! This is because this page is used for Flash detection. DO
NOT add anything to this page because your viewers won't even see it. If
you go into HTML view, you'll see a bunch of JavaScript code. Do not
modify this unless you are comfortable with JavaScript, or if you are
trying to change "main.htm" to something else (more on this in the Flash
instructions area).
This code tests for the Flash plug-in for versions of the Flash player
up to v5. The latest version of Blue Ring, v2.1, also texts for Flash
Player 6. If the user does not have the Flash plug-in,
they will immediately be redirected to your main page (main.htm).
Splash page The splash page (splash.htm) contains an embedded Flash movie with
taglines that you may edit in the HTML. There is also a "redirect"
variable so that if you want, you can change where the page redirects
to. PLEASE NOTE that the text area is limited to a few lines, so you may
need to experiment a little to get taglines that work. If you own Flash
5+, you may purchase the Flash movie component and modify it with your
own effects. If you don't want Flash, there are static images included
as well as a Photoshop file with the static image that you may modify
and replace.
What can I
change in the movie? You may change the three taglines in the movie as well as where the
movie automatically skips to, but you cannot change the font, font size,
color, animation effects, or the size of the text "box." If you want to
change any of these, you will either need to order custom work or buy
the Flash movie component and edit with Flash 5+.
How do I change the text in the movie? You can change the text in the movie by editing the HTML. There are
complete instructions within the template on the Flash Information page.
The information is duplicated below.
Flash Instructions for the
Splash page
Follow these instructions carefully!
Open the splash page (splash.htm) and immediately
go to HTML view.
You will see HTML text that looks like:
<OBJECT
classid= ...
<PARAM
NAME=movie
VALUE="blue_intro.swf?tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
<PARAM
NAME=flashvars
VALUE="tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
<PARAM NAME=quality
VALUE=high>...
<EMBED src="blue_intro.swf?tagline1=This%20is%20tagline%201.
... &linkto=main.htm"
flashvars="tagline1=This%20is%20tagline%201.
... &linkto=main.htm"
quality=high
bgcolor=#003399
...
</OBJECT>
You will need to change the taglines and URL both
in the "PARAM" and in the "EMBED" areas. First, change
the PARAM area with your own taglines:
<PARAM
NAME=movie
VALUE="blue_intro.swf?tagline1=This
is tagline 1.&tagline2=This
is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
<PARAM
NAME=flashvars
VALUE="tagline1=This
is tagline 1.&tagline2=This
is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
Then, change the url to the page in your web that
you want the Splash page to link to (the default is
to "main.htm", but you may replace it with whatever
you want your 'home' page to be:
<PARAM
NAME=movie
VALUE="blue_intro.swf?tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
<PARAM
NAME=flashvars
VALUE="tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
Now, copy the code into the "EMBED" area:
<PARAM
NAME=movie
VALUE="blue_intro.swf?tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm">
....
<EMBED src="blue_intro.swf?tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm"
flashvars="tagline1=This
is tagline 1.&tagline2=This is tagline 2.&tagline3=This
is the final tagline.&linkto=main.htm"
quality=high
bgcolor=#003399
... >
You will now need to add special character codes
for the spaces so that the Flash movie will work in
Netscape. Replace all spaces in the "src" area with
'%20':
<EMBED
src="blue_intro.swf?tagline1=This%20is%20tagline...
This%20is%20the%20final%20tagline.&linkto=main.htm"
flashvars="tagline1=This%20is%20tagline...
This%20is%20the%20final%20tagline.&linkto=main.htm"
quality=high
bgcolor=#003399
... >
Be sure that there are no spaces anywhere in the
code in the EMBED "src" area.
Save and go to File > Preview in Browser to test
your text.
** If you have an older version of Blue
Ring (v2.0 or under), you will not have the "flashvars"
lines. You will want to add this to the code.
Flash Notes for the Splash page...
Please note that you cannot change the font, color, font size, or
animation effects in the Flash movie without purchasing the .flas and
editing them in Flash 5+.
If you want to have accented characters, you will need to
use special character codes. You can go to our
Embedded Flash Tech Notes for a
full listing.
If you will not be using any accented characters
or other types of special characters, you can use a
smaller Flash movie for faster loading. "blue_intro_alphanum.swf"
is located in the "flash" folder in your folder list.
Drag the original "blue_intro.swf" into the "flash"
folder, then drag out the "blue_intro_alphanum.swf"
into your root directory. Rename the "blue_intro_alphanum.swf"
to "blue_intro.swf" for your movie to work.
The blue_intro.swf movie must be in the same
directory as your splash.htm page.
I followed the instructions, but the text
isn't showing up.
First, try publishing your web to a temporary
location. If the text shows up fine on a server, then this is a Flash 6
issue. Please see our Flash Tech page
to find out how to fix this issue. We will fix this in a later version.This issue has been fixed in Blue Ring v2.1.
Making a different page other than "main.htm" your Home Page
This will require a lot of different steps of customization.
Edit the splash page html so that the Flash movie redirects to
your desired page (see instructions above in step 4).
Edit the "Home" button image in the shared border so that link
goes to your desired page.
Rebuild your navigation structure so that your desired page is
in place of the existing main.htm page -- on the "child pages under
home" level.
Make an additional edit in the index.htm (or
default.htm) page. Open the index.htm/default.htm page and go into
HTML view. Scroll to the top of the page and look for the lines that
look like this:
/ #############################################
// these are the user defined globals
// modify the following variables to customize the inspection
behaviour
var requiredVersion = 5;
var useRedirect = true;
// set next three vars if useRedirect is true...
var flashPage = "splash.htm" // the location of the flash movie page
var noFlashPage = "main.htm" // send
user ...
upgradePage = "main.htm" // send user
here if we detect an old plugin
// #############################################
Change the "main.htm" in the two lines to the correct URL.
Site Structure If you go into Navigation View, you will see that the structure
looks like this:
The "Home Page" at the top is your "index.htm" or "default.htm" --
the page that has your Flash detection script. FrontPage automatically
makes the index/default.htm page into the "Home Page," and there's
nothing you can do about it. This is the page that will show up if you
have the "Home" option checked when defining your link bar properties,
so you will want to stay away from this option.
The page labeled "Home" on the second level is "main.htm." By putting
this page into the "Child Pages Under Home" level, this ensures that you
can have a "home" link on every page. If you are unfamiliar with how
link bars work in FrontPage webs, please visit this tutorial on Using Navigation View.
The "your logo here" image may be replaced with your own logo.
Keep it no taller than 75 pixels, or else the Flash animation will have
a gap after it. The
easiest way to replace the image with your own logo is to replace the image with one that is the same
dimension (200x75 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.
Flash header The embedded Flash on other pages uses the same flash
movie file (blue.swf) for quick loading, but you can control
what the text says on each page in the HTML. Please note
that you will have to edit the HTML on each page
-- if you want to have the same text on every page,
you can copy and paste the HTML to make it easier, or you
can delete all other similar pages except for the template
page and File > Save As to make new page from it. Also,
the text area is limited, so you may need to experiment
with different taglines to get the desired effect. You will
not be able to edit the font size, font style, color,
etc. -- only the text. If you own Flash 5, you may purchase
the Flash movie component and modify it with your own desired
effects. If you want a static image instead, there is a
"flash_static.jpg" in the images folder, as well as a Photoshop file,
that you may edit.
Editing the Flash movie text is very similar to editing
the Splash movie text.
Open the page you wish to edit. Click once on the
Flash movie to select it, then go into HTML view.
You will see a block of code highlighted. Within
there, find the code that looks like:
<OBJECT
... HEIGHT=75>
<PARAM
NAME=movie
VALUE="blue.swf?text1=Your
heading here&text2=Your text here">
<PARAM
NAME=flashvars
VALUE="text1=Your
heading here&text2=Your text here">...
<EMBED
src="blue.swf?text1=Your%20heading%20here&text2=Your%20text%20here"
flashvars="text1=Your%20heading%20here&text2=Your%20text%20here"
...></EMBED></OBJECT></TD>
You will need to change the taglines and URL both
in the "PARAM" and in the "EMBED" areas. First, change
the PARAM area with your own taglines:
<PARAM
NAME=movie
VALUE="blue.swf?text1=Your
heading here&text2=Your
text here">
<PARAM
NAME=flashvars
VALUE="text1=Your
heading here&text2=Your
text here">
Now, copy the code into the "EMBED" area:
<PARAM
NAME=movie
VALUE="blue.swf?text1=Your
heading here&text2=Your text here">
...
<EMBED src="blue.swf?text1=Your
heading here&text2=Your text here"
flashvars="text1=Your
heading here&text2=Your text here"
...></EMBED>
You will now need to add special character codes
for the spaces so that the Flash movie will work in
Netscape. Replace all spaces in the "src" area with
'%20':
<EMBED
src="blue.swf?text1=Your%20heading%20here&text2=Your%20text
flashvars="text1=Your%20heading%20here&text2=Your%20text
...></EMBED>
Be sure that there are no spaces anywhere in the
code in the EMBED "src" area.
Save and go to File > Preview in Browser to test
your text.\
** If you have an older version of Blue
Ring (v2.0 or under), you will not have the "flashvars"
lines. You will want to add this to the code.
Embedded Flash Notes:
If you want to have accented characters, you will need to
use special character codes. You can go to our
Embedded Flash Tech Notes
for a full listing.
The blue.swf movie must be in the same directory
as any page that uses the movie. If you have subfolders,
you may copy the "blue.swf" movie into all of your subfolders.
If you are comfortable with HTML, you may edit the PARAM
and EMBED tags so that they reference the "blue.swf"
movie in your root directory.
You can use the Flash movie as an area to put your
page title and a short tagline or
description.
We've provided an alternative flash movie that
has larger text for the headline (see example below).
"blue_largertext.swf" is in the "flash" folder in your
folder list. To replace the original movie with the
larger text movie, first drag the original "blue.swf"
into the "flash" folder, then drag out the "blue_largertext.swf"
into your root directory. Rename the "blue_largertext.swf"
to "blue.swf" for the movie to work.
I followed the instructions, but the text
isn't showing up.
First, try publishing your web to a temporary
location. If the text shows up fine on a server, then this is a Flash 6
issue. Please see our Flash Tech page
to find out how to fix this issue. We will fix this in a later version.This issue has been fixed in Blue Ring v2.1.
Home, Contact, Map "tab" buttons The Home, Contact, and Map buttons are not FrontPage-generated
navigation buttons, but are specially-made images with dynamic HTML
rollover effects. You may delete the buttons that you don't want to use
(you must edit each page). There is a Photoshop file included for your
convenience with a blank tab image.
The dynamic HTML rollover effects are generated through FrontPage, and
apparently they don't work for Netscape 6. The easy, cheap solution is
to not have rollover effects. Click on the images, go up to Format >
Dynamic HTML effects, and click the "Remove effect" button. You will
have to do this for each page (or copy/paste the images onto your other
pages).
If you still want a rollover effect, you'll have to create your own
JavaScript code and rollovers. See our article
if you want to learn more about this.
Left Navigation Bars On each page are two sets of link bars (the bottom bar may not
display on same pages if there are no "subpages"). The top link bar uses
the "vertical style," and the bottom link bar uses the "horizontal
style" but is displayed vertically by forcing it into the left column.
The top bar displays your "Child pages under Home." (The "Home" link
shows up because main.htm is a "child page under home." See the
paragraph on Site Structure above for more details.) The second
link bar shows the "subpages," and is either a "Child Pages" or "Same
Level" link bar. If you don't need this second link bar, you may delete
it.
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 All pages except for the home page (with the Flash splash movie)
have a line with the page title displayed. This page title
is a FrontPage-generated component. You can change it 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.
Info boxes The info boxes must be edited on each page. If you want to get rid
of an info box, you can easily do this by deleting the table that makes
up an info box. Click inside of a box, go to Table > Select > Table, and
then hit backspace to delete the box. To make more info boxes, you
may duplicate them by copying and pasting an existing info box. Click in
the table, then go to Table > Select > Table, then Edit > Copy and
Edit > Paste. Be sure to insert breaks between the tables.
Copyright info? - Add a Bottom Shared Border This particular web template does not come with an area for
copyright info. You can easily add this yourself by adding a bottom
shared border. Go to Format > Borders and check the bottom border
checkbox, and select "apply to all pages." This will cause the bottom
border to appear on all the pages. You may then edit the bottom border
with your own copyright info.
A note about shared borders: If you're an HTML guru and want to actually see the source code, you
will have to "un-hide" the hidden borders folder. Go to Tools > Web
Settings and click the Advanced Tab. Check the "show hidden files and
folders" checkbox, then apply. The "_borders" folder will now show up in
your folder list. You may open the folder and access "bottom.htm."
"Static page
template" If you don't want Flash in your pages, or in some of your pages, use
the Static Page Template. If you want to make an existing page into a
"static" page, follow these instructions:
Open the Static Page template. Click in the top
area and go to Table > Select > Table. Then hit Ctrl-C to copy.
Open the page you want to make static. Click in
the top area to select the Flash movie and delete it. Then hit
Ctrl-V to paste the table from the static page.
A Photoshop file of the blue image is included for
your convenience.
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.
All information on this site is copyrighted either by JGT or the original creator of the material. You are free to
view, copy, print, and distribute information on this site for non-commercial purposes if you include 1) a reference statement for
John Galt's Templates and 2) a link back to http://www.jgtemplates.com. If you would like to use information on this site for commercial
purposes, please contact us at webmaster@jgtemplates.com. While JGT tries to
provide accurate information, JGT does not assume responsibility for accuracy.
Blue Ring Flash
