urdustan > u-files > web pages

Tips and tricks

jig saw puzzlue : http://javaboutique.internet.com/icaPuzFW/

http://websitenotes.com/2001/0403.html

web site garage : http://websitegarage.netscape.com/O=wsg/
http://www.goemerchant.com/programs.htm

http://www.bfree.on.ca/HTML/
http://www.bignosebird.com/
http://www.pagetutor.com/

Computer Information:

http://www.sharpened.net/
http://webopedia.internet.com/
http://www.help-site.com/
 

adding search to your site

1. Third Party:
A) Atomz.com
They have the best reputation online and are one of the easiest of the services 
to  add to your site. One nice feature is the weekly email reports, which detail 
the keywords people are searching for on your site and what pages they're 
visiting. Registration is simple. Once you fill out their short form,  they will 
give you some HTML code to cut and paste onto your pages where you want the 
search box to appear. You can also customize it to more closely match the look 
of your Web site.

B) Freefind.com
They offer both free and pay versions of their service. The free version is ad 
supported. This is an industrial strength search engine with automatic daily 
re-indexing and more. The paid version carries no advertising, and offers some 
additional options to choose from. This one is super fast to set up and also 
reports on your visitors' searches.

2. Downloadable Scripts:
A) Web Search: http://awsd.com/scripts/websearch/index.shtml
This shareware script allows users to search by keywords. It's easy to set up, 
and you can easily configure the number of results that show up on  the download 
page. Free to try it, but $25.00 if you like it and decide to keep it.

B) Matt's Script Archive: http://worldwidemart.com/scripts/
This site is well-known for their quality scripts, so chances are you won't go 
wrong here.
You'll find plenty of free Perl-CGI scripts for your enjoyment. The search 
script offered is called "Simple Search."

C) For a complete list of downloadable CGI scripts go to 
http://www.diywebmasterresources.com/cgiscripts.html
 
 
 

I have visited many sites that, after clicking on a banner let you get 
transported away to another domain. For optimizing conversion and "length of 
stay" for your users, it is advisable to open your banner selection in a "new" 
window. This is easily done in your html and you should immediately start seeing 
the results from this action.

For example, if your banner choice was:
 <a href=http://www.newdomain.com>  <img src="bannername.gif" 
width="468" height="60"> 

Add a tag   -      target="_blank"  to the end of the href tag.

 <a href=http://www.newdomain.com target="_blank">  <img 
src="bannername.gif" width="468" height="60"> 

Now, when your banner is clicked on, a new window will pop up instead of simply 
switching to the new url.

Creating style sheets: 

Creating an External Style Sheet

Creating Creating style sheets is fairly simple. To 
create a style sheet you will need to have some understanding of 
which selectors, properties and values work together. You can get 
that information in the CSS Properties section. 
http://www.htmlstyle.com/css/cssprop.shtml

  <>  Creating an External Style Sheet

Open a text editor such as Notepad. 
Decide which tags you want to be used as selectors by your style 
sheet. Example: if you want your  <p>  </p>  tags to use your style 
sheet then you will need to put "p" (without the quotes) in your 
open text editor. After each tag press enter. Do this for every 
tag you want to affect. 

Here is how it should look:
~~~~~~~~~
p

a:link, a:active  a:visited

hr
~~~~~~~~~

Now you will want to take a look at the properties available for 
each of the selector we put in our css document. After we decide 
which properties and values we want to apply to our selector we 
enter them in the text editor next to the selector. 
Here is how it should look:

 <STYLE> 
P
{
    FONT-SIZE: 20pt;
    FONT-FAMILY: verdana,helvetica;
    align: center
}
A:link
{
    FONT-SIZE: 10pt;
    COLOR: #0000cc;
    FONT-FAMILY: verdana,helvetica;
    TEXT-DECORATION: none
}
A:active
{
    FONT-SIZE: 10pt;
    COLOR: #0000cc;
    FONT-FAMILY: verdana,helvetica;
    TEXT-DECORATION: none
}
A:visited
{
    FONT-SIZE: 10pt;
    COLOR: #0000cc;
    FONT-FAMILY: verdana,helvetica;
    TEXT-DECORATION: none
}
HR
{
    WIDTH: 400px;
    COLOR: #ff0000;
    align: right
}
 </STYLE> 

Save the css file with a *.css extension. By default, Notepad will 
place a *.txt extension. To change the extension just type it 
along with the name of the file when you save it. 
Note: To change the extension you must have "Hide file extensions 
for known file types" turned off. This is done by opening Windows 
Explorer and selecting "View, Folder Options, View (tab)" and 
uncheck the box next to "Hide file extensions for known file types". 
After you have saved your *.css file you will need to upload it to 
your Webserver. 

Last, you will need to link your *.css file to your Web documents

  <>  Linking an External Style Sheet

If you created a style sheet with a text editor and named it 
whatever.css, you will need to link your documents to that style 
sheet. Here is how it's done.

Upload the whatever.css file to your root directory on your 
Webserver. 

Create the following code between the <head>  </head>  tags of every 
document you want to be affected by the whatever.css file:

 <LINK REL=STYLESHEET TYPE="text/css" HREF="whatever.css"> 

If you place your Web pages in a folder in the root directory and 
the whatever.css is located in the root directory then you will 
need to modify the link to look like this:

 <LINK REL=STYLESHEET TYPE="text/css" HREF="../whatever.css"> 

Creating Web Page Transitions

Note: These transitions are built for IE 4.0 and above.

Do you want to put a little spice in the transition of your pages 
like the boxing-in or dissolve effect? I do...but I also agree with 
my housemate Brooks, who doesn't like using the transitions too much.
Why? Well, every time someone hits the "back" button, they have to 
wait for the transition to occur before they can read your page. When
this is an impatient world like the Internet is...it gets old 
quickly. However, if you are creative and use the transitions 
sparingly or the "random" effect, you should be able to create web 
page(s) that have a "techy" feel among the myriad of static pages.

Here is how it is done:

Add this code to the  <head>   </head>  area of your page:

 <META http-equiv="Page-Enter" content="revealTrans
(Transition=1,Duration=1.000)"> 

So the top of your web page should look something like this:

 <html> 
 <head> 
 <title> Page Title
 </title> 
 <META http-equiv="Page-Enter" content="revealTrans
(Transition=1,Duration=1.000)"> 
(Other Meta Tags)
 </head> 

This meta tag has the "Page-Enter" attribute which will allow this 
function to kick on when someone enters that page. The 
"content="revealTrans" cues their browser to start the transition. 
The (Transition=1...) lets the users browser know which transition 
to display. Well, how do YOU know what transition to code?

This is the breakdown of the transitions which you can use:

"Transition=0" will give the "Box in" effect.
"Transition=1" will give the "Box out" effect.
"Transition=2" will give the "Circle in" effect.
"Transition=3" will give the "Circle out" effect.
"Transition=4" will give the "Wipe up" effect.
"Transition=5" will give the "Wipe down" effect.
"Transition=6" will give the "Wipe right" effect.
"Transition=7" will give the "Wipe left" effect.
"Transition=8" will give the "Vertical blinds" effect.
"Transition=9" will give the "Horizontal blinds" effect.
"Transition=10" will give the "Checkerboard across" effect.
"Transition=11" will give the "Checkerboard down" effect.
"Transition=12" will give the "Random dissolve" effect.
"Transition=13" will give the "Split vertical in" effect.
"Transition=14" will give the "Split vertical out" effect.
"Transition=15" will give the "Split horizontal in" effect.
"Transition=16" will give the "Split horizontal out" effect.
"Transition=17" will give the "Strips left down" effect.
"Transition=18" will give the "Strips left up" effect.
"Transition=19" will give the "Strips right down" effect.
"Transition=20" will give the "Strips right up" effect.
"Transition=21" will give the "Random bars horizontal" effect.
"Transition=22" will give the "Random bars vertical" effect.
"Transition=23" will give the "Random" effect.

The "Duration=1.000" shows that the browser will take ONE second to 
show the transition. Don't get carried away with the number of 
seconds or it can seem like a slow death to your viewer.
 
 
 

And please don't forget to let webustaad know about your page or any problem that you encountered while making one.  e-mail webustaad@urdustan.com
 


|| urdustan ||
adeeb | anam | e-mail | messageboard | mushaira | u-hoo | about us
e-mail : webustaad@urdustan.com