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.

1. Make a new web...
   1. Unzip your web package.
   2. Look for the "onlinestore-db_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.
   5. Immediately publish to your server...
2. Publish your web...
   1. In FrontPage, 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.
3. Open your site off the server...
   1. Go to File > Close Site to close the local copy of the web.
   2. Then, go to File > Open Site (or Open Web).
   3. Type in the URL of your web site.
   4. Open your new web! After importing the database (next step), you can start editing the files.
4. Import the database...
   1. In the download file should be the .mdb Access file. Import this file into the FrontPage Folder List. (You can open Windows Explorer and drag/drop it from your computer to the FrontPage Folder List.)
   2. FrontPage will ask if you wish to create a new database connection. Click OK.
   3. FrontPage will ask if you wish to store the database in the "fpdb" folder. Click OK. *Note: If you wish to store the database in a different folder, you will need to open includes/vConnectionString.inc and admin/includes/vConnectionString.inc and update the path of the database.
   4. FrontPage will move the database into the "fpdb" folder and set the permissions for the database so that you can add and edit product records.
5. Test and preview your new web...
   1. Go to File/Preview in Browser.
   2. Click on Internet Explorer and click Preview.
   3. A browser window will open with your new web.
   4. Test the database by going to http://yourwebsite/test.asp. Several messages will be printed out. Check to make sure that the connection string is valid and that the database seems to be updatable.
   5. Then, continue on by previewing the pages of the web and decide what pages will be in your web site.
6. Change your administrative password...
   1. In the browser, manually type in "/admin" after the web location (for example, http://myweb/admin) to access the admin area.
   2. You will be asked to log in. Type in the user name "admin" and the password "password".
   3. The first thing you should do is to change your password so that no one else will be able to access your admin area. Type in your new password and click the "submit" button to change your password.
7. Change other Site Variables...
   In FrontPage, open includes/variables.inc. You will see several variables listed. Change them as necessary. (Note - all non-numeric values must be within quotation marks - for example, the PayPal email and image locations must be surrounded by quotation marks.)
   1. NumPhotos - This variable determines how many items are displayed on your catalog pages. Currently this variable is set for "10." You may change it to any multiple of five. (Note - the "Images Shown" dropdown box will then show the option for NumPhotos, NumPhotos x 2, and NumPhotos x 3. For example, currently NumPhotos is 10, so the dropdown box shows 10, 20, and 30. If you change NumPhotos to 20, the dropdown box will show 20, 40, and 60.)
   2. NumDaysConsideredNew - This variable is set to 31. If a product added is within 31 days of the current date, a "New" note will be added. You can change this to any number of days that you wish.
   3. CategoryImagesLocation - This variable allows you to set the path of the location of your Category images. Category images are the "heading" image of the category type ("Birthdays," "Weddings," etc.). Currently these images are stored in "images/categoryimages." If you wish to change the location of these images, you will need to change this variable.
   4. CatalogImagesLocation - Similarly, this variable shows where product images are kept. Currently this variable is set to "images/catalogimages."
   5. PayPalEmail - This very important variable must be set for your PayPal buttons to submit to your PayPal email address. Change this variable to the email address associated with your PayPal account.
   6. SmallPhotoWidth, SmallPhotoHeight, LargePhotoWidth, LargePhotoHeight - These variables allow you to set the widths and heights of your product images. You will have to keep all your product images the same width and heights.
   7. CategoryImageWidth, CategoryImageHeight - These variables are for the category image widths and heights. The category image is the large image at the top of the catalog page specific to the category. You will most likely not have to change these variables.
   8. AdminShowMe - This allows you to control the number of products shown on a page of the "Administer Products" page.
8. Copy changes to other variables files.
   There is a second "admin/includes/variables.inc" file that has the same variables. You will need to copy/paste your changes into this file. Any time you make changes in one, you must duplicate the changes in the other.
9. Modify your new web's non-catalog pages...
   Be very careful not to delete any of the ASP code and includes.
   1. Add your logo
      You may open the "includepages/top.htm", delete the existing logo image, and insert your own. Saving this page will update all other pages.
   2. Edit the copyright info
      Open "includepages/copyright.htm" to edit the bottom area.
   3. Add new pages
      In FrontPage, 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 for page banners to show up.
   4. Edit navigation
      The top navigation is generated by the database from the Category information. See below about how to edit the database.
      The subnavigation (the vertical menu and horizontal menu on the template and other pages) is within an include page. Open includepages/submenu.htm to edit the links. When you open the page, it will look like a bulleted list of links. That's okay! Simply add more list items and hyperlink them. The CSS will format the list to look like vertical or horizontal links (depending on which page template you're using).
   5. 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.
   6. 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."
   7. Warning!
      This page has been very carefully formatted with CSS. Do not drag on any table or "div" lines or handles - you may "freeze" the page so that it no longer resizes properly.
   8. Add your content to non-database pages
      Type your text! Add your pictures! It's easy!
10. Edit Product Listings and Category Listings
    Log into the admin area. It's pretty self-explanatory, but here are some notes:
    1. Click Admin Products to view your list of products and to add more products. You may Edit and Delete records, or Preview the page as it will show up in the catalog.
    2. Click Admin Categories to change the lists of categories or to make some categories active or inactive.
    3. Any new product images will need to first be imported into your FrontPage web site into their respective folders. We've set ours to be in "images/categoryimages." See 4c and 4d for changing the location of your images.
    4. The Admin Featured Products page allows you to change the "featured" products that are listed on the home page.
    5. We have more help within the actual Admin section if you have questions about how to use it.

Server Requirements

This template has been designed to work with Microsoft Web Servers, including IIS 4.0, IIS 5.0 and IIS 6.0. The web server must have support for:

• ASP 3.0 or later
• Hosting a Microsoft Access Database
• FP extensions or Windows Sharepoint services to allow editing live off the server

Please see the Getting Started page for more details and steps to get started.

FAQ

• How do I change the colors?
  Most font and table cell color are controlled by the CSS file (styles.css). You may easily change color codes in this file. To change the rounded corners of the menu bar, you will need to modify the menu.psd file in Photoshop 7+ with your desired colors and save/replace the menu-left.gif and menu-right.gif graphics.
• Can I change the layout of the catalog or detail pages??
  Not unless you are very comfortable with HTML and ASP. As far as this product goes, "what you see is what you get," and we do not provide support for changing the existing layout of the listings catalog or listings detail pages. If you are not proficient in HTML, we advise that you do not attempt to modify the layout. If you really want to change the layout, you may order custom work from us to help you change the web page layouts. (Note - everything in this template is "open source." If you are familiar with code, you will be able to modify anything and everything.)
• How do I add more product listings?
  See above!
• Can I add more "fields," like "size," or "color"?
  This will most likely be very difficult for you to do on your own, unless you are very comfortable with HTML and ASP code. You would have to order custom work from us or hire someone else who is comfortable with HTML and ASP code. We are always open to hearing suggestions on how to improve the product, so if you have an idea for a new field that should be added, please let us know at support@jgtemplates.com. If you don't want to wait for a new version, we suggest that you put extra information in the "description" field.
• Do I need to know ASP or HTML to use this template?
  No, you don't. This template is built so that it's easy for you to start using it. We have full instructions on what you need to do. This template is also built "as-is" -- we do not expect you to try to change the catalog layout or detail pages.
• What kind of server can I host this web site on?
  A Microsoft Server with IIS 4.0 or later and ASP 3.0 or later  installed. You may also require some extra assistance from the web server administrator. This is discussed further on the Getting Started pagee.

about product categories

Product Categories are what you see in the horizontal and left menu area of the page -  Housewares, Gifts, Christmas, etc. We've separated these categories into two types - "Normal," which appear in the top row (Flowers, Gifts, Housewares, etc.) and "Special Occasions," which appear in the left column (Birthdays, Easter, Christmas, etc.).

The administrative interface allows you to change, add, or delete all categories. You may also set some categories to be "active" or "inactive" -- for example, this database has a "New Baby" category, but we've set it to be "inactive" so that it doesn't actually show up..

about the menu bars

• The home/view basket/help menu is actually made up of custom-designed graphics. To edit these, you will need to have Photoshop and edit the included topbuttons.psd file.
• Thee top horizontal menu bar and left column menu bar (by occasions...) are generated by ASP according to the database. See the above section on "product categories" for more information.
• The bottom menu bar (near the copyright) is hard-coded in the include page. Open includepages/copyright.htm to add more links.
• The additional links in horizontal or vertical submenus found throughout the pages are all within the includepages/submenu.htm include page. You may edit this page to change the links across the site.

modifying colors...

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. Top "home," "cart," "help" buttons
   You will need to edit these graphics in Photoshop by recoloring the layers/text and saving for web -- the slices are named so that they will save under the correct file names. See Photoshop tutorial page for how to recolor layers.
3. Horizontal menu
   1. Change rounded menu graphics
      The rounded corners of the top menu are actually two graphics, one for the left side, one for the right, that will require Photoshop or Photoshop Elements to edit. Open menu.psd, recolor the layers, and save for web as "menu-left.gif" and "menu-right.gif" (see Photoshop tutorial page).
   2. Change "special occasions" graphic
      Open specialoccasions.psd and change the background and text color. You can even type your own text in place of "special occasions." Save for web as "specialoccasions.gif" and replace the existing image in the web site.
   3. Change CSS
      Open styles.css and scroll down until you find code that looks like this:
      
      #menu1 {
background: #FFAD36 url('images/menu-right.gif') top right no-repeat;
color: #fff;
font: 90% Arial, Verdana, Helvetica, sans-serif;
height: 19px;
}

#menu2 {
background: #740B8E url('images/specialoccasions.gif') no-repeat;
padding-left: 110px;
color: #fff;
font: 90% Arial, Verdana, Helvetica, sans-serif;
height: 22px;
}

      Change the background color codes for menu1 (the top orange menu) and menu2 (the bottom purple menu).
4. Right column background color
   To change the light green of the right column of the Template 4 layout (like this page), you will need to open columns.psd. Hide all layers except for the "layout c" layer. Recolor the column to your own desired color. Save for web as "columns-c.gif" and replace the existing file in your web site.
5. Text, heading, and background 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.)

see page layouts...

• Template 1 - This template layout (similar to the home page) features a right column where you can put product categories or product pictures, a "features" area, and a main picture area where you can feature your latest special.
• Template 2 - This template has a left column and a main column which can hold lots of information.
• Template 3 - This template layout has a single column for pages that will have a lot of content.
• Template 4 - This template has a right column for subnavigation and a main column.