1. Tutorial 3 Adding and Formatting Text

2. Objectives Session 3.1 – Type text into a page – Copy/paste text from a Word document – Check for spelling errors – Create hyperlinks – Examine HTML tags for hyperlinks – Understand Copyright regulations 2New Perspectives on Adobe Dreamweaver CS5

3. Objectives Session 3.2 – Explore CSS styles and style sheets – Modify HTML tags – Create custom style classes – Create styles for the tag pseudoclasses New Perspectives on Adobe Dreamweaver CS53

4. Objectives Session 3.3 – Create an external style sheet – Attach an external style sheet to a Web page – Edit styles – Use CSS Enable/Disable and CSS Inspect – Delete styles – Examine the code for styles and style sheets – Examine HTML tags used to format text New Perspectives on Adobe Dreamweaver CS54

5. Session 3.1 Copyrighted Content Copyrighted Material Includes: – Text – Images – Sounds – Video – Entire page/site Student work falls under the “Fair Use” policy, which means you can use a “small amount” of the work without restriction ALWAYS give credit to the source “Public Domain” web sites are non-copyrighted New Perspectives on Adobe Dreamweaver CS55

6. Type directly into Dreamweaver OR Copy existing text from another file – Paste command Places text without formatting – Paste Special command Allows you to choose the level of formatting that will be retained with the text TIP: Word processing programs (like Word) have a Thesaurus to help with your writing New Perspectives on Adobe Dreamweaver CS56 Adding Text to a Web Page

7. REMEMBER: Check the Spelling – Proofread all text (NO Spell Checker is error-proof!) – Use the Dreamweaver built-in spelling checker New spell check supports 37 dictionaries TIP: Errors detract from overall impression and make company, service, or product unprofessional! COMMANDS menu New Perspectives on Adobe Dreamweaver CS57

8. Adding Text to a Web Page New Perspectives on Adobe Dreamweaver CS58

9. Adding Text to a Web Page Using Find and Replace – Can locate text or tags and replace them with other text or tags EDIT menu New Perspectives on Adobe Dreamweaver CS59

10. Adding Text to a Web Page New Perspectives on Adobe Dreamweaver CS510

11. Formatting Text Using the Property Inspector Type the text, then select the text, then format it Shortcuts to select: – CTRL+A = entire page – Double-click = selects one word – Triple-click = selects paragraph When text is formatted, CSS styles are added behind the scenes New Perspectives on Adobe Dreamweaver CS511

12. Formatting Text Using the Property Inspector Switches between HTML pane and CSS pane – Using the HTML pane, new HTML tags can be added to the page, existing CSS styles can be applied, and text attributes such as bold, italic, or ordered/unordered lists can be set – Using the CSS pane, new styles can be created and current ones can be edited New Perspectives on Adobe Dreamweaver CS512

13. Formatting Text Using the Property Inspector New Perspectives on Adobe Dreamweaver CS513

14. Creating Text Hyperlinks Hyperlinks = clickable text to move from one page to another What if you want more than one space bar between links? – Only ONE space bar appears in the browser even if you press it more than once – Must insert non-breaking spaces to add the code for more than one space bar Formats the spaces as “characters” Found in the Insert panel – Shortcut = CTRL+Shift+Space Bar New Perspectives on Adobe Dreamweaver CS514

15. Creating Text Hyperlinks Text Links are “accessible” because they can be read by assistive devices – Created using the Property inspector – Types of Hyperlinks: Relative = “relates” to the document (same site) – Document Relative (within same folder) – Site Root Relative (complete path) Absolute = outside the site (complete URL) New Perspectives on Adobe Dreamweaver CS515

16. Exploring HTML Tags for Hyperlinks Dreamweaver creates tags when text and hyperlinks are formatted HTML tags follow a specific format – Most come in pairs with opening and closing tags Opening tags are placed before the text Closing tags are placed after the text Some Text New Perspectives on Adobe Dreamweaver CS516

17. Exploring HTML Tags for Hyperlinks – Tags can be used together, or nested, which places one element inside another Nested tags must be kept in the same order, i.e., “first on, last off” Some Text NOT Some Text New Perspectives on Adobe Dreamweaver CS517

18. Exploring HTML Tags for Hyperlinks – Tags can also contain attributes such as size, color, and alignment – Attributes are placed within opening tags – Multiple attributes are separated by a space – Value of each attribute is placed in quotation marks Some Text New Perspectives on Adobe Dreamweaver CS518

19. Exploring HTML Tags for Hyperlinks Exploring HTML Tags That Apply to Hyperlinks – Hyperlinks are created using an anchor tag Link Text New Perspectives on Adobe Dreamweaver CS519 Hypertext reference ValueText that is clicked

20. Exploring HTML Tags for Hyperlinks Absolute, document relative, and site root relative links have different path information in href attribute Set the target attribute using the anchor tag – Target specifies where the link opens Current browser window (default) New browser window (“_blank”) Link Test New Perspectives on Adobe Dreamweaver CS520 Target attribute

21. Exploring HTML Tags for Hyperlinks Name attribute – The name given to the anchor Anchor names are case sensitive New Perspectives on Adobe Dreamweaver CS521 Some Text Name attribute

22. Exploring HTML Tags for Hyperlinks – Links can be created to a named anchor from other locations in the same page or from other pages – The # symbol always precedes the anchor name when used in a link Link Text (this is a link to the same page) New Perspectives on Adobe Dreamweaver CS522

23. Session 3.2 Evolving HTML and CSS Standards Early Standards – Designers had limited control over how text was displayed in a browser Text appeared in the default font and size as set by the browser being used No font control within a Web page except for the six predefined heading tags – HTML 2 Bold, italic, and underline attributes were added New Perspectives on Adobe Dreamweaver CS523

24. Evolving HTML and CSS Standards – HTML 3.2 HTML font tag allowed designers to designate in which font and relative font size the Web page should display Font tag was deprecated in HTML 4.01 and replaced with Cascading Style Sheets (CSS) New Perspectives on Adobe Dreamweaver CS524

25. Evolving HTML and CSS Standards Current Standard – Extensible Hypertext Markup Language – XHTML Combination of HTML and XML – HTML was created to display data – XML was created to describe or identify data XHTML structures the page content and CSS styles it for display XHTML more strictly defines the syntax and makes it easier to format New Perspectives on Adobe Dreamweaver CS525

26. Evolving HTML and CSS Standards A CSS style sheet is a collection of styles – Inserted in the head of the HTML of a page and used throughout it (internal style sheet) – Attached as an external document and used throughout an entire Web site (external style sheet) New Perspectives on Adobe Dreamweaver CS526

27. Evolving HTML and CSS Standards CSS style – A rule that defines the appearance of an element Redefines an existing HTML tag Creates a custom style – Styles define the appearance and position of text and graphics and control most aspects of Web page layout New Perspectives on Adobe Dreamweaver CS527

28. Evolving HTML and CSS Standards Creating CSS Styles – Create styles using the CSS styles panel or the CSS pane of the Property inspector Choose a selector type – Class » Can be applied to any HTML element – ID » Can be used only once in a page New Perspectives on Adobe Dreamweaver CS528

29. Evolving HTML and CSS Standards – Tag » An existing HTML tag that is modified » Most common type of CSS style – Compound » Combination of ID, class, and tag styles » Used to redefine formatting for a group of tags only when those tags appear in the defined order New Perspectives on Adobe Dreamweaver CS529

30. Evolving HTML and CSS Standards New Perspectives on Adobe Dreamweaver CS530 Attribute Categories Every style consists of two parts – Declaration Defines the attributes used in the style Eight categories of attributes

31. Modifying HTML Tags New Perspectives on Adobe Dreamweaver CS531

32. Modifying HTML Tags New Perspectives on Adobe Dreamweaver CS532

33. Creating and Applying Class and ID Styles Class and ID Styles – Built from scratch – Given a unique name Can contain letters and numbers but no spaces – Creator specifies all attributes to be included – Class styles have a period (.) right before the name – ID styles have a # right before the name New Perspectives on Adobe Dreamweaver CS533

34. Examining the Anchor Tag Pseudoclasses Pseudoclass – Any class that is applied to entities other than HTML Specifications Standard tags, like : a:link = before the link has been visited a:hover = while the pointer is over the link text a:active = as it is being clicked a:visited = after it has been clicked New Perspectives on Adobe Dreamweaver CS534

35. Examining the Anchor Tag Pseudoclasses – When parts of the anchor tag are defined manually, they must be defined in the order in which they appear in the CSS selector list—a: link, a:visited, a:hover, a:active – Dreamweaver automatically organizes styles in the correct order New Perspectives on Adobe Dreamweaver CS535

36. Session 3.3 Examining Code for Internal CSS Styles Viewing Code for Internal Style Sheets – When styles are defined in the current document only, code is stored in an internal style sheet (embedded style sheet) and placed in the head of the Web page – Embedded styles can be used throughout the current Web page but not in any other page New Perspectives on Adobe Dreamweaver CS536

37. Examining Code for Internal CSS Styles <!-- name { attribute-name: attribute value; attribute2-name: attribute2 value; } --> New Perspectives on Adobe Dreamweaver CS537 Selector Declaration Sample Code

38. Examining Code for Internal CSS Styles – The attribute and value are separated by a colon and a space – Each attribute/value pair is displayed in blue on a separate line that ends with a semicolon and is indented under the selector – The closing bracket appears on a separate line after the final attribute/value pair New Perspectives on Adobe Dreamweaver CS538

39. Using External Style Sheets New Perspectives on Adobe Dreamweaver CS539 External style sheets separate the style of the Web site from the content of the Web site – Stylistic changes can be made throughout the Web site by updating a single file Moving Styles to an External Style Sheet – Create a folder to be used for the style sheets – Right-click from the CSS panel to MOVE styles – Save the external style sheet with a descriptive name in that folder

40. Using External Style Sheets Deleting Styles from a Style Sheet – Styles moved to a new external style sheet are automatically deleted from within the page – When an existing external style sheet is connected to a page, move all styles from that page to the style sheet and then delete the styles from within the page – Important because styles in an internal style sheet will override those in an external style sheet whenever a conflict exists New Perspectives on Adobe Dreamweaver CS540

41. Using External Style Sheets Creating a Style in an External Style Sheet – New styles can be added at any time – Follow the same procedure used to create styles in an internal style sheet, except: Choose the style sheet by name in the Rule Definition list New Perspectives on Adobe Dreamweaver CS541

42. Using External Style Sheets Viewing Code for External Style Sheets – An external style sheet is connected to a Web page using a link tag, which appears within the head of the Web page – The styles are located in the style sheet, not in the head of the Web page – External style sheets are also called linked style sheets New Perspectives on Adobe Dreamweaver CS542

43. Using External Style Sheets New Perspectives on Adobe Dreamweaver CS543 Viewing Style Tags – When CSS styles are used to modify or customize HTML tags, no additional code appears in Web pages Existing tags just reference new definitions, which are located either in the head of the Web page or in an external style sheet

44. Using External Style Sheets – When text is selected and a class style is applied, Dreamweaver adds attributes of that class style by adding additional code in one of three ways: By adding attributes to an existing tag By applying a class style to a block of text or block level element By applying a class style to a text selection New Perspectives on Adobe Dreamweaver CS544

45. Using External Style Sheets New Perspectives on Adobe Dreamweaver CS545

46. Editing CSS Styles Ability to edit styles is one of the most powerful aspects of CSS When edited, any element to which a style has been applied is updated automatically to reflect changes Editing Styles in the CSS Rule Definition Dialog Box – Same dialog box used to create the definitions – Changes made override original style attributes New Perspectives on Adobe Dreamweaver CS546

47. Editing CSS Styles New Perspectives on Adobe Dreamweaver CS547 Editing Styles (Properties Pane of the CSS Styles Panel) – Summary for Selection pane Lists the properties for all rules that affect the formatting of the selected element – About or Rules pane About pane specifies which rule or cascade of rules affects the property selected in the Summary for Selection pane

48. Editing CSS Styles Rules pane shows the cascade or hierarchy of all the rules that affect the selected element – Properties pane Enables editing of CSS properties for the rule in which the property selected in the Summary for Selection pane is defined or for the rule selected in the About or Rules pane New Perspectives on Adobe Dreamweaver CS548

49. Editing CSS Styles – Using CSS Enable/Disable to Help You Work with Cascading Styles CSS Enable/Disable allows CSS properties to be turned on and off while working within Dreamweaver When disabled, Dreamweaver places a comment around the property – Property is invisible until it is once again enabled New Perspectives on Adobe Dreamweaver CS549

50. Editing CSS Styles Changing Text Appearance in the Property Inspector – Appearance of selected text can be changed by: Applying an existing style to the text Changing HTML attributes of the text in the HTML pane Editing the attributes of the CSS style applied to the selected element in the CSS pane New Perspectives on Adobe Dreamweaver CS550

51. Exploring HTML Tags Used with Text Several HTML tags are used with text Some commonly used deprecated tags are being phased out and aren’t used by Dreamweaver, but Web page developers should learn about them – Older HTML pages may need to be updated – Target audience may include users of older browsers or technology – Some new portable devices, Web tools, and Web appliances are not compatible with the latest specifications New Perspectives on Adobe Dreamweaver CS551

52. Exploring HTML Tags Used with Text – Some Web content management systems do not support current formats Common HTML Tags New Perspectives on Adobe Dreamweaver CS552 Font (deprecated)BlockquoteUnordered List ItalicDivOrdered List EmphasisPreParagraph BoldBreakBasefont (deprecated) StrongNonbreaking space

53. Exploring HTML Tags Used with Text Formatting Text with HTML – Properties associated with the Font tag Format  Emphasis Font  Alignment Font size  Lists Font color  Indents New Perspectives on Adobe Dreamweaver CS553

54. Exploring HTML Tags Used with Text – Absolute font sizes Based on the standard default base size of 3 1 and 2 are smaller; 4-7 are progressively larger – Relative font sizes Add or subtract from the base font size New Perspectives on Adobe Dreamweaver CS554

55. Updating a Web Site on a Live Server Upload only the files that have been changed to update the remote site—the home page and the external style sheet New Perspectives on Adobe Dreamweaver CS555