PixelMill Edition Templates

Offering you professional web templates at an affordable price. Now getting your golf on the web has never been easier.

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 get your site up quickly and easily
  • Legally-licensed images provided by Photos.com, through PixelMill
  • CSS-based layout,  no tables
  • Expanded width
  • Dynamic Flash Movie - Change text without having to have flash.
  • SWF Object Included
  • Search engine optimized
  • Tested in the latest browsers  (IE, FireFox, Netscape, and Opera).
  • Fireworks source files included
  • Validated XHTML 1.0 Strict, CSS, WCAG 1.0 AAA, and Section 508 accessible.

Image Licensing Information

GettyPixelMill

The royalty free images used in this template are provided as a part of a licensing agreement between JuniperImages and PixelMill, Inc If you wish to purchase larger versions of the images for your own marketing use, please go to Photos.com and look for the following image: 30355670

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

Source Files Included

All source files are licensed for use with this template only.

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 looks as it should.

Also FrontPage's Normal/Design view may "lose" the formatting. When this happens, press "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.

General Information Regarding this DWT Package

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

  1. page layouts, located in the golfease_dwt/ folder:
    • 2col.dwt - expanded width two column page layout with flash banner
    • 3col.dwt - expanded width three column page layout with flash banner
  2. the 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

  1. 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.
  2. Keywords: Keywords for your Page/Site; important for search engine spidering purposes.  To edit, see instructions above for "doctitle."
  3. description: Description of your Page/Site; important for search engine spidering purposes.  To edit, see instructions above for "doctitle."
  4. scripting: Location for any coding (asp, java script, etc.) which requires placement within the <HEAD> </HEAD> tags of the web page.
  5. banner: Name of the Page Being Viewed - you may either use the "text" banner provided with FrontPage or type in the title manually.
  6. 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).
  7. 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.
  8. 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.
  9. 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.
  10. special1: Place for an applet or anything else
  11. special2: Place for an applet or anything else

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.

  1. 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.
  2. Look for the "golfease_dwt " folder.
  3. Copy this folder to your "My Webs" directory.
  4. In FrontPage, go to File > Open Web or Open Site and browse to this folder to begin editing your site.
  5. 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.

  1. 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.
  2. 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 "golfease_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 golfease_dwt  folder. Click Open, then OK.)
  3. 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 golfease_dwt  folder and choose the template you want to apply. Click "Open." 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 golfease_dwt  folder and choose the template you want to apply to all of these pages. Click "Open."
  4. 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.

  1. 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.
  2. 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 "golfease_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 golfease_dwt  folder. Click Open, then OK.)
  3. 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 golfease_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 golfease_dwt  folder and choose the template you want to apply to all of these pages. Click "Open."
  4. 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!
  5. 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.)

  1. 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). To see more details about how to accomplish this, click here. When you're done, move on...
  2. 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.
  3. 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 "golfease_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 golfease_dwt  folder. Click Open, then OK.)
  4. 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 golfease_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 golfease_dwt  folder and choose the template you want to apply to all of these pages. Click "Open."
  5. 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!
  6. 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

  1. Dynamic Web Templates are identified by the extension ".dwt."
  2. The Dynamic Web Templates for this package are located in the "golfease_dwt " folder.
  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 "golfease_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.
  5. 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.
  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.

Template Details

Include Pages

The logo, top-navigation, footer, and side menu are in "include pages." Editing the include pages will update the other pages across your web site. Open the page you would like to change, make your changes and save.

The include pages will look like they have no formatting applied. Simply make your changes, then preview the other website pages in a browser.

Logo area/Top Navigation

The "your logo here" area is text and is located in the includes/header.htm page. Open the includes/header.htm page and edit the text or add your own logo.

Left menu

The sub menu is located in the includes folder and is named sub_menu.htm.  This is a bulleted list of links. Add your own links to the list and the CSS will handle the formatting on your website.

Footer

The footer can be edited in the includes/footer.htm page. Modify the footer with your own company information.

 

 

PixelMill Webinars

Learn more about using CSS templates with PixelMill Webinars and Seminars.

PixelMill offers seminars and webinars,  covering topics from   design and development, current web standards and technologies, and  best practices. PixelMill webinars are suitable for beginners as well as experienced users.

Click here to view our upcoming events.