Cascading Style Sheets - Week 2
This lesson will introduce you to Cascading Style Sheets. Cascading Style Sheets or CSS allow you to control the layout and style of your web pages. CSS tags, classes and divs affect the look and feel of your web pages.
Lecture/Demo:
- Presentation of the Four Basic Design Principles for screen design and good and bad web sites. Take a look at bad designs at http://www.webpagesthatsuck.com. We will review the CSS Zen Garden for good use of design principles.
- Student Presentations on Web sites (One CSS Zen Site and one web site of your Choice)
- Introduction to Cascading Style Sheets Presentation
- Understanding CSS Specifications
- Understanding Cascading Part of Style Sheets
- Attach an external style sheet
- Make new CSS Style Rules
- Apply a Style to your page
- Set up Custom Classes
- Create and style page layout elements
- Change existing CSS properties
- Create a Print Style Sheet
- Demo http://www.csszengarden.com/ to appreciate how is CSS applied
- Getting Started with CSS
- An Introduction to CSS Video
Lab:
- Chapter 2 Dreamweaver CS4 Classroom in a Book, page 33 – Hands on Exercises Working with Cascading Style Sheets
Homework:
- Finish Chapter 2 Hands on Exercises if not finished.
- Start planning the first page (index.html) of your Portfolio which will be due at Week 6 (Midterm Project.). Define a site called Portfolio. Determine a theme,color scheme, the overall layout and collect any assets (images, elements and icons) you would like to use. Save them in a folder called Images in your Portfolio site. We will learn how to resize images and make a banner in Week 4 and create the navigation with links for the site in Week 5. By next week
- Draw out your general layout for your portfolio (keep it simple) Your site should have a header, main content, div for navigation and a footer. You may use one of the built in layouts in Dreamweaver. Your site must use XHTML semantic markup and you must use an external style sheet for styling.
- Collect any images you want to use
- Determine your color scheme
- Compose your bio in Word
CSS Resources: