DOCSLIB.ORG

How to WYSIWYG (PDF)

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
How to WYSIWYG (PDF) How to WYSIWYG What You See Is What You Get What is a WYSIWYG? WYSIWYG is a tool that allows you to see what your content will look like on the page as you are creating it. It is most like a word processor such as Microsoft Word. The WYSIWYG editor in Cascade is optimized for the Cascade CMS and building out our Agnes Scott web pages. The content WYSIWYG editor allows you to create content for your site using many useful features — special characters, images, tables, links and lists o Note: A few select settings available in the built-in editor should not be used on our websites for technical, design and usability reasons. This includes, but is not limited to: . Do NOT change the Font, Font-Size, or Font-Color Quick Guide to the WYSIWYG editor WYSIWYG tool box As you see the WYSIWYG looks and works very similar to the editing toolbar in Word. There are a few things to note that I will describe below. 1. Copy and Paste in the WYSIWYG using paste as plain text (ctrl + shift + v) 2. For consistent font, sizing, spacing and accessibility be sure to use the formatting tools for headers, list, spacing and content blocks. a. Using the show blocks tool will display dashed-lines around content elements to help you see where various formats are being applied i. Located in the “view” dropdown menu Paste in plain text, under the edit tab OR using keyboard shortcut ctrl+shift+v Formats available for use will appear in the “Format” dropdown menu. Format element (Also referred to as a “Block” or “Div”) Dashed-line around element Types of Format Elements Headings: Blocks: Bullet: • H1 / Heading 1 • P / Paragraph • Default • H2 / Heading 2 • Blockquote • Circle • H3 / Heading 3 • Div / Div • Disc • H4 / Heading 4 • Pre • Square • H5 / Heading 5 • H6 / Heading 6 Custom: List: • Align-left • Default Inline: • Align-right • Decimal • < > / code (inline can be • center • Lower Alpha used within any Format • Lower Greek Element and will show that • Lower Roman format element) • Upper Alpha • Upper Roman Formats rendered on a page View blocks within the WYSIWYG Headings will have an ‘H’ followed by a single number (1-6). Each number corresponds to the type of heading and how that block will be displayed Inline text will keep the “view block” tag and keep the elements style however any text you select and add and inline style to will display exactly Inline text can have any tag how it is typed in the WYSIWYG. Inline is used when you want insert code or math formulas that may interfere with the html. These blocks are used for the large chunk of content. ‘P’ will have more space between view blocks compared to a ‘div’ which has no spacing. Blockquotes is indented from both sides. Pre – removes all formatting and will spill over the page if there is no break in the text. Formats rendered on a page View blocks within the WYSIWYG The shape of the bullet will be different for each type, however the view block tag will be ‘ul’ for each. Formats rendered on a page View blocks within the WYSIWYG The shape of the listing character will be different for each type, however the view block tag will be ‘ol’ for each. Empty Blocks (also referred to as Format elements or div) Formats rendered on a page View blocks within the WYSIWYG Empty paragraph 2 format element Two Empty divs NOTES: - Paragraphs leave some padding (space between elements) - Div leaves no padding - Pressing shift + enter will add a line break within the same format element/block/div - To delete an empty block, simply click in the box and click backspace or delete .
Load more

Recommended publications
  • 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]
  • 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]
  • Glossary of Terms
    Glossary of Terms Bandwidth: Bandwidth is the amount of information your connection to the Internet can carry, usually measured in bits per second. Banner: A banner is a graphic that is placed around a website for the use of advertising. Graphics can use static images and text, or even be animated. Banners are a great way to draw attention to special information or offers, whether it's on your site or an external site. Browser: A browser is the software you use to view web pages - in fact you're using one right now! Google Chrome, Mozilla Firefox, and Internet Explorer are some of the more common browsers, but there are others like Safari and Opera. Since each one is different, pages can vary in appearance depending on what browser is used. This has to be taken into account when designing and testing websites. CMS: Short for "Content Management System," a CMS allows a number of users to create and change website content through the use of WSYIWIG editors, without the need for HTML knowledge. Because the CMS is online, there is no need for external programs or uploading of separate page documents, and content can be published or unpublished with a single click. Compression: Compression makes files smaller for faster upload/download times, and less disk space usage. JPEGs use compression, making them ideal for web, but can lead to loss of image quality if re-saved multiple times. Cookie: A cookie is a message given to a web browser (the application you use to get online) by a web server.
    [Show full text]
  • Using the WYSIWYG HTML Editor
    Using the WYSIWYG HTML editor Purpose: This third-party editor, called ‘CKEditor’ is used to create web pages in a number of tools within WebLearn, such as Resources, Lessons, Forums, Announcements etc. Default permissions: There are no permissions associated directly with this editor. Access to it depends upon permission settings for each tool that uses it. This guide will show you some of the most commonly-used features of the WYSIWYG editor. WYSIWYG is an acronym for ‘What You See is What You Get’, referring to the fact that you can create web pages without having to write the source code (HTML). A comprehensive User’s Guide is available by clicking on the icon within the editor. Other useful step-by-step guides to read in conjunction with this one: Building the Home Page Resources Attaching files in WebLearn All step-by-step guides are available from weblearn.ox.ac.uk/info Introduction This editor will work with the following browsers: Firefox: latest stable version Internet Explorer: 8.0, 9.0 – close to full support; versions 10 and 11: full support Safari: latest stable version Opera: latest stable version Google Chrome: latest stable version There is much more help available online for this editor than is either necessary or practicable to include in this document. Click on the icon on the toolbar in the HTML editor to access online help. This is a comprehensive User Guide explaining all the icons and their functions. Click the User Guide for more information about the editor. DOC-8 Creative Commons Attribution 3.0 Unported License.
    [Show full text]
  • Using Fonts in Applications
    Using fonts in applications I. Font management skills for users on the go A. Why? You want to use different fonts in the documents that you create B. You activate and use the best fonts possible for the job C. Issues: you send the document to someone/ someplace/some other computer who does not have the fonts you used to format the text 1. Send a document to a professional print- shop 2. Email a document to a client/friend/col- league (professional or personal) D. What might happen? 1. Bad: error messages or font substitution happens when the document is opened and all your careful formatting is lost 2. Good: font is installed first and then the document opened 3. Good: font is somehow embedded in the document so that the font isn’t needed in the receiving computer (done in application) 4. Good: font automatically activates (3rd party font mgmt program) Ex: Fusion has a pref- erence to automatically activate fonts used in Office documents and plug-ins for Quark, Illustrator and InDesign II. Popular text apps that deal with missing fonts A. Introduction 1. Each application deals with missing fonts differently on the receiving end. This class will cover Microsoft Word and InDesign (both focus on text formatting) 2. This is why it’s good to have a list of the fonts that are installed with a particular application like Office or Creative Suites — hopefully to avoid the problem B. Microsoft Word (simple approach) 1. Word documents are now opened on computers that don’t have some or all of the docu- ment’s fonts, and then Word - very quietly, without telling you - uses font substitution to enable the computer to display the document text and print it.
    [Show full text]
  • LATEX for Psychological Researchers Lecture 1: Introducton
    Kahoot! LATEX for psychological researchers Lecture 1: Introducton Sacha Epskamp University of Amsterdam Department of Psychological Methods 27-01-2015 Contact Details Workshop website: I http://sachaepskamp.com/latex-workshop Further reading: I http://en.wikibooks.org/wiki/LaTeX Workshop Outline 9-10: Introduction 11-12: Basics of writing in LATEX 13-14: Writing APA style articles Today's lecture Introduction What is LATEX? Why use LATEX? LATEX vs WYSIWYG Obtaining LATEX Making a first LATEX document Hello world example What is LATEX? LATEX is. I A program that takes a plain text file with codes as input and produces a output document I This process is usually called compiling I The input is a plain text file with .tex extension I The output is a multipage vector based image file. In the past this was .DVI but nowadays mostly pdf and postscript are used I We will use .pdf, which can be created with the pdfLATEX program I The programming language in which the input file is written What is LATEX? LATEX refers to the programming language used to write the input file and the program used to interpret this file and compile the output file. It does not refer to an editor in which you write the input file. What is LATEX? Simple representation: .tex / pdfLATEX / .pdf other files WYSIWYG programs I LATEX is completely different from What You See Is What You Get programs (WYSIWYG) you are used to I For example: I Microsoft Word I Openoffice.org I LibreOffice I The main difference between the the two is that in WYSIWYG programs you directly edit the output file while with LATEX you edit the input file Disadvantages of LaTeX vs.
    [Show full text]
  • What Has WYSIWYG Done to Us? Conrad Taylor
    What has WYSIWYG done to us? Conrad Taylor DTP—the best thing since sliced lead? In the last decade, desktop publishing has revolutionised how printed material is designed and typeset. Comparisons are often made with the original publishing revolution brought about by Gutenberg’s invention of movable type. I have been an enthusiastic participant and propagandist in the DTP revolution. But today, while considering what we have won, I want to reflect on how we have been seduced by WYSIWYG’s illusion of control, missed some opportunities, lowered our expect- ations and become deeply confused about who does what. Design in the era of Eleven years ago, when I started teaching for Popular Communication, my wife galleys and hot wax and I shared a job as designer/artworkers for a small magazine, Inside Asia. We also undertook other design jobs for voluntary organisations. In those days, the process of getting words clothed in type and put on artwork ready for print typically followed these steps: ■ We studied the text to understand the structure of the ideas contained within it. In cases of ambiguity, this required checking with the originator of the text (a writer or editor). ■ Type specifications were decided by looking at type sample sheets. These showed only a few sizes and leadings for each typeface; so imagination was required to guess what would look good. ■ A layout drawing might be made—the blueprint for the printed piece. We might have to do copyfitting calculations to work out how to fit text into specific areas, or to advise the editors that the text would not fit, and would need to be edited down.
    [Show full text]
  • WYSIWYG Getting Started Guide
    WYSIWYG Getting Started Guide Version 1.00 12-Apr-02 Welcome! Thank you for choosing a WYSIWYG software suite product and welcome to the next generation of lighting design. WYSIWYG is Cast Software's most advanced and complete lighting design program offering an end-to-end lighting solution. As well as enabling powerful computer-aided design and automatically generating all paperwork, it cues, visualizes and renders entire productions off-line from a console of the user's choice. WYSIWYG software is packaged at three levels designed to meet your specific lighting design and production needs. Report, which is the base product, allows lighting professionals to create 2D plans of their productions along with all of the necessary paperwork. WYSIWYG Report provides an easy solution for people who want to use computers to simplify the design process. Design is the next product in the WYSIWYG series. It allows lighting professionals to explore their designs in a 3D environment. Users can create 3D plans of their productions along with all of the necessary paperwork. With WYSIWYG Design, users can establish lighting looks and generate photorealistic pictures of those lighting looks. The final and most advanced product in the WYSIWYG series is Perform. WYSIWYG Perform allows lighting professionals to pre-cue entire shows in real-time. Perform encompasses all of the features of Report and Design and offers simulation tools. A DMX console or a compatible off line editor can be connected to the computer and WYSIWYG Perform will simulate the exact effect of the console’s output in real-time. This guide was prepared to help you get started with your new or upgraded WYSIWYG product.
    [Show full text]
  • CSCM10 Research Methodology a Taster of LATEX WYSIWYG
    WYSIWYG Systems CSCM10 Research Methodology A Taster of LATEX Anton Setzer • WYSIWYG = \What You See Is What You Get". http://www.cs.swan.ac.uk/∼csetzer/lectures/ • What you type in can be seen directly on the screen. computerScienceProjectResearchMethods/current/index.html • Microsoft Office Word is the main example of a WYSIWYG system. October 22, 2017 CSCM10 Lecture 4, 11/2/16: LATEX 2/ 32 Advantages/Disadvantages of WYSIWYG Systems WYSIWYM • WYSIWYG systems are relatively easy to use. • In WYSIWYG systems typesetting to be done by the user. • Problem: most users are not professional type setters. • WYSIWYM = \What You See Is What You Mean". • In most systems (e.g. Word) you can see only the output, but • Instead of doing the typesetting directly the user says: not the formatting information. • This is a headline. • Difficult to detect that one headline is in 11 pt and another in • This is a section title. 12 pt, or one headline in one font, and another in a slightly • This text is normal text. different font. • This is a mathematical formula • Therefore output is usually inconsistent. • Main examples: TEXand LATEX. • Usually output not of printable quality. • Programming is difficult, definition of macros restricted and difficult. CSCM10 Lecture 4, 11/2/16: LATEX 3/ 32 CSCM10 Lecture 4, 11/2/16: LATEX 4/ 32 Advantages/Disadvantages of WYSIWYM Systems LATEX • Steeper learning curve. • Separation of output from input, therefore what you write needs to be compiled into text. • Can create text in print quality. • TEX developed by Donald Knuth in order to typeset a new • Many publishers print articles typeset in LATEX directly, or after version of his books \The art of Computer Programming".
    [Show full text]
  • Pimp Your Thesis: a Minimal Introduction to LATEX
    Pimp your thesis: a minimal introduction to LATEX. Maarten Bransen IC/TC, U.S.S. Proton March 20, 2018 Contents 1 What is LATEX?2 2 Why should I use LATEX?2 3 Using LATEX4 3.1 The basic structure................................4 3.2 Equations and maths...............................5 3.3 Special characters and whitespace........................6 3.4 Lists........................................7 3.5 Figures and tables................................7 3.6 Referencing and citations............................ 10 3.7 Layout and style................................. 12 4 Some other useful packages 13 5 Practise exercises 14 5.1 Introduction.................................... 14 5.2 The basics..................................... 15 5.3 Advanced exercises................................ 17 6 Concluding remarks 19 6.1 A few words on installation........................... 19 6.2 Some tips..................................... 19 6.3 About this document............................... 20 1 Pimp your thesis: a minimal introduction to LATEX 1 What is LATEX? LATEX, pronounced as “la-tech”, with the Greek letter χ (chi), can be seen as a mark-up language for typesetting documents. It is in fact a set of user-friendly commands for a very powerful but complicated typesetting engine called TEX. Contrary to word-processing software you may be used to such as Microsoft Word, Google Drive or OpenOffice, LATEX is not WYSIWYG (What you see is what you get), and LATEX is NOT a program that comes with its own user interface. Instead, you create your document in a ‘programming-code like’ environment with a combination of plain text and commands for the typesetting. Then, you compile your document and create the final typeset document you want for viewing, which will be a pdf in almost all cases.
    [Show full text]