webdesign am niederrhein
   webdesign   leistungen   service   projekte   infowelten   workshops   buchtipps   kontakt 
Webdesign am Niederrhein: Unsere kostenlosen Workshops
webdesign - workshopDer Niederrhein ist eine Kulturregion und das war harte Arbeit.

Die Provinz wird nicht einfach so Kulturregion. Das, was den Niederrhein auszeichnet und liebenswert macht ist eine Vielfalt die erarbeitet werden musste. Heute heißt es: Alles ist möglich!
Auch im Bereich Webdesign. Mit DHTML, CSS, PHP und XML. Aber auch diese Vielfalt muss erarbeitet werden. Auf diesen Seiten finden Sie ein paar Workshops für den Einsteiger, die das Leben erleichtern können. Manchmal soll die Arbeit ja auch Spass bringen.
Workshop 1
photoshopbeispiel3D Button mit PHOTOSHOP
Photoshop ist nicht nur ein mächtiges Bildbearbeitungs-
programm. Seine zahlreichen Funktionen ermöglichen auch einfaches grafisches Arbeiten.
Wie Sie in diesem Workshop sehen werden, können Sie mit dem Verlaufswerkzeug auf einfache Weise in nur sechs Schritten 3D Buttons für Ihre eigene Homepage erstellen.

1. SCHRITT
Öffnen Sie das Bildbearbeitungsprogramm PHOTOSHOP.
Als erstes erstellen Sie eine neue Datei (STRG+N) mit einer Höhe einer Breite von 100 Pixeln. Stellen Sie in der Werkzeugleiste die Vordergrundfarbe auf Weiß und die Hintergrundfarbe auf Schwarz.

2. SCHRITT
Erstellen Sie mit dem Auswahloval aus der Werkzeug- leiste einen Kreis.
button schritt 2

3. SCHRITT
Wählen Sie das Verlaufswerkzeug aus der Werkzeugleiste und stellen die Optionen ""Verlauf auf Vorder- zu Hinter- grundfarbe und "Art" auf kreisförmig. Füllen Sie nun den Kreis, in dem Sie von links oben nach rechts unten (innerhalb der Auswahl) mit der Maus (gedrückte Maustaste) ziehen.
button schritt 3

4. SCHRITT
Verkleinern Sie die immer noch vorhandene Auswahl um 5 Pixel (Folgende Schritte sind dazu in der Menüleiste nötig: Auswahl > Auswahl verändern > Verkleinern). Füllen Sie dann die kleinere Auswahl wie in Schritt 3, nur dass Sie diesmal von rechts unten nach links oben ziehen.
button schritt 4

5. SCHRITT
Verkleinern Sie die immer noch vorhandene Auswahl um weitere 3 Pixel und wiederholen die Verlaufsfüllung wieder in die andere Richtung wie in Schritt 3.
button schritt 5

6.SCHRITT
Fügen Sie nun noch mit dem Textwerkzeug einen Text in passender Größe hinzu und fertig ist der 3D Button.
button schritt 6

Für eine Navigation ist der eben erstellte 3D-Button in der Regel zu groß. In diesem Fall erstellen Sie eine kleine Datei, z.B. 50 x 50 Pixel und vollziehen die Schritte erneut nach. In diesem Fall müssen Sie die Auswahl allerdings ebenfalls entsprechend verkleinern. Also im 4.Schritt nur um 3 Pixel, im 5.Schritt um 1 Pixel.
Auch andere Farbgebungen sind natürlich möglich.
Probieren Sie einfach etwas aus.
Workshop 2
Selbstschliessendes PopUp-Fenster
PopUps zählen nicht unbedingt zu den beliebtesten Erscheinungen des Internets.
Dennoch können Sie manchmal sinnvoll sein, wenn Sie z.B. auf Neuigkeiten hinweisen wollen, ohne gleich Ihre ganze Internetpräsenz verändern zu müssen.
Wie Sie in diesem Workshop sehen werden, gelingt es mittels Javascript ein selbstschliessendes Fenster für Ihre eigene Homepage zu erstellen, dass auch über den Bildschirm schweben kann.
Das Script funktioniert in allen gängigen Browsern, es sei denn der Besucher hat einen PopUp-Blocker aktiviert. In diesem Fall bleibt Ihr Fenster leider unsichtbar.

1. SCHRITT
Erstellen Sie das Fenster, das später aufgerufen werden soll, als eigene HTML-Datei.
Falls Sie eine Grafik einbinden wollen, achten Sie auf deren Größe. Da die Größe des PopUps festgelegt ist, kann es Ihnen sonst passieren, dass ein Teil der Grafik verschwindet oder gescrollt werden muss. Die Größe kann zwar angepasst werden, wie Sie den Erläuterungen des Scripts weiter unten entnehmen können, aber Sie sollten das Fenster auch nicht zu aufdringlich gestalten.

2. SCHRITT
Fügen Sie folgendes Javascript in den Head-Bereich der HTML-Datei Ihrer Website ein, von der aus das Popup aufgerufen werden soll:

<script type="text/javascript">
<!--
var x = 100;
fenster = window.open("dateinamePopUp.html","Neu",
"width=200,height=100,left=x,top=100");
function bewege()
{
if(x<screen.width - 200)
{
x++;
fenster.moveTo(x,100);
setTimeout("bewege()",50):
}
else
fenster.close();
}
//-->
</script>

Um die Javascript-Funktion aufzurufen muss im Body-Tag der Befehl onLoad="bewege()" eingefügt werden.

Damit bewegen Sie ein kleines Fenster über den Monitor, dass sich automatisch schließt, wenn es em rechten Bildrand angekommen ist.

Durch den Befehl fenster=window.open wird beim Öffnen der Internetseite das PopUp automatisch geöffnet.
Über width und height legen Sie die Größe des Fensters fest.
Der Abstand vom linken Bildschirmrand wird durch left bestimmt. In diesem Fall wird es durch die Variable X definiert. Mit top wird der Abstand vom oberen Bildrand festgelegt.

Durch die onLoad-Funktion im Body-Tag wird die Bewegung initiiert. screen-width überprüft die Bildschirmbreite. fenster.moveTo verschiebt das PopUp zum rechten Bildschirmrand. setTimeout bestimmt die Geschwindigkeit.

Hat das Fenster den rechten Bildschirmrand erreicht, sorgt fenster.close dafür, dass das PopUp verschwindet. Der Besucher Ihrer Internetseite muss es also nicht extra wegklicken.
Downloadversion
Webdesign am Niederrhein: DownloadversionDer obige Text steht auch als Download (PDF-Datei, ca. 600 KB) für Sie bereit.
Druckversion
Webdesign am Niederrhein: DruckversionDer obige Text steht zum Ausdruck für Sie bereit.
 
© copyright 2005 by webdesign am niederrhein - grafikwelten bocholt
powered by grafikwelten webdesign und illustration - bocholt - borken - wesel