WEBSITE CONSTRUCTION
Setup and Structure
This open source template provides the user with a website that has the same form and function as that of the Tucson Drifters’ website located at
www.tucsondrifters.org/. The detailed description of the contents are in the Webmaster Guide.
Setup on a Local Computer
The template file is first downloaded and setup on a local computer with a
predefined directory structure. This structure is identical to that which will exist on the server hosting the website.
The template file is available from the Publications page of the above website. This is a zip compressed file named TDOSW.zip that must be expanded on your local computer. Where you expand this file will be a function of whether you are running a Windows or a Mac computer.
Assuming you have setup a local server as described in the Webmaster Guide the following are the locations that you will use.
• For windows, unzip into C:\xampp\htdocs.
• For a Mac running OS X, unzip into Users/username/Sites.
Unziping TDOSW.zip will result in the creation of the website’s file structure and populate it with the default files. These files will generate the demo website. You can test this by running it on your local server.
The top level directory will be named TDOSW and should be renamed to the name of your website; your domain name, without the dot suffix, is probably a good choice. In the following file structure "MYDOMAIN" is used to represent this.
File Structure
The following is the website’s file structure with directories in bold. All the files from the demo website are included. When you expand the template on your computer, this is what you will get.
MYDOMAIN
activities.php arial.ttf
captchaimage.php contacts.php edit_event.php edit_notices.php event.php GetCounts.php images.php index.php links.php login.php
membership.php notices.php publications.php secondary.php
configfiles
contacts.cfg links.cfg
publications.cfg website.cfg css
stylesheet.css data
blankevents counts.txt event1.dsc event2.dsc event3.dsc event4.dsc event5.dsc event6.dsc event7.dsc event8.dsc event9.dsc event10.dsc event11.dsc event12.dsc legal.txt members.csv notices.dsc secondary images
bannerbg.jpg bannertitle.gif favicon.ico
homebg.jpg logo.gif
events
groups_e11.jpg oasis_e11.gif singers_e11.jpg
members
F999901.jpg F999904.jpg F999906.jpg F999908.jpg F999909.jpg F999912.jpg F999915.jpg F999917.jpg F999921.jpg F999923.jpg F999999.jpg Fnumber.jpg S999900.jpg
notices
MH2009.jpg SLRV04.jpg secondary
includes
functions.php globals.php
pubs
members.pdf NL2011_04.pdf NL2011_05.pdf Webmaster Guide.pdf Website Construction.pdf Website Users Guide.pdf
In the above structure all the files with a .php suffix are executable program files that generate the website and provide all its functions and features. The following is a description of the directories and the files they contain.
configfiles
The files contained in this directory are those that configure the website and its features. These files must be edited during the construction process to set such things as colors, banner content and the attributes of optional features.
css
This contains the file that is passed to browsers visiting the website and instructs them how to style the pages of the website. This file is generated dynamically by the website. It contains colors defined in website.cfg so whenever any changes are made in the Colors section you will need to regenerate this file before the new values will take effect. Delete this file to cause it to be generated the next time the website is used.
data
These files are the script files associated with the activities calendar and notices. Also this is where the membership data file is kept and any other data files necessary for the operation of the website.
images
All images used by the website are kept here. Subdirectories are used to segregate these image collections. Some of these images are created using image processing software and are discussed below.
includes
This is where all the global software functions and values are kept.
pubs
All the documents available on the publications page are stored here.
Bill of Materials
This is a list of everything that you will need to construct and maintain your website. It lists the information and items required to populate the various config files. Some of these items may not be needed depending on which features are used.
configfiles
contacts config file
contacts -‐ (title, name, email)
links config file
links (header [name, url])
publications config file
documents (header [title, filename])
website.cfg
color scheme
Banner
title -‐ image or text (color, size) background -‐ color or image
logo image
Home page
background image or color
comments
legal notice
Activities Calendar
yes/no
background colors for the heading and links
heading
starting month/year
Contacts
yes/no
name of config file
Membership Roster
yes(number of member types)/no name of dsv file
file delimiters file column count
divider for member types
excluded columns
column for email address
column for member photo link file type suffix names of member types
columns for userid and password
yes/no
name of config file
Notices
yes/no
name of config file
Construction Steps
Collect all the information and files needed and be sure to have created the
membership files as described in the Webmaster Guide. Then follow the steps below to implement your website.
1. Create a localhost on your computer as described in the Webmaster Guide.
2. Download the template and unzip it into your localhost's websites directory.
3. Rename the top level directory from TDOSW to the name of your website.
4. Run the website locally to be sure it is complete and functions correctly. It should mimic the demo website.
5. Fill out website.cfg per the Webmaster Guide. First, set the title and then play with colors until you get a Banner and color scheme that you like. Be sure to delete the stylesheet.css file before you run the website.
6. Edit the other config files as needed per the options in website.cfg.
7. Put all documents and images in their correct directories.
8. Run the website, fixing problems until it runs correctly.
9. Edit any events and notices, checking for errors as you go.
10. Delete any directories that are not used because of optional features being disabled.
11. When everything runs correctly, upload to your website host and check that everything runs correctly there.
Website Images
Some of the characteristics of this website template allow the use of images for such things as backgrounds, icons and logos. This section discusses where these are used and how to create them.
Image formats that are usable in the website are jpg, gif and png, with the exception of the favicon discussed below. Image resolution should be as low as possible while preserving appearance, as this will allow the image to load faster in your user's browser.
favicon.ico
This is the small image that is shown next to the address bar of most browsers and as the icon in favorites lists. There is an extensive discussion about this at
http://en.wikipedia.org/wiki/Favicon.
If you do an Internet search for favicon you will see several websites and software downloads where you can create one of these icons for your website. You could probably convert your logo for use as a favicon if it is distinguishable at low pixel resolution.
In order to be compatible with all the main browsers, use the ico format for your favicon. For readability use a 48x48 size. Replace the favicon.ico file in the images directory with the one you create.
Logos
If you want to display your logo in the Banner, place its image file in the images directory and delete logo.gif. Also replace its name with the name of your logo file in website.cfg. Since the display of this image is small, it is best to use a small size image that displays well at these resolutions. The banner area is 100 pixels high and the logo is placed in its upper left corner, so the height of the logo image should probably not be more that 80 pixels to allow the text of the links to fit under it.
Banner images
Images can be used in the Banner to supply the website title and the background. This can enhance the appearance of the Banner as is done in the Tucson Drifters' website.
Many image processors have the ability to place text in an image and to enhance it with effects such as texture, shadows, edges and 3D contours. You can even make the background image contain the title (leaving the title blank).
When using images in this way be sure their aspect ratio matches that of the Banner so they will scale properly when the user resizes his window. Remember that the
Home Page image
When using an image for the background of the Home Page you will need to set its size large enough that it displays well in a full screen browser window. Experiment with sizes to find the smallest one that displays well.
Often a high resolution version of the logo is used as the background image for the Home Page.
Member's Photos
These images must be stored in the images/members directory and named according to the convention described in the Webmaster Guide.
A good size for these images would be a width of 800 – 1000 pixels. The ones in the demo are near 1000.
Images for Events
These images are stored in the images/events directory and are generally uploaded by event hosts or the webmaster. The upload procedure is described in the Website User Guide.
There is a special naming convention used for these images that associates each image with an event. If you are not using the website to upload the image be sure to follow the naming convention as described in the Website User Guide.
Keeping the images small helps speed up their display in a user's browser.
Images for Notices
These images are stored in the images/notices directory. They are the same as the images for the events except that there is no naming convention. When uploading these images, be sure that their name does not conflict with any images already uploaded.
