Upload
randall-thornton
View
226
Download
0
Tags:
Embed Size (px)
Citation preview
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