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.

Because of the relative font sizes and CSS-based layouts, different sections of the page may shift in FrontPage's Design/Normal view or font sizes may seem off. This is expected behavior! Simply go to File > Preview in Browser to make sure that your page looks okay in a browser. FP's Design view is not accurate.

  1. Make a new web...
    1. Unzip your web package.
    2. Look for the "naturalshopdb_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. CatalogImagesLocation - Similarly, this variable shows where product images are kept. Currently this variable is set to "images/catalogimages."
    4. 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.
    5. 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.
    6. 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 "browse by category" and "browse by occasion" navigation is generated by the database from the Category information. See below about how to edit the database.
      The subnavigation 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/catalogimages." See 7c 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

Include pages

This template uses Include pages for your editing convenience. The top header area (logo), the submenu shown on various pages, and the bottom footer (copyright) are in include pages. When you open the include pages and edit them, then save, the rest of your pages will automatically be updated.

Open "include_top.htm," "include_submenu," or "include_copyright.htm" to edit the included areas.

Your Logo here Image

The "yourlogohere" is actually an image. You will need some kind of image editor to add your own logo to the graphic. We've included a Photoshop 7 file for you. All you have to do is edit the graphic with your own image editor, save it, and replace the existing logo image. We advise keeping the same dimensions.

See 9a above.

Photoshop files included...

See our Photoshop Tutorial page for some basics on editing Photoshop images.

  • addtocart.psd - Used for add to cart button.
  • columns.psd - Used for background graphics that make the column effect
  • headingbg.psd - Used for heading 1 background image.
  • help.psd - Used for small questionmark icon.
  • mainpic.psd - Used for main picture.
  • menubg.psd - Used for horizontal menu background.
  • topbg.psd - Used for top gradient.
  • vertical.psd - Used for vertical bullet graphics.
  • yourlogohere.psd - Used for logo and top image.

The "yourlogohere" and top image is actually one graphic. You will need some kind of image editor to add your own logo to the graphic. We've included a Photoshop 7 file as well as a "blank" jpeg. All you have to do is edit the graphic with your own image editor, save it, and replace the existing logo image.

The logo/top image, main image, and background images also require you to use Photoshop or some other image editor to create your own images. See the Photoshop tutorial page for help.

Image Licensing Info

The images in this template are wholly owned by Corrie Haffly and may not be used separately from the template. If you are interested in obtaining larger resolution images for your own marketing use, please contact support@jgtemplates.com.

about product categories

Product Categories are what you see in the left menu area of the page -  Housewares, Gifts, Christmas, etc. We've separated these categories into two types - "Normal," which appears under the "Browse by Category" section (Flowers, Gifts, Housewares, etc.) and "Special Occasions," which appears in the left column under the "Browse by Occasion" (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 cart/help menu can be edited in the top.htm include page. Please note that the view cart link is a special PayPal link that will take users to your PayPal shopping cart. We recommend that you do not modify the link code itself.
  • Thee left column categories 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 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 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. Background gradient and color
    You will need to edit the bg.psd image in Photoshop or another image editor with your own gradient colors. Then, open the styles.css file and within the first few lines is the color code for the background:

    body {
    background: #ABED45 url('images/bg.gif') repeat-x;
    ... }

    Change the color code to match the bottom part of your gradient image.
  2. Logo
    Open the yourlogohere.psd file and change the text colors. Or, insert your own logo image into the top include page.
  3. Top curve
    You will need to open the contentbg.psd file to edit the colors of the top curve and background.
  4. Column divider color
    To change the color of the column divider, you will need to open columns.psd. Recolor the column to your own desired color. Save for web as "columns.gif" and replace the existing file in your web site.
  5. Main picture
    The main picture is a background image defined in the stylesheet. You can create your own image and name it mainpic.jpg and replace the existing one. The image will align to the bottom-right of the text area. You can modify the stylesheet (#mainpic) as necessary.
  6. Heading bullet image
    To change the color of the bullet images next to the headings, open accent.psd and change the colors of the layers. Then save as accent1.gif, accent2.gif, or accent3.gif and replace the existing images.
  7. 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.)

Database Information

In the instructions, we show you how to import the database to your server. By doing this through FrontPage, the correct read/write permissions should be set for the database..

Troubleshooting (new in v2): We've added a new page called test.asp. If you pull this page up in a browser (once you have published your site), several outputs will be written to the page helping you and us to know at what point the database is having problems.

Compact/Repair Database

From time to time, your database may become corrupt or slow. This is a general Access problem that can often times be solved by “Repairing and Compacting” your database. Note: You can only do this if you have a compatible version of Access installed on your computer. Please refer to the following links for information on this procedure:

http://support.microsoft.com/
default.aspx?scid=kb;EN-US;209137

http://support.microsoft.com/
default.aspx?scid=kb;EN-US;283849


Home | Help | Policies

Copyright © 200X Your Company Name - 1-800-XXX-XXXX