Wissenswertes für Webdesigner beim Erstellen der Bedienungen für eine Website

  1. Zum Inhalt springen
Monika  &  Klaus

www.klamonfra.de

English

Wissenswertes bei den Bedienungen für Webdesigner beim Erstellen einer Website

Auf dieser Seite zeigen wir ein paar Tipps und Tricks bei den Bedienungen.

Erleichtern von Bedienungen, so wird es programmiert

28Mär2013

div (division = Bereich)-Bereich kann angeklickt werden


Auf der Startseite können unter "Aktuelles" die Verweise zu den Unterseiten im ganzen Bereich angeklickt werden und sind damit anwenderfreundlicher realisiert.

Damit der ganze div (division = Bereich)-Container, in dem der Verweis zu einer anderen Unterseite enthalten ist, angeklickt werden kann, wird etwas JavaScript (objektorientierte Programmiersprache) und die JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery" benötigt. Zuerst binden wir im Kopf unserer Seite die JQuery-Bibliothek ein.

Unsere DIV-Container für die News haben wir logischerweise "news" genannt und werden auch nur dort benötigt, so dass wir uns diese Klassenbezeichnung zu Nutze machen können. Dadurch benötigen wir nur noch die folgenden Zeilen am Ende unserer Startseite:

$(document).ready(function() { $(".news").click(function() { window.location = $(this).find("a").attr("href"); return false; }); });

Wenn man nun einen div (division = Bereich)-Container, dem die Klasse "news" zugewiesen wurde, anklickt, wird die Adresse die sich innerhalb dieses Containers befindet aufgerufen. Zur Übersichtlichkeit haben wir der Klasse "news" noch mitgeteilt, dass der Mauszeiger beim Überfahren das Symbol der "Hand", wie bei einem Sprung zu einer anderen Seite üblich, anzeigt.

.news { display: block; padding: 0; min-height: 5em; text-align: left; cursor: pointer; }

Neuere Umsetzung!

Aber wie schon beim "Langsamen scrollen zum Seitenanfang" ist uns die Datenmenge für diesen Effekt durch die JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery" viel zu groß und damit für den Seitenaufbau einer Webseite unvernünftig.

Wir behelfen uns deshalb mit der Anzeigenart display: block. Damit wird ein Element als Block-Element dargestellt und man kann einen Abstand definieren. Daraus folgernd definieren wir in CSS (Cascading Style Sheet) die Verweise unter "Aktuelles" wie folgt:

.news a { display: block; min-height: 6em; padding: 0 20px; margin: 0 -20px; text-align: left; }

Kein großes Hexenwerk aber für unseren gewollten Effekt durchaus ausreichend.

Zum Seitenanfang springen