Am 22. Juli 2017 haben wir überarbeitete Fassungen unserer Datenschutzrichtlinie, sowie eine Cookie-Richtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesen überarbeiteten Dokumenten einverstanden. Bitte lesen Sie diese deshalb sorgfältig durch.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Was von den Ordnern und Dateien für das Veröffentlichen übrig bleibt

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie Ihr Sass-Projekt online stellen wollen, brauchen Sie nur noch die Dateien, auf die Sie in Ihrem HTML und CSS tatsächlich referenzieren. Achten Sie dabei auf die Pfadangaben!
04:55

Transkript

Mein Projekt ist jetzt mit Sass so weit fertig und jetzt kommt der spannende Teil, wo wir die notwendigen Dateien verpacken und mitnehmen, um dann später online gehen zu können. Dazu gehe ich jetzt zuerst mal in mein Aptana-Studio und sehe mir hier bei den Dateien an, was wir alles haben und was wir eventuell alles brauchen werden. Das Erste, was mir auffällt, ist, dass wir JavaScript verwendet haben und dass wir aber beim Testen von JavaScript das in der normalen bootstrap.js gemacht haben, das heißt, das Erste, was wir tun sollten, ist, dass wir für ein Uglify Richtung bootstrap.min schauen und dazu hole ich mir wieder mein Prepos und gehe hier auf bootstrap.js. Ich sage Autofy Uglify und achte darauf, dass der Ausgabepfad tatsächlich zu meiner bootstrap.min zeigt und wenn dem so ist, dann sage ich einfach "Process File" und damit sollten die Dateien jetzt in minimierter und komprimierter Form in meiner bootstrap.min landen. Dann muss ich allerdings die Pfadangaben in meinem Index noch anpassen. Ich habe einerseits hier bei den CSS-Versionen schon eine minimierte Bootstrap CSS-Version, das heißt hier muss ich ebenfalls auf minimiert wechseln und dasselbe gilt bei meinem JavaScript Aufruf, das heißt, er setzt JavaScript, aber es ist ein min.js. So, das war es mal von dieser Seite. Ich speichere meine Änderungen und auf den ersten Blick scheint dieser Aufbau ja etwas unübersichtlich. Sie fahren aber auf jeden Fall gut, wenn Sie alles im Assets-Ordner fürs erste belassen. Das heißt, ich werde mir jetzt meine einzelnen Dateien aus dem Bootstrap-Sass-Ordner herauskopieren. Ich habe mir hier schon einen Projekt-Sass-Ordner angelegt und in den werde ich mir jetzt das, was ich glaube zu brauchen, hineinkopieren, das heißt, ich brauche die Assets und ich brauche meinen Index File. Mit STRG kann ich zwei Sachen gleichzeitig markieren und kopiere sie mir jetzt in meinen Projektordner. Ich sage "einfügen". Dieses Projekt ist noch von etwas Älteren. So, in den Assets liegt jetzt aber mehr, als ich tatsächlich brauche, und zwar einerseits habe ich ja hier meine CSS-Datei drin, und zwar nur noch die bootstrap.min.css, das heißt, alles was in stylesheets liegt, kann ich entfernen. Ich bestätige das Entfernen mit ja. Ähnlich verhält es sich mit Pixs und Images. Ich habe alle meine Bilder in Pix, in Images liegt nichts, was ich selbst verwendet hätte oder worauf ich verweisen würde. So, ich habe da jetzt im Hintergrund eine Aufforderung meines Programms, dass ich meinen Versuchszeitraum verlängern möchte. Das möchte ich und mache jetzt weiter mit den Fonts. Die Fonts habe ich überhaupt nicht verwendet, weil da liegen ja alle Glyphicons drin. Ich habe kein einziges dieser Glyphicons verwendet, das heißt, ich entferne auch diesen Ordner, und innerhalb von JavaScript brauche ich eigentlich nur das minimierte JavaScript. Ich klicke auf "entfernen" und soweit jetzt mein Uglify funktioniert hat, so sollte ich mit diesen Dateien innerhalb von meinem Projekt Sass meine Seite komplett aufrufen können. Ich versuche das jetzt, ich öffne dazu Aptana und mit FileImport hole ich mir mein Projekt. Es liegt ja auf meinem Desktop und heißt Projekt Sass. Okay, der Projektname passt mir. So, hier habe ich jetzt mein Projekt Sass und wenn ich jetzt meine Index-Datei öffne und sie mir über meinen Webserver ansehe, dann sollte ich meine Seite mit ihrem vollen Funktionsumfang aufrufen können. Dem ist auch so, das heißt, das Zusammenfügen meiner Dateien hat funktioniert und die Pfadangaben passen auch noch alle so zusammen, wie es ursprünglich geplant war.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 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!