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:
- 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.
- 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.
|
- 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.
- 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.
- 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.
- 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.
- 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.
- 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:
- Click to browse for the CSS.
- 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.
- 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:
- Window > CSS Style.
- CSS Style Panel appears
- Right mouse click
and choose Edit Style Sheet
- 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.
|
Class
1 / Class
2 / Class 3 / Class
4 / Class 5 / Class
6 / Class 7 / Class
8 / Class 9 / Class
10 / Terms
|