HTML und CSS: Aufbau reaktionsfreudiger Websites für Anfänger:innen

2. Fundamentals: - Hallo. - Willkommen bei der ersten Reihe von Folien, - HTML und Web Grundlagen. - Lehnen Sie sich zurück, - entspannen Sie sich und wir werden diskutieren, wie das Web funktioniert, - der Entwicklungsprozess, - Workflow-Gewohnheiten. - Und dann, - später, - werden wir eine Übung machen, um einige verschiedene HTML-Elemente kennenzulernen. - Erstens, - lasst uns darüber reden, wie das Web funktioniert, - und hoffentlich wird dies Ihnen eine Vorstellung davon geben, wie das, was wir lernen, in das größere - Bild des Internets passt . - Wir werden über Anfragen als Antwort sprechen, - Rendering im Browser, - lokale Vers remote und einige Unterschiede zwischen Front-End und Zurück und Entwicklung. - Zuerst - lassen Sie uns über Anfrage und Antwort sprechen. - So stellen Sie sich vor, dass Sie zu Hause sitzen und Sie vor Ihrem Computer und Sie sagen - Ich möchte auf diese Website gehen, so dass Sie den Domain-Namen in Ihren Browser eingeben, wie Sachen - funktioniert dot com und dann drücken Sie zurück und Ihr Computer verbindet sich mit das Internet, - und es spricht mit diesem Kerl hier drüben, - der ein DNS-Server ist, - D n A. - Steht für Domain-Name-Server Dina Service. - Wir sind wie Betreiber des Internets. - Sie halten eigentlich keine Website-Dateien, aber sie werden Ihnen sagen, wie Sie an den spezifischen Computer gelangen können, wo immer es auf der Welt sein mag . - So können Sie sich mit ihm verbinden und dann die Website-Dateien erhalten, die Sie suchen. - Also DNS-Server. - Sie reden den ganzen Tag mit anderen DNS-Servern, und sie verfolgen, einen Domainnamen mit etwas namens „I P“ -Adresse zu verknüpfen . - Ähm, - und ich ich p Adresse ist der Adresse sehr ähnlich, die Sie auf Ihrem Haus haben. - Es ist im Grunde eine Möglichkeit, den Standort eines Computers zu identifizieren, wo es irgendwo sein mag - in der Welt. - Eso jeder Computer, der mit dem Internet verbunden ist, hat eine I. - P-Adresse. - Sogar der Computer, auf dem Sie gerade sind, hat eine eigene IP-Adresse. - Also, wenn Sie eingeben, wie Sachen funktioniert dot com, - fragen Sie den DNS-Server. - Wenn es die Adresse dieses Hosting-Servers kennt und diese Domain nicht wirklich, - heißt es, - es ist nicht in meiner Datenbank, - also frage ich einen anderen DNS-Server. Und dieser weiß, dass er sagt, ja, ja, das ist in meinem Geld, das der I-P-Adresse zugeordnet ist. - 70.42 Punkt 251.42 Also dieser erste DNF Server sagt Dank all Geld, dass Informationen auch. Für den Fall, dass mich jemand in Zukunft noch einmal gefragt hat, dann weiß ich, was ich ihnen sagen soll, und es sendet Ihnen diese Informationen. - Jetzt kennt Ihr Computer die spezifische Adresse des Servers, mit dem Sie eine Verbindung herstellen möchten - und das ist sein grüner Pfeil. - Hier zeigt die Verbindung zwischen Ihrem lokalen Computer und diesem Remote-Hosting-Server - und Hosting-Server, - die hier durch diese blauen Türme dargestellt werden. - Dies sind die Computer, die die eigentlichen Webdateien enthalten, - der Inhalt, der dann wird, - wissen Sie, - auf Ihren Computer heruntergeladen und in Ihrem Browser gerendert. - Also, wenn Sie die i-P-Adresse haben, - machen Sie eine angeforderte in diesen spezifischen Hosting-Server und es sendet eine Antwort zurück. - Und das beginnt ein Gespräch zwischen Ihrem Computer und dem Remote-Server hin und her. - Sie fragen also, - Sie stellen eine HTTP-Anfrage und fragen nach etwas wie der Homepage, - und der Server sendet eine Antwort in Form von Inhalten zurück. - Und das ist Textcode, - das ist entweder HTML CSS oder JavaScript. - In dieser Klasse werden wir das lernen. - Wir werden lernen, den HTML- und CSS-Code oder den Inhalt zu schreiben, der zwischen dem Remote-Server, dem Webserverund dem Viewer-Browser weitergegeben HTML- und CSS-Code oder den Inhalt zu schreiben, der zwischen dem Remote-Server, dem Webserver wird. - Lassen Sie uns jetzt ein wenig über lokale Verse sprechen, - also bezieht sich der Begriff lokal auf den Computer, der gerade vor Ihnen ist. - Lokaler Computer ist etwas, das Sie berühren können, das direkt vor Ihren Augen liegt, und das sollte entfernt werden. - Wo Remote sich auf einen Webserver bezieht, der ein Remote-Standort irgendwo anders auf der Welt ist. Also, wann immer wir , wann produzieren, wannimmer wir in unserer Produktionsphase sind, arbeiten wir immer an unserem lokalen Computer und sehen es in unserem Browser auf unserem Computer vor. - Also arbeiten wir vor Ort. - Wir sehen es lokal im Browser vor und überprüfen unsere Arbeit. - Auf diese Weise können wir sicherstellen, dass alles genau so ist, wie wir es wollen, bevor wir es veröffentlichen und auf einem entfernten Server aufstellen. - So bauen Sie Ihre Website auf Ihrem Computer, - Ihr Schreiben HTML- und CSS-Code. - Sie sehen diesen Code in Ihrem Browser in der Vorschau und Sie stellen sicher, dass alles so aussieht - Sie wollen. Vielleicht korrigieren Sie Tippfehler, ändern Farben, Dinge wie das. - Dann entscheiden Sie sich OK, - ich bin bereit, das auf dem Remote-Server aufzustellen. - Dann benutzen wir einen Prozess namens FTP, das Dateiübertragungsprotokoll ist, um diese Dateien zu speichern oder sie auf den Webserver hochzuladen. - Und jetzt, - weil dieser Webserver einen bestimmten Domain-Namen hat, - eine I-P-Adresse damit verbunden, - Menschen aus der ganzen Welt können jetzt diese Dateien ansehen und darauf zugreifen. - Und dann, - irgendwann - wenn Sie diese Dateien ändern oder ändern möchten, - können Sie sie immer von diesem Webserver runterholen. - Sie haben also auch die neueste Kopie auf Ihrem lokalen Rechner. - Und Sie können das tun, indem Sie die Dateien herunterladen oder abrufen, - sie wieder auf Ihren lokalen Computer bringen. - Lassen Sie uns ein wenig über die Unterschiede zwischen Front- und Web-Entwicklung im Vergleich zum Back-End sprechen - Web-Entwicklung. - Also in dieser Klasse werden wir nur Front-End-Web-Entwicklung machen. - Wir werden lernen, diese 1. 2 zu schreiben, die HTML und CSS ist. - Jetzt. - Der Hauptunterschied ist, dass die Front- und Programm-Programmiersprachen tatsächlich - Gäste sind . - Wir sollten sagen, Markup-Sprachen HTML und CSS werden alle Client-Seite gerendert, - was bedeutet, dass sie in Ihrem Browser gerendert werden. - Ihr Browser interpretiert diesen Code und rendert ihn dann, wodurch die Website jetzt angezeigt wird. - Das ist im Gegensatz zur Back- und Web-Entwicklung, - wo alle Programmiersprachen auf dem Backend vom Server interpretiert werden - auf der Serverseite. - Also, - zum Beispiel - Ruby, - PHP, - Python, - Java und Knoten, - das ist eine Version von JavaScript auf dem Server. - Alle diese Programmiersprachen arbeiten, um Objekte zu aktualisieren. - Ähm, - wissen Sie, - interagieren Sie mit der Datenbank und rendern schließlich die HTML- und CSS-Dateien, die dann fliegen - an das Front-End, dass Luft vorbei an Ihrem Browser. - Das ist also der Hauptunterschied zwischen Front- und Entwicklungs- und Back-End-Entwicklung. - So, wie Sie beginnen, Ihre eigenen Projekte zu machen, - ein guter Start in die Erstellung einer Website ist ein Brainstorming-Prozess. - Also auf dem Weg, - fühlen Sie sich frei, ein Stück Papier zu greifen, - einen Stift oder einen Bleistift, - und fangen Sie einfach an, die Ideen von dem, was Sie bauen wollen, bevor Sie tatsächlich beginnen - zu codieren. - Viele Leute machen gerne ein Flussdiagramm oder Flussdiagramm, in dem Sie im Grunde abbilden, was - Seiten existieren und wie diese Seiten zu anderen Inhalten verlinken. - Dies ist ein gutes Beispiel für ein handgezeichnetes Mock up, - so können Sie auch die einzelnen Seiten nehmen und ziehen und Art von Entscheidungen über - wo Inhalte gehen. - Und das wird dir viel Zeit sparen. - Denn anstatt Code verschieben oder Code hinzufügen oder entfernen zu müssen, - können Sie sich über das Gesamtlayout und auf welchen Inhalt Sie existieren möchten - ein Stück Papier auf. - Und es ist viel schneller, etwas zu löschen oder neu zu zeichnen, als viele Änderungen in Ihrem - Code vorzunehmen. - Also ich denke, es ist eine gute Idee, bevor Sie ein Projekt starten, um eine Art von machen, was - Sie denken, dass die Website-Seiten halten und irgendwie, wo Sie sich vorstellen, dass Sie sein werden - Positionierung dieser Inhalte. - Es gibt auch digitale Mock Ups, die Sie online machen können. - Eine Seite, die ich mag, heißt Mockingbird, - und diese Seiten werden es Ihnen ermöglichen, Mock ups zu machen, die vielleicht besser geeignet sind, wenn Sie brauchen - um diese Informationen einem Kunden zu präsentieren, bevor Sie mit dem Beschichten beginnen, - es gibt sogar Vorlagen in mock up Websites speziell für Tablets und mobile Geräte als auch -. - Eines der ersten Dinge, die Sie sicherstellen möchten, wenn Sie mit einem neuen Projekt beginnen, ist - einen Ordner zu erstellen, der nur dieser Website oder diesem Webprojekt gewidmet ist, - und wir werden immer alle unsere Dateien und Unterordner behalten, die verwandt sind zu diesem - Website in diesem Ordner. - Also nennen wir das immer einen übergeordneten Ordner oder einen Stammordner. - Dieser hier heißt „Site“. - Normalerweise nennst du das. - Wie auch immer der Name Ihres Projekts ist. - Zum Beispiel, - wenn ich eine Website für eine Waffelfabrik baue, - könnte ich diesen Ordner so etwas wie Waffle factory dot com oder so etwas nennen. - Nun, - innerhalb dieses übergeordneten Hauptordners oder Stammordners, - das ist, wo alle Ihre Unterordner sein werden. - Alle Ihre Bilder für Ihre Website werden gut in einem Ordner organisiert. - Alle speziellen Schriftarten, die Sie verwenden könnten, können organisiert werden. - Es gibt gut, - all unser CSS, - das wird der Stil unserer Website sein, - wird sich in einem Ordner befinden, - und alle unsere Webseiten sind HTML. - Seiten werden auch in diesem übergeordneten Hauptordner dort sein. Und das wird alles schön und organisiert halten, und wir werden versuchen, es zu vermeiden, dass wir eine Datei für unsere Website außerhalb dieses Hauptordners haben. In der nächsten Übung springen wir rein und reden über HTML-Syntax. - Wir werden auf die Dokumentstruktur schauen, eine grundlegende Seite zu bauen. Wir werden lernen, Textelemente zu erstellen, und wir werden lernen, Bilder zu erstellen und dann Links zwischen unseren Seiten. - Gehen Sie also weiter und fahren Sie mit der ersten Übung fort. - Fühlen Sie sich frei, den Rest dieser Folien mit dem pdf-Link unten zu durchsuchen, - und es wird Inhalte haben, die alle Dinge, die wir in der Übung übergehen, überprüfen. - Danke. 3. Erste Schritte: - Hi. - Willkommen bei der ersten Übung 1.1. Bei jeder Übung wirst du immer damit anfangen wollen, die Zip-Datei herunterzuladen, die ich für dich bereitstelle. - Und das werden die Quelldateien sein, mit denen wir für jede Übung arbeiten werden . Nur zum ersten Mal zeige ich dir, wie das funktioniert. - Also habe ich voran gegangen und heruntergeladen diese ZIP-Datei, - die 1.1 dash html dash fundamentals dot zip genannt wird und ich musste das un komprimieren. - Also ist es eine Datei ist eine einzelne Datei, die komprimiert ist, - irgendwie zerschlagen eine Reihe von Dateien und Ordnern im Schlepptau. - Eine Datei, - und dann mussten wir sie hier komprimieren. - Ich habe nur doppelt darauf geklickt auf Mac toe un komprimieren dies und es spuckt einen Ordner wie diesen - Sie müssen möglicherweise, - abhängig von Ihrem Computer, - Ihr Betriebssystem bedeutet toe wie rechts, - klicken Sie darauf und sagen etwas wie un compress oder auf Archiv oder Extrakt könnte ein anderer sein - Weg, der geschrieben werden könnte, - aber jedenfalls, - Sie haben tow, - entpacken oder un komprimieren diese Datei, - und das sollte sich in einen Ordner wie diesen verwandeln. - Und das sind alle Akten. - Die Quelldateien, die diese Übung starten müssen. - Im Grunde, - das enthält nur einige Bilder hier, - die einige Bilder von einigen Schuhen sind. - Warum? Weil das erste , Projekt, das wir bauen werden, eine sie Website sein wird. - Okay, also habe ich das in einen Ordner auf meinem Computer verschoben. - Vielleicht möchten Sie entscheiden, wo Ihre Dateien für diese Klasse gespeichert werden. - Sie können sie sogar auf den Desktop legen, wenn Sie keinen geeigneten Platz haben. - Was ich getan habe, war, dass ich alle meine Website-Dateien hier in einen Ordner setze. - Ich habe meinen Sites-Ordner hier, - und ich ging voran und habe einen Ordnernamen speziell für diese Klasse HTML und CSS von - scratch erstellt . - Und du kannst da drinnen sehen. - Ist das un komprimierte Zip-Datei dort von 1.1 dash html dash Fundamentals Ordner. - Und im Inneren, - wir haben nur ein paar Bilder, - wie gesagt. - Okay, - also das ist ein guter Anfang ist, diese Dateien an einen Ort zu verschieben, an dem Sie sie leben möchten - auf Ihrem Computer 4. Dokumentenstruktur: - Und das nächste, was wir tun werden, ist, dass wir unseren Code-Editor aufklären, also werde ich rüber gehen und erhabenen Text starten. - Und wenn erhabener Text beginnt, haben wir hier einfach keine Datei ohne Titel. Und was wir zuerst tun wollen, ist, dass wir etwas öffnen wollen, das die Sidebar nennt, was uns auf dem S ermöglicht, unsere Projektdateien und -ordner zu sehen. - Also gehe ich zum View-Dropdown-Menü, und ich gehe zur Seitenleiste und zeige die Sidebar wieder an. - Das ist im Blick. - Sidebar, - Sidebar anzeigen. - Ich gehe und klicke darauf und das bringt meine Sidebar hier hoch. - Und das Schöne daran ist, dass ich diesen Ordner ziehen kann, den ich euch herunterladen ließ - 1.1 html Grundlagen. - Sie können das ziehen und in Ihre Seitenleiste ablegen, - und Sie können dort sehen, dass hier meine Bilder sind und dass dieser bestimmte Ordner. - Okay, - Also, um damit zu beginnen, - wir wollen nur unsere Homepage erstellen. Also gehe ich zum Datei-Drop-Down-Menü und sage neue Datei, und das wird eine unbenannte Datei wie diese erstellen, und wir werden diese Datei direkt vom Schläger speichern, ich sage Aktensicher und wir werden diese Datei nennen. - Etwas ganz Besonderes. - Nun, - alle anderen Dateien auf Ihrer Website, - Sie können sie wirklich benennen, was Sie wollen. - Ähm, - diese spezielle Datei, - die ist die Homepage, - wir müssen diesen Index nennen, - was alles Kleinbuchstaben I n d x ist, - und wir müssen ihm eine Dateierweiterung entweder dot HTM oder dot html geben. - Beide Erweiterungen sind in Ordnung. - Der Grund, warum wir diesen Index benennen müssen, ist, dass, wenn ah Person, die versucht Ihre Website zu sehen, eine Anfrage an diesen Remote-Server stellt, standardmäßig der Remoteserver die Datei namens Index an sie zurückgeben wird. - Und deshalb sehen sie das zuerst. - Daher wird dies die Homepage oder die Splash-Seite. - Einige nennen es, damit wir sicherstellen wollen, dass wir das an der richtigen Stelle speichern. - Denken Sie daran, - wir immer, - immer, - wollen immer alle unsere Website-Inhalte in diesem einzigen Stammordner speichern. - Also in diesem Fall, - Ich habe hier einen Ordner erstellt, - Minen unter Websites, - und dann habe ich einen für den Namen der Klasse HTML und CSS von Grund auf neu. - Und da ist mein 1.1 Ordner und ich sehe meinen Images Ordner da drin. - Einige der Namen diesen Index und speichern Sie dieses Recht in diesem Übungsordner wie so aus. - Wir können sehen, dass die Indexseiten in diesem Ordner sitzen Okay, - also Index Punkt HTML, - wir sind bereit zu gehen. - Also lasst uns anfangen, HTML-Code auszuschreiben. - Lass uns einfach in dieses Ding eintauchen. - Wenn Sie Ihren Text je vergrößern möchten, - können Sie, -ähm, -Steuerelement plus und Minus auf Windows oder Mac verwenden ähm, - . - Es ist die Befehlstaste, - und die Plus- oder Minus-Taste wird sie größer machen. - Also, wenn Sie Text eingeben, - können Sie die Größe ändern. - Ich werde diese Steuer schön und groß für euch machen, und das wird bei Eissorte helfen. - Auch, - wenn Sie wirklich spät in der Nacht oder für längere Zeit codieren, - ähm, - und Sie können Ihre Rückenhaltung in Ihren Augen speichern, indem Sie den Code viel größer machen. - Okay, - also das erste, was wir tun werden, ist, dass wir über HTML-Syntax lernen, - Also html steht für Hypertext-Markup-Sprache und markieren Sie Sprache ist, was sie tun, ist sie - bieten eine Reihe von Elementen, die Inhalt umgeben und dann definieren Sie diesen Inhalt für den - Browser. - Also müssen wir dem Browser sagen, - Hey, - dieser Text ist eine Überschrift. - Hey, - dieser Text ist ein Absatz. - Das ist ein Bild und das ist ein Link. - Also, um loszulegen, - lasst uns ein sehr wichtiges Element lernen, das HTML-Element genannt wird. - Jetzt bestehen alle Elemente aus Start-Tags und End-Tags. - Einige Elemente haben eigentlich nur ein Start-Tag, - aber die meisten von ihnen haben oft ein Start- und End-Tag. - Wir reden später noch ein bisschen mehr darüber. - Also alle diese Tags bestehen aus eckigen Klammern, - das ist ein Kleiner-als-Symbol. - Und dann ist der Name des Tags und dann ein Größer-als-Symbol wie dieser Name das öffnende Tag. - Außer, dass sie sich einen Schrägstrich davor leisten . - Was wir uns hier ansehen, ist etwas, das HTML-Element und das HTML-Element genannt wird. - Was es tut, ist es dem Browser mitteilt, dass der gesamte Code zwischen diesen Tags kam. - Hier in der Mitte ist HTML-Code, - so können Sie hier sehen. - Dies ist das HTML-Element, - und es beschreibt den Inhalt zwischen diesen Tags als HTML-Code. - Dies wird das Start-HTML-Tag genannt, - und dies wird das Ende HTML-Tag genannt. - Also wieder, - das Start-Tag ist das gleiche wie das End-Tag. - Es hat nur einen Ford Slash davor. - Und das ist sehr häufig. - Okay, das ist also ein ziemlich guter Anfang. - Im Grunde, - Jetzt wissen wir, dass wir gesagt haben, dass der Browser anfangen würde, ein HTML hier zu schreiben, - und wir beenden unser HTML hier, - also wird alles, was dazwischen geht, der Rest unseres Dokuments sein. - Ich werde noch einen Tag oben drauf hinzufügen. - Und dieser Tag ist auch ein wichtiger Tag. - Dies ist ein sehr eindeutiges Tag, - und es heißt DOC-Typ. - Und um das doc-Typ-Tag zu schreiben, - tun wir weniger als Symbol Ausrufezeichen. - Und wir schreiben das Wort Doc-Typ so. - Nun, - was Doc-Typ tut, ist Thisted AG wird dem Browser mitteilen, welche Version von HTML waren - läuft. - So wie wir das sagen, - der Browser, den wir nicht nur ein HTML-Dokument erstellen, - aber in HTML fünf Dokument ist, dass wir ein Leerzeichen nach dem Wort doc-Typ setzen und wir schreiben HTML wie - das. - Und das sagt dem Browser, - das ist ein HTML fünf Dokument. - Wenn Sie auf frühere Versionen von HTML oder X html zurückblicken, werden Sie feststellen, dass diese Doc-Typ-Tags tatsächlich ziemlich lang und lang sein können. - Sie können weiter und weiter. - Ähm, - manchmal, - zum Beispiel - in HTML vier oder drei. - Diese waren, - ähm, - fast ein Satz lang, um dem Browser zu beschreiben, dass das bestimmte Dokument war, - wissen Sie, - dass markieren Sie Version für HTML 51 der Einschlüsse von ihm, - was ein schöne neue Funktionen, dass es sehr einfach ist. - Wir können genau richtig, - doc-Typ html, - und es sieht es als HTML fünf Dokument. - Okay, - großartig. Also, jetzt haben wir dem Browser gesagt, - ähm, - das ist ein HTML-Fünf-Dokument, - und hier ist der Anfang meines HTML-Codes. - Und hier ist das Ende meiner HTML könnte als nächstes. - Lassen Sie uns über die beiden Hauptteile jeder HTML-Seite sprechen. - Also jede HTML-Seiten in zwei Hauptabschnitte gebrochen und einer wird wie folgt der Kopf genannt - Schrägkopf wird es schließen und dann wird eine andere genannt. - Ein weiterer Teil heißt der Körper. - Also haben wir den Kopf und den Körper, genau wie du und ich einen Kopf in einem Körper haben. - Also innerhalb des Kopfabschnitts, - was speziell hier geht, ist Inhalt, der für Browser bestimmt ist, - Suchmaschinen und Geräte. - Das ist also wie Maschinencode, der hier geht. - Dies sind Informationen, - Metadaten und Inhaltslinks, die sich auf, - äh, - wie diese Seite anzeigen soll, welche Art von Suchbegriffen mit dieser Website verknüpft werden sollen -, - was wir später ein wenig mehr darüber reden. - Aber vor allem alles in diesem Abschnitt wird Dinge sein, die wir nicht wirklich sehen - physisch auf der Seite. - Es sind nur Dinge, die für andere Maschinen und Geräte bestimmt sind. - Das ist im Gegensatz zu dem Körper jetzt in der Körperpartie. - Wir haben tatsächlich alle physischen sichtbaren Inhalte der Seite, um voran zu gehen und eine Notiz zu hinterlassen - für sich selbst darüber, um uns darüber zu lehren. - Lassen Sie uns tatsächlich ein anderes Element namens Kommentar lernen. - Also dieses Tag verwendet thelancet als Symbol Ausrufezeichen und dann Bindestrich. - Okay, - es fängt an, ähnlich wie der Dock-Typ zu sehen, - aber tatsächlich hat zwei Bindestriche, die ihm folgen. - Ähm, - und Sie können hier sehen, dass der ganze Code jetzt unter diesem öffnenden Kommentar-Tag hier - großartig aus war. - Hier können wir schreiben. - Das ist ein Kommentar, - ähm, - zu Lee , - ich werde nur sagen, ich kann es sehen, - uh, - im Code, - aber das wird nicht im Browser erscheinen. - Ein Kommentar ist also eine gute Möglichkeit, uns Nachrichten zu hinterlassen. - Manchmal verwenden Leute sogar Kommentare, um Codeabschnitte auf der Seite und diese Luft zu deaktivieren - Wirklich? - Ah, - gute Angewohnheit, Dinge zu beschriften und irgendwie, - um, - Nachrichten und Kommentare über was zu hinterlassen? - Bestimmte Teile des Coder. - Also, jetzt, wo wir gelernt haben, diesen Kommentar zu erstellen, - was wieder? - Dies beginnt mit weniger als Ausrufe-Strick ist, wie Sie den Kommentar so starten, wie wir - beenden Sie den Kommentar, wie wir Strich größer verwenden, als Sie tatsächlich bemerken, wenn ich vergesse, einzuschließen - die Endung getaggt dort, dass es tatsächlich den Rest auskommentiert der Seite. - Also muss ich sagen, dass ich fertig bin. - Sag mal, - hey, - Browser. - Ich bin fertig, einen Kommentar zu machen, indem ich sage, dass Strich größer ist als dies ein eindeutiges Tag ist, das - nicht den Schrägstrich im Schließen hat. - Es endet einfach so. - Aber dieser Typ ist wirklich der Einzige. - Okay, - jetzt, wo wir gelernt haben, einen Kommentar zu erstellen, - schreiben wir einen kleinen Kommentar zu sich selbst darüber, was in der Kopfabschnitt passiert. - Also gehen wir weiter und schreiben den Kopf. - Der Kopfbereich, - äh, - enthält Informationen für, - wie, - Suchmaschinen und den Browser und wird von unserem Betrachter nicht gesehen, - und wir werden diesen Kommentar dort beenden. - Jetzt. - Diese Kommentare können einzeilig oder mehrzeilig sein. - Sie können auf einer einzigen Zeile wie diese sein, - oder Sie können zurückkehren drücken, - und Sie können diese Kommentare tatsächlich auf mehrere Zeilen wie so reichen. Okay, - lasst uns auch einen Kommentar für den Körperabschnitt schreiben. - Anders als der Kopfbereich, - den wir nicht wirklich sehen ah, - ist der Körper der gesamte sichtbare Bereich der Webseite. In diesem Abschnittkönnen wirDinge wie Texte sehen, - äh, - ähm, -Links Bilder und alle Arten von Medien. können wir In diesem Abschnittkönnen wirDinge wie Texte sehen, - äh, - ähm, -Links Bilder und alle Arten von Medien. In diesem Abschnittkönnen wirDinge wie Texte sehen, - äh, - äh, - ähm, - - Also in diesem Kommentar dort, - so dass diese Luft die Hauptabschnitte von in HTML-Seiten den Kopf und den Körper. Lasst uns einfach lernen, - ähm, - fangen wir an, ein Tag zu lernen, das wir innerhalb des Kopfabschnitts platzieren können, und dieses Typen genannt Titel, damit wir unserer Seite hier einen Titel geben können. - Diese spezielle Website ist für ein Schuhunternehmen. - Also für den Titel, - werde ich den Namen der Firma hier setzen. - Ich sage, Z H W Schuhe nur einen generischen Namen. - Ich habe mich erfunden, - und wir werden einige Informationen setzen, die irgendwie hilfreich für Suchmaschinen sein werden. - Wird sagen, - das ist Ah, - Schnäppchen. - Schuhgroßhändler wie das. - Und diese Seite ist die Überseite. - Meine Homepage beginnt mit Informationen über das Unternehmen. - Also sage ich einfach über uns. - Ich denke, dass und wir diesen Schrägstrich Titel schließen werden. - Okay, also wird das ein paar Dinge tun. - Die Nummer eins Suchmaschinen können das sehen, und sie werden sagen, - Hey, - das ist eine Seite, die Inhalt über Schuhe hat, - ähm, - und für den Großhandel von Schuhen. - Und das ist auch eine Seite von über sie oder über das Unternehmen. - Die andere Sache, die der Titel tut, ist, dass er auch auf der Browser-Tab sichtbar ist. - Schauen wir uns das mal an. - Ich werde diese Seite speichern. - Also sagen wir Datei speichern, oder Sie werden wahrscheinlich die Gewohnheit haben, es zu tun. - Befehl s auf dem Mac. - Oder Sie könnten Control s auf Windows tun, um zu speichern. - In Ordnung. - Und gehen wir weiter und bringen das im Browser auf. - Und wir können den Kerl hier in Chrom ziehen. - Wir finden die Akte. - Es heißt Index, und ich werfe das einfach da rein. - Okay, - Also zuallererst, - diese Seite ist weiß. - Es ist völlig leer. - Ich habe nichts in den Körper Sex gesetzt und doch, - aber eine Sache, die wir vom Kopf sehen können, ist hier oben oben auf der Browser-Tab, - Sie werden in der Lage sein, den Namen der Website zu sehen, - und es läuft kein Platz. - Dort fängt Büro, - riesige W Schuhe an. - Schnäppchenschuhe, was? - Cool. - Das ist also ein guter Anfang. - Das ist also eine Sache, die wir im Kopfbereich sehen können. - Ist dieser Tab hier? - Abgesehen davon, - werden Sie nicht sehen, physisch etwas anderes aus dem Kopfteil zu sehen. - In der Tat, - dieses kleine weiße Rechteck hier, das mein Browser-Fenster ist, das der Körper ist. - Dort sehen wir Dinge, die sich im Körper befinden. - Also lasst uns dann wieder zum Code springen und lasst uns noch etwas schreiben und du wirst ein - winziges bisschen wie das herauszoomen . - Okay, - also ist das eine wirklich grundlegende HTML-Seite ist, dass wir den Doc-Typ von oben haben. - Dann haben wir das HTML-Tag und dann innerhalb des HTML-Tags verschachtelt. - Wir haben die beiden Hauptabschnitte jeder Webseite. - Wir haben den Kopf im Körper, - so haben wir bereits gesehen, dass wir den Titel in den Kopf legen können. - Lass uns etwas in den Körperbereich schreiben und sehen, ob das auftaucht. - Lass uns voran gehen und schreiben Hallo Welt hier in den Körper. - Also werde ich voran gehen und speichern, dass Und ich habe einen Befehl, nachdem Sie Datei speichern gehen können und ich bin - werde zurück zum Browser und wichtig ist, dass ich immer aktualisieren muss - aktualisieren, weil ich den Code speichern und dann in Ordnung für den Browser um es zu sehen, - wir müssen es neu laden. - Also werde ich zu diesem kleinen Aktualisierungspfeil hier gehen, um die Seite auf Mac neu zu laden, - Sie können auch Befehl drücken sind, um die Seite neu zu laden und mehr als wahrscheinlich auf Windows in Ihrem - Browser wird die Kontrolle sein. - Sind Kontrolle und die R-Taste. - Also Hit Command sind. - Und da sehen wir das Wort Hallo. - Welt erschien dort in der Ecke des Browserfensters so, dass ein wenig größer - dort. - Da gehen wir. - Es ist schön und leicht zu sehen. - Ok, - Ausgezeichnet. - Das zeigt also, dass der Körper ist, wo wir Inhalte auf der Seite physisch sehen können. - So lernten wir über Doc-Typ HTML-Tag den Kopf im Körper auf. - Wir haben auch gelernt, Kommentare im Code zu schreiben, - den nur wir sehen können. - Du wirst es bemerken. - Dieser Kommentar hier, der besagt, dass der Körper der gesamte sichtbare Bereich ist. - Die Webseite. - Wir haben das nicht gesehen, als wir zum Browser gingen. - Wir sahen nur den Text, den wir außerhalb des Kommentars geschrieben haben, - das ist hallo Welt und erhabene Text stimmt dies für uns zu, so dass wir deutlich sehen können - dass dieser Code hier ein Kommentar ist 5. Textformatierung: - Lasst uns noch ein Experiment machen. - Gehen wir in die Körperpartie und ich werde ein paar Mal zurückkehren und ich werde sagen - hallo, - Moon Next. - Und dann gehen wir weiter und speichern und werden zum Browser zurückkommen und sehen, was das getan hat. - Okay, das ist interessant. - Schauen wir uns das Wort an. - Hallo, Moon. - Hallo, - Welt. - Wie kommt es, wenn ich es in den Code hier geschrieben habe, traf ich zurück und ich setze diese oben auf diese - eins. - Also Welt-hallo Welt sollte über Hallo Mond sein. - Aber dann, - seltsam, - im Browser dort, der Seite an Seite erscheint. - Nun, - der Grund, warum ist, dass der Browser Whitespace ignoriert. - Lee beschäftigt sich wirklich mit der Beziehung dieser Etiketten, oder? - Diese jeweils Timo Elemente bestehen aus diesem Start-Tag und End-Tag. - Sie sind umgebende Inhalte und sie beschreiben dem Browser, was dieser Inhalt ist. - Also dieser Titel-Tag uns beschreibt dem Browser, dass dies der Titel der Seite ist. - Es umgibt diesen Inhalt und teilt dem Browser mit, wie er ihn interpretieren soll. - Wenn wir also diese Hello Welt und Hallo Mond nebeneinander erscheinen lassen wollen, müssten wir ein bestimmtes Tag verwenden, - und in diesem Fall wollen wir sie tatsächlich übereinander erscheinen lassen. - Also müssen wir auch ein bestimmtes Tag dafür verwenden. - Also, wenn ich sagen will, dass dies ein Absatz und dann darunter ist, - gibt es einen separaten Absatz. - Ich muss diesen Inhalt mit dem entsprechenden Element umgeben. - Okay, also lass uns das p-Tag so benutzen. - Also das Absatzelement besteht aus diesem öffnenden p-Tag und enden p-Tag wie folgt, - und es umgibt diesen Inhalt Hallo Welt und sagt es ein Absatz sein. - Also gehen wir weiter und fügen ein öffnendes und schließendes p-Tag zu Es ist gut, - und dann speichern wir das und wir kommen zurück zum Browser und aktualisieren. - Ehrfürchtig. Also, jetzt hallo, - Welt ist oben auf Hallo, - Mond. - Es sieht das als einen Absatz in. - Das ist ein separater Absatz. - Also HTML beinhaltet, - um gut, - eine anständige Menge an Auswendiglernen. - Wir müssen wenigstens diese gemeinsamen Tags lernen. - Ich werde Ihnen beibringen, dass Sie ziemlich viel Nutzen aus hochfrequenten HTML-Tags bekommen werden, um Inhalte zu umgeben. - Okay, das ist also ein guter Anfang. - Wir haben gelernt, Absätze zu erstellen. - Vielleicht möchten wir Überschriften auf verschiedenen Texten auf der Seite erstellen. - Also lassen Sie uns voran und beginnen Sie mit der Erstellung Überschrift hier oben auf unserer Seite auf. - Und das wird die größte Überschrift sein, die eine H ist. - Und wir werden dem den Titel unserer Firma geben, was einfach ist. - H W ist der Name unserer Schuhfirma, - und wir werden auch eine Unterposition erstellen, - unter diesem etwas kleineren Text und wir sagen Schuhe. - Die Firma ist also CHW-Schuhe. - Also gehen wir weiter und speichern, - und wir werden zurückkommen und aktualisieren und überprüfen. - Sieh dir das an. - So können Sie die Überschrift für die Seite sehen, - die H w ah, - die Unterposition Schuhe. - Und dann haben wir hier zwei Absätze. - Also die Überschriften Luft wirklich wichtig. - Nicht nur ändern sie tatsächlich physisch die Größe des Textes, - sondern auch Suchmaschinen semantisch sehen diese als mawr Bedeutung, weil dies - ist eine Überschrift für den Inhalt unten, - dann gibt die Suchmaschine zusätzliche Bedeutung für die Ebene eins Rubrik. - Und dann h zwei, - das ist eine Level-2-Überschrift, - die etwas kleiner ist, - hat etwas weniger Bedeutung für eine Suchmaschine. - Jetzt gibt es sechs Ebenen von Überschriften. - Es gibt H eins bis H sechs. - Oftmals benutze ich Onley, weißt du, - Alter 12, vielleicht drei oder H vierter am meisten. - Aber es gibt sechs mögliche Größen und Niveaus von Bedeutung für Rubriken, die bei jedem beginnen -, - das ist die größte und wichtigste, - bis zum Alter von sechs Jahren, - das ist die kleinste und am wenigsten wichtige die Überschriften. - Damit wir Überschriften erstellen können. - Wir können Absätze erstellen. - Schauen wir uns auch an, - um, - legen Füllstoff Text. Sagen wir mal, ich baue diese Website für meine Schuhfirma und ich habe keine, - ähm, - Steuern, die ich dort einzahlen muss. - Vielleicht warte ich darauf, dass mein Texter es mir bringt. - Oder vielleicht habe ich es persönlich noch nicht ausgeschrieben. - Also, was wir tun können, ist, dass wir ein paar Füller SMS spielen können. - Sie verwenden einen warmen ipsum-Text und erhabenen Text hat einige Werkzeuge direkt eingebaut - das . - Also ging ich voran und löschte einfach die Steuer und platzierte meinen Cursor zwischen die Öffnung und Schließen des P-Tags dort, und wir gehen zu Werkzeugen und zwei Snippets, und wir gehen weiter und gehen zu diesem, das warmes Ipsum sagt und klicken, - und Sie können sehen, was das getan hat. - Ist es ein Ort dieser Art von Unsinn da drin? - Es ist irgendwie einfach einen Füller Text für mich reinlegen, was eine nette Möglichkeit ist, anzufangen. - Und wenn ich zwei Absätze haben wollte, - könnte ich voran gehen und die dort so einfügen. - Ok, - ausgezeichnet. - Also lassen Sie uns gehen und speichern Sie das und gehen Sie zurück zum Browser und stellen Sie sicher, dass funktioniert. - Und da siehst du meine Überschrift. - Wir machen diese normale Größe wieder. - Dort sehen Sie meine Überschrift und Sie können sehen Ah, - These Unterüberschrift und die beiden Absätze hier, - die ein Leerzeichen zwischen ihnen haben und dann jetzt diesen Ort Füllstoff Text enthalten. - So erhalten Sie eine Menge Nutzen aus diesen Absätzen und Überschriften. , Also wissen wir,dass Absätze einen vollständigen Zeilenabstand zwischen Textzeilen setzen, aber was wäre, wenn ich zum Beispiel nur eine einzige Zeile hinuntergehen wollte, - was wäre, wenn, nach diesem Wort hier, - Laura MIPs Was ist, wenn ich alles andere runterdrücken wollte? - Nur eine Zeile? - Nun, - ich kann das mit einem anderen Tag namens BR Tag tun, - was einen Zeilenumbruch erzeugt, - der jetzt so aussieht, dass dieses Tag kein öffnendes und schließendes Tag in der Art und Weise hat, dass - P für Absatz B tut, - R oder Zeilenumbruch verschiebt einfach alles nach diesem PR-Tag eine einzelne Zeile zurück. - Werfen wir einen Blick auf das und stellen Sie sicher, dass es funktioniert. - Gehen wir weiter und speichern Sie das und wir werden zum Browser zurückkehren und aktualisieren. - Und Sie können sehen, dass die ganze Steuer nach dem Wort Laura MIPs gesprungen ist. - Ähm, - es ist gerade eine einzige Zeile hinuntergegangen, - während wir zwischen diesen Absätzen hier eine vollständige Zeile dazwischen haben. - In Ordnung? - Nicht furchtbar. - Ich bin nicht furchtbar aufregend, - erkannte ich, - aber die Luft, - alle grundlegenden grundlegenden Bausteine. - Das wird also sehr wichtig sein, wenn wir vorwärts gehen. - Okay, also das ist gut für diese Seite. - Nennen wir es einen Tag auf dieser Indexseite. - Wir haben den Namen unserer Firma und einige Absätze. - Dies wird einige Informationen über unser Unternehmen sein, - aber lassen Sie uns voran und gehen Sie zu einigen anderen Textformatierungselementen. - Also lasst uns hier eine weitere Seite erstellen. - Sagen wir, - zum Beispiel, - dass abgesehen von meiner Homepage, - ich werde eine andere Seite haben, die ein Katalog aller Schuhe sein wird. - Also lasst uns voran gehen und sagen, - Datei neu. - Es ist eine neue Datei hier und lassen Sie uns diese speichern, direkt vom Fledermaus wird Datei speichern sagen. - Und wir werden es in den Hauptordner dort für unsere Website-Projekte ablegen. - Und ich werde diesen einen Katalog so nennen, dass wir diesen einen Katalog Dot html nennen. - Vergessen Sie nicht die entsprechende Dateierweiterung. Jetzt, wo ich die Indexseite habe, all diese anderen Seiten, kann ich sie wirklich benennen, was ich will. - Ein paar Dinge zu beachten ist, dass Sie keine Sonderzeichen setzen wollen. - Setzen Sie keine Ausrufezeichen auf Symbole, Fragezeichen und solche Dinge, weil er tatsächlich eine reservierte Bedeutung in einer Website-URL hat, also werden wir keine seltsamen Symbole verwenden wollen. - Insgesamt wollen Sie nur Buchstaben und Zahlen verwenden, Groß- oder Großbuchstaben und Zahlen. Wir wollen nicht wirklich Leerzeichen zwischen unseren Dateinamen setzen, zum Beispiel, wenn ich diesen einen Schuhkatalog nennen wollte, würde ich ihn nicht Shoe Space nennen Wir wollen nicht wirklich Leerzeichen zwischen unseren Dateinamen setzen , , zum Beispiel, zum Beispiel, wenn ich diesen einen Schuhkatalog nennen wollte, Katalog weil das später mögliche Fehler verursachen könnte -, - Wenn wir zwei Dinge verknüpfen, - wäre das Beste, was zu tun wäre, entweder Bindestrich, - Schuh, - Bindestrich Katalog oder Unterstrich Schuh Unterstrich Katalog so sind vollkommen in Ordnung. - In diesem Fall. - Ich rufe diesen Aktenkatalog an. - Das wird gut genug sein, damit wir das retten. - Und jetzt habe ich zwei Akten hier, und jeder hat einen Tab. - Das hier heißt Index, und dieser Typ heißt Katalog. - Okay, also mal sehen, ob ihr euch die Akte merken könnt. - Also zögern Sie nicht, diese erste Datei zu rufen, die wir immer an der Spitze jedes HTML-Dokuments setzen . - Was es tut, ist, dass es dem Browser mitteilt, welche Version von HTML verwendet wurde, - so zögern Sie nicht, die Antwort zu rufen. - Das ist richtig. - Dieses erste Tag heißt DOC-Typ. - Und wie sagen wir, dass dies ein HTML fünf Dokument ist? - Wir sagen einfach doc-Typ html genau so. - Okay, - dann brauchen wir eine Reihe von öffnenden und schließenden Tags, um dem Browser zu sagen, dass dies ein HTML-Code zwischen diesen öffnenden und schließenden Tags ist. - Also verwenden wir das HTML-Tag und dann innerhalb, - was sind die beiden Hauptabschnitte jeder HTML-Seite? - Das ist richtig. - Die 1. 1 ist der Kopf. - Dies ist der erste Teil der HTML-Seite, - und der nächste ist der Körper so. - Und ihr habt wahrscheinlich bemerkt, dass ich in Denning bin. - Immer wenn ich ein paar andere Elemente innerhalb eines Elements wie dieses platziere, drücke ich immer Tab in Dent so. - Ähm, - jetzt ist das für den Browser nicht notwendig. - Dem Browser ist es egal, ob Sie den Code so machen. - In der Tat, - Sie könnten sogar den ganzen Code auf eine Zeile im Browser setzen würde immer noch alles rendern - weil der Browser nur besorgt über diese Beziehung von dem, was in was ist und - welche Tags sind um welchen Inhalt. - Aber was ich tue, ist eine Best Practice. - Ich mag es, in Schulden, wenn ich nisten oder ich in ein anderes Element wie dieses gehe, - und das macht einen Code viel lesbarer und leicht zu sehen, diese Beziehung dessen, was drin ist - wovon? - Ok, - großartig. - So haben wir auch ein Element gelernt, um den Titel der Seite so gut zu setzen, dass es sagen wird - Titel Um und dieser wird einen ähnlichen Titel wie der letzte haben. - Gehen wir weiter und nennen das einen Z H W Schuhe. - Und was haben wir, bevor wir geschrieben haben? - Schnäppchenschuhe? - Großhändler auf dieser Seite ist die Katalogseite, also werde ich einfach voran gehen und das Wort Katalog so schreiben. - Und dann vergessen Sie nicht, das Titelelement so zu schließen. - Wir werden sehen, weniger als Symbol Schrägstrich Titel, um das aus und dann innerhalb des Körpers zu schließen, - das ist der sichtbare Bereich der Webseite. - Wir setzen hier ein H ein, das sagt, E h W und wir setzen eine Unterposition sagt Schuhe. - Hoppla. - Es fängt an, ein wenig albern zu tippen. - Ok. - Und dann drinnen, vielleicht haben wir noch einen Absatz mit, wie, - Füllstoffinformationen platzieren. - Ihr erinnert euch, wie Zehe den Ort Füller Text hinzufügen. - Natürlich, - Sie könnten Ihren eigenen Absatz eingeben, wenn Sie über einen Absatz über die erzählen möchten - Schuhkatalog wird voran gehen und einfach zu Tools Snippets gehen, - und wir werden in einem Warm-up werfen. - So ein Schnipsel, und ich mache nicht nur die Einfüllsteuer cool. - Gut zu gehen. - Lasst uns etwas über einen anderen Text lernen, den wir hier einfügen können. - Lass uns weitermachen und eine Liste erstellen. Also mache ich hier einen kleinen Kommentar, und wir werden nur sagen, dass dies eine Liste ist, und die Art der Liste, die diese ist, heißt sie - auf einer nordischen Liste. - So gelegentlich haben Sie die Notwendigkeit, Ah zu erstellen, - eine Liste von Elementen und vielleicht Gegenstände, die in keiner bestimmten Reihenfolge sind. - Vielleicht so, - zum Beispiel, - sagen, - Stellen wir uns vor, dass wir wie ein Archiv für unsere Schuhe erstellen, so dass Sie alle suchen können - die Schuhe. - Also vielleicht werde ich zuerst eine Überschrift dafür erstellen, - und wir gehen voran und sagen Schuharchiv, - und dann wollen wir um, - nur eine Liste von Artikeln erstellen , die alle Schuhe für ein bestimmtes Jahr darstellen werden -. - Ich mache einen anderen, der hier für das Jahr eine Unterposition macht. - Eigentlich, - wir gehen weiter und sagen, - um 2013 wie dieser Schrägstrich h drei. - Okay, - also um eine nicht geordnete Liste zu erstellen, - was ich tue, ist, dass ich ein bestimmtes Tag namens UL Tag UL benutze, das für eine Nord fehlerhafte Liste steht, - und es schließt so. - Schrägstrich UL. - Okay, - und dann gehen wir weiter und gehen in das UAL-Tag hier. - Und jedes Listenelement hier, - wie dieses, - erfordert, dass wir ein anderes untergeordnetes Element darin setzen. - Wir nisten. - Ein weiteres Element darin namens El. - Ich würde zufällig für Listengegenstand. - Also hier können wir ein paar verschiedene Listenelemente setzen. - In diesem Fall, - werden wir all die anderen setzen. - All die verschiedenen Monate für dieses Jahr werden eine Liste sein. - So werden wir sagen, dass dies für Dezember sein wird und eine weitere Liste hier machen wird. - Machen Sie nur ein paar Monate. - Wir müssen es nicht machen. - Alle werden sagen, das ist für November, also wird das irgendwie wie unser Blawg-Archiv mit all den verschiedenen Schuhen sein. - Lassen Sie uns ein anderes Listenelement hier erstellen wird ein anderes Listenelement sagen. - Hier ist der Monat für den Monat Oktober. - Ok, - großartig. - Also lassen Sie uns gehen und speichern Sie das und dann kommen wir zurück zum Browser und wir haben die - Index-Seite hier geöffnet und wir haben noch nicht mit unseren Seiten verlinkt. - Also, was ich tun muss, ist, - wenn ich die Katalogseite sehen will, müssen Sie sie in den Browser ziehen. - Also gehe ich zurück zu der Akte namens Katalog, und wir können das hier einfach per Drag & Drop ablegen. - Cool, damit wir sehen können, gibt es die Katalogseite und die Indexseiten separate Registerkarten dort. - Okay, - also für diese Seite, - die, - äh, - die Katalogseite hier haben wir das Schuharchiv, - das ein Jahr hat und dann jedes Jahr Listenelemente haben wird, damit Sie hier sehen können, wann wir - das UL, - kennzeichnen Sie es dicht und schafft eine Kugel für jedes L I, - das ist Listenelement. - Wir haben Dezember, - Oktober, - November. Okay, also gehen wir zurück in den Code und lassen Sie uns ein paar andere Dinge sehen, die wir mit Listen hier machen können. - Stellen wir uns vor, wir wollen eine weitere Liste innerhalb von hier verschachteln. - Also sagen wir, - zum Beispiel, - wenn sie auf Oktober so etwas klicken, - wir wollen eine andere Liste darin anzeigen So manchmal haben wir die Notwendigkeit, Ah sub zu erstellen - Liste der Elemente, die mit dieser Liste zusammenhängen Artikel. - Also, was wir tun werden, ist das Listenelement so zu öffnen und hinein zu gehen und wir können - tatsächlich eine andere auf geordnete Liste erstellen, wenn wir das mögen. - Also werde ich einfach voran gehen und sagen, - Schrägstrich ul und ich nisten. - Nur ein klar sein und zeigen, dass dies alles innerhalb dieser Liste Artikel für Oktober und innen - Oktober. - Wir machen einen Unterlistenartikel für verschiedene Tage. - Ich werde nicht jeden Tag im Monat tun, nur ein paar tun, um Ihnen die Idee zu geben, also sagen wir -. - Oh, - wenn wir auf Oktober klicken, - wollen wir auch ableto klicken und beziehen sich auf Schuhe für dieses besondere Datum im Oktober. - Also sagen wir, dass es einen Listeneintrag für den 17. Oktober und einen anderen hier für den - 18. Oktober gibt. - Okay, - so schafft das auf der bestellten Liste. - Mal sehen, was dort im Browser passiert ist. - Wenn ich zurückkomme und mich erfrischen, können wir sehen, was passiert. - Es gibt wir weiter in Denning, - und jetzt, - statt gefüllter fester Schusspunkte. - Diese Unterliste für den 17. Oktober 18. Oktober haben diese offenen Lippen hier. Okay, also 2013 hat Monate darunter, und dann kann dieser Monat sogar bestimmte Tage haben. - Dies ist also ein gutes Beispiel für einige Inhalte, die Sie verwenden könnten, - äh, - angemessen, - mit einer nicht geordneten Liste auf Bestellung. - Das könnte auch Dinge wie eine Lebensmittelliste sein. - Sie könnten verschiedene Arten von Obst oder Fleisch, die Sie wollen, dass die Menschen in einem Rezept verwenden. - So etwas. - Wenn es etwas ist, das nicht in einer bestimmten Reihenfolge passiert, - wo Sie keine Nummerierung wie 1234 und Ihre Inhalte brauchen, nur um einen Aufzählungspunkt zu haben, - können Sie dieses ul Element verwenden. - Ok, - großartig. - Es gibt also auf der bestellten Liste. - Lassen Sie uns reingehen und einen Blick auf eine andere Art von Liste werfen, die in einer Situation ist, in der Sie wollen, dass sie bestellt wird, damit wir eine geordnete Liste erstellen können - hier, - okay , - unten, - also machen wir eine andere Bestellliste. , Nehmen wir an, wir wollten eine Liste für Top-Marken erstellen, also mache ich hier einfach eine weitere Überschrift, und ich sage Top-Marken, nur um einen Text über der Liste zu machen, und wir schließen das Level 3 aus. dorthin zu fahren. Okay, um eine geordnete Liste zu erstellen, ist es eigentlich das gleiche wie die A Norden Liste. - Außer dass anstatt UL zu verwenden, um eine unveränderte Liste zu erstellen, - verwenden wir ol, um eine geordnete Liste so zu erstellen. - Und geordnete Listen sind auch mit Listenelementen gefüllt, die jedes einzelne Stück der Liste aufteilen . - Also machen wir einfach ein paar gefälschte Firmen oder gefälschte Marken sagen, Bradley, Bradleyund Brown werden der Name einer Marke sein. gefälschte Firmen oder gefälschte Marken sagen, , Bradley - Wenn Sie das und für Sand-Symbol anstelle eines nd verwenden möchten, können Sie Verschiebung in der Zahl - sieben wie das jetzt, das wird rosa und der Code erhaben Texas uns wissen lassen - dass in diesem Fall für das Symbol, - es würde am besten geeignet sein, etwas namens HTML Fragezeichen zu verwenden, das - repräsentiert dies So können wir das tun, indem wir sagen und Symbol, - und dann in einige Limbert einige Buchstaben oder Zahlen, die darstellen, dass Sie fragen - Zeichen so werden wir sagen, - und so einen MP Semikolon. - Dies ist ein spezieller Begriff hier, der sich auf das Symbol und im HTML-Code bezieht. - So könnten Sie neugierig sein, was es sind diese anderen fragenden Symbole, die verfügbar sind, - und woher weiß ich, was für sie zu tippen? - Wenn Sie zu Ihrem Browser gehen und wir können ein weiteres Fenster hier öffnen und wir werden einfach eingeben - HTML, - fragen Sie E. - Das ist ein S C I I es kommt mit diesen verschiedenen Codes und Referenzen. - Das ist ein Tisch. - Und, - ähm, - Sie können hier sehen, dass, - zum Beispiel, - um dieses doppelte Anführungszeichen wie dieses zu schaffen, - wir können sagen und qu ot Semikolon und es wird dieses Zeichen erstellen, - Sie können auch sagen und Pfund Symbol 34 ist ein numerischer Code, der dafür funktioniert. - Es gibt verschiedene Möglichkeiten, wie Sie diese Jungs dazu bringen können, die meisten dieser Luft zu bringen. - Ziemlich üblich. - Du könntest sie einfach aus Text kopieren und einfügen, - wie einfach nur dein Tempo kopieren und einfach so, - oder finden, - wissen Sie, - mit deiner Tastatur, um sie auszutippen. - Allerdings, - es gibt einige bestimmte spezialisierte Schlüssel, für die Sie die fragenden Zeichen benötigen - lassen Sie uns nach unten scrollen und ein paar finden, die vielleicht ein bisschen anders sind. - Ähm, - zum Beispiel, - das ist, wissen Sie, - Sie müssen vielleicht machen, - wie das Symbol für Pfund oder Euro, - um, - oder eine andere Abgrenzung. - Das hier ist wie ein kleines Fragezeichen in einem Diamanten. - Einige davon sind Symbole in der Mathematik, - und Sie können sogar Akzentzeichen sehen, die auf einer bestimmten Sprache basieren. - So hier können Sie verschiedene Zeichen sehen, die viele und NBAs, - um in verschiedenen Arten von Akzenten, die für verschiedene Sprachen verwendet werden. - Hier haben Sie andere Dinge, - wie das registrierte Symbol. - Also, wenn Sie die registrierte einfache erstellen möchten, können Sie tun und RG Semi Doppelpunkt. - Es gibt auch Dinge wie Urheberrecht, - das ist und kopieren, - die einen Blick auf ein wenig später werfen. - So fragen Charaktere sind nett, wenn Sie die Notwendigkeit haben, spezielle Symbole zu erstellen, - so schafft dies eine Art wie ein wenig stilisiert und Symbol dort, das attraktiv ist. - Das ist also eine unserer Marken. - Sie werden feststellen, dass ein Unterschied zwischen der A Norden Liste und der geordneten Liste ist, wenn ich - die ol Tags für die geordnete Liste verwendet. - Wir bekommen hier eine Nummer statt einer Kugel. - Okay, also gehen wir weiter und machen weiter. - Lasst uns ein paar andere Listengegenstände hier schreiben. - Ich mache nur noch ein paar mehr, damit du sehen kannst, wie diese Bestellung bestellt werden, also machen wir uns noch ein paar andere Marken - Namen. - Ich werde Sampson Travelers sehen. - Es ist wahrscheinlich eine gute Idee, dass ich bei meinem Job bleibe und ich nicht versuche, Markennamen zu finden, also machen wir hier einen anderen. - Wir sagen nur Kitsch. - Groove ist eine weitere Top-Marke, die wir so verkaufen. - Ok, - genial. - Gut zu gehen. - Hier sind die Top-Marken 12 und drei. Das Schöne daran, geordnete Listen zu verwenden, ist, dass, wenn wir unsere Meinung ändern und wir wollen - einen anderen Brandon hier stecken, - zwischen Samson und Travelers, - es wird einfach wieder Nummer für uns automatisch. - Ok, - großartig. - Also diese Luft einige Textelemente, die für Sie nützlich sein werden. - Ich werde dir nicht jedes einzelne HTML-Element beibringen, aber ich möchte nur, dass du diese Hochfrequenz-Elemente kennst, um loszulegen. - Diese Luft diejenigen, von denen Sie eine Menge Nutzen bekommen, - und ich ermutige Sie, durch zu gehen und überprüfen Sie die bereitgestellten Handzettel in den Links, die - alle Ort, - um, - alle Beiträge für das Lernen mawr HTML-Elemente. - So gibt es Dutzende und Dutzende von HTML-Elementen, - und es wird gut für Sie sein, sich mit den verschiedenen Möglichkeiten vertraut zu machen, wie - Sie können Inhalte im Browser beschreiben. 6. Bilder: - Nun, - ein paar weitere Elemente, die ich denke, wird wirklich gut für uns zu lernen, direkt aus der - Fledermaus sind zusätzlich zu Stil izing Text. - Wir möchten auch lernen, wie man Links in Bildern erstellt. - Also gehen wir weiter und springen zurück zur Indexseite hier. - Und sagen wir, wir wollen einen Ort, - ähm, - ein Bild hier, um die Stimmung unserer Website zu repräsentieren, um unser Logo jedes Bild zu zeigen. - Also habe ich schon ein Bild für uns erstellt , Intro-Pic genannt wird, und wir werden das auf die Seite der Seite platzieren und es darunter platzieren. dass wir wollen, dass dieses Bild zu gehen - darunter sind Überschrift, - aber vor dem Absatz. - Also werde ich einfach etwas Platz im Code öffnen, um das zu tun, jetzt, genau wie die anderen Elemente hier spezifische Tag-Namen haben. - H eins und H zwei und P Bilder haben auch ihre eigenen spezifischen Tag, das Sie jetzt ein Bild verwenden müssen - sieht so aus. - Ich m g. - Jetzt hat das Bild-Tag keinen schließenden Tag-Namen. - Es fängt einfach so an. - Ich m G so und dieses Bildelement selbst, wenn Sie es einfach auf dem Bildschirm platzieren. - Der Browser weiß jetzt, dass wir ein Bild dort platzieren wollen, aber es hat keine Ahnung, welches Bild wir dort laden wollen. - Also müssen wir ihm eigentlich sagen, welches Bild wir jetzt laden wollen. - In HTML, - können Sie Optionen übergeben, um Elemente zu ändern und zu ändern, indem Sie ein Attribut namens - in das öffnende Tag einfügen. - Nun, - Attribute werden nie in den schließenden Tags gesehen. - Das schließende Tag ist immer nur ein Schrägstrich und eine Wiederholung von dem, was auch immer der Name des öffnenden Tags war - so. - Aber innerhalb dieser öffnenden Tags waren frei, Optionen und oder Attribute zu setzen. Um dem Browser zu sagen, wo sich dieses Bild befindet, werden wir weitermachen und ein Leerzeichen hinter dem Namensbild setzen müssen. - Und wir werden das Attribut S R. - C verwenden. - SRC steht für Quelle, die ihm den Quellort des Bildes und die Art und Weise, wie wir es mit einem Wert versorgen, während wir das gleiche Symbol und Anführungszeichen verwenden, um den Wert zu umgeben. - Also dieses Ding hier, das in dieser Öffnung ich bin G Tag ist, wird eine Option genannt, - und dieser Teil wird hier der Attributname genannt. - Und hier werden wir den Wert platzieren, die Position des Bildes ist, das wir laden möchten. Wann immer ich ein Bild laden möchte, muss ich Detektivarbeit erledigen. Wann immer ich ein Bild laden möchte, - Ich muss im Grunde der Datei bewusst sein, in der ich gerade bin, - die ich gerade in der Indexpunkt-HTML-Seite bin und ich möchte ein Bild laden. - Aber ich muss sehr spezifisch für den Browser sein. - Der Browser ist nicht sehr schlau, - und wir müssen ihm genau sagen, wo diese Bilder, - und wir müssen ihm Orte aus der spezifischen Datei geben, in der wir gerade sind. - Wir sind jetzt auf der Indexseite. - Stellen wir uns für einen Moment vor, dass wir auf dieser Indexseite stehen. - Stellen Sie sich vor, Sie sind zwei Meter sind hier auf der Indexstudien TML Seite gepflanzt, - und wenn Sie sich umsehen, - was sehen Sie? - Sie sehen, dass es eine andere Seite namens Katalog gibt und Sie sehen, dass es einen Ordner namens „ Bilder“ gibt, aber wir können nicht in diesen Ordner sehen, es sei denn, wir gehen hinein. - Stellen Sie sich vor, Bilder sind wie ein Gebäude in diesem Sinne. Also müssen wir durch die Tür dieses Gebäudes gehen, die Bilder genannt werden, und das ist, als würde man die Mappe öffnen. - Jetzt, da wir uns im Ordner „Bilder“ befinden, können wir jetzt all diese Bilder sehen, zu denen wir einen Link wünschen. - Das erste, was ich tun muss, ist, dass ich dem Browser sagen muss, dass er in den Bilderordner gehen soll - damit er darin sehen kann. - Also, um das zu tun, - schreibe ich den Namen des Ordners. Ich sage Bilder, und dann mache ich einen Ford Slash und jetzt sind wir in diesem Ordner. - Lassen Sie uns einen Kommentar schreiben, um sich daran zu erinnern, dass so jedes Mal, wenn wir einen Ordnernamen Schrägstrich sagen, - dies ist das Äquivalent zu gehen in den Ordner. - Nun, - was, wenn ich außerhalb eines Ordners gehen will? - Das Gegenteil von dieser Situation ist, wenn ich einen Ordner verlassen möchte, - Ich kann Punkt sehen, - Punkt, - Schrägstrich so Punkt Punkt Punkt Schrägstrich ist das Äquivalent zu gehen außerhalb des Ordners, - der aktuelle Ordner, in dem Sie sich befinden, - Richtig? - Okay, - so dass diese Luft wirklich die einzigen zwei Dinge, die Sie wissen müssen, um zu navigieren oder den Browser zu sagen - wie man von der aktuellen Datei zu navigieren. - Du bist auf einer anderen Datei oder einem anderen Ordner. - Also wollen wir sagen, - Hey, - Browser. - Ich möchte ein Bild erstellen. - Also verwenden wir I m g. - Und dann setzen wir ein Leerzeichen und wir sagen, - Und übrigens, - dieses Bild befindet sich im Bilderordner, - Bilder Schrägstrich und die Datei, die wir eine Last wollen, heißt Lassen Sie uns schauen, nur um sicherzustellen, dass wir - haben den richtigen Namen heißt Intro Pic, - nicht J. - Peg. - Das ist also Groß- und Kleinschreibung. - Ich muss es genau das gleiche buchstabieren, was es unterstreicht. - Also muss ich sagen, Intro Unterstrich Pick Dot j Peg so und das wird das Bild laden - da. - Okay, - Nun, - es gibt eine andere Option, die wir immer innerhalb eines Bildelements einschließen wollen. - Und das ist etwas alternativer Text. - Und wir verwenden das Attribut Ault lt, um ihm einen alternativen Text jetzt für den alternativen Text zu geben. - Wir gehen Teoh, stimmt's? - Etwas, was ich sagen werde, - äh, - Logo-Bild. - Es zeigt einen Mann mit gekreuzten Beinen, also gebe ich hier eine Beschreibung des Bildes. - Okay, also was ist das, äh, - alter Text hier? - So erfüllt der gesamte Text ein paar sehr wichtige Funktionen. - Nummer eins, - wenn Sie Bild Link ist kaputt. - Wenn dies aus irgendeinem Grund falsch geschrieben ist und die Bilder nicht im Browser erscheinen, - dann wird diese ganze Steuer an seiner Stelle in den meisten Browsern erscheinen. - Wenn also der Bildlink kaputt ist, können die Leute wenigstens lesen, was sie dort gesehen haben sollen. - Welches ist? - Es ist ein Logo, das einen Mann mit überkreuzten Beinen zeigt. - Eigentlich, - das ist nicht zu groß von einer Beschreibung. - Vielleicht könntest du raufkommen. - Wir könnten uns später etwas Besseres einfallen lassen. Aber jedenfalls geben wir geben wireine einfache Beschreibung dieses Bildes. - Okay, - Also dieses Introbild zeigt diesen Inhalt den anderen. - Die andere Sache, für die der gesamte Text sehr wichtig ist, ist für Suchmaschinen. - So Suchmaschinen, - sie haben keine Augen, - sie können das Bild des Bildes nicht wirklich sehen. - Aber sie können den ganzen Text lesen, - und das wird für die Suchmaschine hilfreich sein. - Nun, - das Letzte, was und wahrscheinlich das wichtigste von all diesen Dingen ist, dass, wenn ich eine - Person bin , die sehbehindert ist oder ich blind bin oder einige Probleme haben, im Internet zu sehen. - Was ich tun kann, ist, dass ich einen Leser installieren kann. - Und der Screenreader, - der heutzutage in den meisten Browsern eingebaut ist, - wird tatsächlich den Text der Webseite lesen, der der Person erlaubt ist, die auf der Website surft . Wenn ich also Probleme hatte, das Bild zu sehen, dann wird der Browser-Leser diesen Text lesen. - Für mich, - es würde sagen, laut Logo-Bild zeigt einen Mann mit gekreuzten Beinen. - Okay, - also gehen wir weiter und speichern dieses Bild und lass uns zurückkommen und diesen Kerl im Browser ansehen . - Also dieser ist auf der Index-Seite, - das ist Index dot html. - Wenn Sie das nicht in Ihrem Browser haben, müssen Sie diese Datei möglicherweise aus Ihrem Ordner ziehen. - Okay, - da gehen wir, damit wir unsere Bilder sehen können, die dort erscheinen. - Also haben wir einen Header erstellt. - Da ist mein H. - Hier ist mein Alter zu Hier ist mein Absatz Text, - und hier ist mein Bild, - mit meinem I M G Tag. - Also, das ist ein guter Anfang. - Schauen wir uns einige andere Dinge an, die wir dem Bild hier hinzufügen können. - Ähm, - das waren einige andere optionale Dinge, die Sie innerhalb dieses Bild-Tags hinzufügen können. - Wir können auch etwas namens Titel hinzufügen und Titel wird angezeigt, wenn wir den Mauszeiger über das Bild bewegen. - Lassen Sie uns eine Nachricht hinterlassen. - Wenn jemand darüber schwebt und das optional ist, müssen Sie dieses Jahr nicht haben. Ich werde sagen, Willkommen in den H W Schuhen, so was. - Viele Tippfehler heute und dann gehen wir weiter und speichern das, - und wir werden wieder in den Browser kommen und so sofort aktualisieren. - Ich sehe das nicht den Titel, aber sieh mal, was passiert, wenn ich mit der Maus schwebe und sie dort lasse? - Es bringt eine kleine Bildunterschrift auf sich. - Es sagt Willkommen in den H W Schuhe, - so können Sie oder nicht wollen, dass es, - aber Sie haben die Fähigkeit, hinzufügen, dass mit Titel, - Menschen oft fügen diese Titel, - Zehenlinks oder Bilder mawr Informationen zu geben darüber, wohin dieses Bild verlinken könnte. - So, - zum Beispiel, - Sie könnten Symbole haben oder vielleicht, - zum Beispiel - soziale Netzwerke Symbole, - und Sie können einen Titel hinzufügen, so dass, wenn Sie den Mauszeiger über das kleine F für Facebook, - es wird sagen, - Folgen Sie unserem Besuch Facebook-Seite. - Sie können das kleine T haben, - also, wenn Sie über es schweben, sagt Folgen auf Twitter. - So etwas. - Ok, - Ein weiteres gemeinsames Attribut, das die Leute hinzufügen. - Das ist eine gute Idee für Bilder ist, dass Sie die Breite und Höhe des Bildes jetzt standardmäßig hinzufügen können . - Es hat Party gemacht, dass das, äh, - es hat das bereits eingerichtet, um die richtige Breite und Höhe zu haben, - aber ich kann tatsächlich die Anzahl der Pixel des Bildes hier einfügen. - Und das wird gut sein, wenn sich das Layout ändert. - Weil, - zum Beispiel - sagen wir, dass dieser Bildlink kaputt ist oder die Bilder fehlen, - dann naja, - eigentlich, - lasst uns voran gehen und zeigen, dass, wenn ich dies zusammenbreche, wenn ich das Meer zu einem X, - und ich habe das Bild absichtlich dort falsch geschrieben, - das wird tatsächlich das Bild brechen, - und es wird den Inhalt um es herum ändern. - Also, wenn ich das aktualisiere, - dann kollabiert es und dieser Inhalt bewegt sich nach oben. - Wenn ich hier in Höhe und Breite in das Bild einfügen würde, das dann das Bild aufnehmen lässt - die Größe, die es sein soll. - Also, wenn du das überprüfen willst. - Sie können zum Bild selbst gehen. - In Windows, - können Sie mit der rechten Maustaste klicken und Eigenschaften auf Mac speichern. - Sie können gehen, um Informationen zu bekommen, - und es sollte Ihnen Informationen über das Bild sagen. - Also in diesem Fall, - es sagt mir, die Abmessungen des Bildes sind 9 20 mal 500. - Eigentlich ein ziemlich großes Bild . - Für die Intro-Seite s Oh, - das ist mit 9 20 so und Höhe von 500. - Also ist dieser Linkname immer noch kaputt. - Ich habe es absichtlich falsch geschrieben. - Es wird zurückkommen und erfrischen, - und wir können sehen, wie der ganze Texas erscheint. Ihr Logo-Bild zeigt einen Mann mit gekreuzten Beinen - und wir sehen diese kleine gebrochene Bild-Symbol, die niemand wirklich gerne sieht. - Also lasst uns das reparieren. - Aber Sie können sehen, die erhöhte mit verhindert, dass sich das Layout so ändert. - Also ändern wir das wieder zu Intro-Pic wie das, was der richtige Weg ist, es zu schreiben. - Sie können unser Bild wieder da drin sehen und ein schönes kleines Sprühlack-Logo. - Alles klar, das ist ein guter Anfang. - Jetzt, - später, - werden wir eine reaktionsfähige heraus bauen, so dass dieses Bild in der Größe skaliert wird - je nachdem, ob wir es auf einem Desktop oder Tablet oder einem mobilen Gerät betrachten. - Also werden wir am Ende diese Höhe und Breite mit CSS etwas später angeben, damit wir es flexibel machen können . Aus diesem Grund, und aus diesem Grund, Onley, werde ich die Breite und Höhe von diesem Bild vorerst entfernen. - Aber ich wollte nur, dass ihr wisst, dass das noch einige andere Attribute sind, die ihr dort eintragen könnt . - Ok, - So toll. - Wir wissen, wie man Überschriften erstellt. - Wir jetzt, um Absätze zu schaffen, - wir wissen, wie man eine nicht geordnete Listen und geordnete Listen erstellt. - Ähm, - wir wissen auch, wie man Kommentare und Medien auf der Seite erstellt. 7. LINKS: - Jetzt gehen wir zum Erstellen von Links. - Links ermöglichen es unseren Nutzern, zwischen den Seiten zu navigieren. - Also gerade jetzt haben wir nur die Indexseite hier, die unsere Homepage ist. - Und wir haben auch diese Katalogseite. - Ich denke, wir werden noch ein paar Seiten erstellen. - Lassen Sie uns tatsächlich drei weitere erstellen, - und dann werden wir alle Seiten bereit haben, für den Rest unserer Website auf zukünftige Übungen zu gehen -. - Also lassen Sie uns voran und gehen Sie einfach zu Datei und wir werden eine neue Datei sagen und das wird eine - berechtigte Datei erstellen . - Wir gehen weiter und speichern das, - und wir werden sicherstellen, dass dies innerhalb unseres Site-Ordners gespeichert ist und wir möchten diese - nächste Datei aufrufen . - Ich nenne das hier. - Kontakt ist gestorben. - HTML. - Das wird unsere Kontaktinformationsseite sein, - und ich werde sagen, - speichern Sie so, - um, - damit wir anfangen können, die grundlegende Dokumentstruktur auszuschreiben, - an die Sie sich erinnern werden vorherigen Seiten. - Hier haben wir DOC Typ HTML Kopf und das Body-Tag etcetera eso für diesen einen, - ich werde euch zeigen, einen Trick, den ihr tun könnt. Obwohl es eine gute Übung ist, wenn du anfängst, alles auszutippen, dann wirst du dich daran erinnern. - Wenn Sie zu dem Punkt kommen, Sie zu dem Punkt kommen,an dem Sie sich wohl fühlen, denken Sie daran, Sie sind zuversichtlich, dass Sie sich an all diese Tags erinnern, die die grundlegende Dokumentstruktur bilden. - Du kannst immer solche Dinge benutzen, die Werkzeuge hier oben . - Du kannst zu Snippets gehen. - Und wenn Sie auf das erste Snippet klicken, das html sagt Schauen Sie sich das an. - Es legt eine Menge von diesen Tags für mich fest. - Ich könnte hier reinkommen und dann den Titel eintragen. - Und das hier ist die Kontaktseite sah genau richtig Kontakt so. - Okay? - Und wir haben auch über das DOC-Typ-Tag an der Spitze gelernt, - nur eine kurze Überprüfung dort. - Also, - Doc-Typ HTML ist der externe fünf Doc-Typ. - Es gibt ein paar andere Dinge, die wir einhalten können, die auch dem Browser helfen. - Lassen Sie uns über ein Attribut sprechen, das wir innerhalb dieses öffnenden HTML-Tags platzieren können , so dass wir hier eine Sprache wie diese angeben können. - Wir können e en für Englisch sagen, - Um, - und wenn Sie daran interessiert sind, alle Sprachcodes zu kennen, - zum Beispiel , - ja , - für Spanisch, - fr für Französisch usw. - Sie können voran gehen und die nachsehen. - Sie können Google, dass, wenn Sie Google um HTML legen Eis. - Also habe ich Codes. - Ich so Codes wird es mit einer großen Liste von verschiedenen Sprachen kommen. - Sie können eine andere Sache überprüfen, die für den Browser schön ist. - Abgesehen davon, es zu erzählen, - wissen Sie, - die Version von HTML, - über die wir vorher gesprochen haben, - und ihm eine Sprache für den Hauptinhalt auf der Seite zu geben. - Wir können auch ein Meta-Tag erscheinen hinzufügen, - und Meta-Tags enthalten oft Informationen für Browser und Suchmaschinen. - In diesem Fall, - was wir tun werden, ist, dass wir ein weiteres Tag namens Meta mit einem Tribut von - Zeichensatz geben . - Und wir werden es sagen, dass die Textzeichen, die wir dem Browser sagen werden alle - Geräte, die diese Seite interviewen, dass diese Textzeichen auf der Seite utf acht und - codierte Textzeichen sind . - Das ist also die bevorzugte HTML fünf Art der Einrichtung heute Abend, um irgendwie eine leere Seite zu haben . , Ich werde voran gehen und die Dinge,die auf jeder Seite gleich sein werden wie bei allen unsere anderen Seiten haben wir Überschrift und wir haben auch die Unterüberschrift waren Schuhe, glaube ich. - Und dann hatten wir, - wie, - einen Absatz. - Es wird also ein paar verschiedene Dinge auf jeder dieser Seiten geben. - Dies ist die Kontaktseite in, - und zukünftige Übungen werden tatsächlich in einem Kontaktformular hier platzieren und ein eingebettetes Google - Karten von Menschen können den Standort des Unternehmens und Dinge wie das sehen. - Aber für jetzt, - wir werden nur einen Absatz erstellen und wir werden nur etwas darin schreiben, nur so können wir - sehen eine Änderung von Seite zu Seite sah genau richtig, - Kontakt hier. - Und das wird vorerst funktionieren. - Ich werde diese Seite speichern. - Wir können diese Seite ein paar Mal duplizieren. - Ich gehe zur Akte, und ich werde nur sagen, - außer... und ich werde den nächsten anrufen statt Kontakt. - Warum sparen wir das nicht als Preis? - Also haben wir auch eine Seite. - Es wird eine Art Preisdiagramm sein. - Wir fügen eine Tabelle in diese Seite ein und später Übung. - Also heißt es nicht, Preise und sparen Sie das und für die Preisgestaltung, wir werden hier ein paar Dinge ändern. - Nun, - wir werden das Wort Preisgestaltung hier in den Titel schreiben und nur damit wir die Änderung auf jeder Seite sehen können - Enologe Recht, - Preisgestaltung im Absatz hier und speichern Sie das. - Und mal sehen, - wir haben eine weitere Seite wird eine Datei speichern als tun, - und wir gehen voran und duplizieren diese Seite als auch. - Nennen wir das einen Umsatz. - Das wird eine Seite. - Es wird ... wir werden alle Verkäufe für unsere Website auflisten. - Also hier geht voran und ändert dies zu sagen, zum Verkauf für das und wird sagen, wie, - um, - Umsatz hier für den Absatz, nur damit wir eine Änderung sehen können, wenn wir zwischen den Seiten navigieren - und wieder, - werden wir später mehr Inhalte hier rein. - Das wird gerade genug sein, um uns anzufangen. - Okay, also sind die alle gerettet. - Gehen wir zurück zur Indexseite hier. - Ich klicke einfach auf Index. - Du wirst es in erhabenem Text bemerken. - Wenn Sie einfach auf eine Datei klicken, wird es diese Datei ändern. - Und wenn Sie doppelklicken, - wird es tatsächlich eine zusätzliche Registerkarte für die Datei öffnen. - Normalerweise arbeite ich auf der Baustelle. - Oft gehe ich einfach durch und doppelklicke auf jede der Dateien, die ich zu arbeiten beabsichtige - mit so. - Und dann kann ich zwischen all diesen Registerkarten hier oben wechseln, was irgendwie nett ist. - Sie könnten diese sogar per Drag & Drop bewegen. - Eine weitere coole Sache, die Sie tun können, ist, dass Sie den Bildschirm teilen können. - Zum Beispiel, - auf Mac, - Sie können dio Befehlsoption und dann eine Zahl und die Zahl, die Sie oben auf der Tastatur treffen -. - Die Tastatur bestimmt, wie oft sie sich teilt. - Also, wenn ich die Befehlsoption sage, wird es den Bildschirm in zwei teilen, - und das erlaubt mir, - um, - diese Tabs von einer Seite zur anderen zu ziehen - um, , so dass ich tatsächlich mehrere Dateien gleichzeitig anzeigen konnte - Zeit, - was irgendwie nett ist. - Also das ist Ah, - Kommandooption, - und dann eine Nummer oben. - Deine Tastatur. - Damit kannst du rumspielen. - Sie können Befehl Option drei tun. - Es wird dreimal die Befehlsoption aufgeteilt, um viermal geteilt zu werden, - obwohl das irgendwie schmal ist, um den Code dort zu lesen. - Aber man könnte sehen, dass man tatsächlich vier verschiedene Dateien in jedem Tab öffnen könnte , was irgendwie nett wäre. - Und wenn du wieder zur Normalität zurückkehren willst, machst du einfach Kommandooption eins. - Also, das ist Befehls-Option auf Mac unter Windows. - Ich glaube, es ist Kontrolloption, aber du musst das vielleicht nachsehen, um zu Ja, weißt du was? Ich gehe weiter, und , ich werde das herausfinden, und ich werde das in der Information unter diesem Video für euch veröffentlichen. - Okay? - Also, - zurück Teoh, - hintere Zehe Links, - obwohl wir es jetzt tun wollen, - wollen wir eine Verbindung zwischen all diesen verschiedenen Seiten. - Also entschied ich, dass ich meine Links direkt darunter leben will. Hier auf jeder Seite zu gehen, wird eine Navigationsleiste haben , , die wir hier platzieren werden . - Und wir werden hier ein paar Links setzen. - Ich schreibe nur einen kleinen Kommentar, den diese Luft verbindet. - Also das spezifische Element, das wir verwendet, um Links zu erstellen, ist ein Ankerelement. - Es benutzt den Buchstaben A so. - Es hat eine Öffnung und ein schließendes A und alles, was Sie mit dieser Öffnung umgeben, und - das Schließen eines Tags wird zum Beispiel ein Link, - wir werden tatsächlich zu dieser Textur verlinken. - Zuerst, - wird einen Text erstellen, der über sagt, und wir werden diesen Text in einen Link verwandeln und durch - um ihn mit diesem ein Tag umgibt. - Also steht ein Ankerlink. - Aber wenn es hilfreich ist, - könnte man auch an das Wort Aktion A für Aktion denken. - Denn was das tut, ist, - ähm, - es schafft eine Aktion, bei der, wenn Sie auf etwas klicken, - es ändert sich in eine andere Seite. - Richtig? - Okay, - Abgesehen von dir, - kein umgebender Text mit diesen Ankern verbindet diese ein Elemente hier, - wir können auch, - ähm, - wir können auch Bilder umgeben. - Also, - zum Beispiel, - dieses Bild hier unten, - wenn ich dieses Bild Toe Link irgendwo wollte, wenn ich darauf klickte, könnte ich diesen Kerl auch mit solchen Tags umgeben. - Dieses spezielle Bild, das ich nicht wirklich daran interessiert bin, dass dieses eine Verbindung überall verlinkt, - Also alle löschen es, - aber nur um Ihnen zu zeigen, dass Sie, - in der Tat, - wissen Sie, - einfach Links drehen können - in der Tat, - wissen Sie, selbst sind Entschuldigung, - Sie können Bilder selbst in den Links drehen. Okay, für diesen ersten Versuch wir diesen Text einfach in einen Link verwandeln, der diesen Text damit umgibt. - Ein Tag sagt einem Browser, dass es ein Link sein soll, - aber wir haben dem Browser immer noch nicht gesagt, wo wir tatsächlich navigieren wollen - es zu springen, wenn wir auf diesen Link klicken. - Um das zu tun, - müssen wir hier eine Option in die Öffnung eines Tags hinzufügen und dieses Attribut heißt H Ref. - Ein Trog steht für Hypertext-Referenz, - Ähm, - oder Hyperreferenz. - Denken Sie daran, - diese Seiten sind HTML-Seiten, - das ist Hypertext-Seiten oder Hypertext-Markup-Sprache Seiten. - Dies bezieht sich also darauf, eine bestimmte HTML-Seite zu referenzieren, wenn das es einfacher macht - erinnern Sie sich an ihre H ref. Okay, was wir hier tun wollen, ist, dass wir den, äh, wir wollen im Grunde dem Browser beschreiben, wo er hingehen soll, und wir müssen das tun, - weißt du, - relativ zur Seite die eingeschaltet waren. - Derzeit sind wir auf der Indexpunkt-HTML-Seite. - Also, wenn ich hierher komme und in meinen Ordner schaue, kann ich sehen, dass ich alles in diesem Haupt-Site-Ordner habe, der HTML heißt - Grundlagen. um Diesmal verlinken wir keine Bilder, also muss ich mir keine Sorgenumden Ordnernamen machen, und es sieht so aus, als ob alle diese HTML-Seiten in der Tat nebeneinander im selben Ordner leben . - Da es nur im selben Ordner hängt, kann ich buchstäblich den Namen der Datei so eingeben. - Jetzt wieder. - Wenn diese Seiten in einem anderen Ordner waren, - könnten Sie den Ordnernamen eingeben, um dem Browser mitzuteilen, in den Ordner zu gehen und dann die - Datei zu finden . - Und wieder, - wenn Sie aus dem Ordner gehen wollten, - Sie könnten Punkt, - Punkt, -Schrägstrich tun - Punkt, - , - was wird, - die den aktuellen Ordner verlassen und nach einer Datei oder einem anderen suchen -Ordner. - In diesem Fall brauchen wir keine von denen zu tun, weil sie nur in der gleichen - Mappe leben . - Großartig. - Das ist also das erste Glied. - Das ist alles, was wir tun müssen, um das eine Zehe Arbeit zu bekommen, und ich werde weitermachen und eine davon erstellen, die eine für jede Seite erstellt. - Das ist H ref. - Du wirst dich daran gewöhnen, das zu schreiben, und ich gehe hier rein und wir schreiben einen Text. Das nächste, worauf wir verlinken werden, ist die Verkaufsseite, Saul, genau richtig zum Verkauf. - Und dann hier, - die eigentliche physische HTML-Seite wollen einen Link zu nennt Sale dot html Einfach so. - Weißt du was? - Ah, hier. Ich nannte es Sale, aber hier heißt es Sales Withins Within , das wird ein Problem schaffen aber hier heißt es Sales Withins, das wird ein Problem schaffen. - Diese Namen müssen genau dieselben sein. - Das wird also die Verbindung hier brechen. Also, wenn ich diesen Verkauf hier nenne, ich sicher, dass ich diesen Verkauf hier drüben anrufe. - Ich denke, was ich tun werde, ist, dass ich mit der rechten Maustaste auf diese Datei klicken und auch umbenennen und dann unten hier unten - unten, - kann ich löschen, dass s und drücken Sie zurück, - und das wird es beheben. - Es ist gut, dass ich das erwischt habe, als ich es tat, weil das die Verbindung tatsächlich kaputt macht. als ich es tat, - Ok. - Niemand will kaputte Links. - Das macht keinen Spaß. - Okay, also werden wir weitermachen und ein paar davon machen, nur um dir die Idee zu geben wie es funktioniert. - Das nächste, was wir tun werden, ist nach dem Verkauf die Katalogseite, - die wir bereits gebaut haben, - und das Links zu Katalog-Dot HTML einfach so. - Und das ist Groß- und Kleinschreibung. - Also hier im Dateinamen. - Wenn es ein Großbuchstabe C im Dateinamen wäre, würde ich dort ein Großbuchstabe C brauchen. - Manchmal sind die Browser lokal auf Ihrem Computer verzeihender, - auf dem Computer vor Ihnen, - Sie könnten, - Sie wissen, - versehentlich eine andere Groß-/Kleinschreibung verwenden, wie ein Großbuchstabe C Lower Casey. - Und aus irgendeinem Grund, - es wird immer noch für Sie lokal funktionieren. - Aber dann, wenn Sie auf den Server hochgeladen, - kann es nicht funktionieren. - Es ist also immer gut, sich der Schreibweise von Dingen und dem Fall bewusst zu sein, ob es Groß- oder Kleinbuchstaben ist. - Okay, - äh, - nächstes gehen wir zur nächsten Seite. - Also nach dem Katalog, - werden wir auf eine Seite namens Pricing dot html verlinken. - Und der Text dort heißt Pricing und wir schließen Peitschen schließen den Link dort, - und wir machen einen letzten wie hier. - Ich denke, das kümmert sich um alle meine Seiten. - Ich zeige euch Jungs Ah, - Abkürzung ist auch. - Anstatt die Tags auszugeben, gewöhnen Sie sich an sie. - Wenn du den Buchstaben des Tags wie den Buchstaben A drückst , und wenn ich die Steuertaste drücke. - Es kommt so auf und ich kann die Rückkehr treffen, und es wird richtig das raus. - Für mich, - gibt es einige ziemlich ordentliche Verknüpfungen, die Sie für die Codevervollständigung in erhabenem Text tun können. - Mal sehen, wo wir hier draußen sind. - Die letzte Seite heißt contact dot html. - So, - und wir werden Link zum Texas ist Kontakt. - Okay, jetzt. - Dies zeigt also, wie Sie einen relativen Pfad zu anderen Dateien auf Ihrer Website verwenden. - Sie können sich fragen, - hypothetisch, was, wenn ich wollte, um eine andere Datei irgendwo anders im Web zu verlinken, - zum Beispiel - Was, wenn ich wollte, - wissen Sie, - um einen anderen Link zu machen, der ging eine andere Website, - Zum Beispiel, - wenn ich einen Link zur New York Times will, - könnte ich in das volle Mädchen setzen, - weshalb mal dot com so, - Ähm und warum jetzt werde ich wahrscheinlich am Ende dieses Links entfernen in spätere Übungen, weil wir - nicht wirklich brauchen unsere Schuhwebsite Toe verlinkt mit der New York Times macht nicht viel Sinn -, - richtig. - Aber trotzdem, - wollte ich Ihnen zeigen, dass, wenn Sie in den Namen einer Datei auf Ihrer Website setzen, solange - der Browser hat eine klare Sicht darauf. Wenn sie sich im selben Ordner befinden, könnten Sie einfach denNamen der Datei angeben, die den relativen Pfad genannt wird. Wenn sie sich im selben Ordner befinden, könnten Sie einfach den - Nun, - wenn Sie jemals auf etwas anderes im Web verlinken wollen, - können Sie den vollständigen Domain-Namen wie diesen eingeben, - der der Absolute Pfad genannt wird. - Hier. - Dies ist der absolute Ihre URL-Pfad jeder müssen Sie den vollständigen http Doppelpunkt Schrägstrich setzen, - Schrägstrich und dann den vollständigen Namen der Website. - Also jetzt, wenn ich auf diesen Text und Weiße Zeiten klicke, - es wird tatsächlich zu einer anderen Website verlinken. - Okay, - also standardmäßig, - wenn Sie einfach h ref verwenden, - um, - und Sie klicken entweder auf ein Bild oder einen Text mit dem Anker-Tag so eingerichtet, - was passieren wird, ist, was alles ziemlich vertraut ist, dass sich der Bildschirm ändern wird. - Wir werden auf eine Seite schauen, - wird auf einen Link klicken, - und es wird jetzt auf die andere Seite wechseln, - in Situationen, in denen, - anstatt die Seite zu ändern, auf der Sie gerade sind, - wenn Sie möchten , um den Browser zu zwingen, eine neue Registerkarte zu öffnen, - eine neue Browser-Tab oder ein neues Browserfenster. - Was Sie tun können, ist, dass Sie hier ein anderes Attribut verwenden können, das Target genannt wird. - Also werde ich da reingehen. - Ein Tag hier, das letzte für die New York Times. Und nach diesem Alter hier, werde ich hier reinkommen. - Wir zoomen ein wenig hinein und treffen ein Leerzeichen und sagen Target so. - Da gehen wir. - Ziel ist der Name der Attribute, - und dann gehen wir weiter und setzen ein paar Zitate. - Beachten Sie. - Wenn Sie mehrere Attribute haben, - was passiert, ist, dass Sie einfach ein Leerzeichen setzen. - Wir können das sogar auf eine eigene Linie setzen, also ist es einfacher zu sehen. - Wie wär's damit? - Ok. - So können Sie hier sehen, dass, wenn ich mehrere Attribute habe, - wir hier ein einzelnes Attribut haben. - Und dann gibt es einen Platz. - Und dann haben wir noch ein Attribut. - Ok. - Und Attribute wie diese sind nur in öffnenden Tags, - richtig? - Nie im letzten Tag. - Okay, - also, - unter Ziel, - können wir sagen, dass es auf eine neue leere Browser-Tab zielen soll, indem wir unterstrichen leer sagen. - Die Unterstriche wichtig. - Das musst du auch reinlegen. - Dies ist ein bestimmter Wert, den der Browser versteht. Anstatt sich selbst anzuvisieren, ist die Standardeinstellung das Ziel-Selbst, das so aussieht, und das bedeutet, dass, wenn Sie auf einen Link klicken, in welchem Fenster Sie sich befinden, Sie die Ansicht dieser Seite verlieren werden. - Aber es wird zur Ansicht der nächsten Seite wechseln, oder Sie verlinken zwei. Und wenn du das gerne machen willst, musst du es wirklich nicht angeben. Und wenn du das gerne machen willst, Also für diese hier oben habe ich kein Ziel angegeben. - Wenn ich klicke, wird das nur die Seite ändern. - Jedoch, - für diesen, - habe ich Zielleer angegeben, - und das wird eine neue Browser-Tab öffnen. - Lass uns rausgehen und das retten. Und wir werden diese Links kopieren und auf alle anderen Seiten einfügen, alsowerde ich den , also ganzen Code von Ah hervorheben, für mich ist er online. - 17 hier. - Der ganze Weg zu Zeile 19 Zeilennummerierung kann für Sie bei Ihrer Übung etwas anders - Code, - je nachdem, wie viel Sie geschrieben haben oder wie Maney Linie zurückkehrt Sie getan haben. Aber genau hier in diesem Abschnitt, werde ich einfach all die Links kopieren, die wir gerade geschrieben haben, also werde ich diese hervorheben und bearbeiten sagen . - Was kopieren? - Sie können die Abkürzung sehen. - Es gibt den Befehl Siehe auf Mac oder Kontrolle Siehe unter Windows. - Und wir gehen zu den anderen Seiten auf der Seite. - Gehen wir zu Kontakt, - und wir werden unter der Überschrift gehen und diese Links dort einfügen und speichern Es ist auf die - Verkaufsseite gehen und wir werden unter den Überschriften gehen und diese Links einfügen und speichern und gehen - zum Katalog und wir sind Gehen wir unter die Rubriken Wir werden diese Links beschleunigen und speichern und - sieht so aus, als wären wir alle fertig. - Das ist der Brunnen, - das sind nur vier Seiten. - Sieht so aus, als würde mir etwas fehlen. - Wir haben noch keine Preise. - Das ist es, was ich vermisse. - Okay, - wir gehen in die Preisgestaltung der letzten und gehen unter die Überschriften und fügen und speichern. - Also jetzt, - alle gekämpft. - Alle fünf meiner Seiten haben diese Links, - ähm, - in sie eingefügt, - und wir können Sie dann in die Dateien speichern und wir können jetzt zum Browser zurückkehren. - Und Sie können auf dieser Registerkarte Ihre, - ähm, -auf der Indexseite sehen - ähm, - und Sie können unser nettes kleines Bild sehen, das wir hier erstellt haben. - Erinnerst du dich? - Wir müssen die Seite immer aktualisieren, um die letzten Änderungen zu sehen, die wir vorgenommen haben. - So speichern Sie immer Ihre Datei und kommen dann wieder und erfrischend. - Ähm, - haben Sie keine Angst zu sparen, - denn selbst nachdem Sie sparen, - können Sie rückgängig machen. - Wenn Sie einen Fehler machen, - können wir gehen, um zu bearbeiten, - rückgängig zu machen, - um, - oder Befehl Z auf Mac oder Kontrolle Z unter Windows, so dass Sie immer wieder dorthin, wo Sie wo. - Ich kann das so rückgängig machen und reparieren. - Okay, also retten wir immer. - Wir gehen zurück zum Browser und aktualisieren uns. - Und da gehen wir. - Ich sehe hier meine Links, die neben meinem Bild erscheinen, werden später etwas mehr darüber reden. - Warum erscheinen diese Luft nebeneinander? - Also lassen Sie uns die testen. - Also gehen wir hier zum Verkauf. - Ich klicke auf das cool und es steht Umsatz hier. - Jetzt bin ich auf der Verkaufsseite, - wird auf Katalog klicken. - Es gibt die Katalogseite, die wir mit unseren eigenen bestellten Listen und bestellten Listen erstellt haben. - Wir klicken auf Preise und es geht auf die Preisseite. - Dort klicken wir auf Kontakte und wir gehen auf die Kontaktseite und dann nicht zuletzt werden wir - klicken Sie auf den Y-Zeit-Link, den Sie sehen können, - öffnet hier einen neuen Tab und führt uns zur New York Times Website. Also, weil ich sagte Ziel leer, - Ähm, - so was verursacht eine neue Browser-Tab öffnen die Sache. Das Schöne daran ist, dass ich immer noch auf diese Seite zurückkehren kann. - Ich habe diese Seite nicht verlassen. - Ich kann einfach den Browser-Tab benutzen. - Richtig. - Also wieder, - wenn ich klicke, - öffnet sich hier ein neuer Browser-Tab. - Wir können das schließen und zurück zur Seite. - Sie waren schon eingeschaltet. - Ok. - Gute Arbeit, alle. - Du hast gerade deine erste Webseite aufgebaut. - Ihre erste Website. - Also das ist wirklich, was Webseiten sind, - ähm, - Websites sind im Wesentlichen, - Sie wissen, - Verlinkung zwischen mehreren Webseiten. Und obwohl das noch nicht sehr attraktiv aussieht, werden wir mehr und mehr lernen und es weiter treiben, damit wir wirklich professionelle, polierte Seiten bauen können. Und obwohl das noch nicht sehr attraktiv aussieht, werden wir mehr und mehr lernen und es weiter treiben, damit wir wirklich professionelle, polierte Seiten bauen können - Okay, - so gute Arbeit. - Was Sie jetzt tun wollen, ist, dass Sie zum ersten Code übergehen wollen - Herausforderung, wo Sie beginnen, Ihre eigenen Site-Seiten zu erstellen 8. HTML validieren: - Lassen Sie uns ein wenig über die Validierung unseres Codes sprechen. - Ich gehe einfach zu einem Beispiel. - Seite. - Dies sind die Preisdaten, die Sie sehen und alle zahlen, die wir gerade vor kurzem in der letzten - Übung beendet . - Und wenn Sie an diesen Übungen und zukünftigen Übungen in diesem Kurs arbeiten, können Sie Probleme haben, bei denen Dinge nicht korrekt in Ihrem Browser angezeigt werden. - Ähm, - oder vielleicht sogar, wenn Sie gehen, um Ihr eigenes Website-Projekt zu erstellen, - werden Sie Code schreiben und vielleicht wird etwas nicht richtig angezeigt oder Dinge - werden nicht so positioniert, wie Sie sie auf der Seite haben möchten. - Eine gute Möglichkeit, das zu überprüfen, besteht darin, den Code zu validieren und zu sehen, ob der Code tatsächlich geschrieben ist - richtig. - Eine Möglichkeit, das zu tun, ist, dass wir einen Online-Validator verwenden können. - Also, was ich tun werde, ist, dass ich den ganzen Code auf dieser Seite auf der Preisseite hier hervorheben werde . - Ich klicke und ziehe einfach. - Oder Sie können alle Befehle a auf Mac oder Steuerung A unter Windows wählen, - und das wird alles auswählen. - Und dann werden wir diesen Code kopieren, was natürlich Kommando ist . - Siehe auf Mac oder Steuerung siehe unter Windows. - Und dann gehen wir zu einem Browser und ich werde voran gehen und nach Validator suchen - Dot w Three Dot Org ist so. - Das bringt also Validator dot w three dot org und das ist auf der w three dot org Website, - das ist das W drei c, - das World Wide Web Konsortium, - das klingt wie eine Art gruseliger Kult. - Aber eigentlich sind diese Leute, die die HTML-Sprache pflegen, - also bestimmen sie die Regeln und die richtige Art des Schreibens und die richtige Verwendung für - HTML und CSS. - Also, wenn Sie jemals möchte ich sicher wissen, wie man etwas schreibt oder wie man ein Element benutzt, - Sie können immer hierher kommen und dort nachsehen, - schauen Sie sich ihre Dokumentation bei w three dot org's an. - Im Moment werden wir nur ihren Online-Validator benutzen. - Sie können ihre verschiedenen Möglichkeiten zu validieren sehen. - Eine Sache, die Sie tun können, ist, dass Sie hier Anat Adresse setzen können, so dass ich meine Website hochladen und meine - Website könnte in meinem Domain-Namen wie meine Website dot com existieren. - Und ich kann einfach diese URL einfügen und Seiten von dieser Seite validieren lassen. - Ähm, - Sie können auch durch Datei-Upload validieren, so dass ich eine Datei von meinem Computer auswählen konnte und ich den Code testen konnte. - Auf diese Weise könnte ich den Code von dort validieren. - Wir werden diesen dritten Tab hier benutzen, der besagt, - validiert durch direkte Eingabe. - Und du kannst sie sehen. - Es gibt eine kleine Kiste zum Kopieren und Einfügen, - ähm, - und schwächen. - Bearbeiten Sie einfügen, - das ist ein Befehl V oder auf Mac oder Control V auf Windows. - Und das wird Ihren Code dort einfügen, damit wir den Code sehen können, den wir kürzlich geschrieben haben, und ich werde fortfahren und auf „Überprüfen“ klicken. - Und die gute Nachricht ist, dass wir das richtig geschrieben haben. - Es sagt, dass dieses Dokument erfolgreich als html fünf überprüft wurde. - Jedes Mal, wenn Sie einen grünen Balken an der Spitze bekommen, als Sie es gut gemacht haben, - alles funktioniert richtig. Sonst, Sonst wenn du hier einen roten Balken bekommst, dann wird es dir sagen, dass im Code etwas nicht stimmt. Lassen Sie uns dieses Szenario erstellen. - Also, momentan ist alles richtig geschrieben, - Aber sagen wir, dass ich in Eile tippte und sagen wir, ich habe vergessen, diesen Abschluss zu schreiben - Schrägstrich, so sieht es irgendwie aus, als gäbe es ein Eröffnungsalter zwei und dann eine andere. - H zwei, - das ist ein sehr häufiger Fehler. - Ist Oops. - Ich habe vergessen, den Schlusspunkt hier zu setzen. - Ein weiterer häufiger Fehler ist, ein Element zu nahe zu kommen. - Was ist, wenn ich dieses abschließende Etikett auf dem Absatz so vergesse? - Also hier sind zwei Fehler, die Luft auf wirklich häufige Fehler, die ich sehe. - Also lass uns gehen. - Sie speichern diese Datei und gut, - kopieren. In diesem Jahr werde ich den ganzen Code kopieren, und wir werden den hier wieder in den Validator bringen, okay? - Und wir werden Tempo machen, und dann klicke ich hier unten auf den Knopf „Reeve“. - Oh, - dieses Mal fand es Fehler im Code. - Es weiß also, dass etwas nicht stimmt. - Ähm, - so sagt Ares gefunden, als er dieses Dokument überprüft hat. - Sehen wir uns an, was diese Fehler hier sind. - Okay, und das ist die Gegend, um die ich wirklich besorgt bin. - Ist dieser rote Text hier, der Ausgabe vier Fehler sagt. - Mal sehen, wo sie diese Lüfte finden. - Es sagt uns hier online 10 um, - Überschrift kann nicht ein Kind einer anderen Überschrift sein. - Interessant. - Es sieht also dieses Alter zu markieren. - Vergrößern wir das für säkulare. - Das ist die erste Luftmeldung. - Es sagt, dass dieses Alter hier zu markieren. Dieses kleine rote Zeichen kann nicht ein Kind einer anderen Überschrift sein. - Es denkt also, wir versuchen zu nisten, in einen anderen zu gehen. - Und es sagt, dass das gerade online ist. - Zehn. Okay, damit wir hier zu unserem Code zurückkehren können, und weil ich Zeilennummern habe, kann ich die Zeile 10 hinuntergehen und das Problem beschränkten und sagen: und weil ich Zeilennummern habe, kann ich die Zeile 10 hinuntergehen und das Problem beschränkten und sagen: und weil ich Zeilennummern habe, kann ich die Zeile 10 hinuntergehen und das Problem beschränkten und sagen: Sie reden hier. - Ich muss hier einen schließenden Schrägstrich haben, also ändere ich das und speichere dann und wir können wieder validieren. - Und das wird wenigstens einen der Fehler lösen. - Und kommen wir zurück. - Und ich werde diesen Code wieder hier einfügen. - Ich werde alles rennen und einfügen und neu validieren. - Okay, das war das. - Ich war cool. - Das hat damals tatsächlich funktioniert. - Sieht aus, als wären wir mit diesem P-Tag davongekommen. - Ähm, - obwohl wirklich, - es hätte auch in Luft geworfen werden sollen. wenn du diese Dinge je visuell siehst, wirst du es aufräumen wollen, indem du das andere abschließende Etikett eingibst Und natürlich, wenn du diese Dinge je visuell siehst, wirst du es aufräumen wollen, . - Also, wann immer Sie bestätigen, - es wird, - wissen Sie. - Normalerweise wird es Ihnen die genaue Zeile sagen, wo es das Problem sieht. - Aber andere Male musst du zu dieser Linie gehen. - Es sagt Ihnen, zu gehen, - und Sie müssen den Code darüber zurückverfolgen und überprüfen, um zu sehen, ob etwas anderes zuvor - den Validator auf dieser bestimmten Codezeile stört. - Das ist also ein gutes Werkzeug, um Fehler zu beheben und sicherzustellen, dass Ihr Code korrekt geschrieben ist -. 9. Publishing: - Hallo. - Lassen Sie uns über die Veröffentlichung der Website nach all unserer harten Arbeit sprechen. - Am Ende des Tages, - sagen wir, wir möchten unsere Website-Dateien nehmen und wir möchten sie auf einen entfernten Server hochladen -. - Auf diese Weise können wir eine Vorschau der Dateien anzeigen oder wir können die Dateien mit World von unserer Domain teilen. - Also, - natürlich, - dies erfordert Ausgehen und den Kauf eines Domain-Namens und Web-Hosting-Raum von einem - bestimmten Unternehmen. - Und ich habe ein paar Unternehmen vorgeschlagen, mit denen ich gute Erfahrungen gemacht habe und dann einige - vernünftige Angebote im Abschnitt 0.0 einrichten in Modul eins, so dass Sie diese überprüfen können - Unternehmen, wenn Sie nicht bereits diese Einrichtung haben und wirklich überall, wo Sie kann einen - Domain-Name-Provider und Web-Hosting finden. - Es ist in Ordnung zu verwenden, abgesehen davon, dass wir unsere Dateien hochladen können, damit die Welt es sehen kann. - Dies ist auch hilfreich in dieser Klasse, so dass Sie Ihre Projekte posten und Feedback von erhalten können - andere Leute, weil sie in der Lage sein, einfach zu Ihrer Website-Domain zu gehen, um zu überprüfen, was - Sie gearbeitet haben. - Also, um loszulegen, - wir gehen weiter und stellen sicher, dass wir die drei Stücke von - Informationen, die wir von unserem Hosting-Provider bekommen haben , - und das wäre unsere FTP-Adresse unser Benutzername oder Benutzer Login und Passwort. - In der Regel, - die meisten Hosting-Unternehmen werden Ihnen diese Informationen per E-Mail, wenn Sie sich zum ersten Mal anmelden. Und wenn Ihnen das nicht per E-Mail zugeschickt wurde, ist es möglich, dass Sie sie anrufen oder sie kontaktieren müssen, um diese Informationen zu erhalten. - Oder sie haben Ihnen einen Benutzernamen und ein Passwort gegeben, um sich in einem Control Panel auf ihrer - Website anzumelden . - Und in der Regel, sobald Sie sich in Ihrem Bedienfeld irgendwo dort einloggen, werden Sie in der Lage sein, diese Informationen zu finden . Und sobald Sie diese Information gefunden haben, wollen Sie sie aufschreiben. - Und das nächste, was wir tun wollen, ist, dass wir diese Anwendung namens File - Zilla starten , die unser bevorzugter FTP-Client sein wird. - Also werde ich die Datei Zilla starten, und das könnte unter Windows etwas anders aussehen. - Das ist auf meinem Mac hier, aber es ist ziemlich dasselbe von beiden. - Sie können sehen, dass dieser Bildschirm hier oben all diese verschiedenen Fenster hat. - Wir haben ein Fenster. - Das wird die Anfrage und Antwort Informationen daraus sein. - Die Server, die uns geben, so dass sie zurückantworten, - wie, - können die nicht verbinden oder es wird wie eine Verbindung erfolgreiche Sachen wie das sein. - Und hier unten, wird es Ihnen tatsächlich den Status einer Akte sagen. - Wenn Sie es kopieren, - Sie werden ein wenig Ladebalken sehen, - lassen Sie wissen, ob die Datei kopiert wird. - Und in der Mitte hier haben wir uns in die linke und rechte Seite gespalten, - und die linke Seite ist Ihr lokales Dateisystem. - Also diese Luft alle Dateien auf Ihrem Computer nur in der gleichen Weise, als ob Sie den Finder oder - Ihren Datei-Browser und dann hier drüben auf der rechten Seite - was eigentlich leer ist, weil wir mit keinem Server verbunden sind. - Dies wäre tatsächlich die Dateistruktur auf Ihrem Server, mit dem Sie eine Verbindung herstellen, so - Sie können Ihre lokalen Dateien und die Dateien Ihres Servers sehen, - und wir können buchstäblich Dateien von der linken Seite nach rechts ziehen und ablegen, um - von unseren lokalen Dateien auf unseren Remote-Server. - Also das ist eigentlich das Äquivalent von Hochladen ist, wenn Sie klicken und ziehen Sie wissen, - nur in der gleichen Weise, dass Sie klicken und ziehen Sie Dateien um Ihren Computer, - Sie werden einfach klicken und ziehen Sie Ihre Website-Dateien und legen Sie sie auf den Remote-Server. - Und zusätzlich, - Sie können auch hier auf dem Remote-Server klicken, - und Sie können Dateien vom Remote-Server auf Ihren lokalen Computer ziehen und ablegen, um herunterzuladen - diese Dateien, so dass Sie hochladen und herunterladen können einfach durch Ziehen und fallen lassen. - Wir sind also mit keinem Server verbunden. - Das wird der erste Schritt sein. - Wir müssen uns mit unserem Server verbinden. - Also das erste, was ich tun werde, ist, dass ich gehen will, um die Datei Drop-Down-Menü , - und wir werden Site-Manager auswählen Und hier, - unter diesem kleinen Tab, der meine Websites sagt. - Hier können Sie alle verschiedenen Einstellungen für verschiedene Server erstellen, mit denen Sie sich verbinden. - Also diese Luft nur verschiedene Server, mit denen ich in der Vergangenheit verbunden bin. - Ich werde eine neue Seite erstellen. - Ich klicke auf diese Schaltfläche hier neue Seite, und es will, dass ich es hier nenne. Es heißt momentan „Neue Seite“, aber ich werde ihr einen besseren Namen geben. - C H W Shoes ist der Name dieser Website. - Und dann, wenn ich darauf dort klicke, - kann ich sehen, dass ich in einigen Einstellungen stellen kann und es sich an diese Einstellungen dafür - bestimmte Seite erinnern wird . - Das erste, was ich hier brauche, ist mein Gastgeber. Und um mich mit meinem FTP-Server zu verbinden, habe ich einfach den Domainnamen eingegeben, mit dem ich mich verbinde, Jonathan Grover dot com ist. - Und natürlich, - das wird für Sie anders sein und Sie müssen wieder mit Ihrem - Hosting-Provider überprüfen , um zu wissen, was Sie hier setzen sollen, um das FTP für das - Protokoll zu verbinden . - Hier, - können Sie zwischen FTP wählen, - was für Dateiübertragungsprotokoll steht, - oder SFTP, - was sicheres Dateiübertragungsprotokoll ist. - Eso sftp kann erforderlich sein. - Bestimmte Hosts oder bestimmte Server erfordern, dass Sie eine Verbindung mit einer gesicherten Verbindung herstellen. - Mein Dienstleister tut es nicht. - Ich werde nur ein normales Dateiübertragungsprotokoll verwenden, was ziemlich üblich ist. - Ich lasse den Hafen leer. - Manchmal muss man hier eine bestimmte Port-Nummer eingeben, aber die meiste Zeit kann man das leer unter Verschlüsselung lassen. - Ich werde nur sagen, benutzen Sie einfach FTP und hier unter dem Gesetz Waffentyp, werde ich das normal ändern. - Also ändere ich es von anonym zu normal. - Und hier, wo es heißt, - Benutzer, - das ist, wo Sie Ihren Login-Namen oder Ihren Benutzernamen. - Hier ist es also hilfreich, das Zeug irgendwo aufgeschrieben zu haben, und dann wirst du dein Passwort eintragen wollen. Glücklicherweise könnt ihr meinen nicht sehen, weil es kleine Punkte sind. - Und dann gibt es noch ein paar andere Tabs. - Ich werde nichts anderes ausfüllen, aber nur um Sie wissen zu lassen, was das sind. - Wenn Sie auf die Registerkarte „Erweitern“ gehen, - können Sie klicken, - durchsuchen, - und Sie können ein lokales Standardverzeichnis auswählen. - Und was das tun wird, ist, wenn Sie eine Verbindung zu dieser Website herstellen, - es wird automatisch einen bestimmten Ordner von Ihrem Computer hier in der lokalen Datei laden. - Manchmal ist das nett. - Es kann den Prozess beschleunigen, so dass Sie nicht so lange suchen müssen, - und Sie können dasselbe für Ihren Server tun, indem Sie ein Standard-Remote-Verzeichnis einrichten. - So, - jedes Mal, wenn Sie sich mit dem Server verbinden, - wird es in einen bestimmten Ordner gehen. - Du willst hineingehen. - Manchmal, wenn Sie eine Verbindung zu einem Server herstellen, sehen Sie nur ein leeres Verzeichnis, - und Sie könnten Ihre Dateien einfach direkt hineinziehen. - Andere Male gibt es alle Arten von Ordnern, - und dort sehen Sie vielleicht einen, der sagt, - Protokolle, die nur, - wie, - Daten von Ihrem Hosting-Unternehmen darin enthalten, - wie analytische Daten darüber, wer besucht die Website, - Dinge wie diese Informationen darüber, wie oft Sie Dateien kopiert und an welchem Datum. - Und dann gibt es manchmal einen anderen Ordner, der „Öffentlich“ sagt wo Sie Ihre Website-Dateien oder andere Zeiten kopieren würden. - Es heißt http oder vielleicht sogar ein HTML-Ordner. Wenn du also viele seltsame Ordner siehst und nicht sicher bist, welchen Ordner du deine Dateien kopieren sollst - und zwei, dann wirst du deine Hostingfirma darüber fragen wollen. - Also, jetzt werde ich die leer lassen. - Aber die Hauptsache, die Sie haben müssen, ist auf dieser allgemeinen Registerkarte, - und das ist Ihr FTP-Host, - Ihr Benutzername und Ihr Passwort. - Nachdem ich das alles eingerichtet habe, - kann ich auf die Schaltfläche OK klicken, um voran zu gehen und zu speichern, - und jetzt jedes Mal, wenn ich die Website besuchen möchte, - kann ich immer einfach auf Datei Site-Manager gehen, - und ich kann sehen, dass es sich erinnert diese Informationen. - Immer wenn ich auf den Namen meines Projekts klicke, - hier ist jeder W Schuhe. - Es wird all diese Informationen dort haben, so dass ich voran gehen und klicken Sie auf meine Website und klicken - Verbinden Sie hier und Sie könnten sehen, diese Luft alle Befehle und Antworten vom - Server. - Zum Glück, - Geist sagte Verzeichnisliste erfolgreich hier, wenn ich verbunden. - Nun, - wenn Sie hier einen roten Text sehen, der so etwas wie Fehler sagt, - bla bla bla ein wenig in der Regel ah, - Zahl in irgendeiner Art von Fehlermeldung. - Es wird Ihnen normalerweise Dinge wie Benutzername oder Passwort Falsch sagen, - die Sie wissen lassen, dass Sie offensichtlich das falsche Passwort verwenden. - Oder es könnte , seltsame Luftbotschaft haben, die man einfach nicht weiß, was es bedeutet. - Mein Rat ist, wenn Sie eine Luftnachricht bekommen und es ist nicht klar, warum es nicht funktioniert, - markieren Sie die Luftnachricht und Polizisten, die Sie Hosting Unternehmen Tech Support oder rufen Sie Ihre - Hosting-Unternehmen und lesen Sie sie die Luftnachricht, - und sie könnte in der Lage sein, Ihnen zu sagen, warum es nicht verbindet Glücklicherweise, - meins war in der Lage zu verbinden. - Bist du wann? - Wenn du dich verbindest. - Sie sehen vielleicht nicht, dass diese kompliziert einer Dateistruktur tatsächlich all diese verrückten Ordner hier drin haben . Aber jedenfalls, was ich tun werde, ist, dass ich einen Ordner erstellen werde, der speziell diese , Website einfügt, wenn du nur wolltest, dass sie in deinem Domain-Namen ist. - Als ob ich nur zu diesem Domain-Namen gehen wollte, würde ich ihn einfach in diesen Stammordner ziehen. - Aber ich will eigentlich kreieren. - Das ist wie ein verstecktes Website-Projekt in einem Ordner, ich wie bei Lee weiß. - Also habe ich hier einen Ordner namens CHW Schuhe erstellt, damit ich tatsächlich Fuß gehen könnte wie Jonathan, - Grover dot com Schrägstrich CHW Schuhe und sehen die Dateien dort, - Zum Beispiel, - lassen Sie mich dieses Verzeichnis wirklich entfernen, damit ich es wieder erstellen kann. - Zeigen Sie, wie Wenn ich mit der rechten Maustaste klicken, - Aiken, - sagen löschen. - Sei vorsichtig, wenn dudasnicht rückgängig machst das , und wir sagen ja. - Und jetzt ist es, dass man weg ist. - Ok? - Es entfernt tatsächlich die Dateien dort. - Es dauert eine Weile. - Also, wenn ich ein neues Verzeichnis hier außerhalb des Fensters erstellen und sagen will Verzeichnis erstellen - und es zeigt mir, wo es das Verzeichnis platzieren wird. - Und ich nenne das einen Z h W Schuhe. - Also versuche ich hier einen kleinen versteckten Regisseur zu machen , und sie werden sagen , ich sollte das Verzeichnis hier irgendwo finden können. - Jetzt, - da ist es. - Wenn Sie jemals in einen Ordner gehen wollen, - doppelklicken Sie einfach auf den Ordner. - Wenn Sie jemals aus einem Ordner gehen wollen, - doppelklicken Sie einfach auf diesen kleinen Punkt Punkt Punkt Ordner. - Es gibt immer einen Ordner oben, - genannt Punkt Punkt und wenn Sie darauf doppelklicken, - es wird Sie aus dem Ordner nehmen. - Also werde ich wieder in den Ordner gehen. - Cool. - Und was ich tun möchte, ist, dass ich all diese Dateien hier drüben auf eine Weise auswählen möchte, die Sie tun können , ist, dass Sie auf einzelne Dateien klicken und Sie können Shift halten und sie so auswählen - das. - Sie können auch alle Dateien auswählen, indem Sie Befehl a auf dem Mac sagen oder Steuerelement a auf Windows -, - und dann können Sie, sobald sie alle wie dieses blaue ausgewählt sind. - Sie können einfach auf einen von ihnen klicken, und es wird alle greifen, dass wir das hier rüber ziehen können und wir es fallen lassen können. Also, indem ich von meiner lokalen Seite auf meinen Remote-Server dorthin ziehe, konnte ich all diese Dateien dort und hier oben verschieben. - Die Spitze. - Diese kleine Bar hier zeigt mir, wo sie die beiden kopiert. - Das sagt mir, ob sie erfolgreich kopiert werden und hier unten in diesem Fenster, wenn Sie eine Datei kopieren, sehen Sie tatsächlich einen Fortschrittsbalken, der Ihnen zeigt, wie lange es dauert, diese Datei zu verschieben. - Zum Beispiel, - wenn ich die Bilder wieder hierher ziehe, - hat es mich gefragt. - Es steht, dass diese Akten bereits existieren. - Möchten Sie sich überschreiben? - Sag mal, - benutze diese Aktion immer und sag OK, - und hier unten siehst du, dass es diese Dateien überschreibt oder diese Bilddateien aktualisiert, - alles klar, - und sobald es fertig ist, - es wird sagen, Dateiübertragung erfolgreich Auf dieser Registerkarte, - es heißt, es gab 39 erfolgreiche Übertragungen, - und wenn ich darauf klicke, - es wird mir sagen, welche Dateien wie diese und wohin sie kopiert wurden. - Wenn Sie irgendetwas hier unter fehlgeschlagenen Übertragungen sehen, - bedeutet das, dass sich etwas nicht kopiert hat. - Und Sie können, - wie, - mit der rechten Maustaste darauf klicken. - Und Sie können, - wie, - sagen, es wiederholen zu versuchen, es zu kopieren oder so etwas. - Niedliche Dateien sind diejenigen, die wie momentan Kaffee sein sollten. - In Ordnung. - Jedenfalls, - Sie können sehen, das sind Spiegelbilder. - Das sind meine lokalen Akten. - Und das ist mein entfernter Server, dem all diese Dateien Bilder voneinander spiegeln. Da es hier eine Indexseite gibt, könnte ich diesen Ordner finden und mir diese Dateien jetzt im Internet anzeigen. Da es hier eine Indexseite gibt, Also werde ich meinen Browser öffnen, und ich gehe zu meinem Domainnamen und hätte ihn gerade in mein Standardverzeichnis geworfen. - Sie sind für meinen Domainnamen. - Ich könnte einfach zum Domainnamen selbst gehen. - Ich habe bereits eine Website hier im Stammverzeichnis. - Also gehe ich stattdessen zu meinem C h w Unterstrich Schuhe Ordner so gehen. - Und es gibt Welpen. - Meine Webseite. - Also sollten Sie in der Lage sein, Teoh, - laden Sie Ihre Dateien auf Ihren Server. - Und wenn Sie nicht wollen, dass die Welt sie sieht. - Du willst es ein bisschen verstecken. - Sie können immer ein Verzeichnis erstellen und werfen Sie die Dateien in ihre. - Und wenn Sie kopieren und fügen Sie dieses Verzeichnis in Ihre Projektseite auf Skill Share, - dann andere Leute gehen und sehen die Dateien und geben Ihnen Feedback und Dinge wie diese. 10. Einführen von Tabellen, Formen und Iframes: - Hey, willkommen zurück. - Dies ist Folien 1.2 Tabellen Formulare und I Rahmen. - Wir werden uns ein paar zusätzliche HTML-Elemente ansehen, die wir in Ah stecken können, der nächsten Übung. - So wird im Grunde abholen, wo wir für die letzte Übung aufgehört haben, - aber wird in die gleiche Seite hinzufügen. - Einige zusätzliche Dinge wie Tabellen, - Formulare und ich Frames Tabellen. - Sie sind wahrscheinlich alle vertraut mit jeder Zeit, die Sie einige Daten haben, und es wäre am besten - mit einer organisierten Struktur von Zeilen und Spalten angezeigt, als eine Tabelle wird Sie gehen - zu Element. - Das Tabellenelement besteht aus diesen öffnenden und schließenden Tabellen-Tags hier und dann - innerhalb davon. - Das erste, was wir tun, ist, dass wir entscheiden, wie viele Zeilen es gibt, - und wir verwenden dieses TR-Element hier, um eine Tabellenzeile zu erstellen, - also t r steht für Tabellenzeile. Also, dieser Tisch, den wir nur gebaut haben, um hier aufzustehen, was Sie sehen können. - Hier ist der erste Satz und hier ist der zweite Jetzt innerhalb der Tafelrose, - wir haben TDs, die den Tisch in Spalten teilen. - Das dauert also, dass diese Zeile hier und es fügt zwei Spalten hinzu, weil ich einen öffnenden TD habe -. - Ein schließender TD macht eine bestimmte Spalte und dieser andere TD Tabelle Teiler hier erzeugt - eine andere Spalte. - Wir können auch das Gleiche hier oben tun, - aber anstatt TD für diese erste 2 in der obersten Reihe hier verwenden wir th th dance - für Tabellenkopf. - Okay, das wird uns ermöglichen, diese Typen anders zu stylen. - Also können wir sagen, - Nun, wir wollen, dassdie Überschrift , dass vielleicht dickeren Text hat und vielleicht zentriert ist oder so etwas. - Oder vielleicht ist die Hintergrundfarbe dieser Zelle eine andere Farbe oder so etwas. - Also verwenden wir das Tabellenelement im Inneren. - Wir haben Table Rose t r. - Und dann haben wir th für Tabellenüberschrift oder Tabellenkopf und wir haben TV für die anderen Zellen. - Die anderen Spalten, die wir unten erstellen möchten. - So können Sie hier sehen, ob wir, wenn Sie sich vorstellen, dass wir all das Zeug nach rechts und - alles unten abhacken . - Im Grunde, - wir bauen gerade diese ersten 2 Spalten hier in diesen ersten 2 Reihen, - und diese wäre die Th die Tabellenüberschrift, die diese Person anders gestylt hat, - also ist es klar, dass dies die Überschrift auf der Oberseite ist. - Wir haben einen dunkleren grauen Hintergrund, um anzuzeigen, dass. - Also hier ist der Name, - um, - wie die erste th und Gewindeabstand in Millimetern, - was gegen die Messung für dieses bestimmte Produkt ist. - Und dann darunter haben wir den folgenden TR, - der Tafelstraße ist. - Dieser ganze Kerl hier ist ein Tisch, - hat diesen ersten hellgrauen Balken geschrieben. - Und im Inneren haben wir eine TD, die diese erste Spalte bildet, die M vier ist, was der Name des Produkts ist. - Und dann hier unten haben wir die Messung für das Produkt, - 0,7 Millimeter. - Sieh dir das noch mal an. - Absorbierend, es aufzunehmen. - Ok. - Und das nächste, worüber wir reden werden, sind Formulare. - Also werden wir ein Kontaktformular hinzufügen eso, dass der Benutzer eine Nachricht in das Formular eingeben kann - und es an uns senden, - und es wird in unserer E-Mail angezeigt. - Okay, - also in Bezug auf HTML müssen einige Formularelemente lernen, damit wir diese Form erstellen können - Eingabefelder, damit der Benutzer uns Informationen senden kann. - Okay, - also das Formularelement besteht aus diesem offenen öffnenden und schließenden Formular-Tag, - und Sie können sehen, dass es zwei erforderliche Optionen gibt, die Sie innerhalb dieses setzen müssen - das Öffnen des Formular-Tags dort. - Und diese 1. 1 heißt Aktion. - Aktion verweist also auf den Speicherort der Datei oder die Route auf Ihrem Server, die gehen wird - akzeptieren Sie die Informationen, die sie erwartet, um die Informationen zu sammeln oder die Informationen -, die Sie in diesem Formular einreichen. - Also, - zum Beispiel, - in diesem speziellen Fall - gibt es eine Eingabe für den Benutzernamen und eine Eingabe für das Passwort. - Also sagen wir, sie geben den Benutzer namens Bob ein, - und sie geben das Passwort Pommes Frites ein, - und dann klicken sie auf einen Submit-Button. - Also, wenn das für Miss eingereicht wurde, wird es zur Aktion gehen. - Und es wird diese Information an diese Datei senden, die „Log In“ heißt. - Also wird dieses Protokoll und die Datei auf dem Server wissen, - dann um die ah zu überprüfen, - es wird den Benutzernamen und das Passwort gegen eine Datenbank überprüfen, um zu sehen, ob dieser Benutzer existiert - als Beispiel. Okay, also für unsere und unsere Übung später, werden wir ein Kontaktformular erstellen, also wird es ein bisschen anders sein, aber wir werden immer noch eine Aktion haben. - Richtig? - Okay, also ist die Aktion im Wesentlichen, wo diese Informationen gesendet werden. - Jetzt, - die 2. 1, die Sie hier haben müssen, - Ähm, - und diese können in jeder Reihenfolge erscheinen, die Sie schreiben können. - Methode Erste Aktion zweite, - aber Sie müssen irgendwo in diesem öffnenden Tag, - Untätigkeit, - Attribut, -und ein Methodenattribut einschließen - Untätigkeit, - Attribut, - . - Also Methode legt tatsächlich die Methode fest, dass es diese Informationen an diese Aktion sendet - Ort hier. - Es gibt also zwei Hauptaufgaben, mit denen du arbeiten wirst. - Man nennt sich get, - und man heißt Post. - Also verstehe, dass es die Informationen nicht verbirgt. - Sie können es tatsächlich in der URL geschrieben sehen Wenn Sie, wenn Sie posten mit, wenn Sie ein - Formular mit der get-Methode senden , - es wird tatsächlich an den Ural am oberen Rand des Browserfensters anhängen. - Diejenigen diese ah bestimmte Werte, - diese Parameter und welchen Wert die Person für ihren Namen und ihr Passwort eingegeben hat. - Also würden wir Get nie wirklich für etwas Wichtiges benutzen wollen. - Wie, - äh, - wie, - zum Beispiel, - Sie wissen, - Kreditkarteninformationen, - Passwörter, - Dinge wie, die Sie nie wollen, um die Methode zu verwenden bekommen. - Es ist viel häufiger, den Methodenpost zu verwenden, weil er in dem Sinne sicher ist, dass , er nicht verschlüsselt ist. - Aber es ist sicher in dem Sinne, dass diese Informationen zumindest verborgen sind. - Es ist nicht im HTTP-Header sichtbar, - ähm, - und Sie werden es auch nicht oben in Ihrer El Bar sehen. - Das ist also unsere bevorzugte Methode für Dinge wie Loggins oder sogar unser Kontaktformular, das wir bauen werden. - Wir werden eine Methode der Post benutzen. - Okay, - Also Aktion ist, - wissen Sie, - wo wir die Datei senden Post sagt ihr das Format, dass es ist, oder die Art und Weise der - Methode, um es innerhalb des Formulars öffnen und schließen Formular-Tags zu senden. - Dann haben wir andere Arten von Elementen, die wir in ihre Ähm platzieren können, und wir werden einen Blick auf ein paar verschiedene werfen, während wir weitermachen. - Also wird diese 1. 1 hier sprechen wird Input genannt. - Also dieser Typ hat Eingaben, - hat eine Art von Text, - so dass jede Eingabe verschiedene Typen haben kann. - Sie können diese als eine Art von Text sehen. - Dieser hat eine Art von Passwort, - ähm, - also Text, wenn Sie in eine Texteingabe eingeben, - der Benutzer sieht nur die Buchstaben, die er eingibt. - Also klicken sie in die Eingabe und dann beginnen sie zu tippen. - Sie sehen, wie der Text erscheint. - Nun, - Passwort ist anders, weil tatsächlich Passwort, - Sie sehen kleine Punkte. Also, wenn sie das Passwort eingeben, wenn es jemanden gibt, der dir vielleicht über die Schulter schaut, - ähm, - es ist eine Bibliothek oder so etwas an einem öffentlichen Ort an einer Bushaltestelle, - Leute schauen über deine Schulter, wenn Sie innerhalb eines Passwortfeldes mit Eingabe mit der - Art des Passworts eingeben, - sie sehen kleine Punkte, damit sie die Buchstaben Ihres Passworts oder die Zahlen - Ihres Passworts, das Sie eingeben, nicht sehen können. - Okay, - also das ist wichtig ist, die Art der Eingabe anzugeben, die es ist. - Wir haben sogar einen Typ hier unten von Submit, - die eine Schaltfläche erstellt, die eine Submit-Button ist, - so haben wir Text eingegeben Passworttyp. - Geben Sie die Luft ein paar ein. - Wir reden darüber, wenn wir weitermachen. - Eine weitere wirklich wichtige Sache, die Sie tun müssen, ist dieses Attribut hier namens Name hinzufügen Okay, - also, wenn die Person in diese Eingabe eingibt. - Nehmen wir an, sie tippen ein. - Ihr Name ist Bob, und wir sagen, dass es diese Informationen in diese Akte posten wird. - Loggen Sie sich in dot PHP ein. - Nun, - wenn das Logging Dot PHP diese Information erhält, - der Name Bob, - muss es ein mit haben, - ah, diese Information unter den anderen Informationen zu identifizieren. - Also werden wireinenBenutzernamen und ein Passwort schicken einen . - Jetzt gib ihm einen Namen. - Ah, - wie Benutzername oder Passwort. - Was wir tun, ist, dass wir die Informationen kennzeichnen, die wir in dieser Akte veröffentlichen. - Das ist also im Grunde ein Variablenname namens Benutzername, der speichert, was immer sie - Benutzer, - wissen Sie, - was auch immer die Person, die der Betrachter der Website eingibt, - Also geben sie Bob ein und dass dieser Text String Bob wird innerhalb dieser Variablen gespeichert oder - dieser Parameter Benutzername, - die geschrieben wird, um in Punkt PHP einzuloggen. - Der Name ist also sehr wichtig. - Und natürlich, - der Name zwischen den verschiedenen Vorarbeiter setzt muss anders sein, - der Name zwischen den verschiedenen Vorarbeiter setzt muss anders sein, - Okay, - äh, - dieser Kerl hier ist Ah, - lustige freundliche Sache, die Sie mit Formularen in HTML 5 tun können, ist, dass Sie dieses Attribut namens verwenden können - Platzhalter und was das tut, ist es wird etwas in die Form schreiben und setzen anfangs so - Sie können Menschen einen Hinweis darauf geben, was sie ihren eso eingeben sollen. - Es wird eigentlich Benutzername hier sagen. - Der Betrachter weiß also, dass er den Benutzernamen in dieses Feld eingeben soll, - und dann, wenn er in das Feld klickt, - verschwindet dieser Platzhalter, - und jetzt sehen sie nur den Text dort, der so oft die Platzhaltertext - ist grau und zeigt dem Benutzer an, was er seine eingeben soll. - Und dann, wenn sie in das Feld „Vorarbeiter setzen“ klicken, wird die Textfarbe zu schwarz, wenn sie anfangen, ihren Benutzernamen einzugeben. - Okay, - und dann haben wir Typ Submit, - was wir erwähnt haben, ist eine Schaltfläche, - und dieser hat auch ein Attribut namens Value. - Und so beschriften wir den Knopf. - Dies wird tatsächlich physisch den Text einloggen. - Es wird diesen Text auf die Schaltfläche schreiben, die Leute im Browser sehen. - Also diese Luft einige andere Arten von Eingängen. - Wir haben uns vorher eine Art Text angesehen, - wir haben auch eine Art von Passwort, - das wir uns vor einem anderen Typ angesehen haben, den wir T L genannt haben, - was für Telefon steht. - Wie Sie wahrscheinlich erraten, - eines der netten Dinge über Typ sagen, das ist nützlich ist, ist es tatsächlich eine leichte - Unterschied, wenn Sie auf sind, - Zum Beispiel - eine Tablette oder eine andere Berührung Ah, - mobiles Gerät Smartphone, - jede Art von Touchscreen-Gerät. - Die meisten Browser sind jetzt kompatibel, dass, wenn sie eine Art Telefon sehen, - wenn der Benutzer, - ähm, - ihren Finger auf wie ein Tablet benutzt, um innerhalb dieses Eingabefeld zu klicken, - die Tastatur, die auftaucht, wird ein Zehnertastatur. - So ist es einfacher für sie, ihre Telefonnummer einzugeben, weil es alle Nummern im Gegensatz zu - eine Art von Texten. - Also, wenn Sie auf einem mobilen Gerät oder einer anderen Art von Tablet-Touchscreen-Gerät sind, - wenn Sie innerhalb eines Eingangs mit der Art des Taxis klicken, wird das Alfa Pad, - das ist alle Alphabet-Zeichen, - und dann, wenn Sie klicken in einer Telefonzelle, - es bringt Zahlen. - Okay, - äh, - wir haben auch das ist irgendwie interessant. - Wir haben eine Art von versteckt hier, - okay, - so versteckt, wenn Sie eine Art von versteckt setzen, - es ermöglicht Ihnen, einen Wert, der automatisch in das Formular gesendet wird einfügen. - Das ist, - Ah, - hypothetische Situation. - Oh, - Oh, das ist eine Nutzeridee einer Person. - Vielleicht melden sie sich bei ihrer Bank an oder überprüfen ihre Aktien oder so. - Und wir müssen wissen, was Benutzernummer ist. - Sie sind, - aus irgendeinem Grund, - also können wir das tatsächlich innerhalb des Wertes speichern. - Statt dass sie diese Informationen eingeben, wie die anderen Eingabefelder, gehen sie Teoh, wird es automatisch dort für sie eingefügt, und wir geben ihm immer noch einen Namen. - Das hat den Namen I. - D. - also speichert es diesen Wert in etwas namens I D. - und weil es einen Typ verborgen setzt, werden wir ihn physisch nicht sehen. - Das wird also im Formular nicht sichtbar sein, aber es gibt immer noch Informationen dorthin, wo Sie dieses Formular veröffentlichen. - Ok? - Und wir sprachen über den Eingabetyp. - Einreichen. - Das ist auch etwas Nützliches zu wissen. - Wenn Sie eine Formulareingabe erforderlich machen möchten, - ein HTML fünf. - Sie können dieses bestimmte Wort am Ende eines beliebigen Formularfeldes verwenden, das Sie erforderlich machen möchten, - und Sie schreiben einfach das Wort erforderlich, - was etwas anders ist als wir zuvor gesehen haben. - Normalerweise, - Sie platzieren einen Wert in ein Attribut. - Das ist eine Art wie nur Platzieren eines Attributnamens, - um, - am Ende hier, - und das wird es erforderlich machen, - was, - tatsächlich im Browser wird in HTML fünf freundliche Browser, - das heißt, - du wirst sehen. - Eine ah kleine Nachricht erscheint, - anzeigt, dass dieses Formular jetzt benötigt wird, - um Augen dies zu stylen Oder um dies in einem älteren Browser funktionieren zu lassen, - müssten wir aufgeben erforderlich und wir würden wahrscheinlich etwas wie JavaScript und - CSS Teoh validieren die Vorarbeiter Puts und zeigen visuell die erforderlichen Felder an. - Aber hier, - wenn wir nicht zu wählerisch über die Art, wie es aussieht, - können wir die HTML fünf erforderlichen Tribut hier verwenden. - Wir haben auch Funkeingänge. - Man kann sagen, Eingangstyp Radio, - und das ist ein Beispiel dafür, wie sie aussehen. - Sie haben diese kleinen Blasen und Sie können entweder männlich oder weiblich wählen. - Also ist es nur eine Sache für die meisten Leute, - zumindest wirst du wahrscheinlich nicht in der Lage sein, beides in dieser Situation jetzt zu wählen - dass wir diskriminieren. - Natürlich, - in dieser Situation, - werden wir wahrscheinlich das eine oder andere auswählen, - richtig? - Was wir hier für dieses Optionsfeld tun wollen, ist, dass wir sicherstellen wollen, dass sie den gleichen Namen haben . - Also hier auf Radioknöpfe. - Sie haben beide den gleichen Namen wie Sex. - Aber dieser hat einen Wert von männlich, und dieser hat einen Wert von weiblich wie diesen. - Also, wenn ich auf männlich klicke, - dann wird dieser Parameter oder diese Variable Name sex den Wert des männlichen speichern. - Und wenn ich weiblich anklicke, wird es das außer Kraft setzen. - Also auf diese Weise, - dieser Name hier wird nur gleich männlich oder weiblich sein. - Das ist die einzige Möglichkeit mit einem Radiobutton. - So und dies würde durch angezeigt werden, wenn Sie dies klicken. - Es leuchtet blau in der kleinen Funkbox. - Wir haben auch Kontrollkästcheneingaben. - Also, - wie Sie sehen können, - können wir sagen, Eingabetyp Kontrollkästchen. - Und wir gaben ihm den Namen hier. - Ähm, und wir haben andere Werte. - Also könnten wir sagen, - ähm, - Sie können ein Kästchen ankreuzen, das besagt, dass ich ein Fahrrad habe, oder Sie können ein Kästchen ankreuzen, das besagt, dass ich ein Auto habe - so ziemlich unkompliziert. - Sie geben ihm einen Wert und geben ihm einen Namen und stellen sicher, dass es eine Art von Kontrollkästchen hat, - und dann können Sie diese Kontrollkästchen auf einem Formular deaktivieren. - Um, - wenn Sie aus irgendeinem Grund wollten, dass es automatisch überprüft wird, - zum Beispiel - werden - zum Beispiel manchmal hinterhältige Leute Formulare erstellen, die eine kleine Box an der Unterseite haben, die - bereits für Sie überprüft. - Das heißt, - Melden Sie sich für meinen Newsletter an oder stimmen Sie zu, Werbe-Dinge auf Ihre E-Mail zu erhalten, - so etwas. - Also, wenn Sie wollten, - aus welchem Grund auch immer, - Sie wollten dieses Kästchen automatisch in der gleichen Weise aktivieren lassen, wie wir das - erforderliche Attribut am Ende hier verwenden . - Sie können auch das Wort als letzte Sache vor diesem Größer-als-Symbol oder - diese schließende Winkelklammer hier, - schreiben - diese schließende Winkelklammer hier, und das wird das Kontrollkästchen automatisch aktiviert. - Wenn der Benutzer das Formular zum ersten Mal besucht, - wir übernehmen auch Dropdown-Menü Auswahlmenüs, - und das verwendet das select-Element. - Ah, - also dieser hier geben wir ihm einen Namen und dann innerhalb dieses selektierten Elements verschachtelt. - Wir haben alle verschiedenen Optionen, - also würden Sie eine kleine Bar wie diese sehen und Sie würden darauf klicken und dann, wenn sich das öffnet , würden Sie sehen können, - äh, - klein, - mittel und groß, - und Sie müssten dort eine Größe auswählen. - So die Art und Weise machen wir klein ausgewählt zunächst, wie Sie die dort ausgewählten Wörter schreiben können, - genau wie das Wort für das Aktivieren des Kontrollkästchens automatisch in dem Wort erforderlich, um - erfordern jedes Formularfeld, - Sie können einfach sagen ausgewählt, wenn klein automatisch ausgewählt werden soll, - so dass dies der Standardwert in dieser Situation ist. - Textbereich ist nützlich, wenn Sie in einer Art von mehreren Textzeilen oder einem - Absatz von Informationen setzen müssen. Wenn du willst, dass jemand wirklich in der Lage ist, seine Meinung zu sprechen , ... oder, du weißt schon, einen Kommentar hinterlässt, Art von Feedback, das mehrzeilig sein wird. - Sie werden definitiv einen Textbereich anstelle einer Texteingabe verwenden wollen. - Das bekommt nur einen Namen, und was auch immer Leute hier eingeben, wird zum Wert. - Es ist ziemlich unkompliziert. - Also, ich Frames ist das nächste, worüber wir reden werden. - Wir fügen einen Google Maps I Rahmen auf unserer Kontaktseite ein, um zu zeigen, wo sich unsere Schuhfirma befindet. - Ich Rahmen werden auch für verwendet, - manchmal Einbettung von Videos. - Im Wesentlichen, - jedes Mal, wenn Sie einige HTML-Inhalte von einem anderen Ort in einen kleinen Rahmen auf laden möchten - Ihre Webseite, - können Sie ein Auge Frank verwenden. - Also ich Rahmen steht für inneren Rahmen, - und genau das ist es, was es ist. - Es ist ein Rahmen innerhalb Ihrer HTML-Seite. - Es ist wie ein Fenster, das in andere HTML-Inhalte schaut. - Also schnappen wir uns etwas H Code auf Googles Website, - und wir laden ihn in einen kleinen Rahmen auf unserer speziellen Webseite. - Dies ist also ein Beispiel für einen Augenrahmen, so dass Sie I Frames toe mit anderen Seiten in - Ihrer Website verlinkt verwenden können . - Dies ist ein Beispiel für, - ah, - nur Links zu einer anderen Seite innerhalb unserer eigenen Website. - Sie können auch I-Frames mit den Inhalten anderer Personen verknüpfen. - Also einige andere Sie Earl mit einem absolut Mädchen wie http Doppelpunkt Schrägstrich, - Schrägstrich etcetera, - und wir können dies eine Breite und Höhe geben. - Um, - und Sie können auch Informationen darüber angeben, ob Bildlaufleisten angezeigt werden oder nicht. - Wenn der Inhalt nicht in die Größe Ihres Rahmens passt, gehen wir weiter und fahren mit der nächsten Übung fort 11. Tabellen: - für diese nächste Übung, - werden wir einige zusätzliche Inhalte in unsere Seitenlayouts einfügen. - Sie können hier sehen, dass für diesen Startcode für 1.2 Tabellen Formulare und I Frames. - Was ich getan habe, ist, dass ich hinzugefügt habe, es ist ein wenig zusätzlichen Text und ich habe auch gegangen - in einige der Seiten und auch hinzugefügt einige Bilder dort jetzt. - Fühlen Sie sich frei. - Teoh, - schau dir den Startcode an und sieh dir einige der Dinge an, die ich hinzugefügt habe. Hier unten gibt es einige Kontaktinformationen und Links, und ein paar neue Bilder. Also, was wir für diese spezifischen Übungen machen wollen, gehen wir auf die Preisseite und fügen eine Tabelle hinzu. - Das wird ein Preisdiagramm sein. - Und wir gehen auch auf die Kontaktseite und wir werden ein Kontaktformular hinzufügen. - Und wir werden auch Google Maps Standort basierend auf der Verwendung eines Augenrahmens einbetten. Also, um loszulegen, hast du den Code heruntergeladen und entpackt, und du hast ihn in erhabenen Text gebracht. - Ich habe gerade den Ordner hier reingezogen und Sie können die fünf Seiten sehen, die wir für die letzte gebaut haben - Übung und das erste, was wir tun werden, ist, gehen wir in die Preispunkt-HTML-Seite -. - Und Sie können auch sehen, dass ich ein paar neue Kommentare hier im Code hinzugefügt habe. - Also, - zum Beispiel, - bevor wir diese Überschrift hier in den Links haben und ich habe voran gegangen und umgeben dies mit - ein Kommentar, der besagt, dass dies der Anfang eines Header-Abschnitts auf der Seite ist und das ist - das Ende eines Headers. - Das wird also irgendwann eine Leiste an der Spitze unseres Layouts sein, die den Namen haben wird - das Unternehmen und die Navigation Toe Link zwischen allen Seiten. Bevor wir also über das Erstellen von Layouts lernen, dachte ich, ich wäre gut Teoh Art zeigen euch, wohin wir wollen, indem wir einfach einige grundlegende Kommentare erstellen , um Dinge zu umgeben. - Das lässt mich wissen, dass ich hier einen Tisch in diesem Preis-Chart-Abschnitt aufstellen werde. - Okay, - So wie in den Folien, - haben wir gelernt, dass das Tabellenelement verwendet wird, um eine Tabelle anzugeben. - Das und dann können wir da reingehen, und ich bin schuldig zu zeigen, wo verschachtelt und lassen Sie uns ein paar Reihen bauen. - Ich baue hier eine Tabellenzeile und lass uns eine weitere Tafelstraße unterhalb der einen bauen. - Und es sieht aus wie für dieses Beispiel, - wir müssen nicht wirklich auch weggetragen werden. - Aber ich glaube, ich baue drei oder vier. - Wir machen es vier Tischrose. - Also kann ich das hier kopieren und einfügen. - Da ist meine vier Tischrose eins hier zu drei und vier. - Okay, - so weit, - so gut drinnen von hier. - Wir haben ein paar verschiedene Säulen. - Diese 1. 1 wir gehen, - Teoh, - erstellen Sie eine Spalte, die den Markennamen des Schuhs enthält. - Also werde ich th verwenden, die Tabellenkopf nur für diese erste Zeile ist, - wir werden sehen, dass hier eine Spalte namens Marke ist. - Ich werde eine weitere Spalte neben der Preisgestaltung machen. - Sie haben den Preis für den Schuh. - Oh, mal sehen. - Wird einen anderen hier genannt Steuersteuer machen. - In Ordnung. - Und wird noch einen hier machen, um zu sagen, ob es vorrätig ist oder nicht. - Ich schreibe einfach so auf Lager und schließe das ab. - Nun, - wenn diese Luft leichter zu sehen, - um, - wenn es einfacher ist, Seite an Seite zu verstehen, dass diese Air-Säulen Sie es auf diese Weise schreiben können -. - Viele Male werden jeden von ihnen auf ihre eigene Linie setzen, denn dann ist es ein bisschen einfacher, um zu sehen, ohne seitwärts scrollen zu müssen. - Ein ziemlicher Sfar. - Aber ich neige dazu, sie so zu setzen. - Zumindest, wenn ich es unterrichte. - Es hilft mir zu verstehen, dass das eine Reihe ist, und das ist eine Spalte, weil es neben dieser Spalte ist. - Aber Sie können auch, - Wie ich sagte, - Sie können Zeilenumbrüche tun und es wird auch richtig angezeigt. - Omeletts e So haben wir Marken Preissteuer auf Lager. - Und lassen Sie uns voran und machen Sie einfach noch einen Will do bestellen i d. - Also werde ich eine Überschrift hier machen und wir sagen, Ordnung, - I D. - Sagt, wäre wie ein I d. - Nummer, die Sie verwenden würden, um Schuhe zu bestellen, - nehme ich an. - Und, - äh, - lasst uns diese Jungs mit dem T d-Tag machen, so dass wir nur th für die 1. 1 verwenden, die die Kopfzeile ist -. - Also wäre diese erste Spalte unter der Marke hier. - Wir können den Zeilenumbruch ausschalten, also geht das Viertel jetzt raus. - Das wäre also die erste Spalte unter Marke. - Und ich muss einen flippigen Markennamen ausmachen. - Sagen wir mal, - Fink Erstein ist dort ein Markenname. - Und wir könnten noch einen Fernseher hinzufügen. - , Vergiss nicht, es auszuschließen. - Dieser hier zwischen dem öffnenden Abschluss-Tag wäre der Preis. - Ähm, - so diese Luft ziemlich teuer machen sie 97,18$. - Und für die Steuer wird sagen, dass die Steuer auf einer gleitenden Skala von, - um, - 15 Cent Teoh 30 Cent wie das ist. - Und das nächste, was wir haben, ist, ob es vorrätig ist oder nicht. - So konnten wir ja sagen, - es ist auf Lager. - Ähm, - nun, - setzen Sie einfach ein Warum. - Und das Letzte, was es aussieht, als hätten wir hier etwas namens Ordnung . - Und diese Bestellung werde ich nur die Nummer machen. - Ich werde 11 sagen. - 70 ist seine Ordnung. - Ich d. - Ausgezeichnet. Ich könnte das einfach kopieren und unten einfügen, undich könnte einfach die Informationen ändern, um das hier zu beschleunigen. Ich könnte das einfach kopieren und unten einfügen, undich könnte einfach die Informationen ändern, um das hier zu beschleunigen. Ich könnte das einfach kopieren und unten einfügen, und - Ich werde das nur hervorheben und wir können unten kommen und einfügen und das wieder einfügen, und dann gehe ich schnell in die Änderung dieser Werte hier, - ähm, - sieht, dass die nächste Marke diesen Kerl namens Dolby machen wird. - Hoffnungen werden und Washington, und wir ändern den Preis hier. - In Ordnung. - Und dieser wird 15 sein, um das Steuerjahr auf 15 bis 32 Cent zu ändern. - Sind die Typen auf Lager? - Ähm, sicher. Warum nicht diese Aaron-Aktien auch, und dann ändern wir die Bestellnummer hier am Ende, und wir gehen einfach runter und machen noch einen Produktwurf. - Okay? - Warby, Brixton. - Und diese besondere Marke kostet $111 und 42 Cent. Ich habe schon eine Weile keine Schuheinkäufe gedreht, also bin ich mir nicht sicher, wie viel sie noch gekostet hat. - In Ordnung, - na ja, - machen Sie das gleich und sagen, dass das hier nicht auf Lager ist, um populär wird nein sagen. - Und dann, - ähm, - für seine besondere Zahl wird nur etwas ausmachen. - Wird 11 sagen. - 78 A. - Okay, perfekt. - Also gehe ich weiter und speichere das, und wir haben noch kein CSS benutzt. - Wir werden diesen Tisch noch nicht stylen. - Wir werden das in einer späteren Übung machen, also werden wir nur die Rohdaten sehen, aber sie sollten immer noch in Zeilen und Spalten organisiert sein. - Wir können speichern und hier zurück zu unserem Browser und lassen Sie uns gehen und navigieren Sie auf dieser Seite. - Das ist die Preisseite, - und da siehst du meinen Tisch. - So wird das viel schöner aussehen, wenn wir, wenn wir diese einige Farben geben, - jede dieser Zellen eine andere Farbe und fügen Sie einige Grenzen und Dinge und Abstände um sie herum -. - Aber vorerst, - hoffentlich gibt dies Ihnen eine Vorstellung davon, wie Sie Informationen organisieren können, die Sie hier sehen können. - Das Wort Marke, - das ist eine Überschrift, - ist zentriert, - aber der gesamte TD-Text ist standardmäßig. - Es ist etwas oben auf der linken Seite der Zelle, aber es organisiert sie immer noch in gleiche Spalten wie diese und Rose. - Das sind vier Reihen. - 1234 und 12345 Säulen. - Gehen wir weiter und schauen uns den Code noch einmal an, nur für einen Moment, um all das zu absorbieren. - In Ordnung, 12. Iframes: - so weiterzumachen. - Das nächste, was wir betrachten wollen, ist, dass wir auf die Kontaktseite gehen und wir wollen - gehen Sie auf die Kontaktseite hier, - und wir wollen zwei Dinge hinzufügen. - Wir fügen eine Karte in einem Formular hinzu. - Wir gehen voran und beginnen mit den von Thea eingebetteten Google-Maps mit einem Augenrahmen, - etwas, um hier hinein zu gehen, wo es dazwischen steht, - wissen Sie, - Karte und Endkarte auf meinem Code. - Es ist online. - 24 hier sollte auch jahrelang sein. - Und das erste, was ich tun möchte, ist gehen Sie zu Google und greifen Sie eine Karte, so dass ich auf Maps dot gehen kann - google dot com und lassen Sie uns die Adresse unseres Unternehmens eingeben. - Könnte überall sein. - Ähm, - sagen wir, - um, - na ja, - wir werden sagen, - Ah, - Hoboken über das Hoboken, - New Jersey, - und wahrscheinlich für Ihr Geschäft, - Sie würden eine tatsächliche Adresse eintragen. - Ich werde einfach hier reinlegen und schwächen, - im Grunde zoomen, um das so aussehen zu lassen, wie wir es hier wollen. - Ich werde etwas näher heranzoomen und dann zentriere ich dieses kleine A hier, das diese Flagge hat, so - normalerweise würdest du dein Geschäft finden, - und dann würdest du es auswählen, - normalerweise würdest du dein Geschäft finden, - und dann würdest du es auswählen, - Und das nächste, was wir tun wollen, ist, dass wir Teoh in der Lage sein wollen, - diese Informationen zu erfassen und eso zumindest zum Zeitpunkt der Dreharbeiten, - ähm, - Google hat einen Link hier in der oberen linken Ecke. - Und wenn Sie auf diesen Link klicken, - das erste, was es tut, ist es versucht, Ihnen einen Link zu geben, auf den Sie oben hier verlinken können -. - Wenn Sie hier unten im unteren Bereich schauen, - heißt es einfügen HTML, um in eine Website einzubetten, - und sie geben Ihnen hier einen Augenrahmen. - Wenn Sie es anpassen und die Einstellungen dieses I-Rahmens anpassen möchten, - Ihre beste Wette ist, auf diesen Link hier zu klicken, der anpassbare Vorschau sagt, - eingebettete Karte und das wird ein kleines Fenster wie dieses auftauchen. - Und Sie können hier sehen, dass Sie klein, - mittel, - groß, - oder Sie können in einem bestimmten Brauch mit und Höhen setzen. - Also, das ist in Ordnung. - Wir lassen einfach die Standardwerte hier, - was ist, - äh, - mittel, - das ist 4 25 mal 3 50 Das ist für die Breite und Höhe vorerst in Ordnung. Und was wir später tun werden, ist, wenn wir anfangen, in unsere reaktionsfähigen Outs , für verschiedene Geräte, werden wir tatsächlich die Breite ändern, je nach Gerät. - Also für jetzt, - wir gehen einfach voran und verwenden diese Standardeinstellung hier. - Sie können auch zwischen Satellitenansicht und Erdansicht und Geländeansicht wechseln. - Ich gehe voran und wähle die Geländeansicht, weil ich das mag. - Warum nicht? - Und dann, wenn wir hier runterkommen, können Sie sehen, dass es Code gibt, den Sie in diesem Abschnitt hier kopieren und einfügen können, damit ich kann - markieren Sie all dies. - Eigentlich ist es eine ganze Menge . - Den ganzen Code von hier bis hier, und dann kopiere ich ihn. - Ich werde dio-Befehl sehen auf Mac zu kopieren oder zu steuern siehe auf Windows. Und dann komme ich wieder hierher, und ich kann das einfach einfügen und hier werde ich Befehl V auf dem Mac machen, was natürlich V an Fenstern kontrolliert und den bösen Jungen da reinklebt. - Also, das wirft das I Frame rein, - und wir können das speichern und gehen wir zurück zum Browser und schauen, ob wir hatten - etwas Glück. - Es ist dieser Kerl. - Also, wenn ich das richtig gemacht habe, sollte ich sehen, dass die Karte auftaucht. - Kommen wir wieder rein und gehen auf die Kontaktseite, - und da ist es toll, - damit ich den Standort zeigen kann. - Die Leute können hier klicken und das bewegen. - Sie können eine Richtung wählen. - Sie können diese Werkzeuge verwenden, um die Karte zu vergrößern und zu verkleinern und zu bewegen. - Sie können auch auf einen Link klicken, der unten angezeigt wird. - Dies ist eine größere Karte anzeigen, - die sie in Google Maps nehmen wird. - Okay, - so viele Websites geben Ihnen die Möglichkeit, I-Frames zu verwenden, um Inhalte einzubetten. - Andere Beispiele sind YouTube. - Sie können YouTube-Videos über einbetten, - und ich Frame nur durch Kopieren und Einfügen des Codes. - Sie bieten Video sowie eine andere gute Website zum Grabbing der Videoinhalte, - Einfügen in Ihre Website. - Ähm, - und es gibt alle möglichen Widgets für Twitter und Foursquare in allen möglichen sozialen Websites. - Okay, also springen wir jetzt zum Code zurück. 13. Formen: - Okay, - so als nächstes werden wir ein Kontaktformular erstellen und Sie können sehen, ich habe bereits einige - Kommentare im Code hier erstellt , um zu zeigen, wo das geht. - Also gehen Sie direkt zwischen diesen beiden Kommentaren online, - 30 da, - und wir beginnen mit unserem Formularelement, - das ist ein öffnendes und schließendes Formular-Tag wie so Jetzt, - innerhalb des öffnenden Formular-Tags, - wir haben , um zwei Attribute zu haben. - Wir müssen unsere Methode angeben, - der im Begriff ist, Post zu sein. Und die nächste Sache ist die Aktion, die die Datei ist, die alles erhält, was jetzt im Formular eingereicht wurde, ich werde nur den Hashtag oder das Pfundsymbol dort reinlegen. - Das verlagert nur die Nummer drei. - Dies soll nur ein Platzhalter sein. - Du könntest es sogar leer lassen, wenn du willst. - Also später in einer zukünftigen Übung, werden wir das auf eine bestimmte Datei im Backend zeigen, die dieses Formular bearbeiten und eine E-Mail an die gewünschte Person senden wird . - Also in diesem Fall, - wir sind einfach nur das Front-End abgebildet. - Wir machen nur den HTML-Code, der daran beteiligt ist, dieses Formular zum Laufen zu bringen. - Also, vorerst, - müssen wir uns nicht wirklich um die Handlung kümmern. - Wir lassen das einfach als eine Art Ah, - Platzhalter. als eine Art Ah, Okay, also innerhalb dieses Formulars hier würde ich gerne ein paar Informationen hinzufügen, die ich gerne ein paar Eingaben erstellen möchte , damit die Leute ihren Namen eingeben können, ihre E-Mail, ihr Telefon Nummer, - und auch eine kurze Nachricht an mich, - und klicken Sie dann auf die Schaltfläche „Senden“. Also würde ich es gerne hier einfügen, in die sie eintippen können, und ich werde dem eine Art Text geben, weil ich will, dass sie ein paar alphabetische Zeichen hineinlegen . - Ich möchte, dass sie ihren Namen hier eingeben können. - Also ist es wichtig, dass ich dies auch im Namen gebe, damit, wenn das Formular - eingereicht wird , - es diese Informationen in eine Art von Namen speichern kann. Und obwohl es überflüssig klingt, werde ich es eigentlich Namen nennen, denn das ist, was sie schreiben, ich gebedem einen Namen. Und obwohl es überflüssig klingt, werde ich es eigentlich Namen nennen, denn das ist, was sie schreiben, ich gebe , Und der Grund,warum ist das ihr Benutzername ist. - Das ist der Name der Person, die E-Mail sendet . - Ist ein besserer Weg, das zu beschreiben. - Und das hier, - wir werden auch Platzhalter-Text geben. - Sagen wir Platzhalter, und wir sagen, - ähm, - deinen Namen. - Sagen Sie Ihren Namen. - Richtig? - Damit sie wissen, dass ihr Name dort steht. - Wie machen wir das nötig? - Das ist richtig. - Wir sagen, erforderlich, schreiben wir das Wort, das am Ende benötigt wird, so. - Ich denke, ich ziehe das Briefumbruch ab. - Scrollen Sie einfach so über. - Ok. - Und dann gehen wir runter zur nächsten Zeile und lassen uns eine weitere Eingabe erstellen, und wir geben diesem eine Art E-Mail. Die Art von E-Mail ist ziemlich nützlich, wenn Sie tatsächlich versuchen, die E-Mail der Person zu bekommen. , - Und der Grund, warum ist das in HTML fünf kompatible Browser? - Es wird validieren, ob es sich tatsächlich um eine E-Mail-Adresse handelt oder nicht, - und es wird verhindern, dass sie übermittelt wird. - Wenn jemand da drin etwas tippt, das keiner Email-Adresse ähnelt. - Na gut, - und vielleicht, - wissen Sie, - vielleicht sollte E-Mail benötigt werden, weil wir das verwenden wollen, ist wie ein Kontakt-Mailer. - Und woher sollen wir wissen, wen wir zurückschicken sollen, es sei denn, sie sind in der Lage, das einzusprechen? - Na gut, lass uns noch eine Eingabe machen. - Und das hier, wir werden einen anderen Typ machen. - Wird sagen, dass dieser ein eine Art von erzählen ist, der das Nein, - das numerische Pad auf verschiedenen Geräten heraufbringt . - Wenn Sie in diesen Eingang klicken, - sollte es das Ziffernblock bringen, indem Sie sagen, Typ Telefon, - und wir geben diesem Kerl einen Namen auch und um es zu verknüpfen, und wir werden sagen, - Telefon ist, wie wir besorgt waren. - Das und dann sagen wir Platzhalter und für Platz älter hier wird Telefon sagen, - Und wir werden ihnen auch in dem Platzhalter erwähnt, dass dies optional ist. - Sie müssen uns das nicht sagen, es sei denn, sie wollen es. - Okay, - und mal sehen. - Also eigentlich, - das war's. - Nachdem wir Namenstelefon, - E-Mail und dann danach haben , - wollen wir, dass sie in der Lage sein, ihre Nachricht zu setzen. - Also, was ich tun werde, ist, alle einen Textbereich zu erstellen, der den öffnenden und schließenden Text verwendet - Bereichs-Tag wie so und dann innerhalb dieses Textbereichs. - Ich werde ihm sagen, wie groß es ist. - Ich werde sagen, es sollte mindestens 10 Zeilen Text sein. - Du weißt, du könntest die Rückkehr 10 mal 10 Zeilen des Typs passen, bevor wir eine Bildlaufleiste bekommen - um zu erscheinen, - Ähm, - und wir geben diesem Kerl und Name wird auch sagen, Name gleich Nachricht. - In Ordnung, - Und dann, - schließlich, - werden wir in einer Eingabe mit einem Typ des Vorbringens hinzufügen, und das wird uns unseren einreichen Knopf geben. - Und um den Button zu beschriften, damit wir einen Text darauf lesen können, wird das Wort senden auf schreiben - der Button so, - und das sollte gut sein, zu gehen. - Lassen Sie uns dies eine speichern und kommen wir zurück zum Browser und aktualisieren Awesome. - Und hier haben wir die I-Rahmenkarte und dann unten unter dem Formular, das wir gerade erstellt haben. Also, wenn ich dieses Jahr heranzoomen, kann man sehen, dass es noch nicht stilisiert ist. - Wir werden das verschönern und es später schön aussehen lassen, mit CSS. - Aber für jetzt, - es ist nur eine Art von dieser generischen wie, - horizontal gestapelten Form, so dass wir innen hier klicken können, - und wir können einen Namen eingeben. - Mein Name ist Bob. - Ich kann in die E-Mail klicken. - Sie können sehen, dass der Platzhaltertext dort verschwinden würde, wenn ich tippe, - und wir können sagen, meine E-Mail ist bob bei bob dot com. - Die Telefonnummern sind optional, also muss ich das nicht eingeben. - Wenn ich wollte, - wäre es so etwas, - schätze ich. - Und dann kann ich eine Nachricht wie Hallo eingeben? - So etwas wie das. - Ähm, - jetzt, - einige dieser Felder sind erforderlich, - zum Beispiel, - wenn ich keinen Namen eingeben und ich versuche, es zu senden, - bitte füllen Sie dieses Feld aus. - Das ist also, dass html fünf freundliche erforderliche Attribut, das wir darin platziert haben, ist - mir sagen, dass ich dies ausfüllen muss, bevor einreichen wird. Und wieder, - wenn Sie in der Lage sein wollen, dies ein wenig mehr zu stilisieren, - ähm, - werden Sie wahrscheinlich am Ende etwas wie JavaScript oder J coury Plug in stilisierte - diese Formen, - die Wir werden nicht in dieser Klasse übergehen, - aber vielleicht in einer zukünftigen Klasse. - Okay, - also hier haben wir Namen wird das wieder ausfüllen. - Lassen Sie uns das tun, was dieser zwei Dinge hat, die für seine Validierung gehen. - Nummer eins, die wir benötigt haben. - Also, wenn wir nichts tippen und es sagen sollte, dass es erforderlich ist, wenn wir auch eine E-Mail - Adresse, - das macht keinen Sinn. - Als ob ich mich wie, äh, - gefälschte aus Sucka stünde. - Und dann versuchen wir es zu schicken. - Es steht, - Bitte geben Sie eine E-Mail-Adresse ein. - Also müssen wir sowas wie Bob bei Bob Dot Com setzen. - Ich schätze, du kannst es noch vortäuschen, aber es ist ein bisschen mehr Arbeit. - Und dann, wenn wir vorlegen, - würde es diese Information in der Form zur spezifischen Datei posten, die wir in der Handlung auflisten -. - Attribut. - Okay, - Also in diesem Fall, - wir setzen einfach ein Pfund-Symbol ist ein Platzhalter. - Also, wenn ich auf Senden klicke, - es tatsächlich nur aktualisiert die Seite. - Da passiert wirklich nichts. - Aber wie ich ein wenig später sagte, - in einer zukünftigen Übung, - werden wir alle zumindest ein paar Back-End geben, um diese Funktion zu machen. - Als nächstes möchten Sie mit der nächsten Code-Herausforderung fortfahren und diese neuen Elemente implementieren , die Sie in Ihre neue Site gelernt haben. 14. Video: - Hallo, Leute. - Dies ist Übung 2.1, - und ich habe die Dateien hier bereits heruntergeladen Der Quellcode, - und Sie werden feststellen, dass, wenn Sie in den Ordner schauen, dass es ein paar zusätzliche Dinge gibt - hier, die vorher nicht existierten. - Wir haben also immer noch die gleichen fünf HTML-Seiten in unserem Images Ordner. - Aber einige neue Dinge sind jetzt der CSS-Ordner. - Wir werden in dieser Übung nicht viel mit CSS machen. - In der nächsten Übung wird das Lernen der Grundlagen der CSS und wie es funktioniert in diesem - Übung. - Wir werden nur ein vorgeschriebenes CSS-Skript verwenden, das unserem HTML helfen wird - fünf Elemente funktionieren überall. - Also lernen wir ein bisschen mehr darüber in einer bevorstehenden Übung. - Also werden wir auch ein Video in diese Übung einbinden. - Also habe ich für Sie auch einen Video-Ordner zur Verfügung gestellt, der eine Aufnahme hat. - Es sieht so aus, als ob der Künstler Larry Hale einen Song spielt, - Blaue Schuhe. - Also haben wir beide Formate hier. - Wir haben eine MP-Vier-Akte, - und wir haben auch eine O. - G. - V-Datei. - Das sollte also in allen verschiedenen Browsern funktionieren. - Alles klar, - um loszulegen. Wir können diese Dateien hier in einen erhabenen Text ziehen, Sie sehen können, dass ich schon getan habe. - Und ich werde auf die Indexpunkt-HTML-Seite doppelklicken. Das ist die einzige Seite, an der wir arbeiten müssen, für die wir arbeiten werden Diese Übung. - Also, um damit zu beginnen, - gehen wir weiter und gehen runter zum Abschnitt der Seite, wo wir gerne unser Video hinzufügen und - ich werde hier Teoh Line 44 in der Ecke des Künstlers gehen und wir gehen voran - und beginnen mit dem Hinzufügen von das öffnende Video-Tag und ich werde das schließende Video-Tag dort als hinzufügen - gut. - Jetzt das öffnende Video-Tag. - Es kann tatsächlich einige spezielle Attributnamen akzeptieren. - Also, um eine Option zu übergeben, - können Sie Dinge wie Kontrollen sagen. - Und du kannst es einfach als Video lassen. - Aber wenn Sie Steuerelemente wie diese sagen, - was passiert, ist, wenn die Seite geladen wird, - es wird automatisch die Standardeinstellung. - Video-Steuerelemente sind sichtbar, im Gegensatz zu den Steuerelementen, die ausgeblendet werden. - Ähm, - einige andere Optionen, die Sie hier übergeben könnten, gibt es Dinge wie Auto-Play, - Zum Beispiel, - Sie können angeben, ob Sie es automatisch spielen wollen oder nicht. - Und es gibt auch eine Schleife. - Sie können Looping aktivieren, indem Sie Loop für dieses bestimmte Video sagen. - Ich will es nicht mit Zehenschlaufe. - Ich wollte nur einmal spielen, - und sie müssten wieder auf Play klicken, wenn sie ein zweites Mal spielen wollten. - Und in Bezug auf die Auto-Play, - Ich bin kein großer Fan von Auto-Play, weil manchmal fängt es Benutzer außer Acht, wenn sie gehen - Ihre Seite und sie hören Video irgendwo spielen, und sie sind nicht ganz sicher, wo das Video - ist. - Also werde ich voran gehen und lassen Sie den Benutzer das Video finden und klicken Sie auf den Play-Button selbst -. - Wenn sie daran interessiert sind, es zu sehen. - Ich denke, ich lasse Kontrollen da drin, weil ich sicherstellen möchte, dass meine Kontrollen immer sichtbar sind . - Okay, das ist ein guter Anfang. - Das nächste, was wir tun müssen, ist, dass wir mit unseren Quell-Video-Dateien verknüpfen müssen, - und Sie konnten sehen, dass ich die Video-Ordner erstellt habe, die ich vorher erwähnt habe und darin - Ordner haben zwei Dateien Blaue Schuhe und P vier und blaue Schuhe dot gv, - also gehe ich einfach voran und beginne damit, das Quellelement dort zu erstellen, - und wir verwenden das SRC-Attribut zwei Punkt auf den spezifischen Speicherort der Datei. - Also in diesem Fall, - hier bin ich auf der Indexpunkt-HTML-Seite und ich muss dem Browser genau sagen, wo diese - Videodatei existiert. - Also denken Sie daran, als wir zwei Bilder verlinkten, - wir mussten dem Browser einen Browser sagen. Ich weiß, dass wir auf der Indexseite sind, und ich möchte, dass du in den Bilderordner gehst und ein bestimmtes Bild anzeigst. - Das Gleiche mit den Videos, - die Videos lüften in ihrem eigenen Ordner. - Also muss ich dem Browser sagen, gehen Sie zuerst in den Video-Ordner, indem Sie sagen, Video Schrägstrich wie - das. - Und dann werde ich sagen, dass es blaue Unterstriche Schuhe Dot MP vier einfach so spielen soll. - Und wir geben auch den Typ Videophile hier ist Video Schrägstrich mp vier. - Okay, - perfekt. - Das wird also für alle meine Safari-Geräte funktionieren, oder? Mac-Computer,iPads, iPhones und Internet Explorer werden mit diesem ersten Quell-Tag erledigt. , Mac-Computer,iPads, iPads, In Ordnung, - Also für andere Browser wie Firefox, - Chrome, - usw., - muss ich zu diesem anderen Videoformat verlinken. - Also das andere heißt Video Schrägstrich blau Unterstrich Schuhe Punkt Org v und die Datei - Typ hier ist Video Schrägstrich o. - G ist der Name des Kodak dort. - Okay, - also der Grund, warum der Kodak Ogi Theo ra genannt wird und um o g Codex für dieses Format hat, kann - sowohl Audio als auch Video sein. - Ähm, - so oft, - obwohl, - für die Audio-Erweiterung, - werden Sie oh dot org sehen. - Und, - um, - gelegentlich sehe ich ein Video mit dieser Dateierweiterung. - Aber die meiste Zeit, - die Leute nannten die Video-Erweiterung als dot gv daher, warum das hier anders ist. - Das ist Schrägstrich O g und die Videodateien. - 00 gv. - Ich dachte, ich würde das erwähnen, falls ihr darüber verwirrt seid. - Okay, hier kommt die Fallback-Lösung ins Spiel. - Also für ältere Browser, die Luft nicht unterstützt die Video-Elemente um, - Ich könnte etwas Flash einbetten. - Ich könnte einen kostenlosen Flash-Video-Player herunterladen, wenn ich wollte. - Und setzen Sie das hier. - Ich denke, was ich tun werde, ist einfach etwas hier zu schreiben. - Und das hier wird nur ich schreibe eine Nachricht an den Benutzer hier. - Und diese Nachricht wird nur erscheinen, wenn aus irgendeinem Grund, - der wunde Punkt eine dieser Quelldateien nicht lädt. Also, mit anderen Worten, - wenn sie das Video nicht abspielen können, werden sie diese Nachricht sehen. - Also werde ich nur sagen, dass ihr Browser keine HTML 5 Video-Periode unterstützt und so höflich sein wird, wie wir können, also sagen wirbitte aktualisieren Sie Ihre Browser-Periode. dass ihr Browser keine HTML 5 Video-Periode unterstützt und so höflich sein wird, wie wir können, also sagen wir - Okay, - wir können sogar ein bisschen netter sein, und wir können ihnen einen Link geben, wo sie ihren Browser aktualisieren können. - Also lassen Sie uns voran und wickeln Sie einen Link um diesen Text hier, der sagt, - Aktualisieren Sie Ihren Browser, so dass, wenn sie auf das Upgrade Ihrer Browsersteuer klicken, - das wird sie zu ah, - freundliche Website nehmen . - Das wird sie wie eine neuere Version von Internet Explorer oder eine neuere Version von Firefox oder Safari herunterladen lassen , - wenn das ist, was sie brauchen. - Wie ihr euch erinnert, verwenden wir das A-Tag, um einen Link zu erstellen. Also, wenn ich diesen Kerl so umbringe, kann ich das Öffnen und Schließen eines Tags um den Text machen, den ich sein möchte. - Der Link, - das ist ein Upgrade Ihres Browsers und dann innerhalb der Öffnung ein Tag. - Ich kann angeben, wo es verlinkt, - also werde ich voran gehen und sagen, - um H ref, - Und es gibt eine wirklich großartige Seite, die ich gerne benutze, - die bei http Doppelpunkt Schrägstrich ist, - Schrägstrich und es heißt. - Es ist ziemlich leicht, sich zu erinnern. - Es heißt Browse happy dot com, - und Sie können sehen, wohin das sie hinführen würde. - Lassen Sie mich das und durch diese in meinen Browser sehr schnell kopieren. - Wir gehen einfach voran und beschleunigen das. - So browsen happy dot com bringt Sie auf diese Seite, wo Sie auf die neueste Version von bekommen können - jeden Browser, den Sie suchen und Sie können sehen, es zeigt immer die neueste Version - Nummer hier unten. - Okay, - so können die Leute wählen, - wissen Sie, - einen bestimmten Browser, wenn es sich damit gemütlich. Im Gegensatz zur Verknüpfung mit Flash, werden wir ihnen einfach Zugang zum Upgrade ihres Browsers geben, was hoffentlich tun wird. werden wir ihnen einfach Zugang zum Upgrade ihres Browsers geben, - Okay, - äh, - lasst uns auch noch eine letzte Sache hinzufügen: Ich will nicht, dass sie meine Website verlassen. - Ich möchte meine Webseite offen halten. - Also, indem Sie Unterstrich Blank sagen. - Sie erinnern sich, dass dieses Attributziel und ein Wert von Underscore Blank es so machen - dass, wenn sie auf diesen Link klicken, - es öffnet ein neues Browserfenster. - Also gehe ich voran und speichere das. - Also lasst uns diesen Kerl im Browser testen. - Dann bringe ich diesen Code hier hoch und wir ziehen ihn einfach ins Chrom. - Also sind wir hier auf der Indexseite. - Ich werfe das einfach da rein. - Cool. - Also hier ist, - ähm, - meine Überschrift auf meine Bilder. - Und hier unten, - wenn ich nach unten scrollen, - das ist eigentlich mein Künstler Abschnitt auf der Seite und Sie können sehen, die Browser-Steuerelemente sind - zeigen und ich kann auf spielen Awesome klicken. - Danke, Larry. Das ist Larry, der Gitarre spielt, und es hat sich herausgestellt. - Gute Arbeit. - Und das kann ich Ihnen versichern, dass das in jedem anderen Browser funktioniert. - Du kannst es testen. - Dieser Typ wird an all den verschiedenen Geräten arbeiten. - Okay, - Wir werden das einfach für eine Sekunde von der Seite bewegen, - werden wieder in den Code springen. - So würden Sie Video einbetten. - Und natürlich, - wenn Sie Audio einbetten, wäre der gleiche Prozess, außer Sie würden das Audio-Tag verwenden - anstelle von Video und für die Quelldatei. Natürlich würden Sie eine Verknüpfung mit einer würden Sie eine Verknüpfung mit einerAudio-Datei wie einem MP 3 und einem O Ghaben. Audio-Datei wie einem MP 3 und einem O G - Und ich bin nur auf die gleiche Weise, dass es JavaScript-Lösungen gibt, um eine einzelne Videodatei zu arbeiten und all die verschiedenen Browser. - Es gibt auch Job Js Spieler, - JavaScript-Player für Audio-Elemente als auch, - so können Sie interessiert sein, das zu überprüfen. 15. Vorbereitung für HTML5: - Ok. - Also für den nächsten Teil der Übung, - lassen Sie uns voran und fügen einige HTML fünf semantische Tags in unser Layout. - Der erste Schritt besteht also darin, unser Dokument für ältere Browser vorzubereiten. - Also, obwohl Sie wissen, - wie wir in den Folien sahen, - die meisten modernen Browser unterstützen HTML fünf semantische Tags, - jedoch, - bestimmte ältere Versionen von, - um Firefox Safari und Chrome und älter Versionen von Internet Explorer wie Internet Explorer - acht und darunter. - Ich habe keine Unterstützung. - Sie werden tatsächlich erstellt, bevor HTML fünf erstellt wurde, so dass sie jetzt keine Unterstützung für diese - semantischen Tags haben . - Es ist eigentlich ziemlich schmerzlos und einfach, diese Unterstützung hinzuzufügen. Also, was wir tun können, ist, dass wir hier in den Kopfbereich gehen können, und das erste, was wir tun werden, ist, dass wir Unterstützung für Feuer hinzufügen, Fox, Chrom und Safari. Und wir werden das tun, indem wir mit einer CSS-Datei verknüpfen, und wir werden viel mehr über CSS in den kommenden Übungen lernen und wir werden viel mehr über CSS in den kommenden Übungen lernen. - Aber für jetzt, - wir werden einfach auf einige vorgeschriebene CSS-Code verlinken, der diesen Elementen helfen wird -. - Er ist HTML Fünf. - Semantische Elemente werden in allen verschiedenen Browsern korrekt angezeigt, - also das erste, was ich tun möchte, ist, dass wir hier oben auf der Seite einen Link erstellen möchten, - und dieser Link wird auf die normalisierte Punkt-CSS-Datei zeigen, die ich für - Sie. - Also muss ich hier ein paar Attribute hinzufügen. - Die 1. 1, die ich hinzufügen möchte, heißt R E L. - Was für Beziehung steht. - Dies sagt das, - sagt dem Browser die Art der Verbindung, - die Beziehung des Links, - und wir werden ihm sagen, dass dies ein Stylesheet ist die Art der Verbindung, - und wir müssen es auch auf eine bestimmte zeigen -Standort. - Also verwenden wir einen Entwurf zwei Punkt dies in Richtung der spezifischen Position der Datei. - Ich habe dir einen CSS-Ordner gegeben. - Wir müssen dem Browser sagen, dass er in den CSS-Ordner gehen soll, denn schließlich sind wir hier auf der Indexseite. - Also müssen wir sagen, - Hey, - Browser, - gehen Sie von der Seite, auf der wir sind, - was Index ist, - gehen Sie in den CSS-Ordner wie folgt und laden Sie diese Datei, die Normalisieren dot CSS genannt wird. - Okay, - Also, wenn wir uns das normalisierte CSS ansehen würden, - gibt es hier tatsächlich eine ganze Menge Code, der die Verwendung von CSS beinhaltet - Styling und all diese CSS-Stile. - Ihr Hauptzweck besteht darin, Text und Elemente in allen - verschiedenen Browsern gleich anzuzeigen . - Und wir werden später ein bisschen mehr darüber reden, wenn wir CSS abdecken. - Aber die Hauptsache, dass wir diese Datei verwenden möchten, ist oben auf der Seite. - Hier fängt es online an. - 10. Also mach dir keine Sorgen, wenn du den ganzen CSS-Code noch nicht verstehst, werden wir definitiv zu einem späteren Zeitpunkt darauf zurückkommen, und wir werden detailliert beschreiben, wie das alles funktioniert. - Aber hier oben gibt es zwei wichtige Abschnitte. Und dieser erste Teil hier korrigiert im Grunde die Art und Weise, wie die Dinge in älteren Browsern angezeigt werden. - Dies ist also eine Liste aller gängigen HTML fünf semantischen Tags, die Sie von Zeit zu Zeit für das Layout verwenden werden . - Und wir müssen dem Browser sagen, dass er diese auf eine bestimmte Weise anzeigen soll. - Wir werden später näher auf die verschiedenen Arten der Anzeige von Elementen eingehen. - Aber im Wesentlichen zeigen Block sagt dem Browser, dass diese Elemente ah - vertikal übereinander angezeigt werden sollen und dass sie nicht in der Lage sein sollten, nebeneinander anzuzeigen. - Dies wird ihnen physischen Raum geben und sie wie eine Box anzeigen lassen, - im Grunde wie ein Block auf der Seite, wo sie nicht nebeneinander passen können -. - Wenn Sie eine auf eine bestimmte Linie setzen, die die gesamte Linie aufnehmen wird. - Und wir haben auch Ihre Korrektur für die Audio-Canvas und Video-Elemente sind Video-Element - hier wird im Line-Block angezeigt, - was bedeutet, dass es einige Eigenschaften eines Block-Element haben, - aber es wird tatsächlich in der Lage sein, Anzeige nebeneinander mit Elementen. - Also mach dir keine Sorgen darüber, mach dir nicht zu viel Sorgen. - Wir kommen zurück, wenn wir das Kartonmodell besprechen, und wir erklären detaillierter, was Display bedeutet und wie das funktioniert. - Okay, - also möchte ich CSS an dieser Stelle nicht wirklich zu sehr berühren. - Alles ist, - Sie müssen wirklich verstehen, ist, dass durch die Verknüpfung zu dieser vorgebauten CSS-Datei normalisiert Punkt - CSS, - dies wird Firefox Safari und Chrome ältere Versionen dieser Browser erlauben, diese anzuzeigen - diese HTML semantische Tags richtig Okay, - so dass kümmert sich um jeden. - Außer Internet Explorer. - Okay, - Also erwähnte ich in einem, - uh ich denke, in den vorherigen Folien, dass für Internet Explorer, - wir können eine JavaScript-Datei, die HTML fünf Elemente erlauben wird, die Arbeit in einer älteren - Version von IE. - Also Internet Explorer 87 und sechs und darunter unterstützen keine HTML fünf Elemente. - Also müssen wir es im Grunde dem Browser sagen. - He, - Browser. - Wenn Sie zufällig Internet Explorer sind, verlinken Sie bitte mit dem Skript. - Okay, also lass uns eine Anzeige in einem Skript-Tag ausgeben, damit wir Script sagen können. - Und das ist das Tag, das wir Toe Link zu JavaScript-Dateien verwenden, hat ein öffnendes und - schließendes Tag wie das. - Und hier sind Sie eigentlich frei, JavaScript zu schreiben. - Wenn du willst. - In diesem Abschnitt werden wir tatsächlich den Skript-Tag Toe Link zu einer externen Javascript-Datei verwenden. - Und wir benutzten die SRC Das Quellattribut zwei Punkt darauf. - Ähm, - nein, - diese Art von Verbindung, - wissen Sie, - irgendwann, - können Sie sich das auswendig lernen, - aber öfter als Sie wissen, - wahrscheinlicher, dass Sie gehen, um es über Google zu verlinken. - Also, wenn Sie zu Google gehen und Sie in HTML fünf XM eingeben, - es wird mit einem Link wie diesem kommen, - was ist, dass ich zufällig wissen ist bei http Doppelpunkt Schrägstrich HTML fünf XM Punkt Google Code - dot com Schrägstrich Slash Slash SV und Schrägstrich Stamm Schrägstrich html fünf Punkt Js Ich weiß, das ist , - Ah, - das ist ziemlich ein Bissen, - Aber wenn Sie damit verbunden sind, - diese Datei hier wird HTML fünf Elemente korrekt in Internet Explorer funktionieren lassen. - Okay, - in früheren Versionen von Internet Explorer, - Internet Explorer neun und höher, - unterstützen Sie diese Elemente bereits? - Jetzt funktioniert dieser für ältere Versionen von Firefox, - Chrome und Safari. - Dieser ist auf Lee für Internet Explorer acht und darunter. - Wäre es nicht schön, wenn ich dem Browser nur sagen könnte, dass er diesen benutzen soll, wenn es wäre - Internet Explorer? - Auf diese Weise verschwende ich keine Ladezeit, wenn ich Firefox bin, wird es nicht einmal die Mühe geben, diese zu laden. - Das wäre großartig, oder? - Es stellt sich heraus, dass wir das tatsächlich tun können, denn es gibt etwas, das eine if-Anweisung genannt wird - und wenn sie bedingt ist -, die im Internet Explorer existiert. - Internet Explorer hat also eindeutig die Fähigkeit, diese bestimmte zu erkennen, wenn sie bedingt ist. - So wie wir andere Browser dazu bringen, dies zu ignorieren, während wir anfangen, als würden wir einen - Kommentar in den Code schreiben . - Also sagen wir, - wissen Sie, - wie, - äh, - weniger als Symbol, - Ausrufezeichen, - Bindestrich , - so. - Und dann hier unten, - würden wir einen Kommentar haben. - Der Kommentar würde so enden. - Richtig? - Ähm und dann müssen wir tun, damit Onley Internet Explorer diesen Code verarbeiten - hier in diesem Kommentar erstellen wir eine bedingte Verwendung von Klammern, also verwenden wir eckige Klammern, - was heißt, - um, - es ist rechts neben dem Buchstaben p auf Ihrer Tastatur. - So wollen Sie nur auf der rechten Seite des Buchstabens p auf der Tastatur gehen und Sie öffnen wollen - Klammer schließen Klammer Jetzt, - innerhalb dieser Klammern, - können wir eine Anweisung schreiben und wenn bedingt, - schwächen, - Sagen Sie, wenn und wir sagen wollen Ah, - es bedeutet weniger als und wir werden sagen, wenn weniger als Internet Explorer Version neun. - Mit anderen Worten, - wenn es acht oder irgendetwas darunter ist, - dann werden wir den Code hier machen. Art und Weise, wie wir das zur Arbeit bringen, ist, dass wir ein Ausrufezeichen machen und ein größeres Symbol wie das machen. - Ähm und das wird die if-Anweisung hier so erfolgreich beenden. - Und dann hier unten, - wir müssen nur noch eine Reihe von Klammern hinzufügen und wir beginnen, indem wir größer als - Ausrufezeichen , - Offene Klammer, - geschlossene Klammer wie diese und innen von hier, - wir werden die Worte setzen Und wenn und das endet die if-Anweisung, die ich weiß, das ist irgendwie unordentlich, hier zu suchen, - aber was passiert ist, kommt der Browser runter und wenn der Browser Firefox oder Chrome ist oder - Safari, - es scheint, dass diese ganze Sache ein Kommentar ist. - Es ist so, als wäre das nur ein Kommentar im Code. - Genau wie ich hier einen Kommentar habe, der mir sagt, dass dies eine Kopfzeile und eine gemeinsame hier oben ist , die uns sagt, dass die spezifische Übung in war also wird es jetzt alles ignorieren. - Auf der anderen Seite, - wenn das Internet Explorer acht ist, - um, - tatsächlich, - wenn seine Internet irgendeine Version von Internet Explorer, - es wird die wenn bedingte lesen, - es wird kommen und sie werden sagen, dass dies ein Kommentar ist. - Es wird wie offen sein Nein, es ist kein Kommentar. - Eigentlich gibt es Klammern hier, - und so bekommen wir den Onley Internet Explorer dazu, diesen speziellen Abschnitt der - Seite zu lesen . - Also wird es sagen, wenn weniger als Internet Explorer neun, - dann wird es dieses Skript ausführen. - Es wird zu dieser Skriptdatei verlinken. - Und dann sagen wir, - Ende wenn hier, um diese bedingte Behauptung zu beenden. - In Ordnung, - so wirklich, - diese beiden Codezeilen diese Verknüpfung zu diesem normalisierten CSS und ich verlinken darauf - JavaScript-Datei sind alles, was wir brauchen, um HTML fünf Elemente funktionieren zu lassen und sogar die ältesten, - die meisten alten Browsern. 16. HTML5-Semantische Elemente: So, jetzt unsere Seiten bereit, Wir können diese html fünf semantische Tags schreiben und alle Browser werden sie sehen. Also die 1. 1, die ich tun möchte, ist, dass ich über den Header sprechen möchte. Also haben wir erwähnt, dass der Header oben auf der Seite hier geht. Sie typischerweise, obwohl es nicht muss. Aber das ist ein Tag, mit dem wir das Konzept umgeben werden, wie, das wird sagen, offener Header Schrägstrich Header. Jetzt, wo ich diesen Abschnitt hier mit Code umgeben habe, werde ich in die Höhle. Also werde ich diesen Code hier hervorheben und ich zeige euch hier eine Abkürzung. Wenn Sie also einen Codeabschnitt markieren, wenn Sie die Tabulatortaste eingeben, wird dieser ganze Abschnitt für Sie einrücken . Sie können auch Befehl verwenden, äh, Klammer öffnen und Klammer schließen, um diesen Typ auf Mac zu bewegen. Oder Sie können die geöffnete Klammer steuern und die Klammer an Fenstern schließen. Sie können auch zu jeder Zeile gehen und einfach die Tabulatortaste drücken, wenn Sie möchten. Also, nur um Verschachtelung zu zeigen, erfinde ich gerne, wenn ich einige Elemente in einem anderen platziere, nur um die Beziehung zu zeigen , dass es innerhalb dieses anderen ist. Okay, das ist ein guter Anfang. Also haben wir dem Browser nur gesagt, dass diese h eins und H zwei und diese Links Navigationslinks sind, die diese Luft alle innerhalb des Kopfabschnitts. Ich werde den Zeilenumbruch einschalten, damit das alles leichter zu sehen ist. Okay, das ist nur meine Navigation, die ihre Alles klar umhüllt. Also, ähm, jetzt haben wir gesagt, das ist der Header. Schauen wir uns einige andere Elemente an. Wir können hier reingehen. Und wir können angeben, dass diese Links die Hauptnavigation der Website sind. Indem wir knave hier sagen, und wir können eine schließende knave Link direkt dort hinzufügen. Und ich kann hier rein gehen und in Schulden, dass die Navigation eingerückt ist. Und jetzt haben wir den Kopfteil und im Kopf habe ich meine Hauptnavigation. Das dient also einigen Zwecken. Es sagt dem Browser und den Geräten semantisch, dass Luft Luft. Erkunden Sie diesen Inhalt, dass dieser spezifische Abschnitt der Seite ist wichtig, dass dies die wichtigste Identifizierung Luft für den Inhalt dieser Website ist. Also werden H diejenigen innerhalb der Kopfzeile die größte Bedeutung haben. Diese Schlüsselbegriffe, die Sie dort einfügen und weil es keine Suchmaschinen hat, wissen, dass dies der Abschnitt der Seite ist, dass sie Links zu anderen Seiten finden können und dann gehen und erkunden Sie den Inhalt von anderen Seiten. Außerdem schafft es tatsächlich ästhetisch oder physisch eine Box. Also, jetzt, da wir diese Boxen wie Header und Knave haben, so bin ich in der Lage Teoh, Select the Knave und ich kann CSS verwenden, um dem Knave mitzuteilen, eine Hintergrundfarbe von Grün zu sein. Aber dann möchte ich, dass die Kopfzeile eine Hintergrundfarbe von Blau oder so etwas hat. So können wir Inhalte positionieren und in separaten Boxen oder Containern stylen indem wir diese Elemente verwenden. Schnitt. Um, schauen wir uns auch ein anderes HTML-Element namens H Group an. Daher ist H Group nützlich, wenn Sie mehr als eine Überschrift haben und sie irgendwie ihre Links zusammen sind. Sie sollen semantisch Teil derselben Botschaft sein oder die gleiche Bedeutung haben. Also, im Grunde wie die Art, wie Sie das lesen würden, ist, dass Sie es ein Z H W Schuhe lesen würden. Alles ist wie ein Wort. Aber wenn ich möchte, dass dieser Text größer ist und mehr Bedeutung hat. Ist das H w als das Wort Schuhe? Ich kann es in seine übergeordnete Position setzen. Also ist dieser Typ in jedem. Das ist ein H zwei. Allerdings semantisch, wenn Sie dies lesen, lesen Sie Es ist irgendwie eine Sache. CHW Schuhe Also H Gruppe sagt einem Browser, dass dies eine Gruppierung von Überschriften ist. Okay, also dort haben wir die Header h Gruppe mit dem Namen der Firma, und dann haben wir unsere Navigation. Das führt uns zu allen Seiten. Okay, auf diese ist wirklich leicht zu erkennen, diese Tags Luft all diese, Wissen Sie, diese Elemente Luft einzigartig, so dass wir sie überall auf der Seite zu finden. Wenn du nach oben und unten scrollst, kannst du sagen: Oh, Oh, hey, da ist die Kopfzeile. Okay, gehen wir runter zum nächsten Abschnitt. Das hier nennt man den Verkaufsabschnitt. Dies ist also ein Hauptbereich der Seite semantisch alles auf dieser Seite bezieht sich auf einen Verkauf, also werde ich die Abschnittselemente verwenden, die eine Box bilden. Dies wird diesen Inhalt mit einer Box umgeben und darauf hindeuten, dass es sich um einen eindeutigen Abschnitt der Seite handelt. Also habe ich mich gerade wieder durch Hervorhebung eingerückt, und das tat ich. Ah Befehle geschlossen Klammer, die eckige Klammer Schlüssel. Das sind nur zwei Tasten rechts neben dem Buchstaben p auf Ihrer Tastatur. Immer wieder können Sie auch umgeben und drücken Sie die Tab-Taste so, um sie zu bewegen. In Ordnung, ähm, schauen wir uns ein anderes semantisches Element namens Figur an, damit wir uns Abbildung und Abb ansehen können. Bildunterschrift ist eine Möglichkeit, etwas zu umgeben und darauf hinzudeuten, dass es sich Figur und Informationsfigur auf der Seite handelt. Also gehen wir voran und verwenden dieses Tag hier namens Abbildung und werden hier runter kommen und wir schließen das aus und normalerweise dies um eine Art von Medien, wie wenn es ein Diagramm oder ein Bild von etwas ist, das sich auf den Inhalt unten bezieht. Du kannst das mit Figur markieren, okay? Und dies fügt auch eine kleine Box um das Bild in diesem Fall, um das Bild herum, so dass wir es auf eine bestimmte Art und Weise stylen können, wenn wir es wollten. Eine andere nette Sache daran ist, dass dies ein Freundes-Tag hat, das Sie darin setzen können. Ähm, die so Feigenunterschrift genannt wird. So können Sie eine Beschriftung für das Bild unten hinzufügen und den Stil schwächen. Diese und semantisch deutet es darauf hin, dass diese Beschriftung mit dem Bild innerhalb dieser Figur zusammenhängt . So gehen sie normalerweise für Untertitel zusammen. Du hast so etwas wie, ähm, was passiert im Bild? Explizite Details über das Bild oder einen Titel, Manchmal ein Titel und Autor. Ich habe nicht wirklich einen bestimmten Tytler-Autor hier zu stellen. Ich werde nur voran gehen und schreiben, dass dies ein, uh, ein lizenzfreies Bild von www dot s xy dot h u. So ist dies eine kostenlose Stock Fotografie-Website, die ich dieses Bild von hier, so dass Sie die Struktur hier sehen konnte , ist Figur, und dann können wir ein Bild oder ein Video oder etwas darin haben. Und dann haben wir eine Bildunterschrift für dieses Bild, und dann schließen wir die Figur aus. Ok? Wir könnten hier auch einen Abschnitt zur Künstlerecke hinzufügen. Dies ist ein weiterer separater Teil der Seite, und ich habe diese Kommentare hier als Platzhalter platziert, weil wir diese Abschnitte hier nicht hatten , und ich denke, ich werde sie auch an Ort und Stelle lassen, weil sie es wirklich machen leicht zu sehen, wo verschiedene Abschnitte begonnen haben. Ende. Also markieren Sie all diese Jungs und in Delle so. Ok. Und, ähm, hier drin haben wir das Video, das wir gerade vor einem Moment erstellt haben. Und wenn ich wollte, könnte ich hier auch eine Figur haben. Ok? Und im Inneren von hier könnte ich auch eine Beschriftung für diese Will use Feigenunterschrift wie diese Schrägfig-Beschriftung haben. Mal sehen. Und das ist für das Video. Und hier steht, der Künstler ist Larry Hale. Also habe ich das von Ah bekommen, ich habe dieses Video von Archive Dot Org's unter der kreativen Commons Namensnennung. Lizenz. Also dieses Video ist kostenlos zu verwenden und zu teilen. Danke, Larry, und ich möchte sichergehen, dass ich ihm Kredit gebe. Also hier in der Bildunterschrift, kann ich ihm Kredit geben, indem ich sage, dass dies der Song Blaue Schuhe ist und ich werde voran gehen und ein Copyright hier setzen , indem ich sage: Setzen Sie das Copyright-Symbol, indem Sie sagen und kopieren. Und dann machen wir diesen Kopierer. Und von dem Künstler, der Larry Hill ist. 2007 ist eigentlich, wenn er Kopierer in diesem und wir werden einen Zeilenumbruch hinzufügen, und ich werde voran gehen und einfach sagen, dass dies mit der Creative Common Namensnennung 3.0 Lizenz lizenziert ist . Das bedeutet, dass ich ihm einfach zuschreiben muss, dass das Hiss ist. Ich kann nicht behaupten, dass dies meine eigene Arbeit ist, also muss ich ihn damit zuschreiben. Aber es ist kostenlos für mich zu teilen und zu verwenden. Danke, Larry. Shoutout Zeh Larry dafür. Okay, also gibt es meine Figur, ähm, meine Figurenbeschriftung hier und das Ende meiner Figur. Und dann hier ist meine Überschrift und mein Absatz und das ist alles in meinem Abschnitt. Dies ist die Künstlerecke, die hier beginnt und dort unten endet. Also, jetzt habe ich eine nette kleine Kiste um diesen Abschnitt. Ich kann auch einen Abschnitt zur News-Seite hinzufügen. Das ist ein „Das ist ein langer“. Ich habe dort viel geschrieben, und wir werden das so schließen, und es sieht so aus, als hätten wir auch einen Detailabschnitt, und dieser Detailabschnitt hat es tatsächlich. Es ist in drei kleinere Teile aufgeteilt. Ähm, also habe ich einen Abschnitt von Links, die sind , ähm , für Nun , da, gibt es nirgendwo Links. Jetzt habe ich nur Dies ist ein Platzhalter, aber diese Links werden zu all diesen verschiedenen sozialen Websites verlinken, und dies wird am Ende der Seite direkt vor der Fußzeile sein, was in einem Moment tun wird. Wir haben auch einige Links zu einem anderen Schuh verwandt. Vielleicht diese Luft, wie Schwesterfirmen oder Freunde dieser Firma. Also haben wir einige Links dort, und wir haben auch, wie, die Telefonnummer und Adresse, und Dinge wie diese werden am Ende jeder Seite sein. Also wollte ich, dass diese Dinge sind, wissen Sie, das ist alles wirklich der gleiche Inhalt. Dies waren alle Website-Details hier, aber ich wollte diese Teoh ästhetisch in verschiedenen Boxen sein. Also, wenn Sie jemals etwas in einer Box spielen wollen, aber es ist nicht, ähm, es ist nicht alles gleich. Entschuldigen Sie mich? Es handelt sich nicht um verschiedene Arten von Inhalten. Dann müssen Sie nicht wirklich ein Abschnitt-Tag verwenden. Also hier kann ich einfach einen Abschnitt um alle drei dieser kleineren Boxen legen. Das ist also ein Abschnitt über die Details der Website und innerhalb dieses Abschnitts sind drei kleinere Boxen und ich benutze nur das Tag Div. Sie sind auch zu zeigen. Das ist eine Schachtel. Das hier ist eine weitere Box. Also ist Div ein Tag, das einen Container erstellt. Und es ist kein fünfsemantisches HTML-Tag. Es wird mir nur einen Weg geben, um jeden dieser Teile des Detailabschnitts ästhetisch eine Schachtel zu stylen . Okay, ähm, hier unten. Schließlich haben wir die Fußzeile, die seine eigenen HTML fünf semantischen Tags hat. Ich kann das da reinlegen. Das heißt Footer, und wir können Tab drücken, um diesen Inhalt dort zu erfinden. Cool. Also jetzt alle meine Inhalte sind mit den entsprechenden HTML fünf semantischen Tags umgeben. Ich habe jetzt kleine Boxen um jeden Abschnitt, und das wird es viel einfacher machen, wenn es an der Zeit ist, das Seitenlayout zu erstellen und Dinge zu bewegen. Also sind wir alle darauf bereit. Ich habe bereits voran gegangen und die diese Tags dem Rest der anderen Seiten für Sie hinzugefügt, so dass Sie sehen können, wie ich diese auch auf den anderen Seiten aufgenommen habe. Ok, 17. Metadaten: - Das Letzte, was wir tun wollen, ist ziemlich schnell. - Wir wollen nur einige zusätzliche Meta-Tags hinzufügen, - einige Metadaten in den oberen Bereich des Kopfbereichs. - Also geh ich hier runter. - Es spielt keine Rolle, wo du die hinstellst, solange sie im Kopfteil sind. - Ähm, und wir werden noch ein Meta-Tag hier hinzufügen, bevor wir Meta auch benutzt haben. - Sagen Sie dem Browser die Formatierung der Zeichen auf der Seite. - Also setzen wir sie auf UTF acht formatierte Zeichen. - Und dieses Mal geben wir ihm ein paar Schlüsselwörter und eine Beschreibung. - Also, um mit zu beginnen wird sagen, Meta-Name gleich und wird Schlüsselwörter wie das sagen. - Und dann setzen wir ein Leerzeichen und fügen ein weiteres Attribut namens Inhalt hinzu und - innerhalb des Inhalts, - wir werden nur ein Komma setzen, - getrennte Liste von Begriffen, die sich auf diese Seite beziehen. - Dies wird einer Suchmaschine helfen, bestimmte Wörter oder Begriffe mit dieser Seite zu verknüpfen . - Das könnte von Seite zu Seite anders sein, - eine Seite, auf der Sie diese Wörter haben könnten, - Sie wissen, sind Schlüsselwörter und eine andere Seite, - Sie könnten eine völlig andere Schlüsselwörter haben, also ist es gut, genau zu sein. - Toe, welche Inhalte auf dieser Seite vorhanden sind. - Also gehen wir und sagen alle Begriffe, von denen wir denken, dass die Leute möglicherweise tippen könnten, um diese Seite zu finden . - Also sagen wir. - Schuhe, - Sandalen, - Hausschuhe. - Dies könnte einige Gedanken von Ihrer Seite für Ihre eigenen individuellen Projekte dauern. - Sie müssen darüber nachdenken, welche Bedingungen passen. - Mal sehen, - Mal sehen, was soll ich sonst noch sagen? - Ich sage Sneakers Fuß Wo? Für den Fall, dass jemand Schuhe tippt, könnte er es anders eingeben. - Vielleicht tippen sie es so. - Ähm, - sagen wir Socken und vielleicht ein paar Materialien. - Zum Beispiel, wenn sie Leinwandschuhe oder, - ähm, - sagen wir, - wie Wildlederschuhe. - Vielleicht sind sie auf der Suche nach Schnürsenkeln. - Lasst uns mal sehen. - Also werden wir sagen, - auch Dinge wie Lager und Großhandel. - Sie müssen also darüber nachdenken, welche Begriffe für Ihr Projekt wichtig sind. - Ich glaube, das reicht da. - Ich denke, du bekommst den Punkt, - okay, - und dann fügen wir auch eine Beschreibung hinzu. - Also die Schlüsselwörter, - wie gesagt, diese sind nützlich, um Suchmaschinen bei bestimmten Begriffen zu helfen und - diese Begriffe mit dieser Seite zu verknüpfen. - Wir können auch eine Beschreibung hinzufügen, die getan wird, indem man einen Namen erfüllt, - Beschreibung und Inhalt ist, wo wir die Beschreibung eingeben. - Das ist also die Beschreibung, die auftauchen wird, wenn die Leute uns in einer Suchmaschine suchen. - Die Suchmaschine wird diese Beschreibung unter dem Link auflisten, wenn wir in den - Ergebnissen kommen . - Also lasst uns etwas sagen. - Hoffentlich nichts zu kitschig. Aber ich komme gerade mit diesem Zeug im laufenden Betrieb so gut, sagen , Sie sind Halt für die besten Angebote für die schärfsten Schuhe von heute. - Cool. - Okay, also gibt es unsere Meta-Schlüsselwörter und unsere Meta-Beschreibung. - Alles klar, das war's. - Ich habe diesen Code bereits auf den anderen Seiten für dich hinzugefügt und, ähm, - jetzt Dinge. - Es gibt Dinge begann gut aussehen, - ihre eigene Spur bewegt sich vorwärts, um CSS zu lernen und auch zu beginnen Zehe lernen Seitenlayout. - Also danke fürs Zuschauen. - Und was Sie jetzt tun möchten, ist, sich frei zu der nächsten Codeherausforderung zu bewegen, wo Sie Ihre eigenen Videos und semantische Tags in Ihr Website-Projekt einfügen werden. 18. Stylen des Fronters: - Hi. - Willkommen zurück. - Dies ist Folien 2.2, - Styling der Front-End-CSS-Grundlagen. - Nun, - in früheren Übungen und Vorträgen, - haben wir gelernt, HTML-Code zu schreiben, der die Struktur und den Inhalt für unsere Webseiten zur Verfügung gestellt -. - Nun, für den Rest des Kurses, - werden wir CSS erkunden, - was uns dann ermöglicht, all diese Inhalte zu stylen, die wir erstellt haben. - Also werden wir die Syntax von CSS besprechen, - und dann später - werden wir zu einer Übung übergehen, wo wir all die verschiedenen demonstrieren werden - CSS-Selektoren, die es uns erlauben, Inhalte auf der Seite auszuwählen und dadurch so dass wir - Stil es. - Wir werden auch verschiedene Farbwerte erforschen, die wir verwenden können, um diesen Elementen Farbe zu verleihen . - Und wir werden auch über Fondserklärungen diskutieren, die wir verwenden können, um zu stylen, sind Typografie. - CSS steht für Cascading Stylesheets. - Sie haben es wahrscheinlich so genannt, weil CSS uns die Möglichkeit gibt, einen Stil über mehrere Seiten in einer Website anzuwenden . - Also haben wir einen einzigen Ort, an dem wir Cascada-Stil auf zahlreiche andere Seiten hinunter können . - CSS wurde erstellt, ist eine bessere Lösung, um HTML-Elemente am Anfang zu stylen. - Es war einmal, - wir haben HTML verwendet, um HTML zu stylen und es war wirklich eine große Last und eine Menge Arbeit. - Eso CSS tritt ein und gibt uns wieder einen einzigen Ort. - Wir können gehen, um alle Farben aller Absätze auf der Website im Gegensatz zu ändern - müssen in jeden einzelnen Absatz gehen und die Farbe pro Element ändern. - Also ist es wirklich eine riesige Zeitersparnis. - Es macht Spaß, - schnell und einfach. - Meiner Meinung nach - hat es, - ah, - einzigartige Syntax getrennt von HTML. - Es ist also eine völlig andere Sprache als HTML. - Also musst du alle Regeln werfen. - Wir haben gelernt, wie HTML geschrieben hat, um irgendwie aus dem Fenster zu gehen, wenn Sie sind - Fokus auf CSS, weil es seine eigene einzigartige Sprache ist. - Es gibt drei verschiedene Formate, die Sie CSS Aussehen Onda sehen könnten. - Wir reden über jeden von denen. - Dies ist das CSS in der Steuer und es ist ziemlich unkompliziert. - Sie können sehen, dass es aus diesem Selektor hier in diesem Fall besteht, - der Buchstabe P, - der alle P-Tags oder alle Absätze auswählt, die wir in unseren HTML-Seiten sagen könnten . - Nun folgt der Selektor Wir haben eine Reihe von geschweiften Klammern hier, - eine Öffnung und eine schließende geschweifte Klammer wie diese und innerhalb der geschweiften Klammern, - das ist, wo wir alle Stile erklären, die beeinflussen, was wir wählen. - Also in den geschweiften Klammern hier leben, was wir Deklarationen nennen, - und Sie können eine einzelne oder mehrere Deklarationen so viele haben, wie Sie möchten, um das zu stylen - bestimmtes ausgewähltes Element. - Also in diesem Fall, - Sie können sehen, dass wir die Textfarbe aller Absätze in Schwarz ändern, - und diese spezielle Deklaration besteht aus der Eigenschaftsfarbe. - Und dann haben wir dieser Eigenschaft den Wert gegeben. - Schwarz und Eigenschaften und Werte werden durch einen Doppelpunkt getrennt, - und sie enden immer in einem Semikolon. - Jetzt ist das Semikolon wichtig, denn so sagen wir dem Browser, die getan wurden - Definieren eines Wertes für diese bestimmte Eigenschaft. - Also, wenn Sie ah, - Siris von Erklärungen, - mehrere Erklärungen für dieses ah, - Absatz Element haben, - dann werden Sie sicherstellen wollen, dass alle Enden dieser Erklärungen in einem - Siris von Erklärungen, - mehrere Erklärungen für dieses ah, - Absatz Element haben,- dann werden Sie sicherstellen wollen, dass alle Enden dieser Erklärungen in einem Semikolon. - Wie ich bereits erwähnt habe, - gibt es drei verschiedene CSS-Formate und diese sind in Zeile, - intern oder extern für diesen Kurs, - wir werden externe CSS verwenden, - und das wird uns am meisten geben Vorteile und die geringste Menge an Ärger und Ärger - wie wir auf unserer Website arbeiten. - Das ist also wirklich die Best Practice oder die bevorzugte Methode. - Wenn Sie eine Website oder eine Webanwendung erstellen, - möchten Sie Ihre Inhalte mit externem CSS formatieren. - Dies bedeutet, dass es ein separates externes CSS-Stylesheet oder eine separate CSS-Datei gibt, die - Styling alle anderen HTML-Seiten. - Das ist im Gegensatz zu diesen anderen Formaten in Linie und intern, denen wir uns wirklich scheuen wollen. Also fragen Sie sich vielleicht, ob wir empfehlen, diese 1. 2 Formate nicht zu verwenden, warum sollte ich es Ihnen beibringen? Nun, ich denke, dass du weißt, du wahrscheinlich diese anderen Formate in der realen Welt sehen wirst, wenn du einen anderen Website-Code siehst oder wenn du anfängst, an einer anderen Website für sie zu arbeiten, dassdu wahrscheinlich diese anderen Formate in der realen Welt sehen wirst, wenn du einen anderen Website-Code siehst oder wenn du anfängst, an einer anderen Website für sie zu arbeiten, Sie können mit einer dieser anderen Methoden von CSS auf eine andere Website stoßen. - Also ich denke, es ist wichtig, dass Sie verstehen, was es ist und Sie verstehen, was das Was - die Fallstricke sind und diese anderen Formate verwenden, so dass Sie die richtige Lösung wählen können - für Website-Building, - die extern ist. - Dies ist ein Beispiel für in Zeile CSS. - Wenn Sie also jemals ein HTML-Markup betrachten und sehen, dass es ein Style-Attribut gibt - innerhalb eines bestimmten Elements innerhalb des Werts für dieses Style-Attribut - können Sie CSS-Deklarationen schreiben. - In diesem Fall, - wir haben die Eigenschaft Schriftart gestrichelt Stil geschrieben und geben ihm einen Wert von metallisch. - Und was das tun wird, ist, dass es den Text in diesem Absatz und Onley ändern wird - dieser Absatz in einen talischen oder kursivierten Text. - Also der Hauptnachteil dort können Sie sich wahrscheinlich vorstellen, - ist, dass, wenn Sie dieses kleine Style-Tag alle Absätze hinzugefügt haben, die Sie ein Talent sein wollten - das könnte ziemlich schnell aufsummieren. - Vielleicht, wenn Sie eine größere Website mit Hunderten von Seiten haben und Sie Ihre Meinung ändern, dass Sie - nicht mehr wollen, dass dieser Text ein Tallix ist, - es würde erfordern, in jedes dieser verschiedenen Hunderte von Elementen auf Ihrer Website gehen - Layout und ändern Sie dies von Metallics zurück auf Normal. - Also der große Nachteil der Binnensee beurteilt, dass es nur das Element betrifft, das Sie sind - Anwendung, dass in Linie CSS jetzt. - Ein Ort, den dies sinnvoll machen kann, ist, wenn Sie verwenden, wenn Sie einen HTML - Newsletter erstellen . - Aber das ist wirklich der einzige Ort, an du das sehen würdest. - Wo wäre eine gute Idee, es in diesem Format zu haben? Als Nächstes werden wir uns ansehen, es heißt Internes oder Embedded CSS, und Sie können sehen, dass dies innerhalb des Kopfabschnitts einer HTML-Seite erscheint. - Internes CSS besteht aus dem Style-Element hier, das den öffnenden und schließenden Stil hat - Tag, - und innerhalb davon - Sie sind frei, CSS-Selektoren und Deklarationen zu schreiben. - Also das ist nur, - ah, - voll von CSS-Anweisung hier, die innerhalb dieses öffnenden und schließenden Style-Tags geschrieben ist, - und das könnte intern innerhalb einer HTML-Seite sein. - Nun, - der Nachteil davon ist, dass dies nur Absätze auf dieser einzigen Seite beeinflussen wird . - Also, was auch immer HTML-Seite, - Sie haben diesen Code in den Kopf kopiert. - Es würde sich auf alle Absätze auf dieser Seite auswirken. - Was wir also wirklich wollen, , ist, dass wir in der Lage sein wollen, - wissen Sie, - die Farbe unserer Absätze von einem einzigen Ort aus zu ändern. - Auf diese Weise, - wenn wir Hunderte von Seiten auf unserer Website haben, - können wir sagen, dass alle Absätze Farbe von einem Ort gelesen werden. - Und wenn wir unsere Meinung ändern, haben wir einen einzigen Ort, zu dem wir zurückkehren können, um allen Absätzen zu sagen, dass sie blau werden sollen. - Also, um das zu tun, - wir brauchen externe CSS External CSS ist ah ist wirklich die beste Lösung für Websites und Web - Anwendungen, weil wir eine separate Datei erstellen, die in diesem Fall Stil dot CSS ist und - wir verlinken diese Datei im Kopfbereich unseres HTML-Dokuments. - Nun, - wenn wir diese Datei öffnen und in diese Stil-Punkt-CSS-Datei schauen, - würde es etwa so aussehen, wo wir einen Selektor schreiben und dann Deklarationen in - Stil diesen Selektor. - Also, hier erzählen wir alle Absätze. - Teoh, - Sie wissen, alle Absätze Website breit und alle verschiedenen Seiten unserer Website zu haben - die Farbe schwarz. - Also, wenn wir 100 Seiten auf unserer Website haben, - jede dieser 100 Seiten hat diesen Link Code ganz oben, - der dem Browser sagt, wenn er lädt, dass eine bestimmte HTML-Seite zu beachten oder zu - verweisen auf die CSS-Stile von diesem andere Datei. - Und es geht in die Akte und liest sie. - Und es sieht so etwas, das all diese Absätze auf der ganzen Website sagt - haben die Farbe schwarz. - Dies wird also verwendet, indem eine externe CSS-Datei mit allen HTML-Seiten verknüpft wird, die wir stylen möchten - und die Vorteile. - Jetzt haben Sie einen einzigen Ort, an dem Sie Änderungen vornehmen können. - Das wird die Elemente vor Ort beeinflussen. - Das ist ein Sfar, wie ich in die Dias gehen werde. - Für diese Vorlesung, - fühlen Sie sich frei, den vollständigen Satz von Folien unter dem PDF-Link unter dem Video zu überprüfen, - und so können Sie die restlichen Folien verwenden. - Sie können sie betrachten, - und Sie können sie als Überprüfung für alle verschiedenen Selektoren Farben und Text verwenden - Formatierung, die in der Übung verwendet wird. - Also werden wir jetzt mit der Übung fortfahren, - und in dieser nächsten Übung werden wir ein CSS-Stylesheet erstellen und dann lernen - verschiedene Selektoren, die wir verwenden können, um verschiedene Inhalte auf unseren Webseiten zu stylen. 19. Einrichten eines externen an: - Dies ist Übung 2.2 CSS Grundlagen. - Ich habe schon den Quellcode für diese Übung heruntergeladen, und ich habe ihn hier in einem Blindtext aufgebracht, um loszulegen. - Das erste, was wir tun wollen, ist, dass wir eine externe CSS-Datei erstellen wollen - die wir verwenden können, um alle unsere anderen HTML-Webseiten zu stylen. - Also gehen wir weiter und gehen Sie zum Datei-Drop-Down-Menü und sagen neue Datei. Und dann, obwohl das leer ist, werden wir es einfach speichern. Der Schläger sagt „Datei speichern“. - Und ich werde sicherstellen wollen, dass das im CSS-Ordner platziert wird. - Also möchten Sie sicherstellen, dass Ihr erstes im, - um das Arbeitsverzeichnis für diese Übung, - was 2.2 Strich CSS Dash Fundamentals ist, - und dann möchten Sie sicherstellen, dass Sie in den CSS-Ordner gehen dort und innerhalb der - CSS-Ordner, in denen alle unsere externen Stylesheets leben werden und wir gehen weiter und - nennen das, - und ich werde einfach diesen Style Dot CSS nennen und auf Speichern klicken. - Also, wenn wir hier rüber in die Projekt-Sidebar kommen. - Wir können sehen, dass wir im CSS-Ordner hier unsere Stylesheets in der letzten Übung haben -, - bereit, dot CSS zu normalisieren und das wurde alle Browser auf die Standard-Textgröße gesetzt und - machte auch HTML fünf semantische Elemente korrekt und Dinge wie diese angezeigt werden. Das war also ein vorgeschriebener CSS-Code, den ich heruntergeladen habe, um uns einen guten Anfang zu geben und dann werden wir diesen in Ruhe lassen. - Wollten nie mit normalen Augen verwirren, - würden alle unsere benutzerdefinierten Stile hier in dieser Stil-Punkt-CSS-Datei schreiben. - Okay, - jetzt haben wir dieses Style Dot CSS Stylesheet an Ort und Stelle. - Das nächste, was wir tun möchten, ist, dass wir zu jeder unserer HTML-Seiten gehen und sicherstellen wollen, dass wir dem Browser den Zehenlink zurück zu diesem Stylesheet sagen. - Also gehen wir weiter und gehen in den Hauptstammordner dort, - und ich öffne einfach die erste Seite hier, - die Katalogpunkt html genannt wird, - und ich möchte in den Kopfbereich dieser Seite gehen und ich werde einfach nach unten scrollen. - Ich habe eigentlich schon einen Platz für diese online 13 hier gemacht. - Also direkt unter meinem Link zur normalisierten Punkt-CSS-Datei, - Das nächste, was ich tun werde, ist, einen Link zu meinem Stylesheet zu erstellen. - Jetzt ist das ah Link-Tag wie dieser Toe Link zu externen Dateien wie diesem und wir müssen - setzen Sie zwei verschiedene Attribute hier rein. - Die erste 1, die ich setzen werde, heißt R E l. - Und ich möchte sagen, dass die Beziehung ist, dass es ein Stylesheet ist, - dass diese Art von Link ein Stylesheet ist. - Und das nächste, was wir tun wollen, ist, dass wir ihm das Attribut geben wollen, - h, - ref, - und das wird auf die Lage unserer Stylesheets zeigen. - Also hier sind wir auf der Katalog-Dot-HTML-Seite. - Ich möchte dem Browser sagen, dass er in den CSS-Ordner nach der Datei namens style dot - CSS Great suchen soll. - Und dann können wir das retten. Jetzt kann ich diese Zeile kopieren und einfügen, und dann werde ich diese Codezeile zu allen Seiten auf der Website hinzufügen, die ich gerne mit diesem Stylesheet verlinkt hätte, also werde ich das einfach hervorheben und einen Befehl ausführen. - Siehe, um zu kopieren, wäre es ein Steuerelement siehe auf Windows Command, - Siehe auf Mac. - Und dann gehen wir zu der nächsten Datei, die bei HTML kontaktiert wird. - Und ich werde Befehl V auf Mac tun die Paste oder Kontrolle V unter Windows einfügen, - und wir werden speichern und ich werde durch die Indexseite gehen und einfügen und speichern, - und ich werde auf die Preisseite gehen und ich werde einfügen und dann die Datei speichern. - Und schließlich, - wir haben den Verkauf Punkt HTML-Seite, - und ich werde den Link dort einfügen und speichern als auch. - Also, jetzt haben alle unsere Seiten hier jeweils den Link zu diesem externen Stylesheet. - Das bedeutet, dass ich jetzt beginnen kann, in dieses Stylesheet zu gehen, - und ich kann anfangen, Code zu schreiben, der all diese verschiedenen Seiten zu stylen und beeinflussen wird - von einem einzigen Ort 20. Schriftwahl: - Ok, - großartig. - Also haben wir hier gerade ein externes Stylesheet erstellt, - und wir können nun diesen Datei-Style Dot CSS öffnen und darin drin Hier können wir anfangen zu lernen - um einen CSS-Code zu schreiben. - Das allererste, was ich Ihnen in CSS beibringen möchte, ist, einen Kommentar zu schreiben. - Wenn Sie also nur auf die gleiche Weise aussehen, dass wir Kommentare und HTML erstellen können, - können wir auch Kommentare in CSS erstellen, um uns eine kleine Notiz oder eine - Nachricht im Code und einen Kommentar zu geben . - CSS beginnt mit dem Schrägstrich nach vorne und dann dem Starkey, - die Verschiebung in der Zahl acht ist. - Also dieses Recht, - das ist ein Kommentar, - und Sie müssen einen Kommentar mit Star und Ford Slash beenden. - Es ist also von Anfang bis Ende umgekehrt. - So haben Sie Schrägstempel und dann können Kommentare und CSS sie auf einer einzigen Zeile sein oder sie - können auch mehrzeilig sein. - Zum Beispiel, - konnte ich schlagen, - zurückkehren und zur nächsten Zeile gehen. - Ähm, - und ich werde einfach voran gehen und sagen, - zum Beispiel, - zum Beispiel, - so dass diese Kommentare mehrere Zeilen umfassen können, ist lang, wie Sie den Anfang und das Ende haben - Zeichen richtig, als alles dazwischen hier gehen kann, - und der Browser wird es ignorieren. - Okay, - äh, mal sehen. - Also lasst uns einen weiteren Kommentar schreiben, um uns an die CSS-Syntax zu erinnern, die wir in diskutiert haben - der vorherige Satz von Folien sagt. - Sie erinnern sich, dass CSS mit einem Selektor beginnt, - und dann folgen geschweifte Klammern. Und in diesen geschweiften Klammern, können Sie einige Deklarationen geben, die aus einer Eigenschaft in einem Wert bestehen. - Und wenn Sie mehrere Eigenschaften für einen Selektor setzen möchten, - können Sie sie einfach so schreiben, - und Sie können wirklich so viele schreiben, wie Sie möchten. - Das könnte kurz oder lang sein, wie sie daran interessiert sind. - Beenden wir den Kommentar dort. - Okay, - Also, - zum Beispiel, - schauen wir uns einen Selektor an, der einen Typselektor genannt wird. - Zuerst werden wir einen Typenwähler suchen. - Eso-Typselektoren verwenden den Namen des Tags, um dieses Element zu finden. - Also, was wir tun können, ist, - sagen wir, - wissen Sie, - hypothetisch, - wir wollten gehen und wählen Sie alle Absätze auf unserer Website. - Wir können den Buchstaben P verwenden, um alle diese P-Tags auszuwählen, damit ich ein wenig schreiben könnte - Kommentar in dem Maße, dass dies wählt, - Oh, - P-Elemente innerhalb unserer Seite. - Also lasst uns gehen, um die Größe des Fonds für jeden dieser Absätze zu ändern. - Also kann ich sagen, Schriftstrich Größe der Eigenschaft und dann ist ein Wert. - Ich sage 14 Pixel. - In Bezug auf die Größenbestimmung Typografie, - Sie können Pixel verwenden, - Sie können Punkte verwenden, - Sie können Prozentsätze verwenden, - und Sie können auch EMS schneiden. - So Pixel ist eine feste Größe 14 Pixel ist die Größe auf jedem Bildschirm? Und dann haben wir auch Punktesystem, mit dem Sie vielleicht aus verschiedenen Textverarbeitungsprogrammen vertraut sind. Und dann haben wir auch Punktesystem, - Jedoch, - Ich versuche gerne, und vermeiden Sie die Verwendung von Punkten. - Und der Grund, warum ist, - um, - zum Beispiel, - 12 Punkte Größe in Microsoft Word kann nicht die gleiche wie 12 Punkt Größe und Feuer Fox oder die - gleiche Größe und Safari. - Also, - ähm, - Punkt-Dimensionierung für Typografie, - leider, - ist ein wenig anders, - abhängig von der Anwendung, in der Sie sich befinden. Deshalb,mit Pixeln, mit Pixeln, weißt du wenigstens genau, was du bekommst. - Wir haben auch Prozent, was wie ein variabler Betrag ist. - Also, äh, - im Wesentlichen, - wenn ich 100% als seine Bezugnahme auf 100% der aktuellen Größe des Textes. - Es ist also irgendwie in Bezug auf die aktuelle Größe des Textes. - In diesem Fall, - 14 Pixel. WennSie vorher nicht angegeben hätten, wie groß die Absatzgrößentechnologie sein sollte, dann würde es nur diese Größe vom Browser erben. Sie vorher nicht angegeben hätten, WennSie vorher nicht angegeben hätten, wie groß die Absatzgrößentechnologie sein sollte, - Also standardmäßig, - wenn Sie nicht die Größe von Text und einen Browser angeben, - haben Sie bereits bemerkt, dass der Browser Absätze eine bestimmte Größe macht und - Überschriften eine bestimmte Größe macht. - Also würde 100% in diesem Fall, - essen, - wissen Sie, - äquivalent sein, was der Browser entscheidet, ist der Standard. - Wenn Sie 200% sagen, würde es es verdoppeln, - so würde es den Text doppelt so groß machen wie er normalerweise ist. - Und, - natürlich, - wissen Sie, - 50% wären so etwas wie die Hälfte der Größe. - Okay, - wir haben auch EMS und M ist ein Messreste aus den Tagen des Satzes, - und es ist auch ein Betrag, der in Prozent in diesem Fall ähnlich ist, - in der Art, dass es irgendwie relativ zur aktuellen Schriftart ist. - Größe, - zum Beispiel, - ein M in diesem Fall wäre gleich 14 Pixel. - Wenn ich zu em sagte, - wäre es das Äquivalent von 28 Pixeln, wenn ich hier bereits eine Schriftgröße angegeben habe, - Ähm, - und wenn ich sagte, Sie wissen 280,5 M oder 0,5 sie, - das wäre das Äquivalent von sieben Pixeln, - Ähm, - und wieder dasselbe wie zuvor mit dem Prozent. - Wenn ich nicht, - wissen Sie, - angegeben eine Größe als dieser Betrag wird sich beziehen, ein m wird auf was auch immer die - Standardgröße des Browser-Textes ist, - und dann würde M diese Größe verdoppeln. - Okay, - also sind Prozent und EMS relativ zu welcher Größe der Text anfänglich ist, - und Punkte und Pixel werden es tatsächlich zu einem festen Betrag ändern. - Punkte ist, - wissen Sie, - eine Art Zahl, die sich vom Browser der Browser ändert. - Pixel wären also wirklich unsere bevorzugte Methode, um eine feste, - ähm, -Textgröße zu erstellen - ähm, - . - Okay, - äh, - lasst uns hier ein anderes Grundstück einbauen. - Nehmen wir an, - abgesehen von der Änderung der Größe, - Ich möchte auch die Zeilenhöhe ändern, - also gehe ich voran und sage Linie, - Strichhöhe und Zeilenhöhe ist der Abstand zwischen den Zeilen im Absatz. - Also lasst uns gehen und ein EMS dafür suchen. - Also wäre ein M in diesem Fall gleich 14 Pixel oder einzelner Zeilenabstand. - 1.5 wäre das Äquivalent von 1,5 Zeilenabstand. - Und zu M wäre das Äquivalent von doppeltem Zeilenabstand, - was in diesem Fall - 28 Pixel von einer Textzeile zur anderen wäre - was in diesem Fall . - Speichern wir es und schauen wir uns das an. - Lassen Sie uns nur sicherstellen, dass dies funktioniert und wir bestreiten, um sicherzustellen, dass unsere Style dot CSS - Seite korrekt mit allen Seiten verlinkt ist gesehen. - Gehen Sie weiter und speichern Sie hier und springen wir zurück zum Browser. - Und schauen wir uns diesen Absatz hier an und sehen, ob wir den Zeilenabstand in der Textgröße ändern - also gehe ich voran und drücke Aktualisieren, - und dort kannst du sehen, dass es funktioniert hat. - Dieser Text ist kleiner geworden. - Anscheinend, - die Standardgröße, mit der ich vorher in Absätzen gearbeitet habe, war etwas größer als - 14 Pixel, - und der Zeilenabstand war auch näher beieinander. Vielleicht habe ich entschieden, dassdas ein bisschen zu weit voneinander entfernt ist, also kann ich wieder reinkommen und das ändern. , dass Vielleicht habe ich entschieden, dassdas ein bisschen zu weit voneinander entfernt ist, - Ich kann dies anpassen, um zu wollen, - sagen 1,5 sie. - Wir versuchen 1,5 Zeilenabstand und vielleicht möchte ich das etwas größer machen. - Ich möchte sagen, - wie 16 Pixel oder so etwas. - Also werden wir speichern und wir kommen zurück zu Chrome und werden so aktualisieren, - und das sieht ziemlich gut aus. - Das ist ziemlich lesbar. - Haben Sie die Zeilenhöhe, - das ist der Abstand zwischen der Unterseite dieses d und der Unterseite dieses Sie hier, dass - sieht ziemlich gut aus. - 1,5 Zeilen und ich mag die Größe der Zeichen, es ist ziemlich anständig zu sehen, wenn wieder aufgenommen - aus den ganzen Weg. - Okay, - wenn Sie Texas nicht reagiert oder die gleiche wie auf meinem Bildschirm, - Sie können gehen, um im Browser zu sehen, - und Sie können überprüfen, um sicherzustellen, dass der Text auf die tatsächliche Größe eingestellt ist, weil Browser - Sie können die Bildschirmgrößeanpassen, anpassen, indem Sie hineinzoomen verkleinern. - Wir sorgen dafür, dass wir hier nur eine Null sind. - Tatsächliche Größe mit anderen Worten, - hat den ganzen Weg wieder aufgenommen. - Okay, - gut. - Also komm zurück und lasst uns tatsächlich experimentieren, indem wir einen anderen erschaffen. - Lassen Sie uns tatsächlich einen anderen Typenwähler hier erstellen. - Also werde ich ausgehen und eine Feigenunterschrift erstellen, und das wird alle Feigenbeschriftung Elemente auswählen. - Mit anderen Worten, - wählen Sie alle Feigenbeschriftungselemente so aus. - Okay, - also für die Feigenunterschrift, - können wir einige andere Möglichkeiten der Anpassung des Typs erforschen. - Schauen wir uns eine andere Eigenschaft namens Schriftart an. - Warte, - und das ist mit dem Gewicht des Fonds, - und das könnte normal sein. - Es könnte auch zu fett gesetzt werden, - und es kann auch so auf Boulder gesetzt werden, - was das kühnste ist. - Wir haben auch eine Reihe von Zahlen im Bereich von 100 2 900, die Sie verwenden können, um die - Dicke oder das Gewicht des Textes auf und diejenigen, die in Schritten von 100 gehen. - So, - zum Beispiel, - 100 wäre die leichteste 200 würde leicht Aufkleber 300 400 so den ganzen Weg bis zu - 900 sein . - Ich glaube so in diesem Fall, - wir wollen nicht, dass der Text fett ist. - Wir werden eigentlich normal benutzen, was in diesem Fall die Standardeinstellung ist. - Also müssten wir wirklich nicht für dieses bestimmte Element angeben, es sei denn, wir ändern es - zu, - wie, - fett oder so etwas. - Aber zuerst werden wir es nur ansehen, - äh, - wie normale Größe. - Warten Sie. - Und dann lassen Sie uns auch die Schriftgröße hier ändern, - was wir im vorherigen Selektor gesehen haben. - Also sagen wir Schriftart Bindestrich Größe, - und wir setzen es auf 12 Pixel. - Ok. - Und, äh, - mal sehen, - was würden wir sonst gerne tun? - Lasst uns auch Linie setzen. - Höhe wird sagen, liegend Strich Höhe. - Und wir werden diesen Kerl auch sagen, dass Mazza Absätze 1,5 AM sagen, damit ich dies angeben könnte - auch in Pixeln Prozent, - ems oder Punkte? - Uh, - mal sehen. - Also Höhe der Linie. - Schauen wir uns auch die Änderung der Typografie an. - Also werden wir so eine Schriftart-Dash-Familie verwenden und diesen Kerl auf etwas anderes setzen , sagen wir, wir wollen, dass es Georgia ist. Art und , DieArt und Weise, Familienarbeiten zu finden, ist, dass Sie frei sind, gemeinsame Schriftarten zu wählen. - Zuerst werden wir uns eine Lösung ansehen, die websichere Sponsorenschriftarten verwendet, die üblicherweise auf den Computern des Benutzers gefunden werden . - Und dann, - später, - werden wir uns mit einem spezialisierten Webfonds oder einem Fonds, den die Leute vielleicht nicht haben - und werden das tun, indem sie es laden, - den Fonds aus dem Web laden, so dass selbst wenn die Person hat nicht so viel Spaß auf ihrem Computer, - werden sie immer noch in der Lage sein, es zu sehen. - Es wird CSS drei Schriftart Gesicht-Methode verwenden, um das zu erreichen. - Aber um damit zu beginnen, - lassen Sie uns einfach eine Schriftart verwenden, die sicher und die meisten Menschen auf ihrem Computer haben. - Die Art und Weise, wie das funktioniert, ist, dass der Browser hier runterkommen wird. - Und wenn sie diese Schriftart Georgia auf ihrem Computer haben, - wird es voran gehen und den Typ dahin ändern. - Jetzt fragen Sie sich vielleicht, - Nun, - was, wenn sie nicht das Telefon auf ihrem Computer haben? - So, - wenn sie es nicht haben, - können wir ein Komma stellen, - und wir können andere Sicherungslösungen angeben. - Und in der Regel wählen die Leute 2 bis 3 Backup-Lösungen. - Also, - zum Beispiel, - sagen wir, dass sie Georgia nicht haben, - aber sie haben Zeiten. - Oder vielleicht haben sie so etwas. - Times New Roman so. - Okay, - als Reserve können wir den ersten Fonds, den wir wollen, und dann ein Komma, und dann können wir einen weiteren Fonds setzen. Also, wenn es zuerst versuchen wird, zu sehen, ob sie George haben, wenn sie Georgia nicht haben, wird es dann prüfen, ob sie mal New Roman haben. - Sie haben vielleicht bemerkt, dass mal New Roman in Zitaten steht. - Manchmal werden Sie diese und einfache Anführungszeichen wie diese sehen, - wie so Oder Sie können es in doppelten Anführungszeichen sehen, wie es ursprünglich so war. - Wann immer Sie Anführungszeichen entweder einfach oder doppelt in CSS um eine Schriftfamilie wie diese sehen, - das liegt daran, dass hier im Dateinamen ein Leerzeichen vorhanden ist. - Georgia hat diese Schriftart nicht. - Georgien hat kein Leerzeichen im Namen der Schriftart, - aber mal New Roman hat ein Leerzeichen im Namen des Fonds. - Also jedes Mal, wenn Sie eine Schriftart haben, die seltsame Zeichen enthält, - wie bei Symbolen, - Ausrufezeichen oder, - wissen Sie, - vielleicht nicht-lateinische Zeichen wie chinesische Zeichen oder japanische Zeichen oder - so, - dann ist Ihre beste Wette das sicherste, was zu tun ist, ein Zitat um es zu setzen, - entweder einfache oder doppelte Anführungszeichen, um es zu umgeben. - Ähm, - also in diesem Fall, - wir haben nur doppelte Anführungszeichen Zeit, - Leerzeichen, - neuer Raum, - Roman. - Und weil dieser keine speziellen Zeichen hat, - aber er hat ein Leerzeichen im Dateinamen. - Also setzen wir es in Anführungszeichen. - Und schließlich, - als Fullback-Lösung, - wird einfach dem Browser sagen, dass er eine generische Sarah Font verwenden soll, die dort das Wort serif schreibt. 21. Farbsysteme: - um OK, - also lasst uns auch die Farbe einstellen. - Also hier ist noch eine Immobilie. - Wenn es nützlich ist zu wissen, - ist es, die Textfarbe zu ändern, - verwenden Sie einfach die Eigenschaftsfarbe. - Ok. Und für diese 1. 1 setzen wir es auf eine graue Farbe, damit wir so grau sagen können, was ein Farbname ist. - Das sind also die verschiedenen Arten von Farbsystemen, die Sie verwenden können. - Hier können Sie einen von 16 Farbnamen verwenden und sich auf die Folien beziehen, um eine Liste zu sehen - dieser 16 Farbnamen abgesehen von Farbnamen. - Sie können auch Hexi-Dezimalfarben angeben, - und Sie können auch RGB-Werte angeben. - Und in CSS drei, - es ist rgb A mit der Einbeziehung von Transparenz oder Alfa dort. - Okay, damit wir grau sagen können. - Wir könnten auch einen Hexi-Dezimalfarbwert verwenden, den Hexi-Dezimalfarbwerte die sie verwendet haben - mit dem Hashtag oder dem Pfundsymbol so abgesetzt. - Okay, - also beginnen wir mit dem mit dem Hashtag-Symbol und danach, - wir werden Zahlen und Buchstaben eingeben, damit wir die Zahl Null bis neun verwenden können und - Buchstaben a bis F, um eine Reihe von Farben von Tausenden von Farben verfügbar durch - das Hexi Decimal Farbsystem. - Also, - zum Beispiel, - in unzugänglichem Farbsystem, - die ersten 2 Zeichen stellt die Farbe Rot. - Also die ersten 2 Paare von Zeichen repräsentieren rot. - 00 wäre kein Rot wäre eine Abwesenheit von rotem Licht. - Und dann stellen die 2. 2 Zeichen grün dar. - Und das wäre eine Abwesenheit von Licht, wenn ich zwei Nullen dafür und die letzte Farbe setzen - blau darstellt. - Das letzte Paar ist blau. - Das ist also rot, grün und blau. - Mit diesen sagte es Null. - Das bedeutet, dass es kein Licht gibt. - Es gibt kein rotes, grünes oder blaues Licht, also das ist schwarz. - Das ist die Farbe Schwarz. - Der höchste Wert, den ich setzen kann, ist ein Buchstabe F. - Wenn ich also sechs EFS hier setze, wäre das, - ähm, - so viel rot, - wie 100% 100% grün und 100% blau dort lesen. - Das wäre also die Farbe Weiß. - Wenn ich es täte, - äh, - 00 ff00 Das wäre die Farbe grün. Und wenn ich das tue, wäre das die Farbe Blau, und das wäre die Farbe Rot. - Also könnte ich das auch wie nach 00 schreiben, weil die ersten 2 Zeichen FF 0000 übereinstimmen Also - manchmal werden Sie Hacks eine Dezimalstelle in Kürze sehen. - Wenn du nur drei Charaktere siehst, passiert das. - Also, - zum Beispiel, - wenn das diese drei Zeichen nach Null F wären, - würde ich wissen, dass eigentlich, - das ist Abkürzung für F F 00 ff. - Da gehen wir. - Macht das Sinn? - Also können wir diese 1. 2 in ein Paar gruppieren, - das zweite in einem Paar in den letzten zwei zu einem Paar, - also könnte dies tatsächlich auf F Null f verkürzt werden, wie also wenn Sie eine hexi Dezimalzahl haben - die nicht zu gleichen Paaren passt, - zum Beispiel, - ich habe das gerade von der Oberseite meines Kopfes ausgedacht. - Ich bin mir nicht einmal wirklich sicher, welche Farbe das ist, - aber das ist ein Beispiel für den Hexi-Dezimalwert, für den ich keine Kurzschrift verwenden kann. - Ich kann das nicht in drei Zeichen vereinfachen, weil ich keine Übereinstimmung mit allen Charakteren habe. - Mit anderen Worten, - davon wäre falsch, weil es hier eine Übereinstimmung gibt. - Ich darf das nicht machen und habe fünf Charaktere. - Das einzige Mal würde ich in der Lage sein, dies zu tun, ist, wenn ich ein Match auf jedem von ihnen hätte - jeder der drei. - Das wäre also DD acht A. - A. - Dies ist ein Beispiel für einen Hack, - eine Dezimalzahl, die ich kürzen könnte, wenn ich wollte. - Du könntest es so verkürzen. - Okay, - also werden wir nur einen Hexi-Dezimalwert von 777 hinzufügen, der irgendwie wie ein Dunkelgrau ist. - Okay, - Eigentlich, - das ist ein Es ist ein bisschen eine hellere Farbe grau. - Ich sollte wohl nicht sagen, dass es dunkel ist. - Und dann gehen wir weiter und schauen uns eine andere Unterkunft an. - Lassen Sie uns eine Eigenschaft namens Text Bindestrich eine Linie erstellen. - Das ist also nützlich. - Sie können Text auf eine Zeile auf der linken Seite innerhalb des Elements setzen, dass sie sind - darin enthalten. - Und dann können Sie es auch auf Mitte setzen, - was den Text in diesem Element zentriert. - Und Sie können auch sagen, richtig, - die den Text im Element auf den RCD zentrieren würde. - Das würde den Text nach rechts innerhalb des Elements schieben, also ja, lass uns das eigentlich machen. - Man wird sagen, dass die Zeile rechts den Kerl so hinüberschiebt. - Ok. - Und, ähm ja, das wird es vorerst tun. - Wir reden in einem Moment über RGB-Farbe. - Darauf kommen wir zurück. - Also lassen Sie uns das speichern und kommen zurück zum Browser hier und aktualisieren. - Und sicher genug, - Sie können hier sehen, dass unter diesem Bild diese Figurenbeschriftung und die Figurenbeschriftung - jetzt eine andere Schrift ist. - Siehst du, wie das ist? - Sieht so aus, als wäre das Helvetica. - Ich werde da raten. - Und dieser hier ist Georgia und es sieht aus wie eine graue Farbe Jetzt statt einer schwarzen Farbe - okay. - Und Sie können auch sehen, es war eine Linie auf der rechten Seite. - Okay, - schauen wir uns ein anderes Farbsystem an, das RGB genannt wird. - Und in CSS drei, - können wir auch 1/4 Wert angeben, - was eine welche Chance für Alfa ist. - Okay, - die Art, wie RGB funktioniert, ist, dass Sie einen Bereich von Zahlen von 0 bis 2 55 haben, also Null wäre - die Abwesenheit von Licht. - Das bedeutet nein, nein. - In diesem Fall bedeutet es kein Rot für die erste Nummer. - Es bedeutet kein Grün für die zweite Zahl und kein Blau für die dritte Zahl. - Und dann ist der vierte Wert hier einer, der 100% Alfa oder, - UM, - 100% Deckkraft bedeutet - UM, . - Wenn ich wollte, dass der Text durchsichtig ist, - könnte ich sagen, wie 0,5 wäre 50% 0,2 wäre 20% 0,75 wäre 75% und einer gleich 100%. - Diese Transparenz ist also ein Bereich von Null, was bedeutet, dass sie unsichtbar ist oder man kann sie nicht bis zu einem oder 100% sehen. - Vorsichtig. - Sie wollen nicht unsichtbaren Typ wie diesen machen, weil das Ihre Suchmaschine beeinflussen kann - Optimierung. - Manchmal werden die Leute versuchen, ein wenig hinterhältige Tricks zu tun, - wie machen ihren Typ unsichtbar auf nur setzen eine Menge von Begriffen, die Suche konzentrieren wird - Motoren, um ihre Seite zu finden. - Aber - viele Suchmaschinen, - wenn sie entdecken, dass du das tust, - werden sie dich bestrafen, - und Google runzelt das tatsächlich. - Es ist in Ordnung. - Also, - zum Beispiel, - wenn ich sage 55 Komma Null Komma Null, - das bedeutet, es ist rot bis 55 rot Null grün Null blau. - Wenn ich diese alle zu 55 machen würde, wäre es 100% rotes Licht, - grünes Licht und blaues Licht, - das wirklich die Farbe weiß ist. - So 55 bis 55 zu 55 ist die Farbe weiß 000 ist die Farbe schwarz. - Und das wäre wie die Farbe grün, weil es null rot den ganzen Weg grün und den ganzen Weg blau. Okay, also fragst du dich vielleicht, was, wenn ich es hier zu einer bestimmten Farbe machen will? , Und ich bin mir nicht ganz sicher,wie der Farbwert ist, wie die Äquivalenzzahlen für diesen Wert sind, weil wir nicht wie Roboter denken. - Wenn ich an die Farbe Orange denke wie ein Sunburst Orange, weiß ich nicht, welche Zahlen ich hier für die Hacks von Dezimalstellen oder die RGB-Werte einschlagen soll. - Genau. - Zum Glück haben wir einige Werkzeuge zur Verfügung, die wir verwenden können, um dies zu erreichen. - Okay, also gibt es einen Augentropfer im Fotoshop, den du benutzen kannst. - Da ist auch ein Augentropfer im Gimp. - Wenn das die Software ist, die Sie verwenden, damit Sie ein Bild wie dieses aufbringen können, - Sie können es öffnen und Sie können die Pipette verwenden, um zu greifen, dass ich wirklich demonstrieren kann - schnell im Fotoshop. - Und ich kann auch wirklich schnell und wieder demonstrieren, - alles klar. - Und warum diese Luftladung? - Ich zeige denjenigen von Ihnen, die auf einem Mac-Computer sind. - Ich kann Ihnen zeigen, wie Sie dies mit einem kostenlosen integrierten Programm auf dem Mac mit dem Namen Digital Color - Meter tun. - Also, ... lasst uns voran gehen und wir verstecken das wirklich schnell und gehen zu dieser kleinen Lupe hier runtergefallen ist, und wir suchen nach einer Anwendung namens Digital Color Meter und - kam schon hier hoch. - Ich habe gerade digital gebunden, - und Sie können hier sehen, der Top-Hit ist diese Anwendung namens Digital Color Meter. - Also gehe ich weiter und wähle das aus, und das erscheint ein kleines Fenster auf deinem Bildschirm. - Ich arbeite in Snow Leopard. - Möglicherweise haben Sie eine neuere Version von Mac OS. - Sie können auf Löwen laufen, - und wenn Sie auf Löwen oder Berglöwen laufen, - wird das ein bisschen anders aussehen. - Aber es ist ziemlich dasselbe. - Also, wenn ich diese Farbe übereinstimmen möchte Lassen Sie uns sagen, ich möchte diese Farbe grau zu einer bestimmten - Farbe anpassen . - Stimmen Sie dieser Mauer hier zu. - Vielleicht sogar so eine beige Farbe. - Was ich sehe, gibt es die Hex-Werte und zeigt mir, dass der rote Wert G sein sollte - ist B neun und der letzte ist ein d. - Also, wenn ich diese Werte kopieren möchte, - Aiken sagen Befehl shift, - sehen Sie? - Und ich kann hier wieder in meinen Code springen. - Lassen Sie uns das Spiel für eine Sekunde verstecken. - Hi schon wieder. - Ok. - Damit ich hier zurück zum Code springen kann. Und für diesen Farbwert kann ich diesen Wert einfach so einfügen. - Also, wenn ich das speichere und aktualisiere, - es gab mir nur den Hexi-Dezimalwert, als ich mit der Maus über diesen Teil des Bildes schwebte - dass ich nach dieser Farbe suchte. - Also, wenn ich hierher zurückkomme und ich erfrischen, - Sie können sehen, dass dieser Text diese Art von beige ish Farbe geändert habe ich hier von der Wand gezogen -. - Okay, versuchen wir es noch mal. - Aber dieses Mal, - lasst uns die RGB-Werte bekommen. - Also komme ich zurück zum digitalen Farbmessgerät. - Ich habe es verloren und sehen, ob wir es wieder hochbringen können. - Da sind wir. - Und lassen Sie uns versuchen, wie diese orange Farbe hier, damit Sie sehen können, jetzt bekomme ich den hex - acht Bit Wert. - Und was ich tun möchte, ist auf den tatsächlichen RGB-Wert in älteren Versionen von Mac wie, - Ah, -Snow Leopard zu wechseln - Ah, - . - Sie werden sehen, dass Sie hier klicken können und Sie können auf den tatsächlichen Wert wechseln. Wenn du in einer neueren Version von Mac OS X bist, wie Tiger, wirst du eigentlich hier oben zu einem Drop-Down-Menü kommen wollen. Wenn du in einer neueren Version von Mac OS X bist, wie Tiger, - Also unter dem digitalen Farbmessgerät Anwendung, - können Sie hier kommen und Sie können tatsächlich ändern. - Ich vergesse, welches Dropdown-Menü es ist, ohne es sehen zu können. - Aber du wirst hier oben die Präferenzen durchsehen und du wirst das gleiche Menü finden können. - Und Sie können Teoh sagen tatsächlichen Wert acht Bit wechseln. - Also, wenn ich sage RGB tatsächlichen Wert acht Bit, - dann bekomme ich dieses Farbsystem, - das ist 0 bis 2 55 statt. Also, zum Beispiel, ... lassen Sie uns hier über diese Orange im Schuh schweben, und ich sage Kommando Shift, verstehst du ? - Und es wird diese Zahlen kopieren. - Und ich komme zurück zum Code, und ich kann das da drinnen beschleunigen. - Nun, - diese hier sind die RGB-Werte, die ich sagen muss, dass RGB das vorher geschrieben hatte und ich es gelöscht habe. - Und ich setze Klammern um diesen Salsa RGB a und dann setzen wir ein Komma zwischen jede dieser Zahlen hier so ein. - Und wir müssen, wenn ich die, äh, wenn ich nur RGB so mache, - das ist CSS, um etwas Transparenz hinzuzufügen. - Ich könnte RGB A machen und ich könnte angeben, - wie 0,5 wäre 50% Transparenz. - Ich sage nur eins für 100% so, und dann werden wir sparen und kommen zurück und erfrischen. - Und Sie können jetzt die Textjahre, - diese orange Farbe von dort sehen . - Also schüttele ich Luft wirklich nützlich. - In Kim, - In Kim, hast du eine Augentropfen-Tour genau hier. - Ich werde nur in jeder Bewerbung darauf hingewiesen. - Dies ist das I drop Tool hier und gimp und Sie würden gehen, um Datei öffnen und bringen Sie Ihr Bild nach oben -. - Und Sie können ich von dort und im Fotogeschäft fallen, - das Pipettenwerkzeug wird direkt hier gelegen. - Es sieht sehr ähnlich aus. - Es ist etwas höher und die Bücher in der Tafel, und es sieht so aus. - Es heißt Pipettenwerkzeug. - Sie können auch den Brief schlagen. - Die Taste, die ich auf Ihrer Tastatur, um es auszuwählen. - Ok, - ausgezeichnet. - Also werde ich die schließen. - Wir machen später noch ein bisschen mehr mit Photoshopped. - Okay, also das ist großartig. - Wir wissen jetzt, dass wir Anwendungen verwenden können, um zu klicken, - und ich lasse auf unsere Bilder fallen. - Wenn Ihre eigenen Fenster Es gibt auch einige kostenlose Programme, die Sie ein paar Google-Suche herunterladen können - für Pipette oder Farbe Pipette, dass es, - ah, - Handvoll von Programmen, die kommen sollten, die kostenlos für die neueste Version von Fenster als - gut. - Okay, - ähm, das sind Farbsysteme. - Und wir haben auch gelernt, - äh, - mal sehen, - wir haben Farbnamen gelernt. - Wir lernten über Hexi Dezimalfarben und Kurzschrift Hexi Decimal. - Und wir haben auch RGB-Werte gelernt 22. Schriftart Shorthand: Werfen wir einen Blick auf die Abkürzung für die Angabe all dieser Schrifteigenschaften hier, also werde ich das wirklich auskommentieren und ich werde das auf eine einfache oder kürzere Weise schreiben . - Lassen Sie mich Ihnen zeigen, was ich meine. - Also, - wirklich, - in CSS wir, wenn wir wollen, - können wir das Zeile für Zeile ausschreiben. - Es stellt sich heraus, für Schriftarten, - es gibt eine Eigenschaft namens Schriftart wie diese. - Und wenn Sie nur Spaß sagen, - so können Sie die Werte für Gewicht und Stil und Größe und Linie, - Höhe und Schriftfamilie alle in einer einzigen Eigenschaft angeben . - Es ist wichtig, dass sie in dieser bestimmten Reihenfolge vorkommen. - Also, - äh, - ich habe geschrieben, dass ich diese absichtlich in der gleichen Reihenfolge ausgeschrieben habe, um zu versuchen, Ihnen zu helfen, sich zu erinnern. , Und das erste, was du tun würdest, ist, wenn du einen Schriftstil oder Schriftgewicht hättest. - Sie würden das zuerst angeben, - damit wir normal sagen können. - Und dann setzen Sie ein Leerzeichen und der Abstand zwischen diesen Werten ist die Art und Weise, dass der - Browser in der Lage ist zu sehen, dass es das Ende eines Wertes am Anfang des nächsten ist. Also ist es wichtig, ein Leerzeichen dazwischen zu haben, also kann man sagen, dass es eine normale Schrift ist. - Warte, - wir können sagen, dass die Schriftgrößen 12 Pixel, - und wir können einen Schrägstrich setzen, um die Zeilenhöhe anzugeben, - die 1,5 m betragen würde. - So wie Sie dies lesen würden, - würden Sie sagen, - normale 12 Punkt oder 12 Pixel über 1,5 sie, - um, - so 12 Pixel über diese 1,5 sie ist, - um, - ist die Größe über der Zeilenhöhe. - Also setzen Sie einen Schrägstrich zwischen diese beiden statt eines Leerzeichens, und dann setzen wir wieder ein Leerzeichen und dann geben wir an. - Clips werden die Mittel angeben, - die Georgien und Zeiten New Roman sind. - Whoops. - Ich habe da zu viele Zitate. - Da gehen wir weiter, - ich mache ein Komma. - Und die letzte heißt Sarah, die nur jede generische Sarah Font laden wird, die der Browser beschränkt hat. - Okay, wir gehen rein und speichern das, und ich denke, ich will den Wert zurück in meine graue Farbe ändern. Obwohl das eine knackige Orange ist, denke ich, es ist ein wenig zu lebendig für nur eine Figurenunterschrift, also werde ich das einfach von 777 speichern und da gehen wir. - Es ist alles wieder normal. - Ok, - ausgezeichnet. 23. Web-Schriftarten: - Das ist also eine großartige Möglichkeit, Schriftarten zu laden, die unser Web Schriftarten sagt, - gängige Schriftarten und jeder wird auf seinem Computer haben. - Was ist, wenn ich eine Geldstrafe von meinem eigenen Computer laden möchte? - Oder was, wenn ich eine spezielle Fine laden will. - Also schauen wir uns eine Methode an, die bei Import genannt wird, um ein Stylesheet für einige spezialisierte Fonds von Google zu importieren . - Okay, - und es gibt alle Arten von Websites, die kostenlose Webfonts zur Verfügung stellen. - Wir gehen spezifisch in Googles eine feine Bibliothek. - Also gehen wir zurück zu unserem Browser und lassen Sie uns eine neue Registerkarte öffnen und wir gehen weiter und - tippen Sie Google dot com Schrägstrich Web-Fonds alten Punkt com Schrägstrich Wetter Fonds und Sie können hier sehen - es gibt, - ah, - größere Liste. - Sie haben über 606 113 Familien finden, - und Sie können hier klicken, um die Einstellungen und die Größe anzupassen, die Sie suchen. , Ich weiß zufällig,dass es zwei spezielle Schriftarten gibt, die ich verwenden möchte, also werde ich hier oben nach ihnen suchen. - Sonst, - wissen Sie, - normalerweise gehe ich durch Seite für Seite, und ich versuche, Stile zu finden, die aussehen, - wissen Sie, - wünschenswert für mich. - Ich suche einen namens Elsie Swash Elsie Swash Elsie Swash Mützen. - Ich will das hier benutzen. - Okay, - also ist das ein Spaß, dass es nicht sehr wahrscheinlich ist, dass jemand genau diesen Gedanken haben wird - an seinem Computer. - Also holen wir uns diesen Spaß und laden ihn von Google. - Es gibt verschiedene Möglichkeiten, die du dieses Jahr tun kannst. - Sie können es zu Ihrer Sammlung hinzufügen, - und dann können Sie einen benutzerdefinierten Stil Shooting, mit dem Sie verknüpft haben. Und eigentlich, - in unserem Fall, - was ich tun werde, ist, dass ich einfach zu diesem Link hier gehe, der „Schnellbenutzung“ sagt, und ich werde auf den Link „Schnellbenutzung“ klicken . - Und sie sagen mir hier, dass es verschiedene Versionen gibt. - Es ist normal und extrem kühn. - In diesem Fall. Ich will nur das normale Gewicht von 400 nutzen, und dann werden wir hier runter scrollen, und ich sehe, dass es drei Methoden gibt, mit denen ich das in meinen Augen einbetten kann. - So wird eine Methode Standard genannt, - und dies ist mit einem Link, den wir in den Kopfbereich aller HTML-Seiten setzen. - Das ist also das Link-Tag, das wir vorher gesehen haben? - Genauso wie wir mit unserem Stylesheet verknüpfen. - In der Tat, - uhm und eine andere Methode verwendet etwas, das beim Import aufgerufen wird, das diese Datei importiert - direkt in unsere aktuellen Stylesheets. - Und es gibt auch eine JavaScript-Lösung, die Sie hier kopieren und einfügen können, - die höchstwahrscheinlich in den Kopfbereich Ihrer HTML-Seite ausgeschnitten oder verlinkt - Ihre HTML-Seite. - Ähm, - also wird JavaScript in älteren Browsern funktionieren, wenn die Leute ihr JavaScript ausgeschaltet haben, was ich nicht sicher bin, warum sie das tun sollten. - Aber manche Leute tun das vielleicht aus Sicherheitsgründen. - Dann geht dieser nicht auf die Arbeit, Aziz. - Solange sie einen neueren Browser haben, der CSS drei bei der Importmethode unterstützt, - können wir diesen speziellen verwenden. - Also werde ich eigentlich diese Lösung verwenden, die die mittlere Tabelle ist, die beim Import aufgerufen wird. - Und wir werden das einfach kopieren. - Ich werde es hervorheben und „Kopie“ sagen. - Und dann lasse ich den Tab offen, und ich werde einfach zurückkehren. - Er wird hier zurück zu erhabenen Text gehen und wir gehen und laden das oben auf unserer Seite -, also werde ich nur einen Kommentar hier machen, der Web-Fonds so sagt. - Also laden wir unseren Webspaß hier, und ich werde einfügen, und wir können das etwas kleiner machen. - Verkleinern Sie, damit wir sehen können, wie das hier aussieht. - Es ist irgendwie ein langes Mädchen. - Alles klar, - also haben wir dieses U R L hier eingefügt, - springen wir zurück zu unserem Browser und lassen Sie uns die Verwendung dafür sehen. Die Art und Weise, wie wir das verwenden, ist, dass wir Schriftstrichfamilie verwenden, und wir bezeichnen diesen Fonds als Elsie Swash Caps. - Und, - um auch, - sie haben einen Rückfall des Schreibtitels, - der sein wird, wird es jede kursive Schriftart verwenden, die es beschränkt hat, wenn es diesen für - irgendeinen Grund nicht laden kann . - Also könnten wir diesen Teil hier kopieren, und ich komme zurück zu meinem Code und ich kann dahin gehen, wo ich das gerne benutzen möchte. - Ich entschied, dass meine Figur Untertitel. - Anstatt Georgia zu sein, - möchte ich einen speziellen Fonds verwenden. - Also werde ich hier die Schriftfamilien hervorheben und sie auf Elsie Swash Caps umstellen, die von hier aus der importierten Bührle geladen werden. - Nehmen wir an, ich wollte einige andere Schriftarten von Google Web Fonts hier holen. - Sie können auch zurückkommen und hier ein paar mehr finden. - Na gut, - also lasst uns voran gehen und nach einer anderen Schriftart suchen, die ich verwenden möchte. - Und das hier heißt Clicker Clicker Scripts. - Da ist er. - Clicker-Skript. - Ich benutze diese sehr dekorativen Schriftarten. - In Ordnung. - Und dann gehen wir schnell zu gebrauchen, was der Link hier ist. - Und dann gehe ich tol nach unten scrollen und klicke auf die Import-Tab, - und wir werden diesen Text hervorheben und wir werden zum Code zurückkommen und ich werde dies einfach einfügen - unter dem anderen. - Also gibt es noch einen Spaß. - Das hier ist die 1. 1 ist Elsie Swash Caps, und der nächste Spaß, den ich verlinke, heißt Clicker-Skript. - Und dann muss ich sicherstellen, dass ich auf diese Schriftart mit dem richtigen Namen verweise, - das ist Clicker-Skript und Komma Rückfall von kursiv. Okay, also zurück zu unserem Code und wir gehen weiter und benutzen, - äh was? - Verwenden Sie ein schnelleres Skript für unsere H, die hier in ein bisschen kommen. - Ja, wir halten uns an diesem fest und werden später wiederkommen und diesen Spaß haben und ... okay, 24. Kurswahl: - also das ist ein guter Anfang. - Wir haben gelernt, Typselektoren Typselektoren können in und wählen Sie jedes Element in allen - diese Elemente auf der gesamten Website und Stil sie in einer bestimmten Weise. - Nun, - das ist alles gut und gut, wenn wir alles gleich aussehen lassen wollen, wenn Sie eine - Handvoll Elemente haben , die Sie alle gleich stylen möchten, als Ihre beste Wette zu verwenden ist - etwas, das als Klassenwähler bezeichnet wird. - Also, - Kurfürstentinnen, - die werden, - wissen Sie, - das können Sie Teoh, - um, -so viele Elemente anwenden - um, - , wie Sie möchten. - Also, wenn Sie eine Handvoll Elemente haben und Sie wollen, dass sie auf eine bestimmte Weise gestylt werden, - wissen Sie, - vielleicht nicht alle Absätze, - aber nur einen bestimmten Absatz oder zwei oder drei Absätze und die Website, die Sie sein möchten - ein bisschen anders. - Sie können etwas verwenden, das als Klassen-Selektor bezeichnet wird. - Okay, - also, - Klassenwahlberechtigte, - sie haben am Anfang ein spezielles definierendes Zeichen, das den Browser wissen lässt -, dass dies nicht nur ein normales Element ist. - Wir wollen Stil sitzen. - Wir suchen, um einen bestimmten Klassennamen zu stylen, - also beginnen wir immer Klassen Kurswahlen mit dem Periodensymbol. - Also habe ich immer die erste Zeit, und dann werde ich dieser Klasse einen bestimmten Namen geben. - Es liegt also an mir, es zu nennen. - Und ich will einen Namen wählen, der für mich später Sinn ergibt. - Also schauen wir uns zuerst die Verwendung dafür an, und dann komme ich zurück und benenne sie. - Also gehe ich auf die Katalogseite und gehe weiter und scrolle nach unten. - Und wenn ich hier runter kommen, um Zeile 75 Katalog über HTML, - Sie können sehen, wir haben nicht h zwei hier genannt Featured Brands. Und späterwerde ich eine Art Holzstruktur hinter all diesen Elementen setzen. Und später - Und dieser Text wird drauf stehen. - Würde die Holzstruktur und ich möchte, dass sie weiß ist. - Ich bekomme nicht wie es die Farbe weiß zu haben und alle anderen H zwei werden die - Farbe schwarz haben , - also kann ich nicht einfach h zwei für diesen Selektor sagen, weil das das ganze Alter machen würde - ist weiß. - Und in diesem Fall möchte ich, dass alle beide schwarz sind. - Aber diese spezifische, - sagen wir das und vielleicht auch auf ein paar anderen Seiten. - Ich will machen, dass einige der H zwei weiß ist. - Die Art und Weise, wie ich das tun könnte, ist, dass ich eine bestimmte Klasse zuweisen kann und es gibt zwei Schritte - zum Prozess. - Ein Schritt ist die Anwendung einer Klasse auf das Element mit dem Klassenattribut, so dass ich voran gehen kann und - sagen, dass dieses Alter auch eine Klasse von hat und ich werde es Milchtext so nennen. - Ich werde einfach Unterstrich verwenden und sagen, das hat eine Klasse von Milchtext. - Also habe ich diesen Klassennamen komplett erfunden. - Also habe ich den Namen dieser speziellen Klasse vollständig auf, - beschlossen, es Milchtext zu nennen, weil ich will, dass all dieser Text weiß, - milchig weiß ist. - Okay, - jetzt, da ich diesem hier einen eindeutigen Klassennamen gegeben habe, - kann ich diese Klasse auf so viele Elemente anwenden, wie ich möchte, dass ich die gleiche weiße Farbe haben möchte, damit ihr Text mit allen beginnt. - Wenden Sie es einfach auf diesen an. - Aber du kannst mehrmals Unterricht spielen. - Sie können auch mehrere Klassen anwenden. - Zum Beispiel, - wenn ich hier eine andere Klasse hätte, wie ich eine Klasse namens Shadow hinzufügen wollte, die dem Element einen - Schatten hinzufügen wird. - Ich kann einfach ein Leerzeichen hier setzen und zusätzliche Klasse anwenden, die so viele Klassennamen genannt werden, wie ich will - hier wäre, - wie eine andere Klasse, die ich direkt dort könnte. - Also, indem Sie hier ein Leerzeichen setzen, - können Sie so viele Klassen anwenden, wie Sie möchten, auf ein einzelnes Element, - und Sie können Klassen anwenden, ist oft auf den Seiten, die Sie wollen. - Ich kann voran gehen und kopieren diese Klasse von Milchtext auf so viele andere verschiedene Elemente wie ich - für richtig halten. - Also, jetzt, da ich das mit einer Klasse im HTML Aiken beschriftet habe, springt zurück zum CSS. - Und jetzt kann ich diese Klasse anvisieren, indem ich das Periodensymbol verwende und den Namen der - Klasse eingib , - was Milchtext ist. - Und das ist Groß- und Kleinschreibung. Du kannst dir den Namen aufstellen, wie du aber du willst nur Buchstaben und Zahlen benutzen. - Und es ist Groß- und Kleinschreibung zu beachten, und Sie wollen nicht das Leerzeichen zwischen dem Namen verwenden. - Wenn Sie ein Leerzeichen angeben möchten, können Sie entweder Bindestriche oder Unterstriche verwenden. Okay, also für meinen Milchtext, gehen wir weiter und setzen diesen Kerl auf die Schriftfamilie, die wir gerade hier hochgeladen haben, die Clicker-Skript genannt wird. - Also gehen wir weiter und sagen Font Strich Familie und wir können uns den Code schnappen, damit das funktioniert, - der hier ist. - Schritt für seine genannte Clicker-Skript kursiv. - Und wirklich, - sollten wir das bereits kopieren lassen. - Ich sollte in der Lage sein, das genau da drin zu beschleunigen. - Ok? - Und neben der Schriftfamilie, - möchte ich auch die Farbe des Textes so weiß ändern. - Also für Weiß, - ich habe ein paar Optionen. - Ich kann das Wort weiß schreiben. - Ich kann das Dezimaläquivalent von Hexi verwenden, - das ist s FF, - oder ich kann die RGB-Werte 2 55 Komma 2 55 gemeinsam mit 55 oder die RGB A-Werte auf 55 bis 55 1 verwenden - so. - In diesem Fall verwende ich einfach den Farbnamen Weiß. - In Ordnung. - Und lassen Sie uns auch etwas hinzufügen, das Textschatten genannt wird. - Also in CSS drei, - können wir auch Schatten zu unserem Text hinzufügen, - was irgendwie ein schöner Effekt ist. - Und das akzeptiert vier Werte, die ich hier setzen muss. - Dieser erste Wert hier ist der horizontale Versatz. - Also, das geht Teoh, - schieben Sie den Schatten drei Pixel nach rechts. - Wenn ich negativ sage, - würde es den Schatten drei Pixel nach links schieben. - In diesem Fall will ich nicht, dass sich der Schatten horizontal bewegt, also sage ich einfach Null, und dann ist der nächste Wert der vertikale Versatz. - Also wollte ich von vorne zu Pixeln gehen, und der dritte Wert, den wir hier setzen, heißt Weichzeichnungsradius. - Also Blue Radius ist Gesundheit. - Wie viele Pixel aus dem Schatten wird verwischen oder erweichen Wenn Sie sagten, Null wäre ein sehr scharfer - Schatten, wenn Sie sagen, wie 10 Pixel, - das wird wirklich weich und glatt sein, wenn es verblasst, - wir werden voran gehen und ein glückliches Medium finden hier von nur drei Pixeln. - Und schließlich - wollen wir eine Farbe angeben. - Also, wenn ich will, dass das schwarz ist, - könnte ich den Hexi-Dezimalwert 000 verwenden wird das Äquivalent von schwarzen Farben dort sein. - Okay, - wir werden das retten, okay? - Und lassen Sie uns das testen. - Ich habe einen Safe gemacht und kann zu meinem Browser zurückkehren und wir können es. - Mal sehen, - das war auf der Katalogseite gesehen. - Gehen Sie zur Katalogseite und scrollen Sie nach unten. - Sieh mal, ob du das hier siehst und triffst. - Aktualisieren. - Cool. - Also, das ist unter zukünftigen Marken, - und es sieht ziemlich klein aus. - Ich denke, wir machen dies ein wenig größer, - aber Sie können sehen, es ist weiß jetzt es hat spezialisierte Web-Spaß, - und es hat einen Schatten. 25. ID: - Also das nächste, was wir tun wollen, ist, lasst uns etwas über eine andere Art von Selektor lernen. - So wissen wir, dass Klassenselektoren es uns erlauben, bestimmte Elemente mit einem bestimmten Klassennamen zu markieren - und wir können dies auf so viele Elemente anwenden, wie wir möchten auf einer einzigen Seite. - Wir können auch mehrere Klassen auf das gleiche Element anwenden, wenn wir wollen. - Jetzt gibt es eine andere Art von Selektor namens I D Selektor und Ideen Selektoren Luft ein wenig - anders, dass Sie nur, - um, -ein I d pro Seite anwenden können - um, - . - Vielmehr könnten wir sagen, - ähm, - wir können uns auf Onley bewerben, ein Element ihrer Seite. - Okay, - So können Sie sich daran erinnern, dass Klassen auf mehrere Dinge angewendet werden können und ich d hat - das Wort I d, - das Sie sich vorstellen können, ist eine einzigartige Identität. - Also habe ich eine einzigartige Identität. - Sie können nur für eine Sache pro Seite gelten. - Also oft, wenn wir Websites bauen, - müssen wir Klassen mit dem Periodensymbol anwenden und dann eine Klasse - Attribut hier, - geben Sie ihm den gleichen Klassennamen. Wenn Sie mehrere Elemente haben wollen, die innerhalb einer Seite gestaltet sind. Wenn Sie mehrere Elemente haben wollen, die innerhalb einer Seite gestaltet sind. - Aber es gibt auch viele Male, in denen wir ein einzigartiges Element haben, das wirklich nur einem Zweck dient . - Also, - zum Beispiel, - wenn wir, - wie eine Social-Media-Bar oder eine Box und die Seite, die einzigartig ist und es gibt nur eine von ihnen - pro Seite, - dann sind wir besser dran, ein I. - D. - I. - D. - S haben mehr Stärke, - mehr Autorität. - Wenn Sie frühere Stile verwenden, wie wenn Sie eine Farbe mit einer Klasse stylen, - Ähm und dann haben Sie ein i d verwendet, um eine andere Farbe zu setzen. - Das I D hat tatsächlich mehr Autorität als eine Klasse, - also ist es spezifischer, weil es sich auf ein einzelnes Element auf der Seite bezieht. - Also, - zum Beispiel - lasst uns voran gehen und ah Box erstellen und ihm eine einzigartige I. - D. - Lassen Sie uns auf den Index Punkt HTML-Seite gehen und ich werde nach unten scrollen. - Und hier haben wir den Header und ich habe irgendwohin mehr Kommentare im Code seit der letzten Übung gesetzt , weil ich wollte, zeigenwollte, dass wir diesen Header in zwei Abschnitte zu kleineren Boxen aufteilen werden. - Also hier ist mein öffnender Header in meinem schließenden Header-Tag. In diesem Header wirst du dich erinnern, bevor wir die Überschrift haben , die der Name der Firma hier ist. - Das ist und das ist in einer H-Gruppe verschachtelt. - Also werde ich das irgendwie in ein,ah, -ein kleines, schickes aussehendes Logo stylen ah, - . - Und ich habe beschlossen, dass ich das in einer eigenen Kiste haben will. - Ich möchte das Logo in einer Box haben und ich werde die Navigation in einer separaten Box gestalten. - Also, um das zu tun, - lassen Sie uns dies mit einem div-Tag umgeben, wie dies sagen wird, - def, - und Sie werden sich von der vorherigen Übung erinnern, dass devore d I V ist die Art und Weise, wie wir eine - kleine Box erstellen . - Das schafft ästhetisch eine Kiste um diesen Bereich, und ich werde das Gleiche hier unten machen. - Wir wollen, dass dieser auch in einer separaten Box ist. - Also werde ich ein kleines Kleidungsdiv hier Hände legen. - Wir stellen sicher, dass die Schulden dieser Inhalt hervorheben und die Tabulatortaste drücken, um alles zu erfinden . Okay, also Okay, habe ich dieses h eins und h zwei ist in einer Box und die Navigation ist in einer anderen Box. - Nun, - wenn ich dies taggen möchte, wenn dies ein eindeutiges Element ist, das eine eindeutige Identität auf der Seite hat, dann kann ich dies mit einem bestimmten I. - D so ähnlich wie wir dieses Klassenattribut erstellt haben. - Sie können auch eine Idee Hommage erstellen. - So konnten wir sagen, - zum Beispiel, - tat und wir können ihm ein I D gleich Logo geben. - So wird dies ein Logo-Panel oder wie ein gekauftes eine Box schließlich Stil wird es eine - Box am oberen Rand der Seite sein , die über den Bildschirm geht und unser Logo darin hat. - Und dieser hier unten heißt Knave Bar. - Also, wenn ich will, - kann ich diesem eine einzigartige Idee geben. - Nun, - sagen, ich d gleich Dav Bar wie dieser Scheck und wir kommen zurück und in ah und Stil dies - ein bisschen später. - Zuerst, - schauen wir uns das Styling an. - Das haben wir eine einzigartige Identität des Logos gegeben. - Da wir dies eine Vorstellung von Logo gegeben haben, - bin ich jetzt verboten, irgendein anderes Element auf der Seite zu geben. - Das gleiche ich d. - Also wieder einmal mit Klassen können Sie diese Klasse auf so viele Elemente anwenden wie Sie - wie auf der Seite, - während mit einem I d like I D gleich Logo ist, - wir können dies nur einmal pro Seite anwenden. - Also habe ich weitergemacht und dies zu allen anderen Seiten auf der Website hinzugefügt, damit wir jetzt zurück in das CSS gehen können , - und wir können darauf zielen, i d. - Und nur auf die gleiche Weise, dass Klassen einen eindeutigen identifizierenden Charakter auf der - wie Zeitraum, um anzuzeigen, dass dies eine Klasse von Milchtext ist. - I DS hat am Anfang auch ein eindeutiges identifizierendes Zeichen, - und das ist das Pfundsymbol oder Hash-Tag oder einige nennen es das Nummernzeichen. Und das ist Ah, - Sie können erstellen, dass mit Shift in der Nummer drei das schaffen wird und dann werden wir einfach - sagen Sie den Namen des I D. - Okay, - also nur um eine kurze Überprüfung wieder zu machen, - wenn wir versuchen, alle Elemente auszuwählen, - wir können einen Typselektor verwenden, indem Sie einfach den Namen des Tags wie Absatz oder passen. - Bildunterschrift. - Wenn wir versuchen, eine Gruppe von Elementen auszuwählen , , - vielleicht haben wir einen Stil über mehrere Elemente auf einer Seite gestreut, wie einen Teil des Textes milchig zu machen. - Dann können wir eine Klasse mit dem Periodensymbol hier vor dem Klassennamen erstellen. - Und mit einem I D. - Wir haben das Pfund-Symbol verwendet, wenn wir auf ein eindeutiges Element auf der Seite anwenden wollen. - Okay, - also hier, - innerhalb des Logos, - lasst uns voran gehen und gut, - lasst uns hier einen Kommentar für diese beiden schreiben. - Ich habe vergessen zu schreiben, dass dieser wählt, - äh, - gut sagen, Elemente mit einer Klasse gleich Milchtext, - Okay und Logo, - das ein einzigartiges i hat. - D. - Dies wählt ein Element Singular. - Nur ein einziges Element, wie man dieses Element sagt. - Es ist wie das Element mit und ich d gleich Logo wie das. - Also im HTML-Code, - haben wir hinzugefügt, - ich d gleich Logo toe eines unserer dibs. - Sie können Ideen zu jedem Element hinzufügen, - übrigens, - Sie könnten eine Idee in einen Absatz oder auf eine geordnete Liste setzen, - oder ein Listenelement oder ein Bild, - was auch immer Sie wollen, - aber nur eine pro Seite, wichtig ist. - Sie werden tatsächlich eine Validierungsluft bekommen, wenn Sie versucht haben, eine 92 mehrere Dinge auf der gleichen Seite zu haben. - Also kommen wir hier rein und geben diesem Kerl eine Hintergrundfarbe und wir werden viel mehr über die Ästhetik der Box lernen und wie man Boxen etwas später stilisiert. - Aber nur damit wir sehen können, dass Div sich erinnern, - wir haben hier ein div mit einer Idee des Logos erstellt, das diese Altersgruppen umgibt, - das die H eins und H zwei umgibt. - Wenn wir diese Schachtel Farbe geben wollten, - zum Beispiel, - können wir die Eigenschaft Hintergrund verwenden und wir gehen weiter und sagen Hintergründe. - Wir geben ihm eine hellblaue Farbe. - Die Verwendung von Aqua Aqua ist ein Farbname, den Sie für hellblau verwenden können, also speichern wir das. - Also, wenn wir auf den Code hier zurückkommen und wir aktualisieren, - können Sie sehen, dass wir gerade einen Balken auf dem Bildschirm mit erstellt haben. - Es ist eigentlich ein div mit einer Idee des Logos und seiner Umgebung diesen Inhalt. - Okay, - und wir kommen ein bisschen später zurück, und der Stil ist anders. 26. Nachkommens Selektor.: - Schauen wir uns eine andere Art von Selektor genannt einen Nachfolger Selektor. - Die Senats-Selektoren ermöglichen es uns, innerhalb des Scheinbaren Elements zu gehen und alle seine - Kinder oder alle seine Nachkommen, - mit anderen Worten auszuwählen - Kinder oder alle seine Nachkommen, . - Also, - zum Beispiel, - wenn wir Pfund Logo sparen und dann setzen wir ein Leerzeichen nach dem Wort Logo und dann sagen wir H eins. - Was das hier tut, ist, weil hier ein Platz ist. - Zwischen diesem Selektor und diesem Selektor, - es ist im Grunde in Ordnung, auf Lee die Seite diejenigen innerhalb der Elemente mit dem i D gleich - Toe-Logo zu wählen . - Also, - mit anderen Worten, - wenn wir der Browser - könnten wir das wie folgt lesen. - Also aus dem Browser, - wir würde ich sagen, - Um OK, - gehen Sie und finden Sie es ein einzigartiges Element mit der Idee des Logos und dann gehen Sie hinein und Stil - alle der H ein. - Also, - wirklich, - das ist nur Styling H diejenigen, wenn sie innerhalb des übergeordneten Containers namens Logo - zufällig sind. - Hier kommt also das Verschachteln ins Spiel. - Dieser H ist verschachtelt. - Es ist ein Nachkommen oder ein untergeordnetes Element dieses übergeordneten Elements namens Logo. - Also das ist ein Nachkomme von mit der Idee des Logos gemacht und vielleicht habe ich andere H - anderswo auf der Seite und ich will nicht, dass diese H gestylt werden. - Nehmen wir an, ich wollte dieses h nur auf eine bestimmte Art und Weise stylen. - Ich könnte eine Klasse gebrauchen, oder ich könnte ein I d in dieses h werfen. - Aber ich habe schon einen Ausweis I d. - Hier für diesen Container. - Und wenn ich mehrere hätte, ist jeder hier drin. - Ich könnte dann einen abhängigen Selektor verwenden, um Stil zu sagen, dass jeder, - aber nur, wenn sie innerhalb eines anderen Elements erscheinen. - Also Nachkommen Selektoren, - Eine wirklich nützlich für das wieder, - wir sagen, - Hey, - Browser gehen und findet ein Element mit einer einzigartigen Idee von Logo und dann Raum. - Das Leerzeichen hier mit Leertaste zeigt an, dass es sich um einen Nachfolger Selektor handelt und wir sagen - gehen Sie in das Logo und wählen Sie jetzt alle H aus. - Ok. Und was wir tun werden, ist, dass wir die Schriftfamilie all dieser H hier ändern, und wir werden es in Clicker-Skript ändern, das mein spezialisierter Webfonds ist. - Ich habe so heruntergeladen. - Ok. - Und wenn ich wollte, um die H zwei speziell innerhalb ihrer wählen. - Wissen Sie, - nicht alle H zwei sind auf der ganzen Seite, - aber auf Lee das Alter zwei, wenn sie innerhalb des div mit der Idee des Logos sind. - Also dieser hier ist derselbe. - Dieser wird nur h twos auswählen, wenn sie sich in einem Element mit der Idee des Logos befinden. - Also für diese beiden tun auch die Schriftfamilie, und das hier werde ich das andere machen, - äh, - mal sehen, was ist, - äh, - lc Leerraumwechselkappen. - Es ist sehr wichtig, dass wir das richtig buchstabieren und ist ein Fallback. - Es wird Kursiv benutzen, wenn wir es brauchen. - Okay, - Also, - Nachkommen Selektoren, - sie gehen und sie stylen etwas, das sich innerhalb eines anderen übergeordneten Elements befinden. - Mit anderen Worten, - H eins ist ein Nachkomme dieses Elternteils. - Also verwenden wir die Leertaste dazwischen zeigen, dass Beziehung, die dies Styling, wenn es ist - innerhalb dieser. - Also gehen wir rein und speichern das, und dann kommen wir zurück zu unserem Browser und wir werden aktualisieren, und das hat diese Schriftarten hier geändert. - Es wirkt sich also nicht aus. - Das ist keine zwei, und das ist ein H zwei hier, und es wirkt sich nicht auf diese anderen H zwei auf der restlichen Seite aus. - Es wirkt sich nur auf diese h zwei, weil es in diesem Div mit einer Idee von Logo ist. - Ok, - großartig. - Schauen wir uns eine andere Situation an. - Wir haben alle diese Abschnitte auf der Seite, - und wenn ich sagen möchte, dass ich alle Links formatieren möchte, die innerhalb aller Abschnitte -, - Ich kann das tun, indem ich Abschnittsraum A sage - Ich erstelle einen Nachkomme Selektor, der sagt, wählen Sie nur AIDS, - Sie wissen, - ein Tags, die die Nachkommen des Abschnitts sind. - Das ist also buchstäblich auf Lee, um einen Link zu stylen. - Wenn es innerhalb eines Abschnitts ist, - mal sehen, - dieser ist nicht Das ist innerhalb von Header. - Sieh mal, ob wir hier einen finden könnten, zum Beispiel. - Na ja, hier ist eins. - Das ist ein Mann, der verlinkt werden kann. - Also hier ist ein Abschnitt und dann hier haben wir es sagt E-Mail und es gibt einen Ankerlink hier. - Also dieser hier, - diese Linksteuer würde dann tatsächlich gestylt werden. - Okay, also was wir für diese Jungs tun werden, ist, dass wir ihm eine Farbe geben. - Wir geben ihm eine tolle Farbe wie die mit Hexi-Dezimalwerten und Links standardmäßig haben - eine zugrunde liegende Und wenn wir das entfernen möchten, - können wir das Deck die Textdekoration auf keine setzen. - Sie können auch Textdekoration einstellen. - Teoh zugrunde liegende Sie können auch tun Overline wie das und kippt Overline Und Sie können auch tun - Linie, durch die sieht so aus, dass in diesem Fall wollen wir dio Ich werde es einfach unterstreichen - ist in Ordnung, - was eigentlich der Standard ist. - Aber nur um mit dieser besonderen Eigenschaft zu demonstrieren, sieht aus wie dort. - Okay, - Also, wenn ich das speichere, - äh und ich komme zurück und esse normal standardmäßig Links oder blau, aber ich sagte, dass es sein soll - irgendwie eine graue Farbe, - gehen wir zurück zum Browser und wir werden hier runter kommen und wir wird aktualisiert und Sie können sehen - diese sind nicht mehr blau dort jetzt graue Farbe, - wie diese Links und der E-Mail-Link hier unten die Seiten. - Na ja, - sehr cool 27. Psuedo Selektion aus Psuedo: - nächstes, - werfen wir einen Blick auf Pseudo-Selektoren oder manchmal als Pseudo-Klassen-Selektoren bezeichnet. - Jetzt werden Pseudo-Selektoren oft verwendet, um ein Element basierend auf seiner Beziehung zu stylen - unter anderen Elementen. - Oder, - im Fall dieses Beispiels, - wir werden ein Element basierend auf einem Ereigniszustand stylen. - So ist es ziemlich üblich, Links zu stylen. - Ähm, - und wir sahen vorher, wenn wir diesen Typselektor für A verwenden, - es wird hineingehen, - wählen Sie alle Ankerlinks auf der Seite und stylen sie, die wir einige hier in den - Abschnitten gestylt haben, um ah zu haben, - tolle Farbe und unterstrichen werden. - Okay, - aber was, wenn wir den Stil eines Links ändern möchten, wenn die Maus darüber schwebt? - Oder was, wenn wir den Stil des Links ändern möchten, wenn er bereits angeklickt wurde? - Um das zu tun, - müssen wir einige Pseudo-Selektoren verwenden, damit Pseudo-Selektoren identifizieren Luft ist das Doppelsymbol. - Also zuerst beginnen Sie mit einem Element, - und das könnte ein beliebiges Element in diesem Fall sein, - waren daran interessiert, Links während eines bestimmten Ereigniszustands zu stylen. - Also verwenden wir einen Doppelpunkt, und dann geben wir den Namen den Namen des Ereigniszustands ein, den wir anvisieren wollen . - Also ein Doppelpunkt? - Was es tut, ist, dass es Links wählt, - ähm, - während ihres Standardstatus. - Das ist, wenn sie unberührt sind. Wenn ich also eine Seite besuche und noch nie mit dem Link interagiert habe, wird das diesen Stil kontrollieren. Wenn ich also eine Seite besuche und noch nie mit dem Link interagiert habe, , Sagen wir, wir wollen sie schwarz machen. - Nun, - Seo, - lassen Sie uns die Links Farbe schwarz machen, wenn wir die Seite zum ersten Mal besuchen und ah gut, - sagen Sie es, die Textdekoration zu entfernen, so dass es keine Unterstreichung unter den Links. - Bleibt Textdekoration keine. - Okay, wir einen Blick auf ein anderes Ereignis. - Zustand für Links namens Besucht. - Jetzt ein Doppelpunkt besucht gut wählen und Stil-Links, die bereits dann geklickt oder besucht haben. - Mit anderen Worten, - denkt, dass wir bereits im Browser besucht haben. - So, - zum Beispiel, - manchmal, um anzuzeigen, dass jemand bereits auf den Link geklickt hat, - Sie können die Farbe des Links ändern, wie ich den Link grau oder so etwas machen könnte -. - Und, - um, - jede Art von Textdekoration oder Informationen wie diese wird vom - vorherigen Selektor geerbt werden . - Also, da ich sagte Textdekoration keine, - dieser wird auch keine sein. - Ähm, - wird auch keine zugrunde liegenden haben unter. - Es wird keine Dekoration haben, aber ich werde die Farbe von schwarz zu einer grauen Farbe ändern. - Hier, - das ist ein mittelgraues Pfund C C. - Okay, - werfen wir einen Blick auf einen anderen Link Staat. - Das ist jedermanns Favorit, so schweben heißt, was man sich wahrscheinlich vorstellen kann. - Dieser wird Links auswählen, - äh, - während der Maus schweben. - So heißt das, - wie auf der Maus über so. - Okay, also macht das hier Spaß. - Du könntest tun, was immer du willst. - Sie können die Farbe ändern. - Es kann wild werden. - Weißt du, vielleicht werden wir die Farbe gleich behalten. - Vielleicht sind die Farben schwarz auf schweben. - Und vielleicht, was wir tun werden, ist, dass wir einfach einen Basiswert hinzufügen, der hier zur Textdekoration geht - und es so unterstrichen wird . So, wenn wir normalerweise nicht auf einen Link geklickt haben, wir normalerweise nicht auf einen Link geklickt haben, gibt es keine Textdekoration, und dann, wenn wir den Mauszeiger darüber bewegen, erscheint eine kleine Linie darunter. gibt es keine Textdekoration, und dann, wenn wir den Mauszeiger darüber bewegen, wie das. - Ok. - Und wenn Sie die Links angeben, - sollten Sie es in dieser Reihenfolge tun, - um, - die folgenden Links können Eigenschaften von den obigen Linkzuständen erben. - Okay, - lass uns weitermachen und einen anderen erschaffen. - Das wird unser letzter Ereigniszustand sein, - der als aktiv bekannt ist. Und das hier ist, ähm, du siehst diesen wirklich nicht so oft, aber dieser wählt Links , während die Maustaste gedrückt ist oder wenn du darauf klickst. - Das ist also buchstäblich, während Sie die Maustaste gedrückt haben. - Sobald Sie klicken und Sie die Maustaste loslassen, - Sie werden nicht sehen, dass dies nicht mehr verschwindet. - Also, um das wirklich klar zu sehen, - müssen Sie tatsächlich klicken und halten Sie die Maustaste gedrückt. - Es ist also nur ein Bruchteil einer Sekunde. - Gewöhnlich, dass wir diesen bestimmten Ereigniszustand hier sehen. - Also ändern Sie einfach die Farbe in Rot, nur um das wirklich offensichtlich zu machen, - wir können voran gehen und sparen. - Okay, - so diese Stile Links basierend auf ihren auf den verschiedenen Ereigniszuständen. - Was wir also tun wollen, ist, dass wir das etwas ändern wollen, damit wir diese Stile verwenden können, um Links innerhalb eines bestimmten Teils der Seite zu stylen, weil Sie oft nicht so sehr daran interessiert sind, Links auf allen Seiten zu stylen -. - Das Gleiche. - Aber normalerweise, - wissen Sie, - haben Sie Links in einem bestimmten Teil der Seite, die Sie anders gestalten möchten. - Also vielleicht, - wissen Sie, - Links während der Hauptinnenseite der Hauptnavigationsleiste haben einen bestimmten Stil und dann - vielleicht Links unten in Ihrem Körper, - kopieren, - haben einen anderen Stil. - Und dann vielleicht, - wissen Sie, - Links am unteren Rand der Seite haben einen anderen Stil. Also, auf meiner Seite hier, werde ich ein paar Links haben, die unter dieser normalen Körperkopie verstreut werden. Und ich habe auch Links wie auf einer Sidebar wie Top-Marken und ein Schuharchivusw. Und ich habe auch Links wie auf einer Sidebar wie Top-Marken und ein Schuharchiv usw. - Und ich denke, ich werde diese Links an der Spitze hier auf meiner NAB stylen, sind völlig anders. Diese werden prominenter sein, größerer Text, und ich werde sie irgendwie wie Knöpfe am oberen Rand der Seite machen. - Und dann, wenn ich hier unten unten auf der Seite, - haben wir eine ernsthafte von Links, die in einem Abschnitt alle auf ihre eigenen sind. - Dies ist der Detailbereich kurz vor der Fußzeile am unteren Rand der Seite. - Und ich möchte diese Links so einstellen, dass sie anders gestylt werden als die Links hier oben, die Luft - innerhalb der Abschnitte. - Also, was haben wir vorher gelernt? - Das wird uns helfen. - Bevor wir ein I. - D. -auf einem der Dibs benutzt - D. - haben. - Und dann verwenden wir etwas, das als Nachkommenselektor bezeichnet wird, indem wir hier ein Leerzeichen setzen konnten - alle H zu stylen, - aber nur, wenn sie innerhalb dieses Elements sind, - oder alle der beiden. - Nur wenn sie innerhalb dieses Elements mit der Idee des Logos sind, so dass unten verwendet werden könnte - auch hier. - Wenn ich also Links in verschiedenen Teilen der Seiten stylen möchte, habe ich ein paar Optionen. - Ich kann Klassen auf Links in bestimmten Bereichen anwenden und angeben, dass eine Verbindung mit einer bestimmten Klasse - hat einen bestimmten Stil. - Ähm, - oder was noch einfacher ist, ist, dass ich einen abhängigen Selektor verwenden kann, - also gehen wir voran und springen zurück zur Indexseite, - und lassen Sie uns nach unten zum Abschnitt Details scrollen, der am unteren Rand der Seite sein sollte. Wenn du ganz oben auf der Seite stehst, zeige ich dir einen Trick. - Ich komme wieder hoch. - Nehmen wir an, Sie sind oben und möchten wirklich schnell zum Ende der - Seite springen . - Wenn Sie Befehl und den Pfeil nach unten auf Mac getroffen werden, - es ist Befehl Pfeil nach unten und auf Windows, - es ist nach unten Pfeil gesteuert. - Wir springen Sie bis zum Ende der Seite, und dann können Sie einfach nach oben scrollen. - Das ist eigentlich ein bisschen zu weit. - Hier ist das Ende Detail Abschnitt und dann, - ah, - Ich will, dass die Zehe über Details und diesen Abschnitt hier nach oben scrollen. Ich würde diesem Kerl gerne ein I D geben also werde ich diesem Abschnitt der Seite eine einzigartige Identität geben. - Und ich werde es nur Details nennen, okay? - Und dann werde ich das retten. - Und ich habe diesen Code bereits für Sie auf den Rest der Seiten hinzugefügt, so dass wir einfach wieder kommen können - hier, um dot CSS zu stylen und zu schwächen. - Verwandeln Sie diese in Nachkommen Selektoren, indem Sie sagen, Pfund Details Raum eine Kohle und Link. - Auf diese Weise werden Lee-Links während ihres normalen Zustands gestylt, wenn sie sich im - Detailbereich befinden. - Richtig. - Damit ich das hier hinzufügen kann. - 2 Pfund Details. - Weltraum so. - Also das wird sagen, - Hey, - Browser. - Gehen Sie und finden Sie etwas mit einer einzigartigen Vorstellung von Details. - Geh hinein und style ihn. - Die Links, - wann immer sie besucht wurden, sind bereits angeklickt. - Und das sagt, - Hey, - Browser, - gehen Sie in den Abschnitt mit der Idee von Details und finden Sie einige Links. - Und wenn Leute auf ihnen schweben, - stylen sie auf diese Weise. - Okay, - Und dann schließlich - wir haben diesen, der aktiver Staat ist. - So wird es nur während ihres aktiven Status Links stylen, wenn es innerhalb des Abschnitts - mit der Idee von Details. - Ok, - genial. - Also gehen wir raus und speichern das und kommen zum Browser zurück, und wir werden eine Aktualisierung machen . - Und diese Links sind innerhalb der Abschnitte. - Diese sind innerhalb der unbenannten Abschnitte. - Sie haben kein I. - D. - Also diese Luft immer noch grau in ihren unterstrichenen anfänglich. - Jedoch, - wenn ich hier in diesen Abschnitt hinunterkomme, - können Sie sehen, dass diese Links auf dem Schweben schwarz sind, und wenn wir auf sie den aktiven Staat klicken - sehen wir, - sie werden rot. - Und wann immer wir bereits auf sie geklickt haben, - das und wir kommen zurück auf die Seite. - Sie sollten großartig sein. - Welches ist der besuchte ST, den ich tatsächlich schon auf diese Links geklickt habe. - Deswegen sind sie jetzt alle grau. - Okay, - manchmal magst du einen besuchten ST. - Wenn Sie viele Links haben, - können die Leute sehen, auf welche Links sie waren oder geklickt haben. - Jedoch, - andere Male möchten Sie vielleicht nur die gleichen, - ähm, - Stile aus Ihrem normalen Linkstatus wie Ihr besuchte ST teilen - ähm, . Also, wenn ich das machen wollte, könnte ich hier runterkommen und einfach sagen, es sei schwarz und weißt du, - keine Textdekoration, wenn wir den Link auch besuchen, - ähm, - aber das ist irgendwie überflüssig, weil ich Ich gebe nur die gleichen Stile hier und hier. - Und Sie werden feststellen, dass Sie ziemlich häufig die gleichen Stile verwenden, also gibt es tatsächlich einen besseren Weg, dies zu tun. - Ähm, - wir können immer das etwas verwenden, das einen zusammengesetzten Selektor genannt wird, - der das Komma zwei separate, - verschiedene Selektoren verwendet . - Also kann ich das verwenden, um beide gleichzeitig zu stylen, indem ich hier und dann ein Komma setze - diese Details einfüge, die hier oben besucht werden und ich kann diesen hier loswerden, - lass mich voran gehen und das so löschen. - Also, was ich dort getan habe, war ich gesagt, - Pfund Details ein Doppelpunkt Link Komma, - was bedeutet und auch Stil dies. - Wenn ich das so laut vorlesen würde, wie der Browser dies interpretiert, wäre es irgendwie so, als würde ich Ah hey, - Browser sagen . - Gehen Sie und finden Sie etwas mit einer einzigartigen Vorstellung von Details. - Jetzt geh rein und finde Links. - Und während ihres normalen Zustandes, - wenn niemand darauf geklickt hat, - stylen Sie sie auf diese Weise und dann bedeutet das Komma und auch gehen und finden Sie ein Element mit der Idee - von Details und gehen hinein und auch Stil-Links während ihrer besuchten ST Also im Grunde, - in einem einzigen Selektor. - Durch die Verwendung eines Kommas, - können Sie verschiedene Elemente gruppieren, - und in diesem Fall, - wir haben gesagt, gehen und Stil, - normale Links und auch gehen Stil-Links, die besucht wurden. - So werden jetzt sowohl der Standard-Linkstatus als auch der besuchte ST schwarz mit Textdekoration von keiner sein. - Also ist es gut und probiere das alles sicher aus, und wir kommen zurück und erfrischen uns. - Und jetzt, - seit dem Standardzustand und dem besuchten ST oder dasselbe. Obwohl ich schon mal auf diese Links geklickt habe, sind sie alle noch schwarz. - Wir sehen die tolle Farbe nicht mehr. siehst, Und du siehst,wenn ich rüber bin, wir ein wenig unterstrichen, um mich wissen zu lassen, dass ich über den Link schwebe. - Jetzt. - Es liegt wirklich an dir. - Was Sie während dieser Links tun, heißt es. - Es gibt alle möglichen Möglichkeiten. Ich habe ein paar wirklich konventionelle Dinge gemacht, die vielleicht etwas langweilig sind. Ich habe ein paar wirklich konventionelle Dinge gemacht, - Ich habe gerade die Farbe oder die Textdekoration geändert, aber tatsächlich können Sie die Texte ändern. - Sie können die Schriftgröße ändern, - und der Link sieht so aus, als ob er größer wird. - Der Text sieht so aus, als würde er größer werden, wenn Sie den Mauszeiger über. - Ähm, - Sie können auch wie das Gewicht des Textes ändern, um Sie dicker zu werden. - Sie können den Stil ändern , um , umihn zu einem Tallix zu machen. - Sie könnten sogar die Schriftart komplett ändern, was eine seltsame Wirkung wäre. - Sie können Hintergrundfarben und alle möglichen Dinge ändern. - Auch fühlen Sie sich frei, um die Links unten zu überprüfen. - Das wird alternative optionale Ressource geben, ist, dass Sie online überprüfen können, um zu erfahren - mehr über CSS-Selektoren. - Was Sie als nächstes tun möchten, ist, gehen Sie weiter und gehen Sie zur Code-Herausforderung, wo Sie CSS verwenden, um Ihr Website-Projekt zu stylen. 28. Entwicklerwerkzeuge (Teil 1): - Hallo, Leute. - Willkommen zurück. - Ich wollte Ihnen ein kurzes Beispielvideo zeigen, wie Sie Ihre Entwicklertools verwenden und diese - Tools helfen Ihnen, Probleme und Probleme zu beheben und zu debuggen, die Sie auf dem Weg haben . - Also zuvor haben wir uns mit HTML-Validatoren und CSS-Validatoren als eine Möglichkeit angesehen, die Syntax unseres Codes zu validieren . - Noch ein Wort. - Manchmal werden Sie einfach versehentlich etwas falsch geschrieben oder falsch geschrieben, - und das wird einen Fehler in Ihrem Code verursachen. - Aber es wird auch viele Male geben, in denen es keine syntaktischen Fehler gibt, wo Sie alles richtig eingegeben haben. - Aber es gibt immer noch einige Dinge, die nicht genau so angezeigt werden, wie Sie es im - Browser möchten . - Und das ist, wo Entwickler-Tool Schritt in und wirklich ein ausgezeichnetes Werkzeug für die Lösung - diese Probleme. - Sehen wir uns eine Art hypothetische Situation an, die ich hier im Code eingerichtet habe. - Und natürlich, - Sie werden diese spezifischen Änderungen in Ihrem Code nicht auf sehen, - und es gibt wirklich keine Notwendigkeit, dass Sie diesem Beispiel folgen müssen. - Sie können voran gehen und einfach zurücklehnen, - entspannen und zuschauen. - Ähm, - und ich habe hier ein Beispiel eingerichtet, wo ich den Stil dieses bestimmten Absatzes auf der Seite ändern möchte . - Das ist also in meinem Verkaufsabschnitt und was ich tat, war, dass ich beschlossen , - wissen Sie, - ich wollte all diesen Absatz und vielleicht, - wissen Sie, - Text an verschiedenen Stellen auf meiner Website haben - wissen Sie, . - Ähm, - haben diese Klasse von Highlight, die den Text in eine blaue Farbe ändern würde. - Normalerweise ist dieser Absatztext schwarz, - wie Sie wissen, - und wir werden das ändern, um es blau zu gestalten. - Also habe ich vorangegangen und diese Klasse hier von Highlight zu diesem Element hinzugefügt. - Und dann, wenn ich in meinen Stil Punkt CSS kommen, - können Sie hier unten online 87 sehen, dass ich eine Klasse von Highlight erstellt und setzen Sie es zu haben - die Farbe von Blau. - Also an dieser Stelle, - ich gehe davon aus, dass alles korrekt in diesem Text gemacht wurde, wird im - Browser als blau erscheinen . - Jetzt, - seltsamerweise, - wenn ich zum Browser gehe und ich die Seite aktualisiere, - werden Sie feststellen, dass dieser Text, - in der Tat ist nicht blau, aber tatsächlich gelesen wird. - Anstatt mir die Haare zu reißen oder zu verbringen, , vielleicht Stunden durch alle meine CSS-Codezeilen zu graben, um herauszufinden, wo ich mir widersprach. - Dies ist eine ausgezeichnete Situation, um zu betreten und die Entwickler-Tools zu verwenden. - Nein, ich werde keine Entwickler-Tools und all die verschiedenen Browser demonstrieren. - Aber ich werde einige Links am Ende dieses Videos zur Verfügung stellen, wo Sie mehr über - die Entwickler-Tools für Firefox und Safari erfahren können. - Aber ich werde zeigen, wie man die Entwicklertools verwendet, um ein Problem wie dieses in Google - Chrome zu lösen . - Eine der Möglichkeiten, wie Sie Ihr Entwickler-Panel in Google Chrome öffnen können, ist, wenn Sie gehen - in die Ansicht, - Dropdown-Menü und Sie werden hier feststellen, dass es eine Auswahl namens Entwickler. - Und unter diesem, - haben wir die Möglichkeit, Entwickler-Tools hier zu bringen, damit Sie gehen können, um Entwickler zu sehen - Entwickler-Tools und das wird dieses Panel wie folgt zu bringen. - Nun, - irgendwann, - wenn Sie Ihr Entwickler-Panel auf der linken Seite schließen wollen, - gibt es ein kleines X hier. - Sie können fortfahren und darauf klicken, um es zu schließen, - und dann haben Sie Ihren vollständigen Browser wieder. - Eine andere Möglichkeit, Entwicklertools aufzurufen, besteht darin, ein bestimmtes Element zu überprüfen, um den HTML- und CSS-Code zu sehen, der dieses Element in Ihrem Seitenlayout formatiert oder beeinflusst. - Und um dies zu tun, - was Sie tun wollen, ist, dass Sie mit der rechten Maustaste auf das Element klicken, an dem sie interessiert sind - Inspektion. - Da ich also eine Zwei-Tasten-Maus hier habe, kann ich einfach mit der rechten Maustaste klicken. - Und wenn Sie auf einem Mac-Laptop waren, - können Sie zwei Finger verwenden und klicken, - Ähm, - oder Sie könnten die Kontrolle halten und den Linksklick tun, - so Kontrolle und ein Klick wird dieses Menü wieder und wieder zu bringen. - Wenn Sie eine Zwei-Tasten-Maus wie ich haben, - können Sie einfach einen Rechtsklick machen und dieses Menü nach oben bringen. - Und dann gehen wir, um Element genau hier zu inspizieren, und das wird das Entwickler-Panel aufzeigen. - Und es bringt nicht nur das Entwickler-Panel auf und hebt tatsächlich auch das hervor - spezifisches Element, das ich untersuchen möchte, - Also, wenn wir hier auf der linken Seite hierher kommen, - sind wir derzeit auf dem Elemente-Panel und wir werden ein wenig später lernen. - Wir werden ein bisschen mehr über diese anderen Registerkarten lernen, - aber jetzt werden wir nur die Elemente Panel erkunden und Sie können unten sehen. - Wir haben den ganzen HTML-Code, der angelegt ist. - Ähm, - und sie geben Ihnen sogar kleine Pfeile, wo Sie die verschiedenen - Eltern erweitern und reduzieren können , um die anderen HTML-Elemente zu sehen, die innen verschachtelt sind. - Und wenn es so ausgewählt ist, - kann ich auch das gesamte CSS sehen. - Es wirkt sich auf dieses Element aus. - Also, - wirklich, - jedes Mal, wenn ich auf ah klicke, - von einem Element zum nächsten wie folgt, - können Sie sehen, dass das CSS seine auf Lee ändert, - zeigt mir den CSS-Code, der auf diesen spezifischen -Element. - Also in unserem Fall, - schwächen entdecken Sie ein paar Dinge über diesen speziellen Absatz, - zum Beispiel, - als Faras der CSS. - Das regiert es. - Wir wissen, dass in der normalisierten Punkt CSS Datei online 63. - Mir wird gesagt, dass es die Schriftfamilie von San Serif erbt, - und es sagt uns hier, dass dieser Stil vom HTML-Selektor hier geerbt wird. - Okay, - wir haben auch Informationen über das User Agents Stylesheet, - und der User-Agent ist im Wesentlichen mein Browser. - Das bedeutet, dass Google Chrome diesen Standardstil hinzufügt. - Es sagt, dass in Google Chrome, dass Absätze eingestellt sind, um Block anzuzeigen und dass es hat - eine bestimmte Menge an Rand rund um den Absatz. - Wir geben auch ein, e mein benutzerdefiniertes Stylesheet, - das heißt Stil, - dass CSS drei verschiedene Stile hat, die diesen bestimmten Absatz beeinflussen. - Es sagt mir, dass einer von ihnen hier online ist. - 19. - So können Sie dies immer lesen, indem Sie den Namen der Datei sehen und dann nach dem Doppelpunkt, - es wird Ihnen tatsächlich die spezifische Zeile im Code sagen, wo Sie diesen Stil finden können - hier Online 19 von Style dot CSS. - Ich kann sehen, dass ich eine Schriftgröße von 16 Pixeln und einer Zeilenhöhe von 1,5 m angewendet habe. - Okay, - Ich kann auch sehen, dass online 87 Ich habe eine Klasse von Highlight angewendet und ihm gesagt, die - Farbe von Blau haben . - Jedoch, - werden Sie bemerken, dass hier die Farbe blau wirklich durchgestrichen wird. - Wann immer Sie eine der Eigenschaften sehen, die so durchgestrichen werden, - was es tut, ist es Ihnen zu sagen, dass dieser Stil von einem anderen Stil außer Kraft gesetzt wird -. Und in diesem Fall, wenn ich hier oben nur ein paar Zeilen über dieser Highlight-Klasse schaue, habe ich mir selbst widersprochen. - Und hier habe ich einen Nachfolger Selektor verwendet, wo ich das Element in diesem Fall ausgewählt habe, - der Abschnitt mit der Idee des Verkaufs. - Und ich habe alle Absätze darin gesagt, dass sie die Farbe Rot haben sollen. - Also in dieser Situation, - Sie können tatsächlich sehen, dass die Verwendung eines Nachkommenselektors überwältigen wird, - haben mehr Autorität als eine Klasse. - Die Farbe Blau wurde hier durchgestrichen, und ich sehe die Farbe Rot für diesen Text. - Wenn ich den Mauszeiger über diese spezielle Deklaration führe, werden Sie feststellen, dass es ein kleines Kontrollkästchen gibt, auf das ich neben es klicken kann und das aktiviert - und deaktivieren Sie diesen Code, damit wir sehen können, welche Änderungen innerhalb der Browseransicht auftreten. - Also, - zum Beispiel, - wenn ich dieses kleine Kontrollkästchen über Farbe rot anklicke Mit anderen Worten, - indem Sie diesen Stil deaktivieren, - können Sie das jetzt sehen. - Highlight ist in der Tat, - um hat die Autorität, den Text wieder blau zu färben. - Jetzt sehen wir den blauen Text wieder. - Wenn ich das nachsehe, wird es gelesen. - Wenn ich diesen Stil deaktiviere, - wird es blau sein. - Also, was mir das sagt, ist, wenn ich wirklich will, dass das blau ist. - Ich werde zu Fuß Linie 83 von Stil Punkt CSS gehen müssen, um diese Farbe rot von diesem - Stil zu entfernen . - Also lasst uns das ausprobieren. - Ich gehe zurück zu meinem Code, und ich gehe hier die Linie 84 runter und sehe Farbe rot. - Also, wenn ich voran und entfernen Sie diesen Stil oder in diesem Fall, - Ich werde einfach voran und kommentieren Sie das und dann werde ich wieder speichern und zurück zum Browser kommen - und aktualisieren, - und jetzt kann ich sehen, dass es dieses Problem korrigiert. - Also alle Änderungen, die Sie hier innerhalb der Entwickler-Tools vornehmen, werden sie Ihren Code nicht wirklich ändern. - Es ist nicht dasselbe wie in erhabene Steuern zu gehen und den Code physisch zu ändern. - Es zeigt Ihnen nur eine Vorschau. - Also wieder, - Entwickler-Tools oder nur zeigen Ihnen eine Vorschau, so dass Sie irgendwie mit spielen können - Fehlerbehebung Werte, bis Sie die Dinge so aussehen, wie Sie wollen. - Und dann können Sie die Informationen wie die Datei und die Zeilennummer verwenden, um in den - tatsächlichen Code zu gehen und diese Änderungen dauerhaft vorzunehmen. - Okay, - so, - abgesehen davon, dass Sie Stile aktivieren und deaktivieren können, - können Sie auch neue Stile erstellen, indem Sie in der Eingabe anderer Dinge klicken. - Zum Beispiel, - ich streite Dinge aus, bevor ich es tatsächlich im Code anwende, indem ich Dinge wie, - Weißt du, - Schriftgröße sage - Weißt du, . - Und dann kann ich eintippen, - wissen Sie, - wie drei m so etwas, - und ich kann sehen, wie viel größer der Text wird, - sagt Aiken. - Oh, das ist ein bisschen zu viel. - Ich sag zu em und sehe, wie das aussieht. - Und dann kann ich 1,5 sagen, und vielleicht ist das perfekt. - Also, wenn es sich herausstellt, dass ich die Schriftgröße bei 1,5 ihnen mag, - kann ich dann nein, - um in Style dot CSS online 87 zu gehen, fügen Sie dies einfach unten hinzu. - Also lasst uns das nachsehen. Also nochmal, wenn ich diese Seite aktualisiere, werde ich den Stil verlieren, weil, daran, - und die Entwickler-Tools, - Sie sind irgendwie nur eine Vorschau des Stils. - Also, wenn ich auf Refresh, - es ist nicht mehr 1,5 sie. - Aber ich weiß jetzt, dass ich hier reingehen und dauerhaft dem Code hinzufügen kann und indem ich mit den verschiedenen Größen herumspiele . - Ich war in der Lage, sie zu sehen, bevor ich tatsächlich eine Entscheidung getroffen habe, sich auf diese Größe zu verpflichten. - Also, wenn ich das jetzt aktualisiere, kann ich sehen, dass sich hier widerspiegelte Änderung. - Abgesehen davon, neue CSS-Deklarationen zu schreiben und sie innerhalb der Entwickler-Tools zu testen -, - können Sie auch vorhandene Werte ändern. - Zum Beispiel, - hier Online 19 und Stil Punkt CSS. - Es hat Stile für meinen Absatz, - wie Schriftgröße und Zeilenhöhe. - Also, - zum Beispiel, - wenn ich daran interessiert bin, mit der Zeilenhöhe zu spielen, anstatt zu klicken, um eine neue - Deklaration zu erstellen , - kann ich auch klicken und den Wert für eine vorbestehende Eigenschaft wie die Zeilenhöhe auswählen. - Also gibt es die Zeilenhöhe in erhabenem Text, - und ich teste einfach nur einen anderen Wert aus, damit ich hier einen neuen Wert eingeben kann. - Ich kann auch, - zusätzlich den Pfeil nach oben und unten auf meiner Tastatur drücken, - und das wird die Zahl so ändern. - Also, - zum Beispiel, - bestreite ich verschiedene Zeilenhöhen aus, indem ich den Pfeil nach oben oder nach unten treffe - na ja, - oder ich kann eine genaue Menge eingeben, indem ich 1.4 so etwas eintippe, - und ich kann diese Vorschau sehen. - Und wenn ich mag, wie es aussieht, kann ich voran gehen und dann das hier innerhalb des eigentlichen CSS-Codes ändern. 29. Element: - Hallo. - Willkommen zurück. - Dies ist Folien 3.1 Gebäudeseiten-Layouts. - Werfen wir einen Blick auf einige Themen hier, die uns auf dem Weg zur Erstellung von Riel helfen - Website-Layouts, so dass wir Elemente positionieren und Spaltenstruktur auf der Seite erstellen können. - Also müssen wir uns die andere Art und Weise ansehen, die Elemente im Browser angezeigt werden. - Wir werden einen Blick auf etwas werfen, das Boxmodell genannt wird, - das es uns ermöglicht, die Fähigkeiten für die Dimensionierung und Skalierung von Elementen zu erkunden sowie wie - Abstand innerhalb einer Außenseite von Elementen zu verringern. - Wir werden auch einen Blick auf eine neue Box-Ästhetik werfen, also lernen wir einige verschiedene Eigenschaften kennen, die wir verwenden können, um unseren Elementen mehr Stil zu verleihen. - In der Vergangenheit haben wir uns die Hintergrundfarbe angesehen. Aber jetzt schauen wir uns Dinge an, wie das Hinzufügen eines Hintergrundbildes, das Runden der Ecken unserer Elemente, Erstellen eines Rahmens, Hinzufügen von Deckkraft und Kastenschatten. - Wir werden uns auch die Floatpositionierung ansehen. - Positionierung ist Ihre Lösung für die Erstellung von Säulenstruktur und Positionierung - Elemente auf der Seite. - Also zuerst müssen wir verstehen, dass alle Elemente standardmäßig entweder eine von zwei Möglichkeiten anzeigen - im Browser. - So bestimmte Elemente im Browser, die Sie bereits von früheren Übungen bemerkt haben - sie werden nebeneinander angezeigt. - Zum Beispiel, - Bilder, die das AMG-Tag verwenden, und Links, die das A-Tag verwenden, werden oft nebeneinander angezeigt. - Und das ist die Standardmethode, die sie in jedem Browser angezeigt werden. - Ah, - und das ist, weil sie das sind, was wir als in Zeilenelementen oder Elementen bezeichnen, die standardmäßig in - Zeile angezeigt werden. - In Zeilenelementen sind sie nicht in der Lage, eine zu akzeptieren. - Innerhalb der Höhe, - werden sie nur die Größe des Inhalts sein. - So wird der Inhalt innerhalb des Ofens im Zeilenelement die Breite und Höhe des - jenesElement, -mit anderen Worten und in Zeilenelementen diktieren Element, - . - Auch, - Ich werde keine Abstände über oder unter ihnen akzeptieren. - Inland-Elemente, - obwohl, - können nicht harmonisch nebeneinander auf der gleichen Linie mit anderen in Linienelementen existieren. - Beispiele für Elemente auf Blockebene, die Sie gesehen haben, waren Dinge wie Überschriften oder - Absätze. - Sie werden bemerken, wann immer Sie wie eine Überschrift oder einen Absatz einfügen. - Die Elemente, die Sie platzieren, erscheinen immer unten in der nächsten Zeile nach unten, - so Blockebene Elemente können Breite und Höhe akzeptieren. - Wir können ihnen innerhalb der Höhe, - Eigenschaften geben , um sie auf dem Bildschirm zu dimensionieren. - Ähm, - und sie können auch Marge haben, - was ist, dass sie Abstand über und unter ihnen haben können. - Elemente auf Blockebene nehmen immer die vollständige Zeile auf, auf der sie sich befinden. - Mit anderen Worten, - ein Black-Level-Element kann nicht nebeneinander in der gleichen Zeile wie eine andere Blockebene existieren - Elemente. - Werfen wir einen kurzen Blick auf ein Beispiel dafür. - Also werde ich einfach zu basteln Dot io und ich habe hier ein Beispiel für dieses Mädchen erstellt, und diese Seite ist irgendwie wie ein Kratzpad. - Ähm, - es ist ähnlich wie andere Seiten, die, - wie Js Geige und basteln, die es Ihnen erlauben, - um, - im Grunde ein HTML-CSS und oder Javascript zu - um, korrigieren und das zu sehen, wie Sie das kennen - Ergebnis davon. - Sehen Sie, wie das im Browser angezeigt wird. - Ok. - So können Sie sehen, dass ich im HTML zwei Entwicklungen dibs erstellt habe und im Wesentlichen gibt - einen Container oder eine Box auf dem Bildschirm erstellen, - und ich habe beide eine generische Klasse von Box gegeben. - Also hier haben wir die Punkt-Box-Klasse hier. Ich habe eine Klasse von Box angegeben, und ich habe den Elementen eine Hintergrundfarbe von Aqua gegeben, was ihm diese hellblaue Farbe verleiht. Ich habe dieser Box auch eine Breite von 100 Pixeln und eine Höhe von 100 Pixeln gegeben. Ich habe dieser Box auch eine Breite von 100 Pixeln und eine Höhe von 100 Pixeln gegeben. - Ein wenig später, - wir werden über all die verschiedenen Möglichkeiten für die Dimensionierung sprechen. - Aber vorerst, - können wir uns einfach die Eigenschaft mit und die Höhe ansehen, - und wir haben ihm eine feste Anzahl von Pixeln gegeben, nur um dies zu einem perfekten Quadrat zu machen. - Wir haben ihm auch diese Eigenschaften gegeben, - die wir noch nicht gesehen - was Padding und Marge genannt wird. - Also Polsterung ist Abstand innerhalb des Elements, - und Rand ist Abstand außerhalb der Elemente. - Okay, - äh, - und nun, - wieder, - kommen wir zurück. - Und wenn wir im Detail über das Box-Modell gehen wird ein bisschen mehr darüber diskutieren, wie - Polsterung und Margenfaktor in die Größe der Elemente. - Okay, also diese Typen Luft dibsen. - Wir wissen, dass Entwicklungen standardmäßig, - sie zeigen Block im Browser, - weshalb Feld Nummer eins über Feld Nummer zwei erscheint, - was unten erscheint. - Also haben wir diese vertikale Stapelung. - Warum? - Da diese Luft standardmäßig, - diese Luftblock-Ebene Elemente schwarze Ebene Elemente erscheinen übereinander und sie - nehmen den gesamten horizontalen Raum. - Okay, - da König des horizontalen Raumes. - Mit anderen Worten, - okay, - wenn ich also jemals die Art und Weise ändern möchte, wie ein Element angezeigt wird, - haben wir auch die CSS-Eigenschaft namens display. - Also standardmäßig, - dieser Typ zeigt Block so an. - Aber wenn ich mag, kann ich das in der Reihe ändern. - Also, wenn ich dies in Zeile ändere und ich zurückkomme und ich auf Ausführen klicke, - können wir den Effekt sehen, dass diese Boxen jetzt nebeneinander erscheinen. - Also passierten hier ein paar Dinge, als wir diese Jungs auf Schlange gesetzt haben, - Sie haben wahrscheinlich bemerkt, dass dies nicht mehr 100 Pixel breit und 100 Pixel hoch ist. - Sobald wir dies auf ein in-line-Element gesetzt haben, - bemerken wir, dass in Linienelementen, - Obwohl sie Platz nebeneinander bringen, - verlieren sie auch einige Fähigkeiten. - Okay, - Also nämlich, - es ist nicht mehr in der Lage, in einer Breite und Höhe zu akzeptieren. - Weil, - wie ich in Zeile erwähnt Elemente sind nur so breit wie der Inhalt in ihnen. - Also, wenn ich hier mehr Text eingeben würde, würde es tatsächlich etwas breiter werden. - Wir haben auch wir die wir den Rand sehen konnten, - was der Abstand außerhalb des Elements ist. - Wir können sehen, dass es auf der linken und rechten Seite des Elements existiert. - Jedoch, - es ist nicht mehr auf der Ober- oder Unterseite vorhanden. - In der Tat, - die blauen Aqua-Farben rechts oben gegen den Rand des Rahmens hier, weil es nicht mehr - irgendwelche Abstände oben. - So können Elemente auf Landesebene harmonisch nebeneinander existieren. - Sie können eine mit ihrer Höhe nicht akzeptieren, - und sie können keinen oberen und unteren Rand akzeptieren. - Also wieder, - wenn ich das wieder in Block ändere und ich auf Ausführen klicke, können Sie es sehen. - Es ist in der Lage, ah, - außer Breite und Höhe jetzt, - und wir sehen Abstand oben und unten, - und wir können auch sehen, dass sie vertikal gestapelt sind. - Okay, also gibt es eine Art Hybrid von diesen beiden. - Heutzutage, - die meisten Browser unterstützen diese nächste Methode, - dieser nächste Wert für die Anzeige. - Aber - um, - Browser wie Internet Explorer sieben und darunter haben begrenzte teilweise oder vielleicht sogar wissen - Unterstützung für diesen bestimmten Wert, - der in Zeile aufgerufen wird. - Dash Block, - Inland Schreibtischblock ist, - äh, - irgendwie wie das Liebeskind von in Linie und Block Level-Elementen. - Art wie ein In-Line-Element in einem Block-Level-Element. - Made it und ihr Kind in line Block hat eine Art von der Qualität Qualität, - einige der Eigenschaften beider Eltern. Wenn du so darüber nachdenken willst, ist das eine dumme Art, es zu beschreiben. - Aber es ist irgendwie, wie es funktioniert. - Also, wenn ich diesen Kerl auf einen Strichblock setze, - ist es in der Lage, innerhalb der Höhe zu akzeptieren. - Und es ist in der Lage, Rand oben und unten zu haben. - Ähm, - und es kann auch nebeneinander angezeigt werden. - So gibt es einige einzigartige Vorteile der in Linie. - Ah, - das Inline-Block-Element. , Und je nachdem,was du versuchst, könnte es für dich funktionieren. - Okay, es gibt eine Art von unerwarteten albern Ergebnissen. - Gelegentlich, - wenn Sie im Zeilenblock in einem Seitenlayout verwenden, - und anstatt all diese Beispiele zu demonstrieren, - suchen Sie nach einem Link unter diesem Video. - Und es wird eine Ressourcenverbindung geben. - Das wird zu einem guten Artikel online sein, der über einige der Torheiten spricht. - Na ja, sozusagen. - Einige der guten Teile und die schlechten Teile der Verwendung in Line-Block, um Elemente anzuzeigen. - Okay, - Ähm, - trotzdem, - wir gehen Teoh lernen. - Ah, - eine alternative Methode zur Positionierung von Blockebenenelementen. - Es ist eine Spaltenstruktur wie diese genannt Floating oder Float-Positionierung, die wird - wirklich alle unsere Probleme lösen und Seitenlayouts erstellen. - Aber trotzdem, - Ich wollte Ihnen die verschiedenen Möglichkeiten zeigen, dass Elemente im Browser angezeigt werden können. - Und ich wollte auch die Aufmerksamkeit auf die Tatsache lenken, dass wir durch die Verwendung dieser Eigenschaft, - die CSS-Eigenschaftenanzeige, - die CSS-Eigenschaftenanzeige, tatsächlich die Art und Weise ändern können, wie ein Element angezeigt wird, wenn wir wählen. 30. Boxmodell: - Also zuerst können wir uns das Klopfen ansehen, was ich erwähnte. - Klopfen ist der Abstand innerhalb eines Elements, - und dann haben wir Rand, - was der Abstand außerhalb eines Elements ist. - Wir haben auch die border-Eigenschaft, - die wir ihm Stile eine Dicke und Farben geben können, um einen Rahmen hinzuzufügen, - was eine Linie oder Strich auf der Kante eines Elements ist als auch. - Jetzt addieren sich alle diese verschiedenen Teile in Teilen zur Messung der Breite und - Höhe des Elements. - Und genau darum geht es beim Box-Modell. - Werfen wir einen Blick auf dieses Bild. - Dieses Diagramm hier zeigt das Box-Modell, - Ähm, - und was sie Ihnen hier zeigen, ist, dass der Rand hier der Abstand außerhalb der - Elemente ist . - Das drückt also auf andere Elemente, die neben diesem Element positioniert werden können, so dass sie nicht gegeneinander stehen. - Das ist also eine bequeme Art von Puffer oder Abstand zwischen den Elementen, - und Sie können hier sehen, können Sie den Rand für den oberen Rand angeben, - linken Rand unten und Rand Rechte. - So kann die Grenze jede Größe haben, die Sie mögen. - Der Rand kann ein Pixel dick sein. - Es könnte 10 Pixel dick sein. - Sie können verschiedene Größen von Rändern angeben, - und das wird eine zusätzliche Dicke des Strichs auf der Außenkante Ihres - Elements sein. - Nun, - innerhalb der Grenze, - wir haben etwas namens Polsterung, - also klopfen ist der Abstand innerhalb der Elemente. - Also, wenn ich Text in hier eingegeben habe, - wenn ich Hallo, - Welt, - wenn ich nicht möchte, dass dieser Text direkt gegen den Rand meiner Box steht, - dann kann ich hier eine Art von Polsterung hinzufügen, - Klopfen nach links, - Polsterung rechts, - Klopfen oben oder Klopfen unten, um den Inhalt von der Kante des Elements weg zu schieben. - Um dies zu sehen, - ist der einfachste Weg, Padding und Action zu sehen, entweder eine Hintergrundfarbe zu Ihrem - Element zu geben oder einen Rahmen zu geben, damit Sie beobachten können, wie sich der Inhalt innerhalb des Elements bewegt - weg von der Grenze oder ein komfortable Menge an Abstand zwischen dem Rand der - Hintergrundfarbe und der Khan, - wo der Inhalt beginnt hier. - Okay, - also werden Hintergrundfarben hinter sich gehen, - Polsterung bis zum Rand des Elements bis zum Rand. - Das Box-Modell besteht also aus dem Inhalt mit der Polsterung, - der Grenze, - und dann ist der Rand jetzt, wenn die Dinge nicht kompliziert genug waren, - ich muss Ihnen von der Existenz von zwei verschiedenen Box-Modellen erzählen. - So wie es sich herausstellt, sind Browser wie Firefox, - Safari und Chrome alle verwendeten ein Box-Modell, das als das W drei C Box-Modell bekannt ist. - Also wird das W drei C diktiert, dass, wenn wir das mit oder die Höhe eines Elements angeben, - wir über den verfügbaren Platz innerhalb dieses Elements für den Inhalt sprechen. - Und wenn ich Polsterung oder Rand oder Rand hinzufüge, - das ist zusätzlich auf zusätzlichen Betrag, den wir auf die Breite hinzufügen müssen. - Okay, - was ich damit meine, ist sagen wir, ich habe eine Box ein div, - zum Beispiel. - Und ich gebe an, dass def 200 Pixel breit sein sollte. - Ich beschreibe das mit, - äh hier, - was ist der Inhalt mit Also wenn ich mit 200 Pixeln im Feuer sage, - Fox in Safari, - in Chrome und in der Oper, dass 200 Pixel den verfügbaren Platz ausmachen werden - für den Inhalt innerhalb Ihres Elements. - Nun, - wenn ich auch Padding spezifiziere, - was Abstand innerhalb des Elements ist. - Nehmen wir an, ich gebe 10 Pixel Polsterung an, die auf 10 Pixel auf der linken Seite und - 10 Pixel auf der rechten Seite hinzufügen werden. - Also jetzt, - anstatt 200 Pixel breit zu sein, - wissen Sie, - wenn ich mit 200 Pixeln und 10 Pixel klopfen, - ist die tatsächliche Messung dieses Elements jetzt 220 Pixel. - Warum fragst du? - Weil wir anfangs sagten, das mit war 200. - Aber Klopfen, die wir hinzufügen müssen, ist ein zusätzlicher Betrag. - Also Klopfen ist nicht in der Breite enthalten, - um, - im mit Wert unter Verwendung der Browser, - alle Browser, die sich an das W drei C Box-Modell halten. - Also 200 Pixel breit plus 10 Pixel klopfen hier und 10 Pixel klopfen hier machen dies - Element tatsächlich, - 220 Pixel jetzt, - okay, - Sie fragen sich vielleicht, warum Sie sich um all diese Mathematik kümmern würden. - So, - es stellt sich heraus, dass, wenn wir anfangen, Säulenstruktur zu bauen, die wir wissen müssen, wie warum - diese Säulen sind, so dass sie tatsächlich nebeneinander passen können. - Sie haben nur so viel Bildschirmfläche oder Bildschirm Immobilien ist, - wir nennen es, - und Sie müssen diese Dinge harmonisch nebeneinander passen. - Also, das ist eine Sache zu beachten ist, dass Feuer Fox Safari, - Chrom und Oper verwendet die W drei C Box-Modell-Methode Jetzt, - im Gegensatz, - Internet Explorer hat seine eigene Box-Modell-Methode. - Okay, - also in der Internet Explorer-Box-Modellmethode, - wenn Sie 200 Pixel Breite angeben, die tatsächlich automatisch alle - Rahmen oder Padding einschließen wird . - Okay, aber keine Marge. - Keine der Boxmodellmethoden, - einschließlich Randschnitt. - Aber der Hauptunterschied zwischen der Art und Weise, wie Firefox Safari und Chrome und Opera die Größenänderung betrachten - eines Elements im Vergleich zu der Art, wie Internet Explorer die Größe eines Elements betrachten, ist nämlich, - dass Internet Explorer automatisch Rahmen und Padding enthält. - Also, was das bedeutet, ist, - sagen wir, dass mein div 200 Pixel mit okay in beiden Browsern hat, - richtig? - Beide Browser Luft schauen auf den gleichen Code und wir sagen 200 Pixel breit und 10 Pixel - Polsterung links und rechts. - Okay, - wir lassen die Grenze vorerst raus. - Aber stellen Sie sich vor, dass wir 200 Pixel innerhalb von 10 Pixeln der Polsterung auf allen Seiten haben. - Also in der Internet Explorer-Box-Modellmethode, - das Element wird tatsächlich bei 200 Pixeln erscheinen. - Also, wenn Sie 200 Pixel sagen, - wird es 200 Pixel sein. - Aber der verfügbare Inhalt Raum im Inneren ist nur 180 Pixel Platz für den Inhalt, weil - 10 Pixel auf der linken Seite durch Padding aufgenommen werden, - und 10 Pixel auf der rechten Seite durch Padding aufgenommen werden. - Also mit diesem 200 Pixel von mit, - wir müssen 20 Pixel subtrahieren, - was uns 180 Pixel verfügbaren Platz für den Inhalt gibt, - obwohl das Element selbst Onley 200 Pixel breit einnehmen wird. - Okay, - Und das ist wieder, - im Gegensatz dazu - die W drei c-Methode, - wo, - anstatt die 20 Pixel der Polsterung von innen zu subtrahieren, - müssen wir es dem draußen. - Okay, - so buchstäblich, - wenn ich sagen würde, - mit 200 Pixeln, die 10 Pixel auf allen Seiten in AII und Internet Explorer auffüllen, - würde die Box 200 Pixel breit aussehen, genau wie wir es gesagt haben. - Jedoch, - in Firefox Safari, - Chrome und Oper, - es würde tatsächlich breiter in diesem Browser aussehen. - Es wären 220 Pixel. - Yikes. - Das klingt nach viel Ärger und Arbeit. - Und tatsächlich, - war es in der Vergangenheit. - Das hat wirklich eine Menge von uns Entwicklern runtergebracht. - Es war eine große Quelle des Ärgers für mich. - Persönlich, - ich weiß, ich kann sagen, - aber zum Glück für Sie, - ihr Jungs Air Learning Code an einem Punkt jetzt, wo es einige großartige Lösungen gibt, um - irgendwie all diesen Unsinn zu beheben. Aber, weißt du, im Laufe der Zeit gab es viele verschiedene Lösungen dafür, und ich werde über einige von ihnen reden, und wir werden darüber reden, warum einige von ihnen in Ordnung sind und warum einige von ihnen - auf jeden Fall sollte nicht tun, um diese Box Modellunterschied zu korrigieren. - Okay, sind also ein paar Hack-Lösungen. - Also von CSS eins und zwei, - gab es einige verschiedene Hack-Lösungen, bei denen Sie den Code ein wenig eingeben mussten - anders, um ihn für jeden Browser anders anzuzeigen. - Wir werden uns auch eine Methode ansehen, die Box in einer Box genannt wird, und wir werden auch einen Blick auf eine neue Methode werfen, die ich Ihnen empfehle, für Ihr - Projekt zu verwenden , - das als CSS Drei-Box-Größeneigenschaft bezeichnet wird. Okay, also zuerst, lasst uns über einige ältere CSS-Hacks reden und diese Leute nicht machen. - Also in der Vergangenheit, - jemand hat herausgefunden, dass, wenn Sie falsche Zeichen in die CSS-Eigenschaft wie Schrägstrich setzen - markiert, dass bestimmte Browser den Schrägstrich ignorieren und ein anderer Browser wird, - um, - ein anderer Browser wird es in der Tat immer noch verarbeiten und lesen. - Also wissen Sie, - ein Browser könnte sagen, - Oh, - ich kann Onley das mit 100 Pixeln verstehen, weil es richtig geschrieben ist. - Und dann würdest du den Verstand mehrmals schreiben, - aber für einen anderen Browser. - Also ein anderer Browser, - weil Sie hier einen Schrägstrich setzen, - es würde ihn ignorieren. - Und doch würde ein Browser immer noch, - äh, - außer diesem Wert und dann ändern sie es Zehe 40 Also, um im Grunde das Backen für die Tatsache, dass Internet Explorer anders angezeigt wurde. - Was die Leute tun würden, ist, dass sie kleine lustige Schrägstriche und Zeichen in die - width und height Attribute setzen würden, - wissen Sie, - mehrere CSS, die verschiedenen Browsern sagen, die mit auf unterschiedliche Weise. - Dies gibt Ihnen tatsächlich einen Validierungsfehler. - Wenn Sie Ihr CSS validieren, - gibt es eine Luft. - Das ist eine schrullige Lösung. - Ich würde dem auf der Straße nicht wirklich trauen. , Der einzige Grund, warum du das nicht benutzen solltest, ist, selbst wenn es jetzt funktioniert, keine Garantie dafür gibt, dass diese Dinge in der Zukunft funktionieren. - Und du wirst nicht wollen, dass du jahrelang auf deine Website zurückgehen und eine Art gehackten Code wie diesen entfernen musst . - Also benutze diese Methode nicht. - Diese andere Methode wird Box in einer Box-Methode genannt, - und dies wird in allen Browsern funktionieren, - alt und neu. - Es ist ein bisschen mehr Ärger als die letzte Methode, die ich dir zeigen werde, aber diese hier funktioniert. - Und, - ähm, - das ist irgendwie auf die Idee zentriert, dass der einzige Unterschied zwischen den beiden konkurrierenden - Box-Modellen ist, dass einer von ihnen, - außer Polsterung und Grenze in den Witz und der andere nicht umfassen Klopfen und - Grenze in die mit. - Also wirklich, - wenn Sie eine Box machen, die keine Polsterung oder Grenze darauf hat, - dann gibt es keinen Unterschied zwischen allen Browsern. - Diese Methode erfordert also zusätzlichen Markup-Code, - weshalb viele Leute diese Methode nicht mögen. - Was das persönlich eines der Dinge ist, die ich nicht ganz sicher über diese Methode bin, ist, dass es - immer beinhaltet, zwei Boxen statt einer machen. - Aber die Art und Weise, wie das funktioniert, ist, dass Sie eine äußere Box erstellen. - Also dieses div hier ist das äußere, - und dieses hat einen Witz angegeben, - aber es hat keinen Rand, - keine Polsterung und keine Grenze. - Wir hätten eigentlich auch hier Border null schreiben sollen, - aber Sie bekommen den Punkt, so dass er eine Breite und Höhe angegeben hat, - vielleicht, - aber keine Polsterung und keine Grenze sind die wichtigsten wichtigen Dinge hier. - Also dieser wird diese äußere Boxen anzeigen, die in allen Browsern gleich angezeigt werden - weil es keine Polsterung enthalten ist und kein Rand enthalten ist. - Richtig? - Es ist also Faras Firefox und Safari und Internet Explorer betroffen. - Es ist 100 Pixel breit, weil es keine Aufnahme von Padding oder Rahmen. - Ähm, - und dann für Internet Explorer, - es sieht auch, dass es 100 Pixel breit ist. Aber dann fragst du dich vielleicht, aber was, wenn ich Polsterung will? - Was ist, wenn ich nicht möchte, dass alle meine Inhalte direkt gegen den Rand meines Elements stehen. - Ich möchte einen bequemen Abstand für die I. - Also, was Sie dort tun können, - dann, - ist, dass Sie eine andere Box innerhalb des Elements eine innere Box erstellen können, - zum Beispiel. - Und das hier können wir ihm Polsterung geben. - Also dieser Typ hier hat eine Polsterung drin, aber wir haben absichtlich kein mit angegeben. - Also, wenn Sie diese Methode tun, - es wird tatsächlich in allen Browsern funktionieren. - Aber Ihr HTML-Code ist doppelt so viele Codezeilen, - normalerweise, weil Sie jedes einzelne Element eine Box innerhalb einer anderen Box haben. - Okay, - also heutzutage haben wir die in CSS drei. - Wir haben diese wunderbare Eigenschaft, die zusammen kam genannt Box Dash Sizing, - so kann ich meinen Elementen sagen, dass sie Box Sizing haben, - und ich kann angeben, wie es messen soll, damit ich zwingen kann, - wissen Sie, - alle Browser verwenden Sie entweder das Internet Explorer-Modell, - das als Randstrich bezeichnet wird. - Oder ich kann alle Browser zwingen, das W 3, - uh, -Modell namens Content Dash Box zu verwenden - uh, - . - Okay, - also hier habe ich notiert, dass dies 94.3% Unterstützung hat, - zumindest zum Zeitpunkt der Aufnahme dieses Videos, - die Anzahl der Browser, die Menschen weltweit verwenden, die unterstützen oder - verstehen Die Größenbestimmung der CSS drei Eigenschaftsfelder beträgt nicht etwa 94%. - Nun ist die gute Nachricht darüber ist, dass die Browser, die nicht verstehen, dass klein - Prozentsatz, die diese Box Größe Eigenschaft nicht verstehen zufällig Internet - Explorer ältere Versionen von Internet Explorer wie I E sieben und darunter. - So stellt sich heraus, dass diese älteren Versionen von IE sie tatsächlich diese Messung der i E - Box-Modell verwenden . - Also, wenn Sie Ihre Box-Größe auf Grenze Dash Box setzen, - sollten Sie wirklich 100% Unterstützung haben. - Während, wenn Sie es auf die W drei Methode Inhalt Feld Wert gesagt. - Wenn Sie hier Content-Box schreiben, - haben Sie wirklich nur etwa 94% Unterstützung. In diesem Fall , lasse ich die Politik in Bezug auf das, wer Recht hat oder wer falsch ist. - Und ich mag es, die I E-Box-Modellmethode zu verwenden, indem Sie Box Strich Größe Border Box sagen. - Dies wird Ihre Float-Positionierung und Ihr Seitenlayout in der Dimensionierung Ihrer - Spalten machen. - So viel mehr sorgenfrei und stressfrei, was Sie sehen werden, wenn wir mit der nächsten Übung fortfahren, wo wir ein Seitenlayout erstellen. Okay, also hier ist das eigentliche Diagramm, das ich dir gezeigt habe, und du kannst sehen, dass es wirklich IE sieben ist der Schuldige. - Lassen Sie uns also über Skalierung von Elementen sprechen. - Bestimmte Elemente können eine feste Größe in Pixel haben. - Sie können Pixel verwenden, um eine statische oder eine feste Menge von mit ihrer Höhe und auf allen - Geräten, - allen Bildschirmen zu erstellen. - Es wird immer eine bestimmte Anzahl von Pixeln haben. - Sie können auch einen Prozentsatz verwenden, um Dinge zu skalieren, - also ist es nur auf die gleiche Weise, wie ich sagen kann, - 200 Pixel breit. - Ich kann auch sagen, - wie 100% breit oder 50% breit und mit einem Prozent wird die Menge flüssig machen, - was bedeutet, dass es auf die Größe des Geräts reagieren wird. - Es kann tatsächlich, - ähm, - wissen Sie, - schrumpfen und erweitern ah, - Prozentsatz des verfügbaren Bildschirmplatzes basierend auf dem Wert, den Sie vor dem - Prozentsatz setzen . - Wir haben auch die Möglichkeit, Männer Strich Breite und Max Strich mit oder min Strich Höhe und - max Strich Höhe einstellen. - Also durch die Einstellung von Minimal- und Maximalwerten. - Sie haben einen Schwellenwert, bei dem er nie unter den Minimalwert oder über dem Maximalwert skaliert wird. - So kann das Element immer noch, - um, - dynamisch auf der Seite basierend auf der Größe des Gerätes oder der Größe des Browserfensters erweitern . - Aber Sie werden einen Haltepunkt, - eine minimale Schwelle haben , wo es dazu anhalten wird. - Es wird aufhören, an den Männern mit oder der Männerhöhe zu schrumpfen, - und es wird aufhören, am Maximum mit oder der maximalen Höhe zu wachsen. - Okay, - wir haben auch einen Wert namens auto und auto ist wirklich der Standard mit oder Höhe. - Grundsätzlich ist - das Setzen von A mit ihrer hohen Zehe Auto im Wesentlichen das gleiche, - ist nicht die Angabe eines mit ihrer Höhe, - eine Breite von auto auf einem in-line-Element wird im Grunde, - wie Sie wissen, - nur den Inhalt zulassen. - Entschuldigen Sie mich. - Das Element Toe nur BIA breit ist der Inhalt im Vergleich zu einem Block-Level-Element. - Wenn Sie etwas auf eine Breite von Auto setzen, - schwarze Ebene Elemente tatsächlich ohne A mit angegeben, - sie tatsächlich nehmen 100% oder die volle Breite des Bildschirms, - so wird automatisch, - wissen Sie, - verschiedene Dinge für Breite und Höhe tun, - abhängig von der Art, wie das Element angezeigt wird, - ob es im Linerblock oder im Linienstrichblock angezeigt wird. - Okay, - reden wir auch über Inhalte. - Überlauf. - Also was, wenn ich ein fixiertes mit auf ein Element setze, - Aber dann gibt es mehr Inhalt, als passt, - dann passen wir in dieses Element. - Was ist, wenn ich ein 100 mal 100 Pixel Quadrat mache und eine Menge Inhalt darin lege und - es passt nicht? - Nun, - es stellt sich heraus, dass Sie tatsächlich ändern können, indem Sie Überlaufeigenschaft auf sichtbar, - ausgeblendet oder scrollen. - Werfen wir einen Blick auf das wirklich schnell im Browser, so dass wir diese Beispiele verwenden können. - Hier haben wir Box eins und zwei, - und, - äh, - lasst uns einfach anfangen, ein paar weitere Inhalte hier in die Box hinzuzufügen. - Ich fange einfach so an zu tippen. - Vielleicht würde hier ein paar Zeilenumbrüche machen. - Ich tippe hier nur einen Jargon. - Okay, lass uns das laufen und sehen, was passiert. - Okay, also hat das genau das getan, wovon wir gesprochen haben. - Ähm, - und auch wir sind abgereist. - Das ist im Zeilenblock. - Sie können beginnen, einige der seltsamen zu sehen, - goofy Dinge, die in Linie Block Elemente tun. - Ich werde das wieder in Block umschalten, also ist es etwas weniger verwirrend. - Okay, - Also diese erste Box, - es hat nur die Texas sagt eine drin. - Diese nächste Box sagt zu, - Aber wir haben mehr Text getippt und passen. - Also schauen wir uns den Unterschied auf einem Blockebenenelement an, wenn wir eine Höhe angeben oder wir haben - keine Höhe angeben. - Also hier haben wir die Höhe von 100 Pixel angegeben. - Lassen Sie uns einfach voran und setzen Sie dies das Auto, - was wirklich das Äquivalent ist, keine Höhe anzugeben. - Wir könnten das Eigentum wirklich löschen. - Das ist die Höhe. - Auto ist wirklich das gleiche, wenn wir das einfach löschen, richtig? - Okay, - so ah, - Höhe von Auto oder nicht Angabe einer Höhe auf einem schwarzen Level-Element, - oder tatsächlich auch auf einem in-line-Element, - wird dem Inhalt erlauben, Aziz so zu wachsen, wie es braucht, um den Inhalt anzupassen. - So haben viele Male absichtlich keine Höhe angegeben. - Wenn Sie eine Box in Ihrem Layout haben und Sie wissen, dass Sie sagen, dass Sie mehrere Nachrichtenartikel haben und - Sie sind sich nicht sicher, wie viele dort oder in der Zukunft sein werden - Sie könnten es aktualisieren. - Vielleicht haben Sie mehr und mehr Artikel. - Ähm, - oft, - Sie werden einfach nicht die Höhe angeben, weil, wenn keine Höhe die Elemente angegeben hat, die gerade gehen - so groß werden, wie es braucht, wird es basierend darauf erweitern, wie viel Inhalt darin ist -. - Okay, - äh, - gehen wir tatsächlich zurück zur Angabe der Höhe. - Dann geben wir dem eine feste Höhe, wie wir es vorher hatten. - Also sagen wir, - ähm, - Höhen Colon 100 Pixel. - Ok. - Und das machen wir noch mal. - Ok, - Ausgezeichnet. - Wenn ich also eine feste Höhe gebe, muss ich vorsichtig sein, denn diese Höhe ist nicht groß genug für den ganzen Text, den ich eingegeben habe - hier. - Okay, , jetzt können wir das kontrollieren, indem wir eine Eigenschaft namens Overflow verwenden. - Also komm runter und lass uns voran gehen und sagen Überlauf, - Doppelpunkt und versuchen wir einen namens Hidden. - Sagen wir, Überlauf versteckt. - Ok. - Und dann machen wir das und sehen, was passiert. - Also Überlauf, - versteckt Nun, - tatsächlich verstecken alle Inhalte, die außerhalb der Höhe oder der Breite des Elements überläuft. - Es wird also tatsächlich den Inhalt abgehackt. - Ich kann es nicht sehen. - Gelegentlich willst du das vielleicht benutzen, wenn du etwas dynamischeres machst. - Wenn Sie zu JavaScript gehen, - zum Beispiel - können Sie Überlauf versteckt verwenden, - um, - wissen Sie, - gepaart mit etwas JavaScript zu animieren oder zu schieben Inhalt innerhalb eines kleineren festen - Behälter. - Also, - zum Beispiel, - wenn Sie einen Bildschieberegler erstellen, - könnten Sie ein Element so einstellen, dass sein Überlauf auf ausgeblendet ist, - und Sie könnten Mawr-Bilder erstellen, die in diesen Rahmen passen. - Und dann können Sie JavaScript verwenden, um sie zu animieren. - Also bewegt ein Pfeil diese Bilder nach links und rechts, und Sie können nur ein Bild nach dem anderen sehen, - die anderen Luft versteckt, weil Sie den Überlauf als Beispiel für die Verwendung von - Sie haben auch Leute, die manchmal etwas tun, das Overflow Auto genannt wird. - Mal sehen, was das tut. - Wenn ich das übergelaufene Auto ändere, - bekomme ich eine Bildlaufleiste. - Also in Lyon und Mac Zeile, - sehen Sie vielleicht nicht die Bildlaufleiste, weil Sie den Mauszeiger über. - Und dann, wenn Sie, - um, wenn Sie die zwei Finger berühren auf dem Touchpad oder Ihrem Mund Scrollrad, - es wird tatsächlich scrollen Es ist nur, dass sie die verstecken die Scrollleiste hier, - aber Sie können in Fenstern und auch in ah sehen - Mac Snow Leopard. - Du wirst sehen. - Die meisten Browser erstellen hier eine Bildlaufleiste. - Also, wenn der Inhalt größer ist als passt, - wenn wir den Überlauf Zehe Auto setzen wird tatsächlich eine Bildlaufleiste angezeigt wird. - Also in diesem Fall, - ich habe eine vertikale Bildlaufleiste. - Der Inhalt war sehr breit. - Ich würde eine horizontale Schriftrolle bekommen. - Bar ist gut, - okay, - also das ist die Überlaufeigenschaft, - was für die Kontrolle nützlich ist. - Ähm, - Sie wissen, wie der Inhalt innerhalb eines Elements fließt, ob er fließt, - außerhalb des Elements überläuft oder nicht. - Ok, - großartig. - Da wir uns angesehen haben, wie hoch es wieder reagiert, haben wir bemerkt, dass, wenn wir die Höhe auf Auto setzen oder wir die Höhe entfernen, - wir haben bemerkt, dass sich der Inhalt einfach so groß ausdehnt, wie er sein muss. - Werfen wir einen Blick darauf, was passiert, wenn wir die mit dem Auto setzen oder, - mit anderen Worten - wenn wir nur den Breitenschnitt entfernen. - Also wieder, - äh, - diese Luftblock-Level-Elemente oder sie zeigen Block. - Und wenn ich nicht A mit für Block-Level-Elemente spezifiziere, erhalten sie nur breit, wie sie sein können -. - Sie nehmen grundsätzlich 100% des Bildschirmplatzes ein. - Okay, was genau das ist, was wir wollen. - Manchmal. - Gelegentlich, - wir wollen etwas, um die gesamte Breite des Bildschirms zu dehnen, - und Sie können einfach einen Block Level-Elemente verwenden und nicht angeben, es ist mit Ihnen. - Könnte auch sagen, es ist mit 2 100%, wenn Sie möchten. - Okay, ... werfen wir einen Blick auf die verschiedenen Möglichkeiten für die Dimensionierung. - Also haben wir uns angeschaut, - ähm, - wir haben auf die Anzeige in Linie gegen Block geschaut. - Wir betrachteten die Einstellung der Breite und Höhe automatisch oder um Pixelmengen zu fixieren. - Und wir haben uns angesehen, wie Überlauf reagiert, wenn nicht genügend Platz für den Inhalt vorhanden ist - in das Element. Also schauen wir uns ein paar andere Möglichkeiten für Breite und Höhe an. Also schauen wir uns ein paar andere Möglichkeiten für Breite und Höhe an. - Kommen wir hierher zurück und lassen Sie uns einen Prozentsatz versuchen. - Also haben wir wieder Pixel angeschaut. - Das werde ich tun. - Das war Dies ist 200 Pixel, - zum Beispiel. - Ich kann voran gehen und ändern mit ihren und laufen, - und Sie können sehen, 200 Pixel mit ihren Was, wenn ich sagen, etwas wie 50%? - Also nehmen wir das P X hier ab und wir setzen 50% so ein und rennen, und Sie können sehen, dass es tatsächlich 50% der verfügbaren hier einnimmt. - Du wirst bemerken, wenn ich diesen Kerl so reingeknallt habe. - Siehst du, wie es eigentlich immer genau die Hälfte des Platzes dort ist? - Okay, - also, - zum Beispiel, - wenn ich es mochte, - wissen Sie, - 75% als Beispiel, - es nimmt dann 75% des Spießes auf der Außenseite, - natürlich, - und die Polsterung im Inneren, weil wir die Box-Größeneigenschaft noch nicht festgelegt haben, - aber Sie können sehen, dass es ungefähr 75% des Platzes dort einnimmt. - Okay, also das ist eine Flüssigkeitsmessung. - Manchmal wollen wir Dinge Größe haben, - Ah, - Skala basierend auf der Breite des verfügbaren Bildschirmplatzes. - Und das ist mit einem Prozentsatz. Werfen wir auch einen Blick auf Min und Max Value, also werde ich diesen Kerl zu einem Mann mit Männern ändern, bei dem Dash Wits Museum dabei ist. - So ist es leichter zu sehen, damit wir Männer retten können. - Dash mit, - wir gehen raus und sagen 200 Pixel. - Und wir werden auch einen maximalen Strich mit angeben und wir sagen, wie, - 600 Pixel so. - Okay, - so Männer mit und Max Bindestrich mit Sie können auch tun Min Strich Höhe und Max Strich Höhe und - wir gehen und klicken. - Lauf. Okay, das ist eigentlich das Maximum von 600 Pixeln, mit dem wir jetzt hier sehen. Selbst wenn ich mehr Platz auf dem Bildschirm gebe, wird Onley ein Maximum mit 600 Pixeln sein. - Und in diesem Fall, - es sind 600 Pixel plus die Polsterung und plus der Rand, weil ich in Chrom bin, - es sind 600 Pixel plus die Polsterung und plus der Rand, weil ich in Chrom bin, Okay, mal sehen, was passiert, wenn ich das runterquetschen würde, ziehe ich dieses Fenster rüber, um ihm weniger Platz zu geben. - Okay, hier habe ich den Rand erreicht. - Oh, sieh mal, es skaliert seine Skalierung nach unten. - Kein Problem. - Es wird weiter skalieren, bis ich das Minimum erreicht habe, und dann wird es aus dem Raum laufen . - Okay, - also da, - wenn ich mit dir auf das Minimum komme, sehen wir tatsächlich eine Bildlaufleiste hier unten auf dem Bildschirm hier, - und ich muss diese Bildlaufleiste verwenden, um über zu blättern und den Rest der -Inhalt. - Und das liegt daran, dass wir die Schwellenwerte von,wissen Sie, -einem Maximalbetrag von 600 und einem Mindestbetrag von 200 so verwendet wissen Sie, - haben. - Und wieder, - es wird sich nur erweitern, bis wir zum Maximum mit kommen. - Und dann wird es aufhören. - Ok, - großartig. - Das ist also ein guter Anfang. - Box-Modell verstehen. - Kommen wir zurück und sprechen über einige der anderen Qualitäten des Box-Modells wie Marge - und Polsterung und Grenze. - Also fangen wir an, indem wir dem Kerl eine Grenze hinzufügen. - Wir kommen hier runter, gehen wir weiter und fügen diesen Kisten eine Grenze hinzu. - Nehmen wir an Grenze Doppelpunkt ein Pixel, - was die Breite der Grenze ist. - Und dann werde ich einen Raum setzen, und ich werde den Stil der Grenzen festlegen, die nur solide werden. - Und wenn Sie ein Beispiel für die anderen Rahmenstile sehen möchten, werden Sie sich das in den Folien hier in einem Moment ansehen. - Und dann können wir ihm eine Farbe geben. - Also sage ich nur, dass Schwarz die Farbe Schwarz angibt. - Da gehen wir. - Also kommen wir wieder raus und leiten das und da ist meine Grenze. - Ziemlich cool, stimmt's? - Also kann ich tatsächlich, - wissen Sie, - ändern, wenn Sie sehen wollen, - wie es bei 10 Pixeln aussieht, - wenn ich 10 Pixel der Grenze sage und ich renne, - Sie können sehen, dass es das tut. - Ändern wir es von fest zu gestrichelt, damit wir zeigen können, wo der Rand des Hintergrunds - Farbe hier endet. - Also, wenn ich sage, 10 Pixel gestrichelt und ich klicke auf Ausführen, - Sie können sehen, es ist jetzt eine gestrichelte Linie für den Rahmen und Sie könnten die Hintergrundfarbe sehen - geht direkt an den Rand der Grenze direkt dort. - Okay, wir machen das etwas dünner . - Ich gehe zurück zu einem solchen Pixel-Solid. - Und, äh, - lasst uns mit dem Abstand herumspielen, - dann. - Okay, also haben wir vorher über Marge und Polsterung gesprochen. - Ich werde mich umziehen. - Der Typ ist mit Teoh hinten. - 101 100. - Also bleiben wir. - 100 Pixel. - 100 Pixel. - Wird verwendet, um sie klein zu machen, - überschaubar. - Kleine kleine, - überschaubare Boxen sind hier leichter zu sehen. - Dann können wir so näher heranzoomen. - Werfen wir einen Blick auf die Polsterung. - Jetzt erwähnten wir Polsterung Abstand innerhalb des Elements. - Wenn Sie wirklich sehen wollen, worum es hier geht, - lassen Sie uns diese Polsterung auf Null setzen und sehen, was dort passiert. - Wir klicken auf Ausführen und Sie können sehen, wenn wir die Polsterung auf Null setzen. - Der Text ist rechts oben gegen den Rand der Grenze dort, - so Null Polsterung bedeutet keinen Abstand innerhalb des Elements. - Nun, - wenn ich 10 Pixel hier wie diese 10 p x platziert und wir kommen und laufen, - Sie können jetzt sehen, gibt es 10 Pixel Abstand um das Element. - Und hier, weil wir die Scrollleiste haben, ist es eigentlich nur da runterhacken. - Aber weißt du, - in der Tat, - was das ist, ist irgendwie chaotisch. - Ich werde das loswerden, da wir schon über Überlaufeigentum erfahren haben. - Bringen wir das hier einfach zurück. - So wie der eins von zwei. - Okay, - ähm großartig. - Also Polsterung ist der Abstand innerhalb des Elements? - Was, wenn ich eine andere Menge Polsterung auf jeder Seite wollte? - Also, - zum Beispiel, - jetzt, - wenn ich nur einen Wert verwende, wenn ich sage klopfen 10 Pixel, - fügt es 10 Pixel oben hinzu, - die untere, - die linke und die rechte Seite. - Also in CSS, - haben wir die Fähigkeit, Dinge wie Polsterung, - Bindestrich links, - Sie wissen, - klopfen Strich rechts, - klopfen Strich oben und klopfen Strich unten. - Und dann können Sie die Menge der Polsterung auf Ihrer Seite ändern. - Ähm, - jetzt, aber - es ist eigentlich noch einfacher oder Leicester Typ. - Wenn Sie die Kurzschrift-Methode namens Klopfen verwenden, - und dann, - basierend auf der Menge der Werte, die Sie ihm geben, - wird es beeinflussen, welche Seite betroffen ist. - Also, - zum Beispiel, - wenn Sie einen Wert wie diesen machen, - wissen wir, dass - um , - ein Wert , - alle Seiten beeinflussen wird. - Also, wenn ich nur 10 Pixel sage, - bedeutet das 10 Pixel auf allen Seiten. - Wenn ich zu Werten wie diesen sage, - wenn ich 10 Pixel 20 Pixel sage, indem ich nur ein Leerzeichen dazwischen setze, - setze ich in diesem Fall mehrere Werte auf Werte für zwei Werte. - Hier, - der erste Wert, - um, - stellt die obere und untere. - Also sowohl der obere als auch der untere und der zweite Wert hier repräsentiert die linke und rechte, - oder, - wissen Sie, - beide Seiten. Gehen wir weiter und setzen Sie diesen Kommentar hier unten, damit sie so passen, werden wir ihn so trennen. - Okay, - ein Wert wirkt sich auf alle Seiten aus. - Es bedeutet, dass wir Polsterung auf allen Seiten auf Werte stellt dar, dass der erste Wert 10 ist - Pixel oben und unten und 20 Pixel auf der linken und rechten. - Ok. - Wir können auch Padding mit drei Werten angeben. - Zum Beispiel, - wenn ich sage, - wie 10 Pixel, - 20 Pixel, - 35 Pixel oder so etwas. - Also in diesem Fall, - wenn wir drei Werte haben, - stellt der erste Wert den oberen bis zum ersten 1 gleich oben dar. - Der zweite Wert repräsentiert beide Seiten, - links und rechts, - und der dritte Wert hier stellt die untere. - Also, wenn ich sage 10 Pixel, - 20 Pixel, - 35 Pixel, - was ich tue, ist, dass ich dem Browser sagen will, dass ich 10 Pixel Abstand innerhalb des Elements auf - die oberen 20 Pixel des Abstands auf beiden Seiten und 35 Pixel von Abstand auf der Unterseite. - Gut. - Und wenn ich aus irgendeinem Grund eine andere Menge an Polsterung auf jeder Seite haben möchte, - kann ich vier Werte angeben. - Also, - zum Beispiel, - könnte ich sagen, - wie, - wissen Sie, - 10 Pixel, - 20 Pixel, - 35 Pixel, - fünf Pixel so etwas. - Also in diesem Fall - haben wir vier Werte. - Und wie Sie sich daran erinnern können, denken Sie an eine Uhr und denken Sie daran, dass Sie bei 12 Uhr an der Spitze beginnen . - Also der erste Wert, - wenn wir uns vorstellen, dass dies eine Uhr ist, ist die Spitze, - richtig? - Und dann steht der zweite Wert hier für die rechte Seite, die sich im Uhrzeigersinn bewegt. - Und der dritte Wert hier stellt die untere, - und der vierte Wert repräsentiert die linke Seite. Also, je nachdem, ob Sie 123 oder vier Werte haben, wird das den Abstand im Browser ändern. - Okay, - so könnte ich sagen, - Padding 10 Pixel, - 25 Pixel. - Tier. - Zoomen Sie hier raus und wir werden den Kerl im Browser laufen lassen. - Und Sie können sehen, dass oben 10 Pixel sind, und, äh, - naja, - eigentlich, - es ist oben und unten, - aber es gibt nichts unten unten in der Nähe des Bodens. - Und dann haben wir 25 Pixel links und rechts, - so können Sie hier 25 Pixel sehen. - Da ist noch mehr. - Es gibt mehr Abstand auf der Seite als oben. - Ok. - Und das ist mit den beiden Werten 10 und 25. - Okay, das ist also der Fall für die Marge. - Auch, - um, - Marge kann verschiedene Werte sein. - Hier, - können Sie sagen, Rand, - 10 Pixel, - 35 Pixel, - vier Pixel. - Und das wird sich ändern, um 10 auf den oberen 35 an den Seiten und vier auf der Unterseite. - So etwas wie das. - Okay, - so Rand ist der Abstand außerhalb des Elements. - Lassen Sie uns den Rand von allen Seiten gleich halten. - Aber wir werden sagen, - ähm, - wir machen es zu einer größeren Menge. - Sagen wir 30 30 Pixel, um zu sehen, was dort passiert, nur um zu demonstrieren, dass dies Abstand ist - außerhalb des Elements. - Also gehen wir weiter und klicken. - Lauf, - und du kannst sehen, dass es jetzt mehr Abstand außerhalb des Elements gibt. - Okay, - also, - um, - Polsterung ist der Abstand innerhalb des Elements Rand außerhalb des Elements. - Es schiebt Elemente voneinander weg von ihrer Außenkante. - Okay, das sind also 30 Pixel. - Vielleicht bemerken Sie es. - Hier sind 30 Pixel oben, - 30 Pixel links und rechts und 30 Pixel unten. - Aber warten Sie eine Sekunde. - Hier. - Hat dieser eine Box hier nicht 30 Pixel auf der Unterseite und hat keine Box, um 30 - Pixel und Rand oben zu haben . - Das ist interessant. - Du würdest das denken, weil sie 30 Pixel unter diesem und 30 Pixel über diesem liegen sollen . - Dass diese Werte addieren und 30 plus 30 sollten 60 Pixel sein. - In der Tat, - es gibt nicht 60 Pixel Platz hier. - Es gibt nur 30 und das ist wegen der Art, wie sich die Marge verhält. - Der Rand kann sich überlappen. - Also, - zum Beispiel, - wenn ich sagte, der wird voran gehen und mit diesem spielen, indem Sie den oberen Rand auf 30 - Pixel setzen, - sagen wir, der linke und rechte Rand ist 10 Pixel. - Aber lassen Sie uns mehr auf den Boden legen, - Sagen wir 50 Pixel von unten. - Okay, - also jetzt die Box-Nummer, - sobald Sie 50 Pixel Rand auf der Unterseite haben und Box Nummer zwei sollte 30 Pixel von - Rand auf der Oberseite haben . - Okay, - wenn ich das aktualisiere, - es stellt sich heraus, dass die 50 Pixel gewinnen, - also hat dieser hier 50 auf der Unterseite, - also schiebt er dieses andere Element tatsächlich um 50 Pixel nach unten. - Dieser hier hat nur 30 oben, was wahrscheinlich hier endet. - Das hier schiebt 30 Pixel, aber eswird bereits 50 Pixel auseinander geschoben. hier schiebt 30 Pixel, aber es - Diese Ränder überlappen sich einfach. - Sie sammeln sich nicht an, - sie fügen zusammen nicht hinzu. - Das ist also eine Sache, die man sich über die Marge bewusst sein muss. - Okay, also das ist großartig. - Wir haben hier viel gelernt. - Wir haben uns diese Kästen angeschaut. - Wir betrachteten das Hinzufügen von Hintergrundfarben, - Ränder und beeinflussen die Art und Weise, wie es mit Display-Eigenschaft angezeigt wird, die den Überlauf von beeinflussen - der Inhalt mit Überlauf. - Wir haben auch den Abstand innerhalb des Elements untersucht, - mit Polsterung und außerhalb des Elements mit Rand. - Ok. - Und wir haben auch über die Unterschiede zwischen der Box-Größe und Internet - Explorer und der Box-Dimensionierung in den anderen Browsern gelernt . - Also, - wie wir zur Positionierung weitergehen, wird zu diesem Kastenmodell auf zurückkommen, - und es wird für uns nützlich sein, wenn wir anfangen, Säulenstruktur zu schaffen. 31. Aesthetics: - Gehen wir einfach weiter und springen zurück zu den Folien und wir gehen weiter zur Box-Ästhetik. - Okay, also sahen wir, dass wir eine Hintergrundfarbe hinzufügen konnten. - Aber was, wenn wir Hintergrundbilder in unsere Layouts einfügen möchten, was in der Übung tun wird? - Ich werde demonstrieren, dass eine bevorstehende Übung, die wir auch auf die Grenze gesehen haben, ein paar dauern wird. - Wir werden einen Blick auf ein paar andere Möglichkeiten für die Grenze in Bezug auf die Gestaltung der Grenzen werfen, - und wir werden auch etwas betrachten, der als Grenzradius bezeichnet wird, den wir an den Rändern nutzen können - unserer Boxen. - Also, wenn wir nicht scharfe quadratische Kanten wollen, - können wir auch abgerundete Kanten mit CSS drei Randradius Eigenschaft haben. - Wir werden auch auf Kastenschatten schauen, um Schatten hinzuzufügen, - was in der Übung demonstrieren wird auch auf die Deckkraft schauen, - was uns die Möglichkeit gibt, ein Element durchsichtig oder transparent zu machen. - Also, selbst wenn Sie in Bild einfügen und Sie möchten, dass das Bild teilweise transparent ist, - können Sie die Opazitätseigenschaft eines Elements festlegen, um es teilweise durchsichtig zu machen. - Wir werden auch Zutaten suchen, die es uns ermöglichen, eine verblasste von einer Farbe zu einer anderen Farbe hinzuzufügen - innerhalb eines Elements im Gegensatz zu nur mit einer einzigen Hintergrundfarbe. - Okay, - diese Luft ein paar Hintergrundeigenschaften. - Also haben wir die Hintergrundeigenschaft hier unten gesehen, und sie akzeptiert alle diese unterschiedlichen Werte hier oben. - So können Sie auch Hintergrund sagen, - Bindestrich, - Farbe und einfach eine Farbe angeben. - Diese kleinen horizontalen Pipe-Symbole hier nur dazu gedacht, zu repräsentieren oder zu bedeuten, können Sie einen - Farbnamen oder hacks eine Dezimalzahl verwenden , - oder es wird die RGB-Werte akzeptieren. - Hier. - Wir können auch Hintergrund-Strichbild sagen, und wir können sehen, dass Sie l. - und in Klammern sind . - Wir können auf die Position eines bestimmten Bildes zeigen. - Nun wird dies tatsächlich ein Bild in unser Element einfügen, - und das ist anders als das Image-Tag. - Das AMG-Element, - das im Wesentlichen - ein Vordergrundbild erzeugt. - Wann immer Sie ein Bild mit dem Bildelement erstellen, - nimmt es tatsächlich Platz im Layout ein, - und Sie können die Dinge nicht darauf legen, - während Sie mit einem Hintergrundbild - über einem Hintergrund tippen können -Bild. - Sie können andere Elemente auf ein Hintergrundbild setzen, - und es wird einfach hinter allem gleiten. - Okay, also sind sie wirklich kooperativ. - Sie bleiben hinter allem, was Sie drauf setzen. - Und viele Male, - Leute benutzen das, um Texturen dort zu schaffen. - Website, - zum Beispiel, - Sie können, wenn Sie eine Kamera haben, - können Sie gehen und fotografieren von der Welt und werfen. - Das ist ein Hintergrundbild hinter Ihren Website-Elementen, die Sie können. - Auch, - wenn Sie einen Scanner haben, können Sie gerne Papierstücke scannen, - Sie können nach draußen gehen und wie Blätter von einem Baum nehmen. - Wirf es auf das Scanbett und du kannst es scannen. Ich hatte einmal einen Lehrer in , meinem Untergrad, der uns gezeigt hat, was man tun kann, Saran in einen Scanner wickeln kann, was eigentlich ziemlich interessant ist. - Wenn Sie also einen Scanner haben und ihn nicht beschädigen wollen, indem Sie wie Flüssigkeiten und Dinge darauf setzen , die Elektronen-ICS schaden können, können Sie Saran Ihr Scanbett einwickeln und Sie können Cracker rohes Ei darauf mögen und scannen - es. - Und wenn Sie darauf hineinzoomen, - können Sie alle möglichen interessanten Texturen und Zeug bekommen. - Es ist irgendwie so, als würde man durch ein Mikroskop schauen,wenn man auf ein paar hochauflösende Scans hineinzoomen , - aber trotzdem irgendwie auf eine Tangente hineingeht. - Jedenfalls, - Hintergrundbilder sind eine gute Möglichkeit, etwas Lebendigkeit in irgendeiner Persönlichkeit zu Ihrer Website zu -. - Okay, - wir auch Hintergrund-Strichposition, - und dies erlaubt uns, die Bilder Position Hintergrundbilder zu positionieren, so dass wir das - Bild innerhalb des Elements bewegen können . - Wenn wir brauchen, um T-Ansicht einen anderen Teil des Bildes zu positionieren oder um das Bild erscheinen - eine andere Ecke des Elements. - Wir könnten auch angeben, ob das Bild wiederholt wird oder nicht. - Also manchmal wollen wir, - wie eine Textur oder ein Kachelmuster, - mehrmals in einem Element als Hintergrundbild wiederholen. - Andere Male wollen wir nur ein einzelnes Bild innerhalb der Elemente zeigen, - also in der Lage sein, - Hintergrundstrich sagen zu können, - wiederholen und angeben, ob etwas wiederholt oder nicht ist sehr nützlich. - So können Sie sehen, dass Sie uh, - das akzeptiert die Werte der Wiederholung. - Es akzeptiert auch wiederholen X, - die sich horizontal wiederholt. - Es akzeptiert auch Wiederholungsschreibtisch. - Warum ist ein Wert, der sich vertikal wiederholt, - und Sie können auch sagen, keine Wiederholung, - was bedeutet, dass er es nicht wiederholen wird. - Alles, was wir auch Hintergrund-Scroll-und Hintergrund-Scroll wird beeinflussen, ob oder - nicht, dass Bild wird scrollen, wenn der Browser scrollt. - Also, wenn der Benutzer die Seite nach unten scrollt, - können wir steuern, ob die Bildzustände fest an Ort und Stelle oder ob es folgt der Bildlaufleiste -. - Das ist also ein Bedürftigkeitseffekt, den Sie kontrollieren können. - Wir können auch Hintergrund-Strichgrößen sagen, - eine neue CSS drei Eigenschaft. - Und obwohl dies nicht überall volle Unterstützung hat, - kann dies eine nützliche Möglichkeit sein, Hintergrundbilder zu erstellen, die sich automatisch auf die - Größe Ihres Browsers dehnen . - Also, wenn Sie ein, - ähm, - ein Hintergrundbild in den Körper, - um, - und Sie sagten, es ist Hintergrundgröße zu 100% zum Beispiel, - für erhöht mit, - es wird die Bild, so dass, wenn das Browserfenster größer wird, - kleiner, - das Bild damit skaliert wird. - Das ist also eine Art ordentlicher Effekt, den Sie mit Hintergrundgröße erstellen können. - Nun, - sieh mal, - wir werden einige Beispiele dafür in der Übung bekommen, die jetzt ankommt. - Viele dieser Dinge, - mit Ausnahme dieser letzten beiden Hintergrund-Scrollen, - Hintergrundgröße, die 1.1234 Eigenschaften erscheinen, können tatsächlich in einer einzigen Eigenschaft geschrieben werden , die hier Background genannt wird. - Das wäre also die Kurzschrift ähnlich der Art, wie wir Schriftart für Kurzschrift haben. - Sie können einfach sagen, Hintergrund und anstatt Hintergrund-Strichfarbe zu sagen, - Hintergrund, - Strichbild, - Hintergrund, - Strichposition, - Hintergrund, - Bindestrich. - Wiederholen Sie, - Sie könnten einfach sagen, Hintergrund. - Und indem Sie ein Leerzeichen zwischen den Werten setzen, - können Sie Ah, - Farbe und Bild angeben , - und es wiederholt und positioniert Informationen alle in einem einzigen Wert. - Dies ist ein Beispiel für die Randkürze, - die wir uns gerade angesehen haben, - Ähm, - und das ist eine Abkürzung für Randstriche, - ähm, - und Rahmenstrichfarbe und gestrichelter Stil. - Und du könntest alle Stile hier sehen. - Solide, - Strich gepunktet, - Doppelnut, - Rhijn sagte Anfang. - Und so sehen sie aus. - So solide macht eine durchgezogene Linie. - Wenn Sie die Randzelle auf Strich setzen, um eine Strichlinie zu erhalten, - was wir gesehen haben, macht Dotted diese kleinen Diamanten hier. - Double ist eine doppelte Linie und Groove Ridge Vorfall Anfang. - Nehmen Sie die Farbe, die Sie angeben, - und sie erstellen wie eine helle Version in einer dunklen Version der gleichen Farbe. - Ich glaube, es ist 50% von 100% Phil für die Farbe, die Sie für die Grenze wählen. - Das waren also einige andere Möglichkeiten für den Grenzstil, die akzeptiert werden. - Und die funktionieren überall. - Diese funktionieren alle Browser, - alt und neu, - weil der Grenzstil gibt es schon lange. - Okay, - so neu und CSS drei, - wir haben auch Grenzradius und Grenzradius ist ah ist die Art und Weise, wie Sie gehen Teoh Runde - die Ecken Ihrer Elemente, wenn Sie sich entscheiden. - Ok. - Also, um überall zur Arbeit zu kommen, - verwenden wir Grenze, - Strich Radius Und das ist ein Präfix namens Dash Web Kit. - Viele Male, wenn eine neue CSS-Eigenschaft in CSS eingeführt wird, - was passiert, ist anders. - Browser müssen bestimmen, wie sie diese Eigenschaft akzeptieren und wie sich der Wert auf ihren jeweiligen Browser auswirkt, - wie ihr bestimmter Browser diese Eigenschaft in diesem Wert anzeigt. - Was also oft passiert, ist, dass verschiedene Browser-Unternehmen, - während sie immer noch Entscheidungen und Feststellungen darüber treffen, wie sie diese akzeptieren werden - CSS-Eigenschaften und wie sie diese Werte anzeigen, - sie erstellen etwas, das als Präfix bezeichnet wird, wo sie den Namen der Eigenschaft nehmen. - Aber sie fügen einen Bindestrich und dann eine Art Präfix am Anfang hinzu, das ihnen erlaubt - Kontrolle. - Es ist irgendwie wie eine experimentelle Zukunft, - auch, - um ihnen zu erlauben, den Wert auf eine bestimmte Weise in ihrem Browser zu steuern. - Das wirkt sich nicht auf andere Browser aus. - So, - zum Beispiel, - dash Web Kit wird Grenzradius und Browser wie Chrome und Safari beeinflussen. - Während für Internet Explorer, - um, - eigentlich, - Internet Explorer ältere Versionen von IE nicht akzeptieren Grenzradius, - also müssen wir uns nicht wirklich darum kümmern. - Aber während Sie für Firefox gerade jetzt Randstrich Radius sagen können, - zum Beispiel. - Und wissen Sie, - ein paar Monate war vielleicht etwa ein Jahr zurück. - Früher musste Dash M o Z Armaturenbrett einen Radius für Feuer Fox verwenden. - Jetzt können Sie einfach Randradius sagen und es wird tatsächlich in Chrom glauben, das funktioniert jetzt - eine Zeit bewegt sich weiter. - Sie können eine Band, - Sie können das Präfix hier aufgeben. - Okay, - so, - Randradius um, - Sie können auch angeben, welche Ecke der Box Sie daran interessiert sind, so indem Sie sagen - wie Randstrich oben links können Sie nur die obere linke Ecke der Box abgerundet werden, - oder Sie können oben Strich rechts oder unten Strich sagen, - links unten Strich rechts. - Und Sie können die Rundung der Größen der Ecke der Box an verschiedenen Ecken unterschiedlich machen. - Ähm, - indem man einen einzigen Wert setzt, - wird es gleichmäßig um ihn herum. - Was das tut, ist es von der Ecke, wo der Punkt existiert hätte. - Es geht tatsächlich 15 Pixel und rundet 15 Pixel von der Ecke des Elements. - Wenn Sie hier zwei Werte verwenden, können Sie die Differenz zwischen der Horizontalen und der Vertikalen steuern. - Zum Beispiel, - dieser erste Wert hier sagt Grenze Radius 100 Pixel und dann Raum 50 Pixel. - Sie können hier oben sehen, - es gibt tatsächlich horizontal. - Es sind 100 Pixel abgerundet und vertikal. - Es sind nur 50. - Das macht also eine anders geformte Kurve hier im Vergleich zu 50 Pixeln. - 100 würden das tun. - Okay, - so können Sie hier mehrere Werte anwenden, - Teoh mehrere Pixelgrößen hier auf den Grenzradius, - und Sie können die Art und Weise ändern, wie es rundet. - Ah, - das ist eine aktuelle Unterstützung. - Zumindest zum Zeitpunkt der Aufnahme haben Sie über, - wissen Sie, - 80% globale Unterstützung für den Grenzradius. - Es funktioniert ein Internet erkunden neun, - aber ich e acht und sieben einfach nicht unterstützen es überhaupt. Es ist also erwähnenswert, dass, und dass im Grunde, was passiert, ist, dass es wirklich keinen Schaden zugefügt wird. - Es ist nur, dass in i e acht, - es wird diese Grenze Radius Eigenschaft ignorieren und Sie haben nur quadratische Kanten auf Ihren Elementen -. - Ok? - Wir haben auch Kastenschatten. - Wenn einer von Ihnen mit Adobe-Programmen wie Illustrator und Photo Shop vertraut ist, - wo Sie einen Kastenschatten oder einen Schlagschatten hinzufügen können, - heißt es eher in CSS drei Wochen und auch jetzt bei einem Box-Shadow. - Und es sieht ziemlich genau das gleiche aus und hat die gleiche Art von Einstellungen, die Sie würden - für Fotoshop bekommen. - Ähm, - das ist eigentlich eine wirklich schöne Möglichkeit, Schattierungen und Schatten auf Elemente hinzuzufügen, - also es ah, - der Weg nach rechts das ist, sagen wir Box, - Strich Schatten. - Und damit dies funktioniert und sogar ältere Browser, - können Sie diese Präfixe Web Kit und M o z verwenden, um es dort zu arbeiten. - Ah, - Web-Kid wird für Safari und Chrom sein und M o Z wird für ältere Versionen von Fire - Fox hier sein. - Okay, - also hier haben wir Ascheschatten boxed, - und der erste Wert, den Sie setzen können, wird als horizontaler Offset bezeichnet. - Fünf Pixel schieben den Schatten fünf Pixel nach rechts. - Ähm, - negativer Wert würde es fünf Pixel nach links schieben. - Ähm, - und der nächste Wert ist vertikal. - Also, das wird es fünf Pixel runterbringen. - Ein negativer Wert würde den Schatten fünf Pixel nach oben bringen. - Wenn er sagte negative fünf Pixel, - zum Beispiel. - Und der dritte Wert hier heißt Weichzeichnungsradius. - So weit breitet sich die Unschärfe aus. - Wenn Sie Null Pixel sagen, - wird es ein sehr scharfer Rand Schatten sein. - Ähm, - wohingegen, wenn Sie eine höhere Anzahl von Pixeln für die Unschärfe hinzufügen, wird es weicher, - es wird den Rand des Schattens federn. - Und schließlich, - wir akzeptieren den Wert der Farbe, so dass Sie jede Farbe hier verwenden können. - Hier. Sie haben eine graue Farbe verwendet, um das zu demonstrieren und wir werden das in unserer Übung hinzufügen. - Wir werden einige Schatten zu ein paar verschiedenen Abschnitten der Seite hinzufügen, - und Sie haben wahrscheinlich alle ein Beispiel für Deckkraft gesehen. - Dies ist ein Beispiel für jemanden, der Deckkraft auf der Speisekarte verwendet. - Es gibt also ein Drop-Down-Menü und die Männer, die du durchsiehst, damit du das Bild dahinter sehen kannst . - So wird die Opazität mit der Opazitätseigenschaft geschrieben und ihm eine Zahl zwischen Null und - eins gegeben. - Also CSS drei Die moderne Art, dies zu tun, ist nur zu sagen, Opazität und 0,5 wäre das - Äquivalent von 50% Deckkraft und man wäre das Äquivalent zu 100% Deckkraft. - Nun, - wenn Sie eine einfarbige Farbe haben, - sind Sie wirklich besser dran, die RGB-Eigenschaft für Farbe zu verwenden und einfach den Hintergrund - Farbe mit einem RGB-Wert zu setzen . - Also denken Sie daran, ein in RGB a ist Alfa. - Wir haben uns das in einer vorherigen Übung angeschaut. - Geh zurück und sieh dir das an, wenn du willst. - Als wir dort ankamen, war es, als wir CSS anfingen. - Sie können das unter Farbsysteme Video für CSS überprüfen. - Der Grund, warum Sie RGB einen Wert im Gegensatz zu einer Passage verwenden möchten, wenn Sie nur sind - eine Hintergrundfarbe zu machen, ist es ein wenig einfacher, nur den Hintergrund zu machen - Transparenz im Vergleich zum gesamten Element. - Also eine Sache, die Sie hier beachten müssen, ist, wenn Sie die Deckkraft hier auf einen niedrigeren Wert setzen, - es wird nicht nur den Hintergrund beeinflussen, - sondern es wird auch alle Dinge innerhalb des Elements beeinflussen. - Wenn sich also Texturbilder innerhalb des Elements befinden, wird es sie auch undurchsichtig oder teilweise transparent machen. - Hier oben, - Sie können alle Fallback-Lösungen für ältere Browser sehen. - Das ist für sehr alte, wie Safari. - Sie können K html dash Deckkraft in älteren Versionen von Safari betroffen verwenden. - Ähm, - super alt. - Ich bin mir nicht sicher, wie maney ich meine, - ich begann Zweifel, dass , - wissen Sie , - es muss sein, - wie 1% oder weniger als 1% der Bevölkerung, - wie die ersten Versionen von Firefox und Safari. - Ich würde mir nicht wirklich viel Sorgen um diese für Internet Explorer machen. Möglicherweise müssen Sie die Filtereigenschaft benutzen, um das in i e funktionieren zu und das hier wird so ziemlich überall für Sie arbeiten. - Außerhalb von AII ist mit Opazität. - Hier ist die aktuelle globale Unterstützung für die Verwendung von Deckkraft. , Du kannst sehen,dass du jetzt einfach die Opazitätseigenschaft benutzen kannst, und dafür wirst du etwa 95% globale Unterstützung bekommen. - Oh, ja. - Und es sagt sogar hier, dass, - wie, - für i e acht, - Sie sollten den Filter verwenden. - Also für 87 88 sollten Sie diese Filtereigenschaft hier für die Menschen verwenden, die wahrscheinlich weniger als 10% der Bevölkerung dort sind. - Okay, hier haben wir Grady InTS. - Also, wenn Sie Hintergrund-Strichfarbe sagen, - wissen wir, dass wir einfach eine Farbe angeben können. - Das ist eine Hexi-Dezimalfarbe. - Nicht ganz sicher, welche Farbe das genau ist. - Aber Sie können einem Hintergrund eine einfarbige Farbe geben. - Ähm, - und dann können Sie auch Hintergrund-Strichbild verwenden. - Und anstatt mit einem Bild zu verknüpfen, - können Sie einen Grady int angeben, - und Sie können hier sehen, - das ist das, - um das ist das Präfix für Firefox, - und dieses ist ein Präfix für, - um, - Safari und Chrom, - die das Web-Kit verwendet. , Und höre,was du für Mazzilli tust, oder? - Es ein bisschen anders als für These. - Afari in Chrom. - Du schreibst es so. - Mit Farbstopps von Mozilla Es ist ziemlich einfach. - Sie verwenden einfach, - Ah, - Farbhacks, - eine Dezimalfarbe, - und dann setzen Sie ein Komma und setzen die andere Farbe, in die Sie wollen, dass es verblassen. - Um, - für Web-Kit, - können Sie die Art von Grady in angeben. - Es ist etwas raffinierter. - Sie haben mehr Möglichkeiten. - Sie könnten ein Radio Grady Int oder einen linearen Grady Int machen, - und Sie können die ah angeben, - die Positionierung, wo es beginnt und stoppt und der Prozentsatz des Elements, über das es - misst. - Und Sie können auch Farbstopps so einstellen, dass der erste Stopp diese Farbe im zweiten Stopp hat - hat diese Farbe, - und wir werden tatsächlich einen Blick auf die Verwendung einiger Online-Tools in der Übung werfen, um diese zu erstellen - Grady INTS. - Grady und Unterstützung sind nicht ganz so gut wie die anderen, die ich dir gezeigt hatte. - Auch mit dem Web Kit in M O Z Präfixen. - Es gibt immer noch einige Browser wie Internet Explorer neun, - selbst die nicht einmal wirklich so alt ist, unterstützt es überhaupt nicht. - Also haben wir wirklich nur etwa mindestens zum Zeitpunkt der Dreharbeiten dieses Videos, - wir haben wirklich nur etwa 65% der weltweiten Unterstützung. - Also, was Sie tun, ist, dass Sie eine Hintergrundfarbe angeben. - Und wenn der ältere Browser die Grady in dieser verblassenden Farbe nicht verstehen kann, wird es einfach standardmäßig eine einfarbige Farbe haben. - Sie wählen nur eine Farbe aus, mit der Sie als Fallback-Lösung für ältere Browser gut sind, - und es sollte trotzdem gut funktionieren. 32. Floating: - als nächstes sprechen wir über schwebende oder schwebende Positionierung. - Dies wird also Ihre Lösung sein, um Spaltenstruktur in Ihren Seitenlayouts zu erstellen - Sie können in diesem Beispiel hier sehen, dass diese Person oben und unten auf der Seite eine Kopfzeile und eine Fußzeile hat , - und sie möchten eine Seitenleiste erstellen , die links neben einigen Hauptinhalten positioniert ist. - Das ist die Position rechts hier. - Also, indem schwimmend schwächen, - sagen Sie einem Element nach links zu schweben und dieses andere Element hier, um nach rechts zu schweben. - Und das wird uns erlauben, Block-Level-Elemente zu haben, die nebeneinander erscheinen können. - Also, wenn wir die Sidebar setzen, - sagen Sie, dass dieser hier ein div ist, das eine Idee von Sidebar hat und vielleicht ist dies ein Def hat eine - Idee von ich meine, - wir können dann Pound Sidebar setzen, um Doppelpunkt links zu schweben und den Satz Haupt zu schwächen, um den Doppelpunkt rechts zu schweben -, - so dass die Float-Eigenschaft uns erlaubt, entweder links oder rechts zu spezifizieren. - Also, wenn Sie Elemente schweben, - müssen wir uns bewusst sein, dass es einige albern Dinge gibt, die so anfangs passieren werden, wenn - Sie zuerst anfangen, Float-Positionierung zu lernen, kann es tatsächlich ziemlich frustrierend sein. - Aber solange ich Ihnen klar alle Probleme erkläre, auf die Sie stoßen können, wenn Sie mit Float-Positionierung arbeiten, dann werden Sie hoffentlich nicht gefragt, - frustriert, - und Sie werden ein klares Verständnis über warum bestimmte Elemente sich falsch verhalten. - Also in diesem Beispiel - haben sie tatsächlich den Hauptinhalt nach links geschoben, - und sie haben sich dafür entschieden, die Seitenleiste nach rechts zu schweben, und sie hatten eine Fußzeile, die - darunter unten hier unten war . - Aber was ist passiert? - Es ist irgendwie seltsam. - Die Fußzeile sollte unten bleiben. - Denken Sie daran, - hier oben haben wir die Fußzeile unten. - Aber aus irgendeinem Grund, - wenn ich Dinge schwebe, - Elemente, die unter den Dingen liegen, die schweben, neigen dazu, neben ihnen hochzuziehen. - Jetzt. - Manchmal ist dies wünschenswert, - so manchmal wollen wir Text um Bilder und eine Seite wickeln, - und Dinge wie das und schweben ist großartig, weil, wenn Sie etwas schweben, - Elemente, die unter dem Element sind, dass Luft schweben davon betroffen, - und sie werden dazu neigen, neben ihm zu ziehen, wenn sie dort passen können. - Also in diesem Fall, - die Fußzeile haben etwas Platz, um unter der Seitenleiste zu passen. Und da diese Dinge alle schweben, wird es versuchen, neben oder neben den Dingen, die schweben, hochzuziehen. - Und das ist einfach, weil die Fußzeile physisch im Code unter den Dingen war, die - schweben. - Also zieht es daneben. Wenn wir das verhindern wollen, können wir das wirklich verhindern. Wenn wir das verhindern wollen, - Manchmal wollen wir, dass das passiert. Es ist eine gute Sache, und andere Male waren verärgert, weil dieses Element nicht hier oben sein sollte. - Wir wollen, dass die Fußzeile hier runter geht. - Also, wenn wir die Fußzeile sagen wollen, - um nicht zu bewegen neben den Schwimmern, - können wir eine Eigenschaft und CSS namens clear verwenden. - Wir können sagen, klar beides so, indem wir Footer klar sagen. - Beide waren in der Lage, diese Fußzeile zu bekommen, um die Höhe dieser Elemente so klar zu löschen - akzeptiert drei verschiedene Werte, die Sie klar links sagen können und das wird über die Höhe hinaus löschen - von allem schwebenden links und auf. - Lee passierte die Höhe der Dinge, die links schweben, - und Sie können auch klar rechts sagen, - was die Höhen von allem, was nach rechts schwebt, überwindet, - oder um alle Ihre Basen zu bedecken. - Sie können sagen, klar beides, - und es wird über die Höhe der beiden Dinge, die links oder rechts schweben, klar. - Okay. - Und wieder dann ermöglicht es der Fußzeile, den Mittelwert und die Seitenleiste zu löschen. - Okay, okay. - Also, wenn das nicht wirklich genug ist, - Art von albern Vorkommen, dass schwebende Ursachen schwimmend haben ein paar andere Dinge, die es tut - dass es ein bisschen seltsam ist. - Aber wieder, - solange wir verstehen, warum es es tut und wie man es repariert, - wird es für uns nicht frustrierend sein. - Also ein anderes Problem, das Sie manchmal bekommen, wenn Sie ein Element schweben, ist, dass Sie bekommen - etwas, das ein zusammengefaltetes Elternteil genannt wird. Stellen Sie sich vor, dass diese graue Schachtel hier ein Elternteil ist, was bedeutet, dass es ein Container ist und wir legen diese Kisten darin. Okay, also hier habe ich Steuer drin, die besagt, dass ich ein statischer Elternteil bin . - Und ich schwebte diese drei Kisten nach links in dieser Kiste nach rechts. - Eine Sache wird darauf hinweisen, dass, wenn Sie etwas nach links schweben, - wenn es andere Elemente gibt, die dort passen können, die auch nach links schweben, sie sind - einfach so nebeneinander stapeln. - So können Sie manchmal mehrspaltige Struktur erstellen, indem Sie einfach alles in eine Richtung schweben , - was irgendwie ein cooler Trick ist, um das zu tun. - Okay, es stellt sich heraus, aber das ist nur etwas, worauf man sich bewusst sein muss. - Sie haben Zeh nur immer im Auge behalten, wenn Sie schweben etwas ist, dass, wenn Sie - schweben alle Kinder innerhalb eines Elternteils, - es ist ein Ziff. - Der Elternteil hat keine Referenz mehr, wie groß er sein soll. - Die Metapher, die ich dafür benutzt habe, ist Stellen Sie sich vor, dass Sie wissen, normalerweise Elemente. , Wenn sie im Elternteil sind, ist es, als ob sie in der Highschool sind und noch keinen Abschluss gemacht haben. - Sie sind nicht vom College gegangen. - Und die Eltern behalten ihr Zimmer für sie. - Wenn du noch bist, bist du noch nicht von der Schule gegangen. - Du bist ein statisches Element. - Sie positionieren sich überhaupt nicht. Du schwimmst noch nicht, wenn du in der High School bist, schwimmst du nicht und deine Eltern behalten dein Zimmer für dich. - Oh, das - Oh, ist dein Zimmer. - Es ist dein Platz. - Du wohnst hier. - Und aus diesem Grund, - hat der Elternteil eine Referenz dafür, wie groß, um Recht zu haben. - Es kann das Kind umgeben. Wenn man ein Element schwebt, ist es irgendwie so, als würde man es vom College schicken. , Wenn man ein Element schwebt, ist es irgendwie so, - Es ist, als schwimmt es weg. - Es ist also so, als ob es nach Hause gegangen ist. - Und obwohl es innerhalb dieses übergeordneten Elements zu sein scheint, - ist es tatsächlich schweben. - Also schwebten diese Typen links. - Das hier schwebt rechts. Und da alle Kinder, die sie vom College schwebten, behalten die Eltern ihr Zimmer nicht mehr für sie. - Wie im Grunde, - hat der Elternteil keine Referenz mehr, wie groß zu sein. - So kollabiert es. - Oder vielleicht könnten Sie sagen, dass die Eltern zusammenbricht, weil sie traurig werden, weil alle seine - Kinder schwebten weg. - So können wir dies tatsächlich beheben, indem wir etwas namens clear Fix verwenden, - was eine Art CSS-Hacker ist, - eine Lösung, die Entwickler im Laufe der Jahre entwickelt haben, um dieses Problem zu beheben. - So können Sie tatsächlich aufhören zu kollabieren, selbst wenn seine Kinder wie schweben - dies und diesen Effekt erhalten, indem Sie etwas verwenden, das die klare feste Lösung genannt wird. - Das sieht nach einer Menge CSS aus, aber ich werde das für dich zusammenbrechen. - Im Grunde, was hier passiert, ist, dass Sie eine Klasse erstellen, und Sie könnten diese Klasse benennen, was Sie wollen. - Typischerweise - dies wird als klare Fix. - Und tatsächlich, - wenn Sie Ihren Browser öffnen und Sie Google klar beheben, - wird es mit Tonnen von Seiten kommen, dass, wo Sie diesen Code kopieren und einfügen können, so dass Sie nicht - es auswendig lernen müssen. - Und auch eine Menge Diskussion darüber, und warum wir es verwenden. - Ähm, - Ich werde tatsächlich einen Link unterhalb des Videos geben, - verbunden mit seinem Tutorial, das den Code gibt und auch klare Korrektur diskutieren. Das erste, was wir tun, ist, dass wir eine Klasse erstellen, und ich wählte diese klare Lösung zu nennen, die der übliche Name ist, den die Leute nennen. - Und dann verwenden wir einen speziellen Pseudo-Klassen-Selektor namens After Wir sagen Doppelpunkt nach -. - Okay, - Was danach tut, ist das Element, auf das Sie diese Klasse anwenden, - es wird in dieses Element gehen, - und nach all seinen Kindern, - es wird diesen Stil anwenden, den Sie hier setzen. - Das werde ich noch einmal sagen. - Also, indem Sie die hier ausgewählte Pseudo-Klasse anwenden, - Doppelpunkt danach wird es erlauben, so dass das, was auch immer Element, das wir anwenden, - Klasse von klar fixiert, um innerhalb dieses Elements zu gehen und nach Colin, - schließlich seiner Kinder, - in diesem Element in unserem Fall - alles nach all den schwimmenden Kindern wird es diesen Stil anwenden. - Was wir also tun, ist, dass wir hier eine Eigenschaft hinzufügen, die Inhalt und in Anführungszeichen genannt wird. - Wir werden einen Text schreiben. - Sie können tatsächlich buchstäblich das Wort Hallo hier eingeben, - und Sie werden sehen, dass das Wort Hallo nach allen schwebenden Elementen erscheint. - Also Inhalt ist die Art, wie Sie CSS tatsächlich verwenden können, um Textinhalte in ein Element einzufügen. - Okay. - Und das ist eigentlich das einzige Mal, dass ich diese Eigenschaft benutze, weil ich gerne CSS für Styling reserviere . - Und ich reserviere HTML, um tatsächlich Text und physische Inhalte zu erstellen, die beharrlich - durch eine Theorie, die Trennung von Bedenken genannt wird. - Wo wir HTML trennen wollen, ist Inhalt und CSS Stil zu sein. - Dies ist eine kleine Ausnahme von der Regel, wo alle tatsächlich ein Periodensymbol hinzufügen, nachdem alle - der Inhalt, den ich kenne das klingt verrückt, - aber bleiben Sie bei mir hier. - Hängen Sie da drin, kommen Sie langsam zusammen und machen Sinn, warum wir das tun. - Also im Grunde, - erstellen wir eine Klasse namens clear fix. - Wir sagen Doppelpunkt danach und wir werden es auf die Eltern anwenden, die zusammenbricht. Was also passieren wird, ist, was auch immer Eltern Sie kennen, das kollabierende Elternteil, das an den schwebenden Kindern vorbei gehen muss, wir wenden diese Klasse darauf an. Und innerhalb dieses Elements, dieses zusammenklappende Elternteil, wird es all die schwebenden Elemente verfolgen, weil wir den Doppelpunkt danach verwenden und ein Periodensymbol hinzufügen. - Eigentlich, - physisch erscheint ein kleiner Punkt, dass das Periodensymbol oder das Textzeichen der - Periode unter all diesen schwimmenden Kindern erscheinen wird. - Das nächste, was wir tun, ist, dass wir diesen Inhalt sagen, um Block anzuzeigen, - und ich erinnere mich an Blockebenenelemente, - ihren König des horizontalen Raums. - Sie nehmen den ganzen horizontalen Raum da unten ein und da wir kein mit haben das für den Inhalt angegeben ist, wird es nur 100% des Platzes innerhalb dieses übergeordneten Containers beanspruchen. - Also, jetzt ist unser kleines Periodensymbol ein Block Level Element auf der Seite und nimmt alle - horizontalen Raum, - und dann verwenden wir unseren Freund Clear beides. - Denken Sie daran, - wir verwenden klar beide vorher auf der Fußzeile. - Was hat gelöscht Sie löschen, - Sie werden sich erinnern, ist, was wir verwendet, um jedes Element in diesem Fall zu erzählen, - diese kleine Periode Symbol Inhalt vorbei an der Höhe von irgendetwas schwebendes zu löschen. - Dadurch wird das Periodensymbol verschoben, um die Höhe der schwimmenden Kinder hinter sich zu lassen. Okay, und dann haben wir im Grunde eine Referenz dafür, wie groß die Eltern sein sollten. - Der übergeordnete Container weiß jetzt, wie groß er sein soll weil dieses Periodensymbol unter alle schwebenden Kinder verschoben wurde. Es ist irgendwie so, wenn Sie sich vorstellen, wenn wir die Metapher der schwimmenden Elemente verwenden, sind so wie die Kinder, die vom College schweben . - Diese klare Lösung ist wie ein Devisenschüler kommen und bleiben zu lassen - bei den Eltern, so dass sie im Grunde wissen, dass sie Ihr Zimmer übernehmen, damit das Haus - nicht richtig oder mit anderen Worten schließt, - so dass die Eltern sind nicht traurig. - Sie brechen ihre Höhe nicht zusammen. - Es gibt den Eltern oder Referenz, wie groß zu sein, weil es einen Austauschschüler - hängt dort in diesem Fall der Periode. - Aber wir wollen diesen Austauschschüler nicht sehen, weil das unser Das klingt ... gemein. - Aber es wird unser Layout unordentlich aussehen lassen, weil wir ein kleines Periodensymbol haben - sichtbar, - sichtbar darunter sind schwebende Elemente. - Was wir also tun, ist, dass wir die Sichtbarkeit auf „Verborgen“ setzen. - Das ist so wie der Austauschschüler, der immer studiert und man sieht sie nie wirklich . - Also machen wir das Periodensymbol verborgen, indem wir die Sichtbarkeit verborgen sagen , und wir stellen sicher, dass es keine Höhe in Anspruch nimmt, indem wir Höhe Null und Zeilenhöhe sagen - die Höhe des Textes, - die Höhe zwischen Textzeilen auf Null. - Und das wird es so machen, dass in allen Browsern - dieser kleine Inhalt unsichtbar sein wird. - Dieser Inhalt gibt dem Elternteil einen Hinweis darauf, wie groß er sein soll, damit er nicht zusammenbricht, - aber wir machen ihn auch unsichtbar. - Es ist also versteckt. - Das ist also irgendwie ein ziemlich verrückter Code hier zu sein, - aber tatsächlich funktioniert das ziemlich gut und es wird in allen Browsern funktionieren. - Okay, - schauen wir uns das innerhalb eines Beispiels an. - Also ist es eine Sache für mich, über diese Dinge zu reden. - Aber was, wenn wir hier ein echtes Beispiel haben, - Zehenblick. - Lasst uns gehen. - Dies ist Tinker dot io und Sie können diese Länge CB 3 46 verwenden, um die fertige Version von zu sehen - dieses Beispiel. Wenn du es später ansehen möchtest, siehst du, dass ich gerade ein paar Dibs erstellt habe. - Das waren nur ein paar Boxen, die wir weit anlegen werden. - Und diese 1. 1 es hat nur das Wort oben geschrieben. - Und ich gab ihm wieder eine Klasse von oben. - Ich gebe nur solche generischen Klassennamen. - Und wir haben auch einen unten hier mit einer Klasse von unten, - und das hat auch das Wort unten darin geschrieben. - Und dann hier haben wir Ah, - Container. - Das ist unser Elterncontainer. - Was habe ich einen Klassennamen des Containers gegeben und darin verschachtelt Dieses Elternteil ist drei - Boxen, die ich eine Klasse von Box gab und sie einfach hier nennen. - 123 Okay, - werfen wir einen Blick auf den U-CSS-Code. - Wir schrieben für diese Jungs dann Also, - um die Schachtel der Spitze, die eine Klasse von oben hat. - Wir haben diesem Kerl eine Hintergrundfarbe von Kalk gegeben, - und wir haben ihm auch 10 Pixel des Abstands innen und einen Rand gegeben, - der 10 Pixel des Abstands draußen ist. - Okay, - wir gaben auch eine Hintergrundfarbe zu Container, so dass wir alle diese Elemente sehen können. - Sie haben alle eine Hintergrundfarbe. - Dies hat auch Polsterung und Rand. - Wir haben auch eine Box hier unten, die eine Hintergrundfarbe von Aqua und Samos hat. - Die Boxen im vorherigen Beispiel Wir haben ihm gerade eine Breite und Höhe von 100 Pixel und - einige Polsterung und Rand als auch. Und dann haben wir auch diese Klasse unten genannt Punkt unten. - So unten hat eine Hintergrundfarbe von gelb und hat einige Polsterung und Rand. Okay, wenn wir hier rüber kommen, können wir sehen, hier ist unsere Kiste oben. - Hier ist unser Container-Elternteil und hier ist unten. - Jetzt, - standardmäßig, - alle diese Tage, - Luftanzeigeblock. - Also nehmen sie 100% des Bildschirms ein, und sie haben keine spezielle Positionierung. Keiner von ihnen wurde gesagt, sie sollen schweben, also weil diese Luft dibs, sie zeigen einen übereinander, ihren König des horizontalen Raums hier. - Also 12 und drei oder vertikal gestapelt. - Nun, - lassen Sie uns hypothetisch sagen, dass ich diese Kerle Position in eine Spalte - Struktur machen möchte. - Nehmen wir an, wir wollen drei Spalten 123 nebeneinander machen, damit wir hier runter in diese Klasse der Box gehen können und ich werde hier runter kommen und ich werde die Eigenschaft hier benutzen - Float. - Also setzen wir diese auf Float Position und sagen Float links. - Also werden sie so weit nach links gehen wie möglich innerhalb dieses Elternteils. - Und wenn ihr Platz, - sie werden sich nebeneinander stapeln, - solange es Platz für sie alle gibt, - sieht es so aus, als gäbe es hier viel Platz, also sollte es funktionieren. - Also haben wir diese Typen, die links schweben, und ich klicke auf „Run“, und da sehen wir, dass diese Jungs jetzt Seite an Seite zeigen. - 123 schweben jetzt. - Wir sehen also ein paar albern Dinge, die hier in geschehen. Das frustriert viele Leute, wenn sie es mit Positionierung zu tun haben. - Ich möchte auf ein paar Dinge hinweisen. - Okay, - also zuallererst, - das oben genannte div ist völlig unbeeinflusst von der Tatsache, dass diese Luft schwebt. - Das werde ich nochmal sagen. - Das Element über den schwebenden Elementen. - Das hier, das Div. - Mit der Klasse von oben hier, - dieser Kerl ist völlig unberührt vom Schweben. - Also, wenn Sie etwas schweben, - wirkt es auf Lee Elemente unterhalb dieses Elements, das auf Lee-Elementen schwebt, die hier physisch wie folgt geschrieben sind . - Dies unten, wenn Sie die Fußzeile sind, - das ist, dass ein Wort unten in es geschrieben hat betroffen ist. - Schnitt. Also, weil diese Typen diesen Kerl hier unten schwebten, kann es passen. - Es versucht, neben diesen Typen zu schweben. - Okay, - Also, wie kann ich das reparieren? - Wenn ich jemals ein Element habe, das ich nicht will, dass Zehe schweben neben meinen anderen Elementen hier? - Wenn ich neben diesen schwimmenden Elementen nicht hochziehen will, kann ich sagen, dass er die Höhe dieser schwimmenden Elemente überwindet. das zu tun, werde ich in Bulle gehen, die Klasse von hier unten, und wir werden voran gehen und sagen, dass es klar ist, Colon und ich werde nur beide retten, die klar - alles passiert, was links oder rechts schwimmt. - In diesem Fall könnte ich mit klarer links davonkommen. - Aber auf der sicheren Seite zu sein, - decken alle meine Basen nur sagen klar beides so. - Also sagte ich dieses div von unten, um beides zu löschen. - Nun, - wenn ich aktualisieren, dass Sie sehen können, jetzt unten verhält sich und es rutscht unter diesen schwebenden - Elementen. - Das ist also eine Sache, die Sie irgendwie belasten kann, wenn Sie Float-Position verwenden, - Sie müssen sich nur der Tatsache bewusst sein, dass, wenn Sie Dinge schweben, - Elemente darunter können neben ihm hochziehen. - Und du willst vielleicht, dass das passiert, oder du willst vielleicht nicht, dass das passiert. - Wenn Sie nicht wollen, dass es passiert, - können Sie es auf beide einfach so zu löschen. - Okay, - andere Dinge, die passieren, die Sie irgendwie frustrieren könnten , , wie Sie sehen, dass das übergeordnete Element verschwinden, weil ich diesem Eltern-Container etwas Polsterung gegeben habe . - Es hält wenigstens etwas Polsterung drinnen, also sehe ich, dass es eine tolle Bar ist. - Aber wenn Sie diese Polsterung entfernen, - können Sie sogar sehen, wie diese Uhr dieses Jahr verschwinden. - Wenn ich das auf Null Polsterung in diesem übergeordneten Container sagte, - können Sie es überhaupt nicht sehen. - Du könntest dir sagen, was zum Teufel? - Was ist mit dem Elterncontainer passiert? - Ich sehe die Hintergrundfarbe nicht mehr. - Gelegentlich wirst du deine Säulen umgeben wollen. - Vielleicht, wenn Sie eine andere Spaltenfarbe hinter ihnen oder ein anderes Bild hinter ihnen wollen. Im Falle der Übungwerden wir hinzufügen, werden wir hinzufügen, wie eine Holzstruktur hinter unserer Säulenstruktur. - Also brauchen wir dort einen Elterncontainer. Und , wenn Sie nicht wollen, dass der Elternteil dieses große Elternteil hier zusammenbricht, um zusammenzubrechen, müssen wir die klare Lösung verwenden, um das zu funktionieren. - Okay, also gehen wir weiter und fügen die klare Lösung hier hinzu. - Also wieder, - die schwimmenden Elemente sind irgendwie wie Kinder, die vom College gegangen sind und die - Eltern traurig, - zu traurig, dass es zusammenbricht. - Es hat keine Referenz dafür, wie groß es ist. - Okay, - was wir tun, ist, gehen wir in das CSS und lassen Sie uns die klare Lösung korrigieren. - Also sagen wir Dot Clear Fix und nochmal, das ist nur ein gemeinsamer Name, um es zu nennen. - Du kannst es benennen, was immer du willst. - Und wir sagen Doppelpunkt danach, spezifisch in das Element eingehen wird. - Wir wenden dies auf eine Anzeige, - dieses Styling, - nach all den anderen Elementen, - alle anderen Children Elemente darin an. - Und wir sagen Inhalt. - Also sage ich Inhalt. - Und ich mache nur ein Periodensymbol, weil es klein und unscheinbar ist. Und wir werden sagen, dass der Inhalt Block angezeigt wird, damit er den ganzen horizontalen Raum dort einnimmt , und ah, dann werden wir dem Kerl im Grunde sagen, er soll es löschen, genau wie wir es mit der Box unten gemacht haben. - Wir wollen das jetzt. - Wir wollen dieses kleine Periodensymbol. - Es wird erscheinen, - wissen Sie, - wie unten sind neben all diesen. Wissen Sie, es wird Doppelpunkt nach bedeutet, dass es nach all diesen schwimmenden Kindern erscheinen wird, und wir werden es so einstellen, dass es den ganzen horizontalen Raum einnimmt, und dann sagen wir klar beides, um die Vergangenheit zu löschen die Höhe, - und jetzt sollte das Elternteil eine Referenz dafür haben, wie groß sein soll. - Aber das kleine Periodensymbol wollen wir nicht sehen. - Das wird nicht sehr attraktiv. - Also setzen wir die Sichtbarkeit auf „Verborgen“, und wir werden auch seine Höhe auf Null setzen. - Das kleine Periodensymbol nimmt also keine Höhe ein. - Und wir wollen auch die Zeilenhöhe sagen und die Zeilenhöhe des Textes so auf Null setzen. , Also das ist der erste Schritt,eine Klasse zu erstellen, die wir anwenden können. Und wir können das jetzt auf jedes Element anwenden, jedes scheinbare Element, das zusammenbricht. - Okay, also gehen wir hier rauf zu dem Elternteil, der das Problem hat. - Also dieser Typ nennt Klassencontainer, der die graue Hintergrundfarbe hat. - Das ist derjenige, der das Problem hat. - Also gehen wir rein. - Diese Klasse entspricht Container. - Wir werden einen Raum setzen, und wir werden hier eine andere Klasse anwenden, die Clear Fix heißt. - So wie das. - Beachten Sie, dass ich hier nicht den Doppelpunkt nach dem Teil schreiben musste. - Ich muss nur den Namen der Klasse verwenden, - was klar ist. - Reparieren. - Okay. - Und dann, wenn wir hierher zurückkommen und den Code auffrischen, können Sie sehen, dass er ihn repariert. - Jetzt weiß der Elternteil, wie groß er sein soll. - Auch wenn die Kinder darin schweben. - Okay, - also haben wir die meisten Dinge gelernt, die Sie irgendwie in Schwierigkeiten bringen können, wenn Sie verwenden - Float-Positionierung, - wie Elemente, die versuchen, neben den schwebenden Elementen zu springen. - Und du musst sie so einstellen, dass beide frei sind, um unten zu ziehen. - Und wir haben auch Eltern angeschaut. - Wenn alle Kinder innerhalb eines Elternteils schweben, - haben sie die Tendenz zu kollabieren. - Und wir haben uns mit klarem Fix befasst, um dieses Problem zu beheben. - Um, - gehen wir eigentlich zurück zu dem, was wir früher besprochen haben, in Bezug auf die zwei verschiedenen Boxen - Modelle und manchmal die Probleme, auf die Sie stoßen könnten, wenn Sie das Einrichten der - Verstand Ihrer Spalten haben , um beide zu passen Box-Modelle. - Also für dieses Beispiel, - lassen Sie uns voran und ändern ein paar Dinge hier herum. - Ich gehe hier in die Box-Klasse und lass uns die Polsterung darin entfernen. - Also sagen wir Polsterung Null. - Und, ähm, - es ist tatsächlich die Marge auf Null gesetzt. - Auch, - vorerst, - okay, - und dann gehen wir voran und ändern die Breite zu einem Prozentsatz. - Also, - äh, - mal sehen. - Also, wenn ich drei Spalten hier habe, und ich will, dass diese Jungs 100% des Platzes hier einnehmen. - Wir könnten die Breite von jedem 1 auf 33,3% setzen würde jede der drei nehmen. - Ich schätze, ich habe uns auf 99,9% gebracht. - Vielleicht könnten wir es etwa 0,333 machen, um es noch näher zu bringen. Und dann gehen wir weiter und führen das aus, und wir können sehen, dass die drei Elemente gleich verteilt sind . - Hier ist eins zu und drei. - Also ist jede dieser Spalten nebeneinander. - Eso Dies funktioniert, wenn wir keine Polsterung und keine Grenze haben. - Also, eigentlich, - ich bin gerade in Chrom. - Ich bin im Chrome-Browser, - der das W drei C-Box-Modell verwendet, wo, - wenn Sie ein angeben, mit ihm keine Padding oder Grenze enthält. - Okay, also klappt das gut, weil es keine Polsterung oder Grenze gibt. Aber mal sehen, was jetzt passiert, wenn wir uns entscheiden, Teoh, - äh, - wir sagten, wenn wir uns entscheiden, diesem eine Polsterung und eine Grenze zu geben, - also das erste, was tun wird, ist, dass ich den Container fixiert mit geben werde. - So zum Beispiel, - wissen Sie, - seit dieser Luft alle Skalierung 33% kann ich tatsächlich einen festen mit zum Behälter jetzt geben. - Also sagen wir hypothetisch, dass wir wollten, dass der übergeordnete Container 800 Pixel breit ist. - So etwas. - Das sollte also alles hier drinnen durchqueren. - Okay. - Und jetzt hat dieser Container eine feste mit und wir gehen Teoh sagen, - Nun, - wir wollen etwas Polsterung oder eine Grenze um diese Spalten hinzufügen. - Also weiß ich bereits, dass dies in diesem speziellen Browser wegen seiner Box brechen wird - Modell, das es verwendet. - Also ah, - 33,3 für jeden von euch sollte bis zu 100% enden. - Aber das zählt nicht die Polsterung oder den Rand. - Also sagen wir, wir setzen die Polsterung innerhalb Teoh Weg könnte Pixel wie 20 Pixel verwenden, - aber warum nicht ein Prozent verwenden? - Und dann können wir tatsächlich die Mathematik machen, um zu sehen , wie viel zusätzliche Prozent hinzukamen. - Also sagen wir, ich füge hinzu wie, - 1% Polsterung um alle Seiten des Elements, - und ich werde voran gehen und auf Ausführen klicken, - und das hat es kaputt gemacht. - Also der Grund, warum ist, dass die Breite der jeweils. - Jeder Kolumnist, - 33%. - So 33 plus 33 plus 33 fügt bis zu 99.999 grundsätzlich 100% Recht hinzu. - Aber dann, wenn wir Polsterung haben, ist das 1% Polsterung auf jeder Seite. - Das fügt zusätzliche 123456% der Polsterung hinzu. - Also diese Dinge jetzt Ah, - 106. - Es ist eigentlich sollte 106% aufnehmen, was nicht in den 100% breiten mit dem 800-Pixel-Container passt . - Aus diesem Grund gibt es nicht genug Platz für jedes Element zu existieren, um dies ein wenig leichter zu sehen. - Warum gehen wir nicht vor und außerhalb der Grenze hier auf diese Grenze speichern einen Pixel solide - schwarz so. - Okay, jetzt ist es ein bisschen einfacher zu sehen, wo jede der Divisionen ist. - Okay, - Also was, wenn ich diesen Elementen Rand und Polsterung hinzufügen wollte, - aber ich wollte das nicht hinzufügen. - Zusätzlich zu der Breite, - Ich wollte, dass es in diesem 33% mit aufgenommen wird, so was wir tun können, ist, dass wir tatsächlich Chrom setzen können - oder einen anderen Browser, um es zu zwingen, das Internet Explorer-Box-Modell zu verwenden, das enthält - Rahmen und Padding in die Breite. - Also lass mich gehen und hier runter kommen und wir zoomen einfach rein und ich mach die Starkey-Schicht in acht ein, um einen Stern zu erschaffen. - Das heißt Universal Selector, - und der Universal Selector ist, wie Sie alle Elemente buchstäblich jedes einzelne - Element auswählen können , - um, - und wird allen Elementen mitteilen, dass sie, - äh, - Ups zu haben ah, - Box Dad trainieren. - Und um es die i e Box-Methode zu machen, - können wir sagen, Grenze Strich Box und wir können die Präfixe um Strich M O Z Dash Box Dash Size hinzufügen - und auch setzen, dass auf Grenze Box. - Und wir können auch die Präfixe für Web-Kit Cash Box Armaturenbrett Größe hinzufügen, nur um alle unsere - Basen abzudecken . - Also wird es in jedem Browser funktionieren und wird so eine Grenze Dash Box sagen. - Dies sagt also alle Elemente zu übernehmen, unabhängig davon, ob der Browser alle Elemente auf sagt - die Seite, um das Internet Explorer-Box-Modell zu übernehmen, das Padding und Grenze in - tow enthält . - mit. Es sollte also nicht extra mit sein , und dann gehen wir weiter und klicken. - Führen Sie aus und Sie können sehen, dass es dieses Problem behebt. - Das coole daran ist, dass ich die Polsterung jetzt ändern kann und es nicht brechen sollte. - Ich kann diese Polsterung jetzt machen, um 3% so zu setzen, - und das wird mir mehr Abstand in der Box geben. - Du kannst es sehen. - Verschieben Sie den Text weiter nach unten. - Wir können auch eine dickere Grenze hinzufügen, wenn wir wollen. - Wir könnten sagen wie, - Oh, - die Grenze sollte jetzt zu Pixeln sein oder so etwas und ich könnte das laufen - dort. Und das Schöne daran, Prozentsätze für diese Spalten zu verwenden, ist, dass jetzt, wenn ich die Größe des Containers ändere, sie entsprechend reagieren werden. Also, wenn ich meine Meinung ändere und ich will, dass dieser Container 600 Pixel breit ist, dann werden sie so schrumpfen. - Sie werden alle entsprechend reagieren. - Und ich kann es auch größer machen, - wie 900 Pixel oder so. - Und sie werden so reagieren. Ich schätze, neun Hunderte von meinem Bildschirm ein wenig da, aber, äh, - jedenfalls, - können Sie sehen, dass ich die Größe des Behälters ändern kann. - Ich kann den Container nicht einmal auf einen Prozentsatz setzen, wenn ich will. - Ich könnte sagen, 90% und das auffrischen. - Und dann haben wir nur noch die 10% hier drüben übrig, also ist das ziemlich cool. - Okay, - mal sehen, worüber würden wir sonst gerne reden? - So Marge Marge ist nicht in einer der Maße des Box-Modells enthalten. - Das ist eine Sache, die ich mir bewusst sein muss. - Wenn ich hier eine Marge von nur 1% hinzufüge, sehen Sie, was passiert. - Das wird es kaputt machen. - Und nicht einmal die Box-Größeneigenschaft kann uns retten, - weil weder das W drei C Box-Modell noch das I E Box-Modell Rand enthält, - was ein Abstand außerhalb von Elementen ist. - Also habe ich nur 1% Marge hinzugefügt, - die 1% links und rechts von einem sein wird, - links und rechts von zwei in der linken und rechten von drei Sätzen. - Insgesamt 6123456%, dass es auf zusätzliche hinzufügen wird. - Das wird also 6% um, - über das, was es sein muss, um Seite an Seite zu schweben. - Also, wenn ich mich erneuere, wird es die dritte Box runterspringen. - Es wird es dort so kaputt machen. , Also meine Möglichkeiten hier sind,sich der Tatsache bewusst zu sein, dass ich diesen Prozentsatz subtrahiere, richtig? - Also, wenn ich, - um, - 100% des Raumes hier, - richtig , - ah, - 100 Weg, um den Elterncontainer als die Verfügbarkeit von 100% des Raumes mit - innerhalb der Elterncontainer gibt es auf Was ich tun kann, ist, dass ich das 1% abziehen kann - jede Seite. - Also, was wir tun können, ist, dass wir uns die Taschenrechner-App schnappen und die hier hochbringen können, und wir können etwas Mathematik machen. - Wenn ich also 100% des freien Platzes habe und die 6123456% der Marge subtrahiere , das gibt mir noch 94 Prozent. , - Und das muss unter diesen drei die Breite dieser drei Kästen geteilt werden, damit ich nehmen kann - dass 94 ich durch drei teilen kann. - Und das gibt mir 31,3 Wiederholung. - Also ist es ziemlich einfach Mathematik auch hier zu tun ist zurück und ändern Sie die Breite der - Box von 33 auf 31%, um die Marge auszugleichen. - Und das behebt es. - Und ich habe immer noch Abstand zwischen den Boxen. - Das ist also ziemlich cool. - Und ich kann immer noch zu diesem Container hier zurückkommen und die Breite ändern, ich mag es und es wird Teoh, es wird im Grunde reparieren, kann es sogar einfach so entfernen und es genau machen - mit Okay, - ähm, - also haben wir so ziemlich besprochen, - alles, was Sie im Layout tun müssten. Aber es gibt eine Sache, die wir ausgelassen haben, und das ist, wie man die Dinge im Layout zentriert. Was wir tun können, ist eine typische Strategie, etwas zu erschaffen, das Rapper genannt wird, damit ich hier in diesen Code eingehen kann , und ich werde einfach, in Dent all diesen Code pumpen. - Da gehen wir. - Und wir werden diesen Code mit einem äußeren Container umgeben. - Und ich gebe diesem Kerl und ich Rapper so und wir schließen ihn hier ab. - Ich würde nur Slash Div sagen und ich kann sogar einen Kommentar schreiben, wenn ich mir das sagen möchte - Dies ist das Ende des Rappers so. - So können Sie sehen, dass wir das ganze Konzept hier mit einem Öffnungsrapper und einem schließenden Rapper umgeben . - Ähm, - das setzt im Grunde alle anderen Boxen in eine größere Box, - und jetzt habe ich die Fähigkeit, diese größere Box zu stylen und zu kontrollieren, wo sie so positioniert ist - ich werde einfach voran gehen und in das CSS kommen und erstellen. - Äh, - da dies ein i d ist. - Wenn ich einen Selektor dafür erstellen möchte, muss ich das Hash-Tag verwenden und der Name des bestimmten I. - D ist Rapper. - Also kann ich Hashtag-Rapper so sagen und jetzt kann ich das stylen. - Also lasst uns diesem einen Verstand geben, mit dem alles auf 800 Pixel wieder so eingestellt wird. - Und da ich keinen Witz für meine anderen Container wie oben und unten angegeben habe, werden sie einfach so breit sein, wie sie sein können, weil ihre Block-Level-Elemente und - da die ich keinen Witz für meine anderen Container wie oben und unten angegeben habe, werden sie einfach so breit sein, wie sie sein können, weil ihre Block-Level-Elemente und Rapper wird ein bestimmtes mit haben, - sie werden einfach so breit wie möglich sein, bis sie in den Rand des Rappers laufen. - Sehen wir uns das an. - Also hat mein Rapper eine Breite von 800 Pixeln, - und dann kann ich auf Ausführen klicken, - und das wird alles innerhalb der 800 Pixel dort beschränken. - Das ist also ziemlich cool. Was ist, wenn ich jetzt all diese Dinge im Seitenlayout zentrieren möchte? - Also denken Sie daran, dass wir Marge, - um, - als Abstand auf der Außenseite von Elementen verwenden können - um, . - Okay, - Also Margin akzeptiert auch einen Wert von auto und auto margin, - wird im Grunde nur eine automatische Menge an Marge erstellen, wo es einfach die Marge herausschiebt - vom Element, bis es in etwas anderes läuft, - wie ein übergeordneter Container oder der Rand des Browserfensters. - Da ich also einen Witz gesetzt habe, kann ich diesen Marge jetzt auf Auto-Marge setzen , , so dass er auf beiden Seiten eine gleiche Menge Marge schafft. - Also im Grunde, - Ich möchte den linken Rand Zehe Auto und den rechten Rand Zehe Auto setzen. Und wenn ich oben und unten einen Rand haben will, könnte ich das auch einstellen. Und wenn ich oben und unten einen Rand haben will, - In diesem Fall, - Ich denke, was ich tun werde, ist, dass ich Null Marge auf der Ober- und Unterseite erstellen werde, indem ich eine Null setzen - dort und dann werde ich Auto für die linke und rechte. - Also denken Sie daran, - wenn Sie Werte innerhalb von entweder Polsterung oder Rand zu Werten verwendet, zeigt an, dass der - Vers der erste Wert den oberen und unteren Abstand darstellt, - und der zweite Wert stellt den linken und rechten Abstand. - Dies sagt der Marge eine automatische Menge auf der linken und der rechten Seite dieses - Element genannt Rapper, dass IHS alles andere umgibt. - Also, wenn ich vorgehe und das renne, wird es alles zentrieren, damit du sehen kannst, dass es hier eine gleiche Marge in gleicher Höhe gibt. - Und tatsächlich, - wenn das Browserfenster schrumpft und wächst, - wird sich dieser Rand selbst anpassen, weil er auf auto eingestellt ist. - Das ist die typische Art und Weise, wie Sie Menschen sehen, die Inhalte zentrieren. Okay, Okay, in der anstehenden Übung, anstatt den gesamten Inhalt zu zentrieren, werden wir nur bestimmte Teile des Inhalts zentrieren. - Also was? - Ich ging voran und tat in den Übungen, die Sie sehen werden, ist ich eine Klasse namens Rapper erstellt, - und ich habe sie an mehreren Orten überall angewendet. - Also, - zum Beispiel, - ich könnte es einfach anwenden, - es innerhalb dieser oberen Leiste hier und eine oben und innen von unten anwenden. - Und so können Sie Balken haben, die sich über den ganzen Bildschirm erstrecken, aber dann Inhalte in den Balken, die sich selbst zentrieren. - Okay, - so, - ähm, - das ist ein wirklich guter Weg, Teoh mit Layouts in bequem Mitte zu arbeiten. - Alles ist, etwas zu benutzen, der einen Rapper genannt wird, - oder einige Leute nennen es einen Container und sagten, es soll eine Marge von Null Auto haben, - und das wird das Element in die Mitte schieben. - Ok, - großartig. - Also, ähm, - das ist wirklich alles, um Zehe zu gewinnen. - Sieh dir jetzt an. - Lassen Sie uns all diese Dinge, die wir gelernt haben, in die fortgesetzte Übung anwenden, an der wir für die CHW-Schuhfirma gearbeitet haben. Und dann, nachdem Sie diese Übung abgeschlossen haben, können Sie mit der nächsten Code-Herausforderung fortfahren. 33. Prep: - Hallo, Leute. - Willkommen zurück. - Dies ist Übung 3.1 Box-Modell und Layout. - In dieser speziellen Übung werden wir alle Techniken aufbauen, die wir aus dem vorherigen Satz gelernt haben - Vortragsfolien und ein Beispiel, in dem wir Dinge wie die Box Modellbox erforscht haben - Ästhetik und auch Float-Positionierung, um Seitenlayouts zu erstellen. - Sie konnten sehen, dass ich den Quellcode hier bereits heruntergeladen habe, und ich habe ihn in erhabenen Text gebracht. - Und die beiden wichtigsten Dateien, mit denen es hier arbeiten wird, ist die Indexpunkt-HTML-Seite und auch die - Style Dot CSS-Seite. - Natürlich. - Okay, - Ich habe auch voran gegangen und habe das hier in ah Browser gebracht, damit wir sehen können, wo - wir sind. - Lass uns einen Moment darüber reden, was wir in dieser Übung machen werden. - Ok? - So können Sie hier diese Luft sehen, - alle der gesamten Seite Inhalt, die wir in allen vorherigen Übungen hinzugefügt. - Also hier haben wir alle Textvideos, - Bilder und Links von vorherigen und bestandenen Übungen und Verwendung, - um, - wissen Sie, - Abstand wie Polsterung und Rand und Breite und Höhe, die wir aus dem Box-Modell gelernt haben - Beispiel, - Wir werden anfangen, Dimensionierung und Hinzufügen von Abstand zu diesen Elementen. - Wir werden auch lustige Box-Ästhetik wie Hintergrundbilder, Grady INts und Randradiusumdie Ecken unserer Boxen und einen Box-Schatten-Zeh hinzufügen um . - Fügen Sie einige Schlagschatten auf einige dieser Elemente hinzu, also fügen wir einige Box-Container hier laut zu unserer Seite hinzu und stylen sie. - Geben Sie ihnen etwas ästhetisches Styling und im nächsten Schritt werden wir die Flöte integrieren - Positionierung, um einige Säulenstrukturen in das Layout zu schaffen. Also, um damit zu beginnen, gehen wir voran und bringen den Code und wir gehen in die Indexpunkt-HTML-Seite, und ich habe beschlossen, dass ich will, dass die, ähm, - die Kopfzeile hier zwei Hauptfelder drin haben. - Und Sie erinnern sich, dass Sie sich von der vorherigen Übung erinnern werden, die wir erstellt haben, - ah, - Logo-Panel und ein Knave-Leisten-Panel, - und das wird uns erlauben, einen Container zu erstellen, der sich über den gesamten Bildschirm erstreckt. - Aber ich möchte auch einige Rapper Tibbs erstellen, die wir verwenden können, um Inhalte mit - Auto Marge, - zu zentrieren , die wir in den vorherigen Vorlesungsfolien gesehen haben. - Also wollen wir so mitnehmen. - Ah, - dieses Logo hier und schieben Sie es in einen Behälter, der zentriert, obwohl wir eine größere - umgebende Box namens Logo oder Logo Panel, die mit einer Grady Int Textur 100% - des Bildschirms dehnen wird . - Okay, - also jedes Mal, wenn Sie eine Box innerhalb einer Box für ästhetische Zwecke erstellen möchten und Div ist am ehesten - wahrscheinlich oder gehen Sie zum Element, - denken Sie daran, dass wir in HTML fünf semantische Elemente wie Header und Abschnitt haben, - und Diese waren meist dafür reserviert, semantisch darauf hinzuweisen, dass dies ein bestimmter Abschnitt ist - der Seite oder dass der Inhalt hier eine bestimmte Beziehung oder Bedeutung hat. - In diesem Fall - wir sind nur daran interessiert, einige Boxen dafür zu schaffen, - Aus Gründen der ästhetischen Styling, - etwas ist so, hier haben wir eine Box mit der Idee von nab unsere in einer Box der Idee des Logos und - innen von diesen werde ich eine innere Box namens Div mit einer Klasse von Rapper erstellen und - wir werden das hier schließen, - und wir können sogar einen kleinen Kommentar hier machen. - Also lassen Sie uns, - nein, - später, dass diese spezielle Schließung, - Div schließt den Rapper so, - und wir gehen voran und fügen hier noch einen hinzu. - So manchmal sehen Sie Leute, die einen einzigen Rapper erstellen, der alle Ihre - Elemente und oft umschließt . - Dann geben Sie ihm ein I. - D. - Normalerweise nennen die Leute es eine Idee von Rapper oder eine Idee von Container. - In unserem Fall werden wir einige Balken über den gesamten Bildschirm haben, die sich 100% über den gesamten Browser erstrecken werden wir einige Balken über den gesamten Bildschirm haben, die sich 100% über den gesamten Browser erstrecken. - Und im Inneren, - haben wir die Notwendigkeit, mehrere kleinere Rapper zu haben, die den Inhalt innerhalb einer größeren Box zentrieren werden. - Es erstreckt sich über den ganzen Bildschirm. Aus diesem Grund werden wir mehrere Rapper haben, und jeder unserer Rapper wird dann einen Klassennamen von Rapper haben, weil, - denken Sie daran, - Klasse, die Sie verwenden können mehrmals, - wohingegen ein I D. - Sie sollten es wirklich nur einmal pro Seite verwenden. - Also haben wir hier ein paar Rapper. - Wir werden auch eine Schachtel schaffen, die ästhetisch eine Holzstruktur im Inneren tragen wird. - Also alle unsere Abschnitte wie diese über Abschnitt und den Artist Corner Abschnitt in der Firma - News Bereich. - Alle diese Seite Abschnitte, die Luft in der Haupt konstanten Bereich. - Alle diese Abschnitte werden mit einem Rapper zentriert, - und es wird auch eine andere äußere Box mit einer Idee von Holz geben, die wir schaffen können, das wird - eine Holzstruktur darin halten. - Das wird hinter all diesen Abschnitten gehen. - Also gehen wir einfach raus und geben diesem Kerl ein div I d von Wood so, - und dann im Inneren haben sie es mit der Klasse des Rappers gemacht, damit wir den Inhalt in einer kleineren Box hier zentrieren können . - Okay, - und ich will, dass das endet. - Beide Jungs müssen unter allen Abschnitten schließen, bevor wir bis ins Detail gehen - Abschnitt in der Fußzeile, damit ich hier nach dem Ende des neuen Abschnitts hier kommen kann, - und wir gehen voran und bei einem Abschluss, - unterscheiden sich die Rapper Dot Rapper und auch ein Schließteil für die Holzstruktur. - So wird die Holzstruktur hier 100% mit dem Bildschirm aufnehmen, - wohingegen jeder Rapper ein fixiertes mit haben wird und zentriert werden wird, um alle Abschnitte zu zentrieren - der Seite. - Okay, - mal sehen, - wir haben auch den Detailbereich, - der kurz vor der Fußzeile ist, - und das wird drei Spalten haben. - Irgendwann. - Eine Spalte wird die Kontaktinformationen sein, - und dann eine weitere Spalte wird Links zu unseren Schwesterseiten und anderen verwandten Schuhgeschäften sein. - Und dann wird die dritte Spalte hier für die Social-Media-Links sein und all diese - drei Zählspalten hier, - ich will sie auch innerhalb eines fixierten mit, dass ein Zentrum mit einem div mit einer Klasse von - Rapper. - Okay, - so Details werden 100% des Bildschirms dehnen, - aber dann werden wir eine Box mit einem fixierten mit Innenseite haben, - so dass Ihre Website nicht genau das gleiche wie meine gemacht werden könnte. - Ästhetisch, - das ist nur das, was ich durchführe, den ich vorwärts gehe. - Aber es ist vollkommen in Ordnung, wenn Sie Rapper-Struktur sind oder Ihre div-Strukturen nicht die gleichen - wie meine. - Okay, das sieht so aus, als wäre hier auf der Indexseite alles vorhanden. Jetzt habe ich auf allen anderen Seiten weitergemacht, wie Katalog,Kontakt, Kontakt, Preisgestaltung und Verkauf, und ich habe all diese Rapper hinzugefügt, - äh, - und Stives mit dem Holz Textur. - Ich habe all das für dich hinzugefügt, also wollte ich es nur zur Indexseite hinzufügen, nur um dir zu zeigen, wo sie im Code platziert wurden, okay? 34. Anwenden von Box: - Also, jetzt, was wir tun können, ist schwächen Sprung in die Stil Punkt CSS Seite. - Und ich werde einfach von oben nach unten gehen. - Und ich werde den verschiedenen Elementen eine Reihe von Stilen hinzufügen, während ich gehe, - indem ich nur einige Abstände mit Box-Modell und auch einige Verstand und Höhen von Dingen hinzufüge und - auch einige Box-Ästhetik und dann später wird es weitergehen, schwebende Eigenschaften zu verwenden - Positionieren Sie Elemente und erstellen Sie Säulenstruktur. - Also können wir hier ganz oben auf der Style-Punkt-CSS-Seite gehen, und die 1. 1, die ich tun werde, ist, dass ich den Körper selbst auswähle. - Die Leiche ist also ein Element. - Und erinnere dich an die Leichen, - den gesamten sichtbaren Bereich der Seite. - Und lassen Sie uns voran gehen und fügen Sie eine Box ästhetische Eigenschaft hier, - die Hintergrund genannt wird. - So Hintergrund ist die Art und Weise, dass wir ein Bild angeben können und das Bild positioniert und - ob es wiederholt oder nicht etcetera. - Also, um ein Hintergrundbild zu spezifizieren, - können wir sagen, Sie sind l und dann in Klammern, - wir können auf die Position des Bildes zeigen. - Jemand geht voran und sagt Punkt, - Punkt Schrägstrich, um den CSS-Ordner zu verlassen, - und dann Bilder Schrägstrich, um in den Bilderordner zu gehen. - Und ich werde Ah verwenden, ein Bild namens handgemachtes Papier bekam PNG und standardmäßig, - wenn Sie keine angeben, - äh, - jede Positionierung oder jede Wiederholung des Bildes standardmäßig, - es wird oben links positioniert Ecke des Körpers, - und es wird sich unendlich wiederholen, weil ich keine wiederholenden Befehle angebe. - Werte hier wird nur horizontal und vertikal als Faras zu wiederholen. - Das Browser-Fenster kann gehen, - also ist es gut und speichern Sie das und kommen Sie zurück und lassen Sie uns aktualisieren und das war ziemlich subtil. - Ich weiß nicht, ob ihr Jungs erzählen könnt, - aber alles ist vorher weiß, und jetzt hat es wirklich eine Art Textur von Papier. Wenn wir hier hineinzoomen, könntest du es vielleicht ein bisschen besser sehen, diese Art von ah, eine handgemachte Papiertextur. Wenn wir hier hineinzoomen, könntest du es vielleicht ein bisschen besser sehen, diese Art von ah, - Es ist also ein Cremeweiß. - Wir haben gerade unseren weißen Seiten eine subtile Textur von Cremeweiß gegeben. - Wenn Sie voran gehen und sehen wollen, wie das Bild von alleine aussieht, - können Sie das hier im Finder anbringen, und Sie können sehen, dass es handgemachtes Papier heißt. - Also ah, - Quadrat davon ist nur so groß. - Es ist eigentlich nur 100 mal 100 Pixel, - aber es wiederholt sich tatsächlich unendlich, - wie breit unser Bildschirm ist, - wie groß und breit das Browserfenster ist, - es wird nur diese Textur wiederholen und es sieht so aus eine nahtlose Textur. - Dann werden wir auch einige Abstände für Dinge wie die H Zweier und H Dreier ändern. Und denken Sie daran, - wenn ich ein Komma benutze, - kann ich einen zusammengesetzten Selektor angeben, wo er sowohl die H zwei als auch die H drei gleich stylen wird, - und wir werden etwas Marge hinzufügen. - Einige untere Rand hier, - was ist daran erinnern, - Rand ist der Abstand außerhalb der Elemente. - Wenn ich also ein wenig Abstand unterhalb der H zwei und H drei hinzufügen möchte, kann ich das hier einstellen. - In unserem Fall, - der Abstand unter dem H zwei und H drei ist ein wenig mehr, als ich will. - Dies ist der Standard, den es von der normalisierten bei CSS erhält, die wir auch mit -, - und, - ähm, - das sieht so aus, als wären es etwa 2025 Pixel auseinander. - Ich möchte, dass Teoh näher an den Absätzen ist. - Also werde ich das auf fünf Pixel am Rand setzen. - Ok? - Und wenn wir gehen und das speichern und zurückkommen und sich auffrischen, können wir sehen, dass wir den Abstand dort ändern. - Abgesehen von unseren Überschriften hier, - wollen wir auch den Rand unter unserer Liste ändern. - Also haben wir bestellt und eine noch haben Listen. - Und wenn wir den Rand blau ändern möchten, - können wir es auf Rand Strich unten setzen und sagen 10 Pixel und die Listenelemente selbst. - Wir wollen, dass sie ein wenig einrücken, - also gehen wir weiter und setzen den Rand Dash links auf etwa 20 Pixel wie das und wir werden speichern - und wir werden zurückkommen, um jetzt zu durchsuchen und zu aktualisieren, um diese zu sehen. - Diese Listenelemente befinden sich tatsächlich auf der Katalogseite. - Und wenn ich hier runterscrolle, wo wir Schuharchiv haben, sehen Sie sie hier 20 Pixel eingerückt. - Und auch hier sehen Sie die 123, die jetzt und eingerückt 20 Pixel hier sein sollte. - Okay, - das ist gut. - Okay, - Also unsere Absätze und Adressleiste, - wir haben auch einige Schriftgröße hier. - Wir machen auch voran und fügen hier etwas Marge hinzu. - Also nur auf die gleiche Weise, dass wir Rand sehen können, - Bindestrich, - oben, - Rand, - Bindestrich, - unterer Rand, - Bindestrich links. - Wir können auch Abkürzung verwenden. - Ähm, - und denken Sie daran, - die Anzahl der Werte, die Sie hier platzieren, bestimmt, welche Seite betroffen ist oder welche - Seite sich befindet. - Eso hier können wir sagen, - wissen Sie, - zum Beispiel, - wenn wir die Top 20 und beide Seiten auf Null setzen wollen, - aber wir wollen die unteren 2 25 Pixel setzen, - das wäre eine andere Möglichkeit, dies zu schreiben. - Also, anstatt Marge zu sagen, - Strich unten, - können wir auch sagen, Rand, - was ist Kurzschrift und sagen Null auf der oberen Null auf der linken und rechten und 25 Pixel auf der - unten so. - Also, wenn es drei Werte, - der erste Wert ist der obere zweite Wert ist beide Seiten, - und der dritte Wert ist der untere. - Ok? - Und wir gehen auch weiter und fügen einige Abstände hinzu. - Wir verwenden die gleiche Technik, um einige Abstände unter den Zahlen hinzuzufügen. - Also denken Sie daran, - wir haben ein fünftes semantisches Element namens Figur, das alle unsere - Bilder hier umgibt . - Und auch die Figur umgibt auch, - unser Video hier in der Künstlerecke. - Also gehen wir weiter und sagen, - Abbildung und wir werden hier einen Rand von Null Komma hinzufügen oder entschuldigen Sie mich Null Raum Null Raum, - 10 Pixel, - nur 10 Pixel auf der Unterseite und kein Rand auf den oberen Innenseiten. 35. Styling: - Lassen Sie uns auch etwas Stil zu unserer Tabelle hinzufügen, die wir erstellt haben. - Denken Sie daran, dass wir hier auf der Preisseite einen Tisch hatten. - Das zeig ich dir nur einen Moment. - Das ist also der Preisdiagrammabschnitt hier, - und wir haben diese Tabelle aus den TR-Elementen und Th, die Tabellenkopf und T d ist. - Was ist der Tabellenteiler oder ein Nicht-Header hier, - Spaltenstruktur erstellen oder wirklich eine Tabelle erstellen -Zelle. - Also diese Luft, die all diese Zeilen und Spalten der Tabelle erstellt, also möchten wir das so stylen, dass Sie sehen können, wie es hier unstilvoll aussieht, - schwächen, - Spring rüber zur Preisgestaltung. Und Sie können sehen, dass diese Luft hier zusammengefügt ist, also werden wir sehen, was wir tun können, um das etwas schöner aussehen zu lassen. - Lass uns voran gehen und sagen, dass dieser Kerlspitze eine Breite von 100% hat. Und das wird schön sein, denn wenn wir die Größe unserer Wrapper ändern , steigt die Größe des Gerätes nach unten. - Wir können den Tisch entsprechend reagieren lassen. - Also setzen wir diesen Kerl auf eine Breite von 100% und wir gehen voran und sagen Margin 000 20 - Pixel wie das und wir fügen eine Grenze an die Spitze eines Pixels solid medium Grey - wird eine hexi decimal Abkürzung für mittelgrau verwenden, - und wir werden auch einen ähnlichen Rahmen erstellen. - Aber diesmal auf der linken Seite als auch, - wir sagen, Grenze Strich links ein Pixel, - solides Pfund C C c, um dort ein Medium Grau zu schaffen. - Okay, - Wir wollen auch die Tischrose stylen, die das TR-Tag so verwendet. - Ich möchte diesen Jungs eine Hintergrundfarbe hinzufügen, - äh, - Lippen hinteren Boden, - und wir werden sagen, e f g f e f, - was eine sehr hellgraue Farbe ist, - irgendwie nur 11 Kerbe von Weiß in einer Weise - äh, - und schauen wir uns das für eine Sekunde an. - Also, wenn ich das jetzt auffrischen, - diese Kerle sind hellere Farbe grau, - aber Sie können sehen, und wir haben auch eine Grenze oben und auf der linken Seite. - Und es dehnt sich jetzt auch 100% aus. Was wäre, wenn ich diese hellere graue Farbe auf jede andere Reihe setzen wollte. - Also vielleicht, - wie ich möchte, dass nur die geraden Zeilen der Tabelle Rooves eine hellgraue Hintergrundfarbe haben. - Was ich dann tun kann, ist, dass ich einen Pseudo-Klassen-Selektor verwenden kann. - Zuvor, - haben wir uns Pseudo-Klassenselektoren für Links wie Hover angesehen und besucht, um verschiedene - Links Zustände zu kontrollieren . Werfen wir einen Blick auf einen anderen Pseudoklassen-Selektor namens Child, und wir werden voran gehen und sagen End child sogar. - Und dies wird nur gerade nummerierte Zeilen nur gerade nummerierte Tabellenzeilen auswählen und ändern Sie es zu - diese graue Farbe hier so. - Also, - zum Beispiel, - wenn ich sagte, - um, - die Tabelle stieg, - zum Beispiel Zehe weiß so und dann sagte ich, die nur die geraden Reihen zu einer großen Farbe - wird diesen Effekt bekommen, - was so ist. - Also jetzt ist es irgendwie wie gestreift, - und es ist einfacher, da wir die Tabellenreihe so gestreift haben, - es ist einfacher zu sehen, wo sich diese aufstellen. - Ähm, - es stellt sich ein wenig später heraus. - Wir werden den Sektionen nur sagen, dass alles weiß ist, damit wir das Weiß vorerst rausnehmen können. - und schließlich erben sie einfach die Farbe des weißen Abschnitts hinter dem Tisch. - Mal sehen, was wollen wir sonst noch hier machen, an den Tisch? - Was haben wir die Tabellenüberschriften und Tabellenteiler, - die alle Spalten in der Tabelle und Art von Scheibe bis in einzelne Zellen - die Tabelle. - Und denken Sie daran, - wir wollen Polsterung für den Abstand innerhalb von Elementen und Rand für den Abstand außerhalb verwenden. - Also, wenn ich Abstände um die diese Zahlen und diese Wörter hier hinzufügen möchte, - muss ich Abstand innerhalb des Elements verwenden. - Also machen wir weiter und setzen diesen Kerl auf eine Polsterung von 10 Pixeln. - Ich denke, das sollte schön aussehen. - Und wir werden diesen Kerl auch so einstellen, dass er einen Grenzstrich rechts von einem Pixel hat, - eine solide mittelgraue Farbe wie diese, - genau wie zuvor. - Außer dem letzten Mal, - wissen Sie, - für den Tisch es nur als eine Grenze auf der Oberseite und verlassen. - Jede einzelne Zelle wird eine Grenze zu den Rechten und auch auf der Unterseite haben. - Also sagen wir das und kommen zurück und erfrischen uns und sehen, was das getan hat. - Da gehen wir. - Also fügte Padding einige hinzu, - offensichtlich etwas Polsterung um jeden dieser Jungs und die, äh, - jede einzelne Zelle hat eine Grenze unten rechts. - Dieser hat unten rechts rechts unten. - Also, da jeder eine Grenze am Boden und rechts hat, - macht es tatsächlich einen Kasten. - Und dann, um die Grenze oben und links zu machen, - haben wir es gerade dem Tisch selbst hinzugefügt, um auszufüllen. - Nur dieser hier und der auf der linken Seite in unserem Tisch sieht ziemlich gut aus. - Dieser Kerl wird ein th genannt, - was Tischüberschrift ist. - Also, - zum Beispiel, - Denker Steam Dolby in Washington, - Warby in Brixton. - Thes Brandon nennt diese Luft innerhalb von TD-Tags, aber diese Marke hier oben ist in einem th Tabellenkopf. - Also, wenn wir Wochenend-Style wollen, dass der Tabellenkopf ein wenig anders ist, - also wissen wir, dass es Header um ist, - also lasst uns die Hintergrundfarbe dieses ändern, um ein bisschen dunkler zu sein. - Grau sagt fünf Peitschen Pfund 555 und wir werden auch die Farbe des Textes ändern, um weiß zu sein - so und wir kommen zurück und aktualisieren, - und jetzt können Sie die Tabellenüberschriften dunkler sehen. - Das sieht ziemlich gut aus. 36. Styling: - um, - springen wir hier über die Kontaktseite und lassen Sie uns die, - wissen Sie, -die neuen Eigenschaften, die wir gelernt haben, - wie Display und, - ähm, - und Verstand und Padding und Rand verwenden - wissen Sie, - die neuen Eigenschaften, die wir gelernt haben, - wie Display und, - ähm, , um eine attraktive Form hier. - Also, im Moment, - unsere Form sieht irgendwie ein wenig traurig aus. - Kommen wir zurück und nutzen Sie die neuen Dinge, die wir gelernt haben, und stylen Sie diese Form - hier. - Also wähle ich alle Eingabebereiche und alle Textbereiche aus, und standardmäßig werden diese Typen in der Zeile angezeigt. - Ich werde sie ändern, um Block anzuzeigen. - Auf diese Weise werden sie übereinander zeigen, - einander statt nebeneinander. - Mal sehen, was das da getan hat. Also, wenn ich mich jetzt erneuere, lüften diese fremden Felder übereinander so. - Okay, - das ist ziemlich cool. - Lass uns weitermachen und sagen, dass dieser Kerl auch eine Breite von 100% hat, genau wie wir es mit dem Tisch getan haben . - Auf diese Weise wird es sich dynamisch dehnen, wird es sich dynamisch dehnen, - und das wird sich als nützlich erweisen, wenn wir anfangen, die Antwort des Designs zu machen, wo , die Tabellen und die Formen und Dinge, die auf unterschiedlichen Größen skaliert werden Geräte, so dass wir es machen - eine Flüssigkeit mit 100% dort, - und wir werden einige Polsterung innerhalb all dieser Elemente zu fünf Pixeln hinzufügen wird eine große in - Strich unten hier von fünf Pixeln, - so dass diese Luft ein wenig verteilt und wir werden eine Box hinzufügen shadow, - der einen Schlagschatten unter dem Element hinzufügt. - Und wir sagen Null für den horizontalen Offset. - Drei Pixel für den vertikalen Versatz. - Fünf Pixel für den Unschärfenradius und Pfund C C - C für die für die Schattenfarbe so und fügt auch einen Rahmen um. - Die Leute werden sagen, dass es eine Grenze um jede Seite gibt. - Das ist ein Pixel solide. - Si, - si, - si nur um den Tisch dort zu passen und wir werden speichern, dass und lassen Sie uns zurückkommen und überprüfen Sie dies -, - dann wird aktualisieren. - Und das fängt an, kühler zu sein. - Wir haben den Namen, - E-Mail, - Telefon und Nachricht hier, - und das sieht alles ziemlich gut aus. - Okay, sieh mal, was ich sonst noch will. - Ein Reh. - Nun, - eine Sache ist, dass diese diese Schaltfläche, - der Sende-Button dehnt sich auch 100%. - Also denke ich, was ich tun werde, ist alles einen Stil zu setzen, um speziell den Sende-Button auszuwählen. - Das ist nicht zu Stil 100%, die tatsächlich eine feste mit haben, wenn wir in springen - diese Seite nur so kann ich Ihnen auf der Kontaktseite zeigen. - Wenn ich hier auf das Kontaktformular komme, - werden Sie feststellen, dass diese Eingabe eine Art von Text hat. - Dieser hat eine Art von E-Mail. - Das hier hat eine Art Telefon und das ist der Textbereich. - Und ich habe all das schon auf 100% gestylt, weil ich gesagt habe, dass alle Eingänge 100% breit sind. - Diese Schaltfläche hier, die auf senden sagt, es ist auch Styling 100% hier. - Okay, - Jetzt hat dieser eine Art von Einreichung, die sich eindeutig von diesen anderen Arten von - Text und E-Mail und Telefon unterscheidet . - Was ich tun kann, ist, dass ich eine spezielle Art von Selektor verwenden kann, der einen Attribut-Selektor genannt wird. - Um, - und wenn Sie mehr über Attribute, - Selektoren, - erfahren möchten , können Sie auf die Folien für die CSS-Selektoren Vorlesung zurückverweisen. - Also gehen wir zurück in Stil Punkt CSS und kommen hier runter und wir gehen weiter und - sagen Eingabe und dann setzen wir Klammern, um nur eine Eingabe mit einem bestimmten Typ auszuwählen, - also können wir sagen, Typ gleich einreichen. - Also, was das tut, ist, dass es „Hey, - Browser“ sagt . - Lassen Sie uns ein Element finden, - um, - Eingabeelement und gehen Sie voran und Onley wählen Eingabeelemente, die ein Attribut haben - mit dem Typ gleich senden. - Okay, - und lasst uns oben einen Rand hinzufügen, indem wir Marge sagen, - Strich oben und wir sagen fünf Pixel, - und das wird uns ein wenig Abstand über der Schaltfläche geben, so dass es nicht richtig ist gegen - der Vorarbeiter legt . - Und lasst uns auch den Witz ändern. - Normalerweise beträgt also die Breite der Eingänge 100%. - Wir wollen das nur 100 Pixel machen, - also wird es eine kleinere, - korrigiert sie. - Und lassen Sie uns die Hintergrundfarbe auf Schwarz und die Textfarbe auf Weiß setzen. - Und wenn ich möchte, um die Ränder eines Elements und CSS drei, - Sie können Randstrich Radius verwenden und wir werden es auf 25 Pixel setzen, - was um die Ecken herum und machen es ein wenig mehr wie eine kreisförmige Schaltfläche aussehen - statt ah, - quadratische Grafik, - und wir gehen voran und entfernen die Grenze wird Grenze Null sagen, weil standardmäßig - Schaltflächen einen Rahmen haben. - Okay, - also speichern wir das und wir werden zurückkommen und aktualisieren und sehen, was das mit unserem Sende-Button getan hat - hier. Coulson, unser Sohnknopf sieht so aus, wenn wir über den Sonnenknopf schweben. - Wir haben ein wenig ändern wollen, damit Leute wissen, dass dort, dass sie darauf klicken können. - Eso genauso wie wir eine Hover-Aktion für den Hover-Stil für Links erstellt haben. - Wir können dasselbe für Eingabe-Schaltflächen tun, indem wir sagen, - Hey, - CSS, - gehen und eine Eingabe finden, die speziell einen Attributtyp hat, der dem Senden entspricht. - Und dann kann ich den Pseudoklassen-Selektor verwenden, um zu sagen, und wenn wir darüber schweben, - stylen Sie es auf diese Weise. - Also, was ich hier tun will, ist einfach die Hintergrundfarbe zu ändern. - Das ist das Einzige, was ich wirklich ändern möchte, wenn wir über den Mauszeiger schweben, ist nicht schwarz. - Anfangs ist es schwarz. - Hier, wir werden es ändern, - Teoh eine dunklere graue Farbe, so dass wir sparen. - Und wenn ich mich erfrischen, - dann, wenn ich über senden schwebe, - können Sie sehen, dass es sich zu einer helleren Farbe dreht. - Es wird zu einer helleren Farbe grau drehen 37. Styling: - großartig. - Okay, - ähm, - ein paar Dinge, die für das Box-Modell des I-Rahmens festgelegt werden müssen. - Also benutzen wir einen Augenrahmen auf der Kontaktseite hier, die Google Maps im Bett ist. - Wir betten Google Maps ein. - Sie verwenden den Code, den wir in einer vorherigen Übung hier von Google Maps kopiert haben. - Und es ist in diesem Element namens „I frame“, und wir müssen voran gehen und das stylen. - Okay, - Was ich tun werde, ist hier in die CSS zu gehen und ich setze I Frames und ich möchte die Grenze entfernen . - Ich sage Grenze Null, - ich sage Polsterung Null und Marge Null. - Ups, - Rand mit einem Auge. - Da gehen wir. - Und wir gehen auch nach Sethi Überlauf, um so versteckt zu werden. - Es werden keine Bildlaufleisten angezeigt. - Und wenn es eine Karte gibt, die nicht in die Größe des Rahmens passt, wird sie einfach ausgeblendet. - Und wir werden voran gehen und die Höhe auf 353 Pixel setzen und zufällig wissen, dass dies eine - gute Höhe ist , so dass es ungefähr mit der Höhe der Form übereinstimmt, die es oben ist - es. - Also kommen wir zurück und aktualisieren das, und das gibt ihm eine Höhe. - Das wird Oh sein, - von hier bis hier wird ungefähr gleich von hier bis hier sein. Und letztendlich werden diese zwei Spalten Struktur sein, wo die Karte auf der rechten Spalte sein wird , und das Formular wird in der linken Spalte sein, okay? 38. Centering: , Und Sie werden sich daran erinnern,dass wir vor einer Weile einen Rapper hinzugefügt haben, weil wir ein paar Balken auf dem Bildschirm für das Logo-Panel hier haben wollten, das über die Seite ganz oben gestreckt wird. - Aber wir wollten ihr ein paar Inhalte schicken. - Okay, also schauen wir uns das an. - Denken Sie daran, - wir haben dies mit der Klasse von Rapper auf der ganzen Seite getan, - überall wollten wir den Inhalt zentrieren, - wie innerhalb dieses Logo-Panel und auch innerhalb der Navigationsleiste. - So, jetzt Wache Knave Bar wird 100% des Bildschirms Logo-Panel dehnen 100% der - Bildschirm. - Aber Rapper, - das enthält die H eins und H zwei mit dem Namen der Firma und der Rapper hier mit einer Navigation, die wir in der Mitte fixieren werden. - Also habe ich das bereits auf all den verschiedenen Seiten angewendet, - und wir können einfach wieder in das CSS kommen und die Klasse dafür hinzufügen, indem wir Dot Rapper sagen, - und wir geben es fest mit, - um 9 60 Pixel. - Jetzt können wir das ändern, wenn wir mit dem responsiven Design übergehen. - Was wir tun werden, ist abhängig von der Größe des Geräts. - Wir können die Breite des Rappers ändern. - Und weil wir kein mit für den anderen Inhalt im Inneren angegeben haben, wird es entsprechend skalieren. - Ok? - Und Sie erinnern sich, dass von den vorherigen Beispielen in den Vorlesungsfolien wir uns angeschaut haben - mit automatischer Marge, um den Rapper zu zentrieren. - Also, wenn wir nur auf Werte innerhalb der Polsterung oder Rand verwendet, - der erste Wert gibt die obere und untere. - Das bedeutet also null Rand oben und unten, - und der zweite Wert bedeutet beide Seiten links und rechts. - Wenn Sie also einen automatischen Rand auf links und rechts setzen, drücken Sie dann gleich viel Abstand auf die - links und rechts, - was die Zentrierung des Elements erreicht. - Sehen Sie sich das hier im Browser an. - Wenn wir also auf Erfrischung drücken, können Sie meinen ganzen Sohn sehen. - Alle meine Inhalte sind jetzt zentriert. Wenn Sie möchten, dass der Rapper wirklich weiß, wie das, was diese Container vorübergehend schwächen, - zumindest können wir ihm eine Hintergrundfarbe geben, also ist es einfacher für Sie, es so zu sehen, und dann drücken wir „Refresh“, - und indem du ihm eine Hintergrundfarbe gibst, - kannst du diesen Rapper wirklich sehen. - Also gibt es hier oben ein größeres div namens Logo mit einer Idee von Logo, das sich 100% dehnt. - Und wir werden ihm bald einen Grady in Farbe geben, der hier raufkommt. - Fade von Weiß zu Grau. - Und dann haben wir diesen Rapper DIV Rapper in ihm erstellt, um eine Box als fixiert mit - zu erstellen . - Das wird den Inhalt zentrieren und Sie können sehen, selbst wenn ich den Browser in, - ah, - breiter oder schmaler. - Es hält den Inhalt im Rapper zentriert. - Es gibt also einen Rapper hier um das Logo. - Hier gibt es noch einen Rapper, der um die Navigation herum ist. - Es gibt einen anderen Rapper um den gesamten Inhalt, - der Hauptinhalt hier, der alle diese Abschnitte enthält. Es gibt also einen Abschnitt namens Company News, der innerhalb des Wrapper ist, und dieser Abschnitt wird zentriert, weil er innerhalb dieses Rappers ist und dieses Ding genannt Artist Corner. - Es gibt hier einen Abschnitt, den wir früher Artist Corner beschrifteten. - Das ist auch innerhalb des Rappers und auch ein Abschnitt, der über die Firma, die enthält - dieses Bild in diesem Absatz hier in der Überschrift hier, die auch innerhalb dieses Rappers ist. - Ok, cool. - Und dann auch, - das ist ein Abschnitt kurz vor der Fußzeile. - Wir haben einen Abschnitt erstellt, der auf all den verschiedenen Seiten ist. - Es nennt sich Details, die die Kontaktinformationen, - Links und die Social Media Links dort haben. Okay, ich werde die Hintergrundfarbe entfernen, aber jedes Mal, wenn du ein Layout baust, , könnte es einfacher für dich sein, diesen Containern Hintergrundfarben zu geben, nur damit du - kann es sehen. - Und dann macht es ein bisschen einfacher zu sehen, wo die Dinge lüften, beginnen und zu stoppen, wo die Dinge ein Ende beginnen und hilft, wenn Sie positionieren , Dinge, okay? 39. Anwenden von Box: - Es gibt noch ein paar Klassen, die sich einhalten werden. - Fügen wir hier eine andere Klasse namens Shadow hinzu, - und wir können voran gehen und bestimmten Elementen auf der Seite einen Schatten hinzufügen und - natürlich - wird Box-Schatten verwenden, um das zu tun. - Und wir sagen Null horizontal, - Mal sehen. - Und dann sagen wir drei Pixel vertikalen Offset, - 10 Pixel für den Weichzeichnerradius und machen die Farbe fast schwarz. - Aber nicht ganz. - Das ist ein sehr dunkelgraues Pfund. - 333 Ok. - Und ich habe Rapper bereits angewendet, aber ich habe nirgends Schatten aufgetragen. - Also lassen Sie uns voran und fügen Sie tatsächlich die Klasse des Schattens in einige der Elemente. - Ich habe es tatsächlich bereits auf der Katalogkontakt, - Preis- und Verkaufsseite hinzugefügt . Aber nur um dir zu zeigen, wo wir es in den Anblick bringen werden, habe ich es auf der Indexseite gelassen, damit wir sehen können , wie ich eine zusätzliche Saison durchgemacht habe. Also auf der Indexseite hier, - der erste Ort, an dem wir einen Schatten hinzufügen werden, ist auf dem Logo-Panel, also wird es eine Box geben, die sich über die ganze Seite erstreckt, namens Logo, und wir können dem eine Klasse geben, indem wir dort hineingehen. und sagen, Klasse gleich Schatten ist. - Und da ich das an ein paar verschiedenen Stellen hinzufügen werde, kopieren Sie es einfach hier und dann gehen wir durch und fügen es durch. - Ok? - Also der nächste Ort, wo ich hauptsächlich hinzufügen werde, ist das innerhalb des Hauptinhaltsbereichs. unten, Hierunten, hinter dem Header, haben wir die Holzstruktur im Rapper beginnen wird, und dann werden alle diese Abschnitte tatsächlich Schatten bekommen. - Das sind also Abschnitte, die ich eine weiße Hintergrundfarbe und einen Schatten geben werde , und das wird oben auf dieser Holzstruktur sein, und sie werden zentriert sein, weil sie im Rapper sind. - Also gehe ich durch jeden Abschnitt und wir fügen die Schatten hinzu. - So Ecke Künstler, - Sie bekommen auch eine Klasse von Schatten und, - ähm, - Nachrichten. - Die Firmennachrichten werden auch bekommen Dieser Abschnitt wird auch einen Schlagschatten darauf bekommen - so. - Und ich glaube, dass es darum geht. - Wollen wir mal sehen, - Möchte ich den Schatten woanders hinzufügen? - Das glaube ich nicht. - Ich glaube, ich werde nicht zu Details oder Fußzeile hinzufügen. - Also sind wir gut auf dieser Seite. - Und wie gesagt, - Ich habe dies bereits auf einigen der anderen Seiten hinzugefügt oder tatsächlich auf alle anderen Seiten dort -. - Alles klar, - also speichern wir das und wir werden hier zum Browser zurückkehren und aktualisieren. - Und da siehst du den Schlagschatten. Es gibt einen Schlagschatten hier auf jedem Abschnitt, wie die Nachrichten. Es gibt einen Schlagschatten hier auf jedem Abschnitt, - Thea Künstlerin dreht sich um das, was wir das nennen, und das hier geht um die Firma. - Okay, und hier ist der Schlagschatten auf dem Logo. - Das ist das Logo-Panel. - Oder sie taten mit der Idee von Logos. - Sie können sehen, dass er mit der Idee des Logos getan hat. - Wir haben nie eine Breite angegeben. - Und weil Dibs Block-Level-Elemente sind, - es ist nur Stretching 100% des Bildschirms. - So dass Schatten erstreckt 100% des Bildschirms, der Schlagschatten dort. - Wohingegen, - äh, - wir haben ein anderes div mit der Idee des Rappers, der das dort zentriert hält - genau auf die gleiche Weise der Rapper, der alle diese Abschnitte unten zentriert. - Okay, - das ist ziemlich cool 40. Anwenden von Gradienten: - und wir werden dieses Div mit der Idee des Logos anvisieren. - Ok. - Und wir wollen hier einige Abstände hinzufügen. - Wir wollen etwas Polsterung hinzufügen. - Wir werden den Kerl auch setzen. - 85 Pixel, - 0 25 Pixel so. - Fügen Sie einige Abstände innerhalb des Logos. - Als Nächstes fügen wir die Hintergrundfarbe der Zutat hinzu. Im vollendeten Code wirst du sehen, ...ähm, ich bin schon irgendwie auf Zutat gestoßen. Im vollendeten Code wirst du sehen, ...ähm, ähm, - Das sieht ganz schön aus. - Es ist irgendwie wie ein weißes bis ein hellgraues Fade, und ich werde den Code nicht genau für den gleichen geben. - Aber was ich Ihnen zeigen möchte, ist eine Website, die Sie verwenden können, ist eine Ressource, um das CSS für - Grady INTS zu generieren . - Wenn Sie möchten, dass eine Hintergrundfarbe innerhalb eines Elements wie dieses Logo-Panel verblassen. - Also, wenn ich zurück zu meinem Browser gehe und ich öffnete eine neue Registerkarte schwächen Typ in CSS drei und wir werden - geben Sie Grady int Generator ein. - Es kommt schon da oben, - und wir haben Zutatengenerator wie diesen CSS drei Zutatengenerator getippt, und wir werden auf diese Seite gehen, hat eine wirklich nette. - Es heißt Farbe Zillow Dot Com Slash Zutat Editor ist das Mädchen, aber Sie können hier sehen, dass es tatsächlich eine Tonne davon gibt. - Sie können verschiedene ausprobieren, wenn Sie möchten, und sie haben alle diese Voreinstellungen. - Also, wenn Sie eine Art wie eine Farbe Fade finden, die gut für Sie aussieht, - Sie können einfach voran gehen und eine der Voreinstellungen verwenden. - Die Art und Weise, wie dies funktioniert, ist, können Sie klicken und ziehen, um die Position dieser Farbstopps zu verschieben. - Sie können mehr Farbstopps hinzufügen, indem Sie einfach so darunter klicken, - und dann können Sie die Farbe ändern. - Also, - zum Beispiel, - wenn ich wie eine andere Farbe grün mache, dass es von weiß zu grau und zurück verblasst. - Wenn Sie diese loswerden wollen, - wenn Sie auf sie klicken und sie von diesem Schieberegler nach unten ziehen, - der Farbregler, - es wird sie einfach verschwinden lassen. Also, zum Beispiel, zum Beispiel, wenn ich will, dass dieser hier wie ein bisschen hellgrau fast weiß ist, kann ich das wirklich gut. - Das ist alles der Hack-Wert, ... und hier unten, wenn wir das etwas dunkler machen wollen. - Wir könnten das einfach so ein bisschensozurückfallen lassen, und das wird von einem weißen Lichtgrad zu einem leicht mittelgrauen wie diesem verblassen. - Das kannst du sehen. Weißt du, es gibt verschiedene Arten von Strahlen, die du tun könntest, wie horizontale Diagonale, damit sie von einer Farbe zur anderen verblasst. - Oder wie ein Radio, - das von außen nach innen in einer Kreisform verblasst. - Wir werden es für dieses Beispiel einfach so vertikal halten. - Und das Schöne daran ist, dass es Ihnen eine Benutzeroberfläche gibt, um die Grady int zu erstellen, die - Sie wollen, - und Sie können es bis zur Annäherung an Ihr Element Größe. - Oder Sie können hier sogar genau die Größe Ihres Elements stanzen. - Und es gibt Ihnen den ganzen CSS-Code hier unten, - und Sie können sehen, dass es tatsächlich eine ganze Menge Code ist, um Zutaten für die Arbeit zu bekommen - all die verschiedenen Browser. - Leider, - es gibt tatsächlich ziemlich schwere Menge an CSS-Code hier. - Was wir tun werden, ist, dass wir auf diesen kleinen Knopf hier in der Ecke klicken, der besagt dass die Kopie den ganzen Code für uns kopiert, und dann können wir auch hier reinkommen. - Der Logo-Stil, und wir können das da hineinkleben. - Und dieser massive Codeblock wäre für mich nicht sehr lustig gewesen zu schreiben. - Also habe ich diese Website benutzt, um das für mich zu generieren, und wir werden das speichern und hier zum Browser zurückkehren und sehen, wie das aussieht . - Also, jetzt werden wir hinzufügen, dass Grady es hier anfühlt, und ich werde mich erfrischen. - Und das sieht ziemlich cool aus. - Ich grabe es, okay. 41. Stylen des Logos: - Also kommen wir wieder rein und lassen Sie uns einige weitere Abstände und Padings hinzufügen und ändern Sie die - Art und Weise, wie diese H und H zwei in meinem Lade-Logo-Abschnitt angezeigt werden. - Also das erste, was ich tun will, ist eigentlich, diesen h one toe ändern zu wollen, - haben keine Marge. - Ich werde hier die Marge festsetzen. - Null. - Aber ich denke, was ich tun werde, ist, dass ich einen Rand auf der Oberseite hinzufügen oder entschuldigen Sie mich, - ein Klopfen auf der Oberseite als auch Padding Strich oben sagen und wird etwa 20 Pixel Raum hinzufügen - über den tatsächlichen Buchstaben für Sie wissen, - das Wort innerhalb der H ein, - was E h W ist und ich werde auch die Art und Weise ändern, wie es angezeigt wird. - Derzeit, - dieser Kerl zeigt die H ein Block und die H zwei ist ein Block Ebene Element standardmäßig -. - Es erscheint also eins oben. - Der andere. - Ich wollte se z h w Schuhe nebeneinander sehen, damit ich dieses Teoh Display in Linie setzen konnte. - Und ich will die Fähigkeit haben, die Marge dort nicht zu entfernen. - Also werde ich sagen, Anzeige in Linie Bindestrich Block wie dieser, wir sagen, Anzeige in - Zeilenblock. - Ok? - Und wir kommen hier runter und bei einem Hintergrundbild. - Also, was? - Ich habe waas habe ich ein Hintergrundbild speziell für diese h erstellt, die Art wird - ein Logo erstellen. - Ähm, - Sie können sehen, dass ich generiert habe. - Ich hatte mir das irgendwie ausgedacht. - Dieses Kronenlogo, das hier im Intro-Pic ist. - Und was ich tun werde, ist, dass ich hier eine kleine Krone oberhalb der Z h h h schiebe. - Also mache ich das ein Hintergrundbild, das eine kleine Krone ist, die ich im Fotoshop erstellt habe. - Also werde ich sagen Punkt, - Punkt, - Schrägstrich Bilder, um außerhalb des CSS-Ordners und in den Bilderordner zu gehen. - Und wir werden auf Logo-Unterstrich Crown Underscore und Boss Dot PNG verlinken. - Und wir werden dem Kerl sagen, er soll nicht wiederholen, indem er nein sagt, - Wiederholen Sie das hier und sagte, wir sagen nein. - Wiederholen. - Und wir werden das Ding sagen, dass sie oben in der Mitte des Elements positionieren soll. - Wir benutzen nur die Hintergrunde-Kürzel, und wir geben es wie einen Hintergrundbildwert, - Aziz. - Nun, - als Hintergrundpositionswert und oder entschuldigen Sie mich den Hintergrundpositionswert und auch - der Hintergrundwiederholungswert hier so. - Und wir werden auch die Marge auf der H zwei ändern. - Wir gehen hierher und ich werde sagen, , wir werden alle Ihre Marge entfernen. - Und wir werden auch die Art und Weise ändern, wie Sie angezeigt werden, damit Sie nebeneinander existieren können. - Und wir setzen euch beide in Linienblock, Aziz. - Tja, - Stiefel wie das. - Ok. - Und wir kommen zurück und erfrischen uns. - Ehrfürchtig. - Also jetzt mein Logo, - mein H eins ist Seite an Seite mit meinem Alter, - auch. Und ich habe hier oben ein Hintergrundbild, das meine kleine wie geprägte Krone ist. - Also ist mein Logo jetzt komplett in der Ecke meines Logo-Panels. 42. Hauptabschnitte gestalten: - Und denken Sie daran, - wir haben äh, - ein div, das sich um all jene Abschnitte wickeln wird, die eine Holzstruktur haben, - und das würde Texturbox wird 100% des Bildschirms erweitern. - Es wird Holzstruktur sein, - ein Sfar, - ein Z, das ich im Browser sehen kann. - Aber dann haben wir das andere div Das ist der Rapper, - das hat ein fixiertes mit und es zentriert den Inhalt auf dieser Holzstruktur. - Und dann darüber, - haben wir diese Abschnitte, die, - äh, - dabei sind, unseren Hauptinhalt der Seite zu halten. - Okay, - also lassen Sie uns voran und erstellen Sie einen Stil, dann würde dies mögen. Und wir werden diesem Kerl ein Hintergrundbild wie dieses Hintergrund-Strichbild geben, und wir werden sagen, du bist l. Und wir werden sagen, du sollst mit Punkt, Punkt, Schrägstrich, Schrägbildern verlinken , . so und wir werden diesem sagen, dass er einen Hintergrund haben soll - Strich Position okay von Mitte oben. - Und wir werden auch die Hintergrundwiederholung einstellen, um zu wissen, - wiederholen Sie so und wir werden einige Polsterung in diesem Ding hinzufügen. - Wir werden 30 Pixel oben und unten und Null Pixel links und rechts sehen, - und wir werden speichern. - Okay, - also kommen wir zurück zum Browser. - Und das schafft dieses schöne Hintergrundbild hinter all meinen Abschnitten. - Sie werden bemerken, dass jetzt alle meine Abschnitte, - oder durchschauen. - Also, - äh was? - Wir haben keine Hintergrundfarbe für meinen Abschnitt angegeben. Also, jetzt ist diese Steuer ein wenig unlesbar, also müssen wir ein wenig später zurückkommen und allen unseren Abschnitten eine weiße Hintergrundfarbe geben . - Aber das machen wir in einem Moment. - Aber ich wollte zeigen, dass wir jetzt - hinter allem hier, - unter dem Logo-Panel und unter der Navigation - eine hölzerne Hintergrundstruktur haben. - Das hat ein schönes Highlight auf dem Holz. Das Einzige daran ist, dass ich dieses Highlight ganz oben haben möchte, aber ich möchte diese Art von schattiger Art wie dunklere Holzfarbe hier nehmen, und ich wollte einfach unsere Wiederholung fortsetzen. , Das Einzige daran ist, dass ich dieses Highlight ganz oben haben möchte, aber ich möchte diese Art von schattiger Art wie dunklere Holzfarbe hier nehmen, - Und der Grund, warum Sie sehen können, dass die Höhe dieser Holzstruktur nicht groß genug ist - für alle meine ganzen Rest meiner Abschnitte zu kompensieren. - zum Beispiel, - die Künstlerabteilung ragt unten heraus, - und der Nachrichtenbereich ragt auch unterhalb der Höhe der Holztextur. - Eines der coolen Dinge, die Sie mit CSS drei tun könnten, ist, dass Sie mehrere - Hintergrundbilder angeben können . - Also, was ich tat, war, dass ich in den Fotoshop ging und ich habe gerade ein kleines Stück davon ausgeschnitten - würde hier unten, wo es anfängt zu verblassen. - Ich werde das nur sagen, um es in dem zu wiederholen, - das tat, - mit einer Idee von Holz. - Haben wir Ah, hier? - Also, - wenn der Inhalt größer ist als das Holzbild, - kann ich auch ein anderes sich wiederholendes Bild darin und CSS durch die Art und Weise haben, die Sie angeben - mehrere Hintergrundbilder verwenden Sie ein Komma wie dieses und dann geben Sie an ein anderes Mädchen - zeigt auf ein anderes Bild. - Also gehen wir voran und sagen Punkt, - Punkt, - Schrägstrich Bilder Schrägstrich Ich würde Scheibe Punkt j peg so unterstreichen. - Ok. - Und wir können auch ein Komma setzen und dann sagen, dass dieser andere links oben positionieren sollte und - für diesen 2. 1 hier wiederholen. - Nun, - sagen wiederholen. - Warum? - Damit Sie sehen können, dass das erste Mädchen in seiner Mitte oben ist, keine Wiederholung. - Und dann nach diesen Commons, - wir würden schneiden, - was nur ein wenig aus dem Holz an der Unterseite geschnitten ist. - Es gibt eine Scheibe Holz, und das ist, um oben links zu positionieren und Onley vertikal zu wiederholen, also wird das vertikal wiederholt. - Okay, also lasst uns das retten. - Und lassen Sie uns den Unterschied sehen, jetzt, wo wir die Holzstruktur haben, - hoffentlich wird sich hier wiederholen. - Richtig? - Also werden wir schlagen. - Aktualisieren Und jetzt können Sie sehen, dass Textur einfach weitergeht, wenn es mehr Platz gibt. - Okay, also beginnt die Holzstruktur hier oben. - Und dann, wenn wir nach unten scrollen, geht es so weiter. - Okay, das ist also ziemlich cool. - Wir können hier sogar mehrere Hintergrundbilder in ein Element einfügen. - Okay, - äh, - lasst uns auch all diese Abschnitte stylen, weil, wie ich schon sagte, es ist eine Art Drag, dass dieser schwarze Text auf diesem dunklen Holzhintergrund steht, der nicht aussieht - zu heiß. - Also lass uns stilvoll gehen. - Alle Abschnitte wie diese werden voran gehen und ein beliebiges Element namens Abschnitt auswählen, - und wir werden hier etwas Padding hinzufügen und wir werden sehen, dass 20 Pixel Platz auffüllen. - Und wir geben ihnen auch eine Hintergrundfarbe von Weißen wie diese. - Und dann gehen wir voran und speichern und kommen zurück zum Browser hier und drücken. - Aktualisieren. - Cool. - Also jetzt haben wir etwas Polsterung um dieses Element. - Wir haben diese weiße Farbe hier im Schlagschatten unter ihnen. - Wir könnten hier ein bisschen Martin Leadsom Marge dazwischen hinzufügen . - Und Sie können sehen, dass die Textur weitergeht, bis wir so in den Detailbereich geraten , - okay? 43. Styling: - Also lassen Sie uns das etwas Stil geben. - Der Detailabschnitt hier. - Genau dort, wo das enden würde. - Wir möchten hier einen weiteren Grady hinzufügen, wo der Detailbereich kurz vor der Fußzeile ist. - Also werde ich hier über Details oder unter Details dort runterkommen, - und wir werden einen Selektor namens Hash-Tag-Details erstellen, um dieses Div mit der Idee von Details auszuwählen und wir werden hierher kommen und etwas Padding hinzufügen, wird voran gehen und sagen: - 20 Pixel oben und unten und 10 Pixel links und rechts. - Und wir fügen hier auch eine, äh, äh, - Inhaltsstoff-Hintergrundtextur hinzu. - Eso Ich werde zurück zum CSS Strahlungsgenerator springen und wir können das sogar benutzen - ein und irgendwie etwas ändern. - Ich mache die ein bisschen dunkler. - Jetzt werde ich sagen, dass diese Farbe etwas dunkler wird und vielleicht auch ein kleines bisschen dunkler beginnt - so, - und wir machen es etwas größer. - Mädels, - sieh dir das an. - Das sieht ziemlich gut aus. - Und wir sagen, Kopie, um das zu kopieren, - Grady es, dass man gut aussieht, und dann fügen wir es hier so ein. - Cool. Okay, also gehen wir weiter und speichern das, und wir kommen zurück und erfrischen uns. - Und wenn ich nach unten scrollen, - können wir diesen gierigen int von leichten Noten und dunkel groß sehen. 44. Erstellen von Kolonnen: - Dies schließt alle unsere Stile mit den Techniken, die wir für Box-Modell und Box gelernt haben - Ästhetik. - Als nächstes werden wir unser Seitenlayout mit den Float-Positionierungstechniken entwickeln, die wir in den vorherigen Beispielen gelernt haben. - Wenn wir hier zum Browser zurückkommen, - können Sie sehen, dass bestimmte Abschnitte die volle Breite des Rappers aufnehmen werden und - andere Abschnitte werden Spalten sein, die Positionen nebeneinander sein werden. - Also, - zum Beispiel, - hier auf der Über Seite, - die unsere Homepage hier ist, - dieser Abschnitt wird alle drei Spalten oder den gesamten Rapper-Raum aufnehmen. - Okay, - jetzt dieser Künstlerabschnitt hier, der unser Video darin hat, - der Künstler-Eckbereich wird nur die ersten 2 Spalten auf der linken Seite aufnehmen, - und dann wird die Unternehmensnachrichtenabteilung nur eine einzige rechte Spalte aufnehmen hier, dass - neben ihm schweben wird. - Und in anderen Situationen, - wie auf der Katalogseite - werden wir eine dreispaltige Struktur haben, in der der Männerbereich hier eine kleine Box sein wird , die nur die erste Spalte auf der linken Seite einnimmt. - Der Frauenbereich nimmt hier die mittlere oder zentrale Säule in der Mitte in der Mitte ein und der Kinderbereich nimmt eine einzelne Spalte auf der rechten Seite ein. - Also haben wir 123 Kisten nebeneinander. Okay, um das zu erreichen, werde ich die Float-Positionierung nutzen, und ich werde voran gehen und eine Art von meinem eigenen Gittersystem erstellen, um dies zu tun, indem ich Klassen . - Und jede Klasse wird steuern, ob dieser Abschnitt die Breite einer einzelnen Spalte ist, - zwei Spalten oder Strecken über alle drei Spalten. - Und wir verwenden auch Float-Positionierung, um zu steuern. - Ob es zum Lachen bleibt, bleibt auf der rechten Seite. - Okay, also werde ich jeden dieser Klassen so nennen, dass er später auf der Straße Sinn macht . - Also weiß ich, wie man diese Klassen anwendet. - Je nachdem, wie ich diese Abschnitte auf der Seite positionieren möchte, - so dass bestimmte Abschnitte nur eine einzelne Spalte einnehmen. - Wenn wir uns vorstellen, dass es am meisten eine dreisäulige Struktur haben wird, dann werde ich Klassen nennen, - CEO L für Spalte und dann die Nummer eins anrufen. - Wenn sie sich nur über eine einzelne Spalte erstrecken. - Ich benutze Call 2 oder C O L zwei, wenn sie sich über zwei Säulen erstrecken und drei anrufen. - Wenn sie sich über alle drei Spalten erstrecken, - wie in diesem Intro Pic Abschnitt hier eher der Abschnitt über hier, - der sich über alle drei erstreckt. - Okay, also lasst uns weitermachen und ein paar Klassen erstellen. - Lassen Sie uns ein Jahr erstellen, das Spalte 1 genannt wird, - weil es sich nur über eine einzelne Spalte erstreckt und Unterstrich links sagen wird. - So wissen wir, dass diese Spalte Positionen nach links und um es nach links zu positionieren, - Float links verwenden wird und wir werden ein spezifisches mit angeben, so dass es auf Lee Ah, - eine Spalte aufnimmt . - Okay, - wenn es drei Spalten gibt, - 33 0,3% sollten mich zu dem Punkt bringen, wo es nur etwa 1/3 ist, weil drei von ihnen - summieren sich auf, - wie 99.999 um, - und drei gleiche Spalten haben. - Jedoch, - wir wollen ein wenig Platz zwischen den Spalten mit Rand haben. - Also werden wir einen Taschenrechner benutzen, um herauszufinden, warum diese Dinge sein müssen, damit du wahrscheinlich diese Mathematik in deinem Kopf machen kannst, aber ich bin nicht so toll. - Nicht so heiß, Matt. - Also werde ich sicherstellen, dass das alles korrekt ist mit dem Rechner. - Also haben wir 100% mit dem Rapper zur Verfügung, und ich will 1% der Marge zwischen jeder der drei Spalten haben. - Das wäre also 1% zwischen der linken und mittleren Spalte und 1% Marge zwischen der - mittleren und rechten Spalte. - Jedes dieser 1% auf der linken Seite der mittleren Säule und 1% auf der rechten Seite der mittleren Spalte summiert sich auf zwei. - Also muss ich 2% von den 100 subtrahieren, was mir 98% übrig bleibt mit - Zehenarbeit mit. - So jetzt kann ich das 98% nehmen und durch drei Säulen geteilt, - und das wird mir 32,6 geben. - Okay, - also sollte diese Spalte 32,6% mit allem in Ordnung sein. - Und ich denke, ich hatte auch eine Marge dazu wird sagen, dass dieser Kerl keine Marge an der Spitze hat. - Kein Rand links und rechts. - Aber er hat 20 Pixel Rand auf der Unterseite. - Also gebe ich nicht ein wenig Platz unter jedem der Abschnitte, auf die ich das anwende. - Lassen Sie uns auch eine einzelne Spalte für die Mitte erstellen. - Das ist also die Spalte, die in der Mitte schwebt, und wir werden das auch so einstellen, dass es sich neben der anderen Spalte stapelt - das ist nach links schwebt und das wird es direkt in die Mitte setzen. - Dieser Typ wird die gleiche Breite haben, die jetzt 32,6% beträgt. - Ein Unterschied ist, dass ich tatsächlich Marge auf der linken und rechten Seite dieses Typen hatte, indem Null oben 1% auf der rechten Seite sage, - 20 Pixel unten und 1% auf der linken Seite. - Also denken Sie daran, - wenn Sie vier Werte den ersten Wert angeben. - Wenn Sie im Uhrzeigersinn gehen, - der erste Wert ist top thes. - Der zweite Wert ist richtig. - Das ist also 1% Marge auf der rechten Seite. - Der nächste Wert, der im Uhrzeigersinn geht, ist die unteren 20 Pixel unten und schließlich - 1% auf der linken Seite. - Das ergibt also einen Prozentsatz der Marge auf jeder Seite der mittleren Spalte. - Jetzt wird die letzte Spalte, - die rechts ist, - die rechts ist, - so ziemlich das gleiche wie die linke Säule sein, - außer der Tatsache, dass statt links zu schweben, wir diesen Kerl nach rechts schweben können. - Okay, - aber es wird die gleiche Breite und die gleiche Art von Rand haben, - was kein Rand oben ist, - keine links oder rechts und 20 Pixel unten. - Das werden also alle Klassen sein, die ich für meine dreispaltige Struktur brauche. - Eine andere Situation ist, dass ich möchte, dass ein Element die Breite von zwei Spalten einnimmt, - also werde ich voran gehen und eine Klasse erstellen, die einen Aufruf bedeutet, dass es die Breite von zwei Spalten einnimmt und wir machen Manchmal, - wissen Sie, - die zwei Spalte wird auf der linken Seite sein, - und andere Male werden Sie zwei Spalten auf der rechten Seite sein, - also erstellen wir zwei Klassen dafür. Okay, also wird dieser Typ offensichtlich nach links schweben, während der auf der rechten Seite nach rechts schweben wird. - Okay, - wir haben 100% freien Platz, - und dann haben wir eine A-Spalte, die die mit von zwei Spalten aufnimmt oder entschuldigen Sie mich, - ein Abschnitt, der die mit zwei Spalten aufnimmt, - und dann haben wir nur 1% der Marge auf der rechten Seite. - Und dann haben wir noch eine Spalte, die nur die Breite einer Spalte einnimmt. - Okay, - also statt hier 2% Marge zu subtrahieren, müssen wir nur 1% Marge subtrahieren, was uns 99% so gibt. - Okay, also wirklich, - was wir tun wollen, ist, dass wir die,äh, -auch die äh, - Spalte auf der rechten Seite subtrahieren wollen, weil wir wissen, dass die für diesen Kerl für die Spalte - nach links wir wissen, dass Wir werden die Kombination aus einer Spalte links und einer Spalte eins rechts haben, die ich eigentlich den Namen von hier ändern sollte. Wir werden die Kombination aus einer Spalte links und einer Spalte eins rechts haben, - Dies wird eine Spalte eine linke Spalte, - eine Mitte in Spalte eins sein. - Richtig. - Also werden wir uns wie eine Spalte nach links mit einer Spalte eins rechts oder einer Spalte zu schreiben - mit einer Spalte eins links und Sie werden sehen, was ich meine, wenn wir anfangen, dies in die - Seite zu implementieren . - Also, was ich tat, war, dass ich beschlossen, die 32,6% zu subtrahieren, um herauszufinden, was die verbleibenden Räume - für diese andere Spalte. - Also haben wir 99%. - Wir nahmen die 100% -1% -Marge, - und dann werden wir 32,6 subtrahieren, - was mir die Breite der anderen Spalte geben wird, - was 66,4% ist. Okay, also sollten beide Typen eine Breite von 66,4% haben. - Ok. - Und dieser hier wird eine Marge von Null an der Spitze haben. - 1% rechts, - Und dann sagen wir 20 Pixel unten und Null auf der linken Seite so. - Und das hier wird das Gleiche sein. - Außer, dass es richtig schwebt. - Und es wird Null Rand auf der oberen Null auf der rechten Seite, - 20 Pixel auf der Unterseite und 1% auf der linken Seite. - Okay, also habe ich dort mehr Möglichkeiten. - Ich kann einen Abschnitt haben, der die Breite einer einzelnen Spalte einnimmt oder zwei Spalten aufnimmt. - Ok. Und schließlich , wollen wir vielleicht etwas haben, das alle drei Spalten überspannt, damit wir diesen Anruf anrufen können. - Drei. - Also hier haben wir, - um, - Rand von 00 20 Pixel, - bedeutet Null auf der oberen Null auf beiden Seiten und nur 20 Pixel auf der Unterseite. - Und wir werden hier eine weitere Klasse hinzufügen, die Spalte drei genannt wird, damit es alle drei Spalten aufnehmen und daran denken, mehrere Klassen hinzuzufügen. - Sie könnten einfach ein Leerzeichen zwischen jedem Klassennamen setzen. - Und jetzt hat das eine Klasse von Spalte drei, - und es hat auch eine Klasse von Schatten, - also sollte es auch einen Schlagschatten haben. - Also gehen wir weiter und speichern das, und ich komme zurück in den Browser. Und wirklich, das Einzige, was sich hier ändern wird, ist, dass es etwas Spielraum darunter hinzufügt, was Sie sehen können, dass es dort getan hat. - Jetzt gibt es ein Leerzeichen zwischen diesem Abschnitt und dem nächsten Abschnitt wie in diesem a - spannend drei Spalten quer. - Ok, - nicht zu schick. - Da. - Jetzt werden die Dinge hier unten interessant. Das ist also die Künstlerabteilung, und ich möchte, dass die Künstlerabteilung die Breite von zwei Spalten aufnimmt oder und ich möchte, dass die Künstlerabteilung die Breite von zwei Spalten aufnimmt oder66,4% breit ist und dann den Nachrichtenbereich hat, der hier ist. - Unternehmensnachrichten. - Nehmen Sie nur die Breite einer Spalte hier auf der rechten Seite. - Also, was ich tun möchte, ist die Spalte links für den, - um, - für den Artists Corner Abschnitt zu verwenden und ich möchte Spalte 1 rechts für den neuen Abschnitt verwenden. - Rechts, damit ich hier nach unten zur Künstlerecke scrollen kann und wir können hier hineingehen und eine Klasse hinzufügen - der Spalte, um so links zu unterstreichen und wird zum neuen Abschnitt kommen und wir werden hinzufügen - eine Klasse von Spalte eins rechts, - was es bedeutet bleibt auf der rechten Seite. - Aber es hat nur die Breite einer Spalte, - und wir gehen weiter und sagen das, und wir kommen zurück zu unserem Browser hier und wir werden schlagen. - Aktualisieren Und da gehen wir. - Hier passiert also etwas Lustiges. - Firmennachrichten sollen in der Lage sein, neben dieser linken Spalte zu passen. - OK, - aber ihr erinnert euch vielleicht daran, dass es zwei verschiedene Box-Modelle gibt, - und, - um, - dieser spezielle Browser Chrome verwendet das W drei C Box-Modell, wo immer ich wie hinzufüge - Grenze oder padding in diesem Fall - ich habe 20 Pixel Polsterung um jeden von ihnen, - es macht es tatsächlich ein wenig breiter, als nebeneinander passen wird. - Wir haben auch einige Elemente, - wie die Details Abschnitt am unteren Rand der Seite hat Kontakt Korrespondenten Links und - folgen. - Es zieht sich neben dem Element, das schwebt, also ist dasauch irgendwie albern, auch irgendwie albern, also müssen wir das reparieren. - Denken Sie daran, in den Beispielen aus der Vorlesung in den vorherigen Vorlesungsfolien, - wir haben uns die Verwendung einer Eigenschaft namens Clear angesehen, um diesen Kerl in die Vergangenheit zu bringen. - Wir haben auch die Änderung des Box-Modells mit untersucht, um Padding mit Box Bindestrich Größe a - CSS drei Eigenschaft, um alle Browser so einzustellen, dass das gleiche Box-Modell verwendet wird. Also, um einige dieser Dinge zur Arbeit zu bringen, müssen wir wieder in den Stil zurückkehren, dass CSS und tatsächlich einen Kommentar in der Nähe des oberen Teils der Seite hier in einem Abschnitt namens Fixes erstellt haben. - Genau hier ist es online 12 der Style dot CSS Seite. - Also werden wir dort nach oben scrollen und uns weitermachen und einige dieser CSS-Fixes implementieren. - Eine Sache, die wir tun wollen, ist das Box-Modell zu ändern, also sagen wir Star, um alle Elemente wie diese auszuwählen und wir gehen voran bis, - standardmäßig. - Zunächst wird sagen, dass diese Jungs eine Marge von Null um haben sollten, - Polsterung von Null und Grenze von Null, nur um einen Reset zu tun. - Und dann werden wir auch die Box-Größe ändern, - was es so macht, dass, wenn wir eine Breite angeben, - es wird die Polsterung in der Grenze enthalten. - Und wir werden sagen, - Verwenden Sie den Wert Border box, - das ist die Internet Explorer-Box-Größenmethode. - Ok. - Und wir werden die Präfixe Web Kit auch verwenden, um diese Arbeit und alte Versionen von Chrome - und Safari zu machen . - Nun, - sagen Web Kinder Armaturenbrett Größe und wir werden Grenze Dash Box speichern Und wir verwenden auch Strich Mosey - Armaturenbrett Dasha Dimensionierung. - Und wir werden auch sagen, dass zwei Bordüren-Armaturenbrett-Box. - Okay, - also sollten alle Elemente jetzt, - um, -die Internet Explorer-Grenzbox-Methode verwenden - um, - , die uns gute Unterstützung und alle - Browser geben sollte und diese Dinge erlauben sollte, es richtig anzuzeigen. - Also jetzt sind unsere 20 Pixel Polsterung nicht das, was tatsächlich in die Breite aufgenommen wird. Okay, also werde ich vorgehen und sparen, dass wir ein paar Dinge haben, die sich nicht richtig klären. - Zum Beispiel, - der Detailabschnitt, den wir über die Höhe von etwas schwebendem darüber löschen wollen, so dass wir - tatsächlich nach unten scrollen dann zu diesem Detailabschnitt hier und wir können voran gehen und den - Detailabschnitt setzen , um beides zu löschen. - Das bedeutet also, dass die Details Abschnitt und wird nicht mehr neben diesem Ding springen, das ist - schweben. - Und diese Jungs werden den entsprechenden Witz haben, also sollten sie nebeneinander erscheinen. - Also lasst uns voran gehen und den Code speichern, - und wir werden wieder in den Browser kommen und aktualisieren. - Cool. - Jetzt erscheinen diese Typen Seite an Seite. - Also haben wir einige unserer Probleme hier gelöst, die wir jetzt haben. - Dieser Kerl hat eine Spalte zur linken Klasse, die es links schwebt und ihm einen 66,4 - Punkt 4% mit gegenüber dieser, - die eine Spalte eine rechte Klasse verwendet, - die nach rechts schwebt und 32.6 mit hat und weil wir änderte das Box-Modell zu - Grenze Dash Box, - dies hat die 32% oder 32,6%. - Mit ist inklusive der Polsterung hier und so ist das hier. - Hier. - Die 66,4% mit ist inklusive Polsterung, - und dann haben wir 1% Marge, - was dies zu insgesamt 100% addiert. - Ok. - Und ich sagte, dieser Detailabschnitt soll klar beides sagen. - Ah, hier. - Ich habe diesen Detailabschnitt, um die Höhe jener Elemente, die schweben - über zu löschen . - Okay, - ähm, - Sie werden bemerken, dass die ein paar anderen Dinge passieren, das ist ein bisschen albern. - Ähm, - Also eine Sache ist, dass die ah Div mit dem i d. - Von würde das Textur wäre es eigentlich auf Lee so toll wie dieses Element, das nicht schwimmend ist . - Diese Spalte drei Element ist nicht schweben. - Aber denken Sie daran, - wann immer Sie ein Elternelement haben und Sie Kinder darin schweben, - verliert es seine Referenz dafür, wie erzählt, um so zu sein. - Jetzt. - Das würde dieses div, - mit der Idee von Holz, das die Holzstruktur hat, - zusammenbricht. Es ist offensichtlich, dass das zusammenbricht, weil wir die schwimmenden Kinder drin haben, oder? - Erinnerst du dich an die Methode? - Wir verwenden den Fix, den wir verwendet haben, um ein Elternteil davon abzuhalten, zusammenzubrechen, also werde ich hier in den Fixes kommen und ich werde diesen speziellen CSS-Hack hinzufügen, um ein zusammenklappendes Elternteil zu reparieren. - Es heißt „Clear Fix“. - So erstellen wir eine Klasse von klaren festen Doppelpunkt nach und kommen hinein und sagen - Inhalt. - Und wir werden wie ein kleines Periodensymbol einwerfen, dort wird diesem Kontinent sagen, um - Block anzuzeigen . - Und wir werden diesem Kerl sagen, um beide zu klären, um die Höhe irgendwelcher schwimmenden Kinder vorbei zu klären. - Irgendwelche schwebenden Elemente darüber. Entschuldigen Sie, und dann ändern wir seine Sichtbarkeit in „Verborgen“, damit wir diesen Inhalt nicht wirklich sehen. - Und wir werden seine Höhe 20 und seine Strichhöhe 20 A Swell einstellen. - Hoppla. - Und wir haben einen kleinen Typ dort wird das reparieren. Ich könnte diese Klasse jetzt auf jedes Element anwenden, das zusammenbricht. Ich könnte diese Klasse jetzt auf jedes Element anwenden, das zusammenbricht. - Also, - zum Beispiel, - ich kann hier zum Div mit der Idee von Holz kommen, - und wir können eine Klasse klarer Behebung hinzufügen, um den Kerl davon abzuhalten, zusammenzubrechen. - Okay, also gehen wir weiter und speichern das. - Wir werden zum Browser zurückkommen und aktualisieren und abkühlen. - Jetzt können wir sehen, wie sich die Holztexturen bis unten unter den schwimmenden Kindern wiederholen, - so klare Fixes kommen hier runter und klären an der Höhe der schwimmenden Kinder vorbei. - Dieses übergeordnete Element zu geben, - das heißt, - wäre eine Referenz dafür, wie groß zu sein. - Okay, gehen wir, um dasselbe für die drei Dibs hier unten zu tun. Lassen Sie uns das in eine dreisäulige Struktur verwandeln, also haben wir es gerade vorher gemacht, also sollte es ziemlich einfach sein, sich daran zu erinnern, wie man das diesmal macht. - Also, wenn ich hier runter ins Detail komme, - lasst uns voran gehen und diesem 1. 1 hier eine Klasse von Spalte eins geben. - Also sagen wir „Aktiv“, ich D. - Div Class Spalte One links so und wird auf die zweite Spalte kommen und wir geben - dies eine Klasse von Spalte eine Mitte für die Mitte. - Und schließlich, - wir geben die letzte, wenn hier eine Klasse von Spalte eins rechts, - die diese Kerle nebeneinander erscheinen lassen sollte. Und wir wollen nicht, dass der Abschnitt zusammenbricht, weil wir haben, dass diese Jungs schwimmenden Kinder , also werden wir das gleiche Problem haben, das wir oben hatten, mit dem Abschnitt oder der Saison mit dem Div . - Mit der Idee von Holz kollabierte. - Jetzt werden wir das gleiche Problem haben, wo der Abschnitt I d Details zusammenbrechen, weil alle - seine Kinder innen oder schweben. - Also müssen wir ihm eine Referenz geben, wie groß zu sein ist, indem wir diese klare Lösung hinzufügen und in der - Mischung. - Und wenn Sie sich nicht ganz erinnern, was klar für los ist, - gehen Sie weiter und gehen Sie zurück zu den Videos und der Dia-Vorlesung, um das zu überprüfen. - Also habe ich das gerettet und wir können uns erfrischen. Und jetzt kannst du diese Typen nebeneinander sehen, was ziemlich cool ist. - Ich glaube, ich füge hier eine kleine Grenze auf der rechten Seite und eine Schrift hier drinnen hinzu. - Also machen wir voran und erstellen eine Klasse dafür hier. - Ich gehe zurück in den Stil und in den globalen Stilbereich und unter Schatten - hier. - Warum erstellen wir nicht so eine Klasse namens Grenze? - Und wir werden Randstrich rechten Doppelpunkt speichern, - ein Pixel gut sagen punktiert und geben ihm eine mittelgraue Farbe. - Und wir fügen auch etwas Polsterung auf der rechten Seite hinzu, - So geht der Text nie direkt nach oben gegen diese Grenze und wir werden sagen, - klopfte rechts 20 Pixel so und sicher. - Also will ich auch diese Grenzklasse anwenden . - Dieser Detailabschnitt hier unten, aber nur für ein paar davon. - Also will ich nur, dass diese Grenze in den beiden zentralen Säulen dort ist. - Also gehen wir weiter und fügen es der ersten Spalte innerhalb der Details hinzu, - die eine Spalte genannt wird. - Eine Linke wird hier reinkommen und wir sagen Grenzrechte wie diese Anzeige, die dort Stil ist und - auch zu dieser Spalte 1 Mitte genannt wird und wird auch Border rechts hinzufügen, - das auch. - Und du wirst sparen und ich komme zurück und erfrischen, und jetzt kannst du sehen, dass es irgendwie subtil ist, aber ich habe hier auf der rechten Seite dieser Spalte eine Strichlinie erstellt und auch auf der rechten Seite dieser mittleren Spalte hier. - Also, jetzt haben wir nur, - wie, - eine subtile kleine Linie dort in der Mitte. - Alles klar, - das sieht ziemlich toll aus. - Ich muss sagen, ich beeindrucke mich selbst. - Leute, ich mag die Art, wie das da aussieht. - Also habe ich diese Klassen bereits zu den anderen Seiten hinzugefügt, - Sie können sehen, dass dies eine Klasse von Spalte eins übrig hat. - Das hat eine Klasse von Spalte 1 Mitte. - Dies hat eine Klasse von Spalte eins rechts hier haben wir eine Zwei-Spalten-Struktur, - also diese eine Spalte nach links genannt wird, - und diese wird Spalte eine rechte Spalte eine rechte Spalte eins rechts genannt, - und das ist Spalte nach links. - Und hier haben wir die drei Säulenstruktur Spalte eine linke Spalte, - eine Mitte und Spalte eins rechts, - alles rechts, - und das wird uns erlauben, verschiedene Spaltenstruktur auf verschiedenen Seiten zu erstellen. - Zehe, was auch immer wir wollen. Also, wenn ich auf die Verkaufsseite gehe, hat dieser eine Klasse von Spalte drei. - Oder rufen Sie drei an, um zu bedeuten, dass es drei Spalten in Anspruch nimmt. - Und hier haben wir Säule eine linke Säule, - eine mittlere Säule, - ein Recht. - In Ordnung, - dieser hier ist Spalte drei, - nimmt alle drei Spalten dort ein, - und Sie können sehen, - da ich eine Breite von 100% in meinem, - ähm, - meinem Tisch hier habe - ähm, , - es dehnt sich nur so weit aus, wie es hören kann, bis es in den Rand des Abschnitts läuft. - Jetzt, - auf der Kontaktseite. - Wir haben eine Klasse von Spalte zwei in einer Klasse von Spalte eins übrig. - Richtig. - Okay, also das war's. - Für diese Übung, - Ich hoffe, dass Sie dadurch einen Einblick in das Erstellen von Seitenstrukturen mit mehreren Spalten und die Flexibilität, Ihre eigenen CSS-Stile zu schreiben, um Ihre eigenen Grid-Systeme zu erstellen - mit Kombinationen von schwimmende Ah, - die Dimensionierung Ihrer Spalten. - Und auch Techniken, um Probleme zu beheben, wie klar behoben, um zu verhindern, dass Eltern und Box - Dimensionierung. - Teoh. - Passen Sie alle Browser an, um das gleiche Box-Modell und auch Techniken wie Clearing zu verwenden, so dass wir die Höhe aller schwebenden Elemente oben in ah, - in kommenden Übungen, - wir werden es ein bisschen weiter nehmen einige fortgeschrittene Positionierungstechniken lernen. - Wir kommen zurück und beenden das Styling für die Navigation, die Hauptfigur oben auf der Seite. - Dann lernen wir, einige responsive Designs mit CSS während der Medienabfragen zu erstellen. Ich hoffe, du magst das hier, und ich hoffe, du fängst an, deine eigenen Seitenlayouts zu erstellen. - Schauen Sie sich die Links unter dem Video an, um einige weitere Tutorials zur Positionierung und - Erstellen von Seitenlayouts, - und gehen Sie dann weiter und gehen Sie zur nächsten Code-Herausforderung, - wo Sie einige Positionierung und Spalte hinzufügen -Struktur in Ihr eigenes Website-Layout. 45. Entwicklerwerkzeuge (Teil 2): - Hi. - Willkommen zurück. - Dies ist Teil zwei der Entwickler-Tools-Videos. - Im ersten Teil, - haben wir uns die Inspektion von Elementen angesehen, so dass wir sehen konnten, was HTML und CSS angewendet wurden - diese speziellen Elemente. - Und wir haben auch die Änderung und Änderung der CSS-Attribute und Werte untersucht, so dass wir - Vorschau Änderungen im Browser, bevor wir beschlossen, dauerhaft Änderungen im Code - Editor. - Im zweiten Teil, - werden wir uns all die großartigen Dinge ansehen, mit denen Entwicklertools uns helfen können - wenn wir Seitenlayouts erstellen. - Es gibt also keine Notwendigkeit, etwas in Ihrem Code zu ändern. Ich habe gerade eine hypothetische Situation geschaffen, in der wir ein Problem in unserem Layout haben , damit Sie sehen können, dass dies nur die Indexseite unserer Übung ist, und ich bin reingegangen und ich habe hier absichtlich etwas gebrochen, und wir sind Entwickler-Tools verwenden, um uns zu helfen, dieses Problem zu lösen. Das Hauptproblem hier ist also, dass dieser Abschnitt, der hier „Artist Corner“ genannt wird, nach links schweben soll, und dieser Firmennachrichtenbereich hier soll nach rechts schweben, und diese Typen sollten Seite an Seite. - Und Sie können hier sehen, dass, obwohl es so aussieht, als ob die Unternehmensnachrichten genug Platz hat , um Seite an Seite mit diesem anderen Abschnitt zu passen, - aus irgendeinem Grund wird es unten gedrückt. - Das erste, was ich tun werde, ist richtig. - Klicken Sie auf und überprüfen Sie eines der Elemente, die mir ein Problem geben. - Und hier habe ich Recht, - auf die Figur geklickt, - was die Box ist. - Es umgibt das Videoelement in der Bildbeschriftung, - und Sie werden feststellen, wenn Sie hier unten im Entwicklerpanel schauen, - es gibt tatsächlich eine Breadcrumb, die Ihnen die Beziehung zeigt, von denen Elemente verschachtelt sind - innerhalb von anderen Elementen. - Also, - zum Beispiel, - sind wir auf Figur. - Wenn ich klicke, - kann ich sehen, dass die Figur tatsächlich innerhalb des Abschnitts mit der Klasse der Spalte nach links ist. - Und das ist innerhalb eines div mit der Klasse von Rapper und so weiter und so weiter. - Also, wenn ich diesen Abschnitt hier mit der Klasse der Spalte nach links durchgehe, - kann ich sehen, dass Chrome mir tatsächlich Farbcodierung gibt, um die Polsterung und auch - den Rand anzuzeigen . - Also in diesem Fall, - Chrome verwendet eine hellgrüne Farbe, um die Polsterung innerhalb des Elements anzuzeigen, - und es verwendet eine hellblaue Farbe, um den Inhaltsbereich innerhalb dieses Elements anzuzeigen, - und es verwendet eine hellorange Farbe, um anzuzeigen Marge. - Also in diesem Fall, - Sie können sehen, dass es tatsächlich ziemlich viel Marge auf der Seite des Elements, - und das ist wahrscheinlich der Schuldige, warum der andere Abschnitt, - der Nachrichtenbereich, - ist nicht in der Lage, bis Seite an Seite mit diesem Artist Corner Abschnitt. - Also, wenn ich das Element dort auswähle, wie wir wissen, - können wir alle CSS-Stile sehen, die sich auf dieses bestimmte Element auswirken. - Und wenn ich hier runter komme, - wir können sehen, dass der Schuldige hier ist, dass die rechte Marge jetzt auf 20% gesetzt ist, - abgesehen davon, dass wir hier klicken und die Werte ändern können - haben wir auch ein weiteres Panel, das wir öffnen können, um mehr zu sehen Informationen über diese - bestimmte Box-Modell für dieses Element. - Also werde ich Ostschiffe Panel hier durch Klicken auf diesen kleinen Pfeil nach unten reduzieren, - und darunter können Sie sehen, gibt es ein weiteres Panel mit dem Titel Metriken, - und wir werden das Metriken-Panel erweitern, - und das wird die -Box-Modell für dieses bestimmte Element. - Sie können sehen, ob ich in der Mitte schwebe. - Ich kann den Inhaltsbereich sehen. - Und in der Tat, - das gibt mir sogar die genaue Anzahl von Pixeln innerhalb der Höhe für den verfügbaren Inhalt - Bereich innerhalb dieses Elements. - Und wenn ich in den nächsten Abschnitt der Box hier schwebe, - diese, die Padding genannt wird, - können wir sehen, dass es tatsächlich 20 Pixel Polsterung auf jeder Seite gibt. - Und wir können sehen, dass es keine Grenze gibt und dass es unten einen 20 Pixel Rand - und dass dieser 20% Rand auf der rechten Seite tatsächlich 192 Pixel beträgt. - Eines der netten Dinge über die Lage, das Box-Modell zu sehen, ist, dass Sie sehr deutlich sehen können - wie viel Platz oder wie viel Bildschirm Immobilien. - Jedes Element nimmt tatsächlich auf, - und das ist wichtig, wenn Sie versuchen, Säulenstrukturen zu bauen. - Zusätzlich, - können wir auch doppelklicken, um diese Werte zu ändern, so dass ich hier einen anderen Wert eingeben kann, - oder ich kann auch die Aufwärts- und Abwärtspfeile verwenden, um die Höhe der Marge in diesem Fall zu ändern. - Also halte ich einfach den Pfeil nach unten und bringe den Rand rein, bis ich sehe, dass genug Platz für die andere Spalte ist , um Seite an Seite mit dieser zu passen. - Da sind wir. - Also hier sieht es aus wie um, - wissen Sie, - neun Pixel sind ungefähr so viel Marge, wie ich hier haben kann, damit der neue Abschnitt t passt - nebeneinander. - Zusätzlich, - abgesehen von der Eingabe von Pixelwerten, - können wir auch Prozentwerte eingeben. - Also, - zum Beispiel, - wenn ich diesen Kerl zu 5% gesagt habe, kann ich sehen, dass das nicht funktioniert. - Wenn ich es zu 4% sagte, sehe ich das immer noch nicht ganz genug. - Wenn ich es zu 3% sagte. - Ah, - 2%. - Indem Sie also das Prozentsymbol anstelle von Pixeln eingeben, wird es tatsächlich die Konvertierung für mich tun. Wenn ich 1%eintippe, können wir sehen, dass das funktioniert. eintippe, - Also 1% des Raums innerhalb dieses Rappers, - das ist 960 Pixel, - kommt auf neun Pixel Raum. - Also, jetzt, wo ich weiß, dass 1% meine magische Zahl ist, - kann ich sehen, dass ich diese 20% hier ändern muss, - Zehe 1%, die online 206 dieser Style-Punkt-CSS-Stylesheet ist. Wenn ich also zu meinem Code zurückkomme und hier runter zu Zeile zwei von sechs komme, sehe ich, dass das die Klassenspalte links ist. - Und hier ist die Marge von 20%. - Ich kann das auf 1% sparen zurücksetzen, - und wir können zurückkommen und die Seite aktualisieren. - Und wir haben diesen Fehler korrigiert, so dass Sie sehen können, Entwicklertools können sehr nützlich sein für - Fehlerbehebung der Verstand, - Padding und Ränder des Box-Modells. - Aziz Auch ermöglicht es Ihnen, alle CSS-Positionierungsbefehle zu sehen. 46. Positionierungstechniken: - Hallo. - Willkommen zurück. - Dies ist Folien 3.2 fortgeschrittene Positionierungstechniken. - An diesem Punkt, - sollten Sie beginnen, ein wenig mehr Vertrauen über das Erstellen von Seitenlayouts zu fühlen. - Und in der vorherigen Übung - haben wir auf das Verwenden des Schwimmens geschaut, um Säulenstruktur zu schaffen. Und in dieser nächsten Übung lernen wir einige zusätzliche Positionierungstechniken kennen. - Wir werden auch einen Blick auf eine CSS-Eigenschaft namens Z-Index nehmen, die wir verwenden können - Layering oder Positionierung von Elementen vor oder hinter einander. - Wir werden auch einen Blick auf eine populäre Technik mit Bildsprites und einige CSS - Code, um Rollovers zu erstellen, wo, wenn der Benutzer dort schwebt, - Maus über ein Bild wird das Bild ändern sehen. - Ich habe einige Arbeitsbeispiele für die Positionierungstechniken erstellt, die wir lernen werden. - Und wenn Sie daran interessiert sind, den vollständigen Code für all diese Beispiele zu sehen, - können Sie immer die Links überprüfen, die hier in den Folien aufgeführt sind. - Also gehen wir weiter und springen zu diesem ersten Beispiel und Sie können hier sehen. Ich habe gerade ein paar übergeordnete Container erstellt und in ihnen habe ich hier ein paar Boxen erstellt, und jede Box wird uns helfen, eine neue Art von Positionierung zu demonstrieren, die wir lernen werden. - Wir lernen relative absolute und feste Positionierung. - Und ich habe diesen Boxen bereits einige generische Klassennamen gegeben, nur um uns zu demonstrieren - jede der verschiedenen Arten der Positionierung. - Erstens, - werfen wir einen Blick auf die relative Positionierung, - so standardmäßig, - alle Elemente, wenn wir unsere Position nicht statisch wie diese angeben. - Aber mal sehen, was passiert, wenn wir voran gehen und einige spezielle Positionierung hinzufügen, - wie relative Positionierung, so kann ich sagen Position relativ. - Und sobald Sie die Positionierung auf eine andere spezielle Art der Positionierung ändern, - erhalten Sie dann die Möglichkeit, einige andere CSS-Eigenschaften wie oben unten links und rechts zu verwenden, - damit Sie dem Browser sagen können, wie weit Sie das Element schieben oder bewegen auf dem Bildschirm. - Also, - zum Beispiel, - wenn wir sagen, dass oben der Browser sagte, auf die Oberseite des Elements zu drücken und es nach unten zu bewegen - 50 Pixel so. - Also, wenn ich voran und laufen, dass Sie sehen können, dass es das dieses Element hier geschoben hat, - das Quadrat, das relativ sagt, es drückte es nach unten 50 Pixel von seiner vorherigen Position, wo - es war vor dort, - und wenn ich sagen, eine kleinere Zahl wie 10 zum Beispiel, - und ich laufe, dass es nur 10 Pixel von seiner vorherigen Position nach unten bewegt. - Also, oben unten links oder rechts für die relative Positionierung anzugeben, sagt dem Browser - welche Seite des Elements, das Sie jetzt drücken möchten. - Sie können sogar negative Zahlen verwenden, wenn Sie möchten. - Wenn ich sage Top Negative 50 Pixel und ich das laufen, - Sie können sehen, dass es tatsächlich das Gegenteil tut. - Also mit einer positiven Zahl drängen Sie auf die Spitze. - Aber mit einer negativen Zahl ist es, als ob Sie an der Spitze ziehen. - Du ziehst es 50 Pixel hoch, - also gehe ich voran und sage die Top 10 Pixel und die Welt verschiebe es nach rechts, indem du rechts sagst - 10 Pixel, - was auf der rechten Seite drücken wird. - So 10 Pixel. - Werfen wir einen Blick auf eine andere Art von Positionierung genannt absolute Positionierung, so dass wir setzen können - dieser Kerl absolut zu positionieren, - und wir werden voran und verwenden die gleichen Werte oben 10 Pixel, - rechts, - 10 Pixel. - Und obwohl diese die gleichen Werte belüften, - werden wir sehen, dass dies etwas ganz anderes tut, und das liegt daran, dass absolute - Positionierung diese Zahlen auf eine ganz andere Weise verwendet, - so können Sie sehen, was dort passiert ist. - Waas. - Wenn ich dieses untergeordnete Element hier auf absolute Position setze, - bricht es tatsächlich vom Elternteil frei und zieht bis zur oberen rechten Ecke des Bildschirms. - Also jetzt, wenn ich die Eigenschaft oben verwende, - bezieht es sich auf seine Beziehung zum oberen Rand des sichtbaren Fensters oder dem sichtbaren - Browser-Bereich. - Und wenn ich richtig sage, - es bezieht sich auf seine Beziehung zum rechten Rand des sichtbaren Browserfensters, so dass Sie - tatsächlich die 10 Pixel sehen können, die es gibt. - Es sind 10 Pixel unten von oben, und es sind 10 Pixel von rechts da. - Der Hauptunterschied zwischen relativem und absoluten besteht darin, dass Sie bei der Positionierung - hier - Positionierung von Befehlen auf einem relativ positionierten Element - dieses Element relativ zu dem Ort neu positionieren, an dem es positioniert wurde vorher, - richtig, - so war es früher hier, - und dann drückt es es in eine bestimmte Richtung darauf, - schiebt oder zieht es und positioniert es basierend auf der Beziehung, wo es früher war. - Nun, - absolut basiert auf der Beziehung des gesamten sichtbaren Fensters, so dass ist ganz anders. - Eine Möglichkeit, darüber nachzudenken, ist dieses absolut positionierte Kind hier. - Es ist so, als hätten wir ihm zu viel Zucker gegeben und es ist kaputt. - Es wurde übertrieben und aus dem Elternteil geflogen, und Sie können sehen, wie seine Eltern dort zusammengebrochen sind. - Und das ist im Gegensatz zu relativ auch wo, wenn Sie etwas Relatives positionieren, - das Elternteil noch Art von einem Geist, wo dieses Element positioniert wurde - vorher. - Also haben wir immer noch die Höhe beibehalten ihre okay, - so können Sie neugierig sein, was passiert, wenn wir auch spezielle Positionierung an die Eltern geben. - Also, - zum Beispiel, - lassen Sie uns sagen, ich gehe zu diesem Elternteil hier, der zusammengebrochen ist, weil es ein Kind im Inneren hat - es, das absolut positioniert ist. - Was, wenn ich diesem Elternteil eine relative Positionierung hinzufüge, ist gut, - also ist das irgendwie interessant. - Sie können sehen, dass der Elternteil hier noch zusammengebrochen ist. - Jedoch, - dieses absolute Kind ist nicht mehr in der Lage, frei zu brechen. - Also gaben wir dem Kind Superkräfte. - Wir haben ihm Zucker gegeben. Wir haben es hyper gemacht, indem wir absolut positionieren, aber jetzt haben wir den Eltern Superkräfte gegeben, indem wir diesen Verwandten positionieren. - Also, wenn der Elternteil spezielle Kräfte hat, kann es immer noch das Kind in ihm halten. - Und jetzt diese Top 10 Pixel, - richtig? - 10 Pixel bezieht sich auf seine Beziehung innerhalb der Eltern. - Also ging es an die Spitze Was, - 10 Pixel unten von der Spitze dieses Elternteils und 10 Pixel über von der rechten Seite des - Elternteils. - Und dann sehen Sie, was wir entfernen die relative Positionierung vom Elternteil und setzen es zurück auf ein normales, statisches Elternteil. - Es kann dieses wilde Kind nicht mehr darin halten. - Also, wenn wir das dort laufen, - bricht dieser Elternteil zusammen, und es ist normal, - statische Position und das absolut Positionskind kann sich befreien. - Und es ist jetzt, - ähm, - positioniert sich stattdessen basierend auf der Kante des Browserfensters. - Das ist also irgendwie interessant. - Werfen wir einen Blick auf eine andere Art von Positionierung namens fixiert. - Okay, - damit wir Position sparen können, - kann schwächen. - Setzen Sie diesen auf Position fix, - und wir gehen weiter und wir setzen diesen auf 10 Pixel von oben nach unten, - und wir setzen ihn 240 Pixel von rechts ein. - Was wir sehen werden, ist, dass feste Positionierung irgendwie absolut ähnlich ist, dass diese oben - unten links und rechts Richtungen, die wir hier platzieren können, sind immer noch in Beziehung zu dem - gesamten sichtbaren Browserfenster genau das gleiche wie mit absoluten. - So erscheint dieser hier 10 Pixel von oben und 140 Pixel von der rechten Seite. - Jetzt gibt es einen Hauptunterschied zwischen fest und absolut, - und das passiert, wenn das Browserfenster scrollt. - Also habe ich diese DIV-Klasse mit Füllstoff hier auf der Unterseite erstellt. - Gehen wir voran und setzen Sie eine Höhe, damit wir es groß genug machen können, dass wir müssen - im Browser nach unten spazieren. - Also geben wir dem Kerl eine lächerliche Höhe, damit wir wissen, dass er vom Bildschirm geht. - Das setzt das auf 900 Pixel hoch, und das sollte ausreichen, um dort vom Bildschirm zu laufen. - In Ordnung. - Und jetzt haben wir eine Bildlaufleiste, die dazu führt, dass diese Elemente tollten und wir werden es bemerken - wie wir scrollen das Element, das feste Positionierung hat, bei uns bleibt. - Also die absoluten relativen Positionselemente und alle ihre statischen Behälter, die Luft. - Die Eltern scrollen alle vom Bildschirm, - aber fixiert bedeutet, dass es an Ort und Stelle bleibt, während das Browserfenster scrollt Okay, - Sie könnten also neugierig sein, wann Sie diese anderen Arten von Positionierung verwenden könnten, - und wir sind Werfen Sie einen Blick auf einige Verwendungen für diese in der kommenden Übung. - Gehen wir weiter und springen dann zurück zu den Rutschen. - Also haben wir uns die relative Positionierung angesehen, - was es uns erlaubt, Positionierungsbefehle wie oben unten links und rechts zu verwenden und ein Element zu bewegen , basierend auf der Beziehung, wo es früher war, als es statisch positioniert -. - Also, Top drängt nur weiter. - Seine obere linke drückt auf die linke Seite des Elements, - und Sie bewegen es basierend darauf, wo es früher positioniert war. - Wir haben uns auch die absolute Positionierung angesehen, - die es uns ermöglicht, ein Element basierend auf seiner Beziehung zum gesamten sichtbaren Browserfenster zu verschieben . - Und wir haben uns auch die feste Positionierung angesehen, - die ähnlich wie absolut ist, aber auch dann fixiert bleibt, wenn der Benutzer imBrowserscrollt Browser 47. Z-Index: - nächstes, - lassen Sie uns einen Blick auf eine CSS-Eigenschaft namens Z Index werfen, - und ich habe, - ah schnelles Beispiel, das wir durchgehen können. - Sieh dir das an. - Ähm, - Sie haben vielleicht bemerkt, dass in diesem letzten Beispiel, wenn Sie den Bildschirm in und heraus skalieren, - größer und kleiner, - dass diese Elemente tatsächlich übereinander überlappen können. - Und wir können das mit etwas namens Z-Index kontrollieren. - Ich habe hier ein wirklich einfaches Beispiel erstellt 123 mit diesen drei Dibs, - und ich habe ihnen jeweils eine generische Klasse von Z eins, - Z zwei und Z drei gegeben . - Und wir werden das verwenden, um einen anderen Z-Index auf sie anzuwenden und sie so zu positionieren, dass einige von ihnen auf den anderen liegen. - Also fangen wir einfach an, indem wir hier unten gehen und eine Klasse namens Z eins erstellen, so dass wir - können diese 1. 1 hinzufügen, um einen Z-Index von einem jetzt standardmäßig haben. - Wenn Sie nicht alle statisch positionierten Elemente angeben, - haben Sie nur einen trüben Index von Null, - und wenn Sie eine spezielle Positionierung wie relativ oder absolut hinzufügen, - wird es über die statisch positionierten Elemente verschoben. - Es sei denn, Sie geben Z-Index so ein Z-Index von Null ist die Sie wissen, - die normale Ebene, die direkt über dem Körper ist. - Sie können die Indexnummern tatsächlich auf negative Zahlen setzen, - und diese fallen hinter die normalerweise die normalen, - statischen neu positionierten Elemente, - und Sie können nie hinter den Körper gehen. - Also ist der Körper irgendwie wie die entfernteste Rückenschicht, die Sie nicht zurückbekommen können, so dass Sie nicht können - lassen Sie Elemente verschwinden. - Alles, was hinter der Leiche steckt. - Aber man kann sie vor und hinter anderen Elementen auf der Oberseite des Körpers positionieren, - im Wesentlichen. - Und jedes Mal, wenn wir die höhere Indexnummer verwenden, - wird es über ein anderes Element in jeder Zeit gehen. - Wir verwenden, je niedriger die Indexnummer. - Es wird hinter diesen anderen Elementen gehen. - Okay, also dieser Typ, ich werde nur den Z-Index von eins haben. - Lassen Sie uns voran gehen und geben Sie diesem eine Hintergrundfarbe von Aqua, nur damit wir die Veränderung sehen können - dort. - Und lassen Sie uns diesem auch eine Position von Verwandten geben. - Aber momentan schätze ich, wir brauchen nicht wirklich nicht zu positionieren. - Das hier wird einfach den anderen drauf positionieren. - Also schätze ich, ich setze das einfach auf Top Null links. - Nullpunkt. - Ok. - Und wir werden das ausführen, um den Code zu sehen. - Also, jetzt gehen wir rein und , setzen diese zweite Box auf, um sich darüber zu überlappen. - Das wird eine andere Klasse schaffen, - und wir nennen es Z zwei. - Und ich setze diesen auf einen Z-Index von zwei. - Und ich ändere hier die Hintergrundfarbe, - Zeh Limette. Also heben sie sich ab und ziehen das oben auf das andere, ich werde es auf negative 50 Pixel oben und 50 Pixel auf der linken Seite setzen . - Also werde ich diese zweite Box 50 Pixel hochziehen, und ich schiebe sie von der linken Seite rüber. - 50 Pixel. - Also müssen wir das erledigen. - Und Sie können Kasten zwei mit den Mietern sehen. - Der Index von zwei überlappenden Box eins, der den Index von eins hat. - Sie können sehen, ob wir den Z-Index von zwei zu ah ändern, - niedrigere Zahl als eins. - Zum Beispiel. - Wenn ich sage wie, - negativ, zu dem eine niedrigere Zahl ist und Sie das laufen, - Sie werden sehen, es wird hinter gehen, - und dann, wenn Sie eine höhere Zahl verwenden, - wird es wieder auf die Spitze springen. Okay, wir können auch diese Box drei hier in den Mix bringen, indem wir diesen auf einen Z-Index von drei setzen. - Also setzen wir dich auch ein. - Der Index drei. - Und wir legen hier die Hintergrundfarbe fest. - Zwei Fuchsia. - Und wir setzen das auf Top Negative 100 links. - 100, um sie zu überlappen. - Da, - da gehen wir. - So können Sie dort sehen, dass sich der Index einer höheren Zahl überlappt und er nach vorne zieht und - der Index der unteren Zahl hinter sich geht, - okay? 48. Sprite: - als nächstes - lassen Sie uns über Image-Sprites sprechen. - Jetzt ist ein Sprite im Wesentlichen, wenn Sie mehrere Bilder nehmen und Sie sie zusammen sandwich, - Sie kacheln sie zusammen zu einem einzigen Bild und die Anzüge zum Zweck der Beschleunigung Ihrer - Ladezeit im Browser. - Es ist effizienter, wenn wir ein einzelnes Bild laden und es dann einfach neu positionieren, als wenn wir zwischen mehreren Bildern wechseln . - Also, - zum Beispiel, - lassen Sie uns sagen, dass Sie eine Navigation haben, die auf Ihrer Website so aussieht. - Und reden wir einfach über diesen Home-Button hier. - Nehmen wir an, Sie haben ein Element, das auf Ley so groß wie dieses Haus ist. - Aber so, - zum Beispiel - wenn dieses ganze Sprite waren, - sagen wir, - hypothetisch, - 60 Pixel hoch, - sagen wir, wir schaffen ein Element, das nur halb so 30 Pixel hoch ist, - so können Sie Onley sehen, dass dieser große Teil der Schaltfläche sichtbar ist. - Denken Sie daran, - wenn wir ein Hintergrundbild in ein Element einfügen, - können wir nur so viel von diesem Hintergrundbild sehen, wie auch in dieses Element passt. - Also das Element, das wahrscheinlich ein Link oder so etwas ist, - Theo Element, - wird auf ley die Größe des grauen Home-Buttons hier sein. - Okay, - Nun, - wenn der Benutzer über schwebt, - wollen wir dieses Bild neu positionieren, um das Hintergrundbild nach oben zu ziehen, - wodurch der orangefarbene Teil und dem Benutzer offenbart wird. - Es sieht so aus, als würde dieser Knopf orange leuchtet, aber wirklich sehr, - sehr schnell, - schneller als dort. - Ich kann sehen, dass der Browser tatsächlich das Hintergrundbild neu positioniert, indem er es hochzieht. - Und das ist effizienter, als den Browser zu bitten, ein separates Bild zu finden und - geladen. - Und der Grund, warum ist, wenn die Seite zum ersten Mal geladen wird, - es lädt tatsächlich dieses ganze Bild auf einmal. - Und dann, wenn der Benutzer über schwebt, - es muss nicht gehen und das andere Bild finden und wieder geladen. - Es ist nur eine Neupositionierung. - Okay, - so Sprites können zwei Zustände für ein einzelnes Symbol enthalten, - oder sie können mehrere Zustände enthalten, - zum Beispiel - für verschiedene Menüelemente oder kompliziertere Benutzeroberflächen. - Und der Hauptvorteil gibt es eine schnellere Ladezeit, - so laden Sie alle Bilder am Anfang der Seite, - und dann gibt es kein Warten, wenn der Benutzer interagiert und mit der Maus über. - Dies ist ein Beispiel für ein wirklich einfaches Zwei-Zustand-Symbol, das Ihnen einen kleinen Dropdown-Pfeil zeigt, - so können Sie sich vorstellen, dass das Element, in dem es sich befindet, nur so breit und hoch ist, ist die Hälfte - dieses Bildes. - Im Grunde kannst du das. - Du siehst nur diese obere Hälfte. - Es ist wie ein Fenster, das nur in die obere Hälfte dieses Hintergrundbildes schaut, das den schwarzen Dropdown-Pfeil enthält . - Und dann, wenn der Benutzer den Mauszeiger über, - verwenden wir einen CSS-Befehl, um die Hintergrundposition zu ändern. - Negativ, - jedoch viele Pixel hoch. - Das ist richtig. - Also, wenn das 60 Pixel hoch ist, werden wir sagen, - Bewegen Sie das nach oben. - Negativ 30 Pixel, so dass dieser weiße Drop-Down-Pfeil jetzt in der Position oder zeigt - wo der schwarze Pfeil war. - Dies ist der Code für eine CSS helle Roll over, so dass Sie sehen können, ob wir dies mit einem Link tun - wird den Link gesetzt Block anzuzeigen. - Auf diese Weise kann es eine Breite und Höhe akzeptieren. - Und dann haben wir mit dem Hintergrundbild verknüpft, das das gesamte Sprite-Bild ist, das mehrere Zustände in einem Bild verschachtelt hat. - Und dann, wenn wir den Mauszeiger über, - können wir den CSS Pseudo-Klassen-Selektor Hover verwenden, - der den Hover ermöglicht, dass dieser Stil ausgelöst wird, wenn der Benutzer den Mauszeiger über und die einzige - Sache, die wir hier ändern, ist die Hintergrundposition, - das das Hintergrundbild ändert, um sich neu zu positionieren. - Also sind wir wirklich so, als würden wir das Hintergrundbild innerhalb des Elements schieben und einen anderen Teil des Bildes enthüllen, der zuvor verborgen war. - Die Hintergrundposition Eigenschaft akzeptiert zwei Werte die horizontale Positionierung und die - vertikale Positionierung. - Also ist die horizontale Positionierung hier auf Null gesetzt. - Also bewegen wir das Bild nicht horizontal. - Aber hier haben sie beschlossen, die vertikale Position auf negative 30 Pixel zu setzen, - was das Hintergrundbild 30 Pixel nach oben bewegt. - Okay, - also gehen wir weiter und werfen einen Blick auf einige dieser Techniken, die wir gelernt haben und anwenden - sie innerhalb der Übung, - was unsere kontinuierliche Übung ist, die wir auf der Z H W Shoes Website gearbeitet haben. 49. Styling: - Ich komme zurück. - Dies ist Übung 3.2 Positionierung und Sprites. - In dieser Übung, - werden wir etwas mehr Stil in der Haupt-Navigationsleiste am oberen Rand der Seite hinzufügen -. - Und wir werden es stylen, so dass jede Art von Link wie eine Schaltfläche aussieht, wenn wir Mauszeiger darüber bewegen, als ob wir auf eine Schaltfläche drücken und wir werden auch eine Social Media - Leiste auf der rechten Seite des Bildschirms und die sowohl die Navigation als auch die soziale Bar. - Wir werden etwas Positionierung auf sie anwenden, damit sie bleiben. - Sie bleiben an Ort und Stelle, auch wenn der Browser scrollt von was? - Ich hatte den Startcode nicht heruntergeladen und Sie können sehen, dass ich ihn hier in erhabenem Text heraufgebracht habe - und die beiden Hauptdateien, mit denen wir hier arbeiten müssen, sind die Indexseite und die Stil-Punkt-CSS-Seite . - Also das erste, was wir tun werden, ist, dass wir hier nach unten zur Kopfzeile scrollen und sich erinnern können - in der Kopfzeile haben wir das Logo-Panel, - aber wir haben auch diesen Knave-Bar und wir wollen anfangen, diesen Knave-Bar zu stylen - das hat mit der Idee der knave Bar, eine körnige Textur zu haben, die über den Bildschirm wiederholt. - Und dann werden wir auch diese Box namens Knave den fünfsemantischen HTML-Container stylen - hier Nath genannt. - Und dann werden wir auch jeden dieser einzelnen Links hier stylen. - Also lassen Sie uns voran gehen und springen über die Style-Punkt-CSS-Seite und wir können nach unten scrollen. - Und ich habe hier einen Kommentar erstellt. - Sie können online 1 39 schwächen sehen. - Beginnen Sie, etwas Code zu schreiben, um die Knave-Bar zu stylen. - Also das erste, was ich tun möchte, ist, dass ich dieses DIV mit der Idee der Knave-Bar auswählen - selbst, möchte - selbst,- und ich möchte jetzt ein Hintergrundbild hinzufügen. - Zuvor haben wir uns die Verwendung von CSS drei strahlend angesehen, um ein Fade von einer Farbe zur anderen zu machen, - und dieses Mal werde ich Ihnen zeigen, wie eine ältere Strategie oder eine Art wie ein Vermächtnis - Technik, um ein Grady int erscheinen zu lassen. - Und das beinhaltet, die Zutat tatsächlich so zu erstellen, wie sie aussieht, - eine kleine Bildscheibe, - und dann können Sie dieses Bild horizontal wiederholen. - Also, - eigentlich, - werfen wir einen Blick auf das Bild hier wirklich schnell. - Ich gehe einfach voran und bringe es hoch. - Das heißt Header Fade und vielleicht ein bisschen schwer zu sagen. - Alexis ist so schmal, aber das ist irgendwie wie eine hellgraue Farbe hier verblasst von einer Farbe groß zur anderen, - und es wird ein wenig dunkler hier unten. - Es wird also die Grafik sein, die wir benutzt haben. - Und wir wiederholen diesen kleinen Finn-Sliver einer Grafik horizontal. - Da dies nur ein kleiner kleiner Splitter der Grafik ist, - ein kleines winziges Bild hier, - dieses dieses Bild Augen gehen sehr schnell zu laden. - Es ist eigentlich eine sehr kleine Dateigröße auf. Und dann, indem wir es horizontal wiederholen, werden wir es über die Seite fließen lassen. Und so können wir eine wirklich kleine Dateigröße wie vier K haben, und das können wir auf einem großen Teil des Bildschirms verwenden, und es wird immer noch sehr schnell geladen. Und so können wir eine wirklich kleine Dateigröße wie vier K haben, und das können wir auf einem großen Teil des Bildschirms verwenden, Also, bevor wir die Zutaten, die wir kennen, oft benutzen wir ein Bild, in dem der Grady drin war. - Also gehen wir weiter und sagen, du bist l und zeigst auf Bilder Ordner und wir werden das benutzen, das heißt Header Dash Fade Dot Jeff. - Und wir werden dem sagen, dass er sich nur horizontal so wiederholen soll. - Wiederholen Sie X. - Okay, wir fügen hier auch eine Grenze unten hinzu. - Und vorher haben wir uns die CSS-Kurzschrift-Grenze angesehen, - die alle Seiten betrifft. - Aber wir konnten auch Grenzstrich, - Boden, - Grenze, -Bindestrich, - linke Grenze, - Bindestrich, - oberstes Viertel sagen - Boden, - Grenze, - Bindestrich, - linke Grenze, - Bindestrich, . - Das ist richtig. - Also in diesem Fall, - wir werden einen Pixel-Solid setzen und eine mittelgraue Farbe wie diese verwenden, - kommen zu ein paar mehr Stile hier. - Also möchten wir auch eine Grenze zu der Knapve Box selbst hinzufügen, damit wir voran gehen können und speziell - zielen Sie den Nab, der sich innerhalb der Knarve Bar befindet, indem Sie einen Nachfolgeselektor verwenden. - Also sagen wir, - Hey, - Browser gehen ein Element zu finden, das eine einzigartige Vorstellung von nab unsere gehen in sie und wählen - dass das html fünf semantische Element genannt knave. - Und dieser hier sagen wir nur, dass er noch einen Grenzstrich übrig hat. - Ein Pixel, - festes Pfund. - Siehst du, siehst du. - Siehst du so. - Okay, cool. In diesem Kerl haben wir die Links, die wir stylen wollen, also fange ich an, diese Links hier zu stylenund werden wirklich spezifisch sein. In diesem Kerl haben wir die Links, die wir stylen wollen, also fange ich an, diese Links hier zu stylen - Wieder, - mit einem Nachkommen Selektor wird sagen, - Hey, - Browser, - gehen und etwas finden Sie wissen, - ein Element mit einer einzigartigen Idee von knave bar. - Gehen Sie hinein und finden Sie ein Element namens knave und gehen Sie in dieses Element mit Stil, - alle Links darin. - Also dies nur Stile Links innerhalb von Nab, die innerhalb der Knave Bar ist. - Da ist es also ziemlich spezifisch. - Also für diese Links, - wir wollen sie so einstellen, dass sie im Strichblock angezeigt werden, - und auf diese Weise werden sie in der Lage sein, es mit zu akzeptieren. - Und was wir tun wollen, ist, dass wir das so einrichten wollen, dass alle fünf Links gleich sind - Abstand. - Und Sie erinnern sich, dass dieser Knave Bar hier, - die tat mit der Idee von Nab unser ist nur über den gesamten Bildschirm 100%. - Und dann haben wir mit der Klasse Rapper hier gemacht, - und dieser Typ hat eine feste Breite von 960 Pixeln. - Und dann drinnen haben wir diesen Kerl namens Knave. - Also, jetzt hat es keinen Witz angegeben, - also dehnt es sich nur 100%, bis es in den Rand des Rappers läuft, - das ist 9 60 Also habe ich im Grunde diese fünf Links hier zum Verkauf, - Katalog, - Preisgestaltung und Kontakt. Und ich möchte, dass diese eine gleiche Menge an Platz in Ihrem Also, wenn ich das 100% von - Zimmer, das ich in nie zur Verfügung habe und ich durch fünf geteilt habe, - bekomme ich 20%. - Also kann ich diesen Kerl so einstellen, dass er eine Breite von 20% hat und dafür sorgt, dass dies keine - Marge um ihn herum wird Marge Null sagen, - und wir werden etwas Polsterung hinzufügen. - Hier ist gut, - ich will wirklich nur etwas Polsterung oben und unten. - Also werde ich 22 Pixel klopfen oben und unten und Null auf der linken und rechten . - Verwenden Sie Text, - transformieren und machen Sie den gesamten Text automatisch transformiert nur die Großbuchstaben, - und wir setzen die Farbe des Textes auf schwarz, - okay? - Und können Sie auch den Text auf eine Zeile in der Mitte in Beziehung zu diesen Feldern setzen. - Also sagen wir Text ausrichten, zentrieren. Als Nächstes setzen wir nur eine Grenze auf die rechte Seite jedes dieser Links, und wir werden es auf ein Pixel-Solid setzen. - Si, - si, - si. - Und wir wollen den Untergrund von diesen Links entfernen. - Also werde ich die Textdekoration auf keine setzen. - Und wir werden auch die Schriftart einstellen. - Sie verwenden die CSS-Kurzschrift-Eigenschaft. - Und ich werde den Fonds auf 20 Pixel setzen und wir benutzen, - äh, - mal sehen. - Wir benutzen Handelseimer so. - Ich hatte da extra Zitate. - Du musst einen Satz loswerden. - Da gehen wir. - Und wir werden sagen, ein za Backup wird sagen, - Ariel, - Sand, - Sarah so. - Okay, also gehen wir weiter und speichern das. - Werfen wir einen Blick auf diesen Kerl im Browser, damit wir zurückkommen und uns auffrischen. - Cool. - Also naff Bar hat eine Fade namens Header Fade Dodge. - Wenn das wiederholt 100% des Bildschirms, weil sie mit der Idee von Navid, - Bar hat keinen Witz angegeben, - und es ist ein Block Ebene Elemente wie gehen 100% des Bildschirms. - Der Rapper hier ist 960 Pixel. - Also dieser Typ zentriert sich genau hier, um die Breite dieses Rappers in diesem Rapper anzupassen - erscheinen, so dass diese alle perfekt ausgerichtet sind. - Jetzt ist Knave in der Wrapper. - Und ich gab eine linke Grenze von Grau auf naff. - Also diese kleine Linie hier entsteht, indem man einen Randstrich hinterlässt einen Naff, - und dann hat jeder Link einen ah, - Grenzstrich. - Richtig. - Das gibt mir die Grenze hier, - über hier zum Verkauf hier im Katalog, - hier zur Preisgestaltung hier auf Kontakt, - was uns irgendwie wie eine kleine Trennung gibt, - was sie ein bisschen mehr wie Knöpfe aussehen lässt. - Sie können die Textdekoration Großbuchstaben und die Schrift Styling dort sehen. - Okay, - äh, mal sehen. - Das ist ziemlich gut. - Mal sehen, - wir wollen auch in der Lage sein, den Benutzer wissen zu lassen, welche bestimmte Seite war, so dass, wenn - sie auf die Seite klicken, - dieser Link hat ah anderen Stil, so dass wir sehen können, dass das die Seite ist, die wir - ist auf gelandet. - Also gehen wir zurück zum CSS hier, - und lassen Sie uns einen bestimmten Stil dafür erstellen. - Ich werde voran gehen und sagen „Love Bar Space“ einen DOT ausgewählt. - Also dies wird nur Links auswählen, die passiert sind, - haben eine Klasse ausgewählt, wenn sie innerhalb der Knave-Bar sind. Und ich werde diesem Kerl hier eine Hintergrundfarbe geben, wir werden Hintergrundschwarz speichern, also wird es eine dunklere Hintergrundfarbe haben, und ich werde die Vordergrundfarbe hier auf Weiß setzen, wir werden Hintergrundschwarz speichern, also wird es eine dunklere Hintergrundfarbe haben, und ich werde die Vordergrundfarbe hier auf Weiß setzen, und ich werde das anwenden gehen. Ich gehe rein und wende diese Klasse auf jede Seite an, und dann gehen wir zurück zur Indexpunkt-HTML-Seite und auf der Indexseite. - Dies ist das ist wirklich die über Seite, also innerhalb dieses Links hier, - Ich möchte eine Klasse in Ordnung von ausgewählt nur zu diesem Link hinzufügen, - und wir können diesen Code hier Klasse ausgewählt kopieren, - und ich werde dies zu den anderen Seiten hinzufügen. - Also gehe ich in den Katalog und runter zur Navigation, - und ich finde den Link rund um den Katalog, - der hier und diesen ist. - Ich gebe ihm eine Klasse ausgewählter. - Also auf dieser Seite, - Katalog-Link ausgewählt ist und wir gehen auf die Kontaktseite auf alle scrollen nach unten und wir gehen - zum Kontaktlink, - das ist genau hier und gut in dieser Klasse ausgewählt dort. - Wir gehen auf den Preis einer Seite, - und hier ist das Angebot für die Preisgestaltung, - und ich werde in diesen Link gehen und die Klasse der ausgewählten dort drinnen gut durchlaufen. - Und schließlich, - wir können zum Verkauf gehen und wir gehen auf den Link zum Verkauf hier und ich werde in dieser Klasse einfügen - ausgewählt dort können wir speichern, - und dann kommen wir zum Browser und wir werden aktualisieren. - Cool. - So können Sie dort sehen, dass dieser Link die Klasse von ausgewählt hat. - Wenn ich jetzt auf die Verkaufsseite klicke, - diese hat die schwarze Klasse ausgewählt. - Katalog Hat die dort ausgewählten Klassen Preisgestaltung der dort ausgewählten Klassen und Kontakt - Klassen ausgewählt. - So konnten Sie sehen, dass jeder Link es fast irgendwie wie eine Registerkarte aussieht - Struktur wie diese Schaltfläche wird für die bestimmte Seite gedrückt. - Okay, cool. - Also gehen wir weiter und gehen zurück auf die Style-Punkt-CSS-Seite hier, - und wir möchten hier einen Hover-Zustand hinzufügen, - also sagen wir, Labor ist jetzt ein Doppelpunkt schweben. - Und hier werden wir ein paar Dinge zu ändern ging, - Teoh ändern Sie die Farbe des Textes auf weiß. - Und wir werden auch die Hintergrundfarbe ändern, - Und für diesen, - ich werde einfach die CSS drei Grady int verwenden. - Sie sind also gehen wir in den Browser und gehen finden unseren Freund die Farbe Zilla, - Grady und Editor. - Und ich habe hier schon einen unangemessenen Grady erschaffen. - Es beginnt nur als schwarze Farbe an den Rändern und verblasst zu einem helleren Grau in der Mitte. - Und ich werde voran gehen und sagen, - Kopieren und gut, das ist hier drin. - Das sind Rio, und wir geben das Geld, und wir werden zum Browser zurückkehren und aktualisieren. - Okay, cool. - Und du siehst, wenn ich da drüben schwebe. - Dann leuchten jetzt diese Links nur auf dem Hover-Zustand, der den Pseudo-Klasse - Selektor verwendet . - Ein Doppelpunkt schwebt rechts. Und dann, wenn wir die Seiten wechseln, bekommen wir die dunklere Farbe der ausgewählten Klasse so. - Cool. - Ok, Moment haben wir die einfach. - Diese Elemente haben hier nur eine normale Positionierung. - Und was ich getan habe, ist, dass ich bereits genug Polsterung über dem Logo hier hinzugefügt habe, dass wir - tatsächlich passen diese Navigationsleiste knave bar über dem Logo positioniert und fixiert werden - Platz. - Und so, - wenn wir die Seite runter scrollen, - wird diese Navigationsleiste dort bleiben. - Und anfangs, - wenn Sie die Seite zum ersten Mal laden, - sehen Sie das Logo unter der Knave-Leiste, - und dann, wenn Sie nach unten scrollen, - wird es beginnen, es zu vertuschen. - Also springen wir zurück zum Code und wir gehen zurück zu unserem hier. - Also gehen wir weiter und fügen hier eine feste Position hinzu. - Jetzt hat das eine feste Positionierung. - Es sollte fixiert bleiben. - Selbst wenn das Browserfenster scrollt und wir ganz oben auf der Seite sein wollten, - jemand sagt Top Null links Null. - Es ist also ganz oben links auf der Seite. - Da wir diesen Kerl auf Position fixiert gesetzt haben, wird er tatsächlich zusammenbrechen. - Es ist mit, - obwohl nein mit angegeben wird. - Also, was wir wirklich tun sollten, ist, dass wir eine Breite von 100% für diese Navigationsleiste angeben - dort. - Und erinnern Sie sich, - unser Freund Z Index wird ihm erlauben, über anderen Dingen zu sein. - Also, wenn ich Z Index sage, sollte man über alles andere sein, - okay, - also lasst uns rausgehen und das speichern und zum Browser zurückkehren und sich das ansehen. - Diese jetzt Bar wird hier hochspringen, wenn ich so eine Seitenaktualisierung mache. - Also, das ist cool. - Also haben wir gerade den Nab zu unserem Start gemacht und weil es auf Position fixiert ist, wenn ich scrolle - dass NAB immer da bleibt. Also, wenn ich hier runter zu diesem Video komme, und ich bin wie, Oh, das ist ein cooles Video, aber ich möchte auf eine andere Seite gehen. - Ich muss nicht ganz nach oben scrollen. - Ich könnte immer Zugang zu dieser Knave-Bar haben. - Das ist also eine Verwendung für die Position fixiert. - Okay, das sieht ziemlich glatt aus. - Ich mag es. - Was denkt ihr? 50. Stylen der the: - Als nächstes bauen wir eine Social-Media-Leiste für die Seite hier drüben auf der rechten Seite, - und wir werden eine spezielle Positionierung verwenden, damit auch fixiert bleibt. - Und wir werden auch ein echtes glattes Sprite-Bild verwenden, so dass, wenn wir den Mauszeiger über, das Bild ändern wird. - Zuerst, - gehen wir voran und gehen in den Fotoshop und schauen wir uns an, wie dieses Sprite-Bild aussieht - wie. Also habe ich tatsächlich diese sozialen Symbole geschnappt, ... äh, - PSD aus dem Internet und Sie können hier sehen, wie die meisten der beliebten Social Networking-Symbole hier, und wir werden einfach die ersten Top Drei benutzen. - Aber je nachdem, wie Sie das positionieren, könnten Sie möglicherweise andere verwenden, - wie Video und YouTube oder Flimmern usw. - Also werden wir es benutzen. - Facebook wird Twitter hier und das Google Plus-Symbol verwenden, nur weil sie die Top sind - drei. - Ich gehe weiter und schalte meine Guides so ein, - und du kannst sehen, dass alle 40 Pixel ein anderes Symbol ist, also das weiße oder graue Skala Facebook-Symbol beginnt bei Null Pixel und endet bei 40 Pixeln, - und dann haben wir eine Farbe Version dieses Facebook-Symbols, das bei 40 Pixeln beginnt und bei - 80 Pixel endet. - Und dann beginnt das schwarze Facebook-Symbol bei 80 Pixeln und endet bei 120 Pixeln . - Und dann, - wenn wir ein Twitter-Symbol verwenden wollten - müssen wir es weiter positionieren. - Also müssten wir negativ 40 sagen, um dieses Bild 40 Pixel hochzuziehen, damit wir das kleine Vögelchen hier für Twitter benutzen können . - Also werden wir das so einrichten, dass diese Symbole oder weiß und dann, wenn wir darüber schweben, werden sie Farbe bekommen, was die zweite Spalte hier ist. - Und wenn wir die Maustaste drücken oder wenn wir auf den aktiven Zustand klicken, wird es so schwarz werden. - Okay, also gehen wir weiter und gehen zurück zu erhabenem Text. - Das erste, was wir tun wollen, ist auf die Index-Seite zu gehen und Sie können hier sehen - dass ganz oben im Körper, - ich habe hier einen Kommentar erstellt, - und hier werde ich meine Social Media Bar platzieren. - Also werde ich hier reingehen und ein Div erschaffen, und ich werde ihm eine Vorstellung von Social geben. - Wir werden hier reingehen und eine Verbindung herstellen. - Und dieser erste Link wird für Facebook sein, - und wir werden voran gehen und sagen, dass er auf den Earl unserer Facebook-Seite zeigen soll. , Ich werde nur einen Platzhalter setzen und du könntest später wieder hier reingehen und das in den eigentlichen Earl, die HTTP-Adresse deiner Facebook-Seite ändern . - Und wir werden diese Typen auf Blank setzen, damit sie sich in einem neuen Browser-Tab öffnen. - Wollen wir sehen, - wir konnten ihm auch einen Titel geben, der sich erinnern, - wird Titel wirken. Wenn Sie also den Mauszeiger über , den Link bewegen, wird eine kleine Beschriftung auftauchen, damit Sie sagen können, - wie, - besuchen Sie meine Facebook-Seite oder so etwas Sie könnten darin schreiben. - Und eine Sache, die wirklich wichtig ist, dass wir sicherstellen wollen, dass sie jedem eine einzigartige Klasse geben . - Und der Grund, warum wir jedem von ihnen einen eindeutigen Klassennamen geben wollen, ist so, dass für jeden - Link, - wir können den Klassennamen verwenden, um dieses Sprite-Bild neu zu positionieren, um es nach oben oder unten zu schieben, so dass - wir sehen Theater Pro PRI I-Symbol innerhalb von diesem Link. - Jemand gibt dem 1. 1 eine Klasse F Buch so, und ich werde den Code kopieren und wir fügen ihn einfach zweimal hier ein. - Ah, - der zweite Link wird für Twitter sein, also gebe ich ihm einfach eine Klasse von Zweien. - Wir werden nur ein wenig kurze Klassennamen wie das verwenden und für den Titel wird Twitter sagen und - für den letzten wird G plus als Klassenname sagen und wird den Titel auf Google setzen. - Plus so. - Und wir ändern besser den Text hier auch innerhalb des Links. - Nun, - Sie fragen sich vielleicht, warum wir Text in diese Links einfügen, wenn wir gerade gehen - sehen Sie hier ein Symbol, das aus unserem Sprite Bild besteht. - Der Grund, warum ist, dass es eine gute Praxis für Suchmaschinen ist, tatsächlich den Namen zu schreiben - innerhalb des Links hier so. - Und so kann die Suchmaschine das lesen und sehen, wo dieser spezielle Link ist - zu gehen. - Wir werden einige CSS verwenden, um diesen Text zu verstecken, - und so sehen unsere Benutzer nur das Sprite Icon. - Okay, - damit wir das auf dieser Seite speichern können, - und ich habe schon diesen Code auf allen anderen Seiten für Sie hinzugefügt, - also können wir einfach zurück zur Style-Punkt-CSS-Seite springen. Und wenn wir hier nach unten zu Zeile 14 scrollen, sehen Sie, dass ich einen Kommentar geschrieben habe, um zu bemerken, dass dieser Abschnitt hier für die Sozialleiste sein wird. - Das erste, was wir tun wollen, ist, dass wir diese Box mit der Idee von Social stylen wollen. - Und wir werden das Ding auch aufstellen. - Position fixiert. - Und wir werden sagen, dass es zu den oberen 200 Pixeln von oben gehen soll, und wir geben es nur ein bisschen von der rechten Seite. - So ist es nicht richtig gegen das Browserfenster wird wie drei Pixel von rechts sagen. - Und denken Sie daran, dass jedes der Symbole ist nur 40 Pixel breit, - so können wir einfach sagen, 40 Pixel und wird sicherstellen, dass es eine höhere Z-Index-Zahlen zu geben, so dass - es oben wird sagen Z Index eins in Ordnung, - und dann lassen Sie uns innerhalb dieses und wir werden das Hintergrundbild für jeden dieser Links hinzufügen, also werde ich voran gehen und ein Punkt-f-Buch sagen, - okay. - Und dann sage ich einen Punkt Twit für das Twitter und einen Punkt g plus für den Google Plus-Link -. - Und ich benutze einen Compound-Selektor, weil ich tatsächlich einige Stile setzen werde, die alle gleich für diese Jungs. - Diese werden auf Block gesetzt, weil wir wollen, dass sie vertikal übereinander stapeln - auf dem anderen, - und wir werden sicherstellen, dass jeder dieser Links auf der Größe einer Nikon eso ist. - Denken Sie daran, - jeder von ihnen wird nur 40 Pixel wie diese sein, - also können wir das so einstellen, dass es ein mit 40 Pixeln und einer Höhe von 40 Pixeln hat. - Auch wenn die Hintergrundbilder viel größer, - werden wir nur in der Lage sein, 40 Pixel von 40 Pixel des Bildes dieses Hintergrunds zu sehen - Bild und um den Text zu verbergen. - Was wir tun können, ist, dass wir Textstrich in den Höhlen verwenden können, und wir können den Text in Schulden auf 100% setzen, was ihn tatsächlich schieben wird. 100% bedeutet, dass es 100% der Größe des Behälters eingerückt ist, in dem er sich befindet. - Also das ist, - Ah, - 40 Pixel breiter Behälter. - Also wird es tatsächlich den Text 40 Pixel außerhalb des Containers einrücken, - und was wir tun können, ist geschwächt, - dann setzen Sie den Überlauf auf versteckt, so dass wir nichts sehen, was außerhalb des Elements ist -. - Also ist dieser Texas in Denning außerhalb des Elements in Denning, und dann ist er dort unsichtbar. - Und wir werden auch den Leerraum hier einstellen, um Rap das zu wissen, und wir verlinken auf den Hintergrund. - Also jeder von ihnen wird tatsächlich das gleiche Sprite-Bild verwenden, - und wir werden sagen, Sie sind anders und wir werden auf Bilder Slash sozialen Bindestrich Symbole Punkt PNG und ich - wollen dies bis zu keiner Wiederholung einrichten. - Es gibt also nur eines dieser sozialen Icons Bilder in diesen Jungs. - Also jeder dieser F Buch twit und G plus haben jeweils die gleichen sozialen Symbole Bild innerhalb - sie. Okay, jetzt, für jede einzelne Klasse für jede einzelne Klassemuss ich dieses Bild anders positionieren. - Also, - zum Beispiel - für die F-Buch-Klasse, - wollen wir x an der Hintergrund-Strichposition 200, die Ah ist, - Null horizontal und Null vertikal wird es einfach im Grunde in die obere linke Ecke setzen. - Also denken Sie daran, - wir kommen zurück auf das Bild hier, - das wäre das Äquivalent von 00 ist die obere linke Ecke bedeutet, - was bedeutet, dass wir das Bild nicht verschieben. - Wenn wir jedoch den Mauszeiger über, - wollen wir, dass sich dieses Bild über 40 Pixel bewegt. - Also werden wir eine Hover-Klasse dafür erstellen, indem wir einen Punkt f Buch Doppelpunkt schweben. Und für diesen hier wir die Hintergrundeposition ändern, um 40 Pixel horizontal und null Pixel vertikal zu sein . - Also, was das tun wird, ist, es wird es horizontal bewegen, - negative 40 Pixel. - Was bedeutet, es wird zu diesem linken Rand gehen und daran ziehen, so dass es dieses gefärbte F in die Position schiebt , wo dieses weiße F früher war. - Und weil wir es nicht senkrecht bewegen. - Wir können den Kerl einfach auf Null setzen, und sie sollten dort einen Semikolon haben. - Vergessen wir nicht, dass, - und wir haben auch einen aktiven Zustand, - was der Zustand ist, wenn wir die Maustaste gedrückt haben, - oder wenn Sie die Maustaste gedrückt halten. - Und für diesen, - können wir die Hintergrundposition ändern, um sich noch weiter zu bewegen. - Äh, - in diesem Fall wollen wir uns bewegen, - nicht nur 40 Pixel, - aber wir wollen über 80 Pixel bewegen, um auf den schwarzen Hintergrund F. - Also sagen wir negativ. - 80 Pixel Null so. - Okay, - Das nächste ist das Twitter-Symbol, das eine Klasse von Twittern hat, wie so. - Und dafür, - wollen wir auch die Hintergrundposition einstellen. - So kopieren Sie einfach und fügen Sie das dort Jetzt für diesen ein, - wir wollen es nach unten verschieben. - Also zuerst, - am Anfang, - wollen wir diesen weißen sehen, - damit wir ihn nicht horizontal bewegen müssen. - Es wird Aber um von dieser oberen Ecke hier unten zu bekommen, um die kleine Vogel-Symbol zu sehen - stattdessen, - müssen wir negative sagen 40 Pixel vertikal. - Also diese erste Zahlen horizontal in den zweiten Zahlen vertikal. - Also hier wollen wir negative 40 Pixel sagen, um es vertikal zu bewegen. - Und wir können diese anderen hier kopieren und einfügen, nur um Zeit zu sparen. - Und wir können zahlen, setzen Sie sich hier und ändern Sie einfach diese Klasse zu zweichen, so und so. - Und hier ist der Unterschied, dass wir 40 Pixel für jede dieser vertikalen Positionen hier nach unten bewegen würden. - Aber das gleiche für diesen hier, da wir uns immer noch horizontal bewegen. - 40 Pixel auf dem Hover und aktiv oder bewegt sich über 80. - Weil denken Sie daran, diese Luft gestapelt, so dass dies der Standardzustand ist. - Wir bewegen uns immer horizontal 40 für den Hover-Zustand und bewegen sich über 80 horizontal für - den aktiven Zustand. - Das Einzige, was sich für jeden von ihnen ändern wird, ist der vertikale Wert. - Nun, - wenn je nachdem, welche Klasse verwendet wurde, - Also zum Beispiel, - konnte ich diesen Code hier wirklich einfach kopieren und einfügen, - und ich könnte ihn nur ein kleines bisschen für das Google Plus Icahn, - das hat hier eine Klasse von G plus auch Sie einen netten kleinen Trick, den Sie mit erhabenem Text tun können - wenn Sie hier mehrere Dinge gleichzeitig ändern möchten. - Zum Beispiel, - wenn ich diese Klasse ändern möchte, - benennen Sie diesen Klassennamen gleichzeitig in diesem Klassennamen. - Was Sie tun können, ist, dass Sie tatsächlich mit der Maus klicken können, - wissen Sie, - klicken Sie auf den Cursor vor diesem Text. - Und wenn Sie auf Mac sind, - Sie können die Befehlstaste gedrückt halten und immer wieder vor jedem dieser drei - Klassennamen klicken . - Wenn Sie auf Windows sind, - Sie könnten halten, um zu kontrollieren und klicken Sie nach dem Tee für jeden von denen, - und Sie können sehen, dass ich tatsächlich drei blinkende Cursor. - Nun lassen Sie mich das noch einmal machen, also klicke ich hier auf den Cursor. - Und wenn Sie den Befehl auf Mac oder die Steuerung unter Windows halten und erneut ein zweites Mal im - dritten Mal hier klicken , - erhalten Sie tatsächlich drei Cursor. - Und jetzt, - wenn Sie löschen es erlaubt Ihnen, diese drei Zeilen gleichzeitig zu schreiben oder zu bearbeiten, so können wir - sagen, wie, - G plus wie das Oops bekam ein zusätzliches P ihr G plus so. - Und dann ist das Einzige, was sich hier ändert, die Tatsache, dass wir 80 Pixel runter bewegen - also könnte ich hier und hier klicken, - und ich kann gleichzeitig alle drei dieser 2 80 Pixel so ändern. - Also geh weiter und speichere und lass uns zum Browser zurückkehren und lass uns eine Aktualisierung machen. - Cool. - Also tauchten diese Typen auf und ich habe etwas Mathematik gemacht, damit sie auftauchten, - äh, - 200 Pixel unten, damit sie genau mit dem oberen Rand hier des ersten Abschnitts übereinstimmen können. - Und ich habe das berechnet, indem ich die Pixelhöhe von diesem plus die 30 Pixel von - Abstand oder Polsterung innerhalb, dass das Holz hier getan hat. - Und Sie können die Wirkung der Sprite-Arbeit sehen. - Weil, wenn wir den Mauszeiger über, - sehen wir die Farbe für Facebook. - Wir sehen die Farbe für Twitter, - und wir sehen die Farbe für Google. - Plus so. - Nun, - wenn wir klicken und halten Sie die Maustaste gedrückt, - werden wir sehen, dass es für jeden von ihnen schwarz wird. - Also haben wir den Schwebezustand und den aktiven Staat. - In Ordnung. - Sehr cool. - Ok, - großartig. - Die Seiten sehen ziemlich glatt aus. - Wir können es auf all den verschiedenen Seiten dort überprüfen, - stellen Sie sicher, dass die Navigationen korrekt funktionieren und stellen Sie sicher, dass diese sozialen Elemente erscheinen -. - Und das sieht ziemlich gut aus. - Also hier auf der Kontaktseite, - Ich habe ein kleines Problem mit dem ich Rahmen herausragen. - Also gehe ich zurück zum erhabenen Text und lass uns zum CSS-Code gehen, für den ich rahmen - da - der hier online sein sollte. - Willst du warten? - Also gehen wir zum I-Frame hier, und wir werden den HTML mit etwas CSS mit Befehl überschreiben. - Und wir werden nur sagen, dass es 100% sein soll. - Also wird es tatsächlich 100% sein, bis es in den übergeordneten Container läuft, - was der kleine Abschnitt für die Spalte ist, in der es sich befindet. - Und das sollte das beheben. - Lassen Sie uns das einen Test machen. - Da gehen wir. - Jetzt verhält sich der Ich-Rahmen. - Es bleibt in der Säule. - Als nächstes möchten Sie zur Code-Herausforderung übergehen, wo Sie hinzufügen werden - einige spezielle Positionierung und einige Sprites in Ihre eigene Seite. 51. Responsive Layout: - Hi. - Willkommen zurück. - Dies ist Folien 4.1 responsiv aus Techniken. - In den vergangenen Übungen haben wir gelernt, einen echten Griff beim Aufbau eines Website-Layouts zu bekommen. - Und jetzt wollen wir uns darauf konzentrieren, all die Dinge, die wir gelernt haben, zu nehmen und es auf ein neues Modell anzuwenden, in dem wir unser Layout basierend auf der Größe des Geräts ändern können. - Er sieht es, um es zu tun. - Wir werden CSS drei Medienabfragen als eine Technik untersuchen, um unseren CSS-Code zu ändern, - abhängig von der Größe des Geräts. - Und das wird so unser Layout in unseren Inhalten ändern, so dass es in Sicht passt - angenehm auf all diese Geräte unterschiedlicher Größe, um eine reibungslosere Betrachtung zu schaffen - Erfahrungen möglich. - Wir werden auch Techniken wie erfüllt diskutieren, - ein Gerät mit dem Tribut und auch einige JavaScript-Fixes, die CSS drei erlauben werden - Medienabfragen, die auf älteren Geräten arbeiten sowie einige JavaScript-Fixes erkunden, die - ermöglicht eine reibungslose Betrachtung der Erfahrung Auch wenn eine Geräteausrichtung von Hoch- und Zehenlandschaftgeändert Hoch- und Zehenlandschaft , - zum Beispiel, - die heutigen Websites werden auf einer immer größeren Anzahl von Geräten mit jeweils ihren eigenen unterschiedlichen Bildschirmgrößen und Proportionen. - Und aus diesem Grund - verschiedene Strategien für den Umgang mit Layoutänderungen und Größenunterschieden - von der Geräte- bis zur Geräteerkennung. - Indem Sie die anfragenden Geräte überprüfen, - Header-Info ist eine übliche Möglichkeit, um zu sehen, was die Spezifikationen für ein bestimmtes Gerät sind und dann dienen - die entsprechenden Dateien zurück auf das Gerät. - So, - zum Beispiel, - eine Lösung ist es, separate Websites für mobile und Desktop zu bauen, - wie Twitter dot com versus mobile dot twitter dot com. - Eine andere Lösung besteht darin, eine einzelne Website zu erstellen und das Styling und Layout mit CSS zu ändern - Medienabfragen, - was die Technik ist, die wir lernen werden. - So können Sie sehen, dass einige Unternehmen wählen, ein Skript auf dem Backend zu verwenden. - Und wenn ein Gerät diese Seite anfordert, wenn es die HTTP-Anfrage an den Remoteserver sendet, - verwendet der Server diese Header-Informationen, um das Gerät zu erkennen, das die Datei anfordert, - und basierend darauf, - wird es tatsächlich zurückgeben verschiedene HTML-Dateien in verschiedenen CSS-Dateien. Das ist also, als würde man zwei verschiedene Websites bauen , für eine für Mobilgeräte und eine für Desktop-Computer und Tablets usw. Okay, das erfordert eigentlich mehr Arbeit, weil wir eigentlich zwei Standorte bauen . - Also haben wir die doppelte Menge an Code dort, - und deshalb mag ich diese letztere Lösung. - Und das ist die Lösung, die ich Ihnen beibringen werde, Jungs und die Lösungen zunehmend - an Popularität gewinnt als der Weg zur Lösung für die Bereitstellung einer reaktionsfähigen Website. - Damit Inhalte auf kleineren Geräten angezeigt werden, werden Änderungen an den Seiten vorgenommen. - Häufige Änderungen im Layout umfassen das Ausblenden von Inhalten oder das Verschieben von Inhalten. - Um die vorgegebenen Geräte verfügbaren Bildschirmbereich, - zum Beispiel, - Sie können die Wrapper oder Containerelemente nehmen und sie auf eine Flüssigkeit mit anstelle einer - festen Menge von Pixeln umschalten . - Und auf diese Weise, - wenn das Gerät mit ändert Ihre Elemente mit wird auch reagieren. - Andere andere Strategien umfassen das Festlegen der schwebenden Spalten auf keine schweben, - und mit dem 100%, um zu einer einzelnen Spaltenstruktur zu wechseln, im Gegensatz zu einer mehrspaltigen Struktur - Struktur, - Bilder, - Tabellen, - Form, - Eingänge und Video sind in der Regel auch auf flüssige Wits eingestellt. - Auf diese Weise wird der Inhalt nach unten skaliert, wenn der Gerätebildschirm abnimmt, - also ist es wichtig, dass Ihre Bilder und Tabellen und Formulare so eingerichtet werden, - und Sie können sich vorstellen, dass auf einem größeren Bildschirm - Ihre Bilder und Formen werden etwas größer aussehen. - Sie nehmen die volle Breite in Anspruch, - während das Gerät nach unten skaliert wird, werden diese Bilder auch in diesen Formularen nach unten skaliert, um in den verfügbaren Bildschirmbereich zu passen . - Es wird auch kommen, um Text und Linkgrößen zu ändern. - So, - zum Beispiel, - wenn ein Gerät kleiner wird, - müssen Sie bestimmte Steuern verkleinern, damit sie nicht in anderen Text läuft. - Sie können auch feststellen, dass Sie die Steuer größer machen müssen, da bestimmte Textgröße sehr lesbar auf einem Desktop-Computer sein könnte . - Aber wenn Sie zu einem Handheld-Gerät gehen, - wenn Sie das Handheld-Gerät in einem weiter entfernten Abstand halten, - zum Beispiel, - benötigen Sie möglicherweise, dass Ihr Haupt-Navigationstext etwas größer ist - zum Beispiel, - benötigen Sie möglicherweise, . - So Text wird wahrscheinlich nach oben oder unten skalieren, um eine komfortable Anzeige zu schaffen - Erfahrung auf den verschiedenen Größen Geräte. - Sehen wir uns das mal an. - Dieses Diagramm hier für eine Sekunde und stellen wir uns vor, dass dies eine Seite ist, die wir bauen, und wir werden uns vorstellen, dass dieses rosa Quadrat unser Logo repräsentiert. - Und lassen Sie uns sagen, - zum Beispiel, - dass dieses Gelbe Quadrat unsere Hauptnavigation repräsentiert. - Und diese Blackbox hier wird eine Sidebar sein, die einige Sub-Links enthält. - Und diese blauen Quadrate hier stellen die verschiedenen Abschnitte unserer Seite dar. - Also jeder hat ah bestimmte Art von Inhalt und es wahrscheinlich Absätze und Text und Dinge - so. - Okay, - das ist also das bevorzugte Layout, das dieser Designer für den Desktop erstellt hatte. - Aber was passiert, wenn wir auf einen kleineren Bildschirm skalieren, - zum Beispiel, - wenn wir diese Website stattdessen auf einem Tablet-Computer ansehen? - So hier können Sie ein paar Änderungen sehen, die laut gemacht wurden, um es besser lesbar zu machen - ist haben wir den Raum hier zwischen der Hauptnavigation und dem Logo verringert, um - die Breite dieses Gerätes unterzubringen. - Und auch, - es gibt wirklich keinen Platz mehr für die Sidebar hier auf der linken Seite, weil wir gerne den gesamten verfügbaren Platz für unsere Abschnittsinhalte nutzen möchten. Also, was sie hier getan haben, ist, dass sie die Seitenleiste von der Seite genommen haben, und sie haben beschlossen, das unter der Navigation nach oben zu bewegen. - Und dann hier haben wir, - ah, - wechseln Sie von einer dreisäuligen Struktur hier in eine Zwei-Säulenstruktur auf dem Tablet-Gerät -. - Und dann, - wenn wir auf ein noch kleineres Gerät wie ein iPhone skalieren, - zum Beispiel, - gibt es eine Notwendigkeit, zu einer einzelnen Spaltenstruktur zu wechseln , - und sie haben tatsächlich einige -Inhalt. - Die Seitenleisten wurden entweder mit den Sub-Links nach unten verschoben, - oder sie wurde vollständig ausgeblendet, - und Sie werden sehen, dass die Hauptnavigation hier , - die eine gelbe Box ist , - unter der -Logo. - Dies zeigt also alle Techniken, die in der kommenden Übung verwendet werden, um unser Layout zu ändern, wenn der verfügbare Bildschirmbereich abnimmt. - Und um dies zu tun, wie ich erwähnt habe, - werden wir eine neue Technik und CSS drei verwenden, - bekannt als Medienabfragen, - und das gibt CSS die Macht, den Browser die Breite des Geräts zu fragen. - Also, - basierend darauf, wie viele Pixel breit der Bildschirm von diesem Gerät ist, - es wird bestimmen, welcher CSS-Code verwendet werden soll. - Und es beginnt mit dem at Symbol hier, das wir bei Medien sagen, - und danach, - können wir eine Aussage schreiben, - und diese Aussage wird entweder wahr oder falsch bewerten. - Was diese Aussage sagt, ist Onley-Bildschirm, - was bedeutet, dass es nur wird, um dies zu bewerten oder dies auf speziell Bildschirm überprüfen - Geräte im Gegensatz zu Projektor oder Druckgeräten. - Und danach überprüfen wir die Breite des Gerätes. - Das ist also eine wahre oder falsche Sache. - Hier steht „Ah“ auf dem Bildschirm. - Wenn dies auf einem Projektor wäre, - würde dies als falsch auswerten und daher würde es diesen Code hier nicht verwenden. - Zusätzlich, - wenn die maximale Breite der Geräte größer als 768 Pixel, - wird diese Aussage zu false auswerten und somit wird es keinen der CSS-Code verwenden - geschrieben zwischen der öffnenden und schließenden geschweiften Klammer hier. - Nein. - Wenn die Breite des Geräts 768 Pixel oder kleiner als diese Aussage hier ist, - wird diese Medienabfrage auf true ausgewertet, - in diesem Fall wird es den Code innerhalb des Abschnitts verwenden, - wodurch die Schriftgröße der Links innerhalb des Navigation etwas kleiner wie ich - bereits erwähnt. - Um ein möglichst reibungsloses Betrachtungserlebnis zu erhalten, gibt es einige andere Techniken, die wir in unseren Code implementieren können, um dies zu tun. - Eines davon ist das Meta-Gerät mit Tag. - Hier können Sie sehen, dass ich ein Meta-Tag mit dem Namen Vieux Port habe, - und wir verwenden eine Anweisung hier im Inhalt, um zu verhindern, dass Geräte ein- oder auszoomen. - Und dies wird uns erlauben, stattdessen auf unsere Medienabfrage-Abfrage-Styling verlassen, um das Layout entsprechend zu ändern . - So die Hersteller von Geräten, die sie erkennen, dass sie die verfügbare Bildschirm-Spuck-Größe ist - tatsächlich viel kleiner als die meisten der Websites, die Menschen auf dem Gerät sehen werden. - Also eine Strategie, - vor allem auf Touchscreen-Geräten, - ist, zu verkleinern, so dass der gesamte Website-Inhalt kleiner wird. - So, - es passt innerhalb des Rahmens des Geräts, - und dann ist es an dem Benutzer, seine Finger zu verwenden oder zu berühren, um auf zwei verschiedene - Teile der Website zu zoomen . - Und das wollen wir verhindern. - Wir wollen nicht, dass es verkleinert wird, weil wir cleveres Medienabfrage-Styling schreiben werden um unsere Inhalte zu ändern Größe und Layout so zu ändern, dass es in den Verstand des - Gerätebildschirms passt , ohne dass Sie wieder aufnehmen müssen. - Also, um zu deaktivieren, - wieder aufnehmen, was wir tun, wir setzen dieses Meta-Tag mit dem Namen von Vieux Port und innen - Inhalt. - Hier stellen wir die Breite gleich der tatsächlichen Breite des Gerätes und durch Einstellen von anfänglichen - Skala toe 1.0 als das Gerät nicht sein wird, - um, - es wird nicht verkleinern, wenn die Website anfänglich lädt, - es wird die 1.0 ist die tatsächliche Pixelgröße der Website und durch Setzen der Mindestskala auf - 1.0 und maximale Skala auf 1,0, die tatsächlich das Zoomen deaktiviert, so dass der Benutzer nicht in der Lage ist , - wieder ein- oder auszuzoomen, - was uns erlaubt, auf unsere Medien zu verlassen Abfrage-Styling, um das Layout zu ändern. - Es gibt auch einige verschiedene JavaScript-Fixes, die helfen, das Seherlebnis zu machen - viel glatter. - Ähm, - so zumindest zum Zeitpunkt der Aufnahme, - es gibt einige Fehler mit verschiedenen Apple-Geräten wie iPhone um, - Zoomen aktivieren oder den Zoom ändern, wenn Sie von horizontal zu vertikal wechseln oder wenn Sie - Wechsel von Portrait Zehe Querformat. - Wenn Sie also eine Website auf Ihrem iPhone anzeigen und sie von vertikal nach horizontal neigen. - Die Gerätesoftware löst einen Zoom aus, also können wir das mit diesem JavaScript-Fix tatsächlich deaktivieren. - Zusätzlich, - es gibt auch eine Medienabfragen Fix für ältere Versionen von Internet Explorer, die nicht - Unterstützung von Medienabfragen. - Also lassen Sie uns weitergehen und zur nächsten Übung gehen und beginnen, diese Medien - Anfragen in unser fortgesetztes Übungsprojekt umzusetzen . 52. Einrichten von lokalem Responsives Testen: - Hi. - Willkommen zurück. - Dies ist Übung 4.1 Responsive Layout Um loszulegen, - Ich möchte Ihnen helfen, Jungs Ihren Computer für das Testen der reaktionsfähigen Website auf - verschiedene Seiten Bildschirme für verschiedene Geräte, ohne tatsächlich gehen und kaufen alle - diese unterschiedlichen Größe Geräte und Bildschirme. - Um das zu tun, werden wir ein kostenloses Online-Tool benutzen. - Diese Website namens Cork Tools dot com Schrägstrich Bildschirm fliegen eine der schönen Dinge über Bildschirm - Flug, die wir an einem einzigen Ort bestritten. - Und weil es online ist, gibt es keine Notwendigkeit, spezielle Software herunterzuladen. - Eines der netten Dinge an der Bildschirmfliege ist, dass es sehr sauber und man hier unten unten sehen kann. - Es gibt verschiedene Symbole, - und es ermöglicht Ihnen, zwischen verschiedenen Bildschirmen zu wechseln, - Tablets und Handy, - so können Sie dann eine Vorschau Ihrer Website auf kleineren und größeren Bildschirmen. - Und es enthält sogar eine Dreh-Anzeige-Taste hier unten, so dass Sie Hoch- und Querformat testen können . - Nun, - eines der Dinge, die Sie bemerken werden, wenn Sie zum Bildschirm fliegen kommen, ist, dass es fordert, dass Sie - fügen Sie in die URL der Website, die Sie möchten, um zu testen und bemerken, dass sie fragen - eine http-Adresse. - Also suchen sie tatsächlich nach einer richtigen Website-Adresse. - Und Sie haben vielleicht aus den vorherigen Übungen bemerkt, dass, wenn wir unsere Dateien lokal auf unserem Computer geöffnet haben, nicht wirklich weiterkamen. - Http Adresse Was wir am Ende sehen, ist so etwas, wo die URL beginnt mit - Datei Doppelpunkt Schrägstrich, - Schrägstrich und dann hat nur die Ordnerstruktur zu der Datei auf unserem lokalen Computer. - Und das ist vollkommen in Ordnung für die Vorschau Ihrer Website, bevor Sie sich entscheiden, sie auf - Ihrem Hosting-Server, - jedoch, - Sie werden feststellen, dass mit Bildschirm fliegen, wenn wir diese hier kopieren und einfügen, dass, wenn wir zur Ansicht gehen - die Seite, was ich will Wow, - es funktioniert nicht. - Ähm, - und der Grund, warum ist das? - Es versucht, zu einer http-Adresse oder einem tatsächlichen Mädchen im Internet zu gehen, so hypothetisch - Sie könnten tatsächlich Ihre Website hochladen. - Du bist responsive Website, - und dann könntest du es hier testen, wenn du es bereits online hast. - Um, - und wenn Sie daran interessiert sind, diese Route zu gehen, nachdem Sie dieses Video gesehen haben, - können Sie gehen und zum Video mit dem Titel Site Publishing mit FTP springen und das - wird Ihnen beibringen, wie Sie Datei zilla verwenden, um Ihre Website-Dateien auf Ihren Remoteserver. - Und dann können Sie einfach Ihren Domain-Namen hier einfügen, - und Sie können Screen Fly verwenden, um Ihre Responsive auf diese Weise zu testen. - Und wenn Sie nicht möchten, dass jeder im Internet in der Lage ist, es zu sehen, während Sie noch sind - Reparieren Sie es, - können Sie einen Ordner auf Ihrem Server namens Test erstellen oder so etwas, das nur Sie - wissen, wie Sie zu kommen. - Und du könntest die Dateien einfach in ihre jetzt ziehen. - Der einzige Nachteil davon ist, dass offensichtlich, - jedes Mal, wenn Sie eine Änderung am CSS lokal vornehmen, - Sie es speichern müssen und dann auf Ihren Server hochgeladen werden, um es dann in der Bildschirmfliege zu testen. Um also den Produktionsprozess zu beschleunigen und weiterhin nur lokal arbeiten zu können , werde ich einen Testserver auf meinem lokalen Computer installieren, und es gibt ein paar verschiedene Optionen für das zu tun. - Für Mac, - Sie können Ma'am herunterladen, - was Ihnen ah, - die Möglichkeit gibt, einen Testserver auf Ihrem Computer zu installieren, den Sie verwenden können. Und wenn du an Windows bist, kannst du Wamp oder Wamp Server benutzen. Und wenn du an Windows bist, kannst du Wamp oder Wamp Server benutzen kannst du Wamp oder Wamp Server benutzen. Also beide luftfrei, , und ich zeige dir, wie du das auf dem Mac einrichten kannst. - Leider, - Ich habe keinen Windows-Computer, - aber ich kann Ihnen sagen, dass das funktioniert, Sie Wamp herunterladen würden. - Und du musst diejenige auswählen, die speziell zu deinem Computer passt. - Sie haben eine 32-Bit-Version in einer 64-Bit-Version. - Und wenn Sie unsicher sind, welche Einstellungen Ihr Computer hat, gibt es einen Link innerhalb des Diskussionsbereichs. Einstellungen Ihr Computer hat, - Sie können gehen überprüfen, dass einige andere Links Teoh Websites hat, die Richtungen haben. - Oder tatsächlich, - wenn Sie Google-Suchfenster, - wie Sie überprüfen, ob Ihr System 32 oder 64 Bit ist, - Sie werden sehen, dass es einen ah-Thread gibt, der das auf der Microsoft-Website erklärt. - Okay, - also im Grunde, was Sie tun, - obwohl im Wesentlichen, wie Sie wham herunterladen! - Und wenn Sie es installieren, nachdem Sie es installiert haben, - es erstellt dieses Verzeichnis auf Ihrem Computer, - was der Standard C ist, - Doppelpunkt Schrägstrich wamp Schrägstrich www und alle Dateien, die Sie in diesem www Ordner, auf den Sie zugreifen können - Ihre -Browser, indem Sie einen HTTP-Doppelpunkt Schrägstrich lokalen Host eingeben. - Also, - zum Beispiel, - lassen Sie uns hypothetisch sagen, dass Sie eine Website für eine Kaffee-Farm in Hawaii erstellt haben. - Und vielleicht nennst du den Ordner deinem Hauptordner für dieses Website-Projekt. - Du nennst es, - ähm, - Kona Farms. - Dann würden Sie Ihren Website-Ordner nehmen, - Kona Farms, - und Sie würden den gesamten Website-Ordner in den W W W Ordner innerhalb dieses Wamp Ordners ziehen -, - und dann, um auf das in Ihrem Browser als - ah, - lokaler Testserver, - Sie würden den lokalen Host Schrägstrich Kona Farms eingeben, um in diesen Ordner zu gelangen. - Nun, - es ist sehr ähnlich auf dem Mac, wenn Sie Ma'am installieren. - So, - Mann, - Sie können hier kommen und Sie können auf den Download klicken. - Jetzt verknüpfen Sie das. - Ah, - dieser hier drüben, der sagt, - jetzt ist das für die kostenpflichtige Version, die Ma'am Pro und für unsere Bedürfnisse ist. - Es ist in Ordnung, einfach die kostenlose Version hier zu verwenden, - also würden Sie jetzt auf Download klicken und Ma'am installieren. - Jetzt, - wenn Sie es herunterladen und installieren, - Sie können es in Ihrem Anwendungsordner finden und ich habe sogar eine Verknüpfung hier auf meinem Dock erstellt. - Für es so, dass es sagt, vielleicht haben. - Und wenn du darauf klickst, wenn du es aufrufst, wirst du sehen, dass dieser kleine Bildschirm auftaucht. - Und was passiert ist, dass jedes dieser Lichter hier grün leuchtet, wenn der Server startet. - Wenn Sie hier zu den Einstellungen gehen, - gibt es diese verschiedenen Registerkarten hier und die allerletzte Registerkarte hier, - diese Schaltfläche, die sagt, - Apache, - wenn Sie voran gehen und klicken, dass dies Ihnen erlaubt, eine beliebige Ordner auf Ihrem - Computer Ah, -, dass Sie das Stammverzeichnis Ihres lokalen Servers sein möchten. - Ich habe einen Ordner namens Sites auf meinem Computer. - Also habe ich gerade gesagt, ich ging voran und ging in selektieren, - und ich habe gerade meinen Benutzernamen ausgewählt. - Und dann habe ich Websites ausgewählt, - zum Beispiel, - und klickte auf Öffnen. - Und auf diese Weise. - Jetzt, - alle Dateien, die ich in meinem Sites-Ordner kann ich zugreifen, indem Sie auf den lokalen Host im Browser. - Wenn Sie das einmal eingerichtet haben, können Sie es einfach so können Sie es einfach so minimieren oder verstecken, und was ich tun möchte, ist, dass die Dateien von meiner Website finden, und ich möchte diese in die gleiche verschieben. Ordner, den ich gerade angegeben habe. - Also würde ich diese Dateien in meinem Fall in meinen Sites-Ordner ziehen und dann im Browser darauf zugreifen. - Jetzt können wir in unseren Standard-Browser und wieder unter Windows gehen. - Sie würden nur den lokalen Host Slash eingeben. - Und dann, - was auch immer der Name des Ordners war, den Sie innerhalb des www-Ordners platziert hatten - Wamp Ordner auf Mac, - es ist ein bisschen anders. - Abgesehen von dem Schreiben lokalen Host, - Sie müssen auch setzen Sie den Doppelpunkt Symbol und eine Portnummer, - die die Standard-Port-Nummer für Ma'am ist Doppelpunkt 8888 Und dann, wenn Sie dorthin gehen, - können Sie den Ordner Ihres Website-Projekts finden. In meinem Fall habe ich ein paar Ordner hier, um es zu bekommen, und dann wird deine Website auftauchen, damit du es bemerken wirst. - Der Unterschied ist, dass, anstatt diese Datei aus dem lokalen Dateisystem wie folgt zu betrachten -, - mit einem Schrägstrich des Doppelpunkts, - Sie es tatsächlich von einem lokalen Testserver aus einer Vorschau anzeigen können, den Sie gerade - auf Ihrem Computer installiert. - Also dieses u R L ist jetzt in Bildschirmfliege verwendbar, so kann ich voran gehen und kopieren Sie dies und kommen zurück - in den Bildschirm Fly und ich kann diesen Kerl hier unter H T T p einfügen. - Doppelstrich Schrägstrich wird einfach einfügen, dass es da und Sie werden sehen, dass es beginnt mit - lokalen Host jetzt statt und wir werden auf Go klicken und wir können jetzt unsere Website sehen und wir bestreiten es auf - all diese verschiedenen Größen Geräte. - Cool. - Also das Schöne daran ist nicht nur, dass ich meine Website jetzt testen kann, - aber es gibt keine Notwendigkeit für mich, sie hochzuladen, weil dies tatsächlich von einem Test-Server auf meinem lokalen Computer läuft . - Also, wenn ich diese Dateien in erhabenem Text aufbringe, den ich bearbeiten kann, - der Code ist, ich gehe und speichere es und ich werde die Änderungen hier sehen, indem ich mit der rechten Maustaste in den - Rahmen klicke und dann neu laden Frame auswähle. - Ich werde in der Lage sein, sofort zu sehen, die sich die Website ändert. - Jetzt gibt es noch eine letzte Option. , Wenn Sie nicht sicher sind, ob Sie Wham oder Ma'am als lokalen Testserver auf Ihrem Computer installieren möchten. - Zumindest, - was Sie tun können, ist, dass Sie Ihre Dateien hier in Ihrem lokalen Dateisystem aufrufen können, - und Sie können einfach die Ecke des Browsers ziehen, um Änderungen zu sehen. - So, - wie es, - diese besondere Breite des Bildschirms hier können Sie sehen, die sozialen Symbole sind auf der rechten Seite - Seite. - Aber wenn es keinen Platz mehr für sie gibt, habe ich es im fertigen Code so eingerichtet, dass sie hier in das Logo-Panel springen. - Und wenn ein Bildschirm kleiner wird, - gibt es andere Änderungen wie diese, - wie das Logo wird kleiner und die Themennavigation darunter so. - Okay, also haben wir unsere lokale Testumgebung eingerichtet, um reaktionsfreudig Outs zu bauen. - Gehen wir weiter und gehen Sie zur reaktionsfähigen Layout-Übung. 53. Vorbereiten von HTML für das Responsives Layout: - in Ordnung, - also um loszulegen, - Ich möchte, dass ich nicht schon den Quellcode für 4.1 hier draußen in erhabenem - Text angesprochen hatte . - Und ich habe diesen Code auch hier im Browser angesprochen, indem ich zu Kork-Tools dot com slash - Screen fly, - gehe - Screen fly, , was im vorherigen Video besprochen wird. - Und ich habe voran gegangen und bereits mit der lokalen Kopie auf meinem lokalen Testserver für - diese Webseite verlinkt . - So werden wir in der Lage sein, das Layout in verschiedenen Größen zu testen. - Und die einzigen zwei Dateien, mit denen wir wirklich für diese Übung arbeiten müssen, ist die - Index Punkt HTML-Seite und auch die Gerätestile Punkt CSS-Seite. - Also habe ich ein zusätzliches Stylesheet für euch im CSS-Ordner erstellt. - So, jetzt sollten Sie normalisiert Punkt CSS Stil Punkt CSS und diese zusätzliche Stylesheet - Gerätestile Punkt CSS, wo wir alle unsere Medienabfragen s hinzufügen, so dass wir können - steuern, wie die Website zeigt auf Geräten unterschiedlicher Größe. - Das erste, was wir tun wollen, ist, dass wir hier ein paar Tags hinzufügen wollen - den Kopfbereich unserer HTML-Seiten. - Auf diese Weise können wir das reibungsloseste Seherlebnis auf allen verschiedenen Geräten zu bekommen. - Das erste, was wir tun werden, ist, dass wir hier Zehe Zeile neun gehen und wir werden die Meta mit Tags hinzufügen , so dass wir gesendete Geräte so einstellen können, dass ihre Browser nicht hineinzoomen oder verkleinern - wenn die Website geladen wird . - Und durch das Verhindern des Zoomens. - Dann können wir uns auf unsere Medienabfragen verlassen, um die Größe des Layouts zu ändern. - Also habe ich hier online einen Kommentar geschrieben. - Neun. - Du kannst einfach voran gehen und das hervorheben, und wir erstellen einen Met Angriff. - Und innerhalb des Meta-Tags, - werden wir ihm einen Namen des View-Ports geben, der die Geräte Vieux Port anvisiert. - Und wir werden ein weiteres Attribut einrichten, das Content heißt. - Und hier werden wir eine Aussage schreiben, die deaktiviert wird, das Gerät ist zum Scheitern verurteilt. - Das erste, was wir tun wollen, ist, dass wir gleich dem Gerät mit setzen wollen, - und dann werden wir ein Komma setzen, - und wir werden angeben, dass die anfängliche Strichskala gleich 1,0 oder 1,0 ist, - und dann werden wir die minimale Strichskala gleich 1,0. - Und wir werden auch die maximale Strichskala gleich 1,0 einstellen. - So wird das Zoomen auf all den verschiedenen Geräten, die diese Website anzeigen, deaktiviert. - Eine andere Sache, die wir tun werden, ist, dass wir eine Verknüpfung zu einer JavaScript-Datei, die geht - Teoh beheben Sie es so, dass die iPhones und iPads, wenn wir drehen aus Querformat zwei Porträt, - es wird nicht versuchen, zu vergrößern oder zu verkleinern jetzt. - Ah, - eigentlich, - Google-Suche dafür, - oder Sie können gehen, um Hub dot com zu bekommen und nach diesem Code zu suchen. - Es nennt sich das I O I - O s Orientierungsänderung. - Behebt, wie Sie das eingegrenzt haben? Nein, ich habe das, äh, ihr seid alle hier niedergeschrieben, also werde ich es einfach eintippen, und wir werden das Skript-Tag wie dieses verwenden, das ein öffnendes und schließendes Skript-Tag hat. - Und innerhalb des öffnenden Skript-Tags, - werden wir SRC verwenden, um auf den Speicherort dieser Javascript-Datei zu zeigen, - die bei http s Doppelpunkt Schrägstrich rohen Punkt Holen Sie Hub dot com Schrägstrich w I l t o Schrägstrich I os - Strich Orientierung ändern. - Stellen Sie sicher, dass ich richtig buchstabiere Ausrichtung ändern Bindestrich fix Punkt Js Das ist eigentlich ein - ziemlich lang Sie sind alle da. - Okay, - Sie könnten auch zu diesem Mädchen gehen und einfach diese Javascript-Datei herunterladen und in einen Ihrer Ordner legen , - vielleicht einen J-Ordner, - und dann können Sie lokal darauf verlinken. - Und das ist wahrscheinlich Ihre sicherste Wette ist, die aktuelle Kopie davon zu holen - heruntergeladen und Link zu ihr hier für unsere Zwecke. - Das sollte in Ordnung sein. - Nur um von dieser Fernbedienung aus darauf zu verlinken, sind Sie alle hier. - Ok. - Und dann, - ah, - wir wollen auch hier runter in den Skriptbereich kommen und wir werden hier einen Fix für ältere Versionen von Internet Explorer hinzufügen - ah, - wir wollen auch hier runter in den Skriptbereich kommen und wir werden hier einen Fix für ältere Versionen von Internet Explorer hinzufügen. - Das ist online 19. - Ich habe diesen Kommentar hier geschrieben, der besagt, dass mit CSS drei Medienabfragen IE Fix verknüpft ist. - Ich werde das löschen, - und ich werde hier rein und wir werden das Skripte-Tag dafür erstellen. - Das wird also nur Teoh für ältere Versionen von IE notwendig sein. - So kann es innerhalb meines bedingten Kommentars für weniger als Internet Explorer neun hier sein, - also werde ich mein öffnendes und schließendes Skript-Tag dort erstellen und mein SRC-Attribut erstellen und - ich werde auf diese Datei verlinken. - Jetzt Diese Datei hier wird über Googles Content-Delivery-Netzwerk geteilt. - Ich könnte einfach http Doppelpunkt Schrägstrich eingeben und das ist unter C SS drei Bindestrich Medienabfragen -. - Stellen Sie sicher, dass wir den richtigen Punkt Js buchstabiert Entschuldigen Sie mich, - Das ist Strich Js Medienabfragen Dash Js Und dann wird das ah dot google code dot com Schrägstrich - SV und Schrägstrich Stamm CSS drei Bindestrich Kommedia Abfragen Punkt Js Wow, - das ist ein Bissen dort, so dass Sie tatsächlich zu Google gehen und Sie können einfach nach Medien suchen - Abfragen beheben oder CSS drei Medienabfragen für i E. - Und es sollte hier mit diesem Code kommen, mit dem Sie einfach direkt auf und wieder verlinkt werden können -. - Dies wird auskommentiert und die meisten Browser werden nicht einmal stören Laden Sie es. - Aber wenn es eine alte Version von i e ist, - wird es die bedingte Aussage hier sehen, die sagt, - wenn weniger als i e. - T. - Neun und dann wird es tatsächlich dieses Skript laufen thes diese beiden Skripte hier. - Dieses Top-Skript, - wenn Sie sich erinnern, - ist derjenige, der HTML fünf semantische Tags in Internet Explorer funktioniert. - Und dieser untere hier ist ein Javascript, das Medienabfragen funktionieren lässt. - Ja, - wir können unsere responsive Website in alten E arbeiten lassen. - Okay, - so weit, - so gut. - Und das Letzte, was wir tun müssen, um das einzurichten, ist online 16 hier. - Wir müssen auf unser Stylesheet für die Geräte verlinken. - Also haben wir bereits mit dem normalisierten Punkt CSS verknüpft und hier verlinken wir auf den Style dot CSS. - Aber wir müssen einen Link zu dem neuen Stylesheet erstellen, das ich erstellt habe, - das ist speziell für unsere Medienabfragen innerhalb von so hier geschrieben werden wird nur sagen - Relation Stylesheet. - Und wir setzen die H-Floß-Position zwei Punkte auf diese Datei, die CSS Schrägstrich Uh, - Gerät, glaube ich, - ist, wie ich das geschrieben habe. - Ja, - Gerätestile Punkt CSS und wir können das speichern. - Also habe ich das auf all den anderen Seiten für dich hinzugefügt. - Also haben wir es gerade zur Indexseite hinzugefügt, damit Sie den Prozess sehen können 54. Anwenden von CSS3-Medienfragen: - Jetzt haben wir das alles an Ort und Stelle. - Wir können voran gehen und springen über zu den Gerätestile Punkt CSS, - und wir können beginnen, unseren antwortlich Code zu schreiben. - Das erste Gerät, das wir hier betrachten möchten, ist das Tablet, wenn es im Querformat ist. - Also, - zum Beispiel, - das Apple iPad, wenn es umgedreht ist, - Landschaft hat 10 24 Pixel Breite, so dass wir über zu unserem Browser springen können und wir können Bildschirm verwenden - fliegen, um sicherzustellen, dass dies auf diesem Gerät korrekt aussehen. - Im Moment sehen wir unsere Website auf dem 15-Zoll-Bildschirm in Notebookgröße und wir können hier runter zu - Tablet springen . - Und wir können Apple iPad eins und zwei auswählen, - die die 10 24 mit Bildschirmgröße hat. - Okay, jetzt ändern wir es auf das iPad. - Sie können sehen, dass die meisten unserer Website in Ordnung aussieht. - Trotzdem, - der Navigationstext sieht ziemlich gut aus. - Das Logo sieht ziemlich gut aus, und alles andere ist okay. - Ich glaube, der Rapper ist vielleicht etwas nah am Rand, aber ich kann das korrigieren. - Und dann merkst du auch hier. - Eine Sache, die problematisch sein könnte, ist, dass die Social-Media-Symbole hier beginnen - überlappen sich jetzt in den Inhalt. - Also muss ich herausfinden, was ich mit denen machen möchte. - Also haben Sie hier ein paar verschiedene Möglichkeiten. - Ich kann die Social-Media-Leiste ausblenden oder sie in einen anderen Bereich verschieben. - Also, - zum Beispiel, - ich denke, was ich hier tun werde, ist, dass ich diesen leeren Raum hier benutze und sie einfach oben auf dem Logo-Panel in dieser Ecke positioniere . - Also gehen wir weiter und gehen zurück zum Code, - und wir werden unsere erste Medienabfrage schreiben, um das zu erreichen. - Also zuerst werden wir bei Medien sagen, - die das Gerät überprüfen und einige Informationen schnappen. - Und wir können hier eine Anweisung schreiben, die zu wahr oder falsch ausgewertet wird, wenn diese - Medienabfrageanweisung als wahr ausgewertet wird, - wird der Code verwendet, der innerhalb der Medienabfrage erfasst wird. - Und wenn es die False auswertet, wird dies nur überspringen oder den Code innerhalb der - Medienabfrage ignorieren . Okay, also können diese Aussagen ziemlich kompliziert oder ganz einfach sein, und es liegt an dir, wie anspruchsvoll du ihn machst. - Das erste, was wir tun wollen, ist, dass wir nur Bildschirm sagen wollen, - und das wird nur zu wahr bewerten. - Wenn es sich um ein Bildschirmgerät handelt, - einige andere Dinge können Sie Ihre sagen. - Sie können bei Medien alles sagen, was alle Geräte umfassen würde. - Sie können auch sagen, - uh, - Drucker oder auch für Projektion. Und in diesem Fall machen wir uns Sorgen um ein Tablet, das ein Bildschirmgerät ist. - Also hier wird sagen, nur Bildschirm und dann werden wir das Schlüsselwort verwenden und so dass wir weiter - die Aussage, so dass Sie das Wort und so oft wie Sie möchten verwenden können, - und das wird sicherstellen, dass dies zu wahr und was auch immer auf der anderen Seite - das Wort wird auch als wahr bewertet. - Und in unserem Fall - wollen wir auch sicherstellen, dass die maximale Breite in diesem Fall 10 24 Pixel oder weniger entspricht -. - Und dann setzen wir eine Reihe von geschweiften Klammern und ich werde ein paar Mal zurückkehren. - Okay, - so können Sie sagen, Min, - Dash wits, - Max, - Strich wits und Sie können wirklich in jede Art von Pixelmenge, die Sie in diesem Fall mögen, - wir wollen sicherstellen, dass es ein Landschafts-Tablett von 10 24 ist Pixel oder weniger. - Okay, - so haben wir bei Medien Onley-Bildschirmgeräte gesagt und auch, wo das Bildschirmgerät nicht mehr hat - als eine Breite von 10 24 Pixel. - Nun, - wenn das wahr ist und das wahr ist, - wird es tatsächlich den Code hier ausführen, den wir hier genau so können wir einfach anfangen zu schreiben - normaler CSS-Code hier. - Zwischen dieser öffnenden und schließenden geschweiften Klammer für diese Medienabfrage, - und dieser Code wird ausgeführt, wenn diese Anweisung. - Die volle Aussage hier ist jetzt wahr. - Wenn eine der beiden Seiten falsch ist, - wenn das falsch ist, - ist es kein Bildschirmgerät. - Oder wenn es ein Bildschirmgerät ist und das falsch ist, - es ist tatsächlich größer als 10 24 Pixel. - Es wird den Code hier nicht ausführen. - Und eines der netten Dinge über Medienabfragen ist, dass ich nicht das ganze CSS schreiben muss - Code nochmal, weil es immer noch nur die Stile erben wird, die ich zuvor geschrieben habe . - Also, - zum Beispiel - in der Stil Punkt CSS-Seite, - haben wir das Körper-Hintergrundbild. - Hier ist die handgemachte Papiertextur, - und wenn ich das nicht in der Medienabfrage ändern will, dann kann ich sie einfach auslassen. - Ich muss diesen ganzen Code nicht nochmal neu schreiben, was wunderbar ist. - Wir müssen keine Zeit damit verbringen, einen Haufen Code zu kopieren und einzufügen. - Wir müssen wirklich nur den Code für das schreiben, was wir ändern möchten, wenn diese Bedingung ist - wahr. - In unserem Fall fühlten wir uns, als ob der Rapper ein wenig zu breit war. - Was ich tun werde, ist eine gängige Technik, die es ist, die feste mit Rapper zu ändern, - das ist 960 Pixel derzeit zu einer Flüssigkeit mit zu wechseln, so dass es nur ein - Prozentsatz der Breite des Gerätes sein wird . - Also, hier werde ich den Rapper jetzt auf 90% einstellen. - Und ein paar andere Dinge, die wir ändern wollten, ist, dass ich die Social Media Bar anvisiere und ich - möchte seine Positionierung ändern, - die vorher auf Position fixiert war, - und ich möchte es jetzt auf absolute Position setzen. - Auf diese Weise, - es wird nicht an Ort und Stelle bleiben, wenn der Browser scrollt, - aber wir können immer noch absolute Positionierung verwenden, um es in Beziehung zum Browser zu - Fenster und wir werden voran gehen und sagen oben 100 Pixel. - Und ich musste tatsächlich mit diesem ein bisschen herumspielen, um es in der rechten erscheinen zu bekommen - Platz und 100 Pixel gerade etwa zentriert es und dann gehen wir voran und sagen, Wir wollen bewegen - es etwa 5% über vom Rand des Bildschirms. - Die Art und Weise, wie ich das berechnet habe, war, dass wir die schnelle und 90 so aus, - gingen 100% des verfügbaren Bereichs im Gerät. - Wir stellen den Rapper so ein, dass er auf 90 herunterdrückt, die zur Verfügung stehen, - weißt du, - 10% was 5% auf der rechten Seite und 5% auf der linken Seite sein würde. - Also setzen wir es auf 5% Emission. - Lassen Sie die soziale Symbolleiste abschleppen rechts mit dem Rand der Wrapper auf der rechten Seite - Seite, - und wir werden tatsächlich die Breite dieses Dings ändern. - Also, bevor das mit auf 40 Pixel gesetzt wurde, wenn die Symbole vertikal gestapelt sind, - aber wir werden tatsächlich alle diese Links ändern, um horizontal anzuzeigen? - Nein. - Also, um das zu tun, - müssen wir machen, damit sie passen. - Mit anderen Worten, - müssen wir die Breite ändern. - Und wenn ich sagte, die mit dem Auto, - es wäre einfach breit ist, es muss da sein, um all diese Elemente passen. - Das nächste, was wir tun wollen, ist, dass wir diese Links innerhalb dieser sozialen Bar ansprechen wollen. - Wir können einen abhängigen Selektor verwenden, um dies zu tun, - und wir wollen sie anstelle von Anzeigeblock setzen. - Wir wollen sie so einstellen, dass sie im Linienblock angezeigt werden, so dass sie nebeneinander -. Okay, also lasst uns das speichern, und dann können wir wieder zur Bildschirmfliege kommen. Und anstatt die Seite hier zu aktualisieren, ... was wir tun wollen, ist, wenn Sie hier an den Rand des Rahmenfensters gehen und Sie recht haben, klicken Sie auf. - Ich benutze eine Maus, um mit der rechten Maustaste zu klicken. - Wenn Sie unter Windows sind, - sollten Sie einfach mit der rechten Maustaste klicken. - Wenn Sie auf Mac sind und Sie nicht über eine Zwei-Knopf-Münder, - Sie können klicken. - Um das zu arbeiten oder Finger klicken, um dieses Menü nach oben und innerhalb des Menüs zu bringen, - es sollte etwas sein, das Reload Frame sagt. - Und wenn Sie darauf klicken, - sollte es die Website-Seite dort neu laden. - Okay, - Irgendetwas funktioniert in der Luft. - Hier drüben ist noch etwas kaputt, das sich in einem Moment ansprechen wird. - Aber Sie können sehen, dass die Symbole, - Social-Media-Symbole hier sie von der Seite bewegt und um die Vorschau, um sicherzustellen - es funktioniert richtig. - Wenn Sie wollen, - können Sie hin und her wechseln. - Hier ist der 15-Zoll-Bildschirm. - Also, jetzt lüften die sozialen Symbole auf der Seite hier, - und der Rapper ist 9 60 Pixel, - und er bleibt bei 9 60 Pixel, - auch wenn er breiter wird. - Also, selbst wenn wir gehen bis zu wie 19 Zoll oder, - Sie wissen, 20 Zoll die Größe des Rappers bleibt beibehalten es 9 60 Pixel, - was durch den Stil Punkt CSS Stylesheet diktiert wird. - Aber dann, - wenn wir auf eine kleinere Größe kommen, - zum Beispiel - gehen wir zum Tablet iPad. - Jetzt ist der Rapper auf 90% des Bildschirms eingestellt, - und diese sozialen Symbole ändern sich in Zeilenblock, - also werden sie jetzt horizontal statt vertikal angezeigt, und sie befinden sich auch innerhalb dieser Logo-Leiste. - Hier sind sie oben auf dem Logo positioniert, aber Panel. - Okay, - eine Sache, die Sie bemerken werden, ist, wenn Sie hier auf kleinere Größen skalieren, dass die - Bilder Luft, - nicht skalieren So bestimmte Dinge. - Das ist problematisch für, ähm, - zum Beispiel - dieses Bild und wird auch hier für das Video problematisch sein, wenn es kleiner und kleiner wird und auch Dinge wie die Tabellen und Formen. - Äh, - was wir tun können, ist eine gängige Technik ist, dass Sie alle Ihre Bilder und - Videos und Audio-Tags alle Ihre Formulare und Tabellen, - alles, was sich normalerweise über den gesamten Abschnitt erstreckt oder Rahmen von die Seite. - Sie werden die auf eine Breite von 100% setzen wollen. - Also haben sie einen flüssigen Witz, und sie werden auf verschiedenen Seiten Geräte skalieren. - Zum Beispiel, - wenn ich hier auf eine wirklich kleine Größe gehe , - können Sie diese Bilder jetzt aus dem Bildschirm sehen. - Also ein wirklich einfacher Weg, das zu beheben, ist, in Ihr Haupt-Stylesheet zu gehen, - das ist der Stil Punkt CSS Stylesheet hier und unter Fix dieses Jahr kommen und - wir werden sehen, dass die Zehe Linie 32 hier runter kommen wird, - und wir werden sagen, Bilder. - Okay, - Video. - Und wenn wir irgendein Audio in unserer Seite hätten, - konnten wir Audio und irgendwelchen I Frames und irgendwelchen, - wie, - Formen und Tabellen zu allen 100% breiten setzen - wie, . - Okay, ich habe das schon individuell für den Tisch eingestellt. - Ich glaube hier. - Ja, - und ich habe das eigentlich schon für das Formular festgelegt. - Normalerweise schreibe ich das alles aus. - Ich habe die schon woanders in den Code geschrieben. - Auch für den I-Rahmen. - Das glaube ich. Einzige, DasEinzige, was hier übrig bleibt, sind die Bilder und Videos. - Und ich benutze kein Audio-Tag in diesem, also kann ich das auch entfernen. - Aber normalerweise haben Sie alle diese so geschrieben. - Alle Dinge, die Luft Strecken Ihrer Website über den Bildschirm bis zum Rand des Rappers -. - Du kannst sie zwei mit 100% so einstellen. - Also, wenn ich das speichere und dann kommen wir zurück und erfrischen uns hier, versuchen wir es noch einmal. - Also werde ich mit der rechten Maustaste reload Frame gehen. - Ok. Und dann, wenn wir jetzt wieder zu Tablets kommen, können Sie sehen, dass das Bild nur zu 100% in diesem Rapper ist, also wird es für jede Größe herunterskaliert. - Also jetzt, - selbst wenn ich nach unten gehe, um die iPhone-Größe zu mögen, - werden die Bilder wirklich klein. - Aber es springt nicht aus dem Rahmen. - Okay, - also haben wir den Stil für das iPad angegangen, wenn es im Querformat ist, und wenn wir das Display drehen, können wir sehen, wie es hier aussieht, wenn es ins Porträt geht. - Okay, - Ich werde hier wieder in mein Stylesheet springen und zurück zu Gerätestile dot CSS gehen. - Und hier gehen wir voran und ändern ein paar Dinge unter der Portraitansicht für - Tablet. - Also wirklich, - das einzige, was ich hier ändern möchte, ist, dass ich die Navigationslinks ein wenig machen - kleiner, also gehen wir weiter und sagen bei Media Onley, - Schrei und Klammern, - Max Strich Breite und wir sagen 7 68 Pixel, - und wir werden unsere geschweiften Klammern verwenden und das so öffnen. - Wir können innerhalb von hier eingerückt und einfach ein paar Stile hier in verschachteln, - und wir werden voran gehen und sagen Nah, - Barraum jetzt ein Targeting auf alle Links innerhalb von Navid Bar und wird die Schriftart ändern - Größe, um ein wenig kleiner zu sein, weil es ist eine Art von Crowding und immer ein wenig in der Nähe der - Rand ihrer. - Also sagen wir 0,8. - Also sind Ems flüssig. - Sie stehen in Beziehung zur vorherigen Schriftgröße. - So ist ein em gleich der aktuellen Schriftgröße und 0.8 wird etwas kleiner sein. - Zeig auf kleiner. - Okay, also speichern wir das und kommen zurück und laden die Seite hier neu. - Rahmen nachladen. - Ok. - Damit Sie sehen können, dass die Kerle dort kleiner wurden. - Und jetzt gibt es noch etwas mehr Platz. - Okay, - Also, wenn ich jetzt umschalten, - wenn ich das Display hier drehe, - können Sie die Größe des Textes im Link hier auf horizontaler sehen. - Also für Landschaft. - Und dann, wenn wir eine Anzeige hier für das Porträt drehen, - können Sie sehen, dass die verknüpfte Steuer dort etwas kleiner wird. - Und wir haben eine bequemere Menge an Platz um den Linktext auf den Tasten. - Ok, ehrfürchtig. - Das nächste, was wir tun wollen, ist, dass wir diesen Kerl für ein Smartphone einrichten wollen. - Okay, - also möchte ich zu ah Smartphone-Landschaft gehen, - Was wäre ich in diesem Jahr drehen. - Das ist 480 Pixel breit. - Das ist irgendwie OK, - außer der Tatsache, dass ich in der Lage sein will, mehr von den Inhalten hier zu sehen. Es ist alles gut und gut, diese Navigation hier und dieses Logo sehen zu können . - Aber es wäre schön, wenn ich etwas mehr von diesem Bild sehen könnte, - das Introbild und vielleicht sogar einen Teil des Textes, - wenn möglich. Um das so höher vom Bildschirm zu bekommen, denke ich, was ich tun werde, ist das etwas zu schrumpfen. - Vielleicht ist das hier etwas zu groß. - Außerdem sollten wir Teoh in der Lage sein, diese Typen rauszubringen, um Platz zu schaffen. - Und , ich denke, wir werden das Logo auch bewegen. - Also versuche ich ein paar verschiedene Dinge hier, wenn wir hier runter scrollen. - Das ist auch etwas zu eng. Also meine, wenn Sie sich diese Säulenstruktur hier ansehen, - genau hier, - wo es Firmennachrichten sagt, - wäre das wirklich irgendwie ärgerlich zu lesen, - denn stellen Sie sich vor, Sie sind nur in der Lage, lese wie zwei Wörter, - und dann musst du in die nächste Zeile springen. - Was ich hier denke, ist, dass wir unsere Mehrsäulenstruktur aufgeben müssen. Ich vermute, das ist noch schlimmer auf der Katalogseite, die hier drei Spalten hat. - Das ist einfach zu schmal von einer Linie. - Wir müssen also tun, ist, dass wir diesen Kerl zu einer Säulenstruktur zusammenführen und die Säulen in diesem Rapper auf 100% breit setzen. Okay, also gehen wir weiter und kommen hier runter und sagen, , bei Medien nur Bildschirm und Klammern. - Max, - Bindestrich mit Doppelpunkt, - 480 Pixel, - das ist die Breite des iPhone, wenn es sich im Querformat befindet. - Okay, also werde ich voran gehen und einfach die soziale Rinde hier entfernen. - Wir müssen Platz schaffen, - also sagen wir Pfund sozial. - Und jedes Mal, wenn wir etwas verbergen wollen, kann ich einfach so einstellen, dass keines so angezeigt wird - verstecken Sie es und verschieben Sie es aus dem Layout, damit es den Inhalt nicht wirklich zerstört. - Es macht es einfach so, dass es nicht mehr sichtbar ist. - Wir können es später jederzeit wieder sichtbar machen, und wir setzen die Knave-Bar - hier. - Zwei Positionen statisch. - Okay, - also entferne ich die feste, - die Positionierung von fixiert aus dem nab unser, weil auf einem größeren Bildschirm, - es ist schön, die NAB unsere Folgen haben, - aber es ist ein großer, - dicker Balken, - und es nimmt zu viel Platz auf einem kleineren Bildschirm ein. - Also auf einem kleineren Bildschirm, - wenn die Leute weiter nach unten scrollen, - ich möchte, dass sie in der Lage sein, die volle Breite ihres Geräte-Bildschirms zu verwenden, um den Inhalt zu sehen und - nicht die Navigationsleiste so viel Platz einnimmt. - Was wir das zurück zu statisch bewegen, anstatt darüber zu sein, wird tatsächlich unter dem Logo-Bereich sein. - Also denke ich, ich werde die Grenze ändern. - Um oben drauf zu sein. - Wird voran gehen und den Kerl an die Grenze bringen. - Ash oben, um visuelle Linie zwischen dem Logo-Panel in der Knave zu machen sind hier, - so werden wir diese Zehe ein Pixel fest C C C C und dann für alle diese Links im Inneren wird es - fügen Sie einige klopfen oben und unten wird es ein wenig weniger machen, so dass ich denke Dies hatte ein - Padding von, - like, - 22 Pixel oder so etwas vorher. - Und ich setze die Polsterung über diesen Links jetzt auf nur 10 Pixel, - so dass dies schmaler wird. - Hier, - wir gehen und sagen, - Polsterung 10 Pixel oben und unten Null auf links und rechts. - Ok. - Und dann das Logo hier, - das ist das nächste ist das Logo-Panel, das sich erinnern, - vor den Logo-Panels ein bisschen zu groß hier. - Und das hatte, - ähm, - wie, - 80 Pixel Polsterung, so dass es unter dem festen Nab erscheinen würde unser Wir werden eine Menge von diesem Platz dort entfernen , also gehen wir voran und sagen Logo-Polsterung und sagen: - Null auf der Oberseite Jetzt für Logo und Null auf der linken und rechten. - Und 10 Pixel direkt auf der Unterseite. - In Ordnung. - Und wird hier runter zu Ah kommen, - die H eins und H zwei für das Logo werden voran gehen und Pfunde sparen. - Logo Raum H ein Komma, - Pfund Logo Raum Alter zu erinnern. - Da steht dort die H-W-Schuhe im Logo. - Und wir werden den Rand oben hier ändern, um kleiner zu sein, wird sagen, - Nun, - tatsächlich Rand-Gash-Top verwenden und wird das auf 10 Pixel so ändern. - Okay, - und lassen Sie uns Ihre für die für das H selbst sehen. - Wir passen etwas Polsterung an, dass der Kerl gut ist, - wir sagen, klopfen Null auf die Oberseite. - Sie sind auf der rechten Seite Null auf der Unterseite und 30 Pixel klopfen auf der linken Seite Drücken Sie es - in ein wenig. - Und für das Bild, - das kleine Kronenbild Wir werden das ändern, um zur Seite zu sein, indem wir den Hintergrund sagen - Strich Position Null horizontal und negativ. - Fünf Pixel vertikal. - Also, was wir hier tun, ist, dass wir die kleine Krone nehmen. - Ah, das war über den Schuhen Z H W. - Teil des Logos, das der M-Chef war, - kleine tolle Krone, - und wir bewegen es von oben zur Seite. - Also habe ich zusätzliche Polsterung an der Seite hinzugefügt. - 30 Pixel mit für diese Krone, - Ähm, - und ich habe es die Hintergrundpositionierung verschoben, um Null horizontal zu sein, - was auf der linken Seite und negative fünf Pixel ist, - es ein winziges Stück nach oben bewegt vertikal an der Beschriftung auszurichten. - Und das sollte ziemlich gut aussehen, also sollte sich das um das Logo kümmern. - Das andere, was wir tun wollen, ist, dass wir die Spalte setzen wollen. - Also habe ich alle diese Säulen. - Stile wie Spalte eins links kommen eine Spalte, - eine mittlere Spalte, - eine rechte und Spalte nach links und Colin, um diese Luft alle diejenigen zu schreiben, die schweben waren - vorher und wir können alle diese Klassen auswählen. - Und wir können ein Komma benutzen, um sie alle zusammenzufassen. - Und wir können ihnen allen sagen, dass sie keine schweben sollen. - Also, anstatt links oder schweben rechts, - aber sie schweben vor, um diese Seite an Seiten Spaltenstruktur zu erstellen. - Wir werden es ändern, um keine zu schweben. Und wir wollen auch, dass sie jetzt die volle Breite des Rappers aufnehmen, also ändern wir sie auf eine Breite von 100%. - Und wir wollen den Rand von allen Seiten entfernen, bis auf den Boden so. - Okay, - wir werden das retten. - Ok. - Und dann, ... ganz unten auf der Detailseite, die anderen drei unten im Detailbereich hier unten. - Sie können sehen, dass diese Typen nicht mehr nebeneinander passen. - Diese Luft wird nicht übereinander stehen, aber wir brauchen keinen Bedarf für die kleine, äh, - Linie hier, die Border rechts genannt wird. - Wir haben eine Klasse namens Grenze direkt in der vorherigen Übung hinzugefügt, um diese kleine gestrichelte Linie hier zu machen . - Also möchte ich das wirklich entfernen. - Also kommen wir zurück in den Mantel und wählen diesen Stil, der Border Underscore genannt wird. - Rechts ist der Name dieser Klasse, - und wir werden Grenzstrich rechts setzen, um jetzt auf Null gesetzt zu werden, um es auszuschalten. - Das sollte alles sein, was wir tun müssen. - Das war eigentlich ziemlich viel Wechsel vom Desktop auf das Tablet. - Es gab nicht sehr viele Veränderungen. umsteigen Aber wenn wir auf die 480 Pixelumsteigen, haben wir viel Platz verloren. - Also musste ich hier viele verschiedene Dinge ändern, wie Sie sehen können. - Kommen wir wieder rein und versuchen es noch einmal. - Wir gehen zum Nachladen des Rahmens. - Cool. - Jetzt haben wir nur eine Säule. - So, jetzt, - wie Marken und Schuh-Archiv, - und das sind die verschiedenen Abschnitte des Katalogs Männer Frauen etcetera. - Diese Typen sind jetzt alle eine Spalte. - Ah, - Ich bewege die Navigation nach unten und bemerkte, dass die Navigation nicht mehr fixiert ist. Wenn wir also vom Bildschirm scrollen, müssen wir uns keine Sorgen darüber machen, dass die Navigation ganz oben auf dem Zeug ist und Platz einnimmt. - Es ist jetzt mehr Bereich, um Bilder zu sehen und den Text zu lesen. - Okay, es sieht also ziemlich gut aus. - Und Sie können sehen, dass wir das Logo bewegen, dann auf die Seite hier. - Und was auch tun wird, ist, dass wir die Größe der Logo-Steuer ändern. - Lass mich weitermachen und hierher zurückkommen. Und jetzt, da ich mir das ansehe, könnte es gut aussehen, wenn wir den Kerl auch setzen. - Ein m so und sparen. - Und da gehen wir. - Also sagte ich, - dieser Kerl kleiner. - Das sieht dort etwas besser aus. - Also, jetzt haben wir ein kleines Logo, - ein schmaleres Logo-Panel, weil der Text kleiner ist. - Wir haben eine kleine Krone zur Seite gebracht. - Wir haben die Steuer innerhalb der Verbindung kleiner gemacht und dieses ganze Gebiet dünner gemacht. - Sobald Sie die Seite sehen. - Sie können bereits beginnen, einige der Bilder und Dinge hier zu sehen und können beginnen, zu scrollen - nach unten und überprüfen Sie den Inhalt. - Okay, cool. - Und jetzt streckt die Firmennachrichten voll mit, weil alle meine Säulen nicht mehr schweben. - Sie sind jeder, der es ist da, - jeder 100% mit und Schaffung einer einzigen Säulenstruktur wie diese und dasselbe mit den drei - Panels unten. - Jetzt diese Luft alle vertikal statt horizontal. - Okay, das ist cool. - In Ordnung. - Das letzte, was zu tun ist, ist die Portraitansicht zu überprüfen, damit wir das Display drehen. - Und Sie können hier sehen, dass das Einzige, was wirklich das ist, irgendwie in Ordnung ist. - Trotzdem, - der Text ist hier noch als einzelne Spalte lesbar. - Das Einzige, was wirklich ist, kann problematisch sein. - Hier ist dieser Text hier in dieser Navigationsleiste. Ich könnte den Text kleiner machen, aber dann auf Armlänge, wenn du das Ding auf Armlänge hältst, wäre der Text irgendwie zu klein. Und auch wenn diese, - uh, - wenn diese Boxen so klein werden, - wenn du bist, wenn du einen großen, - stumpfen Finger wie mich hast, - ist es ein bisschen hart, wenn du diese Links klickst, wenn sie zu diesem winzig und nah beieinander -. - Konzentrieren wir uns vor allem auf diesen Knave hier für die Porträtgröße. - Also kommen wir zurück in den Code hier und wir werden nach unten scrollen zu Smartphone Portrait - und wir werden sagen, auf dem Bildschirm nur Medien und wo der maximale Verstand ist 320 Pixel so. Und wenn wir hier reinkommen, mache ich den Rapper ein bisschen nirgends. - Nun, - es war 90% und ich möchte ein wenig Platz, wenn ich Scrollbalken oder so etwas wie - das haben muss . - Also werden wir diesen Kerl auf eine Breite von 80% ändern, anstatt 90% Rasieren Sie etwas Platz und wir werden voran gehen und sagen, - No Bar. - Ok. - Und für die NABF sind hier, - wir gehen voran und ändern die Breite dieses Typen auf 100% des Bildschirms. - Dort wird der Rand oben 20 gesetzt, um ihn zu entfernen, - und wir setzen den Rand unten auf ein Pixel fest. - Siehst du? - Siehst du? - Wir sehen, wie diese Verpflichtung. - Setze das auf Texte. - Ein Linienzentrum. - So wird es das Knave-Element in ihm zentrieren. - Und wir ändern auch den Hintergrund dieses Typen. - Wir werden diesen Kerl einfach so auf den Hintergrund White setzen, - okay? - Und dann hat die Nie Bar selbst einen Rapper drin. - Und ich möchte sicherstellen, dass sich das tatsächlich 100% ausdehnt. - Also kann ich das ändern, indem ich jetzt versperrte Punkt-Rapper sage, ich werde diesen Kerl auf eine Breite von 100% setzen und den Stil des Knave im Inneren schwächen, indem ich jetzt Nab unseren Raum sage, und wir werden diesen Kerl so einstellen, dass er normalerweise eine Grenze übrig hatte - es, - und wir wollen setzen, der hier ist. Wir wollen keine Grenze mehr auf der linken Seite der Knaves, und dann können wir uns auf die Links konzentrieren. - Und diese Typen zeigten sich im Zeilenblock, also waren sie Seite an Seite. - Was muss jetzt vertikal sein? - Also werde ich sie so einstellen, dass Block angezeigt wird, okay? - Und wir werden diese Jungs auch so einstellen, dass sie ein mit 100% gegenüber beiden vorherigen haben und wir werden - die Schriftgröße hier ändern, um ein bisschen größer zu sein, - denn wenn du das auf Armlänge hältst, - um, - die Text könnte ein wenig schwer zu lesen sein, - und Navigationssteuer sollte definitiv groß genug sein, um zu lesen, um zu wissen, wohin Sie gehen - vor Ort. - Also setzen wir diesen Kerl Teoh ein. - Wir kriegen einen Grenzstrich, stimmt's? - Wir setzen das auf Null. - Wir wollen den Rand von der rechten Seite entfernen, - und wir werden ihn stattdessen ändern, um Aschedecke zu sein, - so wird jeder Link eine Grenze darüber haben. - Und wir setzen das auf einen Tritt ein wenig festes Pfund C C C C so. Okay, lass uns das speichern und wir werden sehen, wie das aussieht. - Und dann entscheiden wir, ob wir noch etwas ändern wollen. - Also komm ich wieder rein. - Alles klar, - klicken Sie auf die Kante des Rahmens und klicken Sie auf Reload Frame. - Cool. - Okay, - die Logos sind nicht ausgerichtet . - Also müssen wir wieder reingehen und das reparieren. - Komm zurück und wir wählen das Logo hier aus wie Kuss. - Und ich bin wie Staatstext Strich ausgerichtet Mitte, um das Logo in die Mitte zu bringen, - genau wie alle Navigationslinks. - Cool wird das speichern und wir werden nachladen. - Gestell hier. - Lewd-Rahmen. - Cool. - Also jetzt mein Logo zentriert. - Meine Navigation. - Es ist zentriert. - Was? - Ich scrolle nach unten. - Sie sind verschwunden. - Ich kann das alles sehen. - Okay, das ist ziemlich cool. - Und gehen wir auf die Verkaufsseite. - Stellen Sie sicher, dass diese Jungs gut aussehen. - Es ist immer gut, alle Ihre verschiedenen Seiten zu testen. - Stellen Sie sicher, dass Ihre Inhalte korrekt angezeigt werden. - In Ordnung. - Okay, hier ist die Google-Karte, und hier ist unsere Form, - in Ordnung? - Und das sieht alles ziemlich gut aus. Also, wenn ich hier runtergehe, Teoh die Preistabelle, sieht das so aus, als wäre es problematisch hier. - Das wird nicht alles passen. - Also, wenn ich das auf das Display geschrieben habe, ist es irgendwie okay hier, wenn es so aussieht, als wäre es gerade genug Platz hier, wenn es in - Landschaftsansicht, - 480 Pixel breit. - Aber wenn wir horizontal zum iPhone kommen, - es sieht so aus, als gäbe es nicht genug Platz, - also müsste ich entweder den Text in dieser Tabelle kleiner machen oder einige der - Spalten verstecken . - Ich denke, wenn ich den Text und Ihren kleineren hier, - es wird nicht sehr sichtbar aus der Ferne sein. - Also sagen wir hypothetisch, dass das einzige, worüber wir uns wirklich Sorgen gemacht haben, wie der Markenname in der Preisgestaltung und auf einem mobilen Gerät ist . - Einige dieser Informationen können wir es loslassen. - Also, was ich tun werde, ist, dass ich tatsächlich eine Klasse speziell dafür erstellen werde. - Ich komme hier rein und lass uns so eine Klasse namens Heitor erstellen. - Und lassen Sie uns voran gehen und fügen Sie diesen Kerl zu sagen, - zeigen Doppelpunkt keines. - Also alles, was wir anwenden, - äh, - eine Klasse von Hydro wird so eingestellt, dass keine angezeigt wird, wenn sie unter dieser spezifischen Größe ist , - in Ordnung? - Und wir wollen auch diese Tabellenüberschriften und Tabellenabteilungen auswählen, - all diese kleinen Zellen in der Tabelle, - und wir wollen ihnen weniger Auffüllung geben. - Ich glaube, sie hatten vorher 10 Pixel Polsterung. - Wir machen sie ein bisschen näher zusammen. - Und lassen Sie uns auch die Schriftgröße etwas kleiner machen. - Wird die Schriftgröße 0,9 m gehen, wie das wird voran gehen und sparen, - und wir wollen gehen und dann müssen wir in die Preispunkt-HTML-Seite gehen - und Klasse auf jedem dieser Jungs hinzugefügt. - Also habe ich das schon für dich getan. - Aber das kannst du sehen. - Ich wollte, dass Brandon-Preise erscheinen. - Aber dann, wenn wir zur Steuer herunterkommen, - habe ich eine Klasse von Haider auf der Steuer hinzugefügt, - und hier haben wir auf Lager. - Ich habe Klasse von Haider hinzugefügt, um es und unter der Ordnungsidee zu verbergen, - ich habe eine Klasse von Haider hinzugefügt. Wenn also diese Seite auf einem größeren Bildschirm geladen wird, der größer als 320 Pixel ist, wie jede andere Art von Tablet oder Desktop oder sogar ein iPhone, wenn es horizontal ist, gibt es keine Spezifikationen für die Klasse von Haider. wie jede andere Art von Tablet oder Desktop oder sogar ein iPhone, wenn es horizontal ist, - Also wird es nichts tun, - aber, - basierend auf dieser Medienabfrage, wenn es unter einer Breite von 3 20 Pixeln ist, - dann hat die Klasse von Haider plötzlich einen Stil angegeben. - Es wird also keines anzeigen und diese Kerle verstecken. - Lassen Sie uns das testen und sehen, wie das funktioniert. - Also gut, mach los und speichere das hier, und ich gehe weiter und komm zurück in den Browser und wir machen hier eine Aktualisierung. - Das ist ein Nachladerahmen. - Cool. Also, jetzt hat dieser Tisch, - äh, - äh, - nur die Marke in der Preisgestaltung, - die passt. - Und wir haben den Text etwas kleiner gemacht, aber nicht zu viel kleiner. - Das ist also immer noch lesbar. - Okay, - das war's. - Um, - zu wissen, - ein letzter Test. - Ich gehe immer durch jedes der verschiedenen Geräte, so dass Sie runterkommen können und Sie sagen können, - Oh, - das ist, was meine Website sieht aus wie diese Größe Bildschirm, - und so sieht es auf dieser Größe Bildschirm aus. - Und so sieht es auf diesem Bildschirm aus. - Hier haben Sie also die Horizontale, - die Vertikale, - und es ist eine gute Idee, das auf all den verschiedenen Seiten zu testen. - Sie möchten Ihre Karten und Ihre Formulare überprüfen und sicherstellen, dass all diese Dinge Luft - korrekt auf allen verschiedenen Geräten angezeigt werden. - Das ist also ziemlich zeitaufwendig. - Sie gehen hin und her und Sie werden kleine Änderungen in Ihren Medienabfragen optimieren. - Eine letzte Sache, die wir tun werden, ist, dass wir eine für den Mediendruck einrichten. - Also, wenn Sie sagen, eine Datei drucken Bildschirm in Ihrem Browser, - wir können gehen und sagen Stern, um alles zu wählen, - und wir können die Farbe von allem auf schwarz setzen. - Um, - jetzt zu überschreiben, - wissen Sie, - Star ist eigentlich ah, - ziemlich schwacher Selektor. - Es ist einfach, mehr Autorität zu haben, als sie außer Kraft zu setzen. - Was Sie tun können, um auf der sicheren Seite zu sein, ist, dass Sie einen Compound-Selektor verwenden können. - Sie können Kommas stellen, - und wir können Gut angeben, - ich meine, - auch jeder h zwei, - jeder drei jedes Vieren H fünf h sechs. - Alle meine Textelemente im Wesentlichen alle Absätze, - alle Links. - Der ganze andere Text, der sich innerhalb von Abschnitten befindet, die lose in Div schweben. - Z oder innerhalb der Tabellen werden alle die Farbe schwarz haben. - So sparen Sie die Tinte Ihres Druckers, damit wir sparen können. - Und wenn wir hier wieder zu Chrome kommen, - zum Beispiel, - sagen wir, dies ist die Website, die ich hier drucken möchte. - Sie werden feststellen, dass diese paar größere Karte Link hier ist blau unter meinem Google. Wenn ichjetzt zum Dateidruck gehe, wenn die Vorschau hier erscheint, wirst du feststellen, dass es diesen in schwarzen Text geändert hat. jetzt zum Dateidruck gehe, Wenn ichjetzt zum Dateidruck gehe, wenn die Vorschau hier erscheint, wirst du feststellen, - Der Typ ist jetzt ganz schwarz und weiß. - Hervorragend. - Okay, also das ist es, um reaktionsfreudig Outs zu schaffen. - Als nächstes wollen Sie zur Code-Herausforderung weitergehen, - und Sie werden Ihre eigenen Gerätestile erstellen, die CSS und Sie können Ihre eigenen - Medienabfragen erstellen , um bestimmte Aspekte Ihrer Website basierend auf der Größe des Geräts zu ändern. 55. Hinzufügen von PHP Adding: - Hallo. - Willkommen zurück. - Dies ist der endgültige Code für die Z H W Shoes Website. - In diesem Code, - Ich werde das Kontaktformular ausfüllen und ein wenig bereitgestellten PHP-Code verwenden, der wird - tatsächlich die Informationen in dem Formular an Ihre E-Mail-Adresse senden. - Also möchte ich euch zeigen, wie ich das auf der Website hinzugefügt habe und euch auch beibringen, wie ihr könnt - es aktualisieren, damit es auf eurer eigenen Website funktioniert. - Also zuerst werde ich die Seite selbst aufrufen, nur damit wir sehen können, was ich hinzugefügt habe. - Das ist also die Kontaktformular-Seite, - und all diese ersten Formulareingaben hier oben existierten bereits dort, - wie Sie wissen, - aber ich habe hier eine zusätzliche Eingabe hinzugefügt und auch dieses Verifizierungsbild hier, das ist - generiert, damit Sie sehen können, ob ich die Seite jedes Mal aktualisiere, wenn ich die Seite aktualisiere. - Diese Zahl ändert sich hier so. - Ziemlich cool, hm? - Also verwenden wir PHP, um dieses Bild zu generieren. - Um, - und um alle Dateien zu sehen, die diesen PHP-Code in ihnen haben musste ich meinen lokalen Testserver aufrufen. - In diesem Fall, - unter Max habe ich Mann Pierre erzogen, - Ähm, - und Ma'am ist nicht nur im Apache Server auf Ihrem lokalen Computer. - Es enthält auch PHP in meiner Fortsetzung, so dass Sie es auch für andere Dinge verwenden können. - Und so haben wir diese Bestätigungseingabe hinzugefügt, damit wir sicherstellen können, dass wir keinen Spam an unsere E-Mail-Box bekommen . - Es werden echte Menschen sein, nicht Web-Anwendungen, die da draußen Chaos verursachen, - E-Mails senden, die Menschen alle Arten von Junk-Mail. - Also wollen wir diese Junk-Mail verhindern. - Also werden wir sicherstellen, dass Menschen tatsächlich Menschen sind, indem wir diesen Code eingeben, der hier generiert wird. - Also, nur um Ihnen zu zeigen, dass das funktioniert, - Ich habe das tatsächlich auf meinen Server hochgeladen und Sie müssen das wirklich hochladen. - Sie können grundsätzlich, - Sie können die Dateien in einer Vorschau anzeigen und Sie können sogar wie die zufällige Bildgenerierung hier testen - über Ihren lokalen Testserver. - Aber Sie brauchen die Möglichkeit, sich mit einem Mail-Server zu verbinden, - den Sie hosten. - Das Unternehmen wird zur Verfügung stellen, damit dies tatsächlich einreichen oder die E-Mail senden kann, also müssen Sie diese zuerst hochladen, um es tatsächlich zur Arbeit zu bringen. - Also habe ich das schon hochgeladen und wir testen es einfach. - Ich tippe den Namen Bob ein, und dann geben wir seine E-Mail ein. - Was wird sagen, - Ist Bob bei Bob Dot Com? - Ich entschuldige mich, wenn das wirklich jemand E-Mail-Adresse ist. - Das habe ich mir gerade ausgedacht. - Tut mir leid, Bob. Und das Telefon ist optional, also gebe ich dort keine Telefonnummer ein, und wir hinterlassen eine Nachricht. Und das Telefon ist optional, also gebe ich dort keine Telefonnummer ein, Ich werde sagen, ich habe dich so lange nicht mehr gesehen. - Hoppla. - Und dann müssen wir überprüfen, ob wir Menschen sind. - Okay, - also gerade jetzt, - wenn Sie diese Nummer falsch eingeben, - es bringt Sie nur zu einer sehr einfachen Fehlermeldung, die besagt, dass die Nachricht nicht gesendet wird. - Bitte gehen Sie zurück und füllen Sie die erforderlichen Felder aus. - Wir könnten das schöner machen. - Vielleicht ist das etwas, was ich hinzufügen werde, ein zukünftiges Update. - Normalerweise, - wenn ich das für einen Client baue, - würde ich Javascript verwenden, um dies zu validieren. - Und dann würde ich eine Nachricht ausdrucken. - Wahrscheinlich hier, - um, - das sagt, dass es nicht richtig ist. - Oder vielleicht bei einem roten Umriss um die Form und legte so etwas, - das wäre ein wenig stilvoller. - Aber für jetzt, - Ich wollte nur machen, dass dies einfach wie möglich ist und bleiben Sie nur bei HTML CSS und PHP. - Also haben wir diese echte generische Botschaft. - Aber im Grunde könnten Sie das Sie wissen hinzufügen, - das könnte eine Verbesserung sein. - Du kannst es hinzufügen. - Vielleicht zu einem späteren Zeitpunkt. - Ich komme zurück und verbessere das etwas, aber das wird unseren Bedürfnissen entsprechen. Also, wenn sie das Verifizierungsbild richtig eintragen, werde ich diesmal die richtigen Zahlen eingeben. richtig eintragen, - Und dann, wenn wir klicken, - senden cool, - es führt uns zu dieser Seite, - die eine Seite namens Kontakt Underscore Erfolg dot html ist. - Und ich habe diese Seite einfach erstellt, indem ich die Kontaktseite dupliziert und dann offensichtlich entfernt - das Formular und einfach in diesem Hintergrundbild eines Daumens Daumen oben rechts dort. Wenn wir also wieder zu meiner E-Mail springen, können wir tatsächlich überprüfen, ob das aufgetaucht ist, und dort kann man sehen, dass es dort tatsächlich schon existiert. - Also das war ziemlich schnell, - gerade in der Zeit, die ich brauchte, um darüber zu reden oder zu erklären, dass wir überprüfen werden, war eigentlich genug Zeit für den Mail-Server, um es an meine E-Mail-Box zu senden. - Es sollte also wirklich nur eine Frage von Minuten dauern, bis es auftaucht, abhängig von Ihren Hosting-Providern. - Mail-Server Wie gesichert ist es. - Es könnte länger dauern. Ich habe noch nie gesehen, dass es mehr als10 Minuten dauert. Ich habe noch nie gesehen, dass es mehr als Wenn ich also auf diese Nachricht klicke, kann ich Ihnen zeigen, wie es dort aussieht. Es sagt mir die Nachrichten von Bob bei Bob Dot Com, und wir sehen hier ist Bobs Name und Bobs E-Mail, und ich habe nichts für eine Telefonnummer eingesteckt. - Aber wenn ich diese Telefonnummer eingegeben hätte, würde sie hier erscheinen. - Und dann sehen wir die Nachricht. Ich habe dich so lange nicht mehr gesehen, also siehst du, dass der Blick dort ziemlich gut aussieht. Okay, damit Jungs arbeiten, das ist ziemlich genial. - Wenn Leute zum Formular zurückkehren wollen, - wenn sie eine weitere Nachricht senden wollen, - können sie wieder auf den Kontaktlink klicken, - und sie gehen direkt dorthin zurück. - Okay, - also lasst uns in den Dreck geraten, wie ich das hier hinzugefügt habe und wie ich diesen Kerl gebaut habe und es funktioniert hat, - und dann auch zeigen, wie du den Code optimieren kannst, damit er für deine E-Mail-Adresse funktioniert - statt meins. Also gehen wir weiter und gehen zum Code, und das erste, was ich tat, war, als ich baute. - Das ist, dass ich zwei zusätzliche Dateien hinzugefügt habe. - Einer von ihnen heißt Mailer Dot PHP, - und der andere heißt Verifizierung Image dot PHP. - Damit Sie beide hier sehen können. - Hier ist Mailer und hier ist das Verifizierungsbild. - Wenn wir darauf klicken, - Ich habe einen Kommentar an der Spitze hier, der sagt, - Keine Notwendigkeit, diesen Code zu berühren So müssen Sie wirklich nicht einmal Verifizierungsbild berühren Wenn Sie - fügen Sie es einfach mit Ihren anderen Website-Dateien, - Sie wird in der Lage sein, zu ihm zu verlinken und es sein Ding zu tun. - Also das ist alles PHP-Code, - und wir werden nicht PHP in diesen Klassen Klassen streng HTML und CSS diskutieren. - Es gibt also keine Notwendigkeit, wirklich ins Detail zu gehen. - Aber was es tut, ist, dass es eine Zufallszahl erzeugt, und es setzt das auch auf. - Es erzeugt auch zufällige Pixel auf einem Gitter. - Und dann wandelt es das in ein Bild um. - Es baut tatsächlich eine Bilddatei daraus, - was ziemlich erstaunlich ist. - Und es gibt ungefähr 29 Zeilen Code. - So ist PHP in der Lage, ein zufälliges Bild von Zahlen und Punkten wie diesem zu erzeugen. - Nur in 29 Codezeilen, was nicht so schlecht ist. , Und dann heißt die andere Datei, die ich hier erstellt habe, Mailer Dot PHP. - Und die Art und Weise, wie das funktioniert, ist wieder, - ich habe einen Kommentar online gestellt. - 14. - Keine Notwendigkeit, den Code unter dieser Zeile zu berühren, - also müssen Sie sich wirklich nicht mit einem der Code unter Zeile 14 verwirren. - In der Tat, - Sie wollen wahrscheinlich nicht damit verwirren, - Ähm, - aber wirklich, - was hier passiert ist, ist, dass es im Grunde die Eingabe nimmt, die gepostet wurde, als Sie geklickt - die Submit-Button auf der Form, - und es nimmt diese Information, - und es sendet sie in einem Männchen. - Es sendet es tatsächlich ab, - mit dem Mail-Server Ihres Hosts an die bestimmte E-Mail-Adresse, die Sie angeben. - Also hier ist es, wo Sie angeben, an welche E-Mail-Adresse Sie tatsächlich senden möchten, - um nur, - wissen Sie, - einen Platzhalter zu erstellen. - Ich habe dir auf deiner Website Dot com geschrieben, und offensichtlich musst du hier reinkommen und das ändern. - Benutze meine E-Mail-Adresse nicht. - Ich will nicht eine ganze Menge E-Mails von euch allen bekommen. - Ich würde mich traurig machen, wenn ich Hunderte von Test-E-Mails durchkäme. - Deshalb ändere ich diesen Kerl zu dir bei deiner Site Dot com. - Und das ist online. - Neun für die Send-zu-Variable. - Okay, - Die andere Sache, die Sie vielleicht setzen möchten, ist die Subjekt-Variable, - die online 12 Jahr ist. In diesem Satz von Zitaten hier, könnten Sie das ändern, um zu sagen, was auch immer Ihre Website ist. In diesem Satz von Zitaten hier, könnten Sie das ändern, - Also für diese Seite, - Ich habe CHW Schuhe, - Kontaktformular Einreichung, - und das ist, was als Betreff für die E-Mail, die gesendet wird. - Und das ist wirklich alles, worauf du dich einstellen musst. - Dies ist die E-Mail-Adresse, an die es geht und der Betreff der E-Mail. - Wenn Sie dies eingeben, - wollen Sie diese kleinen Anführungszeichen behalten. - Ähm, - da wollen Sie zwischen diesen Anführungszeichen eingeben, - das kleine gelbe Zitat, - einfache Anführungszeichen, die Sie hier links und rechts sehen, - die sind absolut unerlässlich, damit es funktioniert. - Also wird es kaputt, wenn du die entfernst. - Also nochmal für das Thema, - Sie wollen Lee hier zwischen diesen Anführungszeichen eingeben, - und dann werden Sie die Datei wieder speichern und Sie sollten gut gehen. - Also, - abgesehen vom Hinzufügen des Mailers und des Verifizierungsbildes dot PHP, - habe ich auch die Dateierweiterung auf der Kontaktseite geändert. - Zuvor, - das hieß Kontakt dot html und ich musste dies ändern, um dot PHP zu kontaktieren, weil ich - eigentlich wähle, ein kleines Schnipsel von PHP hier zu verwenden, um die Überprüfung zu erhalten - Bild toe work. - So kann ich Ihnen zeigen, dass Code, wenn wir nach unten zu dem Formular hier scrollen und ich denke, ich werde das setzen - Kerl zwei Wortwraps, dass wir den ganzen Code sehen können, der über Stereo scrollen muss. Also waren alle diese Eingaben da, bevor der Typ hier neu ist. - Es heißt. - Es ist ein Eingabetyp von Text mit dem Namen verifiziert und im Platzhalter. - Ich habe nur deinen Menschen verifiziert. Ich habe auch eine Klasse von Verifizierungsbox hinzugefügt, und ich habe es ein bisschen gestylt. Ich habe auch eine Klasse von Verifizierungsbox hinzugefügt, - Ich habe ihm eine Breite gegeben. - Wenn Sie das überprüfen wollen, - können Sie hier auf die Style Dot CSS-Seite springen und Sie können das finden, - ähm, - was genau hier ist. - Da sind wir, - online 1 19 Es heißt Eingabepunkt-Verifizierungsboxen. - Die Klasse, die ich hinzugefügt habe, - Ähm und ich sagte, - dieser Kerl, der im Zeilenblock angezeigt wird, damit er Seite an Seite mit dieser Formulareingabe sein kann. - Und ich gebe ihm eine Breite von 80%, um Platz für das eigentliche Verifizierungsbild auf der - Seite und dann das Verifizierungsbild selbst zu schaffen. - Ich habe ein kleines bisschen Code für hier hinzugefügt. - Ich habe ihm eine Breite und Höhe gegeben und hat ihm zu einer Linie nach unten erzählt. - Okay, - das ist wirklich darum, - für den Stil. - Und dann das einzige andere ist dieses Bild-Tag hier für das für das Verifizierungsbild - selbst. - Ähm, - und das, was wir hier tun, ist, - anstatt mit einer typischen Bilddatei wie meinem Bild zu verknüpfen, die J peg oder was Sie haben, was wir tun, ist, dass wir tatsächlich mit der Verifizierungs-Bild-Punkt-PHP-Datei hier verknüpfen, - und wir senden auch in eine Erzeugung einer Zufallszahl für sie, - um, - und das wird es erlauben, seine Sache zu tun und eine Zahl für Sie zu generieren. - Okay, - also das waren die einzigen zwei Dinge, die ich dem Formular hinzugefügt habe, war das Eingabefeld in der Verifizierung - Bild. - Und das benutzt diese Datei hier Verifizierung Bild Punkt PHP. - Ok. - Und dann zusätzlich, - wir ändern auch die Aktion hier des Formulars. - Denken Sie daran, - vor der, - um, - Form Aktion, - Ich denke, war ein Platzhalter, - Ich glaube, ich habe hier nur wie ein Pfund-Symbol gesetzt und jetzt habe ich dies geändert - tatsächlich auf die Mailer-Punkt-PHP-Datei zeigen. - So, - nachdem der Benutzer in seinem Namen seine E-Mail in seine Telefonnummer und eine Nachricht eingegeben hat - und eine in das Verifizierungsbild eingegeben hat, - werden sie auf den Absende-Button im Formular klicken, - die ist hier unten. - Und wenn sie auf die Schaltfläche „Senden“ klicken, wird es diese Aktion verwenden, um zu wissen, wo die Informationen gesendet werden, die sie eingegeben haben. - Also haben sie ihren Namen eingegeben, - ihre E-Mail, - ihr Telefon in ihrer Nachricht und das Verifizierungsbild und das wird alles an diese - Datei-Mailer-Dot PHP, - das ist genau hier. - Und das ist natürlich die Datei, die wir gerade besprochen haben, wo Sie die E-Mail-Adresse eingeben, um diese zu senden - an und das Betreff. - Und es wird diese ganze Information sammeln, und es wird es vorlegen. - Es sagt, - wenn das ah, wenn es verifiziert, dass - wenn das ah, wenn es verifiziert, dassdas Verifizierungsbild dort verifiziert, - es wird es mailen und dann geht es Teoh, - ändern Sie den Standort, - senden Sie das Verifizierungsbild dort verifiziert, - es wird es mailen und dann geht es Teoh, - ändern Sie den Standort, der Benutzer auf den Kontakt Erfolg, dass HTML-Seite. - Okay, sonst, wenn es nicht überprüft, dass es die Fehlermeldung sendet, die ich Ihnen vorhin gezeigt habe. Okay, Okay, also das ist ziemlich cool. Also, dieser Typ arbeitet, und das ist alles, was Sie tun müssen, ist, wenn Sie das auf Ihrer Website implementieren wollen, müssen Sie die Änderungen vornehmen, die ich gerade hier erwähnt habe. - Sie müssen den Bildcode des Verifizierungsfelds von hier nach hier hinzufügen. - Von der Eingabe, - überprüfen Sie den ganzen Weg bis zum Ende des Verifizierungsbildes. - Sie müssen die Aktion 2.2 Mailer ändern. - Und natürlich, - müssen Sie das Verifizierungsbild Dot PHP und das Mailer-Dot-PHP-Skript einschließen - damit es funktioniert, - Um , - und dann würden Sie Ihre eigene Kontakt-Erfolgsseite erstellen wollen. - Im Wesentlichen, - Um, - lassen Sie uns ein paar Dinge sehen, um zu erwähnen, dass es wichtig ist, ist, dass ich getan habe - ändern Sie den Namen dieser Seite, um das PHP zu kontaktieren, - wie ich zuvor erwähnt. - Ähm, - und wieder, - das war, weil ich ein wenig PHP-Skript hier auf der Seite benutzt habe. - Und ich muss diese Dateierweiterung dafür verwenden, damit dieses Skript hier funktioniert. Als ich den Namen änderte, musste ich zur Navigation für alle Seiten gehen und dasaktualisieren, weil du dich daran erinnerst, - ähm, - online 50. Als ich den Namen änderte, musste ich zur Navigation für alle Seiten gehen und das - ähm aktualisieren, weil du dich daran erinnerst, , - Hier haben wir die Links für die Navigation zwischen allen Seiten. - Und hier ist der Kontaktlink. - Und bevor dies zu sagen, - Kontakt dot html auf allen Seiten. - Und da ich die Dateierweiterung geändert habe, musste ich durch jede Seite zurückgehen und sie in Kontakt mit Punkt PHP ändern. - Aber das ist wirklich alles, was du tun musst. - Und dann sollten Sie diese nette kleine Verifizierungsbox haben und in der Lage sein, eine E-Mail zu senden - und tatsächlich, dass dieser Kerl in Ihrem Feld hier auftaucht. - Das ist also ziemlich cool. - Ähm, - das ist alles. - Ich hoffe, ihr hattet Spaß beim Bauen dieses Projekts. - Kümmere dich. - Gott segne. 56. Resets, Raster Systems und Vorlagen: - Ich begrüße zurück. - Dies ist Folien 4.2 Grid-Systeme und Vorlagen Wir werden CSS Resets diskutieren und - normalisieren Skripte werden auch über CSS Grid Systeme Vorlagen und HTML fünf sprechen - Frameworks. - Zuerst, - lassen Sie uns über einen CSS-Reset sprechen. - Also oft, - wenn Sie Ihre eigenen Websites erstellen, - werden Sie gehen und einen CSS-Reset herunterladen wollen. - Wir haben tatsächlich eine verwendet, die ich Ihnen gegeben habe, - oder besser gesagt - eine Version eines Reset namens Normized, - die ein bisschen mehr über in einem Moment diskutieren wird, aber im Wesentlichen ein CSS-Reset. - Was es tut, ist, dass es alle Standard-Browser-Stil entfernen wird, die Sie vielleicht haben - bemerkt, bevor wir CSS im ersten Modul gelernt haben, - Sie haben nur HTML verwendet, um Inhalte zu schreiben. - Aus irgendeinem Grund, - all dieser Inhalt hatte bereits einen inhärenten Stil, - und das liegt daran, dass jeder Browser bestimmt hat, was der Stil dieses Textes sein sollte, - wie groß er sein sollte, - welche Farbe es war in was Schriftart, das es verwendet hat. - Jetzt sind sie subtile Unterschiede von Browser zu Browser und ein CSS-Reset ist ein Weg, den wir - erhalten konsistente Stile über alle Browser, indem Sie zuerst den gesamten Browser-Stil entfernen -. - Und dann können Sie wieder hineingehen und Ihren eigenen CSS-Stil hinzufügen. - Also, wenn wir einen Reset verwenden, - was wir tun werden, ist, dass wir zuerst auf die CSS-Reset-Datei verlinken, - und dann werden wir auf unser eigenes benutzerdefiniertes Stylesheet verlinken, um Stil wieder in unsere Website hinzuzufügen . - Dies sind einige Beispiele für einige beliebte CSS-Resets. - Also, wenn Sie online zu einer Suchmaschine gehen und Sie nach einem dieser Titel suchen, - dann können Sie den Code finden, den Sie voran gehen und herunterladen und für Ihre - CSS-Reset verwenden können. - Eso Myers ist, - ah, - gemeinsamer Reset. - Es heißt Myers Reset. - Ein anderer, den die Leute benutzen, wird aufgerufen, um zu können. - Es gibt auch einen namens Warum du ich und es gibt noch einen. - Ich werde Ihnen zeigen, dass einige Leute den Reset des armen Mannes aufrufen, - den Sie einfach schnell selbst schreiben können, um die Stile in Ihrem Browser zurückzusetzen. - Dies ist ein Beispiel für den Reset des armen Mannes, - die Sie einfach selbst oben auf Ihrem Stylesheet schreiben können, wenn Sie sich entscheiden, - Also wäre dies eine Alternative, anstatt diese anderen Resets wie Myers herunterzuladen - kann und Warum du? - Warum, - ähm, - Sie könnten Ihren eigenen ziemlich schnell schreiben, indem Sie diesen Code hier verwenden. - Was das tut, ist es im Grunde alles in der HTML-Seite auszuwählen, - und dann entfernt es das gesamte Auffüllen und den gesamten Rand von jedem einzelnen Element. - Es gibt also keine Leerzeichen zwischen einem der Elemente auf einem der Gründe, warum Sie dies tun, ist - zum Beispiel - in Firefox. - Der Abstand zwischen den Absätzen kann etwas anders sein als der Abstand in Safari oder - so etwas. - Die Reset-Lösung besteht also darin, den gesamten Stil in diesem Fall zu entfernen, - alle Abstände. - Und dann können Sie wieder in Ihr eigenes Stylesheet in Ihr eigenes benutzerdefiniertes Stylesheet gehen, - und Sie können hinzufügen, - wissen Sie, - eine Codezeile, die besagt, - Nun, - Ich möchte, dass - Nun, alle Absätze 10 Pixel haben und Marge unter ihnen oder so etwas. - Wir setzen auch alle Schriftgrößen hier in Hmm Körper auf den regulären Standard 100% und dies - tatsächlich nimmt die alle Bilder, die Links haben, um sie herum und entfernt einen Rahmen - Manchmal, wenn Sie einen Link zu einem Bild hinzufügen, - wird es bekommen eine kleine blaue Schachtel um sie herum. Und wenn es ein besuchter Link ist, wird es wie ein violetter Rand um ihn herum kommen. Und wenn es ein besuchter Link ist, - Und dies wird verhindern, dass durch Entfernen der Grenze von allen Bildern, die Luft - umgeben von den A-Tags dort. - Das ist also wie ein sehr einfaches kleines Reset, das andere Myers zurücksetzt und warum ich - eigentlich viele, - vieleweitere Codezeilen einige dieser oder sogar Hunderte von Codezeilen werde - eigentlich viele, - viele . - Also sind sie ein wenig anspruchsvoller und armer Mann, also würde ich wirklich empfehlen, - wissen Sie, - wahrscheinlich ist es am besten, einfach zu gehen. - Es hatte keine von ihnen heruntergeladen, anstatt ein traditionelles Reset für unser Website-Projekt zu verwenden, - die CHW-Schuhe-Site, die wir gebaut haben. - Was wir verwendet haben, war eine normalisierte bei CSS-Datei, - und Sie können hier sehen, ist der Link, wo Sie gehen und greifen Sie den Code für den normalisierten Punkt - CSS-Datei. - So normalisiert ähnlich wie es zurückgesetzt, - cept, dass es zurück geht und fügt etwas Stil hinzu, um Sie so wie zu beginnen, - während wenn Sie einige dieser anderen Resets wie die Myers verwenden können. - Warum, - warum, - Was passiert, ist alle Überschriften, - zum Beispiel, - scheinen die gleiche Größe zu haben, - so das normale Ich Skript es entfernt Stil. - Aber dann geht es wieder in Anzeigen Stil, so dass es in all den verschiedenen angezeigt wird - Browser. - Als nächstes - lassen Sie uns über CSS Grid-Systeme sprechen. - Also haben wir unser eigenes Gittersystem in unserem Stil gebaut. - Dot CSS-Seite durch die Schaffung dieser Klassen der Spalte eine linke Spalte, - eine mittlere Spalte, - eine rechts und wir hatten sie in verschiedene Richtungen schweben und verschiedene Verstand zu setzen - sie. - Also haben wir Klassen namens Call One oder C O L. erstellt. - Eins für Dinge, die nur eine Spalte in unserer dreispaltigen Einrichtung umfassen würden. - Und wir haben auch eine andere Klasse namens Call to C O L zwei geschaffen, um Elemente darzustellen, die eine - breitere mit, die zwei Spalten in unserer dreispaltigen Struktur überspannte, - und wir hatten sogar einen namens Call drei, der den ganzen Weg über den Rapper alle überspannt - der Säulen, - so haben wir irgendwie unser eigenes vereinfachtes Gittersystem gebaut. - Es stellt sich heraus, dass Sie tatsächlich online gehen und vorgefertigten CSS-Code herunterladen können, der bereits eine Menge von diesem Positionierungscode hat , der auf dieser Luft geschrieben wird, genannt CSS-Grid-Systeme. - Dies ist eigentlich ein Diagramm von einem beliebten, das 9 60 Grid System genannt wird. - Und das ist ein Diagramm, um Ihnen zu zeigen, wie es funktioniert. - Dieses Gittersystem hat also viel mehr Möglichkeiten als das, das wir geschaffen haben. das wir geschaffen haben, höchstens ein Drei-Säulen-Gittersystem Weil Sie sich erinnern, war das Gittersystem, und dieses, das eigentlich aus 9 60 Grid System stammt. - Dieser hat insgesamt 12 Säulenmöglichkeiten. - Dies sind einige Beispiele für einige beliebte CSS-Grid-Systeme. - Also wieder, - wenn Sie zu Ihrer Suchmaschine gehen und Sie einen dieser Titel eingeben, - wird es mit einer Website kommen, auf der Sie gehen und die freie Open-Source-CSS herunterladen können - Dateien, die Sie verwenden können, um Sie mit dem Bau Ihr Website-Projekt. - Also gibt es 9 60 Blueprint ist ein weiteres beliebtes Gittersystem Sinn CSS semantisches Grid, - und es gibt auch ein ganzes Framework namens Bootstrap, - das ein eigenes Grid-System enthält. - Dies zeigt tatsächlich, wie Ihre Inhalte über das Gitter passen können. Also nehmen wir die letzte Klasse, die wir betrachten, und wenn wir irgendwie überlagerte rosa Säulen - darüber, - dann können Sie sehen, dass , zum Beispiel, - der Werbebereich hier 12345 Spalten umfasst. , Und Sie können sehen,dass die Seitenleiste hier nur zwei Spalten überspannt. - Abhängig von dem Klassennamen, den Sie für das spezifische Gittersystem verwenden, wird es Ihre Elemente eine andere Breite machen und ihnen auch verschiedene Float-Befehle geben , so dass sie nebeneinander positionieren können. - Was auch immer ein gutes System, das Sie herunterladen möchten, - Sie werden sicherstellen, dass Sie die Dokumentation für dieses bestimmte Gittersystem lesen - weil sie alle unterschiedliche Klassennamen haben, - und sie alle erwarten Sie, dass Sie sie etwas anders verwenden. - Lassen Sie uns auch über HTML fünf Frameworks sprechen, - so Hee lo fi Boilerplate ist ein Beispiel für eine Template-Bibliothek, die Sie herunterladen können. - Im Wesentlichen, - es bringt Sie los. - Es hat bereits den größten Teil der Dokumentstruktur erstellt. - Es kommt mit HTML-Dateien, - CSS-Dateien und sogar einige JavaScript-Dateien, die bereits Korrekturen an Ort und Stelle haben, um Ihre - Website funktioniert auf all den verschiedenen Browsern, - also hee mollify Boilerplate. - Geben Sie Unterstützung für HTML fünf Elemente auch auf Ihren ältesten Browsern und auf allen Geräten. - Und es gibt auch eine mobile Version dieses Frameworks als HTML fünf Boilerplate Mobile bekannt. - Das waren also die Links, die du weitermachen kannst und dir das ansehen kannst. - Um, - damit du diesen Code herunterladen kannst und ihn in erhabenen Text werfen kannst, - und du musst wirklich nur reingehen und anfangen, deine Inhalte hinzuzufügen. - Alle Dokumentstrukturen bereits eingerichtet und es ist bereits Links zu CSS und - JavaScript-Dateien, die Sie verwenden können Twitter. - Bootstrap ist ein weiteres beliebtes Framework, - und Twitter Bootstrap enthält auch. - Abgesehen von HTML und CSS, - es enthält auch eine Menge von J coury Plug Ins, so dass Sie Dinge wie Bildergalerien erstellen können, - Schiebemenüs und solche Dinge, ohne das benutzerdefinierte Javascript schreiben zu müssen - sich selbst und einfach in der Lage, die Plug-Ins zu laden, die sie Ihnen zur Verfügung stellen. - Ich möchte euch ermutigen, weiter zu lernen und jeden Tag Code zu schreiben.