Auswählen eines Layouts (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Wenn Sie den Benutzern Ihrer Windows-Runtime-App eine Benutzeroberfläche bieten möchten, die so flexibel und anpassbar wie möglich ist, müssen Sie zunächst den für Ihren Inhalt und die Ansichten, über die der Inhalt genutzt wird, am besten geeigneten Layoutmodus auswählen. In diesem Thema werden die Cascading Stylesheet-Layoutfeatures der Stufe 3 (CSS3) beschrieben, die in Windows 8 für Windows Store-Apps unterstützt werden. Das Flexible Box- und das Rasterlayout sind hilfreich beim Erstellen dynamischer Layouts für Apps und benutzerdefinierte Steuerelemente. Das Mehrspaltenlayout und das Bereichslayout eignen sich dagegen am besten zum Gestalten von Text- und anderen Leseinhalten.
Flexible Box-Layout
Flexible Box (Flexbox) ist ein Layoutmechanismus, bei dem die Größe und Anordnung untergeordneter Elemente mithilfe eines einschränkungsbasierten Systems festgelegt werden. Dieses System unterstützt sowohl eine relative Größenanpassung als auch eine systeminterne Größenanpassung. Flexible Box-Layouts können an mehrere Bildschirmgrößen angepasst werden und ermöglichen digitale Zeitungen, Magazine und andere Konsumszenarien für digitale Druckmedien.
Das Flexbox-Layout ist für das Gestalten komplexerer Webseiten vorgesehen und besonders hilfreich dafür, dass die relative Positionierung und Dimensionierung von Elementen konstant bleiben, auch wenn die Größen von Bildschirm und Browserfenster variieren und sich ändern. Es kann die Abhängigkeit von Gleitkommawerten reduzieren, die schwieriger richtig zu positionieren und dimensionieren sind.
Das Flexbox-Layout berücksichtigt den verfügbaren Platz bei der Definition von Feldgrößen und ermöglicht so relative Größen und Positionierung. Sie können beispielsweise sicherstellen, dass zusätzlicher Leerraum in einem Browserfenster gleichmäßig auf die Größe mehrerer untergeordneter Elemente verteilt wird und dass diese untergeordneten Elemente in der Mitte des enthaltenen Blocks zentriert sind.
Mit dem Flexbox-Layout können Sie die folgenden Aktionen ausführen:
- Ein flüssiges Layout gestalten — auch wenn verschiedene Bildschirm- und Browserfenstergrößen verwendet werden — aber Elemente enthalten sind (wie etwa Bilder oder Steuerelemente), die ihre Position und Größe in Relation zueinander beibehalten.
- Festlegen, wie überschüssiger Platz entlang der Layoutachse (horizontal oder vertikal) einer Reihe von Elementen zugeordnet werden kann, um bestimmte Elemente zu vergrößern.
- Festlegen, wie überschüssiger Platz entlang der Layoutachse einer Reihe von Elementen so zugeordnet werden kann, dass er vor, nach oder zwischen die Reihe der Elemente fällt.
- Festlegen, wie überschüssiger Platz im rechten Winkel zur Layoutachse eines Elements um ein Element herum angeordnet werden kann, z. B. zusätzlicher Platz ober- oder unterhalb von Schaltflächen, die nebeneinander angeordnet sind.
- Steuern der Ausrichtung in der Elemente auf der Seite platziert werden - zum Beispiel von oben nach unten, von links nach rechts, von rechts nach links oder von unten nach oben.
- Neuanordnung von Elementen auf dem Bildschirm, die sich in der Art unterscheiden, wie sie vom DOM (Document Object Model) festgelegt werden.
Im Gegensatz zum Raster müssen bei der Flexbox die untergeordneten Elemente nicht explizit im übergeordneten Container positioniert werden. Wenn Sie einfache Elementcontainer mit einer dynamisch bestimmten Anzahl von untergeordneten Elementen entwerfen, ist die Verwendung eines Rasters u. U. vorzuziehen.
Weitere Informationen finden Sie unter "Flexbox"-Layout.
Rasterausrichtung
Das Raster ist ein Mechanismus, mit dem Autoren den vorhandenen Leerraum mithilfe von vorhersagbaren Verhaltensweisen für die Größenänderung in Spalten und Zeilen anordnen können. Autoren können eine genaue Positionierung und Größenänderung der Bausteinelemente ihrer App vornehmen, indem sie auf die Rasterlinien zwischen den Spalten und Zeilen verweisen oder eine Rasterzelle (ein rechteckiger Leerraum, der eine Schnittmenge aus Spalten und Zeilen enthält) definieren und auf diese verweisen.
Wie Flexbox ermöglicht auch das Raster ein flüssigeres Layout, als mit der Positionierung anhand von Anzeigeelementen oder Skripts möglich ist. Es ermöglicht das Aufteilen des Platzes für die Hauptbereiche einer Webseite oder Webanwendung und das Definieren der Beziehung zwischen den Teilen eines HTML-Steuerelements hinsichtlich der Größe, Position und Ebene. Daher muss kein festes Layout erstellt werden, das verfügbaren Platz im Browserfenster nicht nutzen kann. Da das Raster das Anordnen von Elementen in Spalten und Zeilen ermöglicht, aber keine Inhaltsstruktur hat, ermöglicht es auch Szenarios, die mit HTML-Tabellen nicht möglich sind. Verwenden Sie das Raster mit Medienabfragen, damit das Layout Änderungen am Geräteformfaktor, der Ausrichtung, dem verfügbaren Platz usw. nahtlos übernimmt. Da das Raster sowohl das horizontale als auch das vertikale Layout steuert, verwenden Sie für die oberste Ebene des App-Layouts vielleicht lieber das Raster anstelle der Flexbox.
Weitere Informationen finden Sie unter Rasterlayout.
Mehrspaltenlayout
Mehrspaltenlayouts unterstützen für eine beliebige Anzahl an Spalten den Inhaltsfluss von einer Spalte zu einer anderen Spalte.
Mit dem Mehrspaltenlayout kann Inhalt in mehrere Spalten einfließen, zwischen denen sich ein Abstand sowie eine optionale Regel befinden. Zudem kann die Anzahl der Spalten auf Grundlage der Größe des Browserfensters variieren. Ein mehrspaltiges Element wird von W3C als Element definiert, dessen column-width- oder column-count-Eigenschaft nicht auf "auto" festgelegt ist und das daher als Container für ein Mehrspaltenlayout fungiert. Mit dem Mehrspaltenlayout wird ein Spaltenfeld eingeführt, das als neuer Containertyp zwischen Inhaltsfeld und Inhalt definiert ist. Mehrspaltige Elemente können mehrere Zeilen von Spaltenfeldern enthalten. Zeilen sind durch Elemente unterteilt, die Spalten umfassen (Elemente, für die column-span:all angegeben ist). Zeilen sind in der Richtung des Mehrspaltenelements angeordnet. Nebeneinander liegende Spaltenfelder sind durch einen Spaltenabstand voneinander getrennt, der optional eine Spaltenregel enthalten kann.
Weitere Informationen finden Sie unter Mehrspaltenlayout.
Bereichslayout
Das Bereichslayout ist ein Seitenlayoutfeature, bei dem Sie einen einzelnen Inhaltsdatenstrom in mehrere leere Container in einer HTML-Vorlage aufteilen. HTML-Vorlagen sind Dokumente, die größtenteils keinen Originalinhalt enthalten und sich stattdessen primär aus leeren Containern zusammensetzen, die so dimensioniert und positioniert sind, dass sie ein bestimmtes Layout für eingehenden Inhalt bieten. Mithilfe von Bereichen können Sie Text über mehrere Spalten, deren Größe und Position mithilfe von Cascading Stylesheets (CSS) explizit festgelegt werden, umbrechen und so ein Zeitungs- oder Zeitschriftenlayout erstellen.
Weitere Informationen finden Sie unter Bereiche.
Praxislabs für Windows 8
Laden Sie die praktischen Übungen für Windows 8 herunter, wenn Sie mit App-Layouts und anderen wichtigen Windows 8-Features arbeiten möchten. Diese Übungen bieten eine modulare, schrittweise Einführung in das Erstellen einer Windows Store-Beispiel-App in der Programmiersprache Ihrer Wahl (JavaScript und HTML oder C# und XAML).