Adding Tables - VIII

Tables are used to display data in a table format. 

Create a Table
To create a table:

• Place the cursor on the page where you want the new table
• Click the Insert Tab of the Ribbon
• Click the Tables Button on the Tables Group.  You can create a table one of four ways:
• Highlight the number of row and columns
• Click Insert Table and enter the number of rows and columns
• Click the Draw Table, create your table by clicking and entering the rows and columns
• Click Quick Tables and choose a table

Styles - VII

The use of Styles in Word will allow you to quickly format a document with a consistent and professional look.  Styles can be saved for use in many documents.

Apply Styles
There are many styles that are already in Word ready for you to use.  To view the available styles click theStyles dialog box on the Styles Group in the Home Tab.  To apply a style:

• Select the text
• Click the Styles Dialog Box
• Click the Style you choose

Formatting Paragraphs - VI

Formatting paragraphs allows you to change the look of the overall document.  You can access many of the tools of paragraph formatting by clicking the Page Layout Tab of the Ribbon or the Paragraph Group on the Home Tab of the Ribbon.

Change Paragraph Alignment

Formatting Text - V

Styles
A style is a format enhancing tool that includes font typefaces, font size, effects (bold, italics, underline, etc.), colors and more.  You will notice that on the Home Tab of the Ribbon, that you have several areas that will control the style of your document:  Font, Paragraph, and Styles.

Change Font Typeface and Size

To change the font typeface:

Editing a Document - IV

Typing and inserting Text
To enter text, just start typing! The text will appear where the blinking cursor is located. Move the cursor by using the arrow buttons on the keyboard or positioning the mouse and clicking the left button. The keyboard shortcuts listed below are also helpful when moving through the text of a document:

Move Action	Keystroke
Beginning of the line	HOME
End of the line	END
Top of the document	CTRL+HOME
End of the document	CTRL+END

Selecting Text
To change any attributes of text it must be highlighted first. Select the text by dragging the mouse over the desired text while keeping the left mouse button depressed, or hold down the SHIFT key on the keyboard while using the arrow buttons to highlight the text. The following table contains shortcuts for selecting a portion of the text:

Selection	Technique
Whole word	double-click within the word
Whole paragraph	triple-click within the paragraph
Several words or lines	drag the mouse over the words, or hold down SHIFT while using the arrow keys
Entire document	choose Editing | Select | Select All from the Ribbon, or press CTRL+A

Deselect the text by clicking anywhere outside of the selection on the page or press an arrow key on the keyboard.

Inserting Additional Text
Text can be inserted in a document at any point using any of the following methods:

• Type Text:  Put your cursor where you want to add the text and begin typing
• Copy and Paste Text:  Highlight the text you wish to copy and right click and click Copy, put your cursor where you want the text in the document and right click and click Paste.
• Cut and Paste Text:  Highlight the text you wish to copy and right click and click Cut, put your cursor where you want the text in the document and right click and click Paste.
• Drag Text:  Highlight the text you wish to move, click on it and drag it to the place where you want the text in the document.

You will notice that you can also use the Clipboard group on the Ribbon. 

Rearranging Blocks of Text
To rearrange text within a document, you can utilize the Clipboard Group on the Home Tab of the Ribbon.
Insert picture of clipboard group labeled

• Move text:  Cut and Paste or Drag as shown above
• Copy Text:  Copy and Paste as above or use the Clipboard group on the Ribbon
• Paste Text:  Ctrl + V (hold down the CTRL and the “V” key at the same time) or use the Clipboard group to Paste, Paste Special, or Paste as Hyperlink

Deleting Blocks of Text
Use the BACKSPACE and DELETE keys on the keyboard to delete text. Backspace will delete text to the left of the cursor and Delete will erase text to the right. To delete a large selection of text, highlight it using any of the methods outlined above and press the DELETE key.

Search and Replace Text
To find a particular word or phrase in a document:

• Click Find on the Editing Group on the Ribbon
• To  find and replace a word or phrase in the document, click Replace on the Editing Group of the Ribbon.

Undo Changes
To undo changes:

• Click the Undo Button on the Quick Access Toolbar

Customize the Word Environment - III

Word 2007 offers a wide range of customizable options that allow you to make Word work the best for you.  To access these customizable options:

• Click the Office Button
• Click Word Options

 

Popular
These features allow you to personalize your work environment with language, color schemes, user name and allow you to access the Live Preview feature.  The Live Preview feature allows you to preview the results of applying design and formatting changes without actually applying it.

Display
This feature allows you to modify how the document content is displayed on the screen and when printed.  You can opt to show or hide certain page elements.

Proofing
This feature allows you personalize how word corrects and formats your text. You can customize auto correction settings and have word ignore certain words or errors in a document.

Save
This feature allows you personalize how your document is saved.  You can specify how often you want auto save to run and where you want the documents saved.

Advanced
This feature allows you to specify options for editing, copying, pasting, displaying, printing and saving.

Customize
Customize allows you to add features to the Quick Access Toolbar.  If there are tools that you are utilizing frequently, you may want to add these to the Quick Access Toolbar.

Working With Documents - II

Create a New Document
There are several ways to create new documents, open existing documents, and save documents in Word:

• Click the Microsoft Office Button  and Click New  or
• Press CTRL+N (Depress the CTRL key while pressing the “N”) on the keyboard

You will notice that when you click on the Microsoft Office Button and Click New, you have many choices about the types of documents you can create. If you wish to start from a blank document, click Blank.  If you wish to start from a template you can browse through your choices on the left, see the choices on center screen, and preview the selection on the right screen.

Opening an Existing Document

• Click the Microsoft Office Button  and Click Open, or
• Press CTRL+O (Depress the CTRL key while pressing the “O”) on the keyboard, or
• If you have recently used the document you can click the Microsoft Office Button and click the name of the document in the Recent Documents section of the window Insert picture of recent docs

Saving a Document

• Click the Microsoft Office Button  and Click Save or Save As (remember, if you’re sending the document to someone who does not have Office 2007, you will need to click the Office Button, click Save As, and ClickWord 97-2003 Document), or
• Press CTRL+S (Depress the CTRL key while pressing the “S”) on the keyboard, or
• Click the File icon on the Quick Access Toolbar

Renaming Documents
To rename a Word document while using the program:

• Click the Office Button  and find the file you want to rename.
• Right-click the document name with the mouse and select Rename from the shortcut menu.
• Type the new name for the file and press the ENTER key.

Working on Multiple Documents
Several documents can be opened simultaneously if you are typing or editing multiple documents at once.  All open documents will be listed in the View Tab of the Ribbon when you click on Switch Windows.  The current document has a checkmark beside the file name.  Select another open document to view it. 

Document Views
There are many ways to view a document in Word. 

• Print Layout:  This is a view of the document as it would appear when printed.  It includes all tables, text, graphics, and images.
• Full Screen Reading:  This is a full view length view of a document.  Good for viewing two pages at a time.
• Web Layout:  This is a view of the document as it would appear in a web browser.
• Outline:  This is an outline form of the document in the form of bullets.
• Draft:  This view does not display pictures or layouts, just text.

To view a document in different forms, click the document views shortcuts at the bottom of the screen  or:

• Click the View Tab on the Ribbon
• Click on the appropriate document view.

Close a Document
To close a document:

• Click the Office Button
• Click Close

Getting Started - I

Screen Layout

Menus

When you begin to explore Word 2007 you will notice a new look to the menu bar. There are three features that you should remember as you work within Word 2007: the Microsoft Office Button, the Quick Access Toolbar, and the Ribbon. These three features contain many of the functions that were in the menu of previous versions of Word. The functions of these three features will be more fully explored below.

The Microsoft Office Button

The Microsoft Office button performs many of the functions that were located in the File menu of older versions of Word. This button allows you to create a new document, open an existing document, save or save as, print, send (through email or fax), publish or close.

The Ribbon

The Ribbon is the panel at the top portion of the document. It has seven tabs: Home, Insert, Page Layout, References, Mailings, Review, and View that contain many new and existing features of Word. Each tab is divided into groups. The groups are logical collections of features designed to perform functions that you will utilize in developing or editing your Word document. Commonly used features are displayed on the Ribbon, to view additional features within each group, click on the arrow at the bottom right of each group.

Each of the tabs contains the following tools:

Home: Clipboard, Fonts, Paragraph, Styles, and Editing.
Insert: Pages, Tables, Illustrations, Links, Header & Footer, Text, and Symbols
Page Layout: Themes, Page Setup, Page Background, Paragraph, Arrange
References: Table of Contents, Footnote, Citation & Bibliography, Captions, Index, and Table of Authorities
Mailings: Create, Start Mail Merge, Write & Insert Fields, Preview Results, Finish
Review: Proofing, Comments, Tracking, Changes, Compare, Protect
View: Document Views, Show/Hide, Zoom, Window, Macros

Quick Access Toolbar

The quick access toolbar is a customizable toolbar that contains commands that you may want to use. You can place the quick access toolbar above or below the ribbon. To change the location of the quick access toolbar, click on the arrow at the end of the toolbar and click on Show Below the Ribbon.

You can also add items to the quick access toolbar. Right click on any item in the Office Button or the Ribbon and click on Add to Quick Access Toolbar and a shortcut will be added to the Quick Access Toolbar.

CSS Summary - XVIII

That wraps up this CSS tutorial - congratulations for making it to the end!.
In this tutorial, we learned that CSS stands for Cascading Style Sheets and that it is used for applying styles to web pages. We learned how to code and implement CSS using the "inline", "embedded", and "external" method.
We learned about classes and ids before applying styles such as font, backgrounds, borders, margins and more. We then covered the more advanced topics such as position, float, and layers, which allows us to create cool layouts.

CSS Layers - XVII

In CSS, layers refer to applying the z-index property to elements that overlap with each other.
The z-index property, when used in conjunction with the position property, enables you to specify which element should appear on top in the event of an overlap. An overlap can easily occur when using the position property, and this is often desirable when creating advanced layouts.
Example code:

<div style="background-color:red;
 width:100px;
 height:100px;
 position:relative;
 top:10px;
 left:80px;
 z-index:2;">
</div>
<div style="background-color:yellow;
 width:100px;
 height:100px;
 position:relative;
 top:-60px;
 left:35px;
 z-index:1;">
</div>

This results in:

CSS Float - XVI

The CSS float property enables you to determine where to position an element relative to the other elements on the page. When you use the float property, other elements will simply wrap around the element you applied the float to.
Example code:

<div style="width:300px;">
<h1 style="float:left;margin-right:10px;">CSS float</h1>
<p>If your browser supports the CSS float Property, this text will be flowing around the heading.
If this does not seem to work, it could be a browser compatibility thing...</p>
</div>

This results in:

CSS float

If your browser supports the CSS float Property, this text will be flowing around the heading. If this does not seem to work, it could be a browser compatibility thing...

CSS Positioning - XV

The term "CSS positioning" refers to using CSS to position elements on your HTML page. CSS allows you to position any element precisely where you want it. You can specify whether you want the element positioned relative to its natural position in the page orabsolute based on its parent element.
Absolute positioning can be very useful for creating advanced layouts and cool visual effects such as overlapping elements to present a layered effect.

Relative Positioning

To perform relative positioning in CSS you use position:relative; followed by the desired offset from either top, right, bottom orleft

<div style="position:relative;left:80px;background-color:yellow;width:100px;">
This div has relative positioning.
</div>

This results in:

This div has relative positioning.

This example offsets the element 80 pixels from the left of where it would have been. If we had specified top, it would appear 80 pixels below where it would have been. It's important to note that other elements are not affected by this element's offset. Therefore, overlapping may occur.

Absolute Positioning

To perform absolute positioning in CSS you use position:absolute; followed by the desired offset.

<div style="position:absolute;top:100px;left:60px;background-color:yellow;">

This div is absolutely positioned 100 pixels from the top and 60 pixels from the left of its containing block.

</div>

View the result

Fixed Positioning

Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling.

<div style="position:fixed;top:100px;left:60px;width:180px;background-color:red;">

This div is using a fixed position of 100 pixels from the top and 60 pixels from the left of its containing block. When this page scrolls, this box will remain in a fixed position - it won't scroll with the rest of the page. Go on - SCROLL!

</div>

CSS Height and Width - XIV

CSS includes height and width properties to help you specify the size of your elements.

'height' and 'width' Properties

Applies to all HTML elements except non-replaced inline elements, table columns and column groups.
Can use a fixed height (i.e. pixels) or a percentage height.

<div style="background-color:orange;height:125px;width:75px;">
This div has height and width applied.
</div>

This results in:

This div has height and width applied.

'max-height' and 'max-width' Properties

Enables you to constrain the height and/or width of an element to a maximum value.

<div style="background-color:orange;max-height:125px;max-width:75px;">
This div has max-height and max-width applied.
</div>

This results in:

This div has max-height and max-width applied.

'min-height' and 'min-width' Properties

Enables you to constrain the height and/or width of an element to a minimum value.

<div style="background-color:orange;min-height:125px;min-width:75px;">
This div has min-height and min-width applied.
</div>

This results in:

This div has min-height and min-width applied.

CSS Lists - XIII

CSS includes a number of list properties to help you style your HTML lists.

List Style Type

Determines what the bullet looks like. For info on the possible values see the list-style-type page.

<ul style="list-style-type:circle;">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

List Style Image

<ul style="list-style-image:url(/pix/printer_icon.gif);">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

List Style Position

Determines whether the bullet is located inside the list's containing box or outside.

<ul style="list-style-position:inside;">
<li>List item one</li>
<li>List item two</li>
</ul>
<ul style="list-style-position:outside;">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

• List item one
• List item two

List Style

The list-style property is shorthand for setting the list properties.

<ul style="list-style:square inside;">
<li>List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

Marker Offset

Used in conjunction with display:marker, marker-offset specifies the nearest border edges of the marker box and its associated principal box.

<ul>
<li style="display:marker;marker-offset:10px;">List item one</li>
<li>List item two</li>
</ul>

This results in:

• List item one
• List item two

At the time of writing, browser support for marker-offset was limited.

CSS Padding - XII

Padding defines the space between the element's border and its content. CSS padding is specified just like margins - they can be set individually for each side, or all sides at once.

Setting Padding on all Sides

This example uses the padding property to set padding on all sides of an element.

<p style="border:1px solid orange;padding:20px;">
This text has padding of 20 pixels on all four sides.
</p>

This results in:

This text has padding of 20 pixels on all four sides.

Setting Padding for Each Side

If you don't want the padding settings to be applied to all four sides, or if you want each side to have different padding, you can use the following properties:

• padding-top
• padding-right
• padding-bottom
• padding-left

Example:

<p style="border:1px solid orange;padding-left:60px;">This text has left padding of 60 pixels.</p>

This results in:

This text has left padding of 60 pixels.

Shorthand Property

Along similar lines to the margin shorthand property, the padding property is shorthand for padding-top, padding-right,padding-bottom, and padding-left.
Code:

<p>With padding:</p>
<div style="border:1px solid orange;width:100px;padding:20px 10px 0px 100px;">
Padded div
</div>
<p>Without padding:</p>
<div style="border:1px solid orange;width:100px;">
Non-padded div
</div>

Result:

With padding:

Padded div

Without padding:

Non-padded div

As you can see, applying padding to an element can affect the size of that element. In the example above, both <div> elements are specified to be 100 pixels wide. However, the padding on the first <div> pushes the size out, resulting in a larger <div>.

Variations

Again, as with margin, you don't need to provide different values for all four sides. You can provide one, two, three, or four values. Here's how it works:
If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.
In other words:

padding:10px;

• All four sides have padding of 10 pixels.

padding:10px 20px;

• Top and bottom have padding of 10 pixels.
• Right and left have padding of 20 pixels.

padding:10px 20px 30px;

• Top is 10px
• Left and right are 20px
• Bottom is 30px

padding:10px 20px 30px 40px;

• Top is 10px
• Right is 20px
• Bottom is 30px
• Left is 40px