WordPress Theme (Template) installieren ganz leicht

erfahren Sie mehr:

In diesem Tutorial werden wir Schritt für Schritt eine hübsche moderne responsive HTML5-Webseite erstellen. Ich habe versucht so viele Features wie m?glich in das Tutorial zu integrieren. Wir werden uns mit einem jQuery Slider, CSS3-Transitions und CSS3-Animationen, CSS Media-Queries und noch einigem mehr besch?ftigen. Der erste Teil des Tutorials wird Dir zeigen wie man die grundlegende HTML-Struktur aufbaut und welche Skripts für eine browserunabh?ngige Darstellung der Webseite ben?tigt werden. Im zweiten Teil werde ich Dir dann zeigen wie man die Seite mithilfe von CSS3-Features gestaltet, um dann am Ende diese umwerfende HTML5 Cross-Browser-Webseite zu erstellen.

Erstellen des head-Bereichs – CSS-Dateien
Wir werden für unsere Webseite vier verschiedene CSS-Dateien verwenden. Das erste Stylesheet hei?t reset.css und setzt das Styling aller HTML-Elemente zurück, so dass wir frei gestalten k?nnen, ohne uns Gedanken um Unterschiede in verschiedenen Browsern Gedanken machen zu müssen. Für dieses Tutorial habe ich Eric Meyers “Reset CSS” 2.0 benutzt, das Du hier herunterladen kannst.

Das zweite Stylesheet hei?t style.css und enth?lt unser gesamtes Styling. Wenn Du m?chtest, kannst Du diese CSS-Datei auch in zwei Stylesheets aufteilen und so das grundlegende Layout vom Rest des Stylesheets trennen.

Wenn Du Dir die Vorschau der Webseite anguckst und auf eines der kleinen Bilder im Hauptinhalts-Bereich klickst, wirst Du sehen, dass sich das Bild in einer gr??eren Version über der gesamten Seite ?ffnet. Das Skript, das wir hierfür verwenden, hei?t Lightbox2 und ist eine einfache M?glichkeit, Bilder über der aktuellen Seite anzeigen zu lassen. Für dieses Tutorial musst Du Lightbox2 herunterladen und die CSS-Datei „lightbox.css“ einbinden.

Das letzte Stylesheet (Google WebFonts) erm?glicht uns die Benutzung der Schriftarten Open Sans und Baumans. Um Schriften zu finden und sie in Dein Projekt einzubiden, besuche Google Web Fonts.

Bitte beachte, dass die Anzahl an HTTP-Requests sich vergr??ert, je mehr CSS-Dateien Du in Deine Webseite einbindest und dies zu l?ngeren Ladezeiten führen kann. Für die Live-Version Deiner Webseite solltest Du alle CSS- und Javascript-Dateien in jeweils eine Datei zusammenfügen. Das Problem dabei ist allerdings, dass die Ubersichtlichkeit sehr stark darunter leiden und Dir die zukünfitge Arbeit mit den CSS- und JS-Dateien erschweren wird. Wenn Du Dir sicher bist, dass Du die Dateien in Zukunft nicht mehr ver?ndern wirst, macht es Sinn die Dateien manuell zusammenzufügen. M?chtest Du allerdings auch in Zukunft noch ?nderungen vornehmen, empfehle ich Dir das Skript Minify.js zu verwenden, das automatisch alle Deine CSS- und JS-Dateien zusammenfügt, sie minimiert und sie serverseitig cachet.

Erstellen des head-Bereichs – Javascript- / jQuery-Dateien
Jetzt da wir alle CSS-Dateien eingebunden haben, lass uns die ben?tigten Skripts hinzufügen. Da wir HTML5- und CSS3-Features in unserer Webseite nutzen, ben?tigen wir einige Skripts, die die Benutzung in allen Browsern erm?glichen. Das erste Skript, das wir benutzen werden, ist Modernizr.js, eine Feature-Erkennungs-Bibliothek für HTML5 und CSS3. Mithilfe dieses Skripts l?sst sich auf einfache Weise feststellen, ob ein Browser ein bestimmtes Feature unterstützt oder nicht. Au?erdem beinhaltet das Skript auch gleich html5shiv, das die Benutzung von HTML5-Elementen im Internet Explorer erm?glicht. Um Modernizr.js herunterzuladen, klicke hier und achte darauf, dass „html5shiv“ und „Modernizr.load“ ausgew?hlt sind.

Das zweite Skript, das wir ben?tigen, ist Respond.js, das responsive Design im Internet Explorer und in anderen Browsern, die keine CSS Media Queries unterstützen, erm?glicht. Klick hier, um es von GitHub herunterzuladen.

Um z.B. lightbox.js nutzen zu k?nnen, ben?tigen wir ebenfalls die jQuery-Bibliothek. Am besten nutzt Du eine externe jQuery-Version von Google und bietest eine lokale jQuery-Datei an, falls die externe nicht geladen werden kann.

Für Lightbox2 müssen wir die Datei lightbox.js einbinden, die sich im Ordner „js“ des Lightbox-Ordners befindet.

Wir werden in diesem Tutorial einige CSS3-Features nutzen, die es erfordern, unterschiedliche Prefixe für die browserunabh?ngige Darstellung von Eigenschaften zu verwenden. Um nicht bei jeder Eigenschaft manuell alle Prefixe angeben zu müssen, werden wir das Skript Prefix Free nutzen, das automatisch alle ben?tigten Prefixe erstellt. So reicht es dann, die prefixfreien CSS-Eigenschaften anzugeben. Du kannst das Skript von hier herunterladen.

Reply