|
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 becuase
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 webpages use atleast 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 webpage. 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 webpage
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 Protocal, 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.dejazzd.com/tech_support/web_hosting/building/tips.php
dejazzd.com is the domain name for the site. tech_support
is a folder on the root level of the webserver for the domain
dejazzd.com. web_hosting is a folder inside the folder
named tech_support, and building is a folder inside
the folder named web_hosting. 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 website\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.
|