Layout aufbauen

In diesem Video zeige ich Ihnen, wie Sie das Layout für eine Website einrichten können. Das Layout werd ich pixelgenau einstellen. Ich arbeite hier als Beispiel mit InDesign, natürlich geht das auch in Photoshop, Illustrator oder einem anderen grafischen Werkzeug. Unter der Rubrik Web habe ich hier verschiedene Auflösungen, die mir angeboten werden. Wenn Sie sich mit Webdesign beschäftigen, wissen Sie, das es natürlich mobile Seiten gibt, Tablet-Seiten und Desktop-Seiten. Was nehme ich denn da, womit fange ich denn grundsätzlich an? Nun, ich empfehle Ihnen, mit der Auflösung 1280 mal 800 zu beginnen. Das ist eine Standardauflösung, die bei breiten Tablets, also bei großen und querformatig gehaltenen Tablets auftritt. aber auch bei entsprechend Desktop-Computern, also niedrig aufgelösten Laptop-Computern. Also eine relativ große Schnittmenge von mobil zu Desktop über die Auflösung 1280 mal 800. Wenn ich das Ganze einrichte, so kann ich die Seitenanzahl natürlich einstellen und natürlich auch die Spalten. Doch zunächst möchte ich hier die Ränder einstellen. Ich will nämlich hier nicht mit 1280 Pixeln, in der vollen Breite arbeiten, sondern im Kern mit 960 Pixel. Das heißt, ich muss hier ein bisschen Abstriche machen und ich muss hier die Ränder einstellen. Oben und unten lass es ich mal bei 0 und links und rechts, da gebe ich jetzt 160 Pixel ein, weil ich nämlich dann hinterher, 320 minus 1280, meine 960 Pixel raus hab. So, damit können wir erst einmal beginnen und gucken uns das Layout genauer an. Etwas unspektakulär, man sieht die Ränder, das heißt, dass ist sozusagen der Innenbereich oder man nennt es auch das Boxed Design, was also innerhalb dieser Breite läuft, alles andere kam breiter hinauslaufen und das würde dann hier über die volle Breite hinweg eingerichtet. Ich zeig es mal ganz kurz mit zwei Rahmen, also, das wäre quasi im Fullscreen-Bereich und das wäre der Bereich in diesem Boxed Design, also 960 Pixel und das sehe ich hier auch oben in den Maßen. Wie verhält es sich jetzt mit den Spalten? Die Spalten kann ich hier im Menü einrichten, unter Ränder und Spalten. Und die Spaltenanzahl geben wir hier mit einem konkreten Wert ein, aber vorher der Spaltenabstand. 12 Pixel ist natürlich nicht unbedingt ein geeigneter Webstandard, wir arbeiten hier mit einem Vielfachen von 5 Pixel, beispielsweise 15 oder 20 Pixel. Beginnen wir einfach mal mit 10 Pixel, schauen wir, was wir damit erreichen können. Eventuell können Sie natürlich später den Wert noch mal verändern. Die Spaltenanzahl können wir mit 12 Spalten beginnen. Warum 12? 12 lässt sich hervorragend teilen, durch 2, durch 3, durch 4 und so weiter, sodass wir also breite Bereiche, wie auch stark unterteilte Bereiche hinterher gestalten können. Ich zeige Ihnen das mal kurz mit einigen Rahmen. Nehmen wir mal an, wir wollen jetzt einige Rahmen erstellen, dann lege ich mir zunächst mal hier eine Farbigkeit fest, damit wir auch gleich sehen, was dabei passiert. Zum Beispiel einfach mal 20 Prozent schwarz fürs Layout und ich ziehe hier jetzt hier einmal die Rahmen auf, dann kann ich natürlich ein Rahmen über die volle Breite gestalten und kann den entsprechend so einsetzen. Oder ich kann natürlich auch einen Rahmen verwenden, wo ich sage, ich unterteile diesen Rahmen. In dem Fall mache ich das hier mit den Pfeiltasten nach rechts, dann wird das Ganze schnell ein zweispaltiges Objekt, also zwei Rahmen nebeneinander mit der Lücke von 10 Pixeln. Das Ganze passt natürlich wunderbar ins Konzept, das heißt, wenn man beispielsweise unter einer Titelseite auch gleich vier News-Komponenten erstellen will, dann kann ich hier vier Spalten erstellen in meinem Spaltenraster und die natürlich dann auch entsprechend hervorheben. Also, das Raster von 12 Spalten bietet enorm Variabilität, um mit einem Vielfachen beziehungsweise mit dem Geteilten von 12 zu arbeiten. Nun kommen wir zum Header. Schauen wir uns nun an, was wir mit einem Rahmen im Webdesign alles anstellen können, um dort zum Beispiel Bilder oder Texte später zu platzieren. Dafür verwende ich natürlich auch ein horizontales Raster. Dieses Raster kann ich natürlich hier einstellen und zwar in diesem Fall anhand der Rasterinformationen, Raster und Hilfslinien und da gibt es das Dokumentraster. Aber dieses Dokumentraster ist ein gleichmäßiges Raster, innerhalb von 5 Pixel beispielsweise, das ist eine Möglichkeit. Ich kann natürlich auch mit Hilfslinien arbeiten Das Dokumentenraster, man sieht es gleich, ist hier unterteilt und in den Voreinstellungen in dem Fall hier mit InDesign kann ich das Raster beeinflussen und kann sagen, das Raster soll hier in einem Bereich von 72 Pixel arbeiten. Das ist natürlich ein sehr ungünstiger Wert. Hier wollen wir natürlich mit zum Beispiel 20 und einer Unterteilung oder vier Unterteilungen arbeiten, sodass wir hinterher im 5 Pixel-Bereich unsere Rahmen hinterher produzieren und gestalten. Und damit fällt das Ganze auch etwas leichter, so auf den ersten Blick sofort Rahmen daran zu orientieren, sofern ich denn hier auch aktiviert habe, dass wir das ganze am Dokumentenraster ausrichten. Das heißt, wenn ich jetzt hier oben zum Beispiel einen Kopfbereich habe und das habe ich hier über die volle Breite gezogen, dann habe ich hier vielleicht vier News-Komponenten, die ungefähr so 10 Pixel dadrunter sitzen und diese Pixelanzahl, die kann ich natürlich hier so sehr gut einstellen anhand des Dokumentenrasters, ohne dass ich direkt in das Dokument großartig rein- oder rauszoomen muss. Dazu gibt es aber auch noch diverse Sachen, die ich mit einem solchen Raster einstellen kann beziehungsweise das, was ich mit einem Rahmen tun kann. Dafür zoome ich hier mal genauer hinein, Das Dokumentenraster, dass stört jetzt gerade ein bisschen, wir wollen uns das mal kurz ausblenden. Wenn ich eine solche Box habe, dann ist dieser Rahmen, den ich jetzt hier im Layout habe, natürlich hinterher eine div-Box, die hinterher im HTML-Code umgesetzt wird. CSS-Anweisungen sorgen dann dafür zu entscheiden, was ist der Hintergrund, welche Konturstärke und welche Außen- und Innenabstände habe ich denn. Ich will es mal ganz kurz hier in InDesign an diesem Rahmen demonstrieren. Ein Innenabstand ist natürlich auch möglich und das mache ich einfach mit einem Platzhaltertext. Wenn wir zum Beispiel sagen, wir hätten hier eventuell später einen Textartikel drin, dann könnte ich das Ganze einmal einstellen und zwar mit einer Schrift, dass wir hier mit arbeiten können. Ich verwende jetzt mal hier ganz schnell die Geneva in diesem Beispiel, um zu gucken, in welchen Größenordnungen wir hier unterwegs sind. Zum Beispiel 14 Punkt zu 18 Punkt und jetzt will ich natürlich noch dafür Sorge tragen, dass hier ein Innen- und Außenabstand hier eingehalten wird. Um das zu erreichen, gibt es in diesem Fall Textrahmenoptionen in InDesign mit Strg+B oder Apfel+B zu erreichen, dabei kann ich den Abstand zum Rahmen definieren. Stellen Sie sich vor, wenn Sie jetzt in CSS-Code das Ganze programmieren müssten, dann wäre das quasi das Padding zur Box. Das heißt, dieser Begriff Padding kommt aus dem HTML-Code und aus der CSS-Anweisung und das wäre dann der Wert, der oben, unten, links oder rechts eingestellt wird. Und wenn man diese Kette hier aber anklickt, dann wäre das Padding quasi für alle Werte gleich und einen gleichmäßigen Abstand von 10 Pixel. Und so sehen Sie das dann auch, wird es hier direkt umgesetzt und selbstverständlich kann sich hinterher ein Programmierer daraus auch diese Informationen herauslesen. Das hat einfach den Vorteil, dass Sie schneller gestalten können, wenn Sie nämlich jetzt diese Box breiter machen oder schmaler, der Text hat natürlich immer diesen Innenabstand. Wenn ich möchte, dass der Rahmen einen Außenabstand hat, so kann ich den Textumfluss aktivieren, ist eigentlich eine Funktion, die aus dem klassischen Print-Layout kommt, die ich aber hier hervorragend zur Simulation von solchen Werten nehmen kann, also der Außenabstand und dieser Außenabstand, der wird auch natürlich später in CSS-Code umgesetzt, sofern er nötig ist, zum Beispiel bei Bildern, die umfließen sollen von Text und in diesem Fall hier sehe ich auch diese blaue Linie und dann weiß ich auch, hier oben haben wir offensichtlich noch 20 Pixel Abstand und ich könnte die Box jetzt direkt nach oben schieben, ohne dass ich jetzt noch mit einem Raster arbeite im Hintergrund, dann komme ich einfach schneller damit zurecht. Will ich das Ganze einmal speichern, so lässt sich das Ganze natürlich als Objektformat zum Beispiel anlegen und wenn wir noch mehr Rahmen hätten, könnten wir diese Eigenschaften einfach auf die Rahmen übertragen. Also man sieht, man kann sogar mit einem klassischen Layoutwerkzeug wie InDesign relativ schnell und pixelgenau vor allem Internetseiten aufbereiten.