Bootstrap
Bootstrap ist ein Framework für modernes Webdesign.
Arbeitsanweisungen
- Gehe auf http://getbootstrap.com/, Verschaff dir unter "Get Started" einen Überblick.
- Wer will kann es herunterladen, entpacken und Probeseiten machen. Wichtig wäre das dann, wenn Bootstrap offline (in einem Intranet) funktionieren soll.
- Gehe auf http://www.w3schools.com/bootstrap5/, studiere dort "Home" und "Get Started" und mache eine Probeseite unter Einbindung von MaxCDN
- Studiere in w3schools mindestens Containers, Grid Basic, Typography, Colors, Images, Dropdowns, Navbar, Carousel, Modal, OffCanvas
- Mach 4 Probeseiten unter Verwendung von mindestens 4 der genannten Features. Navbar muss dabei sein und ein Menü enthalten, das zu allen 4 Seiten verlinkt.
- Mach eine Probeseite, die eine fixe Navigation oben mit einem Dropdown, sowie einen fixen Footer unten mit weiteren Menüpunkten hat.
- Versuch durch eigene CSS-Angaben im head oder in einem externen stylesheet, das nach Bootstrap eingebunden wird, die vorgefertigten Bootstrapformatierungen zu überschreiben (zB Farben, Schriftart,...).
- Bau in die vorherige Übung ein Formular mit verschiedenen Eingabeelementen (input, textarea, checkbox, radio,....) und Formular-Validierung. Verwende als Form-Tag <form method="post" action="https://www.w3schools.com/action_page.php" class="was-validated">
Erstelle einen professionellen Webauftritt mit Bootstrap, der folgende Kriterien erfüllt:
- es handelt sich um den Webauftritt einer (echten oder fiktiven) Firma (bzw. Verein) daher mit sinnvollem Inhalt
- mindestens 6 Seiten (=6 html-Dateien)
- Menüleiste mit mindestens einem Dropdown
- Seitliches Zusatzmenü (kann ausgeführt sein als fixer Bereich im Gridsystem oder OffCanvas Sidebar) mit sinnvollen Links
- unterschiedlich viele Spalten auf den Seiten (mindestens 2 Varianten) unter Verwendung des Gridsystems
- eine selbst eingerichtete Besonderheit (zB Carousel mit eigenen Bildern)
- mindestens 2 weitere Komponenten (zB Modal, Popover, Spinners, Pagination, Badges, Buttons,...) kommen vor
- mindestens 2 Bilder (unter Verwendung von Images) kommen vor.
- mindestens ein Hintergrundbild kommt vor.
- Gliederung der Seiten in mindestens 4 Blöcken (zB: Kopfzeile, Menü, Hauptteil, Fußzeile) vorzugsweise unter Verwendung des Bootstrap Gridsystem
- mind. eine Tabelle, und mindestens eine externe Verlinkung
- mind eine Liste (ol oder ul)
- ein Formular mit mindestens 4 verschiedenen Eingabeelementen (input, textarea, checkbox, radio,....). Verwende als Form-Tag <form method="post" action="https://www.w3schools.com/action_page.php">
- das Formular ist mit Formular-Validierung. Das Abschicken funktioniert und man sieht die eingegebenen Werte.
- alles was verlangt ist funktioniert in den aktuellen Versionen von Chrome und Edge
Notengebung:
Gesamt 16 Punkte. Jeder Bullet-Point, der nicht erfüllt wurde gibt einen Punkt Abzug.
Abgabe:
im ILIAS-Kurs (Ordner "Webauftritt mit Bootstrap", mach ein HTML-Lernmodul mit sinnvollem Titel und deinem Namen in der Beschreibung)
Termin: 6.12.2024