Features...

• A starter web template to help you to create a new web quickly and easily.
• CSS-based layout for cleaner code and better search engine optimization. No tables used in layout!
• Flexible Flash rotator on splash page. Loop through images, linked images, or your own custom Flash movies. Have as many as you'd like! (Note: You do not need Flash to have image rotations, but you will need to know how to use Flash to create your own custom sub-movies.)
• Variety of page templates available. Easy to switch layouts!
• All Photoshop source files included!
• Tested to work in IE 5+, Netscape 6+, Opera 7+, Mozilla, and FireFox.
• Validated CSS. No-Flash page template is validated HTML 4.01 Transitional (code used to embed Flash movies does not validate).

Licensing Information

The royalty free images used in this template are wholly owned by Corrie Haffly and may only be used with this template. If you wish to license the image for other uses, please contact support@jgtemplates.comm.

• 5308 - Sunset sky
• 5309 - Sunset sky 2
• 5310 - Sunset sky 3
• 4281 - Clouds from above

The Photoshop source files and Flash files are licensed for use with this template only.

Source Files Included

• Photoshop CS2 files
  • addtofav.psd - Used for add to favorites button.
  • bg.psd - Used for page background.
  • closewindow.psd - Used for close window button.
  • columns.psd - Used for columns page background.
  • ecommerce.psd - Used for ecommerce buttons (add to cart, etc.).
  • horizontalbg.psd - Used for horizontal menu background.
  • infobox.psd - Used for info box header background.
  • mainpic.psd - Used for main image in Flash movie.
  • printpage.psd - Used for print page button.
  • productbox.psd - Used for ecommerce product photo image.
  • smallclouds.psd - Used for looping cloud image.
  • topbuttons.psd - Used for top button icon images.
  • yourlogohere.psd - Used for logo image.
• Flash 8 files
  • samplemovie.fla - Used for sample sub-movie.
  • skymovie.psd - Used for looping sky movie.

Not included: Flash source files for image rotation and image transition. They are not needed to modify the image rotation.

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. Unzip your web package.
2. Look for the "expansivev2_web" folder.
3. Copy the contents of this folder to your web directory.
4. Keep a backup of the zip file.

Template Details

The eXPansive v2 v2 DWT package consists of:

1. page layouts, located in the Templates/ folder:
   1. expansivev2_2col .dwt - Two-column page layout.
   2. expansivev2_3col.dwt - Three-column page layout.
   3. expansivev2_pop.dwt - Layout for pop-up pages.
   4. expansivev2 _splash.dwt - Two-column home page layout with Flash movie.
2. the eXPansive v2 v2 DWT starter web site, which allows users to create a new web site from scratch that uses the DWTs. Predesigned pages are included with the site, which you may modify or delete.

DWT Regions

Definition of Editable Regions for DWTs
doctitle	The Title of the Page - this is what appears in the uppermost left status bar of the published page.  To edit this and the following two regions, right click over the body of the page and select Page Properties.  Fill in your own information for the Title, Page Description, and Keywords fields.  You will want to do this on each page.
keywords	Keywords for your Page/Site; important for search engine spidering purposes.  To edit, see instructions above for "doctitle."
description	Description of your Page/Site; important for search engine spidering purposes.  To edit, see instructions above for "doctitle."
scripting	Location for any coding (asp, java script, etc.) which requires placement within the <HEAD> </HEAD> tags of the web page.
sub_menu	Secondary Navigation
banner*	Name of the Page Being Viewed - you may either use the "text" banner provided with FrontPage or type in the title manually.
body1	Main Content - in a 2 or 3 column layout, this content will appear in the widest content column.  In a 1 column layout, this will appear first.
body2	Secondary Content - in a 3 column layout, this content will appear in the left column.  In a 2 column layout, this content will appear in the smaller of the two columns.  In a 1 column layout, this content will appear directly beneath the body1 editable region's content.
body3**	Third Level Content - in a 3 column layout, this content will appear in the right column.  In a 2 column layout, this content will appear directly beneath the body1 editable region's content.  In a 1 column layout, this content will appear directly beneath the body2 editable region's content.
special1	Place for an applet or anything else
special2	Place for an applet or anything else

*not on splash page
** Splash page uses body3 for search-engine-friendly text.

How to use Dynamic Web Templates (General Instructions)

You may use this package in two ways: 1) to create a brand new site or 2) to convert an existing web site.

Creating a New Site using this Package:

1. Copy or move the expansivev2_web folder to the location on your hard drive where you keep your Dreamweaver web sites. You may rename “expansivev2_web” to another name if you'd like, such as “My-Web-Site” or “Project_Site.”
2. Open Dreamweaver. Define a new site and point to that folder as your local site.
3. The Template file(s) should show up within the Assets Panel when you click on the “templates” icon. As you create new pages, click the template you want to use and drag and drop it on top of the new page to apply the design.

Using this Package with an Existing Web Site Built with DWTs:

1. Open Windows Explorer (or similar browsing utility). Open the expansivev2_dwt folder and copy all the files and folders inside the expansivev2_dwt folder.
2. Browse to the local copy of your web site.
3. Paste all the files and folders into your local web site folder. Note that this may replace some of the existing graphics and/or files in your web site, so you may want to back up the local copy of your web site first.
4. After opening Dreamweaver, you may open your pages and go to Modify > Templates > Apply Template. The new Templates should automatically show up in the list of templates and you may apply them.
5. It is possible that the Templates don't automatically show up in the Assets > Templates panel when you first add the new files. If this is the case, just open all the .dwt files in Dreamweaver (within the Templates folder), then close and restart Dreamweaver. This “forces” Dreamweaver to recognize the templates so that they show up in the Assets panel.
6. If you want to use some of the sample starter pages within the "starter" folder, drag them out into the root folder (using the Dreamweaver file manager so that links are renamed) and edit them.

About Dynamic Web Templates

1. Dynamic Web Templates are identified by the extension " .dwt. "
2. The Dynamic Web Templates for this package are located in the " expansivev2_dwt/Templates " folder. These will eventually end up in the “Templates” folder of your Dreamweaver web site.
3. Dynamic Web Templates act as the " base " for all of your web site (.htm) pages. If you change the underlying .dwt, all the web pages based on that .dwt will change. This makes for easy site-wide changes to the underlying design.
4. Dynamic Web Templates have "editable" and "non-editable" regions .
   1. Editable Regions can change from page to page -- your page content, for example. You can open the web site pages (.htm) and make changes in the Editable Regions.
   2. Non-editable Regions are areas defined by the base .dwt, and cannot be changed on the individual .htm pages.
   3. To change non-editable regions , you will have to open the base .dwt file. Changing this .dwt file will change every page associated with it across your web site.
      1. Open the “Templates” folder.
      2. Open the DWT you want to change.
      3. Make your changes and save. The changes will propagate across all the pages that are associated with that DWT.
5. Template packages may require you to change the .dwt files in order to add your logo and change copyright information. Please see the Template-Specific Instructions below.

Specific Template Instructions

Page Templates

This template comes with several page layout options:

• Splash page - The splash page includes both a Flash movie in the left column and the Flash rotator component in the right column.
• 2 Column Template - This fixed-width page is aligned to the left.
• 3 Column Template - This fixed-width page is aligned to the left, and includes an additional right column.
• 2 Column Resizable Template - This resizable page has two columns; the left column is fixed-width.
• 3 Column Resizable Template - This resizable page has three columns; the left and right columns are fixed width.
• 2 Column Centered Template - This fixed-width page is aligned in the center of the page.
• 3 Column Centered Template - This fixed-width page is aligned in the center of the page and includes an additional right column.

Easily change from one layout to another! This template is built to give you the flexibility of easily changing from one layout to another. That is -- you can go from a 2 column fixed width page to the 2 column resizable page. (You cannot switch from 2 columns to 3 columns.) There are three different stylesheets used. All you have to do is open up the web page that you wish to modify and look in HTML or Code view for the stylesheet code (near the top of the page, in the scripting editable area):

<style type="text/css">
<!--
@import "styles.css";
-->
</style>

Change the stylesheet URL to be:

• styles.css - Fixed width left-aligned page
• styles-centered.css - Fixed width centered page
• styles-resizable.css - Resizable width page

*Note: The Flash rotator's width is fixed. If you change the home page to be the "resizable" layout, the Flash rotator will still only be the same width and you'll see the blue background expand to the right of it.

Libraries

The top area, left column sky movie, left menu, "add to favorites/print page" buttons, and footer are in library items . Editing the library item will update the other pages across your web site. Open them, make your changes, and save.

Your Logo Here top area

The "your logo here" area is a graphic. It is a library item ("top") so you can change it easily across all the pages.

Top image buttons

The top image buttons are in the "top" library item. You can delete the buttons you don't want, or insert your own. We've included the Photoshop file if you wish to make your own buttons.

Horizontal menu

The horizontal menu is made up of hard-coded text links in list format. The stylesheet formats the list to be horizontal.

Flash animation

Sky movie

The sky movie is a Flash movie. We have included the Flash source file, so you will need Macromedia Flash 8+ to edit the Flash animation (to change the speed, image, etc.).

If you do not want the sky movie on a page, just delete it. The static image will still be in the background.

Splash page Flash rotator

The splash page features a Flash rotator, which features:

• ability to change number of images or sub-movies displayed
• dynamic loading of images or sub-movies
• ability to link images to other pages or web sites

Our sample movie displays one custom-made sub-movie and three static images in the rotation. The three images are hyperlinked to the getting started and template pages.

What are sub-movies? Sub-movies are Flash movies (that you have to create using Macromedia Flash) that can be loaded into the Flash rotator.

How can I use the Flash rotator? The Flash rotator is flexible, allowing you to be creative! You might want to create sub-movies for announcements, featured products, upcoming events, or anything else you can think of. Or, create static images and link to other areas of your site. Churches might create images or sub-movies for upcoming events. Businesses can feature key products in the rotation. The possibilities are endless!

Changing the Flash rotator

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

ad1=images/mainpic1.jpg << This loads the static image.
&&adURL1=NONE << This is set to NONE, so the first image does not get linked.
&&ad2=images/mainpic2.jpg << This loads the next image.
&&adURL2=NONE << This is set to NONE, so the second image does not get linked.
&&ad3=images/mainpic3.jpg << This loads the last image.
&&adURL3=gettingstarted.htm << The loads the link for the last image.
&&ad4=samplemovie.swf << This loads the sample sub-movie.
&&adURL4=FALSE << This must be set to "FALSE" for sub-movies.
&&numAds=44 << This specifies how many loaded movies and images there are.
&& << Leave this here.

numAds can be increased to the number of images or sub-movies you want to loop through. Then, it's just a matter of adding an "ad#" and "adURL#" pair, with the new variables preceded by "&&" as shown above.

• ad# should be the location of the image or movie, relative to where homemovie.swf is (usually in the root folder)
• adURL# is a special variable which can be a hyperlink ("index.hm" or "http://www.yoursite.com"), FALSE (if the related ad# is a Flash sub-movie), or NONE (if the image is not going to have a hyperlink).

Requirements for images and Flash sub-movies:

• Images
  • 542x100 pixels
  • Should be non-progressive jpegs..
• Flash movies
  • 542x100 pixels
  • The background color will not show up, so you should place a solid-colored box in the bottom layer if you want a different background color.
  • You must add a keyframe at the end of the movie with an action for "movieDone=true;". This will tell the home page movie that your movie is done and that it can loop to the next image or movie. See the included samplemovie.fla (Flash 8) if you need to.
  • Any beginning or ending transitions should be included in the Flash movie.

Changing the image transition effect (Flash required):

The image transition (the "flash/fade" effect) is held within the imagemask.swf movie. You can make your own image transition to replace this.

• Create a movie called imagemask.fla that is 542x100 pixels.
• The movie should run for as long as you want the image to stay up, including time at the beginning and end for the transition.
• Create your transitions at the beginning and end of the movie, leaving the canvas clear in the middle of the movie. The home page movie will allow the loaded image to show through this imagemask movie.
• Export your movie to imagemask.swf and replace the existing one.

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

Vertical menu

The vertical menu is 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! You can modify the list to have different submenus on different pages.

Special text area/Page Title

All the pages apart from the splash page have a special text area with the page title. This area is limited in height (100px).

The page title uses Heading 1.

Catalog page

Each product "block" on the catalog page is made up of code like this:

<div class="catalog">
<a href="catalog-detail.htm" onclick="pop('catalog-detail.htm');return false;">
<img border="0" src="images/productbox.gif" width="80" height="80"></a><br>
<b>Product Name<br>
</b>$xx.xx<br>
<a href="catalog-detail.htm" onclick="pop('catalog-detail.htm');return false;">view details
</a>
</div>

Copy and paste this after the </div> from an existing product.

The stylesheet allows these blocks to automatically go onto another line.

The height is limited. If you want to reset the height to be taller or shorter, open the stylesheet and look for this code:

.catalog {
...
height: 150px;
...
}

Change the height value to be whatever you need it to be.

Pop-up links on About and Catalog page

To make more of these popup links:

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

On the "about" page or the "catalog" page, link to the profile or detail page, like this:

<a href="yourpage.htm">Text</a>

Now add this Javascript code, like this, with the same URL:

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

Info boxes

The 3-column template has info boxes in the right column. The HTML code for an info box looks like this:

<div class="infobox">
<h2>Title</h2>
<p>Text</p>
</div>

You can add more info boxes after the last </div> of the previous info box.

Footer

Modify the footer with your own company information and links in the "footer" library item.

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

• Eric Meyer's resource list
• CSS Zen Garden
• CSS Zen Garden's resource list
• glish.com

Copyright and Licensing Information:

1. Copyright:  The copyright for this DWT and accompanying design remains with the designer, John Galt's Templates.  You may not claim ownership of the design, nor may you use it for any purpose other than that explicitly set forth below in the Licensing section.
   
2. Licensing:  The license fee for this design is a site license, not a user or computer license.  This DWT design is, therefore, licensed for use on ONE SITE ONLY.  If you wish to use this design on subsequent sites, you must purchase a license for each additional site.

Help and Problem Resolution:

1. General instructions and DWT tutorials:  visit our site at www.jgtemplates.com .
   
2. Problems related to the design/use of this DWT Design:  Please e-mail support@jgtemplates.com for help or to report problems with this specific design.