John Galt's Templates: Beyond Cookie Cutter

Learn...

FrontPage Intro

FrontPage Editing Basics

Make a FrontPage Template

FrontPage FAQ

Dynamic Web Templates (FP)

Swish Basics

Articles

Product-Specific

Blue Nebula v2.0Blue Nebula Flash

Current version: 2.0
Product last updated: 6/20/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 blue-nebula. Copy this folder to this location:

C:/Program Files/Common Files/Microsoft Shared/Themes

In the Webs folder there should be another folder called bluenebula_flash.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
  1. After installation, open FrontPage.

  2. 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.

  3. Choose the Blue Nebula Flash template from your list of templates.

  4. 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.

  5. Click OK and FrontPage will make your new web.

  6. 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.

  7. 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.

  8. 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.)

  9. To delete pages, simply right-click the page in your folder list and choose "delete."

  10. 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 Nebula 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 5 plug-in for Netscape and IE. This code will not work for Opera 6 viewers, but we intend to fix this in a later version of the product. If the user does not have the Flash plug-in, they will immediately be redirected to your main page (main.htm). If you have the Flash 6 plug-in, the code may skip to your main page as well. We will update the code in a later version of the product, but for now you can copy this code and replace all the code in your index.htm/default.htm page:

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.

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!

  1. Open the splash page (splash.htm) and immediately go to HTML view. (A browser window may pop-up with "main.htm" in it. You may either close this or leave it open and use it to test your site.)
  2. You will see HTML text that looks like:
    <OBJECT classid= ...
    <PARAM NAME=movie VALUE="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
    <PARAM
    NAME=quality VALUE=high>...
    <EMBED
    src="intro.swf?linkto=main.htm&tagline1=This%20is%20tagline%201. ... " quality=high bgcolor=#003399 ...
    </OBJECT>
  3. 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="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.>
  4. 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="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
  5. EXTRA STEP: Some computers will not show any text in the movie, even though you may have done everything correctly. This is a Flash 6 Player issue. Your movie will work fine if you publish it to a server (try it!). But if you want to be able to see the text on your local computer, please follow these extra steps:
    1. Highlight the entire line that you were just working on:
      <PARAM NAME=movie VALUE="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
    2. Copy it. Move your cursor to the line below (or carriage-return) and paste a copy of the line. Your code will now look like this:
      <PARAM NAME=movie VALUE="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
      <PARAM NAME=movie VALUE="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
    3. On the second line, change the word "movie" to "flashvars" and then delete the "intro.swf?"
      <PARAM NAME=flashvars VALUE="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
    4. The second line should now look like this:
      <PARAM NAME=flashvars VALUE="linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline.">
    5. Save your page and go to File > Preview in Browser. You should now be able to view the taglines in the browser!
  6. Now, copy the code into the "EMBED" area:
    <PARAM NAME=movie VALUE="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline."> ....
    <EMBED
    src="intro.swf?linkto=main.htm&tagline1=This is tagline 1.&tagline2=This is tagline 2.&tagline3=This is the final tagline." quality=high bgcolor=#003399 ... >
  7. 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="intro.swf?linkto=main.htm&tagline1=This%20is%20tagline... This%20is%20the%20final%20tagline." quality=high bgcolor=#003399 ... >
  8. Be sure that there are no spaces anywhere in the code in the EMBED "src" area.
  9. NOTE: See Step 5. The same issue will occur in Netscape where you may not be able to view the text. If you wish to fix this issue, please see our Flash Tech page for instructions.
  10. Save and go to File > Preview in Browser to test your text.

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. "intro_alphanum.swf" is located in the "flash" folder in your folder list. Drag the original "intro.swf" into the "flash" folder, then drag out the "intro_alphanum.swf" into your root directory. Rename the "intro_alphanum.swf" to "intro.swf" for your movie to work.
  • The 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.

Making a different page other than "main.htm" your Home Page

This will require a lot of different steps of customization.

  1. Edit the splash page html so that the Flash movie redirects to your desired page (see instructions above in step 4).
  2. Edit the "Home" button image in the shared border so that link goes to your desired page.
  3. 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.


     
  4. 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:

Site Diagram for Blue Nebula

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.

Shared Border - Home, Contact, Map buttons
The Home, Contact, and Map buttons are within the top shared border. You may delete the buttons that you don't want to use, insert your logo in this area, or insert other content. By editing the Shared Border in one page, you will affect all other pages.

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 "top.htm."

Size of the page - cannot expand to fit the browser window
The page layout of Blue Nebula does not allow it to fit the browser window. This is because the Flash header defines the size of the page, and Flash movies cannot be made "resizable." If you're looking for a template that resizes with the browser window, you should look into a different template. Blue Ring, for example, has the same type of Flash intro and embedded movie, but resizes to the browser window.

Flash header
The embedded Flash on other pages uses the same flash movie file (top.swf) for quick loading, but you can control what the text says and where the text is placed 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.

Editing the Flash movie text is very similar to editing the Splash movie text.

  1. Open the page you wish to edit. Click once on the Flash movie to select it, then go into HTML view.
  2. You will see a block of code highlighted. Within there, find the code that looks like:
    <OBJECT CLASSID="...
  3. <PARAM NAME="movie" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
    ...
    <EMBED
    SRC="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40..." QUALITY="high" BGCOLOR="#FFFFFF" ...></EMBED></OBJECT>
  4. You will need to change the taglines and the position variables both in the "PARAM" and in the "EMBED" areas. First, change the PARAM area with your own taglines, and edit the pixel values for the x and y positions of the taglines:
    <PARAM NAME="movie" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
  5. EXTRA STEP: Some computers will not show any text in the movie, even though you may have done everything correctly. This is a Flash 6 Player issue. Your movie will work fine if you publish it to a server (try it!). But if you want to be able to see the text on your local computer, please follow these extra steps:
    1. Highlight the entire line that you were just working on:
      <PARAM NAME="movie" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
    2. Copy it. Move your cursor to the line below (or carriage-return) and paste a copy of the line. Your code will now look like this:
      <PARAM NAME="movie" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
      <PARAM
      NAME="movie" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
    3. On the second line, change the word "movie" to "flashvars" and then delete the "top.swf?"
      <PARAM NAME="flashvars" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
    4. The second line should now look like this:
      <PARAM NAME="flashvars" VALUE="tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions.">
    5. Save your page and go to File > Preview in Browser. You should now be able to view the taglines in the browser!
  6. Now, copy the code into the "EMBED" area:
    <PARAM NAME="movie" VALUE="top.swf?tagline1x=50&tagline1y=15&tagline2x=100&tagline2y=40&tagline1=Flash text without Flash!&tagline2=See the Flash Info page for instructions."> ...
    <EMBED
    src="top.swf?tagline1x=50&tagline1y=15&tagline2x=100...&tagline2=See the Flash Info page for instructions."" ...></EMBED>
  7. 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="top.swf?tagline1=Flash%20text%20without%20Flash!&tagline2=See%20the ...></EMBED>
  8. Be sure that there are no spaces anywhere in the code in the EMBED "src" area.
  9. NOTE: See Step 5. The same issue will occur in Netscape where you may not be able to view the text. If you wish to fix this issue, please see our Flash Tech page for instructions.
  10. Save and go to File > Preview in Browser to test your text.
  11. If you are testing in Netscape 4, and there is a white gap after the movie, you will need to go into the HTML and make a change. Click once on the Flash movie to select it in Page View, then go into HTML view. Find the <EMBED...>, </EMBED>, </OBJECT>, and </TD> tags. Delete any spaces in between the end of one tag and beginning of another so that they are all on one line, like this:
    <EMBED src="top.swf ...></EMBED></OBJECT></TD>
  12. Save and preview again.

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 top.swf movie must be in the same directory as any page that uses the movie. If you have subfolders, you may either copy the "top.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 "top.swf" movie in your root directory.
  • If you will not be using accented characters or other "special" characters, we've provided an alternative flash movie that is smaller in size. "top_alphanum.swf" is located in the "flash" folder in your folder list. Drag the original "top.swf" into the "flash" folder, then drag out the "top_alphanum.swf" into your root directory. Rename the "top_alphanum.swf" to "top.swf" for your 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.

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 row 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 box, then go to Table > Select > Table, then Edit > Copy and Edit > Paste. Be sure to insert breaks between the tables.

Copyright info - Bottom Shared Border
At the bottom of the page is a "copyright" statement. This is in the bottom shared border, which allows you to change it once on a page and have it apply across the web.

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:

  1. Open the Static Page template. Click in the top area and go to Table > Select > Table. Then hit Ctrl-C to copy.

  2. 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.

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.