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:

Icon-Style Graphics: The icon-styled filler images are NOT licensed for your use. It is expected you will want to add your own smaller images that relate to your specific site. If you do like this icon style of images, 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.

Social Media Icons:  We've also added some social media icons (32px x 32px) that can be found in the icons folder located within the images folder. If you wish to use different icons, you can find the full free collection at http://www.blogperfume.com/.

This template uses a stylized image on the home page which incorporates elements from several sources. Some third-party providers require to you purchase or otherwise license the original image in order to avoid any copyright infringement issues. [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 a vendor is listed below, you will find the link and image number as appropriate.

Vendor: Big Stock Photo
Image(s):
#4678173, #209906

Adding Your Site Name:

The template uses text rather than an image for the site name and slogan. The font size, color, etc. is set within the css file. To add your site name and slogan, open the appropriate .dwt page template, switch to code view, and look for the following at approximately line 53:

<div id="nameplate"><a href="../index.html">Your Business Name</a></div>

When done, save the .dwt page and allow any attached pages to update.

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

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(s) that goes in the head area of each page:

<link href='http://fonts.googleapis.com/css?family=Font+Name' rel='stylesheet' type='text/css' />

Next the font name is added to the CSS file. For example:

h1 {
font: normal 30px 'Font Name', "Century Gothic", Verdana, Helvetica, sans-serif;
...
}

Hint: Long site name? Short site name? You can adjust the size of the font by editing the css file to make the lettering larger or smaller. Look for the #nameplate rule and edit the font line:

#nameplate {...
font: normal 38px 'Font Name', "Times New Roman", Times, serif;
...}

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.

Optional Elements (May not be included in all templates)

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

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

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. For most templates, layered .psd files are available on request.

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.