Page Editor

From Sohowiki
Revision as of 14:39, 29 October 2010 by Soho (Talk | contribs)
Jump to: navigation, search


The Page Editor

The operational core of the Soholaunch Website Builder is it's Page Editing Module, which manages all website content through an easy to use, "drag-and-drop" interface. Through the Page Editing Module, or Page Editor, the user can create and manage an infinite number of content pages for use in the Website Builder's various modules. The top navigation bar has changed to accommodate functions of the Page Editor such as saving the current page, modifying the page's properties, and previewing the page. The object bar contains all the objects that are able to be placed in a drop zone within the content area of the current page.

Page Editor

To place an item on the page, simply Drag (Click and hold) an object from the object bar and Drop (Release Mouse Button) it into the drop zone of your choice. Multiple objects can be place in a single drop zone, but when deleting, the entire drop zone is removed. To delete a drop zone, Drag the "Delete" object on top of the drop zone and Drop it.

Object Bar

The object bar currently contains 21 different objects that can be placed on a page and the delete object. Let’s take a look at each object in detail.

  • My Images allows you to place any .JPG or .GIF images that you have uploaded into a drop zone. A selection box of image filenames will appear in the object bar when this object is dropped, so that you may choose the image you wish to place. The images are previewed in real-time in case you forget filenames. When you have selected the image you wish to place, click “OK.”
  • When you wish to add text to a drop zone, drag the text editor down and drop it into the content area. This will immediately spawn the Text Editor so that you can type the text you wish to add, and format as you would in a normal word processor. When finished click the “Update Text” button. Once the text area is placed on the content area, you may wish to edit or change your text: simply click on the text area and it will re-open the text editor so that you can do so. Detailed operation of the text editor is discussed later in this chapter.
  • If you wish to place a form on your page, the Soholaunch site manager has a series of predefined forms for you to use. You can choose the form you want, and then specify that the information filled out by a site visitor be emailed to one or more email addresses and/or data-based for future use.
    • Email the data to Email Address : When a site visitor submits this form, his/her information will be sent to the email address specified in this field.
    • Create a user data table : When a site visitor submits this form, his/her information can be saved into a user data table, the name of which is dictated by this field. All user data tables are managed through the Database Table Manager, or can be downloaded through Site Data Tables.

Optional Functions

The following features are purely optional, and only relevant to forms that collect the user's email address through a field named emailaddr. If your form does contain a field named emailaddr, an email will be automatically sent to the email address specified in the emailaddr field. By default, this auto-response email simply presents the user with a copy of the information he or she submitted through the form. Again, these features are entirely optional and will not adversely affect your form if left in their default states. However, they may be employed to customize the content and structure of the automatic email in such a way that enhances the effectiveness of your form, and fosters a more interactive and personal user experience.

  • Reply to email Address : Whatever exists in this field will appear in the "From" line of the automatic email response. By default, this option is set to Because users often reply to this address, you should ensure that it is a valid and operational one.
  • Subject Line of Auto-Email : The text in this field will appear in the "Subject" line of the automatic email response. Especially if your website contains several forms utilizing auto-response functionality, it is advised that the subject of the email receipt is relevant to the appropriate form (i.e. RE: Request for Free Estimate).
  • Content of Auto-Email : If you have created a custom text file to replace the default "receipt" content, you may use it with a particular form by selecting it from this drop-down box. For more information on creating custom text files for use with web forms, refer to Chapter 18: Custom Web Forms.

NOTE: Both of the pre-installed contact forms (Contact_Form_(Basic).form / General_Email_Form.form), as well as the pre-installed newsletter sign-up form (Quick-N-Dirty_Signup.form), utilize the emailaddr field and its associated auto-response functionality.

Creating New Forms

You may create your own web forms to use with the Soholaunch Website Builder by clicking on the “Create New Form” button on the right-hand side of the Forms Library. Once created, your for will be available in the Form Library’s “Available Forms” drop-down menu.The Label tells the user what to place in, or select from a form field. Example: “First Name” Once your form is complete, it will be selectable from the “Available Forms” drop-down menu of the Forms Library, listed as the Form Name. Example: “My Form” Forms cannot be submitted unless each of the Required Fields have been filled out. Non-required fields, however, may be left blank.When form submissions are emailed to the webmaster, the Field Name will be the text associated with the user's response. When form submissions are placed in a database table, the form's Field Names dictate database's field names. Example: “First Name”

Adding Fields to Forms

You may append fields to any web form created through the Web Form Builder. To add fields to a form, select it from the “Available Forms” drop-down menu in the Forms Library and click on the “Add Fields” button.

  • The “Documents” object lets you place your uploaded Microsoft™ Word™ and Excel™ documents on the current page for visitors to download. For ease of recognition, .xls files are listed in green, and .doc files are listed in blue.
  • This object allows you to place a link for visitors to download Adobe™ PDF documents that have been uploaded to your site.
  • If you are utilizing the “Secure Users,” you will want to place this object on at least one page within your site. It allows authorized users to login and be authenticated at your site. (See Chapter 13 for details)
  • This object allows you to place custom-programmed code into the current page. (See Chapter 19: Custom PHP Includes)
  • Placing this object on a page will prompt you to enter the address of the location to which you wish to display directions, and also allow you to select the source of the directions (Yahoo!™ or Mapquest™).
  • Placing this object on a page will simply place today’s date on the page. The date will update automatically from day to day.
  • This will place a button on the current page that allows site visitors to print the content area without the template. Regardless of colors used or template designs, when clicked (on the web site) this object will spawn a new browser window displaying only the content area in black and white and launch the users “printer properties" dialog box automatically.
  • This will place a button on the current page that allows site visitors to email the current page to a friend or co-worker. When they click the button, the Website Builder takes care of the rest.
  • This object simply tracks the number of times any page within the site has been viewed and displays the total count.
  • Drag this object into the content area, and then select a site page that you wish to open in a new browser window once the page is loaded.
  • This object allows you to place two types of audio files onto the current page. MP3 files and .WAV will display as a button for people to click and download.
  • This object allows you to place IPIX, AVI, MOV, Shockwave Flash (SWF), or Real Media files on the current page for viewing. From the web site perspective, it will place a button on the page for users to click. When the button is clicked, it will spawn another window and automatically play the video. NOTE: Width and Height dimensions should be known before using this feature, if not, the system will automatically default to 320 x 240. Streaming video and format details are beyond the scope of this document and is recommended that it be handled by someone familiar with video on the web.
  • When using certain features such as video or audio files, it becomes necessary to allow your site visitors to download the plug-ins needed for their browser in order to view these media features. The link buttons object provides built-in links to all features utilized by the Soholaunch platform.
  • Dragging the delete object onto any drop zone will remove ALL content within that drop zone.

Module Object Bar Items

These objects are explained in detail elsewhere in this manual, and therefore exceed the scope of this section.

Linking an Image

You may wish to link an image to another web site, email address or other page within your site. If so, once the image is placed in a drop zone, simply click the image and a linking dialog will appear for you to make the selections for your link.You can only use one option for linking. If more than one option is selected or filled out, the option farthest to the left will take precedence.


Formatting Issues

All objects are constrained to fit within the designated “drop zone” inside the Page Editor, but display differently when viewed through your site. When viewed from the web site, objects will expand and contract based on pre-defined layout definitions. Preprogrammed objects can be dragged and dropped into any of the 30 "drop areas" on the page. Multiple objects can be placed in single drop areas and can be moved to different areas if they need to be repositioned on the page.

Image Sizing

The content area itself is "liquid", and will expand and contract as necessary to meet your design specifications. However, in certain cases, images placed within the page editor will be contracted to fit into the dimensions of the 612px Page editor table. If an image that is larger than 612px in width is placed by itself on one of the Page Editor’s content rows, the #sitebuilder# will shrink the image to fit within the 612px width. If the combined width of two images placed directly adjacent to each other in the Page Editor exceeds 612 pixels, one or both of them will be down-sized as necessary to fit. The behavior of this “shrinking” effect is represented in the image below. Note: The Page Editor scales images proportionally, meaning that image’s height is reduced equally with its width.

Note: Images are the only objects that are contracted to fit within the 612px width of the Page Editor's content area; all other objects will expand and contract based on your design specifications.

Personal tools