Goodies to Go ™
July 29, 2002–Newsletter #191
This newsletter is part of the internet.com network.
http://www.internet.com
Goodies Thoughts – Organizing Your Photographs
Now that you have mastered the art of
photography and created those award-winning images of friends and family, what’s
the best way to display those wonderful images?
There are several techniques that you
could use to display your images on the web. The first, and probably simplest
way, is to use some image management software. Just recently, some of the most
popular web design packages like FrontPage 2002 have begun to add different
image management features. By using a built-in wizard or other interface, the
design package allows you to select images to be displayed, determine a style
for the display and even add captions to the images. In some cases, they will
even automatically make thumbnail size versions of your full-sized images. If
you don’t need a lot of flexibility and customization, these features can be a
very quick and dirty way to get your photographs on the web in a hurry.
Another simple method of display is
the good old HTML table. This, of course, requires a bit more effort on your
part. There are many different ways that you can set up a table for display.
You could do the simple two column
method with a thumbnail image in one column and then a caption in the other
column. If you are going to use this method you might want to consider
alternating your thumbnails and captions on each row so that your page doesn’t
look too static. You could also apply the same technique to four or six column
table, alternating by row. However you choose to lay it out, be sure to make it
obvious which caption goes with which image.
Another technique that you can try is
the collage. If you remember from art class, a collage is just a collection of
images that are all put together into one finished piece. You can apply the same
kind of technique to the web to make your layout even more unusual.
In order to create a collage you will
obviously need a decent piece of image manipulation software since you will be
piecing several images together into one big image. Once you have created a
composite image that you like from several of your photographs, the next step
will be to optimize it. Since you are using one big image instead of several
small images with this technique, you will want to be sure that it doesn’t take
forever to download and display your collage. If it does take too long, your
viewers might get impatient and just leave. So, always be sure to save your
collage in a fairly low resolution.
The last step in this technique then
is to create hotspots on your collage that link to the individual images. Even
though your collage may be a masterpiece in design, you still want your viewers
to be able to view the individual images and possibly download or print them. If
you don’t know how to make hotspots on an image you make want to take a look at
the answer to the Quiz Goodies question several weeks ago:
http://www.htmlgoodies.com/letters/185.html.
Another technique you could try is a
slide show. Instead of viewing all of the images at once, you only display one
image at a time with the appropriate caption. This can be done with the help of
a little JavaScript. Personally, I’m not a big fan of the slide show because I
like to be able to compare the images side by side but that’s just me. This
technique does have one very big advantage in that it saves a ton of space. If
you are interested in learning how to use and apply the slide show technique
check out:
http://www.htmlgoodies.com/beyond/slideshow.html.
You can also do a variation of the
slide show idea. Instead of just using a simple "Previous" and "Next" button
scenario, you could have a whole list of buttons or links that describe the
different images that you have. Then when the visitor hovers over a button or
link, the appropriate image is displayed. This takes up a bit more room than the
slide show because you will have multiple buttons or links to display but it is
an interesting technique. It allows the viewer to quickly pop back and forth
between images that they like. To learn how to use and apply this technique go
to:
http://www.htmlgoodies.com/beyond/dualflip.html.
As you can see there are many
interesting and different techniques that you could apply. It all depends on how
much time and energy you want to put into it. I’m sure there are also many more
ideas and techniques that I haven’t covered here, so keep your eyes open and be
creative!
Thanks for reading!
Quiz Goodies
How do you define the
top, bottom, right and left margins in a paragraph?
Read answer below.
Q & A Goodies
Questions are taken from
submissions to our Community Mentors. You can ask a Mentor a question by going
to
http://www.htmlgoodies.com/mentors/.
Q. When you go to
htmlgoodies.com and put the mouse over the link, the link goes bold and white.
How do I make my site so that every link goes bold and white?
A. The code used
in the html goodies pages is the following:
<STYLE TYPE="text/css">
a.nav:hover { font-weight: bold}
</STYLE>
I would suggest you reading the tutorial located here:
http://www.htmlgoodies.com/beyond/rollover.html. This will give you a better
understanding of CSS.
*** This question was submitted to our Mentor Community. The answer was provided
by Aida Guzman, one of our Web Design Mentors.
Q. Just a quick,
simple and perhaps silly question: Will I be able to create and run ASP pages
from a Mac platform?
A. Well, the
answer to your question is yes and no. You most certainly can write your ASP on
your Mac in whatever tool you like. Adobe’s Go Live and Macromedia’s Dreamweaver
will both allow you to view and edit the HTML source code of the pages that you
design. You can write your ASP code there.
You won’t be able to run your ASP locally on your Mac, though. ASP is a
Microsoft product designed to only run on a Windows platform. So, in order to
test the ASP code that you write you will need to upload it to a server that
supports ASP. Once uploaded you can view and test the page from that server,
make adjustments to the page on your Mac and upload the page again.
There is a third-party ASP product that allows you to run ASP on non-Windows
platforms like Unix and Linux, however, I don’t believe it supports the Mac
platform. If you want to check it out go to
http://www.chilisoft.com.
Q. I’m currently
working on Internet project, which would be better if I could use my database
through Java Script. I have not been able to find out how to do it. It is no
problem using vbscript. But the problem is cross-browser compatibility.
A. Unfortunately
JavaScript cannot read from or write to files, directories, or databases. To get
around the functionality problem between browser versions/types, you would have
to use CGI with PERL, PHP or some other server side language. I use CGI/PERL at
work to read databases and present data to users on web pages, it works very
well. I suggest you do some research and decide on what is best for you to use
as there are a number of options available.
*** This question was submitted to our Mentor Community. The answer was provided
by C.L. Smith, one of our JavaScript Mentors.
News Goodies
Any ideas on how to get rid of SPAM?
Click here to read the article
Do you feel your free speech being
threatened? Well, the ACLU thinks it is being threatened by certain kinds of
content blocking software.
Click here to read the article
3-D on the web … will it ever come
true?
Click here to read the article
Quiz Answer
Setting the margins is quite easy.
You have the option of setting margins within many different tags like <BODY>,
<P> and <UL>. Here is an example of how to define a top and bottom margin in a
<P> tag:
<P STYLE="margin-top: 2;
margin-bottom: 2">Set Margin</P>
In addition to "margin-top" and
"margin-bottom" there is also "margin-left" and "margin-right" for the left and
right margins. The numbers that you assign to the margins are measured in
points. In the example above, the margins are 2 points. You can also define
margins as a percentage of the parent element but you will probably never need
to use percentages.
Margins can also be defined as part
of a Cascading Style Sheet. Here is an example of how to set the right and left
margins of the BODY element in a CSS:
BODY { margin-right: 4pt;
margin-left: 4pt }
And Remember This . . .
Did you know that on this day in
1957, President Dwight D. Eisenhower signed the National Aeronautics and Space
Act? This act created the NASA program which took the United States from being
earth-bound to landing on the moon in less than 12 years. NASA is still reaching
for the stars to this day.
Thanks for reading Goodies to Go!
