Google Page Creator

GPC is a solid browser-based WYSIWYG editor. Google's famous "it-just-works" philosophy delivers as-promised—one really can build a basic and decent looking website without bothering to learn HTML. As an added bonus, browser-dependent tweaks and CSS styles are added automatically when GPC pages are served, to ensure that GooglePages are rendered correctly in different browsers.

The GPC user interface is very intuitive, so this tutorial does not include detailed step-by-step instructions, which are available from GPC team and elsewhere. Rather, this tutorial focuses on introducing the GPC features and options that are subsequently used in the advanced tutorials.

GPC WYSIWYG Interface

Creating or editing a page is done in the "Edit page" mode, in which text, images, and links can be added to several fields.

Images are particularly easy to handle in GPC. Images uploaded to the GooglePage account can be selected in a thumbnail preview window and then positioned using a drag-and-drop interface. Images by default "stick" to natural anchor points, such as edges or center of the field and paragraph breaks or headings.

When working with an image, a dialog box appears with options for 4 image sizes (small to original) and basic image enhancement tools.

If only a few simple elements are added with little editing, the GPC-created HTML code is reasonably clean. But the quality of HTML code quickly deteriorates with heavy WYSIWYG editing and operations such as moving images around.

To be fair, the actual appearance of the page layout is not easily destroyed by a single careless editing action, in part thanks to the "undo" option. But users who care about what their HTML code looks like will often find themselves using the "Edit HTML" link (below the buttons on the left) to open the HTML editor window.

Top

GPC Page Templates

GooglePages are created in GPC based on one of the default templates, which essentially provide standard CSS styles for various common page elements: several levels of headings (<H1>-<H4>), text paragraphs (<P>), bulleted lists (<UL>), tables, etc.

The content of each page is arranged into several pre-defined fields (DIVs) on each page: title and description, main content, optional sidebars, and a footer. The presence and position of these fields is defined by one of the possible "layout": single-column, left-sidebar, right-sidebar, and two sidebars. The general appearance of the page is determined by the chosen "look" (page template). Switching between different "looks" and "layouts" is basically a seamless process, but it still works best with pages created entirely using the GPC WYSIWYG interface. The content of hidden sidebars is not actually deleted, just not displayed, so trying out different layouts is a very safe procedure.

The templates are actually not all completely different, but rather come in several "families", members of which share the basic style and layout, but use different color schemes. The following links show how a sample "Lorem ipsum" page appears in four different templates.

Example #1 |  Example #2 |  Example #3 |  Example #4

Top

GPC HTML Editor

Using the HTML editor is, of course, essential not only for cleaning up the code, but also for performing any of the operations described in the GPX-Files advanced tutorials.

The first and most important feature of the GPC HTML Editor is that it does not simply passively accept text input, but rather attempts to parse and correct the HTML code, every time the "Save Changes" button is pressed. These actions would not have been very problematic, except that the exact rules that the HTML Editor attempts to follow or enforce are not very clear.

GPC HTML Editor seems to be fairly consistent about adding missing closing tags. Color attributes are usually converted into the rgb(r, g, b) format, except in some elements the #XXXXXX hex representation is used. Most STYLE attributes added manually are left alone and properly supported, but in some cases they can be removed, ignored, or expanded. For example, setting a BACKGROUND color for an element often results in three lines of, apparently, browser-specific code. The bottom line is that in all but the simplest cases, one can not assume that what has been entered in the GPC HTML Editor actually becomes part of the page.

One very frustrating feature of the original GPC HTML Editor was consistent removal of JavaScript or any other SCRIPT code. Fortunately this rule is no longer rigidly enforced, which means that Simple JavaScript code and third-party tools like web Counters can now be added to GooglePages. A few important warnings and caveats notwithstanding, it is possible to add a wide variety of active and interactive content using the GPC HTML Editor. See the advanced tutorials for more information.

Top

Other Google Page Creator Resources

Links to external GPC tutorials and resources: