Posted on : 26-09-2008 | By :
Stefan | In :
Javascript
Put this code in the <head> to preload images.
<script language=”text/javascript”>
<!– Begin
loadImage1 = new Image();
loadImage1.src = “north1.gif”;
staticImage1 = new Image();
staticImage1.src = “north.gif”;
loadImage2 = new Image();
loadImage2.src = “east1.gif”;
staticImage2 = new Image();
staticImage2.src = “east.gif”;
loadImage3 = new Image();
loadImage3.src = “south1.gif”;
staticImage3 = new Image();
staticImage3.src = “south.gif”;
loadImage4 = new Image();
loadImage4.src = “west1.gif”;
staticImage4 = new Image();
staticImage4.src = “west.gif”;
// End –>
</script>
Then use this code in the <body> to display the mouseovers.
<span onmouseover=”image1.src=loadImage1.src;” onmouseout=”image1.src=staticImage1.src;”>
<img name=”image1″ src=”north.gif” border=0></span>
<span onmouseover=”image2.src=loadImage2.src;” onmouseout=”image2.src=staticImage2.src;”>
<img name=”image2″ src=”east.gif” border=0></span>
<span onmouseover=”image3.src=loadImage3.src;” onmouseout=”image3.src=staticImage3.src;”>
<img name=”image3″ src=”south.gif” border=0></span>
<span onmouseover=”image4.src=loadImage4.src;” onmouseout=”image4.src=staticImage4.src;”>
<img name=”image4″ src=”west.gif” border=0></span>
Posted on : 20-09-2008 | By :
Stefan | In :
Utilities
www.editplus.com – PC HTML/CSS/PHP/ASP/XML Editing Software.
In the many years of web design and development I haven’t found a better HTML, CSS, etc, coding program for the PC. The inbuilt remote FTP features mean that I can work remotely on code without having to mess around re-uploading code after editing, which speeds up my work very much. EditPlus is a mere $35 for licensing, but if you want you can evaluate the software forever just by clicking the evaluate button on load.
The only fault I have found is that the remote FTP will sometimes give a timeout. I thought it was an issue with my servers to begin with but have since found that it is a common issue.
Posted on : 20-09-2008 | By :
Stefan | In :
CSS
As with the HTML, I have created a CSS template which may be of use. The idea is to clear everything back to default across all browsers by removing padding, margins and setting the fonts up properly.
* { margin:0; padding:0; }
body { font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; font-size: 100%; }
.access { display: none; }
.clear { clear: both; }
a { color: #000; }
/** Structure **/
#container { width: 790px; margin: 0 auto; }
Posted on : 20-09-2008 | By :
Stefan | In :
HTML
After becoming a freelance web designer I found that I was repeating tasks over and over. Here is the semantically correct, HTML Strict Valid template which I use each time I start web development on a new site. Feel free to use it as you wish…
Got comments on my structures, things to add or remove?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Author" content="Freelance graphic design in Bracknell Berkshire UK - www.faithinme.com">
<link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css">
<!--[if lt IE 7]>
<style type="text/css">@import url("/css/screen_ie.css");</style>
<style type="text/css">@import url("/css/screen_ieold.css");</style>
<![endif]-->
<!--[if gte IE 7]>
<style type="text/css">@import url("/css/screen_ie.css");</style>
<![endif]-->
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<ul class="access">
<li><a href="#nav">Skip to Navigation</a></li>
<li><a href="#content">Skip to Content</a></li>
</ul>
<div id="container">
<div id="header">
<h1><a href="/">Title</a></h1>
<span id="tagline">TagLine</span>
</div><!--// End Header -->
</div><!--// End Container -->
</body>
</html>
0