![Wie baue ich eine Moderne Website? - Part #1 [Tutorial]](https://i.ytimg.com/vi/PmJpV0110_0/hqdefault.jpg)
Inhalt
- 01. Mach dich bereit
- 02. Beenden Sie den HTML-Code
- 03. Untersuchen Sie Sass-Variablen
- 04. Passen Sie das Körperstyling an
- 05. Gestalten Sie die Abschnittsüberschriften
- 06. Heben Sie die CTAs hervor
- 07. Stellen Sie den Containerhintergrund und die Bildschirme ein
- 08. Hintergrundbilder hinzufügen
- 09. Übergänge und Hover-Effekte hinzufügen
- 10. Wechseln Sie in JavaScript
- 11. Fügen Sie eine Klasse hinzu und entfernen Sie sie
- 12. Machen Sie es reaktionsschnell
Ihre Zielseite ist ein entscheidendes Element in Ihrem Website-Layout. Es ist die erste echte Gelegenheit, Ihr Unternehmen oder das von Ihnen verkaufte Produkt vorzustellen. Daher ist das Design von entscheidender Bedeutung. Zielseiten werden mit einem einzigen fokussierten Ziel gestaltet, das als Call to Action (CTA) bezeichnet wird. Die Verwendung von Farben und Bildern zur Ergänzung der Handlungsaufforderungen und der Benutzererfahrung ist ein Muss.
- Weitere Informationen zu diesem Lernprogramm finden Sie im funktionierenden CodePen
In diesem Tutorial erfahren Sie, wie Sie eine ansprechende Zielseite für eine fiktive Modemarke erstellen. Im Mittelpunkt steht ein Split-Screen-Design mit großen Bildern und animierten Übergängen, die beim Schweben auftreten.Diese Seite enthält zwei eindeutige Aktionsschaltflächen. Wir verwenden HTML, Sass für das Styling und einen Hauch von Vanille-JavaScript, das die ES6-Syntax verwendet (denken Sie daran, sicherzustellen, dass Ihr Webhosting für die Anforderungen Ihrer Website geeignet ist). Zu komplex? Erstellen Sie eine Website ohne Code und versuchen Sie es mit einem einfachen Website-Builder.
01. Mach dich bereit
Wenn Sie CodePen verwenden, stellen Sie sicher, dass das CSS in den Stifteinstellungen auf "SCSS" eingestellt ist. Sie können diese Änderung vornehmen, indem Sie auf die Registerkarte "Einstellungen" klicken, "CSS" auswählen und den CSS-Präprozessor in den Dropdown-Optionen in "SCSS" ändern.
Dann können wir mit dem Hinzufügen unseres HTML beginnen. Wir werden einen Abschnitt mit der Bezeichnung "links" und einen Abschnitt mit der Bezeichnung "rechts" in eine Containerklasse einschließen, wobei beide Abschnitte die Klasse "Bildschirm" erhalten.
div> section> / section> section> / section> / div>
02. Beenden Sie den HTML-Code
Um unseren HTML-Code fertigzustellen, fügen wir einen Titel für jeden Abschnitt mit einem hinzu h1 Etikett. Darunter müssen wir eine Schaltfläche hinzufügen, die auf eine andere Seite verweist, wenn dies ein reales Projekt wäre. Wir werden dies eine Klasse von geben Taste um die Dinge schön und einfach zu halten.
div> section> h1> Herrenmode / h1> button> a href = "#"> Weitere Informationen / a> / button> / section> section> h1> Damenmode / h1> button> a href = "#"> Learn Mehr / a> / button> / section>
03. Untersuchen Sie Sass-Variablen
Das einzige, was wir alle an Sass lieben, ist die Verwendung von Variablen. Obwohl native CSS-Variablen mehr Unterstützung erhalten, werden wir die Sicherheit durch die Verwendung von Sass gewährleisten. Wir werden diese ganz oben auf unsere Liste setzen .scss, und Sie können wählen, welche Farben Sie wollen, aber mit rgba Werte geben uns mehr Flexibilität.
/ * * Variablen * * / $ container-BgColor: # 444; $ left-bgColor: rgba (136, 226, 247, 0,7); $ Hover mit der linken Maustaste: rgba (94, 226, 247, 0,7); $ right-bgColor: rgba (227, 140, 219, 0,8); $ Rechts-Tasten-Hover: rgba (255, 140, 219, 0,7); $ Schwebebreite: 75%; $ kleine Breite: 25%; $ animateSpeed: 1000ms;
04. Passen Sie das Körperstyling an
Zuerst löschen wir alle Standardauffüllungen und -ränder des Körpers und setzen dann die Schriftfamilie auf Open Sans. Dies wirkt sich nur auf die Schaltfläche aus. Es spielt also keine Rolle, welche Schriftart wir verwenden. Dann setzen wir die Breite und Höhe auf 100% und stellen Sie sicher, dass alles, was auf der X-Achse überläuft, ausgeblendet wird.
html, body {padding: 0; Rand: 0; Schriftfamilie: "Open Sans", serifenlos; Breite: 100%; Höhe: 100%; Überlauf-x: versteckt; }}
05. Gestalten Sie die Abschnittsüberschriften
Es ist Zeit, eine Google-Schriftart für die Abschnittsüberschriften auszuwählen - wir haben Playfair Display ausgewählt. Dann mit translateX Wir können sicherstellen, dass die Abschnittsüberschriften immer auf der X-Achse zentriert sind.
h1 {Schriftgröße: 5rem; Farbe: #fff; Position: absolut; links: 50%; Top 20%; transformieren: translateX (-50%); Leerraum: Nowrap; Schriftfamilie: "Playfair Display", Serife; }}
06. Heben Sie die CTAs hervor
Unsere Schaltflächen dienen als Handlungsaufforderung, daher müssen diese groß, fett und so positioniert sein, dass sie leicht zu klicken sind. Beide Schaltflächen haben einen weißen Rand und einen interessanten Übergangseffekt. Die Standardstile für beide Schaltflächen sind gleich, wir ändern jedoch ihre Farben beim Hover.
.button {display: block; Position: absolut; links: 50%; oben: 50%; Höhe: 2.6rem; Polsterung oben: 1.2rem; Breite: 15rem; Textausrichtung: Mitte; Farbe weiß; Rand: 3px fest #fff; Randradius: 4px; Schriftgröße: 600; Texttransformation: Großbuchstaben; Textdekoration: keine; transformieren: translateX (-50%); Übergang: alle .2s;
Die Hauptschaltflächen haben einen schönen einfachen Hover-Effekt und wir verwenden die Sass-Variablen, die wir für die Farbe angegeben haben. Diese Farbe hat eine ähnliche Farbe wie der Hintergrund der Seite.
.screen.left .button: hover {Hintergrundfarbe: $ left-button-hover; Rahmenfarbe: $ left-button-hover; } .screen.right .button: hover {Hintergrundfarbe: $ right-button-hover; Rahmenfarbe: $ rechter Button-Hover;
07. Stellen Sie den Containerhintergrund und die Bildschirme ein
Die Containerklasse fungiert als unser Seitenumbruch und wir setzen die Position auf relativ, einfach weil wir die Bildschirme auf absolute Position bringen wollen. Wir geben dem Container eine Standardhintergrundfarbe, aber dies wird natürlich nicht angezeigt, da wir für beide Bildschirmhintergründe unterschiedliche Farben festlegen.
.container {Position: relativ; Breite: 100%; Höhe: 100%; Hintergrund: $ container-BgColor; .screen {Position: absolut; Breite: 50%; Höhe: 100%; Überlauf versteckt; }}
08. Hintergrundbilder hinzufügen
Sowohl im linken als auch im rechten Bereich wird ein Bild angezeigt. Auf Websites wie Unsplash, Pixabay oder Pexels (die ich in diesem Lernprogramm verwendet habe) finden Sie lizenzfreie Bilder. Zur Vereinfachung habe ich einen kostenlosen Hosting- und Freigabedienst für Bilder namens imgbb verwendet, auf den wir in unserem CSS verlinken können.
.screen.left {left: 0; Hintergrund: URL (’https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp’) Center Center No-Repeat; Hintergrundgröße: Cover; &: vor {Position: absolut; Inhalt: ""; Breite: 100%; Höhe: 100%; Hintergrund: $ left-bgColor; }}
Auf der rechten Seite der Seite wird auch ein Hintergrundbild mit imgbb angezeigt, und wir setzen die Hintergrundfarbe auf Pink. Auch hier setzen wir die Hintergrundgröße auf Startseite. Auf diese Weise können wir das gesamte enthaltende Element abdecken, in unserem Fall das .Bildschirm Klasse.
.screen.right {rechts: 0; Hintergrund: URL (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) Center Center No-Repeat; Hintergrundgröße: Cover; &: vor {Position: absolut; Inhalt: ""; Breite: 100%; Höhe: 100%; Hintergrund: $ right-bgColor; }}
09. Übergänge und Hover-Effekte hinzufügen
Die Animationsgeschwindigkeit für unseren Hover-Effekt auf beiden Bildschirmen wird durch einen Übergang gesteuert, der den Wert unserer Variablen enthält $ animateSpeedDas sind 1000 ms (eine Sekunde). Zum Abschluss geben wir der Animation eine gewisse Lockerung. Dies ist ein einfaches Ein- und Aussteigen, das uns dabei hilft, eine flüssigere Animation zu erstellen.
.screen.left, .screen.right, .screen.right: before, .screen.left: before {Transition: $ animateSpeed all easy-in-out; }}
Was wir jetzt tun möchten, ist, dass, wenn Sie mit der Maus über den linken Bildschirm fahren, diesem Abschnitt eine Klasse hinzugefügt wird, die JavaScript verwendet (die wir in einem späteren Schritt schreiben werden). Wenn diese Klasse hinzugefügt wird, wird dieser Bildschirm auf die Breite der von uns angegebenen Variablen ausgedehnt - 75% - und auf der rechten Seite wird die Variable mit der kleineren Breite (25%) festgelegt.
.hover-left .left {width: $ hover-width; } .hover-left .right {width: $ small-width; } .hover-left .right: before {z-index: 2; }}
Dies funktioniert genauso wie auf der linken Seite, wo beim Bewegen der Maus mit JavaScript eine neue Klasse hinzugefügt wird und der rechte Bildschirm entsprechend ausgedehnt wird. Wir müssen auch sicherstellen, dass die Z-Index ist eingestellt auf 2 Dadurch wird die CTA-Taste stärker hervorgehoben.
.hover-right .right {width: $ hover-width; } .hover-right .left {width: $ small-width; } .hover-right .left: before {z-index: 2; }}
10. Wechseln Sie in JavaScript
Wir werden einen Hauch von Vanille-JavaScript verwenden, um CSS-Klassen hinzuzufügen und zu entfernen, und wir werden auch einige der neuen ES6-Funktionen verwenden. Als erstes müssen wir einige konstante Variablen deklarieren.
Weil wir verwenden werden Dokument mehr als einmal setzen wir eine konstante Variable namens doc und speichern Sie das Dokument darin, damit wir das Wort "Dokument" schön kurz halten können.
const doc = document;
Jetzt müssen wir drei weitere Konstanten festlegen, in denen die gespeichert wird .Recht, .links und .Container Selektoren. Der Grund, warum wir Konstanten verwenden, ist, dass wir wissen, dass wir den Wert dieser Konstanten nicht ändern möchten. Daher ist die Verwendung von Konstanten sinnvoll. Wenn diese jetzt festgelegt sind, können wir ihnen einige Mausereignisse hinzufügen.
const right = doc.querySelector (". right"); const left = doc.querySelector (". left"); const container = doc.querySelector (". container");
Verwendung der links Konstante Variable, die wir im letzten Schritt deklariert haben, können wir nun einen Ereignis-Listener hinzufügen. Diese Veranstaltung wird die mouseenter Ereignis und anstatt eine Rückruffunktion zu verwenden, verwenden wir eine andere ES6-Funktion namens Pfeilfunktionen ’(() =>).
// fügt dem Containerelement auf hover left.addEventListener eine Klasse hinzu ("mouseenter", () => {container.classList.add ("hover-left");});
11. Fügen Sie eine Klasse hinzu und entfernen Sie sie
Im letzten Schritt hat unser Event-Listener a hinzugefügt mouseenter Ereignis, das auf die Hauptcontainerklasse abzielt und eine neue Klasse mit dem Namen hinzufügt links schweben zum linken Abschnittselement. Wenn dies als hinzugefügt bezeichnet wird, müssen wir es jetzt entfernen, wenn wir den Mauszeiger darüber halten. Wir tun dies mit dem Mausblatt Veranstaltung und die .entfernen() Methode.
// entfernt die Klasse, die beim Schweben hinzugefügt wurde left.addEventListener ("mouseleave", () => {container.classList.remove ("hover-left");});
Bis jetzt haben wir alles auf dem linken Bildschirm gemacht. Jetzt beenden wir das JavaScript und fügen Klassen für die rechten Abschnittselemente hinzu und entfernen sie. Auch hier haben wir die Syntax der Pfeilfunktion verwendet, damit alles schön und ordentlich aussieht.
right.addEventListener ("mouseenter", () => {container.classList.add ("hover-right");}); right.addEventListener ("mouseleave", () => {container.classList.remove ("hover-right");});
12. Machen Sie es reaktionsschnell
Kein Projekt - egal wie groß oder klein - sollte es vermeiden, darauf zu reagieren. In diesem Schritt werden wir unserem CSS einige Medienabfragen hinzufügen und dieses kleine Projekt so anpassungsfähig wie möglich an mobile Geräte machen. Es lohnt sich, den Original-CodePen zu lesen, um zu sehen, wie dies funktioniert.
@media (maximale Breite: 800px) {h1 {Schriftgröße: 2rem; } .button {width: 12rem; }}
Wir haben sichergestellt, dass die Schriftart und die Schaltflächen verkleinert werden, wenn die Breite unserer Seite auf 800 Pixel sinkt. Zum Abschluss möchten wir auch die Höhe als Ziel festlegen und sicherstellen, dass sich unsere Schaltflächen auf der Seite nach unten bewegen, wenn die Seitenhöhe unter 700 Pixel fällt.
@media (maximale Höhe: 700px) {.button {oben: 70%; }}
Möchten Sie Ihre Seiten speichern? Exportieren Sie sie als PDFs und speichern Sie sie in einem sicheren Cloud-Speicher.
Webdesign-Event London generieren kehrt vom 19. bis 21. September 2018 zurück und bietet einen vollen Zeitplan mit branchenführenden Rednern, einen ganzen Tag voller Workshops und wertvolle Networking-Möglichkeiten - verpassen Sie es nicht. Holen Sie sich jetzt Ihr Generate-Ticket.
Dieser Artikel wurde ursprünglich im Netzmagazin veröffentlicht Ausgabe 305. Abonniere jetzt.
