169 lines
8.5 KiB
HTML
169 lines
8.5 KiB
HTML
<!--startcut ==========================================================-->
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
|
|
<HTML>
|
|
<HEAD>
|
|
<title>Web Page Design under Linux LG #39</title>
|
|
</HEAD>
|
|
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#0000AF"
|
|
ALINK="#FF0000">
|
|
<!--endcut ============================================================-->
|
|
|
|
<H4>
|
|
"Linux Gazette...<I>making Linux just a little more fun!</I>"
|
|
</H4>
|
|
|
|
<P> <HR> <P>
|
|
<!--===================================================================-->
|
|
|
|
<center>
|
|
<H1><font color="maroon">Web Page Design under Linux</font></H1>
|
|
<H4>By <a href="mailto:matelgar@NMSU.Edu">Matus Telgarsky </a></H4>
|
|
</center>
|
|
<P> <HR> <P>
|
|
|
|
The "web" started out as a small project in which data was to be easily
|
|
accessed by different people. In modern times, the web has filled the
|
|
role of a worldwide storehouse of data and communication. Most companies
|
|
have a location with which they may now be accessed on the internet. Everybody
|
|
and anybody has a web page nowadays. A good web page can
|
|
captivate the readers and relay information easily. Remember; there
|
|
are 2,000,000 other web pages discussing a topic identical to yours; but you
|
|
want to attract people with a well laid out web page. If done right, you
|
|
can even get people who do not know you interested about you. This article
|
|
will outline how to create an attractive webpage under the best of OSes, Linux.
|
|
<P>
|
|
<H4>Introduction to Web Page Design</H4>
|
|
<P>
|
|
Building an informational and interesting web page can actually be difficult.
|
|
First off, a web page must be aesthetically pleasing. It sounds kind
|
|
of funny, but that is the plain truth. People will enjoy what they are
|
|
reading if what they read is well laid out. Also, a web page cannot suck
|
|
up too much bandwidth. You want to appeal to many people; not just those who
|
|
have an OC3 to their house. Sometimes it may be nice to offer a higher and
|
|
a lower bandwidth version of your page. If someone looking for information
|
|
comes to your page and has to wait a long time for it to come in, they will
|
|
leave. Also, eyecandy can be bad. Two thousand little
|
|
things moving on a screen and sharp bright colors will distract and more
|
|
importantly annoy the reader. I know that if <I>I</I> go to a page which
|
|
annoys me or is too slow, I will go to the next that I found! Lastly, be
|
|
expedient and terse. Modern HTML provides many splendid ways to provide data
|
|
in a small clean manner. For example, tables look really nice in newer
|
|
versions (see www.gnome.org for a nice example). Unordered and ordered lists
|
|
are an easy and effective way to lay out info. Well those are the simple
|
|
basics; now let's get to
|
|
work.
|
|
<P>
|
|
<H4>Editing the HTML</H4>
|
|
<P>
|
|
A true web page is made by hand. If you wrote a cgi script which cranks out
|
|
html, it was all done by hand (and if a computer did it automatically, it was
|
|
most likely incredibly inefficient). The html should be indented and
|
|
spaced for clarity. Important however is to have a program with which to
|
|
edit HTML, and linux offers many.
|
|
<P>
|
|
A editor for html is vim. The newer versions automatically detect what
|
|
type of file you are editing and will load in key words accordingly. Vim will
|
|
automatically color code certain words, and with different colors, alert you
|
|
to some mistakes, etc. Vim can be attained from www.vim.org, and some neat
|
|
mods for it can be received from ftp.mandrake.net. Another editor is
|
|
Xemacs. Xjed also does the job. Both can color code and do all the other
|
|
nice tricks, all in an intuitive and attractive X interface.
|
|
<P>
|
|
HTML editors may seem a superficial thing, however they really help in
|
|
reading code, understanding errors and building web pages quickly, efficiently,
|
|
and cleanly.
|
|
<P>
|
|
<H4>Graphics</H4>
|
|
<P>
|
|
A web page needs graphics. I don't mean gaudy backgrounds and huge logos;
|
|
I mean images which mesh with the text and other aspects of the web page
|
|
seamlessly. Once again, linux offers many ways to create,
|
|
edit, and view graphics.
|
|
<P>
|
|
Simple graphical elements may made with xpaint and played around with and
|
|
viewed with xv. For the real stuff however, one needs the GIMP (if you don't
|
|
have it, run to www.gimp.org by all costs!). For those who are unfamiliar
|
|
with the GIMP, it is the free photoshop for Linux. Most photoshop users will
|
|
agree that this free software app is easily better than photoshop. And it
|
|
runs on Linux. In any case, with the GIMP, logos, transparent images,
|
|
animated gifs, and a million other things can be made. With the GIMP, a
|
|
background that looked too caustic can be modified to be perfect. An image
|
|
that just doesn't seem to fit can have the edges faded into transparency
|
|
and other neat tricks. The GIMP is the comprehensive tool with which to
|
|
create attractive web page graphics. For some creative
|
|
ideas of what you can do with
|
|
the GIMP, refer to www.gimp.org, contest.gimp.org, and to some older linux
|
|
journal articles.
|
|
<P>
|
|
Graphics must be made to mesh seemlessly with the text and other information
|
|
in a web page. With the GIMP and other tools, professional quality graphics
|
|
can be made quickly and easily. Remember; people will stay at that
|
|
pretty homepage, and if you create nice graphics that go well with the rest
|
|
of the page, than you have a winner.
|
|
<P>
|
|
<H4>Miscellania</H4>
|
|
<P>
|
|
Other areas of multimedia are also common on the web. Animations can be
|
|
made with the GIMP, and viewed with xanim. The use of midi seems to be
|
|
dying down and so really doesn't seem important. It bugs a lot of people,
|
|
anyway.
|
|
<P>
|
|
A note on backgrounds. Don't make backgrounds that hurt peoples eyes, are
|
|
2 meg jpegs, or just mess things up in general. Sometimes good backgrounds
|
|
can be a very simple pattern (slashdot.org, just plain white). Backgrounds
|
|
should be interesting, but should not render the text unreadable. Newer
|
|
versions of HTML can make tables look very pretty; one approach taken is to
|
|
have the text in a table on a background (www.gnome.org). Remember; if
|
|
people can't read the page, they'll leave! One of the reasons why
|
|
slashdot.org is so popular is because it is very beautifully and easily
|
|
laid out (kudos go to Rob). A rule of thumb is to have a background which
|
|
is just one color or an image without much color variation. One idea would
|
|
be to emboss what you wanted to use as a background and then play with the
|
|
color balance to give it the color you want. But this isn't absolute; don't
|
|
get me wrong, you can break this rule, it is just that this is a rather safe
|
|
approach if nothing else seems to work. Backgrounds
|
|
are actually an extremely tough issue
|
|
in web page design.
|
|
<P>
|
|
As far as browsers go, there are many possibilities. Netscape/Mozilla is
|
|
pretty much the staple now, especially since it is free and source code is
|
|
distributed (cheers). KDE also has a pretty nice one. Many are being
|
|
developed for GTK/GNOME, and can be looked up at www.gnome.org. Even though
|
|
they are "in development," don't be scared to use them; they will definitely
|
|
make up their shortcomings by being twenty times faster than netscape.
|
|
<P>
|
|
Experiment! It's amazing how many ways there are to create informational
|
|
and well outlined web pages! A few examples of good web pages are
|
|
www.gnome.org, www.gimp.org, slashdot.org. Notice
|
|
that in all of these there are no readability problems, no nuisances on the
|
|
screen, terseness, etc. If you notice an HTML trick you like, check out
|
|
the source code and note down the page (bookmark it).
|
|
<P>
|
|
<H4>The End.</H4>
|
|
<P>
|
|
So now you are ready to make neat wepages fast, right? Right. Always keep the
|
|
basic rules in your head. Remember that you want people coming to your
|
|
page. Necessary grpahics and text editors are easily and freely available
|
|
for linux, and browsers to view your products with shouldn't be a problem.
|
|
Above all else, have fun, make a web page you like, and ... use Linux =).
|
|
|
|
<!--===================================================================-->
|
|
<P> <hr> <P>
|
|
<center><H5>Copyright © 1999, Matus Telgarsky <BR>
|
|
Published in Issue 39 of <i>Linux Gazette</i>, April 1999</H5></center>
|
|
|
|
<!--===================================================================-->
|
|
<P> <hr> <P>
|
|
<A HREF="./index.html"><IMG ALIGN=BOTTOM SRC="../gx/indexnew.gif"
|
|
ALT="[ TABLE OF CONTENTS ]"></A>
|
|
<A HREF="../index.html"><IMG ALIGN=BOTTOM SRC="../gx/homenew.gif"
|
|
ALT="[ FRONT PAGE ]"></A>
|
|
<A HREF="./rogers.html"><IMG SRC="../gx/back2.gif"
|
|
ALT=" Back "></A>
|
|
<A HREF="./stein.html"><IMG SRC="../gx/fwd.gif" ALT=" Next "></A>
|
|
<P> <hr> <P>
|
|
<!--startcut ==========================================================-->
|
|
</BODY>
|
|
</HTML>
|
|
<!--endcut ============================================================-->
|