Getting Started

This package comes with the starter web site in .zip format. Unzip the package and start editing the pages. You should keep a backup copy of the .zip in case you need to start over.

We have included a basic site structure with common pages that you may use to start with. You may rename the pages, add more pages, and add your content.

Features...

Multi-page Expression Web® /FrontPage 2003® template.
Master DWT pages for 1-column, 2-column, and 3-column page layouts.
Includes used for company name, navigation links, and copyright.
CSS-positioned page layouts (no tables) and external CSS file.
Fixed-width layout centered on screen. Designed for 1024 x 768 and wider.
Cross-browser tested: Internet Explorer 6 and 7, and FireFox 2+.
Validated XHTML 1.0, CSS, WCAG 1.0, WCAG 2.0, and Section 508 accessible.
Legally licensed images.
Made in the USA!

Important note for FrontPage Users

This template uses CSS for the layout. Because the FrontPage "design view" is not as sophisticated at displaying CSS properly, the heading fonts or spacing might seem too large or too small. This can be frustrating if you are used to getting a good "preview" of what your site looks like, but you'll find that it is almost just as easy to keep previewing your site in a browser as you make changes. You will still be able to edit your text and add content as you normally would; after you save, go to File > Preview in Browser to view your site in a browser and make sure that it really looks as it should.

Also, occasionally FrontPage's Normal/Design view may "lose" the formatting. When this happens, just press "F5" to refresh the view and the styles will return.

Server Requirements

This template does not require FrontPage extensions.

NOTE: If you want to add FrontPage forms to your site, your web site will need to be published on a server that has FrontPage extensions. Check with your hosting provider to make sure that you can use FrontPage forms on your site.

Licensing Information

Copyright

The copyright for this template and accompanying design remains with the designer, Long2 Consulting. 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.

Unlike some other template developers, we don't charge extra for an unbranded template. You CAN remove the link to Long2 Consulting in the copyright. However, we would appreciate you keeping the link and letting us know the site domain where you used the template. Send us an e-mail when you have your site completed!

If you are developing a site for a customer using this template, you may NOT put Website by @ Yourself, Created by Yourself, or Designed by Yourself. You MAY use Website Developed by Yourself. Do not claim any copyright on the design.

Licensing

The license fee for this design is a site license, not a user or computer license. This design is, therefore, licensed for use on ONE SITE ONLY. If you want to use this design on additional sites, you must purchase a license for each additional site.

Please e-mail llong@long2consulting.com if you have any questions about licensing.

Image Licensing Information

The royalty free image used in this template are from BigStockPhoto.com. If you wish to purchase larger versions of the image for your own marketing use, please go to www.bigstockphoto.com and look for the following image(s): #237210.
If you are purchasing this template and intend to use it to build a site for someone else, you must disclose to your client that this template uses images from BigStockPhoto.com.

Source Files Included

None

*Note: All source files are licensed for use with this web site template only and may not be used in any other projects, web sites, or applications.

What's needed

Expression Web or FrontPage 2003: This template was designed specifically for the Expression Web and FrontPage 2003 programs. Because the template uses dynamic web template (.dwt) pages, it is NOT compatible with earlier versions of FrontPage.

General Instructions

Make a new web...

Unzip your web package.
Look for the "productname" folder.
Copy this folder to your "My Webs" folder that is located in your My Documents folder.
In FrontPage 2003 or Expression Web, go to File > Open Site and browse to this folder to begin editing your site.

Preview your new web...

Click on any page and go to File > Preview in Browser.
Click on Internet Explorer and click Preview.
A browser window will open with your new web. Preview the pages of the web and decide what pages will be in your web site. You may keep this window open and return to it and refresh to see your changes.

Modify your new web...

Add new pages using the layout pages:
Open a page that has the layout the way you want it, then go to File/Save As. Save the page under a new name - be sure to change the page title as well! Then, edit the menus on the include pages (see specific instructions below).
Add new pages using the dwt templates:
Go to File, New, Create from Dynamic Web Template. Select the dwt template page in the dwt_template folder and click Open. Then, edit the menus on the include pages (see specific instructions below).
Rename existing pages
If you would like to use an existing page but want to rename it, you may easily do this in Folders View. Right-click on the file name and/or the page title and choose "Rename" to rename your file. Then, edit the menus (see specific instructions below).
Delete pages from your web
Right click on the pages you wish to delete in your Folder list then click Delete.
Add content:
See below for more information about editable and non-editable areas.

Before You Publish:

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.
Review and reset any form properties so you can receive any form submittals into your email client.
Spell check each page.

Publish your web!

Go to File/Publish Web.
Type in the URL of your web site. For example, http://www.yoursite.com. If you don't want to overwrite your existing web site but just want to publish it temporarily to preview it, publish it to a subfolder like this: http://www.yoursite.com/test.
Type in your user name and password when prompted.
If you are publishing to a new folder, FrontPage may prompt you to "create a new web." Go ahead and click OK.
Then, click Publish. FrontPage will publish your web. When it's done, you'll be able to click to view your published site!

Template Details

Change the image

The main image on this template cannot be easily changed. Contact Long2 Consulting for pricing if you are interested in a different image.

Change the Company Name from text to a graphic

Create a graphic that is no larger than width=325 pixels and height=100 pixels and save it to your images folder. Open the companyname.htm in the includes folder. Change the class from headerleft to headerleftimage.

Insert your company logo/name as an image. You should end up with code that looks something like this:

Edit the Dynamic Web Template pages

Dynamic Web Template pages can be found within the dwt_templates folder of your web. These pages all have a .dwt extension. DWT pages contain the basic structure for all of the web (.htm) pages. You will find a .dwt for each different page layout included in your template package. If you change a DWT page, all of the web pages based on that DWT will also change. DWT pages have two types of regions: editable and non-editable.

Editable Regions: The content in these regions can change from page to page. You simply open your HTML page and add, remove, or modify the content in these regions.
Non-Editable Regions: The content in these areas is defined in the DWT page. This content cannot be changed in the HTML page. To change a non-editable region, you need to open the DWT file. Changes to these files will change every page in your site based on that DWT page. In addition, we cannot support a template where you have modified the DWT pages.

Edit the Content (.htm) pages

This template allows you to delete the pages you do not need or to rename existing pages. 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 the non-editable regions.

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:

Type some placeholder text between the two tags as follows:
<p>MyContent</p>

Switch back to Design view and you will now see the editable region and you can add your content.

Edit the Include pages

Because this template uses several DWT pages for layouts, we use include pages to for items that appear on all pages, but that you will want to edit. This allows you to easily change your links on the appropriate include page, rather than make changes to several DWT pages. Your include page will most likely look like there is no formatting. Just make your changes and save the include page. The correct formatting will appear on the actual HTML page. You will typically find the following include pages in the includes folder:

companyname: This page contains the text for the company name. You can also insert a graphic logo or graphic text instead of the text. See the Getting Started page for details on the maximum size graphic you can insert in your template.
headerlinks, topnavlinks, sidelinks, bottomlinks: Some templates have multiple navigation link areas. Use which ever links you want. If you don't want to use the links, simply delete the links in the include page. Don't delete the class DIV incase you decide to put the links back.
copyright: This pages contains the copyright information for your site.

Navigation links

This template has four sets of navigation links depending on the layout you use. To edit the navigation links, you must update the dwt files. The links are made up of hard-coded text links.

headerlinks: Appear at the very top of the page. Limit to 3 or 4 links.

topnavlinks: The horizontal links below the main graphic area. Limit to about 10 links.

bottomlinks: The horizontal links above the copyright. Limit to about 10 links.

sidelinks: The vertical links on left in the 2 column and 3 column layouts. These have a heading that you can use or remove.

<div class="menuheader1"><a href="#">Main Menu</a></div> ***To make this into a link change the # to the page link.***
<div class="sidelinks">
<a href="index.htm">Home</a>
<a href="contactus.htm">Contact Us</a>
<a href="store.htm">Our Store</a>
</div>
<div class="menuheader2"><a href="store.htm">Our Store</a></div> ***If you don't want two levels for menus, just delete the menuheader divs***
<div class="sidelinks">
<a href="product1.htm">Product 1</a>
</div>

<div class="menuheader1"><a href="#">Layouts</a></div>
<div class="sidelinks">
<a href="layout1.htm">Layout 1</a>
<a href="layout2.htm">Layout 2</a>
<a href="layout3.htm">Layout 3</a>
</div>

<div class="menuheader1"><a href="#">Template Info</a></div>
<div class="sidelinks">
<a href="typography.htm">Typography</a>
<a href="gettingstarted.htm">Getting Started</a>
</div>

In the DWT you can do the following:

To delete a link, remove the entire line of code for that link.

To add a link, simply copy one of the existing links and then paste it where you want the new link. Enter the correct page name and title for the link. The page name is the part that has the .htm, for example index.htm is the page name for the page with the title Home. Note: don't change the page name of your home page to anything other than index.htm. This is a standard name for homepages.

NOTE: When you change the navigation structure, it might not be visible until you Publish the site to your web server. Try to use File, Preview in Browser to see your changes, if they don't appear, try publishing the site to a test area on your server.

News

The News areas don't use any special features. Just use regular paragraph with either news1 or news2 classes applied to the paragraphs for the headers to separate your news items. See the layout3 page code for examples!

Search Engine Meta Tags

This template contains search engine meta tags on each page which you should fill out with the site information so the site is indexed by search engines.

Typography

Headings

Use headings to separate your content into sections. To apply a heading, place your cursor in the text and select the heading from the styles box that is located to the left of the font box.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Regular text

Footer/Copyright

The footer can be edited in the include page. Modify the footer with your own company information and links.

Cascading Style Sheets

This template uses a layout and styles defined through CSS. You will need to be comfortable with basic CSS if you want to make changes to the styles of this site. To make changes to the layout, you must have at least intermediate CSS skills. Here are some resources to help you with CSS:

Long² Consulting Services

We do not have the resources to change template images or colors for free on request. We do offer custom design services at reasonable rates for these types of template modifications, please visit our custom page at www.long2consulting.com. We do not recommend you attempt to make major changes to this template package.

We offer customer support for our products. If you have a question regarding your template, please send us an e-mail message and we'll quickly get you the answers you need.

We do NOT offer support on how to use FrontPage or Expression Web beyond the instructions given within this template. Please use the following sources to help you learn how to perform web building tasks:

Use the FrontPage or Expression Web Help files by pressing F1 in the program. They contain information on how to perform most of the tasks available within FrontPage or Expression Web.
Buy a book on your FrontPage or Expression Web version, we highly suggest Microsoft's Inside/Out Books, available through most bookstores.
Join a FrontPage or Expression Web users group such as the one found at www.outfront.net