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.
	Bilder einer Galerie darstellen (Slimbox) 10.2.6: Die grösseren Grafiken werden in einem darüberliegenden Layer dargestellt. Grafisch ansprechender als das schlichte Fenster öffnen per Javascript

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

	HTML Yes! 12.1: Eine mögliche Lösung der Aufgabe «HTML Yes!».
	Composer Yes! 12.2: Eine mögliche Lösung der Aufgabe «Composer Yes!»: eine einfache Homepage, die aus drei Dateien besteht, die untereinander verlinkt sind.
	Bilder Yes! 12.4: Eine mögliche Lösung der Hausaufgabe «Bilder Yes!».

	Navigation

	Zurück zur Startseite
	©3kanal :: digitAll - 2001-2026