CIS 1350 Final Project Part 1 of 4 IMPORTANT NOTE: All the work you do in this section should be uploaded to the assignment drop box. Do NOT upload to the server. Failure to follow this warning will result in no credit for the assignment and you will have to redesign all parts related to the final project up to the point of failure. Section A Introduction Throughout the semester you have been honing the skills you need to successfully develop the final project website. In these last class assignments, you will create your own website using what you learned from your course assignments. Although your website will reflect your individual interests, it should be developed with a clear purpose using the design fundamentals taught in this course. It should be pleasant and carefully constructed and should be representative of your web development capabilities. The fundamentals taught in this course, including good design principles such as organization and ease of use, will be used as the base to grade your project. Your final project website can become an important artifact in a portfolio of your work. You have worked hard at the development of your thoughts for your final website. Now it s time to implement your thoughts along with the feedback you have received. The final project has a total of four parts that you will complete: Part 1 home page and external stylesheet Part 2 data table page, external table stylesheet, and external print stylesheet Part 3 form page, external form stylesheet, and external mobile stylesheet Part 4 putting it all together to make a validated, cohesive website. There are some key points you should recall from your design document when preparing your final website: The organization/outline of the website this suggests the number of webpages and your navigation system. 1
The color scheme sometimes the suggestions work until the website is fully designed. You may want to relook at how and where you use the colors. This does not necessarily mean that the colors will change from your original design but they may. The use of media please be sure to include all copyrights, even for media that you have created. Project design requirements: A total of three (3) interlinked pages, all hand-coded. Links to at least two (2) external websites (using target attribute to open in a new window). Site layout cannot be a one-column layout. Your site must use at least a two-column layout. You can use static, liquid or elastic layout. Associate reset css and modernizr JavaScript files for all web pages created. First, locate an HTML Editor. I recommend Aptana Studio which works for both Windows and Macs and you have been using it throughout this course. Follow all instructions and steps you have learned in this course for the proper use of Aptana. Create the folder structure in a new web project or in your course site that you have been using throughout this course. See accompanying image. For this course, you have been provided with reset css and modernizr JavaScript which should be used in your final project. Please include them and associate them with all of your website files. Include both files within their appropriate folders in your final project structure. The figure below suggests a folder structure that you need to follow. The home page that you create should be placed inside the main folder. Other files such as css, JavaScript, and images should be placed in the appropriate folders. 2
Note: if you need text filler while working on this project, use the Lorem Ipsum site (www.lipsum.com). Please do not paste text in design view. Always use the CODE view for your work. You should have at least three paragraphs of text or about 30 lines on your home page. Section B Home Page, External Sheet Hand-code your web pages. Create your home page file and place in the project folder. The initial page should be named index.htm or default.htm and all other pages for your final project should be accessible from this home page. Be sure to clearly label your work on this page and all future pages. Associate reset css and modernizr JavaScript files which are placed in the appropriate folders. Also be sure to check your web pages on multiple browsers to ensure browser compatibility. Your personal home page (just one, not multiple pages) should include all of the following elements: 1. Must be named index.htm or default.htm. This page should have links to other pages in your site. 2. Structural elements (same as you did for your Basic Webpage, i.e., DOCTYPE, html, head, full meta, title, body). 3. Use <meta> tags for title, description, author, and at least 5 keywords. 4. HTML5 elements: <section>, <header>, <nav>, <aside>, <article>, <footer>. 3
5. Your name and the name of the assignment should be placed in the title tags (e.g., <title>john Doe s Final Project</title>). 6. Different color schemes (make sure that this is clearly visible). Avoid using "Vegas style" scheme with neon lights, etc. 7. Main heading tag should also include your name and an appropriate descriptor for the assignment (e.g., <h1>john Doe s School Experience </h1>). 8. Different headings (e.g., <h1>, <h2> etc.). 9. At least three paragraphs of text or about 30 lines. 10. At least one of the following: blockquote, definition list, special first letter of paragraph (e.g., dropped/enlarged). 11. Normal / bold/italic typefaces. 12. Horizontal rule (<hr /> tag). 13. Ordered list. 14. Unordered list with links to your favorite websites. 15. Graphics (e.g., use at least one image using alt and title tags). 16. Anchor <a> tag and its name attribute. Put a link in your text that takes the user to a separate section of the page (hint: need the NAME parameter of <a>). 17. Make an image map (hotspots). 18. Multimedia YouTube link. 19. Contact information (using the mailto link) and date last revised must be included at the bottom of your page. The main stylesheet (external css file) should include the following: 1. Multiple independent class selectors. 2. Multiple dependent class selectors. 3. Multiple type / tag selectors. 4. Pseudoclass selectors associated with links. 5. Multiple ID selectors. 6. Appropriate margin, padding, alignment, spacing, and border properties for elements. 7. Float properties. 8. Box shadow, border radius, absolute/relative positioning. 9. Place this CSS file in your CSS folder with the reset css. Before validating your webpages, please read the requirements again to ensure you have included everything needed. Validate your Webpages Be sure to check your web pages on multiple browsers to ensure compatibility. Validate the webpages using the W3C validators for HTML and for CSS (HTML & CSS Figure 1-47). All errors must be eliminated before assignment is submitted. 4
Note: Be sure to revalidate the html after you add either icon to confirm you didn t introduce new errors when you pasted in the additional code. 5