While I love blogging, there are times when I just want to whip together a simple webpage straight out of HTML. Of course, there is a lot of basic HTML coding that you really don’t want to have to deal with over and over, such as creating tables, inserting images, creating forms and other common webpage components.
Sometimes it’s easier to make use of free web design software that can do all of that coding for you. In particular, I’d like to cover the free web authoring application called KompoZer. I like Kompozer because it’s a very small, lightweight application. While many people like the popular app Dreamweaver, it’s not free. And CoffeeCup is popular software too, but it’s a bit of a larger application than KompoZer. In the case of KompoZer, you could copy the files onto your memory stick and take it anywhere you want to go. Want to quickly whip up an HTML page, just launch the KomoZer executable and you’re good to go!
Free Web Design Software With Everything You Need
The first thing you’ll notice about KompoZer is that the user interface is very straightforward and easy to use. Everything is laid out on the main page, and what isn’t on the main page is well organized within the sub-menus for each object – like tables, forms and links. The entry screen is laid out into a site explorer pane and a composer pane, so your entire web design project stays well organized and within reach on one screen.
Of course, KompoZer wouldn’t be useful if it wasn’t up to Web 2.0 standards, but with the CSS Stylesheets wizard, you can create the style rules for your headers, paragraphs, text and other elements of your page without any knowledge of CSS scripting (although a bit of knowledge would help). Just select the element type you want to configure and create the rules on the various tabs – text, background, borders, etc.
For example, here I’m configuring all of my H3 headers to use the Arial font and medium font size. As you can see, the style configurations that you can make are detailed, and you don’t need to know a single lick of CSS code.
If you’re writing a webpage that’s set up like a typical blog entry, where you have a header image with text wrapped around it on the right, then you’ll need an easy way to import that image into a local directory that your webpage can refer to, as well as a simple way to format and insert the image with that formatting. Kompozer makes this process about as easy as it could possibly be with a single image configuration section.
When you browse to and select an image on your computer that you want to use in your webpage, it places a picture of that image in a local “Pictures” directory within the local folder that you’re working in (if you select to make the URL relative to page location). The screen has a field for alternative text, and even any popup “tooltip” that you’d like to include.
My favorite part of the image insertion process in Kompozer is the fact that I don’t have top open up the picture in an image editor in order to resize the way I would like. Kompozer has a built in area (much like Wordpress) where you can simply set the width and height – and bast of all a “Constrain” option so that your image doesn’t get warped.
The table wizard is insanely simple. While most web designers today focus on using CSS to format pages, tables still occasionally have a place when you want to quickly create in-page formatting. Once you’ve chosen the table type you want, configuring the table is a breeze on the table properties screen.
As a guy who has programmed some pretty complicated tables, I’m impressed by the ease with which you can just toss together a table with this software. Configure borders, alignment and other formatting choices in the tool and voila – your table is done! No complicated HTML code, and no trying to keep track of table, row and cell tags!
Forms are pretty simple to insert as well – but you’ll need to have an “action URL” that you can submit the form information to for processing. A form configuration wizard lets you choose from standard form elements – text fields, buttons, etc – in order to piece together your form on the page.
Once I finished creating my simple test page, the moment of truth for me was checking the code in the background. Doing so is as easy as selecting the “source” tab at the bottom of the screen. One of the reasons I’ve always avoided using free (or paid) web design software is that I would always have to deal with a terrible mess of code on the back end whenever I wanted to “tweak” anything. If you’ve ever seen the junk that Microsoft Word creates when you “save as HTML” then you know what I mean. However, clicking on “source” revealed the following code.
The first thing I noticed is how wonderfully clean and well formatted the code is. Only the basic scripting is included that will accomplish the configuration choices you selected for each object. As you can see, there’s no confusing HTML with the img code or with the table – it’s what you’d expect if someone had gone in and typed it up themselves. The formatting is also laid out in a way that’s easy to read and simple to follow.
Want to quickly see what your new web page looks like? Just click the “Preview” button at the bottom of the page and you get a preview of what it will look like in the web browser. Here is my page with an image, simple headers and an invisible table that I used to format and align text, seemingly in the middle of empty space. The preview looked exactly as I laid out on the page in the design view, no alteration of spacing or weird indents – the sort of things I became accustomed to, and frustrated with, in the old versions of FrontPage (a nightmare web editor!)
All in all, I think I’ve fallen in love with Kompozer. There are times when I put together very fast and simple web pages for new domains that I start up, and this tool allows the speed and flexibility to create some well designed websites utilizing CSS in a fraction of the time it would take to put together the code by hand.
Do you use any free web design software? Have you ever tried Kompozer? Share your insight in the comments section below.
Follow MakeUseOf on Twitter too. Includes cool extras.
Similar MakeUseOf Articles
- The Best Freeware To Do An Easy Wordpress Auto Install (22 comments)
- iWeb – Build A Quick, Easy & Beautiful Website [Mac only] (35 comments)
- 2 Websites With The Coolest Free Web Page Templates (13 comments)
- Top 7 Easy and Free Web Hosting Services (162 comments)
- Top 4 Web Tools to Create Free Websites Instantly (32 comments)
- Top 10 Professional Sample Code Websites For Programmers (35 comments)
- Preview a Web Page in Multiple Browsers with BrowserShots (7 comments)
- How To Install Firebug on IE, Safari, Chrome & Opera (38 comments)
- How To Create An RSS Feed For Your Site From Scratch (7 comments)
- Flavorsme – Create Your Own Free Personalized Webpage (19 comments)
