HTML User Interface2

Download Add to Cart

The nBit HTML Editor User Interface (Part 2)

See Also...
Editor User Interface Part 1
Editor User Interface Part 2
Programmers API
Using the Editor in VB6
Using the Editor in Microsoft Access
Using the Editor in Delphi
Using the editor in .NET
The Form toolbar

Button Description
Insert Form - Inserts / edits a FORM element on the document. The form tags always encase the entire document and only one form may be placed in each document
Insert Text Field - Inserts a text field
Insert Text Area - Inserts a multiline Text Area
Insert File Field - Inserts a file upload field
Insert Hidden Field - Inserts a file hidden field
Insert Image Field - Inserts an Image field
Insert Checkbox - Inserts a checkbox
Insert Select Field - Inserts a drop down select field
Insert button - Inserts a button
Insert Submit Button - Inserts a submit button
Insert Reset Button - Inserts a submit button
Insert option Field - Inserts an option field

Accelerator Keys 

The editor supports most of Microsoft's standard accelerator combinations.

Keys Action
 ctl-A Select All - Selects the entire document
 ctl-P Print - Prints the current document
 ctl-C Copy - Copies the current HTML selection onto the clipboard
 ctl-X Cuts - Cuts the current HTML selection from the document and places it on the clipboard
 ctl-V Paste - Paste the clipboard contents into the current cursor position in the document
 ctl-B Bold - Bolds the current selection / word
 ctl-I Italic - Italicizes the current selection / word
 ctl-U Underline - Underlines the current selection / word
 Shift-Enter HTML Break - Inserts an HTML BR element
 Enter Starts a new HTML Paragraph in VB6 or inserts a BR element in Microsoft Access

Context Menus 

The editor contains some right-click context-menus that allow direct access to the selected objects properties. When a user performs a right-click after selecting either an image, a Table border, a hyperlink, or standard text the following context menus are displayed.

Right-Click Menu Options
 Images Right Clicking on a selected Image displays the image context menu. 

Cut , Copy , and Paste have the same clipboard functionality as standard windows applications. Selecting the Image Properties menu item opens the image properties form.
Image Properties Form - version 1.0.11
Width - the width of the image in pixels
Height - the height of the image in pixels
Constrain Proportions - when selected changing the value of one dimension of the image will cause the other to recalculate as to maintain the images original aspect ratio
Reset - will return the image to its actual width and height in pixels
Source - the URL of the image. This may be edited if you would like to change the image
Border - the width of the border displayed around the image in pixels
Align - The images alignment in relation to the surrounding text
Alt Text - The text displayed in a browser that doesn't show images and the text displayed when hovering the mouse over an image in other browsers. 
 Tables Selecting and then Right Clicking on a table border displays the following context menu

Insert Row - Inserts a Table Row to the bottom of the table
Delete Row - Deletes the bottom row from the table
Insert Column - Inserts a new column to the right-hand side of the table
Delete Column - Removes the right-most column from the table
Note - To perform advanced row and cell operations use the DOM Toolbar menus for the individual rows and cells

Properties - opens the table properties form
Border Width - the tables' Border Width in pixels

Border Colour - Border Colour, clicking the paint bucket icon opens the standard windows colour picker

Background Colour - Background Colour, clicking the paint bucket icon opens the standard windows colour picker

Cell spacing - Cell Spacing between the tables individual cells

Width - The table width as a pixel value or as a percentage of its parent HTML element. 

Style - A valid CSS style string describing the table properties.

Links and Text Elements Right Clicking on a link or section of a text element displays

Cut, Copy and Paste - behave the same way windows cut, copy and paste clipboard functions do. In the case of a hyperlink both the text and link are copied, cut or pasted. 
Insert / Edit Link - Opens the link editing form

Type - The protocol the link uses
URL - The destination of the link

Navigation - Previous : Next


Download Add to Cart

Shopping Cart