|
|
Insert
Images 
Link
CSS Pr
1 Pr
2 KOALA
One of the more important things you should spend some time learning is how to use External Cascading Style Sheets. Dreamweaver MX has made setting this up rather easy, but it helps if you have an idea what Style Sheets are and what they can do for you.
Style Sheets control how your Web site will look from page to page, keeping the look consistent throughout the site. Style sheets allow you complete control over everything on the page, at least everything you'd like to have control over. Once you get the hang of this you'll wonder how you ever got along without it.
On this page you see how to find the Styles area and learn how to set up various elements. You will set up margins, how the background color will look, the font face, size, and color too. Then you will set up hypertext links in a couple of different styles. There is a lot more, to learn, so let's start with these basics.
First
let's locate where you'll find the Cascading Style Sheets panel in Dreamweaver
MX, look at the upper-right side of the work space and locate the Design
panel. There are three tabs to use CSS Styles, HTML Styles and Behaviors. Click
on the CSS Styles. In this screen shot there are no Styles
established yet.
Click
the 2nd icon at the bottom of the panel that has a plus
sign + on it, this is the New CSS Style icon. The
dialog box shown to the right will help build the Styles used your site. For
practice type .bodytext in the Name: text
box. Don't forget the period (.) in front, this is how you
make a Class file in CSS. Be sure to have Make Custom
Style [class] selected and Define In radio button
with [New Style Sheet File] is selected. This will create the
External Style Sheet you need. Click OK to
open the next dialog box.
After clicking OK, Dreamweaver MX will ask you where you'd
like to save the file. Please choose the same directory
that holds your HTML files, and be sure to give it a name that
makes some sense to you and use the three letter extension of .css.
Use the Hands-On Steps below to set up your practice style sheet. If you are using Dreamweaver 4 instead of MX, the screen shots might look a bit different, but essentially the set up is about the same.
View or Print Hands-On Exercise below in 
.PDF format.
Build
an External Style Sheets Step by Step
Follow these steps and compare the screen shots to what your dialog boxes look like. After you save your .css file to the proper place the dialog box below will open. Notice the 8 Categories to the left, not all of these areas are used in each Style Declaration, but it is nice to have them at your fingertips for future edits.
Let's set the .bodytext as the name implies, select the drop-down arrow in the Font: and choose the: Verdana, Arial, Helvetica. sans-serif selection. Set the Size to 12 points, the Weight to normal and the Style to normal.
For the Background category type in #cccc99 in the Hex color box.
For the Box category click the Left margin and set it to 50 pixels. Click Ok to save your new Style Declarations.
Highlight the new bodytext item now in your Styles list box
and you can edit it anytime you wish. The Pencil icon will
light when you have a Style in the box and it's highlighted. Or, if you prefer,
click the Edit Styles radio button at the top for a look
at all the styles in effect. Clicking on any area in the list then the pencil
icon will let you edit the files contents.
Now let's create a small type Class file that we can use when we need small type on the page. Click the New CSS Style icon with the plus sign + and type: smalltype as the name and be sure that the Define In: remains set to css-demo.css or whatever you called your practice file. Click OK. When the large dialog appears set the Type to Arial, Helvetica, sans-serif; The Size to 10 points, and weight and style both to normal. Set Box Margin to 50 pixels for the left. Click OK and you'll have another style declaration available.
Next you'll make some custom class files that will change the way your hypertext links look. Later you'll make a pseudo class file for the links too, and I'll bet you like the look too.
When
a page has a background color, your hypertext links might
have to be changed to match the color scheme. Click the New CSS Style icon
again. This time choose Use CSS Selector in the type area
and Define in the current css-demo.css file. Drop the selection arrow down
in Selector: and choose a:link. We will
do this activity for a:visited and a:hover,
you can hold off on the a:active for now.
Make these choices for the Type: category: choose Verdana, Arial, Helvetica, sans-serif; set the Size to 10 points; Weight to Bold; Style to normal; and Decoration to none; set the text color to #663333.
Notice that is no evidence of the addition in the Apply Styles area of the Design panel. But it's there, don't worry you'll find it later when you edit the file.
Click the New CSS Style icon again, this time choose a:visited and repeat the above steps. The only item that needs changing is the color of the text used as a visited link, use #993333 for the color.
Click the New CSS Style icon again, this time choose a:hover and repeat most of the steps as before except you'll add a background color and ignore the text color (that way you will be using whatever color was in effect for that link when passing over with the mouse). Use #FFFFCC as the hover background color. I'll leave this up to you, you could turn on the underline feature in the Decoration area for hover if you wish. If you do, when the mouse passes over a hyperlink, not only will a background color appear, but an underline for the text will also appear. It's your choice here, this is a personal taste thing.
Hide the Step-by-Step LessonI think you might like the idea presented in the next Hands-on step session. I have often used a concept called pseudo codes in Cascading Style Sheets. These are codes used to give a twist to the look of an existing style treatment and allow more than one version for that code. The case in point here is to create a new look for hypertext links, this time make the link look like a button that pushes in when passed over. This effect can be accomplished with JavaScript in a few minutes in any of Macromedia's products, but this is just a bit of coding magic in CSS. It's fun, and you're learning, so give it a try before judging, OK? Besides, you'll get a look at how to edit your main CSS file by doing this assignment.
View or Print Hands-On Exercise below in .PDF format (Same
as above).
Edit
an External Style Sheets Step by Step
Create the New CSS Style icon again, this time choose Redefine HTML tag and then drop down the arrow in the Tag: area, click on the body tag so you can add style that will affect the Web pages body. This like the hypertext areas will be created inside your main css-demo.css file or whatever you called it. Click OK.
Select the Background selection in the Category list and type #CCCC99 for the color and click OK, you will see immediately that your Web page now sports a new color. Now every one of your Web pages that links to this CSS file will share that color. In another area you will learn how to add an a fixed image to the background too.
Please notice in the image on the right that you can gain access to all your
embedded styles from the CSS Styles tab, just click the Edit Styles radio
button, select the item to edit, then click the pencil icon below. You will
find the way you like the most when editing these files, it's not expected
that you will use every method that's available. Personally, I think the MX
version is the easiest I've seen when it comes to working with Cascading Style
Sheets.
Now it's time to create a special "Button-like" image, there are a few more steps, so take your time and follow my instructions. Once you get the concept, the sky is the limit on how you can vary the options... have a blast!
View or Print Hands-On Exercise below in .PDF format.
Create
a Pseudo Class Button for the Koala Site
You'll need to create a New CSS Style again. Choose the Use CSS Selector
and pick the a:link, but before you close the box, click
inside the a:link and type a.button:link,
this is the pseudo part of the code. You will be creating special information
about the button, however, the button only will work on a link that hasn't
been visited yet. Well if you read between the lines, you are going to have
to make an a.button:visited and a a.button:hover
too. No hill for a climber like you, right?
If you are getting the picture on CSS, a class file
starts with a period (.) followed by a word
that you make up, then you apply that class file where and when you like in
the site. In this case, you will personally select the hyperlinks that you
want this treatment applied to and click on the word button
in the Apply Styles panel. Very easy!
Here is the information that you will use for making both the a.button:link and the a.button:visited when their dialog boxes open.
Here is the information that you will use for the a.button:hover when the dialog box opens.
So here is a sample of what your button links will look like when placed on your Web page. Hovering the button creates a "pushed-in" look with a lit field behind the text, as if the button was lighting-up. Of course, you will change the colors of the button to match any color scheme you need. These colors are specific to the Koala project. I hope you like the idea.
So how do you make it work on the page you ask? Just a little tweak and you're home free. You'll have to add the class file to the hyperlinks that will look like buttons, that's all. Just highlight the text that will become a link button, and then open the CSS Styles tab from the Design panel. Click on the word button, (refer to the screen capture above), and it's done. You won't see the effect in the Show Design View screen, but preview it in a browser and it's there. I did this exact thing for the button below stating KOALA and the Hide the Step-by-Step Lesson.
Here's a link to the finished KOALA Web page.
Hide the Step-by-Step LessonStyle sheets give you freedom to think on a much grander scale; make a small or large change to your design on a style sheet and hundreds of pages could be affected in a blink of the eye.
You can find more about Cascading Style Sheets on my Web site. There you will see much more than I provided here. You can view those pages here: http://atl3.hostvelocity.com/~profal/css/CSSmenu.html
Page Updated on June 2, 2004