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!
  • Corbis 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 Corbis and Advantrics LLC. If you wish to purchase larger versions of the images for your own marketing use, please go to Corbis' web site and look for the following images:
  • Couple driving - CB008227

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

General Instructions

  1. Unzip your web package.
  2. Look for the "carwindow_web" folder.
  3. Copy the contents of this folder to your web directory.
  4. Keep a backup of the zip file.

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

Your Logo Here top area

The "your logo here" area is a graphic. We've included the source Photoshop 7 file for your convenience. You may delete the placeholder graphic and insert your own logo (you may 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 to edit the HTML. Run a Find/Replace command to replace "mainpic.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

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.

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