Webseite erstellen in Form eines Buches

Lola.Tintenklexs schrieb am 02.05.2019 um 13:34 Uhr

Hallo,

ich bin vor ein paar Tagen vom NOF auf MAGIX WEB-Designer (neueste Premium Version) umgestiegen. Erste Schritte und Seiten habe ich schon offline erstellt. Das Ergebnis sieht auch schon annehmbar aus. Ich habe hier im Forum mich als Gast umgesehen und ein paar gute Hinweise gefunden. Für die leicht verständlichen Hinweise herzlichen Dank an Alle.

Die horizontale Navigation klappt sehr gut. Auch die Navigation-Buttonleiste funktioniert.

Eines meiner Probleme ist die Darstellung meiner Buchseite(n) = Bild im .gif / .png -Format, auf die die unterschiedlichen Texte platziert werden. Sie sind immer gleich groß, haben aber verschiedene Motive, so dass die Option als Hintergrund entfällt. Beim Einfügen (Bild aus ... Datei) wird allerdings nie die Originalgröße dargestellt. Die Einstellung über die entsprechenden Buttons sind zeitaufwändig und leider leidet die Bild-Qualität darunter. Was mache ich falsch?
So sieht meine Seite bisher aus = www.bunterlei.de.

Herzlichen Dank für Eure Hilfe.

Lola.Tintenklexs

Kommentare

BeRo schrieb am 03.05.2019 um 00:03 Uhr

[...] Eines meiner Probleme ist die Darstellung meiner Buchseite(n) = Bild im .gif / .png -Format, auf die die unterschiedlichen Texte platziert werden. Sie sind immer gleich groß, [...]

Wie meistens, gibt es auch hier verschiedene Möglichkeiten zum Ziel zu kommen... 😉

Auf der aktuellen (NOF) Site benutzt Du für die Anzeige der Unterseiten komplett gestaltete Seiten, die natürlich auch jeweils komplett geladen werden.
Den damit generierten Zeit- und Traffic Verlust kannst Du kompensieren, wenn Du den wechselnden Inhalt einer Seite (Deine "Buchseiten") in einem Platzhalter anzeigst. Ein weiterer Vorteil der Methode ist die absolut passgenaue Anzeige der Objekte der Hauptseite beim Wechsel der Unterseiten, da sich der fixe Inhalt der Hauptseite nicht ändert.

Im WD Editor kann das so aussehen:

Die fertige Seite zeigt sich so:

Schau Dir mal die online Demo an, dann kannst Du den Erfolg der Methode besser erkennen...

Den zugehörigen Thread im Forum findest Du hier. Da wird auch genau erklärt, wie Du die Methode in die eigene Site einbauen kannst.

Nicht ganz so aufwändig im Aufbau aber vergleichbar in der Wirkung ist die Alternativmethode, die mit Platzhaltern und popup Ebenen arbeitet.
Der Aufbau im Editor ist ähnlich, wie oben gezeigt:

Die Umsetzung ist aber etwas einfacher, wie Du es im zugehörigen Forum Thread nachlesen kannst.

[...] Beim Einfügen (Bild aus ... Datei) wird allerdings nie die Originalgröße dargestellt. [...]

Das ist die Standard Einstellung beim Import von Bildern, die normalerweise nicht geändert werden muss.
Bilder in der Originalgröße, also in höherer Auflösung, kosten nur Ladezeit und Speicherplatz und sie zeigen auf normalen Monitoren- u. Smartphones keine bessere Qualität.

Probier' mal Dein Glück mit den o. a. Tipps und wenn Du Fragen hast, einfach wieder melden... 😊

Viel Erfolg

Lola.Tintenklexs schrieb am 13.07.2019 um 20:50 Uhr

Hallo BeRo.

vielen Dank für Deine Lösungsvorschläge. Habe sie beide ausprobiert. Lösung für meine Buchseiten nicht so optimal. Habe daher die Seiten "normal" erstellt und immer wieder die Größen angepasst. Das "vorläufige" Ergebnis ist inzwischen unter www.dolores-design.de im Netz.

Sorry für meine Ungeduld ...

Lola T

BeRo schrieb am 14.07.2019 um 00:44 Uhr

Hi, Lola.

[...] Lösung für meine Buchseiten nicht so optimal. [...]

Die von Dir gefundene Lösung sieht doch gut aus. Aber was hältst Du davon, ein "echtes" Buch in Deine Website einzubinden, in dem man richtig blättern kann?

So kann das aussehen (klick).

Das lässt sich relativ einfach umsetzen, wenn Du eine passende Software benutzt, die z. T. sogar kostenfrei zu haben ist. Als Quelle der einzelnen Seiten kannst Du u. a. vorhandene JPG Bilder nehmen oder PDF Seiten oder xxx
Die Demo (eine zufällige Reihenfolge von Bildern Deiner Site) ist mit dem "Flip Builder" gemacht, den Du hier in einer Standard Version kostenfrei herunterladen kannst. Das Ergebnis eines damit erstellten Buchs ist eine HTML5 Datei, die Du ganz einfach in einem Platzhalter per iframe Code in Deine Site einbindest...

Schau's Dir mal an...

Lola.Tintenklexs schrieb am 14.07.2019 um 12:34 Uhr

Ola, BeRo,

danke für Deinen Vorschlag mit meinem Buch! Ich finde es toll!

Diese Idee hatte ich auch. Habe mir dafür auch die entsprechende "Profi"-Software gekauft. Leider ist darin die gesamte Anleitung (wollte ich weiterführend für Verlinkungen, Animationen etc. z.B. in meiner Hexen-Chronik nutzen) in Englisch.Obwohl die Werbung vermittelt, das Programm ist in Deutsch. Meine Nachfrage ergab, dass es die Anleitungen nur in Englisch gibt. Da meine Englisch-Kenntnisse nicht (mehr) ausreichen, um alles zu verstehen, habe ich vom Rücktrittsrecht Gebrauch gemacht. Auch habe ich festgestellt, das das mit dem Verschicken des Flip-Buches per E-Mail nicht geht: Keiner meiner Empfänger konnte z.B. die .exe-Datei öffnen ...

Werde aber es aber jetzt nochmals mit der kostenlosen Version versuchen - mit dem Projekt "Schnecken-Party" und versuchen, es im Bunterlei-Buch einzubinden.

Dazu brauche ich aber Hilfe, wie das genau mit dem Platzhalter / iframe geht.
Habe, zum Einbinden meines als animierte Webseite erstelltes Projekt "Worte gefunden", bereits hier im Forum nach entsprechenden Anleitungen gesucht. Auch auf deren Basis "herum gebastelt", anders kann ich es nicht nennen, aber es hat nicht funktioniert.

Ein ganz herzliches Dankeschön für Deine Bemühungen für meine Seite!

Ich bedanke mich gerne mit einer meiner Zeichnungen ...

Lola T.

BeRo schrieb am 14.07.2019 um 15:12 Uhr

[...] Da meine Englisch-Kenntnisse nicht (mehr) ausreichen, um alles zu verstehen, habe ich vom Rücktrittsrecht Gebrauch gemacht. [...]

Es gibt noch einige Alternativen (klick). Vielleicht ist da etwas dabei, das Dir eher zusagt... 😉

[...] Auch habe ich festgestellt, das das mit dem Verschicken des Flip-Buches per E-Mail nicht geht: Keiner meiner Empfänger konnte z.B. die .exe-Datei öffnen [...]

Das ist völlig normal, weil jedes E-Mail Programm, das etwas auf sich hält, die Weitergabe von ausführbaren Dateien (hier eine EXE Datei) unterbindet.
Die bessere Variante ist die Weitergabe einer ZIP Datei, die du direkt mit dem Programm erstellen kannst:

Benutzt Du ein anderes Programm, kannst Du den HTML Export benutzen und damit das Buch zunächst lokal exportieren. Aus den exportierten Dateien/Verzeichnissen machst Du dann mit einem geeigneten Packprogramm (z. B. WinRar) eine ZIP Datei, die Du anschließend per E-Mail verschickst.
Aber Achtung! Viele Provider beschränken die Dateigröße auf eine geringe MB Größe. Je nach Buchumfang können beim Export aber leicht mehrstellige MB Größen herauskommen.

[...] Dazu brauche ich aber Hilfe, wie das genau mit dem Platzhalter / iframe geht. [...]

Wenn Du beim Export des fertigen Buchs so vorgehst, wie oben angedeutet, dann hast Du als Ergebnis eine HTML Datei (+ div. Verzeichnisse), die Du ganz einfach mit einem iframe Code in den HTML Body eines Platzhalters einbinden kannst.
Damit das auch online funktioniert, musst Du das Verzeichnis mit der HTML Startdatei und den zugehörigen Verzeichnissen natürlich noch auf Deinen Webserver kopieren, z. B. mit FileZilla.
So kann ein passender iframe Code aussehen, wenn das fertige Buch vorab in den Ordner "FlipBook" exportiert wurde:

<iframe src="./FlipBook/index.html" width="100%" height="100%" frameborder="0" scrolling="non" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

Und so sieht das im WD Editor aus:

Eine fertige Website (Einzelseite), die den o. a. Platzhalter enthält, kannst Du als online Demo hier ansehen.
Darin enthalten ist auch die Smartphone Variante, die das Buch in einer größeren Darstellung ohne Doppelseiten enthält...
Die dazu gehörende Projektdatei kannst Du hier herunterladen.

Damit die Projektdatei auch auf Deinem PC funktioniert, musst Du vorher noch das Verzeichnis "FlipBook" anlegen, in dem Du das exportierte Flip Book abgelegt hast (Startdatei: "index.html"). Sonst funktioniert's nicht... 😋

Probier's nochmal.

Viel Erfolg 👍

Lola.Tintenklexs schrieb am 14.07.2019 um 22:20 Uhr

Hallo BeRo,

vielen Dank für Deine schnelle Antwort! Deine vielen Informationen ... den Link auf die anderen Flip-Buch-Anbieter..

Ich habe seinerzeit das erstellte Flip-Buch als Zip-Datei verschickt ... Vielleicht hat es tatsächlich an der Dateigröße gelegen. Werde beim neuen darauf achten...

Ich werde mir die deutschen Flipbuch-Anbieter ansehen / ausprobieren und dann Deine ausführlichen Informationen zum Einbinden auf meiner Seite nutzen. Ich freue mich schon jetzt auf die Ergebnisse.

Melde mich, wenn es geklappt hat oder falls ich doch noch Hilfe brauche.

Ich finde Dein Engagement absolut super!

Herzliche Grüße

Lola T.