Tutorial 2: Formatting Text. Objectives Session 2.1 – Learn the functions of the Common toolbar...
-
Upload
elfreda-nash -
Category
Documents
-
view
215 -
download
0
Transcript of Tutorial 2: Formatting Text. Objectives Session 2.1 – Learn the functions of the Common toolbar...
![Page 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/1.jpg)
Tutorial 2:
Formatting Text
![Page 2: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/4.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 4
Visual OverviewFile Management and Font Buttons
![Page 5: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/5.jpg)
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
![Page 6: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/6.jpg)
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
![Page 7: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/9.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 9
Opening an Existing Web Site
![Page 10: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/11.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 11
Opening an Existing Web Site
![Page 12: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/12.jpg)
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
![Page 13: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/13.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 13
Opening an Existing Web Page
![Page 14: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/14.jpg)
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
![Page 15: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/15.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 15
Working with the Common Toolbar
![Page 16: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/16.jpg)
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
![Page 17: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/17.jpg)
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
![Page 18: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/18.jpg)
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
![Page 19: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/19.jpg)
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
![Page 20: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/20.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 20
Working with the Common Toolbar
![Page 21: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/21.jpg)
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
![Page 22: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/22.jpg)
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
![Page 23: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/23.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 23
Working with Color
![Page 24: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/24.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 24
Visual OverviewFormatting Buttons
![Page 25: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/25.jpg)
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
![Page 26: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/26.jpg)
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
![Page 27: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/27.jpg)
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)
![Page 28: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/28.jpg)
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
![Page 29: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/29.jpg)
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
![Page 30: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/30.jpg)
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
![Page 31: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/31.jpg)
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
![Page 32: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/32.jpg)
New Perspectives on Microsoft Expression Web 3.0 Tutorial 2 32
Using the Font Dialog Box
The Paragraph Dialog Box
![Page 33: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/33.jpg)
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
![Page 34: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/34.jpg)
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 - ©
![Page 35: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/35.jpg)
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
![Page 36: 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.](https://reader038.fdocuments.us/reader038/viewer/2022110321/56649ce45503460f949b11c8/html5/thumbnails/36.jpg)
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