Enable or download the Flash player to view this movie. If you are using an HTML editor then you wont see the Flash movie unless you preview this page in your browser.

Getting Started

 

This package comes with the starter website 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 website helps get your website up quickly and easily
  • Three different layout templates (create as many pages as you need)
  • Search Engine Optimized
  • Validated XHTML and CSS
  • Dynamic Flash movie (change images without Flash software)
  • Extra graphics (ecommerce buttons, icons/bullets, credit card graphics, and shipping graphics)
  • Tested in the latest browsers (IE, Firefox, Netscape, and Opera)
  • Complete Fireworks (PNG) source files
  • Photo Gallery (add unlimited amount of photos)
  • News box scroller (easily edit the text in the scroller)
  • Include pages used for logo, menus, and copyright area
  • Uses Dynamic Web Templates (DWT) for easy maintenance of your site

Copyright and License Information

 

Images:

The royalty free images used in this template are copyrighted property of its licensors, and are being used with permission in accordance with their Terms of Use. You can use this image for this template only. If you wish to use this image in other marketing materials, send us a request for the image ID number and stock photo company. We will then send you the image ID number along with the stock photo website address where you can purchase it from.

 

Website Template:

  • Copyright: The copyright for this design template remains with the designer, DJM Web Development, Inc. You may not claim ownership of the design, nor may you use it for any purpose other than that explicitly set forth in our licensing agreement. The licensing agreement can be found in the license.html page.
  • Licensing: The license fee for this design is a site license, not a user or computer license. This 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.
  • The source files are licensed for use with this template only.

General Instructions

 

Make a new web:

  • 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 "productname_web" folder.
  • Copy this folder to your "My Webs" or "My Web Sites" directory.
  • In FrontPage or Expression Web go to File > Open Web or Open Site and browse to this folder to begin editing your site.

Preview your new web:

  • Click on any page and go to File>Preview in Browser.
  • Click on Internet Explorer and click Preview.
  • A browser window will open with your new web. Preview the pages of the web and decide what pages will be in your website. You may keep this window open and return to it and refresh to see your changes.

Modify your new web:

  • Add new pages
    Open a page that has the layout the way you want it, then go to File>Save As. Save the page under a new name - be sure to change the page title as well!
  • Rename existing pages
    If you would like to use an existing page but want to rename it, you may easily do this in Folders View. Right-click on the file name and/or the page title and choose "Rename" to rename your file.

Publish your web:

  • Go to File>Publish Web.
  • Choose the "FrontPage Server Extensions" option.
  • Type in the URL of your website. For example, http://www.yoursite.com. If you don't want to overwrite your existing website but just want to publish it temporarily to preview it, publish it to a subfolder like this: http://www.yoursite.com/test.
  • Type in your user name and password when prompted.
  • If you are publishing to a new folder, FrontPage/Expression Web may prompt you to "create a new web." Go ahead and click OK.
  • Then, click Publish. FrontPage/Expression Web will publish your web. When it's done, you'll be able to click to view your published site!

Publish your web using FTP:

  • Go to File>Publish Web.
  • Choose the "FTP" option.
  • Type in the FTP URL of your website. For example, ftp://www.yoursite.com. If you don't want to overwrite your existing website but just want to publish it temporarily to preview it, publish it to a subfolder like this: ftp://www.yoursite.com/test.
  • Type in your user name and password when prompted.
  • Then, click Publish. FrontPage/Expression Web will publish your web. When it's done, you'll be able to click to view your published site!

Template Details

 

Include Pages:

 

Editing the include pages will update the other pages across your website. Open them, make your changes, and save. All of the include files are located in the includes folder.

 

The include pages may not look like they have any formatting. This is fine. Simply make your changes, then preview the other website pages in a browser.

  • Logo = logo.html
  • Main Navigation = menu.html
  • Bottom Links and Copyright = footer.html

FrontPage/Expression Web form:

 

If you want to use FrontPage/Expression Web forms, your website will need to be published on a server that has FrontPage extensions. Check with your hosting provider to make sure that you can use FrontPage forms on your site. If not, you can use your own scripting for the form.

 

To configure the form for your own web, right-click inside the form area and select "Form Properties" from the pop-up window. You will most likely want the information to go to your e-mail address, so delete the contents of the "file name" box and enter in your e-mail address. You may need to check with your hosting service to ensure that your account is configured to allow FrontPage form e-mail responses.

 

Top logo area:

There are two options for adding your business name and logo, which are explained below.

  • If you already have a logo you want to use, delete the current text and insert your own logo.
  • Since the logo is text format, you can delete the current text and add your business name.

Change the images in the Flash movie:

 

Note: You will not see the Flash movie while editing the template.

  • Make the images you want to use 444 pixels wide and 195 pixels in height. Make sure the image is this exact size.
  • Name your images as header2.jpg and header3.jpg. Then add it to the images folder. This will overwrite the old images.
  • You can add more images to the movie. When you create more images name them as header4.jpg, header5.jpg etc. You will then need to add the images to the images folder and edit the images.xml file. The images.xml file is located in the flash/header folder.
    • To add more photos duplicate the below set and rename the "set_2" accordingly.

      <set_2>
      <img>images/header1.jpg</img>
      <link>no</link>
      <sec>0</sec>
      </set_2>

Change the tagline in the Flash movie:

  • To add your tagline to the Flash movie you will need to edit the tagline.txt file which is located in the flash/header folder. Do not delete the = or & characters.

Photo Gallery:

 

You only need to edit the photo_gallery.xml file and add images to the gallery-images folder.

  1. Add as many images as you like at the size 400x300. Name them as 1.jpg, 2.jpg, 3.jpg, etc.
  2. Create thumbnails for the above images at size 100x75. Name them as 1s.jpg, 2s.jpg, 3s.jpg, etc.
  3. Add the images to the flash/gallery/images folder.
  4. In the photo_gallery.xml file duplicate the below set and rename the "pic1" accordingly. The photo_gallery.xml file is located in the flash/gallery folder.
    <pic1 name="Image Title Here" caption="Add your image caption or description here."/>
  5. Update the photo_gallery.xml file with the name and caption for each image.

Edit the scroller box:

  • The text in the scroller box can be edited by editing the scroller_page.html page. You will not see the scroller box contents when editing the pages that include the scroller box. You will need to preview the page in your browser to view the scroller box. Since the scroller is in an iframe make sure you target the parent frame when you create a link.
Horizontal main menu:

The horizontal menu is a bulleted list of links in the menu.html page. Simply add your own links to the bulleted list and the style sheet will format it on your actual web page!

 

Source files included:
  • Fireworks (PNG) file for the layout
  • Fireworks (PNG) file for the ecommerce buttons and icons

Note: All source files are licensed to use with this template only.

 

Cascading Style Sheet (CSS):

 

All table and cells within this template are controlled and formatted with an external CSS file called style.css. Fore more information about CSS go to http://www.w3.org/Style/CSS/.


Meta tags:

To help your site be optimized for search engines and directories we have added blank meta tags to each page. You will need to add your own content in these tags or delete tags from the page.

 

DWT Package (only applies if you have FrontPage 2003 or Expression  Web)

 

 

This DWT package consists of:

  1. Page layouts, located in the Templates folder:
    1. 1col.dwt - Two-column page layout.
    2. 2col.dwt - Three-column page layout.
  2. This starter website, which allows users to create a new website from scratch that uses the DWTs. Predesigned pages are included with the site, which you may modify or delete.
  3. You can detach the dwt template by going to the page you want to detach and go to Format>Dynamic Web Template>Detach Dynamic Web Template.

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

  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 "productname_web" folder.
  3. Copy this folder to your "My Webs" or "My Web Sites" directory.
  4. In FrontPage/Expression Web, 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.

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 "Templates" folder.
  3. Dynamic Web Templates act as the "base" for all of your website (.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 website 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 website.
      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.

Additional Help

 

If you have any questions please email us at support@djmweb.net.