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.
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.
The top navigation bar is for performing processing tasks within the Page Editing Module.
- Lets you select another page to edit, and will automatically save the current page.
- Saves the current page and returns to the page editor.
- Allows you to save a page as another name.
- Saves the current page and then spawns another browser window displaying the current page within your site template like visitors will see it.
- Saves the current page before going directly to the upload files module.
- Returns to the Main Menu with the option to save the current page if you wish.
- This will exit the site manager WITHOUT saving any changes. You must re-login to continue editing.
- Allows you to rename, delete, change the type of, and modify/edit keywords and gateway HTML code pertaining to the current page. Also through this option, you may also make a page a Splash page, which displays the page content without a template.
The Page Properties tab on top of the page editor contains many features of the page editor. Here you have the ability to change the page name, security code, background, custom color, splash page, page type, page title, Meta description, Meta keywords, and gateway html. This portion of edit page editor optimizes your page graphicly, and for search engine optimization.
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.
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 email@example.com. 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.
The Text Editor has several features and functions that you should understand in order to get the most out of the Website Builder. Most features are self explanatory: simply highlight the text in which you wish to change the style, size or color and select the appropriate choices. This includes functions such as Bold, Italic, Underline and the alignment and bullet features. These functions are controlled by the various icons arranged horizontally at the top of the Text Editor window:
- Takes back your last action. You may also use the keyboard shortcut (Control + Z) to attain identical same results.
- Employed when you undo more actions than you intended to, the Redo feature will undo the last use of the undo feature.
- Makes a copy of selected objects and/or text, so that you may "paste" them into another location.
- Places copied objects and/or text into the current location. If you are pasting content from Microsoft™ Word, the Paste feature will automatically remove all non-compatible, microsoft-specific code.
- Font Name
- Changes the font of selected text to one of the five web-compatible fonts.
- Font Size
- Used to decrease the size of selected text. By default, all text is size "3".
- Font Color
- Used to specify the color of selected text.
- Bolds, or intensifies selected text
- Places emphasis on selected text.
- Places an underscore beneath selected text.
- Left Align
- Aligns selected paragraph(s) to the left. This is the default setting for all text.
- Center Align
- Centers selected paragraph(s) within the page or text object.
- Right Align
- Aligns selected paragraph(s) to the right-hand side of the page or text object.
- Ordered List
- Initiates the prefixing of each new line with automatically-incremented numbers.
- Unordered List
- Initiates the prefixing of each new line with circular bullet points.
- Exempts the selected paragraph or line from and indention mandated by the Ordered List, Unordered List, or Indent buttons.
- Indents selected text or paragraphs to set them apart from others.
- Links selected text or image to an external site, internal page, or email address.Insert/Modify
- Reffer to the "Working With Tables in the Text Editor" section for a detailed description of this feature.Insert
- Place an image from you site's files into the Text Editor. The feature also allows you to specify the dimensions and alignment of images.
- Insert Horizontal Rule
- Insert a thin, horizontal divider in a color of your choosing to separate sections of content.
Working With Tables in the Text Editor
- The number you place in this field will determine the number of vertical columns in your table.
- Dictates the number of horizontal rows that your table will consist of.
- Dictates the over all width of your table. By default, this option is set to 100%, meaning that your table will expand to fill the width content area. You may also specify an exact pixel width by placing a number in this field and ;leaving off the percent symbol.
- Dictates the amount of spacing, in pixels, that lines the inside of each table cell
- Dictates the number of pixels between each table cell.
- Dictates the width, in pixels, of the table’s external border. If this field is left at its default setting of zero, there will be no border around the table.
- Background Color
- Dictates the color that will underlie any content placed within the table.
- Border Color
- Dictates the border’s color, provided that you have specified a Border of at least “1”.
When you are satisfied with your table configuration, click on the Ok button to place your table within the Text Editor. If you wish to modify your table after placing it, you may do so by selecting the table and then clicking on the Table icon.
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.
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.
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 Website Builder 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.