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

HTML und CSS für Designer

Satz und Seitenaufteilung mit InDesign

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Wird in einem Satz- oder Bildbearbeitungsprogramm gestaltet, ist die Festlegung der Dokumentstruktur in Form von Ebenen oder Zeichnungsflächen auf ähnliche Weise wie in einem HTML-Dokument sinnvoll.

Transkript

Nachdem unsere Vorgaben klar sind und wir wissen was wir zu tun haben, können wir mit der Gestaltung des eigentlichen Online-Magazins beginnen. Das werde ich hier stellvertretend an InDesign durchführen. Alternativ geht das in jedem Programm, in dem Sie sich wohlfühlen und das sie auch kennen. Ich habe hier mal einen Arbeitsbereich eingeschaltet -- da geht schwerpunktmäßig um typografische Sachen -- aber auch das kann man machen, wie man möchte. Hier ein Hinweis auf die Anlage eines neuen Dokumentes: Ich gehe mal auf "Datei" "Neu" Dokument". Wenn man ein Dokument anlegt, je nach Programm, mit dem man arbeitet, dann sollte man darauf achten, dass man bei solch einer Gestaltung von einem Mockup die Abmaße und weitere Farb-Vorgaben richtig wählt. Hier habe ich zum Beispiel bei InDesign die Möglichkeit als Zielmedium "Druck", "Web" und "Digitale Veröffentlichung" zu wählen. Das unterscheidet sich nur dadurch, wenn ich mich für "Web" entscheide, ich eine Beschränkung der Farbangaben habe und, wie man hier sieht, andere Auswahlmöglichkeiten von Abmaßen. Ich gehe auf Druck zum Beispiel zurück. Beim Druck hat man Standard DIN Maße oder "Legal" et cetera und bei "Web", schwerpunktmäßig Pixelmaße. Die Auswahl bestimmt auch, dass ich keine Doppelseite haben kann. Es gibt keine Doppelseite als Webseite also schaltet er diese Option aus. Das sind so Kleinigkeiten, wo man ein klein wenig drauf achten sollte. Selbstverständlich brauche ich bei solcher Anlage auch keinen Anschnitt und Infobereich. Infobereich würde vielleicht noch gehen, aber im Prinzip ist das überflüssig, und Anschnitt brauche ich gar nicht. Die Ränder, die man setzt, das liegt an einem selber, ob man jetzt sagt: Ich möchte dort 80er Ränder haben als Abstand, Ich trage das jetzt einfach mal ein. Wichtig ist vielmehr, ob auch wirklich die Dimensionen Breite und Höhe, und hier passt es zum Beispiel in der Form, dass ich mich für ein Design in der maximalen Breite 1280 Pixel entscheide. Die Höhe, die man wählt, ist zu dem Zeitpunkt relativ schwer zu sagen, weil man kann sich schwer festlegen, denn eine Online Seite ist kein statisches Medium. Sie wächst und schrumpft je nach Inhalt, aber wenn man hier so eine Größenordnung zwischen 2000, 3000 oder 5000 Pixel wählt, ist das kein Problem, denn man kann es immer noch anpassen und verkleinern. Hier in dem Fall wäre z. B. 4300 Pixel ganz interessant. Dann lege ich das Dokument an. Man sieht, das ist so ein Schlauch, und ich kann etwas weiter reinzoomen, und mit meiner Arbeit im Prinzip beginnen. Der nächste Step ist die Übertragung der einzelnen Elemente, die ich mir in meinem "Wireframe" vorher schon erstellt habe, Also die Platzhalter, dass ich weiß, wo erscheint hier eine Grafik, wo ein Text, und dergleichen. Das habe ich schon vorbereitet Das finden wir jetzt hier in diesem Dokument, und da habe ich also an der Stelle bereits meine Platzhalter eingefügt, wie ich mir das vorgestellt habe, entsprechend den Abmaßen, und die muss ich jetzt mit dem ausgewählten Bildmaterial füllen. Habe ich das zu dem Zeitpunkt noch nicht, dann kann ich da auch das genau so stehen lassen, aber irgendwann kommt man zu dem Punkt. Ich wähle nun mein Grafikmaterial aus. InDesign bietet da eine tolle Möglichkeit -- gehe mal wieder auf die Ganzansicht, und zwar über "Datei platzieren", und hier kann ich mir nun die Fotos, die ich in die engere Auswahl genommen habe, alle mit einem Schlag öffnen. Die kleben jetzt so hier an der Maus. Ich brauche nichts anderes zu tun, wie in die jeweiligen Platzhalter für meine Grafiken die richtigen Fotos hineinsetzen. Ich kann auf die richtige Größenverhältnisse verzichten. Das ist alles nachträglich anpassbar. Ich schätze, so ähnlich wie auch in ihrem Satzprogramm. Auf jeden Fall klicke ich hier drauf, das passt für die obere Größe. Hier habe ich in der Reihenfolge das falsche Bild. Also ich muss jetzt durchblättern. Das ist genau das Bild, das klicke ich jetzt hier hin. Hier haben wir die Küste und ganz unten eine Beschreibung. Und damit habe ich mein Bildmaterial entsprechend eingetragen. Auch das wäre jederzeit nachträglich austauschbar. Es ist so, dass man das vernünftig setzen muss. Der nächste Step ist das Beschäftigen mit den Inhalten, das heißt mit dem Text, mit der Typographie. Ich habe hier bereits Mustertexte drin , da hilft ein Satzprogramm, in den meisten Fällen weiter. Ich öffne ein Dokument, ganz gleich, wo ich jetzt bin, ich möchte das nur demonstrieren. Wenn ich hier einen Textrahmen aufziehe, habe ich über InDesign die Möglichkeit mit "Schrift" "Platzhaltertext füllen" und das ganze kann ich jetzt formatieren, mit anderen Werten belegen, also zum Beispiel dass ich alles jetzt als Exo darstelle, Exo Regular. Das Ganze etwas größer mache, Abstände erhöhe, Das ist natürlich sehr schön, wenn ich aus einem Satzprogramm heraus die Möglichkeit habe, Platzhaltertexte zu füllen. Ich kann mir zuvor genauso meine Textrahmen eröffnen. Habe ich die Möglichkeit nicht, hole ich mir diese Mustertexte, diese Blindtexte zum Beispiel aus dem Web. Ich kann das wieder schließen und werde das speichern. Der nächste Schritt: Nachdem ich Inhalte eingetragen habe, ist die Formatierung des Dokumentes, und da muss man bereits beginnen, von der Struktur und von dem Aufbau her. Zur Zeit befindet sich alles in einer Ebene. Hier bietet sich an, das Ganze in Ebenen anzuordnen, die bereits so strukturiert sind wie später auch ansatzweise eine Webseite strukturiert sein kann. Man kann folgendes machen, das ist eine Vorgehensweise, die würde ich Ihnen wirklich empfehlen. Ich lege mir jetzt eine weitere Ebene an und die bezeichne ich als Header, ich wähle bewusst die englischen Begriffe, weil uns diese Begriffe auch bei der HTML-Programmierung wieder begegnen werden, zwar nicht eins zu eins, aber ein "Head" meint später genau diesen "Header", und das bestätige ich mal mit "OK". Jetzt muss ich mir nur Gedanken machen, was soll in diesem Header kopiert werden. Das entspricht genau hier oben dieser Einstellung, ich markiere mir diese beiden Elemente Text und Hintergrundbild, schneide das aus, wechsele in den Header und füge das an der Originalposition ein. Das Gleiche kann ich hier unten mit dem Footer machen. Ich füge also eine neue Ebene ein, nenne ihn Footer und Footer steht für den Fußbereich. Also sollte ich das auch an den Fußbereich ziehen, also ganz nach unten, und verfahre ich nach gleicher Manier. Ich markiere die beiden unteren Bereiche, schneide die aus, und kopiere die an gleicher Stelle wieder ein. Das Verfahren wird deutlich, und alles was jetzt in der Mitte der Seite steht, das ist das was hinterher dann auch meinen eigentlichen Contentbereich ausmacht, und da könnte man zum Beispiel einen Namen "Section" vergeben der wird uns nämlich ebenfalls wieder begegnen. wenn wir es mit HTML zu tun haben. und jetzt besitzen wir eine genaue Vorstellung davon, wie so ein Dokument hinterher auch in HTML aussehen soll. und haben das in InDesign umgesetzt. So können Sie auch in ihrem Satzprogramm oder Programmen verfahren. Sollte man die Möglichkeit der Ebenen nicht haben, muss man sich klar darüber sein, welche Bestandteile eines Mockups in welche Bereiche einer HTML-Seite hinein sollen. Diese drei Bereiche, die kann man sich übertragen und sei es nur in Gedanken. Aus diesen drei Bereichen besteht schwerpunktmäßig der Inhalt einer Website.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 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!