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!
- All Photoshop and Flash source files included.
- Include pages used for logo,
menu, submenus, and copyright area for easy editing.
- Dynamic Web Templates used; DWTIG-compliant.
- FlashObject embed code included for automatic Flash
detection and embedding. Alternate content included so
people who don't have Flash will still see your site.
- Tested to work in IE 5+, Netscape 6+, Opera 7+, and FireFox.
- Validated XHTML 1.0 Strict, CSS. Priority 1
and 2 WCAG
1.0 and Section 508 accessible.
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.
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:
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.
Source Files Included
- Photoshop CS2 files
- bigmenu.psd - Sliced image used for home
page menu images
- bigpicture.psd - Multilayered image used
for title page banner images
- copyright-curve.psd - Curve for
copyright area
- menu-curve.psd - Curve for menu area
- yourlogohere.psd - Used for logo image
- Flash 8 files
- movie1.fla, movie2.fla.... movie6.fla - Used for home
page menu movies
- title1.fla, title2.fla .... title6.fla - Used for inner
page title movies
- title.fla - Generic title movie
Source files are licensed for use with this template only. User is
expected to know how to use Photoshop or Flash to modify the files; support not
included.
Flash Detection Script
This template uses the FlashObject (v1.3) Flash detection and
embed script provided by Geoff
Stearns at
http://blog.deconcept.com/flashobject/. 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 FlashObject 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 FlashObject 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 FlashObject site to check for
updates and implement them.
General Information Regarding this DWT Package
The Dynamic Web Templates in this package are Dynamic
Web Template Interchange Guidelines (DWTIG) Compliant. The
Absolute Globe v3 DWT package consists of:
- page layouts, located in the absoluteglobev3_dwt/ folder:
- absoluteglobev3_2col.dwt - Two-column page layout.
- absoluteglobev3_1col.dwt - One-column page layout.
- absoluteglobev3_splash.dwt - Splash page layout.
- the Absolute Globe v3 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.
| 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 - you may either
use the "text" banner provided with FrontPage or type in the title
manually. |
| sub_menu* |
Secondary Navigation - uses FrontPage navigation
structure link bar; depending on the location of the page in the
FrontPage navigation structure, this will be set to either "Child"
or "Same" level. Default is "Child" level (see "Navigation
Changes" below). |
| 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 used on splash page template
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 "absoluteglobev3_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 "absoluteglobev3_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
absoluteglobev3_dwt
folder. Click Open, then OK.)
- In the _dwt package folder is a folder called moveme.
Move the files from this folder into the root folder.
- Attach the DWT:
- 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 absoluteglobev3_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).
- 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
absoluteglobev3_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 "absoluteglobev3_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 absoluteglobev3_dwt
folder. Click Open, then OK.)
- In the _dwt package folder is a folder called moveme.
Move the files from this folder into the root folder.
- Attach the DWT:
- 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
absoluteglobev3_dwt
folder and choose the template you want to apply. Click "Open."
- 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
absoluteglobev3_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 "absoluteglobev3_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
absoluteglobev3_dwt
folder. Click Open, then OK.)
- In the _dwt package folder is a folder called moveme.
Move the files from this folder into the root folder.
- Attach the DWT:
- 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
absoluteglobev3_dwt
folder and choose the template you want to apply. Click "Open."
- 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
absoluteglobev3_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 "absoluteglobev3_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.
- 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.
- Non-editable Regions are areas defined by the base .dwt,
and cannot be changed on the individual .htm pages.
- 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.
- Open the "absoluteglobev3_dwt" folder.
- Open the DWT you want to change.
- 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."
When first applying a DWT
When you first apply the 1-column or 2-column DWTs, you won't see
the page banner. There are a few steps you will need to take to get
the page banner working properly.
- Look in the source code for this code:
<style type="text/css">
<!--
#flashtitle { background: url("absoluteglobev3_dwt/images/bigpicture.jpg")
no-repeat; }
-->
</style>
Delete the bolded code and the image will show up. (You can
change 'bigpicture.jpg' to be the picture of your choice - for
example, bigpicture1.jpg, bigpicture2.jpg, etc.) This image is
alternate content for people who don't have the Flash
player.
- To fix the page banner for people who do have the Flash
player, please read below ("Other Pages Flash Banner Area") for
information on changing the page banner area for the Flash movie
and alternate content. First you will need to decide if you want
to use the generic banner or the colored page banners:
- generic: The 1-column and 2-column DWTs by default
insert the "generic" page banner. Follow the instructions in
the section below for editing the generic page banner text.
- colored: You can easily switch to the colored page
banners by performing the following steps:
- Click in the page banner region, then switch to Code
View or Split View.
- Scroll down in the code until you see this:
<script type="text/javascript">
// <![CDATA[
var fo = new FlashObject("title.swf",
"movie", "750", "108", "6", "#ffffff"); // change to
title2.swf, title2.swf, etc. for non-generic titles
fo.addVariable("title", "one column template"); //
Delete this line...
fo.write("flashtitle");
// ]]>
</script>
- Delete the line of code (in bold above), then change
"title.swf" (highlighted above) to title1.swf,
title2.swf, .... or title6.swf.
Include Pages
The logo, home page Flash menu system, text menu, submenu 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
absoluteglobev3
_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.
Home Page Flash Menu Area
The home page has six Flash menus that allow you to have a
title and description. They then link to the appropriate page.
You can easily:
- Change the title text
- Change the description text
- Change the link to the page
- Change the "on" and "off" images used
You must modify the Flash source files if you wish to:
- Change the number of menus without affecting the layout
- Change the animation, font, text colors, text size, or
text placement
Instructions for changing the Flash menu area:
- Changing the images: Create six sets of "on" and
"off" images (125x211 pixels), named
bigmenu-1.jpg/bigmenu-1-over.jpg,
bigmenu-2.jpg/bigmenu-2-over.jpg, .... through
bigmenu-6.jpg/bigmenu-6-over.jpg. These should be
non-progressive jpegs. You can use the included Photoshop
source file if you wish. Import these into the images folder
to replace the existing images.
- Changing the text, description, and links: Open
variables.txt. You'll see text that looks like this (line
breaks added here for legibility:
title1=about us << first title
&&desc1=All about us. << first
description
&&loc1=aboutus.htm << first
link
&&title2=services
&&desc2=Describe your services here.
&&loc2=services.htm
&&title3=support
&&desc3=Get the help you need.
&&loc3=support.htm
&&title4=read me
&&desc4=Get started with this product.
&&loc4=readme.htm
&&title5=faq
&&desc5=Answers to commonly asked questions.
&&loc5=faq.htm
&&title6=contact
&&desc6=Contact us!
&&loc6=contact.htm
&&
Change the variables (without deleting the "&&" and variable
names) to your desired text, description, and links. Save,
and the Flash movie will be automatically updated.
- Changing the "alternate content": The alternate
content is what shows up for someone who doesn't have the
Flash Player on their computer. You will have to open the
absoluteglobev3_dwt/includes/homeflash.htm page to view this in the
actual code of the HTML page as hard-coded links:
<div id="flash1">
<a href="about.htm">About Us</a>
</div>
<div id="flash2">
<a href="services.htm">Services</a>
</div>
<div id="flash3">
<a href="products.htm">Products</a>
</div>
etc...
If you make changes to the Flash movie buttons, be sure to
make changes to the alternate content buttons as well! (The
images will replace automatically if you have replaced them
for the Flash movie.)
Save the include page after making your changes and the home
page will be updated automatically.
Other Pages Flash Banner Area
The other pages have Flash banners that you can easily
update. There are seven Flash banners -- six that match
the colors on the home page and pull the page title
automatically from the variables.txt file, and a seventh Flash
banner that shows the original colored image and allows you to
have different titles on different pages (more about that
later).
Six colored Flash banners
The six colored Flash banners are called title1.swf,
title2.swf, .... title6.swf, and correspond with the six colored
menus on the home page.
You can easily...
- Change the title text: If you want to change the
title text, follow the same instructions for changing the
title text on the home page movies. The six colored banner
movies will automatically update.
- Change the image used: To change the image used
in the Flash banner, create an image that is 750x108 pixels
and save it as bigpicture1.jpg, or bigpicture2.jpg, and so
on through bigpicture6.jpg. This should be a non-progressive
jpeg. Import the image into your images folder and the image
will replace itself in the Flash movie.
- Change the alternate content: The alternate
content is what shows up for someone who doesn't have the
Flash Player on their computer. You can view this in the
actual code of the HTML page if you look for code like this:
<h1 class="title">one column template</h1>
If you change the text in the variables.txt file, you will
additionally need to change this page title that is in the
HTML code.
You must modify the Flash source files if you wish to:
- Change the animation, font, text colors, text size, or
text placement
- Have a colored banner with a different page title than
its related menu title on the home page (see generic banner
info below)
Generic Flash banner
This template comes with a "generic" Flash banner which
allows you to have different page titles on different pages. You
can see examples of these on the template pages (one column
template, two column template, etc.).
You can easily...
- Change the image used: You can change the ONE
image that is used in all of the generic banners. To change the image used
in the Flash banner, create an image that is 750x108 pixels
and save it as bigpicture.jpg. This should be a non-progressive
jpeg. Import the image into your images folder and the image
will replace itself in the Flash movie.
- Change the text on different pages: To change the
text of the generic Flash movie on a particular page, open
the page and look in the HTML code for this:
<script type="text/javascript">
// <![CDATA[
var fo = new FlashObject("title.swf", "movie", "750", "108",
"6", "#ffffff");
fo.addVariable("title", "1 column template");
fo.write("flashtitle");
// ]]>
</script>
Change the title of the page in the code (bolded above).
You will also need to change the title of the page in the
alternate content area. Look for code (above the previous
code) that looks like this:
<h1 class="title">one column template</h1>
Change that as well.
You must modify the Flash source files if you wish to:
- Change the animation, font, text colors, text size, or
text placement
- Have a different image for each generic banner - sorry!
Menu
The menu is in the absoluteglobev3
_dwt/includes/menu.htm page. It is
made up of text links in a bulleted list. Open the include page,
edit or add to the links, and save to update the web site.
Vertical menu
The vertical menu is a
bulleted list of links in the absoluteglobev3
_dwt/includes/submenu.htm page. Simply add your own links to the
bulleted list and the style sheet will format it on your actual
web page! If you want different submenus on different pages,
open the absoluteglobev3
_dwt/includes/submenu.htm page, go to File > Save As, and
change the links and link text. Then, open the page(s) that you
want the new menu on, double-click on the menu to open the
include page dialog box, and change the URL to point to the new
include page.
Footer
The footer can be edited in the absoluteglobev3
_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.