Adventskalender-Gadget - in 3 Minuten zum eigenen Kalender (neu 2011)
Adventskalender 01 (15 Varianten) - eigene Hintergrundgrafik
Adventskalender 01 Info: eigenes Hintergrundbild
Adventskalender 01 Info: andere Kästchengrafik
Adventskalender 01 Download Kal 01 Varianten 1 - 15
Adventskalender 01 Info: individuelle Dateinamen

Adventskalender 02 (2 Varianten) zum Download - simple Anpassung
Adventskalender 03 (3 Varianten) zum Download - simple Anpassung
Adventskalender 04 (8 Varianten) - Weihnachtsbaum mit 24 Klickbereichen
Adventskalender 05-V01 - stilisierter Tannenbaum
Adventskalender 05-V02 - stilisierter Tannenbaum
Adventskalender 06 (4 Varianten) - 24 Klickbereiche eigene Hintergrundgrafik
Adventskalender 07 (15 Varianten) - 24 Grafiken als Klickbereiche
Adventskalender 08 (3 Varianten) - Winterlandschaft, Fenster als Klickbereiche
Adventskalender 09 (3 Varianten) - Bankenvirtel, Raben als Klickbereiche
Adventskalender 10 (3 Varianten) - Winterdorf 1, Fenster als Klickbereiche
Adventskalender 11 (11 Varianten) - Winterdorf
Adventskalender 12 (5 Varianten) - Kreis eigene Hintergrundgrafik
Adventskalender 13 (2 Varianten) - Feuerwehr-Adventskalender
Adventskalender 14 (3 Varianten) - sozialkritisch eigene Hintergrundgrafik
Adventskalender 15 (4 Varianten) - Kloster Gengenbach
Adventskalender 16 (2 Varianten) - Mini-Box
Adventskalender 17 (4 Varianten) - Skigebiet
Adventskalender 18 (3 Varianten) - Gebäude Schule
Adventskalender 19 (6 Varianten) - 24 Grafiken - Bildwechsel bei MouseOver
Adventskalender 20 (6 Varianten) - Rätselkalender eigene Hintergrundgrafik

Info / Erklärungen / AddOns

Info: Einbauanleitung
Info: Tagesdateien anpassen
Info: Tagesdateien Versionen + Download
Info: PopUp-Box Tageszahl-Box formatieren
Info: PopUp-Box erweiterte Anpassungen
Info: Schneeflocken-Script anpassen
Info: Hintergrundmusik einbinden MIDI MP3
Weihnachts-Mauszeiger - eigene Mauszeiger mit CSS
Info: YouTube einbinden
Info: Verlinkung ihres Kalenders
Info: Seitenhintergrund
Info: Datum vom Webserver mit PHP
Info: Dateinamen verschlüsseln
Ihren Kalender testen
Ihre Kalender im Web - Links

Osterkalender

Rätselkalender 01 - Dateien ab bestimmten Datum öffnen (Link)
Rätselkalender 02 - Dateien ab bestimmten Datum öffnen (Imagemap)

Einführung

Bildformate für das Internet
Image einfügen, das Image-Tag, Attribute
Imagegröße zerren, Größen-Attibute
Images für das Web aufbereiten
Pixel Zauber, tolle Effekte durch falsche Bildgrößenangaben
Grafik automatisch an Fenstergröße anpassen

Hintergrundbilder

Hintergrundbild einfügen mit CSS, Grundlagen und Syntax
Seiten-Hintergrundbild einfügen mit CSS, Design und Blendschutz
Seiten-Hintergrundbild einfügen mit CSS, großflächige Grafik
Seiten-Hintergrundbild einfügen mit CSS, positionieren mit CSS
Seiten-Hintergrundbild einfügen, Grafiken kacheln
Hintergrundbild in Tabellen einfügen, Besonderheiten NS 4.x
Hintergrundbild tauschen mit CSS-Angaben
Hintergrundbild einfügen und zentrieren mit Layern

Grafiken vorladen

Images vorladen Demo
Images vorladen mit HTML oder CSS
Images vorladen mit JavaScript 01
Images vorladen mit JavaScript 02

Grafiken austauschen

Image-1 anzeigen und nach Laden von Image-2 tauschen
Image auf Klick tauschen mit JavaScript swap()
Bildvorschau 01 - bei MouseOver, Textlink, Dateiaufruf beim Anklicken
Bildvorschau 02 - Großansicht tauschen bei MouseOver
Bildvorschau 03 - Großansicht tauschen bei MouseOver + MouseOut
Bildvorschau 04 - Großansicht tauschen bei OnClick
Bildvorschau 05 - Großansicht + Vorschaugrafik tauschen bei OnClick

Grafiken anzeigen auch datums- / zeitabhängig

Bild des Monats anzeigen - 1 von 12
Monatsbild anzeigen, Grafik-URL im Array, Array-Elemente zuordnen
Tagesbild der Woche anzeigen - 1 von 7
Bild datumsabhängig anzeigen - Stichtag vorher / nachher
Grafik uhrzeitabhängig anzeigen (Tag / Nacht) - eine von zwei Grafiken
Grafik uhrzeitabhängig (Std) anzeigen (Tag / Nacht) - eine aus zwei Auswahlen
Bild zeitabhängig anzeigen / tauschen (Sekunden) - Beispiel: Ampel
Bild zeitabhängig anzeigen / tauschen (Sekunden) - Beispiel: Ampel + Zeitanzeige
Grafik und Text zum anstehenden Termin anzeigen Post-It 01
Grafik und Text zum anstehenden Termin anzeigen Post-It 02
Grafik und Text zum anstehenden Termin anzeigen Post-It 03
Text zum anstehenden anstehenden Termin anzeigen Post-It 04

Diashows Slideshows Bildauswahl

einfache Bildergalerie Auswahl durch Pulldownmenü
Bildwechsel 01-A automatisch, mit Zeitvorgabe, für 1 Grafik der Seite
Bildwechsel 01-B automatisch, mit Zeitvorgabe, für 2 Bilder
Bildwechsel 03-Link automatisch, mit Zeitvorgabe, jede Grafik ist ein Verweis
Bildwechsel 02-a autostart, feste Zeitvorgabe, Start- Stop-Buttons
Bildwechsel 02-b autostart, feste Zeitvorgabe, keine Buttons
Bildwechsel 02-c feste Zeitvorgabe, Start- Stop-Buttons

Diashow 01 A - manuell, Fotoalbum mit Formularbuttons
Diashow 01 B - manuell, Fotoalbum mit grafischen Buttons NEU
Diashow 02 - manuell oder automatisch, mit Formularbuttons
Diashow 03 - für 2 Bilder, manuell automatisch, mit Formularbuttons
Fotoshow-01 mit Text Monitorhintergrund, manuell / Zufall (ohne vorladen)
Fotoshow-0a mit Text Monitorhintergrund, manuell / Zufall (mit vorladen)
Fotoshow 02 automatisch mit 2 Texten, optionale Zufallsanzeige

Zufallsgrafiken Zufallsfotos

Zufallsgrafik / Zufallsfoto anzeigen
Startgrafik durch Zufallsgrafik / Zufallsfoto austauschen
Zufallsbanner / -bild mit Link, Chancenvorgabe in %
Zufallsbanner / -bild mit Link
Ein Zufallsbanner / -bild anzeigen, Grafik als Link, externe JS-Datei
Zwei Zufallsbanner / -bilder anzeigen, Grafiken als Link
Zufallsbild mit Farbvorgabe für Beschreibungstext
Zufallsbild aus zwei Auswahlen Tag / Nacht
Zufallsbild + farbiger Text (simpel)

PopUp-Window in Bildgröße

PopUp-Window bei MouseOver
PopUp-Window 1 - für ein Image passend öffnen mit Titeltext
PopUp-Window 2 - für ein Image passend öffnen ohne Titeltext
PopUp-Window 3 - kleiner als Bildgröße (mit Scrollbars)
PopUp-Window 4 - für ein Image passend öffnen, Nachricht bei Click


Fotopräsentation + Vorschaubilder

Fotopräsentation 01 - Beispiel mit Frames
Fotopräsentation 02 - Beispiel mit PopUp-Windows
Fotopräsentation 03 - Beispiel mit Frames 2 Navigationen
Fotopräsentation 04 - Vorschaubild fließende Darstellung CSS
Fotopräsentation 05 - Vorschaubild fließende Darstellung CSS - Film
Fotopräsentation 06 - Vorschaubild fließende Darstellung CSS - Dia
Fotopräsentation 07 - Vorschaubild fließende Darstellung CSS - Monitor
Fotopräsentation 08 - Vorschaubild fließende Darstellung CSS - Rahmen
Fotopräsentation 09 - Vorschaubild fließende Darstellung CSS - Briefmarke
Fotopräsentation 09 - Vorschaubild fließende Darstellung CSS - Briefmarke
Vorschaubild Hintergrund-Grafik 01 - Monitor, Dia, Film
Vorschaubild Hintergrund-Grafik 02 - Monitor, Dia, Film
Bildhintergrund 1, Vorschau auf Filmhintergrund
Bildhintergrund 1, Vorschau auf Monitorhintergrund

diverse

bedingter Schutz vor Download / Speichern 01
bedingter Schutz vor Download / Speichern 02
Bildansicht umschalten während des Anklickens
Bildrandfarbe mit CSS
Navigation Seiten fortlaufende Nummern in Dateinamen

Einführung

Seite 01)  Einstieg CSS-Formatierung
Seite 02)  Erklärung CSS-Deklaration - CSS-Anweisungen notieren
Seite 02a)  Bindeglieder zwischen Formatangaben und Elementen im Body
Seite 03)  Erklärung CSS-Anweisungen einbinden
Seite 04)  Erklärung Externe CSS-Datei - CSS-Anweisungen auslagern
Seite 05)  Erklärung CSS Inline-Anweisungen
Seite 06)  Kaskadierung - Vererbung und abgestuften Rangordnung
Seite 07)  Texte formatieren mit CSS
Seite 07a)  Schriften für Webseiten - Schriftfamilien
Seite 08)  Kurzreferenz - Eigenschaften + Werte
Seite 09)  Margin + Padding / Ausrichtung + Abstände
Seite 10)  Maßeinheiten für Schriftgrade -  % px pt pc em ex mm cm in
Seite 11)  vertikale Textausrichtung an Elementen
Seite 12)  eigene CSS-Klassen
Seite 13)  Schriftgrößen beinahe barrierefrei
Seite 14)  Kurzschreibweisen bei CSS-Notierungen
Seite 15)  CSS-Anweisungen gruppieren (gleiche Anweisungen für Selektoren)

Fehlerverhalten - Fehler in der Deklaration
Fehlerverhalten - relative Schriftgrößen
Fehlerverhalten - Fehlersuche Margin + Padding
Fehlerverhalten - CSS Zellenrand Cellspacing

CSS-Kurzreferenz der gängigen Anweisungen (Druckversion)

Elemente gestalten und formatieren

Formatierung von horizontalen Linien
Ornament / grafisches Symbol als Trenner zwischen Textblöcken
Textlinks ohne Unterstrich, Linkfarbe festlegen
Angepasste, farbige Bildlaufleisten / Scrollbar (nicht für NS 4.x)
Hintergrundbild einfügen mit CSS, Design und Blendschutz
Hintergrundbild einfügen mit CSS, großflächige Grafik
Hintergrundbild einfügen mit CSS, positionieren mit CSS
Hintergrundbild einfügen, Grafiken kacheln
Seitenhintergrund mit CSS-Anweisungen austauschen
transparente Grafik optisch größer

Seite formatieren mit CSS für Bildschirm + Drucker

Drucken Druckversion mit CSS (einblenden ausblenden) screen / print
Drucken mit CSS - Grundlagen
01 Basisbeispiel mit 2 separaten HTML-Dateien
02 Beispiel mit CSS-Anweisungen @media screen + @media print
03 Beispiel mit CSS-Anweisungen @media screen + @media print (Faxvorlage)
04 Beispiel mit CSS-Anweisungen @media screen + @media print (Formularfelder)

Formular-Elemente gestalten und formatieren

Formularfelder mit CSS formatieren - Input
Formularelemente mit CSS formatieren - Input Textarea
Formularelemente mit CSS formatieren - Beispielformular
Selectauswahl Pulldownmenü formatieren
Formularbuttons als Grafik
Formularbuttons mit CSS formatieren 01
Formularbuttons mit CSS formatieren 02
Aufzählungen / Listelemente mit eigenen Grafiken
Bildpositionierung Ausrichtung + Abstände
Bildrandfarbe für Grafiken mit CSS
1) Tabellenrand (außen) gestalten mit CSS-Angaben
2) Tabellen und Zellenrand gestalten mit CSS-Angaben
3) Tabellzellenrand gestalten mit CSS-Angaben
4) HTML-Elemente mit Rand gestalten mit CSS-Angaben

Beispiele - CSS Examples

Bilderrahmen, Border mit CSS, Rahmentyp + Farbe
Textblock + Grafik anordnen (Eyecatcher)
Textboxen - Textspalten mit CSS, Beispiel 01
Textboxen - Textspalten mit CSS, Beispiel 02
Eigene Mauszeiger / Systemmauszeiger zuweisen
Eigene Mauszeiger mit CSS bestimmen
Textlink mit Hintergrundbutton / Hintergrundgrafik CSS eingebunden
Textgröße in Punkt oder Pixel bestimmen?
Einen Schlagschatten mit CSS-Angaben generieren 01
Einen Schlagschatten mit CSS-Angaben generieren 02
01 Positionieren von Seitenelementen mit CSS-Angaben
02 Texte positionieren über einer Grafik mit CSS-Angaben
03 Seitenelement oder Seite horizontal zentrieren mit CSS
verschiedene Hintergrundfarben mit Unterklassen bestimmen
MouseOver-Effekt mit CSS-Randangaben
Menüleiste mit CSS - Zuordnung der CSS-Formatierung mit ID
Browserprüfung auf CSS-Fähigkeit
CSS-Anweisungen - Browserabhängig eine externe Datei auswählen

Beispiele - CSS-Vorlagen

Download Download Beispiel CSS-Vorlage 02 externe CSS-Dateien
Download Beispiel CSS-Vorlage 01
Download Vorlagen externer CSS-Dateien mit Vorschau
Download Beispiel CSS-Vorlage 02 media screen / print
Download Beispiel CSS-Vorlage 03 media screen / print
Download Beispiel CSS-Vorlage 04 media screen / print

Beispiele - CSS-Homepage-Vorlagen

Download Beispiel CSS-Homepage-Vorlage 08
Download Beispiel CSS-Homepage-Vorlage 09
Download Beispiel CSS-Homepage-Vorlage 10
Download Beispiel CSS-Homepage-Vorlage 11
Download Beispiel CSS-Homepage-Vorlage 13

Datum 01 - Basiswissen Datumsobjekt Date()
Datum 02 - Übersicht Datumsobjekt Date()

Code-Schnipsel

Jahreszahl aus dem Datum der Systemzeit ermitteln
Tag des Monats aus dem Datum der Systemzeit ermitteln
Tag der Woche aus dem Datum der Systemzeit ermitteln
Stundenwert aus dem Datum der Systemzeit ermitteln
Minutenwert aus dem Datum der Systemzeit ermitteln
Sekundenwert aus dem Datum der Systemzeit ermitteln
Wochentag als Text aus dem Datum der Systemzeit generieren
Monatsname als Text ermitteln
Schaltjahr-Überprüfung (1/0)
aktuelle Kalenderwoche aus dem Datum der Systemzeit ermitteln
erster Tag des aktuellen Monats als Text (Wochentag)
Datum des 4. Advent ermitteln
Datum des 1. Advent ermitteln
Wochentag als Text für ein fixes Datum ermitteln (z.B. 1. Mai)
Datum des Buß und Bettag ermitteln
Datum für die Umstellung auf die Sommerzeit ermitteln
Datum für die Umstellung auf die Winterzeit ermitteln

Datumsanzeigen

Datum als Text, 6 Versionen in einem Script
Mini-Kalenderblatt 01 - 60 x 70 Pixel, Datumsanzeige, Tag + Monat
Mini-Kalenderblatt 01-A - 60 x 70 Pixel, Datumsanzeige Jahr, Monat, Tag
Mini-Kalenderblatt 01-B - 60 x 70 Pixel, eigene feste Termine
Mini-Kalenderblatt 02 als Datumsanzeige für ihre Seite
Mini-Kalenderblatt 03 als Datumsanzeige + Begrüßungstext (uhrzeitabhängig)
Errechnen des Wochentags
Errechnen der aktuellen Jahreszahl - für Fließtext
Datum-Zeit, Wechsel bei MouseOver, im (unsichtbaren) Formularfeld

datumsabhängige Anzeige

Text (Tipp) des Tages anzeigen, 1 - 31
Text des Tages anzeigen, 1 von 365 Namenstagsliste
3 datumsabhängige Texte: vor - während nach (Start- Enddatum)
7 datumsabhängige Texte: vor - während nach (Start- Enddatum)
datumsabhängige Texte: vor - während nach (Start- Enddatum)
Terminliste 01 - Ferienbeginn in X Tagen, ausblenden alter Termine
Terminliste 02 - Terminliste noch xxx Tage, ausblenden + markieren
Terminliste 03 - (Kalenderjahr) Tageszähler, optional ausblenden
Terminliste 04 - (Kalenderjahr) Tageszähler, optional ausblenden
Terminliste 05 - (jahresübergreifend) Tageszähler, optional ausblenden
Terminliste 06 - (jahresübergreifend) Tageszähler, mit 4 Anzeige-Optionen
Terminliste 07 - (jahresübergreifend) schlicht monatlich gruppiert
Terminliste 08 - Liste der Termine mit Grafik - jahresübergreifend
Terminliste 10 - Mini-Kalenderblatt, Counter und Text
Berechnung periodisch wiederkehrender Ereignisse
Berechnung periodisch wiederkehrender Ereignisse - Beispiel Mondphasen
Bild des Monats - 1 von 12
Tagesbild der Woche anzeigen - 1 von 7
Eine von zwei Grafiken anzeigen, abhängig vom Datum / Stichtag

datumsabhängige Umleitungen / Weichen

Tagesdatei des Monats aufrufen, 1 von 31
Aufruf der Wochentagsdatei, Mo. bis So. 1 von 7
Monatsdatei des Jahres aufrufen, 1 von 12
an einem bestimmten Datum andere Datei aufrufen
3 Umleitungen vor - während nach einer Zeitspanne (Start- Enddatum)
Link des Tages (1 von 7), abhängig vom Wochentag
Tageslink des Monats (1 von 31)
Tageslink des Monats (1 von 31) mit opt. Banner
Link des Monats (1 von 12) mit opt. Banner

Berechnungen

Zwei Datumseingaben logisch prüfen (Anreise Abreise)
Errechnen des Wochentags aus einem Datum
Berechnung des westlichen + chin. Sternzeichens
aktuelles Sternzeichen anzeigen mit Grafik
Sternzeichen berechnen 02 - Tierkreiszeichen + Bildanzeige
Altersberechnung in Jahren Monaten Wochen Tagen Stunden Minuten Sekunden
runde Geburtstage berechnen, 1000 Tage, 2000 Tage, ...
Ermitteln von Freitag dem 13.
Datumseingabe logisch prüfen 01, gültige Eingabe?
Datumseingabe logisch prüfen 02, gültige Eingabe?

letztes Update

Anzeige der letzten Bearbeitung, last Update Datum + Tage
Anzeige der letzten Bearbeitung: Datum TT.MM.JJ
Anzeige der letzten Bearbeitung: Datum Uhrzeit TT.MM.JJ  SS:MM Uhr
Anzeige der letzten Bearbeitung: Text + Datum Uhrzeit TT.MM.JJ  SS:MM Uhr


Counter

dynamischer UpDownCounter 01, 6 Text-Ausgabeformen 3 Textmodule
dynamischer UpDownCounter 02, 6 Text-Ausgabeformen 1 Textmodul
dynamischer UpDownCounter 03, Tageszahlen seit Start + Tageszahl bis Ziel
dynamischer UpDownCounter Tage bis / seit Zieldatum, Bezug auf aktuelles Jahr
dynamischer grafischer Counter 01 zur Fußball WM 2010
dynamischer grafischer Counter 02 zur Fußball WM 2010
dynamischer grafischer Counter - Stundenzähler
dynam. graf. Event-Counter 01 (up down) +/- 999 Tage mit Grafikhintergrund
dynamischer grafischer Counter 01 zur Fußball EM 2008
dynamischer grafischer Counter 02 zur Fußball EM 2008
UpDown-Counter Uhr - grafische Ziffern + freie Texte
Event-Counter 300 - grafischer Up-Down-Counter
UpCounter Errechnen der Anzahl von Tagen seit einem Startdatum
DownCounter Errechnen der Anzahl von Tagen bis zu einem Zieldatum
dynamischer DownCounter, Anzahl von Tagen bis Tag + Monat innerhalb 365 Tage
dynamischer grafischer Up- Downcounter 03-01 Anzeige: TTT:SS:MM:SS
dynamischer grafischer Up- Downcounter 03-02 Anzeige: TTT:SS:MM:SS
dynamischer grafischer Up- Downcounter 03-03 Anzeige: TTT:SS:MM:SS
dynamischer grafischer Up- Downcounter 03-04 Anzeige: TTT:SS:MM:SS - UHR
TGIF Weekendcounter - Reststunden, Minuten und Text

Kalender

Monatskalender 01 nach deutschem Standard
Monatskalender 02-A für aktuellen Monat
Monatskalender 02-B für mehrere Monate ± 12 vom aktuellen Monat
Monatskalender 03 nach deutschem Standard

Textrotation 01 - Dynamische Textanzeige zeilenweise Darstellung
Textrotation 02 - Dynamische Textanzeige (Sprechblase) automatisch
Textrotation 03 - Dynamische Textanzeige (Sprechblase) automatisch od. manuell
Floating Box 01 - Layer verbleibt an fester Position oben: Titelzeile Tabellenüberschrift
Floating Box 02 - Layer verbleibt an fester Position unten rechts: Nach-Oben-Link
Anzeigetafel Text 01 - Flipp-Buchstaben, Beispiel Flughafenanzeige
Drag and Drop - Objekte mit der Maus verschieben
Drag and Drop - Objekte mit der Maus verschieben - Beispiel Lesezeichen
InfoBox 01 - PopUp bei Mouseover
InfoBox 01 - Variante A - Formatierung
InfoBox 01 - Variante B - Formatierung
InfoBox 01 - Variante C - Formatierung
InfoBox 02 - PopUp-Box bei Mouseover
InfoBox 02 - Demo 01 PopUp-Box Formatierung der Box
InfoBox 02 - Demo 02 PopUp-Box eingebundene Grafik und Link
InfoBox 02 - Demo 03 PopUp-Box an einer Image-Map (verweissensitive Grafik)
InfoBox 02 - Demo 04 PopUp-Box zur Bildanzeige (Großansicht)
Textticker 01 - zeilen- und buchstabenweise Anzeige
Dynamische Überschriften-NewsBox für längere Texte
Dynamische Textfarbe Lauftext buchstabenweise Farbänderung
Hintergrundbild plus Text / Inhalt auf separaten Layern
Objekte über die HTML-Seite scrollen
Objekte mit dem Mauszeiger bewegen
Fang mich - Objekt bewegen - springt vom Mauszeiger weg
Valentinskarte - Herzen schweben über die Webseite
Schneefall für ihre HTML-Seite

modifizierte Fremdscripte

Billardkugel - Objekt prallt an der Fensterbegrenzung ab
Luftblasen - Objekte an der Maus steigen nach oben
Dynamischer Textscroller im Rahmen (HTML-Code erlaubt)

Diese Beispiele werden noch überarbeitet (Anpassung an neue Browser)

Dynamischer Text-Zoom aus dem Hintergrund
Floating Image: Beispiel Ostern
fading Text / Link

Planung einer Webseite 01 - Ziel der Webseite feststellen und erste Überlegungen
Planung einer Webseite 01 - Entwurf, Seitenaufteilung und Menüführung
Planung einer Webseite 01 - vorausschauende Vorgehensweise bei der Erstellung
Planung des Menüs - Menüsystem Erklärung
Impressum einer Webseite
HTML-Editor als Freeware: Phase5 und Firstpage2000
HTML-Referenz: SELFHTML Downloadadresse
ERROR 404 - eigene Fehlerseite
Eigenes Favicon in der Adressleiste des Browsers
Linkliste 01 für die Webseite Grafik + Text
Linkliste 02 Beispiel "meine Internet Surftipps" Web-Developer
Linkliste 03 Eigene Browser-Startseite herstellen
Linkliste 04 gruppierte Liste mit Einblendung der Beschreibung
Linkliste 06 CSS-formatiert Grafik + Text NEU
Web-Spionage das durchsichtige Internet
Drucken Druckversion mit CSS (einblenden ausblenden) screen / print
Druckoption anbieten mit Formular-Button oder Link, Seite drucken
Drucken automatisch beim Laden der Seite oder mit Link
Druckversion 01 Beispiel mit 2 HTML-Dateien (simpel)
Sitemap als Crawlerhife (Suchmaschinen), auch in einer Framesetdatei
Sitemap 01, Sitemap als Liste CSS-formatiert Grafiken bestimmen
Sitemap 01, Beispiel 01 Sitemap als Liste mit eigenen Grafiken, Anwendungsbeispiel
Sitemap 01, Beispiel 02 Sitemap als Liste mit eigenen Grafiken, Anwendungsbeispiel
Sitemap 01, Beispiel 03 Sitemap als Liste mit eigenen Grafiken, Anwendungsbeispiel
Sitemap 02, Sitemap als Liste <ul> Einrückung mit CSS
Sitemap 02, Beispiel 01 Sitemap als Liste, Einrückung mit CSS, eigene Grafiken
Sitemap 02, Beispiel 02 Sitemap als Liste, Einrückung mit CSS, eigene Grafiken
Sitemap 02, Beispiel 03 Sitemap als Liste, Einrückung mit CSS, eigene Grafiken
Sitemap 03, Sitemap-Elemente in Containern, erweiterte Info Erläuterungen
Sitemap 03, Sitemap-Elemente in Containern, erweiterte Info Erläuterungen, Beispiel 01
Sitemap 03, Sitemap-Elemente in Containern, erweiterte Info Erläuterungen, Beispiel 02
Sitemap 04, Sitemap mit Grafiken als Quick-Navigation
Sitemap 05, Sitemap als verschachtelte Liste <ul> mit eigenen Grafiken
Inhalte zentrieren mit Hilfe einer Tabelle
Quellcode anzeigen per Link oder automatisch
Systeminformationen mit JavaScript auslesen und anzeigen
Bildschirmauflösung auslesen und anzeigen
Bildschirmauflösung anzeigen und Alternativ-Links
Weiterleiten mittels META-Tag refresh
Preloader-Info anzeigen während des Ladevorgangs
Morse-Code, Text in Morsezeichen umwandeln, Darstellung als Grafik
Seiten in der Bildschirmmitte zentrieren
Statistik 01 horizontale Grafik mit JavaScript
Statistik 02 horizontale Grafik + Skala mit JavaScript
Statistik 03 vertikale Balkengrafik mit Legende
Statistik 04 vertikale Balkengrafik mit Legende
Ordnerinhalte anzeigen - Ordner ermitteln
Objekte + Seitenelemente ein- / ausblenden mit CSS Version 01
Objekte + Seitenelemente ein- / ausblenden mit CSS Version 02
Dateien erst am festgelegten Datum öffnen - Osterkalender (Textlinks)
Dateien erst am festgelegten Datum öffnen - Osterkalender (ImageMap)

Download Homepagevorlagen mit Frames + Beispiele

Download Vorlage F01 + Demo, 3 verschachtelte Frames
Download Vorlage F02 + Demo, 2 von 4 Frames zentrieren
Download Vorlage F03 + Demo, 2 Frameinhalte ändern, Pull-Down-Menü
Download Vorlage F04 + Demo, 3 Frames, CSS-Menü, Gipfelstürmer
Download Vorlage F05 + Demo, 3 Frames, mehrere Menüs, Ponyhof
Download Vorlage F08 + Demo, 3 Frames, mehrere Menüs, Schützenverein
Download Vorlage F09 + Demo, 3 od. 4 Frames, farbcodiert, variable Breite
Download Vorlage F11 + Pseudo-Aufklappen (basierend auf Menü Bsp11)

Download Homepagevorlagen ohne Frames + Beispiele

Download Webseitenvorlage H01 - Visitenkarte zentrierte Darstellung
Download Webseitenvorlage H02 - 5 Seiten
Download Webseitenvorlage H03 - Haupt- + Untermenü
Download Webseitenvorlage H04 - CSS-Positionierung vor Titel-Grafik
Download Webseitenvorlage H05 - textbasierte Seiten Blättern-Navigation
Download Webseitenvorlage H06 - Obsthof, 4 Tabellen
Download Webseitenvorlage H07 - Online-Bewerbung / Visitenkarte
Download Webseitenvorlage H09 - für 970 Pixel Breite, Haupt- + Untermenü
Download Webseitenvorlage H11 - Ferienwohnung Beispiel
Download Webseitenvorlage H15 - 80% Breite, 20 Farbvarianten

Beispiele - CSS-Homepage-Vorlagen

Download Beispiel CSS-Homepage-Vorlage 02 externe CSS-Dateien neu
Download Beispiel CSS-Homepage-Vorlage 08
Download Beispiel CSS-Homepage-Vorlage 09
Download Beispiel CSS-Homepage-Vorlage 10
Download Beispiel CSS-Homepage-Vorlage 11
Download Beispiel CSS-Homepage-Vorlage 13

Downloads + Hilfen

HTML - Referenzlisten Hilfen Downloads
CSS - Referenzlisten Hilfen Downloads
JavaScript - Referenzlisten Hilfen Downloads
CSS Vorlagen - C01 Stylesheet Vorlage
CSS Vorlagen - C02 externe Stylesheetdatei
CSS Vorlagen - C03 Druckversion Bildschirmversion
CSS Vorlagen - C04 Druckversion Bildschirmversion
CSS Vorlagen - C05 Druckversion Bildschirmversion
Tools - Lineale (Grafiken)
Tools - farbpalette für den Editor Phase 5

Einschränkungen bei der Verwendung von Email-Links
Email-Link mit Betreff- und Inhalt-Vorgabe
Emails adressieren AN: CC: BCC: Mehrfachempfänger
Höflichkeit und Benimm-Regeln
Gültige Email Adressen nach RFC 822
Emails - n/c in der Betreffzeile
SPAM Email-Spider - Grundwissen
SPAM-Schutz - (Text)darstellung von Email-adresse
Email-Adressen vor Spidern verstecken, Textlink
Email-Adressen vor Spidern verstecken, Script für Mehrfachverwendung
Email-Adressen vor Spidern verstecken, Imagelink
Email-Adressen vor Spidern verstecken, MouseOver + Mehrfachverwendung
Email-Adressen verschlüsseln UNI-Code
Email-Adresse zum Kopieren anbieten

Notation der Farbangaben in HTML-Dokumenten
Erklärungsversuch :-) RGB-Farbsystem (PDF-download)
Erklärungsversuch :-) hexadezimale Farbwerte in HTML-Dokumenten
Farbnamen in HTML-Dokumenten
Vergleichstabelle hexadezimale Werte und Farbnamen
Websichere Farben verwenden
Web-Design: Tipps für die Farbwahl, Abstufungen von Farbwerten

Seiten-Hintergrundfarbe

Seiten-Hintergrundfarbe ändern mit Klick auf einen Verweis
Seiten-Hintergrundfarbe ändern bei MouseOver
Seiten-Hintergrundfarbe ändern-A - Auswahl im Pulldownmenü
Seiten-Hintergrundfarbe ändern-B - Auswahl im Pulldownmenü
Seiten-Hintergrundfarbe mit Radio-Boxen ändern
Seiten-Hintergrundfarbe manuell auswählen (Farbwähler)

Hintergrundfarbe

Tabellenzellen-Farbwechsel bei MouseOver
Textbox-Hintergrundfarbe ändern mit Mouse-Event
Hintergrund- und Textfarbe mit ImageMap ändern

Im Body-Tag: Angaben Ränder und Abstände
Unschöne Darstellung durch Pseudo-Leerzeichen
Seitenlayout, Berechnen des verfügbaren Anzeige-Bereichs
Seitenlayout, warum sehe ich Scrollbars ?
Seite springt horizontal
Probleme mit PopUp-Windows
Grafiken Randfarbe bei Verweisen, Konflikt CSS / Body-Attribute
CSS Schriftgrößen abhängig von Windows-Einstellungen
Fehler in der Notation von CSS-Anweisungen finden
Schriftgröße - Browser-Bugs bei CSS-Anweisungen
CSS margin / padding - unterschiedliche Ergebnisse im Browser
Darstellungsverhalten Grafiken Formatierung Positionierung CSS
Tabellen Cellspacing, <tr>-Hintergrundfarbe NS4.x
Tabellenhöhe 100%, Dokumenttyp-Angabe im Head
Tabellenprobleme 01 , Abstände, Ränder Positionierung
Tabellenprobleme 02 , keine Anzeige, verzögerte Anzeige
Tabellenprobleme 03 , Platzeinbußen durch transprentes Image
Tabellenprobleme 04 , absolute Breite falsch berechnet
background (alte Browser)

Grundsätzliches zum Formulareinsatz in HTML-Dokumenten Erklärung
Funktionseinschränkungen beim Formulareinsatz Erklärung
Formulare Grundgerüst und <form>-Tag Attribute
Formulare Elemente eines Formulars
Werteübergabe in Formularen über Name
Werteübergabe in Formularen über ID
Basis-Formular - Erklärung 01 Aufbau
Basis-Formular - Erklärung 02 Aufbau + Prüfung der Email-adresse
Basis-Schutz vor Email-Spidern integrieren - JavaScript schreibt <form>-Tag
CAPTCHA-Schutz in Formularen - Basiswissen

Code-Schnipsel

Eingabemarke / Cursor automatisch in das erste Eingabefeld setzen
Eingabemarke / Cursor automatisch in ein bestimmtes Eingabefeld setzen
Alle Checkboxen auswählen
Empfänger Email-adresse Spiderschutz
Email-Adresse im Formularfeld zum Kopieren anbieten
Formularvorlage, Empfängerauswahl im Pulldownmenü + inaktiver Sende-Button
Markieren des Textfeld-Inhalts

Vorlagen

Formularvorlage 01-A mit Prüfung der Eingaben - Basisschutz SPAM + CAPTCHA
Formularvorlage 01-B mit Prüfung der Eingaben - Basisschutz SPAM + CAPTCHA
Formularvorlage 02, Anforderung Info per Email - Basisschutz SPAM
Formularvorlage 03, Anforderung Info per Nachname - Basisschutz SPAM
Formularvorlage 04, Antrag einer Mitgliedschaft
Formularvorlage 05, Anmeldung zum Turnier
Formularvorlage 06, Kombination Spiderschutz + Bestätigung
Formularvorlage 07, Fehler melden - Basisschutz SPAM + CAPTCHA
Formularvorlage 08, Bestellung 1 Artikel - Basisschutz Spam + Captcha

Formular-Module

CAPTCHA 01 - mathematisches Captcha
CAPTCHA 02-A - grafisches Semi-Captcha
Caps Lock on? Überwachung der Feststelltaste
Modul M2 Länderwahl
Modul M3 Geburtstag
Modul M6 aktuelles Datum
Zwei Datumseingaben logisch prüfen (Anreise Abreise)
Eingabefilter gültige Email-adressen
Password Verifizierung
Login 01
Login 02

CSS-Formatierungen für Formularelemente

Formularfelder mit CSS formatieren - Input
Formularelemente mit CSS formatieren - Input Textarea
Formularelemente mit CSS formatieren - Beispielformular
Selectauswahl Pulldownmenü formatieren
Formularbuttons mit CSS formatieren 01
Formularbuttons mit CSS formatieren 02

Formularbuttons

alternativer Text bei MouseOver
Submitbutton als Grafik oder CSS formatiert
Email-Button zum Aufruf des Clients mit minimalem Spiderschutz
Code: Formularbutton öffnet Email-Client
Code: Formularbutton öffnet HTML-Datei
Code: Formularbutton öffnet Quelltextansicht
Code: Formularbutton öffnet PopUp-Window

Eingabefilter

Datumseingabe logisch prüfen 01, gültige Eingabe?
Datumseingabe logisch prüfen 02, gültige Eingabe?
Eingabe der Email-adresse logisch prüfen, gültige Eingabe?
Eingabe logisch prüfen, Buchstaben
Eingabe logisch prüfen, Ziffern
Eingabe logisch prüfen, Buchstaben + Ziffern
Eingabe logisch prüfen, mathematischer Wert
Eingabefilter gültige Eingaben selbst festlegen

Einführung + Erklärungen

Erklärung Frameset und Frames 01 Spalten Zeilen Breite
Erklärung Frameset und Frames 02 Framenamen + Inhalte
Erklärung Frameset und Frames 03 Rand Margin Abstand
Erklärung Frameset und Frames 04 Scrollbars Resize
Erklärung Frameset und Frames 05 verschachtelte Frames - Beispiel + Download

Download Homepagevorlagen mit Frames + Beispiele

Download Vorlage 1 + Demo, 3 verschachtelte Frames
Download Vorlage 2 + Demo, 2 von 4 Frames zentrieren
Download Vorlage 3 + Demo, 2 Frameinhalte ändern, Pull-Down-Menü
Download Vorlage 4 + Demo, 3 Frames, CSS-Menü, Gipfelstürmer
Download Vorlage 5 + Demo, 3 Frames, mehrere Menüs, Ponyhof
Download Vorlage 9 + Demo, 3/4 Frames, farbcodierte Seiten, variable Breite

Prüfungen

Anzahl der Frames überprüfen und entsprechend reagieren
Nur im bestimmten (eigenen) Frameset anzeigen, Framename überprüfen
Frame escape, automatische Umleitung
Datei nur im Frameset aufrufen mit alert-Meldung
Frame-Escape manuell, Anzeige im Frameset verhindern, Escapeoption mit Button
Frame-Escape manuell, Anzeige nur im eigenen Frameset Escapeoption mit Button

Beispiele 1

Sinnvolle Nutzung des Noframes-Bereichs
Ladereihenfolge für Dateien im Frameset erzwingen
2 Frames in der Bildschirmmitte zentrieren
den anderen Frame drucken

Frameinhalte ändern

Targetangaben im Link
2 Frameinhalte gleichzeitig ändern, Funktion nutzt Framenamen
2 Frameinhalte gleichzeitig ändern, Funktion nutzt Framenummer
3 Frameinhalte gleichzeitig ändern, Script benutzt Framenamen
2 Frameinhalte gleichzeitig ändern, Auswahl mit Pulldownmenü
Beim Laden einer Datei im Frame A den Frameinhalt B automatisch ändern
Eigene Datei (Hinweis) und gelinkte Seite im Frameset anzeigen

2 Frames gleichzeitig ändern mit Pulldownmenü
Dateianzeige im höchsten Frame (top-frame) - Pull-Down-Menü
Dateianzeige im Frame eigener Wahl - Pull-Down-Menü
Kombi: Hintergrundfarbe der Menüdatei + Datei im anderen Frame - Pull-Down-Menü

HTML Grundgerüst - 6 Tags für eine Seite
erste Schritte mit HTML, PDF-Datei zum Download
Sonderzeichen in HTML-Dokumenten einfügen - Notation von Sonderzeichen
Liste HTML-Code / ASCII für Sonderzeichen Lj ® ¼
Liste HTML-Code für benannte Sonderzeichen Ο Θ ∑ (Liste als PDF zum Download)
Kompatiblität der HTML-Tags für Browser
Euro-Zeichen in HTML-Dokumenten €
farbige Bullets mit Sonderzeichen
META-Tags in HTML-Dokumenten
Bilderrahmen durch 5 verschachtelte Tabellen (+Bsp. CSS)
simples Balkendiagram - kurz und schmerzlos
Balkendiagram-Script Version 01-A (Seitenstatistik V1)
erweitertes Balkendiagram-Script Version 01-B (Seitenstatistik V2)

Download Homepagevorlagen ohne Frames + Beispiele

Download Homepagebeispiel 01 herunterladen
Download Homepagebeispiel 02 herunterladen
Download Homepagebeispiel 03 herunterladen
Download Homepagebeispiel 04 herunterladen
Download Online-Bewerbung Homepagebeispiel 07 herunterladen
Download Online-Bewerbung Homepagebeispiel 09 Beispiel für 960Pixel

Einführung und Erklärungen

01 JavaScript: Einführung JavaScript
02 JavaScript: JavaScript-Bereich deklarieren
03 JavaScript: JavaScript-Anweisungen notieren
04 JavaScript: JavaScript-Kommentare
05 JavaScript: JavaScript-Funktionen
06 JavaScript: JavaScript-Funktionsaufruf
Scripte einbinden: Grundlagen und Erklärungen
Scripte einbinden: JavaScript im BODY-Bereich eines HTML-Dokuments
Scripte einbinden: Ein JavaScript im HEAD-Bereich (Funktion)
Scripte einbinden: JavaScript in eine externe Datei auslagern
Seitenelemente in eine extrene JavaScript-Datei auslagern

Eventhandler / MouseOver Rollover-Buttons

Übersicht Einsatzbereiche
Erklärung Eventhandler in Aktion
MouseOver-Script für 1 Image
MouseOver-Script für 2 Images gleichzeitig
Mouseover / Rollover-Menü zur leichten Anpassung
MouseOver mit mehreren Links für das gleiche Objekt/Image (Deutschlandkarte)
onMouseDown Eventhandler

Erklärungsversuche MouseOver Rollover-Buttons

Erklärung & Anleitung: Bildwechsel bei MouseOver (14-seitige Erklärung)
Erklärung - Anleitung: MouseOver-Technik 2, Bildwechsel bei MouseOver
MouseOver schnell und simpel - Verstanden in nur 5 Min, wetten?


Frames

Frameinhalt ändern mit onLoad()
2 Frameinhalte gleichzeitig ändern, Script benutzt Framenamen
2 Frameinhalte gleichzeitig ändern, Script benutzt Framenummer
Frameinhalt ändern mit JavaScript, Script benutzt Framenamen
2 Frameinhalte gleichzeitig ändern mit History-Funktion

Arrays

Arrays - Grundlagenwissen und Erklärungen - Seite 01
Arrays - Grundlagenwissen und Erklärungen - Seite 02
Arrays - Grundlagenwissen und Vorteile beim Einsatz
Array-Elemente zuordnen, Monatsbild aus Array ermitteln
wertabhängig einem Array die Grafik-URL entnehmen
Array-Elemente zuordnen, Text in Morsecode , Darstellung im PopUp-Window

Grafiken vorladen

Images vorladen mit JavaScript 01
Images vorladen mit JavaScript 02

JS-Beispiele

Zuletzt geklickte Auswahl, Button aktiv anzeigen
Textgestaltung, Farbverlauf in Regenbogenfarben
JavaScript schreibt das Ergebnis in eine Tabelle
gleichzeitiger Aufruf mehrerer Funktionen
URI der Seite automatisch anzeigen Breadcrumb
Bildschirmauflösung-Warnung mittels Alert-Box
Bildschirmauflösung Umleitung
Fensterhöhe ermitteln + höhenangepasste Inhalte einfügen
Bookmark Lesezeichen einfügen Script
IP-Adresse anzeigen
Element farblich hervorheben (aktueller Monat)

Zufallszahlen

1 Zufallszahl ermitteln zwischen 0 und oberen Limit, z.B. zwischen 0 und 31
1 Zufallszahl ermitteln zwischen X und Y, z.B. -45 und 83
mehrere Zufallszahlen ermitteln zwischen X und Y, z.B. -45 und 83
mehrere Zufallszahlen ermitteln (sortiert keine Doppelnennungen)

Operationen

Zahlenwerte runden - Math.round() Math.floor()
Eine Zahl in Faktoren zerlegen
Prüfung des Ergebnisses einer Division - endlich / unendlich
Tausender Trennung z.B. 45.216.456.127
Mengenlehre, Schnittmenge ermitteln

Berechnungen

Bundesjugendspiele Berechnung der Punktzahlen
Proportionale Gleichung a/b = c/d , jede Position für X möglich
Spareinlagen Berechnung, Zinsertrag, Endbetrag, Einlagen
Kraftstoffverbrauch Liter auf 100, Meilen pro Gallone (auch als Umrechner)
Quadratwurzel 2er Potenz
Kreisumfang / Radius berechnen (Erfassung mit 'GetElementById')
Gesamtpreis Berechnung 01, schnelles update ohne Buttons
Gesamtpreis Berechnung 02, Vorgabe der Einzelpreise + Formatierung
Gesamtpreis Berechnung 03, zusätzlich Stückzahlberechnung + Formatierung
Trigonometrische Tabelle

Umrechner

Zahlensysteme Umrechner, alle zur Basis bis 16
3 dezimale Farbwerte in hexadezimalen RGB-Wert umrechnen
Umrechnung Fahrenheit - Celsius und umgekehrt
Umrechnung Lichtjahre / Meilen

Zufallszahl

1 Zufallszahl ermitteln zwischen 0 und oberen Limit, z.B. zwischen 0 und 31
1 Zufallszahl ermitteln zwischen X und Y, z.B. -45 und 83
mehrere Zufallszahlen ermitteln zwischen X und Y, z.B. -45 und 83
mehrere Zufallszahlen ermitteln (sortiert keine Doppelnennungen)

Mauszeiger bestimmen mit CSS - Systemmauszeiger zuweisen Mauszeiger bestimmen mit CSS - Eigene Mauszeiger zuweisen Textfahne folgt dem Mauszeiger (Text editierbar) Ein Augenpaar folgt dem Mauszeiger, Pupillen richten sich dynamisch aus Objekte am Gummiband, Schwerkraft und Luftwiderstand simuliert Objekt drop, auf Mausklick fällt ein Objekt nach unten und prallt zurück Kometenkreis im Orbit um den Mauszeiger Ein Feuerwerk erscheint beim Mausklick Eine Reihe von Images verschiebt sich bis zur Deckungsgleichheit Schneefall, ausschnittweiser Blick auf ein Image Sterne steigen am Mauszeiger auf

Menüs

NACH OBEN

Erklärung: Menüsystem einer Webseite 19-A Aufzählungsliste als Menü - CSS-formatiert Hintergrundfarbe (vertikal) 19-B Aufzählungsliste als Menü - CSS-formatiert Hintergrundgrafik (vertikal) 20 Aufzälungsliste als Menü - CSS-formatiert (horizontal) 01 CSS-formatierte Textlinks (vertikales Menü) 07 CSS-formatierte Textlinks (horizontales Menü) 03 Zuweisung der Formatierung mittels class (vertikales Menü) 14-A Zuordnung CSS-Formatierung über ID (vertikales Menü) 14-B Zuordnung CSS-Formatierung über ID (horizontales Menü) 08 Menüleiste mit Pfeilen, farblich hinterlegte Grafik (vertikales Menü) Mittels CSS eingebundene Hintergrundgrafik (vertikales Menü) Hintergrund-Farbwechsel mit CSS (waagerechte Leiste) Hintergrund-Farbwechsel mit CSS (waagerechte Leiste) mit Hintergrundgrafik 6 Farben für jeden Link (JavaScript + CSS) Grafik innerhalb von Tabellenzellen vertikales Menü, Button als Hintergrundimage in Tabellenzellen pseudo-aufklappen / Untermenü einblenden Navigieren in Seiten mit fortlaufender Nummer im Dateinamen vertikales Menü, Foldertree erzeugt mit einer Tabelle JavaScript Imagechange bei MouseOver (vertikales Menü) aufklappbares Menü - vertikal aufklappbares Menü - horizontal Register A-Z mit CSS formatiert (+ 2 Beispielseiten) Register A-Z mit grafischen Buttons (+ 2 Beispielseiten) Register A-Z mit Image-Map horizontales Menü, Registerkartenmenü 01 2 Frames gleichzeitig ändern, Auswahl mit Pulldownmenü

Pulldown

NACH OBEN

Erklärung eines Pulldown-Menüs Bildauswahl mit Pulldown-Menü Pulldown-Menü, Anzeige im gleichen Fenster oder Frame Pulldown-Menü mit "GO"-Button, gleiches Fenster 2 Frames gleichzeitig ändern, Auswahl mit Pulldownmenü Pulldown-Menü, Anzeige im höchsten Frame (top-frame) Pulldown-Menü, Anzeige im Frame eigener Wahl Hintergrundfarbe ändern-A, Auswahl im Pulldown-Menü Hintergrundfarbe ändern-B, Auswahl im Pulldown-Menü Window öffnen mit Pulldown-Menü Kombi: Hintergrundfarbe der Menüdatei + Datei im anderen Frame - Pulldown-Menü

Spielkram

NACH OBEN

Quiz - Begriffe raten 01, mit 3 Hinweisen beim Fehlversuch Knobelspiel - Schnick, Schnack, Schnuck Übung mit der Tastatur Quiz Zahlenraten - Zahlenraum bis 100 (Weihnachts-) Legekartenspiel (ähnlich Memory) 16 Kärtchen Legekartenspiel (ähnlich Memory) 24 Karten Kärtchen Dynamische Uhrzeitanzeige mit einen Balkenuhr Zeitgesteuerte Ampelanzeige - Grafiken zeitabhängig tauschen Zeitgesteuerte Ampelanzeige - mit Restzeitanzeige in Sekunden Pulsierender Farbrand dynamische Änderung Hintergrundfarbe

Statuszeile

NACH OBEN

Infotext bei MouseOver / MouseOut Infotext bezogen auf die Verweis-URI Standard Infotext, ständige Anzeige Datum und dynamische Zeit plus Info Vor- / Nachmittag 'Fliegende' Buchstaben bilden Statustext 'Fliegendes' Datum und Zeit bilden Statustext Anzeige des Ladestatus, Seite wird geladen / fertig ganz normale Laufschrift statische und dynamische Textanzeige in Kombination Anzeige / Dekodierung des Textes durch Aufdecken zwei Statuszeilentexte im Wechsel

Tabellen

NACH OBEN

Tabellen - Einführung + Grundgerüst Übersicht Tabellen-Attribute, Änderungen in HTML 5 Übersicht Tabellenzellen-Attribute, Änderungen in HTML 5 Tabellen-Kopiervorlagen 01, CSS-formatiert (HTML 5) Tabellen-Kopiervorlagen 02, CSS-formatiert (HTML 5) 1) Tabellenrand (außen) formatieren mit CSS (style) 2) Tabellen und Zellenrand formatieren mit CSS (style) 3) Tabellenzellen-Randfarbe mit CSS (style) 4) Tabellenrand farbig ohne Bordercolor - HTML-Formatierung Tabellenzeilenhöhe, Bestimmung durch transprentes Image Tabellenzellenbreite, Bestimmung durch transprentes Image Tabellenprobleme 01, vergessene Angaben Tabellenprobleme 02, langsamer Aufbau Tabellenprobleme 03, Platzeinbußen durch transparentes Image Tabellenprobleme 04, absolute Breite falsch berechnet Tabellenprobleme 05, <tr>-Hintergrundfarbe cellspacing Hintergrundbild einbinden, Besonderheiten NS 4.x Tabelle schreiben mittels JavaScript Einheitliche Spaltenhöhe / Zeilenhöhe mit HTML Anzeigebreite begrenzen - Tabellen als Designhilfe 1 Anzeigebreite begrenzen - Tabellen als Designhilfe 2 Anzeigebreite begrenzen - Tabellen als Designhilfe 3 Inhalte zentrieren mit Tabellen Seiten zentrieren mit Tabellen Tabellenzellen-Farbwechsel bei MouseOver

Tipps

NACH OBEN

Probleme mit vertikaler Ausrichtung? Tabellen mit Scrollbar Seite neu laden / vom Server neu laden Hovereffekt - Text ohne Grafik einblenden Grafiken optisch größer darstellen mit CSS Tabellen mit Scrollbar anzeigen Textgröße ändern mit Browserinterner Funktion (entspechenden Hinweis anzeigen) Image als Aufzählungszeichen mit HTML Einrücken von Elementen mit HTML und CSS Zugriff auf ein Unterverzeichnis verhindern Email Spiderschutz, email-adresse verstecken Entwickeln von Farbabstufungen in gleichmäßigen Schritten Redesign erleichtern: Hintergrundfarben durch CSS-Unterklassen Schriftgröße in Punkt oder Pixel angeben? History und alte Version einer Web-Präsenz ansehen Rollover Buttons müssen nicht langweilig sein Proportionale Bildgröße automatisch farblich hinterlegte transparente Images Tabellen als Designhilfe Bestimmung der Anzeige-Breite Tipp zum Test des Layouts / Bildschirmauflösung unsichtbare Schaltfläche Gesamte Webseite als Link als Browserstartseite festlegen / Bookmark

Umleitung

NACH OBEN

zum Frameset Script, automatische Umleitung zum Frameset Wochentagsdatei aufrufen, Mo. - So., Umleitung 1 von 7 Tagesdatei aufrufen, Umleitung 1 von 31 Monatsdatei aufrufen Jan. - Dez., Umleitung 1 von 12 an einem bestimmten Datum andere Datei aufrufen 3 Umleitungen vor / während / nach einer Zeitspanne (Start- Enddatum) Uhrzeitweiche 01 - abhängig von der Uhrzeit umleiten auf 1 von 2 Dateien Uhrzeitweiche 02 - abhängig von der Uhrzeit umleiten auf 1 von 3 Dateien zu den JavaScript Seiten umleiten Umleitung 3 Browser, Browsersniffer 3 Umleitung 4 Browser, Browsersniffer 4 Umleitung 4 Browser, Browsersniffer 4a Timeout für die Seite mit Zeitanzeige und Weiterleitung Link mit Umleitung über Zwischenmeldung manuelle Umleitung für Bildschirmauflösung Weiter wenn inaktiv (Mausklick-Überwachung)

Verweise

NACH OBEN

Verweise Grundlagen, Syntax eines Links auf eine HTML-Datei Verweise Grundlagen, lokaler Link auf eine HTML-Datei Verweise Grundlagen, absoluter Link auf eine HTML-Datei mit http://www Sprungmarken, interner Link auf einen Anker innerhalb des Dokuments Verweise Pfadangaben, Berücksichtigung des Verzeichnisbaumes Verweise Target Zielangaben, Frame / Browserfenster für die Anzeige Verweis für ein PopUp-Window - optimale Verlinkung Aus einem PopUp-Window eine Datei im Browserfenster öffnen Verweis ohne Unterstrich, Link gestalten mit CSS Verweis auf ZIP-Dateien Image als Verweis einbinden, Besonderheiten Randfarbe Punktierter Rahmen bei aktivem Link, IE und NS6 Anzahl aller Verweise / Links einer Seite zählen Image-Map 01 verweissensitive Grafiken, Hot Spots als Link Image-Map 02 verweissensitive Grafiken, öffnet PopUp-Window Image-Map 03 verweissensitive Grafiken, öffnet JavaScript-DialogBox Image-Map 04 verweissensitive Grafiken, öffnet PopUp-Window in Bildgröße Vor / Zurück in der History blättern Zurück-Button anzeigen nur wenn sinnvoll Vor / Zurück in der History blättern für Frames Mit Pfeiltasten in der History blättern Linkliste 01 Grafik + Text Gestaltung mit CSS Verweis mit Zwischenmeldung Verweis mit PopUp-Hinweisfenster Link des Tages (1 von 7), abhängig vom Wochentag Tageslink des Monats (1 von 31) Tageslink des Monats (1 von 31) mit opt. Banner Link des Monats (1 von 12) mit Grafik / Banner

PopUp-Windows

NACH OBEN

Hintergrundwissen, PopUp-Window definieren Erklärung Funktion, PopUp-Window definieren 01, Dateiname und Größe) Erklärung Funktion, PopUp-Window definieren 02, Dateiname erst beim Aufruf festlegen PopUp-Window Attribute, Übersicht (auch als PDF) und Beispiel PopUp-Window Größe festlegen - Übergabe der Parameter Verweise auf PopUp-Windows für alle Situationen (Alternative bei PopUp-Blocker) simples PopUp-Window Script einmalige Nutzung erweitertes PopUp-Window Script Übergabe des Dateinamens erweitertes PopUp-Window Script Übergabe der Größenangaben Anwenderfreundliches Standardscript, 5 Übergabeparameter PopUp-Window-Script de Luxe, Übergabe: Dateiname, Breite, Höhe, zentriert ja / nein PopUp-Window für Text, ohne HTML-Datei für das PopUp PopUp-Window zentrieren PopUp-Window automatisch öffnen PopUp-Window automatisch öffnen, zentriert PopUp-Window automatisch schließen 1 PopUp-Window automatisch schließen 2 (Zeitanzeige) PopUp-Window im Vollbildmodus öffnen - Fullsceenwindow Mit window.close ein Fenster schließen, Link Image Button Mit top.window.close() ein Frameset schließen, Link Image Button PopUp-Window positionieren, 3 Beispiele: fixe Position, zentrieren, bewegen PopUp-Window öffnen mit Pulldown-Menü ist das PopUp-Window bereits geöffnet? aus einem PopUp-Window die öffnende Seite ändern PopUp-Window / Browserfenster maximieren PopUp-Window für Grafiken PopUp-Window für ein Image passend öffnen 1 mit Titeltext PopUp-Window für ein Image passend öffnen 2 ohne Titeltext PopUp-Window für ein Image passend öffnen 3, Nachricht bei Rechtsklick PopUp-Window kleiner als Bildgröße (mit Scrollbars)

Zeit

NACH OBEN

Textausgaben Begrüßungstext je nach Tageszeit (4 Optionen) Begrüßungstext 8 Tageszeiten, 7 Wochentage Begrüßungstext je nach Tageszeit (4 Optionen) dynamische Uhr Mini-Kalenderblatt 03 - Datumsanzeige + Begrüßungstext (uhrzeitabhängig) Zufallstext aus 2 Textsammlungen, zeitabhängig (Tag/Nacht) Weiterleitung abhängig von der Uhrzeit umleiten auf 1 von 2 Dateien Uhrzeitweiche 02 - abhängig von der Uhrzeit umleiten auf 1 von 3 Dateien Timeout für die Seite mit Zeitanzeige und Weiterleitung Weiter wenn inaktiv (Mausklick-Überwachung) Up- Downcounter simpler Counter Beispiel Countdown für Silvester / Geburtstag - Image Clock Countdown bis Neujahr Statuszeile Countdown bis Neujahr, Anzeige im 'unsichtbaren' Formularfeld Countdown bis Zieldatum zeitabhängige Bildanzeige Zufallsbild aus zwei Bildsammlungen, zeitabhängig (Tag/Nacht) Bild zeitabhängig (Sekundenwert) - Beispiel Ampel Bild zeitabhängig (Sekundenwert) - Beispiel Ampel mit Restzeitanzeige Delay Verzögrung Timeout für die Seite mit Zeitanzeige und Weiterleitung Delay / Verzögerungs-Script mit Zeitübergabe in Sekunden od. fester Wartezeit Uhren dynamisch Text Datum und dynamische Uhrzeitanzeige 1 Dynamische Uhrzeitanzeige 2 Dynamische Uhrzeitanzeige 3 Dynamische Uhrzeitanzeige 4 Dynamische Uhrzeitanzeige 5 Dynamische Uhrzeitanzeige Balkenuhr (Spielkram) Zeitdarstellung im Iso-Standard Infotext Datum und Zeit in der Titelzeile Uhren dynamisch grafisch digitale Uhr 01 - dynamische Zeitanzeige grafische Ziffern digitale Uhr 01a (MiniClock) - dynamische Zeitanzeige grafische Ziffern digitale Uhr 02 - Eingabefeld für Zeitversatz, dynamisch grafische Ziffern digitale Uhr 03 - Uhrzeit für eine Zeitzone, dynamisch grafische Ziffern digitale Uhr 04 - biäre Uhr dynamisch + grafische Ziffern dynamische digitale Uhr vertikale Anzeige Dynamische Uhrzeitanzeige mit einen Balkenuhr Uhren dynamisch analog analoge Weltzeituhr mit Pulldown-Menü für die Zeitzone analoge Uhr am Mauszeiger 01 analoge Uhr am Mauszeiger 02 Uhren statisch Datum und statische Uhrzeitanzeige 1

NACH OBEN