Transkripte
1. Willkommen zum Kurs!: Ihr Posteingang ist wahrscheinlich voll von E-Mails,
Aktionen, Verkäufe, Geburtstagskarten gefüllt , Sie nennen es. Aber haben Sie sich jemals gefragt, was diese E-Mails ankreuzen lässt? Hallo, ich bin Vanessa von Bios Creative Company. Am Ende dieser Klasse haben
Sie die Fähigkeiten in Ihrer Toolbox, die Sie benötigen, um HTML-E-Mails ohne Drag & Drop-Editor zu entwickeln. Mit Vorkenntnissen von HTML und CSS wird diese Klasse einfacher machen, ist
aber keine Voraussetzung. Für das Klassenprojekt entwickeln Sie eine HTML-E-Mail, indem Ihre Heimatstadt oder eine Stadt
vermarkten, die Sie besuchen möchten. Jedes Video in dieser Klasse baut auf Wissen aus früheren Videos auf, und jedes Video bietet neue Schritte für Ihr Klassenprojekt. Jetzt fangen wir an.
2. Kostenlose Tools für den Kurs: In erster Linie benötigen Sie einen Quellcode-Editor. Als Mac-Benutzer bevorzuge ich Atom
, eine Open-Source-und leichtgewichtige Anwendung, die extrem anpassbar ist. Eine kostenlose Option für Windows-Benutzer ist Notepad ++. Fühlt sich dem Editor sehr ähnlich an, aber es hat Funktionen zum Schreiben von Code gemacht. Wenn Sie bereits Adobe Creative Cloud haben, können
Sie Dreamweaver verwenden, aber jeder Quellcode-Editor wird Ihrem Zweck dienen. Natürlich gibt es viele weitere Optionen zur Verfügung,
aber diese sind, wo ich Erfahrung in der Verwendung habe und fühle mich zuversichtlich zu empfehlen. Grafiken in Ihrer E-Mail dienen dazu, die Interaktion und Markenbindung zu fördern. Ich verwende Illustrator und Photoshop für meine tägliche Arbeit. Aber Sie können ein kostenloses Tool wie Canva oder Adobe
Spark verwenden , um Ihre Grafiken zu erstellen, wenn Sie keinen Zugriff auf Adobe-Tools haben. Wenn Sie noch keinen Quellcode-Editor haben,
laden Sie eine der kostenlosen Optionen herunter, die mit Ihrem Computer für diese Klasse
kompatibel sind, und installieren Sie sie. Links zu allen erwähnten Tools, plus ein paar weitere, sind in den Klassennotizen verfügbar.
3. Wie funktioniert E-Mail?: Der erste Schritt zum Codieren von E-Mails besteht also darin, zu verstehen, wie sie funktionieren. Nicht-textbasierte E-Mails werden mit HTML, CSS und Bildern erstellt. Es ist, als ob Sie eine speziell erstellte Webseite in Ihrem Posteingang erhalten. Es gibt jedoch einen Unterschied, Webseiten sind mit Divs und Semantic HTML strukturiert. E-Mails werden mithilfe von Tabellen strukturiert. Wenn Sie mit der Geschichte des Webdesigns vertraut sind, wissen
Sie es wahrscheinlich Mitte bis Ende der 90er Jahre, Designer würden Tabellen verwenden, um ihre Websites zu gestalten. Aber das sind nicht die 90er. Also, warum zum Teufel verwenden wir noch Tabellen für E-Mail-Design? E-Mail-Clients sind das, was Sie verwenden, um Ihre E-Mails zu erhalten, wie Gmail oder Outlook oder andere, von denen Sie möglicherweise nicht gehört haben, wie M Client oder Mailbird. Es gibt so viele verschiedene Clients für Benutzer aber nicht alle von ihnen interpretieren HTML auf die gleiche Weise. Ältere E-Mail-Clients oder sogar einige
der neuesten unterstützen kein neueres HTML, wie Divs. Ohne zu 100 Prozent sicher zu sein, wie Ihr Empfänger die E-Mail erhalten wird, ist
es am besten, auf der sicheren Seite zu sein und das, was Sie wissen, funktioniert in 100 Prozent der E-Mail-Clients.
4. HTML-E-Mails erklärt: Okay, es gibt also drei Komponenten, die Sie alle kennen müssen, um ein Tabellendesign zu erstellen. Sie haben Ihre Tabelle, das sind die öffnenden und schließenden Tabellen-Tags. Dann haben Sie Tabellenzeile oder TR, und dann haben Sie die Tabellendaten, und Sie verschachteln, dass innerhalb der Tabellenzeile Zellen oder Spalten zu erstellen. Also, das ist eine Zeile, und wenn Sie eine weitere Zeile darunter erstellen möchten, können
Sie sie entweder erneut schreiben oder einfach einfügen. Lassen Sie uns eine Hallo Welt hinzufügen, aktualisieren, und Sie können sehen, dass es eine weitere Zeile darunter hinzugefügt. Aber es sieht nicht nach viel aus. So können Sie bestimmte HTML-Attribute verwenden, um das Erscheinungsbild Ihrer Tabelle zu verbessern. Also, ein HTML-Tabellenattribut, das wir jetzt hinzufügen werden, normalerweise möchten Sie den Rahmen auf Null gesetzt haben, aber wir werden einen Rahmen von einem Pixel für jetzt hinzufügen. Auf diese Weise können Sie sehen, was alle anderen HTML-Attribute tun. Also, wir werden uns erfrischen. Sie können also sehen, dass es einen Rahmen um die beiden Zeilen und die beiden Zellen hinzugefügt hat. Fügen wir hier einfach eine weitere Zelle zu jeder Zeile hinzu, damit es ein bisschen mehr zu spielen gibt. Ein weiteres wichtiges Attribut, das Sie verwenden möchten, ist das Zellenauffüllen. Also, wenn Zellenauffüllung auf Null gesetzt ist, ist
es ziemlich der Standard. Ich verwende gerne eine Zellauffüllung von etwa Null. Es gibt eine schöne Menge an Platz. Also, das ist irgendwie wie das padding-Attribut in CSS. So können Sie sehen, dass es 30 Pixel den ganzen Weg um den Inhalt innerhalb der Zelle
hinzugefügt. Sie können auch Zellenabstand verwenden, der ein wenig wie Ränder funktioniert, es wird tatsächlich Auffüllung zwischen den Zellen anstatt vom Inhalt hinzufügen. Wenn Sie also mit dem Box-Modell auf CSS vertraut sind, ist
dies wie mit einem Rand. Das ist ein Zellenabstand von Null. Sie fügen einen Zellenabstand von 30 hinzu. Sie können sehen, wie es die Zellen weiter weg von einander schiebt. Ändern wir das zurück in den Zellenabstand von Null. Hintergrundfarbe. Wenn Sie die Farbe Ihrer Tabelle ändern möchten, wäre BG Farbe. Lassen Sie uns das einfach ein schönes weiches Grau machen und erfrischen. Sie können sehen, dass es die Hintergrundfarbe geändert. Es gibt andere Attribute, die wichtig sind. Sie werden den Effekt jetzt nicht sehen, da dies nur eine Tabelle ist, und wenn Sie verschachtelte Tabellen hätten, wären
diese wichtiger, aber Sie haben valign, die vertikal ausgerichtet wird, wie Sie es möchten. Dann haben Sie eine Linie, die horizontal ausgerichtet wird. Es ist auch wichtig zu beachten, dass die meisten, wenn nicht alle von ihnen nicht in HTML5 unterstützt werden, aber sie funktionieren immer noch im E-Mail-Design. Sie können auch Inline-CSS anwenden, aber Sie sollten sich mindestens an HTML-Attributen halten, bis weitere E-Mail-Clients Inline-CSS verwenden.
5. Tabellen verschachteln: Ok. Nehmen wir an, Sie möchten eine E-Mail mit zwei Zeilen haben, und die erste Zeile hat eine Spalte, die sich den ganzen Weg über erstreckt, volle Breite. Die zweite Zeile hat drei Spalten, die gleichmäßig verteilt sind Sie nehmen 33 Prozent der zulässigen Breite ein. Es könnte also so aussehen, als ob Sie
hier nur eine Spaltenzeile und dann eine weitere Zeile mit drei Zellen im Inneren machen können. Also, leider können Sie es nicht so tun, weil einige der Breiten funky werden, wenn Sie eine Zeile
haben, die eine Zelle und dann eine andere Zeile direkt darunter hat, die drei Zellen hat. Es gibt also zwei Möglichkeiten, dies zu beheben. Sie können entweder eine Tabelle direkt nach der anderen platzieren,
oder Sie können eine Tabelle in einer anderen Tabellenzelle verschachteln. Also werden wir beide Optionen ausprobieren, weil sie beide unterschiedliche Looks erreichen, aber sehr ähnlich. Also, wenn wir zurück hierher gehen, fangen
wir an, indem wir diesen Tisch schließen. Dies wird also die Zeile werden, die eine Zeile mit voller Breite ist. Dann werden wir dies in eine separate Tabelle verwandeln, also werden wir nur diese ganze Zeile hier kopieren, das öffnende Tabellentag, Weise müssen Sie nicht das ganze Ding neu schreiben. Wir werden es einfügen und dann einfach Tab drücken, um das über zu bekommen. Wir werden speichern und zurückgehen und neu laden. Jetzt haben Sie eine Spalte mit voller Breite und drei Spalten darunter. Es hat jedoch ein wenig zu viel Polsterung hier und das liegt
daran, dass dies eine Zellauffüllung von 30 hat. Also, das wird 30 den ganzen Weg um die Tabelle hinzufügen, aber dann wird es 60 in zwischen jeder der
Spalten hinzufügen , und das liegt daran, dass es 30 auf jeder Seite der Zelle hinzufügt. Also, was wir tun könnten, um das loszuwerden, können
wir nicht einfach die Zellpolsterung
hier loswerden , weil das nur die Polsterung den ganzen Weg loswerden wird. Aber wenn es Ihnen gut ist, diese zusätzliche Polsterung dort zu haben, dann können Sie diese Methode verwenden. Wenn Sie das zusätzliche Auffüllen nicht möchten und Sie nur drei Spalten haben möchten, können
Sie eine Tabelle innerhalb einer anderen Zelle dieser Tabelle verschachteln. Also, wir werden diese Option ausprobieren. Also, gehen wir einfach rein und wir werden das rausschneiden. Dann werden wir diese Tabelle löschen, da wir sie nicht mehr brauchen. Wir werden nur all den zusätzlichen Speicherplatz löschen, den wir nicht brauchen. Also, ich werde eine weitere Tabellenzeile hier direkt unter der ursprünglichen hinzufügen, die Tabellenzeile mit voller Breite. Dann werde ich eine andere Tabellen-Datenzelle erstellen. Es gibt also eine Zeile in einer Reihe und eine Zelle in einer Zelle, also ist es eben. Dann werden wir nur eine andere Tabelle erstellen, und diese Tabelle benötigt keine Attribute, Sie können Attribute hinzufügen, wenn Sie sie benötigen, aber diese wird nur eine leere Tabelle sein. Wir werden das einfügen, was wir gerade geschnitten haben. Drücken Sie Speichern und gehen Sie zurück zum Browser und drücken Sie Refresh, und Sie können sehen, dass es immer noch eine 30-Polsterung um ihn herum hat, aber nicht diese zusätzliche Polsterung zwischen den Spalten. Das ist also einer der Vorteile, eine Tabelle innerhalb einer Zelle zu verschachteln
, ist , dass sie die Attribute übernimmt, die auf
die ursprüngliche Tabelle angewendet werden , z. B. das Zellenauffüllen um die gesamte Tabelle, aber es hat nicht die 30-Zellenauffüllung , die auf jede dieser Spalten angewendet werden. Sie werden sich daran gewöhnen, verschachtelte Tabellen zu sehen, da Sie auf diese Weise strukturiertere Designs erstellen. Aber jetzt, da Sie ein Verständnis für die E-Mail-Struktur haben, lassen Sie uns die E-Mail-Vorlage entwerfen.
6. Andere Tipps: Hier noch ein paar Tipps, bevor wir loslegen. Für diese Klasse können Sie die Bilder verwenden, die ich in der Projektdatei bereitgestellt habe, oder überprüfen Sie die Links, die ich bereitgestellt habe, und die Projektnotizen, um das Beste aus Ihren E-Mail-Grafiken herauszuholen. Ein großer Teil Ihrer Mailingliste öffnet die E-Mail auf ihrem Handy oder sie haben eine langsamere Datenverbindung. Seien Sie sich Ihrer Benutzer bewusst und machen Sie die Größe der Bilddatei so klein wie möglich. Ich habe einen Link in den Projektnotizen mit weiteren Informationen zur Optimierung Ihrer Bilder. Viele Designer werden ihre E-Mails in
Photoshop erstellen , bevor sie anfangen, Ihre E-Mail zu programmieren. Wenn Sie in Photoshop kein Mock erstellen können, erstellen Sie eine Skizze Ihrer E-Mail, um zu bestimmen, wohin alles geht. Wir werden nicht mobile responsive E-Mails und diese spezielle Klasse abdecken, aber das ist etwas, das getan werden kann. Weitere Informationen und Links finden Sie in den Projektnotizen.
7. Projekt: Erste Schritte: Also, lasst uns mit dem eigentlichen Projekt beginnen. In Ihren Projektnotizen wird
es also ein paar Downloads geben, die ich dort hinzugefügt habe. Es wird eine E-Mail-Vorlage geben, die
nur die leere Vorlage ist , mit der wir dieses Projekt beginnen werden. Es wird eine weitere HTML-Datei geben, die alle Bilder und Inhalte
enthält und alles, was bereits hinzugefügt wurde. Ich werde auch die Kopie und Bilder zum Download
zur Verfügung haben , wenn Sie Schritt für Schritt folgen möchten. Wenn nicht, können Sie Ihre eigenen Inhalte und Ihre eigenen Grafiken verwenden. Also, das ist die Vorlage, mit der wir beginnen werden, und das sieht jetzt so aus, in einem Browser. So, wie Sie sehen können, gibt es kein Logo, keine Fotos, keine Inhalte,
keine Schlagzeilen, keine Links, nichts. Ich habe diese Fußzeile hier drin gelassen. Sie können die Links für Ihre eigenen Inhalte austauschen, oder Sie können es einfach so lassen, wie es ist, aber Sie möchten CAN-SAM-konform sein und Ihre eigenen Abmeldelinks verwenden und
Online-Links ansehen und all die lustigen Sachen, die gesetzlich vorgeschrieben sind. Wenn Sie damit fertig sind, wird
es in etwa so aussehen. Wie Sie sehen können, können
wir die Hintergrundfarbe ändern, wir haben ein Heldenbild, eine
Überschrift, einen einleitenden Absatz,
drei Spalten den ganzen Weg über
und dann zwei Spalten unten hinzugefügt Überschrift, einen einleitenden Absatz, drei Spalten den ganzen Weg über . Also, lasst uns anfangen.
8. Projekt Teil 1: Einspaltige Zeile: Also, lasst uns direkt reinspringen. Also, alles, was ein Head-Tag und dieser HTML-Doctype sein wird, Sie wollen, um all das gleich zu halten. Dies sind nur einige clientspezifische Stile und einige Dinge , die dazu beitragen, dass der Inhalt in E-Mail-Clients ein wenig besser aussieht. Also, nur wenn wir einen kurzen Durchlauf machen, haben
wir einige Notizen, die ich speziell für Sie, die Skillshare Studenten, hinzugefügt habe. Dies werde ich Ihnen nur sagen,
wo Sie bestimmte Inhalte platzieren, wo bestimmte Dinge in der Fußzeile geändert werden sollten, damit Sie überspannt werden konform. All das gute Zeug, nur um die Dinge ein wenig einfacher zu machen, wenn dies das erste Mal ist , um mit einer HTML-E-Mail herumzuspielen. Also, wir werden mit dieser ersten Reihe beginnen. Also, diese erste Zeile hat eine grafische Überschrift und einen ganzen Absatz mit einem Link. Also, lassen Sie uns beginnen, indem Sie das Bild hinzufügen, und das wird nur auf diese Haupttabelle gehen hier. Also, innerhalb dieser leeren Tabellendatenzeile, gibt es nichts darin. Also, lassen Sie uns beginnen, indem Sie ein Bild-Tag öffnen und dann die Quelle hinzufügen, also ist es innerhalb des Bilderordners, und dann wird dies E-Mail Held genannt, sehr zu Recht. Wir werden dem E-Mail-Helden ein Alt-Tag hinzufügen. Das alt-Tag wird nur der gleiche Text sein, der auf dem Bild ist. Sie möchten alle Texte die ganze Zeit hinzufügen, da Sie manchmal Leute haben werden
, die einen Screenreader verwenden, um den Bildschirm lesen zu lassen, und dann wird es ihnen eine genaue Beschreibung, was das Bild tatsächlich ist, wenn sie können es nicht sehen. Sie möchten es auch hinzufügen, nur für den Fall, dass Sie Personen haben, die Bilder in ihren E-Mails auf diese Weise deaktiviert haben, können
sie die Bilder sehen, ohne sie herunterladen zu müssen. Manchmal schalten Benutzer sie aus Sicherheitsgründen aus, manchmal deaktivieren sie sie, um Daten zu speichern. Also, speichern Sie das. Gehen Sie zurück zur E-Mail-Vorlage und laden, und Sie können sehen, dass es das Bild hier hinzugefügt. Nun, wir werden diese Überschrift und Absatz hinzufügen. Also, ich werde einen Zeilenumbruch hinzufügen. Lassen Sie uns drei Zeilenumbrüche nur für ein gutes Maß haben, und wir werden mit einer Spanne beginnen. Sie können keine Überschriften-Tags im HTML-Design oder Absatz-Tags verwenden, Sie möchten Schriftart-Tags oder Span-Tags verwenden, denn das ist, was E-Mail-Clients alle verstehen können. Also, wir werden einige Inline-CSS hinzufügen, um dieses Span-Tag zu stylen, und wir werden die Schriftfamilie ändern. Du kannst es ändern, was immer du willst, aber ich benutze Arial, Helvetica, es ist ziemlich gut, Helvetica, San-Seriif, und lass uns die Farbe davon machen, lass es uns machen, lass mich dieses Blau ausprobieren, mal sehen, was Das Blau sieht so aus. Dann lassen Sie uns die Schriftgröße dieser Spanne machen, machen
wir es 30 Punkte. Lassen Sie uns eine Strichhöhe hinzufügen, nur um ihm ein wenig zusätzlichen Atemraum zu geben. Machen wir 140 Prozent. Aktualisieren. Geh zurück. Nachladen. Warum klappt das nicht? Weil ich nichts in das Span-Tag gesteckt habe, würde das helfen. Also, die Schlagzeile ist entdecken Sie Ihre neue Lieblings-Stadt, Periode. Speichern, erfrischen, schön. Fügen wir nun ein weiteres span -Tag darunter hinzu. Eigentlich, also müssen wir nicht noch einmal alles ausgeben. Kopieren wir einfach das öffnende span -Tag und fügen Sie es ein, und dann werden wir die Schriftgröße in etwas ändern für
einen Absatz besser lesbar ist. Lassen Sie uns 10 Punkte machen, und dann ändern wir die Farbe davon. Dies wird der erste Absatz sein, Sie wollen, dass er lesbar ist, wir wollen keinen vollen blauen Absatz. Dies wird ein 25272e Bild sein ist mein Favorit wie anthrazit schwarze Farbe zu verwenden, und wir werden diese Spanne Tag zu schließen. Dann aus dem Wort Dokument, das ich Ihnen zur Verfügung gestellt, lassen Sie uns kopieren und fügen Sie den Absatz in, und dann werden wir einen Link mehr erfahren hinzufügen. Jetzt gehen wir zurück und aktualisieren. Also, wie Sie sehen können, weil es sich um zwei Span-Tags handelt, werden
sie inline miteinander angezeigt. Im Gegensatz zum Absatz-Tag und einem Überschriften-Tag wird kein Zeilenumbruch selbst hinzugefügt. Also, wir werden das tun. Also, nach der Überschrift lassen Sie uns einfach zwei Zeilenumbrüche hinzufügen, speichern, aktualisieren, abkühlen. Etwas, das ich damit tun möchte, bevor wir einen Link hinzufügen, werden
wir eine HTML-Entität oder
ein Sonderzeichen hinzufügen , das eine Zeile ist, die so aussieht. Dieser kleine Pfeil nach rechts fügt ein wenig mehr Pop auf den Link, wie einige Leute sagen, und macht es nur ein wenig mehr klickbar suchen. Also, dies wird der rechte Pfeil genannt, aber es ist großartig in der Verwendung von &rarr oder rarr, je nachdem, was wir es nennen. Geh zurück. Aktualisieren. Also, wie Sie es sehen können, der süße kleine Pfeil da drin, und wir werden dieses Learn-more in einen Link einwickeln. Also, wir haben Anker-Tag, und dann die Referenz. Es funktioniert großartig, jetzt lassen Sie uns das Anker-Tag schließen, und wir werden dies zum Link machen, der innerhalb des Word-Dokuments ist. Fügen Sie es ein, und wir werden
Inline-CSS für diesen Link hinzufügen , um
die Farbe des Links zu ändern , weil es gerade jetzt nur der Standard ist, wie tief lila oder was auch immer es ist die Standard-Anker-Tags sind in Browsern in diesen Tagen. Also, wir werden eine Stilprüfung machen, genau wie auf der Spanne und dann sagen wir Farbe, und lassen Sie uns einfach das gleiche Blau in der Überschrift verwenden, Semikolon, schließen Sie das, aktualisieren. Jetzt haben wir eine schöne blaue Verbindung, die Links heraus. Wir werden auch wollen, um dieses Bild klickbar zu machen. Die meisten Leute, wenn sie in einer E-Mail klicken, werden
sie nicht auf die kleinen Links klicken, die sie normalerweise nur auf das Hauptbild klicken. Also, Sie werden in der Regel wollen, dass das Wichtigste in der E-Mail der Link im Heldenbild ist. Also, wenn wir zurück zum Bild hier und dann davor gehen, werden
wir nur ein Anker-Tag haben, und dann die h-Referenz, und dann schließen wir dieses Anker-Tag, und wir werden nur kopieren, dass gleiche Länge hier, fügen Sie das dort ein, und ich kann sehen, es ist anklickbar. Ein kleiner Trick, den Sie tun möchten, wenn Sie Bilder anklickbar machen,
manchmal, wenn Sie eine E-Mail-Clients einfügen, wird
es diesen wirklich seltsamen Rahmen um
anklickbare Bilder hinzufügen , die nicht wirklich mit dem Rest Ihres Designs . Sie können also einen Rahmen in einer Ansicht von Null zum Bild selbst hinzufügen, nicht zum Anker-Tag. Dann eliminiert das die Grenze, die Sie in E-Mail-Clients sehen werden. Also, es sieht so aus, als wäre es das für diese öffnende Intro Hero Bild Überschrift E-Mail. Ich mag diese Farbe auf dieser Überschrift nicht wirklich. Also, lassen Sie uns anpassen, machen Sie diese Überschrift die gleiche genaue Farbe wie der Absatz dort. Lassen Sie uns nun an den drei Spalten arbeiten, die sich unterhalb dieser öffnenden Zeile befinden.
9. Projekt Teil 2: Dreispaltige Reihe: wir nun die erste Zeile hinzugefügt haben, fügen
wir die zweite Zeile hinzu, die drei Spalten hat, die den ganzen Weg über. Also, im Moment, alles ist in dieser einen Reihe hier. Wir müssen also eine separate Zeile darunter hinzufügen,
also TR, TR und neben TR, natürlich, benötigen Sie TD, Tabellendaten. Das heißt, eine Spalte hinzuzufügen, da diese Tabellenzeile eine Spalte enthält, die darunter eine Spalte muss. Und dann werden wir eine weitere Tabelle innerhalb
dieser Spalte verschachteln , um das dreispaltige Aussehen zu erhalten. Es ist Spalte innerhalb von Spalten. Wir werden eine Tabellenzeile hinzufügen, da es, wie Sie sehen können, nur eine Zeile mit drei Spalten gibt. Wir werden drei Spalten hinzufügen, also drei TDs, speichern, neu laden. Du kannst nichts sehen, weil noch nichts drin ist. Jeder von ihnen hat also ein Bild. Also werden wir nur in den Bildern hinzufügen, Bild. Ich hoffe, ich mache es richtig. Bildquelle, in der Quelle
geben Sie dann Bilder Ordner und wir werden mit diesem beginnen. Speichern. Sie werden Ihr ALT-Tag hinzufügen. Ein Designer fügt immer ALT-Tags hinzu. Das ist Casa de Cadillac. Speichern. Und dann werden wir das Bild zum zweiten hinzufügen,
Bild, Quelle innerhalb des Bilderordners. Das ist die letzte Buchhandlung. Dann werden wir ein Alt der letzten Buchhandlung hinzufügen, die ein erstaunlicher Ort ist, den Sie gehen müssen. Bild, Quelle und diese dritte Spalte hier im Bilderordner. Und dann wird das Hollywood-Zeichen sein. Alt Tag, Hollywood-Zeichen. Sag einfach Hollywood. Wenn wir zurückgehen, erfrischen wir uns. Sie können die drei Bilder sehen. Sie sind schön in drei Säulen aufgereiht. Jetzt werden wir den eigentlichen Inhalt hinzufügen, also werden wir diese kleinen Untertitel
und einen Absatz und einen Link zu jedem einzelnen von ihnen hinzufügen . Also, was wir hier tun können, ist, dass wir einfach die Überschrift des Originals kopieren können. Kopieren Sie die Spanne des ursprünglichen Absatzes, so dass diese beiden Spannweiten und wir werden
sie einfach hier einfügen , damit Sie nicht alles noch einmal neu schreiben müssen. Und dann werden wir die Größe dieser Abschnittsüberschrift, die wir gerade hinzugefügt haben, verringern, die ursprünglich 30 Punkte betrug. Lassen Sie uns das einfach auf 20 Punkte ändern, machen Sie es ein wenig kleiner. Dann werden wir die Unterüberschrift aktualisieren, Hopplen, kann nicht gleichzeitig tippen und reden. Aktualisieren Sie nur, um zu sehen, wie es aussieht. Immer noch ein bisschen zu groß. Lass uns nur 16 Punkte machen. Was ist Cuppy große Inhalte aus dem Wort Dokument und vorbei hier drin. Speichern. Aktualisieren. Also, wie Sie wieder sehen können, genau wie hier oben, weil es sich nicht um Blockzeilen oder Inline-Elemente
handelt, es ist nur das Hinzufügen direkt neben dem Bild. Also, wir werden
eine Pause nach diesem Bild dort hinzufügen . Ich denke, wir können noch eine Pause hinzufügen. Das ist besser. Wir werden auch hinzufügen- lassen Sie uns hier eine Pause zu diesem Link hinzufügen, nur einer. Natürlich ist der Link jetzt auf eigene Faust. So können Sie sehen, dass sich die Dinge bewegen, aber es wird ein wenig anders aussehen wenn wir den Inhalt in diese beiden hinzufügen. Also lasst uns einfach alles kopieren. Eigentlich, nein, wir sollten wahrscheinlich den Link ändern, weil das nicht der richtige Link ist. Also, gehen Sie zurück zum Word-Dokument, kopieren Sie diese URL, fügen Sie diese URL, jetzt ist es drei URL. Lassen Sie uns nun einfach beide Bereiche und den gesamten Inhalt kopieren. Gehen Sie hier zur zweiten Spalte. Wir werden das dort einfügen, und dann werden wir nur die richtige Überschrift in diese Unterüberschrift einfügen. Buchhandlung. Aktualisieren. Kopieren Sie den richtigen Inhalt aus dem Word-Dokument. Fügen Sie es ein. Gehen Sie hier zurück und kopieren Sie die richtige Link-Adresse. Fügen Sie das hier ein, aktualisieren Sie es. Okay, es sieht besser aus. Nehmen wir das noch ein drittes Mal, fügen Sie das ein, und jetzt werden wir diese Unterüberschrift nehmen und das Hollywood-Zeichen setzen, und dann kopieren wir den richtigen Absatz. Fügen Sie dort den richtigen Absatz ein. Viele Designer kopieren und einfügen nur. Verknüpfungsadresse kopieren, diese URL über die ursprüngliche einfügen, und boom, aktualisieren. Ok, hier sieht etwas nicht aus. Also verlagert sich alles ein bisschen. Und einige dieser Absätze laufen einfach zusammen. Was wir also tun wollen, ist, dass wir hier einige HTML-Attribute zu dieser Tabelle
hinzufügen wollen . Wie Sie sich aus den vorherigen Videos erinnern, können
Sie Attribute hinzufügen, die sich nur auf die verschachtelte Tabelle und nicht auf die gesamte Tabelle auswirken. Also, was ich denke, sollten wir auf dieser verschachtelten Tabelle tun, lassen Sie uns eine Zellauffüllung von 10 Pixeln hinzufügen. Aktualisieren. Es sieht immer noch ein bisschen aus, aber jetzt haben wir 20 Pixel zwischen jeder Spalte, was viel lesbarer ist. Ich glaube, ich habe herausgefunden, warum das anders aussieht als diese beiden. Wie Sie sich erinnern, haben wir einen zusätzlichen Zeilenumbruch zwischen dem Bild und der Unterüberschrift hinzugefügt, aber wir haben ihn nicht zu den anderen beiden hinzugefügt, als wir alles kopiert und eingefügt haben. Also gehen wir einfach, diese beiden Pausen hier, lassen Sie uns einfach einfügen, dass nach dem zweiten Bild und nach dem dritten Bild,
speichern Sie es, aktualisieren, und jetzt können Sie sehen, dass alles perfekt aufgereiht ist. Also, das ist es für diese Spalte hier, also können wir jetzt zur letzten Zeile der E-Mail übergehen, die die zweispaltige Zeile ist.
10. Projekt Teil 3: Zweispaltige Reihe: Also jetzt werden wir hier eine neue Zeile hinzufügen, die zwei Spalten
hat und genau so aussehen wird, wenn wir damit fertig sind. Also gehen wir wieder rein und das ist die letzte Reihe, an der wir gearbeitet haben. Also werden wir eine Zeile unterhalb dieser Zeile hinzufügen und ein weiteres Kabel darin verschachteln. Also werden wir diese Zeile erstellen. Erstellen Sie diese Tabelle. Datenspalte, also jetzt ist es eine Spaltenzeile, und wir werden diese Tabelle darin verschachteln. Dann eine Reihe, mit zwei Spalten. Cool. Also, diese erste Spalte hat nur ein Bild. Also gehen wir zur Bildquelle, innerhalb des Image-Ordners, und das ist observatory.png. Ich werde Alt-Tag
des Griffith Observatoriums hinzufügen , schließen Sie das. Sie gehen zur zweiten Spalte, und so können Sie das Bild hier sehen. Also, diese Spalte, zweite Spalte wird die gleichen Untertitel und Absatzgrößen haben. So können wir zurück zum Code gehen und die Unterüberschrift und den
Absatz aus einer dieser Spalten kopieren und einfügen, und wir können einfach die richtige Überschrift
hineingeben. Wir können kopieren und einfügen aus dem Wort Dokument. Fügen Sie das direkt dort ein und kopieren Sie und fügen Sie die richtige Zeile hier ein. Sparen. Geh zurück. Aktualisieren. - Cool. Also, jetzt haben wir eine Reihe mit zwei Spalten. Aber wie das, was früher mit dieser dreispaltigen Zeile geschah, gibt es einfach nicht genug Platz zwischen diesen beiden Spalten. Also, wir gehen zurück zu der verschachtelten Tabelle. Genau hier und wir werden eine Zellauffüllung von 10 hinzufügen. Aktualisieren. Also, jetzt können Sie sehen, dass es 10 Pixel zu jeder Spalte hinzugefügt hat, was insgesamt 20 Pixel zwischen der Spalte macht. Gute alte Algebra, und es verschoben auch über dieses Bild um 10 Pixel und jetzt ist es perfekt mit dieser Zeile darüber. Also ja. Ich denke, das ist es für die Reihen. Auf das nächste Video.
11. Projekt Teil 4: Letzte Feinheiten: Hey, also sind wir fast fertig damit, dass diese Vorlage hier eher wie dieses fertige Ziel aussieht. Also, der erstaunlichste Unterschied zwischen diesen beiden ist offensichtlich die Hintergrundfarbe. Also, wir werden daran arbeiten,
diese Hintergrund-Tabelle diese
taupe Farbe hier anstelle dieses einfachen Browsers weiß dahinter zu machen diese Hintergrund-Tabelle diese . Also, lassen Sie uns zu diesem gehen, wo es Hintergrund steht, gibt es ein kleines Tag hier. Fügen wir eine bgcolor hinzu,
das ist die Haupttabelle, die alle anderen Tabellen enthält, und wir werden den X-Code dafür hinzufügen. Speichern, aktualisieren. Wie Sie sehen können, fügte
es die Hintergrundfarbe hinzu,
aber es gibt auch diese lustig aussehende weiße Grenze, die den ganzen Weg um den Browser geht. Also, das ist eigentlich das Body-Tag. Das öffnende Körper-Tag muss auch eine Farbe hinzugefügt werden, und wir werden
die gleiche Farbe machen oder vielleicht mögen Sie die Grenze und Sie wollen die Grenze behalten. Du kannst die Grenze behalten, wenn du willst, aber wir werden sie hier loswerden. Aktualisieren, kein Rand mehr. Okay, etwas anderes, das wir wahrscheinlich ändern sollten,
ist, dass es ein wenig mehr Atemraum zwischen dem ersten Absatz, der
Introzeile und dieser dreispaltigen Zeile hier geben muss . Es ist einfach nicht genug Platz, es gibt viel Platz hier, kein Platz hier, lasst uns das beheben. Also, wenn wir zurück nach unten scrollen und diesen öffnenden Absatz finden, fügen
wir einfach zwei Zeilenumbrüche hinzu. Speichern Sie, gehen Sie zurück, erfrischen Sie sich, und jetzt können Sie sehen, dass es ein bisschen mehr Atemraum gibt.
12. Nächste Schritte: Wenn Sie dies noch nicht getan haben, vervollständigen Sie eine Version Ihrer E-Mail-Datei und laden Sie einen Screenshot in Ihr Projekt in dieser Klasse hoch. Um Ihre E-Mail zu senden, müssen Sie einen E-Mail-Anbieter wie den am Anfang dieser Klasse erwähnten verwenden. Ich werde diese in einer anderen Klasse ausführlicher behandeln, oder Sie finden weitere Informationen zu SkillShare. Kommentar unten, wenn Sie Fragen haben. Viel Glück.
