Tutorial 2 Formatting Text Objectives Session 2 1

Tutorial 2: Formatting Text

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 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 2

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 2 3

Visual Overview File Management and Font Buttons New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 4

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 2 5

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 2 6

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 2 7

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 2 8

Opening an Existing Web Site New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 9

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 2 10

Opening an Existing Web Site New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 11

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 2 12

Opening an Existing Web Page New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 13

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 2 14

Working with the Common Toolbar New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 15

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 2 16

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 2 17

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 2 18

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 2 19

Working with the Common Toolbar New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 20

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, 0) – By hexidecimal value - #FFFF 00 New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 21

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 2 22

Working with Color New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 23

Visual Overview Formatting Buttons New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 24

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 2 25

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 2 26

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

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 2 28

Creating Lists • Definition List HTML Code – Start tag - <dl> – Defined Term start tag - <dt> – Defined Term end tag - </dt> – Definition Data start tag - <dd> – Definition Data end tag - </dd> • Expression Web creates all the HTML code New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 29

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 2 30

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 2 31

Using the Font Dialog Box The Paragraph Dialog Box New Perspectives on Microsoft Expression Web 3. 0 Tutorial 2 32

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 2 33

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 2 34

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 2 35

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 2 36