This 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 that you may use to start with. You may rename the pages, add more pages, and add your content.

Features

Starter web site helps you to start a web site quickly and easily.
CSS-based layout gives cleaner code. No tables or JavaScript used!
All Photoshop files included.
Include pages used for logo, menu, and copyright area for easy editing.
Tested to work in IE 5+, Netscape 6+, Opera 7+, and FireFox.
Validated HTML 4.01 Strict, CSS. Priority 1 and 2 WCAG 1.0 and Section 508 accessible.

Getty Images is the world's leading image provider of visual content to communication professionals, who represent a diverse range of industries, including advertising, design, magazine, newspaper, broadcasting, production and new media. Visit Getty Images.

John Galt's Templates is a trademark of Advantrics LLC and is a leading provider of web site and presentation templates, tutorials, and more. Visit JGT.

PixelMill is a trademark of Advantrics LLC. Visit PixelMill.

Image Licensing Information

The royalty free images used in this template are provided as a part of a licensing agreement between Getty Images and Advantrics LLC. If you wish to purchase larger versions of the images for your own marketing use, please go to Getty Images' web site and look for the following images:

Laptop computer sketch - OPE_001
Group of businesspeople - dv1925012
Laptop - AA018009
Computer mouse - dv126021

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

Source Files Included

Photoshop 7 files
- alpha.psd - Used for alphabet graphics.
- homebg.psd - Used for home background with horizontal stripe.
- homebg2.psd - Used for home page main graphic.
- pagebg.psd - Used for page background with horizontal stripe.
- pagebg2.psd - Used for page main graphic.
- yourlogohere.psd - Used for logo.

Not included: Rubino Sans font used for the alphabet letters.

General Instructions

Make a new web...
1. Unzip your web package.
2. Look for the "productname_web" folder.
3. Copy this folder to your "My Webs" directory.
4. In FrontPage, go to File > Open Web or Open Site and browse to this folder to begin editing your site.
Preview your new web...
1. Click on any page and go to File/Preview in Browser.
2. Click on Internet Explorer and click Preview.
3. 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...
1. Add new 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, go to Navigation View and drag your new page into the navigation structure. Edit the menu if necessary (see specific instructions below).
2. 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.
3. Add your own logo
  The logo is in the "includes/top.htm" file. Open this page to edit the logo (see below in specific instructions). After saving this include page, all your other pages will be automatically updated.
4. Edit the Copyright statement
  The copyright statement is in an include page for your editing convenience. Open "includes/footer.htm" and edit the text, then save. All your pages will be automatically updated.
5. Add your own layout if necessary
  This page has been very carefully formatted with divs so that it resizes both vertically and horizontally. Do not drag on any div corners - you may "freeze" the page so that it no longer resizes properly.
6. Add your content!
  Type your text! Add your pictures! It's easy!
Publish your web!
1. Go to File/Publish Web.
2. 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.
3. Type in your user name and password when prompted.
4. If you are publishing to a new folder, FrontPage may prompt you to "create a new web." Go ahead and click OK.
5. 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

Include Pages

The top area, menu area, and footer are in "include pages." Editing the include pages will update the other pages across your web site. Open them, make your changes, and save.

The include pages will look like they have no formatting applied. This is okay! Simply make your changes, then preview the other website pages in a browser.

Your Logo Here top area

The "your logo here" area is a graphic in the includes/top.htm page. We've included the source Photoshop file for your convenience. Open the includes/top.htm page to replace the logo with your own.

Horizontal menu

The horizontal menu is also in the includes/top.htm page. It is made up of hard-coded text links in list format. Open the include page, edit or add to the links, and save to update the web site.

Page Title

The page title is a FrontPage-generated page banner (except on the home page, where it is just plain text). Go to Web Site > Navigation to change the page title and thus the page banner text.

Alphabet Graphic

You can change the alphabet graphic on each page. Graphics are included for letters a-z (lowercase, English).

Look for this code at the top of each page:

#body1 {
background: url('images/alpha/alpha-t.gif') no-repeat;
padding-left: 35px;
}

Change the alphabet letter. You can adjust the "left padding" value to line up the body text as necessary.

Bordered Images

Apply the classes "floatleft" or "floatright" to get a bordered image that floats to the left or right of the content area.

Footer

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

Cascading Style Sheets

This template is a table-less layout. Positioning and layout is defined through CSS. You will need to be comfortable with advanced CSS positioning and formatting techniques if you want to make changes to the layout of this site. If you just want to add your content, you will need some basic CSS skills and HTML skills.