WYSIWYG Tutorial



First Row Of Buttons

Special Character
Bold
Italic
Underline
Align 
Styles
Format

Second Row of Buttons

Spell Check
Bulleted List
Numbered List
Link
Indent
Anchor
Insert Image
Insert Media
Insert Horizontal Line
Table
HTML
Toggle Full Screen

First Row Of Buttons

Special Character

Step 1: Click on the Special Character symbol

SpecCharSymbl

Step 2: Select Special Character

SpecCharSelect

Bold

Step 1: Highlight the text to bold.

Step 2: Click on the bold letter B symbol.

Bold

Italic

Step 1: Highlight the text to italic.

ItalicHighLight

Step 2: Click on the italic letter I symbol.

Italic

Underline

Step 1: Highlight the text that to underlined.

Underline

Step 2: Click on the underline U symbol.

Underline

Align

Align Left: Align text on the left side of the page.

AlignLeft

Align Center: Align text in the center of the page.

AlignCenter

Align Right: Align text on the right side of the page.

AlignRight

Align Full: Justify text.

AlignJustify

Styles

Styles


Format

Paragraph: Select paragraph for normal text.

Headings: Headings 1-6 mark page headlines. Highlight the text to be the headline, and select Heading 1 as shown in the images below. 
Heading 1 is the largest and heading 6 is the smallest. Always start with heading 1 and if needed, go to the next consecutive number for 
a subheading. 

Correct Order: 1 →  2 →  3

Correct Order: 1 → 2 →  3 →  2 →  2 

Incorrect Order: 1 → 4

Format1

Format2

Second Row of Buttons

Spell Check

Spell check will underline words with red lines if the words are incorrectly spelled. To change the language, click on the arrow next to the spell checker symbol and select language. Spell Check is also available at the bottom fo the page near submit.

SpellCheck

Click: Advanced Options → Check: Spelling

SpellCheckAdv

Bulleted List

Step 1: Highlight text to include in bulleted list.

BulletHighLt

Step 2: Select bulleted list symbol

BulletInsert

NOTE: The text gets smaller when you turn it into a bulleted list. If you wish for it to go back to the paragraph format, 
select paragraph from the drop down format list, as shown below.

Step 1: Highlight bulleted list.

BulletP1

Step 2: Click on the paragraph under the format drop down box.

BulletP2

Numbered List

Step 1: Highlight text to include in numbered list.

NLHighLt

Step 2: Select numbered list symbol.

NL

NOTE: The text gets smaller when you turn it into a numbered list. If you wish for it to go back to the paragraph format, 
select paragraph from the drop down format list, as shown below.

Step 1: Highlight numbered list.

NLP1

Step 2: Click on the paragraph under the format drop down box.

NLP2

Link

Step 1: Highlight text to be linked and select the edit link symbol.

LinkHighLt

Step 2a: Continue here for an internal link and select the magnifying glass to browse local folders.

LinkIntBr

Step 2b: To locate the page to be linked, browse folders as usual in the left hand column.

LinkIntBr2

Step 2c: Once the link page or document is selected, confirm that the selection is correct and click on "confirm."

LinkIntBr3

Step 2d: The link selected will appear now under "Link" in brackets [academic/sis/about/index].

LinkIntSel

Step 3a: Continue here for an external link.

LinkExt

Step 3b: Type the external link or copy and paste from your browser to the link box.

LinkExtGoogle

Step 4: Target - If "Same Window" is selected , the link will open in the same window when selected on the page.If "New Window" is selected, the link will open in the same window when selected on the page. Typically, the same window target is used;however, if the user may want to view the previous page as well, the new window target is very useful.

LinkTarget

Indent

Indent a paragraph or list item. It is also possible to "undo an indent," which may be referred to as "outdent."

Indent

Anchor

An anchor allows you to jump down to a section further down on the page or to the top of the page. This is useful when pages are long and would otherwise require a lot of scrolling. Make sure your anchor name does not include a space! Insert the anchor where you would like the page to jump, then create a link and reference the anchor in the link.

Step 1: Select the anchor symbol.

Anchor1

Step 2: Name the Anchor.

Anchor2Anchor3

Step 3: Create a link and type the name of the anchor under "Anchor."

AnchorLink

For more information on creating a link, click on the following link: Link

Insert Image

Step 1: Click on the image symbol.

Image

Step 2a: Continue here to insert an internal image.

Image2

Step 2b: Click on the magnifying glass to browse folders for an image.

ImageBr

Step 2c: Select the folder location of the image.

ImageFolder

Step 2d: Verify that the correct image is selected and click "Confirm."

ImageChoose

Step 2e: The location of the image will now be displayed next to the image in brackets.

ImageSel

Step 3: Note the warning for decorative images. IT IS RARE to have a decorative image!

ImageDec

Step 4: Size the picture

ImageSize


Insert Media

Media


Insert Horizontal Line

Line


Table

Table


HTML

html


Toggle Full Screen

FullScreen

Purdue University, West Lafayette, IN 47907 (765) 494-4600

© 2017 Purdue University | An equal access/equal opportunity university | Copyright Complaints | Maintained by CLA

If you have trouble accessing this page because of a disability, please contact the College of Liberal Arts Webmaster.

Some content on this site may require the use of a special plug-in or application. Please visit our plug-ins page for links to download these applications.