The WebEdit PRO Table Builder enables you to import and export tables, using the Import and Export buttons. Use the Import/Export Field Separator to specify the character (comma, tab, etc.) that you want to use to separate the fields (cells) in tables that you are going to export, or to specify the field separator to look for in imported tables. The default file type for exported and imported tables is comma-delimited (.CSV), but you can change the file type to text (.TXT) if necessary.
WebEdit PRO’s Table Builder also includes a Database Wizard that provides a step-by-step, visual interface for constructing SQL statements that extract data from your ODBC data source and put the data into an HTML table in your document.
Note
To import data from an ODBC data source, the data source must already be set up in Windows, using the ODBC Data Source Administrator program in the Control Panel. See Help in the ODBC Data Source Administrator for instructions. You will also find an explanation of this procedure in WebEdit PRO’s online help; use the Index tab to locate the ODBC Wizard help topic.
To launch the ODBC Database Wizard:
1 Choose Table Tags from the Insert Menu, then select Table Builder. The Table Builder dialog window displays.
2 Click Import, then choose ODBC.
The first screen of the WebEdit Database Wizard displays:
3 Follow the on-screen instructions to select tables, fields, SQL operations, and so on, to construct the SQL statement that will extract the data you want. When you click Finish in the final Database Wizard screen, the selected data is loaded into the Table Builder window.
Forms enable people who are viewing your document to send information back to your Web server, be it as simple as name and address information or as complex as an order for merchandise. Typical forms include text entry boxes, check boxes, radio buttons, and a Submit button to send the information back to your server.
WebEdit Form Builder simplifies the creation of Web forms by consolidating all of the components of a form into a single, easy-to-use tool. With the Form Builder, you can quickly add buttons, text fields, lists, checkboxes, etc., and let WebEdit PRO write the HTML for you. You can even try out the form and see the information that is sent when the Submit button is pressed.
Forms are created in two stages in Form Builder: first you identify the required Action and Method for the form (explained below), then you select and arrange the elements of the form.
To launch the Form Builder:
1 Select Form Builder from the Tools menu.
Note
Throughout the form builder, required fields are colored yellow. Optional fields are white.
2 Enter the form Action. An Action is required for every form. The Action specifies where the contents of the form are sent when the Submit button is clicked. For example, the Action can be the URL of a script on your web server or a "mailto:" URL (for example, mailto:support@luckman.com). If you use mailto: followed by your email address, the contents of the form will be mailed to you when the user clicks the submit button. If you have created a CGI script to handle the form data submitted by the user and to return a message to the user, enter the URL of the script in the Action field.
3 Select the form Method. The Method specifies how the contents are sent. The Post method is almost always used. Do not change this unless you know what you are doing and you have a good reason. For more information about the Action and Method attributes, look in the WebEdit Help file under "Form."
4 When done, click OK.
The WebEdit Form Builder window displays:
The toolbar across the top gives you quick access to the various elements you can add to a form. A tooltip description for each toolbar button appears when you rest the mouse pointer on it for a second.
5 Click on the toolbar button corresponding to the element you want to add and fill in the element’s properties in the dialog that displays. Once you close the properties dialog, the element is added both to the end of the list on the left side of the Form Builder window and to the form preview on the right side of the Form Builder window (See "WebEdit Form Builder window (form in progress)".).
Most elements in a form will have three parts:
• Caption — The caption of an element is the text that users see next to or above the element. For example, if you want a First Name text entry field, you might label it First Name. Use the Document Text element to enter the caption for an element before you choose the element itself.
• Name — The Name of an element can be the same as the caption, but it does not have to be. The element’s Name is like a field name in a database. Users do not see the Name; it is just a way to identify the element to the browser.
• Value — Just as an element’s Name is like the name of a database field, so the element’s Value is like the contents of a database field. For text fields and text areas, you normally do not fill in a Value; what the user enters becomes the value. For example, if a user enters "Florence" in a text field named firstname, the value of firstname becomes "Florence," and that is what is sent back to the server.
Note
For text entry boxes you can specify the default size—number of characters—of the text box (Size) and the maximum number of characters (Max Length) that users can enter in the text box.
For check boxes and radio buttons, users do not enter anything, so you should enter a Value for each one; when a radio button or check box is selected, the browser can tell which one is selected and sends its Value back to the server.
The best way to get the feel of how the Name and Value properties work for various kinds of elements is to experiment. If the element does not look the way you want it to, double-click on it in the list and edit the properties. Also, you will be able to edit the HTML generated by the Form Builder in the document window after you exit the Form Builder.
As shown in the next figure, the list on the left of the window shows you a list of the elements you have added to your document. New elements are added to the bottom of the list. You can move elements around in your document, edit them, and delete them. The display on the right-hand side of the window shows you the form as it will appear in a browser. You can even fill in your form and click the Submit button to see the information that will be sent.
• To move an element, click on it and drag it to a new location in the list.
• To edit the element’s properties, double-click on it in the list.
• To delete an element, select it in the list and click the Delete button on the toolbar.
For more information on HTML form tags, look in the WebEdit Help file under the topic "Form Tags".
Frames are a relatively recent addition to HTML, and not all browsers support them. What frames add to HTML is the ability to divide the browser’s display window into several areas, or frames, each of which can act like a little window, displaying separate documents.
The Frame Wizard helps you create frames-based Web pages quickly without having to write the Frame and FrameSet tags yourself. You simply point and click to define where you want your frames, specify which document each frame will contain, and the Frame Wizard does the rest.
Before you launch the Frame Wizard, you might want to make some designs on paper to get an idea of how many frames you want to use, what you want to be displayed in each one, and the approximate boundaries of each frame.
The Frame Wizard can insert the HTML it writes into the current document or it can create a new document. If you want it to insert its HTML into the current document, make sure you position insertion point in the document before launching the Frame Wizard.
To create frames:
1 Choose Frame Wizard from the Tools menu. The opening Frame Wizard window displays, with a brief explanation of how to use the Next and Back buttons.
2 Click Next. The second Frame Wizard window displays. In this window you define how you wish to divide up the browser window into horizontal and vertical frames.
3 To divide an area horizontally, click on the horizontal bar button and then click in the window area on the left where you wish to place the frame. Similarly, to divide an area vertically, click on the vertical bar button and then click in the window area. You can move your frames by clicking and dragging them. If you need to start over, simply click the Clear button.
4 Once you have placed all your frames, click Next.
The third Frame Wizard window displays:
5 The next step is to specify an HTML document, frame name and other properties for each frame. To enter the information for a frame, simply click on the frame area on the left and then fill out the information on the right.
Important!
You should complete all information for each frame before proceeding to the next step.
|
Command |
Description |
|
Source |
The name of the HTML document to be displayed in the selected frame. |
|
Name |
Enter a name for the selected frame. A frame's name can be referenced by the Target attribute of an Anchor tag—for example, <A HREF="products.html" TARGET="main"> |
|
Command |
Description |
|
Margin Width |
If you need to control the margins of a frame, enter the desired margin width, in pixels. This option can be ignored. By default, all frames default to letting the browser decide on an appropriate margin width. |
|
Margin Height |
If you need to control the margins of a frame, enter the desired margin height, in pixels. This option can be ignored. By default, all frames default to letting the browser decide on an appropriate margin width. |
|
Scrolling |
This setting determines if the frame should have a scrollbar or not. Yes results in scrollbars always being visible in that frame. No results in scrollbars never being visible. Auto instructs the browser to decide whether scrollbars are needed and place them where necessary. The default value is Auto. |
|
Allow Resize |
Check this check box if you want users to be able to change the height or width of the frame in their browsers. |
6 When done, click Next. The last Frame Wizard window displays.
7 Choose whether to insert the HTML for the frames into the current document or create a new document, and click Finish. WebEdit automatically writes the HTML.
Note
The Frame Wizard uses percentages for defining the height and width of individual frames (for example, <FRAMESET ROWS="22%,78%">). If you need your frames to be a specific number of pixels wide or high, you may modify the FrameSet tags accordingly. For more information, look in the WebEdit Help file under the topic "FrameSet."
Many HTML documents are organized into sections by using heading tags such as <H1>, <H2>, etc. The Table of Contents Wizard can read such documents and automatically generate a table of hyperlinks to each section of the document. You can add this table to the beginning of your HTML document to make it easy for users to jump to any location in the document itself.
The Table of Contents Wizard creates anchors at the locations of the headings, then creates links to the anchors. Finally the wizard arranges the links in a list.
Note
The Table of Contents Wizard does not work on all pages, only ones that include heading tags.
To create a table of contents for a document:
1 Make sure that the active window contains the document for which you are creating a table of contents.
2 Choose Table of Contents Wizard from the Tools menu. The initial wizard page displays, with a brief explanation of what it does.
3 Click Next. The list of headings in the current document is displayed.
4 Click Next.
5 Select the Levels radio button for the deepest level of heading you want to include in the table of contents.
6 Click Next.
7 Select the Numbering system to add option that you want to use, or select None to use no numbers or bullets.
8 Click Next.
9 Click Finish. The table of contents HTML is inserted at the beginning of the current document. The beginning and end of the table of contents are marked with comments so you can easily select it and put it wherever you like in your document.
WebEdit PRO's Multimedia Wizard lets you create pages with multimedia content such as video and audio, plus visual enhancements such as color schemes, scrolling marquees, and even common JavaScript applets. You select the files, and WebEdit generates the HTML you need to include them in your documents.
The Multimedia Wizard automatically starts a new document each time you use it, to store the HTML it generates. If you already have a document started, you can cut and paste from the wizard-generated document into your document.
To use the MultiMedia Wizard:
1 Choose Multimedia Wizard form the Tools menu.
2 The two most popular browsers—Netscape Navigator and Microsoft Internet Explorer—use slightly different syntax to embed some multimedia objects. On the first page of the Multimedia Wizard, select whether you want the wizard to generate HTML for Navigator or Internet Explorer and click the Next button.
3 The second Multimedia Wizard window uses a tabbed-notebook interface to let you quickly choose the multimedia features you wish to add to your page.
4 Click on one of the tabs for the features you want.
5 Navigate to and select the file you want to use, and make sure the check box in the lower-right corner is selected.
For example, if you want to add a video to your document, make sure the Use Video check box is checked on the Video page. This check box will be checked automatically when you select an AVI video file. If you change your mind and decide not to use the video, simply clear the Use Video box. You can tell at a glance which types of files will have HTML generated for them because their tabs have a check mark.
Note
Not all browsers support all multimedia files.
6 When you are done selecting the multimedia features you wish to use, click Next.
7 Click Finish. The wizard writes the HTML for you and puts it in a new document in WebEdit PRO. The HTML for each type of multimedia feature is clearly commented.
The WebEdit HTML Validator is an HTML syntax checker. It tests the current document for compliance with several different levels of HTML and with Netscape Navigator and Microsoft Internet Explorer extensions.
To validate HTML syntax:
1 Make sure the HTML document you wish to check is the current document.
2 Choose HTML Validator from the Tools menu. The first time you use the HTML validator tool in a new document, the Select Doc Type dialog displays for you to select the level of HTML against which you want to validate the document.
3 Click the HTML level to which you want the document to conform.
4 Click OK. The HTML Validator lists any HTML syntax errors in the document for the HTML level you selected.
5 Double-click on any error listed to move the insert point to the place in the document where the error was located.
6 Edit the document as needed. You can edit the document without closing the HTML Validator dialog.
7 Click Close in the HTML Validator dialog when done.
Tip
To re-check the same document at a different HTML level, you first need to delete the DOCTYPE comment that the Validator inserts at the beginning of the file.
The Web is a growing and changing environment where servers and pages often move or disappear. To help ensure your hyperlinks are correct and that the pages they point to are still valid, WebEdit PRO includes a Link Validation Wizard.
The Link Validation Wizard can look at any document on the Web, examine it for inline images and hyperlinks to other pages, and then test to ensure that these images and pages exist.
You must have an open Internet connection in order to validate the links in a Web document. If you have not connected to the Internet before starting the following procedure, the Link Validation Wizard will launch your dialer program to establish a connection at the appropriate time.
To validate links:
1 Choose Link Validation Wizard from the Tools menu. The opening screen displays a brief explanation of what it does.
2 Click Next. The Enter Document URL dialog displays.
3 Enter the URL of the document whose links you wish to check. You may optionally click the URL button to construct the URL by selecting a protocol and entering server, port (if necessary), and filename information. By default the Link Validation Wizard waits 30 seconds for each link to be found before "timing out." You may decrease or increase the number of seconds, if desired.
Note
The Link Validation Wizard will not check links in a document on your hard drive. You must specify a file on the Web. You should use the full URL form (for example, http://www.server.com/path/file.html).
4 Click Next. If you do not have an open connection to the Internet, the wizard starts your dialer program to establish a connection. Once the document’s URL is found, the wizard generates a list of all of the links in the specified document then displays the Choose Links to Validate dialog.
5 To validate only one or more selected links, click the Validate Selected Links radio button and click on the links you wish to validate.
6 Click Next to validate the links. When the validation is complete, the Validation Results dialog displays.
On the left side of the list is the link that was checked, and on the right side is the status of the link.
WebEdit PRO enables you to rate your Web pages for level of nudity, sex, violence, and language, and automatically add META tags with this information. Browsers that are set up with rating software can block your document or allow it to display depending on this rating information embedded in the HTML file. The Rating Wizard steps you through adding rating information to the current document.
To rate the current document:
1 Choose Ratings Wizard from the Tools menu.
An information screen displays:
2 Click Next.
The Select a Rating System screen displays:
3 Highlight each of the listed rating systems to read a description of each one. Select the one you want to use and click Next. Depending on the system you choose, one of the following screens displays.
4 Click on each category in the list on the left, then move the slider control to the appropriate level. The default rating for each category is 0 (completely inoffensive). A description of what each level means is displayed as you move the slider control. Click Next when you have rated each category.
The final Rating Wizard screen displays:
5 The text area at the bottom of this screen shows you the rating information that will be added at the top of the current HTML document. Click Finish to close the wizard and insert the rating information into the document.
WebEdit PRO’s convenient Download Time Estimator gives you an estimate of how much time it will take for the current document to be downloaded to a browser at various transmission speeds.
To estimate download time of the current document:
1 From the Tools menu choose Download Time Estimator.
The following dialog displays:
2 Click OK when done viewing the information.
Normally as you create and edit HTML files, you save them on your computer's hard drive. When you are ready to make them available on the Web, you can transfer them via FTP (file transfer protocol) to a remote server. You need to transfer not only the HTML files but also any other files (such as graphics, sound, and video files) that are used in your Web pages.
WebEdit PRO includes an integrated FTP upload tool that lets you upload your files from within the program. The FTP upload tool can keep track of multiple FTP servers, and automatically selects all currently open documents for uploading.
To open the FTP Upload tool:
1 Choose FTP Upload from the Tools menu. the FTP Upload dialog displays.
3 The first time you use the FTP upload tool, you need to define a server where you wish to send your files. Click New. The New Server Name dialog displays.
4 Enter a name for the server (anything you like) and click OK.
5 Enter the following information in the other fields:
|
Field |
Description |
|
Server |
Enter the domain name or IP address of the server to which you want to upload files. |
|
Port |
Leave this as is (21), unless your ISP has told you that FTP services use a different port. |
|
Directory on FTP Server |
Enter the complete path to the directory where your files are to be stored. Important!
|
|
Field |
Description |
|
User ID |
Enter your FTP user ID, if applicable. |
|
Password |
Enter your FTP password. if applicable. |
|
Account |
Enter your FTP account number, if applicable. |
|
Save Password |
Select this option if you want WebEdit PRO’s FTP Upload tool to remember your password. |
6 When done, click Save. The next time you use the FTP upload tool, you should not need to use the Server tab.
Note
If you upload files to more than one FTP server, or to more than one location on the same FTP server, you can add as many servers as you like. Simply click on the New button and give each one a unique name.
7 Click the Files to Upload tab to check the list of files.
When you launch the FTP upload tool, it automatically looks to see what documents you have open. If you need to add other files, such as images, Click Add. To remove files from this list, select the files you do not wish to upload and click Remove.
8 When you are ready to upload your files, click Upload.
WebEdit PRO will prompt you to save any files that have not been saved since they were last modified, dial your ISP (if you are not connected), and automatically transmit your files.
The first time you send files with WebEdit PRO's FTP upload tool, you should double-check with your Web browser to make sure the files went where they were supposed to go. If the files are not where they are supposed to be, double-check the Directory on FTP Server field on the Server tab.
The next chapter describes WebEdit PRO’s configuration options.
Chapter 5
Configuring
WebEdit PRO
WebEdit PRO provides many customizable features, so that you can configure it to suit your work style and preferences. This chapter describes how to access WebEdit PRO’s configuration options and what each option does.
WebEdit PRO includes extensive configuration options.
To access the configuration options:
• Choose Configure from the Options menu. The Options dialog displays, with seven tabs.
The following sections describe the options found on each of the tabs in the Options dialog.
Tip
To get help for any configuration option, rest the mouse pointer on the text or control for a few seconds; a popup tooltip will give a brief explanation of what the option does.
|
Option |
Description |
|
Drag and drop behavior |
Insert a dragged file as tag (such as link or image) or open the file in a new document window. |
|
Lower case file-
|
Use lowercase for names of saved files (required for some versions of Unix). |
|
Word wrap |
Wrap text in document windows. |
|
Spellcheck Tags |
Include tags in spellchecking. Spellchecking is somewhat faster when this is off. |
|
Open new docu-
|
Create an empty document window each time WebEdit PRO is started. |
|
Option |
Description |
|
Use syntax highlighting |
Display text, tags, attributes, values in user-selected colors. This option must be on for the selections you make in the Color tab to take effect. |
|
Toolbar |
Select which toolbars to display by default. |
|
Browsers |
Select which version of available browsers to launch when the View Document with Browser command is used (different browser versions support different sets of HTML tags, so you can use this option to test your pages in different browser versions). |
|
Configure user
|
Opens the user toolbar configuration dialog. |
|
Add or Edit
|
Opens a dialog where you can select which browser to open when the View Document with Browser command is used, or add other browsers to the list of available browsers. |
Note
The "Use syntax highlighting" option in the Preference tab must be on for these selections to take effect.
|
Option |
Description |
|
Document Text |
The color of normal text in the document windows. |
|
Document Tag |
The color of HTML tags—such as <A> in <A HREF=mydoc.html>. |
|
Document Tag Attribute |
The color of attributes inside tags—such as HREF in <A HREF=mydoc.html>. |
|
Document Tag Value |
The color of attributes inside tags—such as mydoc.html in <A HREF=mydoc.html>. |
|
Option |
Description |
|
Document Tag Symbol |
The color of symbols inside tags—such as = in <A HREF=mydoc.html> |
|
Option |
Description |
|
Directory |
Select the directory where you want to store WebEdit PRO configuration files. These include all URLs that you enter in dialog boxes (so that you can select them from pick lists rather than retyping them). |
|
Option |
Description |
|
Default extension |
If you are using Windows NT and WebEdit PRO’s File Open dialog displays each HTML filename twice, choose the "HTML only" option in this tab. |
|
Option |
Description |
|
Type |
Select the control you want the Quick Preview window to use. WebEdit PRO detects Internet Explorer if it is installed. |
|
Option |
Description |
|
Display Previewer |
If selected, the Quick Preview window is displayed by default when you start WebEdit PRO. |
|
Full Window Preview |
Sets the Quick Preview window to display full-screen. |
|
Orientation |
Select how you want the screen to be split between the document window and the Quick Preview window (side by side or above and below). |
Use the check boxes in this tab to insert a blank line—Carriage Return and Line Feed—before ("Begin") and/or after ("End") the corresponding HTML tags. You may want to set some of these options to make your HTML documents more readable to you.
|
Option |
Description |
|
Tag case |
Choose how you want WebEdit PRO to format HTML tags that it inserts into your documents. This setting does not affect existing tags. |
|
Option |
Description |
|
Pathing |
Select how you want WebEdit PRO to enter file paths when you enter a filename to be included inside an HTML tag. If you select "Relative to a fixed directory," you must specify the directory under "Fixed directory" (see below). Select one of the following options: • None - Do not include any path information for the file. • Absolute - Include the file’s entire actual path. • Relative - Append the file’s path (following the root directory) to the document’s path. • Relative to a fixed directory - Append the file’s path (following the root directory) to the path specified under "Fixed directory." |
|
Reverse Slashes |
If selected, Unix-style "forward slashes" are used in paths; otherwise, DOS "backslashes" are used. |
|
Fixed directory |
If you select "Relative to a fixed directory" under Pathing, you need to specify that directory here. Use the Browse button to locate the directory you want. |
You can keep track of files that belong to a given project using WebEdit PRO’s Project Manager. When starting a new project, choose Project from the File menu, then select New to launch the Project Manager. Once you have saved a project, you can open it by choosing Project from the File menu, then selecting Open. WebEdit PRO project files have a .WEP extension.
|
Option |
Description |
|
Extended Functionality |
When selected, the Project Manager window visually differentiates files according to their status, as follows (this slows performance somewhat): |
|
• Project file not loaded in WebEdit PRO (indicated by a plain icon) • Project file that is loaded in WebEdit PRO (indicated by a pencil-tip icon) • Project file that has been modified since it was loaded (indicated by a pencil-tip icon and boldface filename) • Project file that could not be found (indicated by X) |
|
|
Close open documents on Project Manager shutdown |
When selected, exiting Project Manager will first save and close all open files related to the project. |
|
Stay on top |
When selected, the Project Manager window stays on top of all other open windows. |
The next chapter provides a basic introduction to HTML, and explains how to use special characters, user-defined tags, and server-side includes in your HTML documents.
Chapter 6
Introduction to HTML
This chapter provides an introduction to the most commonly used HTML tags, and describes several advanced HTML features of Web Edit PRO. You will also learn how to convert existing non-HTML documents into HTML documents.
The description of HTML in this chapter covers only the basic tags to help you get started. Once you have the essential concepts, you can let WebEdit PRO take care of the work of generating the HTML tags for your documents, while you concentrate on the page layout and content.
When you want to learn more about a specific HTML tag or its attributes, you should consult the comprehensive online HTML Reference that is included in WebEdit PRO’s Help system. This online reference encompasses HTML Levels 0 through 3.2, and includes Netscape- and Internet Explorer-specific additions.
In addition to presenting HTML basics, this chapter includes the following more advanced topics:
• Special characters—how to include "markup" characters (such as ">") math symbols, foreign language characters, etc., in the text of HTML documents.
• User-defined tags—how to easily define your own custom tags, such as frequently used tag combinations or text.
• Server-Side Includes (SSIs)—the purpose of SSIs, how they work, and how to access WebEdit PRO’s online SSI reference
At the end of this chapter is a list of recommended HTML resources on the Web that you can add to your bookmarks or favorites list in your browser.
The concepts of HTML elements, tags, attributes, and values are described in this section.
Element - Any "building block" of an HTML document, such as heading, body, link, image, table header, list item. Everything you see in a Web page is some kind of element.
Tag - A symbol that identifies an element to an HTML browser. Tags are enclosed in angle brackets (the greater-than and less-than symbols, < and >). Most tags are really tag pairs, such as the following:
<A> and </A> - hyperlink
<B> and </B> - boldface
<TABLE> and </TABLE> - table
Note the slash ("/") in the second tag; it indicates that the tag is a "closing" or end tag. The following are examples of tags that do not come in pairs:
• <BR> - line break
• <P> - new paragraph
• <HR> - horizontal rule
Attribute - A characteristic of an element that can be defined within the tag for that element. In the link tag <A HREF="mydoc.html">, HREF is an attribute of the link element. In the inline image tag <IMG SRC=myphoto.gif>, SRC is an attribute of the image element. (Ongoing extensions to HTML are for the most part new attributes than can be included in tags.)
Value - How an attribute will appear (or what it is, or what it will do) in a specific instance of an element. In the link tag <A HREF="mydoc.html">, "mydoc.html" is the value of the HREF attribute. In the body tag <BODY BGCOLOR="NAVY">, "NAVY" is the value of the BGCOLOR attribute.
At the most general level, every HTML document has the same basic structure, indicated by the following required tags:
<HTML>
<HEAD>
(...head elements go here...)
<HEAD>
<BODY>
(...body elements go here...)
<BODY>
<HTML>
This "minimal" HTML markup can be inserted into any document in WebEdit PRO with a single click (see the "Using the Minimal HTML Feature" section in Chapter 3).
HTML documents consist of elements plus markup (formatting) tags that tell HTML browsers (viewing software) how to display the elements. This section defines the basic HTML tags which can be placed in any text document (created by any application) to turn it into an HTML document that can be viewed in any browser. A complete reference on HTML tags is included in WebEdit PRO’s online Help.