Tipps und Tricks Startseite

Tipps und Tricks zu Word I

Tipps und Tricks zu Word II

Tipps und Tricks zu Betriebssystem und Hardware I

Tipps und Tricks zu Betriebssystem und Hardware II

Tipps und Tricks zu Anwendungen und Internet

Tipps und Tricks zu Webdesign

Tragen Sie sich bitte noch am Ende Ihres Besuch in mein Gästebuch ein.
Bitte hier klicken.

Tipps und Tricks zu Webdesign:

(Bedenken Sie bitte, dass diese Tipps unsortiert sind - außerdem ist es immer möglich, dass diese Tipps und Tricks bei Ihnen u.U. bei Ihnen nicht funktionieren, da Windows manchmal unerklärlich reagieren kann. Bedenken Sie auch meinen Disclaimer auf meiner Startseite.)

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:

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: 
<input name=search“
type=“text“ value=““/>
<input type_’submit’ name=”go”
id=”searchGoButton”
value=”Artikel”/> 
<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="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="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="../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ß 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="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="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="../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äsentieren, 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 Besucher 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 Überschrift. Der DIV-Container wird per Inlinestyle mit display:none auf unsichtbar gesetzt.
Die Funktion schaltet nach Aufruf die Sichtbarkeit des Containers ein, wenn er versteckt 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/

zurück an den Anfang dieser Seite

klicken Sie hier, um diese Seite als Word.doc - Dokument herunterladen zu können, um sie anschließend ausdrucken zu können.

Rechtliches / Disclaimer

Nachdem Gerichte befunden haben, dass jeder, der Seiten ins Internet stellt, dem Leser erneut erklären muss, wie das Internet funktioniert, tue ich das hiermit. Natürlich habe ich mich zum Zeitpunkt der Erstellung eines Links davon überzeugt, dass dort keine unmoralischen oder illegalen Inhalte dargestellt sind. Ich kann jedoch keine Gewähr dafür übernehmen, dass sich seitdem diese Seiten nicht verändert haben oder die Domain von einer anderen Person übernommen wurde. Ich muss daher jede Verantwortung für die Inhalte der von mir gelinkten Seiten ablehnen. Der Aufruf eines Links, der nicht auf meine Seiten zeigt, geschieht auf Risiko des Lesers. Siehe dazu auch bitte den Disclaimer ganz unten auf meiner Homepagehauptseite