WEBSITE DEVELOPMENT WITH CSS
Day
1 | Day 2 | Day
3 | Day 4 | Day
5 | Day 6
Course Description
Designing and building your website with Cascading Style Sheets (CSS) has many benefits over table construction, including giving you much more control over your layout. You may already be using CSS for font formatting, but not for structure. CSS is a whole new way of thinking about the structure of your website and your individual web pages.
This class is structured to give you a basic understanding of the CSS design process and coding. Whether you need CSS to work on your existing site, for a WordPress site, for a Drupal site or whatever your system is, the basics of CSS code is the same. We will be using Dreamweaver as a tool to manage files in this class, but it is not a "how to use Dreamweaver" class.
NOTE: for Fall 2011 we will be trying something new in this class. The last half hour of each class will focus specifically on WordPress to allow those who have taken the WordPress classes to expand on those skills!
Prerequisites: Web Marketing and Design and Dreamweaver 1. Excellent file management skills.
Texts:
Highly Recommended:
The Zen of CSS Design: Visual Enlightenment for the Web
- references in green
by dave shea and molly e. holzschlag
ISBN: 0-321-30347-4
Highly Recommended: Handcrafted CSS: More Bulletproof Web Design
by Dan Cederholm
ISBN - 10: 0321658531
Recommended:
CSS: The Definitive Guide
- references in red
by Eric A. Meyer
ISBN: 0-596-52733-0
1 |
Introduction to CSS
Principle 1: Separate content from design. The difference between "document structure" and "document layout" - pg. 1 - 6
Principle 2: Where is the CSS code?
Principle 3: How CSS is added to an HTML page element
Principle 4: The basic syntax of a CSS style- pg. 23, 24
Principle 5: Tag rewrites, ID styles and class styles
Principle 6: Planning and Naming your Styles
Setting up your tools
- Create a folder to hold your work in Documents
- Open Dreamweaver
-
Connect Dreamweaver to your folder
- Create subfolders for CSSZenGarden, Handcrafted CSS and for WordPress
CASE STUDY 1: CSS Zen Garden
- How to find the CSS code
- How to find where the CSS code "hooks" into the HTML code
- Analyze how the layers are nested
- Decide whether the names the developer chose are helpful
CASE STUDY 2: Handcrafted CSS
- Start with HTML code review
CASE STUDY 3: Download and review the basic WordPress file structure
TRY AT HOME - Try to find the CSS in your website (or a website you like)
- Read at home: CSS Zen Garden - pages 23 - 30
|
So, What is CSS Anyway?
Where are the Images in the Code?
The CSS Saga
Example of a page with no table or CSS structure |
|
Back to top
|
2 |
Reading the CSS File
Review
Principle 6: Planning and Naming your Styles - revisited
Principle 7: Organizing and commenting your styles
- compare the style sheets for the main CSS Zen Garden site and the Atlantis site. Notice that the designers take different organizational approaches, as well as different design approaches.
Principle 8: Zero out properties in the body style
Principle 9: Margin and padding properties - pg 210 - 223
Setting up your tools
- Review setting up Dreamweaver to find your local files
- Set up Dreamweaver to find your server files
- Discuss the various types of server setups you may find
- Demonstrate how to set up a database in CPanel
Brain Puzzle: If you have added a style with a link style, but it doesn't work when you add a link, what might have happened?
CASE STUDY 1: CSS Zen Garden
- Go through the CSS file and review the styles and the rules
- Download the Atlantis style sheet and compare
- Start your own CSS ZenGarden style sheet
CASE STUDY 2: Handcrafted CSS
- Start building the internal style sheet.
CASE STUDY 3: Download and review the basic WordPress file structure
|
CSS Centering - Auto Width Margins
Another great page on centering |
|
Back to top
|
3 |
Order of Precedence and Other Details
Review 1: Your style list - organization, comments and completeness to this point.
Review 2: Find the style sheets
Principle 10: Using a style in combination with a tag - adding the link <a> to styles
Principle 11: How to find and view a CSS file from another web site
Principle 12: Rules/Properties to format text - Chapters 5 & 6
Principle 13: Order of Precedence in styles - "specificity" - pg. 62 - 76
Principle 14: The "stuff" at the top
Principle 15: Introduction to Positioning - Positioning your content with a "container" layer
Setting up your tools
- Review setting up Dreamweaver to find your local files and server files
- Review the "levels" on your server space
- Create directories on browser accessible area of the server space
- Upload your WordPress
EXERCISE 5 - The Order of Precedence of CSS styles
EXERCISE 6 : Starting your layer structure
EXERCISE 7 : Get another style sheet for comparison of body and container styles |
Why a "Container" Layer?
The containing element acts as a new starting point for absolute positioning of everything inside it.
Adapted from CSS Zen Garden page 89
W3 Schools on Positioning |
|
Back to top
|
4 |
Using Previous Lessons to Make a Style Sheet for Handhelds
Review the process of building with CSS: CSS for Handhelds
|
Understanding the "box" model
CSS for Cell Phones |
|
Back to top
|
5 |
Spacing and Placing with CSS
Basic Principles
-
Review how to find style sheets
- Review types of styles
- Review CSS syntax
- Review the use of rules
- Review commenting
- The importance of the stuff at the top of the HTML
- Using images with style sheets
CSS Zen Garden Case Study
- Review centering a layer with CSS
- Comment your CSS Zen Garden styles
- Using the background rule
- Styles for inserted images
|
|
|
Back to top
|
6 |
More Spacing and Placing with CSS
EXERCISE 8: Positioning Columns
|
Upcoming new stuff: CSS3 |
|
Back to top
|
