So erstellst du dein Online-Portfolio, ohne Code zu schreiben

1. Einführung: Hi, ich bin Mat. Ich bin Designerin und Evangelist hier bei Webflow in San Francisco. Webflow ist ein Tool, mit dem Sie Websites gleichzeitig entwerfen und entwickeln können. Es läuft direkt in Ihrem Browser und es ist zu 100 Prozent visuell. So können Sie dynamische responsive Websites erstellen, ohne eine einzige Codezeile zu schreiben. Sie können damit beginnen, Ihre Website von einem leeren Canvas zu entwerfen , so dass Ihre erstellte Vision nicht eingeschränkt ist. Oder Sie können mit einer Vorlage beginnen und schnell die Stile und Inhalte twittern, die zu Ihnen, Ihrem Unternehmen oder Ihrer Marke passen . Webflow hostet auch ein völlig visuelles Content-Management-System , so dass Sie ein einzigartiges Blog, Portfolio, eine Lüftungs-Site oder was auch immer Sie brauchen,erstellen Portfolio, eine Lüftungs-Site oder was auch immer Sie brauchen, und immer noch nie über Code nachdenken. Wenn Sie bereit sind, Ihre Website zu starten, bieten wir schnelles, sicheres und stabiles Hosting unter benutzerdefinierter Domain an. Heute werden wir eine Website erstellen, um Ihr Portfolio zu hosten , sodass Sie unabhängig davon, ob Sie ein Designer , Schriftsteller, Fotograf oder alle oben genannten sind, etwas Einzigartiges schaffen können, um Ihre Arbeit zu präsentieren. Einige der Dinge, über die wir heute sprechen werden, sind die Bedeutung des Aufbaus einer Online-Präsenz, warum Sie online sein müssen und wie Sie dies tun können , ohne ein Entwickler zu sein oder Code zu schreiben. Heute leben wir in einer Welt, die sich so schnell bewegt, und wir nehmen ständig neue Informationen auf und tun neue Dinge. Auch Ihre Portfolio-Website muss sich an diese Regeln halten. Früher benutzten wir Dinge wie Papier-Lebensläufe, um die Arbeit zu verfolgen, die wir geleistet haben, um potenziellen Kunden oder Leuten zu zeigen, für die wir arbeiten wollten. Aber jetzt, so etwas ist einfach nicht gut genug. Wir brauchen etwas, das online ist. Wir brauchen etwas, das immer aktualisiert wird, etwas, das Sie jedem überall auf dem Planeten jederzeit zeigen können. Das ist es, was wir heute bauen werden. 2. Projektübersicht: Sie haben sich entschieden, eine Website zu erstellen. Das ist großartig. Aber was sind die ersten Schritte, um loszulegen? Nun, es hängt manchmal vom Projekt ab, aber oft wird es auf zwei einfache Fragen verlassen: was der Zweck Ihrer Website ist und was Sie wollen, dass sie erreichen. Wir werden behandeln, warum bei diesen Fragen wichtig sind und Strategien, die Ihnen helfen, zu definieren, was diese Antworten sind. Das heutige Projekt besteht darin, eine vollständig reaktionsfähige benutzerdefinierte Website von Grund auf neu zu erstellen , ohne eine einzige Codezeile zu schreiben. Wir werden dies in einem zu genannten Web Flow tun. Aber Sie können jedes Werkzeug verwenden, das Sie möchten. Viele der Prinzipien, die wir heute lernen werden, können überall im Web angewendet werden. Ich werde Sie durch den Bau dieser Seite hier begleiten. Eine einfache, aber einzigartige Portfolio-Website mit einer mobilen Navigationsleiste, dynamischen Inhaltskacheln und einer reaktionsfähigen Fußzeile. Außerdem entwerfen und erstellen wir diese Detailseite, die unsere einzelnen Portfolioelemente einschließlich eines Hauptbildes und einer Beschreibung des Projekts präsentiert . Das Projekt, das ich heute zeigen werde, ist für ein Designer-Portfolio. Aber die Vorlage kann in einer Vielzahl von kreativen Dienstleistungen wie Fotografie oder Schreiben verwendet werden. Sie können auf diese Vorlage und mehr zugreifen, indem Sie auf webflow.com/templates gehen. Wir haben auch einen Link zu dieser kostenlosen Vorlage in die Kursbeschreibung aufgenommen. Sie können jederzeit auf diese Vorlagen zugreifen und sogar mit der Vorlage folgen, während ich durch den Kurs gehe. Eines der Dinge, die Web Flow so einzigartig macht, ist, dass es Ihnen tatsächlich grundlegende Webprinzipien beibringt, während Sie Ihre eigenen Websites entwerfen , so dass alles, was wir heute sprechen und alles, was Sie lernen, angewendet werden kann überall im Web. 3. Was du für den Einstieg benötigst: Um diesen Kurs durchzugehen, benötigen Sie ein paar grundlegende Tools. Sie benötigen einen Computer mit Zugang zum Internet. Da Webflow ein Online-Tool ist, wird eine Verbindung zum Internet für Sie entscheidend sein, um dieses Projekt abzuschließen. Wir empfehlen die Verwendung von Google Chrome und das ist, was wir verwenden, um dieses Projekt heute zu demonstrieren. Wie ich bereits erwähnt habe, benötigen Sie keine Vorkenntnisse in der Entwicklung, um diesen Kurs abzuschließen, aber ein grundlegendes Verständnis und bestimmte Webprinzipien werden sicherlich helfen. Der erste Teil dieses Kurses wird eine Menge dieser Web-Prinzipien beschreiben und erklären, damit Sie klarer weiterverfolgen können, und weil ein Großteil der Website, die wir heute erstellen werden, inhaltsorientiert ist, einen Teil dieser Inhalte leicht verfügbar zu haben, wird den gesamten Prozess rationalisieren. Dinge wie Bilder, Inhalte und vielleicht sogar ein Logo wären hilfreich, wenn Sie mitverfolgen. Wir haben auch einen Link zu einem Ordner hinzugefügt, in dem Sie alle Assets finden können , die ich für diese Klasse verwendet habe. Sie können mit diesen Assets folgen oder Ihre eigenen erstellen. Wenn Sie Ihre eigenen Assets für die Website erstellen möchten, würde es helfen, eine Fotobearbeitungssoftware wie Photoshop zu haben, um die Größe zu ändern, zuschneiden und Bilder zu erstellen. Bei der Verwendung von Bildern im Internet ist es wichtig, Bilder zu verwenden, die von hoher Qualität sind , damit sie auf High-Definition-Geräten wie iPhones gut aussehen, sich aber auch der Größe bewusst sind. Das Hochladen von Bildern mit einer Größe von mehr als 250 Kilobyte kann Ihre Website verlangsamen. Daher ist es wichtig zu versuchen, diese Dateigrößen niedrig zu halten, besonders auf einer Website wie dieser, die stark Bilder im Design verwendet werden. Abgesehen davon hoffen wir, dass Sie durch nur einen Computer und Zugriff auf die Dateien, die wir in der Kursbeschreibung gepostet haben, einen Computer und Zugriff auf die Dateien, die wir in der Kursbeschreibung gepostet haben,dieses Projekt mit Bravour durchkommen können, und am Ende haben Sie Ihr eigenes Portfolio Website, um es zu zeigen. 4. Fundamentals: Wie ich bereits erwähnt habe, ist es nicht erforderlich, ein starkes Wissen in der Web-Entwicklung oder Codierung für diesen Kurs zu haben, aber ein grundlegendes Verständnis einiger der Web-Prinzipien zu haben, denke ich, ist entscheidend und voll Verständnis und unter Ausnutzung dessen, was Sie hier heute bauen können. Ich werde einige dieser grundlegenden Webkonzepte mit diesem visuellen Webdesign-Handbuch erklären , das wir hier in Webflow erstellt haben. Es besteht aus sechs verschiedenen Schritten, jeweils ein wichtiges Webkonzept abdecken, das wir im heutigen Kurs anwenden werden. Das erste unwahrscheinlich wichtigste Konzept ist das des Box-Modells. Das Box-Modell ist die Idee, über Web-Elemente als Boxen nachzudenken, genau wie wir hier mit dieser Preislayoutstruktur sehen. Hier können wir uns vorstellen, ob jedes Element auf unserer Seite eine unsichtbare Box hatte, die um sie herum ging , die Idee des Box-Modells ist, dass das Web aus diesen Boxen besteht und dass Webstruktur diese Boxen einfach in anderen Boxen hinzufügt und Styling sie, um Raum und andere Layouts hinzuzufügen, um zusammen in einer ansprechenden Art und Weise zu koexistieren. In diesem nächsten Abschnitt können wir zum Beispiel diesen Absatztext in diesen Preisblock verschieben, und beachten Sie, wie HTML und Webstruktur funktioniert. Elemente stapeln untereinander oder ineinander, was der beste Weg ist, um ein flüssiges und reaktionsfähiges Website-Layout zu erstellen. Nun ist das Box-Modell das Gesamtkonzept der Web-Elemente und wie sie zusammenarbeiten, aber es ist auch wichtig, die einzelnen Elemente zu verstehen, die hier waren. Wenn es um die Gesamtstruktur geht, werden wir diese drei wichtigsten Strukturelemente in Abschnitten, Containern und Spalten verwenden. Ein Abschnitt nimmt 100 Prozent der Breite seines übergeordneten Containers ein. Dies wäre das Browserfenster, wenn Sie ihn dem Textkörper hinzufügen. Es ist großartig für große horizontale Abschnitte einer Website wie die, die wir hier sehen. Ein Container ist ein 960 Pixel breiter Block, der in der Mitte des Browsers zentriert ist. Normalerweise werden die meisten Website-Inhalte innerhalb des Containers hinzugefügt, so dass er in der Mitte unserer Seite zentriert ist. Verwendung von Spalten ist der schnellste Weg, um ein einzigartiges Website-Layout zu erstellen. Um zu bearbeiten, wie viele Spalten Sie hinzufügen möchten, ist es am einfachsten, unsere Spalten auszuwählen, und in diesem Einstellungsfenster können wir sowohl die Anzahl der Spalten, die wir wollen und wie breit sie sind anpassen. Wir können auch anpassen, wie wir möchten, dass unsere reaktionsfähigen Säulen auf verschiedenen Geräten ausgelegt werden. Es ist eine Kombination dieser drei Elemente , die die Website bilden, die wir heute erstellen. Nun, da wir Elemente auf unserer Seite haben, ist der nächste Schritt, diese Elemente zu stylen, und im Web geschieht dies durch CSS, eine Codierungssprache, die uns erlaubt, Stile wie Schriftart, Farbe, Zeilenhöhe, Farbverläufe, Grenzen , Schatten und vieles mehr. Hier auf der linken Seite haben wir eine Schaltfläche, die ein zusätzliches Styling gemacht hat, wo wir auf der rechten Seite eine einfache Verbindung ohne Stile haben. Was wir tun müssen, ist zuerst eine CSS-Klasse hinzuzufügen. Sobald wir dies tun, erhalten wir Zugang zu einer Vielzahl von Stil-Optionen. Zum Beispiel das Hinzufügen von Innenabständen, das Anpassen der Schriftfarbe oder der Schriftgröße, Hinzufügen einer Hintergrundfarbe und sogar das Hinzufügen einiger abgerundeter Ecken. CSS befähigt uns, im Web auf eine nahezu unbegrenzte Anzahl von Möglichkeiten zu entwerfen. Diese Schaltfläche ist nur ein kleines Beispiel dafür. Wir werden heute in unserem Web-Training viel mehr CSS-Stile verwenden. CSS-Stile sind auch mehr als nur Farben und Schriftarten. In der Tat ist CSS auch das, was die Layouts erstellt, die wir auch im Web verwenden. Das erste Beispiel hier zeigt uns, wie CSS-Attribute von Marge und Padding es uns ermöglichen, den Abstand zu schaffen, den wir für unsere Elemente benötigen. Polsterung ist der Abstand, der das Innere eines Elements ausmacht , wobei der Rand der Abstand auf der Außenseite ist. Lassen Sie uns sowohl Rand als auch Polsterung auf diesen Elementen auf der rechten Seite verwenden , so dass wir es mit den linken Elementen übereinstimmen können. Ich werde zuerst diesen äußeren Wrapper auswählen , der den gesamten Text darin hält. Dann kann ich Shift auf meiner Tastatur halten und Polsterung auf der Innenseite dieses Elements hinzufügen. Beachten Sie, dass wir beim Hinzufügen von Padding Platz auf der Innenseite des Elements Raum zwischen der äußeren Grenze und dem Inhalt darin schaffen. Nun fügen wir dem einzelnen Text einen gewissen Rand hinzu, um zusätzliche Abstände am unteren Rand hinzuzufügen. Fügen wir diesen Tags sowohl Rand als auch Padding hinzu , so dass es mit seinem Partner auf der linken Seite übereinstimmt. Lassen Sie uns zuerst unsere Polsterung hinzufügen, großartig, und jetzt etwas Marge. Perfekt. Genau so hat CSS uns erlaubt, den Abstand im Layout zu erstellen, den wir hier brauchen. Eine weitere wichtige CSS-Eigenschaft ist die display-Eigenschaft. Web-Elemente wie Absatz-, Text- und div-Blöcke werden normalerweise den Wert des Anzeigeblocks angegeben, was bedeutet, dass es die Breite des übergeordneten Fensters füllt und sich über die anderen Blöcke stapelt, wie wir hier sehen. Auf der rechten Seite werden wir die gleichen Elemente sehen, wo immer sie mit der Eigenschaft Inline-Block angelegt sind. Inline-Block wird die Breite des Elements an die Breite des Inhalts im Inneren anpassen. Das bedeutet, dass, wenn der Inhalt klein genug ist, sie nebeneinander stapeln können. Beachten Sie, was passiert, wenn wir diese Schaltflächen und Verknüpfungen ändern, um den Block anzuzeigen. Sie nehmen die volle Breite auf und stapeln übereinander statt nebeneinander, denn jetzt nehmen sie die volle Breite des Wrappers ein. Das nächste Thema ist, dass kaskadierende Stile, die es uns ermöglicht, leicht eine Variation von Elementen zu erstellen , indem zusätzliche Klassen darüber hinzugefügt werden. Wir können dies hier mit einem anderen Tastenbeispiel zeigen. Beachten Sie, dass wir auf der linken Seite drei Tasten mit drei verschiedenen Farben haben, und auf der rechten Seite haben wir drei Tasten mit der gleichen Farbe. Nun, der Grund, warum sie die gleiche Farbe haben, ist, weil sie dieselbe Klasse teilen. Beachten Sie, wenn wir eine einzelne Stiländerung an einem von ihnen vornehmen, ändert sich das Gleiche für jeden von ihnen, was auch ein großer Vorteil von CSS ist. der Lage zu sein, eine standortweite Änderung zu machen, um Elemente sehr schnell zu mögen. Damit wir weitere Stiländerungen an diesen Elementen vornehmen können, ohne die anderen zu beeinflussen, müssen wir eine zusätzliche Klasse hinzufügen. Fügen wir dieser Klasse eine Klasse hinzu und ändern Sie dann die Hintergrundfarbe. Beachten Sie, dass es diesmal nicht die Farbe für alle Tasten geändert hat, sondern nur für diese. Lasst uns dasselbe für den nächsten machen. Perfekt. Das letzte Stück, über das ich sprechen möchte, ist für mobiles Styling und wie CSS auf all Ihren verschiedenen Geräten funktioniert. Beim CSS-Styling werden die Stile nur nach unten kaskadiert, was bedeutet, dass alle Stile, die Sie Ihren Elementen auf dem Desktop hinzufügen , auch auf Ihren mobilen Geräten folgen. Das Gleiche gilt für Tablet oder eines der anderen mobilen Geräte. Alle vorgenommenen Stiländerungen werden nach unten kaskadiert. Wenn wir zum Beispiel Stiländerungen auf unseren Tablets vornehmen, wird es nur auf unsere kleineren Geräte kaskadiert und in diesem Fall alle Stile auf dem Desktop außer Kraft gesetzt . Es ist auch wichtig zu beachten, dass Stile nicht nach oben übersetzen können, was bedeutet, dass alle Stile, die Sie auf einem Tablet hinzufügen würden, nicht auf den Desktop übersetzen würden, sie werden nur nach unten übersetzt, und das ist es. Ich hoffe, dass diese Webübersicht hilfreich war und dass sie Orientierungshilfe bieten kann , wenn wir unseren Weg durch diesen Kurs machen. Für den Rest dieses Kurses werde ich nicht zu tief in bestimmte Web-Themen eintauchen. Wir werden Dinge wie das Box-Modell und andere CSS-Attribute hören , die wir bereits während des Kurses behandelt haben. 5. Die Bedeutung von Inhalten in Design: An dieser Stelle sollten wir ein gutes Verständnis darüber haben, was unsere Inhalte sind und wie wir sie auf unseren Websites nutzen möchten. Da ein Großteil unseres Entwurfsprozesses auf unsere dynamischen Inhalte angewiesen ist, müssen wir darüber im Voraus nachdenken, bevor wir mit der Entwurfsphase beginnen und das Konzept der Inhalte wirklich erst nach Hause bohren. Sie werden den vollen Nutzen dieses Workflows erkennen, wenn wir mit dem Entwurfsprozess beginnen. In Webflow denken wir an Inhalte in Form von Sammlungen, denen es sich einfach um Gruppen von Inhalten handelt, die zusammen organisiert sind, um ein einzelnes Element wie einen Blogbeitrag zu bilden. Ich habe hier bereits eine Handvoll Sammlungen erstellt, aber ich werde Ihnen zeigen, wie einfach es ist, eine eigene zu erstellen. Wir beginnen, indem Sie einfach auf die Schaltfläche „Neue Sammlung“ klicken. Nun, das erste, was wir tun müssen, ist unsere Sammlung zu nennen was später im CMS angezeigt wird. In diesem Fall erstellen wir unsere Projektsammlung. Jetzt müssen wir erstellen, wie die URL für unsere einzelnen Projektelemente sein wird. Zum Beispiel, wenn wir Projekte wählen, wäre die URL www.website.com/projects/der Name des Projekts. Nun müssen wir unsere einzelnen Felder oder Inhalte hinzufügen, aus denen diese Projekte bestehen. Der Name ist bereits für uns vorgegeben und wird einfach der Name des Projekts sein. Also klicken wir einfach auf „Neues Feld hinzufügen“ und erhalten hier eine Vielzahl von verschiedenen Optionen, darunter ein Klartextfeld, ein Rich-Text-Feld, Bild, Video, Link, ein Zahlenfeld, Datum und Uhrzeit, Schalter, Farbe und Option und dann zwei verschiedene Arten von Referenzfeldern. Lassen Sie uns beginnen, indem Sie unser Bildfeld hinzufügen. Wir müssen diesem Feld ein Label geben, das wir Hauptbild nennen werden. Dies wird das Hauptbild sein, das wir für unsere verschiedenen Projektartikel verwenden. Wir können auch Hilfetext bereitstellen , der zusätzliche Informationen enthält, die CMS-Benutzer beim Aktualisieren oder Hochladen eines neuen Bildes unterstützen . Dann klicken wir auf „Speichern“. Fügen wir nun unsere Projektbeschreibung hinzu, die wir als Rich-Text-Feld verwenden und klicken Sie auf „Speichern“. Schließlich möchte ich in der Lage sein, diesem Projekt ein Tag hinzuzufügen, und ich werde dies tun, indem ich mit einer anderen Sammlung verknüpfe, die ich bereits erstellt habe. Ich kann dies tun, indem ich das einzelne Referenzfeld verwende und dann die Projekt-Tags-Sammlung auswähle, die ich bereits erstellt habe. Nun, da wir alle Felder haben, die wir wollen, können wir unsere Sammlung erstellen. Zuerst werden keine Elemente darin enthalten sein, aber wir können sie einfach hinzufügen, indem Sie auf die Schaltfläche „Neues Projekt“ klicken. Nun müssen wir nur die einzelnen Felder mit den Inhalten eines unserer Projekte ausfüllen , die ich bereits gespeichert habe. Dieses Projekt wird als Skizzierte Entwürfe bezeichnet. Wir können unser Hauptbild von meinem Desktop hochladen, und dann werde ich einige Inhalte einfügen, die als unsere Beschreibung für das Projekt funktionieren, und schließlich werde ich für das Projekt-Tag Branding auswählen. Da haben wir es. Nun, da wir einige Inhalte an Ort und Stelle haben, können wir mit dem Designprozess unserer Homepage beginnen. 6. Hero + Navigation: Jetzt, da wir alle unsere Inhalte eingerichtet haben und einen kurzen Überblick über einige unserer grundlegenden Web-Design-Prinzipien gemacht haben, wir jetzt gehen und das Erstellen dieser Homepage, die ich hier erstellt habe, replizieren , die nur aus einem einfachen Heldenbereich besteht, gefolgt von fünf verschiedenen Kacheln, die wir unten sehen, einschließlich einer über Kachel, neueste Projekte Kachel, die dieses Bild aus Ihrem neuesten Projekt zieht, neueste Beiträge, die wird das neueste Blog-Post-Bild ziehen, ein mieten mich und dann vier Social-Media-Links. Wir werden auch eine Fußzeile erstellen, die siteweit sein wird. Um dies zu entwerfen, werden wir diese visuell in unserem Web Flow-Tool erstellen, und wenn wir hier hineinschauen, werden wir sehen, dass wir mit einer leeren Leinwand beginnen. Hier gibt es nichts. Also werden wir diese ganze Seite von Grund auf neu erstellen. Nun werden wir anfangen, einige unserer grundlegenden Grundlagen zu verwenden, die wir im vorherigen Video gelernt haben , aber ich werde versuchen, dich zu erziehen, während wir gehen. Nun, das erste, was wir tun wollen, ist in einem Abschnitt für unsere Heldenabteilung hinzuzufügen. Also gehe ich zum Add Panel und ziehe dann in einem Abschnitt. Das erste, was wir tun möchten, nachdem wir Elemente hinzugefügt haben, ist, ihnen einen Stil zu geben , so dass wir ihnen Stile und Klassen zuweisen können. In diesem Fall geben wir diesem eine Klasse von Helden Abschnitt, und lassen Sie uns etwas Polsterung oben und unten hinzufügen , nur damit wir ein wenig Platz haben können. Gehen wir weiter und fügen Sie unser Hintergrundbild hinzu, das uns helfen wird, diesen Raum zu füllen. Wenn ich also zu unserem Hintergrundbereich scrolle, werde ich das aus unseren Vermögenswerten ziehen, die wir bereits haben, und ich werde dieses Bild hier verwenden. Sie werden jetzt feststellen, dass das Bild ziemlich groß ist, so dass es nicht ganz passen kann. Also werden wir dieses Coverattribut verwenden, das ich auswählen kann, und ich werde das in der Mitte beheben. Da gehen wir. Jetzt, damit wir die Größe davon erhöhen können, werde ich keine Höhe hinzufügen. Ich werde stattdessen anfangen, einige Inhalte hinzuzufügen. Wenn ich voran gehe und wenn ich Panel wieder hinzufüge und dann nach unten zu unserer Navigationsleiste scrolle, kann ich in der Navigationsleiste ziehen. Ich ziehe es tatsächlich direkt in den Heldenbereich. In diesem Fall möchte ich unsere nav bar Klasse geben, nennen wir es nav, und lassen Sie beginnen, es zu stylen. Zuerst möchte ich ein wenig Polsterung auf der Innenseite hinzufügen. Ich möchte auch die Hintergrundfarbe in diese klare, transparente Farbe ändern, um klar statt dieses Grau zu sein. Ich möchte auch, dass dies absolut oben auf der Seite positioniert ist. In diesem Fall kann ich oben wählen, und wir werden feststellen, dass es ganz oben ist. Nun eine Sache, die ich getan habe, war, dass ich ein wenig zusätzlichen Platz auf der Oberseite als auch hinzugefügt habe, nur um es leicht nach unten zu drücken. Jetzt haben wir die Grundlage unserer Navigation. Wir müssen einige zusätzliche Links hinzufügen und stylen sowie unser Logo hinzufügen. Für das Logo war alles, was ich getan habe, einfach einen Textblock zu nehmen und ihn in diese Marke zu ziehen, und dann kann ich diesem Lehrbuch eine Klasse geben, nennen wir es unseren Logotext, und wir können anfangen, es zu stylen. Lassen Sie uns die Farbe in Weiß ändern. Wir werden die Größe vergrößern, und fügen wir unsere Texte hinzu. Da sind wir. Ich kann das zusätzlich stylen, bis ich damit zufrieden bin. Lassen Sie uns voran und erhöhen Sie einfach die Größe ein wenig mehr, auch die Linienhöhen. Nun, was ich getan habe, war, dass ich eine zusätzliche Klasse in einem Tag hinzugefügt habe. So kann ich es einfach fett machen. Da gehen wir. Jetzt muss ich es so zentrieren, dass es im Einklang mit den Links steht, die wir hier haben. Aber vielleicht, bevor wir das tun, lassen Sie uns weitermachen und unsere Links auch stylen. Ich werde auf diesen ersten Link klicken und dann zu einer Klasse gehen. Lassen Sie uns eine Klasse für jede von ihnen hinzufügen. Also haben wir nav Link, und lassen Sie uns die Farbe anpassen. Lasst uns alles machen. Ich werde diese Schrift beibehalten, die die Schrift ist, die wir auf unserem Körper haben, und ich werde auch eine Kerning dazwischen erhöhen. Da gehen wir. Das ist also unsere Verbindung. Beachten Sie jedoch, dass die anderen Links nicht gefolgt sind. Das liegt daran, dass wir die Klasse noch hinzufügen müssen Gehen wir also weiter und geben Sie unsere Klasse ein und wählen Sie sie aus. Wir werden feststellen, dass diese Stile übertragen werden. Da gehen wir. Lassen Sie uns voran und fügen Sie die verbleibenden Links, die wir haben, hinzu, und wir können beginnen, den Text hinzuzufügen. Also haben wir unser Zuhause, wir hatten unser Portfolio, wir haben eine About Seite, und wir haben unseren Blog, und dann haben wir eine Kontakt-Schaltfläche, die eine etwas andere Klasse sein wird. Also nochmal, ich werde das kopieren, was ich auf meiner Tastatur tun kann, und dann werde ich den Text für den Kontakt hinzufügen. Dann werde ich hier eine zusätzliche Klasse hinzufügen, die uns helfen wird, sie zusätzlich zu stylen. Gehen wir voran und tippen Sie Kontakt ein. Dann hier können wir Dinge tun, wie die Hintergrundfarbe anpassen. Ich möchte dies mit einer leichten Deckkraft weiß machen, und dann möchte ich auch die Polsterung verringern, die wir dort haben, die standardmäßig vorgegeben wurde. Machen wir es 10, und wir wollen auch, dass es mit ihren Links zentriert bleibt, also werde ich etwas Marge oben hinzufügen. Da gehen wir. Ich werde die Schriftgröße verringern und diese Zeilenhöhe nur ein wenig verringern. Da gehen wir. Wir hatten auch einige abgerundete Ecken, nur leicht. Fügen Sie also einen runden Viertelradius mit zwei Pixeln hinzu. Da gehen wir. Ich glaube, es gab auch einen zusätzlichen Rand auf der linken Seite, also kann ich hinzufügen, lassen Sie uns 30 Pixel machen. Großartig. Wir kommen näher. Lassen Sie uns voran und passen Sie diese nav Links nur ein wenig mehr. Ich werde die Größe verringern. Auch dies ist die Schönheit, ein Tool zu verwenden, das bereits im Web ist. Wir können diese Vorschau tatsächlich so viel wie wir wollen durch diesen Vorschau-Link und tatsächlich sehen, was wir in der tatsächlichen Umgebung bauen, in der es veröffentlicht wird. Mit unseren Logo-Texten, denken Sie daran, ich wollte es nur ein wenig zentrieren, damit ich etwas Rand oben hinzufügen werde, und wir können dies anpassen, bis es sich richtig anfühlt. Das sieht gut aus. Jetzt haben wir unser Logo und unsere Navigationsleiste oben auf der Seite. Wir müssen auch unseren Heldentext hinzufügen, den ich einfach hineinziehen kann. Ich werde in eine Überschrift ziehen, und das war unser H1. Ich möchte einige zusätzliche Änderungen vornehmen. Alle unsere H1s folgen dem gleichen Stil und sind zentriert. Wir werden die Farbe in Weiß ändern. Ich möchte das auch alle Kappen machen. Es wird die Größe nur ein wenig verringern. Der Text, der hier war, kann ich voran gehen und tippen Sie dies, und da gehen wir. Jetzt kann ich alle Anpassungen vornehmen, die ich will. Mit dem Padding kann ich mich anpassen, um zusätzlichen Platz hinzuzufügen. Beachten Sie, dass wir bereits etwas Polsterung auf der Unterseite haben, es passt die Höhe dieses Behälters an, während wir gehen. Lassen Sie uns einfach ein wenig mehr hinzufügen, weil wir tatsächlich unseren Container darunter hinzufügen werden, und es wird in diesen Abschnitt zu bewegen. Aber wieder, das Schöne, es im Web zu tun, ist, dass wir iterieren können, während wir gehen. Ich werde den Heldenbereich vorerst so verlassen. Gehen wir weiter und gehen zu unserem nächsten Abschnitt. 7. Dynamische Homepage: Ich werde einen neuen Abschnitt ziehen, ziehen Sie ihn einfach in unseren Körper. Auch hier möchte ich ihm eine zusätzliche Klasse geben. Nennen wir das nur unsere Sektionsklasse. Dann kann ich hier etwas Padding hinzufügen, und dies wird der Abschnitt sein, den wir auf unseren Websites verwenden. Ich mag es, das zuerst zu errichten. Dann werde ich auch eine zusätzliche Klasse hinzufügen, weil wir in diesem Fall keine Polsterung oben wollen. Gehen wir weiter und wissen es. Nennen wir das einfach unsere oberste Sektion. Dann wollen wir in diesem Fall keine Polsterung oben haben. Lassen Sie uns voran und fügen Sie unseren Container hinzu, so kann ich einfach klicken und unser Container wird hinzugefügt, und wenn wir auf unser Endprodukt zurückblicken, werden wir feststellen, dass der Container über diesen Heldenbereich nach oben bewegt wird. Lass uns weitermachen und diesem Container eine Klasse geben. Nennen wir das unseren Heldencontainer, und bewegen wir ihn nach oben. Um das zu tun, müssen wir es relativ positionieren , so dass wir diese Position Pfeile hier bekommen können, und lassen Sie uns voran und skalieren Sie es nach oben. Lassen Sie uns 70 Pixel versuchen, und wir werden sicher sein, ihm eine Hintergrundfarbe zu geben. Da gehen wir. Es gibt auch einige zusätzliche Polsterung auf der Innenseite. Lasst uns fünf Pixel machen. Da sind wir. Jetzt haben wir diesen Container, der sich in unseren Heldenbereich bewegt. Jetzt müssen wir den Inhalt hinzufügen, der darin hineingeht. Wenn Sie sich erinnern, haben wir die fünf Kacheln. Jeder von ihnen hat etwas unterschiedliche Größe, die unteren drei sind drei Drittel. Lassen Sie uns voran und fügen Sie unsere erste hinzu. Aber das erste, was ich tun möchte, ist tatsächlich einen Div-Block hinzuzufügen , der all diesen Inhalt umhüllt, und dann möchte ich meine über Widgets oder meine über Kachel hinzufügen. Jetzt, da wir einen Div-Block haben, gehen wir voran und geben ihm eine Klasse. Was ich mit diesen Klassen machen werde, ist, sie basierend auf den Größen zu benennen, die sie in diesem Container aufnehmen werden. In diesem Fall ist dies unser 60-Block, und es wird eine Breite von 60 Prozent einnehmen, und die Höhe wird 300 Pixel betragen. Da gehen wir. Nun, innerhalb dieses Blocks ist, wo wir unser Bild und den Wrapper haben, der auf all unseren verschiedenen Kacheln verwendet wird. In diesem Fall ziehen wir einen zusätzlichen Div-Block, der die Tatsache des Box-Modells von Boxen in anderen Boxen nach Hause trifft Elemente in anderen Elementen hinzufügt. In dieser Klasse werden wir geben ist unser Helden-Kachel, und wir werden sicherstellen, dass es relativ ist, und ich werde Ihnen sagen, warum in nur einem Moment, und es hat eine Höhe von 100 Prozent. Beachten Sie, dass es den 60-Blockcontainer füllen wird, in den wir ihn gelegt haben. Jetzt, innerhalb dieser Helden-Kachel, haben wir unser Bild, sowie den Text, der die Kachel beschriftet. Ich werde einen weiteren Div-Block für das Bild ziehen. Nennen wir das unser Fliesenbild. Dann hier, was ich will, ist ich will, dass es absolute positioniert wird, weshalb wir den vorherigen Wrapper relativ haben mussten, und ich möchte, dass er voll mit den Höhen von 100 Prozent ist . Jetzt merkt es wieder, dass es das gesamte Bild verdeckt, gehen wir weiter und nehmen den Hintergrund, und wir werden dieses Bild hier auswählen. Da gehen wir. Das ist das Bild, das wir wollten, und dann oben überlagert ist, wo wir unseren Text haben. Ich gehe wieder zurück zu unserem Add-Panel und ziehe dann einen Textblock, und ich möchte, dass dies in unserer Helden-Kachel ist. Wir nennen dies unseren Helden-Text oder sorry, lassen Sie uns Kachel-Text machen. Wir werden die Größe zuerst erhöhen, gehen wir weiter und ändern die Schriftfarbe, und ich möchte die Größe dieses Textes erhöhen. Dies wird auch absolut positioniert werden. Wir wollen es in diese untere linke Ecke verschieben. Beachten Sie, dass es dort übersetzt wird, aber im Moment ist es hinter dem Bild. Lassen Sie uns unseren Z-Index hier verwenden , der ihn nach vorne verschieben wird, also erhalten wir jetzt eine bessere Sicht. Gehen wir weiter und geben Sie den endgültigen Text ein, bevor wir anfangen, ihn zu stylen. In diesem Fall haben wir über mich selbst ist, was der Text sein wird. Lassen Sie uns voran und stylen Sie es so, dass es ähnlich aussieht, was wir am Ende haben. Der Text ist etwas größer. Lassen Sie uns die Linienhöhe ändern. Es ist ein fett formatierter Text, so dass wir ihn so anpassen können, dass er extrem fett ist. Dann haben wir es auch als alle Kappen. Dann können wir die Größe jetzt anpassen, wo wir es ein bisschen größer haben. Da gehen wir. Eine andere Sache, die wir tun müssen, ist die Position anzupassen. Im Moment haben wir es in der unteren linken Ecke fixiert, gehen wir weiter und bewegen es über und bewegen es nach oben. Machen wir eigentlich 30 und 30. Da gehen wir. Eine andere Sache, die wir getan haben, war ein zusätzlicher Stil für diesen Text war, einen technischen Schatten hinzuzufügen, und wir können dies hinzufügen, indem wir zu unserem technischen Schatten gehen, und wir können die Deckkraft anpassen, nur so dass es nicht so fett ist, und das wird helfen, es über dem Bilder, die wir haben. Da gehen wir. Das ist unser über Fliese. Nun, die Schönheit dessen, was ich Ihnen hier zeigen werde, wird auch die Arbeit, die wir bereits getan haben, duplizieren. In diesem Fall möchte ich dieses gesamte Objekt oder den 60-Block duplizieren, und ich werde es noch einmal duplizieren. Ich werde Copy and Paste verwenden, und es wird hier vorerst unten eingefügt werden, aber das liegt daran, dass dies 60 Prozent in Anspruch nimmt, und wenn wir sie zusammen addieren, würde es 120 machen, das ist 100 Prozent Breite. Gehen wir weiter und passen Sie diesen 60-Block hier ganz auf eine andere Klasse an. In diesem Fall werden wir 40 Block verwenden, und die Breite wird 40 Prozent sein, und wir wollen auch dieses Foto nach links und Position relativ. Lassen Sie uns voran und schweben Sie dies auch nach links, stellen Sie sicher, dass beide nach links geschoben sind, und sie sind. Fantastisch. Eine andere Sache, die wir vergessen haben, ist die Höhe hinzuzufügen. Beachten Sie jetzt, dass es keine Höhen gibt. Also hier können wir 300 Pixel machen, und jetzt bemerken, dass wir das Endprodukt sehen. Sie sehen sehr ähnlich aus. Beachten Sie, dass die auf der rechten Seite immer noch nur die 40 Prozent, die auf der linken Seite ist 60 Prozent. Nun, bei unserem Endprodukt, haben wir tatsächlich ein wenig Trennung zwischen den verschiedenen Bildern hinzugefügt. Lassen Sie uns voran und fügen Sie etwas Polsterung hinzu. Wenn wir hier für unsere Heldenfliese zu unserem Panel gehen, gehen wir weiter und fügen etwas Polsterung hinzu. Fügen wir es tatsächlich zu unseren verschiedenen Blöcken hinzu. Die 60 und 40 Block, gehen wir weiter und gehen Sie zu unserem Stil und halten Shift auf meiner Tastatur, Ich werde fünf zusätzliche Pixel auf jeder Seite hinzufügen. Ich will das Gleiche hier machen. Wenn ich auf diese Elemente klicke, kann ich diese kleinen Abkürzungen hier unten verwenden und zu meinem 40-Block gehen, und ich werde dasselbe tun. Lassen Sie uns voran und fügen Sie fünf Pixel auf jeder Seite hinzu. Da gehen wir. Das ist die Oberseite. Wir haben auch die drei Elemente auf der Unterseite, und wieder werde ich den exakt gleichen Prozess duplizieren. Ich werde diese 40 Block nehmen und Befehle CMI-Tastatur und dann Befehl V verwenden, und ich werde noch eine einfügen, so dass wir die verschiedenen Klassen hier anpassen können. Anstelle des 40-Blocks werde ich dies ändern, wenn Sie noch nicht auf einen 33-Block erraten haben. In diesem Fall teilen wir es in Drittel und wir werden das gleiche Muster folgen. Wir wollen, dass es nach links schwebt. Wir möchten die Breite auf 33,33 Prozent mit einer Höhe von 300 Pixel ändern. Da gehen wir. Jetzt müssen wir das noch zwei Mal für insgesamt drei duplizieren. Gehen wir weiter und tun Befehl C, Befehl V. Großartig. Genau wie wir es vorher getan haben, fügen wir unsere Polsterung auf jeder Seite hinzu, so dass wir die fünf Pixel haben. Da gehen wir hin, also kommen wir irgendwohin. Jetzt müssen wir nur alle Inhalte aktualisieren, um übereinzustimmen und dann auch diese sozialen Symbole hier ändern. Anstelle des Bildes werden wir vier soziale Symbole hinzufügen. Lassen Sie uns voran gehen und beginnen, indem Sie den Text ändern. In diesem Fall habe ich meine neuesten Projekte. Hier unten habe ich meine neuesten Beiträge. Dann habe ich mich angeheuert. Dann hier drüben werden wir das austauschen, also werde ich den Text vorerst löschen. Lassen Sie uns einige der Bilder austauschen, die wir hier haben. Denken Sie daran, was ich früher gesagt habe, die neuesten Projekte und Beiträge werden tatsächlich von unseren neuesten Blogbeiträgen und neuesten Projekten ziehen, wie wir sie hinzufügen. Schnell, lassen Sie uns einfach unser Kachelbild hier aktualisieren, das wird unsere Miete sein, also werde ich eine zusätzliche Klasse hinzufügen und ich kann dieses Hintergrundfoto austauschen. Da gehen wir. Nun, für diese wird es etwas anders sein, was wir tun müssen, ist, unsere dynamischen Daten hinzuzufügen, so dass es weiß, woher sie ziehen und das Hintergrundbild für uns aktualisieren soll. wir in diesem Fall weiter und gehen Sie erneut zu unserem Add Panel. Ich nehme unsere dynamischen Listeninhalte und möchte sie in unsere Helden-Kachel ziehen. Ich kann das binden, und in diesem Fall haben wir unsere Projekte und es zieht unsere Projekte hierher. Nun, was ich tun möchte, ist zu ändern, so dass der Kacheltext und das Kachelbild innerhalb dieser dynamischen Liste sind. Lassen Sie uns also voran gehen und ziehen Sie diese in unser dynamisches Element. Da gehen wir. Jetzt, da sie sich in unserem dynamischen Element befinden, kann ich Inhalte aus ihm heraus ziehen und verwenden. In diesem Fall kann ich zu unserem Kachelbild gehen und ich kann auswählen, um Hintergrundbild von unserem Hauptbild zu erhalten. Beachten Sie bereits, dass es in unserem Hintergrundbild aus unserem neuesten Projekt zieht. Wir können dies überprüfen, indem wir zu unserem Kollektionspanel auf der linken Seite gehen, zu unseren Projekten gehen, Entwürfe skizzieren, und da ist das Bild. Das ist das Bild, das eingezogen wird. Jetzt können wir genau das Gleiche für unsere neuesten Beiträge tun. Wieder gehe ich voran und ziehe in eine dynamische Liste und ich möchte sie in unsere Helden-Kachel ziehen. Dieses Mal werde ich es an unsere Blogs binden, eine Sammlung, die wir bereits erstellt haben. Auch dies ist der Grund, warum es so vorteilhaft ist, zuerst mit Content zu entwerfen, Sie diese Assets bereits für Sie erstellt haben. Dann werde ich hier voran gehen und unsere verschiedenen Elemente, unsere Titeltexte und unser Titelbild ziehen . Wieder einmal gehe ich voran und gehe zu unserem Einstellungsfenster. Ich muss auf unser Titelbild und Einstellungen-Panel klicken und dann das Hintergrundbild von unserem Blog bekommen, und da gehen wir. Jetzt haben wir eine aktualisierte Kachel für jeweils vier verschiedene Beiträge. Nun, was ich tun möchte, ist dies hier zu aktualisieren, wenn wir zu unserem Endprodukt gehen, um dieses Vier-Quadranten-Link-System hier mit diesen verschiedenen Social-Media-Konten zu sein . In diesem Fall werde ich fortfahren und mein Titelbild löschen , so dass jetzt alles, was ich habe, unser Heldentitel ist. Nun, was ich tun möchte, ist in vier Blöcken hinzufügen, ich werde Link-Blöcke verwenden, also lassen Sie uns voran und ziehen Sie einen Link-Block. In diesem Fall möchte ich ihm eine Klasse geben, die es erlauben wird, 1,5 der Breite und 1,5 der Höhe zu sitzen. Lassen Sie uns voran und fügen Sie eine Klasse zuerst, sozialen Block, und ich möchte, dass die Breite 50 Prozent beträgt, und ich möchte, dass die Höhe die Hälfte der Höhe für diese Elemente ist, das waren 300 Pixel, also in diesem Fall, wir wählt 150 Pixel aus. Nur damit wir eine bessere Vorstellung davon bekommen, was los ist, gehen wir weiter und wählen unsere Farben aus. Ich habe die Farben für die Social-Media-Symbole gespeichert , die wir verwenden werden, beginnend mit Twitter. Lassen Sie uns unser Hintergrundbild hinzufügen, das in diesem Fall das Twitter-Symbol sein wird, das ich hier habe. Die Schönheit an Hintergrundbildern ist, dass man sie direkt in der Mitte positionieren kann. Im Moment ist es gekachelt. Ich kann nicht wiederholen auswählen. Dann erhöhen wir die Größe dieses Typen hier auf 50 Pixel, und es wird wie nicht fixiert bleiben. Da gehen wir. Das ist unser Twitter-Block. Wir werden das viermal duplizieren, also Command C, Befehl V wieder verwenden wir die Assets, die wir erstellt haben. In diesem Fall kann ich voran gehen und beginnen, die Farben für diese anzupassen. Es sieht auch so aus, als müssten wir die Größe ein wenig anpassen, das ist okay. Also sozialer Block, lassen Sie uns eine zusätzliche Klasse eingeben, so dass wir zusätzliche Stile hinzufügen können, wie ändern Sie die Hintergrundfarbe und passen Sie das Symbol. In diesem Fall wollen wir, dass es wieder 50 Pixel sein. Großartig. Wir haben Pinterest hier unten. Lassen Sie uns unsere zusätzliche Klasse hinzufügen. Lassen Sie uns die Hintergrundfarbe ändern, aktualisieren Sie die Grafik. Lassen Sie uns erneut die Breite auf 50 Pixel ändern. Schließlich haben wir unser Dribble-Konto, also gehen wir weiter und fügen Sie eine zusätzliche Klasse hinzu. Tauschen Sie das Symbol aus. Wieder 50 Pixel. Ändern Sie dann hier die Hintergrundfarbe. Jetzt sind wir fast fertig. Eine Sache, die wir bemerken werden, ist, dass wir noch einige zusätzliche Polsterung haben. Ich kann das einfach so einstellen, dass sie alle nach links schweben. In der Tat, lassen Sie uns unseren ursprünglichen sozialen Block verwenden, so dass er es jedem dieser Elemente hinzufügt , so dass ich ihn nach links schweben kann. Da gehen wir. Beachten Sie, dass es immer noch ein bisschen höher ist. Gehen wir weiter und verringern die Höhe, bis wir das Gefühl haben, dass es passt, 145, das sieht gut aus. Da gehen wir. Wir sehen hier ziemlich gut aus mit unserem Design. Das letzte Stück, das wir brauchen, ist, unsere Fußzeile hinzuzufügen was wir in unserem nächsten Video abdecken werden. 8. Footer: Das letzte Stück, das wir brauchen, ist, unsere Fußzeile hinzuzufügen, die genau hier unten sitzen wird. Lassen Sie uns wieder voran gehen und einen neuen Abschnitt hinzufügen , den ich einfach in unseren Körper ziehen kann , den wir hier hinzufügen können. In diesem Fall möchte ich es unten hinzufügen. Lassen Sie mich einige davon schließen, und lassen Sie es uns nach unten bewegen. In diesem Fall gehen wir voran und nennen dies unsere Fußzeile, unseren Fußzeilenabschnitt, und wir können einige zusätzliche Abstände hinzufügen. Lassen Sie uns die Hintergrundfarbe hier ändern. Lasst uns ein Dunkelgrau benutzen. Jetzt brauchen wir den Container, der unseren Inhalt halten wird. Gehen wir weiter und gehen Sie zu unserem Container, und ziehen wir ihn in unseren Abschnitt. Jetzt haben wir den Container, um unsere einzelnen Elemente zu halten. In diesem Fall möchte ich in eine Spalte ziehen. Lassen Sie es uns so anpassen, dass wir das Logo auf der linken Seite hier drüben haben, und dann werden wir die Links auf der rechten Seite haben. In der Tat können wir nach oben gehen und einige der gleichen Inhalte ziehen. In diesem Fall werde ich diese Marke ziehen, die, wenn wir im Navigator-Panel schauen, es ist nur der Link-Block, der dieses Logo umgibt, und scrollen Sie nach unten, ich werde es in unsere Spalte hinzufügen. Ich möchte auch replizieren, was wir hier sehen, mit unseren Nav-Links. Was ich tun kann, ist einfach wieder zu unserem Add Panel gehen und lassen Sie uns einen Textlink ziehen, und in diesem Fall können wir den Begriff Nav Link verwenden, um die ähnliche Klasse zu erhalten, außer dieses Mal werde ich auch eine zusätzliche Klasse von Footer Link, um einige zusätzliche Änderungen vorzunehmen. Zum Beispiel wollen wir, dass sie nach rechts schweben, und wir können einige zusätzliche Abstände hinzufügen, und ich werde die Unterstreichung entfernen. Wieder haben wir die verschiedenen Links. Wir haben 1, 2, 3, 4 und unsere Kontakt-Schaltfläche, also lassen Sie uns voran und fügen Sie das hinzu. Wir haben eine und ⌘+C, ⌘+V, bekommen alle unsere Links. Noch einen. Perfekt. Wir können das Gleiche hier tun, wo wir die zusätzliche Klasse für Kontakt hinzufügen können, die wir hier sehen werden. Lassen Sie uns einen zusätzlichen Link oder zusätzlichen Stil hinzufügen , so dass wir diese ein wenig mehr zentrieren können. Da gehen wir hin. Lassen Sie uns voran gehen und fügen Sie den Text hinzu. Wir haben Kontakt, Blog, Über, Portfolio und unseren Home-Link. Nun, eine Sache, die wir nicht einmal mit dem nav Link abgedeckt haben, ist, wie einfach es ist, Ihre Websites zu verknüpfen. Wenn wir jetzt zu unserem Seiten-Panel gehen, werden wir feststellen, dass wir noch keine anderen Seiten erstellt haben, aber was es tun kann, ist unser Home-Link, weil es existiert, wir klicken auf den Link und dann in den Einstellungen wir haben unsere Link-Einstellungen, wir könnten einen legitimen direkten Link zu unseren verschiedenen Websites einfügen, wir könnten auch eine bestehende Seite auf unserer Website verwenden, was wir tun werden, wir können auch einen direkten Link zu einem Abschnitt auf unserer Seite verwenden, die wir nicht auf dieser Seite, eine E-Mail oder Telefonnummer haben. Aber in diesem Fall werden wir unser Zuhause benutzen. Beachten Sie, dass sich die Farbe in Blau geändert hat. Das liegt daran, dass wir uns jetzt in einem aktiven Zustand befinden. Eine Sache, die wir tun könnten, ist, den Stil dieses Links für diese Seite anzupassen , weil wir auf der Homepage sind. Gehen wir weiter und ändern es vielleicht in dieses blaue hier. Da gehen wir hin. Das sieht gut aus. Jetzt ist es nur ein Anruf, dass wir auf der Homepage sind, und das gleiche würde für diese Links passieren, wenn wir auf ihren Seiten gewesen wären. Das ist also unsere Homepage. Eine Sache, die wir noch tun müssen, ist sicherzustellen, dass es auf all unseren verschiedenen Geräten funktioniert, was wir als nächstes tun werden. 9. Unsere Website Mobile-ready machen: Das ist also unsere Homepage. Eine Sache, die wir noch tun müssen, ist sicherzustellen, dass es auf allen unseren verschiedenen Geräten funktioniert. Jetzt im Web-Flow, können wir dies mit diesen Panels hier oben tun. Im Moment sind wir auf dem Desktop. Wenn wir zu Tablets gehen, können wir eine bessere Vorstellung davon bekommen, wie die Website zu sehen beginnt und das gleiche für die anderen Geräte als auch. Denken Sie nun daran, in unserem vorherigen Gespräch, Stile, die wir auf dem Desktop machen, werden nach unten auf unsere anderen Geräte kaskadieren, weshalb wir bemerkt haben, dass das Design und alles hier sehr ähnlich sind, wie es auf dem Desktop war. Aber wenn wir zusätzliche Änderungen auf dem Tablet vornehmen, wie zum Beispiel die Größe des Textes so ändern, dass er in eine Zeile passt, wird es nicht die Größe auf der Homepage ändern. Wir müssen auch sicherstellen, dass wir unsere mobile Navigationsleiste aufgebaut haben. Im Moment haben wir unseren Menü-Button ohne Klasse. Geben wir ihm eine Klasse, damit wir sie stylen können. In diesem Fall wird die Farbe aus der Typografie gezogen. Lassen Sie uns voran und passen Sie die Farbe dort und wir können Vorschau, wie es aussieht, wenn wir dieses Menü öffnen, indem Sie auf die Schaltfläche klicken, zu unseren Einstellungen gehen und drücken, Öffnen. Wir möchten einige zusätzliche Stile hinzufügen, damit wir dies etwas besser aussehen können. Lassen Sie uns voran und nutzen Sie unsere Navigationsmenü-Optionen. Sie können das auswählen, indem Sie zu unserem Style-Panel oder Navigator-Panel gehen oder es auswählen, wenn es heruntergeklappt wird, und lassen Sie uns eine Klasse geben. Nennen Sie es unser nav-Menü und lassen Sie es uns so anpassen , dass es auch eine Hintergrundfarbe hat, die dunkler ist. Da gehen wir. Lassen Sie uns die Menü-Taste anpassen. Im Moment ist es offen, was eine zusätzliche Klasse ist, die wir stylen können. Wenn es offen ist, benutzen wir vielleicht wieder das Blau. Wir möchten auch einige zusätzliche Änderungen an unserer Kontaktlänge vornehmen. Lassen Sie uns fortfahren und entfernen Sie die Hintergrundfarbe. Lassen Sie uns etwas zusätzlichen Platz auf der Unterseite hinzufügen. Da gehen wir. Jetzt haben wir alle unsere Links Setup. Wir können einen Blick werfen und werfen einen Blick darauf, wie das auf verschiedenen Geräten aussehen würde. Lasst uns weitermachen und das entfernen. Wie Sie hier bemerken, haben wir 20 Pixel auf jedem dieser Pixel. Lassen Sie es uns mit unseren Kontakten hier abgleichen. Da gehen wir. Das ist halten Shift, die wir es für alle Seiten verwenden und lassen Sie uns den oberen und unteren Rand entfernen. Also, jetzt passt es zu allen anderen Links, und dann haben wir schließlich unser mobiles Gerät. Da gehen wir. Wir haben diese auf allen unseren Geräten angepasst, um sicherzustellen, dass das mobile Menü gut funktioniert, und das sieht gut aus. Lasst uns nun endlich sicherstellen, dass alles andere gut aussieht wie diese Kacheln und unsere Fußzeile. Hier drauf sieht das noch ziemlich gut aus. Lassen Sie uns voran und entfernen Sie einige der zusätzlichen Polsterung, die wir am Ende dieses Abschnitts haben, bringen Sie es näher an unsere untere Fußzeile. Lassen Sie uns diese nur ein wenig neu ausrichten, so dass unsere Fußzeilenlinks ein wenig mehr in Linien mit dem Logo sind. Lassen Sie uns die Polsterung oben hier so anpassen, dass, dieser Heldenabschnitt ist ein wenig mehr in Linien. Wir bemerken gerade jetzt, wie viel Anpassung wir tatsächlich mit diesem Tool bekommen und in der Lage, dies im Browser zu erstellen. Da gehen wir. Lassen Sie uns auch die Polsterung an den Seiten anpassen, so dass wir sie näher an die Ecke und großartig bewegen. Lassen Sie uns weiter zu unseren verschiedenen Geräten gehen und alles, was wir auf dem Tablet-Gerät geändert haben , wird auf diese Geräte übertragen. Sie hoffen, dass es, wenn Sie näher an den Boden kommen, genauso gut aussieht. Lassen Sie uns voran und verringern Sie die Größe dieser wieder und bewegen Sie sie ein wenig mehr zur Seite. Da gehen wir. Jetzt stellen wir fest, dass das ein wenig zu brechen beginnt. Das ist okay, lasst uns weitermachen und einige davon zentrieren. In diesem Fall, wenn Sie eine Klasse zu unserer Fußzeilen-Logo-Marke haben. Nennen wir dies unser Logo Fußzeile und lassen Sie es so positionieren, dass es nicht nach links ist und wir den Text in der Mitte zentrieren. Machen wir das Gleiche hier unten. In diesem Fall geben wir unsere Spalte unserer Fußzeilenlink-Spalte, und lassen Sie uns den Text in der Mitte zentrieren. Im Moment sind sie nicht zentrieren, weil es schwebt. Lasst uns weitermachen und sie loslegen. Stellen Sie sicher, dass sie alle ungeflogen sind. Da gehen wir. Beachten Sie noch einmal, dass ein Großteil dieses Prozesses die Iteration ist. Es geht hin und her und fügt die notwendigen Verbesserungen hinzu, um sicherzustellen, dass alles gut aussieht. Hier oben, gehen wir voran und erhöhen die Größe dieses Textes. Wieder, es wird auf zwei Zeilen zu brechen, unabhängig davon. Lassen Sie uns sicherstellen, dass es gut aussieht und da gehen wir. In diesem Fall brauche ich nicht unbedingt die Spalte, um rauszukommen. Lassen Sie uns voran und entfernen Sie das einfach zurück zu Auto. Lassen Sie uns einfach die Größe des Heldenabschnitts so anpassen, dass es besser mit der Seite passt. Fantastisch, also sieht das gut aus. Das letzte Gerät ist unser mobiles Gerät und lass uns weitermachen und diesem Bild hier einen Schatten hinzufügen. Auf jedem, gehen Sie zu allen und lassen Sie uns einen Textschatten hinzufügen , der den Text nur ein wenig über diesem helleren Hintergrund herausspringt. Fantastisch. Jetzt werden wir hier unten ein bisschen eng mit diesen Kacheln. Das Schöne an der Verwendung der prozentualen Breite, die wir früher verwendet haben, ist, dass wir diese Breite jetzt tatsächlich anpassen können , um 100 Prozent der Ansicht statt der 60, 40 und 33 zu nehmen. Wir können 100 Prozent für jede von ihnen verwenden. Da gehen wir. Jetzt nehmen sie 100 Prozent der Breite ein. Lassen Sie uns den Titeltext hier anpassen. Jetzt kann es etwas größer sein, da wir etwas mehr Platz haben. Wir passen die Linienhöhen an und verschieben sie zurück, so dass sie etwas weiter von der Ecke entfernt ist. Das sieht gut aus. Es sieht so aus, als hätten wir ein bisschen Pause. Lassen Sie uns voran und passen Sie dies so an, dass wir die Größe des Textes verringern können und wir die Größe hier verringern können. Das war unser Kontakt, Sie müssen sicherstellen, dass wir es zu unserem Fußzeilenlink tun. In der Tat, lassen Sie uns 100 Prozent tun und wir stapeln sie übereinander. Lassen Sie uns 13 Pixel machen. Da gehen wir. Jetzt haben wir unsere mobile Ansicht, und wenn wir schauen, um verschiedene Geräte ein weiteres Mal, werden wir feststellen, dass diese alle gut aussehen. Perfekt. Das sind wir, dass wir diese Homepage von Grund auf neu bauen. Lassen Sie uns im nächsten Video voran gehen und eine Beispielvorlagenseite erstellen , die in diesem Fall unsere Projektseite sein wird. 10. Kontakt: Eines der Hauptziele unserer Website ist es, potenziellen Kunden die Kontaktaufnahme mit uns zu erleichtern , wenn sie etwas Arbeit machen wollten. Für dieses Projekt werden wir die Verwendung von effektivem Interaktionsdesign mit einem guten UI- und Layout-Design kombinieren , um einen effektiven Prozess für Menschen zu schaffen, um Sie zu erreichen und zu kontaktieren. In diesem Video beschäftigen wir uns mit dem, was wir hier getan haben, mit dem Hinzufügen und Entwerfen einer Seite von Grund auf neu. In diesem Fall werden wir hier eine Vorlage für unsere Projektsammlung erstellen. Es wird also Daten und Inhalte aus der Datensammlung, die wir bereits erstellt haben, ziehen und verwenden . In diesem Fall ist dieses Projektelement hier. Also, was wir tun werden, ist beginnen, indem wir zu unserem Abschnitt oder einer Vorlage gehen. Wir werden feststellen, dass wir eine leere Seite haben. Der Artikel wird für uns hier oben angezeigt, aber wir haben hier unten keine Inhalte angezeigt. Wir werden also viele der Assets verwenden, die wir bereits erstellt haben, beginnend mit diesem Heldenbereich. Also werde ich fortfahren und Befehl C verwenden, oder ich kann Rechtsklick und Kopieren verwenden, dann zu meinen Projektvorlagen zurückkehren, und ich kann einfügen. Da gehen wir hin. Ich gehe voran und schnappe uns unsere, um wieder nach Hause zu gehen. werde ich auch den nächsten Abschnitt greifen, und ich kann Command C erneut verwenden und zu unseren Projektvorlagen zurückkehren und einfügen. Ich werde diesen Inhalt hier löschen, also habe ich wieder diesen div-Block, der alles umschließt. Jetzt habe ich nur meinen Heldencontainer. Ich werde voran gehen und einen neuen div-Block ziehen. Dann werde ich in diesem Fall einfach unsere Rich-Text-Felder und ein Bild hinzufügen, um uns loszulegen. Da gehen wir hin. Dann schließlich, bevor ich beginne, einen der Inhalte hinzuzufügen, gehen wir weiter und gehen zurück nach Hause und greifen unsere Fußzeile. Nun, der Grund, warum ich Ihnen zeigen möchte, wie wir die Fußzeile machen, ist, weil wir tatsächlich ein Symbol daraus erstellen. Ein Symbol ermöglicht es Ihnen, ein Bild, ein Asset oder eine Gruppe von Elementen wie dieser Fußzeile hier zu erfassen und sie dann zu speichern, um anderswo zu verwenden. Damit wir das duplizieren oder ein neues Symbol um es herum erstellen können, nennen wir dies unsere Fußzeile. Beachten Sie, dass es jetzt in diesem Grün eingekapselt ist und zu unseren Symbolen hier hinzugefügt wird. Also, wenn wir zurück zu unserer Vorlage gehen, anstatt kopieren und einfügen, dieses Mal, werde ich einfach in unserer Fußzeile aus dem Symbolfeld hinzufügen , so dass ich es in rechts nach unten auf der Seite ziehen kann, und wenn wir hier nach unten scrollen, wir wird es sehen. Das Schöne an der Verwendung von Symbolen ist, dass, wenn wir jemals Änderungen vornehmen würden, wie zum Beispiel Hinzufügen eines Links oder das Aktualisieren eines Links, es überall dort aktualisiert werden würde, wo dieses Symbol existiert. Also keine Notwendigkeit, zu verschiedenen Seiten herumzuspringen, um die gleiche Änderung vorzunehmen. Jetzt sehen wir aus, als hätten wir alle Inhalte an Ort und Stelle, aber ich möchte alles, was wir hier sehen, anpassen, um den Stil zu passen, den wir suchen. In einem vorherigen Video habe ich in eine dynamische Liste Elemente gezogen und wir haben es an eine andere Sammlung gebunden, um diese Daten zu ziehen. Nun, in diesem Fall ist diese ganze Vorlagen, bereit, Daten aus unseren Projekten zu ziehen. Also in diesem Fall kann ich einfach auf ein Objekt wie diese Überschrift klicken, und ich kann wählen, meine Texte aus dem Namen des Projekts zu bekommen, und wir können es direkt dort sehen. Ich werde genau das gleiche für das Hintergrundbild im Held Abschnitt tun, und ich werde Hauptbild wählen. Ich werde das gleiche für dieses Bild tun, da gehen wir. Dann habe ich hier unten auch eine Projektbeschreibung für jeden meiner Inhalte geschrieben. Also kann ich diesen Text einfach an diesen dort binden. Genau so haben wir eine sehr einfache Vorlage erstellt, aber eine Vorlage, die Daten aus der Sammlung zieht, die wir bereits haben. Wenn wir zusätzliche Inhalte oder zusätzliche Projekte hinzufügen, werden sie automatisch diese Vorlage erstellen, die wir hier sehen. 11. Veröffentlichen: Sobald Sie Ihre Website erstellt und alle Ihre Inhalte hinzugefügt haben, können wir sie jetzt live veröffentlichen, damit Sie den Rest der Welt sehen können. Wir können unsere Website mit nur zwei einfachen Klicks veröffentlichen. Genau so können wir unsere Website live auf jedem Gerät ansehen. Sie können auch eine benutzerdefinierte Domain hinzufügen, damit Sie direkt auf Ihrer eigenen Website veröffentlichen können. Sie haben also eine Website veröffentlicht, was jetzt? Das Beste, was Sie tun können, ist, es mit dem Rest der Welt zu teilen. Sie können Ihr bestehendes Netzwerk verwenden und E-Mails frühere Kunden oder potenzielle Kunden senden, Sie können es auch in sozialen Konten wie Twitter, Facebook oder Dribble posten. Eines der wichtigsten Dinge, die Sie tun können, ist, sich an frühere Kunden oder Personen zu wenden , mit denen Sie in der Vergangenheit gearbeitet haben. Neunzig Prozent oder mehr der Kunden, die Sie in Zukunft erhalten , werden auf Empfehlungen basieren, basierend auf den Empfehlungen von Personen, mit denen Sie bereits gearbeitet haben. Es ist auch wirklich wichtig, Ihre Website auf dem neuesten Stand zu halten und ständig mit entweder neuen Informationen über sich selbst oder einigen neuen Projekten, die Sie mit neuen Kunden gemacht haben, zu aktualisieren entweder neuen Informationen über sich selbst . Wenn Sie zurückgekehrte Besucher Kunden sind, die Tage oder Wochen später auf Ihre Website zurückkommen und der Inhalt immer noch identisch ist, kann dies das Signal geben, dass Sie entweder nicht mehr arbeiten oder weiterhin neue Arbeiten übernehmen. Mit Webflow ist es unglaublich einfach, das visuelle CMS zu durchlaufen, das wir direkt über die Veröffentlichungs-URL selbst zugreifen. Sobald wir uns angemeldet haben, können wir alle gewünschten Änderungen direkt auf der Seite vornehmen, einschließlich der Bearbeitung von Text oder des Austausches von Bildern. Sobald wir fertig sind, können wir alle unsere Änderungen sehen und den Inhalt sofort veröffentlichen. Wenn wir zusätzliche Inhalte wie einen neuen Blog-Beitrag hinzufügen möchten, können wir das auch hier tun. Genau wie in den vorherigen Schritten im Webflow-Tool ist das Aktualisieren von Inhalten genauso einfach wie das Ausfüllen der erforderlichen Felder und das Hinzufügen der erforderlichen Inhalte und dann die Veröffentlichung direkt auf der Website. Was passiert, ist, dass alle Inhalte, die wir hinzugefügt haben, in der richtigen Formatierung platziert werden , die wir für die Website entwickelt haben. Denken Sie daran, dass die Aktualisierung Ihrer Website nicht nur für SEO-Zwecke von Vorteil ist, sondern auch, um neue Benutzer zu ermutigen, dass Sie immer noch aktualisieren und neue Arbeit übernehmen. 12. Zusammenfassung: Das war's. Wir haben heute eine ganze Menge abgedeckt, einschließlich einiger grundlegender Web- und Entwicklungsprinzipien sowie wie Sie Ihr Portfolio einfach über das Webflow-CMS aktualisieren können. Die nächsten Schritte sind ganz Ihnen überlassen. Wir hoffen, dass dieser Kurs Ihnen beim Einstieg mit Ihren Websites geholfen hat, aber es weiterhin zu aktualisieren, teilen und neue Kunden zu bekommen, ist alles auf Ihrem Teller. Wir hoffen, dass Sie diesen Kurs teilen können, sowohl mit uns hier in dieser Community, aber auch woanders. Wir freuen uns darauf, zu sehen, was andere neue Dinge, die Sie mit Webflow oder einem anderen Tool erstellen. Wir hoffen, dass dieser Kurs ein großartiger erster Schritt beim Aufbau Ihrer ersten Websites war. Wir hoffen aber auch, dass Sie dies weiterhin tun, entweder Webflow oder andere Web-Design-Tools verwenden , um Ihr Portfolio online und darüber hinaus weiter aufzubauen.