Visual Page Layout
Prev
Next

Visual Page Layout

Nicolas Deschildre

Reviewer: Christopher Hornbaker

VPL Modes

The Visual Page Layout (VPL) editor (also known as WYSIWYG (What You See Is What You Get)) allows you to edit a HTML or XHTML document while seeing the changes on-the-fly. Just like your favorite wordprocessor, you can click on your document and a cursor will appear, thus enabling you to enter text, insert images, apply text decorations, etc.. VPL's aim is to allow you to create great, valid web pages without any knowledge of Internet markup languages.

Quanta Plus offers two modes: VPL Editor and VPL & Source Editors, which are accessible from the View menu. The first replaces the Source Editor with the VPL Editor, and the second splits the editor window into two parts: the Source Editor and the VPL Editor.

The VPL Editor works like so: It loads a document like a normal HTML or XHTML page and a cursor appears. Then you can edit it, and switching back to Source Editor, you see that the changes you made on the VPL Editor have been merged in the Source Editor.

Note

When working in the VPL Editor with a document that contains PHP, you will see a small green icon representing the PHP code. You cannot directly edit it with the VPL Editor. To edit PHP, you will still need to use the Source Editor. There are no plans to change this functionality.

The second mode behaves exactly like the first, except that you instantly see the impact that your changes have made, either in the Source Editor or in the VPL Editor, and the cursors of the source editor and of the VPL Editor are synchronized. Pressing F9 loads this mode, but, if it is already loaded, it will move the focus from one view to the other, while keeping you at the same location of the document.

The refresh intervals between the VPL Editor and the Source Editor are configurable. Go to Settings->Configure Quanta.... Select the VPL View tab. You can choose whether you want to refresh a view only when you click on it or automatically. If you choose automatically, then you can choose a refresh interval. The general recommendation is: A smaller number for fast computers and a bigger number for slower ones.


The VPL & Source Editors mode.


VPL Editing

The Document Properties Dialog

Now, let's say you want to edit the title of your web page. How do you do it? Simply launch Tools->Document Properties. This tool allows editing of “invisible” tags when using the VPL Editor. The Document Properties dialog is also launched when you create a new document while in the VPL Editor. This is in order to lessen the amount of hand coding you need to perform. With it, you can edit:

Title

The title of the document.

Meta items

Meta tags allow you to store information about the document itself for example, keywords for the Internet search engines. You can add or remove Meta items by pressing the two buttons below, and edit them by clicking on the list for example, put “keywords” on the “name” column and “keyword1 keyword2” on the “content” column.

CSS Rules

CSS Rules are the new way to tell your web browser how to present the page. You can add or delete the CSS Rules by pressing the buttons below. You can also fill the fields like the Meta items. The editing of CSS Rules is not yet supported.

Link CSS Stylesheet

You can also link an external CSS stylesheet. Simply click on the Browse button and select your file.

The VPL Editor

You can use your cursor like you do in a wordprocessor, moving with the arrows. There may come a time when the cursor does not want to go where you want it to go (a pesky bug). Selection also works as usual. You can insert text by typing and remove text by pressing the Backspace or Delete key.

Now we come to tag insertion. You can insert images, applets, text decorations such as bold and so on by using the same toolbars you use in the source editor. Note that the insertion of tags does not remove previous identical tags for example, if you insert an anchor tag around some text, then you must remove any other anchor tag around it.

Note

Some toolbar items will be disabled, such as the Table Wizard or Quick List Wizard. They will work later in VPL, but, for this release, you should use the Tables or Lists toolbars.

To edit a tag (be it an image, an applet, or whatever), switch to the Attribute Tree, accessible via View->Tool views. Click on the tag you wish to edit, or, if you cannot access it, click on an object contained by it. The Attribute Tree will show the current tag name as well as a list of all its parents and attributes. Currently VPL does not support, say, XHTML+MathML, but you will see that you can edit namespaces via this view. You can simply click on the Value field and modify whatever you want. If you want to access a parent of the current tag, then select it and the Attribute Tree will load it.

To delete a tag, we will use the Attribute Tree. Have you noticed the two little red crosses at the top-right corner? The first one deletes only the currently selected tag and, if the HTML/XHTML specification does not allow some children of the deleted tag to be children of the parent tag of the tag set to be deleted, then they are also deleted, and so on. The second cross will delete the selected tag as well as all of its children, so be careful!

Prev
Next
Home


Would you like to comment or contribute an update to this page?
Send feedback to the TDE Development Team