270: SIMPLEPLUS

SIMPLEPLUS: Style Your Pair of Linked Web Pages Using CSS

0. Come to class as there may be corrections, changes and additions.   Significant late penalty per day.
1. Use Notepad++ to create two web pages.
2. Follow these directions to SUBMIT a folder called "SIMPLEPLUS" to the D2L dropbox.
3. Comment! (guidelines)
4. Publish to cisprod.clarion.edu/~s_student/SIMPLEPLUS/.
5. VALIDATE your   HTML   and your   CSS

Adjust your HTML.

Copy the SIMPLE folder and rename the new folder SIMPLEPLUS. - Fix all the things that sucked in the SIMPLE for the SIMPLEPLUS assignment. - Include the SIMPLE folder (unchanged) and link to it in your internal nav. <a href="SIMPLE/a1.html">... - Add "a3.html" - can be a 'dummy' page but should have the same style and nav - Remove any html formatting tags ( b, i, etc...). - Use some semantic tags header footer nav

Apply CSS

All 3 pages (a1, a2, a3) use CSS:     - use an EXTERNAL style sheet: <link rel="stylesheet" href="simple-plus.css" /> Organize your CSS     - see this CSS example and this CSS example CONTROL the Layout!! My grid as we saw in class: responsive and fixed with width at 960px M B P C Nest containers as needed.     A background image or a background color (image(s) uploaded to YOUR account).     The page should be styled as a box model with MBPC     Text styles.     Link styles.     A styled image.     Float (at least) two elements side by side     Use classes in more than one place. Try the "multiple small class" idea...     Use a favicon: <link rel="shortcut icon" href="favicon.ico" />     Minimal use of "pre"

Make the html AND css validate!

W3C HTML Validator: by upload | by input W3C CSS Validator: by upload | by input

Create a Navigation Header and Footer for All Pages

Style <header> and <footer> tags on each page to contain your internal and external links EX: <header class="topNav">
-- OR --

*[OPTIONAL - extra]* Use JavaScript to Create a Navigation Header and Footer for All Pages

All 3 pages (a1, a2, a3) should use the same EXTERNAL javascript file (<script src="simple-plus.js"></script>) All 3 pages (a1, a2, a3) should create the same header by calling the same function All 3 pages (a1, a2, a3) should create the same footer by calling the same function Two functions: navHeader (at least 4 internal links: a1, a2, a3 and link to SIMPLE) navFooter (at least 3 external links) THE JS FILE: window.onload()=function(){ navHeader(); navFooter(); } function navHeader(){ //get reference to your styled html element (header) by id var ref = document.getElementById("headNav"); var s = " YOUR NAVIGATION HTML" + "<br />" ref.innerHTML = s; } function navFooter(){ //get reference to your atyled html element (footer) by id var ref = document.getElementById("footNav"); var s = " YOUR NAVIGATION HTML" + "<br />" ref.innerHTML = s; }

Submit folder to D2L and cisprod.clarion.edu