Getting Started

What's Included

This is a multi-page web template, containing sample pages along with Dynamic Web Template (.dwt) pages for each page layout design. By using your own photos in place of our sample images, you make the template unique to your business.

Skill Level

This template is rated "Intermediate". The elements used within this template are based on a 3-column grid system, but may be above the skill level of basic users who are not familiar with CSS floated elements.

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. [Note: Please remember that we cannot be responsible for when or why any photo or image may be removed from any stock photo site.] You can easily replace our main image(s) with your own, but your image needs to be the same size as ours. 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.

Vendor: Big Stock Photo
Image(s): #7439345

Icon-Style Graphics: The icon-styled filler images are NOT licensed for your use. There are hundreds of free icon-style graphic sets available for both commercial and non-commercial use. Do a search for "free icon png images" to find out more.

Adding Your Site Name:

The template uses the "logo.jpg" image that has our sample business name and slogan 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.

Google Fonts: By linking to a particular font stored on Google’s servers (save on bandwidth + caching benefits), you now have access to a wide variety of custom fonts. This offers a lot of flexibility for using more decorative fonts by adding just a touch of code. Quite literally, you can add these fonts into your site in under a minute.

It’s extremely simple. First there is a link to the particular Google font that goes in the head area of each page:
<link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css' />

Next the font name is added to the CSS file:
h1 {font: italic 30px 'Yellowtail', "Century Gothic", Verdana, Helvetica, sans-serif; color: #996000; margin: .3em 0; letter-spacing: 1px;}

NOTE: You will not see the Google font when in design view. It will be seen when you preview the site in your browser. Learn more about Google fonts.

Cascading Style Sheets (CSS):

This template relies on an external CSS file that consists of "rules" to tell the browser how to render the pages. The CSS file sets the fonts and colors for all of the text on the page, will position items on the page such as the sidebar and content areas, and much more. You can easily modify font colors (links, headings, and text). Several elements that make up the template 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.

Note: Occasionally when adding your own text and images to your pages, the page may suddenly seem to lose the formatting. Don't panic. Continue adding your content, then Save the page (Control + S). Now Refresh the page (F5) and you will see your page "snap" back into position. Continue editing your pages. If the page loses formatting again, just Save and Refresh the page.

Editing the DWT (.dwt) Templates:

You will edit the dynamic web template (.dwt) pages (located inside of the Templates folder) to add your own site name, navigation links, and other content that is located outside of the editable region tags. When you make a change to a .dwt page and then save the page, the changes will be updated to all .html pages that are attached to that particular template. Remember that you will have to edit each .dwt template that you use and have attached to your pages.

Editing the Content (.html) Pages:

This template package allows you to delete pages you do not need, add new pages, and to rename existing pages if necessary. To edit the existing .html 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.

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.

Creating New Pages 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.

JavaScript Lightbox:

You can use the lightbox feature on any photo in your site; it is not limited to only the product or gallery pages. The Lightbox JavaScript consists of several files. 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.

<a href="images/samples/product1lg.png"
rel="lightbox"
title="Your product description goes here">
<img alt="sample photo" src="images/samples/product1.png" /></a>

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

[Credit for this application: Featured at http://www.dynamicdrive.com.]

JavaScript Slideshow:

Your template may contain a JQuery JavaScript that will rotate through your images. The title portion (highlighted below) is what adds the caption. If you want a caption with your photo, add the title text. If you do not want a caption, remove the title="Add your own text" portion.

<div id="slider" class="nivoSlider">
<img src="../images/mainimage1.jpg" alt="" title="You can add a caption to each image" />
<img src="../images/mainimage2.jpg" alt="" title="Add your own text here..." />
<img src="../images/mainimage3.jpg" alt="" title="Easily replace our images with your own." />
</div>

You can easily replace our images with your own, but all of your images need to be the same size as ours. You would then set your own text for your image captions using the title attribute. You can add more images by following the pattern shown above. (Use caution if adding more images as it will affect the load time of the page.)

[Credit for this application: Released by http://nivo.dev7studios.com/. There are a lot of settings for this script, so if you want to tweak it for your own use, visit the site to see all the possibilities.]

 

What's Needed:

We offer templates in several flavors. You will need to have the appropriate software, Expression Web V1 or higher or Dreamweaver CS3 or higher, depending on the template version you purchase. While similar, each contains program-specific features.

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.

Development

Templates are also designed to be flexible. You can add more pages, delete the pages you do not need, or even rename existing pages. Your template package will contain all of the pages and images seen in this preview. All of our templates are designed to meet current web standards to ensure that your web site will work in today's web browsers.

A Checklist:

Before going live with your site, please review the list below:

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

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.

Need Help Fast?

Need more? We also offer a variety of helpful resources as well as design services. Please visit our web site at http://www.rtbwizards.com for Expression Web template packages and http://www.myartsdesire.com for Dreamweaver template packages.