Documentation

x

x

Building A Page

Cell Formatting

You can set the "Cell Type" You can set the cell's background color as we did in the previous topic You can use the "Cell Edit" screen for resizing and repositioning the cell You can specify a background image for the cell You can set the horizontal and vertical alignment for objects within the cell You can specify the color and size for cell borders (or leave the cell borderless -- the default). You can even use images as the cell borders. You can specify how much "padding" you want within the cell to separate objects from the border.

Go to the Web for Updated Help Topics

Table of Contents

Index of Help Topics

Next Topic

Next Topic

Previous Topic

Previous Topic

Let's take the Cell Formatting features out for a spin. Click anywhere within  a cell or its border to select it and then click on "Edit" on the menu at the top of the WebBuild Express screen. On the dropdown menu, click on "Cells" and then on "Edit". The Cell Formatting screen now appears (we saw it before when we changed the cell background color):

In addition to setting the background color for a cell, as we did in the last topic, you can use the Cell formatting features to make lots of other changes in the way the cell and its contents will appear on the published page:

Cell Type The Cell Type determines how the cell handles certain types of content. You can choose any of three Cell Types:

Typical (Text and Images) - This is the default setting and will work for most cells that contain text and/or images. Image (Single Image Cell for True Borders) - This choice is only available where you have an image within a cell and do not have any text. By choosing it, the program will remove all blank space between the image and the cell border. Code (Allows HTML Code) - This enables you to put HTML or JavaScript code in the cell. Although you may never need to write code when using WebBuild Express, if you do need to, you can do so by entering it into a code cell. You might want, for example, to set up a form with some fields for users to enter data, or you might want to use special HTML features like the unordered list in this cell.

For most purposes, you should be able to use the "Typical" Cell Type. Background Color Background color was covered in the previous topic. Size You can use the four "Size" fields (Left, Top, Width, Height) to specify the exact location and dimensions of a cell. Size is always measured in units of pixels; the "Top" and "Left" properties are measured (in pixels) from the top and left of the screen. (A VGA computer screen, which is the standard for many Web sites, is 800 pixels wide by 600 high). Using "Size" is a useful alternative to the methods described in the topic "Moving and Resizing Cells". Why would one specify size on this screen, rather than dragging the cell or its borders? The answer is that both are useful. One way to align cells is to specify a certain number of pixels for the "Left" or "Top" dimensions. Another use of this feature is for cells that are larger than the screen height or width. The gray cells at the left and right margins of this page are examples: it is much easier to specify a height of several thousand pixels by using the Cell Formatting features than by dragging the cell boundaries across several screens.  Background Image  You can use an image as the background for your cell. (We'll discuss how to add images in the next topic). Background images are different from images that you add as the contents of a cell, in two major respects: Cell text will flow "over" the image, and the image will "tile":

This is a cell with a background image. (Note that if the cell is larger than the background image, the image will "tile" within the cell).

Tiling is useful if you want to repeat a background. For example, the image on the left is used as the background for this cell.

Horizontal and Vertical Alignment You can use the Cell Formatting screen to set the horizontal and vertical allignment for objects within the text. For example, the text in the cell above is aligned to the horizontal center and to the vertical middle. The text in the cell above that is left in its horizontal alignment and vertically at the top. To set the horizontal and/or vertical alignment for a cell, select the cell by clicking anywhere on it, and then click on "Edit/Cell/Edit" in the menu (or right-click on the cell and click on "Cell/Edit").

To set the horizontal alignment, check on one of the three choices in the circled area: Left, Center, or Right. Similarly, choose one of the three vertical alignment options: Top, Middle, or Bottom. Borders and Shading When you create a cell in WebBuild Express, it has no visible border. You will notice that when you click away from a cell, the red border (which is there as a design aid) disappears. But there are circumstances where you might want to specify a border color and size.

This is a newly-created cell. When the page is published, it has no visible border.

	This is another cell. In addition to the text, we have added a border. In the Cell Formatting screen, we have set the border width to 5 pixels and the border color to a dark blue-violet.

	This is another cell. In addition to the text, we have added a border. In the Cell Formatting screen, we have set the border width to 5 pixels and the border color to a dark violet. Cell padding has been set to 20 pixels.

Cell Padding Cell Padding sets the amount of space between the border and objects within the cell. Notice in the cell above to the right, the text nudges right up to the border. For cosmetic reasons, you might want to allow more space. You would do this by setting the "Cell Padding" on the Cell Formatting screen to the desired amount. In this case, let's try 20 pixels.

Note: cell borders will not display on Netscape and Opera browsers exactly the way that you design them in WebBuild Express and the way that they appear in Microsoft Internet Explorer browsers. This is one of a very few minor differences in the way WebBuild Express pages appear in different browsers.

It's easiest to use this feature by chosing from the list of "Templates" at the top left of the screen. WebBuild Express automatically creates this "Templates" list as the unique cell format properties of all cells you have created in all your applications. To reuse cell properties from a template, just select it from the list. There are some special templates, which you can find on the list under "WBE_Borders". In the example below we have clicked on one named "WBE_Borders, Home, 26". Note that you can see a representation of the cell appearance in the window under the Templates list:

Click here for more on code cells.

	Tip A quick way to get to the Cell Formatting screen is to double left-click just inside the border of a cell. Or click on the  button in the toolbar.

	Browser Compatibility If you use WebBuild Express features like cell borders, advanced border formatting, hover links, etc., you should view your pages in all browsers that visitors to your site are likely to use. Click on the following links to download and install browsers for free from Microsoft, Netscape, and Opera. After you publish a site, you should view it with each of these browsers to ensure that the pages are displayed as you designed them. You can also use Page and Site Preview to view your work with these browsers.

	Here we have combined border images from two templates (WBE_Borders, Home, 26 and 11). The center has been made a light gray.

The template selected will give the cell a three-dimensional appearance with rounded corners and a shadow to the right and bottom. You can edit these properties. Click on the center of the cell image:

Here we've set the left border of the cell to a dark blue, 3 pixels wide. (The other eight border segments are white). This might be a good way, for example, to highlight legal text or changes to a document.

The cell representation will now split into nine segments as shown. You can select or deselect a segment by clicking on it. Since we initially clicked on the center, the center segment is highlighted with a thin red line. The "Pattern" field shows that this segment is an image, "tvbarRoyalC.gif." You can change the image by clicking on the "Select Image" button or use a color by clicking on the "Select Color" button. You can set each of the nine segments to any image or color you like. You can use the "Border Size" controls above the "Pattern" field to change the size of the Top, Right, Bottom, and Left borders. Some Examples:

	This cell uses one of the standard templates (WBE_Borders, Home, 11). The text has been changed to a bold light yellow.

	Here the outer cell border segments are set to four different colors, Green, Yellow, Red, and Blue. All four borders are 10 pixels wide. The center segment is white.

	Copyright 2002-2005 Net Fulfillment Technologies, Inc. All rights reserved.

Site Search

Advanced Border Formatting You can use images and colors for cell borders. Click on the "Advanced" button on the Cell Formatting screen. You will see the following screen: