% Author: Ian! D. Allen - idallen@idallen.ca - www.idallen.com % Date: Winter 2011 - January to April 2011 - Updated 2011-04-07 04:16 EDT % Title: Week 12 Notes for CST8281 - Winter 2011 - [Course Home Page] - [Course Outline] - [All Weeks] - [Plain Text] Final Exam Instructions ======================= - The Final Exam date is posted on the [Course Home Page]. - For full mark credit, read the [Test Instructions] for important directions on how to enter your answers on the mark-sense forms. Lecture Notes for This Week =========================== - **Review Firefox Web Developer Toolbar** - **Validation URLs** - **Basic Cascading Sytle Sheets - CSS** - coming up: **Web Design - Best and Worst Practices** From the Class Notes link on the Course Home Page ------------------------------------------------- - [Course Home Page] - [All Weeks] - [Assignment #12] - Dumping and Decoding a Big-Endian Binary File - [Assignment #13] - HTML, Web pages, Style, CSS - [Assignment #14] - HTML and CSS Study and Review (LAST ASSIGNMENT) - [550_web_what_vs_how.html] - Presentation vs. Content - Keeping “How” separate from “What” in Web design - [555_web_design.html] - Best and Worst Practices for Web Design - [560_course_linux_server.html] - using the Course Linux Server - [570_file_transfer.html] - How to Transfer Files - [590_how_to_report_problems.txt] - How to report problems - [600_basic_html.ppt] - Basic HTML - [700_basic_css.html] - Basic CSS From the Internet ----------------- Cascading Style Sheets (CSS): “style” - presentation: how a page is displayed. - w3schools CSS Reference: - official CSS Reference: - CSS Style Generator: - CSS Authoring Editor: - CSS “Ribbon” effects: - W3C **Web Style Sheets** Home Page: - **CSS Home Page**: - CSS 2.1 working draft December 2010: - CSS Tutorial: starting with HTML + CSS: - Good CSS demo: - - - - Mediocre CSS demo: - Warning! Uses frames and doesn’t validate! Bad design! - Learning CSS basics: - - (Table of Contents) - - - - note the three methods described in lesson2.php - - “Learning CSS” - another basic HTML/CSS tutorial - w3schools CSS Tutorial - Read everything under “CSS Basic” and try the examples: - Read: CSS Basic - Read: CSS Introduction - Read and try examples: CSS Syntax - Read and try examples: CSS Id & Class - Read: CSS How To - Skim: CSS Styling: Backgrounds Text Fonts Links Lists Tables - Read: CSS Box Model - Read and try examples: CSS Box Model - Skim: CSS Border Outline Margin Padding - Read: CSS Advanced - Read and try examples: CSS Grouping/Nesting - Read and try examples: CSS Dimension - Skim: CSS Display - note “block” vs. “inline” - Read and try example: CSS Positioning - note position: fixed and absolute - Read: CSS Floating - Read: CSS Align - how to centre an element using “auto” - Skim: CSS Pseudo-class - Skim: CSS Pseudo-element - Skim: CSS Navigation Bar - OMIT: CSS Image Gallery - OMIT: CSS Image Opacity - OMIT: CSS Image Sprites - OMIT: CSS Media Types - OMIT: CSS Attribute Selectors - Skim: CSS Don’t - Skim: CSS Summary - Skim: CSS Examples - Do: CSS Quiz (20 questions) - Skim: CSS Units - Problems and Limitations - - note “Limitations” section - still early for adoption: - CSS support - which browsers handle which CSS: - Effective use of style sheets: - *“For each site, all the style sheets should be designed by a single, central design group. Two reasons: First, centralized design is the only way to ensure a consistent style and reap one of the main benefits of style sheets. Second, the majority of Web content creators are not capable of designing and writing good style sheets. Experience with word processors that support style sheets indicates that most authors mangle their style sheets terribly. Understanding the effect of style is relatively easy in traditional desktop publishing because it is a WYSIWYG environment with a single, canonical output form. The Web is not WYSIWYG because of the variability in supported platforms. Furthermore, Web stylesheets are cascading, meaning that the site’s style sheet is merged with the user’s style sheet to create the ultimate presentation. These differences make it important that Web style sheets are designed by a specialist who understands the many ways in which the result may look different than what is on his or her own screen.”* From the Classroom Whiteboard/Chalkboard ---------------------------------------- - Your in-class notes go here. - updated [Week 11 Notes HTML] - Review last week’s notes. -- | Ian! D. Allen - idallen@idallen.ca - Ottawa, Ontario, Canada | Home Page: http://idallen.com/ Contact Improv: http://contactimprov.ca/ | College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/ | Defend digital freedom: http://eff.org/ and have fun: http://fools.ca/ [Plain Text] - plain text version of this page in [Pandoc Markdown] format [Course Home Page]: .. [Course Outline]: 2010-2011_CST8281.pdf [All Weeks]: indexcgi.cgi [Plain Text]: week12notes.txt [Test Instructions]: 000_test_instructions.html [Assignment #12]: assignment12.txt [Assignment #13]: assignment13.txt [Assignment #14]: assignment14.txt [550_web_what_vs_how.html]: 550_web_what_vs_how.html [555_web_design.html]: 555_web_design.html [560_course_linux_server.html]: 560_course_linux_server.html [570_file_transfer.html]: 570_file_transfer.html [590_how_to_report_problems.txt]: 590_how_to_report_problems.txt [600_basic_html.ppt]: 600_basic_html.ppt [700_basic_css.html]: 700_basic_css.html [Week 11 Notes HTML]: week11notes.html [Pandoc Markdown]: http://johnmacfarlane.net/pandoc/