Expression Web 2,: Formatting Text, Learning how xhtml formats text



Student Learning Outcomes:
1. Create a new web site
2. Change the appearance of page properties
3. Create a background color for the page
4. Save a Web site
5. Learn the functions of the common toolbar
6. Change the size of text
7. Discern which fonts to use on a Web page.
8. Check the document for spelling and grammer.
9. Create a list.
10. Insert a horizontal line.
11. Insert symbols.
12. Format text using the Font dialog box. .

Important Points:

1. Restore default toolbars -  click task pane on the menu bar, click reset workspace layout.
2. Save a file-  click file on menu bar, click save.
3. Save as  a. to a new location including the creation of a new folder, b- new name, c-new title, d. different file type.  Click file on menu bar, click save as, You will see:

      Save as dialog box

4. Setting page properties: right click the page, left click page properties.
A. General Properties
You will see:  What you type in the title will be contained between the <title> and </title>, in the page description will be the description meta tag <meta name=description content=" ">, in the page keywords will be keywords meta tab <meta name= keywords content=" "> be sure to include misspellings of key words so that common misspellings will still find your site.  The description and keywords meta tags are read by meta crawlers like goggle. In the general tab you can also add a background sound.

Page Properties, General

B: Formatting Page: Click formatting tab: you will see:  Here you can add a background picture, chose the background color, text, and hyperlinks.
Page Properties, Formatting
1. To change back ground color: Click formatting tab, under colors, click background list arrow, click more colors: You will see:  Here you can select and blend more than the default colors.
Page Properties, Color wheel

2. Click Custom:  You will see:

  Page properties, Custom colors

C. Advance Properties. click advance properties tab: you will see:  Here you can set the top, left, bottom and right margins of the page.

  Page Properties, Advanced

D. Custom Properties - click the custom tab.  You will see:  Here  you can work with system and user variables.

  Page Properties, Custom

E. Language Properties: Click the language tab.  You will see: Here you can select the language that you are working with and the encoding.

  Page Properties, Language

5. Code and Design view:  Click at the bottom of the page the split tab.  In the top pane you will see the code , in the bottom pane you will see the design view.  Everything you do in design view will be reflected in code in the code window.  Everything you do in the code window will reflect in the design window.

6. Heading, CSS keyword and Point size.

 Heading     CSS keyword  Point Size 
 - xx-large  36 
 h1 x-large  24 
 h  large  18
 h3 medium   14
 h4  small  12
 h5  x-small  10                
h6 xx-small 8

7. Fonts.
a. Font is a particular design given to the appearance of text.
b. Font face is a particular type of font.
c. Font family is a group of variations on the same font face.
d. Five generic fonts
 Generic name  Description Example
 Serif  Letters have strokes that finish the top or bottom of the letter form Times New Roman
 Sans serif  Letter do not have finishing strokes Ariel
 Monospace  Fixed-width letters Courier New
 Fantasy  Decorative letters
 Cursive Letters design to look like hand writing 

8. Creating a border around text and change border style, color, and width:
a. Select the text
b. Select the outside border list arrow from the common menu, then select outside border.
You will see an outside border appear around the select text.
c. Select the text again, click format on the menu bar, and then click Borders and Shading. You will see:


9. Colors  - are a combination of Red, Green, and Blue There are 216 web safe colors.  For 3 number hexadecimal color codes click the following link.  To return to this window click the back button on your browser.

10. Spelling - click view on the common toolbar, click toolbars, click standard toolbar, click the spelling icon on the standard toolbar. You will see:
  Spelling Dialog box

11.  Thesaurus -  select the word, press shift-F7, you will see:
  Thesaurua dialog box

12.  Find and Replace text -  Click the find button on the standard toolbar.  You will see: Here you can find a word in your document.

  Find and Replace Dialog box

a. Click the replace tap: you will see: Here you can find and replace text in your document.

  Replace Dialog box
b. Click the HTML tags tab.  You will see: Here you can find html tags in your document and replace them. 

Find HTML tag dialog box

13. To copy and paste -  Select the text, right click and click copy or Ctrl-C or cut.   Place your cursor where you want to copy the text to, right click and click paste or Ctrl-V.

14. View page in browser - after saving the file, tap the F12 key.

15. List -
a.  A bulleted list is started with a dot or some other symbol, also called unordered list can be customized <ul>.
b.  A numbered list is preceded by numbers, letters, or roman numerals also called ordered list <ol>
c. . List item
Item on the list <li>
d. Definition list is used to format defined terms and their definitions.
e. Defined term is the term being explained.
f. A nested list is one that is contained within another list.
g. Multi Leveled or outline list contains more than one nested list.

16. Create bulleted List:  select the text you want.  On common toolbar click the bullets button.
17. Modify bulleted list: Select the list, Click Format on the menu bar, click bullets and numbering.  You will see:
a. Bullets and Numbering, Pictures, here you select pictures for bullets or use CSS.

   Bullett and Numbering, Pictures

b. Bullets and Numbering, Plain Here you can select the plain bullets.

  Bullets and numbering, plain

c. Bullets and Numbering, Numbers  Here you can select the type of numbering and what digit to start from:
Bullets and numbering, Numbers


18. Using the Font Dialog Box.  Select the text, select format from the common toolbar, select Font:  you will see:
Here you can change the font, style, size, color and effects.

  Fonts Dialog box

a. Font, Character spacing.

  Font dialog box, Character spacing

19. The line break tag  <br /> just move down one line.
20. Horizontal Line From the toolbox in the upper right hand corner click <hr>.  Then double click the horizonal line in design view.  You will see:  here you can set the width in percent or pixels, height in pixels, alignment, color and solid line.

Horizontal Line dialog box

21. Insert a symbol: Select insert from menu bar, select symbol, you will see:  Here you can select symbols from different font families, and subsets.

  Symbol dialog box

22. Comment tag - <!--- text here--->