Getting Started

In this section...

Included:


accent1_blank.jpg


accent2_blank.jpg

Photoshop source file also included.

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

  • A starter web template that you can use by adding your content and renaming pages.
  • Table-less CSS layout gives cleaner code, which means better search engine optimization. All positioning and layout is accomplished through a cascading style sheet.
  • Uses Dynamic Web Templates.
  • Photoshop source files are included!
  • Corbis images used.
  • Tested to work in IE, Netscape 6+, Opera 6+, Mozilla, and Firefox. Some of the older browser versions (Opera 6 in particular) may not display the transparent background on the splash page.

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:

  • smiling children - CB104997
  • chalkboard - CB058386
  • laptop computer - CB042081

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 7 files
    • accent.psd - Used for the "ads" on the home page
    • bg.psd - Used for the main background image
    • bodybg.psd - Used for the two and three column background images
    • logo.psd - Used for the simple text logo
    • mainpic.psd - Used for the thinner image on the main pages
    • menubg.psd - Used for the menu and footer backgrounds
    • splashpic.psd - Used for the larger splash page image
    • transparentbg.psd - Used for the transparent background on the splash page
    • verticalbutton.psd - Used for the vertical menu graphics and vertical menu header graphic

General Instructions

  1. Unzip your web package.
  2. Look for the "childcomm_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 Child Community DWT package consists of:

  1. page layouts, located in the Templates/ folder:
    1. childcomm_splash.dwt - Layout used for splash page.
    2. childcomm_2col.dwt - Used for 2 column page.
    3. childcomm_3col.dwt - Used for 3 column page.
  2. the Child Community 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 childcomm_web folder to the location on your hard drive where you keep your Dreamweaver web sites. You may rename “childcomm_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 childcomm_dwt folder and copy all the files and folders inside the childcomm_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 " childcomm_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.

W3C Validated CSS

If you would like your site to be completely W3C-validated, including the CSS file, then you will have to trade off having a transparent box on the splash page for Internet Explorer (Netscape, Mozilla, FireFox, and Opera will still display a transparent box). To achieve this, open the styles.css page and go down to line 212. Delete that line (you'll see a note there to help you make sure you're deleting the correct line), and your style sheet will be W3C validated, as well.

Libraries

The top header, horizontal menu, 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 in the "header" library item. We've included the source Photoshop 7 file for your convenience. If you wish to create your own logo graphic, we recommend staying within a 52 pixel height, otherwise you may need to modify the style sheet.

The top menu is also hard-coded in the "header" library item. By modifying the include page, all other pages will be updated automatically.

Splash Page

Main image

The image on the splash page is a background image, defined within the style sheet. If you wish to substitute your own graphic, create a graphic that is 750x250 pixels and save it as "splashpic.jpg." Replace the existing image in the web site.

Special Text Area

The splash page has a special text area. The width and height are defined in the style sheet. Limit your text to fit within this area, or modify the box's width, height, and position in the style sheet.

Header Graphic

The header graphic is a background image defined within the style sheet. If you wish to create your own graphic in its place, make a graphic that is 750x102 pixels and save it as "mainpic.jpg." Replace the existing image in the web site.

Page Title

If you are applying the DWT to an existing page, you will may need to make some changes to the page title area on each page. First, change the page title to use the Heading 1 style, then assign the ID "banner." The HTML code should look like this when you're done:
<h1 id="banner">[page banner here]</h1>

Horizontal Menu

The horizontal menu is defined in the "menu" library item. Modify this page with your own hard-coded links.

Submenu

To create a submenu, 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 "body2" area (left column), then edit the link and URL. Add more list items as necessary.

We suggest putting these lists into library items for easier editing later.

Breadcrumb

The "breadcrumb" links are hard-coded, although we've also used a page banner component for the title of the current page. You will have to modify this area if you create subsections.

Footer

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

CSS Resource Lists