% Author: Ian! D. Allen - idallen@idallen.ca - www.idallen.com % Date: Winter 2011 - January to April 2011 - Updated 2011-04-14 12:01 EDT % Title: Week 13 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 =========================== - **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 #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 ----------------- - 20 years of Linux: - HTTP stateless protocols 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.”* - Table-free web page layout: - - - see “Why tables for layout is stupid. Problems defined, solutions offered.” - - see “1. Faster Loading” for an example of with/without tables/CSS - - live demo of extremely varied CSS design - - “The Perfect 3 Column Liquid Layout (Percentage widths)” - full-height columns with full background color! - uses CSS relative positioning to move column color pages left and right From the Classroom Whiteboard/Chalkboard ---------------------------------------- - Your in-class notes go here. - Review of last week’s notes. - This week: [550_web_what_vs_how.html] - Presentation vs. Content - Keeping “How” separate from “What” in Web design - Problems and Limitations - Limitations: - still early for adoption: - CSS support - which browsers handle which CSS: - Effective use of style sheets: - Table-free web page layout: - - - see “Why tables for layout is stupid. Problems defined, solutions offered.” - - see “1. Faster Loading” for an example of with/without tables/CSS - - live demo of extremely varied table-free CSS design - - **“The Perfect 3 Column Liquid Layout (Percentage widths)”** - full-height columns with full background color! - uses CSS relative positioning to move column color pages left and right - Meeting the needs of your users (or not): - Creating your own web site - choosing and renting a domain name - the fine print: dot .com vs. all the CIRA lawyers - .com about $8/year .ca about $15/year (too many lawyers to pay) - having the domain name hosted on at least two name servers - your web host provider may bundle this with web hosting - web hosting is about $4/month, maybe less for toy sites - choosing a web hosting provider - you probably can’t do it at home due to your ISP agreement - you are not allowed to run “servers” - you could get *slashdotted* anyway! - be aware of DMCA and USA Patriot Act (where is your data?) - running your web site - cPanel control panel on many web hosts - also Plesk - 1and1.com has their own custom control panel - remember, everything on the Internet is archived **forever** - keep your own backups - web hosts do go bankrupt -- | 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]: week13notes.txt [Test Instructions]: 000_test_instructions.html [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 [Pandoc Markdown]: http://johnmacfarlane.net/pandoc/