So erstellst du eine Website mit HTML und CSS | Robin Haney | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

So erstellst du eine Website mit HTML und CSS

teacher avatar Robin Haney, Web Developer and Online Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

35 Einheiten (2 Std. 12 Min.)
    • 1. Einführung in unser Projekt

      1:24
    • 2. Gestalte deine erste Webseite

      2:07
    • 3. Arbeiten mit Coding

      1:39
    • 4. Was ist HTML?

      1:25
    • 5. Erstellen eines Wireframe für unser Projekt

      1:53
    • 6. Erstellen der Struktur einer Website

      3:33
    • 7. HTML

      2:58
    • 8. Erstellen unserer Websites

      4:35
    • 9. Aufbau unserer Portfolio-Seite

      2:36
    • 10. Hinzufügen von Bildern auf unserer Portfolio-Seite

      2:29
    • 11. So entwickelst du unser Footer

      4:42
    • 12. Einleitung für CSS

      6:36
    • 13. Externe und interne CSS

      4:28
    • 14. Was sind ID-Selektoren, die sich interessieren

      2:52
    • 15. Zentrieren unseres Websits

      4:36
    • 16. Lass uns einen mobilen Ansatz für einen mobilen Ansatz nutzen

      2:54
    • 17. Gestalten unserer Website mit etwas Farbe

      3:52
    • 18. Was sind CSS Kurse in CSS

      3:38
    • 19. Wie du deinen CSS Kommentare hinzufügen kannst

      1:59
    • 20. Hinzufügen von Schriftarten auf unserer Website und Anpassung von Textgröße

      8:22
    • 21. Stylen unserer Portfolio-Seite

      4:52
    • 22. Erstellen einer horizontalen Navigation

      1:39
    • 23. Beheben unseres Fußzeile und Navigation

      4:52
    • 24. Erstellen einer About Page

      5:22
    • 25. Gestalten unserer U-Seite

      3:44
    • 26. Erstellen einer Kontaktseite

      6:17
    • 27. Erstellen einer Blogseite

      9:02
    • 28. Erstellen unserer Portfolio-Seite

      2:07
    • 29. Füge deiner Portfolio-Seite ein Raster hinzu

      4:31
    • 30. Abschließende Anpassungen auf unserer Seite

      5:01
    • 31. Abschließende Anpassungen an unseren Kopf- und Fußzeilenbereich

      2:38
    • 32. Verfeinern unserer Portfolio-Seite

      1:03
    • 33. Finde einen Domain-Namen

      3:04
    • 34. Finde einen Web-Host für deinen Domain-Namen

      1:31
    • 35. Verbinde deinen Domain-Namen mit deinem Hosting

      7:14
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

171

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Wenn du schon immer lernen wolltest, wie du code zu programmieren und zu erstellen hast und genau das zu haben, was du brauchst. Du lernst deine erste Website mit nur HTML und CSS von ganz ganz neu zu erstellen. Du wirst deine Website dann online hochladen und kannst deine Arbeit für alle in der Welt präsentieren können.

Dieser Kurs ist perfekt für Anfänger:innen und alle, die ganz nichts über HTML und CSS oder im Bereich der Webentwicklung im Allgemeinen wissen. Dieser Kurs ist auch eine tolle Überprüfung und die Auffrischung für diejenigen, die sich dabei helfen, alles zusammenzubauen, um eine Website von Anfang bis Ende zu gestalten.

In diesem Kurs geben wir dir, dass ein Kunde dich eingestellt, um ein Online-Portfolio für ihr Haarstyling aufzubauen. Du hast als a hast dich als Webentwickler, und hast eine Aufgabe zu tun. Du musst eine Website erstellen, die für mobile responsive ist und toll aussieht. Keine Sorge, ich weiß, dass du eine gute Arbeit machen wirst.

Lass uns beginnen.

Triff deine:n Kursleiter:in

Teacher Profile Image

Robin Haney

Web Developer and Online Instructor

Kursleiter:in

Hello,

My name is Robin Haney and I am an instructor here at Skillshare. I primarily teach web developing and programming tutorials. 

You can check out my blog here - www.robinhaney.com 

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung in unser Projekt: Hi, mein Name ist Rob. Dieser Kurs ist perfekt. Wenn Sie noch nie eine einzige Codezeile geschrieben haben oder wenn Sie eine Aktualisierung benötigen, wie Sieeine Website erstellen, die Sie waren, beginnen Sie die Dinge, indem Sie grundlegende HTML lernen, um eine Website erstellen, die Sie waren, die Struktur einer Webseite zu erstellen. In diesem Kurs werden wir so tun, als hätten wir eine Website für einen Kunden erstellt. Sobald Sie HTML down pat haben, werden wir zu den Grundlagen von CSS sowie Zwischenstufe CSS Styling für eine Website zu bewegen . Dies wird das fertige Produkt unserer Website sein. Dies ist unsere Lining-Seite für einen Webseiten-Film Billy und eine Gürtelseite für einen Kunden. Eine Kontaktseite der Blawg-Seite in einem Portfolio, das als Raster fungiert, das zeigt, dass unsere Kunden arbeiten. Unsere Website wird auch mobil, reaktionsschnell sein und anpassen, je nachdem, auf welchem Gerät unsere Website angesehen wird. Wir können sehen, sie alle Seiten auf der Website oder mobile, reaktionsschnell und gut aussehen und mobile und Tablet-Geräte. Wir werden all das von Grund auf neu bauen. Sie wird in diesem Kurs viel lernen. Dies ist großartig für jedermann braucht, dass extra wenig Hilfe, um einfach alles zusammen zu setzen , um eine Website online zu bekommen. Wenn Sie schon einmal wissen wollten, welche Entwicklung in diesem Kurs perfekt für Sie ist, bitte intern heute und ich freue mich darauf, Sie innerhalb des Kurses zu sehen. 2. Gestalte deine erste Webseite: - Hallo. Willkommen zurück auf dem Kurs. Ich hoffe, Sie sind aufgeregt, wenn ich anfangen werde, eine Website mit mir zu entwerfen. Nun, bevor wir mit dem Aufbau unserer Website beginnen können, lassen Sie uns beginnen mit einigen grundlegenden HTML. In dieser Lektion erstellen Sie Ihre allererste Webseite. Vergessen wir das allererste, was Sie tun müssen, ist, einen Ordner auf Ihrem Desktop zu erstellen , damit Sie alle Dateien, die wir während dieses Kurses verwenden, und einen organisierten Speicherort auf Ihrem Computer behalten können . Als nächstes öffnen wir eine neue No-Pad-Datei, und Sie können es geben, welchen Namen Sie bevorzugen. Nachdem wir unser Dokument geöffnet haben, schreiben wir unsere erste Zeile HTML-Code. Ich werde erstellen, was ein Überschriftenelement genannt wird. Als eine Art des Codes werden Sie sehen, dass zuerst ich das erstelle, was es heißt Öffnen nehmen und dann verwenden wir den Ford Slash, um den Abschluss zu deklarieren. Nimm alles, was wir eintippen. Zwischen dem Öffnen und Schließen wird eine Level-1-Schlagzeile sein, die im Grunde wirklich großer Text auf einer Webseite ist. Ich werde hier Ascendance eingeben, um jetzt zu beginnen Lassen Sie uns die Datei speichern und ihr den Dateinamen geben . HTML. Dies sagt unserem Computer an, diese Datei als HTML-Seite zu öffnen. Also gehen wir zum Kara File Index. Aber stellen Sie sicher, dass die dot html Erweiterung verwendet. Wie ich bereits erwähnt habe. Dies sagt unserem Computer, diese Datei als HTML-Seite zu öffnen. Nachdem wir genossen haben, welche Seite wir sehen können, wird hier eine neue Kopie davon erstellt. Lass es uns öffnen und sehen, wie es aussieht. Cool. Wir können den Text, den wir zuvor geschrieben haben, als H ein Element auf unserem Web Pitch sehen. Herzlichen Glückwunsch. Sie haben gerade Ihre erste Webseite erstellt. Ich weiß, es ist nicht viel, aber wir müssen alle irgendwo anfangen, richtig. Probieren Sie dies aus und sehen Sie, ob Sie selbst eine Webseite auf Ihrem Computer erstellen können. Wenn du bereit bist, weiterzumachen, triff mich hier zurück und wir können mit der nächsten Lektion beginnen. 3. Arbeiten mit Coding: Sie haben wahrscheinlich schon bemerkt, dass die Codierung in keinem Pad ein wenig wund für die Augen sein kann. Zum Glück für uns, sie codieren Bearbeitungsprogramme, die es uns ermöglichen, zu programmieren oder Websites viel einfacher. Das Beispiel, dass ich seinen Code No Pad plus diesen Beschichtungs-Editor verwenden werde, ist es kostenlos. Sie können es von ihrer Website herunterladen, wie ich bin dabei, Ihnen hier zu zeigen. Sobald Sie kein Pad Plus Plus in Ihrem Computer installiert haben, können wir beginnen, unsere Webseiten zu bearbeiten, indem Sie mit der rechten Maustaste darauf klicken, indem Sie Bearbeiten ohne Pad plus Plus auswählen, Sieht das nicht ein bisschen einfacher zu lesen aus? Lassen Sie uns noch ein paar Schlagzeilenelemente schreiben, nur um ein wenig mehr Code zu unserer Webseite hinzuzufügen . Lassen Sie uns H zwei Element hinzufügen und in H drei Element als auch ist, dass Sie bereits erraten haben . H zwei ist kleiner als in H eins, und H drei ist kleiner als in H zwei. Sie beim Ausschreiben Ihrer Elemente darauf, dass Sie auch eine Öffnung und eine Schließung hinzufügen. Lassen Sie uns voran gehen und genießen Sie Webseite und sehen, wie dies aussieht visuell in unserem Web-Browser, wie wir sehen können oder jeder ist der größte. Innere H drei hat einen Rauchtext auf der Seite. Es gibt kostenpflichtige Optionen, um Editoren zu zitieren, die Sie später betrachten können, aber vorerst wird das Codieren ohne Haustier plus plus für uns gut funktionieren. 4. Was ist HTML?: bevor wir im Kurs noch weiter gehen, nehmen wir uns ein paar Minuten Zeit, um mehr darüber zu sprechen, was HTML ist. HTML ist ein anfänglicher ismus, der im Grunde für Hypertext-Markup-Sprache steht. Mach dir jedoch keine Sorgen darüber, was das bedeutet . Hypertext bezieht sich auf jede Steuer, die auf einem Bildschirm angezeigt werden kann, und ein Hyperlink ist ein Link, der im Grunde Links zu Dokumenten oder Webseiten zusammen. Jedes Team, das Ellis primär verwendet wird, um die Struktur einer Webseite zu erstellen, die eine Website-Struktur erstellt, ist eine Menge wie das Schreiben einer Zeitung. Sie haben Ihre Titel, Absätze, Fotos und Schlagzeilen. Wir verwenden HTML, um die grundlegende Struktur und in all diesen Momenten zu unseren was Seiten zu erstellen. CSS ist eine andere Sprache, die später lernen wird. Damit können Sie die visuelle Darstellung Ihrer Website ändern . Dies kann ein wenig schwierig sein, um am Anfang zu transplantieren, aber nachdem Sie mehr mit CSS arbeiten, werden Sie HD-Mail viel besser verstehen. Letzt ist es erwähnenswert, dass HTML sich weiterentwickelt hat, um die Websites, die wir heute haben, zu entwerfen und zu erstellen . Und HD Mo gibt es schon sehr lange, ich habe in der Länge voran gegangen, toe ein paar Dokumente über die Geschichte der hte E-Mail und die Notizen des Lehrers Abschnitt dieses Kurses, den Sie überprüfen können, wenn Sie daran interessiert sind, mehr über HTML zu lernen. Alles klar, lass uns weitermachen. 5. Erstellen eines Wireframe für unser Projekt: Nun, bevor wir mit dem Design und Bauen auf unserer Website weiter gehen können, müssen wir tatsächlich einen Draht Ruhm für ein Projekt bauen. Jetzt habe ich die endgültige Version einer Website hier, so dass Sie nichts planen müssen. Alles ist irgendwie schon für uns in unseren Schlüsseln getan. Aber in der Regel müssten Sie auf den Inhalt auf Ihrer Website zu planen. Das ist also im Grunde die Homepage, die ich habe, und ich habe diese Website vor der Zeit erstellt, nur damit er genau wusste, was wir bauen. Dies sind also die verschiedenen einzelnen Seiten auf einer Website. Wir haben unsere über Seite. Wir haben eine blockierte Seite. Wir haben unseren Block Post Titel und eine Sidebar hier mit dem Autor Bild, einige Site-Seiten, wir haben eine Kontaktseite wird nur ein grundlegendes Bild mit einigen Informationen über unsere Kunden in der E-Mail uns Link und wir haben unser Portfolio, das wäre ein Gitterformat wie dieses. Und wir haben unsere Fußzeile unten und natürlich unsere Kopfzeile. Jetzt ist diese eine Platte nicht super kompliziert, aber wird definitiv etwas sein, das für Sie herausfordernd sein wird, wenn dies Ihre erste Website ist oder wenn Sie neu in hte E-Mail oder sogar CSS sind. Eine Sache, die ich auch darauf hinweisen werde, ist, wenn Sie einen Drahtrahmen erstellen oder die Struktur Ihrer Website erstellen. Es ist auch gut, mobile, responsive Versionen Ihrer Website als auch zu erstellen . Und wenn ich mein Fenster hier festige, können Sie tatsächlich sehen, dass sich eine Website ändert. Und das liegt daran, dass sich ein Browserfenster ändert, genau wie auf einem mobilen Gerät, das wir hier sehen können. Dies ist die mobile Version unserer Website, und es sieht viel anders aus als wenn ein Fenster-Browser ausgestreckt wird, die die Desktop-Version Concealer ist. Verschiedene Seiten sind alle unterschiedlich formatiert Wenn Sie also Ihren Drahtrahmen erstellen, möchten Sie zuerst eine mobile Version machen, und dann können Sie diese mehr Bio-Version auf die Desktop-Version erweitern, wie es genau hier ist jetzt. Also in unseren Schlüsseln ist die ganze harte Arbeit bereits für uns erledigt. Wir wissen genau, was wir bauen müssen. Jetzt, da wir wissen, was zu tun ist, lassen Sie uns an die Arbeit gehen, unser Portfolio für unseren Kunden aufzubauen 6. Erstellen der Struktur einer Website: jetzt, da wir eine visuelle Vorstellung davon haben, wie eine Website aussehen soll. Lassen Sie uns voran und beginnen Sie mit dem Aufbau der Struktur und HTML, bevor wir beginnen. Es ist erwähnenswert, dass sich die hte E-Mail im Moment sehr verändert. In den letzten Jahren wurden neue Elemente hinzugefügt, und derzeit hat jedes Team 05 eine Menge an den Tisch gebracht. Während wir unsere Webseite aufbauen, würden wir die neuesten Elemente unterstützen. Es ist, dass Ihre Website modern und aktuell ist, da das vorbei ist, lassen Sie uns auf unserer Website wieder codieren. Das allererste, was Sie Ihrer Website hinzufügen müssen, ist ein Dokumenttyp oder Dokumenttyp. Kurz gesagt. Wir kleben es wie folgt aus. Dieser Dokumenttyp muss oben auf Ihrer Webseite eingefügt werden, bevor irgendetwas anderes angezeigt wird. All dies wirklich tut, ist im Grunde sagen Sie dem Browser, dass diese Seite ein HTML-Dokument ist. Als nächstes erstellen wir ein weiteres HTML-Element namens Well, html. Diese Einnahme wird alle unsere hte E-Mail enthalten, die wir auf unserer Seite haben, also müssen wir unser vorhandenes H ein Element nehmen und es in das HTML-Element einwickeln. Beachten Sie, wie es ein wenig Absicht für jedes Element gibt. Dies wird Nestena genannt, und es wird verwendet, um uns zu helfen, zu sagen, welche Elemente ineinander verschachtelt sind. Sie werden beginnen zu sehen, wie nützlich dies ist, wenn wir anfangen, mehr Code auf unserer Webseite hinzuzufügen. Als nächstes werde ich ein sogenanntes Kopf-Element zu unserer Webseite hinzufügen. Unser Kopf wird Elemente enthalten, die Struktur zu unserer Webseite hinzufügen, aber in der Regel nicht auf der Webseite selbst sichtbar sind . Dies wird auch Mehta Information genannt. Nach voraus nehmen, Ich werde hinzufügen, einen Körper nehmen eine Schwung der Körper nehmen wird die überwiegende Mehrheit über Website-Inhalte enthalten . Ich werde auch unsere jeden noch einmal in unserem Körperelement sowie unser HTML-Element verschachtelt greifen . In Ordnung, jetzt lassen Sie uns einen Titel für eine Website erstellen. Unser Titel ist Informationen gemacht, so geht es in das Kopf-Element. Wir können das title-Element verwenden, um den Namen unserer Website zu deklarieren. Ich gehe voran und tippe nur einen zufälligen Namen hier nur für den Moment ein. Unsere Website-Titel wurden oben in Ihrem Browser oder Tab angezeigt, die Sie geöffnet haben. Das letzte, was wir in dieser Lektion tun werden, ist, den Zeichensatz für unsere Webseite hinzuzufügen. Wir fügen diese Erkenntnis auch ein. Unser Hauptschwein Hier ist der Code, den wir brauchen werden. Du brauchst dich dieses Viertel nicht wirklich auswendig zu lernen. Irgendwas. Aber was dieser Code tut, ist Hilfe für Web-Browser-Prozess Informant R h scheint eine Webseite. Nein, lassen Sie uns unsere Webseite speichern und sehen, wie sie aussieht. Sie können auch Steuerelement C auf Windows drücken, um das Dokument schnell zu sehen. Wie wir sehen können, wird unser Website-Titel an der Spitze angezeigt, und das ist so ziemlich alle sichtbaren Änderungen, die wir bisher gemacht haben. In der nächsten Lektion werden wir mehr Struktur auf unserer Webseite mit Content-Containern sein. 7. HTML: Ich werde anfangen, indem ich in unseren Körper gehe und ein Header-Element hinzufüge. Der Header ist der oberste Teil unserer Website, also werde ich auch unsere jeder setzen, die wir erstellt haben ihre früher als auch. Darunter befinden sich Header Take. Ich werde einen Abschnitt nehmen und einen Fuß hinzufügen oder nehmen Sie auch danach. Also lassen Sie uns über diese drei neuen Takes gehen, die ich gerade hinzugefügt habe oder welche Seite? Der Header-Tag ist anders als unser Kopf Nehmen. Viele Leute bringen Thies zum Geschmack. Verwirren Sie unsere Sehenswürdigkeiten Titel und Navigation wird in der Regel hier gehalten. Innerhalb der Kopfzeile nehmen Sie auch. Der Abschnitt kann verwendet werden, um die Seite in verschiedene Abschnitte in unseren Abschnitten aufzuteilen. Nehmen wir an, ich werde ein neues Element hinzufügen, das ein Absatzelement genannt wird. Dieser Absatzmoment nimmt jeden Text, den Sie eingeben, in Sicht und verwandelt ihn in einen Absatz. Ich werde hier nur einige zufällige Kontrollen vornehmen, die wir später in ein Portfolio ändern und Beiträge später blockieren können . Aber ich möchte Ihnen nur ein Beispiel dafür geben, wie das Absatzelement mit HTML funktioniert. Das Fußzeilenelement ähnelt dem Header-Element, mit der Ausnahme, dass es sich am unteren Rand ihrer Webseite befindet. Wir werden unsere Copyright-Informationen sowie andere Links zu unseren Social-Media-Plattformen in die Fußzeile für unseren Kunden setzen . Lassen Sie uns einen Absatz in der Fußzeile hinzufügen, nehmen Sie auch, dass wir unsere Websites enthalten. Copyright-Informationen. Möglicherweise stellen Sie fest, dass einige Zeichen, die Sie auf einer Website anzeigen möchten, nicht auf der Tastatur eingegeben werden können . Wir können HTML-Entitäten verwenden, um diese Zeichen darzustellen. Beispielsweise kann das Copyright-Symbol auf einer Website angezeigt werden, indem Sie die folgende HTML-Entität . Auswendiglernen von HTM Oh Entitäten wird nicht empfohlen, da er sie sehr oft benutzte. Wann immer Sie eine der HTML-Entitäten herausfinden müssen, können Sie immer auf Google suchen, um eine Referenz zu finden. Ich ging auch voran und verlinkte auch mit einem Referenzblatt. Im externen Dateiabschnitt dieses Kurses, wenn Sie jemals darauf verweisen müssen, haben wir eine Menge neuen Code in HTML-Elementen auf unserer Website hinzugefügt. Lassen Sie uns ihre Seiten speichern und sehen, wie es im Browser aussieht. Bisher, beachten Sie, dass, wenn wir auf unserer Webseite schauen. Die Elemente werden nacheinander angezeigt. Auf diese Weise zeigen Browser HTML-Elemente an. Nun, was Seite sieht ein wenig leer, Aber keine Sorge. Du bist auf dem Weg zu einem guten Start. Wir werden CSS später im Kurs verwenden, um unseren Webseiten viel mehr Stil und Farbe hinzuzufügen . 8. Erstellen unserer Websites: im letzten Abschnitt des Kurses. Wir haben die Grundstruktur unserer Website mit HTML erstellt. Jetzt ist es an der Zeit, Inhalte zu unserer Website hinzuzufügen. Beginnen wir mit der Gestaltung der Navigation für unsere Website A Website-Navigation. Wir bestehen in der Regel aus einem Titel oder Logo, das auf die Homepage verlinkt, und Links zu den anderen wichtigen Webseiten auf der Website. Lassen Sie uns also beginnen, indem Sie unseren Website-Titel Link zurück auf die Homepage unserer Website. Ich werde hier ein neues Element hinzufügen, das als Ankerelement bezeichnet wird. Ich werde dann meine jeder in Sicht neu erstellte Ankerelement in einem Attribut hier mit dem Textindexpunkt dot html einschließen . Was wir hier tun, ist die Verankerung unserer L a K Index html auf den Text ihres H ein Element Index dot html ist in der Regel eine Homepage einer Website und auch der Name dieser Datei . Wenn wir die anderen Seiten für eine Website erstellen, werden wir ihre Namen auch als Attribute einfügen. Für jetzt bleiben Sie einfach bei mir und Sie werden sehen, wie es besser funktioniert, während wir unsere Website entwickeln, die Navigation für eine Website wird häufig mit einer Liste erstellt. Das erste, was wir tun werden, ist in einem neuen Moment für unsere Navigation in unserem Header . Was ich jetzt tun werde, ist an unseren Links als Nordeste. Dadurch werden unsere Links in einer Aufzählungsform hinzugefügt, ähnlich wie in Microsoft Word. Die Sie hier nehmen steht für eine nicht geordnete Liste. Wir werden dann unsere anderen Seiten als Listenelemente hinzufügen. Insider in der Liste der Reihenfolge. Das L ich nehme steht für Listenelement. zuerst Beginnen wirzuerstmit unserer Info Seite und machen dann eine Liste Zeit für alle anderen Seiten, die wir später für unsere Website erstellen werden. Ich werde anfangen, ein Ankerelement mit ihrem H ref zu setzen und es schaut auf unsere über Punkt-HTML-Seite, die wir noch nicht erstellt haben. Wir müssen auch Text hinzufügen, der als Listenelement angezeigt wird. Also werde ich hier eintippen. Sobald dies abgeschlossen ist, müssen wir diesen Code hier kopieren, und wir werden ihn einfach für andere Seiten einfügen und dann einige kleine Änderungen vornehmen, um diese Seiten zu widerspiegeln . Es ist also Kopieren Sie das und fügen Sie es ein paar Mal hier ein. Also lasst uns dies auf unsere Block-Seite ändern. Wir werden dies auch auf unserer Kontaktseite ändern, und wir müssen eine weitere hinzufügen, und das wird für die Portfolio-Seite sein, nachdem Sie den Text geändert haben, der für jedes Listenelement angezeigt wird , müssen wir den HTML-Code ändern -Seiten. Wir haben diese Seiten noch nicht erstellt, aber ich werde sie einfach hier hinzufügen, weil wir diese Seiten später benennen werden, wennwir sie jetzt erstellen, bevor wir weiter gehen, lasst uns Wir haben diese Seiten noch nicht erstellt, aber ich werde sie einfach hier hinzufügen, weil wir diese Seiten später benennen werden, wenn wir sie jetzt erstellen, bevor wir weiter gehen, geben ihr, was Pfirsich eine schnelle sichere und sehen, wie alles im Web-Browser aussieht. Alles klar, cool. Unser Seitentitel verweist nun auf unsere Indexpunkt-HTML-Startseite. Wir haben unsere Liste noch mit dem Namen jeder unserer Website-Seiten. Natürlich, wenn wir auf sie klicken, sie funktionieren jetzt nicht, weil wir nicht hinzugefügt oder Seiten. Aber sobald wir eingegeben haben, welche Seiten auf unserer Website, wird alles korrekt funktionieren. Bevor wir gehen. Allerdings habe ich bemerkt, dass meine Homepage Link nicht funktioniert, und das liegt daran, dass wir auf jedem Team Ail indiziert zu induzieren hier. Aber leider, oben an der Spitze hier, haben wir tatsächlich unsere Index dot html dot gealterte E-Mail. Also haben wir unseren Namen hier falsch. Also werde ich das reparieren, und dann sollten unsere Links korrekt funktionieren. In Ordnung, also sollte eine Fünf-Vergangenheit korrekt sein. Nun, jetzt öffnet es sich, und ja, ja, wir können sehen, dass es jetzt tatsächlich nur auf dieselbe Seite zurückgeht, also sieht es nicht so aus, als würde etwas passieren, aber wir gehen eigentlich einfach zurück zur Seite oder zur aktuellen Anzeige. Also wieder, ähm, unser Titel ist richtig verknüpft, und wir haben das alles herausgefunden. Guter Job. Wir haben einige solide Arbeit mit unserer Website-Navigation geleistet, und wir sind bereit, weiterzumachen und mit der Arbeit an unserer Portfolio-Seite zu beginnen. 9. Aufbau unserer Portfolio-Seite: Wir haben unsere Navigation vorerst fertig gebaut, aber es ist an der Zeit, den Inhalt für unsere Portfolio-Seite auszubauen. Wir werden unsere Bildergalerie ähnlich wie unsere Navigation mit einer A Nordeste strukturieren. Wir werden unser Portfolio im Abschnitt Element unserer Seite erstellen für gesperrte Seite in über Paige und Kontaktseite. Wir werden dieses Abschnittelement für etwas anderes verwenden. Lassen Sie uns also voran gehen und löschen Sie den Absatz, den wir zuvor erstellt haben, an Ort und Stelle mit einer UN-Orderliste mit einem einzigen Listenelement. Für den Moment, bevor wir weiter gehen, ist es wichtig, dass Sie die Akten für diese Kursvorlesung runter. Dort finden Sie die Bilddateien für unsere Portfolioseite. Wenn Sie nicht das Bild Ordner in demselben Ordner wie Ihr jeden Tag HTML-Dokument platzieren, die Bilder nicht korrekt angezeigt wurden, habe ich vorangegangen und einige Beispiele gefunden. Ich meine, nur online, die wir verwenden können, als wären es Bilder, die unser Kunde uns gab. Also lassen Sie uns unser erstes Bild auf unserer Webseite hinzufügen. Ich werde hier unseren ersten Listeneintrag öffnen und ein Bild schreiben Take. Ich werde dann ein Quellattribut zu diesem Take hinzufügen, und innerhalb dieser Attribute werde ich den Pfad zu unserem ersten Bild setzen, das wir auf der Seite anzeigen möchten. Ich füge den Image-Ordner und den Namen und die Erweiterung der Bilddatei ein. Wir greifen das alles muss korrekt sein. Andernfalls wird unser Bild oder nicht richtig geladen. Ich werde auch voran gehen und eine All-Take am Ende ihres Bildes hinzufügen, die für alternativen Text steht . Wenn aus irgendeinem Grund das Bildaus irgendeinem Grundnicht angezeigt wird, wird der gesamte Text an seiner Stelle angezeigt. Ich werde den alten Text nur für den Moment leer lassen. Dies macht im Moment vielleicht nicht viel Sinn, aber wenn Sie mit Bildern arbeiten, werden Sie besser darin, sie zu Ihren Webseiten hinzuzufügen und mit der Syntax zu arbeiten. Nun, bevor wir fertig sind, speichern wir eine Datei und sehen, wie sie aussieht. Mal sehen, ob ihr Bild korrekt auf einer Webseite angezeigt wird. Da sind Bilder auf unserer Webseite. Es ist jetzt an der Zeit, wieder in Anzeigen oder anderen Bildern in unser Portfolio zu gehen, und dann später können wir diese Bilder tatsächlich reparieren, weil dies im Moment viel zu groß ist um auf unserer Webseite zu passen 10. Hinzufügen von Bildern auf unserer Portfolio-Seite: in diesem Video werden wir das Hinzufügen der restlichen Bilder zu unserem Portfolio beenden und einige der Informationen auf unserer Website geändert , weil wir die Größe ihrer Bilder später ändern werden , um viel kleiner zu sein, um auf den Bildschirm zu passen. Wir möchten, dass unsere Besucher in der Lage sein, auf das Bild zu klicken und die volle Größe zu sehen, wenn sie sich entscheiden . Wir können dies tun, indem wir einen Anker verstecken, unser Bild weglassen und direkt mit diesem Bild verknüpfen. Wenn der Benutzer also irgendwo auf das Bild von der Webseite klickt, kann er die volle Größe des Bildes sehen, wenn er sich dafür entscheidet. Also fangen wir an, indem wir unser Ankeromen hier verstecken. Und ich werde den Dateipfad zu unserem Bild kopieren und das als Link verwenden. Also wieder, wenn die Person darauf klickt, wird es einfach direkt zum Bild gehen. Und ich werde den Morgen kurz nach unserem Listengegenstand hier schließen. Das ist also der Standardcode, den wir für jedes Bild hier haben werden. Also, jetzt, da unser Bild vollständig ist und alles, was wir tun müssen, ist unser Listenelement hier zu kopieren und es für alle anderen Bilder zu wiederholen, die wir auf unserer Über Seite hinzufügen werden. Also lassen Sie uns in dem Tempo voran gehen, das hier drin ist. Denken Sie daran, die Dateipfade entsprechend dem Bild zu ändern , das Sie anzeigen möchten. Ansonsten wurde Ihnen das falsche Bild angezeigt. Ich meine, das ist wirklich einfach hier und verstecken Nummer die Bilder Bild. Ein Bild, zu dem drei. Bild vier und Bild fünf. Es ist also viel einfacher zu tun. Denken Sie daran, sowohl die Dateipfade für die Quelle zu ändern, wenn Benutzer darauf klicken, als auch die angezeigten Bilder. Sobald wir mit uns fertig sind, können wir unsere Seite speichern und überprüfen, ob unsere Bilder korrekt angezeigt werden. Also gehen wir voran und machen das jetzt. Ich werde auch unsere Dateipfade überprüfen, nur um sicherzustellen, dass ich sie richtig bekommen habe. Es sieht so aus, als ob es gut sein sollte. Also, ja, wir können sehen, dass unsere Bilder hier korrekt angezeigt werden. Auch, wenn wir auf eine Bildhinweis klicken, die direkt zu diesem Bild und einem neu geöffneten Fenster genommen wurden , tolle Arbeit. Nächstes Mal werden wir lernen, wie man die Fußzeile unserer Website 11. So entwickelst du unser Footer: In Ordnung, also haben wir unsere Websites hinzugefügt. Navigation hat unser Portfolio ins Rollen gebracht. Jetzt ist es an der Zeit, mit unserer Fußzeile an der Fußzeile zu arbeiten. Wir werden ein paar Links zu unseren sozialen Plattformen online hinzufügen. Unter der Annahme, dass unser Kunde sie hier hat, werden wir ein Twitter, Facebook und Google hinzufügen . Außerdem werden wir auch ein paar andere Dinge zu unserer Fußzeile hinzufügen, während wir gehen. Aber für jetzt, lasst uns damit beginnen. Achten Sie darauf, ihm die Dateien für diesen Vortrag zu sagen, damit Sie die Social Media Symbole verwenden können ich zur Verfügung gestellt habe. Fühlen Sie sich frei, Ihre eigenen zu verwenden, wenn Sie möchten, nur für ein bisschen Übung als auch. Beginnen wir mit der Schulung bis zu ihrer Fußzeile und geben Sie das Bildelement ein, um unser erstes Symbol hinzuzufügen . Unsere Quelldatei für dieses Bild wird der Name der Twitter-Symboldatei sein. Vergiss nicht auch die Erweiterung. In unserem Fall bei diesen Symbolen um PNG-Dateien für den alternativen Text. Ich gehe auch in den Typ Twitter als auch. Sobald das abgeschlossen ist, werde ich etwas Zeit sparen, indem ich diese ganze Codezeile kopiere und sie dann zu anderen Zeiten für unsere beiden anderen Social-Media-Symbole einfüge . Dies ist eine ziemlich einfache Lösung und alles, was wir tun müssen, ist den Dateipfad sowie den alternativen Text zu ändern, um das Symbol zu reflektieren, das wir zeigen. Also ging ich weiter hier und wir werden mit der 2. 1 Löschen Sie den Twitter-Teil hier und wir werden Facebook hinzufügen. Und dann werden wir auch den alternativen Text ändern, um Facebook zu reflektieren. Und unser letztes wird Google Plus sein und ich glaube, ich habe Google plus so getippt. In Ordnung, also sind unsere Bilder auf die Anzeige eingestellt und das Letzte, was wir tun müssen, ist Linker-Symbole zu ihren entsprechenden Websites, weil ihr Client nicht wirklich existiert. Ich werde stattdessen nur auf die Homepage der Website verlinken. Also lassen Sie uns unsere Ankerelement vor unserem Bild erstellen und schließen Sie es, nachdem unser Bild ein echter Wert sind , wird auf die Websites hausgemachte Homepage verlinken, die wir verlinken. Das Twitter-Symbol wird also auf die Twitter Dot com-Startseite verlinken, und das Facebook-Symbol wird auf die Facebook-Startseite verlinken. Und natürlich wird das Google Plus-Symbol auf die Google Plus-Startseite verlinken. Sobald wir alle hier fertig sind, können wir unsere Webseite speichern und sehen, wie sie aus irgendeinem Grund aussieht oder Symbole oder nicht angezeigt wird. Also muss es einen Fehler in unserem Code Summer geben. Gehen wir zurück zu unserer Akte und sehen, ob wir die Luft erkennen können. Oh, ich kann sehen, wo es ist. Wir haben vergessen, den Abschluss-Take nach unserem Link zu unserem Domain-Namen hinzuzufügen, zu dem wir verlinkt haben. Also können wir das hier schließen und ihm einen Safe geben, und das sollte das Problem beheben. Da gehen wir hin. Wir können jetzt sehen, dass unsere Bilder korrekt angezeigt werden und funktionieren. Gönnen Sie sich einen Klaps auf den Rücken. Sie fangen jetzt an, irgendwo mit der Gestaltung Ihrer Website zu kommen. Wir können diese Bilder auch einen Klick geben und sehen, ob sie auf die richtige Website verlinken. Siehst du, wie die Twitter funktionieren? unser Facebook-Symbol funktioniert, und unser Google Plus auch Rex. Wenn Sie im nächsten Abschnitt des Kurses darauf klicken können, werden Sie beginnen, alles über CSS zu lernen. Ich freue mich darauf, Sie dort zu sehen 12. Einleitung für CSS: für jetzt, schauen wir uns den allerersten Weg an, wie wir CSS zu unserer Webseite hinzufügen könnten. Wir können dies mit dem Stil Schwein tun. Wir müssen den Stil in unser Hauptelement nehmen. Dies ist, wo all unsere CSS gehen muss. Lassen Sie uns unsere erste CSS-Regel erstellen. Ich werde es austippen und dann werden wir es nachträglich überprüfen. Ok? Kannst du ein wenig raten, was das tun könnte? Zunächst haben wir unseren CSS-Selektor, der das Header-Element von HTML auswählt. Ein Dokument, das Sie dann unserem Browser mitteilen, dass alle Texte, die in der Kopfzeile gefunden werden , blau mit dieser Farbeigenschaft direkt hier zu ändern . Lassen Sie uns ihre Akte empfangen und sehen, was passiert. Okay, wir können hier sehen, dass wir keinen Text auf ihrer Seite in ihrer Kopfzeile haben. Wir haben einige Links, aber Links oder Stil anders als Text. Also werde ich hier tun müssen, ist zurück in unseren Header in unserem HTML gekommen. Und ich werde ein kleines Absatzelement hinzufügen, nur um unserer Seite innerhalb des Header-Elements etwas Text hinzuzufügen . Aktualisieren Sie die Seite. Da gehen wir hin. Wir können sehen, dass wir ihrem Kopf ein Römer schreiben, und es wird automatisch als blau gestylt. Ziemlich ordentlich. Jetzt erinnern Sie sich, was ich zuvor über die kaskadierende Natur von CSS erwähnt habe? Also, wenn ich in unser CSS zurückging und genau die gleiche CSS-Regel hinzugefügt habe wie die, die wir derzeit haben. Aber sagen wir, ich habe den Text in Grün geändert. Was glaubst du, wird mit einem Text passieren? Bin blau oder grün? Probieren wir es aus und sehen, was passiert. Wie wir sehen können, die Texas tatsächlich grün, weil die letzte Regel wird immer überschreiben alle vorherigen Regeln innerhalb der exakt gleichen Selektoren. Dies dauert eine Weile, um sich daran zu gewöhnen, aber wir werden es später zu unserem Vorteil nutzen. Während wir unsere Website aufbauen, bevor wir weitermachen, gibt es ein paar Dinge über unser CSS rel, die ich darauf hinweisen möchte. Das erste Wort hier ist unser Selektor. Es zielt auf das Element, das wir hier stylen wollen. Dann haben wir unsere geschweiften Klammern, die unseren tatsächlichen CSS-Code enthalten. Schließlich am Ende jeder CSS-Anweisung ein Semikolon, hatten wir am Ende jeder CSS-Anweisung ein Semikolon,da er mehr mit CSS arbeitete. Syntax wird in kürzester Zeit zur zweiten Natur werden, bevor wir mit dieser Lektion fertig sind. Lassen Sie uns ein paar weitere Regeln in CSS versuchen, damit Sie einige neue Möglichkeiten lernen können, um Ihre Webseiten zu stylen, Das ist, was Lassen Sie uns einfach einige gute altmodische Praxis bekommen. Lassen Sie uns eine andere CSS-Eigenschaft erstellen. Dieses Mal werde ich die Schriftart meines H ein Element ändern. Also beginnen wir mit der Deklaration der einzelnen Selektor, und ich werde eine neue CSS-Eigenschaft namens Schriftgröße eingeben. Die Schriftgröße Eigenschaft ändert die Schriftgröße Ihres Selektors, den Sie in diesem Fall auswählen , oder jede Schriftgröße wird geändert. Also wieder, hier haben wir unseren Selektor, der ihr H ein Element ist. Dann haben wir unsere CSS-Eigenschaft Schriftgröße. Dann haben wir unsere tatsächliche Größe des Telefons in Pixeln. Je größer wir diese Zahl machen, desto größer wird unser Text auf einer Webseite angezeigt. In unserem Fall wird unser Texas wirklich groß erscheinen. Lassen Sie uns die Datei speichern und sehen, was passiert, wie wir jetzt sehen können, unser Text hat an Größe zugenommen. Denken Sie daran, dass, da wir auf unsere einzelnen Elemente ausgerichtet sind, wenn Sie zurück in unserem HTML und Ziel gehen oder ein anderes jedes Element erstellen würden. Dieses Element hätte auch einen sehr großen Text. Unser Code hier zielt auf alle CSS h one Elemente unter Seite und wurde sie entsprechend gestylt. Also lasst uns auf einen Code gehen. Und ich werde hier einfach in Ruhe kopieren oder programmieren, um dir ein Beispiel zu zeigen. Wenn wir ein anderes Alter ein Element auf ihrer Seite erstellen, werde ich es hier speichern, dann gehen Sie zurück in der Vorschau sind, welche Seite wir sehen können, dass das neue H ein Element genau das gleiche Styling gibt . auch daran, Sieauch daran,dass wir mit unseren Selektoren auch etwas präziser sein können, zum Beispiel, wie ein Typ Petr H, der statt alle auf unserer Seite abzielt und sie mit unserem Code formatiert, Es wird diese Zifferblätter nur auf H ein Elemente anwenden, die innerhalb des Header-Elements ihrer Seite gefunden werden . Also werde ich hier zurück in meinen Code gehen, wer auch immer jeder von früher, und tatsächlich verschieben Sie es außerhalb der Kopfzeile, so dass wir das Ende ihrer Kopfzeile hier finden. Fügen wir unseren Code ein und nicht zuletzt müssen wir tatsächlich unsere Regel erstellen, die unseren Header jeden anvisiert. Also lassen Sie uns hier in eine dieser Regeln gehen und das ist nur geben Sie Header vor jedem einzelnen ein. Es ist jetzt, was wir sagen, ist, wollen wir Onley die einzelnen anvisieren, die in ihrem Header gefunden werden. Wenn wir die Seite aktualisieren, können wir sehen, dass unser erster jeder hier oben sehr groß ist, aber unser zweiter jeder ist nicht unser Styling. Dies ist die Macht von CSS. Aber warte, es gibt noch heiß mehr, was wir tun können, vor allem mit CSS. Wenn du das Gefühl hast, dass du bereit bist, lass uns mit dem Kurs fortfahren und ich sehe dich in der nächsten Vorlesung. 13. Externe und interne CSS: Also lasst uns unser Styling greifen, das wir früher erstellt haben, und schneiden es. Und was ich jetzt tun werde, ist einen neuen Ordner namens CSS zu erstellen, Erstellen Sie eine neue Word-Datei und geben Sie ihm den Namen CSS sowie den Erweiterungspunkt CSS. Wir können diesen alten Ordner löschen, da wir ihn nicht mehr brauchen. Und lassen Sie uns unsere neue CSS Datei einfügen sind alte Mantel innen und speichern Sie es Für jetzt, Ich bemerkte, dass, als ich öffnete meine CSS-Datei, dass wir diese beiden Registerkarten erscheinen, dass kein Pad uns beide Dateien wirklich leicht bearbeiten lässt. Also füge ich meine CSS-Codierung hier ein, und ich werde es schnell sicher geben. Der letzte Schritt besteht darin, unsere neu erstellte CSS-Datei mit unserem HTML-Dokument zu verknüpfen. Lassen Sie uns ihr HTML-Dokument öffnen und innerhalb des head-Tags, werde ich den folgenden Mantel ausschreiben. Was wir hier tun, ist die Verknüpfung unserer CSS-Datei mit unserem HTML-Dokument. Stellen Sie sicher, dass Sie den richtigen Dateipfadnamen erhalten, sonst funktioniert er nicht. Was wir hier tun, ist, dass wir ein relatives Stylesheet verknüpfen und in den acht Atemzügen haben wir unseren CSS-Ordner sind CSS-Dateiname und dann unsere Punkt-CSS-Erweiterung. Nehmen wir an, beide Dateien und öffnen Sie eine Webseite und einen Browser, um zu sehen, ob das großartig funktioniert. Wir können sehen, dass unsere CSS-Stile immer noch auf unserer Webseite angewendet werden. Dies bedeutet, dass unser externes CSS-Stylesheet korrekt funktioniert. Jetzt lasst uns das CSS vorerst loswerden, da wir es nicht mehr brauchen. auch Wenn wir unsere neue Datei speichern, können wirauchsehen, dass unsere CSS-Stile nicht mehr auf unsere Webseite angewendet werden. Bevor ich diese Lektion fertig mache,werde ich eine Verknüpfung zu einer anderen CSS-Datei namens normalisiertes Punkt-CSS herstellen. Bevor ich diese Lektion fertig mache, Um das zu bekommen fiel, gehen Sie online gehen und folgen Sie einfach hier. Während ich diese CSS-Datei packte, gehe ich zu Google. Ich werde Punkt-CSS normalisieren oder einfach normalisieren. Das erste Ergebnis hier ist das, das Sie wollen, und Sie werden nur wollen, um die neueste Version hier herunterladen , so können wir einfach klicken, herunterladen und als nächstes können wir den ganzen Text hier kopieren. Es wird es hier eine schnelle Kopie geben und dann müssen wir tatsächlich eine neue Datei erstellen, ihm den Namen normalisiert dot CSS geben und dann einfügen ich Code, den wir gerade in dieser Datei kopiert haben normalisieren dot CSS ist eine grundlegende CSS-Formatierung, die von einigen wirklich intelligenten -Entwicklern online, die hilft, einige Elemente konsistent über alle Web-Rosen zu rendern. So wird Ihre Website auf verschiedenen Systemen besser aussehen und sagen Sie uns, ich empfehle Ihnen, es in all Ihre Projekte nur für den Fall zu werfen , weil es einen wirklich großen Unterschied macht. Ordnung, InOrdnung, also geben wir dem einen schnellen Safe und ich denke, normalisiert sich ziemlich gut zu gehen. Sie müssen den Code nicht bearbeiten, fügen Sie ihn einfach dort ein, und jetzt müssen wir ihn von unserem HTML-Fella Sheet verlinken. Wir können einfach die Kälte kopieren, die wir zuvor erstellt haben, weil es ziemlich dasselbe ist. Das einzige, was wir ändern müssen, ist der Dateipfad, der das normalisierte CSS sein würde, weil wir normalisierten Erfolg inneren CSS-Ordner eingefügt haben . Wir rufen bereits den CSS-Ordner an und dann haben wir uns normalisiert, um zu beurteilen, dass sie es einfach eine schnelle sichere und alles sollte gut sein zu gehen 14. Was sind ID-Selektoren, die sich interessieren: Das allererste, was wir in dieser Lektion tun werden, ist ein erstelltes Element namens Diff . Wir werden dieses div verwenden, um den Hauptteil unserer Inhalte zu verpacken. Wie Sie mit dibs arbeiten, Sie verstehen sie weiter Für jetzt, denken Sie einfach daran wie eine Box, die unsere Website-Inhalte organisiert. Wir werden unsere erste getan zwischen unserem Abschnitt und Header-Element erstellen und schließen Sie es zwischen unserer Fußzeile und Körper schließen Takes. Da unsere HTML-Inhalte hier in unserem neu kreativen Bereich sind, müssen wir unseren Code erfinden. Wir können einfach diesen ganzen Codeblock hier auswählen und alle auf einmal eingerückt werden, indem Sie die Tabulatortaste drücken , weil wir viele Takes in unserem HTML-Code erstellen werden. Wir können unseren Dips tatsächlich einzigartige i ds zuweisen, um sie voneinander zu trennen. Wir können dies tun, indem wir ein Attribut zu einem Diff-Kult hinzufügen und ich d und dann geben wir, dass ich d den Namen. Da dieses div der Wrapper für eine Website sein wird, die es eigentlich Rapper genannt hat. Jetzt ist das coole Ding mit dibs, dass wir sie auch als Selektor in unserem CSS auswählen können. Um dies zu tun, können wir folgendes und unseren CSS-Code eingeben. Zuerst werden wir anfangen, indem wir unseren I d genannt Rapper auswählen. Wir werden hinzufügen oder geschweifte Klammern. Und dann innerhalb dieser klar Rennen, werde ich eine neue CSS-Eigenschaft namens Text Align mit diesem Text ausrichten Eigenschaft ermöglicht es uns, unseren Text auf unserer Seite oder innerhalb unseres Elements zu verschieben. In unserem Fall werden wir unsere Texte in der Mitte ausrichten. Wenn wir also ihre Seite speichern und dann unsere Website ansehen, sollten alle Inhalte in unserem Wrapper auf ihrer Seite zentriert sein. Lasst uns das jetzt machen. In Ordnung? Wir können sehen, dass unsere Inhalte jetzt auf der Seite zentriert sind. Nun, da vor viel Ihnen zeigt, wie Sie mit Dibs arbeiten und ich ds im nächsten Video, Sie werden daran arbeiten, unseren Wrapper in einer effektiveren Angelegenheit zu zentrieren 15. Zentrieren unseres Websits: im letzten Video haben Sie gelernt, wie Sie I DS verwenden, um Dibs zu erstellen, um Ihre Inhalte zu trennen. In HTML haben Sie auch gelernt, wie Sie Stil-Ideen in CSS anvisieren können. In dieser Lektion werden wir Anreiz oder Wrapper für eine Website erstellen. Fangen wir an. Beginnen wir mit dem Hinzufügen eines grundlegenden Stylings zu unserem Wrapper. Ich werde einige CSS-Eigenschaften und -Werte eingeben, und dann werden wir sie durchlaufen und erklären, was jeder von ihnen tut. Also hier haben wir ein Maximum mit 940 Pixeln und einem Rand von Null und Auto. Die erste Eigenschaft, die wir hier haben, ist Max, mit dem, was dies tut, sagen Sie unserem Div, dass der Inhalt nicht größer als 940 Pixel , aber kang oder kleiner, je nachdem, was die Browser-Auflösung ist. Zum Beispiel, wenn wir unsere Seite speichern und ich die Größe des Fensters ändere, bemerkte ich eine Rapper-Anpassung basierend auf dem Bildschirm. Ich habe auch bemerkt, dass, sobald wir 940 Pixel getroffen haben, Inhalt ändert sich nicht in der Größe. Dies liegt an unserem Maximum mit Eigentum. Unsere Margin-Eigenschaft wird nur den Abstand für unser Wrapper-Element. Der Rand ist der Raum um ein Element herum. Der erste Wert legt den Rand oben fest. Die zweite legt den Wert auf der rechten Seite fest. Der dritte setzt den Wert auf den Boden und schließlich den Rand auf der linken Seite Versuchen Sie, es wie eine Uhr zu denken. Also hier sagen wir, dass Sie wollen, dass der Rand oben und unten Null ist, und die Ränder auf der linken und rechten Seite auf Auto gesetzt werden. Der automatische Wert füllt jeden leeren Platz auf der linken oder rechten Seite des Diffs aus. Dies könnte ein wenig verwirrend sein, um zunächst zu verstehen, aber wenn Sie mehr Websites setzen, werden Sie verstehen, wie Ränder funktionieren. In der Zwischenzeit erhalten wir ein visuelles Bild darüber, wie sich dieser Code auf unsere Webseite auswirkt. Lassen Sie uns eine Hintergrundfarbe Eigenschaft hinzufügen, um den Hintergrund ihres Todes zu stylen. Lassen Sie uns die Seite speichern und einen Blick zuerst, lassen Sie uns einen Browser klein machen, wie es auf einem mobilen Gerät aussehen würde, das wir sehen können, dass eingetaucht sind, nimmt die gesamte Seite. Wenn wir die Größe unseres Browsers vergrößern, passen sich unsere Ränder automatisch an und zentrieren sich auf Rapper. Beachten Sie, dass, sobald wir über 940 Pixel getroffen haben, Ränder sind. Fügen Sie zusätzliche weiße Sprache hinzu, da wir sagten, ein Rapper nicht größer als 940 Pixel zu gehen. Beachten Sie auch, dass einige ihrer Bilder ein wenig zu groß, ärgerlich, so dass sie ein wenig herausragen, aber wir werden weiter gehen und das später beheben. Ein Problem, das ich ein wenig früher bemerkt habe, ist, dass unser Text auf kleineren Displays ein wenig zu nah an den Seiten unseres Bildschirms ist. Was wir tun müssen. Es ist ein wenig Polsterung zu einem Rapper. Erinnern Sie sich, wie wir Ränder verwendet haben, um Platz um die Außenseite unseres Elements hinzuzufügen? Nun, wir können Padding verwenden, um Platz auf der Innenseite eines Elements als auch anzuzeigen. Dies ist, wie wir den Code eingeben, genau wie mit Rändern klopfen funktioniert in einer Uhr richtig Angelegenheit. Also hier sagen wir im Grunde Null klopfen oben und unten, aber bei 5% auf der linken und rechten Seite auf dem Bildschirm. So werden 5% der Gesamtsumme mit anderen Rappern wieder als Abstand innerhalb des Elements auf der linken und rechten Seite angewendet . Speichern wir es und erhalten eine visuelle Ansicht dessen, was sich geändert hat. Da. Wir können auf der linken und rechten Seite sehen. Wir haben einige Abstände vor Text und Symbolen. Ein guter Weg, sich daran zu erinnern Der Unterschied zwischen Marge und Patty ist, dass Marge die Außenseite und Polsterung ist die Innenseite s. Sie erstellen mehr Websites und sobald wir beginnen, auf die Gestaltung von Websites zu schauen, die mobile freundlich sind , Sie werden feststellen, warum dies als Referenz sehr wichtig ist. Haben auch einen gewissen Rand in Schwenkdiagrammen angehängt. Um Ihnen ein besseres Verständnis zu geben, arbeiten CSS-Eigenschaften mit Elementen. 16. Lass uns einen mobilen Ansatz für einen mobilen Ansatz nutzen: Es ist wichtig, dass wir einen mobilen ersten Ansatz verfolgen, wenn Sie unsere Websites erstellen. Der Grund dafür ist, dass es viel einfacher ist, eine mobile Website zu nehmen und sie auf eine Desktop-Version zu erweitern , anstatt eine Desktop-Version zu nehmen und sie in eine mobile Website zu verwandeln. Dies ist auch gut für Sie, weil mobile Websites einfacher zu erstellen sind und sie ein Muss sind. Jede Website muss mobil freundlich sein, da über 50% der Menschen das Web von irgendeinem mobilen Gerät aus betrachten. Bei der Gestaltung mobiler Websites geht es um Einfachheit und Benutzerfreundlichkeit. Sobald Sie Ihre mobile Website abgeschlossen haben, können Sie beginnen, an komplexeren Funktionen für eine Desktop-Version zu arbeiten. Jetzt gehen wir zurück in ihren Code und beginnen, die mobile Version unserer Website zu machen. Wir können unseren Hintergrund tatsächlich loswerden. Da wir es nicht mehr brauchen, werde ich tatsächlich an den Logo- und Header-Bereich unserer Websites arbeiten. Da unsere Desktop-Version ein Logo haben wird, gehen wir weiter und verwenden Sie ein H two Element, um eine Unterüberschrift zu unserer Website hinzuzufügen. Nun wickeln wir unsere beiden Überschriften in ein I D namens Logo ein. Ich werde auch unser Absatzelement löschen, da wir das nicht mehr brauchen. Wir müssen auch sicherstellen, dass unser DIV-Element sowohl unser H one N R. H zwei als auch das Ankerelement abdeckt . Nun gehen wir in unser CSS und erstellen eine neue Deklaration für unser neu geschaffenes Logo. Idee. Ich werde zentrieren, unseren Text ausrichten und ihm eine Marge von Null geben. Für jetzt, um unseren Text auszurichten, werden wir die Eigenschaft, die wir vor dem Namen Text Align gelernt haben, verwenden und ihm den Wert des Zentrums geben . Wenn wir voran gehen und genießen Seite, wird unser Hintergrund in ihrem Text weg sein sollte schön zentriert auf unserer Seite sein. Da gehen wir, unser Texas schön zentriert, wie es auf einem Drahtrahmen ist. Wir gehen zurück und tun dies später für eine Navigation. Tolle Arbeit. Sie haben einige grundlegende Funktionen von CSS gelernt. Nachdem Sie ein schnelles Quiz gemacht haben, werden Sie bereit sein, zum nächsten Abschnitt des Kurses zu gehen , der an mehr Styling und Arbeit mit CSS auf unserer Website 17. Gestalten unserer Website mit etwas Farbe: in dieser Lektion erfahren Sie, wie Sie Ihren Webseiten etwas Farbe hinzufügen. Beginnen wir mit der Installation unserer Website-Links. Ich werde unser Ankerelement hier anvisieren und zwei separate Deklarationen erstellen. Die 1. 1 wird alle Links auf unserer Seite, die Luft unbesucht und die zweite Dekoration mit Stil besucht Links genau die gleiche Farbe zu stylen. Nun, Sie fragen vielleicht Was ist diese Nummer? Nun, diese Zahl wird als Farbehex bezeichnet, was im Grunde bedeutet, dass dieser Hex-Code eine heiße, rosa rötliche Farbe darstellt . Wenn Sie Google Hex-Farbcodes, können Sie tatsächlich alle verschiedenen Farben betrachten. Also haben Sie sich mit Hexi-Dezimalcodes beschränkt. Sie können auch nach HTML-Farbschlüsselwörtern suchen und sie auf Ihrer Website als Referenz verwenden . Ich bin Links zu Hex- und ausgehärteten Farben in den externen Links Abschnitt dieses Kurses auf dieser Beispiel-Website enthalten . Sie können sehen, dass wir unsere Farben hier und auf der rechten Seite auswählen können. Sie haben alle verschiedenen Hex-Codes aufgelistet, die wir verwenden können, um Links zu übersichtlicher oder andere Elemente auf einer Seite, die wir wünschen, zurück zu unserer Website zu gehen. jedoch Dieser Code warjedochStil-Links auf einem Block, diese rosa rötliche Farbe. Aber wir werden das in ein paar Minuten ändern. auch immer, lassen Sie uns speichern und sehen, wie unsere Links sind. Wirst du in Ordnung aussehen? Wir können sehen, dass sie eine rötliche Art rötliche Farbe sind. Aber das Problem ist, wir nicht wollen, dass unsere Header diese Farbe verlinkt, also müssen wir das tatsächlich ändern. Gehen wir zurück in unseren Website-Code und lassen Sie uns eine neue CSS-Deklaration für unseren Header ein Take erstellen . Lassen Sie uns den Links über jedem eine graue Farbe geben. Ich muss dies auch für Mate H zwei tun, weil wir wollen, dass unsere anderen Websites Links diese röteste Farbe bleiben. Wir zielen eigentlich auf unser Ideenlogo ab und zielen auf die Links ab, die innerhalb unseres I D Logos liegen. Also, was dieser Code tun wird? Nun, machen Sie die Links in unserem I d Logo gräuliche Farbe, aber halten Sie alle anderen Links auf unserer Website lesen. Lassen Sie uns es zum Speichern und Erfrischen geben. Sehen Sie, wie es aussieht. Ordnung, da gehen wir, die beiden oben im Alter von zwei Jahren, die in unserem Logo sind. Ich d sind jetzt diese gräuliche Farbe. Ich merke auch, dass diese zugrunde liegenden störenden Links. Wir müssen das wirklich loswerden. Um dies zu tun, müssen wir zurück gehen und den Header ausrichten und eine neue CSS-Eigenschaft hinzufügen. Die Eigenschaft, die wir nutzen werden, ist die Tech-Dekoration Eigenschaft. Die Textdekoration Eigenschaft lässt uns an noch mehr Styling Toe sind Links, die jeder bevorzugen. In unserem Fall wollen wir tatsächlich das gesamte Styling entfernen, damit wir keines hier setzen können. Dies wird den Basiswert auf Ihren Links und unseren Website-Header beseitigen. Lassen Sie uns unsere Seiten sicher geben und sehen, ob es funktioniert, wie Sie wollten. Oh, wir können hier sehen, dass Unterstriche sind. Wir sind immer noch hier. Warum ist das so? Oh, ich kann sehen. Und unsere Kopfzeile nehmen. Ich habe vergessen, das Ankerelement einzuschließen, weil es Header sind. Links sind eigentliche Links. Wir brauchen ein Ziel Links genauer. Da gehen wir. Jetzt sind die zugrundeliegenden für neue Links verschwunden. In Ordnung. So Robe Status beginnt, mit etwas Farbe zum Leben zu erwecken. Wir haben noch viel zu tun. Jedoch, und die nächste Lektion, die Sie zu lernen, wie wir Klassen in CSS verwenden 18. Was sind CSS Kurse in CSS: in dieser Lektion erfahren Sie, was Klassen sind und wie wir sie richtig verwenden können. In CSS ist die Klasse einem I D sehr ähnlich außer für einen großen Unterschied, und ich d kann nur eindeutig sein und kann nicht auf derselben Seite wiederholt werden. Eine Klasse hingegen hingegen ist etwas flexibler. Wir können so viele Klassen auf jeder einzelnen Seite haben, wie wir möchten. Lassen Sie uns ein wenig mehr Styling auf unserer Webseite hinzufügen und eine neue Klasse zu unseren Navigationslinks hinzufügen. Ich werde zu unserer UN-Bestellliste navigieren und ihr die Klassennamen Navigationslinks geben. Ich werde tatsächlich die Größe aller unserer Listenelemente Schriftart leicht erhöhen. Wir müssen auch unser Bad direkt unter unserer bestellten Liste der Vereinten Nationen schließen. Lassen Sie uns nun in unser CSS gehen und unsere neu erstellte Klasse als Selektor verwenden. Ich werde auch die Listenelementeigenschaft glatten. In Ordnung, also werden wir eine neue CSS-Eigenschaft namens Schriftgröße verwenden. Und was die Schriftgröße-Eigenschaft tut, ist, die Schriftgröße der Klasse zu steuern, in das Element, das Sie in diesem Fall ausgerichtet haben, indem Sie die Schriftgröße unserer Navigationslinks wiederholen. Lassen Sie uns es eine speichern und öffnen und sehen, was passiert. Wir können hier sehen, dass, wie wir unsere Schriftgröße ändern sind Änderungen auf unserer Webseite finden. Je höher die Zahl, desto größer ist die Schriftgröße Kinder. Wir haben 18 Pixel ausgewählt, was etwas über dem Durchschnitt liegt, so dass unsere Vorderseiten unserer Liste hier nur ein wenig größer geworden sind. Als nächstes fügen wir einen coolen Hover-Effekt hinzu. Wenn jemand über unsere Navigationslinks fährt, müssen wir auf unsere Navigationsleiste Ankerlinks zielen, und wir werden auch eine Prosciutto-Klasse namens Hover anvisieren. Also, wenn jemand die Maus über die Navigationslinks in unserer Naff-Leiste schwebt, ist die Farbe, die wir hier setzen, klar, in die die Links umgewandelt wurden. Als nächstes wir tatsächlich eine Farbe hinzu. Ich werde eine etwas dunklere Farbe hinzufügen, als das, was Standard-Link Farbe ist jetzt. Das ist irgendwie wie eine dunklere rote Farbe. Um diesen Mörder zu finden, nehme ich unsere Standard-rötliche Linkfarbe, und ich werde sie in Google eingeben und versuchen, eine dunklere rote Farbe zu finden. nehme ich unsere Standard-rötliche Linkfarbe, Also werde ich den Code hier schnappen, und dann werde ich meinen Webbrowser öffnen und nach der Website suchen, die wir früher benutzen, um unsere Standard-rötliche Linkfarbe zu finden, die Hex-Farben eingibt. In Ordnung, also haben wir tatsächlich eingefügt oder gefärbt hier und hier konnten wir verschiedene Schattierungen sehen, die wir verwenden können . Etwas wird das packen, hier zusammenarbeiten, diesen Hex-Code beschneiden und ihn dann unserem Hover-Effekt hinzufügen. Sobald wir alle hier fertig sind, können wir unsere Webseite speichern. Und mal sehen, wie alles im Browser aussieht. Gleich drauf. Es sieht so aus, als hätte unser Text in der Größe zugenommen, um ein bisschen größer zu sein und am meisten über unsere Links zu haben . Eine dunklere rötliche Farbe wird aufgetragen. Bisher sehen sie ziemlich gut aus. Weißt du, wie siehst du die Klassen bewerten? Und Sie kennen den Unterschied zwischen einer Klasse und einem I d. Wenn Sie bereit sind, lassen Sie uns über das Organisieren Ihres CSS mit Kommentaren lernen 19. Wie du deinen CSS Kommentare hinzufügen kannst: Nun, da unsere Website versucht, irgendwohin zu kommen, ist es wichtig, dass wir unseren Code organisieren, damit wir ihn leicht navigieren können, wenn wir uns entscheiden, auf unserer Website zu arbeiten. Kommentare sind sehr nützlich, weil sie uns erlauben, Notizen in unseren Code hinzuzufügen und uns helfen alles nur ein bisschen besser zu organisieren. Es ist auch wichtig zu beachten, dass ein Web-Browser wurden Kommentare ignorieren, wenn es Ihren Mantel und Website verarbeitet . Besucher werden nicht in der Lage sein, Ihre Kommentare zu sehen, es sei denn, Sie sehen Ihre Website Quellcode als auch. Wir können einen Kommentarblock starten, indem wir ford Schrägstrich in das Arsch-Trick-Symbol eingeben, und dann schließen wir den Block mit einem Magen-Symbol und dann den Ford Slash. Alles in diesem gemeinsamen Block wird vom Web-Browser und ohne Pad ignoriert. Plus, wir können sehen, dass es Bildschirm gedreht. Lassen Sie uns beginnen, indem wir kommentieren, was einige unserer CSS-Eigenschaften tun, sowie den Sommer eines Codes organisieren, damit Sie etwas Übung bekommen können und eine Referenz dafür haben , was diese Eigenschaften tatsächlich tun. Wir werden auch einige Kommentare hinzufügen, um unser Website-Logo, einen Rapper oder Fußzeile und Header und einige andere Dinge zu organisieren . Gehen wir rein und machen das. Also genau hier können wir unsere Link-Stile organisieren. Hier nehmen Sie Link-Farben. Die meisten werden hier vielleicht auch einige Eigenschaften hinzufügen. So gehen wir verknüpfen Farben und Eigenschaften. Lassen Sie uns auch diese Farben kommentieren und so gut, dass Sie wissen, was sie sind, wenn Sie sie später referenzieren. So ist diese Linkfarbe klar von Rot. Dieses Logo ist irgendwie Ah, dunkelste größte Farbe. Das Letzte, was ich tun werde, ist, die Hover-Farbe unserer Links hier in der Naff-Leiste zu ändern . Und es ist eine dunklere rote Art von Farbe hier, und das sollte gut für jetzt sein. Für unsere Kommentare in CSS werden wir später noch ein paar weitere hinzufügen. Wie Sie durch diesen Kurs fortschreiten. 20. Hinzufügen von Schriftarten auf unserer Website und Anpassung von Textgröße: Sie haben bis zu diesem Punkt ziemlich viel CSS gelernt, ich denke, es ist Zeit, dass wir einen Schriftstil auf unserer Website hinzufügen, um eine Schriftart für eine Website zu bekommen , die tatsächlich auf den Kopf über zu Google-Fonds. Wir können nach einer Schriftart suchen, die wir mögen, Aber nur um dieses Video kurz zu halten, Ich werde eigentlich voran gehen und schnappen Sie sich die 1. 1 Ich sehe, dass sieht ein wenig anders aus. Da wir einen Friseur Wallich bauen, werden wir uns für eine trendige Schrift entscheiden, die ich normalerweise nicht wählen würde, aber eine, die etwas Stil hat. Lasst uns das hier probieren. Das sieht ziemlich gut aus. Also werden wir klicken und diese zu unserer Sammlung hinzufügen. Und ich werde auch eine offene Söhne Front als gut greifen, die wir für den Körpertext unserer Website brauchen würden und andere verschiedene Elemente waren Styling. Sobald wir bereit sind, weiterzumachen, können wir auf die Schaltfläche „Verwenden“ klicken und wir haben unsere beiden Fonds hier und Sie konstruieren, welches Sie wollen. Wir können auf die normale oder fett für das Tanzskript klicken, und dann sehen Sie offene Lieder hat viel mehr Optionen als auch, die jeder, den Sie möchten, Sie es auswählen. Und hier haben wir den Code, den wir tatsächlich in unsere Website einfügen können. Also haben wir unseren Dies ist unser HTML-Code hier, also müssen Sie das tatsächlich kopieren. Gehen Sie in unser HTML eine Website und im Kopfbereich würde es einfach hier einfügen, weil dies im Grunde verbindet uns mit der Google-Schriftart. Danach müssen wir eigentlich das CSS für eine Schriftart setzen. Wir können diese Schriftfamilie Eigenschaft verwenden, um jedes Element, das wir wollen, mit der spezifischen Schriftart zu formatieren. Also im Fall unseres Titels, werden wir tatsächlich Stil oder Logo, ich glaube, mit dieser Schriftart hier, die ich verwenden werde, und wir können einfach kopieren und einfügen, um es zu sehen, zu bewerten und einfach hier so einkleben, und es sollte Gut zu gehen. Also alles in unserem lokalen haben wieder diesen neuen Fonds-Stil, ich werde unseren Kommentar hier kopieren, und ich werde nur Schriftarten für sind Logo eingeben, nur damit wir wissen, wofür diese Schriftart verwendet wird, und lassen Sie uns es tatsächlich testen und sehen, ob alles arbeiten. Also geben wir uns sicher und öffnen uns. Und ja, wir können sehen, dass unser neuer Schriftstil auf unser Logo angewendet wurde. Und wir können auch sehen, dass sind andere Elemente Haben Sie nicht diese neue Fonds-Stil. Stellen Sie sicher, dass Sie jede Nemo Seite und Ihre CSS-Seite speichern. Dies ist ein häufiger Fehler, den viele Leute machen, einschließlich ich selbst. Als ich das erste Mal angefangen habe und wir hier unten wieder sehen können, ist es nur ein Standard-Stil Spaß. Also müssen wir zurück in Google-Fonds gehen und wir werden tatsächlich die offenen Söhne CSS hier finden. Ich werde das kopieren, und wir werden das tatsächlich unserem Körper hinzufügen, damit alles andere im Dokument diese offene Salins-Schriftart-Styling erhält . Aber was wir tun müssen, wird es tatsächlich ganz oben hinzufügen müssen, denn wenn wir es in unseren Körper setzen, wird es so machen, dass jedes Element auf unserer Seite diese so offen hat. Aber wir wollen eigentlich, dass ein Logo einen anderen Stil hat. So haben wir es nach unserem Körper nehmen, weil erinnern Sie sich an die kaskadierende Natur von CSS. Also wird unsere Logo-Schriftfamilie die Leichenfonds-Familie überschreiben. Dies ist ein weiteres Beispiel dafür, wie wir den Sarg der Natur von CSS nutzen können, um unsere Webseiten zu nutzen. Also lasst uns das schnell sicher geben und mal sehen, wie es aussieht. In Ordnung, wir können sehen, dass sich unser Schriftstil geändert hat. Also haben wir die offenen Söhne Spaß, Haltung zu sein, alles auf dem Körper. Und da unsere Logo-Deklaration von Reform Family nach unserem Körper genommen wurde, haben wir unsere verschiedenen Stile für unser Logo angewendet. Als nächstes, tatsächlich gehen, um unsere H ein Fonds Größe zu ändern 2,0 e m und GM ist wie ein Pixel , außer dass es mobil reagiert. 1 Uhr entspricht dem aktuellen Standard für die Schriftgröße des Anzeigegeräts , der normalerweise etwa 16 Pixel beträgt. Warum also nicht nur Pixel verwenden? Nun, das Problem von Pixeln ist, dass sie sich auf mobilen Geräten nicht ändern. 16 Pixel könnten zu groß sein, wenn wir unsere Fondsgröße auf e EMS setzen. Sind Spaß wird je nachdem, welches Gerät unsere Website angezeigt wird skalieren. Also ist dies zu M das gleiche wie 16 Mal zu sagen, aber natürlich wird das für ihn auf ihrer Seite skalieren. Also werde ich diesen Kommentarbereich hier ausschneiden und ich werde dieses Jahr schreiben. Nur damit wir als Referenz wissen, was 1 Uhr gleich ist. Und eigentlich werde ich das wirklich schnell ändern. Hier, um ihn wird nicht gleich 16 Pixel wird eigentlich gleich 32 Pixel. Ich weiß, dass dies ein wenig verwirrend ist, aber wir werden dies genauer behandeln, wenn wir unsere Website auf mobile Reaktionsfähigkeit testen . Moment versuche ich nur, E m zu verwenden, wenn Sie können, weil sie skalieren und Ihre Website mobiler und reaktionsfähiger machen . Wenn es um den Text geht, der auf Ihrer Website angezeigt wird, werde ich auch die Schriftgröße unserer H twos und unserer Logo-Eigenschaft ändern. Also lassen Sie uns diesen Code kopieren und diesen jeweils 12 und h zwei wechseln und wir werden die Textgröße etwas kleiner machen . Lasst uns gehen. Etwas in der Schriftgröße entspricht 1,25 PM, also wird es ein bisschen größer sein als das, was normalerweise der Text sein würde, aber es wird auch ein bisschen kleiner sein als sie. Jeder. Ich werde auch einen Fonds hinzufügen, warten auf R H zwei und ich werde normal suchen, weil standardmäßig Schlagzeilenelemente haben eine Front ging los, fett hinzugefügt, um sie. Wenn wir also eine Fußnote von normal hinzufügen, wird dies auch die Unterzeichnung des Alters ändern. Und fügen Sie mehr Wert auf ihr h eins. Bevor wir hier fertig sind, werde ich uns unser Kommentarziat hier holen, und ich werde unsere Navigation etwas besser organisieren. Ich füge hier einen Navigationsbereich hinzu. Nur so unsere Navigationslinks und alles, was ein bisschen mehr in unserem Code organisiert sind. Während wir hier sind, lassen Sie uns auch eine neue Nath-Eigenschaft erstellen und lassen Sie uns Text ausrichten alle Text InterNAP-Element zentralisiert werden. Also dies oder unsere Navigation tatsächlich zentrieren auf dem Bildschirm statt auf der linken Seite erscheinen und Sie werden sehen, dass in einer Sekunde, wenn ich die Seite gespeichert. Und last but not least, lassen Sie uns kopieren sind allgemeiner Code hier. Und lassen Sie uns einen Abschnitt für unseren Flitter erstellen. Im Inneren befinden sich Fußzeilenabschnitt hier. Lassen Sie uns die Fußzeile und wir werden noch einmal die Schriftgröße auf 1.25 PM ändern. Dies wird den Texaner oder die Fußzeile ein wenig kleiner machen und auch mobil machen. Reaktionsschnell. Ich werde auch die Farbe des Text-Luftfilters ändern. Also werde ich eine Farbeigenschaft erstellen. Und was wir tun werden ist, dass wir tatsächlich diese Art von dunklem Grauton,den wir oben hier aufgebraucht haben,schnappen den wir oben hier aufgebraucht haben, uns und finden es diesen großartigen Farbleser. Also werde ich das einfach in kopieren und genau wie unsere Kopfzeile gehen wir zum Text, richten unseren Text aus und machen ihn in unserer Fußzeile entstanden. Ich glaube also, dass wir hier fertig sind, unser CSS für diese Lektion zu bearbeiten. Lassen Sie uns unsere Datei speichern und sehen, wie sie im Browser aussieht. Alles klar, damit wir sehen können, dass gekämpft wird. Größen haben sich auf unserem Header geändert. Wir haben auch alles zusammengefasst Wir können unsere Navigation hier jetzt in der Mitte unseres Pagers sehen und wenn wir nach unten zu unserer Fußzeile scrollen, können wir sehen, dass Fußzeile ist jetzt alles in der Mitte und unser Text hat sich ein wenig verändert auch, also sieht es ziemlich gut aus. Unsere Website fängt an, sich zusammenzufinden. Wir haben noch eine Menge Arbeit, aber im nächsten Abschnitt wird noch mehr Styling auf unserer Website zu tun. 21. Stylen unserer Portfolio-Seite: Jetzt, da wir mit dem Typografie-Styling für eine Website fertig sind, ist es an der Zeit, fortzufahren. Wir haben die meisten Grundlagen behandelt. Es ist Zeit, etwas an den Bildern zu arbeiten, die wir auf unserer Website haben. Nun, da wir mehrere Listen auf ihrer Seite haben, sollten wir ihr Portfolio geben. Und ich möchte voran gehen und ihm den Namen Portfolio geben. Nachdem wir nun ein A D für ein Portfolio erstellt haben, können wir nun mit der Gestaltung unseres Portfolios beginnen. Ich werde unseren CSS-Kommentar hier kopieren, und ich werde einen neuen Abschnitt für unser Portfolio-Styling erstellen. Ok, Dokey. Also das allererste, was ich tun möchte, ist, die Seiten unserer Bilder ab jetzt zu ändern , die viel zu groß für welche Seite? Und es sieht nicht sehr gut aus. Also, um dieses Dimensionierungsproblem zu beheben, aber wir werden tun, ist ein Maximum mit für Bilder zu deklarieren. Wenn Sie ihnen ein Maximum von 100% geben, würden wir die Bildauswahl verwenden, um alle Bilder auf einer Website zu zielen . Diese max mit Eigenschaft wird unsere Bilder sagen, dass sie nur so groß wie 100% des Containers, dass sie Aaron. Wenn der Container in der Größe verkleinert wird, wird auch das Bild angezeigt. Dies scheint gering zu sein, aber es kann einen großen Einfluss auf die Reaktionsfähigkeit unserer Website haben. Als Nächstes tun wir unseren Teil für Sie. zunächst Lassen Sie unszunächstdie hässlichen Punkte loswerden, die wir für jeden Artikel auf unserer Portfolioliste haben. Wir können dies mit der weniger Stil Eigenschaft tun und wir haben uns entschieden, um zu nuss. Dies wird diese roten Punkte neben jedem Bild loswerden. Als nächstes wollen wir ein Galerie-Listenelement anvisieren. Lassen Sie uns ein mit 95% geben. Lassen Sie uns ein mit 95% geben und wir werden eine Marge von 2,5% auf der linken und rechten Seite jedes Artikels setzen . Dadurch wird unser Listeneintrag 95% betragen. Mit der Seite werden die zusätzlichen 5% auf die linke und rechte Seite jedes Bildes angewendet. Später waren wir nur ein Websites Leo mit Medienkarrieren und der Flow-Eigenschaft. Aber denken Sie daran, dass wir jetzt noch an der mobilen Version einer Website arbeiten. Lassen Sie uns das Dokument genießen und sehen, wie es aussieht. Okay, wir können hier sehen, dass Bilder ein wenig in der Größe geschrumpft sind. Wir können auch sehen, dass diese Punkte noch hier sind. Aus irgendeinem Grund. Gehen wir zurück in unseren Code und sehen, ob wir vielleicht einen Fehler gemacht haben oder etwas falsch eingeben. Ordnung, Blick auf unser Portfolio, ich glaube, ich weiß, was das Problem ist. Ich denke, wir versehentlich setzen wir eine Großschreibung auf sie i d Aber als er es in unserem CSS verwendet, haben wir nicht Großbuchstaben oder CSS. Also müssen wir dies in einen Kleinbuchstaben p ändern und es sollte so funktionieren, wie wir es wollen. Probieren wir das aus und sehen Sie rechts an. Da gehen wir, unsere Bilder dort jetzt 100% des Rappers und unsere kleinen Punkte neben jedem Bild sind nun weg . Sie uns auch LassenSie uns aucheinige Tests hier machen. So haben Sie bemerkt, dass als eine Verringerung der Größe unserer Seite hier oder Bilder skalieren mit der Seite und unsere Prozentsätze auf der Website auch skalieren. Wenn wir erhalten 5% einer Marge auf der linken und rechten Seite unseres Portfolios Artikel und wie wir verringern die Seiten eines Rappers, sind Bilder Skala mit den Seiten davon. Dies ist also ein sehr wichtiger Schritt, um unsere Website mobil reaktionsfähig zu machen. Eine Sache, die ich hier wirklich schnell tun werde, wird nicht einen Rand an der Spitze jedes Bildes auf ein wenig Platz auf der mobilen Version hinzufügen . Also lassen Sie uns hier 10 Pixel hinzufügen und wir werden es in Ihrem Aufregen wieder speichern. Sehen Sie hier, dass Lippen ich das nicht tun wollte. Wir haben hier ein bisschen mehr Platz. Wir können das später anpassen, aber jetzt sieht es ziemlich gut aus. Und wieder, dies ist sehr wichtig, um eine Website mobil reaktionsschnell zu machen. 22. Erstellen einer horizontalen Navigation: es ist an der Zeit, einige Arbeit auf unseren Websites und Navigation zu tun. Wir werden auch ein paar andere schnelle Korrekturen vornehmen. Warum wir hier zuerst dabei sind. Lasst uns Target sind naff auf geordneter Liste. Ich gehe auch zu uns wie das Nickerchen und geordnete Listenelemente als auch. In dieser Eigenschaft werden wir unsere Listenelemente klopfen von Null geben. Ich werde auch einige Margen festlegen. Geben wir ihm einen Spielraum. Oben am Nullrand rechts von 20 Pixeln und einem Rand unten und links von Null. Ich werde auch den Anzeigewert so einstellen, dass er im Zeilenblock angezeigt wird. Dadurch werden unsere Listenelemente in geändert, anstatt wie eine verschraubte Punktliste von oben nach unten angezeigt zu werden, um tatsächlich horizontal auf einer Webseite angezeigt zu werden. Um Ihnen ein Beispiel zu geben, wie dies funktioniert, speichern wir jetzt unser Dokument und sehen, wie unsere Webseite aussieht und notieren Sie die Änderungen, die unserer horizontalen Liste für unsere Navigation passieren. Wir können nun hier sehen, dass es horizontal auf unserer Website angezeigt wird. Ziemlich cool, wenn für weitere Informationen über die Anzeigeeigenschaft mr, um die externen folgt für die Partituren zu überprüfen , wie ich mit einem Dokument verknüpft, das über die Anzeigeeigenschaft spricht und ein wenig mehr im Detail. Moment sind wir ziemlich gut, hier zu gehen oder die Navigation sieht ziemlich gut aus. Und in der nächsten Lektion werden wir unsere neu erstellte Navigation sowie einige unserer Fußzeilenelemente aufpolieren , an denen wir arbeiten müssen. 23. Beheben unseres Fußzeile und Navigation: jetzt, da unsere Navigationslistenelemente Links sein werden, müssen wir sie stylen. Lassen Sie uns also unsere Navigations-Ankerelemente ausrichten und ihnen ein Schriftgewicht von fett geben. Und lassen Sie uns auch ein wenig Abstand in ihnen hinzufügen. Ich werde dich hierher bringen, damit, wenn jemand über unsere Links schwebt, sie geknallt haben. Ich werde auch die Größe unserer Social-Media-Symbole am unteren Rand ihrer Seite ändern. Im Moment sind sie ein bisschen, dass wir unsere Bilder anvisieren können, aber ich habe ihnen keine Klasse gegeben. Das nächste, was hier ist, dass wir beide Bilder tatsächlich die gleiche Klasse geben können, weil denken Sie daran, Klassen können mehrmals verwendet werden, so dass wir diese Social-Media-Icons Klasse mit all unseren Social-Media-Icons verwenden können und dann den Stylisten für dass eine Klasse und es wird auf alle drei Symbole angewendet werden. Also lasst uns voran gehen und kopieren und einfügen die Klasse hier, geben all diesen drei Bildern die gleiche Klasse, also lasst uns voran gehen und tatsächlich diese Klasse anvisieren und unseren Fußzeilenbildern einige Stile geben. Ich werde die Höhe ändern und mit jeweils 30 Pixel sein. Lassen Sie uns dies ein Speichern geben und sehen, wie es auf unserer Website aussieht. Trink das hier drüben. In Ordnung? Wenn wir also den Mauszeiger über Links bewegen, sehen wir, dass sie diesen kräftigen Effekt mit ihnen bekommen. Und unten Hier können wir unsere Bilder sehen oder eine Art von winzigen. Aber Sie haben auch diese kleinen Pfeile hier. Da ist ein Pop genug. Also haben wir eine Art Luft in unserem Code los. Also lassen Sie uns das untersuchen und sehen, ob wir die Luft erkennen können. Sieht so aus wie unsere Klassen. Okay, aber Sie können sehen, dass hier versehentlich eine zusätzliche Antenne für einen schließenden Tag hinzugefügt wurde. Also werden wir das loswerden,weißt du, weißt du kopieren und fügen Sie einfach unsere Klasse ein und kleben Sie sie hier zurück. Und das sollte diese seltsamen Pfeile loswerden, die für unsere Schließung auftauchten. Aber schließen Sie das hier oben. Und da gehen wir hin. Das sollte das Problem beheben. Lassen Sie uns es eine schnelle speichern und überprüfen und sehen. Oh, da gehen wir. Da. Alle haben. Aber Sie haben auch bemerkt, dass wir diese seltsamen Zwischenräume auch zwischen unseren Bildern haben. Also, was verursacht das? Ich denke, wir könnten einige Textdekorationsstile bekommen, die unsere Fuß- oder Social-Media-Icons stören . Also werde ich zur Fußzeile gehen und ich werde die Ankerelemente anvisieren, und ich werde ihm Textdekoration von keiner geben. Und mal sehen, ob das das Problem behebt, weil ich denke, dass das College in kleinen Dash da ist, um aufzutauchen. Das stimmt, und sie sind du. Sie sind alle weg. Also, unsere Bilder sehen wir uns ein bisschen besser an. Lassen Sie uns auch unseren Zustand auf der mobilen Version überprüfen, nur um sicherzustellen, dass alles gut ist. Ok, sie sehen auch ziemlich gut aus. Ähm, eine Sache, die ich will, eine Nachricht. Ich könnte die Bilder ein bisschen größer machen. Sie sind gerade etwas kleiner, also sollten wir vielleicht zurückgehen und sie etwas größer machen. Ich merke auch, dass es hier ein wenig mehr Platz zwischen unseren Listeneinträgen geben muss . Wir können hier sehen, dass sie ein wenig nah beieinander sind, also gehen wir zurück in unsere Navigationsliste Elemente und lassen Sie uns einen Rand unten von vielleicht 10 Picks über hinzufügen . Also und mal sehen, wie das in Ordnung aussieht. Wir konnten sehen, dass es ein bisschen mehr Platz gibt, und das sieht definitiv ein bisschen besser zwischen unseren Listeneinträgen als auch. wir also auf das zurückgehen, was wir vorher tun mussten gehen wir zurück zu unseren Social-Media-Icons und machen sie ein bisschen größer. Also gehen wir zu unseren sozialen Symbolen, die wir erstellt haben. Und lassen Sie uns versuchen, 40 Pixel und sehen, wie das aussieht. Machen Sie die Bilder ein wenig größer. Alles klar, das sieht viel besser aus, ein bisschen größer, aber nicht zu groß. Das gefällt mir, und bis jetzt sieht alles andere ziemlich gut aus. Nach dieser Lektion haben Sie ein schnelles Quiz und dann werden Sie lernen, wie wir alle anderen Seiten zu unserer Website hinzufügen können . 24. Erstellen einer About Page: Es ist an der Zeit, weitere Seiten zu unserer Website hinzuzufügen. In diesem Abschnitt werden wir Kunst über Kontakt und blockierte Seite erstellen. Beginnen wir mit Erstellen sind eine Boot-Seite. Das erste, was Sie hier tun müssen, ist eine neue Textdatei und Ihren Website-Ordner zu erstellen . Danach öffnen wir die Datei und speichern sie als dot html. Das nächste, was wir tun müssen, ist, alle unsere HDNet HTML von unserer nächsten Seite auf unsere neu erstellte Boot-Seite zu kopieren . Wir können dies und Windows tun, indem Sie das Steuerelement drücken, Siehe Schlüssel, um es zu kopieren und dann Steuerelement plus P, um es einzufügen. Nun, wenn wir diese Seite sehen, wird sie genau wie unsere Portfolio-Seite aussehen. Also, natürlich müssen wir das ändern. Das allererste, was wir loswerden müssen, sind alle unsere Bilder. Lassen Sie uns also alles innerhalb des Abschnitt-Tags mögen und löschen Sie es. Also jetzt, wenn wir genießen foul und open heart neu erstellt eine Boot dot html Datei, können wir tatsächlich jetzt auf unsere über Seite in unserer nächsten Datei klicken und wurden auf unsere Seite gebracht. Wir haben gerade hier erschaffen. Aber natürlich gibt es hier nichts, weil wir gerade alles gelöscht haben, aber unsere Boot-Seiten funktionieren jetzt korrekt auf unserer Website. Ziemlich cool. Also gehen wir zurück in HTML und beginnen, unsere über Seite aufzubauen. Das allererste, was ich tun werde, ist bei unseren Kunden Bild auf der Seite. Ich habe bemerkt, dass ich ihr Bild auch eine Klasse hinzufügen werde, so dass wir es später spezifisch mit CSS stylen können. Damit dieses Bild korrekt angezeigt werden kann, müssen Sie auch die Projektdateien für diese Lektion herunterfahren, oder wenn Sie möchten, können Sie Ihr eigenes Bild verwenden, wenn Sie möchten, ich werde nur schnell verdoppeln Schauen Sie sich unsere Erweiterung hier an. Also habe ich die richtige Erweiterung für ein Bild bekommen und es ist ein J Schwein. Und für den alternativen Text werde ich den Namen unseres Mandanten hier setzen. Und schließlich fügen wir unsere Klasse zu unserem Bild hinzu, und wir werden das Klassenprofil-Bild hinzufügen. Als nächstes fügen wir einen Titel zu unserer Webseite hinzu, da wir bereits eine H eins und H zwei in der Kopfzeile haben. Wir werden ein H 3 benutzen müssen. Lassen Sie uns der HD den Titel über mich geben. Sie könnten auch ein Alter verwenden, um hier ist gut, wenn Sie mögen Nach diesem, lassen Sie uns Addy Absatz, wo ein Kunde etwas Text über sich selbst hinzufügen kann. Moment werde ich einige Beispieltext einfügen, nur so dass etwas da ist und wir sehen können, wie es tatsächlich im Browser aussehen wird. Ich werde hier auch ein paar Absätze Element hinzufügen. So wird unsere Seite ein wenig aufgebaut und wir können den Abstand dazwischen sehen. Ich werde mir ein wenig Zeit nehmen, um das etwas aufzuräumen. Ich greife den Slalom, wenn einige Online, die im Grunde nur Fülltext geschwächt einfügen hier ist. Ich werde auch jeden Absatz eine Textur nehmen und sie auch in ein Absatzelement einwickeln . Denken Sie daran, auch Ihr Absatzelement zu schließen. Näher letzter und schwächen. Löschen Sie diesen letzten Absatz schließen rechts hier, da wir ihn nicht mehr brauchen. In Ordnung, also sieht unsere über Seite ziemlich gut aus. Lassen Sie uns einen schnellen Sitz geben und sehen, wie es auf unserer Website aussieht. Also klicken wir auf ein Boot. Wir haben jetzt unsere Boot-Seite hier für unseren Kunden. Es sieht nicht so schlimm aus. Hier können wir unsere Über mich haben, das ist der Titel sind Absatz zu Text und ein Bild von ihrem Kunden. Wir gehen zurück und stylen das alles in der nächsten Lektion. Eine letzte Sache, die ich hinzufügen werde , ist unter dem Profilbild unseres Kunden. Ich werde einen Absatz hinzufügen, und ich werde den Namen des Klienten wie eine Beschriftung für das Bild eingeben. Und wenn wir aktualisieren, können wir sehen, dass jetzt die Beschriftung hier durch unser Bild angezeigt wird, also denke ich, dass es bis jetzt ziemlich gut aussieht. In der nächsten Lektion werden wir unsere neu erstellte Gürtelseite für unsere Website erweitern. 25. Gestalten unserer U-Seite: In Ordnung. Also haben wir gerade unsere über Seite erstellt und das grundlegende HTML eingerichtet. Jetzt ist es an der Zeit, etwas mit unserem CSS zu arbeiten. Lassen Sie uns einen Abschnitt hier in unserem CSS für unsere über Seite erstellen. Ich hole dieses Jahr und ich werde es kopieren und wir nennen es Stile für unseren Boat Beach, nur um alles ein bisschen mehr organisiert zu halten. Oh, ja, nein. Beginnen wir mit dem Styling unseres Profilbildes. Ich werde es geben und Max mit 200 Pixel sowie einige Ränder, denken Sie daran, dass wir tatsächlich Ziel sind Punkt-Profilbild. Lassen Sie uns versuchen, das Aufkommen von fünf Pixeln rundum nur für den Moment, nur um dem Bild ein wenig Atemraum zu geben. Und schließlich müssen wir diese Anzeige so einstellen, dass unsere automatischen Ränder links und rechts das Bild auf der Seite zentrieren. Nun, bevor wir mit ihren Stilen hier fertig sind, lassen Sie uns etwas Styling für unsere drei Schlagzeile machen. Oh, ich werde hier an den Rändern tun, speziell an der Unterseite der Elemente, dass es ein wenig Trennung zwischen r H D und R Absatzelement. Bevor wir etwas anderes tun, lassen Sie uns das schnell speichern und Haro einfach verärgert sehen. Sieht aus, die wir hier sehen können, die Profilbilder sind, eigentlich ein bisschen klein. Also werde ich weitermachen und das ein bisschen größer machen. Lassen Sie uns etwas wie vielleicht 300 Pixel versuchen. Alles klar, das sieht viel besser aus. Ein bisschen größer. Sie uns schließlich LassenSie uns schließlichden Titel unserer Website ändern. Also, um dies zu tun, müssen wir in unser HTML gehen, um zu unserem jeder zu gehen und lassen Sie uns den tatsächlichen Namen des Rückfalls der Rio setzen . Wir haben den Namen unserer Website hier, und ich werde tatsächlich die H zwei loswerden, weil ich denke, es sieht ein wenig besser ohne die H zwei. Also lasst uns das vorerst löschen. Außerdem werde ich in unsere Kooperationsinformationen gehen und den Namen unseres Kunden eingeben und weil wir dies nur unter einer Boot-Seite tun, müssen wir tatsächlich zurückgehen und alle Seiten öffnen und ändern die Einstellungen in ihnen, so dass Sie voran gehen und das auf eigene Faust tun können. Ich werde nur meinen Index hier ändern und den Namen und die Fußzeile ändern. Oh, ja, also denke ich, dass es so ziemlich ist. Lassen Sie uns es eine speichern und aktualisieren Sie die Seite. Da gehen wir hin. Ich denke, das sieht viel besser aus, also sind wir hier ziemlich fertig. Die mobile Version unserer Website ist fast vollständig. Sobald wir mit der Gestaltung der mobilen Version überall fertig sind, werden die Seiten mit der Gestaltung der Desktop-Version unserer Website fortfahren. 26. Erstellen einer Kontaktseite: Wir haben bisher zwei Seiten fertig gestellt, und jetzt haben wir noch zwei weitere zu gehen. Lassen Sie uns weiter und beginnen, auf unserer Kontaktseite zu arbeiten. Wir werden unsere Kontaktseite erstellen, genau wie unsere Über Seite. zunächst Lassen Sie unszunächsteine neue Textdatei erstellen und nennen Sie sie contact dot html. In Ordnung, wir können den alten hier löschen. Lassen Sie uns unsere Kontaktseite öffnen und was wir hier tun werden, ist, dass wir alles von unserer Indexseite greifen und wieder Polizist, kopieren Sie es in unsere neu erstellte Kontaktseite, genau wie zuvor. Wir müssen hier reingehen und unser Portfolio löschen. Da wir es nicht auf unserer Kontaktseite benötigen, navigieren wir selektiv zu unserem Portfolio Artikel und führen sie durch. Lassen Sie uns nun einen weiteren Abschnitt erstellen. Nehmen Sie hierher. Wir haben zwei Säulen. Unser erster Abschnitt wird unsere erste Spalte sein, und unser zweiter Abschnitt wird unsere zweite Spalte für unsere mobile Version der Website sein. Diese Spalten würden nur gestapelt werden, aber wenn Sie unsere Website auf die Desktop-Ansicht erweitern, waren diese beiden Spalten nebeneinander schweben. Also für jetzt lasst uns ein H drei für den Titel erstellen und innen werde ich schreiben. Kontaktieren Sie mich. Es wird der Titel für unsere Seite auf dieser Seite sein. Wir werden unsere Kunden Kontaktinformationen direkt unter unserer H drei nehmen, die wir erstellt haben, anzeigen . Lassen Sie uns ein Absatzelement hinzufügen und einige Kontaktinformationen über unseren Kunden hier schreiben. Wir könnten etwas wie setzen, Wenn Sie jemals brauchen, um einen Griff von mir, Sie können mich mit den Details unten kontaktieren oder etwas in dieser Richtung wurde perfekt funktioniert . Oder Sie können einfach sortieren fügen Sie jeden Text, den Sie jetzt mögen, nur um etwas dorthin zu setzen, damit Sie sehen können, wie es aussehen wird. Außer, dass wir hier tatsächlich einen zweiten Absatz erstellen werden. Und in unserem zweiten Absatz wollten wir tatsächlich die verschiedenen Wege einfügen, wie Menschen unseren Kunden erreichen können. Wir werden Dinge tun, wie unter einer Telefonnummer, unseren Kunden, unseren Kunden, böse Adresse, und wir könnten auch einige spezielle Markt zu diesen Elementen hinzufügen. Ich ging auch voran und steckte in unseren Kunden physische Adresse als auch. Denken Sie daran, dies ist nur gemacht haben Adresse, die ich im Internet gefunden und wir werden, dass nur für das Beispiel dieser Website verwenden . Als Nächstes werde ich einfügen. Unsere Kunden haben noch einmal eine Telefonnummer gemacht, weil ich möchte, dass diese verschiedenen Kontakt-Omen als separate Zeilen angezeigt werden. Wir müssen tatsächlich ein Absatzelement für jeden einzeln erstellen. Und last but not least, lassen Sie uns die E-Mail-Adresse unserer Kunden hinzufügen, nur für den Fall, wenn jemand unseren Kunden per E-Mail kontaktieren möchte . Was wir jetzt tun werden, ist, dass wir diesen verschiedenen Elementen einen besonderen Markt hinzufügen werden. HTML enthält einige Markierungen, die für bestimmte Dinge wie E-Mail-Adressen und Telefonnummern und physische Adressen hinzugefügt werden müssen. Also werde ich voran gehen und diese Tags zu den verschiedenen Kontaktmethoden hinzufügen, die wir zuvor erstellt haben. Gehen Sie weiter auf das Adresselement. Die andere, die wir hier hinzufügen werden, ist, dass wir tatsächlich einen Link zu unseren E-Mails hinzufügen, dass, wenn unser Kunde auf die E-Mail uns Schaltfläche klickt, es tatsächlich lieben wird, uns direkt zu mailen. So können wir dies tun, indem wir hier einen Link mit dem A treff erstellen und dann auch Mail setzen . Web master dot com oder was auch immer Ihre E-Mail-Adressen. Zum Beispiel würden Sie männlich zu jeder E-Mail-Adresse setzen, die Ihre E-Mail-Adresse ist wieder. Dies wird nur erfunden, als ich nur als Referenz erstellt habe. In Ordnung, also glaube ich, wir sind hier fertig. Lassen Sie uns Page genießen, öffnen Sie es und sehen, wie es aussieht. Also werde ich anfangen, den Index zu öffnen, auf unsere Kontaktseite zu gehen und cool. Wir konnten sehen, dass alles hier ziemlich ordentlich angezeigt wird. Wir haben unseren Link für unsere E-Mail-Adresse, und wir haben hier ein bisschen besondere Markierung für unsere Kontaktinformationen. Nun, es fehlt noch eine letzte Sache auf dieser Seite, und das ist das Foto unserer Kunden. Ich werde eigentlich ihr Profilbild und die Kontaktseiten machen. Nun, du könntest es einfach so lassen, wenn du willst, oder du kannst ein Foto hinzufügen. Es liegt ganz an dir. Aber ich gehe wieder rein und in unserem ersten Abschnitt werde ich unser Bild einfügen, das wir zuvor erstellt haben. Alles klar? Wir können hier sehen, dass unser Profilbild direkt hier angezeigt wird. Genau, wie ich gewonnen habe. Ich denke, das sieht ein bisschen besser aus. Fügt der Seite ein wenig mehr Persönlichkeit hinzu. Also denke ich, dass unsere Seiten bis jetzt ziemlich gut aussehen Wir werden tatsächlich unsere Kontaktseite für diese Website behalten . Sehr einfach. In den Punkt. In Ordnung. Großartiger Job. Wir haben noch eine weitere Seite, die auf unserer Website erstellt werden kann. 27. Erstellen einer Blogseite: Es ist jetzt an der Zeit, die Blawg-Seite für unsere Website zu erstellen. Lassen Sie uns also beginnen, indem Sie ein Textdokument erstellen und wir werden es als blawg dot html speichern . Da das der Name der Art Blawg Seite sein wird, können wir es tun. Diese alte Textdatei brauchen wir nicht mehr. Und was wir tun werden, ist, dass wir die Kontaktseite html greifen und wir werden alles kopieren und in eine blockierte Seite kleben und alles dort einfügen, und wir können alles löschen, was wir nicht brauchen. Wir behalten also unser Profilbild, würden aber diesen Absatz hier löschen. Ich werde auch alles in unserem zweiten Abschnitt Tag löschen, die wir hier haben, und dann werde ich einen Absatz erstellen und einige Beispieltext hinzufügen hier, damit wir sehen können, wie Text aussehen wird für unsere Blockbeiträge nicht gerade einen Block Post zu machen. Wir werden nur so tun, als hätten wir einen hier. Also sind wir nah an unseren Absätzen. In Ordnung, Nadal sieht ziemlich gut aus. Als nächstes werde ich diesem Abschnitt eine Klasse geben und ich werde ihm die Klasse der Blawg-Inhalte geben nur damit wir diese Abschnittsklasse hier anvisieren und stylen können und wir diesem Abschnitt Tag die Klasse der Sidebar geben . Da dieses Bild hier von unserem Kunden tatsächlich in die Seitenleiste auf der Blockseite gehen wird, werde ich hier auch ein Alter von drei Jahren hinzufügen, das sagen wird, dass ein sperriger Autor und das wird über das Profilbild in der Seitenleiste und rechts unten hier, werde ich dem Profilbild vor Gericht eine neue Klasse hinzufügen. Blawg-Profil Bild, da wir einzigartige Stile zu diesem Bild verwenden und wir werden nicht mit diesen stilisierten unter anderen Seiten zuletzt, lassen Sie uns eine jede drei für unsere Site-Seiten in unserer Sidebar erstellen. Und dann nehme ich unsere Liste hier aus unserer Navigation und kopiere sie und füge sie darunter ein. Also werden wir auch eine Liste unserer Seiten in der Seitenleiste haben. Alles klar, das sieht also ziemlich gut aus. Das nächste, was wir tun können, ist hier und an einem strafferen für Kunst Block Post. Ich werde ein h drei hinzufügen und dann nehmen wir einfach unseren Blawg Post Schwanz oder etwas Ähnliches in diesem Ausmaß. Das ist ein Beispiel. Und wieder, dies könnte in jedem zwei oder NH drei sein, was auch immer Sie bevorzugen. Als nächstes, Lassen Sie uns ihr Dokument geben, isi, und nur sehen, wie alles für jetzt aussieht. Öffnen Sie unseren Index klicken Sie auf ihre blockierte Seite. Und Sie können sehen, dass wir all diese verschiedenen Dinge hier haben. Wir haben hier unseren Titel „Kontaktieren Sie mich“, den wir tatsächlich loswerden müssen. Ich habe vergessen, das zu löschen. Also werde ich hier wieder in ihr HDL-Dokument gehen und diese H drei loswerden. Weiter oben in Stil sind blawg Bild hier. Wir werden dieses Bild in Flüssigkeit rechts von ihrer Seite nehmen und, ja, ja, Inhalte gehen irgendwie in die linke Ohrseite und du wirst sehen, was ich meine. Wenn wir das wirklich tun, machen wir das mit einem Schwimmer. Also gehen wir zurück in unser CSS. Und ich werde hier einen neuen Abschnitt machen, und ich werde es nennen, Style ist für unsere gehörende Seite. Und ich werde anfangen, indem ich unser Bild anvisiere. Ich überprüfe nur die Klasse. In Ordnung? So ist es blockiert Beweis, Proof log Profil Bild. Alles klar, es sorgt dafür, dass ich das richtig verstanden habe. Und wir werden ein paar andere Dinge mit diesem Bild machen. Das erste, was ich tun werde, ist tatsächlich alle ihre Profilbild-Einstellungen zu kopieren, so dass das Bild genau zeigt, wie es ist, wie wir vor dem Frieden haben, dass dort Weiter oben, werde ich einen Grenzradius hinzufügen, und ich werde es machen 100% Was das hier ist, wird unser Bild um sich herum machen, um die Grenze ihres Bildes herum zu machen. So wie wir genießen Seite sehen Sie, können wir nicht diesen gerundeten Bild-Effekt jetzt haben, was irgendwie cool ist, und wir können die Art und Weise ändern, dass der Grenzradius angezeigt wird, indem Sie den Prozentwert ändern, wir können unter 100% gehen und ich werde machen es mehr von einem Quadrat. Aber 100% ist ein kompletter Kreis insgesamt. Als nächstes wollen wir unsere Sidebar unbekannte geordnete Listenelemente anvisieren, und wir werden hier tun, ist eine Textdekoration, und ich werde die Tech-Dekoration auf keine setzen. Also werden wir die kleinen Kugelpunkte loswerden , ,die dort auftauchen, du musst das eigentlich zu den Links, Links, Stilen machen Links, Links, Links , Tatum verflechten. Ich werde auch einen Listenstil von keinem hinzufügen. Und ich werde eigentlich Änderungen vornehmen, um nur unseren Listeneintrag anzusprechen, denn das könnte ein bisschen besser funktionieren . In Ordnung, also das ist gon, sind beide Punkte weg. Unsere Links sind immer noch zugrunde, aber ich denke, das ist okay. Wir können sie so lassen. Das macht ein bisschen Sinn, besonders wenn es in der Sidebar ist. Werde das los. Textildekoration entspricht keiner. Okay, das ist gut. Das funktioniert und sieht ziemlich gut aus. Als nächstes erstellen wir eine CSS-Deklaration, die unsere Sidebar auf Lee ausrichten wird. Und wir werden ein neues Kommando treffen, und wir werden es schweben nennen. Wir werden schweben, oder? Und was das tun wird, wird es unseren Cyber nehmen und auf der rechten Seite des Inhalts schweben, und Sie werden das in nur einer Sekunde sehen, damit wir unsere Sidebar sehen können. Div hier ist jetzt auf der rechten Seite der Seite schwebt. Jetzt müssen wir ein paar Ränder setzen und den Text hier korrigieren. Aber wieder, man kann irgendwie sehen, wie es hier auf der rechten Seite schwebt. Dies liegt an der CSS-Float-Eigenschaft. Und wie ich schon sagte, wir gaben ihm einen Wert von Recht. Also lasst uns ein wenig Styling für unsere Sidebar machen. Lassen Sie uns ihre Seite greifen, wo jeder Dreier und lassen Sie uns den Text an der Mitte der Seite ausrichten , die es ein wenig besser aussehen sollte. Schauen wir uns mal an, Dario. Das sieht etwas besser aus. Aber wir müssen auch den Listeneintrag hier erhalten, um auch entstanden. Also lasst uns das machen. Wir gehen in unsere Wir würden eigentlich nur unsere Sidebar anvisieren, und da gehen wir. Das funktioniert auch. Sie sehen hier, dass wir ein wenig von einem eingerückten hier von unseren Listenelementen bekommen haben, und das könnte von Padding oder Rand von den Listenelementen in sich selbst sein. Aber bevor wir uns damit befassen, lassen Sie uns unserem Cyber Tietz etwas Raum hinzufügen und unseren Text Atemraum geben. Wir geben ihm eine Marge oben von 0% und wir gehen mit links und rechts von 5% und das sollte die Seite ein wenig bereinigen. Ariel, wir haben jetzt etwas Atemraum zu unserer SMS-Krankenschwester Sidebar. Es sieht ziemlich gut aus. Lassen Sie uns die Größe des Fensters verkleinern und sehen, wie es aussieht. Wir können sehen, dass die kleineren Standpunkte hier, einige der Texas schwer zu lesen, es sieht ein wenig albern aus, aber wir werden tatsächlich Medienabfragen im nächsten Abschnitt verwenden, um das zu beheben. Also ist es vorerst in Ordnung. Wir können es so lassen, wie es ist, aber insgesamt sieht es ziemlich gut aus. Aber ich werde auch versuchen, es auf 10% zu erhöhen, nur um zu sehen, wie es aussieht. Mal sehen, wie das aussieht. Okay, also ist es ein bisschen mehr Platz, der im Brower etwas besser aussieht. Warum gefällt dir der zusätzliche Platz hier? Also werden wir es vielleicht so behalten. Also ich denke, sind blockierte Seiten ziemlich gut zu gehen. Gut gemacht. Wir haben nun die Gestaltung aller Seiten für unsere Website abgeschlossen 28. Erstellen unserer Portfolio-Seite: Es ist jetzt an der Zeit, unsere Portfolio-Seite für unsere Website zu erstellen. Also werden wir es genau so tun, wie die anderen Seiten unser Dokument erstellen, dann speichern Sie es als Portfolio dot html und unsere Portfolio-Seite ist ziemlich bereits für eine Website getan . Es ist eigentlich die Homepage, eine KR-Indexseite für eine Website. Also alles, was wir wirklich tun müssen, ist hier die Indexseite zu gehen. Kopieren Sie den gesamten Code weiter auf der nächsten Seite und fügen Sie ihn in unsere neu erstellte Portfolio-Seite unserer Website ein. Also werde ich das jetzt tun. Hier. Ich werde das Dokument speichern. Und jetzt, wenn wir Index dot html öffnen, haben wir jetzt unsere Portfolio-Seite. Aber natürlich ist es die gleiche Seite. Gibt es auf der nächsten Seite, weil wir den ganzen Text kopiert haben? Ich werde tatsächlich unsere Blawg-Seite nehmen und sie als Indexseite für unsere Website verwenden. Also, was ich hier tun muss, ist zurück zu gehen. Ich öffne unsere Blockseite, kopiere nur HTML in unsere Blutseite und füge sie dann in unsere Indexpunkt-HTML-Seite ein. Wir können all diesen Code hier in unserer Block-Seite Tempo löschen, geben Sie unsere Website zu speichern und öffnen Sie dann html agan Index, dass h e-Mail und wir konnten unsere Blutseiten sehen , die jetzt auf der Homepage angezeigt werden. Wir haben unsere über Seite sind gesperrt Seite Kontakt und Portfolio. Also sind wir nicht fertig, alle Seiten, die wir brauchen, auf unserer Website hinzuzufügen. Es ist Zeit, weiterzumachen und beginnen Sie mit dem Styling und Fertigstellung unserer Websiteseiten. 29. Füge deiner Portfolio-Seite ein Raster hinzu: es ist an der Zeit, einige wirklich große Änderungen an unserer Website vorzunehmen. In dieser Lektion. Sie wollten lernen, wie Sie Medienabfragen verwenden, um Bruchpunkte zu Ihrer Website hinzuzufügen , damit unsere Website auf allen mobilen und Desktop-Geräten gut aussieht. Medienabfragen ermöglichen es Ihnen, benutzerdefinierte CSS zu Ihrer Seite hinzuzufügen, die nur Ihre Seite angewendet wird wenn Ihr Browser ist, dass eine bestimmte mit wann immer Sie Adamia Karriere, wo ich einen Breakpoint brauche . Lassen Sie uns voran gehen und Luft Einfügen sofortige Abfrage Inter CSS. Ich werde es austippen und dann erklären, was das alles bedeutet. Zuerst aus dem Medien-Bildschirm wird dem Browser mitgeteilt, dass wir auf Mediengeräte ausgerichtet sind die die Waffen anzeigen. Als nächstes haben wir das Schlüsselwort und unser Minimum mit 600 Pixeln. Schließlich haben wir eine Klammer, in der unsere Zollverwendungen für die CSS-Regel gelten. Als Nächstes werde ich unser Portfolio anvisieren. Ich d hier und wir werden die neue CSS-Eigenschaft verwenden, die ein Float genannt wird. Also, was wir hier tun werden, ist, dass wir schweben, vor Ihren Listeneinträgen auf der linken Seite sind, und wir geben ihnen A mit jeweils 45%. Ich werde auch eine Marge von 2,5% ringsum hinzufügen. Lassen Sie uns unsere CSS-Datei speichern und sehen, wie dies tatsächlich im Browser aussieht. Wenn wir unsere Index-Seite hier bringen, navigieren wir. Lasst uns das groß machen. zunächst Navigieren Siezunächstzu Pro Folio. können wir auf einem größeren Display sehen. Unsere Bilder werden nun nebeneinander angezeigt. Und wenn wir die Größe des Bildschirms reduzieren, dann verlieren sie diese Float-Eigenschaft. Erinnerst du dich an unsere Medienanfrage, die wir erstellt Solange unser Bildschirm größer als 480 Pixel ist, wird diese CSS-Float-Eigenschaft auf ihre Bilder angewendet werden. Und sie waren Anziehungskraft Seite an Seite. Ziemlich cool. Nun, weil unser Fußzeilenelement mit ihren Bildern schwebt, müssen wir ihm tatsächlich eine spezielle Eigenschaft hinzufügen, um zu verhindern, dass es schwebt, wir werden klar, und wir werden setzen, geben ihm den Wert von beiden. Was das also tun wird, ist, dass das jetzt unsere Fußzeile dorthin zurückgeht, wo sie normalerweise ist und nicht wieder mit allem anderen schweben wird. Lassen Sie uns die Größe von ihr erhöhen, welche Seite es ist. Wir können sicherstellen, dass auf größeren Displays alles gut aussieht. Alles klar, es sieht ziemlich gut aus. Aber sagen wir zum Beispiel, was wäre, wenn er dies tatsächlich in einem dreispaltigen Layout erstellen wollte? Wenn wir auf die erweiterte Desktop-Ansicht zu bekommen? Nun, das könnten wir auch mit Medien-Queers machen. Gehen wir zurück in unser CSS und lassen Sie uns eine weitere Medienabfrage für größere Bildschirme erstellen, die unseren Code kopieren, den wir vorher hatten. Aber anstatt es 600 Pixel zu haben, werde ich 900 Pixel haben. Und was wir tun müssen, ist, dass wir ein mit finden, mit dem unsere Bilder drei auf der Seite erscheinen können. Lassen Sie uns 25% versuchen und sehen, wie das schoner aussieht, Webseite und öffnen Sie es wieder. Aktualisieren und erweitern Sie ihre Anzeige. Und das sieht nicht so schlimm aus. Ich denke, wir könnten diese Bilder jedoch ein bisschen größer machen . Lassen Sie uns etwas an diesem Ende von 28% versuchen und sehen, ob das ihre Bilder einfach perfekt passen . Alles klar, das sieht viel besser aus. Also wieder, lassen Sie uns unsere Website hier und schauen wir uns es in der erweiterten Ansicht können wir sehen, dass unser Bild oder einfach nur ziemlich gut hier in einem dreispaltigen Layout angezeigt werden. Uns fehlt ein Bild hier unten, rechts, rechts, und wir werden tatsächlich ein weiteres Bild hinzufügen, um das ein bisschen besser aussehen zu lassen. Aber ich schätze, wir verlängerten. Es sieht wirklich ziemlich gut aus, und wenn wir es verkleinern, können wir sehen, dass eine Website auf das 2-Spalten-Layout wechselt, und wenn sie dann zu unserer letzten Besprechungsabfrage kommt, wird es auf die mobile Versionsansicht über die Website . Durch die Verwendung von Medienabfragen können wir wirklich eine responsive Website erstellen, die auf allen Desktop- und Mobilgeräten gut aussieht . 30. Abschließende Anpassungen auf unserer Seite: In Ordnung. Also ist es jetzt an der Zeit, alle letzten Änderungen abzuschließen, die wir jetztauf unserer Seite machen , die wir jetzt Ich werde mich im nächsten Jahr öffnen und schauen wir uns unsere über Seite an. So ist unsere über Seite fast fertig. Tun Sie alles, was ich wirklich tun möchte, ist, dass ich dieses Bild hier und unsere kleine Textur mit dem Namen unserer Kunden schweben möchte. Und als ich nach rechts schwebte, irgendwie wie wir in unserer Blockseite machen wie eine Sidebar-Festung. Um das zu tun, müssen wir in unsere erste gehen lassen wir jedes Team für eine Boot-Seite öffnen, und dann werden wir dieses CSS auch für unsere über Seite öffnen. Und das erste, was wir tun könnten, ist, dass wir in unseren HTML gehen und wir werden unser Bild hier in einem Absatz packen , und ich werde es hier oben kleben, damit wenn wir es schweben, es richtig schweben wird, Art wie wir es auf unserer Blockseite gemacht haben, und ich werde einen separaten Abschnitt dafür erstellen. Und da haben wir bereits eine Sidebar für eine Website erstellt, mit der wir auf unserer Blockseite stylen können. Wir können tatsächlich voran gehen und diese Cyber-Klasse zu diesem neuen Abschnittelement und all dem Styling, das wir bereits für eine Sidebar gemacht haben, hinzufügen . Es würde angewendet werden. So ist die meiste Arbeit schon hier für uns erledigt. Also lasst uns dieses Peaster-Bild in ihrem Absatz öffnen. Und wenn alles richtig funktioniert, wenn wir das sagen und dann, wenn Sie eine Webseite sind, sollten wir unseren Cyber richtig funktionieren lassen und da gehen wir. Alles sieht ziemlich gut aus. So sieht die finale Desktop-Version ihrer Bo Seite ziemlich gut aus. Aber schauen wir uns die mobile Version an. Wir können sehen, dass wir genau das gleiche Problem haben wir vor, wo, wenn Sie mobile Jungfrauen wie diese senken, die Texas Art der Suche ein wenig seltsam um das Bild. Also, was wir hier tun werden, ist, wenn unser Bild tatsächlich zu einem Tiefpunkt kommt, werden wir diesen Schwimmer entfernen. Wir werden sagen, dass keine Flüssigkeit hinzugefügt wird, also wird es einfach so stapeln, wie es aussah. Jeder Drahtrahmen für unser Handy zu entwerfen. So können Sie zu unseren Medienabfragen navigieren. Und ich werde uns für Medienanfragen für Seiten ändern, da wir sie tatsächlich für unsere Seiten auf unserer Website verwenden werden . Und ich werde, was ich hier tun werde, ist, dass ich unser Image anvisiere. Gehen wir also zurück in mein HTML, damit ich sehen kann, wie die Klasse heißt. Kids Sidebar im Klassenprofilbild OK, und ich denke, der einfachste Weg, dies zu tun, wird sein, unsere Sidebar float CSS-Eigenschaft zu greifen und nur in eine Medienabfrage hier eingefügt. Eigentlich gehe ich hier rauf und kopiere es und schneide es hier raus. Also, was wird das tun? Wird dies diese Seite hinzufügen, wo Float auf Leigh Winner Seite ist ein Minimum mit 600 Pixel. Also, wenn unsere Seiten größer als 600 Pixel angesehen werden, würden die Fuß angewendet werden. Aber wenn die Seiten weniger als 600 Pixel, wird es nicht angewendet werden, wie wir hier sehen können. Also lassen Sie uns ziemlich gut aussehen, aber unsere Bilder sind nicht mehr zentriert, also müssen wir das wirklich schnell beheben. Hier. Gehen wir zurück zu unserem Blawg-Profilbild und geben wir es und Rand links und rechts von Auto in einem oberen und unteren Rand von fünf Pixeln. Das sollte also diesen zusätzlichen Platz ausfüllen und unser Bild zentrieren und das sieht ziemlich gut aus. Als Nächstes können wir hier sehen, dass es um mich geht. Titel muss auf ihrer Seite in der mobilen Ansicht gesendet werden. Also lassen Sie uns Text ausrichten diese auf Center Saver Webseite. Und da gehen wir hin. Das ist jetzt in der Mitte, und ich mag es, dass es viel besser aussieht. Lassen Sie uns überprüfen, um zu sehen, wie es auf dem Desktop aussieht, und das sieht ziemlich gut aus. Das einzige, was ich tun möchte, ist eigentlich wollte Änderungen über mich h drei nicht auf dem Desktop entstanden gesendet werden . Also noch einmal, um dies zu tun, lassen Sie uns R H drei kopieren. Gehen wir runter zu Sofortige Abfrage. Wir wählen unsere erste Medienabfrage aus und wir werden diesen Code hier einschlagen, und der Unterschied, den wir hier machen werden, ist, anstatt die H 3 in dieser Mitte auszurichten,werden dieser Mitte auszurichten, wir das nach links ändern, so dass es tatsächlich Text es links von der Seite ausrichten wird. Gehen wir nach links, und das sollte funktionieren, ist das wollten wir. In Ordnung, gib ihm einen Safe. Und wenn wir zur Desktop-Version gehen, können wir jetzt sehen, dass sie links von der Seite ausgerichtet ist. Das sieht ziemlich gut aus. In Ordnung. Also denke ich, dass unsere Übersichtsseite für unsere Website jetzt komplett ist. Herzlichen Glückwunsch. Wir sind fast fertig mit der Gestaltung unserer Website. Wir haben nur noch ein paar Seiten, um fertig zu werden. 31. Abschließende Anpassungen an unseren Kopf- und Fußzeilenbereich: Alles klar, alle. Es ist also an der Zeit, einige endgültige Anpassungen an unserer Kopf- und Fußzeile auf unserer Website, unserer Website, vorzunehmen. Es ist ziemlich vollständig, aber es gibt ein paar kleine Dinge, die ich hier reparieren möchte. Das erste, was für unseren Header ist, dass ich Ihnen einige der Listenelemente und inter fitter vertrauen möchte . Ich möchte ein wenig mehr Platz hinzufügen und ich möchte dem Text in ihrer Fußzeile etwas Styling hinzufügen . Wenn Sie sich jetzt einen Blogger ansehen, können wir sehen, dass diese Listenelemente und sie oben sind ein bisschen nah beieinander. Lasst uns das ändern. Was wir tun werden, ist ein bisschen mehr Abstand hinzuzufügen. Also in Ihrem Handy zeigen sie ein bisschen anders. Gehen wir also zu unseren Listenelementen hier und lassen Sie uns diesen Rand 40 Pixel auf 50 Pixel verketten und sehen, wie das aussieht. In Ordnung. Also hör mal, die Listenzeiten waren etwas mehr verteilt, aber lass uns noch weiter gehen. Versuchen wir es mit 70 Pixeln, , also können wir ihre Listenelemente sehen und jetzt irgendwie hier so gestapelt. Und ich denke, das sieht viel besser aus. Dann, als wir ihre Seite rausziehen, antworteten unsere Desktop-Styles, also mag ich das etwas besser, und ich denke, wir werden es jetzt so behalten. Und ich denke, das sind all die Änderungen, die ich vorerst an ihrem Header vornehmen möchte. Als nächstes gehen wir zu unserer Fußzeile und Inter Fußzeile. Ich möchte ein wenig mehr Platz zwischen unseren sozialen Symbolen und unserem Text auf unserer Seite hinzufügen. Es ist ein wenig zusammengequetscht, so wie wir das tun werden, ist, dass wir unserer Fußzeile einen Rand oben hinzufügen, und das sollte genug Platz für unsere Social-Media-Symbole schaffen. Lassen Sie uns jetzt 50 Pixel ausprobieren, und ja, wir können sehen, dass wir jetzt viel mehr Platz haben und das sieht besser aus. So frei. Zoomen Sie auf der Desktop-Ansicht viel mehr Platz, und unsere Kopf- und Fußzeile sehen jetzt viel besser aus. Last but not least, lassen Sie uns den Absatztext ihrer Fußzeile stylen, Lasst uns unsere Fußzeile nehmen sind Absatztext, und wir werden einige Betonung auf unseren Fuß oder Text auf unserer Website genau hier auf der Birdie unten. Also ist es bei einer Font Style-Eigenschaft und lassen Sie uns ihm den Wert metallisch geben, der unseren Fuß oder Text etwas hervorhebt. Mal sehen, ob das funktioniert und wir gehen. Jetzt können wir sehen, dass es ein wenig anders als Ihr Absatztext gestylt ist, und es steht auf. So sind eine Kopf- und Fußzeile aufgeräumt, und alles sieht gut aus sowohl auf unserem Desktop als auch auf einer der AH mobilen Version unserer Website. Unsere Website ist fast vollständig. Wir haben noch zwei Seiten vor uns und wir werden dieses Projekt komplett erledigen. 32. Verfeinern unserer Portfolio-Seite: für unsere Portfolioseite. Die einzige Änderung, die wir wirklich machen müssen, ist das Hinzufügen dieses zusätzlichen Bildes, um diesen leeren Raum zu füllen . Wir haben so wieder unten die Dateien für diese Lektion, so können Sie das Bild bekommen oder Sie können Ihre eigenen hinzufügen. Aber wir werden ein Bild hier kleben und irgendwie diese Portfolio-Seite reparieren. Also lasst uns schnappen. In diesem Jahr werden wir das Listenelement kopieren und hier einfügen, und ich habe die Namen bereits geändert. Also müssen wir immer tun, ist Bild sechs Go Bild sechs Jahr setzen, und alles sollte korrekt funktionieren. Lassen Sie uns das Dateiportfolio öffnen und wir könnten sehen, unser Bild hier ist jetzt gut zu gehen, und das sieht ziemlich gut aus. Wenn wir die Größe unserer Was Seite ändern, können wir sehen, dass unser Portfolio ziemlich korrekt auf dem mobilen Tablet und Desktop-Ansicht , so dass jeder hier ziemlich gut aussieht. Anders als in der Art, wie es bisher aussieht , ist es für eine Portfolio-Seite, es ist Zeit, die letzte Seite für eine Website zu beenden, die die Blockseite ist 33. Finde einen Domain-Namen: in dieser Lektion erstellen Sie Ihren Domain-Namen live im Internet. Aber vor allem, bevor eine Website extra online wird, müssen wir einen Domain-Namen kaufen. Aber was ist der Domain-Name? Nun, der Domain-Name ist im Grunde die U-URL oder Adresse Ihrer Website. Nehmen Sie zum Beispiel Google . W w dot google dot com ist Googles verbleibende gleiche mit Twitter. Hier können wir sehen, dass Twitter der Domain-Name der Website www dot twitter dot com ist. Ein weiteres Beispiel ist mein persönlicher Block. Wir haben www dot Robyn und haney dot com. Dies ist ein Domain-Name meiner Website. Also, um Domain-Namen zu erhalten, müssen wir zuerst zu einem Domain-Name-Provider gehen. Es gibt viele Anbieter da draußen, aber ich werde mitgehen, Daddy, da ich ihre Schnittstelle mag und ich Erfahrung mit Daddy, ihnen hatte, also das erste, was wir hier tun können, ist die Suche nach Domain-Namen. Sie möchten keinen Domainnamen auswählen, der etwas mit Ihrer Website zu tun hat. beispielsweise Wenn Siebeispielsweiseein Portfolio oder einen Block erstellen, sollten Sie vielleicht Ihren Namen verwenden oder wenn Sie einen Namen für Ihre Marke haben, können Sie diesen auch verwenden. Wir werden für die One-Stop-Shop suchen ist eigentlich der Name unserer Website, und wir können hier sehen, dass der Name bereits genommen wird und dies in der Regel passiert eine Menge, vor allem, wenn es ein Domain-Name ist beliebt in unserem Fall. Da ich eigentlich aus Kanada bin, ist unser Klient Billy bemerkenswert für ihren weiteren Salon, dann in unseren Schlüsseln mit dem Erweiterungspunkt C A macht Sinn, weil sie nicht einen globalen Markt retargeting. Im Allgemeinen, wenn Sie global vermarktet sind, möchten Sie für einen Punkt com gehen. Aber wenn es ein Einheimischer sein wird, wie es unser Klient ist, und in diesem Fall können wir für einen Punkt c acht tatsächlich. Also in unserem Fall, ich denke, wir werden einen Punkt C A holen also wird es dieses Kästchen hier ankreuzen, und wir werden weiter zu unserem Kurt. Alles klar, also geh. Daddy wird versuchen, dir andere Dinge mit deinem Domainnamen zu verkaufen, und wir überspringen all das Zeug. Wir wollen gar nichts. Wir wollen nur einen Domain-Namen und weiter oben. Wir müssen unsere Kontoinformationen eingeben, also habe ich tatsächlich ein Konto. Also werde ich mich hier einloggen, und nachdem ich mich eingeloggt habe, werde ich dich auf dem nächsten Bildschirm treffen. In Ordnung? So viel auf mein Konto. Je nach Domain, die Sie auswählen, müssen Sie möglicherweise eine Vereinbarung unterzeichnen. Also werde ich nur dieses Kästchen hier ankreuzen, gehen, um weiter zu überprüfen. Und ich habe einige Erfahrung Mittel, aber würde das einfach überspringen. Und hier haben wir unseren Bildschirm für unseren Check-out. Jetzt können Sie auswählen, wie viele Jahre Sie für Ihren Domain-Namen wünschen. Ich werde nur ein Jahr in unserem Fall aussuchen, aber es liegt an dir. Es ist in der Regel etwa 10 bis 11$ ungefähr pro Jahr, abhängig davon, welche Domain-Namenserweiterung Sie gehen. Und stellen Sie sicher, dass keines der Sachen am Boden überprüft wird, da dies zusätzliche Sachen ist, Sie nicht essen. Also denke ich, ich bin ziemlich gut zu gehen. Ich werde zur Kasse gehen und Sie können Ihre Zahlungsmethode auswählen. Und nachdem Sie all dies getan haben, können Sie mich in der nächsten Lektion treffen und wir werden weiter mit der Auswahl Hosting Paket für eine Website. Wenn du auch magst, kannst du ein Hosting-Konto von Go Daddy auswählen, was heißt, ich werde einen Schwung machen, aber, ähm, ja, ja, melde dich einfach an. Sie erhalten Ihre Domain für jetzt eingerichtet, und nachdem Sie dies getan haben, können wir mit dem nächsten Schritt fortfahren. 34. Finde einen Web-Host für deinen Domain-Namen: In Ordnung. Also haben wir unseren Domain-Namen gekauft. Es ist jetzt an der Zeit, für Hosting Konto einzurichten. Jetzt stellen wir auch Daddy einen Hosting-Mantel auf. Da wir bereits eine Domain-Namen es oben haben, ist dies einfacher, alles an einem Ort zu haben. Also sind wir jetzt auf einer Go Daddy Homepage. Wir gehen zum Hosting. Wir werden auf Web-Hosting klicken. Wir werden hier loslegen und jetzt haben wir unsere Pakete für ein Hosting-Pläne. Die beiden Pläne waren interessiert ist unsere Wirtschaft und Deluxe. Der Unterschied ist $1 pro Monat und eine andere Der Hauptunterschied zwischen den beiden Paketen mit der Wirtschaft gesetzt, können Sie eine Website hosten, aber mit der Deluxe, können Sie unbegrenzte Websites hosten. Also gehen wir einfach zum Deluxe, weil es bei weitem der bessere Deal ist. Und es spielt keine Rolle, welche du willst. Wenn Sie gehen, um eine Menge von Websites online als Web-Entwickler zu bauen, Ich würde sagen, gehen Sie mit deluxe, Aber Sie könnten immer aktualisieren Sie es jederzeit, So ist es keine große Sache. Als Nächstes wählen wir unsere Termlänge aus und wir werden nur einen Monat abholen. Du sagst Geld. Wenn Sie mehr Monate auswählen. Wenn Sie also wissen, dass Sie diesen Domain-Namen und sein Host-Konto für ein Jahr haben und Sie es sich leisten können, alles auf einmal zu bezahlen, dann gehen Sie 12 Monate. Aber wenn Sie sich nicht sicher sind, können Sie immer von Monat zu Monat gehen. Es ist nicht so teuer, wirklich. Das ist das zusätzliche Zeug, das wir nicht wollen. Es wird also weitergehen, und wir haben unsere Checkered hier und wieder. Du willst sicherstellen, dass du hier nichts anderes eingerichtet hast. Ich möchte nur gehen, um den Check-out zu überprüfen. Und wir können es fühlen Informationen hier und dann spielen. Sortierreihenfolge Und wir sind alle gut zu gehen. Sobald Sie also Ihr Hosting-Konto eingerichtet haben, treffen Sie mich in der nächsten Lektion. Wir verbinden unseren Domain-Namen mit unserem Hosting-Konto auf Go Daddy 35. Verbinde deinen Domain-Namen mit deinem Hosting: Es ist jetzt an der Zeit, unser Hosting in unserem Domain-Namen miteinander zu verbinden. Gehen wir zu unserem Go Daddy-Konto und besuchen wir unser Account-Dashboard in unserem Domain-Bereich . Navigieren wir zu der Domain, die Sie gekauft haben. Lassen Sie uns unsere Domain-Einstellungen in unseren Domain-Einstellungen öffnen. Lasst uns anklicken. Verwenden Sie meine Domain hier waren tatsächlich dabei, eine neue Website darauf zu bauen. Lassen Sie uns diese Option direkt hier und jetzt klicken. Was wir tun können, ist, dass wir Go Daddys Website Builder verwenden können. Aber da wir bereits gekauft Hosting, wir können auf dieses Hosting Tad hier klicken, und wir werden auf diesen Link klicken, der sagt, verwenden Sie es mit Ihrer Domain, weil wir bereits besitzen Hosting. Nun, das ist unser Hosting-Konto für einen Go Daddy. Also lassen Sie uns gehen, um hier zu verwalten, und das wird unser C-Panel aufzeigen. Nun, wenn Sie Ihre Domain und Hosting-Konto auf einmal gekauft und Papa gehen, dann sollte es bereits verbunden sein, und Sie sollten gut zu gehen sein. Aber um uns willen müssen wir die beiden miteinander verbinden, weil sie getrennt sind. Also, was ist los? Fügen Sie die Mittel hinzu, die wir hier tun werden, ist, dass wir oder zu mir hinzufügen. Also werde ich unseren Domainnamen hier draußen eingeben. Ein Anschlag Chop Shop, und wir müssen ihre Erweiterung Punkt c. Wir klickten hier unten, und diese Einstellungen werden automatisch gefüllt werden. Also alles hier ist gut zu gehen. Ein Schnee klicken Sie auf Domäne hinzufügen. Alles klar, cool. Also, Adam Domain ist jetzt in unserem C-Panel erstellt, so dass alles gut zu gehen ist. Das nächste, was wir tun müssen, ist, dass wir in unsere Domain gehen müssen in Punkt unsere Nameserver auf ihrem Hosting-Konto. Nun, was in der Regel passiert, ist, wenn Sie für ein Web-Hosting-Konto senden, werden Sie eine willkommen. Eine E-Mail, die Ihre Nameserver für Ihr Hosting-Konto in unserem Fall bereits auflisten wird. Wissen Sie, was mein Go Daddy Hosting-Name-Server sind. Aber wenn Sie gerade ein Hosting-Konto gekauft haben, dann überprüfen Sie Ihre E-Mail für Ihre Nameserver-Informationen . Also gehe ich zurück in mein Dashboard und klicke auf Domains, die ich zu meiner Domain navigiere und klicke auf Managed DNS , kurz gesagt Domain-Name-Server. Lassen Sie uns hier nach unten gehen und klicken Sie auf den Namen Server verwalten Button rechts hier. Jetzt habe ich meine ungespeicherte in einem No-Pad. Also werde ich sie einfach kopieren und nochmals einfügen. Überprüfen Sie Ihre E-Mail nach Ihren Nameservern. Wenn Sie nicht finden, Ihre Name-Server in Stimmung E-Mail zu unterstützen bei jedem Hosting-Konto Sie mit und sie werden höchstwahrscheinlich erhalten Sie Ihren Domain-Server gesendet Sie in kürzester Zeit überhaupt . Alles klar, also ist alles gut, hier zu gehen, und wir können schlagen, alles retten. Es sollte gut sein, jetzt zu gehen. Es dauert einige Zeit, bis Ihre Nameserver sich im Internet zu verbreiten und irgendwie sich selbst einzurichten und was nicht. Es kann also ein paar Stunden dauern, oder es könnte sofort passieren. Es hängt wirklich davon ab. Was wir aber in der Zwischenzeit tun können, ist, unsere Dateien auf unsere Website hochzuladen. Lassen Sie uns zurück zu unserem C-Panel-Konto navigieren und was wir tun werden Wenn sie gehen, um nach oben scrollen und klicken Sie auf Datei-Manager, werden wir unseren Namen wählen, werfen Domain-Namen und stellen Sie sicher, dass Sie öffentliche FTP-Route als auch klicken. Und wir gehen mit unserem Domain-Namen in der Liste. hier Klicken Siehierauf Go und als nächstes werden wir öffentliche HTML hier treffen, und ich navigiere einfach zurück zu einem Domain-Namen, nur um sicherzustellen, dass wir auf der rechten Seite sind. Okay, also sind wir gut, hierher zu gehen. Jetzt können wir eine Website Dateien hier hochladen, und sie werden auf einer Website angezeigt, wenn Menschen unsere Website besuchen. Also gehen wir zurück zu ihrem Desktop. Lasst uns unsere Website aufgreifen. Was wir hier tun werden ist, ich werde nur die letzte Lektion finden, in der wir tatsächlich eine fertige Version über eine Website haben , und ich werde hier nur überprüfen, um sicherzustellen, dass eine Website tatsächlich die komplette Version ist . In Ordnung. Sieht so aus, als wäre dieser gut zu gehen. Also werde ich tun, ist, alle diese Akten zu kopieren, oder? Klicken Sie auf sie und ich werde auf Senden an komprimierten Zip-Ordner klicken. Das wird unsere Dateien nehmen und sie in einem Ordner speichern, den wir auf unsere Website hochladen können . Alle, nachdem es hier fertig ist, werde ich unseren neuen Ordner haben und ich werde es Index nennen. Eigentlich nennen wir es „One Stop Chop Shop“, nur damit ich genau weiß, was es ist. Okay, also unsere Ordner hier jetzt, gehen wir zurück zu ihrem Hosting-Konto und drücken Upload. Wählen Sie ihre Datei aus. Finden Sie hier das Richtige und laden Sie unsere Datei auf unsere Website hoch. Dies wird eine Weile dauern, abhängig von Ihrer Upload-Geschwindigkeit. Aber wenn Sie fertig sind, Hochladen treffen Sie mich hier zurück und ich werde mit dieser Lektion fortfahren. Ok? Also, wo eine Website hier fast vollständig ist, warten wir noch ein paar Sekunden, bis sie fertig ist. Nein, gehen wir zurück und lassen Sie uns diese Seite aktualisieren. Und jetzt kann ich sehen, sind ZIP-Dateien hier. Lassen Sie uns richtig. Klicken Sie darauf und gehen Sie extrahieren. Es wird alle Dateien wieder in unser öffentliches HTML extrahieren. Sie zuerst die Seite, und hier können wir unsere Website-Dateien sehen hier über dot html oder blawg kontaktiert sogar die Index-Seite und Portfolio-Seite. Also, wenn jemand eine Website besucht, waren sie cr Index Punkt HTML-Seite. Nun, unser DNS ist noch nicht eingerichtet, also warte ich ein paar Stunden, und dann komme ich zurück und wir werden sehen, ob alles gut zu gehen ist. Also beschloss ich, einen ganzen Tag zu warten, da ich ein paar Erben mit ihrem Dekan bekam und es dauerte wirklich lange, bis eine Website auftauchte. Normalerweise dauert es Minuten. Aber nur damit du es weißt, kann es eine Weile dauern. Also gib ihm vielleicht einen Tag oder so. Ähm, aber jetzt wollen wir versuchen oder Ihre eigenen Sehen, ob unsere Website funktioniert, gehen Sie zu einem Stopp Chop Shop und denken Sie daran, wir sind Punkt c A. Wir müssen sicherstellen, dass Sie Punkt c en voila setzen. Wir sind jetzt live im Internet, und unsere Website funktioniert jetzt. Immer wenn jemand den Euro eingibt, wird er zum Index, der HTML-Seite, weitergeleitet. Und denken Sie daran, es ist immer der Index Punkt html a k a. Die Homepage, die die Menschen auf den Klick auf unsere einzelnen Seiten gebracht wurden. Sie können sehen, ob sie jetzt perfekt funktionieren. Ich musste tatsächlich wieder in unser Hosting-Konto gehen und ich musste unsere Seite ändern, ähm, Namen in ah, Höhere Großbuchstaben, denn als ich aus irgendeinem Grund hochgeladen habe, sie in Kleinbuchstaben hochgeladen. Also, wenn Sie auf Ihre Seiten klicken und Sie erhalten wie ein Fehler, einige denken, dass gehen Sie zurück zu Ihrem Hosting-Konto oder gehen Sie in Ihr HTML-Dokument und ändern Sie einfach Ihre über Punkt h E-Mail Ihre gebloggt html toe ein Kleinbuchstaben oder was auch immer Sie sind Verknüpfen von zwei. Und es wird dieses Problem beheben, das ich früher hatte. Aber wir können hier sehen, dass alles einwandfrei funktioniert. Und eine Webseite. Überprüfen Sie alle Links hier, um sicherzustellen, dass. Ja, alles ist gut zu gehen. Unsere Website ist jetzt live auf Einheit. Herzlichen Glückwunsch. Sie haben gerade Ihre erste Website erstellt und diesen Kurs auch abgeschlossen.