BeWebmaster

BeWebmaster Web Editor

Ad

Here is intro to BeWebmaster CMS web editor. BeWebmaster CMS release date is scheduled for 01-15-2006. Click here to find out more about BeWebmaster CMS.

Toolbar

BeWebmaster Web Editor toolbar consist of standard rich text and html editor buttons.

Save Save Insert Form Insert/Edit Form
Cut Cut Text Field Insert/Edit Text field
Copy Copy Hidden Field Insert/Edit Hidden field
Paste Paste Insert Textarea Insert/Edit Text area
hr Insert Horizontal Rule Insert Checkbox Insert/Edit Check box
Spell Check Check Spelling Radio Button Insert/Edit Radio button
Undo Undo Insert Button Insert/Edit Button
Redo Redo Style Editor Insert/Edit CSS Classes
Add Link Insert/Edit Link Bold Bold Text
Image Insert/Edit Image Italic Italic Text
Resize Image Resize Image Underline Underline Text
Layer Insert/Edit Layer (DIV element) Left Justify Justify Left
Table Insert/Edit Table Centre Justify Justify Center
Cell Edit Table Cell Right Justify Justify Right
Insert Row Insert Table Row Full Justify Justify Full
Insert Column Insert Table Column Ordered List Ordered List
Delete Row Delete Table Row Unordered List Unordered List
Delete Column Delete Table Column Indent Indent
Clear Format Clear Format from Selection Outdent Outdent
Word Clean Clean MS-Word formatting Text Color Text Color
Highlight Color Highlight Color    

BeWebmaster Web Editor also includes drop down lists that allow you to:

  • Change Format of the selected text (i.e. H1, H2, P)
  • Change Font
  • Change Size of the text
  • Add custom CSS styles to the selection

Style Editor

BeWebmaster CSS Style editor allows you to create custom CSS classes.

Create new CSS class

Make sure you are in Articles or Pages section of BeWebmaster.

  1. Click Style Editor buttonStyle Editor
  2. In style editor window type in desired class name. Make sure to start with "." (dot) if you are creating a custom class. For example: .subheading. If you'd like to create style for a particular HTML tag, simply type in that tag name. For example "h1".
  3. Choose the styles you'd like to apply. For example to add top padding of 10 pixels, type in 10px in appropriate box.
    Padding top
  4. Make sure to include measurement units such as px or em, anytime you are adding size styles.
  5. Click Submit

Edit existing CSS class

Make sure you are in Articles or Pages section of BeWebmaster.

  1. Click Style Editor buttonStyle Editor
  2. In style editor window select the class you want to edit from the drop down menu.
  3. Click Edit button.
  4. Make changes to the styles
  5. Click Submit button.

Delete existing CSS class

Make sure you are in Articles or Pages section of BeWebmaster.

  1. Click Style Editor button Style Editor
  2. In style editor window select the class you want to edit from the drop down menu.
  3. Click Edit button.
  4. The class name will appear in the Class Name field with delete link next to it.
  5. Click Delete link to delete selected class.

IMPORTANT

You need to refresh you browser before you can see effects of newly created, edited or deleted classes. However, before you refresh, MAKE SURE TO SAVE YOUR WORK by clicking on SaveSavebutton.

Applying CSS class

  1. Select the text you'd like to apply the style to.
    Select text

  2. In the toolbar StyleSheet drop down menu select the CLASS you want to apply
    Select Class

  3. And class will apply to the selection
    Class

Resize Images

Once you inserted image in the document, select the image by clicking on it.

  1. Click Image Resize button on the toolbar and Resize image window will pop-up.
    Resize Image
  2. Type in the percentage you want to resize to and click Resize button.
  3. New pop-up will come up showing you resized image. Now you have two options: to accept the change or try again.
    Resize
  4. Once you are satisfied with the result click on Accept.
  5. In the Resize window click Update button to update the content with resized image.

Create Contact Form

BeWebmaster CMS comes with a PHP script that processes online contact form.

Make sure you are in Articles or Pages section of BeWebmaster.

  1. Click in the Editor where you want to insert the form.
  2. Click on Insert FormInsert Form button and window will come up.
  3. From the Form Action drop down menu select Submit Contact Form
    Form action

  4. Click Insert and a Form outlined in dashed red border will appear in the editor
    Form Insert

  5. Now we are ready to insert Contact form fields. First double click inside the form to make sure form changes to edit state.
    Edit Form

  6. Type in the label of the first field. For example "First Name:"
  7. On the toolbar click on the Insert FieldText Field button and window will pop up.
  8. From the Select Field drop down menu select First Name and click Insert
    Insert Field
  9. Repeat the steps 6, 7 and 8 to add fields you want your visitors to fill out to contact you.
  10. Final step is to insert the Submit button, by clicking on Insert ButtonInsert Button button on the toolbar.

NOTE

You can use the same process to create the Newsletter subscriber form. Just make sure that when you select Subscribe to Newsletter from the form action menu.

Insert/Edit Table

Insert

  1. To insert table click on tableTable button and the Insert Table window will pop-up.
  2. In the Insert Table window you may specify the number of rows and columns, table width, alignment, background color, border width and color, column span, and cell padding.
  3. Click the insert button and your table will appear in the main window.

Edit

  1. To edit table properties like background color, cell spacing, cell padding, alignment etc. you need to select the table first.
  2. To select the table click anywhere in the table.
  3. Once selected, click the insert table button Table and the edit table window will pop-up. Make the changes you want and click the edit button.

NOTE

To edit elements such as tables, forms, layers, form fields etc, all you need to do is select element you'd like to edit in the editor and then click on appropriate button on the toolbar to bring up selected element properties.