1. Using KompoZer -- a web editor A 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

2. Introduction to KompoZer
Source:

3. Download and Install
Source:

4. How to Download and Set Up
Source:

5. Getting Started - 1
Source:

6. Getting Started -2
Source:

7. Getting Started – 3 Setting KompoZer Parameters
Source:

8. Linking materials

9. Link Button

10. The Link Properties Dialog
The 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].

11. Adding a Link
Source:

12. Adding Images with KompoZer
Source:

13. Creating Lists
Source:

14. Using KompoZer to Create Tables

15. Adding Video and other Media
Review the [Insert] Button

16. [Insert]

17. [Insert]/NamedAnchor

18. 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.

19. The Example – A capture page
Source:

20. [Insert]/HorizontalLine

21. 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.

22. 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.

23. 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.

24. Form Method Method Comment Get Post
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.

25. About Encoding Encoding Type Comments
The Commonly Supported Encoding Types
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  attachments.

26. 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 …

27. Form Field (input type)
[Form]/ Form Field..
A selector will occur with all of the input types:
Text
Password
Checkbox
Radio Button
Submit button
Reset button
File
Hidden
Image
Button.

28. 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.

29. 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

30. Design of a Form
Source:

31. Creating Forms in KompoZer
Source:

32. 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

33. Publish Button

34. First Step -- Publish button
Click [Publish]
Click Setting Tab
Site Name –
Ceweb.uml.edu
Pub address – ftp://ceweb.uml.edu/
Http address (URL) --
Note User_id
Fill in the User_id and Password

35. Before Publishing After the Web page has been: Created, Edited,
Checked for grammar, spelling, content, and appearance, and
Finally validated [Tools]/Validate HTML
then it is ready to be uploaded to your website (Published).

36. Publishing your Result

37. Advanced Features

38. Working with HTML Source Code

39. HTML Flash Embed
Source: