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


Visual OverviewFile Management and Font Buttons


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



– 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



– Click Site menu• Click Open Site and locate desired Web site file• Click Open



• 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



• 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


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


Opening an Existing Web Page


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



• 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



– Monospace fonts • Fixed-width letters

– Cursive fonts • Resemble handwriting or script – Expression

Web– Fantasy fonts (XHTML generic font)

• Artistic/Decorative letters – Expression Web



– 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



• 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


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


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


Working with Color


Visual OverviewFormatting Buttons


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


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


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)


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


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


Using the Font Dialog Box

• Font Dialog Box is used to format text– All capital letters– Superscripts– Subscripts– Bold– Italics– Underline– Small Caps



• 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



The Paragraph 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



– 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 - ©


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


Creating a Web Site

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

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

Documents