Most web professionals probably wouldn't want to be caught dead while using a WYSIWYG (What You See Is What You Get) editor or other graphical interface to create HTML for web pages. Although WYSIWYG editors have limited options compared to source code editors, they can make basic content editing very easy.
Above: Screenshot of Dreamweaver's combined WYSIWYG and source code editor.
Contribute can do an amazing job when you have to battle an evil Microsoft Word conversion. In Dreamweaver, pasting content from Word would still require a lot of work, such as removing line breaks, adding bold and italic and any other formatting that couldn't be converted. In Contribute, all you may have to do in the end is cleaning up white space caused by extra hard returns. That saves a lot of time!
Above: Screenshot of the Contribute toolbar in Editor Mode.
In some of our web forms, we use a WYSIWIG toolbar that allow basic HTML formatting. Buttons for bulleted an numbered lists, bold and italic, und/redo, special characters, subscript and superscript; Paste from Word; indent and outdent as well as Clean Up Code and HTML Code View. This is very similar to Contribute, except we don't allow users to insert images or documents, only hyperlinks to files that are already online.
Above: Screenshot of a WYSIWYG toolbar in a web form.
Do you always see what you get? In the web form WYSIWYG editor, changes usually appear immediately. In Contribute, changes in tables and images are sometimes deferred on purpose, so you may have to use the "Apply" button or refresh the window or even publish the page to see the results in Browser Mode.
A not so well-documented feature in WYSIWYG interfaces is that a hard return will create by default a new paragraph in HTML (source view: <p>...</p>), like this:
Sometimes it's necessary to use a line break; like this,
so that the sentence will break without adding white space of a new paragraph. The trick is to hold down the Shift button when you hit the Enter or Return key. This will insert a line break in HTML (source view: <br />).
When you paste content from Microsoft Word, most of the important formatting will be preserved. However, make sure to remove any underlined text! This may confuse web visitors when they try to click on what looks just like a hyperlink. Instead, try to use bold or italic to make the content stand out.
Back to the main Tutorials page.