tutorial 2: formatting text. objectives session 2.1 – learn the functions of the common toolbar...

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

2New Perspectives on Microsoft Expression Web 3.0 Tutorial 2

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

Visual OverviewFile Management and Font Buttons

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 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 2 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 2 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 2 9

Opening an Existing Web Site

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 11

Opening an Existing Web Site

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 13

Opening an Existing Web Page

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 15

Working with the Common Toolbar

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 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 2 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 2 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 2 20

Working with the Common Toolbar

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 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 2 23

Working with Color

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 24

Visual OverviewFormatting Buttons

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 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 2 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 2 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 2 29

Creating Lists

• Definition List HTML Code– Start tag - <dl> – Defined Term start tag - <dt>– Defined Term – Defined Term end tag - </dt> – Definition Data start tag - <dd>– Definition– Definition Data end tag - </dd>

• Expression Web creates all the HTML code

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 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 2 32

Using the Font Dialog Box

The Paragraph Dialog Box

New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 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 2 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 2 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 2 36

Creating a Web Site

• Before creating a new Web site close all open pages not part of an existing Web site