Original PDF Flash format Kompozer-Basics  


Kompozer Basics

Kompozer Basics

Kompozer is a web authoring software with which you can create web pages and manage a
website with no technical expertise or knowledge of HTML.

This tutorial wil introduce you to the basics of web page creation:
• Creating new html documents
• Formatting html documents
• Inserting objects such as images
• Creating links

Your web site can be simple or complicated. We recommend that you start with a simple
website while you are learning how to use Kompozer. As your knowledge and skil s increase
you can start to build more sophisticated web sites.

Creating web pages and Publishing a
website

In order to show your website on a web
browser, you have to go through two
different steps:
1. Create web pages using Kompozer.
Save al the files in one folder on your
local computer.
2. Publish (Upload) your site files to your
web server. UVic’s web server is
cal ed unix.uvic.ca.**

The web server wil al ow the pages to be
seen by people using web browsers (ex.
Internet Explorer) on other computers. The
web server sends your web pages to them
across the internet.

NOTE: Please see our “Web Publishing”
tutorial handouts for more information.


Tips for building your web site:
• Save al of your web pages and images in the same directory (folder)
• Only images in the format: .gif, .jpg, and .png are usable on the web
• Images should be resized prior to your use in Kompozer
• Do not use spaces in your file names
• Do not use capital letters in your file names
• Your web pages can have the extension .htm or .html but you should pick only one
• Learn how to create basic sites before you try more advanced things




10/25/07 12:31 PMSFG Admin:SCF:SFG General:Tutorials:kompozer-tutorial:Kompozer-tutorial.doc TM
1
Getting Started
Create a site folder on Desktop
1. Right click on Desktop
2. New >> Folder
3. Name the folder (ex. “Site” or “WWW”)

Note: Al the image files and html files that you create
for your website wil be saved in this folder
Create an image folder in the site
1. Double click on your site folder on desktop and open
folder
it. Right click within the folder.
2. New >> Folder Name the folder (ex. “images”)

Note: Al the images that you use for your website wil
be saved in this image folder
Create a new page
File >> New
(html / htm document)
Choose “Blank Document”
Open an existing document
File >> Open
Save
File >> Save as... Name the document

Note: Top page of your website should be saved as
“index.html” or “index.htm”
Set Page Property for the Site
Kompozer >> Preferences... , “Option” window

opens.
NOTE: When you create a new page,
the same page setting (property) wil
• Fonts: Choose the type face and font type
be applied.
• New Page Settings: Set the link colors, background
colors, character set
Set Page Property on the individual
1. Open the page that you want to apply a specific
page
page property.
2. Format >> Page Title & Properties

You can set: page title; author; description of the page;
language: writing direction; character set, etc.
Set Background colors and Text
Format >> Page Colors & Background
colors on the individual page

You can change “colors and images of background” and
customize the text colors.
Choose Normal View
View >> Normal Edit Mode
Or
Click on the “Normal” tab on the bottom left corner.
In the Normal View, you can format and arrange the
contents as in MS Word.

• HTML Tags: you see HTML tags added to the
elements
• Source: you can edit HTML codes of your web page
• Preview: you see almost the same view as in a
browser
10/25/07 12:31 PMSFG Admin:SCF:SFG General:Tutorials:kompozer-tutorial:Kompozer-tutorial.doc TM
2

Formatting Text
Insert Text and Format Text
You can type text in the document as in MS Word

1. Select (Highlight) the text first
2. You can change “Font,” “Size,” “ Style,” and “Color”
using the Composition toolbar buttons,
Or go Format >>


Inserting & Formatting Table
Insert a Table
1. Insert >> Table...
2. “Insert Table” window opens.
3. Choose the number of columns and rows in
“Quickly” view.
4. In “Precisely” view, you can set the table size and
border precisely.
5. In “Cell” view, you can set the text alignment, text
wrap, cel spacing and cel padding.

Note: You can change the table/cel properties anytime
later if you don’t set them when you first create a table.
Select row(s) and/or column(s)
1. Hold down the mouse and rol the cursor over the
cel (s), row(s), column(s) that you want to select (the
selected area wil be bordered with blue lines).

NOTE: To quickly choose a row or a column, click on
the rectangle box around the document frame
(top and left -- dashed circles below)



10/25/07 12:31 PMSFG Admin:SCF:SFG General:Tutorials:kompozer-tutorial:Kompozer-tutorial.doc TM
3
Change the width of column(s) and
1. Bring the cursor on the grey line between rectangle
the height of row(s)
boxes in the document frame (see above image).
2. Move the line up & down or left & right.
Insert row(s)
1. Put the cursor in one of the cel s.
2. Table >> Insert >> Row Above / Below
Or
Click on the smal triangle on the table border
Insert column(s)
1. Put the cursor in one of the cel s.
2. Table >> Insert >> Column Before (left) / After
(right)
Or
Click on the smal triangle on the table border
Merge cel s
1. Select the cel s
2. Table >> Insert >> Join Selected Cells
Split the cel
1. Select the cel that has been merged
2. Table >> Insert >> Split Cell
Delete table / row(s) / column(s) /
1. Place the cursor in the right place within a table
cel (s) / cel contents
2. Table >> Delete >> table / row(s) / column(s) /
cell(s) / cell contents
Or
Click on the smal “cross mark” on the table border
Change colors of cel s, columns and
1. Select the cel s, columns, rows or table.
rows in a table
2. Table >> Table or Cell Background Color...
Change Table Properties
1. Table >> Table Properties...

(or Double click anywhere on table)
2. Clicking “Table” tab you can customize:
a. table width & height, borders, spacing,
padding,
b. table alignment, background color
3. Clicking “Cell” tab you can customize:
a. cel size, content alignment, cel style, text
wrap, background color
Inserting & Formatting Image
Insert an Image
1. Insert >> Image...
2. “Image Property” window opens.
3. You can either set the “Alternate text” here or not.

Note: Resize the images before you use them in
Kompozer
Set the image properties
1. Select the image.
2. Format >> Image Properties... (or Right Click on
the image, Image Properties...)
**In “Dimension” view, you can resize the image size.
**In “Appearance” view, you can customize “left / top
spaces,” “image border” and “text alignment to image.”
10/25/07 12:31 PMSFG Admin:SCF:SFG General:Tutorials:kompozer-tutorial:Kompozer-tutorial.doc TM
4
Creating Links
Links al ow you to move from one place to another on the same page, to a different page on the
same site or to a page on a different site. Links may be attached to any element on a page such
as text and image.
Create a link
1. Select (highlight) text or image.
2. Click the link button on the Composition tool bar.
“Link Properties” window opens.
(link button)
3. Click on “Choose File” and choose the file that you
want to link to.
Insert an email address
1. Select (highlight) the email address.
2. Click the link button on the Composition tool bar.
“Link Properties” window opens.
3. Enter the email address and check the box “The
above is an email address.”
Edit links
1. Double-click on the linked text or image.
2. “Link Properties” window opens.
3. Change the file name or delete.
Finishing
Preview the webpage on the browser **You must save the file in the appropriate folder (ex.
WWW or Site) first to view it on a browser.
(browse button)
1. Click on Save on the tool bar. (or File >> Save as...)
2. Click on “Browse button” on the tool bar.
3. Click “Launch Application” to view the page on a
browser.
Publish your site
When you are ready to upload (publish) the site files,
open FTP program.
(WS_FTP for Windows, Fetch for Mac)
Set the proper “permissions” for the folder and files that
you upload. (**See the Web Publishing instruction)

NOTE:
Al the files that you create or use in the site (ex. images, html files) have to be saved in the
same folder.



Thank you for attending our Microsoft Office tutorial series.

This tutorial series was original y developed by the E-Learning Systems Group (ESG) at UVic
and has been expanded for use in the Student Computing Facilities.
10/25/07 12:31 PMSFG Admin:SCF:SFG General:Tutorials:kompozer-tutorial:Kompozer-tutorial.doc TM
5