WebBuild Express Tutorial - Page Formatting

Documentation

Building A Page

Page Formatting

Several formatting options are available that pertain to the entire page:

Go to the Web for Updated Help Topics

Table of Contents

Index of Help Topics

Next Topic

Previous Topic

You can establish a default Stylefor the page that sets the page's background color and/or the page's background image.

You can set Miscellaneous properties of the page, like its title.

You can enter data that will help describe the page so that it can be indexed by Search Engines.

Page Style

The style that you set for the page affects the text style that appears by default when you add text to a cell, the color of the page, and any background image that you want the page to have.

To change Page Formatting, click on "Edit" at the left of the Menu Bar, and then on "Pages", and then on "Edit". (Or you can double left click anywhere on the page that does not conain a cell). You will see the following screen:

The "Page Properties" screen has three tabs: "Style", "Misc., and "Search Engine". When you first access "Page Properties", the "Style" sheet will be on top.

By default, the background for a page is set to Transparent. To pick a background color, click on the "Color" button under "Page Background" on the "Page Properties/Style" screen. You will see the WebBuild "Color Picker" or "Wheel" that we have encountered in several previous topics. Pick the color you want the page background to be and click the "OK" button.

To add an image as background for a page, click on the "Image" button on the "Page Properties/Style" screen. You will see the same screen you used to add and format images. Choose an image and click on the "OK" button.

There are several potential problems with using a background image for a page. The image will "Tile" if it does not fill the width and height of the page, as it appears in the user's browser. Here is an example of a page, using a background image, that won't be tiled if viewed on a browser on a 800 x 600 pixel monitor, but will if viewed on a browser with a larger effective screen size:

Notice that because the image is not as wide as the browser pane, the browser repeats it to the right and down the page.

Page Properties for Search Engine Indexing

This feature is discussed in the topic "Search Engines".

Misc. Page Properties

The tab for "Misc." on the Page Properties dialog looks like the following:

(The area circled in red is where the Page Title will appear).

To set the Page Title, click on "Edit" in the menu bar, and then "Pages", and then "Edit". When the "Page Properties" screen appears, click on the "Misc." tab". Enter the title, exactly as you wish it to appear, in the "Page Title" field and then click the "OK" button.

There are two parts to this form: an area to enter the Page Title and an area (labeled "Head") to enter data for the page header.

Page Title

This is how the page will be labeled when it is viewed in a browser. For example, here is how a page will appear that has the title: "WebBuild Express Tutorial - The Desktop Environment"

Head

The "Head" area can be used to enter HTML and/or JavaScript code that will appear in the HTML "<HEAD>" section of the published page. Most people probably won't need to use this feature (trained professionals -- don't try this at home), but it's there if you want to use it. Possible uses include adding additional Meta tags and JavaScript functions that may be called from within cells on the page.

Here's a simple example: JavaScript that produces an Alert message when the page first loads on a visitor's browser.

We type the following into the "Head" section of the "Misc." tab of "Page Properties":

          <script language="javascript">
                    alert("Welcome to our Site!")
          </script>

Page viewed with browser on 640 X 480 monitor.

Tip

If you want to avoid tiling, use an image as a cell background, rather than as a page background.

Tip

Using background images can lead to very distracting visual effects. If the background image is "busy", as in this example, it is hard to view text and other foreground objects.

Some designers use graphics programs to "wash out" the images they use for background to reduce this effect.

Click here to view page

When the page loads, you'll see the following "popup". (You can test this in "Page Preview"):

Page viewed with browser on 1024 X 768 monitor.