Web-Design Kostenlos Beispiele downloads javascript dhtml windows html layer css frames menü navigationen

SITEMAP

Anzahl der Beiträge

... und dann gibts auch noch Vorlagen als

= Beitrag bearbeitet innerhalb der letzten 10 Wochen

= Beitrag bearbeitet innerhalb des letzten Halbjahres

Bilder - Images

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
Hintergrundbild einfügen, Bild kacheln, Fehler vermeiden
Hintergrundbild in Tabellen einfügen, Besonderheiten NS 4.x
Hintergrundbild tauschen mit CSS-Angaben
Hintergrundbild einfügen und zentrieren mit Layern
Images Vorladen mit HTML oder JavaScript
Image1 anzeigen und nach Laden von Image2 tauschen
Image auf Klick tauschen mit JavaScript swap()
Bildvorschau bei MouseOver, öffnen der Großansicht beim Anklicken
Großansicht wechseln bei MouseOver der Vorschaugrafik
Großansicht wechseln beim Anklicken der Vorschaugrafik

Datums Zeitabhängig tauschen / anzeigen

Bild des Monats anzeigen - 1 von 12
Bild datumsabhängig anzeigen - Stichtag vorher / nachher
Bild uhrzeitabhängig (Std) anzeigen (Tag / Nacht) - eines aus zwei Auswahlen
Bild zeitabhängig anzeigen / tauschen (Sekunden) - Beispiel: Ampel
Bild zeitabhängig anzeigen / tauschen (Sekunden) - Beispiel: Ampel + Zeitanzeige

Diashows Slideshows Bildauswahl

einfache Bildergalerie Auswahl durch Pulldownmenü
Bildwechsel automatisch, mit Zeitvorgabe, für 1 Bild
Bildwechsel automatisch, mit Zeitvorgabe, für 2 Bilder
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 - manuell, Fotoalbum mit Formularbuttons
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

Zufallsbanner / -bild mit Link, Chancenvorgabe in %
Zufallsbanner / -bild mit Link
2 Zufallsbanner / -bilder mit Link
Zufallsbanner / -bild mit Link, externe JS-Datei
Zufallsbild mit Farbvorgabe für Beschreibungstext
Zufallsbild aus zwei Auswahlen Tag / Nacht
Zufallsbild + farbiger Text (simpel)

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

Fotopräsentation 1, Beispiel mit Frames
Fotopräsentation 2, Beispiel mit Windows
Fotopräsentation 3, Frames - 2 Navigationen

Fotopräsenz

Bildhintergrund 1, Vorschau auf Filmhintergrund
Bildhintergrund 1, Vorschau auf Monitorhintergrund
bedingter Schutz vor Download / Speichern 01
bedingter Schutz vor Download / Speichern 02
Bildansicht umschalten während des Anklickens
Bildrandfarbe mit CSS
Navigation Bildpräsentation fortlaufende Nummern in Dateinamen

Einführung

Seite 01) Einstieg CSS-Formatierung
Seite 02) Erklärung CSS-Deklaration
Seite 03) Erklärung CSS-Anweisungen einbinden
Seite 04) Erklärung Externe CSS-Datei
Seite 05) Erklärung CSS Inline-Anweisungen
Seite 06) Kaskadierung
Seite 07) Texte formatieren mit CSS
Seite 08) Kurzreferenz - Eigenschaften + Werte
Seite 09) Margin + Padding / Ausrichtung + Abstände
Seite 10) Maßeinheiten für Schriftgrade
Seite 11) Schriftgrößen beinahe barrierefrei

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

CSS-Kurzreferenz der gängigen Anweisungen (Druckversion)
Download

Vorlagen externer CSS-Dateien mit Vorschau

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)
Seitenhintergrund Grafik mit CSS einbinden + Optionen
Seitenhintergrund Bildkachel einbinden + Optionen
Seitenhintergrund mit CSS-Anweisungen austauschen
Formularfelder mit CSS formatieren - Input
Formularelemente mit CSS formatieren - Tnput 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
Textboxen - Textspalten mit CSS, Beispiel 01
Textboxen - Textspalten mit CSS, Beispiel 02
Eigene Mauszeiger / Systemmauszeiger zuweisen
Textlink mit Hintergrundbutton / Hintergrundgrafik CSS eingebunden
Textgröße in Punkt oder Pixel bestimmen?
Einen Schlagschatten mit CSS-Angaben generieren
01 Positionieren von Seitenelementen mit CSS-Angaben
02 Texte positionieren über einer Grafik mit CSS-Angaben
verschiedene Hintergrundfarben mit Unterklassen bestimmen
MouseOver-Effekt mit CSS-Randangaben
Menüleiste mit CSS - Zuordnung der CSS-Formatierung mit ID
CSS-Anweisungen Browserabhängig. externen Datei auswählen
Browserprüfung auf CSS-Fähigkeit

Datum 01 - Basiswissen Datumsobjekt Date()
Datum 02 - Übersicht Datumsobjekt Date()
Berechnung periodisch wiederkehrender Ereignisse
Berechnung periodisch wiederkehrender Ereignisse - Beispiel Mondphasen

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)
Jahres-Terminliste 01 - Ferienbeginn in X Tagen, ausblenden alter Termine
Jahres-Terminliste 02 - Terminliste noch xxx Tage, ausblenden + markieren
Jahres-Terminliste 03 - (Kalenderjahr) Tageszähler, optional ausblenden
Jahres-Terminliste 04 - (Kalenderjahr) Tageszähler, optional ausblenden
Jahres-Terminliste 05 - (jahresübergreifend) Tageszähler, optional ausblenden
Bild des Monats - 1 von 12
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)

Berechnungen

Zwei Datumseingaben logisch prüfen (Anreise Abreise)
Errechnen des Wochentags aus einem Datum
Berechnung des westlichen + chin. Sternzeichens
Altersberechnung in Jahren Monaten Wochen Tagen Stunden Minuten Sekunden
Ermitteln von Freitag dem 13.
Datumseingabe logisch prüfen, gültige Eingabe?

letztes Update

Anzeige der letzten Bearbeitung, last Update
Anzeige der letzten Bearbeitung, Datum TT.MM.JJ
Anzeige der letzten Bearbeitung, 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 EM 2008
dynamischer grafischer Counter 02 zur Fußball EM 2008
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
grafischer Downcounter 01 bis zur WM - Stop bei Enddatum
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

Drag and Drop - Objekte mit der Maus verschieben
Schneefall für ihre HTML-Seite
Fang mich - Objekt springt vom Mauszeiger weg
Linkinfo-Box 01 bei Mouseover auf einem Layer
Linkinfobox 02 bei Mouseover auf einem Layer
Linkinfo-Box 02 - Beispiel 00: simple Version, nur Text
Linkinfo-Box 02 - Beispiel 01: mit eingebundener Grafik und Link
Linkinfo-Box 02 - Beispiel 02: Info-Box an einer Image-Map (verweissensitive Grafik)
Valentinskarte - Herzen schwen über die Webseite
Billardkugel - Objekt prallt an der Fensterbegrenzung ab
Anzeigetafel Text - Flippletters, beispiel Flughafenanzeige
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 Textticker
Dynamische Textfarbe Lauftext
Dynamischer Text-Zoom aus dem Hintergrund
Hintergrundbild plus Text / Inhalt auf separaten Layern
Objekte über die HTML-Seite scrollen
Layer verbleibt an fester Position oben: Titelzeile Tabellenüberschrift
Floating Image: Beispiel Ostern
fading Text / Link
Headliner Text mit HTML Tags

Planung einer Webseite 01 - Ziel der Webseite feststellen und erste Überlegungen
Planung einer Webseite 01 - Umsetzung des Entwurfs, Seitenaufteilung und Menüführung
Planung einer Webseite 01 - vorausschauende Vorgehensweise bei der Erstellung
Impressum einer Webseite
HTML-Editor als Freeware: Phase5 und Firstpage2000
HTML-Referenz: SELFHTML Downloadadresse
Web-Spionage das durchsichtige Internet
Web-Developer Linkliste, meine Internet Surftipps
Eigenes Favicon in der Adressleiste des Browsers
Druckoption anbieten mit Formular-Button oder Link, Seite drucken
Drucken automatisch beim Laden der Seite oder mit Link
Druckversion 01 Seite mit 2 CSS-Dateien (simpel)
Sitemap als Crowlerhife in der Framesetdatei
Sitemap 01, Sitemap als Liste CSS-formatierte Grafiken + 3 Anwendungsbeispiele
Sitemap 02, Sitemap aus Listelementen verschachtelte Listen + 3 Beispiele
Sitemap 03, Sitemap mit Erläuterungen DIV-Bereiche + 2 Anwendungsbeispiele
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 + Scala mit JavaScript
Ordnerinhalte anzeigen - Ordner ermitteln
Text ein- / ausblenden mit CSS

Adventskalender

Adventskalender 01 (9 Versionen) zum Download - simple Anpassung
Adventskalender 01 Info: eigenes Hintergrundbild
Adventskalender 01 Info: andere Kästchengrafik
Adventskalender 01 Download Versionen 1 - 9
Adventskalender 01 Info: individuelle Dateinamen
Adventskalender 02 (2 Versionen) zum Download - simple Anpassung
Adventskalender 03 (2 Versionen) zum Download - simple Anpassung
Adventskalender 04 (5 Versionen) - Weihnachtsbaum mit 24 Klickbereichen
Adventskalender 05-V01 - stilisierter Tannenbaum
Adventskalender 05-V02 - stilisierter Tannenbaum
Adventskalender 06 (2 Versionen) - 24 Klickbereiche in einer Tabelle
Adventskalender 07 (3 Versionen) - 24 Grafiken als Klickbereich
Adventskalender 08 (4 Versionen) - Häuser, Fenster als Klickbereich
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
Info: Beepworld + Pfadangaben
Info: Verlinkung ihres kalenders
Ihre Kalender im Web - Links

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 od. 4 Frames, farbcodiert, variable Breite

Download Homepagevorlagen ohne Frames + Beispiele

Download

Webseitenvorlage 01 - Visitenkarte zentrierte Darstellung
Download

Webseitenvorlage 02 - 5 Seiten
Download

Webseitenvorlage 03 - Haupt- + Untermenü
Download

Webseitenvorlage 04 - CSS-Positionierung vor Titel-Grafik
Download

Webseitenvorlage 05 - textbasierte Seiten Blättern-Navigation neu
Download

Webseitenvorlage 06 - Obsthof, 4 Tabellen neu
Download

Webseitenvorlage 07 - Online-Bewerbung / Visitenkarte
Download

Webseitenvorlage 09 - für 970 Pixel Breite, Haupt- + Untermenü
Download

Webseitenvorlage 11 - Ferienwohnung Beispiel
Download

Webseitenvorlage 15 - 80% Breite, 20 Farbvarianten neu

email schreiben AN: CC: BCC:
emails Mehrfachempfänger mit BCC:
Höflichkeit und Benimm-Regeln
Email-Link mit Betreff- und Inhalt-Vorgabe
Email-Adressen vor Spidern verstecken, Textlink
Email-Adressen vor Spidern verstecken, Imagelink
Email-Adressen verschlüsseln UNI-Code
Email-Adressen vor Spidern verstecken Script für Mehrfachverwendung
Email-Adressen vor Spidern verstecken, MouseOver + Mehrfachverwendung
Gültige Email Adressen nach RFC 822

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

Unschöne Darstellung durch Pseudo-Leerzeichen
Tabellen Cellspacing, <tr>-Hintergrundfarbe NS4.x
Image Randfarbe bei Verweisen, Konflikt CSS / Body-Attribute
Tabellenhöhe 100%, Dokumenttyp-Angabe im Head
Im Body-Tag: Ränder- und Margin-Angaben
Fehlerverhalten von CSS - Fehlersuche
CSS Schriftgrößen abhängig von Windows-Einstellungen
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
Seitenlayout, Berechnen des verfügbaren Anzeige-Bereichs
Seitenlayout, warum sehe ich Scrollbars ?

Formulare in HTML-Dokumenten Erklärungen
Formulare Elemente eines Formulars
Basis-Formular mit Prüfung der Emailadresse
Submitbutton als Grafik oder CSS formatiert
Formularbuttons mit CSS formatieren 01
Formularbuttons mit CSS formatieren 02
Eingabemarke / Cursor automatisch in das erste Eingabefeld setzen

Vorlagen

Formularvorlage 01 mit Prüfung der Eingaben
Formularvorlage 02, Anforderung Info per Email
Formularvorlage 03, Anforderung Info per Nachname
Formularvorlage 04, Antrag einer Mitgliedschaft
Formularvorlage 05, Anmeldung zum Turnier
Formularvorlage 06, Kombination Spiderschutz + Bestätigung
Formularvorlage, Empfängerauswahl im Pulldownmenü + inaktiver Sende-Button
Markieren des Textfeld-Inhalts
Alle Checkboxen auswählen
Code: Formularbutton öffnet Email-Client
Code: Formularbutton öffnet HTML-Datei
Code: Formularbutton öffnet Quelltextansicht
Code: Formularbutton öffnet Window
Modul M2 Länderwahl
Modul M3 Geburtstag
Modul M6 aktuelles Datum
Eingabefilter gültige Emailadressen
Password Verification
Login 01
Login 02
Datumseingabe logisch prüfen, gültige Eingabe?
Zwei Datumseingaben logisch prüfen (Anreise Abreise)
Caps Look on? Überwachung der Feststelltaste

Eingabefilter

Datumseingabe logisch prüfen, gültige Eingabe?
Eingabe der Emailadresse 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, farbcodirte 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

1 Frameinhalt ändern - Targetangaben
2 Frameinhalte gleichzeitig ändern, Script benutzt Framenamen
3 Frameinhalte gleichzeitig ändern, Script benutzt Framenamen
2 Frameinhalte gleichzeitig ändern, Script benutzt Framenummer
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
Liste HTML-Code / ASCII für Sonderzeichen ǈ ® ¼
Liste HTML-Code / ASCII für benannte Sonderzeichen Ο Θ ∑
Kompatiblität der HTML-Tags für Browser

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

Notation für Sonderzeichen
Euro-Zeichen in HTML-Dokumenten €
farbige Bullets mit Sonderzeichen
META-Tags in HTML-Dokumenten
META-Tag Generator
Bilderrahmen durch 5 verschachtelte Tabellen (+Bsp. CSS)
simples Balkendiagram-Script Version 01-A (Seitenstatistik V1)
erweitertes Balkendiagram-Script Version 01-B (Seitenstatistik V2)

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

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

Array-Elemente zuordnen, Images als Array-Element, Darstellung im Window
Array-Elemente zuordnen, Dateinamen als Array-Element, Monatsbild

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
Bildschirmauflösung-Warner mittels Alert-Box
Bildschirmauflösung Umleitung
Fensterhöhe ermitteln + höhenangepasste Inhalte einfügen
Bookmark Lesezeichen einfügen Script
IP-Adresse anzeigen

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

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

Berechnungen

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)

Textfahne folgt dem Mauszeiger (Text editierbar)
Ein Augenpaar folgt dem Mauszeiger, Pupillen richten sich dynamisch aus
Objekte am Gummiband, Schwerkraft und Luftwiederstand simuliert
Objekt drop, auf Mausklick fällt ein Objekt nach unten und prallt zurück
Kometkreis 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

Erklärung: Menüsystem einer Webseite
CSS-formatierte Textlinks (vertikales Menü)
CSS-formatierte Textlinks (horizontales Menü)
Zuweisung der Formatierung mittels class (vertikales Menü)
Zuordnung CSS-Formatierung über ID (vertikales Menü)
Zuordnung CSS-Formatierung über ID (horizontales Menü)
Menüleiste mit Pfeilen, farblich hinterlegte Grafik (vertikales Menü)
Mittels CSS eingebundene Hintergrundgrafik (vertikales Menü)
Hintergrund-Farbwechsel mit CSS (waagerechte Leiste)
6 Farben für jeden Link (JavaScript + CSS)
Grafik innerhalb von Tabellenzellen
vertikales Menü, Buttons als Hintergrundimage in Tabellenzellen
vertikales Menü, Foldertree Beispiel zum Download
fortlaufende Nummer in 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ü

Erklärung eines Pulldown-Menüs
Bildauswahl mit Pulldownmenü
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 Pull-Down-Menü
Hintergrundfarbe ändern-B, Auswahl im Pull-Down-Menü
Window öffnen mit Pull-Down-Menü
Kombi: Hintergrundfarbe der Menüdatei + Datei im anderen Frame - Pull-Down-Menü

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
Dynamische Uhrzeitanzeige mit einen Balkenuhr
Zeitgesteuerte Ampelanzeige - Grafiken zeitabhängig tauschen
Zeitgesteuerte Ampelanzeige - mit Restzeitanzeige in Sekunden
Pulsierender Farbrand
dynamische Änderung Hintergrundfarbe

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 - Einführung + Grundgerüst
Übersicht Tabellen-Attribute, Browsersicher

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 transprentes Image
Tabellenprobleme 04, absolute Breite falsch berechnet
Tabellenprobleme 05, <tr>-Hintergrundfarbe cellspacing
Hintergrundbild einbinden, Besonderheiten NS 4.x
Tabelle schreiben mittels JavaScript
Einheitlich hohe Textspalten / Zeilenhöhe mit HTML
Tabellen als Designhilfe zur Seitengestaltung
Inhalte zentrieren mit Tabellen
Seiten zentrieren mit Tabellen
Tabellenzellen-Farbwechsel bei MouseOver

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