Bootstrap 3 Grundkurs

Ordnung halten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Da Websites gewöhnlich "zu wachsen" pflegen, ist es umso wichtiger, schon bei der Planung mit transparenten Strukturen zu arbeiten.
08:21

Transkript

Nichts erscheint mir bei Web Projekten wichtiger, als das Erstellen von Strukturen und einer Ordnung, die mitwachsen kann, wenn die Web Seite selbst wächst. Und dafür ist es gut sich schon im Vorfeld Strategien zu überlegen wie man verfährt, um eben einem Wachsen dieser Seite Rechnung tragen zu können. Ich werde jetzt ein neues Projekt anlegen, für einen Web Auftritt indem es um Entschleunigung gehen soll. Ich sage File New Web Project, nehme ein Default Project, sage Next. Hier ist es so, ich habe wieder auf dem Web Server, auf meinem lokalen Web Server diese Datei liegen. Und da möchte ich auch das Projekt hinlegen und ich nenne das Projekt lazy, einfach nur weil es jetzt als Projektname schön kurz ist. Und werde in diesen Projects als Erstes einige Ordner anlegen. Da habe ich z. B. meinen CSS Ordner. Da werden dann später die CSS Dateien von Bootstrap und auch meine eigenen hineinkommen. Dann brauche ich einen JavaScript Ordner, wo die JavaScript Dateien hereinkommen, ebenfalls die von Bootstrap und gegebenenfalls noch welche von mir. Dann hätte ich gerne einen php Folder für den Fall, dass ich auch php Teile brauche, dass die ebenfalls gut zu liegen kommen und einen Folder für meine Bilder, den ich image nenne und in diesen Folder sollen dann alle Bilder, die auf der Seite verwendet werden, hinterlegt sein. Und gerade bei den Bildern, die wachsen oft sehr schnell mit auf einer Web Seite. Es ist wichtig nochmal Unterteilungen zu schaffen, wenn Sie schon wissen ungefähr wie der Seitenaufbau sein wird. Ich werde auf jeden Fall einen Ordner brauchen für eine Galerie. D. h. ich lege gleich einen Galerie Ordner an und werde brauchen einen Ordner für ein Karussell, also für wechselnde Bilder auf der Startseite und lege deswegen gleich ein englisches carousel an. Und dann habe ich ganz gerne noch einen zusätzlichen Ordner mit gemischten Bildern drin. Den nenne ich auch gemischt. Da wandern jetzt dann alle Bilder rein, die ich zwar auf den Web Seiten selbst brauche, die aber keiner bestimmten Seite oder keinem bestimmten Inhalt zugeordnet werden können. So, dann zu guter Letzt lege ich mir immer noch einen Ordner an für Allfälliges. Den nenne ich jetzt mal meins, ganz einfach deswegen, weil in diesem Ordner werden alle Dateien, noch nicht fertige Bilder, was ich von meinen Kunden bekomme für diese Seite, das wandert alles in diesen meins Ordner hinein, bevor ich's weiter verarbeiten kann für die Web Seite. Und dieser Ordner ist auch ein Ordner, der z. B. nicht auf dem Web Server mitwandert, sondern der ist einfach für mich lokal zum Arbeiten und Entwickeln gedacht und bleibt auch bei mir. Soviel zur Grundstruktur, die wir jetzt eigentlich nur noch befüllen müssen, d. h. z. B. für den CSS Ordner werde ich mir von meinem Desktop aus dem Bootstrap Ordner aus den Distributionen einmal diese Bootstrap minimalisierte CSS Datei holen, mehr noch nicht. Ich sage kopieren und füge es hier ein und lege vorsichtshalber auch gleich mal noch einen neuen File an. Der heißt myCSS.CSS und ist gedacht dafür, dass ich eventuell eigenes CSS noch brauche mit dem ich das vorhandene CSS ergänzen möchte oder auch überschreiben möchte. Ähnlich verhalte ich mich mit dem JavaScript Ordner, da wandere ich wieder in die Distribution und hole mir die minimalisierte Version raus, weil ich für den Anfang gar nicht großartig was daran verändern möchte, und füge es hier ein. Was wir jetzt noch brauchen aus dem Bootstrap Ordner, ist dieser Ordner fonts, den holen wir uns ganz hier rüber in unser lazy Projekt, weil da ja diese kleinen Symbole hinterlegt sind als Schrift. Und die sind sehr praktisch, also hole ich mir dieses als ganzes und füge es noch ein. Jetzt habe ich zu mindestens mal alle grundlegenden Bootstrap Dateien in meinem Projekt integriert und brauche jetzt für's erste hauptsächlich mal wieder eine Index-Datei. Weil ich ein fauler Mensch bin, lege ich mir jetzt auf der einen Seite einen neuen File an, nenne ihn index.html und werde diese Index befüllen, eben mit dem Basic Template, dass ich von Bootstrap hier bekommen habe. Ich kopiere es mir mit Steuerung C und füge es hier mit Steuerung V wieder ein. Dann füge ich noch einige Ergänzungen durch, d. h. bei html mache ich noch einen Hinweis auf die Sprache, nämlich, dass wir es mit Deutsch zu tun haben. Hier ist der Titel jenseits der Eile. So soll die Seite heißen. Und das wird die Home Seite, weil's doch die Index Seite ist. Dann brauchen wir eben einen Hinweis auf den von uns verwendeten Zeichensatz, d. h. wir machen ein meta tag und verwenden dafür charset=UTF-8. Ja. Viewport lassen wir. Wir wollen's haben. Und hier haben wir jetzt eben schon unsere minimalisierte CSS und wir machen gleich noch einen zweiten Link, und zwar unterhalb von diesem, also ebenfalls link href. Es ist ebenfalls im CSS Ordner und zwar unsere eigene CSS Datei. Und dann haben wir auch noch hier den rel, dass es sich um ein Stylesheet handelt und hier ist auch die Media wieder eindeutig. Screen. So, es ist für's erste eine Vorsichtsmaßnahme, dass ich das auch ja nicht vergesse. Wichtig ist, das meine Style Angaben unterhalb von dem Bootstrap Style Angaben liegen, damit meine auf jeden Fall übertönen was von Bootstrap vorgegeben ist. So, hier schreibe ich jetzt mal nur damit wir was sehen können wieder hin, Jenseits der Eile. Tja, und das war's für's erste mit dem Aufbau dieser Struktur versuche ich eben allen Eventualitäten entgegenzuwirken. Das was ich dann später noch tun werde ist, dass ich einfach diese Datei, unter anderem Namen so oft kopiere wie ich Seiten habe. Damit habe ich diese Grundstruktur schon mal für alle Seiten vorgegeben und kann dann weiter arbeiten.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 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!