Adobe Dreamweaver CC Webdesign von Adobe Illustrator Mockups

1. Einführung: Hey da, mein Name ist Dan und in dieser Videoserie werden wir diese responsive Portfolio-Website mit Dreamweaver machen Jetzt gehen wir durch diesen Kurs Schritt für Schritt lernen alles, was wir wissen müssen, um eine Website zu erstellen. Wir werden auch einige Dreamweaver-Templating-Tools verwenden, damit wir websiteweite Änderungen an unseren großen Websites schnell und einfach vornehmen können. Wir werden auch dieses ansprechende Dropdown-Menü hier von Grund auf neu erstellen. Wir müssen ein wenig JavaScript und jQuery lassen. Jetzt bin ich Adobe Certified Instructor, ich kann Adobe auch helfen, viele ihrer Dreamweaver-Tutorials für ihre Website zu erstellen. Ich bin auch Dreamweaver-Lautsprecher auf der Adobe MAX Conference in Las Vegas und noch besser, ich bin gerade in Ihrer Kopie von Dreamweaver. Geh und mach es auf. Öffnen Sie Dreamweaver, gehen Sie zu Hilfe, gehen Sie zum schnellen Tutorial, und da bin ich in der Maschine. Dieser Kurs ist für Anfänger gedacht, Sie benötigen keine Vorkenntnisse in Dreamweaver oder Webdesign Erfahrung. Wir werden Dreamweaver geteilte Ansicht verwenden, so dass Sie alle guten visuellen Werkzeuge sowie einige einfache Amine hier unten im Code als auch verwenden können. In dieser Serie wird dieses statische Design hier nehmen , mit dem wir von Illustrator beginnen und zusammen, Schritt für Schritt alles in HTML, CSS und JavaScript bauen. Wir werden unsere eigene Navigation mit jQuery machen. Wir werden Anpassungen an der Website vornehmen, so dass alles auf allen verschiedenen Geräten gut aussieht. Wir arbeiten mit schönen Schriftarten und Farben und fügen sogar Google Analytics zu unserer Website hinzu, damit wir einige erstaunliche Informationen darüber erhalten können , wer unsere Website besucht. Jetzt Web-Design kann ziemlich schwierig sein, wenn Sie jemals verloren gehen, ich bin um zu helfen, verwenden Sie einfach einen der Kommentare auf einer der Seiten. Außerdem erhalten Sie Übungsdateien, so dass Sie mit mir in der Videoserie spielen können, ich speichere auch etwas, das die fertigen Dateien genannt wird. Am Ende jedes Videos speichere ich ein oder zwei, dass du dein mit meinem vergleichen kannst, nur für den Fall, dass dein ein wenig verloren geht. Schauen Sie sich den Link hier für die Website, die wir zusammen bauen werden, und ich möchte, dass Sie super aufgeregt über den Aufbau einer Website wie ein Profi. Wir sehen uns im Unterricht. Danke, Leute. [ Unhörbar] [MUSIK] 2. Übungsdateien: Hallo, was werden wir in diesem Kurs machen und was sind die Ressourcen? Wir werden ein Design nehmen, das wir in einer früheren völlig anderen Klasse gemacht haben . Es war ein vollständiges Web- und UI-Design mit Illustrator. Du musst diesen Kurs nicht gemacht haben. Es ist ziemlich praktisch, wenn Sie den Designprozess sowie den Build durchführen möchten , also können Sie das tun. Aber wir werden dieses Design mit Dreamweaver in eine voll reaktionsfähige Website verwandeln. Wir werden in diesem Kurs viel Live-View verwenden. In unseren vorherigen Tutorials habe ich die Codeansicht verwendet. Das ist in Ordnung mit der Codeansicht. Wir werden verwenden, die mehr Live taktile [unhörbare] Version von Dreamweaver. Ich schätze, das ist es, was String macht. Wir haben eine ganz einzigartige von anderen Code-Editoren ist es Art von Drag & Drop, Klick und Play Art Zeug. Wir werden uns in diesem Kurs darauf konzentrieren, ein bisschen Code. Die andere Sache ist Übungsdateien und Ressourcen, diese Art von Sache. Es gibt Übungsdateien, die Sie herunterladen können. Sie werden ein Link auf dem Bildschirm sein, der hier ein wenig Pop-Rauschen macht. Gehen Sie diese herunterladen und Sie können mitspielen. Es gibt auch etwas, das als abgeschlossene Dateien bezeichnet wird. Am Ende jedes einzelnen Videos speichere ich die Website dort, wo ich gerade bin. Nur damit, wenn du dich verirrst oder wie man es ausarbeitet, kannst du meine Version herunterladen und einfach den Code überprüfen und nur sehen, wo du falsch gelaufen bist. Auch für dieses Video werden wir über Bewertungen und Kommentare sprechen. Sie werden ein Kommentarbereich auf jeder Seite sein. Wenn Sie Probleme haben und es einfach nicht für Sie funktioniert, schreiben Sie mir eine E-Mail oder besser noch gibt es die Kommentare auf der Seite, so tun Sie das. Wenn Sie zu einem Punkt in diesem Kurs, wo Sie sind wie, gibt es eine ziemlich gute lassen Sie mir eine Rezension. Diese Art von Bewertungen sind die Dinge, die wirklich helfen, meine Kurse gut zu machen und mir hilft, ein Vollzeit-Online-Trainer Typ Person. Wenn Ihnen der Kurs gefällt, hinterlassen Sie eine Rezension. Ja, ich glaube, das war's. Lass uns losgehen und den richtigen Kurs beginnen. 3. So richtest du Websites ein: Hallo, da. In diesem Video werden wir unseren Arbeitsbereich so einrichten, dass wir erstaunliche Websites entwerfen können. Nun wird sich dieser spezielle Kurs hauptsächlich auf die Live-Ansicht oder diese Art von mehr Design visuelle Seite der Verwendung von Dreamweaver konzentrieren. Sie können diesen Kurs vollständig auf der Code-Seite machen, wenn Sie es bevorzugen, aber wenn Sie genau folgen möchten, werden wir dies in der visuellen Ansicht tun. Um dies zu tun, müssen Sie zunächst sicherstellen, dass Sie nicht auf Entwickler sind. Entwickler ist in Ordnung, aber wir werden in Standard arbeiten. Standardmäßig werden wir ein neues Dokument nur vorübergehend öffnen. Okay, Datei, neu. neues Dokument, HTML, keine, klicken Sie auf „Erstellen“. Wir werden das in einer Sekunde schließen. Wirklich alles, was wir tun wollen, ist in der Lage zu sein, dies zu sehen. Sie können hier in der Codeansicht arbeiten, teilen oder live. Wir werden in Split arbeiten, was bedeutet, dass es Teil Live-Ansicht und Teilecode ist. Die andere Sache ist, ich habe meine horizontal geteilt. Manche Leute bevorzugen vertikal. Ich bin mir nicht sicher, worauf Sie sich eingestellt haben. Also gehen Sie nach oben, es gibt Ansichtsmodus und dann gibt es diesen hier namens Split. Sie können entweder vertikal aufteilen, so dass Sie Ihre Website auf dieser Seite und den Code auf dieser Seite sehen können, entweder wie Sie möchten. Aber wenn du mir folgen willst, lasst uns horizontal an der Spaltung arbeiten. Die andere Sache ist, dass wir zum CSS Designer-Panel wechseln werden. Wir werden eine Menge Zeit hier verbringen. Das einzige Problem damit, es ist ziemlich klein in der Standardeinstellung, also werden wir zwei Dinge tun. Also das DOM-Panel hier unten, das Asset-Panel und das Snippets-Panel dort [unhörbar], aber sie nehmen eine Menge Bildschirm-Immobilien ein. Wir werden auf das Wort DOM doppelklicken. Es ist immer noch da unten, wenn du es brauchst. Aber es ist schön und klein, da es die CSS-Designer-Ansicht erweitert hat. Eine andere Sache, die wir tun werden, ist, wenn ich meine Maus schnappe und sie einfach schwebe, einfach da. Sehen Sie diese Ebenen, Ich werde klicken und ziehen Sie sie aus und beobachten Sie dies. Es wird von einer Spalte zu zwei Spalten gehen. Ich finde, das ist der beste Weg, um zu lernen. Es hat alles schön und offen. Selbst wenn Sie nicht lernen und wenn ich Dinge in Live-View mache, ist dies die Art, wie ich es vorziehe, zu arbeiten. Nun, wenn Sie einen wirklich kleinen Bildschirm haben, wie einen 13-Zoll-Laptop oder 11, und Sie müssen ihn vielleicht wieder hier drin stecken, weil es einfach nicht funktionieren wird. Aber ich werde meine gerade hier anfangen, ich habe 15-Zoll-MacBook Pro und es funktioniert gut so. Sie haben ein paar Einstellungen vorgenommen. Wir haben es funktioniert perfekt. Was wir tun werden, ist, das zu retten. Wenn wir es später durcheinander bringen, können wir es zurücksetzen, oder wenn Sie es an verschiedene Monitore anschließen, diese Art von Sache. Um es zu tun, hier oben, wo es Standard steht, fallen Sie das unten, sagen Sie, ich würde gerne einen neuen Arbeitsbereich haben. Ich werde das den Arbeitsbereich „Dan is Awesome“ nennen. Nennen Sie Ihren, was immer Sie wollen. Es bedeutet nur, wenn Sie später ziehen Sie das und es verbindet sich dort drüben und es endet eine Verbindung zu diesem und Sie versehentlich schließen dies und das, es ist alles seltsam, was Sie tun können, ist kommen zu Dan ist Awesome und klicken Sie auf „Reset Dan is Awesome „und es setzt es, alles außer diesem zurück, es stellt sich heraus. Ich dachte, das würde es tun. Zumindest wird es alles wieder normal, wird von der Seite die gleiche Breite ausgedehnt. So dass mein Freund ist, wie Sie Ihren Arbeitsbereich super süß aussehen und wie Sie ihn speichern und später zurücksetzen, wenn Sie müssen. Alles klar, lass uns gehen und anfangen, eine Website zu erstellen. 4. So erstellst du eine neue Website in Dreamweaver: He, da. In diesem Video werden wir unsere Website-Definition erstellen. Wir müssen dies für jede einzelne brandneue Website tun , die wir in Dreamweaver erstellen werden, es ist super einfach, Sie können es hier sehen, ich habe einen Ordner und darin hat es einen Bilderordner, das ist alles, was wir tun müssen. Gehen wir und machen das jetzt. Wenn Sie aus dem letzten Tutorial folgen, werden wir nur die Sache schließen, die wir gemacht haben, wir werden unsere Website einrichten. Sie müssen dies zu Beginn jeder neuen Website tun. Wenn Sie ein Webdesigner und 10 verschiedene Clients haben, müssen Sie dies 10 verschiedene Male tun. Wenn Sie an Ihrer eigenen Website arbeiten und nur eine davon haben, müssen Sie dies nur einmal tun. Gehen wir auf Site, New Site, geben Sie Ihrer Website einen Namen, ich werde unser Dan's Awesome Portfolio nennen. Wo werden wir es hinstellen? Der Sitename hat eigentlich keine anderen Auswirkungen als das, was Sie in Dreamweaver verwenden, um alle Ihre Dateien zu finden. Das habe ich für immer gedacht. Ich dachte, es gibt keine Auswirkungen darauf, du kannst es so nennen, wie du willst. Jetzt komme ich aus der Zukunft zurück. Ich bin Dan von Video 22. Dein Video 4, und ich bin zurückgekommen, um dir zu sagen, setze den Apostroph nicht rein, weil Web das ganze Leben finden , was hier drin ist, dachte ich. Aber ich dachte nicht, wenn jemals einen Apostroph in diesem kleinen Website-Namen setzen. Ich bin mir nicht sicher, ob es ein Site-Name ist, der das Problem hat, oder der Ordnername ist, einer von ihnen ist das Problem. Anstatt zurückzugehen und die zwei Tage mit einem Video, in dem ich mit dem Apostroph hier drin habe, neu aufzunehmen , bin ich gerade rechtzeitig zurückgekommen, um zu sagen: „Tu es nicht, stell es nicht rein.“ Dann werden Sie für die nächsten 22 Videos dieses Apostroph sehen und es noch einmal ansehen. Setze keine Apostrophe da rein. Bleiben Sie weg von allen Fremdschlüsseln wie extrinsisch, Enthusiasten haben Sie nur regelmäßige Oberteile und senkt, und das wird keine Probleme verursachen, wenn wir später bekommen, wenn wir eine Vorlage erstellen. Fahren Sie fort und tun Sie alles, außer Apostrophe in den lokalen Site-Ordner und den Site-Namen zu setzen. Zurück in deine regulären Videos, und ich hoffe, ich treffe nicht in mein vergangenes Selbst. Jeder hat zurück in die Zukunft gesehen? Hoffentlich bist du nicht so jung. Sicherlich haben alle Zurück in die Zukunft gesehen. Genug. Zurück in sie. Lokaler Website-Ordner, das ist genau, wo auf Ihrem Laptop dies aufbewahrt werden wird, ich werde meinen auf meinem Desktop setzen, ich werde meinen in einen neuen Ordner hier setzen, und ich werde es Dan's Awesome Portfolio nennen. Cool. Außerdem hat dieser physische Name für den Ordner keine Auswirkungen. Manche Dinge tun offensichtlich, aber das tut es nicht. Klicken Sie auf „Auswählen“. Das letzte, was wir hier tun möchten, ist gehen Sie zu den erweiterten Einstellungen, und lassen Sie uns zum Standardbildordner gehen. Klicken Sie auf das kleine Durchsuchen, Sie können sehen, dass es in diesem neuen Ordner, den ich gerade gemacht habe, machen wir einen neuen Ordner hier, und nennen Sie es Kleinbuchstaben Bilder. Das ist etwas Spezifisches. Nennen Sie es Bilder mit einem Kleinbuchstaben oder ohne Leerzeichen, klicken Sie auf „Erstellen“, klicken Sie auf „Wählen“. Das hilft uns erst später, wenn wir Bilder von überall auf unserem Computer einziehen. Dreamweaver weiß, wo sie abgelegt werden sollen. Das war's. Klicken Sie auf „Speichern“, und dass mein Freund alles ist, was wir tun müssen. Wenn Sie es nicht sehen können, lassen Sie die Dateien oben hier wechseln. Wenn Sie keine Dateien sehen können, gehen Sie zu Window-Dateien, Sie werden sehen, dass es meinen kleinen Ordner gibt. Auch auf meinem Desktop gibt es ein Dan's Awesome Portfolio. Es gibt nichts hier, außer dass es einen Ordner gibt, der Bilder enthält, und es ist nichts drin. Aber nur damit Sie es wissen, entwerfen Sie Ihre Website zuerst lokal auf Ihrem eigenen Computer, und wenn Sie fertig sind, schieben Sie sie auf Ihren Host, jemanden wie GoDaddy oder Bluehost, und sie werden es der Window World dienen. Also, das ist es für die Einrichtung unserer Website. Sie müssen das für jede einzelne Site tun. Sie werden alle meins hier sehen, ich habe viele Websites, an denen ich arbeite. Wenn Sie es falsch gemacht haben, können Sie zur Website gehen, zu Sites verwalten gehen, und Sie werden sie hier sehen, es gibt Dan's Awesome Portfolio, doppelklicken Sie darauf, und Sie können zu demselben Bildschirm zurückkehren. Lasst uns in das nächste Tutorial einsteigen. 5. So erstellt man eine neue HTML-Seite in Dreamweaver: Alles klar, in diesem Tutorial werden wir eine brandneue Seite erstellen, wir werden es Index nennen, wir werden ein Logo einbringen, wir werden es mit unserer Homepage verknüpfen, wir werden etwas Alt-Text hinzufügen, all das gute Zeug zu starten Sie jede gute Website. Lasst uns das jetzt machen, also fünf Videos in und wir haben immer noch nichts, also lasst uns tatsächlich eine Seite erstellen. Wenn Sie zu Datei Neu gehen, oder ich werde diese hier verwenden. Jetzt ist der wesentliche Teil wie jede Website ein HTML-Dokumentfall, ich habe ein neues Dokument, wir werden HTML verwenden und wenn es um Bootstrap oder None geht, werden wir None verwenden. Wenn Sie auf Bootstrap interessiert sind, habe ich einen weiteren vollständigen Kurs zur Verwendung von Bootstrap, aber dieser hier werden wir unsere eigene Reaktionsfähigkeit erstellen, anstatt die Bootstrap-Vorlage zu verwenden. Also keine, stellen Sie sicher, dass es HTML5 ist, wir werden unseren Dokumententitel geben. Titel ist wirklich wichtig, Sie können jeden Text verwenden, den Sie mögen, so werde ich Daniel Walter Scott Web-Design-Portfolio verwenden . Warum lege ich alles, was da drin ist? Es liegt daran, dass alles, was Sie in diesem Titel hier in Google eingefügt haben, hier erscheint. Wenn ich eine Suche für meine damit selbst, Sie werden sehen, dass Siegel das Zeug in blau hier ist dies tatsächlich aus dem Seitentitel gezogen wird, also hier in Traum Leader, sehen Sie dies hier? ist, wo die blaue Schrift herkommt, so dass es wirklich wichtig ist, lassen Sie es nicht als unbetitelt, weil Sie nie auf irgendeine Art von Suche rangieren , so dass Sie hier sehen können, das ist, wo es erscheint. Es erscheint auch, wenn ich auf bringen einen laptop.com kann oben hier sehen, okay, das ist, wo es auch erscheint. Es ist dieser kleine Name hier drinnen. Sie können hier sehen, ich habe eine Menge guter Keywords getan, Adobe-Materialien, aber jeder, der hat, um sie zu bringen und endete. Das ist also auch, wo es so erscheint, dass sowohl die blaue Google auf dem kleinen Tab oben dort enden. Also vergessen Sie nicht, es muss einzigartig für jede einzelne Seite, die Sie machen, also wenn Sie eine 100 Seiten auf Ihrer Website haben, benötigen Sie 100 separate Titel, die nicht Spaß zu gehen und zu versuchen und zu erstellen, aber getan werden muss. Sobald Sie das getan haben, lassen Sie uns auf „Erstellen“ klicken und Sie haben Ihre erste Seite. Jetzt werden wir diese erste Seite speichern, damit wir zu „File Save“ gehen, wir werden diesem einen Namen geben und dies ist eine der wenigen Seiten, auf denen wir ihr einen wirklich bestimmten Namen geben müssen, wir müssen es index.html nennen. Wenn jemand geht auf Ihre Website, sie gehen zu einem Daniel ist awesome.com, es wird kommen Website nicht gefunden, es braucht mindestens diese eine Seite. Dies gilt als Ihre Homepage und es muss genau wie diese oder in Kleinbuchstaben index.html ausgegeben werden. Andere Seiten haben wir ein bisschen mehr Freiheit mit, aber diese definitiv index.html. So werden Sie hier in meinem Dateifenster sehen, da es ist, ich habe mein erstes bisschen HTML dort sitzen und das wird für uns generiert, Sie können das Tag sehen, den Titel, so dass Sie dies aktualisieren können er jetzt, in der Codeansicht und brechen Sie nichts anderes durch Löschen Sie es, lassen Sie alles dort. Das erste, was wir tun, bevor wir gehen, ist, dass wir tatsächlich etwas zu unserer Seite hinzufügen , so dass wir hier in der Live-Ansicht oben klicken hier und wir gehen zu „Einfügen“ und oben oben hier werden wir HTML auswählen und wir gehen klicken Sie auf diese das Bild genannt, und wir werden jetzt in Logo bringen. Wenn Sie es noch nicht getan haben, gehen Sie auf den Link auf dem Bildschirm und laden Sie die Übungsdateien herunter Sie können sie kostenlos herunterladen. Bereits heruntergeladen meins, sie sind auf meinem Desktop und ich werde meine Bilder Ordner öffnen und hier will ich die eine namens Logo, Ich werde die PNG so Logo Bindestrich Daniel Bindestrich verwenden, Walter, Bindestrich Scott. Lassen Sie uns auf „Öffnen“ klicken und dann ist meine Freunde unser Logo auf unserer Seite, es ist etwas unweiß, aber wir werden das später auf einen dunklen Hintergrund setzen und das ist fast alles. Wann immer Sie ein Bild einfügen, können Sie hier unten sehen, wie es in der Codeansicht aussieht, was wir tun müssen, ist, dass wir etwas namens Alt-Text oder alternativen Text für jedes einzelne Bild hinzufügen müssen . Es wird von Google verwendet, um die Website zu referenzieren und eine Website, die viele gute Alt-Texte hat, wird mit seinen Rankings helfen, unsere Website, die keinen Alt-Text so wahrscheinlich ziemlich schlecht in den Suchergebnissen zu tun hat. Um den Alt-Text zu aktualisieren, klicken Sie auf das Logo hier, klicken Sie auf das kleine größere Menü neu und drücken Sie „Alt“ Text hier, geben Sie ihm einen guten Keyword-Namen, also werde ich in meinen Namen setzen. Dies kann Leerzeichen haben und es braucht keine echte spezielle Syntax, aber nur gute Keywords, also nenne ich es Webdesign, Portfolio, Logo. Ich könnte es einfach Logo nennen, aber das einzige Problem damit ist, dass es keine guten Keywords sind und ich würde mit jeder anderen Person konkurrieren , die eine Website mit dem Keyword-Logo hatte, ich möchte mit einer sehr spezifischen Nische konkurrieren, Mein Name, Web, entworfene Logo. Was wir auch tun, bevor wir hier auch verlassen, und das ist spezifisch nur für das Homepage-Logo und es ist sehr üblich, auf das Logo zu klicken, um zurück zur Homepage zu gehen, werden die Leute Listen hören haben eine Schaltfläche in der Navigation das ist zu Hause, ich 'll nur davon ausgehen, dass Sie auf das Logo klicken können, und es wird Sie zurück nach Hause bringen. Jetzt ist dies bereits ein Zuhause, was seltsam ist, aber wir werden diese Seite als unsere Vorlage verwenden, um andere Seiten zu machen. Also, was wir tun werden und wo es sagt Link hier, wir werden auf Durchsuchen zu Datei klicken. Wir werden dies sagen, wenn geklickt wird, geht es zurück zu index.html, was im Moment etwas Seltsames bedeutet, weil es einfach zu sich selbst zurückgeht, aber später, wenn wir seine Seite kopieren und einfügen und es die Über uns Seite wird, wird es nützlicher. Sie können hier sehen, siehe kleinen Stern es bedeutet, dass diese Seiten nicht gespeichert ist, „Datei“, „Speichern“, um sicherzustellen, dass es alles schön und sauber ist. In Ordnung, also haben wir eine Seite erstellt, wir haben ein Logo darauf geklebt, mit kleinen Ticks bearbeiten und einen Link bearbeiten, und wir fangen an. In Ordnung, lasst uns in das nächste Tutorial einsteigen. 6. So erstellst du die beste Vorschau für deine Website in Adobe Dreamweaver: Hey da, wir sind in super extreme Nahaufnahme Version, so dass ich Ihnen zeigen kann, wie Sie Ihre Website am besten mit Dreamweaver und Echtzeit-Browser-Vorschau Vorschau anzeigen können. Schauen wir uns das mal an. Also, während Sie arbeiten, haben Sie auf geteilte Ansicht, wir können den Code sehen und wir können die Live-Ansicht von oben hier sehen, und das ist total in Ordnung, um Ihre Website in einer Vorschau zu sehen. Das einzige Problem ist, dass überall blaue Linien sind. Sie können diese Kante hierher ziehen, um die Größe zu ändern. Um zu sehen, wie es in verschiedenen Ansichten aussieht. Mein einziges Problem ist, doppelklicken, um es wieder fit zu machen, ist, dass es hier nicht immer perfekt aktualisiert wird und es ist besser als je zuvor, aber ich mag immer eine Vorschau im Browser. Als erstes müssen Sie sicherstellen, dass Sie Google Chrome installiert haben. Wenn Sie an einem Mac arbeiten und Safari haben, aber nicht Google Chrome, müssen Sie das herunterladen und installieren. Warum? Da jeder Google Chrome verwendet und wenn es in Google Chrome funktioniert, ist es mehr als wahrscheinlich gehen, um in vielen anderen Browsern zu funktionieren. Testen Sie also in diesem. Es ist erstaunlich, der Prozentsatz der Menschen, die tatsächlich verwenden Chrome im Vergleich zu jedem anderen Browser, einschließlich Internet Explorer oder Safari oder Firefox oder was auch immer Sie verwenden. Sie können auch dort testen, aber stellen Sie sicher, dass Sie Google Chrome installiert haben. Sobald Sie es installiert haben, sollte es einfach in, unter Datei, Echtzeit-Browservorschau angezeigt werden. Es sollte hier drinnen erscheinen, wie meins. Wenn dies nicht der Fall ist, können Sie zu Browserliste bearbeiten gehen und sie finden. Also, sobald es installiert ist, Sie gehen zurück zu genau, wo wir gerade waren, oder einfacher, es gibt ein kleines Symbol unten hier, und Sie können hier sehen Vorschau in Chrome. Der Browser wird angezeigt und Sie können ihn hier sehen. Da ist mein Logo und ich kann es anklicken und es ist alles gut. Das coole an der neuen Version von Dreamweaver ist das, was man eine Echtzeit-Browservorschau nennt. Alles, was wirklich bedeutet, ist, dass, wenn ich den Code hier in aktualisiere, ich dies verschieben werde, damit Sie beide sehen können. Wenn ich das aktualisiere und sage, ich möchte, dass mein Logo 131 Pixel breit ist, können Sie sehen, dass es gerade perfekt aktualisiert wurde, ohne dass ich es zurücksetzen oder speichern muss. Es ist dynamisch. Es bedeutet nur, dass ich nicht sicher bin, ob ich diese Größe will. Wenn ich es lösche, wird es nur aktualisiert, während ich arbeite. Während dieses Kurses sind wir auf den Bildschirm beschränkt, den Sie sehen können, aber ich habe tatsächlich zwei Monitore hier auf meinem Computer. Also habe ich das hier oben auf einem anderen Bildschirm. Was du jetzt nicht sehen kannst. Dann habe ich das hier bei vollem Geräusch, und es bedeutet nur, dass, wenn ich dies auf diesem Monitor hier drüben aktualisiere, dass du nicht sehen kannst, es visuell aktualisiert wird, damit ich es sehen kann. Wenn ich mich also in der Codeansicht verstecke und einige Dinge mache, kann ich sehen, dass die Anpassungen passieren, falls ich einen Fehler mache oder einfach nur eine Vorschau darauf mache, während es geht. Wir sind auf dem Weg ins echte Leben und reden Dan, um es dir zu zeigen. Also, während ich arbeite, habe ich zwei Bildschirme hochgefahren. Ich habe Dreamweaver auf diesem einen, und ich habe meinen großen Bildschirm zeigt Google Chrome mit einem Echtzeit-Browser-Vorschau. Also klicke ich darauf und klicke dann auf „In Echtzeit Browser Vorschau anzeigen“ und beobachte es dort drüben. Lassen Sie mich einfach eine große Änderung vornehmen, damit Sie leicht an der Kamera sehen können. Also werde ich hier Bild packen, ich schalte Sie einfach aus. Sieh dir das an. Gut, weg. Also mache ich hier eine Änderung und es zeigt sich sofort hier. Es ist wirklich praktisch, wenn ich hier arbeite und es sieht alles gut aus, die ich bin wie oh, etwas hat sich hier verändert. Also ja, es ist eine wirklich gängige Art, als Webdesigner zu arbeiten. Zwei Bildschirme, sie sehen toll aus. Also danke Echt Dan. So sehen Sie in Ihrem Browser eine Vorschau. Sie können hier einchecken, aber stellen Sie sicher, dass Sie es im eigentlichen Browser nochmals überprüfen. Wir schauen uns die Überprüfung auf Handys und Tablets später an, wenn wir tatsächlich etwas zu überprüfen haben. Das war's also. Lassen Sie uns in das nächste Tutorial gehen. Wir sehen uns dort. 7. So verschiebst du die Tags in Dreamweaver: In diesem Video werden wir Tags setzen und die Tags einrichten und Ihnen dieses DOM-Panel vorstellen. Gehen wir und machen das jetzt. Das erste, was wir tun müssen, ist, dass wir ein Header-Tag einfügen. Nun, hier drüben, unter Einfügen eines HTML, wird Ihre Website drei große Stücke haben. Es wird eine Kopfzeile haben. Es wird einen Hauptabschnitt haben. Es wird eine Fußzeile haben. Das ist oben, Mitte und unten. Die Kopf- und Fußzeile werden in der Regel auf jeder Seite gleich sein und wir werden sie später in eine Vorlage verwandeln. Die Hauptseite ist, wo sich alles für Ihre eigentliche Seite ändern wird. Wir haben das Logo zuerst gesetzt, was ein bisschen seltsam ist. Wahrscheinlich setzen Sie Ihre Kopfzeile zuerst und dann das Logo darin ein. Ich habe es getan, weil ich Ihnen zeigen wollte, wie man Tags neu anordnet, wenn man sie an der falschen Stelle bekommt. Was wir tun werden, es spielt keine Rolle, wo Sie hier in der Live-Ansicht geklickt haben . Klicken Sie auf den Einfügen HTML klicken Sie auf Header, und es wird irgendwo angezeigt. Es spielt keine Rolle, ob es hier unter oder über dem Logo steht. Nun, was Dreamweaver auch tut, ist, dass es einige bereits vorhandene Ticks hinzufügt. Platzieren Sie Halterticks, denn wenn dieses Häkchen hier nicht angezeigt wird, können Sie es nicht sehen, weil es keine Höhe, keine Breite, keine Abmessungen hat . Der Header geht hinein und du kannst ihn nicht sehen, also ist es ein bisschen stumm. Sie fügen hier einige Ticks hinzu, um hilfreich zu sein. Diese Ticks wird so ziemlich sofort gelöscht, sobald Sie begonnen haben, es zu verwenden. Das erste, was wir tun wollen, ist, dass ich mein Logo in meinem Header setzen möchte. Siehst du hier unten in meiner Codeansicht, da ist mein Header. Anfang und Ende, hier ist das Logo mit Hyperlinks und Sie können die alten Ticks und die Größe davon sehen. Dieses Ding würde ich gerne in den Header gehen. Es gibt zwei Hauptwege, es zu tun. Es gibt tatsächlich ein paar, es liegt an Ihnen, ob Sie lieber an den Werkzeugen k kleben oder in der Codeansicht arbeiten möchten, es liegt ganz bei Ihnen. Lassen Sie uns den offiziellen Weg verwenden, den Adobe empfiehlt. Ich habe mein DOM-Panel hier geöffnet, wenn Sie nicht sehen können, dass es sich unter Window DOM befindet, und hier ist der Leiter meiner Website. Das ist alles, was der Computer sieht. Sie können sehen, wie mein Titel hier sagt mir, welche Tastatur verwendet. Aber der Benutzer sieht nichts von diesem Kopf. Es sieht das Zeug, das die Leiche am Ende hat. Der Körper enthält meine Kopfzeile, enthält mein Bild, und das ist im Moment darüber. Hier drüben auf meinem DOM-Panel, sehen Sie, dass mein Körper ist, ich muss das halten. Es gibt meinen Header getrennt von meinem ein Tag, das dieser Link mit meinem Bild darin ist. Sie können einfach klicken und ziehen Sie die a innerhalb der Kopfzeile und sie gehen hinein und sie werden eine glückliche Familie. Dann kann ich diesen Platzhaltertext durchgehen und löschen. Sie können es von hier oben tun, denn es wird dabei bleiben, es hier in der Live-Ansicht zu tun. Cut-off, und jetzt war's das. Wir haben einen Header, der mein Bild darin hat, mit meinem Tag, das ist, wie man Dinge an die falsche Stelle bringt. Sie müssen sie entweder in das DOM ziehen. Ziehen Sie sie einfach in das richtige Tag oder ich werde alles löschen, ist, dass hier mein Kopfzeilentext ist und dann den Text hier löschen. Schnappen Sie sich all das, also von einem Tag zu einem Tag, schneiden Sie es. Legen Sie meinen Curser da rein und kleben Sie ihn ein. Es spielt keine Rolle, wie Sie es gerne machen, es über das DOM ziehen oder es einfach hier unten kopieren und einfügen. Es gibt nur viele Male, in denen es einfacher ist, das eine und das andere zu machen. Ich gebe Ihnen beide Techniken, damit Sie diesen Kurs durcharbeiten können. Lassen Sie uns Speichern, Datei speichern. Lassen Sie uns fortfahren, um unseren Header zu stylen. 8. So erstellst du Bearbeitungsstile in deiner ersten CSS-Stilvorlage in Dreamweaver: Hallo, da. In diesem Tutorial werden wir unser allererstes CSS-Blatt erstellen, das Sie ihn dort sehen können. Wir werden tatsächlich unsere Kopfzeile stylen. Keine Sorge, es wird nicht immer so schrecklich grün bleiben. Wir werden einige Polsterung und einige tolle CSS hinzufügen. Machen Sie sich bereit, Ihr allererstes CSS Blatt zu erstellen. Bisher haben wir eine HTML-Seite erstellt. Es ist index.html. Habe HTML loswerden, geht nicht viel. Jetzt müssen wir gehen und seinen Header stylen. Wir stylen es mit CSS oder Cascading Style Sheets. Um ein Stylesheet zu erstellen, gehen wir zu unserem CSS-Designer-Panel. Ich werde das DOM aus dem letzten Tutorial schließen und hier drin, wenn Sie Ihren CSS-Designer nicht sehen können, da ist er da. Wenn Ihre nicht wie meins aussieht, müssen Sie es ungefähr dort hinausziehen, und was wir tun möchten, ist unter Quellen, wir werden auf die Schaltfläche „Plus“ klicken, und wir gehen zu Erstellen einer neuen CSS-Datei. Sie können ihm einen beliebigen Namen geben, aber jeder nennt es styles.css, und wir werden auf „Okay“ klicken. Ein paar Dinge passieren. Zunächst einmal, auf meinem Desktop, in meinem Dan's Awesome Portfolio, das ich erstellt wurde, ist es nur ein separates Stylesheet, es gibt die Index-HTML-Datei, die wir erstellt haben, und es gibt diesen anderen Kerl. Da ist nichts drin. Es ist nur, wo wir alle unsere Stile setzen. Wir halten sie getrennt. Also zurück in Dreamweaver. Die andere Sache, die Sie bemerken werden, ist, dass mein HTML ein wenig aktualisiert wurde. Können Sie sehen, dass Dreamweaver die beiden verknüpft hat? So weiß diese Indexdatei, dass styles.css existiert, weil sie im Moment separate Dateien sind, und hier im Kopf sagt Dreamweaver bitte mit dem Stylesheet verknüpft, und das ist, was es tut. Auch eine praktische Sache für Dreamweaver ist diese Sache, die die Schaltfläche „Verwandte Dokumente“ genannt wird, die Sie oben hier sehen können. Es verweist darauf, weil es ein separates Blatt , das besagt, dass ich darauf klicken kann, und da ist es da. Es ist, dass styles.css auf der Unterseite aufgeführt. Es zeigt Ihnen oben meinen Index, aber unten zeigt es Ihnen das separate Blatt. Das ist, was Quellcoder, sie sollten einfach HTML nennen. Denken Sie also, wenn Sie Quellcode sehen, denken Sie an HTML, und das hier ist ein anderes Dokument. Zurück zum HTML. So erstellen und verknüpfen Sie ein Stylesheet, um einfach zu sein. Jetzt gehen wir, und Stil sind Header. Um dies zu tun, müssen wir sicherstellen, dass Sie möglicherweise auf Aktuell eingestellt sind. Strom ist genial, wenn Sie wissen, was Sie tun, und wir werden es ein wenig später im Kurs tun, aber bleiben Sie alt. Alt macht das Leben leichter. Was wir tun werden, ist, dass wir hier reinklicken. Es spielt keine Rolle, wo Sie tatsächlich klicken, aber wir werden unseren allerersten Stil erstellen. Wir arbeiten hier durch. Wir haben alle diese Kisten durchgearbeitet. Zuallererst sagen wir, ich möchte, dass der Stil in styles.css geht. Es ist wirklich ungewöhnlich, mehr als ein Stylesheet zu haben. Gelegentlich können Sie zwei haben, wenn Sie wie eine Vorlage verwenden, wie Bootstrap, aber wir werden nur ein CSS für dieses ganze Dokument haben. Medienanfragen, werden wir später auf, wenn wir auf Handy und Tablet schauen. Das werden wir im Moment überspringen. Wir werden es in etwas namens Global stecken, und wir werden dieses Ding erstellen, das Selector genannt wird. Wir werden viele Selektoren tun, und dies wählt das, was wir stylen möchten. Ich werde „Plus“ treffen. Hier ist es standardmäßig auf das, was ich ausgewählt habe. Aber ich möchte nicht das Bild, das innerhalb des Add-Tags ist, das innerhalb des Treffers ist. Ich möchte nur meinen Header stylen. Sie können es einfach eingeben. Es liegt an Ihnen, ob Sie es standardmäßig erhalten oder ob Sie nur Header eingeben müssen. Ich beginne dieses Ding hier namens Header. Was möchte ich mit diesem Header tun? Ich werde hier auf „Header“ klicken, und was ich tun möchte, ist zuerst, lasst uns einfach die Hintergrundfarbe ändern, schön einfach. Ich habe diese wirklich große lange Reihe von Dingen, die wir mit CSS stylen können. Was Dreamweaver tut, ist zusammen mit oben hier, es fügt es in kleine Gruppen. Dieser hier ist Layout, Sie können es dort sehen, und dieser Typ, gibt das. Was ich mache, ist, dass ich einfach auf diese klicke, um durch diese Liste zu springen. Sie können nach oben und unten rutschen, ganz nach oben zu Ihnen. Ich werde zu diesem hier springen namens Hintergrund, weil es Hintergrundfarbe ist, werden wir groß genug grün aufheben. Um Farben mit dieser Folie dieses Ding nach oben und unten auszuwählen, bis Sie den Farbton richtig erhalten, klicken Sie, halten Sie und ziehen Sie den kleinen Kreis herum, bis Sie eine Farbe finden, die Sie mögen. Es gibt die dunkle und helle Version oder einfach nur bewegen Sie sie hier drin, und so transparent ist sie. Wir werden uns für den Moment ein großes Grün aussuchen. Ich werde es in einer Minute ändern. Ich klicke auf „Return“ auf meine Tastatur. Jetzt haben wir einen Header, der einige CSS hat, und dass meine Freunde alles CSS ist. Es ist ein separates Blatt, dem Sie einige Stile hinzufügen, und Sie stellen nur sicher, dass Sie die richtige Benennung verwenden. Wir haben das Wort Header hier, mein HTML mit dem Stil hier und meinen Selektoren abgestimmt , und Sie haben es einfach gefärbt. Werfen wir einen Blick auf unser CSS Blatt. Gehen wir zu styles.css, da ist es. So sieht ein CSS-Blatt aus. In Bezug auf die Codierung für das Internet sind CSS-Blätter am einfachsten zu betrachten. Da ist die Wort-Kopfzeile. Es passt vollständig in das Wort und die Syntax hier in meinem HTML, und es sagt Hintergrundfarbe: Hash ist gleich, und das ist die Farbe. Wenn Sie darüber schweben, gibt es die Farbe dort, und sie endet immer in einem Semikolon. Es ist auch in diese geschweiften Klammern eingewickelt. Das sind die Syntax-Dinge. Sie können CSS perfekt eingeben. Viele Webdesigner tun es. Was wir in Dreamweaver tun, ist, dass wir das CSS-Designpanel verwenden , um das schwere Heben zu erledigen. Dieser Zeichensatz oben hier sagt nur, dass ich eine englische Tastatur verwende. Springen wir zurück zum Quellcode. Was ich tun möchte, ist, dass ich oben und links von diesem Logos ein wenig Platz setzen möchte, damit es nicht nur an der Seite geklemmt ist. Ich stelle sicher, dass ich an meiner styles.css mit der globalen Version meines Headers arbeite. Sie können hier sehen, wir haben Polsterung und Rand. Padding und Marge sind jetzt gut zu erklären. Polsterung ist die Innenseite der Box. Beobachten Sie dies, wenn ich auf Halten und ziehen Sie das nach rechts, es gibt mir Polsterung, so dass es das Logo im Moment 36 Pixel nach unten bewegt. Wenn ich das rückgängig mache, macht Marge eine ähnliche Sache. Es drückt von oben nach unten, aber es drückt von der Außenseite der Box. Wenn ich hier keine farbige Schachtel hätte, wenn sie nicht grün wäre, würden Sie den Unterschied nicht bemerken. Das Logo bewegt sich immer noch nach unten diese bestimmte Anzahl von Pixeln. Manchmal spielt es keine Rolle, ob Ränder oder Padding verwendet werden. Manchmal offensichtlich in unserem Fall, tut es, weil ich die Polsterung in der grünen Box will. Woher bekomme ich meine Messungen? Wenn Sie jetzt mit einem Designer arbeiten, hätte er Ihnen einige Spezifikationen schicken sollen. Wie detailliert sind diese Spezifikationen? Es wird wahrscheinlich nicht haben, wie weit das Logo von oben ist, aber Sie werden eine visuelle bekommen, und wir können es messen. Nun, wenn Sie der Designer sowohl visueller als auch der Codierseite sind, wird es noch einfacher sein, weil Sie Lage sein werden, einfach zu Ihrer Datei zu springen. Jetzt spielt es keine Rolle, ob Sie dies in Photoshop oder Adobe Illustrator entworfen haben . Beide haben sehr gute Web-Design-Tools. Ich habe Kurse zu beiden. Wenn Sie die Entwurfsphase machen möchten, schauen Sie sich diese an. In diesem Fall entwerfen wir etwas, das wir in einer anderen Video-Tutorialserie in Illustrator entworfen haben . Wir werden das fertige Design daraus eröffnen. Nun, es ist in deinen Übungsdateien. Öffnen Sie das Illustrator-Layout, und öffnen Sie dieses mit dem Namen Portfolio Website.ai. Ich habe es geöffnet. Hier ist es. Das ist mein Entwurf. Jetzt möchte ich anfangen, Messungen daraus zu ziehen. Ich werde heranzoomen, einen kleinen Blick auf diesen Kerl werfen. Ich will die Höhe und die Seiten hier. Nun, der offizielle Weg ist, gibt es ein Linealwerkzeug, also lege ich ein Werkzeug, Messwerkzeug, und Sie klicken einmal dort, Sie klicken einmal dort, und es gibt Ihnen die Breite. Es ist 19 von der Seite. Sie können einmal hier klicken, Sie einmal dort klicken, und Sie können sehen, es ist 10 von der Höhe. Ungefähr 20 und 10, es ist nie genau. Kleben Sie einfach auf ganze Pixel, die winzigen Maße sowieso, also kleben Sie einfach die ganzen Pixel. Das ist der offizielle Weg. Was ich dazu neige, ist das Rechteck-Werkzeug zu greifen und dies zu verwenden. Warum? Weil es schnappt, was wirklich cool ist, kann man sehen, es wie sich verbindet, und wirklich will, um das Zeitalter der Dinge zu schnappen. Wenn Sie nicht zur Ansicht wechseln, und stellen Sie sicher, dass Smart Guide aktiviert ist. da, der an den Rändern kleben wird. Die andere schöne Sache ist, das zu sehen, wenn ich hier klicken kann, und es schnippt direkt an die Ecke, und Sie können sehen, dass es meine Höhe ist, und Sie können sehen, dass es sich schneidet. Also kenne ich meine Höhe und Breite in einem Rutsch. Sie können sehen, es ist 19 von der Seite, und es ist eine Höhe von 10 Pixel. Das ist es, was ich verwenden werde, um in Dreamweaver zu übersetzen. Wenn ich eine Website erstelle und mein Design hier in Photoshop oder Illustrator habe , spielt das keine Rolle. Ich zog meine Messungen aus, ich gehe zwischen diesen beiden Programmen hin und her. Dreamweaver und Illustrator in unserem Fall. Was ich tun möchte, ist, dass ich eine Höhe von 10 haben möchte, und ich möchte diese linke Seite von 19. Sie können sehen, hat es 10 runtergeschoben, 19 rüber. Ich werde es auch auf der rechten Seite tun, weil wir irgendwann einige Navigation auf dieser Seite haben werden . Dasselbe für den Boden. Ich will 10 unten, nur damit es eine Lücke gibt, die zur Spitze passt. Meine Freunde, das ist, wie man ein CSS-Blatt erstellt. Unsere styles.css, und wir haben einige grundlegende Styling mit unserem CSS Designer Panel gemacht. Wenn Sie eine Version von Dreamweaver wie CYST oder früher verwenden, haben Sie nicht das Designer-Bedienfeld. Das saugt, weil dieser Kurs alles rund um das CSS Designer-Panel basiert , und es ist großartig. Möglicherweise müssen Sie sich die Aktualisierung ansehen. Kannst du in diesem Kurs ohne es weitermachen, wahrscheinlich nicht. Vielleicht möchten Sie sich meine Codierungsversion von Dreamweaver Kurs ansehen. Geh, sieh dir das an. Lassen Sie uns in das nächste Tutorial kommen , wo wir uns die Bearbeitung von CSS-Regeln ansehen. 9. So änderst du die CSS-Stile auf deiner Dreamweaver-Website: Hey, tolle Leute. In diesem Video werden wir diese hässliche grüne Box verwandeln und unser CSS in diese schöne graue Box bearbeiten. Also, jetzt gehen wir und passen unser CSS Blatt. Sagen wir, wir haben nichts ausgewählt. Lasst uns auf einige zufällige Sachen klicken. Eine Art von machen das nicht cool funktioniert. Es wird also viele Male in diesem Kurs geben, wir werden einen Stil machen, und dann bist du: „Ich muss diese Aktie ändern.“ Also, was wir tun werden, ist zu gehen und es anzupassen. Der einfachste Weg ist, egal, was Sie hier ausgewählt haben und klicken Sie einfach auf CSS-Stile sind global verschwunden. Klicken Sie dann auf den gewünschten Stil. Später in diesem Kurs wird länger von den Stilen im Moment zu bekommen, ist es super einfach, weil wir nur einen Selektor haben, und drücken Sie die Eingabetaste. Jetzt werden wir gehen und eine Anpassung vornehmen. Jetzt gibt es hier viele Anpassungen. Was Sie tun können, um das Leben ein wenig einfacher zu sehen, diese Option ist zeigen, ich liebe es. Kann auch ein echter Schmerz sein, wenn du ganz neu darin bist, dass es dir nur die Dinge zeigt, die du gesetzt hast und du bist : „Was waren die anderen Dinge?“ War die Schriftgrößen und so. Sie werden sich daran erinnern, dass Sie dies während dieses Kurses ein- und ausschalten können. Alles, was es tut, ist sicherlich das einzige Ihnen zeigt , sind die Dinge, die Sie tatsächlich getan haben. Wir haben die Polsterung und die Hintergrundfarbe gemacht. Also, was ich tun möchte, ist die Hintergrundfarbe in Schwarz zu ändern. In unserem Fall werden wir standardmäßig die meiste Zeit verwenden , die wir hexadezimale Zahlen verwenden, ist Hash-Nummerierung. Kannst du es bewegen? Sie können sehen, dass diese Zahlen mit der Farbe übereinstimmen. Nun, was wir tun wollen, ist ich möchte die Kapazität dieses Hintergrunds zu senken, Also müssen wir diese RGBA verwenden. Es ist das neuere Format. Es gibt keine echten richtigen oder falschen Hexen, die etwas ältere Version. RGBA ist die neuere Version. Der Grund, warum es cool ist, ist, weil es am Ende eine hat, was Alpha bedeutet, Transparenz, was dies bedeutet. diese Hexadezimalzahlen haben es nicht. Sie können sehen, dass ich eine leicht transparente Lektüre machen kann. Ich werde es zu schwarz ziehen. Sie können jetzt sehen, dass es irgendwie grau aussieht. Aber später, wenn wir ein paar Bilder dahinter bekommen, wird es leicht transparent sein. Es liegt an dir, ob du das jetzt oder später machen willst, wie dunkel? Es wird schwer zu wissen sein, bis wir unsere Bilder dahinter haben und wir sie später anpassen können. Eine andere Sache, die Sie tun können, ist sagen, dass dieses Panel hier nur macht Sie wahnsinnig, Sie können nicht einfach zu CSS-Stile springen. Sie können sehen, dass es meine Stile gibt. Sie können sehen, sagen, das Kleinkind muss sich ändern. Ich kann das einfach oben und unten auf 12 ändern. Es spielt keine Rolle, ob Sie die Codeansicht verwenden möchten oder Sie das CSS-Designer-Bedienfeld verwenden möchten. Aber in diesem Kurs werden wir uns vor allem an den CSS Designer halten. Also zurück zum Quellcode. Eine letzte Sache, bevor wir gehen, ist das Save all. Also, wenn ich eine Anpassung an mein CSS mache, Änderungen Runde eingeben, Sie werden feststellen, dass die styles.css uns kleine Astricks hier drin bekommt. Ich will gerettet werden. Aber weil ich irgendwie in meinem Quellcode bin meinen HTML zu sehen, gehen Sie „Datei“, „Speichern“. Nichts passiert auf wie, also muss ich gehen und das etwas namens File Save all tun. Das einzige Problem mit dem Speichern alles ist, dass es ein langer Weg ist und Ihre keine Abkürzung haben wird. Ich habe eine Abkürzung für meins gemacht, weil es etwas ist, das Sie tun sollten, bevor Sie etwas in Ihrer Echtzeit-Browser-Vorschau oder über in Chrome-Fall anzeigen, Sie gehen alle speichern, und es bedeutet, dass es speichert dies plus das CSS-Blatt oder vielleicht einige JavaScript, das Sie geöffnet haben. So speichern Sie alle, um die Verknüpfung auf einem Mac zu tun, gehen Sie zu Dreamweaver oder Tastenkombinationen auf dem PC. Ich glaube, es ist weniger als eine Minute und schreibe den Boden auf. Irgendwo ist einer hier drin. Dies sind Tastenkombinationen, die Sie möglicherweise finden. Das erste, was ist, dass wir es tun, um Menübefehle. Wir werden Akte finden, retten, dass alles hier reingekommen ist. Wir werden ein Plus die Abkürzung hinzufügen. Es wird sagen, dass Sie den Standard-Sit nicht ändern können. Wir werden unser eigenes erschaffen. Du kannst das so nennen, wie du willst. Dans Traumweber-Shortcuts. Hoch jede Hälfte. Verstehen Sie. Also gehen Sie zur Datei und lassen Sie uns auf Alle jetzt speichern, drücken Sie Plus und wir können alles auswählen, was wir mögen. Ich benutze Command Shift a. Von einem PC an Kontrollschiff A können Sie alles verwenden, was Sie wollen. Es spielt keine Rolle. Was denkst du, erinnerst du dich an Ots und ja, so werden wir es tun. Könnte sich großartig ändern. Klicken Sie auf „Ok“. Jetzt, wann immer ich gehe, kann ich einfach Befehl Shift a drücken und es speichert alle. Also, wenn Sie gehen und Vorschau und Ihr Browser tun Befehl Shift A erste alle bekam Datei speichern alle den langen Weg, nur so dass alles auf dem neuesten Stand ist, weil Sie manchmal etwas in Chrome Vorschau sehen und gehen, es funktioniert nicht. Ich dachte, ich hätte das geändert und es ist nur, weil Sie die Dokumente nicht gespeichert haben. In Ordnung, so bearbeiten Sie CSS und wie Sie eine kleine Verknüpfung deaktivieren für das nächste Tutorial erstellen. 10. So zentrierst du deine Website mit einem Container in Dreamweaver: Hey, in diesem Video werden wir unsere Website nehmen, die sich derzeit bis ins Unendliche erstreckt. Wir werden dies tun; wo es jetzt alles zentriert ist und nur eine maximale Breite von etwa 1200 Pixeln hat. Wenn ich die Größe ändere, und es ist immer in der Mitte. Gehen wir und tun Sie das jetzt mit Adobe Dreamweaver. Derzeit, wenn ich in einem Browser eine Vorschau dieses Ding, geht mein Header für immer weiter. Was ich möchte, dass Sie hier in der Mitte bleiben, wenn es auf eine bestimmte Breite kommt, maximale Breite von etwa 1200 Pixel. Ansonsten sieht es auf meinem Laptop hier gut aus. Aber wenn nicht, auf einem wirklich großen Bildschirm, wie ein iMac. Ich bin einer der großen 27 Zoll Jungs, Sie werden Ihr Logo auf der Seite haben und Ihre Navigation wird wie ein Kilometer nach rechts sein, aber diese Seite. Wir brauchen so etwas wie maximale Grenzen und wir wollen, dass sie zentriert ist, links oder rechts. Wir werden es in Dreamweaver mit einem Container tun. Es ist ziemlich einfach. Zurück zu Dreamweaver. Hier in Dreamweaver muss ich alles, was ich auf meiner Seite sehen kann, in einen Container einwickeln. Dazu gehört, mein Header im Moment und das ist es. Der Körper ist also alles, was ich auf der Seite sehe, also möchte ich den Header hier unten. Ich möchte, dass alle diese in einem Container sind, den ich zentrieren kann. Dann wird der Header für die Fahrt mitkommen, oben mit der gesamten Website in diesem Container. Um es hier in meiner Live-Ansicht zu tun, können Sie einfach auf Ihren „Header“ klicken. Möchten Sie diese Kopfzeile hier sehen. Wenn Sie auf das Bild klicken und Sie es nicht wirklich finden können, was Sie tun können, sehen Sie hier unten, dies wird Ihr Tag-Selektor genannt. Ich habe mein Bild dort ausgewählt, es ist da. Da ist ein, Ein Tag um ihn herum und dann gibt es einen Versteck und da ist ein Körper um ihn herum. Dies ist ein guter Weg, um auf diese Dinge zu wählen. Klicken Sie auf den „Header“ oder klicken Sie einfach hier auf der Seite. Wir gehen zu Einfügen. Unter HTML werden wir diese Sache machen, die ein div genannt wird. Divs sind super üblich im Webdesign; sie sind Abteilungen des Raums. Was wir tun werden, ist, dass wir darauf klicken und wir werden diese Optionen hier zu bekommen. Was es mich fragt, ist, ich möchte, dass dieses div vor dem, was ich ausgewählt habe, platziert wird, was ein Header ist. Möchte ich es hinterher? Möchte ich es umwickeln? Wickeln Sie es um die Außenseite oder will ich es nist? Was bedeutet, will ich einen Stau es in der Kopfzeile? Wie unsere Bilder. In unserem Fall ist es rep, okay, ich habe den Header ausgewählt. Ich möchte, dass dieser Container um die Außenseite wickelt, so dass der Header innen ist. Klicken wir auf „Rep“. Es ist wahrscheinlich am besten, hier unten in der Codeansicht zu sehen, Sie können sehen, dass dieses div um den Header gewickelt ist. Ehrfürchtig. Jetzt ist div ein echter generischer Name für Container. Wir werden viele div-Tags auf der gesamten Website verwenden. Wir müssen ihm einen Namen geben, damit wir ihm sagen können, dass sie etwas konkretes tun soll. Denn wenn ich div sage, möchte ich, dass du zentriert bist. Jedes einzelne div auf dieser ganzen Website wird zentriert sein und das wird nicht sein, was wir wollen. Was wir tun, ist für Pods, wir haben den Namen hier definiert und was er tut, und dann werden wir es hier in Live-View anwenden. Um den Namen zu definieren, tun wir hier in meinem CSS-Design ein Panel, wir klicken auf „Styles“. Wir sagten, wie immer global und wir werden es einen Namen geben, um den Selektor klicken Sie auf die Schaltfläche „Plus“. Bisher haben wir Dinge definiert, die bereits in unserem HTML existieren. Sie können hier sehen wir Header definiert. Sie können hier sehen will, um den Körper zu definieren. Dinge, die bereits existieren. Was ich gerne tun würde, ist diesem einen brandneuen Namen zu geben; einen, der jetzt nicht auf der Seite existiert, einen wirklich eindeutigen Namen, denn wenn ich mit dem Styling des div beginne, denken Sie daran, dass es für alle gilt. Die Art und Weise, wie wir diese einzigartig machen, ist, dass wir ihnen einen Namen hinzufügen und diese werden Klassen genannt. Denken Sie, ein Klassenselektor ist nur ein Name, den ich ihm gebe und die Art und Weise, wie Sie Klassen definieren, ist, dass Sie einen vollständigen Stopp oder einen Punkt am Anfang Ihres Namens setzen . Das sagt dem Internet, dass dies etwas Spezifisches ist ich erfunden habe und ich werde meinen Container nennen. Du würdest alles nennen. Man könnte es Bananen-Sandwich nennen und es würde immer noch funktionieren. Wir rufen nur unseren Container an. Wenn Sie Bananen-Sandwich verwenden möchten, können Sie Leerzeichen verwenden. Sie müssen sicherstellen, dass, wenn Sie Bananen-Sandwich tun, müssen Sie ein Space Sandwich verwenden. Dann müssten Sie erklären, wer auch immer auf Ihrer Website arbeitet und erklären, warum Sie Ihren Container ein Bananen-Sandwich genannt haben. Aber wie auch immer, also geben wir ihm einen Namen, stellen Sie sicher, dass es am Anfang einen vollen Halt hat. Geben Sie ihm einen Namen, verwenden Sie Kleinbuchstaben. Die meiste Zeit wird es mit Ober- und Senken funktionieren, aber nicht. Jetzt hier drüben siehst du, wo es heißt SIT zeigen. Wir werden das ausschalten. Das hatten wir in einem früheren Tutorial. Es zeigt Ihnen alles, was bisher auf diesen Container angewendet wurde und es gibt nichts. Wir werden Ticket verdienen, damit wir sie alle sehen können. Das erste, was wir tun werden, um unsere Website zu zentrieren, ist , dass wir eine maximale Breite geben. Wir werden sagen, anstatt so groß zu werden, wie Sie für immer wollen, werden wir sagen, dass ich eine maximale Breite möchte und wir werden verwenden, wir werden tatsächlich das, was wir hier in Illustrator getan haben. In Illustrator haben wir beschlossen, dass unsere größte Breite, für die wir entworfen haben, 1200 Pixel beträgt. Jetzt ist dies keine absolute spezifische Größe, die sein muss, Sie könnten auf 1024 aufwachen, was eine wirklich gemeinsame Größe war. Zwölf hundert ist jetzt häufiger; das ändert sich ständig. Es hängt wirklich davon ab, was Sie die größte Größe haben wollen. Folgen Sie mir. Tu 1200, funktioniert gut. Kleinste bis zur größten Größe, die Sie sein müssen, ist wahrscheinlich Zinn. Dose 24 oder 1.024. Geh nicht kleiner als das. Springen Sie zurück in Dreamweaver. Ich möchte sagen, dass Sie zu einer maximalen Breite von Pixeln kommen können und Sie nur 1200 breit sein können. Aus irgendeinem Grund gibt Dreamweaver im Moment doppelt viele meiner Briefe. Sie werden dies während dieses Kurses sehen. Ich kann es nicht aufhalten. Wie auch immer, so 1200 Pixel ist, wie breit wird. Ich werde eine Vorschau in einem Browser. Wenn ich es dehne, werde ich es hier rüber bewegen und es pro Stück ausstrecken. Es funktioniert nicht. Warum? Das liegt daran, dass wir es in Dreamweaver erstellt haben, aber wir es noch nicht angewendet haben. Gehen wir in Dreamweaver. Was ich damit meine, ist, dass wir es hier unten erstellt haben , und wir haben es installiert und wir haben gesagt, es ist maximale Breite. Aber hier drüben haben wir es nicht wirklich auf mein div angewendet, also müssen wir es hinzufügen. Was Sie tun müssen, ist das div auszuwählen. Wenn Sie es nicht auswählen können und sagen, dass Sie darauf geklickt haben, denken Sie daran, dass das hier unten ausgewählte Tag wirklich praktisch ist und das div packte. Hier können Sie eine Klasse oder eine ID hinzufügen, und wir werden in unserer Klasse eingeben. Was geht nun zu Beginn einer Klasse? Das ist richtig, eine Periode oder ein vollständiger Stopp. Sie können es dort sehen, weil Dreamweaver super hilfreich ist, es hat tatsächlich das Wort Container für mich hinzugefügt. Ich könnte es eingeben, aber es hat es für mich vorausgewählt, es waren 10. Jetzt werde ich eine Vorschau in einem Browser bekommen. Aber ich werde zuerst tun, ist, coole kleine Abkürzung zu deaktivieren, denken Sie daran. Andernfalls Datei speichern alle. Jetzt werden wir es in einem Browser überprüfen. Jetzt, dass div Container aufgerufen hat, sagt, dass nichts größer als 1200 sein soll. Der Grund, warum ich sage, nicht etwas Größeres ist, weil ich eigentlich will, dass es kleiner ist; weil wir gehen, um auf die Tablette und mobile Sachen zu bekommen. Anstatt nur Breite zu verwenden, verwenden Sie max-width, also gehen Sie nicht mehr als das, aber darunter, tun Sie, was Sie wollen. Unser nächstes Problem ist, dass es nicht zentriert ist. Es macht die richtige Breite, aber es zentriert sich nicht auf meiner Seite. Ich weiß nicht, wir haben eine Transformation im Webdesign durchgemacht; wo jeder es nach links wollte, niemand wollte, dass es richtig ist, und dann will jeder das jetzt zentriert. Gehen wir und machen das. Um es zu tun. Es ist ziemlich einfach. Stellen Sie sicher, dass styles.css global, stellen Sie sicher, dass Sie Container ausgewählt und alles, was Sie am Rand tun , ist, wo es sagt, diese kleinen Pixel, wechseln Sie, dass auf Auto, Pixel automatisch links und rechts Ränder automatisch zu machen. Drücken Sie „Alle speichern“ Ticks im Browser. Wir haben eine zentrierte Website. Solange alles in diesem Container-Div geht, wird alles so zentriert. Lass uns wieder reinspringen. Das wird es sein, um unsere Website zu zentrieren. Wir werden jetzt losgehen und eine Medienabfragen erstellen weil wir im Moment eine maximale Breite für wie Desktop-Ansicht haben. Ich möchte einige Änderungen vornehmen und einige Medienabfragen für Tablet und Handy hinzufügen. Dies ist, was wir als responsive Webdesign betrachten. Gehen wir und machen es im nächsten Video. 11. So erstellst du eine Website in Dreamweaver, die sich für Mobilgeräte und Tablets anpasst: Hey, da. In diesem Tutorial werden wir auf die Anpassung unserer Website für die verschiedenen Tablet-Größen und Handy-Größen und die genannten Medien erstellen und sehen Sie sie oben hier. Ich warte neben einem Schreibtisch, der Hit hier drin ist grau. Wenn ich auf eine Tablet-Größe, wirklich schneller. Es ist rot und ich komme wieder runter zum Handy und es ist grün. Ich weiß, dass es hässliche Farben gibt, die nur als Platzhalter, um unsere Medienanfragen zu testen. Gehen wir und machen das jetzt in Dreamweaver. Es ist also an der Zeit, über reaktionsschnell und mobilfreundlich zu kommen, und es ist wirklich einfach. Was wir also tun müssen, ist, dass wir uns etwas ansehen müssen, das als Medienabfrage bezeichnet wird. Als erstes müssen wir uns diese Medienabfrage-Leiste ansehen. Wenn Sie Ihre nicht sehen können, ist hier ein kleines Symbol. Sie können ein- und ausschalten. Wenn Sie diese Leiste oder dieses Symbol nicht haben, kann dies bedeuten, dass Sie eine frühere Version von Dreamweaver verwenden, vielleicht sehen Sie eine Gruppe, die nicht über diese Option verfügt. Leider können Sie diesem speziellen Tutorial nicht folgen. Sie können immer noch Medienabfragen durchführen, aber Sie müssen sie manuell codieren. Du kannst dieses nette, dass alles und Direktive hier nicht benutzen. Also werden wir diese Sache verwenden, und es sagt Ihnen, was zu tun ist, klicken Sie auf dieses Symbol, um sofortige Abfrage hinzuzufügen. Das Symbol ist hier drüben und dann einige dort. Also werden wir darauf klicken. Wir werden sagen, dass unsere erste Tablette sein wird, weil wir bereits Desktop getan haben. Desktop gilt in unserem Fall als global, einige Leute entwerfen ihre Websites um mobile zuerst. Sie drehten mobile-first bedeutet, dass ich es für das Handy entwerfen werde. Dann werde ich eine sofortige Abfrage machen, die das Handy mit Tablet überschreibt. Dann habe ich ganz oben auf das und auf dem Desktop meine Websites umgekehrt gestaltet. Ich finde immer, dass es meinen Schülern leichter fällt. Wir haben die Desktop-Version vor allem, weil oft gibt es mehr als diese Seite und es ist wie die meisten Leute unsere Website sehen hängt von Ihrer Art von Website, aber definitiv meine Sachen, 80 Prozent der Ansichten sind vom Desktop. Also verwende ich einen ersten Desktop-Ansatz. Wir werden noch einmal auf diese kleine Plus-Taste klicken, und wir werden zuerst auf dem Tablet arbeiten. Also werden wir sagen, ein Tablet wird zwischen diesen beiden sein. Es wird ein Minimum von einer bestimmten Größe und ein Maximum von einer anderen Größe haben und das wird als Tablette betrachtet werden. Jetzt ist es ein wenig schwer, die genauen Messungen zu bekommen, da dies viele Tabletten gibt und so viele verschiedene Größen sind . Also, was wir sagen, es ist ein Minimum von etwa 401 ist das kleinste, etwas kleiner als das wir ein Mobiltelefon betrachten und wir werden eine Medienabfrage separat dafür machen. Wie groß soll es werden? Ist 768 ist die Breite eines iPad, mit einigen Porträts. Also verwenden wir diese Größe. Es gibt keinen Grund, warum Sie 770 nicht verwenden könnten oder sagen, dass dies in der fernen Zukunft ist, wenn es viele verschiedene Größen gibt, Sie könnten entscheiden, dass, das ist zu klein oder unterschiedlich groß. Es ist nur ein Fitnessstudio verlässt Größe für jetzt, aber es wäre eine wirklich typische Größe zu verwenden. Wo soll es hin? Es wird in meine „Styles.css“ gehen. Ich werde auf „OK“ klicken. Sehen Sie hier, da ist meine kleine blaue Bar, das ist „Min-Max“. Es hat ein Minimum und ein Maximum und wir werden Dinge auslösen, wenn es dort auf diese Größe kommt. Werfen wir einen kleinen Blick auf unsere „Styles.css“. Klicken Sie hier auf zugehörige Dokumente. Sie können sehen, dass die sofortige Abfrage aussieht. Das ist die Syntax. Jetzt wieder, wenn Sie eine Version von Dreamweaver verwenden, die diesen schönen kleinen praktischen Bogen nicht hat. Sie können es einfach hier eingeben. Das gilt also als mein Tablet. Was wir tun werden, ist, dass wir weniger Zehner und knapp darüber beweisen werden. Wir werden einige Kommentare hinzufügen, nur so dass wir später wissen, worüber wir reden und was tun, um Kommentare in Dreamweaver hinzuzufügen, ist hier als Option, Css Kommentar anwenden. Css Apply Kommentare sehen so aus. Es ist ein Schrägstrich und dann ein Extrakt und es muss zwischen hier gehen. Wir können sagen, das könnte meine Tafel sein. Jetzt wird dies vom Browser ignoriert und es ist nur für Menschen hier. Also müssen Sie das nicht schreiben, da es nur bedeutet, dass später, ich sagen kann, habe eine Tablet-Ansicht und Sie wissen, wohin Sie gehen sollen. Das nächste, was wir tun werden, ist, dass wir in unsere mobile Ansicht setzen. Wir werden noch einmal auf dieses kleine Plus klicken. Wir werden ein Max verwenden, also eine „max-Breite“ von 400, es wird in styles.css gehen. Klicken wir auf „OK“ und sehen Sie hier nach oben. So überall bis maximal 400 wird meine mobile Ansicht sein. Dann neigen sie dazu, übernimmt zu sehen und das ist nur ein Pixel mehr als meine mobile Ansicht. Wenn die Dinge über 400 waren, habe ich keine Ahnung, was passieren wird, die wahrscheinlich nur im Blut und Css überall kämpfen , aber stellen Sie sicher, dass 400 und dann 401 ist, wenn der nächste beginnt. Jetzt in diesem Tutorial, werden wir nur tun; ein Handy, Tablet und Desktop. Sie werden viele andere Websites finden, die fünf Ansichten oder vier Ansichten oder sieben Ansichten haben. Wir werden nur drei und professionell das ist normalerweise alles, was ich angreife, ist klein für mobile, mittelgroße Tablets und eine große Größe und die alten Desktops. Sie können hier unten meine Css sehen, ich werde diesen Kommentar noch einmal hinzufügen, also werde ich eigentlich nur diesen kopieren und ihn hier oben einfügen. Dies wird meine mobile Ansicht sein. Was ich auch tun werde, um die Dinge ein wenig einfacher zu machen, ist, dass wir hier unten oben oben stehen. Wir werden in setzen, dies wird meine globale Ansicht und globale /Desktop-Ansicht sein. Du sagst nur, wenn du arbeitest, kannst du Dinge wissen. Jetzt passiert nichts anderes als die Farbboxen hier oben. Jetzt müssen wir einige geringfügige Anpassungen vornehmen. Also, was wir tun werden, ist, dass wir zurück zu „Source Code“ gehen, und wir gehen zu „CSS Designer“ und wir sagen, mein Style-Menü, wir haben diese Jungs, bevor wir einfach auf „GLOBAL“ klicken und diese beiden existierten nicht. Jetzt können wir sagen, ich mag ein globales Ich sage „GLOBAL“ hat meine beiden Stile, dass wir den „Header“ und den „Container“ haben. Was ich also gerne tun möchte, ist, dass ich die Hintergrundfarbe dieser Kopfzeile anpassen möchte. Ich wollte es für Tablet-Fünftel tun, was dieser Min-Max-ein ist, 4012-768 ist und Sie können sehen, dass es hier keine Selektoren gibt. Also nichts Spezifisches für Vorlage und ich werde sagen, es wird immer jetzt sein, Header. Wir haben einen für den Header. Sie werden feststellen, dass wir mehr von einem „GLOBAL“, „Header“ jetzt und eine für Tablet haben. Jetzt tut dieser hier und Tablet noch nichts. Ich werde nur zur Hintergrundfarbe gehen, eine große offensichtliche Farbe wie Rot auswählen und behalten. Ich werde das hier reinziehen. Was Sie bemerken, ist nichts passiert und dann speichern Sie alles ändert sich immer noch nicht. Deshalb verwende ich diese Live-Ansicht hier ganz oben nicht. Dies sind nur ein paar kleine Dinge, die nicht aktualisiert werden. Aber wenn ich es in meinem Browser überprüfe, hier ist es, und ich ziehe es nach unten und ich komme zu meinem 768 irgendwo hier drin. Hey, und dann meine Freunde sind alle Medienabfragen sind, Sie sagen nur zwischen diesen beiden Pixeln, tun Sie etwas anderes und wir sagen, überschreiben das Schlagen und machen es rot statt grau. Wir können das Gleiche für das mobile Springen hier tun. Ich werde sagen, styles.css in meinem Maximum von 400 erinnere dich daran, dass meine mobile Ansicht ist. Ich werde sagen, Sie Header, tippen Sie es ein und kehren Sie erneut zurück. Ich werde sagen, Hintergrundfarbe von Grün. Wir werden dies nicht als mehr ein Beispiel behalten, grau speichern auf, und ich überprüfe es in meinem Browser. So große Tablette, mobil. Tolle Sache und das ist alles Medienanfragen sind. Also gehen wir durch und machen Dinge, wie ich möchte, dass die Schriftart größer ist. Ich möchte, dass diese Box anders stapelt. So werden wir all diese verschiedenen Dinge erreichen. Sie können sehen, dass die Schriftart zentriert wird, wenn sie mobil ist oder links ausgerichtet ist, aber sie ist auf dem Tablet. Es ist kleiner, wenn es ein Handy ist, und das werden wir tun. Wir werden sagen, ich möchte, dass diese Überschrift kleiner wird, bitte, nur zu innerhalb dieser Medienabfrage. Das ist alles Responsive Web-Design ist. Wie wieder in Dreamweaver gezeigt. Sie können hier sehen, dass man aktualisiert wird. Jetzt in Ruhe, hat es noch nicht. Speichern Sie alles, was Sie können, wenn Sie dies weiterhin verwenden möchten, können Sie eine „Ansicht" und gehen Sie zu „Refresh View“, oder eine „F5". Das sollte es in Gang bringen. Cool. Also werde ich auf diesen grauen Bereich doppelklicken, um vollständig zurück zu gehen. Wir schauen uns das nächste Video an. Wir schauen uns die Vorschau über Ihr Telefon oder Tablet an. Es gibt eine wirklich coole Funktion mit Live-Vorschau, lassen Sie uns das im nächsten Tutorial tun. 12. So testest du deine Dreamweaver Website auf einem Mobiltelefon oder einem Tablet: Hallo, da. In diesem Tutorial werden wir die Vorschau unserer Website von Dreamweaver direkt auf unser Mobiltelefon betrachten und es wird hier erscheinen, sehen Sie den grünen Hintergrund und dann sehen Sie sich dies an. Es ist roter Hintergrund. Das Schöne daran ist, dass wir es nicht auf einer Website hosten müssen und wir können einfach Anpassungen auf Dreamweaver direkt vornehmen und automatisch auf einem Mobiltelefon aktualisieren. Es ist wirklich cool. Warum halte ich es nah an meinem Gesicht? Es liegt daran, dass meine Kamera nicht zoomen kann, wenn ich sie so nah an der Kamera komme. Sag mal, ich halte es hier. In Ordnung, lasst uns in das Tutorial gehen. Das erste, was wir tun müssen, wenn wir auf einem Mobiltelefon testen wollen ist, dass wir eine tatsächliche Website benötigen, die einige Unterschiede hat, wenn es auf Handy ist. Die Desktop-Ansicht, es ist grau, wenn ich auf Tablet, es wird rot und unten auf Handy ist es grün. Wir haben dies in einem vorherigen Tutorial getan. Nun, was ich tun möchte, ist unten unten hier mit Echtzeit-Browservorschau. Klickt auf diese und bevor wir Chrome verwenden, jetzt werden wir diese verwenden. Ich werde es verwirren müssen, weil aus irgendeinem Grund mein Bildschirm vom Boden fällt. Sie müssen in der Lage sein, das zu sehen. Du wirst zwei Dinge tun, die wir im wirklichen Leben tun werden. Sie können entweder einen QR-Codeleser verwenden, um diese zu scannen, oder Sie können diese URL eingeben, per E-Mail an sich selbst senden. Ich werde zum echten menschlichen Dan wechseln, und er wird Ihnen den Rest zeigen. Demonstrationszeit. Was Sie tun, ist, laden Sie einen QR-Codeleser herunter. Es gibt jede Menge kostenlose online, alle über den App Store. Ich habe einen auf einem Android hier. So ziemlich weisen Sie es einfach auf den kleinen QR-Code, den wir generiert haben und hoffentlich nah genug kommen. Macht ein wenig Piepgeräusch und es bringt Sie auf die Website. Jetzt werden Sie Ihr Passwort für Ihre Adobe ID eingeben und schließlich, hoffentlich werde ich laden. Da ist es, es ist die grüne Version. Wird sich die Kamera vielleicht darauf konzentrieren, und beobachten Sie diese horizontale. Es ist die rote Version für Tablet, grüne Version für Handy. Es ist, weil es Bildschirmbreite und nicht die tatsächlichen Geräte zu schwer zu versuchen, Geräte auszuwählen, sie ändern sich zu viel, so dass Sie am Ende nur Bildschirmbreiten tun. Ja, das Schöne daran ist jedoch, dass Sie zu dann kommen, kleben Sie das neben Ihren Computer und stecken Sie es in die Stromversorgung und nur auf Dreamweaver entwickeln und sofort aktualisiert die ganze Zeit auf Ihrem mobilen Gerät, können Sie eine Tablet dort und drücken Sie den Heck auf Menschen vorbei gehen, sehen Sie aus wie ein Profi. Springen wir zurück in die Screen-Capture-Version von mir. Bevor wir gehen, was wir tun wollen, ist, dass wir diese verrückten Farben hinzugefügt haben , um zu genehmigen, dass Medienabfragen funktionieren. Ist nicht das, was wir für die langfristige Website wollen. Wir werden gehen und die einfach entfernen. Stile, die wir für Tablet ersten Header setzen werden. Eigentlich werden wir nur den gesamten Selektor löschen. Sie könnten einfach die Hintergrundfarbe entfernen, aber eigentlich glaube ich nicht, dass ich den Header für irgendetwas anderes brauche. Berühmte letzte Worte, aber ich gehe Header minus Abschied dort, die eine, die in der Handy-Kopfzeile minus, auf Wiedersehen ist. Jetzt ist die Reaktionsfähigkeit nicht wirklich etwas, aber zumindest unsere Medienanfragen sind immer noch da für unsere zukünftige Arbeit, Tablet- und Mobile-Ansicht, weiter und nach oben. 13. So erstellst du ein mobiles Hamburger-Dropdown-Menü in Dreamweaver, Teil 1: In diesem Video werden wir unser hässlich aussehendes Desktop-Menü erstellen, das wir im nächsten Video stylen werden. Aber wenn es auf Tablet und Handy geht, verwandelt es sich in eine [unhörbare]. Gehen wir und machen das jetzt in Dreamweaver. Das erste, was wir tun werden, ist, dass wir in diesem Video wie die Kernkomponenten setzen und sie ein- und ausschalten für die verschiedenen Ansichten. Danach schauen wir uns im nächsten Video das JavaScript an, das die Klickaktion macht, wenn Sie auf das Menü Drops klicken. Im letzten Video, oder zumindest das dritte dieser kleinen Brocken hier wird das Styling es sein und nur um es hübsch aussehen zu lassen. Das erste, was wir tun müssen, ist unsere Navigation hinzufügen und es ist dieses Navigations-Tag hier. Ich möchte, dass es gleich nach diesem Bild ist und ich klicke auf dieses Bild und erinnere mich daran, dass es ein Bild gibt, aber das Bild ist in diesem ein Tag, das ist der Link, den wir um es herum setzen. Klicken Sie es hier oben, klicken Sie auf das Bild, und wir werden nach unten klicken er und sagen die ein Tag, das tatsächlich um die Außenseite dieses Bildes ist, wollen wir einfach mit Ihnen sprechen bitte und sagen Navigation. Klicken Sie auf ihn. Ich möchte es nach der Sache, die ich ausgewählt habe und da ist es. Das erste, was ich mit der Navigation machen möchte, ist in einem Stil, um es nach rechts zu drehen, weil ich hier nicht unten möchte, ich will es oben rechts hier. Gehen Sie zu CSS Designer und styles.css. Ich würde es gerne in Global. Ich möchte Selektor namens nav und ich werde den Pfeil nach oben verwenden. Denken Sie daran, Spezifität. Das bedeutet nur, dass ich das Navigations-Tag sage, das innerhalb des Kopfes [unhörbar] innerhalb des Behälters ist. Ich muss mir keine Sorgen machen, weil ich nur ein Navigations-Tag für dieses ganze Dokument habe und daher muss ich nicht spezifisch sein. Ich werde in diesem Kurs nicht mehr Spezifität sagen, weil es wirklich schwer zu sagen ist. Ich möchte, dass das Nav-Tag bitte nach rechts schwebt, wie dieser hier schwebt. Ich werde sagen, flog nach rechts und er springt einfach auf die rechte Seite der Seite. Awesome! Nun, das nächste, was ich tun möchte, ist, dass ich zwei div-Tags innerhalb dieser Navigation setzen möchte. Ein div-Tag wird für mein mobiles Menü sein, das mein größeres Menü sein wird, das gestreifte Zeilen-Sache. Die Desktop-Ansicht wird diese farbigen Schaltflächen sein, die es über uns sagen und kontaktieren Sie uns. Im Grunde, was passiert, ist, dass Sie Div-Tags trennen müssen, eines mit dem mobilen Menü und eines mit dem Desktop-Menü und Sie sagen, schalten Sie einfach eine mobile Ansicht und dann die andere ein, und wechseln Sie um Ihren Desktop. Lassen Sie uns gehen und setzen Sie diese div Tags über nav ausgewählt. Ich gehe zu Einfügen und ich klicke auf div auf dies zu innen bitte. Wir haben ein neues div-Tag. Du kannst es sehen. Da ist mein Navi und da ist der Typ, der drinnen ist. Brauchen wir diese Tics mehr? Tun wir nicht. Ich möchte den Text hier in der Codeansicht löschen. Das Löschen in der Live-Ansicht funktioniert die meiste Zeit, aber ich finde, dass es in der Codeansicht ein wenig einfacher ist. Sie können sehen, dass mein nav-Tag geöffnet und geschlossen wird und es ist das div-Tag darin. Ich brauche zwei davon. Was ich tun kann, ist hier drüben ich auf dem div-Tag rutschen kann. Ich kann noch einen sagen, bitte. Gleich hinter ihm her. Ich habe zwei. Lassen Sie uns die verschiedenen Komponenten einfügen und diese erste hier möchte ich ein Bild einfügen, das innen nisten wird. Ich möchte, dass es mein Burger-Menü ist, das unter Übungsdateien, Bilder ist, und wir werden das SVG-Version-Burger-Menü verwenden. Sie können PNG verwenden. SVG ist die neuere skalierbare Vektorgrafikversion. Klicken wir auf „Öffnen“. Es wird sagen, dass du draußen etwas ausgewählt hast, würdest du es gerne für dich reinlegen? Du sagst ja, bitte setze es mit meinen Bildern ein. Da bitte, weil ich das schon geübt habe, um es super glatt für dieses Video zu machen. Ich habe bereits meine, [unhörbar], Sie müssen nicht auf Ersetzen klicken. Sie werden bemerken, dass es sehr groß ist. Mit diesem ausgewählt, kann ich sagen, an der [unhörbaren] Sie Hände tatsächlich wollte zwanzig Pixel sein. Du entscheidest, wie groß du deine sein willst. Ehrfürchtig. Das nächste, was ich tun möchte, ist, diesen Text loszuwerden und wie ich es sage, lösche ich gerne den Text hier in der Codeansicht. Ich brauche das nicht mehr. Ich habe ein div-Tag und es hat mein Bild drin. Lassen Sie uns in die Desktop-Version setzen. In diesem Kerl, kann ich auf sie klicken, gibt es das div-Tag. Ich werde etwas eintragen, das eine ungeordnete Liste genannt wird. Dies ist, wie wir Listen beschreiben, und Navigation ist nur eine Liste von Optionen, auf die Sie in einer Seite gehen können, um auf diesem div auszuwählen, und ich werde HTML sagen, ich werde diese eine ungeordnete Liste finden. eine geordnete Liste ist eine nummerierte Liste und eine ungeordnete Liste ist eine Liste mit Aufzählungszeichen. Sie können Aufzählungspunkte sehen. Wir werden diese etwas später aus dem Styling entfernen. Was ich tun möchte, ist, dass ich diesen Text ändern möchte. Ich möchte sagen, dass das über uns sein wird. Ich werde Großbuchstaben benutzen. Sie müssen nicht zurückkehren, und kontaktieren Sie uns. Vielleicht bin ich, kontaktiere mich wegen mir, weil es sowieso nur mein Portfolio ist. Klicken Sie raus und Sie können sehen, ich habe zwei Aufzählungspunkte. Werfen wir einen Blick darauf, wie diese konstruiert sind. Es gibt ein div-Tag. Darin befindet sich meine Ehrenliste. Sie können den Anfang und das Ende und innerhalb dieser ungeordneten Liste oder die Listenelemente sehen, sind die verschiedenen Aufzählungspunkte. Das ist genau so konstruiert, und es wird wichtig sein wenn wir später gehen und anfangen, sie zu stylen. Was ich gerne tun würde, während wir getroffen haben, ist, ihnen Hyperlink zu geben. Ich werde über uns doppelklicken, über mich, und klicken Sie auf diese, die er hat, er geht orange, klicken Sie auf den Hyperlink. Wo wird es hingehen? Es wird zum Hash gehen. Hash ist nur, ich weiß es noch nicht. Das ist, was dieses Symbol bedeutet, oder das Pfundzeichen, Sie könnten about-us.html und Kleinbuchstaben setzen, aber ich weiß nicht wirklich, wie es heißt. Wenn Sie es nicht wissen, fügen Sie einfach Hash ein und das erlaubt es, ein Link zu sein, aber es verursacht keinen Fehler. Sie können das später ändern und sagen, dass wir uns mit mir in Verbindung setzen, beide werden im Moment hash, weiß es nicht. Als nächstes möchte ich sie ein- und ausschalten in den verschiedenen Ansichten, weil der Moment , in dem Sie sie den ganzen Weg durch mobile Tablet-Desktop sehen können. Was ich tun werde, ist zuerst das mobile zu tun und zu versuchen, darauf zu doppelklicken. Da gehen wir. Ich möchte, dass Sie ausschalten, wenn Sie eine Desktop-Ansicht sind. Was ich tun möchte, ist zu meinem CSS-Design ein Panel und meine styles.css und meine Desktop-Ansicht, die global ist. Ich möchte sagen, und ich erstelle einen neuen Selektor und dieser wird dot mobil sein. Dies wird eine Klasse mobile Ansicht sein. Was ich gerne tun würde, ist, wenn es eine mobile Ansicht ist. Dies ist die Sache, die diese steuern wird, mobile Ansicht und ich möchte, dass Sie keine anzeigen. Keiner bedeutet nur ja, ich kann dich nicht sehen. Nichts passiert wegen dem, was ich tun muss, ist das div-Tag zu finden , das sich um die Außenseite dieses Bildes wickelt und es anwendet. Was soll ich tun? Ich kann es hier unten machen, Bild ausgewählt. Jetzt habe ich mein div-Tag ausgewählt und es gibt div bedeutet, dass Dot Mobile das geht, er ist weg. Cool. Dieses div-Tag heißt jetzt mobile Ansicht div Tag. Was wir sagen, ist, wenn es eine globale ist, die Desktop ist, möchte ich, dass Sie keines anzeigen. Das Problem ist, dass es die ganze Zeit keine anzeigt. Deshalb nennen sie es global und nicht nur speziell Desktop. Denn was es bedeutet, ist, dass es alles bedeutet. Es bedeutet global, bedeutet alles. Es sei denn, Tab von UC ist etwas anderes zu tun. Aber in dem Moment, in dem ich zu meinem CSS gehe und ich meine Tabellenansicht betrachte, sagt meine Tabellenansicht nichts aus. Die mobile Ansicht wird nicht überschrieben. Es ist ein Cascading Stylesheet, also fließt es nach unten und fließt über all diese, es sei denn, sie sagen etwas anderes und sie nicht, sie sagen mobile Ansicht. Wir haben nichts gesagt. Das werden wir tun. Wir werden auf Stile sagen, CSS, wenn ich zur Tabellenansicht komme, wählen Sie eine benannte Punkt mobile Ansicht. Wieder, es wird, anstatt jetzt keines zu sagen, werden wir sagen, dass Sie Block anwenden, als gewogen. Es hört sich nach keiner an. Ich denke, Holzblock, Betonblock, etwas Festes. Ich kann es jetzt sehen. Funktioniert sowieso für mich. Lassen Sie uns gehen und überprüfen Sie es in einem Browser. Live-Ansichten ist nicht großartig. Denken Sie daran, speichern Sie alle überprüfen Sie einen Browser. Mein mobiles Menü und Desktop-Ansicht sind zu sehen. Es ist keine. Jetzt, wenn es zur [unhörbaren] Tabellenansicht kommt, seinen Block. Blogger Holz, und wenn es nach unten auf mobile Ansicht, es verschwindet wieder. Was wir sagen müssen, sind Stile, CSS, wenn es in der mobilen Ansicht ist, was mein Maximum von 400 Pixeln ist. Wie ich einen anderen Selektor namens dot meine mobile Ansicht mache. Ich würde gerne sagen, dass du auch den Block anzeigst. Ich kann Sie bei beiden sehen. Sagen Sie, nun, testen Sie dort. Ja. Er ist nicht aufgereiht. Das ist okay. Wir werden später die Mechanik hier im Moment stylen, damit wir ihn sehen können, genial. Was ich jetzt tun möchte, ist eine neue Klasse namens Desktop-Ansicht zu erstellen und ich möchte sie hier auf diese Schaltflächen anwenden, und ich möchte sie je nach Ansicht ein- und ausschalten. Lassen Sie uns eine neue Stile erstellen, und ich möchte es nicht in Global schaffen. Ich könnte, und ich könnte sagen, ich möchte, dass Sie blockiert werden, aber es ist bereits blockiert. Sie können es immer sehen, dass Damm auf Desktop-Ansicht. muss ich nicht noch einmal sagen. Was ich sagen muss, ist Tablet ausgeschaltet. Ich gehe zu meiner Tabellenansicht und klicke auf meine Auswahl, und ich nenne diese Desktopansicht. Ich habe es überhaupt nicht Desktop-Ansicht genannt und ein paar Mal, es ist Feuchtigkeitstransport. Desktop-Ansicht und ich werde sagen, Anzeige, keine geht. Jetzt muss ich es darauf anwenden. Ich wähle drauf aus. Lassen Sie uns auf das div-Tag klicken, das um die Außenseite gewickelt ist, und es klicken Sie hier, klicken Sie auf Vollstopp, um Desktop hat es nicht angewendet und es wird nicht angezeigt. Dies passiert ein bisschen, wenn Sie deaktivieren müssen, und dann gehen Sie zurück und machen Sie dies rückgängig und hoffentlich ist es da. Speichern Sie einen [unhörbaren] Desktop, ohne es zu tun. Ich werde das im Video lassen, nur weil jeder, ich werde es nur physisch eingeben, drücken Sie die Rückkehr. Es wird sagen, möchten Sie etwas Neues erschaffen? Drücken Sie einfach die Return auf Ihrer Tastatur, bis sie verschwindet, und es wird angewendet. Wenn ich auf diesen Kerl klicke, können Sie sehen, dass es mein div-Tag gibt und es hat diese Klasse angewendet. Das passiert mir ein bisschen in Dreamweaver. Nur ist es. Sagen wir, nun, lassen Sie uns eine Vorschau und einen Browser. Sie können die Desktop-Ansicht sehen. Ich kann ihn sehen, aber wenn es auf Tablette kommt, auf Wiedersehen, er ist keiner. Aber es ist wieder drin, er ist unbeweglich. Lassen Sie uns das gleiche tun, styles.css und mobile Ansicht. Ich möchte einen Selektor namens dot desktop erstellen. Ehrfürchtig. Ich möchte sagen, ich möchte, dass Sie keines zeigen. Bitte gehen Sie weg, speichern Sie alt, verhindern Sie einen Browser. Vergangen. Sie sind nett. Das ist alles, was wir tun. Welche zwei div-Tags, man nennt sich mobile Desktop, und wir werden sie nur mit Anzeige bei den verschiedenen Medienabfragen einschalten. Das Problem ist jetzt, dass dies noch nicht funktioniert. Wir werden jetzt durchgehen und in JavaScript verwenden, um dies zu einem kleinen Dropdown-Button zu machen und das funktioniert. Sie sind bereit für Ihr erstes bisschen JavaScript. Gehen wir und machen das im nächsten Video. 14. So verwendest du Javascript jQuery für ein mobiles Hamburger-Dropdown-Menü in Dreamweaver: Hallo da. In diesem Video schauen wir uns das Hinzufügen von JavaScript an, um dieses hässlich aussehende Desktop-Menü zu nehmen. Wenn es auf Handy wechselt und dann, wenn Sie auf das Handy klicken, zeigt es Ihnen die hässliche Desktop-Version. Diese kleine Umschalttaste an- und ausschalten. Mir ist klar, dass das Styling nicht großartig ist und es gibt ein paar kleine Probleme mit dem Layout, wir werden das im Video nach diesem machen. Was Sie wirklich tun müssen, ist auf das magische Klicken zu achten das zeigt, was wir in JavaScript tun werden. Gehen wir und machen das jetzt. Das erste, was, bevor wir anfangen, es zu machen, ist das, was ist JavaScript? Es gibt drei Komponenten auf einer Website, es gibt HTML, CSS und JavaScript. HTML ist ein einfacher, denken Sie es als das Substantiv. Es sind die Dinge, die auf der Seite erscheinen, es sind die Objekte, es ist diese Schaltfläche hier, es ist dieses Bild, es ist dieser Text. Das sind alle in meinem HTML, und das sind Dinge. Dann haben Sie Ihr CSS, und dieses CSS beschreibt nur das Styling der Dinge. Das ist meine Hintergrundfarbe, das ist, wie viel Polsterung es hat, es ist das hübsche Zeug, es ist das Adjektiv. Ich betrachte sie, HTML als Substantive, CSS als Adjektive, die beschreibenden Wörter, und dann hast du das Verb, das JavaScript ist. Was passiert, wenn der Benutzer darauf klickt? Es ist das Tun von Dingen. Es kann sein, dass der Benutzer auf eine Schaltfläche klickt, wie in unserem Fall hier, dieses Menü fällt herunter, oder vielleicht, wenn ein Benutzer auf die Schaltfläche „Play“ auf dem Video klickt, oder einen Schieberegler zieht oder Dinge auf einer Seite neu ausrichtet, also ist es im Allgemeinen der Benutzer, der irgendwie mit Ihrer Website interagiert, passiert JavaScript. Wenn ich sage, dass wir JavaScript lernen, werden wir tatsächlich etwas namens jQuery verwenden. JavaScript ist viel komplizierter. Was einige clevere Leute taten, ist, dass sie dieses Ding namens jQuery erstellt haben, und was es tut, ist es eine Bibliothek, die auf JavaScript baut , um es für Leute wie uns einfach zu machen. Anstatt viel und viel Syntax ausschreiben zu müssen, können wir viele einfache Sprache verwenden, die die Dinge für Menschen besser macht, und es tut so ziemlich alles, was wir in Bezug auf Front-End-Webdesign tun müssen. Wir lernen kein wesentliches JavaScript, wir lernen etwas namens jQuery, das einfach einfacher Sprache ist, die auf JavaScript verwendet wird. Gehen wir und machen das jetzt. Dieses kleine Snippet hier wird helfen, zu erklären, was wir tun. Ich war mir nicht sicher, ob ich es in der Tutorialserie lassen sollte oder nicht. Ich werde es verlassen und wahrscheinlich nur um hoffentlich zu erklären, anstatt mir nur blind zu folgen. Wir werden herausfinden, was wir hier tun. Grundsätzlich, was wir tun ist, dass ich dies in Chrome Vorschau, und ich habe gerade ein paar nerdy Sachen hier drüben, um Ihnen zu helfen. Grundsätzlich möchte ich diese kleine Navigation hier machen, wenn der Benutzer auf ihr Handy klickt, möchte ich JavaScript verwenden. Wenn der Benutzer etwas tut, möchte ich, dass JavaScript eine Klasse zu diesem kleinen Streifenmenü namens Expand hinzufügt, und das wird das Menü erweitern. Denn im Moment gibt es dort Desktop-Menü, bekam eine Klasse, die ich wahrscheinlich Desktop-Menü nennen werde, keine anderen Klassen. Was ich sagen möchte, ist, wenn es angeklickt wird, um JavaScript magisch zu verwenden , um hier eine Klasse zu injizieren, um sie zu erweitern. Sieh dir das an. Behalte das Ding im Auge. Wenn ich darauf klicke, Ich bin ein Benutzer, mit meinem Handy, Ich klicke darauf, und magisch, diese zusätzliche Klasse, gibt es weg, die hinzugefügt wird. Dann diese kleine Klasse dort werden wir in unserem CSS definieren, um zu sagen, machen es schön und groß und zeigen uns das Menü dort. Das ist, was wir brauchen das JavaScript tun. Lassen Sie uns lernen, wie man das mit JavaScript und jQuery macht. Das erste, was wir tun werden, ist, dass wir diese Expand-Klasse erstellen. Wir werden es in unsere styles.css setzen. Wir werden es in Global setzen, und wir werden sagen, und ich wähle das aus, wir werden es schaffen. Es wird alles Punkt aussehen. Denk dran, es ist eine Klasse, die wir erfinden. Es wird Expand heißen. Was wir möchten, dass diese Sache tun, ist Anzeige, und wir werden sagen, Anzeigeblock. Ihr kleiner Job als Klasse ist, wenn Sie auf irgendetwas angewendet werden, ist es, Dinge zu zeigen. Aber was wir tun werden, ist, dass mit JavaScript anzuwenden, nicht hartcodiert, wie wir für alles andere haben. Das nächste, was wir tun müssen, ist unsere JavaScript-Datei zu erstellen und sie mit unserer Index-Seite zu verbinden. Jetzt, als wir es mit gemacht haben, denken Sie daran, unsere styles.css passiert es automatisch, weil wir dieses coole kleine CSS-Designer-Panel haben. Um es mit JavaScript zu tun, machen wir es ein wenig auf dem langen Weg. Gehen wir zu Datei, Neu, und lassen Sie uns zu Neues Dokument gehen, klicken Sie auf „JavaScript“, und klicken Sie auf „Erstellen“. Es heißt „Ohne Titel“. Lass es uns retten. Wo werden wir es retten? Wir legen es in unseren Desktop, in meine Dateien, die Dan's Awesome Portfolio genannt werden. Ich könnte es mit den restlichen Dateien speichern, aber es ist wirklich üblich, einen Ordner namens js zu erstellen. Innerhalb dieses Ordners werde ich diese Datei namens einfügen, es ist wirklich üblich, es Scripts zu nennen. Sie können alles aufrufen, was Sie möchten, aber die meisten nennen es script.js. Lassen Sie uns auf „Speichern“ klicken. Jetzt gehen wir und schließen es. Wir haben es gerade geschafft. Wir haben es geschlossen, weil wir es jetzt mit dieser index.html Datei verknüpfen müssen. Sie können hier meinen Index und Quellcode einrichten. Sie können hier sehen, erinnern Sie sich an die styles.css, dies wurde automatisch für uns getan. Wir müssen dies manuell tun, also müssen wir eine Rückkehr einfügen, und wir müssen zu Einfügen gehen und wir müssen zu Skripten gehen. Nennen Sie es erneut Scripts. Es weiß, dass es in die js-Datei geht. Suchen Sie Scripts, klicken Sie auf „Öffnen“ und los geht's. Diese sind miteinander verbunden. Drücken Sie „Speichern“, und Sie können sehen, dass es meine styles.css und jetzt meine neue kleine Skript-Datei. Dieses Burger-Menü hier oben ist, weil es ein SVG ist. Wenn Sie zuvor die PNG-Version unseres kleinen Menüs verwenden, wird dies dort nicht angezeigt. Ignoriere sie einfach für den Rest des Kurses. Gehen Sie zu script.js, und jetzt erhalten wir, um das JavaScript hinzuzufügen, oder in unserem Fall, jQuery, die das Ein- und Ausschalten steuert. Ich habe total gelogen. Wir sind noch nicht bereit, JavaScript zu schreiben. Was passiert, ist Ihr Computer, oder zumindest der Browser, auf dem die Leute Ihre Website beobachten, wird JavaScript gut verstehen, aber es wird zu der jQuery kommen, die im Grunde Abkürzung für JavaScript ist und gehen, „ Von dem Hang redest du? Dies ist kein JavaScript.“ Was wir in unserem Quellcode tun müssen, ist, dass wir hier oben sagen müssen , wo wir suchen müssen, nach den Definitionen von jQuery, und Sie tun es mit etwas namens CDN oder einem Content-Delivery Network. Es sind ein paar von ihnen online. Wir gehen zu Google, und ich werde jQuery CDN eingeben. Es gibt eine Reihe von Orten, zu denen Sie verlinken können. Sie können zu JQuery.com gehen. Ich benutze die Google-Eins. Wo ist sie? Hier unten. Wo ist Google? developers.google.com. Hier sagt es, dass dies dieser kleine Link für jQuery ist. Ich werde alles schnappen. Eigentlich fängt da oben an, schnappen Sie sich das ganze Stück. Was ich für Sie getan habe, ist, dass ich es in Ihre Übungsdateien gelegt habe und dieser Code ist etwas namens jQuery CDN. Du musst nicht hierher kommen. Sie können einfach meine kopieren und einfügen. Ich werde es kopieren und alles, was wir tun, ist es hier reinzuwerfen. Hallo an alle. Mein Name ist Taylor und ich arbeite für Daniel. Ich möchte nur hier reinspringen und euch wissen lassen, dass Daniel einen kleinen Fehler gemacht hat, als er die jQuery-Bibliothek in diese Datei importiert hat. Es wird tatsächlich umgekehrt sein, von dem, was Daniel es hat. Derzeit ruft er zuerst die Skriptdatei und dann die jQuery auf. Die Skriptdatei stützt sich tatsächlich auf die jQuery, damit sie korrekt ausgeführt wird. Wenn Sie dies nicht auf dem richtigen Weg haben, funktioniert Ihre Navigation möglicherweise nicht. Es ist wichtig, dass Sie es einfach umschalten. Sie greifen die jQuery und legen sie über die Skripte. Dies sollte die meisten Probleme beseitigen, die Sie mit Ihrer Navigationsleiste haben könnten, damit es vielleicht nicht funktioniert. Auch die fertigen Dateien dieses Tutorials enthalten die richtige Dateireihenfolge für diesen Code. Das sagt uns nur, wo die Bibliothek ist. Warum haben wir es einfach nicht lokal, wie wir script.js und unser CSS auf meinem Computer haben? Der Grund ist, weil dies eine wirklich große Bibliothek ist, und der Vorteil der Verwendung, sagen wir, die von Google gehostet wird, bedeutet dies, dass, sagen wir, ein Benutzer im Netz surft und sie gehen zu 10 Websites, die alle verwenden jQuery, weil viele Websites es verwenden. Wenn sie auf Ihre Website kommen und der Browser sagt : „Wir müssen jQuery laden,“ und sagt: „Mach dir keine Sorgen. Ich werde es nicht laden, weil ich es bereits von dieser anderen Website geladen habe, die ich endlich war.“ Deshalb verwenden wir ein CDN und einen Link zu einer Website, anstatt es tatsächlich auf Ihrem Computer zu haben. Es bedeutet nur, dass Google wird es die ganze Zeit online haben. Viele Leute benutzen es und dass Sie es nicht wie ein millionstes Mal herunterladen müssen , wenn sie auf Ihre Website kommen, weil es genau das gleiche alte ist , das wieder dort verlinkt wurde, so dass der Browser des Benutzers nicht die Mühe macht, zu gehen und lernen all diese neue Sprache wieder. Es ist schon da. Er weiß es schon. Lange Geschichte kurz, einfach kopieren und einfügen, kleben Sie es in die Spitze, und es wird helfen. Gehen wir zu script.js. Hier werden wir ein wenig von jQuery lernen. Nur damit Sie wissen, wenn Sie Websites entwerfen, werden Sie neunmal von 10 jQuery anstelle von reinem JavaScript verwenden. Das erste, was wir tun müssen, ist, ihm zu sagen, dass wir jQuery verwenden. Sie können den kleinen Codierungshinweis sehen, der dort hilft. Was wir sagen werden ist, dass wir in viele Klammern und viele geschweifte Klammern setzen werden. Machen wir uns bereit für sie. erste bisschen ist, dass wir es in unsere Klammern setzen. In dieser Klammer werden wir das Wort Dokument schreiben. Vielen Dank Code hilft. Nach den Klammern werden wir bereit eintippen. All dies bedeutet nur, dass jQuery und nicht geladen werden, bis das Dokument fertig ist. Denn was passieren kann, ist, dass jQuery anfangen kann, seine Sache zu tun , bevor das Dokument sogar geladen wird oder die ganze Seite geladen wird, und es verursacht nur viele Fehler. Was wir gesagt haben, ist zu warten, bis das Dokument geladen wird, und dann machen Sie Ihre Sache, und Sie werden feststellen, dass Sie keine Fehler bekommen. Das nächste, was wir tun müssen, ist, ihm zu sagen, dass er etwas tun soll. In Klammern sagen wir: „Tu bitte etwas.“ Aber wir nennen es nicht. Tun Sie bitte etwas. Wir nennen es eine Funktion. Denken Sie nur, ich möchte, dass Sie etwas tun, aber Codesprache wird es eine Funktion genannt. Jetzt setzen wir eine Reihe von Klammern, Reihe von geschweiften Klammern, und am Ende setzen wir ein Semikolon. Diese Dinge hier, ich mache nie wirklich etwas mit diesen ersten Klammern. Dies sind Attribute, die normalerweise nur leer gelassen werden. Diese geschweiften Klammern sind die wirklich wichtigen Teile. Wir werden all die Dinge, die wir tun wollen, in das Innere stecken. Dieses letzte kleine Semikolon bedeutet hier fertig. Ich bin fertig. Ich habe meine jQuery geschrieben. Gehen Sie nicht weiter. All das gute Zeug geht in diese geschweiften Klammern. Ich könnte sie hier schreiben, aber es wird ein wenig chaotisch aussehen. Ich werde rückgängig machen, und was wir tun werden, ist eine Rückkehr dazwischen, und wir geben sie einfach hier ein. Jetzt möchte ich noch einmal sagen, ich würde gerne sagen, dass ich jQuery verwende. Aber anstatt zu sagen, dass jQuery ein langes Wort ist und was die Kurzschrift $ ist. Also $ denke nur, ist die Abkürzung für das Wort jQuery. Wir werden dieses hier oben ersetzen, weil Sie seltsam wären, wenn Sie das Wort jQuery verwenden, wenn man $ verwendet. Wir sagen: „jQuery, ich würde gerne etwas tun.“ In diesem Fall werden wir wieder Klammern verwenden. Innerhalb dieser Klammern möchte ich Apostrophe hinzufügen. Keine Zitate, Apostrophe. Denn was ich gerne tun würde, ist, dass Sie etwas mit der Klasse tun, erinnern Sie sich Zeit für die Klasse, etwas mit der mobilen Ansicht. Was möchten wir mit ihnen machen? Ich möchte auf einen Klick achten. Wenn Sie angeklickt werden, möchte ich, dass Sie Klammern setzen, etwas tun. Denken Sie daran, wir verwenden nicht das Wort tun etwas, wir verwenden die Wortfunktion. Gleiches, aber eine verrückte Syntax Klammern mit nichts drin, Semikolons, wo das gute Zeug geht und am Ende setzen wir ein Semikolon, um zu sagen, gehen Sie nicht weiter und posten Sie bitte. In mit dem guten Zeug geht eine Rückkehr. Wie oben, $ für jQuery. Dasselbe mit der Klasse. Wir werden einen Apostroph, einen Punkt, Desktop-Ansicht setzen . Was möchten wir mit dieser Desktop-Ansicht tun? Ich möchte dieses Ding hinzufügen. Anstelle eines Klicks wird dieser eine Toggle-Klasse haben. Diese Toggle-Klasse wird dieses Ding namens Apostroph erweitern umschalten. Denken Sie daran, die Klasse, die wir früher gemacht haben Seltsamerweise schreiben wir nicht in den vollen Stopp für diesen bestimmten. Lassen Sie es einfach weg. Sonst funktioniert es nicht. Gehen Sie hier zum Ende und sagen Sie nicht mehr lesen. Das wird hoffentlich unsere Speisekarte funktionieren lassen. Lass es uns zurückdatieren. Wir werden sagen, es gibt eine Expansionsklasse, die ich habe. Ich möchte es ein- und ausschalten, Desktop-Ansicht, wenn auf die mobile Ansicht geklickt wird. Wenn das ein Geist-Bender war und überall Kommas und Apostrophe fliegen, habe ich einen Code erstellt. Sie können Ihre Übungsdateien kopieren und einfügen. Sie können gehen herunterladen, die sie sind kostenlos. Das schreibt etwas jQuery. Lass uns sehen, ob es funktioniert, ist die Hauptsache. Denken Sie daran, speichern Sie alle, springen Sie in unseren Browser schrumpfen Sie es nach unten, klicken Sie auf die Schaltfläche, und es funktioniert nicht. Ich muss das anhalten und herausfinden, warum es nicht funktioniert. Ich komme gleich zurück. Ich bin zurück und habe es herausgefunden. Passiert den Besten von uns. Ich möchte das Video wirklich neu aufnehmen und mich super genial aussehen lassen, aber ich möchte dich auch wissen lassen, dass es immer passiert. Es passiert jedem. Was ich getan habe, war unter der styles.css, es funktioniert tatsächlich, ich habe es getestet, und die Expande-Klasse wird hinzugefügt. Es ist nichts falsch mit der jQuery, es ist die styles.css. Was passiert, ich habe das in, ich wollte im Desktop erweitern, aber ich brauchte dieses Ding nicht wirklich, weil es in Global ist. Ich brauche das in Tablet und in der mobilen Ansicht. Ich hole das, du bist an der falschen Stelle, schneidest sie ab. Ich will, dass du dabei bist. Hier können Sie meine Medienabfrage sehen. Das ist für mein maxmin für Tablet. Also kurz vor dem Ende der schließenden Klammer sehen, da ist die Öffnung, und da ist die Schließung dort. Ich werde sie reinlegen. Ich brauche eine Kopie dort und unten zur mobilen Ansicht. Ich brauchte da drin eine Kopie. Jetzt lassen Sie uns gehen und testen. Klicken Sie jetzt darauf. Es funktioniert immer noch nicht, drücken Sie Refresh. Jetzt funktioniert es. Klicken Sie auf unsere jQuery funktioniert. Es sieht immer noch hässlich aus, ich weiß, und es gibt noch ein Layout, aber wir werden das in ein anderes Video verwandeln, weil dieses, dang, das längste Video sein könnte, das ich in meiner Video-Karrieregeschichte gemacht habe. Ja. Das ist unsere jQuery, Clicky, Mobile und Desktop Drop-Down-Menü-Sache. Jetzt lassen Sie uns dieses Menü schön aussehen. 15. So gestaltest du unser Hamburger-Menü und erstellst unser UL-Menü nebeneinander: Hallo, liebenswerte Traumweber-Leute. In diesem Tutorial werden wir diese hässlichen Aufzählungspunkt-Navigationstasten in diese gut aussehenden roten und grünen verwandeln . Ignorieren Sie die Schriftart, die Schriftart ist immer noch hässlich. Aber das machen wir im folgenden Video. Aber lasst uns jetzt die Knöpfe machen. Das erste, was wir tun werden, ist, diese hässlichen Kugelpunkte loszuwerden. Wir tun das, indem wir dieses Ding hier stylen. Welches Ding stylen wir? Wir werden das Li stylen, das in der ul ist, die in meiner Desktop-Ansicht ist. Gehen wir und machen das. Jetzt CSS Designer-Panel, mach es meine style.css, ich möchte, dass dies global erscheint. Lassen Sie uns auf Selektoren klicken. Weil ich dieses Ding ausgewählt habe, ist es irgendwie vorgefüllt, aber es passt hinein und es ist irgendwie das, was ich will. Aber wenn ich rauf und runter gehe, es spezifischer macht, sagte ich, es würde nicht mehr Spezifität sagen, aber je da du gehst, also nach unten bedeutet, dass du spezifischer nach oben wirst, wird weniger spezifisch. Was ich gerne tun würde, denn wenn ich es dort gelassen habe und sagte, ich möchte nur die Li's innerhalb von ul stylen , die auf der ganzen Website gelten würden , wenn es eine ungeordnete Liste gibt. Ich könnte Aufzählungspunkte in den normalen Kopien haben. Was ich sagen möchte, ist im Abwärtspfeil auf meiner Tastatur und zu sagen, ich möchte die Li, die innerhalb von ul erscheinen, die in dieser Klasse namens Desktop-Ansicht erscheinen. Brauche ich dieses A-Tag hier? Tue ich nicht. Warum? Weil ich nur mit den Li's herumspiele, keine Sorge um das A-Tag. Es ist das Li, das ihm den Punkt gibt. Klicken Sie auf Zurück. Es ist mein erster Stil und ich möchte sagen und Text. Ich würde gerne runtergehen und versuchen, Textdekoration zu finden. Ich möchte Liste -style -type finden: undefined. Ich möchte es auf keine setzen. Du siehst, wie die Punkte verschwunden sind. Großartig. Wir werden nur langsam durch den Verkauf verschiedener, sogenannter Compound-Selektoren arbeiten. Denken Sie daran, dass Selektoren, die wir mit Klassen behandelt haben, bevor die Punkte vor ihnen haben. Diese werden zusammengesetzt genannt, weil sie Bits sind. Es gibt ein bisschen Klasse dort, und es gibt einige dieser regulären Tags hier. Die Verbindung ist also alles, was zusammengesetzt ist. Du musst dich sowieso nicht an das Wort erinnern. Im Moment sind diese übereinander gestapelt. Dies ist ihr Standardstatus für li, und dieser Stack übereinander wird Block genannt. Die Standardeinstellung sind diese in einer Anzeige namens Block, was bedeutet, dass sie übereinander gestapelt werden. wollen wir ändern. Wir möchten hier oben nach oben gehen, zum Layout. Wir würden gerne eine Anzeige finden. Und anstelle von Block werden wir Inline-Block auswählen und das stapelt sie nebeneinander. Einfach. Wenn wir diese alle die gleiche Farbe stylen, könnte ich in meine Hintergrundfarbe gehen und die Hintergrundfarbe ändern. Mein Problem ist, dass ich will, dass sie anders sind. Schauen wir uns meine Illustrationsdatei an. Sie können einen Illustrator sehen, ich wollte, dass es zwei verschiedene Farben sein. Wenn ich das Li aufhalten, bedeutet dies, dass beide rot oder grün werden. Das ist nicht, was ich will, ich will, dass sie verschiedene Farben haben. Lass uns zurück in Dream Weaver springen. Lassen Sie uns zwei Klassen erstellen. Wir werden eine sogenannte rote Schaltfläche und grüne Schaltfläche erstellen und sie auf sie anwenden. Der Grund, warum wir das tun, ist, dass wir wieder verwenden können, dass grüne Taste oder rote Taste, weil es gehen, um andere Tasten auf unserer Website, die wir gehen, um dies zu verwenden. Hier unten ist es egal, was Sie ausgewählt haben, aber es wird in styles.css gehen, global und dann wählen Sie das dann okay plus, vergessen Sie, was da drin ist. Wir werden unsere eigene Klasse erstellen und es btn nennen , und wir werden die erste rot nennen. Warum nennen wir es btn-red und nicht rot btn? Es bedeutet nur, dass sie nebeneinander in der CSS hier Button grün, Knopf rot bleiben . Wir könnten einen blauen Knopf haben und es ist einfach einfacher, sie so zu finden. Klicken Sie auf Knopf rot und ich werde einen Hintergrund zu bekommen, und ich werde eine Farbe auswählen. Wenn Sie meinen Illustrator-Kurs gemacht haben, hätten Sie gewusst, wie Sie das CSS exportieren können. Wir werden uns das jetzt schnell ansehen. In Illustrator hier, Ich werde auf diesen Hintergrund klicken hier. Ich gehe zu Window, wir gehen zu CSS, wo ich CSS-Eigenschaften verwende. Es wird mir sagen, was die Hintergrundfarben. Das ist die Sache, die ich hier will. Ich doppelklicken Sie darauf, klicken Sie rechten Maustaste darauf, klicken Sie auf Kopieren. Wenn Sie den illustrierten Kurs durchgeführt haben, haben Sie diesen möglicherweise als Textdokument exportiert. Aber weil wir sowohl der Designer als auch der Front-End-Webentwickler sind, werden wir einfach direkt aus der Illustrator-Datei kopieren und einfügen. Ich habe es kopiert. Gehen Sie zurück in Dream Weaver dann hier werde ich auf Hintergrundfarbe klicken. Wir gehen zurück zu unseren hexadezimalen Zahlen. Sie können in Illustrator sehen, es gab tatsächlich beide Optionen. Ich finde diese einfach einfacher, nur weil sie einfachere Codes zum Kopieren und Einfügen sind. In der Hintergrundfarbe hier gehen wir zurück zu hex und wir werden sicherstellen, dass wir den Hash davor haben. Das habe ich nicht von Illustrator kopiert. Im Gegenzug ist das meine kleine Hintergrundfarbe. Ich werde es anwenden. Worauf wenden wir es an? Wenden wir es auf das a-Tag an? Ich glaube nicht, dass es wichtig ist. Wahrscheinlich stoßen wir später auf Probleme. Hoffen wir, dass wir das nicht tun. Wir gehen hier rein und gehen BTN und da ist es rot, schön. Gehen wir zurück in die Farbe Rot, nicht die Polsterung, die wir brauchen, aber wir werden das in einer Sekunde tun. Wir machen den Kerl als Nächstes. Wir erstellen einen neuen Selektor, alles ist korrekt ausgewählt. Wir nennen das einen Punkt btn. Wir nennen das hier grün. Das Gleiche. Ich werde in Illustrator springen. Hier in der Illustration klicke ich auf diesen Kerl packte den Kerl. Kopieren, aus irgendeinem Grund kann ich den Befehl c für die Kopie nicht ausführen, wird c auf einem PC steuern. Ich weiß nicht, warum. Vielleicht kannst du das, aber hier drinnen werde ich gehen. Ich gehe zu meinen hexadezimalen Zahlen, lasse Hash dort drin. Das ist mein Grün und wende es auf diesen an. Hier geht's. BTN. Das ist der andere Grund, warum wir es btn nennen, weil sie alle dort gruppiert waren , wenn wir b eingeben. Wir möchten am oberen und unteren Rand dieser Schaltflächen etwas Polsterung hinzufügen. Dies ist, wo es ein bisschen Versuch und Irrtum ist, ich verspreche dir, ich wusste nicht auswendig, ich habe einfach beide Optionen des Stylings dieses hier ausprobiert, weil du bist, wie ich es einfach noch stylen kann li und fügen Sie etwas Polsterung hinzu. Ich wusste es, dass das nicht funktionierte, also mussten wir für eine andere Methode gehen. Lassen Sie uns für die gebrochene Methode gehen. Immer ein tolles zu beginnen. Ich habe diese Li's, die in meinen ul sind, die sich speziell in meiner Desktop-Ansicht befinden, was großartig ist. Sie sind wirklich spezifisch. Ich werde sagen, ich hätte gerne etwas Polsterung. Ich werde es hochziehen. Sie können sehen, dass es nicht wirklich Polsterung hinzufügt, es drückt es nur von oben. Da ging ich, nicht schlecht. Sehen Sie, wie dieser Mülleimer hier das ausmacht. Was ich beschlossen habe, war, dass ich auf diesen Kerl geklickt habe und ich ging neuen Stil und ich werde es spezifischer machen. Ich drücke meinen Abwärtspfeil. Es muss die Desktop-Ansicht li sein und was ich tun musste, ist dies ein Tag. Unten unten können Sie sehen, dass es ein Tag in einem li, in einer ul. Ich lasse das auch hier drin, weil ich Ihnen gerne die Antwort sagen würde, aber vertrau mir, diese Dinge, die wir glauben, definitiv bin ich 100% sicher, dass es funktionieren wird, dann tut es am Ende nicht. Du musst dir die Tags ansehen und gehen, okay, was könnte ich sonst noch versuchen? In unserem Fall ist der aktive Link, der Hyperlink, der innerhalb des li ist, die innerhalb der ul ist, die sich innerhalb der Desktop-Ansicht befindet. Das hier wird funktionieren. Ich hoffe, es wird funktionieren. Ich gehe zum obersten Layout. Ich werde etwas Polsterung hinzufügen und es einfach nach oben ziehen. Da gehst du. Das hier funktioniert. Was ist das? Es ist 13 oben und unten 13 und es ist 43 links und rechts. 43, wieder, meine Tastatur scheint in doppelten Fours zu tippen, 13 nach unten und 43 auf dieser Seite. Sie können die auf meinen kleinen Knöpfen arbeiten sehen. Ehrfürchtig. Das nächste, was ich tun möchte, ist, ich brauche etwas nach oben und du kannst Minuspunkte verwenden. Also nur abhängig von diesem, verwenden wir nur Minusmargen und es funktioniert nicht. Schlag den Mülleimer. Es ist ein bisschen seltsam manchmal, als wäre die Arbeit an dem a Tag innerhalb des li, das innerhalb der ul ist. Wenn du frustriert wirst, mach dir keine Sorgen. Es ist eine allgemeine Frustration in der ganzen Branche. Vielleicht kann ich das hier antun. Die Li ul und ich gehen hier minus. Das funktioniert auch nicht und daher finde ich heraus, dass ich zur tatsächlichen Desktop-Ansicht gehen muss. Lass uns Selektor gehen, es gibt eine, die ich bereits habe, es heißt Desktop-Ansicht. Wenn ich es zu diesem hier mache, können Sie sehen, dass es funktioniert. Ich werde klicken und ziehen, weil ich nicht sicher war, wie das funktioniert, cool, wenn ich für diesen einen schließe, minus fünf Pixel, die nach oben gehen. Manchmal magst du, ist es das hier, ist es das, warum ist es nicht? Sie müssen am Ende viele Klassen erstellen und sie löschen nur um herauszufinden, welche sie steuern. Wir werden tun, ist ein Single. Als nächstes möchte ich die Unterstreichungen entfernen. Die Unterstreichungen werden gesteuert durch, Sie können mit all diesen spielen, aber es ist eigentlich das, ein Tag, weil das spezifisch für Hyperlinks ist. Wir gehen zu dem, wir werden einen Typ bekommen, und wir gehen hier runter, um Textdekoration zu nehmen und keine auszuwählen. Okay, standardmäßig ist es auf dem Basiswert. Cool. Lassen Sie uns zur Schriftfarbe gehen, bevor wir in die gleiche gehen, hoffentlich und die Schriftfarbe kommt von Illustrator. Ich klicke auf diesen Text hier und da ist er. Es gibt die Schriftart und die Farbe, und ich klicke mit der rechten Maustaste darauf, klicke auf Kopieren, zurück in Dream Weaver und wir gehen, um die Schriftfarbe zu gehen. Hash lassen Sie es dort. Es ist irgendwie wie ein gebrochenes Weiß. Das nächste, was ich tun möchte, und um diese Schaltflächen funktionieren zu lassen, ist es, es auf die Schriftart anzuwenden. Im Moment gibt es Times New Roman, die nicht für mich funktionieren wird. Ich wollte mir die Verwendung von Schriftarten ansehen, etwas anderes als Arial und Times New Roman und die eingebauten Schriftarten. Wir werden uns das in einem separaten Tutorial ansehen, das direkt nach diesem ist. 16. So fügst du verschiedene Schriftarten in Dreamweaver zu einer Website hinzu: Hallo da. In diesem Video werden wir diese hässliche Times New Roman Schriftart zu dieser schönen Open Sans Condensed Schriftart ändern. Wir müssen auch die Schreibweise ändern. Das habe ich gerade bemerkt. Sie waren wahrscheinlich in diesem ganzen Kurs und sagten: „Äh, ändern Sie es?“ Ich werde es vor dem Ende dieses Kurses ändern, versprochen. Lassen Sie uns mit Dreamweaver Schriftarten hinzufügen. Was ich jetzt tun möchte, ist, die Schriftart zu ändern, die hier drin ist. Nun, ich könnte finden, sagen, meine Desktop-Ansicht und Sie können ul li und die a Tag sehen. Das ist die Sache, die ich ändern möchte. Woher weiß ich, dass ich das ändern möchte? Ich muss hier tippen und ich sage Font-Familie und ich wähle einfach eine andere aus. Ich weiß, dass es sich ändert. Ich möchte keine dieser Schriftarten, die in den Standardeinstellungen sind, okay, also werde ich sie löschen, aber so habe ich herausgefunden, welche geändert werden muss. Aber ich könnte das ändern und das würde funktionieren. Ich könnte meine neue Schriftart installieren, die Open Sans Condensed sein wird. Aber das Problem, es zu tun, ist, dass es dafür tun muss. Jeder, der zu meinem gesamten Dokument mitnimmt, muss durchgehen und ich muss die Schriftfamilie für sie finden. Was Designer tun, vor allem am Anfang, ist, dass sie die Schriftart global definieren. Wir werden alles in diesem Dokument sagen, alles ist Open Sans Condensed. Also wählen Sie aus, was auch immer Ihre Körperkopie-Schriftart ist. Ich werde mir meine Illustrator-Akte ansehen. Das ist ein spezieller Anwendungsfall, es ist da für den oberen, aber ich benutze die komprimierte Schriftart hier für den Typ und unten hier, und ich benutze sie auf vorhergehenden Seiten hier. Das ist die Open Sans Condensed. Ich habe entschieden, dass das meine Hauptschrift ist. Ich werde jetzt durchgehen und das als meine Standardeinstellung festlegen. Du machst es in Dreamweaver. In Dreamweaver müssen wir also das Körper-Tag stylen. Das body-Tag ist, denken Sie daran, wenn ich sowieso hier drinnen klicke, das nav, ich bin in der Kopfzeile, die sich innerhalb des Containers befindet, der sich alles im Körper befindet. Der Körper ist alles, was ich auf meiner Seite sehe. Denken Sie daran, dass der Header alles ist, was der Computer sieht und der Körper ist alles, was der Benutzer sieht. Wenn ich das aufhalte, wird alles hier drin Open Sans sein. Um es zu tun, werde ich auf allen Quellen sein. Nein, ich werde nicht alle Quellen sein. Ich werde in styles.CSS sein. Ich werde es global tun und ich werde klick- wir haben noch kein Körper-Tag. Wir müssen das auswählen und eine Leiche auswählen. Body ist eines jener Tags, die bereits vorhanden sind und keinen vollständigen Stopp davor benötigen. Nur diejenigen, die wir erstellen, gibt es Klassen, die es benötigen. Body, wir gehen zu Text oder Text und wir gehen zur Schriftfamilie und wir könnten eine von ihnen auswählen. Das einzige Problem mit der Verwendung, sagen Sie, Sie mögen Gill Sans, Sie sind wie: „Ja, Gill Sans ist gut.“ Sie können sehen, dass er für die Fahrt mitkommt, weil alles in Gill Sans geändert wird. Aber was passiert eigentlich, heißt es: „Hey, Sie Person, die meine Website besucht, haben Sie Gill Sans auf Ihrer Maschine?“ „ Nein.“ „Nun, haben Sie Gill Sans MT?“ „ Nein.“ Dann haben wir Myriad Pro? Es funktioniert so weit unten in der Liste, bis es eine findet und normalerweise endet es bei Arial. Das willst du nicht. Du willst mehr Kontrolle. Sie wollen eigentlich sagen: „Verwenden Sie die Schriftart, die ich meine, nicht nur raten Sie bei einigen Dingen.“ Es ist sehr ungewöhnlich, diese jetzt zu verwenden. Also, was wir tun werden, ist, dass wir Gill Sans auf Wiedersehen sind. Okay, und wir werden eine neue Schrift einfügen. Lassen Sie uns zur Schriftfamilie gehen und wir gehen zu diesem hier namens Fonts verwalten. Nun lädt dies etwas, das Adobe Edge Web Fonts genannt wird. All dies, ist, dass eine Schriftart von Adobe , die sie für uns verschenkt haben, kommerziell kostenlos zu verwenden. Es gibt einige hilfreiche kleine Suchoptionen oben dort. Wir werden Dinge verwenden, die wir aus Illustrator entworfen haben. Sie können hier in Illustrator sehen. Ich habe dafür gesorgt, dass ich beim Entwerfen Webfonts ausgewählt habe. Wenn Sie sich auf Illustrator befinden, wählen Sie nicht eine zufällige Schriftart von Ihrem Computer aus, und stellen Sie sicher, dass Sie Webfonts verwenden. Ich habe das getan. Beide Schriftarten sind als Webschriftarten verfügbar. Aber wenn ich es nicht getan habe, kann ich hier durchgehen und sagen: „Ich möchte mir ein paar Überschriftenschriften ansehen.“ Es gibt mir mehr Überschriftenschriften. Sagen Sie, Sie wollen ein paar Schriftarten, das ist diese hier. Es ist eher wie standardisierte Schriftarten. Ich werde sie beide ausschalten. Sie können eine Skriptschriftart auswählen, Sie können Serifen auswählen. Sie können sich entscheiden, nur um Ihnen zu helfen, einen Stil auszuwählen. Ich werde die ausschalten. Ich werde nach einer Schriftart suchen. Wir verwenden Open Sans und wir verwenden die kondensierte Version. Warum? Nur weil es wirklich gut für Überschriften ist, besonders weil als Textkopie-Schriftart, weil es dünn ist, Sie viele Zeichen anpassen können, so dass wirklich lange Überschriften eher in einer Zeile enden, anstatt in zwei zu brechen. Aber das ist völlig ein Stil Design-Wahl als auch. Was ich tun werde, ist, ich habe das ausgewählt, traf das kleine Häkchen in der Ecke, und du klickst auf Fertig und nichts passiert. Sie aktivieren es, dann gehen Sie zu font-family und es wird hier unten angezeigt. „ Hallo?“ Klicken Sie nun darauf, und dann wird es angezeigt, cool. Wahrscheinlich wird eine kleine Warnung erscheinen, meine wurde deaktiviert. Deaktiviert ist kein Wort, deaktiviert. Es sagt nur, dass wir ein paar Dinge sowie eine Warnung hinzugefügt haben, Es sagt nur, wir mussten die normale aktivieren und das Schriftgewicht ist 300. Es wird nur gesagt - wie normalerweise würden diese nicht standardmäßig vorkommen, aber es ist nur getan, damit Sie diese Schriftart funktionieren. Das andere, was passiert ist, ist , und das war's, als hätten wir eine Schrift. Du musst dir keine Sorgen mehr machen. Aber nur um Sie wissen zu lassen, dass Sie dieses Ding hier oben haben, also in meinem Index und meinem Quellcode, und ganz oben hier. Denken Sie daran, wir setzen es in den Link zu JavaScript und den Link zum CVN und unserem Stylesheet. Dieses Ding wurde gerade von Dreamweaver injiziert, damit es funktioniert. Im Grunde, was es tut, ist, dass es losgeht, um die Schriftart herunterzuladen. Sie können Edge-Schriftarten sehen, Open Sans Condensed wird für uns geladen, so dass wir nichts damit machen müssen. Wir müssen es nur dort lassen. Lassen Sie uns ein alles speichern, es ist nur Tick. Es funktioniert in unserem Browser. Awesome, da ist er. „ Hallo?“ Gehen Sie hier auf den Grund. Das ist nicht ganz richtig. Nun, das ist völlig nicht, richtig, aber mach dir keine Sorgen, wenn dein noch so kaputt ist, werden wir das auch im nächsten Video reparieren. Es gibt ein paar kleine Dinge, die wir tun müssen, damit es funktioniert. In Ordnung, gehen wir zu dem nächsten Video. 17. So gestaltest du den Stil des mobilen Hamburger-Dropdown-Menüs in Dreamweaver: Das erste, was wir tun werden, ist ein Desktop sieht gut aus, ein Tablet, das etwas Arbeit braucht, dass es einige echte Probleme hier unten hat [unhörbar]. Der größte ist, dass man sehen kann, dass es nicht genug Platz gibt, um zu passen. Es ist in Ordnung in dem Ordner, aber Sie können sehen, wenn es in der Nähe von hier kommt, es endete nur versucht, den gleichen Raum zu besetzen. Was ich tun werde, ist, dass ich versuchen werde, dieses Logo zu verkleinern. Um es zu tun, werde ich auf das Logo klicken. Ich gehe zu meinen Quellen. Nun, Sie werden bemerken, dass diese Dinge gerade erschienen sind, entweder ging es da rein. Das ist aus der Schriftart, die wir von den Adobe-Whip-Kantenschriftarten hinzugefügt haben. Wir ignorieren diese nur für den Rest der Klasse. Spaß. Was ich will, ist in Stilen dot css, und wir werden es in unser Handy setzen. Wir werden einen Selektor erstellen, der genau das erraten wird, was ich will. Ich möchte dieses Bild stylen, das sich in einem Tag befindet. Das a-Tag gibt ihm seinen Link zu, zurück zur Homepage und innerhalb der Kopfzeile, die speziell hier ist. Wenn Sie mehr als ein Bild in diesen Daten haben, wird es nicht funktionieren. Möglicherweise müssen Sie eine Klasse hinzufügen, wirklich spezifische, vielleicht die Logo-Klasse und installieren, aber weil ich nur ein Bild in der Kopfzeile habe. Das wird gut funktionieren geschrieben. Was ich sagen werde, ist Breite, Prozent verbunden zu werden. Ich sagte, vielleicht 80. Halten Sie zweistellige Zahlen für mich, und ich beschwerte mich darüber den ganzen Kurs. Acht drei Prozent. Warum sollte es 83 zweistellig sein? Weil ich das schon bemerkt habe. Was das bedeutet, ist, dass unabhängig von der gesamten Breite keine Garantie 80 Prozent seiner ursprünglichen Größe ist . Das coole Ding daran, wie Sie sehen können, wenn es hier runter kommt, wird es weiter skalieren. Jetzt werden die meisten Mobiltelefone kleiner sein als etwa 320. Wenn Sie Mobiltelefone haben, die kleiner sind als das, wird es wirklich klein werden. Werde ich eine spezielle Problemumgehung für sie entwickeln? Bin ich nicht. Ich werde nur sagen, dass 300 und höher das funktioniert und das sind die meisten Handys der Welt. Das nächste, was zu tun ist, machen wir es zuerst ein Tablet. Ist das, wenn ich darauf klicke, klebt der Nullpunkt nebeneinander übereinander. Du könntest es lassen, wenn du sie nebeneinander magst, aber ich will meins übereinander kleben. Was wir tun, ist unter Stilen dot css und jetzt Tablet, wir sagen wahrscheinlich dieser Artikel hier, diese Draufsicht UL, LI. Wir können sagen, ich möchte, dass Sie zeigen. Denken Sie daran, wir sagten B Inline-Block , der es bekam, Seite an Seite Block. Wir legen es einfach übereinander. Wir fügen aber ein Streicheln hinzu, nur damit sie nicht gerade übereinander sitzen. Schön, das ist ein Dumm für Tablet. Was wir tun werden, ist, dass wir sehen, dass wir diese Klasse hier in der mobilen Ansicht nicht haben, also werden wir sie einfach duplizieren. Sie können es duplizieren, duplizieren, Medienabfragen durchführen und wir werden es auch in die mobile legen. Das ist es, und beide. Nüsse. Die nächste Sache ist die Bigamie und du drängst hier nach links. Ich habe mit schwimmenden Fahrgeschäften und Futterfahrten herumgespielt und es hat einfach nicht funktioniert. Was ich herausgearbeitet habe, ist, dass diese beiden in dieser nav mobilen Ansicht und Desktop-View-Klassen in diesem nav sind . Sie können nicht im selben Navi sein, das den gleichen Raum einnehmen wird. Was wir tun müssen, ist das Handy zu greifen, wir tun Codierungsansicht hier war dabei, das mobile div zu greifen, all diese ganze Zeile, schneiden Sie es.. Oben, ich werde es nie einfügen. Es gibt, sie werden ein paar leere Leerzeichen löschen, so dass es ausgerichtet ist. Natürlich hat es ein bisschen davon verloren, es hat seinen Flug verloren. Was wir tun werden, ist, gehen wir zu Stilen dot css und wir werden sagen, unter der Ansicht, wird eine machen, es gibt mobile Ansicht und wir werden sagen, nach rechts gekippt bitte. Gib mir eine Sekunde. Das Metallwerk. Buttons erscheinen, was ich tun könnte und eine mobile Ansicht hier, ich könnte den ganzen Text bekommen, um sich auch rechts auszurichten. Aber ich könnte auch tun, ist, ich weiß nicht, es nervt mich, dass diese Typen nicht auf der rechten Seite ausgerichtet sind. Ich will die Disc Draufsicht. In der Tablet- und Desktop-Ansicht möchte ich, dass Sie sich nach rechts ausrichten. Es sieht ein bisschen besser aus. Ich habe Tabellen-Ansicht gemacht. Jetzt müssen wir es für die mobile Ansicht tun. Hier unten. All diese Dinger funktionieren nicht mehr. Lassen Sie uns die gleichen Dinge in Mobilgeräten machen. Ich möchte, dass die mobile Ansicht rechts ausrichtet oder tatsächlich nach rechts und der Desktop-Ansicht schwebt. Ich möchte, dass Sie den Text nach rechts ausrichten. Schön. Wir kommen dorthin. Eines der letzten Dinge, die ich tun könnte, ist, dass die Polsterung oben drauf macht mich ein wenig verrückt. Was ist das? Dieses Ding übergibt er das Bild, das in meiner mobilen Ansicht auf dem Tablet ist. Habe ich etwas Arbeit, darf ich Sie einbeziehen? Das wird wahrscheinlich funktionieren. Lass es uns mal ausprobieren. Es fügt nur einen Rand zu der oberen Ziehhalterung hinzu und es ist ausgerichtet. Jetzt ziehe ich hin und her ein Pixel co, also nach unten bei Handy und muss wahrscheinlich dasselbe tun. Gelegentlich fließen die Stile durch dieses Tablet auf das Handy. Ich werde alle bewährten Browser speichern um sicherzustellen, dass es tatsächlich wahr ist. Dort sieht es gut aus. Ehrfürchtig. Ich würde sagen, wir sind da, und das ist ein Sieg. So erstellen wir unser j-query Drop-down-Menü, alles nach unseren Lektionen. Im nächsten Video zeigen wir dir, wie du es kopierst und einfügst und ein bisschen betrügst. Aber und du bist stolz auf dich selbst, hast du es funktionieren lassen? Wenn Sie sich nicht daran erinnern, dass am Ende jedes Videos, Ich speichere eine Version von wo ich bin. Je nachdem, wo Sie stecken geblieben sind, können Sie hier irgendwo entweder unten links oder in den Kommentaren auf dem Bildschirm schauen. Sie werden ein Link zu der fertigen Datei für das Video sein. Sie können Ihre mit diesem vergleichen, nur sehen, was schief gelaufen sein könnte. Aber wenn Sie es getan haben und Sie es behoben haben und Sie haben ein Augenzwinkern. Ich bin sehr beeindruckt, weil es sehr heiß ist, aber großartig ist, dass Sie das nächste Mal, wenn Sie es tun, können Sie den Code kopieren und einfügen, den Sie selbst gemacht haben. Meine Freunde, gehen wir zum nächsten Tutorial wo wir es einfach kopieren und einfügen für die Leute, die betrügen haben. 18. So planst du deine Dreamweaver-Vorlage: Hallo, da. In diesem Video werden wir über Vorlagen sprechen. Wir werden die Vorlage in diesem speziellen Video nicht wirklich entwerfen. Wir werden es ein wenig später tun, aber es ist ungefähr dieses Mal, dass wir wirklich überlegen müssen , was Teil der Vorlage sein wird und was nicht. Schauen wir uns unser Design in Illustrator an. Wenn man sich das Design ansieht, gibt es einige Bits, die Teil der Vorlage sein werden. Im Allgemeinen wird es immer die Kopf- und Fußzeile sein , und das gilt für unseren Fall. Dies wird auf jeder Seite gleich sein und es ist der zentrale Teil hier, der für jede Seite einzigartig sein wird. Das ist meine Homepage. Sie können hier unten sehen, gleiche Kopfzeile, gleiche Fußzeile, aber es ist dieser mittlere Teil, der anders ist. Ich werde sicherstellen, dass es Teil der Vorlage ist, stellen Sie sicher, dass die Fußzeile Teil der Vorlage ist. Ich entwerfe diese jetzt zuerst in Dreamweaver und verwandle sie dann in eine Vorlage und erst dann, bevor ich beginne, diese inneren Teile zu entwerfen. Wir haben diese Innenteile entworfen. Zuerst müssen wir sie herausziehen, eine Vorlage erstellen und versuchen, sie wieder einzufügen und machen nur eine zusätzliche Arbeit für uns. Die anderen Dinge, die Teil der Vorlage sein wird, ist diese kleine grüne Box hier. Ich möchte nicht, dass sich dieses Bild ändert. Auf allen Seiten wird es so sein. Ich werde diesen Teil der Vorlage machen. Wenn Sie möchten, dass sich das auf jeder Seite ändert, müssen Sie das zu einem Teil des sogenannten bearbeitbaren Bereichs machen , wie diese Jungs. Identifizieren Sie einfach aus Ihrem Design, was Teil der Vorlage ist, entwerfen Sie zuerst, und dann später werden wir bearbeitbare Bereiche erstellen. Die andere Sache zu beachten ist, brauche ich tatsächlich eine Vorlage? Vorlagen fügen einer Website einen Grad an Komplexität hinzu. Die Boni ist, dass, wenn ich eine Änderung an meiner Vorlage, sagen wir, ich füge einen zusätzlichen Menüpunkt hinzu, es geht durch jede einzelne Seite und aktualisiert es automatisch. Super gut, wenn Sie eine Website haben, die 50 Seiten oder mehr sagen. Aber wenn Sie wie eine 10-seitige Website haben, denke ich vielleicht zweimal darüber nach, eine Vorlage hinzuzufügen. - Warum? Denn bei fügt hinzu, dass Komplexität für ein winziges bisschen mehr Geschwindigkeit. Mehr Komplexität, ein bisschen schneller, vielleicht nicht wert für eine wirklich kleine Website. Aber wir werden es dafür tun, weil wir alle effizient und offiziell sein wollen. Lassen Sie uns einen kleinen Blick darauf werfen, was in dieser Vorlage erstellt wird. Das ist diejenige, die wir tun. Wir werden darauf hinarbeiten. Lassen Sie uns zur vollen Live-Ansicht gehen, das ist, wie es aussehen wird. Es wird unsere Kopfzeile haben, die wir getan haben, es wird dieses große Hintergrundbild haben und es wird nichts, nichts, nichts, nichts und dann eine Fußzeile am unteren Rand geben. Lassen Sie uns das erstellen, bevor Sie es in eine Vorlage verwandeln. 19. So fügst du ein Hintergrundbild außerhalb des Haupt-Containers in Dreamweaver hinzu: In Ordnung. In diesem Video werden wir dieses Hintergrundbild bearbeiten und es wird alles dehnbar und hat eine bestimmte Höhe und wird dann ein bisschen kleiner und wird zu mobilen. Gehen wir und machen das in diesem Video. Als erstes ändern wir die Hintergrundfarbe. Es ist momentan weiß. In Illustrator sollte es mit dem ausgewählten sein, gehen Sie zu CSS-Eigenschaften, und es wird yay, yay, yay sein. Zurück in Dreamweaver und was wir tun werden, ist, dass wir alles ändern müssen, okay? Denken Sie daran, dass das „alles“ -Tag das body-Tag ist. Körper ist alles, was wir sehen. Also gehen wir und ändern das, wir können die Hintergrundfarbe ändern. Cool. In Stilen unter GLOBAL haben wir tatsächlich einen Körper, den wir früher gemacht haben, wir haben es mit der Schriftart für alles getan. Jetzt können wir den Hintergrund für alles machen. Springen Sie zum Hintergrund, Hintergrundfarbe, lassen Sie den Hash dort, setzen Sie eine Farbe, kehren Sie zurück, und jetzt ist alles eine Art graue Farbe. Das nächste, was ich tun möchte, ist, dass ich dieses große Bild im Hintergrund hier machen möchte. Okay, also wie hoch ist es? Es ist so hoch hier. Sie können sehen, dass mein CSS mir die Höhe des tatsächlichen Bildes gegeben hat, aber es ist tatsächlich innerhalb von dort abgeschnitten. Das ist die tatsächliche Höhe, die ich will, also werde ich mir das schnappen. Wo geht das hin? Im Design hier können Sie sehen, dass es sich tatsächlich um meinen Header wickelt, also technisch gesehen, hätte ich dies zuerst direkt am Anfang des Kurses machen sollen und dann meine Navigation dort hineinlegen sollen. Ich finde, wenn wir mit dem echten Hintergrundmaterial für den Kurs beginnen, werden wir in zu viel Komplexität geraten, es ist zu früh, also werden wir es später tun. Es wird uns zeigen, wie man ein div-Tag nachrüstet, das wir früher hätten tun sollen. Es ist ziemlich einfach, wir müssen es nur um diesen Kerl wickeln. Gehen wir und schauen uns mal an. Es geht an die Ränder und ich möchte, dass dieses Ding irgendwie für den gesamten Hintergrund weitergeht , je nachdem, wie groß die Größe des Bildschirms ist. Machen wir das in Dreamweaver. Lassen Sie uns auf meinen „Header“ klicken, stellen Sie sicher, dass Sie den Header ausgewählt haben, und wenn ich ihn um den Header wickle, wird er immer noch in diesem Container sein. Diese Containergröße ist, glaube ich, 1200 Pixel breit. Ich möchte auch nicht, dass es darin enthalten ist, weil das den Header so ziemlich hält. Was ich tun möchte, ist, dass ich es außerhalb dieses Containers legen möchte, also müssen wir den Container sammeln. Der Container ist ausgewählt, also klicken Sie hier, klicken Sie in den Container, und ich möchte ein div einfügen, und ich möchte es um den Container wickeln. Cool. Jetzt können Sie sehen, unten ist div, es hat noch keinen Namen, also lasst uns gehen und eine CSS-Klasse erstellen, und dann fügen wir es danach hinzu. CSS Designer, Styles, wir werden es in GLOBAL schaffen, wir werden einen Selektor erstellen. Wir nennen das ein Heldenbild. Cool. Lassen Sie uns ein grundlegendes Styling geben, damit wir es sehen können. Zunächst einmal braucht es eine Höhe, weil in dem Moment, in dem sich dies um die Außenseite dieses Headers wickelt , weil hier nichts viel los ist. Gib ihm einfach eine Höhe, damit wir es sehen können. Die Höhe, die wir von Illustrator bekommen haben, war, dass, 653. Wir fügen ein Hintergrundbild hinzu. Unten bei Bildern hier, hier ist es, wo wir nur Hintergrundfarbe machen. Gleich darunter befindet sich ein Pfad. Klicken Sie auf „Nach dem Bild suchen“. Gehen Sie zu unseren Übungsdateien, finden Sie Bilder, das hier heißt Hero-Hintergrund. Jetzt passiert hier nichts, denn denken Sie daran, dass wir den Stil erstellt haben und ihn nicht angewendet haben. Da ist es, da. Klicken Sie auf das „div“, wenn Sie darauf geklickt haben, müssen Sie auf dieses „div“ klicken, das hier gleich am Anfang ist und Klasse darauf anwenden, damit Sie Hero-Bild. Ehrfürchtig. Lassen Sie uns eine Vorschau im Browser. Vielleicht speichern Sie alle zuerst, überprüfen Sie den Browser. Es funktioniert irgendwie. Es wickelt sich um die Außenseite und es ist die richtige Höhe. Es wiederholt sich nur. Wenn Sie einen kleineren Bildschirm hatten, sehen Sie die Wiederholung möglicherweise nicht, aber wenn Sie einen wirklich großen Bildschirm haben, wird es immer und immer wieder wiederholen. Das ist, was Hintergrundbilder standardmäßig tun. Lass uns das zuerst ausschalten und es überprüfen. Es ist wieder in Dreamweaver und lassen Sie uns unser Hintergrundbild finden. Hier, Bildhintergrund, gibt es hier diese Option, die Wiederholung sagt. Hintergrund-Wiederholen, klicken Sie auf „Keine“. Keine Wiederholung und speichern Sie alle. Testen Sie im Browser. Ehrfürchtig. Es sagt, sich nicht zu wiederholen. Die andere Sache, die ich möchte, ist, sich zu dehnen, um die Kanten hier zu bedecken. Ich möchte es auf die gleiche Höhe halten. Ich möchte es ausstrecken und es gibt eine coole Funktion hier genannt Cover, die Ihnen helfen wird, wenn es sich anpasst. Es dehnt sich auf die Größe des Bildschirms aus. Schauen wir uns das in Dreamweaver an. Hier ist es eine Option, die Hintergrundgröße sagt, klicken Sie auf das Wort „Auto“, und wählen Sie Abdeckung. Wenn ich deaktivieren und zurück in meinen Browser springen, genial. Was es jetzt tun wird, wie Sie sehen können, dehnt es sich aus, um zu passen und wenn es auf seine Höhe, maximale Höhe, bleibt es dort. Es wird immer schön proportional im Hintergrund sein. Das Problem dabei ist, dass Sie sehen können, dass einige davon abgeschnitten wird , wenn es zum größten kommt, an der Spitze dort. Cool. Das ist unsere Tarnung. Was ich auch gerne tun würde, ist, Sie können sehen, ich möchte, dass das Bild zentriert wird. Im Moment ist es irgendwie einfach, das als Standard zu verwenden und ich möchte die Polsterung oben loswerden. Zuallererst, lassen Sie es uns ins Zentrum bringen. Zurück zu Dreamweaver, in die, die wir Hintergrundposition nennen, Klicken Sie auf das Prozentzeichen und klicken Sie auf „Center“. Speichern Sie alle. Überprüfen Sie. Jetzt sollte es sein. Siehst du? Das funktioniert jetzt eigentlich von der Mitte aus, anstatt sich an der linken Seite zu halten. Lassen Sie uns das loswerden. Betrachten Sie die Grenze auf der Außenseite, das gilt für jede Website, die standardmäßig erstellt wird, weil das body-Tag, denken Sie daran, wir haben die Hintergrundfarbe zum Stillstand gebracht und eine Schriftart hinzugefügt. Standardmäßig kommt es mit etwas Polsterung. Eigentlich, ein Rand, der um die Außenseite geht. Das ist standardmäßig nur da. Wir müssen das nur in Dreamweaver außer Kraft setzen. Finden Sie unser Body-Tag. Hier ist es da. Wählen Sie „GLOBAL Körper“ und sagen Sie einfach hier oben, unter „Layout“, sagen Sie „Ränder“. Das hat es den ganzen Weg herum. Wir werden dies miteinander verknüpfen und einfach sagen, einfach manuell Null Pixel eingeben. Sie können sehen, dass alles verschwunden ist. Sie denken, weil dort Null steht, würden Sie denken, dass es auf Null gesetzt ist, aber das ist es nicht. Es bedeutet nur, dass du nichts getan hast. Ich fange es nur irgendwo an und beginne dann bei Null. Sie müssen tatsächlich Null eingeben und „Enter“ drücken. Jetzt wird es Teil des CSS sein. Speichern Sie alle. Checken Sie den Browser ein. Sie können es jetzt [unhörbar] neben Kanten sehen. Eine letzte Sache, die ich tun werde, ist, dass ich wollte, dass das ein bisschen von oben ist. Was wir tun werden, ist, es gibt ein paar zu nehmen, wir bekommen den Header, um Padding an der Spitze zu haben, oder weil wir dieses Helden-Bild bereits ausgewählt haben, können wir etwas Polsterung darauf setzen. Lasst uns das machen. Gehen wir zum Hero-Bild und lassen Sie uns eine Ladung Polsterung haben. Ich schlage es nur auf. Wie viel? Ich bin mir nicht sicher. Speichern. Überprüfe es. Ja, es ist okay. Mein einziges Problem ist, dass das Hintergrundbild etwas dunkel ist. Ich könnte das später aufhellen, aber es funktioniert. Sieht gut aus. Eine letzte Sache, die ich tun muss, ist, wenn ich mir meine Beispieldatei anschaue, können Sie hier sehen, diese war eigentlich nur meine Tablet-Version, gleiche Höhe. Aber mein Handy, ich habe es tatsächlich ein wenig gekürzt weil die Schriftarten kleiner wurden und die letzte ein bisschen anders ist. Das hier ist diese Höhe, 526. Lass uns gehen und das hineinlegen. Unser Heldenbild ist in GLOBAL. Was ich tun möchte, ist, dass ich eine weitere im Handy machen möchte. Max Höhe ist 400, wählen Sie als Hero-Bild, Sie müssen es eingeben und die Höhe für dieses ein, es wird überschreiben, was wir derzeit haben und setzen Sie es in. Schön. Speichern Sie alle. Checken Sie den Browser ein. Browser sogar, dann unten, unten, unten und dann wird etwas kleiner. Schön. Sie müssen diese nicht anpassen. Sie entwerfen es in Illustrator und in besten Absichten, das wird großartig sein. Dann müssen Sie vielleicht einige Höhenanpassungen vornehmen, aber unsere funktioniert im Moment gut. Das nächste, was wir tun müssen, ist unsere Hauptinhaltsbox hinzuzufügen. Das machen wir im nächsten Video. 20. So verwendest du das HTML5-Haupt-Tag in Dreamweaver: ( MUSIK) Hallo da. In diesem Tutorial werden wir dieses Haupt-HTML5-Tag hier hinzufügen. Das ist, wo der größte Teil der Kopie für die Website. Wir werden es schön und groß machen, wir werden ihm eine minimale Höhe geben, und wir werden es grün machen, nur damit du es sehen kannst. Ich mag das Grün nicht. Es wird nicht in der Nähe bleiben. Lasst uns weitermachen und es schaffen. Es gibt drei Hauptstücke auf unserer Website. Es gibt einen Header, den wir getan haben, dann gibt es ein Haupt-Tag, das in die Mitte geht, und das geht alles um den Hauptinhalt, und es gibt eine Fußzeile. Wir haben den Header gemacht. Wir müssen jetzt die Hauptbox einfügen, und wir werden nur eine leere Hauptbox setzen, weil wir diese Box zur bearbeitbaren Sache auf unserer Website machen , damit sie neue Seiten generieren und einzigartige Inhalte in diese Hauptbox einfügen kann, aber wir brauchen zuerst den Container. Wir werden es nach dem Header setzen. Ich werde auf meine Kopfzeile klicken, stellen Sie sicher, dass es da unten rutscht und wir gehen zu Einfügen. Sie können hier sehen, das sind meine Hauptstruktur zu meiner Website. Header, Navigation, wir haben es geschafft. Wir werden Haupt- und Fußzeile in einer Sekunde tun. Lassen Sie uns in die Haupt setzen. Es wird hinter meinem Header sein, und da ist meine Hauptbox. Wir werden den Text da drin lassen. Es wird mir helfen zu identifizieren, wo die Box tatsächlich ist. Jetzt sollte ich durchgehen und meinen Fuß hinzufügen, weil er direkt darunter sein soll. Das einzige Problem ist, wenn ich mir mein Design hier und Illustrator anschaue, meine Fußzeile ist hier unten und sie ist vor einem weißen Hintergrund entworfen. Es wird ein bisschen schwer für mich in Dreamweaver dieses Ding vor diesem grünen Hintergrund zu entwerfen. Was ich tun könnte, ist, der Hauptbox etwas Höhe hinzuzufügen. Ich kann sagen, dass Sie eine 100 Pixel hoch sein können, nur so dass es nach unten drückt und mir erlaubt, hier unten zu entwerfen. Das einzige Problem mit der Höhe, ist, dass es eine absolute Figur ist. Wenn ich sage, es wäre 800 Pixel hoch, und mein Design später versucht, groß zu werden, sagt 800 beinhaltet dies gut, aber dann auf einer anderen Seite, die ich entwerfe, 800, wenn es um hier geht, aber da Das Bild von Haufen größer werden möchte und das verursacht viele Probleme. Das heißt: „Nun, ich will 800 sein.“ und das Bild lautet: „Nun, ich will größer sein. und es gibt einen großen Kampf, und die Dinge beginnen überall zu verschütten. Der Weg, um das zu umgehen, besteht darin, etwas zu verwenden, das als minimale Höhe bezeichnet wird. Was du sagst, ist, ich möchte, dass du ein Minimum von 800 bist, aber du kannst ein bisschen größer sein, wenn du magst. Sei so groß, wie du willst. Es wird ein Minimum von 800 bis maximal Unendlichkeit setzen. Das ist eine wirklich gute Art, Höhen zu sitzen, wenn Sie Vorlagen entwerfen. Sie sind sich nicht sicher, wie groß eine Box sein muss, aber sie muss definitiv nicht so klein sein. Es muss ein bisschen größer sein als das hier. Wir werden das unter dem CSS-Designer-Panel zu tun und klicken Sie dann auf Stile und GLOBAL und nichts ist tatsächlich klicken. Warum passiert das? Es liegt daran, dass ich zwischendurch diese Videos eine andere Arbeit gemacht habe und ich meine auf Current umgestellt habe. Ich mag Current. Es bedeutet, dass alles ist, wie wir in diesem Kurs gearbeitet haben. Aktuelle bedeutet, dass, wenn ich es auf Aktuell umschalten und ich auf sagen, dass klicke, es wechselt zu dem Stil, den ich gerade ausgewählt habe. Aber wir werden zu All zurückrutschen. Aktuelle ist großartig, wenn Sie tatsächlich eine Website haben und es ist fertig und Sie sind tatsächlich immer ziemlich gut in diesem, aber wir werden zurück zu Alle für den Moment klicken. style.css, wir werden es in GLOBAL setzen. Wir werden einen Stil für Haupt erstellen. Es hat es nicht vorausgefüllt. Denken Sie daran, wir haben volle Stopps vor dem Zeug, das wir machen. Das Zeug, das bereits existiert, wie dieses Tag main, wir haben es nicht benannt. Es existierte gerade schon. Wir haben es hinzugefügt. Du stellst die Periode nicht an die Front, nur gerade alte Haupt. Wir werden sagen, main, ich möchte, dass Sie eine Höhe haben, nicht die eine, wir gingen auf minimale Höhe von 800 Pixel. Das bedeutet nur, dass es hier ganz nach unten schön und groß wird, also wird meine Fußzeile danach Platz haben, um dort reinzugehen. Was ich tun könnte, nur um es für Sie offensichtlich in diesem Tutorial, geben Sie ihm eine Hintergrundfarbe von genug Grün. Genau warum ich eigentlich den RGBA verwenden werde, damit ich ein bisschen Transparenz verwenden kann. Warum mache ich das? Es ist nur so, dass Sie es sehen können, wenn ich eine Vorschau in einem Browser und Sie können mit dem Haupt sehen geht. Lassen Sie uns eine Vorschau auf einen neuen Browser. Sie können sehen, das ist meine Hauptbox und es geht den ganzen Weg runter bis hierher. Wir werden das in einer Sekunde entfernen. Ich sagte, ich mache das für Sie, aber oft mache ich das, wenn ich eine Website erstelle. Es musste wirklich wissen, welche Tags beginnen und enden. Wenn du eine Hintergrundfarbe hinzufügst, manchmal magst du, das ist, wo dieser Kerl geht. Wir werden sie in einer Sekunde entfernen. Als Nächstes möchten wir die Fußzeile hinzufügen, und wir werden das im nächsten Video tun. 21. So fügst du das HTML5-Fußzeilen-Tag mit Adobe Dreamweaver zu einer Website hinzu: Hallo, da. In diesem Tutorial werden wir unsere Fußzeile hinzufügen. Das ist unser Top, das ist unsere nette kleine Fußzeile. Es wird zwei kleine Divs darin haben, um unsere sozialen Symbole zur Seite zu schweben. Wir werden unser Copyright auf die rechte Seite bringen. Wir werden auch Links zu all diesen hinzufügen, und dieser wird cool sein, wenn Sie darauf klicken, wird es Ihr E-Mail-Konto öffnen. Sehen Sie dies per E-Mail. Machen wir das jetzt in Dreamweaver. Das erste ist, wo soll ich mein Foto hinstellen. Ich werde es nur sagen, Ich habe auf „Mein Haupt-Tag“ geklickt, und ich werde es gleich danach setzen. Lassen Sie uns auf „Einfügen“ klicken, und unter hier gibt es eine Fußzeile genannt, und ich werde es nach, und da ist es unten hier. Sie können sehen, da ist mein Haupt-Tag, und dann ist da auch die Fußzeile. Geben wir ihm eine Höhe und entfernen Sie diesen Text. Gehen wir zu „CSS Designer“ Panel, „Styles.css“, „Global“, lassen Sie uns einen „Selector“ erstellen, und nur für die Fußzeile, bitte. Ich werde dich dazu bringen, eine Höhe zu haben. Nun, wenn ich sage, setzen Sie keine Höhen, weil wir wollen, dass sich der Inhalt größer und kleiner dehnt, das ist nicht genau, es ist nicht das gleiche für die Fußzeile. Sie können hier sehen, es ist diese Höhe. Es ist immer so hoch. Ich könnte eine minimale Höhe setzen, aber ich bin eigentlich nur, egal, weil ich werde es in einer regelmäßigen Höhe setzen. Zwingen Sie es zu sein. Ich habe bereits überprüft, dass es 120 Pixel ist. Cool. Das ist er, ich werde diesen Text greifen, wählen Sie alles löschen, speichern Sie alle. Eines der Probleme, wenn Sie es aus dieser Option löschen, besteht oft darin, dass dieser geschützte Platz hier bleibt. Im Grunde ist das wie eine Leertaste. Das ist in Ordnung. Sie lassen es dort, weil sonst, können Sie sehen, dass das Tag geschlossen wird, und Sie können nicht wirklich darauf klicken. Sie lassen das da drin. Ich werde es aus meiner Co-Ansicht löschen. Ich brauche es nicht. Meine Fußzeile besteht aus zwei Teilen. Es gibt einen, lasst uns einen Blick werfen, es gibt einen Social Icons Topf, und es gibt einen Topf auf der rechten Seite hier mit diesem Copyright. Ich mache zwei div-Tags, bekomme eins, um nach links zu schweben, und eins nach rechts zu schweben. Gehen wir und machen das. Lasst uns sie reinwerfen. In der Fußzeile gehen wir „Einfügen“, wir fügen ein div-Tag ein, und wir werden es kleben, haben meine Fußzeile ausgewählt, also werden wir es verschachteln. Jetzt mit diesem ausgewählten, werden wir ein anderes div-Tag einfügen und es wird direkt nach dem, den ich ausgewählt habe. Ich habe zwei davon. Sie werden sehen, sie sind in der Fußzeile. Ich habe zwei div-Tags. Lassen Sie uns zwei Klassen erstellen. Ich werde eins nach links und eins nach rechts schweben. CSS-Designer-Bedienfeld, Stile. CSS, Global, Selektor. Ich werde diese nennen, okay? Also werde ich das hier nennen, die sozialen Symbole. Ich werde es auf der linken Seite schweben lassen, und ich werde noch einen angerufen machen, und nach Periode an der Front werde ich das eine Copyright nennen. Das Urheberrecht, sogar. Ich werde ihnen eine Neigung geben, einen Schwimmer nach rechts. Jetzt passiert nichts, weil ich sie anwenden muss. Dieses erste div-Tag ausgewählt. Ich werde dich zu den sozialen Symbolen machen. Das hier ist komisch. Dieser schwimmt nach links, soziale Ikone, und dieser Kerl ist hinter ihnen gerutscht. Der Text wird zur Seite gedrückt. Deshalb habe ich, wenn ich hier klicke, das div ausgewählt, aber es wählt alles aus. Floating macht einige seltsame Dinge zum div-Tag, also. Wir haben das hier. Wir werden im Urheberrecht setzen, und da gehen wir. Ehrfürchtig. Schwimmt nach links, schwimmt rechts. Jetzt werden wir einige unserer Inhalte hinzufügen. Lasst uns das zuerst machen. Ich werde dieses div-Tag ausgewählt haben. Ich gehe zu Einfügen. Ich werde ein Bild einfügen. Ich werde ein verschachteltes Innere einfügen, und ich gehe zu meinen Übungsdateien, Bildern, und ich habe soziale Symbole. Ich habe das alles hinzuzufügen. Fügen Sie sie in der Reihenfolge hinzu, die Sie bevorzugen. Ich werde sie nur alphabetisch eintragen. Cool. Lassen Sie uns etwas zu unserem Bild hinzufügen. Klicken Sie auf das „Hamburger Menü“. ALT-Text ist das, was Sie um jedes Bild legen, und es ist eine Möglichkeit, das Bild zu beschreiben, und Google liebt es, wenn Sie es mit guten Keywords beschreiben. Bringen Sie Ihren eigenen Laptop mit. Facebook. Jedes Bild braucht einen alten Text. Es sagt Suchmaschinen, worum es bei Ihrer Seite geht und wohin der Link geht. Was wir tun werden ist, dass ich bereits eine Seite für all meine sozialen Sachen habe. Gehen Sie, melden Sie sich an, folgen Sie mir in all diesen Dingen. Wenn Sie eine Facebook-Person, LinkedIn-Person, Twitter-Person sind, gehen Sie zu mir. Ich hole das hier, in die Verbindung und dieses Biss hier oben, setze sein Ziel. Wir sagen leer. Was das bedeutet, ist standardmäßig, wenn ich auf dieses Bild klicke, speichern wir es tatsächlich [unhörbar] Browser. Wenn ich das anhebe, ist das Ziel standardmäßig keine. Standardmäßig, wenn ich das Ziel selbst angehoben und es bedeutet nur, wenn ich darauf klicke, ersetzt es diese Seite durch Facebook. Aber weil ich es in leer geändert habe, wenn ich darauf klicke und Sie sehen können, ändert es sich zu unserer tatsächlichen Facebook-Seite. Wir werden den Rest davon reinlegen. Was wir tun könnten, um zu speichern gehen, Einfügen und Bild, jedes Mal, einfach mit der rechten Maustaste darauf und gehen Sie zu duplizieren. Wenn es ausgewählt ist, legen Sie das unten. Wählen wir eine neue Quelle aus. Das ist nur unser Bild. Zurück zu unseren Übungsdateien. Wo bist du? Bilder, soziale Ikone. Ich werde LinkedIn als nächstes tun. Schalten Sie das aus. All diese, Alt-Text, muss eindeutig sein. Linkedin, sieh uns auch nach. Es wird, bleiben Sie leer, aber ich möchte die URL ändern, zu diesem, „Bringen Sie Ihren Laptop“. Cool. Ich werde die Editor-Tabelle drehen, um ein wenig vorwärts zu blättern. Bis wir zum letzten kommen. Halten Sie sich für das ein, weil die E-Mail ein wenig interessant ist. Du bist wieder da. Der Grund, warum die E-Mail ein wenig anders ist, ist, dass es kein Link ist. Es gibt keine Website, auf die Sie für E-Mail gehen können. Was Sie in dem Link hier tun, ist, zu wechseln, Mail an, und dann ein Doppelpunkt, es muss auf diese Weise geschrieben werden. Kleinbuchstaben und geben Sie dann Ihre E-Mail-Adresse ein. Meiner ist Daniel bei B-Y-O-L Punkt IE. Wenn Sie mir eine E-Mail schicken wollen, schicken Sie es dorthin. es wird [unhörbar] in leer. Was jetzt passieren wird, ist ich werde auf „Aus“ klicken und ich werde gehen, klicken Sie in Browser, speichern Sie alle. Schauen Sie, wenn ich darauf klicke, was passiert, ist es lädt Ihren Standard-E-Mail-Browser. Meiner benutzt Mac-Mail. Stellen Sie einfach sicher, dass Sie die, Mail an, davor bekommen haben und das wird funktionieren. Zurück in Dreamweaver. Es gibt ein bisschen Hauswirtschaft. Sie werden diesen Text hier loswerden. Auf Wiedersehen SMS, brauche dich nicht mehr. Das nächste, was wir tun, ist das hier drüben. Es ist ziemlich einfach. Dies ist hauptsächlich nur Text. Ich werde es von Illustrator stehlen. Dichtes Portfolio, klicken Sie weiter auf die falsche Sache. Da ist es da. Schnappen Sie sich und Sie. Möchte ich das stylen? Ich bin tatsächlich zufrieden mit dem Standardtext. Was Sie tun könnten, könnten Sie dafür eine spezielle Klasse erstellen. Stylen Sie die gewünschte Schriftart und die gewünschte Größe. Ich bin glücklich mit der Art, wie es ist. Das nächste, was ich gerne tun würde, ist, dass es ein bisschen von den Rändern hier wegschieben muss. Die Höhe und die Seiten. Um es zu tun, gehe ich zu CSS Designer, Styles.css, Global, Footer. Ich kann Marge oder Padding in diesem Fall verwenden weil es kein farbiges Feld zur Fußzeile gibt. Es ist nur leer. Was ich tun muss, ist, dass ich es wegen so viel schieben werde. Das einzige Problem damit ist, dass die Box tatsächlich höher wurde, um so viel. Es begann bei 120, jetzt sind es 120 plus 33. Wenn Sie Ränder zu Dingen hinzufügen, die Höhen haben, werden sie tatsächlich nur kombiniert. Jetzt ist es wie ein 153. Was ich tun muss, ist abzüglich der dieser Höhe. Meine Mathematik ist schrecklich. Kann ich es tun? Ist es 97. Oh, ich nehme an, es sind 97. So schlimm meine Mathematik ist. Ich hätte den Rechner herausgezogen, aber ich weiß es nicht. Ich fühlte mich betäubt und fühlte mich, als sollte ich es tun. Die Ränder von links und rechts. Da wir unsere Breite nicht festgelegt haben, haben wir keine Breite festgelegt, also müssen wir sie nicht mindern. Wir können sie einfach hinzufügen. Was wird es sein? Es wird ungefähr 20 Pixel auf dieser Seite sein, 20 Pixel auf dieser Seite. Ehrfürchtig. Jetzt bist du vielleicht so, whoa, kann ich es horizontal zentrieren? Nein, das kannst du nicht. Horizontale Zentrierung ist überraschend schwer. Was Sie tun müssen, ist es nur vortäuschen. Dieser Typ hier. Angenommen, Sie wollen die Höhe und Sie können diesem etwas Höhe hinzufügen. Was ist er? Seine soziale Ikone. Ich könnte ein soziales Symbol finden. Wo bist du? Dort und fügen Sie ein bisschen Polsterung hinzu, weil diese anders sein müssen. Deshalb mache ich es nicht in die Fußzeile. Ich werde ein bisschen Marge nach oben hinzufügen und es einfach so aussehen lassen, als wäre es in der Mitte. Es gibt Möglichkeiten, es zu tun, aber es ist super kompliziert. Urheberrechte. Dieselbe. Ich werde ihm die Höhe hinzufügen. soll so aussehen, als wäre er in der Mitte. Das nächste, was ich tun möchte, ist, Abstand zwischen all diesen Jungs hinzuzufügen. Passt grob. Das, okay, es muss nicht genau sein, aber ich werde es nicht auf dem Bildschirm tun. Geht es heimlich im Hintergrund zu tun. Was ich will, dass du siehst, ob du diese Typen raushalten kannst, ohne es von der Seite hier abzuschieben und alles in Stücke zu fallen. Aber sehen Sie, ob Sie ein wenig Abstand setzen können. Bis zu dir, wie viel. Aber ich würde gerne sehen, ob Sie eine Klasse oder nur eine Klasse erstellen oder an etwas arbeiten können, um diese ein wenig Platz zu schaffen. Sehr viel Glück. Ich weiß, dass du es schaffst, und wenn du es nicht machst und es kaputt machst, es einfach rückgängig und lass es. Sie sehen von selbst gut aus. Aber ich möchte, dass Sie mit mir aufhören und sehen, ob Sie etwas Polsterung hinzufügen können. Gehen wir zum nächsten Video, wo wir anfangen, unsere Vorlage hinzuzufügen. Eine letzte Sache, bevor wir gehen, ist diese große grüne Box. Lassen Sie uns die große grüne Box loswerden. Lassen Sie uns den Haupt und den großen grünen Hintergrund hier finden. Dieser kleine Mülleimer. Speichern Sie alle. Siehe im Browser. Ehrfürchtig, da ist meine Fußzeile unten. Da ist das und jetzt geh los, lass diese Kerle auseinander. Du kannst es tun. 22. So erstellst du eine Vorlage in Adobe Dreamweaver: Hallo, liebenswerte Dreamweaver Leute. Es ist Zeit, eine Vorlage zu erstellen. In diesem Video werden wir dieses Ding hier machen. Es sieht genau so aus wie das letzte Video, aber jetzt heißt es eine.dwt und wir haben dieses Ding namens „editierbare Region“. Was das bedeutet, ist, dass ich viele Seiten erstellen und die Vorlage aktualisieren kann, die meine Kopfzeile und meine Fußzeile hat, und es wird durch und aktualisieren alle Seiten auf einem großen bösen Schlag. Lassen Sie uns lernen, wie Sie das in Dreamweaver tun. Das erste, was ich tun möchte, bevor ich meine Vorlage tatsächlich mache, ist, dass es hier ein bisschen Texte gibt, die ich loswerden möchte. Sie können es in der Codeansicht oder Live-Ansicht tun, es spielt keine Rolle, ich bevorzuge in der Codeansicht, also ist der Text weg. Jetzt werden wir es als Vorlage speichern. Wenn ich hier oben etwas in meiner Live-Ansicht ausgewählt habe und zu „Datei“ gehe, speichern Sie diese Vorlage. Es ist aus irgendeinem Grund ausgegraut. Aber wenn ich hier unten in der Codeansicht klicke und dann zur exakt gleichen Option gehe, erwacht zum Leben, nicht sicher, warum. Beschreibung, ich habe ihm nie eine Beschreibung gegeben. Aber in Bezug auf „Speichern unter“ ist das ziemlich wichtig. Index ist ein schlechter Name dafür und wir werden als Portfolio-Vorlagen aufrufen, und keine Leerzeichen, verwenden Sie keine verrückten Zeichen und klicken Sie auf „Speichern“. Aktualisieren Sie Links, klicken Sie auf „Ja“. Eines der Probleme, die ich hatte, als ich diesen Kurs machte, ist zurück in Video vier, ich unter, „Site“, Ich kam in Websites, unter meinem „Site-Name“, wenn wir dies nennen, Ich habe ein Apostroph s, sowohl in den Website-Namen als auch in den Ordner , die auf meinem Desktop ist und das verursachte Probleme für nichts außer für diese Vorlage. Es war ein bisschen um Augenöffner für mich. Stellen Sie einfach sicher, wenn Sie Probleme mit Ihrer Vorlage haben, dass Sie keine lustigen Zeichen im Site-Namen oder im lokalen Ordnernamen haben. Ich bin mir ziemlich sicher, dass es der lokale Ordnername war, der mir Probleme verursachte. Abbrechen all das, „Fertig“, also wurde die Vorlage gespeichert. Ehrfürchtig. Nun, was tatsächlich passiert ist, ein paar Dinge ist, ein bisschen Code, der hinzugefügt wurde, der vorher nicht da war, können Sie sehen, wie die Vorlage im doppelten Dokumenttitel beginnt. Da wird ein Haufen davon hinzugefügt. Die andere Sache ist, Sie können hier oben sehen, die Erweiterung dwt hinzugefügt wurde. Das ist Dreamweaver-Vorlage. Sie werden auch in unseren Website-Dateien bemerken, Sie können hier sehen, dass ein neuer Ordner, der erstellt wird , und darin ist mein Portfolio. Wenn Sie mit Vorlagen arbeiten, und Sie werden feststellen, dass die Live-Ansicht nicht so gut funktioniert wie früher, immer noch und funktioniert irgendwie, aber es ist ein wenig schwieriger zu verwenden, als es war, wenn es keine Vorlage ist, Das ist kein Problem und ich finde auch, wenn ich es zum ersten Mal generiere, wenn ich es schließe und wieder öffne, wird es sagen: „Warnung“, du hast keine bearbeitbaren Bereiche, und ich bin wie „Cool“, ich muss das beheben. Lassen Sie uns schließen und wieder ein Backup öffnen, [unhörbar] funktioniert wirklich viel besser, schnell die Dreamweaver, schön, wir lieben sie. Nun, was ich tun möchte, ist, ich die bearbeitbare Region brauche, weil in dem Moment, in dem alles Teil der Vorlage ist, und wenn ich neue Seiten basierend auf dieser Vorlage erstellen, wird es nichts geben, was ich tun kann, weil sie alle gesperrt sind. Was ich tun möchte, ist klicken, wo ich werde, denken Sie daran, unsere Hauptinhaltsbox war hier. Du bemerkst, dass ich nicht so hervorgehoben habe : „Hey, es ist eine der Macken.“ Es hat hier unten hervorgehoben. Aber wenn ich zu „Einfügen“, „Vorlage“ in einer Region gehe, denken Sie daran, dass es für die Arbeit in dieser Live-Ansicht nicht mehr funktioniert, also müssen wir ein wenig mehr Codeansicht verwenden. Ich werde diese Jungs hervorheben, hauptsächlich, weil das das bisschen ist, dass ich editierbar sein möchte. Gehen Sie zu „Einfügen“, gehen Sie zu „Vorlage“, und ich werde dies zu meiner „Bearbeitbaren Region“ machen. Wie werden wir es nennen? Bearbeitbare Region drei, „Ich werde nur diesen Hauptinhalt nennen. Klicken Sie auf „OK“. Sie werden sehen, dass es in diesem Tag eingewickelt wird und das wird es erlauben, editierbar zu sein. Lassen Sie uns auf „Speichern“ klicken, und so erstellen Sie eine Vorlage. Im nächsten Video zeigen wir Ihnen, wie Sie eine Seite aus dieser Vorlage generieren. In Ordnung. Gehen wir und machen das jetzt. 23. So erstellst du neue Seiten, die auf einer Dreamweaver-Vorlage basieren: Hey, da. In diesem Tutorial werden wir eine neue Seite basierend auf unserer Vorlage erstellen, die wir gemacht haben , und wenn wir gehen und eine Änderung wie diese machen, schauen, es wird alle anderen Seiten mit der Vorlage verbunden zu aktualisieren und unsere Vorlage Ehrfurcht ist abgeschlossen. Also, um eine Seite aus unserer Vorlage zu machen, werden wir die DWT schließen, die wir geöffnet hatten, dann gehen wir zu „Datei“, „Neu“. Wir klicken hier auf diese Schaltfläche. Wir gehen zu Site-Vorlagen und wir werden Portfolio-Vorlage auswählen. Ja, wir wollen es aktualisieren. Es ist der ganze Grund, warum wir Sie erstellt haben, und Sie können hier sehen, dass wir unser unbenanntes Dokument haben und Sie können alle Codes versteckt sehen, außer unserem Hauptdokument. Sie können sehen, dass es ein bisschen Farbe gibt und es gibt noch ein paar andere Dinge. Der Titel sollte für jede Seite editierbar sein. Das ist also automatisch für uns gemacht und ja. Sie können hier oben sehen, das ist wieder zum Leben erweckt. Aber diese Kerle sind ausgegraut. Nur der Hauptinhalt ist editierbar. Also, jetzt müssen wir es retten. Dies ist, wo es ein bisschen Geist Biegen bekommt. Wir werden uns unsere Akten ansehen. Wir haben diese Indexdatei erstellt. Das ist, was wir für dieses ganze Tutorial getan haben, wir haben unsere Homepage gemacht. Dann haben wir gesagt, wir werden sie in eine Vorlage verwandeln. Das Problem besteht darin, dass die Vorlage nicht mit dieser Indexseite verbunden ist. Dieser Typ hier ist jetzt nutzlos. Wir haben ihn benutzt, er hat das erzeugt, aber sie sind nicht verbunden. Also müssen wir ihn löschen, weil er nicht mit unserer Vorlage verbunden ist. Also, was wir tun werden, ist, dass ich ihn nicht löschen will. Ich mache einen Ordner namens Zold, der alt ist mit einem Z und ich werde nur klicken Sie halten und ziehen Sie sie dort hinein. Ich will ihn nicht löschen, falls es schrecklich schief geht. Hier ist also in meiner alten Zold-Mappe. Was wir jetzt tun müssen, ist diese neue Datei zu speichern, wir nennen ihn Index und speichern ihn. Cool. Seltsam, richtig? Wir haben eine Indexdatei erstellt, um mit zu beginnen, dann mussten wir ihn löschen und ihn neu erstellen, nur damit er mit der Vorlage und jeder neuen Datei verbunden ist , die wir erstellen müssen. Die Seite Kontaktieren Sie uns, die Seite Über uns, alles, was Sie brauchen, ist Datei neu zu gehen und wir müssen aus unserer Vorlage generieren, damit sie alle verbunden sind. Also, jetzt im Rest des Tutorials werden wir durch die Sachen zu Main gehen. Wir werden das ausbauen. Wir werden die Zecken und alle Knöpfe und alle Bilder haben. Aber was ich wirklich tun wollte, bevor wir gehen, ist Ihnen ein paar Vorstellungen darüber zu geben , wie Sie mit Vorlagen arbeiten und wie Sie sicherstellen können, dass Sie keine Probleme bekommen. Am einfachsten ist es, sicherzustellen, dass Sie diese Schaltflächen hier aktualisieren müssen, eine dritte hinzufügen oder mit etwas spielen müssen. Natürlich müssen wir die Vorlage aktualisieren, was eine gute Idee ist. Also „Datei“, „Öffnen“. Sie werden diesen Template-Ordner finden und hier ist meine Vorlage. Wenn Sie die Vorlage aktualisieren, stellen Sie sicher, dass Sie eine andere Seite schließen. Ich habe aus meiner Erfahrung herausgefunden, dass, wenn ich Index geöffnet habe und ich versuche, Änderungen an der Vorlage vorzunehmen, es die meiste Zeit aktualisiert, aber ich habe ein paar Probleme gehabt, also stelle nur sicher, dass nichts anderes geöffnet ist, einfach die Vorlage. Dann gehe ich hier rein und sage dir, mein Freund, dieses Bild hier, ich will es schaffen. Ich weiß es nicht. Ich bin mir nicht sicher, warum ich das tue. Einfach, zum Beispiel, „Datei“, „Speichern“. Es wird sagen, dass ich diese Seiten aktualisieren werde , weil sie auf der Vorlage basieren. Das ist das coole Bit. Das ist das bisschen, das du wie oh Mann bist, das wird viel Zeit sparen, besonders wenn es eine lange Liste gibt. Es hat ungefähr 500 Seiten und du sagst, sie alle zu aktualisieren, bitte. Ich klicke auf „Schließen“ und es ist weg und aktualisiert sie. Also werde ich die Vorlage schließen und meinen Index öffnen. Sie werden hoffentlich sehen, dass er aktualisiert wird. Ehrfürchtig. Ich drehe es zurück, schließe das. Öffne die Vorlage, also lass ihn einfach ganz alleine öffnen. Hier unten war er 803. Speichern, aktualisieren, alle diese Kerle schließen es ab. Fertig. Du weißt, was passieren wird. Es ist aktualisiert. Also haben wir eine Vorlage erstellt. Lass uns es mit Ehrfurcht füllen. Wir sehen uns im nächsten Video. 24. So erstellst du ein dynamische Hero Box für deine Website in Dreamweaver: Hallo, In diesem Video werden wir unsere responsive Hero-Box starten , die in unserer Vorlage ist. Vielleicht schauen Sie und gehen: „Ich kann nur zwei Dinge sehen.“ Ja, wir schaffen nur zwei Dinge in diesem einen, aber es gibt ein bisschen zugrunde liegende Struktur, die wir schaffen müssen. Wir müssen unsere Hero-Content-Box erstellen, und wir werden einige wiederverwendbare schwebende Klassen erstellen, alle möglichen anderen fantastischen, also gehen wir und tun das jetzt. Ich habe meine index.html geöffnet, also werde ich anfangen, meine Seite auszufüllen. Dies ist mit einer Vorlage verbunden, so dass Sie sehen können, dass all das Zeug ausgegraut ist, und ich kann in diesem Haupt-Tag hier arbeiten. Es ist ziemlich einfach, klicken Sie einfach irgendwo hinein, und das ist die einzige editierbare Box auf dieser Seite. Wir werden hier an diesem Teil arbeiten, also wird es der Heldeninhalt genannt. Wir haben dieses Heldenbild im Hintergrund. Wir brauchen uns keine Sorgen um ihn zu machen. Wir haben ihn in früheren Tutorial erledigt. Wir müssen uns nur um das Zeug hier kümmern, und es wird universell sein, also wird es hier auf dieser Seite sein. Er wird die Takes aktualisieren, je nachdem, welche Art von Seite es ist. Wir werden beginnen, indem wir unser Hero-Content-Div-Tag einfügen, und dann werden wir aufhören, die Bilder und Text einzugeben , also lasst uns anfangen. Mit dem ausgewählten, werde ich zu Einfügen gehen, wir werden ein div einfügen, ich gehe innen verschachtelt, und ich werde es für den Moment verlassen. Ich werde einen CSS-Stil erstellen. Es wird in styles.CSS sein. Es wird global sein und die Auswahl wird eine Klasse sein. Denken Sie daran, dass es am Anfang zu stoppen, und dieser wird als Heldeninhalt bezeichnet werden. Was wird es tun, es wird eine ganze Menge tun. Sie können sehen, dass es von oben nach unten gedrückt wird und von links weg ist. Ich habe es bereits gemessen, also werde ich einen Rand oben hier von drei Pixeln machen, und auf dieser linken Seite hier, 100 Pixel. Hoffentlich passiert, wenn ich alles retten, nichts. Warum passiert es nicht? Es liegt daran, dass ich es noch nicht angewendet habe. Ich habe die Klasse erstellt und ein div erstellt, aber ich habe sie nicht verbunden. Ich werde das hier tun. Dieser wird eigentlich als Heldeninhalt bezeichnet. Schön, also drückt es nach unten und schiebt ab. Schön. Das nächste, was ich tun möchte, ist mit meinem Heldeninhalt ausgewählt, ich werde dieses Bild einfügen. Ich werde es drinnen verschachteln. Danke. Ich gehe zu meinen Übungsdateien, Bildern, und finden Sie auf der Unterseite gleich Häkchen. Es ist nicht an der richtigen Stelle. Kopieren Sie es über, ja, bitte. Das wird auf Bilder gehen. Vielen Dank. Es ist gerettet. Schön. Wenn Sie nun ein neues Bild einfügen, stellen Sie sicher, dass Sie den Alt-Text einfügen. Dies wird etwas Keyword-freundlich sein ohne Ihre Website voll von Schlüsselwörtern zu stopfen, denke ich. Dieser wird freiberuflich sein, und Web-Design verfügbar. Auslaufen der guten Schlüsselwort denken Dinge sowieso. Der Link, dieser hier wird keinen Link haben, da er sowieso nicht gehen wird, cool. Lassen Sie uns abklicken, klicken Sie auf das Hamburger-Menü, und das nächste, was wir in einem Text setzen. Jetzt könntest du anfangen, diesen Platzhalter zu verwenden, aber es wird uns etwas Drama geben. Es ist besser, P-Tags zu verwenden, anstatt zu sehen, dass dieser Text hier kein Tag enthält. Daher ist es besser, mit einem P-Tag zu arbeiten. Ich klicke auf dieses Bild, ich werde HTML einfügen, ich werde hier nach unten gehen, um P Tag zu finden. Ich werde nicht da runtergehen, da ist es da, und ich werde es gleich danach kriegen, cool. In diesem P-Tags, werde ich klicken, um es geht orange um die Außenseite, und tatsächlich nur gehen, um den Text von hier zu kopieren und einfügen. Cool. Dieser Text nach unten er ist nicht mehr so nützlich, also werde ich all das auswählen und löschen. Es war der Ort Autotext für dieses ursprüngliche div, das wenig es braucht. Ich erinnere mich, dass es einen geschützten Raum gibt, er wird angehoben, hält das Etikett offen. Das brauche ich nicht. Sie stapeln sich untereinander. Wir werden die Farbe in einer Sekunde stylen, weil sie schwarz ist und ich denke, dass es zu sehen war. Aber Sie können standardmäßig sehen, dass sie übereinander stapeln wollen, das passiert die ganze Zeit. Jetzt werden wir das reparieren, wie wir es hier unten für die Fußzeile getan haben. Während ein Fuß ein Mitglied, schwebten wir links und rechts. Nun, was wir unten getan haben, ist, dass wir einige spezifische Tags zu verwenden hatten. Wir hatten ähnliche soziale Symbole in unserem Copyright, und wir flogen diese Tags nach links und rechts. Das Problem ist, dass wir das jetzt wieder tun müssen, und wir sagen: „Wäre es nicht schön, wie ein universelles Tag zu erstellen , das wir auf dieses P-Tag anwenden könnten.“ Weil Sie mehr als eine Klasse hinzufügen können. Dieses Bild hier möchte ich eine Float Lift-Klasse anwenden und diese ein Float rechts. Wir werden das als eine wiederverwendbare Sache erstellen, anstatt hart in diese Klassen zu codieren, was in Ordnung, aber nicht sehr wiederverwendbar war. Lassen Sie uns zuerst eine Klasse erstellen. Wir gehen zum CSS-Designer, stellen sicher, dass wir auf allen CSS-Stile sind, stellen Sie sicher, dass ich global bin, wählen Sie das aus und wir werden diesen einen Punkt float nennen, Bindestrich heben, und sein Job wird schweben Lift sein. Dann werden wir eine weitere erstellen, die Float genannt wird. Er wird rechts schweben, das wird sein Job sein. Cool. Jetzt müssen wir es nur anwenden, also greifen wir hier die Zecke und sagen dir mein Freund, wo ist er? Das da, nein. Du, mein Freund. Wir werden auf Plus klicken, und wir werden sagen, Float. Sie können sehen, es ist einfach faul, und jetzt können wir dieses Ding wiederverwenden, heben. Dieses Ding zerquetscht darunter, aber es ist ein bisschen gefangen. Wenn du jetzt zusiehst, meinst du vielleicht : „Warum sollte er es richtig schweben?“ Ich habe keine Ahnung. Ich will nicht, dass es richtig schwebt, ich will dieses Universal-Tag, also werde ich es dort lassen, aber das ist total meine Schuld. Was ich eigentlich will, ist, dass sie beide links schweben. Das Schöne daran ist, wenn sie links schweben, werden sie nebeneinander knallen. Sie können sehen, was passiert ist, wenn Sie beide nach links schweben, sie sitzen nebeneinander. Wenn Sie nur einen drehen, versucht der andere, sich darunter zu schleichen, und es verursacht viele Probleme. Stellen Sie sicher, dass Sie beide nach links und rechts drehen. Als nächstes möchte ich diesen Text hier stylen. Jetzt könnte ich wahrscheinlich eine Verbindung auswählen und P-Tags sagen, die sich innerhalb der Hero-Box befinden. Aber schauen wir uns das Design an. Ich könnte P-Tags wieder anders verwenden, und dieses hier, hier stoßen Sie auf Probleme. Du wirst okay sein und du sagst: „Oh, ich mache keine neue Klasse damit, weil es hier nur ein P-Tag gibt.“ Aber später im Design sagt man: „Oh, es wird zwei verschiedene P-Tags sein, und wir brauchen ein bisschen mehr Spezifität. Was wir tun werden, ist, dass wir eine Klasse erstellen, lassen Sie uns Stile klicken, lassen Sie uns global treten, klicken Sie auf Selektor, und lassen Sie uns einen vollen Stopp setzen, und lassen Sie uns die Verfügbarkeit setzen, und wir werden ein paar Dinge. Wir gehen, um die Farbe von Illustrator zu stehlen, so dass der Text ausgewählt. Wir könnten unsere Fenster CSS-Eigenschaften verwenden. Ich weiß nicht, dass ich diesen Weg gegangen bin. Es ist eine andere Art, es anzusehen. Lassen Sie uns auf die Farbe doppelklicken, kopieren Sie sie zurück in Dreamweaver, und ich möchte, dass meine Textfarbe für diesen hier Hicks-Hash ist, und das jetzt zurückkehrt und lassen Sie es uns anwenden. Hier drüben mein P-Tag, es wird Float links haben, aber wir werden auch haben, wir werden ein weiteres kalt.Verfügbarkeit hinzufügen. Es können mehr als ein Tag angewendet werden. Das nächste, was ich tun werde, ist mit den Rändern zu spielen , weil es nicht wirklich richtig sitzt. Was wir tun werden, ist zu diesem ersten zu gehen, jetzt zu den Margen zu gehen. Dieser hier wird ungefähr sieben sein. Du wirst bemerken, dass es hochgegangen ist. Höhle Sieben von oben, standardmäßig richtet sich nach unten auf der Grundlinie. Manchmal spielst du herum und du wirst sagen : „Hey, ja, von oben zu schlagen macht Sinn.“ Aber dann geht es so hoch wie dort. Aber mach dir keine Sorgen. Links auf dieser Seite, werden wir 15 machen. Ich habe diese auch vom Illustrator gemessen. Wir kommen dorthin. Speichern Sie es. Lassen Sie uns nur eine Vorschau und einen Browser. Doppelte Kontrolle, es funktioniert alles, sieht gut aus. Lass uns dieses H1 hineinlegen, das hier dieser große Brocken ist. Ich werde mir nur den Text schnappen, während ich hier bin, und es wird das hineinbringen. Eigentlich, bevor wir weitermachen, werden wir einfach dieses Video hier schneiden, weil wir schauen, um den Schwimmer zu löschen. Ich möchte das in ein separates Video verwandeln, weil Sie wahrscheinlich zu zurückkommen müssen, um es später zu tun. Da das Löschen des Floats leicht zu verstehen ist, aber schwer, sich an die Syntax zu erinnern so dass wir das als ein nettes kleines Bundle-Video im nächsten behalten werden, lass uns das tun. 25. So behebst du Probleme mit Div-Tags, wenn du in Dreamweaver nach links driftest, so aktivierst du das Schweben: Hallo, da. Dieses Video ist hier, um den Tag zu retten. Sie haben eine Website, auf der Sie float verwendet haben und es wird auf etwas angewendet. Nun versucht das Objekt darunter, sich darunter zu schleichen und sich im Allgemeinen nur schlecht verhalten. Wir werden dies mit etwas beheben, das heißt das Löschen des Floats und es wird magisch den H1 so nach unten drücken. Lassen Sie uns lernen, wie Sie das jetzt in Dreamweaver tun. Das erste, was ist, lassen Sie uns [unhörbar] H1 setzen. Ich werde hier auf mein p Tag klicken. Ich klicke hier sehr gerne auf diese Tag-Selektoren unten, also greift es den Anfang und das Ende. Ich finde, es ist immer einfach, wenn Sie anfangen, Dinge mit der Design-Live-Ansicht einzufügen. Einfügen Panel, Gehen wir zur Überschrift H1. Klicken Sie noch einmal darauf, und ich möchte kurz danach bitte und Sie können sehen, dass dies das Problem ist. Die H1 will sich wirklich unter diese beiden Elemente schleichen, die wir dort reingesteckt haben. Der Grund ist, weil wir diese beiden Jungs schwebten und die Art, wie ich es denke, ist, denken Sie daran, dass Float es von der Seite zu uns zieht und die H1 schleicht sich darunter ein, weil sie nicht mehr bewusst sind, weil sie geschoben wurden. Um es zu beheben, machen wir etwas, das heißt das Löschen des Schwimmers. Es bedeutet nur, hey, ich will, dass du nach oben schaust und da schwebt ein paar Jungs über dir. Ich will nicht, dass du sie ignorierst, wie du es gerade bist. Tolles Beispiel, nein, ich konnte mir keinen besseren Weg vorstellen, es zu erklären, aber lasst uns diesem H1 eine Klasse hinzufügen, um zu sagen, hey, es gibt einen Schwimmer los und normal sein. Zuerst machen wir die Klasse. Es heißt CSS Designer, styles.CSS, nichts funktioniert. Gehen Sie zu All styles.CSS GLOBAL und wir werden einen Selektor erstellen. Rufen Sie alles an, was Sie möchten. Wir werden es als „Clear Float“ nennen. Seine Hauptaufgabe besteht darin, den Schwimmer auf beiden zu löschen. Jetzt müssen wir es unsere H1 anwenden. Ich gehe hier rein, Clearfloat. Wann immer Sie gerade darunter schwimmen, müssen Sie den Schwimmer löschen. Jetzt ist das ein vernünftiges Tag. Wir können das immer und immer wieder nutzen. Wenn ich etwas unter das H1 lege, muss ich den Schwimmer nicht löschen. Das ist wie ein Ein-Hit. Immer wenn es einen klaren Schwimmer drunter gibt, müssen wir ihn löschen. Dann müssen wir es nicht wieder tun, bis wir wieder aufhören zu flirten. Sie werden wissen, wann Sie es tun müssen, weil Dinge, die wir unser H1 gerne tun würden. Lasst uns auf ein paar andere Details gehen. Als nächstes wird dies hier aufgenommen, und wir werden anfangen, ich mag es, den Text aus irgendeinem Grund in die Codeansicht zu setzen, besser. Sie wissen auch, dass wir hier ein kaufmännisches Und-Zeichen verwendet haben. Ampersand-Encodierung ist normalerweise in Ordnung. Sie können sehen, dass es gut angezeigt wird, aber einige ältere Browser, es wird keinen guten Tag haben. Sie können sehen, dass Dreamweaver, wenn ich es dort eintippe, sagt, dass es rot schlecht ist. Die Code-Version von [unhörbar] okay, die [unhörbar] ist tatsächlich und amp, also AMP und dann ein Semikolon. Ich weiß, es ist seltsam. Aber im Leben bekommen Sie immer noch Ihre [unhörbar] Aber es wird niemanden Web-Browser brechen. Aber wenn Sie eine Website haben und Sie viele und viele Texte einfügen. Ich habe es vorher getan und ich bin nie in Schwierigkeiten geraten. Deshalb wurde es sowieso geschrieben. Eines der Dinge, die ich tun möchte, ist in Illustrator getroffen. Ich habe es in drei Zeilen zerbrochen. Jetzt habe ich zwei Möglichkeiten, dies zu tun. Ein guter Weg in den schlechten Weg. Der schlechte Weg ist, wenn ich zu dem, was ich brechen würde es brach Kreuz Kiwi.Okay. Wenn ich zur Benutzeroberfläche gehe, doppelklicken Sie auf und ich werde „Return“ drücken, der Unterschied und ein anderer ist designerbasiert. Ich werde eine Rückkehr und hier, schreiben Sie den Code. Das funktioniert. Aber Sie können hier meinen Code sehen, ich habe jetzt drei H1's. Das ist kein guter Plan. Warum? Weil ich jetzt gehen und diese alten separat installieren müssen. Es war keine große Sache, aber auch, wenn es um Suchmaschinen geht, sieht es, so sagen Google-Suchmaschine kommt zu mir und sagt: „Hey, es gibt einen Titel namens Ich bin ein Kiwi“. Es sagt UI und UX Design up. Sie sehen sie als separate Blöcke, also ist es schön und einfach, anstelle von Renditen zu setzen, ich werde diese alle zusammen rückgängig machen. Geh hier wieder rein. Direkt vor der Benutzeroberfläche halte ich „Shift“ auf meiner Tastatur gedrückt und drücke Return auf meiner Tastentastatur. Was du sehen wirst, ist, dass ich es dort mache, und dann klicke ich hier unten und du wirst sehen, dass du diese hellen Charaktere bekommst. Ich zeige Ihnen sie aus ein paar Gründen, ist, dass Sie kopieren und einfügen Dinge aus Bits und Stücken und Sie würden wie „Was zur Hölle ist ein BI?“ Es ist wie, wenn Sie ein Grafikdesigner sind, es ist eine Verschiebung um zehn okay, oder eine weiche für zehn, oder sie nennen sie alle Arten von verschiedenen Dingen. Im Web Land ist es Viertel BI oder Pause. Es bedeutet nur, dass es immer noch rot ist als ein komplettes H1 nur mit ein paar Zeilenumbrüchen da drin. Das nächste, was ich tun werde, ist, dass ich dieses HI hier stylen werde ich zu Styles global select gehen, und ich werde nur H1 eingeben. Denken Sie daran, bereits existierende Tags, die wir nicht wie das H1 und das Bild-Tag geschrieben haben, wird das BI, haben keine vollständigen Stopps vor ihnen, wenn Sie fragen, Styling sie. H1, ich würde gerne ein paar Dinge tun. Wahrscheinlich am einfachsten ist es, die Farbe wird weiß sein. Ich glaube, es ist weiß. Was ich auch gerne tun würde, ist die Schriftart zu aktualisieren. Nun, eigentlich lasst uns zuerst die Größe machen, denn das ist eine nette, einfache. Dann werden wir uns einige der Probleme ansehen, wenn es um 80 geht. Hält in zweistelligen Zahlen. Was ist die richtige Größe? Ich möchte diese Schriftart hier verwenden, und es ist etwas namens Playfair. Ich werde gehen und das benutzen. Nun, ich kann durch, und wir hatten dies früher im Kurs getan erinnern. Wir gingen zu tippen, und wir gingen zur Schriftfamilie, und wir gingen, um Schriftarten zu verwalten, und wir haben das getan. Nun, das wird in diesem Fall nicht funktionieren, weil es so viel von dem Head-Tag zu tun hat. Denken Sie daran, hier oben, es muss all dieses Zeug hier hinzufügen, wo es steht, hier sind die Web-Age-Schriftarten, also muss es in hier sind die Web-Age-Schriftarten, der Lage sein, dieses Zeug zu bearbeiten. Wir schließen keine Indexseite und öffnen die Vorlage. Sparen Sie, ja. Ich werde meine Vorlage öffnen. Das war's, und mach es hier drin. Es gibt nur ein paar Dinge, die während Ihres Web-Build passieren werden. Jetzt, wo Sie eine Vorlage haben, müssen Sie zum Vorlagenordner zurückkehren. Tun Sie es und wenn Sie in Schwierigkeiten geraten und Sie mögen: „Vielleicht, wenn ich es auf der Vorlage mache“, gehen Sie zurück zu der Vorlage versucht in der Luft, Sie könnten feststellen, dass es das Problem behebt, das Sie haben. Vorlage, ich werde tatsächlich CC-Bibliotheken einfügen. Beachten Sie, dass wir den CC Designer ein Klavier schlagen und habe ich ein H1? Ich habe noch nicht, also werde ich ein H1 haben, H3 ist da, ich lüge. Typ: Wir haben sie gerade Schriftfamilie gemacht und es wird Schriftarten verwalten. Das ist eine hier heißt Playfair Display. Ich werde sie ankreuzen und auf „Fertig“ klicken. Nichts passiert wirklich. Dann gehe ich los und klicke auf den „Playfair“. Ehrfürchtig. Es fügt ein paar Eigenschaften für Sie hinzu, damit es funktioniert. Es sagt dir hier oben, dass es diejenigen hinzugefügt hat, die gehen und ich klicke auf „Alle retten“. Es wird das Indexupdate aktualisieren, bitte. Ja, bitte. Sie können den Code ändern, der als nicht integraler verspottet wird. Du sagst ja. Klicken Sie auf „Schließen“, schließen Sie die Vorlage, und hoffentlich jetzt, wenn wir unseren Index öffnen. Es ist unser Playfair. Denken Sie daran, wenn etwas nicht funktioniert, müssen Sie möglicherweise gehen und es in der Vorlage tun. Der Grund, warum ich dieses besondere Problem kenne, ist, weil ich bei der Gestaltung dieses Kurses versucht habe, es hier zu tun, meine Indexseite, und es hat nicht funktioniert. Ich springe zurück in die Vorlage und es tat. Das Letzte, was ich tun werde, bevor wir gehen, ist und es wird mit als Zeilenabstand spielen. Es sollte mir keine Sorgen machen, aber es gibt eine große Lücke zwischen diesen. Denken Sie daran, früher haben wir in und wenn ich hier klicken, setzen wir ihm helle Charaktere. Der Zeilenabstand wird in diesem Fall funktionieren, wenn es separate H1s gab, muss ich den Rand zwischen diesen H1s verwenden. Wir verwenden die aktuelle Sache jetzt, weil ich will, ich denke, bekommen Sie, dass zu verwenden, weil, wie Sie besser werden, wird dies mehr und mehr nützlich von Dreamweaver ist Ich habe die hier ausgewählt und wenn ich auf „Aktuell“ hier unten klicke, es schneidet es auf die berechneten, was nur bedeutet, dass alles, was sich auf das auswirkt, was Sie ausgewählt haben, verfügbar ist , so dass es die weniger Quadraten alle nach einer Weile abschneidet, die Sie am Ende mit einem 3D. Ich habe Websites und dann einfach auswählen, wie Liste enorm verbunden ist. Strom wird super nützlich. Wir mögen tatsächlich klicken Sie darauf und es gibt Ihnen nur das Zeug, das sich darauf bezieht. In meinem Fall wendet sich clearfix an, aber es ist nicht derjenige, den ich will. H1 wendet sich an, Ehrfürchtig. Was ich tun möchte, ist zu tippen, und ich möchte mit Zeilenhöhe herumspielen. Ich werde Pixel verwenden, Null Pixel. Ich wollte auf „Halten“ klicken und ziehen. Es ist eines der anderen netten Dinge, die Dreamweaver ist , dass Sie anstatt es jedes Mal eingeben zu müssen, klicken und ziehen können, um ein bisschen mehr ein Designer hier zu sein. Ja, vielleicht damit. Speichern Sie alles. Das wird es für dieses Video sein. Es ist ziemlich episch lang, und lasst uns den Rest dieser Seite aufbauen. Wir sehen uns im nächsten Video. 26. So fügst du das Styling einer horizontalen Linie in Dreamweaver hinzu und so änderst du es: Hi, da. In diesem Tutorial werden wir diese weiße Linie machen. Es nennt man horizontale Straßen. Es ist nicht schwer, aber es gibt ein Standard-Styling, das wir danach ändern möchten. Machen wir es jetzt in Dreamweaver. Lassen Sie uns zunächst die horizontale Regel eintragen, also wird sie ein hr-Tag genannt. Das nennt man es. Ich werde mein H1 stecken, das ist mein Schlag, weil ich damit aufhören will. Ich gehe zu „Einfügen eines HTML“ und den ganzen Weg unten unten, rechts unten wird horizontale Zeile genannt. Lassen Sie uns darauf klicken, rutschen Sie da runter. Eigentlich landete meins mitten in meinem Text, ich werde rückgängig machen. Das passiert dir. Klicken Sie auf das „H_1". Stellen Sie sicher, dass es hier unten in Ihrer Tag-Selektor ausgewählt ist , und klicken Sie dann auf horizontale Zeile. Ich will gehen, um zu gefallen, und dann gibt es da, ist meine horizontale Regel. Jetzt werde ich dies in einem Browser in einer Vorschau anzeigen, denn standardmäßig kommt die horizontale Zeile mit etwas Hässlichkeit, also lasst uns gehen und es in einem Browser überprüfen. Nun, es ist ein wenig schwer zu sehen, aber es ist eigentlich das, was heißt „Inset“ oder „Bivalent Emboss“ für die Photoshop-Leute. Wenn ich Lasten heranzoomen, werden Sie anfangen, das Styling darauf zu sehen. Also hier unten, da ist er da. Sie können sehen, dass es halb weiß, halb grau ist, und wie ein kleiner Meißel hier drin ist. Ich mag es nicht. kannst du sehen. Sie können Zeit sparen und einfach mit dem nächsten Tutorial fortfahren. Ich mag es nicht und ich möchte es stylen. Wir werden mit diesem HR beginnen. Das ist es, was als horizontale Regel betrachtet wird. Eines der wenigen Tags, die keinen Anfang und ein Ende wie ein h1 haben, hat eine offene und eine enge und HR mag dieses br-Tag nicht als einige, die es nicht tun. Lassen Sie uns voran und stylen Sie es unter CSS Designer: Stile, global select ist, es wird HR genannt werden. Weil es eines dieser bereits existierenden ist, wo wir es nicht wie die h1 geschrieben haben, etwas, das bereits in HTML existiert. Wir müssen die Periode nicht voran stellen. Es hat alles mit Grenze zu tun. Mit Rahmen werden wir Stil standardmäßig sagen, es ist eingebaut. Wir werden sagen, so bitte Farbe. Ich glaube, es ist wie ein gebrochenes Weiß. Standardmäßig werde ich es weiß machen und dann werde ich alles schön in meinem Browser speichern und sehen, was ich hier mag. Ist es dünn genug? Sie können hier mit der Breite spielen. Ich lege es auf 1.2, spiele mit den Pixeln. Ich bin glücklich mit der Art, wie es ist. So erstellen Sie eine Linie. Es ist ein langes Tutorial für nur eine Zeile, aber wir wollen, dass es eine hübsche Linie ist. Dann gehen wir zum nächsten Tutorial. 27. So erstellst du einen Button in Adobe Dreamweaver CC: Hallo, da. In diesem Tutorial werden wir diesen roten Knopf machen. Wir werden coole Dinge tun, bei denen wir vorhandenes CSS von anderen Klassen ausleihen und einige Klassen wiederverwendet haben, keine Beleidigung bekommen. Gehen wir und machen das jetzt. Also das erste, was ist, lassen Sie uns in einen Knopf setzen. Nun, ich wollte kurz nach dieser horizontalen Regel sein, also klicken Sie darauf. Es gibt keinen Einfügeknopf. Es ist also nur ein Hyperlink, den wir mit etwas Polsterung und einigen Hintergrundfarben stylen , die wie eine Schaltfläche aussehen. Der Knopf ist dieser Typ hier. Es ist also sehr ähnlich wie dieser hier oben, den wir für unser Navi benutzt haben. Also werden wir tatsächlich CSS davon ausleihen, um etwas Zeit zu sparen. Also unsere horizontale Regel hier oben in meiner Live-Ansicht ausgewählt und ich werde Einfügen, Hyperlink, es wird sagen, nach, und dann werde ich dieses nennen Let's Talk. Cool, verlinkt. Denken Sie daran, dass wir den Namen für die Seite noch nicht haben, also werde ich nur Hash verwenden, Ziel Ich möchte, dass es selbst ist, also lassen wir es leer, welches Selbst ist der Standard und der Titel, das ist gut für Suchmaschinen. So sieht es diese Schaltfläche und „Let's Talk“ ist nicht besonders nützlich, um zu wissen, was passiert, also geben wir ihm einige weitere Informationen. Wir stellen sicher, dass es schlüsselwortfreundlich ist. Das wird also Daniel Walter Scott sein, denn ich werde der UX-UI-Designer sein, für den ich in Google einstufen möchte , kontaktieren Sie uns. Warum ist es in Hauptstädten? Weil ich die Feststelltaste eingeschaltet habe, sollte es wahrscheinlich nur Titelfall sein, aber ich bin damit einverstanden. Niemand sieht das im Hintergrund über die Suchmaschinen. Also, jetzt gehen wir und stylen es und die coole Sache daran ist, dass wir, wenn Sie sich erinnern, eine Klasse namens roten Knopf und grünen Knopf gemacht haben. Also müssen wir das wiederverwenden. Also bekomme ich zum [unhörbaren] Tag. Dies ist, wo wir anfangen, Dinge wiederzuverwenden, und das ist schön, wenn Sie zu diesem Punkt der Website kommen, wo wie, eine Menge der harten Arbeit getan ist, Sie beginnen, Dinge wiederzuverwenden, anstatt immer versuchen, neue Klassen zu erstellen. Also, jetzt bekommen wir zu gehen Punkt und dieses, denken Sie daran, dass wir es btn am Anfang genannt haben, um es einfach zu finden, Knopf lesen. Cool. Es hat also einen roten Hintergrund. Jetzt kam dieser Knopf rot nicht mit der ganzen Polsterung zusammen. Wir haben das getrennt gemacht, wenn du dich daran erinnerst. Also werde ich das CSS von dieser Schaltfläche stehlen. Jetzt können wir es hier auf der Indexseite nicht tun , weil es Teil der Vorlage ist und Sie einfach nicht zulassen. Wenn ich darauf klicke, erhalten Sie ein CSS Design ein Panel. Lassen Sie mich das alles ausschalten. Also ja, gut auf uns und es funktioniert einfach nicht wirklich. Also müssen wir diese Vorlage öffnen und dann hier werde ich zum aktuellen wechseln. Remember Current erlaubt mir, auf etwas zu klicken und es gibt mir tatsächlich die Klassen, die angewendet werden könnten, und es ist zufällig diese Top. Ich weiß, denn wenn ich auf Set anzeigen klicke, wird es mir die Dinge zeigen, die auf diese bestimmte Klasse angewendet werden und nicht alles und ja, Sie können die Polsterung und die Textfarbe sehen und die Unterstreichung entfernen. Das ist also alles, was wir brauchen. Es gibt also eine coole Funktion. Wir können mit der rechten Maustaste darauf klicken und sagen, alle Stile kopieren. Es gab hier eine Option, auch das nur die Textstile, die wir nur erlaubt haben, abhängig davon, was Sie wollen, aber ich möchte alle Stile. Cool. Vielen Dank Vorlage. Jetzt werde ich es darauf anwenden. Jetzt könnte ich hier hineingehen und eine andere Klasse erstellen und sie damit stylen. Ich werde ein bisschen einfallsreicher sein und einen Compound-Selektor verwenden. Also, was ich sagen werde, ist, wenn es einen roten Knopf in dieser haarigen Box gibt, dann wenden Sie diesen Text an. Also gehen Sie vielleicht von Current zu All. Es gibt Stile, global, machen Sie einen Selektor. Es sind ausgesuchte Teile davon. Also, was will ich? Sie werden bemerken, dass es nicht in das „A“ -Tag gesetzt hat. Also lassen Sie es in Knopf-Rot und Helden-Inhalt, aber nicht das a-Tag. Lassen Sie uns einfach eine Arbeit überprüfen. Manchmal tun sie das, manchmal nicht. Also, wenn es ausgewählt ist, werde ich mit der rechten Maustaste darauf klicken und sagen, Stile einfügen, eine Magie. Es funktioniert also. Jetzt ist es an der Zeit, etwas Abstand zwischen dieser horizontalen Regel zu setzen , weil sie daneben konifiziert ist. Also möchte ich, dass Sie jetzt auf die Pause-Taste gehen, Pause drücken und ich möchte, dass Sie darüber nachdenken, wie Sie es tun. Du kannst gehen und es versuchen. Das ist, was ich tue und sehe, ob du es ausprobieren kannst. Sie können rückgängig machen, wenn es nicht funktioniert. Drücken Sie es rückgängig, und Sie können den Rest dieses Videos ansehen. Aber kommen Sie hier runter, wo immer es ist, halten Sie den Knopf an und denken Sie nach. Geh jetzt. Du hältst keine inne. Was ich tun würde, gibt es tatsächlich ein paar Dinge, die du tun könntest. Wir könnten diese Klasse hier machen, und es war ein Rand an der Spitze, oder wir könnten diese horizontale Regel hier verwenden. Ich werde die horizontale Regel vor allem tun, weil ich auf einen Sprung schaue, eigentlich möchte ich den Raum zwischen dort und darunter machen. Also, anstatt sie separat zu tun, bin ich auch nur durch die horizontale Reihe hier. Gehen Sie zum aktuellen, da ist meine hr und ich schalte Show Set aus, so dass ich sie alle sehen und ich werde zum Layout gehen und ich möchte vielleicht minus einen Rand der Spitze, indem Sie einfach klicken, halten und ziehen und eine Last an der Unterseite dort legen. So oder so hätte funktioniert, diese zusammengesetzte Klasse, die wir verwendet haben, hätten Sie eine neue Klasse erstellen können, die Abstand gemacht hat, das seltsam, aber es würde funktionieren. Aber was ich tat, war, ich habe eine horizontale Regel gemacht, um mit beiden Seiten zu spielen. Komm rein und lass uns alles retten. 28. So änderst du Zeichenabstände auf einer Website für Tablets und Mobilgeräte mit Dreamweaver: Okay, in diesem Video wollen wir unsere Desktop-Ansicht, die wir hier haben. Aber wenn es auf Tablet kommt, werden wir diesen Heldeninhalt hier anpassen. Also werden wir mit dem Padding spielen, ändern Sie die Schriftgröße nach unten Handy noch mehr. Okay, wir ändern die Schriftgröße noch kleiner. Passen Sie die Zeilenhöhe an und wir machen alles zentriert cool, also zentriert nicht zentrierten großen Text. Jetzt wollen wir einige Updates für unser Responsive Design machen und wir haben diese Art von Hero Box für Desktop entworfen. Wenn es auf Tablet kommt, gibt es ein paar Änderungen, einer von ihnen ist Streicheln von der Seite hier ändert sich, es wird irgendwie flach und die Schriftgröße wird kleiner. Schriftgröße wird noch kleiner als ein Handy und wird zentriert und ich habe diese Zeile hier auf Mobilgeräten deaktiviert. Nur ich mochte das Aussehen nicht, wenn ich zum Handy gehe , weil all das zentriert war. Gehen wir und machen das jetzt in Dreamweaver. In Ordnung, ersten Schritt gehen wir mit der Polsterung in Angriff. Wir haben den einzelnen Heldeninhalt, der umschließt, gut meine Heldeninhalte und so werden wir das Padding hinzufügen. Desktop, es ist in Ordnung. Jetzt gehen wir runter zum Tablet. Wir werden auf die kleine farbige Linie klicken, die wir brauchen springen oder Sie können einfach ziehen Sie diese, denken Sie daran. Wir sind in Tabletten und ich möchte das jetzt in meinem Design an den Rand bringen und illustrieren vorwärts Art von Flush gegen diese Blackbox, aber wenn ich hier in Dreamweaver bin und ich das für euch praktizierte. Ich will es ungefähr 25 Pixel haben, welche Art von Linien mit seinem Logo Maulwurf. Das ist eine der kreativen Freiheiten des Seins der Designer und des Entwicklers. Ok? Wenn ich das für jemand anderem entwarf und sie mir einen Photoshop gaben oder ein Mock-up illustrieren. Ich mache es genau so, wie es ihnen gefallen hat. Was wir tun werden, ist Stile CSS wird es für Tablet tun und wir werden erstellen, es gibt keine Auswahl im Moment für hier sind Inhalte. Wir sagen, Punkt-Helden Inhalt. Ja, bitte. Ich möchte, dass Sie einen Rand von 25 Pixeln haben. Aber um diese Seite zu bekommen, und wieder auf den anderen Seiten, 25 Pixel schön. Lässt den Abstand machen, auch für das Handy. Hier unten, okay, es ist zurück auf 100 Pixel, was mein Desktop war. Ich werde sagen, Styles, Mobiler Sektor. Hier Inhalt und wir werden Ihnen sagen, mein Freund, auch wenn das hier Null ist. Aber vielleicht haben Sie eine Art wie geben Sie es wieder ein, weil Null nur bedeutet, dass wir an der Standardeinstellung angehoben haben und der Standard ist unter Pixeln wie für die Desktops. Zero diese Seite, Null auf dieser Seite. Schön, genial, da die Schriftart offensichtlich ist, dass großes Problem als nächstes besonders, wenn es oben ist. Wir werden Tablet zuerst tun, und was wir tun werden, ist auf einer Tablet-Ansicht, wir werden die H1 starten. Okay, also das H1, wenn es in Tableview ist, möchte ich, dass Sie eine Schriftgröße oder Schriftgröße haben und jetzt sollte ich in Illustrator einchecken. Ich schätze. Das scheint okay, vielleicht ein bisschen klein. Die andere Sache, die ich tun muss, ist mit meinem Zeilenabstand zu spielen, okay, gut meine Zeilenhöhe und Pixel Null, und ich werde das zu etwas bringen. Alles klar, machen wir es für Mobilgeräte. Es gibt ein paar Dinge, die wir tun müssen, ist es viel kleiner zu machen. Styles mobile, Selektor Bereich eins und wir werden ein paar Dinge tun, die wir tun werden, vor allem, Telefongröße in Ordnung. Eigentlich überprüfe ich, was es hier drin hat. Ich sollte das überprüfen. Sie sind bei 46. Schriftgröße, Pixel 446. Denken Sie daran, dass das meine Tastatur aus irgendeinem Grund ist, zwei Ziffern dort ein. In Ordnung, das ist also die Größe und ich werde es überschreiben, sobald ich es tue, höre ich das auch. Wir sitzen in der Mitte. Okay, jetzt richtet er den gesamten Text an der Mitte aus. Okay, Sie können hier drinnen sehen, aber Sie können hier unten sehen, dass es diese anderen Attribute nicht gemacht hat. Was wir tun werden, ist, anstatt das H1 für zentriert zu starten und wir bekommen eine Biegung, die und weil es diesen Text nicht getan hat, war alles Text und sie waren zentriert, aber ich möchte eigentlich, dass andere Teile auch ausgewählt werden müssen, weil das war nur die H1. Was wir sagen werden, ist zurück zu diesem Helden Inhalt und sagen, ich möchte, dass alles außer U zentriert wird. Okay, jetzt die Zeile, dieses Bild hier, dieser Typ hier ist nicht ich wie: „Hey, du hast es gerade gesagt.“ Es liegt daran, dass dieser hier schwebt. Was wir in diesem Fall tun werden, erstellen wir eine spezielle Klasse, nur um ihn ein wenig zu schieben. Wir werden tun, wie sehr wir sie hassen, da stecken, ich kann die Gegenstände verstecken, wir tun das als Nächstes ist, ihn zu installieren. Aber bevor wir das tun, lassen Sie uns alle speichern und eine Vorschau des Browsers. Okay, also Desktop-Tablets kleiner und die Polsterung ist anders, was großartig ist, ein eingerücktes Handy wird kleiner und wir müssen den Zeilenabstand machen, was wir nicht getan haben, so war es das H1. Mobile H1 Zeilenabstand, Texte, Zeilenhöhe, Pixel größer. Das ist über nett, speichern Sie alle nur im Browser, besser. Vielleicht musste ich etwas höher sein. Wenn Sie keine geriffelten Dinge haben, wie wir hier gemacht haben, wird das alles sein, was Sie tun müssen. Der nächste Teil, wir werden es für das nächste Video speichern, und wir werden diese Zeile hier deaktivieren und wir werden einige spezielle Klassen bekommen, um ihn heraus zu schieben und es ist nichts Phantasie, dass Sie nur Klasse anwenden, um es und sagen, haben auf Handy, dass irgendwie wird es zentriert. Es kann wirklich schwer sein, tatsächlich richtig zu Sachen zu sehen, wenn es schwebte. Wir werden nur betrügen. Alles klar, auf das nächste Video. 29. So schaltest du Teile einer Website in verschiedenen Ansichten wie Mobiltelefon oder Desktop aus: In diesem Video werden wir dieses Lineal hier deaktivieren, wenn es auf Handy kommt, denn das ist, was ich in meinem Design getan habe. Gehen wir und machen das. Was wir tun werden, ist, dass wir einen Compound-Selektor machen, aber wir werden es innerhalb von Mobile tun, weil dies das einzige Mal ist , dass ich will, dass dieses Ding aktiviert wird. In styles.css, wenn ich in mobil bin, habe ich noch nichts, das das Lineal steuert. Ich könnte einfach hr haben und schalten Sie es zu deaktivieren und wenn ich ein Lineal irgendwo anders verwende, wird es auch ausschalten, also werde ich ein wenig genauer sein. Ich werde sagen, Heldeninhalte. Ja, wenn es eine horizontale Regel in diesem Inhalt gibt, dann möchte ich es deaktivieren. Manchmal komme ich wahrscheinlich mit nur hr davon. Ich werde eine andere horizontale Regel in Ihrem Haus auf der Website verwenden? Ich glaube, das tue ich. Ja, ich will nicht ausschalten. Dieses spezielle Lineal, das sich in diesem Inhaltsfeld befindet, wird deaktiviert, wenn, stellen Sie sicher, dass show set deaktiviert ist, damit Sie alles sehen können. Ich möchte zur Anzeige gehen und zu keiner gehen, cool. Speichern Sie alle, überprüfen Sie den Browser. Sie können hier Tablet noch da sehen, aber in Handy weg, einfach. Ein paar Dinge, die ich aufräumen möchte, ist vielleicht gibt es hier unten etwas Polsterung. Im früheren Tutorial war ich sehr clever und ich sagte, lassen Sie uns die horizontale Regel für die Polsterung verwenden. Wir verwenden diesen Stil, um diese Lücke zwischen diesem und dem Knopf zu geben, aber weil zwischen diesem Lineal aus, dieses Mal verschwindet. Ich möchte ein bisschen mehr hinzufügen, ich möchte das von der Seite abschieben. Gehen wir und tun das jetzt in Dreamweaver, gehen wir zu dieser Ansicht, damit ich es sehen kann, so mobil und es ist da und er wird deaktiviert. Hat er jetzt deaktiviert? Aus irgendeinem Grund deaktiviert er hier nicht in der Live-Ansicht und deshalb bevorzuge ich es, im Browser zu testen. Es gibt nur einige kleine schrullige Dinge, die in der Live-Ansicht nicht passieren. Es ist praktisch für die Auswahl von Dingen, aber verwenden Sie es nicht als Ihre absolute 100-prozentige Arbeitsansicht. Verwenden Sie dafür den Browser. Was ich tun werde, ist, dass ich einen Compound-Selektor machen werde. Wenn es ein h1 gibt und es im Handy unten ist, möchte ich ein wenig Polsterung an der Unterseite hinzufügen. Ich habe ein h1, das ist bereits im Handy. Ich kann diesen Selektor schon hinterhältig verwenden, weil ich in styles.css bin, ich bin in meinen mobilen Stilen und es gibt bereits ein h1, ich kann sagen, hey, du willst in h1 kommen, kannst du ein wenig Marge unten unten? Da geht er, er ist verschwunden. Das könnte nur mein Programm sein. Ich habe am Ende wirklich Testversionen von Dreamweaver, wie Bug Fix und Videos für Adobe zu machen, aber manchmal geht mir ein wenig Knall. Bleiben wir einfach im Browser, ja, sieht gut aus. Was ich hoffe, ist mit kleinen Dingen wie diesen, ich liebe die von diesen kleinen Leckereien, die du hast, und du magst „Ich wünschte, ich könnte es, es gibt schon ein Etikett, und ich kann das einfach anpassen.“ Sie hören auf, Klassen zu erstellen, um alles zu tun, Sie beginnen die Wiederverwendung von Klassen. Eine andere Sache, die ich tun möchte, ist dieser Kerl an der Spitze hier, ich muss ein bisschen Polsterung nach links drücken, um zu gefälschten Zentrum, weil er ein nach links geschoben ist, es ist wirklich schwer, natürlich zu mögen sie in die Mitte zu bringen , wie wir es getan haben mit diesem Text in einer Schaltfläche. Wir werden eigentlich nur sagen, dieses Ding hier genannt Bild Float Lift, das ist innerhalb des Helden Inhalt. Wählen wir ihn aus. Lassen Sie uns CSS Designer-Panel CSS-Stile erstellen, styles.css. Wir machen es global, als nächstes wissen Sie, dass wir mobil sind und wir werden einfach überprüfen, ob wir nichts haben. Haben wir irgendetwas, was sagt, Kopfzeile ein Bild? Nein, hier ist nichts drin. Lass uns gehen und einen erstellen. So ist es. Nun, das ist nicht gut genug. Alles, was Float in unserem Heldeninhalt darauf angewendet wird, wird diese Polsterung hinzufügen und in dem Moment, in dem nur dieses Bild ist , tatsächlich beide Bilder, wird es nicht funktionieren, weil sie beide etwas Polsterung auf der Linke Seite. Wir müssen etwas spezifischer sein. Jetzt willkommen zu dem seltsamen Wirken von Web ist, wenn ich sagen, img hier, das wird nicht funktionieren. Es ist nicht die Art, wie das konstruiert wird. Lassen Sie uns bearbeiten, gehen wir hier rüber und etwas Marge, raten Sie einfach eine Marge für den Moment, aber es gibt offensichtlich nichts ändert sich. Das ist Float links, der in unserer Content-Box ist. Vielleicht ist es umgekehrt, vielleicht ist es das Bild img, das klare Float darauf angewendet hat und es funktioniert immer noch nicht. Es ist wegen dieser Dinge sind zusammengeklebt. Dieser Klippenschwimmer ist an diesem Bild angebracht, so dass es keinen Raum zwischen hier geben kann. Das wird dich erwischen, es fängt mich raus. Es ist eines dieser lustigen Dinge, wo Bild und dann ein Punkt, das bedeutet, dass die beiden, die ich tatsächlich verbunden und miteinander verbunden, jetzt wird es gelten. Damit werde ich sie ein bisschen mehr nach oben ziehen. Ja, wir haben ein paar Dinge gelernt und ich habe eine Tendenz, wenn ich die Kurse mache, nur um es schön und einfach zu halten und sicherzustellen, dass es nichts zu schwierig ist wie diese seltsamen Dinge wo es eine Instanz gibt, in der wir beitreten diese beiden und wir haben nicht in der Lage zu zentrieren, weil die schwimmenden, aber ich lasse diese besondere ein in, weil es Zeiten mit Dingen, die bedeuten, zu arbeiten nicht funktionieren und Sie finden, dass Workarounds, um sie gehen zu jedem Web-Designer passiert. Was ich tun sollte, ist möglicherweise wieder an den Anfang zu gehen und neu zu strukturieren, wie ich diese Seite mache, damit ich nicht besonders dieses eine Problem habe, aber niemand tut das. Wenn du an einen Punkt kommst, bist du, als ob ich zurückverdopple, nur um das eine zu reparieren oder mache ich es zu einer kleinen hacky Sache, es zu reparieren? Das ist nicht besonders hacky, aber nur um Sie wissen zu lassen, dass es Zeiten gibt, die wir mögen, eigentlich werde ich nur eine Klasse hinzufügen, um sie zu fudge, denn oft gibt es keine Auswirkungen. Es sieht gut aus für den Benutzer. Die Benutzererfahrung ist großartig, die Benutzeroberfläche sieht gut aus, jeder ist glücklich, aber wenn jemand sich Ihren Code anschaut, könnte er ihn noch einmal ansehen und gehen: „Verdammt, das ist eine hässliche Art, das zu tun“, und ich würde definitiv sagen, dass Sie entsetzt wären, wenn Sie ein Entwickler sind und sich meinen Code ansehen, Sie entsetzt wären, das Wort Heldeninhalt alle mit Bindestrichen ausgeschrieben zu sehen. Sie setzen wahrscheinlich einfach hc, halten Sie es schön und einfach. Halten Sie den Code wirklich leicht. Ich schreibe mir gerne kleine Notizen mit meinen Klassen wie Heldenbild und Mobilansicht. Aber das ist nur mein Stil und ich denke, dass ich aus einem eher visuellen Hintergrund komme, muss ich diese Dinge im Code sehen, um mir zu helfen. Das ist es für dieses Video, lasst uns zum nächsten wo wir anfangen, Bildspalten zu betrachten. Ehrfürchtig. 30. So erstellst du ein dynamisches Bildraster in Dreamweaver: Hallo, da. In diesem Tutorial werden wir unser Design von hier illustriert nehmen, wo wir drei Spalten mit sechs Bildern haben und diese nur zwei Spalten haben. Wenn es auf Tablet und dann auf Handy, die eine Spalte bekam, und wir schalten ein paar der Bilder aus, so sechs unten auf nur vier von ihnen. Ich werde am Ende so etwas aussuchen. Hier ist meine Desktop-Ansicht, bis zu Tablets und dann nach unten an meine Wand mit seinen nur vier plus es wird tun, dass weil dehnbare Sache, wo sie nehmen die meisten Nutzung des Raumes. Lassen Sie uns gehen und lernen, wie Sie das jetzt in Dreamweaver tun. Wir sind eigentlich wieder hier auf Illustrator, weil ich erklären möchte , wie die Struktur funktioniert. Was wir tun werden, ist, dass wir diese Spalten hier erstellen und unser Design lässt sie sich ändern. Sie können sehen, es hat drei Spalten, sie bis zu zwei, und dann unten auf eins. Was ich tun muss, oder ich muss Ihnen erklären, ist, dass wir eine Box erstellen, also eine Spalte hier, und wir machen es zu 33 Prozent der Breite. Das wird hinter einander bleiben und weil wir ein neues Bild gespeichert haben oder die Wandsäule 33 Prozent beträgt, wird das nächste Bild passen, das nächste Bild passt, aber das nächste Bild ist nur Rahmen, Es ist nur 100 Prozent zu wählen, also wird es in die nächste Reihe schieben. Der Grund, warum dies nützlich ist, ist, dass, wenn Sie in Tablet sind , können Sie sagen, dass genau das gleiche Bild, aber Sie jetzt nehmen 50 Prozent des Raumes, so 30 Prozent und dann versucht, in die nächste passen, aber es ist nicht so fest, so es bricht zusammen. Dasselbe, wenn wir auf Handy kommen, dasselbe Bild, aber wir werden sagen, wenn du unbeweglich bist, bist du ein 100-prozentiger Kumpel, also können die anderen 100 Prozent nicht passen, also wenn es darunter ist und sie einfach weiter stapeln. Im Wesentlichen gehen diese einen Stapel übereinander, aber wir geben ihm nur unterschiedliche Prozentsätze. Das ist, wie reaktionsschnell Kacheln wie folgt funktioniert. Gehen wir und machen das jetzt in Dreamweaver, verspreche ich, diesmal ist es Dreamweaver. Bevor wir diese Spalten hineinlegten, brauchten wir einen Behälter, um ihn herum zu legen. Oben oben hier haben wir einen Container namens Heldeninhalt und denken Sie daran, dass die Stapel an der Spitze, dass es jeden nehmen wird, den wir es in einer schönen kleinen Box aufbewahrt haben. Wir geben das gleiche für unsere Bilder, so dass vor allem, so dass wir einige Polsterung zwischen diesem und dem Helden Inhalt setzen können , weil fünf Helden Inhalte ausgewählt, so klicken Sie hier irgendwo, klicken Sie auf Heldeninhalte, und gehen Sie dann zu Fügen Sie HTML Div ein und ich werde es danach bitte setzen, Sie werden sehen, dass unten unten hier, es ist tatsächlich knallt direkt unter der Liste oberen Schaltfläche, nicht dieses Bild im Hintergrund, vor allem, weil dies ein Hintergrundbild ist und wir sagten, sind im Hintergrund und niemand kann Sie wirklich beeinflussen. Deshalb können wir unsere Stöcke auf die Oberseite legen. Wir müssen ein Padding Tool hinzufügen, also lassen Sie uns eine Klasse erstellen, um dies zu tun. CSS Designer, wir werden es global tun und wir werden sagen, wir werden ein Zitat Bild Raster erstellen, alles, was Sie wollen, und wir werden einige Rand an der Spitze hinzufügen. Keine Dinge, die so hier gelten, lassen Sie uns ein Klassen-erstes Bild anwenden. Es gibt ein bisschen Polsterung Mann und sagte ein bisschen mehr, bis ich grob glücklich mit ihm. Jetzt werden wir in unsere Spalten setzen, also mit unserem Div-Bild gut ausgewählt, werden wir gehen, um einfügen, wir werden eine weitere Aufteilung des Raumes einfügen. Ich werde sagen, im Inneren von hier, bitte würde ich gerne Spalte, ich werde es colen, es ist ein bisschen schwer, wenn Sie anfangen, das jetzt zu haben, es gibt zwei, ich werde ein Div einlegen und dann das Div darin und du bist wie, Mit welchem vermisse ich? Lassen Sie uns schnell gehen und fügen Sie eine Klasse hinzu, also was wir tun werden, ist CSS Designer, und lassen Sie uns eine Klasse machen. Wir werden diesen einen Col als ihre Kolumne nennen. Das ist nur ein Industriestandard, den Sie es Spalte nennen und oft tue ich es, weil es für mich leicht zu verstehen ist, aber ich möchte mich an einige dieser Syntax oder häufig verwendeten Namen gewöhnen, so dass, wenn Sie anfangen, am Projekt eines anderen zu arbeiten oder eine andere Website, können Sie diese erkennen. Diese Spalte hier, lassen Sie uns zuerst eine Hintergrundfarbe geben, wir brauchen nicht wirklich die Hintergrundfarbe, ich wollte es nur hier, damit ich beschreiben kann, was ich tue. Ich werde es hier anwenden, um Dot Col zu sagen. Manchmal ist es einfach, in der Codeansicht nach unten zu schauen, Sie können sehen, dass ich ein Div namens Bildraster habe, und innerhalb von dort kann man sehen, dass es den Anfang gibt und da ist die Öffnung, innerhalb davon ist meine Farbe, und es gibt auch diesen zufälligen Text , den ich aus der Farbansicht löschen werde. Du brauchst nicht mehr, etwas nützlicher. Wir könnten jetzt gehen und klicken Sie auf dieses, kann mit der rechten Maustaste darauf noch, und gehen Sie zu duplizieren, und haben sechs von ihnen, Befehl D auf einem Mac ist die Abkürzung, wir werden steuern D die auf einem PC, also haben sechs von ihnen jetzt. Aber bevor wir das tun, und Sie können sehen, dass aufeinander gestapelt sind, werde ich rückgängig machen, was Command Z automatische Steuerungen auf einem PC ist. Was ich tun möchte, ist eine klassenspezifische für Desktop hinzufügen, denn wenn wir uns Illustrator anschauen, können Sie sehen, Desktop ist 33 Prozent, das sind 50 Prozent, und das sind 100 Prozent, also werden wir Erstellen Sie drei Klassen und lösen Sie sie einfach bei verschiedenen Medienabfragen aus. Wir werden sagen, wenn Ihr Desktop 33 Prozent, 40 Prozent , 100 Prozent, also erstellen Sie die Desktop-Version Fest. Zuerst werden wir einen Selektor erstellen, wir werden es colen, setzen in Stile global, und wir werden diese eine.col nennen und lg verwenden. Nun, lg ist nicht nur eine andere gängige Art der Kühlung Desktop-Ansicht, Sie könnten colcolumn-desktop, um es einfacher für sich selbst zu machen, aber Sie werden auf anderen Websites sehen, die Leute mit col-lg stattdessen. Wir werden es so ausgleichen, wir werden sagen, ich möchte, dass Sie eine Breite von Prozentsatz haben, stellen Sie sicher, dass es Prozentsatz und 33 Prozent ist. Oft wird es zurück zu Pixeln wechseln, also wenn Sie beunruhigend sind, wie meins nicht funktioniert, ist wahrscheinlich standardmäßig, es möchte wirklich Pixel sein, so dass Sie Prozentsätze dort erzwingen. Das funktioniert, wir müssen es jetzt anwenden, also bist du groß, denn ich mache 33 Prozent, während ich irgendwie mache. Jetzt werden wir Listen dupliziert erstellen, also lassen Sie uns duplizieren und sie können übereinander stapeln. Sie bleiben nicht nebeneinander, wie wir es gerade brauchen, aber das wird die Grundlagen sein. Wir werden Subventionen und insgesamt haben, aber gehen wir zurück und reparieren die erste, ich werde ein paar Mal rückgängig machen, da ist es. Was ich tun möchte, ist, sie in Float links zu bringen, also was ich tun werde, ist mein kleiner wiederverwendbarer Klassenschwimmer links. Jetzt werde ich sie duplizieren, also Kommando D, kein Token, und ich habe sechs. Wenn Sie eine andere Zeile benötigen, sagen Sie einfach Befehl D auf einem Mac oder Control D auf einem PC, und es dupliziert sie ständig. Lassen Sie uns einen kleinen Blick in den Browser werfen, also speichern Sie alle, springen Sie in den Browser. Sie können hier sehen, schön und reaktionsschnell auch, weil es 33 Prozent sind, vielleicht werden sie nicht größer als unsere maximale Breite, die wir für unseren Desktop sparen, aber sie werden nett und Tintenfisch Sie hier unten. Eines der Dinge, die ich von meinem Design will, ist ein bisschen Raum dazwischen, also gehen wir in Dreamweaver und was wir tun werden, ist, für die Spalte groß, oder ich will es für einen Col tun, ich werde es tun für die Spalte, so dass jede einzelne Spalte in jeder einzelnen Ansicht nicht nur eine große, nur ein bisschen Polsterung haben wird, was für mein Design gilt. Was ich tun werde, ist Col, ich werde sagen, ich würde gerne ein bisschen, wir können Prozentsätze verwenden, also möchte ich 1 Prozent auf dieser Seite setzen, 1 Prozent auf dieser Seite und 1 Prozent auf dieser Seite. Sie werden feststellen, dass mein Design dort verschwunden ist und kaputt ist, weil dies zu meinen 33,3 Prozent beiträgt, die ich zu meiner Box hinzugefügt habe, also 33,3 Prozent mal drei plus die ausstehenden in der Seite alles zerstört. Was wir tun müssen, ist in mein lg zu springen, col my lg, und unsere 33 Prozent wird es etwa 31,3 Prozent sein. Das ist nicht das, was es auf Pixel springt. Denken Sie daran, ich sagte, dass es versucht, es zu tun , tut das auch für mich, also jetzt passen sie alle, also was haben Sie in Bezug auf die Polsterung hinzufügen, müssen die Breite abnehmen, die Sie verwenden, und das Letzte ist, dass ich eigentlich wollen Polsterung an der Unterseite als auch. Stellen Sie sich vor, wir werden es zurück zu unserer Spalte, lg Spalte, und 1 Prozent auch tun. Sie können meins sehen, der tatsächliche Abstand ist ein wenig anders weil dies 1 Prozent ist, aber es ist beide Seiten. Ich habe 1 Prozent plus 1 Prozent, es sind tatsächlich 2 Prozent hier drin, also die Unterseite hier werde ich 2 Prozent hinzufügen. Jetzt ist es sogar, ich werde dieses Tutorial hier lassen, und das nächste werden wir Bilder zu ihnen hinzufügen. Es gibt ein paar kleine Dinge, die wir tun müssen, um sie reaktionsschnell zu machen, aber der Mut davon ist hier drin. Gehen wir zum nächsten Tutorial. 31. So erstellst du dynamische Bilder in Dreamweaver, die sich an die Seitengröße anpassen: Hallo, in diesem Tutorial werden wir leere div-Tags herausnehmen und sie mit Antworten von Bildern füllen. Hey, Presto, so. Das coole Ding an ihnen ist, dass sie auch in der Größe verändert werden, Reaktionsfähigkeit. Gehen wir und machen das jetzt in Dreamweaver. Im ersten Schritt möchte ich diesem ersten div-Tag ein Bild hinzufügen. Ich gehe zu Einfügen, HTML, Bild. Ich möchte [unhörbar] innerhalb des div-Tags. Ich gehe zu meinen Übungsdateien, Bildern. Wenn Sie die Übungsdateien nicht haben, wird es irgendwo einen Link auf der Seite geben Wenn nicht, senden Sie mir eine Nachricht und ich werde Sie mit diesen verbinden. Lassen Sie uns es in einem Browser überprüfen, Sie werden feststellen, dass es dort drin ist, aber es reagiert nicht. Man kann sehen, dass es sich nur um sich selbst handelt. Die andere Sache zu beachten ist, dass es ein bisschen größer ist, als ich es brauche. Warum? Denn eigentlich in dieser Draufsicht, schauen wir uns hier mein Beispiel an. Es ist eigentlich die Größe, aber wenn es auf die mobile Größe kommt, ist es ein bisschen größer, also habe ich erlaubt, dass die größte Größe hier für Illustrator exportiert wird. Machen Sie es nicht zu groß, denn Seitenladegeschwindigkeiten sind wirklich wichtig für Google in seinen Rankings. Nur etwas, das ein bisschen größer ist, als Sie brauchen, ist in Ordnung Um es reaktionsschnell zu machen, werden wir eine Klasse erstellen. Wir werden in CSS Designer erstellen, styles.css global. Wir werden einen Selektor erstellen. Dieser wird als Responsive-Image bezeichnet werden. Man könnte es etwas kleiner und weniger beschreibend nennen. Aber es gibt drei Dinge, die Sie tun müssen. Wir müssen sagen, die Breite ist ein Prozentsatz, okay. Es muss ein 100 Prozent sein, nur stellen Sie sicher, wenn Sie Probleme haben, es ist ein 100 Prozent und nicht Pixel. Da dieses Designer-Panel Pixel als Standard verwendet, ist es dort ziemlich viel, also ist das ein Bit. Wir müssen sicherstellen, dass die Höhe auf auto eingestellt ist, und wir müssen das Display blockieren und wir müssen es anwenden. Ich habe mein Bild ausgewählt. Ich habe die IMG-Sache hier und dann sage ich, mein Bild ist jetzt.responsive Bild. Lassen Sie uns es jetzt im Browser überprüfen, speichern Sie alle. Du wirst hoffentlich sehen, dass dieser Typ hier die Größe ändert, genial. Im Grunde jetzt dupliziert es nur dieses ursprüngliche div hier, wir werden diese löschen. Wir werden diese auch löschen, wir werden diesen Text auch hier unten löschen. Sie können sehen, dass dies der Text ist, der ursprünglich war, bevor wir das Bild hier einfügen. Es ist nur irgendwie an der Unterseite, löschen Sie diese, löschen Sie diese Spalten. Gehen wir und machen das jetzt. Lassen Sie uns den Text zuerst unten hier loswerden. Ich habe mein div-Tag hier, Anfang und Ende und da ist dieser Text hier drin. Ich brauche sie nicht mehr. Ich finde, es ist immer einfacher, es in der Codeansicht zu tun. Ich brauche keins von diesen Typen. Ich werde sie nur in CodeView löschen, deshalb lieben wir geteilte Ansicht in Dreamweaver. Als nächstes möchte ich dieses Ding hier duplizieren. Ich möchte nicht nur das Bild duplizieren. Ich möchte alles duplizieren, weil es im Moment nur das Bild ausgewählt hat , das dort zu sehen ist. Ich möchte die umgebende div-Klasse, also ist das meine Spalte. Das ist es da, so col-lg schweben links. Ich werde Befehl D drücken oder replizieren und gehen zu duplizieren oder Strg+D auf einem PC und schauen Sie uns jetzt fliegen. Wir haben sechs von ihnen. Offensichtlich kannst du neun machen. Es wird weitergehen. Was wir jetzt tun wollen, ist durchzugehen und einfach diese Bilder hier auszutauschen. Es wird nicht besonders ein sexy Prozess sein und wir werden nichts anderes als das tun, so dass Sie mitspringen können, wenn Sie möchten. Aber wenn Sie mir folgen wollen, lassen Sie uns auf dieses Bild klicken, klicken Sie auf die kleinen Riemchenlinien und hier, wir gehen, um Browser-Datei, Übungsgröße Dateien, Bilder zu greifen . Geh runter, Thumbnail, großartig. Nun, Sie sollten definitiv alle Texte hier hinzufügen. Das ist das Projekt. Es gibt Ihnen einen Projektnamen als Projekt. Es war ein UI-Projekt und fügen alle Details, die Sie können, weil Sie wollen, dass es gut und suchmaschinenfreundlich sein. Das werde ich nicht, weil ich jetzt faul bin. Aber wenn dies meine eigene Seite ist, würde ich zu 100 Prozent gehen und es tun. Aber in diesem Tutorial versuche ich nur, die Dinge zu beschleunigen. Was auch ich tun werde, um die Dinge zu beschleunigen, ist, ich bin eigentlich nur gehen, um meine Übungsdateien Bilder, und greifen alle diese Jungs. Eigentlich habe ich diese ersten beiden, also werde ich sie kopieren, sie auf meinem Desktop in meinen Bilderordner legen. Nur damit ich jetzt hier reingehen kann und ich sie nicht jedes Mal kopieren und einfügen muss. Ich kann hier hineingehen und tatsächlich den Namen in thumbnail3 ändern. Ändern Sie den ganzen Text nicht vergessen. Das hier, aufregendes Zeug. Andere Dinge , die ich tun könnte, ist, wenn ich auf diese klicke, wo werden sie gehen? Weil das später passieren wird. Ich kann es jetzt tun und ich kann einfach in Hash setzen? Es liegt an mir, ob ich es jetzt oder später machen will. Ich habe das getan. Aber ja, wir werden später darauf eingehen, wenn wir tatsächlich diese zweiten Seiten erstellen, also testen Sie dies in einem Browser, um zu sehen, wie gut es aussieht. Speichern Sie alle, überprüfen Sie den Browser und schauen Sie sich das an. Ich liebe es. Vor allem mit all den neuen farbigen Bildern hier beginnt es jetzt wie eine vollständige Website aussehen. Das nächste, was wir tun müssen, ist herauszufinden , was passiert, wenn es auf Tablet wie diese kommt. Denn im Moment geht es einfach weiter in diesen drei Reihen. Ich möchte es ändern, wenn es auf ein Tablet und Handy kommt und wir werden das im nächsten Video tun. 32. So erstellst du unterschiedliche Spalten für Mobilgeräte, Tablets und Desktops in Dreamweaver: Hallo, da. In diesem Tutorial werden wir unsere Desktop-Ansicht zu nehmen, die drei Spalten hat, dann werden wir es auf zwei Spalten zu bekommen, wenn es auf Tablet kommt und dann gehen wir auf Handy, nur eine Spalte. Super einfach zu tun, lassen Sie es uns in diesem Tutorial tun. Derzeit haben wir eine Klasse, die sagt, dass es diese dritte sein soll, erinnere dich an 30 Prozent. Wir werden darauf klicken, dieser Typ hier. Es ist nicht das Bild, es ist das div, das draußen ist. Denken Sie daran, Spalte bringt ihn einfach nach links zu schweben. Aber es gibt Spalte groß oder LG ist die eine sagen 33 Prozent. Wir müssen noch zwei weitere anwenden. Lasst uns den ersten machen. CSS Designer, Stile CSS, ich werde dieses in Tablet setzen. Wir machen eine neue Klasse namens Col und ich werde in tief für Medium tun, okay? Dieser wird eine Breite von Prozentsatz haben und dieser Prozentsatz wird sein, jetzt sollte 50 Prozent sein, um gleich zu gehen, aber ich habe eine Polsterung um es so zu 48 Prozent. Weil ich die prozentualen Margen auf jeder Seite will, werde ich in Prozentsätze umsteigen. Eigentlich könnte ich das den ganzen Weg machen. Wählen Sie Prozentsätze ohne dieses kleine Sperrsymbol auf bedeutet, dass ich den ganzen Weg herum gehe. Den ganzen Weg herum. Nichts passiert, weil wir eine Desktop-Ansicht betrachten und die Klasse nicht angewendet haben, lassen Sie uns bearbeiten. Okay, also klicke ich auf das und ich hatte diesen Col-md genannt. Wenn es tut, was ich nicht gekommen bin, erkennt nicht, dass es nicht gemacht wurde, okay? Ich werde starten und ich werde eine speichern alle tun und dann versuchen und es auf Sie anwenden. Schnappen Sie sich die externe Klasse. Schalten Sie es aus. Schalten Sie es ein und hoffentlich jetzt.col-md. Da ist es da. Manchmal müssen Sie alles speichern. Das wird angewendet, es wird irgendwie funktionieren. Werfen wir einen Blick in einen Browser. Gehen Sie einige Setup meiner Desktop-Größe, dann erhalten Sie das Tablet und Sie können sehen, er will dies zu besetzen. Wir müssen auch die Polsterung machen, damit wir es tun können. Aber wir können ein bisschen mit ihm herumspielen, lassen Sie uns einfach die Bilder in Gang bringen. Aber Sie können sehen, dass er etwa die Hälfte ist. Okay, also müssen wir es für alle tun. Wir könnten das Außenschild im Einkaufszentrum durchziehen, also zeige ich Ihnen hier einen kleinen Trick. Ich will sie. Können Sie sehen, wie Klassen hier unten in der Codeansicht angewendet werden? Okay, also geht es div als eine Klasse gleich und innerhalb dieser Anführungszeichen alle Klassen col, col-lg, flipped lift und unsere col-mid hinzugefügt. Ich werde dir einen coolen kleinen Trick zeigen. Mein spezifischer oder Dreamweaver. Wenn ich hier einklicke und dann die Befehlstaste gedrückt halte und dort auch klicke. Sie können sehen, dass es mehrere Cursor gibt. Dies ist wirklich praktisch, wenn Sie eine Klasse col-md hinzufügen möchten. Du triffst die Periode nicht am Anfang, weil wir es nicht brauchen, weil hier die Klasse steht. Sieht in der Codeansicht ein wenig anders aus und das ist eine Möglichkeit, sie alle gleichzeitig hinzuzufügen. Speichern Sie alle, jetzt kommen wir zum Browser, [unhörbar]. Desktop-Ansicht und mobile Ansicht. Ich finde diese Arten von Schritten im Kurs ziemlich befriedigend, das tue ich wirklich. Lassen Sie uns gehen und machen Sie die mobile Version oder tun Polsterung und ein wenig. Wir wollen eine neue Klasse erstellen, also Stile, wir werden es in Handy stecken. Wir werden hier eine neue Klasse erstellen, die heißt, klein, oder? Wir werden es extra klein nennen. Warum? Weil ich versuche, dich an einige der Stylingsprache zu gewöhnen, die im großen Wide World Web of Web Design stattfindet. Es ist M wird oft für Tablets verwendet, diese Art von großen Telefon-Zeichen wie das iPhone plus, okay? Wir haben dann die Plus-Size-Telefone. Wir könnten einen kleinen anrufen und das ist in Ordnung. Aber normalerweise nennen die Leute es extra klein für ihre kleineren Handys mit etwa 300 Pixel Breite, wie ein Standardtelefon. Cool. Was wir sagen wollen, ist, dass du 100 bist, also werden wir nicht ganz 100 gehen. Wir werden ein bisschen Polsterung um die Außenseite hinzufügen, aber ich werde 98. Stellen Sie sicher, dass es Prozentsatz ist. Diese Typen werden den ganzen Weg abschließen und sagen, ich möchte, dass ihr alle einen Prozentsatz von eins seid . Stellt sie alle ein. Cool. Jetzt lassen Sie uns alles nur in einem Browser speichern. Lass uns fertig runtergehen. Boom, das hat nicht funktioniert. Ich habe es nicht angewendet. Ok. Du musst sicherstellen, dass du mich wahrscheinlich ansiehst, dieses Video geht, es wird nicht funktionieren. Dann müssen Sie Ihre mehrere Cursor-Tricks machen. Wir könnten das Mitglied manuell hinzufügen, aber wir werden einfach schnell sein und klein gehen. Es ist nicht einmal klein, es ist extra klein. Speichern Sie alle, checken Sie es hier ein. Jetzt arbeiten wir Desktop, Tablet und dann nach unten und nach oben. Boom, sie stapeln sich alle. Es gibt eine kleine Lücke um die Außenseiten, die ziemlich cool aussehen. Es gibt ein paar Kleinigkeiten, an denen man arbeiten kann. Aber ich denke, ein Erfolg. Sie haben gelernt, wie Sie ansprechende Spalten in Dreamweaver ausführen. In Ordnung. Lassen Sie uns gehen und aufräumen ein paar Dinge im nächsten Video, aber dann alle, wir sind nah an alle Techniken, die wir brauchen, um eine Website zu bauen. In Ordnung. Zum nächsten Video. 33. So erstellst du ein Clearfix-Clearing nach dem Kurs in Adobe Dreamweaver: Hallo, und willkommen zu diesem beängstigend betitelten Video, es dreht sich alles um klare Fixes und Pseudo-Klassen. Es hört sich beängstigend an, so schwer ist es nicht. Wir machen es. Aus welchem Grund? Es liegt daran, dass ich hier ein wenig Padding zwischen dieser Box hinzufügen möchte, die als Bildraster bezeichnet wird, also ist dies div-Tag und meine Fußzeile. Aber ich kann nicht, weil diese Jungs alle links schweben und es verursacht Probleme, wenn es Boxen darunter wie diese Fußzeile hier schweben. Aber wenn wir eine Pseudo-Klasse verwenden, bedeutet das, dass ich am unteren Rand meines Bildrasters Padding hinzufügen kann und es beginnt sich tatsächlich zu bewegen. Wenn Sie dem Tutorial folgen, können Sie das nicht tun. Lassen Sie uns lernen, wie das in diesem Tutorial zu tun. Wir müssen es tun, weil diese Jungs nach links schweben und wir wissen aus einem früheren Tutorial, dass, wenn wir etwas nach links gehen, das nächste div-Tag einen klaren Fluss angewendet haben muss und wir haben das mit einer speziellen kleinen Klasse getan. Das Problem hier ist die Struktur. Dies ist mein letztes div, es ist meine letzte kleine Spalte, dann sollte das div-Tag darunter klare Float haben, aber ich habe kein div-Tag darunter. Ich schließe das Bildraster und dann schließe ich Haupt- und dann Fußzeile beginnt hier unten. Das Problem mit dem Hinzufügen von klarem Float zu einer Fußzeile, es funktioniert einfach nicht, es ist zu weit aus dem Stream hier. Ein Trick ist also, dass ich hier einklicken und einfach ein div-Tag einfügen kann, ihm keinen Namen geben, den Platzhaltertext entfernen und ihm einfach einen klaren Float geben und das würde völlig funktionieren. Das habe ich jahrelang gemacht und das ist es, was viele Leute immer noch tun, und das ist völlig in Ordnung, du kannst das tun, warum? Weil es einfach ist, aber wir sind weiter in diesem Kurs und Sie kamen hierher, um zu lernen und es ist Zeit, ein paar coole Sachen zu lernen. Pseudo-Klassen sind besonders schwer zu machen oder zu verwenden, also werde ich das tun. Was wir tun müssen, ist, dass wir es hier drüben in unserem CSS Designer tun werden. Klicken Sie irgendwo hier, CSS-Stile, tun Sie es global und wir haben eine hier drin namens Bild, wo bist du? Finden Sie sie, Bildraster. Was wir brauchen, ist ein anderes, das immer noch Bildraster sagt, aber bevor Sie es schließen, werden wir einen Doppelpunkt hinzufügen, dieser Doppelpunkt zeigt an, dass es eine Pseudo-Klasse ist. Es ist also wie diese Klasse, aber ein bisschen anders und unsere Pseudo-Klasse wird danach sagen. Also werden wir einige Attribute hinzufügen, die nur nach dem Bildraster angewendet werden. Das ist eine Pseudo-Klasse, super einfach. Nun, der Hauptmann ist klarer Schwimmer. Einige der Zeit können Sie einfach mit klarem Float davonkommen, aber wir werden etwas tun, das Clear Fix genannt wird. Es ist ein Name für eine etwas kompliziertere, nicht komplizierte, eine etwas robustere Art, den Schwimmer zu löschen. Das Löschen des Floats von selbst funktioniert die meiste Zeit, aber nicht in allen Browsern die ganze Zeit. Um also eine robustere zu machen, müssen wir nur auf die Anzeige klicken, sie zu blockieren ändern, und wir müssen etwas hinzufügen, das als Inhalt bezeichnet wird. Es gibt eigentlich keinen Inhalt hier im CSS Designer-Panel. Aber die hilfsbereiten Leute fügen Dream Weaver sagte, es gibt ein wenig mehr Kante [unhörbar] unten unten hier. Also werde ich Inhalte treffen, da ist es und so ziemlich ich will nichts für den Inhalt, also ist es zwei Zitate markiert mit nichts in der Mitte. Fragen Sie nicht warum, aber das hilft uns in vielen Browsern. Also, das ist ein Ersatz dafür, dass nur ein leeres div darunter mit diesem klaren Float angewendet wird, und wenn wir alle ehrlich sind, ist es nicht so schwer, wir haben dieses Coalen und ein Nachher gemacht, und es macht uns das Gefühl Super-duper-Entwickler, wenn Sie Clear Fix-Pseudo-Klassen tun. Klingt, als würdest du eine andere Sprache sprechen. Wenigstens fühle ich mich so, wenn ich darüber rede. Gehen wir und machen das, was wir tun wollten, was war es? Es war Bildraster, ich wollte danach etwas Padding hinzufügen. - Ja. Also springt es herum, aber da gehst du, Polsterung hinzugefügt. Schön. Bevor wir nur ein wenig Hauswirtschaft gehen, und wenn ich vom Desktop bis zum Tablet gehe, die Polsterung oben hier nicht gut. So ist es schön am Desktop und es ist in Ordnung bei mobilen, wir werden das auch tun, aber es ist ziemlich schlecht am Tablet. Um das zu tun, was wir tun werden, ist, dass wir styles.css in Tablet machen und wir werden nicht zum Bildraster gehen. Wir haben derzeit kein Bildraster in hier, also werden wir sagen, wenn Bildraster in Tablet erscheint, es hat, Ich werde darauf klicken, scrollen Sie nach unten, braucht nur mehr Rand nach oben. Dieses Ding springt ständig herum, weil wir es überschreiben, jetzt können Sie sehen, wie es aufgesprungen ist, ich werde eine niedrigere schlagen, also fügen wir es nicht auf dem Desktop hinzu, wir ersetzen es. Also sagen wir, anstatt dass, tun Sie das. Jetzt nur ein bisschen Testen zwischen hier. Sieht gut aus, sieht auch gut aus, es ist ein bisschen herumspielen. Eine Sache, die wir vielleicht tun müssen, ist, können Sie hier sehen, dass dieses Wort in diese verschiedenen Zeilen bricht und es verwirrt sich mit uns? Es ist einfach wirklich schwer, mit so vielen verschiedenen Größen zu arbeiten, also gibt es einen Punkt, wenn Sie ein Web-Designer sind, müssen Sie mit einigen Ansichten leben, die nicht perfekt sind. Ich denke, es muss nicht perfekt sein, es muss brauchbar sein, aber es muss nicht perfekt sein. Was Sie tun, ist, dass Sie auf die Hauptgeräte zielen und wenn jemand mit einer verrückten Größe kommt, müssen Sie möglicherweise zurückgehen und es anpassen. Sie möchten nicht beim Erstellen von wie zehn verschiedenen Medienabfragen erwischt werden. Nur damit du es weißt, drei sind das Minimum, also Desktop, Tablet und Handy, das ist, was wir haben. Aber viele anspruchsvollere Websites werden fünf haben, also werde ich wie ein wirklich kleines haben, wie wir haben, sie werden eine fabelhafte Größe haben, diese Art von iPhone plus Größe. Sie werden auch Landschafts- und horizontale Tablets und dann die größeren Desktops betrachten , also werde ich fünf haben. Ich habe Sites mit sieben gesehen. Sie können also weiterhin diese Medienabfragen vornehmen und Anpassungen vornehmen, es hängt davon ab, wie viel Kontrolle Sie über jede einzelne Ansicht haben möchten. Aber wissen Sie, dass je mehr Medienabfragen Sie haben, ich denke, desto mehr Arbeit muss getan werden, und Sie könnten damit in Ordnung sein. Für diese Seite hier halten wir es einfach, hauptsächlich für Klassengröße und wenn ich ehrlich bin, mache ich nur drei Medienabfragen für meine Websites persönlich. In Ordnung. Sollen wir mobil machen? Sie können eine für Mobilgeräte erstellen. Eigentlich, wenn es auf mobil geht, bin ich mit dem Padding zufrieden, aber Sie gehen einfach zur maximalen Breite hier für Mobilgeräte und fügen unsere Klasse für Bildraster hinzu und ändern das Padding. Aber du könntest das tun, ich habe Vertrauen. In Ordnung. Nächstes Tutorial. 34. So erstellst du neue Seiten mit Vorlagen und verlinkst sie in Dreamweaver: Hallo da. In diesem Video gehen wir durch und beginnen mit dem Aufbau unserer zweiten Seite, die unsere Portfolio-Seite ist. Dies ist ein Hinweis darauf, wie neue Seiten erstellt werden. Wir gehen und ändern die Überschrift hier und dieses Bild nach unten. Ja, machen wir das jetzt in Dreamweaver. Zuerst gibt es zwei Möglichkeiten, es zu tun. Wir können auf Datei gehen, Neu, wie wir es früher getan haben, und wir sagten, einige Vorlage suchen und dies ist die Vorlage, die wir früher in der Serie erstellt. Ja. Klicken Sie auf „Erstellen“. Das einzige Problem ist, dass wir leere Seite bekommen. Was ich normalerweise mache, ist, dass ich auf „Abbrechen“ klicken werde, da ich nur ein Speichern unter dieser Seite mache. Jetzt mussten wir unsere erste Seite index.html aufrufen. Das ist die Homepage, kein Weg um die hier herum. Nun, jede andere Seite, die wir auf eigene Faust benennen. Die einzigen Regeln sind, verwenden Sie keine Großbuchstaben und verwenden Sie keine Leerzeichen oder solche verrückten Zeichen wie diese. Wir werden unser Portfolio-Ui-Design nennen, und den Kundennamen für diesen, sagen wir einfach, es ist Byol. Wir wollen auch gute Keywords in unseren URLs. Das ist wirklich gut für Suchmaschinen. Ich werde „Speichern“ drücken und sie nach oben ziehen und speichern. Es ist immer noch mit der Vorlage verbunden. Eine Sache, die ich in der Vergangenheit Probleme mit der Verwendung von Vorlagen hatte , ist, dass Sie manchmal eine Aktualisierung der Vorlage machen, jetzt und dieser Typ wird nicht aktualisiert, wenn dieses Ereignis passiert, passiert es wie einmal in einem blauen Mond, aber Sie können zu Tools, Vorlagen gehen, wenn es jemals ausgegraut ist, klicken Sie einfach in die Codevision unten unten hier. Aus irgendeinem Grund funktioniert das Klicken in der Live-Ansicht nicht. Cool. Vorlagen, und diese hier können Sie sagen, „Apply Template to Page“. Sie können einfach wieder auf Ihre Vorlage klicken. Ich muss es jetzt nicht tun, weil es gut funktioniert. Aber wenn das passiert, versuchen Sie es. Die andere Sache, die Sie versuchen können, wenn später die Straße Ihre Pausen hinunterbricht, können Sie sagen „Aktuelle Seite aktualisieren“ und das wird einfach zurückgehen und die Vorlage erneut überprüfen , nur um sicherzustellen, dass es nicht verbunden ist. Ich werde dieses Design hier einmaschen. Es gibt ein paar Dinge, die ich loswerden muss. Ich werde sie in der Live-Ansicht klicken. Da war dieser Tag, du bist weg. Klicken Sie darauf. Ich möchte hier unten klicken, um sicherzustellen, weil ich keinen Inhalt hören möchte, der die große Box ist, aber dieses Bild float-left ist alles, was ich loswerden möchte. Ich werde diesen Text wiederverwenden und ich werde den Text in das ändern , was ich hier hatte, UI-Design. Bleiben Sie hier. Wir werden nur einige tun, offensichtlich in einige Details eingeben, aber es werden einige zusätzliche Tricks, die wir lernen werden, während wir bauen. Dies wird mein UI-Design für BYOL sein. Löschen Sie U. Cool. Wenn es orange ist, möchte ich an einem p-Tag einfügen und es wird diesen Text hier darstellen. Was ich nicht tun möchte, ich kopiere und füge es ein, ist, wenn du in diesem orangefarbenen Modus bist, lässt es dich nicht viel von dem Zeug machen. Sie müssen abklicken und in der Tag-Ansicht darauf klicken, das ist die blaue Ansicht. Orange ist die Bearbeitung von Text einzige Sache. Mit diesem ausgewählt, werde ich zu Einfügen gehen, ich gehe nach unten zu p Tag, wo bist du? Da, Absatz. Ich werde nach meinem H1 gehen. Ich werde diesen Text ersetzen. Ich weiß nicht, warum ich es hier unten in der Codeansicht besser mache, einfügen. Los geht's. Cool. Wir müssen etwas Styling dafür machen. Jetzt könnte ich einen zusammengesetzten Selektor erstellen, um p Tags zu sagen, die sich innerhalb von Hero-Inhalten befinden. Das Problem dabei ist, dass ich ein anderes p-Tag verwenden könnte, um etwas anderes zu tun. Ich werde hier etwas genauer sein. Ich werde eine Klasse speziell für das Styling dieses Textes nur hier erstellen, anstatt alle p-Tags, die sich innerhalb dieser Top-Box befinden. Weil wir vielleicht auf der Kontaktseite oder der Über uns Seite verschiedene Dinge mit dem p-Tag machen wollen. Lassen Sie uns eine Klasse CSS-Designer erstellen, meins sucht nicht, also werde ich zurücksetzen Dan ist genial. Cool. Styles.css, ich werde es global tun. Ich werde hier eine Klasse erstellen, und ich werde es am Anfang Text nennen. Wann immer Sie anfangen, Texte zu machen, nennen Sie es einfach Text am Anfang, so dass es später leicht zu finden ist. Das wird Text weiß sein, und wir werden diese eine Beschreibung nennen. Was soll ich damit machen? Ich werde es schaffen, ich werde Text bekommen, ich werde es zu einer Schriftfarbe von weiß machen und ich werde es zu einer Schriftgröße von 30. Was ich von meinem, oh Mann, es wird nervig, dass Doppel-3's. Ich weiß nicht, warum es das tut. Ich tippe drei einmal und es bringt zwei. Cool. Jetzt werden wir das hier anwenden. Das hier wird Text genannt. Sie können beginnen zu sehen, warum die Verwendung von Text am Anfang nützlich ist. Sie können alle verschiedenen Textoptionen durchlaufen. Das nächste, was ich tun möchte, ist, das ist die Art von neuen einzigartigen Ding. Der Rest der Dinge, die wir bisher gemacht haben, haben wir im Kurs gemacht. Aber dieses Bit hier jetzt auf Orange. Das Problem ist, dass wir Klassen nur auf dieses gesamte p-Tag anwenden können. Das Problem ist, ich möchte, dass dieser kleine Teil des p-Tags rot ist. Nun, was ich tun könnte, ist, zwei p-Tags zu erstellen und sie dann nebeneinander zu schweben, und das ist eine Menge Drama, also werden wir uns etwas ansehen, das ein Span-Tag genannt wird. Ein Span-Tag ist, wenn Sie aus der Welt von sagen, InDesign, es ist dieser Charakterstil. Ich kann es als Teil meines Absatzes verwenden, nur ein wenig aktualisieren. Wenn Sie noch nie von einem Charakterstil gehört haben, keine Sorgen.. Ein Span-Tag, schau dir das an, du musst es hier in CodeView tun. Es ist eine Möglichkeit, eine Klasse anzuwenden, anstelle des übergeordneten Tags, das normalerweise passiert, können wir es auf unser kleines Bit innerhalb des p-Tags anwenden und es wird nur als span -Tag bezeichnet. Lassen Sie uns zunächst dieses Tag erstellen. Styles.css, GLOBAL, erstellen Sie diese hier. Ich werde das eine.text nennen, wir gehen mit Rot. Ich werde es rot nennen, nur weil es wiederverwendbar ist. Ich hätte diesen Text-weiß auch nennen sollen. Aber text-rot, ich werde sagen, du bist rot. Ich werde es aus ziehen, mit der Textfarbe. Ich sollte gehen und die richtige Farbe von Illustrate finden oder das Pipettenwerkzeug verwenden, das da ist und die Farbe stehlen. Ich werde nichts anderes tun, weil die Schriftgröße von dem zugrunde liegenden Text-Weiß stammt , den wir auf das gesamte Tag anwenden werden. Um ein span Tag anzuwenden, markieren wir es hier unten in CodeView, dann drücken wir „Command T“ auf einem Mac oder „Control T“ auf einem PC und dieses Wrap Tag erscheint. Geben Sie Spanne ein. Das ist es, was wir wollen. Aber wir wollen auch eine Klasse hinzufügen. Span, Leerzeichen und geben Sie dann cl ein und Sie können sehen, handlich Dreamweaver, es hat eine Klasse drin und es hat die ganze Syntax für uns hinzugefügt, was die Gleichen und die Anführungszeichen ist. Hier drin werden wir ohne den vollen Stopp eingeben. Wenn Sie in CodeView arbeiten, setzen Sie oft nicht das vollständige Stoppzeichen. Das hier ist Text und Text-Rot. Schön. Ich kehre wieder zurück, und hoffentlich Dreamweaver hat den Client in das span -Tag eingewickelt und es wird eine Span-Klasse genannt, die roter Text ist, und da gehst du, wie Inline-Styling. Das nächste, was ich tun möchte, ist dieses Stück Text hier unten für die kurze. Das ist so ziemlich genau wie das hier. Stellen Sie sicher, dass Sie auf das übergeordnete Tag, das ist das p-Tag, drücken Sie „Befehl D“ auf einem Mac oder „Control D“ auf einem PC, duplizieren Sie dieses Tag. Ehrfürchtig. Lassen Sie uns das in kurz ändern. Jetzt sind die Tics zugeschnitten einige Ich könnte kopieren und einfügen verschiedene Illustrator, aber ich möchte Ihnen einen coolen Trick zeigen. Nun, das funktioniert nur hier unten in der Codeansicht und die lateinischen Wörter namens Lorem ipsum vermischen, einfach Halterticks platzieren. Was wir hier unten in der Codeansicht eingeben können, ist Alarm und dann in wie viele Wörter Sie wollen, und dann drücken Sie „Tab“ nicht geben Sie Tab auf Ihrer Tastatur so. Ich habe 20 Breiten irgendwie. Das ist etwas, das Bild genannt wird. Wenn Sie kein Bild verwenden und mehr in die Codeansicht gelangen möchten, habe ich eine andere Colas, die eher dafür ausgelegt sind, eine Menge von dem zu tun, was wir hier getan haben, aber Ansichten zu codieren, das könnte ein nächster Schritt für Sie sein, aber es ist ziemlich cool. Sie wollen Google, dass und werfen Sie einen Blick oder schauen Sie sich einige meiner anderen Videos. Jetzt schauen wir uns an, loswerden- Ich werde das „Lass uns reden“ Zeug lassen und dann lasse ich das Let's Reden Zeug da drin. Okay. Es ist immer noch auf meinen Entwürfen, ich werde es da drin lassen. Das nächste, was ich tun muss, ist diese Pergamon Blätter, ein großes Bild, das wird, dass Entwürfe, die getan haben repräsentieren. Wenn ich auf, sagen wir, eines dieser Symbole hier klicke , lädt es diese Seite, so dass ich durch gehen und alle diese Spalten löschen muss. Ich klicke auf diese Typen. Jetzt werden wir die Bild-Gitterbox verlassen. Ich hätte es wahrscheinlich nicht Image-Gitter nennen sollen und hätte wahrscheinlich nur das sekundäre, main oder so etwas weil es sich nur vorstellen wird und jetzt kein Gitter. Verwirrend. Ich brauche alles hier raus. Es ist einfacher, es in der Codeansicht zu tun. Sie können es völlig in der Live-Ansicht tun, wenn Sie es vorziehen, aber ich werde alle Sie schnappen, stellen Sie sicher, dass Sie das Anfang am Ende zu greifen. Woher wissen Sie, ob es der Anfang oder das Ende in der Codeansicht ist? Klicken Sie auf das Bildraster und Sie können es hier unten hervorgehoben sehen. Das ist die Schließung als Eröffnung. Alles dazwischen werde ich loswerden und auf Wiedersehen. Jetzt mit meinen Fällen sind immer noch blinkt da drin. Lassen Sie uns in unser Bild setzen. Wir gehen zu „Bild einfügen“ und wir werden aus unseren Übungsdateien Bilder bringen und ich habe Portfolio eins. Es ist dieser große Kerl, ein bisschen anders als mein Design und lassen Sie uns alles speichern, testen Sie es im Browser. Das Bild ist viel zu groß und es reagiert einfach nicht, aber keine Sorge, denken Sie daran, dass wir ein Code-Tag erstellt haben, das als responsive bezeichnet wird. Wir werden zu diesem Bild Code Punkt reagiert von Bild bearbeiten und wir speichern alle, öffnen Sie im Browser und lassen Sie mich jetzt verkleinern. Hey, sieh dir an, dass alles reaktionsschnell ist. Sie können entscheiden, ob Sie auch darauf auffüllen möchten. Das habe ich nicht getan. Sie könnten dem Bildraster etwas Padding hinzufügen oder Sie könnten eine spezielle Padding Klasse erstellen, aber ich freue mich, dass es neben den Rändern hier aufschlägt, gefälschte Polsterung mit dem tatsächlichen Bild selbst bearbeitet. Aber das ist, was ich tun muss, wenn es auf die mobile Ansicht kommt. Es ist einfach zu großer Text, also kann ich jetzt durchgehen und die vielleicht zusammengesetzte auswählen, um zu sagen, dass p-Tags, die im Bild sind, kleiner machen. Sie sind im Moment 30 Pixel. Lassen Sie uns das versuchen. Gehen wir zu CSS-Designer-Styles, mobil. Lassen Sie uns einen zusammengesetzten Selektor erstellen, der sagt eigentlich ist nichts drin, ich werde ausschalten und tatsächlich klicken Sie auf, um hoffentlich, hoffentlich etwas Zeit zu sparen. Ich klicke auf ihn und mache dann einen Selektor. Hier ein Tag möchte ich, ich brauche diese Textbildbeschreibung nicht. P-Tags, die hier drin sind, werden unsere Inhalte hoffentlich funktionieren und wir werden greifen. Eigentlich lassen Sie es uns senken, gehen wir zum Text und sagen, lassen Sie uns die Schriftgröße gehen und machen es Pixel von 220. Wir machen sie großartig. Eine Sache, die ich nicht getan habe, ist, dass ich keine Polsterung an den Seiten hatte, als es zu meinem Ball kam, weil es nicht wirklich wichtig war, wenn ich diese ursprünglichen Zecken von ihm hatte, aber jetzt denke ich, es braucht es wahrscheinlich so hier gibt eine Kälte hier oder Inhalt und machte ein Handy. Sagt es irgendetwas? Ich werde es zeigen. Es sitzt also Nullen. Ich werde es tatsächlich auf 10 Pixel drehen. Dann 10 Pixel auf dieser Seite geben mir einfach ein wenig Atemraum an den Seiten. Wann immer du solche Sachen machst, musst du zurückgehen und einfach überprüfen, ob ich die Indexseite zerstört habe. Ich fühle mich, als ob ich es nicht getan habe, aber wir werden das trotzdem probieren. Wenn dies in meinem Browser geöffnet ist, sieht es dort gut aus. Nichts ist schief gelaufen, außer daran zu denken, dass Polsterung, die wir auf dieser Seite setzen und wir fälschte es in der Mitte. Wir haben Schluss gemacht, indem wir ein zusätzliches Team-Pixel hinzufügen. Also müssen wir gehen und den Compound-Selektor anpassen. Aber alles andere sieht gut aus, was Compound-Selektor wir verwendet haben. Ich könnte zum Index gehen, zum Handy gehen, zu diesem Ding hier gehen und es war Bild in Helden Inhalt. Lasst es uns überprüfen. Header-Bild. Es war dieser Typ hier, Held Inhalt Bild schweben links. Wir werden nur ein bisschen langsamer werden. Diese Art von Sache passiert die ganze Zeit. Sie kommen weiter in den Kurs und Sie machen eine kleine Anpassung, Sie müssen gehen und überprüfen. Es hat keine Konsequenzen. Wenn dies der Fall ist, haben Sie vielleicht eine eigene spezielle Klasse erstellt , aber Sie möchten nicht die Gewohnheit bekommen zu viele von ihnen zu erstellen, weil Ihr CSS-Stylesheet im Moment verrückt werden kann. Unsere ist nett und sauber und wir würden keine Entwicklungspreise gewinnen, vor allem, weil meine wirklich dumme lange Namen Desktop-Ansicht. Aber es geht ziemlich gut. Das letzte, was wir tun werden, ist, dass wir diese beiden Seiten verbinden müssen. Auf meiner Indexseite hier gehe ich zur Vollansicht. Das wird in ihn klicken. Ich werde sagen, wenn diese Schaltfläche geklickt wird, dieses Bild, wir gehen zu den gestreiften Linien und sagen Link. Wenn Sie hier einen Hash hatten, wie wir uns zuvor angesehen haben, können wir Hash löschen und tatsächlich auf „Nach Datei suchen“ klicken und eine Portfolio-Benutzeroberfläche sagen, klicken Sie auf „Öffnen“. Jetzt ist es standardmäßig selbst, das Ziel keine ist. Alte Tics, dies wird mein UI-Design für bringen Sie Ihre Laptop-Website sein. Es ist nicht, das ist Zeug, das ich als Template-Platzhalter-Zeug habe , also ist das nicht meine Arbeit, das ist bestückte Bibliotheksarbeit. Lassen Sie uns im Hintergrund abklicken und gehen und testen Sie es in einem Browser. Jetzt dieses Bild hier hoffentlich können wir es anklicken und es springt auf diese Seite. Um zurück zu kommen, werden wir auf das Bild hier als Logo klicken. Dies geht zurück auf die Homepage. Wir haben dies in einem früheren Tutorial getan, aber es ist genau die gleiche Hand, die wir gerade für dieses Bild gemacht haben, außer anstatt auf die UI-Seite zu verlinken, es verlinkt zurück zum Index. In Ordnung. Jetzt würdest du diese Seite duplizieren und all diese tun. Das coole daran ist, dass Sie feststellen werden, dass, wenn wir diesen Kurs durchlaufen, die Produktion schneller und schneller wird weil wir uns auf Dinge verlassen, die wir in der Vergangenheit getan haben, und diese Duplizierung wird super einfach sein, weil es Teil einer Vorlage und Buchten, da wir das Layout für diese Seite bereits erstellt haben. Wir machen einfach ein „Speichern unter“ und wechseln alles aus. Das war's für dieses Tutorial. Lasst uns auf die nächste gehen. 35. So lädst du deine Website in das Internet auf, mit Hosting durch Dreamweaver: In diesem Video werden wir uns für einen Gastgeber anmelden. In unserem Fall werden wir bluehost verwenden, weil sie genial sind. Aber Sie können sich hier für jedes Hosting anmelden, was auch immer Sie bevorzugen, und dann zum nächsten Video springen, wo wir tatsächlich FTPD-Downs mit Dreamweaver verbinden und unsere Website hochladen. Wenn Sie also hosten möchten, gehen Sie zu bluehost.com/track/byol. Ein paar Dinge passieren ist, dass Sie einen Rabatt bekommen und ich eine Provision auf den Verkauf bekomme, kostet Sie nichts extra, Sie sparen Geld. Aber wenn du nicht so machen willst, kannst du einfach direkt zu bluehost.com gehen und meinen kleinen Link umhergehen. Unabhängig davon, wie Sie es tun, Sie enden hier, klicken Sie auf „Erste Schritte“. Was du willst, ist diese erste Option, okay. Haben Sie einen Durchlesen, ein wenig Blick, aber von der Mehrheit der kleinen bis mittleren Unternehmen, brauchen Sie nur einen einfachen Grundplan. Es sagte 395, aber tatsächlich ist es ungefähr 595, nachdem Sie alle Dinge, die Sie brauchen, gesetzt. Wenn Sie also bereits einen Domainnamen haben, geben Sie ihn hier ein. Wenn Sie keins haben, werde ich mich vorerst anmelden. Bringen Sie Ihren Laptop ist awesome.com. In Ordnung, füllen Sie die Felder hier aus, und dieser Teil hier ist wirklich wichtig. Ihr Preis für 395 ist also für drei Jahre. Wenn Sie die Kosten gering halten und 12 Monate tun wollen, zahlen Sie mehr. Aber Sie müssen nur ein Jahr husten. Dinge, die du nicht brauchst. Domain-Datenschutz hält Ihre Privatsphäre nicht wirklich, hält Sie nur privat von Menschen, die nicht wissen, was sie tun. Standort-Sicherung. Wenn Sie nur an Ihrer eigenen Website arbeiten, benötigen Sie diese nicht, da Sie immer eine Kopie auf Ihrem Laptop haben. Aber wenn Sie mit mehreren Personen arbeiten, kann dies wirklich hilfreich sein, weil sie Ihre Website zerstören. Sie haben keine Kopie dieser neuen Website. Ja. Du willst zu dieser Sicherung gehen. Ich brauche es nicht für diesen Fall, weil ich nur arbeite. Die Suchmaschine Starthilfe funktioniert nie. 'Site-Sperren' Dies funktioniert auch nicht. Nur ermöglicht es Ihnen, ein Abzeichen auf Ihrer Website zu setzen, um zu sagen, dass wir vor Malware gesichert haben, wir werden es nicht verwenden, so dass wir nicht zu bearbeiten und SSL-Zertifikate ein wenig kompliziert für das, was wir jetzt tun, aber es ist definitiv etwas in Ihrer Zukunft, es macht Ihre Website von HTTP, www.bringingyourlaptopisawesome zu HTTPS, das ist sicherer. Aber es gibt noch ein paar andere Reifen, um zu springen. Also werden wir das ausschalten und es einfach halten. Geben Sie also Ihre Zahlungsdaten ein und ich sehe Sie auf dem nächsten Bildschirm. Ok. Herzlichen Glückwunsch, wir haben uns angemeldet. Will ich Zahlungen Tarif und etwas anderes; Wort drücken, nein danke. Ok. Sie werden aufgefordert, sich für ein Passwort anzumelden. Ich habe das getan. Loggen Sie sich ein. Okay, das ist, wo wir landen und was wir suchen, was wir wirklich brauchen, ist etwas, das die FTP-Details genannt wird. Sie sind ein kleiner Knopf hier. Oder du bekommst eine E-Mail wie ich. Okay, begrüßen Sie bei Bluehost und sie senden Ihnen die FTP-Informationen. Also schauen Sie in Ihre E-Mail und dieses Zeug hier ist ziemlich wichtig. Also schreiben Sie es irgendwo auf, wo Sie all das Notizbuch aufbewahren, alle Ihre Dateien oder das Google Doc aufbewahren. Also setzen Sie sie alle da rein, weil diese FTP-Details, die Sie einmal verwenden und vergessen. Dann in ein paar Jahren, wenn Sie Dinge aktualisieren müssen, werden Sie vergessen, vor allem Ihr Passwort. Wenn Sie vergessen, können Sie tatsächlich dieses Zeug finden hier in bluehost klicken Sie auf FTP und notieren Sie die Unterseite wird die gleichen Informationen sein. Ich möchte nicht auf jetzt klicken, nur weil es einige persönliche Daten enthält, die ich nicht möchte, dass Sie sehen. Also lassen Sie uns jetzt in Dreamweaver springen und, in diesem FTP-Details. Es spielt also keine Rolle, welche Seite Sie geöffnet haben. Es spielt überhaupt keine Rolle. Lassen Sie uns zur Website gehen und verwalten Website. Das ist der, den wir an diesem ganzen Kurs arbeiten, Okay, Dans fantastisches Portfolio. Wir werden darauf doppelklicken. Dies sind die Details, die wir angefangen haben, zu setzen, aber jetzt müssen wir etwas einfügen, das den Server genannt wird. Das gibt uns bluehost, sie erlauben uns, ihre Server zu nutzen. Also lasst uns Plus schlagen. Gib ihm einen Namen oben hier, es spielt keine Rolle, „Bluehost. Okay, wenn Sie Go Daddy oder eine andere Domain-Hosting-Firma verwenden, können Sie einfach in die FTP-Details hier eingeben. Es ist ziemlich genau das Gleiche. In dieser E-Mail haben Sie gesehen, dass ich den Hostnamen hatte, der eigentlich die FTP-Adresse ist. Lasst uns das gleich nebenan hochziehen. Das ist also dieser, der Benutzername. Was haben wir sonst noch? Wir haben das Passwort, das ich ausschneiden werde. Passwort. Awesome, und das Root-Verzeichnis muss eingefügt werden. In unserem Fall ist es öffentlicher Unterstrich HTML, das ist ein super gemeinsamer. Schön. Nun, der Moment der Wahrheit, wir werden 'Test 'Hit 'Test' treffen und die Daumen drücken es funktioniert. Ehrfürchtig. Wenn es nicht funktioniert, manchmal, wenn Sie ein neues Hosting-Konto einrichten , kann es etwas Zeit dauern, um zu füllen, also geben Sie es eine Stunde, vielleicht zwei, bevor Sie anfangen, bluehost oder mich anzuschreien. Manchmal kann es nur eine Weile dauern, um zu arbeiten. Die andere Sache, die Sie tun können, ist, dass Ihr Domain-Name möglicherweise nicht registriert ist und noch funktioniert. Also byolisawesome.com könnte noch nicht gefüllt sein. Was sie getan haben, ist, dass sie dir ein temporäres Passwort gegeben haben. Sehen Sie diese temporäre URL? Okay, das ist eine, die Sie in der Zwischenzeit verwenden können bis Ihre tatsächlichen Domain-Namen, die funktioniert. Lassen Sie uns auf „OK“ klicken. Nun, wenn Sie Probleme mit einem FTP haben, einige der Dinge, die passieren können, ist, dass Sie dies ausschalten und auf passives FTP, das manchmal Dinge beheben kann. Die andere Sache, die passieren kann, wenn Sie einen anderen Host verwenden, es möglicherweise nicht als öffentlicher Unterstrich Html bezeichnet, es könnte eine andere URL haben. Also wenden Sie sich an Ihr Hosting-Unternehmen, wenn Sie Probleme haben , bevor Sie sie ärgern, überprüfen Sie die FAQs. Oft wird es ihnen gefallen, wie sie in Dreamweaver einrichten und sie werden Ihnen sagen, welches Stück hingeht, wenn Sie noch Probleme haben, wenden Sie sich an das Hosting-Unternehmen. Dafür hast du sie bezahlt. Oft ist der Online-Chat eine einfache Möglichkeit, es zu tun oder einen Kommentar hier auf dieser Seite zu schreiben. Ich werde sehen, was ich tun kann, um zu helfen. Lassen Sie uns „Speichern“ und es ist fertig und Sie sind bereit. So laden Sie Seiten einzeln im Allgemeinen hoch. Ich habe index.html geöffnet. Hier drüben sind wir in unserem Aktenfeld. Dies ist die Website, die sich auf meinem lokalen Laufwerk befindet. Sie können die lokale Ansicht sehen. Es ist nur meine Maschine. Nun, was ich tun will, ist es auszudrücken. So Website setzen und dies wird es mit Bluehost verbinden. Es dauert eine lange Zeit. Okay, eine Verbindung zum Server herstellen. Möchten Sie abhängige Dateien ablegen? Okay, das ist wichtig, aus irgendeinem Grund gibt es einen Timer. Ich weiß nicht, warum, aber ich habe 22 Sekunden, um es zu erklären. Abhängige Dateien im Moment veröffentlichen wir nur HTML. Aber wir haben ein CSS-Blatt und einige JavaScript und einige andere Dinge und einige Bilder erstellt , die alle nicht Teil davon sind. Abhängige Dateien sind all diese zusätzlichen Bits. Wenn Sie also nur die Indexdatei aufstellen möchten, klicken Sie auf „Nein“. Wenn Sie es wie ich wollen, legen Sie die Indexdatei plus alle Bilder plus all das JavaScript und das ganze CSS. Okay, das ist es, was wir tun müssen. Der Grund, warum sie diese getrennt halten, ist, dass, sagen, es sind viele Bilder und sie sind große lange Bilder; siehe, die Bilder dauern am längsten. Html dauert Sekunden, um zu aktualisieren, während Jpegs ziemlich groß sein können. Also, was Sie tun, ist zu sagen, dass es nur Text ändern hier. Sie ändern den Text und laden einfach den HTML-Code hoch. Also sagen Sie abhängige Dateien, „Nein“. Weil sich alle Bilder nicht geändert haben. Sie sind alle gleich. Alles klar, wir haben überhaupt hochgeladen, und jetzt gehen wir zu überprüfen, bringen Sie Ihren eigenen Laptop ist großartig. Werfen wir einen Blick in einen Browser. Alles klar, hier sind wir, www.byolisawesome.com. Hey ho, wir haben eine Website und der Rest des Planeten kann sie sehen. Testen Sie nicht mehr lokal oder testen Sie auf unserer Fernbedienung. Es sieht alles toll aus und es funktioniert alles. Wenn Sie zu diesem Punkt gekommen sind, sind Sie wahrscheinlich super glücklich mit sich selbst. Ich habe das eine Million Mal gemacht, und ich mache das nur für einen Test und ich bin immer noch ziemlich aufgeregt. Ich weiß nicht, warum ich fühle, dass es anders ist, wenn die Welt es sieht. Schauen wir uns mal an, was wir sonst noch tun müssen, um sicherzustellen, dass alles vorbei ist. Also zurück in Dreamweaver. Was wir jetzt tun müssen, ist, dass wir sicherstellen müssen, dass alle Seiten aktualisiert werden, so dass wir jetzt können, denn wir haben nur eine der Seite, und die Portfolio-Seite, können wir einfach öffnen und gehen Sie auf die Website und gehen Sie zu setzen. Das wird es auf das Hosting hochladen. Wenn Sie viele Seiten haben, sagen wir, Sie haben aktualisiert und Sie haben 20 Seiten, können Sie so nah, es ist egal. Sie können hier auf allen verschiedenen Seiten auswählen oder die gesamte Website auswählen. Eigentlich gibt es keine Notwendigkeit, dass die beiden nach oben gehen. Die Vorlagen sind nur für Sie lokal alle anderen von ihnen können nach oben gehen. So könnte man wie dieses ein halten Sie Befehl auf einem PC, sorry, Befehl auf einem Mac oder Control auf einem PC und klicken Sie auf zwei von ihnen. Dann gibt es hier oben eine andere Möglichkeit, Dinge zu setzen. Es wird Sie erneut nach den abhängigen Dateien fragen. Möchte ich abhängige Dateien? Ich muss ja sagen, weil diese Portfolio-Benutzeroberfläche einige zusätzliche Bilder hat. Das Problem ist, dass es gehen und laden Sie die aus dem Index wieder. So kann es ein bisschen wie ein langer Prozess sein. Lass es uns jetzt überprüfen. Hey ho, und lasst uns auf einen Knopf klicken. Da ist es. Da ist unser großes Portfolio-Bild und es steht: „Hey, hier sind Bits in Latein geschrieben, würdest du es nicht gerne übersetzen.“ Das liegt daran, dass ich diesen Platzhaltertext hier drin habe. Das geht also weg, wenn ich wirklich richtigen Text reinstelle. Danke. Google Chrome In Ordnung, meine Freunde, das ist das Ende, was online zu machen. Jetzt, da ich für eine Tatsache weiß, gibt viele meiner Schüler viel Ärger. Also schreib mir eine Zeile, hinterlasse eine Nachricht, um zu sagen, dass ich es nicht schaffen konnte, was ist los? Stellen Sie sicher, dass Sie mir Screenshots speichern. Ich brauche nicht unbedingt Ihr Passwort, aber es ist gut zu sehen, was Ihr FTP-Name ist und Benutzername ist, damit ich das Problem diagnostizieren kann. Das ist das Ende dieses hier. Gehen wir zum nächsten Tutorial. 36. So fügst du Google Analyse zu deiner Dreamweaver-Website hinzu: >Okay, in diesem Video werden wir uns für Google Analytics registrieren. Warum? Weil es Ihnen all diese Informationen darüber gibt, wer auf Ihre Website kommt. Es ist kostenlos. Du kannst meinen Fall sehen. Wie viele Leute haben in den letzten sieben Tagen für Kurse zum Mitbringen Ihres laptop.com bezahlt, wie viele Personen sind derzeit auf der Website? Sechs von euch. Zu welchen Tageszeiten sind sie? Aus welchen Ländern sie? Alle Arten von Güte. Okay, also gehen wir durch und zeigen Ihnen, wie Sie es installieren. Es ist ziemlich viel kopieren und einfügen. Super einfach, tolles Preis-Leistungs-Verhältnis Lass es uns jetzt tun. Okay, also melden Sie sich bei Google Analytics an, gehen Sie zu Analytics. Google.com. Sie müssen sich mit einem G-Mail-Konto anmelden. Wenn Sie keine haben, sind sie frei zu bekommen, aber Sie müssen eine von ihnen für diesen Prozess verwenden. Erstellen Sie ein G-Mail-Konto, wenn Sie noch kein Konto haben. Sie gehen durch den Prozess der Anmeldung. Es ist kostenlos, du wirst irgendwo wie hier landen. Das ändert sich oft. Also, wenn Ihr Bildschirm ein wenig anders aussieht, keine Sorge, es ist ziemlich einfach. Folgen Sie einfach den Schritten, die Google Ihnen gibt. Schließlich möchten Sie den Tracking-Code haben. Okay, also folgen wir mir, nur weil wir versuchen, es zum Laufen zu bringen. Wir werden gehen, BYOL ist genial. Webseite. Ok. Mein Kontoname und mein Website-Name sind identisch. Die URL ist www.byol ist genial. Gehen Sie aus der Industrie wählen Sie eins. Ich bin in der Bildung, Arbeit und Bildung tun. Ok. Reporting-Zonen können Sie dies später nicht ändern, um sicherzustellen, dass es sich in dem Land befindet, aus dem Sie die Berichterstattung wünschen. Also lebe ich in Irland, aber wenn ich eine Website für die USA studiere, möchte ich, dass es USA sind, weil ich dort Tag und Nacht will , weil es seltsam sein wird, sie zu überprüfen. Sie sagen: „Hey, warum sind sie um 4 Uhr so aktiv? Wenn es tatsächlich so ist wie 19:00 Uhr, je nachdem, wo Sie in der Welt sind. Also wählen Sie die Berichtszone nicht wo Sie sind, sondern mit der Website oder die meisten Leute, die die Website haben, werden. Also werde ich meine in den Vereinigten Staaten verlassen. Cool. Wollte ich einen Mietvertrag annehmen? Das tue ich. Kann Sendungsverfolgungsnummer erhalten. Ich stimme zu. Denn was ich will, ist das hier, das ist das Wichtigste, das ich will. Wir klicken hier und wir kopieren es und dann springen wir in Dreamweaver. Also hier in Dreamweaver, und ich werde diese Seiten nicht öffnen weil ich möchte, dass es als Teil der Vorlagen sein. Ich werde meine Vorlage öffnen. Nun, ich bin hier in diesem Akten-Tab. Sie können Ihre Vorlage von hier aus öffnen. Cool, denn was ich tun möchte, ist, dass ich es auf jeder Seite will. Jetzt sieht der Benutzer es nicht. Das Zeug, das der Benutzer nicht sieht, ist in diesem head-Tag, body Tag ist unsere Seite, die jeder sieht und das head-Tag ist nur der Code im Hintergrund und setzt es dort, wo es uns sagt. Hey, in unserem Fall sagt es uns, wir sollen es nur auf jede Seite setzen. Benutzt, um einen bestimmten Platz zu haben, in den er gehen musste. Also, wo soll ich meins hinstellen? Ich werde meins reinlegen. Vielleicht, wen ich gerade nach diesen Skripten hier laden wollte. Hit paste und du hast dieses große, hässliche bisschen JavaScript. Das Schöne daran ist, wenn ich es speichere und diese Seiten aktualisiere, genial, schließe es. Lassen Sie uns einfach überprüfen, dass es in diesen Seiten ist. Ich werde Index öffnen, überprüfen Sie es irgendwo im Verborgenen. Es wird ausgegraut sein. Da. Es ist da schön. Portfolio-Seite. Da ist es. Großartig. Sie werden aktualisiert. Also jetzt alles, was ich brauche, ist, diese beiden Seiten hochzuladen. Ich werde sie schließen und sie einfach gleichzeitig hochladen, indem ich den Befehl halte, um sie beide auszuwählen. Wir werden auf einem PC steuern und gehen zu setzen. Möchten Sie Domain und Dateien setzen? Ich muss in diesem Fall nicht, weil es nichts wirklich geändert hat, außer für die HTML-Seiten. Keine CSS Änderungen, keine Bilder. Das wird also super schnell sein. Jetzt das enttäuschende Stück. Lassen Sie uns ein wenig schauen, ist, dass die Trinkkoks und nehmen Sie ein wenig wild gehen. Keine Daten in den letzten 24 Stunden erhalten, das ist in Ordnung. Mal sehen, ob wir sofort irgendwelche Tracking-Codes haben. Wo Sie jetzt gehen möchten, ist gehen Sie zurück zu diesem Home-Button, okay, und stellen Sie sicher, dass Sie in sind, Sie bringen Ihren Laptop ist genial oder was auch immer, wenn Sie verwenden. Ok. Hier unten, gibt es Leute auf meiner Seite? Funktioniert tatsächlich irgendein Tracking-Code? Lasst es uns testen. Gehen wir zu BYOL ist genial. Schön. Gehen Sie zurück zu Analytics und nichts funktioniert. Komm schon, Google Analytics. Wir sind alle enttäuscht. Das ist okay. Die Let Analytics kann eine Weile dauern, um loszulegen, geben Sie ihm einen Tag. Wenn es nicht weiß, bis zu arbeiten, dann hast du ein Problem und wende dich vielleicht an mich und sag: „Hey Dan, es funktioniert nicht.“ Wir prüfen die Häufig gestellten Fragen zur Analyse und sehen, ob Sie es beheben können. Aber ich hatte es nie wirklich scheitern lassen. Es ist eine ziemlich solide, einfache Sache zu tun, solange Sie es in den Kopf Tag setzen. Sehen wir uns nun einige der anderen Analysen an. Schauen wir uns eine meiner anderen Seiten an. Schauen wir uns bringen Sie Ihren eigenen laptop.com. Ok. Ich habe es kalt. BYOL online. Sie können mehrere Sites kostenlos haben. Coole im Moment gibt es fünf Menschen auf der Website. Okay, wenn wir uns verschiedene Seiten ansehen und wir werden nicht zu tief in diese Details eingehen , weil ich es nicht weiß. Ich habe das Gefühl, dass es persönliche Details gibt. Mir macht es nichts aus, zu teilen. Sie können beginnen, alle Details zu sehen, die ich von Leuten bekomme, woher Leute kommen, die Seiten, die sie am meisten sind. Das sind die letzten sieben Tage. So kann ich Dinge wie Zeit an diesem Tag sehen, die die meisten Benutzer sind online, alle Arten von Güte. Jetzt wird das kein Analytics-Kurs sein, okay? Wir bleiben dabei, nur Analysen in Gang zu bringen. Ja, das wird uns Analytics super einfach zu tun sein, super coole Informationen darüber, wer auf Ihrer Website ist. Seien Sie am Anfang nicht enttäuscht. Das könnte beeindruckend aussehen. Ist es nicht. Okay, wenn fünf Leute auf den Seiten ziemlich cool. Es ist eine der größten Websites, die ich je gemacht habe. Aber als du zum ersten Mal eine Seite hast, wirst du die einzige Person sein, die deine Mutter besucht und dann deine Nana. Dann ist der Freund deines Bruders, okay. Vielleicht haben Sie in den ersten Monaten vielleicht nur ein paar Leute. Aber wenn Sie Ihr Geschäft oder Ihre Portfolio-Website wachsen, beginnen Sie besser zu Ranking. All diese Güte. Du fängst an, Details hier zu bekommen. In Ordnung, ich zauge. Gehen wir zum nächsten Video. 37. Dreamweaver-Kursprojekt: In Ordnung, es ist Klassenübungszeit. So gibt es zwei Möglichkeiten, die erste ist, mit diesem Kurs weiterzumachen und uns zu bauen oder kontaktieren Sie uns und über uns Seite. Stellen Sie also Inhalte hinein, verknüpfen Sie ihn mit der Homepage und laden Sie ihn dann entweder auf einen Host hoch, damit ich ihn sehen kann, oder testen Sie ihn lokal und senden Sie mir Screenshots. Ich würde gerne sehen, was Sie damit gemacht haben. Das nächste, was zu tun ist, ist und die größere Option ist, tatsächlich Ihr eigenes Portfolio zu bauen. Ich freue mich sehr, dass Sie die Struktur nutzen, die wir in diesem Kurs gebaut haben. Ich will nur, dass du losgehst und es auswechselst, vielleicht wähle eine andere Schriftart aus. Sie können die gleiche Schriftart verwenden. Sie können Ihre eigenen Portfolio-Bilder verwenden. Das würde ich gerne sehen. Das ist eine ziemlich große Übung, die ich weiß, aber wenn Sie wie die meisten Menschen sind , die Sie vermieden haben, Ihr Portfolio zu tun, könnte dies die perfekte Zeit sein, und ich würde gerne sehen, es zu überprüfen, wenn Sie um Rat fragen , ich werde Ihnen einige es sein konstruktiv, das verspreche ich. Alles klar, ja, lasst uns zum nächsten Video gehen.