Wissenswertes für Webdesigner beim Gestalten einer Website

  1. Zum Inhalt springen
Monika  &  Klaus

www.klamonfra.de

Wissenswertes beim Gestalten einer Website für die Webdesigner

Auf dieser Seite zeigen wir ein paar Tipps und Tricks, zum Beispiel:

Und eine ganz wichtige Regel, die ich vor langer Zeit einmal gelesen habe, lautet:

Wenn Du wichtige Funktionsdateien veränderst, dann schreibe es auf und dokumentiere dies.

Diese Regel hat mir in der Vergangenheit schon viel Zeit erspart und so nutze ich diese Seite auch, um die Veränderungen an dieser Website zu dokumentieren. So hilft es mir auch als Nachschlagewerk bei weiteren Änderungen oder Verbesserungen.

Wie all diese Vereinfachungen oder Verbesserungen umgesetzt wurden, erfahren Sie, wenn Sie von dem unten stehenden Inhaltsverzeichnis in den zugehörigen Bericht springen.

Hinweise zur Bedienung, Gestaltung und Optimierung!

Zum großen Teil sind die Artikel aktualisiert worden und auf den folgenden Seiten bei "webdesign klamonfra" zu finden:

Da lohnt sich auf jeden Fall auch mal einen Blick drauf zu werfen.

Und mit diesen Tools haben wir unsere Webseiten getestet: Bewertungen, Tests und Analysen im Überblick"

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.


10Apr2012

Anker definieren


Innerhalb einer Webseite werden Anker in der HTML (HyperText Markup Language)-Seite platziert und, um einen Sprung an solch eine Ankerstelle zu veranlassen, Verweise zu solchen Ankern wie folgt geschrieben:

<a href="#ankername"> Verweis <a>

Der zugehörige Anker sieht dabei wie folgt aus:

<a name="ankername">...</a>

Unsere Seiten waren in XHTML (eXtensible HyperText Markup Language) geschrieben, und da benötigt man im Anker noch zusätzlich das Universalattribut "id" als eindeutige Bezeichnung. Aus diesem Grund sahen unsere Anker bisher wie folgt aus:

<a id="ankername" name="ankername" class="titel">...</a>

Mit dem "class"-Element wurde noch zusätzlich per CSS (Cascading Style Sheet) dafür gesorgt, dass kein Unterstrich beim fokussieren eines Ankers entsteht.

Diese Schreibweise war notwendig damit ältere Browser, wie zum Beispiel der Netscape, diese Anker anspringen können. Ältere Browser führen den Verweis nach HTML (HyperText Markup Language) Logik aus und benötigen dafür das "name"-Attribut, während die neueren Browser für eine eindeutige Bezeichnung, das "id"-Attribut, benötigen.

Mittlerweile kann man aber davon ausgehen, dass die älteren Browser kaum noch benutzt werden. Und das hat uns veranlasst, uns von dem zusätzlichen Code auf unseren Seiten zu verabschieden. Außerdem darf in XHTML 1.1 (eXtensible HyperText Markup Language) das "name"-Attribut sowieso nicht mehr verwendet werden.

Damit würde ein Anker wie folgt aussehen:

<a id="ankername" class="titel">...</a>

Aber das "id"-Attribut hat noch den großen Vorteil, dass es vorhandenen Elementen, zum Beispiel Überschriften, zugewiesen werden kann. Und damit konnte auch das "class"-Element für das nicht Unterstreichen beim Fokussieren eines Ankers entfallen:

<h3 id="ankername">Überschrift</h3>

Das sieht schon wesentlich übersichtlicher aus.


23Mär2013

Zeilenumbruch bei einem langen Wort erzwingen


Auf unserer Startseite befindet sich auf der rechten Seite ein Hinweis zu den Neuigkeiten bei unserem Webauftritt. Das Wort "Aktuelles" passt aber auf kleineren Bildschirmen nicht mehr in den div (division = Bereich)-Container und reicht dadurch über den Rand hinaus. Das Wort soll sich aber an die Breite des div (division = Bereich)-Containers anpassen.

Durch eine kleine Ergänzung im CSS (Cascading Style Sheet) sorgen wir für den entsprechenden Textumbruch:

.emboss {
    word-wrap: break-word;
    word-break: break-all;
}

Wenn der Platz nun zu eng wird, erzeugt Word-wrap mit dem Wert break-word automatisch einen Textumbruch innerhalb eines Wortes und verhindert dass das zu lange Wort über den Rand hinaus geht. Da der erzeugte Textumbruch nicht immer sinnvoll ist, sollte man diese Methode nur im Notfall einsetzen.


08Mär2009

Ersatz für das applet-Tag


Einige Elemente besitzen in HTML (HyperText Markup Language) den Status "deprecated" (veraltet) und sind somit durch andere Methoden zu ersetzen, die die gleiche Aufgabe erfüllen. Dazu gehört auch das "applet"-Element (applet = application snippet = Anwendungsschnipsel).

Damit aber nun das Flash-Panorama in allen Browsern richtig angezeigt wird, ist für die Einbindung etwas mehr Aufwand nötig als beim Java-"Applet" (objektorientierte Programmiersprache). Und die Lösung dazu möchten wir hier etwas detaillierter aufzeigen.

Mit dem "applet"-Element wurde bisher der PanoramaStudio Viewer auf unseren Seiten wie folgt eingebunden:

<applet archive="galerie/bilder/panorama/panoStudioViewer.jar"
        code="panoStudioViewer.PanoStudioViewer.class"
        name="panorama01"
        height="500"
        width="700"
        alt="Sonnenuntergang auf Ibiza">
            <param name="file" value="galerie/bilder/panorama/panorama01.JPG">
            <param name="pano" value="globales/panorama01.xml">
</applet>

Alle benötigten Parameter zur Beschreibung und Konfiguration des Panoramas liegen dabei in einer XML (eXtensible Markup Language)-Datei vor, die über den Parameter param name="pano" dem Applet zugewiesen wird.

Als Nachfolger zum "applet"-Element wurde von den Entwicklern das "object"-Element eingeführt.

Damit wird nun die Flash-Komponente des PanoramaStudio Viewer in unsere Panoramaseiten eingebunden.

Mit Microsoft funktioniert die Einbindung durch das "object-Tag" auch wunderbar, aber leider nicht mit Netscape oder Mozilla. Das Problem ist hierbei das "CLSID Attribut". Dieses Attribut verhindert im Netscape oder Mozilla jegliche Anzeige. Die Entwickler führten deshalb den "embed-Tag" ein. Mit diesem Element wird ein Bereich definiert, der nur von Browsern angezeigt wird, die das "embed-Tag" kennen.

Das folgende Beispiel zeigt die Einbindung dieser Flash-Variante, die auch im Handbuch von PanoramaStudio beschrieben wird:

<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="800"
   height="500"
   id="MeinPanorama"
   codebase="http://active.macromedia.com/flash9/cabs/swflash.cab#version=9,0,28,0">
       <param name="movie" value="globales/panoStudioViewer.swf">
       <param name="allowScriptAccess" value="always">
       <param name="allowNetworking" value="all">
       <param name="allowFullScreen" value="true">
       <param name="FlashVars" value="pano=globales/panorama01.xml">
       <embed src="globales/panoStudioViewer.swf"
              width="800"
              height="500"
              type="application/x-shockwave-flash"
              name="MeinPanorama"
              allowScriptAccess="always"
              allowNetworking="all"
              allowFullScreen="true"
              FlashVars="pano=globales/panorama01.xml"
              pluginspage="http://www.macromedia.com/go/getflashplayer" >
       </embed>
</object>

So weit, so gut! Die beiden Tags werden hier miteinander verknüpft, und weil der Internet Explorer den "embed-Tag" ignoriert, gibt es auch eigentlich keine Probleme. Nur mit dem Validator vom W3C (World Wide Web Consortium)-Konsortium, denn der "embed-Tag" ist leider nicht im HTML (HyperText Markup Language)-Standard vorhanden. Das ist der Grund, warum wir noch einen Schritt weiter gegangen sind.

Wir stellen deshalb die beiden unterschiedlichen Varianten den Browsern anders zur Verfügung. Der erste Teil mit dem "CLSID Attribut" für den Internet Explorer und der zweite Teil ohne "CLSID Attribut" für den Mozilla. Das Ganze sieht dann wie folgt aus:

<!--[if !IE]><!-->
<object
   data="globales/panoStudioViewer.swf"
   width="100%"
   height="500"
   type="application/x-shockwave-flash"
   name="pano"
   class="ieaus">
       <param name="allowScriptAccess" value="always">
       <param name="allowNetworking" value="all">
       <param name="allowFullScreen" value="true">
       <param name="FlashVars" value="pano=globales/panorama01.xml">
</object>
<!--<![endif]-->
<!--[if IE]>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="100%"
   height="500"
   id="pano"
   codebase="http://active.macromedia.com/flash9/cabs/swflash.cab#version=9,0,28,0">
       <param name="movie" value="globales/panoStudioViewer.swf">
       <param name="allowScriptAccess" value="always">
       <param name="allowNetworking" value="all">
       <param name="allowFullScreen" value="true">
       <param name="FlashVars" value="pano=globales/panorama01.xml">
</object>
<![endif]-->

Und das zugehörige CSS (Cascading Style Sheet) Schnipsel:

.ieaus {
    text-align: center;
}

* html .ieaus {
    display: none;
}

Was passiert hier? Zuerst lesen alle Browser den ersten "object-Tag" und stellen das Panorama entsprechend dar. Damit aber der Internet Explorer diese für ihn untaugliche Variante ausblendet, wird mit class="ieaus" und dem CSS (Cascading Style Sheet)-Befehl (display:none) dieser "object-Tag" für den Internet Explorer ausgeblendet.

Mit dem bedingten Kommentar (englisch: Conditional Comment), eingeleitet mit: <!--[if IE]> und beendet mit: <![endif]-->, wird nun erreicht, dass zum Beispiel der Mozilla diesen Kommentar und auch die darin enthaltenen HTML (HyperText Markup Language)-Anweisungen als syntaktisch korrekten Kommentar erkennt und folglich diesen "object-Tag" ignoriert.


Zum Seitenanfang springen