How to Use the WYSIWYG

Total Page:16

File Type:pdf, Size:1020Kb

How to Use the WYSIWYG How to use the WYSIWYG The WYSIWYG Editor is a text editor, similar to MS Word, that is used to produce program brochures in Web page format. ‘WYSIWYG’ is pronounced ‘whizzy-wig’ and stands for, ‘What You See Is What You Get.’ Different browsers work differently with the WYSIWYG content. If you're having trouble getting the content to appear as desired, try working in a different browser as this may give you different results Each Terra Dotta software client that subscribes to your programs has a unique layout and CSS on their own website. When they download your programs, some styling could be overridden by their site’s CSS. The WYSIWYG Editor, as seen above, can be used to insert and modify any text, image, table, hyperlinks, documents, and special characters for use on your program brochures. WYSIWYG Editor Options Font drop-down list box - The font drop-down list enables you to change the font of the text by selecting an option from the drop-down list box. Size drop-down list box - The size drop-down list enables you to change the size of the text by selecting an option from the drop-down list box. Paragraph Format drop-down list box - The format drop-down list enables you to apply a pre-defined font and size format to the text by selecting a format from the drop-down list box. ‘Normal’ is the default setting. Insert Web Link icon (a picture of a globe with a linked chain at the bottom) - enables you to insert various types of links. When you highlight text in the content area and click the icon, a window appears: Link Type: There are three different link types that are available for you to choose from. The different types of links allow advanced functionality. Choose the link type from the drop-down box. URL: This is the most common kind of link. If you wish to insert a URL link, choose ‘URL’ under ‘Link Type.’ Choose the correct Protocol (http, https, ftp, news or other) and copy the URL into the ‘URL’ field. You can also specify how the link will appear to the reader under the ‘Target’ tab. You can choose to have the link appear in the same window, a pop-up window, or other options. Additional options for experienced web editors are located under the ‘Advanced’ tab. Click ‘OK’ to apply. Link to anchor in the text: You have the ability to link to another section of the same document. This feature could be used to create a linkable contents list in a brochure, for example. In order to set up this kind of link, first you have to create the ‘anchor.’ (Read about how to create anchors in the ‘anchor’ section below.) Choose ‘Link to anchor in the text’ under ‘Link Type.’ Select the anchor to which you’d like the text to link. Additional options for experienced web editors are located under the ‘Advanced’ tab. Click ‘OK’ to apply. For more information about anchors and how to use them, you can also refer to the Knowledgebase video, ‘Video: How to add anchor links.’ E-mail: You can set up the link so that it will launch the user’s default email program with a new message with pre- defined fields. Choose ‘E-mail’ under ‘Link Type.’ Define the email address to which the message should be sent. You can also specify default message subjects and body. Additional options for experienced web editors are located under the ‘Advanced’ tab. Click ‘OK’ to apply. The Insert Anchor icon (a picture of a flag) allows you to link text in your webpage to another part of the text in same webpage. This functionality is useful for a ‘table of contents’ in brochures. First, decide which text you wish to be the ‘anchor.’ This is the text that will be the destination of the link. When the linked text is clicked, the viewer will be brought to the anchor. Highlight the text you wish to turn into an anchor and click the anchor icon. A box will appear. Assign the anchor a name and click ‘OK.’ A picture of an anchor will appear in the WYSIWYG next to the text assigned as the anchor. This anchor will not be visible to site visitors. The Image icon enables you to insert or modify images in the content: Use this icon for images that are already published on the web (either on your site, or a different site) and have a URL, or for images that have already been uploaded to the WYSIWYG. When you click the icon, a new window appears where you can specify the URL of the image and set its position within the page. You can also change the dimensions of the image to make it larger or smaller – however, for best results we recommend that the image be formatted and sized properly before uploading them to the WYSIWYG. The text that appears in the sample window demonstrates how text will wrap around the image – this text will not appear to the viewer. Click ‘OK’ to insert the image. The Image Library icon allows you to insert an image from your Image Library: Use this icon to insert images that you’ve already uploaded to the Image Library or browse your computer and insert new images. The Document Center icon enables you to insert a file: When you click the icon, a new window opens. You can attach a document that already exists in the Document Center, or you can browse your computer to upload a file from your documents. You can then decide if the file should appear as a pop-up window (recommended for web content), or in-line with the page. Click ‘Submit’ to upload the document. The Table icon helps you insert a table in the content of the Web site. When you click the link, a window appears, prompting you to enter the size and other specifications for the table. Click ‘OK’ to insert the table. You can also edit the table after it is inserted. The Source icon allows you to switch between the normal WYSIWYG Editor view and raw html: If you click on the Source icon, the WYSIWYG Editor will switch to an html editor. In this view, you can see the underlying html as well as edit it. Click the Source icon again and the Editor will revert to the regular WYSIWYG view. The Insert Special Character icon allows you to insert characters that do not appear on a normal keyboard: If you click the icon, a window will appear with the options for special characters. Click the character you would like to insert and it is inserted automatically. The Paste from Word icon helps you to clean non-html tags from highlighted text that may exist from a copy or paste performed from a MS Word document. When you click the icon, a new window will appear. Paste your text from your word document and it will be inserted in the WYSIWYG Editor. Note: Copying and pasting from a Word document is not recommended. Instead, try copying from Word, pasting into a plain text editor such as Notepad, and then copying the content from Notepad and paste it into your WYSIWYG Editor. By first pasting in Notepad you will remove the excess htnl tags which can cause format problems in the WYSIWYG. This method tends to work better than using this Remove tags button. The Remove Format icon allows you to remove the formatting from text that you have pasted using the Paste from Word icon: Highlight the text from which you wish to remove formatting. Click the icon, and the formatting will immediately be removed. Font Format icons: You have the following font format options: Bold Italics Underline Strikethrough XSubscript XSuperscript Undo and Redo icons: Click the icon pointing to the left (the Undo icon) to undo changes to your text. Click the icon pointing to the right (the Redo icon) to redo the changes that were deleted or undone. Text alignment icons: Use these icons to align the text and/or images to the left of the page, the center, the right, or to ‘justify’ (evenly space) the text over the entire page. Advanced Formatting icons: You can insert a numbered list, insert bullet points, decrease an indentation in the text, or increase an indentation in the text. Helpful Hint: You can insert a space between bullets or numbered lines by holding down the Shift key when you hit Enter. Text Color & Background Color icons: You can change the color of the text by highlighting the text you wish to edit and clicking the Text Color icon. You can also highlight the background behind text by highlighting the text and clicking the Background Color icon. Choose the color you wish to use for the text from the Automatic section, or click ‘More Colors’ in order to choose or create customized colors. If you know the ‘Hex’ code for the color you would like to use, you can enter it in the text box. Click ‘OK.’ Insert Horizontal Line icon: Click this icon to insert a horizontal line into the text. Preview icon: Click the Preview icon to see a preview of how the page will look to a viewer. This can be used to check the placement of elements in the content in different browser dimensions. Note: The preview button does not apply the site's CSS formatting, so content may look different in the preview window than on the site.
Recommended publications
  • Effects of Scroll Bar Orientation and Item Justification in Using List Box Widgets
    Effects of scroll bar orientation and item justification in using list box widgets G. Michael Barnes Erik Kellener California State University Northridge Hollywood Online Inc. 18111 Nordhoff Street 1620 26th St., #370S Northridge, CA 91330-8281 USA Santa Monica, CA 90404 +1 818 677 2299 +1 310 586 2020 [email protected] [email protected] Abstract List boxes are a common user interface component in graphical user interfaces. In practice, most list boxes use right-oriented scroll bars to control left-justified text items. A two way interaction hypothesis favoring the use of a scroll bar orientation consistent with list box item justification was obtained for speed of use and user preference. Item selection was faster with a scroll bar orientation consistent with list item justification. Subjects preferred left- oriented scroll bars with left-justified items and right-oriented scroll bars with right-oriented items. These results support a design principle of locality for user interface controls and controlled objects. Keywords List widgets, scroll bar, graphical user interface design, usability study Introduction This electronic publication is an updated statistical analysis of Erik Kellener’s unpublished masters’ thesis, “Are GUI Ambidexterous” completed at California State University Northridge, CA. 1996. List boxes are used in many graphical user interfaces (GUI) today. Whether its a desktop P.C., a personal digital assistant (PDA) or an information kiosk at the grocery store, list boxes are integrated into most GUIs. The list box GUI component is usually present in an interface that asks a user to make a selection from a list of items. The size of the list of items can vary significantly, however the screen area required by a list box is usually fixed.
    [Show full text]
  • How to Create and Maintain a Table of Contents
    How to Create and Maintain a Table of Contents How to Create and Maintain a Table of Contents Version 0.2 First edition: January 2004 First English edition: January 2004 Contents Contents Overview........................................................................................................................................ iii About this guide..........................................................................................................................iii Conventions used in this guide................................................................................................... iii Copyright and trademark information.........................................................................................iii Feedback.....................................................................................................................................iii Acknowledgments...................................................................................................................... iv Modifications and updates..........................................................................................................iv Creating a table of contents.......................................................................................................... 1 Opening Writer's table of contents feature.................................................................................. 1 Using the Index/Table tab ...........................................................................................................2 Setting
    [Show full text]
  • Screencreator Menus and Toolbars
    14 ScreenCreator Menus and Toolbars Chapter . Scr Menu Cr Menu Menu Librar Menu T Menu Menu Pr Menu Menu 4–2 The Menus and Toolbars ScreenCreator Menus The Screen Menu The Screen menu contains commands for creating a new screen, opening, closing or deleting screens, as well as printing a screen and editing all screen colors. If the Screen menu command can also be called by a Standard Toolbar tool, the tool is shown below the menu command. The large Screen menu on the near right is available when a screen is open. The small Screen menu on the Toolbars far right is available if no screen is open. The Menus and Screen > New creates and opens a new Untitled screen. Screen > Open... calls the Open Screen dialog box, allowing you to select and open a screen. Menus and Toolbars Selecting Simple Display is the opposite of Details in other Windows Open boxes and only shows the screen icons. 4–3 The Menus and Toolbars Screen > Open... Clicking Select... brings up the normal Windows Select Folder box. The Preview function can be The Menus and very useful for selecting the Toolbars right screen. All screens of the current project are shown. Screen > Close does just that, closes the selected screen. Screen > Save simply saves the current screen, with any changes you may have made. and Toolbars Menus 4–4 The Menus and Toolbars Screen > Save As... calls the Save Screen dialog box, allowing you to save the current screen (under a different name or under a different registration number). Compile When Saving can be deselected to allow creating and saving screens without assigning PLC addresses to parts.
    [Show full text]
  • Zoomtext Quick Reference Guide Version 10
    ZoomText Quick Reference Guide version 10 Contents Welcome to ZoomText 10 ................ 3 Cursor Enhancements ............................24 System Requirements ............................... 4 Focus Enhancements ..............................25 Installing ZoomText ................................. 5 Font Enhancements .................................26 Activating ZoomText ............................... 6 Desktop Finder ........................................27 Starting ZoomText .................................... 8 Web Finder ...............................................28 ZoomText User Interface ......................... 9 Text Finder ...............................................31 Enabling and Disabling ZoomText ...... 11 Smooth Panning ......................................33 Magnifier Toolbar .......................... 12 Reader Toolbar .............................. 35 Setting the Magnification level ............. 13 Turning Speech On and Off ...................36 Selecting a Zoom Window .................... 14 Adjusting the Speech Rate .....................37 Adjusting a Zoom Window ................... 16 Synthesizer Settings ................................38 Using the Freeze Window ..................... 17 Typing Echo .............................................39 Using View Mode ................................... 18 Mouse Echo ..............................................40 Dual Monitor Support ............................ 19 Verbosity...................................................41 Color Enhancements .............................
    [Show full text]
  • 52. What Is Binary • Language That Hardware Uses to Communicate
    Language that hardware uses to communicate Digital images are made up of little dots of colour 52. What is Binary Made of 1’s and 0’s - 1 means on and data is present 57. Pixels called pixels and 0 means off and no data is present Image resolution describes the quality of an image. It tells 53. Binary Table 128 64 32 16 8 4 2 1 58. Image Resolution us how many pixels there are in an image. The higher the number, the better the image quality is. The letter A is represented by the number 65 Image resolution is measure in pixels per inch 128 64 32 16 8 4 2 1 For short, this is written as ppi 54. A in Binary 59. Pixels per Inch 0 1 0 0 0 0 0 1 Sometimes, it is referred to as dpi and this is short for dots So A is 01000001 per inch C = 67 60. High Resolution Because high resolution images contain more pixels per inch 128 64 32 16 8 4 2 1 Images – Good Points they can create very good quality images 0 1 0 0 0 0 1 1 Because high resolution images contain more pixels per inch a = 97 55. Text to Binary 61. High Resolution they hold a lot of data. 128 64 32 16 8 4 2 1 Images – Bad Points The bad point of a high resolution image is that they can Converting the 0 1 1 0 0 0 0 1 often take up a lot of storage space word Cat to Binary t = 116 128 64 32 16 8 4 2 1 Because they do not contain as many pixels per inch as high 62.
    [Show full text]
  • WYSIWYG Editor OU Campus V10
    WYSIWYG Editor OU Campus v10 OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 800.362.2605 805.484.9428 (fax) www.omniupdate.com Copyright ® 2014 OmniUpdate, Inc. All rights reserved. Document Number: b-003 Publish Date: 7/16/2014 ® OmniUpdate and OU Campus™ are trademarks or registered trademarks of OmniUpdate, Inc. Any other company and product names, and trademarks mentioned within are property of their respective owners. Content is subject to change without notice. About OmniUpdate, Inc. ® OmniUpdate is the leading web content management system (CMS) provider for higher education. The company focuses on providing an exceptional product and customer experience to its OU Campus™ CMS users who manage more than 700 web and mobile sites in the U.S. and around the world. OU Campus is secure and scalable, server and platform independent, and seamlessly integrates with other enterprise campus systems. It provides college and university web developers, administrators, and marketers with the user- friendly tools and deployment flexibility they need to achieve excellence. For more information, visit . About This Guide The WYSIWYG Editor document provides a PDF version of the Support Site topics regarding the usage of the WYSIWYG Editor and the tools available for it. OU Campus Support The Support site is available to everyone and users are encouraged to visit and browse the site for information. An institution's administrators are also available if the answer cannot be found on the Support site or further explanation and clarification is needed. Administrators may contact the OmniUpdate Support Team.
    [Show full text]
  • Horizontally Scrollable Listboxes for Windows 3.X, Using C++
    Horizontally Scrollable ListBoxes for Windows 3.x, using C++ Ted Faison Ted is a writer and developer, specializing in Windows and C++. He has authored two books on C++, and has been programming in C++ since 1988. He is president of Faison Computing, a firm which develops C++ class libraries for DOS and Windows. He can be reached at [email protected] List boxes are among the most commonly used child controls in Windows applications. List boxes are typically used to show lists of files, fonts, or other variable-length lists of textual information. To add a list box to a dialog box, you generally edit a resource file, using programs such as Microsoft's Dialog Editor or Borland's Resource Workshop. Windows handles most of the list box details transparently. For example, if you add strings to a list box, Windows will automatically put a scroll bar on the control when the list box contains more strings than can be displayed in the client area of the list box. Windows handles scroll bar events - such as moving the thumb or clicking the up/down arrows - without any need for user code. Displaying a list of files in a list box is a somewhat easy task, because filenames have a predefined maximum number of characters. When you create the list box resource, you will generally make the control wide enough to display the longest filename. But what if you use a list box to display strings of varying and unknown length, such as the names of people or the titles of your CD collection ? You could obviously make the list box wide enough to accommodate the widest string you expect, but that would not only look pretty bad, but also waste a great deal of space on the screen.
    [Show full text]
  • Listbox User Manual
    LISTBOX USER MANUAL (Version: 1.2, December2015) This guide explains how to use the basic functionalities of the ListBox v 4.2. www.athensa.tv Legal notice The information in this manual is furnished for informational use only. No part of this manual may be reproduced or transmitt ed in any form or by any means, electronic or mechanical, for any purpose, without the prior written permission of ATHENSA LLC. The software, described in this manual, is owned by DMT Ltd and ATHENSA LLC. It is protected by Bulgarian Copyright Law, as well as by international copyright treaties, and may be used or copied only in accordance with the license agreement. ATHENSA LLC provides this manual “as is” without any warranty, either express, or implied. This publication may contain typographical errors or technical inaccuracies. While every precaution has been taken in the preparation of this document, ATHENSA LLC assumes no responsibility for errors or omissions. Nor is any liability assumed for damages, resulting from the use of the information, contained herein. Changes are periodically made to the information herein. They will be incorporated in new versions of the manual. Please, check the ATHENSA website regularly for User Manual updates. DMT Ltd. and/or ATHENSA may introduce changes or improvements in the products, described in this manual at any time, without any special notice. Please, address your comments or questions to: ATHENSA LLC 2970 Clairmont Road NE, Suite 640, Atlanta, Georgia 30329, USA Tel. +1 (404) 424 9283 Fax +1 (404) 835 1705 [email protected] https://athensa.tv/ 2 Contents LEGAL NOTICE..............................
    [Show full text]
  • IG7013-Toolbars.Pdf
    Impress Guide Appendix B Toolbars Copyright This document is Copyright © 2021 by the LibreOffice Documentation Team. Contributors are listed below. You may distribute it and/or modify it under the terms of either the GNU General Public License (http://www.gnu.org/licenses/gpl.html), version 3 or later, or the Creative Commons Attribution License (http://creativecommons.org/licenses/by/4.0/), version 4.0 or later. All trademarks within this guide belong to their legitimate owners. Contributors To this edition. Peter Schofield Dave Barton Feedback Please direct any comments or suggestions about this document to the Documentation Team’s mailing list: [email protected] Note Everything sent to a mailing list, including your email address and any other personal information that is written in the message, is publicly archived and cannot be deleted. Publication date and software version Published February 2021. Based on LibreOffice 7.0. Using LibreOffice on macOS Some keystrokes and menu items are different on macOS from those used in Windows and Linux. The table below gives some common substitutions for the instructions in this document. For a detailed list, see the application Help. Windows or Linux macOS equivalent Effect Tools > Options LibreOffice > Preferences Access setup options menu selection Right-click Control+click or right-click Open a context menu depending on computer setup Ctrl (Control) ⌘ (Command) Used with other keys F11 ⌘+T Open the Styles deck in the Sidebar Documentation for LibreOffice is available at
    [Show full text]
  • Revisiting XSS Sanitization
    Revisiting XSS Sanitization Ashar Javed Chair for Network and Data Security Horst G¨ortzInstitute for IT-Security, Ruhr-University Bochum [email protected] Abstract. Cross-Site Scripting (XSS) | around fourteen years old vul- nerability is still on the rise and a continuous threat to the web applica- tions. Only last year, 150505 defacements (this is a least, an XSS can do) have been reported and archived in Zone-H (a cybercrime archive)1. The online WYSIWYG (What You See Is What You Get) or rich-text editors are now a days an essential component of the web applications. They allow users of web applications to edit and enter HTML rich text (i.e., formatted text, images, links and videos etc) inside the web browser window. The web applications use WYSIWYG editors as a part of comment functionality, private messaging among users of applications, blogs, notes, forums post, spellcheck as-you-type, ticketing feature, and other online services. The XSS in WYSIWYG editors is considered more dangerous and exploitable because the user-supplied rich-text con- tents (may be dangerous) are viewable by other users of web applications. In this paper, we present a security analysis of twenty five (25) pop- ular WYSIWYG editors powering thousands of web sites. The anal- ysis includes WYSIWYG editors like Enterprise TinyMCE, EditLive, Lithium, Jive, TinyMCE, PHP HTML Editor, markItUp! universal markup jQuery editor, FreeTextBox (popular ASP.NET editor), Froala Editor, elRTE, and CKEditor. At the same time, we also analyze rich-text ed- itors available on very popular sites like Twitter, Yahoo Mail, Amazon, GitHub and Magento and many more.
    [Show full text]
  • Workshop 1: Introduction to LATEX
    Workshop 1: Introduction to LATEX Dan Parker and David Schwein Sunday, September 21, 2014 Welcome to the first of the Science Center’s LATEX workshops! By the end of today’s workshop, you will be able to write a basic LATEX document containing mathematics. We assume that you have a working installation of LATEX and a LATEX editor. If you do not, please consult the installation guide. 1 Introduction 1.1 Questions and Answers What is LATEX? LATEX is a document preparation system, the de facto standard for mathematics, physics, and computer science. More technically, LATEX is a set of macros – extra commands – for the pro- gramming language TEX. Donald Knuth created TEX in the seventies because he was unhappy with the typography in one of his Art of Computer Program- ming books. He designed the program specifically for typesetting mathematics, and it was widely adopted in the years following its release. Later, in the eight- ies, Leslie Lamport wrote LATEX to extend TEX’s mostly low-level functionality. Today, LATEX has largely superseded TEX. Why should I use LATEX? 1.L ATEX documents are beautiful. Their typography is outstanding, espe- cially as compared to something like Microsoft Word. 2.L ATEX can make almost any document you can imagine and many others besides. 3.L ATEX is free, fast, and has virtually no bugs. LATEX is not for everyone, even among academics. While designing these workshops we found, for instance, that the chemistry department at Brown 1 does not care for LATEX. But mathematicians should certainly use LATEX, mainly because people will not take you seriously if you don’t.1 For the same reason, papers in other math-heavy scientific disciplines, such as physics and computer science, should also be prepared using LATEX.
    [Show full text]
  • Unit 2 Lesson 2.1-3
    Designing User Interface-1 Unit 2 Designing User Interface-1 Introduction In previous lesson, we have learned how to write simple Visual Basic code. In this lesson, we will learn how to work with some common controls and write codes for them. Some of the commonly used controls are label, text box, button, list box and combo box. However, in this lesson, we shall only deal with the text box the label, and buttons we shall deal with other controls later. Lesson 2.1-3 Adding Basic Controls Upon completion of this unit you will be able to . Place textbox control on the Form. Place label control on the Form. Place command button on the Form. Outcomes TextBox Controls The TextBox is the standard control for accepting input from the user as well as to display the output. For this reason, they tend to be the most frequently used controls in the majority of Windows applications. It can handle string (text) and numeric data but not images or pictures. String in a TextBox can be converted to a numeric data by using the function Val (text). In this section, we will discuss the most useful properties of TextBox controls. After you place a TextBox control on a form, you must set a few basic properties. The first thing I do as soon as I create a new TextBox control is clear its Textproperty. If this is a multiline field, I also set the MultiLineproperty to True. You can set the Alignment property of TextBox controls to left align, right align, or center the contents of the control.
    [Show full text]