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 ("Basic Template")
- Gehe auf http://www.w3schools.com/bootstrap/, studiere dort "Home" und "Get Started" und mache eine Probeseite unter Einbindung von MaxCDN
- Studiere in w3schools mindestens Grid, Images, Glyphicons, Dropdowns, Navbar, Carousel, Bootstrap Grids
- Mach Probeseiten unter Verwendung von mindestens 4 der genannten Features. Navbar muss dabei sein.
- Versuch durch eigene CSS-Angaben im head, die vorgefertigten Bootstrapformatierungen zu überschreiben (zB Farben, Schriftart,...). Wertvolle Anregungen dazu gibt es im Kapitel "Bootstrap Themes".
- Mach eine Probeseite, die eine fixe Navigation oben mit einem Dropdown, sowie einen fixen Footer unten mit weiteren Menüpunkten hat.
- Fleißaufgabe: Unter http://getbootstrap.com/customize/ wird beschrieben, wie man seine eigene persönliche Bootstrap-Version erzeugen kann. Probier es aus und erzeuge damit eine Version, die lokal auf deinem Rechner liegt und damit auch offline funktioniert.
- 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 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 Glyphicons, Modal, Pagination, Badges, Buttons,...) kommen vor
- mindestens 2 Bilder (unter Verwendung von Images) und ein Hintergrundbild kommen vor.
- Gliederung der Seiten in mindestens 4 DIV-Blöcken (zB: Kopfzeile, Menü, Hauptteil, Fußzeile) vorzugsweise unter Verwendung des Bootstrap Gridsystems
- mind. eine Tabelle, mind eine Liste, externe Verlinkung
- alles was verlangt ist funktioniert in den aktuellen Versionen von Chrome und IE
Notengebung:
- alles erfüllt
- ein Punkt nicht vollständig erfüllt
- zwei Punkte nicht vollständig erfüllt
- drei Punkte nicht vollständig erfüllt
- mehr als drei Punkte nicht vollständig erfüllt
Abgabe:
im ILIAS-Kurs (Ordner Webprojekt, mach ein HTML-Lernmodul mit sinnvollem Titel und deinem Namen in der Beschreibung)
Termin: 23.11.2016