Community Builder Editor Help

Community Builder Editor Help

Title	Anchor (Bookmark)	Graphic
Background	Break (New Line)	Line (Horizontal)
Link Colors	Counter	Space
Metatags	Divider	Table
Stylesheet	Email	Cell
Custom Header Element	Font	Text
Alignment	Guestbook	URL (Hyperlink)

Title

Title Bar The Title is the name of the page as seen in the colored bar at the very top of your browser window. For example, in the browser window at left the title is "My Web Page". Type in the name you want for your page, then click on the button.

Background

The Background is simply the background graphic or color of your web page. To select a graphic (often called "tiled" or "textured" backgrounds), click on the underlined word Background to see a preview (in the Preview Frame) of the backgrounds that are available. Then choose one from the drop-down list in the Properties Frame. If you do not want a tiled background, choose a color from the Color drop-down list or type in (or copy and paste) the hex code for the desired color. Click on the underlined word Color to see a preview of some of the available colors.

Link Colors

The Link Colors control how your hyperlinks (including an email address) will look in each state (not visited, visited, and active). Click on the underlined words to see the available colors, then choose the colors you want from the drop-down lists or type in (or copy and paste) the hex code for the desired color.

Metatags

The metatags Keywords and Description are used by some search engines to index web pages. Properly used metatags can improve your site's ranking in web indices, search engines, and also make it much easier for web surfers to find relevant information. This is an optional element; you don't have to put anything in these boxes if you don't want to.

For Keywords, type in a list of 10 to 15 words (or phrases) separated by commas. For the Description, type in a short sentence describing your web page; try to keep the length to 150 characters or fewer.

Stylesheet (Advanced)

The newer web browsers are able to take advantage of stylesheets that will let you further customize the way your webpage will look. If you'd like to use a stylesheet, first upload it in a *.css file via the Community Builder File Upload facility, and select the name of the file from the drop-down list in the Properties Frame for Stylesheet. If you are unable to upload CSS files, you may want to ask your Administrator to enable this feature. There are many online sources of information and tutorials regarding stylesheets. The Web Developer's Virtual Library and WebDeveloper.Com are two of the most comprehensive resources.

Custom (Advanced)

For more advanced HTML users, the Custom Header Element allows you to add your own header tags in addition to the ones included in Community Builder. You're given a text box where you can insert as many header tags as you like in proper HTML tag format. Note: This element should only be used for tags that belong between the <head> and </head> tags.

Alignment

Alignment allows you to position elements on your page. This helps with the formatting of text for presentation, allows you to position text around graphics, and so on.

Align Left aligns text to the left border of the page. Align Center aligns text in the middle of the page. Align Right aligns text or graphics to the right border of the page. Justify aligns text to both left and right borders such that each line of text in a paragraph is the same length and both the left and right edges of the paragraph are straight.

Generally, when you insert an Align formatting element on your page, all elements following that element will be aligned according to it until you insert a new Align element.

Anchor (Bookmark) (Advanced)

An Anchor (sometimes also called a bookmark) is used to hyperlink to a specific place on a page rather than the top of the page. For example, each of the topics in this help page has an anchor that is linked to from the table of contents at the top of the help page. To use an anchor, follow these steps:

1.	Go to the place on the page that you want your link to go TO, and insert the anchor at that point.
2.	Type in a one-word name for the anchor and click .
3.	Then go to the place (it can be on another web page) where you want to insert the link to the anchor, and insert a URL (Hyperlink).
4.	In the URL field, type in the name of the page, a # sign, and the name of the anchor. Click . Example: page2.html#chapter1 Note: If the anchor is on the same page as the hyperlink to it, you can select the anchor from the drop-down list in the hyperlink properties.

Break (New Line)

This will instruct the browser to start a new line on the page. If text is wrapping around a graphic, this will force the text to display from the line beneath the graphic.

Counter (If enabled by Administrator)

With this element you can insert a Hit Counter on your web page. Select the number of digits to display (up to 7), and the display colors - either black on white or white on black. If you later want to set the counter back to zero, simply edit your page and choose Reset: Yes.

Divider

A Divider is merely a horizontal graphic that can be used to break up a page into sections, underline titles, or indicate the end of a page.

Select a Divider from the drop-down box. Click on the underlined link next to the dropdown box to see the available graphics.

This element creates a hyperlink to an email address. Clicking on an email hyperlink typically activates the webpage visitor's installed email application, prefilling the To: field with the email address of the hyperlink and allowing them to easily send an email to that person. You can have an optional graphic instead of the textual representation of the link.

Email Address is the address which will prefill the To: section in the users email application. Text is thet text the browser will display to represent the email hyperlink. For Email Graphic you may either select one from the dropdown box or leave it at None and use the textual representation of the link. If you select a graphic, the Text will be displayed when a visitor's mouse hovers over the graphic. Border is the thickness of the border around the optional email graphic. The border will be the same color as the link colors you have chosen.

Example:
Email Address: "george@hotmail.com"
Text: "George" or "Send Me Email", depending on whether you are using the email link in a sentence or by itself.

Font

Text can be displayed using many different typefaces or fonts. The restriction for browsers is that each font you use must also be installed on the visitor's computer and there is no guarantee at present that this will be the case. There are some very common fonts though and these have been made available here. The font can have a color, which again must be recognised by the visitor's computer. There are sixteen standard colors to choose from. Fonts can also differ in size and can be represented using the common typeface options of bold, italics and underline.

Font is the typeface for subsequent text; Color is the color of subsequent text; Size is the size of that text. Regular is the normal (default) typeface effect; bold, italic and underline are optional effects. Click on the underlined link next to the Font dropdown box to see the available fonts. Remember that the Font formatting element only affects text that comes after it.

Guestbook (If enabled by Administrator)

This element will add a simple Guestbook to your web page so that visitors to your page can leave a message or comments about your web page. Inserting this element will add two buttons - View Guestbook and Sign Guestbook - to your webpage at the point where you insert it. The guestbook will be formatted in the default colours of your web's Community.

Graphic

Graphics can typically be displayed on web pages in two universal formats, GIF (mypic.gif) or JPEG (mypic.jpg). Graphics can display anything from icons to photographs but consideration should be given to the size of a graphic. If it is large (greater than, say, 32kb) or there are many of them on one page, the page as a whole can take a long time to load and visitors will move on elsewhere. For this reason it is best to keep the graphics as small as possible. You might consider creating a thumbnail image (small version, for example 100 pixels in size) of a larger picture and using the thumbnail as a hyperlink to the full-size version. That way your page loads more quickly and visitors can see the full-size picture by clicking on the small picture.

The Graphic can be selected from the dropdown box, or select Other... if you want to use an image from another location. In that case, Other is the location on the web of a graphic of your own choosing. Click on the underlined link next to the dropdown box to see the preset graphics that are available. If you have uploaded any images to your Community Builder web, they will appear at the top of the drop-down list. Border draws a rectangle around the graphic to help the presentation of a graphic; the option is for the thickness of that line. The color of the border will be the color of your default text, or the link color if you are using the graphic as a hyperlink.

Hyperlink is an optional hyperlink for the graphic which allows users to click on the graphic to go to another location. Either choose from the drop-down list which shows all the pages in your web, or type a hyperlink in the Other Link box. Text provides an alternative representation of the graphic for users that have disabled graphic loading on their browsers, and it also provides a pop-up description of a graphic when the user moves their cursor over it.

Line (Horizontal)

Lines can be used to break pages into sections. A horizontal line is drawn across a percentage of the page, in a particular color and with a given thickness. Line Width is the percentage of the page width that the line will take up; Height is the thickness of the line; Color is the color of the line. Click on the underlined Color link next to the dropdown box to see the available colors, then choose the color you want from the drop-down list or type in (or copy and paste) the hex code for the desired color.

Note: When your web page is viewed with Netscape Navigator the color attribute will not work; you will only see a shaded horizontal line.

Space

Browsers will only represent spaces in text with one space on the page no matter how many spaces are typed into text. This element will insert a special Space character string into your text to allow you to have multiple spaces in a row if needed.

Table

The use of Tables adds many possibilities to your web page format and layout. You can use tables to position pictures and text or to have blocks of color behind text or graphics. When a table is inserted it initially has only one cell (one row and one column), but you can add columns and rows very easily by editing the Cell.

Border Width is the thickness of the colored border of the table. Cell Spacing is the space between cell outlines. Cell padding is the space between the cell outline and any element within the cell. Background Color is the overall background color for the table; you can set the background color of individual cells by editing the Cells. To select the table background color, either choose the color you want from the drop-down list or type in (or copy and paste) the hex code for the desired color. Border Color is the color of the table border. Choose a color from the drop-down list or type in (or copy and paste) the hex code for the desired color.

Width is the overall width of the table either in pixels or in a percentage of the entire width of the page. Next you can choose the Alignment for the table on the page, left, centered, or right. Finally, you can select a Background image for the page if desired. Choose from the preset backgrounds available, or upload an image in Community Builder and it will appear in the drop-down list as well.

Notes: There are a few points to keep in mind about working with tables in Community Builder. A table cannot be moved on a webpage once it's been inserted. Elements cannot be moved from outside a table to within it or vice versa, from one cell to another in a table, or from one side of a table to the other side. Elements can be moved within a single cell, however.

Cell

Cell Wrap/No Wrap controls how text appears within a cell. If you don't want a line of text to wrap to the next line, select No Wrap. Be careful with this, however, because if the line of text is long, it will increase the width of the cell (and therefore the table) on the page.

Horizontal Alignment determines whether elements within the cell are aligned left, center, or right. Vertical Alignment controls how the elements in a cell are aligned vertically, eg. top, middle, or bottom.

Background Color lets you choose a color for the background of the individual cell. Choose a color from the drop-down list or type in (or copy and paste) the hex code for the desired color. Background lets you choose a background image for the individual cell. Choose from the preset backgrounds available, or upload an image in Community Builder and it will appear in the drop-down list as well.

Width sets the width of the column either in pixels or as a percentage of the entire width of the table.

Text

You can have as much text as you like in each inserted textbox. Remember that visitors' attention can waver, the more continuous text they have to read. This can be combated by breaking text into paragraphs, interspersing text with graphics and/or photographs, or splitting long text pages up into smaller pages and linking them together with hyperlinks.

The Text box is freeform, i.e. you can type what you like. If you want to insert a hyperlink in the midst of a paragraph, you can break the paragraph into two text boxes with the hyperlink element inserted between the two. Advanced HTML users can insert HTML code in a text box and it will be displayed properly on your web page.

URL (Hyperlink)

A hyperlink is a text or graphic pointer to another Web resource, e.g. another page, a picture, another website. By clicking on it, you follow the link to its destination and that resource is displayed in your browser. A hyperlink typically changes color when your browser detects that you have previously visited that resource.

Hyperlink is the where the browser should go if someone clicks on the link; Text is the text that will be displayed to represent the hyperlink.