Photoshop-Workshop-DVD - Webdesign

Verwandle deine Stylevorlage! Dieses Webdesign-Training für Photoshop stellt mit seinen 32 Stunden Video-Training und diversen Text-Workshops eine breite Basis dar, um deine Inhalte meisterhaft ins Web zu transportieren!

  • Webdesign mit Photoshop: alle erstellten Layouts mit PSD-Arbeitsdateien
  • Umsetzung erstellter Weblayouts in HTML/CSS und jQuery
  • SEO-Tipps vom Feinsten zur Suchmaschinenoptimierung

Bring Pep ins Web! Mit diesem Training erhältst du für bestes Webdesign das richtige Know-how!

Möchtest du mehr über dieses Training erfahren? Dann geht es hier direkt zu den Infos!

Dieses Training gibt es auch im Sparpaket


Vorteile sichern und zuschlagen


29.95 4eck Media GmbH & Co. KG
Tipp: Ab 9,95€/Monat in der Flatrate abonnieren!
Alle Preise verstehen sich inklusive MwSt.,
versandkostenfreie Lieferung
.
Photoshop-Workshop-DVD - Webdesign
Bewertungen
(51 Kundenrezensionen)
ISBN: 9783000313905
Software Kategorie Icon Kategorie Icon Kategorie Icon 
Weiterempfehlen

Die Photoshop-Workshop-DVD - Webdesign ist ein tiefgründiges Praxis-Lehrwerk zum Erlernen einer der beliebtesten Photoshop-Anwendungen: des Erstellens von Weblayouts. Lerne von erfolgreichen und anerkannten Praxisprofis, die ihre Ideen, ihre Herangehensweisen und ihre Techniken in 32 Stunden Video-Training und zahlreichen Tutorials beschreiben. Du erhältst einen umfassenden Einblick in die Arbeitsweise etablierter Webdesigner, die ihr Know-how in zahlreichen Praxisprojekten von A-Z erklären - angefangen beim Erstellen des Layouts in Photoshop bis hin zur Umsetzung in HTML/CSS.

Im Webdesign-Teil dieses Praxis-Trainings findest du 22 Stunden Video-Training zum Erstellen von Weblayouts in Photoshop:

  • Websites erstellen nach Themen: Portfolio und Business, Gastronomie und Party, ...
  • Styles und Designs in Weblayouts umsetzen: minimal und klassisch, Retro und Grunge, ...
  • Kreative Navigationskonzepte und Icondesign mit Photoshop
  • Tipps und Tricks zum Webdesign: Smartobjekte, Ebenenkompositionen, CS Live Features, ...
  • Layoutübergabe aus Photoshop

Im Coding-Teil dieses Praxis-Trainings erhältst du in über 10 Stunden Video-Training praktische Lösungen zur Umsetzung deiner Weblayouts - gespickt mit jeder Menge Tipps für effizientes Arbeiten und Tricks für peppige Effekte:

  • Umsetzung von Weblayouts in HTML & CSS sowie Tipps & Tricks zum Webdesign in Photoshop
  • Tipps und Tricks bei der Webentwicklung: Browsertests, SEO (Suchmaschinenoptimierung), Lightbox, Shadowbox, WYSIWYG-Editoren in Webseiten einbinden, print.css, ...
  • Grundlagen der Webentwicklung in Adobe Dreamweaver
  • Sonder-Teil zu jQuery: Peppige Effekte und funktionelle Animationen mit jQuery in Websites einsetzen

Begleitend zu den Video-Trainings verfügt dieses Praxis-Training über 50 Tutorials, die als HTML für die Webansicht und als PDF für die Web- und Druckansicht optimiert sind. Genieße diese Fülle und Qualität an Wissen zum Webdesign mit Photoshop!

Photoshop Webdesign

Fazit: Mit insgesamt 32 Stunden Videomaterial ist die DVD für sowohl Anfänger als auch Fortgeschrittene, die eigene Webseiten layouten und umsetzen möchten, eine Pflichtlektüre. Danach ist das Erstellen eigener Webseiten kein Problem mehr!

Deine Trainer

Pascal Bajorat

Pascal Bajorat ist ausgebildeter Mediengestalter und arbeitet von Berlin aus als Webentwickler für die 4eck Media GmbH & Co. KG. Er betreut diverse Online-Plattformen und Open-Source-Projekte, darunter sind auch einige WordPress-Plug-Ins.

Webseite: www.pascal-bajorat.com

Stefan Petri

Stefan Petri betreibt zusammen mit seinem Bruder Matthias das beliebte E-Learning-Portal PSD-Tutorials.de, das eine der ersten Anlaufstellen für Adobe-bezogene Tutorials im deutschsprachigen Internet ist. Schon 2002 kam er durch eine Webdesign-Fortbildung mit Photoshop und Co. in Kontakt und hat seitdem sein Wissen um Photoshop, Illustrator, InDesign und Dreamweaver kontinuierlich ausgebaut. In seinem Wirken auf PSD-Tutorials.de sowie in zahlreichen Tutorials und Video-Trainings lässt er sein Know-how für die Community einfließen.

Webseite: www.psd-tutorials.de

Matthias Petri

Matthias Petri leitet die Agentur 4eck Media und betreibt zusammen mit seinem Bruder Stefan das beliebte E-Learning-Portal PSD-Tutorials.de. Er ist Autor zahlreicher Tutorials und Video-Trainings zu Adobe Photoshop und InDesign und hat mit dem 237-seitigen E-Book "Haare freistellen - das Kompendium für Photoshops Königsdisziplin" (über 26.000 Downloads) eines der erfolgreichsten Photoshop-Bücher zum Thema Freistellen veröffentlicht.

Webseite: www.4eck-media.de

Philip Fuchslocher

Philip Fuchslocher ist Art Director Web bei der Messe Basel und nebenbei selbstständiger Diplom-Designer mit den Schwerpunkten Web-, Interface- und Icondesign. Neben der Veröffentlichung eines Buchs und einer Lern-DVD schreibt er regelmäßig für Fachmagazine, hält Vorträge und gibt Trainings zu Bildbearbeitung und Webdesign.

Webseite: www.philip-fuchslocher.de

Matthias König

Matthias König ist ein junger Designer, Art Director und Freelancer aus dem schönen Dortmunder Raum. Er hat eine Vorliebe für gutes Design. Damit verbindet er neben guter Gestaltung auch eine browser- und geräteübergreifende Funktionalität. Er bietet Konzeption, Design und Programmierung aus einer Hand.

Die Gestaltung von Medienprodukten ist für ihn genau dann gut gelungen, wenn sie in den Hintergrund tritt und ein positiven Gefühl vermittelt. Der Hauptdarsteller seiner Projekte ist immer die zu vermittelnde Information. Seine Produkte sind keine Kunstwerke. Sie sind Werkzeuge, um Sie und Ihre Kunden zu verbinden.

Webseite: www.pixelmetrie.de

Sascha Rudolph

Sascha Rudolph ist gelernter Mediengestalter und arbeitet als Art Director in Berlin. Sein Fokus liegt dabei auf der professionellen Organisation und der Erstellung von Webseiten. Er liebt es, benutzerorientierte Webseiten zu erstellen und diese mit HTML(5), CSS(3), jQuery und PHP umzusetzen. Seine Leidenschaft gilt der Erstellung von Composings, der Bildbearbeitung und der Automobil-Fotografie.

Webseite: www.rudolph-sascha.de

Jana Zemke

Jana Zemke ist Mediengestalterin für Digital und Print aus Berlin. Seit 2004 beschäftigt sie sich mit Photoshop, Bildbearbeitung und Retusche. 2008 begann sie ihre Laufbahn bei einem führenden Internetdienstleister und lernte, wie man spannende Layouts kreiert, die den Kunden überzeugen. Einladende Designs, die zum Anschauen und Lesen animieren, sind ihre Passion. Hinzu kommt sauberer und semantisch korrekter Code.

Webseite: www.janazemke.de

Daniel Koch

Daniel Koch ist seit 1998 in der Webentwicklung zu Hause. Nach dem klassischen Einstieg über HTML folgten schnell JavaScript und dynamische Sprachen wie PHP. Über verschiedene CMS hat er den Weg zu Contao und Joomla! gefunden. Dort reizen ihn vor allem der Open-Source-Gedanke, die Flexibilität und die Erweiterbarkeit. Auf Basis von Contao entwickelt er standardkonforme Seiten, die modern und suchmaschinenoptimiert sind.

Webseite: www.medienwerke.de

Auszug: Photoshop Webdesign-Video-Training - Browsertest, Tipps und Tricks zur Webentwicklung

In diesem Video-Training zeigt Pascal, wie du deine Websites am einfachsten in diversen Browsern testen kannst. Es werden folgende Tools verwendet: VMWare Fusion für Mac OS X, browsershots.org, spoon.net/Browsers

Bewertet mit 5 von 5 Sternen, basierend auf 51 Bewertungen.

01.06.2016

Für mich, der Photoshop aus dem Printbereich kennt, eine echte Bereicherung an Tips un Knifen.
5 von 5 Sternen.
18.01.2016

Super Training.
5 von 5 Sternen.
09.11.2015

Leicht verständlich, auch für Anfänger
5 von 5 Sternen.
01.08.2015

Absolut super Workshop. Viele Tipps und Tricks um mit Photoshop effizient Websites zu erstellen.
5 von 5 Sternen.
09.06.2015

Super Sache. Es erleichtert die Arbeit ungemein. Eine Kaufempfehlung von mir.
5 von 5 Sternen.
17.05.2015

Tolle DVD mit extrem viel nützlichen Infos. Begeistert.
5 von 5 Sternen.
11.04.2015

Eine sehr gut gemachte DVD. Teilweise wird zu viel Grundwissen vorausgesetzt, was Anfänger wahrscheinlich verzweifeln lässt.
Trotzdem habe ich viel lernen können. Vielen Dank.

5 von 5 Sternen.
07.04.2015

Erstmal danke für die super schnelle Abwicklung, trotz der Feiertage.
Die erste DVD ist proppevoll mit wunderschönen Beispielen und seht gut erklärt, damit man alles auch nachvollziehen kann. Freue mich auf die anderen DVDs

5 von 5 Sternen.
30.12.2014

dies war meine zweite Bestellung und ich habe es bis heute nicht bereut. Ich habe durch die DVD viel gelernt und konnte auch vieles davon umsetzen bei meinen Webseiten die ich bis dato erstellt habe.
5 von 5 Sternen.
19.11.2014

Jede Menge gute Anregungen für die tägliche Arbeit. Ich wünsche mir viele solcher DVD's.
5 von 5 Sternen.
29.09.2014

Ist Super, sehr viel gelernt. Immer wieder gut um Erlerntes wieder auf zu frischen!
5 von 5 Sternen.
28.05.2014

Hat mir beim anschauen sehr viele neue Ideen "generiert". Lern-DVD ist sehr verständlich. (auch für Anfänger)
5 von 5 Sternen.
28.04.2014

Passend für mein Studium. Sehr wertvoll !
5 von 5 Sternen.
11.04.2014

sehr hilfreiche DVD, danke daür
5 von 5 Sternen.
02.04.2014

War mir als damaliger Beginner eine große Hilfe
5 von 5 Sternen.
24.12.2013

Gut gegliedert Workshop - deutlich und verständlich erklärt
5 von 5 Sternen.
01.11.2013

super DVD, habe viel daraus gelernt
4 von 5 Sternen.
04.04.2013

Super Tutorial!! Hat mir echt weitergeholfen.
5 von 5 Sternen.
26.03.2013

Tolles Video, schöne Projekte, gut erklärt ...

4 von 5 Sternen.
15.02.2013

Die Workshop Photoshop-Webdesign DVD gefällt mir sehr gut.

Alles wird in einem guten Tempo erklärt, so dass es auch für mich als Änfänger möglich ist, die Schritte und Erklärungen gut nachzuvollziehen.

Auch gefällt mir die Auswahl an Beispiellayouts. Ich habe schnell einige gute Anregungen gefunden, die ich im mein Homepage Layout mit einbringen werde.

5 von 5 Sternen.
09.11.2012

Einfach Perfekt, Habe viele neue Schritte dank dieser Photoshop Workshop-DVD gelernt.
5 von 5 Sternen.
29.10.2012

Die DVD hat mir so einiges gezeigt was so alles in Photoshop steckt und wie man eine gute Website erstellt.
5 von 5 Sternen.
06.10.2012

Eine super Workshop-DVD.
Die DVD ist meiner Meinung nach sehr gut strukturiert aufgebaut.
Ich fand die Lerninhalte gut Erklärt und konnte vieles umsetzen.


4 von 5 Sternen.
18.09.2012

Einige Tipps und Tricks konnte ich schon anwenden.
Gute DVD.

5 von 5 Sternen.
23.08.2012

Nicht ein Cent ist Verschwendung. Tolle einfache Tutorials, die für mich leicht verständlich sind. Total gut zu gebrauchene Kniffe, um sein WebDesign aus Photoshop in eine Html-page zu packen. PSD-Team: Weiter so.
5 von 5 Sternen.
07.08.2012

Vielen Dank für diese großartige Arbeit! Durch diesen Workshop habe ich mehr vom Webdesign gelernt, als im Unterricht. Absolutes Daumen hoch! Bitte weiter so ;-)
5 von 5 Sternen.
16.05.2012

Die Photoshop-Workshop-DVD - Webdesign ist sehr Helfsreich
5 von 5 Sternen.
07.05.2012

Ein ausgezeichnetes Praxis-Lehrwerk, das mir das Layouten von Websites mit Photoshop ein ganzes Stück nähergebracht hat. Sehr informativ, anschaulich und nachvollziehbar gestaltet. Die Video-Trainings
bieten praktische Lösungen und jeder Menge Tipps und Tricks für effizientes Arbeiten.Sehr empfehlenswert!

5 von 5 Sternen.
18.04.2012

Sehr gut, verständlich und aktuell - vor allem die reinen Photoshop-Tutorials.
Lernteil Webentwicklung und Coding teilweise etwas zu schnell durchgezogen.
Mit freundlichen Grüßen
runde3

4 von 5 Sternen.
17.04.2012

Eine sehr vielseitige DVD mit tollen Ideen! Die DVD ist ihr Geld wert und ich erspare mir langwieriges suchen.
5 von 5 Sternen.
13.04.2012

Hat mir sehr geholfen, webdesign-Aufgaben umzusetzen
5 von 5 Sternen.
13.04.2012

Super gelungene DVD. Die Menüstrucktur ist klar und nachvollziehbar, so daß man auch später schnell den gesuchten Abschnitt findet, zum Nachschlagen beispielsweise. Sämtliche Workshops sind klar und und nebenbei werden noch Tricks verraten, die das Leben (mit PS und DW) leichter machen. Danke für die gelungene Arbeit.
5 von 5 Sternen.
13.04.2012

Sehr gute Sammlung mehrerer Tutorials zum Web-Design. Speziell zu empfehlen für "Anfänger". Ebenso auch die zweite Ausgabe Webdesign 2.
5 von 5 Sternen.
12.04.2012

Super DVD
5 von 5 Sternen.
12.04.2012

Viele Tipps und Anregungen zum Webdesign bzw. erstellen eigener Webseiten lassen sich dieser DVD entnehmen.
5 von 5 Sternen.
12.04.2012

Super DVD, wie von psd-tutorials gewohnt! Alles über die Erstellung von professionellen Webseiten mit praktischem Hintergrundwissen.
5 von 5 Sternen.
12.04.2012

Ich such mir ein Thema aus, spiel die Lektion ab, mach gleich mit und alles funzt - so soll es sein, bin so dankbar, weil das für mich die beste Art zu lernen ist :-) und ich lern richtig Brauchbares fürs Webdesign
5 von 5 Sternen.
12.04.2012

Sehr informativ, gut aufgebaut und leicht zuerlernen. Es hat viel Spaß gemacht.
5 von 5 Sternen.
12.04.2012

Gut und klar erklärt!
4 von 5 Sternen.
11.04.2012

...Hier bin ich Richtig!!!
5 von 5 Sternen.
11.04.2012

Klasse Training - für Anfänger wunderbar Schritt für Schritt alles verständlich erklärt - aber auch für Fortgeschrittene immer wieder lohnend, viele Ideen, Anregungen und Beispiele auch mal einen anderen Weg zu gehen, als den altbekannten. Volle Punktzahl von mir!
5 von 5 Sternen.
11.04.2012

Sehr gute Ideen samt Umsetzung, aber leider nur bedingt für PS7 oder PSE
4 von 5 Sternen.
11.04.2012

war richtig begeistert, macht weiter so!!!
5 von 5 Sternen.
11.04.2012

Eine tolle DVD und wird dementsprechend eingesetzt
5 von 5 Sternen.
11.04.2012

Eine sehr gute Sammlung und wird dementsprechend eingesetzt
5 von 5 Sternen.
25.03.2012

Endlich mal eine sehr hilfreiche Photoshop-DVD. Damit verstehe auch ich es.
5 von 5 Sternen.
23.03.2012

Sehr gut erklärt und inspirierend.Die Workshop-CD´s sind ideal für Einsteiger und Fortgeschrittene geeignet.
5 von 5 Sternen.
23.03.2012

Ich habe schon viele Produkte aus diesem Bereich gehabt. Aber keines hat sich so umfangreich um alles befasst. Es ist immer wieder beeindruckend wie das Fachwissen der anderen dazu dienen kann seine eigenen Projekte richtig gut umsetzten zu können. Echt ein hervorragendes Produkt.
5 von 5 Sternen.
12.03.2012

Top!!
5 von 5 Sternen.
10.01.2012

Tolle DVD, alles wird genau erklärt und ist leicht verständlich.
Kann die Lehr-DVD nur weiterempfelen.

5 von 5 Sternen.
07.01.2012

Super Tut. Danke für die tollen Infos.
5 von 5 Sternen.
ALLE

img

Klassische Business-Webseite im Portfolio-Stil erstellen

Länge: 70 Minuten
In diesem Video-Training erkläre ich, wie ein Portfolio erstellt wird. Unter anderem werden auch die Vorteile von Smart-Objekten erläutert und die Erstellung eigener Muster sowie zweier spektakulärer Hintergrundeffekte.

  Auf TutKit.com ansehen


img

Klassische Party-Webseite mit Hintergrundeffekten erstellen

Länge: 64 Minuten

In diesem Video-Training erkläre ich, wie eine Partywebseite aus nur 3 Fotos erstellt werden kann. Vor allem wird hier ein toller Hintergrundeffekt erstellt, der sich auf nahezu allen Einsatzgebieten gut einfügt. Außerdem wird hier viel Wert auf eine ordentliche Struktur innerhalb der Ebenenhierarchie gelegt und viele Tipps und Tricks, die den Alltag des Webdesigners sicher erleichtern werden.

  Auf TutKit.com ansehen


img

Minimale Portfolio-Webseite im eleganten Look erstellen

Länge: 54 Minuten
In diesem Video-Training erkläre ich dir, wie ein Portfolio durch den Einsatz von schwarzen Flächen in abgestimmter Transparenz sehr elegant wirken kann. Du erfährst darüber hinaus die wesentlichen Vorteile beim Arbeiten mit Smart-Objekten sowie einige Tipps im Umgang mit Icons/Symbolen anderer Websites.

  Auf TutKit.com ansehen


img

Kreative Portfolio-Webseite erstellen: Layout

Länge: 128 Minuten
Verfolgt die Entstehung des neuen Pixelmetrie.de-Layouts live! In diesem Tutorial wird sowohl die Konzeptionierung als auch die Ausarbeitung thematisiert und in Photoshop ausführlich und umfassend erklärt. Wer professionelle Websites erstellen will, wird dieses Video-Training lieben. Es zeigt die professionellen Techniken und Feinheiten, die den Unterschied machen!

  Auf TutKit.com ansehen


img

Appetitanregende Gastro-Webseite für ein Sushi-Restaurant erstellen

Länge: 67 Minuten
In diesem Video-Training zeige ich euch, wie ihr ein Design für ein Restaurant (Sushi) erstellen könnt. Dabei gehe ich konkreter auf verschiedene Freistell- und Kachelungstechniken ein.

  Auf TutKit.com ansehen


img

Appetitanregende Gastro-Webseite für eine Pizzeria erstellen

Länge: 87 Minuten
In diesem knapp 1:30h langen Video-Training werde ich dir zeigen, wie mit kleinen Effekten und Stocks ein Burger-/Pizza-Restaurant in Photoshop layoutet wird. Ein Hauptaugenmerk wird hier auf die Atmosphäre gelegt, um eine warme Stimmung in das Layout einzubauen. Gearbeitet wurde auch hier wieder mit Smart-Objekten.

  Auf TutKit.com ansehen


img

Klassische Business-Webseite im Floral-Stil erstellen: Layout

Länge: 85 Minuten
In diesem Video-Tutorial wird dir die Erstellung eines kompletten Weblayouts mit Photoshop gezeigt. Das Design ist modern und blumig-verspielt.

  Auf TutKit.com ansehen


img

Minimale Portfoliowebseite aus einem Foto erstellen

Länge: 24 Minuten
In diesem Video-Training zeige ich dir, wie du aus einem einzigen Foto eine gesamte Website kreieren kannst. Thema ist: Der Hochzeitsplaner stellt sich und seine Leistungen vor.

  Auf TutKit.com ansehen


img

Klassische Portfolio-Webseite im Minimaldesign erstellen

Länge: 67 Minuten
In diesem Video erfährst du, wie du ein simples Layout in Photoshop basteln kannst, das durch Schlichtheit besticht und den Inhalt der Seite besonders in Szene setzt. Dabei lernst du zudem Techniken und Vorgehensweisen zum strukturierten und effizienten Webdesignen in Photoshop kennen.

  Auf TutKit.com ansehen


img

Erstellung einer Portfolio-Webseite im Grunge-Stil mit Photoshop

Länge: 78 Minuten
In diesem Workshop erkläre ich, wie ein Portfolio im Grunge-Stil erstellt wird. Unter anderem werden auch die Vorteil mit SmartObjekt erläutert und die Erstellung eigener Muster sowie Tricks im Umgang mit Effekten + neuen Schriftarten. Natürlich sind im Video auch diverse kleine Tipps und Tricks verpackt! Ein Muss für jeden, der Webseiten erstellt. 

  Auf TutKit.com ansehen


img

Kreative Portfolio-Webseite im Grunge-Stil erstellen

Länge: 77 Minuten
Grunge - das ist wildes Temperament, Energie, Bewegung, trashige Anmutung, kaputte Optik, alles andere als sauber und aufgeräumt. In diesem Video lernst du neben dem sinnvollen Aufbau von Websites Wege kennen, um Grunge-Elemente wie ausgerissene Kanten, alt wirkende Bilder, Tesafilm, Badges, Schmutzflecken etc. zu einem atmosphärischen Gesamtbild zu kombinieren.

Anmerkung: Die Höhe des klassischen Viewports muss natürlich 576 Pixel sein, und nicht wie falsch genannt 546 Pixel. :)

  Auf TutKit.com ansehen


img

Erstellung einer Portfolio-Webseite im Kreidestil mit Photoshop

Länge: 71 Minuten
In diesem Workshop erkläre ich, wie ein Portfolio mit nur schwarzen Flächen und Transparenz sehr elegant wirken lässt. Unter anderem werden auch die Vorteil mit SmartObjekt erläutert und Tricks im Umgang mit Symbolen von anderen Webseiten gezeigt. Natürlich sind im Video auch diverse kleine Tipps und Tricks verpackt! Ein Muss für jeden, der Webseiten erstellen möchte.

  Auf TutKit.com ansehen


img

Klassische Business-Webseite mit räumlicher Navigation erstellen

Länge: 58 Minuten
In diesem Video-Training erkläre ich dir, wie eine klassische Business-Website mit einer räumlichen Navigation erstellt wird. Bezeichnend in diesem Video-Training ist die in den Raum ragende Navigation, die aus nur einer Formebene besteht. Auch erfährst du in diesem Video-Training, wie die Haare des Hauptmotivs im Header freigestellt wurden.

  Auf TutKit.com ansehen


img

Klassische Business-Webseite im modernen Marketing-Look erstellen

Länge: 70 Minuten
In diesem Video-Training zeige ich dir, wie du eine moderne Business-Webseite in Photoshop am Beispiel einer fiktiven Firma für Online-Marketing designen kannst.

  Auf TutKit.com ansehen


img

Klassische Business-Webseite im modernen Service-Look erstellen

Länge: 56 Minuten
In diesem Video zeige ich dir, wie ein Business-Design in Photoshop erstellt wird. Zusätzlich beschreibe ich noch einige Ideen, wie du das Design an deine Bedürfnisse anpassen kannst.

  Auf TutKit.com ansehen


img

Kreative Business-Webseite im Animal-Stil erstellen: Layout

Länge: 92 Minuten
In diesem Video-Tutorial wird die Erstellung eines mehrspaltigen Layouts in Photoshop thematisiert. Vorausgesetzt werden gute Freistellkenntnisse sowie routinierter Umgang mit Photoshop. Neben der reinen Erstellung werden auch Kreativtechniken beim Webdesign mit Photoshop beleuchtet.

  Auf TutKit.com ansehen


img

Klassisches Layout für ein DVD-Menü erstellen

Länge: 41 Minuten
Dieser Workshop erklärt die Erstellung einer Homepage in Adobe Photoshop CS4. Zum Anfang wird gezeigt, wie perfekte Verlaufsformen erstellt werden. Weiter geht es mit der Positionierung eines Logos und Text. Anschließend wird eine Navigation erstellt und mit dem Slice-Werkzeug für die HTML-Ausgabe vorbereitet. Ganz zum Schluss wird kurz auf die Bearbeitung mit Dreamweaver eingegangen, denn Roll-Over Buttons lassen sich nur noch damit realisieren, weil in Photoshop diese Funktion leider entfernt wurde. Dieses Video-Tutorial ist ein Muss für jeden, der selber schnell eine moderne, stylische Homepage erstellen möchte, und dabei auch auf eine geordnete Ebenenstruktur Wert legt.

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign in Photoshop

Länge: 47 Minuten
Photoshop ermöglicht es, spannende und detailverliebte Screendesigns zu entwerfen, ist aber eigentlich nicht für diese Aufgabe spezialisiert. Dieses Video zeigt euch Herangehensweisen, Tricks und Kniffe, wie ihr den Pixelboliden besonders effektiv für das Gestalten von Websites einsetzen könnt, welche Hilfsmittel euch dabei zur Verfügung stehen und worauf ihr unbedingt achten solltet, um eine durchdachte Seite zu erhalten. 

Bildquelle: 

  Auf TutKit.com ansehen


img

Detaillierter Orb als Navigationselement erstellen

Länge: 22 Minuten
In diesem Video-Training wird dir erklärt, wie du mit Photoshop mit Auswahl- und Verlaufswerkzeugen, Abwedler, Nachbelichter, Tonwertkorrekturen, Ebeneneffekten und Blendenflecken einen aufwendigen Orb erstellen kannst. Ein Orb lässt sich für Navigationsfunktionen wie z. B. als Enter-Seite ansprechend verwenden.

  Auf TutKit.com ansehen


img

Icondesign mit Photoshop


Icons sind mehr als optische Aufwertung eines Interfaces. Sie können die Usability deutlich verbessern - oder auch verschlechtern, wenn man es falsch angeht. Dieser Workshop zeigt konzeptionelle Ansätze und eine mögliche Vorgehensweise in Photoshop zum Erstellen eigener Icons anhand eines Beispielprojekts.

  Auf TutKit.com ansehen


img

CS Live Features

Länge: 30 Minuten
Mit der aktuellen Version CS5 hat Adobe die direkt in Photoshop integrierten Online-Features gehörig aufgestockt. In diesem Video erfahrt Ihr, wie Ihr Eure Entwürfe mit CS Review von Teammitgliedern oder Kunden online bewerten lassen könnt, wie die Browser Labs und Site Catalyst Euch bei der Planung und Umsetzung der eigenen Website helfen und wie Adobe Kuler Euch den nötigen kreativen „Farbanstoß“ verpasst. 

  Auf TutKit.com ansehen


img

Layoutübergabe aus Photoshop


Ein in Photoshop erstelltes Screendesign muss fachgerecht für die Verwendung im Web aufbereitet werden. Hierzu zählt an erster Stelle das fachgerechte Zerlegen in kleinere Einzelbilder. Dieser Artikel stellt verschiedene Methoden vor, dies zu bewerkstelligen.

  Auf TutKit.com ansehen


img

Klassische Business-Webseite im Portfolio-Stil erstellen: Coding in xHTML und CSS

Länge: 54 Minuten
In diesem Video wird die Umwandlung von einer Photoshop-Datei ins xHTML erläutert. Außerdem wird am Ende des Video-Trainings die Einbindung von Lightbox über jQuery gezeigt, um Bilder noch eleganter einblenden zu lassen. Umgesetzt wird alles in Dreamweaver. Die fertige CSS+xHTML-Datei befindet sich auf der Webdesign-DVD.

  Auf TutKit.com ansehen


img

Kreative Portfolio-Webseite erstellen: Coding in xHTML und CSS

Länge: 121 Minuten
Verfolgt die Entstehung des neuen Pixelmetrie.de-Layouts live! In diesem Video-Training wird das Coding in xHTML und CSS erklärt. Zusätzlich erfahrt ihr einige Tricks in Photoshop und Dreamweaver. Wer professionelle Websites erstellen will, wird dieses Video-Training lieben. Es zeigt die professionellen Techniken und Feinheiten, die den Unterschied machen!

  Auf TutKit.com ansehen


img

Klassische Business-Webseite im Floral-Stil erstellen: Coding in xHTML und CSS

Länge: 123 Minuten
In Fortsetzung des ersten Teils wird hier die komplette Umsetzung der Seite in HTML und CSS erklärt. Anhand des Video-Trainings kannst du mit deinem Weblayout zu einem ansehnlichen Ergebnis kommen, da alles Schritt für Schritt erklärt wird.

  Auf TutKit.com ansehen


img

Kreative Business-Webseite im Animal-Stil erstellen: Coding in xHTML und CSS

Länge: 85 Minuten
In diesem Screencast wird das Coding des zuvor erstellten Layouts mithilfe von Photoshop CS3 und Dreamweaver CS3 thematisiert. Voraussetzung sind gute xHTML- und CSS-Kenntnisse. Gezeigt werden unter anderem der Grundaufbau von CSS, die Arbeit mit DW-Templates und die browserfreundliche Erstellung von Hovereffekten. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: Einleitung und Themenübersicht

Länge: 18 Minuten

Einleitung zur Video-Tutorial-Reihe: Tipps und Tricks zur Webentwicklung.

Ich stelle dir in den folgenden Video-Trainings einige nützliche Firefox-Addons sowie diverse Tools, Scripte und WebLinks vor. Konkret geht es um:

Addons für Firefox:
Web Developer Toolbar, Firebug, AdBlock Plus

Scripte:
jQuery, jQueryUI, Prototype Lightbox, Shadowbox, Cufon, TinyMCE, CKEditor

Tools:
delicious.com

Links:
cssmania.com

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: Browsertest für Websites

Länge: 15 Minuten

In dem Video-Training zeige ich dir, wie du deine Websites am einfachsten in diversen Browsern testen kannst.

Es werden folgende Tools verwendet:
VMWare Fusion für Mac OS X
browsershots.org
spoon.net/Browsers

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: Prototype Lightbox 2

Länge: 22 Minuten
Tipps und Tricks zum Webdesign: Prototype Lightbox 2. In dem Video zeige ich euch, wie ihr die Prototype Lightbox 2 von Lokesh Dhakar in eure Webseite einbinden und anpassen könnt. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: Shadowbox

Länge: 13 Minuten
Tipps und Tricks zum Webdesign: Shadowbox. In diesem Video zeige ich euch, wie ihr die Shadowbox in eure Website integrieren könnt, wie ihr den Online-Generator verwendet und ein paar Beispiele zur Verwendung. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: Cufon

Länge: 14 Minuten
Tipps und Tricks zum Webdesign: Cufon. In diesem Video-Training zeige ich euch, wie ihr mithilfe des Scriptes Cufon Schriften in eurer Webseite verwenden könnt. Cufon bietet die Möglichkeit, z.B. ttf-Dateien zu konvertieren und in einer JavaScript Form auf der Webseite darzustellen. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: jQuery und jQuery UI

Länge: 27 Minuten
Tipps und Tricks zum Webdesign: jQuery und jQuery UI. In diesem Video zeige ich euch wie ihr einfache Animationen mit der jQuery erstellen könnt, wie die Grundstruktur und Aufbau der jQuery auszusehen haben. Weiterhin zeige ich einige Funktionsbeispiele aus dem jQuery UI Paket. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zur Webentwicklung: print.css

Länge: 14 Minuten
Tipps und Tricks zum Webentwicklung: print.css. In diesem Video zeige ich euch, wie ihr eure Webseite mithilfe der sogenannten print.css druckfreundlich gestalten könnt. Die print.css ist eine CSS Datei, die richtig angewandt eure Webseite auch auf dem Papier gut aussehen lässt. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zur Webentwicklung: CSS speziell für IE6

Länge: 4 Minuten
In diesem Video zeige ich euch, wie ihr CSS-Code erstellt, mit dem explizit der IE6 angesprochen wird. So können z.B. Bugs behoben oder spezielle Update-Nachrichten für den IE6 erstellt werden. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zur Webentwicklung: Dropdown Navigation mit CSS

Länge: 11 Minuten
In diesem Video zeige ich euch, wie ihr eine Dropdown Navigation mit CSS realisieren könnt. 

  Auf TutKit.com ansehen


img

Tipps und Tricks zur Webentwicklung: Conditional Comments

Länge: 8 Minuten
In diesem Video zeige ich euch, wie Ihr Conditional Comments verwenden könnt. Eine Übersicht über mögliche Konstellationen findet ihr unter diesem Link

  Auf TutKit.com ansehen


img

Tipps und Tricks zum Webdesign: Linktipps

Länge: 8 Minuten

Weiterführende Links mit Tipps und Tricks zur Webentwicklung stelle ich dir in diesem Video-Training vor.

- Farbhilfesysteme Kuler http://kuler.adobe.com/
- Linktipp für Icons: http://iconspedia.com/ und www.iconload.de 
- Linktipp zur Inspiration: http://cssmania.com/
- Linktipp Impressum-Generator: http://www.e-recht24.de/impressum-generator.html

  Auf TutKit.com ansehen


img

Tipps und Tricks zur Webentwicklung: WYSIWYG-Editoren in Webseiten einbinden

Länge: 12 Minuten
In diesem Video zeige ich euch, wie ihr die wohl zwei bekanntesten WYSIWYG-Editoren CKEditor und TinyMCE in eure Webseite einbinden könnt und welche Verwendungsbeispiele es gibt.

  Auf TutKit.com ansehen


img

Tipps und Tricks zur Webentwicklung: Suchmaschinenoptimierung - so geht's!

Länge: 69 Minuten
In diesem Video-Training zeige ich euch, worauf es bei der Suchmaschinenanmeldung ankommt, wie man seine Webseite analysiert und den Code für Suchmaschinen optimiert. Es werden alle wichtigen Basics und eine kleine Beispielanmeldung gezeigt. 

  Auf TutKit.com ansehen


img

Vorteile von Dreamweaver und dessen Voreinstellungen


In diesem Workshop möchte ich erklären, warum Dreamweaver einer der besten HTML-Editoren ist und wie dieses Programm noch besser an die Bedürfnisse angepasst werden kann.

  Auf TutKit.com ansehen


img

Erweitern mit dem Extension Manager und Befehle hinzufügen durch das Verlaufsprotokoll


Dreamweaver bietet von Haus aus schon sehr viele Funktionen. Dank des Extension Managers kann man diese um noch mehr Funktionen erweitern. Wie genau das geht, erkläre ich hier. Außerdem werde ich kurz erklären, wie eigene Befehle, die immer wieder benötigt werden, abgespeichert werden.

  Auf TutKit.com ansehen


img

Siteverwaltung - Webseite in Dreamweaver anlegen


Dreamweaver bietet mehrere Funktionen, mit denen Sites verwaltet und Dateien zu bzw. von einem Remote-Server übertragen werden können. Darüber hinaus enthält Dreamweaver Funktionen, die die Teamarbeit an einer Website erleichtern, wie z. B. Einchecken/Auschecken und Design Notes.

  Auf TutKit.com ansehen


img

Dokumenteigenschaften definieren


In den vorhergehenden Workshops habe ich euch gezeigt, wie Dreamweaver am besten voreingestellt und wie mit der Siteverwaltung gearbeitet wird. Jetzt wird"s endlich ernst. Ich werde in diesem Workshop zeigen, wie die grundlegenden Dokumenteinstellungen vorgenommen werden (HTML und ein klein wenig CSS).

  Auf TutKit.com ansehen


img

Tabellenbearbeitung in Dreamweaver


Tabellen spielen in der HTML-Sprache eine grundlegende Rolle. Früher wurden fast alle Webseiten mithilfe von Tabellen designt. Heutzutage benutzt man lieber CSS. Jedoch kann es leider immer noch zu Darstellungsunterschieden bei verschiedenen Browsern kommen. Darum möchte ich euch erklären, wie mithilfe von Dreamweaver sehr einfach mit Tabellen gearbeitet werden kann.

  Auf TutKit.com ansehen


img

Bildformate, Bilder einfügen und ausrichten, Hotspots und Platzhalter


In diesem Workshop möchte ich kurz zeigen, welche Formate im Internet benutzt werden, wo die Vor- und Nachteile sind und wie diese in Dreamweaver bearbeitet bzw. richtig platziert werden können. Außerdem möchte ich erklären, wie mit Hotspots und Platzhaltern gearbeitet wird.

  Auf TutKit.com ansehen


img

Arbeiten mit Frames in Dreamweaver


In diesem Workshop möchte ich kurz erklären, was Frames sind und wie man damit in Dreamweaver arbeitet.

  Auf TutKit.com ansehen


img

Aktionen steuern mihilfe der Verhaltenspalette in Dreamweaver


JavaScript ist nicht jedermanns Sache, jedoch geht das Erstellen bestimmter Standard-Aktionen mit Dreamweaver sehr einfach. Darum möchte ich erklären, wie man JavaScript in Dreamweaver durch die Aktionspalette einsetzt.

  Auf TutKit.com ansehen


img

Arbeiten mit Ebenen bzw. AP-Elementen in Dreamweaver


Dank Ebenen (DIVs) ist es endlich möglich, Elemente, egal ob Text oder Grafiken, frei zu positionieren. Früher mussten dafür umständlich die Tabellen herhalten. Dank Dreamweaver können diese Ebenen mit der Maus flexibel angelegt und ausgerichtet werden. Das Geniale ist dabei, dass alles in die Ebenen reingepackt werden kann: Text, Bilder, Tabellen, Menüs usw.

  Auf TutKit.com ansehen


img

Hyperlinks, Anker, E-Mail-Links, absolute und relative Pfade


Hyperlinks sind wichtigste Navigationselemente einer HTML-Seite, denn damit ist es überhaupt möglich, verschiedene Dokumente miteinander zu verbinden. Meistens wird dafür ein Menü angelegt. Im Grunde sollte jeder schon vorab wissen, was Hyperlinks eigentlich sind. Aber die Arbeit mit Hyperlinks birgt auch so einige Gefahren, denn Links können schnell ins Leere führen. Da schafft Dreamweaver Abhilfe! Was genau noch beachtet werden sollte und worin die Unterschiede zu absoluten und relativen Pfaden bestehen, wie Anker gesetzt werden und E-Mail-Hyperlinks erstellt werden, möchte ich in diesem Workshop erklären.

  Auf TutKit.com ansehen


img

Arbeiten mit Vorlagen (bearbeitbare und wiederholende Bereiche)


Die Arbeit mit Vorlagen in Dreamweaver erspart dir sehr viel Zeit, denn damit ist es möglich, viele HTML-Dateien, die alle ein gleiches Design haben, durch eine einzige Vorlagendatei zu steuern. So kannst du mit nur wenigen Handgriffen Tausende HTML-Dateien vom gesamten Layout ändern (Farbe, Schriften, Struktur). Bei Vorlagen musst du bearbeitbare Bereiche definieren. Bereiche, die nicht explizit zur Bearbeitung freigegeben wurden, sind so vor ungewollten Veränderungen geschützt. Damit kannst du Mitarbeitern einer Firma Vorlagen zur Verfügung stellen, um für ihre Arbeitsbereiche neue Seiten zu erstellen oder zu pflegen, ohne Angst um das Grundlayout haben zu müssen. Vorlagen kannst du von jedem beliebigen HTML-Dokument oder auch PHP usw. erstellen.

  Auf TutKit.com ansehen


img

HTML-Formulare erstellen und mit CSS & Javascript gestalten


HTML-Formulare sind im Internet die mit am häufigsten genutzte Schnittstelle zwischen User und Webmaster. Denn damit ist es möglich, z. B. Kontakt mit dem Webmaster aufzunehmen oder Fragen/Bestellungen loszuwerden.

  Auf TutKit.com ansehen


img

Alle Tipps und Tricks beim Arbeiten mit Quellcode in Dreamweaver


Trotz des sehr mächtigen WYSIWYG-Editors von Adobe Dreamweaver kommst du in der Regel um die direkte Arbeit am Quellcode nicht herum. Dreamweaver stellt dir einige hervorragende Werkzeuge dafür zur Verfügung. Das Arbeiten in Quelltexten wurde seit Version 8.0 (damals noch Macromedia) nochmals verbessert, sodass es wirklich denkbar einfach und komfortabel ist, direkt im Quelltext zu arbeiten. Mit umfangreicheren Websites steigt der Anteil der Arbeit im Quelltext. Viele spezifische Einstellungen können, gerade wenn es um dynamische Websites geht, nicht in der Entwurfsansicht erfolgen. Mit zunehmender Erfahrung wirst du feststellen, dass es häufig auch wesentlich schneller geht, direkt im Quelltext zu arbeiten.

  Auf TutKit.com ansehen


img

Der Umgang mit Flash in Adobe Dreamweaver


Dreamweaver und Flash arbeiten sehr gut miteinander zusammen. Ist ja auch kein Wunder, schließlich kommen beide Programme von Adobe (vorher von der Firma Macromedia hergestellt).

  Auf TutKit.com ansehen


img

jQuery - Eine Einführung


JavaScript ist längst nicht mehr aus dem Web-Alltag wegzudenken. Kein Wunder, zu groß sind die Vorteile, die diese Sprache bietet. Ein Problem gibt es allerdings: Will man wirklich ansprechende Ergebnisse erzielen, muss man sich vergleichsweise gut mit dieser Sprache auskennen. Und sollen dann auch noch Ajax-Applikationen erstellt werden, sollten tiefgreifende JavaScript-Kenntnisse vorhanden sein. Hapert es hier, sind gute Ergebnisse kaum möglich. Genau an dieser Stelle kommt das JavaScript-Framework jQuery ins Spiel. Was es damit auf sich hat und wie man es effektiv einsetzt, wird in mehreren Tutorials auf psd-tutorials.de gezeigt.

  Auf TutKit.com ansehen


img

jQuery - Mit Selektoren arbeiten


Nachdem man die jQuery-Bibliothek erfolgreich eingebunden hat, geht es mit der Arbeit erst so richtig los. Entscheidender Bedeutung kommt dabei den Selektoren zu. Denn mit denen lässt sich ganz gezielt auf einzelne Elemente des DOM (Document Object Model) zugreifen. In diesem Tutorial lernt ihr die Arbeit mit eben diesen Selektoren kennen. Das geschieht zunächst anhand von Beispielen, bevor dann einige grundlegende Dinge zum DOM beschrieben werden.

  Auf TutKit.com ansehen


img

jQuery - Elemente ein- und ausblenden


Der Zugriff auf die Elemente einer Seite mit normalem JavaScript ist zwar möglich, allerdings nicht ganz einfach. Anders sieht das bei jQuery aus. Dieses Tutorial demonstriert, was jQuery auf dem Gebiet der DOM-Manipulation draufhat. Gezeigt wird das anhand zahlreicher Beispiele. So erfahren Sie unter anderem, wie sich die Sichtbarkeit von div-Elementen per Mausklick ändern lässt. Wofür das Ganze gut sein soll? In dem div-Element könnte beispielsweise ein Bild enthalten sein, das man nun ganz einfach per Mausklick ein- und wieder ausblenden kann. Mit jQuery sind solche Anwendungen problemlos umsetzbar.

  Auf TutKit.com ansehen


img

jQuery - Bilder vorladen


Wer Bildergalerien aufbaut, kennt das Problem: Bis die Bilder vollständig geladen werden, dauert es manchmal eine – wenn auch kleine – Weile. Und während dieser Wartezeit bekommen die Besucher dann lediglich die Alternativtexte der Bilder zu sehen. Elegant ist das freilich nicht. Dank der jQuery-Ereignisbehandlung und einer entsprechenden Ajax-Vorschaugrafik kann man die Ladezeit optisch ansprechender gestalten.

  Auf TutKit.com ansehen


img

jQuery - Sanftes Scrollen


Bei sehr langen Webseiten verwendet man am besten Anker, um den Benutzern die Möglichkeit zu bieten, direkt zu der gewünschten Stelle zu springen. Das ist praktisch, schließlich müssen die Benutzer dann nicht erst lange auf der Seite scrollen. Einen Haken (oder doch zumindest kleinen Schönheitsfehler) hat die Sache allerdings: Die Sprünge passieren abrupt. Mit jQuery lässt sich das deutlich eleganter lösen. Denn hier kann man dafür sorgen, dass die Seite langsam bis zum definierten Anker gescrollt wird.

  Auf TutKit.com ansehen


img

jQuery - Menüs aufpeppen


Mit jQuery kann man seine Menüs gehörig aufpeppen. Grund genug also, dass in diesem Tutorial zwei Varianten vorgestellt werden, die zeigen, wie effektiv die Menü-Arbeit mit jQuery sein kann. In einer losen Abfolge von Tutorials werden dann immer mal wieder Menüvarianten vorgestellt. Hier geht es zunächst aber um ein Aufklapp-Menü und eines, das auf besondere Art und Weise die aktuelle Position anzeigt.

  Auf TutKit.com ansehen


img

jQuery - Mit Plug-ins arbeiten (am Beispiel einer Diashow)


Dass jQuery ein mächtiges Framework ist, wurde in den bisherigen Tutorials mehr als deutlich. Dennoch gibt es noch eine Steigerung. Durch Plug-ins lässt sich das Framework nämlich um weitere Funktionen erweitern. Dank dieser Plug-ins kann man beispielsweise Ajax-Effekte integrieren und Menüs auf besondere Art und Weise darstellen. Dieses Tutorial zeigt, woher man die Plug-ins bekommt und wie man diese einbindet. Da sich diese Thematik erfahrungsgemäß am besten mit einem Beispiel demonstrieren lässt, wird das hier anhand des Plug-ins Cycle gezeigt. Mit diesem Plug-in lassen sich effektvolle Diashows realisieren.

  Auf TutKit.com ansehen


img

jQuery - vordefinierte Effekte nutzen


Das jQuery-Framework bietet zahlreiche Möglichkeiten zum Animieren von CSS-Eigenschaften. Wer also schon immer mal Bilder dynamisch ein- und ausblenden lassen wollte, kann das nun dank jQuery ganz einfach erledigen. Und das ist einer der großen Unterschiede zur Definition von Animationen mit "normalem" JavaScript. Denn dort ist die Arbeit mit Timern und Intervallen vergleichsweise umständlich. In diesem Tutorial werden zunächst die vordefinierten Effekte gezeigt, die jQuery zu bieten hat. Darüber hinaus kann man aber auch eigene Animationen definieren. Mehr zu diesem Thema dann in einem späteren Tutorial.

  Auf TutKit.com ansehen


img

jQuery - Verschiedene Frameworks parallel verwenden


jQuery bietet zahlreiche Funktionen, mit denen sich normalerweise die meisten Probleme, mit denen man es als Web-Entwickler zu tun hat, lösen lassen. Allerdings kann es durchaus sein, dass man früher oder später an die Grenzen von jQuery stößt oder sich ein anderes Framework einfach besser eignet, man jQuery aber ebenfalls nutzen möchte. Oder denken Sie beispielsweise an die Fähigkeiten der MooTools. Nicht selten möchte man dieses Framework parallel zu jQuery einsetzen. Dabei gilt es allerdings einige Regeln zu beachten. Welche das genau sind, wird in diesem Tutorial beschrieben. Denn beachtet man diese Syntaxregeln nicht, kann es zwischen den Frameworks zu Konflikten kommen, die sich in Skriptfehlern bemerkbar machen.

  Auf TutKit.com ansehen


img

jQuery - eigene Effekte definieren


Eine der Besonderheiten von jQuery ist die Möglichkeit zur Definition eigener Effekte. Dank dieser selbst definierten Effekte lassen sich CSS-Eigenschaften von Elementen animieren. Ein typisches Beispiel dafür ist die position-Eigenschaft, über die sich die Position eines Elements bestimmen lässt. Animiert man nun mittels jQuery-Effekt eben dieses position, kann man das betreffende Element dynamisch verschieben lassen. Genau um solche Dinge geht es im vorliegenden Tutorial. Im Vordergrund steht dabei die Frage, wie man eigene Effekte definieren kann.

  Auf TutKit.com ansehen


img

jQuery - Ein Menü mit nmcDropDown erstellen


Menüs sind das Salz in der Suppe jeder Webseite. Schließlich ermöglichen gut gestaltete Menüs, die übersichtlich und einfach zu bedienen sind, den Besuchern eine reibungslose Navigation durch das Projekt. jQuery macht die Definition ansprechender Menüs besonders einfach. Wer sich mit seinem Menü noch mehr von der Masse abheben möchte, kann zusätzlich auf eines der zahlreichen jQuery-Plug-ins zurückgreifen. Eines dieser Plug-ins ist nmcDropDown, das in diesem Tutorial anhand von Beispielen vorgestellt wird.

  Auf TutKit.com ansehen


img

jQuery - Dialoge, Accordions & Co. mit jQuery UI


Mit jQuery user interface (UI) gibt es eine auf jQuery aufsetzende Bibliothek, die zahlreiche Funktionen für Effekte, Animationen und Widgets bietet. Insgesamt erweitert jQuery UI den Kern von jQuery um eine Reihe leistungsstarker Interaktions-Plug-ins. Die Plug-ins sind üblicherweise sehr komplex, lassen sich allerdings einfach konfigurieren.

  Auf TutKit.com ansehen


img

jQuery - Einen Datumspicker erstellen


Mit der Bibliothek jQuery UI lassen sich fortgeschrittene Anwendungen erstellen, ohne dass man dabei viel Code benötigen würde. Das ist auch bei einer sehr oft benötigten Anwendung der Fall: einem Datumspicker. Über einen solchen Datumspicker kann man ganz einfach das gewünschte Datum auswählen. Wie sich ein Datumspicker erstellen lässt, wird in diesem Tutorial gezeigt. Zusätzlich gibt es Hinweise zur optischen Anpassung und dem Übersetzen der standardmäßig in englischer Sprache verfügbaren Datumsauswahl.

  Auf TutKit.com ansehen


img

jQuery - Eingabefelder beim Fokussieren leeren


Besonders die Ereignisbehandlung ist in jQuery äußerst gelungen und ermöglicht ansprechende Anwendungen. Kein Wunder, schließlich lassen sich alle möglichen Events abfragen. In diesem Tutorial wird eine typische Event-Anwendung gezeigt. Dabei geht es um Eingabefelder, die einen vordefinierten Beispieltext besitzen. Klickt ein Anwender nun in eines dieser Felder oder bekommt ein Feld auf eine andere Art den Fokus zugewiesen, wird es geleert. Danach können in die Felder wie gewohnt die gewünschten Texte eingetragen werden.

  Auf TutKit.com ansehen


img

jQuery - Grundlagen der Formularvalidierung


Auch auf dem Gebiet der Formularbehandlung weiß jQuery zu überzeugen. Vor allem die Kontrolle der von den Benutzern eingegebenen Werte stellt sich mit jQuery besonders komfortabel dar. Gerade hier wird der Vorteil gegenüber „normalem“ JavaScript deutlich. Denn will man dort z.B. ein E-Mail-Feld daraufhin überprüfen, ob tatsächlich eine E-Mail-Adresse eingefügt wurde, braucht man dafür sehr viel Code. Bei jQuery können Sie sich hingegen deutlich kürzer fassen. Neben den jQuery-Bordmitteln gibt es übrigens auch zahlreiche Plug-ins, mit denen die Formularvalidierung noch besser gelingt.

  Auf TutKit.com ansehen


img

jQuery - Formulare mit Ketchup validieren - Teil 01


Für jQuery gibt es zahlreiche Plug-ins, mit denen sich Formularfelder auf korrekten Inhalt hin überprüfen, also validieren lassen. Die Auswahl reicht dabei von eher spartanischen Lösungen bis hin zu komplexen Anwendungen. Einige der wichtigsten Plug-ins werden Sie im Rahmen dieser Tutorialreihe kennenlernen. Den Anfang macht Ketchup, eine vergleichsweise einfache Lösung, die für viele Anwendungen allerdings völlig ausreichend ist.

  Auf TutKit.com ansehen


img

jQuery - Formulare mit Ketchup validieren - Teil 02


Im ersten Teil der kleinen Ketchup-Tutorialreihe wurde gezeigt, wie man mittels Ketchup eigene Validierungsfunktionen umsetzen kann. Das ist natürlich nicht jedermanns Sache. Allerdings kann man das Ketchup-Plug-in auch ohne das Schreiben eigener Funktionen nutzen. Denn das Plug-in bietet umfangreiche Basisvalidierungsfunktionen, die die meisten Anwendungszwecke abdecken. Lernen Sie in diesem Tutorial die wichtigsten dieser Funktionen kennen.

  Auf TutKit.com ansehen


img

jQuery - Tabellen mit Tablesorter sortieren - Teil 01


Logisch, dass Tabellen für das Layouten von Webseiten nicht mehr verwendet werden sollten. Das bedeutet allerdings längst noch nicht, dass man auf Tabellen in Gänze verzichten muss. Denn gerade dann, wenn es um die Präsentation von Daten geht, sind Tabellen unschlagbar. Denken Sie nur an Zugfahrpläne o.Ä. HTML-Tabellen haben also durchaus ihre Berechtigung. Allerdings müssen Tabellen dank jQuery längst nicht mehr so statisch wie "früher" daherkommen. Denn mit ein wenig jQuery-Code lassen sich Tabellen per Mausklick sortieren. Genau darum geht es in diesem Tutorial.

  Auf TutKit.com ansehen


img

jQuery - Tabellen mit Tablesorter sortieren - Teil 02


Wie sich mit dem Tablesorter-Plug-in Tabellen sortieren lassen, wurde in einem ersten Tutorial bereits gezeigt. Allerdings bietet Tablesorter noch zahlreiche andere Möglichkeiten. Diese betreffen zunächst einmal die reine Funktionalität. Ebenso hat das Plug-in aber auch noch einiges auf dem Gebiet der optischen Anpassung zu bieten. In diesem Tutorial stehen zunächst zusätzliche Funktionalitäten im Vordergrund. Dabei geht es darum, wie Sie Daten per Mausklick in Tabellen einfügen können. Ein anderes Beispiel zeigt, auf welche Weise sich Tabelleninhalte durch Anklicken eines Hyperlinks sortieren lassen.

  Auf TutKit.com ansehen


img

jQuery - Menüs mit Superfish - Teil 01


jQuery wird sehr oft für den Aufbau von Menüs verwendet. Kein Wunder, schließlich gibt es mittlerweile unzählige Menü-Plug-ins. Eines davon ist Superfish. Dieses Plug-in ermöglicht es jedem, ein sogenanntes Superfish-Dropdown-Menü in seine Webseite zu integrieren.

  Auf TutKit.com ansehen


img

jQuery - Menüs mit Superfish - Teil 02


Im ersten Superfish-Tutorial wurden die Basisfunktionen des jQuery-Plug-ins Superfish vorgestellt. Mit denen muss man sich aber nicht zufriedengeben. Denn Superfish ermöglicht noch einiges mehr. So kann man beispielsweise explizit auf sehr lange Menüeinträge reagieren, um so unerwünschte Zeilenumbrüche zu vermeiden. Ebenso kann man aber auch Menüs anlegen, die eine doppelte Menüleiste haben. Genau um solche Verfeinerungen von Superfish-Menüs geht es in diesem Tutorial. Zum Abschluss erfahren Sie dann noch, welche Dateien relevant sind, wenn es um optische Anpassungen der auf Superfish basierenden Menüs geht.

  Auf TutKit.com ansehen


img

jQuery - Tooltips - Teil 01


Mit jQuery lassen sich erstklassige Tooltips aufbauen. Solche Tooltips sind in erster Linie dafür da, Zusatzinformationen zu Bildern, Links, Formularfeldern usw. zu liefern. Angezeigt werden diese Informationen dann, wenn mit dem Mauszeiger über den entsprechenden Bereich gefahren wird. In diesem und den nächsten Tutorials geht es um die verschiedenen Tooltip-Aspekte. Aber noch etwas anderes lernen Sie kennen: den Einsatz der jQuery Tools. Zunächst hier anhand der Tooltips, später auch in Verbindung mit anderen Dingen.

  Auf TutKit.com ansehen


img

jQuery - Tooltips - Teil 02


Der Einstieg in die Welt der jQuery-Tools wurde im ersten Tutorial anhand der Tooltips gezeigt. In diesem Zusammenhang wurde auch bereits darauf hingewiesen, dass sich die Tooltips mit allerlei zusätzlichen Optionen konfigurieren lassen. Welche es gibt und wie Sie mit denen noch ansprechendere Tooltips erstellen können, wird in diesem Tutorial beschrieben. Sie erfahren hier unter anderem, wie sich die Tooltips konfigurieren und mit HTML-Syntax aufpeppen lassen.

  Auf TutKit.com ansehen


img

jQuery - Tooltips - Teil 03


Tooltips dienen natürlich nicht nur optischen Zwecken. Tatsächlich können sie die Benutzerfreundlichkeit von Webseiten erhöhen. So lassen sich beispielsweise Formulare mit Tooltips ausstatten, um den Benutzern Hilfestellung beim Ausfüllen der Formularfelder zu bieten. Ebenso kann man Tooltips aber auch innerhalb von Tabellen und Listen einsetzen, um erklärende Informationen zu liefern. Und noch etwas wird in diesem Tutorial gezeigt: Nämlich wie sich aus Listen und Tabellen überflüssige Einträge durch Anklicken eines Papierkorbsymbols entfernen lassen.

  Auf TutKit.com ansehen


img

jQuery - scrollbare Bereiche


Scrollbare Bereiche sind Ihnen sicherlich schon auf unzähligen Webseiten begegnet. Und in der Tat verwundert deren zunehmende Beliebtheit nicht im Geringsten. Schließlich lassen sich Inhalte dank dieser Technik äußerst platzsparend auf der Webseite unterbringen. Um scrollbare Bereiche umzusetzen, gibt es verschiedene Möglichkeiten. Eine der effektivsten ist dabei zweifellos der Einsatz der jQuery-Tools. Und genau darum geht es in diesem Tutorial.

  Auf TutKit.com ansehen


img

jQuery - Eine Ajax-Einführung


Im Zusammenhang mit JavaScript und jQuery darf ein Aspekt natürlich nicht fehlen: Ajax. Dieses Asynchronous JavaScript and XML ist – anders als oftmals angenommen – keine eigene Programmiersprache, sondern ein Konzept der asynchronen Datenübertragung zwischen Browser und Server. Mit jQuery lassen sich Ajax-Anwendungen vergleichsweise einfach umsetzen. In diesem und weiteren Tutorials wird gezeigt, wie sich Ajax innerhalb des jQuery-Frameworks nutzen lässt.

  Auf TutKit.com ansehen


img

jQuery - Baummenüs mit Treeview


Baummenüs kennen Sie sicherlich von zahlreichen Webseiten. Von Vorteil sind solche Menüs vor allem im Bezug auf die Übersichtlichkeit. Aber auch wenn es darum geht, sehr viele Menüeinträge platzsparend unterzubringen, helfen solche Baummenüs weiter. Für jQuery gibt es zahlreiche Plug-ins, mit denen sich solche Baummenüs umsetzen lassen. Eines davon ist Treeview, das in diesem Tutorial vorgestellt wird.

  Auf TutKit.com ansehen


img

jQuery - Eine Lightbox mit prettyPhoto


Will man Fotos eindrucksvoll präsentieren, bietet sich der Einsatz einer sogenannten Lightbox an. Eine solche Lightbox ist eine Art Popup-Fenster, in dem Grafiken angezeigt werden. Im Unterschied zu einer klassischen Fensterlösung wird bei einer Lightbox allerdings kein neues Fenster geöffnet. Vielmehr wird ein Container erstellt, in dem die Bilder angezeigt werden. Üblicherweise wird dabei – um die Aufmerksamkeit noch mehr auf die Bilder zu lenken – die eigentliche Seite abgedunkelt. Für jQuery gibt es sehr viele Lightbox-Plug-ins. In diesem Tutorial wird gezeigt, wie Sie eine Lightbox auf Basis des prettyPhoto-Plug-ins anlegen können.

  Auf TutKit.com ansehen


img

jQuery - Die Schrift mit FontEffect ändern


Wer ausgefallene Schriftarten oder Schrifteffekte auf seiner Webseite verwenden möchte, hat prinzipiell zwei Möglichkeiten: Die Texte werden als Grafiken eingebunden, oder man setzt CSS ein. Beide Lösungen sind allerdings nicht befriedigend. Genau hier kommt das jQuery-Plug-in FontEffect ins Spiel. Denn damit lassen sich Schatten, Verläufe, Spiegelungen usw. auf Texte anwenden.

  Auf TutKit.com ansehen


img

jQuery - Drag&Drop


Wie heißt es so schön in der deutschsprachigen Wikipedia zum Thema dieses Tutorials: "Drag and Drop, oft auch Drag&Drop oder Drag'n'Drop, deutsch „Ziehen und Fallenlassen“, kurz D&D, ist eine Methode zur Bedienung grafischer Benutzeroberflächen von Rechnern durch das Bewegen grafischer Elemente mittels eines Zeigegerätes". Und genau darum geht es nun. Wie also lassen sich mittels jQuery Anwendungen auf Drag-&-Drop-Basis erstellen?

  Auf TutKit.com ansehen


img

jQuery - Tabs/Registerkarten anlegen


Auf immer mehr Webseiten findet man die sogenannten Tabs. Solche Tabs sind nichts anderes als Registerkarten, über die verschiedene Inhalte ein- und ausgeblendet werden können. Das Besondere an der in diesem Tutorial vorgestellten Lösung: Die Inhalte, die sich hinter den jeweiligen Registerkarten verbergen, sind bereits geladen. Somit kann zwischen den einzelnen Tabs hin- und hergewechselt werden, ohne dass die Webseite neu geladen werden muss. Neben einem klassischen Skript wird in diesem Tutorial auch eins gezeigt, das für solche Webseite interessant ist, die sich der Zugänglichkeit verpflichtet haben, die also barrierefrei arbeiten.

  Auf TutKit.com ansehen


img

Mitscrollende Navigation mit jQuery


In diesem Tutorial zeige ich Ihnen, wie Sie eine mitscrollende Navigation realisieren. Dies geht mithilfe von DOM Events und der CSS Object Model View relativ einfach und browserübergreifend. Der Scroll-Effekt basiert auf jQuery.

  Auf TutKit.com ansehen


img

jQuery - Bildergalerien mit einem Zoom-Effekt ausstatten


Im Rahmen dieser jQuery-Tutorialreihe auf PSD-Tutorials.de wurden bereits mehrfach Möglichkeiten vorgestellt, wie sich Bildergalerien mittels jQuery aufbauen lassen. Noch interessanter wird das Ganze, wenn die Galerien mit zusätzlichen Effekten ausgestattet werden. Sehr beliebt ist hier der sogenannte Fancy-Effekt. Dabei werden die Bilder zunächst als Thumbnails angezeigt. Wird mit dem Mauszeiger über diese Thumbnails gefahren, vergrößern sich die Grafiken automatisch. Wie sich dieser Effekt anwenden lässt, wird in diesem Tutorial anhand zweier typischer Anwendungen gezeigt.

  Auf TutKit.com ansehen


img

jQuery - Automatisch skalierende Hintergrundbilder


Hintergrundgrafiken haben normalerweise eine feste Größe. Dass das nicht unbedingt so sein muss, hat bereits vor einiger Zeit die Webseite GOTOCHINA bewiesen, die unter http://ringvemedia.com/ zu finden ist. Das Besondere an dieser Seite: Das Hintergrundbild passt sich automatisch der Fenstergröße des Browsers an. Mit dem passenden Zubehör lassen sich solche Anwendungen auch in jQuery umsetzen.

  Auf TutKit.com ansehen


img

jQuery - Bildergalerien im Lightbox-Stil


Längst haben sich die sogenannten Lightboxen im Zusammenhang mit der Präsentation von Bildern auf Webseiten etabliert. Kein Wunder, schließlich lassen sich damit Bilder auf eindrucksvolle Weise anzeigen, ohne dass dabei permanent neue Browserfenster geöffnet werden müssen. In diesem Tutorial wird gezeigt, wie sich Vorschaubilder über den Lightbox-Effekt vergrößern lassen. Im jQuery-Umfeld gibt es dafür unterschiedliche Plug-ins. Für dieses Tutorial fiel die Wahl auf das jQuery lightBox plugin.

  Auf TutKit.com ansehen


img

jQuery - Bildausschnitte zoomen


Mit dem Plug-in gzoom können Bilder vergrößert und verkleinert werden. Dafür kann man auf die vorhandenen Plus- und Minuszeichen klicken. Damit aber nicht genug. Denn auch das Mausrad lässt sich zum Vergrößern und Verkleinern der Bilder nutzen. Und noch ein Effekt ist möglich: Bewegt man den Mauszeiger über das betreffende Bild, kann man den Bildausschnitt verändern.

  Auf TutKit.com ansehen


img

Einfaches Vorladen von Bildern (HTML+Javascript)


Der einfachste und unkomplizierteste Weg, Grafiken für eine Website vorzuladen. Für Programmieranfänger gut geeignet, keine speziellen Kenntnisse erforderlich.

  Auf TutKit.com ansehen


img

jQuery - Bilder effektvoll präsentieren


Gerade auch auf psd-tutorials.de finden sich immer wieder Links auf Webseiten, die Bildergalerien anbieten. Nun kann man Bilder bekanntermaßen ganz unterschiedlich präsentieren. Wer genug hat vom Einheitsbrei, sollte einmal einen Blick auf das Plug-in jQuery Cycle werfen. Denn damit lassen sich Bilder tatsächlich eindrucksvoll in Webseiten einbinden, und das mit erstaunlich wenig Aufwand.

  Auf TutKit.com ansehen


img

jQuery - eine Lightbox für (fast) alle Inhalte


Dass sich Bilder dank jQuery sehr einfach in einer Lightbox präsentieren lassen, wurde auf PSD-Tutorials.de bereits gezeigt. In diesem Tutorial wird ein weiterer Lightbox-Clone vorgestellt. Mit dem fancybox-Plug-in lassen sich allerdings nicht nur Bilder in einer Lightbox anzeigen, auch beliebige HTML-Inhalte und Videos können problemlos integriert werden. Bei aller Funktionsvielfalt kommt erfreulicherweise eine sehr einfache Bedienung des Plug-ins hinzu.

  Auf TutKit.com ansehen

Mithilfe der Lernkurve erfährst du, welche weiteren Themen zu deinem ausgewählten Training inhaltlich am besten passen. So erkennst du auf einen Blick, wie dir der einfache Einstieg zum gekonnten Aufstieg am besten gelingt und du kannst dein eigenes Know-how zielführend einschätzen.