1. COS 125 DAY 12

2. Agenda  Assignment 5 Corrected 7 A’s & 2 B’s No one got the 10 bonus points  Required that all rules were correct  test5.txt test5.txt  Time of submission is either the last modified date/time of uploaded files or time the grade sheet is uploaded to blackboard, whichever is later  Assignment 6 posted Due March 23 @ 9:30 AM  Additional security on web server Prevents wandering mice  Discussion about course time line Finish Course on April 27  Finish Lecture/Discuss Layout with Styles

3. Security  Must Login to see WebPages “user”@netumfk.edu Same password  Use “file upload” to verify pages  Security will be lifted after last assignment

4. New time line  March 16  Styles 19  Lists 23  Assignment 6 due  Tables part 1 26  Tables part 2 31  Assignment 7 due  Quiz 2  April 2  Forms part1  Progress report 6  Forms part 2 9  Assignment 8 due  Multimedia 13  Scripts Part 1 16  Assignment 9 due  Scripts part 2 20  PodCasting  Progress report 23  Assignment 10 due  Quiz 3 27  Capstones Presentations Due

5. CSS Positioning Review  4 position possibilities Static (default) Fixed (browser window top left is 0,0) Relative (move elements from static flow) Absolute (first ancestor’s whose position is NOT static top left is 0, 0)  4 offsets Top – positive N moves element down Left - positive N moves element right Right – positive N moves element left Bottom – positive N moves element up  Example.center { position:fixed; top:250px; right:350px}

6. CSS Positioning Review  Overlap Positioning may cause elements to run into each other Use z-index to position siblings on Z axis  Large z-index goes to top  Element cannot be positioned using static (default)  Over flow Hidden -crop elements Visible -overflows parent element Scroll -forces scroll bars Auto – creates scroll bars when needed  Examples http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/cssposition/position.htm http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ examples/cssposition/position.htm

7. Media-Specific Style Sheets  You can designate a stylesheets to be used only for printing, for screen display or for both.  Use attribute “media=“print” or “screen” or “all” in the open link or style tag  You can also import using @import “print.css” print;  Example http://www.cookwood.com/html6ed/examples/#c14

8. How Print Style Sheets Differ  Can be the same or very different from screen version  Some suggestions Use points instead of pixels for sizing  12points instead of 15px Hide sections like sidebars, banners or ads  display:none Remove background colors and images Adjust margins Set page breaks Let viewers know that printouts are different than viewed pages Test the print out (print preview) and adjust if necessary

9. Controlling Page Breaks  WebPages can be very long  Use CSS to control where the contents are printed relative to printer page  Where page breaks occur Page-break-before:values Page-break-after:values Page-break-inside:values Values are “auto” “always” or “avoid”  Examples p{page-break-inside:avoid} h1,h2,h3{page-break-before:always}

10. Printing link URLs  If You want to see the URL of your hyperlink when you print a web page  Define a print style sheet and add the following a {text-decoration:none; color:black);  Remove text color and underline a:after {content:”(“ attr(href) “)”; font- style:italic;} http://www.cookwood.com/html6ed/examples/printing/ printurl.html http://www.cookwood.com/html6ed/examples/printing/ printurl.html http://www.cookwood.com/html6ed/examples/printing/ printurl.css http://www.cookwood.com/html6ed/examples/printing/ printurl.css

11. Widows and Orphans  Orphan is a term used to describe a single word or short phrase appearing at the bottom of a paragraph or column.  A widow is a single word or short phrase appearing alone at the top of column.  To modify using css Selector{orphans:n} Selector{widows:n} N is minimum number of lines to appear at the top (widow) or bottom (orphan) of a page  p{orphans:4;widows:4}

12. Style Sheets for Handhelds  The wireless web is growing Uses WAP (wireless application protocol) and WML (wireless markup language) WML is losing favor and being replaced by xHTML with CSS  use an existing web page written in xHTML  use a “handheld” media specific CSS  Biggest issue is mini-browser wars Over 4o different mobile broswers

13. Viewing WAP sites  Use a WAP enabled mobile device  Use a simulator Opera small screen Openwave Simulator  http://developer.openwave.com http://developer.openwave.com Winwap  http://www.winwap.com http://www.winwap.com iPhone simulator  http://developer.apple.com/iphone/ http://developer.apple.com/iphone/ Blackberry simulator  http://na.blackberry.com/eng/developers/ http://na.blackberry.com/eng/developers/

14. Mobile web browsing limitations  Pay by the Byte  Little to no images  Use Proxy servers and Wap gateways  Small & narrow screens  No pointing device (mouse)  Limited # of fonts  Some ignore all CSS Some ignore some CSS Some ignore CSS backgrounds

15. Creating Style Sheets for Handheld   Add to the existing external style sheet link  media=“screen” Default for media attribute is “all” whichs mean to always apply style sheet  Hide unnecessary elements {display:none}  Use image Headers  Add extra links to help navigate page  Adjust for small screen Adjust margins and padding Add borders Reduce text size Center content Remove image borders Use alt attribute for images

16. Tips for Assignment #6  For assignment #6 I gave you a xHTML page with lots of text and various elements  You cannot modify the xHTML page other than associating with different style sheets  You will have create several different style sheets to format this page Style sheets will be IAW formatting rules I give you in the assignment  You will have to produce a menu that shows the same pages formatted with each different style sheet Ex Umfk1.htm with style1.css