Bootstrap
Bootstrap ist ein Framework für modernes Webdesign.
Arbeitsanweisungen
- Gehe auf http://getbootstrap.com/, lade es herunter ("Download Bootstrap") und entpacke es.
- Verschaff dir unter "Get Started" einen Überblick und mache eine Probeseite mit dem Template, das du dort findest ("Starter Template")
- 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 Basic Grids, Images, Containers, Dropdowns, Navbar, Carousel, Modal, OffCanvas
- Mach Probeseiten unter Verwendung von mindestens 4 der genannten Features. Navbar muss dabei sein.
- 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,...). Anregungen findet man auch im Menüpunkt "Examples".
- Mach eine Probeseite, die eine fixe Navigation oben mit einem Dropdown, sowie einen fixen Footer unten mit weiteren Menüpunkten hat.
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
- Sidebar (=seitliches Zusatzmenü) mit sinnvollen Links
- unterschiedlich viele Spalten auf den Seiten (mindestens 2 Varianten)
- 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) und ein Hintergrundbild kommen vor.
- Gliederung der Seiten in mindestens 4 Blöcken (zB: Kopfzeile, Menü, Hauptteil, Fußzeile) vorzugsweise unter Verwendung des Bootstrap Gridsystem
- mind. eine Tabelle, mind eine Liste (ol oder ul), externe Verlinkung
- alles was verlangt ist funktioniert in den aktuellen Versionen von Chrome und Edge
Notengebung:
Gesamt 12 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: 27.11.2022