body2 region

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

Starter web site helps you to start a web site quickly and easily.
CSS-based layout gives cleaner code. No tables or JavaScript used!
Fixed-width layout is for a minimum of 1024 browser width.
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.)
Print stylesheet strips out header, menus, and footer and displays columns stacked on top of each other for cleaner printing. Handheld stylesheet stacks all the content areas on top of each other and removes image area for faster loading.
All Photoshop files included.
Uses Dynamic Web Templates for scalable and easy to maintain web sites.
Include pages used for top, menu, and copyright area for easy editing.
Tested to work in IE 6, 7, Netscape 8, Opera 6, 7, 8, 9, FireFox 1, 2, and Safari 2.
Validated XHTML 1.0 Strict, CSS. Priority 2 WCAG 1.0 and Section 508 accessible.

Licensing Information

The images in this template are legally licensed for use with this template.

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.

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 the SWFObject site to check for updates and implement them.

Source Files Included

Photoshop CS2 files
- bg.psd - Used for horizontal image collage backgrounds.
- columns.psd - Used for repeating image that forms column backgrounds.
- logo.psd - Used for logo image
- mainpic.psd - Used for main photos that rotates in Flash movie
Flash 8 files
- homemovie.fla - Used for Flash rotator.
- imagemask.fla - Used for image mask effect.

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

General Information Regarding this DWT Package

The Dynamic Web Templates in this package are Dynamic Web Template Interchange Guidelines (DWTIG) Compliant. This DWT package consists of:

page layouts, located in the flawlessphoto_dwt/ folder:
1. flawlessphoto_2col.dwt - Two-column page layout.
2. flawlessphoto_3col.dwt - Three-column page layout.
a 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.

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.
banner: Name of the Page Being Viewed - uses Heading 1.
sub_menu: Room for secondary navigation.
body1: First Level Content in the widest column.
body2: Second Level Content in the left column.
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.
special1: Additional content area for page image text overlay or alternative Flash content, if desired.
special2: Used for Flash SWFObject scripting.

How to use Dynamic Web Templates

Starting from Scratch - Using the FrontPage Web Template

If you are starting from scratch, we encourage you to use the included FrontPage Web Template.

Save the download (.zip format) to your computer (note the location so that you can find it!). Unzip the file to a folder. Open the folder.
Look for the "flawlessphoto_web" folder.
Copy this folder to your "My Webs" directory.
In FrontPage, go to File > Open Web or Open Site and browse to this folder to begin editing your site.
You may then open pages from the Folder List and begin editing in the "editable regions." See the Template Specific Instructions below for more information about changing your logo and using the templates.

Applying a DWT to an Existing DWTIG Compliant Web Site

This template is DWTIG Compliant, which means that you can easily apply it to any web site built with a DWTIG Compliant template. You may attach the DWT one page at a time or to several pages at once. (Your first time, attach it to one page to test it out. If it doesn't work, you can undo it.) If your web site is not DWTIG Compliant, please see the instructions below.

Save the download (.zip format) to your computer (note the location so that you can find it!). Unzip the file to a folder. Open the folder.
Next, you must import the DWT package into your existing web site. Open your web site in FrontPage. In the package you received is a folder labeled "flawlessphoto_dwt." Drag/drop this folder into the folder list in FrontPage. (Alternatively, go to FrontPage, then go to File > Import, click "Add Folder," and navigate to the flawlessphoto_dwt folder. Click Open, then OK.)
Inside the DWT package folder is a folder called "moveme." Move the image files into the root images folder, and move the other files into the root folder of your web site.
Attach the DWT:
1. One page: Open your DWTIG Compliant web site in FrontPage 2003. Open one of the pages in Design View. Select Format > Dynamic Web Template > Attach Dynamic Web Template. Browse to the flawlessphoto_dwt folder and choose the template you want to apply. Click "Open." You should see your new design apply immediately! Repeat this to your other pages (or apply to Several Pages at once).
2. Several pages: Open your Folder List, if not already open, by going to View > Folder List. Hold down the Ctrl key and click on each file name that you want to convert. Let go of the Ctrl key when you're done. Go to Format > Dynamic Web Template > Attach Dynamic Web Template. Browse to the flawlessphoto_dwt folder and choose the template you want to apply to all of these pages. Click "Open." You should see your new design apply immediately!
You may now open your pages and begin editing in the "editable regions." Please see the Template Specific Instructions below for more information about changing your logo and using the templates.

Applying a DWT to an Existing Web Site that uses DWTs but is not DWTIG compliant

You may attach the DWT one page at a time or to several pages at once. (Your first time, attach it to one page to test it out. If it doesn't work, you can undo it.) Then, you'll assign the existing content to new regions.

Save the download (.zip format) to your computer (note the location so that you can find it!). Unzip the file to a folder. Open the folder.
Next, you must import the DWT package into your existing web site. Open your web site in FrontPage. In the package you received is a folder labeled "flawlessphoto_dwt." Drag/drop this folder into the folder list in FrontPage. (Alternatively, go to FrontPage, then go to File > Import, click "Add Folder," and navigate to the flawlessphoto_dwt folder. Click Open, then OK.)
Inside the DWT package folder is a folder called "moveme." Move the image files into the root images folder, and move the other files into the root folder of your web site.
Attach the DWT:
1. One page: Open your web site in FrontPage 2003. Open one of the pages in Design View. Select Format > Dynamic Web Template > Attach Dynamic Web Template. Browse to the flawlessphoto_dwt folder and choose the template you want to apply. Click "Open."
2. Several pages: Open your Folder List, if not already open, by going to View > Folder List. Hold down the Ctrl key and click on each file name that you want to convert. Let go of the Ctrl key when you're done. Go to Format > Dynamic Web Template > Attach Dynamic Web Template. Browse to the flawlessphoto_dwt folder and choose the template you want to apply to all of these pages. Click "Open."
A pop-up screen will come up to allow you to assign content to regions. It will list your existing regions from the "old" layout. You will have to double-click each region and assign it to the correct region in the "new" layout. Please see the table above for a description of the included regions. After assigning the regions, click OK. You should see the new design take effect!
You may now open your pages and begin editing in the "editable regions." Please see the Template Specific Instructions below for more information about changing your logo and using the templates.

Applying a DWT to an Existing Web Site that does NOT use DWTs

After some prep work to "strip" your web site, you may attach the DWT one page at a time or to several pages at once. (Your first time, attach it to one page to test it out. If it doesn't work, you can undo it.)

Prep work: You will have to do prep work to "strip down" your pages. You will want to end up with your "bare bones" content -- no navigation bars, no page banner, no "design elements" (the parts of the layout -- graphics, table structure, etc-- that are consistent across pages). Please see our web site at www.jgtemplates.com/learn to see more details about how to accomplish this. When you're done, move on...
Save the download (.zip format) to your computer (note the location so that you can find it!). Unzip the file to a folder. Open the folder.
Next, you must import the DWT package into your existing web site. Open your web site in FrontPage. In the package you received is a folder labeled "flawlessphoto_dwt." Drag/drop this folder into the folder list in FrontPage. (Alternatively, go to FrontPage, then go to File > Import, click "Add Folder," and navigate to the flawlessphoto_dwt folder. Click Open, then OK.)
Inside the DWT package folder is a folder called "moveme." Move the image files into the root images folder, and move the other files into the root folder of your web site.
Attach the DWT:
1. One page: Open your DWTIG Compliant web site in FrontPage 2003. Open one of the pages in Design View. Select Format > Dynamic Web Template > Attach Dynamic Web Template. Browse to the flawlessphoto_dwt folder and choose the template you want to apply. Click "Open."
2. Several pages: Open your Folder List, if not already open, by going to View > Folder List. Hold down the Ctrl key and click on each file name that you want to convert. Let go of the Ctrl key when you're done. Go to Format > Dynamic Web Template > Attach Dynamic Web Template. Browse to the flawlessphoto_dwt folder and choose the template you want to apply to all of these pages. Click "Open."
A pop-up screen will come up to allow you to assign content to regions. It will list your one "body" region from the "old" layout. Double-click the "body" region and change the "New Region" dropdown to "body1." Click OK. You should see the new design take effect!
You may now open your pages and begin editing in the "editable regions." Please see the Template Specific Instructions below for more information about changing your logo and using the templates.

About Dynamic Web Templates and the DWTIG

Dynamic Web Templates are identified by the extension ".dwt."
The Dynamic Web Templates for this package are located in the "flawlessphoto_dwt" folder.
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.
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 "flawlessphoto_dwt" 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.
This template package requires you to change the .dwt files in order to add your logo and change copyright information. Please see the Template-Specific Instructions below.
The Dynamic Web Template Interchange Guidelines are a set of guidelines used by many developers to provide dynamic web templates that interchange seamlessly.
This template follows the DWTIG. This means that you can apply any other DWTIG-compliant template to your web site and have it convert painlessly and easily. Or, you can apply this DWT package to any DWTIG-compliant site in a few steps.
If you have a web site with scripting, there are some special considerations that you will have to make when using DWTs. Please refer to the DWT Interchange Guidelines website (www.dwtig.com) for current information regarding scripting (ASP, Javascript, etc.) located outside the <body> </body> tags of web pages.

Template-Specific Instructions

IMPORTANT INFORMATION:
Within these instructions, we provide directions on changing the logo, image, and copyright areas within the DWTs. We do NOT encourage that you change anything else about the DWTs, as this affects your entire web site. Please realize that if you change the DWT file(s), we may not be able to support the product. You should expect to keep the underlying design "as is."

Include Pages

The top area, 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 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 flawlessphoto _dwt/includes/top.htm page. We've included the source Photoshop file for your convenience. Open the top.htm page to replace the logo with your own.

Top menu

The top menu is also in the flawlessphoto _dwt/includes/top.htm page. It is made up of bulleted links that the stylesheet then formats. To add more links to the top menu, open the include page, add more links to the list, and save.

Picture collage

Each page has a background image defined in the CSS. You can change the default background image in the main stylesheet:

#flashmovie {
background: url('images/bg.jpg') no-repeat;
...

Some of the pages use a different background image. You can use your own 950x177 pixel image by modifying the internal stylesheet, which can be found in the HTML code near the top of the page:

#flashmovie { background-image: url('images/bg2.jpg'); }

Flash animation

This template 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 four static images in the rotation.

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. Here is an example of how you can modify the code (line breaks and comments added here for readability):

ad1=samplemovie.swf << This loads the sample sub-movie.
&&adURL1=FALSE << This must be set to "FALSE" for sub-movies.
&&ad2=images/mainpic1.jpg << This loads the static image.
&&adURL2=template.htm << This loads the link for the static image.
&&ad3=images/mainpic2.jpg << This loads the next image.
&&adURL3=NONE << This is set to NONE, so the second image does not get linked.
&&ad4=images/mainpic3.jpg << This loads the last image.
&&adURL4=gettingstarted.htm << The loads the link for the last image.
&&numAds=4 << 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
- 400x177 pixels
- Should be non-progressive jpegs.
Flash movies
- 400x177 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 400x177.
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.

Left menu

The menu is in the flawlessphoto_dwt/includes/menu.htm page. It is made up of hard-coded text links in list format. Open the include page, edit or add to the links, and save to update the web site.

Page Title

The page title uses Heading 1.

Footer

The footer can be edited in the flawlessphoto _dwt/includes/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.

Note: Because FrontPage's Normal/Design view does not always display CSS properly, the right column may "wrap" beneath the main column in Design View and heading font may seem very large. This is fine -- if you preview the page in a browser, you'll see that the elements display properly.

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.

CSS Resource Lists

Copyright and Licensing Information:

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

General instructions and DWT tutorials: visit our site at www.jgtemplates.com.
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.

body3 region