Meine Hauptaufgabe im Praktikum war das erstellen einer Web-Seite. Bei dieser Arbeit habe ich eine Menge an hilfreichen Funktionen zum Erstellen von Web-Seiten gelernt. Auf dieser Seite möchte ich euch ein paar Tip's geben die man immer mal gut gebrauchen kann. 1. Datum der letzten Änderung anzeigen
Eine Internet-Seite sollte möglichst immer aktuell sein. Um den Überblick zu behalten, wann die Web-Seite zuletzt geändert wurde, gibt es ein hilfreiches JavaScript. Wenn man dies einmal eingebaut hat, muß man sich selbst nicht mehr um die Änderung des Datum's kümmern. Wenn ihr denn folgenden Quelltext einfügt, sollte das aktuelle Änderungsdatum angezeigt werden.
<script language="JavaScript">
document.write("Diese Seite wurde zuletzt verändert am " +document.lastModified);
</script>
Aber Vorsicht, dieser Quelltext stellt das Datum im amerikanischen Format dar.
Um das Datum richtig darzustellen (ich meine im deutschen Format) solltet ihr folgenden Quelltext einfügen:
<HTML>
<HEAD>
<TITLE>letzte Änderung</TITLE>
<SCRIPT Language="JavaScript">
var Monatsname = ["Januar", "Februar", "März", "April", "Mai","Juni", "Juli", "August", "September", "Oktober","November", "Dezember"];
var Tagname = ["Sonntag", "Montag", "Dienstag", "Mittwoch","Donnerstag", "Freitag", "Samstag"];
function modifyString()
{
var date = new Date();
date.setTime(Date.parse(document.lastModified));
return Tagname[date.getDay()] + ", den " + date.getDate() + ". "+ Monatsname[date.getMonth()] + " " + date.getYear();
}
</SCRIPT>
</HEAD>
<BODY>
Dieses Dokument wurde zuletzt geändert am :
<SCRIPT>
document.writeln(modifyString() + "
");
</SCRIPT>
</BODY>
</HTML>
Viele kennen vielleicht das Problem, das beim scrollen einer Seite mit einem Hintergrundbild ein ruckeln auftritt. Diesem Problem kann man Abhilfe schaffen indem man den Hintergrund festsetzt.
<body background="hintergrundbild.gif" bgproperties="fixed">
Der Effekt läßt sich auch mit Hilfe von CSS (background-attachment) realisieren. Dadurch können auch moderne Netscape 6 Browser etwas damit anfangen.
BODY { background: white url(bild.gif); background-attachment: fixed; }
Viele kennen vielleicht schon die Hover-Funktion. Aber für alle die sie noch nicht kennen erkläre ich sie hier nochmal.
Aus meiner Erfahrung bin ich am besten gefahren wenn ich für diese Hover-Funktion eine eigene ".css" Datei angelegt habe. Damit vermeidet man das der eigentliche Quelltext einer Web-Seite zu groß und unübersichtlich wird.
Ihr müßt also nur denn folgenden Quelltext in einer ".css" speichern, z.B."hover.css".
a {
text-decoration : none;
}
a:hover {
text-decoration: underline overline;
color: red;
}
Nachdem ihr denn Quelltext in dieser Datei gespeichert habt, müßt ihr im Quelltext der eigentlichen Seite, wo diese Funktion verwendet werden soll ein Verweis einbauen.
Ich persönlich füge diesen Verweis oberhalb des BODY Tags ein.
<LINK href="hover.css" rel="STYLESHEET" type="text/css">
Der Nachteil an dieser Funktion ist, das sie unter älteren Browsern nicht richtig funktioniert. Besonders bei Browsern von Netscape. Bei einem älteren Browser als Netscape 6.0 funktioniert die Sache gar nicht. Aber keine Sorge, auch für dieses Problem habe ich etwas für euch. Ihr müßt zunächst eine Java-Script Datei anlegen, z.B. "hover.js". In diese Datei fügt ihr denn folgenden Quelltext ein.
var oldLoad = null;
var obj = null;
var tmpLayer = null;
if (self.onload)
oldLoad = self.onload;
self.onload = HoverInit;
function HoverInit()
{
if (oldLoad) oldLoad();
if (document.layers) {
tmpLayer = new Layer(1);
tmpLayer.bgColor = document.bgColor;
document.captureEvents(Event.MOUSEOVER);
document.onmouseover = Hover;
}
}
function Hover(evt)
{
document.routeEvent(evt);
if (tmpLayer && tmpLayer.visibility == 'hide' && evt.target.text) {
obj = evt.target;
tmpLayer.left = obj.x;
tmpLayer.top = obj.y;
tmpLayer.width = 1;
with (tmpLayer.document) {
open();
write('<nobr><a href="'+obj.href+'" class="hover"' + (obj.target ? ' target="' + obj.target + '"' : '') + '>'+obj.text+'</a></nobr>');
close();
}
tmpLayer.visibility = 'show';
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Hoveroff;
}
}
function Hoveroff(evt)
{
if (tmpLayer && evt.target != tmpLayer.document.links[0] && evt.target != obj) {
tmpLayer.visibility = 'hide';
document.releaseEvents(Event.MOUSEMOVE);
}
}
Nachdem ihr die Datei gespeichert habt, fügt ihr in den Quelltext eurer eigentlichen Web-Seite, am besten direkt unterhalb des BODY Tags einen weiteren SCRIPT Tag ein.
Dieser könnte dann so aussehen.
<SCRIPT language="JavaScript" src="hover.js" type="text/javascript"></SCRIPT>
Wenn ihr eure Web-Seite gespeichert habt und mal in einem Browser ladet, müßten diese Hilfen funktionieren (Auch im Netscape 4.7).