Creative COW SIGN IN :: SPONSORS :: ADVERTISING :: ABOUT US :: CONTACT US :: FAQ
Creative COW's LinkedIn GroupCreative COW's Facebook PageCreative COW on TwitterCreative COW's Google+ PageCreative COW on YouTube
LIBRARY:TutorialsVideo TutorialsReviewsInterviewsEditorialsFeaturesBusinessAuthorsRSS Feed

CSS Basics in Adobe Dreamweaver

COW Library : Adobe Dreamweaver Tutorials : Abraham Chaffin : CSS Basics in Adobe Dreamweaver
Share on Facebook
Untitled Document
A CreativeCOW.net Adobe Dreamweaver CSS Tutorial

CSS Tutorial 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.

After reading this CSS tutorial you should have a basic feeling of how to use CSS in Dreamweaver. In this tutorial we will create a blank document, create CSS styling, insert a a div to the page, insert an image, and then create a quick navigation menu and assign CSS properties to the elements in the page. The program used in this tutorial and screenshots is Adobe Dreamweaver CS3.
Abraham Chaffin
CreativeCOW.net,
Cambria, California USA

©2007 CreativeCOW.net. All rights reserved.


HTML Documents:
Create a new blank document and then save it to begin your work. I tend to always save documents before I do anything so I can quickly save from time to time using the shortcut (Cntrl+S). When you create a blank document in Dreamweaver your web page already has content in it, you just can't see it in Design mode. To view the content you can use the shortcut (Cntrl+~) to switch between design mode and code mode or go to the View Menu > Code or View Menu > Design.

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

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.

 

CSS Elements:
Before we insert any elements let's create a CSS style. Pressing (Shift+F11) toggles the CSS Styles frame or go to the Modify Menu > CSS Styles. In the bottom right there is a little icon that looks like add css. This brings up the “New CSS Rule” dialogue box. To start let's assign a CSS rule for the <body> tag and make the background color an off white instead of a stark white. Select "Tag" for the "Selector Type" radio. From the "Tag" dropdown menu select the "body" selector. Select "This document only" for the "Define in" radio and click "OK".

new css rule

Once you have clicked "Ok" Dreamweaver adds code into your HTML file preparing to modify the <body> tag using CSS.

<style type="text/css">
<!--
body {
}
-->
</style>

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".

css rule

Pressing "OK" executed Dreamweaver to modify the CSS body selector by inserting a background-color property and a value of #FFFFCC.

body {
background-color: #FFFFCC;
}

There are many other properties you can assign to the body selector or you can modify it using the CSS Styles frame:

css frame

 

Div Tags:
Return to Design View (Cntrl+~) and let's insert a Div tag by going to the Insert Menu > Layout Objects > Div Tag, this will bring up the “Insert Div Tag” dialogue box. (Div tags are the most commonly used tag to hold different elements in a web page designed with CSS; such as images, text, or videos.)

insert div

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.

.coolclass {
background-color: #00CCFF;
padding: 5px;
border: 1px solid #000000;
}

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.

 

Images:
Now let's insert an image and assign our class to it.
Put your cursor outside the div by clicking anywhere outside of it inside the web page. From the Insert Menu > go to Image (Cntrl+Alt+I). Choose any image you may have available on your computer and press "OK". You can bypass the next dialogue box by hitting "OK"; Dreamweaver will place the image into your web page. Right click on the image and select from the menu CSS Styles > coolclass. This will assign the pre defined class to the image; giving it the background color, padding, and border we assigned to ".coolclass". Adobe Dreamweaver should have insert code similar to this:

<img src="whatever_your_image_is.jpg" width="552" height="239" class="coolclass" />

 

Power of CSS:
What makes CSS powerful is the ability to go back and make modifications of your style once and have it effect all elements you assigned the style to. In the CSS Styles frame you should see "All Rules" and your style ".coolclass". Click on the .coolclass selector and then on the value for the background-color (#00CCFF). Using the color picker choose a different color, such as (#66FFFF). You're now successfully using CSS in Dreamweaver. The only code that was changed was in the CSS and it was applied to both the <div> and the <img>.

cool class

background-color: #66FFFF;

 

Creating a Quick Nav Menu
Now with the content in the <div> tag we will break it apart and make it into a navigation list.

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.

<div class="coolclass">
<ul>
<li>Content</li>
<li> for</li>
<li> class</li>
<li>"coolclass"</li>
<li> Goes </li>
<li>Here</li>
</ul>
</div>

Click the add css button add css 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.

li {
font-weight: bold;
color: #FFFFFF;
list-style-type: none;
}

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 show all behaviors . 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.

li tag

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:

<div class="coolclass">
<ul>
<li onmouseover="this.className='coolclass';" onmouseout="this.className=''">Content</li>
<li onmouseover="this.className='coolclass';" onmouseout="this.className=''"> for</li>
<li onmouseover="this.className='coolclass';" onmouseout="this.className=''"> class</li>
<li onmouseover="this.className='coolclass';" onmouseout="this.className=''">"coolclass"</li>
<li onmouseover="this.className='coolclass';" onmouseout="this.className=''"> Goes </li>
<li onmouseover="this.className='coolclass';" onmouseout="this.className=''">Here</li>
</ul>
</div>

Before we end this tutorial we should set the cursor to a hand as it goes over the list like normal navigation would.
In the CSS Styles frame select li. At the bottom of the "Properties for "li" there is an "Add Property" link click on it and chose "cursor" from the drop down. Type in "pointer" as the value if it is not in the presets.

 

Conclusion
Press F12 and check what you've done. It probably won't look too pretty but it should give you a feel on how CSS in Dreamweaver works with HTML and what it does in your browser.

Play around and remember to have fun!

  View 3 Comment(s)

  Adobe Dreamweaver Tutorials   •   Adobe Dreamweaver Forum
Reply   Like  
Share on Facebook
Comments

Great tutoria!
by Abiodun Osunfisan
Abraham, thanks a lot for these tips on application of CSS. I'm new to web designing and web tools language codes but this has pushed me in the right direction. It has really demistified the concept of style sheets and now I can go further to unveil other sides of this tool.
wooow finally!!! i understoof css thank you
by Ana Garcia
the concept was blur to me finally with this tutorial I got it!!!!!!! thanks a lot please keep posting tutorials as basic as this one so we the beginners have a chance with DreamWaver
CSS Basics in Adobe Dreamweaver
by Don Lee
Cool tutorial. Using CSS is essential these days for good web design.


Related Articles / Tutorials:
Adobe Dreamweaver
Using PHP To Obtain Data from a MySQL Database

Using PHP To Obtain Data from a MySQL Database

Showing how to use PHP to access a MySQL database. Building a real world application, this tutorial is interesting in that it shows how to narrow a search based on 2 different criteria (2 different MySQL fields). Finally, this tutorial ends with giving complete code for an HTML page as well as the PHP files.

Tutorial
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 4

Working with Photoshop Slices in Dreamweaver - 4
  Play Video
In part 4 of this video tutorial series, Richard finalizes the web page inside of Dreamweaver. Topics covered in this tutorial are repeating background images, background color, site load speed up and expandable site construction.

Tutorial, Video Tutorial
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 1

Working with Photoshop Slices in Dreamweaver - 1
  Play Video
In part one of this video tutorial series, Richard Williams shows you the process of designing a website in Photoshop, exporting it as image slices and then importing the slices into Dreamweaver.

Tutorial, Video Tutorial
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 2

Working with Photoshop Slices in Dreamweaver - 2
  Play Video
In part two of this video tutorial series, Richard Williams explains how to export the rollover state of buttons from Photoshop and import them into Dreamweaver to then be applied to the site being designed from part one.

Tutorial, Video Tutorial
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 3

Working with Photoshop Slices in Dreamweaver - 3
  Play Video
In part three of this video tutorial series, Richard Williams shows how to convert images to background images and put text over the top of them inside of Dreamweaver. Richard then applies CSS styling to the HTML text to match it with the design created in Photoshop.

Tutorial, Video Tutorial
Adobe Dreamweaver
Spry Menu Explained

Spry Menu Explained

In this tutorial, CreativeCOW leader Richard Williams explains the principles of the Spry Menu and answers the most commonly asked questions.

Tutorial
Adobe Dreamweaver
Rollovers in Adobe Dreamweaver CS3Rollovers in Adobe Dreamweaver CS3

In this Dreamweaver CS3 tutorial, Abraham explores the capabilities of Dreamweaver to create dynamic rollover functions on a web page. What before might have taken special scripting is easily accomplished through a few slight alterations of the rollover behaviors built into Dreamweaver. Part two of this tutorial shows how to embed pop up videos into your web page.

Tutorial
Recent Articles / Tutorials:
NAB Expo
The Social Media at NAB

The Social Media at NAB

Finding the latest gadgetry and innovative technological advances at NAB Show is a great reason to converge with 98,000 or so of your closest friends and colleagues. Tech aside (and there was some COOL tech), social media has made a tremendous impact on the way we visit NAB - a subject that Walter Biscardi Jr. found intriguing.

Editorial, Feature, People / Interview
Adobe After Effects
mocha Tracks The Wolf of Wall Street

mocha Tracks The Wolf of Wall Street

Oscar-winning VFX Supervisor Rob Legato and Brainstorm Digital use mocha visual effects tools on Martin Scorsese's Wolf of Wall Street.

Editorial, Feature
TV & Movie Appreciation
Method Studios Creates Dramatic Effects for Divergent

Method Studios Creates Dramatic Effects for Divergent

Method Studios was selected as the lead VFX vendor, who ultimately proved to provide 381 shots for Summit Entertainment's Divergent. Set in a dystopian Chicago, one hundred years in the future, the film demanded seamless and invisible VFX to create a believable world of complex environments using set extensions, digital doubles and CG characters.

Editorial, Feature
MORE


FORUMSTUTORIALSFEATURESVIDEOSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

Creative COW LinkedIn Group Creative COW Facebook Page Creative COW on Twitter
© 2014 CreativeCOW.net All rights are reserved. - Privacy Policy

[Top]