This is a step by step description of the options in the CSS Rule Definition dialog from Dreamweaver CS3. Today we are covering the options related to the "Background" panel where you set up behaviors in the background of your elements.

You can download a PDF version of this article here.

CSS Rule Definition: Background

This is the basic rule definition dialog for Dreamweaver CS3. It has 8 categories down the left-hand side. Each one will present you with a range of options in the main part of the dialog. This paper describes the "Background" section.

Background Color

The most basic setting for this section is the Background Color. You can use the drop-down menu to choose a color from Dreamweaver’s template, or you can type a number directly into the empty field next to the color selector. If you do type the number directly, be sure to include the # sign at the beginning!

The palette that shows up under the cursor is set to display "web-safe" colors by default. In the olden days on the web (just a couple of years ago!) we always stressed using web-safe colors, but they are becoming less important in today’s world. Note that web-safe does not promise the colors will be the same on different computers, only that they won’t be dithered.

Early computers often could not reproduce a full color spectrum, so they cheated by dithering the colors, or by putting different colors side by side to blend and make our eyes see colors that weren’t really there. For example, they may have put a pixel of red next to a pixel of red to make us see orange. Web safe colors gives us the guarantee that if we see orange, all the pixels are orange.

Anyway, computers sold today can display enough colors that web-safe is no longer an issue.

An added benefit of the eye-dropper cursor is that you don’t have to select colors from the palette itself. You can move the eye-dropper over any color visible on your screen to pick up that color for this space. You can sample colors from photos, other places on your Dreamweaver document, even out of icons on your desktop, as long as they are visible when you choose the drop-down.

Finally, when you are choosing a background color, make sure it’s dark or light enough to provide plenty of contrast with your font color or people won’t be able to read the text on your web page.

Background Image

You can type a fully qualified URL (one that starts with http:// ) or you can click on the browse button to select a graphic image from your hard drive. If the image is not contained within your web structure, Dreamweaver by default will offer to copy the image in for you when you are done.

Keep in mind that busy or high-contrast images and patterns make it difficult to read the text on your page. You should keep background images low-contrast, or "washed out," so that your site is easy to read.

By default, any image you place here will be placed in the upper right corner and then repeat over and over all the way down through the visible parts of the page.

Repeat

If you have an image in your background, repeat tells the browser how to repeat it when you don’t want it use the default. The four options are: "repeat," which makes the image repeat across and down the page; "repeat-x," which makes the image repeat only across the page; "repeat-y," which makes the image repeat only down the page; and "no-repeat," which makes the image display only once with no repeating.

The default is "repeat" in both directions, but remember that any HTML element can inherit directions from its parent element (the element that encloses the current element), so if you have complex embedded elements, it might be worth it to explicitly say "repeat" if that’s what you want it to do.

Attachment

If you have a background image, this property will determine whether the image scrolls with the page or not. If it is set to "scroll," the image will scroll with the rest of the page as it move. If it is set to "fixed," then the image will not move as you scroll the page.

Horizontal and Vertical Positions

If you have included a background image, you can use the position settings to offset it from the upper left corner of the browser window. In the image above, it is set to display the upper right corner of the background image 100 pixels from the left hand side.

No Comments »

This is a step by step description of the options in the CSS Rule Definition dialog from Dreamweaver CS3. Today we are covering the options related to the "Type" panel where you set up behaviors for your fonts.

You can download a PDF version of this article here.

CSS Rule Definition: Type

This is the basic rule definition dialog for Dreamweaver CS3. It has 8 categories down the left hand side, each one will present you with a range of options in the main part of the dialog. This paper describes the "Type" section.

Dreamweaver CS3 will allow you to define things like fonts, type size, color and alignment directly in the property inspector at the bottom of your screen, but using the property inspector method bypasses this dialog and can produce unpredictable (and hard to correct) results. You should always manage the type on your web pages through the CSS rules either directly in the CSS code on your CSS page, or through the CSS interface that includes this dialog.

Font

Clicking on the popup menu next to the Font field, you are presented with a list of fonts that are all good choices for your web project. Dreamweaver ships with the options in the picture, but you are always free to add your own either manually or by editing the menu.

Every computer on the web uses the fonts it has installed to display the page. If you use a fancy font that few people have installed on their machines, then you will only have a few people see your website the way you designed it. It’s best to stick with standard fonts so that everyone sees the same design. Those offered by Dreamweaver are excellent choices for this.

Why are there three fonts listed in each option? Again it’s because every computer has different fonts. In the example, the first option lists "Arial, Helvetica, sans-serif". This means the computer viewing the web page will first try to use Arial for the font. If Arial is not installed on the computer then it will try to use Helvetica. If it can’t find Helvetica either, then it will just use the generic sans-serif font that is defined for that machine.

Any time you give it your own choice of fonts, you should always end with one of the five font categories: sans-serif, serif, monospace, fantasy, and cursive. This way the end-user’s computer can always have a default if it can’t find a copy of your font.

Size

Choosing a font size depends on your design. Choosing xx-small, x-small, small, medium, etc., will rely on a browser default or base the size on the parent CSS element. If you want to nail the size down to something specific you should choose a specific number (or type a specific number in the blank and not use the popup menu at all).

Units for Size

If you choose (or type) a number, you will need to choose a measurement. Different designers argue over which one is best, but the truth is that none of them is the single best answer in every condition. For best cross-platform/cross-browser consistency, pixels works best. 12 pixels on a PC in Firefox is roughly equivalent to 12 pixels on a Mac using Safari. If you choose points, then your fonts will vary in size by somewhere around 20% between a Mac browser and a Windows browser. Inches, Centimeters, Millimeters and Picas all depend on screen resolution, so they can vary wildly as well. "Ems" is pronounced just like it sounds. It stands for the width of the capital letter "M". Many web developers swear that designing using Ems is the only way to go. The advantage of using Ems is that it keeps everything proportional to the font. "Exs" is the same thing, except the unit is the letter X instead of the letter M. Finally, using % means the measurement will be based on the enclosing CSS element (referred to as the Parent). So a font that is set to 10% will always use 10% of the available space.

Style

The style field lets you choose "normal", "italic", and "oblique". For all practical purposes in today’s browsers, Italic and Oblique are the same thing. Use which ever one you like. If the parent element has already set Italic or Oblique and you want to override that setting, you should choose Normal. Otherwise you can leave it blank if you like.

Line height

Type a number to change the line height of the font, or choose normal to override the parent element’s setting. If you type a number, you’ll have to choose a unit of measurement from the menus beside it (like the font size, the options are pixels, points, in, cm, mm, picas, ems, exs, and %). Leaving it blank will allow it to inherit the settings from its parent.

Weight

Choosing a specific weight for web text has long been a designer’s dream. The mechanism is there now, but many web browsers do not support it. The specification says 500 is normal, lower numbers are lighter, higher numbers are darker. In practice, you are pretty much limited to "normal" and "bold".

Variant

Turning on small-caps will make every letter a capital letter. In this case, the capital letters are all normal capital letters, the lower case letters are slightly reduced in size but still have the shape of the capital letters. This effect does not show up in Dreamweaver’s design window. You’ll have to preview the final page in your browser to see the effect.

Case

Here you can choose to capitalize every word, convert everything to lowercase or to uppercase, or you can choose none to override the parent. Often this is used for menu items that are text so that they will have have the same case structure.

Color

Choose a color from the palette for your text. You can also choose a color from anywhere on the screen using the eyedropper. The colors that show up on this palette are the 216 "websafe" colors. Websafe means they won’t be dithered in the event that someone with 8-bit color is looking at the website. Websafe is still exists as a concept, but there’s not a lot of practical need for it any more. Every computer sold in the last five years or so can display significantly more than 8-bit color (8-bit color means the computer can only display 256 different shades of color on the screen at one time). 16- and 24-bit color has been around for almost 20 years, allowing modern computers to display millions of colors at once. The "websafe" palette is really a throwback to the 1990s. Feel free to use these colors or any other on your website.

Comments Off

Some basic tips when you start to design your website:

1. Short Paragraphs
   Break text into very short paragraphs. Longer paragraphs tend to look like forbidding brick walls of type on screen.
2. Clean, modern fonts
   Use a sans serif (clean, modern-looking) font, like verdana or arial for paragraphs of text because they are more legible on screen.
3. Don’t center Paragraphs
   Don’t center more than two lines of type. Centering is ok for headlines, but in paragraphs it begins to look messy and is harder to read.
4. Don’t use all caps
   Don’t use all caps, except in headlines. They’re harder to read. Use Bold or Italic for emphasis. All-caps is considered shouting.
5. Contrast between text and background
   Make sure there is lots of contrast between your background color and text or it will be hard to read. If you use a background image, make sure it’s extremely low contrast so it won’t make reading text difficult.
6. Use images that download quickly
   Learn to use tools like Photoshop or Pixelmator (or even free tools like iPhoto) to resize and optimize your pictures for quick download.
7. Use the same image on different pages
   Using the same image over and over on different pages will economize on transfers. If the same image appears on different pages of your site, it will only have to be downloaded by the browser one time.
8. Keep it compact
   Don’t annoy users! Scrolling, especially side-to-side, and automatically resizing a user’s browser window often makes people go away without exploring your content.
9. Easy navigation
   Make it easy to find links to every part of your site from every page. Organize links so they are obvious and intuitive, and put navigation near the top of your page.
10. Keep it simple
    Don’t load the page with extra frills like clip art and unrelated photos. One strong photo related to the content will do more than ten random images, and cute is highly overrated. Too many elements on a page tend to look busy. They confuse, distract from and dilute content.
11. Visual Hierarchy
    Lay out each page so the most important things have more emphasis, are noticed first and are read first. Putting things at the top, in the upper left or center, making them bigger or brighter or in more contrast to the background are all ways of creating emphasis. Surrounding something with blank space also creates emphasis.

No Comments »

We wrapped up another Saturday Academy class last week. This one had 8 middle school kids learning all the secrets about Dreamweaver.

It’s always fun for me when i teach kids to see what they come up with for topics. It’s normal for me to let them build websites about anything they like, based on certain criteria that we teach. They have to use Dreamweaver, they have to build it from scratch, and they have to do it over the range of four Saturdays.

This time around, one kid built a site about Dragons while one built a nice little site about the universe with pictures found at web locations like NASA. Another kid built a site showing photos they had taken from remote locations in Guatemala. One kid was obsessed with Wii, and another made a site with pictures made from the built in camera on the machine and an application called “Photobooth.”

The time before this with Saturday Academy high school students we had similar results, but one student built a site about Oscar Wilde that even he would have enjoyed.

No Comments »