Frage zum Wiki-Artikel „Bildwechsler“

[Gerhard G]

Hallo, ich bin gerade am programmieren meiner neuen website (mit Adobe Dreamweaver).

Ich habe vor 15 Jahren mal einen Grundkurs mit Dreamweaver gemacht.

Man kann also sagen, ich bin blutiger Anfänger.

Ich möchte einen Bildwechsler einbauen, mit 10 svg-Bilder, mit der Zoom-Funktion, so wie es hier im Forum beschrieben wird.

Kann mir jemand helfen oder das machen?

Viele Grüße aus der Südwestpfalz,

Gerhard

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML!

ich bin gerade am programmieren meiner neuen website (mit Adobe Dreamweaver).

Ich habe vor 15 Jahren mal einen Grundkurs mit Dreamweaver gemacht.

So habe ich auch angefangen.

Ich möchte einen Bildwechsler einbauen, mit 10 svg-Bilder, mit der Zoom-Funktion, so wie es hier im Forum beschrieben wird.

Kann mir jemand helfen oder das machen?

Ja, helfen!

Evtl. willst du über die Feiertage mal die Grundlagen lesen:

• HTML/Tutorials/Einstieg
• CSS/Tutorials/Einstieg

Andererseits will man ja auch gleich praktische Erfolge erzielen. Speicher dir den Bildwechsler (Beispiel:Bildwechsler-3.html) mal lokal ab und versuche die Datei zu verändern:

• anderer header, anderes Layout.
• Du kannst ja schon mal die Bilder durch deine SVGs ersetzen.
  • die Regelsätze mit -webkit- habe ich entfernt - die braucht man nicht mehr
  • Wenn Du mehr als 3 Bilder einfügen willst, musst du die keyframes und die Zeiten ebenfalls anpassen.
  • Heute würde man für so etwas CSS custom properties nehmen.

Die Warnung zum Beispiel hast du gesehn?

Beachten Sie: Die Bilder werden im HTML-Code doppelt angezeigt, damit nach dem Durchlaufen der Animation kein weißer Hintergrund zu sehen ist. So ist diese CSS-Animation eher ein proof of concept als eine best practice; trotzdem aber eine Alternative zu einer JavaScript-basierten Diashow.

Evtl. wäre eine JavaScript-Lösung besser und benutzerfreundlicher:

• JavaScript/Tutorials/Web_Animations/Komfort-Bildwechsler

Herzliche Grüße und frohe Weihnachten!

Matthias Scharwies

[Rolf B]

Hallo Gerhard,

der von Dir genannte Wiki-Artikel beschreibt einen Bildwechsler mit HTML und CSS, frei von JavaScript.

Ohne Kenntnis deiner HTML Seite kann Dir da keiner helfen. Wir wissen auch nicht, an welcher Stelle dein eigenes Verständnis ausgesetzt hat.

Die Frage, wie sich unser Animations-Bildwechsler mit Dreamweaver verheiraten lässt, kann Dir vermutlich nur jemand sagen, der auch Dreamweaver verwendet. Zumindest ich wäre da abgehängt, ich schreibe mein HTML selbst und ich weiß nicht, wie weit Dich Dreamweaver vom eigentlichen HTML fernhält. Die Adobe-Homepage scheint anzudeuten, dass Du volle Kontrolle über das HTML hast. In dem Fall: Frisch auf! Leg die figure-Strukturen an und häng die Bilder 'rein, so wie beschrieben. Ein Stylesheet wirst Du im Dreamweaver sicherlich auch erzeugen können, und dort die Regeln einbauen, die im Artikel stehen.

Grundsätzliche Wissenslücken zum Thema HTML und CSS kann unser Wiki sicherlich schließen, aber dafür musst Du Zeit investieren.

Rolf

[Der Martin]

Hallo Rolf,

Die Frage, wie sich unser Animations-Bildwechsler mit Dreamweaver verheiraten lässt, kann Dir vermutlich nur jemand sagen, der auch Dreamweaver verwendet.

wer heute Dreamweaver verwendet, dürfte ein ganz anderes Produkt vorfinden als Gerhard, der nach eigener Aussage von 15 Jahren einmal etwas damit gemacht hat. Ich verstehe ihn so, als hätten seine Aktivitäten (was das Web angeht) seither weitgehend geruht.

Damals™ ist Dreamweaver von vielen semi-professionellen Webentwicklern verteufelt worden. Das Programm war in erster Linie als WYSIWYG-Editor ausgelegt, mit dem man sich nahezu ohne Fachkenntnisse Webseiten zusammenklicken konnte. Der so erzeugte Kot - äh, Code war in der Regel grauenvoll und meistens auf den ersten Blick daran zu erkennen, dass er von Javascript-Funktionen mit dem Namenspräfix MM_ (nach dem damaligen Herausgeber Macromedia) wimmelte.

Wirkliche Profis haben wohl gelten lassen, dass Dreamweaver auch das Arbeiten auf Quellcode-Ebene anbietet. Aber mal ehrlich: Wer so weit ist, dass er damit umgehen kann, braucht Dreamweaver eigentlich nicht mehr.

Das sage ich als jemand, der das Tool auch nur vom Hörensagen kennt. Aber trotz meiner Unwissenheit bin ich auch heute noch geneigt zu raten: Finger davon.

Grundsätzliche Wissenslücken zum Thema HTML und CSS kann unser Wiki sicherlich schließen, aber dafür musst Du Zeit investieren.

Ja, aber etappenweise ist sicher jemand bereit, ihm ein Stückchen den Weg zu zeigen.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Matthias Scharwies]

Servus!

...

Ich kenn's nich, red aber mal drüber ;-)

Adobe Dreamweaver ist eine IDE / ein Komfort-Editor so wie alle anderen Adobe-Produkte auch.

Bei Adobe Professional zur Bearbeitung von PDFs, Photoshop und Illustrator sagt doch auch keine(r) zu den Profigrafikern, dass sie die Finger davon lassen sollen.

Kostet halt Geld im Unterschied zu den gleichwertigen Produkten der Mitbewerber.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Ich hab's oben ja schon mal kurz angesprochen, dass das Beispiel eigentlich kein Vorbild zum Nachmachen, sondern eher ein "proof of concept" war.

Eigentlich würde ich meine Zeit in den Komfort-Bildwechsler und die benutzerfreundliche Steuerung von Animationen stecken. Andererseits gibt's da attraktive Tutorials mit custom properties und scroll-snap:

• matemarschalko.medium.com/css-only-interactive-swipeable-image-carousel

Müsste man sich mal überlegen, ob man auch so etwas ins Wiki bringen kann / soll.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

man müsste es auf jeden Fall selbst verfassen. Der Autor vom Artikel schreibt, dass das ein Auszug aus seinem Buch "All you need is HTML and CSS" sei...

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

man müsste es auf jeden Fall selbst verfassen. Der Autor vom Artikel schreibt, dass das ein Auszug aus seinem Buch "All you need is HTML and CSS" sei...

Ja, und wenn, aber nur wenn, dann sollte eins der vorhandenen Bsp im Tutorial ersetzt werden. Dazu eben noch den Einbau von prefers-reduced-motion, was bei dem fehlt und wenn es dann um Steuerung geht, sind wir schon wieder bei JavaScript.

(Stu Nicholls hatte in cssplay.co.uk um die Jahrtausendwende selbst die Button-Steuerung nur mit CSS und :target gemacht - da brauchte man aber für jedes einzelne Bild zwei eigene Buttons - das geht mit JS leichter!)

Herzliche Grüße

Matthias Scharwies