Linkliste 04
    
 Home • Diverses • Linkliste 04 Demo   Download

 Linkliste 04 - gruppierte Linksammlung

Eine Übersicht von Text-Verweisen als Linkliste für Webseiten. Einsetzbar für eine gruppierte Linkliste, nach Themen gegliedert. Die Seitenbeschreibung wird eingeblendet.
Beispielmodul für gruppierte Linklisten

UPDATE  01.08.2011  17:45 Uhr, Modul für die Linklisten noch einmal vereinfacht

   Eine gruppierte Linkliste für Ihre Webseite entwerfen


Mit diesem Modul können Sie die dargestellte Linksammlung nach Themen ordnen und zusammenfassen. Die Linkliste 04 als Variante mit 3 Textspalten eignet sich sehrgut für die Verwendung auf der eigenen Webseite. Der kurze Bereich für die Textlinks ist kein Nachteil. Schließlich können Sie für jeden Link eine längere Beschreibung einblenden lassen.

Bei Mouseover wird diese Beschreibung eingeblendet. Testen Sie die Funktion bei den beiden Link-Gruppen unten oder öffnen Sie die Demo-Datei in einem neuen Fenser / Tab um die Arbeitsweise zu betrachten.   Linkliste-04 Demo-01

Wilhelm's Links
werden in einem neuen Fenster angezeigt

Jupp Zupp: meine Linkliste
werden in einem neuen Fenster angezeigt


a  Syntax für die Links:

Die einzelnen Links der Linkliste wurden als Liste (<li>) definiert, worüber die Formatierung der 'Buttons' organisiert wird. Die Links enthalten mehrere Elemente. Das Element der Linkbeschreibung wird
  • grundsätzlich ausgeblendet (display: none)
  • bei MouseOver eingeblendet (display: block)
  • an einer festen Position dargestellt (position: ...)
<li>
<a target="_blank" href="URL">
Linktext
<span class="infotext">Linkbeschreibung</span>
</a>
</li>

<li>
<a target="_blank" href="http://www.rennmaus.net">
Gerbils-Crossing
<span class="infotext">Haltung und Pflege von Wüstenrennmäusen</span>
</a>
</li>

<li>
<a target="_blank" href="http://www.stadt-geilenkirchen.com">
Geilenkirchen
<span class="infotext">private Seite zur Stadt Geilenkirchen</span>
</a>
</li>
Das Attribut 'target' in den Links bewirkt das die verlinkten Seiten in einem neuen Browserfenster geöffnet werden.




b  Beispiele

Wenn Sie die CSS-Anweisungen anpassen können Sie Texte und die 'Buttons' der Textverweise nach eignem Geschmack anpassen. So ist es auch möglich statt einer simplen Einfärbung für die 'Buttons' eine Hintergrundgrafik (siehe Demo) zu verwenden.
 
Linkliste-04 Bsp 01

Linkliste Textlinks

Download als ZIP 		Linkliste-04 Bsp 01

Linkliste Textlinks

Download als ZIP 		Linkliste-04 Bsp 01

Linkliste Textlinks

Download als ZIP



c  Liste modifizieren / erweitern

Laden Sie die Zip-Datei herunter, entpacken sie in einem neuen Ordner und modifizieren Sie die Linkliste nach Ihren Vorstellungen. Das Schema ist innerhalb einer gruppierten Linkliste immer gleich:

  • URL der Webseite
  • Linktext
  • Linkbeschreibung

<li>
<a target="_blank" href="http://www.domainname.de">
Linktext
<span class="infotext">Linkbeschreibung</span>
</a>
</li>


Um einen neuen Link hinzu zu fügen, kopieren Sie einfach einen vorhandenen Link und ändern die URL und die Linkbeschreibung entsprechend.

  • Die Textlinks sind in 3 Spalten organisiert.
  • Die Links stehen innerhalb einer Tabelle
  • Die Tabelle für eine Gruppe von Links steht innerhalb von DIV-Tags
  • Die DIV-Tags habe eine eingene CSS-Klasse
<div class="LinkGruppe">
hier steht die Tabelle mit den Links der Gruppe 1
</div>

<div class="LinkGruppe">
hier steht die Tabelle mit den Links der Gruppe 2
</div>

...



   Linkliste als Browserstartseite nutzen



Für einen Einsteiger in Sachen Internet könnte
man diese Linkliste als Browserstartseite festlegen.

Überlegenswert: Das Attribut 'target' in den Links könnte man in diesem Fall evtl. sogar entfernen, da ein Klick auf das HOME-Symbol des Browsers wieder zur Startseite zurück führt. Das würde dann vor zu vielen geöffneten Browserfenstern schützen.


Eigene Linkliste als Browser-Startseite

Legen Sie doch die eigene Linkliste als Browser-Startseite fest. Das halte ich für eine gute Idee besondes für Internet-Beginner oder für Schüler-PCs. Bequem ist es außerdem. Das können Sie in einer Minute umsetzen:
  • Speichern Sie die pers. Linkliste in einem neuen Ordner ab (ZIP-Datei in einem neuen Ordner entpacken)
  • Suchen Sie in Ihrem Browser über den Meüpunkt "Datei" - "Datei öffnen" die HTML-Datei der Linkliste 'linkliste-03.htm'.
  • Bei angezeigter Linkliste in Ihrem Browser:
 Öffnen Sie in Ihrem Browser über den Meüpunkt "Extras" - "Einstellungen" den Tab für 'Allgemein'.

 Öffnen Sie in Ihrem Browser über den Meüpunkt "Extras" - "Internetoptionen" den Tab für 'Allgemein'.

  • Wählen Sie 'Aktuelle Seite verwenden' und klicken Sie 'OK'
  1. Von nun an wird beim Start des Browsers sofort Ihre Linkliste angezeigt.
  2. Beim Klick auf das 'Home-Symbol' des Browsers wird Ihre Linkliste angezeigt.
Screenshot für FireFox:













Linkliste 01 - Grafik + Text

Linkliste 02 - Linksammlung für die Webseite

Linkliste 03  (auch als Browser-Startseite)

NACH OBEN