Share
Willkommen bei Tuts + Town, wo jeder Webdesign liebt! In dieser Serie erfahren Sie alles über das Entwerfen und Erstellen einer Website. Um uns zu helfen, erstellen wir gemeinsam eine Website.
Diese Lektionen (oder Tutorials) Wird Ihnen Schritt für Schritt zeigen, wie Sie eine Website zum Leben erwecken können. Alle Übungsdateien werden am Ende jeder Lektion beigefügt, so dass Sie Ihre eigene Arbeit jederzeit vergleichen können.
Kommen Sie also rein, machen Sie es sich bequem und lassen Sie uns etwas für die Menschen in Tuts + Town schaffen!
Lassen Sie uns einen Schritt zurückgehen und überlegen, wie das Internet funktioniert.
Wenn zwei Computer mit dem Internet verbunden sind (was im Bild unten als gelbe Linie dargestellt ist), können sie miteinander sprechen.
Ein Server (die blaue Box) ist ein spezieller Computer, der Webseitendateien enthält. Ihr Computer zu Hause oder in der Schule ist kein Server, da er nicht direkt mit dem Internet verbunden ist. Wir verbinden uns über eine Internetverbindung mit dem Internet Internetanbieter (ISP).
Der Inhalt einer Website (all das, worüber eine Website spricht) ist in einem speziellen Regelwerk organisiert, das Computer verstehen. Es ist fast so, als würden wir in einer geheimen, verschlüsselten Sprache sprechen, außer wir werden bald auch in dieses kleine Geheimnis eingehen!
Wie verbindet sich Ihr Computer mit dem Internet?In diesem Bild die Browser bittet darum, www.tutsplus.com von dem Server anzuzeigen, auf dem sich die Dateien der Site befinden. Der Server sendet die Dateien zurück und der Browser übersetzt sie, um eine Seite auf dem Bildschirm anzuzeigen. Und das passiert sehr schnell!
Es geht nur um Kommunikation und teilen Information.
Aus diesem Grund schreiben Sie eine Site örtlich (auf Ihrem Computer) können von anderen Personen auf einem anderen Computer nicht gesehen werden, bis Sie die Dateien auf einen Server verschieben. Wir werden das später richtig betrachten.
Die Arbeit eines Webdesigners ist sehr wichtig. Alles, was auf dem Bild oben stattfindet, geschieht aus einem Grund: zum Anzeigen einer Website. Die Aufgabe eines Webdesigners ist es, zu entscheiden, wie diese Website aussieht und funktioniert, und sogar andere Dinge, wie beispielsweise die Sicherstellung, dass die Website für behinderte Besucher nutzbar ist (auf dieselbe Weise wie Sie Besucher zu Tuts + jetzt).
Die Arbeit eines WebdesignersIn dieser Serie erstellen wir eine Website für Tuts + Town. Die Stadt braucht einen Ort, an dem Touristen vor ihrem Besuch praktische Informationen über die Stadt erhalten können.
Hier ist eine Vorschau der Website:
Was bauen wir?Diese Website enthält alle Webdesign-Punkte, die wir kennenlernen werden. Es wird ein wirklich ordentliches erstes Webdesign-Projekt für Sie!
Lassen Sie uns ein wenig darüber sprechen, was wir brauchen, um dorthin zu gelangen.
Zuerst erstellen wir unsere Website und fügen dann in einer speziellen Datei ein, was wir auf der Seite haben möchten. Wir werden hier auch Links für die Besucher hinzufügen, um sie an andere Orte zu bringen, beispielsweise auf die Shop-Websites.
Skizzieren ist wichtig!Nachdem wir die spezielle Datei für unsere Website erstellt und geschrieben haben, müssen wir sie gut aussehen lassen. In diesem Bereich werden all unsere Farb- und Layoutideen (entscheiden, wo all diese Dinge auf dem Bildschirm zu sehen sind) zum Leben erweckt.
Wie können wir unsere Website benutzerfreundlicher gestalten? Was Gefühl Wollen wir, dass unsere Farben geben? Wo soll alles auf einem Smartphone-Bildschirm platziert werden? Was ist mit einem vollständigen Computerbildschirm? Was Schriftart wird am besten aussehen Dies sind alles Dinge, über die wir nachdenken müssen, aber keine Sorge, es ist ein wirklich spaßiger Prozess, und diese Fragen werden Ihnen natürlich zukommen, je mehr Websites Sie entwerfen.
Unten ist eine vollständige Roadmap Für die Reise werden wir unsere Website erstellen. Jeder Block enthält eine Einführung in das Thema und wird in kleinere Teile zerlegt.
Unsere RoadmapSie sehen am rosa Stern, dass wir das lesen Intro im Moment. Wir haben jetzt eine grundlegende Vorstellung davon, wie das Web funktioniert, die Arbeit eines Webdesigners und wir haben einen Höhepunkt bei dem Projekt erreicht, das wir entwerfen werden und zusammen bauen.
Der nächste Teil ist, wo wir uns Ideen ausdenken und mit dem Skizzieren beginnen. Skizzieren ist eine wirklich lustige Methode, um Ihre Gedanken zu einem Design zu sammeln, bevor Sie mit dem Programmieren beginnen. Es kann sehr viel Zeit sparen und uns auf dem Laufenden halten.
Wir sprechen dann über Dateien und die Werkzeuge, die wir benötigen, um mit der Codierung Teil unserer Website.
HyperText-Auszeichnungssprache (HTML) ist diese geheime (aber nicht lange!) Sprache, die zum Organisieren unserer Textdatei verwendet wird, über die wir zuvor kurz gesprochen haben. Diese Sprache hilft unseren Browsern, die Websitedateien zu verstehen und anzuzeigen.
Alles auf unserer Website und alle Websites, die dies betreffen, werden innerhalb von HTML gespeichert Elemente. Elemente sind Bits dieser Sprache, die ein Bedeutung und Hilfe beschreiben alles, was wir auf der Seite platzieren.
Machen Sie sich keine Gedanken darüber, was dieser Code im Moment wirklich bedeutet, solange Sie wissen, dass jede Website aus einem schriftlichen Dokument besteht.
Cascading Style Sheets, CSS ermöglicht es uns, die Gestaltung (Farben, Schriftarten, Gesamtgefühl) für unsere Website festzulegen, um sie für die Besucher so attraktiv und benutzerfreundlich wie möglich zu gestalten.
Wie CSS aussiehtCSS kann uns auch dabei helfen, alle unsere Teile auf der Seite darzustellen.
In diesem Teil der Reise werden wir schnell über die Art der Bilder, die auf unserer Website enthalten sein werden, und darüber, wie wir sie gestalten können, sprechen. Es werden vier schöne Bilder hinzugefügt, was halten Sie davon??
In diesem Teil werden wir die "Bausteine" des Webdesigns betrachten. Wir möchten sicherstellen, dass wir etwas schaffen, das von den Menschen verwendet wird und leicht verwendet werden kann. Außerdem soll sichergestellt werden, dass es schön aussieht.
Typografie ist die Kunst des Arrangierens von Text und eine großartige Nachbereitung unserer neuen Design-Lektion, da sie den Erfolg unserer Website erheblich verbessern oder verringern kann.
Das erste Beispiel für Typografie auf unserer Website finden Sie ganz oben:
Farbe ist sehr wichtig und macht Spaß. Farbe kann eine Website schön machen und haben Bedeutung, worüber wir hier alles reden werden.
Wir werden diese Lektion beenden, indem wir lernen, wie Sie Ihre Website-Dateien auf einen dieser speziellen Computer laden können Server, So können alle Ihre Freunde und Familie es im Internet sehen. Wir sprechen auch darüber, wo Sie Ihr Studium mit Ihrem neuen Titel als "Web Designer for Tuts + Town" aufnehmen können..
Aber machen wir uns darüber keine Sorgen, wir sind gerade erst hier!
In der nächsten Lektion lernen wir direkt, wie wir uns auf den Aufbau einer Website mit HTML vorbereiten. Ich kann es kaum erwarten, dich in der Stadt zu sehen!
Accentsconagua