Rand HTML-Vorlagen

Saubere Rahmen-HTML-Vorlagen

Rahmen-HTML-Vorlagen bieten vorgefertigte Abschnitte, in denen ein sichtbarer Rahmen oder eine Trennlinie eine eigenständige Inhaltseinheit kennzeichnet, wie etwa ein Portfolio-Projekt oder ein Dienstleistungsangebot. Hinter jedem Rahmen liegt ein kleiner, sich wiederholender Teil des Markups, und dessen Struktur bestimmt, wie einfach Sie den Abschnitt kopieren, kürzen oder neu befüllen können.

Was sich in jedem Rahmen befindet

Ein vollständiger Rahmen kündigt eine unabhängige Einheit an, die an eine andere Stelle verschoben werden könnte, während eine Trennlinie Elemente trennt, die dennoch zusammengehören. Die umrahmten Layouts, denen man am häufigsten begegnet, sind wie folgt aufgebaut:

• Portfolio-Raster, bei denen sich jedes Projekt wie ein in sich geschlossener „Artikel“ mit Titel, Beschreibung und Link verhält;
• Feature-Karten, die in jedem umrahmten Container dieselbe Abfolge von Überschrift, Text und Handlungsaufforderung wiederholen;
• redaktionelle Blöcke, bei denen eine einzelne Trennlinie eine Zusammenfassung von ihren Details innerhalb eines einzigen „Abschnitts“ abgrenzt;
• Spezifikationsbereiche, bei denen ein äußerer Rahmen die Gruppe zusammenhält und feine interne Linien sie in Zeilen unterteilen.

Ein Projekt kann dupliziert, gelöscht oder neu angeordnet werden, ohne seine Nachbarn zu stören. Eine einzelne Zeile von Spezifikationen bedeutet außerhalb ihrer Gruppe wenig, sodass ein eigener Rahmen für jede Zeile nur Verschachtelungen erzeugt, die Sie später wieder auflösen müssen. Wenn eine leere Zeile Elemente bereits voneinander trennt, führt das Umhüllen jedes einzelnen Elements zum Zeichnen einer Linie nur zu tieferem Code ohne sichtbaren Nutzen.

Das Raster-Element von Nicepage eignet sich hervorragend für solche wiederkehrenden Gruppen. Das Raster übernimmt die Anordnung, und jedes Element behält seinen eigenen Rahmen, sodass sich ein neues Projekt in die Zeile einfügt, ohne sie neu aufbauen zu müssen.

Schlankes Markup, das Sie wiederholen können

Eine Galerie oder eine Reihe von Preistabellen bleibt überschaubar, wenn jede Einheit demselben kurzen Muster folgt. Jede Karte beginnt mit einer Überschrift, die eine Ebene unter der Abschnittsüberschrift liegt, gefolgt von ihrem Inhalt und einer optionalen Aktion. Das Hinzufügen einer Karte bedeutet lediglich, einen Block zu kopieren und seinen Text anzupassen. Vorlagen, die jede Karte geringfügig anders aufbauen – hier mit einem zusätzlichen Wrapper und dort mit einer fehlenden Überschrift –, verwandeln eine schnelle Bearbeitung in Detektivarbeit.

Lesereihenfolge nach dem Zusammenklappen von Spalten

Wenn Spalten mit gerahmten Karten auf einem schmalen Bildschirm in eine einzelne Spalte umbrechen, ordnen sie sich in der Reihenfolge an, in der sie im Markup vorkommen. Manche Vorlagen erstellen eine Zeile aus Bildern mit einer separaten Zeile für Beschriftungen darunter. Auf einem Laptop sieht das wie vier ordentliche Projekte aus, auf einem Smartphone erscheint jedoch zuerst jedes Bild und danach folgen die Beschriftungen gebündelt auf einmal.

Eine gute Rahmen-HTML-Vorlage erlaubt es Ihnen, auf jede beliebige Zeile zu zeigen und genau zu sagen, wozu sie gehört. Ein kurzer Blick in den Code sollte zeigen, welche gerahmten Einheiten für sich stehen, welche Linien lediglich eine Gruppe unterteilen und welche Blöcke unverändert in einen anderen Bereich der Website übernommen werden können.