Auszeichnungssprache – Bildersatz_HTML/Xhtml_Webseitenproduktion

Da immer mehr Designer und Entwickler beginnen, Standards (insbesondere CSS) zu verwenden, werden jeden Tag neue Technologien entdeckt, neue Wege zur Erreichung derselben Ziele gefunden und ständig bessere Methoden entwickelt.
" Man kann es als "Bildersatz" bezeichnen Das beste Beispiel für diese Art von Änderung ist eine Technologie, die CSS verwendet, um gewöhnlichen Text durch Bilder zu ersetzen. Wie verwende ich CSS, um Text durch Bilder zu ersetzen?
Es wäre am besten, wenn Sie alle aus Leistungsgründen verwendeten Bilder (unwichtig oder dekorativ) in CSS einfügen könnten, da Sie auf diese Weise aktualisierte Bilder problemlos ersetzen können, aber das tun wir nicht Ebenso können wir sicherstellen, dass alle Browser und Geräte die Bedeutung des Markup-Quellcodes korrekt interpretieren können, unabhängig davon, ob sie über vollständige Unterstützung für erweitertes CSS verfügen, das Text durch Bilder ersetzt dieses Buch Vorteile. Es gibt keine perfekte Lösung
Allerdings ist es fast wie die Suche nach dem Heiligen Gral, den „perfekten“ Weg zu finden, Text durch ein Bild zu ersetzen ... denn es gibt ihn noch nicht. Nur einen, der überhaupt funktioniert Browser-Methode, kann aber nicht mit Hilfsprogrammen (z. B. Bildschirmleseprogrammen) verwendet werden. Es gibt andere Methoden, die funktionieren können, es sei denn, der Benutzer gibt an, dass der Browser keine Bilder anzeigt, aber auch CSS aktiviert.
Allerdings in diesem Fall Textschreiben Zu dieser Zeit gab es keine Methode, die alle (oder alle Benutzer) zufriedenstellen konnte, aber diese Methode wird heutzutage tatsächlich von vielen Websites verwendet. Sie müssen bei der Anwendung einer Bildersetzungsmethode besonders vorsichtig sein und dies auch verstehen wird Nebenwirkungen verursachen. Es kann verwendet werden, aber seien Sie vorsichtig.
Dies ist der Zweck dieses Kapitels. Mit der Zeit werden möglicherweise mehr CSS-Enthusiasten feststellen, dass dies der Fall ist Gleicher Effekt; vorher müssen wir die Techniken gut nutzen und die Gewinne und Verluste abwägen. Um Sie mit dem Konzept der Bildersetzung vertraut zu machen, schauen wir uns zunächst einige häufig verwendete Methoden an image Apropos Ersatztechniken (Fahrner Image Replacement; FIR).
                                                                        #P# Methode A: Fahrner Image Replacement (FIR)
Benannt nach Todd Fahrner, der diese Technik entdeckt hat, ist FIR die ursprüngliche Methode zum Ersetzen von Text durch Bilder mithilfe der CSS-Eigenschaft „Hintergrund“ (oder „Hintergrundbild“)
Douglas Bowman Das im März 2003 veröffentlichte hervorragende Lehrdokument „Using Background-image to Replacement Text“ (http://www.php.cn/) machte auf diese Methode aufmerksam.
Lassen Sie uns ein einfaches Beispiel verwenden, um die FIR-Leiste zu ersetzen Titeltext mit einem Bild. Tag-Quellcode
Der Tag-Quellcode, der als Nächstes ersetzt werden soll:

Fahrner Image Replacement

Dies ist nur ein einfacher Titel-Tag mit Text, der später durch ein Bild ersetzt wird. Sie werden feststellen, dass dem Tag

eine eindeutige ID zugewiesen ist, wir können diesen Titel jedoch später vollständig steuern.
Abbildung 14-1 zeigt den Effekt, wenn die Hälfte des Browsers diesen Quellcode anzeigt, wobei der Standardwert des Browsers verwendet wird, um den Titel anzuzeigen (in diesem Beispiel die Schriftart Verdana).

Abbildung 14-1 Standardstil für Titel Zusätzliche Tags FIR erfordert einen zusätzlichen Satz von Tags, die den Text zusätzlich zum Titel-Tag umgeben, der den Quellcode markiert. Sie können beliebige Tags verwenden, aber die allgemeine Natur des Das beste Tool, um die Arbeit zu erledigen. Ohne das Hinzufügen von Stilen hat keinen Einfluss auf den Anzeigeeffekt.

Fahrner Image Replacement

Jetzt haben wir das zusätzliche -Tag platziert Bereit, es in CSS hinzuzufügen. CSS-Inhalt

Die Essenz von Methode A besteht darin, die beiden Tag-Sätze zu verwenden, die Sie benötigen, um jeweils zwei Aufgaben auszuführen, dann den Text mit dem -Tag auszublenden und dann Stile zum

-Tag hinzuzufügen. Geben Sie das Hintergrundbild an. Aufgrund dieser beiden Schritte werden zwei Etikettensätze verwendet. Text ausblenden
Verwenden Sie zunächst das Anzeigeattribut des -Tags, um den Text auszublenden

#fir span {

display: none;
}

Dadurch wird der Text im -Tag vollständig ausgeblendet und der Browser zeigt nichts an. Dies ist der erste Schritt. Entfernen Sie den Text vollständig, und es besteht keine Notwendigkeit Machen Sie einen Screenshot. Wie Sie sich wahrscheinlich vorstellen können, wird das Ergebnis leer sein. Geben Sie den Hintergrund an

Erstellen Sie zunächst mit Photoshop ein Textbild (Abbildung 14-2). Natürlich können Sie auch andere Bildbearbeitungsprogramme verwenden. Achten Sie auf die Länge und Breite des Bildes Verwenden Sie es später.

Abbildung 14-2 fir.gif, ein Bild, das zum Ersetzen von Text verwendet wird
Abbildung 14-2 Die Größe dieses Bildes ist 287 Pixel breit und 29 Pixel hoch. Wir werden die Größe festlegen des Bildes zu < ;h1>Hintergrundbild für Tag.

#fir {
Breite: 287px;
Höhe: 29px;
Hintergrund: URL (fir.gif) no-repeat;
}
#fir span {
display: none;
}

Previous Verwenden Sie das Anzeigeattribut, um den Textinhalt im -Tag auszublenden. Verwenden Sie hier das Hintergrundattribut, um die Länge, Breite und den Bildnamen des Ersatzbilds anzugeben. h1>-Tag Die Größe entspricht genau der des Bildes (287 * 29 Pixel) und das Bild wird hinter dem zuvor durch die Anzeige ausgeblendeten Text angezeigt Browser, und das Ergebnis ist nur ein schönes Bild!

Abbildung 14-3 Der Effekt von Fahrners Bildersetzungsmethode Vorteile
Verwenden Sie CSS anstelle von Markup-Syntax, um Bilder bereitzustellen, sodass Sie sicher sein können, dass Browser, die CSS nicht unterstützen, den Titeltext anzeigen können. Wenn Sie das Bild ersetzen müssen, müssen Sie nur ein CSS ändern , ohne die Tabelle und den Quellcode ändern zu müssen.

Aber diese Vorteile bringen auch einige sehr wichtige Nachteile mit sich, die es zu erwähnen gilt. Nachteile

Der Usability-Experte Joe Clark hat die Auswirkungen der Bildersetzungsmethode von Fahrner auf Benutzer, die Bildschirmlesegeräte oder andere Hilfsgeräte zum Lesen von Seiteninhalten verwenden, ausführlich untersucht.
Die Ergebnisse seiner Tests finden Sie in seinem Artikel „See Facts“. und Meinung zu Fahrner Image Replacement“ (http://www.php.cn/). In diesem Artikel stellte er fest, dass die meisten Screenreader (vielleicht fälschlicherweise) dieser Aussage folgen:

#fir span {

display: none;
}

Der Text wird nicht nur optisch ausgeblendet, diese Regeln machen ihn auch für diejenigen, die einen Screenreader durchsuchen, völlig unsichtbar. Der Titelinhalt kann nicht angezeigt werden Einige würden argumentieren, dass das Anzeigeattribut nur von Geräten mit Bildschirmen analysiert werden sollte, damit Designer eine genauere Kontrolle darüber haben, wie das System zukünftige Bilder anzeigt . Oder der Screenreader sollte einem der vorhandenen Medientypen entsprechen, z. B. Aural. Zusätzlich zu den Problemen bei der Textdarstellung weist FIR zwei Nachteile auf: ​ Damit diese Methode funktioniert, ist ein Satz von -Tags ohne jegliche Semantik erforderlich. ​ In seltenen Fällen, wenn der Benutzer den Browser schließt, um Bilder anzuzeigen, aber die CSS-Unterstützung aktiviert (normalerweise, um Bandbreite zu sparen), werden weder Text noch Bilder angezeigt. Wägen Sie die Vor- und Nachteile ab

Tatsache ist, dass Designer durch die Verwendung von FIR das Risiko eingehen, Menschen mit Behinderungen keinen vollständigen Inhalt bereitzustellen, und Benutzer, die die Bildanzeige deaktivieren und CSS aktivieren, gehen ebenfalls das gleiche Risiko ein Hier muss abgewogen werden. Verstehen Sie die Mängel und verwenden Sie es mit Vorsicht.
Es gibt Situationen, in denen es sinnvoll ist, FIR zu verwenden. In der Einheit „Technikerweiterung“ später in diesem Kapitel werde ich zwei solcher Situationen analysieren.
Während diese Ergebnisse der Usability-Forschung bekannt wurden, passen sich andere Designer und Entwickler ständig an Bildersetzungstechniken an, finden neue Möglichkeiten, regulären Text zu „verstecken“ und passen Bilder für Peking an. Schauen Sie sich also die folgenden Methoden an                                                                         #P# Methode B: Leahy / Langridge Image Replacement Method (LIR)
wurde gleichzeitig von Seamus Leahy (http://www.php.cn/) und Stuart Langridge (http://www.php.cn/) entwickelt Das Ziel dieser Methode besteht darin, das Problem der Bildersetzung zu lösen, ohne das bedeutungslose, aber notwendige Tag zu verwenden.
LIR verwendet nicht das Anzeigeattribut, um Text auszublenden, sondern die Höhe des Das Outsourcing-Element (in diesem Beispiel (

)) ist auf 0 gesetzt und padding-top ist auf die gleiche Höhe wie das Ersatzbild gesetzt, um den Text aus dem Weg zu drängen. Markup-Quellcode und CSS
Da diese Methode keine zusätzlichen -Tags erfordert, kann der Markup-Quellcode reduziert werden auf:

Leahy / Langridge Image Replacement

Der CSS-Code, der erforderlich ist, um den Text durch das Bild in Abbildung 14-4 zu ersetzen, ist vollständig in der folgenden Anweisung enthalten:

#lir {
padding: 90px 0 0 0;
overflow: versteckt;
background: url(lir.gif) no-repeat;
height: 0px !important; /* für die meisten Browser */
height /**/:90px; /* für IE5/Win*/
}

Abbildung 14-4 lir.gif erstellt mit einem Bildeditor
Das zum Ersetzen des Texts verwendete Bild ist 90 Pixel hoch. Stellen Sie daher die obere und untere Höhe auf den gleichen Wert ein. Bei den meisten Browsern setzen wir die Höhe auf 0, was dem Festlegen des Texts (oder dem Einschließen von ) wird die !important-Regel vollständig entfernt, um sicherzustellen, dass dieser Wert anstelle des Werts danach verwendet wird (nur für IE5 für Windows wird die zweite Höhenregel ignoriert). IE5 für Windows wird es übernehmen. Das miserable Box-Modell
Die letzte Regel behebt das Problem, dass IE 5 für Windows das CSS-Box-Modell falsch analysiert (siehe Kapitel 12 „Box-Modell-Problem“), da IE5 für Windows den inneren Patch zwischen Breite und Höhe ansammelt . innerhalb, daher muss speziell für diesen Browser ein korrigierter Wert angegeben werden.
In diesem Beispiel entspricht die Höhe der Höhe des Ersatzbildes. Nachteile
Obwohl Methode B redundante -Tags entfernen kann (das Korrigieren des Quellcodes von Tags ist immer eine gute Sache), hat sie den gleichen Nachteil wie Methode A, nämlich das Deaktivieren von Bildern und Benutzern, die Das Aktivieren von CSS hat damit nichts zu tun.
Ein weiterer Nachteil von LIR ist, dass es einen Box-Modell-Hack erfordert, damit IE5 für Windows ordnungsgemäß funktioniert.
Da Methode B das Anzeigeattribut nicht verwendet Wenn Sie den Text ausblenden, können wir davon ausgehen, dass diese Methode für die Verwendung von Screenreadern nützlich ist. Sie sollten jedoch wie bei Methode A auch bei der Verwendung der Leahy/Langridge-Methode auf die Benutzerfreundlichkeit achten Bildanzeige ausschalten/CSS aktivieren".
Schauen wir uns eine andere von Mike Rundle an. Die entdeckte Bildersetzungsmethode Deformation.
                                                                        #P# Methode C: Phark-Methode
Das Beste am Internet ist, dass es immer Menschen gibt, die bestehende Technologien verbessern und verschiedene Wege finden, um dasselbe Ziel zu erreichen. Im August 2003 erstellte Entwickler Mike Rundle sein eigenes Image Die Ersatzmethode (http: //www.php.cn/) verwendet eine spezielle Idee, um einen großen negativen Texteinzugswert für den Text anzugeben, den Sie ausblenden möchten. Der Text wird theoretisch immer noch auf dem Bildschirm angezeigt, aber er wird die Anzeige überschreiten Viele Bereiche werden nicht einmal auf den größten Bildschirmen angezeigt. Was für ein cleverer Ansatz. Markup-Sprache und CSS
Ähnlich wie Methode B erfordert auch die Phark-Methode (benannt nach Mikes Website-Spitznamen) keine zusätzlichen Tags, um ordnungsgemäß zu funktionieren. Bei Verwendung von Methode C sieht der Quellcode des Titel-Tags wie folgt aus:

Die Phark-Methode

Diese Methode muss nicht das zusätzliche -Tag verwenden, das für die FIR-Methode erforderlich ist Wir sehen uns den versteckten Text an und ersetzen ihn durch den einfachen CSS-Inhalt, der zum Ersetzen des Bildes in Abbildung 14-5 erforderlich ist:
Abbildung 14-5 Das 26 Pixel große Bild phark.gif, das wir verwenden, um das zu ersetzen Text

#phark {
height: 26px;
text-indent: -5000px;
background: url(phark.gif) no-repeat;
}

Wie Sie sehen, ist Methode C derzeit die einfachste Methode. Sie erfordert keinen Box-Modell-Hack oder zusätzliche Tags. Durch Festlegen eines übertriebenen negativen Einzugswerts für den Text kann der Text aus dem Bildschirm verschoben werden Sein Inhalt ist für Benutzer unsichtbar.
Ähnlich wie bei Methode B sollten Benutzer von Bildschirmleseprogrammen den Inhalt des Titeltexts normal hören können, was tatsächlich eine Verbesserung darstellt. Immer noch nicht perfekt
Obwohl die Phark-Methode am einfachsten zu implementieren ist, verursacht sie immer noch Probleme, wenn „Bildanzeige ausschalten und CSS aktivieren“. Obwohl es sich nicht einfach anhört, ist dies der Grund, warum ich diesen Text geschrieben habe. Derzeit gibt es noch keine perfekte Lösung.
Lassen Sie uns die drei zuvor gezeigten Methoden überprüfen und ihre Unterschiede zusammenfassen.
                                                                        #P# Zusammenfassung
Drei häufig verwendete Bildersetzungstechniken wurden sorgfältig untersucht, beginnend mit der frühesten Bildersetzungsmethode von Fahrner, gefolgt von ihren beiden Varianten. Obwohl keine davon perfekt ist, sollten Techniken wie die von Mike Rundle der Perfektion sehr nahe kommen in der realen Welt angewendet, aber Sie müssen auf einige Fallstricke und Mängel achten.
Lassen Sie uns die Hauptunterschiede zwischen diesen drei Methoden analysieren:
Methode A: Erfordert einen zusätzlichen Satz bedeutungsloser -Tags. Wenn dieser Text geschrieben wird, sind häufig verwendete Screenreader vom Anzeigeattribut betroffen und lesen keinen Inhalt (laut Forschungsergebnissen von Joe Clark). Bei „Bildanzeige ausschalten und CSS aktivieren“ wird nichts angezeigt.
Methode B: Keine zusätzlichen Tags erforderlich Screenreader sollten in der Lage sein, den Inhalt normal zu lesen. So verwenden Sie den Box-Modell-Hack für IE5 für Windows. Bei „Bildanzeige ausschalten und CSS aktivieren“ wird nichts angezeigt.
Methode C: Keine zusätzlichen Tags erforderlich Screenreader sollten in der Lage sein, den Inhalt normal zu lesen. Bei „Bildanzeige ausschalten und CSS aktivieren“ wird nichts angezeigt.
Alle gängigen Methoden haben jetzt den letzten Mangel, aber da sich immer mehr Entwickler mit den Techniken des Bildaustauschs befassen, glaube ich, dass wir eines Tages eine Lösung finden werden, die alle zufriedenstellen kann.
Bis dahin gibt es mehrere praktische Konzepte für die Bildersetzung sind erwähnenswert, zwei davon werden später in diesem Kapitel in der Einheit „Technikerweiterung“ besprochen.
Ein wichtiger Punkt, der erwähnenswert ist: Dave, ein standardkonformer Designer. Shea beobachtet ständig die neuesten Entwicklungen bei der Bildersetzung Technologie und unterhält eine gut organisierte Seite, die viele verwandte Techniken dokumentiert. Schauen Sie sich unbedingt Daves „Revised Image Replacement“ an (http://www.php.cn /).
                                                                        #P# Kompetenzerweiterung
In dieser Einheit werfen wir zunächst einen Blick auf zwei reale Situationen, in denen die Bildersetzungstechnologie korrekt angewendet werden kann. Zunächst werfen wir einen Blick auf nützliche Techniken zur Logoersetzung. Dies ist eine Promotion von Douglas Bowman von FIR Technik (Methode A) wurde mir zunächst erklärt. Zweitens werde ich erläutern, wie die Website von Fast Company die Bildersetzungstechnologie verwendet, um ein Navigationssystem ohne Verwendung von JavaScript zu erstellen. Logo-Ersetzung
Zu Beginn dieses Kapitels haben wir besprochen, wie man CSS verwendet, um Text durch Bilder zu ersetzen. Diese Methoden haben bestimmte Nachteile, aber diese Nachteile verschwinden in einem Sonderfall vollständig: bei der Verwendung von Bildern... ..Ersetzen Sie ein anderes Bild .
Aber warum solltest du das tun wollen? Einer der Gründe, warum Hi-Fi und Lo-Fi
ein Bild durch ein anderes ersetzen, kann darin bestehen, unterschiedliche Website-Identitäten bereitzustellen, eine für Browser, die CSS vollständig unterstützen (kann das Hintergrundattribut korrekt verarbeiten), und die andere Diese Methode ist Besonders nützlich für ältere Browser, Handheld-Geräte, Bildschirmlesegeräte usw.
Diese Methode ist besonders praktisch, wenn Ihr Logo eine transparente Farbe oder eine spezielle Farbe hat, die mit CSS erstellt wurde. Möglicherweise möchten Sie die Lo-Fi-Version anzeigen Die Seite sieht immer noch gut aus, wenn CSS deaktiviert ist oder nicht unterstützt wird. Beispiel
Um die Verstrickung von Urheberrechtsanwälten zu vermeiden, verwende ich noch einmal meine persönliche Website als Beispiel. Sie ersetzt nicht nur das Logobild, sondern berücksichtigt auch andere Seiten als die Homepage des Logos kann weiterhin als Hyperlink angeklickt werden, sogar zurück zur Homepage.
Werfen wir einen Blick auf den Quellcode, den ich zum Markieren des Logos auf der Homepage verwendet habe, und den Quellcode, der auf anderen Seiten verwendet wird.
Dies ist die Homepage:

< ;p id="logo">
span>

Die Logos aller anderen Seiten können angeklickt werden, um den Benutzer dorthin zurückzubringen die Homepage:

style="max-width:90%" alt="Auszeichnungssprache – Bildersatz_HTML/Xhtml_Webseitenproduktion" />

Ein Paar Logos
Abbildung 14 - 6 und 14-7 sind die beiden Logos, die ich verwende. Das erstere ist die Inline-Version (Lo-Fi), die auf der Seite ohne Verwendung des Stils angezeigt wird, während das letztere das Bild ist, auf das in modernen Browsern verwiesen wird (Hi). -Fi).
Abbildung 14-6 Das logo_lofi.gif, das ein Browser ohne aktiviertes CSS sehen wird
Abbildung 14-7 Das logo_corn, das ein Browser sehen wird, der CSS aktiviert CSS-Inhalt
Verknüpfen Sie diese Dinge und fügen Sie CSS hinzu, um alles möglich zu machen!
Stellen Sie zunächst die Breite des Inline-Bildes auf 0 ein, um es auszublenden. Denken Sie daran, das Anzeigeattribut nicht zum Ausblenden des Lo-Fi-Logos zu verwenden. Damit Screenreader eine bessere Chance haben, das ausgeblendete Bild (Alt-Text-Inhalt) richtig auszusprechen:

#logo img {
display: block;
width: 0;
}

Als nächstes geben Sie das Hi-Fi-Logo-Bild mit dem Hintergrundattribut für das -Tag an. Ja, das ist sehr bedeutungslos und semantisch bedeutungslos, aber behandeln wir es dieses Mal als Ausnahme >

#logo span {
width: 173px;
height: 31px;
background: url(../images/logo_corn.gif) no-repeat;
}

Sie sollten herausgefunden haben, dass wir lediglich die Höhe und Breite auf die gleiche Höhe wie das Ersatzbild einstellen und das Hintergrundbild als Hi-Fi-Version angeben müssen. Hyperlinks wiederherstellen
Schließlich hoffen wir immer noch, dass Benutzer auf das Logo klicken und zur Startseite zurückkehren können. Aber was ist zu tun, nachdem die Bildbreite auf 0 gesetzt wurde? im gesamten Bereich.
Wir fügen eine Anweisung zum des Logos hinzu, um seinen Klickbereich so zu „dehnen“, dass er das gesamte Hintergrundbild abdeckt, mit der gleichen Breite wie das ersetzte Bild.

# logo a {
border-style: none;
display: block;
width: 173px;
}

Durch Angabe der Breite von Stellen Sie sogar zwei Bilder unterschiedlicher Größe bereit.
Durch das Hinzufügen des Attributs „border-style“ wird der Standardrahmen entfernt, den die meisten Browser automatisch für Bildlinks hinzufügen.

Abbildung 14-8 Hyperlink-Logo mit Auswahlbereich Ergebnis Wenn Sie sich die Abbildungen 14-9 und 14-10 ansehen, können Sie feststellen, dass nach Verwendung des gerade gezeigten Markup-Quellcodes und -Stils eine Reihe von Logos für Benutzer bereitgestellt werden kann, die keine Stile verwenden und CSS nicht aktivieren können Wenn das Logo einen Link hat, kann der Auswahlbereich immer noch mit einem einfachen CSS getroffen werden.

Abbildung 14-9 Ein Browser, der CSS unterstützt, zeigt das hi_fi-Logo an
Abbildung 14-10 Wenn CSS nicht unterstützt wird Unterstützt Das gezeigte Lo-Fi-Logo Ich glaube, dieses Beispiel zeigt eine reale Situation, in der Sie Techniken zum Ersetzen von Bildern ohne schlechtes Gewissen verwenden können, insbesondere das Ersetzen eines vorhandenen Inline-Bilds durch ein anderes CSS-referenziertes Bild
Fahren Sie als Nächstes fort Um eine weitere Fallstudie aus der Praxis zu betrachten: Dies ist das Navigationssystem, das ich für die Fast Company-Website entworfen habe, das ungeordnete Listen, Bildersetzung ... und einige andere Techniken kombiniert                                                                         #P# Einfach zu verwendender Effekt zum Umdrehen von Bild-Tags
Diesen speziellen Fall als „einfach zu verwenden“ zu bezeichnen, ist möglicherweise etwas unwahr. Das Bild-Tag-Navigationssystem, das ich für die Fast Company-Website geschrieben habe, weist dieselben Mängel auf wie die zuvor besprochene Technologie zum Ersetzen von Bildern Das heißt, Benutzer, die „die Bildanzeige deaktivieren und CSS aktivieren“, sehen nichts.
Wenn Sie jedoch Bilder zum Erstellen von Navigationsinhalten verwenden müssen (sei es, um Platzbeschränkungen oder Schriftartanforderungen zu überwinden), ist dieser Ansatz sinnvoll Es ist sehr wertvoll und lesenswert. Der Teil der Benutzerfreundlichkeit bedeutet: Letztendlich müssen die Navigations-Tags mit Bildern erstellt werden, aber der Tag-Quellcode ist immer noch flexibel, leichtgewichtig und ungeordnete Liste, alle Browser, Telefone, PDAs Es sollte alles normal funktionieren.
Werfen wir einen Blick darauf, wie die gesamte Methode durchgeführt wird. Frage
Als ich Mitglied des Fast Company-Webteams war, mussten wir einmal mehr Elemente in die obere Navigationsleiste von FC einfügen, aber der Platz war aufgebraucht. Wie viel hat die vorherige Navigationsliste gekostet? , hinzufügen Es wurde aus einer ungeordneten Liste der oben genannten Stile erstellt, aber wenn die Fensterauflösung 800*600 beträgt, reicht der verbleibende Platz nicht einmal aus, um ein weiteres Element einzufügen. Lösung
Ich beschloss, den Ansatz „Fast Rollovers, No Preload Needed“ (http://www.php.cn/) des tschechischen Autors Petr Stanicek (alias Pixy) sowie das zuvor erwähnte Bild von Leahy/Langridge zu kombinieren und zu modifizieren Kapitel. Ersetzungsmethode, um einen benutzerfreundlichen Effekt zum Umdrehen von Bildetiketten ohne Verwendung von JavaScript zu erstellen (Abbildung 14-11)

Abbildung 14-11 Etikettennavigationssystem von FastCompany.com, die Situation in Februar 2004
Wie geht das? Markieren Sie den Quellcode: Eine Liste erledigt alles
Ich hoffe, weiterhin einfache ungeordnete Listen zum Erstellen von Navigationsspalten im Quellcode verwenden zu können. Die Vorteile der Verwendung von Listen zum Erstellen von Navigationsspalten wurden an vielen Stellen in diesem Buch erwähnt: Sie sind sehr prägnant und können normal in Textbrowsern, Bildschirmleseprogrammen, PDAs, Mobiltelefonen usw. verwendet werden.
Das Folgende ist das ursprüngliche Erscheinungsbild der Liste (ich habe einige Elemente zur Demonstration gelöscht):

Home

Guides

Magazine li>

Archives

Jetzt einfach und klar für jedes< ;li>Fügen Sie den Tags eine eindeutige ID hinzu, damit Sie später einige Tricks damit machen können (das heißt, den langweiligen Text jedes Tags durch ein schönes Bild ersetzen):

• id="thome">Home

< ;li id="tguides">Guides

• id= "tmag ">Magazine


• id="tarchives">< ;a href="/articles/">Archives

Verwenden Sie dann Photoshop (oder Ihre bekannte Bildbearbeitungssoftware), um ein Etikett zu erstellen Bilder .
Ein Bild, drei Zustände
Die Essenz des hervorragenden schnellen Spiegeleffekts von Pixy besteht darin, für jedes Navigationselement ein Bild zu erstellen, das einen Normalzustand, einen Mouseover-Zustand und einen aktivierten Zustand enthält Verwenden Sie CSS, um die Hintergrundposition zu ändern und jeden Status zum richtigen Zeitpunkt anzuzeigen.
Diese Methode beendet die bisherige Praxis, Bilder zu ersetzen und viele Bilder vorab zu laden. Dies ist wirklich eine gute Möglichkeit, Produktionszeit zu sparen und die Download-Geschwindigkeit ist auch um einiges höher. Abbildung 14-12 ist ein Bild, das ich für die Website-Navigation von Fast Company erstellt habe. Die Höhe jedes Bundesstaates beträgt 60 Pixel 20 Pixel sind der Normalzustand und die nächsten 20 Pixel sind der Mouseover-Zustand und die unteren 20 Pixel sind der aktivierte Zustand (wird auch verwendet, um den „Sie sind hier“-Effekt auszudrücken. Jede verwendete Beschriftung hat ein ähnliches Bild). .

Abbildung 14-12 Ein Bild mit drei Zuständen Wenn wir für jeden Zustand ein Bild verwenden, können wir den herkömmlichen hässlichen JavaScript-Inhalt wegwerfen, der zum Erzeugen dieser Art von Effekt erforderlich ist, und stattdessen einfache verwenden CSS-Regeln machen Mausbewegungseffekte möglich. Außerdem müssen wir keine Bilder vorab laden CSS-Inhalt: Hier passiert die Magie
Zuerst richten Sie Regeln ein, die von allen Navigationselementen gemeinsam genutzt werden, damit Sie nicht für jedes Tag dieselben Regeln wiederholen müssen. Fügen Sie dann unabhängige Regeln für jede Listenelement-ID hinzu. Geben Sie ein exklusives Hintergrundbild und eine Breite für

an. Nur diese beiden Eigenschaften sind für jedes Label unterschiedlich. Der CSS-Inhalt ist ungefähr wie folgt:

#nav {
margin: 0 ;

padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: versteckt;
}
#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}
#nav a {
float: left;
padding : 20px 0 0 0;
overflow: versteckt;
height: 0px !important;
height /**/:20px; /* nur für IE5/Win*/
}
#nav a:hover {
Hintergrundposition: 0 – 20 Pixel; Dieser CSS-Abschnitt entfernt den Listenstil und den inneren Patch, dreht die Liste in die Horizontale und verbirgt den Text im Hyperlink. Dies ist bei allen #nav;-Regeln der Fall , und es besteht keine Notwendigkeit, diese Regeln für jedes Projekt einzeln zu wiederholen.
Als nächstes spezifiziere ich die „ausgewählte“ Klasse für die Tags, die ich weiterhin hervorheben möchte, und gebe dem Leser einen Hinweis darauf, wo sie sich auf der Website befinden. Diese Regeln werden mit dem :active-Status geteilt. Möglicherweise ist Ihnen auch aufgefallen, dass wir Duplizieren Sie die Regeln „#nav“ und „#nav“. Die Regeln „list-style:none;“ und „display:inline;“ werden hinzugefügt, um IE5 für Windows zufrieden zu stellen. In einer perfekten Welt würde es ausreichen, diese Regeln einmal für #nav anzugeben, aber natürlich Dies ist nicht der Status Quo.
Als nächstes fügen Sie Regeln für jede ID hinzu, geben Sie Hintergrundbild und Breite an. Das Folgende ist ein Beispiel:

#thome a {
width: 40px;
Hintergrund: url(home.gif) oben links, keine Wiederholung;
}

Natürlich hat jedes Tag eine ähnliche Aussage. Ergebnis
Abbildung 14-13 zeigt die Auswirkung der Beschriftung im Normalzustand, im Mouseover-Zustand und im ausgewählten Zustand. Wenn Sie die Auswirkung der tatsächlichen Operation sehen möchten, können Sie sich das Beispiel ansehen oben SimleBits im Quellcode (http://www.php.cn/).

Abbildung 14-13 Label-Navigationseffekt, der drei verschiedene Zustände demonstriert. Warum es verwenden? Es ist sehr leichtgewichtig und der Markup-Quellcode ist nichts weiter als eine ungeordnete Liste. Die Anwendung ist einfach: Mithilfe der Stuart-Methode haben wir dafür gesorgt, dass Screenreader die Textlinks aussprechen können. Kein JavaScript: Laden Sie keine Bilder vor und erstellen Sie keine separaten Bilder für jeden Bundesstaat, um den Mouseover-Effekt zu steuern. Es ist wunderschön: Es erfordert viel Geschick, den Text dort zu platzieren, wo er sein sollte, sodass wir einfach [schöne Bilder] verwenden können. Aber warten Sie, die Größe des Textes ändert sich nicht! Dem guten Rat von Douglas Bowman folgend und auf das Problem der Lesbarkeit und die Unmöglichkeit, die Größe der Bilder zu ändern, bin ich noch einen Schritt weiter gegangen und habe einen zweiten Satz Etikettenbilder mit vergrößertem Text erstellt . Dann habe ich einfach diese Regeln in vorhandenen mittleren und großen Ersatz-Stylesheets überschrieben, indem ich den Stylesheet-Umschalter von Paul Sowden verwendet habe, der zuvor in Kapitel 10, „Erweiterungen zu Tipps“ erwähnt wurde das gleiche wie der vorherige Code, nur die Bildposition wird geändert, Breite:

#thome a {

Breite: 46px;
Hintergrund: url(guides_lg.gif) oben links keine Wiederholung;
}

Abbildung 14-14 zeigt den vergrößerten Etiketteneffekt auf der Fast Company-Website. Sie können feststellen, dass der horizontale Abstand kleiner geworden ist und die vertikale Größe mit der des Originaletiketts übereinstimmt. Mit der Möglichkeit, Bildgrößen zu kennzeichnen, helfen wir nicht nur Benutzern mit Sehbehinderung, sondern halten auch bestehende Designdetails ein

Abbildung 14-14 Navigationsleiste mit vergrößertem Symbolbild durch Ersetzen Stylesheet Kompatibilität
Diese Methode wurde getestet und sollte auf allen Browsern nach Version 5.0 normal funktionieren.Für die Website von Fast Company habe ich mich für die Verwendung von position:absolute entschieden, um die Position von #nav für eine perfekte Ausrichtung aller Elemente festzulegen Die Hintergrundfarbe des Titelbereichs scheint durch. Diese Methode funktioniert einwandfrei, außer in Opera7 für Windows, wo die Angabe einer Breite für absolut positionierte Elemente erforderlich ist.
Dies ist kein Problem #nav Ganz gut:

#nav {

margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline ;
overflow: versteckt;

width: 201px;
}
Jetzt können wir gut schlafen, und auch Opera-Fans sind glücklich. Fazit

Jetzt sind Sie über die neuesten Entwicklungen in der Bildersatztechnologie auf dem Laufenden. Obwohl es noch keine perfekte Lösung gibt, hoffe ich dennoch, dass Sie über relevante Kenntnisse verfügen und es wert sind, sie zu verstehen und damit zu experimentieren.
Darüber hinaus hoffe ich, Ihnen den Einstieg zu erleichtern, indem ich Ihnen zwei reale Anwendungen der Bildersetzungstechnik demonstriere und Sie ... ja, Sie ... derjenige sind, der die nächste Best Practice entdeckt. Glück und Ruhm sind das Ich warte auf Sie!
Die Übersetzung dieses Buches ist zu Ende und es sind nur noch zwei Kapitel übrig. Es wird geschätzt, dass sie morgen tiefer in den Herzen der Menschen verwurzelt sein werden. haha, ich habe sehr davon profitiert