Dreamweaver CC 2018 – Einführung in responsives Webdesign

1. Einführung: Hallo, mein Name ist Dan Scott, und in diesem Video werden wir Sie von Web Zero auf Web Held einstellen und schauen, um Ihre erste responsive Webseite mit Dreamweaver zu erstellen. Jetzt können Sie entlang dieses Tutorial perfekt folgen und Sie müssen nur die Übungsdateien herunterladen, es gibt einen Link unten in der Beschreibung Desk, kostenlos herunterladen, gehen und bekommen, dass, pausieren Sie das Video, kommen Sie zurück, sobald Sie haben die Akten. Das Ziel dieses Tutorials ist es, Sie modernen Web-Design auszusetzen. Wir werden Begriffe wie responsive HTML5 und CSS3 betrachten. Sie klingen schick, aber sie sind eigentlich ziemlich einfach, wenn man sie versteht. Wir werden uns auch ansehen, wie Dreamweaver dies für uns super einfach macht. Aber eigentlich, was ich wirklich will, dass du von diesem Video bekommst, ist hoffentlich auf einen Punkt zu kommen und du bist, eigentlich, es ist nicht so schwer, wie ich es dachte. Ich bin ziemlich aufgeregt, mehr zu lernen und meine eigene Website zu bauen. Das ist also mein Ziel. Lasst uns jetzt darauf eingehen und anfangen zu arbeiten. 2. Prozess: Lassen Sie uns zuerst über den Prozess sprechen. Also zuerst müssen Sie Ihre Website zuerst in etwas wie Photoshop oder Illustrator entwerfen . So können Sie hier sehen, wie meine Website auf einem Desktop aussieht, wie sie auf einem Tablet aussieht und wie sie auf einem Handy aussieht. Sie können sehen, dass sie sehr ähnlich sind, aber jedes Design nutzt die Gerätegrößen am besten. Es gibt also nur einige Schriftgrößenänderungen und einige Neuanordnung von Boxen, um es auf den verschiedenen Geräten seltsam aussehen zu lassen. Das ist es, was wir als responsive bezeichnen. Die Website wird die Form ändern und Form ein wenig ändern je nachdem, ob es sich um Handy, Tablet oder Desktop. Das ist also unser erster großer Begriff aus dem Weg. Responsive Webdesign bedeutet nur, dass sich die Website ändert, um das Gerät am besten zu nutzen. Es spielt also keine Rolle, Photoshop oder Illustrator, aber ich habe meinen hier in Photoshop entworfen. Jetzt müssen wir es in das übersetzen. Dies ist die fertige Version unserer Website, wo Sie sehen können, dass es mit meinem Photoshop-Mockup für Desktop übereinstimmt. Aber wenn ich runter bin, schau dir das an, schau dir das bis zum Tablet an, kannst du sehen, dass es sich dort ändert? Ich ziehe meinen Browser hinein und heraus, weil sich die Schriftgröße ändert, zentriert wird, die Spalten von drei fast zwei gehen. Das ist also unser Begriff Reaktionsfähigkeit. Wir werden das bauen und runter zum Handy, wo es sich nur um einen erstreckt. Wir werden auch einige Dinge tun, wo Sie feststellen, dass es sechs auf dem Tablet, aber nur vier auf dem Handy. Also werden wir einige von ihnen deaktivieren. Wir werden auch das Menü an der Spitze ändern hier können Sie in meinem Photoshop-Mockup sehen, dass sie gerade auf dem Desktop sind , aber sie kollabieren in diese andere Version auf den kleineren Geräten. Also haben wir herausgefunden, was reaktionsschnell bedeutet, und wir wissen, was wir bauen werden. Lass uns jetzt losgehen und anfangen, es zu bauen. 3. Starten mit dem Erstellen: Okay, also zuerst ist Dreamweaver zu öffnen. Oft am Anfang sie würde ich Ihnen ein paar Fragen stellen, wie, welche Farbe wollen Sie im Hintergrund? Ob Sie Designer oder Entwickler werden wollen? Was Sie tun möchten, ist Entwickler für diesen Fall auszuwählen. Wenn Sie nicht die richtige Option ausgewählt haben, gehen Sie einfach durch und dann können Sie es wieder und hier oben rechts ändern und einfach Entwickler auswählen und es sollte so aussehen wie meins. Das nächste, was wir tun müssen, ist, dass wir eine Website definieren müssen. Gehen Sie zu einer Website und gehen Sie zu einer neuen Website. Wir müssen dies für jede neue Website tun. Wenn du gerade einen hast, musst du das nur einmal tun. Aber wenn Sie Hauptgebäude mögen, viele Websites, müssen Sie diese Seite für jede neue definieren. Gib ihm einen Namen, ich nenne meine „Roar Cycles“. Ok. Das ist eine Firma, für die wir arbeiten, und wir müssen entscheiden, wo wir auf einer Festplatte diese Website behalten werden. Da alle unsere Bilder und alle HTML, all die Dinge, die wir für diese Website machen, müssen im selben Ordner aufbewahrt werden. Was wir tun werden, ist zu lokalen Website-Ordner gehen, klicken Sie auf diese kleine „Durchsuchen“ Schaltfläche und Sie könnten Ihre eigene erstellen. Aber weil ich bereits einige Übungsdateien habe, können Sie sie herunterladen. Okay, also die, die Sie über den Link in der Beschreibung heruntergeladen haben, gehen zu responsiven Übungsdateien und wählen Sie einfach diesen Ordner hier aus. Sie müssen nicht tiefer hineingehen, okay? Die andere Sache, die Sie tun sollten, bevor Sie fortfahren, ist gehen Sie zu den erweiterten Einstellungen und hier oben heißt es Standardbildordner. Gehen Sie dazu und wählen Sie einfach den Bilderordner aus, den ich für Sie erstellt habe. Wenn Sie Ihre Website selbst erstellen, würden Sie Ihren eigenen Ordner mit Ihrem eigenen Bilderordner erstellen. Wir sparen nur Zeit, um zu den ansprechenden Dingen in diesem Kurs zu springen Klicken wir auf „Auswählen“ und drücken Sie „Speichern“. Was ich getan habe, ist nur, um die Dinge zu beschleunigen, habe ich die Website gestartet, okay? Bringen Sie uns einfach los, damit wir in die ansprechenden Teile springen können. Gehen wir zu index1.html und so sieht unsere Seite im Code aus. Wir wollen sehen, wie es in einem Browser aussieht. Unten rechts unten hier ist es unten unten wiegen hier gibt es einen namens Echtzeit-Browser vor diesem ganz rechten Symbol. Klicken Sie darauf und klicken Sie dann auf „Google Chrome“. Wenn Sie Chrome nicht installiert haben, ist es am besten, das jetzt zu installieren, okay, jemand ruft Web-Browser an und es ist der, den Sie tun sollten, meisten Ihrer Tests in, Sie können nicht verwenden Safari oder einen der anderen, aber Chrome ist Amen. Das habe ich bisher für dich getan. Es ist nur eine Vorschau lokal auf in meinem Browser, okay? Ich habe ein Logo bearbeitet, ich habe diese Navigation und diese große rosa Box hinzugefügt, nur um die Struktur richtig zu machen, damit wir anfangen können, zu schauen, was es reagiert. Denn im Moment, wenn ich die Kante hier greife, reagiert es überhaupt nicht, genau wie es dort sitzt. Okay, also lasst uns in Dreamweaver einspringen und unser erstes HTML-Bit hinzufügen. 4. HTML erstellen: Lass es uns reinlegen. Wir werden in den Schlag setzen, Wir werden es jetzt setzen wir haben unsere Kopfzeile hier, die mein Logo und meine Navigation enthält. Sieh dir die drei kleinen Knöpfe da an. Dann habe ich diesen anderen Brocken, der Haupt ist. Main ist der mittlere Teil der Website Hitter ist aus mir nur ein Logo und Navigation. Main hier hat bereits meine Hero-Box, und das ist die große rosa Box, die bereits erstellt haben. Es ist dieser Typ hier. In diesem, wo ich meinen Schlag will. Wir werden diesen Schlag hier gestalten. Das ist RoarX. Jetzt vorbestellen. Um einen Schlag zu setzen, müssen wir etwas setzen, das H1 genannt wird. H1 ist, wie das Schlagen eines und das Schlagen das wichtigste ist, das auf unserer Seite trifft. Die Syntax funktioniert so, wie sagen Sie diese Haupt hier, es sagt main, und es ist innerhalb dieser Winkel Klammern, dann gibt es einen Schrägstrich gemacht, um es abzuschließen. Wir müssen das Gleiche für H1 tun. Abgewinkelte Klammern stehen bei Ihrem Schlüssel, geben Sie H1 ein und schließen Sie ihn dann ab. Das ist der Anfang, genau wie meins hier. Sie können sehen, dass der zweite Teil die gleiche Weise ist, aber es hat einen Schrägstrich davor. Wir werden in eckigen Klammern Typ und Schrägstrich und hilfreich alle Dreamweaver hat es für uns ausgefüllt, das ist einer der Vorteile von Dreamweaver. Der Text geht hinein, er geht in die Mitte dieser beiden hier, es kann dazu führen, dass zwischen den beiden Tags blinkt, und wir werden RoarX eingeben, was der Name unseres neuen Bikes ist, das wir starten. Wir sagen jetzt „Vorbestellung“. Hit auf „Speichern“. Datei speichern, und ich möchte, dass Sie gehen und überprüfen Sie Ihre Echtzeit-Browser-Vorschau. Jetzt können Sie überprüfen, indem Sie zurück zu Chrome, es aktualisiert automatisch oder wenn Sie möchten, klicken Sie hier unten und klicken Sie erneut auf Google Chrome. So oder so, lassen Sie uns zu unserem Browser kommen. Sie können hier sehen, ist mein H1 RoArX. Jetzt vorbestellen, und standardmäßig ist es schwarz und fett und eine bestimmte Größe. Dass meine Freunde, ist unsere erste spuckte HTML. Wenn Sie neu im Web-Design gut gemacht sind. Dies ist unser erstes bisschen Codierung, du hast es getan. Das nächste, was wir tun müssen, ist gehen und ändern Sie diese Standardfarben und -größen und -schriftarten, um etwas, das unserem Markup in Photoshop entspricht. Also lassen Sie uns gehen und tun, dass jetzt etwas namens CSS lernen. 5. CSS erstellen: Wir haben gelernt, was HTML ist, wir haben eine h1 bearbeitet und wir haben etwas Geschmack hinzugefügt. Das ist der HTML-Code. Um dies zu stylen, verwenden wir etwas namens CSS. Ich habe hier ein CSS-Blatt erstellt. Sie können es hier sehen. Es ist in der Datei „Verwandte Dokumente“. Lasst uns darauf klicken. Ich habe schon ein paar grundlegende Sachen gemacht. Ich habe gesagt, die Heldenbox, die wir gemacht haben. Ich gab ihm eine Höhe und ich gab ihm die Hintergrundfarbe für schweben darüber von rosa. Ich habe ein paar Sachen, um uns anzufangen. Schauen wir uns jetzt an, unser eigenes CSS zu erstellen. Unter dieser geschweiften Klammer, drücken Sie „Return“. Rückgaben spielen keine Rolle in CSS oder HTML, Sie brauchen diese Rückkehr nicht, Sie können es haben, ich mag es, sie ein wenig auszuräumen, nur um es Ihnen leicht zu sehen. Wenn es um CSS geht, gibt es eine grundlegende Syntax, die wir folgen müssen. Grundsätzlich können Sie kopieren, was hier oben ist, sagen wir Körper. Da ist der Name h1, nicht zwei, h1. Es gibt ein Leerzeichen und Sie können sehen, dass es eine geschweifte Klammer am Anfang und am Ende gibt. Das werden wir tun. Wir werden die erste geschweifte Klammer eingeben und [unhörbar]. Du hast nie nur eine Öffnung ohne Schließung, also füllt sie sie dort für dich aus. Es ist das Ende für uns setzen, Lasst uns „Return“ setzen. Die „Return“ gibt uns nur ein wenig Platz, um Dinge wie diese zu schreiben, wie die Höhe und die Farbe. Zuerst setzt in Text, geschweifte Klammern. Vergessen Sie nicht den Anfang und das Ende oder löschen Sie sie nicht. Das nächste, was wir tun werden, ist, dass wir diesem Bit ein CSS geben, was ein Attribut genannt wird. Ein Attribut bedeutet nur : „Ich gebe ihm eine Sache wie eine Farbe oder könnte Schriftgröße sein“. Diese werden als Attribute bezeichnet. Sie können dort sehen, dass ich CO tippe und es in Farbe vorausgefüllt und ich drücke „Return“ und was es getan hat, ist es ausgefüllt und den Doppelpunkt dort bearbeiten. Der Dickdarm muss reingehen. Als nächstes wählen Sie eine Farbe aus. Das coole an Dreamweaver ist, dass eine Farbauswahl hat oder Sie aus Ihren Bibliotheken auswählen können, was wirklich cool ist. Lassen Sie uns auf „Farbauswahl“ klicken und was wir tun wollen, ist, ziehen Sie diesen kleinen Kreis hier. Wir können es herumziehen, wir können mit Farbtönen spielen, aber ich will, dass es in der oberen linken Ecke ist. Das wird weiß sein. Ziehen Sie es da rauf, und wir werden weiß verwenden. Wenn es schrecklich falsch geht, können Sie einfach eingeben, pound, f, f, f, f, f, f, f, f, f, das ist der Code für weiß. Das Letzte, was viele Leute vergessen, wenn sie neu in CSS sind , ist, dass Sie am Ende Semikolon treffen müssen. Das ist alles die Syntax, die Sie für CSS benötigen. Es gibt geschweifte Klammern, es gibt eine am Anfang, eine am Ende. Sie geben das Attribut ein, in unserem Fall wird es die Schriftfarbe sein, und Sie setzen danach einen Doppelpunkt ein, in unserem Fall hat Dreamweaver das für uns getan und vergessen Sie nicht das Semikolon am Ende. Lassen Sie uns gehen und speichern, aber lassen Sie uns die „Datei, Alle speichern“ verwenden. Das ist praktisch, weil es sowohl das CSS als auch das HTML gleichzeitig speichert. Sie sind tatsächlich separate Dateien, also wechseln Sie zum Quellcode, der HTML ist und dieser hier ist mein CSS. Es sind tatsächlich separate Dateien auf meiner Website. Ich finde, wenn Sie lernen, ist es besser, einfach zu „Datei und alle speichern“ zu gehen, sicherzustellen, dass alles gespeichert ist, und dann zu Ihrem Browser zu springen. Bist du bereit? Wir haben etwas HTML hinzugefügt, unsere h1 und wir haben etwas Text hinzugefügt, dann sind wir in Stil oder h1 mit CSS gegangen. Du bist dabei, Webdesigner zu werden. Du bist bereit, setz, geh. Ehrfürchtig. Sie haben HTML hinzugefügt und Sie haben in der Lage, diesen HTML mit CSS zu formatieren. Das sind die Grundlagen des gesamten Webdesigns. Wir werden ein paar andere Dinge tun, nur um sicherzustellen, dass es zu unserem Mock-up passt, aber dann werden wir weitermachen und anfangen, spezifische responsive Web-Design zu betrachten. Gehen wir und beenden es. 6. Deine Website reaktionsfähig machen: Um zu unserem Mock-up passen, wollten wir ein paar Dinge, dann haben wir das Type-Werkzeug hier in Photoshop bekommen, ich werde klicken. Ich weiß, ich will 62 Punkt für die Schriftart. Ich will es von oben nach unten drücken und hier von links weg. Gehen wir und machen das jetzt in CSS. Dreamweaver hier, lassen Sie uns eine Rückkehr und es ist Typ in Schriftart. Sie können sehen, dass es mir einige vorgefüllte Optionen gibt. Ist alles, was Schriftgröße, und Sie können sehen, es setzen die Farbe dort für uns. Jetzt in unserem Fall wollen wir eine 62. Eigentlich habe ich meine Meinung geändert. Ich werde 55 Pixel verwenden, wollte nur ein bisschen kleiner, nur weil und ich nicht vergessen habe, das Semikolon am Ende hinzuzufügen, als Sie wussten, dass das viel passiert. Aber behalten Sie bei, wir werden noch ein paar andere Dinge tun. Wir werden Streicheln eintippen. Ich habe PhD getippt und Sie können sehen, Dreamweaver super-hilfreich geht, meinst du das? Ich sagte ja, klicken Sie auf „Top“, und für die Spitze, wir werden 120 Pixel zu tun, erinnern Sie sich an ein Semikolon am Ende, und der letzte wird streicheln und ich werde tun links. Ich will einen Weg von links, etwa 60 Pixel. Lassen Sie uns „Speichern“ drücken und den Stall machen, und springen wir in einen Browser und überprüfen Sie ihn. Das ist es im Grunde, dass wir in unserem HTML, das H1 ist, gedumpt haben, und dann verbringen wir viel Zeit mit CSS-Styling, um es so aussehen zu lassen, wie wir wollen. Aber jetzt ist es an der Zeit, sich anzusehen, was responsive Design tut. Jetzt Reaktionsfähigkeit ist ein Oberbegriff, der verwendet wird, um einige Dinge zu beschreiben, die wir im Code tun, um es an die verschiedenen Bildschirmgrößen anzupassen. Eines dieser Dinge, die wir im Code machen, und wahrscheinlich ist das wichtigste etwas, das als Medienabfrage bezeichnet wird. Jetzt ist alles eine Medienabfrage genauso wie ein Trigger, und es wird sie nur ausgeschaltet, wenn eine Bildschirmgröße aktiviert ist. Werfen wir einen Blick auf etwas, das ich früher gemacht habe. Dies ist, was wir etwas als Medienabfrage zu erstellen. Es sagt nur, dass dieses H1 ausgelöst wird, wenn die Bildschirmgröße 768 Pixel oder weniger ist, aber wenn es größer als das ist, mach dir keine Sorgen darüber, dass du das Zeug ignorierst. Das ist, was es ist, ist ein Trigger, nur wenn es aktiviert wird, wenn der Bildschirm eine bestimmte Breite hat. Sie können hier unten sehen, gibt es auch eine mobile Version. Trigger dieses H1 nur, wenn es zu Pixeln oder weniger fremd ist. Lass uns das jetzt in unserer Vision erschaffen, wohin geht es? Wir werden es unter unser H1 legen. Setzen Sie es in ein paar Routinen, und das ist die heißeste, aber eine Syntax, die Sie fahren müssen, verspreche ich. Es ist nicht so schwer, aber wir müssen es eintippen und mir wörtlich folgen, das ist das „At“ -Symbol und wir werden Medien eingeben. Danach werden wir eine Reihe von Klammern eingeben. In diesen Klammern geben wir „Mex“ Bindestrich „Breite“ ein. Wir müssen einen Doppelpunkt in Nixed setzen. Stellen Sie sicher, dass es ein Doppelpunkt und kein Semikolon ist, und jetzt müssen wir entscheiden, wie groß unser Tablet es sein wird. Jetzt können Sie hier jede Größe auswählen, eine wirklich gemeinsame Tablet-Größe oder eine iPad-Größe ist 768 Pixel breit. Wir sagen nur diese Medienabfrage, hier wird für Tablet sein und das ist, was ich denke, die Größe ist. Jetzt mit der Zeit wird sich dieser Standard ändern und Sie werden feststellen, dass verschiedene Websites leicht unterschiedliche Pixelbreiten für Tablet verwenden , aber ja, es ist wirklich gemeinsame Größe, also verwenden Sie das für den Moment, aber nein, es ist keine absolute Regel. Das letzte, was wir tun müssen, nachdem diese letzte Klammer hier in eine geschweifte Klammer gesetzt ist. Wir fügen eine geschweifte Klammer und setzen sie in eine Rückkehr, das ist eine sofortige Abfrage. Nun, ich schätze, es ist ein bisschen schwer. Es gibt eine Menge Syntax, die darin hineingeht, aber was Sie in Zukunft tun können, ist, das einfach zu kopieren und einzufügen, wie ich es in alle anderen Jobs tue. Nun, was in dieser Medienabfrage geht, alles, was Sie tun möchten, aber nur auf dem Tablet ausgelöst werden. Was ich tun möchte, ist die Schriftgröße zu ändern. Wenn Sie hier meine Vision sehen können, und es geht von links ausrichten und ziemlich große Schriftgröße bis zur kleinsten Größe und zentriert. Das ist, was ich auf einer Website tun möchte, wenn die Breite auf Tablet runter kommt, ich möchte, dass Sie dieses H1 ändern, um nur die Größe und die Positionierung zu ändern. möchte nicht, dass Sie die Farbe ändern, die Farbe ist in Ordnung, würde das nur die Größe und die Positionierung verlassen. Schauen wir uns das in CSS an. Alles, was wir tun, ist, solange es zwischen diesen beiden geschweiften Klammern ist. Gerade hier werde ich in H1 tippen. Genau wie wir hier oben getan haben, müssen wir unsere geschweiften Klammern einlegen, zurückkehren, und jetzt gehen wir und stylen es. Ich möchte etwas wie Schriftgröße sagen. Wo sind Sie Schriftgröße, ich möchte, dass es bei 40 Pixeln unten ist, und sie investieren Semikolon am Ende. Stellen Sie sicher, dass die Syntax richtig ist. Sie haben geschweifte Klammern auf beiden Seiten, und Sie haben hier einen Doppelpunkt und ein Semikolon. Lasst uns ein Wachs retten. Es ist sicher. Bereiten wir uns vor, denn wir sind kurz davor, in ein unbekanntes reaktionsfähiges Territorium einzutreten, vielleicht für dich. Lassen Sie uns gehen und überprüfen Sie es in einem Browser, und die Art, es zu schmecken, ist, wir schauen auf Desktop-Ansicht hier. Es ist ziemlich breit, aber wenn wir auf 768 Pixel runter kommen, wo das ist, ziehen Sie einfach weiter, bis Sie es herausfinden, aber beobachten Sie das, komm runter. Wenn ich diese Schriftart anschaue, zeige ich darauf. Du kannst mich nicht so zeigen sehen. Dass meine Freunde ist alles responsive Web-Design ist. Es gibt andere Dinge, aber das ist der Hauptteil davon ist, dass Medienabfragen bei bestimmten Breiten auslösen, die eingehen, Änderungen, die Sie sehen werden, unterstützen Sie Ihr HTML ist genau das gleiche. Die Tics hat sich nicht geändert, nur das CSS dafür geändert, und das wird ohne Medienabfrage ausgelöst. Gut gemacht. Ich werde aufgeregt sein, ich bin dabei, aber als ich das erste Mal herausgefunden habe, war ich ziemlich aufgeregt. Gehen wir und machen ein paar andere Dinge. Springen Sie zurück in Dreamweaver. Was ich auch gerne tun würde, ist daran zu denken, dass wir ein paar Dinge tun mussten. Wir mussten tun Zecken die Linie. Im Code ist Text. Richten Sie dort ist es oben dort, und ich werde auf „Center“ klicken. Sie können sehen, dass dies das Schöne an Dreamweaver ist, dass ich es nicht eingeben oder mich an die Syntax erinnern muss. Ich kann einfach auf diese klicken und alles, was ich zu tun haben, was ist das letzte, was im Intervall diese Zeilen geht , die jeder vergisst, Semikolon. Ehrfürchtig. Klicken Sie auf „Speichern“, speichern Sie die Vorschau. Jetzt zentrieren. Es zentriert sich. [ unhörbar] ist wie auf das zentrierte Ish gefloppt. Es ist, weil das aufpassen und H1 hier. Diese H1, ist derjenige, der für mein Tablet ausgelöst wird, aber dieses H1 an der Spitze hier sagt es Pedding Lift von 60 Pixel zu tun. Es benutzt auch das. Es ist zentriert plus 60 Pixel an der Seite. können wir außer Kraft setzen. Sagen Sie eigentlich, ich will das nicht. Pedding-links, ich würde gerne Null Pixel sein, bitte. Semikolon am Ende, speichern, überprüfen. Jetzt sind wir gut. Awesome, so eine zentrierte, ist eine neue Schriftgröße, ziehen Sie es heraus, beeindruckt sein. Jetzt gehen wir in eine weitere Medienabfrage für Mobilgeräte weil sich nichts viel ändert, außer die Schriftgröße wird am kleinsten. Das ist alles, was wir tun müssen. Lass uns in Dreamweaver springen. In Dreamweaver könnten wir dieses Add erneut eingeben, oder wir könnten einfach faul sein und alles auswählen. Medienabfrage, einschließlich der letzten geschweiften Klammer, wird das die ganze Zeit vergessen. Holen Sie sich „Kopieren“ oder bearbeiten Sie „Kopieren“. Ich werde ein paar Renditen setzen und unten hier und drücken Sie „Einfügen“, und was ich tun möchte, ist ein paar Dinge. Einer ist, dass ich diese maximale Breite ändern möchte. Ich möchte es von 768 für Tablet auf eine echte generische mobile Größe ändern , die 400 Pixel ist. Nun ist diese Änderung auch ziemlich viel. Es gibt so viele verschiedene Handy-Größen, die ich 400, es ist eine wirklich gute Abdeckung für die alle, Ich denke, die neuen iPhones sind 375 Pixel breit, aber einige der großen LG Samsung Handys sind ein bisschen breiter. Ich mache es nur ein bisschen größer, nur um all die Telefone zu decken. Was brauche ich noch? Ich brauche keine Polsterung mehr, und ich brauche Tics Align nicht. Alles, was ich tun wollte, war die Schriftgröße zu ändern. Ich lösche alles, außer ich möchte aufgrund von 20 Pixeln ändern. Ich sollte retten. Lassen Sie uns Browser, Desktop, Tablet, Handy einchecken . Es ist wahrscheinlich ein bisschen klein. Aber diese Seite 28 Pixel, ich denke, das ist, was ich wollte, ein bisschen größer. Das sind unsere Medienanfragen für alle unsere unterschiedlichen Größen. Wir machen nur drei in dieser Klasse, um es einfach zu halten und oft für kleinere Websites, das ist alles, was ich tue. Einige Websites gehen jedoch ein bisschen schwieriger, beschreibt sieben verschiedene Größen. Ich habe sieben verschiedene Medienabfragen. Es liegt an Ihnen, aber ich möchte nur die Grundlagen, Desktop, Tablet und Handy bleiben . Eine Sache, die ich in CSS tun würde, und bevor wir weitermachen, ist, dass wir einige CSS-Kommentare hinzufügen. All das bedeutet, dass ich weiß, weil ich das gerade gemacht habe, was dieses Ding tut und was dieser Kerl hier tut, aber ich möchte mir ein paar Notizen hinzufügen, zu meinem zukünftigen Selbst, das bestimmt ist, um zu sagen, wie ich mich erinnere, was diese Dinge tun. Mit Ihrem Cursor direkt vor der Medienabfrage für dieses hier, dieses CSS, gehe ich auf der linken Seite hier, klicken Sie und halten Sie die, die sagt „Kommentar anwenden. Das ist ein Kommentar in CSS. Klicken Sie darauf. Es passiert nichts viel. Sie können sehen, dass es einen Schrägstrich und zwei Schauspielerinnen gibt, aber im Inneren von hier, wenn ich „Tablet“ tippe, bedeutet dies nur, dass dies vom Browser ignoriert wird. Niemand sieht es. Es sind nur die schweren Menschen, es ist für andere Web-Designer, ist für sich selbst und die Zukunft zu wissen, wovon Sie sprechen. Ich kopiere es, benutze es hier unten, und ich werde dieses Handy nennen. Lassen Sie uns zur Datei gehen, Alle speichern, überprüfen Sie funktioniert im Browser. Wenn Sie nicht auf Tablet und dann auf mobile Größen für dieses H1 gehen, können Sie einfach die Reset-Taste drücken. Lasst uns das alle machen. Du musst nicht, wenn deine arbeitet, weitermachen. Ich werde es tun. So können Sie Index 1 schließen und Index 3 tatsächlich öffnen. Klicken Sie dort auf, Vorschau in einem Browser, und es sollte genau aussehen, wie wir es vor einer Sekunde hatten. Schön. Also, wenn deine einfach nur schrecklich schief geht, öffne das hier oben und wir werden zurücksetzen und wir sind zurück zu diesem Teil hier. Im nächsten Teil unseres reaktionsfähigen Dachs haben wir uns Medienanfragen angesehen, die als Reaktionsfähigkeit angesehen werden. Ein anderes ist reaktionsschnelle Bilder. Was nur bedeutet, ist, wenn ich eines meiner letzten Beispiele hier schaue, bedeutet dies, wenn ich die Größe des Browsers oder es auf verschiedene Geräte geht, wird das Bild tatsächlich angepasst, um es am besten zu passen. Sie können sehen, dass sich dieser Hintergrund hier oben bewegt, und alle diese unteren Größen ändern sich auch, um den zur Verfügung gestellten Platz am besten anzupassen. Wir werden uns zuerst dieses Hintergrundbild ansehen, und dann schauen wir uns diese Bilder unten unten an. Sie sind beide etwas anders in der Art, wie wir uns ihr nähern. Also springen Sie zurück in Dreamweaver, öffnen Sie unsere Styles, und was wir suchen, ist die Heldenbox. Das ist die große Kiste, die ich hier habe. Schauen wir uns den an, an dem wir arbeiten. Sie können sehen, dass das die große rosa Box ist, die ich bereits für uns erstellt habe. Alles, was ich getan habe, ist, dass ich ihm eine Höhe gegeben habe, und ich gab ihm eine Hintergrundfarbe von Rosa. Aber ich werde auch gerne tun, um es ist, Ich möchte es einen Hintergrund zu geben. Ich tippe im Hintergrund. Sie können hier zum Hintergrundbild gehen. Was ich wissen möchte, ist, dass ich URL verwenden soll, drücke „Return“. Das ist der lange Weg. Bilder, ich fing an, Im zu tippen, das ist wirklich praktisch, dieses Pre-Ausfüllen Sachen. Vor allem, wenn man hier runter kommt, wenn man diese Bilder auswählt. Können Sie über ihnen schweben, dann wird es eine Vorschau für Sie. Es gibt noch einen schnelleren Weg, den Dreamweaver verwendet. Ich werde das alles rückgängig machen. Bis zu Ihnen. Sie können es in diesem langen Weg eingeben. Es gibt einige wirklich gute Code emittieren Hinweise. In diesem Fall ist BGI, also Hintergrundbild. Alles, was ich tun muss, anstatt „Return“ zu drücken oder auf eine dieser Optionen zu klicken, es nur um „Tab“ auf meiner Tastatur zu drücken. Sie können es sehen, Hintergrundbild Doppelpunkt ausgefüllt, fügen Sie die URL, die ich brauchte, und ich bin bereit zu tippen. Wenn du neu bist, gibst du vielleicht die ganze Sache aus, nur um dich daran zu gewöhnen. Aber sobald Sie los sind, tippen Sie das ganze Wort Hintergrundbild und URL. daran zu erinnern, kann hart sein. Also tippe ich einfach BGI und drücke „Tab“ auf deiner Tastatur. Was wir tun möchten, ist, dass ich mein Bild aus meinen Bilderordnern greifen möchte, also habe ich ein I eingegeben. Danke, Dreamweaver. Dann schaut es nur auf meinen Bilderordner und sieht die Bilder, die ich habe. Ich möchte das Hintergrundbild nennen. Mauszeiger darüber, und das ist diejenige, die ich im Hintergrund möchte. Sogar das Semikolon am Ende hinzugefügt. Ich werde es speichern und es im Browser überprüfen, es wird nicht funktionieren. Es ist da, aber es reagiert nicht. Ich wollte, dass es in der Lage ist, sich zu strecken, den Hintergrund zu füllen. Wir tun das, indem wir eine CSS-Eigenschaft verwenden, und es ist eine CSS3-Eigenschaft. Wenn Leute über HTML5 und CSS3 sprechen, meinen sie wirklich nur einige der neuen Dinge, die wir in CSS tun können, die wir vorher nicht tun konnten. Davor waren es HTML4 und CSS2, also ist es nur eine neuere Version. Aber es klingt ziemlich schick und einschüchternd, aber wirklich sind es nur neue Dinge wie diese. Also eine der neuen CSS-Funktionen ist Hintergrund, und ich möchte, dass die Background-size genannt wird, es gibt dort, und es gibt eine Option namens cover. Das ist eine wirklich coole neue CSS3-Funktion. Fügen Sie das Semikolon am Ende hinzu, drücken Sie „Speichern“ im Browser. Jetzt reden wir. Jetzt ist alles reaktionsschnell und füllt den zur Verfügung gestellten Platz, wird alles dehnbar und es ist die CSS3-Funktion namens cover und background-size. Also haben wir eines der Geheimnisse des neuen modernen Webdesigns enthüllt und es ist dieses Ding namens CSS3. Sie sehen es in vielen Teilen, aber wirklich sind es nur einige neue Dinge, die wir tun können , die wir vorher in der neuen Version von CSS nicht tun konnten. Wenn das jetzt schrecklich schief gelaufen ist und deine nicht funktioniert, öffne dich, ich werde das speichern und schließen. Öffnen Sie Index 4, und das sollte Sie zurück zum exakt gleichen Ort bringen, genau wie ein kleiner Reset-Check im Browser, und ja, es funktioniert perfekt. Wenn Ihre Arbeit gut funktioniert, müssen Sie nicht zurücksetzen, Sie können einfach mit Ihrem Index 1 während des Kurses fortfahren. Wenn du dich verirrst, kannst du mir mit diesen kleinen Resets folgen. Das nächste, was ich tun möchte, ist, dass ich dieses kleinere Bildraster unten unten hier aufbauen möchte. Also müssen wir in eine Schachtel setzen, in die diese Bilder gehen. Werfen wir einen Blick in Dreamweaver. Also werden diese Boxen im Allgemeinen Divs genannt. Wir haben schon ein div. Es gibt eine div helo-box genannt, das ist die Sache, die rosa war, aber jetzt hat die dehnbaren Bild-Hintergründe, also müssen wir einen davon für uns selbst erstellen. Also unter unserer Hero-Box, legen Sie eine Rückkehr, und wir werden ein div eingeben. Also gehen wir in die Klammer, und wir geben div ein, und wir geben ihm auch einen Klassennamen. Die Klasse ist nur der eindeutige Name, den wir ihm geben. Die gesamte Syntax sollte für Sie vorausgefüllt werden. Sie können sehen, dass, wenn ich das Wort tippe, während ich das Wort Klasse tippe, ich kann einfach mit meiner Maus darauf klicken, und es füllt die Syntax, und ich werde ihm einen Namen geben. Du kannst ihm einen beliebigen Namen geben. Sie müssen nur sicherstellen, dass Sie keine Großbuchstaben oder Leerzeichen verwenden. Wir werden unseren Col nennen, kurz für Spalte. Es ist wirklich üblich, diesen Begriff zu verwenden. Beenden Sie es, wir müssen in eckige Klammern setzen und dann die letzten eckigen Klammern öffnen, und genau wie in H1 setzen wir diesen Schrägstrich ein, und es beendet es für uns. Das ist genau das, was Hero-Box gemacht hat. Wir haben gerade unsere eigene Vision namens Col gemacht . Nun, wenn Sie ein wenig fortgeschrittener mit HTML hinzufügen, und Sie sind wie, Mann, das ist ein langer Weg, es zu tun, ich wünschte, es gäbe einen kürzeren Weg. Es gibt, wenn Sie nur dot col eingeben. Punkt am Anfang davon bezieht sich nur darauf, dass es ein Klassenname ist, und wenn Sie stattdessen „Tab“ drücken, es nur davon aus, dass Sie eine div-Klasse mit col meinen und es füllt sich überhaupt, und so super schnell und einfach, oder Sie können einfach Geben Sie es auf lange Weise ein, wenn Sie neu sind, nur um sich an die Syntax zu gewöhnen. So oder so, Dreamweaver ist es genial für die Hilfe. Im Innern würde ich gerne mein Bild einfügen. Also habe ich die Box gemacht, aber die Box macht noch nichts. Es ist nur eine leere Kiste. Ich möchte ein Bild darin setzen. Der Weg, es zu tun, der lange Weg. Ich will nicht, dass du es so machst, denn das ist ein sehr langer Weg. Wir tippen in eckige Klammer und geben IMG ein, dann geben wir SRC ein. Dann im SRC gehen wir los und wir finden unser Bild, dann fügen wir alle Texte hinzu und es gibt alle möglichen anderen Dinge, die wir tun müssen , nur um ein einfaches altes Bild zu erstellen. Du kannst es da oben sehen, ich habe es schon getan. Also Bild, SRC, da ist das Bild, dann müssen wir den ganzen Text einfügen. Es ist ein bisschen lang. Also werde ich es rückgängig machen, und was ich tun werde, ist unser Super-Geheimnis, Dreamweaver Ehrfurcht zu verwenden und einfach IMG drücken Sie „Tab“, Enter, und Sie können sehen, dass es all das Zeug dort für mich hineinbringt. Inzwischen der Quelle, woher kommt mein Bild? Ich tippe in meinen Ordner I for images. Vielen Dank Dreamweaver. Dann sieht es meine Bilder Ordner und sagen, meinst du das? Ich sage ja, ich meine das da, Bild 1 bitte. Lassen Sie uns „Save All“, und springen wir in unseren Browser, überprüfen Sie es, und er ist da drin. Er reagiert noch nicht, weil wir gerade ein HTML-Bild eingefügt haben, wir haben nichts anderes getan. Aber das ist der erste Teil. Wir setzen unser Bild ein. Jetzt müssen wir ihn reagieren, und wir tun das, indem wir es in CSS tun. Schauen wir uns mal an. Wir machen es etwas anders als die erste Art und Weise, wie wir es gemacht haben, weil wir die erste Option wollten, dass es ein Hintergrundbild ist. Erinnern Sie sich an diesen Kerl hier, muss ein Hintergrund sein, es funktioniert etwas anders. Also, was wir tun wollen, ist zu unserer styles.css zu springen, dann unten, ich möchte in den Stil für die Desktop-Ansicht, nicht in Tabletten. Also habe ich ein paar Renditen unter meinem Top H1, aber vor dem Tablet. Jetzt hoffe ich, dass du bereit bist, wir werden etwas Phantasievolles lernen, das einen Compound-Selektor genannt wird. Das ist ein Selektor, unser H1. Das war auch ein Selektor, das sind alle Selektoren. Was ich also gerne tun würde, ist einen zusammengesetzten Selektor zu machen. Ich würde es gerne mit Bildern machen. Also möchte ich alle Bilder reaktionsschnell machen, aber nicht alle Bilder. Ich möchte die Bilder, die nur innerhalb unserer Spalten sind. Das heißt also eine Verbindung ausgewählt. Bedeutet nur Bilder, aber nicht jedes Bild auf jeder Seite und jeder Website. Nur die Bilder, die in dem Ding sind, das wir Col nannten. Denken Sie daran, wir nannten es eine Klasse namens col. Jetzt in CSS verweisen Sie auf Klassen, indem Sie am Anfang ein wenig Full Stop haben. Die Dinge, die Sie selbst schreiben, die aus dem Nichts gemacht haben, haben ein wenig volle Stopps an der Front. Diejenigen, die in HTML vorexistieren, tun es oft nicht. Sie können das hier sehen, ich habe dieses Ding namens Helo-Box erfunden, also hat es einen vollen Halt in der Front. Aber als H1 habe ich nicht erfunden, es ist nur ein bereits vorhandener HTML-Selektor, also haben wir ihn nicht. Also Bilder, die in Col sind, was ich gerne tun werde. Ich werde meine geschweiften Klammern einlegen und zurückkehren. Um es reaktionsschnell zu machen, möchte ich es gerne zu einer Breite machen. Einfach in WI eingegeben, kommen Sie herunter, und ich möchte eine Breite von 100 Prozent machen, vergessen Sie nicht das Semikolon am Ende. Nun, das macht das meiste davon, aber es gibt ein paar andere Dinge, um es ein wenig besser in allen Browsern unterstützt zu machen , lasst uns in Höhe setzen. Die Höhe muss ein automatisches Semikolon sein. Das letzte, was wir tun müssen, ist etwas namens Anzeige und Block Semikolon. Tun Sie diese einfach, weil sie allen Browsern helfen, mit reaktionsfähigen Bildern umzugehen. Das ist der Typ, der die meiste Arbeit macht, mit 100 Prozent. Lassen Sie uns einen kleinen Blick in einen Browser werfen. Da ist er. Er ist ein reaktionsfähiges Bild, wenn ich sie nach unten skaliere, können Sie sehen, es wird kleiner mit dem Browser und wird größer, wenn ein Browser größer wird. Es ist noch nicht genau das, was wir wollen. Wir müssen ihn dazu bringen, eine gewisse Höhe zu erreichen und nicht größer zu sein. Aber so werden reaktionsschnelle Bilder gemacht. Die coole Sache über die Verwendung eines zusammengesetzten Selektors, wo wir sagten, Bilder in Spalten, es ist nicht mit diesem Bild hier oben herumlaufen, das ist mein Logo oder dieses Bild im Hintergrund davon. Es geht nur um die Bilder, die in meiner Kolumne sind. Bevor wir gehen und ihm eine Breite geben, die unserem Mock-up entspricht, was wir tun werden, ist ein paar Mal dupliziert, um alle Bilder in ihnen zu bekommen. Springen Sie zurück in Dreamweaver und springen Sie zu unserem Quellcode. Quellcode ist HTML. Dies wird stattdessen ein Quellcode genannt und was wir tun wollen, ist, dass wir diesen Col duplizieren wollen, also möchte ich, dass sechs von ihnen meinem Mock-up hier entsprechen. Sie können etwa sechs dieser Boxen sehen. Wir werden die ganze Zeile kopieren und einfügen. Der einfachste Weg, dies in Dreamweaver zu tun, ist, eine beliebige Stelle auf Ihr Bild zu klicken und auf „Control D“ auf einem PC oder „Command D“ auf einem Mac zu drücken. Sie können sehen, dass es nur ein Duplikat macht, denn was ich will, ist nicht nur ein Duplikat des Bildes, sondern auch die Spalte auf der Außenseite. Ich klicke hier rein, Control D, wir wollen insgesamt sechs. Dann möchte ich, dass du durch Bild 1 gehst, da ist ein Bild 2. Hier unten gibt es ein Bild 3, Sie müssen ausklicken, klicken Sie zurück in 4. Sie können sehen, dass es eine Vorschau für mich darstellt, oder etwas in Dreamweaver fünf und sechs. Ehrfürchtig. Lassen Sie uns auf „Speichern“ klicken und eine Vorschau in einem Browser anzeigen. Jetzt habe ich das erste reaktionsschnelle Bild, aber jetzt habe ich alle von ihnen. Wir sind bereit zu gehen. Springen Sie zurück in Dreamweaver und drücken Sie „Speichern“. Wenn deine funktioniert, genial, mach weiter. Wenn Ihre nicht, und es funktioniert völlig nicht, schließen Sie die, die wir geöffnet haben, und öffnen Sie Index 5. Das bringt uns zurück, Vorschau auf einen Browser, zurück zu dem, wo wir jetzt sind. 7. Reaktionsfähigkeit hinzufügen: Das nächste, was wir tun müssen, ist, wenn wir uns unser Mock-up ansehen, können Sie sehen, dass dieses Bild nur so groß ist, aber in unserem aktuellen Mock-up ist es Beschränkung auf die ganze Größe. Was wir tun müssen, ist der Container, in dem er sich befindet, denken Sie daran, dass wir es eine Klasse von Col genannt haben. Wir müssen sagen: „Hey, Coll, du musst 33 Prozent sein, nicht 100 Prozent so, wie du es im Moment bist.“ 33 Prozent machen unseren Block aus, 33,3, also schauen wir uns an, wie das jetzt geht, und springen zurück in Dreamweaver. Lassen Sie uns in Dreamweaver zu Stilen gehen und was ich in meiner Desktop-Ansicht tun möchte, nicht Tablet. Finden Sie Tablette direkt vor ihm, ich werde ein paar Renditen in setzen. Ich werde eine.col setzen. Ich hätte gerne Col hier, Calibraces. Ich möchte, dass Sie eine Breite haben und ich werde Prozentsatz von 33,3 Prozent verwenden. Dann das Semikolon am Ende. Stellen Sie sicher, dass Sie die richtige Syntax haben. Oft, wenn ich Menschen lehre, aber 30 Breite Zeug mit 33,3 Prozent. Stellen Sie einfach sicher, dass es so aussieht, als hätte ich „Save“ es wird funktionieren. Nehmen wir es auf, Browser. Sagt arbeiten, es gab 33,3 Prozent und vielen Dank, aber standardmäßig stapeln sie übereinander. Sie blockieren oben. Wir können das von unten überschreiben, ihn anrufen, eine schriftliche knapp unter die Breite legen und sagen, Float meine Freunde , schweben nach links, Semikolon , speichern, Vorschau und jetzt bleiben sie alle nebeneinander. Oh meine Güte, du bist fantastisch. Sie sind 33,3 Prozent, egal in welcher Ansicht ich bin. Das ist es für die Desktop-Ansicht, wir werden später etwas Padding hinzufügen, aber das ist, wie Sie unsere für unsere Desktop-Ansicht ändern. Gut gemacht als nächstes müssen wir tun, ist, dass Sie auf meinem Mock-up hier sehen können, es ist eigentlich 33,3 Prozent auf dem Desktop auf einem Tablet, es dauert 50 Prozent, oder? Wenn es ein Handy ist, sind es 100 Prozent. Das werden wir jetzt tun. In Dreamweaver, was wir in Tablet hier tun werden, unten rechts vor der Schließung weil Sie Dreamweaver hilfsbereit sehen können, hebt es. Sie können sehen, ob ich auf eines dieser beiden Anfang wieder klicke und Sie können sehen, dass das die Rapa ist, also wollen wir sicherstellen, dass alles innerhalb dieser beiden Kalibrennen unter jedem bleibt . Aber vor dieser Schließung werden wir sagen, ich würde gerne Col. Calibraces kehren zurück. Ich möchte, dass es eine Breite hat, denn genau wie wir es dort oben getan haben. Wir werden sagen, Breite von in unserem Fall ist 50 Prozent für Typ ein Semikolon am Ende. Ich muss nicht sagen, Float links bereits, denn es ist einer der oben sagt es bereits. Wir müssen es nur einmal sagen. Aber wenn es um Breite geht, wollen wir sagen, tatsächlich Tablette überschreiben die 3.3 und werden 50 Prozent. Schauen wir uns mal mal an. 33,3 Prozent manifestieren, die auf Tablet-3D-Weg sagen musste. Jetzt ist es Decking wird, wie wir es in Photoshop wollten, und es ist 50 Prozent über. Nun, ich möchte, dass du das jetzt pausieren und sehen kannst, ob du es alleine für das Handy machen kannst. Pause, los, mach es, ich mache es hier. Wenn Sie nicht angeboten werden, die d ist, lassen Sie uns gehen und es zusammen tun , oder wenn er schrecklich falsch ging, mit meiner. Wenn Sie es nicht getan haben und Sie es getan haben und Sie es als funktionierend darstellen, seien Sie sehr stolz auf sich selbst, Sie haben viel Responsive Webdesign in einer sehr kurzen Menge an Zeit gelernt . Du bist fantastisch. Was ich in Handy tun werde, möchte ich die gleiche ein Col und Kalibrennen verwenden. Ich sage nur mit meinen Freunden von dir mit 100 Prozent. Denken Sie daran, vergessen Sie nicht das Semikolon, speichern Sie es und sehen Sie eine Vorschau im Browser vor. Tablet ist 50, mobil ist 100 Prozent. Wir sind Responsive Web-Designer des neuen Jahrhunderts. Ich freue mich, aber hoffentlich bist du auch ein wenig gepumpt, weil wir wirklich die Grundlagen des responsive Webdesigns lernen. Alles andere, was wir kitzeln und arbeiten, aber wir haben schon die wahren Grundlagen erledigt und diese Grundlagen sind Medienanfragen, okay? Dann schauten wir uns ansprechende Hintergründe an. Wir haben es für hier gemacht, ein Hintergrund. Denken Sie daran, dass wir ein Hintergrundbild gemacht haben und wir verwenden diese neue CSS3-Option namens cover. Das war großartig. Aber dann wollten wir ein etwas anderes nicht als Hintergrund, sondern nur als normales altes Bild verwenden. Was wir tun mussten, ist ein Compound-Selektor zu lernen. Aber wirklich der Hauptteil war dies, wo wir sagen, mit 100 Prozent. Die Höhe der Auto und der Anzeigeblock, das ist reaktionsschnelle Bilder. Das letzte, was wir gerade gelernt haben, war, dass wir sagten: „Hey Spalte auf dem Desktop, wir wollen, dass Sie diese Breite haben. Aber wenn ich meine ausgefallene Midi-Abfrage verwende, möchte ich, dass du 50 Prozent bist.“ Im Grunde die anderen ansprechenden Änderungen, die wir tun werden, werde ich nur Iterationen sein, um dies zu tun. Wählen Sie sofortige Abfrage, wählen Sie, was steuert die Sache, die wir ändern möchten , und dann nur einige Änderungen vornehmen, je nachdem, ob wir in Tablet oder Handy sind. Wenn deins immer noch nicht funktioniert hat und es nicht funktioniert. Lassen Sie uns einen Reset machen und weitermachen. Schließen wir den Index fünf und öffnen wir Index sechs, nähern wir uns dem Ende. Hoffentlich, wenn ich eine Vorschau und einen Browser jetzt, es ist alles wach 100 Prozent. Tabletten, 30 Prozent, 33. 3 Prozent für Desktop-PCs. 8. Vervollständige unsere Website: Das nächste, was ich gerne tun möchte, ist, was mich wirklich nervig ist, dass es keine Lücken dazwischen gibt, während in meinem Design gibt es schöne große Lücken zwischen allem. Lassen Sie uns gehen und bearbeiten, weil ich in Viertelspanne bin, in Dreamweaver hier gehen wir zu unserer styles.css und was wir tun wollen, ist um die Spalte. Wir haben jetzt drei Spalten, da ist diese oberste hier, die meine Desktop-Version ist. Die obere, es wird auch als die globale bezeichnet, die obere Version dann in meinem Tablet gibt es eine andere Spalte und es gibt eine andere Spalte. Was ich tun werde, ist zu diesem Top hier und was ich sagen werde, ist in dieser Spalte, ich möchte, dass Sie eine Marge auf den Kleinbuchstaben haben, Marge von 1 Prozent. Es wird 1 Prozent direkt um die Außenseite jeder Spalte legen und es wird uns ein kleines anfängliches Problem bereiten. Um es zu speichern, stellen Sie sicher, dass das Semikolon am Ende, du wirst satt davon, dass ich das sage, nicht wahr? Lassen Sie uns in den Browser springen und es funktioniert. Es gibt eine Grenze um die Außenseite von 1 Prozent, aber weil es 1 Prozent gibt, 33,3 Prozent hier, plus 1 Prozent plus 1 Prozent plus noch ein Prozent plus gibt es einfach nicht genug Platz. Alles entspricht mehr als 100 Prozent, was wir nicht tun können. wenn Sie einen Rand von 1 Prozent hinzufügen, müssen Sie ihn von der Breite abnehmen. Es gibt 1 Prozent auf beiden Seiten, Sie können sehen, dass es 1 Prozent gibt, 1 Prozent dort, also wollen wir minus 2, bis sogar, also sind es 31,3 Prozent. Lassen Sie uns speichern, überprüfen Sie es und jetzt hat es genug Platz, um zu passen. Cool. Wir müssen das gleiche für alle von ihnen tun, denn wenn wir runter zu Tablet, tut das Gleiche. Nicht genug Platz, also was wir tun müssen, ist minus 2 von unserem Tablet. Lassen Sie uns auf 48 Prozent runter, überprüfen Sie es, wir finden alle passt. Jetzt gehen wir runter zum Handy. Mobile funktioniert immer noch, nicht sicher, warum. Das sollte es nicht. Wir werden auf 98 Prozent runter kommen, also passt alles und wir können die Grenzen an den Rändern sehen. Gute Arbeit. Nun, wenn deine wie meins ist und du 90 dort oben sehen kannst, denke ich, es liegt nur daran, dass ich eine bessere Version von Dreamweaver habe, Reset klicke und es ist weg. Passiert mir im Moment ein bisschen, aber ich bin mir sicher, dass das nur ein Fehler auf meinem Rechner ist. Eine andere Sache, die Sie auch in Bugs mir ansehen könnten , ist, weil wir eine Marge um dies gelegt haben, sich nicht mehr damit auseinandersetzt und das von oben ein wenig größer wird, also müssen wir nur eine 1-prozentige Grenze zu diesem div hinzufügen -Tag an der Spitze hier. Weißt du noch, wie wir es nannten? Es hieß Heldenbox. Lass uns hier eine Heldenbox finden, da ist er und du, mein Freund, bekommst auch einen Spielraum. Eine Marge von 1 Prozent, Semikolon, sparen. Jetzt sieht alles irgendwie ein bisschen schöner aus, es gibt auch einen Spielraum um ihn herum. Weil wir ihm keine Breite gegeben haben, muss er nicht minus von allem sein, was Sie sehen können muss er nicht minus von allem sein, was Sie sehen können, er hat keine Breite wo, also wenn er es tat, müssten Sie es abnehmen, wie wir diese anderen gemacht haben , aber wir tun es nicht, so dass er ist in Ordnung. Nicht zuletzt, was ich tun möchte, ist, schauen wir uns die Navigation an. Sie können hier auf meinem Mockup sehen, es ist Seite an Seite hier auf dem Desktop stecken, aber in Tablet und Handy sind sie übereinander. Im Moment aber bleiben sie alle übereinander. Was ich tun möchte, ist, dass ich in der Desktop-Ansicht, in meiner Navigation sagen möchte, ich habe bereits eine Klasse gemacht, eine zusammengesetzte Klasse hier, um meine Navigation zu speichern, nur um am Anfang Zeit zu sparen. Was ich gerne tun würde, ist, dass Sie nach dem suchen, der nav ul li sagt, es gibt meine Liste für meine Navigation. Was ich sagen möchte, ist, ich möchte, dass Sie sich zeigen und ich möchte, dass Sie diesen Inline-Block machen. Das heißt, sie bleiben nebeneinander, vergessen Sie nicht das Semikolon, drücken Sie Speichern, überprüfen Sie es. Ehrfürchtig. Jetzt ist das Problem, wenn es auf Tablet zu bekommen, es bleibt auch der Inline-Block und es wird ein wenig chaotisch und es gibt keinen Platz dafür mit einem Logo, so dass es darunter klebt, so dass wir es zurückschalten müssen , wenn es auf die Tablette kommt, zu dem gestapelt übereinander Methode, die wir hatten. Alles, was wir tun müssen, ist nav ul li, hier unten auf Tablet zu finden , was es nicht gibt. Was wir tun werden, ist unter der Spalte, die ich in diese eine namens nav ul li setzen werde , klicken Sie auf blaces und ich möchte sagen, wenn es hier ist, obwohl ich möchte, dass Sie jetzt Block anzeigen und das bedeutet, dass sie auf jedem stapeln. Lassen Sie uns speichern drücken, um auf dem Browser Vorschau, genial. Desktop gestapelt in der Linie und hier gestapelten Block, gleich mit mobilen. 9. Schlussbemerkung: Meine Freunde, das wird das Ende dieser hier sein. Wir haben viel in unserer gemeinsamen Zeit abgedeckt, vor allem auf Responsive Webdesign konzentriert. Nur um zusammenzufassen, Responsive Webdesign ist ein Oberbegriff, der ein paar verschiedene Dinge abdeckt, die wir tun, wenn wir eine Website erstellen. Die wichtigsten sind Medienabfragen, bei denen wir sie in verschiedenen Browsergrößen auslösen. Innerhalb dieser Medienabfragen können wir einige lustige Dinge mit Dingen wie den Spaltenbreiten machen, um sich für verschiedene Größen anzupassen und Dinge wie die Schriftgröße und Positionierung zu ändern. Auch reaktionsschnell war unsere Bilder, denken Sie daran, dass wir sie zu einer Breite von 100 Prozent für die Bilder gemacht haben. Das sind reaktionsschnelle Bilder. Wir haben reaktionsschnelle Hintergrundbilder gemacht, wo wir unser Hintergrundbild plus diese Hintergrundgröße Cover gemacht haben. So können Sie sehen, wenn es um responsive Web-Design geht, wird ein Großteil der Arbeit in unserem CSS getan und HTML wird schön und sauber gehalten. Es gibt sehr wenig, was wir tatsächlich hinzugefügt haben, aber eine Menge Funktionalität wurde mit unserem CSS getan. Alles klar, wir sehen uns später. Haben Sie einen tollen Tag.