WEB PAGE CREATION AND EDITING
for Maintaining the RJ and CPSD Websites

by Karl Arnold Belser

Copyright 2009 by Karl Arnold Belser



 OVERVIEW
(Skip to Contents)

The Rockin' Jokers Square Dance Club and Committee to Promote Square Dancing (CPSD) websites are designed for easy maintenance using the free WYSIWYG (What You See Is What You Get) editor called Kompozer. Please use only Kompozer so that these sites remain simple.

The website files should be held and edited in a folder (e.g. RJ_HOME_PAGE or CPSD_HOME_PAGE) under My Documents  on a computer running Windows XP or Vista.  Use Windows Explorer under Accessories to create any folders.

The new or updated files are then posted (transferred to) the server for the website using the free File Transfer Program (FTP) called Filezzilla. Filezilla has two Windows Explorer-like sides, one for the computer (left) and one for the server (right). Files can be dragged and dropped between the computer and the server.

The FTP program  requires the Server Name, the User Name, and the Password, which are not given in this document for security reasons. These three pieces of information can be obtained from either the webmaster (currently Karl Belser) or the server manager (currently Bill Malloy) for the two square dance clubs listed above.

All of the files on the server should be initially copied to the home page folder in the computer after the home page folder has been created. Having all of the files locally will allow a preview of the total site on the local computer in order to verify that any changes are correct before posting them. Be sure to change the "Last Updated Date" at the bottom of each page before posting. Once verified, the changed pages should be transferred to the server.

CAUTION: Only one person should maintain the website in order to avoid updating conflicts.

The remainder of this document contains notes on various subjects that may be of assistance to a new person that has been asked to maintain these sites. It also contains links to free programs to implement all of the functions required to create and maintain these websites.  

Click on any of the topics below to move to that topic.




I would appreciate any comments that might improve the material below. Please contact me by email at karl.jackie@gmail.com or by phone at 408.723.0315.


INSTALLING KOMPOZER
(Back to Contents)

Download the ZIP file containing KompoZer (Download). Un-ZIP  (or extract) the files into an extract folder called KOMPOZER.  This extract folder will contain the "kompozer.exe" file.  Copy or move this extract folder to "Program Files" on the C: drive so that the path will not change when a shortcut is made. Right click on the "kompozer.exe" file (whose icon looks like a world with a yellow leaf on the right side) and make a shortcut. Drag and drop the shortcut to the desktop, from which the program will be started in the future.


INSTALLING AND USING FILEZILLA
(Back to Contents)

Download the Set-up file for FileZilla Client (Download). Run the setup program, being sure to enable all features including the addition of a desktop icon.  

Run FileZilla, enter
"the Server Name, the User Name, and the Password. Then, set up the path to the subdirectory on the server in the right side of the FileZilla window and copy this path to the clipboard using "right-click copy". Finally, click the "Quick Connect" button and the site manager window will open with all of the "general" information (server, name, and password) filled in.   Name the site, e.g. rockinjokers, click on the Advanced tab, and paste the "default remote directory" path that was just copied to the clipboard, and click "OK" to close the site manager window.

Set up the path to the folder where the web pages are held in the computer (e.g. RJ_HOME_PAGE) on the left side of the FileZilla window and copy this path to the clipboard.  Now click "file", "site manager" to reopen the site manager window. Click on the  "site name (e.g. rockinjokers)", click the "advanced" tab, and paste the path that was just saved on the clipboard to the "default local directory"  and click "OK" to close the site manager window. Close the FileZilla window, and the setup is completed for this website.

After FileZilla is opened again and a site is selected using the site manager, files or folders can be dragged and dropped between the computer and the server.  

CAUTION: If a file is dragged and dropped anywhere over a folder, that file will be dropped into that folder.  So be careful where you drop files.


STRUCTURE OF THE WEB PAGE
(Back to Contents)

All of the square dance pages have been created with either Kompozer or its predecessor Netscape Composer.

NOTE: When the HTML is displayed , there may be "metacode" which was used in the past to help search engines scan the site. No metacode is necessary today and it is ignored by the browsers.

NOTE: The easiest way to understand the material in this section will be to open a Komposer window along side of this document so that you can actually do the steps as they are described.


The pages for the square dance websites were created as follows:

Open Kompozer and Select create a new page by "file", "New" and "New Document, Strict DTD".  Name the page by clicking "format" and  "page title and properties" filling in the title and maybe the author.

The basic structure of the page is now complete. Only the "body" needs to be filled in. The body of the square dancing pages use tables.

Insert a table by clicking "table" and "insert table"  and the insert table windows will open.  Click the "precisely" tab, select "pixels" under width and type in the width in pixels. The home pages are 1000 pixels wide and some of the text-only pages are narrower.  Click advanced and set all of the borders, cell spacing and cell padding values to zero (0). Click "OK".

The main table in the body is complete, but it is usual to add a few extra lines under the table to give the date last updated and a link to the site of origin.

Below this body table type "Last updated on month day, year". Below the date type the name of the website of origin.  Click "insert" and "link". Type the complete URL or web address ( like http://www.karl-belser.com/ ). See this page below for and example.

The verification picture at the bottom is optional and should be used only if the page has been verified by the Markup Validation Service.

Save the web page to the computer.


HOME,  SECONDARY & PDF PAGES
(Back to Contents)

The home page is called "index" and is the default page that the browser  goes to for the URL (e.g. rockinjokers.com or c-p-s-d.org).

NOTE: It is advisable to keep the size of the home page small and to organize the most frequently accessed information on it.

Less frequently accessed data should be given on secondary (subordinate) pages. These pages fall into two categories: documents that will never change and pages that will be updated.

The documents that will never change can best be saved on the website in the Adobe  
PDF (Portable Document Format). There are free PDF distillers such as CutePDF or PrimoPDF that can be used to convert a Microsoft WORD or EXCEL document into a PDF file.

A PDF file can be linked to the home page or other secondary pages 
by clicking  "insert", "link" and then browsing to the PDF file name. Note that one has to select view all file types to see the files with the PDF file type.  Click "Advanced Edit" and select "target" in the lower left corner to make the linked page open in a new window.

The documents on the website that are updated periodically, such as Club Documents, Club Contacts, Club History and Links, should be maintained with a separate HTML page.  The secondary page can be linked to the home page or other secondary page by clicking  "insert" "link" and then browsing to the file name. Click "Advanced Edit" and select "target" in the lower left corner to make the linked page open in a new window.

Documents from other websites can also be linked to
by clicking  "insert" "link" and then entering the URL of that site.  


POSTING PICTURES
(Back to Contents)

A single image from a digital camera or a scanner in JPEG or GIF form can be linked to directly by "insert" "image" and then entering the image file name.
Note that one has to select "view all file types" to see the files with the JPEG or GIF file types.  

However, it is better and more memory space efficient to post several images together on a web page. The images will have to be edited and scaled to have a desired width in pixels so that the picture will fit into a specified cell of a table.

Suppose, for example, that you want to post three photos across a table that has a width of 1000 pixels. The table would be 3 rows by 7 cells. The first and last rows as well as the 1st, 3rd, 5th and 7th cells of the second row will be borders.

NOTE: The easiest way to understand the material in this section will be to open a Komposer window along side of this document so that you can actually do the steps as they are described.


Place the cursor  where you want the table inserted  using the view called "normal edit mode". Click "table" and "insert", and "table" to get the insert table dialog box. Click the "precisely" tab and specify 7 columns, 3 rows and 1000 pixels wide. Make sure that all of the border and cell padding values are set to zero (0), and then click "OK".  

The table will have been created but the table color will be white and the cell widths will be incorrect.

Give the table a color by first highlighting the entire table and then clicking "table" and "Table or cell background color". Select the color desired. Grey is the color used on most of the square dance pages.

Specify the cell widths by first clicking the cursor on the cell in the upper left corner of the table and click "table" and "table properties" to open the table properties dialog box.  Click the "cells" tab and check the width box and type in 25.  Click the "> next" and enter 300. continue this process until the cell widths of 25, 300, 25, 300, 25, 300, and 25 across the table are filled in. Click "OK".

The cells heights will adjust to the larger of the number of lines (carriage returns)  in any cell or the image height of any cell in that row.

Click on one of the 300-width cells in the table where an image is to be inserted.  Then click "insert" and "image" to open the image properties dialog box and select an image from a folder on the computer. The image to be inserted should have a file type of ".jpg" or ".gif" and should already have been edited and resized to have a width of 300 pixels.
The alternate text and tool-tip text also have to be specified before clicking "OK".

NOTE: One can use the free on-line
SUMO PAINT to do the image editing and resizing. When resizing, the "hold aspect ratio" should be clicked so that only the new width needs to be specified. However, all the images on the square dance websites were edited with the shareware program Paint Shop Pro 3.12-32, which is no longer available for download.

It is advisable to store the images in a sub-folder in the website folder in which the web page containing the images is stored. It is advisable to name this sub-folder the same as the corresponding web page.

CAUTION: To use clip art or images from someone else's website, you  need permission from the creator, unless the site or clip-art collection specifically states that the art can be reused.


POSTING SOUND FILES
(Back to Contents)

Sound files in the MP3 format can be linked to 
by clicking  "insert" "link" and then entering the MP3 file name.  The file will open in Windows Media player or other players that are installed on the viewer's computer.

There are free programs such as Audacity and Wavosaur to capture any sound you hear on your computer, edit it and convert it to the MP3 format

WARNING: Do not post any copyrighted music. The Recording Industry Association of America (RIAA) will prosecute any copyright violators. You can link to music on other websites, just as long as you do not copy it and post it on any of the square dancing websites. That said, any music that you originate or that is created by music software like Band-In-A-Box is not copyrighted and you can post it.


POSTING VIDEO FILES
(Back to Contents)

It would be nice to embed video clips in a web page. However, I know of no free video creation, editing and imbeddable play programs. Also, I know of no programs to convert VIDEO_TS files to MP4, RMV (Real Media Player), WMV (Windows Media Player) or FLV (Adobe flash player) files.

Even if it were possible to post videos, there would be a server cost issue. A web host llimits the amount of storage (say 50 MB), the cumlative bandwidth from the server (say 1 gigabit/sec), and the total amount of bytes transferred per month (say 10 GB). Hosting videos stress all of these limits, and the square dance web sites are designed to be low cost.

Hence, the recommendation for posting videos is to use YouTube. Upload your video content and then link to the page created.
The video length llimit is currently 10 minutes.

WARNING: Do not post any copyrighted videos or music on YouTube. The Recording Industry Association of America (RIAA) will prosecute any copyright violators. You can link to video or music on other websites, just as long as you do not copy it and post it on any of the square dancing websites. 


HTML DETAILS
(Back to Contents)

How Web Pages Work on the How Stuff Works website explains HTML  in detail and tells how to create web pages by hand coding HTML. This site also gives information on free tools for editing photos and for making animated figures to post on the website.



Last Updated March 23, 2009
KARL BELSER HOME PAGE
Validated