Contents      Previous Chapter      Next Chapter

5. Insert

In this chapter, we will explain the methods of inserting various components into a document. The Insert menu facilitates insertion of such components as form fields, applets, and plug-ins.

(1) Nonbreaking Space

[Insert | Nonbreaking Space]

Use the nonbreaking space <&nbsp> to input more than two contiguous spaces. According to HTML 3.2, proposed by W3C (World Wide Web Consortium), more than two contiguous spaces are regarded as single white space. Therefore, if normal text is read with the HTML format, the contiguous spaces in the text are replaced with a single space.

Since Web browsers treat a contiguous sequence of white space characters as a single white space, you should use the nonbreaking space <&nbsp> to type contiguous spaces. When using Namo WebEditor more than two spacesl are converted into a nonbreaking space automatically.

(2) Line Break

[Insert | Line Break] <Shift+Enter> (Normal line break)

[Insert | Line Break] <Ctrl+Enter> (Line break with attribute)

Use the Line Break <Shift+Enter> command to insert a normal line break. The Line Break command only changes the line, so there are no changes in margin, style, or numbered lists. That is, this command moves the cursor onto the next line without inserting a new line.

Paragraph break:        

Line break:                 

Use the Line Break command <Ctrl+Enter> to insert a line break with one of the following attributes: Normal Line Break, Clear Left Margin, Clear Right Margin, or Clear All Margins. These commands change only the paragraph, so there is no change in the paragraph's margin, style, and so on. If you use the Line Break command, the [Line Break Properties] dialog box will appear.

Normal Line Break

Inserts a line break with all the margins.

Clear Left Margin

Inserts a line break with no left margin. If an image is on the left margin, the new line moves down past the image.

Clear Right Margin

Inserts a line break with no right margin. If an image is on the right margin, the new line moves down past the image.

Clear All Margins

Inserts a line break with no margins on either side. If there is an image on either the left or right margin, the new line moves down past the images of both margins.

[Extended]

Click the [Extended] button to open the [Extended Attributes] dialog box, in which you can add HTML attributes to a line break that are not directly supported in Namo WebEditor.

(3) Horizontal Rule

[Insert | Horizontal Line]

Use the Horizontal Line command to insert a horizontal line into a document at the cursor.

If you select the [Insert | Horizontal Line] menu, a horizontal line whose width is same as that of the current paragraph is inserted. You can also adjust the width of the horizontal line. As the width of the current paragraph is changed, that of the horizontal line is changed accordingly.

You can change such properties of a horizontal line as width, color, and alignment with the [Format | Horizontal Line] menu.

[Tip] Click the right mouse button on a horizontal line, and the Popup menu, with which you can change properties of the horizontal line, will appear.

[Caution] You must move the cursor position to the horizontal line whose properties you want to change; if you don't , the [Horizontal Line] menu will not appear.

(4) Comment

[Insert | Comment]

Use this command to insert comments that can be seen only in an HTML source file, not on Web browsers.

If you select the [Insert | Comment] menu, the [Comment] dialog box will appear.

In the dialog box, you can input multi-line text comments. Comments can be seen only if the [Format Mark] option is on. If [Format Mark] is off, neither the comment mark nor comments are shown.

[Information] If the [View | Format Mark | Format Mark] menu is checked, comments are displayed in Namo WebEditor. In this case, the window of Namo WebEditor is different from that of Web Browsers. If the [View | Format Mark | Format Mark] menu is not checked, the window of Namo WebEditor is same as that of Web Browsers.

(5) Symbol

[Insert | Symbol]

Use the Symbol command to insert special characters that cannot be entered with the keyboard.

If you select the [Insert | Symbol] menu, the [Symbol] dialog box, which consists of the [Symbol] tab and many symbols, will appear.

The symbols in the [Symbol] tab can be seen in the all versions of Windows 95 and NT.

(6) File

[Insert | File]

The [Insert | File] menu inserts the contents of the selected file at the cursor position of the current document while the [File | Open] menu opens it in a new window.

1. Select the [Insert | File] menu, and the [Open] dialog box will appear.
2. Select the file to be inserted, and then click the [Open] button.
3. Now the contents of the selected file will be inserted at the cursor position of the current document.

If the selected contents are HTML format text, Namo WebEditor inserts the contents directly. If the contents are non-HTML format or normal text, the [Open File As] dialog box will be displayed.

[Information] The [Insert | File] menu can insert only HTML file or normal text file.

(7) Component

[Insert | Component]

Use the Component command to insert document styles frequently used in Web documents.

Select the [Insert | Component] menu to insert a document style provided by Namo WebEditor, and the [New] dialog box will appear.

Select the component you want to insert in the [Component] tab. You can preview the temporarily selected component in the [Preview] window. Click the [OK] button, and the selected component will be inserted into the current document.

(8) Clipart

[Insert | Clipart]

Use the Clipart command to insert one of clipart images provided by Namo WebEditor. You can insert an image into the folder of clipart images. The possible image file formats are jpeg or gif.

[Clipart] dialog box

The [Clipart] dialog box will appear if you select the [Insert | Clipart] menu. Using this box, you can easily insert an image with the mouse.

The dialog box consists of three tabs (Pictures, Theme, and Type), and each of them has folders that include clipart images according to the classification. Also, the name of the tab is same as that of the subfolder of the Clipart folder. So, if another subdirectory is inserted into the Clipart folder, Namo WebEditor will also add the inserted subfolder into the tabs.

The above figure shows the structure of the Clipart folder when Namo WebEditor has been installed.

If you make a new folder below the Clipart folder, Namo WebEditor will add the new folder into the tab field of the [Clipart] dialog box. For example, if you make a folder named "user", Namo WebEditor will add a tab named "user" into the tab field of the dialog box.

Inserting a clipart

1. Select the [Insert | Clipart] menu, or click the button on Toolbar1.
2. Choose one of the tabs provided by the [Clipart] dialog box.
3. Select one of the folders provided by the tab chosen in Step 2.
4. Select a clipart image to be inserted and click the [Insert] button. Or, double-click the clipart image.
5. Finally, click the [Close] button to close the [Clipart] dialog box.

Adding a new clipart folder

1. Go to the folder in which Namo WebEditor has been installed. Generally, the path of the folder is "C:\Program Files\Namo\WebEditor."
2. Confirm that the "Clipart" folder is in the "WebEditor" folder.
3. Make a new folder in the "Clipart" folder to add another tab in the [Clipart] dialog box.
4. Run Namo WebEditor, and verify that the new tab is added by selecting the [Insert | Clipart] menu.

Adding a new clipart classification

1. Select the tab into which you want to insert the new classification.
2. Click the [Add] button and enter the name of the new classification.
3. Click the [OK] button.
4. A new classification will now be added to the tab.

Adding a clipart image

1. Select the [Insert | Clipart] menu, or click the button on Toolbar1.
2. Choose one of the tabs provided by the [Clipart] dialog box.
3. Select one of the folders provided by the tab chosen in Step 2.
4. Click the [Import Files] button to add clipart into the folder selected in Step 3, and the [Open] dialog box will appear.
5. Enter the file name of the clipart you want to insert. The file format must be jpeg or gif.
6. Click the [Open] button, and the clipart will be inserted.

(9) Image

[Insert | Image]

Use the Image command to insert an image into the current document. The image formats you can use are jpeg and gif only. If you insert other image file formats, the image will be substituted with an unknown image format mark.

       JPEG or GIF                              Other image file format

1. Select the [Insert | Image] menu, and the [Image Properties] dialog box will appear.
2. Enter the path and name of an image file into the [Source] input field. This might be simplified by using the [Browse] button.
3. Enter a description of the image into the [Alt Text] input field, then click the [OK] button.
4. Now the image will be inserted into the cursor position.

The [Image Properties] dialog box has two tabs: General and Appearance.

General Tab

Image source

1. Source
   Input the file name and location of the image file to be inserted. You can input a source from not only an image file in your home directory, but also another URL.
2. Low Res
   Input the file name and location of the image file to be inserted. This image file is used while the main image file is being loaded to the Web browsers. However, this function is not necessary often. You only have to fill the [Source] and [Alt Text] input fields.
3. Alt Text
   Input alternative text. When a Web browser is in image disable mode or an image cannot be displayed, the alternative text will be displayed.
4. Copy Image
   This option copies the original image file to the folder in which document is located, and the copied image becomes the current image.

Hyperlink

Use HyperLink to link an image to another URL.

• URL
  Select the Edit button. The [HyperLink] dialog box will be displayed, and you can edit the HyperLink through this dialog box. When you click the mouse on the image in a browser, you will go to the correspoding URL. If an image has a hyperlink, there will be a border around the image. If you do not want a border, set the border size to "0" in the "Appearance" tab.
• Target Frame
  Select the Edit button. The [HyperLink] dialog box will be displayed, and you can edit the Target Frame through this dialog box. When you click the mouse on the image in a browser, the corresponding document of the linked URL will be displayed in the target frame. If the target frame is blank, the document will be displayed in a newly made window.

Appearance Tab

Alignment

When you enter an image and text together, you must determine their alignment. Namo WebEditor provides six kinds of alignment, and you can know what each alignment means through the figures shown in the [Appearance] tab.

• Top
  Aligns the top of the image with the top of the current text line.
• Middle
  Aligns the middle of the image with the baseline of the current text line.
• Baseline
  Aligns the bottom of the image with the baseline of the current text line.
• Bottom
  Aligns the bottom of the image with the bottom of the current text line.
• Left
  Places the image on the left margin, temporarily changing this margin, so that subsequent text flows along the image's right hand side.
• Right
  Places the image on the right margin, temporarily changing this margin, so that subsequent text flows along the image's left hand side.

Size

Sets the intended size of the image. You can change the width or height of the image, or restore it to its original size. The setting will be valid only when the width or height check box is on. If the check boxes are off, the size will be the actual size of the image. The [Restore Size] button will restore the original size of the image.

• Width / Height
  Sets the intended width or height of the image in pixels. If you want to apply this option, check the check box. If the check box is not checked, this option is applied to only Namo WebEditor. That is, in Web browsers there will be no change in image size. If you insert a non-fixed-size image, such as an image generated by a CGI program, uncheck the check box.

[Tip] Also, you can change the image display size by dragging the mouse handle. The mouse handle will appear if you click the left mouse button on the image.

[Caution] The Size properties have no effect on actual image size, so the load time is not changed. If you want to change the actual image size, you should use a graphic program, such as PaintShop Pro or Lview.

Space

• Horizontal
  Use this option to provide white space on the left and right sides of the image. For example, if you input 100, the image will have 100 pixels of space on both sides.
• Vertical
  Use this option to provide white space on the top and bottom of the image. For example, if you input 100, the image will have 100 pixels of space at the top and bottom.
• Border
  Draws a border around the image. If you input 0, there will be no border around the image.

                 

[Caution] Since Internet Explorer 3.0 does not support an image border, the border will not appear.

[Extended...]

Namo WebEditor supports all tags based on HTML 3.2, proposed by W3C (World Wide Web Consortium). If you want to insert a tag not supported by Namo WebEditor into the insertion position, use this button. Use the [Extended Tag Name and Attributes] dialog box to give the tag a name and any attributes. Also, you can modify or remove extended tags with this dialog box.

(10) Hyperlink

[Insert | Hyperlink] <F9>

Use the HyperLink command to create a hyperlink. Using a hyperlink, you can jump from a source location to a target location. To create a hyperlink, you must first select a source location. After selecting a source location, select the [Insert | Hyperlink] menu. The [Create Hyperlink] dialog box will then appear.

• URL
  Enter the URL resource directly. The resource could be another HTML document, an image, a bookmark, etc. As you input the URL, each component of the URL is displayed in the URL Components section. Also, the URL you input is automatically updated if the URL Components section is changed.
• Bookmark
  Select one of the bookmarks of the target document. If the target document has no bookmark, nothing is shown. If you click the hyperlink whose target location is a bookmark, the document of the URL is opened and the cursor goes to the bookmark position of the document. A bookmark list is shown in the [Bookmark] field only after the target document has been saved in the local system.
• Target Frame
  Enter a frame in which a target document is displayed.

Making a hyperlink

1. Select the source location of a hyperlink with the mouse.
2. Select the [Insert | Hyperlink] menu, and the [Create Hyperlink] dialog box will appear.
3. Enter the name of a target place in the [URL] input field. This might be simplified by using the [Browse] button.
4. Click the [OK] button.
5. Now the source place selected in Step 1 will be underlined with a blue line.

   

[Tip] If you want to verify a hyperlink, execute the Follow Hyperlink command in the Popup menu that is displayed by clicking the right mouse button on the hyperlink, or click the left mouse button while pressing the <Ctrl> key.

Users can make a hyperlink if they only know the above three fields: URL, Bookmark, and Target Frame. The following fields are for advanced users.

URL Components

• Scheme
  Choose the type of hyperlink you want to create.
  If no Scheme is chosen, the target location of the hyperlink is a bookmark in the same document. If "http" is chosen, the target place of the hyperlink is a document in other Web servers.
• Host
  Enter the Web server name you want to link.
• Path
  Enter the name of the document and its location. If you use a file in the same server, you can input the path with the [Browse] button.
• Bookmark
  If you want to link to a bookmark, select the proper bookmark in the drop-down list.
• Parameters
  Enter information to be sent to CGI, other programs, or Web servers.
• Query
  Use this option to send parameters to CGI programs. For example, this option is used to link results obtained by various Web search engines.

(11) Form Field

[Insert | Form Field]

Use the Form Field command to insert a form field. A form field is used to get input values from users and is defined by the [Insert | Form Field | Form] menu. The defined form field can be changed through the dialog box that is displayed by double-clicking the left mouse button on the form field.

You cannot confirm actual operation of form fields with the [View | Preview in Netscape] menu since form fields only function when actually used with a Web browser.

• Event
  Enter a file name of scripts or a CGI program that recieves input values from form fields.
• Extended
  Namo WebEditor supports all tags based on HTML 3.2, proposed by W3C (World Wide Web Consortium). If you want to insert a tag not supported by Namo WebEditor into the insertion position, use this button. Use the [Extended Tag Name and Attributes] dialog box to give the tag a name and any attributes. Also, you can modify or remove extended tags with this dialog box.

The [Insert | Form Field] menu has seven form fields: One-Line Text Box, Scrolling Text Box, Check Box, Radio Button, Drop-Down Menu, Push Button, and Image. Each form field can be used to get following contents.

(12) One-Line Text Box

[Insert | Form Field | One-Line Text Box]

Use this command to insert a one-line text box form field in which users can input only one line.

If you select the [Insert | Form Field | One-Line Text Box] menu, the [One-Line Text Box Properties] dialog box will be displayed.

1. Fill the [Name] and [Initial Value] fields.
2. Click the [OK] button, and a one-line text box will appear.

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name.
• Initial Value
  Input the default text to be shown when the form field box is initially displayed. If the user does not input any text as the initial value, Namo WebEditor displays a blank form field.
• Width in Characters
  Input the width of the text in characters. For example, if you input 10, the text field displays 10 characters in one line.
• Maximum Length
  Input the maximum number of characters to be entered. For example, if you input 10 as the Maximum Length, you can input at most 10 characters into the form text field.

Type

• Normal
  Use this type to make the server treat input text as normal.
• Password
  Use this type to hide the input text. If the user inputs a character in a text field, the character is displayed with ' * '. Only the server knows what the character is.

  

• File
  Use this type when the input text is a file. Web browsers will generate a [Browse] button so the user can input a file name when the document is loaded into the Web browsers.

  

[Caution] There is no distinction between File Type and Normal Type in Internet Explorer, since it does not support the [Browse] button.

(13) Scrolling Text Box

[Insert | Form Field | Scrolling Text Box]

Use this command to insert a multiple-line text form field in which users can input multiple lines of text.

If you select the [Insert | Form Field | Scrolling Text Box] menu, the [Scrolling Text Box Properties] dialog box will be displayed.

1. Fill the [Name] and [Initial Value] fields.
2. Click the [OK] button, and a multiple-lines text box will appear.

   

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name.
• Initial Value
  Input the default text to be shown when the form field box is initially displayed. If the user does not input any text as the initial value, Namo WebEditor displays a blank form field.
• Width in Characters
  Input the width of the text form field in characters. For example, if you input 10, the text field displays 10 characters in one line.
• Number of lines
  Specify the number of lines to be displayed. Note that the specified number does not restrict the number of lines of the input texts.

(14) Check Box

[Insert | Form Field | Check Box]

Use this command to insert a check box in which users can make multiple selections.

If you select the [Insert | Form Field | Check Box] menu, the [Check Box Properties] dialog box will be displayed.

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name.
• Value
  Input a value to be submitted when the check box is selected.
• Initial State
  Set the default state to be shown when the form field box is initially displayed. For example, if the [Initial State] box is checked, a check mark will be displayed in the check box.

(15) Radio Button

[Insert | Form Field | Radio Button]

Use this command to insert a radio button in which users can make only one selection.

If you select the [Insert | Form Field | Radio Button] menu, the [Radio Button Properties] dialog box will be displayed.

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name. Radio buttons with the same form field name cannot be chosen at the same time.
• Value
  Input a value to be submitted when the radio button is chosen.

Initial State

Set the default state to be shown when the form field box is initially displayed. For example, if the [Initial State] box is checked, a check mark is displayed in the check box.

• Event
  Set a JavaScript or CGI program that is executed when an event occurs in the form field. The radio button provides only onClick events.

(16) Drop-Down Menu

[Insert | Form Field | Drop-Down Menu]

Use this command to insert a drop-down menu in which users can use a multiple data list to input data.

If you select the [Insert | Form Field | Drop-Down Menu] menu, the [Drop-Down Menu Properties] dialog box will be displayed.

1. Click the [Add] button, and the [Drop Down Option] dialog box will appear.

   

2. Fill the [Item] and [Value] input fields. If you check the [Selected] box, a check mark is displayed in the check box.
3. Click the [OK] button.

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name.
• [Add]
  Use this option to add an item to the item name list. If users click the [Add] button, the [Drop Down Option] dialog box will be displayed.
• [Modify]
  Use this option to modify a [Value] or [Item] field that has been already inputted.
• [Remove]
  Use this option to remove a selected item.
• [Move up]
  Use this option to move a selected item up in the item list.
• [Move Down]
  Use this option to move a selected item down in the item list.
• [Height]
  Informs Web browsers of how many lines will be displayed. For example, if the user inputs 1 or 3, the Drop-Down menus are displayed as follows:

  

• [Allow Multiple Selections]
  Use this option to set whether a multiple selection can be performed on a drop-down menu. If a multiple selection is allowed, you can select more than 2 items in the list.
• Event
  Set a JavaScript or CGI program to be executed when an event occurs in the form field. The drop-down menu provides onClick, onBlur, and onChange events.

(17) Push Button

[Insert | Form Field | Push Button]

Use this command to insert a push button in which users can submit data, reset the form field, or activate JavaScript.

If you select the [Insert | Form Field | Push Button] menu, the [Push Button Properties] dialog box is displayed.

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name.
• Value
  Enter the text displayed on the push button. For example, if the user inputs "Submit" into the value field, the [Submit] string on the push button will be displayed.

  

Button Type

• Normal
  Use this type to send the string entered into the "Value" field. This type is mainly used in JavaScript or Visual Basic script.
• Submit
  Use this type to submit data in all the form fields to Web servers or CGI programs.
• Reset
  Use this type to clear and initialize data in all the form fields when you input incorrect data.
• Event
  Set a JavaScript or CGI program that is executed when an event occurs in the form field. The push button provides only onClick events.

(18) Image

[Insert | Form Field | Image]

Use this command to insert an image form field in which you can perform an operation similar to one that is provided by a submit type button in the push button described in the previous subsection.

If you select the [Insert | Form Field | Image] menu, the [Image Properties] dialog box will be displayed.

• Name
  Input the form field name. The form field name is used to identify the field's contents when data is submitted. Therefore, the user must input the form field name.

Image Properties

• Source
  Input an image file's name and path to use an image as a form field. This can be simplified by clicking the [Browse] button.
• Alignment
  Use this option to specify alignment between a text and an image. For example, if "Bottom" is selected, Web browsers will align the bottom of the image with the text.
• Copy Image
  Use this option to copy the original image file to the same folder as the current document and to change it to the current image form field.

(19) Script

[Insert | Advanced | Script]

Use the Script command to insert JavaScript or VBScript (Visual Basic Script) into documents.

If you select the [Insert | Advanced | Script] menu, the [Script] dialog box will appear.

1. Choose the language to be used in making a script in the [Language] field. Namo WebEditor provides JavaScript and VBScript.
2. Enter the contents of the script into the script editing window.
3. Click the [OK] button.

(20) Applet

[Insert | Advanced | Applet]

Use the Applet command to insert a JavaApplet into documents.

If you select the [Insert | Advanced | Applet] menu, the [Applet Properties] dialog box will appear.

1. Input the Applet's file name and path.
2. Set other options, then click the [OK] button.

• Code
  Enter the file name of the JavaApplet to be inserted.
• Codebase
  Enter the path where the Java applet program exists.
• Name
  Enter the name of the JavaApplet, which is used to distinguish it from the others in the same document.
• Alt text
  Input the alternative text. When a Web browser cannot run or display a JavaApplet, the alternative text will be displayed.

Alignment

The alignment of JavaApplets is the same as that of images, so refer to the alignment of images section above.

Size

• Width / Height
  Enter the screen width and height to display a JavaApplet. If the screen size is smaller than the JavaApplet size, the JavaApplet will be cut.

Space

• Horizontal
  Use this option to provide white space to the left and right of the applet. For example, if you input 100, the image will have 100 pixels of space on both sides of the applet.
• Vertical
  Use this option to provide white space on the top and bottom of the applet. For example, if you input 100, the image will have 100 pixels of space above and below.
• [Parameter]
  Enter the general-purpose parameters to be passed to the applet applications. If you click the [Parameter] button, the [JavaApplet Parameter] dialog box will appear. Clicking the [Add] button in the box will enable you to add properties of the parameters.

[Caution] Namo WebEditor cannot run a JavaApplet; it only helps you insert a JavaApplet. If you want to confirm a JavaApplet by running it, use the [View | Preview in Netscape] menu.

(21) Plug-In

[Insert | Advanced | Plug-In]

Use the Plug-In command to insert a plug-in data file into documents.

If you select the [Insert | Advanced | Plug-In] menu, the [Plug-In Properties] dialog box will appear.

1. Input the plug-in data file name and path.
2. Set other options, then click the [OK] button.

• Source
  Enter the name and path of the Plug-In data file to be inserted.
• Alt text
  Input the alternative text. When a Web browser cannot run or play a Plug-In file, the alternative text is displayed.

Alignment

The alignment of plug-in files is the same as that of images, so refer to the alignment of images section above.

Size

• Width / Height
  Enter the screen width and height to display a plug-in file.
• Hide Plug-in
  Use this option to hide the Plug-in on the home page. In Namo WebEditor, which supports WYSIWYG, the hidden Plug-In file is only visible when the Format Mark option is on.

Space

• Horizontal
  Use this option to provide white space to the left and right of the plug-in file. For example, if you input 100, the image will have 100 pixels of space on both sides of the plug-in.
• Vertical
  Use this option to provide white space on the top and bottom of the plug-in. For example, if you input 100, the image will have 100 pixels of space above and below.
• Border
  Use this option to draw a border around the image.

[Caution] Namo WebEditor cannot run or play plug-in file. It can only display the plug-in's size and alternative text.

[Caution] The border will not be displayed in Internet Explorer, which does not support it.

(22) HTML Tag

[Insert - HTML Tag]

Use the HTML Tag command to insert user-defined tags or extended tags into documents

If you select the [Insert | HTML Tag] menu, the [Extended Tag Name and Attributes] dialog box will be displayed.

1. Input a tag name and value by using the [Add] button.
2. Click the [OK] button.

Contents      Previous Chapter      TOP      Next Chapter