Page 292 - DCAP109_GRAPHIC_TOOLS

Unit 12: Dreamweaver – Layers and Style Sheets

12. CSS styles are defined within the …………………… tag. Notes
13. The term …………………… in CSS refers to how many style sheets can affect a single
document in a cascading manner.

14. The CSS …………………… helps you assign certain properties to a specific HTML tag.
15. If you want to apply the same styles to more than one page, you can create an
…………………… style sheet and link to several Web pages.

Case Study Spry Periodic Table

he Spry periodic table takes advantage of many Spry techniques that the Spry
community might be interested in. This document steps through the code section
Tby section and explains the thinking and methods behind the code. Since this demo
gets away from our common use patterns, it may serve to expand the ways in which Spry
can be used on pages.
You can explore a working version of the Spry periodic table on Adobe Lab.
Basic Functionality
The Spry Periodic Table uses an HTML data set to populate the periodic table. The actual
data source table is on the same page. This allows the page to load faster, allows the page
to degrade gracefully, and gives search engines content to index. HTML tables are easier
to create and edit than XML and you can use visual editors to modify them.
We then use Spry:repeats and Spry:regions, plus a good use of CSS classes to position
things so they look like a periodic table. These classes are also used to highlight the
different sections of the table via the links.
The tooltip widget is used with a detailregion to provide additional information when
mousing over an element.
The Data Table
The data table, located at the bottom of the page, is an HTML table:

No Atomicweight Name Symbol MP BP Density
1 1.0079 Hydrogen H –259 –253 0.09

2 4.0026 Helium He –272 –269

The header row is used as the data reference names used throughout the page. We use No
(atomic number) frequently as a unique ID. We also use Group, Period, and Element_Type
for additional functionality, explained later.
Using an HTML table made it easy to add columns for additional data points and to find
elements quickly.

Setting up the Page
As with all Spry pages, you need to attach files so you can get started.

Contd...

LOVELY PROFESSIONAL UNIVERSITY 285