Wie Sie Bilder für Ihre HTML5 und CSS3-basierte Web-Seite Schlagzeilen verwenden

Im Allgemeinen sollten Sie Standard-Fonts für die HTML5 und CSS3 Webseite des Hauptinhalt verwenden, so dass eine begrenzte Reihe von Schriften, die ist nicht so ein großes Problem. Manchmal, wenn Sie Schriftarten in Ihre Schlagzeilen zu verwenden. Sie können einen grafischen Editor, wie GIMP, verwenden Sie textbasierte Bilder zu erstellen und diese dann in Ihre Seiten integrieren.

Menu

    bild0.jpg

    Hier ist der Prozess eine spezielle Schriftart für die Anwendung:

    1. Planen Sie Ihre Seite.

      Wenn Sie Grafiken verwenden, verlieren Sie etwas Flexibilität. Sie müssen genau wissen, was die Schlagzeilen sein sollte. Sie müssen auch wissen, welche Schlagzeile auf welcher Ebene angezeigt wird. Anstatt sich auf den Browser zu verlassen Ihre Schlagzeilen angezeigt werden, sind Sie Grafiken in Ihrer Grafik-Tool erstellen und sie direkt auf der Seite platzieren.

    2. Erstellen Sie Ihre Bilder.

      Sie können die wunderbare Logos Funktion in GIMP (wählen Xtns # 10153- Script-fu # 10153- Logos) Ihren Text zu erstellen.

    3. Geben Sie direkt Schriftgrößen.

      Im Bild, macht es Sinn, Schriftgrößen in Pixeln angeben, da hier sind Sie wirklich über eine bestimmte Anzahl von Pixeln zu sprechen. Sie erstellen # 147-virtuellen text # 148- in Ihrer Grafik-Editor, so stellen Sie den Text, was Größe Sie es in der fertigen Seite sein wollen.

    4. Verwenden Sie einen beliebigen Schriftart, die Sie wollen.

      Sie müssen sich keine Sorgen darüber, ob der Benutzer hat die Schriftart, weil Sie nicht die Schrift zu senden, nur ein Bild mit der Schrift zusammen.

    5. Erstellen Sie ein separates Bild für jede Schlagzeile.

      Diese besondere Übung hat zwei Bilder - eine Überschrift der Ebene 1 und Ebene 2. Weil Sie Bilder direkt erstellen, liegt es an Ihnen, den Überblick zu behalten, wie das Bild seiner Überschrift Ebene kommunizieren.

    6. Betrachten Sie die Überschrift Ebene.

      Achten Sie darauf, Überschrift Ebene 2 Werte schauen ein wenig kleiner oder weniger betont als Stufe 1, das zu machen ist, wenn Sie Bilder haben, die in einer Überschrift 1 Einstellung verwendet werden, sollten sie eine größere Schrift als Bilder, die in einer verwendet wird, weniger betonte Ebene Überschrift. Üblicherweise wird dies durch Anpassung der Schriftgröße in Ihren Bildern gemacht.

    7. Erstellen Sie die Seite so, wie Sie normalerweise tun würde.

      Nachdem Sie diese Spezialität Bilder erstellen, bauen eine regelmäßige Web-Seite. Setzen und Tags in genau den gleichen Orten, die Sie in der Regel tun.

    8. Stellen Tags in den Überschriften.

      Anstatt gewöhnlicher Text, legen Bild-Tags in den Tags. Siehe den nächsten Code imageTitles.html wenn Sie ein wenig verwirrt sind.

    9. Setzen Sie Schlagzeile Text in der alt Attribut.

      Das alt Attribut ist besonders wichtig, weil hier, wenn der Benutzer Grafiken ausgeschaltet hat, noch der Text als eine entsprechend gestaltete Überschrift erscheint. Menschen mit langsamen Verbindungen sehen Sie den Text vor der Lade Bilder, und die Menschen Text Leser verwenden, können immer noch das Image des Alt-Text lesen.

    Hier ist der Code verwendet, um die Image-basierte erzeugen Header:

    imageTitles.html

    Diese Seite beschreibt berühmte Kühe in der Geschichte

    Die meisten Menschen sind sich nicht bewusst, dass das Vieh in der Schlacht tatsächlich tookpart. Sie taten es nicht selbstverständlich. Ich justmade das wieder wett.

    Diese Technik ist ein schöner Kompromiss zwischen kundenspezifischen Grafiken und gewöhnlichen HTML wie folgt:

    • Sie haben große Kontrolle über Ihre Bilder. Wenn Sie mit Ihrem Grafik-Tool Mann sind, können Sie jede Art von Bild machen Sie als Überschrift dienen soll. Es gibt buchstäblich keine Grenzen außer Ihre Geschicklichkeit und Kreativität.

    • Die Seite behält seine Struktur. Sie haben noch Tags anstelle Überschrift, so ist es leicht zu sehen, dass Sie bedeuten für ein bestimmtes Bild als Überschrift zu handeln. Sie können immer noch die Seite Organisation im HTML-Code zu sehen.

    • Sie haben Ausweich Text. Das alt Attribute werden aktiviert, wenn die Bilder nicht angezeigt werden kann.

    • Die semantische Bedeutung von Bild Schlagzeilen erhalten bleibt. Das alt Tags bieten eine weitere großartige Eigenschaft. Wenn sie den Bildtext replizieren, ist dieser Text noch verfügbar für Bildschirmleseprogramme und Suchmaschinen, so wird der Text im Bild nicht begraben.

    Diese Technik eignet sich hervorragend für Schlagzeilen oder in anderen Bereichen, aber feststellen, dass der Text für die Überschrift in dem Tag wiederholt wurde. Dies ist wichtig, weil Sie den Text nicht verlieren wollen. Suchmaschinen-Tools und Screen-Reader benötigen Sie den Text.

    Nicht versucht, diese Technik für größere Mengen an Textkörper zu verwenden. Andernfalls tritt einige Probleme:

    • Der Text ist nicht mehr durchsucht werden. Suchmaschinen können Text nicht finden, wenn es in den Bildern vergraben.

    • Der Text ist schwerer zu ändern. Sie können Ihre Seite mit einem Texteditor nicht aktualisieren. Stattdessen müssen Sie das Bild herunterladen, ändern und wieder hochladen.

    • Bilder benötigen viel mehr Bandbreite als Text. Sie keine Bilder verwenden, wenn sie nicht wesentlich zu Ihrer Seite hinzufügen. Sie können den Fall für ein paar Überschrift Bilder machen, aber es ist schwieriger, Ihre gesamte Seite gespeichert zu rechtfertigen, wie ein Bild nur eine bestimmte Schriftart verwenden.

    Menü