Project 3
You will create a website.
You can choose the content of the site, but must meet the below specified requirements
Need a website idea? Create a new version of the Visit Johnstown or Windber Country Club
Your site should NOT look very similar to this
You may take the content images for this site to use on your project, but you should have a completely different look to it
FUNCTIONAL REQUIREMENTS
Directory Structure
The Root folder is expected to contain the entire website
3 informational sections
a Root Home page
an Apply to be a Member section
For the 3 informational sections, which are children of the Root directory:
An Example of the 3 sections based off of Visit Johnstown PA website:
Play
Stay
Eat
Each section of the website should have:
Home page
The File name, should use the naming convention we learned, which is the best practice for homepages. This allows servers to be configured to load the page even if its file name isnt specified in a URL
2 other pages, which are siblings to this sections home page
There shall be some type of information on this page
Pick ONLY 1 section build a child directory corresponding home page for it
This home page will actually be a grandchild to the Roots homepage
All pages within these sections from the previous 3 bullets shall have their main content area split into 2 columns
1st Column: A small column on the right or left of the page representing the local or section navigation
The local or section navigation will provide links to all the pages of a section including the page a user is currently on
Each link should be on its own line and the column should be wide enough so that links wont have their text wrap to a new line
If section has a child directory at least 1 section will, that directorys homepage shall be included as well
Must use an unordered list for these links
Hide the bullet for the list items using CSS
Styling Links for local section navigation
Color of these links should not be the default
No underline should be applied by default
Link Interaction
When links are hovered, a pseudoclass should apply an underline to the links
When links are visited, a pseudoclass should change its appearance in some way of your choosing
2nd Column: A Wider column
Holds the content of this page
Reuse this layout from one page once youve created one, to maintain consistency between these pages and the other sections of the website
Edits will have to be made where you reuse the code, but the structure style should carry over without an issue
Root Home page of the website
Follow the naming convention described for home pages
Its Main Content Area
Shall NOT be the same column layout of the sections described above
Can contain any content you want, but Must deliver the primary message above the fold
From the main content area, provide a link to grandchild page 2 levels deeper in the directory structure, which is a requirement for one of the above sections.
Create 2 tables
1st table should present some kind of content with table headings included
2nd table should demonstrate at least 1 colspan or rowspan implementation
Apply to be a Member
NO matter what the topic of your webpage is, act like theres a membership in which someone could apply
Provide a form to collect contact application information
Also, make up 3 questions to vet applicants, utilizing 3 different form controls
Provide a button to submit the form
Upon pressing the button, the form shall:
Pass values correctly utilizing the post method
Take the user to a Thank you page that simply says thank you
NOTE: using the exact form code from the notes or from the inclass activity will result in a loss of all points for this section
EVERY PAGE of the website should exhibit:
Valid HTML CSS
Valid HTML Document Tree
Properly Open Close Tags; Tags used in proper locations
Relative Absolute URLs utilized when appropriate
Use at least 1, but no more than 2 External Style sheets
Every page in the website should reference one of these
Styling should be done solely in Style sheets ONLY, not in the HTML
Styling Expectations
No link should have the default blue color
All colors should be done with hex codes or RGB values
Id Class attributes MUST be used for most CSS selections to alter appearance
Global selectors are not appropriate in most situations
MUST have at least 1 CSS Rule selecting multiple elements at once
Layout
A fixed width layout shall be used
Proper guidelines should be followed
Recommended width
Website alignment
Content area should be centered on the page using CSS techniques learned
Images
ALL images will be stored in an images directory, which is a child of the Root
Must be an acceptable web image format
Should be sized correctly to fit the flow of the page not distort their appearance
Almost all images should be aligned to the left or the right of content or other elements using the float CSS property
No image should have a unutilized whitespace to the sides of it
Appearance of the site shall be visually appealing unique
Alter vary appearances with properties like:
Fontfamily, fontsize, color, backgroundcolor, border
Alignment: Textalign, verticalalign
MUST use padding margins for reasonable spacing in your content
Header Area
Constructed along the top of the page
Shall be present on every web page
Even for the Form data collection thank you page
Ensure you test that links work from every individual page as relative URLs will need to be change depending on the pages location within the root
Will contain:
An image representing your website
Horizontal navigation Primary Navigation of the website
Must use an unordered list
List items will be:
Home, linking to the Root home page
Links to the 3 content area home pages
Membership linking to the Member Application Form
Apply a positioning scheme so that the header stays at the top of the page when scrolling
I should not see content scrolling behind it or above it
At a minimum, Style this header links so that default colors are not used
Should have a consistent look and feel across the entire website
Main Content area
Place a heading element at the top of the main content to display the title of the page basically the same link name that got the user here
Text
At least 1 image that is in the flow of the content by being beside the text
Grab images off the web
Use at least 1 border to separate content
Content areas should be laid out through a series of elements like:
SubHeadings, Divs, Spans, Lists, Tables, Paragraphs
DISCLAIMER
IF you take any of the code from the example website Visit Johnstown PA or from any other website, this is plagiarism
Attempts to copypaste code wont be difficult to detect
I know each of your individual capabilities what weve learned in class. I dont expect you to stray far outside of those boundaries
You have lots of creative freedom in this project no 2 projects should be alike even those that may share the same content concept
If Any Academic Integrity issues occur, you will FAIL the class
GRADING CONSIDERATIONS
Must satisfy all of the above mentioned requirements
Quality of the site will be taken into account
The website should be error free
The website should be usable shouldnt get stuck in areas once Ive loaded the homepage
The website must fully work in Google Chrome.
I will not be testing in other browsers nor should you
SUBMISSION
Zip root directory of website upload to CourseWeb by Due Date.
Name the zip file with your last name Ex: Stouffer.zip
No Exceptions…..
1 minute late, is a ZERO
Incorrect submittal may lead to a ZERO