Author: Kurtis Kegans
Course: ITSE-2402
Assignment: # Lab 2 – Tables
Date Created: 09/14/2008
Date Updated: 09/22/2008
Web site layout using nested tables.
PAGE TEMPLATE FOR: Chade’s Bicycle Company Web Site
1.1
Chade’s BiCyCle Company
2.1
2.2
Chade’s Bicycle Co
Company Calendar
Contact Us
3.1
Chade’s Bicycle Company | Company Calendar \ Contact Us
Chade’s Bicycle Company @Copyright 2008 – Last Updated XX/XX/XXXX
Page Template Structure – Table with 3 rows and 2 columns
1. First Row – Header Area
1.1. Contains Company Logo
1.2. Contains Company Name
2. Second Row – Navigation and Page Content
2.1. Navigation Area
2.1.1. Chade’s Bicycle Company link
2.1.2. Company Calendar link
2.1.3. Contact Us link
2.2. Page Content Area – (See the individual page content specifications on the following pages.)
3. Third Row – Page Footer
3.1. Footer Area ( 2 column span )
3.1.1. Secondary Navigation links
3.1.2. Page Copyright information
PAGE CONTENT SPECIFICATIONS FOR: Chade’s Bicycle Company page
1.1
2.1
2.2
Chade’s Bicycle Company
Text for the company story of Chades’s Bicycle Company. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Sed molestie, arcu ut interdum
semper, nulla enim pulvinar mi, non viverra enim ligula et nibh.
Pellentesque accumsan tincidunt eros. Nam quis odio. Donec auctor justo
pharetra ipsum vestibulum convallis. Nulla eu est. Sed interdum. Duis ut
velit sed augue tristique
Company Mission Statement
Text for the company story Mission Statement. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Sed molestie, arcu ut interdum
semper, nulla enim pulvinar mi,
3.1
Page Structure – Content using h2 level headers and paragraphs of text content
2.2
Page Content for Chade’s Bicycle Company Page
2.2.1. The company story if Chade’s Bicycle Company
2.2.2. The Chade’s Bicycle Company Mission Statement.
PAGE CONTENT SPECIFICATIONS FOR: Company Calendar page
1.1
2.1
2.2
Company Calendar
Jan. 1 – New Years Day
Jan. 17 – Martin Luther King Day
Feb. 14 – Valentine’s day
3.1
Page Structure – Content using h2 level headers and paragraphs of text content
2.2
Page Content for Company Calendar Page
2.2.1. Table consisting of 2 columns and 13 rows
2.2.1.1. Row 1 - Title to the page “Company Calendar” as an h2 header spanning 2 columns.
2.2.2.2. Row 2 – Calendar entries for January
2.2.2.2.1. Left Column – Imbedded Table for monthly calendar. (See the Calendar specifications on
next 2 pages.)
2.2.2.2.2. Right Column – Important dates for this month.
2.2.2.3. Row 3 - Calendar entries for February
2.2.2.3.1. Left Column – Imbedded Table for monthly calendar. (See the Calendar specifications on
the next 2 pages.)
2.2.2.3.2. Right Column – Important dates for this month.
2.2.2.4 through 2.2.2.13 will repeat the structure and contents of 2.2.2.3 for the months of March
through December.
PAGE CONTENT SPECIFICATIONS FOR: Calendar Specifications
1.1
2.1
2.2
Company Calendar
Jan. 1 – New Years Day
Jan. 17 – Martin Luther King Day
Feb. 14 – Valentine’s day
3.1
Page Structure – Content using h2 level headers and paragraphs of text content
2.2.2.2.1. This imbedded table for the monthly calendar will be repeated in 12 areas on the company Calendar
page. Once for each month of the year, January through December. Each iteration will require
modification for the actual calendar day’s content.
This table will consist of 8 rows and 7 columns
2.2.2.2.1.1.
2.2.2.2.1.2.
2.2.2.2.1.3.
2.2.2.2.1.4.
2.2.2.2.1.5.
2.2.2.2.1.6.
2.2.2.2.1.7.
Row 1 – Name of Month Col span 7
Row 2 – Days of week (Sun, Mon, Tue, Wed, Thu, Fri, Sat)
First week layout
Second week layout
Third week layout
Fourth week layout
Fifth week layout
PAGE CONTENT SPECIFICATIONS FOR: Calendar Highlighted Entries
1. Holidays - must be highlighted with red calendar day numbers
1.1. New Years
1.2.
Martin Luther King Day
1.3.
President's Day
1.4. St. Patrick’s Day
1.5. Easter
1.6.
Memorial Day
1.7.
Flag Day
1.8.
July 4th
1.9.
Labor Day
1.10. Columbus Day
1.11. Veteran’s Day
1.12. Thanksgiving
1.13. Christmas
2. Important dates - must be highlighted with red calendar day numbers
2.1. The company takes the day before and the day after Thanksgiving as part of the holiday.
2.2. The company takes the entire week between Christmas and New Year's off.
2.3. The company wide picnic is the second weekend in July
3. Meetings - must be highlighted with red calendar day numbers
3.1. Safety meetings are held the last Friday every other month (unless it is a holiday then the meeting is the
next Monday), the first safety meeting of each year is in Jan.
3.2. the annual sales meeting is held the second weekend of June in San Francisco
3.3. the annual convention is held the 3rd week & weekend in October in Chicago
PAGE CONTENT SPECIFICATIONS FOR: Contact Us page
1.1
2.1
2.2
3.1
Page Structure – Table with 3 rows and 2 columns
2.2
Page Content for Contact Us Page
2.2.1. Row 1 will be a h2 header “Contact Us” title, centered in the row spanning both columns.
2.2.2. Row 2 Will include the Company address and contact information.
2.2.3. Row 3 – image of map showing the store location
Outside References Used
Title: The CSS Anthology, Second Edition
Author: Rachel Andrew
Publisher: SitePoint Pty Ltd
Copyright: 2007; ISBN: 978-0-9758419-8-3
DATE
RESEARCHING
WRITING
CODING
TESTING
MISCELLANEOUS
09/14/08
1.5 hr
1.5 hr
09/15/08
0.5 hr
1.0 hr
2.5 hr
09/18/08
0.5 hr
1.0 hr
1.5 hr
1.0 hr
4.0 hr
1.0 hr 0.5 hr
09/22/08
TOTAL
0.5 hr
Artwork Preparation
0.5 hr
2.5 hr
4.0 hr
Reflection Questions:
I would really hate to have to maintain a calendar this way, therefore the fees to do so would be fairly
high. The initial development and setting the special dates would be charged at about 4 hours of labor
and any modifications would have to be based on a ½ minimum charge.
I am positive there are software solutions to maintaining this type of calendar. This would be a good
place to use JavaScript and/or a server side script like PHP or CGI and possibly even a database.
This was the first time I have attempted to use CSS based rollover navigation menus and that forced
me to use separate style sheets for Internet Explorer and the other browsers. I could not get the CSS
simulated buttons to size in an acceptable way using a single style sheet.