In dieser Lektion Sie erfahren, wie Sie SVG-Social-Media-Symbole hinzufügen und Links aus diesen Grafiken erstellen. Um sie vollständig zu nutzen alle Funktionen, die Dreamweaver zu bieten hat, Wir werden eine Website erstellen. Also gehen wir zum Site-Menü und wir werden eine neue Website erstellen. Wir werden dies Social Media nennen. Wir werden zum Durchsuchen auf das Ordnersymbol klicken für den Ordner und wir gehen raus, wo immer es ist Sie haben die Unterrichtsdateien für Modul sechs und darin gibt es einen Ordner namens Social Media. Wir werden diesen Ordner auswählen, Dann gehen wir zu den erweiterten Einstellungen über auf der linken Seite. Wir werden unsere erweiterten Einstellungen öffnen und klicken Sie auf die Kategorie Lokalinfo. Für unseren Standardbildordner Wir werden auf diesen Ordner klicken und wir werden den Bilderordner in diesem Ordner auswählen und wir werden auf die Schaltfläche Speichern klicken. Also drüben in unserem Dateifeld oben rechts, Wir haben jetzt unsere Social-Media-Site. Jetzt sind SVG-Dateien skalierbare Vektorgrafikdateien. Was bedeutet das? Nun, im Gegensatz zu JPEGs und PING-Dateien Das sind Bilder, die mit Quadraten oder Pixeln erstellt wurden von Farbinformationen, SVG-Dateien verwenden Vektorinformationen, also Punkte und Segmente, um diese Grafiken zu erstellen. Das Beste an SVGs ist, dass sie auflösungsunabhängig sind. Was bedeutet das? Nun, das bedeutet, dass Sie sie so groß machen können, wie Sie möchten oder so klein wie Sie wollen und sie verlieren nie an Qualität. Jetzt habe ich gerade nach kostenlosen Vektoren für soziale Medien gegoogelt und ich habe es im Internet herausgefunden einige Schwarz-Weiß-Vektorgrafiken die ich in Illustrator geöffnet habe und ich habe diese Asset-Exportfunktion verwendet und sie als SVGs gespeichert nachdem ich diesen Grafiken meine eigenen Farben hinzugefügt hatte. So können Sie SVG-Dateien aus Adobe Illustrator herausholen. Jetzt zurück in Dreamweaver, Wir werden die einfache Codedatei öffnen. Wir gehen zur Live-Ansicht und wenn wir zur Live-Ansicht gehen, Dies ist eine Datei, an der wir zuvor gearbeitet haben, und wir werden runtergehen, nachdem es Gang sagt, und wir wechseln in den Designmodus. Also oben werden wir von Live zu Design wechseln, Wir scrollen nach unten und nach der Ausrüstung, Wir drücken die Eingabetaste und geben ein Folge uns. Und mit unserem Cursor in diesem Follow Us, Wir werden zu unserem Eigenschaftsfenster gehen und wir werden diese Eigenschaft auch in eine Überschrift ändern, passend zu den anderen Unterüberschriften auf unserer Seite und dann drücken wir die Eingabetaste. Wenn wir zu unserem Dateifenster gehen und wir klicken auf den Pfeil links neben den Bildern, Wir können sehen, dass wir in unserem Bildordner einen SVG-Ordner haben und da sind unsere drei Social-Media-Icons drin. Sie werden feststellen, dass es ein Code-Symbol gibt neben jeder dieser Grafiken, nicht das grafische Symbol, an das wir gewöhnt sind. Wir können also nicht auf eines dieser Symbole klicken und es ziehen denn wenn wir das tun, kommt es als Verbindung herunter zum eigentlichen Code, der diese SVG-Datei ist, also werde ich das einfach löschen. Wir müssen zum Menü Einfügen gehen, um ein Bild einzufügen. Und stellen Sie sicher, dass Sie sich im Bilderordner befinden und wir gehen in unser SVG und wir werden unser Facebook SVG, das FB SVG, auswählen und wir werden auf Okay klicken. Wenn wir das jetzt tun und uns in der Entwurfsansicht befinden, Wir erhalten dieses seltsame kleine Symbol nach unserem Follow Us, aber wenn wir zur Entwurfsansicht gehen und diese in die Live-Ansicht ändern, und wir scrollen nach unten, wir können sehen, dass es ziemlich groß ist. Also werden wir darauf klicken und unten in unserem Eigenschaftsfenster, Wir haben die gleichen Eigenschaften wie wir für eines unserer Bilder. Wir werden also nur 50 Pixel einfügen und klicken Sie auf die Eingabetaste und es macht es schön klein für das, was wir brauchen. Jetzt mit pixelbasierten Bildern, Über die Größe muss man sich wirklich Gedanken machen. Sie möchten diese Bilder möglichst nah heranbringen die Größe, die Sie verwenden werden, wie möglich weil der Webbrowser das größere Bild verarbeiten muss auch wenn Sie es in Dreamweaver verkleinern. Also gehen wir zum Live-Menü und ändern Sie es zurück zu Design und wir setzen unseren Cursor direkt hinter dieses Bild und wir werden auf die Leertaste klicken. Wir gehen zum Menü zum Einfügen von Bildern und wir gehen in unseren SVG-Ordner und wir werden twitter.svg wählen, wir werden auf Okay klicken. Jetzt kommt unser Bild als dieser kleine Platzhalter herein und bevor wir überhaupt zur Live-Ansicht übergehen, Wir geben einfach eine Breite und Höhe von 50 Pixeln ein und wenn wir zur Live-Ansicht wechseln und wir scrollen nach unten, Hier sind unsere zwei Bilder für unsere Social-Media-Buttons. Wir gehen zu unserem Dateifenster und wir werden auf unseren Index doppelklicken und wir können am Ende unseres Dokuments sehen, Wir haben keine Social-Media-Symbole, Also werden wir mit unseren Social-Media-Icons arbeiten. Wenn wir nun in diesen dunkelgrünen Balken klicken, Wir können sehen, dass es ... Wenn wir uns in der Live-Ansicht befinden, gibt es einen Absatz, Es hat eine soziale Symbolklasse, die darauf angewendet wird. Wir wechseln also zu unserer Entwurfsansicht und mit unserem Cursor genau dort, Wir gehen zu unserem Einfügen-Menü, um ein Bild einzufügen, Wir schnappen uns das Facebook-SVG und öffnen es. Jetzt bekommen wir wieder das gleiche Aussehen hier. Wenn wir zur Live-Ansicht gehen und nach unten scrollen, Unser Bild ist groß. Es ist nicht so groß wie das Bild im letzten Dokument, aber es ist immer noch groß genug, um in diesen Bereich zu passen. Der Container dieses Bildes definiert also teilweise wie groß es ist. Jetzt gehen wir hier in die Klasse weil dieses Dokument bereits CSS eingebaut hat. Wenn wir also auf diese Klasse geklickt haben und wir wählen Thumbnail Social für die Klasse, wir können sehen, wie es es zentriert und es passt gut dazu in diesem Bereich und wir können das von der Live-Ansicht aus tun. Jetzt mit den Bildern auf dem letzten Dokument und mit diesem Bild hier gerade, alles, was sie tun, ist, uns dieses Facebook-Symbol zu zeigen, aber man kann machen jedes Bild in einen Link. In unserem Modul fünf Verknüpfungen erstellen, Wir haben Links aus Text erstellt, aber hier werden wir darüber sprechen, wie man Links erstellt aus einer Grafik. Also, wenn wir dieses Bild ausgewählt haben und wir können hier unten in unserem Auswahlbereich sagen, Wir haben dieses Bild ausgewählt. Direkt unter der Quelle unseres Bildes in unserem linkbereich können wir einfach eintippen... Wir machen einen absoluten Link http://www.facebook.com und wir haben keine eigentliche Seite in Facebook dass wir es tun werden, also werden wir es einfach herausbringen Facebook selbst und wir drücken die Eingabetaste und das wird diesen Link auf unser Bild anwenden. Also in dieser Lektion, Sie haben gelernt, wie man addiert SVG-Dateien als Social-Media-Icons, wie man sie verkleinert und wie man Links daraus erstellt.
