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

Das HTML-Grundgerüst

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein InDesign-Dokument besitzt eine bestimmte Struktur: nicht sichtbare Inhaltsbereiche wie Dokumentinformationen und die Inhalte selbst, in Ebenen und Zeichenflächen angeordnet. Das Prinzip gilt ähnlich auch für ein HTML-Dokument.

Transkript

Starten wir die HTML-Programmierung mit einem Blick in das Vorgabedokument, das Design Dokument mit InDesign. Ein Dokument, was wir im Vorfeld sauber gestaltet haben in Form eines Headers, einer Section und eines Footers. Zusätzlich gibt es Vorgaben, die wir hier über den Menüpunkt "Datei" und den Dokumentvorgaben beziehungsweise "Dokument einrichten" erhalten, nur das wir HTML keine direkten Maßangaben vergeben, zumindestens jetzt noch nicht -- später in CSS wäre das möglich, aber im wesentlichen gibt es dort durchaus Parallelen. Ich öffne meinen Editor "Atom" und gehe in die Programmierung. Und was immer am Kopf des Dokumentes erscheint -- da gibt es kein Wenn und Aber -- das ist ein Sonderbefehl, damit der Browser weiß, mit welchem Sprachstandard er es zu tun hat, und das nennt sich "<!doctype html". Dieser "<!doctype html", der ist erst so simpel und schön übersichtlich seit HTML5, denn vorher haben sie dort einiges an Attributen und Einträgen drin gehabt und da muss man immer schauen, was genau hat man denn jetzt. Mit HTML5 muss man nur darauf achten, dass nichts vor dieser Zeile geschrieben wird. Alles andere folgt nun danach. Damit wir einen kleinen Überblick haben, schiebe ich das ganze mal nach links. Das eigentliche HTML-Dokument selbst, das muss nun im Wesentlichen nur das Abbilden. Was wir hier im Hintergrund jetzt ansatzweise zu sehen bekommen und was hier den kompletten Dokument Körper ausmacht -- ich mache mir ein neues Dokument auf und gehe in den Web-Bereich -- ich hätte gern hier so 1240 irgendwas und dann bekomme ich -- das sieht nach Querformat aus, ist aber egal -- ich bekomme ein Dokument-Körper, und dieser Dokument-Körper, das ist im wesentlichen das -- habe ich hier in HTML -- was ich mit dem Befehl HTML umsetze, Da das ganze ein Container ist, genauso wie das Dokument im Hintergrund ein Container für alle Inhalte ist, ist das auch hier in HTML der Fall, und dieser Container besteht im wesentlichen aus zwei Bereichen. Zum einen aus dem Bereich wie auch hier im Hintergrund das Dokument, bei dem man sehen kann. Dieser Bereich hat den Namen "body", und kann man sich auch ganz gut merken, von Textkörper -- nicht bezogen auf Text -- es ist auf jeden Fall ein Dokument-Körper. Dieser Behälter nimmt alle Objekte auf, die wir hinterher anzeigen lassen möchten. und die vor allen Dingen auch der Benutzer zu sehen bekommen soll. Dann gibt es einen weiteren Bereich -- der heißt "head", also Kopf, und dieser "head"-Bereich, der ist bis auf eine Ausnahme dafür zuständig, dass hier Informationen eingetragen werden, die für die Struktur des Projektes, die Struktur der HTML-Seite wichtig sind. Teilweise auch für Funktionen und für externe Einbindungen wie zum Beispiel eine CSS-Datei- Auch dafür gibt es ein Gegenstück in den Kreativprogrammen Ich gehe auf "Datei" "Dokument einrichten" bietet InDesign den Infobereich, und wenn ich jetzt zum Beispiel diesen Infobereich nach oben setze -- ich sage mal um 300 Pixel -- dann erhalte ich hier so ein Sektor, wie man sieht, und in diesem Sektor in diesem 300 Pixeln, dorthinein kann ich dann das ein oder andere schreiben. Ich habe das schon mal vorbereitet. Webdesign-Entwicklung, also alles das, was mit diesem Magazin zu tun hat. Genauso muss man sich das vorstellen, passiert das hier oben mit dem Dokument. Es gibt eine kleine Ausnahme, und zwar der sogenannte "title" -- auf englische Sprachsyntax achten -- entspricht dem, was Sie in der Registerkarte angezeigt bekommen. Wenn ich jetzt hier reinschreiben würde, "Schottland - Reif für die Insel", entspräche das einem Dokument-Titel in dieser Art und Weise. Wenn ich das 1 zu 1 übernehmen müsste, würde jetzt hier Website-Layout stehen oder man schreibt Reisemagazin Schottland oder was auch immer. Dieser Titel ist dafür zuständig, dass in einem Webbrowser dieses Dokument unter dem Namen angezeigt wird und später -- das ist noch viel wichtiger -- danach auch gesucht wird. Das heißt, die Suchmaschinenoptimierung, die funktioniert zu einem großen Teil in Verbindung mit diesem Titel, wenn Sie also mal die Googlesuche bemühen und Suchbegriffe eingeben, die Hauptlink-Bezeichnungen, die aufgelistet werden, sind in vielen Fällen genau diese Titel. Und damit ist dieses HTML Grundgerüst im Wesentlichen schon fertig, Es gibt noch ein paar weitere Sachen, die man noch hinzufügen kann, aber das Grundgerüst selber benötigt bis auf ein paar Kleinigkeiten -- keine weiteren Einträge mehr. Es gibt noch einen weiteren Punkt, den setzen wir in einem Schlag mit um. Und zwar ist das der Ebenen-Bereich aus unserem Vorgabendokument, Das kann ich fast nahezu eins zu eins zu übernehmen, da gibt es nämlich das Gegenstück in HTML mit der Bezeichnung "header", und das ist auch genau die Funktion, die später hier übertragen wird. Wie wir im Hintergrund sehen, das Titelbild und der Text, dann gibt es einen Container, der heisst "Section" und hier hinkommt all das, was hier als Artikel und Fließtext zu sehen ist und einen Container namens Footer, in den das hinein kommt, was wir hier ganz unten sehen, so eine Art Fußzeile, und das kann man sich das Grundgerüst abspeichern, abgesehen von diesen Titel, aber das wäre ein passendes Grundgerüst, und somit sind Sie bestens gewappnet, für die weitere Übernahme von HTML Objekten aus InDesign. Das müssen wir nur noch abspeichern, ich gehe unter "Website" und lege da einen speziellen Dateien Namen namens "index.html" an. Theoretisch gesehen, können Sie hier jeden beliebigen Namen vergeben. Nur die erste Datei, quasi die Hauptseite, die Startseite, sollte möglichst immer diesen Namen bekommen. "Start" wäre teilweise auch noch möglich, liegt aber am Webserver, mit "Index.html" ist die Wahrscheinlichkeit sehr hoch, das Sie es richtig machen. Das speichere ich, und damit sind wir vorbereitet.

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!