Auszeichnungssprache – List_HTML/Xhtml_Webseitenproduktion-HTML-Tutorial-php.cn

Standardisierte Designlösungen – Auszeichnungssprachen und Stilhandbücher

Webstandardlösungen Das Markup- und Stilhandbuch
Teil 1: Machen Sie sich mit dem Markup vertraut Beginnen wir mit der Markup-Syntax
Kapitel 1 Checkliste
Checklisten sind auf fast jeder Seite im Web zu finden. Eine Liste mit Hyperlinks, eine Liste mit Ihren Lieblingsfilmen und sogar eine Navigationsliste für die gesamte Website. Das Erstellen einer Liste erscheint vielleicht willkürlich, aber wir werden uns damit befassen Genau das ist es. Mehrere gängige Methoden zum Erstellen von Listen und Sammlungen haben Vor- und Nachteile. Später werden wir einige Beispiele für die Verschönerung einer gemeinsamen Liste mit ihren Vor- und Nachteilen auflisten.
Lass uns einkaufen gehen
Ursprünglich hatte ich vor, für dieses Kapitel eine Wäscheliste als Beispiel zu verwenden, aber bald wurde mir klar, dass ich keine Ahnung hatte, welche Artikel in eine solche Liste aufgenommen werden sollten, also... für Nehmen wir als Beispiel das Essen als Beispiel!
Stellen Sie sich vor, Sie müssten eine Lebensmittelliste auf Ihre Website stellen. Sie fragen sich vielleicht, warum Sie eine Lebensmittelliste auf Ihre Website stellen sollten Grund, über Listen nachzudenken ...
Nehmen wir an, dass die Liste auf der Seite wie eine Liste aussehen soll – also eine lange vertikale Liste mit jedem Element in einer eigenen Zeile:
Äpfel
Spaghetti
Grüne Bohnen
Milch
Sieht sehr einfach aus, nicht wahr? Ähnlich wie bei vielen Aspekten des Seitendesigns und der Seitenentwicklung können wir den gleichen (oder ähnlichen) Effekt durch viele verschiedene Methoden erzielen. Wie bei allen Beispielen später In diesem Buch werde ich eXtensilble verwenden Zeigen Sie alle Beispiele aus der Perspektive der HyperText Markup Language (XHTML) – und stellen Sie sicher, dass die ausgewählten Methoden die korrekte Markup-Syntax gemäß World Wild verwenden Verschiedene vom Web Consortium (W3C) entwickelte Standards.
Wir können nach jedem Element problemlos ein
Tags sind fertig, oder Sie können verschiedene Listenelement-Tags verwenden, um diese Arbeit abzuschließen. Schauen wir uns nun drei völlig unterschiedliche Methoden und die Eigenschaften jeder Methode an

Fragestunde

Welche der folgenden Methoden eignet sich am besten zum Erstellen einer Einkaufsliste

Methode A: Verwenden Sie
Zeilenumbruch Äpfel

Spaghetti

Grüne Bohnen
Milch
Methode A ist in der Tat eine weit verbreitete Methode und kann tatsächlich von Millionen von Seiten verwendet werden Viele von uns verwenden diese Methode ab und zu, oder? Wir möchten, dass jedes Element in der Liste in einer eigenen Zeile steht und ein Newline-Tag einfügt (in diesem Fall mit einem xhtml-kompatiblen selbstschließenden Standard-Tag
) erzeugt nach jedem Element einen Zeilenumbruch. Das sind alle seine Auswirkungen. Aber was ist, wenn wir dieser Lebensmittelliste einen anderen Stil hinzufügen möchten als anderen Seitenelementen? Wenn wir beispielsweise möchten, dass die Farbe aller Links in der Liste rot statt der standardmäßigen blauen Farbe ist, oder wenn wir die Farbe ändern möchten Die Schriftgröße? Wirklich, wir können nichts tun, wir sind durch den für das gesamte HTML-Dokument festgelegten Schriftstil eingeschränkt (falls vorhanden). Ohne Tags, die die Liste umgeben, können wir nichts erstellen eine eindeutige CSS-Regel für die Liste.

Wrap

Wenn wir der Liste eine Zeile wie „Five Foot Loaf of Anthony's Italian“ hinzufügen „Brot“. Abhängig von der Position dieser Liste auf der Seite besteht die Gefahr, dass zu lange Elemente in die nächste Zeile gefaltet werden, wenn nicht genügend horizontaler Platz vorhanden ist oder das Browserfenster des Betrachters schmal ist.
Gleichzeitig müssen wir auch berücksichtigen, dass Benutzer mit Sehbehinderung die Standardschriftgröße ändern können, um die Lesbarkeit zu verbessern. Wir glauben, dass Elemente wie in Abbildung 1-1 gezeigt leicht angeordnet werden können, aber höchstwahrscheinlich es wird so sein Abbildung 1 - 2 Auf diese Weise treten Zeilenumbrüche an unerwarteten Stellen auf. Wenn Leser die Schriftgröße erhöhen, ändert sich der Designstil vollständig

Hmm... Ich denke, ich sollte Brot kaufen, aber auf den Bildern 1-2 sind die beiden Wortzeilen auf dem Brot wirklich verwirrend. Wenn Sie ein Gerät mit kleinem Bildschirm wie ein Mobiltelefon oder einen PDA zum Lesen langer Zeilen verwenden, zeigen sich ähnliche Zeilenumbruchprobleme. Hardcore-Technik-Enthusiasten tragen möglicherweise einen Palm mit sich herum, um Einkaufslisten aufzuzeichnen. Pilot (und nicht Papier und Stift im herkömmlichen Sinne) schlenderte durch den Supermarkt, als er in den Regalen nach etwas namens „Anthony's Italian“ suchte. Hier möchte ich im Wesentlichen darauf hinweisen: Die Verwendung von Methode A berücksichtigt nicht die Variablen, die Designer beim Lesen von Webseiten nicht kontrollieren können

Methode B: Beißende Punkte

Äpfel

Spaghetti

Grüne Bohnen

Milk
Die meisten ausgereiften Browser fügen beim Parsen des

-Tags ein Punktsymbol hinzu Um diesen Effekt zu erzielen, fügen Sie das

-Tag hinzu, wenn das

-Tag nicht in einem entsprechenden übergeordneten Tag enthalten ist leistungsstarkes

und das andere übergeordnete Tag von

offen lassen würden.
Verwenden Sie
-Tag, um den korrekten Anzeigeeffekt einer ungeordneten Liste mit Zeilenumbruch zu simulieren, aber tatsächlich haben wir eine bessere Möglichkeit.
Es war schon immer sehr wichtig, die Gewohnheit zu entwickeln, die richtige Tag-Syntax zu schreiben. Wenn jemand diese liest, müssen wir uns in Zukunft keine Sorgen mehr über Probleme machen, die durch fehlende schließende Tags oder falsche verschachtelte Elemente verursacht werden Quellcodes können ihnen auch ein tieferes Verständnis der Wirkungen ermöglichen, die der Quellcode erzielen möchte.
Denken Sie daran, Online-Erkennungstools zu nutzen, um die von Ihnen übermittelte URI oder das von Ihnen hochgeladene Dokument zu überprüfen. Am Ende werden Sie das Gefühl haben, dass es sich lohnt

Methode C: Schließen
Äpfel

Spaghetti

Grün Bohnen

Milch

-Tag geschlossen, da
ein Element auf Blockebene ist, sodass es nicht mehr verwendet werden kann
-Tag, sodass jedes Element eine eigene Zeile einnimmt, aber uns fehlte seine äußere Struktur und es fehlte ein Element, das bedeutet: „Diese Gruppe von Elementen ist eine Liste!“
Aus semantischer Sicht ist dieses Problem ebenfalls sehr wichtig — Eine Liste ist eine Gruppe von Elementen, die zusammengehören. Daher sollten wir ihnen solche Tags hinzufügen. Darüber hinaus kann die Verwendung des richtigen Listen-Tags dem Browser, der Software oder dem Anzeigegerät klar mitteilen, dass es sich bei dieser Gruppe von Elementen um eine Liste handelt ist ein semantisches Tag. Die Bedeutung besteht darin, den Inhalt entsprechend den Kategorien zu strukturieren, zu denen er gehört.
Blockebene und Inline: HTML-Elemente können in zwei Typen unterteilt werden: Elemente auf Blockebene und Inline-Elemente beginnen in einer neuen Zeile und enden mit einem Zeilenumbruch, während Inline-Elemente in derselben Zeile wie andere Inline-Elemente angezeigt werden Elemente können andere Elemente auf Blockebene und Inline-Elemente enthalten, und Inline-Elemente können keine Elemente auf Blockebene enthalten.
Zu den Elementen auf Blockebene gehören:
,
-
,
usw. Zu den Inline-Elementen gehören:
,,, < ;q>Warten.
Wenn wir unsere Einkaufsliste aus einer reinen XML-Perspektive betrachten, würden wir sie vielleicht folgendermaßen annotieren:

Apples

Grün Bohnen
Milch

Die gesamte Liste hat ein Containerelement und alle Lebensmittel sind darin enthalten Die Art der Kategorisierung von Projekten ermöglicht es XML-basierten Anwendungen, alle Projekte einfach aus der Liste zu extrahieren.
Zum Beispiel muss ein Entwickler ein XSLT-Stylesheet schreiben und die Liste in XHTML, Klartext oder sogar eine PDF-Datei konvertieren. Da die Struktur der Listenelemente sehr klar ist, kann das Programm die Informationen leicht abrufen. und einige nützliche Verarbeitungen durchführen.
Obwohl ich mich in diesem Buch nicht direkt mit XML befasse, gelten diese Prinzipien auch für die XHTML-Welt. Wenn das Dokument eine sehr semantische Tag-Struktur verwendet, wird dies die Flexibilität des Dokuments in Zukunft verbessern Ist es besser, dem Dokument ein CSS-Stylesheet hinzuzufügen oder es zu ändern, um es verständlicher zu machen? – Solange die richtige Struktur bereitgestellt wird, kann viel Zeit eingespart werden, die bei zukünftigen Wartungsarbeiten verschwendet werden könnte.
Als nächstes schauen wir uns Methode D genauer an, um zu sehen, wie diese kombiniert werden. Ein Dokument, das von den meisten Browsern und Bildschirmleseprogrammen erkannt und angezeigt werden kann und uns gleichzeitig ermöglicht, das Dokument auf verschiedene Arten zu gestalten

Methode D: Angenehme Verpackung Beans

Milk

Was macht Methode D so besonders? Erstens ist ihre Syntax völlig korrekt und korrekt ungeordnet Das Containerelement
und jedes Element wurde durch das Element
Werfen wir einen Blick auf diese Vorteile:
Da wir unsere Einkaufsliste korrekt markiert haben, steht jeder Artikel in einer eigenen Zeile (aufgrund des

-Elements auf Blockebene) und die meisten Browser fügen links neben jedem Artikelsymbol einen kleinen Punkt ein und Führen Sie korrekte Inline-Einrückungen und Zeilenumbrüche durch (siehe Abbildung). 1 - 3)

Abbildung 1 - 3
Benutzer von PDAs, Mobiltelefonen oder anderen Geräten mit kleinem Bildschirm können auch eine klare, eindeutig zugehörige Organisation sehen, da wir diesen Geräten die Art der Daten (in diesem Beispiel eine Liste) mitteilen, damit diese Das Gerät kann entscheiden wie man entsprechend seinen eigenen Fähigkeiten anzeigt, um den besten Effekt zu erzielen.
Wenn aufgrund der Vergrößerung der Schriftgröße oder der Verringerung der Breite des Browserfensters ein Zeilenumbruch auftritt, wird der umbrochene Text in der Zeile eingerückt, um ihn an der ersten Textzeile auszurichten, sodass jede Zeile unabhängig von der Zeile leicht identifiziert werden kann Browserumgebung. Listenelemente

Zusammenfassung
Nachdem wir nun jeden möglichen Ansatz besprochen haben, lassen Sie uns kurz noch einmal Revue passieren lassen, was wir gerade besprochen haben: Methode A:
Der Liste können keine eindeutigen Stile hinzugefügt werden.
In schmalen Spalten oder auf Geräten mit kleinem Bildschirm können längere Inhalte aufgrund des Zeilenumbruchs missverstanden werden
Mangelnde Semantik Methode B:
Fügen Sie ein kleines Punktsymbol hinzu, um die Identifizierung jedes Elements zu erleichtern. Einige Browser zeigen das kleine Punktsymbol jedoch möglicherweise nicht an, wenn das übergeordnete Tag

fehlt
nicht in
platziert ist, bedeutet das Fehlen des schließenden Tags

, dass es schwierig ist, Stile hinzuzufügen.
ist nicht Standard Methode C:
Nach dem Hinzufügen des schließenden Tags wird das Tag
nicht mehr benötigt.
Das Weglassen des
-Elements erschwert das Hinzufügen bestimmter Stile zu dieser Liste
Nicht standardmäßige Methode D:
Entspricht dem Standard!
Machen Sie das Dokument semantisch und strukturell.
Die meisten Browser zeigen links neben jedem Element ein kleines Punktsymbol an.
Bei den meisten Browsern wird die Zeile nach einem Zeilenumbruch eingerückt
Es ist einfach, bestimmte CSS-Stile zu definieren
Wie Sie sehen, können Sie aus einem scheinbar einfachen Problem viel Wissen gewinnen. Selbst wenn Sie Methode D auf allen Ihren Seiten verwendet haben, ist es immer noch besser, zu fragen, warum Sie dies tun. Wir werden dies weiter untersuchen Die „Warum“-Frage in diesem Buch ermöglicht es Ihnen, in verschiedenen Situationen die am besten geeignete Methode auszuwählen.

Erweiterung der Fähigkeiten
Lassen Sie uns die Lebensmittelliste verwenden Entwickelt, um einige Möglichkeiten zum Definieren von CSS-Stilen auszuprobieren. Wir werden die Standardstile aufgeben, benutzerdefinierte Punktsymbole hinzufügen und sie dann in Querformat konvertieren, um sie in eine Navigationsleiste umzuwandeln.
Werfen Sie die Tupfen weg
„Ich mag diese kleinen Tupfen auf der Einkaufsliste wirklich nicht, ich denke, ich gehe einfach zu
zurück.“
Kein Grund, in alte Gewohnheiten zurückzufallen – Wir können weiterhin unsere strukturierte ungeordnete Liste verwenden und dann CSS verwenden, um die Punktsymbole und die Inline-Einrückung zu deaktivieren. Der Schlüssel besteht darin, dass wir die Struktur der Liste beibehalten und sie dann speziell in CSS darstellen.
Fügen Sie zunächst eine CSS-Regel hinzu, um das Punktsymbol zu entfernen:
ul{
list-style:none;
}
Die angezeigten Ergebnisse sind in Abbildung 1 - 4
Abbildung 1 - 4 Entfernen Sie das kleine Punktsymbol
Dann entfernen wir die Einrückung. Gemäß dem Standardwert haben alle ungeordneten Listen etwas Abstand auf der linken Seite, aber keine Sorge, wir können ihn nach Belieben abschneiden:
ul{
list-style:none;
padding-left:0;
}
Das Anzeigeergebnis ist in Abbildung 1 zu sehen - 5

Abbildungen 1 - 5
Obwohl die Abbildungen 1 - 5 mehrere aussehen und verwenden
-Tags ist fast derselbe, aber es handelt sich immer noch um eine standardmäßige, strukturierte ungeordnete Liste – Unabhängig vom Browser kann das Gerät bei Bedarf nur ein paar CSS-Regeln aktualisieren, um zu einem anderen Stil zu wechseln.

Verwenden Sie benutzerdefinierte Punktsymbole, um Ihren eigenen zu vervollständigen FantasieVielleicht möchten Sie die Punktsymbole in der Liste behalten, aber nicht die langweiligen Standardeinstellungen des Browsers verwenden, sondern Ihr eigenes Punktmuster verwenden. Es gibt zwei Möglichkeiten, das zu erreichen, was Sie wollen . Wollen- Und ich bevorzuge die zweite Methode, weil sie zwischen verschiedenen Browsern besser kompatibel sein kann.
Die erste Methode besteht darin, das List-Style-Image-Attribut zu verwenden, um das Bild anzugeben, das zum Ersetzen des Standardnamens mit kleinen Punkten verwendet wird.
ul{
list-style-image:url(i_hot.gif)
}
Dies ist die einfachste Methode, es gibt jedoch Unterschiede in der vertikalen Ausrichtung von Bildern zwischen verschiedenen Browsern. Der Unterschied ist dass einige Browser das Bild an der Mittellinie des Artikeltextes ausrichten und andere das Bild etwas höher platzieren. Es gibt eine kleine Inkonsistenz zwischen ihnen.
Um die Ausrichtungsprobleme zu vermeiden, die durch list-style-image in mehreren gängigen Browsern verursacht werden, bevorzuge ich eine alternative Methode: Verwenden Sie ein Bild als Hintergrund für jedes

-Element.
Zuerst müssen wir die Standardpunkte entfernen und dann unser eigenes Hintergrundbild hinzufügen:
ul{
list-style:none;
}
li{
background -image :url(i_hot.gif) no-repeat 0 50%;
padding-left:25px;
}
no-repeat weist den Browser an, das Hintergrundbild nicht zu kacheln (es wird standardmäßig gekachelt), und 0 50 % weist den Browser an, das Hintergrundbild 0 Pixel von links und 50 % von oben zu platzieren, sodass das Hintergrundbild i_hot.gif wird entsprechend der Mittellinie ausgerichtet. Bei 0 6px wird das Bild beispielsweise 0 Pixel von links und 6 Pixel von oben platziert.
Wir müssen auch einen 17-Pixel-Abstand auf der linken Seite des Listenelements hinzufügen, damit wir das Bild mit einer Breite von 20 Pixeln und einer Höhe von 11 Pixeln vollständig anzeigen können und dabei etwas Leerraum lassen, ohne den Text zu beeinträchtigen . Es gibt Überlappungen. Diese Daten sollten entsprechend der von Ihnen verwendeten Bildgröße angepasst werden

Navigationsliste
Auf meiner persönlichen Website teile ich mehrere Möglichkeiten, eine ungeordnete Liste in eine horizontale Navigationsleiste umzuwandeln, indem ich gewöhnliches, strukturiertes XHTML verwende, z. B. Erstellen Sie einen Tab-ähnlichen Effekt wie unseren Beispiel für eine Einkaufsliste.
Wir haben die Lebensmittelliste in eine Navigationsleiste für einen Online-Supermarkt umgewandelt (dieser Supermarkt verkauft nur wenige Dinge...).
Wir möchten, dass diese Navigationsleiste horizontal dargestellt wird und etwas hervorgehoben wird, wenn die Maus darüber bewegt und ausgewählt wird, damit wir den Effekt von Seitenregisterkarten simulieren können.
Zuerst fügen wir der Liste eine ID hinzu, damit wir CSS-Stile dafür individuell definieren können, und wir werden außerdem jedes Lebensmittel in einen Link umwandeln

Äpfel

Spaghetti

Grüne Bohnen

Milk

Jetzt beginnen Sie mit dem Hinzufügen einiger Hilfs-CSS:
#minitabs{
margin :0 ;
padding:0 0 20px 10px;
border-bottom:1px solid #696;
}
#minitabs li{
margin:0;
padding:0;
display:inline;
list-style:none;
}
Hier haben wir das Entfernen des standardmäßigen Punktsymbols und Inline abgeschlossen Einrückungsarbeiten setzen wir auch Die Anzeige ist auf Inline eingestellt, was der erste Schritt zur Umwandlung der vertikalen Liste in eine horizontale Liste ist. Gleichzeitig fügen wir auch einen unteren Rand hinzu, um die gesamte Linkgruppe zu unterscheiden.
Der zweite Schritt, um die Liste in eine horizontale Navigationsleiste umzuwandeln, besteht darin, alle unsere Links nach links zu verschieben. Außerdem fügen wir allen Hyperlinks einfache Stile hinzu: Definieren Sie die Größe der Ränder und inneren Patches:
#minitabs {.
Rand: 0;
Auffüllung: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: keine;
}
#minitabs a {
float: left;
line-height: 14px;
Schriftstärke: fett;
Rand: 0 10px 4px 10px;
Textdekoration: none;
color: #9c9;
}
Hier definieren wir float:left für alle Elemente in der Liste, damit sie horizontal in einer Zeile angezeigt werden können, und wir fügen auch einige Farben hinzu, die erstellt wurden Links fett dargestellt und die Unterstreichung am Ende der Links entfernt.
Erstellen Sie dann einen Rand, der eine Seitenbeschriftung für den Link simuliert, über den Sie mit der Maus fahren oder den Sie auswählen:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: links;
Zeilenhöhe: 14px;
Schriftstärke: fett;
Rand: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}
#minitabs a:hover {
color: #696;
}
Um den Link hervorzuheben, bewegen wir die Maus darüber oder wählen Sie es aus. Durch Hinzufügen eines 4 Pixel hohen unteren Randes können Sie das ausgewählte -Tag auch hervorheben, indem Sie class="active" hinzufügen:
spaghetti

Diese aktive Kategorie bezieht sich auf a:hover teilt den gleichen CSS-Stil (Abbildung 1 - 7)
Abbildung 1 - 7
Ich habe diese Technik auf meiner eigenen Website und bei meinem Refactoring im Juli 2003 verwendet. Wenn Sie mehr Beispielcode benötigen, können Sie gerne beide Websites besuchen und sich deren Quellcode ansehen.
Sie müssen nur einige innere Patches und Rahmen hinzufügen, um verschiedene Effekte ähnlich wie bei Paging-Tags zu erzielen. Bisher haben wir nicht einmal ein Bild oder einen Satz Javascript verwendet, sondern nur eine grundlegende XHTML-Struktur, die unsere Einkaufsliste ausmacht ist großartig!
Darstellung von Mini-Paginierungs-Tags
Wenn Sie einen anderen Effekt als den üblichen quadratischen CSS-Rahmen wünschen, müssen Sie nur ein paar kleine Änderungen vornehmen und wir können Bilder verwenden, um eine interessante Navigation zu erstellen. Das ist alles.
Wir verwenden genau dieselbe ungeordnete Liste wie zuvor und ein sehr ähnliches CSS:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: links;
Zeilenhöhe: 14px;
Schriftstärke: fett;
Abstand: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#minitabs a.active, #minitabs a:hover {
Farbe: #000;
Hintergrund: url(tab_pyra.gif) keine Wiederholung unten in der Mitte;
}
Dieses CSS sieht wahrscheinlich fast genauso aus wie das im vorherigen Beispiel. Der Hauptunterschied besteht darin, dass wir es verwenden Hintergrundbild definiert das Bild, das in der unteren Mitte des Links angezeigt wird, wenn die Maus darüber bewegt oder ausgewählt wird, und ersetzt den ursprünglichen 4 Pixel hohen unteren Rand (Abbildung 1 - 8)

Abbildung 1 - 8: Mini-Tab-Navigation mit Hintergrundbildern
Der Trick besteht darin, ein Bild auszuwählen, das schmal genug ist, um unter das kürzeste Navigationsleistenelement zu passen, sodass wir nur ein Bild benötigen, um den Navigationslink hervorzuheben, ohne verschiedene Bilder für unterschiedliche Breiten vorbereiten zu müssen Sie können eine Vielzahl von Bildern auswählen, die Sie in Ihren eigenen Projekten verwenden möchten (Bild 1 - 9):

Abbildung 1 - 9: Beispiele für die Verwendung anderer Bilder