Getting Started...
- After unzipping this package simply copy & paste the pages into your web directory.
- This page, opens in a new window so you can easily go back and forth while you work.
LETS GET STARTED...
First decide which pages you will have in your website. decide if the page will work better in Template 1 or Template 2. Using your template pages select from the top bar "File> Save As" Give your new page a file name and title. You can always add or delete more pages later on. This exercise will just get us started.
We use allot of include files in our templates. lets change them first since they will be on allot of different pages If you want to change any of the font types, sizes, or colors do so in the master.css file. This will keep all your page styles consistent and only requires these changes in this file. Aren't include pages great?.
CHANGE HEADER:
Open the file includes/header.htm. On this page you can add your logo by inserting it over the area reserved for your logo. A Larger Logo will expand the header and may distort your pages. Taller is Ok but you must be careful with the width. Be sure it is properly sized or it will distort your table and render the template head differently. Then you can type in your company name using any font or graphics program you desire. You can also delete the Logo table and just use a title. Be sure the font size does not exceed the necessary height. Click save and close. If you desire to change the font type, size, or color, make your changes in the master.css file. This will change the header elements with little effort on your part. The included banner was made using PhotoShop. You can delete the banner and type in your own or we can make an identical banner for you at no charge within 15 days of your purchase. Please go to our web site and fill out the "Free Banner Form".
EDIT COPYRIGHT:
Open the "includes/footer.htm file and change the "Your Web Site lines to match your information. This will change the lower page info on all pages.
EDIT CONTACT INFO:
This pertains to the email us button on the top bar. Open the "menu.htm file and by going into the code, change the email address you wish to use.". You will also need to edit the form information which we will cover next.
EDIT THE CONTACT FORM:
Your template uses 3 forms all configured for FrontPage. First open the file info.html. This is your basic contact form. Place your curser anywhere within the form field. You will see dotted lines or boxes, this is the form field. Right click and select "Form Properties". Just follow the tabs to select the many options that you have and to add your email address. The form also logs to a file in the _private folder. Now you need to do the same thing to add your email address to the other forms in your template.
EDIT NEW LISTINGS BOX:
Open "Includes/new_listings.htm file. This is an include file. if you want to use a few different include files like this one just do "Save As". To edit the file simply insert your graphic over the existing one. The graphic size is 150 x 96. You can make the graphic longer but not wider. if you make it wider you will have to resize the table on all pages where it is used. You will then need to insert your link to more information. Just right click and select hyperlink properties and browse to the info page. the info pages that are included can be utilized by doing save as and inserting the proper graphic and information. Nothing else needs changing. You will use the same sequence when editing your local listings page. This table was built with a Fieldset code so be very careful when making adjustments. The virtual tour boxes are constructed the same way.
EDIT NAVIGATION MENUS:
The template uses 2 CSS navigation menus. The top / main menu and the services menu. To change these menus open "top-menu.htm" It is much easier to work within the code. so open the code by clicking on the code tab on the bottom of the page. Starting at around line 32 the menu will be begin. The first menu line is:
<a href="index.html">Home</a>
To change a page and link: change <a href="index.html to your page address. Change "Home" to your page name.
To add a page simply copy the above line or any line in your menu and paste it in place.
Follow the same process for the services menu. The menu is an include file on the header.html. The menu is centered by adjusting the margins by way of the master.css. You can also tighten them up this way. You might be able to squeeze one more button on the line. if you need more page links I would recommend that you install a JavaScript Drop Down Menu. There are plenty of free ones on the net. A good place to start is Dynamic Drive.
ADD A PAGE:
There are 3 template pages included in your package. You can use either of them or any other page in your package. Just do "file/save as" name it and save. It will not delete the page you had selected. It will create a new page. Just add your content or erase and add your content, which ever applies.
THE VIRTUAL TOUR:
You can follow these instructions to set up your virtual tour and it will be pretty simple. If not your on your own.
All the files for the tour area can be found in the "tour" folder.
1. You do not need to have or understand "Flash" to set the tour's up. Everything is preconfigured for you. You just size your photos and upload to your site and be sure to use the same file names. The outside box and fonts can be re-colored in the tour source code and the fonts in the css file.
2. In the "tour" folder edit the tour-1.htm through tour-4.htm with your own item descriptions in the right column and on the bottom. Each view shows the same layout so it would probably be helpful if you entered a brief description for each tour photo..
3. For each tour replace the images used in the tour popups. For example, for tour #1, edit the panoramic. jpg and the 9 other .jpg images found in the "tour_folder-1" that is inside the "tour" folder. Each tour image has a thumbnail and a full sized image to edit. For the scrolling image (panoramic. jpg) the matching thumbnail is called tour-1thumb.jpg. Be sure to keep the pictures the proper size to insure uniformity through out your web site. The panoramic picture can be a wide angle photo or several smaller photos stitched together with your favorite graphics program. We suggest you do it right and have it done by a professional photographer. Proper presentation is very important.
4. You will find it much easier if you do not change the img titles. Just rename your graphic the same name that is now being used. For instance in the folder tour_folder-1, you will see a picture titled panoramic. jpg. This is your main picture 1500 x 267. When adding your picture just be sure it is named panoramic. jpg. This will overwrite the main picture that is there currently. The smaller pictures are 400 x 267 and the thumbnail photos are 50 x 33, but you can make the thumbnails any size you like. 5. Each tour is set to open in a popup window and the user can just close the window to stay on the tour base page. You can adjust the window size as well as change placement, scrollbars, etc by changing the JavaScript code on the page. The code appears between the <head> and the </head> tags. It is clearly marked to be visible.
6 You can find more information regarding the code for Virtual Tours on These websites which can be very helpful.
<<Click Here>>
PROPERTY LISTINGS:
The property listings are shown on the local-list.htm page. Simply insert your own graphic over the existing graphic. Graphic sizes are set at 125 x 88. These sizes can be changed but it may change the table sizes on the page so you may have to adjust. The information pages are set to show in a popup window. You can change the options and sizes for the windows by adjusting the code at the top of the local-list.htm page. It is clearly marked in the code. This is a JavaScript setting. There is also a listing template included in your package.. |
