Getting Started
Template

Info box...

Use this left column info box for a submenu or more information.

Getting Started

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 that you can use by adding your content and renaming pages.
  • Flash menu and picture area can be modified without needing Flash! You just need to change the text variables in the code. Flash picture area gives you more room for description text. Different movies provided with different numbers of buttons to fit your needs.
  • New: SWFObject embed code used for automatic Flash detection and Flash embedding.
  • Table-less CSS layout gives cleaner code, which means better search engine optimization. All positioning and layout is accomplished through a cascading style sheet.
  • Flash and Photoshop source files are included!
  • Photos.com images used legally. Licensing arrangements have been made so that the images may be used in this template.
  • Tested to work in IE, Opera 7+, Netscape 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 Photos.com and Advantrics LLC. If you wish to purchase larger versions of the images for your own marketing use, please go to www.photos.com and look for the following images:

  • Laptop - 15612229

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 Photos.com images.

General Instructions

  1. Make a new web...
    1. Unzip your web package.
    2. Look for the "computerwindow_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.
    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 lines - you may "freeze" the page so that it no longer resizes properly. We also suggest that you do not directly add columns to this layout, as you may accidentally "freeze" the page so that it no longer resizes. Instead, delete the page template content, then go to Table/Insert/Table to add your own table in the center area. You may click within a table and go to Table > Select > Table to get a better idea of the table structure of this page.
    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!

Source Files Included

  • Photoshop 7 files
    • accent.psd - Used for the square accent graphics.
    • mainpic.psd - Used for the photo.
    • yourlogohere.psd - Used for the logo file
  • Flash MX 2004 file (not necessary if just editing text and links!)
    • mainpic.fla - Seven button movie
    • mainpic-6.fla - Six button movie
    • mainpic-5.fla - Five button movie

Not included: Font file. Logo and menu font is Myriad, available through many online font distributors. You may use your font of choice!

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.

Template Details

Include Pages

The header, Flash menu, 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 header, menu, and footer will be updated across all your other pages.

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 7 file for your convenience. You may delete the placeholder graphic and insert your own logo or use the included Photoshop file to create your own.

Flash Area

Flash Menu

The Flash-based menu system does NOT require the Flash program to edit the text or image! The movie uses variables, defined within an external text file, to define the text on the button and the linked page.

To simply change the text and link, open variables.txt and change the text and URL corresponding to the menu button you wish to edit.

&t2=ABOUT
&d2=All about you.
&url2=about.htm
...

Use capital letters for the menu text, otherwise it may not display properly.

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.

Flash Picture

The image may also be easily switched by creating your own picture (706x182 pixels) and saving it as mainpic.jpg, then replacing the existing file in the web.

Note: If the image is saved as a .jpg and still does not load, check your image-saving settings to make sure that you did NOT save it as a "progressive" image.

Replacement Movies

We've created additional movies with six and five buttons (instead of the seven shown here) for your convenience! To use a different movie instead of the seven-button movie, open include_mainpic.htm and go to Code or HTML view. Run the Replace command to replace "mainpic-6.swf" with "mainpic-6.swf" or "mainpic-5.swf." Then save and close. All your other pages will be updated automatically.

Then, open variables.txt and delete the last set(s) of variables as needed and modify the first variables as necessary.

Editing the Flash Source Files

You will need to edit the Flash movie IF:

  • You wish to change the animation
  • You wish to change the font
  • You wish to change the font field to accept lowercase letters or other language characters
  • You wish to change the colors/design

We have included the Flash source files with this package but we do not provide support for actually modifying the movies.

Info Boxes

You may create more info boxes in the left column as needed. We used divs with the "infobox" style applied. The submenu area is a paragraph with the "submenu" style applied.

Footer

The footer can be edited in the include_footer.htm page. Modify the footer with your own company information and links. If you use the Flash menu buttons, we suggest duplicating the links of your site in the footer so that search engines can more easily read them. The navigation in the footer is made up of hard-coded links. You will have to add your own links manually, OR insert your own FrontPage link bar.

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