TEMPLATE INSTRUCTIONS

We recommend that you print this page for further reference as you are working with your new template.

This template 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 to help you get started. You may rename the pages, add more pages, and add your content.

Before you begin editing your pages, you should familiarize yourself with the files and folders that are included. This means looking at the css file and noting the comments, opening the .dwt template files, and looking at each page....including this one.

PART I - WHAT'S INCLUDED:

Can I change the template colors? You can easily modify font colors (links, headings, and text) by editing the included CSS file. The overall design colors are actually graphic images and cannot easily be changed. If you feel the colors used in this template do not meet your needs, we offer custom design and modification services. Please contact us for details and pricing information.

How do I add my site name? The template uses the "logo.jpg" image that has our sample business name applied. We also give you a logo-blank file with no text or logo sample. You can add your text using your favorite image editing software program and select your favorite font. Save your edited image as logo.jpg into the images folder of your web and allow it to overwrite the existing file. [Note: If you do not have the software to edit this file, we can do this for you for free within 14 days of your purchase.]

How to I replace the main image(s) with one of my own? The method used will depend on the way the main images are incorporated into your particular template package:

PART II - LICENSING:

Third-Party Images:

Watermarked Images: The template contains watermarked images or photos provided by third-party providers. We have obtained permission to incorporate these sample images within the template. If you wish to use these images for your web site, you are required to purchase or otherwise license the non-watermarked version directly from the vendor listed below if applicable. [Note: Please remember that we cannot be responsible for when or why any photo or image may be removed from any stock photo site. If you are wanting to use the exact same image, please check availability before you purchase the template.]

Image Number #2954636 from BigStockPhoto.com. [Note: Be sure to read over all terms of use before using an image from any 3rd party site.]

You can easily replace our main image with your own, but your image needs to be the same size (680 x 190 pixels). If you do not have the resources to edit your replacement image, we can do this for you for free within 15 days of your purchase. Send us your image and we will do the rest. We return the new file to you by email within 1 - 3 business days.

Copyright:

The copyright for this web template and accompanying design remains with the designer, Round the Bend Wizards and/or My Arts Desire. You may not claim ownership of the design nor may you use it for any purpose other than that explicitly set forth in the separate license agreement. Copyright for any 3rd party images and scripts are retained by their owners.

Template Use:

This template comes with a site license, not a user or computer license. This template is licensed for use on one site only. If you wish to use this template for subsequent sites, you must purchase a license for each additional site. All images and source files included within the template are licensed for use with this template only. All royalty-free image vendors have their own terms of use in how their images may be used and in what context. Please check with the listed vendor(s) if you have questions.

PART III - WHAT'S NEEDED:

We offer templates in two flavors: Expression Web templates through our site at RTBWizards.com, and Dreamweaver templates through our site at MyArtsDesire.com. You will need to have the appropriate software, Expression Web V1 or higher or Dreamweaver CS3 or higher, depending on the version you purchase. While similar, each version contains program-specific features. [NOTE: We can also convert any template to HTML so you can use a template in any editor.]

PART IV - STEP BY STEP:

Adding Your Site Name:

The template uses the "logo.jpg" image that has our sample business name/logo applied.  In the Resources folder you will find a logo-blank.jpg file. You can add your text using any image editing software program and use your favorite font, apply effects, and more. Save your edited image as logo.jpg into the images folder of your web and allow it to overwrite the existing file.

Note: If you do not have the software to add your own text, we can edit the file for you for free within 14 days of your purchase. To have us do this for you, send us an email after you purchase the template. Tell us the number and name of your template along with the date of purchase. Specify in your email the text for the business name and slogan (if appropriate). We copy and paste from your email, so double-check for spelling and punctuation. Allow 1 - 3 business days for us to complete your request. We will return your files, along with instructions, to you by email.

Expression Web and Dreamweaver Versions:

Dynamic Web Template (.dwt) Pages:

Dynamic Web Template pages can be found within the Templates folder of your web and are easily identified by the .dwt extension. They contain the basic page structure for all of your web (.html) pages. You will find a .dwt for each different page layout included in your template package. If you change the .dwt page, all of the web pages based on that .dwt will also change.

Dynamic Web Templates have both “editable” and “non-editable” regions. Editable Regions can change from page to page such as your page content. You open the web (.html) page and make changes inside of the editable regions. Non-editable Regions are areas defined by the .dwt and cannot be changed on your .html pages. To change non-editable regions, you have to open the .dwt file. Changing non-editable regions will change every web page in your site that is based on that .dwt page.

You will modify your .dwt templates pages in order to:

  1. Change any navigation links. You can add more links, delete those you do not need, or rename existing links. Note you will probably find this easiest to do in either Split or Code View.
  2. Modify your copyright information. Note the copyright date is a JavaScript that will always show the current year.
Editing the Content (.html) Pages:

This template package allows you to delete the pages you do not need and to rename existing pages if necessary. To edit the existing .htm pages, just delete our sample content. You can then type your own text and add any additional photos. Note that you will not be able to edit any “non-editable” regions on these pages.

Important: If you delete all content from an editable region, it may disappear and be difficult to find. Switch to Code or Split view and look for the following:

<!-- #BeginEditable “content” -->
<!-- #EndEditable -->

Type some placeholder text between the two tags as follows:

<!-- #BeginEditable “content” -->
<p>Content here</p>
<!-- #EndEditable -->

Switch back to Design view and you will now see the editable region and can add content to that area.

Creating New Pages:

In Expression Web: To create a new, blank page based on a .dwt page layout, go to File > New > Create From Dynamic Web Template. In the dialog box that appears, select the appropriate .dwt page (if you template offers more than one page layout). When your new page is created, save the page giving it a unique name and page title. You can then add content to the editable regions.

In Dreamweaver: To create a new, blank page based on a .dwt page layout, go to File > New. From the dialog box that appears, choose Page From Template. You can navigate to the Templates folder of you web to choose the appropriate .dwt page template.

Special Note: If you are not familiar with the Style Toolbar in Expression Web, please view our tutorial at http://www.rtbwizards.com/helpcenter/formattingtoolbar.htm. The Style Toolbar will allow you to easily apply any special classes or IDs from the external style.css file to your content without adding a lot of embedded markup to your pages.

Cascading Style Sheets (CSS):

This template uses a CSS-based layout, which means that the page sections (header, sidebar, content, and footer) are positioned using CSS rather than within a table-based grid. Because this results in cleaner code, your pages load faster and search engines may rank your page better than they would in a table-based design.

When looking at your pages while in Design view, some elements may not appear correctly. Fonts may seem too large or small; spacing between elements may seem too wide, etc. While this can be a bit disconcerting, you will find it easy to keep previewing your site in a browser as you make changes. This will display your page correctly. To preview your pages, save the page after each change and then go to File > Preview in Browser.

Occasionally while editing your pages, you may “lose” the formatting. When this happens, save the page and then hit F5 to refresh your page. The page should snap back into position and the styles will return.

Meta Tags:

To help get your site listed in search engines and directories, we have added blank meta tags for keywords and description to each page. You will want to either delete these tags or add your own specific content. DO NOT leave our default content in these tags. To add your own unique page description and keyword content, right click on the page when in Design view and select Page Properties. In the dialog box that appears you can change the page title and add your own keywords and description for the page.

JavaScript Calendar:

We include a simple JavaScript calendar in many of our templates. Note that you will not be able to see the calendar while in Design view. This script is set to show the current date only. If you do not wish to include the calendar, you can delete it from the code.

<p><script type="text/javascript" src="calendar.js"></script></p>

To change the size of the fonts in the calendar or to change the colors, you will need to edit the calendar.js file. [Credit for this application: http://www.bmgamble.com. While this script is free, we recommend that you give credit for the application.]

JavaScript Lightbox:

The Lightbox JavaScript consists of two files (the lightbox.js and a lightbox.css file, located in the Scripts folder) and three images (the animated loading.gif, the .png image for the dark overlay, and the close.gif that appears in the top, right corner of the display box). We recommend that you do not move or edit any of these files.

The Lightbox allows you to click on a small photo and have a larger image appear in a semi-transparent overlay that will appear on top of the page. The script will automatically size itself, so your images can be different sizes. Your hyperlinks will look like this:

<a href="images/products/product1_large.jpg"
rel="lightbox"
title="Your product description goes here">
<img alt="sample photo" src="images/products/product1_small.jpg" /></a>

  1. First insert your small photo onto the page.
  2. Create a hyperlink to the larger photo.
  3. Switch to code view and add the rel="lightbox" which activates the javascript.
  4. If you wish to have a title appear, add the title attribute as shown in the example above.

[Credit for this application: http://huddletogether.com/projects/lightbox. It is also featured at http://www.dynamicdrive.com. While this script is free, we recommend that you give credit for all 3rd party applications.)

Before Going Live - An Important Checklist:

[ ] Change the page title on all pages as appropriate.
[ ] Preview all pages by going to File > Preview in Browser. It's a good idea to check your site in more than one browser.
[ ] Modify the keywords and description meta tags on each page.
[ ] Change or add alt text to each photo used on your site. Our images in this template have "sample" as the alternate text.
[ ] Spell check each page.
[ ] You may remove our logo and any links to our site from the template.
[ ] Upload your new site to your web hosting space. Remember that it is against our Terms of Use to upload pages that contain our demo text. Edit first, then upload!

PART V - GETTING ADDITIONAL HELP AND INFORMATION:

We offer full customer support on all of our template packages. Please visit our web site at http://www.rtbwizards.com for both Expression Web and ProStores ecommerce template packages and http://www.myartsdesire.com for Dreamweaver, CSS/HTML, and 3dCart Ecommerce template packages. We offer a variety of helpful resources available through our site. Need more? We also offer custom design services for your modification needs.

Karey Cummins, Owner

Round the Bend Wizards (http://www.rtbwizards.com)
Email: kareycummins@rtbwizards.com

My Arts Desire (http://www.myartsdesire.com)
Email: kareycummins@myartsdesire.com

Phone: 281-829-0888
Business Hours: M-F 9:00 am – 6:00 pm (Central Time)