Quick and Easy Sites with FOSS

In this short guide, you can learn how to create an easy yet professional-looking fixed-width website with free open-source software. Before you begin, ensure that you have the Gimp and Inkscape installed, in addition to some form of text or code editor (any variety will do).

This guide provides a basic guideline on creating a site simply and easily using few tools. Feel free to try different techniques, see how it works, and leave some feedback in the comments. Feel free to comment on how to improve this article!

Initial Design

First, open up Inkscape and begin visualizing what you want your design to look like. If you have not used Inkscape before, check out this simple Inkscape tutorial.

Things to keep in mind:

• Your design should include a header, menu bar, mid-image portion, and footer portion
• The menu bar portion can have image-mapped links, or you can overlay text links on a background image
• The middle image portion should be vertically tileable for a fixed-width variable-height site.
• The footer can include image-based text, or text can be overlayed on a background image

After you visualize your initial design in Inkscape, you should have something similar to the image below. In this tutorial, we will be creating a site with a header, an image-mapped menubar, a tiled text background, and a footer image.

Your initial Inkscape design should look something like this

Exporting the Design

After you have created your design in Inkscape, you must export it to a raster format so it can be parsed by web browsers. The resulting raster image also needs to be separated into different portions that we will reference in our CSS. The fastest and easiest way to accomplish this is by creating a “chopper” layer above the layer(s) your design is in. Go to [Layer –> Add Layer (select “Above Current”)] and put in whatever name you wish.

In this layer, you will now begin creating squares to mask off various portions of your design. Start out by dragging a square across the header portion of your design. Zoom in and make sure that the edges of your mask are aligned with the edges of your design. After you create the first mask, copy the mask and paste it below. This time, center the block on your design and only adjust the height, not the width. Continue this process until you mask each portion of your site: header, menu bar, middle tile, and footer. I find it easiest to color-code these sections and make them semi-opaque, as shown below.

Your completed theme with different portions in different translucent colors should look something like this

Finished? Take a break and check out some of the notes below.

Notes:

• The footer in this design will have copyright info on the image itself, therefore search engines and visitors printing out your site will not have footer information. You can easily add a text-based footer to your design, but this won’t be covered in this tutorial (yet)
• Many other items, such as the menubar imagemap, can be substituted with a text-based menu with an image background behind it. This is usually a bit more flexible, and nicer to search engines.

Ready to move on? If you know some CSS, you can probably figure out this part yourself. You can create

About Ethan Zonca

Ethan is a computer engineer and open source hardware/software developer from Michigan. He enjoys AVR and linux development, photography, mountain biking, and drinking significant amounts of home-roasted coffee. Find out more at ethanzonca.com.