Website aus dem Scratch HTML CSS Responsives Design | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


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

Website aus dem Scratch HTML CSS Responsives Design

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

17 Einheiten (1 Std. 53 Min.)
    • 1. Promotions-Video

      1:33
    • 2. 1 Einführung in die Website des Designs

      2:32
    • 3. 2 Tools und Ressourcen aus dem Kurs

      4:21
    • 4. 3 Website

      5:57
    • 5. 4 HTML erstellen

      8:40
    • 6. 6 schwimmende Elemente

      11:36
    • 7. 7 Header-Elemente aktualisieren

      4:56
    • 8. 8 Nav Menü erstellen CSS

      7:20
    • 9. 10 Margins Polsterung Logo area

      9:39
    • 10. 13 Update Styling nav Menü Updates

      10:08
    • 11. 14 Hauptsache Verpackung Update im Menü festgelegt

      7:02
    • 12. 15 Verwenden von jQuery zum Verlangen der URL

      9:00
    • 13. 16 jQuery Dynamische Kurse

      5:18
    • 14. 18 Hinzufügen von Webfonts Google Fonts zur Website

      2:21
    • 15. 19 Seitengestaltung

      10:12
    • 16. 20 Bilder Produkte verkleinern

      8:31
    • 17. 21 Course

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

255

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Willst du lernen, wie du eine komplette Website von Grund auf erstellen kannst?

Schritt für Schritt das Lernen eines realen of und das Erstellen einer Website. Am Ende des Kurses kannst du dein Portfolio mit verschiedenen Website-Designs erweitern. Erstellen Sie eigene Websites mit HTML und CSS

  • Der Kurs deckt alles ab, was du zum Erstellen einer Website von Grund auf wissen musst
  • Lernen Sie die Tools und Ressourcen zur Erstellung von Webcode
  • HTML lernen und was Tags tun können
  • planen Sie Ihre Website und erstellen Sie sie nach Ihren Vorgaben
  • Erstellen deiner Website HTML-Struktur und fügen Sie Styling hinzu, um es erstaunlich aussehen zu lassen
  • Quellcode wird bereitgestellt, damit du schnell einstecken kannst, um mit deinen eigenen Projekten beginnen zu können
  • HTML und CSS in der realen Welt präsentiert von einem Lehrer mit über 15 Jahren Erfahrung in der Web-Entwicklung.

Erstellen von Websites für die reale Welt, sehen Sie, wie HTML und CSS zusammenpassen, um nutzbare Websites zu erstellen, die vollständig ansprechend und bereit sind für die moderne Welt.

Dieser Kurs stellt Fähigkeiten und Übersichtsarbeiten von HTML-Tags in einem web vor. Geben Sie Anleitungen zur Anwendung von Styling und Überblick über gemeinsame styling an, damit du die Website gut aussehen kannst.

Finde heraus, was es braucht, um deine eigene Website zu erstellen, wirst du erstaunt sein, wie einfach es sein kann.

Ich helfe dir, Web-Entwicklung und Design zu lernen. Ich bin bereit, alle Fragen zu beantworten, die du vielleicht hast.

Nichts zu verlieren, es gibt ein 100% Geld zurück, wenn es dir nicht gefällt

Willst du mehr wissen, worauf wartest du auf den ersten Schritt gehen. Begleiten Sie jetzt, um zu lernen, um Websites heute zu erstellen.

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. Promotions-Video: Möchten Sie lernen, wie Sie eine komplette Website von Grund auf neu erstellen? Schritt für Schritt Lernen von realen Projekten, Erstellen einer Website Bis dahin können Sie Ihr Portfolio mit verschiedenen Webdesigns erweitern. Erstellen Sie Ihre Websites mit HTML und CSS. Der Kurs deckt alles ab, was Sie wissen müssen. Um eine Website von Grund auf neu zu erstellen, lernen Sie die Werkzeuge und Ressourcen verwendet, um Web-Gericht zu erstellen. Lernen Sie HTML und was Tags tun können. Planen Sie Ihre Website, die nach Ihren eigenen Vorgaben erstellt wurde. Erstellen Sie Ihre Website. Ihre HTML-Struktur fügt Styling hinzu und macht es fantastisch aussehen. Quellcode wird bereitgestellt, damit Sie schnell einspringen und mit Ihren eigenen Projekten beginnen können. HTML und CSS in Real World, präsentiert von Instruktor mit über 15 Jahren Erfahrung in Web-Entwicklung, erstellen Websites für die reale Welt. Erfahren Sie, wie Sie HTML und CSS verwenden und wie sie zusammenpassen, um nutzbare Websites zu erstellen, die vollständig reaktionsfähig und bereit für die moderne Welt sind . Dieser Kurs stellt Ihnen die Fähigkeiten und Übersichten vor. Die Verwendung von HTML-Tags und einem Webseiten-Design bietet Anleitungen zum Anwenden von Styling und einen Überblick über gängige Styling-Eigenschaften, um Ihre Website großartig aussehen zu lassen. Finden Sie heraus, wie es braucht, um Ihre eigene Website zu erstellen. Sie werden erstaunt sein, wie einfach es sein kann, Websites zu erstellen. Ich bin hier, um Ihnen zu helfen, Web-Entwicklung und Webdesign zu lernen. Ich bin bereit, alle Fragen zu beantworten, die Sie haben. Du hast nichts zu verlieren. Ich will mehr wissen. Worauf wartest du? Machen Sie den ersten Schritt. Jetzt beitreten und lernen, Websites zu erstellen noch heute. 2. 1 Einführung in die Website des Designs: Willkommen zu unserem Kurs zum Entwerfen und Erstellen einer Website von Grund auf neu. In diesem Kurs werden wir eine leere HTML-Seite nehmen und eine Website daraus erstellen. Mein Name ist Lawrence, und ich werde dein Lehrer für diesen Kurs sein. Ich bin Webentwickler, Webdesigner seit über 15 Jahren. Ich arbeite wirklich gerne an Websites und genieße es wirklich, zu sehen, was passieren kann, wenn Sie Code CSS anwenden , bringen Sie alles zusammen und erstellen Sie eine Live-Website. Das ist also etwas, das ich wirklich glücklich bin, heute mit Ihnen teilen zu . Wir werden eine Website von Grund auf neu erstellen. Wir werden einige der Ressourcen verwenden, wie ein Webeditor, der unseren HTML-Code erstellt, drei separate HTML-Seiten, eine CSS-Seite sowie eine Java-Skriptseite erstellt . Und dann werden wir brechen. Bringen Sie all dies zusammen, um eine Website wie diese zu erstellen, und die Idee für diesen Kurs ist, eine Website mit mobilem First Thinking aufzubauen. Also gehen wir die Anwendung von Medienabfragen, um unsere Website von den kleinsten Bildschirmen zu stylen . Also das ist nur Chrom hier und Dies erlaubt mir, verschiedene Bildschirmgrößen zu simulieren, also haben wir auf einem iPhone. So wird unsere Website aussehen, so dass Sie sehen können, dass sie anders ist, als sie aussieht, wenn wir die Größe ändern. Unsere Website sind Bildschirmgröße zu den größeren Größen, aber alles und der gesamte Inhalt wird schön und ordentlich in einer sehr lesbaren einheitlichen Weise präsentiert , die reaktionsschnell und freundlich für mobile Benutzer sowie Desktop-Benutzer ist. Also jeder jeder beliebigen Bildschirmgröße wird in der Lage sein, mit dieser Website zu interagieren und alle Inhalte zu nutzen , die auf der Website sind. der Lage sein, es zu verdauen, sehen Sie es wirklich leicht auf, und der Inhalt wird auf eine Art und Weise präsentiert, mit der Benutzer sehr leicht interagieren können. Also eines der wichtigsten Dinge hier ist, dass Navigationsmenüs. Das ist also immer eine Herausforderung für mobile eso. In diesem Kurs werden wir Ihnen zeigen, wie Sie ein Navigationsmenü erstellen, und wir können sehen, dass sich tatsächlich die Position ändert wie beim Ändern der Bildschirmgröße. Und wir haben verschiedene Variationen, wie wir unser Navigationsmenü präsentieren, und das hängt alles davon ab, was wir wollen und wie wir aussehen wollten, abhängig von der Bildschirmgröße. Also, wenn Sie bereit sind, lassen Sie uns beginnen, diese Website von Grund auf neu zu erstellen 3. 2 Tools und Ressourcen aus dem Kurs: in dieser Lektion. Ich möchte über einige der Werkzeuge gehen, die ich werde Hals den Kurs verwenden, um diese Website aufzubauen. Also eines der wichtigsten Werkzeug etwas und verwenden und eines der Werkzeuge, die Sie benötigen um Websites zu erstellen, ist ein guter Editor. Also, wenn Sie bereits einen guten Editor haben, können Sie voran gehen und diesen verwenden. Wenn du etwas ausprobieren willst, du oder wenn du es versuchen willst, das, das ich im Kurs benutzen werde, werde ich Klammern benutzen. Klammern stehen bei Adobe zur Verfügung. Habe Website-Klammern, die ich dir schulde, kannst du voran gehen und es herunterladen. Es ist kostenlos, Open Source, Texteditor, und es ist tatsächlich wirklich nützlich, es Seite. Toller Redakteur. Es hat eine Menge großartiger Erweiterungen und fügt Ons hinzu, die Sie hinzufügen können. Es hat auch diese Lebensvorschau, die Sie in Zeilenbearbeitung tun können. Es ist eine Menge wirklich sauberer Funktionalität, die in Klammern verfügbar ist. Das ist also diejenige, die ich in diesem Kurs einige andere Ressourcen verwenden werde, die ich auch im Kurs verwende. Also werde ich Chrome als meinen Browser verwenden. Und die wirklich nette Sache über Chrome ist, dass es seine Web taub Tools direkt in jeder Chrome-Installation eso eingebaut hat Alles, was Sie tun müssen, ist zu tun und zu inspizieren hier und Sie bekommen diese wirklich schöne Web taub Konsole öffnen. Und das wirklich nette daran ist, dass es alle Informationen hat, natürlich, von der Website der Quellcode CSS. Aber Sie können auch die verschiedenen Geräte umschalten, so dass Sie einen Blick auf eine Website oder eine beliebige Website werfen und sehen, wie es auf verschiedenen Geräten aussehen würde. Hier kann ich sehen, wie es auf einem iPhone sechs aussehen wird. Dies ist die Klammern Website, die Sie nach unten scrollen können. Wir sehen, dass es die Größe ändern ist die Seite. Wir haben eine Option, um es zu aktualisieren. Wir können es auch umdrehen. Also eine Menge wirklich ordentlich Optionen und Chrom, und das ist einer meiner Lieblings-diejenigen, weil es Ihnen so viele Informationen und wirklich einfach, mobile Websites zu bauen, so dass Sie nicht wirklich haben, um Ihre Bildschirmgröße anzupassen. Sie können es einfach anpassen und die verschiedenen Gerätemomente umschalten und wirklich praktisch, wenn Sie Websites aufbauen. Und natürlich, wenn Sie in diesen Tagen Websites aufbauen, müssen Sie die Tatsache aufbauen und wissen, dass viele Leute über Mobilgeräte auf Ihre Website zugreifen werden , also müssen sie mobilfreundlich sein und auch für Seo-Zwecke, es ist eine andere Ressource, die wir verwenden werden. Also werden wir Loren Pixel benutzen. Dies ist eine Website, auf der wir einige Dummy-Bilder, einige Füller-Platzhalter-Bilder erstellen können . Wenn Sie also Websites aufbauen, haben Sie möglicherweise nicht unbedingt alle Werkzeuge, alle Bilder und Grafiken und die bereits durchgeführten Designs. Also möchten Sie Ihre Website erstellen und Sie haben diese s O nicht. Dies ist, wo wir Platzhalter und ein anderer Platzhalter, den wir in diesem Kurs verwenden werden , ist Blind Text Generator. So ermöglicht es uns, einige nette Laura, ähm, Text zu generieren ähm, , die wir wieder für Platzhalterinformationen verwenden könnten, und dies erlaubt uns, eine eigentliche Website mit den Inhaltspunkten zu erstellen, noch bevor wir den Inhalt haben. Und eine letzte Ressource, die wir benutzen werden, wird glitchy sein. Eso Linkshänder sind wirklich ordentliches Werkzeug, mit dem Sie Grafiken entwerfen können, so dass Sie es verwenden können, um Ihren Drahtrahmen für Ihre Website zu entwerfen. Also werde ich hier schnell etwas für einen Drahtrahmen aufstellen, bevor wir anfangen, unsere Website aufzubauen . Und es hat eine Menge wirklich brauchen. Integrierte vorgefertigte Formen und Inhalte, die Sie einfach per Drag & Drop auf Ihrem Hauptbildschirm können. Sie können etwas Text hinzufügen. Sie können die Art und Weise ändern, wie es aussieht und so weiter. Es ist ein wirklich nützlicher, handlicher Werkzeugzehen. Haben Sie, was Sie wollen, um Mockups aufzubauen oder wollen eine schnelle Grafik oder Diagramm, wie Ihre Website fließen wird, wie die Benutzer in der Lage sein, durch Ihre Website zu navigieren. Also werden all diese Ressourcen innerhalb des Kurses verwendet werden. Und wieder, ich ermutige Sie Teoh, dies zu überprüfen und zusammen zu arbeiten, wenn wir durch die Lektionen gehen , um die Inhalte zu lernen, die wir bereitstellen und während des Unterrichts diskutiert wurden . Also die nächste Lektion werden wir uns ansehen, beginnen, unsere Website von Grund auf neu zu bauen 4. 3 Website: Im Moment ist unsere Webseite leer. Also lassen Sie uns ihre Redakteurin öffnen und beginnen, einige Inhalte zu erstellen. Also habe ich hier eine Standardvorlage und nur um schnell durchlaufen zu können, habe den Doc-Typ angegeben, dass ihr öffnender HTML-schließender HTML-Code geöffnet hatte, der schließende Körper geöffnet und der Körper geschlossen wurde. Eso habe ich all dies als Standardvorlage. Und dann habe ich meinen View-Port hier, also ist dies für mobile Geräte unerlässlich. Ich habe meine Internet Explorer-Edge-Augen, um es kompatibler zu machen. Und meine utf acht. Das ist also der Zeichensatz, den ich verwenden werde. Also lasst uns anfangen, einige unserer HTML-Code einzugeben. Das erste, was ich tun wollte, ist eigentlich eine Verknüpfung mit einem Stylesheet, weil ich ein separates Stylesheet verwenden werde. Also habe ich bereits Stil-Punkt-CSS erstellt. Also werden wir von zwei separaten Dateien in diesem Kurs arbeiten, und die 1. 1 wird dot html indizieren. Dies ist natürlich natürlich der Ausgangspunkt für jeden Server. Wenn es einfach geht, ist dies die Hauptdomäne hier ist, wo ich zu einem Stylesheet verlinken werde, und die Vorteile der Verknüpfung zu einem Stylesheet sind die Tatsache, dass Sie in der Lage sind, den Code das CSS sowie Ihren HTML getrennt zu halten . Und das hilft wirklich, wenn Sie mehrseitige Websites erstellen, vor allem, weil Sie auf das gleiche Stylesheet verlinken und dann auf die gleichen Styling-Informationen zugreifen können. Sie müssen also im Wesentlichen einmal aufschreiben und darauf verlinken , so viele Seiten wie Sie wollen. Teoh nutzt dieses Stylesheet eso einige der ersten Schritte, die wir benutzen werden. Also werde ich schnell zum Stylesheet springen, und ich kann anfangen, einige zu erstellen, die ich mit Körper beginnen kann und zeigen, was ich will, dass meine Schriftfamilie Teoh verwenden, welche Schriftfamilie ich verwenden möchte. Und jetzt werden wir es hier nur als Standard festlegen, und wir werden dies auch innerhalb dieses Kurses aktualisieren . Jetzt, da wir unsere Grundstruktur aufgelegt haben und einsatzbereit sind, lassen Sie uns planen, wie unsere Website aussehen soll. Und hier verwenden wir Werkzeuge wie Cliffy, weil dies uns die Möglichkeit gibt, tatsächlich einen Drahtrahmen zu erstellen und uns eine bessere Vorstellung davon zu geben, was wir tun wollen und wie wir es schaffen wollen. Also kläre ich nur das letzte auf und es gibt eine Menge wirklich nett. Es gibt viele wirklich schöne Optionen hier. Eso Was ich in diesem Kurs tun wollte, ist eine zweispaltige Website zu erstellen. Also im Wesentlichen, wir werden unseren Top-Bereich haben. Das wird also ein bisschen boxy sein, wie ich es entwerfen werde. Also werde ich das zum Überschriftenbereich machen, und dann muss ich Spalten so in voller Ansicht, denn, denken Sie daran, denken Sie daran, wir machen eine Website, die voll ansprechbar sein wird. Eso Wir werden tatsächlich mehrere verschiedene Präsentationen desselben Inhalts haben. Eso Es wird eine zweispaltige Webseite sein. Also werden wir so etwas haben und dann vielleicht sogar eine Fußzeile hier unten unten, und wir halten diese Fußzeile im Einklang mit dem Hauptinhalt. So machte zwei Säulenbereich. Also werden wir so etwas haben, wenn wir anfangen und dann hier oben ein Top. Sie können vielleicht ein lokales, ein lokales Gebiet haben. Also werde ich die Boxen wieder benutzen, damit Sie hier einen Bereich haben können, der Ihre lokalen Ihre Header-Informationen enthält . Also werde ich einfach ein Logo eingeben und dann drüben auf diese Hände auf dieser Seite. Dies ist, wo wir unser Navigationsmenü platzieren können. Also werde ich nur ein weiteres Quadrat dafür schaffen, damit wir verstehen können, dass dies der Platzhalter ist. Also denke ich, dass das eigentlich ein Quadrat war. Lassen Sie mich das loswerden, und ich werde das Rechteck machen. Und dann wird das der Inhalt unseres Navigationsmenüs sein, und so wird es auf der vollen Größe aussehen. Und so hier drüben, werden wir unsere Navigation haben. Nun, eso Wir haben hier nur einen Text, Cem oder Text. Und dann wird hier unsere Fußzeile hingehen. Sore Footer, Firmenkontaktinformationen, Copyright und so weiter. Also, im Wesentlichen, das ist, was wir wollen, um die Website aussehen. Dann wird das auf einem Desktop sein. Und wenn es dann auf eine mobile Größe schrumpft, wollen wir dieses Navigationsmenü verschieben, vielleicht die Größe ändern, die Unternehmensinformationen oben halten und dann natürlich wollen,dass diese auf natürlich wollen, Lager sind. Wir wollen Textbereich, vielleicht Textbereich eins und Text zu. Also wollen wir, dass Text eins voll mit aufnehmen kann, um voll mit. Aber wir wollen unter Text Bereich eins stapeln. Und das ist im Wesentlichen die Art und Weise, die wir uns bewegen wollten, wenn wir die Größe des Bildschirms ändern und Lage sein, ihn unseren Webbesuchern zu präsentieren. Also lasst uns anfangen, die HTML-Struktur ihrer Website aufzubauen und dann werden wir in CSS hinzufügen , um es so aussehen zu lassen und es so zu machen, wie wir durchführen wollten , wenn die Größe des Benutzers ihr Browser ist. Also, das kommt in der nächsten begleichen Lektionen 5. 4 HTML erstellen: es schaut sich jetzt unseren Drahtrahmen an. Wir können unser HTML visualisieren und wie es auf unserer Webseite angelegt werden soll. Also lassen Sie uns unseren Editor öffnen und ich werde , die Stile ein bisschen kleiner machen,damit wir in unseren Editor springen und anfangen können, unsere HTML-Struktur zu erstellen . Also schauen wir uns unseren Drahtrahmen an. Wir haben eine ziemlich gute Vorstellung davon, wo wir anfangen wollen und wie wir unsere Website aufbauen wollen . Also bemerkten wir, dass wesentlich. Wir haben drei separate Abschnitte, also haben wir ah, Header-Abschnitt und vielleicht werde ich diesen einfach nennen. Also wird der mittlere Bereich nur Abschnitt genannt werden, und dann ist das, wo unsere Inhalte gehen würden, und dann haben wir schließlich einen Fußbereich, also werde ich zuerst alle drei Hauptbereiche erstellen, und dann werde ich in diesen Bereichen, da wir beide, wie wir durch die verschiedenen Lektionen und innerhalb dieses Abschnitts arbeiten. Was ich also tun wollte, ist eigentlich Abschnitte innerhalb von hier zu trennen und mit HTML fünf gibt es verschiedene Semantik, die wir verwenden könnten, um verschiedene Teile unserer Website anzuzeigen . Also wollen wir eine zweispaltige Websites haben. Wir wollen hier auch Bereiche oder zwei getrennte Trennwände trennen müssen. So können wir Abschnitt verwenden. Wir können Artikel verwenden, vielleicht von dem, was ich tun werde, ist Abschnitt und Website davon zu verwenden. Ich werde die Abschnitte in ein div einwickeln. Also einfach so, Also würden wir Abschnitt eins haben, den ich ein I d geben werde, um es aus meinem HTML-Code unterscheiden und auswählen zu können . Vielleicht werden wir das primär nennen. Das ist also unser Hauptinhaltsbereich und dann wird dieser aufgerufen werden. Also, wie sollen wir es nennen? Sekundäre s. Also, jetzt müssen wir Inhaltsbereiche löschen. Wir haben unseren Header-Bereich und innerhalb dieses Header-Bereichs haben wir tatsächlich zwei verschiedene Abschnitte als auch. Also haben wir eine, die die Navigation enthält, und diese Navigation muss sich bewegen. Also müssen wir das auch in ein anderes Element und das Unternehmen, Informationen und lokale und so weiter trennen das Unternehmen, . Also eine Reihe von verschiedenen Möglichkeiten, dies zu tun. Aber lassen Sie uns Standard-HTML fünf knave verwenden und dann innerhalb der Jetzt ist dies, wo wir unseren Navigationsbereich erstellen werden . Und dann wieder, vielleicht hier werden wir einfach ein div benutzen, um getrennt zu sein. Und dann innerhalb dieses div wird jeder sein und das wird Firmeninfo sein. Also etwas über die Firma und dann vielleicht darunter haben wir ich war Dies ist die größte Firma. Also, jetzt haben wir einige Inhalte da drin, und hier drüben, werde ich auf H zwei tun, also wird das vielleicht eine Art Einführung in die Firma selbst sein, und dann wird hier drüben Untermenü sein. Sind Anzeigen, Links so alles, was wir in Bezug auf unsere Inhalte hervorheben möchten. Also gehen wir zurück auf unsere Website, werfen Sie einen kurzen Blick auf das und sieht wirklich nicht nach viel aus, weil wir noch nichts von dem Styling angewendet haben. Aber denken Sie daran, dass dies nur die anfängliche Struktur aufbaut und wie wir wollen, dass unsere Website aussieht . Gehen wir zurück in unseren Editor und beenden einige der grundlegenden Strukturen, die wir brauchen werden , wenn wir unsere Website aufbauen. So können wir in der Fußzeile eso einige Copyright-Informationen hinzufügen. Sie können das Copyright-Icon dort setzen, wo Sie Ihre eigenen so Unternehmen verwenden könnten, so Firma, Name, Adresse, kontaktieren Sie uns für mehr in vollem Umfang und vielleicht einige dieser Kontaktinformationen und Navigationsmenü . sehen Sie normalerweise Wenn wir also Navigationsmenüs erstellen, die UN-geordneten Listen, die verwendet werden. Also werden wir behalten, dass wir das auch tun werden. Also werden wir wie ein wirklich Standard-Navigationsmenü zu tun. Und wenn Sie CSS anwenden, ist es wirklich egal, welche Tags Luft verwenden, aber was? Der Grund, warum wir auf geordnete Listen verwenden, ist, weil es den Inhalt in einer gut lesbaren Art und Weise präsentiert . Wenn du also hier durchgehst und dir das Navigationsmenü ansiehst, also ohne das Styling, wird es einfach in einem Nordeste sein, und das wird vielleicht die drei verschiedenen präsentieren, oder wir werden eigentlich drei haben verschiedene Stücke, drei verschiedene Hauptinhalt-Seiten auf unserer Website. Also werden wir unsere Homepage haben, also sollte hier drin einen Truck einbauen, und das wird auf unsere Homepage verlinken. Also im Moment werde ich einfach diesen Hash dort lassen, um darauf hinweisen zu können, dass ein ZA-Platzhalter. Und so wird es zuerst auf die Homepage verlinken, und ich werde das kopieren und duplizieren. Es ist der nächste Link, um vielleicht ein über oder Kontakt und vielleicht setzen einige Produkte wird eine Produktgalerie haben . Also vielleicht ist dies, ah, Website, die der Zweck der Website ist, einige Produkte hervorzuheben, die das Unternehmen macht einige. Vielleicht können wir eine Galerie dieser Produkte haben und diese zeigen. Also wird es wirklich einfache Webseiten-Homepage sein. So Startseite, dass der Benutzer auf Produkte oder Informationen über das Unternehmen kommt, oder, oder, wenn Sie Dienstleistungen haben, können Sie sie dort oder sogar ein Portfolio auflisten. Wenn Sie ein Portfolio von verschiedenen Ihren Web-Designer noch ein Portfolio von verschiedenen Websites hatten , könnten Sie das dort tun und dann, natürlich, Kontaktinformationen. Also werden wir unsere Speisekarte wirklich minimiert, weil wir nicht wirklich das Symbol ändern , wenn die Website-Stärke. So können Sie sehen, dass ziemlich oft, wenn die Website schrumpft nach unten, wir bekommen dieses Menü-Symbol und dann gibt es ein Dropdown-Menü, und wir können diese Arten von Menüs Luft Gut, wenn Sie eine Menge von Seiten haben. Aber wenn Sie eine wirklich einfache Website haben, auf der Sie drei Seiten haben, als manchmal ist es besser, dies einfach zu verkleinern und tatsächlich nur vielleicht 1/3 des verfügbaren Platzes für jeden dieser einzelnen dieser Menüpunkte einzunehmen und nie tatsächlich das Menü auf der Größenänderung ausblenden. Und wir werden Ihnen zeigen, wie man das macht, während wir den Kurs durchlaufen. Hi. Lassen Sie uns das beenden und fügen Sie einige Dummy-Inhalte hinzu. Das wird also mein gemein sein. Ich wollte es Rapper nennen, weil das ist, was ich meinen Hauptinhaltsbereich umwickeln möchte . Und ich möchte, dass der Inhalt darin sitzt. Es gibt also, wir werden das nur Rapper nennen. Und wenn ich möchte, dass die Fußzeile mit den Textabschnitten übereinstimmt, wie wir es in unserem Design getan haben, muss ich meinen Fuß tatsächlich innerhalb meines Wrappers bewegen. Und das wird deutlicher werden, wenn wir in unserem CSS eso hinzufügen. Lassen Sie uns einen Dummy-Text generieren. Vielleicht haben wir also mehrere Absätze. Bringen Sie die Zeichen nach unten eso Vielleicht so etwas wie drei Absätze alle auswählen und beachten , dass ich ausgecheckt habe, dass die HTML-Absatz-Tags das macht es einfach einfacher zu kopieren und einfügen in meine Webs Web-Inhalte. Und ich glaube nicht, dass ich das hier mehr trennen werde. Und vielleicht haben wir hier etwas kürzeren Dummy-Text, vielleicht nur ein paar markierte Punkte oder so etwas. Werfen wir einen Blick darauf und legen Sie das in den Inhalt. Also jetzt wieder, wenn man wieder auf unsere Website geht, sieht es wirklich nicht nach viel aus. Dort ist alles irgendwie gestapelt. Wir haben kein Styling, aber ich verspreche dir, dass wir zum Styling kommen und dort wird wirklich die Magie passieren. All dies kommt also in den nächsten Lektionen auf. 6. 6 schwimmende Elemente: Nun, da wir unsere HTML-Struktur ausgearbeitet haben, sind wir bereit, etwas Styling zu implementieren. Und Styling ist wirklich, wo all die Magie passiert. Mit nur dem einfachen HTML die Webseite wirklich nicht nach viel aus. Sieht einfach wie ein normales Textdokument aus. Es gibt kein Layout, und es sieht sicherlich nicht wie unsere Designer aus, aber wir können sehen, dass wir tatsächlich den mittleren Inhalt und die Containerbereiche haben, die wir tatsächlich anfangen können, sich zu verschieben und sie mit CSS zu bewegen, um , um es dem Benutzer mehr im Einklang mit dem, was unser ursprüngliches Design war, zu präsentieren. Die Art und Weise, wie wir diese Website machen werden, ist, weil wir sie aus einer ersten mobilen Perspektive betrachten werden . Und die Idee hier ist, dass wir mit der Medienabfrage beginnen wollen, und was Medienabfragen tun, ist, dass sie Ihnen erlauben, Ihre Website auf verschiedenen Bruchpunkten zu präsentieren und in verschiedenen Moden präsentiert. Und wenn wir aus einer mobilen ersten Perspektive entwerfen, so dass würde nur passen Sie dies ein Handy sein. Zuerst werden wir es so gestalten, wie es aussehen wird, von vielleicht einem iPhone oder vielleicht etwas größeren Bildschirm dort. Also werfen wir einen Blick auf unsere Website und so wird es auf dem iPhone aussehen . Wenn wir also denken, dass Mobil zuerst ist, werden wir diese Bruchpunkte setzen. Also, wenn die Website ein wenig größer wird, so vielleicht haben wir gesagt, es reagiert, so dass wir dynamisch die Größe anpassen können. Also wollten wir anders präsentieren. Wir wollen anders präsentieren, je nachdem, welche Größe des Bildschirms die Benutzer kommen auf. So können wir es auch hin und her und die verschiedenen Anpassungspunkte anpassen. Diese Luft die tatsächlichen Bruchpunkte, die wir betrachten müssen, wenn wir unsere Website neu dimensionieren und einige der Elemente in unserer Website neu ausrichten, um unterschiedlich auf verschiedenen Bildschirmen dargestellt werden . Die Idee ist also, dass wir auf einem kleinen Bildschirm das volle verfügbare mit dieser Spalte aufnehmen wollen und auf einem größeren Bildschirm wollen wir eigentlich als zwei separate nennen uns Spalten zu trennen. Lassen Sie uns das in unserem Styling kümmern, und wir haben bereits mit Style dot CSS verknüpft. Also jetzt kann ich Style Dot CSS öffnen und Aiken beginnen damit zu arbeiten. Also, zuerst haben wir auf I d primär erstellt, erstellen wir eine zweite 1 sekundäre. So sind wir in der Lage, diese Container leicht zu identifizieren und auf einige CSS zuzugreifen und sie anzuwenden. Also haben wir primär, und dann hier drüben kann ich dies auf sekundäre anwenden und einige Standardbreiten festlegen. Also, was ich tun möchte, ist, dass ich aus einer kleinen Größe bauen möchte und sobald die Größe tatsächlich größer wird , möchte ich, dass mein Medienbildschirm aktualisiert und verändert und verschiedene Stylings anwendet. Also im Grunde, was das sagt, ist, dass, wenn wir ein Minimum mit off für 80 haben, so wäre für 80 wahrscheinlich das kleinste, mit dem wir für Handy und an diesem Bruchpunkt arbeiten würden. Also, wenn es größer als 4 80 ist oder wenn es größer als unser kleinster Bildschirm ist, möchte ich, dass dieses CSS auf den Rest der Seite angewendet wird. Also werden wir unser Standard-CSS hier und dann innerhalb der Medienabfrage aufbauen. Dies ist, wo wir kümmern uns um diese Anpassung für die verschiedenen Größen und weil wir mit einer mobilen ersten Perspektive beginnen, ist, dass wir beginnen bauen und setzen unser Styling, wie es aussieht, wenn es vorbei für 80 bricht. Und das ist anders als bei Medienabfragen. Sie haben die Möglichkeit, Männer mit und Max mit zu tun. Und der Unterschied hier ist, dass, wenn wir das Maximum mit treffen, als wir etwas in den Männern angewendet bekommen , mit nimmt es von der anderen Seite, wo die Männer mit für 80 sein müssen. Also lassen Sie uns einen Blick darauf werfen und vielleicht kann ich zunächst eine Hintergrundfarbe anwenden, so dass wir tatsächlich einige wirklich schöne Änderungen sehen können und wahrscheinlich genug, um diese zu entfernen, weil dies unsere Website wirklich ziemlich schlecht aussah mit diesen Farben. Aber das ist nur, um den Bruchpunkt zu veranschaulichen. Vielleicht könnte ich das Red machen, damit es wirklich auffällt, wenn es bricht. Also lasst uns das auffrischen und wir sehen, dass mit den Männern mit, wenn unsere Webseite größer ist als die 4 80, dann bekommen wir das Styling Anwendung, und ich werde es einfach schnell umdrehen für Max mit, damit wir ein besseres Gefühl davon bekommen können was es ist sieht aus wie von der anderen Seite. Was denkst du, wird hier mit dem Max passieren, wenn ich es auffrische, sehen wir, dass unser Styling weg ist. Aber wenn wir es verkleinern, dann kommt unser Styling zurück. Also, das ist der eigentliche Unterschied zwischen Minute und Max mit es hängt von der Perspektive und wie Ihr Gebäude. Und weil in diesem Fall möchte ich beginnen, indem ich all dieses Styling auf die kleinste Größe spielen und die Bruchpunkte auf der größeren Größe haben, werde ich mit Männern beginnen, damit dauert es einige gewöhnen, um mit den verschiedenen Männer wits und klopft wits. Sie können es auch dazwischen hier tun, wo Sie ihn in einem max und Sie könnten verschiedene Kombinationen tun, so dass es wirklich ziemlich komplex als gut. Wenn die Notwendigkeit da ist, äh, also lassen Sie uns etwas Basic mit so weiter setzen, wenn es kleiner als 4 80 ist, wollen wir nur die volle 100% nehmen und 100% ist der Standard auf dem div, also müssen wir uns keine Sorgen darüber machen, aber wir müssen uns darum kümmern, wenn es Streifen, wenn die Größe tatsächlich größer ist als für 80. Das ist also, wo, wo und warum wir diese mits hinzufügen müssen. Also nehmen wir 60% der mit. Und wenn Sie reagieren entwerfen, müssen Sie immer bedenken, dass es in der Regel besser ist Zehenarbeit mit MAWR ohne tatsächlich feste Größen mit diesen Flüssigkeitsgrößen wurden Prozentsätze verwendet, nur wegen der Tatsache , dass es Sie umso mehr Flexibilität bei der Präsentation dieser Inhalte. Eso, ich werde das auf 35 setzen, weil wir ein wenig Abstand dazwischen haben werden. Es gibt also, dass wir diesen vollen, verfügbaren Abstand eso nicht aufnehmen wollen . Ich setze es auf 60 und 35 Ich werde die Farben für jetzt behalten, bis wir in einige Inhalte hinzufügen . Und dann wenden wir wirklich das Aussehen und Gefühl von dem an, was wir wollen, denn das wird uns nur helfen, zu veranschaulichen, wo dieser Bremspunkt ist, und wir werden die Verlagerung des Verstandes sehen. Also eine andere Sache, die ich einschließen muss, und weil das sein wird, wird das eine zweispaltige Website sein. Also schauen wir uns das an und ich werde es tatsächlich größer machen, weil wir nichts sehen können . Wir sehen also, dass wir jetzt die 60% haben, die wir haben die 35%, aber sie sind nicht wirklich ausgerichtet. Und das ist, wo ein weiteres wichtiges Stück Eigenschaft, das wir mit CSS hinzufügen müssen, und diese Luftschwimmer ermöglichen es uns zu spezifizieren, wo dieser bestimmte Container sitzen wird. Und mit der zwei Spalte ist es wirklich einfach und unkompliziert. Also haben wir die Vorwahlen auf der linken Seite schweben und denken Sie daran, zurück in unserem Diagramm hier, dass die primäre oder es eigentlich etwas größer sein sollte, und wir wollen diese etwas kleiner machen. Das wird nicht so viel Inhalt haben. Also haben wir diesen hier auf der linken Seite, diesen auf der rechten Seite. Also, wenn Primärien links schweben, wo denkst du, wird sekundär schweben? Und wenn du richtig gesagt hast, hast du Recht. Schauen wir uns das an und sehen, wie es aussieht. Also, sehen Sie, jetzt zwingen wir den Inhalt richtig auszurichten und es gibt eine Sache, die hier auftaucht , dass wir sehen, dass unsere Fußzeile tatsächlich zwischen unseren Inhalten hier angezeigt wird. Und das liegt daran, dass die Art und Weise, wie Inhalte behandelt werden, dass sie automatisch versucht, sich im verfügbaren Raum auszurichten, und vor allem, wenn Sie ihn nach links und rechts schieben, als es sagen wird: Oh, Oh, na ja, Hier steht ein wenig Platz zur Verfügung. Lassen Sie mich mich da reinziehen, denn das scheint verfügbar zu sein. Und so ist dies, wo wir eine klare auf der Fußzeile oder auf dem Float, Linken und Raten tun müssen. Und manchmal ist das eines dieser Dinge, mit denen die Leute erwischt werden, wo sie nach links schwebten , rechts schweben. Aber sie vergessen immer, in der klaren hinzuzufügen und das klare ist wesentlicher Teil der Strukturierung der Webseite, weil Sie das nicht wollen. Also habe ich mich nicht identifiziert. Ich werde nur das Fußzeilenelement verwenden. Aber wenn Sie die Fußzeile in Ihrem Code verwenden, dann seien Sie vorsichtig, dass Sie in der Lage sind, es richtig zu identifizieren, also könnte ich wahrscheinlich einfach nur die Fußzeile tun. Wir müssen also klar machen, dass wir diese Schwimmer löschen müssen, um unsere Inhalte richtig präsentieren zu können. Lassen Sie uns also auch eine Hintergrundfarbe geben, damit wir tatsächlich sehen können, wo die Container sind. Und das ist tatsächlich nützlich, wenn Sie Websites erstellen, die Sie in der Lage sind, zu färben und zu sehen, wo sich die tatsächlichen Inhalte befinden, wo sich Ihre Grenzen des Containers befinden, besonders wenn Sie keine Art von Platzhalter, weil es dann wirklich schwer ist herauszufinden, wo Ihre Grenzen sind und so weiter. So könntest du sogar manchmal Leute finden, die Adam wie eine Grenze oder so etwas sind. Also vielleicht kann ich Punkt in festen Block hinzufügen, so dass Sie wirklich sehen können, wo Ihre Inhalte fallen. Also gehe ich in ein paar Grenzen und wir werden diese Grenzen entfernen. Es ist also auffrischen, und wir können sehen, wo unsere Inhalte sitzen. Und eigentlich habe ich eine bessere Idee mit der Grenze. Also vielleicht kann ich hinzufügen, eine Klasse zu verwenden, also werde ich nur eine Grenze eins erstellen, und ich werde dies als eine Klasse hinzufügen, weil dies es tatsächlich einfacher für uns machen wird , diese Grenzen später zu entfernen. Also hier kann Klasse anwenden und ich kann Klasse auf jeden dieser Abschnitte anwenden. Damit wir diese Grenze haben, die wir sehen können. Und auch kann ich ein Teoh den Snap anwenden und anwenden gewonnen t hier und da und nur schnell einen Blick nehmen und ich glaube nicht, dass ich sie alle habe. Also lasst uns das auffrischen und sehen, wie es aussieht, damit wir sehen können, dass die Art und Weise, wie unsere Website strukturiert und angelegt ist , wir diese Art von ähnlicher Struktur zu hier bekommen. Es fängt tatsächlich an zu schauen und sich Mawr im Einklang mit unserem Design zu präsentieren. Also die nächste Lektion werden wir weiter daran arbeiten und wirklich die Art und Weise aufbauen wir unsere Website sehen wollen, werden wir in ein paar Polsterungen hinzufügen, um diesen Text ein wenig besser zu strukturieren und ein paar andere Dinge, die wir werde hinzufügen, um es mehr vorzeigbar aussehen zu lassen. Und natürlich werden wir dieses Navigationsmenü gestalten. Es ist also keine neue geordnete Liste mehr und präsentiert sich dem Benutzer als Navigationsmenü. Also all dies und mehr kommt 7. 7 Header-Elemente aktualisieren: Einer meiner Lieblingsteile von Website-Design und Entwicklung ist der Teil, wo tatsächlich, Dinge beginnen zusammen zu kommen und aussehen, wie mein ursprüngliches Design war. Es ist also in der letzten Lektion, wie einfach wir diese Containerbereiche erstellen und sie auf der Seite verschieben und sie tatsächlich dort positionieren können, wo sie landen sollen. Also werde ich das hier für den Überschriftenbereich tun, denn das ist eigentlich der Teil, der am wenigsten aussieht wie unser eigentliches Design. Und das ist der Teil, auf den ich mich eigentlich konzentrieren und ein bisschen mehr arbeiten möchte. Lassen Sie uns also unseren Editor öffnen und in unser Stylesheet springen und einige Aktualisierungen im Überschriftenbereich vornehmen . Also der Header, den wir vielleicht das erste, was wir tun müssen, ist einfach auseinander zu brechen, dass die beiden Abschnitte, wir haben unsere 1. 1 hier und dann haben wir unsere 2. 1 Also vielleicht ist die beste Idee jetzt wirklich auseinander zu brechen und sie zu präsentieren in verschiedenen Bereichen innerhalb dieses Inhalts. Also wollen wir immer dies Dieser Abschnitt verstreut hat hier nach links zu schweben, weil dies der Haupt-Header-Bereich sein wird und wir vielleicht das Textcenter ausrichten wollen. Also werden wir den gleichen Trick verwenden, den wir hier unten verwenden, wenn wir unsere primären und sekundären Abschnitte trennen . Stattdessen werden wir sicherstellen, dass wir unseren Header-Bereich hier aktualisieren. Werfen wir einen Blick auf unseren Code und wie wir diesen identifizieren. Eso, wir haben die Kopfzeile. Wir haben ein Def, also haben wir keinen benannten Def. Vielleicht ist es besser, wenn wir dies aktualisieren und einen Namen hinzufügen. Also vielleicht kann ich in etwas hinzufügen wie Logo waren Firmennamen oder so etwas, dass wir diesen Abschnitt identifizieren konnten mit und auch wir wollen identifizieren sind jetzt. Vielleicht ist sogar die beste Idee hier, Header auf I d des Headers zu geben und sie dann auf diese Weise zu identifizieren . Also jetzt wissen wir, dass wir mit Header arbeiten und wir haben nur einen Tod innerhalb ihrer und manchmal wollen Sie wirklich vorsichtig mit der Identifizierung von Elementen sein, denn wenn Sie etwas mehr Krankheit hinzufügen und Sie werden diesen Stil zu diesem Dip ply also vorsichtig mit der Art und Weise, wie Sie Ihr CSS tatsächlich präsentieren und Sie Ihre Auswahl machen . Aber weil ich nur diesen einen Devyn da habe, kann ich auch mit Header-Dip davonkommen. Und dann kann ich auch einfach mit Header Nav davonkommen, weil dies mein jetzt ist, das in meinem Haupt-Top-Bereich ist. Also werden wir das gleiche Format verwenden, wie wir hier oben gemacht haben, wo wir Dinge ziehen können, die Zehe nach links, die Dinge nach rechts ziehen können, wenn nötig. Also müssen wir zuerst, was wir tun mussten, war tatsächlich ihre verfügbaren mit angeben und erinnern Sie sich wieder, wir sind hier unten in der Medienabfrage, weil ich vielleicht den vollen verfügbaren Platz in Anspruch nehmen möchte wenn wir Größe neu und wir wieder verkleinern. Und was das tun wird, ist, dass das die Menü-Navigation tatsächlich wieder an die Position hier drüben verschieben wird . Also, wenn wir es verkleinern, werden wir unseren Navigationsbereich haben, wo Sie eine Firma, Informationen und unsere lokalen, aber wie wir mehr Immobilien haben. Wir haben eine Menge Leerraum hier drüben, und deshalb wollen wir diese Navigation auf die rechte Seite ziehen. Also lasst uns es ein mit geben und einfach schnell Augapfel es und sagen, dass du mit bist Vielleicht können wir 50% tun oder wir können eine 45% für das div tun. Und nicht sicher, dass wir dort auch eine Farbe hinzufügen können. Oder vielleicht können wir es einfach ohne die Farbe lassen, weil wir das Styling dort haben und dieses wird schweben. Also, auf welcher Seite wird das schweben? Das wird auf der linken Seite schweben und dann ist die Navigation. Wir behalten das auch bei 45 . Beachten Sie also, dass wir nicht die volle 100% tun müssen, wenn Sie etwas Abstand dazwischen haben wollen . Es ist also, das zu aktualisieren. Also musste ich nur dort wieder retten. Und jetzt, wenn wir es aktualisieren, sehen wir, dass wir unser Lokal hier auf der linken Seite haben, unsere Navigation auf der rechten Seite. Und wenn wir es neu dimensionieren, sehen wir, dass es wirklich an Ort und Stelle fällt und auf Handy. Das ist es, was wir tun wollen. Wir wollen viel von unseren verfügbaren Immobilien wie möglich aufnehmen, und das einzige, was jetzt, wo wir auch aktualisieren müssen, wird dieses Navigationsmenü sein , weil wir nicht wollen, dass es präsentiert oder vertikal. Wir wollen es horizontal präsentieren, damit es weniger Immobilien beansprucht. Und das ist auch der Fall, wenn es auf einem großen Bildschirm ist, dass wir horizontal statt dieser Listenart Mode präsentiert werden wollten , also werde ich mich darum in der kommenden Lektion kümmern. 8. 8 Nav Menü erstellen CSS: in dieser Lektion. Wir werden unsere Navigation wiederholen, um ein Inline-Block zu sein und sich horizontal anzuzeigen , um es tatsächlich eher wie ein Menü aussehen zu lassen. Also lasst uns hier rauf zu unserem Haupt-Styling-Bereich gehen. Also außerhalb der Medienabfrage, weil wir dieses Styling wollen, werden die horizontalen Werte tatsächlich auch hinzugefügt, wenn es auf einem kleinen Bildschirm ist, da wir nur drei Elemente in unserem Navigationsmenü haben, also wollen wir es präsentieren auf diese Weise kann eso eines der ersten Dinge sein, die wir uns ansehen möchten, ist das Padding zu aktualisieren weil ich etwas Padding um das Navigationsmenü haben möchte, das nicht genau oben in der oberen Ecke sitzt . Geben wir ihm 20 Plektren, und vielleicht wollen wir nur die Polsterung oben haben. Aber wir wollen es ganz nach links und rechts ziehen. Eso schwächen, Padding auf diese Weise einrichten, und das wird uns ein wenig mehr Abstand dort geben, um im Wesentlichen zu sehen, wir haben gerade dieses Navigationsmenü nach unten verschoben und lassen Sie uns tatsächlich in den wirklich schönen magischen Teil von Booten. CSS ist die Art und Weise, wie wir diese Arten von Menüs leicht transformieren können. Eso eine Nordenliste. Also jeder Knave, der eine A Norden Liste enthält, müssen wir diesen Standard auf geordnete Listen Styling loswerden , und dies ist in UL enthalten. Also müssen wir unseren Abschied 20 setzen und ich werde das hier verkleinern und eine Lebensvorschau eröffnen , damit wir sehen können, was hier passiert. Dies ist eines der netten Dinge über Klammern ist, dass wir diese Fähigkeit haben, eine Lebensvorschau zu machen und Sie brauchen nicht wirklich einen Server laufen zu lassen. So können Sie hier sehen, dass, wenn wir aktualisieren und speichern, Sie werden sehen, wie es sich hier ändert, oder hoffentlich sehen, wie es sich hier auf der rechten Seite ändert, in Null-Polsterung. Dort wird automatisch bereits über diese Aufzählungspunkte verschoben. Eso sehen wir, dass wir unsere ursprüngliche Grenze hier für den Container haben, und die Kugelpunkte sind bereits ausgezogen. Also, wenn ich das loswerden sollte, sind sie wieder eingezogen. Das ist also, was wir tun, wenn wir an dieser Standardeinstellung auf der bestellten Liste aktualisieren und entfernen . Eso noch einen. Es muss diese Aufzählungspunkte komplett loswerden und wir werden das einfach auf keine setzen . Sobald wir das tun, verlieren wir diese Kugelpunkte. Also haben wir das meiste von diesem Vergießen loswerden, und wir können auch Marge machen und Marge auf Null setzen. Dies ist nur für den Fall, dass es einige Margenprobleme gibt. Und sobald wir das gespeichert haben, wird das aktualisiert. Lassen Sie uns also eine Transformation der NAV-Listenelemente durchführen. Nun, da wir diese Aufzüge auswählen und wir nur anzeigen, gibt es eine Reihe von verschiedenen Möglichkeiten, es anzuzeigen. Standardmäßig ist es Block. Aber wenn wir in Linie zu tun, und wir sehen, es ändert sich automatisch auf diese horizontale. Also die alle Lager eine nach dem anderen. Und wenn ich im Zeilenblock zeige, wird dies mir einige dieser Blockfunktionen geben, aber es gibt mir auch und präsentiert dieses Listenelement in Zeile, und dann lasst uns unsere Liebe aktualisieren. Also alle, die einen Anker haben und wir können dort etwas Polsterung hinzufügen , so dass sie ein wenig mehr auffallen, also lassen Sie uns versuchen, 15 hinzuzufügen und aufzufüllen, vielleicht eine Polsterung von 10 hinzuzufügen . können wir jetzt sehen. Sie nehmen bereits den verfügbaren zugewiesenen Speicherplatz ein. Und wenn wir so etwas wie Hintergrundfarbe machen, damit wir sie tatsächlich ein bisschen besser sehen können , können wir sehen, dass all diese Elemente präsentiert werden. Und jetzt fügen wir hier ein passendes Styling hinzu. Also Studio und wir werden das hier beim Schweben machen. Also jetzt schweben und würde eine andere Hintergrundfarbe machen, vielleicht, wenn es schwebt, oder vielleicht nur eine andere Farbe. Also vielleicht, wenn wir schweben auf wird zu Schokolade wechseln. So, jetzt sehen wir, wer auch immer wir schweben und eines der anderen Dinge, um loszuwerden, dass unterstrichen, so dass Textdekoration geändert, dass keine, die von diesen Unterstreichungen loszuwerden. Eines der wichtigsten Dinge, die Benutzer immer mögen, ist diese Hintergrundfarbe ändern, so dass Sie wie eine subtile Änderung oder so etwas tun können. Also lassen Sie uns, äh, zeigen, wie das jetzt aussieht. Also, wenn wir darüber schweben und vielleicht sollte dies warten, also tun Sie mehr von einem Graustufengefühl toe unser Design eso jetzt, wenn wir darüber schweben, wurden mit ihrem Inhalt auf diese Weise präsentiert, Wann immer ich zu diesem anderen Beispiel übergehe, dass Ich hatte hier s wir werden sehen, dass das so ist, wenn wir darüber schweben, würde der Effekt sehen. Und dann natürlich natürlich auch auf den kleineren Bildschirmen. Also lasst es uns runter trinken. So erhält es immer noch den Effekt der farbwechselnden Hintergründe eso, wenn sie eso mit Handy ausgewählt werden, es ist ein wenig anders, weil es den Hover nicht auf die gleiche Weise nimmt , weil Sie nicht in der Lage sein wollen, Dinge auszuwählen, während Sie sich bewegen das als Ziehen auf es s betrachtet wird, ist der Hover stattdessen, wenn Sie klicken. Und das ist die Auswahl der es s So ist es etwas anders, aber funktioniert verschiedene Wege auf den Unterschied. Verschiedene Geräte. So kann je nach Gerät auf es je nach Gerät aufunterschiedliche Weise dargestellt werden. Also werden wir das loswerden, dass wir jetzt darüber schweben können. Also in der nächsten Lektion werden wir weiterhin unser Aussehen und Gefühl unserer Website ausbauen, vielleicht gehen Sie zurück zum ursprünglichen Design und schauen Sie sich die lokalen und sehen, wie wir das Logo etwas besser präsentieren können . Und wir müssen auch diese zu dieser rechten Seite ziehen, denn in unserem ursprünglichen Design, denn in unserem ursprünglichen Design, sind Neuling hier drüben auf der rechten Seite, und wir müssen das mit im Einklang mit unserem ursprünglichen Layout und Pflanzen halten. Ich werde schnell Punkt hinzufügen. So sind jetzt und ihre wichtigsten Navigationsbereich. Also hier können wir das auf die rechte Seite ziehen und wir brauchen diesen Onley tatsächlich innerhalb der Medienabfrage. Dies ist also eine andere von denen, die spezifisch für die verschiedenen Größen sind. Also lasst uns Text eine Zeile machen, und wir sind nur eine Textzeile auf der rechten Seite. Das ist also nur auf den größeren Bildschirmen. Und tatsächlich können Sie dies auch hier kopieren, so dass wir dort keine separate Eigenschaft aufbrauchen. Also schreibe die Zeile, wir haben sie nach rechts geschoben und mit, dir das an und sieh dir an, wie es aussieht. Also, jetzt zieht es den Text auf die rechte Seite, und sobald wir diese Grenzen loswerden, wird es viel besser aussehen 9. 10 Margins Polsterung Logo area: in dieser Lektion. Ich möchte einen weiteren Bruchpunkt einführen. Also haben wir an der kleinsten Bruchstelle hier gearbeitet. Also, wenn wir es bei 4 80 haben, ist das oder 4 80, es sei denn, so wollen wir, dass unser Inhalt jemand vorbeibricht, dann bekommen wir die beiden Spalten und so weiter. In der Regel haben Sie vielleicht mehr als nur die einen Breakpoints, die ich in einem zweiten Breakpoint hinzufügen möchte , und vielleicht werden wir dies mehr für Tablets festlegen. Also werde ich die gleiche Linie hier gehen, wo ich meinen Medienbildschirm bei 4 80 hatte und ich werde es bis zu 700 nehmen, um das hier unten zu erschaffen. Also mindestens mit 700. Und hier passiert, was immer ich will. Ich will, dass es um 700 Uhr passiert. Und eines der Dinge, die ich möchte, um zu bewegen und dies geschehen ist, ist, wann immer so unsere Navigationsleiste und im Navigationsmenü sind . Also schauen wir uns das noch einmal an. Also, wenn wir jetzt 700 treffen, sehen wir, dass wir es mehr bewegen. So gibt uns dies die Fähigkeit, etwas mehr Flexibilität in unserem Design, und wir können tatsächlich in einigen zusätzlichen Styling hinzufügen, je nachdem, welche Größe des Bildschirms es ISS. Also wollen wir vielleicht unser Menü dort auf der linken Seite haben und statt nach rechts gezogen , denn wenn wir einen Bildschirm von 700 haben, wollen wir es vielleicht zentrierter halten und dem Benutzer präsentiert. Und dann, natürlich, schrumpfen wir es den ganzen Weg nach unten. Dann werden wir unser Jahr mit all diesen verfügbaren Icons haben. Also können wir hier auch etwas hinzufügen, wo wir vielleicht einen Mann mit oder so etwas haben wollen . Also lasst uns ein Minimum mit 4 80 sehen, wie sich das herausstellt, denn vorher, wenn wir es nach unten schrumpfen, eso sie sind Strumpf. Also, jetzt haben wir einen Mann mit Hinzugefügt. Also lasst uns wieder in unseren Logo-Bereich springen und ein bisschen mehr darüber arbeiten, wie wir das präsentieren wollen . Also das ist unsere Website bisher, und wir haben den Bruchpunkt bei 4 80 so manchmal wollen Sie vielleicht einen anderen Bruchpunkt für vielleicht mobile Geräte Tablet oder so etwas haben . Also wollen Sie vielleicht für einen etwas größeren Bildschirm einen weiteren Bruchpunkt haben. Also vielleicht, wo das Menü positioniert wird und so weiter. Werfen wir einen Blick auf das und fügen Sie einen anderen Bruchpunkt hinzu. Und das wird auf die gleiche Weise geschehen, wie wir in unserer 1. 1 hinzugefügt, wo wir unsere Männer mit unserem Medien-Bildschirm hatten . Also kopiere ich diesen Teil hier und füge das unten hinzu. Und für diese Zeit, lassen Sie uns unseren Bruchpunkt auf 7 20 Also wäre dies mawr nach dem Vorbild unserer jetzt unsere Größe vielleicht wie eine Tablette oder so etwas sein könnte. So haben wir die Fähigkeit, Adam verschiedene Farben und Änderungen als auch. Also lass uns hier runter gehen und vielleicht will ich diese 45% loswerden. Dieser Schwimmer rechts, und ich möchte das hier drüben hinzufügen. Also lasst es uns so machen und sehen, was jetzt passiert, was auch immer wir den Bruchpunkt erreicht haben. Hier wird es an diesem 700 Punkt neu ausrichten. Also alles, was weniger als 700 ist, und dann, wenn wir über den Bruchpunkt von 7 20 kommen , sehen wir , dass es jetzt diese volle Größe bis zu diesem Punkt nimmt. Und dann, wenn wir 7 20 haben, nimmt es weniger Platz ein. Also sehen wir hier, dass wir diesen Schwimmer richtig haben. Aber jetzt ist eines der Dinge, die wir auch tun müssen, dieses hier drüben zu aktualisieren um zusammenzufallen, denn jetzt, da ich es aus diesem schwimmenden Bereich herausgezogen habe, müssen wir es konsistent halten, denn dort haben wir diesen Überlauf der beiden verschiedene Elemente. Jetzt, wenn ich es verkleinere, sehe ich, dass ich es viel besser präsentiere. Und diese Textillinie, richtig? Es sieht auch nicht richtig aus. Vielleicht können wir also Text machen, ausrichten, zentrieren und wieder, je nachdem, was Ihr Design ist, möchten Sie vielleicht etwas anderes für diese verschiedenen Bruchpunkte haben und so weiter. Das ist also, was wir jetzt bei den verschiedenen Bruchpunkten haben. Wir behalten immer noch ihre Unternehmensinformationen hier ganz oben und unseren Text. Lassen Sie uns also ein wenig daran arbeiten und etwas Styling anwenden, um das ein wenig vorzeigbarer aussehen zu lassen. Und ich möchte auch, ah, Rand am unteren Rand dieses gesamten Headers hinzufügen ah, . Also lasst uns das aktualisieren, denn das sieht jetzt auch nicht genau richtig aus. Also lasst uns Header machen und einfach hinzufügen, äh, Rand unten, Untertauchen unten. Und lassen Sie uns 45 Picks am Boden machen. Mal sehen, wie das jetzt aussieht. Es ist also nicht die richtige Bildschirmseite. Also lassen Sie uns zu diesem Beispiel springen und wir können das wieder in unseren Code sehen. Wir sehen, dass es tatsächlich nichts davon nach unten bewegt, und das liegt daran, dass wir es schweben. Also, um diesen Abstand unten zu erstellen, sollte es wahrscheinlich hier oben auf dem anderen Medienbildschirm addieren. So sehen wir, dass jetzt, wann immer das in hinzufügen, es schafft den Abstand, und es ist tatsächlich treffen uns geben uns diesen Raum und den wir für unser Menü brauchten. Es ist also ein bisschen ein Trick da. Wenn ich das jetzt aktualisiere, ist es ein bisschen besser verteilt. Siehst du da. Es ist in unserer Marge am unteren Rand hinzugefügt, und das wird tatsächlich funktionieren und sehen viel besser präsentiert, als wir diesen Inhalt nach unten verschieben. Und natürlich, wenn wir es auf die größere Größe bringen, müssen wir uns nicht mehr um die Ränder kümmern, denn es gibt diesen Abstand bereits eingebaut . Und wenn wir einen Abstand zwischen dem lokalen Bereich und dem Hauptinhaltsbereich haben wollten, könnten wir das auch hinzufügen. Kommen wir zurück in unsere CSS Updates. Einige dieser lokalen eso hatten wir auf I D gegeben oder wir nannten es einfach Header und Unternehmensinformationen . Also lasst uns dort auf diesen zugreifen und etwas Styling hinzufügen. Und wir können das hier ein Top machen, weil wir eigentlich nicht sehr spezifisch sind. Wir wollen das scheinen, vielleicht Polster- und Styling-Informationen wie wir es tun. Nehmen wir also den Hauptcontainer, den übergeordneten Header, und dann werden wir das div auswählen, das sich dort befindet. Und jetzt Adam, ein paar Eintopf dort. Also vielleicht 10 Picks und ich sollte das wieder holen. Jetzt können wir ein bisschen mehr von dem sehen, was vor sich geht. Natürlich ist dies ein Wesen auf jede Größe angewendet, weil dies jede Größe ist, werden wir das gleiche Styling anwenden. Und hier würden Sie Farben anwenden und so weiter, je nachdem, wie Sie möchten, dass es aussehen, hier können Sie alle diese Informationen anwenden. So könnten wir auch genauer sein, wie viel Linienhöhe wir auf der H haben und so weiter. Und das ist, wo wir all diese Informationen hinzufügen würden. Ich mag also nicht die Tatsache, dass der kleine Text dort so viel Abstand Eso Nein hat, dies ist ein Standard hier, also möchten wir vielleicht auch das anpassen. Und wir wollen vielleicht noch ein wenig Abstand haben. Wir wollen wirklich spezifisch auf diese h sein. Also, vielleicht könnte ich einfach gehen und ich könnte, damit wir es ein bisschen enger machen können. Wir könnten so etwas wie Lügen tun. So würde die Zeilenhöhe uns erlauben, die Höhe der verfügbaren Linie anzugeben. Also sehen wir sie. - Was? Je größer die Zeilenhöhe ist, desto mehr wird der Abstand erzeugt. Es gibt so, dass wir es einfach bewegen können, Teoh , wie wir wollen, dass es aussieht, damit wir es da unten wirklich schrumpfen können und es genau so aussehen lassen , wie wir es den Benutzern präsentieren wollen. Also, wenn ich das aktualisiere, sieht das ein bisschen besser und präsentiert aus. Ich habe ein wenig Platz da drin auf der linken Seite. In der nächsten Lektion werden wir weiter daran arbeiten und es bekommen, Teoh, mehr wie unser Inhalt präsentiert wird. So bemerken wir hier, dass unser Haupt-Rapper-Bereich hier für die beiden Spalten ist dies kleiner, die Fußzeilen kleiner. Das ist also etwas, das wir in der nächsten Lektion hinzufügen müssen und dann wirklich so aussehen und präsentieren, wie wir es am Anfang skizziert haben. Also kommt alles eine Menge davon im nächsten Abschnitt. 10. 13 Update Styling nav Menü Updates: Also, jetzt, da wir unsere grundlegende Struktur unserer Website aufgebaut haben, so können wir sehen, dass es re Größen und das Menü bewegt sich herum und alles sieht ziemlich gut s und ich kann alle diese Grenzen entfernen , die ich früher hatte, dass wir früher verwendet wurden. Und ich könnte einige dieser Farben loswerden, die wir für das Styling verwendet haben um es ein bisschen besser aussehen zu lassen. Also vielleicht ist das, was ich tun möchte, einfach entfernt, das würde. Und das können wir immer zurückbringen, wenn wir es brauchen. Wenn wir im Krieg zu unserem Design eines der Dinge hinzufügen möchten, wenn Sie Ihre Website entwerfen , ist es immer eine gute Idee zu verwenden, wie große Farben, eso vielleicht statt dieses leuchtend rote Orange und Bienen wollen wir diese so aktualisieren, dass sie eher eine graue Farbe haben, die so ähnlich ist wie das, was wir hier tun . Also werde ich das Primär loswerden. Ich werde das einfach aktualisieren, um weiß zu sein, weil Sie die meiste Zeit möchten, dass Ihr Hauptinhalt auf einem weißen mit schwarzem Text ist. Es ist aktualisieren, dass zu Grau und dann vielleicht unsere Fußzeile, wo vielleicht unsere Fußzeile wirklich dunkel zu einem Blockhintergrund und ein weißer Text tut diesen Block und würde unseren Text ändern, dass warten abhebt. Vielleicht haben wir nicht einmal eine minimale Höhe. Also vielleicht eine minimale Höhe von 200 Bildern, die ein bisschen zu viel sein könnten. So werden 100 Bilder in etwas Padding für den Text hinzufügen. Also vielleicht 45 Plektren zum Klopfen. Es ist also schön und zentriert, und es gibt uns ein wenig Platz. Also werde ich das auch runterbringen, damit wir es hier auf der linken Seite sehen können, wie es präsentiert wird. Eso möchte auch dieses Standardblau auf dem Navi loswerden und vielleicht einfach mehr von einer großen Skala wieder hinzufügen . Das wird uns eine bessere Vorstellung von den Farben geben, die wir verwenden wollen, bevor wirdie Farben präsentieren. Das wird uns eine bessere Vorstellung von den Farben geben, die wir verwenden wollen, bevor wir Und vielleicht ist das gut. Also wissen wir, dass wir eine helle Farbe haben wollen, und wenn wir mit der Maus über sie eine dunklere Farbe bewegen, wollen wir die Schriftfarben umdrehen, damit vielleicht eine andere Sache. Standardmäßig möchten wir diesen Standard von Blau loswerden und vielleicht sogar schwarz für jetzt machen und vielleicht das gekämpfte Warten aktualisieren, um fett zu sein. Dies wird der Schriftart ein wenig mehr geben. Es zeichnet sich also ein wenig besser aus und möchte auch zum Header springen und das aktualisieren , so dass wir eine Hintergrundfarbe haben, um unseren Header unterscheiden zu können, also vielleicht, äh, äh, hellere Farbe für die Überschrift Hintergrund. Und das ist eine Farbe, die auf die gesamte Auswahl zutrifft. Manchmal möchten Sie diese aufteilen, anstatt sie in den Medienabfragen . Vielleicht möchten Sie die verschiedenen Farben haben, die Standardfarben, die direkt in diesem oberen Teil verwenden und vielleicht sogar einen separaten Abschnitt für Farben Eso erstellen Für diesen Teil werde ich nur Header tun und sie sind werde in einer Hintergrundfarbe dort hinzufügen und wir werden einen Hintergrund zu tun. Wir werden eine Hintergrundfarbe machen, um es innerhalb dieser Grauskala zu halten, und wir möchten vielleicht auch eine Rahmenfarbe hinzufügen. Und vielleicht können wir das als schwarz machen und jetzt bemerken wir, dass diese Navigationselemente so wann immer wir sie ändern sollten, waren OK, aber weil wir diese Kopfzeilenfarbe hier s haben, so dass das es tatsächlich abwirft eso müssen wir ein Update machen zu diesem auch. Also lasst uns seufzen Lasst uns unseren Header aktualisieren und ich werde den Header standardmäßig schweben. Dies ist also der gesamte Header-Bereich. Ich werde es nach links schweben. Ich gebe ihm eine Breite von 100% bewegt sich völlig über, und jetzt können wir sehen, dass es in diesem Navigationsteil gegriffen wird. Also, wenn ich es aktualisiere, können wir sehen, dass wir das haben, sieht also viel besser aus, aber wir haben immer noch ein paar Probleme hier auf der Dimensionierung. Also müssen wir einige dieser Margen und pa dings aktualisieren, um es besser unterzubringen . Versuchen wir also, einen Rand hinzuzufügen. Das ist also die kurzen Ränder, die wir in einer Marge hier am unteren Rand von vielleicht 30 Picks hinzufügen werden. Vielleicht könnten wir sogar 40 und Null machen. Also, das kümmert sich um einige dieser Überlappungen, die wir gesehen haben, vielleicht müssen wir ein bisschen mehr dort tun . Eso vielleicht sogar einige Eintopfen um sie herum hinzufügen. Also vielleicht, wenn Sie wollen klopfen auf dem Vortrag so nur an der Spitze tun 10 Picks klopfen an der Spitze. Und das sollte ein wenig helfen, wenn wir die Wieder Dimensionierung hier gemacht haben, so dass es nicht da drüben hängt und wir immer noch ein Problem hier haben, wenn wir es nach unten schrumpfen. Also vielleicht, wenn wir es verkleinern, wollen wir etwas anderes hinzufügen, das mit der Navigationsleiste passiert. Vielleicht wollen wir es jetzt mit dem Header beginnen, als wir wollen. Vielleicht machen Sie sogar eine Hintergrundfarbe. Eines der Probleme dabei ist, dass nicht sehen, wie dies auf einem anderen Bildschirm aussieht. Pop diese über aktualisieren, und wir können sehen, dass jetzt Wir haben diesen Hintergrund dort, so dass es nur auf den größeren Größen erscheinen, so dass ich denke, dass in der falschen Stelle dort setzen. Schauen wir uns das an und aktualisieren Sie das etwas. Da gibt es das Problem mit Styling. Ich werde hier die Zeilenhöhe verwenden, um anzugeben. Vielleicht könnten wir 60 Picks oder so etwas tun, um die Zeilenhöhe anzugeben. Also steak einen Blick und sehen, wie das aussieht. Jetzt ist alles gut, außer wenn wir es auf die kleinste Größe schrumpfen, haben wir noch diese Überlappung . Es gibt also ein paar Dinge, die wir hier tun können, um diese eso zu aktualisieren und zu ändern, wo wir in diesem Topf hinzufügen. Vielleicht wollen wir also diese Polsterung, die wir hier drüben haben, loswerden und das wirklich abschneiden und es nicht auf dieselbe Weise nutzen. Also, wenn ich das Eintopf losgeworden bin und ich werde das Eintopf hineinbringen, vielleicht in dieses hier, also jetzt, wenn wir es größer bekommen. Das sollte also unsere Polsterung zurückbringen. Also sieh mal, was hier passiert. Stecken Sie es hier in die falsche. Also lasst es uns hier versuchen. Speichern öffnen Sie unsere Website und lassen Sie uns einfach überprüfen, wie es jetzt aussieht. Also, wenn wir es nach unten verkleinern, so dass wir diese Polsterung losgeworden sind, also müssen wir wahrscheinlich ein wenig Abschied hinzufügen. Da ist also jetzt haben wir ein klares Menü. Immer wenn wir noch größer werden. Jetzt haben wir also einen klar definierten Menübereich, also sieht es eher so aus, wie wir ursprünglich geplant hatten, wo wir diese Art von Hintergrund haben . Natürlich können wir diesen schwarzen Hintergrund loswerden, wenn wir auch wollen, und es nur bei der Größenänderung anzeigen. Und ein weiterer Bereich, den wir beheben müssen, ist nur das Standard-Klopfen, weil ich es von hier entfernt hatte . Aber es sieht aus wie wir brauchen noch ein wenig Polsterung dort innerhalb dieser Anker. Also lasst uns so etwas tun, wie wir fünf machen und 10 tun und sehen, wie das aussieht. Also auf den kleineren Bildschirmen, wenn wir es neu Größe. So, jetzt haben wir noch mehr von einem Menü Typ Format hier. Wir verkleinern es. Werfen wir einen Blick, und wir haben immer noch einen kleinen Überhang. Dies ist also, wo wir in einem Rand unten hinzufügen konnten, so dass eine Marge am unteren Rand hinzugefügt, vielleicht 10 Picks, und das sollte kümmern sich um jeden von diesem Überhang, den wir dort früher hatten. Also, jetzt gehen wir zurück zu diesem hier. Aktualisieren Sie es und jetzt sehen wir, dass wir ein nettes, ordentlich präsentiertes Menü haben. Wir haben alles wieder Größe richtig ankündigen mehr von einem Graustufenbereich. Also in der nächsten Lektion werden wir das weiter ausbauen und wir werden es bauen. Wie wir das nutzen können, wenn wir mehrere Seiten haben. Eso haben wir gerade jetzt haben wir unsere Hauptseite. Es gibt nichts das Menü, das anzeigt, dass dies der ausgewählte Bereich ist. Also werde ich dir zeigen, wie man das macht. Fügen Sie eine ausgewählte Klasse für den ausgewählten Artikel und einige andere Tricks hinzu, um unsere Website besser präsentieren zu können. Es kommt also in der nächsten Lektion auf. 11. 14 Hauptsache Verpackung Update im Menü festgelegt: Also diese Lektion. Lassen Sie uns einige zusätzliche Aktualisierungen unserer Website-Inhalte vornehmen. Und eines der Dinge, die wir tun wollen, ist eine Klasse von ausgewählten hinzufügen, so dass wir tatsächlich wissen , wo wir innerhalb der Website sind. Also, wenn wir hier kommen, haben wir drei Hauptseiten Home-Produkte und Kontakt. Aber wir wissen nicht, ob wir zu Hause Produkte sind oder Kontakt. Also kümmern wir uns zuerst darum. Und die Art und Weise, wie wir das tun werden, ist, dass wir hier eine separate Klasse hinzufügen werden, also wird das Klasse sein und wir werden es einfach als ausgewählt bezeichnen. Also, sparen Sie das. Und jetzt haben wir unser Leben, du hier. Und so haben wir eine Klasse ausgewählter, die sie entfernen wird. Das ist da, das da drin hing, äh, ging zurück in unseren Inhaltsbereich. Das hat also mit den Farben unserer Navigation zu tun, damit ich sehen kann, dass ich diesen Hover hier drüben habe . Also, vielleicht möchte ich in eine 2. 1 hinzufügen, die nur ein ausgewähltes und nur durch Komma getrennt ist , so dass wir hier nicht wirklich einen zweiten Satz von Eigenschaften erstellen müssen, weil was auch immer ausgewählt ist, wir wollen nur, dass sie auf diese Art von Weise hervorgehoben. So fügen Sie das ausgewählte hinzu und dann, natürlich, für jede Webseite, müssen wir angeben, welche ist die ausgewählte. Es gibt also einen JavaScript, Ajay Kori Trick, um das zu tun, also werde ich Ihnen zeigen, wie man das in der kommenden Lektion macht . Und natürlich, natürlich, wenn Sie JavaScript nicht verwenden möchten, drängen Sie eine Abfrage, als Sie einfach voran gehen können und jede Seite, so dass wir anstelle von Index Ente HTML erstellen können , können wir es speichern Augen, und dann können wir eine andere Seite haben und wir können diese über Punkt den HTML nennen und diese speichern . Augen denken, wir hatten Produkte so und dann können wir jetzt tatsächlich Link zu ihm. Also hätte ich diesen Kontakt anrufen sollen, aber lass es uns so machen. Also haben wir über wir haben Produkte dot html und wir haben unseren Index Arzt. Lasst uns unsere Hauptseite. Also, wenn wir sie durchblättern, hätte das eigentlich zuerst tun sollen. Aber wenn wir durch sie blättern, das ist, können wir sehen, dass die ausgewählten Abschnitt Produkte ändern sollten. Der Auswählte sollte dieser hier unten sein. Also lassen Sie mich einfach ein schnelles Update dazu machen. Also habe ich meinen Index dort bekommen, also werde ich ein Update der Listenelemente machen und bemerken, dass wir unsere HTML-Seite s teilen . Dies ist also eines der Dinge, die wir hier tun können, ist, dass wir in der Lage sind, wirklich leicht teilen , dass CSS Styling. Und ich sollte diese ganze Seite auch mit Links aktualisieren. Also hatte ich das nicht in einem Boot und dann aktualisiert. Also dieser hier geht es darum, so dass ich gerade für Kontakt ausgewählte Produkte verwendet habe, nur um sicherzustellen, dass wir das richtige haben und wir keine Produkte ausgewählt haben. Also jetzt und lasst uns wieder auf unsere Website gehen und einfach versuchen, dies tatsächlich loswerden dieser Reaktionsfähigkeit. So kontaktieren Produkte, Heimprodukte, und wir sehen, dass der ausgewählte ist der richtige ausgewählt. Und selbst wenn wir zurück zu unserem Code gehen Also werde ich das verstecken, weil ich das im Moment nicht sehen muss , und wir gehen in unser CSS und bemerken, dass wir Rapper hier hatten. Also einmal kleinere schnelle Anpassung, die ich für den Rapper machen muss. Also gingen wir in unser Hauptdesign, wir hatten ursprünglich unseren Rapper. Es saß bei einem fixierten mit Also muss ich nur hinzufügen, dass in als auch. Also Rapper und das ist, wo wir ein Maximum mit tun und der Unterschied zwischen Mocks wit und fixiert mit ist, dass klopft mit dieser Verwendung für reaktionsschnell. Also alles unter diesem Max mit vielleicht 11 80 wird automatisch auf 100% eingestellt . Also werden wir hier bemerken, dass, wenn wir diesen Max mit setzen Aber jetzt haben wir ein weiteres Problem bei dem unsere Haupt-Rapper-Bereiche auf die linke Seite gezogen haben. Also müssen wir einige Anpassungen vornehmen, um etwas und CSS zu zentrieren Also entfernen wir den Rand und wir setzen ihn auf auto für links und rechts und dann Vergießen. Das entfernt also im Grunde oben und unten, aber die linke und rechte gehen zu Fuß automatisch, und wir gehen zum Padding und wir werden einige Polsterung hinzufügen, also könnten Sie vielleicht einen prozentualen Klopfen von 4% machen und einfach schnell zurückgehen auf unserer Website und sehen, wie das aussehen wird. Jetzt haben wir Mawr wieder im Einklang mit dem, was wir ursprünglich entworfen hatten. Wo wir unsere Hauptnavigation haben, ist 100%. Und dann, als wir Größe wieder und wir diesen Bruchpunkt getroffen haben, haben wir bemerkt, dass dieser Inhalt hier ein Maximum mit hat, also wird es immer kleiner sein. Und immer, wenn wir weiter unten gehen, wird es schrumpfen, weil wir diese Polsterung hinzugefügt haben. Also vielleicht an einem bestimmten Punkt wollen wir diese Polsterung vollständig vom Rapper fallen lassen und vielleicht auf Null setzen und Zentrieren wird nicht wirklich wichtig, wenn wir diese kleineren Größen getroffen haben, weil es für die kleineren Größen relevant sein wird Also, das ist wieder etwas, in dem wir arbeiten könnten? Eso wissen wir nicht sicher brauchen, um diesen Abschied hier oben auf hinzuzufügen. Vielleicht möchten wir diesen Abschied und das alles später in den unteren Bereichen hinzufügen. Also werde ich einfach alles kopieren und ich habe Eintopfen hier kann an dieser Stelle hinzugefügt werden , mal sehen, was für einen Unterschied das macht. So sehen Sie, dass wir jetzt 100% auf den kleineren Bildschirmen haben und dann, wenn wir größer werden, wenn wir diese Breakpoints haben, dann fangen wir an, die Polsterung hinzuzufügen, die wir wirklich brauchten, und wir können weiterhin die Art und Weise erweitern, dass unser Inhalt präsentiert. 12. 15 Verwenden von jQuery zum Verlangen der URL: in dieser Lektion. Ich möchte ein wenig G-Abfrage hinzufügen und diese G-Abfrage wird in der Lage sein, zu bestimmen, auf welcher Seite war, indem Sie die U. R. I verwenden R. und dann letztendlich das richtige Element mit dem tatsächlichen ausgewählten Teil. Also tun wir es nicht, also macht es ein bisschen dynamischer. Und natürlich, wenn Sie nur drei Webseiten haben und Sie in Ordnung mit Ausflug und manuell ausgewählt sind, dann können Sie voran gehen und das tun. Dies wird nur eine Geek-Sorge Funktionalität sein, um das Gleiche zu tun. Und es wird nur eine wirklich schnelle Einführung in das Hinzufügen in J-Abfrage sein. Also, was ich tun möchte, ist meine volle Ansicht dort zu öffnen und ich muss hinzufügen. Das ist G-Abfrage und das JavaScript auf jeder dieser Seiten. Wir leider sie leider bereits gespeichert und kopiert, bevor es tat. Das ist oh, das wird versuchen, es relativ schnell zu tun. Eso mit Geek Sorge. Also, was Jake Sorge ist, wenn Sie nicht vertraut sind, J. Coury ist es eine JavaScript-Bibliothek und macht im Wesentlichen nur die Interaktion mit den HTML-Elementen auf Ihrer Webseite ein wenig einfacher. Und es ist ein komprimiertes Format, das so einfach und einfach zu bedienen ist. Eso, wir haben hier drüben. Ich bin nicht Entwickler dot google dot com, und das ist ein großartiger Ort, um einige Bibliotheken eso zu bekommen, CD-Enden, gemeinsame Bibliotheken und wo ich in dieser G. Cray-Bibliothek bringen könnte , die bei Ajax Google ap eyes dot com Und das ist der Pfad, wo sich die J. Coury Library befindet. Also, wenn Sie tatsächlich diese Seite genommen haben und wenn Sie sie in Ihrem Browser eingegeben haben, könnten Sie sehen, dass Sie diesen Geek oder eine Bibliothek haben. Alles, was Sie tun, ist, zu dieser J. Corey Bibliothek zu verlinken und sie in Ihre Webseite zu bringen. Und auch, wenn Sie das nutzen wollen, müssen Sie sicherstellen, dass Sie den Link platzieren, bevor Sie tatsächlich versuchen, auf Jake Sorge zuzugreifen und bewerten. Also, wenn Sie es danach tun und einige Fehler bekommen, weil die J Coury-Bibliothek noch nicht geladen wird, eso das ist die Quelle davon, und wir werden dasselbe tun, wo wir zu einem freigegebenen Javascript verlinken -Datei. Die Idee ähnelt also dem, was wir mit CSS machen, wo wir die eine Datei haben, die das gesamte CSS für die Webseite oder Website enthält . Also werden wir nur Teoh Script Dot Js verknüpfen und ich kann tatsächlich rüber gehen und die ausgewählten Teile entfernen . Das wird also ein schnelles Update sein, um eine brandneue Seite zu erstellen. Das wird also dort sein, wo R. J Cory hingehen wird. Um also auf Geico oder E J zuzugreifen, wartet Coury, bis der eigentliche Dom geladen wird. Das sind alle Elemente auf der Webseite und es hat einige Funktionen hier, wo wir Konsolen, Loggen, Toe Out verwenden Loggen ,Inhalte setzen, Inhalte setzen, und Sie werden in der Lage sein, das mit Jake zu sehen. Wir waren tatsächlich in der Lage, diesen Fensterpfad aufzunehmen, so dass wir ein Objekt namens Fenster haben können. Und ich versuche, das ziemlich schnell zu erklären. Also, natürlich werde ich nicht in der Lage sein, J Abfrage dies schnell innerhalb dieser Lektion zu erklären , aber s Also das ist der Skript-Punkt-HTML für Skript Js und das ist die Datei, mit der wir verknüpfen . Eso bemerken Sie hier, dass dies die eigentliche Datei ist, die wir Teoh verknüpfen. Also werde ich zu den Produkten gehen. Ich glaube, es hat es geschafft. Geh mal, wo ich das gemacht habe, und ich werde einfach Schritt gehen, auf jede Seite gehen und dasselbe kopieren. Aber das ist nur eine einmalige Sache, denn sobald ich diesen G-Steinbruch in Betrieb habe, wird alles automatisch funktionieren. Und dann die letzte, diese über Abschnitt Behinderung Seite. Und ich möchte die gleiche G-Abfrage dort hinzufügen und sehen. Werfen wir einen Blick auf unsere Webseite und sehen einfach, was jetzt los ist. Also, wenn ich auf So klicke, wurde ich die eigentliche Auswahl der Seite los, die tatsächlich auf so weiter war , und wir werden dies dynamisch innerhalb einer Abfrage aus einem der Gründe tun, warum ich die Konsole benutze. Dieser Chrome-Browser ist, weil die einfache Kommunikation hin und her von JavaScript wir haben, was die Konsole genannt wird. Und wenn ich diesen JavaScript-Befehl hier eingebe, war die Arbeit Konsul Log. Es nimmt das Objekt des Fensters, die Position und die h ref, und es setzt das einfach in das Konsul Log. Und das war nur, um Ihnen zu zeigen, dass wir das tatsächlich nutzen können, um zu bekommen, auf welcher Seite stand. So bemerkt, dass es auf der Indexseite nur das nimmt. Du bist ich hier und gehst zur nächsten dasselbe. Also haben wir es in einen Wert gesetzt, und dann diesen Wert. Jetzt können wir in unserem JavaScript nutzbar machen. Lassen Sie uns also einen Blick darauf werfen und sehen, wie wir tatsächlich die Webseite extrahieren können. Also wollen wir Anzeigen machen. Wenden Sie einige einfache Logik an, wo wir eine aktive Klasse oder die ausgewählte Klasse auf die Webseite hinzufügen möchten . Wenn die U. R I mit der übereinstimmt, die sich innerhalb des aktuellen befindet. Also wollen wir überprüfen, ob es sich um die aktuelle handelt, und wenn es so ist, dann sollten diese Produkte tatsächlich diejenige sein, die hervorgehoben wird. Also lass uns das nochmal aufmachen und ich werde dir zeigen, wie das geht. Also haben wir eso jetzt, wo wir in der Lage sind, diesen Wert zu bekommen. Wir könnten das leicht in eine Variable platzieren und das nutzen, aber wir sind immer noch nicht fertig, weil wir keinen lokalen Host-Schrägstrich haben. Es wird nicht wirklich mit unserem Pfad übereinstimmen, es sei denn, wir verwenden diesen Domain-Namen und so weiter . So im Mai oder kann nicht funktionieren, je nachdem, wie Ihre Strukturierung Ihrer Website. Aber es wird sicherlich nicht funktionieren jetzt innerhalb dieses lokalen Hosts, weil dieser Wert immer noch nicht der richtige Wert sein wird, der in meinem HTML übereinstimmen wird. Also muss ich hier ein weiteres Update hinzufügen, und was ich tun möchte, ist, den Index zurückzugeben und was das tun wird. Dies wird mit der Position dieser Schrägstriche zurückkehren. Also schauen wir uns das jetzt an und sehen, was zurückgegeben wird, damit ich sehen kann, dass es zurückgebracht wird. 16 haben einen numerischen Wert, und im Wesentlichen, was hier passiert ist, ist, dass es mir sagt, dass dieser Schrägstrich sich in der Zeichenfolge von 16 der 16. Position befindet , und dass, was auch immer danach ist, Wenn ich das ausziehen könnte, dann ziehe ich ein, damit ich das mit einer anderen Funktion überprüfen könnte, in Jake sorgt, dass es ähnlich sein wird und wir tun Sub-String und was Sub-String tut, ist es uns erlaubt, über diese Position zu wählen, wo dieser Schrägstrich ist befindet und nehmen Sie den Rest des verbleibenden Inhalts. Also sehe ich nur, ob ich alle meine Klammern richtig habe. Also brauche ich noch einen Brockett hier. Also, was wir jetzt tun, ist, eine Sub-Zeichenfolge zu nehmen und hinzuzufügen Es nimmt die Sub-Zeichenfolge und wir werden diese Position einnehmen. Werfen wir einen Blick darauf, was jetzt zurückgegeben wird. Also haben wir Produkte, die wir haben, und wir haben Index, so dass wir besser werden. Aber eine andere Sache, die wir hinzufügen müssen, weil es die Position des Schrägstrichs nimmt und wir die Ausgangsposition von plus eins einnehmen wollen, die kurz nach dem Schrägstrich liegt. Also, jetzt oben gibt es ein Problem dort, also schauen wir uns schnell an, dass der Schrägstrich es an die falsche Stelle gebracht hat, und das ist eine der Dinge hier, dass die Arbeit mit all diesen schließenden Klammern manchmal ein bisschen hart ist , wenn Sie suchen schnell, aber jetzt sind wir in der Lage, den Wert von aus der Seite zurückzugeben, also erhalten Sie einfach diesen einen Seitenwert, und jetzt müssen wir nur die aktiven Klassen und G-Abfragen aktualisieren und hinzufügen. Habe eine wirklich schöne Funktion, und es ist saubere Funktion dafür auch. In der nächsten Lektion werde ich das schnell durchlaufen. Wie ich weiß, bin ich sehr schnell durch Jake Worry gegangen, aber es ist nicht wichtig, um Ihre Website einzurichten. Aber es ist nur schön, es zu wissen. Und es ist nur schön zu wissen, wie man Jake Sorge benutzt, falls Sie eine größere Website und Sie ein wenig dynamischere Fähigkeiten in Ihrem HTML-Gericht haben möchten. In der nächsten Lektion werde ich diesen J-Abfrage-Teil des Kurses beenden und aktualisieren, wie wir diese ausgewählte Klasse dynamisch mit J-Abfrage hinzufügen können . Es kommt also 13. 16 jQuery Dynamische Kurse: in der vorherigen Lektion. Wir haben uns Jake Weary angesehen und wie wir hinzufügen können. J. Coury hatte einige dynamische Funktionalität in einer Website, so sah, dass G Abfrage Ihre Fensterinformationen auswählen kann und wir konnten sehen, dass wir den Standort h Floß bekommen konnten und dass wir die Position finden konnten, wo der Schrägstrich war und trimmen den Rest dieser Domain-Inhalte und verwenden Onley, die Rückgabe dieser Seite Informationen . Lassen Sie uns das einen Schritt weiter machen. Und mit G-Abfrage haben Sie Zugriff auf alles, was auf der Seite verfügbar ist. Also, wenn wir einen Siris von I I DS haben oder wir eine SYRIZA Klassen haben, können wir wirklich leicht auf diese zugreifen und Interaktionen mit J Query machen. Also dieser hier wird sich befinden, so dass es viel funktioniert wie CSS, und das ist einer der wirklichen Vorteile von Jake Worry, weil sie es CSS sehr ähnlich gemacht haben . Also, jetzt, da wir wissen, dass wir Header nav u l l I haben, können wir eine Auswahl von diesem bestimmten Element machen. Also Header und vielleicht müssen wir nicht so spezifisch sein eso vielleicht lass uns einfach ul ally A machen und wir werden einen Selektor so ähnlich wie das verwenden, was wir tun, wenn wir CSS verwenden. Wir machen einen Treff und wir werden finden, wo h ref gleich ist. Und so werden wir diesen Wert verwenden, den wir hier rausziehen. Also vielleicht können wir es in eine Variable für ein bisschen besser setzen. Ablesbarkeit. Also nenne ich es so etwas wie Seitenpfad und das ist nur ein Geschäft, dessen Wert das gleiche sein wird , wie ich es dort hineingesteckt habe. Und jetzt fügen wir das hier drüben hinzu. Also werden wir das in als Seitenpfad hinzufügen. Also, wenn es gleich ist und dies ist, wo wir den Seitenpfad in Also hinzufügen, wenn dieser Wert gleich dem Seitenpfadwert ist , als was wir tun möchten, ist einfach eine Klasse hinzuzufügen und sie haben auch dafür Funktionen eingebaut . Also werden wir Klasse hinzufügen und dann müssen wir nur diesen Klassennamen auswählen. Also ich glaube, es wurde ausgewählt, und Sie bemerken hier, dass es nicht ist Es fügt ein zweites Zitat hinzu, und das liegt daran, dass ich es hier nicht richtig zitiert habe, also habe ich es nicht richtig geschlossen, weil ich diese Überschrift hier geöffnet habe und ich muss ein anderes hinzufügen. Hier s so lassen Sie uns diese Zitate hier aktualisieren. Also fügten wir den Pfad hinzu und wir öffneten und schlossen ihn. Wir brauchen eine Klammer und wir brauchen noch ein Zitat. Ich glaube also, dass dies jetzt abschließen sollte. Und das ist eines der Dinge, die ich an Klammern mag, ist, dass wir sehen können, wo wir öffnen und schließen, also manchmal wird das ein bisschen verwirrend. Es gibt viele Öffnungs- und Schließungen, also lassen Sie uns das ausprobieren und sehen, ob das tatsächlich funktioniert und oder sehen, ob es die Fehler einwirft , damit wir sehen können, dass jetzt, wenn wir auf die Seite gehen, dass es tatsächlich in der Klasse hinzufügt . Und das ist die Schönheit der Geek-Sorge. Wenn wir uns unseren HTML-Code ansehen und den einen öffnen, der auf dieser richtigen Seite war, dass er das ausgewählt hat und das wird das Gleiche sein, wenn wir das hören , es aktualisiert tatsächlich, dass HTML-Code-Anzeigen in ausgewählten Klasse, und wir können die Ergebnisse hier sehen, wenn wir durch unsere Website navigieren. Das ist also eine schnelle Gewicht-Zehe. Fügen Sie eine dynamische Aktualisierung ausgewählte Klasse innerhalb Ihrer Webseite hinzu, und dies funktioniert, wenn Sie mehrere Menüelemente hier haben. Und wenn Sie nicht die Mühe machen wollen, jedes einzelne, das Sie hinzufügen möchten, und dynamisch zu aktualisieren , ist dies eine gute Möglichkeit, dies zu tun. Und ich weiß, dass ich Jake Worry ziemlich schnell durchgemacht habe. Aber Jake Worry ist wirklich nutzbar, und es gibt ziemlich viel mit G Abfrage eso. Wenn Sie mehr über J. Query erfahren möchten , gibt es ajay kori dot com, wo Sie definitiv viele weitere Informationen darüber finden können, wie Sie Jake müde nutzen und wirklich der Vorteil von J Query ist, dass es nur wirklich einfach zu bedienen. Es ergibt nur Sinn. Und wie Sie sehen können, was wir hier durchgemacht haben, ist es ernst, ähnlich wie CSS, wo wir unseren Selektor machen und wir in diesen Klassen hinzufügen können und so weiter. Alles, was wir hier getan haben, ist, dass wir hier im Wesentlichen eine Bedingung gegeben haben und wir könnten dies auch innerhalb unseres CSS tun , wo wir bestimmte Teile des HTML auswählen und dann etwas Styling hinzufügen könnten. Aber in diesem Fall verwenden wir tatsächlich Jake Worry Toe Add in dieser Klasse. 14. 18 Hinzufügen von Webfonts Google Fonts zur Website: diese Lektion. Ich möchte noch ein paar nettere Gedanken hinzufügen. Also haben wir unsere Standard-Webfonts, die wir verwenden. Und es gibt eine andere Möglichkeit, tatsächlich einige dynamischere Schriftarten hinzuzufügen und die Forints wirklich einfach hinzuzufügen. So Google hat tatsächlich Google Gedanken, so Fonts dot google dot com und dies gibt Ihnen die Möglichkeit, aus über 804 verschiedenen Schriftfamilien zu wählen . Und Sie können diese wirklich einfach in Ihre Web-Projekte einbringen. Und ich werde dir zeigen, wie du das in dieser Lektion machst. Es geht also nur darum, hier rüber zu gehen und tatsächlich die Front auszuwählen, die Sie wollen. Und sie haben die Fähigkeit, Jahr zu tun, Sortierung wirklich schön entwickelte Schnittstelle hier für diese Sortierung, wir können sehen, welche sind im Trend, welche beliebt sind und so weiter. Wir können sehen, dass die verschiedenen Stile schwächen. Bringen Sie diese herunter, damit wir eine ganze Menge von Informationen sehen können, die wirklich einfach zu durchgehen und die Schriftarten ausgewählt, die Sie verwenden möchten. Also werde ich mir hier etwas zufällig aussuchen. Vielleicht möchte ich das hier als die Front auswählen , , die ich benutzen möchte. Also, jetzt habe ich die bekämpfte Familie ausgewählt und sie haben das erst kürzlich geändert. Jetzt hat es ein Pop-up hier oben und ich kann diese Schrift in Esso bringen. Es gibt zwei Möglichkeiten, Schriftarten in Ihre Webprojekte einzubinden. Verknüpfte Punkte eso wir können auf den Gedanken verlinken, Sie sind l in meinem HTML genau wie wir es mit dem Stylesheet getan haben oder was ich tun könnte, ist direkt in das Stylesheet importiert. Also werde ich diese Option wählen, weil ich denke, dass man ein bisschen besser für mich arbeiten wird . Also muss ich nicht in jede einzelne dieser HTML-Seiten gehen und dieses Styling hinzufügen. Und so werde ich das einfach oben hier setzen, in mein CSS hinzugefügt. Und jetzt habe ich die Möglichkeit, diese Schriftfamilie zu verwenden, damit ich sie überall verwenden kann, wo ich will. Ich muss es in den Körper legen, und jetzt können wir auf unsere Webseite gehen und den Anzug überprüfen. Jetzt, da wir diese Änderung vorgenommen haben, haben wir diese Ergänzung gemacht. Wir sehen, dass die Schriftart automatisch in Updates für die gesamte Website geändert, so brauchen wirklich einen einfachen Weg toe. Fügen Sie zusätzliche Schriftarten und einige nette Details zu Ihrer Website und Ihrem Webprojekt hinzu 15. 19 Seitengestaltung: diese Lektion. Ich möchte etwas zusätzliches Styling in die Website einfügen. Also waren nur einige oder Standard-Zeug, wie Sie hier sehen können, wie Sie hier sehen können,relativ abgeschlossen. Mit unserem Projekt. Alles ist re Dimensionierung s sieht alles ziemlich gut aus. Wir müssen möglicherweise etwas Padding um das Untermenü hier hinzufügen, weil es nicht ganz richtig aussieht . Eso Ich werde einfach hier rüber gehen und ich möchte in der Polsterung auf irgendetwas über die 4 80 s ohinzufügen 80 s o . Also lassen Sie uns einfach etwas Polsterung hier hinzufügen, vielleicht fünf Picks, also macht es ein wenig vorzeigbarer. Eso der Inhalt ist nicht direkt bis zu diesem Seitenmenü und Rand. Wir haben unsere verschiedenen Seiten und alles funktioniert einwandfrei. Also hatten wir in diesem G-Abfragenavigationsabschnitt hinzugefügt, der automatisch diejenige auswählt auf der wir sind. Also lassen Sie uns einfach durch unsere h r CSS Mantel gehen, nur um sicherzustellen, dass wir tatsächlich auf all die verschiedenen Punkte getroffen haben , die wir an eso betrachteten Normalerweise, wenn Sie mit Ihrem CSS begonnen haben, möchten Sie die wichtigsten Teile des Inhalts so erhalten innerhalb, Vielleicht möchte ich in einigen Bildern in meiner Webseite und eines der Dinge mit Bildern hinzufügen, die sie reaktionsschnell machen. Sie möchten sicherstellen, dass sie nicht über die Größe gehen, möchten Sie sicherstellen, dass sie auf der Seite passen und so weiter. Und manchmal ist das schwierig mit Ihrem mit Ihren Inhalten, wenn Sie wieder Größe. Also, zum Beispiel, lassen Sie mich zurück zu hier gehen und ich werde eine Website namens Loren Pixel benutzen, um ein paar Dummy-Bilder zu bekommen . Eso haben sie die Möglichkeit, ein Bild hier auszuwählen. Ich kann es eine Reihe von verschiedenen Arten von Bildern hier auswählen. Es könnte wirklich spezifischer sein. Im Wesentlichen ist dies das mit, und dann ist das die Höhe des Bildes. Also, wenn ich das einfach nehmen werde und sehen, welches zufällige Bild sie uns erlauben werden, in unsere Index-Seite zu werfen . Also Gorman und hier vielleicht, wenn ich ein Bild hier reinbringen will, also 400 von 200, lass uns mal einen Blick auf unsere Webseite werfen. Sie sehen also, dass wir dieses Bild hier platzieren. Aber eines der Probleme hier ist, dass es versucht, zu viel Immobilien aufzunehmen, und es wird unter diesem Untermenü versteckt. Das ist also definitiv ein Problem und etwas, das wir in unserem Responsive-Design wirklich ansprechen sollten , weil wir auf Responsive schauen und unsere Inhalte in Responses Mode liefern wollen . Also lassen Sie uns unsere mit zu 100% aktualisieren und wir könnten sehen, was hier passiert, ist, dass dies uns ein Maximum mit gibt , aber wir fragen tatsächlich nach Max mit verfügbarem Speicherplatz. Also, wenn wir mehr als 100 Bilder haben, dann sehen wir, dass es groß ist und es sich innerhalb des restlichen Codes stapelt. Aber wir sehen, wann immer wir diese verfügbaren Immobilien nicht haben, wird es nicht unter oder außerhalb des verfügbaren Platzes stehen, und so wird es nur 100% in Anspruch nehmen. Dies ist also eines der wirklich wichtigen Dinge, die wir auf unserer Website hinzufügen sollten. Ist das so der Umgang mit Bildern? Außerdem werden Sie viele Male auch sehen, wie jede Luft gehandhabt hat, wie h zwei zehr eso gehandhabt hat. Manchmal möchten Sie vielleicht die Schrifthöhe von diesem und Salon festlegen. So sehen Sie etwas wie Schriftgröße und dann wollen wir es reaktionsschnell machen. So 1.5 und so ist es wirklich wollen heiß war wie in jedem. Ist das hier oben? Eso Sie können oder nicht wollen, dies zu tun. Vielleicht möchten Sie bei den beiden H bleiben. Also glaube ich, ich hatte diese als h twos. Also hören Sie zu, diese werden mehr betroffen werden. Also lasst uns bei den h twos bleiben. Vielleicht wollen wir diese Margen aktualisieren. Wir wollen das ändern, was wir wollen. Vielleicht das so. Ich habe die Schriftgröße gemacht. Wir sollten immer diese Linienhöhe auch tun, so dass die verschiedenen Größen berücksichtigt werden. Also lassen Sie uns etwas unter dem versuchen, so vielleicht können wir eine 21.00 Uhr machen. Das gibt uns also ein wenig kleinere Zeilenhöhe, die wir normalerweise hätten. Wir können auch eine Schriftart tun, wartet, schwächen, einen Rand auf dieser Schriftart machen. Wir könnten auch die gekämpfte Familie ändern, damit wir das auch tun können. Wenn wir etwas anderes machen wollten, das auffällt. Also gehen wir zurück zu einem Browser hier. Und lassen Sie uns eine andere Google-Front wählen, die wir verwenden wollen, dass eine Streifen, die unten und lassen Sie uns etwas versuchen. Also vielleicht das hier. Also werde ich den, den wir bereits ausgewählt hatten, isolieren und diesen hier öffnen , damit ich ihn hier wirklich einfach nutzen kann. Also, jetzt habe ich diese ausgewählt und ich kann diese beim Import mitbringen, um etwas Ähnliches zu tun , was wir nicht verloren haben und dann gegen die Familie gekämpft haben. Und es geht jeweils um ein oberes Fenster. Sieh dir das an. Also, jetzt haben wir für unsere Überschriften Wir haben eine andere Schriftart auf. Wir können auch eine Reihe von verschiedenen Dingen hier als auch innerhalb unserer Haupt gekämpft Styling benötigt . Eso Manchmal sehen Sie vielleicht auch, dass wir ein individuelles Styling für eine bestimmte Seite haben . Eso Wir haben drei verschiedene Seiten hier, aber wir verwenden relativ dasselbe Styling. Aber vielleicht haben wir im Abschnitt über einige spezielle Informationen, die wir auf eine andere Art und Weise anzeigen möchten . Also lasst uns das einfach aufmachen. Also, jetzt gehen wir rüber zum Kontaktbereich und dann wollen wir das vielleicht auf eine Weise präsentieren , die wir haben. Vielleicht haben wir, wenn wir hier ein Formular haben und wir wollen unsere Formularinhalte präsentieren. Also vielleicht hatten wir einige Typen hier auf Salons, ein paar verschiedene Arten von Eingängen und so weiter. Vielleicht möchten wir dies in einem anderen Format präsentieren, wie wir alle anderen Eingaben innerhalb unserer Webseite. Also möchte ich wirklich spezifisch sein mit dem s Also gibt es eine Reihe von verschiedenen Möglichkeiten, wie wir das tun können . Wir könnten einen Rapper machen, und wir könnten eine Klasse hinzufügen. Vielleicht wäre dies die Überseite oder so etwas, und dann ermöglicht es uns, sie innerhalb des CSS zu identifizieren. Also müssen wir kein bestimmtes CSS für diese Seite tun, und wir können es einfach wiederverwenden, wenn wir wollen. Und wir können nur hoffen, dass wir nur diese eine CSS-Seite öffnen müssen, um dieses Styling zu bieten . Also lasst uns so etwas tun, wie wenn wir einen Eingang haben und das wird einfach ein paar grundlegende Sachen sein . Also mit 100, weil natürlich jeder seinen Inhalt so gestalten muss, wie er ihn stylen möchte. Also, jetzt haben wir voll mit über und wann wir einfach von hier aus aufbauen können, wie wir müssen . So können wir auch spezifisch sein, wenn wir es nur für bestimmte Typen tun wollen. Gehen wir zurück zu diesem CSS. Ich denke. Leider habe ich die da unten, die zu etwas Verwirrung führt. Aber wir können spezifisch sein, wenn wir mit unserem CSS wollen. Also endlich wollte Typ gleich Text und speichern Sie das. Also jetzt, wenn ich dorthin gehe, so dass unser Submit-Button auf die normale Größe zurückgeht, können wir etwas tun, wie wir ihm eine Grenze hier hinzufügen können. Also, wenn ich einen Pick Solid machen möchte und vielleicht standardmäßig, wenn ich mit einem blauen Rand begonnen habe und vielleicht Randradius machen möchte, so machen Sie es leicht abgerundet. Fünf Plektren, Radius. Sieh mal, wie das jetzt aussieht, sieht es nicht wirklich so schön aus, aber hass. Wir probieren hier nur verschiedene Styling-Optionen aus. Also vielleicht ist dies, wie Sie Ihr Kontaktformular präsentieren wollen und so weiter So viele verschiedene Optionen hier. Wir könnten auch die Hintergründe aktualisieren und so weiter, so Hintergrund. Vielleicht möchte ich, dass es dunkelgrau ist. Und dann werden wir vielleicht auch nicht die Farbe der Schrift aktualisieren. Also vielleicht wollen, dass gebildet weiß und so weiter viele verschiedene Optionen. Und so können wir mehr Seite spezifisch auf die bestimmte Styling pro Seite. Wir können es also nicht innerhalb eines Stylesheets halten, und wir können es über die gesamte Website hinweg haben, aber seien Sie spezifischer für die einzelnen Inhalte, die wir aktualisieren und mit denen arbeiten möchten . 16. 20 Bilder Produkte verkleinern: diese Lektion. Ich möchte eine schnelle Aktualisierung auf der Produktseite durchführen. Das erste, was wir tun sollten, ist unser HTML zu aktualisieren. Also werde ich das hier oben bringen, weil wir das hier auf Mel aktualisieren werden , die Produktseite, um anders aussehen zu lassen als unser Hauptbereich. Dies wäre also Produkte, so dass es eine Liste von verschiedenen Produkten haben kann, die wir in der Lage sein, in der Vitrine anzuzeigen . Also hier werde ich ein Diff als Hauptcontainer erstellen. Und wir wollten eine Nord Erred Liste benutzen und unsere Produkte auflisten. Das wird also schön und ordentlich präsentierte Produkte sein und hier haben wir vielleicht einige Produktbilder, die wir hervorheben möchten. Also gehen wir zurück zu Lauren Pixel und selektive einige Produkte. Also haben wir unsere tierischen Produkte, Lebensmittel und Salon. Also lasst uns ausprobieren und sehen, welche verschiedenen wir hier haben können. Eso, wenn wir hier Essen hatten, also hatten wir vielleicht ein Restaurant oder etwas ist auf einer Kopie Bild-Adresse, so dass ich Siris von verschiedenen Bildern haben kann . Also bin ich G-Quelle und fügte diese Quelle für dieses Bild hinzu. Und ich werde das tun. Vielleicht hat man sechs verschiedene, also werde ich keine gerade Nummer haben. Also auf unebenen Anzahl von Bildern hier und eigentlich ist das nicht so toll geworden, weil ich vergessen habe, das abzuschließen. Also lasst uns das alles rennen und das noch einmal versuchen. Also, jetzt habe ich eine ernsthafte von Bildern. Also vielleicht möchte ich es anpassen und eine Graustufenauswahl machen oder so etwas. Also haben wir eine Abwechslung oder ein anderes Bild. Mal sehen, was hier lastet. Vielleicht sollte ich das tun. Es ist Farbe. Also geben sie dir hier tatsächlich zufällige Bilder, also habe ich eigentlich keine Ahnung. Aber wenn wir auf ein bestimmtes Bild verlinken, wird es uns mehr von, ah, Ofenbild geben ah, . Das ist ein normales Bild. Also lassen Sie das im Wesentlichen der Grund, warum ich es so mache, ist, dass ich nicht tatsächlich die gleichen Bilder habe, also denke ich, es ist vielleicht nur durch Zahlen zu ändern, wird das versuchen und sehen, was wir hier erreichen können . Lassen Sie uns zu unserem Beispiel gehen und sehen, ob wir Produkte zu tun, so dass wir zuerst haben möchte ich sehen, ob wir Bilder haben, die als ein wenig langsame Ladezeit geladen werden. Eso ist das vielleicht nicht der beste Weg, es zu tun, weil wir Siris von Bildern haben. Es sieht nicht so aus, als würden sie alle auftauchen. So nach und nach kommen sie rein. Eso was? Das Problem hier ist, dass wir eine Nord-Liston haben, die es als unbewachte Liste anzeigt , und natürlich könnten wir uns darum kümmern, innerhalb des Stylings. Also, jetzt, da ich mir vorstellen, dass Produkte Bereich und vielleicht wollen wir dies als gleich zu identifizieren Also das ist die wichtigste der A Norden Liste. Und so muss ich entfernen, dass eine Nordenliste standardmäßig vorgibt. Also, das sind meine Gegenstände oder so etwas. Das ist also, was auf den Artikeln verfügbar ist. Vielleicht hätte ich es meine Speisekarte nennen können. Eso jetzt gehen wir zurück in unser CSS und machen ein Update, um es mehr vorzeigbar aussehen zu lassen. Wie es wäre es, als wäre es in jeder Art von Galerie. Wir hätten einen Siris von Gegenständen, also lasst uns meine Sachen machen. Und das erste, was ich tun wollte, ist, diese Standardwerte darin loszuwerden, eine neue geordnete Liste. Etwas Marge. Harding setzen Sie diese alle auf Nulllistenstil und setzen Sie sie auf keine. Und das wird es viel besser präsentieren. Und jetzt müssen wir aktualisieren war Listenelement. Also werden wir das tun. Meine Gegenstände listen also Elemente so Verbündete auf und werden sogar nicht tun. Es ist nach links geschwommen. Geben Sie ihm einen Standardwert mit „off“. Da ein Standard mit von wird 30% tun Und ich habe keine Marge. Wir werden ein paar schöne Margen haben. Also 5%. Also vielleicht alle aktualisieren diese 40, so dass wir insgesamt 50. Und lassen Sie uns einen Blick auf diese jetzt und sehen, wie, wenn es Aktien ein wenig besser hier innerhalb von Produkten, Also es sieht so aus, als ob diese Bilder Luft ein wenig Zeit brauchen, um zu laden. Also vielleicht gibt es eine andere Ressource, die ich an Ort und Stelle verwenden kann, ist eine andere namens Ort. Platzieren Sie es für Platzhalter von Bildern, die als Platzhalter bezeichnet werden. Das wird mir also einige Platzhalterbilder geben. Und die Sache hier ist auch, dass ich nicht wollte, dass sie alle gleich groß sind. bin mir nicht sicher, warum es so viel Zeit braucht, Toe Lord, aber lasst uns Thies einfach aktualisieren, um uns etwas Zeit zu sparen. Natürlich hätte es besser ausgesehen, wenn wir diese eigentlichen Menübilder gehabt hätten. Aber ich denke, wenn wir bestimmte Bilder aussuchen, fällt es vielleicht schwer, einige von ihnen zu finden. Eso wird das nur 1 500 machen? Denn nicht alle manchmal, die Sie wissen, wollen Sie Ihre Bilder die gleichen Dimensionen haben. Aber wissen Sie, es wird nicht immer der Fall sein, also müssen Sie in der Lage sein, das zu berücksichtigen, wenn Sie mit Ihrem CSS arbeiten. Schauen wir uns das jetzt an. Also, jetzt haben wir einen Siris von verschiedenen Bildern, und es ist alles schön und ordentlich angelegt, und eine Sache, die wir tun wollen, ist, wann immer wir es verkleinern, vielleicht wollen wir, dass voll verfügbar mit, die für uns verfügbar ist eso Standardmäßig. Wir wollen es auf diese Weise anlegen, aber wenn wir die Größe der Seite ändern, wollen wir vielleicht andere Abstände oder so etwas in Anspruch nehmen. Also lassen Sie uns das CSS dafür aktualisieren und dann müssen wir es natürlich auch für das letzte für das letzte Element klar machen. So könnten wir das auch innerhalb des CSS tun. Also gehen wir rüber zu hier. Und so hatte ich meine Gegenstände und Listengegenstände, damit wir diesen Float loswerden können. Also vielleicht wollen wir dieses Ende nur hinzufügen, wann immer, wo die Größe über die 4 80 geändert wurde und dann bedeutet das, dass hier drüben dies aktualisieren müssen, um zu sein und 100% so sehen, ob das besser aussieht. Jetzt haben wir also die Bilder, die die volle verfügbare 100% aufnehmen. Und im Allgemeinen ist das ein bisschen besser. Vielleicht müssen wir sogar das Standardbild mit auf 100% einstellen, egal was passiert. Schon wieder Eso. Je nachdem, wie du stylen willst, ist es oh, so. Sie sind, sie sind Dimensionen werden nicht vermasselt werden. Wir sehen, dass die einzigen, die tatsächlich in der Größe verändert wurden, diejenigen, die über den 4 80 Punkt eso wieder sind , je nachdem, wie Sie es präsentieren möchten. Eso Dies ist eines der Dinge, die, wenn Sie Ihre Bildgrößen auswählen, stellen Sie sicher, dass es den Bildschirm verschiedene Bildschirmgrößen aufnehmen kann. Also, wenn Sie Bilder haben, die wirklich kleine Bilder wie diese drei fünfziger Jahre sind, müssen Sie einen Blick darauf nehmen und fragen sich, wie Sie dieses Bild präsentieren möchten, wenn Sie es zu einer größeren Größe wieder wollen und Sie werden ein wenig pixelig, wenn ein 3 50 geht zu 4 80 Also, das ist etwas zu beachten, wenn Sie Ihre Website entwerfen und wir, bevor Sie Ihre Assets erhalten und zu bestimmen, was die Dimensionen mit der minimalen Größe von Verstand sind für Ihre Bilder, die Sie auf Ihrer Website präsentieren werden. 17. 21 Course: Blick auf unser originelles Design. Also haben wir eine ziemlich gute ähnliche Art Design hier auf der Website. Und natürlich könnten wir immer noch einige Verbesserungen und Korrekturen anwenden, um es wirklich anzupassen und es so aussehen zu lassen , wie wir es wollen. Aber im Wesentlichen, was wir getan haben, ist, dass wir eine dreiseitige Website erstellt haben, und wir haben die Fähigkeit, jede einzelne dieser Seiten wirklich anzupassen. Wir verwenden eine freigegebene CSS-Datei, um das gesamte Styling für die Website bereitzustellen. Und das Gute daran ist, dass es uns erlaubt, eine Uniform zu halten. Nehmen wir an, wir wollen unsere Fußzeile zu lesen ändern. Wir könnten leicht tun, dass unsere CS Stil dot CSS aktualisieren und das würde über unsere gesamte Web-Website eso aktualisiert . Wir haben es so angepasst, dass es mobil bereit ist, und wir können die Größe davon aktualisieren. Das ist also, damit wir die Größe aktualisieren können und wir sehen, wie es auf verschiedenen Geräten aussehen wird . Eso sehen Sie, dass es vollständig reagiert, und wenn wir waren, wir ändern es, das Menü wird auf verschiedene Arten präsentiert und so weiter. So haben wir ein paar verschiedene Looks und fühlt sich auf der Website, je nachdem, welche Größe Bildschirm. Und dann, natürlich, kann dies wieder angepasst werden und es nach Bedarf anpassen. Und wir sehen, dass all die verschiedenen Seiten, die sie anders in der voll funktionsfähigen innerhalb mobile und angelegt dargestellt werden, und sie funktionieren richtig und bekommen Anzeige, dass richtig. Also haben wir hier einen Kontaktbereich, 100% gehen über 100%, wenn wir ein Untermenü haben. So sieht es immer noch schön und ordentlich aus. Wir haben unsere Bilder. Wann immer wir das nach unten schrumpfen, was auch immer wir schrumpfen, ist verfügbarer Platz auf unserer Seite, als sie wirklich schön und ordentlich auffüllen . Und wann immer wir mehr Immobilien zur Verfügung haben, als sie in einem zweispaltigen Format und so weiter. Und das könnte sogar angepasst werden, wenn wir zu drei Spalten gehen wollten und so weiter. Dies hängt also alles davon ab, welche Größe der Bilder wir innerhalb unserer Website nutzen möchten. - Eso. Normalerweise, was ich gerne tun, ist, mit einer zwei Spalte zu bleiben, weil Sie in der Regel, wenn Sie auf die größte Größe bekommen, so dass einige dieser Bilder bekommen, um in voller Größe, und weil wir Bilder, die 3 50 waren, haben wir nicht wirklich so viel Platz zum Spielen . Also waren alle Bilder unterschiedlich groß, und so mussten wir das berücksichtigen, wenn wir unseren Web-Build machen. Und im Wesentlichen ist dies eine zweispaltige Website, und wenn wir wollten, dass unsere Fußzeile da rauskommt, könnten wir das einfach aus dem Rapper-Bereich verschieben, den wir hatten, der diesen Standard mit Größe und so weiter festlegt . Wir haben unser Logo hier oben. Wir haben einige Anpassungen in einigen Google-Fonds gebracht, und es ist ziemlich bereit, weiter zu gehen. Natürlich können Sie den Quellcode nehmen, ihn selbst anpassen und sehen, was Sie in Ihrem eigenen geschehen können. CSS-Anpassungen durch Hinzufügen, dass in der Website das Web Template, und weiterhin bauen verschiedene Stile und verschiedene Versionen von dieser Website und der Geek Sorge Teil des Kurses. Also haben wir es ziemlich schnell durchgegangen, und es ist keine Notwendigkeit, G-Abfrage zu verstehen, um dieses Menü zu nutzen, oder wenn Sie eine wirklich kleine Website haben, und wenn es Ihnen nichts ausmacht, es selbst im Quellcode zu aktualisieren, diese ausgewählten Klassen abhängig davon, auf welcher Seite Sie sich befinden, ist das immer auch eine Option. Also keine Notwendigkeit. Aber Jake Worry bietet wirklich, dass wirklich zusätzliche Funktionalität und eine ganze Menge benötigen. Du schaffst es, Jake Sorge. Wenn Sie also Teoh Zeh suchen, erfahren Sie mehr über Jake Worry. Es ist immer eine großartige Ressource, um zu haben und in der Lage zu sein, zu nutzen, wann immer Sie Ihre Website-Entwicklung tun .