1. XP Dreamweaver MX 2004 Tutorial 3 1 Adding and Formatting Text

2. XP Dreamweaver MX 2004 Tutorial 3 2 Adding and Formatting Text In this tutorial, you will: –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

3. XP Dreamweaver MX 2004 Tutorial 3 3 Adding and Formatting Text In this tutorial, you will (cont’d): –Explore CSS styles and style sheet –Modify HTML tags –Create custom style classes –Create styles for the tag selectors

4. XP Dreamweaver MX 2004 Tutorial 3 4 Adding and Formatting Text In this tutorial, you will (cont’d): –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

5. XP Dreamweaver MX 2004 Tutorial 3 5 Adding Text to a Web Page Text is very important to your Web page and should be error free and clear. You can add small amounts of text by typing right in the Dreamweaver work area of the Document window. You can add larger amounts of text by cutting and pasting from another program such as a word processor that does a better job of clearing errors. Dreamweaver also has a built in spell checker.

6. XP Dreamweaver MX 2004 Tutorial 3 6 Adding Text to a Web Page Text copied from a Word Document

7. XP Dreamweaver MX 2004 Tutorial 3 7 Adding Text to a Web Page Spell checking the entered text

8. XP Dreamweaver MX 2004 Tutorial 3 8 Formatting Text Using the Property Inspector Text formatting in Dreamweaver is similar to text formatting in a word processor except that Dreamweaver adds CSS styles that control the look and layout of the text. Text formatting is done using the Properties inspector. There are several groups of attributes: –Format attributes – list of HTML tags for text formatting, including paragraph and heading tags. –Font attributes – list of available fonts.

9. XP Dreamweaver MX 2004 Tutorial 3 9 Formatting Text Using Font Tags There are several groups of attributes (Cont’d): –Font size attributes – list of available font sizes. The list is relative to a base font size (defaults to size 3) There are seven absolute font sizes (1 to 7) where 7 is the largest. There are also fourteen relative font sizes which add or subtract from the base font size. Relative font sizes are usually best because they keep the fonts proportional in all browsers. –Font color attributes – available colors

10. XP Dreamweaver MX 2004 Tutorial 3 10 Formatting Text Using the Property Inspector Properties Inspector for Unformatted Page Name Text

11. XP Dreamweaver MX 2004 Tutorial 3 11 Formatting Text Using the Property Inspector Formatted Page Name

12. XP Dreamweaver MX 2004 Tutorial 3 12 Creating Text Hyperlinks Hyperlinks allow you to navigate between pages in a Web site and to other Web sites. Once the hyperlinks are created, you will copy the links to the rest of the pages in the site. To add more than one space between words you will need to use a nonbreaking space, which are special, invisible characters used to create more than one space between text and other elements.

13. XP Dreamweaver MX 2004 Tutorial 3 13 Creating Text Hyperlinks Link Text Typed in the Bands Page Fig. 3-8

14. XP Dreamweaver MX 2004 Tutorial 3 14 Creating Links from Text When your links are in place and formatted, you can then convert them to hyperlinks by using the Properties inspector to associate the text with a particular file or Web page. If you know it, you can also type the URL into the Link text box. Within your Web site, you will use document relative links which only specify the path from the current page.

15. XP Dreamweaver MX 2004 Tutorial 3 15 Creating Links from Text Site root relative links specify a path from the root folder to the linked document. These are used on more complex sites. When you link to a page in another site, you will use an absolute link which includes the entire URL. When you copy the navigation system to other pages of the site, you will not have to create additional links.

16. XP Dreamweaver MX 2004 Tutorial 3 16 Creating Text Hyperlinks Select File Dialog Box

17. XP Dreamweaver MX 2004 Tutorial 3 17 Creating Text Hyperlinks Label text converted to a hyperlink

18. XP Dreamweaver MX 2004 Tutorial 3 18 Creating Text Hyperlinks Creating a hyperlink using the Point to File Button

19. XP Dreamweaver MX 2004 Tutorial 3 19 Exploring HTML Tags for Hyperlinks HTML tags come in pairs surrounding the text: Some text Tags can be used together, or nested: Some text Tags can also contain attributes within the opening tag: Some Text Reference sites for HTML tags include: Hotwired.lycos.com/webmonkey and w3.org

20. XP Dreamweaver MX 2004 Tutorial 3 20 Exploring HTML Tags for Hyperlinks Hyperlinks are created in HTML using an anchor tag formatted: Link Text Absolute, document relative, and site root relative links have different paths of information in the hypertext reference (“href”) attribute.

21. XP Dreamweaver MX 2004 Tutorial 3 21 Exploring HTML Tags for Hyperlinks Anchor Tags for Absolute and Relative Links LinkAnchor tagDescription Absolute Specifies the absolute or Text link to a Web page outside current site complete path to the linked page. Document Relative Text link to anotherSpecifies the location of the linked page page within current site relative to the current page. Commonly used. Site Root Relative TextSpecifies the location of the linked page link to another page within current site relative to the root folder. Used sometimes when sites have a lot of subfolders within the root folder and change frequently.

22. XP Dreamweaver MX 2004 Tutorial 3 22 Exploring HTML Tags for Hyperlinks The target attribute specifies where the link opens- in the current browser window or a new browser window. The default is for the new page to be opened in the current browser window, replacing the page from which you linked.

23. XP Dreamweaver MX 2004 Tutorial 3 23 Exploring HTML Tags for Hyperlinks You can also specify the Name attribute in an anchor link, associating a name to a specific named location within a Web page: Some Text “Anchor_name” is your name for the anchor “Some Text” is the text being named as the anchor.

24. XP Dreamweaver MX 2004 Tutorial 3 24 Exploring HTML Tags for Hyperlinks This type of name is used to do things like jump from the end of a page back to the top, or to skip around on a page. The format for the anchor tag to link to a named anchor on the same page is: Link Text To link to a named anchor on another page: Link Text

25. XP Dreamweaver MX 2004 Tutorial 3 25 Exploring HTML Tags for Hyperlinks Anchor Tag in the Bands Page

26. XP Dreamweaver MX 2004 Tutorial 3 26 Understanding Cascading Style Sheets Because of the limitations of HTML styles, Cascading Style Sheets (CSS) were created. A CSS style is a rule that defines how an element appears either through modifying an HTML style or setting up a custom one. CSS styles have more parameters than HTML, for instance custom list bullets. A CSS style can be defined in one place and used to modify text in many places. Unlike HTML styles, if you change a CSS style, all text using that style is also changed. CSS styles were developed with HTML 4 and therefore is not compatible with older browsers.

27. XP Dreamweaver MX 2004 Tutorial 3 27 Creating CSS Styles If you are using CSS styles, it is important to view your Web site in all browsers you will be supporting. When you create a CSS style, you will choose: - Type – there are three choices: * A redefined HTML tag - where you modify an existing tag * A custom style – where you create an entirely new style * The advanced style – used to redefine formatting for a group of tags or for all tags that contain a particular ID attribute (most commonly used to customize the appearance of text links) - Name/Tag/Selector – the name for whatever type of style you selected above - Define in – internal or external style sheet (affects current page or entire Web site)

28. XP Dreamweaver MX 2004 Tutorial 3 28 Understanding Cascading Style Sheets Then choose the attributes for the CSS style: –Type – font tag attributes such as font, size, color, etc.plus new attributes such as line height and decoration. –Background – a color or image appearing behind a page element over the Web page background. –Block – Spacing attributes, between letters, words, lines of text. Also includes horizontal and vertical alignment and indentation of the paragraph. –Box – controls the characteristics of the selection box that surrounds text elements. –Border – dimensions, color and line styles of the box that surrounds text elements. –List– format of bullets and bulleted lists. –Positioning – currently available only as a custom style, controls the placement of text on the screen. –Extensions – controls printing page breaks, pointer appearance as it hovers over objects and special affects. This is not supported in many browsers.

29. XP Dreamweaver MX 2004 Tutorial 3 29 Modifying HTML Tags The easiest way to create a CSS style is to redefine an existing HTML tag because tags often are automatically inserted. Dreamweaver provides a list of available tags where you can edit existing attributes or add new ones. When you modify the attributes associated with a tag, the changes you make will apply to every instance of that tag.

30. XP Dreamweaver MX 2004 Tutorial 3 30 Modifying HTML Tags Modifying an HTML tag using the CSS Styles Panel

31. XP Dreamweaver MX 2004 Tutorial 3 31 Modifying HTML Tags Modifying an HTML tag using the new CSS Style Dialog Box

32. XP Dreamweaver MX 2004 Tutorial 3 32 Modifying HTML Tags Modifying an HTML tag – Completed CSS Style definition

33. XP Dreamweaver MX 2004 Tutorial 3 33 Creating and Applying Custom Style Classes You can also create new custom style classes (CSS). A CSS name should begin with a period (.) and contain no spaces or special characters. In addition to font, size, and color, you’ll include a background color in the custom style class. Once you create a custom style class, you must apply it to the text you want to format. You apply the style to selected text by selecting the style from the Style list in the Property inspector. To help you remember what a style looks like, each style name in the Style list in the Property inspector is formatted with the attributes for that style.

34. XP Dreamweaver MX 2004 Tutorial 3 34 Using the Advanced CSS Type to Customize Anchor Tag Pseudoclasses You can create CSS styles manually using the advanced style. When you create an advanced style, you redefine the formatting for a group of tags or for tags containing a specific ID attribute. When you define the parts of the anchor tag manually, you must define them in the order in which they appear in the CSS Selector list: a:link, a:visited, a:hover, a:active.

35. XP Dreamweaver MX 2004 Tutorial 3 35 Using the Advanced CSS Type to Customize Anchor Tag Pseudoclasses To make text links act and look the way you want them to, you need to use a CSS Selector. The CSS Selector allows you to change the formatting for a group of tags – for instance to change the anchor tag colors for active, hover and visited. To use CSS Selectors, click the New CSS Style button in the CSS Styles panel and then click the CSS Selector button.

36. XP Dreamweaver MX 2004 Tutorial 3 36 Using the Advanced CSS Type to Customize Anchor Tag Pseudoclasses Bands Page with Customized Link Styles Previewed in a Browser

37. XP Dreamweaver MX 2004 Tutorial 3 37 Using External Style Sheets Applying CSS across a Web site requires the creation of an external style sheet. Using an external style sheet enables you to make site-wide stylistic changes by updating one file. You can either create the styles in the external style sheet, or export them to it if they are already created. To export styles to an external style sheet the Web page where the styles are located must be open.

38. XP Dreamweaver MX 2004 Tutorial 3 38 Using External Style Sheets External Style Sheet Displayed in the Files Panel

39. XP Dreamweaver MX 2004 Tutorial 3 39 Using External Style Sheets Once you have created an external style sheet, you must delete the styles from within the document in order to avoid duplicates and confusion. To delete, click the Minus button, then click the appropriate name and the Delete CSS Style button. By deleting unused styles, you are eliminating unnecessary materials from the site, reducing the size of the files, and eliminating clutter. Now you will want to apply the external style sheet to the Web pages that you want to format with those styles. You use the same methods already learned to apply the external style sheet formatting to a page. You can add new styles to the external style sheet at any time by choosing the style sheet by name when creating the new style.

40. XP Dreamweaver MX 2004 Tutorial 3 40 Using External Style Sheets Attach External Style Sheet Dialog Box

41. XP Dreamweaver MX 2004 Tutorial 3 41 Examining Code for CSS Styles As CSS styles are added, Dreamweaver adds information to the head of a Web page between the head tags. The head of a Web page is the portion of the HTML between the head tags. When you attach an external style sheet to a Web page, a link tag is placed in the head portion of the HTML code for that page. When you use an internal or embedded style sheet, the styles are embedded in the head tag for that Web page.

42. XP Dreamweaver MX 2004 Tutorial 3 42 Examining Code for CSS Styles Embedded code will usually look like this: <! - - name {attribute-name: attribute value; attribute2-name: attribute2 value} - - > where name is the style, HTML tag, or tag and pseudoclass name.

43. XP Dreamweaver MX 2004 Tutorial 3 43 Examining Code for CSS Styles Style definitions appear inside the style tags: style definitions Where type indicates the style format that follows. The comment tag is nested within the style tag: Comment tags are used to hide the style definitions from older browsers and

44. XP Dreamweaver MX 2004 Tutorial 3 44 Examining Code for CSS Styles The format for the style definition is: name {attribute-name: attribute value; attribute2-name: attribute2 value} The style name indicates whether it is a custom style, a redefined tag, or an advanced style tag. –. Name – custom style –Tag name – redefined tag –Tag name followed by a colon and the pseudoclass – advanced style

45. XP Dreamweaver MX 2004 Tutorial 3 45 Examining Code for CSS Styles An external style sheet can be used whenever the Web page contains a link to it in its head and the styles are located in the style sheet. The general format for link tags is: Link identifies the type of tag Rel= indicates relationship between the link and the page Href= is the URL of the linked document Type= is the form of the content that will follow

46. XP Dreamweaver MX 2004 Tutorial 3 46 Examining Code for CSS Styles Code for the External Style Sheet in the Band Page

47. XP Dreamweaver MX 2004 Tutorial 3 47 Viewing Style Tags When you select text and apply a custom style class, HTML code is added in one of three ways: –Adding attributes to an existing tag – if the text already has attributes, the new attributes are added. –Applying a custom style class to a block of text – when there were no attributes, the entire block is surrounded with the div tag and the custom style attributes. –Applying a custom style class to a text selection – when the selection is less than a block of text, the selection is surrounded by the span tag with the custom attributes.

48. XP Dreamweaver MX 2004 Tutorial 3 48 Editing CSS Styles The ability to edit styles is one of the more powerful aspects of Cascading Style Sheets. When you edit a style, the changes are applied automatically across the Web site wherever that style was used. You can control the look and the consistency of the entire Web site from one centralized set of specifications. You can edit styles in the CSS Style Definition dialog box. The changes you make will override the original style attribute selections. You can view the new page style by clicking the Apply button in the CSS Style Definition dialog box and viewing the page in the Document window.

49. XP Dreamweaver MX 2004 Tutorial 3 49 Editing CSS Styles You can also examine and edit CSS styles by using the Tag inspector, located in the Tag panel group. Styles are listed in hierarchical order; styles that are closer to the text are displayed at the bottom of the list. Any changes made in the Tag inspector are immediately applied to the page.

50. XP Dreamweaver MX 2004 Tutorial 3 50 Editing CSS Styles You can change the appearance of selected text with the Property inspector by applying an existing style to the text or changing attributes of the text. Changing the attributes of selected text in the Property inspector does not edit the CSS styles. It is important to keep site files and styles organized; create a new style only when necessary.

51. XP Dreamweaver MX 2004 Tutorial 3 51 Exploring HTML Tags Used with Text Several HTML tags are used with text. When you create Web pages in Design view, Dreamweaver places the appropriate HTML tags around the text for you. To see the HTML tags, you need to switch to either Code view or Split view.

52. XP Dreamweaver MX 2004 Tutorial 3 52 Exploring HTML Tags Used with Text Reference Panel for Selected HTML Paragraph Tag

53. XP Dreamweaver MX 2004 Tutorial 3 53 Exploring HTML Tags Used with Text It is not a good idea to add CSS styles to Web sites created in an older version of HTML. You can modify these pages in a number of ways: –Creating the code manually in Code view –Set preferences so Dreamweaver uses only HTML tags to format pages –Select text and use the Font Tag Editor to edit selected text with font tags.

54. XP Dreamweaver MX 2004 Tutorial 3 54 Exploring HTML Tags Used with Text The attributes and process for formatting text using the HTML font tag are not the same as the ones for formatting text using CSS styles. The attributes for text formatting are similar to those in a word processing program, except HTML tags are added in the background of formatted text. Text formatting attributes include format, font, font size, font color, emphasis, alignment, lists, and indents.

55. XP Dreamweaver MX 2004 Tutorial 3 55 Updating a Web Site on a Remote Server When pages are changed, they should be updated on your remote server. To update: –Connect to the remote server using the Connects to Remote Host button on the Files panel toolbar –Click View list and Local View. –Select the updated files and then the Put Files button –Click the View list and then Remote view –Disconnect from Remote Host using the Files panel toolbar

56. XP Dreamweaver MX 2004 Tutorial 3 56 Tutorial Summary You should now be able to: –Add text to a Web Page –Create and format font and text links –Read and write underlying HTML code for text formatting –Create and edit HTML styles and cascading Style Sheets –Export CSS styles to an external style sheet –Update the Web site on the remote Web server