It is the box that sells the breakfast cereal. By using color and graphics correctly you can either build a high level of trust with your web pages or scare users away. This module has lots of subtle tips and tricks on using color to your advantage to build trust. This translates directly into higher user acceptance which for most clients means higher sales.
CSS is one of the building blocks of web programming. Make sure you understand the
concepts as you add CSS <style> elements to your pages.
-- Incorporate graphics on a web
page.
-- Utilize the alt=" " attribute with all graphic images for the search
engines and users who are blind.
-- Use an appropriate background color for your web pages using CSS.
-- Establish and document a color scheme for a web design.
-- Create web pages that communicate to all users (including those with color blindness).
-- Demonstrate knowledge of hex color codes by using them as part of your web pages.
-- Utilize the ALT attribute appropriately with all graphic images.
-- Use the basic CSS syntax to create a specific tyle for at least five different
HTML elements.
Do a web search for: Color Scheme. Review the pages you find and apply the principles to your project. Find a great site? Grab the URL and post it for others in the discussion area.
Do a web search for: CSS tutorial. There's lots of really good ones out there. This is a really important part of web programming so the more you can learn the more versatile you will be with your web work. Find a great site? Grab the URL and post it for others in the discussion area.
Use the Self Quiz:Color to help you learn the material. You can take
this self quiz as many times as you like, but it will close on Thursday before the graded
quiz opens up.
This is a learning activity. Use it to help you learn the basic terms and concepts.
Repetition over time is one of the best ways to build neuron pathways in your brain,
so take this self-quiz once or twice each day for easy, but effective learning. Even
better, take notes or try out code on your computer. This will fire other parts of your
brain up, reinforcing your learning even more.
Work through the tutorial:
CSS Introduction
Resources:
The
XHTML template file to start with (right-mouse click, "save link
as")
The
gradient background graphic .
(right-mouse click, "save link as", name the file: blueGradient.jpg)
View the web video:
The Color Wheel
Write down your impressions as you watch the video and post
them in the Discussion area under Color.
View the web video:
Color By Mood
Write down your impressions as you watch the video and post
them in the Discussion area under Color.
If you found these videos helpful, please go to their "Contact" page
and send them a thank you. Make certain you tell them
that you are taking a web class and what you learned watching the movies.
(The Rohm & Haas Paint Quality Institute is sending me the original
movies so I can include them on the CDROM for dial-up folks. They've
been very helpful.)
Use Kuler to create a color scheme swatch. (See Tip of the Week below)
You will need this as part of your project for this module.
Work through Tutorial:WebColor
Read this blog entry showing how popular sites appear to people with color blindness. Design your web color schemes with this in mind so you don't have some of your content "disappear" to a large proportion of users.
Work through Tutorial:Graphic
Work through Tutorial:Path Statements so your web pages can find your graphics.
OPTIONAL: For those learning
DreamWeaver, work through the following pages in the textbook:
Adding a Background Image DW61-64
Introduction to Style Sheets DW426 - DW466
Do the Adobe Turtorial on CSS Design Concepts Using DreamWeaver
| Activity | Due Date |
|---|---|
|
Take
the Quiz: Color This is an open book open Web quiz. 10 question, 10 minutes, 10 points. |
Before 11:55 pm Sunday,
Feb 22nd |
Complete Project:Color and submit via D2L |
Before 11:55 pm Sunday, Feb 22nd |
All done? You can start working with the next module: Links |
--- |
Color schemes are an important building block to good web design. Here is a great tool from
Adobe that allows you to build a color scheme from a logo or photo or by simply choosing
the colors yourself.
You have to register with Adobe to save and share your palettes, but registration
is free.
Look for the “Create” button on the left to open up the palette selector and you can either upload an image or pull one from your Flickr account. I’ve seen similar pages do this,but they took color samples at random from the image. With Kuler you can move thehotspots around to select the key colors that you want to incorporate in your theme.The resulting color swatch shows the hex color values and is great to print out and keep with your client files.
Here is a screen shot showing our Computer Careers logo and part of the resulting color swatches (Click on right image for a larger view):
By using colors on a consistent basis you improve the professional look and feel of the site and increase the believability of the site.
Special thanks to Michael Broderick for showing me this great web development tool.
Questions? Send me an email: peter.johnson@southcentral.edu
Read my blog at:
http:webexplorations.com/blog
Strong Start, Successful Finish