Deine erste Webseite mit HTML und CSS – Dreamweaver

1. Einführung – Programmieren für Designer:innen: Hallo, mein Name ist Dan, und du mein kreativer Freund wirst deine erste Webseite codieren. Nun, wir werden das kurz machen, wir machen es super einfach, und Sie müssen an all das zusätzliche Geld denken, das Sie mit Ihren verrückten neuen Web-Design-Codierungsfähigkeiten verdienen werden . Ich habe diesen Kurs für Designer entwickelt, die wissen, wie man eine Website entwirft, aber Angst bekommt, wenn es um die Code-Seite der Dinge geht. - Nicht mehr. Dieser Kurs wird es Ihnen ermöglichen, das zu tun, was ich tue. Sie können etwas in Photoshop oder Illustrator entwerfen und dann mit Dreamweaver auf einer Website zum Leben erwecken. Es geht nicht darum zu lernen, wie man die Matrix hacken kann, sondern um sicherzustellen, dass Ihre Ideen genau geehrt werden, wenn es um die fertige Website geht. Verwenden Sie die richtigen Farben, den richtigen Zeilenabstand, das perfekte Schriftgewicht, und stellen Sie sicher, dass alles perfekt aufeinander abgestimmt ist. Wir werden diese Portfolio-Website hier zusammen erstellen, und wir werden sie vom Mockup bis hin zur eigentlichen Veröffentlichung im Internet nehmen . Komm schon. Du weißt, dass du das schon sehr lange tun willst. Melden Sie sich für den Kurs an und Sie kreativen Typ Person, und ich, kahl Kerl mit Akzent und Brille, werden unsere erste Website codieren. 2. Was wir hier erstellen und Ressourcen: He, da. In diesem Video werden wir uns ansehen, was wir auf der gesamten Website erstellen werden, sowie alle Ressourcen, die ich für Sie habe , um Ihnen zusammen mit dieser Videoserie zu helfen. Hier ist die Website, die wir aufbauen werden. Es ist eine Portfolio-Website für kreative, und ich freue mich, dass Sie dieses exakt gleiche Layout für sich selbst verwenden, einfach alle CB-Bilder und das Logo ausschalten. Du wirst wahrscheinlich kein Bild von mir benutzen, dein eigenes Bild von deinem schönen Selbststand neben einer Stange finden. Es ist eine wirklich einfache Website, um für sich selbst zu bauen, wenn Sie ein Portfolio aufbauen. Jetzt sind die großen Dinge zu beachten, bevor wir anfangen, dies zu bauen, ist, dass es reagiert und es bedeutet nur, dass es Tiefen für Tablet-Bildschirme, mobile Bildschirme, und offensichtlich der Desktop hier. Der Desktop hier hat etwas Polsterung an den Seiten und es gibt hier unten eine Bildgruppe von drei mal drei. Was wir tun wollen, ist einen Blick darauf zu werfen, wenn ich die Größe ändere. Ich werde die Größe ändern und es kommt reaktionsschnell, wenn es auf die Größe kommt, können Sie sehen? Es dehnt sich tatsächlich, die Bilder dehnen sich, der Text wird umgebrochen und die Navigation hier oben rechts passt sich an. Jetzt, wenn es auf Tablet kommt, sehen Sie das. Kannst du die Veränderung dort sehen? Dazwischen, das ist zu meiner Desktop-Ansicht Art zerquetscht und dann schaltet es auf Tablet. Jetzt sind die großen Änderungen hier wahrscheinlich die offensichtlichste hier unten ist , dass es aufhört, drei mal drei zu stapeln und es ist zwei nach zwei. Wir werden auf jede Einheit stapeln, aber hier. Die andere Sache ist, diese Navigationsmenü hier zu bekommen. Es ist übereinander in Tablet gestapelt, aber wenn es ein Desktop ist, hat es ein bisschen mehr Platz, also ist es auf diese Weise verteilt. Jetzt, wenn ich noch weiter auf Handy, Ich suche nach meiner mobilen Ansicht, Sie können sehen, die große Änderung hier ist die Navigation. Es verwandelt sich in dieses Hamburger-Menü oder nav Sandwich, oder drei gestreifte Linien. Ich liebe diese Beschreibungen dieser kleinen Ikone hier. Das wird eine große Sache für uns sein, damit wir anfangen können, ist, das hier zu wechseln. Wir werden ein wenig JavaScript verwenden, und auf der Unterseite hier sind die Änderungen diese Bilder stapeln übereinander jetzt eins nach dem anderen. Was ich auch getan habe ist, können Sie sehen, dass es hier nur vier gibt, eins, zwei, drei, vier. Ich habe ein paar von ihnen ausgeschaltet, nur so dass es nicht alles wirklich lange Seite ist, nur dass wir die Dinge ein- und ausschalten für die verschiedenen Bildschirme, so dass Sie ein Gefühl, wie es funktioniert bekommen. Nun, das ist das letzte, was da ist. Wir werden das zusammen bauen. Was ich tun werde, ist, dass es jetzt einen Link auf dem Bildschirm gibt, Bing, wo Sie gehen und überprüfen Sie die Live-Website. Es wird immer in Live da sein und es wird Ihnen nur helfen, während Sie bauen, um zu gehen und überprüfen Sie meine Version, um zu sehen, wie Ihre vergleichen, weil Ihre möglicherweise nicht funktioniert, wie Sie dachten, und Sie können gehen und überprüfen Sie meine Version. Eine andere Sache, die wir im Rahmen des Kurses machen werden, ist, dass ich am Ende jedes Videos die Dateien dort speichern werde, wo ich vorhabe, und es bedeutet nur , dass, wenn du mitarbeitest und du ein bisschen verloren gehst, und Sie können einfach meine Version davon zu dieser Zeit überprüfen, in der Sie gerade sind, um Ihre mit meiner zu vergleichen, nur um zu sehen, wo Sie vielleicht falsch gelaufen sind. Das ist die endgültige Version. Woraus wir bauen und wie Sie normalerweise arbeiten, ist Ihre Arbeit aus einem Photoshop-Comp. Das ist also, was wir als Referenz verwenden werden. Wir gehen zurück zu diesem Photoshop-Mock-up, nur um es zu überprüfen. Wenn Sie nun Ihr eigenes Modell in Photoshop erstellen möchten , bevor Sie mit dem Entwerfen in Dreamweaver beginnen, ist es wirklich üblich, dies zu tun. Es ist wirklich schwer, in Dreamweaver kreativ zu sein, Sie bauen wirklich nur die Website basierend auf einem Mock-up Sie irgendwo gemacht haben, und es wird traditionell in etwas wie Photoshop gemacht. Wenn Sie mehr in das Design in Photoshop bekommen möchten, habe ich einen ganz anderen Kurs dafür, also gehen Sie zu überprüfen, dass es Websites mit Photoshop entwirft. Diese Datei wird Teil der heruntergeladenen Übungsdateien sein , die Teil dieses Kurses sind Daher wird hier ein Link auf dem Bildschirm angezeigt und es wird auch irgendwo auf dieser Seite einen Link geben, damit Sie die Übungsdateien herunterladen können. Es enthält alle Bilder, die wir brauchen, alle fertigen Dateien, alle Produktionsdateien und diese PSD, so dass Sie es öffnen und arbeiten können , nur so dass Sie perfekt mit dem Kurs arbeiten können. Die anderen Ressourcen, die Teil dieses Kurses sind die Übungsdateien, die das HTML und CSS sein werden, alle Bilder, die wir in diesem Kurs verwenden, jedes der JavaScript-Dateien, die wir verwenden, um das Menü zu tun, diese Typen der Dinge. Auch die Produktionsdateien, denken Sie daran, am Ende jedes Videos, werde ich meine Dreamweaver-Datei mit dem ganzen Code speichern , so dass Sie das herunterladen und überprüfen können , falls Sie ein wenig verloren gehen. Die andere Sache, die Sie tun können, wenn Sie ein Lehrer oder ein Trainer sind und Sie dies in Ihren eigenen Kurs verwandeln möchten, ich habe Lehrer-Ressourcen. Es gibt einen Link in der Beschreibung hier oder es gibt einen Link auf der Seite hier, und was das tun wird, wird es Sie zu einer Seite bringen, auf der Sie Arbeitsmappen bestellen können und was Sie tun, ist, dass Sie diesen Kurs ansehen, Ihre Fähigkeiten erweitern, und dann können Sie diese Arbeitsmappe verwenden, um diese durch die Klasse zu arbeiten. Die Sache ist, ich würde mich freuen, dass Sie Ihre Projekte posten. Sie werden es für Ihr eigenes Ding anpassen, auch wenn es noch nicht fertig ist, und genau dort, wo Sie müssen. Ich würde gerne einen Link oder einen Screenshot sehen, wo Sie gerade sind. Posten Sie es in den Kommentaren auf dieser Seite, das wäre genial. Eine andere Sache ist, dass Sie, sobald Sie einen Punkt erreicht haben, diesen Kurs beobachten und denken „Das ist ein sehr guter Kurs“ oder „Das ist ein sehr schrecklicher Kurs “, möchte ich, dass Sie herausspringen und mir eine Rezension geben. Bewertungen in jeder Phase sind wirklich hilfreich für mich meinen Kurs zu entwickeln und auf vielen Plattformen, es ist die Art, wie ich rangiere und ich trainierte und ich würde eine Rezension lieben, denn je besser dieser Kurs ist, desto mehr Schüler ich bekommen und desto besser werde ich für meine Bemühungen bezahlt. Also springen Sie raus, geben Sie mir eine Rezension, wenn Sie bereit sind. Das Letzte, was ich getan habe, ist ein Spickzettel für dich zu erstellen. Es gibt eine PDF-Datei, die Sie herunterladen und ausdrucken können und sie neben Ihren Computer mit all den praktischen Tipps und Tricks und Dingen aufkleben können, während Sie eine Website in Dreamweaver erstellen. Es gibt auch eine Video-Version dieses Spickzettels gegen Ende dieses Kurses, oder es gibt einen Link auf der Seite hier. Das ist es, was wir machen werden. Das sind die verfügbaren Ressourcen. Lassen Sie uns los, schöner Designer, und bauen Sie Ihre erste Website mit einigen gruseligen Code. 3. Unsere erste Webseite mit HTML und CSS: Hey, auf dieser Seite werden wir unser erstes bisschen HTML und CSS erstellen. Wir werden etwas programmieren, aber keine Sorge, es wird ziemlich einfach programmieren. Lasst uns da reingehen. Ich habe Dreamweaver geöffnet, erstes müssen wir etwas erstellen, das eine Website genannt wird, also gehen Sie auf die Website entlang der Spitze hier, und gehen Sie zu einer neuen Website, geben Sie Ihrer Website einen Namen, Sie können es nennen, wie Sie wollen. Ich werde das Dans Portfolio nennen, und hier unten, das ist der wichtige Teil, der lokale Site-Ordner und all das tut, ist Dreamweaver zu sagen, dass wir Ihre Website auf Ihrem Computer behalten werden. Jetzt müssen Sie alle Ihre Dateien in diesem einen Ordner aufbewahren. Sie können sie nicht überall verteilen lassen, wie Sie es als Grafikdesigner tun können, Sie müssen sie alle auf Ihrem Laptop haben. Lassen Sie uns einen neuen Ordner erstellen, also lassen Sie uns auf diese kleine Schaltfläche „Durchsuchen“ klicken. Ich werde meinen auf meinem Desktop für diesen Fall, und ich mache einen neuen Ordner, ich werde es dans-Portfolio nennen. Sie können die Namenskonvention hier sehen, verwenden Sie einfach keine Leerzeichen, versuchen Sie, Unterstriche zu verwenden, und weil Sie jetzt ein Hardcore-Coder sein werden, müssen Sie Kleinbuchstaben anstelle von Titel- oder Großbuchstaben verwenden, nur weil kein wirklicher Grund. Lassen Sie uns auf „Erstellen“ klicken, drücken Sie „Wählen“. Eine letzte Sache, die wir tun, bevor wir gehen, ist, nur um unser Leben einfacher zu machen, gehen Sie zu erweiterten Einstellungen und gehen Sie zum Standard-Bild-Ordner, klicken Sie auf diesen, und klicken Sie auf „Neuer Ordner“, und geben Sie ot Bilder und klicken Sie auf „Erstellen“. Was es getan wird, ist es nur gemacht, lasst uns auf „Wählen“ klicken, ich werde Ihnen meinen Desktop zeigen. Sie können hier sehen ist mein Ordner, den ich gemacht habe und im Inneren gibt es meine Bilder Ordner, und dass Bilder Ordner hier unter erweiterte wird uns nur helfen wenn wir Bilder von allen möglichen Orten sammeln. Es stellt sicher, dass Dreamweaver sie aufnimmt und in diesem lokalen Websiteordner ablegt. Denken Sie daran, alles auf dieser Seite, einschließlich unserer Texte oder unsere Dateien, alle Bilder und Videos alle müssen in diesen Ordner auf meinem Desktop namens dans-portfolio gehen . Lassen Sie uns auf „Speichern“ klicken. werden wir eine HTML 5-Seite erstellen. Jetzt könnte Ihr ein wenig anders aussehen, Sie könnten auf den letzten Dateien oder CC-Dateien sein, stellen Sie einfach sicher, dass Sie auf einem schnellen Start sind. Lassen Sie uns auf „HTML 5 Dokument“ klicken. In diesem Kurs, was wir tun werden, ist, gibt es ein paar Möglichkeiten. Es gibt Standard, und Entwickler, es gibt Live und Split in all diesen Arten von Dingen. Wir werden im Entwicklermodus sein. Ich weiß, dass wir keine Entwickler sind, wir sind Designer, aber wir werden lernen, Code zu lernen, wir könnten es genauso gut mit den besten Tools verwenden, die wir können und dieser Entwicklermodus hat die besten Tools und es ist auch wirklich leicht und wirklich schnell, während die Standardansicht ein wenig träge sein kann und ich es ein wenig schwer zu bedienen finde, also stellen Sie sicher, dass Sie zum Entwickler wechseln. Ihre könnte etwas anders aussehen, Ihre ist wahrscheinlich auf Dateien hier, also werde ich meine dort wechseln. Das erste, was wir tun sollten, ist unsere Seite zu speichern. Also lassen Sie uns zu Datei gehen, gehen Sie zu Speichern. Nun, für unsere erste Seite, müssen wir es index.html nennen, und das gilt für jede Website, Sie brauchen mindestens eine Seite namens index.html als etwa genau so, und das wird Ihre Homepage sein, und Sie können es nichts anderes nennen, nur für diese Seite, alle vorhergehenden Seiten, sagen wir auf Portfolio-Seite oder andere Dienste oder kontaktieren Sie uns, sie können aufgerufen werden, was wir wollen, aber die Homepage muss index.html genannt werden. Wo soll es hinstellen? Es wird es in dans-Portfolio setzen, Ich werde nur, um das ein wenig größer zu machen, und ich werde auf „Speichern“ klicken. Das nächste, was wir tun sollten, wenn wir irgendwelche neuen Seiten machen einen Seitentitel hinzufügen, im Moment heißt es unbenannte Dokument, und es bedeutet nur, wenn ich eine Vorschau im Browser, sehen Sie dies, lassen Sie gehen zu Datei, gehen Sie nach unten in Echtzeit Vorschau und Klicken Sie auf „Chrome“. Es wird sich in einem Browser öffnen, und können Sie sehen, den Titel oben hier ist sagt „untitled document', dass kleine Seitentitel dort und das erscheint auf allen Seiten und das erscheint sowohl hier in diesem kleinen Tab und wenn Nutzer Ihre Seite als Lesezeichen markieren, aber auch wenn Google eine Suche durchführt. Wenn ich eine Google-Suche mache, sagen wir Dreamweaver-Tutorials. Sehen Sie diese kleinen, die hier oben, diese blauen Bits, das ist, wo die Seite total endet. Wenn Sie unbenannte Dokument, das ist, was in blau und Google, und Sie werden tatsächlich nie Rang. Es ist wirklich wichtig, wenn Sie Seiten machen , um in Ihren Seitentitel zu gehen, also lassen Sie uns das jetzt tun. Hier in Dreamweaver untitled Dokument, dieses wird Daniel Scotts Design Portfolio genannt werden. Das nächste, was wir tun werden, ist, dass wir unser erstes bisschen Code hinzufügen. Lasst uns „Sicher“ drücken. Um etwas auf Ihrer Seite zu setzen, müssen Sie es zwischen diesen beiden Tags namens body einfügen. Es gibt ein offenes und ein Schließen, man kann sehen, dass die Nähe hier den Schrägstrich davor hat. Wenn ich ein paar Renditen hier reinstelle, also wird alles, was hier drin erscheint , auf meiner Seite erscheinen, alles, was oben hier in diesem Kopf erscheint , ist irgendwie 'ne Sachen im Hintergrund, wie Dieser Seitentitel hier ist irgendwie das Zeug, das der Browser für seltsame Dinge verwendet. In Bezug auf den Körper hier, hier werden wir unseren Code setzen. Nun lassen Sie uns unser erstes Bit HTML-Code einfügen. Bist du bereit? Sind Sie bereit, Coder zu werden? Das erste, was wir tun werden, ist, dass wir eine Winkelklammer setzen und h1 eingeben würden, also h1 gilt als die wichtigste Überschrift auf Ihrer Seite. Um die Überschrift zu schließen, müssen wir in einem engen Winkel Klammern setzen. Das ist die Öffnung des Kopfes und dann werden wir in „Hallo Welt“ setzen. Du musst Hallo Welt für dein allererstes bisschen Codierung schreiben, nur weil das die Passage für alle ist. Wenn Sie ein Programmierer sind und jemals zur Programmierschule gehen, ist das das erste, was Sie gehen und produzieren werden, es ist etwas, das es eine Seite machen wird, die hallo Welt darauf hat. Willkommen, also lasst es uns tatsächlich machen, dass es für uns funktioniert. Wir haben h1, die Öffnung, dann haben wir Hallo Welt, jetzt, um es zu schließen, müssen wir in eine Winkelhalterung setzen, und dann Schrägstrich. Dreamweaver ist ziemlich clever und beendet es für uns, aber Sie können hier drüben sehen, da ist die offene, auf meinem h1, und hier ist mein Abschluss. Der einzige Unterschied ist, dass es dasselbe ist, außer es hat einen Schrägstrich, so dass es um dieses Wort wickelt, und das wird Überschrift sein, also haben wir es getan, aber wir müssen es sehen. Wir werden unsere Echtzeit-Browservorschau verwenden. Jetzt können Sie bis zur Datei gehen oder es gibt einen schnelleren Weg unten unten rechts hier, wählen Sie Vorschau, Ich werde auf „Google Chrome“ klicken, und dort meine Freunde, wir haben hallo Welt in einer schönen großen Überschrift. Du, mein Freund, bist jetzt ein Programmierer. Solange die Leute eine Website wollen, die nur Überschriften enthält. Aber wir haben es geschafft, wir haben ein h1 und es hat einige Texte drin, es ist auf einer Seite, wir haben sogar unsere Überschrift entlang dieses IPRL-Seitentitels codiert. Gehen wir zurück und machen noch mehr Codierung. Zurück hier in Dreamweaver haben wir unser erstes HTML-Bit erstellt. Das nächste, was wir tun müssen, ist etwas namens CSS zu erstellen. Jetzt HTML sind Dinge wie die Wörter und die Bilder, die auf der Seite gehen , sie sind ziemlich physisch und sie erscheinen auf der Seite, das CSS ist, was wir sie mit, weil das ist, was wir jetzt tun wollen, ist diese Überschrift groß, kühn in Times New Roman und schwarz. Was wir tun wollen, ist zu gehen und anfangen, es zu stylen, und wir werden das in unserem CSS tun. Bist du bereit? Lassen Sie uns Datei gehen, gehen wir zu neuen, lassen Sie es auf CSS wechseln, klicken Sie auf „Erstellen“, und das ist ein CSS-Blatt. Es ist nicht besonders aufregend, oder? hat ein wenig Texte darin, also speichern wir es. Datei, lassen Sie gehen, um zu speichern, Sie können dies alles nennen, was Sie wollen, aber es ist wirklich üblich, es styles.css zu nennen. Nun ist die nächste Sache, dass wir die beiden verknüpfen müssen weil dies im Moment zwei separate Dateien sind, sie sind immer noch im gleichen Ordner, aber sie sind nicht verbunden, also schließen wir die Stile hier und wir müssen verbinden Sie sie. Sie tun es, indem Sie in diesem Kopf darauf verlinken und unser Körper ist alles, was auf der Seite erscheint, und der Kopf ist alles, was im Hintergrund was das hinter der Szene macht, und das ist, was wir hier oben tun werden. Wir werden danach eine Rückkehr setzen, wir werden einen weiteren Link zu unserem CSS setzen. Nun, es ist eigentlich ziemlich lang, aber von Code, also gibt es viele Tricks, die Dreamweaver hat, um die Dinge ein wenig einfacher für uns zu machen, und das ist der Grund, warum Leute wie mich, kommen, die aus einem Design-Hintergrund tatsächlich Front-End-Web-Entwicklung ist aufgrund all dieser hilfreichen Dinge, die Dreamweaver uns tun lässt. Lassen Sie uns es tun, lassen Sie uns das Wort Link eingeben und was Sie tun möchten, ist, dass Sie Tab nicht zurückkehren, Rückkehr tut nichts. Wir haben gerade dieses seltsame Wort namens Link, aber wenn wir Link haben und Tab in unserer Tastatur drücken, schauen Sie, was passiert. Hey, Magie, es setzt Links zu einem Stylesheet und hat diese href Sache hier und wenn wir anfangen zu tippen, s, können Sie sehen Dreamweaver ist noch hilfreicher, okay, und Sie können die styles.css sehen. Es wurde in meinem Ordner geschaut und sagt: „Du meinst wahrscheinlich diesen Dan“, und ich sage ja, und ich drücke einfach die Return auf meiner Tastatur und es legt sie dort hinein. Sie sind jetzt verbunden, wenn ich auf Speichern, Datei speichern klicke, können Sie sehen, dass diese kleine Dokumentleiste oben hier erscheint, also Quellcode verweist auf den HTML, den ich anschaue, all diese hallo Welt. Hier oben sind die Stile, okay, wenn ich zum Styling gehe, und sie sind jetzt verbunden, also was ich tun kann, ist, dass ich dieses h1 in meiner styles.css stylen kann. Geh hier rein. Was können wir stylen? Wir können Lasten stylen. Aber lasst uns zu den Grundlagen kommen, die getan wurden. Lassen Sie uns h1 eingeben, und CSS hat seine eigene Syntax, es ist nicht besonders schwer, CSS ist die einfachste aller Codierungs-Bits, die Sie tun werden, also ist es h1, das Ding zurück in unserem HTML zu referenzieren und dann setzen wir in einer geschweiften Klammer und dann ein proto Rückkehr, und können Sie sehen, dass es automatisch in eine geschweifte Klammer oben hier und unten gesetzt. Unser Stil muss nur irgendwo zwischen ihnen hin und her gehen. Löschen Sie sie nicht, oder, die oberste, alles hier drin. Jetzt fangen wir an zu tippen. Lassen Sie uns die Schriftfarbe machen, also geben Sie einfach col ein und Sie können sehen, Dreamweaver ist sehr hilfreich und versucht, es mit potenziellen CSS-Eigenschaften vorzufüllen. In diesem Fall ist die Farbe ganz oben, es ist wirklich üblich. Wenn Sie das Wort Farbe verwenden, verweist es auf die Schriftfarbe, und Sie sehen, dass ich nicht alles eingegeben habe, ich klicke einfach auf „Return“ und es füllte es ein. Lassen Sie uns das noch einmal tun, also tippen Sie col ein und dann kann ich meine Tasten verwenden, um nach oben und unten zu gehen, ich drücke Return in meiner Tastatur und es füllt sie mit der richtigen Syntax aus. Sie können sehen, dass Semikolon da reingehen muss. Das nächste, was Sie tun müssen, ist, wenn ich die hexadezimale Zahl kenne, könnte ich zu Photoshop gehen und sie greifen, oder ich könnte einfach den Farbwähler hier verwenden. Sie können diese Runde und die Farbtonschieberegler ziehen und ein Raster verknüpfen, drücken Sie die Eingabetaste. Die große Sache, an die Sie sich erinnern sollten, wenn Sie eine CSS-Eigenschaft tun, ist, dass, um es zu beenden , um Dreamweaver zu sagen, Sie sind fertig, ein Semikolon zu setzen. Das ist ein bisschen Syntax. Geschweifte Klammern ist ein Doppelpunkt Nachbar, der automatisch bekam, legte es hinein, und das Semikolon am Ende hier. Das ist die, die Sie immer tun müssen, und wenn Sie lernen, ist die, die Sie vergessen werden, und die Dinge werden nicht funktionieren, überprüfen Sie, ob Sie ein Semikolon drin haben. Dieser Code genau dort ist #FF0000 ist der Code für Rot. Nun, lassen Sie uns gehen und unseren Browser überprüfen und was ich tun werde , bevor wir gehen, ist, dass ich speichern werde. Ich benutze diese eine speichern alle, die ganze Zeit. Ich werde das während des Kurses tun, also speichern Sie alle, so dass es meinen HTML und meine CSS speichert. Schauen wir uns den Browser an. Bist du bereit? Ich bin bereit. Es ist ein h1, aber es ist rot, sieh uns an, Webdesign zu machen. Springen wir zurück in Dreamweaver. Was können wir sonst noch tun? Spaß. Lasst uns Schrift machen. Sie können sehen, es gibt viele Schriftarten, lassen Sie uns Schriftfamilie tun. Ich drücke einfach meine Pfeiltaste nach unten, drücke Return und hier sind einige grundlegende, ich werde Gill Sans wählen. Denken Sie daran, dass wir am Ende dieses Dings hier ein Semikolon setzen. Jetzt werden wir auf Speichern und dann gehen wir zu meinem Browser zu springen, wir haben eine große riesige rote Hallo Welt. Nehmen wir an, wir mögen die Größe nicht, also font-s und Sie können die Größe sehen und ich werde in setzen, lassen Sie es in wirklich groß, also ein 160 Pixel, denken Sie daran, es in einem Semikolon zu beenden drücken speichern, springen Sie heraus, Riese „Hallo Welt“. Hier hinten ist das wahrscheinlich ein bisschen groß. Lassen Sie uns auf vielleicht 60 Pixel runter kommen, speichern Sie es. Schauen wir uns eine der Dinge an, die Schriftart weiß, denn standardmäßig ist es, dass große fett Schriftart weiß verwendet wird, sagen, diese Schriftart weiß, und 100 ist wirklich dünn und betrachtet, 400 ist eine regelmäßige, 600 ist über eine halbfett und 800 ist schwarz. Sie mögen die großen dicken Schriftarten, also werde ich es 100 machen, erinnern Sie sich an das Ende Semikolon, speichern, springen aus. Es fängt an, schön auszusehen. Gill Sans ist eine dieser seltsamen Schriften, wo ich es wirklich klein liebe, aber ich hasse es fett, ich weiß nicht warum. Hass ist ein starkes Wort. Wie auch immer, lassen Sie uns zurück in Dreamweaver springen und dass mein Freund im Grunde das ist, was wir tun werden, um eine Website zu erstellen. Sie setzen Sachen in Ihren HTML hier drüben, in diesem Fall ist es ein h1, aber es könnte ein Bild sein oder es könnte ein Link sein und dann springen Sie zu Ihrer styles.css, Sie referenzieren es mit seinem Namen, und dann geben Sie ihm einige Eigenschaften, und es gibt viele verschiedene Eigenschaften, aber es ist nicht so schwer. Die Leute denken, eine Website zu programmieren ist super schwierig und es kann sein, wenn Sie in die wirklich großen, Hardcore-dynamischen Java-Seiten kommen. Aber in Bezug auf Front-End-Webdesign und was Sie tun werden, wird erwartet, dass Sie viel darüber wissen, wie Sie Dinge in HTML einfügen und dann, wie Sie es in CSS stylen und nicht viel mehr, also haben Sie keine Angst davor. Das wird es für dieses Video sein, wir haben behandelt, wie man eine Website startet, eine lokale Website definiert, und dann haben wir unsere erste HTML-Seite erstellt. Wir haben ein h1 gesetzt und dort haben wir unser Stylesheet erstellt, wir haben es gestylt, wir haben Webdesign gemacht. Das wird es für dieses Video sein, gehen wir in das nächste und was wir im nächsten tun werden , ist, dass wir anfangen, etwas namens Medienabfragen zu betrachten, und das hilft uns nur, über Reaktionsfähigkeit zu lernen. 4. So machst du deine Seite dynamisch: Hey, willkommen zu diesem Video. In diesem werden wir lernen, was responsive Webdesign ist und wie man es mit einer so genannten Medienabfrage macht. Was wir gerne tun möchten, ist, wenn der Bildschirm sich auf verschiedene Größen anpasst, ich werde dies nur als Beispiel ziehen, aber was wir versuchen zu tun, ist es so zu bekommen, wenn es auf dem Tablet aussieht, sieht es wie etwas aus, und wenn es ein mobil, sieht es anders aus, und wenn es auf einem Desktop ist, sieht alles anders aus, und das ist reaktionsschnell. Es reagierte auf die Bildschirmgröße. Das werden wir in diesem Video machen. Also lasst uns in den Dreamweaver springen. In unserem letzten Video haben wir einfach ein echtes Basic h1 in den HTML und dann stylen wir es in unserem CSS. Nun, wenn Sie sich die Reaktionsfähigkeit ansehen, was wir tun werden, ist, dass wir etwas namens Desktop-first bei CSS tun werden. Jetzt eine Menge Leute machen Mobile-zuerst, so dass sie beginnen, ihre mobilen Bildschirme zuerst zu stylen , weil es der schwierigste Bildschirm zu entwerfen, weil es so klein ist. Was wir in diesem Kurs machen, und ich finde, was die meisten Leute anfangen und mit was ich beginne, ist, dass ich mit meinem Desktop-Design beginne und es dann für mein Handy herunterskaliere. Es liegt also an Ihnen, ob Sie zuerst Ihr Mobiltelefon oder Ihren Desktop entwerfen. Nur wissen, dass es einfach ist, zuerst mobil zu gehen und zu machen, Leute lieben es, zuerst mobil zu machen. Ich rocke das Boot ein wenig, indem ich zuerst Desktop mache. Aber keine Sorge, es macht keinen Unterschied zu Ihrer Website und wie es auf Mobilgeräten oder Tablets funktioniert. Also, was wir tun werden, ist Desktop-zuerst. Es bedeutet nur, dass dieser h1 Desktop sein wird. Nur um die Dinge ein wenig einfacher zu machen, was wir sagen werden, ist, dass wir einen Kommentar eintragen werden. Die Kommentare sind dieser hier, und dieser Typ hier mit einem Schrägstrich und dann dem Sternchen, das in CSS kommentiert. Du kannst da oben einen sehen. Es bedeutet nur, dass alles, was ich hier reinstelle, nur für Leute ist, es wird vom Browser ignoriert. So können Sie hier alles schreiben, nur um sich selbst zu helfen , damit Sie endlich etwas korrigieren und Sie sich selbst eine Notiz hinterlassen wollen, Sie tun es in diesen Klammern hier oder in diesem kleinen Code-Snippet hier. Was ich tun möchte, ist, dass dies meine Desktop-Ansicht sein wird. Als nächstes möchte ich das kopieren und einfügen. Ich bin hier unten. Behält nun das alles im Code bei. Dies wird meine Tablet-Ansicht sein. Was ich also tun möchte, ist, dass wir lernen werden, wie man dies mit etwas, das als Medienabfrage bezeichnet wird, ausschalten kann. Nun, um in einer Medienabfrage zu schreiben, ist es das @-Symbol, dann geben Sie Medien ein, dann setzen Sie in Klammern, dann geben Sie „max-width“ ein. Jetzt in Bezug auf Medienabfragen ist dies die einzige Sache im Moment, mit der Dreamweaver nicht super hilfreich ist. Es ist das einzige bisschen Zeug, für das Sie es so ziemlich die ganze Syntax ausschreiben müssen. Das ist so schwer, wie es wird. Wenn Sie also folgen, können Sie die Übungsdateien kopieren und einfügen. Sie können diese herunterladen und mitspielen, und einfach kopieren und einfügen, oder wie ich, Sie können es schreiben. Wir werden jetzt eine Tablet-Größe auswählen. Jetzt eine maximale Breite, es bedeutet nur, dass wir versuchen zu sagen welche Größe sollte diese Website ändern und welche Größe ist die Tablet-Größe. Jetzt ist die häufigste im Moment bei 768 Pixeln. Nun, das wird sich im Laufe der Zeit anpassen, und einige Leute verwenden einige etwas andere, aber das ist die häufigste Tablet-Größe im Moment. Dann werde ich in geschweifte Klammern setzen. Es gibt Ihre Medienabfrage, und es bedeutet nur, dass alles innerhalb dieser beiden geschweiften Klammern jetzt ausgelöst wird , wenn der Browser eine Breite davon erreicht. Also lasst uns das tun, machen wir h1 wie oben. Was wir sagen werden ist, vergessen Sie nicht Ihre geschweiften Klammern bei h1, geschweifte Klammern kehren zurück, und was wir tun werden, ist, dass wir die Farbe zwingen, sich zu ändern. Also werden wir Farbe verwenden, wie wir oben getan haben. Ich benutze den Farbwähler und wähle Grün aus. Vergessen Sie nicht das Semikolon am Ende. Lassen Sie uns einfach ein paar Abstände da hineinlegen, damit es etwas schöner aussieht. Es bedeutet nur, dass Desktop-Ansicht, es wird diese Farbe sein, aber dann, wenn der Browser zufällig eine Breite von diesem oder weniger ist, wird es in die Bildschirmfarbe ändern. Testen wir es, sobald es gerettet ist. Wenden wir uns an unseren Browser. Hier ist es. Auf der Desktop-Ansicht ist es rot. Aber hey, schau dir das an, also bei der Breite von 768, wird es die Farbe wechseln und das, meine Freunde, ist, wie responsive Webdesign gemacht wird. Nicht so schwer. Die Leute werden ein wenig davon ausgeflippt, und es bedeutet nur, dass in dieser Größe diese andere Sache tun. Es kann sein, wie in unserem Fall werden wir auf Navigationen etwas anders stapeln. Okay, also werden wir diese Typen dort stapeln und sie dort aufstellen. Diese Boxen unten hier, anstatt sie drei mal drei auf dem Desktop zu stapeln, wird es zwei mal zwei auf dem Tablet sein. Schön. Gehen wir und machen es auch für mobil. Weil wir das ganze Zeug wieder verwenden werden, schön und einfach, lassen Sie uns auf die mobile Ansicht und eine maximale Breite für Handy gehen. Mobiltelefone ändern sich ständig. Sie veröffentlichen ständig neue Modelle des iPhone. So scheint 400 wirklich eine gute Größe zu sein. Ich finde, es ist wirklich nützlich. Es bindet in einigen der größeren Telefone, die phablety, und auch echte traditionelle. Wie groß sind iPhones am meisten? Ich denke, die 375 oder so etwas. Also mache ich es nur ein wenig größer, um in einigen der großen LG, Samsung-Handys zu decken. Tu 400, es wird Spaß machen. Was wir tun wollen, ist, dass wir die Farbe ändern wollen. Also werde ich das alles löschen. Wenn ich ein Semikolon eintippe, sollte es mir wieder meinen kleinen Picker geben. Großartig. Ich wähle Rosa oder Magenta oder Lila, was auch immer diese Farbe ist. Denken Sie daran, am Ende, Semikolon, vergiss ihn nicht. Speichern Sie es. Lass uns zu unserem Browser springen. Chrome-Browser. Das hier. Also roter Desktop, bist du bereit? Tablette, grün Los geht's. Mobil, es ist eine scharfe, mauvy Farbe. Ich werde diese Farbe bestreiten. Das ist reaktionsfähiges Webdesign. Also hier drin, mein CSS, kannst du das Schöne daran sehen. Mein HTML ist super sauber und klar. Es gibt sehr wenig auf dieser Seite. Es gibt nur eine neue Zeile, die wir hinzugefügt haben. Aber in unseren Stilen sieht es ziemlich kompliziert aus, aber weil du es mit mir gebaut hast, weiß ich eigentlich, was das tut. Es ist eigentlich nicht so schwer. Codierung ist nicht so hart, wie es aussieht. Also gehen wir zu h1, das ist meine Desktop-Ansicht. Siehst du, was hier passiert ist? Dieser Fluss wird als Cascading Stylesheet oder CSS bezeichnet. Es bedeutet also, dass dieses Ding hier, sagen wir die Schriftfamilie, es fließt nach unten, und weil das Tablet nicht damit streitet, und das Handy nicht damit streitet, es bleibt Gill Sans den ganzen Weg durch, ob es Mobil-Tablet oder Desktop. Aber Farbe obwohl, es läuft ein bisschen ein Kampf. Was passiert ist, ist es Desktop, es sei denn, diese kleine Medienabfrage wird ausgelöst und tut das. Dann wird es nach unten fließen, und diese kleine Medienabfrage sagt: „Hey, wenn ich auf die mobile Größe komme, möchte ich diese kleine, scharfe, mauvy Farbe sein.“ Das ist also eine Medienabfrage. Was wir jetzt tun müssen, ist unsere besonders lahme h1 auszuschalten und es mit unserer Navigation zu tun, wo wir das nie Sandwich haben und Dinge nicht funktionieren. Also lasst uns rausspringen und anfangen, das jetzt zu tun. 5. So erstellst du ein Hamburger-Menü: Hallo, da. In diesem Video werden wir schauen, um eine ansprechende Navigation zu machen. Oben hier auf der rechten Seite, meiner Desktop-Ansicht, besteht die Navigation aus drei Schaltflächen und einem Stapel wie diesem. Aber Tablet, okay, es fällt unten, um darunter zu sein, und das große ist, wenn es ein Handy ist, verwandelt es sich in dieses größere Menü. Wir werden schauen, um das zu tun. Nun, was wir nicht tun werden, ist, dass wir keine JavaScript-Datei öffnen und alles codieren. Was wir tun werden, ist eine Menge Hebelwirkung, insbesondere eine spezifische Sache, die bereits gemacht wurde. Es gibt viele verschiedene Leute, die coole, kleine, wiederverwendbare Code-Bits gemacht haben , die wir verwenden und einfach loslegen und neu instyle. Denn obwohl es schön wäre, alles von Grund auf neu zu machen, wenn ich ehrlich bin, wenn ich jemals durch und selbst ein Nav-Sandwich gemacht habe, nein, habe ich es nicht. Ok. Ich gehe los und stehe auf den Schultern von Riesen und finde Schnipsel, die ich benutzen kann, und ich style verdammt aus ihnen heraus. Aber ich benutze die zugrunde liegende Grundlage ihrer Arbeit. Nun, es gibt ein paar verschiedene. Die Sprache zu verwenden, sagen Sie mögen die, die ich hier benutze, nicht, Sie wollen mit etwas anderem beginnen. Ich suche nach einem jQuery Nav Sandwich. Wenn du danach suchst, wirst du viele finden. Ich habe diesen gefunden, es ist eine, die ich benutze Lasten. Es ist wirklich einfach, es ist wirklich einfach. Es ist wirklich einfach zu stylen. Ich mag es. Es ist dieser hier, lass mich das rausziehen. Ok. Das hier heißt SlickNav von Josh Cope. Gott sei Dank für Josh. Er hat ein super einfaches, Nav Sandwich gemacht , das wir benutzen und stylen bekommen und es hat ziemlich gute Dokumentation. Zunächst einmal können Sie eines von zwei Dingen tun, ist, wenn Sie die Übungsdateien heruntergeladen haben. Ich habe die Bits, die du brauchst. Aber wenn du nur das Video ansiehst. Sie können die Dateien herunterladen, die Sie benötigen, kleben Sie es auf Ihrem Desktop, oder kleben Sie sie irgendwo und öffnen Sie diese, könnte dort gesucht haben. Es gibt eine ZIP-Datei, öffne sie und hier ist ein Teil der Dokumentation und das Zeug, das du brauchst. Dies ist wahrscheinlich das einzige bisschen, das ein wenig schwer für Leute, die brandneu sind. Wenn du weißt, was du tust, ist das großartig. Aber wenn du es nicht tust, gibt es eine Menge Zeug hier drin. Eigentlich brauchen Sie alles, was Sie wirklich brauchen, ist, wenn Sie die Verteilung hier öffnen, brauchen Sie dieses Ding und dieses Ding hauptsächlich. Diese beiden Dateien plus ein wenig Text von hier. Gehen wir durch und machen das selbst. Wenn Sie zusammen mit meinen Dateien folgen, öffnen Sie die, „Wie man Übungsdateien programmiert“ und was wir suchen, ist, dass Sie sich dieses, dies, das. Diese drei Dateien werden dazu beitragen, dass es funktioniert. Lassen Sie uns „Copy“ drücken und denken Sie daran, dass wir auf unseren Desktop gehen, dans-Portfolio öffnen. Denken Sie daran, alles für unsere Website alle Dateien, Bilder, dieses bisschen Code enthalten muss in diesem Ordner sein. Ich werde es hier in das Stammverzeichnis des Ordners hier schieben. Wenn Sie wirklich nett sind, sollten Sie einen CSS-Ordner und einen JavaScript-Ordner haben und alles CSS in das und JavaScript einfügen. Wir werden nicht für diese eine gehen, um es super einfach zu halten und nur Klumpen sie alle in den Boden hier. Weil es nicht besonders große Websites sein wird. Das ist ein Teil davon, wir haben dieses Slicknav und wir haben dieses Ding hier. Dieses Bit von jQuery, das Josh geschrieben hat, und dies ist die Bibliothek, auf die es sich bezieht. Du brauchst alle drei davon, damit es funktioniert. Gehen wir und schnappen wir uns den Code, den wir brauchen, damit es funktioniert. Wenn Sie auf die Website sliknav.com gehen, ist es hier. Ich habe es auch auf und in der Übungsdatei gespeichert, also schauen wir es uns an. Übungsdateien, Desktop, Code. Da ist dieser hier, der Navigationscode genannt wird. Wenn wir das aufmachen, gibt es dieses bisschen und dieses bisschen. Wir werden das packen, aber zuerst, kopieren Sie es und wir werden es in Dreamweaver einfügen. Wir werden „Hallo Welt“ ersetzen. Das war großartig. Wir haben es geliebt. Es war hilfreich, aber keine ganze Website. Wir werden das hineinlegen und nur um hübsch zu sein, wir es einmal anklopfen. Das ist da drin. Verwenden Sie diese Registerkarten, um anzuzeigen, wer sich in was befindet. Lass es uns retten. Es funktioniert noch nicht, lassen Sie sich nicht zu mitreißen oder zu aufregen, wenn es nicht funktioniert. Lassen Sie uns einen Browser verhindern, wir werden nur sehen, was wir hier haben. Hier ist meine Seite hier. Das ist alles, was es ist, einige dieser Elemente und Sie können sehen, ob ich diese Listenelemente ändere. Nun, wenn ich das in Portfolio ändere, klicke auf „Speichern“ hier draußen, du kannst sehen, dass es das ist, was wir tun. Ok. Das wird also auf der Navigation sein. Das ist der erste Teil ist, dass wir dieses bisschen Code in kopiert haben. Nächstes bisschen Code zum Einfügen, ist dieses Zeug hier. Dieses bisschen JavaScript hier, wir werden es kopieren und wir werden es setzen und wohin geht das? Das geht kurz vor dem Schließen der Leiche, okay? Alles JavaScript geht hier nach unten. Weißt du, was JavaScript ist? Nun, Sie wissen nicht, was JavaScript ist. Aber im Allgemeinen, wenn es ein Tag namens Skript gibt, meinen sie JavaScript und es geht hier immer unten und Sie haben es einfach auf der Unterseite gedrückt, löschen Sie es nicht. Wenn du da unten bleibst, schließt das meine Körpermarke. Rückgaben bedeuten nichts im Code, sondern halten sie nur getrennt. Nun, was wir finden werden, ist, dass noch nichts funktioniert. Lässt springen und einen Blick werfen. Es funktioniert noch nichts. Das ist Teil der Dinge, in die wir das eingefügt haben, wir haben das eingefügt. Das nächste, was wir tun müssen, ist, dass wir diese Dateien verknüpfen müssen. Ok. Wir kopieren sie auf unsere Festplatte. Das CSS und das JavaScript, wir haben nicht mit ihnen verknüpft. Lass uns das machen. Lassen Sie uns zunächst auf das CSS verlinken, das Josh erstellt hat. Verknüpfen und dann Tab. Wenn ich dann anfange, wie hieß es dann? SlickNav dort ist es CSS. Ok. Großartig. Das ist ein Teil und als nächstes muss ich auf diese beiden JavaScript-Dateien verlinken und wir werden es hier tun. Denken Sie daran, JavaScript, es geht nach unten. Wir gehen Drehbuch und in diesem Fall gehen wir Quelle und wir gehen, da ist es. Schön. Vielen Dank Dreamweaver. Es gibt zwei von ihnen. Ich musste das zuerst tun, und ich werde das schließen. Dann müssen wir dort das Schließen einlegen. Ok. Wir haben unsere Skriptquelle für diese jQuery für slicknav.js und jetzt müssen wir dasselbe tun, denn ich wollte das kopieren und einfügen. Fügen Sie es dort ein. Stellen Sie sicher, dass sich die Registerkarten aufstellen Ich werde diese alle auch aufstellen, nur weil es keinen wirklichen Grund gibt, aber es sieht viel besser aus, wenn alles aufgestellt ist, macht es einfach, für visuelle Menschen wie mich zu sehen. Okay, also lasst uns diese löschen und die andere einfügen, die jQuery war. Da ist es da. Okay, also die beiden. Beide müssen da sein. Lasst uns „Speichern“ drücken und jetzt schauen wir uns mal an. Daumen gekreuzt. Es funktioniert nicht. Es sieht genau so aus, wie es vorher getan hat. Ich weiß, warum. Gehen wir zurück in Dreamweaver. Wenn Sie dieses JavaScript unten einfügen, stellen Sie sicher, dass dieses hier die jquery-1.11.3.min oben ist. Dieses Ding hier ist die Sache, die Josh erstellt hat, und es verweist auf diese Bibliothek darüber. Wenn dieses Ding zuerst erscheint, kann es unten nicht lesen. Dies muss oberhalb und darunter gebunden sein. Das sollte also jetzt funktionieren. Lass uns ein Sparen haben, springen wir raus und haben. Das funktioniert nicht, es sieht vielleicht nicht so aus, aber das ist die Art von großen Knochen hier. Also die SlickNAV-Installation, das ist, wenn Sie hören, Sie haben gewonnen. Wir werden es natürlich stilvoll losgehen, um es so aussehen zu lassen, wie wir es wollen. Wenn Sie mit etwas anderem beginnen möchten, wenn Sie SlickNav einen Blick auf SlickNav haben, gibt es viele verschiedene Möglichkeiten, um es zu beginnen. Wir haben mit dieser Basic-Demo begonnen, die Sie hier sehen. Aber es gibt Möglichkeiten zu verwenden, wir haben gerade den Grundcode verwendet und Sie können hier sehen es gibt einen schönen Bouncy mit allen möglichen anderen Dropdown, also wenn Sie ein bisschen mehr Hardcore gehen wollen, starten Sie dieses K mit diesem HTML und dieses JavaScript und nicht das, das ich Ihnen gegeben habe. Gehen wir durch und schauen wir uns ein wenig an. Wohingegen es, dass wir haben? Also es tut Dropdown-Menü und diese Dinge sagen jetzt, was wir als nächstes tun müssen, ist, dass wir die Navigation nur sehen wollen, wenn es unten in der mobilen Ansicht und dieses Ding hier wollen wir ein Tablet und Desktop sehen, genau wie ich Ihnen hier zeigen werde . Das ist die Linie, die gestylt wurde, dieser Typ hier, und wir sehen ihn hier Desktop, wir sehen ihn hier Tablet, und wir sehen ihn nicht bei der Navigation. Was passiert ist, wir sehen nur das [unhörbar], das ist dieser Kerl. Wir werden das Wort Menü löschen, aber wir sehen nur, dass und mobile, und wir sehen dies ein Tablet und Desktop. Also gehen wir und tun das mit ALCI sagt. Was wir tun müssen, ist, dass wir mit Medienabfragen herumspielen müssen. Also schauen wir uns zuerst mal die SlickNav an, ich habe mir das für dich angeschaut und es ist ziemlich gute Anweisungen, aber sie sind wirklich, für jemanden, der wirklich nerdy weiß, was sie tun, gut für mich, aber wenn Sie wirklich brandneu, und Sie ein Grafikdesigner sind, muss es ein wenig hart sein. Aber was funktioniert hat, ist, dass ich diesen Kerl hier brauche, dieses Ding namens Slicknav_Menu, und dieses Ding hier, wir werden es kopieren. Sie können einfach tippen Sie Ihre in, ich gehe zu Dreamweaver und was wir tun werden, ist, dass wir in unsere Stile gehen und wir werden auf dem Desktop sagen, Ich möchte dieses Ding namens selektive Menü, und ich habe gerade gespielt und ich habe herausgefunden, dass SlickNav Menü ist der Name dieser Box hier gegeben, diese kleine gestreifte Linie. Also die drei, das ist Techniken zueinander sind nur Menu genannt. Also, das ist der Name für diese nennt man Menü und dies wird SlickNav Menü genannt. Also SlickNav Menü, was ich gerne tun würde, ist in geschweiften Klammern setzen, und ich würde gerne etwas namens Display tun und ich möchte Wheatley Block sagen. Ich würde gerne keines sagen. Das war, bekam mich, als ich begann Block fühlt sich genauso an wie keiner wie Blocket nicht hier drin sein. Aber Block bedeutet, es wie ein großer Holzblock zu zeigen, so erinnere ich mich trotzdem daran. Also möchte ich sagen, wenn ich auf Desktop-Ansicht bin, möchte ich hier Stripy Menü, um keines anzuzeigen. Ich will nicht, dass du überhaupt auftauchst, bitte, Semikolon. Save, schauen wir uns unsere Speisekarte an. Schauen wir uns das Richtige an, gehen wir hierher. Also auf dem Desktop zeigt er nicht an. Im Moment, obwohl er kein Tablet anzeigt, oder es ist ein Handy, werden wir diesen Kerl im Moment ignorieren. Aber es ist eine Art von Arbeit, es tut, was wir gesagt, nicht auf dem Desktop angezeigt werden und was passiert, ist dieser hier fließt nach unten und weil nichts widerspricht ihm in Tablet oder Handy, und es bleibt keine die ganze Zeit. Was wir also tun müssen, ist das, was wir tun werden, nur um das aufzuräumen. Diese h1 ist hier, wir verwenden diese Art von nur um früher zu testen, wir haben es nur verwendet, um die Farbe meines Treffens zu ändern, nur so dass wir verstanden haben, was diese Medienabfragen wo und wie sie funktionierten. Im Moment werden wir nur einen wirklich schönen ordentlich haben, es gibt Desktop und auch ich möchte nur ein Desktop-Schrägstrich global sein. Die Leute werden dies global nennen, dieses Top und alles, was es außer Kraft setzt, wird in unserem Fall Tablet und Handy sein. Aber global ist, wenn jemand sagt, setzen Sie es in Global, sie meinen den oberen Teil, es ist vielleicht nicht Desktop, Sie könnten es mit dem zu tun haben, was man mobil [unhörbar] nennt . So kann es Mobil anstelle von Desktop auf der Oberseite sein, aber das heißt global an der Spitze und ich habe mich ein wenig verloren. Aber was wir tun müssen, ist hier, wir werden das ganze Stück kopieren. Also an dieser Spitze, nicht anzeigen und Vorlage, ich möchte anzeigen, blockieren und gehen und es auschecken. Eigentlich will ich das nicht tun, oder? Ich möchte, dass es oft Tablet sein, weil mein kleines Menü, eigentlich mein Mockup und Photoshop hat es auch dort, und es ist nur ein Handy, oder ich komme hier und ich blockiere es. Lasst uns „Speichern“ drücken. Schauen wir uns mal an. So Desktop nicht da, Tablet nicht da, Handy hallo und es ist so einfach, Art von. Wir haben es gerade ausgeschaltet. Das letzte, was an diesem Bit von Menü, das SlickNav gebaut hat, ist, dass diese miteinander verbunden sind, wenn ich mich ändere, können Sie hier sehen, ich habe nicht nur als ein Portfolio. Wenn ich das ändere und ich gehe, um mich hier zu kontaktieren, sehen Sie, dass das mit diesem hier verbunden ist, sind sie alle gleich, aber zweimal angezeigt, und alles, was wir tun müssen, ist zu entscheiden, welches Display angezeigt wird. Also haben wir es für das mobile getan und das funktioniert. So ist es, gut, dass das größere Menü, so größeres Menü für Handy nicht für Tablet nicht für Desktop, lassen Sie uns mit diesem umgehen. Ich wollte [unhörbar] Desktop, Ich möchte, dass es für Tablet erscheinen, aber wenn es in Handy, Ich möchte, dass Sie gehen weg, weil das geht, um das Menü zu lesen und dieses Menü heißt, Menü. Also gehen wir zu meinen Stilen, und was ich gerne tun würde, ist, wenn ich zur mobilen Ansicht komme, würde ich gerne div Menü sagen. Sie haben vielleicht bemerkt, dass wir volle Stopps für diese Dinge verwendet haben, um sie zu beschreiben und manchmal nicht, manchmal haben wir Hashes. Wir folgen nur der Führung von der Person, die die SlickNav gemacht hat. Dies wird eine Klasse genannt, und dies wird hier eine ID genannt und Klassen haben Perioden vor ihnen, vollständige Stopps und IDs haben Hashes. Woher weiß ich, dass es ein Ausweis ist? Ein paar Dinge. Der einfachste Weg war in seinen Anweisungen. Es gibt dort sagt Hash-Menü, und ich kann es dort sehen, wo habe ich es gesehen? Ich kann sehen, es hat die ID des Menüs. Also diese Seite des Menüs würde ich gerne unsere geschweiften Klammern anziehen und ich möchte, dass Sie etwas tun Display genannt wird und dieser hier wird Block sein, nein nicht. Ich denke, es kann verwendet werden. Ich möchte also nicht, dass das Menü auf Mobilgeräten angezeigt wird. Lässt irgendwie aussehen. Gehen Sie hier, um eine Vorschau zu sehen. Also Desktop, Tablet, Handy und die kleine Leitung schaltet sich aus und er schaltet sich ein. So passiert auf dem Handy die ganze Arbeit. SlickNav Menü Tunes aus, na ja, schaltet sich ein und Menü schaltet sich aus. Sie alle aufstellen, also ist es sicher. Also, das ist es, um es irgendwie echte Grundlagen gehen jetzt, wir gehen zu gehen und Stil, weil es ein wenig schlicht aussieht Jane, wir wollen es wie unser mobiles Design aussehen lassen. Also gehen wir und machen das im nächsten Video. 6. So gestaltest du ein dynamisches Menü: Hallo, da. In diesem Video schauen wir uns das Styling unseres Blogger-Menüs an der Spitze an, denn im Moment sieht es ein bisschen so aus. Wir müssen es so aussehen lassen. Es gibt einige Schriftarten zu tun, es gibt etwas Styling mit dem Blogger-Menü, es gibt etwas Text hinzuzufügen und zu entfernen, und machen es schön aussehen. Machen wir das jetzt in Dreamweaver. Zuerst müssen wir aber etwas aufräumen. Wir haben das gerade zusammen geworfen, was großartig war, aber wir müssen eine Kernstruktur hinzufügen. Wir haben unser Körper-Tag, großartig, und darin haben wir unsere Speisekarte und das ist darüber. Es gibt etwas JavaScript, das sich unten versteckt. Was ich gerne tun würde, ist, dass wir ein Framework einfügen müssen und damit anfangen, es ist diese Sache, die einen Header genannt wird, also habe ich Header ausgewählt , habe es geschlossen, ich werde die Winkelklammern öffnen und den Schrägstrich einfügen, und Sie sehen es automatisch gefüllt dass aus, großartig, also das ist meine Kopfzeile und alles für Ihre Überschrift wird da rein gehen. Wenn ich meine Spott ansehe, dieses Ding hier. Dieser Chunk hier wird als mein Header betrachtet werden. Ich denke, Logo und Nav, das ist so ziemlich alles, was da oben geht, und vielleicht Telefonnummer. Das wird mein Kopf sein, also drinnen ist dieser Kerl. Es ist eine meiner Navigation, also geht er in den Header. Das ist einfach wirklich gut. Dies ist wirklich üblich, dies zu tun. Es gibt einige Vorteile, aber es ist hauptsächlich nur wirklich gut HTML5. Syntax, es ist vorbei. Großartig, also haben wir einen Header, dann wird alles andere in der Mitte Ihres Hauptinhalts als main bezeichnet. Schließen Sie es ab, Winkel Klammern und Schrägstrich und das wird alles sein, was auf dieser Seite ist, das heißt, es wird so ziemlich die ganze Seite sein, also wird es diese Heldenbox hier und diese sechs sein. Nun, wir hatten keine Fußzeile und dieses Design, nur um dieses Tutorial zu beschleunigen, aber Sie hätten auch eine Fußzeile hier drin. Alles würde in die Fußzeile gehen und oft ist das die grundlegende Struktur für viele der Websites. Wir werden keine Fußzeile haben, also lassen wir sie weg. Wir werden an diesem Header arbeiten und in meinem Design gibt es zuerst ein Logo, also müssen wir das hineinsetzen. Es ist vor meiner Liste oder unserer Speisekarte, also werde ich es darüber legen. Ich habe viele Renditen eingebracht, manche Leute tun es nicht. Ich werde ein Bild einfügen. Nun, ein Bild-Tag ist ziemlich lang zu tippen, also Bild und Sie müssen SRC setzen und es gibt viele Dinge, die hineingehen, so dass wir unsere hinterhältigen Shortcuts von Dreamweaver verwenden. Geben Sie einfach IMG ein und drücken Sie dann „Tab“. He, Presto. Jetzt werden wir anfangen IMG für unsere Bilder Ordner zu tippen, hey presto, schöne Arbeit bei Dreamweaver, klicken Sie auf „Enter“, und es ist nichts drin, weil wir einen leeren Ordner haben. Was wir tun werden, ist; wir gehen auf „Durchsuchen“ und wir werden die Dateien, die Sie heruntergeladen haben, die Übungsdateien, wenn Sie nicht, überprüfen Sie, es gibt einen Link irgendwo hier drin. In meiner Übungsdatei habe ich einen Bilderordner und in diesem Bilderordner habe ich das unser Laptop-Logo. Klicken Sie auf „Öffnen“. Cool. Lasst uns „Speichern“ drücken. Das letzte, was wir tun, wenn wir irgendein Bild hinzufügen , ist, dass wir diesen Alt-Text oder alternativen Text hinzufügen müssen. Es ist nur der Text, der angezeigt wird, wenn das Bild nicht geladen wird. Es wird für viele Dinge verwendet, Bildschirmlesegeräte, und auch Google verwendet es, um zu identifizieren, was auf der Seite ist, so ist es wirklich wichtig, Alt-Text hinzuzufügen. Dies ist das Bringen Sie Ihr eigenes Laptop-Logo. Wo ist sie? Werfen wir einen Blick auf unsere Vorschau. Jetzt ist es da, schön, nur in der Ecke zu sitzen. Das ist großartig. Wir haben unser Bild da drin. Lassen Sie uns nun mit dem Styling dieses Menüs fortfahren. Zuerst machen wir es zum Drei-Knopf, also werde ich den Kerl loswerden. Meine verschiedenen Dinge hier werden sein; Portfolio, es wird über mich sein und mich kontaktieren. Großartig, ausschalten. Schön, perfekt. Das nächste, was wir tun werden, ist, es nach rechts zu schweben, denn im Moment, wo es hier unten sitzt, müssen wir es über diese rechte Seite bringen. Das ist ziemlich einfach, wir gehen zu unserem CSS und wir haben es vorher getan. Erinnerst du dich an unser Menü Wir sehen es unten. Denken Sie daran, dieses Menü sind diese blauen Linien im Moment, also werden wir hier oben in meiner Desktop-Ansicht sagen, ich werde in viele Renditen setzen, ich liebe meine Renditen, nur um alles getrennt zu halten, und ich werde hier oben sagen , „Root-Menü, Ich möchte, dass Sie, geschweifte Klammern, schweben, und ich möchte, dass Sie nach rechts schweben bitte.“ Denken Sie daran, Semikolon, „Speichern“. Schauen wir uns mal an. Bingo. Als nächstes möchte ich, dass es nebeneinander stapelt. Wenn Sie sich die fertige Version ansehen, möchte ich, dass sie neben einander und nicht den Standard darunter stapelt . Gehen wir also und machen Sie das. Um es zu tun, was wir tun müssen, ist einen Blick auf unseren Quellcode hier, wir haben diese Listenelemente. Eine UL ist eine ungeordnete Liste, die eine Aufzählungspunktliste ist, und hier sind die Verbündeten in dieser Liste, also ist dies die Gesamtliste, und dies sind die verschiedenen Attribute in dieser Liste, also verschiedene Aufzählungspunkte, also ist dies die Listenelemente. Was ich in diesem Fall tun muss, ist, dass ich sagen muss, dass wir tun, was man einen zusammengesetzten Selektor nennt. Wir werden sagen: „Ich möchte eine Liste Artikel finden.“ Die Verbündeten sind innerhalb von Menüs. Ich will diese Typen, wenn sie in dieser Speisekarte sind. Ich möchte, dass Sie dieses Ding namens Display machen, und wir haben Block und keiner zuvor verwendet, wir werden dieses hier namens Inline-Block verwenden. Denken Sie daran, Blockup ist hier oben und Inline bedeutet nur , dass sie dort in eine nette kleine Zeile geraten. Hey, hey, genial. Cool. Als nächstes möchte ich sie stylen, weil sie ein wenig traurig aussehen, mit den blauen Unterstreichungen und solchen Dingen. Gehen wir und machen das. Um diesen Teil zu machen, müssen wir etwas spezifischer sein. Wir müssen tun, ist diese a-Tags zu stylen, die meine Hyperlinks sind, die sich in den Listen befinden, die in meinem Menü sind. Gehen wir und machen das. Ein weiterer zusammengesetzter Selektor. Menüs, also los geht's. Diese a-Tags Sie sind innerhalb von Listen, sie sind zufällig in diesem Menü. Ich möchte, dass du, geschweifte Klammern, ein paar Dinge machst. Die erste ist Text-Dekoration.“ Lassen Sie uns das loswerden. Textdekoration ist die Unterstreichung. Wir werden zu keiner gehen. Sie können sehen, Sie können Lines-through und Overline hinzufügen und unterstreichen, so gehen wir zu keiner gehen, Semikolon, drücken Sie „Speichern“, gehen Sie zu überprüfen. Hey, Unterstreichungen sind weg. Schön. Als nächstes ändern wir die Farbe. Lasst uns zu euch gehen. Ich möchte sagen, Sie, und wenn Sie Farbe nur von selbst eingeben, bedeutet es die Schriftfarbe. Sie können Ihren Farbwähler verwenden, aber ich werde 4e4e4e eingeben. Nur ein dunkles Grau. Denken Sie daran, am Ende, stellen Sie sicher, dass es ein Semikolon „Speichern“ gibt. Schauen wir uns mal an. Großartig. Was könnte ich tun, um die Dinge etwas einfacher zu machen, während wir es stylen? Ja, nur damit du beide sehen kannst. Großartig. Das nächste, was ich tun muss, ist ihnen etwas Polsterung zu geben, also werde ich Polsterung gehen, und wenn ich acht Pixel auffüllen gehe, sehen Sie, wenn Sie acht verlassen, können Sie sehen, dass es oben, rechts, unten und links den ganzen Weg um sie herum tun wird, was ist großartig für mich. Es ist, was ich will. Was ich tun möchte, ist, die Schriftarten zu ändern. Nun, ich könnte definitiv gehen und diese Schriftart ändern. Ich könnte Schriftfamilie eingeben und es hier tun und eine auswählen. Sie können es im Hintergrund sehen. Aber ich werde das tun müssen, sagen wir, ich möchte eine Schriftart für meine Website auswählen und sagen wir, es ist Arial oder Times New Roman oder so, ich muss dies jedes Mal wiederholen, wenn ich einen Text setze. Was wir tun werden ist, dass wir etwas Hinterhältiges tun werden, ist, dass wir „für global“ über den Desktop sagen. Ich habe es hier ganz oben gesetzt, weil es eine große Sache ist. Wir werden dieses Ding benutzen, das ein Körper-Tag genannt wird. Nun, wenn wir uns unsere HTML-CSS ansehen, ist Körper alles auf der Seite, also was wir sagen werden, sind alle Schriftarten, die sich in diesem Body-Tag befinden, ich möchte, dass Sie diese Schriftart sind und es bedeutet nur alles. Dieses A-Tag, alle Überschriften, die wir eintragen wird alles für die Fahrt mitkommen. Wir können es später überschreiben, aber ich möchte sagen: „Körper, ich möchte, dass Sie eine Schriftfamilie von haben, und ich werde im Moment Gotham, Helvetica, Arial, SANS-Serif verwenden.“ Wir werden ein wenig später über Schriftarten sprechen, weil diese grundlegenden nicht sehr cool sind. Wir wollen unsere eigenen Schriften verwenden, aber wir speichern diese für das Video nach diesem. Font-Familie, wir werden das benutzen, und da sind meine kleinen Schriften im Hintergrund. Großartig. Sie können hier sehen, dass es einfach viel einfacher ist, als zu versuchen, es jedes Mal zu schreiben, wenn wir einen Text einfügen, und wir werden es nur für die gesamte globale ignorieren. Wir könnten hier jetzt genauso wie mit der Schriftgröße tun. Schriftgröße, wir machen es, und ich ziehe diese Größen aus Photoshop. Ich habe mein Mockup und ich gehe einfach rein und überprüfe, also werde ich 18 Pixel machen. Toll, es ist ein bisschen größer. Schön, sag „Save“. Schauen wir uns mal an. Das nächste, was ich tun könnte, ist, dass es ein bisschen Padding um diese Überschrift oder dieses Header-Tag geben muss. Ich könnte das ein bisschen mehr ausblenden und das Bild separat ausblenden, aber weil sie alle darin sind, schauen wir uns an, sie sind in diesem Ding namens Header. Ich kann einfach ein bisschen Code und ein CSS zu diesem Header hinzufügen , nur um es auszufüllen, damit alles darin etwas auffüllen kann. Was ich hier tun werde, ist, unten unten unten, werde ich sagen: „Header und geschweifte Klammern“, und ich werde sagen: „Ich hätte gerne etwas Polsterung.“ Also machen wir Polsterung, oben, und vielleicht ist die Spitze 10 Pixel. Ich sage vielleicht, ich habe das schon ausgesucht. Es ist seit Ewigkeiten vorbei und entschieden, wie groß und klein, also verbringen Sie ein wenig mehr Zeit hier, um zurück zu Ihrem Photoshop-Dock zu gehen und zu entscheiden, was gut aussieht. Ich habe Polsterung, oben links 20 Pixel. Ich mache es auf dem langen Weg, ich weiß. Schauen wir uns das an. Wir machen es so, 20 Pixel. Großartig. Was Sie finden, ist, dass viele Leute das einfach tun. Wir haben oben, unten, links und rechts gemacht und es ist großartig, wenn Sie lernen, weil es schön und einfach ist. Aber sieh dir das an, lass uns clever werden. Wenn wir Padding machen und es zuerst oben annimmt, also wenn ich 10 Pixel einfüge und ein Leerzeichen hineinlege, kannst du das kleine Stören sehen? Es geht im Uhrzeigersinn herum, also als nächstes ist das Recht und alles andere ist 20, also 20, 20, 20. Es macht genau das Gleiche, Semikolon am Ende. Es geht einfach oben, rechts, unten, links. Schauen wir uns mal an. Ja, es hat jetzt ein bisschen Polsterung um ihn herum. Schön. Die nächste Sache ist, dass wir unsere Tablet-Ansicht reparieren müssen, also schau dir das an. Wir gehen runter auf das Tablet und es wird nur alle Stapel da drin, also was ich im Mockup getan habe, denken Sie daran, ich habe es, um dies zu tun und dann kommt es auf die schöne gestapelte oben, also lasst uns das tun. Was ich tun möchte, ist, wenn Sie meinen Freund Tablet bekommen, Ich möchte, dass Sie das Menü auswählen. Wir haben es hier oben getan. Wir gingen inline-Block, der sie nebeneinander stapelt. Was wir tun, ist, dass wir es wieder auf das zurückdrehen, was es war. Ich werde dich benutzen, komm her. Es ist nur derjenige, der Block sagt. Speichern Sie es. Lassen Sie uns es im Browser überprüfen. Du und Boom. Großartig. Wir könnten ein wenig Padding darunter hinzufügen, aber weil wir unsere perfekte Schriftart noch nicht haben, werden wir das noch nicht tun. Wir machen es ein bisschen später. Cool. Eines der Dinge, die ich tun wollte, ist, dass es richtig ausgerichtet ist. Ich werde Text gehen, ausrichten, und ich will, dass es richtig ist. Wenn es herunterkommt Tablet, lassen Sie es uns überprüfen, es ist auf der rechten Seite ausgerichtet. Nun, das große Ding zu ändern ist ein großes Menü, weil er hier unten ist und hey, Ich bin in grau verbunden und ich habe dieses Wort Menü Sie, obwohl ich das Gefühl, dass jeder weiß, dass das das Wort für Menü ist, aber ich liebe das ist ließ das Zeug hier drin, wenn du es brauchst, ist es einfach zu entfernen, es ist schwieriger zu setzen. Lassen Sie uns zuerst das Wortmenü loswerden. Wir werden das hier nur in drei Zeilen benutzen, also werden wir das tun. Wo steht das Wort Menü? Ich brauchte eine Weile, um auch zu finden. Es ist nicht im HTML, es ist nicht, das CSS, ist nicht in der Slicknav.CSS ist es nicht in der Jury, es ist in diesem hier genannt jquery.slicknav.js, und es gibt ein paar Dinge hier drin. Du wirst hier nicht eine ganze Menge Sachen ändern, es gibt einige Werte, mit denen du vielleicht herumspielen kannst, aber das ist das Label, das ich will. Ich werde nur meinen verlassen, aber Sie können sehen, dass ich das anpassen kann, wenn ich meinen Namen setze, werden Sie sehen, dass es dieser Typ hier ist. Ich werde das loswerden und die ganze Verhaftung lassen. Großartig, lassen Sie uns zurück zum Quellcode springen, schauen wir es uns hier an. Großartig, nichts hier drinnen, als Nächstes, und wir werden diesen großen Riesen loswerden, eine graue Schachtel. Was ich auch tun werde, ist, dass ich das hier drüben festhalten werde, weil ich an meinem Byol arbeite und es reinpassen kann. Schön, ich kann einige Anpassungen vornehmen, jetzt, diese große graue Box hier, woher weißt du, was diese großen grauen Boxen sind? In unserem HTML gibt es nur ein paar Dinge in unseren Stilen und wenige Dinge. Es gibt dieses andere CSS namens Slicknav und es wird hier drin sein. Dies sind die Stile, die Josh gemacht hat, um all diese Bit zu starten, wir müssen sie ändern. Sie sind jetzt alle hier drin. Zunächst einmal, nur weil die Art, wie dies erstellt wurde, es ist nicht wirklich so gut wie ich es mag und Dinge auf Tabbed in, und es gibt keinen Raum zwischen ihnen, ein nettes kleines Feature im Traum mit, wenn Sie einen wählen Sie den ganzen Text, und es gibt eine Option hier drüben, die „Format Source Code“ sagt. Klicken Sie darauf und sagt „Apply Source Formatierung“ und es ist einfach aufgeräumt, können Sie sehen? Macht es mir ein bisschen einfacher, herauszufinden, wo ich bin, und gut, du musst das nicht tun, und ich habe das jetzt, ich will herausfinden, was dieser graue Balken ist, und was du als Webdesigner tun wirst, ist, dass du reingehst, Wir verwenden in Chrome, um es anzuzeigen, und Vorschau Browser, und was Sie tun ist in Chrome ist, dass Sie mit der rechten Maustaste darauf klicken, es gibt Optionen für das gleiche in Firefox und Safari, und Edge Explorer, aber verwenden Sie Chrome, und klicken Sie mit der rechten Maustaste alles und gehen Sie zu Inspect, und was ich tun werde, ist, können Sie sehen, dass es hervorgehoben ist und es mir gesagt wird, dass es dieser div-Code ist, in Ordnung, klicken Sie erneut, sagen Inspect, ist div.slicknav_menu grid, und es sagt mir ein paar Dinge, und was ich suche ist, es ist ein wenig schwer, weil wir in der kleinen Größe sind. Es wird ein bisschen größer, wenn Sie es da rausziehen wollen. Aber Sie können hier drüben sehen und Sie können sehen, dass es Hintergrundfarbe? Wenn ich das umdrehe, muss ich wieder runtergehen, ja, das ist dieser Typ hier. Er ist, diese Hintergrundfarbe und dass es slicknav.css gibt, und es sagt mir, dass es eine Zeile in Zeile 64 des CSS ist, die es steuert. Wenn ich hier reingehe und nach Slicknav gehe und ich runter zur Zeile gehe, ist es 64? Ich könnte lügen, nein 64, sorry 94, und tun Sie das hier drin und es heißt 94 Startmenü, und Sie können sehen, da ist die graue Farbe, schön. Sie benutzen und verbrachten ziemlich viel Sie mögen, was zur Hölle ist das? Was steuert es? Sie können hier hineinschauen und es sagt Ihnen, was das CSS auskleidet. Ich werde diese ganze Linie greifen und einfach drehen, es funktionierte, die grauen Boxen Bar, die Farbe ist weg, aber es schiebt immer noch dieses Logo runter ich Sie, um dort rauf zu rutschen. Was wir tun können, ist dieses Menü hier ist, dass wir sagen können schwimmen nach rechts bitte, buchstabieren Sie es richtig? Sie können sehen, wenn er nach rechts kippt, öffnet einen Raum für diesen Kerl, in den er gleiten kann, großartig, das ist sicher, da rein zu kommen. Als nächstes lassen wir es gehen und ändern, um die Farben sind hier drüben, wir haben diese schöne, wo ist es? Redbox, und Sie werden feststellen, dass es keine abgerundeten Ecken und keine abgerundeten Ecken auf den Linien gibt. Ich weiß, es ist ein wirklich Menü Detail, aber ich bin nicht auf das abgerundete Zeug. Niemand ist nicht der Moment, es geht um quadratische Kanten. Lassen Sie uns in das gehen, dann schließen Sie Inspect, und springen wir zurück in unser CSS. Ich werde nicht weiter versuchen, Inspect zu verwenden , um herauszufinden, welche Klassen verwendet werden. Ich habe es schon getan, du kannst damit herumklettern. Ich weiß, dass es hier etwas ist, ich kombiniere hier es ist, dieses Ding hier genannt slicknav Button, und es hat dieses Ding namens Border-Radius. Ich brauche nicht alle Grenzradien, Wiedersehen, Speichern Sie es, Hey, weg. Es gibt Schatten nehmen, der für sein könnte wir hatten das Wort Menü Sie dort nicht brauchen, um dort zu sein, Tick-Dekoration ist der zugrunde liegende , wir brauchen das auch nicht, diese Hintergrundfarbe Ich möchte die für meine ändern Flash-Datei, jetzt ist es schön und lesen, „Speichern“. Das letzte, was ich tun möchte, ist meine loswerden, es schwer zu sagen, diese kleinen weißen Linien haben abgerundete Ecken an der Kante. Deshalb mag ich sie so sehr, und es ist dieses Ding hier. Ihr alle hier, also slick.nav.slicknav_icon-bar, wenn ihr getan habt, ist es auf Zeile 43. Es gab eine let brauchen nicht jemand von euch Kerl schön, Hit „Save“, und schön aussehen quadratische Tasten, toll. Das letzte, was ich tun muss, ist, dass es funktioniert. Aber mein kleines Menü hier ist, ich habe die Hintergrundfarbe losgeworden, aber Sie können sehen, dass diese Typen dasselbe kopieren, wenn sie herunterfallen, weil ich diese Hintergrundfarbe entfernt habe. Was wir tun müssen ist, dass ich diese Tasten ein bisschen besser aufhalten muss, lassen Sie gehen und das tun, und ich fand einen kleinen Freund es ist Zeile 1, 3, 4, slicknav_nav a, und in diesem hier gibt es keine Hintergrundfarbe, also Färbung bedeuten, dass wir Stil die Schriftart, und es ist eine weiße Schrift auf einem weißen Hintergrund ohne Hintergrundfarbe. Wir müssen eine Hintergrundfarbe hinzufügen, Hintergrundfarbe, hier gehen wir und ich habe eine Farbe, die ich F1474c schönes Semikolon verwenden möchte, lassen Sie speichern, und jetzt, hier gehen könnte hey bekommen, Sie haben eine Hintergrundfarbe. Nun, was ich wirklich tun möchte, ist Kuchen mit der Polsterung und der Schriftart und dem Schweben, aber wir werden uns keine Sorgen darüber machen, dass Sie etwas Zeit verbringen können, Sie gehen einfach in diese genau gleiche Klasse, spielen herum, aber Sie sehen Sie die Polsterung hier und erhöhen Sie sie und wir wollen es tun, aber ich werde irgendwo Zeit sparen. Das Einzige, was Sie tun wollen, ist, dass Sie drehen könnten, es spielt nur mit einem Hover, aber speichern Sie es nicht, weil Sie sich vorstellen, Sie sind auf einem Telefon, es gibt keine Möglichkeit, zu schweben, niemand sieht jemals diese schwebenden diejenigen, Mach dir nicht die Mühe, kannst du nicht, wenn du willst, und lass es uns wieder schließen. Schön sagen Speichern, und dass meine Freunde ist, wie wir ein ansprechendes Menü machen. Große Version, auf einem Desktop, aber wenn es kleiner wird, um Tablet, schließen und helle Linien und Stapel übereinander. Ich weiß, dass die Schriftarten noch keine benötigen, und dann kommt es auf den Desktop, tut mir leid Handy, und es ist nur das große Menü. Nun, diese sind wahrscheinlich zu klein als Ihre Polsterung, Sie müssen sicherstellen, dass eines der Dinge zu tun, nur wenn Sie mobile Sachen machen, ist, dass vor allem Google. Google wird Ihre Website überprüfen, um zu sehen, ob diese Tasten anklickbar sind, sie haben Methoden, um zu sehen, ob diese Berührungspunkte tatsächlich nach zu klein berührt werden können, wie mein Vater mit riesigen Finger, und Sie schlagen wie vier von ihnen auf einmal. Du musst sicherstellen, dass es genug Polsterung gibt, alle Tasten sind groß genug, dass die Leute sie deutlich treffen können, als Teil von einigen der Ranking Sachen, die Google tun, aber gute Arbeit. Wir haben es gestylt, Sie können es so gestalten, wie Sie wollen. Sie können hinzufügen und entfernen, und Farben und Schriftarten und Styling-Dinge, aber einige gute Arbeit Mann, wir haben jemand anderes Lovely Josh slicknav verwendet, um eine Menge der harten Arbeit zu tun. Es ist hauptsächlich nur das JavaScript, und ja, wir haben es zu unserem eigenen High-Five-Team gemacht. Als nächstes werden wir uns ernsthaft mit unserer Echtzeit-Vorschau beschäftigen und auf einem Mobiltelefon vorherrschen, weil es ein bisschen hart ist, diese Slide-Sache hier zu machen. Lass uns das im nächsten Video machen. 7. Echtzeitvorschau auf Handy und Tablet: Hey, willkommen zurück, und bis jetzt, was wir getan haben, ist dass wir gerade mit dem ganzen Umschalten zwischen Dreamweaver, zurück in den Browser und Schieben Dinge um Handy, und dieser funktioniert in Ordnung für Handy, aber es ist kein Mobiltelefon. Es ist nicht die gleiche Größe. Es ist länger, als es sein sollte. Also, was Sie tun müssen, ist tatsächlich eine Vorschau auf Ihre tatsächlichen Geräte, und es ist wirklich einfach mit Dreamweaver. Dreamweaver hat ein paar hinterhältige Tricks, um das zu tun. Also, wenn ich arbeite, so arbeite ich normalerweise, ist, dass ich zwei Bildschirme habe. Ich kann offensichtlich nicht für dieses Tutorial, weil Sie nur eine von ihnen sehen können. Aber was ich tun werde, ist, dass ich das hier oben wie ein Desktop sitzen lasse. Ich habe einen großen netten Mac-Bildschirm hier drüben, und dann habe ich Dreamweaver unten in diesem Bildschirm und es bedeutet, dass, wenn ich in diesem editiere, das passt. Wir sehen, dass es zur gleichen Zeit passiert. Also, wenn ich Änderungen vornehme, werden sie sofort im Browser angezeigt, was großartig ist. Das gibt mir also meinen Desktop immer da, also muss ich nicht hin und her wechseln. Nun, für die Geräte, sagen Sie Ihr Tablet und Ihr Mobiltelefon, was Sie tun können, ist, ich zeige Ihnen hier unten. Ich werde es im Vollbildmodus machen. Sehen Sie dieses Ding hier unten, dieses kleine QR-Codeleser, QR-Code, und was Sie tun müssen, ist, dass Sie auf Ihr Telefon springen und Ihren QR-Codeleser verwenden müssen. Also lass uns gehen, lass mich jetzt mein Handy schnappen. Also habe ich hier meinen QR-Codeleser. Ich werde es hier auf- und runter öffnen, unten in Dreamweaver. Ich gehe hier, klicke und bekomme meinen QR-Codeleser in der Nähe. Ich werde den Winkel auf meinem Desktop gräben. Gutes Arbeitstelefon, springt raus. Möglicherweise werden Sie nach Ihrem Benutzernamen und Passwort gefragt. - Das tut es. Kannst du es sehen, während ich es tippe? Das kannst du total. Sie wissen also, dass es mit T beginnt, aber ich werde das ausschneiden, damit Sie den Rest nicht sehen können. Sieh uns an. Wir haben es auf unserem Handy. Cool und nett, Sie machen einfach ein Foto mit QR-Codeleser. Sie müssen einen QR-Code-Leser herunterladen, sie sind kostenlos aus dem Apple Store oder von Android wie mein und dann sitzen Sie einfach diese neben Ihnen, und ich werde mich da hinsetzen und beobachten, wie ich Änderungen vornehme. Also lassen Sie uns zu unserer styles.css gehen, und was können wir auf Handy sehen? Im Moment nicht viel. Also lassen Sie mich entscheiden, was wir sehen können? Ich habe hier ein Bild, also werde ich was mit diesem Bild machen? Ich werde es kleiner machen. Also werde ich ihm eine Breite geben. Hier, ich werde diesem Kerl eine Breite von 100 Pixeln geben. Sie können sehen, dass er kleiner geworden ist. Wenn ich ihm 50 Pixel mache, ist er winzig. Du bekommst die Idee, 10 Pixel. Es bedeutet also, dass Sie, während Sie arbeiten und wie, sagen Sie, dass Sie etwas auf der Desktop-Ansicht tun, nicht wirklich erkennen, dass es etwas auf dem Tablet oder mobilen Gerät beeinflusst. Wenn Sie sie um Sie herum haben, während Sie arbeiten, bedeutet es nur, wenn Sie Änderungen vornehmen, sind Sie wie „Oh, habe die Auswirkungen davon nicht erkannt“, Wahrscheinlich der beste Grund, sie zu haben , ist , dass Sie beeindrucken Sie den Heck von jedem, der vorbeigeht. Wenn Sie von zu Hause aus arbeiten, werden Ihre Wohnkameraden oder Ihre Frau Sie ansehen und Sie werden so aussehen, als wären Sie im Minority Report. Viele Geräte rundherum, und bei der Arbeit wirst du wie eine Hardcore-Coda aussehen, mit allem, was herumfliegt. Also, das ist Echtzeit-Browser-Vorschau, und Sie können es auf Ihrem Gerät als auch tun. 8. Arbeiten mit Typografie auf einer Website: Willkommen zurück Kumpels. Das hier, wir werden uns die Schriftarten ansehen. Schriftarten sind für uns Designer super wichtig. Früher haben wir nur Arial und grundlegende verwendet. Also schauen wir uns an, eine richtige Schriftart zu machen. Jetzt haben Sie ein paar Optionen, um es zu tun und die großen beiden sind Adobe's Typekit oder Google Fonts. Beide sind großartig. Ich werde jetzt Google Fonts verwenden. Warum? Da sie schneller und einfacher sind und [unhörbar] Gehen Sie zu Google Fonts, also ist es fonts.google.com, wählen Sie eine Schriftart aus, die Sie mögen. In unserem Fall werden wir Open Sans verwenden. Warum? Es ist eine gute Schrift. Das ist der neue Arial. Sie werden feststellen, wenn Sie 100 Websites öffnen, ich wette, Sie 90 von ihnen sind Open Sans. Warum? Weil es wirklich gute Gewichte hat. Es gibt viele andere, Roboto Ich benutze viele, es ist die YouTube-Schrift. Es gibt viele hier und das coole Ding an ihnen ist, dass sie frei sind. Schauen Sie sich um, finden Sie diejenigen, die Sie mögen, und sagen Sie, dass Sie bei den Designstücken sind, in denen Sie in Photoshop sind, Sie können gehen und sagen: „Ich mag Open Sans“. Es gibt hier eine Schaltfläche Option, die besagt, wählen Sie diese Schriftart. Gibt es eine Download-Option? Klicken Sie auf die Schriftart, dann gehen Sie, Sie haben sie hier unten zu Ihrer Sammlung bearbeitet. Dann gibt es diese Option hier, die Download sagt. Das wird nichts für Ihre Website tun, aber es bedeutet, dass Sie sie auf Ihrem Computer haben. Also, wenn Sie sie auf Ihren PC oder Mac herunterladen und Sie können sie nur in Ihren Photoshop-Mockups und in InDesign verwenden sie nur in Ihren Photoshop-Mockups und und veranschaulichen, dass dies Schriftarten, die Sie verwenden können, schön. Aber Sie verwenden sie auf Ihrer Website, es ist etwas anders. Sie sagen dir, was du hier tun sollst. Sie müssen zwei Dinge tun, Sie müssen das in den Kopf Ihres Dokuments setzen. Es sagt Ihnen, was zu tun ist, legen Sie das in Ihren Kopf und das ist der Stil, den wir verwenden. Also schnappen Sie sich das. Nun eigentlich, bevor wir es tun, möchte ich es anpassen, weil ich in meinem Design verwenden möchte, habe ich Licht, regelmäßig und fett verwendet. Was Sie feststellen werden, ist die Ladezeit, je mehr Schriftarten Sie einschließen, desto langsamer wird die Seite geladen und das ist wirklich wichtig für Suchrankings. Sie möchten, dass Ihre Seite wirklich schnell geladen wird. Aber ich kann mir selbst nicht helfen. Ich will extra fett, ich meine moderat und es ist wirklich üblich, dass ich in die langsame zu kommen. Warum? Weil ich die ganze Art und Weise will jemand kursiv und ich will das und ich will das. Also werde ich 300 Licht, 400 reguläre und 800 für extra fett verwenden . Gehen wir zurück zu Einbetten und was wir tun werden, wird darauf klicken, kopieren, gehen Sie in Dreamweaver und jetzt Quellcode. Sagen Sie, dass Sie sich in den Kopf stellen. Also wissen Sie unsere Kopfzeile, die Sprache ist ziemlich wichtig. Das ist unser Kopf. Also, unser Körper, ich werde nach unten ziehen. Denken Sie daran, Körper ist alles auf der Seite, Kopf ist der Hintergrund Zeug. Das ist alles, was ich will, und es steht, dass es irgendwo hier drin steckt. Da bist du also überall drinnen. Es sagt nur, es wird zu Google Fonts verlinken und es wird für diese Schriftfamilie Gericht suchen, Open Sans mit diesen drei Gewichten. Sie müssen nicht zurückgehen, sagen wir, Sie möchten später 600 verwenden. Sie können es einfach richtig eingeben, aber geben Sie es einfach dort ein und Sie haben Zugriff darauf. Denken Sie daran, dass es Ihre Schriftarten verlangsamen wird. Das ist also die Hälfte davon. Also sucht es nach dieser Schriftart, Sie müssen sie jetzt tatsächlich in Ihrem CSS verwenden. Also lasst uns zurück in Google-Schriften springen. So sagte dies tun, dann sagte es, verwenden Sie diese Schriftfamilie von Open Sans endet hier, kopieren Sie es. Was wir tun werden ist, wir haben es früher unter styles.css gemacht und wir sagten im Körper, also ist alles im Körper diese Schriftfamilie von Gotham. All diese werden wir das tun. Also schalten Sie es einfach hoch und es sagt nur, dass Sie Open Sans stattdessen verwenden. Lassen Sie es speichern, lassen Sie einen Blick. Hören Sie, es ist meine schöne Schrift. Sie könnten sagen: „Es sieht nicht viel anders aus.“ Ja, es ist nicht viel anders als Arial, aber es ist viel besser. Ja, im Moment kommt es zu 400. Ich könnte reingehen und es ändern. Sie können hier drin sehen, gehen wir runter, wo das Ding es kontrolliert hat? Da ist es, da. Es tippt Schriftgewicht und ich könnte sagen, 800, sparen. Ich habe da drin eine schlechte Syntax gemacht. Oh, das sieht gut aus, retten Sie es, springen Sie raus. Dinge sehen kaputt aus, ich habe meine Schriften verloren, alles verloren. Ich gehe zur Akte, speichere alles. Es ist ein bisschen Syntax falsch, ich habe es gebrochen und ich kann nicht sehen. Nein, hab ich nicht, rette einfach alles. Manchmal passiert das in Dreamweaver, gehen Sie einfach Datei, speichern Sie alle und es speichert alle diese separaten Dateien, mit denen Sie vielleicht arbeiten. Hey, riesige, mutige Schrift. Also werde ich das ausschalten, gehen Sie zurück zum Standard 400, speichern. Gute Arbeit, wir haben eine Schrift. Kannst du mehr als eine Schriftart haben? Natürlich können Sie, aber Ladezeiten werden verschlimmert. Also gehen Sie in Google Fonts und Sie werden eine andere finden, Sie müssen es wieder in den Kopf legen und es wieder irgendwo setzen. Sie müssen es für Körper verwenden oder vielleicht möchten Sie es nur für dieses Menü verwenden. So können Sie viele Schriftarten verwenden, aber denken Sie daran, dass es ein wenig langsam wird. Warum verwenden wir Typekit? Nur weil es etwas länger dauert und Sie dafür ein kostenpflichtiges Abonnement benötigen. Sie haben ein kostenpflichtiges Abonnement für Typekit, da Sie über eine Credit Cloud verfügen, da Sie den neuen Dreamweaver verwenden. So können Sie das völlig verwenden, es dauert nur ein paar zusätzliche Schritte, um eingerichtet zu werden. Es gibt verschiedene Schriftarten auf ihnen, es gibt viele der gleichen Schriftarten. Also werfen Sie einen Blick auf Typekit im Vergleich zu Google Fonts und finden Sie die Schriftart, die für Ihr Design funktionieren wird. 9. So erstellst du unsere Hero-Box: Hey, willkommen zurück. In diesem Video werden wir uns die Erstellung dieser Boxen unten hier ansehen. Wir fangen hier mit diesem Ding an. Dies wird in der Regel die Heldenbox genannt, manchmal das Jumbotron. Das erste, was wir tun müssen, ist, müssen wir ein bisschen Struktur zu unserem Hauptteil hinzufügen, etwas namens Zeilen und Spalten. Nun, was ist eine Zeile und Spalte? Es ist die zugrundeliegende Struktur von so ziemlich allen responsiven Websites und wir brauchen es, es ist aber ziemlich einfach. Genau wie Excel, denken Sie an Excel. Dieses Ding hier ist eine Zeile, eine Spalte. Das Ding hier ist eine Reihe, drei Spalten. Das müssen wir wissen. Was wir tun werden, ist, dass wir in unseren Dreamweaver springen und die Zeilen und Spalten einholen. Wir werden zu unserem Quellcode springen, und wir haben unseren Header, da ist der da, und dann ist da unser Haupt. Wir werden ein paar Reserven dazwischen und ein paar Abstände da drinnen setzen. Ich werde Tab quer, und was ich tun möchte, ist in einige Zeilen zu setzen. Wir werden dieses Ding verwenden, das Div-Tag genannt wird. Jetzt sind div-Tags Divisionen des Raumes. Es ist einfach, sich an sie zu erinnern. Was wir tun müssen, ist, dass wir ein div-Tag erstellen müssen. Wir werden etwas schaffen, das eine Div-Klasse genannt wird, wir werden diesem einen Namen geben und wir werden diese eine Zeile nennen. Dann schließen wir es ab. Dann werden wir dieses div-Tag durch eckige Klammern schließen. Genau wie wir es für unser H1 getan haben, schließen wir es mit den Winkelklammern und dann mit dem umgekehrten Schrägstrich ab. Ich habe eine Reihe. In dieser Zeile möchte ich eine Spalte. Ich werde gehen, genau das Gleiche wieder. Ich werde in eine Div-Klasse setzen, großartig, ich werde diesen einen Col nennen. Schließen Sie es ab. Öffne den letzten Bit umgekehrten Schrägstrich und es beendet es, und das wird meine Spalte innen sein. Das ist der erste. Stellen wir sicher, dass wir die anderen machen. Ich werde dir jetzt ein paar coole Sachen zeigen. Anstatt div class equals und all das sortiert von Sachen eingeben zu müssen, ist es ziemlich gut mit Code Hilfe dort, um es einfacher zu machen. Aber sie machen es noch einfacher, dieses Ding im Hintergrundcode ima zu verwenden. Alles, was es tut, bedeutet, dies zu beobachten, wenn ich in.row lege, erinnere dich an einen Punkt davor bedeutet, dass es etwas ist, das eine Klasse genannt wird. Wenn es ein Hash davor ist, haben wir früher gelernt, es ist eine ID. Wir machen einen Kurs. Sie setzen das einfach ein und sagen im Gegenzug, Rückkehr tut nichts, drücken Sie Tab-Mitglied von früher an, und schauen Sie, nur erraten, weil es so eine gemeinsame Sache ist. Es weiß, dass, wenn Sie es in eine Klasse und eine Registerkarte einfügen, es nur davon ausgeht, dass Sie ein div-Tag möchten. Div Klasse Reihe, genial, geben Sie das zurück und wir haben eins, zwei, drei. Nun, in diesem Fall, was wir tun werden, ist nur wegen des Layouts, das ich tun möchte. Ich will, dass das hier eins, zwei, drei ist, also gibt es zwei Reihen von drei Spalten. Aber was ich tun werde, ist, wenn es hier runter kommt, Tablet, wenn ich sie zwei getrennte Reihen hätte, bedeutet das, dass ich eins, zwei, drei hier habe und dann eins, zwei, drei, und das sah ziemlich seltsam aus. Was wir tun werden, ist, dass wir in nur einer Reihe stehen. Wir werden in sechs Spalten setzen. Es bedeutet nur, dass diese schön zusammenbrechen. Es bedeutet, dass, wenn ich hier runter komme, sie alle Techniken, jede von ihnen fließen in die Box, weil sie alle Teil derselben Reihe sind und nebeneinander schweben. Sie müssen mit Ihrem Design experimentieren. Wenn Sie vier und vier haben, könnten Sie definitiv zwei Zeilen mit vier Spalten haben, die funktionieren würden. Aber es musste damit herumspielen. Ich weiß, wann Sie diese Vielfachen von drei haben und Sie wollen, dass es das tut. Ansonsten ist dieser Typ in einer separaten Reihe und wird nach unten geschoben und du hast diesen Wellenbruch. Sie werden alle derselbe Typ sein, vertrau mir. Wie viele Spalten möchte ich? Ich will zwei oder drei. Es wird mich ewig dauern, nicht ewig konnte ich einfach anrufen und kopieren und einfügen, und wird sogar noch klarer. Ich werde nur in Anruf tippen und bevor ich Tab drücken, werde ich n mal treffen, und ich werde in sechs setzen, also mal ist nur die Sternchen. Jetzt Tab drücken. Hey, geh rein. Dies sind die Tricks, die Sie schnell bekommen, wenn Sie das von Web-Designer bringen. Lassen Sie speichern, so dass wir unsere Zeilen haben, haben eine Zeile mit einer Spalte. Ich habe noch eine Reihe mit sechs Spalten. Das wird mein Stapel sein, weil ich will, dass dieser Held in diesen hineingeht. Lass uns das machen. Um einen Helden zu erschaffen, was wir tun werden, ist, dass ich hier reinkomme. In dieser Spalte werden wir einen weiteren Co-Helden machen, und wir werden Tab treffen, aber in diesem Fall, so wie wir es für Zeile und Col getan haben, dieses hier, wir gehen tatsächlich mit Stil jetzt. Im Moment sind dies nur unsere Gesamtstruktur , die wir nicht wollten, dass sie überhaupt installiert werden. Aber dieser Typ hier, wir gehen in Stil. Was wir tun werden, ist, dass wir zu unseren CSS-Stile gehen. Wir werden es für unsere Heizung tun, gut global und mehr Dosen. Wir werden sagen. Hero. Klassen haben eine Periode davor. Können Sie Klammern, und wir werden ein paar Dinge tun. Lassen Sie uns Hintergrundbild machen. Hintergrund- Bild. Seine URL, wenn Sie mit Hintergrundbildern zu tun haben, und durchsuchen. Jetzt ist das Mitglied, das meine Dateien betrachtet, die ich heruntergeladen habe. Für die Übungsdateien können Sie Ihre eigenen verwenden. Das ist mein Heldenhintergrund. Diese Hintergrund-Sache, ich habe Photoshop bekommen und ich habe nur Ihre [unhörbar] nach unten drehen, so dass es ausgewaschen aussieht. Ich setze Zecken auf die Oberseite. Großartig, drücken Sie Speichern, und denken Sie daran, schließen Sie es am Ende, Semikolon, um es zu beenden. Lassen Sie uns gehen und überprüfen Sie es im Browser. Nichts passiert. Warum? Weil er da ist. Aber weil er keine Substanz hat, gibt es ein Hintergrundbild. Das Hintergrundbild hält es nicht offen. Was wir tun müssen, ist ihm etwas Höhe zu geben. Nun, es ist wirklich ungewöhnlich, ihm Höhe zu geben, warum? Weil wir wollen, dass der Inhalt darin die Höhe definiert. Wenn Sie arbeiten, fügen wir einfach oft Summenauffüllung oben und unten hinzu, nur um die Dinge in Gang zu bringen. Padding, es wird 52 Pixel von Null Pixel sein. Null Pixel für die rechte und 72 für den unteren und 72 für die linke Seite. Drücken Sie Speichern, und lassen Sie sich einen Blick darauf. Sie werden jetzt sehen, es hat gerade etwas Polsterung von oben und unten und links, und ich habe es auf der rechten Seite nur auf Null gelassen, und deshalb können wir das Bild jetzt sehen. Das Bild macht nicht das, was wir wollten. Wenn ich das ausdehne, wiederholt es sich. Sie können die Wiederholung dort sehen. Aber wir wollen, dass es im Grunde reagiert. Was wir tun werden, ist, dass wir in Gehör gehen und wir werden dieses Ding benutzen. Wir werden Hintergrund verwenden, und es wird Größe sein, und wir werden diesen als Deckung verwenden. Cover ist ein wirklich praktisches, wenn ich auf Speichern klicke, schau es dir an. Es ist derjenige, der sich ausdehnt, passt, schau dir das an. Wird kleiner, es wird auf allen Größen funktionieren. Es sieht jetzt nicht perfekt aus, weil es alles eingequetscht ist, aber wenn wir Inhalte hinzufügen, wird es schön aussehen. Oft ist die Hintergrundabdeckung diejenige, die Sie den Hintergrund von Boxen reaktionsschnell machen möchten. Als nächstes ist, lassen Sie uns einen jetzt Text setzen und ihn stylen. Ja, damit zu tun. Was wir tun werden, wird zu unserem Quellcode gehen und in der Heldenbox, ich habe 10 gesetzt. Die erste setzen einen Text da ist diese ima, und dann digitale Designer. Offensichtlich wird sich nicht ändern für das, was Sie tun werden. Lass uns mitspielen, um die Vorstellung davon zu bekommen. Normale Körper Ticks, wir haben keine Heizungen vor dem Bewegen H1, die wichtig sind , und Sie sollten nur wirklich eine H1 eine pro Seite treffen. Alle Risiken, die oft als p-Tag oder Absatz. Wir werden nur ein p-Tag verwenden. Was war es? Es war Ima. Ich werde das p-Tag mit einem Schrägstrich abschließen, das es vorausgefüllt hat, speichern. Lassen Sie uns im Browser überprüfen und schauen Sie sich den richtigen an. Da ist diese kleine Ima. Lass uns das installieren. Jetzt könnte ich das p-Tag stylen. Das Problem ist, wenn ich ein p-Tag style und ich werde diese und viele verschiedene Seiten verwenden. Wenn ich es so mache, als wäre es mein Make-up, das groß und mutig ist, nimmt jeder mich groß und mutig. Was wir tun werden, ist eine kleine spezifische Klasse für diesen Kerl zu machen. Alles, was Sie dazwischen tun, ist, dass wir eine Klasse erstellen, und wir werden diese eine Klasse nennen, und wollten ihr einen Namen geben. Ich werde meinen U-Boot anrufen, kopieren Sie das. Jetzt werde ich gehen, um diese Klasse zu definieren und so viele Stile zu treffen. Ich gehe in meine Desktop-Ansicht. Ich gehe hier rein. Also, was Jungs vor einer Klasse investieren, das ist richtig. Narren Stopp oder eine Periode, und ich werde es zu stylen. Jetzt, was ich es so gestalten möchte, wie es ist. Zunächst einmal möchte ich die Farbe und die Farbe nur kaufen sich Stile der Schriftart. Nun, es gibt sehr wenige [unhörbare] in dieser Zahl, an die ich mich erinnere, und #fff ist was? Das ist der Einzige, den ich kenne. Schriftart weiß, es wird diese schöne große kühne Farbe sein. Du gehst, das wird 800 Pixel weniger sein. Was ich tun könnte, ist die Schriftgröße zu ändern und ich ziehe nur diese Schriftgrößen aus meinem Photoshop-Make-up. Sie können herumspielen, Versuch und Irrtum. Ich weiß, dass der Rand unten hier gespielt werden muss. Eigentlich könnten wir das bis danach lassen, damit wir alle Schriftarten sehen können. Wir lassen das aus, großartig. Überprüfen des Browsers. Hey, du hast eine Schrift. Es ist nicht groß und mutig. Warum nicht? Pixel, es sind keine Pixel. Dies ist nur das Gewicht 800. Danke. Lassen Sie uns rein- und drunter, und es ist dieser Kerl hier, der digitale Designer. Lasst uns das hineinlegen und das wird das wichtigste Wort sein. Dies wird mein H1 anstelle eines p-Tags sein. Warum? Sie benötigen mindestens eine Hass pro Seite, um Google in den Suchmaschinen zu sagen, was diese Seiten über. Wenn ich die H1 als ima, Google würde kommen zwei diese Seite und sagen, „Ihre Website ist alles über diese Sache namens ima. Aber ich möchte, dass es um Digital Designer geht. Gehen wir hier rein. Zurück zu meinem Quellcode. Darunter werden wir es in H1 setzen. Ich werde es schließen. Wie soll ich es nennen? Es ist ein digitaler Designer. Ich werde es mit meinen Winkelklammern vorwärts Schrägstrich schließen. Das ist mein H1. Ich werde Knoten eine Klasse verwenden, weil warum? Ich werde dieses H1 haben ist, jede Seite wird den gleichen Titel verwenden. Ich werde H1 benutzen. Lassen Sie uns das H1 und die Zahnspangen aufhalten. Sie werden bemerken, dass wir keinen Zeitraum davor oder einen Hash gestellt haben. Es gibt nur einige Dinge, die vorgefertigt sind wie p-Tags, H1s, Bild-Tags, sie treffen keine Tags. Die vorgefertigte in HTML, wir brauchen nichts zu ihnen hinzuzufügen. Das ist das Zeug, das wir alleine ausmachen. Das Zeug, das nie zuvor im Leben existierte, hat entweder eine Periode davor oder einen Hash. Was wir tun werden, ist, dass wir ihm eine Farbe geben. Denken Sie daran, die eine Farbe, die ich kenne, Schriftfarbe weiß. Dieser wird die dünne Biene geben. Schriftart weiß wird 300 Dipol px sein, und lassen Sie uns eine Schriftgröße eingeben. Dieser ist eine schöne, große, gesunde 52 Pixel und speichern Sie es. Werfen wir einen Blick in den Browser. Es gibt ein paar Dinge, es gibt einige Standardwerte, h1s sind standardmäßig nur aus der Box gekommen. Jemand hat vor langen Tagen entschieden, dass sie eine wirklich große Lücke vor ihnen haben und p-Tag eine kleine Lücke darunter hat. Zusammen haben sie eine Riesenführung. Also werden wir Ränder auf der Unterseite und minus sie verwenden. Lass uns das machen. Die Unterposition. Was wir tun werden. Du könntest den Rand der Spitze von h1 machen, oder ich mag es, diesen Raum nach, also werden wir h1 tun. Wir werden mit dem Boden wieder marschieren. Sie werden minus 54 Pixel sein. Das wird mit unserem Abstand herumspielen. Da gehst du. Schön. Nächstes Bit wird es Quellcode sein, und wir haben den Absatz Pixel darunter. Jetzt werde ich es hier reinlegen und ich werde ein P-Tag setzen. Jetzt möchte ich eine neue Klasse setzen, weil ich hier nicht dieselbe verwenden möchte, also was ich tun werde, ist meinen Trick zu verwenden. Ich bin in der P, wenn ich auf den Tab klicke, wird es reinlegen. Aber ich könnte p Klasse eingeben. [ unhörbar] Um wirklich clever zu sein Dreamweaver tut dies p. erinnern. aus meiner Klasse und ich werde diese eine Überschrift-Körper-Kopie nennen und Tab drücken. Es hat mein p-Tag erstellt und die Klasse mit diesem Ding hier namens heading-body-copy hinzugefügt . Lassen Sie uns das p-Tag auf meinem Absatztext hinzufügen. Lassen Sie uns es in einem Browser überprüfen. Whoop. Tut das manchmal. Manchmal müssen Sie wieder in Dreamweaver gehen und einfach „Alle speichern“ drücken. Wieder hier drin ist das großartig. Jetzt müssen wir einige Stile auf dieses p-Tag anwenden. Gehen wir zu unseren CSS-Stile. Hier oben in meinem globalen oder meinem Desktop werde ich die Klasse eingeben, die es war Header, Überschrift. Ich kann mich nicht erinnern. Ich schätze nur. Mal sehen, ob es funktioniert. Eigentlich Farbe, denken Sie daran, Farbe für sich selbst ist für die Schriftart. Denken Sie daran, dass fff für Weiß ist. Eigentlich geht es um unsere Schrift. Schauen wir mal nach, schauen wir mal. Was wir tun könnten, ist mit diesem zu spielen, weil der Abstand danach nicht groß ist. Sie bemerken, dass ich keine Schriftgröße eingegeben habe. Wenn Sie eine Schriftgröße allein lassen, werden standardmäßig 16 Pixel ausgewählt. Das ist eine wirklich übliche Größe. Versuchen Sie nicht zu klein zu gehen. [ unhörbar] das ist diese Strafen von Google für Schriftarten, die wirklich schwer für Menschen mit Behinderungen zu lesen sind. Jedenfalls. Was wir tun werden, ist mit der Marge für diesen zu spielen. Wir werden margin-bottom minus fünf Pixel tun. Schauen wir uns mal an. Ja, es geht darum, wie ich es wollte. Es ist [unhörbar] ein bisschen groß. Eines der Dinge, die Sie hier sehen können, ist, dass ich hier keine Polsterung auf der rechten Seite gesetzt habe. Warum? Weil es etwas gibt, das ich tun möchte. Es ist ein bisschen knifflig, aber es ist nicht so schwer. Ist dieser Typ hier, will ich ihm einen rechten Spielraum geben. Ein Rand nach rechts. Wir werden einen Prozentsatz anstelle einer festen Zahl verwenden. Es bedeutet nur, dass der Prozentsatz schön und groß sein kann, wenn er in einer großen Größe ist. Wenn wir also 20 Prozent verwenden, ist es ziemlich breit, wenn es 20 Prozent eines solchen Breitbildschirms ist. Aber wenn es kleiner wird, beginnt es allmählich kleiner als Prozentsatz als auch. Sie könnten total einfach tatsächlich verwenden, sie nennen eine absolute Größe, wenn Sie Pixel verwenden, aber diese hier ist eine relative Größe. Polsterung stellen sicher, dass Margin- richtig und es wird 20 Prozent sein. Das ist relativ zur Größe der Box, in der sich befindet. Großartig. Ich werde hier eine Polsterung setzen. Sie werden feststellen, dass es hier ziemlich groß ist. Wir wollen zu den kleineren Größen kommen. Es wird zunehmend kleiner, so dass es nicht zu destruktiv ist, wenn es runter kommt. Großartig. Das sind die Schriftarten. Schauen wir uns das Hinzufügen unserer Schaltfläche an. Es ist dieser Typ hier. Dieser Let's Reden Button. Sie können darauf klicken und geht vielleicht auf unsere Kontaktseite. Gehen wir und machen das. Jetzt, wenn wir eine Schaltfläche einfügen, wirklich, was passiert, ist, dass wir etwas Text setzen, wir werden etwas Polsterung um ihn herum legen und diese Polsterung mit einer Farbe füllen, und es wird wie eine Schaltfläche aussehen. Gehen wir und machen das. In meinem Quellcode. Wir gehen hier runter und unter meinem P-Tag hier werde ich einen Link setzen. Nun, also möchte ich, dass es auch ein Link ist, also möchte ich, dass es klickbar ist. Wir fangen mit einem Tag an. Jetzt haben wir einen Tag gesucht, aber wir haben keine unserer eigenen erstellt. Jetzt ein Tag schreiben dauert ewig. Es ist ein href und dann setzen Sie in, wo Sie wollen, dass es gehen. Es ist ein ziemlich langer Prozess. Wenn Sie einen Link ausführen, wird ein Tag normalerweise auch nur Hyperlinks genannt. A, lege es in eine Registerkarte, und setzt in den href und den ganzen Müll darin. Wir werden in der Lage sein, [unhörbar] und wir werden eine zu tun und eine Klasse hinzufügen, um es zur gleichen Zeit. Wir nennen das hier, lass uns reden. Drücken Sie den Tab. Kannst du all das schöne Zeug sehen, das für uns gemacht wurde? Wir haben einen Hyperlink, auf den bereits eine Klasse angewendet wird, die heißt „Let's-talk“ und lassen Sie uns hier reden. Speichern Sie es. Jetzt müssen wir diesen Kerl hier stylen, also springen Sie in unser CSS. Lass uns ein paar Routinen reinlegen und lass uns machen und reden,. Lass uns reden, geschweifte Klammern. Zuerst, lassen Sie uns in eine Hintergrundfarbe setzen, weil wir Hintergrundfarbe beginnen können. Dieser ist Hash und es ist eine Hintergrundfarbe von f147 ist die ich die Farbe von Pfirsichrot verwendet habe. Schauen wir uns mal an. Es ist da. Sie können sehen, wohin wir gehen werden. Wir brauchen ein bisschen Polsterung um ihn herum. Lass uns das machen. Lass uns Padding machen und ich gehe zu acht Pixeln. Siehst du hier, es ist standardmäßig acht ringsum. Oben, unten, links und rechts, wenn ich es so lasse. Wenn ich es in eine zweite, was sein wird, was ist es, 30 Pixel. Kannst du sehen, dass es oben und unten bei acht Pixeln, aber links und rechts bei 30 ist? Cleveres CSS. Du kannst sie alle ausfüllen. Aber wir sind hinterhältig darin, genau das zu tun, was wir brauchen. Großartig. Wir haben einen Knopf. Es ist anklickbar. Geht nirgendwohin. Kannst du hier sehen? Wir haben diesen Href. Ich habe den Link nicht wirklich erwähnt. Was Sie hier schreiben würden, ist, dass Sie schreiben würden, gehen Sie vielleicht auf die Kontaktseite contact-us.html. Das wird die Seite sein. Wir haben diese Seite noch nicht. Sie klicken darauf und kommen mit einem Fehler auf. Wenn Sie arbeiten, anstatt ein leeres Feld zu hinterlassen, legen Sie es oft in ein Pfundzeichen oder einen Hash-Schlüssel. Es bedeutet nur, dass es funktioniert. Aber es gibt keine Fehler, die sich verwirren. Denn wenn du es an einen Kunden schickst und sie testen, und du sagst nur: „Hey, schau dir die Website an.“ Das Aussehen und Gefühl, aber nicht das eigentliche. Es ist noch nicht vollständig ausgebaut. Sie klicken darauf, werden sie zu Ihnen zurückkommen und sagen. „ Hey, die Verbindung ist kaputt und es funktioniert nicht.“ Also setzen Sie einfach einen Hash nur als Platzhalter ein und stellen Sie sicher, dass Sie das später ausschalten. Großartig. Das nächste, was wir wieder bei unseren Stilen tun wollen,. Was werden wir tun, wir tun Sie. Textdekoration Das ist die Unterstreichung. Lass uns das loswerden. Lassen Sie es uns keines sagen. Wählen wir eine Schriftart aus. Es ist keine Schriftart, es ist nur Farbe von selbst, fff. Es ist Hash. Ich muss diese Syntax da reinlegen. Sie können Großbuchstaben oder Kleinbuchstaben setzen. Es liegt an dir. Anfahrt dorthin. Ich habe einen Knopf. Braucht vielleicht ein wenig Polsterung. Aber lassen wir das für den Moment. Was sieht dieser hier aus? Ja. Wir kommen dorthin [unhörbar] Box. Sieht gut aus. Eine Sache, die wir tun, bevor wir gehen, ist, dass es sich für immer erstreckt. Das ist in Ordnung bei den Größen des MacBook Pro. Es ist groß genug. Aber wenn du einen riesigen Bildschirm wie meinen anderen hier hast oder einen iMac, wirklich großen Bildschirm, wird sich das strecken und dein eigenes Menü wird den ganzen Weg da drüben sein und dein Logo-Signal dort drüben, und es wird nicht großartig sein. Wir werden einige Grenzen in Bezug auf die Breite der Markierungen haben. Wie groß wir wollen, dass es wird. Was wir tun werden, ist in unseren Dreamweaver zu springen, und was wir sagen werden, ist, dass ich möchte, dass es nicht hierher kommt. Es gibt etwas, das Max width genannt wird. Was können Sie tun? Sie können es unserem Körper tun, denn denken Sie daran, dass unser Körper alles ist, was auf der Seite ist. Ich möchte sagen, Körper, der auf der Seite ist, ich möchte, dass es eine maximale Breite hat und nicht groß wird, als 1024 Pixel zu sagen. Das ist die Größe, die ich in Photoshop entworfen hatte, 1024 ist eine gemeinsame Größe. Du musst sagen, 1024 nicht 1.024. Wenn du 1.024 sagst, werden sie wissen, dass du Neuling bist und du weißt nicht, was du tust. Also 1024. Oder noch größer als das. Sie können es jede Größe machen. Schauen wir uns mal an. Wenn es hier unten ist, dehnt es sich und macht coole Dinge. Aber dann kommt es zu einer Bildschirmgröße, es wird nicht größer. Sehen Sie den Doppelpunkt von 1024 oder sagen 1200, ist ein weiterer wirklich cool. Ich werde nur einen hier lassen. Das eine der Dinge obwohl, haben Sie bemerkt, dass es standardmäßig links ausgerichtet ist. Was wir tun müssen, ist, wenn Sie etwas ausrichten, müssen Sie etwas tun, das margin-left auto und margin-right auto genannt wird, also nennen sie es. Es wird den automatischen linken und rechten Rand machen und es sitzt nur in der Mitte dort. Sieh uns an. Cool. Es wird zu einer überschaubaren Größe, und Sie mein Freund haben begonnen, den Inhalt zu bauen. Nun, viele andere Sachen, die wir tun werden, ist nur eine Wiederholung davon. Sie werden viele div-Tags sein, aber Container, stylen Sie es, und Sie werden sich eine hübsche kleine Website haben. Gehen wir und machen unsere Boxen, die hier unten im nächsten Video sind. 10. So fügst du unser Bildraster hinzu: Ok. In diesem Video, was wir tun werden, ist, werden wir diese Gitter unten hier unten hinzufügen. Lass uns gehen und das tun, wenden wir uns an Dreamweaver. Sie werden hier in diese Säulen gehen. Was wir tun werden, ist in dieser Spalte, wir werden ein „Img“ setzen, wie wir es vorher getan haben und dann „Tab“ drücken, und dann werden wir auf „Bilder“ klicken, gehen Sie zum Ordner „Bilder“. Jetzt haben wir sie noch nicht im Ordner, also werden wir auf „Durchsuchen“ klicken. Wir gehen zu meinem „Desktop“, finden die heruntergeladenen Übungsdateien und „Bilder“. Hier gehen wir „Thumbnail 1". Schön. Stellen Sie sicher, wenn Sie ein Bild setzen und setzen Sie die „Alt“ Ticks erinnern, es ist für Sehbehinderte, es ist für Menschen, die Bildschirmlesegeräte und auch für Google. Ich kann mich nicht erinnern, was dieses Bild ist, „Liebesbild“, sie sind aufregend. Was wir tun wollen, ist, lassen Sie uns im Browser überprüfen. Überprüfe den richtigen. Da ist es da. Ich habe meins etwas größer gemacht. Warum? Weil ich gerade gehört habe, dass sie die Größe ändern können, wenn sie runter zu kommen, können Sie sehen, wenn sie auf Handy kommen, es tatsächlich ziemlich groß wird? Wenn Sie diese Stylen, stellen Sie sicher, dass Sie verwenden, da wir das gleiche Bild in allen drei Größen verwenden und es einfach reaktionsschnell machen. Stellen Sie also sicher, dass Ihr Bild groß genug ist, egal wie groß es sein wird. Als nächstes könnten wir das nur duplizieren. Wir werden alle diese Kerle löschen. Haben Sie meinen Cursor, Sie können es kopieren und einfügen, das funktioniert. Aber eine coole Abkürzung ist, setzen Sie Ihren Cursor irgendwo in hier gehen „Befehl D“ oder wenn Sie auf einem PC sind, gehen Sie „Control D“. Geh einfach „Kontrolle D, D, D, D“. Wir haben alle unsere kleinen Jungs. Was wir tun müssen, ist, diese auszuschalten. Ich kann hier nicht einfach den Text ändern. Warum? Denn erinnern Sie sich, als wir hier waren, waren wir in „Durchsuchen“ und tatsächlich in meinen Ordner kopiert? Ich muss sie bewegen. Schauen wir uns das an. Irgendwo einfach oben da ist, das ist die Website. Da sind die Bilder, und da ist der Typ, der kopiert wird. Dies ist mein Ordner mit Übungsdateien. Lass mich all diese Typen schnappen. Kommt her, Jungs, ich kann euch nicht sehen. Ich hasse das wegen einem Mac. Sie sind irgendwo da drin. Ich muss in den Ordner „Bilder“ gehen. Geh da rein. Großartig. Da sind alle meine Bilder. Jetzt sollte ich in der Lage sein, hier zu gehen, also wird es „Thumbnail“ sein, eigentlich, dieses Thumbnail. Weil ich es gerade im Hintergrund kopiert habe, muss ich es vielleicht tun, da es nicht erscheint, also werde ich „Speichern“ drücken und es gibt eine Aktualisierung, es ist [unhörbar] sowohl auf einem Mac als auch auf einem PC. [ unhörbar]. Anfahrt dorthin, wir kommen dorthin. Nun, eine Sache, die Sie tun müssen, ist, dass ich die nur kopiere und sie dort einklemme. Sie sollten den alten Text für all diese ändern, es ist wirklich wichtig. Wichtig genug, dass ich es jetzt nicht tun werde, weil ich nur ein Tutorial mache. Es ist nicht meine eigentliche Seite. Habt ihr alle, lasst uns sie im Browser überprüfen. Sie sind alle drin. Standardmäßig werden sie übereinander gestapelt. Was wir tun müssen, ist, dass sie nebeneinander zusammenbrechen, also stapeln sie sich. Das werden wir tun. Gehen wir zu Dreamweaver und machen das jetzt. Okay, um es zu tun, haben wir eine Klasse illegale Spalte. Aber wir werden nur sagen, wenn wir all diese Cols nach links drehen, und sie werden ineinander bleiben. Wir haben vorhin schwimmt und wir haben das Navigationselement nach rechts geschoben, es schwebt über diesen Weg. Wenn Sie nach links schweben, stapeln sie sich weiter nebeneinander, da sie standardmäßig in der Linie untereinander stapeln. Lassen Sie uns in Web styles.css irgendwo an der Spitze gehen hier. Es spielt keine Rolle, wohin es geht. Ich stelle diese großen Dinge gerne an die Spitze. Denken Sie daran, dass dies eine Klasse ist, also habe ich vergessen, den Punkt zu setzen, die Zahnspangen zu töten, lass uns schweben, und wir gehen nach links auf dein Bild, schau. Okay, also schweben sie. Es gibt nicht genug Platz für sie alle, aber sie kommen meistens da rein. Also, was wir jetzt tun werden, ist eine andere Klasse zu schaffen, wir werden diese in drei Teile teilen. Gehen wir und machen das. Nun, dieses Bit, das wir jetzt tun werden, ist die Arbeit mit etwas namens Gitter, das ist der rohe Begriff, mit dieser Positionierung umzugehen wo wir sie dazu bringen, eine Richtung auf den Desktop zu stapeln, und eine andere Weise in Tablet und dann wieder in Mobilgeräten. Wir haben es mit dieser Sache zu tun, die als Gitter bezeichnet wird. Was wir tun werden, um dieses Ding zum Laufen zu bringen, ist, dass wir eine Klasse erstellen und diese hier „Col-lg“ nennen, groß. Es ist wirklich typisch, Desktop groß, Tablet-Medium zu nennen , und Sie haben klein, und dann können Sie auch extra klein haben. Wir werden diesen Kerl benutzen. Was wir sagen werden, es wird ganz einfach sein. Wir werden sagen, Sie haben eine Breite von, jetzt könnten wir 33,3 Prozent tun und sparen. Ich glaube, es wird funktionieren. Wir haben es erstellt, aber wir haben es nicht angewendet. Wir haben dieses Ding erschaffen, jetzt gehen Sie hier rüber, und wir werden es auf diese Klasse anwenden. Wir haben eine Klasse namens „Col“. Wir werden die zweite Klasse anwenden. Du steckst es einfach rein. Du steckst sie nebeneinander. So wenden Sie mehr als eine Klasse an. Sie müssen die Klasse nicht wieder ausschreiben, Sie können es, aber Sie setzen sie einfach zwischen diese Anführungszeichen mit dem Leerzeichen dazwischen. Großartig. Nun, ich will es für alle tun. Es gibt einen coolen kleinen Trick, den Dreamweaver tut. Wenn ich hier klicke und die „Option“ -Taste auf einem Mac oder „Alt“ -Taste auf einem PC gedrückt halte, und klicke und ziehe, kannst du sehen, dass ich einen Cursor, mehrere Cursor habe ? Da geht das. Hey, ich liebe es, Col-lg, okay, und lass uns sie auf alle anwenden. Großartig. Jetzt werden wir es überprüfen. Es funktioniert. Die Spalten haben alle die richtige Breite. Aber diese Bilder reagieren nicht. Standardmäßig haben diese Bilder ihre genaue Größe, die Spalten haben die richtige Breite, aber das Bild ist über den Rändern quadriert. Lassen Sie uns gehen und reparieren Sie die Bilder so, dass sie zu 100 Prozent sind. Um unsere Bilder reaktionsschnell zu machen, gehen wir zu unserer styles.css. Ich werde eine Klasse erstellen, wo, solange es im globalen Schlag ist. Wo soll ich es hinstellen? Ich setze es mit den Säulen ein, die ich gemacht habe. Wir werden noch einen zusammengesetzten Selektoren machen. Wir werden sagen: „Bilder, die in meinem Col-lg sind.“ Ich werde das tun, und wir werden sagen, diese Jungs werden eine Breite von 100 Prozent haben. Großartig. Was wir brauchen, nur um die Dinge reaktionsschnell zu machen, ist, dass wir auch eine Höhe hinzufügen müssen und es einfach Auto setzen, und das wird Ihnen später einige Probleme ersparen. Einfach die Höhe automatisch ausgewählt. Die andere Sache, die es nützlich macht, ist Anzeigeblock. Warum? Nur weil. Responsive Bilder machen die Breite zu 100 Prozent sinnvoll. Stellen Sie die Höhe jedoch in die Anzeige, da drin. Es wird es funktionieren. Werfen wir einen Blick in den Browser, gehen Sie da rein. Schön. Also sind die Breiten richtig. Ja, also sind die Breiten 33,3 Prozent. Sie bleiben alle nebeneinander, und die Bilder reagieren. Was wir jetzt tun müssen, weil Sie sehen können, wie 33 Prozent sehen, ist großartig, weil es nach unten quetscht, wenn es auf den Tisch kommt. Das nächste, was ich tun möchte, ist eigentlich, mein Mockup hat Polsterung zwischen diesen. Lassen Sie uns ein wenig Polsterung hinzufügen. Wie ich in diesem Fall die Polsterung gemacht habe, anstatt diese 33 zu verwenden, gibt es nicht genug Platz für Polsterungen. Wir müssen das ein bisschen hinlegen. Also habe ich zwei Prozent von der Gesamtgröße abgenommen. Was ich tun werde, ist, dass ich es für hier verwenden werde und ich werde etwas Polsterung machen. Wir werden Polsterung den ganzen Weg herum setzen, und wir werden ein Prozent machen. Wir benutzen das Prozent hier. Ja, schauen wir uns mal an, da ist ein Prozent um ihn herum. Großartig. Ein Prozent auf beiden Seiten, okay, links, rechts, oben und unten um diese Spalten und den Rest. Ich schätze, nur um meinen Punkt hier zu machen, ist, wenn Sie es bei 33 belassen, es gibt nicht genug Platz, also 33 plus die 1 Prozent dazwischen, schiebt diesen Kerl ab. Wir wollen sicherstellen, dass hier genug Platz ist. Wenn du deine tust, könnte deine Größe vier haben. Du wirst 25 Prozent benutzen, wenn du vier hier drüben hast. Du wirst mit verschiedenen Prozentsätzen spielen, was auch immer für dich funktioniert. Du wirst es abnehmen müssen. Was auch immer Sie zum Padding verwendet haben, abzüglich der Breite Stempel und ja, machen Sie ein bisschen Hin und Her zu spielen. Großartig. Wir haben ein reaktionsfähiges Raster erstellt. sieht es gut aus. Wenn wir jedoch auf das Tablet kommen, möchte ich, dass du tust, dass ich von diesem hier wechseln wollte. Dies ist unsere funktionierende Version. Wenn es Tablet gesendet wird, möchte ich hier in diese beiden Spalten wechseln. In dem Moment, in dem sie es tut, bleibt es so. Was wir tun werden, ist, dass wir eine andere Klasse erstellen. Wir werden es tun, aber anstatt es hier in den Kopf zu setzen, werden wir es erstellen, so dass es nur ausgelöst wird, wenn wir in Tablet-Ansicht sind. Alles in dieser Medienabfrage wird nur zu dem Zeitpunkt aktiviert und wir sind bei max in dieser Breite hier. Was wir tun werden, ist, dass wir eine neue Klasse namens „Col-MD“ für Medium erstellen. Dieser hier wird 25 Prozent sein. Wenn ich 25 Prozent sage, meine ich 50 Prozent. Aber wir werden das leichte Problem haben. Aus irgendeinem Grund habe ich gerade 50 von selbst getippt, also lasst uns die ganze Sache eingeben. Das wird eine Breite von 50 Prozent sein. Aber weil wir diese Polsterung anwenden, schauen wir uns ein wenig an. Es funktioniert nicht. Warum funktioniert es nicht? Weil wir es hier erstellt haben, haben wir diese Col-Mitte erstellt, aber wir haben sie nicht auf irgendetwas angewendet. Ich werde so tun, als ob ich das absichtlich getan habe, aber ich habe es total vergessen. Gehen wir hier, wir haben dieses Ding namens „Col-LG“, aber wir brauchen auch eine hier drin namens „Col-Medium“. Erinnern Sie sich an unseren Trick, klicken Sie hier, halten Sie die Option für „Alt“ -Taste, „Leertaste“ gedrückt und geben Sie „Col-MD“ ein. Okay, also haben wir es erschaffen, wir haben es geschafft. Lass es uns überprüfen, und es funktioniert nicht. Denken Sie daran, 50 Prozent, aber weil wir Polsterung da drin haben, müssen wir etwas kleiner sein. Hier kannst du hineingehen und mit spielen, ich weiß, es sind 48, weil ich es bereits getan habe. Großartig. Also passt es da rein. Was ist das? Also auf dem Desktop ist es drei über. Wenn es hier runter kommt, sind es zwei. Das letzte, was wir tun müssen, ist, wenn wir ins Handy kommen, ich möchte, dass es 100 Prozent über. Lass uns das jetzt tun. Wir werden zwei Dinge tun, unser Mockup hat die mobile Ansicht, sie sind alle 100 Prozent über. Wir werden hier runterrutschen, wir werden eine Klasse namens „Col-Small“ erstellen. Das hier wird eine Breite unseres Fensters sein, wir werden eine Breite von 100 Prozent haben. Die Syntax wird ein bisschen nach vorne. Okay, lassen Sie es uns anwenden. Hier ist unser cooler Trick. Okay, wir werden „Col-klein“ sein. Großartig. Lassen Sie uns im Browser überprüfen, und es wird ein wenig kaputt sein. Nun, es ist nicht kaputt, aber ich möchte diese Polsterung dazwischen loswerden. Mein Mockup hat sie alle nebeneinander. Also, was wir tun werden, ist, hier drinnen, gehen wir zu unseren Styles, und oben oben sagten wir, Col habe eine Polsterung von einem Prozent. Was wir hier drinnen tun werden, ist, dass wir sagen werden, die gleiche Klasse, wir werden sagen, dass Sie, Col eine Polsterung von Null haben. Pixel oder Prozent, es spielt keine Rolle, 00. Großartig. Sie schlagen alle nebeneinander. Ehrfürchtig. Sieh uns an. Du kannst anfangen zu sehen, dass wir ansprechende Sachen machen. Wenn man sich jemand anderes CSEs anschaut und sich das zum ersten Mal anschaut, sagt man: „Wow, okay. Das ist ziemlich kompliziert.“ Du gehst hier rein. Das ist nicht schlecht, vor allem mit den Tabs und allen Renditen. Hier drinnen ist viel los. Aber man kann anfangen zu sehen, ob man an diesem Ding eine kleine Klasse nach dem anderen absplittert , es ist eigentlich, ich denke ziemlich einfach. Großartig. Was müssen wir sonst noch tun? Das letzte, was ich denke, ist nur eine Hintergrundfarbe. Ich weiß es nicht. Es ist keine große Sache, schätze ich. Wir werden es dem Körper antun, lasst uns die Hintergrundfarbe machen. Lass uns „Hintergrundfarbe“ gehen. Ich werde nur ein Hellgrau wählen, weil das in meinem Mockup war. „ D, d, d“, „Speichern“. Okay, also Hintergrundfarbe, du kannst sehen, es ist nur ein leichtes Grau da drin. Cool. In Ordnung. Gut gemacht. Wir, und ich und du, wir haben eine Website erstellt. Die große Sache ist diese Navigation hier, sie reagiert. Sobald wir diese Art von reaktionsfähigem Zeug ohne Medienabfragen gelernt haben, wurde es tatsächlich ziemlich einfach, diese zu tun. Es gibt unsere Tablet-Ansicht, bis auf den Desktop, ein schönes Nav-Sandwich, und wir haben unsere kleinen Bilder gehen. Bravo. Kleine Dinge, die ich tun würde, um dies zu bereinigen, können Sie auf mobilen Hits sehen, die Polsterung ist wahrscheinlich ein bisschen groß für diesen. Also, was Sie tun, ist, dass Sie die Klasse finden, die Ihre Heldenbox macht. Er ist an der Spitze hier irgendwo, es gibt etwas namens Hero.You machen eine andere Klasse und Sie ändern einfach die Polsterung und überschreiben sie und machen es kleiner. Du gehst und finesse all diese Dinge, vielleicht auch die Schriftarten. Es ist ein bisschen, weil es auf zwei Zeilen bricht. Also erhalten Sie einfach Ihr H1, machen Sie ein weiteres H1 hier unten in der mobilen Ansicht und überschreiben Sie die Schriftgröße. Viele dieser kleinen Anpassungen sind seltsam. Ich schätze, du als Grafikdesigner glänzt wirklich. All diese kleinen Finessing in Bezug auf den Abstand nach und den Abstand zwischen den Zeilen, und alle Schriftgrößen und Dinge. Cool. Alles klar, kein Narren mehr. Gehen wir zum nächsten Video. 11. So veröffentlichst du deine Website im Internet: Toll, also haben wir eine Website erstellt, jetzt wollen wir sie online bekommen. Sie benötigen einen Host und einen Domänennamen. Sie würden die nur zusammen kaufen, ich habe einen ganzen Kurs über den Kauf von Domain-Namen und Hosting. Wollte die schnelle Version hier zu machen, um Sie los zu machen. Melden Sie sich bei Ihrem Konto an. Ich werde GoDaddy verwenden, es ist das größte, beliebteste Hosting der Welt. Wenn du etwas anderes hast, ist es nicht weit weg, es gibt leichte Quarks. Was wir tun werden, ist, dass ich mich in mein Konto einloggen werde. Was ich tun möchte, ist ein Web-Hosting zu bekommen. Wir haben bereits unser Webhosting gekauft und für einen Domain-Namen bezahlt. Wir haben das grundlegende Hosting. Ich werde es verschmelzen. Warten Sie, bis es geladen ist. Sie suchen nach dieser Sache namens FTP-Konten. So Dateiübertragungsprotokolle, so laden Sie Ihre Website auf Ihre Hosting-Server hoch. Wenn Sie einen erstellen, setzen Sie hier rein, werden Sie diesen Test nennen. Du gibst ihm deinen Namen, aber es spielt keine Rolle. Es muss keine E-Mail-Adresse sein, es sieht so aus, aber nein. Hier drin finden Sie alles. Gib ihm ein Passwort, stelle sicher, dass es ein wirklich gutes ist, nicht wie mein hier, wirklich einfaches. Ich werde gehen und dieses Konto löschen, nur für den Fall, gleich danach. Die große Sache bei der Verwendung von GoDaddy ist, dass, können Sie es sehen, in unseren Benutzernamen hier. Es wird einen Unterordner erstellen, nicht das, was ich will. Es muss in public_html gehen. Das ist traditionell, wo die Dinge hingehen. Wenn Sie jemand anderes Hosting verwenden, werden sie Ihnen sagen, dass es manchmal htdocs und einige Namen und öffentliche hat. Fast immer hat es public_html, es ist wie die Wurzel von allem, was in geht. Klicken Sie auf Konto erstellen. Das einzige, was wir jetzt wissen müssen, ist, wir uns an unseren Benutzernamen und unser Passwort erinnern müssen. Gehen wir in Dreamweaver, öffnen wir unsere Website und gehen zu Sites verwalten. Hier ist Dans Portfolio. Wir haben das gleich am Anfang gemacht. Das ist derjenige, an den wir und hier erinnern, dass wir den lokalen Ordner auf unserer Festplatte gemacht haben und wir ihm gesagt haben, wohin die Bilder gingen. Nun, was wir tun werden, ist zu diesem hier namens Server zu gehen und dann „Plus“ zu drücken, und dann werden wir es GoDaddy nennen. Es spielt keine Rolle, wie Sie es nennen, hier FTP-Adresse. Wenn Sie GoDaddy nicht verwenden, kann dies anders sein, bringyourownlaptop.com. Manchmal benötigt es das FTP für einige Hosts nicht, in diesem Fall tut es das. Der Benutzername wurde @bringyourownlaptop getestet. Manchmal brauchen einige Hosting nur den Benutzernamen, sie brauchen nicht all diesen Müll. Passwort, setzen Sie das ein. Jetzt wirst du „Test“ treffen und du wirst deine Finger kreuzen. Verbindung wurde erfolgreich hergestellt. Nun, die Arbeit für mich, weil ich weiß, was ich tue. Hosting ist bei weitem das schwierigste Element, das eingerichtet werden muss. Sie keine Angst, wenn es immer noch nicht funktioniert, Sie haben es getestet, Sie haben es ohne FTP versucht, ohne diesen Benutzernamen. Andere Dinge, die Sie versuchen können, sind nicht das Stammverzeichnis zu treffen, manchmal müssen Sie ein public_html\ einfügen. Hier unten manchmal, unter „Weitere Optionen“, müssen Sie passive FTP deaktivieren. Es gibt ein paar kleine Dinge, mit denen Sie spielen können, aber mein Rat ist, nicht zu weit oder zu lang zu betonen, einfach eine E-Mail an aber mein Rat ist, nicht zu weit oder zu lang zu betonen, die Hosting-Firma, senden Sie ihnen den Screenshot von diesem hier und sagen, das sind die Details, die ich brauche, was Ist es das? Danach schicken sie dir die Details und du steckst sie einfach rein. Nun, was Sie tun, ist auf „Speichern“, drücken Sie „Fertig“. Großartig. Klicken Sie auf „OK“. Großartig. Nun, was Sie tun, ist, Sie gehen zu Site, so dass es jetzt verbunden ist, aber nichts ist wirklich passiert. Sie haben dieses Ding namens Lokal, und Sie haben dieses andere, das jetzt Remote heißt. Das ist, was wir wollen, Local ist auf unserer Maschine, Remote ist GoDaddy, es ist der Hosting-Dienst. Wir gehen auf Site und wir haben zu Put und Sie drücken „Put“. Es wird durchgehen und sich verbinden. Dann wird es Sie fragen, ob Sie die abhängigen Ordner aufstellen möchten und klicken Sie auf „Ja“. Es wird den HTML-Code aufstellen, aber dann muss es das CSS, dieses andere CSS und JavaScript aufstellen . Es geht durch und legt alle Bilder auf. Ich werde in diesem Fall auf „Abbrechen“ klicken. Warum? Denn im Moment würde ich diese seltsame hochladen, nicht seltsam, aber dieses Portfolio über meinen Web-Zyklus bringyourownlaptop.com. Ich will das nicht tun, aber was du tust, ist, dass es durchläuft, dann würdest du zu bringyourownlaptop.com gehen oder deine URL und dein Portfolio sollte da sein. Wenn nicht, schlagen Sie mir eine Zeile in den Kommentaren und ich gebe Ihnen eine Hand. Definitiv den Server zu verbinden ist für jeden das schwierigste Bit, denn selbst es ist immer noch schwer für mich. Ich möchte keinen neuen Host oder jemanden bekommen, der den neuen Host eines Kunden verwendet , und ich muss alle verschiedenen Einstellungen erarbeiten. So verbinden Sie eine Website mit GoDaddy. Das wird es für dieses Video sein. 12. Abschließende Bemerkungen, da du jetzt eine Programmierer:in bist: Alles klar, zum Abschluss, die letzten Dinge, die Sie tun müssen, schätze ich, um eine Website zu vervollständigen, ist es, andere Seiten zu erstellen. Lassen Sie mich einfach schnell, kurz darauf eingehen, denn es ist buchstäblich, wir würden einfach eine andere Seite erstellen, wie wir es getan haben. Nehmen wir an, wir beginnen mit der Basis unserer Homepage. Es gibt unseren Index zu unserem HTML. Ich werde nur damit anfangen, also werden wir es duplizieren, es duplizieren. Es gibt eine coole Kopie, also möchte ich sie nicht aufrufen und ich benenne sie um, editiere, benenne sie um und ich nenne diese „My_contact_me page“. Großartig, es gibt keine Leerzeichen, verwenden Sie einfach Bindestriche oder Unterstriche. Also haben wir das, doppelklicken Sie es, um zu öffnen, meine Indexseite, meine Homepage und jetzt diese contact_us Seite. Was wir in diesem tun werden, während Sie durchgehen und anfangen es je nach Ihrem Design von sagen, Photoshop zu ändern. Also werde ich dies ändern, um vielleicht contact_me. Ich werde das loswerden und du fängst an, diese Seite zu stylen. Werfen wir einen Blick auf es im Browser. Da ist es, so können Sie sehen, dies ist meine Kontakt-Me-Seite. Ich gehe über die oberste Seite. Ich habe immer noch meine Homepage. Wenn ich zurück zu diesem und aber hier ist es, ist das meine Homepage und meine contact_us Seite sieht sehr ähnlich aus. Ich denke, bis jetzt entscheide ich, wie viele Spalten ich will, was in diesen Spalten gehen wird und nimmt einen Typ, wahrscheinlich eine Form in dieser. Nun, um die beiden zu verbinden, gehen wir zum Index, und ich möchte sie verbinden, weil denken Sie daran, dass wir Hashes vorher verwendet haben. Also hier oben haben wir Hash benutzt. Also, was ich tun werde, ist, den Hash zu löschen und ich werde ihn aus dem Kontakt anrufen. Du kannst sehen, wie du es vorfüllen kannst, nett. Also mein Menü jetzt, wenn ich auf contact_me klicke sollte zu plus eins springen, um einen Browser zu verhindern. So Homepage, Ich klicke auf „Contact_me“. Es geht zu meiner contact_me Seite. Das ist es, dann gehen Sie los und bauen Sie sich einige Seiten und verbinden Sie sie diese. Nun das andere, was Sie tun können, ist, dass ich eine Reihe von anderen Kursen habe, fügen Sie diesen für Photoshop hinzu. Wir hatten gerade ein Mock-up am Anfang dort. Es gibt einen Photoshop für Web-Design und Kurs, den ich habe. Es gibt auch einen größeren Kurs, dieser hier ist, ich denke, ein kurzer. Es sind ein paar Videos hier für Responsive Web Design. Ich habe ein langes, das ungefähr 50 Videos ist und es hat mit etwas namens Bootstrap zu tun, es ist in Dream Weaver und es ist ein nächster Schritt danach. Wir haben einige der gleichen Funktionen, aber es ist viel mehr Details. Du kannst in das einsteigen. Es gibt einen UX-Kurs, UX-Designer wird. Diese Dinge über Domain-Namen, andere Dinge, die Sie tun können, wenn Sie ein Trainer sind und Sie gehen, um diese hier zu lehren, ich habe Lehrer Ressourcen, Sie haben einen Blick auf die Seite hier, um ein Link für die Lehrer-Ressourcen zu sein und es gibt Notizen, die Sie in die Hände bekommen können und Sie können diese Übung fällt verwenden, um von zu lehren. Was sonst noch? Plakat-Projekte. Du hättest es also vielleicht mitverfolgt, aber die Bilder auf deine vertauscht, ich würde es gerne sehen. Du hast eine andere Schrift ausgewählt, ich würde sie gerne sehen. Tue ich, ich sehe dieses Zeug wirklich gerne. So Links oder Screenshots, alles, was Sie können, bleiben Sie in den Kommentaren. Auf den verschiedenen Folien gibt es viele verschiedene Möglichkeiten, mir zu zeigen, was du getan hast, ich würde sie gerne sehen. Geben Sie ihm auch eine Bewertung, wenn Sie es genossen haben, haben Sie meinen Unterrichtsstil gemocht oder wenn Sie es nicht haben. Arbeiten Sie dort einen Kommentar und geben Sie ihm eine Rezension und so kann ich es besser machen. Was sonst noch? Die letzte Sache ist, bezahlt zu werden, und ich habe auch eine ganze Videoserie dazu. Wie man eine kurze Zeit macht, wie man sicherstellt, dass Sie pünktlich bezahlt werden, welche Kosten sollten Sie berechnen? Wieder, es gibt einen vollständigen Kurs darüber, gehen Sie es auf meinen anderen Kursen überprüfen. Okay, meine Freunde, wir haben einen langen Weg zurückgelegt. Wir haben unsere Portfolio-Website gebaut, wir haben eine Medienabfragen geführt, wo, wir haben coole responsive Navigation getan. Jetzt ist es Zeit für Sie, zu gehen und Ihre eigene Website zu bauen. Verstecken Sie es aus guten Leuten und ich sehe Sie wieder in einer anderen Videoserie. 13. Dreamweaver Spickzettel: Hallo liebenswerte Leute. In diesem Tutorial werden wir uns unsere Spickzettel ansehen. Dieses Ding hier ist die Video-Version, es wird ein PDF geben, es wird einen Link auf dem Bildschirm nur hier sein, alle herunterladbaren druckbaren PDF, also schauen Sie es an, drucken Sie das PDF aus, und kleben Sie es neben Ihren Schreibtisch und werden mehr genial in Traumweaver. Also zuerst schauen wir uns etwas an, das QuickEdit genannt wird, ich liebe QuickEdit. Es ist neu für 2017 Dreamweaver Wenn Sie also eine frühere Version verwenden, wird es nicht funktionieren. Jetzt ist QuickEdit eine Möglichkeit, das CSS wirklich schnell zu bearbeiten. In diesem Fall habe ich diesen Knopf und es ist viel zu nah an diesem p-Tag, es ärgert mich diese ganze Tutorial-Serie. Also möchte ich das runterdrücken, also gibt es hier einen P-Tag. Also lasst uns in Dreamweaver springen. Dreamweaver, hier ist mein Header, eigentlich, während es? Also Header, da ist mein Hauptinhalt und da ist das p-Tag, das beleidigende p-Tag, und es gibt die Schaltfläche darunter, also gibt es die Let's Talk-Taste, da ist das p-Tag und es hat eine Klasse namens heading-body. Ich werde replizieren, ich kann zu QuickEdit gehen oder ich kann Befehl entweder Verknüpfung, noch kürzere Verknüpfung verwenden. Die Codierung ist schlecht, wie Sie sehen können, es ist wie ein kleines Wurmloch, geht durch und findet meine style.CSS. Es sind Nasen in Zeile 75, und das ist meine Kopfkopie, fand sie. Ich werde in padding-bottom setzen, und wir werden in 20 Pixel setzen. Ich werde das kleine Wurmloch schließen. Überprüfen Sie einfach den Browser, etwas Abstand zwischen den beiden. Warum ist es gut? Es ist nur anders als in Stile zu gehen und herauszufinden, welcher Stil es ist. Es gibt da, aber wenn es ein langes CSS ist, gehen Sie über Facebook. Könnte zu mächtig sein. Schnell es. Der nächste, den wir uns ansehen werden, ist etwas namens Emmet. Wenn Sie die Videos Tutorials gemacht haben, haben wir ein wenig getan. Nur zusammenfassen, sagen wir, ich möchte ein div-Tag hinzufügen, und ich möchte diesem div-Tag eine Klasse hinzufügen. Also möchte ich ein div-Tag und ich möchte eine Klasse namens Spalte hinzufügen. Oder eine Klasse namens genial. Ich will, dass es wie viele von ihnen gibt? Ich möchte, dass es sechs gibt, bitte. Wenn ich drücke, setzen Sie nicht Return, drücken Sie Tab. Sieh dir das an. Die Klassen, sechs von ihnen mit dem Klassennamen von genial. Nehmen wir an, wir brauchen etwas anderes, sagen wir, wir brauchen eine ungeordnete Liste mit einer Reihe von Listenelementen. Also gehen wir ul und wir gehen li, und wir werden sagen, wir wollen 20 von ihnen, weil das eine lange Zeit dauern würde. Hit Tab, schau dir die ungeordnete Liste an, mit 20 von ihnen. Wird noch besser, wenn ich sagen möchte, dass eine Klasse von Dans-Bullets auf sie angewendet wird. Dann gehen Sie hier, drücken Sie Tab. Sieh mich mit Emmet an. Es gibt noch ein paar andere Dinge, die Emmet tun kann. Lasten und Lasten und Lasten. Sieh mal nach, Emmet, es ist E-MM-E-T. Es gibt eine Website und alles, und Sie können durchgehen und herausfinden, was sie tut. Ein paar andere schnelle ist img, Tab, die Ihnen Bild und die Quelle gibt und es ist alles Tag. Eine andere, die ich kenne und mich erinnern kann, ist Link, Tab, gibt Ihnen den Stylesheet-Link, alle mit der richtigen Syntax, und es ist schnell. Danke. Tipp Nummer 3 wird Multi Cursor sein. Wir haben eine Klasse zu dieser Gruppe von Divs hinzugefügt, die ich hier zufällig habe , aber sagen wir, ich muss eine andere Klasse hinzufügen. Angenommen, ich möchte allen eine Klasse hinzufügen, kann hart sein, also kann ich mehrere Cursor setzen. Also, was ich tun kann, ist die Alt-Taste oder die Wahltaste auf dem Mac gedrückt zu halten und ich kann über alle durch diese ziehen. Schau, alle Cursor. Ich kann eine andere Klasse setzen und das könnte meine sein, ich kann alle Klassen verschieben, ich habe eine mutige Klasse. Du kannst einfach die Kurse gehen lassen. Jetzt haben wir die Emmet Tutorialserie gemacht. Aber sagen wir, wir wollen es an zufälligen Orten tun. Das ist großartig, wenn sie alle sind, weil Sie Alt ziehen können, aber sagen wir, ich brauche eine dort, die auch ich hier bearbeiten muss. Alt funktioniert nicht. Sie müssen es mit Alt ziehen. Was Sie tun können, ist hier zu beginnen, halten Sie Befehl gedrückt, ich möchte eine dort setzen und ich möchte eine dort setzen, so viele Klassen an all diesen Orten. Kannst du meine Cursor sehen? Einer da, einer da, einer da, alles blinkt. Ich kann andere Klasse sagen, ich weiß nicht, wie diese Klasse heißt, aber genial. Also Multi-Cursor, aber noch besser, wenn sie nicht nur an einem Ort sind, können Sie sie überall im Shop haben. Das ist die Multi-Cursor genial Spickzettel zeigen Zeit. Das könnte mein Favorit sein. Hier ist Nummer 4. Dies ist etwas namens Apply Source Formatierung und es bereinigt nur Ihren Code. Es tut nichts daran, richtet es einfach aus und lasst es aus, macht es hübsch aussehen. Ich habe damit gearbeitet, ich habe es von slicknav.CSS heruntergeladen. Ist genial, aber ich bin sehr visuell. Also brauche ich alles, um sich aufzustellen und zu klappen, und Sie können sehen, dass es eine Klasse gibt und mein natürlicher Instinkt ist, es einfach nach unten zu bewegen und sicherzustellen, dass er davon entfernt ist, nicht sicher warum, aber ich habe das Gefühl, dass das da unten sein muss und es Rennen haben könnte. Also, was wir tun werden, ist, ich werde hier rüber gehen und ist ein Format Source Code genannt, klicken Sie auf das und gehen Apply Source Formatierung. Sie tun es zu einer Auswahl, Sie können es mit der ganzen Sache tun und beobachten, wie diese verwandelt sich in, schauen Sie sich das an, so hübsch. Ich mache das mit all meinen Sachen, ich wähle dieses CSS hier aus, weil es nicht meins ist, aber mein Zeug sieht am Ende genauso schlecht aus. Nun, nicht schlecht, aber meins sieht viel schlimmer aus und macht alles aufgeräumt, damit es schön aussieht. Ich bin so, als würde ich visuell alles schön sehen. Wenn Sie auf frühe Versionen sind, gibt es hier im Jahr 2017 eine Option. Wenn Sie mich mit früheren Versionen verbinden gehen, gibt es unter Bearbeiten so der Code und es gibt eine sagt Apply Source Formatierung. Das ist Apply Source Formatierung und das ist Nummer 4. Nummer 5 in dieser schönen Liste der Spickzettel ist etwas namens Code Folding. Sehen Sie diese kleinen Pfeile hier, das bedeutet, dass ich meinen ganzen Körper und meinen ganzen Kopf zusammenfalten kann. Warum es nützlich ist, ist nur aufgeräumt, sieht besonders stressig ein bisschen HTML aus und kehrt in separaten Dingen zurück. Ich möchte die Überschrift zusammenklappen und mein Haupt hält einfach alles zusammen. Ich finde es wahrscheinlich am nützlichsten, sagen Sie, dass ich einen Teil habe, den ich löschen muss, anstatt zu versuchen, besonders wenn es offline ist. Ich hasse das, wenn es ein wirklich langes Tag ist und es hier beginnt und irgendwo weit weg vom Bildschirm endet. Lass es uns hier vortäuschen, ist weit da unten. Also, Main und ich wollen versuchen, es auszuwählen, und ich möchte herausfinden, wo das Ende ist, und ich versuche es zu finden. Also, was Sie tun können, ist, das nach oben zu schalten und was ich tue, ist, all das zu greifen und dann zu löschen. Das ist eine nette Art, all das Zeug zu packen. Wenn es umschalten ist es nicht weg, umschalten Sie zurück, Code falten Leute, ich liebe es. Als nächstes auf unserer Spickzettelliste wird nur dupliziert. Nur eine nette und wirklich einfache Abkürzung in Dreamweaver. Sagen Sie, ich brauche noch einen dieser Tasten, da ist eine hier, aber wenn ich noch einen brauche, könnte ich es. Wählen Sie die Zeile aus, kopieren Sie sie, schneiden Sie sie aus und fügen Sie sie aus, holen Sie die Tabs rechts. Ich finde, dass es das größte Problem ist, aber alles lässt es hübsch aussehen. Was ich tun kann, ist, dass ich rückgängig mache. Anstatt all das Drama zu machen, schauen Sie sich das an, Cursor blinkt Befehl D. Wenn Sie auf einem PC sind , ist es Control D, aber auf einem Mac ist es Befehl D und beobachten. Es sei denn, es gibt Duplikate, wir haben ein Tag, in dem es sich befindet, es wird es erreichen und duplizieren. Das ist Nummer sechs. Der nächste in der super fantabulous ein Spickzettel für Dreamweaver funktioniert gut für beliebige Zahlen. Offensichtlich werden wir ein wenig in CSS für die Eigenschaften arbeiten. Nehmen wir an, der Zeilenabstand zwischen diesem H1 hier, mein H1, da ist meine Zeilenhöhe. Wenn mein Cursor in einer der Ziffern blinkt und ich Befehlstaste und Alt gedrückt halte, wenn Sie auf einem PC sind, dann sind es Control und Alt. Auf einem Mac ist es tatsächlich Befehl und Option und verwenden Sie einfach Ihre oben und unten Cursor, so dass Ihre Pfeiltasten. Sieh dir das an, ich gehe hoch und da geht 80, geht runter, es gibt eine 70. Runter, runter, runter. Sie können mit der Kombination dieser Echtzeit-Browser-Sache hier sehen, die unten nach rechts ist und es ist ein Echtzeit-Browser, neu in Dreamweaver 2017. Es passt genau die gleiche Zeit an. Also jedes dieser Felder, alles, was Sie finden, Schriftgröße hier, gehen Sie hoch und gehen Sie runter. Das schöne Menschen hat eine der Zahlen durch Drücken von Befehls-Option oder Control-Option anpassen , und verwenden Sie Ihre Pfeiltasten. Der nächste Spickzettel, Ehrfurcht in unserer schönen Liste ist Nummer sieben. Es ist nicht, es ist Nummer acht und es ist eine Möglichkeit, ein Tag, das existiert zu wickeln. Also sagen Sie, Sie haben diese Tags, die hier sitzen, aber ich möchte nicht, dass sie in meiner Fußzeile sind. Ich habe das Fußzeilen-Tag nicht geschrieben und ich könnte gehen und die Fußzeile hier oben und K für das Schließen schreiben und es hier unten eingeben, und das wird funktionieren, aber es ist ein wenig lang. Also, was ich tun will, ist, all diese Typen zu schnappen. Also werde ich sagen, Sie und Sie alle, und ich werde Command T auf meinem Mac oder Control T auf einem PC und Sie können dort sehen, Wrap Tag. Wie gut ist das? Ich werde es einpacken. Drücken Sie „Zurück“. Du musst zweimal auf Return drücken. Kann nicht zeigen, warum. Sie können dort sehen, da ist mein Wrap Tag. Also schnappen Sie sich alles, wählen Sie Befehl T und es wird es einschließen. Das ist Nummer acht. Gehen wir also zur Nummer neun und es wählt das übergeordnete Tag aus. Sagen wir mal, ich bin tief in einigen Schichten. Dieses Ding, das ich als Übung benutze, ist nicht großartig. Es ist nicht besonders verwirrend, aber sagen wir, es ist ein bisschen verwirrend. Da sind viele Kinder in diesen Eltern. Was Sie also tun können, ist, dass ich die auswählen möchte, ich bin mir nicht sicher, wer das Wrap ein Tag ist oder das übergeordnete Tag ist. Also überall hier drinnen, halten Sie Befehl oder Control auf einem PC gedrückt und verwenden Sie Ihre eckigen Klammern. Ich werde die linke Seite verwenden, die offene und Sie können sehen, es greift das Loch Tag und gehen Sie wieder, packt die Eltern, gehen Sie wieder, greifen Sie eine Spalte, gehen Sie wieder. Sie können sehen, schöne Art, die Eltern zu greifen, den Kerl um die Außenseite. Es ist wirklich großartig, besonders wenn dieses Elternteil mehr als eine Seite umfasst. Sie können nicht ganz sehen, was das Ende ist, also können Sie es auswählen. Also, das ist Befehl und verwenden Sie offene eckige Klammer und das ist der Weg, um das übergeordnete Tag auszuwählen. Schön. Zahl 10 ist eine Variation der Zahl neun, die die übergeordneten Tags auswählt. Wir werden diesen Tag-Selektor im unteren Bereich verwenden. Die Leute ignorieren dieses Ding hier unten und es ist großartig. Also, wenn ich im Inneren von hier bin und es wirklich hilfreich ist , wenn Sie zusammengesetzte Selektoren verwenden und Sie sich nicht sicher sind, was Sie setzen sollen. Also sagen wir, ich will, du hast Navigation hier oben, steckst es rein. Sie können dies mein A-Tag sehen. Dies ist mein Tag unten ausgewählt. Das ist mein A-Tag und es ist in meinem Listenelement, sich in meinem Menü befindet, das hat, sorry, meine UL, die es eine ID des Menüs hat, das sich in der Kopfzeile befindet, die sich im Körper befindet, gibt mir nur eine Vorstellung davon, wo Ich bin in der Welt kam. Also sagen, ich will die UL schneiden, beobachten, dass, klickt auf die gesamte UL. Schnapp dir die Kopfzeile. Es ist eine Möglichkeit, dieses übergeordnete Element auszuwählen und zu verwenden, indem dieses Tag unten ausgewählt wird, um zu wissen, wo Sie sich in der Welt befinden. Ich liebe es. Alles klar, machen wir den nächsten. Die letzte auf dieser erstaunlichen Liste von Spickzetteln Sachen, werden wir uns Schnipsel ansehen. Also bin ich hier. Ich schaue mir das Snippets-Panel an. Ich bin hier in meinem CSS. Also werden wir mit CSS-Schnipsel beginnen. Es ist viel hier drin. Wir fangen mit den großen Jungs an. Nehmen wir an, ich brauche eine Fußzeile und ich muss sie unten fixieren, damit sie sich nicht bewegt, also ist sie immer unten. Ich könnte es herausfinden oder sehen, Fußzeile reparieren, Doppelklick. Sieh dir das an. Es ist die ganze Codierung, um die Fußzeile nach unten zu fixieren. Schön. Ein anderer könnte sein, Sie beginnen ein neues Projekt und Sie müssen etwas Null in Code setzen und nur um alles zu bereinigen. Es ist wirklich praktisch zu tun. CSS-Schnipsel, hier sind zwei. Es gibt HTML-Stil Reset, sehen Sie sich dies an. Das Ding, das ich tue. Das ist ein schöner, beeindruckender Stil Reset. Alles wird auf verschiedenen Browsern gleich aussehen. Glückliche Tage. Ich werde mir das ansehen. Hier gibt es noch einen, der Eric Meyers eins nennt. Welches mag ich besser? Ich glaube, ich mag Eric eins, es ist nett und einfach. Nur löscht alles aus Streicheln, wie es glückliche Tage bekommt, dass ein Build eine Website, Snippets wird noch besser. Sieh dir das an. Wenn ich in HTML-Snippets gehe, schau hier rein. Lassen Sie uns etwas HTML finden. Ich muss jetzt eine Navigationsleiste hinzufügen. Ich gehe in etwas, Erstellen Sie eine Navigationsleiste. Da ist es da. Wir haben eine Nav Bar, Titel der Klasse, setzen die Ligen, der Kerl ist da drin. Die Listenelemente sind alle einsatzbereit verknüpft. Es gibt Klassen. Ich kann sie duplizieren. Schnipsel, genial. Als nächstes ist das kleine bisschen, lassen Sie uns Meta-Tags machen. Ich muss sie hinzufügen. Kannst du dich erinnern, was sie alle sind? Ich habe Schwierigkeiten, wenn ich sie nicht hinzufüge. Hören, ich gehe, und ich finde sie hier drüben und es ist ein allgemeines Meta-Tag. Das eine oder gegen das eine, nicht alle Verse Meta-Tags für SEO. Ich brauche wahrscheinlich ein paar davon, aber ja den Namen da drin, die Syntax richtig, ich muss nicht gehen und versuchen, sich daran zu erinnern, was sie sind, Snippets. Der letzte, und dieser kommt mit einem doppelten Banger. Es ist das letzte, das Finale der Spickzettel. Es ist diese schöne hier. Stellen Sie sich vor, ich habe ein P-Tag, sagt P und ich möchte etwas Lorem Ipsum hineinstecken, ich gehe zu diesem Lipsum.com und da ist die Kaffeetasse drauf, und du gehst und kopierst sie aus, aber es hat Müll daran. Du musst es säubern. Aber sieh dir das an. Füge Lorem Ipsum hinzu, oh meine Güte. Lorem Ipsum, dort eingebaut und ich sagte, das wäre der Doppelknall für das Finale. Also ist Lorem Ipsum genial, aber stellen Sie sich vor, Sie tun das ziemlich viel. Stellen Sie sich vor, es gäbe eine Verknüpfung, die Sie machen können. kannst du. Sie können hier sehen, dass dieser Lipsum sagt. Ich werde das loswerden und es einfach in Lor stecken und Sie können unter dem Auslöser sehen, dass ich alles erfinden kann, was ich mag. mailto noch einen guten. Also nur Lor. Nun, ich bin hier drin, ich habe mein P-Tag und ich möchte L-O-R eintragen und Tab drücken. Ich mache meine eigenen darin Sachen. Wie gut ist das. Mailto ist ein anderer. Lasst es aus. Wer kann sich daran erinnern, wie mailto geht? Ich kriegt es die meiste Zeit und ich kriege es schreiben. Aber die ganze Zeit muss ich überprüfen, ist es Doppelpunkt, wie funktioniert es? Snippets, sie sind da drin, sie arbeiten und dass mein Freund das Ende deiner schönen Spickzettel ist. Denken Sie daran, wenn Sie sich diesen Kurs ansehen, ist dies das Ende eines längeren Kurses. Es waren 12 Videos von der Herstellung Ihrer eigenen responsive Websites. Geh, sieh dir das an. Andernfalls gibt es eine PDF-Datei, die Sie herunterladen können. Der Link wird hier wieder auf dem Bildschirm sein und vierter gehen. Sei schnell, sei großartig in Dreamweaver. Vielen Dank.