Lincoln Strategies, LLC  We help firms succeed in government markets.

 

Getting Started

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!
  • Instructions for changing colors and working with Photoshop files.
  • All Photoshop files included.
  • Include pages used for logo row, tab menu, submenu, and copyright area for easy editing.
  • Tested to work in IE 5+, Netscape 6+, Opera 7+, and FireFox.
  • Validated HTML 4.01 Transitional, CSS. WCAG 1.0 and Section 508 accessible.

Image Licensing Information

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

  • Mouse - 26768848
  • Keyboard - 24747994

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

Source Files Included

  • Photoshop 7 files
    • bgpic.psd - Used for column pictures.
    • horizontal.psd - Used for tab buttons.
    • yourlogohere.psd - Used for logo and top image.

General Instructions

  1. Make a new web...
    1. Unzip your web package.
    2. Look for the "biztabred_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.
  2. 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.
  3. 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. Delete pages from your web
      Right-click on the pages you wish to delete in your Folder List, in Folder View, or in Navigation View, then select "Delete."
    4. 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.
    5. 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.
    6. 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.
    7. Add your content!
      Type your text! Add your pictures! It's easy!
  4. 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!

Note: Because FrontPage's Normal/Design view does not always display CSS properly, the right column may "wrap" beneath the main column in Design View. This is fine -- if you preview the page in a browser, you'll see that the elements display properly.

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

Template Details

Include Pages

The logo area, menus, 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 7 file for your convenience.

Top menu

The top menu is also in the includes/top.htm page.

Tab menu

The tab menu is in the includes/menu.htm page. There are some important steps you will need to take to make sure that the tabs display correctly.

  1. When you open the menu include page, the menu will look like a bulleted list. This is because the stylesheet handles all the formatting.
     
  2. To add another link, carriage return to insert a new bullet item, type the text, and create a hyperlink to your page. The HTML code will now look something like this:

    <li><a href="../yourpage.htm">Your New Page</a></li>
     
  3. Next, you'll want to add an "id" attribute. The value of the "id" should be unique and all one word. We suggest that you call it something like "menupagename," so that it is easy to remember. For example: "menuhome," "menugettingstarted." Then, save the include page. The code should now look like this:

    <li><a id="menupagename" href="../yourpage.htm">Your New Page</a></li>
     
  4. Now, open the page where you want the tab to show as "selected." (You can have more than one page with the tab selected - for example, if you have an "about" section with multiple subpages, they can all have the "about" tab selected.)
     
  5. At the top of the HTML code, you'll find some stylesheet code that looks like this:

    <style type="text/css">
    @import "styles.css";

    /* change "menu-----" to match the name of the section tab */
    #menu1 #menuhome:link, #menu1 #menuhome:visited {
    background: url('images/horizontal.gif') no-repeat;
    }

    #menu1 #menuhome:active, #menu1 #menuhome:hover {
    background: url('images/horizontal.gif') no-repeat;
    text-decoration: underline;
    }
    </style>
     
  6. Change the highlighted code (in the example above, "menuhome") to match the ID of your page. Do this for each page that you want to have that specific tag be selected.
     
  7. If you want there to be no tab selected, simply delete the above style code from the HTML code of the page.

Submenu

The submenu is also within an include page to make it easier to edit. You can insert your own include pages for different sections (for example, one for about, one for services, one for support...).

Page Title

The page title is a FrontPage-generated page banner. To change the page title, you may go to Navigation View and rename the page.

Column pictures

The column pictures can be replaced by creating your own graphics that are 170x100 pixels and naming them bgpic.jpg (left) and bgpic2.jpg (right). We include the Photoshop file for your convenience.

If you don't want the column pictures at all, you can modify the stylesheet. Please see below in the Modifying Colors and Images section.

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.

Note: Because FrontPage's Normal/Design view does not always display CSS properly, the right column may "wrap" beneath the main column in Design View. This is fine -- if you preview the page in a browser, you'll see that the elements display properly.

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

CSS Resource Lists

modifying colors and images...

Do you want to customize the colors of this template? It's pretty easy, but you will need Photoshop or Photoshop elements to modify some of the graphics.

  1. Logo
    Open the yourlogohere.psd file and change the text colors. Or, insert your own logo image into the top include page.
  2. Tab graphics
    You will need to open the horizontal.psd file and change the colors of the tabs, then save as horizontal.gif.
  3. Submenu row color
    Open the stylesheet and look for:

    #menu2 {
    background: #xxxxxx;
    ...

    Change the color code to your desired color.
  4. Left and right column colors
    Open the stylesheet and look for:

    #body3col {
    width: auto;
    border-left: solid 170px #xxxxxx;  <-- left column color
    border-right: solid 170px #xxxxxx; <-- right column color
    }

    #body2col {
    width: auto;
    border-left: solid 170px #xxxxxx; <-- left column color
    }

    Change the color codes to your desired color.
  5. Column pictures
    The column pictures can be replaced by creating your own graphics that are 170x100 pixels and naming them bgpic.jpg (left) and bgpic2.jpg (right). We include the Photoshop file for your convenience.

    If you don't want the column pictures, open the stylesheet and delete the following sections of code:

    #body2 {
    background: url('images/bgpic.jpg') no-repeat;
    padding: 130px 5px 5px 5px;
    ... }

    #body3 {
    background: url('images/bgpic2.jpg') no-repeat;
    padding: 100px 5px 5px 5px;
    ... }
     
  6. Text, heading, and other colors
    Go through the CSS file and look for any color code, which is a six-digit alphanumeric code preceded by the # sign. You can change the color codes to your own. (Hint: Do a Find > Replace to replace the same colors across the stylesheet.)