Schnelles und einfaches Webdesign Websites von Grund auf neu erstellen | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


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

Schnelles und einfaches Webdesign Websites von Grund auf neu erstellen

teacher avatar Laurence Svekis, Best Selling Course 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

22 Einheiten (2 Std. 6 Min.)
    • 1. Schnelles und einfaches Webdesign Websites von Grund auf neu erstellen

      1:46
    • 2. 1 Website von der Einführung von Grund auf

      2:11
    • 3. 2 Kurs Ressourcen Webdesign

      5:05
    • 4. 3 Website Planung von Drahtrahmen

      6:49
    • 5. 4 Erstellen von übergeordneten Elementen HTML-Struktur

      6:57
    • 6. 5 Hinzufügen von Ressourcen und dummy

      4:33
    • 7. 6 Anwenden Styling auf HTML-Elemente auf höchster Ebene

      5:33
    • 8. 7 Navbar Setup und Styling

      12:00
    • 9. 8 Erstellen eines content

      2:39
    • 10. 9 Erstellen eines Kopfes

      3:05
    • 11. 11 Abschnitten Sidebar und Fußzeile

      7:03
    • 12. 12 CSS und -fixes

      4:51
    • 13. 13 Medienabfragen machen es reaktionsschnell

      7:27
    • 14. 14 Hinzufügen von weiteren Medienabfragen

      4:20
    • 15. 16 Setup reaktionsfähige navbar

      5:11
    • 16. 17 Setup-Menü für den toggle

      3:20
    • 17. 19 Hinzufügen des jQuery event

      8:02
    • 18. 21 Klassen auf dem Fliegen

      11:46
    • 19. 22 Seiten Tweaks und Optionen

      4:54
    • 20. 24 Erstellen Sie zusätzliche Seiten für die Website

      8:18
    • 21. 25 Kontaktformular aktualisieren

      6:19
    • 22. 26 Tipps und Ressourcen für die Praxis

      3:24
  • --
  • 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.

383

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Schnelles und einfaches Webdesign Websites von Grund auf Erkunden
Sie, wie Sie Websites mit HTML, CSS und jQuery erstellen können. Schritt für Schritt
Anleitung dazu, wie Websites von Grund auf neu erstellt
werdenAlles was du wissen musst, um eine Website von Grund auf neu zu erstellen.

Erfahren Sie, wie du HTML und CSS benutzt, um Websites von Grund auf zu machen. Dieser Kurs
deckt die Grundlagen ab, wie man HTML und CSS gemeinsam zum Erstellen von Websites
verwendet.


Erfahren Sie, wie du verschiedene Kernbehälter in deinem Webdesign identifizierst und deinen HTML-Code für das Styling erstellen kannst.

Beginne mit der Planung deiner Website, wie willst du es aussehen. Dies ist
der Leitfaden zur Entwicklung deiner HTML-Programmierung, indem du diesen Entwurf zum Erstellen der
HTML-Struktur verwendest. Verwenden Sie HTML, um die ursprüngliche Websitestruktur zu erstellen.

Wenden Sie CSS an, um die Darstellung der Website in den Browsern der Besucher
anzupassen. Entdecke CSS und wie du deine Website gestalten kannst.
Add und -bilder hinzufügen, um das Gefühl der Websites zu bekommen. Erstellen Sie ein
Navigationsmenü, gestalten Sie Ihre Navbar. Erstellen Sie Inhaltsabschnitte, gestalten sie in modernem
website Fügen Sie den Kopfzeilen und Fußzeilen Styling hinzu, um sie
hervorheben zu können. Richten Sie den Inhaltsbereich auf, in dem Sie Inhaltsbereich abschneiden, einschließlich der
Einrichtung einer Sidebar Verbessere deine Website mit speziellen Optimierungen und Updates
feine Abstimmung deines Quellcodes Dann verwende CSS, um es reaktionsschnell zu machen!

jQuery zu dynamischer Funktionalität hinzufügt. Hinzufügen von event und
maßgeschneiderten Interaktionen. Erkenne aktuelle URL und stelle die aktive Klasse auf
deiner Navigationsleiste fest.


Quellcode ist
includedTop Ressourcen und Links, die zum Erstellen von Websites verwendet
used Video
Schritt für Schritt
Unterricht von einem Lehrer mit mehr als 16 Jahren Branchenerfahrung in der
schnellen forum
bereit sind, alle Fragen zu beantworten, die du möglicherweise
haveDevelop einer soliden Grundlage in der Webentwicklung und dieser Kurs ist so konzipiert, dass du deine eigenen Websites erstellen kannst. Erkunde wie du Websites herstellst.

Nach dem erfolgreichen Abschluss dieses Kurses werden die Studenten eine solide
Grundlage in den Kernprinzipien des Webdesigns und der Webentwicklung haben.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... 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. Schnelles und einfaches Webdesign Websites von Grund auf neu erstellen: alles, was Sie wissen müssen. Um eine Website von Grund auf neu zu erstellen, lernen Sie, wie Sie HTML und CSS verwenden, um Websites von Grund auf neu zu erstellen. Dieser Kurs behandelt die Grundlagen zur gemeinsamen Verwendung von HTML und CSS. Erfahren Sie, wie Sie verschiedene Core-Container in Ihrem Webdesign identifizieren und dann Ihren HTML-Code namens Preparing for Styling erstellen . Beginnen Sie mit der Planung Ihrer Website. Wie soll es aussehen? Das ist ein Leitfaden. Entwickeln Sie Ihre HTML-Codierung, indem Sie einen Blueprint verwenden, um die HTML-Struktur zu erstellen. Verwenden Sie HTML, um die anfängliche Website-Struktur zu erstellen, und wenden Sie dann CSS an, um die Art und Weise, wie die Website für Ihre Besucher gerendert Entdecken Sie CSS und wie Sie Ihre Website-Anzeige aufzuhalten Polizeiinhaber Inhalt und Bilder Um das Gefühl Ihrer Website zu erhalten , erstellen Sie Ihr Navigationsmenü. Halte deine Navid Bar auf. Erstellen Sie Content-Abschnitte, stylen Sie sie in modernen Websites. Styling. Fügen Sie Stylings, Kopf- und Fußzeilen hinzu, um sie hervorzuheben, richten Sie Ihren Inhaltsbereich ein. Trennen Sie Ihre Inhaltsbereiche, einschließlich der Seitenleiste, aus. Verbessern Sie Ihre Website mit speziellen Anpassungen und Updates. Feinabstimmung Ihres Quellcodes, dann CSS, um es reaktionsschnell zu machen, dann bei Javascript und Bakery für dynamische zusätzliche Funktionalität, Hinzufügen von Ereignis-Triggern und benutzerdefinierten Interaktionen. Quellcode ist im Lieferumfang enthalten. Die wichtigsten Ressourcen und Links, die zum Erstellen von Websites verwendet werden. Schritt-für-Schritt-Anleitung in HD-Qualität, die von Instruktoren mit über 16 Jahren Branchenerfahrung unterrichtet wird. Schnelle Antwort auf das Forum. Bereit zu Anderson? Beantworten Sie alle Fragen. Möglicherweise haben Sie eine solide Grundlage für die Web-Entwicklung entwickelt. Dieser Kurs soll Sie dazu bringen, ihre eigenen Websites zu erstellen. Entdecken Sie, wie Sie auch Websites erstellen können. Nach erfolgreichem Abschluss dieses Kurses haben die Studierenden eine solide Grundlage Grundprinzipien von Webdesign und Webentwickler. 2. 1 Website von der Einführung von Grund auf: Willkommen zu unserem Einführungskurs zur Erstellung von Ah, komplette komplette Website von Grund auf neu. Mein Name ist Lawrence, und ich freue mich, Ihnen heute die Möglichkeit zu haben, dieses Website-Projekt zu präsentieren. Also bin ich seit über 15 Jahren Webentwickler und arbeite regelmäßig intensiv mit HTML, CSS, JavaScript und J Query. Und ich bin immer erstaunt über all die wirklich coolen Dinge, die Sie tun können, wenn Sie diese Technologien zusammen anwenden und Sie können diese Websites erstellen, und es dauert wirklich nicht lange , um eine Website wie diese zu erstellen, und ich werde Ihnen zeigen, wie Sie dies tun und Das wird alles von Grund auf neu gemacht werden. Wir werden mit einer leeren Webseite beginnen und wir werden anfangen, die gesamte Struktur aufzubauen, beginnend mit der Erstellung eines Webdesigns. Also müssen wir eine Blaupause davon auslegen, wie unsere Website aussehen soll, und wir werden darauf aufbauen und wir werden anfangen, HTML hinzuzufügen, all die verschiedenen Container innerhalb des HTML abzuschneiden und dann die Website voll funktionsfähig und bereit für reagieren, so können wir hier sehen, wie die Website wird auf verschiedenen Bildschirmen aussehen und es ist voll reaktionsschnell in mobilen. Bereit. Wir werden auch CSS hinzufügen, um Styling anzuwenden und den HTML-Inhalt der Website wirklich zum Leben zu erwecken. Dann werden wir die Website beenden, indem wir JavaScript und J Query anwenden, um dynamische Funktionen zu erstellen. So sehen wir hier, dass jede Seite hervorgehoben wird und das aktiv ist. Also werde ich dir zeigen, wie man das im Kurs macht. Außerdem, wie Sie dieses ansprechende Menü erstellen, das vollständig reaktionsschnell ist. Also auch einmal geöffnet, gehen wir zu der größeren Größe, dass wir zurück zu unserem Standard-Großbildmenü gehen. Also werde ich dir zeigen, wie du das alles machst und noch viel mehr. In diesem Kurs werden auch der gesamte Quellcode und die Ressourcen bereitgestellt, die ich innerhalb des Kurses verwenden werde . Sie können also zusammen mit den Lektionen arbeiten und Ihre eigene Version dieses unterschiedlichen Quellcodes erstellen , mit dem wir im Kurs arbeiten. Also, wenn Sie bereit sind, lassen Sie uns beginnen, eine Website von Grund auf neu zu erstellen 3. 2 Kurs Ressourcen Webdesign: in dieser Lektion. Ich möchte einen Überblick über die Inhaltsressourcen geben, die ich verwenden werde, um innerhalb dieses Kurses eine Website von Grund auf neu zu erstellen. Also hier drüben auf der linken Seite, habe ich meinen Redakteur offen. Ich werde Klammern benutzen. Dies ist ein kostenloser Open-Source-Editor. Es ist von Adobe. Wenn Sie bereits einen Editor haben, können Sie diesen verwenden. Oder wenn Sie auf der Suche nach einem neuen sind, wenn Sie eine ausprobieren wollen, dann sind Klammern wirklich nett. Und ich werde es in diesem Kurs verwenden. Und eines der wirklich netten Dinge an Klammern ist diese Live-Vorschau. Also gibt es mir tatsächlich die Fähigkeit. Teoh haben eine Live-Vorschau der Website-Inhalte, und wir können sehen, dass es hier auf der rechten Seite angezeigt wird, wie ich in der Codierung hier auf der linken Seite eingeben , so dass Sie sehen können, dass es automatisch zeigt es. Dies ist also eines der Merkmale von Klammern, und ich werde dies innerhalb des Kurses verwenden. Einige der anderen Ressourcen werden innerhalb des Kurses verwendet, den ich Drahtrahmen cc verwenden werde . Dies ist also eine Online-Anwendung, in der wir schnell eine Website Design einen Website-Plan erstellen können . Um mit dem Aufbau unserer Website beginnen zu können, müssen wir zunächst einen Plan entwickeln, wie unsere Website aussehen soll . Also in diesem Kurs wird mit Drahtrahmen cc sein. Und auch muss ich einen Dummy-Text erhalten, um Platzhalterinformationen in meinem Webinhalt zu haben . Also werde ich Blind Text Generator eso verwenden. Es erlaubt mir, eine ganze Reihe von verschiedenen Arten von nur Standard-Dummy-Text zu generieren, den ich diesen Platzhaltertext verwenden kann, und auch als Platzhalter für Platzhalterbilder werde ich Platz Hold it und Laura um Pixel verwenden. Also diese Luft, um Ressourcen, die Sie eine Quelle verwenden können, um Polizeiinhaber Inhalt und Platzhalter Inhalt zu erstellen ist ausgezeichnet. Wenn Sie Ihre Assets nicht bereits bereit haben, dass, wenn Sie Ihre Website entwerfen um das Aussehen Ihrer Website mit CSS zu erhalten, dann ist es immer eine gute Idee, diesen Plattenplatzhalter Inhalt zuerst an Ort und Stelle zu haben. Einige der anderen Ressourcen, die ich verwenden werde. Ich werde mit Google Thoughts s. Also das ist ein Google-Dienst, der Schriftarten dot google dot com und es gibt über 808 verschiedene bekämpfte Familien zur Auswahl. Und ich werde einige dieser wirklich ordentlichen Schriftarten auswählen, um sie in unser Web-Projekt zu bringen . Darüber hinaus werde ich Jake Worry in diesem Kurs verwenden, also werde ich wieder eine CDN gehostete Bibliothek von Google verwenden. Und wie Sie hier bei den Entwicklern dot google dot com sehen können, haben sie eine ganze Liste von verschiedenen Bibliotheken, die verfügbar sind, dass Sie einfach die Verknüpfung kopieren und in Ihr Web-Projekt bringen können . Also werde ich Geek Worry in mein Webprojekt einbringen, während wir die verschiedenen Lektionen im Kurs durchlaufen . Und schließlich möchte ich darauf hinweisen, dass ich Chrome innerhalb des Kurses verwenden werde. Und der Grund, warum ich Chrome verwende, ist, dass es Entwickler-Tools und Entwickler-Tools ist in jeder und jeder Installation von Chrome, und es gibt uns eine ganze Reihe von wirklich nützlichen Informationen, wenn wir bauen unsere Websites. Also hat es das Box-Modell hier unter Stilen. Also für jedes Element innerhalb unserer Webseite, können wir sehen, welche Art von Styling verfügbar ist, können wir deaktivieren es wieder aktivieren und so weiter. So haben sie hier eine Menge Optionen, um eine visuelle Perspektive zu bekommen, wie unsere Website aussieht und wir können das Styling anpassen. Wir haben auch Informationen über die Morgendämmerung, also ist das Dokumentobjektmodell. Und dies wird vom Browser gerendert, wenn er Ihren Webseitencode liest, und es erstellt, was ein Dom genannt wird und ein Dom im Wesentlichen eine Aufschlüsselung aller verschiedenen Elemente innerhalb Ihrer Website ist, und wir können hier sehen, dass wir alle verschiedene Eigenschaften, die für diese Elemente verfügbar sind. Also haben wir alle diese Auslöser hier und diese Luft einige der Auslöser und einige der Informationen, auf die wir über J-Abfragen zugreifen werden. Also im Wesentlichen, J. Corey gibt uns sogar einfachen Zugang zu dem, was in der Morgendämmerung verfügbar ist, und das ist etwas, das in Chrome verfügbar ist, wo wir mehr Informationen über unsere Inhalte unserer Website, und dann können wir das innerhalb unserer Skripterstellung nutzen. Also nochmal, diese Luft schlug gerade Ressourcen vor, die ich innerhalb des Kurses verwenden werde. Wenn Sie bereits Ihre Lieblings-Ressourcen haben oder wenn Sie bereits Ihre Vermögenswerte an Ort und Stelle haben, können Sie voran gehen und diese auch verwenden. Eso diese Luft hat gerade Ressourcen vorgeschlagen. Wenn Sie etwas ausprobieren möchten, sind Sie, wenn Sie genau das verfolgen möchten, was ich innerhalb des Kurses verwende. 4. 3 Website Planung von Drahtrahmen: in der nächsten Reihe von Lektionen wollen wir die gesamte Website von Grund auf neu aufbauen. Und wir wollen, dass diese Website voll reaktionsschnell, mobil bereit und bereit für jeden Seitenbildschirm ist. Das erste, was ich gerne mache, ist sich zu öffnen. Ah, Drahtrahmen Anwendung. , Das könnte buchstäblich alles sein,was du gebrauchen kannst. Drahtrahmen Punkt cc Du könntest Fotoshop benutzen. Sie könnten ein Stück Papier, einen Stift und ein Stück Papier Bleistift, ein Stück Papier, Stück Papier, was auch immer am besten für Sie funktioniert. Dies ist also nur in der Regel eine Richtlinie. Aber natürlich, wenn Sie eine Website für einen Kunden oder Kunden entwerfen, dann möchten Sie sicherstellen, dass Ihre Designs wirklich nett und professionell sind. Also würde ich raten, so etwas wie Fotoshop zu verwenden, um wirklich zu illustrieren, was Sie für diese Pflanze entwerfen werden. Da dies also ein Webkurs sein wird, mache ich nur eine kurze Skizze, wie ich den Inhalt präsentieren möchte. Und in HTML, ich mag in der Regel den Inhalt in verschiedenen Abschnitten zu präsentieren. So, wie ich über HTML-Struktur denke, ist, was sind die verschiedenen Abschnitte von Inhalten, die ich in meinem Webbildschirm dargestellt haben werde. Das erste, was ich hinzufügen wollte, ist, dass ich hier eine Navigationsleiste ganz oben haben möchte . Ich möchte nur eine einfache Navigationsleiste haben. Machen wir das zuerst. Also werde ich hier etwas ganz oben zeichnen und ich werde es nur in einen Platzhalter verwandeln . Eso Wir haben eine rechteckige Form hier und dann innerhalb der rechteckigen Form selbst, werde ich in all meinen Menüpunkten hinzufügen, so dass möglicherweise mehrere verschiedene Menüpunkte dort auch haben . Es ist ein weiterer Bereich innerhalb der Website. Also, ich wollte im Wesentlichen eine drei aufrufende Website sein. Also wollen wir unsere Website so strukturieren, dass wir drei Hauptspalten innerhalb unserer Seite darstellen können und eines der anderen Dinge, die, wenn Sie die Website entwerfen, So haben Sie zur Navigation und in der Regel haben Sie Ihren Header-Abschnitt. Das hier drüben wird meinen Header-Abschnitt darstellen und ich werde es einfach dort schweben lassen. Ich werde keine Grenze um sie herum haben, also wird es einfach automatisch in den Rest des Inhalts fließen. Also dieser hier oben. Dies könnte möglicherweise eine schattierte Farbe sein, so dass es ein wenig mehr und so weiter hervorsticht. Vielleicht könnten wir es sogar schwarz machen. Also unterscheidet wirklich, dass dies ein anderer Abschnitt oder ein anderer gefangener Container für unseren Inhalt ist als der Rest des Inhalts. Also als nächstes möchte ich in verschiedenen Spalten hinzufügen, Also möchte ich im Wesentlichen eine dreispaltige Website auf einem Vollbild haben. Eso, ich denke nur, vielleicht könnten wir das tun. Typischerweise konnten wir mehrere verschiedene Säulen diotieren. Wir können sie groß machen. Was auch immer wirklich am besten für uns funktioniert. Aber in diesem Fall, vielleicht werden wir sie alle ungefähr gleich machen oder aufgrund der gleichen etwas kleineren schwächen , also könnten wir so etwas tun wie dieser Abschnitt könnte möglicherweise 35 oder 36% sein vielleicht werden wir sie alle ungefähr gleich machen oder aufgrund der gleichen etwas kleineren schwächen, also könnten wir so etwas tun wie dieser Abschnitt könnte möglicherweise 35 oder 36% sein. Das könnte auch 36% sein und dann können wir einen kleineren haben. So erhalten Sie eine Art von wie ein Seitenmenü und auch einen Inhaltsbereich. Also lasst uns das auch da drinnen Seite, und vielleicht schweben Sie diesen in die Mitte, zentrieren Sie das ein wenig. Und natürlich werden wir den Abstand anpassen, während wir ihn entwickeln. Die Website eso. Schließlich, das letzte Stück der Struktur unserer Website werden wir in einem Fußzeilenbereich hinzufügen, so dass dieser Fußzeilenbereich Copyright-Informationen oder einfach nur wichtige Informationen über den Website-Kontakt enthalten kann und so weiter. Also werde ich das hier unten hinzufügen, und ich werde es etwas später schattieren als die Navigationsleiste, so dass es wieder steht und dann werde ich zufrieden in der Mitte haben und so weiter. Es ist eine andere Sache, die ich hinzufügen wollte, ist, dass ich im eigentlichen Navigationsmenü gebunden möchte. Also werde ich das hier drüben tun, und das wird das ganze Navigationsmenü darstellen. Also jeder Clinton, den ich vertreten habe und da drin und das wird es wahrscheinlich nicht aushalten, wir werden es wahrscheinlich nicht auffallen lassen, aber wir werden einen Text da drin haben, also könnte das ein bisschen später für jetzt sein, oder wir könnten verschiedene Formen für jeden der Navigationsmenüelemente darstellen. Das ist also wieder bis zu den verschiedenen Arten von Designs, mit denen wir vielleicht arbeiten wollen, so dass wir etwas haben, wo wir jeden Artikel hier haben, den wir Staat bezahlen können. In unserer Speisekarte könnten wir wahrscheinlich vier verschiedene Hauptseiten verwenden. Also werde ich einfach nur zahlen Staat diese mittleren Seiten. Dies würde also die tatsächliche Navigationsleiste darstellen. Okay, Hat eine grobe Skizze der Art, wie wir wollen, dass unsere Inhalte auf dem Vollbild jetzt präsentiert weil wir es reaktionsschnell machen wollen, könnten wir. Wir möchten vielleicht verschiedene Designs für verschiedene, unterschiedliche Bildschirmgrößen betrachten. Also werden wir uns im Wesentlichen bewegen, die Navigationsleiste bleibt oben, und wenn sie herunterfällt, haben wir das Hamburger-Symbol, wo wir die 33 geraden Linien haben, und das wird das Menü darstellen. Und dann werden wir das Menü kommen hier als Dropdown-vertikales Menü, so dass jedes Element wird die volle mit, dass verfügbar mit. Wir müssen auch einige dieser Elemente hier einige dieser Inhaltsbereiche stapeln. Wenn wir es also auf etwa 800 Bilder verkleinern, könnten wir diesen dritten Inhaltsbereich unter diese beiden fallen und einen in Inhaltsbereiche haben. Und dann, wenn wir es wirklich auf den mobilen Bildschirm schrumpfen. Wir werden diese Inhaltsbereiche haben, die voll mit repräsentieren. Also im Wesentlichen wird es übereinander stapeln und sie werden voll mit und diese Luftinhaltsbereiche darstellen, die wir auf der gesamten Website nutzen werden eso Sie werden im Wesentlichen Bereiche sein, in denen wir einige platzieren müssen Art von Inhalt , und es wird machen müssen, um Sinn innerhalb jeder Seite. Natürlich können wir einige Anpassungen daran vornehmen, wo wir vielleicht zwei dieser Spalten zusammenkommen und noch die 3. 1 für ein Kontaktformular haben können . Eso. Wir werden den gesamten Anzug innerhalb der nächsten Lektionen entwickeln diesen als Standardleitfaden für die Entwicklung der Website verwenden. der nächsten Lektion beginnen wir mit der Eingabe und Erstellung unseres HTML-Codes und bereiten sich darauf vor, CSS später innerhalb der Lektionen hinzuzufügen 5. 4 Erstellen von übergeordneten Elementen HTML-Struktur: in der vorherigen Lektion haben wir ein schnelles Skizzendesign erstellt, wie wir wollen, dass unsere Website aussehen wird. So wird unsere erste Website aussehen. Und natürlich wird es auf verschiedenen Seiten Bildschirmen anders aussehen, und wir werden das zu einem späteren Zeitpunkt hinzufügen. Also wollen wir damit beginnen, einen Blick auf unser Design zu werfen und wirklich eine bessere Vorstellung von all den verschiedenen Containern und was ich meine Container zu bekommen . Es ist eine Reihe von verschiedenen Elementen, die sich zusammen bewegen würden, wenn die Größe der Website geändert wird. Also, das schaut sich das an. Wir können sofort sehen, dass wir hier oben eine haben, was auch eine Navigation ist, die die Kopfzeile Drei sein wird, die der erste Abschnitt vier ist, der zweite Abschnitt fünf ist , der dritte Abschnitt und sechs, die die Fußzeile ist. So haben wir im Wesentlichen sechs Hauptinhaltsbereiche innerhalb unserer Website. Also lassen Sie uns das entwerfen und das in unserem HTML erstellen. Und eine Sache, die ich beachten wollte, ist, dass ich die Navigationsleiste vollständig über den tar mit der Website halten möchte . Das wird also tatsächlich außerhalb der Hauptcontainerbereiche sitzen. Also im Wesentlichen müssen wir unsere Website vom Körper nach unten gestalten und wir müssen zu den wichtigsten Inhaltsbereichen. Also wird die 1. 1 einfach die Navigationsleiste hier oben halten. Und es wird unabhängig vom Rest der Website funktionieren, die in der Breite begrenzt sein wird und eine fixierte mit haben wird und dann wird das die anderen fünf Abschnitte für andere fünf Container enthalten. Also müssen wir zu übergeordneten Containern. Also lassen Sie uns diese in unserer Website erstellen. Also haben wir unseren Editor hier geöffnet. Wir haben mit einem Stylesheet verknüpft, so dass wir alle bereit sind, mit unserer Standardvorlage zu gehen und jetzt können wir anfangen, unseren HTML-Code hinzuzufügen . Das erste, was ich tun möchte, ist, in einem Abschnitt für die Navigationsleiste und dann weiter und dann innerhalb hinzuzufügen . Hier ist, wo wir alle Navigationselemente hinzufügen. Also werden wir eine Reihe von Listenelementen hier haben, also eine nordeste und Listenelemente und in jedem Listenelement, Ich habe keine h ref Teoh Eine andere Seite. Also werde ich Indexhtml machen, weil es unsere erste Seite sein wird, mit der wir anfangen werden. Und das wäre zu Hause. Das erste Element in der Liste wird einfach nach Hause gehen und dann fügen wir jedes andere Listenelement hinzu, das wir hinzufügen, wird ein weiterer Link innerhalb unserer Navigationsleiste sein , der zu einer anderen Seite führt. Also in der Regel auf einer Website, wirst du einen Abschnitt über mich haben. Also werden wir einfach erstellen, dass dieser Link dort der letzte ist normalerweise ein Kontakt, und ich halte ihn nur im selben Format. Also habe ich den Seitennamen dort, und es verlinkt auf den Namen hier drüben s O Dieser könnte sein. Wenn Sie Produkte oder Dienstleistungen verkaufen, können Sie einige Informationen zu den von Ihnen angebotenen Dienstleistungen haben. Wird Eso das auch da drin hinzufügen? Dies ist also eine Informationsseite über Dienstleistungen für ein typisches kleines Unternehmen. Also hier haben wir eine Navigation und als nächstes müssen wir die anderen Haupt-Elterncontainer s erstellen Oh, das wird ein div sein, und ich werde ihm ein I D von Rapper geben Im Wesentlichen ist dies, wo alle meine Hauptinhalt wird zu sitzen. Und wir werden alle diese Hauptabschnitte auch hier platzieren. Der erste Abschnitt, den wir betrachten, ist ein Header. Und dann in diesem Header, werde ich vielleicht in jedem dort sein, und es wird Firmennamen haben und wir können sogar etwas unter ihrem Slogan oder so etwas tun , je nachdem, wie wir es repräsentieren wollen. Also könnten wir hier ein kleines Element machen. Und so setzen Sie hier einen Slogan für unter dem Firmennamen eso Der nächste Abschnitt, den wir haben , werden wir Abschnitte erstellen, die wir tun, wenn wir uns unser Design ansehen. Also haben wir den Header. Wir haben den Knave. Wir haben die ganze Bestellung auf bestellten Listenartikeln. Also jetzt müssen wir drei mittlere Containerbereiche erstellen. Eso merkt an, dass dieser Unterschied sein wird. Wir haben ein zwei Abschnitte und wir werden auf einer Seite haben. Also mit html five und mit HTML fünf jetzt haben wir Semantik für unsere Elementnamen. Eso nennen wir sie Abschnitte, anstatt dibs normalerweise durchgängig zu verwenden, bevor html fünf wiederholt dibs verwendet haben . Also im Wesentlichen werden diese neuen Element-Tags einen Namen haben repräsentieren Welche Art von Inhalt wird in Sichtweite dargestellt werden. Das könnte also vorerst so sein, ich werde in den ersten Abschnitt stellen und dann werden wir auch einige Polizeiinhaber-Inhalte hinzufügen . Also ein Abschnitt, zwei Abschnitte. Also dieser wäre unser zweiter Abschnitt, und dann werden wir hier eine andere Art von Tag zu erstellen. Dies wird also als außerhalb bekannt sein, weil dies für Sidebars ist. Und dieser letzte Abschnitt wird im Wesentlichen als Sidebar funktionieren. Also vielleicht können wir es eine Sidebar nennen, damit wir es von den verschiedenen Inhaltsabschnitten für unsere Website unterscheiden können . Und dann haben wir hier einen Haufen Inhalt. Und dann schließlich, wenn wir uns diesen eso ansehen, welchen wir vermissen? Wir haben ihren Kopf. Wir haben Abschnitt eine Seite für die Seitenleiste, und dann ist dieser Bereich hier die Fußzeile und bemerken, dass es in diesem Mittelwert enthalten ist, sind operativ. Also werden wir das auch drinnen behalten. Also Fußzeile Und dann hier würden wir einige typische Copyright-Informationen haben und so weiter, Also Kopierrechte. So ist es gespeichert, dass und sehen, wie es jetzt aussieht, wenn wir unsere Seite aktualisieren. Das sind also die Klammern, lebe dich hier und im Wesentlichen ist es etwas, was ich hier eintippe. Es wird hier im Anzeigebereich angezeigt. Aber wir mussten es auffrischen, um den Rest des Inhalts, der dort saß, loszuwerden . Also, wenn Sie es jetzt betrachten, sieht es nicht wirklich aus wie eine Website. Aber wir haben tatsächlich etwas, das im Ansichtsbereich präsentiert wird. Also in der nächsten Lektion werden wir weiterhin diese Acht zu bauen und es bereit zu machen und bereit zu beginnen, in unserem CSS hinzuzufügen Styling, um diese Website wirklich zum Leben zu erwecken . All dies kommt also in den nächsten Lektionen auf. 6. 5 Hinzufügen von Ressourcen und dummy: diese Lektion. Ich wollte einige Platzhalter-Inhalte hinzufügen und wirklich anfangen, unsere Website-Struktur wirklich herauskommen zu lassen, so dass wir einen Standardtext einholen müssen. Es gibt einen Platzhaltertext. Also werde ich einen Text hier drüben beim Blindtext-Generator generieren lassen. Wir werden es einfach sehen. Vielleicht werden wir hier ein paar verschiedene Absätze machen und nur einen Text generieren. Wählen Sie also alle Kopien in die Zwischenablage und gehen Sie zurück in unser HTML. Und hier werde ich es einfach hier reinlegen, und ich werde dasselbe tun. Vielleicht haben wir ein bisschen kürzer ein bisschen länger. Ihre Kopie, um es voranzubringen, wird mir einige Inhalte innerhalb meines zweiten Abschnitts in meinem ersten Abschnitt und vielleicht auch im letzten Abschnitt geben. Und die Sidebar könnte in der Regel einige Bilder haben. Eso könnte einen Text haben, und wir könnten auch einige Bilder haben. Also werde ich Platz benutzen, Platz halten, Dot com halten, und ich werde ein Bild hier innerhalb von zwei Absätzen hinzufügen. Werfen wir einen Blick auf unsere Website jetzt und wir können sehen, jetzt ist es mit nur durch Hinzufügen und nicht Inhalte dort. Es sieht eigentlich aus wie etwas, das ein bisschen anders aussieht als ursprünglich ohne diesen Inhalt. So können wir bei Bedarf weiterhin zusätzliche Inhalte hinzufügen. Und ich werde auch eine Verbindung zu den verschiedenen Bibliotheken herstellen. Also eines der Dinge, die ich hier hinzufügen wollte, ist, dass ich auf Symbol hinzufügen möchte. Also werde ich ein separates Give erstellen und ich werde ihm die Klasse meines Symbols geben. Mein Menü, ich könnte es nennen... Also das ist, was auftauchen wird, wenn wir das Navigationsmenü verkleinern . Also werden wir das hinzufügen. Wir kümmern uns um all das innerhalb des Stylings. Eso wollte ich eine Ressource namens Schriftart Awesome verwenden. Und die Art und Weise Schriftart genial funktioniert ist, es gibt Ihnen Zugriff auf ein Wasser Wirklich coole Symbole Einblick auf und Sie können wirklich in der Regel bringen sie in Ihre Web-Projekte. Also müssen wir nur noch eine Verknüpfung zur Bibliothek im HTML machen. Also werde ich das hier einfach tun und einfach vor meinem CSS für meine Website CSS bei seiner Anzahl von verschiedenen Möglichkeiten aufhören , um zu Schriftart genial zu verlinken. Und jetzt kann ich in diese FAA Bars, die typisch in Indikator für ein Drop-Down-Menü. Also kann ich hinzufügen, dass man hier und jetzt werfen wir einen Blick auf unsere Website wird nicht sehen, wie es aussieht . Jetzt haben wir unseren Menü-Navigations-Indikator. Die Idee ist also, dass wir unser Menü ausblenden, wenn wir auf einem kleineren Bildschirm sind und das Navigationsmenü oder das Mein Symbol ausblenden , wenn wir auf dem größeren Bildschirm sind und es auf diese Weise funktionieren lassen. Also Ort von versa als auch. Also nun lasst uns in eso eine andere Bibliothek gehen, die wir hinzufügen müssen, dass wir uns auch darum kümmern sollten . Und das ist die J. Corey Library. Also werden wir später in unser Javascript und so weiter hinzufügen, und ich zeige Ihnen, wie Sie echte Funktionalität mit Ihrer Website machen können, einschließlich Hinzufügen, dass jede Seite, auf der wir gerade sind, das Erkennen der Webseite, auf der wir gerade sind, und das Setzen eines aktives Element und so weiter. Dies wird also durch G-Abfrage und im Wesentlichen, was G-Abfrage ist Es ist eine JavaScript-Bibliothek , und es hat eine ganze Reihe von wirklich netten Funktionen, die es wirklich einfach macht, JavaScript oder Jake Sorgen zu erstellen , die interagieren mit Ihren Webseitenelementen. Also, jetzt haben wir im Wesentlichen die Struktur eingerichtet und wir werden sein müssen Wir werden Während wir mit dem CSS durchgehen, wir in einigen Klassen hinzufügen und die verschiedenen Elemente in unserer HTML-Struktur und einem Zwick identifizieren Build Punkt geschuldet. Es wird tatsächlich anfangen, mehr und mehr wie eine Website aussehen. Im Wesentlichen sind wir hier gerade dabei. Wir müssen hier sechs Strukturen sein und wir sind bereit, mit dem Hinzufügen und CSS zu gehen, also kommt dies in der nächsten Reihe von Lektionen. 7. 6 Anwenden Styling auf HTML-Elemente auf höchster Ebene: Wir haben bereits US Style CSS mit unserer Style-CSS-Datei verknüpft. Was auch immer wir hier eintippen, können wir automatisch sehen, dass es in unserem Anzeigebereich Gestalt annehmen wird. Also habe ich gerade gesehen, dass ich in einer Hintergrundfarbe und sofort hinzugefügt, weil diese Datei verknüpft ist und Klammern uns lebendig zeigt. du von dem, was passiert? Unsere Webseite und wir werden jetzt alle unsere CSS hinzufügen. Und normalerweise ist die Art und Weise, wie ich mit CSS beginne, mit dem ersten Element zu beginnen, das eso trifft. Zunächst einmal bin ich hier begegnen ist Körper, und das ist ein großartiger Ort, um Ihre Hintergrundfarbe einzustellen. Wenn Sie also eine Hintergrundfarbe verwenden, haben Sie ein Hintergrundbild, das Sie verwenden möchten und so weiter. Dies ist der Ort, um das tatsächlich hinzuzufügen und das einzurichten. Also werde ich irgendwie wie einen weißen Hintergrund machen. Und vielleicht haben wir die Schriftfarbe Zeh auch aus schwarz konsumiert. Und dann auf diese Weise, wenn wir etwas ändern Teoh eine schwarze Farbe, dann sollte es es leicht vom Rest des Textes stehen. Das gibt uns die Möglichkeit, Teoh, einige zusätzliche Inhalte zu machen, die auffällig sind. Das ist eine der Dinge, die ich nicht in diesem Standard-Abschnitt getan habe, ist, dass ich in einigen Hyperlinks und Hyperlinks hinzugefügt wurden, wie wir wissen, sind wesentlicher Bestandteil jeder Website eso in der Regel auf Websites, Sie sind werden Hyperlinks in Ihren Inhalten und eine Reihe von verschiedenen Orten, an denen die Hyperlinks sitzen könnten. Also füge ich nur einige Platzhalter-Links hinzu und genau richtig, füge einige dieser zufälligen Inhalte hinzu, so dass wir einige Hyperlinks in unserem Text haben außer dem, was in unserer Navigationsleiste ist. Weil wir Styling machen werden, dass das nicht mehr beeinflusst wird. Es ist so, dass wir direkt über das Anker-Text-Styling, aber im Moment, also haben wir einige Hyperlinks im Körper und wir wollen uns auch um diese kümmern , direkt an der Spitze. Eso In der Regel für moderne Websites sehen Sie für moderne Websitesnicht viele Unterstreichungen, die standardmäßig mit HTML ausgeführt werden. Es ist eine Menge dieser Elemente haben einige Standardeigenschaften und für Ankertext, eine der Standardeigenschaften als Textdekoration. Und so mag ich in der Regel diese Hilfe entfernen und hinzufügen, dass in, wenn sie über schweben. Ich mag auch die Farbe so zu aktualisieren, dass die Farbe der Links und ich wähle normalerweise etwas aus, das mit dem Farbschema einhergeht. Aber wir haben uns noch nicht für das Farbschema entschieden, also werde ich etwas bläuliches machen, und wir werden es einfach dabei belassen. Und natürlich, wenn Sie entwerfen, stellen Sie sicher, dass die Hyperlinks, alle Hintergrundfarben und alles mit Ihrem Farbschema übereinstimmen. Und normalerweise, wenn ich nicht sicher bin, welche Farben ich verwenden werde, verwende ich ein großformatiges Schema. Und so weiß ich, dass die verschiedenen Farbtöne verschiedene Farben repräsentieren. Und wenn ich das tue, wenn ich das Farbschema auswähle, kann ich diese Updates wirklich leicht machen. Also lassen Sie uns beim Hover hinzufügen. Also, wann immer es schwebt, so Textdekoration und wir werden wieder in diesem zugrunde liegenden hinzufügen. Wann immer es schwebt, wird es zugrunde gelegt, weil Benutzer normalerweise erwarten, dass etwas passiert, wenn Sie über Ihre Hyperlinks schweben. Teoh wirklich Teoh, damit sie verstehen können, dass diese eigentlich Hyperlinks sein sollen und manchmal auch Sie die Farbe als auch aktualisieren möchten. Vielleicht möchten Sie es vielleicht eine dunklere Farbe oder eine hellere Farbe haben, je nachdem, was Ihr Farbschema ist. So sehen wir, dass jetzt diese jeder Benutzer kommen in sollte in der Lage sein zu verstehen, dass diese Luft jetzt Link und sie heben sich von dem Rest des Textes eso wir sind bereit, mit weiter zu bauen unsere Website gehen . Eine andere Sache, die ich gerne hinzufügen möchte, ist, dass Updates für Bilder ist, wie wir hier sehen können. Also dieses Bild hier unten hängt vom verfügbaren Platz ab. Und wann immer wir unsere Website reaktionsschnell machen, möchten wir sicherstellen, dass unsere Bilder in der Lage sind, die Größe neu zu skalieren. Also hier mag ich Bilder als Klopfen setzen und ihnen ein Maximum mit 100% geben und die Art und Weise, die Max mit unterscheidet sich von nur mit Also was ist die Standardbezeichnung der Zeichen? Also, wenn ich diesen Zeh einfach mit diesem 3 50 von 1 50 ändere, nimmt das volle verfügbare mit aber Max mit funktioniert innerhalb der Standardwerte dieses Bildes. Also mit Max mit, wir gehen nur bis zu einem Maximum von 3 50 Und das verhindert, dass Bilder pixelliert, verzerrt, verschwommen I, und erlaubt ihnen auch, die Größe zu ändern, wenn Sie Ihre Webseite ändern. Also werde ich Ihnen jetzt zeigen, dass dieses Bild webt, obwohl es 3 50 mal 1 50 ist, wenn wir es verkleinern und nicht den Platz zur Verfügung haben, es geht einfach und kehrt zu 100% zurück. Also in der nächsten Lektion werden wir tiefer in beginnen, unsere Struktur einzurichten. Wir werden mit ihrem Navigationsleisten-Wrapper arbeiten und das wirklich ausbauen, um es wie eine tatsächliche Website aussehen zu lassen. All dies kommt also in den nächsten Lektionen auf. 8. 7 Navbar Setup und Styling: in dieser Lektion. Ich möchte verdecken, wie man diese Nord-Liste in eine Navigationsleiste umwandelt. Wir werden auch dieses Symbol ausblenden und es nicht auf den größeren Seiten erscheinen lassen weil es hier irrelevant ist, weil unser Menü bereits geöffnet und sichtbar ist. Wir haben genug Immobilien in unserem Webbildschirm, um unsere Menüpunkte anzuzeigen. Also werfen wir einen Blick auf unser Navigationsmenü und bauen die so zuerst, wenn wir es betrachten, es ist auf einer nordeste, und das sieht nicht so aus wie ein typisches Navigationsmenü, wie Sie es vielleicht erwarten, Zehe. Schau, ich werde nur in einigen Abständen hier hinzufügen, so dass meine Seite automatisch, wenn ich sie aktualisiere, nicht den ganzen Weg nach unten geht, und wir können sehen, dass die eigentliche CSS-Sache und mehr zentriert innerhalb der Seite angewendet wird. Eso Now, lassen Sie uns etwas Styling hinzufügen, und in der Regel können Sie knave an einer Reihe von Orten auf Ihrer Website verwenden . Eso Normalerweise Ich mag eine Art von identifizieren oder ihre eso anwenden Sie könnten Ihre haben. Sie könnten eine Idee verwenden, die Sie möglicherweise eine Klasse verwenden, und wie wir mit I DS wissen, daher bestimmte Elemente und für Klassen, können Sie sie immer und immer wieder in mehreren Elementen verwenden. Eso oder so, was auch immer am besten für Sie funktioniert, Sie könnten hinzufügen, dass in einem Update Ihr Styling. Sehen wir uns das an. Und zuerst einmal, lassen Sie uns identifizieren, dass knave sind, und wir werden es auf Idee von Knave Bar geben. So wird es uns ermöglichen, dies zu identifizieren und von jedem anderen zu unterscheiden, die wir jetzt innerhalb unserer Webseiten verwenden. Dann öffnen wir unser CSS. Und von hier aus können wir anfangen, ein aktualisierendes Styling innerhalb sind jetzt nicht bar, Also werden wir jetzt weit zu identifizieren. Wir werden eine beliebige bestellte Liste auswählen, die in unserer Now-Leiste ist, und lassen Sie uns etwas Styling Toe anwenden, dass. Das erste, was wir mit der UN-geordneten Liste tun möchten, ist, was den verschiedenen Listentyp für den Listenstil geändert hat . Also haben wir eine Option hier in CSS Teoh aktualisieren die verschiedenen Listenstile, und ich möchte es einfach entfernen diese Kreise dort s, so dass wir leicht anfangen können, dies zu bauen und es tatsächlich wie eine Navigationsleiste aussehen zu lassen. Es gibt auch einige Standardwerte hier für Marge. Also möchte ich diesen Standard für das Eintopfen so locker loswerden. Und nur um sicherzustellen, und wir sehen, sobald wir diese Standardwerte loswerden, die wir den ganzen Weg über auf die linke Seite gezogen werden, möchte ich auch auf Überlauf hinzufügen. Dies ist also, wenn einer der Inhalte über die Kante fließt. Ich will es verstecken. Wenn ich also ein Bild habe, das über die Kante fließt und so weiter, möchte ich es nicht sichtbar machen müssen. Ich möchte eine Hintergrundfarbe festlegen. Das ist also typisch für was? Die Art und Weise, wie wir skizzieren, hat unsere Webseite. Also schauen wir uns das kurz an. Ursprünglich hatte ich in einem wirklich dunklen Farbton eso Wir werden das auch in der Schlange halten, und ich könnte sogar mit der schwarzen Farbe gehen, wenn ich wollte. Also füge ich das einfach hinzu. Und ich möchte auch, dass diese Navigationsleiste auf dem Rest des Inhalts bleibt, und das ist, wo wir verwenden, ist dieser Index. So sagte Index ist eine Schicht weg Zehe Schicht Ihre Webseiteninhalte. Zed Index wird also immer auf dem Rest des Inhalts sitzen. Also, wenn wir diese Navigationsleiste schweben lassen oder ihre absolute Position machen würde, wird sie den Rest der Inhalte überschreiben, die über sie schweben. Also werden wir nie unsere Navigationsleiste verlieren und sie unter irgendwo Inhalt für einige verschiedene Bereiche erscheinen lassen , weil wir immer wollen, dass der Benutzer in der Lage sein, auf dieses bestimmte Element innerhalb unserer Webseite zuzugreifen . So können wir dies jetzt weiter ausbauen, und wir können Listenelemente innerhalb der jetzt fernen Listenelemente identifizieren. Also, was ich mit allen Listenelementen innerhalb des nav weit tun möchte, Lassen Sie uns sie nach links schweben. Und wir sehen, dass, wenn wir nach links schwebten, wir automatisch die horizontale Version unserer Navigationsleiste erhalten. Und wir wollen auch etwas zusätzliches Styling zu diesen hinzufügen, weil wir sehen, dass es wirklich nah beieinander, und es wirklich nicht sehr gut aussieht. Also müssen wir diesen Hyperlinks etwas Styling hinzufügen, die wir auch in einigen verschiedenen Aktionen hinzufügen möchten ,wenn wir den Mauszeiger über sie bewegen. , Und wir kümmern uns darum, weil das hier auf der Ankerebene sitzt. Also lassen Sie uns das und einen Anker erstellen, und wir möchten, dass die Anzeige davon im Linienblock ist. Das ist also in Linienblöcken. Im Wesentlichen wird es, ah, Blockabstand des verfügbaren oder, ich sollte sagen, den vollen Speicherplatz in Anspruch nehmen ah, Blockabstand des verfügbaren oder, ich sollte sagen, ich sollte sagen, , der für den Inhalt innerhalb des Elements benötigt wird. Also wissen wir, dass, wenn wir mit Block gegangen sind, dann gehen wir. Es würde einen größeren Platz in Anspruch nehmen. Aber der In-Line-Block ist normalerweise für Elemente festgelegt, die in Zeile sind, und dies wird tatsächlich sichtbarer sein, wenn wir etwas Padding setzen usw. Also, wenn wir Polsterung machen, sagte Schwächen es vielleicht etwa 10 Bilder von Polsterung an der Spitze und zu jedem. Vielleicht könnten wir fünf Picks machen, also haben wir einige Abstände um sie herum. Eso, links und rechts ist fünf Plektren. Talking Bottom ist 10 Picks. Lasst uns etwas aktualisieren. Zunächst einmal entfernen wir die Textdekoration eso, für den Fall, dass wir es hier oben nicht entfernt haben. Aber das ist nur für den Fall. Ah, oft ist es ein Es ist eine gute Idee, Riad diese Eigenschaften, diese Styling-Eigenschaften, weil für den Fall, dass Sie Ihre Website aktualisieren und Sie entscheiden OK, nun, jetzt wollen Sie Textdekoration unter der Hyperlinks? Nun, wir wollen es machen. Stellen Sie sicher, dass unsere knave Bar Hyperlinks tatsächlich wie ein Knave aussieht, also wollte ich das auch hinzufügen . Wir können eine Schriftgröße einstellen, also lasst uns ein e m machen und auch die Farbe des eso aktualisieren. Ich wollte wirklich abheben ein wenig mehr Eso schwächen tun Alice Blue, das ist eine weiße ish Farbe Gewicht blaue Farbe. Vielleicht möchten wir auch sicherstellen, dass unser Text innerhalb der Mitte des verfügbaren Raums mit dem Element ausgerichtet ist . Also werden wir es zentral ausrichten, obwohl ich denke, es ist sowieso zentriert, weil wir im Line-Block verwenden. Aber es ist immer eine gute Idee. Im Zweifelsfall fügen Sie diese Eigenschaft hinzu und stellen Sie sicher, dass es nicht etwas tut, das Sie vielleicht nicht erwarten, es zu tun. Also, jetzt schauen Sie sich das an, es sieht aus wie eine Navigationsleiste, aber wir haben diese Interaktion noch nicht eingerichtet und bereit zu gehen. Also, wenn wir über diese Elemente gehen, passiert nichts. Und normalerweise innerhalb einer Navigationsleiste, würden Sie tatsächlich erwarten, dass etwas passiert. Und das ist, wo die Pseudopseudo-Elemente von Hover oder Pseudo-Klasse von Hover Und wann immer wir tatsächlich diese Aktion ergreifen, dann werden die Eigenschaften dafür ausgelöst, was? Für dieses Styling. Also, wenn wir darüber schweben und ich weiß, ich sagte, ich würde bei der Grauskala bleiben, aber ich werde hier ein bisschen Farbe hinzufügen, wenn wir darüber schweben, so dass wir sehen können, dass hier wirklich etwas passiert. Und es ist wirklich abheben auch, vielleicht wollen wir sogar die Farbe aktualisieren, also machen Sie es eine dunkle Farbe. Also denke ich, ich werde für mehr von einem Halloween-Thema gehen. Hier ist also, dass wir wie eine orangefarbene Korallenfarbe machen, wenn wir darüber schweben und ich habe es vergrößert. Wenn ich also zu 100% zurückgehe, fängt es an, mehr und mehr wie eine tatsächliche Navigationsleiste zu sehen . Und das ist etwas, das Sie normalerweise erwarten würden, wenn Sie bis zur Website kommen. Und das ist etwas Typisches, das Sie erwarten würden, mit Ihrer Website zu interagieren . Also eine andere Sache, die ich in dieser Lektion loswerden wollte und das ist, dass dieses hier, dieses meine Ikone, damit ich es auf verschiedene Arten loswerden kann. Aber ich habe eine Klasse dafür. Also werde ich einfach über die Klasse darauf zugreifen. Und ich werde eine Ausstellung machen. Keiner. Bevor ich das mache, will ich diese Schriftfarbe einrichten. Also möchte ich auch eine Hintergrundfarbe festlegen. Also wollte ich im Einklang mit dem Hintergrund des Knave rul sein. Also diese Luft verschiedene Elemente und ich könnte tatsächlich wahrscheinlich nur die Hintergrundfarbe in die Now-Leiste setzen . Vielleicht ist das eine bessere Idee. Also wiederholen wir nicht wirklich, was wir tun und einen kurzen Blick hier, nur um sicherzustellen , dass wir nichts Außergewöhnliches haben. Und hier lassen Sie uns unsere Farbe aktualisieren, um es das gleiche zu machen, wie unsere Anker dort eingerichtet wurde . Jetzt haben wir es weiß und wollen es wahrscheinlich größer machen. Also Schriftgröße. Ich denke, wir hatten eine Option innerhalb gekämpft genial. Teoh, bekommen größere Symbole s Oh, ja, ja, wir haben hier eine Option, um die verschiedenen Größen zu aktualisieren. Öffne schnell den Redakteur hier und ich sehe eine Sechs. Also denke ich, dass das tatsächlich die verschiedenen Größen setzt. Einige gehen wir hier runter, das ist F fünf s. Also das gibt uns, dass einige Optionen, um die Größe zu ändern. Wir können einfach nur hinzufügen, wie es hinzugefügt wird, so dass wir f A tun können, damit das es größer machen sollte. Lass es uns auffrischen und es tut nicht Oh, ich habe die Gedanken, da zu sitzen. Das ist wahrscheinlich, warum es so ist, lassen Sie es tatsächlich als Schriftgröße hinzufügen, so Schriftgröße und vielleicht 1,5 p. M.tun 1,5 p. M. und das loswerden, damit wir es auf verschiedene Arten kontrollieren können. Wir können es durch unser Styling kontrollieren. Und ich denke, es gab einige Standardstile, die auch mit Schriftart genial eingebaut sind. So oder so, können Sie dieses Navigationsmenü bis zu der Größe bringen, die Sie suchen, indem Sie eine Schriftgröße durchführen oder innerhalb des CSS aktualisieren eine Klasse hinzufügen. Lassen Sie uns etwas Polsterung anschwellen. Also, weißt du, füge 12 hinzu. Oder ich könnte einfach 10 den ganzen Weg um 10 Picks machen den ganzen Weg herum. Es sitzt also nicht bis zum Rand dort, also hat es ein wenig Polsterung im Raum um ihn herum. Und schließlich, jetzt werden wir es verstecken weg von unserer Ansicht, und wir werden es noch einmal betrachten, wenn wir unsere G-Abfrage aufbauen und hinzufügen, und wir werden die Anzeigeansicht umschalten, damit wir das sehen können, wenn wir ihr Menü öffnen und so weiter. Dann wird es umsetzbar sein, um ihr Menü zu öffnen. Aber für jetzt, lassen Sie uns an unserem Rest von HTML und CSS arbeiten, um unsere Website wirklich funktionsfähig zu machen, und dann werden wir in den späteren Lektionen Reaktionsfähigkeit hinzufügen 9. 8 Erstellen eines content: wie wir in unserer HTML-Struktur nach unten gehen, treffen wir als nächstes auf Rapper. Also ist Rapper unser eines unserer Talk-Level-Elemente hier, und dieses ist so konzipiert, dass es eine ganze Reihe von Inhalten enthält. Ein ganzer Bündel von Abschnitten darin. Und dieses hier möchte ich eigentlich Standard Max damit setzen. Ich will nicht, dass es flüssig ist, und ich möchte nicht, dass es in der Lage ist, den ganzen Weg aus S o auszuweiten. Ich möchte unsere Webseite schrumpfen, weil wir auf diese Weise tatsächlich sehen können, wo unsere Inhalte sitzen. Also habe ich es ziemlich geschrumpft, und jetzt können wir die verschiedenen Effekte sehen, die stattfinden werden. Also werde ich eine maximale Breite festlegen. Genau wie bei den Bildern habe ich keine maximale Breite von 10 80 festgelegt und das einfach aktualisiert. Wir sehen also, dass jetzt, wo ich eine maximale Breite von 10 80 eingestellt habe, vielleicht auch einen schnellen Rand um ihn herum machen wird , damit wir tatsächlich sehen können, wo dieser Inhalt sitzt. Also musste ich es nicht einmal so sehr verkleinern und eine Berührung größer auf 11 80 machen . Jetzt sehen wir, dass dies unser gemeiner Rapper-Bereich ist, und wir sehen, dass es auf die linke Seite gezogen wird und dies ist ein weiterer Standard . Eso, kümmern wir uns darum. Und eine andere Sache, die Sie vielleicht bemerkt haben, ist, dass wir es nach unten verschieben müssen, weil ich es nicht will. Ich will sie nicht. Ich möchte auch einige Abstände für dieses Menü lassen. Also möchte ich eine Position es relativ, und ich möchte es von oben nach unten verschieben. So relativ und absolut geben Ihnen die Möglichkeit, die Positionierung nach unten zu bewegen. Also möchte ich tun, was ich tun möchte, ist es etwas nach unten zu bewegen, so dass ich von der Now-Bar etwas Platz drin habe . Das könnte ein bisschen viel sein, aber wir werden sehen. Wir werden das aktualisieren. Und als nächstes schauen wir uns das Zentrieren an, so dass es durch Ränder erfolgen kann und wir werden den oberen und unteren Rand auf Null und links und rechts setzen. Wir werden die Auto setzen, so dass dies automatisch alle Inhalte zentriert, alle Elemente. Aber nur durch Hinzufügen in diesem Auto, so Jetzt haben wir alle unsere Positionierung, ihre von unserem Hauptinhalt und jetzt können wir es alle verschiedenen Abschnitte innerhalb dieses Inhalts erstellen . Also in der nächsten Lektion werden wir das tun und wir werden im Wesentlichen Kopfzeile der drei Spalten und Fußzeile einrichten . Also, das kommt alles in den nächsten Lektionen. 10. 9 Erstellen eines Kopfes: sich vom Rapper runter bewegen. Der nächste Hauptinhaltsabschnittsbereich, den wir sehen, ist Header. Dies wird einen vollen verfügbaren Abstand in Anspruch nehmen , der innerhalb dieses Elements verfügbar ist. Und jetzt werden wir es identifizieren. Wir haben verschiedene Möglichkeiten, wie wir all diese verschiedenen Räume identifizieren können und wir brauchen einen Weg, um alle verschiedenen Abschnitte zu trennen. Eso müssen wir einige Identifizierungen hier für den Abschnitt geben, also werde ich im ersten Abschnitt hinzufügen oder das könnte bedeuten Und dann könnte die zweite 1 nur zweite sein, damit wir alle diese verschiedenen Abschnitte identifizieren können , weil ich Elemente hier abschneiden muss, die unterschieden zwischen ihnen und dieser kann an zweiter Stelle sein. Also, wenn ich mir das anschaue, habe ich Rapper. Das Elternteil ist also Rapper. Ich habe ein Header-Tag in diesem Rapper und vielleicht in einer Kopie, das entfernt es von dort und so können wir tatsächlich sehen, mit welchem wir arbeiten. So sehen wir, dass wir an diesem Header-Abschnitt arbeiten und hier würden wir alle unsere Header-Informationen setzen . Eso Lassen Sie uns eine Standardhöhe für es s setzen Oh, vielleicht tun 1 20 Picks. Das gibt uns genug Abstand und fügen Sie dort einige Eintopfen hinzu. Also hängen die Worte nicht nur dort, direkt am Rand. Also werde ich tun, vielleicht könnten wir eine obere und untere von 10 Picks machen und wir können eine linke und rechte von 20 Picks tun können sehen, wie das aussieht, also aktualisieren Sie es. Und jetzt haben wir etwas, das mehr in der Reihenfolge eines Header-Bereichs aussieht, und ich werde diese Grenze entfernen, weil sie dort nicht unbedingt einen Rahmen haben wollen , wollen wir vielleicht sogar eine Hintergrundfarbe einschließen eso Dies kann ein wirklich Licht sein Schatten, so unterscheidet es unsere Kopfzeile vom Rest des Inhalts und vielleicht nicht so spät, Also machen Sie es einen Hauch dunkler, so dass wir tatsächlich unterscheiden können, wo es sich befindet. Ich benutze auch wirklich gerne Grenzradius eso, dass wir nicht so boxy sind und das gibt uns herum . Es Kanten Styling, wie Sie hier sehen können, können wir links, rechts, oben unten und so weiter tun rechts, . Aber ich habe eine Runde all die Grenzen. Also vielleicht tun 20 Picks Rundung oder 1 Uhr Abrundung Also lasst uns sehen, wie das aussieht. Eso leichte Abrundung der Ecken. Und sobald wir das loswerden, sieht es so aus , als hätten wir jetzt einen klaren Header-Bereich und wir könnten anfangen, an den verschiedenen Abschnitten zu arbeiten . Und wir sind Wir haben ein Gewicht identifizieren sie, so dass wir nicht brauchen, um anzugeben, dass ihre innerhalb der wichtigsten Rapper. Also haben wir einen Hauptbereich, also werde ich die Grenze in ihre s setzen, damit wir sehen können, an welchem wir arbeiten. Also in der nächsten Lektion, lassen Sie uns diesen mittleren Grenzabschnitt einrichten. 11. 11 Abschnitten Sidebar und Fußzeile: Also die letzte Lektion, die wir uns angesehen haben, wie wir eine klare Kopfzeile einrichten können. Und jetzt schauen wir uns an, das bedeutet Abschnitt einzurichten. Gehen wir zurück, Teoh Original Design schnell und werfen Sie einen Blick auf diese. Also haben wir unsere Kopfzeile dort. Also, das taucht auf. Und wir haben unseren ersten Abschnitt sind der zweite Abschnitt und unsere Sidebar. Also sehen wir, dass sie im Moment alle ausgerichtet sind. Und das ist sehr ähnlich zu dem, was hier mit dem Menü passiert, weil jedes dieser verschiedenen Elemente sich links von den anderen Elementen so oder rechts neben dem für das Element davor ausrichtet . Und sie richten sich schön aus. Und wir können einige Hinweise von dort nehmen und alle unsere verschiedenen Abschnitte innerhalb derselben Art von Format mit float einrichten . Also lassen Sie uns unsere erste Content-Bereich öffnen und haben Main so bereits unsere Grenzen hinzugefügt. Wir können sehen, wie es aussieht. Jetzt lass es uns nach links schweben und wenn du Float benutzt, also werde ich dir zeigen, was jetzt passiert, damit wir sehen, dass es tatsächlich schwimmt. Es nimmt nur verfügbaren Platz ein, den es braucht, und was passiert dann? Dieser zweite Abschnitt schwebt direkt daneben. Das ist also nicht ideal. Wir müssen in der Lage sein, es zu setzen und Breite. Wir müssen in der Lage sein, etwas Polsterung hinzuzufügen, damit die Wörter nicht direkt am Rand hängen. Also lassen Sie uns in einigen Eintopfen fünf Picks Eintopfen hinzufügen und aktualisieren Sie es. Die Formulierung zahlt sich also ein bisschen besser aus, aber wir müssen es immer noch mit Frauen identifizieren können. Und dies zu tun, wird es uns wirklich erlauben, diese Website zu bauen. Es ist so, dass wir uns das ansehen und grob schätzen können, dass die mit vielleicht 38% sind und sehen, wie das aussieht. Also, jetzt, wo wir 38% s einnehmen, ist das ungefähr die Menge an Platz, die wir für diesen speziellen Abschnitt reservieren werden . Also, jetzt können wir die gleiche Art von Sache für den nächsten Abschnitt tun, und Sie müssen immer Teoh bereit sein, alle diese verschiedenen Abschnitte wirklich zu berechnen weil dies etwas ist, dass, wenn wir hinzufügen und klopfen Lesen und Grenzen, Also Dies nimmt einen Teil jener 100% auf, die diesem Element zugewiesen ist oder dass bestimmte Container eso immer darauf achten, dass alle diese mit eso in vollem Umfang zählen . Wenn wir unsere Berechnungen durchführen, stellen Sie sicher, dass wir nicht überlappen und dass wir nur maximal 100% verbrauchen . Jetzt haben wir unseren zweiten Abschnitt, also sieht alles ziemlich gut aus. Und jetzt, wenn wir in unserer Sidebar hinzufügen Also werde ich dies als Rapper tun, eine Seite, die ichnatürlich haben könnte, natürlich haben könnte, angesichts eines I D als auch eso Es gibt nur verschiedene Möglichkeiten, Teoh die verschiedenen Abschnitte zu identifizieren , die verschiedenen Elemente. Aber ich denke, ich werde den Rapper eine Seite verwenden, damit ich meinen HTML-Code nicht durcheinander bringen muss, indem zu viele verschiedene Bereiche habe, die ich identifiziere. Also lasst uns das hier reinlegen. Und was denkst du, wird hier passieren, wenn ich die Sidebar hinzufüge? Weil wir weit über sein werden, sind verfügbar mit Also was passiert ist, dass es automatisch unter fällt. Also wollen wir nicht, dass das passiert. Wir wollen, dass es immer noch da oben auf der rechten Seite bleibt, und das ist, wo ich traf, indem ich eine wirklich berechnet es. Und oft schätze ich es nur irgendwie ein Augapfel es nur um sicherzustellen und zu sehen, wie viel Platz ich zur Verfügung habe. Natürlich, wenn Sie Ihre Website entwerfen, sollten Sie wirklich mathematisch auf die gleiche Weise arbeiten und genau sehen, wie viel Platz Sie zur Verfügung haben , um U. S. Also Ich mag es auch in den re Seiten zu sehen. Ich werde hier ein paar Bruchpunkte setzen. Eso Das spielt eigentlich keine Rolle, dass es hier runterfällt, denn hier werde ich den Bruchpunkt setzen. Eso bis zu dieser Bildschirmgröße, lassen Sie uns es bis zu 100% bekommen. Das ist also 100% Größe. Du siehst also, dass, wenn wir schrumpfen und wir anfangen müssen, einige Breakpoints zu setzen es reaktionsschnell machen wird. Also werden wir 2% einen Bruchpunkt dort haben und vielleicht die volle Breite nehmen und dann jede von ihnen, vielleicht 50%. Das kommt also, wenn wir die Reaktionsfähigkeit der Website eingerichtet haben. Und eine andere Sache, die ich hinzufügen wollte, in Wir sehen, dass, wenn wir beim Urheberrecht stapeln , weiß nicht, wirklich wissen, wohin es gehen soll. Dies ist also die Fußzeile und es weiß nicht wirklich, wo es enden will, weil wir nicht wirklich irgendwelche Eigenschaften und die Anweisungen gegeben haben, wie wir wollen, damit umzugehen. Was hier wirklich passiert ist, ist, wann immer Sie über Wasser treiben, müssen Sie diesen Schwimmer löschen. Andernfalls wird das nächste Element tatsächlich versuchen, diesen Raum zu passen. Also lasst uns beide Eso klären. Dies löscht sowohl Floats links als auch Rechte, und jetzt, wenn wir es aktualisieren, sehen wir, dass der volle verfügbare Abstand einnimmt und wir ihm hier einige weitere Eigenschaften geben, also geben Sie ihm eine Breite von 100%. Und wir hatten auch eine Hintergrundfarbe in unserem Design. Also lassen Sie uns eine schnelle Hintergrundfarbe hinzufügen, und ich glaube, wir haben versucht, etwas zu machen. Großartig. Mal sehen, wie das jetzt aussieht. Jetzt schauen Sie sich unsere Webseite an und wir haben unser Exemplar direkt dort. Wir haben alle drei Abschnitte und wir können es auch entfernen, da diese Grenzen nicht wirklich toll aussahen. Also werden wir das Aktualisieren aktualisieren. Und im Wesentlichen haben wir jetzt unsere dreispaltige Website. Gehen wir zurück und schauen uns unser Design an. Es gibt also Navigation. Kopfzeile 1 bis 3 Spalten und Fußzeile. Das ist also unsere Website. Und ich weiß, dass die Schattierung ein bisschen abgeschaltet ist und das eigentlich hätte einbringen sollen, weil diese nicht mit dem Rest von ihnen schwebt. Also vielleicht aktualisieren Sie mein Design eine Berührung, und so sind sie echt. Es ist also eher nach dem Vorbild von so etwas. Und natürlich, ich weiß, wir haben abgerundete Ecken und wir haben einige Abstände dort s, also müssten Sie diese Arten von Anpassungen auch vornehmen. , Wenn Sie einem Kunden ein Design präsentiert haben,stellen Sie sicher, dass ja, es sieht genau so aus, wie das Design ist. also sicher, dass Sie die Farben die gleichen machen, die Sie präsentieren und so weiter. Und wenn Sie eine Navigationsleiste verwenden, stellen Sie sicher, dass Sie die Farben auch dort richtig angeben. Also die nächste Lektion. Lassen Sie uns das weiter ausbauen und einige Verbesserungen vornehmen, und dann werden wir Reaktionsfähigkeit auf die Website einführen, und das wird ein wirklich netter Effekt sein, und das wird sich darum kümmern, wo wir die verschiedenen Abschnitte und es sieht nicht ganz richtig aus. Also die Responsive Wann immer wir in den Medienabfragen hinzufügen, wird das kümmern. Und all das kommt in der nächsten Settle-Essenz. 12. 12 CSS und -fixes: Ich wollte einige Verbesserungen und Anpassungen vornehmen, bevor wir weitermachen und es reaktionsschnell machen. Also schauen Sie sich gerade auf die Website an, ich möchte einige Anpassungen an der Art und Weise, wie die Fußzeilen präsentiert. Also möchte ich das Clinton zentrieren und ein paar zusätzliche Verbesserungen daran machen. Also schreibe die Zeile und wir werden den Text in die Mitte ausrichten. Also denke ich, dass du oft Fußzeilen sehen wirst, wo der Text tatsächlich zentriert ist und hier auch eine Farbe festlegen wirst, weil ich nicht denke, dass man zu dunkel ist. Das ist also ein bisschen später und mehr im Einklang mit unserem Design. Wir wollen wahrscheinlich keine feste Grenze haben und möchten wahrscheinlich eine Standardhöhe hinzufügen . Geben Sie ihm also eine Höhe von 1 50 und fügen Sie dann auch einige Eintopfen um die Wörter hinzu. Es ist also schön und zentriert. Tun Sie das. Also, jetzt haben wir etwas Polsterung schön zentriert. Wir haben eine wirklich schöne Menge verfügbaren Speicherplatz hier unten in unserem Fußzeilenbereich. Ich möchte auch die Art und Weise aktualisieren, wie die Nab unsere präsentiert wird. Ich möchte etwas mehr Vergießen hinzufügen, so dass diese Menü-Tasten wirklich ein bisschen besser abheben . Vielleicht könnte ich sogar 15 den ganzen Weg hindurch machen. So 15 oben unten links und rechts. Also mal sehen, wie das aussieht. Das macht es also ein bisschen schöner, ein bisschen herausragender. Wir können auch unsere Navigationsleiste aktualisieren, wo wir positionieren sind jetzt weit. Also wollen wir wahrscheinlich unsere Now-Bar aufstellen und es hier oben in der oberen Ecke sitzen lassen. Also werde ich das tatsächlich verschieben, das hier runterziehen und es rüber bewegen, und wir werden uns um etwas Styling kümmern, und der Grund, warum ich das hier umziehe, liegt daran, dass die Art und Weise, die in der Reihenfolge dargestellt wird, präsentiert wird. Das wird mir etwas Styling ersparen, wenn ich es reaktionsschnell mache. Eso bewegt das da oben. Und eine andere Sache, die ich kümmern möchte, ist das Hinzufügen einer Position für den Nav Kern. Also lassen Sie es uns als Position aufstellen und ihm eine absolute Position geben, weil ich immer sicherstellen möchte , dass meine Navigationsleiste oben sitzt, rechts. Es ist, wo sollte oben links sagen. Das sollte oben links sein. Wir haben also die Möglichkeit, nach rechts oder links zu gehen. Ich möchte sicherstellen, dass die Anzeige blockiert ist. Und ich möchte auch sicherstellen, dass es mit ist immer 100%. Also lasst uns auffrischen. Das ist so, das gibt uns eine viel bessere Darstellung unserer Inhalte. Und jetzt sehen wir auch, warum wir unter dem Wrapper dort hinzugefügt haben, warum wir die 40 Picks brauchten. Weil wir jetzt relativ sind. Und das bedeutet nur, dass, wenn es sozial Null war, welche Null aussieht wie s Null r Sommerinhalt würde sich überlappen und so weiter. Und das zur Kenntnis zu nehmen, werde ich diesen Index auch hier rausschieben. Und ich werde auch diesen Überlauf hier draußen machen. Also nehmen Sie es von der geordneten Liste und legen Sie es auf dem Elternteil dort. Und im Grunde bedeutet das, dass, wenn ich die Größe ändere, hier ist also, wir müssen uns einen Blick darauf werfen. Wir können unsere Speisekarte hier nach oben fixieren, wenn wir das auch tun wollen. Also, dies sind einige der Optionen, die Sie typischerweise. Wahrscheinlich sehen Sie diese auf der einen Seite Websites, wo wir über den Inhalt s schweben Oh , ist eine Option auch an dieser Stelle, je nachdem, was unser Design ist, und auch je nachdem, wie viel Inhalt wir sind präsentiert hier. Wenn wir also nicht wirklich viel Inhalt haben, brauchen wir nicht, dass unsere Speisekarte hier oben klebrig ist. Wenn wir viel Inhalt haben und wir vielleicht wollen, dass es an der Spitze klebrig ist, also alles abhängig, und wir werden Ihnen die verschiedenen Möglichkeiten zeigen, das zu tun, sobald wir es reaktionsschnell machen . Und sobald wir in den verschiedenen Eigenschaften innerhalb des Stylings hinzufügen, um wirklich die Unterschiede bei der Größenänderung zu demonstrieren . In der nächsten Lektion werden wir unsere Medienanfragen hinzufügen und ich zeige Ihnen, das zu tun. Und das ist es, was Ihre Website reaktionsschnell machen wird. Wir haben gesehen, dass, wenn wir hier unten schrumpfen, die Sidebar nicht ganz richtig ist. Und wann immer wir es auf eine wirklich kleine Größe schrumpfen, sieht nichts wirklich richtig aus. Wie diese Abschnitte gibt es viel zu lange für jemanden, der auf einem mobilen Gerät liest, dass er nach unten scrollen müsste und so weiter. Und dann müssten sie nach oben scrollen, um den nächsten Abschnitt zu sehen. Also nicht ideal eso. Kümmern wir uns darum in den kommenden Lektionen. 13. 13 Medienabfragen machen es reaktionsschnell: Dies ist unsere aktuelle Website und im Wesentlichen haben wir einen Header. Wir haben drei Abschnitte Fußzeile und eine Navigationsleiste. Eso alles kommt zusammen wie originelles Design war eso jetzt wollte ich in einigen zusätzlichen Optionen hier und Aktion hinzufügen . Ich schaue mir das auch an und denke, wir sollten die Rapperspitze aktualisieren, einen Hintergrund von Weiß haben, also werde ich eine Hintergrundfarbe aus Weiß hinzufügen und sie einfach aktualisieren. Also, jetzt wird der Inhalt wirklich ein bisschen besser auf auch abheben, ich werde in einige Eintopfen auf dem Rapper hinzufügen 56 Also lassen Sie uns jetzt einige, so dass wir, weil ich in der Polsterung hinzugefügt , Ich muss auch die Fußzeile anpassen, so Kümmern wir uns darum. Also statt fünf Picks zu haben, lassen Sie uns 2% tun und dann wissen, dass die Fußzeile 100% ist, muss ich das auf 96% aktualisieren , damit es mehr zentriert innerhalb des Inhalts schwebt und jetzt sind wir bereit, den Rest der Website aufzubauen und es reaktionsschnell. Also mit Chrom und einer der Gründe, warum ich grausam verwende, ist, weil es taube Werkzeuge hat. Also bin ich auf einer Windows-Maschine, so dass Sie einfach mit der rechten Maustaste drücken können, überprüfen Sie überall, wo Sie Steuerschalttaste drücken können. Ich Sie können hier in die Drop-down-Liste gehen und Sie könnten eine Auswahl für die tauben Werkzeuge dort auch treffen . Was also Deva Werkzeuge tun, ist, dass es uns einen Überblick darüber gibt, was in den verschiedenen Elementen passiert , so dass ich sehen kann, wie viel Marge Borderpoundings dies das Box-Modell ist. Also, auf jedem Element, das ich ausgewählt habe, kann ich eine ganze Reihe von Informationen bekommen, damit ich sie anpassen kann, entfernen Sie sie auf so weiter und wirklich ein besseres Gefühl dafür bekommen, wenn ich meine Websites entwerfe, wie es so sofort aussehen wird. Wenn ich mir das anschaue, sehe ich, dass das heruntergefallen ist. Die Seitenleiste sollte statt den ursprünglichen Prozentsatz aufnehmen, wenn es der Bildschirm bricht, muss ich sogar einen anderen Prozentsatz aufnehmen. Schauen wir uns an, wo es auf dem Bildschirm bricht. Also habe ich eine Bildschirmgröße da oben und ich habe auch dieses Gerät auf eine Bar umschalten, was eine wirklich schöne Funktion innerhalb der tauben Tools ist, weil wie wir sehen können. Jetzt kann ich meine Webseite aussehen wie auf einem mobilen Bildschirm, der 3 75 mal 6 88 Ich kann es auch dynamisch machen und sie manuell anpassen, so dass er hier sehen kann. Wie viele Picks über, und wir sehen, dass etwa knapp 800. Hier fällt es herunter. Das ist also, wo ich idealerweise meine erste Medienabfrage setzen möchte und das ist mein erster Breakpoint, auf den ich arbeiten möchte . Also öffnet es unseren Redakteur. Und jetzt möchte ich auch ein individuelles Styling hinzufügen . Jeder Inhalt, der sich darunter befindet oder kleiner als 800 Bilder ist. Also, Max, mit okay, lass uns eine 20 machen, nur um sicher zu sein. Also jetzt jedes Styling, das ich hier drin habe. Also, wenn ich so etwas wie Körperhintergrundfarbe auf mache, lass uns alle Quest machen, also etwas, das es wirklich knallt. Also jetzt, wenn ich es aktualisiere, sehen wir, dass, wenn wir unter 820 Picks schrumpfen, wir auf Aqua Hintergrundfarbe bekommen. Das ist also etwas, das wir anpassen können, wo wir unsere Inhalte hier aufnehmen und Anpassungen vornehmen können. Also nehmen wir unseren Wrapper und wir werden uns keine Sorgen um den Körper machen. Aber wir nehmen unseren Wrapper und haben kein Klopfen. Und ich mag es, s zu kopieren und einzufügen, damit ich sehen kann, welche Elemente ich ändern muss. Und alles andere sieht ziemlich gut aus. Also muss ich an diesen keine Änderungen vornehmen. Also gelten wir nur für diejenigen, die tatsächlich Änderungen vorgenommen haben. Also sehen wir, dass wir, wenn ein Schrumpfen es runter, die Polsterung verlieren, die da ist. Genau das möchte ich passieren, denn ich möchte die Fähigkeit haben, diesen Inhalt wirklich zu isolieren und zu 100% zu haben. Sehen Sie, wenn wir größer werden, haben wir den Inhalt von wieder zur Verfügung und so weiter. Jetzt verkleinern wir es, und an diesem Punkt wollen wir auch einige Anpassungen vornehmen. Teoh diese Hauptelemente. Also haben wir die 1. 2. und fragen Seite. Wir wollen, dass mit ihnen etwas anderes passiert. Also mache ich dasselbe, was ich für den Rapper getan habe, und ich bekam eine Kopie und füge sie herunter. Also das erste, was wir tun wollen, ist, dass wir ein mit setzen wollen Also vielleicht wollen wir etwas wie 45% machen und ein bisschen Eintopfen haben. Also vielleicht eine Veränderung, sogar das Eintopfen zu einem Prozentsatz. Und wir werden dieses Schweben nach links loswerden, also Polsterung und mit sind diejenigen, die wir setzen werden. Und was? Der Schwimmer Zehe links. Wir haben 45%. Vielleicht das hier. Jetzt wollen wir nach rechts schweben, so dass wird sicherstellen, dass es auf der rechten Seite ist und setzen Sie den Abstand in der Mitte zwischen den beiden Elementen. Und wir wollen die Polsterung und auch mit und dann die Ostseite anpassen. Was wir tun wollen, ist das gleiche, was wir für die Fußzeile getan haben, wo wir beide löschen wollen. Also wollen wir keine der Schwimmer dort, also klären Sie einfach die beiden Schwimmer aus und vielleicht wollen wir weiter bei 5% eintopfen, also glauben Sie, dass es schon 5% war. Also lassen Sie das einfach. Und jetzt wollen wir 90% für das gesamte mit tun. Schauen wir uns das an und sehen, wie sich das ergibt. Also, wenn wir es ändern, so dass es nicht genau eine Zeile dort war, also verbrauche ich ein wenig maximalen überschüssigen Speicherplatz. Also muss ich ein paar Anpassungen vornehmen, also werde ich diese auf drei anpassen und ein bisschen besser, aber ich muss immer noch einige Anpassungen vornehmen und diese Luft, weil es bereits einige eingebaute Eigenschaften in ihnen gibt . Also, jetzt sehen wir das, wenn ich es inspizieren. Also habe ich meine Polsterung dort. Also habe ich dort etwas Padding, und es muss bis zum vollen verfügbaren Padding berechnet werden. Sie sehen also, dass es sich jetzt wirklich gut anpasst, und wir müssen dort noch einen Bruchpunkt setzen, und meine Sidebar speichert automatisch darunter. Lassen Sie uns also eine weitere Medienabfrage hinzufügen, die in der nächsten Lektion hinzugefügt wird, und das wird unsere endgültige Standardgröße festlegen, und es wird auch einfach das Menü umschalten. Dies wäre also der Punkt, an dem wir vielleicht, wenn wir unter 500 Picks schrumpfen, hier wollen wir unser Menü wirklich anpassen. Das kommt also in den nächsten Lektionen. Okay, 14. 14 Hinzufügen von weiteren Medienabfragen: in der letzten Lektion haben wir uns angesehen, wie wir einen Bruchpunkt und eine andere Sache dazu setzen können. Ich will nur die Fußzeile dort. Also erkannte ich, dass ich mich nicht richtig um Footer gekümmert hatte, also lassen Sie uns auch unsere Anpassungen vornehmen. Also, weil wir etwas von dieser Polsterung entfernt eso Lassen Sie uns unser Eintopfen auf Null und vielleicht werden wir nicht einmal die Höhe anpassen. Das hängt also alles davon ab, wie wir mit unseren Inhalten umgehen wollen. Texten Sie die Zeile. Wir brauchen keine Farben zu wiederholen. Wir müssen es nicht wiederholen. Wir müssen es nicht wiederholen und wollen es vielleicht 100% schicken. Also werfen Sie einen kurzen Blick und sehen Sie, wie das aussieht. Es ist nicht viel besser, und ich denke, dass wir vielleicht unsere Medienabfrage stellen sollten. Unser Bruchpunkt bei 600 Picks ist vielleicht wollen mehr Navigationsmenü-Elemente und so weiter. Dies gibt uns also etwas Flexibilität und Raum, um unsere Inhalte zu aktualisieren, und ich möchte auch die Art und Weise, wie der Header behandelt wird, loswerden. Eso, dass abgerundete Seiten um diesen Header. Eso will das auch loswerden. Also lassen Sie uns hinzufügen, dass in den Höhen, lassen Sie uns Eintopfen von Null Grenze Radius Null tun und nach auf Farbe, können wir entfernen und Höhe, die wir entfernen können. Es sei denn, wir wollen natürlich eine andere Höhe einstellen. So sieht es jetzt viel mehr ausgerichtet aus, sitzt auf einem Quadrat in einem Quadrat und hat uns schön ausgerichtet. Beginnen wir mit dem Aufbau für eine minimale Größe als auch. Manchmal möchten Sie also eine Standardgröße Ihres Inhalts festlegen, unter der Sie möglicherweise nicht verschieben möchten . Also lassen Sie uns unsere Medienabfrage kopieren und ich werde nach unten scrollen und es an einem anderen Bruchpunkt setzen . Also diese 1 600 wählt so manchmal werden Sie mehrere Medienabfragen setzen, die ich gesehen habe abhängig davon, wie viel Customizing und wie viel Sie wirklich wollen, dass Ihr Bildschirm angepasst wird . Hier gibt es eine Reihe von verschiedenen Optionen, um Ihre Medienabfragen zu setzen. Eso lassen Sie uns unseren Wrapper mit setzen und ihn einfach auf auto mit setzen, also funktioniert dies genauso, wo es automatisch zentriert. Das schafft einen Auto-Mythos und so weiter. Ich brauche keinen der Polsterung, weil ich es bereits am letzten Bruchpunkt entfernt habe . Wählen Sie aus. Schau dir ihren Header an, damit wir das nicht wirklich einschließen müssen, weil ich denke, dass das Ordnung ist. Der nächste ist unser Content-Bereich. Eso sind Inhalte möglicherweise gehen, um den Inhalt toe mit auto zu sitzen. Entferne den Schwimmer, damit das ist. Float auf none und lassen Sie uns eine Marge von Null geben, nur um sicherzustellen, dass wir keine hinreichenden Margen drin haben . Also Marge Null und wahrscheinlich genug, um das Gleiche für die Seite zu tun. Ein zweites Element, so dass voll mit automatischer nimmt mit entfernt die schwimmende. Und für die Sidebar. Also haben wir uns schon darum gekümmert. Vieles davon kann sein, was wir tun möchten, ist auch die Polsterung zu entfernen. Es ist bereits klar, beide, und lassen Sie uns dies mit dem Auto ändern, so dass konsistent und Fußzeile waren. Lasst uns das auch mit dem Auto machen. Sehen wir uns das jetzt an. Wann immer wir es unter 600 schrumpfen, sehen wir, dass es sich gut vorrätig und den Inhalt in einer schönen, gepflegten, sortierten Art und Weise präsentiert den Inhalt in einer schönen, gepflegten, gepflegten, . Und dann, wenn wir größer werden, bekommen wir alle unsere Kolumnen präsentiert. Und wenn wir kleiner werden, wären die beiden wichtigsten Spalten und dann die Seitenleiste wahrscheinlich etwas , das nicht so wichtig ist. Und die wichtigsten Inhalte, die wir immer an der Spitze halten wollen. Im Wesentlichen ist dies unsere Website jetzt. Und in der nächsten Lektion müssen wir dieses Navigationsmenü aktualisieren. Also sehen wir, dass es, wenn wir es verkleinern, nicht wirklich gut schrumpfen. Also, das ist etwas, das wir definitiv sehen, und wir werden uns darum kümmern in der kommenden Lektion. 15. 16 Setup reaktionsfähige navbar: in dieser Lektion aktualisieren wir unsere Navigationsleiste. So wie wir schauen wollten, wann immer es auf einem kleinen Bildschirm ist. Wir möchten also, dass eine Schaltfläche dort anklickbar ist und das Navigationsleistenmenü öffnet, und wir wollen nicht, dass es horizontal vorrätig ist. Wir möchten die standardmäßige vertikale Stapelreihenfolge zurückbringen. Also lasst uns darum kümmern. Und in dieser Lektion, ihre Redakteurin zu öffnen. Und wir wollten es auf dem Medienbildschirm einrichten, wenn es weniger als 600 Picks ist. Also haben wir unsere maximale Breite von 600 alles, was weniger ist, als das wird diese Eigenschaften hinzugefügt werden. Also lassen Sie uns den Editor öffnen und auch den Anzeigebereich hier auf der rechten Seite öffnen. Wir aktualisieren es, um die neuen Änderungen dort zu sehen. Ich kann es auch wieder verknüpfen. Da ist O, dass nun Klammern wieder verlinkt sind und lassen Sie uns ihr Navigationsmenü öffnen. Also wollen wir es idealerweise auf einem wirklich kleinen Bildschirm machen. Das hat sich also geöffnet. Und jetzt ist es in unserem Styling da. Also zuerst, lassen Sie uns einige drehen, lassen Sie uns die Listenelemente aktualisieren. Also lassen Sie wieder hier oben gehen, genau wie das, was wir vorher getan haben, wo wir alle unsere Navigationselemente dort haben. Und dann, was wir tun werden, ist, dass wir es verstecken. Also muss ich einige Updates für wahrscheinlich ein paar von diesen machen. Also werde ich es einfach kopieren und einfügen, und ich werde einen Platzhalter setzen. Also weiß ich, welche es kopiert und eingefügt haben. Also 1. 1 die eine geordnete Liste Liste Stil eng, und wir sehen, dass dieser wahrscheinlich nicht viele Änderungen benötigt. Das ist, wo wir tatsächlich in der Anzeige hinzufügen werden. Keiner so angezeigten Block für jetzt. Und dann werden wir das so aktualisieren, dass es keine ist, sobald wir bereit sind und als Nächstes sind. Oder wir könnten sogar tun, es auf den Listeneinträgen sowie s. Wir sehen, dass die Listenelemente haben flott von links. Lassen Sie es uns auf keines schweben. Also befreien Sie sich das und wir sehen, dass es sofort den richtigen Abstand dort einnimmt. Und lassen Sie uns diese aktualisieren, um in Zeile angezeigt zu werden. Wir werden das tatsächlich in der Schlange entfernen, weil wir es zurückbringen und lügen. Lasst es uns jetzt im Block belassen. So zeigen Block und schnell einen Blick und stellen Sie sicher, dass s so haben wir diese sind im Line-Block jetzt, Also lasst uns loswerden Display in Zeile und lassen Sie es einfach in der Linie wie das und vielleicht aktualisieren diese zurück und lassen Sie uns die Text auf der linken Seite. Also werden wir das in der Reihe loswerden, fügen einige zusätzliche Eintopf hinzu, oder entfernen es etwas von der Polsterung, weil wir brauchen, um weniger Immobilien auf diesem ein. Textdekoration Wir können das loswerden, wenn wir loswerden können und dass, wenn wir eso für den Schweber loswerden , wir auch keine Änderungen für den Hunger vornehmen müssen. Also schauen wir uns das mal an. Nein. Und wir sehen, dass so unsere Speisekarte auftaucht. Also könnten wir im Idealfall tatsächlich in unserer Menüleiste hinzufügen müssen. Also lassen Sie uns dieses hier zeigen. Also, jetzt, wo wir dieses hier ursprünglich versteckt haben, suche ich nur nach diesem Mein Symbol. Lassen Sie uns dies aktualisieren und fügen Sie das dort hinzu. Und anstatt keine anzuzeigen, werde ich den Block anzeigen. Also, dass man da oben auftaucht. Wir wollen es tatsächlich auf die rechte Seite ziehen eso statt es dort auf der linken Seite sitzen zu lassen und standardmäßig wollen wir es immer auch auf der rechten Seite haben. Und wir wollen auch diese Änderung ausblenden, dass keine angezeigt wird. Also die Idee hier ist, wenn dies angeklickt wird, dann zeigt es das Menü-Symbol an und wieder, je nachdem, was Ihre Vorlieben, möchten Sie es vielleicht nach rechts ziehen. Du willst es wieder nach links halten. Dies hängt von der Präferenz ab. Aber wenn wir es nach rechts ziehen wollen, könnten wir einfach einen Text die Zeile machen, und wir können es auf der rechten Seite ausrichten, so dass kümmert sich um unsere wo Navigationsmenü erscheint. In der nächsten Lektion werden wir noch ein paar Updates und Verbesserungen vornehmen, um es bereit und bereit zu machen und bereit für das Hinzufügen von JavaScript für J-Abfrage Toe vorzubereiten. Fügen Sie zusätzliche Funktionen zu unserer Webseite hinzu. Also all das kommt in der nächsten Lektion 16. 17 Setup-Menü für den toggle: Ich wollte hier eine Anpassung vornehmen, weil wir bemerkt haben, dass sie nicht voll mit aufnehmen . Wir wollen also idealerweise, dass sie das volle mit aufnehmen, damit wir das erreichen können, indem wir 100% hinzufügen. Also jetzt haben wir unsere Navigationsleiste richtig aussehen ein paar Dinge, die ich genauso gut will . Also möchte ich mich um die Höhe des Headers kümmern. Also der Header-Abschnitt hier. Also haben wir einige Standardhöhen festgelegt und normalerweise auf den kleinen Bildschirmen, wo der Platz begrenzt sein könnte , möchten wir vielleicht auch nur diese Höhe. Wir haben es gesagt, automatisch zu tun Polsterung bei Null. Dies ist nur, um sicherzustellen, dass auf den kleineren Bildschirmen alles so aussieht, wie wir es präsentieren wollen. Ich sollte das noch mal verstecken. Also lassen Sie uns nach unten scrollen, wo wir hatten eine Norden Liste und Blitz-Anzeige. Keiner. Was wir also tun müssen, um dies zum Laufen zu bringen, müssen wir einige Javascript-Funktionalität hinzufügen, also machen Sie dies klickbar. Und sobald es angeklickt wird, werden wir das Navigationsmenü anzeigen. Wir gehen im Wesentlichen umschalten, dass auf eine geordnete Listeneigenschaft dies einrichten und in einer Klasse hier hinzufügen . Also Klasse Und diese Klasse auf dem kleineren Bildschirm ist so, dass dies nur innerhalb des Stils verwendet werden kann . CSS Also, was ich tue, ist, dass ich hier auf der UL eine Klasse hinzufüge, und hier werde ich tatsächlich den Anzeigewert s oh umschalten, das wird viel einfacher sein, indem ich die Klasse tatsächlich hinzufüge und entferne, anstatt sie hier zu aktualisieren und Aktualisieren und Suchen nach dem Element. Du könntest es entweder Krieg machen. Aber lass es uns einfach so machen, wo wir die Klasse hinzufügen und entfernen. Also wird die Klasse nur ein kleiner Bildschirm sein. Und jetzt, anstatt dieses hier zu tun, werden wir kleine Bildschirmanzeige keine machen und sicherstellen, dass auf dem Vollbild, den wir tatsächlich anzeigen, das wird es einfach tun, direkt unter dort und eine Beseitigung dieses einen Display . Keiner. Und aber wir haben den falschen dort loswerden, also stellen Sie sicher, dass dieser Block angezeigt wird. Also lasst uns das einfach auffrischen und wir sehen das auf den größeren Bildschirmen. Eso, das verschwindet, so dass Klassen jetzt dort und auf den kleineren Bildschirmen wirksam werden , wird es tatsächlich verschwinden lassen. Und ich musste das einfach speichern und auffrischen. Jetzt sehen wir, dass alles richtig funktioniert, und alles, was wir tun müssen, ist, dies einfach umzuschalten. Also lassen Sie diese Schaltfläche anklickbar diese ein- und ausschalten und das wird das Menü anzeigen und sie in Ihnen verstecken . Also, das kommt in der nächsten Lektion. 17. 19 Hinzufügen des jQuery event: Sind Sie bereit, dynamische Interaktion hinzuzufügen? Also lasst es uns mit J Query machen. Also habe ich bereits in der J. Corey Library hinzugefügt . Sie können es in einer Reihe von Quellen hinzufügen. Sie können sogar auf die G-Abfragewebsite gehen, und von hier aus können Sie die G-Abfragequelldatei herunterladen, oder Sie könnten darauf verlinken, wie ich es mit der gehosteten Bibliothek getan habe. Die Wahl liegt also bei Ihnen. Und im Wesentlichen bringt dies all diesen JavaScript-Code mit sich, und Sie können auf eines dieser JavaScript-Schnipsel zugreifen, das J-Abfrage ist und Ihnen eine ganze Reihe von Funktionen bietet. Das ist wirklich nützlich, und es ermöglicht Ihnen, schneller in dieser dynamischen Funktion als Sie in der Lage, mit JavaScript. Also, Sie Recht, Jake Sorgen im gleichen Format wie JavaScript. Sie bringen es in Ihre Webseiten auf die gleiche Art und Weise, wie Sie Skript-Tags eingeben, und fügen Sie dann Inhalt zwischen den Skript-Tags hinzu. Mit Jake Sorge, die Art und Weise, wie es funktioniert, ist es die Interaktion innerhalb des Dom. Und wenn wir hier auf die Website gehen, so hat es einige Informationen hier, wie man J Abfrage hinzufügen und so weiter. Also im Wesentlichen Interaktion. Die Kuppel ist ein Siris von all den verschiedenen Elementen auf Ihrer Website. Wir sehen, dass in unserem Chrome-Konsul hier, dass wir Zugriff auf jedes Element haben alle diese Eigenschaften und Werte, auf die wir wirklich leicht zugreifen können, hat . Sie haben also alle diese Ereignisauslöser. Also die, nach der wir in dieser Lektion suchen, möchte ich einen Ereignisauslöser hinzufügen, damit jedes Mal, wenn auf diesen Menüpunkt geklickt wird, eine Funktion ausgelöst wird. Also sehen wir das, wenn ich zu ihm gehe, ich habe diesen eso Ich habe hier eine ganze Reihe von Eigenschaften, und ich habe eine Reihe von verschiedenen Ereignis-Listener. Also wollte ich den On Click-Ereignis-Listener und welche G-Abfrage hinzufügen. Dies ist wirklich einfach zu tun, da es mit G-Abfrage einfach macht, in Klassen hinzuzufügen und Elemente für Ihre Klassen zu identifizieren. Mit JavaScript ist es ein wenig schwieriger, diese verschiedenen Elemente mit den Klassen zu isolieren. Benötigt ein bisschen mehr Gericht, also lass uns aufstellen. R J. Query und Jake sind im Wesentlichen geladen, wenn Ihre Website geladen wird, so dass wir das als Funktion und G Abfrage von s Funktionen innerhalb des Dokumentobjekts hinzufügen können eso Wir müssen sicherstellen , dass unser Dokument geladen ist, so dass Sie es entweder tun können Anzahl der verschiedenen Möglichkeiten. Sie könnten es mit einer Funktion tun und so hinzufügen und im Wesentlichen aufrufen, damit der J coury hier reingehen würde. Oder in der Regel sehen Sie es als Dokument geschrieben. Und dies ist eine Methode, die ausgeführt wird, wenn das eigentliche Dokument fertig ist. Also könnten wir das Dokument fertig machen und dann die Funktion dort drin haben. So oder so wird das gleiche erreichen, wo wir in der Funktionalität für Jake sorgen zwischen diesen geschweiften Klammern hier hinzufügen und dieses Wesentliche wird abfeuern wenn die Morgendämmerung geladen und bereit ist zu gehen. Also, wie ich sagte, ist es wirklich einfach und unkompliziert die Adam J-Abfrage und erstellen Sie diese Ereignisse. Also haben wir hier bereits eine Klasse, die dieses bestimmte Symbol unterscheidet, und wir können einen Ereignis-Listener auf diese Klasse setzen. Also lassen Sie uns das aktualisieren und Esso in setzen, um auf die verschiedenen Elemente zuzugreifen, die wir das Dollarzeichen machen , und dann unterscheiden wir hier, genau wie wir es mit CSS tun, genau wie wir es mit CSS tun, das Element, das wir diese Interaktion erstellen möchten, und den dann Handler , die wir tun wollen. Die Ereignisbindung, die wir tun möchten, ist ein Klick. Es gibt also unsere Klick- und Funktion und wir können auch die Parameter in e übergeben. Eso sind die, wenn du willst. Wenn Sie einen Anker SMS hatten und die Standardeinstellung verhindern usw., könnten Sie dies als Übergabe dieser Ereignisinformationen tun. Aber was wir tun wollen, ist wirklich einfach und unkompliziert. Also, was ich zuerst tun werde, ist ein Konsolenverzeichnis, das e Ereignisinformationen, damit Sie eine bessere Vorstellung davon bekommen können , was Jake hinter den Kulissen macht. Wenn Sie also etwas an die Konsole ausgeben, im Wesentlichen das, ist dies im Wesentlichen das,was hier im Anzeigebereich sichtbar ist. Ich schalte das aus, öffne die Konsole. Und ich schätze, ich muss eine kleinere machen, um es zu sehen und nie klicken wir auf diesen Button. Wir sehen, dass dieses Ereignis ausgelöst wird, und wir haben Zugriff auf all diese Informationen. Wir sehen also, dass wir bereits Informationen über dieses bestimmte Element kennen, das alles durch das Ereignis weitergegeben wurde . Wir können diese Informationen in Jake Worry verwenden, aber wir müssen nicht wirklich viel mit der J-Abfragefunktionalität tun. Alles, was wir tun wollen, ist, dass dieser Menüpunkt tatsächlich umschalten. Wenn also darauf geklickt wird, möchten wir das umschalten und diese Klasse hinzufügen und diese Klasse entfernen. Also lassen Sie uns das auch tun, damit wir das Entlüftungsobjekt nicht wirklich nutzen müssen. Aber ich möchte nur veranschaulichen, dass es da ist, wenn Sie es nutzen wollen. Was wir also tun wollen, ist, dass wir einen Toggle wollen, diese Klasse, die wir hinzugefügt haben. Das ist also diese kleine Bildschirmklasse, und wir wollen das ausschalten. Werfen wir nun einen Blick auf unsere Navigationsleiste, aber Bar. So wie wir es auswählen und genau wie wir es mit unserem JavaScript tun, können wir unseren Auswahlprozess in demselben Format machen, damit wir es identifizieren können, dass wir knave Bar haben . Also gleich hier drüben, auf die gleiche Weise. So jetzt bar und wir wollen hinzufügen und entfernen Sie die Klasse aus der UN geordnete Liste. Also, das ist jetzt Bahr ul und wir wollen die Klasse entfernen und wir werden angeben, welche Klasse wir entfernen möchten. Also Sie l wählt das Element aus. Dies ist also der Element-Selektor, genau wie über ein Jahr, in dem wir als diesen Ereignis-Listener hinzugefügt haben. Und die Methode, die wir tun möchten, ist die Klasse umzuschalten. Wie wir aus der Beschreibung sehen können, fügen Sie eine oder mehrere Klassen von jedem Element in der Menge der übereinstimmenden Elemente hinzu oder entfernen Sie, also je nachdem, dass wir uns dieses übereinstimmende Element ansehen und was es tun wird. Es ist in einem Toggle der Klasse versteckt, und jetzt müssen wir angeben, welche Klasse wir wollen. Otago Also gehen wieder hier oben und wir wollen angeben, dass diese sm-Bildschirm ein- und ausschalten , wenn es angeklickt wird. Und das war's. Gehen wir zurück zu unserer Webseite, um sie zu aktualisieren. Und jetzt sehen wir, wann immer wir umschalten, öffnet sich unser Menü und schließt, und die wirklich Notwendigkeit, es auf diese Weise zu tun, ist, dass, wenn wir zu der größeren Bildschirmgröße gehen , die wir eigentlich nicht verstecken und zeigt das Menü an, weil alles von dieser Klasse abhängig ist, und wann immer wir das Menü geöffnet haben, bleibt es offen. Also, selbst wenn wir Größe und schrumpfen es nach unten, die die meisten Leute werden nicht wieder Dimensionierung Ihrer Webseite sein, aber es ist immer gut zu wissen, dass es da ist, falls Sie es brauchen, es ist also jetzt haben wir ein voll funktionsfähiges Menü alles bereit zu gehen. Wir können es jederzeit öffnen und schließen und mit ihm innerhalb unserer Webseite interagieren. Also die nächste Lektion wollte ich in etwas wirklich ordentlich hinzufügen, weil so sehen, dass wir nicht wirklich sicher sind, auf welcher Seite waren. Also, selbst wenn wir zum Index Punkt html gehen, sollte dies tatsächlich hervorgehoben werden, was uns eine bessere Vorstellung in einem besseren Sinne davon gibt, auf welcher Seite wir sitzen. Also werde ich dir zeigen, wie man aufnimmt, was du bist. L waren bei Match es in mit der Navigationsleiste Sie, Earl, und fügen Sie in einer Klasse von vielleicht aktiven s hinzu, so dass wir dies hervorheben können, zusätzlich dazu, dass es hervorgehoben wird, wenn Sie über schweben. Und das ist eine wirklich gute Benutzererfahrung, weil es den Benutzern eine visuelle Darstellung der Seite gibt, auf der tatsächlich sitzen. Also, das kommt in der nächsten Lektion. 18. 21 Klassen auf dem Fliegen: die letzte Lektion, die wir Ihnen gezeigt haben, wie Sie J Curry hinzufügen und ein voll funktionsfähiges Ereignis erstellen , das ausgelöst wird, wenn Sie mit Ihrer Webseite interagieren. Das war also etwas, das wirklich einfach hinzugefügt werden kann. Und wir haben uns auch unsere Website angesehen und wir haben uns Gedanken gemacht, dass das, was wir hinzufügen müssen und bestimmen müssen, welcher dieser Menüpunkte die aktuelle aktive Seite ist. Und wir könnten dies in G. Korea's Well tun , weil wir, wie wir gesehen haben, eine Menge Informationen haben, die uns innerhalb von J Abfrage zur Verfügung stehen und wir sehen, dass wir Zugriff auf all diese Informationen haben . Wir können wirklich leicht auf jeden Teil unserer Webinhalte zugreifen. Was wir also passieren wollen, ist was auch immer unsere Website lädt, wir müssen ein aktives Element so aktiv setzen, vielleicht nennen es aktiv eingerichtet. Dies ist also nur eine Funktion, wann immer die Website lädt. Ich möchte diese Funktion ausführen, und nur hier unten werden wir einrichten, dass die Funktionsfunktion im Wesentlichen eine Reihe von Befehlen besteht , die Sie gruppieren und einfach aus Ihrem Quellcode aufrufen können. Also, diese Funktion wird zuerst, dass wir unseren Weg aufnehmen müssen. Also, wo Sie sind l Pfad oder so müssen wir wissen, welche Seite waren auf. Wir wollen sicherstellen, dass wir diesen Index Punkt html aufnehmen können und wir können es innerhalb unserer Webseite nutzen . Also lasst uns das Fensterobjekt machen. Und das ist im Wesentlichen ein weiteres dom-Objekt, das uns Informationen gibt. Und wir können tatsächlich sehen, was in dieser Browserleiste ist hier, indem Sie Fenster verwenden und Ort tun , die ihre Position übernehmen sollte, gibt die Position eines Objekts Informationen , aber die aktuelle Position und lassen Sie uns Pfadname so tun den Pfad des tatsächlichen Objekts. Und ich werde einfach nur Konsul, loggen Sie das Ihren URL-Pfadwert aus. Also im Wesentlichen, Sie sind l Pfad hält den Wert der Fensterposition, Pfad, Name, und dies gibt uns die Möglichkeit, es zu verwenden. So sehen wir, dass wir diesen Index Stop html haben. Also jetzt müssen wir nur einen Blick darauf werfen und es tatsächlich innerhalb unserer Menüpunkte hier abgleichen und sehen, welche tatsächlich repräsentiert wird. Eso eines der Dinge hier auch, so dass Sie manchmal zusätzliche Inhalte in Ihrer Zeichenfolge haben und so weiter. Also das ich Dies könnte potenziell Ihre Zeichenfolge eso vermasseln, mit der es jetzt nicht wirklich in diesem Fall ist. Aber Sie müssen vorsichtig sein, dass Sie tatsächlich mit dem richtigen Pfad übereinstimmen. Eso stellen Sie sicher, dass immer Konsole, melden Sie sich, um sicherzustellen, dass Sie auf den richtigen Pfad zu bekommen. Und das ist dasselbe, was du in deinen Hyperlinks hast. Also haben wir diese Schrägstriche und so weiter. Also lassen Sie uns jetzt unseren Editor öffnen und wir müssen sehen, dass wir durch die verschiedenen Navigation schauen müssen , die Sie hier sind und sehen, welche passt. Und wenn wir eine Übereinstimmung finden, dann müssen wir nur eine Klasse dort hinzufügen. Lassen Sie uns also diese Schleife erstellen. Also werden wir durchlaufen. Wir können einfach nicht haben und tun eine für irgendwelche Hyperlinks innerhalb des nav. Und ich muss um diesen Zeh zitieren, es als ein Element eso für jeden identifizieren und würde dasselbe tun. Wir haben hier eine Funktion, also hier drin, was wir im Wesentlichen tun, ist, dass wir jedes einzelne dieser Elemente durchlaufen werden . Und dann werden wir wieder wertvoll zurückkehren. Eso können wir den Wert verwenden. Also vielleicht, was ich zuerst tun kann, ist, dass ich tröste, abmelde und was das ist. Das ist der Container. Dies ist das Dies ist jedes Objekt, das durch den Gruß aufnimmt. Mal sehen, was jetzt passiert. Also, wenn ich durchschaute, wir sehen, dass wir für die Artikel hier aufgelistet werden, weil wir durch jede schleifen und wir werden in jedem sehen. Wir haben eine ganze Reihe von Informationen, damit wir tatsächlich abholen können, wo sich der URL-Standort befindet . Eso schwächen dio, finden Sie heraus, wo die h ref ist, Also, wo es geht, um es mit dem aktuellen und Salon entsprechen. Werfen wir also noch einmal einen Blick auf unser Gericht, und während wir das durchlaufen, können wir angeben, welche Attribute wir auch tun wollen, und ich denke, das ist wahrscheinlich der beste Weg, um zu überprüfen, ob unser Wert innerhalb von , die Attribute. Also lassen Sie uns vielleicht das in eine Variable setzen und es in etwas namens H ref enthalten. Also das ist ein Samos der Euro-Pfad nur eine variable Zeichenfolge und wir werden das verwenden, aber wir werden genauer sein. Ich möchte das ganze Objekt nicht zurückgeben, also bekomme ich ein Attribut, und der Attributwert, den ich zurückgeben möchte, wird h rau sein. Also nimm den Konsul nochmal. Und jetzt kann ich Ihnen die H-Wiederholungen zeigen, während wir sie durchschauen. Werfen wir einen Blick auf das. Also sehen wir, dass denken Sie daran, die 1. 1 hier wird das Mädchen von hier abholen, und dann das. Die nächste Zeile mit dem Namen 71 sieht Index über Dienstleistungen und Kontakt. Es ist also tatsächlich, diese Informationen direkt von der HTML-Seite zu bekommen. Wenn Sie diese aktualisieren möchten, würden diese ebenfalls aktualisiert werden. Und das ist ideal. Und das ist, wo wir diese dynamische Interaktion und diese Fähigkeit mit innerhalb unseres Jake bekommen wo Also lasst uns jetzt eine bedingte Anweisung schreiben und einfach eine schnelle Überprüfung durchführen, um zu sehen, wenn ja, den u R L-Pfad. Und lassen Sie uns sicherstellen, dass wir Sub-String Null haben, ist eine äquivalente jede aufgeraute Länge im Wesentlichen, was dies ausgeben wird. Es wird ausgeben, dass h rau. Also könnte ich Ihnen nur zeigen, dass das, was es tun wird, im Wesentlichen ausgegeben wird. Dieser Pfad, den wir in allem haben, was es tut, ist nur sicherzustellen, dass wir nicht wirklich etwas Extra drin haben, das hinzugefügt wird und so weiter. Natürlich, wenn Sie nichts extra haben, wenn Sie nichts Extra erwarten, können Sie einfach eine Übereinstimmung machen und nur sehen, ob Sie alle Pfad gleich H rau sind. Wir könnten sogar einen absoluten gleich H rau machen. Und wenn es so ist, dann werden wir vielleicht nur für einen Allergologen Konsul ausgesperrt und einfach viel nehmen. Lassen Sie uns jetzt sehen, was passiert, wenn wir die Seite aktualisieren. Also haben wir unsere ersten Angebote. Wir haben unsere Linie 67. Also sagt uns, worauf du bist, ich war auf. Und dann ist hier, wo wir es tun. Die Schleifen wurden getan 71 72 wir fanden ein Spiel 70 eins und 72 Nicht übereinstimmen. Also kein Spiel 71 72 nicht übereinstimmen 71 72 nicht viel. Also im Wesentlichen, wir machen all diese Spiele und ich werde diese NPR nur auskommentiert halten, falls Sie um Experiment mit dem s spielen wollen Oh, das ist nur mawr definierte Art, um sicherzustellen, dass Sie das bekommen. Eigentlich sind Sie ein Pfad mit der Länge und stellen sicher, dass er da ist, damit Sie das entfernen können. Oder Sie könnten es so oder so tun, nur um sicherzustellen, dass Sie tatsächlich diesen Weg bekommen. Aber im Moment, das ist sehr einfache Websites. Wir haben ihren Indexpunkt HTML. Wir passen es nur mit dem H Rough an. Wenn alles gut aussieht, dann müssen wir nur eine aktive Klasse zu diesem Element hinzufügen. Und wie wir bereits wissen, schleifen sich durch jeden einzelnen von ihnen. So ist es einfach, aktive Klasse zu aktualisieren und hinzuzufügen, und wir wollen die aktive Klasse zum Elternteil hinzufügen. Hier können wir uns schließen, um den nächstgelegenen Listeneintrag zu finden. Der nächste wäre also offensichtlich das Elternteil, und alles, was wir tun müssen, ist Klasse hinzuzufügen. Und hier können wir angeben, welche Klasse wir hinzufügen möchten, und das Hinzufügen in dieser aktiven Klasse wird uns eine andere Farbe geben. Also müssen wir in unser CSS springen und ein Update in anderer Farbe für die aktive Klasse hinzufügen eso Wir können es entweder auf die gleiche Weise tun, wie wir es hier unten haben. Also vielleicht werde ich das einfach aktiv nennen und hier runter gehen und hier eine aktive Klasse in unser Haupt-CSS hinzufügen . Also gehen wir dorthin, wo wir alle unsere Navigationselemente auf gehen bis an die Spitze hier. Also haben wir alle unsere Navigationslistenelement A. Also wollen wir sehen, ob es eine aktive Klasse hat, die ich eine andere Hintergrundfarbe setzen möchte . Kopieren Sie die Acht. Und ich möchte tun, wo ich in aktiv hinzufügen möchte, weil wir eine aktive Klasse hinzufügen werden. Und von diesem wollen wir aktualisieren, was die Hintergrundfarbe ist. Also, wenn es ein Listenelement von seinem Hyper-Lincoln ist, wenn es aktiv ist, dann lass uns unsere Hintergrundfarbe aktualisieren. Also statt blau, lass es uns rot machen. So sticht es wirklich hervor und gehe zurück in unsere Websites und aktualisiere es und tauchte wieder in unser CSS. Und jetzt werden wir sehen, ob es aktiv ist. Dann werden wir das CSS aktualisieren. Werfen wir einen Blick und inspizieren unsere Elemente. Sehen Sie, wenn wir haben aktiv ist hinzugefügt oder nicht, so müssen Sie die Seite aktualisieren, wahrscheinlich, um zu sehen, ob speichern Sie diese und speichern Sie das. Und wir sehen, dass jetzt werden wir aktiv wird auf der Liste Element hinzugefügt eso Wenn wir wenn wir gingen über, wenn wir ein Boot eingerichtet, das wäre auch aktiv. Eso gehen wir zurück in unser CSS und vielleicht wollen wir unsere aktive auf das gleiche wie unser Hover setzen damit wir das auch tun können. Vielleicht ergibt das mehr Sinn. Also ketten Sie sie einfach zusammen mit dem Kama, entfernen Sie es dieses und sehen, wie das aussieht. Jetzt, wenn ich es aktualisiere, wissen wir, welche Seite wo aktiv ist. Es fügt automatisch eine aktive und jetzt, wenn wir den Mauszeiger über sie bewegen, können wir sehen, dass wir immer noch auf zusätzliche Seiten ändern können. Also die nächste Reihe von Lektionen, die wir bauen den Rest der Website, indem wir über Dienste und Kontakt hinzufügen und Links zu der CSS und G Abfrage hinzufügen, die wir in den letzten Lektionen verwendet haben , Also all dies kommt bis in die nächste Reihe von Lektionen. 19. 22 Seiten Tweaks und Optionen: jetzt, da wir fertig sind, unser JavaScript hinzuzufügen, haben wir eine voll funktionsfähige Website, die alles einsatzbereit ist. Und jetzt können wir uns die Aktualisierung unserer Inhalte ansehen. Also eines der Dinge, die ich hinzufügen wollte, ist, dass ich hier ein anderes Bild hinzufügen möchte, also werde ich Loren Pixel verwenden. Und was Lauren Pixel tut, ist es uns erlaubt, in tatsächlichen Bildern hinzuzufügen, also im Gegensatz zu platzieren, halten Sie es dort, wo wir einen großartigen Bereich mit den Pixeldimensionen oder den Bilddimensionen haben . Lauren-Pixel gibt mir tatsächliche Bilder. Also lasst uns das aktualisieren und das in unseren Code hinzufügen. Also werde ich ein Bild hinzufügen. Vielleicht haben wir ein Bild drin oder eigentlich, wahrscheinlich besser noch, wir haben kein Bild zwischen all unseren Inhalten, und es wird ein schönes, großes weißes Bild sein . Werfen wir einen Blick auf unsere Webseite. So sieht es so aus wie jetzt, jetzt haben wir unser Bild kommt in ein wenig langsam, aber so werden die Bilder geladen und es ist ein kleiner Welpenhund. Also ja, so ist im Wesentlichen, wie wir unsere Website erstellen können, und das ist die Sache mit Lauren Picks. So wissen Sie eigentlich nie, was Sie in Ihre Bilder bekommen werden, also wirklich brauchen. Aber Sie haben hier einige Optionen, um bestimmte Kategorien von Bildern auszuwählen. Wenn Sie eso wollen, brauchen Sie wirklich nette Brauchfunktion. Und das ist immer wirklich, ah, viel beeindruckender für Leute, die ihre Website nutzen und nutzen, wo sie tatsächlich etwas sehen können, das anstelle von nur einem Haufen von Inhalten und diesen Platzhaltern Bilder können Ihre Webseite und Ihr Design wirklich beliebt machen und ein wenig benutzerfreundlicher aussehen. Eine andere Sache, die ich in Luft Google-Fonds hinzufügen möchte. Also Google-Schriftarten. Wir haben hier viele Optionen für Schriftarten auf. Wir können wirklich einfach gehen und wählen, was Spaß wir wollen und es in unsere Website. Also für diesen Fall, vielleicht werden wir nur s, dass ich hier zufällig etwas auswähle. Und, natürlich, wenn Sie Ihre Website entworfen sind, stellen Sie sicher, dass Sie ein wenig mehr Zeit damit verbringen, weil es wichtig ist. Teoh hat wirklich den richtigen Spaß, denn Schriftarten können wirklich einen großen Unterschied innerhalb Ihrer Website machen. Eso nehmen Sie vielleicht diesen Droiden Sinn und es gibt verschiedene Möglichkeiten, es auf Ihre Website zu bringen. Es gibt also einen Standard, den Sie mit dem Stylesheet verknüpfen können. Aber ich verwende, importiere und importiere es normalerweise direkt in mein CSS, besonders für Projekte wie dieses. Wo ich verlinke, werde ich auf mehrere Webseiten verlinken. Das erspart mir also die Mühe, tatsächlich wenn ich ein Update mache und jede Seite aktualisieren muss, und wir wollen definitiv nicht darauf eingehen. Also lasst uns das öffnen und das öffnen. Und jetzt lassen Sie uns in Familie Droid so früh wie unsere Schuld bekommen und wir sehen sofort unsere Website sieht ganz anders mit der neuen Schriftart eso. Und natürlich ist es immer schön zu spielen und sich die verschiedenen Schriftarten anzusehen, die Sie hinzufügen können. Sie sind aktualisiert. Ich möchte Updates ist, dass, wenn wir es nach unten schrumpfen, sieht aus, als hätten wir eine Menge Inhalt und wir verlieren unser Menü hier an der Spitze. Es ist eine Reihe von verschiedenen Optionen wieder, je nachdem, wie Sie Ihre Website gestalten möchten, machen Sie Ihr Navigationsmenü die ganze Zeit klebrig. Also, nur indem Sie dies aktualisieren und ändern, um es zu beheben statt absolut wurden behoben. Und jetzt, wann immer wir nach unten scrollen, spielt keine Rolle. Viel Inhalt haben wir, wenn wir nach unten scrollen oder Menü ist hier an der Spitze, oder Sie können es auf Lee Gold fixiert haben, wann immer, wo innerhalb einer bestimmten Größe. Also das ist wieder, was auch immer Sie bevorzugen, ich werde es einfach so lassen, wie es jetzt ist, an der Spitze fixiert, weil ich denke, es hat ziemlich viel Inhalt. Und wenn die Benutzer Air Scrollen, Ich möchte immer, dass sie mit diesem Navigationsmenü präsentiert, so dass sie wirklich leicht zu anderen Seiten innerhalb meiner Website navigieren können . Und sie suchen nie und müssen nach oben scrollen und dann navigieren. Also diese Luft nur kleine Dinge, die Sie zu berücksichtigen haben und wieder, je nachdem, wie viel Inhalt. Und in der Regel, wenn Sie eine drei aufrufende Website haben, haben Sie wahrscheinlich eine Menge von Inhalten, die Sie planen. Also nächste Lektion eso. Nun, da wir die Website ein wenig optimiert haben und wir können sie weiter optimieren, machen einige Updates, poundings, Randfarben und so weiter, um wirklich das Aussehen und das Gefühl zu bekommen, dass wir nach eso suchen. Natürlich gibt es unbegrenzte Optionen hier ein dieser Punkt mit verschiedenen Eigenschaften, die Sie einrichten können um wirklich ein gutes Aussehen zu bekommen und das Gefühl, wie Sie es wollen. Aber in der nächsten Lektion werden wir Ihnen zeigen, wie Sie diese Website vervollständigen, beenden, aktualisieren und zusätzliche Seiten erstellen, so dass es eine voll funktionsfähige vierseitige Website ist, alle von Grund auf neu eingebaut, teilen die gleiche Jake Worry, teilen das gleiche Styling. Also, das kommt in der nächsten Lektion. 20. 24 Erstellen Sie zusätzliche Seiten für die Website: diese Lektion. Ich werde Ihnen zeigen, wie Sie Ihre Websites in den letzten Lektionen abschließen können. Wir haben hier mit unserer Website ziemlich viel Arbeit geleistet und unsere Website ist voll funktionsfähig, voll mobil, bereit. Und so ein eso sind wir bereit zu gehen, um unsere letzten Schritte unseres Website-Erstellungsprozesses zu tun. Und das ist nur das Aktualisieren und Erstellen der zusätzlichen Seiten. Also, weil wir eine HTML-Stil-Website, die wir über HTML-Service erstellen müssen, ist HTML und Kontakt HTML und wir können ein wenig herum mit einigen dieser Inhalte spielen. Es gibt eine entscheidende Sache, die wir tun sollten, bevor wir es tun. Alles andere darin besteht darin, unsere Jack J-Abfrage oder ein JavaScript aus unserer Seite zu verschieben , so dass alles, was wir tun müssen, mit einer Skriptdatei verknüpft sind und wir vollen Zugriff darauf haben s, also müssen wir diesen Jake Worry-Link auf dieser Seite behalten. Ich habe eine Datei namens Script dot Js erstellt. Das wird also mein Javascript beherbergen und auf die gleiche Art und Weise, wie wir mit Geek-Sorgen verknüpfen . Ich werde nur mit dem Skript Js als Quelle dieser Datei und dasselbe hier verknüpfen. Es bringt immer noch all diese JavaScript-Funktionalität oder J Corey-Funktionalität in unsere Webseite. Und lassen Sie uns einfach überprüfen, stellen Sie sicher, dass alles noch da ist. Stellen Sie sicher, dass unser Menü, wenn wir es nach unten schrumpfen, damit unsere Speisekarte immer noch da ist. Alles ist voll funktionsfähig. Also sind wir bereit zu gehen, Teoh, dupliziere einfach unsere Seiten und dann können wir den Inhalt aktualisieren. Also noch eine doppelte Überprüfung, weil manchmal Sie wissen, Sie diese Änderungen vornehmen und wenn Sie, bevor Sie das erstellen, alle zusätzlichen Seiten, die Sie wollten, überprüfen Sie immer, weil Sie nicht alle diese Seiten erstellen und dann tun müssen nochmals. Also alles sieht gut aus und ich werde eine Seite namens Boat Got HTML erstellen und alles, was ich tun werde , ist im Wesentlichen meinen Index dot html zu duplizieren. Also, jetzt habe ich ein Boot dot html. Als nächstes brauche ich Teoh Dienste dot html erstellen. So speichern Sie einfach als und tun Sie einfach Dienste dot html. Und schließlich, lasst uns noch eine Rettung machen und wir werden uns mit jedem in Verbindung setzen, um es zu wissen. Und jetzt gehen wir auf unsere Website und sehen, wie das funktioniert. Also, jetzt, wenn wir über Dienstleistungen Kontakt gehen, sehen wir, dass unsere Menüleiste auf der Farbe oder der Seite aktiv ist, die auf waren. Und wie natürlich können Sie dies auch optimieren, so dass Sie es trennen können, so dass Ihre aktive Seite es sieht anders aus als unregelmäßige Seite und so weiter. Lassen Sie uns also ein paar schnelle Anpassungen vornehmen. Also auf der Homepage habe ich gerne diesen Header-Abschnitt, aber auf der Über Seite, na ja, es funktioniert nicht wirklich. Lassen Sie uns sehen, welche Art von Update wir hier tun können. Eso Wir haben unseren Header, so dass wir diesen Header entfernen können. Und hier können wir alle unsere Abschnitte über uns verwenden und so weiter haben nur eine ganze Reihe von Inhalten hier. Das geht vielleicht um die Firma und so weiter und wieder, wir werden diesen Inhalt einfach behalten. Halten Sie die Seitenleiste und eso an. Also denke ich, dass das ziemlich gut ist. Es ist also etwas anders der Abschnitt über mich, weil Sie den Header im Allgemeinen möglicherweise nicht benötigen . Sie können es in halten, je nach Ihrem Design und wie Sie wollen. Präsentieren Sie Ihre Inhalte, wenn Sie irgendwo haben wollen, wo Sie vielleicht die volle mit einem Kreuz. Sie könnten auch einige Anpassungen an Ihrem CSS vornehmen, für das s O. Vielleicht ist die Notwendigkeit, dass Sie einen anderen Stil von Webseiten haben. Eso anstatt diese zu haben, können Sie einfach den Rapper haben und alle Inhalte im Rapper haben. Also wieder, je nachdem, wie Sie diesen Inhalt präsentieren möchten, haben Sie vielleicht einen Abschnitt oder Sie haben einfach ein anderes div hier mit allen Inhalten, so dass wir Div tun und dieses div schließen können. Und dann in diesem Def, was ich tun werde, werde ich etwas davon loswerden. Und vielleicht ist dies ein besserer Weg, um über uns zu repräsentieren. Es hat also all diesen Inhalt, hat immer noch die Fußzeile, und es ist immer noch Rece. Augen ist schön, weil wir nur diesen einen mittleren Containerbereich haben. Dies ist eine schnelle Möglichkeit, einige verschiedene Optionen hier zu entwerfen. Vielleicht möchten Sie sogar den Header in behalten. Also werde ich einfach wieder in den Index zurückkehren und sollte einige Optionen für nur verschiedene Dinge haben , die Sie tun können, und vieles davon hängt auch von der Planung ab. Eso Sie müssen die verschiedenen Bereiche, die innerhalb Ihrer Website behandelt werden, in verschiedenen Formaten behandeln . Wenn Sie also einen speziellen Satz von Klassen oder Stilen nur für den gesamten Containerbereich erstellen möchten, können Sie das auch tun. So können Sie nicht in einigen Eintopfen und so weiter eso Sie könnten es auch für Dienste verwenden wollen. Oder vielleicht mit Dienstleistungen. Sie könnten mit der Art und Weise zufrieden sein, wie Dienstleistungen präsentiert werden. Und hier ist, wo Sie Ihren Header nicht loswerden wollen. Und es gibt eine gewisse Flexibilität, da wir sehen können, wie unsere Inhalte gehandhabt werden. Also Dienste und hier könnten wir möglicherweise eine Reihe von Bildern haben, und ich wollte einen kurzen Zeilenumbruch dort machen, um zu sehen, wie das aussieht Dienstleistungen. Also, nur damit wir dort etwas anderes vertreten haben und wieder gibt es eine unbegrenzte Anzahl von verschiedenen Optionen, die wir hier tun können, können wir zur Verfügung stellen. So braucht Lauren Pixel manchmal ein wenig Zeit, um eso diese Bilder zu laden. Deshalb dauert es einige Zeit dort Kontakt Abschnitt. Wir wollen wahrscheinlich dasselbe tun, wie wir dort drüben gemacht haben, wo wir das alles entfernen , die Fußzeile behalten und stattdessen unsere Dips haben. Und in diesem Fall, eso Wir haben ziemlich viel Styling getan. Vielleicht möchten wir hier für den Rapper mit einem div darin etwas Styling hinzufügen. Und wir werden einen direkten Nachkomme machen, Def von Rapper und dann hier drin. Lassen Sie uns in einigen Eintopf 15 Picks und so weiter. Also könnten wir dort ziemlich viele Optionen, was wir vielleicht tun wollen. Also, jetzt haben wir einige Padding hinzugefügt und wir wollen das gleiche für den Kontaktbereich tun. Also kontaktieren Sie hier, das war eigentlich die Fußzeile. Also habe ich jetzt viel zu viele geöffnet. Sie sehen alle sehr ähnlich aus. Also, das ist, was ich tatsächlich in die, dass die falsche Seite dort. Also lassen Sie uns das div und Kontakt für tun und das ist, wo wir in einem Kontaktformular hinzufügen können. Lassen Sie uns jetzt einfach einen kurzen Blick auf unsere Website werfen. Stellen Sie sicher, dass alles richtig aussieht. Kontaktformular Firmenname ist ihre Dienste und so weiter. Und in diesem werde ich den Header loswerden, ebenso wie Sie das normalerweise nicht innerhalb des Kontaktformulars sehen . So haben Sie nur ein einfaches Kontaktformular, so dass einige Variationen der Art und Weise, wie die Abschnitte produziert und behandelt werden. 21. 25 Kontaktformular aktualisieren: in der letzten Lektion haben wir uns mit der Erstellung zusätzlicher Seiten befasst. Jetzt haben wir ein Kontaktformular. Also lassen Sie uns unsere Kontakt-HTML-Seite öffnen und tatsächlich ein Kontaktformular erstellen und dann etwas Styling anwenden . Also vielleicht sogar, wie, wie, einen Header hier Kontaktformular anzuzeigen und dann unten, Lassen Sie uns öffnen und erstellen ausführen und tun Sie es mit einer Reihe von Dibs hier, um die verschiedenen Felder zu trennen . In der Regel fragen Sie also nach einem Namen. Und dann haben wir unser Eingabefeld so eng, weil Text, so dass dies unser anfänglicher Name sein würde . Wir wollen auch E-Mail sammeln, Adresse so E-Mail und ändern Sie den Typ, um E-Mail, und schließlich, wir könnten eine Schaltfläche haben, so dass wir enge Taste tun könnte. Oder wir könnten ein tatsächliches Tastenelement tun. Lassen Sie uns einfach eine Schaltfläche Element und geben Sie hier wird eingereicht werden, um das Formular zu senden, so senden Sie Nachricht Kleidung aus, schließen Sie die Schaltfläche und speichern Sie das. Und nun endlich, eso bekommen das Formular geschlossen. Werfen wir einen kurzen Blick und sehen, wie das aussieht. Jetzt haben wir also ein Kontaktformular, also sollten wir vielleicht auch etwas Styling anwenden. Also lasst uns etwas von diesem Styling aktualisieren. Und das ist, warum wir wirklich gerne Zehenlink aus dem gleichen Stylesheet. Eso, dass dies gibt uns die Möglichkeit, Styling über alle Seiten zu tun. Wenn wir also sahen, dass es ein Problem oder ein Problem gab, könnten wir unser Styling leicht aktualisieren. Also werfen wir zuerst einen Blick auf das Formular auf. Geben wir ihm ein Maximum mit. Also benutze das Max wieder mit. Und geben wir ihm eine maximale Pixelbreite von 600 Pixeln. Eso Dies bedeutet im Grunde, dass es die Größe ändern wird. Wenn es etwas weniger als das ist. Geben wir ihm eine Grenze. So ein Pixel Rahmen durchgezogenen Rahmen und nehmen Sie einen hellen Farbrahmenradius, um ihm diesen abgerundeten Effekt zu geben . Und so haben wir Form, und wir haben ein paar Dibs innerhalb dieser Form. Es hatte also etwas Eintopfen dort, also 15 Picks auf jedem Def und Formular, also haben wir Eingaben. Wir könnten nur Eingabe machen, und wir können auch etwas für Button aktualisieren. Also lassen Sie uns ein mit so tun mit gleich 70% für das Formular für die Schaltfläche mit So könnte es etwas anderes zwischen den beiden von ihnen tun . Deshalb habe ich sie da draußen getrennt und das aufgefrischt. Vielleicht wollen wir es sogar zentrieren, weil wir den Text dort haben. Also ein paar verschiedene Optionen könnten wir kurz die geschuldet ist sogar mawr erstellen die Eingaben auf einer neuen Zeile, wenn wir wollen. Wie kriegen wir es zu einer neuen Lüge? Dieser Eingang und das ist einfach. Wir können es mit Display tun und tun Anzeigeblock. Das wird also dazu führen, dass all diese Kinder hier von den Dibs so voll mit aufnehmen. Und darüber müssen wir uns keine Sorgen machen, denn das geht standardmäßig dazu. So erfrischend es. Jetzt haben wir Namen, E-Mail und die Nachricht und vielleicht wollen wir sogar alles zentrieren. Eso Wir könnten das als zentrales Futter machen, oder wir könnten das rüber bringen. Je nachdem, wie wir den Zehenansatz wollen, ist dies eine Anzahl von verschiedenen Optionen. Also könnten wir hier oben am übergeordneten Text tun, ausrichten und zentral. , Wenn das tatsächlich löst,diesen Inhalt zu zentrieren, sehen wir, dass er dies zentriert, aber weil die Luft als separate Elemente behandelt wird. Sie werden dort eigentlich nicht zentriert. Wenn Sie Text ausrichten, sie nicht als Text behandelt. Und hier müssen wir diese Elemente auf die gleiche Weise zentrieren, wie wir es mit dem Rocker gemacht haben . Also lasst uns die Ränder hier greifen, zu den Eingaben gehen und sie als separate Elemente behandeln. Also, jetzt sind sie in der Mitte, die wir haben den Text wieder zentriert. Je nachdem, was? Ihre Vorlieben. Wie es dir gefällt, Zeh. Hör zu, ich werde diesem Knopf etwas Höhe hinzufügen. Ich denke, es ist ein bisschen klein da, also habe ich mich auch nicht versteckt. Sieh einfach, wie das aussieht. Gehen Sie zurück, so in der Regel gerne größere Tasten dio Liegehöhe haben und müssen noch einige Anpassungen hier vornehmen, weil ihre Zeilenhöhe mit der Polsterung ist. Es wird weggeworfen, wo es nicht war, wurde nicht zentriert. Also, um diesen Text sexuell zu zentrieren und wir können diesen Text größer als auch s wir bemerkt , dass es reagiert auf. Vielleicht wollen wir sogar ein Zentrum die Form als auch. Genau wie das, was wir hier gemacht haben, können wir dieses ganze Element in vcenter nehmen oder wir könnten es. Wir könnten ein Element identifizieren und es auch so tun. Also eine Reihe von verschiedenen Möglichkeiten. Wir könnten behalten, dass einen Container für das gesamte Kontaktformular erstellen und dann diese Informationen zentrieren und diese verschieben. Also alles, je nachdem, wie wir mit dieser Schwächung umgehen wollen, zentrieren Sie es auch über Polsterung. Wenn wir eso wollen. Wenn wir uns um diesen Inhalt trennen wollten, könnten wir das auch zentrieren . Es ist eine Reihe von verschiedenen Optionen verfügbar, um diese Kontaktformulare zu erstellen und es wirklich so aussehen zu lassen , wie Sie es präsentieren möchten. 22. 26 Tipps und Ressourcen für die Praxis: Jetzt, da wir die Website fertiggestellt haben, haben wir sie so aussehen und durchführen lassen, wie wir sie ursprünglich beabsichtigt hatten. Wir haben ein Kontaktformular und wir haben ein bisschen von einer Vielzahl von verschiedenen Arten von Seiten. Und natürlich können wir diese weiter ausbauen und diese Website wirklich auf verschiedene Arten anpassen . Sofort. Eso Eines der Dinge, die ich in diesem Kurs immer noch abdecken möchte, ist, wie Sie den Quellcode in der Praxis nutzen und ihn zu Ihrem eigenen machen können. Jetzt liegt es an Ihnen, den Quellcode zu nehmen, das Gelernte in den Lektionen zu nehmen und es anzuwenden. Also, wenn Sie keinen Editor haben oder wenn Sie dies einfach online machen möchten, gibt es eine wirklich gute Ressource am Code-Stift. Ich Oh, was Sie tun können, ist, dass Sie den Quellcode dort kopieren und einfügen können, also werde ich einfach die Indexseite verwenden und einfach all das HTML kopieren, das im Körper ist . Platzieren Sie es in Code-Stift innerhalb des HTML-Abschnitts mit JavaScript. Ich muss in der J-Bibliothek hinzufügen. Also und das ist genug, um zu tun. Wir können einfach in der GE Steinbruch-Bibliothek hinzufügen. Es verknüpft automatisch das CSS, das Stylesheet und das JavaScript, so dass ich diesen JavaScript-Code nehmen kann, ihn dort in den JavaScript-Abschnitt einfügen und meine CSS-Datei öffnen und diese Informationen in den CSS-Quellcode einfügen kann. Und was es tun wird, ist magisch in die Website zu verwandeln, an der wir gearbeitet haben. Und das Gute an Code-Stift ist, dass es Ihnen wirklich viele Optionen und Flexibilität gibt. Also, wenn zum Beispiel Sie zum Beispieldie Hintergrundfarbe ändern möchten oder wenn Sie etwas von der Geek-Sorge speichern möchten, ist es in Ordnung. Eso, wenn ich die Hintergrundfarbe aktualisieren möchte, und ich werde etwas wie Grün tun, also steht es wirklich da draußen. Wir sagen, dass wir sofort sehen, dass die Website aktualisiert und geändert wird. Natürlich funktionieren die Links nicht, denn wenn Sie versuchen, einige dieser Links zu drücken, gehen Sie nirgendwo hin, weil Sie versuchen, eine Datei zu verknüpfen, die nicht existiert. Aber der Punkt hier ist, dass dies eine großartige Gelegenheit ist, wirklich ein anderes Styling anzuwenden . Probieren Sie ein paar Dinge anders aus und sehen Sie, wie es präsentiert wird und in der Lage sein, es zu sehen. Eines der Dinge, die wir vermissen, ist der Gedanke genial, so dass wir das auch einbringen können, wo wir es in unser HTML selbstgefällig innerhalb dieses Kopfabschnitts bringen können. Das gibt uns also die Möglichkeit, vordergründig in das Projekt zu bringen. So Verknüpfung aus Teoh Stylesheet speichern und schließen. Und jetzt und ich kann auch die Ansicht ändern, so dass ich auf einer Seitenansicht hier bin, so dass ich leicht die Größe der Art und Weise ändern kann, wie die Website präsentiert wird. Und da haben wir unsere Navigationsleiste, alles läuft und funktioniert. Also nehmen Sie sich etwas Zeit, spielen Sie mit ihm herum und bekommen ein gutes Gefühl für die Funktionsweise der Website und probieren Sie es selbst aus und sehen Sie, was Sie tun können und sehen, wie Sie diese Website anpassen können, um wirklich Ihre eigenen zu machen und nehmen, was Sie haben aus den vorherigen Lektionen gelernt und wenden Sie es indem Sie Ihre eigene, angepasste Version der Website