Getting Started

In this section...

Included:


accent1_blank.jpg


accent2_blank.jpg

Photoshop source file also included.

 

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

  • A starter web template that you can use by adding your content and renaming pages.
  • Table-less CSS layout gives cleaner code, which means better search engine optimization. All positioning and layout is accomplished through a cascading style sheet.
  • CorbisŪ images used.
  • Photoshop source files are included!
  • Tested to work in IE, Netscape 6+, Opera 6+, Mozilla, and Firefox. Some of the older browser versions (Opera 6 in particular) may not display the transparent background on the splash page.

Image Licensing Information

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

  • field and sky - BAG089
  • children eating ice cream - RF244436
  • laptop computer - CB042081

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

Source Files Included

  • Photoshop 7 files
    • accent.psd - Used for the "ads" on the home page
    • bg.psd - Used for the main background image
    • bodybg.psd - Used for the two and three column background images
    • logo.psd - Used for the simple text logo
    • mainpic.psd - Used for the thinner image on the main pages
    • menubg.psd - Used for the menu and footer backgrounds
    • splashpic.psd - Used for the larger splash page image
    • transparentbg.psd - Used for the transparent background on the splash page
    • verticalbutton.psd - Used for the vertical menu graphics and vertical menu header graphic

General Instructions

  1. Unzip your web package.
  2. Look for the "commgrill_web" folder.
  3. Copy the contents of this folder to your web directory.
  4. Keep a backup of the zip file.

Template Details

W3C Validated CSS

If you would like your site to be completely W3C-validated, including the CSS file, then you will have to trade off having a transparent box on the splash page for Internet Explorer (Netscape, Mozilla, FireFox, and Opera will still display a transparent box). To achieve this, open the styles.css page and go down to line 212. Delete that line (you'll see a note there to help you make sure you're deleting the correct line), and your style sheet will be W3C validated, as well.

Your Logo Here top area

The "your logo here" area is a graphic. We've included the source Photoshop 7 file for your convenience. The logo should be no taller than 52 pixels, or else the style sheet will need to be modified.

Splash Page

Main image

The image on the splash page is a background image, defined within the style sheet. If you wish to include your own graphic, create a graphic that is 750x250 pixels and save it as "splashpic.jpg." Replace the existing image in the web site.

Special Text Area

The splash page has a special text area. The width and height are defined in the style sheet. Limit your text to fit within this area, or modify the box's width, height, and position in the style sheet.

Header Graphic on Other Pages

The header graphic is a background image defined within the style sheet. If you wish to create your own graphic in its place, make a graphic that is 750x102 pixels and save it as "mainpic.jpg." Replace the existing image in the web site.

Page Title

The page title is set to Heading 1 with an ID of "banner" for the style to apply.

Horizontal Menu

The horizontal menu may be modified with your own hard-coded links.

Submenu

To create a submenu, start with this HTML code (copy and paste):

<ul class="submenu">
<li><a href="link.htm">Link Text</a></li>
</ul>

Insert this code into the "body2" area (left column), then edit the link and URL. Add more list items as necessary.

We suggest putting these lists into include pages for easier editing later.

Breadcrumb

The "breadcrumb" links are hard-coded. You will have to modify this area if you create subsections.

Footer

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.

CSS Resource Lists