Design Concepts
Weditor is designed to be extremely user friendly and easy to use for novices. There are several ideas that drive the design of weditor. These ideas are outlined here and examples are provided:
1. No technical expertise should be necessary to publish to the internet.
- Nothing needs to be installed or set up for weditor to work.
- The user is not required to know HTML, FTP or UNIX.
2. No functionality that might be useful should be hidden from the user, while functionality that is not useful should be hidden until it becomes needed.
- There are no menus in Weditor because menus hide functionality.
- There are no context menus which pop up when the second button is clicked on objects.
- When an object on which special functions can be performed is selected (these include images, tables, links, even the page itself) control panels become available for changing the properties of those objects. The available control panels become visible on the bottom toolbar.
3. The effects of changes should be immediately visible.
- When changes are made to the HTML view of the page, the changes immediately take effect in the editor.
- In other software, there are often dialog boxes that pop up when properties need to be changed. The changes don't take effect until the user clicks Ok and closes the dialog box. In weditor, these dialog boxes are replaced by Control Panels that appear at the bottom of Weditor.
- As an example, the Page Properties dialog allows you to type in the background color for the page. The change takes effect immediately. If you don't like it, you can press the Undo button to undo the change.
4. Windows should not get in the way of work you're trying to do.
- None of the control panels, including the link, image, table and page properties, and the html editor and search tool get in the way of the main editor window. Instead, they appear unobtrusively at the bottom of the window.
File Manager Features
- The file manager uses FTP on the server side to connect to any web site.
- There is a file list that shows file sizes and modification dates of files. Within the file list,
- Multiple files can be selected by checking their check-boxes.
- A single file can be selected by clicking on its name.
- There are several actions that can be performed on files:
- The default action of a file or folder can be activated by double-clicking it. The default action for web pages and folders is open. The default action for all other files is view.
- The View and Open buttons allow opening a file for editing or opening it in a browser window.
- Cut, Copy and Paste buttons allow the user to move or copy multiple files.
- The Delete button allows the user to delete multiple files.
- There are several commands that make changes to the current folder:
- Create new web page
- File Upload uploads files into the current folder
- There is a toolbar which has the URL of the current folder. This URL can be used to access the folder with the web browser.
Editor Features
Editor Window
The Editor is a WYSIWYG (What You See Is What You Get) editor that actually uses Internet Explorer to display your web pages, so you know that the web page you create will look exactly as you intended when viewed with Internet Explorer.
File Management Toolbar
The primary toolbar has four groups of buttons that allows the user to perform various functions.
- The first group of buttons allows the user to
- Save the file back to the server.
- Open the file manager
- Print the file
- Search through the file
- The second group of buttons allows the user to
- Cut, Copy and Paste text within Weditor, and also allows these operations to be performed between applications.
- You can even paste sections of other web pages using these buttons.
- The third group of buttons allows the user to undo and redo changes.
- The last two buttons allow the user to insert a table or an image.
Text Formatting Toolbar
The text formatting toolbar gives the user the most commonly used commands for formatting text:
- The first group of buttons changes the style of the selected text.
- The Font Name selector allows changing of the font. Previews are given of all the fonts, and the the selected text changes to show what the font would look like in the document.
- The Font Size selector allows changing of font size. This can be done either by typing in the desired size or using the up and down arrows.
- There are buttons to make text Bold, Italic, and Underlined.
- The Normal command removes all formatting from text.
- The Color command changes the foreground color of text.
- The Link command makes the currently selected text a link.
- The second group of buttons changes the style of entire paragraphs. It effects the currently selected paragraphs or, if no paragraphs are selected, it affects the paragraph that the cursor is in.
- The Bulleted List command converts selected paragraphs into bulleted items (an unordered list).
- The Numbered List command converts selected paragraphs into numbered items (an ordered list).
- The indent and unindent buttons can be used to indent paragraphs, bullets, images and tables.
- The Align Left, Center and Right buttons can be used to change the alignment of paragraphs, images and tables.
Control Panels
Control Panels are displayed by clicking on the toolbar at the bottom of the screen. Control panels allow the user to make changes to properties of objects selected in the Editor or to do things like search and replace and modify HTML. The control panels perform the same function as dialog boxes in other programs. However, they do not obscure the Editor window. Changes made in the control panels appear immediately in the Editor.
Link Properties
This control panel becomes enabled when the user clicks on a link. It allows the user to:
- Change the type of link (link to email address or link to web page)
- Change the address of the link. A browse button brings up a web page picker dialog that allows the user to pick a web page on the user's web site.
- Test whether the link works by opening up a new Explorer window and instructing it to go to the URL of that link
- Remove the link
- Make the link come up in a new window when clicked
Image Properties
This control panel becomes enabled when you click on an image. It allows the user to:
- Specify the location where the image is stored. A browse button brings up an image picker dialog box that allows the user to interactively pick an image from the web site, form another web site, from the clipart library or to upload it from their computer.
- Specify the width and height of an image. You can let Explorer use the Image's default width and/or height, or you can specify them as a percentage of the enclosing object's dimensions or in terms of pixels.
- Specify the tool tip that will appear when the user moves their mouse over the image.
- Specify the width of a border around the image. For images that are also links, you can set the border width to 0 to disable the border.
Table Properties
This control panel becomes enabled when a user enters a table. It has:
- Buttons for deleting rows and collums. The row in which the cursor is located is deleted each time the button is pressed.
- Buttons for adding rows and collumns. A drop down textbox allows you to select whether the new row/column will be inserted before or after the cursor.
- As with the Image Panel, the Table Panel has an area that allows you to specify the width and height of a table. You can let Explorer pick a default height/width or you can specify them as a percentage of the enclosing objects' dimensions in terms of pixels.
Page Properties
The page properties dialog box is always available. It allows the user to modify settings that affect the whole page. These include:
- The page title which appears at the top of the browser when the page is viewed.
- The background image of the page
- The sound that plays in the background
- The default font and it's size
- The margins of the page
- The background color, text color, link color, visited link color and active link color
HTML Editor
The HTML Editor is available for those users that know HTML and would like to use it to do advanced things such as add Java Script.
- A resizable split pane allows the user to see both the web page and its HTML code.
- Changes made in the HTML editor are immediately seen in the editor and vice versa.
- The user can modify all portions of the HTML.
What Weditor Does Not Yet Support
There are several features that are not essential to most users and are not yet supported in Weditor. However, users that know HTML can do these things using the HTML Editor:
- Frames
- Cascading Style Sheets (CSS)
- Rollovers (Images or text that change when the mouse moves over them)
- Floating elements
- Forms
