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!
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.
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.
Finished? Take a break and check out some of the notes below.
- 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
tags to hold each image, although an imagemapped menu bar must be embedded in the page with an tag. You can look at the CSS source for ethanzonca.com to get an idea of what you need to do.
Looks good. Can’t wait for part two. Actually I can, cause I don’t have any time, but that’s beside the point.
Actually, I just had design a site for an engineering project and it would have been helpful if the rest of this were here.
I’ll probably finish it up over break actually, depending on how distren is going.