Web Design With KompoZer
Web Design with KompoZer
Website: http://etc.usf.edu/te/
KompoZer is a free, cross-platform program that provides an easy-to-use WYSIWYG (What You
See Is What You Get) interface for web page authoring and editing. KompoZer has many of the
features of more expensive commercial programs such as Macromedia Dreamweaver and Microsoft
Frontpage. With KompoZer, you can work on your web page using the graphical interface, or you
can quickly switch to code view to make changes to the HTML code.
Getting Started: The Interface
The Page Area is the main work area in
The first time you start KompoZer, a window
KompoZer. This is where you will lay out and
may pop up asking you to notify the creators
format the contents of your new web pages.
of KompoZer that you have installed the
program. The program will not send any
Below the Page Area, you will see a set of
personal information to the servers at
tabs that allow you to change your view.
KompoZer.net (it will just increment a
Most of the time, you will be working in
counter used to track how popular the
Normal view, but you can also switch to
program is) so it’s safe to click on OK on this
Source view to view the HTML code created
window. You will also see a window with
by KompoZer in the background. This is the
some tips. If you do not want to see this
code used by your web browser to render or
window each time KompoZer starts, uncheck
display your web page.
the box next to Show tips at startup and
close the window.
KompoZer provides a graphical interface for
The Preview tab is supposed to give you an
web design. At the top of the KompoZer
idea of what your page will look like once it
window you will see a toolbar that has
is uploaded to the server, but it is much
buttons for the most common items you
better to check your page(s) with an actual
might want to insert into your web pages,
web browser.
such as links, images, tables, and form
fields.
The tab at the top of the Page Area shows
you the title of your page (it will be shown as
untitled when you have an unsaved new
document open). You can open several pages
at a time with KompoZer. Their titles will be
The toolbar also contains buttons that allow
displayed as separate tabs.
you to create a new document, open an
existing document, and save the currently
The Status Bar at the bottom of the
open document.
KompoZer window shows you the HTML tag
you’re currently working on. You can quickly
select an element on your page by clicking
on its tag in the Status Bar.
The other toolbars at the top of the
File Management
KompoZer window include buttons for
Before you begin creating new pages with
changing the formatting of your text.
KompoZer, you should create a folder on your
desktop where you will save all of your
Below the toolbars you will see the Site
pages. Having all the web pages for your site
Manager on the left and the Page Area on the
in one folder will make it easier to upload
right. The Site Manager is where you will see
them later on. Your files must be on a web
a list of the files and folders in your site.
server before they can be accessed by others
over the Web. KompoZer has an FTP (File
Transfer Protocol) client built in, but it does
not work with servers that require a secure
connection. In order to upload your files to a
server that requires a secure connection you
Web Design with KompoZer
Created by Luis Perez
Page 1 of 6
Last Updated: 6/12/08
will have to download a program such as
where you can select the location where you
Fugu on the Mac or PuTTY on Windows.
want to save your page.
Once you have created a folder to store your
Adding Content
web pages, you will need to set up a site in
Once you have created a new page, start
KompoZer as follows:
typing the text you want to display on your
1. Select Edit, Publishing Site Settings.
page in the Page Area, then use the buttons
2. Enter a name for your site in the Site
in the Format Toolbar to change its
Name field.
appearance. You can also copy and paste text
3. Point KompoZer to the folder you created
from a text editor such as Notepad or Text
to store your files on your computer by
Edit, then use KompoZer to format it.
clicking on Select Directory in the
Publishing Server section.
You do not need to press Enter or Return
4. Click on the New Site button. Your new
when you reach the end of a line in the Page
site will be listed under Publishing Sites.
Area. You should let your text wrap until you
5. Click on OK to close the Publish Settings
are ready for a new paragraph, then press
window.
Enter or Return. KompoZer will create a new
paragraph each time you press Enter or
The next step will be to create a folder to
Return. A paragraph is a block-level element
hold all of your images. By keeping all of
in HTML, meaning that it has a space before
your images within a subfolder of your site’s
and after it. Other block-level elements that
folder you will ensure that the file paths
also have spaces before and after them
work when you upload your site. To
include headings, which you can use to
create a new folder for your images,
divide your page into sections.
click on the New Folder button at the
top of the Site Manager (you may have
Formatting
to save your new document, then click
The buttons in the Format Toolbar allow you
on the Refresh button to see the
to do the following (if you hover over any of
contents of your site in the Site
them a tooltip should pop up to let you know
Manager). When you click on the New Folder
what they do):
button, a window will pop up where you can
• Change the color of your text. The top
provide a name for your folder. I recommend
square sets the foreground color and the
naming it images. You should place any
bottom square sets a background color.
images you want to use in your site in that
subfolder before you insert them in
KompoZer. You can do this using the Finder
on the Mac or Windows Explorer on Windows
• Change the text size.
XP or Vista.
Creating a New Page
Creating a new page is very simple with
• Make text bold, italic, or underlined.
KompoZer. To create a new page, click
on the New button in the toolbar.
You should save your new page before
• Change the alignment so that text is
you begin adding text and images. To
justified, right, or center aligned.
save your new page, click on the Save
button or use the keyboard shortcut
Command (Control) + S.
• Indent or Outdent text
KompoZer will ask you to give your page a
Page Title before it can be saved. The title is
displayed in the title bar of the web browser.
It is also displayed when the page is
The Format Toolbar also allows you to create
bookmarked, so you should make it as
bulleted and numbered lists. To create a list,
descriptive as possible.
click on the appropriate button,
then start typing the text for the
Once you’ve given your page a title, click on
first item in your list.
OK to open up the Save Page As dialog box
Web Design with KompoZer
Created by Luis Perez
Page 2 of 6
Last Updated: 6/12/08
To create another item, press Enter or Return
2. Click on the Image button in the
and a new bullet or number will be added for
toolbar (or select Insert, Image).
your next item in the list. The actions
This will bring up the Image
performed by the buttons in the Format
Properties dialog box.
Toolbar can also be performed by using the
3. In the Location tab, click on the
Format menu.
Choose File button to the right of
the Image Location field to locate
To change the font of your text, you can
the image file on your computer.
select a new font by using the Font drop
4. Once you’ve found the image you want
down menu.
to add to your web page, click on Open
and the file path will appear in the
Image Location field. A preview of your
image will also be shown in the Image
Preview area of the Location tab.
5. Make sure the box next to URL is relative
is checked and enter some Alt text (this
text should describe your image and is
You should select a font such as Arial,
used by the visually impaired when they
Helvetica, or Times New Roman as these are
access the web page with a screen
likely to be installed on your visitors’
reader).
computers.
6. Click on OK to add the image to the
page.
You should divide your page into sections by
creating headings or inserting a horizontal
The other tabs of the Image Properties dialog
rule. To create a heading, select the text you
box allow you to set other options for your
want to format as a heading and select a
image, such as change its dimensions in the
heading type from the pulldown menu in the
Dimensions tab, make it a link by adding a
Format Toolbar.
URL in the Link tab, or add space around it in
the Appearance tab. You can also set
alignment and wrapping options for your
image in the Appearance tab.
You can also insert an image by dragging and
dropping from the images folder in the Site
Manager (you must click on the plus sign next
to the images folder to show all the images
you have placed in it). You can then set other
The heading levels begin with Heading 1 (the
options for it by right-clicking on the image
biggest) and go down in size to Heading 6
(or Control-clicking on a Mac) and selecting
(the smallest). A good design practice is to
Image Properties.
use headings in order (Heading 1 should be
used before Heading 2 and so on).
Creating Links
There are three main types of links you can
To add a horizontal rule, place the cursor
create in KompoZer:
where you want to insert it then select
1. A link to another web page on your site
Insert, Horizontal Rule from the Menu Bar.
or on the Web.
2. A link to another section within the same
Adding Images
web page.
You should place your images in the images
3. A link to an email address.
subfolder of your site’s folder before you
insert them into your web page using
To add a link to another page:
KompoZer. It is also very important that you
1. Select the text you want to make into a
save your new page first before you add any
link.
images to it. This will ensure that they are
2. Click on the Link button in the
displayed correctly when your page is
toolbar. This will open the Link
uploaded to the server.
Properties dialog box.
3. Enter the URL of the Web page you want
To add an image:
to link to in the Link Location field. If
1. Place your cursor where you want to
you are linking to a page within your
insert the image.
Web Design with KompoZer
Created by Luis Perez
Page 3 of 6
Last Updated: 6/12/08
site, click on the Choose File button and
You should be careful to select a background
locate the file on your computer.
color or image that still allows the text to be
4. Click on OK to add the link to your page.
legible. Black text on a white background is
the most legible combination, but white text
The link will be displayed in the default color
on a black background is almost as good.
for links (blue) and underlined. You can
change the default colors for your links by
Adding a Table
selecting Format > Page Colors and
Tables were originally intended to display
Background and then clicking on the radio
only tabular data, but they were adapted
button next to Use custom colors. You can
into a layout tool by many web designers.
then change the default colors for your links
by clicking on the Link text color square.
To add a table, click on the Table
button on the toolbar. There are two
To add a link to an email address (such as for
ways to add a table: Quickly or
a contact link), you will open up the Link
Precisely. If you select the Quickly tab, you
Properties dialog box as described above and
can drag your pointer to select the layout of
check the box next to The above is an email
your cell in the window.
address.
You can also create links to other sections
within the same page. You should do this if
you have a long page. To create this kind of
link you must first create an anchor at the
beginning of the section you want to display
when the link is clicked. To insert an
anchor, place your cursor where you
want it to be placed, then click on
the Anchor button in the toolbar. Give
your anchor a brief name and click on OK to
add it to the page.
In the Precisely tab, you can enter the
To create a link to the anchor, create a link
number of rows and columns for your table
as usual, but instead of entering a URL select
using text fields. You can also specify the
the anchor using the drop down menu in the
width of your table, and whether or not a
Link Location field. The anchor will be listed
table border will be displayed. You can
with a pound sign before its name.
specify the width of your table either in
pixels, or as a percentage of the browser
It is recommend that you create an anchor at
window.
the top of the page as well, then include a
Back to Top link after each section to allow
In the Cell tab, you can specify the
the user to get back to the beginning of the
cellspacing and cellpadding for your table’s
document.
cells. The cellspacing increases the space
between the cells (the borders between
Changing Backgrounds
them appear to get thicker), while the
You can change the default background of
cellpadding increases the distance between
your document from white to any color you
the text in a cell and its borders.
want. You can also select to have an image
as your page’s background. To change the
Once you have added the table to your web
background for your page, select Format >
page in KompoZer, you can access its
Page Colors and Background. To select a
properties at any time. First, click anywhere
color as your background, first click the radio
in the table, and then click once on the table
button next to Use custom colors, then
tag in the status bar to make sure the whole
select a background color by clicking on the
table is selected. Next, right-click (or
color square next to that option.
Control-click on a Mac) on the selected table
and choose Table Properties from the context
To use an image as your background, select
menu.
Choose File in the Background Image section
of the Page Colors and Background dialog
You can also change the properties for just a
box.
range of cells by selecting them first and
then right-clicking (or Control-clicking) and
Web Design with KompoZer
Created by Luis Perez
Page 4 of 6
Last Updated: 6/12/08
selecting Table Cell Properties. To select
be listed on the left side of the CSS
more than one cell, click on the first cell and
Stylesheets window.
then drag down or across to select a column
5. To edit a rule, select it in the Sheets and
or row.
rules list on the left side of the CSS
Stylesheets window and use the tabs at
Previewing Your Page
the top of the window to set your text,
To preview your page in a web
background, border and other formatting
browser, click on the Browse button
options.
in the toolbar. This should launch your
6. To remove a rule, select it in the
default web browser so you can see
Sheets and rules list and click on
how your web page will look once it is on the
the delete button.
Web. If you have not saved your page,
7. Click OK when you’re done editing your
KompoZer will prompt you to do so before it
CSS to close CaScadeS.
will allow you to preview it.
This will add the CSS to the head section of
Cascading Style Sheets
your page (the head section is not visible
KompoZer includes a built-in Cascading Style
when you open the page with a web
Sheets (CSS) editor called CaScadeS. CSS
browser). A better option is to export the
allows you to separate your website’s
stylesheet information so that it is on a
content from its presentation. There are
separate file you can link to every page on
many benefits to using CSS in your websites,
your site. This simplifies site maintenance by
including making your web pages more
placing all formatting information in one file.
accessible to people with disabilities and
making them easier to maintain. To learn
To export a stylesheet to a separate file:
more about CSS, visit http://
1. Click on internal stylesheet in the Sheets
www.cssbasics.com.
and rules list on the left side of the CSS
Stylesheets window.
Note: Make sure to save your web page
2. Click on Export stylesheet and switch to
before and after using CaScadeS to make
exported version on the right side of the
sure your stylesheets work properly.
window.
3. Enter a name for the CSS file (make sure
To create a new stylesheet:
it ends in .css) and click on Save. Make
1. Click on the CaScadeS button in
sure to save it in your site’s root folder
the toolbar. This will open the
(the folder where your home page,
CSS Stylesheets window.
usually named index.html, is saved). The
2. Click on the pulldown menu in
new external stylesheet will be listed in
the upper left corner of the window (it
the Sheets and rules list.
has the CaScadeS icon on it) and choose
4. You can edit your rules the same way you
Style Rule.
would with an internal stylesheet. Click
3. Use the radio buttons on the right side of
on OK when you’re done editing your CSS
the CSS Stylesheets window to select the
to close CaScadeS.
type of rule you want to add. There are
four types of rules you can add, but the
You can then link the external stylesheet to
ones you wil use the most when you first
any page on your site and that page will be
start using CSS are the type and class
formatted according to the rules you’ve
selector rules:
created in the stylesheet. To link an existing
• Type selector rules apply to an HTML
stylesheet to a page:
tag, such as the H1 tag used to create
1. Open the page you want to style in
first level heading or the P tag used to
KompoZer and make sure you save it
create paragraphs. Choose the tag you
before proceeding to the next step.
want to style using the pulldown menu
2. Click on the CaScadeS button to open the
in the CSS Stylesheets window.
CSS Stylesheets window.
• Class selector styles are reusable styles
3. Click on the pulldown menu in the upper
that can be applied to any element on
left side corner of the window (it has the
the page. A class can be named
CaScadeS icon on it) and choose Linked
anything you want, but the name has
Stylesheet.
to start with a period.
4. Click on Choose File on the right side and
4. Once you have chosen a rule type, click
locate your CSS stylesheet file, then click
on Create Style rule. The new rule will
on Open.
5. Click on Create Stylesheet.
Web Design with KompoZer
Created by Luis Perez
Page 5 of 6
Last Updated: 6/12/08
6. Click on OK to close CaScadeS.
with KompoZer to create professional
looking websites.
A web page can have both an internal and an
external stylesheet applied to it. When there
Other Resources
is a conflict, the style specified in the
• Mozilla Firefox (http://www.mozilla.com/
internal stylesheet will usually win out.
firefox/) A great alternative to Microsoft
Internet Explorer, Firefox is a very secure
Helpful Design Hints
web browser that also supports a number
• Try to keep the file size of your images
of extension (3rd party plugins) that are
down by optimizing them in an image
good for web designers, including:
editor. This will reduce the download time
for your web pages.
Colorzilla (http://www.iosart.com/
firefox/colorzilla/): a color picker that sits
• Include headings, bold text for key terms,
on the Mozilla status bar. You can use
and lists to make it easier to scan your
Colorzilla to find out the hexadeximal or
page. People do much more scanning than
RGB value of any color displayed on a web
reading online. Headings make it easier to
page.
scan a web page.
MeasureIt (http://www.kevinfreitas.net/
• Ensure that there is good contrast between
extensions/measureit/): use this extension
your text and your background. Black or
to find out the dimensions of any element
dark text on a white background works
on a web page
best.
Web Developer Toolbar (https://
• Left-aligned text provides a good resting
addons.mozilla.org/extensions/
point for the eye as it moves across the
moreinfo.php?id=60): this toolbar adds a
page. Center-aligned text does not and
number of web developer tools, such as
should be avoided unless absolutely
validators and more to Mozilla Firefox.
necessary.
• Naming your pages: avoid spaces or upper
case in your file names, and try to keep
them short to avoid typing errors by your
website visitors.
• Provide a descriptive title for each page.
This title will make it easy to identify your
page in a long list of bookmarks.
Web Design Websites
Visit these websites to learn more about how
to use HTML to design web pages:
• Web Design from Scratch (http://
webdesignfromscratch.com/) Learn design
concepts that will help you create visually
appealing as well as highly usable web
pages.
• W3Schools (http://www.w3schools.com)
This site has tutorials on HTML, CSS and
other web design topics. A nice feature of
this site is the interactive examples where
you can try out the code yourself.
• Open Source Web Design (http://
www.oswd.org)
This website provides many free web
design templates for download. These
templates can be customized and edited
Web Design with KompoZer
Created by Luis Perez
Page 6 of 6
Last Updated: 6/12/08
