Dreamweaver:Cascading StyleSheets
Goals of the Workshop
This workshop seeks to introduce participants to Cascading Style Sheets (CSS) and howto apply them using Dreamweaver MX. At the conclusion of the workshop, participantsshould be able to:
•
Understand the benefits and limitations of CSS
•
Create an internal sheet
•
Create an external style sheet
•
Attach an external style sheet to a page
•
Design a basic page using CSS to control positioning rather than tables
A Bit of History
HTML was originally intended to identify elements of a web page, not to control how thepage looked on the screen. As the web evolved from a purely text-based medium to amore varied format, web designers wanted more control over the look of their pages.Eventually, HTML included more design elements (such as the ability to change fontcolors), but the process was still tedious for large sites.CSS was developed to address the needs of web designers to exercise greater control overhow their pages looked. It allows you to separate your content and your design in yourcode. Using CSS you can very easily make significant changes to how you pages look onall of the pages in your web site in a matter seconds. In addition, advanced users of CSScan exercise very precise control over the placement of elements on the page withouthaving to use tables. As a result, pages can load faster and CSS also allows web designersto break free of the “boxy” design that is often the result of designing with tables.However, there are problems with CSS. Not all browsers render CSS correctly. For achart showing which CSS elements are supported by which versions of Internet Explorerand Netscape Navigator visit this resource:http://www.w3schools.com/css/css_reference.asp
CSS at Work
Visit the following web site to get a sense of one way CSS is applied to easily anddramatically change the way a page is displayed:http://www.w3schools.com/css/demo_default.htm
Applying CSS
CSS can be applied in three ways:1.
Inline Style2.
Internal Style Sheet3.
Attached Style SheetUsing Inline Style to implement CSS negates many of the advantages of using CSS, sowe will not devote time to it in this workshop.
Creating an Internal Style Sheet
Open the page called sample.html in the workshop file folder. This illustrates a simplepage where the text identified by the HTML tag <H1> is displayed in a blue sans-serif font by nesting a font tag within each occurrence of the <H1> tag. Look at the sourcecode:<H1><FONT FACE=”sans-serif” COLOR=”#3366CC”>FirstTitle</FONT></H1>Using traditional HTML, each time the <H1> tag is used we have to nest the font tag toachieve the desired result. If we later decide that we would rather have the <H1> textdisplayed in red we would have to go through and manually change each font tag. UsingCSS makes the task much easier.Open Sample2.html in Dreamweaver. Let’s recreate the same effect using CSS.
ü
Go to Text > CSS Styles > New
ü
Choose
Tag
as theSelector type.
ü
Select
h1
from the dropdown list as the tag wewish to redefine.
ü
Select
This documentonly
as the location todefine in.
ü
Click OK
ü
The CSS Style DefinitionWindow will pop up.
ü
Type
sans-serif
in the Font box
ü
Type
#3366CC
in the Color box
ü
Click OK.
ü
The new effect is applied to all instances of the <H1> tag in the document.
Because we elected to define the style in this document only, Dreamweaver added somecode in our <HEAD> section of the document:<style type="text/css"><!--h1 {font-family: sans-serif;color: #3366CC;}--></style>If we wanted to change the style of the main text on the page we could repeat the processabove but define the <P> tag instead and end up with something like this:<style type="text/css"><!--h1 {font-family: sans-serif;color: #3366CC;}p {font-family: Georgia, "Times New Roman", Times, serif;color: #990000;}--></style>We are not limited, however, to simply redefining how HTML tags are displayed. CSSallows us to create custom styles that can be applied anywhere, regardless of the HTMLtag associated with the element we want to customize.
To Create a Custom Style
ü
Go to Text > CSS Styles > New
ü
Choose
Make Custom Style (Class)
as the Selector type.
ü
Type
.headline
ü
Select
This document only
as the location to define in.
ü
Click OK
ü
Change the font characteristics as in the illustration below:
of 00
Dream Weaver Cascading Style Sheets
a simplified guide to creating and implementing cascading style sheets in your web pages using dreamweaver 8
2,722 Reads
Info and Rating
| Category: | |
| Rating: | (1 Rating) |
| Upload Date: | 03/30/2009 |
| Copyright: | Attribution Non-commercial |
| Tags: |
Leave a Comment