1. Tutorial 2: Formatting Text

2. Objectives Session 2.1 – Learn the functions of the Common toolbar – Change the size of text – Discern which fonts to use on a Web page – Check the document for spelling 2New Perspectives on Microsoft Expression Web 3.0 Tutorial 2

3. Objectives Session 2.2 – Create a list – Insert a horizontal line – Insert symbols – Format text using the Font dialog box New Perspectives on Microsoft Expression Web 3.0 Tutorial 23

4. Visual Overview File Management and Font Buttons New Perspectives on Microsoft Expression Web 3.0 Tutorial 24

5. Opening an Existing Web Site Website – Collection of Web pages, files, objects, and folders that will be published for presentation on the Web In Expression Web you can: – Use the Folder List panel to organize all files and to perform all Web site file management tasks – Automatically update links to other files – Automatically apply CSS code to as many pages as you wish New Perspectives on Microsoft Expression Web 3.0 Tutorial 25

6. Opening an Existing Web Site – Find and replace text in multiple documents – Perform spelling check on multiple documents – Create template documents To open an existing site: – Open Expression Web – Click Panels menu Click Reset Workspace Layout New Perspectives on Microsoft Expression Web 3.0 Tutorial 26

7. Opening an Existing Web Site – Click Site menu Click Open Site and locate desired Web site file Click Open New Perspectives on Microsoft Expression Web 3.0 Tutorial 27

8. Opening an Existing Web Site In Folder List panel – Click + sign to left of Data files folder – Click + sign to the left of the desired folder – Double click desired file To save file with a new name – Click File – Click Save As – Type new name New Perspectives on Microsoft Expression Web 3.0 Tutorial 28

9. Opening an Existing Web Site New Perspectives on Microsoft Expression Web 3.0 Tutorial 29

10. Opening an Existing Web Site Web Page Title – Displays in the Title bar at the top of browser window Right-click in Editing window Click Page Properties Complete the Title, Page Description, and Keyword boxes – Page descriptions and keywords help ensure that Web search engines will locate the page New Perspectives on Microsoft Expression Web 3.0 Tutorial 210

11. Opening an Existing Web Site New Perspectives on Microsoft Expression Web 3.0 Tutorial 211

12. Opening an Existing Web Page Changing the Background Color for the Page – Use Page Properties Formatting tab – Default is black text on a white background – If background color is changed, be mindful of contrast New Perspectives on Microsoft Expression Web 3.0 Tutorial 212

13. Opening an Existing Web Page New Perspectives on Microsoft Expression Web 3.0 Tutorial 213

14. Working with the Common Toolbar Changing the Font Size – HTML has six font sizes Heading 1 (largest) through Heading 6 (smallest) – CSS has seven keywords xx-large to xx-small – Font size measured in points 1 point = 1/72 of an inch New Perspectives on Microsoft Expression Web 3.0 Tutorial 214

15. Working with the Common Toolbar New Perspectives on Microsoft Expression Web 3.0 Tutorial 215

16. Working with the Common Toolbar Working with Fonts – Serif fonts (XHTML generic font) Have stroke endings that resemble hooks or tails Example - Times New Roman – Sans-serif fonts Have no hooks or tails Example – Arial New Perspectives on Microsoft Expression Web 3.0 Tutorial 216

17. Working with the Common Toolbar – Monospace fonts Fixed-width letters – Cursive fonts Resemble handwriting or script – Expression Web – Fantasy fonts (XHTML generic font) Artistic/Decorative letters – Expression Web New Perspectives on Microsoft Expression Web 3.0 Tutorial 217

18. Working with the Common Toolbar – Font face Particular type of font, such as Arial or Times New Roman – Font family A group of variations on the same font face – Arial, Arial Narrow, Arial Black – Generic Fonts Serif, Sans-Serif, Monospace, Fantasy, Cursive New Perspectives on Microsoft Expression Web 3.0 Tutorial 218

19. Working with the Common Toolbar Creating a Border – Outside Borders button on Common Toolbar Creates simple border – Borders and Shading dialog box Change border style, color, and width Add padding – white space between text and border New Perspectives on Microsoft Expression Web 3.0 Tutorial 219

20. Working with the Common Toolbar New Perspectives on Microsoft Expression Web 3.0 Tutorial 220

21. Working with Color Font color – Foreground color Highlight color – Background color Color is a combination of red, green, and blue Colors are identified in three ways – By name – Yellow – By RBG triplet – (255,255,0) – By hexidecimal value - #FFFF00 New Perspectives on Microsoft Expression Web 3.0 Tutorial 221

22. Working with Color Hexidecimal values – Based on the number 16 – Use numbers 1-9 then letters A-F (10-15) – Numbers/letters reflect the intensity of red, green, and blue – Begins with a flag character (#) Emphasizing Text – Use Bold and Italic buttons on Common toolbar – Use shortcut keys—Ctrl+B and Ctrl+I New Perspectives on Microsoft Expression Web 3.0 Tutorial 222

23. Working with Color New Perspectives on Microsoft Expression Web 3.0 Tutorial 223

24. Visual Overview Formatting Buttons New Perspectives on Microsoft Expression Web 3.0 Tutorial 224

25. Creating Lists Unordered (bulleted) list – Create when items have no order of importance – Use Bullets button on Common toolbar Ordered (numbered) list – Create when items have a particular order of importance or should appear in sequence – Use Numbering button on Common toolbar New Perspectives on Microsoft Expression Web 3.0 Tutorial 225

26. Creating Lists Customizing the Appearance of Lists – Unordered List (bullets) Use options in the List Properties dialog box to change the appearance of bullets Gallery – Set of choices, arranged as graphics in a line or table, which may be selected and applied to the list New Perspectives on Microsoft Expression Web 3.0 Tutorial 226

27. Creating Lists – Ordered Lists (numbered) Five list style type sets: – Arabic Numbers – Lowercase Roman numerals (i, ii, iii) – Uppercase Roman numerals (I, II, III) – Lowercase letters (a, b, c) – Uppercase letters (A, B, C) New Perspectives on Microsoft Expression Web 3.0 Tutorial 227

28. Creating Lists Creating a Definition List – Used to create a hanging indent – Commonly used to create a chronology, a works cited page, or a question-and-answer layout New Perspectives on Microsoft Expression Web 3.0 Tutorial 228

29. Creating Lists Definition List HTML Code – Start tag - – Defined Term start tag - – Defined Term – Defined Term end tag - – Definition Data start tag - – Definition – Definition Data end tag - Expression Web creates all the HTML code New Perspectives on Microsoft Expression Web 3.0 Tutorial 229

30. Using the Font Dialog Box Font Dialog Box is used to format text – All capital letters – Superscripts – Subscripts – Bold – Italics – Underline – Small Caps New Perspectives on Microsoft Expression Web 3.0 Tutorial 230

31. Using the Font Dialog Box Indenting Text – Decrease Indent Position button (Common toolbar) – Increase Indent Position button (Common toolbar) – HTML blockquote element indents text from both sides but is seldom used New Perspectives on Microsoft Expression Web 3.0 Tutorial 231

32. Using the Font Dialog Box The Paragraph Dialog Box New Perspectives on Microsoft Expression Web 3.0 Tutorial 232

33. Using the Font Dialog Box Creating a Spread Heading – Word Spacing Creates extra space between words – Character Spacing Creates extra space between characters Creating a Horizontal Line – Serves as a content divider for Web pages – Defaults to gray and 100% of the screen width New Perspectives on Microsoft Expression Web 3.0 Tutorial 233

34. Using the Font Dialog Box – Document Footer Last line(s) of Web page Usually contains contact information or links to other pages in the same Web site Inserting Symbols – Characters that cannot be entered from the keyboard Trademark symbol - ™ Copyright symbol - © New Perspectives on Microsoft Expression Web 3.0 Tutorial 234

35. Creating a Web Site Home Page Guidelines – Automatically created by Expression Web – Named default.htm or index.htm – Filenames should: Use lowercase letters Contain no punctuation other than underscore character and no spaces Begin with a letter Ideally be no longer than eight characters New Perspectives on Microsoft Expression Web 3.0 Tutorial 235

36. Creating a Web Site Before creating a new Web site close all open pages not part of an existing Web site New Perspectives on Microsoft Expression Web 3.0 Tutorial 236