Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML und CSS für Designer

Umsetzung des Einstiegs-Sichtbereiches <header>

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ebenen im Anzeigebereich wie Kopfzeile, Fußzeile und Inhaltsbereich sind mit HTML-Konstrukten fast 1:1 abzubilden.

Transkript

Nachdem wir den "Head"-Bereich in dem HTML-Dokument abgeschlossen haben wollen wir jetzt sehen, dass wir die Inhalte aus dem InDesign-Dokument hier in den Browser bekommen. Das beginnt hier oben ebenfalls in dem Bereich "Header" ich sichere mal den ganzen Rest und blende alle Ebenen aus, die ich nicht brauche und wie man sieht, betrifft es im Grunde nur diese beiden Objekte. Jetzt kommt es darauf an, wie Sie etwas eintragen in einem HTML-Dokument. Wir sehen hier eine Grafik und selbstverständlich lassen sich Grafiken auch direkt in einem Text-Körper von HTML unterbringen Wir sehen aber auch, dass oberhalb dieser Grafik im Vordergrund ein Text ist. Sie haben zwei Möglichkeiten: Entweder Sie schreiben den Text direkt in die Grafik, speichern dann Text mit Grafik als Grafikdatei ab und binden diese ein. Das ist nicht empfehlenswert, weil, wenn Sie den Text in eine Grafik einbetten, dann ist das kein Text mehr, sondern eine Bilddatei. Bilddateien haben in HTML-Dateien den Nachteil, dass die Texte, die sich dort befinden von Suchmaschinen nicht erkannt werden. Also geht man wie folgt vor: Eine Möglichkeit ist, dass man die Grafik, und das wird auch bei uns der Fall sein, in den Hintergrund legt, das heißt eine Art "background"-Bild macht und dieses background-image, das ist Aufgabe der Cascading Stylesheets, also betrifft uns im Moment gar nicht. So müssen wir im Wesentlichen nur sehen, dass wir den Text in unserer HTML Dokument übertragen, Nicht mehr und nicht weniger. Es ist relativ einfach, da das ein wichtiger Text ist, empfiehlt es sich hier die Sache als Überschrift umzusetzen, und schauen wir noch einmal kurz an die Stelle mit den Absatz- und Zeichenformaten. Hier haben wir tatsächlich, wenn ich mit der Maus hier rein klicke, - ich hole das mal kurz raus - das Absatzformat "Header 1" und wenn wir unten reinklicken das Zeichenformat "Header 1 span" und das bilden wir nun einfach in dem HTML-Dokument ab, Ich wechsele wieder hierhin zurück. und das Grundgerüst haben wir bereits vorbereitet. Im Textkörper gibt es einen Container, so nennt man einen öffnenden bis zu einem schließenden "Tag", kann man sich gut merken: da packt man was rein, das macht man auch bei einem echten Container. Hier hinein kommt eine Überschrift und die hat den Namen H1. Je nachdem, wie Sie arbeiten, oder wenn Sie sich an H1 bis H6 halten, dann kann man sehr schön nachschauen, das, was Sie hier im InDesign Dokument als "Header 1" bezeichnen, das wird ins HTML Dokument mit H1 übernommen. Jetzt kommt "Schottland" und danach haben wir "Reif für die Insel" dann schließt sich zunächst einmal die Überschrift wieder. Das ist wichtig, also hier wieder der Schrägstrich. In den Titeln und so weiter, haben wir hier einen Bindestrich, den brauchen wir nicht, weil hier ein Zeilenumbruch stattfindet, und dieser Zeilenumbruch, den nimmt man mit dem Befehl "br". Das steht für "Break". Das ist etwas anderes als ein Absatz, Es gibt in Dokumenten ein "shift-return", den direkten Zeilenumbruch und es gibt ein "echtes Return" und das erzeugt einen neuen Absatz. Hier ebenso. "br" ist das "Shift-Return" und der richtige Absatz später ist das "p" Wir müssen noch dieses Zeichenformat "Header 1 span" hier rein bekommen. Auch das ist kein Problem, dafür gibt es den Befehl "span" und den muss ich dann hier hinten wieder schließen also wie man hier wieder sieht, sehr viele Gemeinsamkeiten zwischen den Absatz- und Zeichenformaten. Das ist jetzt alles, was wir machen müssen um den Text als Überschrift in den Header hineinzubekommen. Ich speichere das Dokument ab mit Command-S b.z.w. Control-S und aktualisiere den Browser einfach. Und wie man sieht, haben wir jetzt genau diesen Text hier drin stehen Natürlich nicht in dem Aussehen, aber das kommt später. Der Text ist bereits Bestandteil der HTML-Seite.

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!