WEBSITE CONSTRUCTION

Transcription

1 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 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 1

2 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 2

3 homebg.jpg logo.gif events groups_e11.jpg oasis_e11.gif singers_e11.jpg members F jpg F jpg F jpg F jpg F jpg F jpg F jpg F jpg F jpg F jpg F jpg Fnumber.jpg S 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. 3

4 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 4

5 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, ) 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 address column for member photo link file type suffix names of member types columns for userid and password Links 5

6 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 6

7 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 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 Banner is only 100 pixels high which gives an aspect ratio of around 10:1. 7

8 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 pixels. The ones in the demo are near 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. 8