CSS Basics in Adobe Dreamweaver
|A CreativeCOW.net Adobe Dreamweaver CSS Tutorial
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.
Cambria, California USA
©2007 CreativeCOW.net. All rights reserved.
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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
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.
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 . 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".
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:
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.)
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.
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.
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>.
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.
<li> Goes </li>
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:
<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>
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.
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!
|Related Articles / Tutorials:|
Bridging Web Design and Development with Adobe Extract
Adobe Extract, released in August 2014, is a feature in Photoshop 2014 CC, Dreamweaver 2014 CC and Creative Cloud that has the potential to transform the way web designers and developers work together. If the designer does have a Creative Cloud membership, it opens up a new possibility: uploading a PSD file (one received via email, for instance) to Creative Cloud and getting the assets and CSS information out to to your project.
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.
Spry Menu Explained
In this tutorial, CreativeCOW leader Richard Williams explains the principles of the Spry Menu and answers the most commonly asked questions.
|Rollovers 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.
|Recent Articles / Tutorials:|
Art of the Edit
TV Workflow Supervisor Kylee Peña: The Benefits of Pressure
TV workflow supervisor Kylee Peña (Jane the Virgin, Colony) visits Adobe's "Make It" talk show to chat with host Jason Levine about the evolution of motion picture workflows, from the days of film and tape to our modern digital world of crazy-high shooting ratios and constantly evolving technology. She also expounds on the upside to creative constraints and tight deadlines. And don’t miss the lightning round!!!
Feature, People / Interview
Grading The LEGO Batman Movie: Animal Logic and FilmLight
Following successful collaborations on The Matrix, Legends of the Guardians, and Happy Feet, Sydney's Animal Logic worked with Warner Bros on The LEGO Movie from pitch to proof of concept to post. Animal Logic has gone even further on the latest LEGO animated feature, The LEGO Batman Movie, where they were embedded with the production for over a year. The range of their work pushed every aspect of the Baselight system for editorial, VFX, and HDR not just for post, but for the entire production process.