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 will 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 skills 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 all the files in one folder on your local computer. 2. Publish (Upload) your site files to your web server. UVics web server is called unix.uvic.ca.** The web server will allow 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 all 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: All the image files and html files that you create for your website will be saved in this folder 1. Double click on your site folder on desktop and open it. Right click within the folder. 2. New >> Folder Name the folder (ex. images) Note: All the images that you use for your website will be saved in this image folder File >> New Choose Blank Document File >> Open File >> Save as... Name the document Note: Top page of your website should be saved as index.html or index.htm Kompozer >> Preferences... , Option window opens. Fonts: Choose the type face and font type New Page Settings: Set the link colors, background colors, character set 1. Open the page that you want to apply a specific 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 colors on the individual page Format >> Page Colors & Background 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

Create an image folder in the site folder

Create a new page (html / htm document) Open an existing document Save

Set Page Property for the Site NOTE: When you create a new page, the same page setting (property) will be applied. Set Page Property on the individual page

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, cell spacing and cell padding. Note: You can change the table/cell properties anytime later if you dont set them when you first create a table. Select row(s) and/or column(s) 1. Hold down the mouse and roll the cursor over the cell(s), row(s), column(s) that you want to select (the selected area will 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 the height of row(s) Insert row(s)

1. Bring the cursor on the grey line between rectangle boxes in the document frame (see above image). 2. Move the line up & down or left & right. 1. Put the cursor in one of the cells. 2. Table >> Insert >> Row Above / Below Or Click on the small triangle on the table border 1. Put the cursor in one of the cells. 2. Table >> Insert >> Column Before (left) / After (right) Or Click on the small triangle on the table border 1. Select the cells 2. Table >> Insert >> Join Selected Cells 1. Select the cell that has been merged 2. Table >> Insert >> Split Cell 1. Place the cursor in the right place within a table 2. Table >> Delete >> table / row(s) / column(s) / cell(s) / cell contents Or Click on the small cross mark on the table border 1. Select the cells, columns, rows or table. 2. Table >> Table or Cell Background Color... 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. cell size, content alignment, cell style, text wrap, background color

Insert column(s)

Merge cells Split the cell Delete table / row(s) / column(s) / cell(s) / cell contents

Change colors of cells, columns and rows in a table Change Table Properties

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

Set the image properties

10/25/07 12:31 PMSFG Admin:SCF:SFG General:Tutorials:kompozer-tutorial:Kompozer-tutorial.doc TM 4

Creating Links
Links allow 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 (link button) 1. Select (highlight) text or image. 2. Click the link button on the Composition tool bar. Link Properties window opens. 3. Click on Choose File and choose the file that you want to link to. 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. 1. Double-click on the linked text or image. 2. Link Properties window opens. 3. Change the file name or delete.

Insert an email address

Edit links

Finishing
Preview the webpage on the browser (browse button) **You must save the file in the appropriate folder (ex. WWW or Site) first to view it on a browser. 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. 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)

Publish your site

NOTE: All 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 originally 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