Welcome to CattleWeb
by Running Deer Farms


This utility will create complex data tables for use on your web site. The utility also includes a web site template.

Have you been looking for a way to display your animals on the web, but don't know HTML? Well, this utility is for you. With this utility, you will be able to create web pages for your cattle that contain orderly and consistent data tables for each animal.

The web site template accompanying this utility will give you a head start. The template pages are commented, so you can easily insert your content, but not need to worry with formatting.



Getting Started

Contents

• Creating a Data Table For an Animal
  
• Picture Rules and Formats
  
• Some HTML Coding Help
  
• The Web Site Templates
  
• Trouble Shooting
  

Creating a Data Table For an Animal

Creating a data table for an animal is simple and quick. Just follow these steps:

• Gather up your animal's information and a digital picture of the animal.
  NOTE: See the Pictures instructions for picture specifications.
  
  
• Launch CattleWeb from the Start menu.
  
  
• Enter the information for the animal in the appropriate fields.
  
  
  • A link can be inserted into most fields, if desired, by placing the cursor at the location you wish to insert it and pressing Ctrl and L at the same time. Then enter the link information into the link dialog.
    
    
• Double click the picture field and browse to the animal's small picture and click Open.
  
  
• Click the Create button.
  
  

That is all there is to it.

At this point you have created three files. The first file is a data file containing your information that can be opened and edited when any of the animal's data changes. The data file is named with format <animalname.dat>. This file, by default, is saved in the DATA subdirectory of CattleWeb program. <C:\Program Files\Running Deer Farms\CattleWeb\data>

The second file is a HTML file containing the HTML code for your table. The HTML file is named with the format <animalname.html>. You can open this file in a text editor (notepad) and copy the entire file contents, then past it into your web page.

The third file that was created is a HTML file to display the large picture of your animal when the viewer clicks on the small picture in the table. This HTML file is named with the format <big_animalname.html>. This file should be copied into your web site in the same directory as your web page.

As you can see, there is still a little work required.

back to the top


Picture Rules and Formats

Let's take a look at pictures. The picture formats most commonly used on the web are JPG and GIF. The JPG format supports up to 16 million colors and maintains a small file size through file data compression methods. For this reason the JPG format is the common format used by most digital cameras. The JPG format is best suited for pictures of your animals.

The GIF format only supports 256 colors and maintains a small file size. The GIF format also supports transparent colors. This makes the GIF format ideal for small graphics, icons, and buttons. You will find the buttons used in the templates are in GIF format. The reason we selected the GIF format for the buttons is for the transparent color attribute.

The size of you pictures will make a difference in their appearance and in the time it takes to display them in a web page. CattleWeb requires that you create two pictures for each animal. These pictures should be the same with the only difference being their name and their size. The animal picture you will create for use with CattleWeb should follow these guidelines.

• Picture One: (The picture to display in the data table)
  
  
  • The Width should be 230 pixels exactly. This is the size that the picture will be displayed at. Any other size may result in distortion of the picture when viewed.
    
    
  • The Height should be between 150 and 200 pixels. A height greater than 200 will cause the table to stretch from its intended size and appear abnormal.
    
    
  • The Format should all ways be JPG.
    
    
  • The Name must follow the format <tn_animalname.jpg>. This will allow CattleWeb to find the name of picture two. All filenames should be lower case and should not contain spaces. An example would be <tn_my_calf.jpg>. Look in the images directory of the web site templates for more examples. The default is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>
    
    
• Picture Two: (The picture to display when the user clicks the image in the data table)
  
  
  • The Width should be 640 pixels exactly. This is the size that the picture will be displayed at. Any other size may result in distortion of the picture when viewed.
    
    
  • The Height should be between 400 and 600 pixels. A height greater than 600 will cause most viewers not to be able to see the complete picture on the screen.
    
    
  • The Format should all ways be JPG.
    
    
  • The Name must be the same as picture one, but without the leading <tn_>. CattleWeb will derive this name from the name of picture one. All filenames should be lower case and should not contain spaces. An example would be <my_calf.jpg>. Look in the images directory of the web site templates for more examples. The default is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>
    
    
• On Buttons: (The button indicating that it is the current button clicked)
  
  
  • The Width should be 150 pixels exactly. This is the size that the button will be displayed at. Any other size may result in distortion of the button when viewed.
    
    
  • The Height should be 25 pixels exactly. This is the size that the button will be displayed at. Any other size may result in distortion of the button when viewed.
    
    
  • The Format should all ways be GIF.
    
    
  • The Name should be something relative to the meaning of the button and contain the word <on> in it. All filenames should be lower case and should not contain spaces. An example would be <back_on_button.gif>. Look in the images directory of the web site templates for more examples. The default is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>
    
    
  • The Colors should match that of other buttons of that type on your pages. Use a transparent color to remove the corners and give the button a rounded look. An on button should be a lighter color than the off buttons. The darker part of the border should be on the top and left sides, to give it the appearance that it is sunken.
    
    
• Off Buttons: (The button indicating that it is not the current button clicked)
  
  
  • The Width should be 150 pixels exactly. This is the size that the button will be displayed at. Any other size may result in distortion of the button when viewed.
    
    
  • The Height should be 25 pixels exactly. This is the size that the button will be displayed at. Any other size may result in distortion of the button when viewed.
    
    
  • The Format should all ways be GIF.
    
    
  • The Name should be something relative to the meaning of the button and should be named the same as its on button counterpart, just without the word <on> in the name. All filenames should be lower case and should not contain spaces. An example would be <back_button.gif>. Look in the images directory of the web site templates for more examples. The default is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>
    
    
  • The Colors should match that of other buttons of that type on your pages. Use a transparent color to remove the corners and give the button a rounded look. An off button should be a darker color than the on buttons. The darker part of the border should be on the bottom and right sides, to give it the appearance that it is raised.
    
    

I would like to mention a couple of things to keep in mind when resizing pictures. First always resize from the original picture. A picture that has been resized looses some of its resolution and therefore when resized again the image is degraded even more. The second is to make sure the aspect ratio is maintained when resizing. That is that the ratio of width pixels to height pixels remains the same. If not the picture will look stretched and distorted.

back to the top


Some HTML Coding Help

HTML is the programming language that web pages are written in. Basically HTML is a set of tags used to format the information on the page. You can search the web and find web sites that explain HTML in more detail than I will here, but I thought it might be helpful to know some of the basic format tags and how to use them.

All HTML tags must start with < and end with >. Most tags, but not all, will have an opening tag and a closing tag. For example, <b> is the opening tag for bold and </b> is the closing tag. This tells the program displaying the page when to turn bold on and off.

Here are a few common tags.

• Bold: Opening tag <b> and closing tag </b>. Example: <b> bold text</b>.
  
  
• Underline: Opening tag <u> and closing tag </u>. Example: <u> underlined text</u>.
  
  
• Italic: Opening tag <i> and closing tag </i>. Example: <i> italic text</i>.
  
  
• Center: Opening tag <center> and closing tag </center>. Example:
  <center>centered text</center> .
  
• Font: Opening tag <font> and closing tag </font>. This tag has extra attributes that change the font's appearance. One or more of these attributes must be used with the font tag to have any effect.
  
  
  • Color: The color attribute will set the text color. Most common color names can be used with the color attribute. Example: <font color="red"> red text</font>.
    
    
  • Size: The size attribute will set the font size. The size is set relative to the current size. Example 1: <font size="+2">big text</font>. Example 2: <font size="-2">small text</font>.
    
    
• New Line: Tag <br>. This tag will cause the next word to start on the next line.
  
  
• Comment: Open tag <!-- and closing tag -->. Example: <!-- #### This is a comment #### -->.
  
  

back to the top


The Web Site Templates

The web site templates included with CattleWeb create a simple three frame web page. When displayed, the browser displays a short frame across the top with contact information, a tall narrow frame on the left site with navigation buttons, and a tall frame on the right with the main information displayed. The top and left frame are both static. The frame on the right displays the page requested by clicking on a navigation button.

top.html
left.html	main.html

The INDEX.HTML file is the file loaded by the web browser when it first navigates to your site. This file contains only information about how many frames to display, where to display them, and what files to load into each frame. This file should not require any adjustments.

The TOP.HTML file is loaded into the top frame. This file contains a link to your small logo and your contact information. You will need to open this file in a text editor and replace the contact information placeholders. You will also, need to create a small logo picture to be used by this file. The picture should be 100 pixels wide and 53 pixels high. You can edit the sm_logo.gif file in the image directory or replace it with your own. Remember to use the GIF format for this picture. The default location of the image directory is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>.

The LEFT.HTML file is loaded into the frame on the left. This file contains links to all of your other pages. When viewed this file displays a column of buttons. Each button has a link associated to it. When the button is clicked, the page referenced by the link is then displayed in the frame on the right. This file should not require any adjustments. To make adjustments to this file you should have an understanding of JavaScript.

The MAIN.HTML file is loaded into the frame on the right. This file contains information about your farm. You will need to open this file in a text editor and replace "My farm's story" with a story about your farm. The story can be anything you like. You will also, need to create a large logo picture to be used by this file. The picture should be 544 pixels wide and 234 pixels high. You can edit the lg_logo.gif file in the image directory or replace it with your own. Remember to use the GIF format for this picture. The default location of the image directory is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>.

The FARM_SPRING_CALVES.HTML file is loaded into the right frame when a viewer clicks on the Spring Calves button. This page is intended to contain data tables for calves that were born, this year, in the spring. Most farms would use this page to showcase their spring calves they have for sale. You will need to open this file in a text editor and paste your data tables just after the "#### ADD SOME BODY HERE ####" comment. When you have added some content to this page you can then remove the "Check back later" placeholder.

The FARM_FALL_CALVES.HTML file is loaded into the right frame when a viewer clicks on the Fall Calves button. This page is intended to contain data tables for calves that were born, this year, in the fall. Most farms would use this page to showcase their fall calves they have for sale. You will need to open this file in a text editor and paste your data tables just after the "#### ADD SOME BODY HERE ####" comment. When you have added some content to this page you can then remove the "Check back later" placeholder.

The FARM_SHOW_STRING.HTML file is loaded into the right frame when a viewer clicks on the Show String button. This page is intended to contain data tables for your show animals. Most farms would use this page to showcase their show animals and add text about their accomplishments between tables. You will need to open this file in a text editor and paste your data tables just after the "#### ADD SOME BODY HERE ####" comment. When you have added some content to this page you can then remove the "Check back later" placeholder.

The FARM_BREEDING_STOCK.HTML file is loaded into the right frame when a viewer clicks on the Breeding Stock button. This page is intended to contain data tables for your outstanding breading animals. Most farms would use this page to showcase their breeding animals that have produced outstanding offspring and add text about their accomplishments between tables. You will need to open this file in a text editor and paste your data tables just after the "#### ADD SOME BODY HERE ####" comment. When you have added some content to this page you can then remove the "Check back later" placeholder.

The OUR_FRIENDS.HTML file is loaded into the right frame when a viewer clicks on the Our Friends button. This page is intended to contain links to other farms and sites you think your viewers may be interested in. You will need to open this file in a text editor and add your entries. To add an entry, start copying just after the "#### Start Copy ####" comment and stop just before the "#### Stop copying here ####" comment. Then paste it just before the "#### start next new friend here ####" comment. Next follow the comments to edit the section you just pasted. We ask that you leave the link to us on this page.

Two more HTML files have been supplied, but cannot be accessed by default. These files are FARM_WINTER_CALVES.HTML and FARM_SUMMER_CALVES.HTML. Both files are the same as FARM_FALL_CALVES.HTML. Most farms in our area only use the terms spring and fall in respect to calves, but if you wish to use these, fill free. To activate the buttons, so a user can display them you will need to open the LEFT.HTML file in a text editor. Then remove the comment tags that surround their buttons.

The background image used for your site can be easily changed. To change it, find a small JPG format image that you like. There are many web sites that feature collections of background images. Then copy it into the images directory of the web site templates. The default is <C:\Program Files\Running Deer Farms\CattleWeb\web\images>. Then delete the existing background image file "bg.jpg". Now you can rename your file to "bg.jpg". We have supplied some additional background images in the background directory of the web site templates. The default is <C:\Program Files\Running Deer Farms\CattleWeb\web\images\background>.


back to the top


We hope that you enjoy this utility and get some good use out of it. As always, we are open to suggestions and comments. Comments

Trouble Shooting

As with any software, users sometimes run into problems when using it. So we have added some common problems and their solutions.
	Q:	I have added a picture, but it does not show on my web page.
	A:	Check to make sure that the name of the file and the reference in the link are both in all lower case. Most web sites are hosted on UNIX server and the UNIX operating system is case sensitive. That is MY.TXT is not the same file as my.txt.

back to the top