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

HTML und CSS für Designer

Typografie und Formatvorgaben

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Absatz- und Zeichenvorlagen werden in InDesign eingesetzt und definiert, damit diese später mit allen notwendigen Informationen in CSS umgesetzt werden können.

Transkript

Nachdem ich mich passend zu meinem Design für eine Typo bzw. eine Schriftart oder mehrere Schriftarten entschieden habe und sichergestellt habe, dass diese Schriftart sowohl für Browser, ein so genannter Webfont, als auch für mein Zeichen- oder Satzprogramm existiert, kann ich mit weiteren Angaben für das spätere HTML-Dokument beginnen. Fast jedes Programm, mit dem man Schriften bearbeiten, setzen und verwalten kann, bietet die Möglichkeit sog. Absatz und Zeichenvorlagen, oder Formate zu definieren. Das wäre die Vorarbeit für das spätere Arbeiten mit den Cascading Stylesheets. Ich habe das hier in der Form gemacht -- öffne das mal, damit man mehr sieht. Ich habe hier meine Zeichenformate in InDesign und ich habe Absatzformate. Solche Absatzformate -- klicke mal oben -- auf den großen Headertext. Hier sieht man, gibt's ein Absatzformat, das hat den Namen "Header 1" bekommen. Klicke ich hier in den Fließtext da unten, dann sehen wir den Namen "Header 2", und so gibt es ganz unten z. B. noch mal "Header 3" . Hier ist es sehr hilfreich, anstatt jetzt wahlos loszulegen dass man sich dort auch bereits schon wieder ein stückweit orientiert an dem, was später auch in HTML umsetzbar ist. Das, was Sie hier sehen, das sind so typische Vorgehensweisen. Wir haben Überschriften von insgesamt 1 bis 6, und diese Überschriften, die haben eine hierarchische Bedeutung, das heißt, es ist tatsächlich so, dass das Wichtigste in einem "Header 1" untergebracht werden sollte, dann folgen die nächsten Punkte, wie z. B. hier die Unter-Überschriften. Das wäre hier "Header 2" oder vielleicht auch 3 und 4, und als Überschrift, das unwichtigste, dann maximal in "Header 6". Sie müssen nicht alle verwenden, ich habe hier auch nur 3 Stück, aber sie sollten das so strukturieren das wirklich von der Bedeutsamkeit der Überschrift auch für die Suchmaschine diese Reihenfolge eingehalten wird, und so geht das dann weiter wenn ich jetzt z. B. eine Überschrift habe, die "Header 1", dann gibt es einen Teil, der sieht anders aus, und das ist nicht mit einem einzigen Format zu realisieren, sondern das ist ein Unterpunkt. Wenn man da jetzt auf die Zeichenformate guckt, springt er von dem normalen Absatzformat "Header 1" -- bei klicken in diesem Abschnitt -- hier oben im Zeichenformat auf "Header 1 span". Ich hatte das jetzt immer so genannt, um da auch später die Verbindung besser aufbauen zu können. Hier handelt es sich um ein spezielles Zeichenformat, was noch einmal zu einem Absatzformat zugewiesen werden kann. Das kennen Sie hier aus einem Satzprogramm heraus. Wahrscheinlich genauso und auf völlig identische Weise wird das hinterher später in einem HTML-Dokument, bzw. mit Cascading Stylesheets umgesetzt. Das gleiche Spiel geht noch weiter mit Fließtext. Hier unten habe ich Absatzformate für den eigentlichen Fließtext. Das habe ich mal als Page bezeichnet, auch das wird uns wieder begegnen hinterher. Dann besondere Abläufe wie stellvertretend jetzt hier für alle solche Objekte. Eine Aufzählung, die habe ich mal als "ordered list" bezeichnet. Damit hätten wir die Absatzformate durch. Im Footer gibt es auch einen "Subfooter 1" oder "Subfooter span". Was noch übrig bleibt, sind z. B. Hyperlinks. Ich habe hier -- mal draufklicken -- sieht man ein Zeichenformat "Hyperlink". Wenn Sie ein Programm verwenden, wo sie auch Hyperlinks mit setzen können das kann InDesign, ich klicke mit der rechten Maustaste hier drauf, gibt es die Möglichkeit, einen Hyperlink zu bearbeiten oder einen zu erstellen. Ich rufe das mal kurz auf, und da sieht man da steht jetzt z. B. ein Link zu lynda.com drinnen, wir könnten auch wählen "video2brain" egal, das steht an anderer Stelle. Sie können hier Hyperlinks eintragen und somit bereits in der Entwicklung oder für sich selber, wenn Sie hinterher das Ganze auch umsetzen, die Hyperlinks tatsächlich auch mit Informationen belegen, wo der Sprung hingehen soll. Das ist eine ganz angenehme Geschichte. Damit habe ich Zeichen- und Absatzformate in meinem Vorlagedokument erstellt. Zusammenfassend, haben wir nun ein Satzdokument aus einem Programm wie InDesign, das eine Ebenenstruktur besitzt wie sie auch in einer HTML Seite hinterher umzusetzen ist, und dieser Bereich der Ebenen, das ist die Aufgabe von HTML plus die Inhalte, die wir sehen, und alles, was wir weiter links finden: Zeichenformate, Absatzformate, die Farben, die Breiten, die Abmaße -- das ist Aufgabe der Cascading Stylesheets. Sie sehen, da gibt es durchaus bereits an dieser Stelle Berührungspunkte.

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!