Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

jQuery für Webdesigner

Projektvorbereitung einer jQuery-Website

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Folgen Sie der Projektvorbereitung und erhalten Sie hier den Überblick über die benötigten Projektdateien.

Transkript

In diesem Kapitel werden wir gemeinsam eine Website mit CSS gestalten und anschließend Schritt für Schritt mit jQuery-Befehlen und externen Skripten aus dem Internet erheblich aufwerten. In diesem Video beginnen wir mit einem Überblick über die Dateien, die Sie benötigen, und auch mit dem fertigen Ergebnis, dass Sie wissen, worauf das Ganze auch hinauslaufen soll. Und da darf ich Sie bitten: In Ihren Projektdaten dürfte sich ein solcher Ordner befinden. Und wenn Sie diese Projektdaten genauer betrachten, dann sehen Sie, gibt es hier ein biketravel-scotland und ein bike-travel-scotland-start. Zur weiteren Bearbeitung darf ich Sie bitten, dieses bike-travel-scotland-start in Ihr XAMPP-Verzeichnis in das htdocs-Verzeichnis zu kopieren. Und das mach ich jetzt auch mal an der Stelle mit. So, in htdocs und dann dort in jquery. Hier habe ich schon bereits die Daten drin, die schrittweise bis zu diesem Kapitel entwickelt wurden, und kopiere jetzt einfach über rechte Maustaste, Einfügen diesen bike-travel-scotland-Ordner hinein. Anschließend benennen Sie den am besten um in bike-travel-scotland, so. Und dort drin haben wir entsprechend die Daten, das ist eine HTML-Datei, die jQuery-Datei, eine Stylesheet-Datei und ein Ordner mit Skripten, der später gefüllt wird und einen Ordner images, in dem sich bereits jetzt Bilder befinden, die wir später auch einbinden können. So, jetzt schauen uns an, was daraus werden soll, und dazu gehe ich wieder in die Projektdaten und rufe das fertige Bild auf, also den fertigen Ordner auf. Und hier einfach mal rechte Maustaste und das möchte ich öffnen mit dem Google Chrome und das sieht dann so aus. Wir haben also hier oben eine Slideshow am Kopf des HTML-Dokumentes eine Slideshow. Und Sie sehen: Das geht weiter. Bitte nicht wundern, dass die Grafik etwas verpixelt ist, das sind relativ kleine Bilder, die gestretcht werden. Das habe ich bewusst gemacht, damit die Datenmengen nicht so groß sind. Das geht natürlich auch mit höher aufgelösten Bildern. Weiter unten haben wir ein Menü, ein Hauptmenü, und hier gibt es solch einen netten Effekt mit einer Verzögerung und das ist, wie Sie sehen oder wie Sie sicherlich schon vermuten, auch ein jQuery, genauso wie natürlich hier oben der Slider, der auf Klicks reagieren kann, der, wie man hier sieht, auf den Mouseover-Befehl reagiert und weiterblättern kann. Ja, und dann haben wir auf der linken Seite noch ein Menü, das ein sogenanntes Expand-Menü ist. Wenn ich also hier draufklicke, dann klappen entsprechend weitere Menüpunkte auf und die anderen, die man angeklickt hat, wieder zu. Ganz nebenbei gesagt: Damit das Ganze auch einen kleinen Nutzen für Sie hat, wenn Sie sich für Schottland interessieren sollten, dann klicken Sie beispielsweise auf irgendeinen Menüpunkt, also wie zum Beispiel die Anreise, und dann gelangen Sie tatsächlich auch auf die jeweiligen Informationen und können sich ein bisschen damit beschäftigen. Also, Sie sehen: Da kann man sich drauf freuen, bis das fertig ist. Somit wissen Sie nun schrittweise, was mit dieser HTML-Seite, die wir bearbeiten, geschehen soll.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!