Some Pretty Slick Web Design Features: Image Map, Web Page Editing, Graphic Design, and Creating Your Own Colors (Repost)

(First posted March 2006)

I know I should probably be using Nvu or just hand coding everything in HTML or using cascading style sheets.

But for those of us who still redesign our web sites on Saturday morning while listening to Car Talk and Wait Wait, Don't Tell Me, I wanted to talk about what I did for my site at www.getopenoffice.org. Since it worked out pretty well, to my not-that-artistic mind. At least, it's vaguely pleasant and not Five Bright Colors of the Same Shade. Click to see a bigger version if you like.

I was pretty happy with what I was able to do, how I was able to design the colors, and I'm stoked with the image map. It turned out in a far more normal, controlled way than I usually experience. So for all of you out there who are a little fuzzy on web design but do it anyway, here are some features I think you can use for some pretty decent results.

I'm not here to talk about how FAAAbulous the new design is, but to focus on the steps I used in OpenOffice.org to do it. It's also by no means a lesson on web design—I'm just showing what I was able to do in a morning (OK, a long morning) in OpenOffice.org, and hoping it helps other people.

Features include:

• Creating my own colors
• Cool drawing shapes for nav bar
• Image maps
• Reasonably well-behaved HTML editing in Web documents (HTML purists, just let me go with this ;> )

By the way: I'm sooooo sorry for the bright blue design at www.getopenoffice.org for the past few months. I got the templates from a free templates site and it just didn't work.

Getting the Design

I am in no way a Graphic Designer. So I just went to my friend Kristin Nelson's web site (designed by fabulous friend Takane), www.nelsonagency.com, to get ideas.  I decided there was no way I was going to learn JavaScript before I had to leave that afternoon, but I did like the colors—a deep maroon and a beige. So I stole that. ;>

Side story: Kristin started her  literary agency maybe four years ago, and she lives in Denver, not New York. She's made incredible progress, including selling the film rights to many of the books. If you've got some marketable fiction and you're looking for an agent, consider her.

So, armed with the ideas “maroon!” and “taupe!” and figuring I would just use the same simple top/side navigation style, I continued to the beginnings of implementation.

Creating the Colors

One of the wonderful things about OpenOffice.org is that you can create your own colors. So I chose Tools > Options > OpenOffice.org > Colors, and created my maroon and my taupe. The far right color, and the ones on the bottom, are various colors I created for the site.

I did various shades of maroon, a lighter one for a bit of shadow and contrast, and a few different taupes for the nav area, the text in the nav area (nearly black), and other taupes for shading and for the background color of the page.

To create your own colors:

1. Choose Tools > Options > OpenOffice.org > Colors. Click on the Edit button in the colors window. Click the image to see a bigger version if you like.

2. Then mess around in those windows with the various settings til you get what you want.

3. Then click OK, click Add, and name the new color.

Creating the Nav Graphic

I went into OpenOffice.org Draw and after some fiddling with colors and fonts, came up with the navigation graphic, including all the text along the left and top. It's in two separate chunks, for the top and the left side.

I used this beveled rectangle tool to draw the navigation shape at the top, and just used a couple graphics behind each other in different colors for the other shading.

I exported each of the two graphics just by selecting the components of each, choosing File > Export, and exporting to .gif. Other options of course are JPG, PNG, etc.

Creating the Web Page Master

I created a new web page (File > New > HTML Document). I inserted an eight-inch-wide table in the center (well, kind of ;> ) of the document to control where the graphics and text go. The table was two rows and three columns, no heading, with a left column of 2 inches, a middle spacer column of 1 inch, and then the rest. Click to see a bigger image of the setup window here if you like.

Then I merged the top row of cells, where the top nav graphic is going, to end up with something like this.

And I also removed the table borders.

Adding the Graphic to a Document and Additional Formatting

I just chose Insert > From File and added the top graphic in the top merged row, and the left graphic in the left cell. I right-clicked on each graphic and set it to Original Size since there was some wackiness with automatic size reduction.

I also right-clicked on each graphic and choose Anchor > As Character to get rid of extra space below them.

Some extra white space showed at the bottom of the nav bar because of the formatting of the apparently nonchangeable Table Contents paragraph style. However, this wasn't an issue when browsing the document.

I also set the background color of the cells to match the graphic in them; the spacer and right lower cells were set to white since they'll have text and I want a white background.

I made the page background color a lighter taupe. (I chose Format > Page and clicked the Background tab.)

And I set the page size nice and big so that there would be plenty of room for the graphics. Same window, Format > Page and choose the Page tab.

Doing the Image Map: Linking Portions of Each Graphic to the Pages on My Web Site

I right-clicked on the top nav bar graphic and chose Image Map.

In the Image Map window, I used the rectangle tool to draw a box around each piece of text on the graphic that I wanted linked, and entered the URL It's a little odd—you have to draw the box around the image in the window, so it's a little small but manageable.

Then I did the same for the left nav bar.

You end up with nothing happening to the graphic itself, but a bunch of code in the document with the tag MAP1, MAP2, etc. The code gives the coordinates of the links. That means of course that you don't change anything that would shift the graphic up or down or left or right, once you get this done.

The image map would have been too small to see in this window if I had used the full length one here for the editing.  I kind of cheated—I used a short version of the left nav graphic in the beginning, then created a much longer one in Draw and inserted that after the map was done. Since the only thing that changed between the short graphic and the long graphic was the bottom, where there are no links, this didn't affect the image map.

Tweaking

I had to tweak some stuff, of course, in the HTML. No biggie. My graphics seem to end up local sooner or later for no readily apparent reason. I use EvrSoft's 1stPage. I also tweaked a bit in Netscape's Composer since it seems that Web's graphics wrapping features, at least in the GUI, aren't all that great. (Of course, if I bothered to memorize a few more HTML commands, I wouldn't have needed Netscape at all.)

Pasting in the Content

Nothing shocking here. I pasted in the content from my old site, creating a new page with File > Save As.

I adjusted the right margin as I would in normal formatting. (Again, HTML purists, I know it's Wrong but it felt so right.... ;>  )

Posted the pages. Did some retweaking.

That's All.

Heck, I didn't even use the Web Wizard. (File > Wizards > Web Wizard.) That tool of course is more for quick “just get it on the web” work when you have a lot of existing content to slam up on the web.

So....who should be using these tools versus Nvu, DreamWeaver, handcoding, better overall extensible design, etc.--well, I'm not debating any of those issues. Just wanted to show you what was available, and let you know you might be surprised at how much cool stuff you can do without a huge headache.

---

---

Comments

[Kaj Kandler]

Greate (re)-post Solveig!

This might be the solution for the crowd of Frontpage lovers, who love the program for its simplicity. They need a new home, once they find out Frontpage is going to be discontinued.

http://blogs.pcworld.com/staffblog/archives/001460.html

K

[Solveig Haugland]

Hi Kaj,

Thanks, I'm glad it seems like a good solution.

That's an idea for an article -- maybe I'll take a look at FrontPage (I think I have a version that's not too ancient) and provide some alternatives, at least for the web design aspect if not the server stuff.

[SpecialMe]

In order to create a site that is usable with many pages that are both static and dynamic, it is appropriate to use Template designs in Dreamweaver. These will help facilitate the need to make site wide changes driven by the templates, without having to update each page indiviudally for any changes that are made.
You can see similar templates on httP://www.free-dreamweaver-templates.org.
The problem I am facing.. (I am sure it is a dreamweaver one, but wish to know if others have had the same problem and resolved it) is that when an MT URL code is placed in the page and a NEW page is created from that, because the NEW page is being created from the template, Dreamweaver rules change the code to one that is html comlient.

[SpecialMe]

In order to create a site that is usable with many pages that are both static and dynamic, it is appropriate to use Template designs in Dreamweaver. These will help facilitate the need to make site wide changes driven by the templates, without having to update each page indiviudally for any changes that are made.
You can see similar templates on httP://www.free-dreamweaver-templates.org.
The problem I am facing.. (I am sure it is a dreamweaver one, but wish to know if others have had the same problem and resolved it) is that when an MT URL code is placed in the page and a NEW page is created from that, because the NEW page is being created from the template, Dreamweaver rules change the code to one that is html comlient.

[PINKMANON - business card designer - concepteur cartes de visite]

Excellent post ! I'm subscribing to your feed so I can make sure I catch more

[:: noTouch :: travail à domicile :: gagner de l'argent ::]

good post and good blog !!

[Busby SEO Test]

thanks to those pretty cool advice

[website design]

I'm a huge fan of Open Office and I really like this blog. Clean and professional design makes this website eas yto use.

[web design Orange County]

Excellent post. It is really interesting. thank you for the posting. creating a web design is a very cool.

-faith-

[malaysian web design]

thanks for sharing~it is helpful for me~

[Miami Web Design]

Looks like it gets the job done for DIYers

[J-Cutie]

Nice tutorial. Thank for the tutorial.

[Auto Transport]

Great tips. We used a few to design our web site.

http://www.crowleyautotransport.com/

[website design New York City]

Beautiful! Thanks for the interesting post