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.
Can I change the template colors? Yes! This template is designed with a minimum of images and all colors can be modified by editing the CSS file. This template uses only four main colors: a mid-value color is used for the normal links; a darker value of the same color is used for some of the Heading tags; a light gray color (#909090) for the hover effect on links; and a dark gray color (#606060) for some effects and Heading tags. Even the gradient effects are done without images.
How do I add my site name? The "Your Business Name" is plain text and the font, size, and color is set in the CSS file. If you would prefer to use a logo image, you can delete the text and insert your own image but it should be no taller than 100px and no wider than 450px. If you need an area greater than these parameters, you will need to edit the width and height of the #logo id rule in the CSS file.
Social Media Icon Images: The small icon filler images are free icons available from http://www.blogperfume.com/new-27-circular-social-media-icons-in-3-sizes/ .
This work is licensed under a Creative Commons Attribution 3.0 United States License. The copyright for this web template and accompanying design remains with the designer, Round the Bend Wizards and/or My Arts Desire. Copyright for any 3rd party images and scripts are retained by their owners. Since we are offering this template for free, we require you keep our site name link in the footer area of each page. If you wish to remove the link, please contact us for details on how to purchase the template.
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.
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 depending on the version you purchase. While similar, each version contains program-specific features. For example, Expression Web templates use Include Pages where Dreamweaver templates use Library Items. [NOTE: We can also convert any template to HTML so you can use a template in any editor.]
Special Note: If you are not familiar with the Style Toolbar, 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.
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 (.htm) 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 (.htm) page and make changes inside of the editable regions. Non-editable Regions are areas defined by the .dwt and cannot be changed on your .htm 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.
This template uses include pages to hold the navigation links. This allows you to easily make changes to your links on the appropriate include page rather than having to make several changes to the .dwt page(s). Note that the include page will look like there is no formatting applied. Just make your changes. Your changes will automatically be applied to each page that uses the included content and the correct formatting will appear on your 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 NOTE: The content areas consist of several "blocks" which fit together to fit the width of the page. We recommend you view all of the .dwt page templates in order to see how the pages are constructed.
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.
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.
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.
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.
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.]
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>
[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.)
[ ] 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!
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 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.