Grundlagen des Webdesigns für Kreative, visuelle Lerntypen und alle anderen

1. Was geht es in diesem Kurs um: Es wurde gesagt, dass Codierung die neue Alphabetisierung ist. Zwar kann es nicht alle anderen Formen der Alphabetisierung jederzeit ersetzen, es ist eine wunderbare Fähigkeit zu haben. Egal, ob Sie Ihre aktuellen Fähigkeiten aktualisieren möchten, Sie haben eine Idee, die Sie zum Leben erwecken möchten, oder Sie sind nur daran interessiert, darüber zu lernen. Diese Klasse wird Ihnen die Grundlagen geben, die Sie brauchen. Willkommen bei Webdesign für Kreative, visuelle Lernende und alle anderen. Ich bin Marc Nischan, und ich lehre Textobjekte, um Menschen am College for Creative Studies in Detroit zu erschaffen und hier auf Fertigkeiten zu teilen. Als ich mich zum ersten Mal für das Internet interessierte, war es vor über 20 Jahren. Damals war ich Teilzeitkoch und Vollzeit-Rocker und wollte eine Website für meine Band machen. Das Streben nach diesen Fähigkeiten hat sich zu einer Karriere entwickelt und in den letzten 20 Jahren habe ich meinen Lebensunterhalt mit Grafikdesign, dem Aufbau von Websites und dem Design für das Web und Mobile gemacht . Es war nicht immer leicht für mich, die Konzepte zu erfassen. Als visueller Lernender musste ich meine eigenen Wege finden, um diese Information sinnvoll zu machen. Aber es war eine lohnende Karriere. Ich habe die Arbeit genossen. Es hat mir viel Flexibilität gegeben, und ich teile gerne mit anderen, was ich gelernt habe, in der Hoffnung , dass es ihnen helfen kann, einige ihrer Ziele zu erreichen. In dieser Klasse, was wir lernen werden, sind die fünf Elemente einer grundlegenden Webseite. Sie werden verschiedene Tools und Techniken lernen, die Ihnen beim Einstieg helfen und Ihren Code schreiben. Wir werden darüber sprechen, wie Ihr Browser über den Code denkt, den Sie schreiben. Wir werden ein Layout mit Bildern und Links erstellen und darüber sprechen, wie wir Stil hinzufügen können, um das Aussehen zu ändern. Das wird Spaß machen und am Ende haben Sie Ihre eigene Webseite aufgebaut . Lasst uns loslegen. 2. Tools: Hey alle, willkommen zum grundlegenden Webdesign für kreative visuelle Lernende und alle anderen. Ich bin froh, dass du dich entschieden hast, diesen Kurs zu nehmen. Ich werde dir ein bisschen über das Internet erzählen. Wir nutzen das Internet jetzt, aber Sie wissen wahrscheinlich nicht, dass es am Anfang, 1977, Arpanet hieß und es war ein sehr kleines Netzwerk von Computern, das geschaffen wurde, um das Problem zu lösen, wie Daten über große Entfernungen zu teilen. Seitdem hat es sich einiges weiterentwickelt. Es war ursprünglich nur Text und Hyperlinks waren das einzige wirkliche interaktive Element für diese Websites. Es ist in das Internet gewachsen, das wir heute kennen, aber im Wesentlichen ist es immer noch sehr ähnlich. Es werden Daten auf einem Computer irgendwo gespeichert, ein Server , der im Wesentlichen auf gigantischen Festplatte ist, verwendet für die Bereitstellung von Daten. Dann wird es über eine Reihe von Drähten zu Ihrem Computer gestrahlt und von einem Client interpretiert , der Ihr Browser ist. Ihr Browser liest die Daten und auch die Informationen, die notwendig sind, um diese Daten auf einer Seite zu arrangieren. Diese Informationen sind Markup-Sprache und es organisiert Hypertext, und dort erhält sie ihren Namen, Hypertext Markup Language, und das ist HTML. Das ist es, was wir heute arbeiten werden, um unsere grundlegende Webseite zu erstellen. Für diese Klasse benötigen Sie keinen Server. Wenn Sie jedoch einen Domain-Namen und Hosting erhalten möchten, werde ich Ihnen zeigen, wie Sie Ihre Website veröffentlichen. Am Ende dieser Klasse werden Sie ein veröffentlichter Webentwickler sein. Wenn nicht, können Sie weiterhin lokal auf Ihrem Computer arbeiten und Ihr Projekt direkt in Ihrem eigenen Browser durchführen. Wir brauchen keinen Server oder so etwas. Wir werden an Dateien auf Ihrem Computer arbeiten. Dies ist eine lokale Entwicklungsumgebung. Um dies zu tun, werden Sie sich etwas Software, eine IDE, die eine integrierte Entwicklungsumgebung ist. Grundsätzlich ist das nur ein schickes Wort für einen Texteditor. Jetzt in den alten oder alten Tagen, müsste ich meine Webseiten in Word schreiben und sie als Punkt-HTML speichern, sie in einem Browser öffnen und sehen, ob sie so aussahen, wie ich dachte, sie würden aussehen. Heute ist es viel raffinierter. Aber es gibt viele Werkzeuge, die für Sie viel nützlicher sein werden als ein Word-Dokument. Es gibt zwei IDEs, die ich möchte, dass Sie auschecken. Die erste ist Adam.io, die von GitHub produziert wird. Die zweite ist Klammern Punkt IO, produziert von Adobe. Es gibt jede Menge Unterstützung für sie. Viele Drittanbieter-Plug-Ins, die frei sind, dass Menschen Dinge wie Syntax-Hervorhebung in automatischen Rändern und fast alles, was Sie abholen können. Laden Sie eine dieser IDEs herunter. Ich werde Adam für unsere Demos verwenden. Entweder einer wird gut funktionieren. Um loszulegen, müssen wir eine Home-Base finden, wo unser Projekt leben wird. Vielleicht sollten Sie eine Datei auf Ihrem Desktop erstellen, nennen Sie es eine Website, nennen Sie es, was Sie wollen und alle unsere Dateien werden in diesem Ordner leben. Wir beginnen damit, das zu schaffen, was im Wesentlichen das Zentrum des Sonnensystems für Ihre Website ist, die Indexseite. Standardmäßig suchen Browser nach einer Seite namens Index, wenn sie zu einem Ordner kommen. Öffnen Sie Ihre IDE und erstellen Sie index.html und speichern Sie sie in Ihrem Ordner, den Sie für diese Website erstellt haben. Sobald Sie das tun, haben Sie den ersten Schritt gemacht, um unsere Webseite zu erstellen. 3. Anatomie einer Webseite: Wir haben unsere IDE, wir haben unsere Index-Seite. Werfen wir einen Blick auf es in einem Browser und sehen, wie es aussieht, wenn der Browser es rendert. Es sieht nicht nach irgendetwas aus. Da ist nichts. Mal sehen, was passiert, wenn wir ein paar Wörter einfügen und sie alle zusammen laufen. Wir brauchen eine Markup-Sprache, um diese Wörter zu strukturieren. Das Wesen des Webseitenlayouts ist, dass Sie Boxen innerhalb von Boxen, innerhalb von Boxen und HTML-Tag ist nichts anderes als eine Box, um Ihre Wörter, Bilder oder Videos zu halten. Es gibt Dutzende und Dutzende von HTML-Tags, und sie alle haben spezifische Verhaltensweisen, die Ihr Browser versteht. Werfen wir einen Blick auf den Code hinter Wikipedias Homepage. Sie können sehen, dass dieser gesamte Inhalt in verschiedenen HTML-Tags enthalten ist. Einige dieser HTML-Tags sind durch noch mehr HTML-Tags enthalten. Die ursprünglichste Webseite besteht aus fünf dieser Elemente. Der DOCTYPE, das HTML-Tag, das head-Tag, das body-Tag und das title-Tag. Wir werden mit dieser Sammlung von HTML-Elementen beginnen , um uns beim Aufbau unserer grundlegenden Webseite ins Rollen zu bringen. Gehen Sie zu Ihrer IDE und in unserer index.html Seite werden wir das DOCTYPE-Tag schreiben. DOCTYPE ist das Tag, das Ihrem Browser mitteilt , welche Anweisungen beim Rendern Ihrer Webseite verwendet werden sollen. Wir arbeiten in HTML5 und es hat einen sehr einfachen DOCTYPE. Aber lassen Sie mich Ihnen zeigen, wie einer der DOCTYPES für HTML4 aussieht. Als sie HTML5 schrieben, vereinfachten sie die Syntax erheblich und jeder war dadurch viel glücklicher. Der DOCTYPE beginnt immer mit einem Knall. Jetzt können Sie dieses Zeichen als Ausrufezeichen erkennen, aber es wird oft als Knall in der Programmierung bezeichnet, so dass sie das Merkmal sind: Winkel Klammern, der Knall, das Wort DOCTYPE in allen Großbuchstaben und dann HTML. Und das war's. Als nächstes haben wir das HTML-Tag. Das ist die größte Kiste. Alles geht in diese Box und dieser Tag hat einen Öffner und einen näher. Es ist genau das gleiche, außer dem Schrägstrich für das schließende Tag, Ihr Browser wissen lässt, dass dieses Tag vorbei ist und dass die Box vollständig ist. Im Inneren des HTML-Tags befinden sich der Kopf und der Körper. Jetzt denke ich gerne an diese wie unsere Köpfe und unsere Körper. Das head-Tag ist, wo mehr von den Meta-Informationen gehen. Dies sind Informationen, die Sie nicht unbedingt sehen werden, und ich würde es gerne als die Gedanken der Webseite betrachten. Der Kopf und die Karosserie bilden zusammen das komplette Bild. Dann gibt es unser fünftes Primordial-Tag, das Titel-Tag. Im Titel-Tag befinden sich die Wörter, die Sie in der kleinen Registerkarte Ihres Browsers dort erscheinen möchten. Lassen Sie Ihre IDE abgefeuert. Wir werden einige Code in der nächsten Lektion schreiben und einen Blick auf unsere ursprüngliche Webseite werfen. Wir sehen uns dort. 4. Lass uns mit dem Programmieren beginnen!: Das ist es. In dem Moment, auf den ihr alle gewartet habt. Bist du bereit, Code zu schreiben? Öffnen Sie Ihre IDE und ziehen Sie die Indexseite hoch. Jetzt werde ich durch sie gehen, fühlen Sie sich frei, mit mir zu tippen, wenn Sie wollen, aber ich werde eine Gelegenheit verlassen, nachdem ich fertig bin, zu tippen, um es zu pausieren und mit mir einzuholen. Ich werde alle fünf Tags schreiben und ein wenig über sie reden, während ich gehe und wir werden einen Blick auf sie im Browser werfen, wenn wir fertig sind und unsere erste ursprüngliche Web-Seite sehen. Dies wird das Fundament sein, auf dem wir aufbauen, um das fertige Projekt für diese Klasse zu erhalten . Los geht's. Wir werden mit dem Doc-Typ beginnen. Pop-Quiz. Was kommt als Nächstes? Das HTML-Tag, die größte Box. Wir HTML, und wir schließen das Tag, und wir teilen sie, so dass wir Dinge in diesem Feld setzen können. Nun wird dies ein Konzept einführen, dem ich hoffe, Sie folgen werden, Einrückung. Es ist eine großartige Möglichkeit, visuell zu sehen, wo sich Ihre Boxen befinden. Denn nachdem Sie Dutzende und Dutzende von ihnen auf dem Bildschirm haben, kann es wirklich schwierig werden, herauszufinden, wo Sie gerade sind. HTML, wir teilen es, das nächste Tag ist der Kopf. Sie schreiben das dort und bemerken, dass ich es eingerückt habe um anzuzeigen, dass es sich in seinem übergeordneten Container, dem HTML-Tag, befindet. Jetzt wird es ein Geschwister haben, das Körper-Tag. Es ist auch eingerückt. Da gehen wir, und jetzt unser letztes Tag, das Titel-Tag. Der Titel-Tag lebt im Kopf. Wieder einmal, hier ziehe ich das Titel-Tag ein, ich habe den Titel meiner Seite dort hinein, ich schließe es, und drückte O, wir haben eine ursprüngliche Webseite. Wenn ich das jetzt im Browser öffne, werden Sie nichts außer dem Titel sehen , weil es immer noch keinen Inhalt im Körper gibt. Lassen Sie uns die Worte Hallo Welt in den Körper schreiben, nur damit es etwas zu sehen gibt. Dies ist ein typischer erster Durchlauf bei einem Projektschritt. Du tust, was die Hello World genannt wird, nur um zu beweisen, dass du das Ding zum Laufen bringen kannst. Gehen Sie weiter und pausieren Sie das Video jetzt. Wenn Sie noch nicht mitgetippt haben, lassen Sie Ihren Code so aussehen wie mein Code, und wir werden einen Blick darauf werfen. Hier haben Sie Ihre erste Hello World Seite erstellt, willkommen in der Welt der Web-Entwicklung, und wir werden darauf aufbauen, um den Rest unseres Projekts zusammen zu bringen. Herzlichen Glückwunsch. 5. "Der DOM“ “: Okay, bis jetzt sind wir mit einer ziemlich auffälligen Rate umgezogen. Ich werde das Tempo ein wenig aufheben, wenn wir anfangen, an unserem endgültigen Projekt zu arbeiten. Das wird unser abschließendes Projekt sein. Es ist eine ziemlich einfache Webseite. Es hat ein paar Links und ein paar Bilder. Denk daran, dass ich dir gesagt habe, dass das Erstellen einer Webseite darum geht, Kisten in Kisten zu stecken. Ihr einzigartiger codierter Satz von Boxen ist ein Modell, von dem, was Sie im Browser sehen werden, wenn Sie einen Blick auf Ihre Webseite werfen. Das Modell hat einen Namen. Im Browser handelt es sich um das Dokumentobjektmodell. Denken Sie nun daran, dass es auf das DOM gekürzt ist. Es wird wahrscheinlich ein wenig später kommen. Was wir jetzt tun werden, ist das Modell für unser Projekt zu bauen. Öffne deinen Texteditor und tippe mit mir zusammen. Wenn Sie das Video pausieren und aufholen müssen, legen wir hier die Grundstruktur für unser Projekt fest. Los geht's. Ich habe ein paar Projektdateien angehängt. Direkt unter dem Video sehen Sie vier Registerkarten. Gehen Sie zu Ihrem Projekt und klicken Sie auf FinalProject.txt. Nimm das erste Stück Prosa, das du dort siehst, kopiere es und dann fügen wir es in unsere Textdatei ein. Lassen Sie uns unsere Hallo Welt überschreiben und beginnen, dieses Layout anzupassen. Wir können dies den Whitman-Sampler nennen und das sind im Grunde zwei Gedichte von Walt Whitman, die wir als nur einige Inhalte verwenden, um unsere Webseite herum zu bauen. Fangen wir an, hier ein paar Kisten zu bauen. Wir haben den Körper als zweitgrößte Box in diesem HTML und wir werden das weiter unterteilen, bis wir unseren Inhalt dort bekommen, wo wir es wollen. Beginnen wir mit einem div-Tag. Das ist ein neues Etikett, vielleicht für dich, ich weiß es nicht. Es ist in diesem Tutorial. Ein div ist nur eine andere Box. All diese verschiedenen Tag-Namen sind nur andere Felder, aber einige von ihnen haben spezifische Verhaltensweisen, die wir nutzen können. Das div ist nur eine große große Box und dann werden wir einen Absatz-Tag um unseren Text setzen . Alles ist sauber eingerückt. Hier können Sie den Fluss der Boxen sehen. Wenn wir in eine neue Box gehen, gehen wir in unsere Einrückung und wie wir aus der Box gehen, wenn wir ausgehen. Es hilft Ihnen, zu sehen, wo Sie gerade sind, während Sie codieren. Sie können irgendwie darüber nachdenken, wie das aussehen könnte , wenn Sie es tatsächlich im Browser betrachten. Lasst uns hier ein H1-Tag um unseren Titel wickeln. Das ist nur Header eins und Ihr Browser weiß, was dieses H1-Tag bedeutet. Es bedeutet, dass es eine bestimmte Schriftgröße hat, es hat einen bestimmten Rand um ihn herum und es verhält sich auf eine bestimmte Weise. Insbesondere wird eine Kopfzeile versuchen, den Raum über das Feld zu füllen, in dem es sich befindet, während ein Absatz versucht, in das Feld zu wickeln, in dem er sich befindet. Mal sehen, was wir bisher haben. Wir aktualisieren das, schauen Sie sich das an. Wir haben ein H1 und ein paar Texte. Okay, es ist immer noch ziemlich hässlich, also lasst uns noch ein paar Sachen hier reinlegen. Lassen Sie uns auch einen Platzhalter für unsere Links einfügen. Ich setze hier eine Pfeife, das ist das vertikale Symbol. Es ist ganz oben auf der rechten Seite Ihrer Tastatur oberhalb des umgekehrten Schrägstrichs. Werfen Sie einen kurzen Blick auf das. Sie können sehen, wie sich unsere Boxen übereinander stapeln, lassen Sie uns das ändern, um zu bekommen, was wir wollen. 6. Grundlegende Stile und CSS: Wir halten es für selbstverständlich, dass, wenn wir eine Webseite erleben, sie sehr visuell ansprechend sein wird. Nun, es gab einen Zeitpunkt, an dem es nicht einmal Bilder im Internet gab. Unsere Webseite sieht gerade so aus. Es ist nur einfacher Text, also lassen Sie uns ein Bild hinzufügen, um ihm ein visuelles Interesse zu geben, und dann beginnen wir , Stile einzulegen, um unser Design vollständig auszuarbeiten. Hier sind wir. Ich habe die beiden Bilder heruntergeladen, die an die Klasse angehängt sind. Man nennt man Pioniere, man nennt sich Walden. Sie werden die Bilder für unsere beiden Seiten sein. Lasst uns anfangen, indem wir diese reinlegen. Bilder haben ihren eigenen speziellen Tag, es ist das Bild-Tag, I-M-G. Es gibt eine kleine Gruppe von Tags, die so sind. Sie haben kein Öffnen und Schließen ihrer selbstschließenden Tags. Sie schließen sich selbst mit einem Schrägstrich und einer Klammer. Das Bild-Tag hat ein paar Attribute, die uns helfen werden. Das Wichtigste für uns wird Quelle sein. Wir werden ihm sagen, wo dieses Bild gefunden wird. Wir sagen, Quelle gleich, es muss in Anführungszeichen sein und wir werden pioneers.jpeg dort einfügen. Lass es uns speichern und einen Blick werfen. Da ist unser Foto. Es gibt andere Dinge, die Sie hier einfügen können, wie Titel des Bildes oder Alt-Text, der von einem Bildschirmlesegerät gelesen werden kann. Ich werde ein paar Alt-Texte hier lassen und pixels.com für das Geben mir dieses kostenlose Foto zu verwenden. Pixels ist eine Website, die alle Arten von großen kostenlosen Stock Fotografie hat. Sie werden feststellen, dass dieser Text nirgendwo auf unserer Webseite erscheint. Jetzt auf größeren Websites, die viele und viele Bilder haben, ist es ziemlich üblich, Bilder in ihrem eigenen Ordner zu haben. Jetzt ist das Bild weg und Sie sehen diesen gebrochenen Link und der Alt-Text wird als Alternative zum fehlenden Foto angezeigt. Wir müssen vorsichtig sein mit den Informationen, die wir hier in unserer Quelle geben. Wenn ich Bilder/Pioniere tippe, kann es jetzt das Foto wieder finden. Diese Dateipfade werden wichtig, wenn wir in komplexere Lektionen kommen , und ich habe eine zweite und dritte Klasse danach, wo wir in fortgeschrittenere Themen zu bekommen. Diese grundlegende Dateistruktur ist etwas, auf das man achten muss. Ich versuche, alles in einer Datei für diese erste Klasse zu behalten , nur um es einfach zu halten. Wir gehen mit; kein spezielles Foto. Lasst uns das hier rausziehen. Reparieren Sie meinen Link und wir sind wieder im Geschäft. Das nächste, was wir tun werden, ist, einige wirklich einfache Elemente hinzuzufügen , die horizontale Regeln genannt werden. Sie sind nur eine Linie, die den ganzen Weg über die Seite geht. Sie sind auch selbstschließende Tags. hr, lassen Sie uns das kopieren und eine weitere unten hier unten legen. Lassen Sie uns noch einen machen, damit es dem Design entspricht. Ein weiteres selbstschließendes Tag, das Sie verwenden können, ist das Break-Tag, also br mit einem Schrägstrich und einer Winkelhalterung. Schauen wir uns das an, erfrischen wir uns und wir haben unsere zwei Zeilen da unten und es gibt eine Pause unter dem Wort Walt Whitman. Es ist eine zusätzliche Rückgabe, die die gleiche Höhe wie eine Textzeile hat. Einige andere einfache sind Dinge wie das starke Tag. Wenn wir dies nehmen und betrachten, schafft es fett Gesichttyp. Früher gab es ein fett Tag, es war nur ein B, aber es wurde veraltet zugunsten eines beschreibenden Tags und der Grund ist, dass Bildschirmlesegeräte und Braille-Lesegeräte und solche Dinge verwenden. Das Konzept der fett existiert nicht in der Sprache, aber der Kontext der Betonung, siehe zum Beispiel, existiert, daher verwenden wir kursiv für die Betonung im Text. Werfen wir einen Blick dort. Sehen wir, wir bekommen ein paar Kursivzeichen. Aber für ein Bildschirmlesegerät könnte es das mit etwas lauter Stimme oder einer emphatischeren Stimme lesen. Dies sind einige der grundlegenden Stile, die uns zur Verfügung stehen. Jetzt werden wir ein bisschen raffinierter. Wir werden anfangen, Code innerhalb dieser Tags zu schreiben. Wir werden diesen Boxen Attribute geben, es wird sich auf die Art und Weise auswirken, wie sie aussehen. Eines der Dinge, die gerade an dieser Seite wirklich langweilig ist, ist, wie alles links ausgerichtet ist. Legen wir es in eine Box, die eine Breite hat, die kleiner als unser Bildschirm ist und die zentriert ist. Wenn Sie Stile inline schreiben. Dies sind Inline-Stile, da sie sich innerhalb dieser Tags befinden. Es gibt anspruchsvollere Möglichkeiten, dies zu tun, auf die wir im nächsten Kurs eingehen werden, aber im Moment ist dies eine schnelle und einfache Möglichkeit, sich mit Stilen vertraut zu machen. Wir beginnen mit dem Style-Attribut, Stil gleich und setzen es in Anführungszeichen und sagen wir, dass die Breite 800 Pixel betragen wird. Px ist die Abkürzung für Pixel und werfen Sie einen Blick auf diese. Hier ist ein Doppelpunkt, kein Gleicher, sondern ein Doppelpunkt. Dies wird als Schlüssel-Wert-Paar bezeichnet. Dies ist der Schlüssel und das ist der Wert und das ist ein sehr häufiges Muster in der Codierung für das Web. Sie werden es in Programmiersprachen und allen möglichen Dingen sehen. Zentrieren wir es jetzt, da es eine bestimmte feste Breite ist, wir haben einen Rand Tag oder Rand Stil, den wir verwenden können. Wenn wir Marge auto sagen, wird der Browser das lesen und es wird die gleiche Menge an Marge auf beiden Seiten dieser Box setzen . Das wird es zentrieren. Werfen wir einen Blick. Es sieht schon besser aus. Wie wär's damit? Wenn Sie Stile verwenden, gibt es einen kaskadierenden Effekt, der dazu führt, dass der Name Cascading Stylesheets führt. Es sagt im Grunde, dass der letzte Stil, den es liest, der Stil ist, den er verwenden wird. Werfen wir einen Blick auf einen Stil, den wir auf den Körper anwenden können: Stil = „Farbe“ und ich werde ein Grau verwenden, 33333. Sehen Sie, ich beende die Stile mit dem Semikolon, das ist wirklich wichtig. Der Browser weiß nicht, wo er enden soll , wenn keiner von denen in der Stildeklaration angezeigt wird. Dieser Farbschlüssel bezieht sich auf die Schriftfarbe. Ich habe es nur ein bisschen heller grau nicht so schwarz gemacht. Hier, lasst uns etwas wirklich Dramatisches machen. Geben wir Rot ein und sehen, was wir bekommen, alles ist rot. Nun, um auf diese Weise zu demonstrieren, dass Stile kaskadieren werde ich zu unserem h1 gehen und sagen Stil = „Farbe: blau“. Beachten Sie, dass, obwohl die gesamte Webseite rot war, als sie auf einen Stil stieß, der tiefer in den Boxen war, der anders war, sie sich von dieser unterscheidet, also haben wir dort blau. Haben wir noch mehr verschachtelte Kisten? Nein, das tun wir nicht. Aber wir könnten gehen und das für jeden dieser Tags tun. Ich werde das loswerden, weil wir das jetzt nicht benutzen. Lassen Sie uns ein paar Dinge wirklich schnell aufräumen und dann werden wir auf den nächsten Abschnitt gehen, der benutzerdefinierte Typ sein wird. Lassen Sie uns unsere kleinen Kisten hier fertig machen. Ich werde dieses Break-Tag kopieren und einen am Ende jeder Zeile dieses Gedichts setzen und was das tun wird, ist es aus diesem Wickelverhalten zu schnappen, das wir gesehen haben. Da waren los, stapelt es auf, schön und ordentlich. Ich werde diesen roten Text loswerden , da wir gehen. Jetzt haben wir unsere Boxen in einer Reihe, sie sind gestapelt. Sie können den Dom hier sehen. Unsere Boxen stapeln sich übereinander. Wir haben unsere Grundform zusammen. Lassen Sie uns weitergehen, einige dieser Art zu stylen und weg von diesen Standardtypstilen. 7. Benutzerdefinierte Schrift hinzufügen: Eines der größten Auswirkungen Dinge, die Sie für Ihre Webseite tun können, ist, gute Art Auge haben. Es gibt Standardschriftarten, die mit Macs und Windows geliefert werden, und wir können einige davon verwenden. Wir können auch Schriftarten von Drittanbietern verwenden. Ich werde Sie durch die Unterschiede führen. Es gibt zwei grundlegende Arten von Schriftarten. Das ist eine grobe Untertreibung, aber für den Zweck dieser Klasse sprechen wir über Serif und Sans Serif oder Serif und Sans Serif, je nachdem,wo du herkommst oder Serif und Sans Serif, je nachdem, . Ein Serif ist dieser kleine Fuß, diese kleinen klebrigen Audi Dinge auf einer Schrift. Sie sollen helfen, Ihr Auge über die Buchstaben zu lenken. Also das ist mal, das ist die Standardschriftart, aber ich könnte auch etwas anderes spezifizieren, wie Font-Familie, serif, und da gehe ich. Ich glaube, das ist Arial, ich denke, das ist der Standard. Es gibt ein paar Standardwerte für eine Serif und Sans Serif. Ich kann etwas tun, wie Cross-Browser-Schriften nutzen, die auf Macs und PCs gerendert werden. Los geht's. Hier ist die Liste. Es gibt 1, 2, 3, 4, 5, 6, die Sie auf beiden Plattformen verwenden können. Versuchen wir es mit Comic Sans. Weil ich zwei Wörter zusammenhabe, muss ich sie in Anführungszeichen setzen. Andernfalls wird der Browser nur das erste Wort lesen und stoppen. Der gesamte Name der Schriftart wird nicht erkannt. Wenn Sie Anführungszeichen verschachteln, müssen Sie eine Kombination aus doppelten Anführungszeichen und einfachen Anführungszeichen verwenden, und da ich bereits doppelte Anführungszeichen verwendet habe, werde ich hier einfache Anführungszeichen verwenden und Comic Sans MS einfügen und ein Komma, und ich verlasse diese Sans Serif Schriftartdeklaration. Was das ist, ist Ihr Font-Stack, und es geht von Ihrer am meisten gewünschten Schriftart bis zu Ihrer am wenigsten gewünschten oder Standardschriftart. Der Grund ist, dass Sie nicht wirklich 100 Prozent Sicherheit haben , dass sich die Schriftart, die Sie spezifizieren, auf dem Computer eines Benutzers befindet. Systemschriftarten kommen nicht mit Ihrer Website zusammen. Sie referenzieren eine Schriftart, die sich auf einem lokalen Computer befindet. Auf Ihrem Computer wird es gut aussehen, Sie könnten angeben. Mann, ich weiß es nicht. Mal sehen. Ich weiß nicht, ob ich Hummer hier habe. Aber ich kann eine Schriftart angeben, die ich mag, eine ausgefallene Schriftart, Gotham, und sie würde auf meinem Computer rendern. Aber wenn die Person, die die Webseite herunterlädt, nicht auch Gotham installiert hat, wird es einfach auf den Text zurückgesetzt, den Sie als nächstes angegeben haben . Oder wenn Sie nichts angegeben haben, wird es nur Times New Roman rendern, die Webseite bisher aussieht. Hier habe ich Comic Sans MS, und ich sage, wenn das nicht verfügbar ist, verwenden Sie einen Sans Serif-Typ. Mal sehen, was wir bekommen. Oh, Junge, da ist es. Comic Sans. Ich denke, das hat die zweifelhafte Unterscheidung, die am meisten gehasste Schrift im Internet zu sein. Mal sehen, warum du Comic Sans hasst, entworfen für Hacker. Ich lasse dich über Comic Sans auf deiner eigenen Zeit vorlesen. Was hier wichtig ist, ist, dass Sie den Schriftstapel verstehen, weil wir eine Google-Schriftart verwenden, um hier wirklich einen schönen Typ zu setzen, und wir werden einen Schriftstapel angeben, weil diese Schriftart aus Googles CDN kommen wird oder Content-Distributionsnetzwerk. Wenn Sie aus irgendeinem Grund die Netzwerkkonnektivität verlieren oder, ich weiß nicht, die Schriftart nicht mehr unterstützt wird, haben Sie einen Font-Stack, der Sie unterstützt. Ich werde Helvetica spezifizieren und dann eine [unhörbare]. Da gehen wir, Helvetica, ein bisschen schöner als Arial, meiner Meinung nach. Werfen wir nun einen Blick auf Googles kostenlose Schriftarten. Es gibt viele kostenlose Schriftart-Sites da draußen. Google macht es so einfach, benutzerdefinierte Schriftarten einzubetten. google.com/fonts. Sie haben Hunderte und Hunderte von Schriftarten. Sie können nach Serif, Sans Serif, Display, Handschrift sortieren . Wir suchen nach einer Schriftart, die ich bereits ausgewählt habe, namens Josefin Slab. Da ist es. Ich habe diesen „Plus“ -Button gedrückt, dieser kleine Dialog erscheint, und von diesem Dialog kann ich Anweisungen zum Einbetten dieser Schriftart erhalten. Es ist super einfach. Ich kopiere diesen Link in den Kopf, und wir haben jetzt nichts anderes da oben, also fangen wir an, das zu füllen. Dies ist ein klassisches Beispiel für diesen Gedanken Teil der Website, dass Kopf-Body Verteilung oder Split, was auch immer Sie es nennen wollen. Dies ist etwas, das Sie nicht wirklich sehen, aber es sagt Ihrem Browser, dies herunterzuladen. Es wird keinen Link auf Ihrer Webseite geben, auf dem steht, Josefin Slab oder was auch immer. Die andere Sache, die Sie jetzt tun müssen, ist es in Ihre Deklarationen hinzuzufügen. Ich werde Josefin Slab, Helvetica und dann San Serif setzen. Werfen wir einen Blick darauf. Da gehen wir. So einfach. Jetzt haben wir noch ein bisschen Arbeit zu erledigen. Es ist klein. Gehen wir rein und wählen es ein. Ich werde diese Erklärung zu unserem Hauptdiv hier verschieben. Ich habe meine Breite, ich habe Marge Auto, lass uns die Schriftfamilie da reinlegen. Ich brauche das Wort style gleich nicht, weil ich bereits in einem Style-Tag bin. Befreien Sie sich von diesen zusätzlichen Zitaten, da. Für den Körper werde ich eine Farbe spezifizieren, ein wenig helleres Grau. Jetzt werde ich unsere Standardschriftgröße für die gesamte Seite, 18 Pixel, festlegen. Da gehen wir, ein bisschen größer, es ist ein bisschen einfacher zu lesen, und lasst uns hier etwas mehr machen. Lassen Sie uns ein wenig Wert auf den Titel unserer Seite legen. Im Moment habe ich gerade diese beiden Platzhalter für unsere Links, die im nächsten Abschnitt erscheinen. Ich werde Ihnen das Span-Tag vorstellen. Span-Tag ist ähnlich wie ein Absatz-Tag. Es ist gemacht, um Text zu halten. Ich füge dieses Feld hinzu, damit wir gezielt auf den Text abzielen können, der sich darin befindet. Lass uns ein Style-Tag machen. Ich werde sagen, die Schriftgröße ist 27 Pixel, und ich habe einen kleinen Titel. Sieht so aus, als müsste ich ihm etwas Platz geben. Lasst uns hier einen Platz setzen, vielleicht sogar einen Strich, wie wär's damit? Da gehen wir. Dort können Sie sehen, wie einfach es ist, ein wirklich schönes Layout mit Googles kostenlosen Fonts zu erstellen. Gehen wir nun zum nächsten Abschnitt. Wir werden diese Seiten verlinken, von denen wir noch nicht erstellt haben, und wir werden unser Projekt abgeschlossen haben. 8. Links hinzufügen: Nun, du hast es bis zum Ende geschafft. Wir haben noch eine Sache zu tun, bevor unser Projekt abgeschlossen ist. Bisher haben Sie den ganzen Code geschrieben, der notwendig ist, um eine grundlegende Webseite zu erstellen. Jetzt werden wir ein paar Links hinzufügen und sie verbinden, also haben wir eine zweiseitige Website. Links können auf unterschiedliche Weise funktionieren, je nachdem, wie Sie sie benötigen. Werfen wir einen Blick auf die grundlegende Anatomie einer Verbindung. Sie benutzten das Anker-Tag, das nur ein a ist und sie geschlossen werden müssen. Sie brauchen auch eine href. Die href ist im Grunde die Adresse des Ortes, den Sie wollen, dass sie gehen. Sie können zu Links gehen, die sich auf derselben Webseite befinden. Sie können zu Dateien wechseln, die sich auch auf derselben Website befinden, oder sie können Links zu anderen Websites herstellen. Sagen Sie, wenn Sie die URL für Google dort einfügen und wir die Seite aktualisieren. Da gehen wir, es geht an Google aus. Wir können auch etwas tun, wie wenn wir eine sehr lange Seite hätten, lassen Sie mich diesen Absatz einige Male duplizieren und wir werden so tun, als wäre dies eine lange Textseite. Wir können einem dieser Dinge einen Ausweis geben. Nennen wir es Kapitel eins und ändern unsere href in Kapitel eins mit einem Hash davor und es wird auf der Seite zu Kapitel eins verlinken. Die Art und Weise, wie wir es verwenden, besteht darin, auf eine andere Webseite zu verlinken. Beginnen wir mit der Erstellung dieser Seite. Sie können mit der rechten Maustaste klicken und ein Duplikat erstellen und es Walden nennen. Jetzt müssen wir den gesamten Code ändern, der vom ersten Gedicht zum zweiten Gedicht ist. Ich werde diese Textdatei öffnen, in der die Profis drin sind, kopieren Sie sie aus und ersetzen Sie dann einfach den ganzen Text damit. Durch die Magie des Videos, das nur eine Sekunde dauerte. Lasst uns einen Link schreiben, der auf unsere Walden-Seite geht. Eine Sache, vergessen Sie nicht die Änderung des Fotos. Lässt sich das Foto wirklich schnell ändern. Wir sind auf Walden, also lasst uns diesen Link zurück zu unserer Indexseite machen. Dann gehen wir zu unserer Indexseite und machen es Link zu Walden. Ich werde diesen Link auf den Index verweisen. Es wird nur zu sich selbst verlinken. Nichts wird wirklich passieren, wenn Sie darauf klicken. Dies wird zu unserer walden.html Seite gehen. Wenn wir uns erfrischen, sollten wir zwei Links haben, die uns hin und her gehen lassen. Jetzt haben wir nie einen Link für diesen geschrieben, also wird er nicht auftauchen. Gehen wir zurück und fügen Sie das wirklich schnell hinzu. Nun, Sie können sehen, dass es angeschlossen ist und es wechselt zwischen den beiden Seiten. Ich füge diesen Link hauptsächlich nur für visuelle Konsistenz hinzu. - Das ist besser. Wir haben das Springen jetzt nicht zugrunde. Da gehst du. Sie haben sich eine funktionierende zweiseitige Website. Wenn Sie Hosting und Domain-Namen gekauft haben, zeige ich Ihnen, wie Sie es aufstellen und veröffentlichen es im Internet und natürlich können Sie dies nehmen und tun, was Sie wollen. Sie können eine andere Google-Schriftart ersetzen, ein anderes Bild. Sie können mehr Texte setzen, weniger Text. Sie können zusätzliche Seiten hinzufügen. Ich werde ein paar weitere Klassen auf Fertigkeiten teilen, die ich werde uns zeigen, wie man erweiterte Seitenlayout zu tun und eine vollwertige Website zu erstellen. Etwas, das ein bisschen mehr wie das ist, was du gewohnt bist, im Web zu interagieren. Aber für den Moment bringt Sie damit an den Start. Herzlichen Glückwunsch, Sie sind ein grundlegender Webentwickler. 9. Veröffentlichung und Wrapup: Okay, mal sehen, ob wir das für Sie im Internet kriegen können. Es gibt viele Domain-Provider und Hosting-Provider. Ich benutze DreamHost seit langer Zeit, wahrscheinlich 15 Jahre. Sie waren wirklich zuverlässig. Es gibt Tonnen von anderen, aber das ist derjenige, den ich in dieser Demo durchmachen werde. Es ist wirklich ziemlich einfach. Alles, was Sie tun, ist, Ihre Dateien zu nehmen und sie in einen anderen Ordner im Internet und die Domains darauf hingewiesen, und wir tippen in einen Browser, boom, es erscheint. Ich werde dich durch das führen. Außerdem möchte ich, dass ihr mir ein paar Kommentare hinterlässt und mich über die Klasse wissen lässt, wenn ihr etwas fehlte, wenn es euch alles beigebracht hat, was ihr wissen wolltet, ob ihr an konstruktive Kritik denkt. Ich bin immer offen für das zu hören, weil ich diese Klassen zu den nützlichsten Tools für Sie machen möchte , die sie sein können. In Ordnung. Werfen wir einen Blick hier, um Ihre Website live zu bekommen. Noch einmal, herzlichen Glückwunsch. Ich hoffe, in einigen zukünftigen Klassen zu sehen, werde ich einen über CSS-Layout und dann einen über Responsive Design unterrichten. Also sehe ich dich dort. Vielen Dank und haben einen guten. In Ordnung. Wir sind bereit, das im Internet aufzustellen. Es gibt eine Reihe von kostenlosen FTP-Clients. FTP ist File Transfer Protocol, und das ist die Verbindung, mit der Sie Ihre Dateien auf Ihrem Server ablegen können. Ein Kunde, den ich mag, ist FileZilla, es ist kostenlos. Der andere ist Cyberduck. Sie können nach beiden suchen und sie herunterladen, öffnen und sie sehen in etwa so aus. Hier ist Cyberduck, es hat einen sehr sauberen Mac OS-Typ Look und Sie im Grunde, Sie ziehen Dinge aus Ihrem Finder-Fenster hinein. Die andere ist FileZilla, die viel mehr eine hierarchische Ansicht ist. Welches auch immer passt die Rechnung besten Blick. Ich werde Cyberducks benutzen. Es ist so leicht zu sehen. Ich habe einen Testordner hier am Ende einer Domain, die ich verwalte, nur um Ihnen dies zu zeigen. Alles, was wir tun müssen, ist die Dateien für unsere Website zu greifen, ziehen Sie sie über die Datei, die wir verwenden möchten. Wenn Sie das noch nie gemacht haben, kann es ein bisschen verwirrend sein und Sie können es beim ersten Mal nicht richtig machen. Es gibt normalerweise eine öffentliche HTTP-Datei, oder vielleicht ist es nur Ihr Domain-Name. Aber es wird eine Reihe von Dateien da oben sein, je nachdem, welchen Dienst Sie verwenden. Wenn Sie DreamHost verwenden, handelt es sich um Ihren Domainnamen, dann würden Sie marcnischan.com sehen. Sie können das öffnen und die Dateien dort ablegen, gehen Sie zu marcnischan.com und es kommt direkt nach oben. Hier gehen wir, ziehen die Dateien dort rüber, legen sie ab und wir sollten in der Lage sein, jetzt in einen Browser zu gehen und sie sofort zu sehen. Da sind sie. Das ist jetzt live im Internet. Das war so einfach. Jedes Mal, wenn Sie lokal Änderungen vornehmen, überschreiben Sie einfach die Dateien auf dem Server und aktualisieren Sie sie. Das war's. So veröffentlichen Sie eine Website. Das letzte, was Sie tun müssen, um den Kurs abzuschließen, ist ein Bild als Screenshot Ihrer fertigen Website hochzuladen, oder vielleicht sogar eine URL zu posten, wenn Sie sich entschieden haben, es zu hosten.