Tutorial #2

Having already (in tutorial #1) copied the template files to a suitable local folder, and tested to make sure "index.html" will start up the site, it's time to start the customization/personalization process.

IMPORTANT NOTE: MAKE A COPY OF FILES YOU'RE PLANNING TO CHANGE BY DOING A "COPY" AND "PASTE" BACK INTO THE SAME DIRECTORY. IF YOU REALLY MAKE A MISTAKE OR DELETE THE ORIGINAL FILE, YOU CAN START OVER AGAIN BY JUST RENAMING THE COPY BACK TO THE ORIGINAL NAME.

1. In your file manager (Explorer or My Computer etc. on PC; Finder on MAC) navigate to the local website folder you're using.
2. Edit the "main.html" page, adding your company image, text, and other graphics, as you desire. You can add text, tables, divs, CSS markup to your heart's content as long as you don't change the pages basic width, which is set for 980px. If you change this, the site will not appear correctly.
3. Edit the "contact_us.html" page with your company information, additional artwork, and add a link to your preferred email address, etc. Again, don't change the page width from 980px.
4. Edit "index.html" (Notepad.exe or Textedit are good for this) so that the line that reads: "<TITLE>Welcome to Airflyte</TITLE>" has your company name in it, in place of "Airflyte", and save it (as index.html).
5. Navigate to the "images" sub-directory, locate the files shown below, and edit them in your image editing software to show your company logo and your own graphics (product images, artwork, text, etc.) in the header area at the top of the web page.
   NOTE: You MUST respect the image type (.png) and pixel dimensions of these images or they will appear distorted (or not at all!).
   logo.png = 207px wide x 127px high
   imagery.png = 773px wide x 127px high
   
   

   In this example, we're showing the logo and imagery files for the "static" version of either the airflytecatalog.com or airflyteproducts.com website, which are located in the "images" sub-directory. They MUST be saved back to the same directory as the same type of file for the changes to appear on your site (locally first, then on line).

   
   
6. Preview the site again using index.html to make sure all is as it should be, make any adjustments required, and save them as needed. Once the site is modified to your satisfaction, please go on to the next step.

If you have chosen one of the dynamic slide-show templates, it is possible to change the existing slides to whatever you like. Those images are stored in the "images" sub-folder, in a sub-sub folder called "slideshow".

Navigate to the "slideshow" sub-sub folder within the "images" sub folder.

The individual slides, ready for editing. NOTE: files must be: Saved back to this same location. RGB jpeg images with a ".jpg" file extension. At LEAST "medium quality" recommended. MUST respect the same dimensions as the original: 773px wide x 127px high. Additional or fewer files may be used, slide show options changed, etc., but that requires code editing that's beyond the scope of this tutorial.

Once all modifications are complete, please double-click on "index.html" to check your modifications again.

Congratulations! You've just edited the template site of your choice for your business. Please upload all files and folders exactly as they are in your local site folder to the "Public_Html" directory (or where your hosting provider tells you to put them) of your web server using Dreamweaver or an FTP program. Your web hosting provider may also have software they want you to use for this, and will provide you with the credentials (User Name, Password, and FTP address) you need to do this.