Archiv zum Thema 'Weblayout'

16. Juni 2008

Die Kunst des Führens durch eine Site…

… ist eher eine Kunst der unauffälligen Online-Begleitung.

Mir fällt in meinen Kursen immer wieder auf, dass sowohl WebNavigation als auch Design nicht auf den späteren Nutzer, Betrachter ausgerichtet sind, eher in der eigenen Verspieltheit untergehen.

Okay, wir machen Kunst. Und die sollte in erster Linie uns gefallen, bevor wir sie Gästen in einer Online-Vernissage präsentieren. Was aber, wenn wir den Weg zu unseren Werken durch schlechte Beschilderung in ein Labyrinth verwandeln?

Ihr Online-Besucher soll es einfach haben. Mit wenigen Mausklicks zur gewünschten Information gelangen. Und ggfls. wieder zurück an die Stelle, an der sie oder er sich vorher befand. Sie sind leidenschaftliche Künstlerin, charmante Gastgeberin, aber auch die erfahrene Wegweiserin und der taffe Lotse.

Tipps zum Gestalten der Benutzerführung: Blättern von Webseiten und Navigieren durch eine Website:

weiterlesen »


12. Juni 2008

Listen in HTML

Zwei wichtige Listenarten beschreibe ich hier, weil wir die Listen zur Navigation mit CSS benötigen. Listen sind HTML-Elemente, die Inhalte, z.B. Aufzählungslisten oder numerierte Listen enthalten.

Die ungeordnete Aufzählungsliste (Unordered List, ul)

<ul>
  <li>Listeninhalt 1</li>
  <li>Listeninhalt 2</li>
  <li>usw.</li>
</ul>

Sieht so aus:

  • Listeninhalt 1
  • Listeninhalt 2
  • usw.

weiterlesen »


9. Juni 2008

Page Layouts im Web

Wir haben am vergangenen Freitag bereits vier Weblayouts kennengelernt. Theoretisch könnte man in der Praxis die Weblayouts in sechs verschiedene Arten aufteilen :-)

  • Text- und Bild-basierte Layouts, mit unbekannter Seitenlänge,
  • Framesets,
  • Tabellen-basierte Layouts,
  • CSS-basierte Layouts, Box-Modell, Layer/Ebenen,
  • Mischformen aus 1-3,4,
  • freie Form, Flash, Ajax …

Im Kurs arbeiten wir mit Text- und Bild-basierten sowie CSS-basierten Layouts (mit Ebenen, Layern). CSS 2.1. Voraussetzungen: Strikte Trennung von Inhalten, Struktur- bzw. Darstellungselementen und Design - sowie eine korrekte Dokumententypdeklaration im HEAD wie HTML 4.01 oder XHTML 1.0.

Bild

Mit Dreamweaver generiertes, simples Seitenlayout auf Layer-Basis
(Neuer Layer: Einfügen > Layoutobjekte > Ebene)

 

Mit freien Formen meine ich vom Nutzer frei veränderbarem Layout, z.B. mit Ajax, oder fehlendem HTML-Layout, z.B. bei einer Flash-Animation, die den gesamten Bildschirm mit speziellem Layout einnimmt.

Ein Beispiel (mit einem vorgebenem Grundlayout und freier Anordnung der Boxen auf der Startseite durch den Nutzer) bei Netvibes.