Tutorial 3: Adding and Formatting Text

Tutorial 3: Adding and Formatting Text 2

ObjectivesSession 3.1• Type text into a page• Copy text from a

document and paste it into a page

• Check for spelling errors

• Create hyperlinks• Examine HTML tags for

hyperlinks

Session 3.2• Explore CSS styles and

style sheets• Modify HTML tags• Create custom style

classes• Create styles for the

<a> tag pseudoclasses

Tutorial 3: Adding and Formatting Text 3

Objectives (cont’d)Session 3.3• Create an external style sheet• Attach an external style sheet to a Web page• Edit styles• Delete styles• Examine the code for styles and style sheets• Examine HTML tags used to format text

Tutorial 3: Adding and Formatting Text 4

Adding Text to a Web Page• Two methods

– Type in workspace of Document window• Appropriate for adding small amounts of text or

text that will be heavily formatted– Copy and paste existing text from another file into

the workspace• Appropriate for adding a large amount of text• Check for and correct errors that were

introduced• Note: Obtain permission to reuse copyrighted

content

Tutorial 3: Adding and Formatting Text 5

Adding Text to a Web Page (cont’d)• Dreamweaver commands for pasting items

– Paste• Places only the text from the other document

without formatting; sometimes includes characters and styles

– Paste Special• Enables you to choose level of formatting to be

retained

Tutorial 3: Adding and Formatting Text 6

Checking the Spelling in Web Pages

Tutorial 3: Adding and Formatting Text 7

Using the Find and Replace Tool• Area to search

– Selected text– Current document– Open documents– Folder– Selected files in site– Entire current local

site

• Kind of search– Source code search– Text search– Text (advanced)

search– Specific tag search

Tutorial 3: Adding and Formatting Text 8

Using the Find and Replace Tool

Tutorial 3: Adding and Formatting Text 9

Using the Find and Replace Tool

Tutorial 3: Adding and Formatting Text 10

Formatting Text Using the Property Inspector• Adds CSS styles behind the scenes to control look

and layout of the text• Switches between HTML pane and CSS pane

– HTML pane• Add HTML tags to the page• Apply existing CSS styles to selected text• Set text formatting attributes by adding HTML

tags to selected text – CSS pane

• Create new CSS styles and edit existing ones

Tutorial 3: Adding and Formatting Text 11

Formatting Text Using the Property Inspector (cont’d)• HTML and CSS panes are often used together

– First create CSS styles to customize display of a tag in the CSS pane

– Then add the tag to selected text in the page from the HTML pane

Tutorial 3: Adding and Formatting Text 12

Creating Text Hyperlinks• Text hyperlinks enable users to

– Move between pages in a Web site– Connect to pages in other Web sites

Tutorial 3: Adding and Formatting Text 13

Adding and Formatting Hyperlink Text• Insert text for hyperlink on a blank line above page

heading• Separate each word with two nonbreaking spaces• Set size and alignment of inserted link

Tutorial 3: Adding and Formatting Text 14

Creating Links from Text• Use HTML pane of Property Inspector to connect

text with a specific file or Web page the first time; subsequently, Dreamweaver creates the link

• Types of links– Relative links (document relative; site root

relative)– Absolute links

• Create one page that includes navigation system and structural elements, then duplicate that page to create other pages in the site– Saves time; elements are created only once

Tutorial 3: Adding and Formatting Text 15

Exploring HTML Tags for Hyperlinks• Dreamweaver inserts HTML tags when you format

text and create hyperlinks• HTML tags come in pairs with opening and closing

tags– <tag>Some Text</tag>

• Nested tags– <tag2><tag1>Some Text</tag1></tag2>

• Tags may contain attributes (size, color, alignment), which are placed within the opening tag and are separated by a blank space– <tag color="x" size="x">Some Text</tag>

Tutorial 3: Adding and Formatting Text 16

Exploring HTML Tags for Hyperlinks• Reference sites for HTML tags

– www.w3.org – www.htmldog.com/reference/htmltags – www.devx.com/projectcool/Article/19816

• Keep styles separate from content– CSS styles can affect multiple elements and be

updated from a central location

Tutorial 3: Adding and Formatting Text 17

Exploring HTML Tags That Apply to Hyperlinks• Hyperlinks are created in HTML with the anchor tag

– <a href="absolute or relative path">Link Text</a>• Anchor tag attributes: target, name

Tutorial 3: Adding and Formatting Text 18

Evolving HTML and CSS Standards• Early days of the Web: limited control over display• Current standard for creating Web pages

– Extensible Hypertext Markup Language (XHTML): combination of HTML and XML

• HTML: Designed to display data• XML (Extensible Markup Language)

– Describes structure of the data it contains– Provides a common, flexible method for

electronic exchange of information

Tutorial 3: Adding and Formatting Text 19

Evolving HTML and CSS Standards (cont’d)• Shift from HTML 4.01 to XHTML 1.0 continues the

move toward separating style and content– XHTML structures the page content– CSS styles it for display

• World Wide Web Consortium (www.w3c.org) publishes recommendations for HTML standards

Tutorial 3: Adding and Formatting Text 20

Exploring Cascading Style Sheets• Created in response to limitations of HTML• Current standard for layout and formatting in Web

pages• Store styles that can be defined in one location, then

applied to content in many other locations• Collection of styles that is either internal or external

– Internal style sheet: Inserted in the head of the HTML of a Web page and used throughout that page

– External style sheet: Attached as an external document and used throughout the entire Web site

Tutorial 3: Adding and Formatting Text 21

Exploring Cascading Style Sheets (cont’d)• CSS styles

– Rules that define the appearance of an element in a Web page by redefining an existing HTML tag or by creating a custom style

– Control most aspects of Web page layout– Used by Dreamweaver by default to format page

elements; you can also create CSS styles yourself

Tutorial 3: Adding and Formatting Text 22

Creating CSS Styles• Use CSS Styles panel (in CSS panel group) to

choose:– Selector type: class, ID, tag, compound– Selector name– Location of the style: internal or external

• Parts of a CSS style– Selector: the name– Declaration: defines the attributes (type,

background, block, box, border, list, positioning, extensions)

Tutorial 3: Adding and Formatting Text 23

Modifying HTML Tags• Simplest way to create a CSS style• Style sheets are cascading

– Styles inherit attributes of higher-level tags– You can create general styles that affect the

entire page

Tutorial 3: Adding and Formatting Text 24

Modifying HTML Tags

Tutorial 3: Adding and Formatting Text 25

Modifying HTML Tags

Tutorial 3: Adding and Formatting Text 26

Modifying HTML Tags

Tutorial 3: Adding and Formatting Text 27

Modifying HTML Tags

Tutorial 3: Adding and Formatting Text 28

Creating and Applying Class and ID Styles• Build from scratch and give a unique name• Similar to redefining an HTML tag except you name

the style and specify the attributes• Class

– Applies to any selected HTML element– Has a period directly before the name

• ID– Can be used only once in a page– Has # directly before the name

Tutorial 3: Adding and Formatting Text 29

Examining the Anchor Tag Pseudoclasses• Pseudoclasses control a portion of hyperlink

functionality of the anchor tag– a:link– a:hover– a:active– a:visited

Tutorial 3: Adding and Formatting Text 30

Examining Code for Internal CSS Styles• Head of a Web page

– Portion of the HTML between the head tags– Actual code differs, based on whether you

created an internal style sheet or an external style sheet

Tutorial 3: Adding and Formatting Text 31

Viewing Code for Internal Style Sheets• When styles are defined in current document only,

the code is stored in an internal style sheet (also called an embedded style sheet)

• Embedded styles can be used throughout current Web page but not in any other page

• Every CSS style consists of two parts– Selector– Declaration

Tutorial 3: Adding and Formatting Text 32

Viewing Code for Internal Style Sheets

Tutorial 3: Adding and Formatting Text 33

Using External Style Sheets• Enables you to

– Separate style of the Web site from its content– Make stylistic changes throughout the site by

updating a single file

Tutorial 3: Adding and Formatting Text 34

Moving Styles to an External Style Sheet• Create a folder in the local root folder of the Web site• Save the external style sheet file with a descriptive

name within that folder• To move CSS styles to an external style sheet, the

Web page where the styles are currently located must be open

Tutorial 3: Adding and Formatting Text 35

Moving Styles to an External Style Sheet

Tutorial 3: Adding and Formatting Text 36

Deleting Styles from a Style Sheet• Styles moved to a new external style sheet are

automatically deleted from within the page; the page gets its formatting from the external style sheet

• When connecting existing external style sheet to a page– Move all styles from that page to external style

sheet– Then delete the styles from within the page

• When you delete internal styles from a page without connecting the page to an external style sheet, text and page properties return to default formatting

Tutorial 3: Adding and Formatting Text 37

Creating a Style in an External Style Sheet• Same process as creating a style in an internal style

sheet• Only difference:

– Choose style sheet by name in the Rule Definition list when you create the new style

Tutorial 3: Adding and Formatting Text 38

Viewing Code for External Style Sheets• External style sheets are also called linked style

sheets• Style sheet must be open to view all code for styles

located in an external style sheet• Link tags

– Appear within head of Web page; styles are located in style sheet, not in head of the Web page

– Do not include a closing tag or any style content information

– Only convey relationship information about the linked document

Tutorial 3: Adding and Formatting Text 39

Viewing Code for External Style Sheets

Tutorial 3: Adding and Formatting Text 40

Viewing Style Tags• When you select text and apply a class style,

Dreamweaver adds attributes of the style to the text by inserting additional code within the Web page– Adds attributes to an existing tag– Applies a class style to a block of text or block

level element• Div tag

– Applies a class style to a text selection• Span tag

Tutorial 3: Adding and Formatting Text 41

Editing CSS Styles• Any element to which the style is applied is updated

automatically to reflect the changes • Enables you to control the look of an entire Web site

from one centralized set of specifications• Dreamweaver tools for managing and editing styles:

– CSS Rule definition dialog box– Properties pane in CSS Styles panel– CSS pane in Property inspector

Tutorial 3: Adding and Formatting Text 42

Editing Styles in the CSS Rule Definition Dialog Box

Tutorial 3: Adding and Formatting Text 43

Editing Styles in the Properties Pane of the CSS Styles Panel

Tutorial 3: Adding and Formatting Text 44

Changing Text Appearance in the Property Inspector• Apply existing style to the text• Change HTML attributes of text in the HTML pane• Edit attributes of the CSS style applied to selected

element in the CSS pane

Tutorial 3: Adding and Formatting Text 45

Exploring HTML Tags Used with Text• Font (deprecated)• Italic• Emphasis• Bold• Strong• Unordered List• Ordered List

• Paragraph• Blockquote• Div• Pre• Break• Nonbreaking space• Basefont (deprecated)

Tutorial 3: Adding and Formatting Text 46

Formatting Text with HTML• Attributes and process are different from formatting

text using CSS styles• When text is formatted, HTML tags are added behind

the scenes• Text formatting properties: format, font, font size

(absolute and relative), font color, emphasis, alignment, lists, indents

Tutorial 3: Adding and Formatting Text 47

Updating a Web Site on a Remote Server• Upload only the files you have changed