CSS Image Sprites
An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server
Using image sprites will reduce the
Exercise 2: Project Outline Create Outline of Your
Project Site (10% of Course Grade)
Create a draft of your site "Why be a Librarian in the
21st Century?" in outline form, using what you learned in
Your site draft needs to cover your vision
Exercise 3: Visual Storytelling Create Visual
Collages (10% of Course Grade)
Create two different grid layouts that visualize
concepts related to your Term Project and the question
"Why be a Librarian in the 21st Century?"
Ask yourself: What are the key
Exercise 4: Navigation Design Create Interactive
Navigation Structure (10% of Course Grade)
Create a navigation structure for the primary categories of
your project that is interactive and visually rich:
You can use "rollover images", as shown in Week 7
Term Project: Multimedia Design Create Multimedia
Website using XHTML, CSS and Flash (50% of Course
The term project brings together what has been covered in
this course and what you have practiced in the exercises:
Create a website that communica
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of:
margins, borders, paddin
CSS Horizontal Align
In CSS, several properties are used to align elements
Aligning Block Elements
A block element is an element that takes up the full width available, and has a line break
before and after it.
CSS pseudo-classes are used to add special effects to some selectors.
The syntax of pseudo-classes:
CSS classes can also be used with pseudo-classes:
CSS Navigation Bar
Demo: Navigation Bar
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation b
CSS Image Opacity / Transparency
Creating transparent images with CSS is easy.
Note: The CSS opacity property is a part of the W3C CSS3 recommendation.
Try it Yourself - Examples
Creating transparent images - Hover effect
Exercise 1: XHTML & CSS Create Website Evaluation (10% of Course Grade)
Write a detailed evaluation of a website of your choice.
Choose a site that could serve as a model and/or contain relevant information for your
Use the evaluation templa