Search our Site: sitemap
EC106
Effective Communication
in New Media

Class 9

Practical Text

Topics:

Style

  • Style is a group of formatting attributes that control the appearance of a range of text.
  • HTML Style is great when used in a single document or for a section of text. Cascading Style Sheets can be used to control many documents at once.
  • The advantage of using CSS over HTML Style is that in addition to being linked to multiple documents, when a CSS is updated or changed, the formatting of all the documents related are automatically updated as well.
  • With HTML Styles, changes have to be made by reselecting that text and editing that style in each document.

HTML Style

  • Style can be chosen for your HTML documents and applied to a selection of text or to an entire pages.
  • We use style so that a document can have uniform text formatting.
  • The style created can be re-applied to any text in any document.

HTML Style Tags:

  • <font face="Arial, Helvetica, sans-serif" size="3" color="#000066">
    document</font>

HTML Style Panel:

Window > HTML Styles. This panel will assist to create new and implement existing styles.

  • New Style: Create New Style one of two ways:
    1. Select some text and edit it with the Properties Inspector.
      • Click the New Style icon on the bottom right of the HTML Styles Panel.
      • Name the Style, OK.
    2. Select the New Style button on the bottom right of the HTML Style Panel.
      • Edit your text attributes in the Define HTML Style window.
      • OK.
      • You can now apply this New Style to any text.
  • Define HTML Panel Specifics:
    • Apply To option:
      • Selection: applies style to the selected text.
      • Paragraph: applies style to the current block(s) of text.
    • When Applying option:
      • Add to Existing Style: adds changes to the existing style.
      • Clear Existing Style: clears the old and replaces with the new style.
    • Apply:
      • When checked Apply will apply the style when the icon is clicked, automatically.
      • Unchecked, applying the style of choice by clicking the Apply button.
  • Edit an Existing Style: Double click on that style name in the HTML Styles panel.
    • Opens the Define HTML Style window.
    • Edit style as needed.
  • Clear All Existing Style:
    • Iin the HTML Styles Panel, choose the default style Clear Selection Style (clears just the selection style {funny that] or Clear Paragraph Style to clear the paragraph style.
  • Remove Style Sheet:
    • In the HTML Style Panel, select the style to be removed.
    • Right mouse click the style.
    • Choose Delete
  • Apply Style:
    • Select the text to be styled
    • Click on the Style Name, desired, in the HTML Styles Panel
    • Apply.
  • New Style From Existing Style:
    • In the HTML Styles Panel, right mouse click the style to be templated.
    • Select Duplicate.
    • Rename the Style
    • Edit as needed
    • OK.

Cascading Style Sheets

  • A Style is a group of formatting attributes that control the appearance of a range of text in a single documents. A CSS style can be used to control many documents at once and includes all of the styles for a document.
  • Advantage over HTML Style:
    • Linked to many documents.
    • Editing the CSS automatically updates all the documents related to this style.

Specifics:

  • Reside in the HEAD tag.
    • <link rel="stylesheet" href="ccs/ec106.ccs" type="text/css">
  • Uses the CLASS attribute.
  • Supported by browser 4.0 or later.
  • Manual HTML formatting overrides CSS.
  • CSS is an external text file containing styles and formatting specifications.

Cascading Style Sheets HTML:

  • Reside in the HEAD tag:
    • <link rel="stylesheet" href="ccs/this.css" type="text/css">
    • <link rel="stylesheet" href="clients2001/ec106/web/ccs/this.css" type="text/css">
    • <link rel="stylesheet" href="clients2001/ec106/web/this.css" type="text/css">
  • Resides in the BODY tag, uses the CLASS attribute:
  • The VALUE is one of the styles in the Cascading Style sheet.
    • <span class="ec106_header">Cascading Style Sheets</span>
  • When you alter the look of text already affected by Cascading Style, the new tag takes president over the Cascading Style
    • <span class="ec106_header"><b>Cascading Style Sheets</b></span>

How do CSS work?

  • Like Templates, CSS are separate files created.
  • They control the style of each related document.
  • You develop each style.
  • Changes to the style affects any documents which has the same Cascading Style.
  • Once a CSS is set up, you can copy and paste it to new sites in DW4, where you can apply to any documents.

Three types of CSS:

  1. Custom CSS Styles:
    • Similar to the styles you use in a word processor.
    • You can apply this style to any range or block of text.
  2. HTML tag Styles:
    • Redefine the default formatting for a particular existing HTML tag, such as H1.
    • E.G.: When you create or change a CSS for the H1 tag, all text formatted with the H1 tag is immediately updated.
    • You use the same Format Selection, as you would in the Properties Inspector.
  3. CSS Selector Styles:
    • Redefine the formatting of existing HTML into combinations of tags.
    • E.G.: td h2 - a header 2 tag inside a table data tag.

Link or Create an External CSS in DW4:

  • Window > CSS Styles.
  • Right mouse click on the CCS Styles Panel.
  • Choose Edit Style Sheet.
  • In the Link External Style Sheet window, do one of the following:
    1. Click to browse for the CSS.
    2. Create a New CSS by entering a New File Name.
      • File name must start with a period "." and end with the extension .css
  • Select Link or Import options to specify and create the tag used to attach to external CSS.
    • Link accesses and relays the style specific without transferring it.
    • Import brings the style specifics into the current document.
  • OK.

Creating CSS:

  • Window > CSS Styles
  • Right mouse click on the window that appears.
  • New Style.
  • Name the Style, (must begin with a "." and end in .css)
  • Choose the type of CSS:
    • Make Custom Style
    • Redefine HTML Tag
    • Use CSS Selector.
  • Edit the CSS.
  • Choose OK to set the CSS.
  • Choose Apply..

Editing an External CSS: Editing an existing CSS makes live changes to the style of every page the CSS is related to.

  • Open a document that is linked to the external CSS you want to change.
  • Do one of the following:
    1. Window > CSS Style.
      • CSS Style Panel appears
      • Right mouse click and choose Edit Style Sheet
    2. Text > CSS Styles > Edit Style Sheet.
  • Edit Style Sheet window, select the name of the external style sheet
  • Click Edit.
  • Rename is needed.
  • Save the changes.

Attach an External CSS:

  • Window > CSS Styles
  • Right mouse click on the CCS Styles Panel.
  • Choose Attach Style Sheet.
  • Navigate to where the CSS is saved, select it.

Checking Spelling

  • Lucky, DW4 has a Spell Checker ready to assist us.
  • It can check the spelling for a selection of text and an entire page.
  • Cannot be used to spell check an entire site.

Open:

  • Text > Check Spelling
  • Opens Check Spelling Dialog Box.
  • DW4 begins checking the text for errors.
    • DW4 ignores HTML tags.
Class 1 / Class 2 / Class 3 / Class 4 / Class 5 / Class 6 / Class 7 / Class 8 / Class 9 / Class 10 / Terms