Transcript NP Dreamweaver - Deptford Township Schools

Tutorial 3: Adding
and Formatting Text
Objectives
Session 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
Tutorial 3: Adding and Formatting Text
Session 3.2
• Explore CSS styles and
style sheets
• Modify HTML tags
• Create custom style
classes
• Create styles for the
<a> tag pseudoclasses
2
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
3
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
4
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
5
Checking the Spelling in Web
Pages
Tutorial 3: Adding and Formatting Text
6
Using the Find and Replace Tool
• Area to search
– Selected text
– Current document
– Open documents
– Folder
– Selected files in site
– Entire current local
site
Tutorial 3: Adding and Formatting Text
• Kind of search
– Source code search
– Text search
– Text (advanced)
search
– Specific tag search
7
Using the Find and Replace Tool
Tutorial 3: Adding and Formatting Text
8
Using the Find and Replace Tool
Tutorial 3: Adding and Formatting Text
9
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
10
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
11
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
12
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
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
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
22
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
23
Modifying HTML Tags
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
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
28
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
29
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
30
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
31
Viewing Code for Internal Style
Sheets
Tutorial 3: Adding and Formatting Text
32
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
33
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
34
Moving Styles to an External Style
Sheet
Tutorial 3: Adding and Formatting Text
35
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
36
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
37
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
38
Viewing Code for External Style
Sheets
Tutorial 3: Adding and Formatting Text
39
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
40
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
41
Editing Styles in the CSS Rule
Definition Dialog Box
Tutorial 3: Adding and Formatting Text
42
Editing Styles in the Properties
Pane of the CSS Styles Panel
Tutorial 3: Adding and Formatting Text
43
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
44
Exploring HTML Tags Used with
Text
•
•
•
•
•
•
•
Font (deprecated)
Italic
Emphasis
Bold
Strong
Unordered List
Ordered List
Tutorial 3: Adding and Formatting Text
•
•
•
•
•
•
•
Paragraph
Blockquote
Div
Pre
Break
Nonbreaking space
Basefont (deprecated)
45
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
46
Updating a Web Site on a Remote
Server
• Upload only the files you have changed
Tutorial 3: Adding and Formatting Text
47