Using the WYSIWYG Toolbar

Click on a button to learn its function

Bold Button

The bold button changes to font weight of the selected text to bold.

Example: This is bold text.

Italic Button

The italic button italicizes any selected text.

Example: This is italicized text.

Underline Button

The underline button underlines any selected text.

Example: This is underlined text.

Unordered List Button

The unordered list button starts a new unordered (bulleted) list.

Example:

Item A
Item B
Item C

Ordered List Button

The ordered list button starts a new ordered (numbered) list.

Example:

First item
Second item
Third item

Insert/Edit Link Button

This button allows you to add a link to any selected text or edit an existing link. Selecting text and clicking the button brings up the following menu:

Link URL: Put your desired link here.

Target (optional): Choose whether you want the link to open in a new window.

Title (optional): When a user hovers over the link, the title will display.

Class (optional): Used for advanced formatting. Generally, you won't change this.

Example: WSU Vancouver becomes WSU Vancouver with these settings:

Break Link Button

This button removes the link from any selected text containing a link.

Example: WSU Vancouver becomes WSU Vancouver when you select it and click the break link button.

Insert/Edit Image Button

This button allows you to insert an image into your page already on the internet as well as giving you the ability to edit an image you have already inserted. Clicking it will bring up this menu:

Image URL: Place the URL of the image you want to display here.

Image description (Recommended, but optional): The text you type here will show up when you hover over the image.

Alignment (Optional): These are options for how your image is placed in relation to the text. Left and right are your best options.

Dimensions (Optional): Here you can manually set the size of the image in pixels. You can scale your image by setting one value and leaving the other blank. Important: Setting both values manually can result in a distorted image.

Border (Optional, but not recommended): This will place a solid border around your image. The number you enter will be the width of the border in pixels. WSU Vancouver does not recommend using image borders.

Vertical space (Optional): This field allows you to put "padding" around your image, specifically above and below it. This is also set in pixels.

Horizontal space: Places padding to the left and right of the image. This is also set in pixels. Recommended values: 5 or 10.

Example:

An image of the Adminsitration Building in Fall

Note: If possible, avoid using the border property. It is used here merely to illustrate the result.

Superscript Button

The superscript button changes selected text to superscript.

Example: 3 to the 10th power can be written as 3¹⁰ or 59,049

Subscript Button

The subscript button changes selected text to subscript.

Example: The base 12 logarithm of 144 can be written as log₁₂(144) or 2.

Blockquote Button

The blockquote button indents the selected text in the way you would write a long quotation.

Example: In the words of Abraham Lincoln,

"Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this."

Remove Formatting Button

The remove formatting button will remove any styling associated with selected text.

Example:

This sentence is in bold and italics as well as being underlined.

After selecting and removing formatting:

This sentence is in bold and italics as well as being underlined.

Choose Formatting Box

This drop-down box has several different types of formatting that can be applied to selected text.

Examples:

Paragraph

Address

Preformatted

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Div

Paste From Word Button

This button is very important for copying and pasting text from Microsoft Office products. Instead of pasting text directly into your the body section while creating a page, click the paste from word button and paste your text in the box provided. If you do not, you may encounter code in your content associated with Microsoft Office projects.

Example of pasting directly into the browser:

@font-face { font-family: "Cambria"; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0in 0in 0.0001pt; font-size: 12pt; font-family: "Times New Roman"; }div.Section1 { page: Section1; }

The text above is Office Open XML markup. You can avoid it by using the paste from word button.

Example of pasting with paste from word:

The text above is Office Open XML markup. You can avoid it by using the paste from word button.

Insert/Modify Table Button

This button inserts a table wherever your cursor is placed. When you click the button, it will bring up this menu:

Cols: How many columns the table will have.

Rows: How many rows the table will have.

Cellpadding: The amount of whitespace (in pixels) between your content and the outside border of the containing table cell.

Cellspacing: The distance (in pixels) between the border of a cell and any adjacent cells.

Alignment: How the table is aligned on the page (left, center, right).

Border: The thickness of the borders of the cells.

Width: The total width of the table (in pixels or percent)

Height: The total height of the table (in pixels or percent).

Class: Used for advanced formatting (not at all recommended).

Table caption: Enables a table caption.

Example:

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Settings used:

Table Row Properties Button

This button allows you to set the properties of the row where your cursor is set (by default). Clicking the button brings up this menu:

Row in table part: Used to set rows as a header row, body row or footer row.

Alignment: Aligns the contents of the cells to the left, middle or right.

Vertical alignment: Aligns the contents of the cells to the top, middle or bottom.

Class: Used for advanced formatting (not at all recommended).

Example:

Table

Row

Alignment

Cells are aligned to the bottom right.

Table Cell Properties Button

This button allows you to set the properties of the cell where your cursor is set (by default). Clicking the button brings up this menu:

Attributes (all optional):

Alignment: Aligns the contents of the cell to the left, middle or right.

Cell type: Specifies whether the selected cell is data or a header.

Vertical alignment: Aligns the contents of the cell to the top, middle or bottom.

Scope: Assigns a header to the specified area.

Width: The total width of the cell (in pixels or percent).

Height: The total height of the cell (in pixels or percent).

Class: Used for advanced formatting (not at all recommended).

Insert Row Before Button

Inserts a row above where your cursor is placed.

Example:

Cursor is placed in C2.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click insert row before.

Caption
A1	B1	C1	D1	E1

A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Insert Row After Button

Inserts a row below where your cursor is placed.

Example:

Cursor is placed in C2.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click insert row after.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2

A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Delete Row Button

Deletes the row where your cursor is placed.

Example:

Cursor is placed in B4.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click delete row.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A5	B5	C5	D5	E5

Insert Column Before Button

Inserts a column to the left of where your cursor is placed.

Example:

Cursor placed in D3.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click insert column before.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Insert Column After Button

Inserts a column to the right of where the cursor is placed.

Example:

Cursor is placed in E1.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click insert column after.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Remove Column Button

Removes the column where the cursor is placed.

Example:

Cursor placed in B5.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click remove column.

Caption
A1	C1	D1	E1
A2	C2	D2	E2
A3	C3	D3	E3
A4	C4	D4	E4
A5	C5	D5	E5

Split Merged Cells Button

Splits selected merged cells. All content is placed in the first cell.

Example:

Cells A1-E1 are merged.

Caption
A1B1C1D1E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click split merged cells.

Caption
A1B1C1D1E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Merge Cells Button

If cells are selected: Merges selected cells into a single cell.

If no cells are selected: A window will prompt you to ask how many rows and column you want your merged cell to span. The merge will occur down and to the right.

Example:

Cell A1 is selected.

Caption
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5

Click merge cells and choose to span five columns and one row.

Caption
A1B1C1D1E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5