Expression Web:
This template is easily edited by Expression Web.
Dreamweaver:
This template is easily edited with Dreamweaver.
HTML: This
template is made for almost any html web editor.
Our templates contain DWTs; however they are not
connected to pages. You will need to connect them should you
wish to use them.
What's Included:
Latest coding using CSS3 and HTML5.
Unique starter web site in .zip format.
Responsive design with expanding and contracting cells, provides easy readability from cell phones to high resolutions.
Basic Contact Form
Google Fonts
Special Features:
Cross-browser tested. We ensure that our templates work in today’s web browsers.
Slideshow (IF INCLUDED): easy to replace our images with your own.
JavaScript Calendar
Cascading Style Sheets
This template uses a CSS-based layout, which means that the page sections
(header, sidebar, content, and footer) are positioned and styled using CSS. Because this results in cleaner code, your page may
load faster and search engines may rank your page higher.
The CSS also controls all of the font colors and sizes. The six heading tags have been styled as well. We include extensive styling for
images.
Note: Sometimes Expression Web may lose its formatting in "Design" view or 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. Don't panic, it's okay, just save your page, then refresh it. This will display your page correctly. To preview your pages, save
the page after each change and then go to File > Preview in Browser.
Creating New Pages
Find the layout you like and do a "Save As" to create new pages.
Editing the Content (.html) Pages:
This template package allows you to delete the pages you do not need or 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.
Directions for Template Development
Calendar
Included in this template is a very simple JavaScript calendar which shows the current month, date and year. Note: You will not be able
to see the calendar while in Design view. If you do not wish to include the calendar, you can delete it from the code.
To change the size of the fonts in the calendar or to change the colors, you must edit the calendar.js file.
We have included a very basic contact form. Your visitors can fill out the form and you will receive the
results by email. In order to receive the results, you will need to edit a few lines on the process.php script to set your email address where the form results should be sent and to set a
subject line for the emails.
javascript
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "yourname@yourdomain.com";
$email_subject = "Your email subject line";
Once the form has been submitted, you can redirect the user to your "thankyou.html" page. On the php script, near the bottom of the page
[Line 76 of the "process.php" page in the javascripts folder] you will need to set the
absolute file path to your "Thank You" page:
Important: This contact form works on many web hosting platforms, but we cannot guarantee it will work on all of them. If you
have configured the form according to the instructions above but have problems, your web host's support team should be able to help
with any server-side settings that may need to be made.
Drop Down Navigation
We have added a multi-level drop down menu that works perfectly in mobile devices, tablets and desktop computers. The levels will drop
down as you mouse-over the top links. You must edit the drop down menu in code view on the dwt or on individual html pages that are not
associated with a dwt.
html
<li><a href="../index.html">Home</a></li>
For a main topic that contains sub-topics, your code will look something like this:
html
<li><a href="../page.html">Main Topic</a>
<ul>
<li><a href="../page.html">Sub-Topic
1</a></li>
<li><a href="../page.html">Sub-Topic
2</a></li>
<li><a href="../page.html">Sub-Topic
3</a></li>
<li><a href="../page.html">Sub-Topic
4</a></li>
</ul>
</li>
Once you have your menu completed on the .dwt page save your page and allow
the changes to update on the .html pages. Font sizes and colors, background colors, margins, paddings, etc. are all controlled in the style.css page.
You can set the size where the menu changes to the mobile version. We have preset the width to 1024 pixels. If your menu uses fewer main topics, you may want to reduce
this size. Edit the code located at the bottom of the .dwt template pages:
javascript
<script>
$('ul.slimmenu').slimmenu(
{
resizeWidth: '1024',
...
</script>
Font Awesome Icons:
Font Awesome gives you over 600 scalable vector icons that can instantly be customized: size, color, drop shadow, and even movement.
Learn more about Font Awesome- We recommend you bookmark their page for easy reference.
html
<i class='fa fa-car'></i>
To use an icon as a bullet or marker, for example:
Adding the icons for "Home," "Call," "Email," and "Hours" can done
by applying a style to the paragraph tag.
If you have the style available in the dropdown style menu in the text editing box, then choose the style you need.
1. Add your text 2. Place the cursor at the beginning of the text and choose from the dropdown style box
for the classes available: Home, Call, Email, Hours or Comment
Call
Email
Comment
3. Once you choose your style, it will automatically show up! Easy stuff!
Google Fonts
By using Google fonts, you now have access to a wide variety of custom fonts. This offers quite a bit of of
flexibility for getting exactly the look you want, whether fancy or all business. These fonts can easily be
added to 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.
Your template contains 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 varying sizes. On mobile devices, the Lightbox
resizes the images to fit the screen.
First insert your small photo onto the page. Create a hyperlink to
the larger photo. Switch to code view and add class="lightbox" which
activates the JavaScript. If you wish to have a title appear, add the title attribute as shown in the example.
To click through a group of images, add a group name: data-lightbox-gallery="groupname". The "Previous" and "Next"
buttons will now automatically appear.
[Credit for this application: http://dev7studios.com/plugins/nivo-lightbox/.]
Pagination:
We have included a simple pagination block you can insert when you have a number of pages you wish to link to. Remember, this template
is a static site (not database driven), so you must manually code each page link.
We may have included an easy JavaScript slideshow on the home page of this template. It is very flexible and you
can use your own images sized as shown on the index page and add additional images. To make changes to the
images used, the file path to the image(s), or to add a hyperlink, you make the change within the script on the
.dwt template page(s). Note that you will not see the slideshow while in Design View, but it is visible when you
go to File > Preview in Browser.
The Highlighted "Description" area is the text that will appear on the slide show.
[Credit for this application: Released by http://nivo.dev7studios.com/. ]
Tips, Tricks & Miscellaneous Info:
1. Naming your pages: make all of the letters lower case and use
NO spaces between words. For example - gettingstarted.html or "camel case" - gettingStarted.html
2. Do NOT copy any text from Word, etc. directly into your web. Paste the
text into notepad to remove all formatting. If you copy directly into your
web, you may get lots of formatting code you don't need.
3. Make use of the Heading Tags. This template has 6 heading tags and quite a few classes that you can
use to give interest to your website. Check our "Typography" page for samples of things used
in this template/theme.
4.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.
5. Photo / Image Tips: a. Use all lower case in your photo / image name. b. Use "Insert > Picture > From .... Do not drag your images into your web. c. Use an image program to size your images. Do not grab the corner of the image and pull in to make the image smaller. It may seem like a small
image to you, but your viewer's browser must load the entire huge picture!
Morbi id dolor tellus. Cras nunc massa, congue sit amet interdum id,
vulputate ac eros. Mauris eu adipiscing erat. Ut magna nunc, tincidunt in
ultricies eu, elementum ut erat.