In This Site

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.
  • Fun, contemporary layout.
  • CSS-based layout gives cleaner code.
  • Instructions for changing colors and working with Photoshop files.
  • All Photoshop files included.
  • Tested to work in IE 5+, Netscape 6+, Opera 6+, and FireFox.
  • Validated HTML 4.01 Transitional, CSS.

Image Licensing Information

The images used in this template are wholly owned by Corrie Haffly and may only be used in this web site layout. If you wish to purchase a larger resolution image for marketing purposes, please contact support@jgtemplates.com.

Source Files Included

  • Photoshop 7 files
    • addtocart.psd - Used for add to cart button.
    • columns.psd - Used for background graphics that make the column effect
    • headingbg.psd - Used for heading 1 background image.
    • help.psd - Used for small questionmark icon.
    • mainpic.psd - Used for main picture.
    • menubg.psd - Used for horizontal menu background.
    • topbg.psd - Used for top gradient.
    • vertical.psd - Used for vertical bullet graphics.
    • yourlogohere.psd - Used for logo and top image.

General Instructions

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

Template Details

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

  1. page layouts, located in the Templates/ folder:
    1. seaweb.dwt - Normal two column layout
    2. seaweb_print.dwt - Slightly narrower layout that is printable.
    3. seaweb_splash.dwt - Used for splash page.
  2. the Sea Web 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.
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

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 seaweb_web folder to the location on your hard drive where you keep your Dreamweaver web sites. You may rename “seaweb_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 seaweb_dwt folder and copy all the files and folders inside the seaweb_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 and the Dynamic Web Template Interchange Guidelines (DWTIG)

  1. Dynamic Web Templates are identified by the extension " .dwt. "
  2. The Dynamic Web Templates for this package are located in the " seaweb_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.
  6. The Dynamic Web Template Interchange Guidelines are a set of guidelines used by many developers to provide dynamic web templates that interchange seamlessly.
  7. 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.
  8. 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.

Specific Template Instructions

Libraries

The logo, menus, and footer are in Libraries. Editing the library items 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 so you can change it easily across all the pages.

Top menu

The top menu is made up of hard-coded links.

Special Text Area/Main picture

The main picture is defined within the stylesheet. See below about modifying colors/images if you wish to change the image.

The text can be easily edited within the HTML.

Left Menu

The left menu is a CSS-formatted unordered list of links in the "menu" library item.

Submenu

To create more submenus, start with this HTML code (copy and paste):

<ul class="submenu">
<li><a href="link.htm">Link Text</a></li>
</ul>

Insert this code into the left column, then edit the link and URL. Add more list items as necessary.

Footer

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.

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.

modifying colors and images...

Do you want to customize the colors of this template? It's pretty easy, but you will need Photoshop or Photoshop elements to modify some of the graphics.

  1. Background gradient and color
    You will need to edit the bg.psd image in Photoshop or another image editor with your own gradient colors. Then, open the styles.css file and within the first few lines is the color code for the background:

    body {
    background: #97DEEA url('images/bg.gif') repeat-x;
    ... }

    Change the color code to match the bottom part of your gradient image.
  2. Logo
    Open the yourlogohere.psd file and change the text colors.
  3. Top curve
    You will need to open the contentbg.psd file to edit the colors of the top curve and background.
  4. Column divider color
    To change the color of the column divider, you will need to open columns.psd. Recolor the column to your own desired color. Save for web as "columns.gif" and replace the existing file in your web site.
  5. Main picture
    The main picture is a background image defined in the stylesheet. You can create your own image and name it mainpic.jpg and replace the existing one. The image will align to the bottom-right of the text area. You can modify the stylesheet (#mainpic) as necessary.
  6. Heading bullet image
    To change the color of the bullet images next to the headings, open accent.psd and change the colors of the layers. Then save as accent1.gif, accent2.gif, or accent3.gif and replace the existing images.
  7. Text, heading, and background colors
    Go through the CSS file and look for any color code, which is a six-digit alphanumeric code preceded by the # sign. You can change the color codes to your own. (Hint: Do a Find > Replace to replace the same colors across the stylesheet.)

momentum  tomorrow starts today
Copyright © 2007 Momentum