term project website
TO DO MileStone 3 Due Feb 15 Mon
Milestone 3: Skeleton site with layout, tables and forms In this milestone, you will start coding. However, before you start to code the HTML/CSS, do the following prep work:
Technical design Project folder: Create a folder named after your TEAMCODE (e.g. G1 for Group 1). All your project files and graphics for your website will be organized in this folder and subfolders as needed.
- Filenames: Review your sitemap and the pages you need to create. Decide on the filenames you will use for these pages. Filenames should be meaningful. The home page should be named index.html
- Styling requirements: See guidelines at http://www.webstyleguide.com/wsg3/7-pagedesign/ index.html and http://www.webstyleguide.com/wsg3/8-typography/index.html). Referring to the page layouts you created for Milestone 2, decide on how the following are to be styled: o Fonts and colors to be applied across all the pages o Common elements such as headings, lists, paragraphs o Other elements such as logo, navigation, footer, etc if necessary o Note that the main navigation will be configured as an unordered list. Use the CSS link and hover pseudo-classes for the main navigation hyperlinks and in-page hyperlinks o The table o The form for user input
- Class design: Design the classes, naming them by semantics rather than style. Use advanced selectors whenever it makes the styling design clearer. Remember the purpose of CSS is to separate style from content so that any subsequent style changes are localized to the style sheets.
External style sheet
- Create an external style sheet named base.css in the style subdirectory. Document your design using CSS commenting.
- Note the style should be consistent across pages by using base.css. If there is a justifiable need to have page specific styling, use seperate css files without duplicating any of the classes defined in base.css. Do not use inline CSS.
Prototype page
- Code a prototype page for your site based on the design documents. Apply classes and id’s where appropriate, using external CSS to format content and layout.
- Save and test the page iteratively. Modify both the webpage and base.css as needed. Test the page carefully using Firefox and IE, improving the page as needed. Make sure the page is fully tested before you start developing other pages.
Remaining pages
- Using the completed prototype page as a basis, code the rest of the pages on your site including the appropriate html table markup.
- Update the relevant page(s) with the html form markup, using post with the action attribute invoking PHP server-side processing subsequently. For now, the action attribute should send the form data temporarily to: http://webdevfoundations.net/scripts/formdemo.asp
Testing and code submission
- Conduct A/B testing and document the results to justify your design
- Test your site thoroughly in both Firefox and IE. Make sure to validate all html and css files.
- Zip up (don’t rar) the entire website and submit it to D2L. The zip file should be named: TEAMCODE_TeamLeader_Milestone#.zip
Submission Revise any changes to previous milestones based on the feedback from your instructor, and add to your project document with track changes the following information:
- URL where all work completed so far can be viewed
- List of items completed for this milestone
- Any additional work on top of what is required for this milestone, if any
- Key issues, including those outstanding, that was encountered in building the site
- Any deviations from the proposal (Milestone 1) and design (Milestone 2) and why
- Documentation of work o Screenshots of the front page as well pages containing the required display table and the form o base.css