Share
Wir haben es geschafft! Wir haben unsere allererste Website von Grund auf neu erstellt und sprachen über einige wesentliche Elemente des Designs wie Leerzeichen, Typografie und Farbe.
In diesem abschließenden Lernprogramm werden wir alles, was wir bisher über das Erstellen einer Website und das Design gelernt haben, schnell überprüfen. Außerdem erfahren Sie, wie Sie unsere Website im Internet nutzen können, damit wir unsere Freunde und Familie an eine Webadresse weiterleiten können und einige davon berühren können nützliche Ressourcen mit unseren Studien.
Vergessen Sie nicht, letzte Fragen in den Kommentaren am Ende dieser Seite zu stellen!
Werfen wir einen Blick auf die Serien-Roadmap, mit der wir uns dort befinden, wo wir jetzt sind.
Wir begannen diese Serie mit der Frage, wie das Web funktioniert. Damit zwei verschiedene Computer miteinander kommunizieren können, müssen beide über einen ISP (Internet Service Provider) mit dem Internet verbunden sein..
Damit andere Personen unsere Website im Internet überprüfen können, müssen diese Site-Dateien auf einen Server übertragen (verschoben) werden. ein spezieller Computer mit direktem Zugang zum Internet. Wir werden dies in einem Abschnitt weiter unten genauer besprechen.
Unsere Rolle im Internet ist die eines Webdesigners. Es ist unsere Aufgabe, dafür zu sorgen, dass eine Website schön aussieht und für unsere Benutzer sehr einfach zu lesen und zu navigieren ist.
Vor diesem Hintergrund haben wir uns vorgenommen, unsere Tuts + Town-Site mit HTML und CSS zu erstellen, nachdem wir einige fantastische Skizzen auf Papier erstellt haben. Um uns auf diesen Teil des Prozesses vorzubereiten, mussten wir alles über das Benennen und Organisieren von Dateien lernen.
Wir wissen jetzt, dass die Haupt-HTML-Datei immer aufgerufen wird index.html und ob sich Bilder in einem eigenen Ordner befinden oder nicht src Attribut in unserem HTML.
Schließlich haben wir einen Texteditor ausgewählt und waren offiziell bereit, einige HTML- und CSS-Dateien zu schreiben!
Um unsere Tuts + Town-Site zu erstellen, haben wir zunächst unsere HTML-Struktur erstellt und dann den Inhalt eingefügt.
Diese Struktur bestand aus mehreren Elementen verschachtelt innerhalb eines primären html Die Tatsache, dass dieses Fundament vorhanden ist, machte das Einfügen des Inhalts viel einfacher.
Sobald der Inhalt erstellt wurde, konnten wir alles mit CSS gestalten. Zunächst mussten wir die beiden Dokumente im HTML miteinander verknüpfen Kopf:
In unserem CSS-Dokument konnten wir dies tun erklären Farben, Größen, Layout und mehr zu Elementen innerhalb des HTML-Dokuments, die schließlich zum vollständigen Site-Design führen.
Dieser Abschnitt der Serie endete mit einem Tutorial, in dem die verschiedenen Bildformate beschrieben wurden. Wir haben darüber gesprochen, sie in unseren HTML-Code aufzunehmen und einige Effekte, die wir mit CSS auf Bilder anwenden können, zum Beispiel deren Änderung Opazität:
Wie bereits erwähnt, handelt es sich bei allen Bildern, die in der Tuts + Town-Serie verwendet werden, um SVGs. Dies bedeutet, dass sie ohne Qualitätsverlust skaliert und leicht bearbeitet werden können.
Nachdem wir unsere Website erstellt haben, haben wir die grundlegenden Designkonzepte überprüft, die dazu beigetragen haben, das Erscheinungsbild und die Benutzerfreundlichkeit der Website zu bestimmen.
Inhalt ist der wichtigste Teil des Webdesigns. Nachdem wir also festgestellt haben, dass unsere Inhalte nützlich, benötigt und gut organisiert sind, haben wir uns auf visuelle Elemente konzentriert.
Die visuelle Hierarchie für die Site wurde durch unterschiedliche Schriftgrößen, Farben und Leerzeichen festgelegt, ähnlich wie die oben dargestellte Sprechblase als dominierendes Objekt im Bild konzipiert wurde.
Typografie ist überall, wo wir geschriebene Wörter sehen, und ist einer der wichtigsten Bestandteile des Webdesigns. Unsere Benutzer müssen in der Lage sein, unseren Inhalt zu lesen, aber wir müssen auch sicherstellen, dass die von uns ausgewählten Schriften dem Ton und dem Verhalten unseres Inhalts und des visuellen Designs entsprechen.
Dieser Abschnitt der Serie endete mit einem Tutorial zur Farbtheorie, zur Bedeutung bestimmter Farben, zu verschiedenen Farbsystemen für das Web und zur Auswahl einer erfolgreichen Palette.
Anhand der primären und sekundären Farbräder können Sie besser verstehen, wie bestimmte Farben erstellt werden und warum einige Farben zusammen gut aussehen, andere dagegen nicht.
Lassen Sie uns nun durchgehen, wie wir unsere Website ins Internet stellen würden!
Wie wir zu Beginn dieser Serie besprachen, lebt diese Seite örtlich auf unseren einzelnen Computern und nicht im Internet. Zu diesem Zeitpunkt können wir Freunde und Familie nicht an eine Adresse im Internet weiterleiten, sodass sie unsere erstaunliche Arbeit noch nicht sehen können.
Wie in der Einführung beschrieben, müssen Dateien auf einem Server gespeichert werden, damit andere sie im Internet anzeigen können.
Das Aufrufen einer Website im Internet kann häufig einen Kauf und eine E-Mail-Adresse beinhalten. Wenn Sie zu jung sind, um Zugang zu einem dieser beiden zu haben, ist es am besten, einen Erwachsenen für den folgenden Abschnitt bei sich zu haben.
Es gibt eine Reihe von Diensten, die helfen werden Wirt unsere Dateien für uns und machen sie im Internet zugänglich. Bei dieser Serie konzentrieren wir uns auf das Hosting durch NeoCities und das Grundkonzept von Domainnamen.
NeoCities ist ein fantastisch und kostenlos Option für unkompliziertes File-Hosting im Web; Wir benötigen jedoch noch eine E-Mail-Adresse, um sich zu registrieren!
Gehen wir die Schritte durch, um unsere Dateien hier zu hosten:
Hier ist ein Blick auf die Site auf NeoCities: tutsplustown.neocities.org
Ein weiterer Vorteil dieses Services besteht darin, dass wir den Kauf- und Einrichtungsprozess der Domäne (der benutzerdefinierten Adresse für Websites) nicht durchlaufen müssen. Allerdings werden wir als Nächstes darauf eingehen, wie dies zu tun ist.
Wichtig! Es ist möglich, einen benutzerdefinierten Domänennamen mit NeoCities zu verwenden, indem Sie nach der Ersteinrichtung in die Einstellungen der Site gehen und die dortigen Anweisungen befolgen. Dies erfordert jedoch derzeit ein Upgrade für 5,00 USD pro Monat.
Domänen sind die benutzerdefinierten Adressen, an die Personen weitergeleitet werden, damit sie eine Website besuchen können. Dieser Schritt war nicht erforderlich, als wir unsere Site-Dateien auf NeoCities gehostet haben, da er eine spezielle Neocities-Adresse für uns erstellt hat. Wenn Sie jedoch nach einem wirklich benutzerdefinierten Domänennamen suchen (z. B. tutsplustown.com zum Beispiel) müssen wir diesen Namen kaufen.
Wie bei unserem NeoCities-Benutzernamen muss auch unser Domänenname eindeutig sein. Es kann einige Zeit dauern, bis ein Name gefunden wird, der noch nicht vergeben ist.
Hier sind ein paar Dienste, mit denen wir Domainnamen kaufen können, sobald wir ein Konto erstellt haben:
Der letzte Schritt zum Einrichten einer benutzerdefinierten Domäne kann nach der Übertragung der Dateien über den Hosting-Service (wie unten erwähnt) (wie Neocities oder BitBalloon) ausgeführt werden.
Wenn wir uns nicht für NeoCities entscheiden, gibt es einige andere Hosting-Unternehmen, die sich als besonders erschwinglich und benutzerfreundlicher erweisen, aber vielleicht ist BitBalloon das, was am meisten aus diesen Gründen heraussticht.
BitBalloon kann kostenlos getestet werden, erfordert jedoch die Zahlung einer benutzerdefinierten Domäne, ähnlich wie bei NeoCities. Die Leichtigkeit, mit der Dateien per Drag & Drop in die Benutzeroberfläche gezogen werden können, macht dies zu einer ziemlich aufregenden Option für grundlegende Websites wie Tuts + Town.
Sobald die Dateien übertragen sind, können Sie den benutzerdefinierten Domänen-Setup-Vorgang über die Tools im BitBalloon-Dashboard abschließen.
Unsere Tuts + Town-Site hat eine eigene Site-Adresse, die auf ähnliche Weise abgerufen und eingerichtet wurde, wie wir sie gerade überprüft haben: tutsplustown.com.
Während diese Serie eine Einführung in das Webdesign bot, möchten wir vielleicht bald unsere Fähigkeiten weiterentwickeln, sobald wir dies getan haben üben, üben, üben die Themen, die wir hier besprochen haben.
Das Buch "Erstellen Sie Ihre eigene Website, ein Comic-Leitfaden für HTML, CSS und Wordpress" von Nate Cooper bietet eine solide Grundlage für die Erstellung einer Website anhand einer lustigen Geschichte, die in einem Comic-Format erzählt wird.
Shay Howe hat eine Reihe ausführlicher Lernprogramme für HTML und CSS für Anfänger und Fortgeschrittene geschrieben:
Responsive Webdesign bezieht sich auf das Entwerfen von Websites, die unterschiedliche Bildschirmgrößen berücksichtigen. Wir verbringen beispielsweise viel Zeit mit unseren Smartphones und als Designer müssen wir sicherstellen, dass unsere Website auf diesen kleineren Bildschirmen sowie einem Desktop-Bildschirm in voller Größe funktioniert.
Es gibt ein fantastisches Anfänger-Tutorial von Shay Howe zum Thema.
Wir haben in dieser Serie Pixel als Maßeinheit im Web verwendet. Die Verwendung von Pixeln ist vollkommen in Ordnung, aber je mehr Erfahrung Sie haben, desto mehr werden Sie erkennen, wie einschränkend sie sind. Es ist eine solch unflexible Maßeinheit, die im Responsive Design nicht gut funktioniert.
Bei der Gestaltung über verschiedene Bildschirmgrößen gibt es mehrere Alternativen, die flexibler sind als Pixel, z Prozentsätze und rems.
Während wir Flexbox im Tutorial zum CSS-Layout kurz besprochen haben, können wir mit Layouts, die es verwenden, noch viel mehr erreichen. Es gibt einige hervorragende Orte, an denen Sie mehr lernen können, wie dieses vollständige Flexbox-Handbuch und ein Flexbox-Cheatsheet-Diagramm.
Was das Layout als Ganzes und nicht nur die Flexbox betrifft, gibt es eine nette kleine Website, die uns durch die Grundlagen führt.
Während wir noch viel mehr lernen können, um unsere Webdesign-Fähigkeiten zu stärken und auszubauen, haben wir in dieser Serie sehr viel erreicht und verstehen jetzt die Grundlagen für das Entwerfen und Erstellen einer Site viel besser.
Wir haben eine Website offiziell von Skizzen auf Papier zu einer echten Website mit einer eigenen Webadresse erweckt; Alles am Tag eines Webdesigners!
Unsere Tuts + Town-Website ist ein schöner, benutzerfreundlicher Leitfaden für Touristen, der einen Besuch in Betracht zieht. Vielen Dank für Ihre harte Arbeit.
Accentsconagua