This package comes with the starter web site in .zip format. Unzip the package and start editing the pages. You may wish to keep a backup copy of the .zip in case you need to start over.

We have included a basic site structure with common pages that you may use to start with. You may rename the pages, add more pages, and add your content.

Features...

  • A starter web template to help you to create a new web quickly and easily.
  • Splash page layout and inner page layout included.
  • New in v2: CSS-based layout for cleaner code and better search engine optimization. No tables used in layout!
  • Striking content box for a Flash movie on splash page. (New in v2: Does not require Flash to edit text, text position, or speed of the animation!!) Other info boxes included in web template.
  • New in v2.1: SWFObject embed code used for automatic Flash detection and Flash embedding.
  • Popup boxes for employee bios on the About Us page.
  • Print this page buttons and code on every page.
  • Add this page to my favorites button and code on the default page (will only work for Internet Explorer).
  • Additional button graphics for your convenience.
  • New in v2: All Photoshop and Flash source files included!
  • Tested to work in IE 5+, Netscape 6+, Opera 6+, Mozilla, and FireFox.

Image Licensing Information

The royalty free images used in this template are provided as a part of a licensing agreement between AbleStock and Advantrics LLC. If you wish to purchase larger versions of the images for your own marketing use, please go to AbleStock's web site and look for the following images:

  • Beaker - 26811629

If you are purchasing this template and intend to use it to build a site for someone else, you must disclose to your client that this template uses AbleStock images.

Important note for FrontPage Users

This template uses CSS-based layout, which means that the layout and columns are placed using CSS instead of in a table grid. Using CSS-based layout is W3C recommended and results in cleaner code, which means that your pages load faster and search engines may rank your pages better than they would if they were in a table format.

These benefits do come with a trade-off, however. Because the FrontPage "design view" is not as sophisticated at displaying CSS properly, the heading fonts will seem very large, and the content areas may "wrap" underneath other content areas. This can be frustrating if you are used to getting a good "preview" of what your site looks like, but you'll find that it is almost just as easy to keep previewing your site in a browser as you make changes. You will still be able to edit your text and add content as you normally would; after you save, go to File > Preview in Browser to view your site in a browser and make sure that it really looks as it should.

Also, occasionally FrontPage's Normal/Design view may "lose" the formatting. When this happens, just hit "F5" to refresh the view and the styles will return.

By offering you CSS-based layout instead of tables-based layout, we are helping to ensure that your web site is compliant with current web standards.

Source Files Included

  • Photoshop CS2 files
    • banner.psd - Used for background image in page title area.
    • boxes.psd - Used for creating the square accent of the heading.
    • closewindow.psd - Used for creating the close window button.
    • ecommerce.psd - Used for creating the ecommerce buttons.
    • mainpic.psd - Used for the main picture.
    • portrait.psd - Used for the portrait images.
    • box.psd - Used for rounded corner graphics.
    • smallbutton.psd - Used to create the small button graphics.
    • special.psd - Used for the "print page" and "add to favorites" buttons.
    • topmenu.psd - Used to create the top menu graphics.
    • vertical.psd - Used to create vertical button graphic.
    • yourlogohere.psd - Used for logo image.
  • Flash MX 2004 files - You don't need Flash if you just want to change the text!
    • movie.fla

Not included: The Russell Square font, which is used in the button graphics. The Russell Square font can be licensed from www.linotype.com.

Flash Detection Script

This template uses the SWFObject (v1.4) Flash detection and embed script provided by Geoff Stearns at http://blog.deconcept.com/swfobject/. This script detects whether or not the user has the Flash player, and if it does, it loads in the Flash movie for them to view. If they don't have the Flash player, it displays your alternate content. The alternate content is what you see in your web editor (a static image or text).

The SWFObject script also resolves the IE update issue where embedded Flash movies require an extra click for interaction; using the script will allow viewers to interact with the Flash movie directly. The SWFObject script also allows your web site to have fully validated HTML.

Please be aware that the script may be updated occasionally, and it is your responsibility to visit theSWFObject site to check for updates and implement them.

General Instructions

  1. Make a new web...
    1. Unzip your web package.
    2. Look for the "scienceready_web" folder.
    3. Copy this folder to your "My Webs" directory.
    4. In FrontPage, go to File > Open Web or Open Site and browse to this folder to begin editing your site.
  2. Preview your new web...
    1. Click on any page and go to File/Preview in Browser.
    2. Click on Internet Explorer and click Preview.
    3. A browser window will open with your new web. Preview the pages of the web and decide what pages will be in your web site. You may keep this window open and return to it and refresh to see your changes.
  3. Modify your new web...
    1. Add new pages
      Open a page that has the layout the way you want it, then go to File/Save As. Save the page under a new name - be sure to change the page title as well! Then, go to Navigation View and drag your new page into the navigation structure. Edit the menu if necessary (see specific instructions below).
    2. Rename existing pages
      If you would like to use an existing page but want to rename it, you may easily do this in Folders View. Right-click on the file name and/or the page title and choose "Rename" to rename your file.
    3. Delete pages from your web
      Right-click on the pages you wish to delete in your Folder List, in Folder View, or in Navigation View, then select "Delete."
    4. Add your own logo
             The logo is in the "include_top.htm" file. Open this page to edit the logo (see below in specific instructions). After saving this include page, all your other pages will be automatically updated.
    5. Edit the Copyright statement
      The copyright statement is in an include page for your editing convenience. Open "include_footer.htm" and edit the text, then save. All your pages will be automatically updated.
    6. Add your own layout if necessary
      This page has been very carefully formatted with divs so that it resizes both vertically and horizontally. Do not drag on any div corners - you may "freeze" the page so that it no longer resizes properly.
    7. Add your content!
             Type your text! Add your pictures! It's easy!
  4. Publish your web!
    1. Go to File/Publish Web.
    2. Type in the URL of your web site. For example, http://www.yoursite.com. If you don't want to overwrite your existing web site but just want to publish it temporarily to preview it, publish it to a subfolder like this: http://www.yoursite.com/test.
    3. Type in your user name and password when prompted.
    4. If you are publishing to a new folder, FrontPage may prompt you to "create a new web." Go ahead and click OK.
    5. Then, click Publish. FrontPage will publish your web. When it's done, you'll be able to click to view your published site!

Template Details

Include Pages

The logo area, menus, flash movie, and footer are in "include pages." Editing the include pages will update the other pages across your web site. Open them, make your changes, and save.

The include pages will look like they have no formatting applied. This is okay! Simply make your changes, then preview the other website pages in a browser.

Your Logo Here top area

The "your logo here" area is a graphic in the include_top.htm page. We've included the source Photoshop file for your convenience. Open the include_top.htm page to replace the logo with your own.

Top menu

The top menu is also in the include_top.htm page. It is made up of graphics that will require the use of an image editor (such as Photoshop or Photoshop Elements) to edit or add your own buttons. If you don't want one of the buttons, open the include page and delete it.

Main picture

The main picture can be replaced with your own, if you have an image editor that can help you with the rounded corner effect. We include the Photoshop file for your convenience. The image is 250x200. If you name your image mainpic.jpg and replace the existing file in the "images" folder, the image will be replaced.

Flash animation

The Flash animation can be changed without needing the Flash program!

You don't need Flash if you want to change:

  • The text
  • The placement of the text
  • The speed of the animation
  • The color of the box

You do need Flash if you want to change:

  • The font, text size, color, or bold/italics and other formatting
  • The animation itself (like if you want it to come from the top, or if you want another effect)
  • The size of the Flash movie
  • The length of the text fields
  • Anything else not mentioned above

We have provided the Flash file free with this template. You will need Macromedia Flash MX 2004 or higher to edit the Flash file.

Flash alternative content

There is alternative content for search engines and people who don't have Flash. We've simply put a line of text in the Flash area, which you should be able to see in the web editor. Change this text or replace it with your own content. People who do have Flash will be able to see the Flash animation and will not see that content in the browser.

Editing the Flash animation

There is a file called input.txt that comes with this template. Open it and you'll see a long line of code. It looks like this (line breaks added here for readability):

speed=10
&&tag1=Make a strong business statement.
&&tag1x=25
&&tag1y=25
&&tag2=Put your text here without needing Flash!
&&tag2x=50
&&tag2y=75

The "speed" can be increased or decreased to affect the speed of the animation. You can experiment with different values to see how it looks.

The tag1 (bold) and tag2 (not bold) variables can be changed to reflect your own text. Please be aware that text space is limited. If you need the movie to have longer text, you will need to modify the Flash file itself.

The tag1x, tag1y, tag2x, and tag2y affect the position of the taglines. Set those to be in pixels, where (0,0) is the top-left corner of the Flash movie.

If you want to change the box color, open the include_flash.htm page and change the "bgcolor" parameters (it shows up in two places) to your own desired color. You'll need the six-digit web color code to do this.

Vertical menu

The vertical menu is also within an include page (include_menu.htm) to make it easier to edit. When you open the page, it will look like a bulleted list of links. Simply add your own links to the bulleted list and the style sheet will format it on your actual web page!

Note for FrontPage users: The vertical menu won't display properly in Design View of FrontPage... it may be hidden behind the Flash movie, show up at the bottom of the page, or maybe not show up at all. However, since you can edit the menu in the include page, you probably won't find that this is a problem. You can always look in the HTML code for the include_menu.htm include code if you need to delete the menu for some reason:

<div id="menu">
<!--webbot bot="Include" U-Include="include_menu.htm" TAG="BODY" --></div>

When you edit the include page, the other pages will automatically be updated, and when you preview in a browser, you'll see that the menu shows up where it should!

Special buttons

The "print page" and "add to my favorites" buttons make use of Javascript to get their functionality. Please be aware that the "add to my favorites" functionality will only work for Internet Explorer (Netscape/FireFox/Opera/etc. users will only see the "print page" button). If you want to create additional buttons, we have included the Photoshop file for you to start with.

Page Title

The page title must be changed on each page. The page title area is limited, so keep your page titles short.

Pop-up links on About page

To make more of these popup links:

First make a new profile page. You may open an existing profile page (profile.htm) and File > Save As a copy.

Add the new name to the bulleted list on the "about" page. Create a hyperlink (ctrl-K) of the person's name. Link to the profile page. Then, you'll have to go into the HTML code, where the link will look like this:

<a href="yourpage.htm">Person's Name</a>

Add this code, using the same profile page link in the Javascript code, like this:

<a href="yourpage.htm" onclick="pop('yourpage.htm');return false">Person's name</a>

Info Boxes

There are two types of info boxes - one for the left column and one for the right column. The one for the left column can be placed by itself in the 3-column layout, or placed with the content area of the 2-column layout with text wrapping around it.

Left Column

If you want to insert another info box in the left column, you will need to add this HTML code to the page. You'll want to insert it BEFORE the content that will wrap around the right side. Here is the code you should insert, and an example of the code for a paragraph that would wrap around to the right of the box:

<div class="infoboxa">
<div class="infoboxb">
Info box content here
</div>
</div>

<p>This is an example of a paragraph that would wrap around to the right of the box. Insert the code BEFORE the paragraph that you want to wrap.</p>

Right Column

To insert an info box in the right column, add this HTML code to the page:

<div class="infobox2a">
<div class="infobox2b">
Info box content here
</div>
</div>

Footer

The footer can be edited in the include_footer.htm page. Modify the footer with your own company information and links.

Cascading Style Sheets

This template is a table-less layout. Positioning and layout is defined through CSS. You will need to be comfortable with advanced CSS positioning and formatting techniques if you want to make changes to the layout of this site. If you just want to add your content, you will need some basic CSS skills and HTML skills.

CSS Resource Lists


Right col