Using KompoZer -- a web editorA collection of video tutorials

To USE this Powerpoint you must be online

To See the Videos Click the Arrow key when it appears

Material found on Youtube.com 10/2009

Introduction to KompoZer

Source: http://www.youtube.com/watch?v=balaIg2aLkg

Download and Install

Source: http://www.youtube.com/watch?v=blswgvw9E3k

How to Download and Set Up

Source: http://www.youtube.com/watch?v=blswgvw9E3k

Getting Started - 1

Source: http://www.youtube.com/watch?v=eBkvyTBq47Y

Getting Started -2

Source: http://www.youtube.com/watch?v=cokpGGXzzxw

Getting Started – 3Setting KompoZer Parameters

Source: http://www.youtube.com/watch?v=gTSTrYpCTY4

Linking materials

Link Button

Link:

Requires you to supply two items:

A text description of the site that the viewer will be transferred to upon clicking the text.

The URL of the linked location.

The text you supply should be a meaningful description of what will follow. If the material to be linked is a large file, likely to be slow to load, then the viewer should be informed how large the file is and given an estimate of the loading time.

The Link Properties DialogThe URL can be an absolute URL, in which case: •Type it in the "Link to" window in the dialog box.•Copy from the Netscape Location: window and paste in the second window.•Place the mouse on the text link and click the right mouse button; then select the Copy Link to Clipboard option. Finally, paste it in the "Link to" window.

The URL can be a file in the current system's directory, (i.e. a relative URL). •A simpler method is to click [Choose file..] and use the usual Window's directory dialog box to find the correct file, highlight it, and click [Open].•After the link's text and URL are completed and click [OK].

Adding a Link

Source: http://www.youtube.com/watch?v=xNETETNlICw

Adding Images with KompoZer

Source:http://www.youtube.com/watch?v=2GXx_X2oUMg

Creating Lists

Source: http://www.youtube.com/watch?v=3BaEl5UmdUs

Using KompoZer to Create Tables

Adding Video and other Media

• Review the [Insert] Button

[Insert]Insert:

The insert operation contains the major composer tool bar buttons, i.e.. link, target, image, H. Line, table. The major new insertion operation found only here is the insert HTML Tag.. This allows the user to insert any HTML tag not supported directly by Composer.

Insert Dialog Box Operation

Insert Image

Insert a Table

Insert Link

Insert a Named Anchor.. (an inline anchor or reference point)

Insert Horizontal Line.

Insert HTML

Insert Characters and Symbols

Break below Image

[Insert]/NamedAnchorNamed Anchor:

The named anchor operator creates an inline anchor or reference point on the Web page that can be reached from links from another point within the same page or from other documents. The name should be unique to the page. The highlighted text will normally be used to form the name, unless the document's author overrides it. When viewing the page in Composer a target's location is indicated by the tag icon. (This an example of how WYSIWYG word processors and HTML editors differ.

The Named Anchor Dialog Box

An Example of adding media

• Note this example also shows you how to create a Logo page

• Shows setting the page color and background image

• Setting up and using a table tools.

• Inserting Youtube videos.

The Example – A capture page

Source: http://www.youtube.com/watch?v=7cudH9fNeMM

[Insert]/HorizontalLineHorizontal line or Horizontal Rule <HR> tag:

The H. Line is used to create a separator between sections of the document using a horizontal line. This used to be called a horizontal rule. There are attributes to the <HR> tag that allow for 3-D effects, greater control of length and positioning, etc. These are not all currently supported by Composer. Use the HTML editor if these attributes are needed. To create a horizontal rule, click the mouse where you want it to appear, and then click the H. Line button.

Using the Mouse to alter the length and the width of the Horizontal rule.

Clicking on the horizontal line will bring up a dialog box that will allow the user to alter the width, length, or appearance.

You may note that some pages on the Web use a graphic as a horizontal rule. These are just a special form of inline image. Thus, they can be captured like any other image on the Web and can be applied by the image button. To find archives of simple ones or animated ifs search for "image archive" + bar.

The horizontal rule can appear to be three dimensional. For example see below.

Forms

Forms:

Allows for interaction between the user and the web page or the web server. This is a necessary requirement for e-business and distance learning.

Creating the form <form></form>

• The form tag creates a container for all of the rest of the input tags, thus the first step to creating a Form on a page is [Form]/define form…

• Fill out the Definition dialog box

• After filling out the form and clicking [OK] a box will appear on the screen as doted lines.

Form Name

• The form name can be anything that is not a reserved one.

• It is a good idea to name the form in a meaningful manner. The form is an object. When programmers refer to it is easier to refer it by name.

Form Method

Method Comment

Get A message attached to the URL of the location where the information is to be processed. The attachment follows the usual URL starting with a "?" and followed by name and value pairs. Some special character information is encoded to allow the receiving location to distinguish the operator characters from those used as normal text.

Post A file that is passed with the URL to where it will be sent to be processed.

About Encoding

Encoding Type Comments

application/x-www-form-

urlencoded This process translates spaces in the information to "+", non-alphanumeric data into % followed by a two digit hexadecimal that are the ASCII code for the symbol, and the line brakes as

%0D%0A.

text/plain As the name implies, a simple text file.

multipart/form-data Allows the form's components, i.e. the type, send file, to be used to send a single MIME-compatible compound document. This is a fancy way of describing the familiar  email attachments.

The Commonly Supported Encoding Types

The Components of the Form Container

These other tags go inside the Form, i.e. you only use one form container but you can have as many components as you need

• Form Field (input type)• Form Image• Text Area• Selection List …• Define Button …• Define Label …

Form Field (input type)• [Form]/ Form Field..• A selector will occur

with all of the input types:1. Text

2. Password

3. Checkbox

4. Radio Button

5. Submit button

6. Reset button

7. File

8. Hidden

9. Image

10. Button.

Form Field (input type) more

• Note the radio button requires that you put then into a group, since only one of the group can be selected.

• Every member must have the same group name (spelling and case).

• The field value is the value that goes with that choice.

• One of the group can be checked as Initially Selected to indicate the normal choice.

Form – Define Button

• In order for this option to work correctly is to highlight the text to appear on the button and then select [Form]/Define Button ..

• For example to create a submit button Highlight the word “submit” and then

Design of a Form

Source: http://www.youtube.com/watch?v=ymqwCSPsfww

Creating Forms in KompoZer

Source:http://www.youtube.com/watch?v=ymqwCSPsfww

Before Watching the Publishing Video

• Read carefully the specific parameters of the Course web site.

• You will need these to enter these values in the Publishing tabs forms

Publish ButtonPublish to Web Site

Publish:

Publish replaces the need for using Coreftp to do a file transfer between the PC lab computer and ceweb.uml.edu where your web site resides. The Publish operation will work between any two machines. After setting up the preferences, [Publish] will allow movement of the HTML document and all the associated files with one operation. .

First Step -- Publish button

1. Click [Publish]2. Click Setting Tab

1. Site Name – Ceweb.uml.edu

2. Pub address – ftp://ceweb.uml.edu/

3. Http address (URL) -- http://ceweb.uml.edu/User_id• Note User_id

4. Fill in the User_id and Password

Before Publishing

After the Web page has been:1. Created, 2. Edited, 3. Checked for grammar, spelling, content, and appearance, and 4. Finally validated [Tools]/Validate HTMLthen it is ready to be uploaded to your website (Published).

Publishing your Result

Advanced Features

Working with HTML Source Code

HTML Flash Embed

Source: http://www.youtube.com/watch?v=-L4pMmyMwMU