CSS Styles and Sprys

1
CSS Styles and Sprys

• Web Page Design

2
Cascading Style Sheets (CSS)

• Cascading Style Sheets can easily apply
  consistent formatting to your web pages.
• You can create styles that only go to one page or
  that can be attached to any page.
• If you change a CSS style, Dreamweaver will
  automatically update everything that has that
  style applied to it.
• The CSS Styles Panel can be found in the Design
  Panel group. If you lose it, go to Window, CSS
  Styles.
• You will have fewer problems with CSS styles if
  you turn off div tags for centering. To do this,
  go to Edit-gtPreferences. Then click on Code
  Format. Where it say "Centering" check the box
  next to "Use CENTER Tag."

3
Creating Cascading Style Sheets

• To create a new CSS style, Click on the New CSS
  Style button at the bottom of the Design Panel.
• To apply a style to a block of text, select
  Class. Give your style a name.
• To apply a style to a certain tag, select Tag,
  and choose the tag you want.
• Choose "New Style Sheet File" and save your file
  in the same folder as your page. Give your file a
  name. All CSS files end in .css!
• Only choose "this document only" if you don't
  plan on using your style in other pages.
• Select your formatting options from the dialog
  box.
• To apply your style to a block of text, select
  the text that you want to be in that style, and
  choose the style in the Properties Panel.
• To apply your style to a certain tag, you must
  actually use the object/property that the tag
  refers to. For example, if you made a style for
  the table tag you must actually put a table on
  your page!
• To edit a style, double click on its name in the
  CSS Panel.

4
Attaching Cascading Style Sheets

• To attach a CSS file, Click on the Attach CSS
  Style button at the bottom of the Design Panel.
  Make sure Link is selected.
• You can browse for one that already exists,
  create your own, or choose from sample style
  sheets.
• If you selected "this document only" when you
  created your style, but you decide that you want
  to be able to use it in other web pages, you
  should right click the style and go to Move CSS
  Rules. Browse for a CSS file that already
  exists, or create a new one.

5
Sprys

• To view the different Spry widgets, Click on
  the Layout Tab. They are the four buttons with
  the little red circles.
• There are four widgets-Menu Bar, Tabbed Panels,
  Accordion, and Collapsible Panels.
• To change the properties of widgets, you can go
  to the Properties panel.
• Some properties can only be changed through the
  CSS panel. To edit these properties, click on
  the CSS tab (after the widget has been inserted)
  and choose ALL (located in upper right corner).

6
Accordion Panel
An Accordion widget is a set of collapsible
panels that can store a large amount of content
in a compact space. Site visitors hide or reveal
the content stored in the accordion by clicking
the tab of the panel. The panels of the accordion
expand or contract accordingly as the visitor
clicks different tabs. In an accordion, only one
content panel is open and visible at a given
time.
7
Accordion Panel

• .Accordion
• Used to change border around entire panel
• .AccordionPanelTab
• Background color and font of unselected panel
  tabs for unselected Collapsible Panels
• .AccordionPanelContent
• Manual adjustment of height of Content Box,
  background color and font of Content Box
• .AccordionPanelOpen.AccordionPanelTab
• Background color and font of selected panel tab
  for an unselected Collapsible Panel
• .AccordionPanelTabHover
• Background color and font of unselected panel
  tabs of unselected Collapsible Panels
• when MOUSE IS HOVERING OVER them
• .AccordionPanelOpen.AccordionPanelTabHover
• Background color and font of selected panel tab
  of an unselected Collapsible Panel
• when MOUSE IS HOVERING OVER it
• .AccordionFocused.AccordionPanelTab
• Background color and font of unselected panel tab
  for a SELECTED Collapsible Panel
• (that means we have clicked on the panel)
• .AccordionFocused.AccordionPanelOpen.AccordionFocu
  sed.AccordionPanelTab
• Background color and font of selected panel tab
  for a SELECTED Collapsible Panel (that

8
Tabbed Panel

• A Tabbed Panels widget is a set of panels that
  can store content in a compact space. Site
  viewers hide or reveal the content stored in the
  Tabbed Panels by clicking the tab of the panel
  they want to access. The panels of the widget
  open accordingly as the visitor clicks different
  tabs. In a Tabbed Panels widget, only one content
  panel is open at a given time.

9
Tabbed Panel

• .TabbedPanels
• Adjust Width Of Widget, adjust border, font, and
  background
• color
• .TabbedPanelsTab
• Adjust background color and font of non-selected
  tabs
• .TabbedPanelsTabHover
• Adjust background color and font of non-selected
  tabs when
• the mouse rolls over
• .TabbedPanelsTabSelected
• Adjust background color and font of selected tab
• .TabbedPanelsContentGroup
• Adjust background color and font of content area
  (will be same
• for ALL tabs)

10
Collapsible Panels
A Collapsible Panel widget is a panel that can
store content in a compact space. Users hide or
reveal the content stored in the Collapsible
Panel by clicking the tab of the widget.
11
Collapsible Panels

• Property Inspector
• Default state how it will appear when the
  page is loaded
• Display how it will appear while you are
  editing your webpage
• .CollapsiblePanelTab
• Set background color and font of UNSELECTED tab
• .CollapsiblePanelContent
• Background color and font for content area
• .CollapsiblePanelOpen
• Tab color and font of an unselected open tab
• .CollapsiblePanelTabHover
• Tab color and font when mouse is rolled over
• .CollapsiblePanelTabFocused
• Tab color and font of most recently clicked tab
  (open or
• closed)

12
Menu Bar
A Menu Bar widget is a set of navigational menu
buttons that display submenus when a mouse
pointer hovers over one of the buttons. Menu Bars
let you display a large amount of navigational
information in a compact space, and also give
visitors to the site a sense of what is available
on the site without having to browse it
extensively.
13
Menu Bar

• ul.MenuBarVertical a
• Text color and background color (not selected
• or mouse over)
• ul.MenuBarVertical a.MenuBarItemHov
• Text color and background color (mouse over)