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

HTML und CSS für Designer

Zeichenformate

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Auch Zeichenformate erleichtern in CSS die Übernahme von Einstellungen, wie sie in den Kreativprogrammen üblich sind.

Transkript

Sie kennen die Vorgehensweise, wie Sie Absatzformate aus InDesign in das Stylesheet der HTML-Datei übertragen. Was aber noch fehlt, ist die Übertragung und die Übernahme der Zeichenformate, beispielsweise hier unten anhand des Footers. Wir machen hier einen Doppelklick rein, wir haben "Header 3", und in "Header 3", nochmal etwas kleiner geschrieben, die Zusatzzahl, das ist der Subfooter, oder eben auch umgesetzt mittels des "span"s. Schauen wir uns an, was wir hier haben: Das ist also die Größe 49, und 49 durch 16, gibt ungefähr 3,1, also knapp 3,06 und aufgerundet 3,1 - das reicht. Dann fällt auch noch auf, dass hier der Abstand etwas verringert wurde. Da muss man ein bisschen ausprobieren, je nachdem, wenn man keinen direkten Wert dazu finden kann, das ist nicht immer gleich. An der Stelle der Hinweis: Diese 16, das ist eine Richtlinie, das ist kein fixer Wert. Nur damit man ansatzweise in die Richtung kommt. Sie werden z. B. feststellen, wenn sie die Größenordnung dieser Überschrift ausrechnen, dann kommen sie eigentlich auf 4,3 rem, und das passt aber nicht, ist zu groß. Also muss ich hier das Ganze ein bisschen anpassen. Das ist immer nur ein Richtwert, der Rest haut aber ganz gut hin. Schauen wir uns kurz mal an, wie unser Dokument in der Zwischenzeit aussieht. Und zwar habe ich hier bereits die blauen Überschriften. Das sieht schon fast so aus wie in dem InDesign-Dokument. Die sind schon angekommen. Was noch fehlt, ist hier unten das Anpassen dieser unteren Zeile. Das machen wir jetzt noch gerade. Wie funktioniert das? Hier ist nichts Neues drin, mit einer Ausnahme: Die "section" "h2", diese Überschrift, die greife ich jetzt noch gerade auf. Wir haben hier eine Kursivüberschrift, nach Vorgabe des InDesign-Dokumentes. Kursiv ist in den Zeichenangaben, im Zeichensatz hier "400 italic". "400" selbst ist der ganz normale "regular"-Font, "400 italic" ist der Stil, dass es kursiv ausgegeben wird. Wenn ich nun aber mit "font-weight" nur 400 angeben kann, dann muss es einen weiteren Befehl geben, mit dem ich eben diesen kursiven Zeichensatz definiere, und das ist "font-style", das kommt ebenfalls noch dazu. Man kann hier kein "400 italic" hinterschreiben, das funktioniert nicht. Dann hier die Übernahme der Farbe, das ist das Blau aus dem InDesign-Dokument. Das ist nichts großartig Neues, bis auf dieses "font-style" für italic. Kommen wir zur Fußzeile: Ich habe schon Markierungen reingemacht, dass man das besser erkennen kann und besser findet. Hier muss ich nun nichts anderes machen wie entsprechend im Footer. Dann kommt hier ein Hinweis hin, um welchen Bereich in dem Footer es sich handelt. Das ist die Überschrift "H3", und der ganze Trick ist nun, ein Zeichenformat dort zuzuweisen, wo ein "span" steht, indem man einfach diesen Begriff "span" z. B. dort einträgt. Jetzt haben wir die Fontgröße, die ich anpassen muss. Da wir ja von den "rem" ausgehen, ist das jetzt relativ leicht. Ich rechne mir das ganz normal aus und komme auf 3,1 rem. Würde ich jetzt zum Beispiel auf "em" gehen, dann müsste ich in der Relation zu dieser Angabe arbeiten. Also ist das "rem" eigentlich die wesentlich bessere Wahl. Schauen wir uns an, was passiert. Ich scrolle nach unten, aktualisiere, und das sieht schon ziemlich gut aus. Vielleicht noch ein bisschen fetter, das mag aber sein, dass das täuscht, weil es grau ist und das andere ist weiß. Das können wir uns im Moment an der Stelle nicht so gut einschalten. Und damit müsste man lediglich jetzt alle restlichen Aspekte zuweisen, was den Textinhalt und die Fußzeile und natürlich den Header angeht. Der Header ist aber ein Sonderfall, es ist jetzt schwierig, im Header die weiße Überschrift zu definieren, weil auf weißem Hintergrund sehen wir die nicht so gut. Zweitens haben wir dort eine Besonderheit mit den Grafiken bzw. auch mit der Hintergrundgrafik, der "background"-Grafik. Ansonsten ist im Wesentlichen alles drin, ein paar Abstände fehlen noch, und Sie sind jetzt in der Lage, selber die Textzzuweisungen aus dem InDesign-Dokument, also Zeichenformate, Absatzformate, weitestgehend in ihre CSS-Datei zu übertragen. Vielleicht eine Anmerkung noch zu dieser "span"-Geschichte. "span" funktioniert in dieser Weise, wenn das im HTML so beschrieben ist. Es kann aber vorkommen, dass Sie mehrere davon brauchen. Vielleicht wollen Sie jetzt auch noch den Namen anders darstellen. Wenn ich jetzt hier ein erneutes "span" hineinschreibe, dann bringt das nicht viel, weil, er kann das ja nicht unterscheiden, Dafür gibt es dann die Möglichkeit, eine sogenannte Klasse zu definieren. Auch da Unterschiede zu IDs und Klassen, damit will ich Sie gar nicht belasten. Das Einzige, was interessant sein könnte für die Zukunft, ist die "class"-Angabe. Dann schreiben sie hier einfach rein, z. B. "Vorname", können sie frei vergeben. Ich speichere dass mal ab, gehe dann in den Footer und sage nun: gleiche Variante, "footer h3 span .vorname" und dieser Punkt, das ist der Zugriff auf diese Klasse. Ich speicher das mal als "rot" ab, lass das aktualisieren und jetzt sieht man, gibt es ein rotes Wort, nämlich meinen Vornamen. und das geschieht dann über diesen Punkt und diese Klassenangaben. Anstatt direkt auf "h3", auf "span", auf "p" etc. zuzugreifen, können Sie, wenn ich auch hier eine Klasse angebe, z. B. eben Vorname. Ich aktualisiere das und nehme das hier mal raus, komplett weg. Das soll nur die Klasse "vorname" sein. Dann sehen Sie passiert jetzt Folgendes: aktualisiert und schon ist der Absatz rot. So dürfte man ganz gut zurechtkommen und dann die meisten Änderungen an Zeichenformaten und Absatzformaten aus dem InDesign-Dokument in das CSS-Dokument übertragen können. Ich mache das Ganze rückgängig, weil, das wollen wir ja nicht. Das diente der Ausführung und Erklärung, und damit wissen Sie Bescheid.

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!