Template Instructions

What's Needed

HTML5We offer templates in several flavors: Expression, Dreamweaver, and HTML (generic for any html editing program). You will need to have the appropriate software, Expression Web V4* or higher or Dreamweaver CS3 or higher, depending on the template version you purchase.

*Earlier versions of Expression Web will not display the content correctly in Design View.

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.

What's Included

This is a multi-page web template, containing sample pages. Expression Web and Dreamweaver versions contain 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. We recommend you be familiar with the basics of CSS and HTML.


Third-Party Images:

Watermarked Images: The template contains watermarked images or photos provided by third-party providers. 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.]

Vendor: Big Stock Photo
Image(s):
#22722614, #3158037, #54901
*Images may have been digitally enhanced from the original version.

Adding Your Site Name:

The site name is plain text that is positioned on top of the logo image. The size, color, and font are set within the CSS file. To add your own business name and tag line, open the .dwt template(s) and look for the following:

  1. <div id="logo">
  2. <h1>Your Business Name</h1>
  3. </div>

To change the font, size, color, or other settings, open the default.css file and look for the following:

  1. #logo h1 {
  2. border-bottom: none;
  3. font: normal 34px 'Federo', "Century Gothic", Verdana, Helvetica, sans-serif;
  4. color: #ffffff;
  5. . . .
  6. }

We realize that some may want to add their own logo image or use a favorite font, so we supply you with a blank logo image (located in the images folder). You can add your site name, slogan, and/or logo to this image. You will then need to "hide" the text version of your site name.

  1. <div id="logo">
  2. <h1 style="display: none;">Your Business Name</h1>
  3. </div>

Slideshow Images:

You can easily replace our main image(s) with your own, but your images needs to be the same size as ours. [350 x 260 pixels] When changing images, we recommend you keep the same image names -- mainimage1.jpg, mainimage2.jpg, and mainimage3.jpg.

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

It’s extremely simple. First there is a link to the particular Google font that goes in the head area of each page:

  1. <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:

  1. h1 {font: normal 30px 'Font Name', "Century Gothic", Verdana, Helvetica, sans-serif;
  2. color: #996000;
  3. margin: .3em 0;
  4. letter-spacing: 1px;}

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 Pages and DWT (.dwt) Templates:

All template packages allow you to delete the pages you do not need, create new pages, and rename existing pages if necessary.  Generic HTML templates contain only .html pages.

Expression Web and Dreamweaver versions rely on .dwt templates for the page layout designs. DWT template pages contain editable and non-editable regions. You edit non-editable regions on the .dwt template(s). This includes some elements like your site name, navigation, copyright statement, etc. Once you change a .dwt template and save the page, the changes are then applied to the .html pages that are attached to that .dwt template page.

You edit editable regions on the .html pages. This is your site content, images, etc. 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.

FAQ Page:

FAQ pages typically have several questions along with their answers. To make this easily readable, we have used a definition list <dl>. The definition topic <dt> and the definition description <dd> are given special classes. If you wish to change the way the questions and answers look, you can edit the classes in the CSS file.

  1. <dl>
  2. <dt class="question">Question</dt>
  3. <dd class="answer">
  4. <p>Your answer goes here.</p>
  5. </dd>
  6. </dl>

JavaScript Calendar:

Your template may contain a simple JavaScript event calendar. Note that you will not be able to see the calendar while in Design view. To add or delete an event, you will need to edit the calendar.js file. For an event that occurs once, you will enter the year, month, day, and then the text for the event. For an event that recurs yearly, you enter the year as 0000, month, day, and then the text describing the event.

  1. var dA = new Array(); var x = 0;
  2. // first 8 characters in yyyymmdd format for single date events
  3. // first 8 characters in 0000mmdd format for every year events
  4. dA[x++] = "20120610 New Event Calendar Started today";
  5. dA[x++] = "00000101 New Year";

To change the size of the fonts in the calendar or to change the colors, you will need to edit the default.css file: [Credit for this application: http://javascript.about.com/library/blevent1.htm. While this script is free, we recommend that you give credit for the application.]

JavaScript Lightbox:

Your template may contain a JavaScript Lightbox script. 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.

First insert your small photo onto the page. Create a hyperlink to the larger photo. 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.

  1. <a href="images/gallery/product1lg.jpg"
  2. rel="lightbox"
  3. title="Your product description goes here">
  4. <img alt="sample photo" src="images/gallery/product1.jpg"></a>

To click through a group of images, add a group name: rel="lightbox[groupname]". The "Previous" and "Next" buttons will now automatically appear.

  1. <a href="images/gallery/product1lg.jpg"
  2. rel="lightbox[groupname]"
  3. title="Your product description goes here">
  4. <img alt="sample photo" src="images/gallery/product1.jpg"></a>

[Credit for this application: http://lokeshdhakar.com/projects/lightbox2/.]

JavaScript Slideshow:

Your template may contain a JQuery JavaScript that will rotate through your images. An optional title portion adds a caption to the bottom of each photo slide. 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 (optional). 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.)

  1. <div id="slider" class="nivoSlider">
  2. <img src="../images/mainimage1.jpg" alt="image info"
  3. title="Add a caption to each image">
  4. <img src="../images/mainimage2.jpg" alt="image info"
  5. title="Add your own text here...">
  6. <img src="../images/mainimage3.jpg" alt="image info"
  7. title="Easily replace our images with your own.">
  8. </div>

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

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. Other terms and conditions may apply. Our full End User License Agreement is available on our sites.

If you wish to use this template for subsequent sites, you must purchase a license for each additional site. We offer additional licenses at a discounted rate. 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.

A Checklist:

There always seems to be a rush to publish a new site. Before going live with your site, take a minute and review our list of items that should be completed first!

Need Help Fast?

Need more? We also offer a variety of helpful resources as well as design services. Please visit our web sites at

hublot replica sale
breitling replica uk
breitling replica uk
replica watches uk