PDA

View Full Version : Webpage Tips & Tricks



I.am
11-04-2003, 07:08 AM
Like the title says, posting here some helpful tips, tricks, scripts that will help new webdesigners or some advanced one's to look back as a reference.
Sorry, I wont be posting simple codes for writing html tags or anything but more useful things that come in handy while designing or rebuilding your websites.

First of all several times the question is asked what program to use then here are my fav. choices:

Microsoft Frontpage (WYIWYG) (Not bad)
Macromedia Dreamweaver MX (WYIWYG) (Excellent)
Notepad (for advanced)
Please visit WYSIWYG Shootout (http://hotwired.lycos.com/webmonkey/98/08/index1a.html) for comparisons.
There are other but these are good enough to get you started.

Coming back:

To all webdesigners (Professionals & advanced)

Please feel free to add your own if they are helpful. Addition of some helpful unique things instead of simple scrollbar/banner/(easily available) scripts would be appreciated more.

Hope this comes in handy,
I.am

--------------------------------------------------
TIP 1: Disappearing Print Button
Wouldn't it be nice to be able to put a "print page" button on your webpage without it showing up in the printed out page. Here is a little script that will do just that. The button appears on the webpage, but when the page is printed the button isn't on the printed page. Note: this script will only work with newer browser versions.

Put this part of the script between the <head> and </head> tags of your webpage.

&#60;script language="_JavaScript">
function printPage() {
if(document.all) {
document.all.divButtons.style.visibility = &#39;hidden&#39;;
window.print();
document.all.divButtons.style.visibility = &#39;visible&#39;;
} else {
document.getElementById(&#39;divButtons&#39;).style.visibility = &#39;hidden&#39;;
window.print();
document.getElementById(&#39;divButtons&#39;).style.visibility = &#39;visible&#39;;
}
}
</script>

This part of the script can be placed anywhere within the body of your webpage where you would like the button to appear.

<div id="divButtons" name="divButtons">
<input type="button" value = "Print this page" onfiltered="printPage()" style="font:bold 11px verdana;color:#FF0000;background-color:#FFFFFF;">
</div>
______________________________

TIP 2: When designing Flash, you have to keep in mind about accessibility issues with user who do not have flash installed. To handle that here is a quick solution to those who are not aware of Flash and Gif (http://www.klboard.ath.cx/index.php?showtopic=40757&st=0&#entry284801) - A topic posted a while back about the same thing.

____________________________________________

Few months back I had posted few web-ettiquetes for web development and design. But due to the change of server many posts got deleted and it was one of those.

Anyhow, I will keep posting any interesting things i come across or remember regarding designing.

Cheers&#33;
I.am
(Sorry got a little long post :P )

InverseKinetix
11-05-2003, 03:44 PM
2. Easy Rollovers

&#60;script type="text/javascript">
function init() {
if (&#33;document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName(&#39;img&#39;);
for (var i = 0; i < imgarr.length; i++) {
if (imgarr[i].getAttribute(&#39;hsrc&#39;)) {
imgTemp[i] = new Image();
imgTemp[i].src = imgarr[i].getAttribute(&#39;hsrc&#39;);
imgarr[i].onmouseover = function() {
imgOriginSrc = this.getAttribute(&#39;src&#39;);
this.setAttribute(&#39;src&#39;,this.getAttribute(&#39;hsrc&#39;))
}
imgarr[i].onmouseout = function() {
this.setAttribute(&#39;src&#39;,imgOriginSrc)
}
}
}
}
onload=init;

</script>



normal_state.jpg (whatever.html)

MediaSlayer
11-05-2003, 04:05 PM
i installed easy html recently now i&#39;m eager to try it out after seeing the suggestions and that link(i can&#39;t tell if its wysiwyg though) i hope it is