Introduction to Kompozer:
• KompoZer is a free open source web
development IDE. (Integrated
Development Environment).
• KompoZer is an open source WYSIWYG
(What You See Is What You Get) HTML
editor.
• It is a complete web authoring system
which integrates web page development
and web file management.
• KompoZer supports pretty much every
single HTML element, including images,
tables, and forms.
• There's also a built-in CSS editor for editing
your style sheets.
• A Site Manager for keeping track of all
your site files on both local machine and
remote servers. Publish feature for
uploading the site via FTP.
• The user can edit the web pages by using
the source code.
KompoZer complies with the W3C's web standards.
By default, pages are created in accordance to HTML 4.01
Strict and use CSS for styling, but the user can change
the settings and choose between:
1. Strict and transitional DTD's
2. HTML 4.01 and XHTML 1.0
3. CSS styling or the old font based styling.
The application can call on the W3C HTML validation,
which uploads pages to the W3C Markup Validation
Service and checks for compliance.
Installation
• KompoZer Interface:
KompoZer Interface Before we learn more about
KompoZer, let us first learn the KompoZer
interface.
Open KompoZer by locating its icon. In the figure
shown the window will display after selecting
the toolbars.
• The Composition toolbar is used to create new
file, open, save or publish a web page.
• The Format toolbar1 & Format toolbar2 are
used to format the text, add bullets, numbering
and perform similar formatting operations. I
• n the centre of the window, you can see 2
panes:
Site Manager & blank web pages.
• At the bottom of the window you can see the
Status bar. When we click on any item in the
page, its structure appears in the status bar.
Viewing Modes in KompoZer:
• The bottom right side of the window shows Edit
mode toolbar with the 3 different viewing
modes.
• Preview mode- offers the page view as see in a
browser. The difference is that in the preview
mode the scripts do not run and therefore their
effects will not be seen.
• Normal mode- is very similar to preview mode.
In this mode the table outlines are visible.
• HTML Tag view- helps those who are familiar
with HTML. A yellow marker is used to indicate
the start tag for all elements.
Working / Editing Mode in KompoZer:
• In my opinion KompoZer is better than the other
free WYSIWYG editors currently available. It's an
open-source editor, derived from the venerable
Netscape Composer of old.
• The left side of the page pane shows the 3 tabs.
• You can edit your page in 3 modes
1. Design
2. Split
3. Source
Design Tab:
• Design Tab This view lets you edit the page
and lay out elements visually. The Design tab
is actually used to design the web page.
Split tab:
• Split tab The Split view splits the screen. The
upper section shows the design view, The
lower section shows a fragment of the source
code.
Source mode:
• Source mode This mode lets you edit the full
page source. The Source tab shows all details
of the HTML code
Sidebar:
• Sidebar The sidebar may be opened on the
left hand side by pressing F9 . In earlier
versions this opened the Site Manager, now
the sidebar has two modes of use – Site
Manager DOM Inspector.
Site Manager:
• Site Manager Site manager is a powerful tool
used to navigate within the site or between
the sites.
• You can close the site manager pane by
clicking on close button or press F9 .
DOM Inspector:
• The Document Object Model
(DOM) provides a structural
representation of the page.
• In design view the Status
bar provides a view of the
slice of the tree leading to
the element selected.
• The DOM inspector in
addition shows other
branches of the tree
structure.
1. HTML view
2. CSS view
3. HTML + CSS (Split View)
FTP site manager
• FTP site manager With KompoZer, all the sites
you have specified in your Publishing Settings
become browse able in a sidebar.
• You can get a tree view of a site,
• It is also possible to filter files and show all
files, or only HTML documents or image files.
• The browsing area also allows each file its size
and the date of last modification.
• Tabs
One of Mozilla Firefox's killer features is now
available in KompoZer! Have one window only on
your screen and edit several documents at once,
each document having its own Undo/Redo stack!
• CSS Editor
Create style sheets easily and manage the styles
attached to your documents. You can see your style
settings applied '"live" to the document you're
editing.
• A Dash of Style(s)
With KompoZer, right-click on any element in
the hierarchical toolbar at the bottom of the
window and set directly its style properties.
• A Customize Toolbar
Just customize your toolbar and show only the
buttons you want/need.
• Forms
Take advantage from a XUL-based UI to edit all
your forms, and edit all your form elements.
cleaner markup
• KompoZer contains some machinery to get rid
of most of those annoying < br >. Combined
with the ability to call W3C's HTML validator
from within KompoZer you'll make valid, clean
documents.
A XFN
• When you create a new link to an external
resource, you can now add XHTML Friends
Network information to say that the owner of
that resource is someone you know and trust.
• Visible markup
In a complex page layout, you often need to see
visible carriage returns and block borders. In
KompoZer everything is controlled by a CSS style
sheet so you can customize those marks and replace
them by your own.
• Automated Spellchecker
The integrated in-line spellchecker will underline all
misspelt words as you type to ensure correct
spelling throughout the entire web page.
• A new color picker
KompoZer has a new extended color picker. Set a
color from its RGB components, or its hue saturation
and brightness. Or just use your mouse to pick up
the color.
• Table / Cell Resizing rulers
On the left and top side of the opened tab you will
find the convenient table resizing rulers which will
help you easily adjust the size of rows and columns
in any table in the web page you design.
Summary
• Unlike many other WYSIWYG editors, KompoZer does a
pretty good job of keeping your markup as clean as
possible. It's not as nice-looking as commercial editors,
but it's easy enough to use. And if you want to do some
visual editing on a budget then it's a great choice
• KompoZer is a complete Web Authoring System that
combines web file management and easy-to-use web
page editing capabilities found in Microsoft FrontPage,
Adobe DreamWeaver and other high end programs.
• KompoZer is designed to be extremely easy to use,
making it ideal for non-technical computer users who
want to create an attractive professional-looking web
site without needing to know HTML or web coding.
