Wissenswertes für Webdesigner beim Erstellen einer Website bei der Gestaltung

  1. Zum Inhalt springen
Monika  &  Klaus

www.klamonfra.de

English

Wissenswertes für Webdesigner bei der Gestaltung einer Website

Gestaltung einer Website

23Aug2008

Was ist ein label-Tag?


Um zwischen Beschriftung und Eingabefeld eine logische Verbindung zu schaffen, existiert das label-Tag.

Der Vorteil liegt nun darin, dass Sie nicht mehr zwingend mit der Maus in ein Eingabefeld klicken müssen, sondern Sie können auch auf dessen Beschriftung klicken, um das Eingabefeld zu erreichen. Die Barrierefreiheit wird dadurch erheblich verbessert.

Klicken Sie unten zum Beispiel auf den Text "Irgendein Text:", springen Sie automatisch in das zugehörige Feld.


Vorgehensweise beim label-Tag:

Die Verbindung wird durch die gleiche Bezeichnung des for-Attribut im label-Tag und dem id-Attribut des Formularfeldes erzeugt. Die zugehörigen HTML (HyperText Markup Language)-Zeilen sehen wie folgt aus:

<label for="labeltest">Irgendein Text:</label> <br> <input type="text" name="q" id="labeltest" value="Text" size="13" title="Text hier eingeben">

Und damit beim Überfahren des Textes die Hand erscheint ist eine zusätzliche Zeile in CSS (Cascading Style Sheet) notwendig:

label { cursor: pointer; }


09Feb2013

Wie erstellt man die schräge Texteinblendung?


Zuerst werden wir die Box für die Codezeilen erstellen. Als Hintergrund nehmen wir dafür eine Papierstruktur mit einem 1 Pixel breiten, goldenen Rand, der an den Ecken noch mit einem kleinen Radius versehen ist. Außerdem wird noch ein nach innen fallender Schlagschatten notiert.

.code_html { position: relative; margin: 1em; padding: 1em 5em 2em; background: url(/bilder/papier_original.jpg) top left repeat; border: 1px inset #c93; color: #000; font: 1em monospace; white-space: pre; line-height: 1.3em; text-align: left; border-radius: 10px; box-shadow inset 0 0 10px 5px rgba(0, 0, 0, 0.5); overflow: auto; }

Damit ist die Box für die Codezeilen fertig. Für die zusätzliche Texteinblendung machen wir uns nun das Pseudoelement ":after" zu Nutze. Mit diesem Pseudoelement wird ein beliebiger Inhalt, der mit content angegeben wird, über dem in HTML (HyperText Markup Language) geschriebenen Inhalt eingefügt.

Dieser zusätzliche Text, im folgenden Beispiel HTML (HyperText Markup Language), soll oben links im Rahmen der Code-Zeilen eingeblendet und um -45 Grad gedreht werden. Hierfür notieren wir zuerst in HTML (HyperText Markup Language):

<p class="code_html"> <code> beliebiger Text </code> </p>

Als Hintergrund haben wir einen blauen Farbverlauf ausgesucht und der Text bekommt noch einen Schlagschatten nach außen. Für diese Designeinstellung wird im CSS (Cascading Style Sheet) folgendes notiert:

.code_html:after { position: absolute; top: 22px; left: -30px; width: 130px; height: 25px; background: #1616e2; background: linear-gradient(180deg, #1616e2, #000059); color: #fff; font-size: 1em; font-weight: bold; line-height: 25px; text-align: center; box-shadow: 0 1px 5px #444; transform: rotate(-45deg) content: "HTML"; }

Fertig!


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.


Wie werden Textauszeichnungen geschrieben?

08Mär2009

Darstellung von Quellcode


Veraltete Vorgehensweise!

Um den Quellcode bei Programmausdrucke richtig und übersichtlich darzustellen, sollte jeder Buchstabe oder jede Zahl die gleiche Breite beanspruchen. Dafür bietet der HTML (HyperText Markup Language)-Standard das "<pre>-Element" an. Dieses Element leitet einen Textabschnitt mit vorformatiertem Text ein. "Vorformatiert" bedeutet, dass der Text vom Browser exakt in der gleichen Weise dargestellt wird, wie er innerhalb des sich öffnenden und schließenden "<pre>-Elements" steht. Auch Leerzeichen, Tabulatoren, Zeilenumbrüche, Zeilen und Spalten werden korrekt wiedergegeben.

Das "<code>-Element" zeichnet wiederum einen Text mit der Bedeutung "Quelltext" aus und ist dafür gedacht, Computercode innerhalb eines Textes dazustellen.


Vorgehensweise bei der Darstellung von Quellcode:

Den Quellcode aus dem vorherigen Abschnitt...

<span lang="en">beautiful</span>

wird wie nachfolgend in HTML (HyperText Markup Language) dargestellt:

<pre> <code> <span lang="en">beautiful</span> </code> </pre>


Neuere Umsetzung bei der Darstellung von Quellcode!

Wir nutzen mittlerweile die Eigenschaften der Absatzformatierung und hier im besonderen das Element "white-space". Mit der Angabe "pre" werden dabei ein Zeilenumbruch und die Leerzeichen so dargestellt, wie sie im Texteditor eingegeben wurden.

In CSS (Cascading Style Sheet) geben wir damit unter anderem folgende Zeilen ein:

.code { position: relative; color: #000; font: 1em monospace; white-space: pre; line-height: 1.3em; text-align: left; overflow: auto; }

Damit sieht der Quellcode aus dem vorherigen Abschnitt wie folgt aus:

<p class="code"> <code> <span lang="en">beautiful</span> </code> </p>

Wie nun das restliche Design (schräger Text, Schatten und Hintergrund) erstellt wird, erklären wir im Punkt "Schräge Texteinblendung"


15Feb2009

HTML (HyperText Markup Language) Schreibweise für ä ,ö ,ü ,ß ,&


Um mögliche Probleme bei der Verarbeitung von bestimmten Zeichen und Umlauten zu vermeiden, sollte man diese durch ASCII (American Standard Code for Information Interchange)-Zeichen ersetzen. Neben der numerischen Unicode-Notation gibt es in HTML (HyperText Markup Language) für häufiger verwendete Sonderzeichen auch die benannten Zeichen. Wir haben an dieser Stelle einmal die aufgeführt, die wir auf unseren Seiten verwendet haben:

Zeichen - Name in HTML - Unicode in HTML & - &amp; - &#38; < - &lt; - &#60; > - &gt; - &#62;

Hat man seine Seiten nicht auf UTF-8 (8-bit Universal Character Set Transformation Format)-Kodierung umgesetzt, benötigt man unter anderem auch noch diese Zeichen-Ersetzung:

Zeichen - Name in HTML - Unicode in HTML ä - &auml; - &#228; Ä - &Auml; - &#196; ö - &ouml; - &#246; Ö - &Ouml; - &#214; ü - &uuml; - &#252; Ü - &Uuml; - &#220; ß - &szlig; - &#223; © - &copy; - &#169; " - &quot; - &#34; ' - - &#39; ⇐ - - &#8656; ⇒ - - &#8658; ⇑ - - &#8657; ⇓ - - &#8659; Leerzeichen - &nbsp; - &#160;

Diese Liste ist sicher in vielen Situationen hilfreich.


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.


23Mär2013

jQuery


Die JavaScript (objektorientierte Programmiersprache)-Klassenbibliothek "jQuery" hat sich mittlerweile zu einem Standard im Internet entwickelt. Mit relativ wenig Aufwand lassen sich Funktionalitäten verbessern und anspruchsvolle animierte Effekte realisieren. Als erstes wird die jQuery-Bibliothek in unseren Seiten eingebunden:

<script type="text/javascript" src="jQuery.js"></script>

Jetzt müssen die einzelnen Funktionen mit separaten JavaScripts (objektorientierte Programmiersprache) noch geschrieben werden. Das Programmieren läuft dabei meistens wie folgt ab.

Mit den folgenden Artikeln haben wir die auf dieser Website umgesetzten Effekte näher beschrieben.


27Jul2011

Ein Bild langsam aufblenden lassen


Veraltet!

Mit der folgenden Funktion wollen wir ein Bild langsam aufblenden lassen.

Dafür rufen wir als erstes die Funktion von JQuery mit: $(document).ready(function() auf. Und damit nicht alle Bilder auf unserer Website langsam aufgeblendet werden, müssen wir die Klasse des Monatsbildes mit $(".monatsbild") ansprechen.

Zuerst wird angegeben, dass das Bild nicht angezeigt wird und mit der nächsten Zeile wird der Effekt des Einblendens innerhalb einer Zeit angegeben.

$(document).ready(function() { $(".monatsbild img").css("display","none"); $(".monatsbild img").fadeIn(5000) } );


Neuere Umsetzung für ein langsames Aufblenden eines Bildes!

Wir haben uns hierbei von der aufwendigen JQuery-Bibliothek verabschiedet und das langsame Einblenden mit einem kleinen JavaScript (objektorientierte Programmiersprache) realisiert.

Das Foto wird zuerst ganz normal in HTML (HyperText Markup Language) mit der id-Klasse: "bild" eingebettet.

<img id="bild" src="/Link/bilder/klamonfra_banner.jpg" alt="Unser Banner" width="468" height="60">

Das Bild setzen wir aber nun mit JavaScript (objektorientierte Programmiersprache), und nicht mit CSS (Cascading Style Sheet), auf "nicht sichtbar". Das hat den Vorteil, dass das Bild bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) sichtbar ist!

document.write ( "<tyle type='text/css'> #bild {visibility: hidden} </style>" );

Nachdem die ganze Webseite geladen ist, rufen wir die Funktion "initBild" auf, in der die Deckkraft des Bildes als erstes auf "0" eingestellt wird.

Mit der Funktion "fadeIn" wird das Bild langsam wieder sichtbar, in dem wir in einer Schleife die Sichtbarkeit/Deckkraft um 3% erhöhen bis wir 100% erreicht haben.

Und mit der Funktion "setOpacity" sorgen wir für eine Umsetzung in den verschiedenen Browsern.

function initBild() { bildId = 'bild'; bil1 = document.getElementById(bildId); setOpacity(bil1, 0); bil1.style.visibility = "visible"; fadeIn(bildId,0); } function fadeIn(bildId,opacity) { if (document.getElementById) { bil2 = document.getElementById(bildId); if (opacity <= 100) { setOpacity(bil2, opacity); opacity += 3; window.setTimeout("fadeIn('"+bildId+"',"+opacity+")", 100); } } } function setOpacity(bil2, opacity { opacity = (opacity == 100)?99.999:opacity; // für IE bil2.style.filter = "alpha(opacity:"+opacity+")"; // für ältere Versionen Safari, Konqueror bil2.style.KHTMLOpacity = opacity/100; // für ältere Firefox bil2.style.MozOpacity = opacity/100; // für neuere Browser, CSS3 bil2.style.opacity = opacity/100; } window.onload = function() { initBild() }

Die Zugänglichkeit bei dieser Umsetzung ist in allen Fällen gegeben. Sowohl bei ausgeschaltetem JavaScript (objektorientierte Programmiersprache) als auch bei ausgeschaltetem CSS (Cascading Style Sheet) wird das Bild eingeblendet.

Zum Testen können sie die ["F5"-Taste] betätigen. Danach wird unser Banner wieder langsam eingeblendet.


Unser Banner

Zum Seitenanfang springen