Graphics
Where are we?
We’re talking about the look and feel of a Web site. You’ve learned about typography and colors. Now for the last component: graphics.
This page’s goals
In this page, you will learn that:
- Informational graphics are part of a page’s content.
- Interface graphics are things like buttons that people click on.
- Structural graphics are part of the visual framework of a Web page.
- Graphic elements should conform to the color scheme you have chosen.
- You can use a jQuery plug-in to make rounded corners.
- Packaged designs include layouts and graphics, already made.
Images versus graphics
Most of what you need to know was covered in the lesson a Web pages with images. This page reminds you of some stuff, and adds a few extra thoughts.
I’m using the terms “images” and “graphics” a little differently. Images are photos or drawings, stored in files in JPEG, PNG, or some other formats.
Graphics is a broader term. It includes images, but it also includes borders, shading, lines, and other effects, that are created by HTML and CSS. Like <hr> and border: 1px solid black;.
Does everyone use the words “images” and “graphics” the same way you do?
No. Most Webers use “image” the same way I do. But the word “graphics” means different things to different people.
I define it the way I do for ease of learning.
Color schemes
You learned about color schemes on the previous page. Graphic elements should conform to the color scheme you have chosen. So if you’re using, say, an analogous green-blue scheme with orange for accents, the graphics on the site should use that same scheme.
The exception to this is when you use photos of real objects. Photos of people, locations, products, ... the colors are what they are.
Layout graphics
Recall that layouts break pages into regions:
Figure 4. Regions
You want to give visual cues that the regions exist. Figure 4 uses borders, background colors, and whitespace:
Figure 5. Layout cues
What does CoreDogs use? Have a look at the regions to the right. They are separated with whitespace, and a faint gray border. The CSS for the border is:
border-left:1px dotted #E1E1E1;
E1E1E1 is a hexadecimal code for the three colors: red, green, and blue. Each of them has the value E1, which is 225 in decimal. In CSS, #E1E1E1 is the same as rgb(225, 225, 225).
Remember that when red, green, and blue all have the same value, the result is gray. 225 is a high value (the maximum is 255). The color is fairly close to white, so we get a light gray.
Rounded corners
It’s fairly common these days to see rounded corners on Web sites. For example:
Figure 6. Rounded corners in action
There are lots of ways to do this, some of them quite complex. Fortunately, our good old friend jQuery makes it easy. There are several jQuery plug-ins that will round corners. We’ll use jQuery Corner.
Suppose you wanted to create a region like this:
Figure 7. Rounded corners effect
You could use the code below. You can try it here.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rounded Corners</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://coredogs.com/resources/jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".truth").corner();
});
</script>
<style type="text/css">
.truth {
background-color: #ffd0ff;
margin: 10px;
padding: 10px;
width: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="truth">
<p>Dogs are the best!</p>
</div>
</body>
</html>
Figure 8. Code to round corners
Let’s take a look at the code.
Since it uses jQuery, we need to include the jQuery library as usual. That’s on line 6.
Line 7 includes the plug-in. It’s in the CoreDogs resources directory. You can just copy-and-paste this line into your own projects, if you want.
Lines 24 to 26 create the HTML element we want to style:
<div class="truth"> <p>Dogs are the best!</p> </div>
Figure 9. Element to style
It’s just a <div> with some stuff in it. We used <div>s to create regions when learning about page layout.
Here’s some CSS that styles the <div>:
.truth {
background-color: #ffd0ff;
margin: 10px;
padding: 10px;
width: 150px;
text-align: center;
}
Figure 10. CSS for the truth
Line 15 sets the background color. Lines 16 and 17 add some whitespace. Line 18 limits the width of the <div>. Line 19 centers the content.
Put the HTML in Figure 9 with the CSS in Figure 10, and they will create this:
Figure 11. Square corners
But that’s not what we want. We want:
Figure 6 (again). Rounded corners effect
That’s what the jQuery plug-in does for us. We tell jQuery to use the corner() function on all the things we want to round:
$(document).ready(function() {
$(".truth").corner();
});
Figure 12. jQuery code
$(".truth") means “find all the things with a class of truth.” Then call corner() on all of them. corner() is defined in the plug-in.
The plug-in can change the corner shape, give different corners different shapes, change the size of the rounding, and lots of other things. See the plug-in’s demo page for examples.
Using packaged designs
Remember that there are packaged designs you can use. You can get them from Open Source Web Design, and lots of other places. They include graphics that are already matched to the site.
Summary
- Informational graphics are part of a page’s content.
- Interface graphics are things like buttons that people click on.
- Structural graphics are part of the visual framework of a Web page.
- Graphic elements should conform to the color scheme you have chosen.
- You saw how to use a jQuery plug-in to make rounded corners.
- Packaged designs include layouts and graphics, already made.
What now?
Time to design a framework for your personal site.
