Have you ever wanted to do this with your web pages?

  1. Position things on the page where YOU want to put them.
  2. Create a footer with a graphic and different types of text. (Like the header on this page)
  3. Create those really cool looking pages filled with gradients and background images. (Like the Zen Garden site)

Today professionals are using CSS to design and format web pages. In this module you will learn some of the techniques that will make your pages really interesting. CSS has become an essential part of the XHTML toolbox. Being fluent with CSS is critical for almost every web job you might apply for.

Learning Objectives

Use the basic CSS to create a specific style rules for elements and page layout


Learning Activities

Check out css Zen Garden - Take a naked XHTML file blocked out with ID tags and ask developers to submit their own designs. Zen Garden is what you come up with. A great visual rush that demonstrates what you can do with web page design.

Here's the plain HTML file without any CSS if you'd like to try your own design: zengarden-sample.html

Do a web search for:  CSS column layout tutorial

Complete the tutorial: Setting Up a Reusable CSS Page - Learning CSS (Cascading Style Sheet) can be a little daunting. Here you are learning XHTML and page markup and all the sudden there's a language inside the language!

This tutorial will help you organize the CSS rules and help you build a common CSS template that you can use for any web page.

Complete the tutorial: Using External Style Sheets
This lab will show the value of using external style sheets as well as using the <div> and <span> elements.

Complete the lab: Using Float
Here is the basic HTML file to get your started: testFloat.html (right-mouse click, "save link as")

Thinking out of the gif OPTIONAL: Thinking out of the GIF. How did they do this?

This same type of thinking can be used to create CSS columns that extend the full height of the page.









(The answer is found under the Tip of the Week)

Complete the tutorial: CSS Layout Tutorial
This hands-on lab will give you a great set of tools allowing you to:
Quickly create a 2-column or 3-column liquid layout that automatically changes as the size of the browser window changes.
This tutorial will also show you how to use the <div> element to mark out sections on a page that can be customized with their own CSS rules.

Add a parchment effect on the web page and discover a new FireFox add-on: ColorZilla

Do a Web search for "CSS Validate" Find any tools that will help you validate your CSS code.
Post your findings out on the Discussion Area under the topic "CSS" (5 points)
CSS not working? Try validating the code to see what might be wrong.

Here's an excellent, 15-page CSS Reference in PDF format. (You can save this file by right-mouse clicking on the link and choosing "save target as")

OPTIONAL: Read Jeremy Keith's article, "CSS Based Design "  Scroll to the bottom and read the very last section first. This is an excellent article and he gives a very good overview of where CSS fits into today's Web world.

OPTIONAL: Dreamweaver Students - Work through chapter 5 - Templates and Style Sheets in the DreamWeaver text.
Although your mileage may vary, I've found the DreamWeaver CSS panel to be very cumbersome. I find it much easier and quicker to use the hotkeys: CTRL ~ to switch from the design view to the code view, scroll quickly to the top of the file, and type in the CSS styles I want.

Or, even better, open up the external CSS page and edit the code there.

Assessment Activities

Activity Due Date

There is no project for this module. Get started on the design and layout of your capstone project. Make sure you use CSS for column layout.

Note: Don't miss learning about these great techniques just because there is no project. You will need these techniques as part of your capstone project; in fact, for any web page you create. Need a project to motivate yourself, use the information in this module to help design the page layout for your capstone project.
No quiz this module 8~)

All done? You can start working with the next module: Image Maps

---

Tip of the Week:

del.icio.us - Have your bookmarks/favorites available anywhere you go.

del.icio.us logo

del.icio.us is a great website that allows you to save and annotate all your bookmarks/favorites. There are extensions for both FireFox and IE that put icons on the toolbar for quick access to del.icio.us: delicious icons

The blue-checkered del.icio.us logo displays your list of bookmarks out on the site.

The TAG icon allows you to quickly bookmark and annotate any page you are on. You can also assign your own tags or categories to the bookmark.

Each time you tag a page it is consolidated with the other users on del.icio.us. As you view your del.icio.us page you will see a list of items and how many other people have tagged that link. And, you can do a search for one of your tags and all the bookmarks with that tag will show up along with the comments that each user typed in. This turns out to be a very precise search tool with very little clutter. It's like a huge voting system based on everyone's tags and annotations.

Here's my list of public bookmarks: http://del.icio.us/webExplorations

How do you think out of the GIF? Using animated shots, layers, the drawing tool and transparent backgrounds, the artist thought "out of the box" and added some pencil sketches of his own. You can do this in GIMP or PhotoShop. Click here to see a visual clue. Here's a tutorial on GIMP animations.

Course Goals

Questions? Send me an email: peter.johnson@southcentral.edu

Read my blog at: http:webexplorations.com/blog

South Central College Logo

Strong Start, Successful Finish