Previous Topic

Next Topic

Book Contents

Advanced Editing

The SiteBuilder WYSIWYG editor automatically converts the textual and tabular information on your web pages into the HTML code. HTML, which stands for HyperText Markup Language, is a standardized language for presenting information, graphics, and multimedia on the World Wide Web. Using the Advanced Editing feature, you can easily apply different styles and change properties of selected elements.

At the bottom of the SiteBuilder editor window you can see a panel displaying the HTML structure of the line, on which your mouse cursor is now placed.

Advanced editing of properties

For example, if you place the mouse cursor in a table, the HTML code structure will contain the following tags, as shown in the figure above (for example, BODY, H2, TABLE, TBODY, TR). The tag where the cursor is now is shown in bold. The child tags of the active tag are enclosed in parenthesis.

To edit the textual content inside a tag:

  1. Place your mouse cursor in the line you want to edit and click on the tag name in the advanced editing bar.
  2. Click the Advanced button in the lower right corner of the Advanced bar.
  3. The Advanced tag properties dialog box opens. This dialog box opens for the following tags: P, TR,TD, P(NORMAL), H1, H2, H3,H4,H5,H6,ADDRESS, PRE(FORMATTED), A,OL,UL,LI,DIV,SPAN,FONT. In this dialog box, you can change the following properties: adjust padding properties (in the Padding section), set margins for the text body (in the Margin section), and select the color for text and background, and the color and style of borders.
  4. Click OK. The changes will be immediately applied in the editor screen.

For some tags, such as TABLE, TR (Table Row), TD (Table Data) A (Link), UL (Unordered List), OL (Ordered List), HR (Horizontal Rule) and IMG (Image), you can edit properties. The set of properties that you can edit is different for each of these tags.

To edit properties:

  1. Place your mouse cursor in the line you want to edit and click on the tag name in the advanced editing bar.
  2. Click the Properties button on the Advanced bar. The Tag Properties dialog box opens.
  3. You can edit the following properties for the tags:
  4. To apply changes and close the Tag Properties dialog box, click OK.

If you are familiar with HTML code, you can insert SiteBuilder icon on any page of your web site by editing HTML code of this page.

Here is the example of such HTML code:

<tr>

<td align="center"> <a href="/services.shtml" onclick="javascript: goUrl('http://sb.your_domain.net/wizard/index.php')" title="Site Builder — Build your Web Site now in 5 simple steps!"><img src="/images/button_sitebuilder.jpg" alt="Site Builder &mdash; Build your Web Site now in 5 simple steps!" width="180" height="90" border="0"></a> </td>

</tr>

See Also

Editing Web Pages

Editing Textual Information on Web Pages

Working with Tables

Using SiteBuilder Modules

Creating Your E-Shop