formatting content

Goals: This session will introduce two methods of formatting and managing content of a site. The first method, library items, is specific to Dreamweaver. Library items are used to manage repetitive content between pages. The second method, cascading style sheets (CSS), is a standard method of controlling the formatting and placement of content. In the exercise, we will implement both methods into our site.

  1. Library Items
  2. Style Sheets
  3. Formatting Documents With Style Sheets
  4. Applying Styles
  5. ID vs. Class Styles
  6. Tables vs CSS Structures
  7. Fixing Conflicting Styles
  8. Find & Replace
  9. Exercise

library items

Library items are used to manage content repeated across many pages on a site. Examples of library items may be a navigational element like "Return to Home," contact information like email address, phone number and/or hours, or data that is relevant to several pages. When a library item is placed in a document, Dreamweaver inserts a copy of the HTML source code for that item into the document, and adds an HTML comment containing a reference to the original, external item.

Dreamweaver stores library items in a Library folder within the local root folder for each site.

creating a library item

Select a portion of a document to save as a library item.

  1. Choose Modify | Library | Add Object to Library.
  2. Enter a name for the new library item.
  3. Each library item is saved as a separate file (with the file extension .lbi) in the Library folder of the site’s local root folder.

inserting a library item in a document

When a library item is added to a page, the actual content is inserted in the document along with a reference to the library item.

  1. Place the insertion point in the Document window.
  2. Choose Window | Assets.
  3. In the Assets panel, click on the Library icon. The library icon
  4. Drag a library item from the Assets panel to the Document window, or select an item and click the Insert button.

To insert the contents of a library item without including a reference to the item in the document, press Control (Windows) or Option (Macintosh) while dragging an item out of the Library category of the Assets panel. If an item is inserted in this way, the item can be edited in the document, but the document won’t update when the the library item is changed.

style sheets

Cascading style sheets (CSS) make it easy to manage the formatting of a web site. A style sheet is a document that can be used to control the appearance of objects on a page or throughout a site. A style sheet can be designed and redesigned, and can control the formatting of hundreds of pages, including fonts, link colors, margin settings and background images. A site can have multiple style sheets, allowing for both flexibility and control over the layout of content.

Use embedded styles to format a single document, or use an external style sheet (that is, one that is stored externally and linked to the current document) to control several documents at once.

We recommend the use of an external style sheet when designing a site. This requires a text file, with an extension of .css, containing all the relevant style sheet information be created. We will use Dreamweaver's Style Editor interface to create css files. For any document to use the style sheet, an embedded link to the style sheet must be made in the head of the document.

The World Wide Web Consortium is responsible for the cascading style sheets specification that defines style properties (for example, font, color, padding, margin, word spacing) controlling the appearance of elements. For detailed information on cascading style sheets, please refer to the World Wide Web Consortium http://www.w3.org/Style/

formatting content with style sheets

A style sheet includes all of the styles for a document. Styles consist of a list of elements, attributes and values that control the way an object appears on the screen. Styles in HTML documents can control most of the traditional text formatting attributes such as font, size, and alignment. They can also specify unique HTML attributes such as positioning, special effects, and mouse rollovers. The style sheet, ssc.css referred to by all documents in this site, is a perfect example. In the following screen shot, ssc.css dictates all formatting attributes for the documents contained in this site.

edit style sheet dialog box

Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS guidelines. Style Sheets work in 4.0 and later browsers. Internet Explorer 3.0 recognizes some style attributes, but most earlier browsers ignore them. For a list of browser support for cascading style sheets, visit the WestCIV CSS Browser Support List.

Two important features of CSS are "cascading" and "inheritance." These features dictate the manner and order in which styles are applied to a document.

Cascading refers to the four different orderings in which styles are applied to a page:

  • Origin: styles which are closest to the object are applied first (example: inline styles are applied over document-wide styles)
  • Class: if a tag is assigned a specific class, it will be applied over any general properties of that tag
  • Specificity: specific styles are applied over more general ones (example: a style for an ordered list within an unordered list will be applied over a style for unordered lists)
  • Order: styles defined later within the style sheet will override earlier ones

Inheritance is the automatic application of some styles underneath a "parent" tag. In other words, if an html tag lies within a tag to which a style is applied, it will inherit that style. Tags which do not inherit include background colors, as well as positioning properties such as margin and padding.

For example, if a <font> is applied to the <body> of a page, all of the text tags within the body will inherit that font (headers, paragraphs, links, etc.). While there is no need to apply the font style to any other tags within the body, recall that the cascading rules allow for the application of different fonts to more specific tags (such as headers).

There are three types of styles in Dreamweaver:
New CSS rule dialog box

  1. HTML tag selectors redefine the formatting for a particular tag, such as H1. When a style for the H1 tag is created, all the text with the H1 tag immediately changes. HTML tag styling is the most reliable method of formatting content, as these styles are supported across all browsers that support cascading styles sheets. For a list of all HTML tags, visit the W3C's Index of HTML Elements.
  2. Custom class selectors. Unlike HTML type selectors, which change every instance of an element, class selectors can be applied to content to affect a specific instance of an element.

    For example, the h1 tag is styled to use (Arial Black, 30 point, blue.) One instance of the h1 may need to be styled with (Arial Black, 20 point, red.) A custom class called "blue_header" can be created. This instance would appear as:
    <h1 class="blue_header">Migration Patterns</h1>

    Class selectors can also be applied to inline content using a span tag. In the middle of a paragraph, keystroke commands may want to be formatted in (Arial, 15 point, italic, yellow.) A custom class called "keystroke" can be created. Select each keystroke command and apply to custom class. The code will look like:
    <p>Press the <span class="keystroke">ENTER</span> key to accept the entered value.</p>

  3. Advanced selector styles are used in several ways. They are used to redefine link behaviors (a:link, a:active, a:hover, a:visited,) They can be used to redefine html tag attributes, such as the DIV tag ( <div id="sidenavbar"> or <table id="data">.) Also used to control pseudo-elements such as (:first-line and :first-letter).

creating styles

The Style Editor is used to create any style declaration. There are many attributes that can be controlled in style sheets, however, some browsers do not support them. When starting out with style sheets, it is best to keep to basic control elements such as font, font size, font color, background color, and margin control.

The three categories we use are: Type, Background and Box.

  • Type - Used to specify the font, font color, font size, and font attributes
  • Background - Used to control for the background color or background image
  • Box - Used to control for table padding and margin setting

css style definition dialog box

applying styles

When an HTML tag or CSS Selector is declared, these styles are automatically applied. When a class code is declared, it must be applied to an object.

There are three ways to apply a style:

html tags

An HTML tag can be selected and have a style applied to it. This works to apply a class to an entire paragraph or header, for example. Instead of clicking and dragging to select the text, select the HTML tag in the tag selector at the bottom of the authoring screen. Tag selection is a much more exact method of application of custom styles.

  1. Select the tag from the Tag Selection Bar.
  2. Choose style to be applied from the Styles box in the Properties window.

Example:
<h1 class="sessionname">Introduction to Biology</h1>

span class

Select an area of text by clicking and dragging and applying a style will create a span class. To apply a span class:

  1. Select the word or words.
  2. Choose style to be applied from the Styles box in the Properties window.

Example:
<p>The hills are alive with <span class="title">The Sound of Music</span>.</p>

div tags

A div tag defines a block of content to be formatted. Div tags can be defined through an ID or a class attribute. Only one object on a page can be assigned the same id attribute, while multiple objects can have class attributes. To apply an id or class,

  1. Select the div from the Tag Selection Bar.
  2. To apply a style to the div, choose the div name from the Styles box in the Properties window.
  3. To apply an ID to a div, choose the div name from DIV ID menu in the Properties box.

Examples:
<div id="navbar"></div>
<div class="navbar"></div>

id or class

ID and class can both be used to specify formatting of an object. Below are some guidelines to help determine which option is best.

  1. Making style decisions requires complete understanding of all formatting needs of the site. Map out all formatting requirements.
  2. If there are formatting needs that will repeat themselves within a giving document, classes are required.
  3. If a formatting need exists only once, id's should do the job.
  4. If there are are a number of classes related to the same task, such as a navigational menu, they can grouped into an id and applied to the entire object using a div id.
  5. Classes allow for stacking of styles. If an object requires multiple styles applied, classes are best.
    Example: <p class="example large_font">warning: content will be deleted"</p> This applies two class styles (example and large_font) to the text.
  6. If there are conflicts in styles, id styles trump class declarations.
    Example: A div id declares a font to be blue and a class applied to a <p> tag within the div declares it red, the div id will win and the text will be blue.

tables vs css structures

There is a great deal of movement in the direction of using cascading styles instead of table structures for structural control of web site content. While css-based structural control still depends on users using browsers that support css styles, we find this to be true of most users today. Additionally, steps can be taken to make css-based web pages as accessible as table-based pages -- even more so, in some cases. That said, css-based structural pages are still an advanced task that requires a good deal of understanding of the complexities of styles sheets. We introduce the topic here to show the differences and abilities of these two approaches.

Below, we have two examples of the Science Support Center web site we develop in this series.

additional resources

fixing conflicting styles

If a style definition is created and it is not displaying correctly, chances are there are competing formatting declarations. If an HTML tag is defined in a style sheet, for example, and a font attribute embedded in the HTML, the HTML will override the style sheet. The rule to remember is:

"Whatever is closest to the source wins."

When conflicts between style declarations within style sheets exist, all elements are compared and an hierarchy is applied. The process of sorting out conflicts work as follows:

  1. All style declarations for a given object are documented. The author's style sheet, the browser's style sheet and the user's style sheet are compared.
  2. The author's style sheet will outweigh browser or user style sheets unless an !important declaration is used in the user's style sheet.
  3. Div id declarations will be weighed higher than class style declarations.
    Example: div#content h1 declares all H1's within that div to be formatted as gold. A custom class of .blue that declares the color to be blue is attached to an h1 within the div. The H1 will remain gold, as the id style trumps the class style declaration.
  4. If two declarations for the same object exists in the style sheet. the last one will be used.

find and replace

If conflicting CSS/HTML styles exist, it is necessary to remove the code closest to the source for the style sheet to work. Use the Dreamweaver Find and Replace feature.

find and replace dialog box

The current document, selected files, a directory, or an entire site can be searched for text, text surrounded by specific tags, or HTML tags and attributes.

Choose Edit | Find and Replace.

In the Find or Replace dialog box, use the Find In option to specify which files to search:

  • Current Document confines the search to the active document.
  • Entire Local Site expands the search to all the HTML documents, library files, and text documents in the current site.
  • Selected Files in Site confines the search to the files and folders that are currently selected in the Site panel.
  • Folder confines the search to a specific group of files. After choosing Folder, click the folder icon to browse to and select the directory to be searched.

Use the Search For option to specify the kind of search to be performed. For removal of font codes, choose Specific Tag. (Other options are listed below)

  • Source Code searches for specific text strings in the HTML source code.
  • Text searches for specific text strings. A text search ignores any HTML that interrupts the string. For example, a search for the black dog would match both the black dog and the <i>black</i> dog.
  • Text (Advanced) searches for specific text strings that are either within or not within a tag or tags. For example, in a document that contains the following HTML, searching for tries not inside <i> would find only the second instance of the word.

    John <i>tries</i> to get his work done on time, but he does not always succeed. He tries very hard.

  • Specific Tag searches for specific tags, attributes, and attribute values, such as all td tags with align set to top.

When searching for a specific tag, Attributes can be replaced. In the case of removal of the font tag, we have no attributes, so click the "minus" button.

  • In the Action menu, choose Strip Tag. This will remove the tag but leave the text around it.
  • Click Find All to get a list of all occurrences of the search string.
  • Click Replace All to replace all occurrences of the search string.

advance to exercise