Tag Archives: Design

12 – Grundlagen HTML & CSS: So richten Sie ein Untermenü mit einem Listen-Element ein

In dieser Video-Lektion fügen wir unserer Internetseite ein Untermenü ein. Dies geschieht durch die Verschachtelung von Listen. Ob diese Verschachtelung später in einem horizontalen oder vertikalen Klappmenü oder einem einfachen (offenen) Navigationsaufbau endet spielt dabei erst einmal keine Rolle. Die Entscheidung der Darstellung geschieht erst in der CSS-Datei. Hier müssen dann die richtigen CSS-Eigenschaften verwendet werden, um zum Beispiel ein Klappmenü zu realisieren.

Der Grundsätzliche Aufbau einer verschachtelten Navigation sieht im HTML wie folgt aus:

<ul>
  <li><a href="#.html"> Menü 1. Ebene</a></li>
  <li><a href="#.html"> Menü 1. Ebene </a>
    <ul>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
      <li><a href="#.html"> Menü 2. Ebene </a></li>
    </ul>
  </li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
  <li><a href="#.html"> Menü 1. Ebene </a></li>
</ul>

Wichtig ist hierbei zu erkennen, dass das innere ul-Element Inhalt eines li-Elements ist und erst nach einem geschlossenen Anker des li-Elements eingefügt wird. Mittels CSS und der Verwendung von Klassen und IDs auf einzelne HTML-Elemente kann die Navigation so aufbereitet werden, dass zum Beispiel ein Klappmenü realisiert werden kann.

In dieser Video-Lektion wird noch kein Klappmenü realisiert, da es tiefere Kenntnisse in CSS erfordert. Zum jetzigen Zeitpunkt tut es eine einfache, vertikale Navigation, die die nächste Ebene der Navigation komplett öffnet. In einer separaten Lektion werde ich die Funktionsweise und CSS-Aufbereitung für ein Klappmenü noch einmal ausführlich erklären. Vielleicht finden Sie ja einen entsprechenden Beitrag schon in diesem Blog? Die Suchfunktion kann Ihnen hier weiterhelfen!

11 – Grundlagen HTML & CSS: Optimierung des HTML-Grundgerüsts (flexible DIV-Conatainer)

Nun ist es endlich so weit: Ein Logo wird eingefügt und mit der Startseite verlinkt. Die Verlinkung des Logos mit der Startseite der Homepage gehört mittlerweile zum guten Ton und Standard. D.h. Internet-User haben sich daran gewöhnt, dass ein Klick auf ein Seiten-Logo zurück zur Startseite führt. So kann man sich den Menüpunkt „Startseite“ oder „Home“ eigentlich auch sparen!

In dieser Video-Lektion stellen wir das HTML-Grundgerüst noch einmal um, sodass die Container Navigation und Content immer „gleich lang“ sind. Dafür wird ein DIV-Container Inhalt des anderen. Wächst der innere DIV-Container, wächst der äußere automatisch mit. Dieser Abschnitt soll Ihnen Anregungen geben, wie man DIV-Container ineinander verschachteln kann und ggf. muss, um bestimmte komplexere Designs realisieren zu können.

10 – Grundlagen HTML & CSS: Das Design einer Internetseite per CSS verbessern

Auf dem vorherigen Video aufbauend, wird am Design der Internetseite weiterhin per CSS gefeilt. Am Ende dieser Video-Lektion ist die erste einfache Homepage, zumindest die Basis dafür, fertig. In den weiteren verbleibenden Tutorials wird das Design / Erscheinungsbild immer weiter optimiert.

Die Hintergrundfarben der DIV-Container, die uns die Struktur der Internetseite besser veranschaulichen sollten, können wir langsam aber sicher auskommentieren und durch endgültige Anweisungen bzw. Inhalte ersetzen. So ist im Kopfbereich der Seite (Header) eine Grafik eingefügt, die die Internetseite erstmals gefällig erscheinen lässt – Was für eine Kraft Bilder doch haben!

Zum Anderen gehe ich in diesem Video kurz auf die relative und absolute Positionierung von Objekten ein. Durch die absolute Positionierung eines Objekts mittels CSS, kann dieses an eine beliebige Stelle im Design positioniert werden.

Wichtig ist der Hinweis, dass ein absolut positioniertes Element / Objekt, sich immer am ihm umschließenden und zuletzt relative positionierten Objekt orientiert. Eine anschauliche Demonstration dieser Bedingung zeige ich in diesem Video in dem eine Überschrift absolut über ein Bild positioniert werden soll.

Relativ positionierte Objekte orientieren sich ebenfalls an dem sie umschließenden Objekt, können jedoch nur innerhalb des umschließenden Objektes positioniert werden.

Zu diesem Thema(„Positionierung von Objekten“) wird es in diesem Video-Blog noch einmal einen gesonderten Video-Beitrag geben.

Folgende wichtige CSS-Anweisungen werden in diesem Video genutzt:

  • Border: 1px dotted black;
  • Text-align: center;
  • Position: absolute;
  • Position: relative;
  • Vererbung von CSS-Eigenschaften

06 – Grundlagen HTML & CSS: Das Container-Box-Modell endlich verstehen

Dieses Video ist existenziell wichtig für die Programmierung von Internetseiten und das Verständnis von der Trennung von Inhalt (HTML) und Design (CSS). Mittels CSS ist es möglich ein und dieselbe HTML-Datei unterschiedlich (Layout / Design) darzustellen. Alles dreht sich um das Container-Box-Modell. Ohne das Verständnis für dieses Box-Modell können Sie mit Hilfe von CSS nicht das Design oder Layout erstellen, dass Sie sich wünschen.

In diesem Video zeige ich Ihnen schematisch das CSS-Container-Box-Modell anhand meiner eigenen Internetseite. Der Schematische Aufbau einer beliebigen Internetseite ist häufig ähnlich: Es gibt die Container Header, Content (der zumeist wieder unterteilt ist) sowie einen Footer.  Im Anschluss experimentieren wir im HTML-Editor mit dem Einfluss von MARGIN und PADDING auf das Box-Modell.

Wie so oft führen viele Wege nach Rom. Auch im Einsatz von HTML und CSS, zur Umsetzung eines Designs, führen viele Wege zum gewünschten Ergebnis (Design / Layout). Wichtig ist jedoch nur, dass Sie dieses Container-Box-Modell verinnerlicht haben und anzuwenden wissen.

Am Ende dieser Video-Lektion binden wir erstmals eine externe CSS-Datei ein.

PS: Neben den beiden CSS-Anweisungen MARGIN und PADDING gibt es sicherlich noch weitere Anweisungen, die wesentlichen Einfluss auf das Modell / die Darstellung haben. Auf diese wird in diesem Video nicht eingegangen.

Unterschied zwischen Web- und Print-Designern

Jeder Webdesigner kennt das: Ein Interessent / Kunde meldet sich mit einem fertigen Design, das nur noch umgesetzt werden muss. Jedem Webdesign wird hier „angst und bange“. Auf den ersten Blick wird es nicht jedem Bewusst: Aber Webdesigner arbeiten grundsätzlich anders als Printdesigner. Aber worin liegt nun der Unterschied?

Grundsätzlich sind Printdesigner dem Internet sehr fern. Sie lieben und arbeiten bereits seit Jahren mit Stiften und Pinseln auf Schreibblöcken, Leimwänden oder auch mal Tischuntersetzern. Sie haben Ihr Handwerk häufig „von der Pike“ gelernt. So wissen sie ganz genau, wie sie eine gelungene Komposition aus Text. Farben und Formen auf dem jeweiligen Medium mit jeweilig zur Verfügung stehenden Platz in Einklag bringen.

Doch genau hier liegt das Problem: „Auf dem zur Verfügung stehenden Platz“. Wenn man so an feste Grenzen und Räume gewohnt ist, fällt es schwer sich auf das Medium Internet einzustellen. Im Internet, wo Ihr Bildschirm den zur Verfüg stehenden Raum / Platz darstellt, gibt es keine festen Grenzen; nicht den Monitor. Es gibt unendliche viele verschiedene Monitor; und neuerdings sogar mobile Geräte wie Smartphones, Netbooks, etc. Das Internet lässt sich also nicht auf eine DIN-Norm beschränken.

Ein Kunde versteht nicht, warum ein bereits „freigegebenes“ Print-Design nicht in das Internet eins zu eins übernommen werden kann. Der Webdesigner ist nun in der Bedrängnis, ist er es doch, der sich wohl nur nicht von einem anderen Designer ein Layout diktieren lassen will. Doch es gibt wirklich Hindernisse, die sich nicht ohne weiteres überwinden lassen und bei der Konzeption und Entwicklung eines Designs durch einen Webdesigner berücksichtigt werden.

Die grundsätzlichen Unterschiede zwischen Print- und Webdesigns:

-          Es gibt keine festen Flächen / einen festen verfügbaren Platz

-          Das Design muss auf großen, wie auf kleinen Bildschirmen wirken & funktionieren

-          Es muss berücksichtigt werden, was mit Freiflächen bei größeren Monitoren passiert

-          Es muss bestimmt werden was passiert, wenn eine Aktion auf der Internetseite ausgeführt wird, also zum Beispiel das überfahren der Navigation mit der Maus

-          Schriften können nur bedingt im Internet eingebunden werden. Dem Designer muss klar sein, welche Schriften er verwenden kann und welche nicht. Das hat Einfluss auf die Gestaltungsmöglichkeiten und die Anmutung eines gesamten Layouts

-          Nicht alle Farben, die ein Designer auf seinem Bildschirm oder im Druck darstellen kann, sehen auch so beim Besucher der Internetseite aus. Man kann davon ausgehen, dass Besucher einer Internetseite keinen kalibrierten Monitor haben. Die verwendeten Farben müssen daher zueinander Kontrastreich sein.

-          Im Gegensatz zu einem Print-Design, müssen Sie im Internet sich auch Gedanken über die Gestaltung von Elementen machen, die bisher gar nicht in Verwendung sind: zum Beispiel Darstellung von Adressen, Downloadlisten, Tabellen, Newsheadlines, interne Links, externe Links, Untermenüs, und vieles mehr

-          Der Umfang einer Broschüre ist klar. Der Umfang einer Internetseite bei der Erstellung ggf. auch. Ein guter Webdesigner muss nur in Betracht ziehen, dass eine Internetseite auch weiter wächst. Er muss sicherstellen wo die Grenzen des Designs sind und dies dem Kunden auch klar mitteilen.

Diese Liste hat keinen Anspruch auf Vollständigkeit! Sie gibt aber einen Einblick in die Arbeit und Weitsicht eines Webdesigners. Printdesigner können dies grundsätzlich auch leisten. Sie müssen sich dafür nur mehr mit dem Medium Internet auseinandersetzen. Ihnen als Kunden muss einfach nur klar sein, dass es einen Unterschied zwischen einem Print-Design und  Web-Design gibt.