Linux Library

Linux Library

Bringing You the Latest Linux News, Reviews, and Tutorials

Learning Web Design With Kompozer

Kompozer Screenshot

If you are interested in taking your first steps into web development Kompozer may be the tool for you. This powerful WYSIWYG web authoring platform is completely free and based on Gecko, the engine behind Mozilla.

Kompozer Features

Not only is Kompozer fast, and easy to learn, but it also supports HTML, XML, CSS, and Java. You can even use the built in FTP manager to manage multiple sites simultaneously.

More About Kompozer

Or you can use Kompozer to create forms, tables, links, and insert images into your web pages. Kompozer allows direct code editing or split code and graphical views also.

Kompozer is an excellent choice for people wanting to learn the basic elements of web design, I myself learned using a similar interface. Kompozer offers the unique ability to design your website using a graphical interface to keep things simple.

But after your site gets complicated enough, eventually small errors will occur and you will find yourself learning HTML and CSS one step at a time. Here I will help get people familiar with the basic

Kompozer interface, and hopefully teach you as much about starting your first web page as possible. But first, this is how you can install Kompozer.

$ sudo apt-get install kompozer

Understanding The Kompozer Interface


The Kompozer interface might seem slightly complex after looking around, but things really aren’t so difficult. Any action you want to preform can be done using the menus at the top, to speed things up you can use the many toolbars available. When using Kompozer in design mode you can see how pages will look as you are building them, Kompozer will edit the HTML in the background.

Composition Toolbar

Most important tasks that you will use frequently can be found in the primary toolbar directly under your menu area. From here you can preform actions like creating new pages, opening existing pages and saving pages. You can also add commonly used items into your pages, some items include links, images, tables and forms.

Format Toolbar

The next toolbar offers many different ways of formatting text in your pages. From here you can turn on bold text, italic text, or underlined text. You can also choose different sized headers, create lists and align text inside your page text as well.

Tab Toolbar

Using Kompozer you can edit multiple pages at the same time, the pages that you have open will appear in the tab toolbar. Pages in your tab toolbar will appear as untitled until the page is saved, also when a page is edited and needs to be saved the tab will have a notification icon to inform you.

Mode Toolbar

You can use the mode toolbar at the bottom of the Kompozer window to switch between different display modes. These tabs will switch the Kompozer interface between design, source or split viewing modes.

Status Toolbar

When you are working with a page you can use the status bar located at the very bottom of the Kompozer window to judge where you are located inside the current HTML hierarchy. You can also right or left click on individual tags in the status bar to jump to that location and see tag options.

Using Kompozer


When using the Kompozer interface there are generally several different ways of completing the same tasks. You can use your menus or the composition toolbar to create a new document. Or you can open existing HTML files that are already stored on your computer the same way.

After opening a file a new tab will appear and its contents will show up in the main display area. From the file menu you can also open web locations which will import web pages directly from a website into Kompozer.

Formatting Text With Kompozer


Kompozer offers numerous different options for formatting text inside your pages. First highlight the text that you want to format, or just select an insertion point. Then you can select the text mode that you want from the format toolbar. Here are a few different formatting styles that you can try.

Body Text

This is the default text mode, body text will be displayed with normal font and no additional spacing.

Paragraph

Use this to insert paragraph tags around a grouping of text, this includes margins at the top and bottom of the paragraph.

Headings

This will display a block of text as a title or a paragraph sub-title. Heading 1 is for a main page title, and additionally heading 2, and so on, can be used as sub-titles.

Address

This will produce a small sub-text usually used for copyright information, author details, or other small notes.

Preformat

This is useful if you are pasting text from another source. Lists, chunks of code, or anything in columns will retain their original text formatting and be displayed similarly.

Bulleted List

This will simply create a typical list with a bullet next to each item in the list.

Numbered List

Use this to produce a numbered list.

Definition Term And Description

You can use terms and definitions together, this will highlight the term and indent the definition.

Text Alignment

You can use these buttons to alight blocks of text. You might want to center a list or a title on a page, or use left and right alignments.

Text Colors And Fonts


To manipulate the look of your text further again select the text that you want to apply formatting to. Then look in the format menu at the top of your Kompozer window. From here you can change the font for that group of text, change the size of the text, or adjust the color.

You might even want to try bold, italic or underlined text. You can also change the background color of areas on your page, first click a blank space near that area. Then you can choose the background color block that lies underneath the text color block inside the format toolbar.

Using Tables


To insert a table into your page first you have to click on your page near where you want the table to appear. Then you can click on the table icon inside the composition toolbar and you will see a pop-up window allowing you to add the number of rows and columns you want.

You can also adjust table border widths and other properties. When working with tables a table properties box will also appear so you can adjust things further. This window will allow you to align the table within the page, resize rows and columns, or set a table background color.

Adding Images


You can insert several different image types into your pages, or create links to images. First click on the place that you want to insert your image, then click the image button inside your composition toolbar. After you select an image the image properties window will appear.

Here you can add alternative text or descriptions to your images. To save time you can even drag and drop images directly into your page. You can double click on an image after it is inserted to add more properties, here are some properties that you might want to add, but not all are listed.

Image Location

Type the file name and location or click choose file to search your files for an image to add.

Alternate Text

You can add text that will be displayed when the image is unavailable, this can be good for text based browsers or other reasons.

Image Size

If needed you can also leave the image as its actual size, or you can set a custom display size for your pictures.

Spacing

This option creates margins around your image so text does not hug your images.

Using Templates


If you want to create a larger website with multiple pages it is generally a very good idea to use a template, almost a necessity in fact. When you use a template your pages will all follow the same design, but they will all contain different content in certain areas.

Using the Kompozer interface it is fairly easy to create your own templates and use them for your pages. To create a template first look in the file menu and click new. Then select the options button and change it to blank template, then click create. Now you can build the default layout that you want on every page.

To create an editable region inside your template click on insert, templates, then click editable area. This is the area that you will be able to customize on individual pages.

To create a new page using your template just click on your file menu and click open again. Then select open a new document based on a template, select your file, then click create.

Page Properties


Look in your format menu for the page title and properties button and click on that. Here you can add page title information, author information, and a page description. When finished you can open the format menu again and click on page colors and background. You can choose to use the readers default color selection, or select your custom colors. If you want to you can even add a tiled background image.

Using Links


You can also add links into your pages that link to other pages on your site, or external websites that you think readers should visit. Links can consist of a blocks of text, images, or just the web address of the proposed link. To create a links just highlight the text or image where you want to create the link, then click the link or anchor button from the composition toolbar. After the popup dialog appears just add the address of the page that you want to link to. You can use anchor points to jump to different areas on the same page.

More Linux Applications
Kompozer Homepage
Download Kompozer