Working with CSS in Dreamweaver

1
Working with CSS in Dreamweaver
An introduction to Dreamweaver CSS tools
designed to accompany CSS Magic, Tom Lehmans
presentation for the Library Training
Development Committee September 2005 Laurie
McGowan
2
CSS in Dreamweaver

• CSS Magic gives us a solid understanding of how
  to write and use
• code in developing Style Sheets and solving some
  typical display
• Problems.
• For those of us who already have access and use
  Dreamweaver,
• there are some very easy ways to create Style
  Sheets using the
• software tools. Of course it is always best to
  know and understand
• the code, but the Dreamweaver tools will enable
  you to quickly and
• easily create simple styles for more efficient
  web pages.

3
Learning Goals

• This is a brief and basic introduction to
  Dreamweaver tools that
• facilitate creation of Style Sheets.
• At the end of this lesson, you should be able to
• Access and apply Dreamweaver tools to quickly
  create a simple style sheet
• Access and apply Dreamweaver tools to edit an
  existing style sheet
• Access and apply Dreamweaver tools to delete a
  style sheet
• Access and use the CSS Reference support section
  of Dreamweaver

4
CSS in Dreamweaver

• Open a new blank html page

5
CSS in Dreamweaver

• Open a new blank CSS page

6
CSS in Dreamweaver

• Name and save both files to your personal www
  folder
• save the html page as yourname.html
• save the CSS page as yourname.css

7
CSS in Dreamweaver

• Open the html page. From the Window menu, choose
  Properties, CSS Styles
• and Tag Inspector.

Select Relevant CSS Tab in the Tag Inspector.
8
CSS in Dreamweaver

• Lets add some content to the .html page. It is
  fine to use design view if that
• is your preference.

9
CSS in Dreamweaver

• Note that there is no style applied at this point

10
CSS in Dreamweaver

• For this example, we are going to attach (or
  link to) an external style sheet.
• From the html page, click on the Attach Style
  Sheet icon in the CSS Styles
• window

11
CSS in Dreamweaver

• Use the browse function in the dialog box to
  select yourname.css

For this example, we will add the style sheet as
a link. Click OK.
12
CSS in Dreamweaver

• Now we see that the style sheet name appears in
  the CSS Styles Window

But no rules have been applied, as shown in the
Relevant CSS tab
13
CSS in Dreamweaver

• Lets start by styling the heading. In design
  view, Select the heading, then
• click on the New CSS Style icon.

The New CSS Style dialog box appears. Enter
.heading as the selector and click ok
14
CSS in Dreamweaver

• The CSS Style Definition dialog box appears.
  There are several categories.
• For this example, we will style type only.

15
CSS in Dreamweaver

• Select Type in the category column
• Fonts and other choices are available from the
  dropdown menus
• Hit OK

16
CSS in Dreamweaver

• Hmmm nothing has changed in design view
• The style displays in the CSS Styles window

And no rules here
But there is no style here
17
CSS in Dreamweaver

• The style heading now appears in the styles
  flyout menu in the Properties window.
• Select heading to apply the style to the
  selected text

18
CSS in Dreamweaver

• Now we can see the effect of styling in design
  view

19
CSS in Dreamweaver

• and also in the browser view

20
CSS in Dreamweaver

• Tab over to your css page. Dreamweaver has
  entered the code for the
• heading style

21
CSS in Dreamweaver

• Lets try to style our list. Tab back to your
  html page. Use the Properties
• Manager to make the personal interests into list
  items. Lets style the list to
• eliminate the bullets. Select the list items and
  hit the New CSS Style button

22
CSS in Dreamweaver

• Lets name the new style interests and this
  time choose the Advanced
• Selector Type option

23
CSS in Dreamweaver

• Select List in the Category column
• Lets get rid of the bullets in the Type box,
  select none
• Lets position this inside

24
CSS in Dreamweaver

• After you click ok, select interests from the
  style flyout menu in the Property
• Manager

25
CSS in Dreamweaver

• The bullets have disappeared

26
CSS in Dreamweaver

• Lets change the list style a bit. Select
  interests in the CSS Styles window.
• Click on the Edit styles icon to bring up the
  CSS Styles dialog box.
• Select List from the Category column
• Change the list type to circle

27
CSS in Dreamweaver

• Click ok to see the results of your edit

28
CSS in Dreamweaver

• Now lets delete the list style. Select
  interests in the CSS Style window. Click
• the Delete CSS Style icon.

29
CSS in Dreamweaver

• The list is back to where we started

30
CSS in Dreamweaver

• This is intended as a basic
• introduction to using CSS tools in
• Dreamweaver. It is possible to use
• CSS in Dreamweaver to create
• sophisticated and complex
• designs. Dreamweaver has a great
• Help section, with additional
• information about using CSS in the
• Dreamweaver environment. You
• can also get detailed information
• about CSS elements in the
• Reference section of the Code
• window.

31
CSS in Dreamweaver

• This book is a recommended reference resource for
  Dreamweaver users
• Dreamweaver MX 2004 bible / Author Lowery,
  Joseph Publication Indianapolis, IN Wiley
  Pub., 2004