Different title graphics available:

Title pic 1
titlepic1.jpg

Title pic 2
titlepic2.jpg

Title pic 3
titlepic3.jpg

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!
  • Libraries and Dynamic Web Templates used for easier editing.
  • All Photoshop and Flash source files included.
  • Flash movie on home page and for page titles on inner pages. Replacement images and Photoshop file available if you don't want the Flash.
  • Flash detection script included. Easy to use!
  • Tested to work in IE 5+, Netscape 6+, Opera 7+, and FireFox.
  • Validated HTML 4.01 Transitional, CSS. Priority 1 and 2 WCAG 1.0 and Section 508 accessible.

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:

  • Boy in front of family - 42-15514057
  • Girl on swing with parents - RF4471138
  • Little girl - RF246618

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
    • columns.psd - Used for column background images
    • flash-replacement.psd - Use this to create your own static page title graphics to replace the Flash movies
    • headerbg.psd - Used for gradient behind header bar
    • leftcolpid - Used for left column picture on home page
    • mainpic.psd - Used for Flash movie picture (home page)
    • splash-replacement - Use this to create your own static splash page graphic to replace the Flash movie on the home page
    • titlepic.psd - Used for Flash movie picture (inner page title)
    • yourlogohere.psd - Used for text logo graphic
  • .png blank graphics
    Static graphics to replace Flash movies. High-quality png files; overlay your own text in an image editor.
    • flash-replacement1.png
    • flash-replacement2.png
    • flash-replacement3.png
    • splash-replacement.png
  • Flash 8 files
    • splash.fla
    • title.fla

*Note: All source files are licensed for use with this web site template only and may not be used in any other projects, web sites, or applications.

Not included: Century Gothic font used in page titles, logo, and splash page movie.

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 Instructions

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

Template Details

The Family First DWT package consists of:

  1. page layouts, located in the Templates/ folder:
    1. familyfirst .dwt - Two-column page layout.
  2. the Family First 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

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 familyfirst_web folder to the location on your hard drive where you keep your Dreamweaver web sites. You may rename “familyfirst_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 familyfirst_dwt folder and copy all the files and folders inside the familyfirst_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 " familyfirst_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

Libraries

The top area, menu, left menu, 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.

Horizontal menu

The horizontal menu is made up of hard-coded text links in list format in the "menu" library item. The stylesheet formats the list to be horizontal. You can have up to six links.

Splash page Flash movie

This template comes with a Flash movie on the splash page.

Without needing Flash, you can change:

  • The text (English characters), including text with line breaks
  • Placement of the text
  • Image

You will need Macromedia Flash to edit the Flash source files if:

  • You want foreign language characters
  • You want to change the font or text color
  • You want to change the colors of the movie

Flash source files ARE included with this template.

To change the text, text placement, and image, open the variables.txt file. You'll see code like this (line breaks added for readability):

splashimage=images/mainpic.jpg
&&splashtext=YOUR FAMILY<br>      COMES FIRST
&&splashx=138
&&splashy=110
&&

Change the highlighted variables. You can add "<br>" in the splashtext variable to add line breaks. You may also add spaces. Do not delete the non-highlighted code and keep everything on one line. The "x" and "y" position assume that "0,0" is the upper left corner of the Flash movie.

Alternate content

This product uses the FlashObject Flash detection and embed script to dynamically embed the Flash movie. This means that you won't see the actual Flash movie object in the web editor's design view. Instead, you'll see a static image, which is your alternate content. You can put all your alternate content in between the <div id="flashmovie"> and </div> tags.

For example, this site currently has a static image (without text) in between the <div id="flashmovie"> and </div> tags:

<div id="flashmovie">
<img border="0" src="images/splash-replacement.png" width="750" height="200">
</div>

You can edit that image with your own text in an image editor, or you can remove it completely and put a text message there for you viewer. For example:

<div id="flashmovie">
You need Flash to view this content.
</div>

Either way, viewers whose security settings do not allow them to view Flash movies or who do not have the Flash player will view your "alternate content," while viewers who do have the Flash player will be able to view the Flash movie.

Page Title Flash

The page title on each page is a Flash movie. You can have a different picture and title text on each page.

Without needing Flash, you can change:

  • The text (English characters)
  • The placement of the text
  • The image

You will need Macromedia Flash to edit the source files if:

  • You want foreign language characters
  • You want to change the font or text color
  • You want to change the colors of the movie

Flash source files ARE included with this template.

To change the text, text placement, and image, you will need to edit the HTML code in each page. Look in the HTML code for this:

<script type="text/javascript">
// <![CDATA[

var fo = new FlashObject("title.swf", "movie", "750", "140", "8", "#ffffff");
fo.addVariable("img", "images/titlepic3.jpg");
fo.addVariable("t", "YOUR PAGE TITLE");
fo.write("flashmovie");

// ]]>
</script>

Change the path of the image (relative to your page) and the page title.

If you want to change the placement, just add more variables for tagx and tagy like this below:

<script type="text/javascript">
// <![CDATA[

var fo = new FlashObject("title.swf", "movie", "750", "140", "8", "#ffffff");
fo.addVariable("img", "images/titlepic3.jpg");
fo.addVariable("t", "YOUR PAGE TITLE");
fo.addVariable("tagx", "30");
fo.addVariable("tagy", "100");
fo.write("flashmovie");

// ]]>
</script>

(Obviously you can change the amount to your desired number.)

This template comes with three title images for your convenience: titlepic1.jpg, titlepic2.jpg, and titlepic3.jpg.

Alternate Content

This product uses the FlashObject Flash detection and embed script to dynamically embed the Flash movie. You can put all your alternate content in between the <div id="flashmovie"> and </div> tags. See the section about Alternate Content above -- the same applies for the title Flash movies.

Vertical menu

The vertical menu is a bulleted list of links in the "submenu" library item. Simply add your own links to the bulleted list and the style sheet will format it on your actual web page! You can duplicate the library item and edit to have different submenus on different pages.

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

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.