On our website design page, we recently added a new demo website to the portfolio. It is an example website showcasing a fictitious restaurant.
It was conceived to demonstrate a creative way to create a website using only a text editor and The GIMP, both freely available. It use image mapping and HTML/CSS. There are many pages that can be accessed by clicking on the page titles found throughout the bento box image. The text for the page appears in the white space to the right of the image.
The Bento Box Demo Website
You can get to the website by clicking on the image above. Have some fun playing around with it and follow on afterward to learn how it was done.
How was it created?
The Bento Box Demo Website was first created by opening an image of a bento box in GIMP. The image was found online by doing a google search. The GIMP project file can be downloaded here.
The first step was to create labels for the various pages. These were created using the text tool in GIMP and applying the text to individual layers. Then, by clicking on “Filters>Web>Image Map” you can pull up the image map menu that lets you select various regions of the image to use as hyperlinks. You can choose circle, rectangle, or polygon to select the regions, then just click again to pull up a dialog box that allows you to assign the URL. When all regions have been selected, click on the save button to save the .map file. This file can be renamed .html if you wish as that is exactly what it is.
From there, the map section is copied into the HTML files of the various pages. To see how the rest of the code was constructed, have a look at the page source. In firefox, you can easily do this by right-clicking on the page and selecting “View Page Source”. All of the pages are valid per the W3C validator.
Please note that this site is best viewed with 1280 resolution or above. Anything less than that will break the text box on the right.
Enjoy and feel free to leave comments!
