Tutorial 3: Adding and Formatting Text

2 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 Session 3.2 Explore CSS styles and style sheets Modify HTML tags Create custom style classes Create styles for the tag pseudoclasses

Tutorial 3: Adding and Formatting Text3 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 Text4 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 Text5 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 Text6 Checking the Spelling in Web Pages

Tutorial 3: Adding and Formatting Text7 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 Text8 Using the Find and Replace Tool

Tutorial 3: Adding and Formatting Text9 Using the Find and Replace Tool

Tutorial 3: Adding and Formatting Text10 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 Text11 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 Text12 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 Text13 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 Text14 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 Text15 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 – Some Text Nested tags – Some Text Tags may contain attributes (size, color, alignment), which are placed within the opening tag and are separated by a blank space – Some Text

Tutorial 3: Adding and Formatting Text16 Exploring HTML Tags for Hyperlinks Reference sites for HTML tags – – – Keep styles separate from content –CSS styles can affect multiple elements and be updated from a central location

Tutorial 3: Adding and Formatting Text17 Exploring HTML Tags That Apply to Hyperlinks Hyperlinks are created in HTML with the anchor tag – Link Text Anchor tag attributes: target, name

Tutorial 3: Adding and Formatting Text18 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 Text19 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 ( publishes recommendations for HTML standardswww.w3c.org

Tutorial 3: Adding and Formatting Text20 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 Text21 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 Text22 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 Text23 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 Text24 Modifying HTML Tags

Tutorial 3: Adding and Formatting Text25 Modifying HTML Tags

Tutorial 3: Adding and Formatting Text26 Modifying HTML Tags

Tutorial 3: Adding and Formatting Text27 Modifying HTML Tags

Tutorial 3: Adding and Formatting Text28 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 Text29 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 Text30 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 Text31 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 Text32 Viewing Code for Internal Style Sheets

Tutorial 3: Adding and Formatting Text33 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 Text34 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 Text35 Moving Styles to an External Style Sheet

Tutorial 3: Adding and Formatting Text36 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 Text37 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 Text38 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 Text39 Viewing Code for External Style Sheets

Tutorial 3: Adding and Formatting Text40 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 Text41 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 Text42 Editing Styles in the CSS Rule Definition Dialog Box

Tutorial 3: Adding and Formatting Text43 Editing Styles in the Properties Pane of the CSS Styles Panel

Tutorial 3: Adding and Formatting Text44 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 Text45 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 Text46 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 Text47 Updating a Web Site on a Remote Server Upload only the files you have changed