Demoseiten des FAU-Kurses «Einführung ins Webdesign» |
|
| Diese
Code-Demonstrationen stehen zu deiner freien Verfügung. Zögere nicht,
dich durchzuklicken und Dinge, die dir gefallen, in dein eigenes
Projekt einzubauen. An den jeweiligen Quellcode (HTML-Code) kommst du, indem du die Beispieldateien (.html) anklickst und anschliessend im Browser unter Ansicht → Quelltext wählst. Beachte, dass es meistens relevant ist, wo genau du den Code einfügst, ob in den <HEAD> oder in den <BODY>. |
| 2. |
Kapitel | |||
|
||||
| Die erste Seite Die erste Homepage, die analysiert und in ihre HTML-Elemente zerlegt werden soll. | ||||
|
||||
| 9. |
Kapitel | |||
|
||||
| Navigation und roter Faden
9.3: Navigation und roter Faden durch eine Homepage an einem Beispiel
sehen. |
||||
| Colormatch 9.4: Javascript-Beispiel um Farben auszuwählen und deren RGB-Codes herauszulesen. | ||||
|
||||
| 10.1. |
Kapitel: CSS: Cascading Style Sheets | |||
|
||||
| Links mit Zusatzattributen 10.1.2: Code für farbige Links, unterstrichen oder nicht. | ||||
| Zentrale CSS-Datei für eine ganze Webseite 10.1.3: Das Auslagern der Stilangaben in eine separate Datei ermöglicht die Änderung des Designs in beliebig vielen Webseiten mit wenigen Klicks. | ||||
| Exakte Positionierung von Elementen 10.1.4: Alternativ zu Tabellen können Elemente einer Webseite auch mittels CSS positioniert werden. | ||||
| Skalierbare Homepage mit Bild und Text 10.1.5: Methode, um eine komplette Webseite mit Bild und Text beinahe beliebig zu skalieren. | ||||
| Ein einfaches Drop-Down-Menu nur mit CSS 10.1.6: Einfaches und leicht zu kopierendes interaktives Drop-Down-Menu ohne Javascript verwenden zu müssen. | ||||
|
||||
| 10.2. |
Kapitel: Javascript | |||
|
||||
| Dynamische Positionierung 10.2.1: Mit Javascript lassen sich die CSS-Angaben eines Inhalts verändern. Beispielsweise die horizontale Positionierung. | ||||
| Berechnung im Browser 10.2.2: Javascript ermöglicht Berechnungen aufgrund Eingaben des Benutzers. | ||||
| Bildwechsel bei Mouse-Over-Events 10.2.3: Immer wieder beliebt: Ein Bild wird durch ein anderes ersetzt, wenn die Maus darüber liegt. | ||||
| Rezepte vom Eisfischer 10.2.4: Eine fortgeschrittene Anwendung von HTML in Kombination mit Javascript. | ||||
| Neue Fenster öffnen 10.2.5: Programmgesteuertes öffnen von Fenster mit voller Kontrolle über Grösse, Position, Status- und Adresszeile und vielem mehr. | ||||
|
||||
| 10.3. |
Kapitel: Tipps & Tricks | |||
|
||||
| Audio einfügen 10.3.1: MP3 oder WMA-Dateien im Browser abspielen. | ||||
| Video einfügen 10.3.1: Quicktime oder Flash-Filme im Browser abspielen. | ||||
| Emailformulare 10.3.2: Antwort aus der weiten Welt. | ||||
| Text ganz am Rand der Seite 10.3.3: Weg mit den störenden Rändern. | ||||
| Nicht-Rechteckige Bilder 10.3.4: Trick, um die Illusion von nicht-rechteckigen Bildern zu schaffen. | ||||
| Hintergrundbilder 10.3.5: Trick der zeigt, wie man Text über Bilder legen kann. | ||||
| Zentrierte Tabelle 10.3.6: Alternative zu linksbündigen Webseiten. | ||||
| iFrames 10.3.7: Darstellen eines HTML-Dokumentes innerhalb eines anderen HTML-Dokumentes. | ||||
| Geringe Zeilenhöhe 10.3.8: Geringe Zeilenhöhe in Tabelle durch Bildinhalt statt BR-Tag. | ||||
| Verschlüsselter E-Mail-Link 10.3.9: Verschlüsselter E-Mail-Link, um Spam zu vermeiden. | ||||
|
||||
| 10.4. |
Kapitel: PHP | |||
|
||||
| PHP 10.4.1: Ein Programm auf dem Server laufen lassen. | ||||
|
||||
| 12. |
Kapitel: Übungsaufgaben | |||
|
||||
| Bilder Yes! 12.4: Eine mögliche Lösung der Hausaufgabe «Bilder Yes!». | ||||
|
||||
| Navigation | ||||
|
||||
| Zurück zur Startseite | ||||
| ©3kanal :: digitAll - 2001-2026 | ||||
|
||||