Cascading Style Sheets

CSS: The Missing Manual Course Syllabus & Assignment Sheet

Book: CSS: The Missing Manual

Includes:  Cascading Style Sheets

Estimated Completion: 60 hours

Text: CSS: The Missing Manual, ©2006, 1st Edition, David Sawyer McFarland, O'Reilly Publishing
ISBN: 978-0-596-52687-0

Cost: $26.00 - Search to see if you can find this book used.

It is recommended that you purchase additional text/reference books on each subject to further enhance your knowledge and meet your individual learning style. An Amazon store has been setup with recommended books to continue your studies.

General Notes - Before You Start the Book

Important Class Resources

Your instructor provides extensive additional resources for Web design. You should familiarize yourself with and bookmark the following sites:

  1. Lecture notes are available at: http://www.robinsblog.com - This site is updated several times per week. Students should check this site daily for important class announcements and updates.
  2. Class forum - A place to discuss Web development. Please register to use the forum.
  3. Web design tutorials are available at: http://www.tinkertech.net. - Spend some time getting familiar with this site, it is a collection of topics discussed in class over the last several years.
  4. Free Web site hosting for current students is provided at http://www.robinshosting.com support forums can be found at http://robinshosting.com/forum/index.php.

All software that you will need during class can be accessed from the Web Design folder in the Start menu.

Homework

Homework is not required for this class. However, reading your lessons at home prior to completing them in class makes your classroom time more productive. This is especially true with books from the Missing Manual Series since the first part of the chapter is reading followed by a hands-on tutorial. If you would like to work at home bring in a CD or Flash Drive and we can make a copy of the necessary files for you.

Backing up Your Student Files

You should periodically back up your student files to CD. Stations along the windows have CD Burners. Instructions for writing files to a data CD can be found here.

Certificates

In order to earn a certificate in HTML/XHTML & CSS students must complete the XHTML Final Project. This project should be completed before starting another course module.

Files, Samples, and Errata

File management skills are absolutely necessary to create and maintain Web sites. Please download and print this file management information for use in class. If you need a brush up on file management, review the tutorials that I've listed here http://www.tinkertech.net/octWeb03.htm#file.

The book has a companion Web site @ http://www.sawmac.com/missing/css/.   You should bookmark this site for future reference.  The site includes the sample files needed to complete the book (if you would like to work at home), completed tutorials, an errata (errors) and a blog.

In the classroom we use a network. You will be assigned a folder on our network. To connect to your personal folder use drive O:\. Your instructor will copy a folder to your network drive called cssmissing. This folder will include all of the images and files referenced in the book.

Working at home

If you would like to work at home and you don't have HomeSite here is a list of freeware HTML editors that you can download and use at home.

Getting Help

While we encourage you to try and problem solve any errors that you may have with your Web pages, ask for assistance if you cannot figure out the problem within a reasonable amount of time; I do not want you to become frustrated.

Cheat sheets are wonderful when you're learning to code. You will find links to numerous cheat sheets on the class forum.

Chapter Notes

Complete all exercises in the book unless otherwise noted in the chapter sections below.

Chapter 1 - Rethinking HTML for CSS

Be sure to visit and bookmark the CSS resources that accompany the book.

Chapter 2 - Creating Styles and Style Sheets

Setting Up Your Working Environment

By now you should be comfortable with HomeSite.  Just in case, you can access HomeSite by clicking Start > Programs > Web Design > Macromedia > Macromedia HomeSite+. If necessary review the article, Getting to know HomeSite. 

You should already be comfortable with Firefox. If you have not been using Firefox read Using Mozilla Firefox and be sure to Setup Firefox as an external browser in HomeSite+.

To preview your page in a browser, click the Preview in Browser icon in HomeSite.

You should ALWAYS check your work in Firefox and Internet Explorer 6.  You can also check your work in Internet Explorer 7, Opera, Netscape, and a variety of other browsers on the instructor's PC. We also have a Macintosh in the classroom. There are instructions for accessing your files on the Mac next to the workstation.

You should also have the recommended Firefox extensions installed.  If you don't, install the following Firefox extensions (link: Flash SWF file 1,701kb) on your computer if they're not already installed:

Web Developer Toolbar - Adds a useful toolbar to Firefox. Screen capture of the Web Developer toolbar.  The Web Developer Toolbar will help you to validate your XHTML and CSS. Click the Tools menu on the Web Developer toolbar and select select Validate Local HTML.

or

Click View > Page Source to access the HTML Validator.


You can view the CSS of any Web page using the Web Developer toolbar. Click the CSS button and select View CSS or Edit CSS to display a page's CSS.

ColorZilla - Adds a color picker to the status bar in irefox. Screen capture of Colorzilla.

HTML Validator - Allows you to validate documents by clicking View > Page Source in Firefox. Screen Capture of HTML Validator.

Aardvark - Allows you to identify block level elements in Firefox. Right click any Web page and select Start Aardvark from the menu. Screen capture of the Start Aardvark menu.

Aardvark is a very useful tool for viewing IDs, classes, and other block level elements on a Web page. Right click the Web page and select Start Aardvark. As you move your mouse over the Web page each block level element will be enclosed in a red outline and the ID, Class, or selector name will be displayed. You will find this extension very useful when you're working with CSS.

 

Firebug - Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. To access this extension click View > Firebug or press F12

DevBoi - a handy HTML/XHTML, CSS, JavaScript, and DOM reference. This is very useful when you’re learning HTML/XHTML and CSS. There is even an additional PHP reference. If you find yourself having to lookup CSS properties and XHTML elements and tags frequently you should get this extension. Click View > Sidebar > DevBoi to access the reference.

Be sure to read the documentation/instructions about each of these extensions at the extension's homepage.

There are additional Firefox extensions that you may find useful as you're developing Web sites; review the article Firefox Extensions for Web Developers. There is also a browser section in the class forum with even more great Firefox extensions.

Page 34 - Complete the tutorial on pages 34-42.

Page 39 - Open a blank new document in HomeSite by clicking File > New > Blank document. CSS files must not include any HTML or XHTML, so it's important to start with a blank document.

Chapter 3 - Selector Basics: Identifying What to Style

Page 34 - Complete the tutorial on pages 61-70.

Important CSS resources mentioned in chapter 3

Chapter 4 - Saving Time With Inheritance

Page 75 - Complete the tutorial on pages 75-80.

Chapter 5 - Managing Multiple Styles: The Cascade

Page 91- Complete the tutorial on pages 91-96.

Important CSS resources mentioned in chapter 5

Chapter 6 - Formatting Text

Page 123- Complete the tutorial on pages 123-131.

Important CSS resources mentioned in chapter 6

Additional CSS Resources You May Find Useful

Chapter 7 - Margins, Padding, and Borders

Page 158- Complete the tutorial on pages 158-169.

Page 165 #5 - When you add overflow: hidden to the h2 element, Opera (in our classroom) will not display the page properly.  We are using an older version of Opera and the current version displays the page properly.

Chapter 8 - Adding Graphics to Web Pages

Page 183 - Complete the tutorials on pages 183-207

Important CSS resources mentioned in chapter 8

Additional CSS Resources You May Find Useful

Chapter 9 - Sprucing Up Your Site's Navigation

Page 233 - Complete the tutorial on pages 233-250.

Page 238 #4 - Use globe.png as the image instead of globe_highlight.png.

Page 242 #9 - You will remove the "bottom" border, not the "top" border.

Important CSS resources mentioned in chapter 9

Chapter 10 - Formatting Tables and Forms

Page 264 - Complete the tutorials on pages 264-273.

Important CSS resources mentioned in chapter 10

Additional CSS Resources You May Find Useful

Chapter 11 - Building Float-Based Layouts

Page 307 - Complete the tutorials on pages 307-323.

Important CSS resources mentioned in chapter 11

Chapter 12 - Positioning Elements on a Web Page

Page 350 - Complete the tutorial on pages 350-362.

Important CSS resources mentioned in chapter 12

Additional CSS Resources You May Find Useful

Chapter 13 - CSS for the Printed Page

Page 376 - Complete the tutorial on pages 376-381.

Important CSS resources mentioned in chapter 13

Additional CSS Resources You May Find Useful

Chapter 14 - Improving Your CSS Habits

Important CSS resources mentioned in chapter 14

Appendix

Don't skip it! There is a lot of useful information in the appendix.

Appendix A: CSS Property Reference

This is a very useful section of the book; it includes a list of inherited properties starting on page 409.

Important CSS resources mentioned in Appendix A

Appendix B: CSS in Dreamweaver 8

Important CSS resources mentioned in Appendix B

None

Additional CSS Resources You May Find Useful

Appendix C: CSS Resources

Important CSS resources mentioned in Appendix C

World Wide Web Consortium (W3C)

Books and PDFs

Online Tutorial

CSS Help

Email List

Discussion Boards

CSS Navigation

Tutorials

Online Examples

CSS and Graphics

CSS Layout

Box Model Information

Layout Examples

Miscellaneous Layout Resources

Browser Bugs

Windows Internet Explorer

Mac Internet Explorer 5

Showcase Sites

CSS Books

Must-Have RSS Feeds

CSS Software

Windows and Mac

Windows Only

Mac Only

Taking CSS a Step Further

If you would like to take CSS a step further, read Transcending CSS the fine art of web design. This book demonstrates the future of CSS in a beautiful manner.

Project Information

Students will demonstrate their knowledge of the Web planning process.

Students should complete the HTML Project Proposal (Word document format).

Students will demonstrate their knowledge of HTML/XHTML & CSS by developing a six page Web site.

Using what you have learned in the XHTML/HTML/CSS books, the design book, and the other resources you have been provided create a Web site using the following guidelines:

This site should be a minimum of six created pages. The content or site topic is up to you. You may want to contact a local non-profit, a neighbor, or a small business to see if they need a Web site developed.

The page design should be visually pleasing, professional, and should support the page content. The page design should be appropriate for its intended audience. The page design should be controlled with CSS. The structure of the page should be developed with XHTML transitional or strict.

The images should be well designed and complement the overall site design. They should not be distorted and should not include negative graphic effects. The images should be optimized and should download quickly. All images should have ALT and height and width tags. If necessary the images should be resized using an image editor and not via the image height and width tag. Images from the Web can be used as long as you have obtained appropriate permission.

The pages should use effective and professional layout. The layout should not be cluttered. The background and text colors should be readable. Visitors who use a 800x600 monitor should not have to scroll to the right. Font sizes should be appropriate for the audience. The page layout should be controlled with CSS.

The content on the site should be well written. The content should not contain grammatical, punctuation, or spelling errors. The content should be easy to read and use appropriate fonts. The content should be controlled with CSS.

The site should be well organized. All pages should have meaningful titles. Navigation should be obvious and easy to maneuver. Navigation should be on every page and should be easy to find. The navigation should be consistent throughout the site. Folders should be created to store necessary files.

Everything on the site should work. There should not be any missing graphics or broken links. The layout and design should work on both a PC (Internet Explorer/Firefox) and a Mac (Safari).

The site should download in a reasonable amount of time. Multimedia objects should be used with care. All images should be optimized and download quickly.

The site should include the author's name (copyright statement) and some form of contact information (a contact form). There should be no copyright infringement on the site. The author should obtain permission for all images and content that was obtained from another source. Outside sources should be credited appropriately.

The site should contain keywords and description meta tags. While the keyword meta tag is not recognized by most major search engines anymore some obscure engines do still use this attribute. Do not abuse the keyword meta tag; using terms that are not used in your page's actual content will not help to boost your rankings. Using false terms will penalize your ranking with some search engines. Review the articles and resources posted in the search engine category @ robinsblog.com and the class forum. Print a copy of Google's SEO Starter Guide. Don't skip reading these articles; search engine placement is as important as coding the site.

The site should be XHTML compliant (transitional) and you should validate all pages prior to submitting it to your instructor. http://validator.w3.org/ - You do not need to include the W3C validation image.  Also be sure to validate the CSS - errors should be fixed.

Students should read the Web design rubric before they begin their projects. This rubric defines the grading criteria for the project.

Self-evaluation and peer-evaluation

The site should be uploaded to your account at robinshosting.com.

Before you submit your project to your instructor, use the Web design rubric to evaluate your own site. You should also ask two of your fellow students to evaluate your site using the rubric. After self and peer-evaluation, revise your site as needed. Submit your self and peer-evaluations to your instructor along with the HTML Project Proposal.

Submitting the Site

Submit your self and peer-evaluations and your HTML Project Proposal to your instructor. After submitting this packet, please schedule a site review meeting with your instructor.

Notify your instructor via email, rwood@cccoe.k12.ca.us, when the site is complete. Be sure to use the complete URL/URI in your e-mail, i.e., http://robin.robinshosting.com (always include the http:// when you send your links out in e-mail or post them on message boards).

Advanced Studies

Take the time to learn more about CSS and XHTML In addition to the CSS resources listed on this page I have some recommended books at my Amazon Store.

Copyright information

Prior to creating your HTML final project, read R. Delago-Martinez' What is Copyright? site. Be sure that you do not include images, text or code without permission from the originator. For additional information on copyright visit the following sites:

10 Big Myths About Copyright
United States Copyright Office (Be sure to read the copyright basics)
Copyright Information from the University of Michigan
The Copyright Website
Copyright Resources Online from Yale University
Copyright Law from the Copyright Clearance Center
Copyright and Fair Use from Stanford University Libraries
Legal Information Institute - Copyrights & Copyright Infringement and Remedies