July 29, 2002-- Newsletter #191

By Joe Burns



Goodies to Go (tm)
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!

 

Archive Home Page.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date