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
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 – 3
Setting 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 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].
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]/NamedAnchor
Named 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]/HorizontalLine
Horizontal 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
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
Get
Post
Comment
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.
A file that is passed with the URL
to where it will be sent to be
processed.
About Encoding
The Commonly Supported Encoding Types
Encoding Type
Comments
application/x-www-form-
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
urlencoded
%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 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.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Text
Password
Checkbox
Radio Button
Submit button
Reset button
File
Hidden
Image
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
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 Button
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 HTML
then 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