Some Key Features:

• Flash Graphic Header (optional full jpg graphic also).
• Roating Home Page Pictures that updates daily.
• Uniform Header and Footer accros entire site.
• Standardized text formating accross entire site.
• Easy to update Dynamic Calendar.
• Endless Scrapbook Page to feature pictures.
• CubNet Dynamic link index.
• Top Navagation Scheme to accomadate 20 pages.
• Pages for each rank.
• Eaisly modified with Free development software.
• Detailed instruction for novice website desinger.

The site looks like this:

Includes Flash header!

Download - Dynamic-Flash Website

Editing Website:

The website can be edited with a number of free website development tools. These tools can be found in our Free Expert Advise section under Web Development Tools. For display purpose all of our graphics will come from Netscape Composer, which is included with the Netscape Browser. The follow tools will be required; HTML editor, CCS editor, Text Editor (like note pad in windows), Graphics Editor to customize graphics.

Editing the Header and Footer:

The header and footer are modified in a JavaScript file that you open in Netscape composer or Notepad. The file name is "control_data.js" (you will have to change the type files you can see to "ALL" when browsing for the file). After opening the file you will see a number of comments and a lot of code. You will change specific parts of the code and then save the changes.

The first is to select which header type you are going to have: Flash Header or jpg header that you customize. These files are in the images directory, header.swf and header.jpg (700x100). To set it to the flash header (the default) find the line of code listed in the header section:
Flash_Header = "yes"; - yes will use the flash header and no the jpg file.

Next you must define the header text that appears on the left hand side of the header. If a no is selected for above (use jpg file) then these settings will be ignored. To set these values look for:
Header_Line[0]="#########";
Header_Line[1]="#########";

Where the #### is located place the text you desire to appear. To modify the apperiance of this text for font, color and size, you must edit the CSS file "control_fonts.css". The style name is "HeaderText". For details to modify the CSS file reference latter in the article Editing CSS fonts.

Editing the footer is similar. Locate the code below in the "control_data.js" file. Replace the information in the quotes with your own data. If you would like to add an additional line just add an additional line below it and increment the number. The style name to control font look and feel is "FooterText".
/Footer Information
//For additional lines just add one and increment the number.
Footer_Line[0]="Pack 50";
Footer_Line[1]="Cub Master John Smith";
Footer_Line[2]="2689 Willow Creek Dr.";
Footer_Line[3]="Waynesville, OH 45235";
Footer_Line[4]="E-Mail This e-mail address is being protected from spam bots, you need JavaScript enabled to view it ";

The pictures for the footer are located in the images directroy and sized for 100 x100 pics. They are:

footer_left.gif (do not replace)
footer_right.gif

Editing Top Navagation Bar:

The top navigation settings are also in the "control_data.js" file as are the settings for the header and footer. You can have up to 20 linked pages that will break out into three rows. Look for the following code:
//Header links

Link_Name[0]="Home";
Link_Fine[0]="index.htm";

Link_Name[1]="Calendar";
Link_Fine[1]="calendar.htm";

You can replace the existing link names and pages that they link to. To add more just copy as set and add it to the end incrementing the number. All the numbers must be in sequence with no repeats. The style name to control font look and feel is "Headerlinks".

Editing the Home Page:

The home page has some unique features. The first is the main picture rotates from a bank of pictures located in the directory "images/index_bank/". There are 31 pictures located in this directory each numbered 1 to 31 for each day of the month. You need to replace these pictures with pictures you want to feature on your home page (sized around 300 x 225). If you only have a hand full of pictures then repeat them till all the pictures have been replaced.

As you can see from the graphic above, in your editor (Netscape Composer) , the header and footers will be missing. You can directly edit the text on the page listed in the text boxes. Please put your text in the text box so that the style formatting will be consistent with the entire site.

The style names controlling these boxes are:
TextNormal, indexPackEventsTitle, indexPackEventsList, indexPackEventsTable (table color)

Editing Calendar:

To edit the calendar you need to edit the page "calendar_data.htm", in your html editor (Netscape Composer). All twelve months are layed out in this page giving you an entire year planed activities. Each month has a table with all the information. When it is pulled into the calendar page, it will be formatted according to the information in the CSS table. The style names are as follows; calHeader, calEventDate, calEventTime, calEventDetail.

The calendar page itself is not to be edited. The color of the fonts in the selector bar can be changed in the CSS file. Style names are calNavHeader and calNavSelect. To change background graphic behind the selector (and also on the scrapbook page), the file is located in the images directory "calendarLeftNav.gif".

*** Do not modify the calendar page***

Editing Scrap Book Page:

To edit the scrap book page open the file "scrapbook_data.htm" in your editor. The only thing you have to do is edit the table. The table has a header with descriptions of the data to be put in the rows below it. You may add or remove rows to add or remove the number of pictures in the scrap book page.

All the picture files need to be placed in the "images/scrapbook" directory. Just put the name of the picture file in the left column, the name to appear in the left hand selector and the text that will appear below the picture in the right cell.

It will show one picture at a time with the picture listing on the left. Picture sizes are recommended to be 300 to 500 pics wide. The larger the picture the slower the download time.

The arrows can be turned off through the "control_data.js" file. Locate the following code and select on or off.

sb_arrows = "on";

Font Setting: (See Changing Fonts and Colors)
.sbNavHeader - header for the left picture selector.
.sbNavName - left picture selector names.
.sbCaption - caption text.

*** Do not modify the scrapbook.htm ***

Editing Other Pages:

To edit the other pages of the site:
Join us - joinus.htm
Tiger - tiger.htm
Wolf - wolf.htm
Bear - bear.htm
Webelos1 webelos1.htm
Webelos2 webelos2.htm

These page all similar formats. There is a picture on the top left sized 150 x 150, text below it and a picture that is tall and skinny. There is text in the main part of the page. You can replace any of these items easily.

Font Setting: (See Changing Fonts and Colors)
.textNormal - all text is formatted to this by not bold.
.textTopicHeader - on links page
.textLink - links on link page.

Editing fonts in the CSS:

All of the fonts and colors for the text are controlled in the file "contorl_Fonts.css". This can be edited in Netscape Composer by hand or use one of the free CSS editors in our tools section.

Each font will have a definition in the file.

.textNormal { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; color: #000000}

font-family: controls the fonts.
font-size: controls the font size. It needs to be in px 12px, 14px, 16px ect.
color: controls the color of the fonts. This is in hex formatting. (#000000 to #FFFFFF) You can use Netscape's or the Windows color selectors to get the proper color code for the color you desire.

Most of the class settings are for a specific page. ".textNormal" will change the text from most of the sight. IF you change the font formatting on a page using its formatter then it will over ride this setting but not remove it. All text you do not specifically change will default to the settings in this file.