Links to Woodland, Washington and Mechanical engineering data The Thelen Channel   on-line  
Thursday, November 20, 2008    
Home Page
Webcam
Weather
Community
Tech Data
Christian
Reference
Media
Eng Library
Crystal Sets
Login
Contact Us
Site Map


U.S. Flag

How We Built Our Web Site



Introduction:

I built our first web site (V1.0) in 1992 with no graphics and lots of tables. I had continued to re-design it over time to V5.0 in 1999. This version was getting very old. It had lots of graphics, tables and no Cascading Style Sheets (CSS).  Technology had moved a long way and I wanted a new look.  Also, it was getting harder to update it as we now have 57 pages. I made this page to remind me how I formatted and wrote my web pages. Also, if this information can help anyone else feel free to give it a try. Welcome to V6.0 !

I did a lot of research looking at HTML, JS, ASP, PHP, SSI's, etc. I decided to use PHP "PHP: Hypertext Processor" to build our new site.
When I started using PHP, I quickly found out that I needed to install a server on my local computer. I installed the Abyss server and PHP. After an easy configuration and setup I was up and running php files on my Windows 2000 computer.

I also gave up on HTML and started using XHTML. It has a few different characteristics but I am sure that it will save me time in the long run.

My top criteria for design is; accurate up-to-date information, interactivity, fast to download, and easy to navigate pages.

I did not want to make a huge project of how I made our site so I just put everything on this one page because it is easier and probably no one else but me will ever read it. But, if you do read all of this and it helps you out, that's great! So here is V6.0 .

Tools

I built my first pages while using a UNIX Workstation. So, I got used to using a text editor (vi) to code my pages. Although they may be easy to use and fast like some say, I prefer not to use any software like Frontpage or Dreamweaver as I am more inclined to use something more simple and predictable to get the job done.

• EditPad: A really great text editor
• Abyss Web Server: The small server that I run locally on my computer
• PHP: Hypertext Preprocessor: Scripting Language runs with Abyss
• TopStyle Lite: An easy to use neat CSS editor
• HTML Tidy (online): A good tool to "clean" up my XHTML
• W3c XHTML Validator - A very big help
• W3c CSS Validator - Another very big help
• WS_FTP: File transfer program to put our files on the server

Filenames (all lowercase with no spaces)
• 1 startingpages.php
• 2pictures.gif
• 3audio.au
• 4errors.html
• 5 - unused
• 6javascript.js
• 7 - unused
• 8templates.html
• 9 - unused

Directories on the server

  /     (location of the index.php document and all 1startdocs.php documents)
  /images     (The location of all our images)
  /includes/content     (location of the content files to be included in the main doc)
  /includes/standard     (location of the standard files included that make up the main doc)
  /js     (this is where the .js files are located)
  /css     (this is where the style sheets are located)
  /counter     (this is where the page counter is located)
  /templates     (This is where I store the Master Templates and the start file - index.php)

Standard include files

These files are the same for all pages. They do not change and are located On my server "http://www.thelenchannel.com/templates/include/standard" directory.

doctype.php     (The standard DOCTYPE definition line)
header.php     (The top section of the web pages)
leftnav.php     (Left Navigation Menu)
footer.php     (The bottom 3 cells of the web pages)


Templates (files that change)
template_index.php (Main page)
This template needs personalization to build each web page. It contains all the include statements for the total page make-up. Also, this file contains all the information included in the head. That is the: Title, Metadata, Robots, Style sheet link, and Script Language. I Personalize this file by changing or adding to:

• Changing the page title
• Adding meta description
• Adding meta keywords
• Changing the include file name for the main content
• Save as:     (example: 1webcam.php) in the /htdocs directory

template_cont.php (content page)

This template also needs personalization to build each web page. It contains all the content for the page. I Personalize this file by changing or adding to:

• Adding the page name
• Adding the main content
• Save as: (example: webcam_cont.php) in the "/htdocs/include/content" directory

Sample of my index.php file

<html>
<?php include ("include/standard/doctype.php"); ?>
<head>
<title>New PHP Home Page</title><br />
<?php include ("include/standard/head.php"); ?>
</head>
<body>
<?php include ("include/standard/header.php"); ?>
<?php include ("include/standard/leftnav.php"); ?>
<?php include ("include/content/home.php"); ?>
<?php include ("include/standard/footer.php"); ?>

</body>
</html>

Our Core Color Palette (Arranged in grayscale from dark to lighter)

I included the grayscale in my design so when our page was printed on a black and white printer, it would still show the appproprate contrast ratio between content.

Standard colors used in our web pages

Color Number
Equivalent Grayscale

Some of the locations where the color is used
Hex Value
RGB Value
Hex Value
RGB Value
#336699
51.102.153
#666666
102.102.102
Logo, Header, Footer, Charts, tables, Text
#4682B4
70.130.180
#7F7F7F
127.127.127
ThelenChannel in header;
#A7BADE
167.186.222
#C0C0C0
192.192.192
Charts and tables
#F5F5F5
245.245.245
#F5F5F5
245.245.245
Background in navigation column:
#FFFFFF
255.255.255
#FFFFFF
255.255.255
TTC logo; Text; Various
#000000
0.0.0
#000000
0.0.0
Text;


Special colors used in our web pages

Color Number
Equivalent Grayscale

Some of the locations where the color is used
Hex Value
RGB Value
Hex Value
RGB Value
#CE1829
206.24.41
#5A5A5A
90.90.90
Logo, Text, Nav. text
#009C94
0.156.148
 #656565
101.101.101
Logo, Alternate nav. headers
#663366
102.51.102
#555555
85.85.85
Charts and tables
#FFCC66
255.204.102
#BBBBBB
187.187.187
Charts and tables


Other colors that could be used in our web pages

Color Number
Equivalent Grayscale

 
Hex Value RGB Value Hex Value RGB Value
#CCCC99
204.204.153
 #BBBBBB 187.187.187  
#666666
102.102.102
 #666666 102.102.102  
#6699CC
102.153.204
 #999999 153.153.153  
#AAD5FF
170.213.255
  #D5D5D5 213.213.213  
#537CA5
83.124.165
  #7C7C7C 124.124.124  
#CFDAE6
207.218.230
  #DADADA 218.218.218  
#3078BF
48.120.230
  #858585 133.133.133  
#677D93
103.125.147
  #7D7D7D 125.125.125  
#596C80
89.108.128
  #6C6C6C 108.108.108  
#6090BF
96.144.191
  #909090 144.144.144  
#24486B
36.72.107
 #484848 72.72.72  
#406080
64.96.128
  #606060 96.96.96  
#D5EAFF
213.234.255
  #EAEAEA 234.234.234  


PHP Scripts that I used

Day - Month - Year (used in the top header of our Home Page)

<?php $today = date("l, F d, Y"); ?>
<?php echo $today ?>
Example:
Thursday, November 20, 2008
I used PHP DynaForm V 1.4 on our contact us page.
I used "hostnames.php" for our IP reporting and Cc/Counter for logging on our login page.

Example:
  Your computer reports that it is using the IP address [38.103.63.56]

Your Host Address is [38.103.63.56]
For the random Bible verse script used on our Home Page I used the "CJ Random Quote V1.0" from CJ Website Design. I just made a different data file using Bible verses.

Example:
"Evil people are restless unless they're making trouble; They can't get a good night's sleep unless they've made life miserable for somebody. --- Proverbs 4-16
The PHP Counter Script used just above our footer is CcCounter from Cioandcio.com. This script is very easy to install and has a great summary statistics page with no MySQL Database.

Example:
This page has been visited 87 times                          
Last Modified PHP Script used just after cccounter (on the same line)

<?php
  putenv("TZ=America/Los_Angeles");
  $last_modified = filemtime("include/content/format_cont.php");
  print(" and last updated ");
  print(date( "m/j/y h:i A", $last_modified));
?>

Example:
and last updated 04/24/06 10:38 AM
This PHP script is used on our Home Page to call the "morning, afternoon, and evening" in closing.

<?php

  $welcome_string="Welcome!";
  $numeric_date=date("G");

  //Start conditionals based on military time
  if($numeric_date>=0&&$numeric_date<=11)
  $welcome_string="good morning";
  else if($numeric_date>=12&&$numeric_date<=17)
  $welcome_string="good afternoon";
  else if($numeric_date>=18&&$numeric_date<=23)
  $welcome_string="good evening";

  //Display the greeting
  echo "$welcome_string";

<?

Example:    
good afternoon

Our Server Stats and Settings
PHP Info


301 redirect
Lastly, because I renamed all of my files, I used the 301 redirect feature to let people and the search engines know where I moved all my files. That is, I added the redirect to my .htaccess file. When my server gets a request for a page, it looks at my .htaccess file to see if the file has a redirect for it. If it does it goes to that place.

This page was last updated 04/24/06 10:38 AM 92
• XHTML 1.0 • CSS 2.0 • Terms of Use • Site Map • Contact Us
 
Copyright © 1992 - 2008, ThelenChannel All rights reserved.