1 / 19

Andy Rosenfeld Macromedia Solutions Engineer arosenfeld@macromedia

Creating Cascading Style Sheets (CSS) with Dreamweaver MX 2004. Andy Rosenfeld Macromedia Solutions Engineer arosenfeld@macromedia.com. Overview of Cascading Style Sheets.

yahto
Download Presentation

Andy Rosenfeld Macromedia Solutions Engineer arosenfeld@macromedia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating Cascading Style Sheets (CSS) with Dreamweaver MX 2004 Andy Rosenfeld Macromedia Solutions Engineer arosenfeld@macromedia.com

  2. Overview of Cascading Style Sheets Dreamweaver MX 2004’s user interface allows developers to edit CSS styles more easily than in previous versions of the product. In fact, using and creating CSS styles is an inherent part of the development workflow. A developer has to work hard not to use CSS. But before we get to actually using CSS, let’s understand the rules surrounding CSS.

  3. What We Will Cover Today’s Topics • CSS Overview • Introduction to Styles • Box Model • Positioning (CSS-P) • Creating CSS styles • Using the Property Inspector • Dreamweaver CSS code completion • New CSS Style dialog box • Combination Selectors • Attaching external style sheets

  4. DEMONSTRATION Templates with an External Style Sheet

  5. What is CSS? • Cascading Style Sheets, or CSS, govern the separation of presentation (style ) from actual content. • Cascading Style Sheets is a W3C standard • CSS 1 was ratified for use in December of 1996 • CSS 1 contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need • CSS 2 was ratified for use in May of 1998 • CSS 2 includes all of level 1 and adds absolutely positioned elements, page breaks, automatic numbering, right-to-left text and other things

  6. Reasons for slow adoption • As with many technologies, CSS has suffered from a slow adoption rate due to several key factors: • Limited (and varying) browser support • Limited tools for development • Today, all major browsers support CSS • Implementation still varies – but the differences are relatively slight, and they’re getting better… • With Dreamweaver MX 2004, designers and developers have a modern visual editor for CSS

  7. Benefits of CSS • CSS provides three key benefits to HTML designers and developers • Designs become easier to manage through the elimination of inline tags such as <font> - as well as the benefit of site-wide changes through the use of external style sheets • Pages render more quickly (when using CSS-P) through the elimination of nested <table> tags • Pages become more accessible (Section 508) to visitors using assistive technologies

  8. Basic CSS Definitions • A style rule,whichis a group of formatting properties identified by a single name, controls the formatting of a text block. This includes the font, the text size, the text color, and the line spacing, among other options. • A style sheet is a group of styles that define the way your web pages look. Advantages: Changing an attribute of a style results in instant reformatting of all the text controlled by that style. Style sheets can also be used to affect positioning of objects and images.

  9. Implementing CSS • There are three ways to use CSS in an HTML document • Inline – generally frowned upon <div id="Layer1" style="position:absolute; left:263px; top:79px; width:278px; height:261px; z-index:1"> • Local – style definitions are contained in the head section of the HTML document <head><title>My Document</title><style type="text/css"><!—body,td,th {font-family: Arial, Helvetica, sans-serif;}--></style></head> • External – styles are defined in a separate CSS file and linked to from one or more pages in the site <head><title>Product Support</title><link href="assets/gs_styles_intl.css" rel="stylesheet" type="text/css"></head>

  10. CSS Style Types • There are three main “types” of styles • Tag definition • Defines the appearance of every instance of a given tagh1 {font-family: Arial, Helvetica, sans-serif;font-size: 1.4em;font-weight: bold;} • Class definition • Defines the appearance of the container to which it is assigned.content {font-size: 1em;margin-right: 12px;margin-left: 12px;} • ID definition • Defines the appearance of a unique container on the page#navigation {background-color: #999999;width: 750px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #000000;}

  11. DEMONSTRATION Different ways to create styles sheets: • Manually • Property Inspector • New CSS Style dialog • Relevant CSS panel

  12. Cascading Order vs. Inheritance • The cascading order of styles determines what style appears on your page when you have multiple style rules applied. • An linked external style sheet is applied across a document. The order of precedence if more than one style is applied to the same tag is: • Inline style • Internal style • External style

  13. Cascading Order vs. Inheritance - Example An external style sheet linked to a page with this rule: p {font-family: sans-serif; color: blue } In the same page, an embedded style sheet with its own rule for paragraphs: p {font-size: 14pt; color: green } A paragraph in the page would have following style: • Sans-serif font (specified in the external style sheet) • 14 point font-size (specified in the embedded style sheet) • The color green (the value specified in the embedded style sheet takes precedence over the value in the external style sheet)

  14. Box Model

  15. The joy of <div> tags • The key to successfully designing with CSS is to DIVide it up! • The <div> tag is used to define page elements or “containers” – although all HTML tags are actually containers, as well. • You can think of a <div> tag as a table cell that doesn’t have to be in a table • By default, only a single <div> tag can exist on any horizontal band, or line. The float attribute removes the <div> tag from the flow of the document and allows other elements to flow around the <div>. • Elements, such as the <div> tag, can also be positioned using the position attribute. There are four options for position: absolute, relative, fixed, static.

  16. Table-less Design • For a completely table-less design, or CSS-P design, all of the presentational HTML tags should be removed from the page: • <table>, <td>, <tr>, <th> • These tags will be replaced through the use of the <div> tag, with either a class or an ID assigned to the <div> • <font> • Text styling will be done through the use of either a tag definition, class or ID • Presentational attributes such as cellpadding, alignment, color and backgrounds • These attributes become part of the tag definition, class or ID

  17. DEMONSTRATION Table-less design

  18. Getting Started with Cascading Style SheetsAdditional Resources • Dreamweaver’s home on the web • www.macromedia.com/software/dreamweaver • More information and tours of Dreamweaver MX 2004 • www.macromedia.com/ondemand • CSS tutorials and samples • www.macromedia.com/devnet/topics/css.html • Official CSS specifications • www.w3c.org/style • To buy Dreamweaver MX 2004 • www.macromedia.com/store

  19. Thank you for your participation…

More Related