WYSIWYG Editor in Detail



Similar documents
WYSIWYG Tips and FAQ

Joomla Article Advanced Topics: Table Layouts

MS Word 2007 practical notes

Help on Icons and Drop-down Options in Document Editor

Web Portal User Guide. Version 6.0

In this session, we will explain some of the basics of word processing. 1. Start Microsoft Word 11. Edit the Document cut & move

Quick Reference Guide

Mastering the JangoMail EditLive HTML Editor

Mass . General Use

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

To change title of module, click on settings

Google Docs Basics Website:

Introduction to Drupal

BLACKBOARD 9.1: Text Editor

Umbraco v4 Editors Manual

UNPAN Portal Content Management System (CMS) User Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

Website Editor User Guide

Creating Web Pages with Microsoft FrontPage

USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor

Basic Excel Handbook

OX Spreadsheet Product Guide

Joomla! 2.5.x Training Manual

GOOGLE DOCS APPLICATION WORK WITH GOOGLE DOCUMENTS

If you want to go back to the normal text just. Editing the code in HTML is a technical feature and it should only be done by advanced users.

Login: Quick Guide for dotcms & Accessibility November 2014 Training:

How to Use Swiftpage for Microsoft Outlook

Digital Marketing EasyEditor Guide Dynamic

LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team. Overview

Excel 2003 Tutorial I

PowerPoint 2007 Basics Website:

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Content Management System

Where do I start? DIGICATION E-PORTFOLIO HELP GUIDE. Log in to Digication

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Microsoft Word 2010 Prepared by Computing Services at the Eastman School of Music July 2010

Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION.

DRUPAL WEB EDITING TRAINING

Microsoft Word 2013 Tutorial

Using Adobe Dreamweaver CS4 (10.0)

Microsoft Word 2010 Tutorial

Advanced Presentation Features and Animation

How to Edit Your Website

Word processing software

How to Use Swiftpage for ACT! by Sage

How to Use Swiftpage for SageCRM

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

Exercise 4 - Practice Creating Text Documents Using WordPad

Excel 2007 Basic knowledge

Converting Prospects to Purchasers.

Web Ambassador Training on the CMS

Saving work in the CMS Edit an existing page Create a new page Create a side bar section... 4

MS Excel. Handout: Level 2. elearning Department. Copyright 2016 CMS e-learning Department. All Rights Reserved. Page 1 of 11

Starting User Guide 11/29/2011

How to Use Swiftpage for Microsoft Excel

General Electric Foundation Computer Center. FrontPage 2003: The Basics

KEZBER CONTENT MANAGEMENT SYSTEM MANUAL

ADOBE DREAMWEAVER CS3 TUTORIAL

Working with the new enudge responsive styles

Module One: Getting Started Opening Outlook Setting Up Outlook for the First Time Understanding the Interface...

Website Creator Pro Quick Reference Guide. Version: 0.5

No restrictions are placed upon the use of this list. Please notify us of any errors or omissions, thank you,

WORDPAD TUTORIAL WINDOWS 7

MICROSOFT WORD TUTORIAL

Terminal Four (T4) Site Manager

WORDPRESS MANUAL WEBSITEDESIGN.CO.ZA

Word 2007: Basics Learning Guide

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Drupal Training Guide

Maintaining a University website in the CMS

Advanced Word for Windows

User Guide. Chapter 6. Teacher Pages

User Manual Sitecore Content Manager

Word processing OpenOffice.org Writer

Merging Labels, Letters, and Envelopes Word 2013

SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production

Microsoft Excel 2010 Tutorial

Access Edit Menu Edit Existing Page Auto URL Aliases Page Content Editor Create a New Page Page Content List...

Mura CMS. (Content Management System) Content Manager Guide

Creating Personal Web Sites Using SharePoint Designer 2007

Creating Web Pages With Dreamweaver MX 2004

Basic Microsoft Excel 2007

Impress Guide Chapter 3 Adding and Formatting Text

Microsoft Word Quick Reference Guide. Union Institute & University

Introduction to Word 2007

Google Sites: Site Creation and Home Page Design

Microsoft FrontPage 2003

KOMPOZER Web Design Software

How to make a line graph using Excel 2007

1. Open the Practice web site. 2. Open the favorite.htm file. 3. Select the text to be used as the hyperlink for the first favorite web site.

OU Campus Web Content Management

Creating Accessible Documents in Word 2011 for Mac

customer community Getting started Visual Editor Guide!

Tutorial Microsoft Office Excel 2003

Quick Guide to the Cascade Server Content Management System (CMS)

Instructor User Guide Using and Administering EZ Test Online 7.01

Adobe Dreamweaver CC 14 Tutorial

Transcription:

WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4. Copy copies selected content to clipboard (requires a selection) 5. Paste places contents of clipboard on the page at the point of insertion 6. Paste from Word opens the Paste from Word dialogue box which serves to remove MS Word code which can have a detrimental effect on page display (see Paste from Word below) 7. Undo click to undo the last action 8. Redo click to redo the last action which was undone 9. Insert Table opens the Insert Table dialogue box (see Insert Table below) 10. Table, Row and Cell Properties opens the Edit Table, Row and Cell Properties dialogue box (see Edit Table, Row and Cell Properties below) 11. Add Row opens the Insert Row dialogue box (see Insert Row below) 12. Delete Row deletes the currently selected row (determined by the location of the cursor) 13. Insert Column opens the Insert Column dialogue box (see Insert Column below) 14. Delete Column deletes the currently selected column (determined by the location of the cursor) 15. Merge Cell With Another Cell opens the Merge Cell dialogue box (see Merge Cell below) 16. Unmerge Cell Unmerges currently selected merged cells (determined by the location of the cursor) or opens the Unmerge Cell dialogue box if merged cells span multiple rows (see Unmerge Cell below) 17. Insert/Edit and Image opens the Insert Image dialogue box (see Insert Image below) 18. Insert an icon opens the Available Icons dialogue box (see Available Icons below) 19. Horizontal Line opens the Insert Horizontal Line dialogue box (see Insert Horizontal Line below) 20. Insert/Edit a Hyperlink opens the Insert Link dialogue box (see Insert Link below) 21. Link To A Document opens the Link to a Downloadable Document dialogue box (see Link to a Downloadable Document below)

22. Insert/Edit a Bookmark opens the Insert Bookmark dialogue box (see Insert Bookmark below) 23. Special Characters opens the Special Characters dialogue box (see Special Characters below) 24. Paragraph Format menu of available styles predefined by the style sheet 25. Bold formats selected text as bold 26. Italic formats selected text as italic 27. Underline formats selected text as underlined (use only for links) 28. Align Left aligns selected text to the left (default) 29. Align Center aligns selected text to the center 30. Align Right aligns selected text to the right 31. Justify formats text as justified left to right 32. Numbering creates a numbered list 33. Bullets creates a bulleted list 34. Decrease Indent decreases the indent of the selected text/list item 35. Increase Indent increases the indent of the selected text/list item 36. Font Color opens the Select Color dialogue box (see Select Color below) 37. HighLight opens the Select Color dialogue box (see Select Color below)

Paste from Word 1. Place cursor in the Content window where new content will be inserted 2. Click Paste from Word 3. Place cursor in the content area of the dialogue box 4. Paste contents of clipboard into the window via keyboard shortcut (Ctrl + V or Command + V) 5. Tick Remove styles checkbox (default) 6. Click Insert to add content to page or Cancel to close dialogue box with no action Insert Table 1. Place cursor in the Content window where new table will be inserted 2. Click Inset Table 3. Enter appropriate values for the new table: a. Rows: number of rows (horizontally) b. Columns: number of columns (vertically) c. Width: determines width of table; pixel value or percent d. Height: please let table contents determine the height (leave blank) e. Cell Spacing: determines the distance between cells f. Cell Padding: determines the distance between the cell wall and the contents of the cell g. Border Size: determines pixel width of table border h. Border Collapse: when checked adjacent cells share a border i. Background Color: determines background color for the table j. Border Color: determines color of table border 4. Note Style Preview window showing effect of entered values 5. Click OK to add new table to the page or Cancel to close the window with no action Edit Table, Row and Cell Properties 1. Place cursor in the table, row or cell to be edited 2. Click Table, Row and Cell Properties 3. If editing a single cell, select This Cell tab in dialogue box (this tab is selected by default) and edit appropriate cell properties: a. Cell Width: determines width of cell; pixel value or percent of table width b. Cell Height: please let the content of the cell determine the cell height c. Vertical Alignment: determines vertical placement of cell contents (top, middle, bottom) d. Horizontal Alignment: determines horizontal placement of cell contents (left, center, right) e. Background Color: determines background color of cell f. Background Image: used to select an image as a background for the cell susceptible to browser incompatibilities (please avoid) 4. If editing row of cells, select This Row tab and edit appropriate row properties: a. Vertical Alignment: determines vertical placement for the contents of all cells in the row (top, middle, bottom) unless a specific cell is assigned alternate value b. Horizontal Alignment: determines horizontal placement for the contents of all cells in the row (left, center, right) unless a specific cell is assigned alternate value c. Background Color: determines background color of the row unless a specific cell is assigned alternate value 5. If editing entire table, select This Table tab and edit appropriate table properties: a. Cell Spacing: determines the distance between cells b. Cell Padding: determines the distance between the cell wall and the contents of the cell c. Table Width: determines width of table; pixel value or percent d. Table Height: please let table contents determine the height (leave blank) e. Align on page: determines table alignment on the page (left, center, right) f. Border Size: determines pixel width of table border

g. Border Collapse: when checked adjacent cells share a border h. Background Color: determines background color for the table unless a specific row or cell is assigned an alternate value i. Border Color: determines color of table border j. Background Image: used to select an image as a background for the table susceptible to browser incompatibilities (please avoid) 6. When edits are complete, click Apply to accept changes or Cancel to close window with no action Insert Row 1. Place cursor in a row adjacent to the location of row to be added 2. Click Add Row 3. Select Insert Above Selection or Insert Below Selection 4. Click OK to insert the new row or Cancel to close window with no action Insert Column 1. Place cursor in a cell adjacent to the location of column to be added 2. Click Insert Column 3. Select Insert to the Left of Selection or Insert to the Right of Selection 4. Click OK to insert the new column or Cancel to close window with no action Merge Cell 1. Place cursor in a cell adjacent to the cell to merge 2. Click Merge Cell With Another Cell 3. Select Merge with Cell to the Right or Merger with Cell Below 4. Click OK to merge cells or Cancel to close window with no action Unmerge Cell 1. Place cursor in a cell which is merged with another 2. Click Unmerge Cell 3. If merged cells do not span multiple rows, cells will automatically unmerge (no further action necessary) 4. If merged cells span multiple rows, select Unmerged with Cell to the Right or Unmerge with Cell Below in the Unmerge Cell dialogue box 5. Click OK to unmerge cells or Cancel to close window with no action Insert Image 1. Place cursor on the page where image should be placed (images can be drag and dropped after being placed on the page) 2. Click Insert/Edit an Image 3. Under Select an image, click on an image to select from the available images list, or 4. Add an image via the Upload an image utility in the upper-right-hand corner of the dialogue box a. Click Browse and locate the image to upload; click Open b. Click Upload File 5. Click OK to add the image to the page, Cancel to close the window with no action, or Next to assign additional attributes to the image: a. Source: this indicates the path to the image and should be left unchanged

b. Border: determines pixel width of the border around the image c. Width and Height: automatically set to actual (pixel) width and height of image; should be left unchanged with resizing handled by an image editor independent of the site editor d. Title: the text displayed by site readers for accessibility issues; should be a brief description of the image (e.g. Admissions Office Entrance) e. Text flow: determines placement of image relative to text; left, right, etc. (note Positioning Preview window when adjusting this value) f. Distance to surrounding text: determines the distance in pixels between the Top, Bottom, Left and Right edges of the image and the text (and other elements) on the page 6. Click OK to add the image to the page, Cancel to close the window with no action, or Choose a different image to return to the Select and Image screen (step 3 above) Available Icons 1. Place cursor on the page where the icon should be placed (typically at the end of a link) 2. Click Insert an icon 3. Click by single clicking on the appropriate icon 4. Click OK to add the icon to the page or Cancel to close the window with no action Insert Horizontal Line 1. Place cursor on the page where the horizontal line (horizontal rule) should be placed (typically at the end of a paragraph or section of text) 2. Click Horizontal Line 3. Enter appropriate values for the Horizontal Rule: a. Alignment: determines horizontal alignment for the line (left, center, right) b. Height: determines the pixel height of the line c. Width: determines the width (pixel or percent) of the line d. Color: determines the color of the line (subject to browser discrepancies) 4. Click OK to add horizontal line to the page or Cancel to close the widow with no action Insert Link 1. Select the string of text which will comprise the link 2. Click Insert/Edit a Hyperlink 3. Select Place in this document, E-mail Address or Web location (default) 4. For Web location, enter appropriate values: a. Address: URL of Web location (http://www.google.com) b. Title: short description or title of Web location for mouse-over (Google Search Engine) c. Window: determines into which window the Web location will open (default, new, etc.) 5. For E-mail Address, enter appropriate values: a. E-mail Address: e-mail address of recipient (info@domain.com) b. Subject: assigns subject line for email message c. Title: short description for mouse-over (Email for more information from Domain.com) 6. For place in this document, select from the list of available bookmarks on the page (if any exist see Insert Bookmark below) 7. Click OK to set selected text as a hyperlink or Cancel to close window with no action Link to a Downloadable Document 1. Select the string of text which will link to the document 2. Click Link to Document 3. Under Select a document, click on a document to select from the available documents list, or

4. Add a document via the Upload a document utility in the upper-right-hand corner of the dialogue box a. Click Browse and locate the document to upload; click Open b. Click Upload File 5. Click OK to set selected text as a hyperlink to the document or Cancel to close the window with no action Insert Bookmark 1. Place cursor on the page where the bookmark should be placed (typically at the top of a major section of a long page requiring vertical scrolling) 2. Click Insert/Edit a Bookmark 3. Enter Bookmark Name (each bookmark should have a unique name and not include spaces, slashes - \ or / - or other special characters: &,?, %, #, etc.) 4. Click OK to add bookmark to the page or Cancel to close window with no action Special Characters 1. Place cursor on the page where the special character should fall 2. Click Special Characters 3. Enter name code for appropriate character in the Insert: field or select from the table of characters 4. Click OK to add special character to the page or Cancel to close window with no action Select Color 1. Select a string of text to be colored or highlighted 2. Click Font Color or HighLight 3. Enter the hex color value for the desired color, or select a color from the color swatch table 4. When removing a font or highlight color, select Default at the bottom of the color swatch table 5. Click OK to commit color selection or Cancel to close window with no action Adding a new page/sub-link or sub-link to new URL 1. Browse to the section to which the new page needs to be added 2. Click the Add link at the bottom of the page 3. Enter the pertinent information for the new page: a. Topic Title: verbiage for the link which will provide access to the page b. Metadata: data which assists search engines in indexing the site and page properly c. Content: the WYSIWYG editor into which the contents for the page will be added 4. If the link will point to another section or site: a. Disregard step 3 and add the URL for the link in the Use this link for content field b. If the link will point to an external URL (outside the current site), tick the Open link in a new window checkbox 5. Tick the Visible checkbox in order to have the link to the new page or URL appear with the other links at the top of the content module 6. Click Submit to create the new page/sub-link or Cancel to cancel, and proceed to the current module administration index