Tipps und Tricks zu Webdesign.

Dateien mit FileZilla im Internet anbieten:

Dazu muss man den Server konfigurieren - FileZilla-Server ist ein kostenloser FTP Server, durch den Sie Ihren Rechner ganz einfach und schnell zum Server für andere User machen und anderen den Zugriff auf die Dateien Ihrer Festplatte erlauben. Um den Server zu konfigurieren, öffnen Sie nach der Installation ..Edit/Settings". Hier geben Sie bei „Welcome message" eine Nachricht für Ihre User ein, sperren optional den Zugriff bestimmter IP-Adressen oder legen Speedlimits fest. Am wichtigsten ist die Benutzerverwaltung unter „Edit/Users": Bei „Shared folders" tragen Sie die Ordner ein, auf die ein User zugreifen darf, und bestimmen, ob er nur Lese- oder auch Schreib- und Löschrechte haben soll. Einzelnen Usern können Sie per Passwort auch unterschiedliche Ordner zuteilen. Damit die User auf Ihren FTP-Server zugreifen können, müssen sie einen FTP-Client wie FileZilla nutzen, in den sie dann die IP Ihres Rechners und gegebenenfalls die von Ihnen vergebenen Zugangsdaten eintragen.

Webdesign:

Automatische Weiterleitung, bei einer neuen Seite:

<meta http-eqiv=“refresh“ content=“3“;
URL0http://www.adresse.de/”>
Die 3 gibt an, dass 3 Sekunden bis zur Weiterleitung gewartet wird und.

Dieser Eintrag kommt zwischen die Head-Befehle der alten Seite.
 

Kommentarbox einfügen:

Mit dem CSS-Befehl float left wird das Element rechts umflossen:
<style type=’’text/css’’>
.kommentarbox {
float: left; margin: 10px; padding: 10px; font-size:small; border: 1px solid #000; background: #eee;}
</style>
Die folgende Zeile bettet eine Kommentarbox in den Fließtext ein:
<div class=“kommentarbox“>
Das ist ein Kommentar</div>
 

Links mit CSS bearbeiten:

Das geht mit den Attributen: <link>; <alink> und <vlink>, dort Farbwerte einsetzen.
 Besser: Mit Hilfe eines Stylesheets im headbereich: text-decoration:line-through, so sind besuchte Links durchgestrichen:
<style type=“text/css“>
a:link { font-weight:bold; color:#0000ff; text-decoration:none }
a:active { font-weight:bold; color:#0000ff; text-decoration:underline }
a:visited { font-weight:bold; color:#0000ff; text-decoration:line-through }
a:hover { font-weight:bold; color:#0000ff; text-decoration:none }
</style>
 

CSS-Definitionen zusammenfassen:

Sind bestimmte formatierte Überschriften auf die gleiche Art formatiert, kann man sie auch zusammenfassen: H1,H2,H3 {color: blue; font-family: verdana,arial,helvetica;} anstatt den Inhalt der geschweiften Klammern jeweils hinter H1 und dann H2 usw zu schreiben.
Sind die Inhalte der geschweiften Klammer zwar ähnlich, aber nicht gleich, kann das so aussehen:
H1 {font-size:1.2.em;}
H2 {font-size:1.1.em;}
H3 {font-size:1.0.em;}
H1, H2, H3 {color: blue; font-family: verdana…}
Das geht auch bei Hyperlinks, wenn zb alle ohne Unterstreichung sein sollen:
A:link, A:visited, A:hover, A:active
{text-decoration: none;}
 

Zweispaltiger Text mit CSS:

<p style =“border: solid black 1em;
padding: 1em; column-count: 2;
column-rule: solid black 1em;
column-gap; 4em”>
an diese Stelle kommt der zweispaltige Text
</P>
column-count, -width, -min-width, -width-plicy legt die Anzahl und Breite der Spalten fest
column-gap, -rule, -rule-color,rule-style und –rule-width ist für die Abstände zwischen den Spalten zuständig
 

Suchfeld für Wikipedia in die Homepage einbauen:

<form name=“searchform“
action=“httpü://de.wikipedia.org/wiki/Spezial:Search“
target=“_blank“>
In Wikipedia suchen:&nbsp;
<input name=search“
type=“text“ value=““/>
<input type_’submit’ name=”go”
id=”searchGoButton”
value=”Artikel”/>&nbsp;
<input type=’submit’
name=”fulltext”
value=”Suche”/>
</form>
Das Formular hat zwei Schaltflächen: 1.Der Suchbegriff, 2. Starten der Suche
 

Dynamische Fenstertitel:

Folgendes PHP-Script an den Anfang der HTML-Seite stellen:
<?php
§wm = mktime(0, 0, 6, 9, 2006);
$jetzt = time();
§tage = ceil((§wm - §jetzt) / (3600 * 24));
?>
<html>
<head>
<title>
Die Fußballweltmeisterschaft 2008 beginnt in <?php echo
§tage ?> Tagen
</title>
</head>
<body>

</body>
</html>
Möglicherweise fehlt noch ein script, zu finden unter PC-Magazin 7/2006 S. 142 Kleinformat und auf CD/DVD.
 

HTML und CSS auf Usability testen:

http://Validator.w3.org
Validate by URI : die eigene auf dem Server liegende Seite eingeben: http://www.
 Validate by File Upload : Eine auf dem eigenen Rechner liegende Seite hochladen
 Validate by Direct Input : eine HTML-Datei direkt eingeben
 

CSS überprüfen:

http://jigsaw.w3.org/css-validator

Ladeinformation (Bild mit Info: Bild wird geladen) für Bilder:

Eine kleine Gifgrafik mit dem Text: „Bild wird geladen“ erstellen und in folgenden HTMLcode einfügen:
<table cellspacing=20“ cellpadding=“0“ border=“0“>
<tr><td> background=“hintergrund.gif“><img src=“foto.jpg“ width=“600“ heigth=“400“ border=“0“></td></tr>
</table>
 

Tooltipps in HTML einfügen:

Es handelt sich um die kleinen gelben Hinweisfenster, die erscheinen, wenn man mit der Maus darüber fährt: Das geht mit Hilfe des Attributs „title“:
<a href =“index.html“ title=“Startseite”>Home</a> So erscheint als Tooltipp der Text ”Startseite”. Im Tooltipp dürfen max. 1024 Zeichen st5hen. Mit der Zeichenfolge &#10 erreicht man, dass die Zeile umgebrochen wird.
 

Spaltensatz mit CSS:

Diesen Bereich in der Webseite in einen gesonderten Bereich einfügen:
<div id=“spalten1“>
beliebige Inhalte für die Spalten 
…</div>
mit folgenden Formatangaben wird der Artikel 3-spaltig:
#spalten1 {column count:3;}
etwas Abstand zwischen den Spalten:
column-gab:20px.
Höhe der Spalten:
Height:300px
Aber IE und Firefox unterstützen noch nicht CSS 3
Für Firefox ist daher folgende Einbindung nötig:
#spalten1{column-count:3; column_gap:20px; -moz-column-count:3; -moz-column-gap:20px; hight:300px;}
 

Symbole für Aufzählungen:

Li {list-style-image: url(bild.gif)}    

CSS eine einfache Anleitung:

Einer Webseite ein externes CSS hinzufügen:

Eine CSS-Datei erstellen:

Wordpad öffnen und folgenden Eintrag machen:
Body
{
font-family: "Verdana";
font-size: 12pt;
color: blue;
font-weight: bold;
}
P:First-Letter
{
color: blue;
font-weight: bold;
font-size: 30pt;
}
 
Body besagt, dass das folgende im Body erscheint, also im eigentlichen Webseiteninhalt:
Die {} geben die Anweisung, dass dort etwas steht, was als CSS-Anweisung zu verstehen ist:
Font-family gibt die Schriftart an;
Font-size: die Schriftgröße;
Color: die Schriftfarbe;
Font-weight: die Schriftdicke.
Man kann mehrere Anweisungen angeben:
P gibt an, dass sich etwas auf einen Absatz dreht. Im Quelltext muss dann vor dem Absatz <P> stehen, ein </P> - Abschluss muss nicht unbedingt erscheinen, ist aber besser, wenn man es setzt.
P:First-Letter bedeutet, dass bei dem betroffenen Absatz, vor dem im Quelltext <P> steht der erste Buchstabe als Initial groß geschrieben wird, wobei danach angegeben werden kann, wie der Buchstabe aussehen soll.
 

Einbindung in die HTML-Datei:

Man speichert, die Wordpad-Datei in einem beliebigen Ordner unter einem beliebigen Namen ab, also: Speichern unter: Dateiname: einen Namen eingeben z. B.
 CSS-Anweisung.css; unter Dateityp: Unicode Textdokument; Speicherort suchen – OK.
Anschließend z. B.
 Nvu öffnen und in den Quelltext gehen: Nvu zeigt dort folgenden Eintrag, der so für eine leere Seite gilt:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
<title></title>
</head>
<body>
<br>
</body>
</html>
 
Man muss jetzt der HTML-Datei mitteilen, dass es eine CSS-Anweisung gibt, die mit den sog. „Style-Tags“ eingefügt wird: Hinter dem Titelabschlusstag „</title>“: erscheint der sog.  „Style-Tag“ (<style …), direkt danach schreibt man: type="text/css">@import url(import.css); danach wird der „Style-Abschlusstag“ gesetzt: „</style>“, sodass schließlich hinter dem „Title-Abschlusstag“ komplett folgender Eintrag erscheint: 
<style type="text/css">@import url(CSS-Anweisung.css); </style> , 
wobei beim ersten „Style-Tag“ ein Leerzeichen vor “type” stehen muss. Damit ist die externe CSS-Datei in das HTML-Dokument integriert. Das HTML-Dokument wird in denselben Ordner gespeichert, wie die externe CSS-Datei, danach kann man das HTML-Dokument vervollständigen.
 
Liegt die HTML-Datei in einem bestimmten Ordner und die CSS-Datei liegt in einem anderen Ordner auf der gleichen Ebene, so muss sie folgendermaßen eingebunden werden: 
<style type="text/css">@import url(Materialien/CSS-Anweisung.css); </style>
 
Die CSS-Datei kann auch über den „Link-Tag“ eingebunden werden:
Die CSS-Anweisungsdatei liegt im gleichen Ordner, wie die HTML-Datei: Dazu erscheint im Quelltext folgender Eintrag hinter dem abgeschlossenen „Title-Tag“, („</title>): 
<link rel="stylesheet" type="text/css" href="/j/CSS-Anweisung.css"/>  danach wird der „Headbereich“ durch den „Headabschluss-Tag“ (</head>) abgeschlossen.
 
Die CSS-Datei liegt in einem Ordner z. B.
 mit dem Namen „CSS“, die HTML-Datei liegt auf der gleichen Ebene, also neben dem Ordner „CSS“, dann heißt der Link: 
<link rel="stylesheet" type="text/css" href="/j/CSS/CSS-Anweisung.css"/> , dh. vor die Datei „CSS-Anweisung.css“ kommt CSS/, dh. CSS steht für den Ordnername, in dem die Datei  „CSS-Anweisung.css“ liegt.
 
Liegt die HTML-Datei in einem Ordner eine Ebene tiefer, als die CSS-Datei in ihrem Ordner „CSS“, so verändert sich der Eintrag in: 
<link rel="stylesheet" type="text/css" href="/j/../CSS/CSS-Anweisung.css"/>
 
Für jede Ebene, die die HTML-Datei tiefer liegt, muss also vor dem eigentlichen Link ein “../“ erscheinen.
Will man die CSS-Anweisung erweitern, öffnet man die Datei „CSS-Anweisung.css“ mit dem Editor, schreibt die neue Anweisung hinein und speichert ab. Eine neue Anweisung gehört zwischen die geschweiften Klammern und besteht aus der „Eigenschaft“ z. B.
 „background“ und dem „Wert“ z. B.
 „red“, hinter der Eigenschaft steht ein Doppelpunkt gefolgt von einem Leerzeichen, der Wert wird durch ein Semikolon abgeschlossen. Verschiedene Eigenschaften werden so einfach untereinander geschrieben
 

Beispiele für Eigenschaften und darauf folgende Werte:

color: blue;
font-weight: bold; (bold-fett, bolder-fetter, lighter-dünn, normal-Standard)
font-size: 30pt; (in pt angeben)
font-family: "Verdana";
font-style:italic; (italic-kursiv, normal, oblique-kursiv)
color: blue;
text-decoration: underline; (overline, line-through, blink, inherit, auch: underline overline, dann gibt es einen Strich über und unter dem Wort)
text-align: justify; (justify = Blocksatz, left, center, right, inherit)
background: yellow oder: #ffeedd
<Font> gibt Auskunft über die Schrift, z. B.
 <Font size-3 color=“#ff3300“> gibt die Schriftgröße und –farbe an. Die Schriftgröße wird von 1 – 7 angegeben: 1 – Größe 8, 2 – 10, 3 – 12, 4 – 14, 5 – 18, 6 – 24, 7 – 36)
Textmarkereffekt:
Folgendes in den Body-Bereich als HTML schreiben: * bedeutet eine Leerstelle!!
<span*style*=*„background:*yellow;“>*zu*markierender*Text</span>
 

Im Body können die Linkfarben angegeben werden:

alink – Farbe der markierten Hyperlinks
link – Farbe der nicht besuchten Links
vlink – Farbe der besuchten Links; das sieht dann z. B.
 so aus: <Body alink=“#00ff00“>
 
h1, h2 bis h6 beziehen sich auf Überschriften; Vor die Überschrift kommt <H1> und ans Ende </H1>; Punktgrößen für die Überschriften: H1- 24; H2- 18; H3- 14; H4- 12; H5- 10 und H6- 8) 
P:First Letter {…} bedeutet, dass in jeder Zeile/Absatz der erste Buchstabe z. B.
 vergrößert wird, allerdings muss im Quelltext am Anfang der Zeile/des Absatzes, in der/in dem der erste Buchstabe verändert werden soll, folgender Tag erscheinen <p> am Ende der Zeile/des Absatzes erscheint der entsprechende Abschlusstag, also </p>. Die ganze Maßnahme findet im Body statt, sodass so etwas z. B.
 wie folgt aussehen könnte:
 
<body>
<p>dieses ist eine Ueberschrift
</p>
<p>der erste Buchstabe sollte
jetzt gro&szlig; sein.
</p>
</body>
 
<hr> gibt im HTML-Dokument einen waagerechten 3D-Strich vor. Folgende Attribute dazu sind möglich: align-Ausrichtung der Trennlinie; color – Farbe der Trennlinie; noshade- nimmt der Linie den 3-D-Effekt; size- Dicke der Linie; width- Breite der Trennlinie. Dazu wird dann der Wert gegeben, sodass das dann z. B.
 so aussieht: <hr color=“#ff0000“>; will man über der Linie z. B.
 einen Abstand von 20 px haben, dann heißt es folgendermaßen: <hr stayle=“margin:-20px“>

 
Eine Navileiste:

Folgende Zeilen direkt unter dem Body-Eingangtstag (<body>) eingeben:
<hr><a
 target="_top"
 href="1.%20Ebene/funktionierende%20Datei/import.htm">Home/Startseite</a>|<a
 href="Reisen.htm">Reisen</a>|<a
 href="Anleitungen.htm">Anleitungen</a>|<a
 href="Tipps%20unf%20Tricks.htm">Tipps und Tricks</a>|<a
 href="Fraktale.htm">Fraktale</a>
<hr><br>
Einfache Texthervorhebungen:
 

Hover-Grafiken:

Damit schnell ein anderes Bild bei9m Herüberfahren mit der Maus entsteht:
Das Startbild in die Seite einbinden: * bedeutet eine Leerstelle
<span*class=“hoverbild“>
<a*href=“seite.html”>
<img*src=”bild1.jpg” alt=”Ersatztext”*/></a>
</span>
anschließend folgende CSS-Angabe in den <style> -Bereich geben:
.hoverbild*img*{display:block;
*width:20px;*height:60px;*border:0;}
Die Pixelwerte unter “height” und “width” den tatsächlichen Pixelgrößen anpassen. Das Austauschbild mit dem folgenden Format in den Hintergrund des Hyperlinks legen:
.hoverbild*a*{
background:*url(bild2.jpg)*no-repeat;*display:block;*width:200px;}
Für die Reaktion auf die Mausbewegung sorgt:
.hoverbild*a:hover.img {visibility:*hidden;}
Das Format versteckt die verlinkte Grafik und legt so das Hintergrundbild frei.
Folgende Formate ergänzen, damit das auch in älteren Browsern (IE) funktioniert:
.hoverbild*a:hover*{border:0;}
es filgen jetzt zwei Mal **, davon ist der erste * wirklich als * einzutragen!!
**html*.hoverbild*a*
{margin-right:1px;}
**html*.hoverbild*
a:hover*{width:201px;margin-right:0;}
 

Besuchte Links durch ein kleines Häkchen als abgehakt darstellen:

Man benötigt dazu eine kleine etwa 13X13 Pixel große Grafikdatei auf der ein kleines Häkchen dargestellt ist. 
A:visited {
 Padding-right:15px;
Background:url (besucht.gif) no-repeat 100% 50%;
Text-decoration: none;
Color:#F70;
}
a:visited:hover {
background-image:
url (beuchthover.gif);
color:#F00;
}
Erläuterungen:
No.repeat bedeutet, dass die Grafik nicht wiederholt wird und mit den %-Werten halt man sie im bestimmten Abstand vom linken und oberen Rand;
Padding-right bedeutet der Platz ist rechts neben dem Beschreibungstext des Links;
a.visited:hover bedeutet, dass sich das Häkchensymbol bei Berührung mit der Maus verfärbt.
 
Man muss jetzt der HTML-Datei mitteilen, dass es eine externe CSS-Anweisung gibt, die mit den sog. „Style-Tags“ eingefügt wird: Hinter dem Titelabschlusstag „</title>“: muss der sog. „Style-Tag“ (<style …) erscheinen, direkt danach schreibt man: type="text/css">@import url(import.css); danach wird der „Style-Abschlusstag“ gesetzt: „</style>“, sodass schließlich hinter dem „Title-Abschlusstag“ komplett folgender Eintrag erscheint: 
 ... <title></title>
<style type="text/css">@import url(CSS-Anweisung.css); </style>
</head>  … , 
wobei beim ersten „Style-Tag“ ein Leerzeichen vor “type” stehen muss. Damit ist die externe CSS-Datei in das HTML-Dokument integriert. Das HTML-Dokument wird in denselben Ordner gespeichert, wie die externe CSS-Datei, danach kann man das HTML-Dokument vervollständigen.
 
Liegt die HTML-Datei in einem bestimmten Ordner und die CSS-Datei liegt in einem anderen Ordner mit z. B.
 der Bezeichnung „CSS“ auf der gleichen Ebene, so muss sie folgendermaßen eingebunden werden: 
<style type="text/css">@import url(CSS/CSS-Anweisung.css); </style>
 

Die CSS-Datei kann auch über den „Link-Tag“ eingebunden werden:

Die CSS-Anweisungsdatei liegt im gleichen Ordner, wie die HTML-Datei: Dazu erscheint im Quelltext folgender Eintrag hinter dem abgeschlossenen „Title-Tag“, („</title>): 
<link rel="stylesheet" type="text/css" href="/j/CSS-Anweisung.css"/>  danach wird der „Headbereich“ durch den „Headabschluss-Tag“ (</head>) abgeschlossen.
 
Die CSS-Datei liegt in einem Ordner z. B.
 mit dem Namen „CSS“, die HTML-Datei liegt auf der gleichen Ebene, also neben dem Ordner „CSS“, dann heißt der Link: 
<link rel="stylesheet" type="text/css" href="/j/CSS/CSS-Anweisung.css"/> , dh. vor die Datei „CSS-Anweisung.css“ kommt CSS/, dh. CSS steht für den Ordnername, in dem die Datei „CSS-Anweisung.css“ liegt.
 
Liegt die HTML-Datei in einem Ordner eine Ebene tiefer, als die CSS-Datei in ihrem Ordner „CSS“, so verändert sich der Eintrag. Es muss vor die Bezeichnung des Ordners „CSS“ folgender Eintrag stehen „../“, sodass die Einbindung wie folgt aussieht: 
<link rel="stylesheet" type="text/css" href="/j/../CSS/CSS-Anweisung.css"/>
 
Für jede Ebene, die die HTML-Datei tiefer liegt, muss also vor dem eigentlichen Link ein “../“ erscheinen.

Hintergrundfarbe, Schrift usw. für eine Tabelle:

TD
{
background-color: #e1f9ff; à gibt die Hintergrundfarbe an
color: blue; à gibt die Farbe von Rahmen und Schrift an
font-family: Arial;
font-weight: bold;
font-size: 9pt;
line-height: 9pt;
Text-decoration: underline;
}
 

Längere Texte mit Javascript ein- uns ausblenden:

Wenn Sie einen längeren Text aus verschiedenen Absätzen auf einer Webseite präsen­tieren, kann es von Nutzen sein, nur die Überschriften zu zeigen und den jeweiligen Text zu einem Kapitel nach Mausklick ein-beziehungsweise wieder auszublenden. So bleiben die Seiten übersichtlich und der Be­sucher entscheidet, was angezeigt werden soll und was nicht.
Das Problem lässt sich mit einer sehr kurzen Javascript-Funktion lösen. Im HTML-Code notieren Sie zunächst die Überschrift und rahmen diese mit einem Link ein, der die Javascript-Funktion showtime(NameDerlD) aufruft. Als Übergabewert codieren Sie den Namen des folgenden DIV-Containers, der per ID benannt wird. Innerhalb des Containers notieren Sie den Text zu der jeweiligen Über­schrift. Der DIV-Container wird per Inlinestyle mit display:none auf unsichtbar gesetzt.
Die Funktion schaltet nach Aufruf die Sicht­barkeit des Containers ein, wenn er ver­steckt ist, und wieder aus, wenn der Text zu sehen ist. Dabei wird die Eigenschaft display abgefragt und in Abhängigkeit des aktuellen Zustandes umgeschaltet.
HTML-Code:
<a href="javascript:showtime('text1') 
">Jetzt kommt mein Kommentar</a> 
<div id="text1" style="display: 
none">Hier steht ein Text </div>

Script:
function showtime(element) {
if (document.getElementById(element). 
style.display == "none")
{document.getElementById(element). 
style.display = "block";}
else {document.getElementById (element).
style.display = "none";} }
 

Fehlerhafte Links finden:

Ein Linkcheck-Onlinedienst: http://elsop.com/quick/