New Section: Support & Tips
This is a new section we created especially for all our visitors that
are new to the www.
Many of you, indeed, ask us how to save our graphics, how to use them
on their sites, etc.
Here you will find the answers to all these questions. And if you still
have some doubts you can always contact us with your questions at this
e-mail address:
How
to save our graphics
How
to use our graphics on your home-page UPDATED
Users' section: is it for free? Yes!
How
to customize our blank buttons
How
to upload them
How
to make graphics like ours...
How
to create a link to 4YEO
A
few more tips
Change
image On-Mouse over link
Meta-tags
How
to Remove the Underline in Links
Check back soon for our GRAPHIC TUTORIALS! :)))
How
to save our graphics:
This is the first step to be able to use our graphics: when you see
something that you like, point your mouse over it and right-click the
item (MAC users: click and hold). A menu comes out, and you have to
choose "Save image as..." (or "Save background as..."
in case of a background). When you click on it, a window pops out where
you have the chance to choose the folder on your computer where you
want the image to be stored, and also the chance to change name of the
image itself. You now have on your computer the image taken from the
web-site you're visiting (4YEO, hopefully!). Note that ALL our graphics
are optimized in order to be very good-looking ; ) but especially very,
very light in weight!
How
to use our graphics on your home-page:
Once you saved the image on your computer, you can use it on your page
to create something particular. Open the program you usually use to
edit/make your web page and insert the image where you want. Some of
these programs will automatically write all the necessary information
about the image, some others require that you do it. Here's how to:
the tag to insert an image is this:
<IMG SRC="?.GIF" HEIGHT="?" WIDTH="?"
BORDER="?" ALT="?">
Img Src (image source) is the command that fetches the image on your
computer (and on your server). Be sure to give the exact path of the
image (i.e., if you store your images in a specified folder - images,
for example - you will have to write IMG SRC="IMAGES/?.GIF").
Naturally, you have to write the name of the image where you see a ?,
and also, if the image is a JPG, change the extension after the dot.
Heigth and Width are the information that you should always write in
order to shorten downloading time for your visitors: in this way their
browsers already know how big the image is.
Border is the colored border that you might decide to have around the
image. It is always better to put a 0 (zero) value unless you are using
a photograph. Borders are not very nice around icons and other similar
images, believe me!
Finally, ALT (alternative text) gives you the chance to write something,
a word or a sentence, "underneath" the image. This might be
very helpful if one of your visitors decides not to load images (so
he will instead "read" what the image is about), but also
for all the other users, who can read what you wrote while they are
waiting for the image to load. For example, if the image you have on
your page is a smiling face, you can write "smile!". This
word will also show up when you pass your mouse over it.
Try here:
Please, note that our images already are optmized to be very good-looking
and also very very light in weight: in other words, you do not need
to re-edit them in any way! The result would be ruining our graphics,
and having a not-so-fine image on your site...
Ok, now you are ready to use our graphics to create a unique web-page!
Have fun!!!
NEW: how to insert our backgrounds on your pages:
in the BODY tag insert this
(this is an example)
<body bgcolor="#000000" text="#FFFFFF" background="IMG/BG.GIF">
this tag refers to the page your are seeing just now.
background="IMG/BG.GIF"
calls an image that will appear in your background repeated.
so you have to write background="x.gif"
where x stands for the exact url of the image you want.
be sure the background image is stored on yor computer and not linked
directly from another site/server, as that would infringe copyright
and steal bandwidth!
We hope that helps!
Users'
Section: is it for free?
Some of you still ask us how to be part of our Users' Section. It is
very easy: what we call Users' Section is the part of 4YEO devoted only
to the requests we get through e-mails or on our guestbook from our
visitors, like you. Unfortunately we get so many requests, that only
a few can actually be satisfied, but for this reason we choose the most
popular requests, or the most original. In this way we are sure that
many, many people will enjoy the creations. So, are you looking for
some really special graphics? Just let us know! Write directly at
and then check back often!
Please, keep in mind that this is a free service, so we ask you in exchange
to link back to our site - and we will not consider requests with an
invalid e-mail address. One last thing, before asking for something,
check the site: sometimes people ask for items that are already here!
ps: requests that are made by people who do not know the basics
of politeness will be ignored. remember this is a COMPLETELY free service!
How
to customize our blank buttons
Some of the graphics you will find on 4YEO consist of buttons and banners
that are blank, so that you can decide what to write on them and obtain
in this way a very particular button that nobody else has (you can use
them also to make your awards).
When you have downloaded one of these buttons, open the program you
ususally use to edit or create graphics (see here
to find some good ones). Open the image you want to edit. Now you are
ready to "write" on the button. Choose the text tool that
allows you to write on images; a window opens and you can write your
text : choose the font, size and color you prefer. You might find difficult
the first times to match the size of the button with that of your words,
but soon it will be easy, I assure you.
Now press OK and see the result. You can still move the word you typed
over the button, to center it so that it fits perfectly. Do you like
what you have done? Just press save: you now have your customized button.
You want an example? (In this case I used Arial, normal, 30 points)
This is one of the buttons that you find on 4YEO site and I wrote something
on it.
Do you see how easy it is?
Go on now, have fun!
How
to upload the graphics onto your server:
This point is very important: when you think that your page is ready,
you have to upload both the .htm/html files and the .gif/jpg files to
your server. We advice you to create a folder "images" where
to store your gifs and jpegs. Open the program you usually use to upload
your stuff, and be sure to upload the files at the right place, in order
to avoid broken images!
We want to emphasize this point since too many people pretend they do
not know the big damage they make when, instead of uploading an image
on their server, they steal our bandwidth (or that of any other site).
And there is absolutely no reason to do it, since our graphics are really
not heavy!
4YEO is a completely free service, but we DO pay for our huge space
on the server. If you steal our bandwidth we will either have to make
you pay for it - or close down 4YEO.
Stealing bandwidth is an uncivilized act of selfishness. Do not do it,
please!
How
to make graphics like ours...
And now, for those of you who asked us what programs our graphic designer
uses to create such unique effects, here's a list of programs that every
good graphic and web designer should have. Click on the program that
interests you to get more info about it.
[LINKS OPEN IN A NEW WINDOW FOR YOUR CONVENIENCE]
Dreamweaver | Flash 8 Professional
| Effect3D Studio
How
to create a link to 4YEO
Finally, when your page is ready, please, give us credits for our work!
We need your support to let more people know us on internet. This is
all we ask: a link back to us! Moreover, once you have done this, let
us know writing to
because we will add a link to your web page in our friends'
list!
To set a link back to 4YEO site you can use one of the the following
codes:
<a href="http://www.4yeo.com" target="4yeo">
<img src="4yeosm.gif" border="0" alt="4YEO"></a>
Here's the result:
Text-only sample code
Graphics by <a href="http://www.4yeo.com" target="4yeo">
4YEO</a>
Here's the result:
Graphics by 4YEO
More linking options are displayed on at link-to-us.
...Thank you for your support!
A
few more tips
Now, just a few more general tips to make your sites good-looking.
These are just simple things, but, alas, they are ignored by too many web-masters.
I've noticed that many of you ignore the fact that you have the chance to give
a title to the .html document.
Do you see the title on top of this page? Where you read "Support: how to
use our graphics"?
Well, that's the title of the page. I browse many sites that have empty titles,
or even worse, there is written "index.html". The title is not only
the first impact on your visitors, but also what a bookmark will show, besides
the url. Who would remember your page if the bookmark says "index",
"home page", or nothing at all? Remember to write nice impressive titles
that will catch people's attention.
The correct tag to do so is:
<TITLE>write a nice title here!</TITLE>
This goes after the <HEAD>, on top of the document.
Then, remember not to alter the dimensions of an image. Making it bigger or smaller
by simply changing its width and height on your html document completely ruins
the graphic. It becomes blurry and really not nice to look at. You should keep
the original dimensions in order to have beautiful images.
Try to be "consistent" in your pages. Some people have fun using 20
different backgrounds and sets in each single page of their site. I can understand
that it might be funny to do so, but aesthetically it is not nice to see.
It is instead preferable to choose one single web-theme that will represent your
page, and maintain that one in all the pages that constitute your site; or at
least, you can try using similar colors and shades of a single color if you still
want to use diverse backgrounds.
This is certainly the best way to build a recognizable site that visitors will
remember after a visit.
Try to limit the use of frames. Pages with frames on every side are not useful
nor nice to see.
One frame for the menu should be more than enough, keeping all the contents in
one main window.
When you build your site, always keep in mind that your average visitor wants
to be informed and amused; he certainly does not want to waste time trying to
figure out HOW your site works ; )
Finally, something obvious that too many times is ignored:
we all make home pages to show people who we are, what we do, what we like and
dislike. Just like we try to be original in real life, let's try to do the same
on the www. Do not steal or copy graphics without permission, and when we can
take something for free, let's give credits for that work!
Moreover, create something unique and special, without copying ideas from other
people. That will certainly give you more satisfaction, and visitors will appreciate
much more!
On-Mouse
over link
Have fun! Improve your page with tiny nifty effects, just like this very simple
javascript
that changes the image of a link:
you first need two images: one image for the regular display (the "Off" image)
and one image for the mouseover (the "On" image). Most mouseovers are used in
conjunction with small images, since you want the effect to be immediate you won't
want to use large images that force your visitors to wait. For this reason mouseovers
tend to be for small .gif images of text or buttons.
Remember it's important to use images that are the same size because the
image that appears on the mouseover will size itself to the image that appears
normally.
To write a mouseover, you begin by inserting the image you want displayed under
normal circumstance (what I think of as the "Off" image) with a basic image tag.
In the following example I'm going to describe how to make a blue happy face ("1b.gif")
turn into a red happy face ("1r.gif") whenever someone puts their cursor over
the face.
Since I want the blue happy face to be the "Off" image I'll begin by writing:
<img src="1b.gif" alt="[Happy Face]">
The first step in transforming the standard image tag like the one above into
a mouseover tag is to give it a name. You need to name the image so that
when you write the code for the mouseover you'll have some way of referring to
it without confusion. To do this, insert the NAME attribute into the IMG tag using
a simple name (i.e., avoid using spaces or punctuation in your names). I'll call
my happy face image by the name "face":
<img src="blueface.gif" name="face" alt="[Happy Face]">
Next you'll need to put the image inside a normal <a href> tag just as you
would for any other kind of image link. Let's use 4YEO's home page:
<a href="http://www.4yeo.com/"><img src="1b.gif" name="face" alt="[Happy
Face]"></a>
So far it's pretty simple isn't it?
The only thing left to do is to add two attribute phrases to the
<a href> tag and the static image becomes a changeling.
The two attributes you'll need are OnMouseOver and OnMouseOut. Set
the OnMouseOver to point at the image you want to use when a mouse goes over it
and set OnMouseOut to the image users see normally.
For my example the code would be:
<a href="http://www.4yeo.com/" onMouseOver="document.face.src='1r.gif';" onMouseOut="document.face.src='1b.gif';">
<img src="blueface.gif" name="face" alt="[Happy Face]"> </a>
Want to see an example now?
![[Happy Face]](animations/smiles/1b_.gif){kind=small}
Meta-tags
Once you have created your home page, you have inserted many nice graphics, you
have uploaded everything to your own server,
it's time to think about getting visitors to yor site! Well if you want your site
to be found on the web ruleno. 1 is: use meta-tags!
Meta-tags are special hidden tags that most search engines read in order to categorize
a website.
The most useful meta tags that you will use are description and keywords
tags.
The description tag tells a search engine to display your predetermined text,
typically a description of your site or page.
The keywords tag provides words for a search engine to associate with your page
in order to seek it out among the thousands of other similar pages.
Now let's take a look at how to implement description and keywords tags:this is
what meta-tags should look like in your page:
<HEAD> <TITLE>Cyber Cats and Cyber Dogs on Internet</TITLE>
<META name="description" content="Everything you wanted to know about Cyber
Cats and Cyber Dogs on the Web.">
<META name="keywords" content="cyber cats, cyber dogs, animals & internet,
cyber pets"> </HEAD>
As a result your listing will look something like this, in search engines that
support the descriptions tag:
Cyber Cats and Cyber Dogs on Internet
Everything you wanted to know about Cats and Dogs on the Web.
Now, if someone searches on "cyber cats", "cyber dogs", "animals & internet",
or "cyber pets", your site should come up within a search engines results. Of
course, some people try to cheat and repeat 100 times the same word in the keywords,
hoping that helps to get a higher position. Well, nothing could be farther from
truth! Search engines are "intelligent" computers and automatically
sned such sites at the end of the list.
Be sure to include only and all the words that deal with your page, so that you'll
be sure to get a high ranking position!
Ok, that's all folks! We hope these few tips helped you a bit.
If there is anything more you need, remember we are here to help you!
Remove
the Underline in Links
If you want to remove the underline in links,
you can use this style definition in the HEAD section of your HTML document:
BACK HOME
All site graphics © 1996-2007 by IM - Site made with Dreamweaver