Share
Willkommen zur zweiten Lektion in unserer Web Design for Kids-Serie!
In dieser Lektion erfahren Sie alles über einige Dinge, die wir tun müssen, und die Tools, die wir benötigen, bevor wir den Code für unsere Tuts + Town-Website schreiben. wir kommen dorthin, ich verspreche es! Vergessen Sie nicht, im Kommentarbereich unten auf dieser Seite Fragen zu stellen.
Das erste, was zuerst ist, werfen wir doch einen genaueren Blick darauf, was wir gemeinsam schaffen werden!
Es ist sehr hilfreich, Ideen zu skizzieren, bevor wir mit dem Aufbau beginnen. Dies ist eine Übung, die uns beim Codieren viel Zeit sparen kann.
Vielleicht sieht das, was in unseren Köpfen ist, nicht richtig aus, wenn es auf Papier steht? Vielleicht tauchen in unserer Skizze einige neue Probleme und Fragen auf? Vielleicht ist unser Design einfach zu beschäftigt? Viele dieser Probleme werden sich in unseren Skizzen zeigen.
Es ist OK unsere skizzen zunächst nicht mögen, genau das wollen wir! Wir wollen, dass das alles zuerst auf Papier klappt.
Wir brauchen eine Website für Touristen, um zu erfahren, welche Geschäfte und Geschäfte unsere Stadt bietet. Wir werden diese Unternehmen auf eine sinnvolle Weise zusammenfassen, z. B. „Hotels“ in einer Gruppe und „Restaurants“ in einer anderen Gruppe. Wir möchten Links zu den firmeneigenen Websites haben, damit unsere Besucher auf sie klicken können, um mehr Details zu erhalten.
Es gibt auch einige Bilder, mit denen wir der Stadt eine einladende Atmosphäre verleihen.
Hier sehen Sie die Skizze, die zur vollständig gestalteten und farbigen Vorschau der Site führte:
Dies ist die genaue Website, die wir erstellen werden von Grund auf neu! Ziemlich ordentlich.
Um HTML-Code zu schreiben (all diese Geheimsprache, über die wir in der ersten Lektion gesprochen haben), benötigen wir einen Texteditor um es einzugeben.
Es ist am besten, nicht so etwas wie Microsoft Word zu verwenden Code Ein Texteditor wird uns die Arbeit erleichtern. EIN Code-Editor wird verstehen, was wir tippen, und den gesamten Code in die richtigen Farben bringen, während Microsoft Word zum Beispiel zum Erstellen von Schulberichten besser geeignet ist.
Es gibt mehrere gute, kostenlose Code-Editoren, die Sie aus dem Internet herunterladen können. Wenn Sie sich nicht sicher sind, wie Sie etwas herunterladen oder sich nicht sicher sind, sollten Sie immer einen Erwachsenen fragen.
Bluefish eignet sich hervorragend für Computer, auf denen Windows ausgeführt wird, während Atom für einen Mac geeignet ist.
Wir werden im nächsten Kurs auf das eingehen, was dieser Text bedeutet, aber hier ist ein Blick auf das, was Sie mit dem Tippen erwarten können.
Da wir schon ein bisschen darüber gesprochen haben, ist eine Website nur ein Haufen von Dateien. Diese Dateien müssen sich im selben Ordner befinden, damit der Browser sie abrufen kann.
Die Tuts + Town-Website enthält eine HTML-Datei (gespeichert mit einem .html Dateierweiterung am Ende) eine CSS-Datei (gespeichert mit einem .css Dateierweiterung am Ende) und vier Bilder, die in einem Ordner mit dem Namen "images" gespeichert werden. Der Bilderordner befindet sich im selben Hauptordner wie die HTML- und CSS-Dateien.
EIN Dateierweiterung ist die Gruppe von Buchstaben, die nach dem Punkt in einem Dateinamen stehen, und sagt uns, um welche Art von Datei es sich handelt:
Wie bereits erwähnt, werden unsere Bilder in einem Ordner mit dem Namen "images" gespeichert. innerhalb Unser Haupt-Site-Ordner wie folgt:
Im Bild oben haben wir ein Bild namens town.svg (das .svg Erweiterung ist nur eine Art Bild), das wir in einem zusätzlichen Ordner namens "Bilder" abgelegt haben. Dies hilft, die Dinge aufgeräumt zu halten:
Diese beiden Vorgehensweisen sind korrekt, aber wir werden Extras-Ordner verwenden, wie das Bild rechts.
Wir werden unsere Arbeit direkt im sehen Browser, wie die, die Sie jetzt verwenden, um diese Tuts + -Seite anzuzeigen!
Wenn Sie noch keinen Browser haben, wie zum Beispiel Google Chrome und Firefox, stehen Ihnen mehrere Browser zum kostenlosen Download zur Verfügung. Wenn Sie einen Mac-Computer verwenden, ist Safari bereits installiert!
Wir werden unsere Website direkt auf unseren Computern erstellen und nicht das Internet. Wenn Sie sich an unsere erste Lektion erinnern, haben wir erklärt, dass wir keine Website im Internet sehen können, wenn sie nicht auf einem Server liegt.
Das Bild unten zeigt, wie eine fertige Website aussehen würde, wenn sie lokal (nicht im Internet) in einem Browser betrachtet wird. Anstatt eine Webadresse wie www.tutsplus.com zu sehen, sehen wir die Website lokal Adresse, die etwas anders aussieht:
In dieser Lektion haben wir uns einige wichtige Dinge angesehen, die uns dabei helfen werden, den Code für unsere Website zu schreiben. Wir haben uns angesehen, wie man Dateien vorbereitet und einige Werkzeuge wie Texteditor und ein Browser.
In unserer nächsten Lektion werden wir direkt in den Codierungsbereich unserer Website springen! Wir organisieren (ich weiß, so viel organisieren!) Und fügen etwas Code in unsere HTML-Datei ein. Hier beginnt der Spaß!
Wir sehen uns in der Stadt!
Accentsconagua