Personal Web Space - Tips
Web site graphics tips
Learn some tricks and insider information about creating eye catching, high quality, fast loading images for the web.
Image file formats for web pages.
For the most part there are only 2 file formats that you will work with while creating web page graphics. They are .gif and .jpg files. You'll basically want to use JPG files for photographs and other images that have thousands/millions of color and detailed textures. GIF files are better to be used with images that do not have many colors or detailed textures. GIF files generally can be made as smaller file sizes because you can limit the number of colors used.
Creating images without backgrounds (transparent areas).
GIF files support transparency, and JPG's do not. Transparent images are good to use if you make a button and want to put it on top of a textured page background but do not want to have a solid background behind the button. In your graphics program before you go to save the image there should be a feature to select a color in the image to be transparent. Look at the help file of your program for more support.
Image dimensions and file sizes.
Another way to help keep html page file sizes down is to cut an image up into smaller pieces. For instance the red swoosh at the top of this page is in 3 pieces. Smaller images help in laying a page out in html as well as in load time because your computer can download more then one thing at a time instead of just one large file the page appears faster.
Animations
Currently animations on the web are done in 2 different ways. The most powerful and eye catching way is with Macromedia Flash swf format. The other way, that has been around for a long time, is animated GIF files. They are easier to create. Some graphic editors now come with a GIF animation feature in the program, you can also easily download one from www.download.com. GIF animations are like any other animation, a set of frames (different images) that replace the one before it to create a moving effect of some sort. They are compressed and combined into one file, with the extention of .gif.
For more information about GIF and Flash animations, look into these links:
How to make your own GIF:
http://www.gifworks.com/
http://members.aol.com/royalef/gifmake.htm
http://www.home.eznet.net/~stevemd/animinst.html
Flash animation:
http://flashkit.com/tutorials/index.shtml
HTML and page layout tips
What is HTML
HTML stands for (Hyper Text Markup Language). It is a markup language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web. It is a simple language to learn, because most of the commands are written as whole words. For more questions and answers about HTML click here. Go to the Resources page, to download some programs that help create HTML for you.
Picture links
To make a graphic a link to go to another page in HTML just put the HREF tag before the IMG tag and be sure to close the HREF tag at the end of the IMG tag. By default image links have a border around them, to get rid of that, add an attribute to the IMG tag that says BORDER="0" and the border will disappear.
Tables
Use tables in HTML to help in aligning graphics, and text. Tables are like charts, to help organize things in a grid. Just about all web pages. use at least one table. They aid in lining images across the screen from left to right.
Clear Images
Another tip for aligning objects on a web page is to use a picture shim, or a clear image. What they are is a 1 pixel by 1 pixel GIF file, that has the color set to be transparent. So it is a clear image, that can be used to give space between a image and text or any two objects in your web page. Just change the dimensions of the image to be the right distance you are looking for. They are very helpful.
Relative and Absolute Image and Link Paths
There are two ways to insert images and links on a web page. and to get them to work. One way is to use an Absolute path, that is to use the full web address as the path to your other page or an image. It would look something like this:
<img src="http://home.dejazzd.com/username/images/logo.gif">
The other way is to just use a Relative Path, which would look like this:
<img src="/images/logo.gif">
Relative Paths are shorter and faster to use, but at times more difficult to use then Absolute Paths. Here are some of the Relative Path shortcuts, ../foldername/filename means to go up one folder, then go into a folder named foldername. ../../ means go up two folders and open the default file (usually index.html)
FTP and other file tips for web servers
What is FTP
FTP stands for File Transfer Protocol, and it is the way one moves files directly from one computer to another. You will be moving files you create on your computer to a web server so you can share them with other people.
Connecting to the FTP server
When connecting to the D&E Jazzd FTP server make sure to enter your user name like this username.dejazzd.com don't log in anonymously. Enter your password as usual then.
Understanding web addresses and how they relate to FTP
A web address can tell you a lot about how the site was created and how it works. The address for this page is a good example: http://www.decommunications.com/support/products/internet/personal-web-space/tips.php
decommunications.com is the domain name for the site. support is a folder on the root level of the web server for the domain decommunications.com. products is a folder inside the folder named support. Any word that has a slash on both sides of it is a folder on the web server.
File names and writing file names that will be on the internet
For support on file names on web servers, go to the web hosting technical support section. That section also covers how to get files to automatically load when you go directly to a folder name like, http://home.dejazzd.com/username/
Site Structure
It is wise to set up the folders and files the same way on your local computer as you will have them on the web server. Have a folder for the whole site, in that folder have other folders possibly named images, family, and any other section on your site should have its own folder name. Having the web server structured like the version of the site on your computer will save you many headaches later.
Why images or links aren't working for other people but they are for you
When you create a web page on your local machine, it is always smart to test it while it's still on your computer, when it's on the internet, and then to either get a friend to check it for you or get on another computer and check it. Sometimes what happens is an HTML program will write image paths and link paths that may look something like this C:\\My Documents\my first Web site\images\family.jpg When you upload your web page, it will appear to work, because the browser can view local files at the same time it views files on the server. But when someone else on a different computer goes to your page on the internet that tries to load that file on the C: drive of there computer, the file won't be found, cause its sitting on your computer. To fix that check all the a href and img src tags on the page to make sure they don't have C:\\ or any other local drive letter in them.
