Web Hosting Talk







View Full Version : Any good web designing tutorials?


baldyguy
07-23-2002, 01:43 PM
Also adding to my other post, can anyone provide me with some good web designing tutorials with dreamweaver?

I know I might get laughed at, but can anyone tell me what is the meaning of how alot of web designers who make Interfaces, and why they cut up and splice the images into tables?

Also where can I learn how splice images and integrate it into tables?

Thanks!

the-muse
07-23-2002, 02:03 PM
baldguy... the answer to your question is somewhat dependent on knowing how much you already know about design.

Slicing images into smaller components and placing those components within a container, the "table", is a way to ensure that the images load up faster in the browser. The concept is that many smaller images will load faster than one large image.

Designing in this way has advantages and disadvantages. The main advantage is that the overall design can often look much more pleasing to the eye when text and graphics can be integrated. When your text becomes a graphic, rather than text, it can benefit from certain design choices not otherwise available, such as "drop shadows", "embossing", etc.

One disadvantage to working this way is that the search engines, which look for "text cues" in order to index sites, will not find those cues in graphics. One way to diminish this limitation is to include descriptions of the site in the "IMG ALT" tags of the html source code. Without giving a complete tutorial here, which would take several pages to explain just this isolated topic, I will say that when images are included in a site, the html coding looks something like this: <img src="imagename.gif" alt="a description, or keywords about your site">

img is short for "image"
src is short for "source"
alt is short for "alternate"

If the designer types keywords about his site after the "alt" tag, the search engines will identify that text.

The search engines will also pick up on the site title, and the "meta tags" hidden in the source code (although some search engines do not use "meta tag" information in the indexing process).

This explanation has probably confused you more than clarified things. I found something at WHM that may be useful for you... it is a free graphic program that may have a nice tutorial in it for you. You can find it here: http://www.gimp.org/

Best of luck...

Magnet Eye
07-23-2002, 06:06 PM
There are tons of tutorials on graphics and web design at www.webmonkey.com

Also, If you have Photoshop you should have ImageReady also. ImageReady makes it fairly easy to slice images for use in your webpages.

-Matt

Lonny
07-23-2002, 06:09 PM
Go to Google.com

and search for:

'Dreamweaver tutorials'

Try Macromedia.com support web site.

And how about Sitepoint.com?

Good luck..

icanx
07-23-2002, 06:14 PM
An old site that has been around forever that includes decent tutorials is: http://www.htmlgoodies.com

Pretty good for beginners.

Informity
07-23-2002, 06:20 PM
for design: www.psworkshop.net

akashik
07-24-2002, 02:42 AM
Originally posted by baldyguy
I know I might get laughed at, but can anyone tell me what is the meaning of how alot of web designers who make Interfaces, and why they cut up and splice the images into tables?

It's done for a number of reasons, but mainly load time. A collection of images gives an illusion of a faster load time than one solid image, with them appearing one after the other as the download progresses.

Another reason is to reduce the image size itself. photos are better saved as jpgs due to their compression, while gifs are better for simple images with less color and shading. I won't bore you with the 'why' of it as there are tutorials about it all over the net.

Things such as page headers often use 'spliced' images as they're more often than not a mixed media collection. The have flash, jpg, gif and html text all collected within a html table. By cutting the image up you're able to make use of the best option for each section of the area you're working with.

No need to assume you'll be laughed at. I've seen graphic designers with years of experience in print make some of the worst websites known to man. They look great but weigh in at around 500-1000k for the index page, have shocking navigation and load as a solid single graphic with imagemaps.

One final reason to cut your image up is to make it stretch across different browser resolutions. If you table is set at 100% width, and you have an image to the top left and top right, with another image as the background the the table cell then it can feasibly work on browsers from 600pix wide to 1600pix and more.

Three sites I usuall recommend are:
http://www.internet.com
http://www.about.com
http://www.webmonkey.com

All are *huge* and cover a wealth of information covering almost all aspects of the internet.

Greg Moore