CSS Basics in Adobe Dreamweaver
COW Library : Adobe Dreamweaver Tutorials : Abraham Chaffin : CSS Basics in Adobe Dreamweaver
HTML and CSS Basics Tutorial in Adobe Dreamweaver
This tutorial is designed to introduce the concepts of using CSS in Adobe Dreamweaver and HTML for web designers who are not familiar with CSS in web design. CSS stands for Cascading Style Sheet and is a system for adding styling to your web pages and web page content.
What you should see should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is the beginning framework of your HTML document; it is built up of many tags. The start of each tag looks like <this> and the end of each tag looks like </this>. The whole document is made up of the <html> tag above it looks like <html xmlns="http://www.w3.org/1999/xhtml"> because it has a xmlns modifier in it. The end tag is at the very bottom of the document </html>. In between the beginning and ending <html> tag there are two primary tags the <head> and <body> tags. The <head> tag is not seen but supplies many essential parts and modifiers for what the <body> tag elements will look like. The content in the <body> tag is the content that is actually visible through your browser.
Once you have clicked "Ok" Dreamweaver adds code into your HTML file preparing to modify the <body> tag using CSS.
This will also bring up the "CSS Rule definition for body" dialogue window allowing you to define your Choose from the "Background" from the Category column and choose a very light yellow with the Background Color picker or type in #FFFFCC and press "OK".
Pressing "OK" executed Dreamweaver to modify the CSS body selector by inserting a background-color property and a value of #FFFFCC.
There are many other properties you can assign to the body selector or you can modify it using the CSS Styles frame:
The first field in the "Insert Div Tag" dialogue box is the Insert: field. This is the field that designates where the div tag will be inserted in the html page. By default it sets it to "At insertion point" which means the Div tag will be inserted where your cursor was last placed in the web page. You can also choose "After start of tag" or "Before end of tag" to place your Div tag at a different location.
Next you find the "Class:" field which is a field that directly relates to your CSS rules. A CSS Class has a selector with a period in front of it such as ".class". Classes are used to assign a property or properties to many items in a web page. We have no classes defined yet in this document so there is nothing we can assign yet. The "ID:" field is also blank because there are no ids defined in our CSS. Ids are used to assign a property or properties to a single item in a web page and in the CSS code has a pound sign before it such as "#id". Since we have neither of these click "New CSS Style" and we will define a new rule.
This time select "Class" as the Selector Type, type in "coolclass" as the, select "This document only" and press "OK". Let's set the background color of this class with a cool blue color by selecting "Background" under the categories and setting the "Background color" to something like #00CCFF. Now set the border color to a thin black line by clicking on "Border" as the category and then choose solid as the style from the drop down and 1 pixel as the width and black (#000000) as the color. Or you can be more creative if you choose. Now let's set a little padding in our rule by clicking on "Box" in the Category column and type "5" for the "Top: Padding" this will assign the padding not just for the top but for all sides if you leave the "Same for all" box checked. Press "OK" and Dreamweaver will create a new class rule in your CSS Style tag with three properties.
Your "Insert Div Tag" dialogue box now also has its class field populated with "cooltag" - press "OK" and Dreamweaver will write code into your web page with place holder text inside the new <div> tag.
<div class="coolclass">Content for class "coolclass" Goes Here</div>
This div will have our class that we created assigned to the div tag and all elements inside the tag.
<img src="whatever_your_image_is.jpg" width="552" height="239" class="coolclass" />
Power of CSS:
Creating a Quick Nav Menu
Put each word on its own line by pressing Enter with your cursor inbetween each word. Highlight all the words and right click then select List > Unordered List. You now have a bulleted list but we need to apply some styling to it so we need to create a rule.
Click the add css button from the CSS Styles frame. There are many ways to assign the style to the list, we could create a new class calling it something like ".listclass" and apply it to each <li> tag making <li class="listclass"> but for this example we will create a rule for all <li> tags. Select "Advanced" radio and type "li" in the Selector field. "li" stands for list. Select "This document only" and press "OK".
Let's remove the bullet, make the font color white and the font weight bold. With the Type Category selected choose bold from the "Weight" drop down and choose white (#FFFFFF) for the Color. From the List Category choose none from the "Type" dropdown and press "OK". Adobe Dreamweaver created code in the CSS that affects the <li> tag.
To have a proper nav menu the items should change as you mouse over them. To do this we need to add a behavior. Go to the Window Menu > Behaviors (Shift+F4). Show all events by clicking on the "Show all events" button . Make sure your cursor is in one of the list items so the behavior is applied to the list item and not something else. In the onMouseOver field type this.className='coolclass'. "this" refers to the tag "li" className tells the browser you want to change the className to coolclass. In the onMouseOut field type this.className='' (That's two ' marks not a quote). This makes the browser return the class name of the li tag back to nothing when the mouse moves out of the element. You have now applied a behavior to one item in the list.
To get the behavior to be applied to all elements you must either repeat the previous steps with your cursor in each list element or copy and paste the code in code view. The final result in code view should look like this:
Before we end this tutorial we should set the cursor to a hand as it goes over the list like normal navigation would.
Play around and remember to have fun!